/* ============================================================
   ESTILO NUEVO (plan Planes/PLAN_ESTILO_NUEVO_2026-11-09.md)
   Convive con el clásico: TODAS las reglas van bajo html[data-estilo="nuevo"].
   Con el interruptor «Estilo nuevo» apagado (data-estilo="clasico") este archivo no cambia nada.
   El atributo lo pone el script de <head> de index.html (antes de pintar) y setEstilo() de app.js.
   Tema claro = [data-theme="whatsapp"]; tema oscuro = [data-theme="cyberpunk"] (colores de :root).
   ============================================================ */

/* ---------- E1 · Fuente: emojis planos de color en toda la app ----------
   Noto Color Emoji (Google Fonts, cargada en index.html) va después de las fuentes de texto: solo se usa para los
   caracteres que esas no tienen (los emojis), así que ✓, ●, ✕… siguen saliendo con la letra normal. */
/* Letra del propio sistema (09/11, la de la maqueta aprobada): Segoe UI en Windows, San Francisco en iPhone/Mac y
   Roboto en Android. Más compacta que Inter (que se queda solo para el estilo clásico) y no hay que descargarla. */
html[data-estilo="nuevo"] {
    --font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Color Emoji', sans-serif;
}
html[data-estilo="nuevo"] button,
html[data-estilo="nuevo"] input,
html[data-estilo="nuevo"] select,
html[data-estilo="nuevo"] textarea {
    font-family: inherit;
}

/* ---------- E1 · Barras de scroll finas, del color del tema y sin flechas ----------
   Chrome/Edge usan las ::-webkit-; Firefox, las estándar (si Chrome tiene las dos, las estándar ponen flechas). */
