/* Chat de convocatoria (Fase 15) — widget reutilizable. Tema claro. */

/* Varios elementos se ocultan/muestran con el atributo `hidden` desde JS, pero
   sus clases fijan `display` (inline-flex/flex), lo que anula el `display:none`
   que `hidden` aplica desde la hoja del navegador. Sin esto, el botón flotante
   de "mensajes nuevos", la barra de fijados, la cita activa, etc. quedarían
   siempre visibles. Restablecemos el comportamiento de `hidden`. */
.chat-widget [hidden] { display: none !important; }

.chat-widget {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 480px;
    max-height: calc(100vh - 220px);
    background: var(--glass-bg-card, rgba(255, 255, 255, 0.7));
    border: 1px solid var(--color-gray-200, #e5e7eb);
    border-radius: var(--glass-radius, 16px);
    box-shadow: var(--glass-shadow-sm, 0 4px 16px rgba(0, 0, 0, 0.06));
    color: var(--color-gray-800, #1f2937);
    overflow: hidden;
    position: relative;
}

/* ── Cabecera ─────────────────────────────────────────────────── */
.chat-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
    flex-wrap: wrap;
}
.chat-cabecera__info {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.chat-cabecera__titulo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-weight: var(--font-bold, 700);
}
.chat-cabecera__meta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm, 0.85rem);
    color: var(--color-gray-500, #6b7280);
}
.chat-cabecera__acciones {
    display: flex;
    gap: var(--space-1);
    flex-wrap: wrap;
}

