/* ============================================================
   ESTILOS GENERALES DEL MÓDULO DE CORREO INTERNO
============================================================ */

#bazan-correo-interno {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0;
    font-family: inherit;
}

/* ============================================================
   MENÚ DEL CORREO — COMPORTAMIENTO EXACTO DEL CAMPUS
============================================================ */

/* MÓVIL → GRID */
#bazan-correo-menu {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px; /* igual que campus */
    width: 100%;
}

/* Items */
#bazan-correo-menu .correo-tab,
#bazan-correo-menu .correo-btn-nuevo {
    background: #f5f5f5;
    border: 1px solid #ddd;
    padding: 8px 4px; /* igual que campus */
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;

    display: flex;
    flex-direction: column; /* icono arriba */
    justify-content: center;
    align-items: center;

    position: relative; /* badge */
    transition: background 0.2s ease, border-color 0.2s ease;
}

/* Hover (igual que menú del curso) */
#bazan-correo-menu .correo-tab:hover {
    background: #d9d9d9;          /* gris más oscuro */
    border-color: #bfbfbf;
    color: #000;                  /* texto negro */
    font-weight: 700;             /* negrita */
    transform: translateY(-2px);  /* elevación */
}

/* Activo (bandeja seleccionada) */
#bazan-correo-menu .correo-tab.active {
    background: rgb(0,127,162);
    border-color: rgb(0,127,162);
    color: #fff;
}

/* Icono → NO se encoje */
#bazan-correo-menu .correo-icon {
    font-size: 18px; /* igual que campus en móvil */
    flex-shrink: 0;
}

/* Texto → adaptable y puede dividirse en móvil */
#bazan-correo-menu .correo-text {
    font-size: clamp(8px, 3vw, 14px); /* más pequeño para evitar corte en 320px */
    white-space: normal; /* ⭐ permitir salto de línea como en el campus */
    text-align: center;
    line-height: 1.1;
}

/* Badge */
#bazan-correo-menu .correo-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ff3b3b;
    color: white;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 11px;
}

/* ============================================================
   BOTÓN NUEVA CONSULTA — Borde corporativo + hover celestito
============================================================ */

#bazan-correo-menu .correo-btn-nuevo {
    background: #ffffff !important;             /* fondo blanco */
    color: rgb(0,127,162) !important;           /* texto corporativo */
    border: 2px solid rgb(0,127,162) !important;/* borde corporativo */
    font-weight: 700;
}

#bazan-correo-menu .correo-btn-nuevo:hover {
    background: #E8F4FA !important;             /* celestito claro */
    color: rgb(0,127,162) !important;           /* mantiene color corporativo */
    border-color: rgb(0,127,162) !important;
}


/* Escritorio → FLEX */
@media (min-width: 768px) {

    #bazan-correo-menu {
        display: flex;
        gap: 12px;
        width: auto;
    }

    /* Alinear Nueva consulta a la derecha */
    #bazan-correo-menu .correo-btn-nuevo {
        margin-left: auto; /* ⭐ lo empuja al extremo derecho */
    }

    #bazan-correo-menu .correo-tab,
    #bazan-correo-menu .correo-btn-nuevo {
        flex-direction: row;
        gap: 6px;
        padding: 6px 12px;
    }

    #bazan-correo-menu .correo-icon {
        font-size: 18px;
    }

    #bazan-correo-menu .correo-text {
        font-size: 15px;
        white-space: nowrap;
    }
}

/* Móvil → colocar Nueva consulta en la última columna */
@media (max-width: 767px) {
    #bazan-correo-menu .correo-btn-nuevo {
        grid-column: 4; /* ⭐ siempre a la derecha */
    }
}



/* ============================================================
   CONTENEDOR PRINCIPAL
============================================================ */

#bazan-correo-contenedor {
    display: block;
    width: 100%;
}

/* Paneles */
.correo-panel {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    min-height: 400px;
    overflow-y: auto;
}

/*============================================================
   BANDEJAS
============================================================*/

#bazan-correo-bandeja {
    width: 100%;
}

#bazan-correo-hilo {
    width: 100%;
    display: none; /* se muestra solo al abrir un hilo */
}


/* ============================================================
   FORMULARIO NUEVO MENSAJE
============================================================ */

#bazan-correo-nuevo {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#bazan-correo-nuevo h3 {
    margin: 0 0 10px 0;
    font-size: 20px;
}

.correo-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
}

#correo-cuerpo {
    min-height: 120px;
}