html[data-estilo="nuevo"] {
    --scroll-thumb: rgba(56, 189, 248, 0.22);
    --scroll-thumb-hover: rgba(56, 189, 248, 0.5);
    color-scheme: dark;
}
html[data-estilo="nuevo"][data-theme="whatsapp"] {
    --scroll-thumb: rgba(100, 116, 139, 0.35);
    --scroll-thumb-hover: rgba(0, 128, 105, 0.55);
    color-scheme: light;
}
html[data-estilo="nuevo"] ::-webkit-scrollbar { width: 6px !important; height: 6px !important; }
html[data-estilo="nuevo"] ::-webkit-scrollbar-track { background: transparent !important; }
html[data-estilo="nuevo"] ::-webkit-scrollbar-thumb,
html[data-estilo="nuevo"] .neon-scroll::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
}
html[data-estilo="nuevo"] ::-webkit-scrollbar-thumb:hover,
html[data-estilo="nuevo"] .neon-scroll::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover) !important; }
html[data-estilo="nuevo"] ::-webkit-scrollbar-button { display: none !important; width: 0 !important; height: 0 !important; }
@supports not selector(::-webkit-scrollbar) {
    html[data-estilo="nuevo"] * { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
}

/* ---------- E1 · Fondo «Niebla» en el tema claro (sustituye al beige) ---------- */
html[data-estilo="nuevo"][data-theme="whatsapp"],
html[data-estilo="nuevo"][data-theme="whatsapp"] body {
    --bg-app: #eef3f8;
}
html[data-estilo="nuevo"][data-theme="whatsapp"] body {
    background-color: #eef3f8;
    background-image: linear-gradient(160deg, #eef3f8 0%, #e5ecf3 100%);
}
/* Zona del chat: gris azulado muy suave con un punteado casi invisible */
html[data-estilo="nuevo"][data-theme="whatsapp"] .chat-container {
    background-color: #f2f5f9 !important;
    background-image: radial-gradient(rgba(15, 23, 42, 0.045) 1px, transparent 1.2px) !important;
    background-size: 18px 18px !important;
}

/* ---------- E1 · Tema oscuro: mismos colores de la app, con el punteado del chat ---------- */
html[data-estilo="nuevo"][data-theme="cyberpunk"] .chat-container {
    background-image: radial-gradient(rgba(148, 163, 184, 0.05) 1px, transparent 1.2px);
    background-size: 18px 18px;
}

/* ============================================================
   E2 · Etiqueta del canal en el pie, emociones y «Subir foto»
   ============================================================ */

/* Etiqueta del canal junto a la hora (app.js: crearEtiquetaCanalPie). En el clásico no se ve. */
.msg-canal-pie { display: none; }
html[data-estilo="nuevo"] .msg-canal-pie {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    max-width: 150px;
    white-space: nowrap;
    color: inherit;
    font-size: inherit;
}
html[data-estilo="nuevo"] .msg-canal-pie > span { overflow: hidden; text-overflow: ellipsis; }
html[data-estilo="nuevo"] .msg-canal-pie svg { width: 12px; height: 12px; flex: 0 0 auto; }
html[data-estilo="nuevo"] .msg-canal-pie::after { content: "·"; margin-left: 1px; }
/* …y se esconde la etiqueta de arriba (si en esa cabecera no hay nombre de remitente, se esconde entera) */
html[data-estilo="nuevo"] .user-canal-badge,
html[data-estilo="nuevo"] .ai-canal-badge { display: none !important; }
html[data-estilo="nuevo"] .user-msg-header:not(:has(.user-sender-name)),
html[data-estilo="nuevo"] .ai-msg-header:not(:has(.ai-sender-name)) { display: none !important; }

/* «Cómo se siente ahora»: cada emoción en su fila, a todo el ancho; 8 puntitos de tamaño fijo (mismo ancho) */
html[data-estilo="nuevo"] .feelings-container { flex-direction: column; gap: 6px; }
html[data-estilo="nuevo"] .feelings-col { display: contents; }
html[data-estilo="nuevo"] .feeling-item {
    width: 100%;
    gap: 9px;
    padding: 7px 10px;
    border-radius: 10px;
    background: var(--bg-card-hover);
}
html[data-estilo="nuevo"] .feeling-emoji { font-size: 1.15rem; }
html[data-estilo="nuevo"] .feeling-info { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; }
html[data-estilo="nuevo"] .feeling-name { font-size: 0.86rem; }
html[data-estilo="nuevo"] .feeling-intensity { flex: 0 0 auto; gap: 2px; }
html[data-estilo="nuevo"] .feeling-dot {
    width: 6px !important;
    height: 6px !important;
    flex: 0 0 6px;
    box-sizing: border-box;
    background: transparent !important;
    border: 1.3px solid var(--accent-cyan);
    box-shadow: none !important;
}
html[data-estilo="nuevo"] .feeling-dot.active { background: var(--accent-cyan) !important; }
html[data-estilo="nuevo"][data-theme="whatsapp"] .feeling-dot { border-color: #00a884; }
html[data-estilo="nuevo"][data-theme="whatsapp"] .feeling-dot.active { background: #00a884 !important; }

/* «Subir foto» escondido en el panel (sigue en la ventana del Mapa ambiental: #subirFotoModalBtn) */
html[data-estilo="nuevo"] #subirFotoBtn { display: none !important; }
/* La hora nunca se parte: si no cabe, se recorta el nombre del canal */
html[data-estilo="nuevo"] .msg-footer-right { flex-wrap: nowrap; min-width: 0; }
html[data-estilo="nuevo"] .msg-time-text { white-space: nowrap; }

@media (max-width: 900px) {
    /* En el móvil, fuera el texto largo del Cajón: queda el título, el contador y la flecha */
    html[data-estilo="nuevo"] .cajon-subtitle { display: none !important; }
    html[data-estilo="nuevo"] .msg-canal-pie { max-width: 110px; }
}
/* ============================================================
   E3 · Cajón: filas con iconos lineales
   (el arreglo del nombre que no se veía está en styles.css, para los dos estilos)
   ============================================================ */
/* app.js pinta emoji + icono; el clásico ve el emoji y el nuevo el icono */
.cajon-ico { display: none; }
html[data-estilo="nuevo"] .cajon-emo { display: none; }
html[data-estilo="nuevo"] .cajon-ico { display: inline-block; width: 12px; height: 12px; flex: 0 0 auto; }
html[data-estilo="nuevo"] .cajon-file-icon .cajon-ico { width: 18px; height: 18px; color: var(--text-secondary); }

html[data-estilo="nuevo"] .cajon-file-item {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 7px 8px;
    gap: 3px 8px;
}
html[data-estilo="nuevo"] .cajon-file-item:hover { background: var(--bg-card-hover); border-color: var(--border-subtle); }
html[data-estilo="nuevo"][data-theme="whatsapp"] .cajon-file-item { background: transparent !important; border-color: transparent !important; }
html[data-estilo="nuevo"][data-theme="whatsapp"] .cajon-file-item:hover { background: #f1f5f9 !important; border-color: #e2e8f0 !important; }
html[data-estilo="nuevo"] .cajon-file-left { gap: 10px; }
html[data-estilo="nuevo"] .cajon-file-name { font-size: 0.88rem; }
/* E6h (09/11): la fila se reparte según el ancho. Si cabe, todo en UNA línea (nombre · fecha y tamaño ·
   etiquetas a la derecha); al estrechar, lo que no cabe baja a la línea siguiente, hasta las 3 líneas del móvil.
   Truco: la fila tiene 28 px más de relleno a la izquierda y el nombre los recupera con margen negativo, así
   lo que baja de línea queda alineado con el texto del nombre (no con el icono). */
html[data-estilo="nuevo"] .cajon-file-item { gap: 2px 14px; padding-left: 36px; justify-content: flex-start; }
html[data-estilo="nuevo"] .cajon-file-left { flex: 0 1 auto; margin-left: -28px; max-width: calc(100% + 28px); }
html[data-estilo="nuevo"] .cajon-file-center-meta { flex: 1 0 auto; padding-left: 0; font-size: 0.72rem; }
html[data-estilo="nuevo"] .cajon-file-tags { flex: 0 1 auto; gap: 4px; justify-content: flex-start; padding-left: 0; margin-top: 0; max-width: 100%; }
html[data-estilo="nuevo"] .cajon-file-badge { padding: 1px 6px; font-size: 0.68rem; gap: 3px; border-width: 0 !important; }
/* ============================================================
   E4 · Columnas plegables (estilo_nuevo.js). Solo con el estilo nuevo y en escritorio (> 900 px).
   ============================================================ */
/* Fuera del estilo nuevo o en el móvil, nada de esto existe */
.en-rail, .en-cab-panel, .en-btn-plegar, #enBtnEnfoque, .en-velo, .en-hueco { display: none; }

@media (min-width: 901px) {
    html[data-estilo="nuevo"] .en-btn-plegar {
        display: inline-flex; align-items: center; justify-content: center;
        width: 30px; height: 30px; padding: 0; border-radius: 8px;
        border: 0; background: transparent; color: var(--text-secondary); cursor: pointer; flex: 0 0 auto;
    }
    html[data-estilo="nuevo"] .en-btn-plegar:hover { background: var(--bg-card-hover); color: var(--text-primary); }
    html[data-estilo="nuevo"] .en-btn-plegar svg { width: 17px; height: 17px; }

    /* Cabecera fina de Perfil y de Ajustes, con el botón de plegar */
    html[data-estilo="nuevo"] .en-cab-panel {
        display: flex; align-items: center; justify-content: space-between; gap: 8px;
        margin: -4px 0 4px; flex: 0 0 auto;
        font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-secondary);
    }

    /* Botón de modo enfoque en la cabecera del chat */
    html[data-estilo="nuevo"] #enBtnEnfoque { display: inline-flex; }
    html[data-estilo="nuevo"] #enBtnEnfoque.en-activo { border-color: var(--border-active); color: var(--primary-blue); }

    /* Columna plegada: solo queda la franja de 64 px */
    html[data-estilo="nuevo"] .en-plegada:not(.en-flotante) {
        flex: 0 0 64px !important; width: 64px !important; min-width: 64px !important;
        padding: 0 !important; overflow: hidden !important;
    }
    html[data-estilo="nuevo"] .en-plegada:not(.en-flotante) > :not(.en-rail) { display: none !important; }
    html[data-estilo="nuevo"] .en-plegada:not(.en-flotante) > .en-rail { display: flex; }

    /* Columna abierta por encima del chat cuando no cabe */
    html[data-estilo="nuevo"] .en-flotante {
        position: absolute !important; top: 0; bottom: 0; z-index: 60;
        width: 320px !important; max-width: calc(100% - 80px);
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35) !important;
    }
    html[data-estilo="nuevo"] .en-hueco { display: block; flex: 0 0 64px; }
    html[data-estilo="nuevo"] .en-velo { position: absolute; inset: 0; z-index: 55; background: rgba(15, 23, 42, 0.25); border-radius: var(--radius-panel); }
    html[data-estilo="nuevo"] .en-velo:not(.on) { display: none; }
    html[data-estilo="nuevo"] .en-velo.on { display: block; }

    /* La franja */
    html[data-estilo="nuevo"] .en-rail {
        flex-direction: column; align-items: center; gap: 10px;
        width: 100%; height: 100%; padding: 12px 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
    }
    html[data-estilo="nuevo"] .en-rail::-webkit-scrollbar { display: none; }
    html[data-estilo="nuevo"] .en-sep { width: 28px; height: 1px; background: var(--border-subtle); flex: 0 0 auto; }
    html[data-estilo="nuevo"] .en-rb {
        position: relative; flex: 0 0 auto;
        width: 40px; height: 40px; border-radius: 50%; padding: 0;
        display: inline-flex; align-items: center; justify-content: center;
        border: 1px solid var(--border-subtle); background: var(--bg-card); color: var(--text-secondary); cursor: pointer;
    }
    html[data-estilo="nuevo"] .en-rb:hover { background: var(--bg-card-hover); color: var(--text-primary); }
    html[data-estilo="nuevo"] .en-rb[hidden] { display: none; }
    html[data-estilo="nuevo"] .en-rb svg { width: 18px; height: 18px; }
    html[data-estilo="nuevo"] .en-rb.en-verde { color: var(--accent-green); }
    html[data-estilo="nuevo"] .en-rb.en-rojo { color: var(--accent-red); }
    html[data-estilo="nuevo"] .en-rb.en-rosa { color: #db2777; }
    html[data-estilo="nuevo"] .en-badge {
        position: absolute; top: -4px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px;
        border-radius: 9px; background: var(--primary-blue); color: #fff; border: 2px solid var(--bg-panel);
        font-size: 10px; font-weight: 700; line-height: 14px; text-align: center;
    }
    html[data-estilo="nuevo"] .en-badge:empty { min-width: 12px; height: 12px; padding: 0; top: -1px; right: -1px; }

    /* Fotos de los chats */
    html[data-estilo="nuevo"] .en-rail-avatares { display: flex; flex-direction: column; align-items: center; gap: 10px; }
    html[data-estilo="nuevo"] .en-rail-av { position: relative; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; flex: 0 0 auto; }
    html[data-estilo="nuevo"] .en-rail-av .chat-row-avatar-box { width: 44px !important; height: 44px !important; margin: 0 !important; }
    html[data-estilo="nuevo"] .en-rail-av .chat-row-avatar-wrapper { width: 44px !important; height: 44px !important; }
    html[data-estilo="nuevo"] .en-rail-av.activo .chat-row-avatar-wrapper { box-shadow: 0 0 0 3px var(--primary-blue); border-radius: 50%; }

    /* Perfil: foto, emociones, barritas y estado */
    html[data-estilo="nuevo"] .en-rail-foto { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; padding: 0; border: 1px solid var(--border-subtle); background: var(--bg-card); cursor: pointer; flex: 0 0 auto; }
    html[data-estilo="nuevo"] .en-rail-foto img { width: 100%; height: 100%; object-fit: cover; }
    html[data-estilo="nuevo"] .en-rail-foto span { width: 100%; height: 100%; align-items: center; justify-content: center; color: var(--text-secondary); }
    html[data-estilo="nuevo"] .en-rail-foto svg { width: 20px; height: 20px; }
    html[data-estilo="nuevo"] .en-rail-emos { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 20px; line-height: 1; }
    html[data-estilo="nuevo"] .en-mini-barras { display: flex; gap: 4px; align-items: flex-end; height: 64px; flex: 0 0 auto; }
    html[data-estilo="nuevo"] .en-mini-barras i { position: relative; display: block; width: 6px; height: 100%; border-radius: 3px; background: var(--border-subtle); overflow: hidden; }
    html[data-estilo="nuevo"] .en-mini-barras b { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 3px; }
    html[data-estilo="nuevo"] .en-rail-txt { font-size: 10px; color: var(--text-secondary); text-align: center; line-height: 1.2; padding: 0 4px; word-break: break-word; }
}
/* ============================================================
   E5 · Ajustes compactos: una sola tarjeta con filas (las mismas tarjetas de siempre, solo cambia el aspecto)
   ============================================================ */
html[data-estilo="nuevo"] .switches-container {
    gap: 0;
    padding-top: 0;
    margin-top: 2px;
    border: 1px solid var(--border-card);
    border-radius: 14px;
    overflow: hidden;            /* recorta la raya de arriba de la primera fila visible */
    background: var(--bg-panel);
}
/* Plegado y sin ninguna opción activa: no queda una caja vacía */
html[data-estilo="nuevo"] .ajustes-container.is-collapsed .switches-container:not(:has(.switch-card.is-active:not(.perm-hidden))) {
    border: 0;
    margin: 0;
}
html[data-estilo="nuevo"] .switch-card,
html[data-estilo="nuevo"][data-theme="whatsapp"] .switch-card {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: 0 -1px 0 var(--border-subtle) !important;   /* raya entre filas */
    padding: 9px 12px;
    gap: 10px;
}
html[data-estilo="nuevo"] .switch-card:hover,
html[data-estilo="nuevo"][data-theme="whatsapp"] .switch-card:hover { background: var(--bg-card-hover) !important; }

/* Icono en un cuadradito de color suave */
html[data-estilo="nuevo"] .switch-card-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: rgba(56, 189, 248, 0.1);
    color: var(--accent-cyan);
}
html[data-estilo="nuevo"][data-theme="whatsapp"] .switch-card-icon { background: #e7f8ef; color: #008069 !important; }
html[data-estilo="nuevo"] .switch-card-icon svg { width: 17px; height: 17px; }

/* Nombre en letra normal («Modelos locales» en vez de «MODELOS LOCALES») */
html[data-estilo="nuevo"] .switch-card-title {
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: lowercase;
}
html[data-estilo="nuevo"] .switch-card-title::first-letter { text-transform: uppercase; }
html[data-estilo="nuevo"] .switch-card-status { font-size: 0.72rem; }
/* ============================================================
   E6a · Patrón común de las ventanas (.overlay > .modal-card): cabecera fija, UN solo scroll en el cuerpo,
   botones finales siempre a la vista y, en el móvil, pantalla completa. Solo CSS.
   Las ventanas pequeñas de confirmación (Borrar, aviso de tiempo) no tienen .modal-header y no cambian.
   ============================================================ */
html[data-estilo="nuevo"] .overlay {
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
html[data-estilo="nuevo"][data-theme="cyberpunk"] .overlay { background: rgba(3, 7, 18, 0.72); }

/* La tarjeta: columna con cabecera / cuerpo con scroll / pie */
html[data-estilo="nuevo"] .overlay > .modal-card:has(> .modal-header) {
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 48px) !important;
    border-radius: 18px !important;
    overflow: hidden;
}
html[data-estilo="nuevo"] .overlay > .modal-card:has(> .modal-header) > * { flex: 0 0 auto; }
html[data-estilo="nuevo"] .overlay > .modal-card > .modal-body {
    flex: 1 1 auto !important;
    min-height: 0;
    max-height: none !important;      /* Crear semilla traía 70vh fijo: ahora manda la tarjeta */
    overflow-y: auto !important;
}

/* Cabecera: título claro y botón de cerrar redondo */
html[data-estilo="nuevo"] .overlay .modal-header { padding: 14px 18px; gap: 12px; }
html[data-estilo="nuevo"] .overlay .modal-title-group { min-width: 0; }
html[data-estilo="nuevo"] .overlay .modal-title-group h3,
html[data-estilo="nuevo"] .overlay .admin-header-title h3 { font-size: 1.05rem; line-height: 1.25; }
html[data-estilo="nuevo"] .overlay .modal-close-btn {
    width: 34px; height: 34px; padding: 0; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; border: 1px solid var(--border-subtle) !important; font-size: 1rem;
}

/* Pie fijo (las que ya tienen .modal-footer: Rutinas, Editar usuario…) */
html[data-estilo="nuevo"] .overlay .modal-footer {
    display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 12px 18px !important;
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-panel);
}
/* Botones finales que van DENTRO del cuerpo (Crear semilla, Multi-agente, Personaje…): pegados abajo, siempre visibles */
html[data-estilo="nuevo"] .overlay .modal-card:has(> .modal-header) .modal-body .modal-buttons-row {
    position: sticky;
    bottom: -20px;
    z-index: 2;
    margin: 16px -20px -20px !important;
    padding: 12px 20px;
    justify-content: flex-end;
    background: var(--bg-panel);
    border-top: 1px solid var(--border-subtle);
}

/* Mapa ambiental (09/11, plan Ficha/Mapa/Borrar F1): la regla de arriba («> * { flex: 0 0 auto }») hacía crecer
   .mapa-modal-body con su contenido, la tarjeta lo cortaba y no había scroll: «Regenerar imagen», «Subir foto» y
   el pie «Regenerar» quedaban fuera, sin poder pulsarse. El cuerpo del mapa ocupa el sitio que queda y scrolla dentro. */
html[data-estilo="nuevo"] .overlay > .modal-card > .mapa-modal-body { flex: 1 1 auto; min-height: 0; }

/* Crear semilla: sin el segundo scroll de «Configuración de Identidad» */
html[data-estilo="nuevo"] .custom-fields-box { max-height: none; overflow: visible; }

/* Móvil: las ventanas con cabecera ocupan toda la pantalla */
@media (max-width: 900px) {
    html[data-estilo="nuevo"] .overlay:has(> .modal-card > .modal-header) { padding: 0; align-items: stretch; }
    html[data-estilo="nuevo"] .overlay > .modal-card:has(> .modal-header) {
        width: 100% !important;
        max-width: none !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        border: 0 !important;
    }
    html[data-estilo="nuevo"] .overlay .modal-header { padding: 12px 14px; }
    html[data-estilo="nuevo"] .overlay .modal-footer { padding: 10px 14px !important; }
    html[data-estilo="nuevo"] .overlay .modal-footer > button,
    html[data-estilo="nuevo"] .overlay .modal-card:has(> .modal-header) .modal-body .modal-buttons-row > button { flex: 1 1 0; }
}
@media (max-width: 900px) {
    /* Ventanas cortas a pantalla completa (Multi-agente, Voz…): los botones, abajo del todo */
    html[data-estilo="nuevo"] .overlay > .modal-card:has(> .modal-header) > .modal-body:has(> .modal-buttons-row) {
        display: flex;
        flex-direction: column;
    }
    html[data-estilo="nuevo"] .overlay > .modal-card:has(> .modal-header) > .modal-body > .modal-buttons-row { margin-top: auto !important; }
    /* Crear semilla: fecha y género uno debajo del otro, y las opciones de género bajan de línea si no caben */
    html[data-estilo="nuevo"] .custom-fields-box div:has(> div > #entityBirthdate) { flex-wrap: wrap; }
    html[data-estilo="nuevo"] .custom-fields-box div:has(> div > #entityBirthdate) > div { flex: 1 1 100% !important; }
    html[data-estilo="nuevo"] .overlay div:has(> .gender-radio) { flex-wrap: wrap; gap: 8px !important; }
}
/* E4 · Las tres columnas se pliegan y despliegan con la misma animación (antes solo Chats tenía transición) */
@media (min-width: 901px) {
    html[data-estilo="nuevo"] .side-panel,
    html[data-estilo="nuevo"] .chats-list-panel {
        transition: flex-basis 0.28s ease, width 0.28s ease, min-width 0.28s ease, padding 0.28s ease;
    }
    html[data-estilo="nuevo"] .en-flotante { animation: enColumnaEntra 0.22s ease; }
    html[data-estilo="nuevo"] .en-velo.on { animation: enVeloEntra 0.22s ease; }
}
@keyframes enColumnaEntra { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes enVeloEntra { from { opacity: 0; } to { opacity: 1; } }
/* ============================================================
   E6b · Panel de administración con menú agrupado (estilo_nuevo.js). Solo con .en-admin (estilo nuevo).
   ============================================================ */
.en-admin-nav, .en-admin-titulo, .en-estas-ajustando, .en-elige-semilla, .en-nota-guardar { display: none; }

html[data-estilo="nuevo"] .admin-modal-card.en-admin {
    display: grid !important;
    grid-template-columns: 236px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: 100%;
    max-width: 1060px !important;
    height: min(780px, calc(100dvh - 48px)) !important;
}
html[data-estilo="nuevo"] .en-admin > .modal-header { grid-column: 1 / -1; grid-row: 1; }
html[data-estilo="nuevo"] .en-admin > .admin-tabs-nav { display: none !important; }
html[data-estilo="nuevo"] .en-admin > .modal-footer { grid-column: 1 / -1; grid-row: 3; }
html[data-estilo="nuevo"] .en-admin > .admin-modal-body { grid-column: 2; grid-row: 2; min-height: 0; overflow-y: auto; }

/* Menú lateral */
html[data-estilo="nuevo"] .en-admin > .en-admin-nav {
    display: block; grid-column: 1; grid-row: 2; min-height: 0; overflow-y: auto;
    padding: 10px; border-right: 1px solid var(--border-subtle); background: var(--bg-card);
}
html[data-estilo="nuevo"] .en-admin-nav h4 {
    margin: 14px 8px 4px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted);
}
html[data-estilo="nuevo"] .en-admin-nav h4:first-child { margin-top: 4px; }
html[data-estilo="nuevo"] .en-admin-nav button {
    display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
    border: 0; background: none; padding: 8px 10px; border-radius: 9px;
    font: inherit; font-size: 0.88rem; color: var(--text-primary); cursor: pointer;
}
html[data-estilo="nuevo"] .en-admin-nav button[hidden] { display: none; }
html[data-estilo="nuevo"] .en-admin-nav button svg { width: 16px; height: 16px; color: var(--text-secondary); flex: 0 0 auto; }
html[data-estilo="nuevo"] .en-admin-nav button:hover { background: var(--bg-card-hover); }
html[data-estilo="nuevo"] .en-admin-nav button.on { background: rgba(56, 189, 248, 0.12); color: var(--accent-cyan); font-weight: 600; }
html[data-estilo="nuevo"] .en-admin-nav button.on svg { color: var(--accent-cyan); }
html[data-estilo="nuevo"][data-theme="whatsapp"] .en-admin-nav button.on { background: #e7f8ef; color: #008069; }
html[data-estilo="nuevo"][data-theme="whatsapp"] .en-admin-nav button.on svg { color: #008069; }

/* Título de la página */
html[data-estilo="nuevo"] .en-admin .en-admin-titulo { display: block; margin-bottom: 4px; }
html[data-estilo="nuevo"] .en-admin-titulo small { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
html[data-estilo="nuevo"] .en-admin-titulo h3 { margin: 2px 0 0; font-size: 1.15rem; color: var(--text-primary); }
html[data-estilo="nuevo"] .en-admin-titulo p { margin: 4px 0 0; font-size: 0.84rem; line-height: 1.45; color: var(--text-secondary); }
html[data-estilo="nuevo"] .en-admin-titulo p[hidden] { display: none; }

/* Una página = solo sus piezas */
html[data-estilo="nuevo"] .en-admin .en-unidad:not(.en-ver) { display: none !important; }

/* Semilla elegida: «Estás ajustando: [semilla ▾]» fijo arriba; sin el título ni la explicación de la tarjeta 3 */
html[data-estilo="nuevo"] .en-admin .en-card-semilla > h4,
html[data-estilo="nuevo"] .en-admin .en-card-semilla > p.admin-theme-desc { display: none; }
html[data-estilo="nuevo"] .en-admin .en-card-semilla { background: transparent; border: 0; padding: 0; }
html[data-estilo="nuevo"] .en-admin .en-semilla-fija {
    position: sticky; top: -20px; z-index: 3;
    display: flex; flex-direction: row !important; align-items: center; gap: 10px; flex-wrap: wrap;
    margin: 0 0 4px !important; padding: 10px 14px; border-radius: 12px;
    background: var(--bg-panel); border: 1px solid var(--border-active);
}
html[data-estilo="nuevo"] .en-admin .en-semilla-fija > label { display: none; }
html[data-estilo="nuevo"] .en-admin .en-estas-ajustando { display: inline; font-weight: 700; font-size: 0.86rem; color: var(--text-primary); }
html[data-estilo="nuevo"] .en-admin .en-semilla-fija select { flex: 1 1 180px; min-width: 0; height: auto; max-height: 44px; }
html[data-estilo="nuevo"] .en-admin .en-card-semilla:has(#adminSeedConfigContainer[style*="none"]) .en-elige-semilla {
    display: block; margin: 8px 2px; font-size: 0.86rem; color: var(--text-secondary);
}

/* «Guardar ajustes de IA» pegado abajo en las páginas que guarda, con la nota de qué incluye */
html[data-estilo="nuevo"] .en-admin .admin-ai-section > .admin-ai-save-bar.en-ver {
    position: sticky; bottom: -20px; z-index: 3;
    margin: 4px -20px -20px; padding: 12px 20px;
    background: var(--bg-panel); border-top: 1px solid var(--border-subtle);
    flex-wrap: wrap;
}
html[data-estilo="nuevo"] .en-admin .en-nota-guardar { display: inline; margin-right: auto; font-size: 0.76rem; color: var(--text-muted); }

/* Móvil: el menú pasa a una fila de chips deslizable */
@media (max-width: 900px) {
    html[data-estilo="nuevo"] .admin-modal-card.en-admin {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto minmax(0, 1fr) auto;
        height: 100dvh !important;
    }
    html[data-estilo="nuevo"] .en-admin > .en-admin-nav {
        display: flex; gap: 6px; grid-row: 2; overflow-x: auto; overflow-y: hidden;
        padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--border-subtle); scrollbar-width: none;
    }
    html[data-estilo="nuevo"] .en-admin-nav::-webkit-scrollbar { display: none; }
    html[data-estilo="nuevo"] .en-admin-nav h4 { display: none; }
    html[data-estilo="nuevo"] .en-admin-nav button {
        flex: 0 0 auto; width: auto; padding: 6px 12px; border-radius: 20px;
        border: 1px solid var(--border-subtle); background: var(--bg-panel); font-size: 0.82rem; white-space: nowrap;
    }
    html[data-estilo="nuevo"] .en-admin-nav button svg { display: none; }
    html[data-estilo="nuevo"] .en-admin > .admin-modal-body { grid-column: 1; grid-row: 3; padding: 14px !important; }
    html[data-estilo="nuevo"] .en-admin > .modal-footer { grid-row: 4; }
    html[data-estilo="nuevo"] .en-admin .admin-ai-section > .admin-ai-save-bar.en-ver { bottom: -14px; margin: 4px -14px -14px; padding: 10px 14px; }
    html[data-estilo="nuevo"] .en-admin .en-semilla-fija { top: -14px; }
}
/* ============================================================
   E6c · Controles de formulario estándar (estilo nuevo)
   Un solo aspecto para campos, desplegables, casillas, radios, interruptores y deslizadores en todas las
   ventanas (.overlay) y en el selector de semilla del panel. Antes había ~10 estilos distintos.
   ============================================================ */
html[data-estilo="nuevo"] {
    --ctl-bg: #0b1426;
    --ctl-borde: #22324f;
    --ctl-borde-hover: #31476f;
    --ctl-foco: #2563eb;
    --ctl-anillo: rgba(37, 99, 235, 0.28);
    --ctl-apagado: #1e2b45;
}
html[data-estilo="nuevo"][data-theme="whatsapp"] {
    --ctl-bg: #ffffff;
    --ctl-borde: #cbd5e1;
    --ctl-borde-hover: #94a3b8;
    --ctl-foco: #00a884;
    --ctl-anillo: rgba(0, 168, 132, 0.2);
    --ctl-apagado: #cbd5e1;
}

/* Campos de texto, desplegables y áreas de texto */
html[data-estilo="nuevo"] .overlay :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="color"]), select, textarea),
html[data-estilo="nuevo"] #sessionSelect {
    background-color: var(--ctl-bg) !important;
    border: 1px solid var(--ctl-borde) !important;
    border-radius: 10px !important;
    color: var(--text-primary) !important;
    font-family: inherit !important;
    font-size: 0.88rem !important;
    min-height: 38px;
    padding: 8px 12px;
    box-shadow: none !important;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
html[data-estilo="nuevo"] .overlay textarea { min-height: 0; line-height: 1.5; padding: 10px 12px; resize: vertical; }
/* Tamaño pequeño (formularios densos de Crear semilla y del panel) */
html[data-estilo="nuevo"] .overlay :is(.modal-input-small, .modal-select-small, .modal-textarea-small, .admin-select) {
    min-height: 34px; padding: 6px 10px; font-size: 0.84rem !important; border-radius: 9px !important;
}
/* Desplegables: misma flecha en todos (el de la semilla ya tiene la suya) */
html[data-estilo="nuevo"] .overlay select:not([multiple]):not([size]) {
    appearance: none; -webkit-appearance: none; cursor: pointer;
    padding-right: 34px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 11px center !important;
    background-size: 16px !important;
}
html[data-estilo="nuevo"] .overlay select option,
html[data-estilo="nuevo"] #sessionSelect option { background: var(--ctl-bg) !important; color: var(--text-primary) !important; }
html[data-estilo="nuevo"] .overlay :is(input, select, textarea):hover:not(:disabled):not(:focus),
html[data-estilo="nuevo"] #sessionSelect:hover { border-color: var(--ctl-borde-hover) !important; }
html[data-estilo="nuevo"] .overlay :is(input, select, textarea):focus,
html[data-estilo="nuevo"] #sessionSelect:focus {
    border-color: var(--ctl-foco) !important;
    box-shadow: 0 0 0 3px var(--ctl-anillo) !important;
}
html[data-estilo="nuevo"] .overlay :is(input, textarea)::placeholder { color: var(--text-muted) !important; opacity: 1; }
html[data-estilo="nuevo"] .overlay :is(input, select, textarea):disabled { opacity: 0.55; cursor: not-allowed; }
html[data-estilo="nuevo"] .overlay input[readonly] { background-color: var(--bg-card-hover) !important; }

/* Sí/no = interruptor: toda casilla suelta se ve como los interruptores de siempre (09/11, estandarización pedida
   por el usuario). No toca las casillas escondidas de .toggle-switch/.admin-toggle-switch. Sigue siendo la misma
   casilla (mismo id, mismo clic, mismo «checked»): solo cambia cómo se ve. */
html[data-estilo="nuevo"] .overlay input[type="checkbox"]:not(.toggle-switch > input):not(.admin-toggle-switch > input) {
    appearance: none; -webkit-appearance: none;
    position: relative; flex: 0 0 40px;
    width: 40px !important; height: 23px !important; min-width: 40px; margin: 0 4px 0 0 !important;
    border: 0; border-radius: 12px;
    background: var(--ctl-apagado); cursor: pointer; vertical-align: middle;
    transition: background 0.2s ease;
}
html[data-estilo="nuevo"] .overlay input[type="checkbox"]:not(.toggle-switch > input):not(.admin-toggle-switch > input)::before {
    content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%;
    background: #ffffff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform 0.2s ease;
}
html[data-estilo="nuevo"] .overlay input[type="checkbox"]:not(.toggle-switch > input):not(.admin-toggle-switch > input):checked { background: var(--ctl-foco); }
html[data-estilo="nuevo"] .overlay input[type="checkbox"]:not(.toggle-switch > input):not(.admin-toggle-switch > input):checked::before { transform: translateX(17px); }
html[data-estilo="nuevo"] .overlay input[type="checkbox"]:disabled { opacity: 0.5; cursor: not-allowed; }

/* Radios (elegir UNA opción entre varias, p. ej. el género): círculo propio del color del tema */
html[data-estilo="nuevo"] .overlay input[type="radio"] {
    appearance: none; -webkit-appearance: none;
    position: relative; flex: 0 0 18px;
    width: 18px !important; height: 18px !important; margin: 0 2px 0 0 !important;
    border: 1.5px solid var(--ctl-borde-hover); border-radius: 50%;
    background: var(--ctl-bg); cursor: pointer; vertical-align: middle;
    transition: background 0.15s ease, border-color 0.15s ease;
}
html[data-estilo="nuevo"] .overlay input[type="radio"]:checked { background: var(--ctl-foco); border-color: var(--ctl-foco); }
html[data-estilo="nuevo"] .overlay input[type="radio"]:checked::before {
    content: ""; position: absolute; inset: 0; margin: auto; width: 8px; height: 8px; border-radius: 50%; background: #fff;
}
html[data-estilo="nuevo"] .overlay input[type="checkbox"]:focus-visible,
html[data-estilo="nuevo"] .overlay input[type="radio"]:focus-visible { box-shadow: 0 0 0 3px var(--ctl-anillo); outline: none; }
/* Interruptores: los dos tipos (Ajustes y panel) iguales; verde en claro, azul en oscuro */
html[data-estilo="nuevo"] :is(.toggle-switch, .admin-toggle-switch) { width: 40px !important; height: 23px !important; }
html[data-estilo="nuevo"] :is(.toggle-slider, .admin-toggle-slider) {
    background-color: var(--ctl-apagado) !important; border: 0 !important; border-radius: 12px !important;
}
html[data-estilo="nuevo"] :is(.toggle-slider, .admin-toggle-slider)::before {
    width: 17px !important; height: 17px !important; left: 3px !important; bottom: 3px !important;
    background-color: #ffffff !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
html[data-estilo="nuevo"] input:checked + :is(.toggle-slider, .admin-toggle-slider) { background-color: var(--ctl-foco) !important; }
html[data-estilo="nuevo"] input:checked + :is(.toggle-slider, .admin-toggle-slider)::before { transform: translateX(17px) !important; }
html[data-estilo="nuevo"] input:focus-visible + :is(.toggle-slider, .admin-toggle-slider) { box-shadow: 0 0 0 3px var(--ctl-anillo); }

/* Deslizadores */
html[data-estilo="nuevo"] .overlay input[type="range"] { accent-color: var(--ctl-foco); }
/* Botones «+ Añadir …» de las ventanas (variedad, persona que ya conoce…): todos iguales */
html[data-estilo="nuevo"] .overlay :is(.btn-add-variedad, .btn-add-vinculo) {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 9px; cursor: pointer;
    font: inherit; font-size: 0.82rem; font-weight: 600;
    background: transparent !important; color: var(--ctl-foco) !important;
    border: 1px dashed var(--ctl-foco) !important; box-shadow: none !important;
}
html[data-estilo="nuevo"] .overlay :is(.btn-add-variedad, .btn-add-vinculo):hover { background: var(--ctl-anillo) !important; }
/* ============================================================
   E6d · Buscador de ajustes del panel (estilo_nuevo.js)
   ============================================================ */
.en-admin-buscar, .en-admin-resultados { display: none; }
html[data-estilo="nuevo"] .en-admin .en-admin-buscar {
    display: flex; align-items: center; gap: 8px; position: relative;
    margin: 2px 2px 8px; padding: 0 10px; height: 36px;
    border: 1px solid var(--ctl-borde); border-radius: 10px; background: var(--ctl-bg);
}
html[data-estilo="nuevo"] .en-admin .en-admin-buscar:focus-within { border-color: var(--ctl-foco); box-shadow: 0 0 0 3px var(--ctl-anillo); }
html[data-estilo="nuevo"] .en-admin .en-admin-buscar svg { width: 15px; height: 15px; color: var(--text-muted); flex: 0 0 auto; }
/* Con id: la regla general de campos (E6c) lleva muchos :not() y ganaba, pintando un 2.º recuadro dentro de la caja */
html[data-estilo="nuevo"] #enBuscarAjuste,
html[data-estilo="nuevo"] #enBuscarAjuste:focus,
html[data-estilo="nuevo"] #enBuscarAjuste:hover {
    flex: 1 1 auto; min-width: 0; width: auto !important; height: 100% !important; min-height: 0 !important;
    margin: 0 !important; padding: 0 !important;
    border: 0 !important; border-radius: 0 !important; outline: 0 !important;
    background: transparent !important; box-shadow: none !important;
    color: var(--text-primary) !important; font: inherit; font-size: 0.86rem !important;
}
html[data-estilo="nuevo"] .en-admin .en-admin-buscar input::-webkit-search-cancel-button { cursor: pointer; }

/* Lista de resultados, encima de todo */
html[data-estilo="nuevo"] .en-admin .en-admin-resultados:not([hidden]) {
    display: block; position: absolute; z-index: 20; max-height: 360px; overflow-y: auto;
    padding: 6px; border-radius: 12px; background: var(--bg-panel);
    border: 1px solid var(--border-card); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}
html[data-estilo="nuevo"] .en-admin .en-admin-resultados[hidden] { display: none; }
html[data-estilo="nuevo"] .en-res {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left;
    border: 0; background: none; padding: 8px 10px; border-radius: 8px; cursor: pointer; font: inherit; color: var(--text-primary);
}
html[data-estilo="nuevo"] .en-res span { font-size: 0.86rem; font-weight: 600; }
html[data-estilo="nuevo"] .en-res small { font-size: 0.74rem; color: var(--text-muted); }
html[data-estilo="nuevo"] .en-res:hover, html[data-estilo="nuevo"] .en-res.on { background: var(--ctl-anillo); }
html[data-estilo="nuevo"] .en-res-vacio { padding: 10px; font-size: 0.84rem; color: var(--text-muted); }

/* El ajuste encontrado se ilumina un momento */
html[data-estilo="nuevo"] .en-admin .en-resaltado { animation: enResaltar 1.8s ease; border-radius: 10px; }
@keyframes enResaltar {
    0%, 30% { box-shadow: 0 0 0 3px var(--ctl-foco), 0 0 0 8px var(--ctl-anillo); }
    100% { box-shadow: 0 0 0 0 transparent; }
}

@media (max-width: 900px) {
    /* En el móvil, el buscador es el primer elemento de la fila de chips */
    html[data-estilo="nuevo"] .en-admin .en-admin-buscar { flex: 0 0 170px; margin: 0; height: 32px; border-radius: 20px; }
    html[data-estilo="nuevo"] .en-admin .en-admin-resultados:not([hidden]) { max-height: 55dvh; }
}
html[data-estilo="nuevo"] .admin-modal-card.en-admin { position: relative; }

/* ==========================================================================
   E6f · Stickers más pequeños y redondeados, con clic para ampliar (09/11)
   El margen respecto al borde de la burbuja está en styles.css (vale para los dos estilos).
   ========================================================================== */
html[data-estilo="nuevo"] .ai-sticker-container { filter: none; max-width: none; max-height: none; }
html[data-estilo="nuevo"] .ai-sticker-img {
    max-width: 128px; max-height: 128px; border-radius: 14px;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.14));   /* sigue la silueta en los transparentes */
    cursor: zoom-in;
}
html[data-estilo="nuevo"] [data-theme="cyberpunk"] .ai-sticker-img,
html[data-estilo="nuevo"][data-theme="cyberpunk"] .ai-sticker-img { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4)); }
html[data-estilo="nuevo"] .stk-bloqueado .ai-sticker-img { filter: grayscale(1); }
@media (max-width: 900px) {
    html[data-estilo="nuevo"] .ai-sticker-img { max-width: 112px; max-height: 112px; }
}