.chat-estado {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: var(--text-xs, 0.72rem);
    font-weight: var(--font-bold, 700);
}
.chat-estado--activo { background: rgba(52, 144, 132, 0.15); color: var(--color-primary-dark, #347172); }
.chat-estado--borrador { background: var(--color-gray-200, #e5e7eb); color: var(--color-gray-600, #4b5563); }
.chat-estado--cerrado { background: rgba(217, 119, 6, 0.15); color: var(--color-warning, #d97706); }
.chat-estado--lectura { background: rgba(37, 99, 235, 0.12); color: var(--color-info, #2563eb); }

.chat-conexion { font-size: var(--text-xs, 0.72rem); }
.chat-conexion--vivo { color: var(--color-success, #16a34a); }
.chat-conexion--reconectando { color: var(--color-warning, #d97706); }

/* ── Fijados ──────────────────────────────────────────────────── */
.chat-fijados {
    border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
    background: rgba(52, 144, 132, 0.06);
    padding: var(--space-2) var(--space-3);
}
.chat-fijados__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: none;
    border: none;
    color: var(--color-primary-dark, #347172);
    font-size: var(--text-sm, 0.85rem);
    font-weight: var(--font-bold, 700);
    cursor: pointer;
}
.chat-fijados__lista { margin-top: var(--space-2); display: flex; flex-direction: column; gap: var(--space-1); }
.chat-fijados__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border-radius: 8px;
    cursor: pointer;
    font-size: var(--text-sm, 0.85rem);
}
.chat-fijados__item:hover { background: rgba(0, 0, 0, 0.04); }
.chat-fijados__autor { font-weight: var(--font-bold, 700); white-space: nowrap; }
.chat-fijados__texto { color: var(--color-gray-500, #6b7280); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-fijados__quitar {
    margin-left: auto;
    background: none; border: none; cursor: pointer;
    color: var(--color-gray-500, #6b7280);
    display: inline-flex;
}
.chat-fijados__quitar:hover { color: var(--color-error, #dc2626); }

/* ── Zona de scroll y lista ───────────────────────────────────── */
.chat-scroll {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-3);
    scroll-behavior: smooth;
}
.chat-lista { display: flex; flex-direction: column; gap: var(--space-2); }

.chat-cargando, .chat-vacio {
    text-align: center;
    color: var(--color-gray-500, #6b7280);
    padding: var(--space-5) var(--space-3);
}

.chat-cargar-mas { text-align: center; margin-bottom: var(--space-2); }

/* Separadores */
.chat-sep-dia {
    text-align: center;
    margin: var(--space-2) 0;
    position: relative;
}
.chat-sep-dia span {
    background: var(--color-gray-200, #e5e7eb);
    color: var(--color-gray-700, #374151);
    padding: 2px 12px;
    border-radius: 999px;
    font-size: var(--text-xs, 0.72rem);
    text-transform: capitalize;
}
.chat-sep-nuevos {
    text-align: center;
    border-top: 1px solid var(--color-error, #dc2626);
    margin: var(--space-2) 0;
    line-height: 0;
}
.chat-sep-nuevos span {
    background: var(--color-error, #dc2626);
    color: #fff;
    padding: 2px 12px;
    border-radius: 999px;
    font-size: var(--text-xs, 0.72rem);
    line-height: 1.6;
}

/* Mensaje de sistema */
.chat-sistema {
    text-align: center;
    color: var(--color-gray-500, #6b7280);
    font-size: var(--text-xs, 0.72rem);
    padding: var(--space-1) 0;
}
.chat-sistema span { display: inline-flex; align-items: center; gap: 4px; }

/* Burbuja de mensaje */
.chat-msg {
    display: flex;
    gap: var(--space-2);
    max-width: 85%;
    align-items: flex-end;
    scroll-margin: var(--space-4);
}
.chat-msg--propio { margin-left: auto; flex-direction: row-reverse; }
.chat-msg--destacado .chat-msg__caja { box-shadow: 0 0 0 2px var(--color-primary, #349084); }

.chat-msg__avatar {
    width: 32px; height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--color-primary, #349084);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--text-xs, 0.72rem);
    font-weight: var(--font-bold, 700);
}
.chat-msg__caja {
    background: #fff;
    color: var(--color-gray-900, #111827);
    border: 1px solid var(--color-gray-200, #e5e7eb);
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.05));
    border-radius: 14px;
    padding: var(--space-2) var(--space-3);
    min-width: 0;
}
.chat-msg--propio .chat-msg__caja {
    background: rgba(52, 144, 132, 0.14);
    border-color: rgba(52, 144, 132, 0.28);
}
.chat-msg--eliminado .chat-msg__caja { opacity: 0.75; }

.chat-msg__cabecera {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-bottom: 2px;
    font-size: var(--text-xs, 0.72rem);
}
.chat-msg__autor { font-weight: var(--font-bold, 700); }
.chat-msg__hora { color: var(--color-gray-500, #6b7280); }
.chat-msg__fijado { color: var(--color-primary, #349084); display: inline-flex; }
.chat-msg__rol {
    padding: 0 6px;
    border-radius: 999px;
    font-size: 0.65rem;
    text-transform: uppercase;
    font-weight: var(--font-bold, 700);
}
.chat-msg__rol--tutor { background: rgba(52, 144, 132, 0.2); color: var(--color-primary-dark, #347172); }
.chat-msg__rol--gestor { background: rgba(37, 99, 235, 0.15); color: var(--color-info, #2563eb); }

.chat-msg__texto { word-wrap: break-word; overflow-wrap: anywhere; line-height: 1.4; }
.chat-msg__texto a { color: var(--color-info, #2563eb); text-decoration: underline; }
.chat-msg__texto--eliminado { font-style: italic; color: var(--color-gray-500, #6b7280); }
.chat-msg__nota-mod { font-size: var(--text-xs, 0.72rem); color: var(--color-warning, #d97706); margin-top: 2px; }

.chat-mencion { color: var(--color-primary-dark, #347172); font-weight: var(--font-bold, 700); }
.chat-mencion--propia { background: rgba(52, 144, 132, 0.2); border-radius: 4px; padding: 0 3px; }

.chat-msg__menu-btn {
    align-self: center;
    background: none; border: none; cursor: pointer;
    color: var(--color-gray-500, #6b7280);
    opacity: 0;
    transition: opacity 0.12s;
    display: inline-flex;
}
.chat-msg:hover .chat-msg__menu-btn { opacity: 1; }

/* Cita */
.chat-cita {
    border-left: 3px solid var(--color-primary, #349084);
    padding: 2px var(--space-2);
    margin-bottom: 4px;
    background: var(--color-gray-100, #f3f4f6);
    border-radius: 0 6px 6px 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font-size: var(--text-xs, 0.75rem);
}
.chat-cita__autor { font-weight: var(--font-bold, 700); color: var(--color-primary-dark, #347172); }
.chat-cita__texto { color: var(--color-gray-500, #6b7280); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Adjuntos */
.chat-adjunto { display: inline-flex; margin-top: 4px; text-decoration: none; }
.chat-adjunto--img img {
    max-width: 240px; max-height: 240px;
    border-radius: 10px; display: block; cursor: zoom-in;
}
.chat-adjunto--pdf {
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    background: var(--color-gray-100, #f3f4f6);
    border: 1px solid var(--color-gray-200, #e5e7eb);
    border-radius: 10px;
    color: var(--color-gray-800, #1f2937);
}
.chat-adjunto__nombre { font-size: var(--text-sm, 0.85rem); }
.chat-adjunto__tam { font-size: var(--text-xs, 0.72rem); color: var(--color-gray-500, #6b7280); }

/* Reacciones */
.chat-msg__reacciones { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.chat-reaccion {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px;
    border-radius: 999px;
    border: 1px solid var(--color-gray-300, #d1d5db);
    background: #fff;
    color: var(--color-gray-800, #1f2937);
    font-size: var(--text-xs, 0.75rem);
    cursor: pointer;
}
.chat-reaccion--mia { background: rgba(52, 144, 132, 0.16); border-color: var(--color-primary, #349084); color: var(--color-primary-dark, #347172); }

/* ── Botón "nuevos" flotante ──────────────────────────────────── */
.chat-nuevos {
    position: absolute;
    bottom: 96px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border-radius: 999px;
    border: none;
    background: var(--color-primary, #349084);
    color: #fff;
    font-size: var(--text-sm, 0.85rem);
    cursor: pointer;
    box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.1));
    z-index: 4;
}

/* ── Pie / composición ────────────────────────────────────────── */
.chat-pie {
    border-top: 1px solid var(--color-gray-200, #e5e7eb);
    padding: var(--space-2) var(--space-3);
    position: relative;
}
.chat-bloqueado {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-gray-500, #6b7280);
    font-size: var(--text-sm, 0.85rem);
    padding: var(--space-2);
    justify-content: center;
}

.chat-cita-activa, .chat-adjunto-activo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    margin-bottom: var(--space-1);
    background: var(--color-gray-100, #f3f4f6);
    border-radius: 8px;
}
.chat-cita-activa .chat-cita { flex: 1; margin: 0; border-radius: 6px; cursor: default; background: transparent; }
.chat-cita-activa__cerrar, .chat-adjunto-activo__cerrar {
    background: none; border: none; cursor: pointer;
    color: var(--color-gray-500, #6b7280); display: inline-flex;
}
.chat-adjunto-activo__info { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm, 0.85rem); }
.chat-adjunto-activo__cerrar { margin-left: auto; }

.chat-input {
    display: flex;
    align-items: flex-end;
    gap: var(--space-1);
}
.chat-input__btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: var(--color-gray-500, #6b7280);
    display: inline-flex;
    align-items: center;
    font-size: 1.1rem;
    line-height: 1;
}
.chat-input__btn:hover { color: var(--color-primary, #349084); }
.chat-input__texto {
    flex: 1;
    resize: none;
    max-height: 140px;
    line-height: 1.4;
    padding: 8px 10px;
}
.chat-input__enviar {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
}

/* Autocompletar menciones */
.chat-autocompletar {
    position: absolute;
    bottom: 100%;
    left: var(--space-3);
    right: var(--space-3);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200, #e5e7eb);
    border-radius: 10px;
    box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.12));
    overflow: hidden;
    z-index: 6;
    max-height: 220px;
    overflow-y: auto;
}
.chat-autocompletar__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2);
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    color: var(--color-gray-800, #1f2937);
    font-size: var(--text-sm, 0.85rem);
}
.chat-autocompletar__item:hover { background: rgba(52, 144, 132, 0.1); }
.chat-autocompletar__avatar {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--color-primary, #349084); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.65rem; font-weight: var(--font-bold, 700);
}
.chat-autocompletar__rol { margin-left: auto; color: var(--color-gray-500, #6b7280); font-size: var(--text-xs, 0.72rem); text-transform: capitalize; }

/* ── Menú contextual de mensaje ───────────────────────────────── */
.chat-menu {
    position: fixed;
    z-index: 1000;
    min-width: 200px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200, #e5e7eb);
    border-radius: 10px;
    box-shadow: var(--shadow-xl, 0 16px 48px rgba(0, 0, 0, 0.14));
    padding: 4px;
    overflow: hidden;
    color: var(--color-gray-800, #1f2937);
}
.chat-menu__emojis, .chat-menu--emojis {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 4px;
    border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
}
.chat-menu--emojis { border-bottom: none; max-width: 240px; }
.chat-menu__emojis button, .chat-menu--emojis button {
    background: none; border: none; cursor: pointer;
    font-size: 1.2rem; padding: 4px; border-radius: 6px;
}
.chat-menu__emojis button:hover, .chat-menu--emojis button:hover { background: var(--color-gray-100, #f3f4f6); }
.chat-menu__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: 8px 10px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    color: var(--color-gray-800, #1f2937);
    font-size: var(--text-sm, 0.85rem);
    border-radius: 6px;
}
.chat-menu__item:hover { background: var(--color-gray-100, #f3f4f6); }
.chat-menu__item--peligro { color: var(--color-error, #dc2626); }

.chat-form__label { display: block; font-size: var(--text-sm, 0.85rem); font-weight: var(--font-bold, 700); margin-bottom: 4px; }

/* ── Lightbox ─────────────────────────────────────────────────── */
.chat-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    cursor: zoom-out;
    padding: var(--space-4);
}
.chat-lightbox img { max-width: 92vw; max-height: 92vh; border-radius: 10px; }
.chat-lightbox__cerrar {
    position: absolute; top: 20px; right: 20px;
    background: rgba(255, 255, 255, 0.12); border: none; cursor: pointer;
    color: #fff; border-radius: 50%; width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
}

/* Página de chat a pantalla completa (alumno) */
.chat-pagina .chat-widget { max-height: calc(100vh - 160px); }

/* Tarjeta de chat en el sidebar del portal del alumno */
.portal-sidebar-chat__link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
}
.portal-sidebar-chat__link:hover { background: rgba(52, 144, 132, 0.1); }
.portal-sidebar-chat__nombre { font-weight: var(--font-bold, 700); }
.portal-sidebar-chat__badge {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--color-error, #dc2626);
    color: #fff;
    font-size: var(--text-xs, 0.72rem);
    font-weight: var(--font-bold, 700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Aviso de moderación (diálogo silenciar) ──────────────────── */
.chat-silencio-aviso {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin: 0 0 var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: 10px;
    background: rgba(217, 119, 6, 0.1);
    color: var(--color-gray-800, #1f2937);
    font-size: 0.9rem;
}
.chat-silencio-aviso__txt {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* ── Móvil ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .chat-widget { max-height: none; height: calc(100dvh - 130px); border-radius: 0; }
    .chat-pagina .chat-widget { height: calc(100dvh - 120px); }
    .chat-msg { max-width: 92%; }
    .chat-msg__menu-btn { opacity: 1; } /* sin hover en táctil */
    .chat-input__btn, .chat-input__enviar { min-width: 44px; min-height: 44px; justify-content: center; }
    .chat-nuevos { bottom: 110px; }
    .chat-pie { padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom)); }
}