/* =============================================================================
   Escuela PIB 2 - Interacciones: comentarios, anuncios, notificaciones
   ============================================================================= */

/* =============================================================================
   Comentarios
   ============================================================================= */

.comentarios {
    margin-top: var(--espacio-6);
}
.comentarios__titulo {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin-bottom: var(--espacio-4);
    color: var(--color-marron-profundo);
}
.comentarios__contador {
    color: var(--color-texto-secundario);
    font-weight: 400;
    font-size: var(--tamano-texto-md);
}

.comentarios__form {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-md);
    padding: var(--espacio-3);
    margin-bottom: var(--espacio-4);
}
.comentarios__form textarea {
    width: 100%;
    border: 1px solid var(--color-borde-fuerte);
    border-radius: var(--radio-sm);
    padding: var(--espacio-2);
    font-family: inherit;
    font-size: var(--tamano-texto-base);
    line-height: var(--altura-linea-base);
    resize: vertical;
    min-height: 60px;
    margin-bottom: var(--espacio-2);
}
.comentarios__form-acciones {
    display: flex;
    justify-content: flex-end;
    gap: var(--espacio-2);
}

.comentarios__lista {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--espacio-3);
}
.comentarios__vacio {
    padding: var(--espacio-5);
    text-align: center;
    background: var(--color-superficie-alt);
    border-radius: var(--radio-md);
    list-style: none;
}

.comentario {
    display: flex;
    gap: var(--espacio-3);
    padding: var(--espacio-3);
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-md);
    position: relative;
}
.comentario__avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--radio-completo);
    background: var(--color-cacao);
    color: var(--color-blanco);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--tamano-texto-md);
}
.comentario__cuerpo {
    flex: 1;
    min-width: 0;
}
.comentario__encabezado {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin-bottom: var(--espacio-1);
}
.comentario__autor { color: var(--color-texto); }
.comentario__fecha {
    color: var(--color-texto-muy-sutil);
    font-size: var(--tamano-texto-sm);
}
.comentario__contenido {
    margin: 0 0 var(--espacio-2);
    line-height: var(--altura-linea-base);
    white-space: pre-wrap;
    word-wrap: break-word;
}
.comentario__acciones {
    display: flex;
    gap: var(--espacio-2);
}
.comentario__form-respuesta {
    margin-top: var(--espacio-2);
    padding: var(--espacio-2);
    background: var(--color-superficie-alt);
    border-radius: var(--radio-sm);
}
.comentario__form-respuesta textarea {
    width: 100%;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-sm);
    padding: var(--espacio-2);
    font-family: inherit;
    font-size: var(--tamano-texto-sm);
    resize: vertical;
    min-height: 50px;
    margin-bottom: var(--espacio-2);
}
.comentario__form-acciones {
    display: flex;
    gap: var(--espacio-1);
    justify-content: flex-end;
}
.comentario__hijos {
    list-style: none;
    padding-left: var(--espacio-5);
    margin: var(--espacio-3) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--espacio-2);
    border-left: 2px solid var(--color-borde-sutil);
}

/* =============================================================================
   Anuncios
   ============================================================================= */

.anuncios-lista {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--espacio-3);
}
.anuncio {
    padding: var(--espacio-4);
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-lg);
    border-left: 4px solid var(--color-cacao);
}
.anuncio--urgente { border-left-color: var(--color-error); }
.anuncio--evento { border-left-color: var(--color-oliva); }
.anuncio--mantenimiento { border-left-color: var(--color-advertencia); }
.anuncio__encabezado {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--espacio-3);
    margin-bottom: var(--espacio-2);
}
.anuncio__titulo {
    margin: 0 0 var(--espacio-1);
    font-size: var(--tamano-texto-lg);
}
.anuncio__meta {
    margin: 0;
    font-size: var(--tamano-texto-sm);
    color: var(--color-texto-secundario);
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    flex-wrap: wrap;
}
.anuncio__contenido {
    line-height: var(--altura-linea-amplia);
    color: var(--color-texto);
}

/* =============================================================================
   Notificaciones
   ============================================================================= */