/* ==========================================================================
   E6e · Rutinas (09/11): explicación técnica plegada en «¿Qué significa esto?» (copia que pone
   estilo_nuevo.js; los originales se esconden), y en el móvil pestañas que caben y cada tramo
   horario como una tarjeta (sin deslizar de lado). Solo CSS sobre la tabla de siempre.
   ========================================================================== */
.en-guia { display: none; }
html[data-estilo="nuevo"] #routineModal .en-guia { display: block; margin: 0 0 12px; }
html[data-estilo="nuevo"] #routineModal .routine-modal-body > .routine-modal-desc,
html[data-estilo="nuevo"] #routineModal #paneHorarios > .routine-info-box { display: none; }
html[data-estilo="nuevo"] #routineModal .en-guia-btn {
    display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 9px;
    border: 1px solid var(--ctl-borde); border-radius: 20px; background: var(--ctl-bg);
    color: var(--text-secondary, var(--text-muted)); font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer;
}
html[data-estilo="nuevo"] #routineModal .en-guia-btn:hover { border-color: var(--ctl-foco); color: var(--ctl-foco); }
html[data-estilo="nuevo"] #routineModal .en-guia-btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
html[data-estilo="nuevo"] #routineModal .en-guia-flecha { transition: transform 0.2s ease; }
html[data-estilo="nuevo"] #routineModal .en-guia.abierta .en-guia-btn { border-color: var(--ctl-foco); color: var(--ctl-foco); }
html[data-estilo="nuevo"] #routineModal .en-guia.abierta .en-guia-flecha { transform: rotate(180deg); }
html[data-estilo="nuevo"] #routineModal .en-guia-cuerpo:not([hidden]) {
    display: block; margin-top: 10px; padding: 12px 14px; border-radius: 12px;
    border: 1px solid var(--border-card); background: var(--bg-card-hover, transparent);
    animation: enGuiaAbrir 0.2s ease;
}
html[data-estilo="nuevo"] #routineModal .en-guia-cuerpo .routine-modal-desc { margin: 0 0 10px; }
html[data-estilo="nuevo"] #routineModal .en-guia-cuerpo .routine-info-box { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
@keyframes enGuiaAbrir { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

@media (max-width: 640px) {
    /* Pestañas: las tres a lo ancho, icono encima del texto (antes la 3.ª se salía) */
    html[data-estilo="nuevo"] #routineModal .routine-tabs-header { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
    html[data-estilo="nuevo"] #routineModal .routine-tab-btn {
        display: block; min-width: 0; padding: 8px 4px;
        font-size: 0.74rem; line-height: 1.2; text-align: center; white-space: normal;
    }
    html[data-estilo="nuevo"] #routineModal .routine-tab-btn svg { display: block; margin: 0 auto 4px; }

    /* Cada tramo horario, una tarjeta: horario + papelera / espacio y actividad / impedancia y metabolismo */
    html[data-estilo="nuevo"] #routineModal .routine-table-wrapper { overflow: visible; border: 0 !important; background: none !important; box-shadow: none !important; }
    html[data-estilo="nuevo"] #routineModal .routine-table,
    html[data-estilo="nuevo"] #routineModal .routine-table tbody { display: block; width: 100%; min-width: 0; }
    html[data-estilo="nuevo"] #routineModal .routine-table thead { display: none; }
    html[data-estilo="nuevo"] #routineModal .routine-table tr {
        display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px 10px;
        margin-bottom: 10px; padding: 12px; border-radius: 12px;
        border: 1px solid var(--border-card); background: var(--bg-panel);
    }
    html[data-estilo="nuevo"] #routineModal .routine-table td { display: block; padding: 0 !important; border: 0 !important; min-width: 0; }
    html[data-estilo="nuevo"] #routineModal .routine-table td:nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
    html[data-estilo="nuevo"] #routineModal .routine-table td:nth-child(6) { grid-column: 3; grid-row: 1; align-self: center; }
    html[data-estilo="nuevo"] #routineModal .routine-table td:nth-child(5) { grid-column: 2 / 4; }
    html[data-estilo="nuevo"] #routineModal .routine-table td:nth-child(3) { grid-column: 2 / 4; }
    html[data-estilo="nuevo"] #routineModal .routine-table td:nth-child(n+2):nth-child(-n+5)::before {
        display: block; margin: 0 0 4px 2px; font-size: 0.72rem; font-weight: 600; color: var(--text-muted);
    }
    html[data-estilo="nuevo"] #routineModal .routine-table td:nth-child(2)::before { content: "Espacio"; }
    html[data-estilo="nuevo"] #routineModal .routine-table td:nth-child(3)::before { content: "Actividad"; }
    html[data-estilo="nuevo"] #routineModal .routine-table td:nth-child(4)::before { content: "Impedancia (0–1)"; }
    html[data-estilo="nuevo"] #routineModal .routine-table td:nth-child(5)::before { content: "Metabolismo (0,5–2)"; }
    html[data-estilo="nuevo"] #routineModal .routine-table td input { width: 100% !important; min-width: 0; box-sizing: border-box; }
    html[data-estilo="nuevo"] #routineModal .time-range-group { display: flex; align-items: center; gap: 6px; }
    html[data-estilo="nuevo"] #routineModal .time-range-group input { flex: 1 1 0; }
    /* Sin tramos (Vida Libre): una sola tarjeta normal */
    html[data-estilo="nuevo"] #routineModal .routine-table tr:has(td[colspan]) { display: block; }
    html[data-estilo="nuevo"] #routineModal .routine-table td[colspan]::before { content: none; }
    /* Explicaciones (excepciones y la guía plegada): el texto debajo del título, a todo el ancho */
    html[data-estilo="nuevo"] #routineModal .routine-info-item { flex-wrap: wrap; row-gap: 2px; }
    html[data-estilo="nuevo"] #routineModal .routine-info-item > span:last-child { flex: 1 1 100%; }
    /* Botones de abajo a todo el ancho */
    html[data-estilo="nuevo"] #routineModal .routine-actions-bar { flex-direction: column; align-items: stretch; }
    html[data-estilo="nuevo"] #routineModal .routine-actions-bar .btn-routine-action { justify-content: center; }
}