/* Adjuntos */
#correo-adjuntos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.correo-adjunto-item {
    background: #f0f0f0;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
}

/* Botón enviar */
.correo-btn-enviar {
    margin-top: 12px;
    background: #007fa2;
    color: white;
    padding: 10px 14px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    width: fit-content;
    transition: 0.2s;
}

.correo-btn-enviar:hover {
    background: #0EA5C6;
}

@media (max-width: 480px) {
    .correo-btn-enviar {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ============================================================
   RESPUESTA EN HILO
============================================================ */

#bazan-correo-respuesta-box {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

#correo-respuesta {
    flex: 1;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
    min-height: 60px;
}


/* Botón enviar o responder según los casos*/
.correo-btn-responder {
    margin-top: 12px;
    background: #007fa2;
    color: white;
    padding: 10px 14px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    width: fit-content;
    transition: 0.2s;
}

.correo-btn-responder:hover {
    background: #0EA5C6;
}

@media (max-width: 480px) {
    .correo-btn-responder {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ============================================================
   MENSAJES EN BANDEJA
============================================================ */

.correo-item {
    padding: 10px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: 0.2s;
}

.correo-item:hover {
    background: #f7f7f7;
}

.correo-item.no-leido {
    background: #eaf3ff;
    font-weight: 600;
}

/* ============================================================
   MENSAJES EN HILO (tipo chat)
============================================================ */

.correo-mensaje {
    margin-bottom: 15px;
    padding: 10px 14px;
    border-radius: 8px;
    max-width: 80%;
}

.correo-mensaje.remitente {
    background: #e8f3ff;
    margin-left: auto;
}

.correo-mensaje.destinatario {
    background: #f5f5f5;
    margin-right: auto;
}

.correo-mensaje .fecha {
    font-size: 11px;
    opacity: 0.7;
    margin-top: 4px;
}

/* ============================
   MODAL GENERAL PARA ELEGIR DESTINATARIOS EN CORREO INTERNO
============================= */
.correo-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.45);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 60px;
    z-index: 9999;
}

/* Contenido del modal */
.correo-modal-contenido {
    background: #fff;
    width: 90%;
    max-width: 650px;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

/* Títulos */
.correo-modal-contenido h3 {
    margin-top: 0;
    margin-bottom: 20px;
}

.correo-modal-contenido h4 {
    margin-top: 25px;
    margin-bottom: 10px;
}

/* ============================
   SCROLL INTERNO PARA MODALES EXTENSOS
============================= */

/* El contenido del modal debe poder hacer scroll */
.correo-modal-contenido {
    max-height: 80vh;                 /* No supera la pantalla */
    overflow-y: auto;                 /* Activa scroll interno */
    -webkit-overflow-scrolling: touch;/* Scroll suave en iOS */
}

/* En móvil, un poco más de altura */
@media (max-width: 768px) {
    .correo-modal-contenido {
        max-height: 85vh;
    }
}


/* ============================
   LISTAS (Cursos y Alumnos)
============================= */
.correo-lista {
    border: 1px solid #ddd;
    background: #fafafa;
    padding: 12px;
    border-radius: 6px;
    max-height: 260px;
    overflow-y: auto;
}

/* Cada ítem */
.curso-item,
.alumno-item {
    display: block;
    margin-bottom: 8px;
}

.curso-item label,
.alumno-item label {
    cursor: pointer;
}

/* ============================
   BUSCADOR
============================= */
.correo-buscador {
    width: 100%;
    padding: 8px 10px;
    margin-bottom: 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
}

/* ============================
   BOTONES DEL MODAL ELEGIR DESTINATARIO
============================= */

/* Contenedor de botones centrados y en una sola línea */
.correo-modal-botones {
    display: flex;
    justify-content: center;   /* Centra los botones */
    align-items: center;
    gap: 12px;                 /* Separación entre botones */
    margin-top: 25px;          /* Separación respecto al contenido */
    flex-wrap: nowrap;         /* Evita que salten de línea */
}

/* Botones dentro del contenedor */
.correo-modal-botones button {
    white-space: nowrap;       /* Evita que el texto se parta */
    flex-shrink: 0;            /* Evita que se encojan */
}

/* Botón enviar */
.correo-btn-enviar-modal {
    background: #007fa2;
    color: white;
    padding: 10px 18px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.correo-btn-enviar-modal:hover {
    background: #0EA5C6;
}

/* Botón CANCELAR */
.correo-btn-cancelar {
    background: #ccc;
    color: #333;
    padding: 10px 18px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.correo-btn-cancelar:hover {
    background: #b5b5b5;
}

/* Botón PROGRAMAR (si quieres que tenga estilo propio) */
.correo-btn-programar {
    background: #666;
    color: #fff;
    padding: 10px 18px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.correo-btn-programar:hover {
    background: #555;
}


/*============================================================
   ICONOS CORREO INTERNO
============================================================*/

/* Iconos */
.icono-correo {
    width: 20px;
    height: 20px;
    fill: #0077ff; /* no leído */
}

.icono-correo.leido {
    fill: none;
    stroke: #555;
}

.icono-correo.respondido {
    fill: #00b36b;
}


/* Estados */
.correo-item.no-leido .correo-asunto {
    font-weight: 700;
}

.correo-item.no-leido .icono-correo {
    fill: #0077ff;
}

.correo-item.respondido .correo-asunto {
    font-weight: 600;
}

/*============================================================
   ESTRUCTURA DE LOS CORREOS EN TABLA
============================================================*/
/* Tabla base */
.correo-tabla {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* Cabecera */
.correo-tabla th {
    padding: 8px;
    border-bottom: 2px solid #ddd;
    text-align: left;
    font-weight: 600;
    color: #444;
}

/* Celdas */
.correo-tabla td {
    padding: 8px;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}

/* Columna 1: estado */
.correo-tabla th:nth-child(1),
.correo-tabla td:nth-child(1) {
    width: 32px;
}

/* Columna 2: asunto (50%) */
.correo-tabla th:nth-child(2),
.correo-tabla td:nth-child(2) {
    width: 50%;
}

/* Columna 3: remitente (25%) */
.correo-tabla th:nth-child(3),
.correo-tabla td:nth-child(3) {
    width: 25%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Columna 4: adjuntos */
.correo-tabla th:nth-child(4),
.correo-tabla td:nth-child(4) {
    width: 40px;
    text-align: center;
}

/* Columna 5: fecha */
.correo-tabla th:nth-child(5),
.correo-tabla td:nth-child(5) {
    width: 140px;
    white-space: nowrap;
}

/* Columna 6: borrar */
.correo-tabla th:nth-child(6),
.correo-tabla td:nth-child(6) {
    width: 110px;        /* ancho objetivo */
    min-width: 110px;    /* ⭐ evita que se comprima */
    white-space: nowrap; /* ⭐ evita que se parta en dos líneas */
    text-align: center;
}

/* No leído */
.correo-no-leido td {
    font-weight: 700;
    color: #000;
}

/* Botón borrar */
.correo-borrar {
    background: transparent;
    border: none;
    font-size: 18px;
    color: #b00;
    cursor: pointer;
}

/* ============================================================
   FORMATO DE TEMA, ASUNTO Y FECHA EN LA BANDEJA DE ENTRADA
============================================================ */

/* Tema (leído) */
.correo-tema {
    font-size: 0.95em;
    font-weight: 400;
    color: #333;
}

/* Asunto (leído) */
.correo-asunto {
    font-size: 0.95em;   /* igual que el tema */
    font-weight: 400;
    color: #333;
}

/* Fecha */
.correo-fecha {
    font-size: 0.85em;
    color: #777;
}

/* NO LEÍDO → todo en negrita y oscuro */
.correo-no-leido .correo-tema,
.correo-no-leido .correo-asunto,
.correo-no-leido .correo-fecha {
    font-weight: 600;
    color: #000;
}


/* ============================================================
   PAGINACIÓN DE LA BANDEJA DE CORREO
============================================================ */

#correo-paginacion {
    margin-top: 12px;
    text-align: center;
}

.paginacion {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 8px 0;
}

.pag-btn {
    padding: 4px 10px;
    background: #007fa2;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
}

.pag-btn:hover {
    background: #005f78;
}

.pag-info {
    font-weight: 700;
    color: #222;
    font-size: 15px;
}

/* ============================================================
   8) Caja de respuesta
============================================================ */
    .oculto {
    display: none;
}

#correo-respuesta-box {
    margin-top: 15px;
}

#correo-respuesta {
    width: 100%;
    min-height: 90px;
    padding: 10px;
    resize: vertical;
}

/* ============================================================
   9) Estilos para el hilo de conversación (estética premium)
============================================================ */
/* ============================
   CABECERA DEL HILO (línea inferior estilo tarjetas)
============================ */
.hilo-header {
    background: #ffffff;
    color: #222;
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 30px;

    /* Línea inferior gruesa estilo tarjetas */
    border-bottom: 6px solid rgb(0,127,162);

    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}

/* Estructura superior limpia */
.hilo-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 8px;
    margin-bottom: 8px;
}

/* Tema del mensaje */
.hilo-header-tema {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    color: rgb(0,127,162);
    opacity: 0.9;
}

/* Remitente plano */
.hilo-header-remitente {
    font-size: 13px;
    color: #444;
    padding: 0;
    background: none;
    border-radius: 0;
}

/* Asunto */
.hilo-header-asunto {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: #333;
}

/* ============================
   MENSAJES
============================ */

.msg {
    max-width: 90%;
    padding: 16px 20px;
    border-radius: 0 8px 8px 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    margin-bottom: 24px;
}

/* Alumno → izquierda */
.msg-otro {
    background-color: #ffffff;
    border-left: 4px solid #d1d5db;
    margin-right: auto;
}

/* Preparador / Tú → derecha */
.msg-mio {
    background-color: #f0f9ff;
    border-left: 4px solid rgb(0, 127, 162);
    margin-left: auto;
}

/* Cabecera del mensaje */
.msg-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.msg-autor {
    font-weight: 700;
    font-size: 14px;
    color: #4b5563;
}

.msg-mio .msg-autor {
    color: rgb(0, 127, 162);
}

.msg-fecha {
    font-size: 12px;
    color: #9ca3af;
}

/* Texto del mensaje */
.msg-burbuja {
    font-size: 15px;
    line-height: 1.5;
    color: #374151;
}

.msg-mio .msg-burbuja {
    color: #1f2937;
}

/*===================================
MOSTRAR DESTINATARIOS EN MODAL
===================================*/

.bazan-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.bazan-modal-dest {
    background:white;
    padding:20px;
    border-radius:8px;
    width:350px;
}


/* Botón Ver Destinatarios */

.correo-ver-dest {
    background: #e8f4f7;
    border: 1px solid #007fa2;
    color: #007fa2;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    margin-left: 6px;
}

.correo-ver-dest:hover {
    background: #007fa2;
    color: white;
    border-color: #007fa2;
    transform: translateY(-1px);
}

/*==================================================
    BARRA DE FORMATO (EDITOR DEL CORREO INTERNO)
==================================================*/

.bazan-editor-barra {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
    padding: 6px 0;
}

.bazan-editor-barra button {
    background: #f7f7f7;
    border: 1px solid #ccc;
    padding: 4px 8px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.bazan-editor-barra button:hover {
    background: #e8e8e8;
    border-color: #bbb;
}

.bazan-editor-barra button:active {
    background: #dcdcdc;
}

/* Cuadraditos de color */
.color-preview {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid #999;
}

.color-negro { background: #000; }
.color-azul { background: #007fa2; }
.color-rojo { background: #cc0000; }
.color-verde { background: #0a0; }

/* Formatos en el hilo */
.tachado { text-decoration: line-through; }


/* ============================
   EDITOR VISUAL (contenteditable)
============================ */

.correo-editor {
    width: 100%;
    min-height: 120px;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.4;
    background: #fff;
    outline: none;
    white-space: pre-wrap;
}

.correo-editor:focus {
    border-color: #999;
}

/* Ocultar textarea original */
.oculto {
    display: none !important;
}

/* Cuadraditos de color */
.color-preview {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid #999;
}

.color-negro { background: #000; }
.color-azul { background: #007fa2; }
.color-rojo { background: #cc0000; }
.color-verde { background: #0a0; }


/* ============================
   ARCHIVOS ADJUNTOS EN EL HILO DEL MENSAJE
============================ */
.correo-adjuntos-bloque {
    background: #f7f7f7;
    padding: 10px 12px;
    margin-top: 10px;
    border-radius: 4px;
}

.correo-adjuntos-bloque ul {
    margin: 6px 0 0 0;
    padding: 0;
    list-style: none;
}

.correo-adjuntos-bloque li {
    margin: 4px 0;
}

.correo-descargar {
    display: inline-block;
    padding: 4px 10px;
    margin-top: 6px;
    border-radius: 4px;
    background: #f7f7f7;
    color: rgb(0,127,162);
    font-size: 13px;
    font-weight: 600;            /* ⭐ vuelve la negrita */
    cursor: pointer;
    border: 1px solid #ddd;
    transition: all 0.15s ease-in-out;
}

.correo-descargar:hover {
    background: #e9e9e9;
    border-color: #ccc;
    transform: translateY(-1px);
    color: rgb(0,127,162);
}


/*======================================
   CONTENIDO SIN BURBUJA PARA EL TABLÓN DE ANUNCIOS
======================================*/

.msg-contenido-solo {
    padding: 20px;
    background: white;
    font-size: 15px;
    line-height: 1.5;
    white-space: pre-wrap;
}

/* Cabecera del anuncio */
#bazan-tablon-hilo .hilo-header {
    margin-top: 20px;
}

/* Burbuja del tablón — solo borde redondeado y margen interno */
.msg-burbuja-tablon {
    background: #fff !important;
    border: 1px solid #ddd !important;
    border-radius: 8px;      /* ✔ Bordes redondeados */
    padding: 18px 22px;      /* ✔ Margen interno */
}

/* Adjuntos en el tablón */
.msg-adjuntos-tablon {
    margin-top: 12px;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}

.msg-adjuntos-titulo {
    font-weight: 600;
    color: #666;
    margin-bottom: 8px;
    font-size: 14px;
}

.msg-adjunto-item {
    font-size: 14px;
}

.msg-adjunto-item a {
    color: #0073aa;
    text-decoration: none;     /* ✔ No subrayado por defecto */
}

.msg-adjunto-item a:hover {
    text-decoration: underline; /* ✔ Solo el nombre se subraya */
}

/* ============================================================
   Tablón de anuncios — estilo para NO LEÍDO
=============================================================== */

.bazan-no-leido {
    font-weight: bold;
}


/* ============================================================
   Paginación del tablón centrada (lo demás replica la paginación del correo interno)
============================================================ */
#bazan-tablon-paginacion {
    text-align: center;
    margin-top: 15px;
}

/* ============================================================
   Badge del contador Tablón — igual que el del correo interno
=============================================================== */

#tablon-badge-global {
    background: #ff3b3b;
    color: white;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 11px;
    margin-left: 6px;
}

/* ============================================================
   Celda de eliminación en el tablón 
=============================================================== */

.tablon-eliminar-cell {
    cursor: pointer;
    text-align: center;
    user-select: none;          /* evita seleccionar texto */
    padding: 6px 0;             /* área de clic más grande */
}

.tablon-eliminar-cell svg {
    pointer-events: none;       /* el clic es de la celda, no del SVG */
}

.tablon-eliminar-cell:hover svg path {
    stroke: #ff0000;
}


/* ============================================================
   Efectos hover para la fila y la celda de eliminar en el tablón
=============================================================== */

/* 1) Efecto hover para TODA la fila */
#bazan-tablon table tbody tr:hover {
    background-color: #f0f0f0;   /* color de selección de fila */
}

/* 2) Efecto hover SOLO para la celda de eliminar */
.tablon-eliminar-cell:hover {
    background-color: #ffe5e5;   /* color suave para la celda */
}

/* 3) La celda de eliminar NO debe heredar el hover de la fila */
.tablon-eliminar-cell {
    cursor: pointer;
    user-select: none;
    text-align: center;
    padding: 6px 0;
    background-color: transparent;
    position: relative;
    z-index: 2;                  /* ⭐ evita que el hover de la fila se superponga */
}

/* 4) El SVG no captura el clic (la celda sí) */
.tablon-eliminar-cell svg {
    pointer-events: none;
}



/* ============================================================
   Celda de eliminación en el correo interno
=============================================================== */

    /* ============================================================
    HOVER DE FILA COMPLETA (gris suave)
    ============================================================ */
    #bazan-correo-bandeja table tbody tr:hover {
        background-color: #f0f0f0;
    }

    /* ============================================================
    HOVER SOLO DE LA CELDA DE ELIMINAR (rojo suave)
    ============================================================ */
    .correo-eliminar-cell:hover {
        background-color: #ffe5e5;
    }

    /* ============================================================
    CELDA DE ELIMINAR: aislada y clicable
    ============================================================ */
    .correo-eliminar-cell {
        cursor: pointer;
        text-align: center;
        user-select: none;          /* evita seleccionar texto */
        padding: 6px 0;             /* área de clic más grande */
        background-color: transparent;
        position: relative;
        z-index: 2;                 /* evita que el hover de la fila se superponga */
    }

    /* El SVG no captura el clic: la celda sí */
    .correo-eliminar-cell svg {
        pointer-events: none;
    }

    /* Efecto visual del icono */
    .correo-eliminar-cell:hover svg path {
        stroke: #ff0000;
    }

    /* ============================================================
    CELDA "Enviado" (programados)
    ============================================================ */
    .correo-enviado-cell {
        text-align: center;
        user-select: none;
    }


/* ============================================================
    CORREO — VISTA MÓVIL — Tabla scrollable y compacta
============================================================ */
@media (max-width: 767px) {

    /* Contenedor scroll horizontal */
    .correo-tabla-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        position: relative; /* necesario para el indicador */
    }

    /* Tabla compacta — ⭐ ahora con scroll real */
    #bazan-correo-bandeja .correo-tabla {
        width: max-content;
        min-width: 100%;
        border-collapse: collapse;
        table-layout: auto !important; /* ⭐ clave para que aparezca el scroll */
    }

    /* Ajustes visuales */
    .correo-tabla td {
        padding: 6px 8px;
        font-size: 0.9em;
        white-space: nowrap;
    }

    .col-asunto .asunto-text {
        max-width: 180px;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}


/* ============================================================
   TABLÓN — VISTA MÓVIL (scroll real y sin montajes)
============================================================ */
@media (max-width: 767px) {

    /* Scroll horizontal */
    #bazan-tablon .correo-tabla-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        position: relative; /* necesario para el indicador */
    }

    /* La tabla mide su contenido */
    #bazan-tablon .correo-tabla {
        width: max-content;
        min-width: 100%;
        border-collapse: collapse;
        table-layout: auto !important;
    }

    /* Celdas compactas */
    #bazan-tablon .correo-tabla td,
    #bazan-tablon .correo-tabla th {
        padding: 6px 8px;
        font-size: 0.9em;
        white-space: nowrap;
    }

    /* Asunto */
    .col-asunto {
        max-width: 220px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Fecha */
    .col-fecha {
        min-width: 110px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Ámbito */
    .col-ambito {
        max-width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Acciones */
    .col-acciones,
    .tablon-eliminar-cell {
        min-width: 70px;
        text-align: center;
        white-space: nowrap;
    }
}


/* ============================================================
   HOVER ESPECÍFICO PARA LA CELDA DE DESTINATARIO
   — evita que el hover de la fila la tape
   — usa tu celestón corporativo #E8F4FA
============================================================ */
.correo-destinatario {
    cursor: pointer;
    position: relative;
    z-index: 2; /* evita que el hover de la fila se superponga */
}

.correo-destinatario:hover {
    background-color: #E8F4FA !important;
}


/* ============================================================
   INDICADOR DE SCROLL — SOLO EN MÓVIL
============================================================ */
@media (max-width: 767px) {

/* ============================
   TABLÓN — indicador fijo y alineado con la tabla
============================ */
#bazan-tablon .correo-panel {
    position: relative;
}

#bazan-tablon .correo-panel::after {
    content: "← desliza →";
    position: absolute;
    right: 10px;
    top: 5px;
    font-size: 12px;
    color: #888;
    background: rgba(255,255,255,0.8);
    padding: 2px 6px;
    border-radius: 4px;
    pointer-events: none;
    animation: bazanScrollHint 1.8s ease-in-out infinite;
}


    /* ============================
       CORREO — contenedor correcto
    ============================ */
    #bazan-correo-bandeja {
        position: relative;
    }

    #bazan-correo-bandeja::after {
        content: "← desliza →";
        position: absolute;
        right: 10px;
        top: 5px;
        font-size: 12px;
        color: #888;
        background: rgba(255,255,255,0.8);
        padding: 2px 6px;
        border-radius: 4px;
        pointer-events: none;
        animation: bazanScrollHint 1.8s ease-in-out infinite;
    }
}


/* ============================================================
   Animación
============================================================ */
@keyframes bazanScrollHint {
    0%   { opacity: 0; transform: translateX(0); }
    20%  { opacity: 1; transform: translateX(-4px); }
    40%  { opacity: 1; transform: translateX(4px); }
    60%  { opacity: 1; transform: translateX(-4px); }
    80%  { opacity: 1; transform: translateX(4px); }
    100% { opacity: 0; transform: translateX(0); }
}


/* ============================================================
   Cada archivo adjunto con fondo y estilo y eliminarlo
============================================================ */

.chip-adjunto {
    background: #eef2f7;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.chip-remove {
    background: transparent;
    border: none;
    color: #c00;
    font-size: 14px;
    cursor: pointer;
    padding: 0;
}