.notificaciones-lista {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--espacio-2);
}
.notificacion {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-3);
    padding: var(--espacio-3) var(--espacio-4);
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-md);
}
.notificacion--nueva {
    background: var(--color-crema);
    border-left: 4px solid var(--color-oliva);
}
.notificacion--leida {
    opacity: 0.7;
}
.notificacion__icono {
    flex-shrink: 0;
    color: var(--color-cacao);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-beige);
    border-radius: var(--radio-completo);
}
.notificacion__cuerpo {
    flex: 1;
    min-width: 0;
}
.notificacion__titulo {
    margin: 0 0 var(--espacio-1);
    font-size: var(--tamano-texto-base);
    color: var(--color-texto);
}
.notificacion__mensaje {
    margin: 0 0 var(--espacio-1);
    color: var(--color-texto-secundario);
    font-size: var(--tamano-texto-sm);
}
.notificacion__fecha {
    margin: 0;
    font-size: var(--tamano-texto-xs);
    color: var(--color-texto-muy-sutil);
}
.notificacion__acciones {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-1);
}

/* =============================================================================
   Anuncios (panel y vista publica)
   ============================================================================= */

.tarjetas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--espacio-4);
    margin-top: var(--espacio-4);
}
.tarjeta--anuncio {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-2);
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-md);
    padding: var(--espacio-4);
    transition: transform 120ms ease, box-shadow 120ms ease;
}
.tarjeta--anuncio:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.tarjeta--anuncio .tarjeta__encabezado {
    display: flex;
    gap: var(--espacio-2);
    flex-wrap: wrap;
}
.tarjeta--anuncio .tarjeta__titulo {
    margin: 0;
    font-size: var(--tamano-texto-lg);
    color: var(--color-marron-profundo);
}
.tarjeta--anuncio .tarjeta__titulo a {
    color: inherit;
    text-decoration: none;
}
.tarjeta--anuncio .tarjeta__titulo a:hover {
    text-decoration: underline;
}
.tarjeta--anuncio .tarjeta__meta,
.tarjeta--anuncio .tarjeta__descripcion {
    margin: 0;
    color: var(--color-texto-secundario);
    font-size: var(--tamano-texto-sm);
    line-height: 1.5;
}
.tarjeta--anuncio .tarjeta__acciones {
    margin-top: auto;
    display: flex;
    gap: var(--espacio-2);
    padding-top: var(--espacio-2);
    border-top: 1px solid var(--color-borde);
}
.badge--publicado { background: var(--color-oliva-claro); color: #2f4a1f; }
.badge--borrador  { background: var(--color-beige); color: var(--color-marron-profundo); }
.badge--archivado { background: var(--color-gris-suave, #d6cfc5); color: #5b4f43; }
.badge--audiencia { background: var(--color-crema); color: var(--color-cacao); }
.badge--general     { background: var(--color-beige); color: var(--color-marron-profundo); }
.badge--urgente     { background: #f8d7da; color: #842029; }
.badge--celebracion { background: #fff3cd; color: #664d03; }
.badge--recordatorio{ background: #cfe2ff; color: #052c65; }
.badge--notif {
    margin-left: auto;
    background: var(--color-cacao);
    color: #fff;
    border-radius: var(--radio-completo);
    padding: 0 8px;
    font-size: 11px;
    min-width: 18px;
    text-align: center;
    line-height: 18px;
    font-weight: 600;
}
.anuncios-publicos {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-4);
}
.anuncio-publico .tarjeta__encabezado {
    display: flex;
    gap: var(--espacio-2);
    align-items: center;
    flex-wrap: wrap;
}
.contenido-rico {
    line-height: 1.7;
}
.contenido-rico p { margin: 0 0 var(--espacio-3); }
.contenido-rico h1, .contenido-rico h2, .contenido-rico h3 { color: var(--color-marron-profundo); margin-top: var(--espacio-4); }
.contenido-rico blockquote {
    border-left: 4px solid var(--color-oliva);
    padding-left: var(--espacio-3);
    color: var(--color-texto-secundario);
    font-style: italic;
    margin: var(--espacio-3) 0;
}
.contenido-rico ul, .contenido-rico ol {
    padding-left: var(--espacio-5);
    margin: 0 0 var(--espacio-3);
}