/* ==========================================================================
   Mapa ambiental (09/11, plan Ficha/Mapa/Borrar F3). Cada dato en su casilla con la etiqueta encima (rejilla
   que se adapta al ancho), «indefinido» como «—» discreto, etiquetas de rasgos más sobrias, descripción como texto
   normal. Escritorio: foto arriba a la izquierda con sus botones debajo. Móvil: todo en una columna con un solo
   scroll (foto, botones, datos) y el pie «Regenerar datos» siempre abajo.
   ========================================================================== */
html[data-estilo="nuevo"] .mapa-modal-card { max-width: 960px !important; }
html[data-estilo="nuevo"] .mapa-json-container { padding: 16px 18px; }
html[data-estilo="nuevo"] .mapa-card-block { gap: 12px; padding: 16px 18px; border-radius: 14px; }
html[data-estilo="nuevo"] .mapa-card-block:hover { box-shadow: none !important; }
html[data-estilo="nuevo"][data-theme="whatsapp"] .mapa-card-block:hover { border-color: #e2e8f0 !important; background: #f8fafc !important; }
html[data-estilo="nuevo"] .mapa-card-header { font-size: 0.78rem; padding-bottom: 8px; }

/* Rejilla de datos */
html[data-estilo="nuevo"] .mapa-datos {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px 18px;
}
html[data-estilo="nuevo"] .mapa-dato {
    flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; min-width: 0;
}
html[data-estilo="nuevo"] .mapa-dato-ancho { grid-column: 1 / -1; }
html[data-estilo="nuevo"] .mapa-dp { display: none; }
html[data-estilo="nuevo"] :is(.mapa-dato, .mapa-field-col) > .mapa-label {
    font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--text-muted) !important;
}
html[data-estilo="nuevo"] .mapa-dato .mapa-val {
    text-align: left; font-size: 0.92rem; line-height: 1.35; overflow-wrap: anywhere;
}
html[data-estilo="nuevo"] .mapa-dato-fuerte .mapa-val { font-size: 1rem; }
/* Sin dato: una raya discreta en vez de «indefinido» */
html[data-estilo="nuevo"] .mapa-vacio .mapa-val { font-size: 0 !important; }
html[data-estilo="nuevo"] .mapa-vacio .mapa-val::after { content: "—"; font-size: 0.92rem; color: var(--text-muted); opacity: 0.6; }

