/* ================================================================
   MexCloud — Hoja de componentes (sobre los tokens del tema)
   Reutilizable por datos1 y adm. Solo tokens semánticos (--color-*,
   --radius-*, etc.), nunca colores crudos. Respeta prefers-reduced-motion.
   ================================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--font-size);
    line-height: var(--line-height);
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* `--font-title` es por defecto la misma del cuerpo: sin un tema que la redefina esto no
   cambia nada. «Vainilla» la cambia a Fraunces, que es lo que le da su carácter. */
h1, h2, h3, h4 { margin: 0 0 0.5em; font-weight: 600; line-height: 1.25; font-family: var(--font-title); }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
small, .texto-muted { color: var(--color-text-muted); }
.texto-peligro { color: var(--color-danger); }
.texto-ok { color: var(--color-success); }
.file-list-table tbody tr.enlace-expirado { opacity: 0.6; }
code, kbd { font-family: var(--font-mono); font-size: 0.9em; }

:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---- Botones ---- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.5rem 1rem; font: inherit; font-weight: 500; line-height: 1;
    border: 1px solid transparent; border-radius: var(--radius-md);
    background: var(--color-surface-2); color: var(--color-text);
    cursor: pointer; transition: background var(--transition), border-color var(--transition);
    text-decoration: none;
}
.btn:hover { background: var(--color-border); text-decoration: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn-primary { background: var(--color-primary); color: var(--color-primary-fg); }
.btn-primary:hover { background: var(--color-primary-h); }
.btn-danger { background: var(--color-danger); color: #fff; }
.btn-ghost { background: transparent; border-color: var(--color-border); }
.btn-icono { padding: 0.5rem; }
.btn-sm { padding: 0.3rem 0.6rem; font-size: 0.85rem; }

/* ---- Formularios ---- */
.campo { margin-bottom: 1rem; }
.campo > label { display: block; margin-bottom: 0.35rem; font-weight: 500; color: var(--color-text-2); }
.input, .select, .textarea {
    width: 100%; padding: 0.55rem 0.75rem; font: inherit;
    color: var(--color-text); background: var(--color-surface);
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    transition: border-color var(--transition);
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--color-primary); outline: none; }
.textarea { min-height: 5rem; resize: vertical; }

/* ---- Tarjetas ---- */
.card {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
    padding: 1.25rem;
}
.card + .card { margin-top: 1rem; }
.card-titulo { margin: 0 0 1rem; font-size: 1.05rem; font-weight: 600; font-family: var(--font-title); }

/* ---- Ancho de trabajo para formularios ----
   Un formulario de dos campos estirado a lo ancho de un monitor de 27" no se
   lee ni se opera: el ojo va del rótulo al campo cruzando media pantalla, y el
   botón queda a un palmo de donde se estaba escribiendo.
   Se acota a una medida de trabajo; las LISTAS y las tablas no llevan esto,
   porque ahí el ancho sí se aprovecha (más columnas visibles, menos scroll).

   OJO con el `min(…, 100%)` de las tres reglas de abajo, que no es adorno:
   `max-width: 78rem` a secas dice «puedes crecer HASTA 1248 px», no «no pases
   de tu hueco». En el móvil, con una tabla ancha dentro —la de usuarios en
   Administración—, el contenedor se estiraba hasta el ancho de la tabla y
   arrastraba consigo la página entera: se desplazaba de lado TODA la pantalla
   en vez de la tabla sola. Con `min(…, 100%)` nunca supera su hueco y el
   desplazamiento vuelve a ocurrir donde debe, dentro de `.tabla-scroll`. */
.card-forma { max-width: min(52rem, 100%); }

/* Y en las pantallas de configuración —Mi perfil— el contenido entero es de
   ese tipo, así que se acota una vez arriba en lugar de tarjeta por tarjeta. */
/* Ancho de trabajo de Configuración. Subió de 56 a 62rem cuando entró la
   sección de «Notificaciones»: las seis pestañas piden 896 px puestas en un
   renglón y con 56rem solo quedaban 848 útiles, así que la última se partía.
   Sigue acotado —que era el punto: los formularios no se estiran a lo ancho
   del monitor—, solo que ahora la cota cabe lo que hay dentro. */
.contenido-forma { width: 100%; max-width: min(62rem, 100%); margin-inline: auto; }

/* Los paneles con formularios Y listas —Administración— se centran ENTEROS, en
   vez de centrar cada tarjeta por su cuenta. Probadas las dos: centrando solo
   los formularios, estos quedan flotando en medio mientras las listas siguen
   pegadas al borde, y el ojo no encuentra un margen izquierdo donde apoyarse.
   Con la columna centrada, todo empieza en la misma línea. */
.contenido-panel { width: 100%; max-width: min(78rem, 100%); margin-inline: auto; }

/* El `width: 100%` de las dos reglas de arriba tampoco es adorno. Estos `main`
   son ítems de un grid, y `margin-inline: auto` en un ítem de grid no lo centra
   estirado: le da ancho AJUSTADO A SU CONTENIDO. Resultado: cada sección de
   Administración medía distinto —según lo ancha que fuera su tabla o su
   formulario— y, al estar centrada, la fila de pestañas se desplazaba de lado
   cada vez que se cambiaba de sección. Con `width: 100%` el ancho es siempre el
   mismo (su tope, o el hueco si es menor) y nada baila al navegar. */

/* Pestañas de sección de Administración: centradas y con su ancho natural.
   Centradas de verdad se puede porque el contenedor ya no cambia de tamaño; si
   siguiera ajustándose al contenido, centrarlas habría AMPLIFICADO el salto en
   vez de arreglarlo. */
.tabs-panel { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; }
.tabs-panel .btn { white-space: nowrap; }

/* ---- Pestañas de sección (Configuración) ----
   Todas del mismo ancho. Con anchos naturales, «Cuenta» medía un tercio que
   «Dispositivos y aplicaciones» y la fila parecía bailar al pasar de una a
   otra. El texto se centra y, si no cabe, se parte: prefiero un rótulo en dos
   líneas a cuatro botones de tamaños distintos. */
/* Cada pestaña mide LO QUE DICE, y crece para llenar el renglón.
   Antes se repartían el ancho a partes iguales (grid de columnas 1fr), así que
   a «Cuenta» le sobraba sitio mientras «Dispositivos y aplicaciones» se partía
   en tres líneas en cuanto aparecía la barra de desplazamiento y se estrechaba
   el contenido. Repartir por igual castiga siempre al rótulo más largo, y
   ensanchar el contenedor solo lo aplaza hasta la siguiente sección que se
   añada. Si de plano no caben, se pasan a otro renglón: mejor dos renglones de
   pestañas que una pestaña de tres líneas.
   Los anchos no bailan al cambiar de sección porque `btn-primary` solo cambia
   colores, no el tipo ni el relleno. */
.tabs-seccion { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tabs-seccion .btn { flex: 1 1 auto; white-space: nowrap; text-align: center; }

/* ---- Insignias / estados ---- */
.badge {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.15rem 0.5rem; font-size: 0.78rem; font-weight: 600;
    border-radius: var(--radius-full); background: var(--color-surface-2); color: var(--color-text-2);
}
.badge-exito { background: color-mix(in srgb, var(--color-success) 18%, transparent); color: var(--color-success); }
.badge-alerta { background: color-mix(in srgb, var(--color-warning) 20%, transparent); color: var(--color-warning); }
.badge-peligro { background: color-mix(in srgb, var(--color-danger) 18%, transparent); color: var(--color-danger); }

/* ---- Barra de progreso / uso de cuota ---- */
.progress { height: 8px; background: var(--color-surface-2); border-radius: var(--radius-full); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--color-primary); transition: width var(--transition); }
.progress.alto > span { background: var(--color-warning); }
.progress.lleno > span { background: var(--color-danger); }

/* ---- Layout app-shell ---- */
/* Altura fija del shell: navbar + sidebar quedan fijos y cada .contenido
   scrollea por dentro (necesario para el breadcrumb sticky y el render
   incremental). 100dvh respeta la barra dinámica del navegador en móvil. */
.app { height: 100vh; height: 100dvh; display: grid; grid-template-rows: auto 1fr; }
.navbar {
    display: flex; align-items: center; gap: 1rem; padding: 0 1rem;
    min-height: var(--navbar-height); flex-wrap: wrap; row-gap: 0.4rem;
    background: var(--color-surface); border-bottom: 1px solid var(--color-border);
    position: sticky; top: 0; z-index: 20;
}
.navbar .crece { flex: 1; }
.app-cuerpo { display: grid; grid-template-columns: var(--sidebar-width) 1fr; min-height: 0; }
/* Solo el GESTOR lleva tirador (la columna de 5px de en medio). Va acotado a él
   a propósito: `.app-cuerpo` lo usan casi todas las pantallas y meterles una
   columna de más les mandaría el contenido principal a 5px de ancho. */
.cuerpo-gestor { grid-template-columns: var(--sidebar-width) 5px 1fr; }
.sidebar-sep { background: var(--color-border); cursor: col-resize; }
.sidebar-sep:hover, .sidebar-sep:active { background: var(--color-primary); }
.sidebar {
    background: var(--color-sidebar-bg); color: var(--color-sidebar-fg);
    padding: 0.75rem; overflow-y: auto;
}
.sidebar a { display: block; padding: 0.5rem 0.75rem; border-radius: var(--radius-md); color: var(--color-sidebar-fg); }
.sidebar a:hover { background: rgba(255,255,255,0.06); text-decoration: none; }
.sidebar a.activo { background: var(--color-sidebar-act); color: #fff; }
/* El padding inferior también reserva sitio para el banner de vaciado, que FLOTA
   sobre el contenido (ver --alto-vaciado en app.js): si no, los últimos renglones
   de la lista quedan debajo de él y no hay forma de desplazarse hasta ellos. */
.contenido { padding: 1.5rem; padding-bottom: max(1.5rem, calc(var(--alto-vaciado, 0px) + 0.4rem)); overflow-y: auto; }

/* ---- Marca ---- */
.marca { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; color: var(--color-text); }
/* Logo del navbar = botón de Inicio (marca = home) */
.marca-inicio { cursor: pointer; border-radius: var(--radius-md); padding: 0.15rem 0.25rem; transition: opacity 0.12s; }
.marca-inicio:hover { opacity: 0.8; }
.marca-inicio:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.marca svg, .marca img { flex: none; display: block; }
.marca .wordmark { font-size: 1.15rem; letter-spacing: -0.01em; font-family: var(--font-title); }

/* Bloque de usuario (icono + nombre + salir) en la cabecera. En escritorio va
   a la derecha; en móvil sube al renglón de la marca (ver media query). */
.nav-usuario { display: inline-flex; align-items: center; gap: 0.6rem; min-width: 0; }
.nav-usuario .usuario-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Pestañas de módulo ancladas a la DERECHA: su posición NO depende del ancho variable
   del título («MexCloud · Módulo»), así no se mueven al cambiar de módulo. El margen
   automático a la izquierda de las pestañas absorbe el cambio de ancho del título. */
.navbar .nav-tabs { order: 2; margin-left: auto; }
.navbar .nav-usuario { order: 4; margin-left: 0.75rem; }

/* Solo-móvil: oculto en escritorio. `!important` para ganarle al `display` de
   componentes que la usan (`.accion-sel`, `.btn-icono`) definidos más abajo con la
   misma especificidad; simétrico a `.solo-escritorio` (ver media query). */
.solo-movil { display: none !important; }
.hamburguesa { order: 0; }
.drawer-fondo { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,0.45); display: flex; }
.drawer {
    width: min(80vw, 18rem); background: var(--color-surface); height: 100%;
    box-shadow: 2px 0 16px rgba(0,0,0,0.3); display: flex; flex-direction: column;
    padding: 0.75rem; gap: 0.25rem; overflow-y: auto;
}
.drawer-item {
    display: flex; align-items: center; gap: 0.75rem; width: 100%;
    padding: 0.8rem 0.9rem; border-radius: var(--radius-md); border: 0;
    background: transparent; color: var(--color-text); cursor: pointer; font-size: 1rem;
}
.drawer-item:hover { background: var(--color-surface-2); }
.drawer-item.activo { background: var(--color-primary); color: #fff; }
.drawer-item svg { width: 1.3rem; height: 1.3rem; flex: none; }
.drawer-sep { height: 1px; background: var(--color-border); margin: 0.5rem 0.4rem; }
/* Título del drawer = botón de Inicio (marca = home) */
.drawer-titulo {
    display: flex; align-items: center; gap: 0.6rem; width: 100%;
    padding: 0.6rem 0.9rem; margin-bottom: 0.3rem; border: 0; border-radius: var(--radius-md);
    background: transparent; color: var(--color-text); cursor: pointer; font-weight: 700; font-size: 1.1rem;
}
.drawer-titulo svg { width: 1.6rem; height: 1.6rem; flex: none; }
.drawer-titulo:hover { background: var(--color-surface-2); }
.drawer-titulo.activo { color: var(--color-primary); }

/* ---- Menús desplegables anclados (Agregar / Ver) ---- */
.menu-wrap { position: relative; display: inline-flex; z-index: 40; }
.chevron-abajo { display: inline-flex; transition: transform 0.15s ease; }
.chevron-abajo svg { width: 1rem; height: 1rem; }
.chevron-abajo.abierto { transform: rotate(180deg); }
.menu-pop {
    position: absolute; top: calc(100% + 0.35rem); left: 0; z-index: 50;
    min-width: 12.5rem; max-width: calc(100vw - 1.5rem); padding: 0.35rem;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); box-shadow: 0 10px 28px rgba(0,0,0,0.28);
    display: flex; flex-direction: column; gap: 0.1rem;
}
.menu-pop-item {
    display: flex; align-items: center; gap: 0.65rem; width: 100%;
    padding: 0.6rem 0.7rem; border-radius: var(--radius-sm); border: 0;
    background: transparent; color: var(--color-text); cursor: pointer;
    font-size: 0.95rem; text-align: left; white-space: nowrap; margin: 0;
}
.menu-pop-item:hover { background: var(--color-surface-2); }
/* Acción destructiva dentro de un menú (p. ej. «Borrar» en una nota), igual que
   `.btn-icono.peligro` y `.accion-sel.peligro`. */
.menu-pop-item.peligro:hover { color: var(--color-danger); }
.menu-pop-item.activo { background: var(--color-primary); color: #fff; }
.menu-pop-item svg { width: 1.2rem; height: 1.2rem; flex: none; }
/* Menú «Compartir» de la barra de selección (app/correo/enlace). En escritorio la
   acción va al final de la barra: el desplegable se ancla a la DERECHA para no
   desbordar. (En móvil, ver la media query: abre hacia arriba y ocupa la barra.) */
.accion-compartir .menu-pop { left: auto; right: 0; }
.menu-pop-der { left: auto; right: 0; }
/* Texto de ayuda dentro de un menú (p. ej. «todavía no tiene modelos»). */
.menu-pop-vacio { margin: 0.2rem 0.6rem; padding: 0.15rem 0; font-size: 0.85rem; color: var(--color-text-muted); }
/* Última opción del menú, separada de la lista: es una acción, no un elemento más. */
.menu-pop-sep { border-top: 1px solid var(--color-border); margin-top: 0.25rem; padding-top: 0.5rem; }

/* Fila de modelo: el nombre ocupa todo y las acciones aparecen al pasar por encima,
   para que la lista se lea limpia y el clic principal (aplicar) sea el fácil de acertar. */
.modelo-fila { display: flex; align-items: center; }
.modelo-aplicar { flex: 1; min-width: 0; }
.modelo-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modelo-accs { display: flex; gap: 0.1rem; padding-right: 0.4rem; opacity: 0; transition: opacity 0.12s; }
.modelo-fila:hover .modelo-accs, .modelo-fila:focus-within .modelo-accs { opacity: 1; }
.modelo-accs svg { width: 1rem; height: 1rem; }
/* En táctil no hay «pasar por encima»: siempre visibles. */
@media (hover: none) { .modelo-accs { opacity: 1; } }

/* ---- Selector de tema ---- */
.tema-selector { display: inline-flex; align-items: center; gap: 0.4rem; }

/* ---- Gestor de archivos ---- */
.files-layout { display: grid; grid-template-columns: 260px 1fr; gap: 1rem; min-height: 60vh; }
.file-tree { border-right: 1px solid var(--color-border); padding-right: 0.75rem; overflow-y: auto; }
.file-tree ul { list-style: none; margin: 0; padding-left: 0.75rem; }
.file-tree .nodo { display: flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.4rem; border-radius: var(--radius-sm); }
.file-tree .nodo:hover { background: var(--color-surface-2); }
.file-tree .nodo.activo { background: color-mix(in srgb, var(--color-primary) 12%, transparent); color: var(--color-primary); font-weight: 600; }
.file-tree .nodo.activo .tipo-icono svg { stroke: var(--color-primary); }
/* Línea divisoria entre la carpeta personal y las compartidas. */
.file-tree .nodo.primera-compartida { margin-top: 0.5rem; padding-top: 0.6rem; border-top: 1px solid var(--color-border); }
.file-tree .nodo-etq { display: flex; align-items: center; gap: 0.35rem; flex: 1; min-width: 0; cursor: pointer; }
.file-tree .nodo-etq > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Expandir/contraer del árbol (archivos Y carpetas de correo: ambos paneles llevan
   `.file-tree`). Era un icono de 0.7rem en una caja de 1rem: se veía apenas y era difícil
   de acertar, sobre todo con el dedo.
   El ÁREA de pulsación crece más que el dibujo —es lo que de verdad cuesta acertar—, y el
   margen negativo se la come del relleno de la fila para que el árbol no se estire: objetivo
   más grande, misma densidad. El color pasa de `muted` a `text-2` porque el problema era
   también de contraste. */
.file-tree .twisty { flex: none; width: 1.5rem; height: 1.5rem; margin: -0.15rem 0; display: inline-flex; align-items: center; justify-content: center; color: var(--color-text-2); cursor: pointer; user-select: none; border-radius: var(--radius-sm); }
.file-tree .twisty svg { width: 0.95rem; height: 0.95rem; transition: transform var(--transition); }
.file-tree .twisty.abierto svg { transform: rotate(90deg); }
.file-tree .twisty:hover { color: var(--color-text); background: var(--color-surface-2); }
.file-tree .twisty-esp { cursor: default; visibility: hidden; }
/* En táctil no hay puntero fino: el objetivo se acerca a los 32 px recomendados. */
@media (hover: none) {
    .file-tree .twisty { width: 2rem; height: 2rem; margin: -0.3rem 0; }
    .file-tree .twisty svg { width: 1.1rem; height: 1.1rem; }
}

/* Cabecera FIJA del gestor: envuelve el breadcrumb y (en escritorio) la barra de
   selección, para tenerlos siempre a mano aunque estés varias páginas abajo.
   top negativo = al padding de .contenido, para que con el margen negativo la
   caja quede FLUSH arriba al pegarse; los márgenes negativos cancelan el padding
   de .contenido para que el fondo llegue de borde a borde. */
.cabecera-gestor {
    position: sticky; z-index: 30;
    top: -1.5rem;
    margin: -1.5rem -1.5rem 1rem;
    padding: 0.7rem 1.5rem;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}
.breadcrumb {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem;
    color: var(--color-text-muted);
}
/* Barra de acciones (Agregar/Ver/vista) dentro de la cabecera sticky. */
.barra-acciones-gestor { margin-top: 0.6rem; }
.breadcrumb .btn-atras { margin-right: 0.4rem; }
.breadcrumb .miga { display: inline-flex; align-items: center; gap: 0.15rem; }
.breadcrumb .miga-enlace {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.25rem 0.5rem; border-radius: var(--radius-sm);
    color: var(--color-text-2); text-decoration: none; font-weight: 500;
    transition: background var(--transition), color var(--transition);
}
.breadcrumb .miga-enlace:hover { background: var(--color-surface-2); color: var(--color-text); }
.breadcrumb .miga-actual {
    color: var(--color-text); font-weight: 600;
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.breadcrumb .miga-inicio svg { width: 1rem; height: 1rem; display: block; }
.breadcrumb .sep { display: inline-flex; align-items: center; color: var(--color-text-muted); opacity: 0.55; }
.breadcrumb .sep svg { width: 0.9rem; height: 0.9rem; display: block; }

.file-list-table { width: 100%; border-collapse: collapse; }
.file-list-table th, .file-list-table td { padding: 0.55rem 0.6rem; text-align: left; border-bottom: 1px solid var(--color-border); }
.file-list-table th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-muted); font-weight: 600; }
.file-list-table tbody tr:hover { background: var(--color-surface-2); }
.file-list-table tbody tr.sel { background: color-mix(in srgb, var(--color-primary) 12%, transparent); }

/* Casilla de selección: checkbox grande y área clicable amplia (toda la celda),
   para que sea fácil de atinar con el mouse o el dedo. */
.file-list-table th.celda-sel, .file-list-table td.celda-sel { width: 3rem; padding: 0; text-align: center; }
.check-sel { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 2.7rem; cursor: pointer; }
.check-sel input[type="checkbox"] { width: 1.3rem; height: 1.3rem; cursor: pointer; accent-color: var(--color-primary); }
.file-list-table .col-acc { text-align: right; white-space: nowrap; width: 1%; }

/* ---- Nombre con icono de tipo y subtítulo ---- */
.tipo-icono { flex: none; display: inline-flex; }
.tipo-icono svg { width: 1.6rem; height: 1.6rem; display: block; }
.tipo-icono .miniatura {
    width: 1.9rem; height: 1.9rem; display: block; object-fit: cover;
    border-radius: var(--radius-sm); background: var(--color-surface-2);
}

/* ---- Visor de PDF (PDF.js) ---- */
.pdf-vista {
    height: 72vh; overflow-y: auto; background: var(--color-surface-2);
    border-radius: var(--radius-md); padding: 0.75rem;
    display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
}
.pdf-vista .pdf-pagina {
    max-width: 100%; height: auto; background: #fff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25); border-radius: 2px;
}

/* ---- Indicador de cuota ---- */
.cuota-widget { font-size: 0.78rem; }
.cuota-sidebar { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--color-border); }
.cuota-movil { display: none; margin-bottom: 1rem; }
.cuota-cab { display: flex; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.35rem; color: var(--color-text-muted); flex-wrap: wrap; }
.cuota-barra { height: 0.4rem; background: var(--color-surface-2); border-radius: 999px; overflow: hidden; }
.cuota-barra > span { display: block; height: 100%; width: 0; background: var(--color-primary); transition: width var(--transition); }
.cuota-alerta .cuota-barra > span { background: #f59e0b; }
.cuota-peligro .cuota-barra > span { background: var(--color-danger); }
.cuota-alerta .cuota-cab, .cuota-peligro .cuota-cab { color: var(--color-text-2); }
@media (max-width: 768px) { .cuota-movil { display: block; } }

/* ---- Reproductor de audio ---- */
.audio-vista { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1.5rem 0.5rem; }
.audio-icono svg { width: 4rem; height: 4rem; display: block; }
.audio-nombre { font-weight: 600; text-align: center; overflow-wrap: anywhere; }
.audio-vista audio { max-width: 32rem; }

/* ---- Reproductor de vídeo ---- */
.video-vista { display: flex; justify-content: center; }
/* Transcripción al pie del vídeo: una lista de momentos en los que se hizo clic
   para saltar. Alta fija y con su propio desplazamiento para que el vídeo no se
   vaya de la pantalla en cuanto la charla es larga. */
.transcripcion-panel { width: 100%; margin-top: 0.75rem; border-top: 1px solid var(--color-border); padding-top: 0.6rem; }
.transcripcion-lista { max-height: 14rem; overflow-y: auto; margin-top: 0.5rem; }
.transcripcion-linea { display: flex; gap: 0.6rem; width: 100%; text-align: left; padding: 0.3rem 0.4rem;
    background: none; border: 0; border-radius: var(--radius-sm); color: inherit; cursor: pointer; font: inherit; }
.transcripcion-linea:hover { background: var(--color-bg); }
.transcripcion-linea.activa { background: var(--color-bg); }
.transcripcion-min { color: var(--color-text-muted); font-variant-numeric: tabular-nums; flex: none; }
.video-vista video { width: 100%; max-height: 72vh; background: #000; border-radius: var(--radius-md); }

/* ---- Vista de CSV/TSV como tabla ---- */
.csv-vista { max-height: 72vh; overflow: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.csv-tabla { border-collapse: collapse; width: max-content; min-width: 100%; font-size: 0.85rem; }
.csv-tabla th, .csv-tabla td {
    border: 1px solid var(--color-border); padding: 0.35rem 0.6rem;
    text-align: left; white-space: nowrap; max-width: 24rem;
    overflow: hidden; text-overflow: ellipsis;
}
.csv-tabla th { position: sticky; top: 0; background: var(--color-surface-2); font-weight: 600; z-index: 1; }
.csv-tabla tr:nth-child(even) td { background: color-mix(in srgb, var(--color-surface-2) 40%, transparent); }
.enlace-nombre { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.nombre-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.nombre-linea { overflow-wrap: anywhere; }
.subtitulo { display: none; font-size: 0.78rem; color: var(--color-text-muted); }
.file-tree .tipo-icono svg { width: 1.2rem; height: 1.2rem; }

/* ---- Botones de icono ---- */
.btn-icono {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; flex: none; padding: 0;
    border: 1px solid transparent; border-radius: var(--radius-sm);
    background: transparent; color: var(--color-text-2); cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.btn-icono:hover { background: var(--color-surface-2); color: var(--color-text); }
.btn-icono:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.btn-icono svg { width: 1.2rem; height: 1.2rem; display: block; }
.btn-icono.peligro:hover { color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 14%, transparent); }
.acciones-iconos { display: inline-flex; align-items: center; gap: 0.15rem; justify-content: flex-end; }
.btn-con-icono { display: inline-flex; align-items: center; gap: 0.45rem; }

/* ---- Barra de acciones sobre la selección ---- */
.barra-seleccion {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
    background: var(--color-surface-2); padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md); margin-top: 0.6rem;
}
.barra-conteo { font-weight: 600; }
.barra-acciones { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; flex-wrap: wrap; }
.accion-sel {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.4rem 0.7rem; border: 1px solid var(--color-border);
    border-radius: var(--radius-sm); background: var(--color-surface);
    color: var(--color-text-2); cursor: pointer; font: inherit; font-size: 0.85rem;
    transition: background var(--transition), color var(--transition);
}
.accion-sel:hover { background: var(--color-surface-2); color: var(--color-text); }
.accion-sel svg { width: 1.1rem; height: 1.1rem; }
.accion-sel.peligro:hover { color: var(--color-danger); border-color: var(--color-danger); }
.btn-con-icono svg { width: 1.05rem; height: 1.05rem; }
.salir-icono { display: none; }
.file-list-table th.col-orden { cursor: pointer; user-select: none; }
.file-list-table th.col-orden:hover { color: var(--color-text-2); }
.file-list-table tbody tr[draggable="true"] { cursor: grab; }

/* Destino de arrastre (mover a carpeta): fila, carpeta de barra lateral o miga. */
.file-list-table tbody tr.drop-activo,
.file-tree .nodo.drop-activo,
.breadcrumb a.drop-activo {
    outline: 2px dashed var(--color-primary); outline-offset: -2px;
    background: color-mix(in srgb, var(--color-primary) 15%, transparent);
    border-radius: var(--radius-sm);
}

.drop-zone {
    border: 2px dashed var(--color-border); border-radius: var(--radius-lg);
    padding: 1.5rem; text-align: center; color: var(--color-text-muted);
    transition: border-color var(--transition), background var(--transition);
}
.drop-zone.activa { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 8%, transparent); }

/* Selector de carpeta (mover/copiar). Reusa las migas del breadcrumb pero
   neutraliza su comportamiento fijo (dentro del modal es estático). */
.picker-migas { position: static; margin: 0 0 0.75rem; padding: 0; border: 0; background: none; }
.picker-nueva { margin: 0 0 0.6rem; }
.picker-nueva-form { display: flex; align-items: center; gap: 0.4rem; }
.picker-nueva-form .input { flex: 1; min-width: 0; }
.picker-lista { max-height: 45vh; overflow-y: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: 1rem; }
.picker-vacio { padding: 0.9rem; margin: 0; }
.picker-item {
    display: flex; align-items: center; gap: 0.6rem; width: 100%;
    padding: 0.6rem 0.7rem; background: none; border: 0;
    border-bottom: 1px solid var(--color-border); color: var(--color-text);
    cursor: pointer; text-align: left; font: inherit;
}
.picker-item:last-child { border-bottom: 0; }
.picker-item:hover { background: var(--color-surface-2); }
.picker-nombre { flex: 1; }
.picker-item .tipo-icono svg { width: 1.3rem; height: 1.3rem; display: block; }
.picker-chevron { color: var(--color-text-muted); display: inline-flex; }
.picker-chevron svg { width: 1rem; height: 1rem; display: block; }

/* Fantasma de conteo al arrastrar varios elementos (imagen de arrastre). Se
   posiciona fuera de vista: solo se usa como setDragImage y se elimina. */
.drag-conteo {
    position: fixed; top: -1000px; left: -1000px;
    padding: 0.3rem 0.6rem; border-radius: var(--radius-md);
    background: var(--color-primary); color: var(--color-primary-fg);
    font-size: 0.85rem; font-weight: 600; white-space: nowrap;
    box-shadow: var(--shadow-md);
}

.upload-progress { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; }
.upload-progress .fila { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; align-items: center; }

/* ---- Modal ---- */
.modal-fondo {
    position: fixed; inset: 0; background: var(--color-overlay);
    display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 70;
}
/* Diálogo que se abre SOBRE otro diálogo (p. ej. confirmar algo desde el perfil).
   Con el mismo z-index que el de abajo decidiría el orden del marcado, y salía
   DETRÁS. Por encima de los diálogos (70), por debajo de los avisos (100). */
.modal-fondo.modal-encima { z-index: 80; }
.modal {
    background: var(--color-surface); color: var(--color-text);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    width: 100%; max-width: 32rem; max-height: 90vh; overflow: auto; padding: 1.5rem;
}
.modal-titulo { margin-top: 0; font-family: var(--font-title); }

/* «Mi perfil»: los ajustes agrupados en bloques colapsables. Se usa `<details>`
   nativo (teclado y lector de pantalla salen gratis); el estado abierto lo lleva
   Alpine para que solo haya UNO abierto y se recuerde entre visitas — por eso el
   summary hace `@click.prevent`, si no la apertura nativa pelearía con `:open`. */
/* Revisar lo que se le manda a la IA: plegado de fábrica.
   La revisión sigue estando a un clic y el resumen de lo que se ocultó se ve
   siempre; lo que se pliega es la pared de texto, que en un manual de cien
   páginas nadie va a leer y solo estorba para llegar al botón de enviar. */
.ia-revisar { border: 1px solid var(--color-border); border-radius: var(--radius-md); margin: 0.6rem 0; }
.ia-revisar[open] { background: var(--color-surface-2); }
.ia-revisar-cab {
    display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
    padding: 0.55rem 0.75rem; cursor: pointer; list-style: none; user-select: none;
    border-radius: var(--radius-md); font-weight: 600;
}
.ia-revisar-cab::-webkit-details-marker { display: none; }
.ia-revisar-cab:hover { background: var(--color-surface-2); }
.ia-revisar-chev { display: inline-flex; color: var(--color-text-2); transition: transform var(--transition); }
.ia-revisar[open] .ia-revisar-chev { transform: rotate(180deg); }
.ia-revisar-cuerpo { padding: 0 0.75rem 0.75rem; }

/* ── Chat de IA ─────────────────────────────────────────────────────────
   Dos columnas: historial y conversación. El hilo desplaza por dentro y el
   redactor se queda abajo fijo, que es lo que espera uno de un chat. */
.chat-cuerpo { grid-template-columns: 280px 1fr; }
/* La capa del cajón NO existe en escritorio: `contents` la borra del árbol de
   cajas y el lateral sigue siendo, él mismo, la columna de la rejilla. */
.chat-lateral-fondo { display: contents; }
.chat-lateral-cab, .chat-abrir-historial { display: none; }
.chat-lateral { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem; border-right: 1px solid var(--color-border); min-height: 0; }
.chat-nuevo { width: 100%; justify-content: center; }
.chat-buscar { font-size: 0.85rem; padding: 0.35rem 0.5rem; }
.chat-lista { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 0.15rem; min-height: 0; }
.chat-vacio { font-size: 0.85rem; text-align: center; margin-top: 1rem; }
.chat-item { display: flex; align-items: center; gap: 0.15rem; border-radius: var(--radius-sm); }
.chat-item:hover { background: var(--color-surface-2); }
/* Una conversación fijada tiene que NOTARSE: van primero en la lista, pero sin
   esto los dos pines se veían idénticos y no había forma de saber cuál era
   cuál. (No existía ninguna regla `.activo` para .btn-icono: el `:class` del
   marcado no pintaba nada.) */
/* Renombrar desde la lista es cosa del móvil: en escritorio se pulsa el título. */
.chat-item-renombrar { display: none; }
.chat-item .btn-icono.activo { color: var(--color-primary); opacity: 1; }
.chat-item .btn-icono.activo svg { fill: currentColor; }
.chat-item.activo { background: color-mix(in srgb, var(--color-primary) 14%, transparent); }
.chat-item-abrir { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; padding: 0.45rem 0.5rem; background: none; border: 0; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.chat-item-tit { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; }
.chat-item-sub { font-size: 0.72rem; color: var(--color-text-muted); }

/* `min-height: 0` es imprescindible en los dos: sin él, un hijo que desplaza
   dentro de una rejilla estira al padre y el redactor se sale de la pantalla. */
.chat-panel { display: flex; flex-direction: column; padding: 0; min-height: 0; min-width: 0; }
.chat-hilo { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; min-height: 0; min-width: 0; }
.chat-bienvenida { margin: auto; text-align: center; color: var(--color-text-muted); max-width: 26rem; }
.chat-bienvenida-ic { display: inline-flex; opacity: 0.35; }
.chat-bienvenida-ic svg { width: 2.5rem; height: 2.5rem; }
.chat-msg { max-width: 46rem; min-width: 0; }
.chat-msg-usuario { align-self: flex-end; background: color-mix(in srgb, var(--color-primary) 16%, transparent); border-radius: var(--radius-lg); padding: 0.6rem 0.9rem; white-space: pre-wrap; }
.chat-msg-asistente { align-self: flex-start; width: 100%; }
.chat-msg-cuerpo { line-height: 1.6; overflow-wrap: anywhere; }
.chat-msg-cuerpo > :first-child { margin-top: 0; }
.chat-msg-cuerpo > :last-child { margin-bottom: 0; }
.chat-msg-cuerpo h2 { font-size: 1.1rem; margin: 1rem 0 0.4rem; }
.chat-msg-cuerpo h3 { font-size: 1rem; margin: 0.8rem 0 0.3rem; }
.chat-msg-cuerpo ol, .chat-msg-cuerpo ul { padding-left: 1.4rem; margin: 0.5rem 0; }
.chat-msg-cuerpo blockquote { margin: 0.6rem 0; padding: 0.4rem 0.8rem; border-left: 3px solid var(--color-primary); background: var(--color-surface-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.chat-msg-cuerpo pre { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0.7rem 0.85rem; overflow-x: auto; font-size: 0.85rem; }
.chat-msg-cuerpo code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88em; }
.chat-msg-cuerpo :not(pre) > code { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: 0.3rem; padding: 0.1rem 0.35rem; }
.chat-msg-cuerpo table { border-collapse: collapse; margin: 0.7rem 0; width: 100%; }
.chat-msg-cuerpo th, .chat-msg-cuerpo td { border: 1px solid var(--color-border); padding: 0.35rem 0.55rem; text-align: left; }
.chat-msg-cuerpo th { background: var(--color-surface-2); }
.chat-msg-cuerpo img { max-width: 100%; border-radius: var(--radius-md); }
.chat-pensando, .chat-error { align-self: flex-start; font-size: 0.85rem; }

/* Imagen generada. El ancho lo manda el contenedor: en el móvil una de 1024px
   se saldría de la pantalla. */
.chat-imagen {
    margin: 0;
    /* NADA de `width: fit-content` aquí: el ancho preferido de la figura pasa a
       ser el de la imagen (1024px), y en una rejilla cuyo mínimo automático es
       `auto` eso ensancha la columna entera y saca la pantalla del móvil. */
    max-width: 100%;
    min-width: 0;
}
.chat-imagen img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}
.chat-imagen figcaption {
    margin-top: 0.4rem;
    font-size: 0.8rem;
    color: var(--color-text-2);
    line-height: 1.35;
}
/* Pulsar la imagen no la descarga: despliega dónde quedó guardada, porque
   saber que está en sus archivos es lo que hace útil guardarla ahí. */
.chat-imagen img { cursor: pointer; }
/* El aviso se ciñe al ancho de la IMAGEN, no del mensaje: así se lee como parte
   de ella. Se hace sobre el propio aviso —no sobre la figura— porque poner un
   ancho intrínseco en la figura desborda la rejilla en pantallas estrechas. */
.chat-imagen-ubic {
    width: fit-content;
    max-width: 100%;
    margin-top: 0.45rem;
    padding: 0.6rem 0.75rem;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 0.82rem;
    line-height: 1.4;
}
.chat-imagen-ubic p { margin: 0 0 0.45rem; }
.chat-imagen-nombre {
    color: var(--color-text-2);
    word-break: break-word;
}
.chat-imagen-ubic .btn svg { width: 0.95rem; height: 0.95rem; }
/* En el móvil los dos botones no caben de lado a lado: se envuelven. */
.chat-imagen-acc { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chat-imagen-acc .btn { text-decoration: none; }
.chat-imagen-ida {
    margin: 0;
    font-size: 0.82rem;
    color: var(--color-text-2);
    font-style: italic;
}

/* Documentos adjuntos a la conversación, encima de la barra de escribir: se ve
   sobre qué está respondiendo la IA sin tener que recordarlo. */
.chat-adjuntos {
    display: flex; flex-wrap: wrap; gap: 0.35rem;
    padding: 0.5rem 1.25rem 0;
    min-width: 0;
}
.chat-adjunto {
    display: inline-flex; align-items: center; gap: 0.3rem;
    max-width: 100%;
    padding: 0.2rem 0.3rem 0.2rem 0.45rem;
    border: 1px solid var(--color-border); border-radius: 999px;
    background: var(--color-surface-2);
    font-size: 0.78rem;
}
.chat-adjunto svg { width: 0.85rem; height: 0.85rem; flex: none; }
.chat-adjunto-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.chat-adjunto-x {
    border: 0; background: none; color: var(--color-text-2);
    font-size: 1rem; line-height: 1; padding: 0 0.15rem; cursor: pointer; flex: none;
}
.chat-adjunto-x:hover { color: var(--color-danger); }
.chat-aviso { align-self: flex-start; font-size: 0.82rem; color: var(--color-text-2); font-style: italic; }
.chat-clip { flex: none; }
/* Aviso del selector cuando adjunta al chat: sin él, que falte una carpeta
   segura parece un fallo. */
.picker-nota {
    margin: 0 0 0.5rem; font-size: 0.8rem; line-height: 1.35;
    color: var(--color-text-2);
}
.chat-redactar { display: flex; align-items: flex-end; gap: 0.4rem; padding: 0.7rem 1.25rem; border-top: 1px solid var(--color-border); background: var(--color-surface); }
.chat-asistente { flex: 0 0 auto; max-width: 12rem; }
.chat-entrada { flex: 1; resize: none; max-height: 8rem; }
.chat-enviar { flex: none; }

/* Bloque de código de una respuesta: cabecera con el lenguaje y «Copiar». */
.chat-codigo { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; margin: 0.7rem 0; }
.chat-codigo-cab { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.25rem 0.5rem 0.25rem 0.7rem; background: var(--color-surface-2); border-bottom: 1px solid var(--color-border); }
.chat-codigo-lang { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); }
.chat-copiar { border: 0; background: none; color: var(--color-text-2); font: inherit; font-size: 0.78rem; padding: 0.2rem 0.45rem; border-radius: var(--radius-sm); cursor: pointer; }
.chat-copiar:hover { background: var(--color-surface); color: var(--color-text); }
.chat-copiar.copiado { color: var(--color-exito, #22c55e); }
.chat-codigo pre { margin: 0; border: 0; border-radius: 0; }

/* Colores del código. Se mapean las clases de highlight.js a la paleta del
   sistema en vez de traer su hoja de estilos: así el resaltado cambia con el
   tema (día/noche/los demás) en lugar de quedarse con los colores de otro. */
.hljs-comment, .hljs-quote { color: var(--color-text-muted); font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-section, .hljs-doctag, .hljs-type { color: #c792ea; }
.hljs-string, .hljs-regexp, .hljs-addition, .hljs-attribute, .hljs-meta .hljs-string { color: #a5d6a7; }
.hljs-number, .hljs-symbol, .hljs-bullet, .hljs-link { color: #f78c6c; }
.hljs-title, .hljs-name, .hljs-selector-id, .hljs-selector-class, .hljs-title.function_ { color: #82aaff; }
.hljs-variable, .hljs-template-variable, .hljs-attr, .hljs-property { color: #ffcb6b; }
.hljs-built_in, .hljs-class .hljs-title { color: #89ddff; }
.hljs-deletion { color: var(--color-danger); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 600; }

/* Chat: temas en el lateral, cabecera de la conversación y editor de asistentes. */
.chat-temas { display: flex; flex-direction: column; gap: 0.1rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--color-border); }
.chat-temas-cab { display: flex; align-items: center; justify-content: space-between; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); }
.chat-tema-nuevo { margin: 0.2rem 0; }
.chat-tema-fila { display: flex; align-items: center; gap: 0.1rem; }
.chat-tema { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; padding: 0.3rem 0.45rem; border: 0; border-radius: var(--radius-sm); background: none; color: inherit; font: inherit; font-size: 0.85rem; text-align: left; cursor: pointer; }
.chat-tema:hover { background: var(--color-surface-2); }
.chat-tema.activo { background: color-mix(in srgb, var(--color-primary) 14%, transparent); color: var(--color-primary); font-weight: 600; }
.chat-tema-n { flex: none; font-size: 0.72rem; color: var(--color-text-muted); }
.chat-tema-fila .btn-icono { opacity: 0; }
.chat-tema-fila:hover .btn-icono, .chat-tema-fila .btn-icono:focus-visible { opacity: 1; }

.chat-cabecera { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1.25rem; border-bottom: 1px solid var(--color-border); }
/* El título ES el botón de renombrar: un lápiz aparte sería un icono más que
   adivinar, y aquí el gesto natural es tocar el título. */
.chat-titulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; background: none; border: 0; color: inherit; font: inherit; font-weight: 600; cursor: text; padding: 0.2rem 0.3rem; border-radius: var(--radius-sm); }
.chat-titulo:hover { background: var(--color-surface-2); }
.chat-titulo-in { flex: 1; font-weight: 600; }
.chat-tema-sel, .chat-cabecera .chat-asistente { max-width: 11rem; font-size: 0.85rem; min-width: 0; }
.chat-titulo-nueva { color: var(--color-text-muted); cursor: default; }
.chat-asistente-cfg { flex: none; }

.chat-asist-lista { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 1.25rem; padding-top: 0.75rem; border-top: 1px solid var(--color-border); }
.chat-asist-item { display: flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.4rem; border-radius: var(--radius-sm); }
.chat-asist-item:hover { background: var(--color-surface-2); }
.chat-asist-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Admin de empresa: el selector de sección en móvil. El desplegable ocupa todo
   el ancho para que se lea de un vistazo en qué sección estás — el nombre es el
   rótulo del botón, no algo que haya que abrir para averiguar. */
.admin-secciones { display: none; width: 100%; }
.admin-secciones-btn { width: 100%; justify-content: flex-start; }
.admin-secciones .menu-pop { left: 0; right: 0; min-width: 0; }

.perfil-grupo { border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: 0.6rem; background: var(--color-surface); }
.perfil-grupo[open] { background: var(--color-surface-2); }
.perfil-grupo-cab {
    display: grid; grid-template-columns: 1fr auto; align-items: center;
    gap: 0.15rem 0.6rem; padding: 0.7rem 0.85rem; cursor: pointer;
    list-style: none; user-select: none; border-radius: var(--radius-md);
}
.perfil-grupo-cab::-webkit-details-marker { display: none; } /* el triángulo de serie */
.perfil-grupo-cab:hover { background: var(--color-surface-2); }
.perfil-grupo-tit { font-weight: 600; }
/* El subtítulo dice qué hay DENTRO: cerrado, un bloque sin pistas obliga a
   abrirlos todos para encontrar algo. */
.perfil-grupo-sub { grid-column: 1; font-size: 0.8rem; color: var(--color-text-muted); line-height: 1.35; }
.perfil-grupo-chev { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; color: var(--color-text-2); transition: transform var(--transition); }
.perfil-grupo-chev svg { width: 1.1rem; height: 1.1rem; }
.perfil-grupo[open] .perfil-grupo-chev { transform: rotate(180deg); }
.perfil-grupo-cuerpo { padding: 0.2rem 0.85rem 0.85rem; }
.perfil-grupo-cuerpo > h3:first-child { margin-top: 0.3rem; }
.modal-acciones { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.5rem; }

/* ── IA de correo: panel de revisión previa ──
   El texto que se enviará se muestra en monoespaciada y con los saltos respetados: es un
   PAYLOAD que el usuario debe poder auditar, no prosa. Se limita la altura para que el
   botón de enviar quede siempre visible y nadie acepte sin haber podido mirar. */
.ia-modal { max-width: 44rem; }
.ia-sub { margin: 1rem 0 0.25rem; font-size: 0.95rem; }
.ia-envio {
    max-height: 15rem; overflow: auto; margin: 0.5rem 0 0.75rem; padding: 0.7rem;
    background: var(--color-surface-2); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); font-family: var(--font-mono); font-size: 0.82rem;
    white-space: pre-wrap; word-break: break-word;
}
.ia-resultado { font-family: var(--font-sans); font-size: 0.9rem; max-height: 22rem; }
/* La instrucción se muestra aparte del texto: son las DOS mitades de la petición. */
.ia-instruccion { max-height: 8rem; font-family: var(--font-sans); border-left: 3px solid var(--color-primary); }
.ia-etiquetas { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; margin-left: 0.4rem; }
/* Nombres propuestos. Los MARCADOS se ven distintos de los meramente sugeridos: el usuario
   tiene que poder saber de un vistazo qué está protegido y qué no, sin releer el texto. */
.ia-nombres { margin-top: 0.75rem; }
.ia-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }
.ia-chip { display: inline-flex; align-items: stretch; border: 1px solid var(--color-border);
    border-radius: var(--radius-full); overflow: hidden; font-size: 0.85rem; }
.ia-chip button { border: none; background: transparent; color: var(--color-text-2);
    padding: 0.15rem 0.6rem; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem; }
.ia-chip button:hover { background: var(--color-surface-2); }
.ia-chip.activo { border-color: var(--color-success); }
.ia-chip.activo > button:first-child { background: var(--color-success); color: #fff; }
.ia-chip.activo svg { width: 0.85rem; height: 0.85rem; }
.ia-chip-mas { font-size: 0.78rem; border-left: 1px solid var(--color-border) !important; }

/* El aviso de alcance NO es decorativo: dice qué NO protege el enmascarado. */
.ia-aviso {
    margin: 0.75rem 0 0; padding: 0.6rem 0.7rem; font-size: 0.85rem;
    border-left: 3px solid var(--color-warning); background: var(--color-surface-2);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--color-text-2);
}
/* Editor de texto en la web. */
.modal-ancho { max-width: 60rem; }
/* Editor Office (Collabora): ocupa casi toda la ventana. */
.modal-office { max-width: 98vw; width: 98vw; height: 95vh; max-height: 95vh; padding: 0.75rem; overflow: hidden; }
.office-caja { display: flex; flex-direction: column; height: 100%; }
.office-frame { flex: 1 1 auto; width: 100%; border: 0; border-radius: var(--radius-md); background: #fff; }

/* ── Mis Notas (tipo Keep) ─────────────────────────────────────────────── */
/* Colores post-it: pastel con texto oscuro (legible en tema día y noche,
   como un post-it físico). «default» sí sigue el tema de la app. */
.nota-color-default  { --nota-bg: var(--color-surface); --nota-fg: var(--color-text); --nota-bd: var(--color-border); }
.nota-color-rojo     { --nota-bg: #f28b82; --nota-fg: #202124; --nota-bd: #e06055; }
.nota-color-naranja  { --nota-bg: #fbbc04; --nota-fg: #202124; --nota-bd: #e0a800; }
.nota-color-amarillo { --nota-bg: #fff475; --nota-fg: #202124; --nota-bd: #e6d84f; }
.nota-color-verde    { --nota-bg: #ccff90; --nota-fg: #202124; --nota-bd: #a5e673; }
.nota-color-azul     { --nota-bg: #cbf0f8; --nota-fg: #202124; --nota-bd: #a0dbe8; }
.nota-color-morado   { --nota-bg: #d7aefb; --nota-fg: #202124; --nota-bd: #bd8ef0; }
.nota-color-rosa     { --nota-bg: #fdcfe8; --nota-fg: #202124; --nota-bd: #f0a9d0; }
.nota-color-gris     { --nota-bg: #e8eaed; --nota-fg: #202124; --nota-bd: #c8ccd0; }

.notas-cuerpo { display: grid; grid-template-columns: 220px 1fr; min-height: 0; }
.notas-filtros { padding: 1rem 0.5rem; border-right: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 0.15rem; overflow-y: auto; }
.notas-filtro { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.9rem; border: 0; background: transparent; color: var(--color-text); border-radius: 2rem; cursor: pointer; text-align: left; width: 100%; font-size: 0.92rem; }
.notas-filtro:hover { background: var(--color-bg); }
.notas-filtro.activo { background: color-mix(in srgb, var(--color-primary) 16%, transparent); color: var(--color-primary); font-weight: 600; }
.notas-filtro svg { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }
.notas-filtro-n { font-size: 0.75rem; opacity: 0.6; }

.notas-nueva { max-width: 36rem; margin: 0 auto 1.5rem; }
.notas-nueva-ph { width: 100%; padding: 0.7rem 0.9rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-sm); cursor: text; box-sizing: border-box; }
/* Barrita para cerrar la nota abierta: se toca o se arrastra hacia abajo. Zona
   de toque alta (la barra visible es fina, pero el área sensible no) porque en
   el teléfono es la forma principal de cerrar. */
.nota-tirador { display: flex; align-items: center; justify-content: center; height: 1.6rem; margin: -0.35rem -0.35rem 0.1rem; cursor: grab; touch-action: none; }
.nota-tirador:active { cursor: grabbing; }
.nota-tirador > span { display: block; width: 2.5rem; height: 4px; border-radius: 999px; background: currentColor; opacity: 0.3; transition: opacity var(--transition), width var(--transition); }
.nota-tirador:hover > span, .nota-tirador:focus-visible > span { opacity: 0.55; width: 3.2rem; }
.nota-tirador:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-sm); }

.nota-editor { background: var(--nota-bg); color: var(--nota-fg); border: 1px solid var(--nota-bd); border-radius: var(--radius-md); padding: 0.6rem 0.75rem; box-shadow: var(--shadow-md); }
.nota-titulo-in, .nota-cont-in { width: 100%; background: transparent; border: 0; color: inherit; font-family: inherit; outline: none; box-sizing: border-box; }
.nota-titulo-in { font-weight: 600; font-size: 1rem; margin-bottom: 0.3rem; }
.nota-cont-in { resize: vertical; min-height: 3.5rem; font-size: 0.95rem; white-space: pre-wrap; line-height: 1.4; }
.nota-titulo-in::placeholder, .nota-cont-in::placeholder { color: currentColor; opacity: 0.55; }
.nota-barra { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.5rem; flex-wrap: wrap; }
.nota-colores { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.nota-color-pt { width: 1.35rem; height: 1.35rem; border-radius: 50%; border: 2px solid rgba(0,0,0,0.18); background: var(--nota-bg); cursor: pointer; padding: 0; }
.nota-color-pt.sel { border-color: #202124; box-shadow: 0 0 0 2px #fff inset; }
/* Selector de color como menú (ahorra espacio en la barra, sobre todo en móvil) */
.nota-color-trigger { padding: 0; opacity: 1; }
/* Anillo arcoíris fijo: el color actual coincide con el fondo del editor y se
   camuflaría; este disco siempre es visible y se lee como «colores». */
.nota-color-actual { display: block; width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 1px solid rgba(0,0,0,0.3); background: conic-gradient(#f28b82, #fbbc04, #fff475, #ccff90, #cbf0f8, #d7aefb, #fdcfe8, #f28b82); }
.nota-color-pop { flex-direction: row; flex-wrap: wrap; gap: 0.45rem; width: max-content; min-width: 0; max-width: 14rem; top: auto; bottom: calc(100% + 0.35rem); }
.nota-color-pop .nota-color-pt { width: 1.6rem; height: 1.6rem; }
/* El menú de acciones se abre HACIA ARRIBA, como el de color: la barra vive al
   pie del editor, que es un modal con `overflow: auto`, así que hacia abajo el
   menú queda cortado por el propio modal (comprobado renderizándolo). Con tope
   de alto y desplazamiento por si algún día crece o la pantalla es muy baja. */
.nota-acciones-pop { top: auto; bottom: calc(100% + 0.35rem); max-height: 60vh; overflow-y: auto; }

.notas-grid { columns: 240px; column-gap: 0.9rem; }
.nota-card { break-inside: avoid; width: 100%; margin: 0 0 0.9rem; background: var(--nota-bg); color: var(--nota-fg); border: 1px solid var(--nota-bd); border-radius: var(--radius-md); padding: 0.75rem 0.85rem; cursor: pointer; position: relative; box-shadow: var(--shadow-sm); transition: box-shadow 0.15s; }
.nota-card:hover { box-shadow: var(--shadow-md); }
.nota-card-titulo { font-weight: 600; margin-bottom: 0.25rem; word-break: break-word; padding-right: 1.2rem; }
.nota-card-cont { white-space: pre-wrap; word-break: break-word; font-size: 0.92rem; line-height: 1.4; max-height: 14rem; overflow: hidden; }
.nota-pin { position: absolute; top: 0.5rem; right: 0.5rem; width: 1rem; height: 1rem; opacity: 0.75; display: inline-flex; }
.nota-card-etqs { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.5rem; }
.nota-etq { font-size: 0.72rem; background: rgba(0,0,0,0.09); border-radius: 1rem; padding: 0.12rem 0.55rem; }
.nota-etq-quita { cursor: pointer; }
.nota-etq-quita:hover { background: rgba(0,0,0,0.18); }
.nota-acciones { display: flex; gap: 0.15rem; margin-top: 0.5rem; opacity: 0; transition: opacity 0.15s; }
.nota-card:hover .nota-acciones, .nota-acciones:focus-within { opacity: 1; }
.nota-acc { background: transparent; border: 0; cursor: pointer; color: inherit; opacity: 0.7; width: 1.9rem; height: 1.9rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; padding: 0; }
.nota-acc:hover { background: rgba(0,0,0,0.1); opacity: 1; }
.nota-acc.activo { opacity: 1; }
.nota-acc svg { width: 1.05rem; height: 1.05rem; }
.nota-etq-menu { margin: 0.5rem 0; font-size: 0.9rem; }
.nota-etq-menu summary { cursor: pointer; opacity: 0.85; }
.nota-etq-lista { padding: 0.4rem 0; display: flex; flex-direction: column; gap: 0.2rem; max-height: 12rem; overflow: auto; }
.nota-etq-op { display: flex; align-items: center; gap: 0.5rem; }
.nota-etq-check { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.nota-etq-acc { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; padding: 0; background: none; border: none; color: var(--color-text-muted); cursor: pointer; border-radius: var(--radius-sm); flex: none; }
.nota-etq-acc svg { width: 0.95rem; height: 0.95rem; }
.nota-etq-acc:hover { background: var(--color-surface-2); color: var(--color-text); }
.nota-etq-acc-del:hover { color: #ef4444; }
/* Archivos de «Mis archivos» adjuntos por referencia. */
.nota-archivos { display: flex; flex-direction: column; gap: 0.35rem; margin: 0.4rem 0; }
.nota-arch { display: flex; align-items: center; gap: 0.3rem; }
.nota-arch-abrir { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.5rem; background: rgba(0,0,0,0.05); border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; color: inherit; font: inherit; text-align: left; }
.nota-arch-abrir:hover:not(:disabled) { border-color: var(--color-primary); }
.nota-arch-abrir:disabled { cursor: default; opacity: 0.7; }
.nota-arch-mini { width: 2rem; height: 2rem; object-fit: cover; border-radius: var(--radius-sm); flex: none; }
.nota-arch-ic { display: inline-flex; width: 1.1rem; height: 1.1rem; color: var(--color-text-muted); flex: none; }
.nota-arch-ic svg { width: 100%; height: 100%; }
.nota-arch-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.88rem; }
.nota-arch-no-etq { font-size: 0.7rem; color: #ef4444; flex: none; }
.nota-arch-no .nota-arch-nom { text-decoration: line-through; color: var(--color-text-muted); }
/* Chips de archivos en la tarjeta (solo lectura). */
.nota-card-arch { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.35rem; }
.nota-arch-chip { display: inline-flex; align-items: center; gap: 0.3rem; max-width: 100%; font-size: 0.72rem; background: rgba(0,0,0,0.09); border-radius: 0.5rem; padding: 0.12rem 0.5rem; }
.nota-arch-chip-ic { display: inline-flex; width: 0.85rem; height: 0.85rem; flex: none; }
.nota-arch-chip-ic svg { width: 100%; height: 100%; }
.nota-arch-chip-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nota-arch-chip.nota-arch-no .nota-arch-chip-nom { text-decoration: line-through; opacity: 0.7; }
/* Archivo seleccionable en el picker de adjuntar. */
.picker-archivo .picker-adj { margin-left: auto; font-size: 0.78rem; color: var(--color-primary); flex: none; }
.picker-archivo:disabled { opacity: 0.55; cursor: default; }
.picker-archivo:disabled .picker-adj { color: var(--color-text-muted); }

/* ── Buzón: cliente de correo light (Fase 1) ── */
.buzon { max-width: 900px; margin: 0 auto; }
.buzon-cab { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.9rem; }
.buzon-cuenta { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem; }
.buzon-lista { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); }
.buzon-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.85rem; background: none; border: none; border-bottom: 1px solid var(--color-border); cursor: pointer; text-align: left; color: inherit; font: inherit; width: 100%; }
.buzon-item:last-child { border-bottom: none; }
.buzon-item:hover { background: var(--color-surface-2); }
.buzon-avatar { flex: none; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; }
.buzon-item-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.buzon-item-top { display: flex; align-items: baseline; gap: 0.5rem; }
.buzon-de { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buzon-fecha { flex: none; font-size: 0.78rem; color: var(--color-text-muted); }
.buzon-item-meta { flex: none; display: flex; flex-direction: row; align-items: center; gap: 0.3rem; white-space: nowrap; }
.buzon-clip { width: 0.85rem; height: 0.85rem; color: var(--color-text-muted); }
.buzon-clip svg { width: 100%; height: 100%; display: block; }
/* Selección múltiple + barra de acciones en lote */
.buzon-avatar { cursor: pointer; user-select: none; }
.buzon-avatar-sel { background: var(--color-success); }
.buzon-item.marcado { background: color-mix(in srgb, var(--color-primary) 12%, transparent); }
/* La barra de selección se queda A LA VISTA al desplazar la lista: si se va
   hacia arriba al buscar otro correo, uno acaba seleccionando a ciegas y
   subiendo cada vez para actuar. `sticky` + fondo opaco, y por encima de los
   renglones (que llevan su propio apilado). */
.buzon-sel-barra {
    display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--color-border); background: var(--color-surface);
    flex-wrap: wrap;
    position: sticky; top: 0; z-index: 40;
    box-shadow: 0 2px 6px rgb(0 0 0 / 18%);
}
.buzon-sel-barra .btn svg { width: 1.1rem; height: 1.1rem; display: block; }
.buzon-sel-barra .crece { flex: 1; }
.buzon-sel-n { font-weight: 600; min-width: 1.4rem; text-align: center; }
.buzon-del:hover:not(:disabled) { color: var(--color-danger); border-color: var(--color-danger); }
.buzon-mover-arbol { max-height: 22rem; overflow-y: auto; margin: 0.5rem 0; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 0.3rem; }
/* Arrastrar mensajes a una carpeta (escritorio): resalta el destino. */
.buzon-pane-tree .nodo.drop-activo { background: color-mix(in srgb, var(--color-primary) 22%, transparent); outline: 2px dashed var(--color-primary); outline-offset: -2px; border-radius: var(--radius-sm); }
.buzon-asunto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-muted); font-size: 0.9rem; }
.buzon-item.no-leido .buzon-de { font-weight: 700; }
.buzon-item.no-leido .buzon-asunto { color: var(--color-text); font-weight: 500; }
.buzon-item.no-leido .buzon-avatar { box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-primary); }
/* Lector: en escritorio va en el 3er panel (en flujo); en móvil, overlay a pantalla completa (ver media query). */
/* Los dos «a pantalla completa» del correo tapan la tabbar a propósito (z 60/62 >
   40), pero el banner de vaciado va por encima de ellos (z 90). Como son columnas
   flex cuyo último hijo desplaza (el iframe/texto del mensaje, el cuerpo del
   redactor), el padding inferior encoge esa zona y el final del contenido queda
   por ARRIBA del banner; sin él, las últimas líneas se quedaban debajo sin manera
   de sacarlas (ya no queda nada que desplazar). Ver --alto-vaciado en app.js. */
.buzon-lector { position: fixed; inset: 0; z-index: 60; background: var(--color-bg); display: flex; flex-direction: column; height: 100%; padding-bottom: var(--alto-vaciado, 0px); }
.buzon-lector-cab { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.buzon-lector-meta { flex: 1; min-width: 0; }
.buzon-lector-asunto { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buzon-lector-de { font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buzon-lector-fecha { flex: none; font-size: 0.8rem; }
.buzon-cargando-msg { padding: 1rem; }
.buzon-adjuntos { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.5rem 0.9rem; border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.buzon-adj { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; background: var(--color-surface-2); border-radius: 0.5rem; padding: 0.15rem 0.5rem; }
.buzon-adj-desc { max-width: 100%; border: 1px solid var(--color-border); cursor: pointer; color: inherit; font: inherit; padding: 0.25rem 0.55rem; }
.buzon-adj-desc:hover { border-color: var(--color-primary); color: var(--color-primary); }
.buzon-adj-desc .buzon-adj-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 16rem; }
.buzon-adj-desc .buzon-adj-tam { flex: none; }
.buzon-adj-ic { display: inline-flex; width: 0.85rem; height: 0.85rem; }
.buzon-adj-ic svg { width: 100%; height: 100%; }
/* Cada adjunto: chip de descarga + botón «Guardar en Mis archivos». */
.buzon-adj-item { display: inline-flex; align-items: center; gap: 0.15rem; }
.buzon-adj-guardar { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.5rem; border: none; background: none; color: var(--color-text-2); cursor: pointer; font: inherit; font-size: 0.8rem; border-radius: 0.5rem; }
.buzon-adj-guardar:hover { color: var(--color-primary); background: var(--color-surface-2); }
.buzon-adj-guardar svg { width: 1.05rem; height: 1.05rem; flex: none; }
/* ── Invitación de calendario (iMIP) dentro del lector ──
   Tarjeta destacada sobre el cuerpo del correo, con la barra de acento a la izquierda
   para que se lea como «esto no es texto del mensaje, es un evento». */
.buzon-invitacion { margin: 0.6rem 0.9rem; padding: 0.7rem 0.9rem; border: 1px solid var(--color-border); border-left: 3px solid var(--color-primary); border-radius: 0.6rem; background: var(--color-surface-2); }
.buzon-invitacion.cancelada { border-left-color: var(--color-danger); }
.buzon-inv-cab { display: flex; align-items: center; gap: 0.4rem; color: var(--color-primary); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; }
.buzon-invitacion.cancelada .buzon-inv-cab { color: var(--color-danger); }
.buzon-inv-ic { display: inline-flex; width: 0.95rem; height: 0.95rem; }
.buzon-inv-ic svg { width: 100%; height: 100%; }
.buzon-inv-titulo { margin: 0.25rem 0 0.4rem; font-size: 1.05rem; font-weight: 600; color: var(--color-text); overflow-wrap: anywhere; }
.buzon-inv-datos { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.86rem; color: var(--color-text-2); }
.buzon-inv-fila { display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; }
.buzon-inv-etq { flex: none; min-width: 4.5rem; color: var(--color-text-muted); font-size: 0.78rem; }
.buzon-inv-gente { display: flex; flex-wrap: wrap; gap: 0.3rem; }
/* Cada invitado con su estado (PARTSTAT): el color dice si aceptó sin tener que leerlo. */
.buzon-inv-persona { font-size: 0.78rem; padding: 0.1rem 0.45rem; border-radius: 0.5rem; background: var(--color-surface); border: 1px solid var(--color-border); }
.buzon-inv-persona.est-accepted { border-color: var(--color-success); color: var(--color-success); }
.buzon-inv-persona.est-declined { border-color: var(--color-danger); color: var(--color-danger); text-decoration: line-through; }
.buzon-inv-persona.est-tentative { border-color: var(--color-warning); color: var(--color-warning); }
.buzon-inv-acc { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.7rem; margin-top: 0.7rem; padding-top: 0.6rem; border-top: 1px solid var(--color-border); }
.buzon-inv-pregunta { font-size: 0.86rem; color: var(--color-text-2); }
.buzon-inv-botones { display: flex; gap: 0.35rem; flex-wrap: wrap; }
/* La tarjeta ya usa surface-2, que es el fondo por defecto de .btn: sin esto los
   botones secundarios se confunden con el fondo y no se leen como botones. */
.buzon-inv-botones .btn { background: var(--color-surface); border-color: var(--color-border); }
.buzon-inv-botones .btn:hover { background: var(--color-border); }
.buzon-inv-botones .btn-primary { background: var(--color-primary); color: var(--color-primary-fg); border-color: var(--color-primary); }
.buzon-inv-botones .btn-primary:hover { background: var(--color-primary-h); }
/* La respuesta vigente queda marcada, para poder cambiarla sin perder cuál eligió. */
.buzon-inv-botones .elegida { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.buzon-inv-espera { font-size: 0.8rem; }
.buzon-inv-nota { margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--color-border); font-size: 0.86rem; color: var(--color-text-2); display: flex; flex-direction: column; gap: 0.15rem; }
@media (max-width: 640px) {
    .buzon-invitacion { margin: 0.5rem 0.6rem; padding: 0.6rem 0.7rem; }
    .buzon-inv-etq { min-width: 100%; }
}
/* Opciones de envío en el redactor (solo con transporte SMTP). */
.buzon-opc-envio { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 0.35rem 0; }
.buzon-opc-prio { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--color-text-2); }
.buzon-opc-prio .select { width: auto; }
.buzon-opc-acuse { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--color-text-2); cursor: pointer; }
/* Prioridad declarada por el remitente: marca en la lista y aviso en el lector. */
/* El «!» solo ocupa la franja central de su caja, así que se ve más pequeño de lo que
   mide: se le da más caja y más grosor de trazo para que se lea de un vistazo. */
.buzon-prio { display: inline-flex; width: 1.15rem; height: 1.15rem; flex: none; }
.buzon-prio svg { width: 100%; height: 100%; stroke-width: 3; }
.buzon-prio.prio-alta { color: var(--color-danger); }
.buzon-prio.prio-baja { color: var(--color-text-muted); }
.buzon-prio-barra { display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.9rem; font-size: 0.82rem; border-bottom: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-2); }
.buzon-prio-barra svg { width: 1.05rem; height: 1.05rem; flex: none; stroke-width: 3; }
.buzon-prio-barra.prio-alta { color: var(--color-danger); }
/* Petición de acuse de lectura: barra discreta, no un modal — no debe estorbar al leer. */
.acuse-tit { margin: 1rem 0 0.25rem; font-size: 0.95rem; }
.acuse-ayuda { font-size: 0.8rem; margin: 0 0 0.5rem; }
.buzon-acuse { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.7rem; padding: 0.5rem 0.9rem; border-bottom: 1px solid var(--color-border); background: var(--color-surface-2); font-size: 0.85rem; }
.buzon-acuse-txt { flex: 1; min-width: 12rem; color: var(--color-text-2); }
.buzon-acuse-acc { display: flex; gap: 0.35rem; }
.buzon-iframe { flex: 1; width: 100%; max-width: 100%; border: none; background: #fff; }
/* Cuerpo del correo como texto plano (toggle «Sólo texto»). */
.buzon-texto-plano { flex: 1; margin: 0; overflow: auto; padding: 0.9rem; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85rem; line-height: 1.5; background: var(--color-surface); color: var(--color-text); }
/* Fila «Detalles · Sólo texto» + panel de detalles (destinatarios). */
.buzon-lector-vista { display: flex; gap: 1rem; padding: 0.35rem 0.9rem; border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.buzon-vista-link { display: inline-flex; align-items: center; gap: 0.35rem; border: none; background: none; color: var(--color-text-2); cursor: pointer; font: inherit; font-size: 0.82rem; padding: 0.15rem 0; }
.buzon-vista-link:hover, .buzon-vista-link.activo { color: var(--color-primary); }
.buzon-vista-link svg { width: 0.95rem; height: 0.95rem; flex: none; }
.buzon-detalles { padding: 0.5rem 0.9rem; border-bottom: 1px solid var(--color-border); background: var(--color-surface-2); font-size: 0.85rem; display: flex; flex-direction: column; gap: 0.25rem; }
.buzon-detalle-fila { display: flex; gap: 0.5rem; }
.buzon-detalle-etq { flex: none; min-width: 6rem; color: var(--color-text-2); font-weight: 600; }
.buzon-detalle-val { min-width: 0; overflow-wrap: anywhere; }
/* Carpetas IMAP en ÁRBOL colapsable (como el de Mis archivos). */
.buzon-carpetas { margin-bottom: 0.7rem; }
.buzon-carpeta-toggle { max-width: 100%; }
.buzon-carpeta-toggle span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buzon-carpeta-chev { display: inline-flex; width: 1.15rem; height: 1.15rem; transition: transform var(--transition); }
.buzon-carpeta-chev.abierto { transform: rotate(180deg); }
.buzon-arbol { margin-top: 0.4rem; max-height: 22rem; overflow-y: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); padding: 0.3rem; }
.buzon-nodo { display: flex; align-items: center; gap: 0.1rem; border-radius: var(--radius-sm); }
.buzon-nodo.activa { background: var(--color-surface-2); }
.buzon-nodo-tog { flex: none; width: 1.5rem; height: 1.7rem; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; color: var(--color-text-muted); cursor: pointer; padding: 0; }
.buzon-nodo-tog svg { width: 0.85rem; height: 0.85rem; }
.buzon-nodo-vacio { cursor: default; }
.buzon-nodo-lbl { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.4rem; text-align: left; background: none; border: none; color: inherit; font: inherit; cursor: pointer; padding: 0.35rem 0.3rem; }
.buzon-nodo-lbl > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buzon-nodo-ic { flex: none; }
.buzon-nodo-ic svg { width: 1.1rem; height: 1.1rem; }
/* Contador de no-leídos por carpeta (LIST-STATUS). */
.buzon-folder-n { flex: none; font-size: 0.68rem; font-weight: 600; background: var(--color-primary); color: #fff; border-radius: 0.7rem; padding: 0.03rem 0.4rem; min-width: 1.15rem; text-align: center; line-height: 1.45; }
.nodo.con-nuevos .nodo-etq, .buzon-nodo.con-nuevos .buzon-nodo-lbl { font-weight: 700; }
/* Papelera de carpeta (aparece al pasar el cursor sobre la carpeta, escritorio). */
.buzon-folder-del { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; padding: 0; background: none; border: none; color: var(--color-text-muted); cursor: pointer; border-radius: var(--radius-sm); opacity: 0; }
.buzon-folder-del svg { width: 0.85rem; height: 0.85rem; }
.file-tree .nodo:hover .buzon-folder-del { opacity: 1; }
.buzon-folder-del:hover { color: var(--color-danger); }
/* «Cargar más» al final de la lista. */
.buzon-mas { display: block; margin: 0.6rem auto; }
/* Indicador de búsqueda dentro de la carpeta de correo. */
.buzon-busq-info { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.6rem; background: var(--color-surface-2); border-bottom: 1px solid var(--color-border); font-size: 0.85rem; }
.buzon-busq-info .crece { flex: 1; }
.buzon-busq-ic { flex: none; width: 0.9rem; height: 0.9rem; color: var(--color-text-muted); }
.buzon-busq-ic svg { width: 100%; height: 100%; }
.buzon-busq-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Sección «Correos» en la búsqueda global. */
.busq-correos-ic { display: inline-flex; width: 1.1rem; height: 1.1rem; vertical-align: -2px; }
.busq-correos-ic svg { width: 100%; height: 100%; }

/* Tira de progreso de la búsqueda global: una pastilla por categoría, con lo
   que lleva encontrado o «buscando…» si aún no ha contestado. Envuelve en vez
   de desplazarse: en el móvil son cuatro y caben en dos renglones, y una tira
   que se desplaza esconde justo lo que se quiere mirar de un vistazo. */
.busq-estado { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 .8rem; }
.busq-estado-tit { font-size: .82rem; }
.busq-cat {
    display: inline-flex; align-items: baseline; gap: .35rem;
    padding: .2rem .55rem; border-radius: var(--radius-full);
    background: var(--color-surface-2); font-size: .8rem;
}
.busq-cat-etq { color: var(--color-text-2); }
.busq-cat-n { font-weight: 600; }
/* Mientras espera, la pastilla late despacio: se ve que sigue trabajando sin
   meter otro spinner girando en pantalla. */
.busq-cat.busca, .busq-cat.espera { animation: busq-late 1.4s ease-in-out infinite; }
/* 'parcial': ya hay resultados y siguen llegando. La pastilla NO se atenúa
   —lo que muestra ya es bueno— pero late el puntito de continuación. */
.busq-cat-mas { color: var(--color-text-2); animation: busq-late 1.4s ease-in-out infinite; }
.busq-cat.busca .busq-cat-n, .busq-cat.espera .busq-cat-n { font-weight: 400; font-style: italic; }
.busq-cat.error .busq-cat-n { color: var(--color-danger); font-weight: 400; }
@keyframes busq-late { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .busq-cat.busca, .busq-cat.espera, .busq-cat-mas { animation: none; } }
.buzon-nodo.activa .buzon-nodo-lbl { font-weight: 600; color: var(--color-primary); }
.buzon-nodo-lbl:hover { color: var(--color-primary); }
/* Panel izquierdo de carpetas (escritorio). En móvil, .file-tree ya lo oculta y se
   usa el árbol colapsable de arriba (.buzon-carpetas-movil). */
.buzon-sidebar { padding-top: 0.5rem; }
@media (min-width: 769px) { .buzon-carpetas-movil { display: none; } }
/* Acciones del lector (Responder / Reenviar). */
.buzon-lector-acc { display: flex; gap: 0.5rem; padding: 0.5rem 0.9rem; border-bottom: 1px solid var(--color-border); background: var(--color-surface); flex-wrap: wrap; }
/* Redactar (overlay a pantalla completa). */
.buzon-redactar { position: fixed; inset: 0; z-index: 62; background: var(--color-bg); display: flex; flex-direction: column; padding-bottom: var(--alto-vaciado, 0px); }
.buzon-redactar-cab { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.buzon-redactar-tit { flex: 1; margin: 0; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buzon-redactar-cuerpo { flex: 1; display: flex; flex-direction: column; gap: 0.6rem; padding: 0.9rem; width: 100%; max-width: 800px; margin: 0 auto; overflow-y: auto; }
.buzon-campo { display: flex; align-items: center; gap: 0.6rem; }
.buzon-campo > span:first-child { flex: none; width: 3.2rem; color: var(--color-text-muted); font-size: 0.9rem; }
.buzon-campo .input { flex: 1; min-width: 0; }
.buzon-cc { display: flex; flex-direction: column; gap: 0.6rem; }
.buzon-cc-toggle { align-self: flex-start; background: none; border: none; color: var(--color-primary); cursor: pointer; font: inherit; font-size: 0.85rem; padding: 0; }
.buzon-textarea { flex: 1; min-height: 12rem; resize: vertical; font-family: inherit; line-height: 1.5; }
/* Autocompletado de destinatarios (CardDAV). */
.buzon-campo-ac { align-items: flex-start; }
.buzon-campo-etq { flex: none; width: 3.2rem; color: var(--color-text-muted); font-size: 0.9rem; padding-top: 0.5rem; }
.buzon-ac-wrap { flex: 1; min-width: 0; position: relative; }
.buzon-ac-wrap .input { width: 100%; }
.buzon-ac-pop { position: absolute; top: calc(100% + 0.2rem); left: 0; right: 0; z-index: 5; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); max-height: 16rem; overflow-y: auto; padding: 0.25rem; }
.buzon-ac-item { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.4rem 0.5rem; background: none; border: none; border-radius: var(--radius-sm); cursor: pointer; text-align: left; color: inherit; font: inherit; }
.buzon-ac-item.activo, .buzon-ac-item:hover { background: var(--color-surface-2); }
.buzon-ac-avatar { flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.85rem; }
.buzon-ac-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.buzon-ac-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.buzon-ac-mail { overflow: hidden; font-size: 0.8rem; color: var(--color-text-muted); display: flex; gap: 0.35rem; align-items: center; }
/* El corte con «…» va en el correo, no en el contenedor: la etiqueta nunca se recorta. */
.buzon-ac-mail > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Etiqueta del correo (trabajo/casa) cuando el contacto tiene varios: distingue cuál es cuál. */
.buzon-ac-etq { flex: none; font-size: 0.7rem; padding: 0 0.3rem; border-radius: 0.4rem; background: var(--color-surface-2); border: 1px solid var(--color-border); }
/* Adjuntos en redacción */
.buzon-adj-acc { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.buzon-adj-lista { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.buzon-adj-chip { display: inline-flex; align-items: center; gap: 0.35rem; max-width: 100%; font-size: 0.82rem; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: 0.5rem; padding: 0.2rem 0.25rem 0.2rem 0.5rem; }
.buzon-adj-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14rem; }
.buzon-adj-tam { flex: none; font-size: 0.72rem; }
.buzon-adj-x { display: inline-flex; align-items: center; justify-content: center; width: 1.3rem; height: 1.3rem; padding: 0; background: none; border: none; color: var(--color-text-muted); cursor: pointer; border-radius: var(--radius-sm); flex: none; }
.buzon-adj-x:hover { color: var(--color-danger); }
.buzon-adj-x svg { width: 0.8rem; height: 0.8rem; }

/* ── Correo: layout de 3 paneles (árbol · lista · vista previa) en escritorio ── */
.buzon-sep { display: none; }
.buzon-preview-vacio { display: none; }
@media (min-width: 769px) {
    .buzon-main { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
    .buzon-main .buzon-cab { padding: 0.7rem 1rem; margin: 0; border-bottom: 1px solid var(--color-border); }
    .buzon-main .buzon-aviso-card { margin: 1rem; }
    .buzon-panes { flex: 1; min-height: 0; display: grid; grid-template-columns: var(--w-tree, 210px) 5px var(--w-list, 330px) 5px 1fr; }
    .buzon-pane { min-height: 0; overflow-y: auto; }
    .buzon-pane-tree { padding: 0.5rem 0.3rem; }
    .buzon-pane-tree.file-tree { border-right: none; }
    .buzon-pane-list { border-right: 1px solid var(--color-border); }
    .buzon-pane-list .buzon-lista { border: none; border-radius: 0; }
    .buzon-pane-preview { overflow: hidden; min-width: 0; }
    .buzon-sep { display: block; background: var(--color-border); cursor: col-resize; }
    .buzon-sep:hover, .buzon-sep:active { background: var(--color-primary); }
    /* Lector en flujo dentro del panel de vista previa (no overlay en escritorio) */
    .buzon-lector { position: static; inset: auto; z-index: auto; height: 100%; }
    .buzon-lector-atras { display: none; }
    .buzon-preview-vacio { display: flex; height: 100%; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; color: var(--color-text-muted); padding: 1rem; text-align: center; }
    .buzon-preview-ic { width: 2.6rem; height: 2.6rem; opacity: 0.35; }
    .buzon-preview-ic svg { width: 100%; height: 100%; }
    .buzon-preview-logo { width: clamp(90px, 38%, 180px); height: auto; opacity: 0.9; }
    .buzon-item.sel { background: var(--color-surface-2); box-shadow: inset 3px 0 0 var(--color-primary); }
    .buzon-cargando { padding: 1rem; }
}
/* Aviso de imágenes remotas bloqueadas (con botón para mostrarlas). */
/* Informe de entrega de un rebote. Monoespaciado y con desplazamiento propio:
   son líneas `Clave: valor` que no se deben partir, y el `Diagnostic-Code` del
   servidor remoto puede ser larguísimo. */
.buzon-informe { margin: 0.6rem 0.9rem; border: 1px solid var(--color-border); border-left: 3px solid var(--color-danger); border-radius: var(--radius-md); background: var(--color-surface); }
.buzon-informe-cab { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.7rem 0; font-size: 0.82rem; font-weight: 600; color: var(--color-text-2); }
.buzon-informe-cab svg { width: 1rem; height: 1rem; }
.buzon-informe-txt { margin: 0.35rem 0 0; padding: 0 0.7rem 0.6rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 14rem; overflow: auto; }

.buzon-imgs-barra { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding: 0.5rem 0.9rem; background: var(--color-surface-2); border-bottom: 1px solid var(--color-border); font-size: 0.85rem; color: var(--color-text-muted); }
.buzon-imgs-barra .btn { flex: none; }
.buzon-lector { overflow: hidden; }
.nota-enlaces { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.5rem; }
.nota-enlace { display: flex; flex-direction: column; border: 1px solid var(--nota-bd); border-radius: 0.5rem; background: color-mix(in srgb, var(--nota-fg) 8%, transparent); color: inherit; text-decoration: none; overflow: hidden; }
.nota-enlace:hover { background: color-mix(in srgb, var(--nota-fg) 15%, transparent); }
.nota-enlace-img { width: 100%; height: 120px; object-fit: cover; display: block; background: rgba(0,0,0,0.06); }
.nota-enlace-pie { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.55rem; min-width: 0; }
.nota-favicon { width: 1rem; height: 1rem; flex: 0 0 auto; border-radius: 3px; object-fit: contain; }
.nota-enlace-ic { flex: 0 0 auto; display: inline-flex; opacity: 0.7; }
.nota-enlace-ic svg { width: 1rem; height: 1rem; }
.nota-enlace-txt { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.nota-enlace-titulo { font-size: 0.85rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nota-enlace-dom { font-size: 0.72rem; opacity: 0.65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nota-chip-recordatorio { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.5rem; font-size: 0.75rem; padding: 0.15rem 0.55rem; border-radius: 1rem; background: color-mix(in srgb, var(--nota-fg) 10%, transparent); }
.nota-chip-recordatorio svg { width: 0.85rem; height: 0.85rem; }
.nota-recordatorio-ctrl { display: flex; align-items: center; gap: 0.5rem; margin: 0.6rem 0; color: var(--nota-fg); }
.nota-recordatorio-ic { display: inline-flex; flex: 0 0 auto; opacity: 0.75; }
.nota-recordatorio-ic svg { width: 1.1rem; height: 1.1rem; }
.nota-fecha-in { flex: 1 1 auto; height: 2rem; }
/* Checklists */
.nota-items { display: flex; flex-direction: column; gap: 0.1rem; min-height: 26vh; }
.nota-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.15rem 0; }
.nota-item input[type=checkbox] { flex: 0 0 auto; width: 1.05rem; height: 1.05rem; accent-color: var(--nota-fg); }
.nota-item-txt { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; border-bottom: 1px solid transparent; color: inherit; font-family: inherit; font-size: 0.95rem; padding: 0.15rem 0; outline: none; }
.nota-item-txt:focus { border-bottom-color: var(--nota-bd); }
.nota-item.hecho .nota-item-txt { text-decoration: line-through; opacity: 0.55; }
.nota-item-mas { display: inline-flex; opacity: 0.6; }
.nota-item-mas svg { width: 1.05rem; height: 1.05rem; }
.nota-items-card { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 0.4rem; }
.nota-item-card { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; }
.nota-item-card .nota-check { display: inline-flex; flex: 0 0 auto; opacity: 0.75; }
.nota-item-card .nota-check svg { width: 0.95rem; height: 0.95rem; }
.nota-item-card.hecho { text-decoration: line-through; opacity: 0.5; }
.nota-mas-items { font-size: 0.78rem; opacity: 0.65; margin-top: 0.15rem; }
/* Imágenes adjuntas */
.nota-imgs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0; }
.nota-img { position: relative; width: 6.5rem; height: 6.5rem; border-radius: 0.5rem; overflow: hidden; border: 1px solid var(--nota-bd); }
.nota-img img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.nota-img-x { position: absolute; top: 2px; right: 2px; display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; cursor: pointer; }
.nota-img-x svg { width: 0.9rem; height: 0.9rem; }
.nota-imgs-card { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin-top: 0.4rem; }
.nota-img-card { width: 3.25rem; height: 3.25rem; object-fit: cover; border-radius: 0.4rem; border: 1px solid var(--nota-bd); }
/* Audios (grabaciones) */
.nota-audios { display: flex; flex-direction: column; gap: 0.35rem; margin: 0.4rem 0; }
.nota-audio { display: flex; align-items: center; gap: 0.4rem; }
.nota-audio audio { flex: 1; min-width: 0; height: 2.2rem; }
.nota-audio-dur { font-size: 0.8rem; opacity: 0.7; flex: none; }
.nota-chip-audio { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.4rem; font-size: 0.8rem; opacity: 0.75; }
.nota-chip-audio svg { width: 0.95rem; height: 0.95rem; }
/* Botón de grabación + cronómetro */
.nota-acc.grabando { color: #e0392b; opacity: 1; background: rgba(224, 57, 43, 0.12); }
.nota-acc.grabando svg { width: 1.3rem; height: 1.3rem; }
.nota-grab-timer { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; font-variant-numeric: tabular-nums; color: #e0392b; }
.nota-grab-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #e0392b; animation: nota-grab-pulso 1s ease-in-out infinite; }
@keyframes nota-grab-pulso { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
/* Visor a pantalla completa */
.nota-img-visor { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.9); padding: 1rem; }
.nota-img-visor img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 0.4rem; cursor: zoom-out; }
.nota-img-visor-x { position: absolute; top: max(0.75rem, env(safe-area-inset-top)); right: 0.75rem; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.15); color: #fff; cursor: pointer; }
.nota-img-visor-x svg { width: 1.4rem; height: 1.4rem; }
/* Arrastrar para reordenar */
.nota-grip { position: absolute; top: 1px; left: 50%; transform: translateX(-50%); display: inline-flex; opacity: 0; cursor: grab; touch-action: none; color: inherit; }
.nota-card:hover .nota-grip { opacity: 0.4; }
.nota-grip:active { cursor: grabbing; }
.nota-grip svg { width: 1.15rem; height: 1.15rem; }
.nota-grip-item { position: static; transform: none; opacity: 0.4; flex: 0 0 auto; }
.nota-grip-item svg { width: 1rem; height: 1rem; }
@media (hover: none) { .nota-grip { opacity: 0.35; } }
body.arrastrando-notas, body.arrastrando-notas * { cursor: grabbing !important; user-select: none !important; }

@media (hover: none) { .nota-acciones { opacity: 1; } }
@media (max-width: 720px) {
    .notas-cuerpo { grid-template-columns: 1fr; }
    .notas-filtros { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--color-border); padding: 0.5rem; gap: 0.3rem; }
    .notas-filtros .notas-filtro { flex: 0 0 auto; }
    .notas-filtros .drawer-sep { flex-basis: 100%; height: 0; margin: 0.15rem 0; border-top: 1px solid var(--color-border); background: none; }
    .notas-filtro { width: auto; white-space: nowrap; }
    .notas-grid { columns: 160px; }
}
.editor-area {
    width: 100%; min-height: 58vh; resize: vertical; box-sizing: border-box;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9rem; line-height: 1.5; tab-size: 4;
    /* Ajuste de línea: las líneas largas se envuelven en vez de exigir scroll
       horizontal (se preservan saltos y espacios; se parten tokens muy largos). */
    white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
    padding: 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-md);
    background: var(--color-bg); color: var(--color-text);
}

/* ---- Toasts ---- */
.toast-cont { position: fixed; top: 1rem; right: 1rem; display: flex; flex-direction: column; gap: 0.5rem; z-index: 100; max-width: min(90vw, 24rem); }
.toast {
    display: flex; align-items: flex-start; gap: 0.5rem;
    padding: 0.75rem 1rem; border-radius: var(--radius-md);
    background: var(--color-surface); color: var(--color-text);
    border: 1px solid var(--color-border); border-left: 4px solid var(--color-info);
    box-shadow: var(--shadow-md); animation: toast-in var(--transition);
}
.toast > span { flex: 1; }
/* Separador de la barra de selección: marca dónde empieza lo que saca el correo
   de en medio. Sin él, «marcar leído» y «eliminar» parecen lo mismo. */
.buzon-sel-sep { width: 1px; align-self: stretch; margin: 0.15rem 0.35rem; background: var(--color-border); flex: none; }

.toast-accion {
    flex: none; background: none; border: 0; padding: 0; cursor: pointer;
    color: var(--color-primary); font: inherit; font-weight: 600; white-space: nowrap;
}
.toast-accion:hover { text-decoration: underline; }
.toast-exito { border-left-color: var(--color-success); }
.toast-alerta { border-left-color: var(--color-warning); }
.toast-peligro { border-left-color: var(--color-danger); }
@keyframes toast-in { from { opacity: 0; transform: translateX(1rem); } to { opacity: 1; transform: none; } }

/* ---- Utilidades ---- */
.pila { display: flex; flex-direction: column; gap: 1rem; }
.fila { display: flex; align-items: center; gap: 0.75rem; }
.fila-fin { justify-content: flex-end; }
.oculto { display: none !important; }
.centrado { display: grid; place-items: center; min-height: 100vh; padding: 1rem; }
.panel-login { width: 100%; max-width: 22rem; }

/* ---- Responsive: en móvil, el árbol se oculta y se navega por breadcrumb ---- */
@media (max-width: 768px) {
    /* Barras de botones (nav, herramientas, subtabs) envuelven en vez de
       desbordar la pantalla en celulares. */
    .fila { flex-wrap: wrap; }
    /* Botones de acción de las tablas: solo icono en móvil (la tabla queda
       mucho más angosta y casi no hay que deslizar). */
    .col-acc .btn-con-icono > span:last-child { display: none; }
    .col-acc .btn-con-icono { padding: 0.35rem 0.45rem; }
    .app-cuerpo { grid-template-columns: 1fr; }
    /* El historial se va a un CAJÓN. Antes era una tira horizontal arriba, y
       con cuatro conversaciones ya era inservible: títulos cortados y a
       deslizar de lado a ciegas. En un cajón cabe la lista vertical entera y
       la conversación se queda con toda la pantalla.
       (De paso desaparece el desbordamiento de la tira, que estiraba la
       rejilla: medido, 597px de ancho en una pantalla de 390.) */
    .chat-cuerpo { grid-template-columns: 1fr; grid-template-rows: 1fr; }
    .chat-lateral-fondo {
        display: none;                     /* .abierto lo enciende */
        position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, 0.45);
    }
    .chat-lateral-fondo.abierto { display: flex; }
    .chat-lateral {
        width: min(86vw, 21rem); height: 100%;
        border-right: 0; padding: 0.75rem;
        background: var(--color-surface);
        box-shadow: 2px 0 16px rgba(0, 0, 0, 0.3);
        min-width: 0;
    }
    .chat-lateral-cab {
        display: flex; align-items: center; justify-content: space-between;
        gap: 0.5rem; font-weight: 600; padding-bottom: 0.25rem;
    }
    .chat-abrir-historial { display: inline-flex; }
    /* La lista y los temas se quedan VERTICALES: es un cajón, hay altura. */
    .chat-item { max-width: none; }
    /* La cabecera ENVUELVE: en un teléfono no caben en un renglón el título,
       el asistente y el tema, y como los <select> no encogen por debajo de su
       contenido, el título se quedaba en una letra y el último se salía del
       borde. Mejor dos renglones que un recorte. */
    .chat-cabecera { padding: 0.5rem 0.7rem; flex-wrap: wrap; row-gap: 0.4rem; }
    .chat-cabecera .crece { display: none; }   /* con envoltura solo abre huecos */
    /* El título se va: en un teléfono se quedaba en dos letras y no se leía,
       y el ancho que ocupaba es justo el que les hacía falta a los nombres de
       los asistentes. Renombrar sigue estando en el historial. */
    .chat-titulo, .chat-titulo-nueva { display: none; }
    .chat-titulo-in { flex: 1 1 100%; }        /* al renombrar sí ocupa su renglón */
    .chat-item-renombrar { display: inline-flex; }
    .chat-cabecera .chat-asistente { flex: 1 1 8rem; max-width: none; }
    .chat-tema-sel { flex: 1 1 8rem; max-width: none; }
    .chat-redactar { padding: 0.6rem 0.7rem; }
    .chat-asistente { max-width: 7rem; }
    .sidebar { display: none; }
    .files-layout { grid-template-columns: 1fr; }
    .file-tree { display: none; }
    .navbar { gap: 0.35rem; padding: 0.4rem 0.55rem; }
    /* Wordmark un pelín menor en móvil para que quepan logo + «Mis archivos»
       (con texto en el dashboard) + salir en un solo renglón hasta ~360px. */
    /* En móvil ya cabe la marca junto al logo (las pestañas se fueron a la barra
       inferior): se muestra «MexMail/MexCloud · Módulo», un pelín más chica. */
    .navbar .marca .wordmark { display: inline; font-size: 1.05rem; }
    /* En móvil las pestañas quedan solo con Mis archivos (dashboard) o vacías;
       el resto vive en la hamburguesa. Va INLINE junto a la marca (no en un
       renglón propio); el usuario se empuja a la derecha. Si no cabe, el
       flex-wrap del navbar lo baja solo. */
    .navbar .nav-tabs { order: 1; flex-basis: auto; margin-left: 0; }
    /* Solo iconos en móvil: caben las 3 secciones (Archivos/Notas/Correo) en un renglón.
       Iconos un poco más grandes (tap-target) con padding justo para no saltar de renglón. */
    .navbar .nav-tabs .nav-tab-txt { display: none; }
    .navbar .nav-tabs .btn-con-icono { padding: 0.3rem 0.45rem; }
    .navbar .nav-tabs .btn-con-icono svg { width: 1.3rem; height: 1.3rem; }
    /* El nombre del módulo ahora también en móvil (antes se ocultaba y se usaba
       .nav-seccion-movil). Elipsis + tope de ancho por si el módulo es largo. */
    .navbar .nav-seccion-desk { font-size: 0.98rem; max-width: 42vw; overflow: hidden; text-overflow: ellipsis; }
    .navbar .nav-usuario { order: 2; margin-left: auto; }
    .navbar .usuario-nombre { max-width: 6rem; }
    .solo-movil { display: inline-flex !important; }
    .admin-secciones.solo-movil { display: block !important; } /* ocupa el ancho */
    .tema-selector .texto-muted { display: none; }
    .salir-texto { display: none; }
    .salir-icono { display: inline-flex; }
    .contenido { padding: 1rem 0.85rem; }
    /* z-index 45 (no 30) porque la cabecera es `sticky` y por tanto CREA UN
       CONTEXTO DE APILADO: la barra de selección vive DENTRO de ella y en móvil
       se fija al pie, así que su `z-index:50` se compara solo entre hermanas,
       no contra la tabbar (40). Con 30 la tabbar tapaba la segunda fila de
       acciones (Compartir/Borrar/Limpiar). Queda por debajo del drawer (60) y
       de los diálogos (70). */
    .cabecera-gestor { top: -1rem; margin: -1rem -0.85rem 0.85rem; padding: 0.55rem 0.85rem; z-index: 45; }

    /* Solo en el GESTOR se ocultan las acciones por fila en móvil (pasan a la
       barra inferior de selección). En Papelera/Enlaces/Admin se mantienen. */
    .tabla-gestor .col-acc { display: none; }
    /* La barra de selección crece a 2-3 filas según cuántas acciones apliquen,
       así que el hueco al pie NO puede ser fijo: se mide la barra de verdad
       (--alto-barra-sel, ver app.js) o si no, se supone una fila. */
    .con-barra { padding-bottom: calc(max(var(--alto-barra-sel, 5.5rem), var(--alto-vaciado, 0px)) + 0.5rem); }

    /* En móvil no hay arrastrar-y-soltar: se sube con el botón «Subir» o por
       «Compartir con». Se oculta la zona de soltar y «Subir carpeta»
       (webkitdirectory apenas funciona en móvil). */
    .drop-zone { display: none; }
    .solo-escritorio { display: none !important; }

    .barra-seleccion {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
        margin: 0; border-radius: 0; border-top: 1px solid var(--color-border);
        background: var(--color-surface); flex-direction: column; align-items: stretch;
        gap: 0.15rem; padding: 0.3rem 0.4rem;
        padding-bottom: calc(0.3rem + env(safe-area-inset-bottom));
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.18);
    }
    .barra-conteo { text-align: center; font-size: 0.78rem; color: var(--color-text-muted); font-weight: 600; }
    /* Con varias acciones (incl. IA) no caben en una fila: se acomodan en
       varias (wrap) a 4 por fila, para que TODAS se vean sin desplazar. */
    .barra-acciones {
        margin-left: 0; gap: 0.1rem 0; justify-content: center; flex-wrap: wrap;
        min-width: 0; max-width: 100%;
    }
    .accion-sel {
        flex: 0 0 25%; flex-direction: column; gap: 0.15rem;
        border: none; background: transparent; padding: 0.35rem 0.2rem;
        font-size: 0.68rem; color: var(--color-text-2); min-width: 0;
    }
    .accion-sel:hover { background: transparent; }
    .accion-sel:active { background: var(--color-surface-2); }
    .accion-sel svg { width: 1.5rem; height: 1.5rem; }
    .accion-sel .accion-etq { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    /* «Compartir» como una celda más de la rejilla (4 por fila); su disparador
       llena la celda. `position:static` hace que el desplegable se posicione
       respecto de la barra fija (no del wrap), para abrir ARRIBA y a lo ancho. */
    .barra-acciones .menu-wrap.accion-compartir { position: static; flex: 0 0 25%; display: flex; }
    /* El disparador llena la celda (si no, hereda `flex:0 0 25%` de .accion-sel y
       queda al 25% del wrap → la etiqueta «Compartir» se trunca a «C…»). */
    .barra-acciones .menu-wrap.accion-compartir .accion-sel { flex: 1 1 auto; width: 100%; }
    .barra-seleccion .accion-compartir .menu-pop {
        top: auto; bottom: calc(100% + 0.4rem); left: 0.5rem; right: 0.5rem;
        min-width: 0; max-width: none;
    }
    .barra-seleccion .accion-compartir .menu-pop .menu-pop-item { font-size: 0.95rem; }
    .barra-seleccion .menu-pop .solo-movil { display: flex !important; }
}

/* En pantallas estrechas se ocultan «Tamaño» y «Modificado»: el tamaño pasa a
   subtítulo bajo el nombre (estilo Cx File Explorer). */
@media (max-width: 620px) {
    .file-list-table .col-mod, .file-list-table .col-tam { display: none; }
    .file-list-table th, .file-list-table td { padding: 0.6rem 0.4rem; }
    .subtitulo { display: block; }
    .tipo-icono svg { width: 2rem; height: 2rem; }
    .tipo-icono .miniatura { width: 2.5rem; height: 2.5rem; }
    .enlace-nombre { gap: 0.7rem; }
}

/* Comparativo de tarifas: resalta la columna del modo vigente. */
.col-vigente { background: color-mix(in srgb, var(--color-primary) 12%, transparent); }
.file-list-table th.col-vigente { color: var(--color-primary); }
.tabla-scroll { overflow-x: auto; }


/* ---- Panel de inicio (dashboard personal) ---- */
/* Encabezado de sección del panel de Inicio (Notas / Archivos / Correo) */
.panel-seccion-cab { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; }
.panel-seccion-tit { display: flex; align-items: center; gap: 0.5rem; margin: 0; flex: 1; font-size: 1.05rem; font-weight: 600; }
.panel-seccion-ic { display: inline-flex; width: 1.2rem; height: 1.2rem; color: var(--color-primary); }
.panel-seccion-ic svg { width: 100%; height: 100%; }
/* Mini-estadísticas (resumen de notas) */
.panel-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr)); gap: 0.75rem; }
.mini-stat { text-align: center; padding: 0.4rem 0.25rem; }
.mini-num { font-size: 1.7rem; font-weight: 700; line-height: 1.1; }
.mini-lbl { font-size: 0.78rem; color: var(--color-text-muted); margin-top: 0.15rem; }
.mini-stat.mini-alerta .mini-num { color: var(--color-primary); }
/* Resumen de correo MexMail (3 donuts) */
.correo-donuts { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.25rem; }
.correo-donut { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; }
.correo-donut-tit { font-size: 0.9rem; color: var(--color-text-muted); }
.correo-donut-tit b { color: var(--color-text); }
.donut-sm { width: 8.5rem; height: 8.5rem; }
.leyenda-mini { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem 0.75rem; font-size: 0.82rem; }
.leyenda-mini .lm { display: inline-flex; align-items: center; gap: 0.35rem; }
.panel-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1rem; }
/* En móvil, cada recuadro de espacio a lo ancho (va DESPUÉS de la base para ganar). */
@media (max-width: 620px) { .panel-stats { grid-template-columns: 1fr; } }
.stat-card { padding: 1.1rem 1.25rem; }
.stat-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); font-weight: 600; }
.stat-valor { font-size: 1.9rem; font-weight: 700; line-height: 1.1; margin: 0.3rem 0 0.15rem; }
.stat-sub { font-size: 0.82rem; color: var(--color-text-muted); }
/* Dos donuts (Espacio + Tipos) lado a lado; en móvil se apilan solos. */
.panel-donuts { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; align-items: stretch; }
@media (max-width: 620px) { .panel-donuts { grid-template-columns: 1fr; } }
/* Gráfico centrado y leyenda centrada dentro de cada tarjeta (escritorio y móvil). */
.panel-donuts .card { display: flex; flex-direction: column; margin: 0; }
.panel-donuts .donut-wrap { flex-direction: column; align-items: center; justify-content: center; gap: 1rem; flex: 1; }
.panel-donuts .donut { width: 9.5rem; height: 9.5rem; }
.panel-donuts .leyenda { align-items: center; text-align: center; width: 100%; }
/* Aviso accionable (recordatorios de notas): tarjeta-botón en una fila. */
.panel-aviso { display: flex; align-items: center; gap: 0.7rem; width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.panel-aviso:hover { border-color: var(--color-primary); }
.panel-aviso-ic { display: inline-flex; width: 1.3rem; height: 1.3rem; color: var(--color-primary); flex: none; }
.panel-aviso-ic svg { width: 100%; height: 100%; }
.panel-aviso-txt { flex: 1; min-width: 0; }
.panel-aviso-chev { display: inline-flex; width: 1.1rem; height: 1.1rem; color: var(--color-text-muted); flex: none; }
.panel-aviso-chev svg { width: 100%; height: 100%; }
.donut-wrap { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.donut { width: 11rem; height: 11rem; flex: none; max-width: 100%; }
.donut svg { width: 100%; height: 100%; display: block; }
.leyenda { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
.leyenda-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
.leyenda-punto { width: 0.8rem; height: 0.8rem; border-radius: 50%; flex: none; }
.barras { display: flex; align-items: flex-end; gap: 0.4rem; height: 10rem; padding-top: 0.5rem; }
.barra-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.barra-valor { font-size: 0.75rem; color: var(--color-text-muted); margin-bottom: 0.2rem; height: 1rem; line-height: 1; }
.barra { width: 62%; max-width: 2.5rem; background: var(--color-primary); border-radius: var(--radius-sm) var(--radius-sm) 0 0; transition: height var(--transition); }
.barra-cero { background: var(--color-surface-2); }
.barra-dia { font-size: 0.68rem; color: var(--color-text-muted); margin-top: 0.35rem; white-space: nowrap; }
/* Barras agrupadas por día (enviados/recibidos) para «Correos en la semana». */
.barras-sem { height: 9rem; }
.barras-sem .barra-par { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 0.25rem; }
.barra-uni { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.barras-sem .barra-valor { font-size: 0.62rem; height: 0.9rem; }
.barras-sem .barra { width: 60%; max-width: 1rem; }
.barra-env { background: #a855f7; }
.barra-rec { background: #3b82f6; }
@keyframes girar { to { transform: rotate(360deg); } }
.girando svg { animation: girar 0.8s linear infinite; }


/* ---- Vista de galería ---- */
.vista-toggle { display: inline-flex; gap: 0.25rem; }
.vista-toggle svg { width: 1.15rem; height: 1.15rem; display: block; }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.75rem; }
.galeria-item { position: relative; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); }
.galeria-item.sel { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.galeria-thumb { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; background: var(--color-surface-2); cursor: pointer; overflow: hidden; }
.galeria-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--transition); }
.galeria-thumb:hover .galeria-img { transform: scale(1.04); }
.galeria-icono svg { width: 3rem; height: 3rem; }
/* Preview apilado de carpeta con fotos (vista galería): pila inclinada estilo polaroid */
.galeria-pila { position: relative; width: 100%; aspect-ratio: 1 / 1; }
.galeria-pila-foto {
    position: absolute; width: 50%; height: 50%; object-fit: cover;
    border: 3px solid #fff; border-radius: 2px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
    background: var(--color-surface);
}
.galeria-pila-foto:nth-child(1) { top: 6%;  left: 7%;  transform: rotate(-7deg); z-index: 1; }
.galeria-pila-foto:nth-child(2) { top: 4%;  left: 43%; transform: rotate(6deg);  z-index: 2; }
.galeria-pila-foto:nth-child(3) { top: 45%; left: 5%;  transform: rotate(5deg);  z-index: 3; }
.galeria-pila-foto:nth-child(4) { top: 43%; left: 45%; transform: rotate(-6deg); z-index: 4; }
.galeria-thumb:hover .galeria-pila-foto { box-shadow: 0 2px 9px rgba(0, 0, 0, 0.45); }
.galeria-nombre { font-size: 0.8rem; padding: 0.4rem 0.5rem 0.15rem; display: flex; align-items: center; gap: 0.3rem; color: var(--color-text-2); }
.galeria-sub { font-size: 0.72rem; padding: 0 0.5rem 0.4rem; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.galeria-check {
    position: absolute; top: 0.35rem; left: 0.35rem; z-index: 6;
    display: flex; align-items: center; justify-content: center;
    width: 2.1rem; height: 2.1rem; border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-surface) 72%, transparent); cursor: pointer;
}
.galeria-check input[type="checkbox"] { width: 1.35rem; height: 1.35rem; cursor: pointer; accent-color: var(--color-primary); }
/* Botón «No es esta persona» por foto (lente Por persona). */
.galeria-separar {
    position: absolute; top: 0.35rem; right: 0.35rem; z-index: 6;
    background: color-mix(in srgb, var(--color-surface) 82%, transparent);
}
.galeria-separar svg { width: 1.2rem; height: 1.2rem; }
/* Estrella de Favoritos (lista + galería) */
.btn-fav.activo { color: #f5b301; }
.galeria-fav { position: absolute; top: 0.35rem; right: 0.35rem; z-index: 6; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: rgba(0, 0, 0, 0.4); color: #fff; }
.galeria-fav svg { width: 1.15rem; height: 1.15rem; }
.galeria-fav.activo { color: #f5b301; }
/* Distintivo de espacio (personal/compartida): icono pequeño a la izquierda del nombre */
.galeria-nombre-esp { flex: none; display: inline-flex; line-height: 0; }
.galeria-nombre-esp svg { width: 0.95rem; height: 0.95rem; }
.galeria-nombre-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.galeria-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 2.75rem; height: 2.75rem; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.45); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.galeria-nav:hover { background: rgba(0, 0, 0, 0.65); }
.galeria-nav svg { width: 1.5rem; height: 1.5rem; }
.galeria-nav-prev { left: 0.75rem; }
.galeria-nav-next { right: 0.75rem; }
@media (max-width: 620px) {
    .galeria { grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: 0.5rem; }
    .galeria-nav { width: 2.25rem; height: 2.25rem; }
}

/* Modo "Por fecha": carpetas virtuales de año / mes ---------------------- */
.fecha-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.75rem; margin-top: 0.5rem; }
.fecha-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem;
    padding: 1rem 1.1rem; border: 1px solid var(--color-border); border-radius: var(--radius-md);
    background: var(--color-surface); color: var(--color-text); cursor: pointer; text-align: left;
    transition: border-color 0.12s, background 0.12s, transform 0.12s;
}
.fecha-card:hover { border-color: var(--color-primary); background: var(--color-surface-2); transform: translateY(-1px); }
.fecha-card-icono svg { width: 1.6rem; height: 1.6rem; display: block; color: var(--color-primary); }
.fecha-card-num { font-size: 1.4rem; font-weight: 600; line-height: 1.1; }
.fecha-card-sub { font-size: 0.85rem; color: var(--color-text-muted); }
@media (max-width: 620px) {
    .fecha-cards { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: 0.5rem; }
    .fecha-card { padding: 0.8rem 0.9rem; }
    .fecha-card-num { font-size: 1.2rem; }
}

/* Lente «Por persona»: mosaicos con carita circular ---------------------- */
.persona-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 0.9rem; margin-top: 0.5rem; }
.persona-card { position: relative; }
.persona-card-btn {
    width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
    padding: 0.9rem 0.6rem; border: 1px solid var(--color-border); border-radius: 0.7rem;
    background: var(--color-surface); color: var(--color-text); cursor: pointer; text-align: center;
}
.persona-card-btn:hover { border-color: var(--color-primary); background: var(--color-surface-2); transform: translateY(-1px); }
.persona-cara {
    width: 5rem; height: 5rem; border-radius: 50%; overflow: hidden; display: flex;
    align-items: center; justify-content: center; background: var(--color-surface-2); flex: 0 0 auto;
}
.persona-cara img { width: 100%; height: 100%; object-fit: cover; }
.persona-cara svg { width: 2.2rem; height: 2.2rem; color: var(--color-text-muted); }
.persona-nombre { font-size: 0.95rem; font-weight: 600; line-height: 1.15; word-break: break-word; }
.persona-nombre.sin-nombre { font-weight: 500; color: var(--color-text-muted); font-style: italic; }
.persona-sub { font-size: 0.8rem; color: var(--color-text-muted); }
.persona-editar { position: absolute; top: 0.35rem; right: 0.35rem; opacity: 0; transition: opacity 0.15s; }
.persona-fusionar { position: absolute; bottom: 0.35rem; left: 0.35rem; opacity: 0; transition: opacity 0.15s; }
.persona-eliminar { position: absolute; bottom: 0.35rem; right: 0.35rem; opacity: 0; transition: opacity 0.15s; }
.persona-card:hover .persona-editar, .persona-editar:focus,
.persona-card:hover .persona-fusionar, .persona-fusionar:focus,
.persona-card:hover .persona-eliminar, .persona-eliminar:focus { opacity: 1; }
/* Selección múltiple de personas (quitar falsos positivos en lote) */
.persona-check { position: absolute; top: 0.35rem; left: 0.35rem; z-index: 2; opacity: 0; transition: opacity 0.15s; line-height: 0; cursor: pointer; }
.persona-check input[type="checkbox"] { width: 1.15rem; height: 1.15rem; cursor: pointer; accent-color: var(--color-primary); }
.persona-card:hover .persona-check, .persona-check:focus-within, .persona-card.sel .persona-check { opacity: 1; }
.persona-card.sel .persona-card-btn { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.personas-sel-barra { display: flex; align-items: center; gap: 0.5rem; margin: 0.4rem 0 0.2rem; padding: 0.4rem 0.6rem; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 0.85rem; }
@media (max-width: 620px) {
    .persona-cards { grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); gap: 0.6rem; }
    .persona-cara { width: 4rem; height: 4rem; }
    .persona-editar, .persona-fusionar, .persona-eliminar { opacity: 1; }
}

/* Buscador (cabecera) + resultados --------------------------------------- */
.busqueda-barra { order: 2; display: inline-flex; align-items: center; gap: 0.4rem; flex: 1 1 12rem; max-width: 24rem; min-width: 8rem; padding: 0.3rem 0.6rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-2); }
.busqueda-barra:focus-within { border-color: var(--color-primary); }
/* Buscador propio del picker (el navbar se oculta en modo picker). */
.picker-buscar { display: flex; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--color-border); background: var(--color-surface-2); }
.picker-buscar .busqueda-barra { flex: 1 1 auto; max-width: none; }
/* Indicador de carpeta segura (candado) junto al nombre. */
.candado-seguro { display: inline-flex; align-items: center; width: 0.85em; height: 0.85em; margin-left: 0.35rem; color: var(--color-primary); vertical-align: middle; }
.candado-seguro svg { width: 100%; height: 100%; }
/* Distintivo de firma, hermano del candado de las carpetas seguras: ámbar
   mientras faltan firmas, verde cuando ya están todas. */
.firma-marca { display: inline-flex; align-items: center; width: 0.85em; height: 0.85em; margin-left: 0.35rem; color: var(--color-warning); vertical-align: middle; cursor: pointer; }
.firma-marca.firmada { color: var(--color-success); }
.firma-marca svg { width: 100%; height: 100%; }
.busqueda-icono svg { width: 1.05rem; height: 1.05rem; display: block; color: var(--color-text-muted); }
.busqueda-input { flex: 1; min-width: 0; border: none; background: transparent; color: var(--color-text); font-size: 0.9rem; outline: none; }
.resultados { display: flex; flex-direction: column; gap: 0.6rem; }
.resultado { padding: 0.7rem 0.9rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.resultado-acciones { display: flex; flex-wrap: wrap; gap: 0.2rem; margin-top: 0.5rem; }
.resultado-nombre { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--color-text); }
.resultado-nombre:hover { color: var(--color-primary); }
.resultado-nombre .tipo-icono svg { width: 1.15rem; height: 1.15rem; }
.resultado-ruta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.25rem; font-size: 0.82rem; }
.resultado-carpeta { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--color-text-muted); }
.resultado-carpeta svg { width: 0.9rem; height: 0.9rem; }
.resultado-carpeta:hover { color: var(--color-primary); }
.resultado-frag { margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--color-text-muted); line-height: 1.4; }
@media (max-width: 620px) {
    .busqueda-barra { order: 4; flex-basis: 100%; max-width: none; }
}

/* Resumen con IA (modal) ------------------------------------------------- */
.resumen-caja { white-space: pre-wrap; word-break: break-word; max-height: 50vh; overflow-y: auto; padding: 0.9rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-2); font-size: 0.92rem; line-height: 1.5; margin: 0.5rem 0; }
.resumen-nota { font-size: 0.82rem; }

/* Q&A con IA (modal) ----------------------------------------------------- */
.qa-hilo { display: flex; flex-direction: column; gap: 0.75rem; max-height: 42vh; overflow-y: auto; margin: 0.5rem 0; }
.qa-turno { display: flex; flex-direction: column; gap: 0.35rem; }
.qa-pregunta { display: flex; align-items: flex-start; gap: 0.4rem; font-weight: 600; }
.qa-pregunta svg { width: 1rem; height: 1rem; flex: none; margin-top: 0.2rem; color: var(--color-primary); }
.qa-respuesta { white-space: pre-wrap; word-break: break-word; padding: 0.6rem 0.8rem; border-radius: var(--radius-md); background: var(--color-surface-2); border: 1px solid var(--color-border); font-size: 0.92rem; line-height: 1.5; }
.qa-error { color: var(--color-peligro, #e5484d); }
.qa-form { display: flex; gap: 0.5rem; margin: 0.5rem 0; }
.qa-form .input { flex: 1; }

/* Fichita de datos clave (IA) -------------------------------------------- */
.ficha-tipo { margin: 0.3rem 0 0.6rem; }
.ficha { display: flex; flex-direction: column; gap: 0.4rem; max-height: 46vh; overflow-y: auto; margin: 0.5rem 0; }
.ficha-fila { display: grid; grid-template-columns: minmax(7rem, 34%) 1fr; gap: 0.75rem; padding: 0.45rem 0.7rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-2); }
.ficha-campo { font-weight: 600; margin: 0; }
.ficha-valor { margin: 0; word-break: break-word; }
@media (max-width: 620px) { .ficha-fila { grid-template-columns: 1fr; gap: 0.15rem; } }

/* Menú de acciones de IA (modal) ----------------------------------------- */
.ia-opciones { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.6rem 0; }
.ia-opciones button { display: flex; align-items: center; gap: 0.6rem; width: 100%; text-align: left; padding: 0.7rem 0.9rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-2); color: var(--color-text); cursor: pointer; font-size: 0.95rem; font-weight: 600; transition: border-color 0.12s, background 0.12s; }
.ia-opciones button:hover { border-color: var(--color-primary); background: var(--color-surface); }
.ia-opciones button svg { width: 1.2rem; height: 1.2rem; flex: none; color: var(--color-primary); }

/* Contraseñas de aplicación (WebDAV) — perfil */
.app-token-box { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0.6rem 0.7rem; margin-bottom: 0.6rem; }
.app-token-fila { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.app-token { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.95rem; letter-spacing: 0.03em; word-break: break-all; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 0.4rem; padding: 0.35rem 0.5rem; }
.app-pwd-lista { display: flex; flex-direction: column; gap: 0.35rem; margin: 0.2rem 0 0.2rem; }
.app-pwd-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.55rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.app-pwd-etq { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Modal de notificaciones de correo nuevo (modo + reglas de filtrado). */
.avisos-modos { display: flex; flex-direction: column; gap: .45rem; margin: .6rem 0; }
.radio-fila { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.radio-fila input { margin: 0; }
.avisos-reglas { border-top: 1px solid var(--color-border); margin-top: .6rem; padding-top: .6rem; display: flex; flex-direction: column; gap: .5rem; }
.avisos-regla { display: flex; align-items: center; gap: .4rem; }
.avisos-regla select.input { width: auto; flex: 0 0 auto; }
.avisos-regla-op { flex: 0 0 auto; }
.avisos-regla input.input { flex: 1 1 auto; min-width: 0; }
.avisos-ayuda { font-size: .82em; line-height: 1.35; margin: .1rem 0 0; }

/* Configuración → Notificaciones: una fila por origen de aviso. La casilla
   arriba y no centrada, para que no baile según lo larga que sea la
   explicación de cada uno. */
.avisos-origenes { display: flex; flex-direction: column; gap: .1rem; }
.aviso-origen { display: flex; align-items: flex-start; gap: .6rem; padding: .55rem .5rem; border-radius: 8px; cursor: pointer; }
.aviso-origen:hover { background: var(--color-surface-2); }
.aviso-origen input { margin: .2rem 0 0; flex: 0 0 auto; }
.aviso-origen-txt { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.aviso-origen-etq { font-size: .92rem; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.aviso-origen-desc { font-size: .82rem; line-height: 1.35; }
/* El de seguridad no se pulsa: sin cursor de mano ni resalte, para que se lea
   como lo que es —información— y no como un interruptor que no responde. El
   hueco ocupa lo mismo que una casilla para que su texto empiece donde el de
   las demás filas; si no, el badge lo empujaba y la columna quedaba en zigzag. */
.aviso-origen-fijo { cursor: default; }
.aviso-origen-fijo:hover { background: none; }
.aviso-origen-hueco { flex: 0 0 auto; width: 13px; }

/* Editor de correo con formato (contenteditable + barra de execCommand). */
.buzon-rt { flex: 1; display: flex; flex-direction: column; min-height: 12rem; }
.buzon-rt-barra { display: flex; align-items: center; gap: 0.15rem; flex-wrap: wrap; padding: 0.25rem; border: 1px solid var(--color-border); border-bottom: none; border-radius: 8px 8px 0 0; background: var(--color-surface-2); }
.buzon-rt-btn { min-width: 2rem; height: 2rem; padding: 0 0.4rem; border: none; background: transparent; border-radius: 6px; cursor: pointer; color: var(--color-text); font-size: 0.95rem; display: inline-flex; align-items: center; justify-content: center; }
.buzon-rt-btn:hover { background: var(--color-border); }
.buzon-rt-btn svg { width: 18px; height: 18px; }
.buzon-rt-color { width: 2rem; height: 2rem; padding: 2px; border: none; background: transparent; cursor: pointer; }
.buzon-rt-sep { width: 1px; align-self: stretch; margin: 0.2rem 0.25rem; background: var(--color-border); }
/* El editor con formato es una HOJA DE PAPEL, no una superficie de la aplicación: va
   siempre en blanco, aunque el tema sea oscuro. Razón: el contenido lleva sus colores EN
   LÍNEA (la firma trae `color:#333` porque el correo se lee sobre blanco en el cliente del
   destinatario), así que pintarlo sobre fondo oscuro lo volvía ilegible —texto gris
   oscuro sobre azul oscuro—. Es además lo que ya hacían el panel de lectura
   (`.buzon-iframe`, #fff) y la vista previa de la firma: el editor era el único fuera de
   norma. Y es lo honesto: lo que se ve aquí es lo que le llega al destinatario.
   Los colores se fijan a los MISMOS del panel de lectura para que redactar y leer se vean
   igual; no se usan variables de tema a propósito. */
.buzon-rt-editor { flex: 1; min-height: 10rem; overflow-y: auto; padding: 0.6rem 0.7rem; border: 1px solid var(--color-border); border-radius: 0 0 8px 8px; background: #fff; color: #111; caret-color: #111; line-height: 1.5; outline: none; }
.buzon-rt-editor:focus { border-color: var(--color-primary); }
.buzon-rt-editor:empty::before { content: attr(data-ph); color: #6b7280; }
.buzon-rt-editor blockquote { margin: 0.2rem 0 0 0.4rem; padding-left: 0.6rem; border-left: 2px solid #d1d5db; color: #6b7280; }
.buzon-rt-editor a { color: #2563eb; }
.buzon-rt-editor img { max-width: 100%; height: auto; }
/* Selección: la del sistema sobre papel blanco en tema oscuro puede quedar ilegible. */
.buzon-rt-editor ::selection { background: #b3d4fc; color: #111; }
.buzon-modo-sel { display: inline-flex; border: 1px solid var(--color-border); border-radius: 6px; overflow: hidden; }
.buzon-modo-sel button { border: none; background: transparent; color: var(--color-text-2); padding: 0.2rem 0.6rem; font-size: 0.82rem; cursor: pointer; }
.buzon-modo-sel button.activo { background: var(--color-primary); color: var(--color-primary-fg); }

/* Carpetas de correo especiales: color del ícono por tipo (temático claro/oscuro). */
.buzon-fic-inbox   { color: var(--color-primary); }
.buzon-fic-sent    { color: var(--color-success); }
.buzon-fic-drafts  { color: var(--color-warning); }
.buzon-fic-spam    { color: var(--color-danger); }
.buzon-fic-trash   { color: var(--color-text-muted); }
.buzon-fic-archive { color: var(--color-info); }

/* Globo de no leídos sobre el ícono de Correo (header y hamburguesa). */
.nav-tab-correo { position: relative; overflow: visible; }
.nav-badge { position: absolute; top: -5px; right: -5px; min-width: 1.05rem; height: 1.05rem; padding: 0 0.25rem; box-sizing: border-box; border-radius: 999px; background: var(--color-danger); color: #fff; font-size: 0.62rem; font-weight: 700; line-height: 1.05rem; text-align: center; box-shadow: 0 0 0 2px var(--color-bg); pointer-events: none; }
.drawer-badge { margin-left: auto; min-width: 1.2rem; height: 1.2rem; padding: 0 0.3rem; box-sizing: border-box; border-radius: 999px; background: var(--color-danger); color: #fff; font-size: 0.7rem; font-weight: 700; line-height: 1.2rem; text-align: center; }

/* Nombre de la sección abierta junto a la marca (escritorio). */
.nav-seccion-desk { color: var(--color-text-muted); font-weight: 600; font-size: 1.05rem; white-space: nowrap; letter-spacing: -0.01em; }
.nav-seccion-desk::before { content: '· '; opacity: 0.65; }
.nav-seccion-movil { display: none; } /* solo en móvil (ver media query) */

/* Gestor de filtros (Sieve). */
.reglas-modal { max-width: 560px; }
.reglas-lista { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.6rem 0; max-height: 45vh; overflow-y: auto; }
.regla-fila { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.6rem; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface-2); }
.regla-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.regla-nombre { font-weight: 600; }
.regla-resumen { font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.regla-acc { flex: 0 0 auto; display: flex; gap: 0.15rem; }
.regla-comb { display: flex; gap: 1rem; margin-bottom: 0.45rem; flex-wrap: wrap; }
.regla-cond { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.4rem; flex-wrap: wrap; }
.regla-cond select.input { width: auto; flex: 0 0 auto; }
.regla-cond input.input { flex: 1 1 8rem; min-width: 0; }

/* Módulo de Contactos. */
.contactos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.6rem; margin-top: 0.8rem; }
.contacto-card { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.7rem; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); cursor: pointer; text-align: left; color: inherit; width: 100%; }
.contacto-card:hover { border-color: var(--color-primary); }
.contacto-foto { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: var(--color-surface-2); }
.contacto-foto img { width: 100%; height: 100%; object-fit: cover; }
.contacto-inicial { font-weight: 700; color: var(--color-primary); font-size: 1.1rem; }
.contacto-datos { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.contacto-nombre { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contacto-mail { font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contacto-foto-edit { display: flex; align-items: center; gap: 0.9rem; margin: 0.4rem 0 0.8rem; }
.contacto-foto.grande { width: 72px; height: 72px; }
.contacto-foto.grande .contacto-inicial { font-size: 1.8rem; }
.contacto-foto-btns { display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-start; }

/* Selector de archivos: cabecera con toggle lista/galería + vista galería + Favoritos. */
.picker-cab { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.picker-vista { display: inline-flex; gap: 0.2rem; flex: 0 0 auto; }
.picker-vista svg { width: 1.15rem; height: 1.15rem; display: block; }
.picker-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.5rem; max-height: 55vh; overflow-y: auto; padding: 0.2rem; }
.picker-gal-item { display: flex; flex-direction: column; gap: 0.3rem; align-items: center; padding: 0.5rem; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); cursor: pointer; color: inherit; }
.picker-gal-item:hover:not(:disabled) { border-color: var(--color-primary); }
.picker-gal-item:disabled { opacity: 0.55; cursor: default; }
/* Ya adjunto: es un estado ELEGIDO, no «no disponible». Por eso recupera la opacidad y se
   marca con una palomita sobre la miniatura — atenuarlo sin más se confundía con un archivo
   inutilizable y, en galería, apenas se notaba. */
.picker-gal-item.usado { opacity: 1; border-color: var(--color-success); position: relative; }
/* La palomita cuelga del ELEMENTO, no de la miniatura: esta lleva `overflow: hidden` y
   recortaría el distintivo. */
.picker-gal-item.usado::after {
    content: '✓';
    position: absolute; top: 0.25rem; right: 0.25rem;
    width: 1.25rem; height: 1.25rem; border-radius: 50%;
    background: var(--color-success); color: #fff;
    font-size: 0.85rem; line-height: 1.25rem; text-align: center; font-weight: 700;
    box-shadow: 0 0 0 2px var(--color-surface);
}
.picker-gal-thumb { width: 100%; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--color-surface-2); }
.picker-gal-thumb img { width: 100%; height: 100%; object-fit: cover; }
.picker-gal-thumb .tipo-icono svg { width: 2.2rem; height: 2.2rem; }
.picker-gal-nom { font-size: 0.78rem; text-align: center; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.picker-fav .tipo-icono svg, .picker-gal-item .tipo-icono svg { }
.picker-fav .tipo-icono svg { color: var(--color-warning); }

/* Contacto: teléfono en la tarjeta. */
.contacto-tel { font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Ver fuente del correo. */
.fuente-modal { max-width: 760px; }
.fuente-pre { max-height: 60vh; overflow: auto; white-space: pre-wrap; word-break: break-all; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.76rem; line-height: 1.4; background: var(--color-surface-2); color: var(--color-text); border: 1px solid var(--color-border); border-radius: 8px; padding: 0.6rem; margin: 0.4rem 0; }

/* Bandera (\Flagged) en la lista de correos (estilo Roundcube). */
.buzon-bandera { cursor: pointer; color: var(--color-text-muted); display: inline-flex; align-items: center; opacity: 0.55; transition: opacity 0.12s, color 0.12s; }
.buzon-bandera svg { width: 0.95rem; height: 0.95rem; display: block; }
.buzon-bandera:hover { opacity: 1; color: var(--color-danger); }
.buzon-bandera.activa { opacity: 1; color: var(--color-danger); }
.buzon-bandera.activa svg { fill: currentColor; }

/* Estrella de «destacado» en la tarjeta de Inicio (coincide con filtros de aviso). */
.destacado-star { display: inline-flex; align-items: center; color: var(--color-warning); margin-right: 0.3rem; }
.destacado-star svg { width: 0.85rem; height: 0.85rem; fill: currentColor; }

/* Móvil: el email de la cuenta se recorta en la cabecera de Correo → ocultarlo (va al final para ganar por orden). */
@media (max-width: 768px) { .buzon-cuenta { display: none; } }

/* Progreso de vaciar papelera (banner flotante; sigue aunque ocultes/navegues). */
.vaciado-banner { position: fixed; left: 50%; transform: translateX(-50%); bottom: 1rem; z-index: 90; display: flex; align-items: center; gap: 0.8rem; max-width: min(560px, calc(100vw - 1.5rem)); padding: 0.6rem 0.9rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; box-shadow: 0 10px 30px var(--color-shadow); }
.vaciado-cuerpo { display: flex; flex-direction: column; gap: 0.35rem; min-width: 11rem; flex: 1 1 auto; }
.vaciado-txt { font-size: 0.85rem; font-weight: 600; }
.vaciado-barra { height: 6px; border-radius: 999px; background: var(--color-surface-2); overflow: hidden; }
.vaciado-fill { height: 100%; background: var(--color-primary); transition: width 0.2s ease; }

/* Imágenes adjuntas: miniaturas + lightbox (estilo Roundcube). */
.buzon-adj-imgs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
/* La miniatura y sus acciones van juntas: descargar y guardar en Mis archivos,
   lo mismo que tiene cualquier otro adjunto. */
.buzon-adj-img-caja { display: inline-flex; flex-direction: column; gap: 0.15rem; width: 190px; }
.buzon-adj-img-caja .buzon-adj-img { width: 100%; }
/* Una acción por renglón, con su etiqueta. */
.buzon-adj-img-acc { display: flex; flex-direction: column; gap: 0.1rem; }
.buzon-adj-img-acc .btn-icono {
    /* `.btn-icono` es un CUADRADO de 2.25rem: con la etiqueta dentro la recortaba
       —y ni se veía que estaba ahí—. Aquí manda el contenido. */
    width: auto; height: auto;
    padding: 0.3rem 0.4rem; justify-content: flex-start; font-size: 0.75rem; gap: 0.35rem;
    /* Una etiqueta por renglón: partida en tres se lee peor que el icono solo. */
    white-space: nowrap;
}
.buzon-adj-img-acc svg { width: 1rem; height: 1rem; flex: none; }
@media (max-width: 768px) {
    /* Teléfono: miniatura más estrecha, y la etiqueta es la versión corta. */
    .buzon-adj-img-caja { width: 130px; }
    .buzon-adj-img-acc .btn-icono { font-size: 0.72rem; padding: 0.25rem 0.3rem; }
}
.buzon-adj-img { display: flex; flex-direction: column; width: 130px; border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; background: var(--color-surface); cursor: pointer; padding: 0; color: inherit; }
.buzon-adj-img:hover { border-color: var(--color-primary); }
.buzon-adj-img img { width: 100%; height: 95px; object-fit: cover; display: block; background: var(--color-surface-2); }
.buzon-adj-img-nom { font-size: 0.72rem; padding: 0.25rem 0.4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--color-text-muted); }
.img-correo-modal { max-width: 92vw; }
.img-correo-nom { margin: 0.6rem 0 0; font-size: 0.85rem; word-break: break-word; }
/* Tres botones CON etiqueta: en escritorio caben en un renglón; en el teléfono
   envuelven y ocupan el ancho, en vez de encogerse hasta ser ilegibles. */
.img-correo-acc { flex-wrap: wrap; }
@media (max-width: 768px) {
    .img-correo-acc { flex-direction: column; align-items: stretch; }
    .img-correo-acc .btn { justify-content: center; }
}
.img-correo-full { max-width: 100%; max-height: 74vh; border-radius: 8px; display: block; margin: 0 auto; background: var(--color-surface-2); }

/* Botón «marcar todo como leído» en el árbol de carpetas (hover en escritorio, visible en móvil). */
.buzon-folder-leer { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; padding: 0; background: none; border: none; color: var(--color-text-muted); cursor: pointer; border-radius: var(--radius-sm); opacity: 0; }
.buzon-folder-leer svg { width: 0.9rem; height: 0.9rem; }
.file-tree .nodo:hover .buzon-folder-leer { opacity: 1; }
.buzon-folder-leer:hover { color: var(--color-primary); }
.buzon-nodo .buzon-folder-leer { opacity: 0.6; }

/* 2FA: «confiar en este dispositivo» — caja con buen área de toque, separada del botón. */
.dosfa-recordar { gap: 0.6rem; align-items: center; justify-content: center; width: 100%; margin: 0.7rem 0 0.4rem; padding: 0.7rem 0.85rem; border: 1px solid var(--color-border); border-radius: 10px; cursor: pointer; font-size: 0.9rem; box-sizing: border-box; }
.dosfa-recordar:hover { border-color: var(--color-primary); }
.dosfa-recordar input { width: 1.2rem; height: 1.2rem; flex: none; margin: 0; }

/* Foto del remitente (contacto CardDAV) en el avatar de la lista y el lector. */
.buzon-avatar { overflow: hidden; }
.buzon-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.buzon-avatar-foto { background: none; }
.buzon-lector-avatar { width: 2.3rem; height: 2.3rem; font-size: 0.95rem; }

/* Vista previa de texto: mismos colores del editor (temático en todos los temas). */
.preview-texto-wrap { max-height: 74vh; overflow: auto; }
.preview-texto {
    margin: 0; box-sizing: border-box; min-height: 40vh;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9rem; line-height: 1.5; tab-size: 4;
    white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
    padding: 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-md);
    background: var(--color-bg); color: var(--color-text);
}

/* ── Próximos eventos (tarjeta de Inicio) ────────────────────────── */
.panel-ev-lista { display: flex; flex-direction: column; }
.panel-ev { display: flex; align-items: center; gap: 0.7rem; width: 100%; text-align: left; background: none; border: none; border-left: 3px solid var(--c); padding: 0.5rem 0.6rem; border-radius: 6px; cursor: pointer; color: var(--color-text); }
.panel-ev:hover { background: var(--color-surface-2); }
.panel-ev-fecha { display: flex; flex-direction: column; flex: none; min-width: 6.4rem; }
.panel-ev-dia { font-weight: 600; font-size: 0.85rem; text-transform: capitalize; }
.panel-ev-hora { font-size: 0.75rem; color: var(--color-text-2); font-variant-numeric: tabular-nums; }
.panel-ev-tit { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.panel-ev-ic { flex: none; opacity: 0.55; }
.panel-ev-ic svg { width: 15px; height: 15px; }

/* ── Calendario (CalDAV) ─────────────────────────────────────────── */
.cal-cab { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.cal-nav { display: flex; align-items: center; gap: 0.35rem; }
.cal-titulo { margin: 0; font-size: 1.2rem; min-width: 9.5rem; text-align: center; text-transform: capitalize; }
.cal-wrap { display: grid; grid-template-columns: 1fr 20rem; gap: 1rem; align-items: start; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.cal-dow { background: var(--color-surface-2); color: var(--color-text-2); font-size: 0.72rem; font-weight: 600; text-align: center; padding: 0.4rem 0; text-transform: uppercase; letter-spacing: 0.03em; }
.cal-cell { background: var(--color-surface); min-height: 5.5rem; padding: 0.25rem; cursor: pointer; display: flex; flex-direction: column; gap: 0.15rem; transition: background 0.12s; }
.cal-cell:hover { background: var(--color-surface-2); }
.cal-cell.fuera { background: var(--color-bg); }
.cal-cell.fuera .cal-cell-num { opacity: 0.45; }
.cal-cell.sel { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.cal-cell-num { font-size: 0.8rem; font-weight: 600; color: var(--color-text-2); align-self: flex-end; width: 1.55rem; height: 1.55rem; display: flex; align-items: center; justify-content: center; }
.cal-cell.hoy .cal-cell-num { background: var(--color-primary); color: var(--color-primary-fg); border-radius: 50%; }
.cal-cell-evs { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.cal-chip { display: flex; align-items: center; gap: 0.25rem; width: 100%; text-align: left; border: none; border-left: 3px solid var(--c); border-radius: 4px; padding: 1px 4px; font-size: 0.72rem; line-height: 1.35; cursor: pointer; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--color-text); overflow: hidden; }
.cal-chip.todo-dia { background: var(--c); color: #fff; border-left: none; }
.cal-chip-h { font-variant-numeric: tabular-nums; opacity: 0.85; flex: none; }
.cal-chip-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-mas { border: none; background: none; color: var(--color-text-2); font-size: 0.7rem; text-align: left; padding: 0 4px; cursor: pointer; }
.cal-mas:hover { text-decoration: underline; }
.cal-dia { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0.75rem; display: flex; flex-direction: column; gap: 0.4rem; }
.cal-dia-cab { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.25rem; }
.cal-dia-cab h3 { margin: 0; font-size: 1rem; text-transform: capitalize; }
.cal-item { display: flex; align-items: flex-start; gap: 0.5rem; width: 100%; text-align: left; background: var(--color-surface-2); border: none; border-left: 3px solid var(--c); border-radius: 6px; padding: 0.45rem 0.6rem; cursor: pointer; }
.cal-item:hover { background: color-mix(in srgb, var(--c) 14%, var(--color-surface-2)); }
.cal-item-hora { font-size: 0.75rem; color: var(--color-text-2); font-variant-numeric: tabular-nums; flex: none; min-width: 5.4rem; padding-top: 0.1rem; }
.cal-item-cuerpo { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cal-item-tit { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.cal-item-lug { font-size: 0.8rem; }
.cal-item-ic { flex: none; opacity: 0.6; }
.cal-item-ic svg { width: 15px; height: 15px; }
.cal-aviso { background: var(--color-surface-2); border-radius: var(--radius-md); padding: 0.5rem 0.7rem; font-size: 0.85rem; margin-bottom: 0.75rem; }
/* Sugerir horario (free/busy): botón + huecos propuestos como chips pulsables. */
.cal-hueco { margin: 0 0 0.75rem; }
.cal-hueco-res { margin-top: 0.5rem; }
.cal-hueco-nota { font-size: 0.8rem; margin: 0 0 0.4rem; }
.cal-hueco-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.cal-hueco-chip { font-size: 0.82rem; padding: 0.3rem 0.6rem; border-radius: 0.5rem; cursor: pointer; font: inherit; font-size: 0.82rem; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); }
.cal-hueco-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
/* Aviso de reprogramación: acento ámbar, es una advertencia, no un dato más. */
.cal-aviso-reprog { margin: -0.3rem 0 0.75rem; padding: 0.45rem 0.65rem; font-size: 0.82rem; border-left: 3px solid var(--color-warning); background: var(--color-surface-2); border-radius: 0 var(--radius-md) var(--radius-md) 0; color: var(--color-text-2); }
.cal-fechas { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.cal-fila2 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.75rem; }
.cal-fh { display: flex; gap: 0.4rem; }
.cal-fh .input { min-width: 0; }
/* Invitados del evento (chips + autocompletado) */
.cal-inv-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.4rem; }
.cal-inv-chip { display: inline-flex; align-items: center; gap: 0.3rem; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: 999px; padding: 0.15rem 0.5rem; font-size: 0.82rem; max-width: 100%; }
.cal-inv-chip .cal-inv-ic { display: inline-flex; opacity: 0.6; }
.cal-inv-chip .cal-inv-ic svg { width: 0.85rem; height: 0.85rem; }
.cal-inv-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 13rem; }
.cal-inv-x { display: inline-flex; border: none; background: none; color: var(--color-text-2); cursor: pointer; padding: 0; }
.cal-inv-x:hover { color: var(--color-danger); }
.cal-inv-x svg { width: 0.85rem; height: 0.85rem; }
.cal-inv-input { position: relative; }
/* Input + «Agregar»: el botón sólo aparece cuando lo escrito ya es un correo válido. */
.cal-inv-fila { display: flex; gap: 0.4rem; align-items: center; }
.cal-inv-fila .input { flex: 1; min-width: 0; }
.cal-inv-add { flex: none; }
.cal-inv-chip.est-ok { border-color: var(--color-success); }
.cal-inv-chip.est-no { border-color: var(--color-danger); }
.cal-inv-chip.est-quiza { border-color: var(--color-warning); }
@media (max-width: 820px) {
    .cal-wrap { grid-template-columns: 1fr; }
    .cal-cell { min-height: 3.4rem; }
    .cal-cell-evs { flex-direction: row; flex-wrap: wrap; gap: 3px; align-content: flex-start; }
    .cal-chip { width: 7px; height: 7px; padding: 0; border: none; border-radius: 50%; background: var(--c); overflow: visible; }
    .cal-chip.todo-dia { width: 7px; height: 7px; }
    .cal-chip-h, .cal-chip-t { display: none; }
    .cal-titulo { min-width: 7.5rem; font-size: 1.05rem; }
    .cal-fechas, .cal-fila2 { grid-template-columns: 1fr; }
    .cal-nuevo-txt { display: none; }
}

/* ── Navegación de módulos: pestañas FIJAS (PC arriba, móvil barra inferior) ── */
.nav-tab-activo { background: color-mix(in srgb, var(--color-primary) 15%, transparent); color: var(--color-primary); font-weight: 600; }
.tabbar-movil { display: none; } /* solo móvil (ver media query) */

@media (max-width: 768px) {
    .navbar .nav-tabs { display: none; } /* las pestañas de módulo viven en la barra inferior */
    .tabbar-movil {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
        /* surface-2 (tono de «panel») para que la barra NO se confunda con el fondo de
           las listas (surface). El drawer es surface pero destaca por su sombra/overlay. */
        background: var(--color-surface-2); border-top: 1px solid var(--color-border);
        padding-bottom: env(safe-area-inset-bottom);
        box-shadow: 0 -3px 14px rgba(0, 0, 0, 0.16);
    }
    .tabbar-item {
        flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center;
        justify-content: center; gap: 3px; padding: 0.5rem 0.15rem 0.45rem;
        border: none; background: none; color: var(--color-text-2); cursor: pointer;
    }
    .tabbar-item.activo { color: var(--color-primary); }
    .tabbar-ic { display: inline-flex; position: relative; }
    .tabbar-ic svg { width: 1.75rem; height: 1.75rem; }
    .tabbar-lbl { font-size: 0.7rem; line-height: 1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* Espacio para que el contenido no quede tapado por la barra inferior. Cuando está
       la barra de SELECCIÓN del gestor (.con-barra) ya se añade su propio espacio. */
    .contenido:not(.con-barra) { padding-bottom: calc(max(4.2rem + env(safe-area-inset-bottom), var(--alto-vaciado, 0px)) + 0.3rem); }
    .barra-seleccion { z-index: 50; } /* la barra de selección va por ENCIMA de la tabbar */

    /* Banner de «vaciando papelera». En escritorio es una píldora centrada de una
       fila; en móvil no cabía: `.vaciado-cuerpo` tiene `min-width:11rem` y los
       flex no encogen por debajo de su min-width, así que el conjunto desbordaba
       y «Detener» quedaba CORTADO fuera de la pantalla. Y a `bottom:1rem` se
       sentaba encima de la tabbar (z-index 90 > 40), tapando la navegación.
       Aquí: a lo ancho, en dos filas, y por encima de la barra inferior que
       toque — la tabbar, o la de selección si hay algo seleccionado. */
    .vaciado-banner {
        left: 0.5rem; right: 0.5rem; transform: none; max-width: none;
        bottom: calc(max(4.2rem + env(safe-area-inset-bottom), var(--alto-barra-sel, 0px)) + 0.4rem);
        flex-wrap: wrap; gap: 0.5rem 0.6rem;
    }
    .vaciado-cuerpo { min-width: 100%; } /* ocupa la primera fila; los botones bajan a la segunda */
    .vaciado-banner .btn { flex: 1 1 auto; justify-content: center; }
}

/* Total de no leídos junto al título de «Correo reciente» en Inicio. Es informativo: el
   globo del nav cuenta solo INBOX, esto suma todas las carpetas donde cae correo. */
.panel-sin-leer { font-weight: 400; font-size: 0.82rem; color: var(--color-text-muted); margin-left: 0.35rem; }

/* Botón de firma del redactor: con etiqueta en PC (en móvil no cabe y queda icono solo,
   por `.solo-escritorio`). Necesita ancho automático, no la caja cuadrada de .btn-icono. */
.btn-firma { display: inline-flex; align-items: center; gap: 0.4rem; width: auto; padding: 0.4rem 0.6rem; font-size: 0.85rem; }

/* Editor de firma: elegir diseño, rellenar campos y ver el resultado. */
.firma-plantillas { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.8rem; }
.firma-plantilla { font: inherit; font-size: 0.85rem; padding: 0.35rem 0.7rem; border-radius: 0.5rem; cursor: pointer; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); }
.firma-plantilla.activa { border-color: var(--color-primary); color: var(--color-primary); }
.firma-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 0.8rem; }
.firma-campo-ancho { grid-column: 1 / -1; }
.firma-nota { font-size: 0.8rem; margin: 0.5rem 0 0; }
.firma-imagen-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; margin-top: 0.2rem; }
.firma-subir { cursor: pointer; }
.firma-imagen-estado { font-size: 0.78rem; color: var(--color-text-muted); }
.firma-imagen-url { margin-top: 0.35rem; }
.firma-html { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.82rem; }
/* La previa se pinta con fondo claro fijo: es como se verá en el correo del destinatario,
   no como se ve en nuestra app (que puede estar en modo oscuro). */
.firma-previa { margin-top: 1rem; }
.firma-previa-tit { font-size: 0.8rem; color: var(--color-text-muted); }
.firma-previa-caja { margin-top: 0.3rem; padding: 0.7rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; color: #333; overflow-x: auto; }
@media (max-width: 640px) { .firma-campos { grid-template-columns: 1fr; } }

/* Grupo «avanzado» de la consola: plegado, para que no se lea como una decisión pendiente
   en cada alta sino como algo que solo se toca con motivo. */
.avanzado-correo { margin: 0.6rem 0; padding: 0.5rem 0.7rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-2); }
.avanzado-correo > summary { cursor: pointer; font-size: 0.9rem; color: var(--color-text-2); }
.avanzado-correo[open] > summary { margin-bottom: 0.4rem; }

/* ── Redactar en móvil: los desplegables se anclan a la CABECERA, no a su botón ──
   Los botones de Modelos e IA son `solo-escritorio`, así que en móvil se ocultan y su
   contenedor colapsa a cero ancho. El menú, que se posiciona respecto a ese contenedor,
   aparecía desplazado. Se hace `static` el contenedor para que el desplegable se resuelva
   contra la cabecera y caiga alineado a su borde derecho, justo bajo la hamburguesa.
   Misma técnica que ya se usa con `.menu-wrap.accion-compartir` en la barra de selección.
   La especificidad (0,2,0) gana sobre `.menu-pop` y `.menu-pop-der`, así que no depende
   del orden dentro del archivo. */
@media (max-width: 768px) {
    .buzon-redactar-cab { position: relative; }
    .buzon-redactar-cab .menu-wrap { position: static; }
    .buzon-redactar-cab .menu-pop {
        left: auto;
        right: 0.6rem;
        top: calc(100% + 0.2rem);
        max-width: calc(100vw - 1.2rem);
        max-height: min(70vh, 26rem);
        overflow-y: auto;
    }
}

/* ---- Ayuda (manual de usuario) ---- */
/* Ancho de lectura acotado: una guía de 200 palabras a todo lo ancho de una
   pantalla de 27" no se lee, se escanea mal. */
.ayuda-panel { max-width: 46rem; }
.ayuda-buscar { width: 100%; margin: 0.75rem 0 1.25rem; }
.ayuda-tema { border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: 0.5rem; background: var(--color-surface); }
.ayuda-tema > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0.7rem 0.9rem; cursor: pointer; font-weight: 600; list-style: none;
}
.ayuda-tema > summary::-webkit-details-marker { display: none; }
.ayuda-tema[open] > summary { border-bottom: 1px solid var(--color-border); }
.ayuda-tema-n { font-size: 0.78rem; font-weight: 400; color: var(--color-text-2); }
.ayuda-lista { display: flex; flex-direction: column; }
.ayuda-item {
    display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
    width: 100%; text-align: left; padding: 0.6rem 0.9rem;
    background: none; border: 0; border-top: 1px solid var(--color-border);
    color: inherit; font: inherit; cursor: pointer;
}
.ayuda-lista > .ayuda-item:first-child { border-top: 0; }
.ayuda-item:hover { background: var(--color-surface-2); }
.ayuda-item-tit { flex: 1; min-width: 0; }
.ayuda-item-mod, .ayuda-item-rol { font-size: 0.75rem; color: var(--color-text-2); }
.ayuda-vacio { padding: 1.5rem 0; }
.ayuda-volver { margin-bottom: 1rem; }
.ayuda-guia { line-height: 1.65; }
.ayuda-fecha { font-size: 0.78rem; margin-top: 1.5rem; }
.ayuda-titulo { margin: 0 0 0.75rem; }

/* ---- Soporte: el panel del agente de ayuda ---- */
/* Cuelga del icono de la cabecera, justo debajo. Antes era un globo flotante:
   había que arrastrarlo para que no tapara los botones del móvil, y bajo el
   redactor de correo (una capa a pantalla completa) desaparecía. Un icono fijo
   está siempre en el mismo sitio y no tapa nada.
   z-index 63 para quedar por encima de ese redactor (62); no hace falta
   esquivar los diálogos, porque el panel se cierra al abrir uno. */
.soporte {
    position: fixed; z-index: 63;
    top: calc(var(--navbar-height) + 0.4rem); right: 0.8rem;
}
.soporte-panel {
    display: flex; flex-direction: column;
    width: min(92vw, 24rem); height: min(72vh, 32rem);
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); box-shadow: 0 8px 32px var(--color-shadow);
    overflow: hidden;
}
.soporte-cab {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0.5rem 0.5rem 0.5rem 0.9rem; font-weight: 600;
    background: var(--color-surface-2); border-bottom: 1px solid var(--color-border);
}
.soporte-hilo { flex: 1; min-height: 0; overflow-y: auto; padding: 0.75rem 0.9rem; display: flex; flex-direction: column; gap: 0.6rem; }
.soporte-saludo, .soporte-pensando { color: var(--color-text-2); font-size: 0.85rem; }
.soporte-msg { flex: none; max-width: 100%; min-width: 0; font-size: 0.88rem; }
.soporte-msg-usuario {
    align-self: flex-end; padding: 0.45rem 0.7rem; border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--color-primary) 16%, transparent);
}
/* `white-space: pre-wrap` va en el TEXTO, nunca en la burbuja: en la burbuja
   hay elementos hijos, y entonces los saltos de línea del propio HTML (la
   indentación de la plantilla) se pintan como renglones en blanco — la burbuja
   quedaba con 135px de hueco vacío dentro. */
.soporte-texto { white-space: pre-wrap; }
.soporte-fuentes { margin-top: 0.4rem; display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: baseline; font-size: 0.75rem; color: var(--color-text-2); }
.soporte-fuente {
    border: 1px solid var(--color-border); border-radius: 999px;
    background: none; color: var(--color-primary); font: inherit; font-size: 0.75rem;
    padding: 0.1rem 0.5rem; cursor: pointer;
}
.soporte-fuente:hover { background: var(--color-surface-2); }
.soporte-redactar { display: flex; gap: 0.4rem; padding: 0.6rem; border-top: 1px solid var(--color-border); }
.soporte-redactar .input { flex: 1; min-width: 0; }
.soporte-aviso { margin: 0; padding: 0 0.7rem 0.6rem; font-size: 0.7rem; color: var(--color-text-2); line-height: 1.3; }
@media (max-width: 768px) {
    /* En el teléfono el panel ocupa casi todo el ancho y se ancla a los dos
       lados, en vez de colgar de la esquina del icono. */
    .soporte { left: 0.5rem; right: 0.5rem; }
    .soporte-panel { width: auto; height: min(70vh, 28rem); }
}


/* ---- Resumen de correo del Inicio ----
   Se parece A PROPÓSITO poco a la bandeja. Antes este bloque reutilizaba
   `.buzon-item`, la misma pieza que la lista de verdad, y el resultado era que
   uno miraba el resumen, creía estar en Correo y volvía a pulsar «Correo». La
   cifra manda y los remitentes van como pastillas, no como renglones. */
.resumen-correo {
    display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
    width: 100%; text-align: left; cursor: pointer;
    font: inherit; color: inherit;
}
.resumen-correo:hover { border-color: var(--color-primary); }
.resumen-correo-cifra { display: flex; align-items: baseline; gap: .45rem; flex: 0 0 auto; }
.resumen-correo-cifra strong {
    font-size: 2.1rem; line-height: 1; font-weight: 700;
    color: var(--color-primary); font-family: var(--font-title);
}
.resumen-correo-cifra span { color: var(--color-text-2); font-size: .9rem; }
.resumen-correo-de { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; min-width: 0; font-size: .85rem; }
.resumen-correo-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .2rem .6rem .2rem .2rem; border-radius: var(--radius-full);
    background: var(--color-surface-2); max-width: 13rem;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.resumen-correo-ini {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.35rem; height: 1.35rem; border-radius: 50%; flex: none;
    background: var(--color-primary); color: var(--color-primary-fg);
    font-size: .7rem; font-weight: 700;
}
.resumen-correo-chip .destacado-star { width: .8rem; height: .8rem; flex: none; }
.resumen-correo-mas { color: var(--color-text-2); font-weight: 600; }
/* En móvil la cifra va sola arriba y los remitentes debajo: en una sola línea
   se comían el ancho y las pastillas quedaban cortadas a la mitad. */
@media (max-width: 560px) {
    .resumen-correo { gap: .6rem; }
    .resumen-correo-cifra { width: 100%; }
    .resumen-correo-chip { max-width: 100%; }
}