/* ----- Main tones ----- */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: linear-gradient(135deg, #13763C, #4A8C52, #669B5C, #7DAA68, #C5D080);
  color: #fff;
  min-height: 100vh;
}
/* ----- Crear publicación ----- */
.post-box {
  background: rgba(255,255,255,0.9);
  color:#13763C;
  padding:20px;
  border-radius:10px;
  margin:20px 0;
  cursor:pointer;
}
.post-form { display:none; margin-top:10px; }
.post-form input, .post-form textarea { width:100%; margin:5px 0; padding:8px; border-radius:4px; border:1px solid #ccc; }
.post-form button { padding:10px 20px; background:#13763C; color:white; border:none; border-radius:5px; cursor:pointer; font-weight:bold; }

/* ----- Tipo de publicación ----- */
.type-option {
  padding: 8px 12px;
  background: #13763C;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  user-select: none;
}
.type-option.selected {
  background: #669B5C;
}
.type-container {
  display:flex;
  gap:10px;
  margin:5px 0 15px 0;
}
/* ----- Contenedor flotante para crear publicaciones ----- */
#floatingCreatePost {
  position: sticky;
  top: 20px;
  width: 90%;
  max-width: 800px;
  margin: 20px auto;
  z-index: 10;
  animation: fadeInUp 0.5s ease forwards;
}

.floating-card {
  background: linear-gradient(135deg, #13763C, #4A8C52, #669B5C);
  color: #fff;
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  padding: 20px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.floating-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.4);
}

.post-box {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  padding: 15px;
  background: rgba(255,255,255,0.2);
  color: #fff;
  border-radius: 12px;
  cursor: pointer;
  margin-bottom: 15px;
  transition: background 0.3s;
}

.post-box:hover {
  background: rgba(255,255,255,0.3);
}

/* Formulario dentro del floating card */
.post-form input,
.post-form textarea {
  width: 100%;          /* no ocupa todo el card */
  max-width: 600px;    /* ancho máximo */
  margin: 8px auto;    /* centrado horizontal */
  display: block;      /* para que se centre con margin auto */
  padding: 10px;
  border-radius: 10px;
  border: none;
  font-size: 14px;
  background-color: rgba(255,255,255,0.9);
  color: #13763C;
  box-sizing: border-box;
}

.post-form button {
  width: auto;           /* no ocupa todo el card */
  padding: 10px 25px;
  display: block;
  margin: 15px auto;     /* centrado */
  border-radius: 10px;
  background-color: #fff;
  color: #13763C;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
}

.post-form button:hover {
  background-color: #f0f0f0;
  transform: scale(1.02);
}

.post-form input, .post-form textarea {
  background-color: rgba(255,255,255,0.9);
  color: #13763C;
}

.post-form button {
  background-color: #fff;
  color: #13763C;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
}

.post-form button:hover {
  background-color: #f0f0f0;
  transform: scale(1.02);
}

/* Tipo de publicación */
.type-container {
  display: flex;
  gap: 10px;
  margin: 10px 0;
}

.type-option {
  padding: 8px 12px;
  background: rgba(255,255,255,0.2);
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  transition: background 0.3s;
}

.type-option.selected {
  background: rgba(255,255,255,0.5);
}

.type-option:hover {
  background: rgba(255,255,255,0.35);
}

/* Preview imágenes */
.image-preview {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.image-preview img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #fff;
}

/* Animación fade in */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
/* ----- Nuevo Contenedor Flotante para Anuncios/Noticias (Izquierda) ----- */
.floating-announcement-container {
  /* Eliminamos el position:sticky y float:left que estaba antes en esta clase
     ya que ahora lo maneja el .sidebar-left y sus hijos se apilan normalmente */
  position: relative; /* O position: initial, dependiendo del estilo base */
  top: initial;
  left: initial;
  width: 100%; /* Ocupa el 100% de la nueva sidebar */
  margin: 20px 0; /* Margen vertical para separarlos */
  z-index: 9;
}

.announcement-card {
  /* Puedes darle un gradiente distinto si quieres, o usar el mismo */
  background: linear-gradient(135deg, #4A8C52, #669B5C);
  padding: 15px;
}

.announcement-form { 
    display: none; 
    margin-top: 10px; 
}

.announcement-form input[type="date"] {
    width: 100%;
    margin: 8px 0;
    padding: 10px;
    border-radius: 10px;
    border: none;
    background-color: rgba(255,255,255,0.9);
    color: #13763C;
}
/* Reutilizamos los estilos del formulario de posts para inputs/buttons */
.announcement-form input, 
.announcement-form textarea,
.announcement-form button {
  /* Reutiliza los estilos genéricos de .post-form en AVStyle.css */
}
/* Fecha de creación (Esquina superior derecha) */
.announcement-creation-date {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 12px;
    z-index: 2;
}

/* Fecha del Evento (Bajo la imagen, en un recuadro) */
.announcement-event-date-box {
    display: inline-block;
    background-color: #f0f0f0; /* Fondo claro para el recuadro */
    color: #13763C; 
    padding: 5px 10px;
    margin-top: 10px;
    border: 2px solid #13763C;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
}

/* Estilos para el contenedor de visualización de un anuncio */
.announcement-display-card {
    /* Ajusta la posición si el de administración ya está visible, 
       pero por defecto, usa la misma posición flotante izquierda */
    top: 200px; /* Desplazado para no chocar con el formulario de admin si está abierto */
    /* top: 100px; si no está el formulario de admin */
}

.announcement-display-content {
    position: relative; /* Necesario para posicionar las fechas absolutas */
}

/* Fecha de creación (Esquina superior derecha) */
.announcement-creation-date {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 12px;
    z-index: 2;
}

/* Fecha del Evento (Bajo la imagen, en un recuadro) */
.announcement-event-date-box {
    display: block;
    width: fit-content;
    background-color: #fff; /* Fondo claro para el recuadro */
    color: #13763C; 
    padding: 5px 10px;
    margin: 10px auto; /* Centrarlo */
    border: 2px solid #13763C;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
}

.announcement-display-content img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin-top: 15px; /* Espacio debajo de la fecha de creación */
}
.sidebar-left {
    width: 300px; /* Ancho fijo para la columna izquierda */
    float: left; /* Flota la columna izquierda */
    margin-left: 20px; /* Espacio desde el borde de la página */
}