/* Descripción: texto normal, sin caja */
html[data-estilo="nuevo"] .mapa-val-quote {
    font-style: normal; font-size: 0.9rem; line-height: 1.55; padding: 0 0 0 12px;
    background: none !important; border-left: 2px solid var(--border-subtle) !important; border-radius: 0;
    color: var(--text-primary) !important;
}

/* Etiquetas (rasgos, elementos, lugares): más sobrias y del mismo estilo */
html[data-estilo="nuevo"] .mapa-tags-wrap { gap: 6px; }
html[data-estilo="nuevo"] .mapa-tag,
html[data-estilo="nuevo"] .mapa-tag.secondary {
    padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 500; line-height: 1.4;
    background: var(--bg-card-hover) !important; border: 1px solid var(--border-subtle) !important;
    color: var(--text-secondary, var(--text-primary)) !important;
}
html[data-estilo="nuevo"][data-theme="whatsapp"] .mapa-tag,
html[data-estilo="nuevo"][data-theme="whatsapp"] .mapa-tag.secondary { background: #ffffff !important; border-color: #dbe3ec !important; color: #334155 !important; }

/* Columna de la foto: arriba, sin hueco, con los botones debajo */
html[data-estilo="nuevo"] .mapa-modal-left { flex: 0 0 340px; justify-content: flex-start; overflow-y: auto; }
html[data-estilo="nuevo"] .mapa-modal-image-wrapper { flex: 0 0 auto; padding: 18px 18px 10px; }
html[data-estilo="nuevo"] #mapaModalImage { width: 100%; height: auto; max-height: none; border-radius: 14px; }
html[data-estilo="nuevo"] .mapa-modal-left > div:has(> #regenerarMapaModalBtn) {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 6px 18px 18px !important; border-top: 0 !important;
}
html[data-estilo="nuevo"] .mapa-modal-right { flex: 1 1 auto; min-width: 0; }
html[data-estilo="nuevo"] .mapa-json-footer { gap: 10px; padding: 10px 18px; }

@media (max-width: 900px) {
    /* Un solo scroll: foto, botones y datos uno debajo de otro; el pie, siempre abajo */
    html[data-estilo="nuevo"] .mapa-modal-body { flex-direction: column; overflow-y: auto !important; }
    html[data-estilo="nuevo"] .mapa-modal-left { flex: 0 0 auto; overflow: visible; border-right: 0 !important; border-bottom: 1px solid var(--border-subtle); }
    html[data-estilo="nuevo"] .mapa-modal-image-wrapper { padding: 14px 14px 8px; }
    html[data-estilo="nuevo"] #mapaModalImage { width: auto; max-width: 100%; max-height: 42vh; margin: 0 auto; }
    html[data-estilo="nuevo"] .mapa-modal-left > div:has(> #regenerarMapaModalBtn) { padding: 4px 14px 14px !important; }
    html[data-estilo="nuevo"] .mapa-modal-left > div:has(> #regenerarMapaModalBtn) > button { flex: 1 1 0; justify-content: center; }
    html[data-estilo="nuevo"] .mapa-modal-right { flex: 0 0 auto; }
    html[data-estilo="nuevo"] .mapa-json-container { overflow: visible !important; padding: 14px; }
    html[data-estilo="nuevo"] .mapa-json-footer:not(.en-mapa-acciones) { position: sticky; bottom: 0; z-index: 2; background: var(--bg-panel) !important; }
    html[data-estilo="nuevo"] .mapa-datos { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}

/* F3b: «¿Faltan datos o están viejos? · Regenerar datos» debajo de los botones de la foto (lo mueve estilo_nuevo.js) */
html[data-estilo="nuevo"] .mapa-modal-left > .mapa-json-footer.en-mapa-acciones {
    flex-direction: column; align-items: stretch; gap: 8px;
    margin: 4px 18px 18px; padding: 14px 0 0 !important;
    background: none !important; border-top: 1px solid var(--border-subtle) !important;
    text-align: center;
}
html[data-estilo="nuevo"] .mapa-modal-left > .mapa-json-footer.en-mapa-acciones > span { color: var(--text-muted) !important; font-weight: 500 !important; }
html[data-estilo="nuevo"] .mapa-modal-left > .mapa-json-footer.en-mapa-acciones > button { justify-content: center; padding: 8px 14px; font-size: 0.85rem; }
@media (max-width: 900px) {
    html[data-estilo="nuevo"] .mapa-modal-left > .mapa-json-footer.en-mapa-acciones { margin: 0 14px 14px; padding-top: 12px !important; }
}

/* ==========================================================================
   Ficha de identidad (09/11, plan Ficha/Mapa/Borrar F2). Pestañas Resumen · Personas · Forma de hablar
   (estilo_nuevo.js), datos en rejilla con la etiqueta encima (como el Mapa), Personas en tarjetas con
   buscador y filtros. Más ancha en el ordenador; en el móvil, pantalla completa (E6a).
   ========================================================================== */
.en-ficha-tabs { display: none; }
html[data-estilo="nuevo"] #activeSessionInfoModal > .modal-card { max-width: 1040px !important; max-height: calc(100dvh - 48px) !important; }
html[data-estilo="nuevo"] #activeSessionInfoModal .en-ficha-tabs {
    display: flex; gap: 6px; padding: 10px 18px; overflow-x: auto; scrollbar-width: none;
    border-bottom: 1px solid var(--border-subtle); background: var(--bg-panel); flex: 0 0 auto;
}
html[data-estilo="nuevo"] #activeSessionInfoModal .en-ficha-tabs::-webkit-scrollbar { display: none; }
html[data-estilo="nuevo"] .en-ficha-tab {
    display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
    padding: 7px 14px; border-radius: 20px; border: 1px solid var(--border-subtle);
    background: transparent; color: var(--text-secondary, var(--text-muted)); font: inherit; font-size: 0.84rem; font-weight: 600; cursor: pointer;
}
html[data-estilo="nuevo"] .en-ficha-tab svg { width: 16px; height: 16px; }
html[data-estilo="nuevo"] .en-ficha-tab:hover { border-color: var(--ctl-foco); color: var(--ctl-foco); }
html[data-estilo="nuevo"] .en-ficha-tab.on { background: var(--ctl-foco); border-color: var(--ctl-foco); color: #fff; }
html[data-estilo="nuevo"] .en-ficha-tab[hidden] { display: none; }
html[data-estilo="nuevo"] .en-ficha-num:empty { display: none; }
html[data-estilo="nuevo"] .en-ficha-num { font-size: 0.74rem; padding: 0 7px; border-radius: 10px; background: rgba(148, 163, 184, 0.2); }
html[data-estilo="nuevo"] .en-ficha-tab.on .en-ficha-num { background: rgba(255, 255, 255, 0.25); }

/* Qué tarjeta va en cada pestaña */
html[data-estilo="nuevo"] #infoModalBody > .ficha-block-card { display: none; }
html[data-estilo="nuevo"] #infoModalBody[data-en-tab="resumen"] > .ficha-block-card:not(.ficha-personas-card):not(#fichaCortexCard),
html[data-estilo="nuevo"] #infoModalBody[data-en-tab="personas"] > .ficha-personas-card,
html[data-estilo="nuevo"] #infoModalBody[data-en-tab="habla"] > #fichaCortexCard { display: grid; }
/* Resumen: las tarjetas una al lado de otra si caben */
html[data-estilo="nuevo"] #infoModalBody[data-en-tab="resumen"] {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; align-items: start;
}

/* Dentro de cada tarjeta: rejilla de datos con la etiqueta pequeña encima */
html[data-estilo="nuevo"] #infoModalBody > .ficha-block-card {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px 18px; align-content: start;
    margin: 0 !important; padding: 16px 18px; border-radius: 14px;
}
html[data-estilo="nuevo"] #infoModalBody > .ficha-block-card:hover { box-shadow: none !important; }
html[data-estilo="nuevo"][data-theme="whatsapp"] #infoModalBody > .ficha-block-card:hover { border-color: #e2e8f0 !important; background: #f8fafc !important; }
html[data-estilo="nuevo"] #infoModalBody .ficha-block-header { grid-column: 1 / -1; font-size: 0.78rem; padding-bottom: 8px; margin: 0; }
html[data-estilo="nuevo"] #infoModalBody .ficha-row {
    flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; min-width: 0;
}
html[data-estilo="nuevo"] #infoModalBody .ficha-col { grid-column: 1 / -1; gap: 6px; }
html[data-estilo="nuevo"] #infoModalBody .ficha-label {
    font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted) !important;
}
html[data-estilo="nuevo"] #infoModalBody .en-dp { display: none; }
html[data-estilo="nuevo"] #infoModalBody .ficha-row .ficha-val { text-align: left; font-size: 0.92rem; line-height: 1.35; overflow-wrap: anywhere; }
html[data-estilo="nuevo"] #infoModalBody .ficha-col .ficha-val { font-size: 0.9rem; line-height: 1.5; }
html[data-estilo="nuevo"] #infoModalBody .ficha-val-quote {
    font-style: normal; font-size: 0.9rem; line-height: 1.5; padding: 0 0 0 12px; border-radius: 0;
    background: none !important; border-left: 2px solid var(--border-subtle) !important; color: var(--text-primary) !important;
}
/* Una fila larga («Vuelve a la vida…») ocupa todo el ancho */
html[data-estilo="nuevo"] #infoModalBody .ficha-row.en-largo { grid-column: 1 / -1; }


/* ---------- Personas ---------- */
html[data-estilo="nuevo"] #infoModalBody > .ficha-block-card.ficha-personas-card { grid-template-columns: minmax(0, 1fr); gap: 12px; }
html[data-estilo="nuevo"] .en-personas-herr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
html[data-estilo="nuevo"] .en-personas-buscar {
    display: flex; align-items: center; gap: 8px; flex: 1 1 220px; max-width: 320px; height: 36px; padding: 0 12px;
    border: 1px solid var(--ctl-borde); border-radius: 10px; background: var(--ctl-bg);
}
html[data-estilo="nuevo"] .en-personas-buscar:focus-within { border-color: var(--ctl-foco); box-shadow: 0 0 0 3px var(--ctl-anillo); }
html[data-estilo="nuevo"] .en-personas-buscar svg { width: 15px; height: 15px; color: var(--text-muted); flex: 0 0 auto; }
html[data-estilo="nuevo"] #enPersonasBuscar, html[data-estilo="nuevo"] #enPersonasBuscar:focus {
    flex: 1 1 auto; min-width: 0; width: auto !important; height: 100% !important; min-height: 0 !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
    background: transparent !important; box-shadow: none !important; outline: 0; font-size: 0.86rem !important;
}
html[data-estilo="nuevo"] .en-personas-filtros { display: flex; flex-wrap: wrap; gap: 6px; }
html[data-estilo="nuevo"] .en-personas-filtro {
    padding: 5px 11px; border-radius: 16px; border: 1px solid var(--border-subtle); background: transparent;
    color: var(--text-secondary, var(--text-muted)); font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer;
}
html[data-estilo="nuevo"] .en-personas-filtro b { font-weight: 600; opacity: 0.65; margin-left: 2px; }
html[data-estilo="nuevo"] .en-personas-filtro.on { background: var(--ctl-foco); border-color: var(--ctl-foco); color: #fff; }
html[data-estilo="nuevo"] .en-personas-vacio { flex: 1 1 100%; font-size: 0.85rem; color: var(--text-muted); padding: 8px 2px; }
html[data-estilo="nuevo"] .en-personas-rejilla {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; align-items: start;
}
html[data-estilo="nuevo"] .en-personas-rejilla > .ficha-persona {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0;
    padding: 12px 14px; border: 1px solid var(--border-subtle); border-top: 1px solid var(--border-subtle);
    border-radius: 12px; background: var(--bg-panel);
}
html[data-estilo="nuevo"] .en-personas-rejilla > .ficha-persona[hidden] { display: none; }
html[data-estilo="nuevo"] .en-personas-rejilla > .ficha-persona > * { flex: 1 1 100%; min-width: 0; }
html[data-estilo="nuevo"] .ficha-persona-cab { align-items: flex-start; }
html[data-estilo="nuevo"] .ficha-persona-cab strong { font-size: 0.95rem; }
html[data-estilo="nuevo"] .ficha-persona-cab > span:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
html[data-estilo="nuevo"] .ficha-persona-tipo { margin-left: 0; }
/* Confianza: número con una barrita debajo */
html[data-estilo="nuevo"] .ficha-persona-conf {
    position: relative; flex: 0 0 auto; padding-bottom: 6px; font-size: 0.74rem; font-weight: 600; opacity: 1; color: var(--text-muted);
}
html[data-estilo="nuevo"] .ficha-persona-conf::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px;
    background: linear-gradient(90deg, var(--ctl-foco) var(--conf, 0%), rgba(148, 163, 184, 0.25) var(--conf, 0%));
}
html[data-estilo="nuevo"] .ficha-persona-sub { font-size: 0.8rem; opacity: 0.9; }
html[data-estilo="nuevo"] .ficha-persona-origen { font-size: 0.74rem; color: var(--text-muted); opacity: 1; }
html[data-estilo="nuevo"] .ficha-persona-datos { font-style: normal; font-size: 0.8rem; line-height: 1.45; opacity: 0.85; cursor: pointer; }
html[data-estilo="nuevo"] .ficha-persona-datos.en-recortado {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Botones en una fila, pequeños */
html[data-estilo="nuevo"] .en-personas-rejilla > .ficha-persona > .ficha-persona-acciones,
html[data-estilo="nuevo"] .en-personas-rejilla > .ficha-persona > .ficha-persona-edicion { flex: 0 1 auto; margin-top: 4px; }
html[data-estilo="nuevo"] .en-personas-rejilla > .ficha-persona > .ficha-persona-edicion:has(.ficha-persona-edicion-panel:not(.hidden)) { flex-basis: 100%; }
html[data-estilo="nuevo"] .ficha-persona-acciones .ficha-persona-btn,
html[data-estilo="nuevo"] .ficha-persona-editar {
    font-size: 0.76rem; padding: 4px 10px; border-radius: 14px; opacity: 1; white-space: nowrap;
}
html[data-estilo="nuevo"] .ficha-persona-acciones .ficha-persona-msg:empty { display: none; }

@media (max-width: 900px) {
    html[data-estilo="nuevo"] #activeSessionInfoModal .en-ficha-tabs { padding: 8px 12px; }
    html[data-estilo="nuevo"] #infoModalBody[data-en-tab="resumen"] { grid-template-columns: 1fr; }
    html[data-estilo="nuevo"] #infoModalBody > .ficha-block-card { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); padding: 14px; }
    html[data-estilo="nuevo"] .en-personas-buscar { max-width: none; flex-basis: 100%; }
    html[data-estilo="nuevo"] .en-personas-rejilla { grid-template-columns: 1fr; }
}

/* ---------- Ficha F2b (09/11, petición del usuario): foto en Resumen y tarjetas sin huecos ---------- */
.en-f-foto { display: none; }
@media (min-width: 1100px) {
    html[data-estilo="nuevo"] #infoModalBody[data-en-tab="resumen"] {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr) minmax(0, 1.15fr);
        grid-template-rows: auto 1fr;
        grid-template-areas: "foto perfil entorno" "foto datos entorno";
    }
}
@media (min-width: 901px) and (max-width: 1099px) {
    html[data-estilo="nuevo"] #infoModalBody[data-en-tab="resumen"] {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        grid-template-rows: auto 1fr auto;
        grid-template-areas: "foto perfil" "foto datos" "entorno entorno";
    }
}
@media (min-width: 901px) {
    html[data-estilo="nuevo"] #infoModalBody[data-en-tab="resumen"] > .en-f-foto { grid-area: foto; }
    html[data-estilo="nuevo"] #infoModalBody[data-en-tab="resumen"] > .en-f-perfil { grid-area: perfil; }
    html[data-estilo="nuevo"] #infoModalBody[data-en-tab="resumen"] > .en-f-datos { grid-area: datos; }
    html[data-estilo="nuevo"] #infoModalBody[data-en-tab="resumen"] > .en-f-entorno { grid-area: entorno; }
}
/* Móvil: foto, datos, perfil, entorno (el orden de siempre, con la foto arriba) */
html[data-estilo="nuevo"] #infoModalBody > .en-f-foto { grid-template-columns: 1fr; gap: 10px; align-content: start; text-align: center; }
html[data-estilo="nuevo"] .en-f-foto-marco {
    position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden;
    background: var(--bg-card-hover); display: flex; align-items: center; justify-content: center;
}
html[data-estilo="nuevo"] .en-f-foto-marco img { display: none; width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
html[data-estilo="nuevo"] .en-f-foto.con-foto .en-f-foto-marco img { display: block; }
html[data-estilo="nuevo"] .en-f-foto.con-foto .en-f-foto-sin { display: none; }
html[data-estilo="nuevo"] .en-f-foto-sin { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--text-muted); font-size: 0.82rem; }
html[data-estilo="nuevo"] .en-f-foto-sin svg { width: 40px; height: 40px; opacity: 0.6; }
html[data-estilo="nuevo"] .en-f-foto-nombre { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); }
html[data-estilo="nuevo"] .en-f-foto-edad { font-size: 0.85rem; color: var(--text-muted); margin-top: -6px; }
html[data-estilo="nuevo"] .en-f-foto-edad:empty { display: none; }
@media (max-width: 900px) {
    html[data-estilo="nuevo"] .en-f-foto-marco { max-width: 260px; margin: 0 auto; }
}

/* Etiquetas de la ficha (rasgos, huella léxica, vocabulario): redondeadas y sobrias, como las del Mapa.
   Llevan colores en línea pensados para el oscuro: aquí mandan las del tema. */
html[data-estilo="nuevo"] #infoModalBody .ficha-tag {
    padding: 3px 10px !important; border-radius: 999px !important; font-size: 0.78rem !important; font-weight: 500 !important; line-height: 1.4;
    background: var(--bg-card-hover) !important; border: 1px solid var(--border-subtle) !important;
    color: var(--text-secondary, var(--text-primary)) !important;
}
html[data-estilo="nuevo"][data-theme="whatsapp"] #infoModalBody .ficha-tag { background: #ffffff !important; border-color: #dbe3ec !important; color: #334155 !important; }
/* «Varias variedades / Monodialectal»: un valor normal, sin recuadro; los nodos debajo */
html[data-estilo="nuevo"] #fichaCortexCard .status-badge {
    display: inline; padding: 0 !important; border: 0 !important; background: none !important;
    color: var(--text-primary) !important; font-size: 0.92rem; font-weight: 500;
}
html[data-estilo="nuevo"] #fichaCortexCard .ficha-row .ficha-val > span:last-child:not(.status-badge) { display: block; margin-top: 2px; }
/* En el córtex hay etiquetas largas («Arquitectura idiolectal»): casillas más anchas para que no se monten */
html[data-estilo="nuevo"] #infoModalBody > #fichaCortexCard { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
html[data-estilo="nuevo"] #infoModalBody .ficha-label { line-height: 1.3; }

/* F2c (09/11, petición del usuario): en «Composición de su forma de hablar» cada fila iba con la etiqueta a la
   izquierda y el valor al otro extremo (justify-content: space-between en línea, desde app.js). Ahora, juntos y a la
   izquierda en dos columnas alineadas; en el móvil, el valor debajo de su etiqueta. */
html[data-estilo="nuevo"] #fichaCortexCard [style*="justify-content: space-between"] {
    display: grid !important; grid-template-columns: 180px minmax(0, 1fr); gap: 4px 12px !important; align-items: baseline !important;
}
html[data-estilo="nuevo"] #fichaCortexCard [style*="justify-content: space-between"] > span { text-align: left !important; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) {
    html[data-estilo="nuevo"] #fichaCortexCard [style*="justify-content: space-between"] { grid-template-columns: 1fr; gap: 0 !important; }
}