/*
 * _tokens.css — Design Tokens (CSS Custom Properties)
 * FirmaYa / zappb
 *
 * CÓMO USAR:
 *   Reemplaza valores hardcodeados por estas variables en todos los archivos de componentes.
 *   Ejemplo: background-color: #222D8B  →  background-color: var(--color-primary)
 *
 * ESTRUCTURA:
 *   1. Tokens primitivos (brand, escala neutral, escala semántica)
 *   2. Tokens de alias / legacy (compatibilidad con CSS existente)
 *   3. Tokens de rol (tipografía, espaciado, radius, sombras, focus, transiciones)
 *
 * REGLA DE ORO:
 *   - Para estilos NUEVOS usar los tokens semánticos (--surface-*, --text-*, --border-*).
 *   - Los alias legacy (--color-primary, --color-bg, etc.) se mantienen para no
 *     romper los ~8.500 líneas de CSS existentes. No los elimines sin migrar primero.
 *
 * NOTA SOBRE TYPOS EN EL ORIGINAL:
 *   El application.css usa #00bad4, #00BAD4 y #00bdd6 como si fueran lo mismo.
 *   Aquí se unifican bajo --brand-cyan-500 (#00BAD4 canónico).
 */

:root {

  /* ============================================================
     1. TOKENS PRIMITIVOS — MARCA
     ============================================================
     Los dos colores de identidad de FirmaYa: azul marino + cyan.
     Se exponen como escalas para poder usarlos con propósito
     (hover, pressed, tints) sin inventar valores nuevos.
     ============================================================ */

  /* Azul marino — identidad primaria, títulos, navegación */
  --brand-navy-900:   #162F85;   /* pressed / hover fuerte */
  --brand-navy-800:   #182E8A;   /* gradientes oscuros */
  --brand-navy-700:   #222D8B;   /* canónico — títulos, íconos */
  --brand-navy-600:   #2E3BA4;   /* hover suave */
  --brand-navy-500:   #4752C4;
  --brand-navy-300:   #8A90C5;   /* etiquetas deshabilitadas */
  --brand-navy-100:   #EFEFFD;   /* fondos teñidos suaves */

  /* Cyan — acciones, CTAs, accents */
  --brand-cyan-700:   #0891A8;   /* AA-compliant para texto sobre blanco (4.7:1) */
  --brand-cyan-600:   #00A3BB;
  --brand-cyan-500:   #00BAD4;   /* canónico — botones sólidos */
  --brand-cyan-400:   #49B7D2;   /* secondary lt, bordes */
  --brand-cyan-300:   #66D9F5;   /* hover */
  --brand-cyan-200:   #BBF5FF;   /* badges, tints */
  --brand-cyan-100:   #EBF4F5;   /* fondos muy suaves */

  /* ============================================================
     1b. TOKENS PRIMITIVOS — ESCALA NEUTRAL MODERNA
     ============================================================
     Set de grises frío-neutral (tinte azul sutil) consistente.
     Reemplaza el popurrí de #898AB1, #8A8AB1, #50517D, #51517D,
     #DBDBDB, #d9d9d9, #E0E0EC, etc., del CSS original.
     ============================================================ */

  --neutral-0:    #FFFFFF;
  --neutral-50:   #F8F8FC;   /* fondo app */
  --neutral-75:   #F1F1F9;
  --neutral-100:  #F1F2F7;
  --neutral-200:  #E6E7EE;   /* separadores claros */
  --neutral-300:  #D6D8E2;   /* bordes estándar */
  --neutral-400:  #B0B3C4;
  --neutral-500:  #898AB1;   /* texto muted */
  --neutral-600:  #6B6C8E;
  --neutral-700:  #51517D;   /* texto secundario */
  --neutral-800:  #363653;
  --neutral-900:  #242E4C;   /* texto más oscuro */
  --neutral-950:  #0F1223;

  /* ============================================================
     1c. TOKENS PRIMITIVOS — ESCALA SEMÁNTICA (FEEDBACK)
     ============================================================
     Cada estado expone 3 valores útiles: bg (fondo suave),
     fg (texto/ícono), border (borde visible). Todos pasan WCAG AA.
     ============================================================ */

  /* Éxito — verde esmeralda */
  --success-50:   #E7F7EF;
  --success-500:  #16A34A;
  --success-700:  #15803D;

  /* Peligro / error — rojo carmín */
  --danger-50:    #FEE9EC;
  --danger-200:   #F8C5CE;   /* borders sutiles para botones ghost danger */
  --danger-300:   #EE8B9D;   /* hover border de los mismos */
  --danger-500:   #DB0632;
  --danger-600:   #B80425;
  --danger-700:   #8F031D;

  /* Advertencia — ámbar cálido */
  --warning-50:   #FFF7E5;
  --warning-500:  #F59E0B;
  --warning-700:  #B45309;

  /* Info — azul cielo */
  --info-50:      #E8F2FD;
  --info-500:     #2196F3;
  --info-700:     #1565C0;


  /* ============================================================
     2. ALIAS LEGACY — COMPATIBILIDAD HACIA ATRÁS
     ============================================================
     Estos nombres ya se usan en ~8.500 líneas de CSS existente.
     NO eliminar sin migrar los archivos que los consumen.
     Se redefinen aquí como alias de los tokens primitivos para
     mantener un único "source of truth".
     ============================================================ */

  /* Colores — paleta principal */
  --color-primary:          var(--brand-navy-700);
  --color-primary-dark:     var(--brand-navy-900);
  --color-primary-deeper:   var(--brand-navy-800);

  --color-secondary:        var(--brand-cyan-500);
  --color-secondary-lt:     var(--brand-cyan-400);
  --color-secondary-hover:  var(--brand-cyan-300);
  --color-secondary-pale:   var(--brand-cyan-200);
  --color-secondary-tint:   var(--brand-cyan-100);

  /* Colores — neutros / fondos */
  --color-bg:               var(--neutral-50);
  --color-bg-white:         var(--neutral-0);
  --color-bg-subtle:        var(--brand-navy-100);
  --color-bg-muted:         #EDEDF1;

  /* Colores — texto */
  --color-text-primary:     var(--brand-navy-700);
  --color-text-dark:        var(--neutral-900);
  --color-text-mid:         var(--neutral-700);
  --color-text-muted:       var(--neutral-500);
  --color-text-light:       var(--brand-navy-300);

  /* Colores — bordes */
  --color-border:           var(--neutral-300);
  --color-border-lt:        rgba(237, 234, 234, 0.54);
  --color-border-mid:       #D6D6D6;

  /* Colores — estado / feedback (legacy — nuevos estilos deben usar --success-*, --danger-*, etc.) */
  --color-error:            var(--danger-500);
  --color-error-strong:     #F52516;
  --color-warning:          #F7E93D;
  --color-warning-orange:   #FFA500;
  --color-info:             var(--info-500);
  --color-success:          var(--brand-cyan-500);   /* LEGACY: original usa cyan como success */
  --color-gold:             #FFD700;
  --color-pink-debug:       #FF1493;

  /* Colores — overlays */
  --color-dark-bg:          #021A1C;
  --color-overlay:          rgba(0, 0, 0, 0.2);
  --color-overlay-lt:       rgba(0, 0, 0, 0.14);
  --color-overlay-xs:       rgba(0, 0, 0, 0.12);
  --color-overlay-dark:     rgba(14, 12, 12, 0.8);
  --color-overlay-teal:     rgb(0, 74, 103);


  /* ============================================================
     3. TOKENS DE ROL SEMÁNTICOS (NUEVOS — usar en estilos nuevos)
     ============================================================
     Mapean intención de uso a valores primitivos.
     Ejemplo: `background: var(--surface-raised);` comunica más que
     `background: var(--neutral-0);`.
     ============================================================ */

  /* Superficies */
  --surface-app:        var(--neutral-50);    /* fondo de la app */
  --surface-raised:     var(--neutral-0);     /* cards, modales */
  --surface-sunken:     var(--neutral-100);   /* áreas deprimidas, inputs readonly */
  --surface-overlay:    rgba(15, 18, 35, 0.55);  /* backdrop de modales */

  /* Texto */
  --text-strong:        var(--neutral-900);   /* cuerpo principal */
  --text-default:       var(--neutral-700);   /* cuerpo secundario */
  --text-muted:         var(--neutral-500);   /* placeholders, hints */
  --text-on-brand:      var(--neutral-0);     /* texto sobre fondo de marca */
  --text-brand:         var(--brand-navy-700);
  --text-link:          var(--brand-cyan-700);  /* AA-compliant sobre blanco */

  /* Bordes */
  --border-subtle:      var(--neutral-200);
  --border-default:     var(--neutral-300);
  --border-strong:      var(--neutral-400);
  --border-focus:       var(--brand-cyan-500);


  /* ============================================================
     4. TIPOGRAFÍA
     ============================================================
     Desde la segunda ronda de modernización, la familia base es
     'Plus Jakarta Sans' (display humanista, 8 pesos, letter-spacing
     negativo amigable). 'Open Sans' se mantiene como fallback/legacy
     disponible por compatibilidad.
     ============================================================ */

  --font-family-display:    'Plus Jakarta Sans', 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-family-base:       'Plus Jakarta Sans', 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-family-legacy:     'Open Sans', sans-serif;
  --font-family-system:     system-ui, sans-serif;

  /* Escala de tamaños */
  --text-xs:    9px;
  --text-sm:   12px;
  --text-base: 14px;    /* tamaño más frecuente */
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  28px;
  --text-4xl:  32px;

  /* Encabezados de vistas */
  --text-display-sm:  25px;
  --text-display-md:  30px;
  --text-display-lg:  40px;
  --text-display-xl:  48px;  /* hero titles auth split */
  --text-display-2xl: 56px;  /* hero del brand panel */

  /* Pesos */
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-extra:    800;

  /* Line heights */
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing — ajustes tipográficos modernos */
  --tracking-tight:   -0.02em;    /* hero/display */
  --tracking-snug:    -0.01em;    /* títulos medianos */
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-widest:  0.12em;     /* eyebrows / labels mayúsculas */


  /* ============================================================
     5. ESPACIADO
     ============================================================ */

  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;


  /* ============================================================
     6. BORDES — RADIUS
     ============================================================ */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:  14px;   /* dominante en cards/inputs */
  --radius-xl:  16px;
  --radius-2xl: 20px;
  --radius-pill: 25px;  /* botones pill — patrón dominante */
  --radius-full: 50%;   /* círculos / switches legacy */
  --radius-round: 9999px;  /* pills infinitos (para badges modernos) */


  /* ============================================================
     7. SOMBRAS — ELEVACIÓN
     ============================================================
     Escala de elevación moderna (más sutil que el original).
     Los shadows legacy siguen disponibles para CSS existente.
     ============================================================ */

  /* Nuevos — escala de elevación */
  --elevation-0:  none;
  --elevation-1:  0 1px 2px rgba(15, 18, 35, 0.06),
                  0 1px 3px rgba(15, 18, 35, 0.08);
  --elevation-2:  0 2px 4px rgba(15, 18, 35, 0.06),
                  0 4px 8px rgba(15, 18, 35, 0.08);
  --elevation-3:  0 4px 8px rgba(15, 18, 35, 0.08),
                  0 12px 24px rgba(15, 18, 35, 0.12);
  --elevation-4:  0 8px 16px rgba(15, 18, 35, 0.10),
                  0 24px 48px rgba(15, 18, 35, 0.16);

  /* Legacy (mantenidos por compatibilidad) */
  --shadow-md:  0 2px 2px 0 rgba(0, 0, 0, 0.2),
                0 3px 1px -2px rgba(0, 0, 0, 0.14),
                0 1px 5px 0 rgba(0, 0, 0, 0.12);
  --shadow-lg:  0 6px 6px 3px rgba(0, 0, 0, 0.14);
  --shadow-sm:  0 0 10px rgba(0, 0, 0, 0.2);


  /* ============================================================
     8. FOCUS RING — ACCESIBILIDAD (WCAG 2.4.7)
     ============================================================
     Usar en :focus-visible de elementos interactivos nuevos.
     ============================================================ */

  --focus-ring-color:   var(--brand-cyan-500);
  --focus-ring-width:   2px;
  --focus-ring-offset:  2px;
  --focus-ring:         0 0 0 var(--focus-ring-offset) var(--surface-raised),
                        0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);


  /* ============================================================
     9. TRANSICIONES
     ============================================================ */

  --transition-fast:   0.15s ease;
  --transition-base:   0.3s ease;
  --transition-slow:   0.5s ease;
  --transition-slower: 0.7s ease;

  /* Duración pura (sin easing). Usar en shorthands de animation que
     combinan con un easing propio: los tokens --transition-* incluyen
     "ease" y al sumarles otro easing la declaración queda inválida. */
  --duration-base: 0.3s;

  /* Easings */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);


  /* ============================================================
     10. Z-INDEX — CAPAS
     ============================================================ */

  --z-base:     1;
  --z-above:    2;
  --z-sticky:   3;
  --z-dropdown: 100;
  --z-tooltip:  1000;
  --z-modal:    9999;
  --z-toast:    10000;


  /* ============================================================
     11. BREAKPOINTS (referencia documental)
     ============================================================
     No se pueden usar en @media con var() — son solo referencia.
     Convención: mobile-first, min-width.

     --bp-sm:   480px   (móvil grande)
     --bp-md:   768px   (tablet)
     --bp-lg:  1024px   (laptop)
     --bp-xl:  1440px   (desktop)
     --bp-2xl: 1840px   (ultra-wide)
     ============================================================ */
}


/* ============================================================
   REDUCED MOTION — preferencia de usuario
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast:   0.01ms;
    --transition-base:   0.01ms;
    --transition-slow:   0.01ms;
    --transition-slower: 0.01ms;
    --duration-base:     0.01ms;
  }
}


/* ============================================================
   V11.1 — Dark mode token overrides
   ============================================================
   Se redefinen ÚNICAMENTE los tokens semánticos (surface, text,
   border, elevation). Los primitivos brand permanecen idénticos
   en ambos temas para preservar identidad visual.

   Mecanismo: <html data-theme="dark"> se aplica vía Stimulus
   theme_controller, o por script anti-FOUC en <head>.
   ============================================================ */

[data-theme="dark"] {
  /* === Surfaces === */
  --surface-app:     #0E1024;   /* navy muy oscuro casi negro — fondo página */
  --surface-raised:  #1A1D3A;   /* navy oscuro — cards, modales, dropdowns */
  --surface-sunken:  #080A1B;   /* navy más oscuro que app — wells, inputs */
  --surface-overlay: rgba(8, 10, 27, 0.72);  /* scrim de modales */

  /* === Texto === */
  --text-strong:  #F5F5FB;   /* títulos, labels — alto contraste */
  --text-default: #C8C9E1;   /* cuerpo — buen contraste */
  --text-muted:   #898AB1;   /* subtítulos, helpers — mantiene neutral-500 */
  --text-link:    #66D9F5;   /* cyan-300 — más legible en dark que cyan-700 */
  --text-brand:   #C4C8FF;   /* navy-300 invertido — para títulos con identidad */
  --text-inverse: #182E8A;   /* navy-800 — texto sobre fondos cyan/claros */

  /* === Borders === */
  --border-subtle:  rgba(245, 245, 251, 0.08);   /* separadores discretos */
  --border-default: rgba(245, 245, 251, 0.16);   /* inputs, cards neutros */
  --border-strong:  rgba(245, 245, 251, 0.28);   /* divisores fuertes */
  --border-focus:   var(--brand-cyan-500);       /* cyan canónico, intacto */

  /* === Elevation === */
  /* En dark mode las sombras se vuelven menos visibles. Compensar
     con bordes sutiles claros + sombras más oscuras (casi negras). */
  --elevation-1: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px rgba(0,0,0,.40);
  --elevation-2: 0 2px 4px rgba(0,0,0,.30), 0 4px 8px rgba(0,0,0,.40);
  --elevation-3: 0 4px 8px rgba(0,0,0,.35), 0 12px 24px rgba(0,0,0,.50);
  --elevation-4: 0 8px 16px rgba(0,0,0,.40), 0 24px 48px rgba(0,0,0,.60);

  /* === Shadows legacy (compat) === */
  --shadow-sm: 0 0 10px rgba(0,0,0,.45);
  --shadow-md: 0 2px 2px rgba(0,0,0,.40), 0 3px 1px -2px rgba(0,0,0,.30), 0 1px 5px rgba(0,0,0,.25);
  --shadow-lg: 0 6px 6px 3px rgba(0,0,0,.35);

  /* === Color-scheme nativo del browser ===
     Hace que scrollbars, form controls nativos no estilados,
     y autofill respeten el tema oscuro. */
  color-scheme: dark;
}

/* ============================================================
   V11.6c — Body color dark fix de raíz
   ============================================================
   Cierra tech debt V11.9 item #1 (body { color: #000 } en
   base/reset.css:41).

   Sin este override, todo elemento que herede color del body en
   dark mostraba #000 ilegible. Hasta V11.5h se parcheaba con
   overrides scoped por componente:
     - Hallazgo H2 .account-card V11.2 (dashboard_modern.css:2610)
     - Hallazgo H5 .home-hero__greeting V11.2 (home_modern.css:734)
     - ~29 wrappers del paso 3 wizard (V11.6c QA path) que heredaban
       silenciosamente #000 sin afectar UI directa (text nodes
       propios ya estilizados).

   QA exhaustivo confirmó cero competidores:
     - Solo 1 regla del bundle declara color:#000 explícito
       (base/reset.css:41 — el target). El resto son comments.
     - base/accessibility.css:147 también es color:#000 pero vive
       dentro de @media print → no afecta pantalla.
     - Cero text nodes con color:#000 declarado propio.
     - 14 reglas con color: inherit cascading correctamente —
       heredarán --text-default automáticamente.

   Specificity: [data-theme="dark"] body = [0,1,1] vence al
   legacy body [0,0,1]. Sin !important.

   Los overrides defensivos previos quedan redundantes:
     - dashboard_modern.css:2610-2612 (.account-card)
     - home_modern.css:734-735 (.home-hero__greeting)
   NO se remueven en V11.6c (scope creep). Cleanup futuro V11.9.x
   o V12. Quedan inocuos: aplican el mismo valor que ahora hereda
   del body.

   NO afecta light: el override solo aplica cuando
   <html data-theme="dark">. Light sigue body { color: #000 }
   legacy (intencional — el cleanup global del legacy es V11.9+).

   NO afecta @media print: la regla print body { color: #000 }
   en accessibility.css:147 sigue ganando cuando aplica el media.
   ============================================================ */
[data-theme="dark"] body {
  color: var(--text-default);
}


/* Light theme explícito — cuando el usuario eligió Claro de forma
   explícita. Sin selector = light por default (los tokens originales
   en :root ya son light). Este bloque solo agrega color-scheme nativo. */
[data-theme="light"] {
  color-scheme: light;
}
/*
 * _reset.css — Reset y estilos base globales
 * FirmaYa / zappb
 *
 * Contiene: box-sizing, html/body base, elementos HTML desnudos
 * (label, select, input, h3, svg), clases utilitarias de visibilidad.
 *
 * MIGRADO DESDE application.css — líneas ~26–88
 * Al aplicar este archivo, comentar/eliminar esos bloques del archivo legacy.
 */

/* ============================================================
   BOX MODEL
   ============================================================ */

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


/* ============================================================
   HTML / BODY
   ============================================================ */

html {
    overflow-x: hidden;
}

body {
    font-family: var(--font-family-base);
    margin: 0;
    padding: 0;
    overflow: auto;
    height: auto;
    min-height: 100vh;
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    color: #000;
    transition: background-color var(--transition-base);
}

/* Ocultar scrollbar globalmente (diseño intencional del original) */
body::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}


/* ============================================================
   ELEMENTOS HTML BASE
   ============================================================ */

label {
    font-size: var(--text-xl);   /* 20px */
    color: #fff;
}

select {
    font-size: var(--text-lg);   /* 18px */
    color: var(--color-text-dark);
    appearance: none;

    &:focus-visible {
        outline: none;
    }
}

input:focus-visible {
    outline: none;
}

h3 {
    color: var(--color-primary);
    font-size: var(--text-4xl);   /* 32px */
}

/* Inline SVG (helper de Rails para SVGs inline) */
svg.svg {
    display: inline-block;
    flex-shrink: 0;
    width: 1em;
    height: 1em;
}

/* V11.7a — Videos con border-radius del DS (cards estándar).
   Aplica a TODOS los <video> del producto. Specificity (0,0,1) —
   la regla .pdf-container .modal-pdf-firma.mensaje-firmado video
   (sign_position_modern.css:735, [0,3,0]) mantiene radius-md por
   contexto modal interno (#iconoFirmado sigue en 8px).
   Para `#upload-animation video` (legacy nested [1,2,1] con
   border-radius: 10px en sign.css:589-594), ver override scoped
   complementario en sign_position_modern.css bloque V11.7a — el
   global no lo pisa por specificity.

   V11.7a-bis — display: inline-block requerido para que
   overflow: hidden clipee el bitmap. <video> es display: inline
   por default en HTML y overflow no aplica en cajas inline (regla
   CSS fundamental, no bug del browser). QA Chrome MCP visual
   detectó el bug post-V11.7a: computed style mostraba
   border-radius: 14px + overflow: hidden correctos, pero el
   bitmap del MP4 (con fondo blanco) sobresalía con esquinas
   cuadradas porque <video> seguía como caja inline.

   inline-block (no block) elegido para preservar el flujo inline
   del elemento (sin line-break forzado antes/después) y habilitar
   el contexto de bloque necesario para el clipping. Reglas
   preexistentes que declaran display: block específico (modal
   .mensaje-firmado video con !important, sub-ciclo wizard
   .pdf-container ..., etc.) ganan por specificity natural sin
   regresión. */
video {
    display: inline-block;
    border-radius: var(--radius-lg);
    overflow: hidden;
}


/* ============================================================
   UTILIDADES DE VISIBILIDAD
   (usadas por Stimulus vía data-classes)
   ============================================================ */

.noVisibility {
    visibility: hidden;
    opacity: 0;
}

.visibilityElement {
    visibility: visible;
    opacity: 1;
}

/* !important intencional — clase de utilidad de override fuerte */
.noDisplay {
    display: none !important;
}

/* Propiedades adicionales del original (max-width, line-height, use{}) */
svg.svg {
    max-width: initial;
    line-height: 1;
    color: currentColor;

    use {
        fill: currentColor;
        stroke: currentColor;
    }
}
/*
 * base/accessibility.css — Utilidades de accesibilidad globales
 * FirmaYa / zappb
 *
 * Carga temprano en el manifest (después de tokens + reset).
 * No depende de ninguna feature exclusiva; solo usa tokens.
 */

/* ============================================================
   1. SR-ONLY — texto para lectores de pantalla, invisible visualmente
   ============================================================
   Uso:
     <span class="sr-only">Icono decorativo</span>
     <span class="sr-only sr-only--focusable">Saltar a contenido</span>
   ============================================================ */

.sr-only,
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Variante que se hace visible al recibir foco (ej. skip links) */
.sr-only--focusable:focus,
.sr-only--focusable:focus-visible,
.visually-hidden--focusable:focus,
.visually-hidden--focusable:focus-visible {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: var(--space-2) var(--space-4) !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}


/* ============================================================
   2. FOCUS-VISIBLE GLOBAL — garantía mínima de foco visible
   ============================================================
   Todo elemento interactivo sin estilo de foco propio obtiene el ring.
   Elementos con foco custom ya definen el suyo y se imponen por cascada.
   ============================================================ */

/* Fallback — algunos navegadores antiguos solo soportan :focus */
:focus {
  outline: 2px solid var(--focus-ring-color, #00BAD4);
  outline-offset: 2px;
}

/* Preferencia moderna — oculta outline si el foco viene de un click */
:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* Foco de teclado — aplica en todo elemento tabbable que no tenga ya un estilo de foco */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[role="menuitem"]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}


/* ============================================================
   3. TARGET SIZE — mínimo 24x24px para elementos interactivos (WCAG 2.5.8)
   ============================================================
   Aplicado como padding mínimo a links y botones ícono.
   ============================================================ */

.interactive-hit-area {
  min-width: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* ============================================================
   4. COLOR NO SOLE INDICATOR — asegurar que estados no usen solo color
   ============================================================
   Casos donde el foco/error/success no deben depender del color
   únicamente. Si el CSS usa solo color, añadir icon/underline/border.
   ============================================================ */

[aria-invalid="true"]:not(.form-field__input) {
  box-shadow: inset 0 0 0 2px var(--danger-500);
}


/* ============================================================
   5. LANDMARK ROLES — visibilidad cuando se activa modo accesible
   ============================================================
   Útil durante audits. Desactivado por defecto.
   Activa con: <html class="debug-a11y">
   ============================================================ */

.debug-a11y main,
.debug-a11y [role="main"]   { outline: 2px dashed var(--success-500); }
.debug-a11y nav,
.debug-a11y [role="navigation"] { outline: 2px dashed var(--info-500); }
.debug-a11y aside,
.debug-a11y [role="complementary"] { outline: 2px dashed var(--warning-500); }
.debug-a11y header,
.debug-a11y [role="banner"] { outline: 2px dashed var(--brand-cyan-500); }
.debug-a11y footer,
.debug-a11y [role="contentinfo"] { outline: 2px dashed var(--brand-navy-700); }

.debug-a11y img:not([alt]) {
  outline: 3px solid var(--danger-500);
}

.debug-a11y button:not([aria-label]):not(:has(span:not(:empty))):empty,
.debug-a11y a:not([aria-label]):not(:has(span:not(:empty))):empty {
  outline: 3px solid var(--danger-500);
}


/* ============================================================
   6. PRINT — ocultar elementos decorativos
   ============================================================ */

@media print {
  .skip-link,
  .toast-stack,
  .loading-overlay,
  .headerFirma .menu-icon,
  .footerFirma { display: none !important; }

  body { background: #fff; color: #000; }
  .card, .account-card { box-shadow: none; border: 1px solid #ccc; }
}


/* ============================================================
   7. HIGH CONTRAST — reforzar bordes cuando el usuario lo pide
   ============================================================ */

@media (prefers-contrast: more) {
  .btn { border: 2px solid currentColor; }
  .form-field__input { border-width: 2px; }
  .card, .account-card { border-width: 2px; }
}


/* ============================================================
   8. FORCED COLORS (Windows High Contrast)
   ============================================================ */

@media (forced-colors: active) {
  .btn,
  .form-field__input,
  .card,
  .toast {
    border: 1px solid CanvasText;
  }
  .btn--primary,
  .btn--secondary { background: Highlight; color: HighlightText; }
}
/*
 * _alerts.css — Sistema de alertas
 * FirmaYa / zappb
 *
 * Estructura: .alert-default (base oculta) + variantes .alert-error,
 * .alert-warn, .alert-notice que la hacen visible con color de borde propio.
 *
 * Uso en vistas:
 *   <div class="alert-default alert-error">
 *     <i class="fas fa-exclamation-triangle"></i>
 *     <i class="fas fa-times-circle"></i>   ← botón cerrar
 *     <p>Mensaje de error</p>
 *   </div>
 *
 * MIGRADO DESDE application.css — líneas ~1905–1958
 * Al aplicar este archivo, comentar/eliminar esos bloques del archivo legacy.
 */

/* ============================================================
   BASE — oculta por defecto, muestra con variante
   ============================================================ */

.alert-default {
    display: none;
    gap: 12px;
    margin: 12px;
    border-radius: var(--radius-md);    /* 8px */
    color: #16325e;
    font-weight: 600;
    flex-direction: column;
    align-items: center;
    background: var(--color-bg-white);
    padding: 12px 25px;
    position: absolute;
    box-shadow: 8px 6px 6px 3px var(--color-overlay-lt);

    /* Ícono principal — parpadea para llamar la atención */
    .fas.fa-exclamation-triangle, .fa-check-circle, .fa-info-circle {
        font-size: var(--text-display-sm);   /* 25px */
        animation: alert-blink 1s infinite;
    }

    /* Botón de cierre — esquina superior derecha */
    .fas.fa-times-circle {
        position: absolute;
        right: 5px;
        top: 5px;
        cursor: pointer;
    }
}

@keyframes alert-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}


/* ============================================================
   VARIANTES
   ============================================================ */

/* Error — borde rojo, ícono rojo */
.alert-error {
    display: flex;
    border: 2px solid var(--color-error-strong);

    .fas.fa-exclamation-triangle {
        color: var(--color-error-strong);
    }
}

/* Advertencia — borde amarillo, ícono amarillo */
.alert-warn {
    display: flex;
    border: 2px solid var(--color-warning);

    .fas.fa-exclamation-triangle {
        color: var(--color-warning);
    }
}

/* Informativa — borde azul info, ícono azul */
.alert-notice {
    display: flex;
    border: 2px solid var(--color-info);

    .fas.fa-exclamation-triangle {
        color: var(--color-info);
    }
}


/* ============================================================
   ALERT MODERNA — in-flow, con tokens semánticos
   ============================================================
   Para usar en contenido de página (no flash modal-like).
   Uso: <%= render 'shared/alert', variant: :success, message: '...' %>
   Estructura: .alert + .alert--<variant>
   ============================================================ */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border-left: 4px solid;
  font-family: var(--font-family-base);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-default);
}

.alert__icon {
  flex-shrink: 0;
  font-size: var(--text-lg);
  line-height: 1;
  margin-top: 2px;
}

.alert__body {
  flex: 1;
  min-width: 0;
}

.alert__title {
  margin: 0 0 var(--space-1);
  font-size: var(--text-md);
  font-weight: var(--font-weight-semibold);
  color: var(--text-strong);
}

.alert__message { margin: 0; }

.alert__close {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px;
  border-radius: var(--radius-sm);
  font-size: var(--text-md);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.alert__close:hover { color: var(--text-strong); background: rgba(0, 0, 0, 0.04); }
.alert__close:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Variantes */
.alert--success { background: var(--success-50); border-color: var(--success-500); }
.alert--success .alert__icon,
.alert--success .alert__title { color: var(--success-700); }

.alert--danger  { background: var(--danger-50);  border-color: var(--danger-500); }
.alert--danger  .alert__icon,
.alert--danger  .alert__title { color: var(--danger-700); }

.alert--warning { background: var(--warning-50); border-color: var(--warning-500); }
.alert--warning .alert__icon,
.alert--warning .alert__title { color: var(--warning-700); }

.alert--info    { background: var(--info-50);    border-color: var(--info-500); }
.alert--info    .alert__icon,
.alert--info    .alert__title { color: var(--info-700); }

/*
 * components/badges.css — Badge / Pill
 * FirmaYa / zappb
 *
 * Uso (partial):
 *   <%= render 'shared/badge', label: 'Firmado', variant: :success %>
 *
 * Variantes: default, brand, info, success, warning, danger, neutral
 * Tamaños: sm (default), md
 */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px 10px;
  border-radius: var(--radius-round);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-tight);
  white-space: nowrap;
  font-family: var(--font-family-base);
  background: var(--neutral-200);
  color: var(--text-default);
}

.badge--md {
  padding: 4px 12px;
  font-size: var(--text-base);
}

.badge i,
.badge .fa {
  font-size: 0.85em;
}

/* Variantes por estado */
.badge--brand   { background: var(--brand-cyan-100); color: var(--brand-cyan-700); }
.badge--info    { background: var(--info-50);    color: var(--info-700); }
.badge--success { background: var(--success-50); color: var(--success-700); }
.badge--warning { background: var(--warning-50); color: var(--warning-700); }
.badge--danger  { background: var(--danger-50);  color: var(--danger-700); }
.badge--neutral { background: var(--neutral-100); color: var(--neutral-700); }

/* Variante sólida — para CTAs dentro de contenido */
.badge--solid-brand   { background: var(--brand-navy-700); color: var(--text-on-brand); }
.badge--solid-success { background: var(--success-500); color: #fff; }
.badge--solid-danger  { background: var(--danger-500);  color: #fff; }

/* Dot/status — badge con círculo indicador */
.badge__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: currentColor;
  flex-shrink: 0;
}
/*
 * _buttons.css — Componente de Botones
 * FirmaYa / zappb
 *
 * ORGANIZACIÓN:
 *   1. Base compartida (btn-base)
 *   2. Variantes de color/estilo
 *   3. Variantes de tamaño
 *   4. Botones específicos por contexto
 *   5. Estados (hover, disabled, activo)
 *
 * MIGRACIÓN DESDE application.css:
 *   Las clases aquí definidas reemplazan definiciones dispersas en las
 *   siguientes líneas del archivo original (para búsqueda/diff):
 *   ~590, ~664, ~2113, ~2830, ~5290-5360, ~4490-4540, ~4318
 *
 * PREREQUISITO: base/_tokens.css debe cargarse antes que este archivo.
 */


/* ============================================================
   1. BASE COMPARTIDA
   ============================================================
   Todos los botones de la app comparten esta estructura base.
   Las variantes sólo sobreescriben lo necesario.
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 30px;
  min-width: 100px;
  height: 40px;
  border: none;
  border-radius: var(--radius-md);     /* 8px — rectangular con leve rounding, matchea los CTAs del login */
  font-family: var(--font-family-base);
  font-size: var(--text-md);           /* 16px */
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  background-color: transparent;       /* reset del gris nativo de <button> */
  transition: background-color var(--transition-base),
  box-shadow var(--transition-base);

  /* estado disabled (incluye aria-busy="true" para loading states de
     Turbo — V8.4 defensa: previene que hover lift de variantes
     accionables se dispare mientras el botón está procesando). */
  &:disabled,
  &[aria-disabled="true"],
  &[aria-busy="true"] {
    background-color: var(--color-border);   /* #d9d9d9 */
    color: #fff;
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;
  }

  &:hover{
    box-shadow: var(--shadow-md);
  }
}



/* ============================================================
   2. VARIANTES DE COLOR / ESTILO
   ============================================================ */

/* --- btn--primary (navy sólido) ----------------------------
   Uso: acción principal del flujo ("Continuar", "Iniciar sesión",
   "Cambiar contraseña", etc.).
   Clases originales consolidadas:
     #continueButton, #sendDocument, .btn-confirmar,
     .btn-adquirirFirma, .btn-foward, #btnContinuar,
     #confirmarFirma, .btn-finalizar
   ---------------------------------------------------------- */
.btn--primary {
  background-color: var(--brand-navy-800);     /* #182E8A */
  color: #fff;
  box-shadow: var(--shadow-md);

  /* V8.4: hover lift unificado para variantes accionables del DS.
     translateY(-1px) consistente con .btn--outline y los overrides
     puntuales del codebase. El :active inverso (translateY(0)
     scale(0.97)) ya está definido en microinteractions.css L315. */
  &:hover {
    background-color: var(--brand-navy-500);   /* #4752C4 */
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
  }
}

/* --- btn--secondary (navy sólido — matchea btn--primary) ---------
   Usado por "Continuar" del wizard de firma (paso 1 upload, paso 2
   add_signers) y otros CTAs de continuación. Se alinea visualmente
   con btn--primary (navy-800 / hover navy-500) para que toda la
   acción "Continuar" del sitio sea del mismo color.
   Clases originales consolidadas:
     .btn-continuarRegistro, .btn-continuarDatos,
     .btn-crearCuenta, .btn-validarCVE, .btn-validarPDF,
     .btn-confirmar.btn-omitir-registrarse,
     .upload-button, #addMoreButton,
     #signature-controls button, .btn-registrar, .btn-iniciar,
     .loginSection, .google-login-button (base shape — ver abajo)
   ---------------------------------------------------------- */
.btn--secondary {
  background-color: var(--brand-navy-800);     /* #182E8A */
  color: #fff !important;
  box-shadow: var(--shadow-md);

  /* V8.4: hover lift unificado — antes de V8.4, .btn--secondary
     era la única variante accionable visible que NO levantaba en
     hover, generando inconsistencia con .btn--outline (Atrás) y
     .btn--primary (modales) en footers como /sign/add_signers. */
  &:hover {
    background-color: var(--brand-navy-500);   /* #4752C4 */
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
  }
}

/* --- btn--outline (borde neutro, fondo blanco — design system moderno) ----
   Uso: botón "Volver", "Atrás", "No", "Cancelar"
   Clases originales consolidadas:
     button#backButton, .btn-no, .btn-back,
     .btn-retrocederDatos, .btn-changePass
   NOTA: migrado de borde cyan sólido (legacy) a borde gris neutro
   para consistencia con el design system. El hover cyan-400 aporta
   el accent al interactuar. Los modales de firma (sign_position_modern.css)
   tienen overrides específicos si necesitan otro estilo.
   ---------------------------------------------------------- */
.btn--outline {
  background-color: var(--surface-raised);
  border: 1px solid var(--border-default);
  color: var(--text-strong);
  box-shadow: none;

  &:hover {
    border-color: var(--brand-cyan-400);
    box-shadow: 0 2px 6px rgba(15, 18, 35, 0.06);
    transform: translateY(-1px);
  }
}

/* --- btn--outline-primary (borde azul marino) --------------
   Uso: acciones secundarias sobre fondo blanco, "Enviar documento"
   Clases originales consolidadas:
     button.enviarDocumento, .btn-seleccionar, .btn-agregar,
     .upload-button (variante), #addMoreButton (variante),
     .btn-validar (base)
   ---------------------------------------------------------- */
.btn--outline-primary {
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  font-weight: 400;
  box-shadow: none;

  &:hover {
    box-shadow: var(--shadow-md);
  }

  /* variante activa — seleccionada en toggle */
  &.is-active {
    background-color: var(--color-primary);
    color: #fff;
    font-weight: 600;
  }

  /* variante deshabilitada visible (aún en DOM, sin interacción) */
  &.is-disabled {
    border-color: var(--color-border);
    color: var(--color-border);
    cursor: default;
  }
}

/* --- btn--ghost (solo texto, sin borde ni fondo) -----------
   Uso: "Editar", links dentro de tablas, acciones terciarias
   Clases originales: button#btnEditar, botones en .btns-pdf
   ---------------------------------------------------------- */
.btn--ghost {
  background-color: transparent;
  border: none;
  color: var(--color-primary-deeper);    /* #182e8a */
  font-weight: 600;
  box-shadow: none;
  padding: 4px 8px;
  min-width: unset;

  /* versión con subrayado (patrón original en .btns-pdf) */
  &.btn--ghost-underline {
    border-bottom: 1px solid var(--color-primary-deeper);
    border-radius: 0;
    padding-bottom: 2px;
  }

  &:hover {
    color: var(--color-secondary);
  }
}

/* --- btn--ghost.btn--danger (acción destructiva secundaria) ----
   Variante sutil para acciones destructivas que NO deben competir
   visualmente con la acción segura primaria. Caso de uso:
   /desactivate_account donde "Sí, dar de baja mi cuenta" debe ser
   visualmente menos prominente que "No, volver al inicio".

   Default: transparent + border danger-200 visible (sutil pero
   reconocible como botón) + texto danger-700.
   Hover: bg rosado MUY tenue (danger-50) + border danger-300.
   Focus-visible: ring danger consistente con el DS.

   V7.1.1: default border cambiado de transparent a var(--danger-200)
   tras QA — sin border el botón se veía como etiqueta de texto rojo
   flotante, el usuario podía no darse cuenta que era presionable.
   Además min-width 180px + font-size 14px para equiparar al primario
   y reforzar la lectura como botón (la jerarquía con .btn--primary
   se mantiene clara porque el primario sigue siendo navy sólido).
   ---------------------------------------------------------- */
.btn--ghost.btn--danger,
.btn--danger.btn--ghost {
  background-color: transparent;
  border: 1px solid var(--danger-200);
  color: var(--danger-700);
  font-weight: 600;
  font-size: 14px;
  min-width: 180px;
  box-shadow: none;

  &:hover {
    background-color: var(--danger-50);
    border-color: var(--danger-300);
    color: var(--danger-700);
  }

  &:active {
    background-color: rgba(219, 6, 50, 0.10);
    color: var(--danger-700);
  }

  &:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(219, 6, 50, 0.25);
  }

  &:disabled,
  &[disabled],
  &[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
  }

  &:disabled:hover,
  &[disabled]:hover,
  &[aria-disabled="true"]:hover {
    background-color: transparent;
    border-color: var(--danger-200);
  }
}

/* --- btn--logout (nav header) ------------------------------
   Clase original: .btn-logout
   ---------------------------------------------------------- */
.btn--logout {
  background-color: transparent;
  border: none;
  color: inherit;
  font-size: var(--text-md);
  padding: 0;
  min-width: unset;
  height: auto;
  box-shadow: none;
  cursor: pointer;

  i.fas {
    color: var(--color-secondary);
  }
}

/* --- btn--oauth (botón OAuth / Google / redes) -------------
   Clase original: .google-login-button
   ---------------------------------------------------------- */
.btn--oauth {
  width: 100%;
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-border-mid);    /* #ddd */
  color: var(--color-text-muted);               /* #8A8AB1 */
  font-weight: 400;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  padding: 0 15px;

  .google-icon,
  .twitter-icon,
  .facebook-icon,
  .outlook-icon {
    height: 20px;
    flex-shrink: 0;
  }

  .facebook-icon {
    height: 33px;
  }

  span.text-google {
    font-size: var(--text-md);
    color: var(--color-text-muted);
    font-weight: 400;
    padding-left: 6px;
  }

  &:hover {
    background-color: #f5f5f5;
  }
}


/* ============================================================
   3. VARIANTES DE TAMAÑO
   ============================================================ */

/* Tamaño pequeño — iconos, acciones inline */
.btn--sm {
  padding: 4px 20px;
  height: 35px;
  font-size: var(--text-base);    /* 14px */
  min-width: unset;
  border-radius: var(--radius-2xl);  /* 20px */
}

/* Tamaño grande — CTAs importantes */
.btn--lg {
  padding: 12px 40px;
  height: 48px;
  font-size: var(--text-lg);     /* 18px */
}

/* Ancho completo */
.btn--full {
  width: 100%;
}

/* Ancho fijo compacto — modales de confirmación */
.btn--fixed {
  width: 136px;
  padding: 8px;
}

/* Ancho fijo mediano — wizard steps, navegación de cuenta */
.btn--fixed-md {
  min-width: 140px;
  padding: 8px;
}


/* ============================================================
   4. BOTONES ESPECÍFICOS POR CONTEXTO
   ============================================================
   Estos son botones con nombres semánticos propios del dominio
   que combinan variante + tamaño + comportamiento especial.
   ============================================================ */

/* Botón "Iniciar sesión" (header + modal) */
.btn-iniciar {
  font-size: var(--text-base);    /* 14px — más pequeño que el resto */

  .fas.fa-user {
    font-size: var(--text-base);
  }
}

/* Botón "Registrarse" (header) */
.btn-registrar {
  height: 35px;
  font-size: var(--text-base);
  padding: 1px 16px;

  i.fas.fa-user {
    margin-right: 5px;
    font-size: var(--text-base);
  }
}

/*Btn comprar firma o cambiar plan*/
.btn-upgrade{
  background: linear-gradient(135deg, var(--brand-cyan-600) 0%, var(--brand-cyan-500) 100%);
  color: #fff;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.btn-upgrade:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px rgba(0, 186, 212, 0.5);
  background: linear-gradient(135deg, var(--brand-cyan-500) 0%, var(--brand-cyan-400) 100%);
}

/* Contenedor de botones de wizard (subir documentos) */
.btnContainer-subirDocumentos {
  display: flex;
  justify-content: space-between;
  height: 30px;
  width: 70vw;
  margin: auto;
}

/* Contenedor de botones generales (2 en fila) */
.btnContainer {
  display: flex;
  gap: 30px;
}

/* Botón "Enviar documento" (agregar firmantes) */
button.enviarDocumento {
  /* hereda btn--outline-primary */
  border-radius: var(--radius-xl);  /* 16px — más compacto que pill */
  padding: 8px;
  font-size: var(--text-base);

  i.fa-solid.fa-circle-xmark,
  .close-sequence {
    display: none;
  }

  &.ordenarFirma {
    border-color: var(--color-border);
    color: var(--color-border);
    min-width: 201px;
  }

  &.desactiveBtn {
    border-color: var(--color-border);
    color: var(--color-border);
  }

  &.activeBtn {
    border-color: var(--color-primary);
    color: var(--color-primary);
  }

  &:hover {
    box-shadow: var(--shadow-md);
  }
}

/* Botón de firma personal (mínimo igual que ordenarFirma) */
.personal-signatures-button {
  min-width: 201px;
}

/* Botón "Reenviar" código OTP */
.btn-reenviar {
  color: var(--color-secondary-lt);
  font-weight: bold;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* Botón cambiar contraseña (Mi cuenta > Seguridad) */
.btn-changePass {
  /* hereda btn--outline-primary con color primary */
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  background: none;
  box-shadow: none;
  font-weight: 600;
  margin: 8px auto 18px;

  &:hover {
    background-color: transparent;
    box-shadow: var(--shadow-md);
  }
}

/* V10.4-bis-3: segundo bloque legacy `.btn-section` (selector plano
   con specificity 0,1,0) eliminado. El primero, anidado dentro de
   `.pdf-container > .headerBody-pdf > .controls`, se eliminó en
   V10.4-bis pero quedó este residual aquí, viviendo entre
   `.btn-changePass` y `.btn-pdf`. Aplicaba `transform: rotate(90deg)`
   sobre los paginadores del visor PDF (arquitectura legacy "pintar
   vertical + rotar 90° → horizontal post-rotación"), generando en
   desktop una columna vertical pegada al borde derecho del PDF.

   Toda la estilización moderna del control bar vive en
   sign_position_modern.css (`.controls`, `.btn-section`,
   `.container-pagNum`, `.zoom-section`). Si surge regresión visual,
   agregar la propiedad puntual al moderno con tokens DS — no
   restaurar este bloque.

   Patrón: gotcha 7.2.c (V10.4-bis-3) — un mismo selector puede
   tener múltiples bloques legacy en distintas zonas del archivo
   CSS, no solo uno anidado y uno moderno. Pre-flight obligatorio
   con `rg '\.selector\s*\{' app/assets/stylesheets/` para contar
   TODAS las apariciones antes de borrar. */

.btn-pdf{
  font-size: 14px;
  height: auto;
}

/* Controles de firma (canvas draw/write/upload) */
.btnes-firma {
  display: flex;
  padding: 3px;

  button#btnEditar {
    /* hereda btn--ghost */
    background: transparent;
    color: var(--color-secondary);
    cursor: pointer;
    border: none;
  }
}

/* Contenedor botones "Volver/Continuar" en wizards */
.containerBtnes {
  display: flex;
  justify-content: space-between;
}

/* Contenedor final con botones en columna */
.container-btnFinales {
  display: none;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
  align-content: center;
}

/* Botón "No" en modales de confirmación (invisible por defecto) */
.btn-no {
  visibility: hidden;
}


/* ============================================================
   5. ESTADOS ESPECIALES
   ============================================================ */

/* Botón continuar inactivo (sin firmantes/documentos) */
#continue-button,
#continue-buttonMasiva {
  &:not(.activo) {
    background-color: var(--color-border);   /* gris */
    box-shadow: none;
    cursor: not-allowed;
  }

  &.activo {
    background-color: var(--color-secondary-lt);
    box-shadow: var(--shadow-md);
    cursor: pointer;

    &:hover {
      background-color: var(--color-secondary-hover);
    }
  }
}

/* Botón iniciar firma masiva */
#iniciar-buttonMasiva {
  display: none;
}


/* ============================================================
   V11.5c-bis — Flecha <i> de botones .btn--primary/.btn--secondary
   ============================================================
   QA visual encontró que `<i class="fa-arrow-right">` dentro de
   .btn--primary (ej. "Cambiar plan" en /payments) compute color
   navy-700 sobre bg navy-800 (1.01:1 — invisible).

   Causa: el botón declara color: #fff a nivel padre, pero el <i>
   queda pisado por el legacy nested dashboard.css:407-413
   ( label, h4, p, i { color: #222D8B } ) bajo .miCuenta-container.
   El <i> debería heredar #fff por defecto; recuperamos ese
   comportamiento natural con color: inherit !important.

   inherit (vs hardcodear #fff) preserva acoplamiento al color
   del botón padre — si el botón cambia color en futuro, el <i>
   sigue automáticamente.

   Alcance preventivo: extender el override también a
   .btn--secondary i por consistencia (mismo bg navy-800, mismo
   patrón). Refactor del legacy diferido a V11.9.
   ============================================================ */

[data-theme="dark"] .btn--primary i,
[data-theme="dark"] .btn--secondary i {
  color: inherit !important;
}

/*
 * components/cards.css — Card reutilizable
 * FirmaYa / zappb
 *
 * Uso (partial):
 *   <%= render 'shared/card', title: '...', body: '...' %>
 *
 * Estructura HTML:
 *   <article class="card card--raised">
 *     <header class="card__header">...</header>
 *     <div class="card__body">...</div>
 *     <footer class="card__footer">...</footer>
 *   </article>
 */

.card {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  font-family: var(--font-family-base);
  color: var(--text-strong);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.card--raised   { box-shadow: var(--elevation-1); border-color: transparent; }
.card--floating { box-shadow: var(--elevation-2); border-color: transparent; }
.card--flat     { box-shadow: none; }

/* Interactivo (toda la card clickeable) */
.card--interactive {
  cursor: pointer;
}
/* .card--interactive:hover unificado V9.5(a) — ver bloque al final */
.card--interactive:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.card__header,
.card__footer {
  padding: var(--space-4) var(--space-6);
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-subtle);
}

.card__footer {
  border-top: 1px solid var(--border-subtle);
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
}

.card__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-brand);
  line-height: var(--leading-snug);
}

.card__subtitle {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.card__body {
  padding: var(--space-6);
  color: var(--text-default);
  line-height: var(--leading-normal);
}

/* Densidad compacta */
.card--compact .card__header,
.card--compact .card__body,
.card--compact .card__footer {
  padding: var(--space-3) var(--space-4);
}

/* Acento — barra de color superior (estados: info/success/warning/danger) */
.card--accent-info    { border-top: 3px solid var(--info-500); }
.card--accent-success { border-top: 3px solid var(--success-500); }
.card--accent-warning { border-top: 3px solid var(--warning-500); }
.card--accent-danger  { border-top: 3px solid var(--danger-500); }
.card--accent-brand   { border-top: 3px solid var(--brand-cyan-500); }


/* ============================================================
   V9.5(b) — Hover lift unificado para list-items interactivos
   ============================================================
   Patrón consolidado de 5 componentes que tenían `:hover` casi
   idénticos en archivos distintos (V9.4 Fase 1 lo identificó):

   - .signatures-item        (payments_modern.css)
   - .profile-item           (dashboard_modern.css)
   - .theme-option           (dashboard_modern.css)
   - #uploadedFilesList li   (upload_modern.css)
   - .email-item             (signers_modern.css)

   Las reglas de reposo (transition, border base, padding, etc.)
   se preservan en sus archivos originales. Solo el `:hover` se
   unificó acá.

   El `#signersContainer .email-list #email_list .email-item:hover`
   conserva su specificity completa para vencer la cascada legacy
   (lección V8.2). El `!important` del border-color también se
   preserva por el mismo motivo.

   Promoción: 4 de 5 ganaron `box-shadow: var(--elevation-1)` (la
   referencia .email-item ya lo tenía). Elevation sutil consistente
   con el lift visual.
   ============================================================ */
.signatures-item:hover,
.profile-item:hover,
.theme-option:hover,
.upload-container #uploadedFilesList li:hover,
#signersContainer .email-list #email_list .email-item:hover {
  border-color: var(--brand-cyan-400);
  transform: translateY(-1px);
  box-shadow: var(--elevation-1);
}

/* Override de specificity para .email-item — el selector legacy
   `#signersContainer .email-list #email_list .email-item` (de
   signers.css) con specificity (2,2,1) pisa el border-color base.
   Mantenemos !important como en la versión pre-unificación. */
#signersContainer .email-list #email_list .email-item:hover {
  border-color: var(--brand-cyan-400) !important;
}


/* ============================================================
   V9.5(a) — Hover lift unificado para cards interactivas
   ============================================================
   Patrón consolidado de 3 cards que tenían :hover casi idénticos
   en archivos distintos (V9.4 Fase 1 lo identificó como
   candidato; QA Chrome MCP confirmó 3 reales, los otros 2 del
   inventario original son CTAs/botones reclasificados a V9.5(c)):

   - .card--interactive            (components/cards.css)
   - .account-card                 (dashboard_modern.css)
   - .container-documentos-validar (validator_modern.css)

   Jerarquía visual: --elevation-2 para cards (más prominente que
   --elevation-1 que V9.5(b) usa para list-items).

   .card--interactive no tiene border-style en reposo — declarar
   border-color en :hover acá no produce regresión (sin border
   style, el color no se renderiza).

   El override para .container-documentos-validar con specificity
   ID + !important (lección V8.2) está scopeado en
   views/validator_modern.css para mantener el bloque unificado
   limpio.
   ============================================================ */
.card--interactive:hover,
.account-card:hover {
  border-color: var(--brand-cyan-400);
  transform: translateY(-1px);
  box-shadow: var(--elevation-2);
}
/*
 * components/empty_state.css — Empty state
 * FirmaYa / zappb
 *
 * Uso (partial):
 *   <%= render 'shared/empty_state',
 *         icon: 'fa-file-alt',
 *         title: 'Sin documentos',
 *         description: 'Aún no has creado ningún documento',
 *         action: { label: 'Crear documento', url: new_document_path } %>
 */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-12) var(--space-6);
  color: var(--text-default);
  font-family: var(--font-family-base);
}

.empty-state__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--brand-cyan-100);
  color: var(--brand-cyan-700);
  font-size: 32px;
}

.empty-state__title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-brand);
  line-height: var(--leading-snug);
}

.empty-state__description {
  margin: 0;
  max-width: 420px;
  font-size: var(--text-base);
  color: var(--text-muted);
  line-height: var(--leading-normal);
}

.empty-state__action {
  margin-top: var(--space-4);
}

/* Variante compacta — para usar dentro de cards */
.empty-state--compact {
  padding: var(--space-6) var(--space-4);
}
.empty-state--compact .empty-state__icon {
  width: 48px;
  height: 48px;
  font-size: 22px;
}
.empty-state--compact .empty-state__title {
  font-size: var(--text-md);
}
/*
 * _forms.css — Componente de formularios
 * FirmaYa / zappb
 *
 * Cubre: .form-content, inputs, labels dentro de formularios,
 * .container-inputRegistro, .otp-container, validación visual,
 * .error-message, .icon-inside-input, password requirements.
 *
 * NOTA: Los labels globales (font-size: 20px, color: #fff) están en
 * _reset.css. Los estilos aquí sobreescriben dentro del contexto de
 * formulario (.form-content label).
 *
 * MIGRADO DESDE application.css — líneas ~5038–5130, ~4618–4650
 * Al aplicar este archivo, comentar/eliminar esos bloques del archivo legacy.
 */


/* ============================================================
   WRAPPER DE FORMULARIO
   ============================================================ */

.form-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: auto;

    /* Inputs dentro de formulario */
    input {
        padding: 10px;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);   /* 14px */
        height: 40px;
        position: relative;
        width: 100%;   /* reemplaza -webkit-fill-available */
        font-size: var(--text-base);    /* 14px */
    }

    /* Labels dentro de formulario — sobreescribe el label global */
    label {
        font-size: var(--text-md);    /* 16px */
        color: inherit;
    }
}


/* ============================================================
   CONTENEDOR DE INPUT CON ÍCONO
   ============================================================ */

.container-inputRegistro {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    /* Ícono de error dentro del input */
    .icon-inside-input {
        display: none;
        position: absolute;
        right: 19vw;
        color: var(--color-error);
    }

    /* Mostrar ícono cuando input tiene error */
    .input-error ~ .icon-inside-input {
        display: flex;
    }

    /* Ícono de toggle de visibilidad de contraseña */
    .icon-toggle-password, 
    .icon-toggle-confirm-password {
        color: var(--color-text-muted);
    }

    /* Input con error — borde rojo */
    .input-error {
        border-color: var(--color-error);
    }

   
}


/* ============================================================
   OTP — CÓDIGO DE VERIFICACIÓN
   ============================================================ */

.otp-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;

    input.otp-box {
        max-width: 55px;
        min-height: 54px;
        caret-color: var(--color-text-muted);
        color: var(--color-text-muted);
        font-size: var(--text-display-sm);   /* 25px */
        text-align: center;
    }

    .otp-box:focus {
        border-color: var(--color-text-muted);
        outline: none;
    }
}

/* Variante invitación — inputs más anchos */
.otp-invitation .otp-box {
    border: 1px solid #E3E2E6;
    caret-color: var(--color-text-muted);
    max-width: 15%;
    text-align: center;
    min-height: 54px;
    font-size: var(--text-display-sm);
}


/* ============================================================
   MENSAJES DE ERROR Y VALIDACIÓN
   ============================================================ */

.error-message {
    color: var(--color-error);
    font-size: var(--text-sm);    /* 12px */
    font-weight: 600;
    padding-left: 12px;
}

#confirm-password-error {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
}

/* Requisitos de contraseña — tooltip emergente */
#password-requirements {
    display: none;
    background: #e1d7d7;
    position: absolute;
    z-index: var(--z-above);
    border-radius: var(--radius-md);
    width: auto;
    padding: 12px 25px 12px 8px;
    color: #fff;

    p {
        margin: 0;
        margin-bottom: 2px;

        .fa-check-circle,
        .fa-times-circle {
            font-size: var(--text-md);
        }

        span {
            color: #5c5858c7;
            font-weight: 400;
            font-size: var(--text-base);
        }
    }
}


/* ============================================================
   LINKS AUXILIARES (¿Olvidaste tu contraseña? / ¿No tienes cuenta?)
   ============================================================ */

.askLoginSection,
.askRegistroSection {
    font-size: var(--text-base);    /* 14px */
    color: var(--color-primary);
    text-decoration: none;
    margin-top: 4px;

    &:hover {
        text-decoration: underline;
    }
}
.span-informative{
    color: var(--color-secondary-lt);
}
        
.text-no-pro{
    display: none !important;
}


.is-disabled, 
button:disabled{
    .text-pro{
        display: none;
    }
    .text-no-pro{
        display: flex !important;
    }

    
}


/* ============================================================
   FORM-FIELD MODERNO — BEM (.form-field__*)
   ============================================================
   Partial: shared/_form_field.html.erb
   ============================================================ */

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-family: var(--font-family-base);
  margin-bottom: var(--space-4);
}

.form-field__label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-strong);
  line-height: var(--leading-snug);
}

.form-field__required {
  color: var(--danger-500);
  margin-left: 2px;
  font-weight: var(--font-weight-bold);
}

.form-field__control {
  position: relative;
  display: flex;
  align-items: center;
}

.form-field__icon {
  position: absolute;
  left: var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-base);
  pointer-events: none;
}

.form-field__input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-raised);
  color: var(--text-strong);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: var(--text-md);
  font-family: inherit;
  line-height: var(--leading-normal);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-field__input[type="password"]::-ms-reveal,
.form-field__input[type="password"]::-ms-clear {
  display: none;
}

.form-field__input[type="password"] {
  appearance: none;
}

.form-field__input::placeholder { color: var(--text-muted); }

.form-field__input--with-icon { padding-left: calc(var(--space-4) + var(--space-5)); }

.form-field__input:hover { border-color: var(--border-strong); }

.form-field__input:focus,
.form-field__input:focus-visible {
  outline: none;
  border-color: var(--brand-cyan-500);
  box-shadow: 0 0 0 3px rgba(0, 186, 212, 0.2);
}

.form-field__input:disabled,
.form-field__input[readonly] {
  background: var(--surface-sunken);
  color: var(--text-muted);
  cursor: not-allowed;
}

.form-field__input.input-error,
.form-field--has-error .form-field__input {
  border-color: var(--danger-500);
}

.form-field--has-error .form-field__input:focus {
  box-shadow: 0 0 0 3px rgba(219, 6, 50, 0.18);
}

.form-field__hint {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: var(--leading-snug);
}

.form-field__error {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--danger-700);
  line-height: var(--leading-snug);
}

/* Checkbox de aceptación (ToS / Política de Privacidad) */
.form-field__checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.form-field__checkbox-input {
  flex-shrink: 0;
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: var(--brand-cyan-500);
  cursor: pointer;
}

.form-field__checkbox-label {
  font-size: var(--text-sm);
  color: var(--text-strong);
  line-height: var(--leading-snug);
  cursor: pointer;
}

.form-field__checkbox-label a {
  color: var(--brand-cyan-600, var(--brand-cyan-500));
  text-decoration: underline;
}

/* Textarea — altura mínima */
textarea.form-field__input {
  min-height: 96px;
  resize: vertical;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}

/* Select nativo — chevron decorativo */
select.form-field__input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23898AB1' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-10);
}

/*.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.2s ease-in-out;
}

.loading-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}*/

.loading-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    /*background: rgba(15, 18, 35, 0.55);
    backdrop-filter: blur(2px);*/
    background: rgba(7, 15, 35, 0.72);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    gap: 90px;
    justify-content: center;
    align-items: center;
    transition: opacity 0.25s ease-in-out;
    flex-direction: column;
    margin: 0;
}

.loading-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.loading-text {
    margin: 0;
    font-size: 16px;
    font-weight: 900;
    /*color: #162F85;*/
    color: #F5F8FF;
    letter-spacing: 0.2px;
}

/* Dots */
.dot-loader span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    margin: 0px;
    border-radius: 50%;
    /*background: #0077bc;*/
    background: #F5F8FF;
    transform-origin: 0 -32px;
    animation: circleFlow 3s linear infinite;
}

/* Ángulos */
.dot-loader span:nth-child(1) { --angle: 0deg; }
.dot-loader span:nth-child(2) { --angle: 45deg; }
.dot-loader span:nth-child(3) { --angle: 90deg; }
.dot-loader span:nth-child(4) { --angle: 135deg; }
.dot-loader span:nth-child(5) { --angle: 180deg; }
.dot-loader span:nth-child(6) { --angle: 225deg; }
.dot-loader span:nth-child(7) { --angle: 270deg; }
.dot-loader span:nth-child(8) { --angle: 315deg; }

@keyframes circleFlow {
  0% {
    opacity: 0;
    transform: rotate(0deg);
  }

  15% {
    opacity: 1;
    transform: rotate(0deg);
  }

  70% {
    opacity: 1;
    transform: rotate(calc(360deg + var(--angle)));
  }

  85% {
    opacity: 0;
    transform: rotate(calc(360deg + var(--angle)));
  }

  100% {
    opacity: 0;
    transform: rotate(calc(360deg + var(--angle)));
  }
}
/*
 * components/microinteractions.css — Feedback y transiciones
 * FirmaYa / zappb
 *
 * Incluye:
 *   1. Turbo progress bar
 *   2. Toast notifications (flash modernizadas)
 *   3. Submit button loader
 *   4. Loading spinner / overlay moderno
 *   5. Skeleton loader utility
 *   6. Button micro-animations (press)
 *   7. Turbo-frame transitions
 */

/* ============================================================
   1. TURBO PROGRESS BAR
   ============================================================ */

.turbo-progress-bar {
  height: 3px;
  background: linear-gradient(90deg, var(--brand-cyan-500), var(--brand-cyan-300));
  box-shadow: 0 0 8px rgba(0, 186, 212, 0.5);
}


/* ============================================================
   2. TOAST — flash messages modernos
   ============================================================
   Stack en la esquina superior derecha, slide-in desde la derecha,
   auto-dismiss (via Stimulus toast_controller).
   ============================================================ */

.toast-stack {
  position: fixed;
  top: calc(70px + var(--space-4));    /* debajo del header sticky */
  right: var(--space-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: calc(100vw - var(--space-8));
  width: 400px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-raised);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-3);
  border-left: 4px solid;
  position: relative;
  overflow: hidden;          /* recorta .toast__progress a los bordes redondeados */
  font-family: var(--font-family-base);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-default);
  pointer-events: auto;
  animation: toast-in var(--duration-base) var(--ease-out);
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Salida: desliza a la derecha + fade out, en --duration-base.
   NO usar --transition-base aquí: incluye "ease" y combinado con
   --ease-out invalida el shorthand (la animación nunca corre). */
.toast--leaving {
  animation: toast-out var(--duration-base) var(--ease-out) forwards;
}

@keyframes toast-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(24px); }
}

/* Barra superior que se consume durante el tiempo de vida del toast,
   encogiéndose simétricamente hacia el centro. Solo se renderiza cuando
   hay auto-dismiss (duration > 0); la duración de la animación la fija
   el partial inline según data-toast-duration-value. El left/right le da
   aire respecto del borde izquierdo que indica la variante. */
.toast__progress {
  position: absolute;
  top: 0;
  left: 6px;
  right: 6px;
  height: 3px;
  transform-origin: center;
  animation-name: toast-progress;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes toast-progress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

.toast__icon {
  flex-shrink: 0;
  font-size: var(--text-lg);
  line-height: 1;
  margin-top: 2px;
}

.toast__body { flex: 1; min-width: 0; }

.toast__title {
  margin: 0 0 2px;
  font-size: var(--text-md);
  font-weight: var(--font-weight-semibold);
  color: var(--text-strong);
}

.toast__message { margin: 0; }

.toast__close {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px;
  border-radius: var(--radius-sm);
  font-size: var(--text-md);
}
.toast__close:hover { color: var(--text-strong); background: rgba(0, 0, 0, 0.04); }
.toast__close:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Variantes */
.toast--success { border-color: var(--success-500); }
.toast--success .toast__icon,
.toast--success .toast__title { color: var(--success-700); }
.toast--success .toast__progress { background: var(--success-500); }

.toast--danger { border-color: var(--danger-500); }
.toast--danger .toast__icon,
.toast--danger .toast__title { color: var(--danger-700); }
.toast--danger .toast__progress { background: var(--danger-500); }

.toast--warning { border-color: var(--warning-500); }
.toast--warning .toast__icon,
.toast--warning .toast__title { color: var(--warning-700); }
.toast--warning .toast__progress { background: var(--warning-500); }

.toast--info { border-color: var(--info-500); }
.toast--info .toast__icon,
.toast--info .toast__title { color: var(--info-700); }
.toast--info .toast__progress { background: var(--info-500); }

/* Mobile — ocupar todo el ancho */
@media (max-width: 480px) {
  .toast-stack {
    top: calc(70px + var(--space-2));
    right: var(--space-2);
    left: var(--space-2);
    width: auto;
  }
}


/* ============================================================
   3. SUBMIT BUTTON LOADER
   ============================================================
   Durante una submisión de formulario el botón muestra un spinner
   junto al texto (o lo reemplaza, según la config). Se usa con el
   Stimulus controller submit_loader.
   ============================================================ */

.btn[aria-busy="true"],
.btn.is-loading {
  cursor: wait;
  pointer-events: none;
  position: relative;
}

.btn[aria-busy="true"]::after,
.btn.is-loading::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: var(--space-2);
  border-radius: var(--radius-full);
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: btn-spin 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}


/* ============================================================
   4. LOADING OVERLAY — moderno
   ============================================================ */

.loading-overlay .loading-spinner {
  border: 4px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--brand-cyan-500);
  width: 56px;
  height: 56px;
}


/* ============================================================
   5. SKELETON LOADER — placeholder animado
   ============================================================
   Uso:  <div class="skeleton skeleton--text"></div>
         <div class="skeleton skeleton--title"></div>
         <div class="skeleton skeleton--box"></div>
   ============================================================ */

.skeleton {
  background: linear-gradient(90deg,
              var(--neutral-200) 0%,
              var(--neutral-100) 50%,
              var(--neutral-200) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
  color: transparent;
  user-select: none;
  pointer-events: none;
}

@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton--text  { height: 1em; width: 80%; margin: 4px 0; }
.skeleton--title { height: 1.5em; width: 60%; margin: 6px 0; border-radius: var(--radius-md); }
.skeleton--box   { height: 80px; width: 100%; border-radius: var(--radius-md); }
.skeleton--avatar { width: 40px; height: 40px; border-radius: var(--radius-full); }

/* Variantes específicas — aparecen con el mismo shape que sus contrapartes
   reales en la tabla de documentos (.doc-status, .folder-icon, etc.) */
.skeleton--icon-square {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.skeleton--icon-small {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.skeleton--badge {
  display: inline-block;
  height: 22px;
  width: 96px;
  border-radius: var(--radius-round);
}

.skeleton--button {
  height: 36px;
  width: 36px;
  border-radius: var(--radius-round);
}

.skeleton--line-short {
  height: 0.9em;
  width: 40%;
}

.skeleton--line-medium {
  height: 1em;
  width: 60%;
}

.skeleton--line-long {
  height: 1em;
  width: 85%;
}

/* Skeleton table row — imita la estructura de la tabla .document-table
   moderna (paso 11). Se usa dentro de un <tbody> o con partial
   shared/_skeleton_rows */
.skeleton-row td {
  padding: var(--space-4) var(--space-5) !important;
  vertical-align: middle;
}

.skeleton-row .skeleton-row__name {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Estados automáticos: cuando un turbo-frame está cargando ([busy]),
   los skeletons internos pulsan con intensidad ligeramente mayor. */
turbo-frame[busy] .skeleton {
  animation-duration: 1.1s;
}

/* Atenúa contenido bajo un skeleton activo (durante filtros o paginación) */
.is-loading-skeletons {
  pointer-events: none;
}

/* Skeleton card — para dashboards con cards tipo action-card/plan-card */
.skeleton-card {
  padding: var(--space-5);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.skeleton-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}


/* ============================================================
   6. BUTTON PRESS MICRO-ANIMATION
   ============================================================ */

.btn {
  transition: background-color var(--transition-base),
              box-shadow var(--transition-base),
              transform 0.08s ease;
}

/* Press genérico para todos los .btn */
.btn:not(:disabled):not([aria-busy="true"]):active {
  transform: translateY(0) scale(0.97);
}

/* Press para CTAs con gradient cyan (btn--primary, btn--secondary, btn-firmar,
   security-form__submit, etc.). V9.5(c) — .plan-card__cta y
   .docs-empty__cta removidos del list al migrar a .btn--primary
   (ya quedan cubiertos por el selector base).
   Incluye reducción de shadow para un "hundimiento" táctil completo. */
.btn--primary:not(:disabled):active,
.btn--secondary:not(:disabled):active,
.btn-firmar:not(:disabled):active,
.security-form__submit:active,
.upload-button:active,
.btn-validar:active,
.how-to-sign__video-link:active,
.payment-action:active,
.pdf-dropzone__btn:active,
.link-account-cta:active,
button[class*="btn--primary"]:active {
  transform: translateY(0) scale(0.97) !important;
  box-shadow: 0 1px 2px rgba(8, 145, 168, 0.15) !important;
}

/* Press para botones outline / ghost */
.btn--outline:not(:disabled):active,
.btn--ghost:not(:disabled):active,
.btn--oauth:not(:disabled):active,
.btn-pill:not(:disabled):active {
  transform: translateY(0) scale(0.97) !important;
}


/* ============================================================
   7. TURBO-FRAME TRANSITIONS
   ============================================================
   Fade sutil cuando el contenido del frame cambia.
   ============================================================ */

turbo-frame {
  display: block;
}

turbo-frame[busy] {
  opacity: 0.6;
  transition: opacity var(--transition-fast);
  pointer-events: none;
}

/* Turbo-frame que está navegando (sobre el wrapper #main) */
#main-content turbo-frame[busy] {
  filter: saturate(0.7);
}


/* ============================================================
   8. FORM SUBMIT — input disabled state suave
   ============================================================ */

form[aria-busy="true"] .form-field__input {
  opacity: 0.7;
  pointer-events: none;
}


/* ============================================================
   9. FOCUS-WITHIN CARDS — feedback al enfocar contenido interno
   ============================================================ */

.card:focus-within,
.account-card:focus-within {
  box-shadow: var(--elevation-2);
  border-color: var(--brand-cyan-500);
}
/*
 * components/modal.css — Modal moderno reutilizable
 * FirmaYa / zappb
 *
 * Paralelo al legacy components/modals.css (no lo reemplaza).
 * Uso: <%= render 'shared/modal', id: 'my-modal', title: '...' %>
 *
 * Estructura:
 *   <div class="modal" data-controller="modal" hidden>
 *     <div class="modal__backdrop" data-action="click->modal#close"></div>
 *     <div class="modal__dialog" role="dialog" aria-modal="true">
 *       <header class="modal__header">
 *         <h2 class="modal__title">...</h2>
 *         <button class="modal__close" data-action="click->modal#close">×</button>
 *       </header>
 *       <div class="modal__body">...</div>
 *       <footer class="modal__footer">...</footer>
 *     </div>
 *   </div>
 */

/* Scope con [data-controller~="modal"] (el componente siempre lo lleva):
   el legacy components/modals.css define `.modal { display: none }` para
   #modal-previsualizacion y carga DESPUÉS de este archivo — con la misma
   especificidad pisaba estas reglas y el modal moderno nunca se mostraba.
   El atributo sube la especificidad sin afectar los modales legacy. */
.modal[data-controller~="modal"] {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  font-family: var(--font-family-base);
  /* El scrim lo pinta .modal__backdrop; anula el overlay del .modal legacy */
  background: none;
  overflow: visible;
}

.modal[data-controller~="modal"][hidden] { display: none; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: var(--surface-overlay);
  animation: modal-backdrop-in var(--transition-base) var(--ease-out);
}

@keyframes modal-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal__dialog {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - var(--space-8));
  background: var(--surface-raised);
  border-radius: var(--radius-xl);
  box-shadow: var(--elevation-4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modal-dialog-in var(--transition-base) var(--ease-out);
}

@keyframes modal-dialog-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.modal--sm  .modal__dialog { max-width: 360px; }
.modal--lg  .modal__dialog { max-width: 720px; }
.modal--xl  .modal__dialog { max-width: 960px; }

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
}

.modal__title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-brand);
  line-height: var(--leading-snug);
}

.modal__close {
  flex-shrink: 0;
  background: transparent;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  color: var(--text-muted);
  font-size: var(--text-lg);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.modal__close:hover { background: var(--neutral-100); color: var(--text-strong); }
.modal__close:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.modal__body {
  padding: var(--space-6);
  overflow-y: auto;
  color: var(--text-default);
  line-height: var(--leading-normal);
}

.modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
}

/* Variante full-screen mobile */
@media (max-width: 480px) {
  .modal {
    padding: 0;
  }
  .modal__dialog {
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0;
    height: 100%;
  }
}
/*
 * components/certificate_enrollment.css — Modal de enrolamiento de
 * certificados avanzados / spot (sign/_certificate_enrollment_modal).
 * FirmaYa / zappb
 *
 * Paso 1: grid de cajas de validación (.cert-validation-card).
 * Paso 2: creación del PIN del certificado.
 */

.cert-enrollment-modal .modal__dialog {
  max-width: 900px;
}

.cert-enrollment-modal .modal__body {
  padding: var(--space-8) var(--space-8) var(--space-6);
}

.cert-enrollment__title {
  margin: 0 0 var(--space-3);
  text-align: center;
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-brand);
}

.cert-enrollment__description {
  margin: 0 auto var(--space-6);
  max-width: 60ch;
  text-align: center;
  color: var(--text-muted);
  line-height: var(--leading-normal);
}

/* ---------------------------------------------- Paso 1: validaciones */

.cert-enrollment__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-5);
}

.cert-validation-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--elevation-1);
  padding: var(--space-4) var(--space-5);
}

.cert-validation-card--pending {
  border-color: var(--danger-300);
}

.cert-validation-card__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}

.cert-validation-card__title {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text-brand);
}

.cert-validation-card__status-icon--verified { color: var(--success-500); }
.cert-validation-card__status-icon--pending  { color: var(--danger-500); }

/* Sólo se muestra el ícono que corresponde al estado de la caja */
.cert-validation-card .cert-validation-card__status-icon--pending { display: none; }
.cert-validation-card--pending .cert-validation-card__status-icon--pending { display: inline-block; }
.cert-validation-card--pending .cert-validation-card__status-icon--verified { display: none; }

.cert-validation-card__data {
  margin: 0;
  display: grid;
  gap: var(--space-2);
}

.cert-validation-card__data-row {
  display: flex;
  gap: var(--space-4);
}

.cert-validation-card__data-row dt {
  min-width: 72px;
  color: var(--text-muted);
}

.cert-validation-card__data-row dd {
  margin: 0;
  font-weight: var(--font-weight-semibold);
  color: var(--text-brand);
}

.cert-validation-card__value-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.cert-validation-card__value {
  color: var(--text-default);
  overflow-wrap: anywhere;
}

.cert-validation-card__menu-icon {
  color: var(--text-muted);
  padding: var(--space-1) var(--space-2);
}

.cert-validation-card__input-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.cert-validation-card__input-row label {
  color: var(--text-default);
  white-space: nowrap;
}

.cert-validation-card__input-row input {
  flex: 1;
  min-width: 0;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-focus);
  border-radius: var(--radius-round);
  font-size: var(--text-sm);
  color: var(--text-default);
}

.cert-validation-card__input-row input::placeholder {
  color: var(--text-muted);
}

.cert-validation-card__action {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.cert-validation-card__hint {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: center;
}

.cert-validation-card__pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-round);
  background: var(--brand-navy-700);
  color: var(--neutral-0);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
}

/* ---------------------------------------------- Paso 2: PIN */

/* Aviso amarillo: proteger/recordar el PIN */
.cert-enrollment__pin-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  max-width: 480px;
  margin: 0 auto var(--space-6);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--warning-500);
  border-radius: var(--radius-md);
  background: var(--warning-50);
  color: var(--warning-700);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.cert-enrollment__pin-warning i {
  margin-top: 2px;
  flex-shrink: 0;
  color: var(--warning-500);
}

/* Campos apilados (uno debajo del otro) */
.cert-enrollment__pin-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 480px;
  margin: 0 auto;
}

.cert-enrollment__pin-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cert-enrollment__pin-field label {
  font-weight: var(--font-weight-semibold);
  color: var(--text-brand);
}

.cert-enrollment__pin-input {
  position: relative;
  display: flex;
  align-items: center;
}

.cert-enrollment__pin-icon {
  position: absolute;
  left: 0.9rem;
  color: var(--text-muted);
  pointer-events: none;
}

.cert-enrollment__pin-field input {
  width: 100%;
  padding: var(--space-3) 2.75rem var(--space-3) 2.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  color: var(--text-default);
}

.cert-enrollment__pin-field input::placeholder {
  color: var(--text-muted);
}

.cert-enrollment__pin-field input:focus-visible {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--focus-ring);
}

.cert-enrollment__pin-toggle {
  position: absolute;
  right: 0.5rem;
  display: flex;
  align-items: center;
  padding: var(--space-2);
  border: 0;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}

.cert-enrollment__pin-toggle:hover {
  color: var(--text-default);
}

.cert-enrollment__pin-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  max-width: 480px;
  margin: var(--space-4) auto 0;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  text-align: center;
  color: var(--text-brand);
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
}

.cert-enrollment__pin-hint i {
  flex-shrink: 0;
  color: var(--brand-navy-700);
}

.cert-enrollment__pin-error {
  margin: var(--space-3) auto 0;
  max-width: 560px;
  text-align: center;
  color: var(--danger-500);
  font-size: var(--text-sm);
}

/* ---------------------------------------------- Acciones */

.cert-enrollment__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.cert-enrollment__actions--split {
  justify-content: center;
}

/* Acciones alineadas con el grid de validaciones (mismas 2 columnas y gap): los
   botones quedan del mismo ancho y simétricos respecto a las cajas de validación. */
.cert-enrollment__actions--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-5);
}

/* Mismo ancho para ambos, pero sin llenar la columna: se limitan y se centran en
   su celda, quedando compactos y alineados bajo cada caja de validación. */
.cert-enrollment__actions--grid .btn {
  width: 100%;
  max-width: 240px;
  min-width: 0;
  justify-self: center;
}

.cert-enrollment__continue {
  min-width: 220px;
}

@media (max-width: 640px) {
  .cert-enrollment__grid,
  .cert-enrollment__pin-fields,
  .cert-enrollment__actions--grid {
    grid-template-columns: 1fr;
  }

  .cert-enrollment-modal .modal__body {
    padding: var(--space-6) var(--space-4);
  }

  /* Botones de acción del mismo ancho en móvil: "Continuar" trae min-width:220px
     que desbalanceaba la fila y dejaba "Ver Documento" (u otro secundario)
     apretado. Se reparten el ancho por igual. */
  .cert-enrollment__actions {
    gap: var(--space-2);
  }

  .cert-enrollment__actions .btn {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: var(--space-3);
    white-space: nowrap;
  }

  .cert-enrollment__continue {
    min-width: 0;
  }
}

/* ---------------------------------- Caja Clave Única (RUT + serie + botón) */

/* Grilla compartida: la columna de label toma el ancho de la etiqueta más larga
   ("N° de serie"), de modo que ambos inputs quedan exactamente del mismo ancho. */
.cert-validation-card__cu-fields {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.cert-validation-card__cu-fields label {
  color: var(--text-default);
  white-space: nowrap;
}

.cert-validation-card__cu-fields input {
  width: 100%;
  min-width: 0;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-focus);
  border-radius: var(--radius-round);
  font-size: var(--text-sm);
  color: var(--text-default);
}

.cert-validation-card__cu-fields input::placeholder {
  color: var(--text-muted);
}

.cert-validation-card__cu-button {
  margin-top: var(--space-1);
}

/* ---------------------------------------------- Página VIMP (preguntas seguridad) */

.vimp-page {
  display: flex;
  justify-content: center;
  padding: var(--space-8) var(--space-4);
}

.vimp-page__panel {
  width: 100%;
  max-width: 900px;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-1);
  padding: var(--space-8);
}

.vimp-page__title {
  margin: 0 0 var(--space-3);
  text-align: center;
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-brand);
}

.vimp-page__description {
  margin: 0 auto var(--space-6);
  max-width: 60ch;
  text-align: center;
  color: var(--text-muted);
}

/* Grilla 2×2 con filas de igual alto: las 4 cajas quedan del mismo tamaño entre sí */
.vimp__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--space-4) var(--space-5);
}

.vimp__question {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}

.vimp__question-text {
  margin: 0;
  padding: 0;
  font-weight: var(--font-weight-semibold);
  color: var(--text-brand);
}

.vimp__alternatives {
  display: grid;
  gap: var(--space-2);
}

.vimp__alternative {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text-default);
  overflow-wrap: anywhere;
}

.vimp__alternative:hover {
  border-color: var(--border-focus);
}

.vimp__alternative input {
  margin-top: 3px;
  flex-shrink: 0;
}

.vimp__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

@media (max-width: 640px) {
  .vimp__grid { grid-template-columns: 1fr; }
  .vimp-page__panel { padding: var(--space-6) var(--space-4); }
}

/* Modal de confirmación al intentar salir de la página VIMP */
.vimp-guard-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.vimp-guard-modal[hidden] {
  display: none;
}

.vimp-guard-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.vimp-guard-modal__box {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--surface-raised);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-2, var(--elevation-1));
  padding: var(--space-6);
  text-align: center;
}

.vimp-guard-modal__text {
  margin: 0 0 var(--space-5);
  color: var(--text-default);
  line-height: var(--leading-normal);
}

.vimp-guard-modal__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
}

/* ------------------------------------ Botón oficial ClaveÚnica (cu.css v2.0)
 * Sólo la variante "Ancho flexible" (btn-fw) con texto "ClaveÚnica".
 * El ícono oficial va embebido como data URI para no depender de un asset externo.
 */
.btn-cu {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  user-select: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}

.btn-cu:hover { text-decoration: none; }

.btn-cu .cl-claveunica {
  text-indent: -9999px;
  overflow: hidden;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M11.47,14a.65.65,0,0,1-.21-.54.64.64,0,0,1,.29-.5.68.68,0,0,1,.53-.19.73.73,0,0,1,.49.27.75.75,0,0,1-.08,1,.7.7,0,0,1-.53.19.71.71,0,0,1-.49-.27Zm3.8-8.66A9,9,0,0,1,21,13.57a9,9,0,0,1-18,0A8.78,8.78,0,0,1,8.45,5.32c.37-.09.64-.09.82.36a.76.76,0,0,1-.36,1,7.52,7.52,0,1,0,5.82-.09.66.66,0,0,1-.4-.37.64.64,0,0,1,0-.54.62.62,0,0,1,.37-.39A.64.64,0,0,1,15.27,5.32Zm-7.77,8a4.64,4.64,0,0,1,3.75-4.59V2.33A.91.91,0,0,1,12,1.5h3.31a.75.75,0,0,1,.7.75.78.78,0,0,1-.7.75H12.75V8.76a4.5,4.5,0,0,1,3.75,4.58A4.61,4.61,0,0,1,12,18,4.61,4.61,0,0,1,7.5,13.33Zm7.5.09a3.1,3.1,0,0,0-3-3.12,3.12,3.12,0,0,0,0,6.2A3.09,3.09,0,0,0,15,13.42Z'/%3E%3C/svg%3E") no-repeat center;
}

.btn-cu .texto {
  padding-left: 4px;
  font-size: 16px;
  text-rendering: geometricPrecision;
}

.btn-cu.btn-color-estandar { background-color: #0F69C4; color: #FFF; }
.btn-cu.btn-color-estandar:hover { background-color: #0B4E91; color: #FFF; }
.btn-cu.btn-color-estandar:active { background-color: #07305A; color: #FFF; }
.btn-cu.btn-color-estandar:focus {
  background-color: #0B4E91;
  color: #FFF;
  outline: 4px solid #FFBE5C;
  outline-offset: 0;
}

.btn-cu.btn-m {
  min-height: 48px;
  padding: 8px 14px;
  font-size: 16px;
  line-height: 2rem;
}

.btn-cu.btn-m .cl-claveunica {
  width: 24px;
  height: 24px;
  background-size: 24px 24px;
  margin: auto 4px auto 0;
}

.btn-cu.btn-fw {
  max-width: 550px;
  width: 100%;
}

/* ------------------------------ Minimizar / FAB flotante recordatorio */

/* El botón "Ver Documento" (minimizar) vive en la fila de acciones del paso de
   validaciones, a la izquierda de "Continuar", con el mismo look que "Cancelar"
   (btn btn--outline). No requiere estilos propios. */

/* Animación de minimizar/maximizar: el diálogo se encoge hacia la esquina inferior
   derecha (donde queda el FAB) y vuelve al maximizar. El JS aplica is-minimizing /
   is-maximizing y oculta/muestra el modal al terminar la animación. */
.cert-enrollment-modal.is-minimizing .modal__dialog {
  animation: cert-modal-minimize var(--transition-slow) forwards;
}

.cert-enrollment-modal.is-maximizing .modal__dialog {
  animation: cert-modal-maximize var(--transition-base) forwards;
}

.cert-enrollment-modal.is-minimizing .modal__backdrop {
  animation: cert-modal-backdrop-out var(--transition-slow) forwards;
}

@keyframes cert-modal-minimize {
  from { transform: translate(0, 0) scale(1); opacity: 1; }
  to   { transform: translate(38vw, 40vh) scale(0.08); opacity: 0; }
}

@keyframes cert-modal-maximize {
  from { transform: translate(38vw, 40vh) scale(0.08); opacity: 0; }
  to   { transform: translate(0, 0) scale(1); opacity: 1; }
}

@keyframes cert-modal-backdrop-out {
  to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cert-enrollment-modal.is-minimizing .modal__dialog,
  .cert-enrollment-modal.is-maximizing .modal__dialog,
  .cert-enrollment-modal.is-minimizing .modal__backdrop {
    animation: none;
  }
}

/* FAB circular abajo a la derecha; visible sólo cuando el modal está minimizado.
   Destacado con halo pulsante para que el firmante recuerde completar el enrolamiento. */
.cert-enrollment-fab {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border: 3px solid var(--neutral-0);
  border-radius: var(--radius-round);
  background: var(--brand-navy-700);
  color: var(--neutral-0);
  font-size: var(--text-xl);
  box-shadow: var(--elevation-4);
  cursor: pointer;
  transition: transform var(--transition-fast);
  animation: cert-fab-in var(--transition-base);
}

.cert-enrollment-fab[hidden] {
  display: none;
}

@keyframes cert-fab-in {
  from { transform: scale(0.3); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.cert-enrollment-fab:hover {
  transform: scale(1.06);
}

.cert-enrollment-fab:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring), var(--elevation-4);
}

.cert-enrollment-fab i {
  position: relative;
  z-index: 1;
}

.cert-enrollment-fab__pulse {
  position: absolute;
  inset: -3px;
  border-radius: var(--radius-round);
  background: var(--brand-navy-700);
  opacity: 0.45;
  pointer-events: none;
  animation: cert-fab-pulse 1.8s ease-out infinite;
}

@keyframes cert-fab-pulse {
  0%   { transform: scale(1);   opacity: 0.45; }
  100% { transform: scale(1.7); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cert-enrollment-fab,
  .cert-enrollment-fab__pulse { animation: none; }
}
/* ============================================================================
   Firma spot (add_details) — tarjeta de autorización con PIN.
   Vive en el panel lateral de firmas (#signature-container), en reemplazo de las
   formas de firma (escribir/dibujar/subir). Reutiliza los tokens del proyecto y el
   mismo lenguaje visual del campo PIN del modal de enrolamiento.
   ============================================================================ */

.spot-sign {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3);
}

/* El panel (#signature-container.second-step) fuerza padding lateral 0 y añade
   padding-left a los <p> genéricos; en la tarjeta spot el espaciado lo da el
   contenedor, así que neutralizamos ese padding para que título, campo PIN y
   textos queden alineados y con el mismo margen. */
#signature-container.second-step .spot-sign p {
  padding-left: 0;
}

.spot-sign__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--text-brand);
  font-weight: var(--font-weight-semibold);
}

.spot-sign__description {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.spot-sign__pin-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.spot-sign__pin-field label {
  font-weight: var(--font-weight-semibold);
  color: var(--text-brand);
}

.spot-sign__pin-input {
  position: relative;
  display: flex;
  align-items: center;
}

.spot-sign__pin-icon {
  position: absolute;
  left: 0.9rem;
  color: var(--text-muted);
  pointer-events: none;
}

.spot-sign__pin-input input {
  width: 100%;
  padding: var(--space-3) 2.75rem var(--space-3) 2.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  color: var(--text-default);
}

.spot-sign__pin-input input::placeholder {
  color: var(--text-muted);
}

.spot-sign__pin-input input:focus-visible {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--focus-ring);
}

.spot-sign__pin-toggle {
  position: absolute;
  right: 0.5rem;
  display: flex;
  align-items: center;
  padding: var(--space-2);
  border: 0;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}

.spot-sign__pin-toggle:hover {
  color: var(--text-default);
}

.spot-sign__hint {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--text-brand);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
}

.spot-sign__hint i {
  flex-shrink: 0;
  color: var(--brand-navy-700);
}

.spot-sign__error {
  margin: 0;
  color: var(--danger-500);
  font-size: var(--text-sm);
}

/* ----------------------------------------------------------------------------
   Rechazo de firma spot: botón (bajo los controles de firma) + form del modal.
   ---------------------------------------------------------------------------- */
.spot-refuse {
  display: flex;
  flex-direction: column;
}

.spot-refuse__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--danger-700);
  border-color: var(--danger-200);
}

.spot-refuse__trigger:hover {
  background: var(--danger-50);
  border-color: var(--danger-300);
  color: var(--danger-700);
}

.spot-refuse__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.spot-refuse__description {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.spot-refuse__label {
  font-weight: var(--font-weight-semibold);
  color: var(--text-brand);
}

.spot-refuse__textarea {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  color: var(--text-default);
  resize: vertical;
  min-height: 6rem;
}

.spot-refuse__textarea:focus-visible {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--focus-ring);
}

.spot-refuse__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
}
/*
 * _modals.css — Sistema de modales
 * FirmaYa / zappb
 *
 * La app tiene 3 implementaciones de modal con distintos propósitos:
 *
 *   1. .auth-modal        → modal de autenticación inline (Turbo Frame)
 *   2. .modal             → modal de previsualización PDF (legacy jQuery-style)
 *   3. #modal-descripcion / .modal-mensaje / .modal-confirmar / .modal-final
 *                         → modales del flujo de firma (controlados por Stimulus)
 *
 * NOTA: Los modales del flujo de firma (#3) tienen estado complejo
 * manejado con clases CSS (.visible, .hidden) y son candidatos a
 * migración completa a Stimulus en una fase posterior.
 *
 * MIGRADO DESDE application.css — líneas ~2142–2430, ~5997–6022
 * Al aplicar este archivo, comentar/eliminar esos bloques del archivo legacy.
 */


/* ============================================================
   1. AUTH MODAL — modal de autenticación inline (Turbo Frame)
   ============================================================ */

.auth-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);   /* 9999 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-modal .modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1;
}

.auth-modal turbo-frame {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.auth-modal .optionContent {
    position: relative;
    z-index: 2;
    background: #f8f8fc;
    border-radius: 8px;
    padding: 35px 52px;
    min-width: 435px;
    max-width: 90vw;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    justify-content: space-between;
    h2.title {
        display: flex;
        font-size: 20px;
        align-items: center;
        justify-content: center;
        margin: 0 0 6px 0;
        span{
            margin-left: 8px;
            display: inline-block;
            font-size: 12px;
            padding: 0px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 2px solid #49B7D2;
            color: #49B7D2;
            text-align: center;
            font-weight: bold;
            cursor: pointer;
        }
    }
    p {
        text-align: center;
        font-weight: 400;
        margin-bottom: 0;
    }
    .container-labelInput {
        width: auto;
        margin: 12px auto;
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: center;
        justify-content: center;
    }
    label {
        color: #162F85;
        font-weight: 600;
        padding-left: 3px;
        font-size: 18px;
    }
    input {
        font-size: 14px;
        border: 1px solid #162F85;
        border-radius: 12px;
        width: 150px;
        text-align: center;
        padding: 8px 6px;
        color: #51517D !important;
    }
}

/* Body lock cuando un modal está abierto */
body.modal-open {
    overflow: hidden;
}


/* ============================================================
   2. MODAL GENÉRICO — previsualización PDF
   ============================================================ */

.modal {
    display: none;
    position: fixed;
    z-index: var(--z-base);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: var(--color-overlay);
}

.modal-content {
    display: flex;
    height: 95vh;
    flex-direction: column;
    align-items: center;
    background: var(--color-bg-white);
    padding: 10px;
    border: 1px solid #888;
    border-radius: 15px;
    transform: scale(0.9);
    width: 50%;
    margin: auto;

    span.close {
        left: 96%;
        top: 1.5%;
    }
}

.modal-pdf {
    transform: scale(0.9);
    height: 70vh;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    .informacion-perfil {
        width: 25%;
    }

    .header-canvas {
        display: flex;
        margin-left: auto;
        margin-right: 0;
        width: fit-content;
        justify-content: flex-end;

        input {
            width: 13%;
        }
    }

    .canvas-container {
        margin-left: auto;
        margin-right: 0px;
        display: flex;
        height: 60vh;
        width: fit-content;
        flex-direction: column;
        align-items: center;

        canvas {
            height: 100%;   /* reemplaza -webkit-fill-available */
            width: 31vw;
        }
    }
}

.modalOpcion{
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100%;
        background: #00000061;
        justify-content: center;
        align-items: center;
        z-index: 9999;
        .content{
            margin: 14vh auto auto;
            width: auto;
            padding: 0px 135px 35px;
            min-width: 50vw;
            display: flex;
            flex-direction: column;
            background: #f8f8fc;
            border-radius: 8px;
            h2.title {
                color: #162F85;
                font-weight: bold;
                text-align: center;
            }
            p{
                color: #162F85;
                font-weight: 600;
            }
            ul{
                padding: 0 0 12px;
                margin: 0;
                border-bottom: 2px solid #162F85;
                li{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .info {
                        color: #162F85;
                    }
                     .contador{
                        button{
                            height: 4vh;
                            width: 2.5vw;
                            border-radius: 6px;
                            border: none;
                            background: #162F85;
                            color: #ffff;
                            cursor: pointer;
                        }
                        input.numeroFirma {
                            margin: 0 6px;
                            width: 3vw;
                            height: 4vh;
                            border-radius: 6px;
                            border: none;
                            text-align: center;
                            box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.14);
                            color: #162F85;
                        }
                    }            
                }
            }
           
            .infoTotal {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 15px;
                p {
                    color: #162F85;
                    font-weight: bold;
                }
                input.numTotalFirmas {
                    border: none;
                    color: #162F85;
                    font-weight: bold;
                    text-align: right;
                    background:transparent;
                }
            }
            .containerBtnes {
                display: flex;
                justify-content: space-between;
                .btn-back{
                    background: none !important;
                    text-decoration: none;
                    flex-direction: row-reverse;
                    border: 2px solid #00bad4 !important;
                    color: #00bad4 !important;
                    font-weight: 600;
                    display: flex;
                    justify-content: space-evenly;
                    border-radius: 20px !important;
                    padding: 8px;
                    font-size: 16px !important;
                    min-width: 140px;
                    cursor: pointer !important;
                    margin: 0 !important;
                }
                .btn-foward{
                    display: flex;
                    background: #00bad4;
                    align-items: center;
                    justify-content: space-around;
                    border: none;
                    cursor: pointer !important;
                    color: #fff;
                    font-size: 16px !important;
                    font-weight: 600;
                    border-radius: 20px !important;
                    padding: 8px;
                    min-width: 140px;
                    margin: 0 !important;
                }
                .btn-back:hover{
                    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
                }
                .btn-foward:hover{
                    background: #66d9f5;
                    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
                }
            }
        }
        .optionContent{         
            width: 435px;
            padding: 35px 52px;
            min-width: 0;
            gap: 9px;
            justify-content: space-between;
            min-height: 260px;
            h2.title{
                display: flex;
                font-size: 20px;
                align-items: center;
                justify-content: center;
                margin: 0 0 6px 0;
                span{
                    margin-left: 8px;
                    display: inline-block;
                    font-size: 12px;
                    padding: 0px;
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    border: 2px solid #49B7D2;
                    color: #49B7D2;
                    text-align: center;
                    font-weight: bold;
                    cursor: pointer;
                }
            }
            p{
                text-align: center;
                font-weight: 400;
                margin-bottom: 0;
            }
            .container-labelInput{
                width: auto;
                margin: 12px auto;
                display: flex;
                flex-direction: row;
                gap: 10px;
                align-items: center;
                justify-content: center;
                label{
                    color: #162F85;
                    font-weight: 600;
                    padding-left: 3px;
                    font-size: 18px;
                }
                input{
                    font-size: 14px;
                    border: 1px solid #162F85;
                    border-radius: 12px;
                    width: 150px;
                    text-align: center;
                    padding: 8px 6px;
                    color:#51517D !important;
                }
                #rutConfirmacion{
                    width: 100%;
                }
                #rutConfirmacion:-webkit-autofill {
                    -webkit-text-fill-color: #51517D;
                }
                #rutConfirmacion::placeholder {
                    color: #A7A7A7;
                }
            }
            .containerBtnes{
                &:not(.warning) { margin-top: 43px; }
                .btn-back:hover{
                    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
                }
                .btn-foward:hover{
                    background: #66d9f5;
                    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
                }
            }
        }
        .optionContent:has(.title-sms){
            width: auto;
            .container-inputRegistro{
                width: 100%;
                .otp-container{
                    justify-content: space-evenly;
                    display: flex;
                    input{
                        height: 55px;
                        width: 55px;
                        font-size: 25px;
                        border: 1px solid #162f855e
                    }
                    input:focus{
                        border-color:#162F85;
                    }
                }
            }
            
        }
}
.showOption{
    display: flex;
}
.miCuenta-container:has(.miCuenta-content){
    .payment-text{
        display: none;
    }
}
.miCuenta-container:has(.planes-content){
    .account-text{
        display: none;
    }
}

/* Botón cerrar modal genérico */
span.close {
    position: absolute;
    left: 68%;
    top: 17%;
    color: var(--color-secondary);
    padding: 0px 6px;
    cursor: pointer;
    font-size: var(--text-display-md);   /* 30px */
}


/* ============================================================
   3. MODALES DEL FLUJO DE FIRMA
   (estado controlado por Stimulus con clases .visible / .hidden)
   ============================================================ */

/* Overlay base — informativo y de confirmación */
#modal-descripcion {
    display: none;
    position: fixed;
    height: 100vh;
    width: 100vw;
    top: 0;
    right: 0;
    background-color: var(--color-overlay-dark);
    z-index: var(--z-modal);
}

/* Tarjeta de contenido compartida */
/*.contenedor-descripcion,
.container-mensaje,
.container-final*/
.container-mensaje {
    background: #f9f7fd;
    border: 1px solid #003654;
    width: 41%;
    height: auto;
    margin-top: 108px;
    margin: auto;
    padding: 17px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    h3 {
        margin-bottom: 35px;
    }

    p {
        margin-top: 0px;
        font-size: var(--text-xl);   /* 20px */
        max-width: 345px;
        color: var(--color-text-dark);
    }
}
/*.modal-mensaje,
.modal-final,
.modal-confirmar*/
/* V8.8(d): valores hardcoded migrados a tokens DS (scrim color
   matching .pdf-container .modal-pdf-firma del moderno; spacing
   con var(--space-*); transition fast). El esqueleto (display:
   none, position fixed, fullscreen) se mantiene — es el contrato
   con el Stimulus layout-controller que toggle .visible/.hidden.
   No se elimina el bloque entero: cubre layout interior (.content-
   mensaje column flex, h3/p spacing) que el moderno
   sign_position_modern.css no redefine. */
.modal-pdf-firma {
    display: none;
    position: fixed;
    height: 100vh;
    width: 100vw;
    transition: var(--transition-base);
    top: 0;
    right: 0;
    background-color: rgba(14, 16, 36, 0.55);
    z-index: var(--z-modal);

    #iconoSend {
        margin: auto;
        box-shadow: none;
        width: 310px;
    }

    .content-mensaje {
        display: flex;
        align-items: center;
        height: 100%;   /* reemplaza -webkit-fill-available */
        flex-direction: column;

        h3 {
            margin-bottom: var(--space-2);
        }

        p.pregunta {
            font-weight: var(--font-weight-semibold);
            padding: var(--space-2);
        }

        .container-btnConfirmar {
            margin-top: var(--space-6);
            margin-bottom: var(--space-5);
        }

        .mensajeFinal {
            font-size: var(--text-base) !important;
        }
        .mensajeFinal.folder{
            display: none;
        }
    }

    p {
        font-weight: var(--font-weight-bold);
        font-size: var(--text-base);
        padding: 0;
    }

    p.pregunta {
        font-weight: var(--font-weight-semibold);
        padding: var(--space-2);
    }
}

/* Variante: mensaje de firma completada (transición de visibilidad) */
.container-mensaje.mensaje-firmado {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    transition: 3s;

    &.visible {
        visibility: visible;
        opacity: 1;
        position: relative;
    }
}
.modal-mensaje.mensaje-firmado{
    visibility: hidden;
    opacity: 0;
    transition: 0.5s;
}
.visible{
    visibility: visible !important;
    opacity: 1 !important;
}
.hidden{
    visibility: inherit !important;
    opacity: 0 !important;
    transition: 0.5s;
}

/* Variante: confirmación oculta */
.modal-mensaje.confirmar-firma.hidden {
    .container-mensaje.confirmar-firma {
        visibility: hidden;
        opacity: 0;
        position: absolute;
    }
}

/* Tarjeta descripción — padding extra y texto más pequeño */
.contenedor-descripcion {
    padding-bottom: 30px;

    h3 {
        margin-top: 15px;
        margin-bottom: 38px;
    }

    p {
        margin-bottom: 8px;
        color: var(--color-text-mid) !important;
        font-size: var(--text-md) !important;
        font-weight: 600 !important;
        max-width: max-content !important;
    }

    #btnContinuar {
        margin-top: 44px;
    }
}

/* Área de contenido interior del modal */
.content-mensaje {
    margin: auto;
    display: grid;
    gap: 0px;
    justify-items: center;

    #iconoFirmado {
        margin: auto;
        box-shadow: none;
        width: 310px;
    }

    .container-btnConfirmar {
        display: flex;
        justify-content: space-around;
        width: 100%;   /* reemplaza -webkit-fill-available */

        /* btn-no visible dentro del modal (override del hidden global) */
        .btn-no,
        .btn.btn--outline {
            visibility: visible;
        }
    }
}

/* Botones de confirmación del modal (#btnContinuar, #confirmarFirma) */
#btnContinuar,
#confirmarFirma {
    margin-top: 23px;
    padding: 8px;
    width: 136px;
    border-radius: var(--radius-xl);    /* 16px */
    border: none;
    color: #fff;
    background: var(--color-secondary);
    cursor: pointer;
    box-shadow: var(--shadow-md);

    &:hover {
        background: var(--color-secondary-hover);
        box-shadow: none;
    }
}



/* Variante personalizada (firma arrastrable enviada) */
.enviadoPersonalizado {
    transition: var(--transition-slow);

    p {
        max-width: 30vw !important;
        width: 30vw;
        color: var(--color-primary-dark) !important;
        font-weight: 600;
        font-size: var(--text-lg) !important;
    }

    &.visible {
        left: 0%;
        display: flex;
    }
}

/* Estado inicial — fuera de pantalla, entra con .visible */
.modal-mensaje,
.modal-confirmar {
    left: -170%;
}

.modal-mensaje.visible {
    left: 0;
}

/* Modal de confirmación — ajustes de texto */
.modal-confirmar {
    h3 {
        margin-bottom: 17px;
    }

    p {
        max-width: 409px !important;
        margin-bottom: 40px;
    }
}

/* Override cuando el documento ya fue enviado */
.content-section:has(.enviado) ~ .container-modales {
    p {
        font-size: var(--text-lg) !important;
        max-width: 400px !important;
    }

    .text-registrar {
        display: block !important;
    }
}
/*
 * _switch.css — Toggle switch
 * FirmaYa / zappb
 *
 * Implementación CSS puro — un checkbox oculto controla el estado.
 *
 * Uso en vistas:
 *   <label class="switch">
 *     <%= f.check_box :campo, class: "" %>
 *     <span class="slider"></span>
 *   </label>
 *
 * MIGRADO DESDE application.css — líneas ~195–234
 * Al aplicar este archivo, comentar/eliminar esos bloques del archivo legacy.
 */

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

.switch {
    position: relative;
    display: inline-block;
    width: 47px;
    height: auto;
}

/* Ocultar el checkbox nativo */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}


/* ============================================================
   TRACK (pista del slider)
   ============================================================ */

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: var(--transition-slower);   /* 0.4s */
    border-radius: 34px;
    height: 22px;
    width: 48px;
}


/* ============================================================
   THUMB (círculo deslizante)
   ============================================================ */

.slider:before {
    position: absolute;
    content: "";
    height: 15px;
    width: 15px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: var(--transition-slower);   /* 0.4s */
    border-radius: var(--radius-full);
}


/* ============================================================
   ESTADO ACTIVO (checked)
   ============================================================ */

input:checked + .slider {
    background-color: var(--color-secondary);
}

input:checked + .slider:before {
    transform: translateX(26px);
}
/*
 * _tooltips.css — Tooltips
 * FirmaYa / zappb
 *
 * La app usa dos implementaciones de tooltip:
 *
 *   1. .tooltip-icon / .tooltip-box  → tooltip hover con ícono info (standalone)
 *   2. .tooltip (inline, dentro del flujo de firma)  → se deja en _sign.css
 *      porque está acoplado al estado del PDF viewer
 *
 * Uso:
 *   <span class="tooltip-icon">
 *     <i class="fas fa-info-circle"></i>
 *     <span class="tooltip-box">Texto del tooltip</span>
 *   </span>
 *
 * MIGRADO DESDE application.css — líneas ~4838–4868
 * Al aplicar este archivo, comentar/eliminar esos bloques del archivo legacy.
 */

/* ============================================================
   CONTENEDOR ÍCONO + TOOLTIP
   ============================================================ */

.tooltip-icon {
    width: auto !important;
    border: none !important;
    position: relative;   /* necesario para el absolute del tooltip-box */

    /* Mostrar tooltip al hacer hover sobre cualquier ícono activador */
    .fa-info-circle:hover ~ .tooltip-box,
    .info-icon:hover ~ .tooltip-box,
    .fa-lightbulb.light-on:hover ~ .tooltip-box {
        visibility: visible;
        opacity: 1;
    }
}
.tooltip-wrapper:hover{
    display: flex;
    button:disabled ~ .tooltip-box {
        visibility: visible;
        opacity: 1;
        transform: translate(205px, -14px);
        transition: none;
    }
}

/*tooltip btn continuar en firma personalizada*/
.tooltip-btn{
    display: none;
    visibility: visible !important;
    opacity: 1 !important;
}
#signature-controls:hover{ 
    .tooltip-box{
        display: block;
        margin-left: 280px;
        margin-bottom: 50px;
        max-width: 200px;
    }
    #continue-button.activo ~ .tooltip-box{
        display: none;
    }
}


/* ============================================================
   CAJA DEL TOOLTIP
   ============================================================ */

.tooltip-box {
    transition: var(--transition-base);
    visibility: hidden;
    opacity: 0;
    position: absolute;
    font-size: var(--text-sm);        /* 12px */
    max-width: 300px;
    width: max-content;
    background: var(--color-bg-white);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-xl) !important;   /* 16px */
    padding: 4px 12px !important;
    margin-left: 5px;
    line-height: 1.2;
    z-index: var(--z-tooltip);
    white-space: normal;
}

/* Variante seguridad — borde y texto en cyan */
.tooltip-box.security {
    color: var(--color-secondary-lt);
    width: max-content !important;
    height: auto !important;
    font-weight: 400 !important;
    border: 1px solid var(--color-secondary-lt) !important;
}

/* Imagen de ejemplo dentro de un tooltip (ej. dónde ubicar un dato en un documento) */
.tooltip-box__image {
    display: block;
    width: 100%;
    max-width: 560px;
    border-radius: var(--radius-md);
}

/* Label + ícono de ayuda en una misma fila (dentro de un contenedor flex-column) */
.label-with-help {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}
/*
 * header.css — Header y dark mode
 * FirmaYa / zappb
 *
 * Cubre: .headerFirma (todas las variantes), .dark .headerFirma,
 *        .menuSidebar, dropdowns de navegación, .content-section
 *
 * Al final del archivo: bloque de MODERNIZACIÓN (sticky, focus-visible,
 *                      skip-link, mobile drawer). Usa tokens semánticos.
 *
 * EXTRAÍDO DESDE application.css
 */

/* bloque .side-bar eliminado — partial layouts/_side_bar.html.erb era placeholder no usado */


.dark .headerFirma{
    border: 1px solid #01202d;
    background: linear-gradient(0deg, #001a25 0%, #000c10 100%);
    i.fas {
        color: #bbf5ff !important;
    }
}
.headerFirma{
    width: 100vw;
    height: 70px;
    /*background: #004663;*/
    background:  linear-gradient(-90deg, #1f476e 0%, #173451 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 12px;
    div.section-1 {
        display: flex;
        align-items: center;
        img{
            width: 150px;
            height: -webkit-fill-available;
        }
        .menu-icon {
            width: 25px;
            height: 19px;
            display: none;
            flex-direction: column;
            justify-content: space-between;
            cursor: pointer;
            .line {
                width: 100%;
                height: 3px;
                background-color: #ffffff;
                transition: transform 0.7s ease;
            }
        }
    }
    /* Alinear botones de no registrado en una fila */
    .section-noRegistrado{
        display: flex;
        gap: 12px;
        align-items: center;
    }
    div.section-1.open{
        .menu-icon .line:nth-child(1) {
            transform: rotate(45deg) translateY(11px);
        }
        .menu-icon .line:nth-child(2) {
            opacity: 0;
        }
        .menu-icon .line:nth-child(3) {
            transform: rotate(-45deg) translateY(-11px);
        }
    }
    #volverInicio{
        cursor: pointer;
        width: 65%;
    }
    .menuSidebar{
        visibility: visible;
        opacity: 1;
        width: 645px;
        display: flex;
        align-items: center;
        color: #e2edee;
        justify-content: space-between;
        font-size: 14px;
        transition: 0.3s;
        .menu-content{
            display: flex;
            gap: 8px;
            align-items: center;
            cursor: pointer;
        }
        .submenu {
            display: flex;
            visibility: hidden;
            position: absolute;
            z-index: 2;
            min-width: 120px;
            width: max-content;
            padding: 15px;
            margin-top: 8px;
            gap: 5px;
            color: #222D8B;
            flex-direction: column;
            transition: transform 0.3s;
            .submenu-item{
                cursor:pointer;
                a{
                    text-decoration: none;
                    color: #222D8B;
                }
            }
            .submenu-item:hover{
                font-weight: 600;
            }
        }
        .submenu-active{
            
            visibility: visible;
            background: #ebf4f5;
            border-radius: 8px;
            box-shadow: 0px 0 10px rgba(0, 0, 0, 0.2);
           /* top: 8%;
               
            min-width: 190px;*/
        }
        .fas.fa-chevron-down.arrow-down{
            cursor: pointer;
            transition: transform 0.3s;
        }
        .rotate {
            transform: rotate(180deg);
            
        }
    }
    div.section-2 {
        display: flex;
        gap: 12px;
        width: auto;
        /* min-width: 274px; */
        justify-content: space-around;
        align-items: center;
        .container-firmasDisponibles{
            height: 30px;
            width: auto;
            display: flex;
            color: rgb(255, 255, 255);
            padding: 0 12px;
            background: rgb(0, 186, 212);
            border-radius: 25px;
            align-items: center;
            justify-content: center;
            .num-firmas {
                display: flex;
                gap: 2px;
                font-size: 14px;
                align-items: center;
                cursor: pointer;
                img{
                    height: 22px;
                }
                p{
                    margin: 0;
                }
                i{
                    cursor: pointer;
                    transition: 0.3s;
                }
                .fa-chevron-down.arrow-down{
                    font-size: 12px;
                    margin-left: 2px;
                }
            }
            .detalle-firmas{
                display: none;
            }
        }
        .showContentFirma{
            flex-direction: column;
            align-items: flex-end;
            .num-firmas{
                /* V11.7e — selector específico al chevron toggle.
                   Antes `i {}` matcheaba todos los <i> descendientes,
                   rotando también el .fa-signature decorativo (agregado
                   post-rediseño moderno al lado izquierdo del botón).
                   Solo el indicador de toggle debe rotar. */
                i.fa-chevron-down{
                    transform: rotate(180deg);
                }
            }
            .detalle-firmas{
                position: absolute;
                z-index: 2;
                display: flex;
                flex-direction: column;
                height: auto;
                width: 190px;
                background: #fff;
                margin-top: 16vw;
                padding: 0px 13px 10px;
                border-radius: 4px;
                box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 0.14);
                h4{
                    color: #222D8B;
                    border-bottom: 2px solid #012f8980;
                    padding-bottom: 10px;
                    margin-bottom: 12px;
                }
                p{
                    margin: 5px;
                    color: #222D8B;
                    display: flex;
                    justify-content: space-between;
                    font-weight: 600;
                    span{
                        font-weight: bold;
                    };
                }
                button{
                    margin: 25px auto 12px;
                }
                button:hover{
                    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
                }
            }
        }
        a, .btn-logout{
            display: flex;
            align-items: center;
            text-decoration: none;
            i.fas {
                color: #00bad4;
            }
            .fa-user{
                cursor: pointer;
            }
        }
        .btn-logout{
            background: transparent;
            border: none;
            padding-left: 0px;
            font-size: 16px;
            cursor: pointer;
        }
        .infoLogoAccount{
            display: none;
            min-width: 191px;

            justify-content: center;
            align-items: center;
            background-color: #ffff;
            border-radius: 11px;
            padding: 5px 12px;
            height: fit-content;
            .img-userAccount{
                height: 35px;
            }
            h4{
                margin: 0;
                color: #222D8B;
            }
        }
        .switch-section{
            display: flex;
            width: 90px;
            justify-content: space-between;
        }
        .user-information {
            visibility: hidden;
            opacity: 0;
            z-index: 4;
            transition: 0.5s;
            position: absolute;
            padding: 12px 25px;
            border-radius: 8px;
            top: 60px;
            right: 5px;
            background: #fff;
            box-shadow: 0px 6px 6px 3px rgba(0, 0, 0, 0.14);
            color: #222D8B;
            img {
                height: 35px;
            }
            h2{
                font-size: 19px;
                margin: 5px 0 0 0;
                padding-bottom: 12px;
                text-align: center;
                border-bottom: 1px solid #222D8B;
            }
            .choise-user{
                text-align: center;
                border-bottom: 1px solid #222D8B;
                padding: 15px 0;
                img{
                    font-size: 35px;
                }
                h4{
                    margin-top: 5px;
                    margin-bottom: 0;
                    i.fas.fa-cogs {
                        font-size: 18px;
                        /* V11.9.1 Legacy 2: #222D8B → var(--text-brand).
                           Token semántico mantiene #222D8B en light (idéntico
                           al hardcoded original) y cambia automáticamente a
                           #C4C8FF (navy-300 invertido) en dark, eliminando
                           el override defensivo V11.5f Fix 1 que necesitaba
                           !important para vencer la specificity expandida
                           del nested .choise-user h4 i.fas.fa-cogs. */
                        color: var(--text-brand);
                    }
                }
                .goMiCuenta{
                    cursor: pointer;
                }
                p{
                    font-size: 12px;
                    margin-top: 0;
                }
            }
            .container-optionUser{
                display: flex;
                flex-direction: column;
                gap: 16px;
                border-bottom: 1px solid #222D8B;
                padding: 16px 0;

                .profile-form {
                    width: 100%;
                    display: block;
                }

                .profile-button {
                    all: inherit;
                    background: transparent;
                    border: none;
                    margin: 0;
                    width: 100%;
                    cursor: pointer;
                    transition: background-color 0.2s ease;
                    &:hover {
                        background-color: #f8f9fa;
                    }
                }

                .option-user{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    h4{
                        margin: 0;
                    }
                    .datos-user{
                        display: flex;
                        cursor: pointer;
                        p{
                            margin: 0;
                            font-size: 12px;
                        }
                    }
                    i{
                        font-size: 22px;
                        color: #222D8B;
                    }
                }
                .option-user.añadir-cuenta{
                    justify-content:left;
                }
            }
            .close-sesion{
                display: flex;
                align-items: center;
            }
            
        }
        .show-userInformation{
            visibility: visible;
            opacity: 1;
        }
    }
    .section-noRegistrado{
        .btn-registrar{
            text-decoration: none;
            height: 35px;
            font-size: 14px;
            padding: 1px 16px;
            text-transform: math-auto;
            i.fas.fa-user {
                margin-right: 5px;
                font-size: 14px;
            }
        }
        a.btn-iniciar{
            color: #222D8B !important;
            background: #fff;
            height: 35px;
        }
    }
    .section-registro {
        display: flex;
        align-items: center;
        gap: 12px;
        label{
            font-size: 16px;
        }
        .select-container{
            display: flex;
            height: 25px;
            min-width: 100px;
            width: auto;
            background-color: #ffff;
            border-radius: 7px;
            opacity: 100%;
            justify-content: flex-start;
            align-items: center;
            img {
                height: -webkit-fill-available;
                padding: 7px 2px 7px 9px;
            }
            select#paisRegistro {
                padding: 0px 5px;
                min-width: 75px;
                font-size: 16px;
                position: relative;
                z-index: 1;
                border: none;
                background: transparent;
                cursor: pointer;
            }
            i.fa-chevron-down{
                position: absolute;
                font-size: 14px;
                right: 23px;
                z-index: 0;
                color: #49B7D2;
            }
        }
    }
   

}
.headerFirma:has(.menuSidebar){
    #volverInicio{
        width: auto;
    }
}
.headerFirma.enviado{
    .section-2{
        display: none;
    }
    .section-noRegistrado{
        display: flex !important;
        align-items: center;
        width: 240px;
        justify-content: space-between;
        .btn-iniciar{
            border: 2px solid #00bad4;
            color: #00bad4;
            background: #fff;
            box-shadow: none;
        }
        .btn-registrar{
            box-shadow: none;
        }
    }
}


/* ============================================================
   MODERNIZACIÓN — overrides con tokens
   ============================================================
   Bloque aditivo. Usa la cascada para modernizar el header
   existente sin reescribir las 400+ líneas legacy anteriores.
   - Sticky + elevación sutil en scroll
   - :focus-visible ring accesible (WCAG 2.4.7)
   - Skip-link para teclado (WCAG 2.4.1)
   - Backdrop del menú móvil
   ============================================================ */

/* Skip-link — salta al contenido principal (sólo visible con foco) */
.skip-link {
  position: absolute;
  top: -40px;
  left: var(--space-2);
  z-index: var(--z-modal);
  padding: var(--space-2) var(--space-4);
  background: var(--brand-navy-700);
  color: var(--text-on-brand);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  transition: top var(--transition-fast);
}

.skip-link:focus-visible {
  top: var(--space-2);
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Header — sticky + gradiente actualizado con tokens de marca */
.headerFirma {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: linear-gradient(-90deg, var(--brand-navy-800) 0%, var(--brand-navy-900) 100%);
  box-shadow: var(--elevation-1);
  transition: box-shadow var(--transition-fast), background var(--transition-fast);
}

.headerFirma.is-scrolled {
  box-shadow: var(--elevation-2);
}

/* Focus-visible uniforme en elementos interactivos del header */
.headerFirma a:focus-visible,
.headerFirma button:focus-visible,
.headerFirma .menu-content:focus-visible,
.headerFirma .submenu-item:focus-visible,
.headerFirma [role="button"]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* Menú móvil — alineado al breakpoint legacy de 960px.
   La regla legacy en application.css fija display:flex en .menu-icon
   dentro de @media (max-width: 960px); aquí sólo añadimos backdrop. */
@media (max-width: 960px) {
  .headerFirma .section-1.open::after {
    content: "";
    position: fixed;
    inset: 70px 0 0 0;
    background: var(--surface-overlay);
    z-index: var(--z-base);
    animation: fade-in var(--transition-base) var(--ease-out);
  }

  @keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

/* Main content — asegurar que turbo-frame no colapse layout */
#main-content {
  outline: none;
}

#main-content:focus-visible {
  box-shadow: inset 0 0 0 3px var(--focus-ring-color);
}

turbo-frame#main {
  display: block;
}

/* ============================================================
   Header en estado INVITADO (sin sesión) en móvil.
   Escenario: firmante spot (sin cuenta) que llega a /sign/add_details
   desde el celular. El header invitado no estaba tuneado para móvil y
   se desbordaba: el logo (#volverInicio) tomaba width:65%, la
   hamburguesa se mostraba sin abrir ningún menú (el drawer sólo existe
   logueado) y los botones Ingresar/Registrar se agrandaban.
   Se apunta sólo al invitado con :not(:has(.menuSidebar)); el header
   logueado conserva su comportamiento. Especificidad > reglas mobile de
   responsive.css (que usan .headerFirma .section-noRegistrado ...).
   ============================================================ */
@media (max-width: 960px) {
  /* La hamburguesa no abre nada para invitados: se oculta. */
  .headerFirma:not(:has(.menuSidebar)) .section-1 .menu-icon {
    display: none !important;
  }

  /* Header invitado más compacto en móvil (evita la banda alta por defecto). */
  .headerFirma:not(:has(.menuSidebar)) {
    height: 60px;
  }

  /* El logo no debe acaparar el ancho; deja espacio a los botones. */
  .headerFirma:not(:has(.menuSidebar)) #volverInicio {
    width: auto;
    flex: 0 1 auto;
    min-width: 0;
  }

  /* Altura fija + ancho auto: el SVG del logo escala por su aspect ratio. Con
     width:auto/height:auto el SVG (sin dimensiones intrínsecas) colapsaba a un
     alto por defecto (~150px) → header alto y logo invisible. */
  .headerFirma:not(:has(.menuSidebar)) .section-1 img {
    height: 36px;
    width: auto;
    max-width: 100%;
  }

  /* Botones Ingresar / Registrar compactos y en una sola línea. */
  .headerFirma:not(:has(.menuSidebar)) .section-noRegistrado {
    flex: 0 0 auto;
    gap: 8px;
  }

  .headerFirma:not(:has(.menuSidebar)) .section-noRegistrado .btn-iniciar,
  .headerFirma:not(:has(.menuSidebar)) .section-noRegistrado .btn-registrar {
    height: 36px;
    font-size: 13px;
    padding: 0 12px;
    white-space: nowrap;
  }

}

/* Teléfonos (<=430px): se ocultan los iconos de los botones y se achica un poco
   más el logo para que Ingresar + Registrar entren sin desbordar. */
@media (max-width: 430px) {
  .headerFirma:not(:has(.menuSidebar)) .section-1 img {
    height: 32px;
  }

  .headerFirma:not(:has(.menuSidebar)) .section-noRegistrado .btn-iniciar i.fas,
  .headerFirma:not(:has(.menuSidebar)) .section-noRegistrado .btn-registrar i.fas {
    display: none;
  }

  .headerFirma:not(:has(.menuSidebar)) .section-noRegistrado .btn-iniciar,
  .headerFirma:not(:has(.menuSidebar)) .section-noRegistrado .btn-registrar {
    font-size: 12px;
    padding: 0 10px;
  }
}

/*
 * layout/header_modern.css — Header premium (paso 10)
 * FirmaYa / zappb
 *
 * Bloque aditivo sobre layout/header.css (legacy). No reemplaza las
 * reglas existentes — las extiende con especificidad mayor vía .headerFirma
 * o selectores compuestos para mantener compatibilidad con las
 * regla legacy que quedan en application.css.
 *
 * Cubre:
 *   1. Dropdown del submenu: card blanca, sombra moderna, iconos y separador.
 *   2. Pill "firmas disponibles": glass style sobre el navy del header,
 *      con label "Firmas" contextual.
 *   3. Drawer móvil: slide-in desde la derecha, con items iconificados
 *      (antes bajaba desde arriba top: -105%).
 *   4. Panel "detalle-firmas" expandido: tarjeta flotante con tipografía
 *      display, CTA cyan, triangulito.
 */


/* ============================================================
   1. DROPDOWNS MODERNOS — card + iconos + separador
   ============================================================
   Se aplica solo en >960px (desktop). En móvil el drawer usa otro
   tratamiento (sección 3 más abajo).
   ============================================================ */

@media (min-width: 961px) {

  /* Contenedor del submenu activo — parece una tarjeta moderna */
  .headerFirma .menuSidebar .submenu {
    position: absolute;
    top: 60px;
    min-width: 240px;
    padding: var(--space-2);
    margin-top: 6px;
    gap: 0;
    border-radius: var(--radius-xl);
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    box-shadow:
      0 1px 2px rgba(15, 18, 35, 0.04),
      0 16px 32px -12px rgba(15, 18, 35, 0.18),
      0 0 0 1px rgba(15, 18, 35, 0.04);
    opacity: 0;
    transform: translateY(-4px);
    transition:
      opacity var(--transition-fast),
      transform var(--transition-fast),
      visibility var(--transition-fast);
    pointer-events: none;
  }

  .headerFirma .menuSidebar .submenu.submenu-active {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    background: var(--surface-raised);
    box-shadow:
      0 1px 2px rgba(15, 18, 35, 0.04),
      0 16px 32px -12px rgba(15, 18, 35, 0.18),
      0 0 0 1px rgba(15, 18, 35, 0.04);
  }

  /* Triangulito apuntando al trigger (arriba del dropdown) */
  .headerFirma .menuSidebar .submenu.submenu-active::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 24px;
    width: 12px;
    height: 12px;
    background: var(--surface-raised);
    border-top: 1px solid var(--border-subtle);
    border-left: 1px solid var(--border-subtle);
    transform: rotate(45deg);
  }

  /* Cada item del submenu es una fila con icono + label */
  .headerFirma .menuSidebar .submenu .submenu-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-brand);
    transition:
      background-color var(--transition-fast),
      color var(--transition-fast);
    cursor: pointer;
  }

  .headerFirma .menuSidebar .submenu .submenu-item a {
    all: unset;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    color: inherit;
  }

  /* Ícono leading: color navy por defecto, cyan en hover */
  .headerFirma .menuSidebar .submenu .submenu-item > i,
  .headerFirma .menuSidebar .submenu .submenu-item a > i,
  .headerFirma .menuSidebar .submenu .submenu-item__icon {
    color: var(--brand-navy-700);
    font-size: 14px;
    width: 20px;
    text-align: center;
    transition: color var(--transition-fast), transform var(--transition-fast);
    flex-shrink: 0;
  }

  /* Hover: fondo cyan pale + texto brand cyan */
  .headerFirma .menuSidebar .submenu .submenu-item:hover {
    background: var(--brand-cyan-100);
    color: var(--brand-cyan-700);
  }

  .headerFirma .menuSidebar .submenu .submenu-item:hover > i,
  .headerFirma .menuSidebar .submenu .submenu-item:hover a > i,
  .headerFirma .menuSidebar .submenu .submenu-item:hover .submenu-item__icon {
    color: var(--brand-cyan-700);
    transform: translateX(1px);
  }

  /* Separador entre items (excepto el primero) */
  .headerFirma .menuSidebar .submenu .submenu-item + .submenu-item {
    border-top: 1px solid var(--border-subtle);
  }

  /* Estado disabled (items con badge "Próximamente") */
  .headerFirma .menuSidebar .submenu .submenu-item.is-disabled {
    cursor: not-allowed;
    opacity: 0.7;
  }
  .headerFirma .menuSidebar .submenu .submenu-item.is-disabled:hover {
    background: transparent;
    color: var(--text-muted);
  }

  /* Badge "Próximamente" — refinamiento global dentro del header */
  .headerFirma .proximamente,
  .headerFirma .badge-soon {
    background: var(--brand-cyan-100);
    color: var(--brand-cyan-700);
    border: 1px solid var(--brand-cyan-200);
    border-radius: var(--radius-round);
    font-size: 10px;
    padding: 2px var(--space-2);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
  }

  /* Menu-content trigger — chevron rota suave */
  .headerFirma .menuSidebar .menu-content {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast);
  }

  /* Gap entre icono leading (fa-pencil-alt / fa-file-alt / fa-user) y el
     texto del menu (span). El markup ERB tiene:
       <div class="menu-content">
         <div>
           <i class="fas fa-pencil-alt"></i>
           <span>...</span>
         </div>
         <i class="fa-chevron-down arrow-down"></i>
       </div>
     Le damos flex + gap al div interno para que el icono no quede pegado
     al texto. */
  .headerFirma .menuSidebar .menu-content > div {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }

  .headerFirma .menuSidebar .menu-content:hover {
    background: rgba(255, 255, 255, 0.08);
  }

  .headerFirma .menuSidebar .menu-content span {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-semibold);
  }

  .headerFirma .menuSidebar .menu-content .arrow-down {
    font-size: 11px;
    opacity: 0.75;
  }

  .headerFirma .menuSidebar .menu-item.submenu-active-parent .menu-content {
    background: rgba(255, 255, 255, 0.1);
  }
}


/* ============================================================
   2. PILL "FIRMAS DISPONIBLES" — glass style + contexto
   ============================================================ */

.headerFirma .section-2 .container-firmasDisponibles {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(102, 217, 245, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  height: 40px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-round);
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.headerFirma .section-2 .container-firmasDisponibles:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(102, 217, 245, 0.5);
  box-shadow: 0 2px 10px -4px rgba(102, 217, 245, 0.45);
}

.headerFirma .section-2 .container-firmasDisponibles .num-firmas {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: #fff;
  /* Reset del default del user-agent para <button> (gris #efefef) que dejaba
     un cuadro gris dentro del pill cyan. */
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
}

.headerFirma .section-2 .container-firmasDisponibles .num-firmas:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-round);
}

.headerFirma .num-firmas > i.fas:not(.arrow-down) {
  color: var(--brand-cyan-200);
  font-size: 14px;
}

.headerFirma .num-firmas__count {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-extra);
  font-size: var(--text-lg);
  color: #fff;
  letter-spacing: var(--tracking-snug);
  line-height: 1;
}

.headerFirma .num-firmas__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: rgba(255, 255, 255, 0.75);
  font-weight: var(--font-weight-semibold);
  margin-left: 2px;
}

.headerFirma .num-firmas .arrow-down {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
  margin-left: var(--space-1);
}


/* Panel expandido "Detalle firmas" — tarjeta moderna bajo el pill.
   !important en margin-top porque application.css body tiene un
   @media (min-width: 1840px) .detalle-firmas { margin-top: 220px !important }
   que empuja el panel ~220px hacia abajo en monitores XL. */
.headerFirma .section-2 .container-firmasDisponibles.showContentFirma .detalle-firmas {
  position: absolute;
  top: 60px;
  right: var(--space-4);
  margin-top: 0 !important;
  min-width: 260px;
  max-width: 320px;
  padding: var(--space-5);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow:
    0 1px 2px rgba(15, 18, 35, 0.04),
    0 16px 32px -12px rgba(15, 18, 35, 0.18);
  color: var(--text-strong);
  animation: firma-detail-in var(--transition-fast) var(--ease-out) both;
  z-index: var(--z-dropdown);
}

.headerFirma .section-2 .container-firmasDisponibles.showContentFirma .detalle-firmas h4 {
  font-family: var(--font-family-display);
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-snug);
  color: var(--text-strong);
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}

.headerFirma .section-2 .container-firmasDisponibles.showContentFirma .detalle-firmas p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-default);
}

.headerFirma .section-2 .container-firmasDisponibles.showContentFirma .detalle-firmas p span {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-xl);
  color: var(--brand-navy-700);
  letter-spacing: var(--tracking-snug);
}

.headerFirma .section-2 .container-firmasDisponibles.showContentFirma .detalle-firmas button {
  width: 100%;
  margin: 0;
  border: none;
  height: 40px;
  border-radius: var(--radius-md);
}

.headerFirma .section-2 .container-firmasDisponibles.showContentFirma .detalle-firmas button:active {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 1px 2px rgba(8, 145, 168, 0.15);
}

@keyframes firma-detail-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* Botón de logout refinado */
.headerFirma .close-sesion .btn--logout {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-round);
  color: #fff;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}

.headerFirma .close-sesion .btn--logout:hover {
  background: rgba(219, 6, 50, 0.18);
  border-color: rgba(219, 6, 50, 0.5);
  color: #FFB8C4;
}

.headerFirma .close-sesion .btn--logout i {
  font-size: 14px;
}


/* ============================================================
   DROPDOWN DE USUARIO — .container-user-information
   ============================================================
   Dropdown del ícono fa-user en el header. Legacy: caja blanca
   rectangular con border-bottom horizontales. Moderno: card tipo
   submenu con elevation, avatar pill gradient, items tipo list
   consistente con el dropdown "Detalle firmas". */

.headerFirma .section-2 .container-user-information {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.headerFirma .section-2 .container-user-information > a {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-round);
  color: #fff;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast);
}

.headerFirma .section-2 .container-user-information > a:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(102, 217, 245, 0.5);
}

.headerFirma .section-2 .container-user-information > a i {
  font-size: 14px;
  color: #fff;
}

/* Panel del dropdown */
.headerFirma .section-2 .container-user-information .user-information {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 320px;
  max-width: 360px;
  padding: var(--space-2);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow:
    0 1px 2px rgba(15, 18, 35, 0.04),
    0 16px 32px -12px rgba(15, 18, 35, 0.18),
    0 0 0 1px rgba(15, 18, 35, 0.04);
  color: var(--text-strong);
  animation: user-info-in var(--transition-fast) var(--ease-out) both;
  z-index: var(--z-dropdown);
}

/* Triangulito apuntando al trigger */
.headerFirma .section-2 .container-user-information .user-information::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 16px;
  width: 12px;
  height: 12px;
  background: var(--surface-raised);
  border-top: 1px solid var(--border-subtle);
  border-left: 1px solid var(--border-subtle);
  transform: rotate(45deg);
  border-top-left-radius: 2px;
}

.headerFirma .section-2 .container-user-information.show-userInformation .user-information,
.headerFirma .section-2 .container-user-information .show-userInformation {
  visibility: visible;
  opacity: 1;
}

/* Header del panel — nombre del user */
.headerFirma .section-2 .container-user-information .user-information > h2 {
  margin: 0;
  padding: var(--space-3) var(--space-4) var(--space-2);
  font-family: var(--font-family-display);
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
  color: var(--text-brand);
  letter-spacing: var(--tracking-snug);
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
}

/* Cuenta actual — avatar pill + email */
.headerFirma .section-2 .container-user-information .user-information .choise-user {
  padding: var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--space-3);
  row-gap: 2px;
  align-items: center;
}

/* Avatar: escondemos el <img src="/user.svg"> (su filter brightness(0)+
   invert(1) inverte todo el elemento incluida la bg gradient, dejando
   todo blanco → invisible) y renderizamos el avatar con ::before del
   .choise-user: círculo con gradient navy→cyan + icono user blanco via
   mask-image con SVG inline (evita dependencia de char codes de FA que
   Sprockets/CSS parser pueden procesar inconsistentemente). */
.headerFirma .section-2 .container-user-information .user-information .choise-user img {
  display: none !important;
}

.headerFirma .section-2 .container-user-information .user-information .choise-user::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-round);
  background:
    linear-gradient(135deg, var(--brand-navy-700) 0%, var(--brand-cyan-600) 100%);
  box-shadow:
    0 1px 2px rgba(15,18,35,0.08),
    0 8px 16px -8px rgba(34, 45, 139, 0.4);
  flex-shrink: 0;
  position: relative;
}

/* Icono user blanco en el centro del avatar, via ::after con mask-image */
.headerFirma .section-2 .container-user-information .user-information .choise-user::after {
  content: "";
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 20px;
  height: 20px;
  margin: auto;
  background: #fff;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path d='M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l388.6 0c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304l-91.4 0z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path d='M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l388.6 0c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304l-91.4 0z'/></svg>");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  pointer-events: none;
  align-self: center;
  justify-self: center;
}

.headerFirma .section-2 .container-user-information .user-information .choise-user h4 {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  text-align: left;
  border-bottom: none;
}

.headerFirma .section-2 .container-user-information .user-information .choise-user p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-default);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* "Configuración de cuenta" como item de menú */
.headerFirma .section-2 .container-user-information .user-information .choise-user .goMiCuenta {
  grid-column: 1 / span 2;
  margin: var(--space-2) 0 0;
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-md);
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--text-brand);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.headerFirma .section-2 .container-user-information .user-information .choise-user .goMiCuenta:hover {
  background: var(--brand-navy-100);
  color: var(--brand-cyan-700);
  }

.headerFirma .section-2 .container-user-information .user-information .choise-user .goMiCuenta i {
  width: 18px;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--brand-cyan-700);
}

/* Lista de perfiles asociados — "switch account" */
.headerFirma .section-2 .container-user-information .user-information .container-optionUser {
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-bottom: none;
}

.headerFirma .section-2 .container-user-information .user-information .container-optionUser .profile-form {
  width: 100%;
  margin: 0;
  display: block;
}

.headerFirma .section-2 .container-user-information .user-information .container-optionUser .profile-button {
  all: unset;
  width: 100%;
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
  display: block;
  box-sizing: border-box;
}

.headerFirma .section-2 .container-user-information .user-information .container-optionUser .profile-button:hover {
  background: var(--neutral-100);
}

.headerFirma .section-2 .container-user-information .user-information .option-user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.headerFirma .section-2 .container-user-information .user-information .option-user .datos-user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

/* Avatar de perfiles secundarios — mismo problema del filter invirtiendo
   el bg. Se esconde el img y se renderiza con ::before del .datos-user
   (círculo más pequeño, 32px). */
.headerFirma .section-2 .container-user-information .user-information .option-user .datos-user img {
  display: none !important;
}

/* Avatar de perfiles secundarios — mismo approach que el principal:
   absolute-positioned ::before con el círculo gradient + ::after con
   mask-image SVG para el user icon blanco. */
.headerFirma .section-2 .container-user-information .user-information .option-user .datos-user {
  position: relative;
  padding-left: 44px;
}

.headerFirma .section-2 .container-user-information .user-information .option-user .datos-user::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-round);
  background: linear-gradient(135deg, var(--brand-navy-700) 0%, var(--brand-cyan-600) 100%);
}

.headerFirma .section-2 .container-user-information .user-information .option-user .datos-user::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background: #fff;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path d='M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l388.6 0c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304l-91.4 0z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path d='M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l388.6 0c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304l-91.4 0z'/></svg>");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  pointer-events: none;
}

.headerFirma .section-2 .container-user-information .user-information .option-user .datos-user > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.headerFirma .section-2 .container-user-information .user-information .option-user .datos-user h4 {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-strong);
  line-height: 1.2;
}

.headerFirma .section-2 .container-user-information .user-information .option-user .datos-user p {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.headerFirma .section-2 .container-user-information .user-information .option-user i {
  color: var(--text-muted);
  font-size: 14px;
}

@keyframes user-info-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Mobile: full-width dropdown sticky a los bordes del viewport */
@media (max-width: 480px) {
  .headerFirma .section-2 .container-user-information .user-information {
    position: fixed;
    top: 60px;
    left: var(--space-3);
    right: var(--space-3);
    min-width: 0;
    max-width: none;
  }
  .headerFirma .section-2 .container-user-information .user-information::before { display: none; }
}


/* ============================================================
   3. DRAWER MÓVIL — slide-in desde la derecha
   ============================================================
   Legacy en application.css hace slide desde top (top:-105% → top:0).
   Lo reemplazamos por un drawer lateral sobre el mismo selector.
   ============================================================ */

@media (max-width: 960px) {

  /* Drawer móvil. El legacy en application.css body (require_self) carga
     DESPUÉS del header_modern por el orden del manifest y usa la misma
     especificidad (0,2,0) con otros valores (top:-105%, right:0, width:100vw,
     height:100vh, font-size:30px). Sin !important la modern perdía y el
     drawer quedaba SIEMPRE abierto y ocupando toda la pantalla.
     Se marcan !important las propiedades críticas del layout drawer. */
  .headerFirma .menuSidebar {
    position: fixed !important;
    top: 70px !important;
    right: -100% !important;
    bottom: 0 !important;
    left: auto !important;
    width: min(340px, 85vw) !important;
    height: auto !important;
    max-height: calc(100vh - 70px);
    max-height: calc(100dvh - 70px);
    background: var(--surface-raised) !important;
    color: var(--text-strong) !important;
    flex-direction: column;
    justify-content: flex-start !important;
    align-items: stretch;
    padding: var(--space-5) var(--space-4) var(--space-10);
    box-shadow: var(--elevation-4);
    border-left: 1px solid var(--border-subtle);
    transition: right var(--transition-base) var(--ease-out);
    overflow-y: auto;
    gap: var(--space-3);
    font-size: var(--text-md) !important;
    /* Drawer debe estar POR ENCIMA del backdrop (.section-1.open::after
       tiene z-index: var(--z-base) = 1). Sin z-index explícito, el
       drawer quedaba sepultado por el blur/overlay. */
    z-index: 5;
  }

  /* Abrir drawer cuando la hamburguesa tiene .open */
  #volverInicio.open ~ .menuSidebar {
    right: 0 !important;
  }

  /* Cada item del drawer: card plana con icono grande.
     Legacy application.css .menu-item { width: 400px } desborda el
     drawer (que es 340px); se fuerza width auto con !important. */
  .headerFirma .menuSidebar .menu-item {
    visibility: visible !important;
    opacity: 1 !important;
    background: var(--surface-raised) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    padding: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    box-shadow: none !important;
    overflow: hidden !important;
    animation: drawer-item-in 0.4s var(--ease-out) both;
  }

  #volverInicio.open ~ .menuSidebar .menu-item:nth-child(1) { animation-delay: 0.08s; }
  #volverInicio.open ~ .menuSidebar .menu-item:nth-child(2) { animation-delay: 0.16s; }
  #volverInicio.open ~ .menuSidebar .menu-item:nth-child(3) { animation-delay: 0.24s; }

  .headerFirma .menuSidebar .menu-content {
    display: flex !important;
    align-items: center;
    justify-content: space-between !important;
    padding: var(--space-4);
    gap: var(--space-3);
    font-family: var(--font-family-base);
    cursor: pointer;
    background: var(--surface-raised);
    border-radius: var(--radius-lg);
    transition: background-color var(--transition-fast);
  }

  .headerFirma .menuSidebar .menu-content > div {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-md);
    min-width: 0;
  }

  .headerFirma .menuSidebar .menu-content i.fas:not(.arrow-down) {
    color: var(--brand-navy-700) !important;
    font-size: 18px;
    width: 22px;
    text-align: center;
  }

  .headerFirma .menuSidebar .menu-content span {
    color: var(--text-strong);
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-md) !important;
  }

  /* Legacy application.css tiene .menuSidebar span { font-size: 30px !important }
     que inflaba cualquier <span> del drawer. Nos aseguramos de vencerlo. */
  .headerFirma .menuSidebar span,
  .headerFirma .menuSidebar .submenu span,
  .headerFirma .menuSidebar .submenu-item span {
    font-size: var(--text-md) !important;
  }

  .headerFirma .menuSidebar .menu-content:hover,
  .headerFirma .menuSidebar .menu-item.submenu-active-parent .menu-content {
    background: var(--brand-navy-100);
  }

  .headerFirma .menuSidebar .menu-content .arrow-down {
    color: var(--text-muted);
    font-size: 13px;
  }

  /* Submenu desplegado dentro del drawer = lista inline (no flotante).
     Legacy application.css .menuSidebar .submenu { display: flex } pisa
     por orden con misma especificidad — usamos !important para
     garantizar que estén COLAPSADOS por default y sólo expandan con
     .submenu-active (accordion por item, como en el preview). */
  .headerFirma .menuSidebar .submenu {
    position: static !important;
    display: none !important;
    visibility: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-top: 1px solid var(--border-subtle) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    min-width: 0 !important;
    flex-direction: column !important;
    gap: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    align-items: stretch !important;
    font-weight: var(--font-weight-medium) !important;
  }

  .headerFirma .menuSidebar .submenu.submenu-active {
    display: flex !important;
    animation: drawer-submenu-in var(--transition-fast) var(--ease-out) both;
    padding: var(--space-2) !important;
  }

  /* Chevron visible en cada menu-item parent en mobile.
     Legacy lo oculta con .menu-content i.arrow-down { display: none }
     cuando el menú está en modo drawer. */
  .headerFirma .menuSidebar .menu-content .arrow-down {
    display: inline-block !important;
    font-size: 13px !important;
    color: var(--text-muted) !important;
    transition: transform var(--transition-fast) var(--ease-out);
    flex-shrink: 0;
  }

  /* Rotar chevron cuando submenu está activo (accordion abierto).
     data-classes-toggle-icon-class='rotate' en cada menu-item añade la
     clase .rotate al icono; también cubrimos el caso :has(.submenu-active)
     por si la sincronización falla por cualquier razón. */
  .headerFirma .menuSidebar .menu-content .arrow-down.rotate,
  .headerFirma .menuSidebar .menu-item:has(.submenu.submenu-active) .menu-content .arrow-down {
    transform: rotate(180deg) !important;
  }

  /* Badge "Próximamente" — estilo cyan light pill (legacy es navy sólido).
     Coincide con tmp/design_preview/header.html .badge-soon en mobile.
     Letter-spacing más compacto para que quepa "PRÓXIMAMENTE" en 340px
     sin truncar el texto del submenu-item. */
  .headerFirma .menuSidebar .proximamente,
  .headerFirma .menuSidebar .badge-soon {
    display: inline-flex !important;
    align-items: center !important;
    background: var(--brand-cyan-100) !important;
    color: var(--brand-cyan-700) !important;
    border: 1px solid var(--brand-cyan-200) !important;
    border-radius: var(--radius-round) !important;
    font-size: 9px !important;
    padding: 2px 6px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    font-weight: var(--font-weight-semibold) !important;
    line-height: 1.4 !important;
    margin-left: auto !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Highlight del parent .menu-content cuando su submenu está activo —
     da feedback visual de "expandido" como en el preview. */
  .headerFirma .menuSidebar .menu-item:has(.submenu.submenu-active) > .menu-content {
    background: var(--brand-navy-100);
  }

  .headerFirma .menuSidebar .submenu::before { display: none; }

  /* Submenu-item mobile: misma tipografía, padding, gap, hover y disabled
     que el submenu-item desktop (ver bloque @media min-width:961px más
     arriba). Lo único mobile-specific es el layout grid 2-col para que el
     badge PRÓXIMAMENTE wrappee en una segunda fila debajo del texto (el
     drawer de 340px no siempre cabe el badge en línea única). */
  .headerFirma .menuSidebar .submenu .submenu-item {
    display: grid;
    grid-template-columns: 20px 1fr;
    column-gap: var(--space-3);
    row-gap: var(--space-1);
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-family: var(--font-family-base);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-brand);
    line-height: var(--leading-snug);
    transition:
      background-color var(--transition-fast),
      color var(--transition-fast);
    min-width: 0;
    cursor: pointer;
  }

  /* Icon: col 1, fila 1. Mismas props que desktop + transiciones del hover. */
  .headerFirma .menuSidebar .submenu .submenu-item > i,
  .headerFirma .menuSidebar .submenu .submenu-item a > i,
  .headerFirma .menuSidebar .submenu .submenu-item__icon {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    color: var(--brand-navy-700);
    font-size: 14px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
    transition: color var(--transition-fast), transform var(--transition-fast);
  }

  /* Anchor <a> con display:contents — promueve icon+text como hijos directos
     del grid del submenu-item, así items con y sin <a> se ven idénticos.
     V6.2 fix: tras FYA2-347 (responsive.css refactor) alguna regla legacy
     gana orden de carga y pisa este display, dejando al <a> con block/inline
     en col 1 (width 20px) y rompiendo el texto vertical (1 letra/línea).
     Bumpeamos especificidad cubriendo descendant + child + !important. */
  .headerFirma .menuSidebar .submenu .submenu-item > a,
  .headerFirma .menuSidebar .submenu .submenu-item a {
    all: unset;
    cursor: pointer;
    color: inherit;
    display: contents !important;
  }

  /* Text span: col 2, fila 1. Tipografía uniforme inherited del contenedor.
     V6.2 fix: además del display:contents del <a>, forzamos al <span>
     interno a posicionarse en col 2 con grid-column !important — así si
     algún ancestro ajeno pisa el contents, el span se posiciona igual.
     white-space: normal evita la regla legacy .menuSidebar span con
     font-size:30px que en algunos viewports puede romper el wrap. */
  .headerFirma .menuSidebar .submenu .submenu-item > span:not(.proximamente):not(.badge-soon):not(.soon-chip),
  .headerFirma .menuSidebar .submenu .submenu-item > a > span,
  .headerFirma .menuSidebar .submenu .submenu-item a > span:not(.proximamente):not(.badge-soon):not(.soon-chip) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    white-space: normal !important;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    line-height: inherit;
    overflow-wrap: anywhere;
  }

  /* Badge: col 2, fila 2, pegado a la izquierda (empieza bajo el texto). */
  .headerFirma .menuSidebar .submenu .submenu-item > .proximamente,
  .headerFirma .menuSidebar .submenu .submenu-item > .badge-soon,
  .headerFirma .menuSidebar .submenu .submenu-item > .soon-chip {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    margin-left: 0 !important;
  }

  /* Hover: igual que desktop — bg cyan-100, text cyan-700, icono cyan-700
     con leve translateX para feedback táctil. */
  .headerFirma .menuSidebar .submenu .submenu-item:hover {
    background: var(--brand-cyan-100);
    color: var(--brand-cyan-700);
  }

  .headerFirma .menuSidebar .submenu .submenu-item:hover > i,
  .headerFirma .menuSidebar .submenu .submenu-item:hover a > i,
  .headerFirma .menuSidebar .submenu .submenu-item:hover .submenu-item__icon {
    color: var(--brand-cyan-700);
    transform: translateX(1px);
  }

  /* Separador entre items (mismo que desktop). */
  .headerFirma .menuSidebar .submenu .submenu-item + .submenu-item {
    border-top: 1px solid var(--border-subtle);
  }

  /* Disabled: opacity 0.7 y text-muted en hover, idéntico a desktop. */
  .headerFirma .menuSidebar .submenu .submenu-item.is-disabled {
    cursor: not-allowed;
    opacity: 0.7;
  }
  .headerFirma .menuSidebar .submenu .submenu-item.is-disabled:hover {
    background: transparent;
    color: var(--text-muted);
  }


  /* Backdrop — extiende el existente con blur */
  .headerFirma .section-1.open::after {
    background: rgba(14, 16, 36, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  /* En móvil, el pill de firmas queda detrás del header superior — cuando
     hay header oculta la section-2 info adicional para no sobrecargar. */
  .headerFirma .section-2 .infoLogoAccount { display: none; }

  .headerFirma .section-2 {
    gap: var(--space-2);
  }

  .headerFirma .section-2 .container-firmasDisponibles {
    height: 34px;
    padding: 0 var(--space-3);
  }

  .headerFirma .num-firmas__label { display: none; }
}

/* Ajustes extra a 380px — pill súper compacta (solo icono + count) */
@media (max-width: 380px) {
  .headerFirma {
    padding: 0 var(--space-3);
  }
  .headerFirma .section-2 .container-firmasDisponibles {
    height: 32px;
    padding: 0 var(--space-2);
  }
  .headerFirma .num-firmas {
    gap: 4px;
  }
  .headerFirma .num-firmas .arrow-down { display: none; }
  .headerFirma .num-firmas__count { font-size: var(--text-md); }
  .headerFirma .close-sesion .btn--logout {
    width: 34px;
    height: 34px;
  }
  /* Drawer aún más angosto en 320px */
  .headerFirma .menuSidebar {
    width: min(300px, 92vw);
  }
}


/* ============================================================
   ANIMACIONES
   ============================================================ */

@keyframes drawer-item-in {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes drawer-submenu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .headerFirma .menuSidebar,
  .headerFirma .menuSidebar .menu-item,
  .headerFirma .menuSidebar .submenu,
  .headerFirma .section-2 .container-firmasDisponibles.showContentFirma .detalle-firmas {
    animation: none;
    transition: none;
  }
}


/* ============================================================
   ESTADO ACTIVO DEL MENU-ITEM PARENT
   ============================================================
   Cuando un menu-item tiene su submenu abierto, marcamos el parent
   con .submenu-active-parent para highlight visual. No se aplica via
   JS (para no tocar classes_controller.js), así que se implementa
   con :has().
   ============================================================ */

.headerFirma .menuSidebar .menu-item:has(.submenu.submenu-active) {
  position: relative;
}

/* Logout y settings del drawer — ocultos por default (sólo se usan en
   mobile <=960px, ver reglas dentro del @media más abajo). */
.headerFirma .menuSidebar .menuSidebar__logout,
.headerFirma .menuSidebar .menuSidebar__settings {
  display: none;
}

.headerFirma .menuSidebar .menu-item:has(.submenu.submenu-active) .menu-content {
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
}

@media (max-width: 960px) {
  .headerFirma .menuSidebar .menu-item:has(.submenu.submenu-active) .menu-content {
    background: var(--brand-navy-100);
  }
  .headerFirma .menuSidebar .menu-item:has(.submenu.submenu-active) .menu-content .arrow-down {
    transform: rotate(180deg);
  }
}


/* ============================================================
   MOBILE HEADER — hamburguesa visible + user icon oculto + pill
   compactado. Alinea la realidad con tmp/design_preview/header.html.
   ============================================================ */

@media (max-width: 960px) {
  /* Hamburguesa visible — 3 líneas limpias como en el preview.
     El legacy declara .line { width: 100% } dentro de una nested chain
     que en algunos browsers no estira las líneas flex-child dentro del
     .menu-icon. Se fuerza width fijo + border-radius + separadores. */
  .headerFirma .section-1 .menu-icon {
    display: flex !important;
    width: 22px !important;
    height: 18px !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    cursor: pointer;
  }

  .headerFirma .section-1 .menu-icon .line {
    display: block !important;
    width: 22px !important;
    height: 3px !important;
    flex: 0 0 3px !important;
    background-color: #fff !important;
    border-radius: 2px !important;
    transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
  }

  /* Animación X al estar abierto (legacy ya provee transforms, sólo
     ajustamos el translate para el nuevo height 18px). */
  .headerFirma .section-1.open .menu-icon .line:nth-child(1) {
    transform: rotate(45deg) translateY(10px) !important;
  }
  .headerFirma .section-1.open .menu-icon .line:nth-child(2) {
    opacity: 0 !important;
  }
  .headerFirma .section-1.open .menu-icon .line:nth-child(3) {
    transform: rotate(-45deg) translateY(-10px) !important;
  }

  /* En mobile el acceso a la cuenta va dentro del drawer, no como ícono
     separado en el header. El preview no muestra user icon en <960px. */
  .headerFirma .section-2 .container-user-information {
    display: none !important;
  }

  /* Logout del .section-2 se mueve al drawer en mobile. */
  .headerFirma .section-2 .close-sesion {
    display: none !important;
  }

  /* Logout item dentro del drawer — integrado al lenguaje visual del resto
     de menu-contents (neutral navy por default). El color danger queda
     reservado para el hover/active como signal sutil, no por default.
     Separador border-top subtle mantiene la "distinción" del item sin
     necesidad de un color fuerte. */
  .headerFirma .menuSidebar .menuSidebar__logout {
    display: block;
    padding-top: var(--space-2);
  }

  /* Configuración de cuenta: item neutral justo encima del logout.
     margin-top:auto empuja el bloque {settings, logout} al fondo del
     drawer; el border-top separa visualmente del último .menu-item. */
  .headerFirma .menuSidebar .menuSidebar__settings {
    display: block;
    margin-top: auto;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-subtle);
  }

  .headerFirma .menuSidebar .menuSidebar__settings-link {
    all: unset;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--text-default);
    font-family: var(--font-family-base);
    font-size: var(--text-md) !important;
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-snug);
    cursor: pointer;
    box-sizing: border-box;
    transition:
      background-color var(--transition-fast),
      color var(--transition-fast);
  }

  .headerFirma .menuSidebar .menuSidebar__settings-link span {
    font-size: var(--text-md) !important;
    font-weight: var(--font-weight-semibold);
    color: inherit;
    line-height: var(--leading-snug);
  }

  .headerFirma .menuSidebar .menuSidebar__settings-link i {
    width: 22px;
    text-align: center;
    font-size: 18px;
    color: var(--brand-navy-700);
    flex-shrink: 0;
  }

  .headerFirma .menuSidebar .menuSidebar__settings-link:hover,
  .headerFirma .menuSidebar .menuSidebar__settings-link:focus-visible {
    background: var(--brand-cyan-100);
    color: var(--brand-cyan-700);
  }

  .headerFirma .menuSidebar .menuSidebar__settings-link:hover i,
  .headerFirma .menuSidebar .menuSidebar__settings-link:focus-visible i {
    color: var(--brand-cyan-700);
  }

  /* Reset del <form> wrapper que genera button_to (tiene margen UA por default). */
  .headerFirma .menuSidebar .menuSidebar__logout-form {
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
  }

  /* Botón: mismo padding/tamaño que .menu-content (.menu-item > .menu-content
     usa padding var(--space-4) en mobile). Text neutral por default. */
  .headerFirma .menuSidebar .menuSidebar__logout-btn {
    all: unset;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--text-default);
    font-family: var(--font-family-base);
    font-size: var(--text-md) !important;
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-snug);
    cursor: pointer;
    transition:
      background-color var(--transition-fast),
      color var(--transition-fast);
    box-sizing: border-box;
  }

  /* Span interno — neutraliza el font-size:30px que el legacy
     .menuSidebar span !important impone, igualando al resto del drawer. */
  .headerFirma .menuSidebar .menuSidebar__logout-btn span {
    font-size: var(--text-md) !important;
    font-weight: var(--font-weight-semibold);
    color: inherit;
    line-height: var(--leading-snug);
  }

  /* Icono fa-power-off — mismo tratamiento que los iconos navy del drawer
     (ver .menu-content i.fas:first-child en mobile): 18px, navy-700, 22px
     de ancho para alineación consistente. */
  .headerFirma .menuSidebar .menuSidebar__logout-btn i {
    width: 22px;
    text-align: center;
    font-size: 18px;
    color: var(--brand-navy-700);
    flex-shrink: 0;
    transition: color var(--transition-fast);
  }

  /* Hover / focus — feedback danger SUTIL: bg rosado tenue + texto navy→
     danger-700. El icono se enrojece levemente. No es rojo saturado. */
  .headerFirma .menuSidebar .menuSidebar__logout-btn:hover,
  .headerFirma .menuSidebar .menuSidebar__logout-btn:focus-visible {
    background: rgba(219, 6, 50, 0.06);
    color: var(--danger-700, #8F031D);
  }

  .headerFirma .menuSidebar .menuSidebar__logout-btn:hover i,
  .headerFirma .menuSidebar .menuSidebar__logout-btn:focus-visible i {
    color: var(--danger-600, #B80425);
  }

  /* Active / pressed — feedback más marcado para confirmar click. */
  .headerFirma .menuSidebar .menuSidebar__logout-btn:active {
    background: rgba(219, 6, 50, 0.1);
  }

  /* Pill de firmas más compacto en mobile — solo count + chevron.
     El label "FIRMAS" ya estaba display:none en su media query. */
  .headerFirma .section-2 .container-firmasDisponibles {
    height: 36px !important;
    padding: 0 var(--space-3) !important;
  }
  .headerFirma .section-2 .container-firmasDisponibles .num-firmas {
    gap: 6px !important;
  }
  .headerFirma .num-firmas__count {
    font-size: var(--text-md) !important;
  }
  .headerFirma .num-firmas .arrow-down {
    display: inline-block !important;
    font-size: 10px !important;
  }

  /* Separación aireada en el lado derecho del header */
  .headerFirma .section-2 {
    gap: var(--space-2) !important;
  }
}


/* ============================================================
   V11.5c — Íconos de submenús del nav top en dark
   ============================================================
   La regla moderna .headerFirma .menuSidebar .submenu .submenu-item__icon
   (header_modern.css:109, repetida en :968 dentro de @media mobile)
   declara color: var(--brand-navy-700). Primitivo light-only sobre
   superficie raised dark → contraste 1.42:1 fail.

   Chain completo replicado con [data-theme="dark"] prefix →
   specificity [0,5,1] vs base [0,4,1]. Gana sin !important.
   Doble alcance: cubre tanto el bloque desktop como el mobile
   (mismo selector compartido entre ambos media). */

[data-theme="dark"] .headerFirma .menuSidebar .submenu .submenu-item > i,
[data-theme="dark"] .headerFirma .menuSidebar .submenu .submenu-item a > i,
[data-theme="dark"] .headerFirma .menuSidebar .submenu .submenu-item__icon {
  color: var(--brand-cyan-300);
}


/* ============================================================
   V11.5d — Menú responsivo dark (mobile only)
   ============================================================
   QA mobile (390x800) detectó 2 bugs en el drawer hamburguesa:

   A) bg del item padre cuando su submenu está expandido:
      3 declaraciones legacy navy-100 dentro de
      @media (max-width: 960px):
        - L.847 .menu-content:hover, .menu-item.submenu-active-parent
        - L.934 .menu-item:has(.submenu.submenu-active) > .menu-content
        - L.1156 .menu-item:has(.submenu.submenu-active) .menu-content
      Texto --text-strong sobre navy-100 da contraste 1.05:1.
      En DESKTOP L.1150 ya usa rgba(255,255,255,.1) (OK dark), por
      eso el override va dentro del @media mobile.

   B) Íconos del footer settings:
      .menuSidebar__settings-link i (L.1270, dentro de @media mobile):
      color: var(--brand-navy-700) hardcoded → 1.42:1 fail.
      Mismo patrón que V11.5c Fix 3 — !important por legacy nested
      dashboard.css:407-413 (.miCuenta-container ... i { color: navy-700 }).

   Doctrina V11 alpha-por-rol: 10% para el item expandido (mismo
   alpha que .account-card__empty-cta reposo en V11.5c).

   Out of scope V11.5d (anotado para V11.5d-bis si QA lo requiere):
   - .menu-content:hover de items NO expandidos (regla legacy
     compuesta L.847 que combina :hover + .submenu-active-parent
     en una sola declaración). Si genera flash al hover ítems
     colapsados, V11.5d-bis lo cubre.
   ============================================================ */

@media (max-width: 960px) {
  /* A — bg item padre del submenu activo (3 selectores legacy) */
  [data-theme="dark"] .headerFirma .menuSidebar .menu-item:has(.submenu.submenu-active) > .menu-content,
  [data-theme="dark"] .headerFirma .menuSidebar .menu-item:has(.submenu.submenu-active) .menu-content,
  [data-theme="dark"] .headerFirma .menuSidebar .menu-item.submenu-active-parent .menu-content {
    background: rgba(0, 186, 212, 0.10);            /* cyan-500 @ 10% */
  }

  /* A — ícono interno del item expandido (legacy nested label/h4/p/i) */
  [data-theme="dark"] .headerFirma .menuSidebar .menu-item:has(.submenu.submenu-active) > .menu-content i.fas,
  [data-theme="dark"] .headerFirma .menuSidebar .menu-item.submenu-active-parent .menu-content i.fas {
    color: var(--brand-cyan-300) !important;
  }

  /* B — íconos footer settings (fa-cog, fa-power-off) */
  [data-theme="dark"] .headerFirma .menuSidebar .menuSidebar__settings-link i {
    color: var(--brand-cyan-300) !important;
  }
}


/* V11.5f Fix 1 ELIMINADO en V11.9.1: el legacy en header.css:298
   ahora usa var(--text-brand) en lugar de #222D8B hardcoded, lo
   que automaticamente da #C4C8FF en dark (legible) sin requerir
   override defensivo. */


/* ============================================================
 * V11.6d — Header chips PRÓXIMAMENTE / badge-soon dark
 * ============================================================
 * Co-localización del sub-ciclo V11.6d para los selectores que
 * viven en este archivo. Los `.upload-drop__icon` y
 * `.upload-container .tittle-addDocuments .proximamente` reciben
 * su override en views/upload_modern.css (mismo sub-ciclo, archivo
 * source distinto).
 *
 * Hallazgos cubiertos:
 *
 * Desktop ≥961px (línea 147-159 de este archivo, sin !important):
 *   .headerFirma .proximamente, .headerFirma .badge-soon {
 *     background: var(--brand-cyan-100);
 *     color: var(--brand-cyan-700);
 *     border: 1px solid var(--brand-cyan-200);
 *   }
 *
 * Mobile ≤960px (línea 913-930, con !important):
 *   .headerFirma .menuSidebar .proximamente,
 *   .headerFirma .menuSidebar .badge-soon {
 *     background: var(--brand-cyan-100) !important;
 *     color: var(--brand-cyan-700) !important;
 *     border: 1px solid var(--brand-cyan-200) !important;
 *   }
 *
 * Contraste light original: cyan-700 (#0891A8) sobre cyan-100
 * (#EBF4F5) = 3.34:1 — AA fail en dark sobre surface-app oscuro
 * (los 2 colores claros amontonados → flash luminoso).
 *
 * Doctrina aplicada (consolidada V11.5e/f/g/h, V11.6d):
 *   bg     cyan-300 @16% = rgba(102, 217, 245, 0.16)
 *   color  var(--brand-cyan-300) = #66D9F5
 *   border cyan-300 @24% = rgba(102, 217, 245, 0.24)
 *
 * Contraste resultante en dark: ~7:1 AAA.
 *
 * Por qué .badge-soon se incluye junto a .proximamente:
 *   - En desktop el dark base `[data-theme="dark"] .badge-soon`
 *     (home_modern.css:758, [0,2,0]) ya pisa al `.headerFirma
 *     .badge-soon` light [0,2,0] por orden de carga, pero el
 *     valor del color difiere ligeramente (cyan-200 vs cyan-300).
 *     Cubrir explícitamente acá refresca al cyan-300 unificado
 *     del patrón badge soft y queda como defensa anti-cascade.
 *   - En mobile el legacy con !important pisa al dark base de
 *     home_modern (no !important). Sin este override mobile,
 *     `.badge-soon` queda light en dark → AA fail.
 *
 * Specificity / !important:
 *   - Desktop: override [0,3,0] gana al legacy [0,2,0]. Sin
 *     !important. La regla queda fuera de @media (min-width:
 *     961px) — aplica donde el chip existe; en mobile el
 *     `.menuSidebar` lo cubre con su propio override.
 *   - Mobile: override [0,4,0] vs legacy [0,3,0] + !important.
 *     Requiere !important defensivo (lección V11.5a-ter).
 *
 * NO modifica:
 *   - .proximamente base navy (legacy fallback)
 *   - .headerFirma .menuSidebar .submenu .submenu-item layout grid
 *     (líneas 1018-1024) — ese bloque solo posiciona el badge,
 *     no toca su color.
 *   - [data-theme="dark"] .badge-soon base de home_modern.css:758
 *     — sigue siendo la cobertura genérica para .badge-soon fuera
 *     del header.
 * ============================================================ */

/* Desktop header (chips visibles en dropdown ≥961px) */
[data-theme="dark"] .headerFirma .proximamente,
[data-theme="dark"] .headerFirma .badge-soon {
  background: rgba(102, 217, 245, 0.16);
  color: var(--brand-cyan-300);
  border-color: rgba(102, 217, 245, 0.24);
}

/* Mobile header (drawer / menuSidebar ≤960px) */
[data-theme="dark"] .headerFirma .menuSidebar .proximamente,
[data-theme="dark"] .headerFirma .menuSidebar .badge-soon {
  background: rgba(102, 217, 245, 0.16) !important;
  color: var(--brand-cyan-300) !important;
  border-color: rgba(102, 217, 245, 0.24) !important;
}

/* ============================================================
 * FIN V11.6d (header_modern)
 * ============================================================ */
/*
 * footer.css — Footer
 * FirmaYa / zappb
 *
 * Cubre: .footerFirma
 */

.footerFirma {
  display: flex;
  align-items: center;
  min-height: 56px;
  width: 100%;
  /* V7.1.2: defensa para que el sticky footer no se aplaste si el
     contenido principal pide más espacio del disponible. Combinado
     con .content-section { flex: 1 0 auto } y body flex column en
     reset.css, garantiza el patrón sticky footer estándar. */
  flex-shrink: 0;
  padding: var(--space-3) var(--space-4);
  color: var(--text-on-brand);
  background: linear-gradient(90deg, #012b7e 0%, #023a7c 30%, #013a86 55%, #023a7c 75%, #012a7e 100%);
  font-family: var(--font-family-base);
  font-size: var(--text-sm);
}

.footerFirma .content-footer {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  align-items: center;
}

.footerFirma .content-footer span {
  font-weight: var(--font-weight-regular);
  color: var(--neutral-200);
  letter-spacing: 0.2px;
}

.footerFirma .content-footer div {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.footerFirma .content-footer a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  color: var(--text-on-brand);
  text-decoration: none;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.footerFirma .content-footer a:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}

.footerFirma .content-footer a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.footerFirma .content-footer i {
  font-size: var(--text-md);
}

/* Responsive — en móvil apilar centrado */
@media (max-width: 480px) {
  .footerFirma {
    min-height: auto;
    padding: var(--space-4);
  }

  .footerFirma .content-footer {
    flex-direction: column;
    text-align: center;
  }
}
/*
 * home.css — Vista home
 * FirmaYa / zappb
 *
 * Cubre: .container-text-home, .proximamente, .container-documentos-home,
 *        .container-comoFirmar
 *
 * EXTRAÍDO DESDE application.css
 */

.container-text-home{
    display: flex;
    flex-direction: column;
    align-items: center;
    div.texto-home{
        display: flex;
        color:#51517D;
        p:last-of-type{
            font-weight: bold;
            padding-left: 4px;
        }
    }
    .container-option{
        display: flex;
        gap: 10px;
        justify-content: space-around;
        width: 75vw;
        margin-top: 50px;
        height: 230px;
        align-items: center;
        z-index: 1;
        .menu-item{
            background: #fff;
            border: 1px solid #e3e2e299;
            padding: 16px;
            width: 280px;
            display: flex;
            height: 168px;
            border-radius: 8px;
            flex-direction: column;
            transition: 0.3s;
            box-shadow: 0px 6px 6px 3px rgba(0, 0, 0, 0.14);
            .menu-content{
                border-bottom: 1px solid #303fbf;
                padding-bottom: 5px;
                text-align: left;
                div{
                    transition: 0.3s;
                }
                i{
                    color: #182e8a;
                    margin-right: 5px;
                }
                span{
                    color:#182e8a;
                    font-weight: 600;
                }
            }
       
        }
        .menu-item.hoverAction, .menu-item:hover {
            width: 288px;
            height: 193px;
            .menu-content{
                div{
                    font-size: 18px;
                }
            }
            .submenu{
                .submenu-item {
                    padding: 5px 0 9px 0px;
                    font-size: 16px;
                    line-height: 18px;
                }
            }
        }
        .submenu{
            padding: 10px 0px;
            color:#182e8a;
            .submenu-item{
                cursor:pointer;
                transition: 0.3s;
                text-align: left;
                font-size: 14px;
                line-height: 20px;
                a{
                    text-decoration: none;
                    color: #182e8a;
                }
            }
            .submenu-item:hover {
                font-weight: 600;
            }
        }
       
    }
}
.proximamente{
    background: #222D8B;
    color: #ffff;
    font-size: 10px;
    padding: 2px 10px;
    margin-left: 5px;
    border-radius: 16px;
}
.container-documentos-home{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 96%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    h3{
        margin-top: 0;
    }
    h3#sectionTitle {
        display: none;
    }
    #upload3{
        .input-posicionFirma{
            display: flex;
        }
        #configuracion-avanzada{
            margin-bottom: 15px;
            margin-right: 25px;
        }
    }
    #upload4{
        display: none;
    }
}

/*----------Modal ¿Cómo Firmar?----------*/
.container-text-home ~ .container-comoFirmar{
    display: flex !important;
}
.container-comoFirmar{
    flex-direction: column;
    align-items: center;
    margin-top: 32px;
    display: flex;
    .light-on {
        cursor: pointer;
        font-size: 25px;
        color: #ffd700; /* amarillo cálido */
        text-shadow: 0 0 10px #ffd700, 0 0 20px #ffecb3, 0 0 30px #ffe066;
        transition: all 0.3s ease;
    }
    h2{
        color: #182e8a;
        margin-top: 6px;
    }
    .container-videos{
        display: none;
    }
}
.container-comoFirmar.active{
    position: absolute;
    top: 70px;
    padding-top: 40px;
    height: 100vh;
    width: 100vw;
    background: #F8F8FC;
    margin-top: 0;
    z-index: 3;
    .container-videos{
        margin-top: 25px;
        display: flex !important;
        width: 100%;
        justify-content: space-around;
    }
}
/*--------------------------------------------FIN home.html------------------------------------------*/


/*subir_documento.html*/
/*
 * views/home_modern.css — Dashboard Home moderno (paso 9)
 * FirmaYa / zappb
 *
 * Vista: app/views/steps/home.html.erb (root `/`).
 * Reemplaza el layout de cards-menú con hover-expand por action-cards
 * accionables + hero compacto + stepper "¿Cómo firmar?" horizontal.
 *
 * Coexiste con home.css legacy (el selector .container-text-home sigue
 * disponible para vistas que aún lo usen). El home moderno usa el prefijo
 * .home-hero, .action-card, .how-to-sign, .stepper-horizontal.
 */


/* ============================================================
   HERO — greeting compacto con avatar
   ============================================================ */

.home-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  max-width: 1180px;
  margin: var(--space-8) auto var(--space-6);
  padding: 0 var(--space-6);
  font-family: var(--font-family-base);
  flex-wrap: wrap;
}

.home-hero__greeting {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}

.home-hero__avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-round);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-xl);
  color: var(--text-on-brand);
  background: linear-gradient(135deg, var(--brand-navy-700) 0%, var(--brand-cyan-600) 100%);
  box-shadow:
    0 1px 2px rgba(15, 18, 35, 0.08),
    0 8px 16px -8px rgba(34, 45, 139, 0.4);
  flex-shrink: 0;
  letter-spacing: var(--tracking-snug);
}

.home-hero__greeting-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.home-hero__eyebrow {
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-normal);
}

.home-hero__name {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60vw;
}

.home-hero__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.home-hero__stat {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--brand-cyan-100);
  border: 1px solid var(--brand-cyan-200);
  border-radius: var(--radius-round);
  color: var(--brand-cyan-700);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-normal);
}

.home-hero__stat strong {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-extra);
  font-size: var(--text-md);
  color: var(--brand-navy-700);
  letter-spacing: var(--tracking-snug);
}

.home-hero__stat i { font-size: 13px; }


/* ============================================================
   ACTION CARDS — grid 1 featured + 2 secundarias
   ============================================================ */

.home-actions {
  max-width: 1180px;
  margin: 0 auto var(--space-10);
  padding: 0 var(--space-6);
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-5);
  align-items: stretch;
  font-family: var(--font-family-base);
}

.action-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--elevation-1);
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-base),
    border-color var(--transition-fast);
  min-height: 240px;
  overflow: hidden;
  isolation: isolate;
}

.action-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand-cyan-400);
  box-shadow: var(--elevation-3);
}

.action-card:focus-within {
  outline: none;
  border-color: var(--brand-cyan-500);
  box-shadow: var(--elevation-2), 0 0 0 3px rgba(0, 186, 212, 0.18);
}

.action-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-navy-100);
  color: var(--brand-navy-700);
  font-size: 20px;
  flex-shrink: 0;
  transition: transform var(--transition-fast), background var(--transition-fast);
}

.action-card:hover .action-card__icon {
  transform: scale(1.05) rotate(-2deg);
}

.action-card__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.action-card__title {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-snug);
  color: var(--text-strong);
}

.action-card__description {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.action-card__links {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

.action-card__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) 0;
  text-decoration: none;
  color: var(--text-brand);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-sm);
  transition: color var(--transition-fast), padding var(--transition-fast);
  border-radius: var(--radius-sm);
}

.action-card__link:hover {
  color: var(--brand-cyan-700);
  padding-left: var(--space-2);
}

.action-card__link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.action-card__link i {
  font-size: 12px;
  opacity: 0.5;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.action-card__link:hover i {
  transform: translateX(3px);
  opacity: 1;
}

.action-card__link--disabled {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) 0;
  color: var(--text-muted);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-sm);
  cursor: not-allowed;
}


/* Featured variant — la card "Iniciar Firma" resaltada */
.action-card--featured {
  background: linear-gradient(155deg, var(--brand-navy-700) 0%, var(--brand-navy-800) 60%, var(--brand-navy-900) 100%);
  color: var(--text-on-brand);
  border-color: transparent;
  overflow: hidden;
}

.action-card--featured::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 85% 15%, rgba(0, 186, 212, 0.35) 0%, transparent 40%),
    radial-gradient(circle at 20% 110%, rgba(73, 183, 210, 0.22) 0%, transparent 55%);
  pointer-events: none;
}

.action-card--featured::after {
  content: "";
  position: absolute;
  top: -50px;
  right: -50px;
  width: 200px;
  height: 200px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'><circle cx='30' cy='30' r='1' fill='%23ffffff' fill-opacity='0.12'/></svg>");
  background-size: 24px 24px;
  z-index: -1;
  opacity: 0.6;
  pointer-events: none;
}

.action-card--featured:hover {
  border-color: transparent;
  box-shadow: var(--elevation-4);
}

.action-card--featured .action-card__icon {
  background: rgba(255, 255, 255, 0.14);
  color: var(--brand-cyan-200);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.action-card--featured .action-card__title {
  color: #fff;
  font-size: var(--text-2xl);
}

.action-card--featured .action-card__description {
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--text-md);
  max-width: 320px;
}

.action-card--featured .action-card__links {
  border-top-color: rgba(255, 255, 255, 0.12);
}

.action-card--featured .action-card__link {
  color: var(--brand-cyan-200);
}

.action-card--featured .action-card__link:hover {
  color: #fff;
}

.action-card--featured .action-card__link--disabled {
  color: rgba(255, 255, 255, 0.45);
}


/* Badge "Próximamente" — reemplaza a .proximamente legacy */
.badge-soon {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  background: var(--brand-cyan-100);
  color: var(--brand-cyan-700);
  border: 1px solid var(--brand-cyan-200);
  border-radius: var(--radius-round);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  margin-left: var(--space-2);
  line-height: 1.6;
}

.action-card--featured .badge-soon {
  background: rgba(102, 217, 245, 0.16);
  color: var(--brand-cyan-200);
  border-color: rgba(102, 217, 245, 0.24);
}


/* ============================================================
   "¿CÓMO FIRMAR?" — stepper horizontal con 4 pasos
   ============================================================ */

.how-to-sign {
  max-width: 1180px;
  margin: 0 auto var(--space-16);
  padding: var(--space-8) var(--space-6);
  font-family: var(--font-family-base);
}

.how-to-sign__header {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}

.how-to-sign__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--brand-cyan-700);
}

.how-to-sign__eyebrow::before,
.how-to-sign__eyebrow::after {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--brand-cyan-400);
}

.how-to-sign__title {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: clamp(26px, 2.5vw, var(--text-display-md));
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}

.how-to-sign__subtitle {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-md);
}


/* Stepper horizontal */
.stepper-horizontal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  position: relative;
  counter-reset: step;
}

/* Línea conectora (solo desktop) — pintada debajo de los números */
.stepper-horizontal::before {
  content: "";
  position: absolute;
  top: 28px;
  left: calc(12.5% + 28px);
  right: calc(12.5% + 28px);
  height: 2px;
  background:
    linear-gradient(90deg,
      var(--brand-cyan-500) 0%,
      var(--brand-cyan-500) 50%,
      var(--border-default) 50%,
      var(--border-default) 100%);
  background-size: 200% 100%;
  background-position: 100% 50%;
  z-index: 0;
  border-radius: var(--radius-round);
}

.stepper-horizontal__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  z-index: 1;
}

.stepper-horizontal__num {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-round);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-raised);
  border: 2px solid var(--border-default);
  font-family: var(--font-family-display);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-muted);
  position: relative;
  transition:
    border-color var(--transition-fast),
    color var(--transition-fast),
    background var(--transition-fast),
    transform var(--transition-fast);
}

.stepper-horizontal__step:hover .stepper-horizontal__num {
  border-color: var(--brand-cyan-500);
  color: var(--brand-cyan-700);
  background: var(--brand-cyan-100);
  transform: scale(1.05);
}

.stepper-horizontal__icon {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-round);
  background: var(--brand-navy-700);
  color: var(--text-on-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  box-shadow: 0 1px 2px rgba(15, 18, 35, 0.15);
}

.stepper-horizontal__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 220px;
}

.stepper-horizontal__label {
  font-family: var(--font-family-display);
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
  color: var(--text-strong);
  letter-spacing: var(--tracking-snug);
}

.stepper-horizontal__description {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: var(--leading-normal);
}


/* Video cards (legado del modal "¿Cómo firmar?") — renderizamos como
   enlace tipo card al final de la sección */

.how-to-sign__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--space-8);
  gap: var(--space-3);
  flex-wrap: wrap;
}

.how-to-sign__video-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  text-decoration: none;
  color: var(--text-strong);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.how-to-sign__video-link:hover {
  border-color: var(--brand-cyan-400);
  transform: translateY(-1px);
  box-shadow: var(--elevation-2);
}

.how-to-sign__video-link i {
  color: var(--brand-cyan-600);
  font-size: 18px;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 960px) {
  .home-actions {
    grid-template-columns: 1fr 1fr;
  }
  .action-card--featured {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .home-hero {
    margin: var(--space-6) auto var(--space-5);
    padding: 0 var(--space-4);
    flex-direction: column;
    align-items: flex-start;
  }

  .home-hero__avatar {
    width: 48px;
    height: 48px;
    font-size: var(--text-lg);
  }

  .home-hero__name {
    font-size: 22px;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
  }

  .home-hero__meta {
    width: 100%;
  }

  .home-hero__stat {
    width: 100%;
    justify-content: center;
  }

  .home-actions {
    padding: 0 var(--space-4);
    grid-template-columns: 1fr;
    margin-bottom: var(--space-8);
  }

  .action-card { min-height: auto; padding: var(--space-5); }
  .action-card--featured .action-card__title { font-size: var(--text-xl); }

  .how-to-sign {
    padding: var(--space-6) var(--space-4);
    margin-bottom: var(--space-12);
  }

  .stepper-horizontal {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  /* En móvil: línea vertical entre pasos */
  .stepper-horizontal::before { display: none; }

  .stepper-horizontal__step {
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
    text-align: left;
    padding: var(--space-3);
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
  }

  .stepper-horizontal__step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 27px;
    bottom: calc(-1 * var(--space-4));
    width: 2px;
    height: var(--space-4);
    background: var(--border-default);
    border-radius: var(--radius-round);
  }

  .stepper-horizontal__num {
    width: 48px;
    height: 48px;
    font-size: var(--text-lg);
    flex-shrink: 0;
  }

  .stepper-horizontal__body { max-width: none; flex: 1; }

  .how-to-sign__cta { flex-direction: column; align-items: stretch; }
  .how-to-sign__video-link { justify-content: center; }
}

/* Ajustes extra a 380px (dispositivos pequeños) */
@media (max-width: 380px) {
  .home-hero {
    gap: var(--space-3);
    margin-top: var(--space-5);
  }
  .home-hero__avatar {
    width: 44px;
    height: 44px;
    font-size: var(--text-md);
  }
  .home-hero__name { font-size: 19px; }
  .action-card { padding: var(--space-4); }
  .action-card__title { font-size: var(--text-lg); }
  .action-card--featured .action-card__title { font-size: var(--text-lg); }
  .action-card__description { font-size: var(--text-xs); }
  .how-to-sign__title { font-size: 22px; }
  .stepper-horizontal__num { width: 44px; height: 44px; font-size: var(--text-md); }
  .stepper-horizontal__label { font-size: var(--text-sm); }
  .stepper-horizontal__description { font-size: var(--text-xs); }
}


/* ============================================================
   ENTRADA ANIMADA (staggered)
   ============================================================ */

@keyframes home-card-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.action-card {
  animation: home-card-in var(--transition-base) var(--ease-out) both;
}
.home-actions .action-card:nth-child(1) { animation-delay: 0.05s; }
.home-actions .action-card:nth-child(2) { animation-delay: 0.15s; }
.home-actions .action-card:nth-child(3) { animation-delay: 0.25s; }

.stepper-horizontal__step {
  animation: home-card-in var(--transition-base) var(--ease-out) both;
}
.stepper-horizontal__step:nth-child(1) { animation-delay: 0.1s; }
.stepper-horizontal__step:nth-child(2) { animation-delay: 0.2s; }
.stepper-horizontal__step:nth-child(3) { animation-delay: 0.3s; }
.stepper-horizontal__step:nth-child(4) { animation-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  .action-card, .stepper-horizontal__step { animation: none; }
}


/* ============================================================
   LEGACY OVERRIDES — esconde el home legacy cuando está el moderno
   ============================================================
   El home moderno es el default. El legacy queda disponible si otra
   vista monta .container-text-home (no debería pasar tras esta migración).
   ============================================================ */

body:has(.home-hero) .container-text-home,
body:has(.home-hero) .container-text-home ~ .container-comoFirmar {
  display: none !important;
}


/* ============================================================
   V11.2 — Dark mode override de /home
   ============================================================
   Hallazgo 5: .home-hero__greeting hereda color:#000 del
     body{color:#000} en base/reset.css:41. El wrapper queda
     con color negro literal; los hijos con clase propia
     (.home-hero__eyebrow, .home-hero__name) tienen color por
     token y siguen visibles, pero cualquier texto plano
     dentro del wrapper queda invisible en dark.
     Override solo en dark — light intacto.
   ============================================================ */

[data-theme="dark"] .home-hero__greeting {
  color: var(--text-default);
}


/* ============================================================
   V11.3 — Cobertura adicional dark mode /home + componentes
   ============================================================
   C: .badge-soon — el base en home_modern.css:332 usa cyan-100/
      cyan-700 hardcoded. Solo .action-card--featured tenía
      override dark; cualquier otro .badge-soon (ej. en
      /payments) queda como manchón pale en dark. Override
      genérico promueve los mismos valores cyan-300 translúcidos
      del override --featured a cualquier .badge-soon en dark.
      Specificity [0,2,0] empata con .action-card--featured
      [0,2,0] pero como va al final, gana por orden — y aplica
      los mismos valores, sin conflicto visual.
   D: .stepper-horizontal__icon — bg navy-700 hardcoded
      compite visualmente con el círculo .stepper-horizontal__num
      (que en dark queda --surface-raised, tono navy similar).
      Override a cyan-700 para que el ícono destaque sobre el
      círculo muted. Color blanco del ícono intacto.
   ============================================================ */

[data-theme="dark"] .badge-soon {
  background: rgba(102, 217, 245, 0.16);       /* cyan-300 @ 16% */
  color: var(--brand-cyan-200);
  border-color: rgba(102, 217, 245, 0.24);
}

[data-theme="dark"] .stepper-horizontal__icon {
  background-color: var(--brand-cyan-700);
}


/* ============================================================
   V11.5c — Squircles non-featured .action-card__icon en dark
   ============================================================
   La regla base .action-card__icon (home_modern.css:163) declara
   bg navy-100 + color navy-700 (primitivos light-only). En dark
   las cards Documentos / Mi Cuenta muestran squircle blanco
   pálido — mismo "flash claro" del patrón sistémico.

   .action-card--featured tiene su propio override (white@14% +
   cyan-200) y queda intacto — no aplica acá.

   Override paleta translúcida cyan (doctrina V11.3), alpha 15%
   y color cyan-300 para los íconos non-featured. Sin !important
   (no está bajo .miCuenta-container, no compite con el legacy
   nested label/h4/p/i). Hover transform (.action-card:hover
   .action-card__icon { transform: ... }) intacto.
   ============================================================ */

[data-theme="dark"] .action-card:not(.action-card--featured) .action-card__icon {
  background: rgba(0, 186, 212, 0.15);            /* cyan-500 @ 15% */
  color: var(--brand-cyan-300);
}
/*
 * upload.css — Subir documentos
 * FirmaYa / zappb
 *
 * Cubre: .upload-container, .uplod-containerFileList, #fileModal,
 *        .btnContainer-subirDocumentos, progress, botones legacy de upload
 *
 * EXTRAÍDO DESDE application.css
 */

.upload-container {
    border-radius: 10px;
    padding-top: 15px;
    width: 100%;
    min-height: 300px;
    height: auto;
    gap: 35px;
    width: 70vw;
    margin: auto;
    margin-top: 60px;
    display: flex;
    align-items: center;
    text-align: center;
    transition: background-color 0.3s;
    background-color: #ffff;
    box-shadow: 0px 6px 6px 3px rgba(0, 0, 0, 0.14);
    flex-direction: column;
    justify-content: flex-start;
    .upload-content.uploadFile-active {
        width: -webkit-fill-available;
        display: flex;
        flex-direction: column-reverse;
    }
    #fileAdder{
        width: 100%;  
        margin-top: 25px;
    }
    #file_container_form{
        width: 100%;
    }
    .upload-content{
        #fileInput{
            display: none;
        }
        .upload-text.validar-documento{
            display: none;
        } 
    }
    .tittle-addDocuments{
        border-bottom: 2px solid #c0c1ed8f;
        width: 100%;
        padding-bottom: 11px;

        a{
            text-decoration: none;
            color: #222D8B;
        }

    }
    .aDocumentos{
        font-weight: 600;
        margin-right: 34px;
        border-bottom: 2px solid #222D8B;
        padding-bottom: 10px;
        i{
            display: none;
        }
    }
    .tittle-documentList{
        color: #222D8B;
        padding-left: 12px;
        text-align: left;
        width: -webkit-fill-available;
        i.fas.fa-chevron-left {
            margin-right: 10px;
        }
    }
    .content-uploadContainer {
        height: auto;
        width: -webkit-fill-available;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        .upload-text {
            font-size: 14px;
            color: #222D8B;
            gap: 8px;
            margin-top: 25px;
            display: flex;
            flex-direction: column;
            span {
                font-size: 14px;
                font-weight: 600;
            }
        }
    }
    #uploadedFilesListContainer {
        height: -webkit-fill-available;
        width: 100%;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        ul#uploadedFilesList {
            padding: 0;
            width: 100%;
            li{
                display: flex;
                width: 100%;
                justify-content: space-between;
                border-bottom: 1px solid #d9d9d9;
                padding: 6px 30px;
                color: #222D8B;
                align-items: center;
                span {
                    font-size: 14px;
                    font-weight: 600;
                    display: flex;
                    flex-direction: row-reverse;
                    i{
                        margin-right: 12px;
                    }
                }
                .remove-button{
                    color: #222D8B;

                }
            }
            button{
                background: none;
                border: none;
                cursor: pointer;
                color: #222D8B;
                font-size: 14px;
            }
            button:hover{
                color: #66d9f5;;
            };
        }
    }
    .timestamp-seal-message {
        width: -webkit-fill-available;
        margin: 12px 0 25px;
        padding: 0 30px;
        color: #898AB1;
        font-size: 14px;
        font-weight: 500;
        display: none;
    }
}
#uploadContainer:has(.content-uploadContainer.noDisplay) {
    .tittle-addDocuments{
        text-align: left;
        padding-left: 15px;
        .aDocumentos{
            i{
                display: inline;
                margin-right: 5px;
            }
        }
        .aPlantillas, .proximamente{
            display: none !important;
        }
    }
    .timestamp-seal-message {
        display: flex;
        gap: 5px;
        align-items: center;

    }
}
.uplod-containerFileList{
    align-items: flex-start;
    .tittle-addDocuments {
        display: none;
    }
    .tittle-documentList {
        display: block;
    }
    .content-uploadContainer {
        display: none;
    }
    div#uploadedFilesListContainer {
        display: flex !important;
    }
}
#signersContainer, #finalizeDetailsContainer, #datos-registro, #ingresaDatos-registro, #confirma-registro, #finalizeDetailsPersonalizada{
    display: flex;
    border-radius: 6px;
    padding-top: 0px;
    transition: background-color 0.3s;
    background-color: #ffff;
    /*por confirmar la sombra */
    box-shadow: 0px 6px 6px 3px rgba(0, 0, 0, 0.14);
    gap: 10px;
    align-content: center;
    flex-wrap: wrap;
    flex-direction: column;
    height: auto;
    min-height: 250px;
    width: 70vw;
    margin: auto;
    margin-top: 60px;
    .top-section{
        margin-top: 55px;
        i.fas.fa-chevron-down.arrow-down {
            position: relative;
            top: 12px;
            right: 4%;
            transition: transform 0.3s ease;
            color: #898AB1;
        }
        .text-signature{
            display: flex;
            align-items: center;
            .info-icon {
                display: inline-block;
                font-size: 12px;
                padding: 0px;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                border: 2px solid #49B7D2;
                color: #49B7D2;
                text-align: center;
                font-weight: bold;
                margin-left: 5px;
                cursor: pointer;
            }
            .info-box{
                display: none;
                background-color: #222D8B;
                border: 1px solid #222D8B;
                border-radius: 20px;
                font-size: 14px;
                font-weight: 100;
                color: #fff;
                margin-left: 62px;
                max-width: 458px;
                padding: 12px 25px 12px 0px;
                top: 47%;
                z-index: 3;
                position: absolute;
                .arrow-icon {
                    display: inline-block;
                    width: 31px;
                    height: 20px;
                    background-color: #222D8B;
                    clip-path: polygon(0 100%, 50% 0, 100% 100%);
                    margin-left: 10px;
                    /* vertical-align: middle; */
                    position: absolute;
                    right: 68.1%;
                    top: -10%;
                }
                ul{
                    padding-left: 45px;
                    p{
                        margin-left: -18px;
                    }
                    li{
                        line-height: 1.5;
                        margin-bottom: 2px;
                        span{
                            font-weight: 600;
                        }
                    }
                }
            }
            .info-box.show-info{
                display: block;
                margin-top: 275px;
                top: -105%;

            }
        }

    }
    .addFirmantes{
        margin-top: 10px;
        width: 60% !important;
        p{
            margin-top: 0;
            color: #898AB1;
            font-size: 14px;
            font-weight: 600;
        }
        .container-firmas{
            overflow: auto;
            padding: 5px 10px 0px;
            border: 1px solid #E0E0EC;
            border-radius: 14px;
            height: auto;
            position: relative;
            width: -webkit-fill-available;
            font-size: 14px;
            display: flex;
            flex-direction: column;
            gap: 5px;
            input{
                border: none;
                padding: 0 5px;
                position: inherit;
                height: auto;
            }
            .email-list {
                display: flex;
                flex-direction: column;
                gap: 5px;
                max-height: 111px;
                #email_list{
                    display: none;
                    padding: 0;
                    flex-direction: column;
                    gap: 5px;
                    .email-item {
                        display: flex;
                        gap: 5px;
                        border: 1px solid #898AB1;
                        padding: 4px 7px;
                        border-radius: 18px;
                        font-size: 14px;
                        font-weight: 600;
                        width: fit-content;
                        height: 34px;
                        color: #898AB1;
                        flex-direction: row;
                        align-items: center;
                        #signers__order {
                            display: none;
                            width: 24px;
                            height: 24px;
                            text-align: center;
                            background: #898AB1;
                            font-size: 12px;
                            color: #fff;
                            border-radius: 12px;
                            /* -moz-appearance: textfield;
                              appearance: textfield    */
                        }

                        #signers__order::-webkit-outer-spin-button,
                        #signers__order::-webkit-inner-spin-button{
                            -webkit-appearance: none;
                        }
                        #signers__email{
                            padding: 0 3px;
                            color: #898AB1;
                            font-weight: 600;
                            width: auto;
                            min-width: 233px;
                        }
                        a{
                            background: none;
                            border: none;
                            margin-left: 4px;
                            font-size: 12px;
                            font-weight: bold;
                            color: #898AB1;
                            cursor: pointer;
                            text-decoration: none;
                        }
                    }
                }
                #email_list.showEmail{
                    display: flex;
                }
            }
            .email-list.sortable-active{
                .email-item{
                    cursor: pointer;
                    #signers__order {
                        display: flex !important;
                    }
                    #signers__email{
                        cursor: pointer;
                    }
                }

            }
            .email-input-wrapper{
                display: flex;
                align-items: center;
                color: #E0E0EC;
                .email-input{
                    color: #898AB1;
                }
                .email-add-icon {
                    width: 25px;
                    height: 25px;
                    font-size: 12px;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    transition: all 0.2s ease;
                    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
                }
                .email-add-icon.active {
                    background: #898AB1;
                    color: white;
                }
                .email-add-icon:hover {
                    transform: scale(1.08);
                }
                .email-add-icon.active:hover ~ .tooltip-box.add-signer{
                    visibility: visible;
                    opacity: 1;
                }
                .email-add-icon:active {
                    transform: scale(0.96);
                }
                .email-input::placeholder { color:  #898ab1a8; }
                .email-input::-webkit-input-placeholder { color:  #898ab1a8; }
                .email-input:-ms-input-placeholder { color:  #898ab1a8; }
                .email-input:-webkit-autofill,
                .email-input:-webkit-autofill:hover,
                .email-input:-webkit-autofill:focus,
                .email-input:-webkit-autofill:active {
                    -webkit-text-fill-color:#898AB1 !important;
                    caret-color: #898AB1;
                    transition: background-color 5000s ease-in-out 0s;
                }
                .tooltip-icon {
                    display: flex;
                    .tooltip-box.add-signer{
                        position: fixed;
                        border: 1px solid #898AB1;
                        color: #898AB1;
                        margin-left: 30px;
                    }
                }

            }
           
        }

    }
    .btns-addSigner{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 8px;
        width: 60%;
        /* Botones de acción dentro del contenedor de firmantes */
        .btn.btn--outline-primary,
        button.enviarDocumento, button.enviarDocumento.ordenarFirma.activeBtn {
            display: flex;
            background: #fff;
            padding: 8px;             /* override del padding: 8px 30px del .btn base */
            border-radius: 16px;
            border: 1px solid #222D8B;
            color: #222D8B;
            align-items: center;
            gap: 5px;
            cursor: pointer;
            min-width: unset;         /* override del min-width: 100px del .btn base */
            height: auto;
            font-weight: 400;
            i.fa-solid.fa-circle-xmark, .close-sequence{
                display: none;
            }
        }
        .btn.btn--outline-primary:hover,
        button.enviarDocumento:hover{
            box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
        }
        button.enviarDocumento.ordenarFirma{
            border: 1px solid #DBDBDB;
            color: #DBDBDB;
            min-width: 201px;
        }
        .btn.btn--outline-primary.desactiveBtn,
        button.enviarDocumento.desactiveBtn{
            border: 1px solid #DBDBDB;
            color: #DBDBDB;
        }
    }
    .addFirmantes:has(.email-list.sortable-active) ~ .btns-addSigner{
        .btn.btn--outline-primary,
        button.enviarDocumento {
            i.fa-solid.fa-circle-xmark, .close-sequence{
                display: flex;
            }
            i.fa-solid.fa-arrow-down-1-9, .active-sequence{
                display: none;
            }
        }
    }
    /* Personal signatures button styles */
    .btns-addSigner .personal-signatures-button{
        min-width: 201px;
    }
    .personal-signatures-on.hidden,
    .personal-signatures-off.hidden{
        display: none;
    }
    .config-container{
        display: flex;
        justify-content: flex-end;
        position: relative;
        left: 100px;
        top: 28px;
        button{
            background: none;
            border: none;
        }
    }
    .choiseFirma{
        width: 46vw !important;
        flex-direction: row !important;
        margin:auto;
        .img-container{
            width: auto;
            margin-right: 20px;
            img{
                width: 8vw;
                display: none;
            }
            #img-auto{
                display: block;
            }
        }
        .content-select{
            width: -webkit-fill-available;
        }
        .descripcion-container{
            p{
                display: none;
                color: #898AB1;
                font-size: 14px;
                padding-left: 10px;
                margin-top: 10px;
            }
            #desc-auto{
                display: block;
            }
        }
    }
    div:nth-child(1){
        display: flex;
        flex-direction: column;
        width: 80%;
        label{
            color: #898AB1;
            font-weight: bold;
            font-size: 16px;
            margin-top: 12px;
            text-align: justify;
            margin-bottom: 12px;
        }
        input, #signaturePosition{
            padding: 10px;
            border: 1px solid #E0E0EC;
            border-radius: 14px;
            height: 40px;
            position: relative;
            width: -webkit-fill-available;
            font-size: 14px;
        }
        #signaturePosition{
            z-index: 2;
            background: transparent;
            color: #898AB1;
            font-weight: 400;
            max-width: 30vw;
        }
    }
    #configuracion-avanzada{
        margin-bottom: 33px;
        color: #00BAD4;
        font-size: 16px;
        cursor: pointer;
        font-weight: 600;
    }
    #configuracion-avanzada:hover{
        color: #0296ab;
        box-shadow: none !important;
    }
    .botones-formulario {
        display: flex;
        width: -webkit-fill-available;
        justify-content: space-between;
        margin-top: 50px;
        .btn-retrocederDatos{
            width: 135px;
            background: none;
            border: 2px solid #00bad4;
            color: #00bad4;
            box-shadow: none;
        }
        .btn-continuarDatos{
            box-shadow: none;
        }
        .reenviar-correo{
            font-size: 14px !important;
        }
        .pregunta{
            padding-bottom: 0 !important;
            margin-top: 15px;
        }
        .registro{
            padding: 0 !important;
        }
    }
    .botones-formulario:has(.btn-reenviar){
        flex-direction: column;
        align-items: center;
        gap: 5px;
    }
}
.botones-formulario.btn-verify{
    flex-direction: column;
    align-items: center;
    gap: 0;
    font-size: var(--text-base);
}
/*
 * views/upload_modern.css — Wizard de firma, paso 1 "Subir documentos" (paso 14)
 * FirmaYa / zappb
 *
 * Aditivo sobre upload.css legacy. Moderniza la zona de drop:
 *   - Dashed border cyan que se solidifica en hover/drag-over
 *   - Ícono de nube grande centrado
 *   - Tipografía clara con título + instrucción
 *   - Estado drag-over con fill cyan pale + scale sutil
 *   - Lista de archivos como cards PDF con icono rojo
 *
 * Preserva: markup con data-upload-target="dropzone|input",
 *           data-form-target="testField|retestField|numberField",
 *           data-action Stimulus, IDs #uploadContainer, #fileInput,
 *           #uploadedFilesListContainer.
 *
 * Nota: el upload_controller Stimulus agrega clase .drag-over
 * (con guión). El CSS legacy en application.css usaba .dragover
 * (sin guión) — bug preexistente donde el efecto no se activaba.
 * Aquí usamos .drag-over (match correcto con el controller).
 */


/* ============================================================
   CONTAINER — layout moderno
   ============================================================ */

.container-documentos-home {
  font-family: var(--font-family-base);
  padding-bottom: var(--space-12);
}


/* ============================================================
   UPLOAD CONTAINER — dashed dropzone
   ============================================================ */

.upload-container {
  /* Override dimensiones legacy para más aire */
  max-width: 720px !important;
  width: auto !important;
  margin: var(--space-8) auto !important;
  padding: var(--space-6) var(--space-6) var(--space-4) !important;
  gap: var(--space-4) !important;
  min-height: 360px !important;

  /* Dashed border decorativo (solo cuando no hay archivos — se
     neutraliza cuando el contenedor pasa al modo lista) */
  background: var(--surface-raised) !important;
  border: 2px dashed var(--brand-cyan-400) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: none !important;
  transition:
    border-color var(--transition-base),
    background-color var(--transition-base),
    transform var(--transition-fast),
    box-shadow var(--transition-base);

  position: relative;
}

.upload-container:hover {
  border-color: var(--brand-cyan-500) !important;
  background: var(--brand-cyan-100) !important;
}

/* Estado dragover — bordes sólidos, fondo más teñido, scale sutil */
.upload-container.drag-over,
.upload-container.dragover {
  border-color: var(--brand-cyan-500) !important;
  border-style: solid !important;
  background: var(--brand-cyan-100) !important;
  box-shadow:
    0 0 0 4px rgba(0, 186, 212, 0.15),
    var(--elevation-2) !important;
  transform: translateY(-1px);
}

.upload-container.drag-over::before,
.upload-container.dragover::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 186, 212, 0.15) 0%, transparent 60%);
  pointer-events: none;
}


/* Cuando el container está en modo "lista de archivos" (contenedor
   neutraliza el dashed para no distraer) */
.upload-container.uplod-containerFileList,
.uplod-containerFileList {
  border-style: solid !important;
  border-color: var(--border-subtle) !important;
  background: var(--surface-raised) !important;
  box-shadow: var(--elevation-1) !important;
}

.upload-container.uplod-containerFileList:hover,
.uplod-containerFileList:hover {
  background: var(--surface-raised) !important;
  border-color: var(--border-default) !important;
  transform: none;
}


/* ============================================================
   TABS SUPERIOR — "Documentos" / "Plantillas (Próximamente)"
   ============================================================ */

.upload-container .tittle-addDocuments {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  padding-bottom: var(--space-4) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  font-family: var(--font-family-base);
}

.upload-container .tittle-addDocuments .aDocumentos {
  font-size: var(--text-sm) !important;
  font-weight: var(--font-weight-semibold) !important;
  color: var(--text-brand) !important;
  text-decoration: none !important;
  padding: var(--space-2) 0 !important;
  position: relative;
  margin-right: 0 !important;
  border-bottom: 0 !important;  /* eliminamos el legacy */
}

.upload-container .tittle-addDocuments .aDocumentos::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -17px;
  height: 2px;
  background: var(--brand-cyan-500);
  border-radius: var(--radius-round);
}

.upload-container .tittle-addDocuments .aPlantillas {
  font-size: var(--text-sm) !important;
  color: var(--text-muted) !important;
  text-decoration: none !important;
  padding: var(--space-2) 0 !important;
}

.upload-container .tittle-addDocuments .proximamente {
  display: inline-flex !important;
  align-items: center;
  padding: 2px var(--space-2) !important;
  background: var(--brand-cyan-100) !important;
  color: var(--brand-cyan-700) !important;
  border: 1px solid var(--brand-cyan-200) !important;
  border-radius: var(--radius-round) !important;
  font-size: 10px !important;
  font-weight: var(--font-weight-semibold) !important;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  margin-left: 0 !important;
}


/* ============================================================
   DROP ZONE CONTENT — ícono nube + título + help + CTA
   ============================================================ */

.upload-container .content-uploadContainer {
  padding: var(--space-8) var(--space-4) !important;
  gap: var(--space-4) !important;
  justify-content: center !important;
  align-items: center !important;
  display: flex !important;
  flex-direction: column !important;
  text-align: center;
  margin: 0 auto;
  max-width: 480px;
  width: 100%;
}

/* V10.5.3: specificity bump para que .noDisplay (display:none
   !important, specificity 0,1,0) venza al display:flex !important
   del selector anterior (specificity 0,2,0). Sin esto, el wrapper
   drop-zone NUNCA se oculta cuando form_controller#toggleUsingValue
   le aplica la clase con already_uploaded > 0 — Diego veía el
   mensaje "Arrastra tus PDFs aquí" persistente bajo el botón
   "+ Agregar más" (gotcha 8.4 sub-patrón D: doble !important resuelto
   por specificity). */
.upload-container .content-uploadContainer.noDisplay {
  display: none !important;
}

/* Ícono de nube (inyectado vía ERB — SVG con class .upload-drop__icon) */
.upload-drop__icon {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-round);
  background: var(--brand-cyan-100);
  color: var(--brand-cyan-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-2);
  transition: transform var(--transition-base), background var(--transition-fast);
}

.upload-container:hover .upload-drop__icon,
.upload-container.drag-over .upload-drop__icon {
  transform: scale(1.05);
  background: var(--brand-cyan-200);
}

.upload-drop__icon svg {
  width: 32px;
  height: 32px;
  stroke: currentColor;
}

/* Título del drop */
.upload-drop__title {
  font-family: var(--font-family-display);
  font-size: clamp(18px, 1.6vw, var(--text-xl));
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-snug);
  color: var(--text-strong);
  margin: 0 !important;
}

.upload-drop__help {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0 !important;
  line-height: var(--leading-normal);
}

/* El texto legacy también estiliza al tokens */
.upload-container .content-uploadContainer .upload-text {
  font-family: var(--font-family-base) !important;
  font-size: var(--text-sm) !important;
  color: var(--text-muted) !important;
  margin: 0 !important;
  gap: var(--space-1) !important;
  line-height: var(--leading-normal);
}

.upload-container .content-uploadContainer .upload-text span {
  color: var(--text-muted) !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--font-weight-medium) !important;
}


/* Botón "Seleccionar" — CTA primario navy.
   V8.3: pasa de gradient cyan a navy unificado V5.2. Cierra la
   excepción documentada en V6.2 frente 2 ("accent component del
   drop-zone principal") tras decisión del usuario de unificar el
   wizard completo. Replica EXACTAMENTE el patrón de V8.1 commit
   207e610 aplicado a #upload-image .upload-button (drop-zone de
   imagen de firma manuscrita).

   Resultado: wizard de firma completo unificado en navy. Cyan
   reservado para accent components decorativos (action-cards de
   /home, badges, gauges, progress bar, theme switcher). */
.upload-container .upload-button {
  background: var(--brand-navy-800) !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
  height: 44px;
  padding: 0 var(--space-6) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-family-base) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--font-weight-semibold) !important;
  letter-spacing: var(--tracking-snug);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  box-shadow:
    0 1px 2px rgba(22, 47, 133, 0.18),
    0 10px 20px -12px rgba(22, 47, 133, 0.35);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
  min-width: unset !important;
  text-decoration: none !important;
  margin: 0 !important;
}

.upload-container .upload-button:hover {
  background: var(--brand-navy-500) !important;
  transform: translateY(-1px);
  box-shadow:
    0 2px 4px rgba(22, 47, 133, 0.24),
    0 14px 24px -10px rgba(22, 47, 133, 0.50);
}

.upload-container .upload-button:active {
  transform: translateY(0) scale(0.98);
  background: var(--brand-navy-800) !important;
}

/* V10.5.3: eliminadas las variantes outline para
   .upload-button[data-form-target="retestField"]. El botón
   "+ Agregar más" ya no es un elemento separado — el CTA es ahora
   único y comparte estilos del primary navy del bloque anterior. */


/* ============================================================
   LISTA DE ARCHIVOS SUBIDOS
   ============================================================ */

.upload-container #uploadedFilesListContainer {
  width: 100%;
  padding: 0 !important;
  flex: 1;
}

.upload-container #uploadedFilesList {
  display: flex !important;
  flex-direction: column;
  gap: var(--space-2) !important;
  padding: 0 !important;
  width: 100%;
  list-style: none;
}

.upload-container #uploadedFilesList li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4) !important;
  background: var(--surface-app);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  color: var(--text-strong) !important;
  font-size: var(--text-sm);
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}

/* :hover unificado V9.5(b) — ver components/cards.css */

/* Nombre del archivo (span con icono de PDF) */
.upload-container #uploadedFilesList li > span {
  display: flex !important;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
  font-weight: var(--font-weight-semibold) !important;
  color: var(--text-strong) !important;
  font-size: var(--text-sm) !important;
  flex-direction: row !important;
}

.upload-container #uploadedFilesList li > span i {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--danger-50);
  color: var(--danger-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  margin-right: 0 !important;
}

.upload-container #uploadedFilesList li .remove-button {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-round);
  background: transparent !important;
  text-decoration: none;
  border: none !important;
  color: var(--text-muted) !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
}

.upload-container #uploadedFilesList li .remove-button:hover {
  background: var(--danger-50) !important;
  color: var(--danger-700) !important;
}


/* Título "documentos" en modo lista */
.upload-container .tittle-documentList {
  padding-left: 0 !important;
  color: var(--text-brand) !important;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 !important;
}

.upload-container .tittle-documentList a {
  color: var(--text-brand) !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.upload-container .tittle-documentList a:hover {
  color: var(--brand-cyan-700) !important;
}

.upload-container .tittle-documentList i.fa-chevron-left {
  font-size: 12px;
  margin-right: 0 !important;
}


/* Mensaje de timestamp/sello */
.upload-container .timestamp-seal-message {
  width: 100%;
  padding: var(--space-3) var(--space-4) !important;
  margin: 0 !important;
  background: var(--brand-navy-100);
  border-radius: var(--radius-md);
  color: var(--text-default) !important;
  font-size: var(--text-sm) !important;
  line-height: var(--leading-normal);
}

.upload-container .timestamp-seal-message.is-disabled {
  opacity: 0.55;
  color: var(--text-muted) !important;
  background: var(--neutral-100);
}


/* ============================================================
   BOTONES DE NAVEGACIÓN (Volver / Continuar) — paso 1 wizard
   ============================================================ */

.btnContainer-subirDocumentos {
  max-width: 720px !important;
  width: auto !important;
  margin: var(--space-6) auto var(--space-4) !important;
  height: auto !important;
  padding: 0 var(--space-2);
  display: flex !important;
  justify-content: space-between;
  gap: var(--space-3);
}

.btnContainer-subirDocumentos .btn {
  min-width: 140px;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
  .upload-container {
    margin: var(--space-5) var(--space-4) !important;
    padding: var(--space-5) var(--space-4) !important;
    min-height: 300px !important;
  }

  .upload-container .content-uploadContainer {
    padding: var(--space-5) 0 !important;
  }

  .upload-drop__icon {
    width: 56px;
    height: 56px;
  }
  .upload-drop__icon svg { width: 26px; height: 26px; }

  .btnContainer-subirDocumentos {
    margin: var(--space-4) var(--space-4) var(--space-4) !important;
    flex-direction: column-reverse;
  }
  .btnContainer-subirDocumentos .btn {
    width: 100%;
    min-width: unset;
  }
}

/* Ajustes extra a 480px */
@media (max-width: 480px) {
  .upload-container {
    padding: var(--space-4) var(--space-3) !important;
    min-height: 260px !important;
    gap: var(--space-3) !important;
  }

  .upload-drop__title { font-size: var(--text-lg); }
  .upload-drop__help { font-size: var(--text-xs); }
  .upload-drop__icon { width: 52px; height: 52px; }
  .upload-drop__icon svg { width: 22px; height: 22px; }

  .upload-container .upload-button {
    height: 42px;
    padding: 0 var(--space-5) !important;
    font-size: var(--text-sm);
  }

  /* Tabs en línea con scroll horizontal si es necesario */
  .upload-container .tittle-addDocuments {
    overflow-x: auto;
    padding-bottom: var(--space-3) !important;
  }

  /* Lista de archivos: nombres largos con ellipsis */
  .upload-container #uploadedFilesList li > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}


/* ============================================================
   ENTRADA ANIMADA
   ============================================================ */

@keyframes upload-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.upload-container {
  animation: upload-fade-in var(--transition-base) var(--ease-out) both;
}

@media (prefers-reduced-motion: reduce) {
  .upload-container,
  .upload-container.drag-over,
  .upload-container.dragover { animation: none; transition: none; }
}


/* ============================================================
   V11.5a — Dark-mode hover overrides (zona carga PDF)
   ============================================================
   QA visual con Chrome MCP detectó anti-patrón sistémico: los
   hover usan primitivos brand (cyan-100/200/700, danger-50/700)
   como bg/color. Esos primitivos NO se redefinen en dark por
   diseño V11, así que los hovers light quedan rotos en dark
   (bg blanquecino sobre layout oscuro = flash + pérdida de
   contraste del texto).

   Doctrina post-V11.3: "todos los squircles en dark unifican a
   paleta cyan translúcida". V11.5a extiende esa doctrina a
   hovers. Niveles de alpha calibrados según rol:
     - 08% para wrappers grandes (dropzone)
     - 20% para acentos chicos (ícono nube)
     - 16% para danger states

   Reglas intactas (verificación pendiente en QA):
   - .upload-container .upload-button:hover (bg navy-500)
   - .uplod-containerFileList:hover (ya usa --surface-raised)
   - #uploadedFilesList li:hover (solo border + translateY, OK)

   V11.5b cubrirá sidebar miCuenta hover (legacy nested,
   requerirá !important). V11.5c cubrirá cards del home y
   dashboard.
   ============================================================ */

/* V11.5a-bis — bg base del wrapper en dark.
   La regla legacy .upload-container en upload.css:26 declara
   background-color: #ffff hardcoded. En reposo dark el wrapper
   queda blanco, exponiendo el problema cuando V11.5a aplicó el
   hover translúcido (alpha 8% se compone sobre blanco → gris
   medio). Override base [0,2,1] gana al legacy [0,1,0] sin
   !important. Refactor del legacy diferido a V11.9. */
[data-theme="dark"] .upload-container {
  background: var(--surface-raised);
}

/* V11.5a-ter — !important requerido en hovers que compiten contra
   legacy con !important + primitivos brand. El walker original
   (CSSStyleRule.style.backgroundColor) no leía getPropertyPriority,
   así que V11.5a no detectó las 3 reglas legacy con !important
   en upload_modern.css:
     - .upload-container:hover bg cyan-100 !important (l.64)
     - .tittle-documentList a:hover color cyan-700 !important (l.416)
     - .remove-button:hover bg/color danger-50/700 !important (l.390-391)
   Sumado: nuevo override de .drag-over/.dragover (legacy
   .upload-container.drag-over bg cyan-100 !important en l.72) que
   tampoco estaba cubierto en V11.5a.

   Doctrina actualizada: cuando legacy tiene !important + primitivo
   brand light-only, override dark también necesita !important.
   Mismo patrón nested que V11.3-bis/V11.4 J/V11.4-bis.

   .upload-drop__icon (hover/drag-over) base NO tiene !important,
   override V11.5a sigue OK sin escalación. */

[data-theme="dark"] .upload-container:hover {
  background: rgba(0, 186, 212, 0.08) !important;  /* cyan-500 @ 8% */
  border-color: var(--brand-cyan-400);
}

[data-theme="dark"] .upload-container.dragover,
[data-theme="dark"] .upload-container.drag-over {
  background: rgba(0, 186, 212, 0.15) !important; /* cyan-500 @ 15% */
  border-color: var(--brand-cyan-500);
}

[data-theme="dark"] .upload-container:hover .upload-drop__icon,
[data-theme="dark"] .upload-container.drag-over .upload-drop__icon {
  background: rgba(0, 186, 212, 0.20);           /* cyan-500 @ 20% */
}

[data-theme="dark"] .upload-container .tittle-documentList a:hover {
  color: var(--brand-cyan-300) !important;
}

[data-theme="dark"] .upload-container #uploadedFilesList li .remove-button:hover {
  background: rgba(239, 68, 68, 0.16) !important; /* danger @ 16% */
  color: var(--text-strong) !important;
}


/* ============================================================
 * V11.6d — Paso 1 wizard dark (drop-zone reposo + chip body)
 * ============================================================
 * Cobertura de dos hallazgos del paso 1 (/sign/upload_home)
 * co-localizados aquí porque su declaración base vive en este
 * archivo. Los `.headerFirma .proximamente / .badge-soon` viven
 * en layout/header_modern.css y reciben su override allí (mismo
 * sub-ciclo V11.6d, archivo distinto).
 *
 * Hallazgos:
 *
 * 1. .upload-drop__icon REPOSO (línea 198-209) — squircle ícono
 *    nube con bg cyan-100 + color cyan-700 light, sin variante
 *    dark. V11.5a-ter cubrió hover/drag-over a cyan-500 @20%
 *    (líneas 617-621) pero olvidó el reposo. En dark el squircle
 *    queda como flash claro 72×72px sobre la card oscura.
 *    Doctrina alpha-por-rol: reposo = cyan-500 @10% (un nivel
 *    menos saturado que hover @20% para preservar la jerarquía
 *    interactiva). Color del SVG: cyan-300.
 *
 * 2. .upload-container .tittle-addDocuments .proximamente
 *    (línea 152-165) — chip "PRÓXIMAMENTE" body wizard con bg
 *    cyan-100 + color cyan-700 + border cyan-200, contraste
 *    3.34:1 AA fail. Es el 5° selector del patrón 'badge soft'
 *    consolidado por V11.5e/f/g/h. Doctrina: cyan-300 @16% bg,
 *    cyan-300 color, cyan-300 @24% border.
 *    Legacy con !important en bg/color/border → override con
 *    !important defensivo (lección V11.5a-ter).
 *
 * Specificity:
 *   - .upload-drop__icon reposo: legacy [0,1,0] → override
 *     [0,2,0] gana sin !important.
 *   - chip body: legacy [0,3,0] + !important → override [0,4,0]
 *     + !important defensivo.
 *
 * NO modifica:
 *   - V11.5a-ter (líneas 617-621) hover/drag-over .upload-drop__icon
 *   - .proximamente base navy (legacy fallback)
 *   - .upload-drop__icon svg dimensiones / responsive 480/360px
 * ============================================================ */

/* G1: .upload-drop__icon reposo — cyan-500 @10% + cyan-300 */
[data-theme="dark"] .upload-drop__icon {
  background: rgba(0, 186, 212, 0.10);
  color: var(--brand-cyan-300);
  border-color: var(--brand-cyan-300);
}

/* G2: chip "PRÓXIMAMENTE" body wizard — badge soft V11.5g */
[data-theme="dark"] .upload-container .tittle-addDocuments .proximamente {
  background: rgba(102, 217, 245, 0.16) !important;    /* cyan-300 @16% */
  color: var(--brand-cyan-300) !important;
  border-color: rgba(102, 217, 245, 0.24) !important;  /* cyan-300 @24% */
}

/* ============================================================
 * FIN V11.6d (upload_modern)
 * ============================================================ */
/*
 * signers.css — Agregar firmantes y finalizar
 * FirmaYa / zappb
 *
 * Cubre: #signersContainer, #finalizeDetailsContainer,
 *        #finalizeDetailsPersonalizada, #extra_signer_info,
 *        .config-container, #signersContainer label, .label-checkbox
 *
 * EXTRAÍDO DESDE application.css
 */

#signersContainer label{
    color:#888;
    font-size: 16px;
    /* Estilo para el icono */
    .info-icon {
        display: inline-block;
        font-size: 12px;
        padding: 0px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 2px solid #49B7D2;
        color: #49B7D2;
        text-align: center;
        /* line-height: 20px; */
        font-weight: bold;
        margin-left: 10px;
        cursor: pointer;
    }

    /* Estilo para el cuadro informativo */
    .info-box {
        pointer-events: none;
        display: none;
        /* margin-left: 25px; */
        padding: 10px;
        background-color: #222D8B;
        border: 1px solid #222D8B;
        border-radius: 20px;
        font-size: 14px;
        margin-left: 24px;
        /* margin-top: -35px; */
        color: #fff;
        width: max-content;
        max-width: 316px;
        padding: 25px;
        top: 50%;
        left: 100%;
        position: absolute;
        z-index: 1;
        transform: translateY(-50%);
        .arrow-icon {
            display: inline-block;
            width: 18px;
            height: 18px;
            background-color: #222D8B;
            clip-path: polygon(0 50%, 100% 0, 100% 100%);
            margin-left: 10px;
            /* vertical-align: middle; */
            position: absolute;
            right: 100%;
            top: 50%;
            transform: translateY(-50%);
        }
    }

    .enviarDocumento:hover ~ .info-box,
    .btn.btn--outline-primary:hover ~ .info-box{
        display: block;
    }
}
.label-checkbox{
    display: flex;
    font-size: 14px !important;
    position: relative;
}

#finalizeDetailsContainer, #finalizeDetailsPersonalizada{
    align-items: flex-end;
    flex-direction: column;
    align-content: normal;
    .config-container{
        display: flex;
        width: 70%;
        max-height: 70vh;
        margin: auto;
        flex-direction: column;
        align-items: center;
        #extra_signer_info{
            display: none;
        }
        .choise-option{
            padding-left: 29px;
            padding-top:0px !important;
            gap: 42px;
            flex-direction: row !important;
            width: -webkit-fill-available;
            h3{
                font-size: 20px;
            }
            p{
                display: none;
            }
            a {
                text-decoration: none;
                color: #222D8B;
                font-weight: bold;
            }
            .active {
                border-bottom: 2px solid #222D8B;
            }
        }
        #signer_info{
            margin: auto;
        }
        .select-option{
            margin-top: 20px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap:10px;
            width: -webkit-fill-available;
            label{
                color: #898AB1;
                font-size: 16px !important;
                font-weight: bold;
                text-align: justify;
                margin-bottom: 0px;
            }
            #signatureCertificado{
                padding: 10px;
                border: 1px solid #E0E0EC;
                border-radius: 14px;
                height: 40px;
                width: 385px;
                font-size: 14px;
                color:#898AB1;
                z-index: 1;
                background: transparent;
                cursor: pointer;
            }
            i.fa-chevron-down.arrow-down{
                position: relative;
                top: 12px;
                right: 5%;
                transition: transform 0.3s ease;
                color: #898AB1;
            }
        }
        .mensaje-option{
            flex-direction: column;
            margin-top: 30px;
            padding-left: 35px;
            gap: 5px;
            label {
                color: #182e8a;
            }
            input{
                width: 90%;
                height: 12vh;
                text-align: center;
                border: 1px solid #00bad4;
                border-radius: 12px;
            }
        }
    }

    .checkbox-configuracion{
        width: 80%;
        padding: 25px 0px;
        .label-checkbox{
            color: #8888;
            font-size: 14px;
        }
    }

    button#configuracion-avanzada{
        border: transparent;
        background: transparent;
        cursor: pointer;
    }

}
div#finalizeDetailsPersonalizada.manual {
    flex-direction: column-reverse;
    padding-bottom: 18px;
    .config-container{
        overflow: auto;
    }
    #configuracion-avanzada{
        display: none;
    }
    #signer_info{
        display: none;
    }
}
#extra_signer_info{
    display: flex;
    gap: 30px;
    padding-bottom: 14px;
    flex-direction: column;
    div:nth-child(1) {
        width: 100%;
    }
    .choise-option{
        background: #222D8B;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        color: #ffff;
        p{
            margin: 0;
            padding: 10px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 9px;
            span{
                background: #fff;
                color: #222D8B;
                border-radius: 16px;
                padding: 4px 10px;
                font-size: 14px;
                font-weight: 600;
            }
        }
    }
}
[id^="extra_signer_info_"] {
    border: 1px solid #f3f3f3;
    border-radius: 16px;
}
.config-container{
    dialog{
        position: absolute;
        width: 70%;
        border: none;
        border-radius: 6px;
        padding:45px;
        box-shadow: 0px 6px 6px 3px rgba(0, 0, 0, 0.14);
        gap: 10px;
        align-content: center;
        flex-direction: column;
        button#configuracion-avanzada {
            display: none;
            margin-bottom: 0 !important;
            padding: 10px 0px 0px 0px !important;
            text-align: right;
            width: 100%;
        }
        /* V8.7 follow-up: bloque .btn--primary completo eliminado
           (era el resto de V8.7(b) Hunk 1 opción B). La eliminación
           parcial dejó un residuo CSS nesting que renderizaba el
           botón con system colors highlight/highlighttext, invisible
           sobre el fondo del dialog. El override mínimo de
           width + align-self se movió a signers_modern.css con
           selector plano (sin nesting) para que no pise el
           background/color del .btn--primary base. */
        h3{
            font-size: 18px;
        }
        #signer_info{
            width: auto;
            margin: auto;
            gap: 15px !important;
        }
        .select-option{
            .container-selector{
                display: flex;
                border: 1px solid #E0E0EC;
                border-radius: 16px;
                justify-content: space-between;
                align-items: center;
                color: #898AB1;
                select{
                    width: 100%;
                    border: none;
                    color: #898AB1;
                    font-size: 16px;
                    border-radius: 16px !important;
                    padding: 10px;
                }
                i.fas.fa-chevron-down.arrow-down {
                    padding-right: 10px;
                }
            }
            .container-selector.certificado{
                margin-top: 12px;
            }
        }
        .checkbox-configuracion {
            width: 60%;
            margin: 12px auto;
        }
    }
    dialog[open]{
        display: flex;
    }
}
#finalizeDetailsPersonalizada  button#configuracion-avanzada{
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 0;
}

#finalizeDetailsContainer{
    justify-content: space-between;
}
#upload4{
    display: block;
    position: fixed;
    z-index: 3;
    top: 0;
    height: -webkit-fill-available;
    width: -webkit-fill-available;
    left: 0;
    background: #00000061;
    transition: 0.5s;
    #finalizeDetailsPersonalizada{
        height: auto;
        width: 50vw;
        transition: transform 0.3s ease;
        gap: 0;
    }
}


/*
 * views/signers_modern.css — Wizard de firma, paso 2 "Agregar firmantes" (paso 17)
 * FirmaYa / zappb
 *
 * Aditivo sobre upload.css legacy (que también cubre #signersContainer).
 * Convierte el form denso de agregar firmantes en un layout moderno con:
 *   - Card contenedora con elevation + radius-xl (patrón paso 14)
 *   - Input "Agregar firmante" con icono y botón integrado
 *   - Lista de firmantes como rows con avatar gradient navy→cyan
 *   - Empty state cuando no hay firmantes
 *   - Botones de acción (soy firmante / orden / firmas personales) como
 *     pills modernas con badges PRO
 *
 * Preserva: data-controller="email sortable-aux personal-signatures",
 *           data-*-target, data-action, IDs #signersContainer, #signer_adder,
 *           #signers_form, #email_list, form names signers[][*], etc.
 */


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

#signersContainer {
  max-width: 720px !important;
  width: auto !important;
  margin: var(--space-8) auto !important;
  padding: var(--space-6) !important;
  min-height: unset !important;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--elevation-1) !important;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  font-family: var(--font-family-base);
}

/* Header / título de la card */
#signersContainer .top-section.addFirmantes {
  margin-top: 0 !important;
  width: 100% !important;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

#signersContainer .top-section.addFirmantes > label {
  font-family: var(--font-family-display);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  color: var(--text-strong);
  letter-spacing: var(--tracking-snug);
  margin: 0;
  text-align: left;
}

#signersContainer .top-section.addFirmantes > p {
  font-size: var(--text-sm) !important;
  color: var(--text-muted) !important;
  font-weight: var(--font-weight-medium) !important;
  margin: 0 !important;
}


/* ============================================================
   INPUT "Agregar firmante" moderno
   ============================================================ */

#signersContainer .container-firmas {
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  gap: var(--space-4) !important;
  overflow: visible !important;
  width: 100% !important;
}

#signer_adder .email-input-wrapper {
  display: flex !important;
  align-items: stretch;
  gap: var(--space-2);
  background: var(--surface-app);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  padding-left: 0;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  color: var(--text-strong) !important;
  position: relative;
}

#signer_adder .email-input-wrapper::before {
  content: "\f0e0";  /* Font Awesome envelope */
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "FontAwesome";
  font-weight: 900;
  color: var(--text-muted);
  font-size: 14px;
  padding: 0 0 0 var(--space-4);
  align-self: center;
  pointer-events: none;
}

#signer_adder .email-input-wrapper:focus-within {
  border-color: var(--brand-cyan-500);
  box-shadow: 0 0 0 3px rgba(0, 186, 212, 0.18);
}

#signer_adder .email-input-wrapper .email-input {
  flex: 1;
  height: 44px;
  padding: 0 var(--space-3) !important;
  border: none !important;
  background: transparent !important;
  font-family: var(--font-family-base);
  font-size: var(--text-md);
  color: var(--text-strong) !important;
  outline: none !important;
}

#signer_adder .email-input-wrapper .email-input::placeholder {
  color: var(--text-muted) !important;
}

/* Botón "+" del input — pill cyan que se activa al escribir */
#signer_adder .email-input-wrapper .email-add-icon {
  align-self: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--neutral-100);
  color: var(--neutral-400) !important;
  cursor: not-allowed;
  font-size: 14px;
  transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

#signer_adder .email-input-wrapper .email-add-icon.active,
#signer_adder .email-input-wrapper:focus-within .email-add-icon {
  background: linear-gradient(135deg, var(--brand-cyan-500), var(--brand-cyan-600));
  color: #fff !important;
  cursor: pointer;
}

#signer_adder .email-input-wrapper .email-add-icon.active:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -2px rgba(0, 186, 212, 0.5);
}


/* ============================================================
   LISTA DE FIRMANTES AGREGADOS
   ============================================================ */

#signersContainer .email-list {
  width: 100%;
  max-height: none !important;
  display: flex !important;
  flex-direction: column;
  gap: var(--space-2) !important;
}

#signersContainer .email-list #email_list {
  display: flex !important;
  flex-direction: column;
  gap: var(--space-2) !important;
  padding: 0 !important;
  margin: 0;
  list-style: none;
  width: 100%;
}

#signersContainer .email-list #email_list.showEmail {
  display: flex !important;
}

/* Cada firmante como card horizontal */
#signersContainer .email-list #email_list .email-item {
  display: grid !important;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--space-3) !important;
  padding: var(--space-3) var(--space-4) !important;
  background: var(--surface-app) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-lg) !important;
  width: 100% !important;
  height: auto !important;
  font-family: var(--font-family-base) !important;
  transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

/* :hover unificado V9.5(b) — ver components/cards.css */

/* Avatar circular con gradient navy→cyan — inyectado vía ERB con clase */
.signer-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-round);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  font-size: 14px;
  color: var(--text-on-brand);
  background: linear-gradient(135deg, var(--brand-navy-700) 0%, var(--brand-cyan-600) 100%);
  letter-spacing: var(--tracking-snug);
  flex-shrink: 0;
  text-transform: uppercase;
  box-shadow:
    0 1px 2px rgba(15, 18, 35, 0.08),
    0 4px 8px -4px rgba(34, 45, 139, 0.35);
}

/* Campo "order" (número de orden cuando sortable está activo) */
#signersContainer .email-item #signers__order,
#signersContainer .email-item .email-index {
  display: none;
}

#signersContainer .email-list.sortable-active .email-item #signers__order,
#signersContainer .email-list.sortable-active .email-item .email-index {
  display: flex !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: var(--radius-round) !important;
  background: var(--brand-cyan-500) !important;
  color: #fff !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--font-weight-bold) !important;
  text-align: center !important;
  align-items: center;
  justify-content: center;
  border: none;
  padding: 0;
  font-family: var(--font-family-display);
}

/* Campo email (readonly, es el label principal) */
#signersContainer .email-item #signers__email,
#signersContainer .email-item .email-address {
  all: unset;
  color: var(--text-strong) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--font-weight-semibold) !important;
  min-width: 0 !important;
  width: auto !important;
  padding: 0 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: default;
  font-family: inherit;
}

/* Botón eliminar firmante (el <a>X) */
#signersContainer .email-item a {
  width: 32px !important;
  height: 32px !important;
  margin-left: 0 !important;
  border-radius: var(--radius-round) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  color: var(--text-muted) !important;
  font-size: 0 !important;  /* ocultamos la "X" de texto */
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

#signersContainer .email-item a::before {
  content: "\f00d";  /* fa-xmark */
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "FontAwesome";
  font-weight: 900;
  font-size: 13px;
}

#signersContainer .email-item a:hover {
  background: var(--danger-50) !important;
  color: var(--danger-700) !important;
}

/* Drag-handle cuando sortable está activo */
#signersContainer .email-list.sortable-active .email-item {
  cursor: grab;
}

#signersContainer .email-list.sortable-active .email-item::before {
  content: "\f58e";  /* fa-grip-vertical */
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "FontAwesome";
  font-weight: 900;
  color: var(--text-muted);
  font-size: 13px;
  margin-right: calc(var(--space-2) * -1);
  cursor: grab;
  align-self: center;
}

#signersContainer .email-list.sortable-active .email-item:active {
  cursor: grabbing;
}


/* ============================================================
   EMPTY STATE — cuando no hay firmantes agregados
   ============================================================ */

.signers-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-4);
  text-align: center;
  background: var(--surface-app);
  border: 2px dashed var(--border-subtle);
  border-radius: var(--radius-lg);
  color: var(--text-muted);
}

.signers-empty__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-round);
  background: var(--brand-cyan-100);
  color: var(--brand-cyan-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.signers-empty__title {
  font-family: var(--font-family-display);
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
  color: var(--text-strong);
  margin: 0;
  letter-spacing: var(--tracking-snug);
}

.signers-empty__description {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
  max-width: 340px;
  line-height: var(--leading-normal);
}

/* Ocultar el empty state cuando #email_list tiene al menos un firmante.
   :has() re-evalúa automáticamente al agregar/eliminar <li> vía Turbo Stream. */
.container-firmas:has(#email_list li) .signers-empty {
  display: none !important;
}


/* ============================================================
   BOTONES DE ACCIÓN (soy firmante / ordenar / firmas personales)
   ============================================================ */

#signersContainer .btns-addSigner {
  width: 100% !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: var(--space-2) !important;
  margin: 0 !important;
}

/* Override del btn legacy dentro de btns-addSigner — pills cyan outline */
#signersContainer .btns-addSigner .btn.btn--outline-primary {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--space-2) !important;
  padding: 0 var(--space-4) !important;
  height: 36px !important;
  background: var(--surface-raised) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-round) !important;
  color: var(--text-brand) !important;
  font-family: var(--font-family-base) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--font-weight-semibold) !important;
  letter-spacing: var(--tracking-snug);
  cursor: pointer !important;
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    color var(--transition-fast) !important;
  min-width: unset !important;
}

#signersContainer .btns-addSigner .btn.btn--outline-primary:not(:disabled):hover {
  background: var(--brand-cyan-100) !important;
  border-color: var(--brand-cyan-400) !important;
  color: var(--brand-cyan-700) !important;
  box-shadow: none !important;
}

#signersContainer .btns-addSigner .btn.btn--outline-primary i {
  color: var(--brand-navy-700);
  font-size: 12px;
}

#signersContainer .btns-addSigner .btn.btn--outline-primary:not(:disabled):hover i {
  color: var(--brand-cyan-700) !important;
}

/* Estado disabled */
#signersContainer .btns-addSigner .btn.btn--outline-primary:disabled,
#signersContainer .btns-addSigner .btn.btn--outline-primary.desactiveBtn {
  background: var(--neutral-100) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-muted) !important;
  cursor: not-allowed !important;
  opacity: 0.7;
}

#signersContainer .btns-addSigner .btn.btn--outline-primary:disabled i,
#signersContainer .btns-addSigner .btn.btn--outline-primary.desactiveBtn i {
  color: var(--text-muted) !important;
}

/* Badge "PRO" dentro del botón */
.span-pro {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  margin-left: var(--space-2);
  background: linear-gradient(135deg, var(--warning-500), #FFC94B);
  color: #fff;
  border-radius: var(--radius-xl);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

.span-pro i { 
  font-size: 9px !important; 
  margin-right: 3px;
  color: var(--text-muted) !important;
}

/* V8.2: restaurar el toggle .text-pro / .text-no-pro que la regla
   #signersContainer .btns-addSigner .span-pro (L436) había pisado por
   especificidad. El backend ya detecta @is_pro (sign_controller.rb:20)
   y el button recibe `disabled` + `desactiveBtn` cuando NO es PRO. El
   legacy components/forms.css:198-213 espera ese estado para alternar
   chips lock / lock-open, pero el rediseño moderno cambió `display:
   inline-flex` directo sobre `.span-pro` con especificidad (1,2,0),
   pisando el toggle legacy (0,1,2) y forzando ambos chips visibles.

   Fix: reintroducir el toggle con especificidad ≥ moderna (sin
   !important — la especificidad alta es suficiente). Funcional:
   - User sin PRO (button disabled): muestra solo chip "lock" (text-no-pro).
   - User PRO (button no disabled): muestra solo chip "lock-open" (text-pro).
   - El otro uso del patrón en _file_container_form.html.erb (timestamp
     seal del paso 1) NO necesita este override — su CSS legacy ya
     funciona porque no hay regla moderna ofensora allí. */

/* Default (sin disabled): chip "lock" oculto, chip "lock-open" visible
   (sigue heredando inline-flex de L436-449). */
#signersContainer .btns-addSigner .span-pro.text-no-pro {
  display: none;
}

/* Disabled / .desactiveBtn (user sin PRO): mostrar chip "lock", ocultar
   chip "lock-open". Cubre los 2 botones del wizard paso 2: ordenarFirma
   y personal-signatures-button. */
#signersContainer .btns-addSigner .btn:disabled .span-pro.text-no-pro,
#signersContainer .btns-addSigner .btn.desactiveBtn .span-pro.text-no-pro {
  display: inline-flex;
}

#signersContainer .btns-addSigner .btn:disabled .span-pro.text-pro,
#signersContainer .btns-addSigner .btn.desactiveBtn .span-pro.text-pro {
  display: none;
}

/* Estado "ordenarFirma" activo — cuando el sortable está ON */
#signersContainer .btns-addSigner .btn.btn--outline-primary.ordenarFirma {
  min-width: unset !important;
  border-color: var(--border-default) !important;
}

.email-list.sortable-active ~ .btns-addSigner .btn.btn--outline-primary.ordenarFirma,
#signersContainer .addFirmantes:has(.email-list.sortable-active) ~ .btns-addSigner .btn.btn--outline-primary.ordenarFirma {
  background: var(--brand-cyan-100) !important;
  border-color: var(--brand-cyan-400) !important;
  color: var(--brand-cyan-700) !important;
}


/* Tooltips (info-box) del hover de cada botón — refinados */
#signersContainer .btns-addSigner .info-box {
  background: var(--brand-navy-900) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-3) var(--space-4) !important;
  font-size: var(--text-xs) !important;
  line-height: var(--leading-normal);
  max-width: 320px;
  margin-top: var(--space-2);
  margin-left: 0;
  box-shadow: var(--elevation-2);
  color: #fff !important;
}

#signersContainer .btns-addSigner .info-box .arrow-icon {
  background: var(--brand-navy-900) !important;
  /* V8.2.1: flecha lateral ◀ apuntando al botón (info-box es lateral
     a la derecha del botón según legacy signers.css:48-49).

     V8.2.2 fix follow-up: anular el margin-left:10px del legacy
     (signers.css:59). Con left:-8px + margin-left:10px del legacy
     la flecha quedaba en 2px efectivos = DENTRO del info-box,
     invisible (navy sobre fondo navy). margin:0 lo anula. */
  clip-path: polygon(100% 0, 0 50%, 100% 100%) !important;
  top: 50% !important;
  right: auto !important;
  left: -8px !important;
  width: 8px !important;
  height: 12px !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
}

#signersContainer .btns-addSigner .info-box em {
  color: var(--brand-cyan-200);
  font-style: normal;
  font-weight: var(--font-weight-semibold);
  display: inline-block;
  margin-top: var(--space-1);
}


/* ============================================================
   CONFIGURACIÓN AVANZADA — botón al pie del container
   ============================================================ */

#signersContainer .config-container {
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: 100%;
  display: flex !important;
  justify-content: flex-end;
  align-items: center;
}

#signersContainer .config-container .tooltip-wrapper {
  position: relative;
}

#signersContainer .config-container #configuracion-avanzada {
  display: inline-flex !important;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-4) !important;
  height: 36px !important;
  background: transparent !important;
  border: 1px dashed var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-muted) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--font-weight-semibold) !important;
  cursor: pointer;
  margin: 0 !important;
  transition: border-color var(--transition-fast), color var(--transition-fast);
  min-width: unset !important;
}

#signersContainer .config-container #configuracion-avanzada:not(:disabled):hover {
  border-color: var(--brand-cyan-400) !important;
  color: var(--brand-cyan-700) !important;
  background: var(--brand-cyan-100) !important;
  box-shadow: none !important;
}

#signersContainer .config-container #configuracion-avanzada:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

#signersContainer .config-container #configuracion-avanzada i {
  color: inherit !important;
  font-size: 12px;
}


/* ============================================================
   FOOTER "Atrás" / "Continuar" (reutiliza btnContainer-subirDocumentos
   del paso 14)
   ============================================================
   Sin cambios — el layout ya se rediseñó en upload_modern.css.
   Solo reforzamos para que quede visible con el mismo spacing. */


/* ============================================================
   DIALOG "Configuración avanzada"
   ============================================================ */

.config-container dialog[open] {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  background: var(--surface-raised);
  box-shadow: var(--elevation-4);
  max-width: 420px;
  width: 90vw;
  font-family: var(--font-family-base);
}

/* V8.7(b): blur a 8px para consistencia con .modal-pdf-firma
   (sign_position_modern.css:375). El 4px previo era más sutil de
   lo que el patrón del DS marca para modales del wizard. */
.config-container dialog::backdrop {
  background: rgba(14, 16, 36, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* V8.9 Hunk 1: header del modal con icon-squircle pale + h3.
   Patrón unificado con .modalOpcion h2.title .tooltip-icon
   (dashboard_modern.css). Todos los overrides con !important por
   el comportamiento top-layer del <dialog> abierto via
   showModal() (V8.7 follow-up²). */
.config-container dialog .choise-option {
  display: flex !important;
  align-items: flex-start;
  gap: var(--space-3);
  margin: 0 0 var(--space-5) !important;
  padding: 0 !important;
}

.config-container dialog .choise-option .choise-option__icon {
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--radius-md) !important;
  background: var(--brand-cyan-100) !important;
  color: var(--brand-cyan-700) !important;
  font-size: 15px;
  line-height: 1;
}

.config-container dialog .choise-option h3 {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--font-family-display) !important;
  font-size: var(--text-lg) !important;
  font-weight: var(--font-weight-bold) !important;
  color: var(--text-strong) !important;
  letter-spacing: var(--tracking-snug) !important;
  text-align: left !important;
}

/* V8.9 Hunk 1: close button moderno con icon fa-times (en lugar
   del <span>x</span> legacy inline-styled). */
.config-container dialog #configuracion-avanzada[type="button"] {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 32px;
  height: 32px;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  color: var(--text-muted) !important;
  cursor: pointer;
  border-radius: var(--radius-round) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.config-container dialog #configuracion-avanzada[type="button"]:hover {
  background: var(--neutral-100) !important;
  color: var(--text-strong) !important;
}

.config-container dialog #configuracion-avanzada[type="button"] i {
  font-size: 14px;
  line-height: 1;
}


/* V8.7 follow-up² (fix definitivo): override del btn "Guardar"
   del modal con background + color !important además de width +
   align-self.

   Iteración 1 del follow-up (commit 413608f) eliminó el bloque
   legacy completo y dejó solo width/align acá, asumiendo que el
   .btn--primary base (components/buttons.css) aplicaría navy
   naturalmente por cascade. QA visual REAL reveló que el botón
   seguía invisible: bg rgba(0,0,0,0) transparente.

   Diagnóstico: cuando el <dialog> se abre via showModal() (Stimulus
   @stimulus-components/dialog) entra al top-layer del browser y la
   cascada de CSS se comporta diferente — alguna regla externa al
   stylesheet de la app (probable user-agent dialog{}, o una hoja
   inyectada por extensión/harness bloqueada por CORS) pisa el
   background-color del .btn--primary base. Specificity normal
   (0,3,0) sin !important no basta para vencerla.

   Solución: agregar background-color y color al override con
   !important. Es el mismo pattern del modal .modal-pdf-firma
   (sign_position_modern.css:454-477) que también necesita
   !important por el mismo motivo (showModal top-layer).

   Lección actualizada: cuando el dialog usa showModal() y entra
   al top-layer, los CSS overrides scopeados al modal necesitan
   !important para vencer la cascada del browser. */
/* V8.9 Hunk 3: footer del dialog con CTAs Cancelar + Guardar.
   Layout flex row centrado, gap-3 margin-top space-5. Centrado
   matchea el patrón de .modal-pdf-firma .container-btnConfirmar
   (sign_position_modern.css:424) — patrón mayoritario del
   producto. V8.9 inicial usó flex-end (estándar web genérico)
   pero el DS del producto centra los CTAs en modales. */
.config-container dialog .dialog-footer {
  display: flex !important;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5) !important;
  padding: 0 !important;
}

/* V8.7 follow-up² + V8.9 Hunk 3: btn primario navy con !important
   por el comportamiento top-layer del <dialog>.showModal(). */
.config-container dialog .dialog-footer .btn--primary {
  background-color: var(--brand-navy-800) !important;
  color: #fff !important;
}

.config-container dialog .dialog-footer .btn--primary:hover {
  background-color: var(--brand-navy-500) !important;
}

/* V8.9 Hunk 3: btn outline cancelar — top-layer pattern. */
.config-container dialog .dialog-footer .btn--outline {
  background-color: var(--surface-raised) !important;
  color: var(--text-strong) !important;
  border: 1px solid var(--border-default) !important;
}

.config-container dialog .dialog-footer .btn--outline:hover {
  border-color: var(--brand-cyan-400) !important;
  color: var(--text-strong) !important;
}


/* V8.7(b): <select> de "Tipo de autenticación" modernizado con
   tokens DS. Pisa las reglas legacy de signers.css:312-336 (border
   #E0E0EC + radius pill 16px) sin tocar el legacy — override por
   especificidad. */
.config-container dialog .select-option {
  width: 100% !important;
  margin-bottom: var(--space-4);
  padding: 0 var(--space-3);
}

.config-container dialog .select-option label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-strong);
  font-family: var(--font-family-base);
}

.config-container dialog .select-option .container-selector,
.config-container dialog .select-option .container-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  padding: var(--space-1) var(--space-3);
  padding-right: 0;
  transition: border-color var(--transition-fast);
}

.config-container dialog .select-option .container-selector:focus-within,
.config-container dialog .select-option .container-select:focus-within {
  border-color: var(--brand-cyan-500);
  box-shadow: 0 0 0 3px rgba(0, 186, 212, 0.18);
}

.config-container dialog .select-option .container-selector select,
.config-container dialog .select-option .container-select select {
  flex: 1;
  border: none;
  background: transparent;
  padding: var(--space-1);
  font-family: var(--font-family-base);
  font-size: var(--text-sm);
  color: var(--text-strong);
  appearance: none;
  cursor: pointer;
  outline: none;
}

.config-container dialog .select-option .container-selector select:focus-visible,
.config-container dialog .select-option .container-select select:focus-visible {
  box-shadow: none;
}

.config-container dialog .select-option .container-selector i.fa-chevron-down,
.config-container dialog .select-option .container-select i.fa-chevron-down {
  padding-right: var(--space-2);
  color: var(--text-muted);
  font-size: 11px;
  pointer-events: none;
}


/* V8.9 Hunk 4: el wrapper .container-selector y .container-select
   con data-controller="select-picker" reciben cursor: pointer para
   indicar que toda el área del wrapper es clickeable (no solo el
   <select> nativo). */
.config-container dialog .container-selector[data-controller~="select-picker"],
.config-container dialog .container-select[data-controller~="select-picker"] {
  cursor: pointer;
}


/* V8.9 Hunk 2: .checkbox-configuracion con styling moderno. La
   .label-checkbox legacy en signers.css le da display flex sin
   tokens DS. Override scope con !important por top-layer. */
.config-container dialog .checkbox-configuracion {
  width: 100%;
  margin: var(--space-3) 0 0 !important;
  padding: 0 !important;
}

.config-container dialog .checkbox-configuracion .label-checkbox {
  display: flex !important;
  align-items: center;
  gap: var(--space-2);
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer;
  font-family: var(--font-family-base);
  font-size: var(--text-sm) !important;
  font-weight: var(--font-weight-medium) !important;
  color: var(--text-default) !important;
  line-height: var(--leading-normal);
}

/* Checkbox styled (squircle pale 18×18) — usa accent-color del
   browser para el check mark sin reinventar la UI nativa. */
.config-container dialog .checkbox-configuracion input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--surface-raised) !important;
  cursor: pointer;
  position: relative;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast);
}

.config-container dialog .checkbox-configuracion input[type="checkbox"]:hover {
  border-color: var(--brand-cyan-400) !important;
}

.config-container dialog .checkbox-configuracion input[type="checkbox"]:checked {
  background: var(--brand-cyan-500) !important;
  border-color: var(--brand-cyan-500) !important;
}

/* Check mark via pseudo-elemento (no requiere fuente icon). */
.config-container dialog .checkbox-configuracion input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -60%) rotate(45deg);
}

.config-container dialog .checkbox-configuracion input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 186, 212, 0.25) !important;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
  #signersContainer {
    margin: var(--space-5) var(--space-4) !important;
    padding: var(--space-5) var(--space-4) !important;
  }

  #signersContainer .email-list #email_list .email-item {
    padding: var(--space-3) !important;
    gap: var(--space-2) !important;
  }

  .signer-avatar {
    width: 36px;
    height: 36px;
    font-size: 13px;
  }

  #signersContainer .btns-addSigner {
    flex-direction: column;
    align-items: stretch;
  }

  #signersContainer .btns-addSigner .btn.btn--outline-primary {
    justify-content: center;
  }

  /* V8.2.3: en mobile los botones del wizard paso 2 son full-width
     (gracias al flex-direction:column + align-items:stretch arriba).
     El info-box legacy con `position: absolute; left: 100%; top: 50%`
     queda lateral y sale del viewport por la derecha. Solución:
     reposicionar ABAJO del botón en mobile, con flecha apuntando
     arriba al botón. */
  #signersContainer .btns-addSigner .info-box {
    top: 100% !important;
    left: 0 !important;
    margin-top: var(--space-2) !important;
    margin-left: 0 !important;
    transform: none !important;
    max-width: 100%;
  }

  #signersContainer .btns-addSigner .info-box .arrow-icon {
    clip-path: polygon(50% 0, 0 100%, 100% 100%) !important;  /* ▲ apunta arriba */
    top: -8px !important;
    left: var(--space-4) !important;
    width: 12px !important;
    height: 8px !important;
    margin: 0 !important;
    transform: none !important;
  }
}

@media (max-width: 480px) {
  #signersContainer {
    padding: var(--space-4) var(--space-3) !important;
  }

  #signer_adder .email-input-wrapper .email-input {
    height: 42px;
    font-size: var(--text-sm);
  }

  .signers-empty {
    padding: var(--space-6) var(--space-3);
  }

  .signers-empty__icon {
    width: 48px;
    height: 48px;
    font-size: 18px;
  }
}


/* ============================================================
   ENTRADA ANIMADA
   ============================================================ */

@keyframes signer-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

#signersContainer .email-list #email_list .email-item {
  animation: signer-in var(--transition-base) var(--ease-out) both;
}

.signers-empty {
  animation: signer-in var(--transition-base) var(--ease-out) both;
}

@media (prefers-reduced-motion: reduce) {
  #signersContainer .email-list #email_list .email-item,
  .signers-empty { animation: none; }
}
/*
 * sign.css — Flujo de firma
 * FirmaYa / zappb
 *
 * Cubre: #signature-container (todos los estados),
 *        #signature-canvas, #signature-controls, .choise-firma,
 *        .firmaBasica-step, .btn-registrar/.btn-iniciar en contexto de firma
 *
 * NOTA: Este módulo tiene estado complejo manejado con combinaciones de
 * clases CSS. Candidato a migración a Stimulus en fase posterior.
 *
 * V8.7(a): .signature-history movido a sign_position_modern.css
 * con tokens DS. JS toggle (collapsible-list) sin cambios.
 *
 * EXTRAÍDO DESDE application.css
 */


/*--------------------------------------Boton Posiciona tu Firma--------------------------------------*/
#continueButton:hover,
#sendDocument:hover,
#btnDescargar:hover,
#btnConfirmar:hover,
.btn-continuarRegistro:hover,
.btn-continuarDatos:hover,
.btn-crearCuenta:hover ,
.btn-validarCVE:hover,
.btn-validarPDF:hover,
.btn-confirmar.btn-omitir-registrarse:hover{
    background: var(--brand-navy-500);
}
.container-btnFinales {
    display: none;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
    align-content: center;
}
/*--------------------------------------FIN Boton Posiciona tu Firma--------------------------------------*/


#signature-container {
    display: none;
    position:inherit;
    /* V8.5: width fluido para heredar del wrapper
       .container-signatures (clamp(380px, 28%, 480px) en
       sign_position_modern.css:50). Antes: 380px fijo, lo que
       creaba un hijo más ancho que el padre cuando el wrapper
       moderno estaba forzado a 320px. Los hijos anidados con
       id="signature-container" dentro de .container-tipodeFirma
       siguen sobrescritos a width:auto en application.css:589. */
    width: 100%;
    box-sizing: border-box;
    transition: 0.5s;
    height: auto;
    background: none;
    border: 1px solid #edeaea8a;
    border-top: none;
    margin-top: 0px !important;
    border-radius: 0 0 8px 0;
    flex-direction: column;
    align-items: baseline;
    text-align: left;
    .check-circle {
        position: relative;
        left: 0px;
        bottom: 2px;
        width: 10px;
        height: 10px;
        
        border-radius: 50%;
        display: inline-block;
        margin-right: 20px;
        vertical-align: middle;
    }
      
    /* Estilo cuando está seleccionado */
    .selected .check-circle {
        background-color: #222D8B;
    }
      
    a{
    /* padding: 12px; */
    margin-left: -13px;
    text-decoration: none;
    /*color: #8A8AB1;*/
    color:#222D8B;
    }
    .selected a{
        i{
            transform: rotate(-90deg);
            transition: 0.3s;
        }
    }
    .titulo{
        color: #222D8B;
        /* background: linear-gradient(90deg, #025679 0%, #004663 100%); */
        margin-bottom: 4px;
        height: 6vh;
        font-weight: 600;
        padding: 11px 18px;
        font-size: 18px;
        font-family: 'Open Sans', sans-serif;
    }
    p{
        font-size: 12px;
        color: #222D8B;
        margin-bottom: 22px;
        padding-left: 18px;
    }
    p.alertFirmaMasiva{
        font-size: 14px;
    }
    .data-section{
        display: block;
        .user-content{
            display: flex;
            gap: 8px;
            align-items: center;
            height: 30px;
            .container-icon{
                display: flex;
                gap: 5px;
                cursor: pointer;
                p{
                    margin: 0;
                }
            }
            img.icon{
                height: 18px;
                margin-left: 7px;
            }
            p{
                margin-bottom: 0px;
                padding: 0;
            }
            .fa-trash-can{
                cursor: pointer;
                margin-left: 7px;
                color: #00BAD4;
                display: none;
            }
            .fa-check{
                display: none;
                color: #00BAD4;
            }
        }
        .user-content:nth-child(1){
            border-left: 4px solid #ffa500;
        }
         .user-content:nth-child(2){
            border-left: 4px solid #ff1493;
        }
         .user-content:nth-child(3){
            border-left: 4px solid #1f40b2;
        }
    }
    .menu-firma{
        .tittle-add-signature, .tittle-download{
            color: #222D8B;
            display: flex;
            width: 100%;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            h4{
                margin: 0;
            }
            i{
                cursor: pointer
            };
            #signaturePlusIcon{
                display: none;
            }
        }
        .tittle-download{
            display: none;
            .fa-share-alt{
                margin-right: 5px;
            }
        }
    }
}
.document-list:has(.folder.active) ~ .content-section{
    #signature-container{
        .data-section{
            .user-content{
                .container-icon{
                    cursor: not-allowed;
                }
            }
        }
    }
}
#signature-container:has(.signature-hidden){
    .tittle-add-signature{
        #signatureCollapseIcon{
            display: none;
        }
        #signaturePlusIcon{
            display: block !important;
        }
    }
    #signature-container.folder-step{
        display: none !important;
    }
}
.add-sign-text.signature-hidden{
    display: none;
}
.content-section {
    .bodyFirma {
        .pdf-container.firmado{
            #signature-container.firmaBasica-step.detail-hidden{
                .menu-firma{
                    #detailsCollapseIcon{
                        display: none;
                    }
                    #signaturePlusIcon{
                        display: block !important;
                    }
                }
                .descripcionFirmado, 
                #signature-controls.containerBtns-firmaBasica.toggle-close-open{
                    display: none !important;
                }
            }
            .add-sign-text,
            .container-tipodeFirma.container-firmaPersonalizada,
            .container-tipodeFirma.container-firmaRapida{
                display: none !important;
            }
            .menu-firma:has(.download-hidden){
                .tittle-download{
                    #downloadCollapseIcon{
                        display: none;
                    }
                    #signaturePlusIcon{
                        display: block !important;
                    }
                }
            }
        }
    }
}
#signature-container:has(.detail-hidden){
    #detailsCollapseIcon, 
    .fas.fa-info-circle{
        display: none !important;
    }
    #signaturePlusIcon{
        display: block !important;
    }
}
#signature-container.detail-hidden{
    #signature-container.second-step,
    #detailsCollapseIcon{
        display: none;
    }
    #signaturePlusIcon{
        display: block !important;
    }
}
#signature-container.second-step {
    display: none;
    padding-left: 0;
    margin-bottom: 25px;
    padding-right: 0;
    video{
        width: 350px;
    }
    .titulo{
        padding: 11px 7px;
    }
    .descripcionDetalle{
        padding-left: 31px;
        margin-top: 16px;
    }
    p{
        padding-left: 17px;
        margin-top: 0;
        width: 100%;
    }
    .modal-mensaje.confirmar-firma, .modal-mensaje.mensaje-firmado{
        display: block;
    }
    .modal-mensaje.mensaje-firmado.visible{
        left: 0;
    }
}
#signature-container.active {
    left: 0%;
}
#signature-container.expanded-active {
    display: flex !important;
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    align-items: center;
    background-color: rgb(14 12 12 / 80%);
    .descripcionDetalle{
        display: none;
    }
    .choise-firma {
        background: #F8F8FC;
        width: 40vw;
        height: 41vh;
        margin-top: 10%;
        border-radius: 5px 5px 0 0;
        li::marker{
           color:transparent;
        }
        .check-circle {
            display: none;
        }
        a{
            display: none;
        }
        a.active{
            display: flex;
            justify-content: center;
            margin-top: -35px;
            font-weight: 600;
            i{
                display: none;
            }
        }
        canvas{
            height: 180px;
            width: 385px;
            margin-top: 15px;
            background: #ffff;
            box-shadow: 0px 6px 6px 3px rgba(0, 0, 0, 0.14);
        }
        i.fas.fa-compress {
            position: absolute;
            right: 30%;
            margin: 8px 5px;
            top: 23%;
            font-size: 20px;
        }
    }
    div#signature-controls {
        flex-direction: row !important;
        background: #F8F8FC;
        height: 13vh !important;
        margin-top: 0;
        width: 40vw;
        border-radius: 0 0 5px 5px;
    }
}
#signature-container.folder-step{
    .titulo {
        margin: auto;
    }
    p.descriptionSignature{
        width: 16vw;
        text-align: center;
        color: #222D8B;
    }
    .btn-descargar{
        display: none;
    }
    #signature-controls.vistaFirmado{
        flex-direction: column;
        height: auto;
        gap: 12px;
        /*.btn-firmar{
            box-shadow: none;
            background: #d9d9d9;
        }*/
        .btn-descargar{
            display: block !important;
        }
    }
    .vistaFirmado ~ .alertFirmaMasiva{
        display: none;
    }
    p {
        font-size: 12px;
        color: #66d9f5;
        font-weight: 600;
        margin: auto;
        margin-top: 6px;
        i{
            font-size: 14px;
            margin-right: 5px;
        }
    }
    .content-mensaje{
        p {
            font-size: 18px;
            color: #182e8a;
            font-weight: 600;
            padding: 0;
            margin: 40px 22px;
            margin-top: 0;
        }
    }
    .mensaje-firmado.visible{
        left: 0;
        display: block;
    }
}
#signature-canvas, div#upload-image {
    background: #fff;
    border: 1px solid #edeaeaf0;
    border-radius: 5px;
    min-height: 114px;
    height: auto;
    width: 300px;
    /* width: -webkit-fill-available; */
    margin-left: 17px;
    margin-top: 7px;
    box-shadow: none;
}
#write-link, #draw-link, #upload-link{
    font-size: 14px;
    font-weight: 600;
}
textarea#signature {
    text-align: center;
    align-content: center;
    /* margin: auto; */
    /* padding-left: 9px; */
    margin-bottom: 10px;
    margin-top: 7px;
    height: 50px;
    background: #fff;
    width: 300px;
    margin-left: 20px;
    border-radius: 5px;
    border: 1px solid #edeaeaf0;
}
div#upload-image{
    text-align: center;
    min-height: 27vh;
    height: auto;
    border-radius: 8px;
    padding-bottom: 20px;
    input{
        display: none;
    }
    .upload-text{
        font-size: 14px;
        padding: 35px 30px;
        margin-bottom: 0;
    }
    div#image-preview {
        height: 6vh;
        display: none;
        margin-top: 20px;
        img#preview-image {
            height: -webkit-fill-available;
        }
    }
}
#signature-controls {
    display: flex;
    margin: auto;
    height: 7vh;
    margin-top: 16px;
    justify-content: center;
    gap: 34px;
    max-width: 70%;
    align-items: center;
    flex-direction: row-reverse;
    /*#clear-button, #btn-editar{
        border: 2px solid #00bad4;
        color: #00bad4;
        background: none;
        box-shadow: none;
    }
    #clear-button:hover, #btn-editar:hover{
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    }*/
    button#btnConfirmar {
        padding: 0px 17px;
        display: none;
    }
    button#btnDescargar {
        width: 124px;
        justify-content: space-evenly;
        display: none;
    }
    #btn-editar{
        display: none;
    }
}
/*#signature-controls button, .btnContinuar, .btn-registrar, .btn-iniciar {
    border-radius: 24px;
    margin-right: 0px;
    font-size: 14px;
    padding: 8px 30px;
    cursor: pointer;
    text-transform: capitalize;
    text-decoration: none;
    display: flex;
    gap: 5px;
    align-items: center;
    min-width: 100px !important;
    justify-content: center;
    border: none;
    background: #49B7D2;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}*/
.btn-iniciar{
    .fas.fa-user{
        font-size: 14px;
    }
}

.name-section, .lastName-section {
    width: 213px;
}

.data-section {
    display: none;
    justify-content: space-evenly;
    padding-bottom: 15px;
    margin-bottom: 10px;
    margin-top: 0px;
  label{
    text-align: left !important;
    padding-left: 5px;
  }
  input{
    border: 1px solid #E0E0EC !important;
    border-radius: 10px !important;
    height: 30px;
    margin-top: 5px;
    padding-left: 12px;
    width: -webkit-fill-available;
  }
}
.choise-firma {
    border-bottom: 2px solid #dbd8d3;
    padding-bottom: 12px;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 20px;
    li::marker {
        font-size: 22px;
        color: transparent;
    }
    .draw-box{
        display: flex;
        i{
            display: none;
            position: absolute;
            margin-top: 11px;
            right: 26px;
            color: #222D8B;
            /* bottom: 1px; */
        }
    }
    .elementFirma{
        display: none;
    }
    .show{
        display: block !important;
    }
    .show ~ i{
        display: block !important;
        cursor: pointer;
    }
    div#upload-animation {
        position: absolute;
        left: 5%;
        top: 25%;
        display: none;
        z-index: 5;
        .close-video {
            position: absolute;
            z-index: 1;
            top: 4px;
            right: 4px;
            font-size: 14px;
            color: rgba(255, 255, 255, 0.8);
            background-color: rgba(0, 0, 0, 0.4);
            border-radius: 50%;
            padding: 4px 6px;
            cursor: pointer;
            transition: background-color 0.3s, color 0.3s;
        }
          
        .close-video:hover {
            background-color: rgba(0, 0, 0, 0.6);  /* Fondo más oscuro al pasar el cursor */
            color: #fff;  /* Cambiar el color a blanco cuando está en hover */
        }

        video {
            width: 360px;
            border-radius: 10px;
            border: 1px solid #00dcf7;
            box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.2), 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
        }
    }
}
.firmaBasica-step{
    #upload-animation{
        display: none;
    }
}
.choise-firma.unableFirma{
    a{
        color: #e3e3e9 !important;
        i{
            transform: none !important;
        }
    }  
    li::marker {
        color: #e3e3e9;
    }
    .check-circle{
        display:none !important;
    }
}

/*------------------------------------------FIB Modal Firma------------------------------------------*/


/* ------------------------------------------ Firma Robusta — redirect QR ------------------------------------------ */

.container-robustSign {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-4);
    text-align: center;
}

.robustSign-title {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin: 0;
    padding-left: 0 !important;
}

.robustSign-description {
    font-size: var(--text-base);
    color: var(--color-text-mid);
    line-height: var(--leading-relaxed);
    margin: 0;
    padding-left: 0 !important;
    max-width: 280px;
}

.robustSign-qr {
    width: 160px;
    height: 160px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    margin-top: var(--space-2);
    padding: var(--space-2);
    background: var(--neutral-0);
    svg {
        width: 100%;
        height: 100%;
        display: block;
    }
}

@keyframes robustQrShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
/*
 * views/sign_position_modern.css — Wizard de firma, paso 3 "Posicionar firma" (paso 18)
 * FirmaYa / zappb
 *
 * Aditivo sobre sign.css legacy (696 líneas) que cubre el tipo de firma,
 * canvas, choise-firma, etc. NO reemplaza — refina selectivamente lo que
 * quedó pendiente: panel lateral, controles de paginación del PDF,
 * canvas viewer, modales de confirmación y botones de acción.
 *
 * CRÍTICO: no tocar el canvas #pdfViewer ni #signature-canvas (la lógica
 * de drag & drop de firmas y rendering de pdf vive en pdf_controller.js,
 * pdf_reader_controller.js, signature_boxes_controller.js). Solo envolver
 * visualmente.
 *
 * Preserva: data-controller="pdf pdf-reader classes tooltip layout
 * signature-boxes", todos los data-*-target, IDs #pdfViewer, #signature-canvas,
 * #signature-container, #signature-controls, #firstPage, #prevPage, #nextPage,
 * #lastPage, #pageNum, #pageCount, etc.
 */


/* ============================================================
   CONTENEDOR GENERAL — fondo app
   ============================================================ */

.pdf-container {
  background: var(--surface-app);
}

/* document-list (pestaña "Carpeta" arriba del PDF) */
.pdf-container .document-list {
  display: flex;
  position: relative;
  background: var(--neutral-200);
  border: none;
  border-radius: 0;
  font-family: var(--font-family-base);
  padding: var(--space-1) var(--space-2) 0;
  gap: var(--space-2);
}
.pdf-container .document-list::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  /* V11.8c: navy-700 (#222D8B, 11.56:1 vs surface) → navy-500
     (#4752C4, 6.42:1) — suaviza visualmente sin sacrificar
     accesibilidad. WCAG AA non-text 1.4.11 holgado en ambos
     casos. Override dark `cyan-300` en línea 1724 intacto. */
  background: var(--brand-navy-500);
  z-index: 1;
}

/* V10.3 H6 + V10.3-bis R1: tabs estilizadas con el patrón DS
   (underline cyan en activo, no background gris). Specificity bump
   con prefix `body` porque las reglas legacy nested en application.css
   cargan después vía require_self (línea 70 del manifest) y empatan
   en specificity sin él. Gotcha 8.4 sub-patrón B (V9.6): subir
   specificity con ancestor moderno, no agregar !important nuevo.
   El cyan en el underline activo es excepción cyan documentada del
   DS (3.1.5).

   V10.3-bis R1: inactivos en text-default + weight-medium para
   diferenciarse del activo (text-strong + weight-semibold). Hover
   con bg neutral-50 sutil + color text-strong como affordance
   explícito de "esto es clickeable". El activo también borra el
   bg gris #ededf1 del legacy (.active en application.css:201). */
/* V10.3-bis-2 Punto 1: bump de specificity con `.first` —
   QA visual confirmó que (0,3,1) con prefix `body` no estaba
   ganando al legacy en application.css:178 (0,3,0). Agregando
   `.first` al selector llega a (0,4,1). Todos los tabs reales
   tienen `.first` por convención: #folder-entry estático
   (server-rendered) y los dinámicos creados por
   pdf_reader_controller.js:243 (`tab.className = "document first documentoN"`). */
body .pdf-container .document-list .document.first {           
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-left-radius: var( --space-4);
  border-top-right-radius: var( --space-4);
  width: auto;
  max-width: 280px;
  padding: var(--space-3) var(--space-5);
  border-right: 0;
  color: var(--text-muted);
  font-size: var(--text-base);
  font-weight: var(--font-weight-regular);
  background: var( --neutral-75);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--transition-fast),
              background var(--transition-fast);
  i.fas.fa-circle {
    visibility: hidden;
  }
}

body .pdf-container .document-list .document.first:hover {
  color: var(--text-strong);
  background: var(--neutral-50);
}

body .pdf-container .document-list .document.first.active,
body .pdf-container .document-list .document.first.folder.active {
  background: var(--neutral-50);
  color: var(--text-strong);
  /* V11.8c: navy-700 → navy-500 (ver comentario en ::after L48).
     Contraste vs neutral-50 bg interno = 6.06:1 AAA. Border-bottom
     decorativo `cyan-500 !important` en L1255-1257 intacto. */
  border: 1px solid var(--brand-navy-500);
  border-bottom: none;
  font-weight: var(--font-weight-semibold);
  z-index: 2;
  top: 0;
  i.fas.fa-circle {
    visibility: visible;
    font-size: 8px;
  }
}

body .pdf-container .document-list .document.first.signature-placed{
  .fa-solid.fa-check {
    display: flex;
  }
}

body .pdf-container .document-list .document.first i.fa-folder,
body .pdf-container .document-list .document.first i.fa-file {
  color: var(--text-muted);
  margin: 0px 5px;
}

body .pdf-container .document-list .document.first.active i.fa-folder,
body .pdf-container .document-list .document.first.active i.fa-file,
body .pdf-container .document-list .document.first.active i.fas.fa-circle {
  color: var(--text-strong);
  margin: 0px 5px;
}


/* ============================================================
   PANEL LATERAL (.container-signatures) — card moderna
   ============================================================ */

/* V8.7(a): wrapper realmente responsive via flex-basis. V8.5 usó
   width: clamp() pero `.content-section` es flex container — el
   clamp se interpretaba como flex-basis y colapsaba al min-width
   por el shrink default. Con `flex: 0 0 clamp(...)` el 25% se
   evalúa contra el flex container y el panel escala. El responsive
   < 960px sigue forzando width:100% más abajo. */
.pdf-container .content-section .container-signatures {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-xl);
  box-shadow: var(--elevation-1);
  margin: var(--space-4);
  flex: 0 0 clamp(380px, 25%, 480px);
  overflow: hidden;
  font-family: var(--font-family-base);
}

/* Header del panel (.menu-firma) */
.pdf-container .container-signatures .menu-firma {
  padding: var(--space-4) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  background: var(--surface-app);
}

.pdf-container .container-signatures .menu-firma h4 {
  font-family: var(--font-family-display) !important;
  font-size: var(--text-md) !important;
  font-weight: var(--font-weight-bold) !important;
  color: var(--text-strong) !important;
  letter-spacing: var(--tracking-snug);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.pdf-container .container-signatures .menu-firma h4 i.fas {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
  background: var(--brand-cyan-100);
  color: var(--brand-navy-700) !important;
  font-size: var(--text-md);
  margin-right: 0 !important;
}

.pdf-container .container-signatures .add-sign-text {
  padding: var(--space-3) var(--space-5) 0 !important;
  color: var(--text-muted) !important;
  font-size: var(--text-sm) !important;
  line-height: var(--leading-normal);
  font-family: var(--font-family-base);
}


/* ============================================================
   ACCORDIONS DE TIPO DE FIRMA (.container-tipodeFirma)
   ============================================================ */

.pdf-container .container-tipodeFirma {
  margin: var(--space-3) var(--space-4) var(--space-2) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.pdf-container .container-tipodeFirma:hover {
  border-color: var(--brand-cyan-400) !important;
}

.pdf-container .container-tipodeFirma .nombreTipoFirma {
  padding: var(--space-3) var(--space-4) !important;
  background: var(--surface-raised);
  cursor: pointer;
}

.pdf-container .container-tipodeFirma .nombreTipoFirma i:first-child {
  color: var(--brand-navy-700) !important;
  font-size: 14px !important;
}

.pdf-container .container-tipodeFirma .nombreTipoFirma p {
  font-family: var(--font-family-display) !important;
  font-weight: var(--font-weight-semibold) !important;
  color: var(--text-strong) !important;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-snug);
  margin: 0 !important;
}

/* Estado activo del accordion */
.pdf-container .container-tipodeFirma.active {
  border-color: var(--brand-cyan-500) !important;
  box-shadow: 0 0 0 3px rgba(0, 186, 212, 0.1);
}

.pdf-container .container-tipodeFirma.active .nombreTipoFirma {
  background: var(--brand-cyan-100) !important;
}

.pdf-container .container-tipodeFirma.active .nombreTipoFirma p {
  color: var(--brand-cyan-700) !important;
}


/* ============================================================
   BOTONES DE FIRMA (#save-button, #confirmar-firma, etc.)
   ============================================================ */

/* V8.1: CTAs del signature-controls (wizard de firma) a navy unificado
   V5.2. Mismo motivo que el modal-pdf-firma (Fix 1): el cleanup V5.2
   saltó este archivo. Los 7 botones están sobre el panel del wizard
   (fondo claro var(--surface-raised)), no hay justificación visual
   para cyan. Mantiene !important por la cascada legacy del archivo. */
.pdf-container #signature-controls button.btn-firmar,
.pdf-container #signature-controls #save-button,
.pdf-container #signature-controls #save-buttonMasiva,
.pdf-container #signature-controls #continue-button.activo,
.pdf-container #signature-controls #continue-buttonMasiva.activo,
.pdf-container #signature-controls #confirmar-firma,
.pdf-container #signature-controls #confirmar-firmaBasica,
.pdf-container #signature-controls #iniciar-buttonMasiva {
  background: var(--brand-navy-800) !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
  height: auto;
  padding: var(--space-2) 30px !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-family-base) !important;
  font-size: var(--text-md) !important;
  font-weight: var(--font-weight-semibold) !important;
  letter-spacing: var(--tracking-snug);
  cursor: pointer !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  box-shadow:
    0 1px 2px rgba(22, 47, 133, 0.18),
    0 10px 20px -12px rgba(22, 47, 133, 0.35) !important;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.pdf-container #signature-controls button.btn-firmar:hover,
.pdf-container #signature-controls #save-button:hover,
.pdf-container #signature-controls #continue-button.activo:hover,
.pdf-container #signature-controls #continue-buttonMasiva.activo:hover,
.pdf-container #signature-controls #confirmar-firma:hover,
.pdf-container #signature-controls #iniciar-buttonMasiva:hover {
  background: var(--brand-navy-500) !important;
  box-shadow:
    0 2px 4px rgba(22, 47, 133, 0.24),
    0 14px 24px -10px rgba(22, 47, 133, 0.50) !important;
}

/* V10.7.3: unificar geometría del botón Continuar en los 3 estados
   (disabled, habilitado sin .activo, .activo post-drag). El selector
   .activo de L230 forzaba height:42 / padding:0 var(--space-5) /
   font-size:var(--text-sm) (=12px), produciendo un estado C
   visualmente distinto a los demás (100×42, padding asimétrico).
   .btn-pdf en components/buttons.css L489 también bajaba el font-size
   a 14px. Este override scoped normaliza los 3 estados a la geometría
   canónica de .btn (padding 8 30, font-size --text-md=16, height auto).
   Bg + cursor siguen gobernados por .activo / :not(.activo).
   Specificity (2,2,0) — empata con el .activo y gana por orden en
   cascade. Sólo aplica a #continue-button y #continue-buttonMasiva
   (no a los otros 5 botones del group de L230). */
.pdf-container #signature-controls #continue-button.btn-pdf,
.pdf-container #signature-controls #continue-buttonMasiva.btn-pdf {
  height: auto !important;
  padding: var(--space-2) 30px !important;
  font-size: var(--text-md) !important;
}

/* Botón "Limpiar" / "Clear" — variante outline */
.pdf-container #signature-controls #clear-button {
  background: var(--surface-raised) !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--border-default) !important;
  height: auto;
  padding: var(--space-2) 30px !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-family-base) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--font-weight-semibold) !important;
  cursor: pointer !important;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.pdf-container #signature-controls #clear-button:hover {
  border-color: var(--brand-cyan-400) !important;
  color: var(--text-strong) !important;
}


/* ============================================================
   CONTROLES PDF — paginación como pill group
   ============================================================ */

/* V10.4-bis: con el legacy del control bar eliminado, el moderno
   ahora gestiona el layout completo. .controls pasa a flex row
   centrado. Los hijos (.btn-section, .container-pagNum) también
   row — antes eran `column` para que tras el rotate(90deg) legacy
   quedaran horizontales. Sin rotate, el column ya no aplica. */
/* V10.4-bis-5: depurados los !important obsoletos. Originalmente
   protegían las propiedades del control bar cuando convivía con
   legacy nested. El refactor V10.4-bis eliminó el legacy y este
   bloque ya no compite — !important se vuelve fricción para los
   overrides desktop (sticky lateral) y mobile (horizontal). Solo
   `padding` mantiene !important defensivo por convivencia con la
   regla legacy padding del control bar. `border-top: none` se
   eliminó: era para layout banda inferior horizontal, ahora el
   control bar es columna sticky con border completo. */
.pdf-container .headerBody-pdf .controls {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  color: var(--text-strong);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) !important;
  font-weight: var(--font-weight-semibold);
}

.pdf-container .headerBody-pdf .controls .btn-section {
  padding: 0 !important;
  display: flex !important;
  flex-direction: row;
  gap: var(--space-1);
  margin: 0 !important;
}

.pdf-container .headerBody-pdf .controls .btn-section button {
  width: 36px !important;
  height: 36px !important;
  border-radius: var(--radius-md) !important;
  background: transparent !important;
  border: 1px solid var(--border-default) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer !important;
  color: var(--text-brand) !important;
  font-size: 13px !important;
  font-weight: var(--font-weight-semibold) !important;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}

.pdf-container .headerBody-pdf .controls .btn-section button:hover {
  background: var(--brand-cyan-100) !important;
  border-color: var(--brand-cyan-400) !important;
  color: var(--brand-cyan-700) !important;
}

.pdf-container .headerBody-pdf .controls .btn-section button:disabled,
.pdf-container .headerBody-pdf .controls.page-one #firstPage,
.pdf-container .headerBody-pdf .controls.page-one #prevPage,
.pdf-container .headerBody-pdf .controls.last-page #nextPage,
.pdf-container .headerBody-pdf .controls.last-page #lastPage {
  opacity: 0.4;
  cursor: not-allowed !important;
  color: var(--text-muted) !important;
}

/* Indicador de página actual
   V10.4-bis: pageNum / pageCount lado a lado (row), no apilados. */
.pdf-container .headerBody-pdf .controls .container-pagNum {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  gap: var(--space-1) !important;
  padding: var(--space-2) !important;
  background: var(--brand-cyan-100) !important;
  border-radius: var(--radius-md) !important;
  justify-content: center;
  margin: 0;
  min-width: 40px;
}

.pdf-container .headerBody-pdf .controls .container-pagNum span {
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  color: var(--brand-navy-700) !important;
  font-size: var(--text-sm);
  padding: 2px 6px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pdf-container .headerBody-pdf .controls .container-pagNum span#pageCount {
  color: var(--brand-cyan-700) !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--font-weight-semibold);
  position: relative;
}

.pdf-container .headerBody-pdf .controls .container-pagNum span#pageCount::before {
  content: "/";
  margin-right: 4px;
  color: var(--text-muted);
  font-weight: var(--font-weight-medium);
}


/* Zoom section
   V10.4 R1: eliminado `flex-direction: column`. La caja vertical
   no aportaba — los paginadores hermanos (.btn-section) son
   horizontales, dejando el zoom apilado verticalmente generaba
   inconsistencia visual en todos los breakpoints. Default flexbox
   (row) suficiente. El override mobile en @media (max-width:
   767px) más abajo también queda obsoleto y se elimina. */
.pdf-container .headerBody-pdf .controls .zoom-section {
  background: var(--surface-raised) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-1) !important;
  display: flex !important;
  gap: var(--space-2) !important;
  width: auto !important;
}

.pdf-container .headerBody-pdf .controls .zoom-section i {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer !important;
  font-size: 13px;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.pdf-container .headerBody-pdf .controls .zoom-section i:hover {
  background: var(--brand-cyan-100);
  color: var(--brand-cyan-700);
}


/* ============================================================
   PDF VIEWER — canvas envuelto con shadow
   ============================================================ */

.pdf-container .container-document {
  padding: var(--space-4) var(--space-4) var(--space-6) !important;
}

.pdf-container .container-document #pdfViewer {
  border-radius: var(--radius-lg) !important;
  box-shadow:
    0 4px 8px rgba(15, 18, 35, 0.08),
    0 12px 24px -6px rgba(15, 18, 35, 0.12),
    -4px 6px 12px rgba(15, 18, 35, 0.06) !important;
  border: 1px solid var(--border-subtle);
  /* V10.3-bis-5 + V10.4-bis-5: restringir el canvas al ancho del
     container con !important. pdf_reader_controller.js:351,455
     escribe inline `maxWidth = 'none'` cuando el zoom inicial > 1
     (feature de zoom: el canvas crecía y desbordaba). En desktop
     post-V10.4-bis-5 (control bar lateral compacto 140px), el
     .container-document toma el ancho del flex parent menos los
     140px de controls, y el canvas con zoom debe respetar ese
     ancho. En mobile (517px), el canvas a tamaño natural se sale
     del viewport. !important vence al inline JS sin !important
     y mantiene el canvas dentro del container en TODOS los casos.

     `width: auto !important`: el JS también setea `width: 906px`
     explícito. Con `width: auto`, el canvas respeta el container
     parent vía CSS. Si rompe zoom de pdf.js, fallback: dejar solo
     max-width + height sin width. */
  max-width: 100% !important;
  height: auto !important;
  width: auto !important;
}


/* ============================================================
   V10.4-bis-5: .headerBody-pdf flex row desktop con control bar
   sticky lateral compacto (decisión UX Diego post-V10.4-bis-4)
   ============================================================
   Historia:
   - Legacy application.css:230 → `.headerBody-pdf { display:flex;
     justify-content: space-between }` con CSS native nesting full
     ancestor chain (specificity expandida 0,4,0).
   - V10.4-bis-4 lo cambió a flex column para todos los breakpoints
     porque el space-between metía .controls al borde derecho
     estirado al alto del PDF. Solucionó el problema visual pero
     el control bar quedó como banda horizontal debajo del PDF
     (1028×95 a y=1275 desktop).
   - V10.4-bis-5 (este): vuelve a flex row en desktop pero ahora
     .controls será columna sticky compacta 140px a la derecha del
     PDF (decisión UX nueva). justify-content: flex-start anula el
     space-between legacy para que el PDF + controls se peguen con
     gap, sin espacio vacío en el medio.
   - Mobile (<767px): mantiene flex column desde la regla en el
     @media más abajo. */
body .content-section .bodyFirma .pdf-container .headerBody-pdf {
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space-4);
}

/* V10.4-bis-5: .container-document toma el ancho disponible del
   flex parent (full width minus 140px de controls sticky). gotcha
   8.6: min-width: 0 permite que el flex item se reduzca al ancho
   disponible cuando el contenido (canvas) es más ancho que el
   container — sin esto el flex item se mantiene en el ancho del
   contenido y el flex parent overflowea. */
body .pdf-container .headerBody-pdf .container-document {
  flex: 1 1 auto;
  min-width: 0;
}

/* V10.4-bis-5: control bar sticky lateral compacto desktop.
   140px de ancho, sticky al top + offset, alto compacto (auto),
   layout interno columna con clusters de botones apilados:
   back-section / container-pagNum / foward-section / zoom-section.
   El card visual (bg/border/padding) viene del bloque base
   .pdf-container .headerBody-pdf .controls de más arriba. Aquí
   solo redefinimos dimensiones y dirección. */
body .pdf-container .headerBody-pdf .controls {
  /* V10.4-bis-6: position fixed en vez de sticky.
     `html { overflow: hidden auto }` + `body { overflow: auto }`
     rompen el contexto sticky en descendientes profundos — el
     elemento se desplazaba con scroll como si fuera static. Test
     empírico confirmó que fixed sí se mantiene anclado al
     viewport. Nueva gotcha DS 7.4 documentada en V10.md.

     Al salir del flujo flex (.controls deja de ser hermano flex
     del .container-document), el container PDF toma ahora el
     ancho completo del flex parent. El control bar fixed flota
     encima a la derecha sin ocupar espacio en el layout. */
  flex: 0 0 140px;
  width: auto;
  height: auto;
  position: fixed;
  /* V10.4-bis-8: top: 130px para empezar debajo del bottom de la
     franja de tabs (.document-list bottom ~y=114). Buffer ~15px
     para evitar solapamiento con tabs en carpetas con muchos
     documentos. No hay token DS para header-height — valor
     literal con comentario justificativo. */
  top: 130px;
  right: var(--space-8);      /* 32px del borde derecho viewport */
  z-index: 10;
  align-self: flex-start;

  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;

  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-1);
}

body .pdf-container .headerBody-pdf .controls {
  position: fixed;
  top: 180px;
  right: 32px;
  z-index: 1000;
  .close-btn{
    position: absolute;
    right: 0;
    top: 4px;
    background: transparent;
    border: none;
    color: var(--neutral-500);
  }
  .close-btn:hover {
    color: var(--neutral-800);
  }
  .open-btn{
    background: transparent;
    font-size: 20px;
    border: none;
    color: var(--brand-navy-700);
  }
  .hidden{
    display: none;
  }
}
.controls:has(.panel.hidden){
  border-radius: var(--radius-full) !important;
  padding: var(--space-3) 10px !important;
}
.controls:has(.panel.hidden):hover{
  transform: scale(1.08);
  box-shadow:
    0 0 0 4px rgba(34, 45, 139, .08),
    var(--elevation-3);
}

.panel{
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 122px;
}

.drag-handle {
  cursor: grab;
  padding: var(--space-2);
  display: flex;
  justify-content: center;
  border-bottom: 1px solid #eee;
  .fas.fa-grip-vertical{
    color: var(--brand-navy-700);
    transform: rotate(90deg);
  }
}

.drag-handle:active {
  cursor: grabbing;
}

/* Cada cluster ocupa todo el ancho del control bar y se centra. */
body .pdf-container .headerBody-pdf .controls .btn-section,
body .pdf-container .headerBody-pdf .controls .container-pagNum,
body .pdf-container .headerBody-pdf .controls .zoom-section {
  width: 100%;
  justify-content: center;
}


/* ============================================================
   MODALES DE CONFIRMACIÓN (.modal-pdf-firma)
   ============================================================ */

.pdf-container .modal-pdf-firma {
  background: rgba(14, 16, 36, 0.55) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.pdf-container .modal-pdf-firma .container-mensaje {
  background: var(--surface-raised) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--elevation-4) !important;
  padding: var(--space-6) !important;
  max-width: 440px;
  font-family: var(--font-family-base);
  animation: confirm-modal-in var(--transition-base) var(--ease-out) both;
}

.pdf-container .modal-pdf-firma .content-mensaje h3 {
  font-family: var(--font-family-display) !important;
  font-size: var(--text-xl) !important;
  font-weight: var(--font-weight-bold) !important;
  color: var(--text-strong) !important;
  letter-spacing: var(--tracking-snug);
  margin: 0 0 var(--space-3) !important;
  text-align: center;
}

.pdf-container .modal-pdf-firma .content-mensaje .mensajeFinal {
  color: var(--text-default) !important;
  font-size: var(--text-sm) !important;
  line-height: var(--leading-normal);
  margin: 0 0 var(--space-4) !important;
  text-align: center;
}

.pdf-container .modal-pdf-firma .content-mensaje .mensajeFinalTerceros {
  color: var(--text-muted) !important;
  font-size: var(--text-xs) !important;
  line-height: var(--leading-normal);
  margin: var(--space-2) 0 0 !important;
  text-align: center;
  padding: var(--space-3);
  background: var(--brand-navy-100);
  border-radius: var(--radius-md);
}

.pdf-container .modal-pdf-firma .container-btnConfirmar {
  display: flex;
  justify-content: space-around;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.pdf-container .modal-pdf-firma .container-btnConfirmar .btn {
  min-width: 120px;
  height: 42px;
  padding: 0 var(--space-5) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-family-base) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--font-weight-semibold) !important;
  cursor: pointer !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pdf-container .modal-pdf-firma .container-btnConfirmar .btn--outline {
  background: var(--surface-raised) !important;
  color: var(--text-strong) !important;
  border: 1px solid var(--border-default) !important;
}

.pdf-container .modal-pdf-firma .container-btnConfirmar .btn--outline:hover {
  border-color: var(--brand-cyan-400) !important;
}

/* V8.1: btn primario del modal a navy unificado V5.2 (ce0e208).
   Diagnóstico V8.0: el cleanup V5.2 actualizó otros modales modernos
   (.modalOpcion en dashboard_modern.css L1622-1635) con el mismo
   override pattern pero saltó este archivo. El card interior del
   modal es blanco (var(--surface-raised)), no navy oscuro — un
   .btn--primary navy se ve perfectamente.

   Mantiene !important: es endémico del archivo para pisar el legacy
   components/modals.css:495 con CSS nesting. background-image:none
   neutraliza el gradient anterior. */
.pdf-container .modal-pdf-firma .container-btnConfirmar .btn--primary {
  background: var(--brand-navy-800) !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
  box-shadow:
    0 1px 2px rgba(22, 47, 133, 0.18),
    0 10px 20px -12px rgba(22, 47, 133, 0.35) !important;
}

.pdf-container .modal-pdf-firma .container-btnConfirmar .btn--primary:hover {
  background: var(--brand-navy-500) !important;
  box-shadow:
    0 2px 4px rgba(22, 47, 133, 0.24),
    0 14px 24px -10px rgba(22, 47, 133, 0.50) !important;
}

/* Modal de éxito firmado */
.pdf-container .modal-pdf-firma.mensaje-firmado .container-mensaje {
  text-align: center;
}

.pdf-container .modal-pdf-firma.mensaje-firmado video {
  max-width: 180px;
  margin: 0 auto var(--space-3);
  display: block;
  border-radius: var(--radius-md);
}

@keyframes confirm-modal-in {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}


/* ============================================================
   CAJA DE FIRMA (.contenedor-firmaPersonalizada) — mejora visual
   ============================================================
   La lógica de drag & drop vive en signature_boxes_controller.js.
   Solo aplicamos refinamientos visuales sin tocar nada interactivo.
   ============================================================ */

.pdf-container .contenedor-firmaPersonalizada {
  border-radius: var(--radius-md) !important;
  transition: box-shadow var(--transition-fast);
}

.pdf-container .contenedor-firmaPersonalizada:hover {
  box-shadow: 0 4px 12px rgba(15, 18, 35, 0.15);
}

.pdf-container .contenedor-firmaPersonalizada .box-firma {
  border-bottom-left-radius: var(--radius-md) !important;
  padding: 4px 10px !important;
  font-family: var(--font-family-base);
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
}


/* ============================================================
   CANVAS DE FIRMA PERSONALIZADA (signature-canvas) — refinamiento
   ============================================================ */

.pdf-container #signature-canvas,
#signature-canvas.elementFirma {
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  /* V12.1a: canvas debe ser SIEMPRE blanco. El strokeStyle del controller
     pdf (pdf_controller.js, intocable por doctrina) está hardcoded #000.
     `var(--surface-raised)` en dark = #1A1D3A → 1.28:1 vs #000 = FAIL
     WCAG (trazo invisible). Patrón consistente con
     #signature-container.expanded-active canvas (hardcoded #FFFFFF en
     ambos themes desde el rediseño). Propuesta de doctrina §3.x:
     "anti-pattern bg con token semántico en elemento con ink JS-hardcoded". */
  background: #FFFFFF;
}

.pdf-container .draw-box {
  position: relative;
  margin: var(--space-2) 0;
}

/* V12.1b: botón fullscreen del canvas firma con identificación clara.
   Antes: color text-muted sobre surface-raised — en dark contraste 1.46:1
   (FAIL), sin label de texto, sin a11y. Fix CSS con doctrina alpha-por-rol
   cyan-translúcido (§11.3 niveles 10% reposo / 22% hover / 32% border).
   Light usa cyan-700 (#0891A8) — contraste suficiente sobre cyan@10%
   sobre canvas blanco post-V12.1a. Dark usa cyan-300 (#66D9F5) más claro.
   Fix a11y (ERB): role/tabindex/aria-label agregados en
   add_details.html.erb:123 y pdf.html.erb:187. */
.pdf-container .draw-box #draw-expanded {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: rgba(0, 186, 212, 0.10);
  border: 1px solid rgba(0, 186, 212, 0.32);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-cyan-700);
  font-size: 15px;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.pdf-container .draw-box #draw-expanded:hover {
  background: rgba(0, 186, 212, 0.22);
  border-color: rgba(0, 186, 212, 0.48);
}

/* Dark: cyan-300 (claro) sobre el mismo canvas blanco post-V12.1a */
[data-theme="dark"] .pdf-container .draw-box #draw-expanded {
  color: var(--brand-cyan-300);
  background: rgba(102, 217, 245, 0.10);
  border-color: rgba(102, 217, 245, 0.32);
}

[data-theme="dark"] .pdf-container .draw-box #draw-expanded:hover {
  background: rgba(102, 217, 245, 0.22);
  border-color: rgba(102, 217, 245, 0.48);
}


/* Textarea para escribir firma */
.pdf-container #signature.elementFirma {
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-3) !important;
  font-family: var(--font-family-base);
  font-size: var(--text-md);
  color: var(--text-strong);
  background: var(--surface-raised);
  resize: vertical;
}

.pdf-container #signature.elementFirma:focus {
  outline: none;
  border-color: var(--brand-cyan-500) !important;
  box-shadow: 0 0 0 3px rgba(0, 186, 212, 0.18);
}


/* ============================================================
   UPLOAD DE IMAGEN PARA FIRMA (#upload-image)
   ============================================================ */

.pdf-container #upload-image {
  padding: var(--space-4) !important;
  border: 2px dashed var(--brand-cyan-400);
  border-radius: var(--radius-md);
  background: var(--brand-cyan-100);
  text-align: center;
}

.pdf-container #upload-image .upload-text {
  color: var(--text-default) !important;
  font-size: var(--text-sm) !important;
  margin: 0 0 var(--space-3) !important;
}

/* V8.1: CTA "Seleccionar" del mini drop-zone #upload-image (upload de
   imagen para firma manuscrita) a navy unificado V5.2. Mismo motivo
   que Fix 1 y Fix 2. Aunque el wrapper #upload-image tiene border
   dashed cyan + bg cyan-100 (mini drop-zone), el contraste navy/cyan-100
   es alto y el cambio mantiene la unificación del wizard.

   NOTA: la excepción análoga del drop-zone del paso 1 (.upload-container
   .upload-button en upload_modern.css L246) se preserva CYAN según V6.2
   por ser el accent component principal del flujo de subir documentos.
   Esta inconsistencia entre los 2 drop-zones se acepta como decisión
   de scope V8.1; si se decide armonizar, será V8.2 dedicado. */
.pdf-container #upload-image .upload-button {
  background: var(--brand-navy-800) !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
  height: 36px;
  padding: 0 var(--space-4) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-family-base) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--font-weight-semibold) !important;
  cursor: pointer !important;
  box-shadow:
    0 1px 2px rgba(22, 47, 133, 0.18) !important;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.pdf-container #upload-image .upload-button:hover {
  background: var(--brand-navy-500) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -2px rgba(22, 47, 133, 0.35) !important;
}


/* ============================================================
   CHOISE-FIRMA (selector Escribir/Dibujar/Subir)
   ============================================================ */

.pdf-container .choise-firma li {
  padding: var(--space-3) var(--space-4) !important;
  border-radius: var(--radius-md) !important;
  transition: background-color var(--transition-fast);
}

.pdf-container .choise-firma li:hover {
  background: var(--brand-cyan-100);
}

.pdf-container .choise-firma li.selected {
  background: var(--brand-cyan-100) !important;
}

.pdf-container .choise-firma li a {
  font-family: var(--font-family-base) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--font-weight-semibold) !important;
  color: var(--text-muted) !important;
  text-decoration: none !important;
  transition: color var(--transition-fast);
}

.pdf-container .choise-firma li.selected a {
  color: var(--text-strong) !important ;
}

.pdf-container .choise-firma li .check-circle {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-round);
  border: 2px solid var(--border-default);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--space-2);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.pdf-container .choise-firma li.selected .check-circle {
  border-color: var(--text-strong);
  position: relative;
}

.pdf-container .choise-firma li.selected .check-circle::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-round);
  background: var(--text-strong);
  display: block;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 960px) {
  .pdf-container .content-section .container-signatures {
    width: 100% !important;
    min-width: 0;
    margin: var(--space-3);
  }

  .pdf-container .headerBody-pdf .controls {
    padding: var(--space-2) !important;
  }

  .pdf-container .modal-pdf-firma .container-mensaje {
    /* V11.8d — fix overflow mobile.
       Regla legacy .container-mensaje { width: 41% } en application.css
       colapsa a 205px en viewport 500px, pero el contenido natural
       (h3 + p + 2 botones flex) renderiza ~252px → overflow +68px a
       la derecha del card padre. max-width: 90vw solo pone tope
       superior; no anula el width: 41% que ya está bajo el tope.
       clamp(280px, 90vw, 450px) garantiza ancho mínimo cómodo, fluye
       hasta 90vw, topa en 450px (alineado con max-width: 440px del
       desktop). !important defensivo matching el patrón del bloque. */
    max-width: 90vw;
    width: clamp(280px, 90vw, 450px) !important;
    padding: var(--space-5) !important;
  }
}

/* V10.3-bis R4: stack vertical en mobile (<768px).
   Legacy .content-section es flex row con sidebar 380px + viewer
   flex-1 (application.css:462). En mobile el sidebar tomaba casi
   todo el viewport y el viewer se salía. Forzamos column + width
   100% en ambos. Tabs reciben scroll-x con scroll-snap (patrón
   V8.11 / gotcha 8.7) y fade gradient como affordance. Los
   controles del viewer (.controls con .btn-section rotados 90deg
   en app.css:291) se aplanan a row para evitar el rotate vertical
   en mobile. */
@media (max-width: 767px) {
  body .pdf-container .content-section {
    flex-direction: column;
  }

  body .pdf-container .content-section .container-signatures {
    flex: 0 0 auto;
    width: 100% !important;
    margin: var(--space-3) 0 0;
  }

  /* V10.4-bis-6: bump de specificity a full ancestor chain (0,5,0)
     para igualar al desktop V10.4-bis-5
     `body .content-section .bodyFirma .pdf-container .headerBody-pdf`.
     Misma specificity → mobile gana por cascade order (declarado
     después en el archivo). Sin esto, el desktop (0,5,0) le ganaba
     al mobile (0,3,1) y `.headerBody-pdf` quedaba row en mobile. */
  body .content-section .bodyFirma .pdf-container .headerBody-pdf {
    width: 100%;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-3);
  }

  body .content-section .bodyFirma .pdf-container .headerBody-pdf .container-document {
    width: 100%;
    max-width: 100vw;
    min-height: 50vh;
    overflow-x: auto;
  }

  /* Tabs: scroll-x + scroll-snap + fade gradient derecha */
  body .pdf-container .document-list {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: relative;
  }

  body .pdf-container .document-list::-webkit-scrollbar {
    display: none;
  }

  body .pdf-container .document-list .document {
    flex: 0 0 auto;
    max-width: 70vw;
    scroll-snap-align: start;
  }

  /* Fade gradient como affordance del scroll horizontal.
     Pseudo-elemento sticky en el flow del flex container —
     se queda pegado al borde derecho mientras el contenido
     scrollea por debajo. */
  body .pdf-container .document-list::after {
    content: "";
    position: sticky;
    /* V10.4-bis-12: right: -16px contrarresta el padding-right
       de 16px del .document-list. Sin esto, el fade se pinta al
       borde interno del padding-box (16px antes del borde
       derecho del viewport), dejando el extremo del último tab
       activo expuesto sin el affordance visual. Con -16px llega
       exactamente hasta el borde del element-box (viewport).
       Gotcha 4.4: position:sticky;right:0 ancla al padding-box,
       no al border-box. */
    right: -16px;
    top: 0;
    bottom: 0;
    flex: 0 0 var(--space-8);
    background: linear-gradient(
      to right,
      transparent,
      var(--surface-raised) 70%
    );
    pointer-events: none;
  }

  /* V10.3-bis-2 Punto 2: controles del viewer PDF aplanados a fila.
     V10.3-bis seteó `flex-direction: row !important` pero el
     legacy en application.css:291 no declara display sobre
     `.controls` (defaults a block), así que flex-direction no
     hacía nada. Fix: declarar `display: flex` explícito. El
     legacy también aplica `transform: rotate(90deg)` a las
     `.btn-section` (app.css:320) para apilarlas verticalmente;
     en mobile aplanamos con `transform: none`. La `.zoom-section`
     pasa de grid column a grid row con `grid-auto-flow: column`. */
  /* V10.4-bis-5: anular el sticky lateral compacto del desktop —
     en mobile el control bar vuelve a banda horizontal full-width
     debajo del PDF, sin card visual (transparent), con un border
     superior sutil como separador.
     V10.4-bis-6: bump specificity a full ancestor chain (0,6,0)
     para vencer al desktop (0,5,0) + position static con
     !important para anular el `position: fixed` del desktop. */
  body .content-section .bodyFirma .pdf-container .headerBody-pdf .controls {
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    position: static !important;
    top: auto;
    right: auto;
    z-index: auto;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-2);
    background: transparent;
    border: none;
    border-top: 1px solid var(--border-subtle);
    border-radius: 0;
    box-shadow: none;
    .close-btn,
    .drag-handle{
      display: none;
    } 
    .panel {
      flex-direction: row;
    }
  }

  body .pdf-container .headerBody-pdf .controls .btn-section {
    transform: none;
    margin: 0;
    flex-direction: row;
    gap: var(--space-1);
  }

  body .pdf-container .headerBody-pdf .controls .container-pagNum {
    flex-direction: row;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-2);
  }

  /* V10.4 R1: removido `flex-direction: row` — el base ahora es
     row también (default flex). Preservadas las tweaks de espaciado
     mobile (margin 0 + padding más compacto). */
  body .pdf-container .headerBody-pdf .controls .zoom-section {
    margin: 0;
    width: auto;
    padding: var(--space-2);
  }

  /* V10.4-bis-7: en mobile los clusters del control bar van
     horizontalmente lado a lado, no estirados al 100%. El bloque
     desktop V10.4-bis-5 declara `width: 100%` (necesario para la
     columna de 140px sticky). En mobile esa regla hacía que cada
     cluster ocupara toda la fila y flex-wrap los apilara
     verticalmente. Bump specificity a (0,7,0) con full ancestor
     chain para vencer al desktop (0,5,0). `flex: 0 0 auto` evita
     grow/shrink — cada cluster mide solo lo necesario para sus
     botones internos. Si el viewport es muy estrecho (≤340px),
     flex-wrap del padre los baja a otra fila — comportamiento
     responsive correcto. */
  body .content-section .bodyFirma .pdf-container .headerBody-pdf .controls .btn-section,
  body .content-section .bodyFirma .pdf-container .headerBody-pdf .controls .container-pagNum,
  body .content-section .bodyFirma .pdf-container .headerBody-pdf .controls .zoom-section {
    width: auto;
    flex: 0 0 auto;
    /* V10.4-bis-8: aplanar visualmente los clusters en mobile.
       Las reglas desktop dan a .container-pagNum un fondo cyan-100
       y a .zoom-section un card con border. En mobile, donde el
       .controls ya no tiene card propia (background: transparent
       post-V10.4-bis-6), las subcards diferenciadas se sienten
       desordenadas. Igualamos todos los clusters al estilo "plano"
       de back/foward-section.

       V10.4-bis-9: !important quirúrgico scoped al @media mobile.
       El legacy plano en application.css declara background,
       padding y border como !important sin media query (vence
       cualquier specificity sin !important — gotcha 8.4
       sub-patrón A). Para aplanar en mobile sin tocar legacy
       desktop, usamos !important scoped solo dentro de este
       media query. Desktop preserva las cards diferenciadas
       (legacy sin override moderno), mobile gana con !important
       + specificity (0,7,0). */
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    /* V10.4-bis-11: anula el `margin: 16px 0 0` que el legacy
       desktop aplica a .zoom-section para separarlo del cluster
       anterior en la columna vertical. En mobile (row), ese
       margin desalineaba el zoom 8px abajo del resto. No-op
       para back/pagNum/foward (ya con margin: 0). !important
       por consistencia con el resto del bloque + defensa contra
       expansiones shorthand con !important oculto. */
    margin: 0 !important;
  }

  /* V10.4-bis-10: zoom icons (`<i class="fa-search-plus/minus">`)
     reciben el mismo lenguaje botón outline 36×36 que los
     paginadores de .btn-section. Antes quedaban como glyphs sueltos
     a 28×28 desalineados ~8px abajo. Specificity (0,7,1) > desktop
     (0,4,1); el legacy `.zoom-section i` no usa !important en estas
     propiedades (auditoría pre-flight confirmada). */
  body .content-section .bodyFirma .pdf-container .headerBody-pdf .controls .zoom-section i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-brand);
    background: transparent;
    font-size: 13px;
  }

  body .content-section .bodyFirma .pdf-container .headerBody-pdf .controls .zoom-section i:hover {
    color: var(--brand-cyan-700);
  }

  /* V10.4-bis-10: container-pagNum con altura 36 igual a los
     botones, texto centrado. Override del padding: 0 !important
     del bloque combinado V10.4-bis-9 (mismo selector chain pero
     este viene después → empate por specificity, cascade order
     decide). Mantengo !important porque el legacy desktop también
     declara padding y bg con !important en los spans hijos. */
  body .content-section .bodyFirma .pdf-container .headerBody-pdf .controls .container-pagNum {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 36px !important;
    min-width: 36px;
    padding: 0 var(--space-2) !important;
    color: var(--text-default);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
  }

  body .content-section .bodyFirma .pdf-container .headerBody-pdf .controls .container-pagNum span {
    padding: 0 !important;
    background: transparent !important;
  }

  /* V10.4-bis-13: reordenar el contenido mobile.
     En mobile, .content-section apila verticalmente con el visor
     PDF justo después de las tabs, antes del panel de firma.
     De arriba a abajo: tabs (.document-list) → visor PDF
     (.headerBody-pdf order: 2) → panel firma (.container-signatures
     order: 3). El visor era lo último en aparecer; ahora es lo
     primero que ve el usuario al cargar la vista. */
  body .pdf-container .content-section {
    flex-direction: column;
    width: 100%;
  }
  body .pdf-container .content-section .headerBody-pdf {
    order: 2;
    width: 100%;
  }
  body .pdf-container .content-section .container-signatures {
    order: 3;
    width: 100%;
  }

  /* V10.4-bis-13: la tab "Carpeta" (#folder-entry) en mobile causa
     ruido — clickear oculta el visor sin aportar valor (el flujo
     apilado ya muestra los metadatos relevantes). Ocultar en
     mobile. !important defensivo porque Stimulus classes_controller
     toggea folder-active y podría tocar el display inline. */
  body .pdf-container #folder-entry {
    display: none !important;
  }

  /* V10.4-bis-13: la sección "Documentos de la carpeta"
     (.documentos-section en el sidebar) duplica las tabs (ambos
     listan los mismos PDFs). En mobile con el contenido apilado
     verticalmente, la duplicación es ruido. */
  body .pdf-container .documentos-section {
    display: none !important;
  }

  /* V10.4-bis-13: fix preventivo del active state de las tabs.
     Solo el tab realmente activo lleva underline cyan + semibold.
     `.folder` (incluso si tiene la clase .active inicial) queda
     sin underline porque está oculto. Refuerza el lenguaje "tab"
     en mobile donde no hay hover.
     V10.4-bis-14: specificity bump con tag prefix `html body
     div.*`. La V10.4-bis-13 (0,5,1) perdía contra un legacy
     nested invisible al CSSOM con specificity expandida y
     !important. Nueva specificity (0,4,5) — confirmado
     empíricamente en QA inline que gana al legacy. Patrón
     gotcha 7.2 + 8.4. */
  html body div.pdf-container div.document-list div.document.first.folder {
    border-bottom-color: transparent !important;
  }
  html body div.pdf-container div.document-list div.document.first.active {
    border-bottom-color: var(--brand-cyan-500) !important;
    font-weight: var(--font-weight-semibold);
  }

  /* V10.4-bis-13 bonus: hover sutil sobre tabs en mobile para
     reforzar percepción de elemento clickeable. */
  body .pdf-container .document-list .document.first:hover {
    background-color: var(--neutral-50);
  }
}

@media (max-width: 480px) {
  .pdf-container .container-signatures .menu-firma {
    padding: var(--space-3) var(--space-4) !important;
  }

  .pdf-container .container-tipodeFirma {
    margin: var(--space-2) var(--space-3) !important;
  }

  .pdf-container .modal-pdf-firma .container-btnConfirmar {
    flex-direction: column-reverse;
  }

  .pdf-container .modal-pdf-firma .container-btnConfirmar .btn {
    width: 100%;
  }
}


/* ============================================================
   V8.5: Neutralización del bloque legacy @media (min-width: 1840px)
   ============================================================
   views/responsive.css:229-262 infla el panel en monitores 4K+:
     - #signature-container, .container-signatures { width: 480px !important }
     - h4 { font-size: 18px !important }
     - p, button { font-size: 16px !important }
     - texto-unDocumento { width: 440px !important }
   Pisa el clamp moderno y el sistema tipográfico del DS (que ya
   escala apropiadamente con var(--text-*)). Re-overrideamos aquí
   con mayor especificidad para mantener el panel responsive
   también en viewports grandes. Auditoría completa del bloque
   1840px legacy queda como tech debt V8.6+.
   ============================================================ */

@media (min-width: 1840px) {
  .pdf-container .content-section .container-signatures {
    flex: 0 0 clamp(380px, 26%, 520px);
  }

  .pdf-container .content-section #signature-container {
    width: 100% !important;
  }

  .pdf-container .content-section .container-signatures h4 {
    font-size: var(--text-md) !important;
  }

  .pdf-container .content-section .container-signatures .add-sign-text,
  .pdf-container .content-section .container-signatures .container-tipodeFirma .nombreTipoFirma p {
    font-size: var(--text-sm) !important;
  }

  .pdf-container .content-section .container-signatures p.texto-unDocumento {
    width: auto !important;
  }
}


/* ============================================================
   V10.3 H7: DOCUMENTOS EN LA CARPETA (.documentos-section)
   ============================================================
   Reemplaza al dropdown flotante .lista-documentos (legacy en
   application.css:1034-1060 con position:absolute + margin-top:34px
   + bg #f1f1f9 + color #222D8B hardcoded). Ahora es una sección
   dentro del sidebar .container-signatures, visible siempre que
   haya más de un documento (pdf_reader_controller.js:212 togglea
   style.display sobre el target folderContent según isMultiple).
   Item por documento: <div class="folder-description"> con icono
   fa-file + nombre, inyectado por pdf_reader_controller#createFolderEntry.
   ============================================================ */

.pdf-container .container-signatures .documentos-section {
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pdf-container .container-signatures .documentos-section .container-title{
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  color: var(--text-strong);
  i{
    color: var(--brand-navy-700);
  }
  i#documentPlusIcon{
    display: none;
  }
}
.pdf-container .container-signatures .documentos-section.document-hidden .container-title{
  i#documentPlusIcon{
    display: block;
  }
  i#documentCollapseIcon{
    display: none;
  }
}

/* V10.4 R2: renombrado de `.documentos-section__title` a
   `.documentos-section__eyebrow`. El <h4> con icono carpeta
   confundía con el tab "Carpeta" del top del visor. Ahora es <p>
   sin icono y con texto distinto ("Documentos de la carpeta"),
   marcando claramente que es etiqueta de lista, no acción. */
.pdf-container .container-signatures .documentos-section .documentos-section__eyebrow {
  /*margin: 0 0 var(--space-2);
  font-family: var(--font-family-display);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-muted);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;*/
  margin: 0;
  display: flex;
  align-items: center;
  font-family: var(--font-family-display);
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text-strong);
  letter-spacing: var(--tracking-snug);
  i{
    display: flex;
    align-items: center;
    width: 28px;
    height: 28px;
    font-size: 16px;
    color: var(--brand-navy-700);
    justify-content: center;
  }
  span{
    margin-left: 20px;
    background: var(--neutral-300);
    padding: 1px 4px;
    display: none;
  }
}
.pdf-container .container-signatures .documentos-section.document-hidden .documentos-section__eyebrow{
  span{
    display: block;
  }
}

.pdf-container .container-signatures .documentos-section .folder-description {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text-default);
  font-size: var(--text-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.pdf-container .container-signatures .documentos-section.document-hidden .folder-description{
  display: none;
}


.pdf-container .container-signatures .documentos-section .folder-description:hover {
  background: var(--neutral-100);
  color: var(--text-strong);
}

.pdf-container .container-signatures .documentos-section .folder-description.active,
.pdf-container .container-signatures .documentos-section .folder-description.is-current {
  background: var(--brand-navy-100);
  color: var(--text-brand);
  font-weight: var(--font-weight-semibold);
}

.pdf-container .container-signatures .documentos-section .folder-description i {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.pdf-container .container-signatures .documentos-section .folder-description:hover i,
.pdf-container .container-signatures .documentos-section .folder-description.active i,
.pdf-container .container-signatures .documentos-section .folder-description.is-current i {
  color: var(--brand-navy-700);
}


/* ============================================================
   V8.7(a): HISTORIAL DE FIRMAS (.signature-history)
   ============================================================
   Reubicado desde sign.css:15-132 (legacy con colores hardcoded
   #222D8B navy, #49b7d2 cyan, #94deeb cyan-light, #edeaea8a
   border). Reescrito con tokens del DS para consistencia con el
   resto del panel del wizard. Selectores intactos — el JS de
   collapsible-list (toggle "Ver más / Ver menos") sigue
   funcionando sin cambios.
   ============================================================ */

.signature-history {
  width: auto;
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-3) var(--space-4);
}

.signature-history div.container-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  color: var(--text-strong);
}

.signature-history div.container-title .signature-history_title {
  margin: 0;
  display: flex;
  align-items: center;
  font-family: var(--font-family-display);
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text-strong);
  letter-spacing: var(--tracking-snug);
  i{
    display: flex;
    align-items: center;
    width: 28px;
    height: 28px;
    font-size: 16px;
    color: var(--brand-navy-700);
    justify-content: center;
  }
}

.signature-history div.container-title .fas.fa-minus {
  cursor: pointer;
  color: var(--brand-navy-700);
}

.signature-history div.container-title .fas.fa-plus {
  display: none;
  color: var(--brand-navy-700);
}

.signature-history .container-signature-history {
  transition: all 0.3s ease;
  display: grid;
  gap: var(--space-4);
  padding-left: var(--space-3);
  padding-top: var(--space-3);
}

.signature-history .signature-history_section {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  position: relative;
  padding-left: 2px;
}

/* V10.3 H8: ajustes finos sobre V8.7(a).
   - Círculos reducidos 24px → 14px (más sutil, alineado con
     progress-steps del wizard).
   - Reposo: cyan opacity 0.4 → neutral-300 plano (mejor contraste
     vs línea conectora). El cyan-500 se reserva para el último
     paso "actual" (excepción cyan DS 3.1.5 — progress-steps dot).
   - Línea conectora ajustada (left 12 → 7, top 24 → 14) para
     re-centrar bajo el nuevo tamaño de círculo. */
.signature-history .signature-history_section i.circle-icon {
  font-size: 14px;
  color: var(--neutral-300);
  opacity: 1;
  position: relative;
  z-index: 2;
}

.signature-history .signature-history_section i.last-step {
  color: var(--brand-cyan-500);
}

/* V10.3-bis R3: línea conectora ahora extiende hasta el CENTRO del
   círculo siguiente, no termina cortada antes. El gap entre sections
   en .container-signature-history es var(--space-4) = 16px; el
   nuevo círculo de 14px tiene su centro a 7px del top de la section.
   bottom = -(gap + radio_circulo) = -(16 + 7) = -23px (calc evita
   el número mágico). */
.signature-history .signature-history_section::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 14px;
  bottom: calc(-1 * var(--space-4) - 7px);
  width: 2px;
  background-color: var(--border-subtle);
  z-index: 0;
}

.signature-history .signature-history_section:last-child::before {
  display: none;
}

.signature-history .content-container .signature-history_section-title {
  padding-left: 0 !important;
  margin: 0 !important;
  font-size: var(--text-base) !important;
  font-weight: var(--font-weight-semibold) !important;
  color: var(--text-strong);
}

.signature-history .content-container .signature-history_list {
  padding-left: 0;
  margin: 0;
}

.signature-history .content-container .signature-history_list .collapsible-hidden {
  display: none !important;
}

.signature-history .content-container .signature-history_item {
  display: flex;
  gap: var(--space-1);
  align-items: flex-start;
  margin-bottom: var(--space-2);
}

.signature-history .content-container .signature-history_item i {
  font-size: var(--text-xs);
  color: var(--text-strong);
}

.signature-history .content-container .signature-history_item p {
  display: grid;
  padding-left: 0 !important;
  margin: 0 !important;
  line-height: var(--leading-tight);
  font-size: var(--text-sm);
  color: var(--text-strong);
}

.signature-history .content-container .toggle-less {
  display: none;
  cursor: pointer;
}

.signature-history .content-container .toggle-more {
  cursor: pointer;
}

.signature-history .content-container span {
  font-size: var(--text-sm);
  color: var(--text-strong);
}

.signature-history.signature-collapsed .signature-history_title {
  cursor: pointer;
}

.signature-history.signature-collapsed #historyToggleIcon {
  display: none;
}

.signature-history.signature-collapsed #historyPlusIcon {
  display: block;
}

.signature-history.signature-collapsed .container-signature-history {
  display: none;
}

/* ============================================================
 * V11.6a — Modal "Posiciona tu Firma" dark mode
 * ============================================================
 * Modal legacy (#modal-previsualizacion + .modal-content, def. en
 * components/modals.css:125-193) sin pasada moderna. En light queda
 * OK; en dark aparecía como mancha luminosa total: bg #fff sólido,
 * textos #000 + navy-700, botones #6B6B6B con border #fff, overlay
 * débil rgba(0,0,0,0.2).
 *
 * SCOPE: todos los overrides scoped a #modal-previsualizacion para
 * NO afectar otros usos hipotéticos de .modal-content / .modal-pdf
 * (Fase 1 confirmó usuario único en _modales.html.erb, pero el
 * scope queda como defensive coding).
 *
 * Doctrina V11:
 *   - surface-raised para la card central
 *   - surface-overlay para scrim oscuro + blur (alineado paso 3)
 *   - text-strong / text-default para tipografía
 *   - alpha-por-rol (blanco @ 6% / 10%) para botones secundarios
 *
 * Excepción canvas PDF.js: el <canvas pdf-reader-target> renderea
 * el documento real con fondo blanco intrínseco — no se toca. Solo
 * se oscurece el chrome del modal alrededor.
 *
 * NO se modifican:
 *   - .btn--primary "Confirmar" (ya navy-800 + #fff vía V8.1)
 *   - span.close "×" (ya var(--color-secondary) = cyan-500, OK dark)
 *
 * Fase 1 confirmó: 0 !important en reglas competidoras, 0 overrides
 * dark previos, specificity natural [0,2,1]/[0,2,2] vence al legacy
 * [0,1,0]/[0,2,0]. Cero !important necesario.
 * ============================================================ */

/* Overlay scrim — reemplaza rgba(0,0,0,0.2) débil del legacy
 * (.modal background-color: var(--color-overlay)) por scrim dark
 * con blur, vía token estándar V11. */
[data-theme="dark"] #modal-previsualizacion {
  background-color: var(--surface-overlay);
  backdrop-filter: blur(8px);
}

/* Card central — surface-raised + border-subtle estándar V11 */
[data-theme="dark"] #modal-previsualizacion .modal-content {
  background: var(--surface-raised);
  border-color: var(--border-subtle);
  color: var(--text-default);
}

/* Títulos — text-strong para máximo contraste.
 * Cubre h3 "Posiciona tu Firma" + h3 "Confirmar firma" en
 * .informacion-perfil. */
[data-theme="dark"] #modal-previsualizacion .modal-content h3 {
  color: var(--text-strong);
}

/* Párrafos descriptivos — .informacion-perfil p "¿Deseas confirmar
 * la posición...". */
[data-theme="dark"] #modal-previsualizacion .modal-content p,
[data-theme="dark"] #modal-previsualizacion .informacion-perfil p {
  color: var(--text-default);
}

/* Indicador de página "Página X de Y" + spans #pageNum / #pageCount.
 * El span padre y los hijos id heredan text-default. */
[data-theme="dark"] #modal-previsualizacion .controls,
[data-theme="dark"] #modal-previsualizacion .controls span,
[data-theme="dark"] #modal-previsualizacion #pageNum,
[data-theme="dark"] #modal-previsualizacion #pageCount {
  color: var(--text-default);
}

/* Botones nativos <button id="prevPage"|"nextPage"> sin clase.
 * Reemplazar bg #6B6B6B + border #fff hardcoded por estilo coherente
 * con .btn--ghost / secondary dark: blanco @ 6% bg, border-default
 * translúcido, color text-default. */
[data-theme="dark"] #modal-previsualizacion .controls button,
[data-theme="dark"] #modal-previsualizacion button#prevPage,
[data-theme="dark"] #modal-previsualizacion button#nextPage {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-default);
  color: var(--text-default);
}

[data-theme="dark"] #modal-previsualizacion .controls button:hover,
[data-theme="dark"] #modal-previsualizacion button#prevPage:hover,
[data-theme="dark"] #modal-previsualizacion button#nextPage:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: var(--border-strong);
  color: var(--text-strong);
}
/* ============================================================
 * FIN V11.6a
 * ============================================================ */


/* ============================================================
 * V11.6b — Panel paso 3 dark mode
 * ============================================================
 * Frente: /sign/folder/<uuid> en dark mode.
 * Cubre 5 grupos QA con contraste WCAG roto en dark:
 *
 * G1. Tabs documentos (.document-list / .document.first)
 *     - bg neutral-50/200 light + color text-strong: 1.03:1 activo
 *       (blanco sobre blanco), 2.95:1 no-activo (gris claro).
 *     - Línea decorativa ::after background brand-navy-700 casi
 *       invisible sobre surface-app dark.
 *
 * G2. Sidebar selector (.folder-description.is-current/.active)
 *     - bg brand-navy-100 light + color text-brand dark = 1.41:1.
 *
 * G3. Accordions (.container-tipodeFirma) — 3 reglas con !important:
 *     - L222: ícono color brand-navy-700 !important (1.62:1)
 *     - L242: bg active brand-cyan-100 !important (flash claro)
 *     - L246: p color brand-cyan-700 !important
 *
 * G4. Causa raíz textos descriptivos (sign.css:106-111):
 *       #signature-container p { color: #222D8B }
 *     Pisa todos los <p> nested vía specificity [1,0,1] > clases.
 *     Afecta: .texto-unDocumento, .texto-masiva, .descripcion-texto,
 *     .descripcion-textoPersonalizada, .descripcion-textoMasiva,
 *     y los <p> del historial (.signature-history dentro de
 *     #signature-container). Diego pidió ataque a la raíz:
 *     un solo override [1,2,1] pisa el legacy y arregla todo.
 *     Excepción defensiva para títulos del historial (text-strong).
 *
 * G5. Botón Continuar disabled (#continue-button:disabled)
 *     - .btn:disabled base (buttons.css:49-60) aplica
 *       bg var(--color-border) #d9d9d9 + color #fff sobre dark.
 *     - .btn--secondary { color: #fff !important } pisa la base.
 *     - Patrón disabled V11.5f-ter: blanco@6% + border-default
 *       + text-muted + opacity 0.7.
 *
 * Specificity (overrides vs legacy):
 *   G1: legacy [0,4,1] → override [0,5,1] gana sin !important
 *   G2: legacy [0,5,0] → override [0,6,0] gana sin !important
 *   G3: legacy con !important → override con !important defensivo
 *       (lección V11.5a-ter)
 *   G4: legacy [1,0,1] → override [1,2,1] gana sin !important
 *   G5: legacy .btn--secondary color !important → override color
 *       con !important; bg/border sin !important (no compiten)
 *
 * Cero modificaciones a:
 *   - Tokens primitivos --neutral-* (light-only intencional)
 *   - .btn--primary "Firmar/Confirmar" navy-800 (ya OK V8.1)
 *   - canvas[data-pdf-reader-target] (contenido real, no chrome)
 *   - span.close del modal hermano (ya cyan-500 OK)
 * ============================================================ */


/* ---- G1: TABS DOCUMENTOS (.document.first) ---- */

/* Container de tabs — bg neutral-200 light → surface-sunken */
[data-theme="dark"] .pdf-container .document-list {
  background: var(--surface-sunken);
}

/* Línea decorativa bajo tabs — navy-700 invisible en dark → cyan-300
 * (decisión Diego: vívido, alineado con indicador active del tab).
 * Excepción cyan documentada del DS (3.1.5 — underline activo). */
[data-theme="dark"] .pdf-container .document-list::after {
  background: var(--brand-cyan-300);
}

/* Tab reposo no-activo: bg sunken (más oscuro), text-muted */
[data-theme="dark"] body .pdf-container .document-list .document.first {
  background: var(--surface-sunken);
  color: var(--text-muted);
}

/* Tab hover: bg raised + text-default (mismo bg que activo
 * pero text-default en lugar de text-strong para diferenciarse) */
[data-theme="dark"] body .pdf-container .document-list .document.first:hover {
  background: var(--surface-raised);
  color: var(--text-default);
}

/* Tab activo: bg surface-raised + text-strong + border-default
 * (mantiene jerarquía visual: el activo "levantado" sobre el sunken) */
[data-theme="dark"] body .pdf-container .document-list .document.first.active,
[data-theme="dark"] body .pdf-container .document-list .document.first.folder.active {
  background: var(--surface-raised);
  color: var(--text-strong);
  border-color: var(--border-default);
}

/* Íconos del tab activo: text-strong */
[data-theme="dark"] body .pdf-container .document-list .document.first.active i.fa-folder,
[data-theme="dark"] body .pdf-container .document-list .document.first.active i.fa-file,
[data-theme="dark"] body .pdf-container .document-list .document.first.active i.fas.fa-circle {
  color: var(--text-strong);
}


/* ---- G2: SIDEBAR .folder-description ---- */

/* Hover (no-activo): cyan @8% reposo wrappers */
[data-theme="dark"] .pdf-container .container-signatures .documentos-section .folder-description:hover {
  background: rgba(0, 186, 212, 0.08);
  color: var(--text-strong);
}

/* Activo / current: text-brand dark @10% (doctrina "reposo destacado"
 * V11.3 H / V11.5g). text-brand dark = #C4C8FF → rgba(196,200,255). */
[data-theme="dark"] .pdf-container .container-signatures .documentos-section .folder-description.active,
[data-theme="dark"] .pdf-container .container-signatures .documentos-section .folder-description.is-current {
  background: rgba(196, 200, 255, 0.10);
  color: var(--text-strong);
}

/* Íconos en estado hover / active / is-current: text-brand
 * (legacy usa brand-navy-700 → invisible dark) */
[data-theme="dark"] .pdf-container .container-signatures .documentos-section .folder-description:hover i,
[data-theme="dark"] .pdf-container .container-signatures .documentos-section .folder-description.active i,
[data-theme="dark"] .pdf-container .container-signatures .documentos-section .folder-description.is-current i {
  color: var(--text-brand);
}


/* ---- G3: ACCORDIONS .container-tipodeFirma ---- */

/* Ícono del header (fa-clock / fa-palette / fa-chevron-down):
 * navy-700 !important → text-brand !important.
 * Mismo patrón V11.5e fa-cogs / V11.9.1. */
[data-theme="dark"] .pdf-container .container-tipodeFirma .nombreTipoFirma i:first-child {
  color: var(--text-brand) !important;
}

/* Active bg: cyan-100 !important light → text-brand @10%
 * (doctrina alpha-por-rol "reposo destacado", evita el flash
 * claro del cyan-100 sobre dark) */
[data-theme="dark"] .pdf-container .container-tipodeFirma.active .nombreTipoFirma {
  background: rgba(196, 200, 255, 0.10) !important;
}

/* Active p color: cyan-700 !important light → text-strong */
[data-theme="dark"] .pdf-container .container-tipodeFirma.active .nombreTipoFirma p {
  color: var(--text-strong) !important;
}


/* ---- G4: TEXTOS NAVY-700 RAÍZ (#signature-container p) ---- */

/* sign.css:106-111 setea #signature-container p { color: #222D8B }
 * con specificity [1,0,1]. Pisa todo lo nested.
 *
 * Override raíz [1,2,1]: text-default para todos los <p> bajo
 * #signature-container en dark. Esto cubre de un solo golpe:
 *   - p.texto-unDocumento, p.texto-masiva
 *   - p.descripcion-texto, p.descripcion-textoPersonalizada,
 *     p.descripcion-textoMasiva
 *   - <p> del .signature-history (renderizado dentro de
 *     #signature-container vía _signature_history.html.erb) */
[data-theme="dark"] .pdf-container #signature-container p {
  color: var(--text-default);
}

/* Excepciones jerárquicas: títulos del historial necesitan
 * text-strong (no text-default). Specificity [1,4,1] > [1,2,1]. */
[data-theme="dark"] .pdf-container #signature-container .signature-history_section-title,
[data-theme="dark"] .pdf-container #signature-container .signature-history .content-container .signature-history_item p {
  color: var(--text-strong);
}


/* ---- G5: BOTÓN "CONTINUAR" DISABLED (#continue-button) ---- */

/* Legacy chain:
 *   .btn:disabled (buttons.css:49-60) → bg var(--color-border) + #fff
 *   .btn--secondary (buttons.css:110-112) → color: #fff !important
 *
 * Patrón V11.5f-ter dark disabled:
 *   bg: blanco @6%, border: border-default, color: text-muted,
 *   opacity: 0.7, box-shadow: none.
 *
 * !important solo en color (compite con .btn--secondary !important)
 * y box-shadow (compite con el modern signature-controls
 * box-shadow !important L283-285). bg / border / opacity sin
 * !important: specificity natural [0,3,3+] vence al legacy. */
[data-theme="dark"] .pdf-container #signature-controls #continue-button:disabled,
[data-theme="dark"] .pdf-container #signature-controls #continue-button[disabled],
[data-theme="dark"] .pdf-container #signature-controls #continue-buttonMasiva:disabled,
[data-theme="dark"] .pdf-container #signature-controls #continue-buttonMasiva[disabled] {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-default);
  color: var(--text-muted) !important;
  opacity: 0.7;
  box-shadow: none !important;
}

/* ============================================================
 * FIN V11.6b
 * ============================================================ */


/* ============================================================
 * V11.6b-bis — Tab font-size en viewports ultra-anchos (≥1840px)
 * ============================================================
 * Bug preexistente legacy descubierto durante QA de V11.6b en
 * monitor 1874px de Diego.
 *
 * Causa raíz (responsive.css:203-211 — CSS native nesting):
 *   @media (min-width: 1840px) {
 *     .content-section {
 *       .bodyFirma {
 *         .pdf-container {
 *           .document-list {
 *             .document {              ← sin .first
 *               width: 480px;
 *               font-size: 18px;       ← culpable
 *               padding: 10px 14px;
 *             }
 *           }
 *         }
 *       }
 *     }
 *   }
 *
 * Selector resuelto: .content-section .bodyFirma .pdf-container
 * .document-list .document = [0,5,0]. Vence al base moderno
 * `body .pdf-container .document-list .document.first` [0,3,1].
 *
 * Por qué no se detectó antes: selectorText de DOM API en CSS
 * nesting devuelve solo el selector raíz (.content-section),
 * no el resuelto. Walker original no lo capturó. Gotcha 7.2
 * (CSS native nesting con specificity invisible al CSSOM)
 * confirmado nuevamente — mismo patrón que V10.4-bis y V11.5a-ter.
 *
 * Fix quirúrgico: replicar exactamente el selector legacy y
 * agregar .first → specificity [0,6,0] gana sin !important.
 *
 * Aplica a LIGHT + DARK (sale del scope tema porque el bug es
 * preexistente del legacy, no introducido por V11). El bloque
 * V8.5 existente más arriba en este archivo (líneas 1301-1322)
 * ya neutraliza 5 reglas del mismo media legacy 1840;
 * V11.6b-bis añade la 6ª pieza al puzzle.
 *
 * Trip-wires NO atendidos en este bloque (futuros sub-ciclos
 * si Diego los reporta):
 *   - width: 480px persiste (caja ancha para texto 14px)
 *   - padding: 10px 14px persiste
 *   - "modo cine" 1840 (scale 1.2 header / dialogs / etc.)
 *     intacto por decisión arquitectónica
 * ============================================================ */

@media (min-width: 1840px) {
  .content-section .bodyFirma .pdf-container .document-list .document.first {
    font-size: var(--text-base);
  }
}

/* ============================================================
 * FIN V11.6b-bis
 * ============================================================ */


/* ============================================================
 * V11.6f — Cierre dark panel paso 3 + add_details (residuales V11.6c)
 * ============================================================
 * Residuales detectados durante QA amplio de V11.6c. V11.6b cubrió
 * tabs + sidebar + accordions + Continuar disabled pero dejó 6
 * superficies fuera (no estaban en el inventario original).
 *
 * Aplica a las dos vistas del paso 3 wizard:
 *   - /sign/folder/<uuid> (firma rápida + folder-active)
 *   - /sign/add_details modo personalizada (mismo selector chain)
 *
 * Fase 1 confirmó cero selectores únicos por vista — los 4 grupos
 * comparten las dos superficies.
 *
 * Grupos:
 *
 * G1. Íconos toggle .fa-minus / .fa-plus en .menu-firma
 *     .tittle-add-signature + .tittle-download (4 instancias). Los
 *     íconos no tienen color propio en CSS — heredan navy-700 del
 *     wrapper legacy (sign.css:159-184, color: #222D8B sin
 *     !important). Override sobre <i> con --text-brand (mismo
 *     patrón V11.5e fa-cogs). Specificity [0,3,1] > legacy [0,2,0]
 *     (inherit), sin !important.
 *
 * G2. Squircles .menu-firma h4 i.fas (.fa-file-signature,
 *     .fa-share-alt). Moderno en sign_position_modern.css:177-188
 *     declara color cyan-700 !important + bg cyan-100. Override
 *     cyan @10% + cyan-300 (doctrina alpha-por-rol reposo
 *     destacado, mismo patrón V11.5a / V11.6d .upload-drop__icon).
 *     +1 !important defensivo en color (compite con legacy
 *     !important). bg sin !important.
 *
 * G3. .lista-documentos wrapper (visible solo en
 *     .pdf-container.folder-active). Legacy en application.css:
 *     940-965 con specificity [0,3,0] ataca 3 propiedades:
 *     color #222D8B + bg #f1f1f9 light + border #edeaea8a light.
 *     Sus hijos .folder-description y <i> heredan color del
 *     wrapper. Override [0,4,0] gana sin !important.
 *
 *     Sub-fix add-on E2: .folder-description:hover bg #dedee5
 *     light también flashea en dark. Override con cyan @8% reposo.
 *
 *     Íconos .fa-folder / .fa-file: text-muted explícito (más
 *     sutiles que el texto principal — mismo patrón que la sidebar
 *     V11.6b .documentos-section .folder-description i).
 *
 * G4. .choise-firma li.selected "Escribir firma" bg cyan-100
 *     !important moderno. Fix: cyan @10% + !important defensivo.
 *     a color y .check-circle ya usan --text-strong (cascada del
 *     token en dark) — no requieren override.
 *
 *     Sub-fix add-on E3: .choise-firma li:hover (sin !important)
 *     también flash cyan-100 en dark. Override sin !important.
 *
 * Specificity / !important:
 *   - G1: [0,3,1] > [0,2,0] inherit. 0 !important.
 *   - G2: [0,6,1] > [0,5,1] !important. 1 !important defensivo.
 *   - G3: [0,4,0] > [0,3,0]. 0 !important.
 *   - G4 selected: [0,4,1] > [0,3,1] !important. 1 !important defensivo.
 *   - G4 hover: [0,4,1] > [0,3,1]. 0 !important.
 *
 * Total !important agregados: 2 defensivos.
 *
 * NO modificado:
 *   - .menu-firma h4 (text-strong ya OK)
 *   - .menu-firma h4 i.fas width/height/border-radius (estructura
 *     squircle intacta — solo bg + color)
 *   - .choise-firma li.selected a (color text-strong ya OK)
 *   - .choise-firma li.selected .check-circle (border --text-strong
 *     cascadea correctamente en dark)
 *   - .lista-documentos display rules (visibility queda intacta)
 * ============================================================ */


/* ---- G1: íconos toggle .fa-minus / .fa-plus en tittles ---- */
/* V11.6f-bis Cambio C: !important defensivo agregado tras QA Chrome MCP
 * de V11.6f detectó .fa-plus latente (display:none) con computed
 * color: navy-700 que NO viene de ninguna regla enumerable por
 * document.styleSheets. Patrón gotcha 7.2 / §8.11 — regla legacy con
 * CSS native nesting cuyo selectorText DOM API no expone. Mismo síntoma
 * que V10.4-bis, V11.5a-ter, V11.6b-bis. !important defensivo aplicado. */
[data-theme="dark"] .menu-firma .tittle-add-signature i,
[data-theme="dark"] .menu-firma .tittle-download i {
  color: var(--text-brand) !important;
}


/* ---- G2: squircles .menu-firma h4 i.fas (cyan-100 → cyan @10%) ---- */
[data-theme="dark"] .pdf-container .container-signatures .menu-firma h4 i.fas {
  background: rgba(0, 186, 212, 0.10);             /* cyan-500 @ 10% */
  color: var(--brand-cyan-300) !important;         /* compite contra cyan-700 !important moderno */
}


/* ---- G3: .lista-documentos wrapper /sign/add_details + folder-active ---- */
/* Legacy en application.css:940-953 tiene bg + color + border light
 * sobre dark. Override completo del wrapper. */
[data-theme="dark"] .pdf-container .lista-documentos {
  background: var(--surface-raised);
  border-color: var(--border-subtle);
  color: var(--text-default);
}

/* Hover de items dentro de la lista — flash #dedee5 → cyan @8% (add-on E2) */
[data-theme="dark"] .pdf-container .lista-documentos .folder-description:hover {
  background-color: rgba(0, 186, 212, 0.08);
  color: var(--text-strong);
}

/* Íconos .fa-folder / .fa-file dentro de la lista — text-muted
 * (mismo patrón sidebar V11.6b .documentos-section .folder-description i) */
[data-theme="dark"] .pdf-container .lista-documentos i,
[data-theme="dark"] .pdf-container .lista-documentos .folder-description i.fa-folder,
[data-theme="dark"] .pdf-container .lista-documentos .folder-description i.fa-file {
  color: var(--text-muted);
}


/* ---- G4: .choise-firma li.selected + li:hover (add-on E3) ---- */
[data-theme="dark"] .pdf-container .choise-firma li.selected {
  background: rgba(0, 186, 212, 0.10) !important;  /* compite contra cyan-100 !important moderno */
}

[data-theme="dark"] .pdf-container .choise-firma li:hover {
  background: rgba(0, 186, 212, 0.08);             /* sin !important — moderno tampoco lo tiene */
  color: var(--text-strong);
}


/* ============================================================
 * FIN V11.6f
 * ============================================================ */


/* ============================================================
 * V11.6f-bis · Cambio D — Cuadro flotante .lista-documentos
 * redundante en /sign/add_details
 * ============================================================
 * Decisión arquitectónica Diego: la información ("Carpeta +
 * documentos") ya se renderiza en .documentos-section del sidebar
 * (cubierta V11.6b). El cuadro flotante quedó por inercia legacy.
 *
 * Precedente legacy descubierto en Fase 1 (application.css:1097-1101):
 *   .pdf-container.agregar-detalle :has(#folder-entry.active) ~ ...
 *     .lista-documentos { display: none !important; }
 *
 * Pero esa regla es condicional (depende de #folder-entry.active +
 * sibling combinator). Cuando la condición no se cumple, el flotante
 * reaparece con display: flex desde otra regla nested en legacy.
 *
 * !important defensivo confirmado por QA Chrome MCP — gotcha 7.2
 * (CSS native nesting invisible al walker DOM API). Aunque la
 * búsqueda exhaustiva en bundle de competidores devuelve 1 sola
 * regla (la nuestra), el computed muestra display: flex. Test con
 * style tag al final del head sin !important devolvió flex; con
 * !important devolvió none. Mismo patrón V11.5a-ter, V11.6b-bis,
 * V11.6f-bis Cambio C — 4ta confirmación del gotcha en el ciclo V11.6.
 *
 * Aplica a light + dark (cleanup funcional, no temático).
 *
 * NO se remueve el elemento del DOM — preserva Stimulus controllers
 * y data-actions del componente legacy.
 * ============================================================ */
.pdf-container.agregar-detalle .lista-documentos {
  display: none !important;
}


/* ============================================================
 * V11.6f-bis · Cambio E — Dropzone #upload-image dark
 * ============================================================
 * Zona "subir imagen de firma" en /sign/add_details (también
 * presente en /sign/pdf legacy). Declarada en
 * sign_position_modern.css:836-842 con bg cyan-100 light hardcoded
 * — flash claro en dark.
 *
 * Doctrina dropzone consolidada (V11.5a / V11.5a-ter / V11.6d
 * .upload-drop__icon): cyan-500 @ 8% reposo para wrappers grandes,
 * border cyan-400 ya OK en dark (token semántico-ish del browser
 * que mantiene saturación visible).
 *
 * Consistencia con el dropzone principal .upload-container del
 * paso 1 (cubierto V11.5a / V11.6d).
 *
 * NO hay :hover declarado para el wrapper #upload-image — solo
 * para el botón interno .upload-button (ya navy-800 desde V8.1).
 * Solo cubrimos reposo.
 *
 * NO modifica:
 *   - border: 2px dashed var(--brand-cyan-400) (cyan-400 OK dark)
 *   - .upload-text (color text-default ya OK por body fix V11.6c)
 *   - .upload-button (navy-800 ya OK V8.1)
 *
 * Specificity: [data-theme="dark"] .pdf-container #upload-image =
 * [0,2,1] vence al legacy .pdf-container #upload-image [0,1,1]
 * sin !important (legacy NO tiene !important en background).
 * ============================================================ */
[data-theme="dark"] .pdf-container #upload-image {
  background: rgba(0, 186, 212, 0.08);
}


/* ============================================================
 * FIN V11.6f-bis
 * ============================================================ */


/* ============================================================
 * V11.6i — Cards .choise-firma distinguibles + íconos distintivos
 * ============================================================
 * Decisión UX Diego: las 3 opciones (.choise-firma li) "Escribir
 * firma", "Dibujar firma", "Subir Imagen" no se distinguen como
 * elegibles. Estado anterior: sin border, bg transparent en
 * no-selected o cyan @10% en selected (V11.6f G4). El cliente
 * puede no entender que son 3 alternativas.
 *
 * Fix CSS:
 *   - Card base (light + dark) con border subtle visible
 *   - Hover sutil cyan @6-8% + border cyan-400
 *   - Selected con border cyan-400 (combinado con bg cyan @10%
 *     de V11.6f G4 !important — no se pisa, complementa)
 *   - Estilo del nuevo .choise-firma__icon (text-muted reposo,
 *     cyan-300 en selected, cyan-400 en hover)
 *
 * Fix ERB (separado): agregar <i.choise-firma__icon> con íconos
 * distintivos por opción:
 *   - fa-keyboard → "Escribir firma" (medio teclado)
 *   - fa-pen-fancy → "Dibujar firma" (pluma a mano alzada)
 *   - fa-image → "Subir Imagen" (imagen estática)
 *
 * Aplica a ambos temas (mejora UX no es bug temático). Light queda
 * sutil con tokens navy translúcidos para no romper la estética
 * legacy. Dark usa tokens surface-raised / border-default.
 *
 * Renderiza solo en /sign/add_details (el bloque .choise-firma de
 * pdf.html.erb está dentro de <!--div --> HTML comment legacy).
 *
 * NO modifica:
 *   - V11.6f G4 (.choise-firma li.selected bg cyan @10% !important)
 *   - .check-circle, .check-circle::after (ya cubierto V8.1 + dark)
 *   - <a> y <i.arrow-down> dentro del <li> (color text-strong/muted
 *     cascadea correctamente)
 *   - Hijos hermanos del <li> (.draw-box, textarea, .elementFirma)
 *
 * Specificity:
 *   - Card base [0,2,1] empata con legacy [0,2,1] modern, gana por
 *     cascade order. Sin !important.
 *   - .choise-firma__icon [0,2,1] sin conflicto (selector nuevo).
 * ============================================================ */

/* Card base — light (mejora UX aplica light + dark).
 * V11.6i-bis: cursor: pointer movido a reposo para affordance
 * inmediata. El handler pdf#showElement (controllers/pdf_controller.js:84)
 * usa event.target.closest('li') — toda la <li> es clickeable
 * tras V11.6i-bis (data-action movido del <a> al <li> en las 3
 * opciones, normalizando con el primer item selected). */
.choise-firma > li {
  border: 1px solid rgba(34, 45, 139, 0.12);    /* navy @ 12% — subtle */
  background: rgba(34, 45, 139, 0.03);           /* navy @ 3% */
  margin-bottom: var(--space-2);
  cursor: pointer;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast);
}

.choise-firma > li:not(.selected):hover {
  background: rgba(0, 186, 212, 0.08);
  border-color: var(--brand-cyan-400);
}

.choise-firma > li.selected {
  border-color: var(--brand-cyan-400);
  /* bg cyan @10% !important ya viene de V11.6f G4 */
}

/* Card base — dark override */
[data-theme="dark"] .choise-firma > li {
  border-color: var(--border-default);
  background: rgba(245, 245, 251, 0.04);        /* surface-raised muy sutil */
}

[data-theme="dark"] .choise-firma > li:not(.selected):hover {
  background: rgba(0, 186, 212, 0.06);
  border-color: var(--brand-cyan-400);
}

[data-theme="dark"] .choise-firma > li.selected {
  border-color: var(--brand-cyan-400);
}

/* Ícono distintivo por opción (.choise-firma__icon) */
.choise-firma > li .choise-firma__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
  transition: color var(--transition-fast);
  flex-shrink: 0;
}

.choise-firma > li.selected .choise-firma__icon {
  color: var(--brand-cyan-500);
  color: var(--text-strong);
}

.choise-firma > li:not(.selected):hover .choise-firma__icon {
  color: var(--brand-cyan-400);
}

/* Dark — íconos más vibrantes para distinguirse sobre surface oscuro */
[data-theme="dark"] .choise-firma > li.selected .choise-firma__icon {
  color: var(--brand-cyan-300);
}

[data-theme="dark"] .choise-firma > li:not(.selected):hover .choise-firma__icon {
  color: var(--brand-cyan-400);
}

/* ============================================================
 * FIN V11.6i
 * ============================================================ */


/* ============================================================
 * V11.7a — Override scoped #upload-animation video (legacy nested)
 * ============================================================
 * Complementa el override global `video { border-radius:
 * var(--radius-lg) }` agregado en base/reset.css.
 *
 * Causa: regla legacy con CSS native nesting en sign.css:589-594
 * (.choise-firma div#upload-animation { video { border-radius:
 * 10px; ... } }) tiene specificity resuelta [1,2,1] que pisa al
 * global [0,0,1]. El video del #upload-animation (animación MP4
 * transitoria al subir imagen de firma) quedaría con border-radius
 * legacy 10px en vez de los 14px uniformes del DS.
 *
 * 9na confirmación gotcha §8.11 / 7.2 (CSS native nesting con
 * specificity invisible al walker DOM API) en el ciclo V11 —
 * walker exhaustivo del bundle reportó solo 1 regla matching
 * <video>, pero las reglas nested en sign.css no se expusieron.
 *
 * Fix: specificity [1,3,1] = .pdf-container + [1,2,1] del legacy.
 * El `#upload-animation` siempre vive dentro de `.pdf-container`
 * en add_details.html.erb y pdf.html.erb. Gana sin !important.
 *
 * NO modificado:
 *   - border: 1px solid #00dcf7 legacy (estilo distintivo del
 *     componente, decisión histórica)
 *   - box-shadow legacy
 *   - width: 360px legacy
 *
 * Solo uniforma el border-radius a la doctrina DS V11.7a.
 * ============================================================ */
.pdf-container .choise-firma div#upload-animation video {
  border-radius: var(--radius-lg);
}

/* ============================================================
 * FIN V11.7a
 * ============================================================ */


/* ============================================================
 * V12.1b — Modo expanded del canvas firma (.expanded-active)
 * ============================================================
 * Override moderno sobre la regla legacy `#signature-container.expanded-active`
 * en sign.css:285-294 (CSS native nesting profundo). El legacy declara:
 *   - position: fixed; top:0; left:0; height: 100vh; width: 100vw
 *   - z-index: 2 (INSUFICIENTE — sidebar/header pasan por encima)
 *   - background: rgb(14 12 12 / 80%) (scrim near-black sin token)
 *   - sin backdrop-filter
 *
 * Fixes:
 *  - z-index 9999: scrim cubre header/sidebar/footer del wizard
 *  - background: var(--surface-overlay) — token estándar V11 (light:
 *    rgba(15,18,35,0.55), dark: rgba(8,10,27,0.72)). Fallback hardcoded
 *    por si el bundle aún no carga el token.
 *  - backdrop-filter: blur(10px) refuerza la separación visual
 *  - bottom: 0 explícito por si el legacy en algún path tiene bottom:-25px
 *  - padding/overflow: cómodo viewport scroll si contenido excede
 *
 * Ocultar `<video>` autoplay tutorial — agrega ruido visual y no aporta
 * al acto de firmar en modo fullscreen.
 *
 * Botón #draw-expanded en este modo: re-posicionar al top-right del
 * viewport (no del canvas), texto "Cerrar" via ::after decorativo. La
 * a11y la provee el aria-label del ERB (label genérico
 * "Expandir o reducir firma"). z-index 10000 > 9999 del scrim.
 *
 * Specificity natural [0,3,1] gana al legacy [0,2,0] sin !important.
 * Excepción: padding/overflow + display flex children que estaban con
 * !important en legacy heredados — preservados con !important defensivo
 * solo donde es necesario para vencer al legacy nested.
 * ============================================================ */

#signature-container.expanded-active {
  z-index: 9999;
  background: var(--surface-overlay, rgba(8, 10, 27, 0.72));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  bottom: 0;
  right: 0;
  padding: var(--space-6);
  overflow-y: auto;
}

#signature-container.expanded-active > video {
  display: none;
}

/* Botón Cerrar prominente top-right del viewport */
#signature-container.expanded-active #draw-expanded {
  position: fixed;
  top: var(--space-5);
  right: var(--space-6);
  width: auto;
  height: 40px;
  padding: 0 var(--space-4);
  /* V12.1c-bis7: colores token-based cyan para light/dark.
     Bug previo (V12.1b): hardcodeado blanco, invisible en light mode
     desde que V12.1c-bis2 cambió el card del modal a blanco.
     Patrón idéntico al botón Ampliar del sidebar (paleta cyan §1.1).
     Nota técnica: usar background-color (longhand) en vez de background
     (shorthand) — el shorthand con !important no se aplicaba
     consistentemente en cascada compleja, el longhand sí. */
  background-color: rgba(0, 186, 212, 0.10);
  border: 1px solid rgba(0, 186, 212, 0.24);
  color: var(--brand-cyan-700);
  border-radius: var(--radius-md);
  font-size: 15px;
  z-index: 10000;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

#signature-container.expanded-active #draw-expanded::after {
  content: "Cerrar";
  font-family: var(--font-family-display, "Plus Jakarta Sans"), sans-serif;
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-sm);
}

#signature-container.expanded-active #draw-expanded:hover {
  background-color: rgba(0, 186, 212, 0.22);
  border-color: rgba(0, 186, 212, 0.48);
}

/* V12.1c-bis7: override dark mode del botón Cerrar (cyan-300 más
   claro sobre fondo navy del card en dark). Patrón idéntico al
   botón Ampliar del sidebar. */
[data-theme="dark"] #signature-container.expanded-active #draw-expanded {
  color: var(--brand-cyan-300);
  background-color: rgba(102, 217, 245, 0.10);
  border-color: rgba(102, 217, 245, 0.32);
}

[data-theme="dark"] #signature-container.expanded-active #draw-expanded:hover {
  background-color: rgba(102, 217, 245, 0.22);
  border-color: rgba(102, 217, 245, 0.48);
}

/* ============================================================
 * FIN V12.1b
 * ============================================================ */


/* ============================================================
 * V12.1c — Layout interno focal del modal expanded
 * ============================================================
 * V12.1b dejó el modal funcional (scrim + z-index + botón Cerrar
 * fixed) pero desordenado: canvas chico descentrado, 3 tabs
 * apiladas todas visibles, botones Firmar/Borrar en barra separada.
 *
 * V12.1c transforma .expanded-active en una card modal focal:
 *  - Solo la opción activa visible (otras tabs hidden en expanded)
 *  - Título "Dibujar firma" + subtítulo instructivo via ::after
 *  - Canvas en tamaño NATIVO 300×150 centrado en "frame" blanco
 *    con dashed border. NO se escala (escalarlo rompe coords del
 *    pdf_controller.js y produce trazos pixelados — ver prompt
 *    V12.1c para detalle del descarte).
 *  - Botones Firmar todo / Borrar unidos al card en footer propio
 *  - Card en ambos themes (white light / navy dark)
 *
 * Sin !important: specificity scoped a .expanded-active gana al
 * legacy. i18n del subtítulo diferido (locale es-CL fijo).
 * ============================================================ */

/* Centrar card en viewport (refuerza intent del scrim V12.1b) */
#signature-container.expanded-active {
  justify-content: center;
  align-items: center;
}

/* Card unificada: solo la opción activa visible, sin look de tabs */
#signature-container.expanded-active .choise-firma {
  max-width: 560px;
  width: min(560px, 92vw);
  padding: 28px 32px;
  margin: 0;
  flex-direction: column;
  gap: 0;
  border-radius: 12px 12px 0 0;
  background: #FFFFFF;
  box-sizing: border-box;
  align-items: stretch;
}
[data-theme="dark"] #signature-container.expanded-active .choise-firma {
  background: #1A1D3A;
  border: 1px solid rgba(245, 245, 251, 0.16);
  border-bottom: none;
}

/* Ocultar opciones no-seleccionadas (Escribir y Subir Imagen) */
#signature-container.expanded-active .choise-firma > li:not(.selected) {
  display: none;
}

/* Tab activa transformada en panel focal */
#signature-container.expanded-active .choise-firma > li.selected {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Ocultar el ícono fa-pen-fancy decorativo (redundante con el título) */
#signature-container.expanded-active .choise-firma > li.selected > i.fas.fa-pen-fancy {
  display: none;
}

/* El <a#draw-link> se convierte en TÍTULO de la card */
#signature-container.expanded-active .choise-firma > li.selected > a#draw-link {
  display: block;
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  padding: 0;
  text-align: left;
  text-decoration: none;
  pointer-events: none;
  color: var(--text-strong);
  width: auto;
  line-height: 1.3;
}

/* Subtítulo instructivo via ::after. Hardcoded — locale es-CL fijo */
#signature-container.expanded-active .choise-firma > li.selected > a#draw-link::after {
  content: "Dibuja con el mouse o el dedo dentro del área blanca";
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-default);
  margin-top: 4px;
  line-height: 1.4;
}

/* draw-box: contenedor centrado con padding ("frame" del canvas) */
#signature-container.expanded-active .draw-box {
  width: 100%;
  margin: 20px 0 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #FFFFFF;
  border-radius: 8px;
  padding: 32px 16px;
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.10);
  min-height: 220px;
  box-sizing: border-box;
}
[data-theme="dark"] #signature-container.expanded-active .draw-box {
  border: 1px solid rgba(245, 245, 251, 0.20);
}

/* Canvas en tamaño NATIVO 300×150 con dashed border ("área para firmar") */
#signature-container.expanded-active #signature-canvas.elementFirma {
  display: block;
  width: 300px;
  height: 150px;
  margin: 0;
  background: #FFFFFF;
  border: 1px dashed rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  flex: 0 0 auto;
}
[data-theme="dark"] #signature-container.expanded-active #signature-canvas.elementFirma {
  border: 1px dashed rgba(0, 0, 0, 0.25);
}

/* Footer con botones Firmar/Borrar: unido al card visualmente */
#signature-container.expanded-active #signature-controls {
  margin: 0;
  padding: 16px 32px 20px;
  width: min(560px, 92vw);
  max-width: 560px;
  background: #FFFFFF;
  border-radius: 0 0 12px 12px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
}
[data-theme="dark"] #signature-container.expanded-active #signature-controls {
  background: #1A1D3A;
  border: 1px solid rgba(245, 245, 251, 0.16);
  border-top: 1px solid rgba(245, 245, 251, 0.10);
}

/* Legibilidad botones dentro del card dark */
[data-theme="dark"] #signature-container.expanded-active #signature-controls .btn--secondary {
  color: #FFFFFF;
}
[data-theme="dark"] #signature-container.expanded-active #signature-controls .btn--outline {
  color: var(--text-strong);
  border-color: rgba(245, 245, 251, 0.32);
}

/* ============================================================
 * FIN V12.1c
 * ============================================================ */


/* ============================================================
 * V12.1c-bis — Fixes post-QA V12.1c
 * ============================================================
 * QA reveló 3 problemas tras V12.1c:
 *
 * 1. Scrim no cubre full viewport: legacy línea ~9863 declara
 *    height/width específicos que V12.1b/V12.1c no overrideaban
 *    (computed: height 750px en lugar de 100vh). Header/sidebar/
 *    footer seguían visibles atrás del modal.
 *
 * 2. Layout interno aparecía como 3 sub-cards desunidos en lugar
 *    de UN card unificado: V12.1c dio bg/border a .choise-firma
 *    y a #signature-controls por separado, pero .draw-box quedaba
 *    en medio sin pertenecer visualmente a ningún card. La
 *    estructura DOM real es: .choise-firma > li.selected > draw-box,
 *    con #signature-controls como HERMANO de .choise-firma.
 *
 * 3. Botón expand modo no-expanded sigue sin label visible —
 *    asimétrico con el "Cerrar" del modo expanded que SÍ tiene
 *    texto via ::after (V12.1b).
 *
 * Fix:
 * 1. height: 100vh / width: 100vw / top: 0 / left: 0 / margin: 0
 *    con !important para ganar al legacy.
 * 2. Mover bg/border del card al <li.selected> (cuerpo principal
 *    con título + draw-box nested adentro); .choise-firma queda
 *    transparente; .draw-box es zona interna semi-transparente,
 *    NO sub-card propio; #signature-controls como footer pegado.
 * 3. ::after content "Ampliar" al botón en modo no-expanded
 *    (clase .fa-expand), simétrico a "Cerrar" en .fa-compress.
 *
 * !important endémico (~25): necesario para ganar al legacy
 * nested CSS línea ~9863 con specificity competitiva (doctrina §1.3).
 * ============================================================ */

/* === FIX 1: scrim full viewport === */
#signature-container.expanded-active {
  height: 100vh !important;       /* override legacy height:750px */
  width: 100vw !important;
  top: 0 !important;
  left: 0 !important;
  margin: 0 !important;           /* override legacy margin: 0 0 25px */
  gap: 0 !important;
}

/* === FIX 2: layout interno unificado === */

/* .choise-firma transparente — el card visual lo da el <li.selected> */
#signature-container.expanded-active .choise-firma {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  height: auto !important;
}
[data-theme="dark"] #signature-container.expanded-active .choise-firma {
  background: transparent !important;
  border: none !important;
}

/* <li.selected> ES el card: header + draw-box nested adentro */
#signature-container.expanded-active .choise-firma > li.selected {
  background: #FFFFFF !important;
  border: 1px solid rgba(0, 0, 0, 0.10) !important;
  border-bottom: none !important;
  border-radius: 12px 12px 0 0 !important;
  padding: 24px 28px 24px !important;
  margin: 0 !important;
  list-style: none !important;
}
[data-theme="dark"] #signature-container.expanded-active .choise-firma > li.selected {
  background: #1A1D3A !important;
  border: 1px solid rgba(245, 245, 251, 0.16) !important;
  border-bottom: none !important;
}

/* .draw-box: zona interna del card, NO sub-card propio */
#signature-container.expanded-active .draw-box {
  margin: 16px 0 0 0 !important;
  background: #F8F8FC !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 8px !important;
  padding: 28px 16px !important;
  min-height: 220px !important;
}
[data-theme="dark"] #signature-container.expanded-active .draw-box {
  background: rgba(245, 245, 251, 0.04) !important;
  border: 1px solid rgba(245, 245, 251, 0.12) !important;
}

/* Canvas: tamaño NATIVO 300×150 — NO escalar (rompe coords del JS) */
#signature-container.expanded-active #signature-canvas.elementFirma {
  border: 1px dashed rgba(0, 0, 0, 0.25) !important;
}
[data-theme="dark"] #signature-container.expanded-active #signature-canvas.elementFirma {
  border: 1px dashed rgba(0, 0, 0, 0.35) !important;
}

/* #signature-controls = footer del card, pegado al <li.selected> */
#signature-container.expanded-active #signature-controls {
  background: #FFFFFF !important;
  border: 1px solid rgba(0, 0, 0, 0.10) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 0 0 12px 12px !important;
  width: min(560px, 92vw) !important;
  max-width: 560px !important;
  margin: 0 !important;
}
[data-theme="dark"] #signature-container.expanded-active #signature-controls {
  background: #1A1D3A !important;
  border: 1px solid rgba(245, 245, 251, 0.16) !important;
  border-top: 1px solid rgba(245, 245, 251, 0.10) !important;
}

/* Título: empate de specificity con legacy a.active scope */
#signature-container.expanded-active .choise-firma > li.selected > a#draw-link,
#signature-container.expanded-active .choise-firma > li.selected > a#draw-link.active {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #182E8A !important;
  margin: 0 !important;
}
[data-theme="dark"] #signature-container.expanded-active .choise-firma > li.selected > a#draw-link,
[data-theme="dark"] #signature-container.expanded-active .choise-firma > li.selected > a#draw-link.active {
  color: #F5F5FB !important;
}

/* === FIX 3: botón expand con label "Ampliar" simétrico a "Cerrar" === */

/* En modo NO-expanded el <i> tiene clase fa-expand.
   Mismo patrón ::after que V12.1b usa para "Cerrar" en .fa-compress */
.pdf-container .draw-box i#draw-expanded.fa-expand {
  width: auto !important;
  height: 36px !important;
  padding: 0 12px 0 10px !important;
  font-size: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.pdf-container .draw-box i#draw-expanded.fa-expand::after {
  content: "Ampliar";
  font-family: var(--font-display, "Plus Jakarta Sans"), sans-serif;
  font-weight: 600;
  font-size: 14px;
}

/* ============================================================
 * FIN V12.1c-bis
 * ============================================================ */


/* ============================================================
 * V12.1c-bis2 — Fixes residuales post-QA V12.1c-bis
 * ============================================================
 * QA reveló 3 problemas residuales con causas raíz identificadas
 * vía Chrome MCP:
 *
 * 1. Botón #draw-expanded (Cerrar/Ampliar) sigue display:block
 *    con icono+texto desalineados. Causa raíz: regla legacy
 *    bundle L.10138 ".show ~ i { display: block !important }"
 *    matchea el botón porque canvas#signature-canvas.elementFirma
 *    tiene clase .show y es sibling anterior del <i>. Pisa todos
 *    los display:inline-flex sin !important de V12.1b/c.
 *
 * 2. Modal duplicado .modal-mensaje.confirmar-firma del
 *    .folder-step (sin clase .modal-pdf-firma del wizard moderno)
 *    tiene transition:all sin !important. Reflows al quitar
 *    .expanded-active disparan animación parásita que muestra el
 *    modal brevemente abajo-izquierda del viewport (~300ms flash).
 *
 * 3. Layout interno del modal expanded muestra 3 sub-cards con
 *    gap visible entre header/draw-box/footer. Causa: V12.1c-bis
 *    dejó margin-top:16px en draw-box. Fix: eliminar margins,
 *    bordes laterales y radius del draw-box; usar border-top de
 *    1px como separador visual sutil sin crear sub-cards.
 *
 * !important endémico (~17): justificado por la regla legacy
 * L.10138 con !important y por el modal duplicado preexistente
 * con transition:all (doctrina §1.3).
 * ============================================================ */

/* === FIX 1: botón #draw-expanded display flex (gana al ".show ~ i") === */
/* Causa raíz: L.10138 ".show ~ i { display: block !important }" matchea
   porque canvas.elementFirma.show es sibling del botón. !important
   necesario para ganar.  */

/* Modo NO-expanded (clase .fa-expand) */
.pdf-container .draw-box i#draw-expanded.fa-expand {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

/* Modo expanded (clase .fa-compress + scope expanded) */
#signature-container.expanded-active i#draw-expanded,
#signature-container.expanded-active i#draw-expanded.fa-compress {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

/* === FIX 2: prevenir flash del modal duplicado del .folder-step === */
/* El modal .modal-mensaje.confirmar-firma (y .mensaje-firmado) que vive
   dentro de #signature-container.folder-step NO tiene clase
   .modal-pdf-firma (no es del wizard moderno). Tiene transition:all
   sin !important. Reflows al cierre del expanded lo animan brevemente.
   Fix: forzar transition:none + posición offscreen cuando NO .visible. */
#signature-container.folder-step .modal-mensaje.confirmar-firma:not(.visible),
#signature-container.folder-step .modal-mensaje.mensaje-firmado:not(.visible) {
  transition: none !important;
  left: -170% !important;
}

/* === FIX 3: unir las 3 secciones del modal expanded como UN card === */
/* V12.1c-bis dejó gap visual de 16px (margin-top) entre header y
   draw-box. Solución: eliminar margins, eliminar bordes laterales
   y radius del draw-box para fundirlo con el li.selected. Usar
   border-top adentro como separador visual sutil. */

/* li.selected (header card): padding-bottom 0, sin border-bottom */
#signature-container.expanded-active .choise-firma > li.selected {
  padding-bottom: 0 !important;
  border-bottom: none !important;
}

/* draw-box (zona de dibujo): pegada arriba al header, abajo al footer */
#signature-container.expanded-active .draw-box {
  margin: 0 !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-bottom: none !important;
  background: rgba(245, 245, 251, 0.5) !important;
}
[data-theme="dark"] #signature-container.expanded-active .draw-box {
  background: rgba(245, 245, 251, 0.03) !important;
  border-top: 1px solid rgba(245, 245, 251, 0.10) !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
}

/* signature-controls (footer): pegado al draw-box con border-top separador */
#signature-container.expanded-active #signature-controls {
  margin-top: 0 !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}
[data-theme="dark"] #signature-container.expanded-active #signature-controls {
  border-top: 1px solid rgba(245, 245, 251, 0.10) !important;
}

/* ============================================================
 * FIN V12.1c-bis2
 * ============================================================ */


/* ============================================================
 * V12.1c-bis3 — Fixes residuales post-QA V12.1c-bis2
 * ============================================================
 * QA reveló 2 problemas residuales con causas raíz confirmadas
 * vía Chrome MCP:
 *
 * 1. Botón "Ampliar" (.fa-expand) se mostraba flotando sobre el
 *    acordeón "Subir Imagen" cuando "Dibujar firma" NO estaba
 *    expandida. Causa: .draw-box es SIBLING de los <li> dentro
 *    de .choise-firma (no nested), entonces el botón siempre
 *    renderea independiente del li seleccionado. V12.1c-bis2 lo
 *    forzó display:inline-flex !important sin scope al canvas
 *    activo. Fix: ocultar el botón por defecto y mostrarlo solo
 *    cuando hay canvas.elementFirma.show sibling (el canvas
 *    recibe .show solo cuando "Dibujar firma" está activo).
 *
 * 2. Flash de fragmentos del modal al cerrar fullscreen.
 *    V12.1c-bis2 atacó al modal duplicado del .folder-step pero
 *    ese NO es visible nunca (parent display:none). La causa
 *    real es la transition:0.5s declarada en el propio container
 *    #signature-container.second-step / .expanded-active por CSS
 *    legacy. Al remover .expanded-active esas props animan
 *    durante 500ms mostrando el modal en posiciones intermedias
 *    semitransparentes. Fix: matar transitions del container.
 *
 * !important endémico (~8): necesario para ganar a reglas legacy
 * con !important (.show ~ i L.10138 y transition del container).
 * ============================================================ */

/* === FIX 1: botón "Ampliar" condicional al canvas activo === */

/* Base: botón OCULTO en modo no-expanded */
.pdf-container .draw-box i#draw-expanded.fa-expand {
  display: none !important;
}

/* Botón VISIBLE solo cuando canvas.elementFirma tiene .show
   (Dibujar firma activa). Mismo selector sibling-after que la
   regla legacy ".show ~ i" pero scopeado al botón específico. */
.pdf-container .draw-box .elementFirma.show ~ i#draw-expanded.fa-expand {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

/* === FIX 2: matar transition del container que causa el flash === */

/* El container second-step/firmaBasica-step tiene transition:0.5s
   declarada en CSS legacy. Al quitar .expanded-active esas props
   animan durante 500ms mostrando el modal en posiciones
   intermedias semitransparentes. */
#signature-container.second-step,
#signature-container.firmaBasica-step {
  transition: none !important;
}

/* Modales hijos NO visibles: matar transitions parásitas también.
   El selector :not(.visible) preserva transitions legítimas del
   flujo "Firmar todo → modal confirmación" que SÍ debe animarse
   cuando recibe la clase .visible. */
#signature-container.second-step .modal-mensaje:not(.visible),
#signature-container.firmaBasica-step .modal-mensaje:not(.visible) {
  transition: none !important;
}

/* ============================================================
 * FIN V12.1c-bis3
 * ============================================================ */


/* ============================================================
 * V12.1c-bis4 — Reubicación botones + canvas grande en expanded
 * ============================================================
 * QA reveló 3 problemas:
 *
 * 1. Botón "Ampliar" en modo no-expanded estaba absolute top:8
 *    right:8 dentro de .draw-box, posicionado SOBRE la esquina
 *    superior derecha del canvas blanco. Problemas: (a) baja
 *    visibilidad (cyan claro sobre blanco), (b) riesgo de click
 *    accidental al dibujar la firma hasta esa esquina.
 *    Fix: .draw-box a flex-direction:column con gap, botón
 *    static align-self:center → CENTRADO debajo del canvas.
 *
 * 2. Botón "Cerrar" en modo expanded estaba position:fixed
 *    anclado al viewport (esquina sup-der del browser),
 *    desconectado visualmente del modal.
 *    Fix: ancla al .choise-firma (card del modal) con
 *    position:absolute, queda en el header del card junto al
 *    título "Dibujar firma".
 *    Nota estructural: .draw-box es SIBLING de los <li> dentro
 *    de .choise-firma (no nested), por eso el ancla correcta es
 *    .choise-firma, NO <li.selected> (que no es ancestor del
 *    botón).
 *
 * 3. Canvas tenía mismo tamaño en sidebar y modal expanded
 *    (300×150 nativo), desaprovechando el fullscreen. Re-validado
 *    inline que pdf_controller.js usa getBoundingClientRect()
 *    para escalar coords del mouse al buffer interno — escalar
 *    canvas con CSS NO rompe funcionalidad (hipótesis previa
 *    V12.1c era incorrecta — ver doctrina §7.x propuesta).
 *    Fix: canvas a 600×280 (2x) + card ensanchada a 720px.
 *    Pixelado mínimo, aceptable.
 *
 * !important endémico (~15): override de V12.1b/V12.1c/V12.1c-bis*
 * que declararon position:fixed/absolute y max-width con !important.
 * ============================================================ */

/* === FIX 1: Botón "Ampliar" centrado debajo del canvas (modo NO-expanded) === */
/* Scope al .second-step:not(.expanded-active) y .firmaBasica-step
   para NO afectar al modal expanded (que necesita row+center). */

#signature-container.second-step:not(.expanded-active) .draw-box,
#signature-container.firmaBasica-step .draw-box {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
}

#signature-container.second-step:not(.expanded-active) .draw-box .elementFirma.show ~ i#draw-expanded.fa-expand,
#signature-container.firmaBasica-step .draw-box .elementFirma.show ~ i#draw-expanded.fa-expand {
  position: static !important;
  align-self: center !important;        /* centrado horizontal debajo del canvas */
  top: auto !important;
  right: auto !important;
}

/* === FIX 2: Botón "Cerrar" en el header del card del modal expanded === */
/* Ancla = .choise-firma (NO el <li.selected>): .draw-box es SIBLING
   de los <li>, no nested adentro — el botón está dentro de .draw-box
   que está dentro de .choise-firma. Por eso el containing block del
   position:absolute debe ser .choise-firma. Card ensanchada a 720px
   para acomodar canvas 2x. */

#signature-container.expanded-active .choise-firma {
  position: relative !important;
  max-width: 720px !important;
  width: min(720px, 92vw) !important;
}

#signature-container.expanded-active .choise-firma > li.selected {
  position: static !important;
}

#signature-container.expanded-active #signature-controls {
  max-width: 720px !important;
  width: min(720px, 92vw) !important;
}

#signature-container.expanded-active .draw-box {
  position: static !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
}

#signature-container.expanded-active i#draw-expanded,
#signature-container.expanded-active i#draw-expanded.fa-compress {
  position: absolute !important;
  top: 20px !important;
  right: 24px !important;
  left: auto !important;                /* override left calculado por absolute+right */
  transform: none !important;
  z-index: 10 !important;
}

/* === FIX 3: Canvas más grande en modo expanded (aprovecha fullscreen) === */
/* El canvas tiene buffer nativo width="300" height="150". Escalarlo
   visualmente a 600×280 con CSS funciona correctamente: el
   pdf_controller.js usa getBoundingClientRect() para escalar coords
   del mouse al buffer. Validado inline con MouseEvents reales
   (scale 2x, dibujo coincide con click). Pixelado mínimo. */

#signature-container.expanded-active #signature-canvas.elementFirma {
  width: 600px !important;
  height: 280px !important;
  max-width: 100% !important;
}

/* ============================================================
 * FIN V12.1c-bis4
 * ============================================================ */


/* ============================================================
 * V12.1c-bis5 — Fixes responsive del modal del canvas
 * ============================================================
 * QA responsive de V12.1c-bis4 reveló 2 problemas en mobile:
 *
 * 1. Canvas con width:600px !important sin clamp se desborda del
 *    card en mobile (375-414px viewports). El card SÍ se achica
 *    via min(720px, 92vw) (V12.1c-bis4) pero el canvas no.
 *    Overflow calculado: +311px iPhone SE, +275px iPhone Pro Max.
 *    Fix A: canvas responsive con aspect-ratio:600/280 +
 *    width:min(600px, 100%) + height:auto. Mantiene proporciones
 *    idénticas al desktop (aspect 2.14) achicándose con el card.
 *
 * 2. Botón "Cerrar" (92px ancho con icon+texto) se solapa con el
 *    subtítulo "Dibuja con el mouse..." en mobile cuando el card
 *    se achica y el subtítulo se rompe en 2 líneas. El botón cae
 *    sobre la última palabra.
 *    Fix B: en @media (max-width: 600px) [umbral corregido en
 *    V12.1c-bis6 desde 480px tras QA real en viewport 500px],
 *    convertir el botón en icon-only 40×40 (ocultar ::after
 *    content "Cerrar"). Más compacto, no solapa con el subtítulo.
 *
 * Trade-off documentado: buffer interno del canvas sigue siendo
 * 300×150 HTML (aspect 2.0). Visual 600/280 = 2.14. Distorsión
 * vertical ~7% al guardar. Aceptable vs tocar pdf_controller.js
 * (intocable por §1.2). El JS usa getBoundingClientRect() para
 * escalar coords del mouse, validado en V12.1c-bis4.
 *
 * !important endémico (~10): override de V12.1b/V12.1c-bis2/c-bis4.
 *
 * Limitación QA inline: Chrome MCP no permite cambiar viewport
 * real (window.resizeTo bloqueado). Fix A validado simulando card
 * a 345/381px restringiendo .choise-firma width. Fix B requiere
 * QA en mobile real (Chrome DevTools device emulation o device
 * físico) porque @media (max-width: 480px) usa viewport REAL.
 * ============================================================ */

/* === FIX A: Canvas responsive en modo expanded === */
/* Mantiene proporciones idénticas al desktop (aspect 600/280 = 2.14)
   achicándose junto con el card en mobile. Buffer interno del canvas
   sigue siendo 300×150 — pdf_controller.js escala coords del mouse
   via getBoundingClientRect() (validado en V12.1c-bis4). */
#signature-container.expanded-active #signature-canvas.elementFirma {
  width: min(600px, 100%) !important;
  height: auto !important;
  aspect-ratio: 600 / 280 !important;
  max-width: 100% !important;
}

/* === FIX B: Botón "Cerrar" icon-only en mobile === */
/* En viewports <= 480px, ocultar el label "Cerrar" del ::after y
   reducir el botón a 40×40 cuadrado para no solapar con el subtítulo
   que se rompe en 2 líneas al achicarse el card. */
@media (max-width: 600px) {  /* umbral corregido en V12.1c-bis6 desde 480px */
  #signature-container.expanded-active i#draw-expanded::after,
  #signature-container.expanded-active i#draw-expanded.fa-compress::after {
    display: none !important;
  }
  #signature-container.expanded-active i#draw-expanded,
  #signature-container.expanded-active i#draw-expanded.fa-compress {
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    gap: 0 !important;
  }
}

/* ============================================================
 * FIN V12.1c-bis5
 * ============================================================ */


/* ============================================================
 * V12.1c-bis6 — Canvas centrado en sidebar (modo no-expanded)
 *               + ajuste breakpoint icon-only en V12.1c-bis5
 * ============================================================
 * QA responsive real (Chrome DevTools 500×750) sobre V12.1c-bis5
 * reveló 2 issues:
 *
 * 1. Canvas del sidebar (modo no-expanded) visualmente
 *    descentrado a la izquierda. Causa raíz: canvas tiene
 *    "margin: 7px 0 0 17px" hardcodeado en CSS legacy
 *    (margin-left:17px). V12.1c-bis4 puso flex-direction:column
 *    en .draw-box con align-items:stretch — los items con width
 *    fijo (canvas 300px) NO se estiran y caen alineados a
 *    flex-start. El margin-left:17 los empuja más a la izquierda.
 *    En desktop (sidebar ~410px) descentrado ~50px, poco notorio.
 *    En mobile (sidebar ~456px): marginLeft=17px vs marginRight=
 *    139px → desbalance evidente.
 *    Fix A: en modo no-expanded, align-self:center +
 *    margin-left/right:0 override del legacy → canvas centrado
 *    matemático (diff 0px).
 *
 * 2. Botón "Cerrar" del modal expanded se solapa con el final
 *    del subtítulo en viewport 500px. V12.1c-bis5 puso icon-only
 *    en @media (max-width: 480px) pero el problema empieza antes.
 *    Cálculo correcto: viewport ≤600px donde card_width - 116px
 *    botón < ~400px subtítulo.
 *    Fix B: actualizar @media de V12.1c-bis5 in-place
 *    (480px → 600px). Cambio NO duplicado aquí — modificado en su
 *    definición original para evitar override redundante, con
 *    comentario inline trazando el ajuste. Ver bloque V12.1c-bis5.
 *
 * !important endémico (~5): override de margin legacy del canvas.
 * ============================================================ */

/* === FIX A: Canvas centrado en sidebar (modo NO-expanded) === */
/* align-self:center centra en cross-axis del flex-column.
   margin-left/right:0 anula el legacy "margin: 7px 0 0 17px". */
#signature-container.second-step:not(.expanded-active) .draw-box .elementFirma,
#signature-container.firmaBasica-step .draw-box .elementFirma {
  align-self: center !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* === FIX B: ver V12.1c-bis5 (modificado in-place 480 → 600px) === */

/* ============================================================
 * FIN V12.1c-bis6
 * ============================================================ */
/*
 * auth.css — Login y Registro
 * FirmaYa / zappb
 *
 * Cubre: .containerHeader-login, .containerHeader-registro,
 *        .bodyFirma:has(#container-registro), div#container-registro
 *        (todos los estados y pasos), #auth_modal
 *
 * EXTRAÍDO DESDE application.css
 */

.containerHeader-login , .containerHeader-registro{
    #volverInicio {
        width: 65%;
        height: -webkit-fill-available;
        a{
            height: -webkit-fill-available;
        }
    }
    .section-noRegistrado{
        align-items: center;
        margin-left: 7vw;
    }
}
.bodyFirma:has(#container-registro){
    display: flex;
    flex-direction: column;
}

div#container-registro {
    display: flex;
    align-items: flex-start;
    width: 100%;
    margin-top: 60px;
    margin-bottom: 20px;
    padding: 0;
    justify-content: space-evenly;
    div#texto-registro {
        display: flex;
        flex-direction: column;
        .registroTexto, .confirmacionTexto{
            margin-top: 0px;
            margin-bottom: 11px;
        }
        .spanRegistro, .datosTexto, .spanConfirmacion {
            color: #51517D;
            font-size: 16px;
            max-width: 300px;
        }
        .spanLogin{
            max-width: 290px;
        }
    }
    div#datos-registro, #ingresaDatos-registro, #confirma-registro {
        display: flex;
        width: 40vw;
        align-items: center;
        padding: 30px 0px;
        justify-content: space-between;
        margin-top: 0;
        div{
            .askLoginSection{
                font-size: 16px;
                margin-top: 20px;
                color: #162F85;
            }
            label{
                color: #8A8AB1;
                font-weight: 600;
                margin: 22px 0px 7px;
            }
            .label-verificacion{
                text-align: left;
            }
            /*span {
                padding: 6px;
                font-size: 12px;
                max-width: 300px;
                color: #49B7D2;
                font-weight: 400;
            }*/
            label:first-of-type{
                margin-top: 0px;
            }
        }
        .container-btns{
            display: flex;
            justify-content: space-between;
            width: 100%;
            margin-top: 25px;
            .loginSection{
                text-decoration: none;
                background: none;
                border: 2px solid #00bad4;
                color: #00bad4;
                box-shadow: none;
                margin-top: auto;
            }
        }
        .container-btns.registro-email{
            justify-content: flex-end;
        }
        .btns-recuperar, 
        .registro-email{
            margin-top: 50px;
        }
        form {
            display: flex;
            flex-direction: column;
            width: 80%;
            align-items: flex-end;
            height: auto;
            justify-content: space-between;
            label{
                font-size: 16px;
            }
        }
        .social-login-container {
            text-align: center;
            width: 80%;
            margin-top: 0;
            gap: 15px;
            display: flex;
            flex-direction: column;
            .google-login-button {
                width: -webkit-fill-available; 
                padding: 0px 15px;
                background-color: #fff;
                border: 1px solid #ddd;
                box-shadow: 0 1px 1px rgba(0,0,0,0.1);
                .google-icon, .twitter-icon, .facebook-icon, .outlook-icon {
                    height: 20px;
                }
                .facebook-icon{
                    height: 33px;
                }
                span.text-google{
                    font-size: 16px;
                    color: #8A8AB1;
                    font-weight: 400;
                    padding-left: 6px;
                }
            }
            .google-login-button:hover {
                background-color: #f5f5f5;
            }
            p{
                font-size: 16px;
                color: #8A8AB1;
                font-weight: 400;
            }
        }
        .form-content{
            display: flex;
            flex-direction: column;
            width: 100%;
            margin: auto;
            input{
                padding: 10px;
                border: 1px solid #E0E0EC;
                border-radius: 14px;
                height: 40px;
                position: relative;
                width: -webkit-fill-available;
                font-size: 14px;
            }
            label{
                font-size: 16px;
            }
            .container-inputRegistro{
                display: flex;
                align-items: center;
                justify-content: center;
                .otp-container {
                    flex-direction: row;
                    justify-content: space-between;
                    width: 100%;
                    input.otp-box {
                        max-width: 55px;
                        min-height: 54px;
                        caret-color: #8E8694;
                        color: #8E8694;
                        font-size: 25px;
                        text-align: center;
                    }
                    .otp-box:focus {
                        border-color: #8E8694;
                        outline: none;
                    }
                }
               
                .input-error{
                    border-color: #DB0632;
                }
                .icon-inside-input{
                    display: none;
                    position: absolute;
                    right: 19vw;
                    color: #DB0632;
                }
                .input-error ~ .icon-inside-input{
                    display: flex;
                }
                .icon-toggle-password,
                .icon-toggle-confirm-password{
                    color: #8E8694;
                }
            }
       
            .container-inputRegistro:has(.icon-toggle-password), .container-inputRegistro:has(.icon-toggle-confirm-password){
                border: 1px solid #E0E0EC;
                padding-right: 5px;
                border-radius: 14px;
                flex-direction: row;
                width: 100%;
                .password-input, .confirm-password-input{
                    border:none;
                }
                .password-input::-ms-reveal,
                .password-input::-ms-clear,
                .confirm-password-input::-ms-reveal,
                .confirm-password-input::-ms-clear {
                    display: none;
                }
                .password-input::-webkit-credentials-auto-fill-button,
                .confirm-password-input::-webkit-credentials-auto-fill-button {
                    display: none !important;
                }
            }
        }
        
        .btn-new-password{
            margin-top: 25px;
        }
        input.btn-continuarRegistro, .btn-omitir-registrarse {
            width: auto;
            min-width: 190px;
            margin-top: 25px;
        }
        .spanRegistro{
            color: #8A8AB1;
            font-weight: 600;
        }
    }
    #confirma-registro{
        .form-content{
            text-align: center;
            .span-confirmation-register{
                margin: auto;
                margin-bottom: 20px;
            }
            span{
                max-width: max-content;
            }
        }
        .otp-invitation{
            .otp-box{
                border: 1px solid #E3E2E6;
                caret-color: #8E8694;
                max-width: 15%;
                text-align: center;
                min-height: 54px;
                font-size: 25px;
                color: #162F85;
            }
            .otp-box:focus {
                border-color: #8E8694;
                outline: none;
            }
            label:first-of-type, .span-confirmation-signer {
                color: #162F85;
            }
            .span-confirmation-signer {
                font-weight: 400;
                font-size: 14px;
                max-width: 70%;
                margin: auto;
                span{
                    font-size: 14px;
                    color:#162F85;
                }
            }
        }
        .btn-reenviar{
            color:#49B7D2;
            font-weight: bold;
        }
    }
    button{
        width: 158px;
    }
}

.password-requirements{
    display: none;
    background: #e1d7d7;
    position: absolute;
    z-index: 1;            
    border-radius: 6px;
    width: auto;
    padding: 12px 25px 12px 8px;
    color: #FFFFFF;
    p{
        margin: 0 !important;
        margin-bottom: 2px !important;
        justify-content: flex-start !important;

        .fa-check-circle, .fa-times-circle{
            font-size: 16px;
            margin-right: 5px;
        }
        span{
            color: #5c5858c7;
            font-weight: 400;
            font-size: 14px;
        }
    }
}
.error-message{
    color: #DB0632;
    font-size: 12px;
    font-weight: 600;
    padding-left: 12px;
}

#auth_modal{
    div#container-registro{
        margin-top: 0;
    }
}
div#container-registro.container-verificacion{
    .btn-continuarRegistro{
        margin: auto;
        margin-top: 30px;
    }
    .container-link-reenviar{
        span{
            display: flex;
            font-size: 14px !important;
            flex-direction: column;
            align-items: center;
            a.loginSection, a.loginSection:hover {
                border: none;
                box-shadow: none !important;
                color: #49B7D2;
                background: none;
                font-size: 14px;
                height: auto;
            }
        }
    }
    #datos-registro{
        width: 100%;
        padding: 30px 90px;
        form{
            width: 100%;
            .otp-container {
                gap: 16px;
            }
        }
    }
  
}
div#container-registro:has(.container-email), div#container-registro:has(.formulario-registro){
    .texto-confirmacion{
        display: none !important;
    }
}
div#container-registro:has(.container-confirmacion){
    .texto-email{
        display: none !important;
    }
}

 

/*
 * views/auth_modern.css — Layout moderno para flujos de autenticación
 * FirmaYa / zappb
 *
 * Usado por vistas de password_reset (y candidatas: signin modal, sign_up).
 * Coexiste con views/auth.css legacy — las vistas modernas usan la clase
 * `.auth-shell`, las vistas legacy siguen usando `#container-registro`.
 */

.auth-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: calc(100vh - 70px);
  padding: var(--space-8) var(--space-4);
 /* background: var(--surface-app);*/
  font-family: var(--font-family-base);
}

.auth-shell__card {
  width: 100%;
  max-width: 460px;
  background: var(--surface-raised);
  border-radius: var(--radius-xl);
  box-shadow: var(--elevation-2);
  padding: var(--space-8) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.auth-shell__header {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.auth-shell__title {
  margin: 0;
  color: var(--text-brand);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-snug);
}

.auth-shell__subtitle {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

.auth-shell__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.auth-shell__actions .btn { width: 100%; }

.auth-shell__footer {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: var(--space-2);
}

.auth-shell__footer a {
  color: var(--text-link);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}
.auth-shell__footer a:hover { text-decoration: underline; }
.auth-shell__footer a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }


/* ============================================================
   Variantes y utilitarios de auth-shell
   ============================================================ */

/* Compacta — para modales dentro de turbo-frame (sin relleno superior extra) */
.auth-shell--compact {
  padding: var(--space-4);
  min-height: auto;
}

/* OAuth container — grupo de botones sociales */
.auth-shell__oauth {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Divisor "o continúa con correo" con líneas laterales */
.auth-shell__divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin: var(--space-2) 0;
  text-transform: none;
  letter-spacing: var(--tracking-snug);
}

.auth-shell__divider-line {
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
  display: block;
}

.auth-shell__divider-text {
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--text-muted);
}

/* Meta (fila con links dentro de form: "¿olvidaste contraseña?") */
.auth-shell__meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: calc(var(--space-2) * -1);
  margin-bottom: var(--space-2);
}

/* Link standalone (olvidaste contraseña, etc) */
.auth-shell__link {
  color: var(--text-link);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}
.auth-shell__link:hover { text-decoration: underline; }
.auth-shell__link:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }


/* Card ancho (para step 2 con más campos) */
.auth-shell__card--wide {
  max-width: 560px;
}

/* Actions horizontales (para wizard con Back + Next) */
.auth-shell__actions--horizontal {
  flex-direction: row;
  justify-content: space-between;
  gap: var(--space-3);
}
.auth-shell__actions--horizontal .btn {
  flex: 1;
  min-width: 0;
}

/* Bug 5 fix — button_to genera un <form class="button_to"> wrapper
   alrededor del <button>. Sin flex:1 en el form, el botón "Atrás"
   no se estira. También reseteamos el borde del form wrapper y
   forzamos que el botón interno herede el ancho. */
.auth-shell__actions--horizontal form.button_to,
.auth-shell__actions--horizontal form {
  flex: 1;
  min-width: 0;
  display: contents; /* el form no genera box, el button hereda flex */
}


/* ============================================================
   FORM-FIELD — extensiones para wizard de registro
   ============================================================ */

/* Row de campos lado a lado (nombre + apellido) */
.form-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.form-field-row .form-field { margin-bottom: var(--space-4); }

@media (max-width: 480px) {
  .form-field-row { grid-template-columns: 1fr; gap: 0; }
}

/* Input con ícono al final (ej. toggle password visibility) */
.form-field__input--with-trailing { padding-right: calc(var(--space-4) + var(--space-5)); }

/* Botón toggle dentro del input */
.form-field__toggle {
  position: absolute;
  right: var(--space-3);
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.form-field__toggle:hover { color: var(--text-strong); }
.form-field__toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }


/* ============================================================
   PASSWORD REQUIREMENTS — versión moderna
   ============================================================
   IDs preservados (#check-length, #length, etc.) para JS vanilla existente.
   ============================================================ */

@keyframes requirements-in {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes requirements-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(10px); }
}

/* En móvil el panel aparece debajo, animación vertical */
@keyframes requirements-in-below {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes requirements-out-below {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-6px); }
}

.password-requirements,
#password-requirements {
  display: none;
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-default);
  position: absolute;
  right: calc(100% + var(--space-2));
  top: 0;
  width: 220px;
  z-index: 10;
  box-shadow: var(--elevation-1);
  animation: requirements-in var(--duration-base) var(--ease-out);
}

.password-requirements--leaving,
#password-requirements.password-requirements--leaving {
  animation: requirements-out var(--duration-base) var(--ease-out) forwards;
}

/* CSS fallback: mostrar cuando el campo tiene foco (JS también lo controla) */
.form-field:focus-within .password-requirements,
.form-field:focus-within #password-requirements {
  display: block;
}

/* En móvil el panel va debajo del input para no salirse de pantalla */
@media (max-width: 640px) {
  .password-requirements,
  #password-requirements {
    position: absolute;
    right: auto;
    left: 0;
    top: calc(100% + var(--space-1));
    width: 100%;
    animation-name: requirements-in-below;
  }

  .password-requirements--leaving,
  #password-requirements.password-requirements--leaving {
    animation-name: requirements-out-below;
  }
}

.password-requirements p {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 2px 0;
  line-height: var(--leading-snug);
}

.password-requirements i {
  width: 14px;
  flex-shrink: 0;
  color: var(--neutral-400);
  font-size: var(--text-sm);
}

.password-requirements .invalid { color: var(--text-muted); }

/* Clase aplicada por JS cuando se cumple el requisito */
.password-requirements .valid,
.password-requirements span.valid {
  color: var(--success-700);
}
.password-requirements .valid ~ i,
.password-requirements p:has(.valid) i { color: var(--success-500); }


/* ============================================================
   PROGRESS STEPS — indicador de pasos en wizards (auth y otros)
   ============================================================ */

.progress-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: 0 auto var(--space-3);
  max-width: 100%;
}

.progress-steps__step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.progress-steps__dot {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--neutral-200);
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  transition: background var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
}

.progress-steps__label {
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.progress-steps__bar {
  flex: 1;
  height: 2px;
  background: var(--neutral-200);
  border-radius: var(--radius-round);
  min-width: 24px;
  max-width: 48px;
}

/* Estado: paso actual */
.progress-steps__step--current .progress-steps__dot {
  background: var(--brand-cyan-500);
  color: var(--text-on-brand);
  box-shadow: 0 0 0 4px var(--brand-cyan-100);
}
.progress-steps__step--current .progress-steps__label {
  color: var(--text-brand);
}

/* Estado: paso completado */
.progress-steps__step--done .progress-steps__dot {
  background: var(--success-500);
  color: var(--text-on-brand);
}
.progress-steps__step--done .progress-steps__label {
  color: var(--text-default);
}
.progress-steps__step--done + .progress-steps__bar {
  background: var(--success-500);
}

@media (max-width: 480px) {
  .progress-steps__label { display: none; }
}


/* Contenedor del progress en el wizard de firma */
.sign-wizard-header {
  padding: var(--space-6) var(--space-4) var(--space-4);
  background: transparent;
  display: flex;
  justify-content: center;
}


/* ============================================================
   OTP — versión moderna alineada a tokens (sobreescribe defaults
   del legacy .otp-container para que se vea consistente en auth-shell)
   ============================================================ */

.auth-shell .otp-container {
  gap: var(--space-2);
  justify-content: center;
}

.auth-shell .otp-container .otp-box {
  max-width: 48px;
  width: 48px;
  min-height: 56px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: var(--text-2xl);
  color: var(--text-strong);
  text-align: center;
  background: var(--surface-raised);
  font-weight: var(--font-weight-semibold);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.auth-shell .otp-container .otp-box:focus-visible {
  outline: none;
  border-color: var(--brand-cyan-500);
  box-shadow: 0 0 0 3px rgba(0, 186, 212, 0.2);
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 480px) {
  .auth-shell {
    padding: var(--space-4);
  }
  .auth-shell__card {
    padding: var(--space-6) var(--space-5);
    box-shadow: none;
    border: 1px solid var(--border-subtle);
  }
  .auth-shell__title {
    font-size: var(--text-xl);
  }
}
/*
 * views/auth_split.css — Layout split-screen para páginas de autenticación
 * FirmaYa / zappb (segunda ronda de modernización UI)
 *
 * USO: partial app/views/shared/_auth_split.html.erb
 *
 * Estructura:
 *   .auth-split
 *     .auth-split__brand   (lado izquierdo 50% — gradiente + logo + tagline + quote)
 *       .auth-split__brand-bg     (mesh + patrón)
 *       .auth-split__brand-content
 *     .auth-split__form    (lado derecho 50% — card con el form)
 *       .auth-split__form-inner  (max-width ~440px, centrado)
 *
 * En móvil (<900px): colapsa a una sola columna con el form ocupando 100%,
 * y el logo/tagline se muestra como header compacto arriba.
 *
 * Coexiste con auth_modern.css: las clases de ese archivo (.auth-shell,
 * .auth-shell__card, etc.) se reutilizan como "form interno" dentro de
 * .auth-split__form-inner — así los partials modernos (_progress_steps,
 * form-field, btn--primary) siguen sirviendo.
 */


/* ============================================================
   CONTENEDOR — layout 2 columnas (desktop)
   ============================================================ */

.auth-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--surface-raised);
  font-family: var(--font-family-base);
  color: var(--text-strong);
  overflow-x: hidden;
}

/* ============================================================
   PANEL IZQUIERDO — branding
   ============================================================ */

.auth-split__brand {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(32px, 5vw, 72px);
  color: var(--text-on-brand);
  overflow: hidden;
  isolation: isolate;
}

/* Capa de fondo: gradiente mesh + patrón SVG */
.auth-split__brand-bg {
  position: absolute;
  inset: 0;
  z-index: -2;

  /* Gradiente base (navy profundo → navy → navy-800) */
  background:
    radial-gradient(circle at 18% 22%, rgba(0, 186, 212, 0.35) 0%, transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(73, 183, 210, 0.28) 0%, transparent 45%),
    radial-gradient(circle at 50% 110%, rgba(22, 45, 133, 0.9) 0%, transparent 55%),
    linear-gradient(145deg, var(--brand-navy-900) 0%, var(--brand-navy-800) 45%, #0E1C5C 100%);
}

/* Patrón geométrico sutil (grid de puntos SVG) sobre el mesh */
.auth-split__brand-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'><circle cx='30' cy='30' r='1.2' fill='%23ffffff' fill-opacity='0.10'/></svg>");
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at 30% 40%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000 0%, transparent 72%);
  pointer-events: none;
}

/* Glow suave — aura cyan flotante */
.auth-split__brand-bg::after {
  content: "";
  position: absolute;
  top: -120px;
  right: -140px;
  width: 440px;
  height: 440px;
  background: radial-gradient(circle, rgba(0, 186, 212, 0.35) 0%, transparent 65%);
  filter: blur(30px);
  z-index: -1;
  pointer-events: none;
}

/* Contenido del panel izquierdo */
.auth-split__brand-top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  z-index: 1;
}

.auth-split__brand-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: inherit;
  text-decoration: none;
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-extra);
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-snug);
}

.auth-split__brand-logo img,
.auth-split__brand-logo-img {
  height: 36px;
  width: auto;
  display: block;
  /* El logo original es a color — se fuerza a blanco con filtro sobre el panel navy */
  filter: brightness(0) invert(1);
}

.auth-split__brand-logo:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-sm);
}

.auth-split__brand-middle {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-5);
  max-width: 520px;
  z-index: 1;
}

.auth-split__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--brand-cyan-200);
  width: fit-content;
}

.auth-split__eyebrow::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-round);
  background: var(--brand-cyan-300);
  box-shadow: 0 0 0 4px rgba(102, 217, 245, 0.15);
}

.auth-split__hero-title {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: clamp(32px, 4.5vw, var(--text-display-2xl));
  font-weight: var(--font-weight-extra);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: #fff;
}

.auth-split__hero-title em {
  font-style: normal;
  background: linear-gradient(90deg, var(--brand-cyan-300) 0%, #A7F3FF 60%, #fff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.auth-split__hero-subtitle {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: var(--leading-relaxed);
  max-width: 440px;
}

/* Feature list con checks — debajo del hero */
.auth-split__features {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.auth-split__features li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--text-md);
  font-weight: var(--font-weight-medium);
}

.auth-split__features li::before {
  content: "";
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-round);
  background: rgba(0, 186, 212, 0.25);
  border: 1px solid rgba(102, 217, 245, 0.55);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2366D9F5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
}

/* Trust badges — acreditación + seguridad */
.auth-split__trust {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.auth-split__trust-label {
  font-size: var(--text-xs, 11px);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 var(--space-3) 0;
}

.auth-split__trust-badges {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.auth-split__trust-badge {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(102, 217, 245, 0.22);
  border-radius: var(--radius-md);
  backdrop-filter: blur(6px);
  transition: background var(--transition-base);
}

.auth-split__trust-badge:hover {
  background: rgba(255, 255, 255, 0.10);
}

.auth-split__trust-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--brand-cyan-200, #A7E9F5);
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.auth-split__trust-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  flex: 1;
}

.auth-split__trust-text strong {
  font-size: var(--text-sm);
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: var(--tracking-snug);
}

.auth-split__trust-sub {
  font-size: var(--text-xs, 11px);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 2px;
}

@media (max-width: 900px) {
  .auth-split__trust { display: none; }
}

/* Métricas agregadas — fondo del panel brand */
.auth-split__metrics {
  margin-top: auto;
  padding-top: var(--space-6);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.auth-split__metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.auth-split__metric-value {
  font-family: var(--font-family-display);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  color: #FFFFFF;
  line-height: 1.1;
}

.auth-split__metric-label {
  font-size: var(--text-xs, 11px);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.3;
}

@media (max-width: 900px) {
  .auth-split__metrics { display: none; }
}

/* Testimonial/quote opcional en la parte inferior del brand */
.auth-split__quote {
  margin: 0;
  padding: var(--space-5) var(--space-6);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius-xl);
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  max-width: 520px;
  z-index: 1;
}

.auth-split__quote-text {
  margin: 0 0 var(--space-3) 0;
  font-weight: var(--font-weight-medium);
}

.auth-split__quote-author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.7);
}

.auth-split__quote-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-round);
  background: linear-gradient(135deg, var(--brand-cyan-400), var(--brand-navy-500));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: var(--font-weight-bold);
  font-size: var(--text-sm);
  flex-shrink: 0;
}

.auth-split__quote-name {
  font-weight: var(--font-weight-semibold);
  color: #fff;
}


/* ============================================================
   PANEL DERECHO — formulario
   ============================================================ */

.auth-split__form {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--neutral-50, #F8F8FC);
}

/* Header superior del panel form (solo desktop: link/utility) */
.auth-split__form-top {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5) clamp(24px, 4vw, 56px);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.auth-split__form-top a {
  color: var(--text-brand);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  margin-left: var(--space-2);
}

.auth-split__form-top a:hover { text-decoration: underline; }
.auth-split__form-top a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

.auth-split__form-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: var(--space-6) clamp(24px, 5vw, 32px) var(--space-10);
}

.auth-split__form-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  align-items: center;
}

.auth-split__form-title {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: clamp(26px, 2.5vw, var(--text-display-md));
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--text-strong);
}

.auth-split__form-subtitle {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}

/* Logo compacto — solo visible en móvil */
.auth-split__form-mobile-logo {
  display: none;
}

/* Footer del panel del form (copyright, links) */
.auth-split__form-foot {
  padding: var(--space-4) clamp(24px, 4vw, 56px);
  font-size: var(--text-sm);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.auth-split__form-foot a {
  color: inherit;
  text-decoration: none;
}

.auth-split__form-foot a:hover { color: var(--text-brand); text-decoration: underline; }


/* ============================================================
   OVERRIDES del form dentro del split
   ============================================================
   Las vistas usan los mismos partials modernos (form-field, btn,
   progress-steps). Acá ajustamos lo que necesita más aire o
   cambios al estar dentro del split.
   ============================================================ */

.auth-split .form-field { margin-bottom: var(--space-4); }

.auth-split .form-field__input,
.auth-split .form-field__input--with-icon {
  border-radius: var(--radius-md);
  font-size: var(--text-md);
  height: 48px;
  padding-top: 0;
  padding-bottom: 0;
}

.auth-split .form-field__label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-strong);
  letter-spacing: var(--tracking-normal);
}

/* CTA principal en auth-split: navy sólido con acento cyan en hover/focus
   para recuperar identidad visual sin romper la unificación global de V5.2. */
.auth-split .btn--primary {
  background: var(--brand-navy-800);
  color: #fff;
  border: none;
  height: 48px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-snug);
  border-radius: var(--radius-md);
  position: relative;
  box-shadow: 0 1px 2px rgba(24, 46, 138, 0.15);
  transition:
    background var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base);
}

.auth-split .btn--primary:hover {
  background: var(--brand-navy-700, #1F3AA1);
  box-shadow:
    0 4px 12px rgba(24, 46, 138, 0.25),
    0 0 0 3px rgba(0, 186, 212, 0.18);
}

.auth-split .btn--primary:active {
  transform: translateY(1px);
  box-shadow:
    0 1px 2px rgba(24, 46, 138, 0.2),
    0 0 0 3px rgba(0, 186, 212, 0.25);
}

.auth-split .btn--primary:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px #FFFFFF,
    0 0 0 4px var(--brand-cyan-500),
    0 4px 12px rgba(24, 46, 138, 0.25);
}

/* Botón OAuth (Google) */
.auth-split .btn--oauth {
  height: 48px;
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  color: var(--text-strong);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.auth-split .btn--oauth:hover {
  border-color: var(--brand-cyan-400);
  box-shadow: 0 2px 6px rgba(15, 18, 35, 0.06);
  transform: translateY(-1px);
}

/* Botón outline "Atrás" / "Volver" */
.auth-split .btn--outline {
  height: 48px;
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-semibold);
}

/* Botón ghost "Volver al login" */
.auth-split .btn--ghost {
  height: 48px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
}
.auth-split .btn--ghost:hover {
  color: var(--text-brand);
  background: var(--neutral-50);
}

/* Divider "o continúa con correo" */
.auth-split .auth-shell__divider {
  margin: var(--space-4) 0;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-snug);
}

/* Auth-shell wrapper: neutralizamos paddings/shadows porque ya somos
   el contenedor (no queremos otra card dentro) */
.auth-split .auth-shell,
.auth-split .auth-shell--compact {
  min-height: auto;
  padding: 0;
  background: transparent;
}

.auth-split .auth-shell__card {
  padding: 0;
  background: transparent;
  box-shadow: none;
  border: none;
  max-width: none;
  gap: var(--space-4);
}

.auth-split .auth-shell__header {
  display: none;  /* el título va en auth-split__form-header */
}

/* Progress steps — aire arriba */
.auth-split .progress-steps {
  margin-bottom: var(--space-6);
}


/* ============================================================
   RESPONSIVE
   ============================================================
   Desktop:           grid 2 cols (>=900px)
   Tablet laptop:     grid 2 cols con ajustes (900-1024px)
   Móvil / tablet:    1 col, brand colapsado a header compacto
   ============================================================ */

@media (max-width: 1400px) {
  .auth-split__brand {
    padding: clamp(28px, 4vw, 56px);
  }
  .auth-split__hero-title { font-size: clamp(30px, 3.8vw, 44px); }
}

/* <900px: colapsar a 1 columna */
@media (max-width: 900px) {
  .auth-split {
    grid-template-columns: 1fr;
    min-height: 100dvh;
  }

  /* Ocultar panel brand en móvil (logo se muestra compacto dentro del form) */
  .auth-split__brand {
    display: none;
  }

  /* Logo compacto en el form, solo móvil */
  .auth-split__form-mobile-logo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
    background: var(--surface-raised);
  }

  .auth-split__form-mobile-logo img {
    height: 32px;
    width: auto;
    /* El SVG del logo tiene "Firma" en fill:white y "Ya" en fill:cyan.
       Sobre fondo blanco, "Firma" es invisible (blanco sobre blanco).
       invert(1) convierte blanco→negro y cyan→naranja complementario,
       luego hue-rotate(180deg) rota el naranja de vuelta a cyan,
       y el negro (de las letras "Firma") queda negro = legible.
       Resultado: "Firma" en negro, "Ya" en ~cyan. */
    filter: invert(1) hue-rotate(180deg);
  }

  .auth-split__form-mobile-logo-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
  }

  .auth-split__form-mobile-logo-link:hover { color: var(--text-brand); }

  .auth-split__form-top {
    display: none;  /* reemplazado por el logo-mobile */
  }

  .auth-split__form-inner {
    padding: var(--space-8) var(--space-5) var(--space-10);
    max-width: 440px;
  }

  .auth-split__form-title {
    font-size: clamp(22px, 5vw, 28px);
  }
}

/* Mobile pequeño — ajustes finos */
@media (max-width: 480px) {
  .auth-split__form-inner {
    padding: var(--space-6) var(--space-4) var(--space-10);
  }
  .auth-split .form-field__input,
  .auth-split .form-field__input--with-icon {
    height: 44px;
  }
  .auth-split .btn--primary,
  .auth-split .btn--oauth,
  .auth-split .btn--ghost {
    height: 44px;
  }

  /* Bug fix 1 — Logo cortado en header móvil auth.
     A 480px el logo SVG se recorta (solo se ve "Ya") porque el
     container es justify-content:space-between y el link "Volver"
     empuja el logo. Forzamos min-width al logo y permitimos que
     el link se comprima. */
  .auth-split__form-mobile-logo {
    padding: var(--space-3) var(--space-4);
    gap: var(--space-3);
  }
  .auth-split__form-mobile-logo img {
    height: 28px;
    min-width: 120px;
    width: auto;
    object-fit: contain;
    object-position: left center;
  }
  .auth-split__form-mobile-logo-brand {
    flex-shrink: 0;
    display: inline-flex;
  }
  .auth-split__form-mobile-logo-link {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
  }
  .auth-split__form-mobile-logo-link span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Bug fix 2 — Progress steps overflow en móvil.
     Los labels "Correo", "Datos personales", "Verificación" no caben
     en <480px. auth_modern.css ya tiene display:none para los labels
     pero dentro de .auth-split el selector .auth-split .progress-steps
     tiene más especificidad y no aplicaba. Forzamos aquí. */
  .auth-split .progress-steps {
    gap: var(--space-1);
    margin-bottom: var(--space-4);
  }
  .auth-split .progress-steps__label {
    display: none;
  }
  .auth-split .progress-steps__dot {
    width: 26px;
    height: 26px;
    font-size: 11px;
  }
  .auth-split .progress-steps__bar {
    min-width: 16px;
    max-width: 32px;
  }

  /* Bug 4 fix — Grid Nombres/Apellidos colapsa a 1 col a 480px
     (antes solo colapsaba a 360px — demasiado tarde, los inputs
     quedaban de ~150px con placeholders truncados). */
  .auth-split .form-field-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* Bug 6 fix — Footer auth apretado en móvil.
     "© 2026 FirmaYa" y "Términos · Privacidad" quedan sin espacio
     en una fila horizontal. Colapsamos a columna centrada. */
  .auth-split__form-foot {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-2);
  }

  /* OTP inputs más angostos para que quepan 6 en 320px */
  .auth-split .otp-container { gap: 6px; }
  .auth-split .otp-container .otp-box {
    max-width: 42px;
    width: 42px;
    min-height: 50px;
    font-size: var(--text-xl);
  }
}

/* 360px y menos (iPhone SE etc.) — OTP más tight */
@media (max-width: 360px) {
  .auth-split .otp-container .otp-box {
    max-width: 38px;
    width: 38px;
    min-height: 46px;
    font-size: var(--text-lg);
  }
  .auth-split__form-title { font-size: 20px; }
  .auth-split__form-subtitle { font-size: var(--text-sm); }

  /* Logo aún más compacto en 360px */
  .auth-split__form-mobile-logo img {
    height: 24px;
    min-width: 100px;
  }

  /* Progress dots aún más tight */
  .auth-split .progress-steps__dot {
    width: 24px;
    height: 24px;
    font-size: 10px;
  }
  .auth-split .progress-steps__bar {
    min-width: 12px;
    max-width: 24px;
  }
}


/* ============================================================
   MOTION — entrada animada (respeta prefers-reduced-motion vía token)
   ============================================================ */

@keyframes auth-split-brand-in {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes auth-split-form-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.auth-split__brand-middle,
.auth-split__quote {
  animation: auth-split-brand-in var(--transition-slow) var(--ease-out) both;
}
.auth-split__quote { animation-delay: 0.15s; }

.auth-split__form-header,
.auth-split__form-inner > .auth-shell,
.auth-split__form-inner > form,
.auth-split__form-inner > .auth-split__form-body {
  animation: auth-split-form-in var(--transition-base) var(--ease-out) both;
}

@media (prefers-reduced-motion: reduce) {
  .auth-split__brand-middle,
  .auth-split__quote,
  .auth-split__form-header,
  .auth-split__form-inner > .auth-shell,
  .auth-split__form-inner > form,
  .auth-split__form-inner > .auth-split__form-body {
    animation: none;
  }
}


/* ============================================================
   INPUTS — focus ring cyan reforzado (scopeado a .auth-split)
   ============================================================ */

.auth-split .form-field__input:focus,
.auth-split .form-field__input:focus-visible {
  border-color: var(--brand-cyan-500);
  box-shadow:
    0 0 0 2px #FFFFFF,
    0 0 0 4px rgba(0, 186, 212, 0.28);
  outline: none;
}

.auth-split .form-field__control:focus-within .form-field__icon {
  color: var(--brand-cyan-600);
}

/* ============================================================
   PROGRESS STEPS — paso activo con cyan
   ============================================================ */

.auth-split .progress-steps__step--current .progress-steps__dot,
.auth-split .progress-steps__step--current .progress-steps__number {
  background: var(--brand-cyan-500);
  color: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(0, 186, 212, 0.18);
}
/*
 * dashboard.css — Mi Cuenta
 * FirmaYa / zappb
 *
 * Cubre: .miCuenta-container (y todos sus sub-componentes),
 *        .avoice-content
 *
 * EXTRAÍDO DESDE application.css
 */

.miCuenta-container {
    display: flex;
    flex: 1;
    .miCuenta-sidebar {
        padding-top: 32px;
        width: 20%;
        background: #ffff;
        border-right: 2px solid #e0e0f39c;
        ul{
            list-style-type: none;
            padding-left: 0;
            padding-right: 50px;
            li{
                padding: 5px 30px;
                margin-bottom: 5px;
                a{
                    text-decoration: none;
                    font-weight: 600;
                    color: #222D8B;
                }
            }
            li.option-selected{
                background: #E0E0F3;
                border-top-right-radius: 14px;
                border-bottom-right-radius: 14px;
                a{
                    color: #222D8B;
                }
            }
        }
    }
    .miCuenta-content {
        display: flex;
        justify-content: center;
        overflow: hidden;
        width: -webkit-fill-available;
        .cuenta-content, 
        .pagos-content, 
        .seguridad-content, 
        .preferencias-content,
        .history-content,
        .planes-content.miembros,
        .email-settings-content,
        .terms-and-condition-content,
        .desactivate-account-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            .cuenta-title, 
            .pagos-title, 
            .seguridad-title, 
            .preferencias-title,
            .history-title,
            .email-settings-title,
            .terms-and-condition-title,
            .desactivate-account-title,
            .title-section {
                text-align: center;
                margin-bottom: 10px;
                span{
                    color: #222D8B;
                }
                a.link-back{
                    position: absolute;
                    left: 20vw;
                    text-decoration: none;
                    color: #222D8B;
                    font-weight: 600;
                    i{
                        margin-right: 6px;
                    }
                }
            }
            .history-title{
                display: flex;
                align-items: center;
            }
            .cuenta-body, 
            .pagos-body, 
            .seguridad-body, 
            .preferencias-body,
            .history-body,
            .members-body,
            .email-settings-body,
            .terms-and-condition-body,
            .desactivate-account-body{
                width: 100%;
                padding: 20px;
                display: flex;
                flex-direction: column;
                .top-section, .bottom-section{
                    display: flex;
                    gap: 25px
                }
                .informacion-container {
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-start;
                    align-items: center;
                    min-width: 370px;
                    min-height: 102px;
                    margin: 0 auto;
                    margin-bottom: 30px;
                    border-radius: 6px;
                    padding: 12px 23px;
                    background: #fff;
                    box-shadow: 0px 6px 6px 3px rgba(0, 0, 0, 0.14);
                    a{
                        text-decoration: none;
                    }
                    .info-cuentaPersonal{
                        div{
                            display: flex;
                            p{
                                min-width: 110px;
                            }
                            p:nth-child(2) {
                                font-weight: 600;
                            }
                        }
                        .user-form{
                            display: flex;
                            flex-direction: column;
                            gap: 10px;
                            margin-top: 12px;
                            .user-form__group{
                                align-items: baseline;
                                gap: 5px;
                                label{
                                    color: var(--color-primary);
                                }
                                input{
                                    border-radius: 6px;
                                    border: 1px solid #222D8B;
                                    padding: 4px 9px;
                                    color: #222D8B;
                                    font-weight: 600;
                                }
                            }
                            .user-form__actions{
                                flex-direction: row-reverse;
                                justify-content: space-around;
                                .btn-primary{
                                    background: var(--color-secondary-lt);
                                    color: #fff;
                                    border: none;
                                    border-radius: 16px;
                                    padding: 2px 14px;
                                    font-size: 14px;
                                    cursor: pointer;
                                }
                                .link-cancel{
                                    font-size: 14px;
                                    border: 1px solid var(--color-secondary-lt);
                                    color: var(--color-secondary-lt);
                                    padding: 2px 14px;
                                    border-radius: 16px;
                                }
                                .btn-primary:hover,
                                .link-cancel:hover{
                                    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
                                }
                            }
                        }
                    }
                    .info-members{
                        display: flex;
                        p{
                            min-width: 110px;
                        }
                        .info{
                            font-weight: 600;
                        }
                    }
                    .info-identificacion{
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        p:nth-child(2){
                            margin-top: 0;
                            align-items: baseline;
                        }
                    }
                    .info-correoElectronico{
                        width: 90%;
                        div{
                            display: flex;
                            align-items: baseline;
                            justify-content: space-between;
                            p{
                                align-items: baseline;
                            }
                            span{
                                font-size: 14px;
                                border-radius: 16px;
                                background: #a7a7a7;
                                color: #ffff;
                                padding: 2px 12px;
                                margin-left: 12px;
                            }
                        }
                    }
                    .paquetesFirma-container{
                        display: flex;
                        padding: 25px;
                        width: 100%;
                        gap: 12px;
                        flex-direction: column;
                        .tipoPlan{
                            font-size: 24px;
                        }
                        h4{
                            border-bottom: none;
                            margin-bottom: 0px;
                            justify-content: start;
                        }
                        .paquetesFirma{                   
                            display: flex;
                            align-items: center;
                            width: auto;
                            gap: 25px;
                            justify-content: space-between;
                            .firmaDisponible-container{
                                background: #222D8B;
                                border-radius: 100%;
                                height: 40px;
                                width: 50px;
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                justify-content: center;
                                h3{
                                    margin: 0;
                                    color:#ffff;
                                    font-size: 16px;
                                }
                            }
                            .planFirma{
                                height: 100px;
                                width: 130px;
                                padding: 0 6px;
                                h3{
                                    display: flex;
                                    font-size: 22px;
                                    align-items: baseline;
                                    gap: 2px;
                                    span{
                                        font-size: 10px;
                                        font-weight: 100;
                                    };
                                }
                            }
                        }
                    }
                    .paquetesFirma-container.tipo-firmas{
                        height: 100%;
                        justify-content: space-around;
                    }
                    .imgApariencia-container{
                        padding-top: 20px;
                        gap: 40px;
                        display: flex;
                        justify-content: center;
                        img {
                            max-height: 100%;
                            height: 80px;
                        }
                        p{
                            justify-content: center;
                        }
                    }
                    .correoElectronico-seguridad{
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        margin-top: 14px;
                    }
                    .contraseña-seguridad{
                        margin-top: 14px;
                        label{
                            display: flex;
                            justify-content: flex-start;
                        }
                        input{
                            padding: 10px;
                            border: 1px solid #E0E0EC;
                            border-radius: 14px;
                            height: 40px;
                            position: relative;
                            width: -webkit-fill-available;
                            font-size: 14px;
                            margin-bottom: 14px;
                        }
                        .container-new-password{
                            display: flex;
                            align-items: baseline;
                            border: 1px solid #E0E0EC;
                            margin-bottom: 14px;
                            border-radius: 16px;
                            padding: 10px;
                            input{
                                padding: 0px;
                                border: none;
                                height: auto;              
                                margin-bottom: 0px;
                            }
                            .icon-toggle-password,
                            .icon-toggle-confirm-password{
                                color: #8E8694;
                                padding: 0;
                            }
                            input::-ms-reveal,
                            input::-ms-clear,
                            input::-ms-reveal,
                            input::-ms-clear {
                                display: none;
                            }
                        }
                        .container-new-password.container-new-password.confirmation{
                            margin-bottom: 0;
                        }
                        .confirm-error-message{
                            margin-bottom: 14px;
                        }
                    }
                    .info-perfiles{
                        margin-bottom: 6px;
                        display: flex;
                        gap: 18px;
                        justify-content: space-between;
                        align-items: baseline;
                    }
                    .perfiles-container{
                        padding: 10px 15px 25px;
                        h4{
                            border-bottom: none;
                            min-width: 190px;
                            display: flex;
                            justify-content: flex-start;
                        }
                        .nombre-perfiles{
                            gap: 18px;
                            display: flex;
                            justify-content: space-between;
                            label,
                            .input-perfil-editable {
                                padding: 6px 10px;
                                border: 1px solid #E0E0EC;
                                border-radius: 8px;
                                height: 32px;
                            min-width: 190px;
                                font-size: 14px;
                                color: #222D8B;
                                background: transparent;

                            box-sizing: border-box;
                                outline: none;
                                font-family: inherit;

                            &:focus {
                                border-color: #3F4280;
                                color: #222D8B;
                            }
                            }
                        }
                    }
                    .title-cuenta-personal{
                        gap: 5px;
                        .fas.fa-edit{
                            padding-bottom: 0;
                        }
                    }
                    .fas.fa-plus{
                        border-radius: 11px;
                        border: 1px solid #222D8B;
                        padding: 2px;
                        font-size: 11px;
                        margin-left: 12px;
                    }
                    .p-numCelular{
                        justify-content: center;
                    }
                    .titulo-box{
                        font-weight: 600;
                        i.fa-info-circle{
                            padding-bottom: 0;
                            margin-left: 5px;

                        }
                    }
                    h4 {
                        margin: 0; 
                        text-align: center;
                        border-bottom: 1px solid #dbdbdb;
                        width: 100%;
                    }
                    label, h4, p, i{
                        color: #222D8B;
                        padding-bottom: 7px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                    p{
                        margin: 10px 0 0;
                        display: flex;
                        justify-content: space-between;
                    }
                    label{
                        font-size: 14px;
                    }
                    img{
                        max-height: 30px;
                    }
                }
                .informacion-container.agregar-miembro{
                    min-height: 0;
                    .info-members{
                        opacity: 0.2;
                        p{
                            font-weight: 600;
                                
                        }
                        .open-modal{
                            min-width: 0;
                        }
                    }
                }
                .container-boxFirmas{
                    display: flex;
                    gap: 25px;
                   
                }
                .container-opciones{
                    
                    ul{
                        padding: 0 10px;
                        margin: 0;
                        li{
                            list-style-type: none;
                            padding: 10px 15px;
                            border-bottom: 1px solid #dbdbdb;
                        }
                        .last-option{
                            border-bottom: none;
                        }
                    }
                }
                .container-usuario{
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    h4{
                        border-bottom: 2px solid #222D8B;
                        margin-bottom: 5px;
                        padding: 5px;
                        color: #222D8B;
                        padding-top: 0;
                    }
                }
                .enlazar-cuenta{
                    align-items: center;
                    gap: 9px;
                }
            }
            .preferencias-body{
                align-items: center;
                .informacion-container:has(.imgApariencia-container){
                    display: none;
                }
            }
            .pagos-body, .seguridad-body, .preferencias-body{
                flex-direction: column;
            }
            .seguridad-body{
                height: 100%;
                flex-wrap: nowrap;
                .information-container{
                    min-width: 50vw !important;
                }
                .container-opciones{
                    width: 60%;
                    margin: auto;
                }

            }
            .history-body{
                .titulo-box{
                    display: flex !important;
                    justify-content: space-between !important;
                    border-bottom: none !important;
                    gap: 5px;
                    p{
                        padding-bottom: 0;
                    }
                    span{
                        margin-right: 7px;
                    }
                    i.fa-external-link-alt{
                        padding: 0;
                    }
                }
                p{
                    margin: 0 !important;
                }
            }
          
          
        }
        .seguridad-content{
            width: 100%;
            .informacion-container {
                width: 60%;
                form{
                    width: 100%;
                    text-align: center;
                    .contraseña-seguridad{
                        padding: 0 12px;
                        input::placeholder,
                        .icon-toggle-password,
                        .icon-toggle-confirm-password{
                            color: #898AB1 !important;
                        }
                        input{
                            color: #222D8B;
                        }
                    }
                }
            }
        }
        .planes-content.miembros{
            .title-section{
                h3{
                    margin-bottom: 0;
                }
            }
            .members-body{
                padding-top: 0;
            }
        }
        .preferencias-content{
            flex-wrap: nowrap;
            width: 50vw;
            select#idioma{
                padding: 10px;
                border: 1px solid #E0E0EC;
                border-radius: 14px;
                height: 40px;
                position: relative;
                width: -webkit-fill-available;
                font-size: 14px;
                color: #a78897;
                z-index: 1;
                background: transparent;
            }
            label{
                justify-content: flex-start !important;
                color: #222D8B !important;
            }
            i.fas.fa-chevron-down.arrow-down {
                position: relative;
                top: -30px;
                right: -46%;
            }
        }
        .info-icon {
            display: inline-block;
            font-size: 9px;
            padding: 0px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            border: 2px solid #49B7D2;
            color: #49B7D2;
            text-align: center;
            font-weight: bold;
            margin-left: 10px;
        }
        .email-settings-content, 
        .terms-and-condition-content,
        .desactivate-account-content{
            .title-section{
                display: flex;
                align-items: center;
                margin-bottom: 0 !important;
                a{
                    position: absolute;
                    left: 20vw;
                    text-decoration: none;
                    color: #222D8B;
                    font-weight: 600;
                    margin-bottom: 53px;
                    i{
                        margin-right: 5px;
                    }
                }
                a:focus,
                a:active{
                    color: #222D8B;
                }
                .email-settings-title,
                .desactivate-account-title{
                    max-width: 515px;
                }
            }
            .informacion-container{
                justify-content: space-around !important;
                width: 616px;
                min-height: 181px !important;
                height: auto;
                padding: 12px 40px !important;
                .checkbox-container{
                    width: 100%;
                    label{
                        color:#8A8BB2 !important;
                        justify-content: start !important;
                        margin-bottom: 10px;
                    }
                    input[type="checkbox"] {
                        appearance: none;
                        -webkit-appearance: none;
                        width: 14px;
                        height: 14px;
                        border: 1px solid #8A8BB2;
                        border-radius: 4px;
                        cursor: pointer;
                    }
                    input[type="checkbox"]:checked {
                        display: flex;
                        justify-content: center;
                        background: #8A8BB2;
                    }
                    input[type="checkbox"]:checked::after {
                        content: "";
                        position: absolute;

                        width: 4px;
                        height: 9px;

                        border: solid white;
                        border-width: 0 2px 2px 0;

                        transform: rotate(45deg);
                    }
                }
            }
        }
        .terms-and-condition-content{
            .title-section{
                a{
                    margin-bottom: 26px;
                }
            }
            .informacion-container{
                width: 800px;
                align-items: flex-start !important;
                ul{
                    color: #222D8B;
                }
                .definicones{
                    flex-direction: column;
                    align-items: flex-start !important;
                }
            }
        }
        .desactivate-account-content{
            .informacion-container{
                padding: 25px !important;
            }
            p{
                justify-content: center !important;
                font-weight: 600;
            }
            ul{
                display: flex;
                flex-direction: column;
                align-items: center;
                color: #222D8B;
                li{
                    text-align: center;
                    width: fit-content;
                    font-size: 14px;
                }
            }
            .btn-container{
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 16px;
                margin: 25px;
            }
        }

    }
    .modalPägos, .modalOpcion{
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100%;
        background: #00000061;
        justify-content: center;
        align-items: center;
        z-index: 9999;
        .content{
            margin: 14vh auto auto;
            width: auto;
            padding: 0px 135px 35px;
            min-width: 50vw;
            display: flex;
            flex-direction: column;
            background: #f8f8fc;
            border-radius: 8px;
            h2.title {
                color: #162F85;
                font-weight: bold;
                text-align: center;
            }
            p{
                color: #162F85;
                font-weight: 600;
            }
            ul{
                padding: 0 0 12px;
                margin: 0;
                border-bottom: 2px solid #162F85;
                li{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .info {
                        color: #162F85;
                    }
                     .contador{
                        button{
                            height: 4vh;
                            width: 2.5vw;
                            border-radius: 6px;
                            border: none;
                            background: #162F85;
                            color: #ffff;
                            cursor: pointer;
                        }
                        input.numeroFirma {
                            margin: 0 6px;
                            width: 3vw;
                            height: 4vh;
                            border-radius: 6px;
                            border: none;
                            text-align: center;
                            box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.14);
                            color: #162F85;
                        }
                    }            
                }
            }
           
            .infoTotal {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 15px;
                p {
                    color: #162F85;
                    font-weight: bold;
                }
                input.numTotalFirmas {
                    border: none;
                    color: #162F85;
                    font-weight: bold;
                    text-align: right;
                    background:transparent;
                }
            }
            .containerBtnes {
                display: flex;
                justify-content: space-between;
                .btn-back{
                    background: none !important;
                    text-decoration: none;
                    flex-direction: row-reverse;
                    border: 2px solid #00bad4 !important;
                    color: #00bad4 !important;
                    font-weight: 600;
                    display: flex;
                    justify-content: space-evenly;
                    border-radius: 20px !important;
                    padding: 8px;
                    font-size: 16px !important;
                    min-width: 140px;
                    cursor: pointer !important;
                    margin: 0 !important;
                }
                .btn-foward{
                    display: flex;
                    background: #00bad4;
                    align-items: center;
                    justify-content: space-around;
                    border: none;
                    cursor: pointer !important;
                    color: #fff;
                    font-size: 16px !important;
                    font-weight: 600;
                    border-radius: 20px !important;
                    padding: 8px;
                    min-width: 140px;
                    margin: 0 !important;
                }
                .btn-back:hover{
                    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
                }
                .btn-foward:hover{
                    background: #66d9f5;
                    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
                }
            }
        }
        .optionContent{         
            width: 435px;
            padding: 35px 52px;
            min-width: 0;
            gap: 9px;
            justify-content: space-between;
            min-height: 260px;
            h2.title{
                display: flex;
                font-size: 20px;
                align-items: center;
                justify-content: center;
                margin: 0 0 6px 0;
                span{
                    margin-left: 8px;
                    display: inline-block;
                    font-size: 12px;
                    padding: 0px;
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    border: 2px solid #49B7D2;
                    color: #49B7D2;
                    text-align: center;
                    font-weight: bold;
                    cursor: pointer;
                }
            }
            p{
                text-align: center;
                font-weight: 400;
                margin-bottom: 0;
            }
            .container-labelInput{
                width: auto;
                margin: 12px auto;
                display: flex;
                flex-direction: row;
                gap: 10px;
                align-items: center;
                justify-content: center;
                label{
                    color: #162F85;
                    font-weight: 600;
                    padding-left: 3px;
                    font-size: 18px;
                }
                input{
                    font-size: 14px;
                    border: 1px solid #162F85;
                    border-radius: 12px;
                    width: 150px;
                    text-align: center;
                    padding: 8px 6px;
                    color:#51517D !important;
                }
                #phoneInput{
                    width: 200px;
                }
            }
            .containerBtnes{
                margin-top: 43px;
                .btn-back:hover{
                    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
                }
                .btn-foward:hover{
                    background: #66d9f5;
                    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
                }
            }
        }
        .optionContent:has(.title-sms){
            width: auto;
            .container-inputRegistro{
                width: 100%;
                .otp-container{
                    justify-content: space-evenly;
                    display: flex;
                    input{
                        height: 55px;
                        width: 55px;
                        font-size: 25px;
                        border: 1px solid #162f855e
                    }
                    input:focus{
                        border-color:#162F85;
                    }
                }
            }
            
        }
    }
    .modalOpcion.cancel-subscription{
        .content.optionContent{
            width: 540px;
            button{
                padding: 8px 15px;
            }
        }
    }
    .showOption, .showPagos{
        display: flex;
    }
    .planes-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: -webkit-fill-available;
            margin: auto;
        .title-section{
            display: flex;
            align-items: center;
            a{
                position: absolute;
                left: 20vw;
                text-decoration: none;
                color: #222D8B;
                font-weight: 600;
                i{
                    margin-right: 6px;
                }
            }
        }
        .container-btns{
            border-bottom: 2px solid #c0c1ed8f;
            width: 100%;
            gap: 33px;
            display: flex;
            justify-content: center;
            margin-bottom: 2vh;
            button{
                background: none;
                border: none;
                color: #222D8B;
                font-weight: 600;
                font-size: 14px;
                padding-bottom: 5px;
                cursor: pointer;
            }
            #btnEmpresa{
                font-weight: 100;
            }
            button.active{
                border-bottom: 2px solid #222D8B;
            }
        }
        .info-planes, .info-empresas{
            background: #fff;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: auto;
            padding: 15px 40px 20px;
            border-radius: 4px;
            box-shadow: 0px 6px 6px 3px rgba(0, 0, 0, 0.14);
            margin-bottom: 10vh;
            .content-planes{
                display: flex;
                width: 60vw;;
                justify-content: space-between;
                .columna-detalle{
                    width: 25vw;
                    div{
                        padding-bottom: 12px;
                        margin-bottom: 12px;
                        margin-right:10px;
                        h2{
                            color: transparent;
                        }
                        .title{
                            margin-top: 0;
                        }
                        .planes{
                            height: 100px;
                        }
                        p{
                            color: #222D8B;
                            margin: 0px;
                            padding: 12px 0 0;
                        }
                    }
                    button{
                        background: none;
                        border: none;
                        color: transparent;
                    }
                }
                .columna-plan{
                    width: 10vw;
                    display: flex;
                    color: #ffffff;
                    text-align: center;
                    flex-direction: column;
                    align-items: center;
                    div{
                        color: #222D8B;
                        /* background: linear-gradient(to bottom, #a8a8d6, #2c2044); */
                        border-radius: 36px;
                        padding-bottom: 12px;
                        margin-bottom: 12px;
                        .title{
                            /*background: linear-gradient(to bottom, #e6e6fd, #ffffff);*/
                            border-radius: 16px;
                            text-align: center;                      
                            color: #222D8B;   
                            margin: auto;
                        }
                        .title.transparent{
                            color: transparent;
                            background: none;
                        }
                        .borderFlotante{
                            position: absolute;
                            border-top: 1px solid #222D8B;
                            border-top-right-radius: 16px;
                            border-top-left-radius: 16px;
                            width: 17vw;
                            transform: translate(-65px, 6px);
                        }
                        .valor{
                                background: #222D8B;
                                color: #fff;
                                height: 100px;
                                width: 100px;
                                border-radius: 50%;
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                justify-content: center;
                            span{
                                font-size: 10px;
                            }
                        }
                        p{
                            font-size: 16px;
                            padding: 6px 0;
                            font-weight: 600;
                            margin: 0;
                            border-bottom: 1px solid #222D8B;
                            i{
                                border-radius: 16px;
                                font-size: 18px;
                            }
                            i.fas.fa-times{
                                color: #898AB1;
                            }
                        }
                        p:last-child{
                            border-bottom: none;
                        }
                    }  
                    button{
                        border: 1px solid #222D8B;
                        background: none;
                        color: #222D8B;
                        border-radius: 16px;
                        padding: 8px 15px;
                        font-weight: 600;
                        cursor: pointer;
                    }
                    button.active-plan{
                        background: #222D8B;
                        color: white;
                    }
                    button.active{
                        background: none;
                        color: #898AB1;
                        font-weight: 600;
                        border: none;
                    }
                }
            }
            .description{
                margin: 30px 0px 0px 0px;
                font-size: 14px;
                color: #222D8B;
                font-weight: 600;
                font-style: italic;
            }
           
        }
     
    }
    .planes-content.persona{
        .info-planes{
            display: flex;
        }
        .info-empresas{
            display: none;
        }
    }
    .planes-content.empresa{
        .info-planes{
            display: none;
        }
        .info-empresas{
            display: flex;
        }
    }
}
/* Caja del tooltip */

.avoice-content{
    width: 100vw;
    padding: 90px;
    gap: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    button{
        border: none;
        background: #00BAD4;
        color: #ffff;
        padding: 9px 24px;
        border-radius: 16px;
    }
    button:hover{
        background: #0dd1eb;
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    }
    .pdf-visor{
        width: 100%;
    }
}
/*
 * views/dashboard_modern.css — Modernización de "Mi Cuenta"
 * FirmaYa / zappb
 *
 * Coexiste con dashboard.css legacy. Aplica estilos modernos SOBRE
 * la estructura .miCuenta-container existente usando clases nuevas
 * (.account-nav, .account-card, .account-field) con mayor especificidad.
 */

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

.miCuenta-container {
  background: var(--surface-app);
  padding: var(--space-6) var(--space-8);
  gap: var(--space-6);
  align-items: flex-start;
  max-width: 1440px;
  margin-inline: auto;
  width: 100%;
  box-sizing: border-box;
}


/* ============================================================
   NAVEGACIÓN LATERAL
   ============================================================ */

/* .miCuenta-container .account-nav: especificidad (0,2,0) para ganarle
   al legacy .miCuenta-container .miCuenta-sidebar (CSS native nesting en
   dashboard.css) que forzaba width: 20% y no colapsaba en mobile. */
.miCuenta-container .account-nav {
  padding: var(--space-4) 0;
  width: 260px;
  flex-shrink: 0;
}

.account-nav__list {
  list-style: none;
  margin: 0;
  /* !important: neutraliza legacy dashboard.css → .miCuenta-sidebar ul { padding-right: 50px }
     cuya especificidad (0,2,1) gana sobre esta regla (0,1,0) sin !important. */
  padding: 0 0 0 var(--space-4) !important;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* !important: neutraliza legacy → .miCuenta-sidebar ul li { padding: 5px 30px }
   que achica el área del link activo al reducir el ancho disponible. */
.account-nav__item { margin: 0 0 var(--space-1) !important; padding: 0 !important; }

.account-nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  color: var(--text-default);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-base);
  text-decoration: none;
  line-height: var(--leading-snug);
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.account-nav__link:hover {
  background: var(--brand-navy-100);
  color: var(--text-brand);
}

.account-nav__link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.account-nav__icon {
  width: 18px;
  text-align: center;
  font-size: var(--text-base);
  color: var(--text-muted);
  transition: color var(--transition-fast);
}

.account-nav__link:hover .account-nav__icon,
.account-nav__link--active .account-nav__icon {
  color: var(--brand-cyan-500);
}

.account-nav__link--active {
  background: linear-gradient(90deg,
    rgba(0, 186, 212, 0.18) 0%,
    rgba(0, 186, 212, 0.08) 100%);
  color: var(--text-brand);
  font-weight: var(--font-weight-bold);
  position: relative;
}
.account-nav__link--active::before {
  content: "";
  position: absolute;
  left: calc(var(--space-2) * -1);
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 24px;
  background: linear-gradient(180deg, var(--brand-cyan-500), var(--brand-cyan-600));
  border-radius: var(--radius-round);
  box-shadow: 0 0 0 4px rgba(0, 186, 212, 0.12);
}
.account-nav__link--active .account-nav__icon {
  color: var(--brand-cyan-700);
}

/* Override del legacy .option-selected — neutraliza el fondo morado */
.miCuenta-sidebar.account-nav ul li.option-selected {
  background: transparent;
}
.miCuenta-sidebar.account-nav ul li.option-selected a {
  color: var(--text-brand);
}


/* ============================================================
   CONTENIDO PRINCIPAL — moderno (BEM: account-*)
   ============================================================ */

/* .miCuenta-container .account-main: especificidad (0,2,0) para ganarle
   al legacy .miCuenta-container .miCuenta-content (CSS native nesting en
   dashboard.css) que era flex row + justify-content:center y convertía
   header / profile-hero / grid en 3 columnas lado a lado. */
.miCuenta-container .account-main {
  flex: 1;
  min-width: 0;
  padding: 0 var(--space-6);
  max-width: 1080px;
  display: block;
}

.account-main__header {
  margin-bottom: var(--space-6);
}

/* Back-link moderno dentro del header — reemplaza el patrón legacy
   <a class="link-back" style="position:absolute"> en las vistas
   FYA2-259 (V7.1). Inline-flex con icon leading, color navy-700,
   hover cyan-700. */
.account-main__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.account-main__back i {
  font-size: 12px;
  transition: transform var(--transition-fast);
}

.account-main__back:hover,
.account-main__back:focus-visible {
  color: var(--brand-cyan-700);
  outline: none;
}

.account-main__back:hover i {
  transform: translateX(-2px);
}

.account-main__back:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.account-main__title {
  margin: 0 0 var(--space-1);
  color: var(--text-brand);
  font-size: var(--text-display-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-snug);
}

.account-main__subtitle {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

.account-main__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-4);
}


/* ============================================================
   CARDS DE INFORMACIÓN — .account-card
   ============================================================ */

.account-card {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-shadow: var(--elevation-1);
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-base),
    border-color var(--transition-fast);
}
/* .account-card:hover unificado V9.5(a) — ver components/cards.css */

.account-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.account-card__title {
  margin: 0;
  color: var(--text-brand);
  font-size: var(--text-md);
  font-weight: var(--font-weight-semibold);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.account-card__title i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--brand-cyan-100);
  color: var(--brand-cyan-700);
  font-size: 14px;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.account-card:hover .account-card__title i {
  background: var(--brand-cyan-200);
}

.account-card__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: transparent;
  border: none;
  color: var(--text-muted);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.account-card__action:hover {
  background: var(--neutral-100);
  color: var(--text-brand);
}
.account-card__action:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Filas de datos — label + value */
.account-card__field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) 0;
}

.account-card__field:not(:last-child) {
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-1);
}

.account-card__field-label {
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-weight: var(--font-weight-semibold);
}

.account-card__field-value {
  font-size: var(--text-base);
  color: var(--text-strong);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.account-card__field-value--empty {
  color: var(--text-muted);
  font-style: italic;
}

/* ============================================================
   PROFILE HERO — banner con avatar grande + info del usuario
   ============================================================ */

.account-profile-hero {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
  background: linear-gradient(135deg,
    var(--brand-navy-700) 0%,
    var(--brand-navy-800) 60%,
    var(--brand-navy-900) 100%);
  border-radius: var(--radius-xl);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--text-on-brand);
  box-shadow: var(--elevation-2);
  font-family: var(--font-family-base);
}

.account-profile-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 88% 20%, rgba(0, 186, 212, 0.35) 0%, transparent 40%),
    radial-gradient(circle at 15% 110%, rgba(73, 183, 210, 0.22) 0%, transparent 55%);
}

.account-profile-hero::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -60px;
  width: 220px;
  height: 220px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'><circle cx='30' cy='30' r='1' fill='%23ffffff' fill-opacity='0.12'/></svg>");
  background-size: 24px 24px;
  z-index: -1;
  opacity: 0.6;
  pointer-events: none;
}

.account-profile-hero__avatar {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-round);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-2xl);
  color: var(--text-on-brand);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(102, 217, 245, 0.35);
  backdrop-filter: blur(8px);
  flex-shrink: 0;
  letter-spacing: var(--tracking-snug);
}

.account-profile-hero__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.account-profile-hero__eyebrow {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--brand-cyan-200);
  font-weight: var(--font-weight-semibold);
}

.account-profile-hero__name {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: #fff;
  overflow-wrap: break-word;
}

.account-profile-hero__email {
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--text-sm);
  margin: 2px 0 0;
  overflow-wrap: break-word;
}

.account-profile-hero__badges {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.account-profile-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px var(--space-3);
  border-radius: var(--radius-round);
  background: rgba(102, 217, 245, 0.16);
  border: 1px solid rgba(102, 217, 245, 0.28);
  color: var(--brand-cyan-200);
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

.account-profile-hero__badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-round);
  background: var(--brand-cyan-300);
  box-shadow: 0 0 0 3px rgba(102, 217, 245, 0.2);
}


/* ============================================================
   ACCOUNT CARD — action como chip con label (reemplazo al ícono solo)
   ============================================================ */

.account-card__action--labeled {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: auto;
  height: auto;
  padding: 6px var(--space-3);
  border-radius: var(--radius-round);
  background: var(--brand-cyan-100);
  color: var(--brand-cyan-700);
  border: 1px solid var(--brand-cyan-200);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-snug);
  text-decoration: none;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
}
.account-card__action--labeled:hover {
  background: var(--brand-cyan-200);
  border-color: var(--brand-cyan-400);
  transform: translateY(-1px);
}
.account-card__action--labeled i { font-size: 10px; }


/* Empty state inline dentro de una card */
.account-card__empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) 0;
}

.account-card__empty-label {
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-style: italic;
}

/* V6.2: unificación CTAs a navy. Era pill cyan-100/700 (mini-CTA
   "Agregar RUT" / "Agregar celular" del /my_account). Cambiado a la
   paleta navy con bg navy-100 + texto navy-700 para mantener el patrón
   pill suave alineado con el resto de CTAs del dashboard. */
.account-card__empty-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px var(--space-3);
  border-radius: var(--radius-md);
  background: var(--brand-navy-100);
  color: var(--brand-navy-700);
  border: 1px solid var(--brand-navy-300);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.account-card__empty-cta:hover {
  background: var(--brand-navy-300);
  color: #fff;
  transform: translateY(-1px);
}
.account-card__empty-cta i { font-size: 11px; }


/* Override legacy @media (min-width: 1840px) en application.css body:
   - .bodyFirma .miCuenta-container { transform: scale(1.2); margin: 95px 160px; height: 100vh }
     magnifica TODO el dashboard 1.2× en monitores >= 1840px.
   - .miCuenta-sidebar ul li { padding: 5px 50px } cramps los .account-nav__link
     a ~130px ancho → el texto "Pagos y planes" wrappea a 3 líneas y el
     hover pill queda más chico que el texto.
   Neutralizamos ambas para que el design moderno respete su tamaño base. */
@media (min-width: 1840px) {
  .bodyFirma .miCuenta-container {
    transform: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: auto !important;
  }
  .miCuenta-container .miCuenta-sidebar ul li,
  .miCuenta-container .account-nav__item {
    padding: 0 !important;
    margin: 0 0 var(--space-1) !important;
  }
  .miCuenta-container .miCuenta-sidebar ul,
  .miCuenta-container .account-nav__list {
    padding-right: 0 !important;
    transform: none !important;
  }
  /* Neutralize legacy responsive.css: scale(1.2) + margin-top:55px on section
     body containers at 1840px+. The transform causes visual overflow on both
     sides since the element is scaled without adjusting layout dimensions.

     V11.7h: agregada .members-body (6to body del dashboard). El override
     original cubría 5 bodies bajo `.miCuenta-content > .{X}-body`; quedó
     fuera porque la regla legacy de .members-body vive nested más profundo
     (responsive.css:186-188 dentro de `.planes-content, .history-content`,
     diferente parent chain). El descendant selector `.miCuenta-container
     .miCuenta-content .members-body` matchea igual el DOM real de /members
     (`.miCuenta-content > .planes-content.miembros > .members-body`).

     Tercera instancia del gotcha §8.22 en V11.7 (cancelador multi-selector
     incompleto). Síntoma: viewport ≥1840px amplificaba el contenido 20%
     rompiendo el layout (sidebar tapaba título, cards cortados, badge
     "PRÓXIMAMENTE" truncado). */
  .miCuenta-container .miCuenta-content .pagos-body,
  .miCuenta-container .miCuenta-content .cuenta-body,
  .miCuenta-container .miCuenta-content .seguridad-body,
  .miCuenta-container .miCuenta-content .preferencias-body,
  .miCuenta-container .miCuenta-content .history-body,
  .miCuenta-container .miCuenta-content .members-body {
    transform: none !important;
    margin-top: 0 !important;
  }
  /* Neutralize legacy padding-bottom:80px on .miCuenta-content at 1840px+ */
  .miCuenta-container .miCuenta-content {
    padding-bottom: 0 !important;
  }
}


/* Responsive — apilar sidebar sobre main en móvil.
   Especificidad (0,2,0)+ para ganarle al legacy nested en dashboard.css. */
@media (max-width: 767px) {
  /* V8.10: permitir que los flex containers del layout de Mi Cuenta
     se contraigan cuando el contenido intrínseco del sidebar mobile
     (tabs horizontales scrollables agregadas en V8.8b) excede el
     viewport. Sin esto, el overflow-x:auto del .account-nav__list
     queda inactivo y los <li> empujan el ancho de TODOS los
     ancestros (incluyendo .bodyFirma) hacia arriba — el body
     scrollWidth llegaba a 915px en viewport 500px. Follow-up
     V8.8(b) que cubrió el comportamiento del sidebar pero no
     habilitó la contracción de la cadena de ancestros. */
  .bodyFirma,
  .miCuenta-container,
  .miCuenta-sidebar {
    min-width: 0;
    max-width: 100%;
  }
  /* turbo-frame es display:inline por default — block + min-width:0
     permite que max-width funcione y participar en flex shrink. */
  turbo-frame#main {
    display: block;
    min-width: 0;
    max-width: 100%;
  }

  /* V8.11: affordance de scroll horizontal en sidebar mobile.
     Combina fade gradient (A), peek natural del siguiente item por
     padding-right del <ul> (B), y scroll-snap + smooth + momentum
     touch (E). Sin esta affordance, el usuario en mobile no
     descubre que existen tabs adicionales a la derecha. */
  .miCuenta-sidebar {
    position: relative;
  }
  .miCuenta-sidebar::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 32px;
    background: linear-gradient(
      to left,
      var(--surface-raised, #fff) 0%,
      rgba(255, 255, 255, 0) 100%
    );
    pointer-events: none;
    z-index: 2;
  }
  .miCuenta-container .account-nav__list {
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* padding-right para que el último item no quede pisado por el
       fade cuando se scrollea hasta el final.
       !important necesario para sobrescribir la neutralización !important del base. */
    padding-right: var(--space-6) !important;
  }
  .miCuenta-container .account-nav__item {
    scroll-snap-align: start;
    flex-shrink: 0;
  }

  .miCuenta-container { flex-direction: column; padding-inline: var(--space-4); }
  .miCuenta-container .account-nav {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--surface-raised);
    border-bottom: 1px solid var(--border-subtle);
    border-right: none;
  }
  .miCuenta-container .account-nav__list {
    flex-direction: row;
    overflow-x: auto;
    padding: 0;
    gap: var(--space-2);
  }
  .miCuenta-container .account-nav__link { white-space: nowrap; }
  .miCuenta-container .account-nav__link--active::before { display: none; }
  .miCuenta-container .account-main { padding: 0 var(--space-4); width: 100%; max-width: 100%; }
  .miCuenta-container .account-main__grid { grid-template-columns: 1fr; }

  .account-profile-hero {
    padding: var(--space-5) var(--space-4);
    gap: var(--space-3);
  }
  .account-profile-hero__avatar {
    width: 56px;
    height: 56px;
    font-size: var(--text-xl);
  }
}

/* V8.8(b): refinamiento del sidebar como tabs horizontales para
   viewports estrechos (<480px). El bloque @media (max-width: 767px)
   ya hace flex-direction: row + overflow-x: auto + nowrap. Acá
   compactamos paddings y tipografía para que los 4 labels ("Mi
   cuenta", "Pagos y planes", "Seguridad", "Preferencias") respiren
   sin que el scroll horizontal sea forzado por padding excesivo. */
@media (max-width: 480px) {
  .miCuenta-container .account-nav {
    padding: var(--space-2) var(--space-3);
  }
  .miCuenta-container .account-nav__list {
    gap: var(--space-1);
    padding: 0;
  }
  .miCuenta-container .account-nav__link {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    gap: var(--space-2);
  }
  .miCuenta-container .account-nav__icon {
    font-size: var(--text-sm);
  }
  /* V8.11: fade gradient reubicado al bloque <767px (donde el
     overflow-x:auto efectivamente entra en juego con la cadena
     min-width:0 de V8.10), ampliado a 32px y combinado con
     scroll-snap. Ver bloque V8.11 más abajo. */
}

@media (max-width: 400px) {
  .account-profile-hero {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: var(--space-4);
  }
  .account-profile-hero__avatar {
    width: 52px;
    height: 52px;
    font-size: var(--text-lg);
  }
  .account-profile-hero__name { font-size: 20px; }
  .account-card { padding: var(--space-4); }
}


/* ============================================================
   ENTRADA ANIMADA
   ============================================================ */

@keyframes account-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.account-profile-hero,
.account-card {
  animation: account-fade-in var(--transition-base) var(--ease-out) both;
}
.account-profile-hero { animation-delay: 0.02s; }
.account-main__grid .account-card:nth-child(1) { animation-delay: 0.08s; }
.account-main__grid .account-card:nth-child(2) { animation-delay: 0.14s; }
.account-main__grid .account-card:nth-child(3) { animation-delay: 0.20s; }

@media (prefers-reduced-motion: reduce) {
  .account-profile-hero, .account-card { animation: none; }
}


/* ============================================================
   SECURITY VIEW — /security (paso 20)
   ============================================================ */

.security-grid {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  /* Cada card mantiene su altura natural en vez de estirarse al más alto.
     El form de contraseña es mucho más alto que la card de tips y el
     stretch dejaba mucho espacio vacío debajo de "Buenas prácticas". */
  align-items: start;
}

.security-card {
  padding: var(--space-6);
}

.security-card__description {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.security-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

/* Requirements box (reutiliza .password-requirements del paso 5c auth_modern).
   Aquí forzamos visibilidad en security (no se activa por focus como en signup).
   La dirección se invierte a la derecha: la card de contraseña está en la columna
   izquierda del security-grid, por lo que left: 100% evita tapar la sidebar. */
.security-form .password-requirements.password-requirements--visible {
  display: block;
  background: var(--surface-app);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-default);
}

.security-form .password-requirements,
.security-form #password-requirements {
  right: auto;
  left: calc(100% + var(--space-2));
}

/* Cuando el security-grid colapsa a 1 columna, el panel va debajo del input */
@media (max-width: 960px) {
  .security-form .password-requirements,
  .security-form #password-requirements {
    left: 0;
    top: calc(100% + var(--space-1));
    width: 100%;
  }
}

.security-form .password-requirements p {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 2px 0;
  line-height: var(--leading-snug);
}

.security-form .password-requirements i {
  width: 14px;
  flex-shrink: 0;
  color: var(--neutral-400);
  font-size: var(--text-sm);
}

.security-form .password-requirements .invalid {
  color: var(--text-muted);
}

.security-form .password-requirements .valid {
  color: var(--success-700);
}

.security-form .password-requirements .valid ~ i,
.security-form .password-requirements p:has(.valid) i {
  color: var(--success-500);
}


/* Acciones del form */
.security-form__actions {
  display: flex;
  justify-content: flex-start;
  margin-top: var(--space-2);
}

/* V6.2: unificación CTAs a navy (V5.2 commit ce0e208). Gradient cyan
   original quedó tras el merge V6 sync; se cambia background a navy
   sólido + shadows en tono navy para alinearse con .btn--primary global. */
.security-form__submit {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-6);
  height: 44px;
  border-radius: var(--radius-md);
  border: none;
  background: var(--brand-navy-800);
  background-image: none;
  color: #fff;
  font-family: var(--font-family-base);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-snug);
  cursor: pointer;
  box-shadow:
    0 1px 2px rgba(22, 47, 133, 0.18),
    0 10px 20px -12px rgba(22, 47, 133, 0.35);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.security-form__submit:hover {
  background: var(--brand-navy-500);
  box-shadow:
    0 2px 4px rgba(22, 47, 133, 0.24),
    0 14px 24px -10px rgba(22, 47, 133, 0.50);
}

.security-form__submit:active {
  transform: translateY(0) scale(0.98);
  background: var(--brand-navy-800);
}

.security-form__submit i {
  font-size: 12px;
}


/* Tips card */
.security-card--tips {
  background: var(--brand-navy-100);
  border-color: var(--brand-navy-100);
}

.security-card--tips .account-card__title i {
  background: rgba(0, 186, 212, 0.18);
  color: var(--brand-cyan-700);
}

.security-tips {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.security-tips li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-default);
  line-height: var(--leading-normal);
}

.security-tips li i {
  color: var(--brand-cyan-700);
  font-size: 14px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  margin-top: 2px;
}


/* Botón toggle password — reutilizado del form-field moderno de auth */
.security-form .form-field__toggle {
  position: absolute;
  right: var(--space-3);
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  top: 50%;
  transform: translateY(-50%);
  transition: color var(--transition-fast);
}

.security-form .form-field__toggle:hover {
  color: var(--text-strong);
}

.security-form .form-field__input--with-trailing {
  padding-right: calc(var(--space-4) + var(--space-6));
}


/* ----------------------------------------------------------------
   "Otras opciones" card — tercera section del grid en /security.
   Integra los 3 links de FYA2-259 (email_settings, terms_and_conditions,
   desactivate_account) con styling moderno equivalente a los items
   nav del sidebar. La variante --danger reusa el contrato sutil de
   rgba(219,6,50,0.06)/danger-700 ya probado en menuSidebar__logout.
   ---------------------------------------------------------------- */

.security-card--options .account-card__title i {
  background: rgba(0, 186, 212, 0.18);
  color: var(--brand-cyan-700);
}

.security-options {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.security-options li {
  margin: 0;
  padding: 0;
}

.security-options__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-default);
  font-size: var(--text-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-snug);
  text-decoration: none;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.security-options__link > i:first-child {
  width: 22px;
  text-align: center;
  font-size: 18px;
  color: var(--brand-navy-700);
  flex-shrink: 0;
  transition: color var(--transition-fast);
}

.security-options__link > span {
  flex: 1 1 auto;
  min-width: 0;
}

.security-options__arrow {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-muted);
  flex-shrink: 0;
  transition:
    color var(--transition-fast),
    transform var(--transition-fast);
}

.security-options__link:hover,
.security-options__link:focus-visible {
  background: var(--brand-cyan-100);
  color: var(--brand-cyan-700);
  outline: none;
}

.security-options__link:hover > i:first-child,
.security-options__link:focus-visible > i:first-child {
  color: var(--brand-cyan-700);
}

.security-options__link:hover .security-options__arrow,
.security-options__link:focus-visible .security-options__arrow {
  color: var(--brand-cyan-700);
  transform: translateX(2px);
}

.security-options__link:focus-visible {
  box-shadow: var(--focus-ring);
}

/* Variante --danger para "Dar de baja mi cuenta" — neutral por default,
   feedback rojo sutil en hover/focus (mismo contrato que el logout
   button del header_modern). */
.security-options__link--danger {
  color: var(--text-muted);
}

.security-options__link--danger > i:first-child {
  color: var(--text-muted);
}

.security-options__link--danger:hover,
.security-options__link--danger:focus-visible {
  background: rgba(219, 6, 50, 0.06);
  color: var(--danger-700, #8F031D);
}

.security-options__link--danger:hover > i:first-child,
.security-options__link--danger:focus-visible > i:first-child {
  color: var(--danger-600, #B80425);
}

.security-options__link--danger:hover .security-options__arrow,
.security-options__link--danger:focus-visible .security-options__arrow {
  color: var(--danger-600, #B80425);
}

.security-options__link--danger:active {
  background: rgba(219, 6, 50, 0.10);
}


/* Responsive security */
@media (max-width: 960px) {
  .security-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .security-card { padding: var(--space-4); }
  .security-form__submit { width: 100%; justify-content: center; }
  .security-options__link { padding: var(--space-3); }
}


/* ============================================================
   PREFERENCES VIEW — /preferences (paso 21)
   ============================================================ */

.preferences-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.preferences-card {
  padding: var(--space-6);
  gap: var(--space-4);
}

.preferences-card__description {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}


/* Theme switcher (Claro / Oscuro) */
.theme-switcher {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.theme-option {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  cursor: pointer;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
  overflow: hidden;
}

/* :hover unificado V9.5(b) — ver components/cards.css */

.theme-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.theme-option.is-active,
.theme-option:has(input[type="radio"]:checked) {
  border-color: var(--brand-cyan-500);
  box-shadow: 0 0 0 3px rgba(0, 186, 212, 0.15);
}

.theme-option__preview {
  height: 80px;
  border-radius: var(--radius-md);
  display: block;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
}

.theme-option__preview--light {
  background: linear-gradient(180deg, var(--neutral-50) 0%, #fff 100%);
}

.theme-option__preview--dark {
  background: linear-gradient(180deg, var(--brand-navy-800) 0%, var(--brand-navy-900) 100%);
}

.theme-option__preview-bar {
  display: block;
  height: 10px;
  width: 100%;
  background: var(--brand-navy-700);
}
.theme-option__preview--dark .theme-option__preview-bar {
  background: rgba(102, 217, 245, 0.28);
}

.theme-option__preview-content {
  display: block;
  height: 8px;
  width: 60%;
  background: var(--brand-cyan-500);
  border-radius: var(--radius-round);
  margin: var(--space-2);
}

.theme-option__preview--dark .theme-option__preview-content {
  background: rgba(102, 217, 245, 0.45);
}

.theme-option__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-family-base);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-strong);
  justify-content: center;
}

.theme-option__label i {
  color: var(--brand-cyan-700);
  font-size: 13px;
}

/* Indicador check para la activa */
.theme-option.is-active::after,
.theme-option:has(input[type="radio"]:checked)::after {
  content: "\f058";  /* fa-check-circle */
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "FontAwesome";
  font-weight: 900;
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  color: var(--brand-cyan-500);
  font-size: 16px;
  background: #fff;
  border-radius: var(--radius-round);
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* Profiles list */
.profiles-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.profile-item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--surface-app);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}

/* :hover unificado V9.5(b) — ver components/cards.css */

.profile-item--main {
  border-color: var(--brand-cyan-300);
  background: var(--brand-cyan-100);
}

.profile-item__avatar {
  /* Hereda del .signer-avatar pre-existente */
  width: 44px;
  height: 44px;
  font-size: 14px;
}

.profile-item__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.profile-item__email-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.profile-item__email {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  color: var(--text-strong);
  font-size: var(--text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: var(--tracking-snug);
}

.profile-item__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  background: var(--brand-cyan-100);
  color: var(--brand-cyan-700);
  border: 1px solid var(--brand-cyan-200);
  border-radius: var(--radius-round);
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

.profile-item--main .profile-item__badge {
  background: #fff;
}

.profile-item__alias {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.profile-item__alias-icon {
  color: var(--text-muted);
  font-size: 11px;
  flex-shrink: 0;
}

.profile-item__alias-input {
  flex: 1;
  min-width: 0;
  padding: 6px var(--space-3);
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-family-base);
  font-size: var(--text-sm);
  color: var(--text-default);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.profile-item__alias-input::placeholder {
  color: var(--text-muted);
  font-style: italic;
}

.profile-item__alias-input:hover {
  border-color: var(--border-default);
  background: var(--surface-raised);
}

.profile-item__alias-input:focus {
  outline: none;
  border-color: var(--brand-cyan-500);
  background: var(--surface-raised);
  box-shadow: 0 0 0 3px rgba(0, 186, 212, 0.15);
  color: var(--text-strong);
}


/* Link account CTA — card dashed clickeable */
.link-account-cta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-4);
  margin-top: var(--space-2);
  background: transparent;
  border: 2px dashed var(--border-default);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    transform var(--transition-fast);
  font-family: var(--font-family-base);
  text-align: left;
}

.link-account-cta:hover {
  border-color: var(--brand-cyan-500);
  background: var(--brand-cyan-100);
  transform: translateY(-1px);
}

/* V6.2: alineado a navy. El icon-container 44x44 ahora usa la paleta
   navy-100/700 — mantiene el patrón visual de "icono pill" con la
   identidad navy del design system unificado. */
.link-account-cta__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--brand-navy-100);
  color: var(--brand-navy-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  transition: background-color var(--transition-fast);
}

.link-account-cta:hover .link-account-cta__icon {
  background: var(--brand-navy-300);
  color: #fff;
}

.link-account-cta__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.link-account-cta__title {
  font-family: var(--font-family-display);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--text-strong);
  letter-spacing: var(--tracking-snug);
}

.link-account-cta__description {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.link-account-cta__plus {
  font-size: 14px;
  color: var(--brand-cyan-700);
  transition: transform var(--transition-fast);
}

.link-account-cta:hover .link-account-cta__plus {
  transform: scale(1.15) rotate(90deg);
}

/* ----------------------------------------------------------------
   Estado disabled — "Próximamente" hasta que exista el flujo
   OAuth-link a cuenta existente (alineado con develop FYA2-344).
   Sin hover transform, sin border cyan, cursor not-allowed.
   ---------------------------------------------------------------- */

.link-account-cta[disabled],
.link-account-cta:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.link-account-cta[disabled]:hover,
.link-account-cta:disabled:hover {
  border-color: var(--border-default);
  background: transparent;
  transform: none;
}

.link-account-cta[disabled]:hover .link-account-cta__icon,
.link-account-cta:disabled:hover .link-account-cta__icon {
  background: var(--brand-cyan-100);
}

.link-account-cta[disabled]:hover .link-account-cta__plus,
.link-account-cta:disabled:hover .link-account-cta__plus {
  transform: none;
}

/* Chip "Próximamente" dentro del body, debajo de title/description.
   Mismo contrato visual que .pricing-card__soon-badge / .soon-chip. */
.link-account-cta__soon {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: 3px 9px;
  border-radius: var(--radius-round);
  background: var(--brand-cyan-100);
  border: 1px solid var(--brand-cyan-200);
  color: var(--brand-cyan-700);
  font-size: 10px;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  font-weight: var(--font-weight-semibold);
  width: fit-content;
}

.link-account-cta__soon i {
  font-size: 9px;
}


/* Override legacy del botón "enlazar cuenta" (si quedara renderizado en
   alguna variante) — lo ocultamos cuando ya está el link-account-cta */
.preferences-card .btn.enlazar-cuenta {
  display: none !important;
}


/* Responsive preferences */
@media (max-width: 960px) {
  .preferences-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .preferences-card { padding: var(--space-4); }
  .theme-switcher { grid-template-columns: 1fr; gap: var(--space-2); }
  .theme-option { padding: var(--space-2); }
  .theme-option__preview { height: 64px; }

  .profile-item {
    grid-template-columns: auto 1fr;
    padding: var(--space-3);
    gap: var(--space-3);
  }

  .link-account-cta {
    flex-wrap: wrap;
    padding: var(--space-3);
  }
  .link-account-cta__plus { margin-left: auto; }
}


/* Entrada animada preferences */
.preferences-card,
.profile-item,
.theme-option {
  animation: account-fade-in var(--transition-base) var(--ease-out) both;
}

.preferences-grid .preferences-card:nth-child(1) { animation-delay: 0.08s; }
.preferences-grid .preferences-card:nth-child(2) { animation-delay: 0.14s; }

@media (prefers-reduced-motion: reduce) {
  .preferences-card, .profile-item, .theme-option { animation: none; }
}


/* ============================================================
   MODAL .modalOpcion — rediseño moderno (rut, phone, cancel-sub)
   ============================================================
   Aplica sobre el modal que se abre con request_rut=1 / request_phone=1 /
   cancel subscription. Legacy (components/modals.css) tiene la estructura
   base; aquí la modernizamos usando los tokens del design system.
   Especificidad (0,2,0) empata con el legacy y carga después via manifest. */

/* V8.8(a): blur subido de 4px a 8px para consistencia con
   .modal-pdf-firma (sign_position_modern.css:375) y
   .config-container dialog::backdrop (signers_modern.css). Patrón
   DS unificado para modales del wizard de cuenta. */
.modalOpcion.showOption {
  display: flex;
  background: rgba(14, 16, 36, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: modal-backdrop-in var(--transition-base) var(--ease-out) both;
  #auth_modal{
    display: flex !important;
  }
}

@keyframes modal-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modalOpcion .content.optionContent {
  margin: auto !important;
  /* space-8 = 32px; usamos 32px fijo para vertical, 28px horizontal
     (nota: --space-7 no existe en tokens; la declaración previa se
     invalidaba y padding caía a 0). */
  padding: 32px 28px !important;
  width: min(460px, calc(100vw - 32px)) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  gap: var(--space-5) !important;
  background: var(--surface-raised) !important;
  border-radius: var(--radius-2xl) !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: var(--elevation-4) !important;
  font-family: var(--font-family-base);
  animation: modal-card-in var(--transition-base) var(--ease-out) both;
}

@keyframes modal-card-in {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Title: tipografía display + color text-brand */
.modalOpcion .content.optionContent h2.title {
  font-family: var(--font-family-base) !important;
  font-size: var(--text-xl) !important;
  font-weight: var(--font-weight-bold) !important;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--text-brand) !important;
  margin: 0 !important;
  text-align: center !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

/* Tooltip-icon del title (y de .label-with-help, junto a labels de campo):
   .tooltip-icon es el wrapper con position relative, .info-icon es el
   botón circular visible, .tooltip-box es el bubble que aparece en hover. */
.modalOpcion .content.optionContent h2.title .tooltip-icon,
.modalOpcion .content.optionContent .label-with-help .tooltip-icon {
  position: relative !important;
  display: inline-flex !important;
  width: auto !important;
  height: auto !important;
  margin: 0 0 0 2px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}

.modalOpcion .content.optionContent h2.title .tooltip-icon .info-icon,
.modalOpcion .content.optionContent .label-with-help .tooltip-icon .info-icon {
  width: 20px !important;
  height: 20px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 11px !important;
  font-weight: var(--font-weight-bold) !important;
  font-style: normal !important;
  font-family: var(--font-family-base);
  border-radius: var(--radius-round) !important;
  border: 1.5px solid var(--brand-cyan-500) !important;
  color: var(--brand-cyan-700) !important;
  background: var(--brand-cyan-100) !important;
  cursor: help;
  line-height: 1;
}

/* Tooltip bubble: aparece al hover/focus del .tooltip-icon.
   Legacy lo deja con visibility:hidden pero sin selector :hover que lo
   active (o lo activa desde un contexto distinto). Lo fuerzamos. */
.modalOpcion .content.optionContent h2.title .tooltip-icon .tooltip-box,
.modalOpcion .content.optionContent .label-with-help .tooltip-icon .tooltip-box {
  position: absolute !important;
  bottom: calc(100% + 8px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  min-width: 240px;
  max-width: min(600px, calc(100vw - 32px));
  padding: var(--space-3) var(--space-4) !important;
  background: var(--neutral-900, #242E4C) !important;
  color: #fff !important;
  border-radius: var(--radius-md) !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-normal) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-align: center;
  white-space: normal;
  box-shadow: var(--elevation-2);
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
  z-index: 1;
}

/* Flecha apuntando al icono */
.modalOpcion .content.optionContent h2.title .tooltip-icon .tooltip-box::after,
.modalOpcion .content.optionContent .label-with-help .tooltip-icon .tooltip-box::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--neutral-900, #242E4C);
}

.modalOpcion .content.optionContent h2.title .tooltip-icon:hover .tooltip-box,
.modalOpcion .content.optionContent h2.title .tooltip-icon:focus-within .tooltip-box,
.modalOpcion .content.optionContent .label-with-help .tooltip-icon:hover .tooltip-box,
.modalOpcion .content.optionContent .label-with-help .tooltip-icon:focus-within .tooltip-box {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Body text: centrado, color muted suave */
.modalOpcion .content.optionContent p {
  margin: 0 !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--font-weight-medium) !important;
  color: var(--text-default) !important;
  text-align: center !important;
  line-height: var(--leading-normal);
}

.modalOpcion .content.optionContent strong {
  color: #fff !important;
}

.modalOpcion .content.optionContent p.payment-text {
  display: none;   /* texto legacy duplicado con account-text */
}

/* Label + input: alineado al design system (stacked, no inline) */
.modalOpcion .content.optionContent .container-labelInput {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-2) !important;
  align-items: stretch !important;
  margin: var(--space-2) 0 0 !important;
  width: 100% !important;
}

.modalOpcion .content.optionContent .container-labelInput label {
  font-family: var(--font-family-base);
  font-size: var(--text-sm) !important;
  font-weight: var(--font-weight-semibold) !important;
  color: var(--text-default) !important;
  padding: 0 !important;
  text-align: left;
}

.modalOpcion .content.optionContent .container-labelInput input {
  width: 100% !important;
  height: 44px;
  padding: 0 var(--space-4) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  background: var(--surface-raised) !important;
  font-family: var(--font-family-base);
  font-size: var(--text-md) !important;
  color: var(--text-strong) !important;
  text-align: left !important;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.modalOpcion .content.optionContent .container-labelInput input:focus {
  outline: none;
  border-color: var(--brand-cyan-500) !important;
  box-shadow: 0 0 0 3px rgba(0, 186, 212, 0.12);
}

.modalOpcion .content.optionContent .container-labelInput input::placeholder {
  color: var(--text-muted) !important;
}

/* Footer con botones — outline neutro + primary gradient cyan con glow.
   Mismo tratamiento que los CTAs del wizard / pricing cards. */
.modalOpcion .content.optionContent .containerBtnes {
  display: flex !important;
  justify-content: space-between !important;
  gap: var(--space-3) !important;
  &:not(.warning) { margin-top: var(--space-4) !important; }
}

.modalOpcion .content.optionContent .containerBtnes .btn {
  flex: 1 1 0;
  min-width: 0;
  height: 44px !important;
  padding: 0 var(--space-5) !important;
  font-family: var(--font-family-base) !important;
  font-size: var(--text-md) !important;
  font-weight: var(--font-weight-semibold) !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid transparent !important;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast) !important;
}

/* Outline: bg blanco + border neutral-300 + texto navy; hover cyan */
.modalOpcion .content.optionContent .containerBtnes .btn--outline {
  background: var(--surface-raised) !important;
  border-color: var(--border-default) !important;
  color: var(--text-strong) !important;
  box-shadow: none !important;
}

.modalOpcion .content.optionContent .containerBtnes .btn--outline:hover {
  background: var(--brand-cyan-100) !important;
  border-color: var(--brand-cyan-400) !important;
  color: var(--brand-cyan-700) !important;
}

/* Primary: navy sólido (mismo pattern que el login y el btn--primary
   global). Hover navy-500 más claro con lift sutil. */
.modalOpcion .content.optionContent .containerBtnes .btn--primary {
  background: var(--brand-navy-800) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px -4px rgba(22, 47, 133, 0.35) !important;
}

.modalOpcion .content.optionContent .containerBtnes .btn--primary:hover {
  background: var(--brand-navy-500) !important;
  box-shadow: 0 6px 16px -4px rgba(22, 47, 133, 0.45) !important;
}

.modalOpcion .content.optionContent .containerBtnes .btn--primary:active {
  transform: translateY(0) scale(0.98);
}

/* V8.8(a): OTP del modal "phone_otp_modal" (verificación de SMS).
   Override del legacy components/modals.css:396-413 (con border
   navy hardcoded #162f855e). Pisa por especificidad sin tocar el
   legacy. */
.modalOpcion .content.optionContent .container-inputRegistro {
  width: 100% !important;
  margin: var(--space-2) 0 0 !important;
}

.modalOpcion .content.optionContent .otp-container {
  display: flex !important;
  flex-wrap: nowrap;
  justify-content: center;
  gap: var(--space-2) !important;
  width: 100% !important;
}

.modalOpcion .content.optionContent .otp-container input.otp-box {
  width: 48px !important;
  max-width: 48px !important;
  height: 56px !important;
  min-height: 56px !important;
  padding: 0 !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  background: var(--surface-raised) !important;
  font-family: var(--font-family-base);
  font-size: var(--text-2xl) !important;
  font-weight: var(--font-weight-semibold) !important;
  color: var(--text-strong) !important;
  caret-color: var(--brand-cyan-500);
  text-align: center !important;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.modalOpcion .content.optionContent .otp-container input.otp-box:focus {
  outline: none;
  border-color: var(--brand-cyan-500) !important;
  box-shadow: 0 0 0 3px rgba(0, 186, 212, 0.18) !important;
  color: var(--text-strong) !important;
}

/* Responsive — en mobile el modal ocupa casi todo el ancho */
@media (max-width: 480px) {
  .modalOpcion .content.optionContent {
    padding: var(--space-6) var(--space-5) var(--space-5) !important;
    width: calc(100vw - var(--space-5)) !important;
  }
  .modalOpcion .content.optionContent h2.title { font-size: var(--text-lg) !important; }
  .modalOpcion .content.optionContent .otp-container input.otp-box {
    width: 40px !important;
    max-width: 40px !important;
    height: 48px !important;
    min-height: 48px !important;
    font-size: var(--text-xl) !important;
  }
}


/* ============================================================
   USER EDIT FORM — formulario inline dentro del <turbo-frame>
   user_frame del card .account-card "Cuenta Personal" en my_account.
   ============================================================ */

.user-edit-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

.user-edit-form__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-2);
}

.user-edit-form__actions .btn {
  min-width: 100px;
}

@media (max-width: 480px) {
  .user-edit-form__actions { flex-direction: column-reverse; }
  .user-edit-form__actions .btn { width: 100%; }
}


/* ============================================================
   /email_settings — V7.1 rediseño moderno
   ============================================================
   Vista accedida desde la card "Otras opciones" de /security.
   2 toggles modernos con .switch / .slider del component switch.css
   apilados en bloques con label + sub-hint a la izquierda, switch a
   la derecha. Footer del card con CTA Guardar disabled+Próximamente
   (V6.2 pattern hasta que FYA2-259 entregue endpoint).
   ============================================================ */

.email-settings-card .account-card__title i {
  background: rgba(0, 186, 212, 0.18);
  color: var(--brand-cyan-700);
}

.email-settings__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.email-settings__row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--neutral-50, #F8F8FC);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.email-settings__row:hover {
  background: var(--brand-cyan-100);
  border-color: var(--brand-cyan-200);
}

/* V7.1.1: feedback visual cuando el input está disabled (FYA2-259 sin
   backend todavía). El cursor cambia a not-allowed sobre la fila entera
   (label nativo intenta togglear el input y el browser no hace nada),
   el slider baja a opacity 0.55, y el hover NO cambia colores (anula
   el hover cyan para reforzar que no es accionable). Doble selector:
   :has() para browsers modernos, ~ .switch como fallback. */
.email-settings__row:has(input:disabled),
.email-settings__row input:disabled ~ .switch {
  cursor: not-allowed;
}

.email-settings__row input:disabled ~ .switch .slider {
  opacity: 0.55;
}

.email-settings__row:has(input:disabled):hover {
  background: var(--neutral-50, #F8F8FC);
  border-color: var(--border-subtle);
}

.email-settings__copy {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.email-settings__label {
  font-size: var(--text-md);
  font-weight: var(--font-weight-semibold);
  color: var(--text-strong);
  line-height: var(--leading-snug);
}

.email-settings__hint {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: var(--leading-normal);
}

.email-settings__row .switch {
  flex: 0 0 auto;
}

.email-settings__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}

/* Chip "Próximamente" — patrón V6.2 ya usado en plans/preferences. */
.email-settings__soon-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 10px;
  border-radius: var(--radius-round);
  background: var(--brand-cyan-100);
  border: 1px solid var(--brand-cyan-200);
  color: var(--brand-cyan-700);
  font-size: 11px;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  font-weight: var(--font-weight-semibold);
}

.email-settings__soon-badge i { font-size: 10px; }

.email-settings__submit {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

@media (max-width: 480px) {
  .email-settings__row {
    padding: var(--space-3);
    gap: var(--space-3);
  }
  .email-settings__footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .email-settings__submit { width: 100%; justify-content: center; }
  .email-settings__soon-badge { align-self: flex-start; }
}


/* ============================================================
   /terms_and_conditions — V7.1 rediseño moderno
   ============================================================
   Vista accedida desde la card "Otras opciones" de /security.
   Card prose con banner WIP arriba (alert variant:info) + typografía
   display en headings, body con line-height generoso y max-width 65ch
   para legibilidad. Contenido literal de develop preservado incluyendo
   placeholders [fecha] / [Nombre de la empresa] / "Proveedor" y el
   typo "definicones".
   ============================================================ */

/* Variante del main para vistas tipo prose: ocupa 1 col en lugar de
   grid auto-fit (no tiene sentido multi-column en un documento legal). */
.account-main--prose .account-main__grid {
  grid-template-columns: 1fr;
  max-width: 920px;
}

.terms-card .account-card__title i {
  background: rgba(0, 186, 212, 0.18);
  color: var(--brand-cyan-700);
}

/* Spacing entre el alert de banner y el body de prose. El partial
   shared/_alert ya tiene su propio margin-bottom global; sólo
   ajustamos top para que quede a 0 si es el primer hijo del card
   y para forzar separación clara del body. */
.terms-card .alert {
  margin-top: 0;
  margin-bottom: var(--space-4);
}

.terms-card__body {
  max-width: 65ch;
  font-size: var(--text-base);
  color: var(--text-default);
  line-height: var(--leading-loose, 1.7);
}

.terms-card__body p {
  margin: 0 0 var(--space-3) 0;
}

.terms-card__body p:last-child {
  margin-bottom: 0;
}

.terms-card__intro {
  font-size: var(--text-md);
  color: var(--text-strong);
}

.terms-card__intro strong {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-snug);
}

.terms-card__meta {
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-style: italic;
  margin-top: calc(var(--space-2) * -1);
}

.terms-card__body h2 {
  margin: var(--space-5) 0 var(--space-2);
  font-family: var(--font-family-display);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  color: var(--text-brand);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-snug);
}

.terms-card__body h2:first-of-type {
  margin-top: 0;
}

.terms-card__body h3 {
  margin: var(--space-4) 0 var(--space-2);
  font-family: var(--font-family-display);
  font-size: var(--text-md);
  font-weight: var(--font-weight-semibold);
  color: var(--text-strong);
}

.terms-card__body strong {
  color: var(--text-strong);
  font-weight: var(--font-weight-semibold);
}

.terms-card__divider {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: var(--space-5) 0;
}

/* Bullets con marcador cyan en vez del disco negro default del browser. */
.terms-card__body ul {
  list-style: none;
  padding-left: var(--space-5);
  margin: var(--space-3) 0;
}

.terms-card__body ul li {
  position: relative;
  margin-bottom: var(--space-2);
  padding-left: var(--space-1);
}

.terms-card__body ul li::before {
  content: "";
  position: absolute;
  left: calc(var(--space-5) * -1 + 2px);
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-round);
  background: var(--brand-cyan-500);
  flex-shrink: 0;
}

/* Definiciones con dt/dd: dt negrita display, dd indentado con line-
   height generoso. */
.terms-card__definitions {
  margin: var(--space-3) 0;
  display: grid;
  gap: var(--space-2);
}

.terms-card__definitions dt {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  color: var(--text-strong);
  margin-top: var(--space-2);
}

.terms-card__definitions dt:first-child {
  margin-top: 0;
}

.terms-card__definitions dd {
  margin: 0 0 0 var(--space-4);
  color: var(--text-default);
}

@media (max-width: 480px) {
  .terms-card__body { font-size: var(--text-sm); }
  .terms-card__body h2 { font-size: var(--text-md); }
  .terms-card__definitions dd { margin-left: var(--space-3); }
}


/* ============================================================
   /desactivate_account — V7.1 rediseño moderno con jerarquía invertida
   ============================================================
   Vista accedida desde la card "Otras opciones" de /security.
   Decisión UX: la acción SEGURA ("No, volver al inicio") es la primaria
   visual prominente; la DESTRUCTIVA ("Sí, dar de baja mi cuenta") es
   secundaria sutil con variante .btn--ghost.btn--danger (Commit 0 V7).
   Develop entregó la vista sin form_with ni endpoint backend, así que
   el botón destructivo va disabled + chip "Próximamente" (V6.2 pattern).

   Variante .account-card--warning: icono fa-triangle-exclamation en
   círculo amarillo suave (NO rojo agresivo — es advertencia, no error).
   ============================================================ */

.account-card--warning {
  border-color: rgba(245, 158, 11, 0.35);
  background: linear-gradient(180deg, rgba(254, 252, 232, 0.5) 0%, var(--surface-raised) 60%);
}

.account-card--warning:hover {
  border-color: rgba(245, 158, 11, 0.55);
}

.account-card--warning .account-card__title i {
  background: rgba(245, 158, 11, 0.18);
  color: #b45309;
}

.deactivate-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.deactivate-card__intro {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--font-weight-semibold);
  color: var(--text-strong);
}

.deactivate-card__consequences {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.deactivate-card__consequences li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--neutral-50, #F8F8FC);
  font-size: var(--text-sm);
  color: var(--text-default);
  line-height: var(--leading-normal);
}

.deactivate-card__consequences li i {
  color: var(--brand-cyan-600);
  font-size: 14px;
  margin-top: 2px;
  flex-shrink: 0;
}

.deactivate-card__question {
  margin: var(--space-4) 0 0;
  font-family: var(--font-family-display);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  color: var(--text-brand);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-snug);
}

.deactivate-card__footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

/* Acción SEGURA primaria: link a root_path, prominente. Hereda .btn--primary
   navy (V5.2/V6.2). El icon fa-arrow-left lo hace visualmente menos
   "destructivo" (es retroceder, no avanzar). */
.deactivate-card__safe {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  text-decoration: none;
}

.deactivate-card__safe i { font-size: 14px; }

/* Wrap del lado destructivo: chip + botón ghost danger.
   V7.1.2: cambiado a row en desktop para que el chip quede a la
   izquierda del botón danger en la misma línea horizontal. Antes
   era column y el wrap quedaba más alto que el primario (48px),
   creando un desbalance visual donde el danger parecía "colgar"
   debajo del centro. Con row + align-items center, el wrap tiene
   la altura del botón danger (36px) y se alinea naturalmente con
   el primario via el align-items:center del footer parent. */
.deactivate-card__danger-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  flex: 0 0 auto;
}

.deactivate-card__soon-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 3px 8px;
  border-radius: var(--radius-round);
  background: var(--brand-cyan-100);
  border: 1px solid var(--brand-cyan-200);
  color: var(--brand-cyan-700);
  font-size: 10px;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  font-weight: var(--font-weight-semibold);
}

.deactivate-card__soon-badge i { font-size: 9px; }

.deactivate-card__danger {
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-4);
  min-height: 36px;
}

/* MOBILE <768px: apilados verticales pero el SEGURO arriba (orden
   natural de lectura → acción segura aparece primero). */
@media (max-width: 768px) {
  .deactivate-card__footer {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
  }
  .deactivate-card__safe {
    width: 100%;
    order: 0;
  }
  /* En mobile vuelve a column para apilar chip arriba del botón
     (V7.1.2: el default desktop pasó a row). order:1 mantiene la
     danger-wrap abajo del primario; order:-1 sobre el chip dentro
     del wrap garantiza que aparezca arriba del botón. */
  .deactivate-card__danger-wrap {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    order: 1;
  }
  .deactivate-card__soon-badge {
    align-self: center;
    order: -1;
  }
  .deactivate-card__danger {
    width: 100%;
  }
}


/* ============================================================
   V8.8(c): /history_payments y /members — overrides modernos
   ============================================================
   Vistas legacy (history_payments.html.erb, members.html.erb)
   que no recibieron refactor a markup BEM (.account-card,
   .account-main__grid, etc.). Aplicamos tokens DS por especi-
   ficidad sin tocar el ERB ni los bloques legacy de
   dashboard.css:45-557. Selectores legacy intactos para que el
   JS / a11y sigan funcionando.
   ============================================================ */

/* Wrapper .miCuenta-content (legacy de .account-main): mismo
   layout que el moderno (flex 1, padding lateral, max-width). */
.miCuenta-container .miCuenta-content {
  flex: 1;
  min-width: 0;
  padding: var(--space-6);
  max-width: 1080px;
  display: block;
  align-items: stretch;
}

/* Header de las vistas — .history-title, .title-section
   ============================================================
   Legacy las centra y posiciona el "Volver" absoluto al
   left:20vw. Lo reemplazamos por un header moderno block,
   alineado a la izquierda, con back-link inline-flex arriba.
   V9.7: align-items → align-self. El elemento es flex CHILD
   (parent `.planes-content`/`.history-content`/etc. es flex
   column con align-items: center). `align-items: stretch` es
   no-op en un block child; `align-self: stretch` lo estira al
   cross axis (horizontal, porque flex-direction: column) para
   ocupar el 100% del ancho del card y dejar el back-link a la
   izquierda. Bug silencioso pre-existente (no parser error). */
.miCuenta-container .miCuenta-content .history-title,
.miCuenta-container .miCuenta-content .title-section {
  text-align: left !important;
  margin-bottom: var(--space-6) !important;
  display: block !important;
  align-self: stretch !important;
}

.miCuenta-container .miCuenta-content .history-title h3,
.miCuenta-container .miCuenta-content .title-section h3 {
  font-family: var(--font-family-display);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-strong);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0;
}

/* V10.1 — A11y: mismo fix que .back-link en plans_modern.css.
   color: --text-muted (2.3:1) → --text-default (~6.5:1);
   font-size: --text-sm (12px) → --text-base (14px). Cubre el back-link
   inline de /members y /history_payments. !important se mantiene por la
   pelea de specificity con el legacy de .history-title/.title-section. */
.miCuenta-container .miCuenta-content .history-title a.link-back,
.miCuenta-container .miCuenta-content .history-title a:not(.link-back),
.miCuenta-container .miCuenta-content .title-section a {
  position: static !important;
  left: auto !important;
  display: inline-flex !important;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  color: var(--text-default) !important;
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.miCuenta-container .miCuenta-content .history-title a:hover,
.miCuenta-container .miCuenta-content .title-section a:hover {
  color: var(--text-brand) !important;
  transform: translateX(-2px);
}

.miCuenta-container .miCuenta-content .history-title a i,
.miCuenta-container .miCuenta-content .title-section a i {
  margin-right: 0 !important;
  font-size: var(--text-xs);
}

/* Body como grid auto-fit, igual que .account-main__grid */
.miCuenta-container .miCuenta-content .history-body,
.miCuenta-container .miCuenta-content .members-body {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-5) !important;
  padding: 0 !important;
  width: 100% !important;
}

/* .container-usuario (members) — sección/agrupador con título
   propio. No es un card en sí; envuelve uno o varios cards. */
.miCuenta-container .miCuenta-content .container-usuario {
  display: flex !important;
  flex-direction: column;
  align-items: stretch !important;
  gap: var(--space-3);
}

.miCuenta-container .miCuenta-content .container-usuario h4.title-container {
  font-family: var(--font-family-base);
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
  color: var(--text-default);
  letter-spacing: var(--tracking-snug);
  border: none !important;
  padding: 0 !important;
  margin: 0 0 var(--space-2) !important;
  text-align: left !important;
  display: block !important;
}

/* .informacion-container como card moderno */
.miCuenta-container .miCuenta-content .informacion-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: var(--space-5) !important;
  background: var(--surface-raised) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--elevation-1) !important;
  gap: var(--space-2);
}

/* .titulo-box (history) — header del card de orden */
.miCuenta-container .miCuenta-content .history-body .informacion-container .titulo-box {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  border-bottom: none !important;
  width: 100%;
  gap: var(--space-3);
  font-family: var(--font-family-base);
  font-size: var(--text-md);
  font-weight: var(--font-weight-semibold);
  color: var(--text-strong);
  margin: 0 !important;
  padding-bottom: var(--space-2) !important;
}

.miCuenta-container .miCuenta-content .history-body .informacion-container .titulo-box p {
  display: inline-flex !important;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0 !important;
  padding: 0 !important;
  font-weight: var(--font-weight-bold);
  color: var(--text-brand);
}

.miCuenta-container .miCuenta-content .history-body .informacion-container .titulo-box p span {
  margin: 0 !important;
}

.miCuenta-container .miCuenta-content .history-body .informacion-container p {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0 !important;
  padding: 0 !important;
  line-height: var(--leading-normal);
}

/* .info-members (members) — rows label + value */
.miCuenta-container .miCuenta-content .members-body .info-members {
  display: grid !important;
  grid-template-columns: minmax(80px, auto) 1fr !important;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) 0;
}

.miCuenta-container .miCuenta-content .members-body .info-members + .info-members {
  border-top: 1px solid var(--border-subtle);
}

.miCuenta-container .miCuenta-content .members-body .info-members p {
  margin: 0 !important;
  padding: 0 !important;
  font-size: var(--text-sm);
  color: var(--text-muted);
  min-width: 0 !important;
}

.miCuenta-container .miCuenta-content .members-body .info-members p.info {
  font-weight: var(--font-weight-semibold) !important;
  color: var(--text-strong);
}

/* .informacion-container.agregar-miembro — card disabled
   (PRÓXIMAMENTE). Legacy aplica opacity:0.2 a los inputs; lo
   subimos a 0.55 sobre todo el card para mantener legibilidad
   del título mientras se ve "atenuado". */
.miCuenta-container .miCuenta-content .informacion-container.agregar-miembro {
  position: relative;
  opacity: 0.65;
  cursor: not-allowed;
}

.miCuenta-container .miCuenta-content .informacion-container.agregar-miembro .info-members {
  opacity: 1 !important;
}

.miCuenta-container .miCuenta-content .informacion-container.agregar-miembro .info-members p {
  color: var(--text-default);
  font-weight: var(--font-weight-semibold);
}

.miCuenta-container .miCuenta-content .informacion-container.agregar-miembro .open-modal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-round);
  background: var(--brand-cyan-100);
  color: var(--brand-cyan-700);
  cursor: not-allowed;
  margin: 0 !important;
}

.miCuenta-container .miCuenta-content .informacion-container.agregar-miembro .open-modal i {
  font-size: var(--text-sm);
  padding: 0 !important;
}

/* Chip "PRÓXIMAMENTE" (mismo patrón que en home — cyan-100/700) */
.miCuenta-container .miCuenta-content .agregar-miembro .proximamente {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  background: var(--brand-cyan-100);
  color: var(--brand-cyan-700);
  border-radius: var(--radius-round);
  font-family: var(--font-family-base);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* Empty state ("no hay info") — texto centrado muted */
.miCuenta-container .miCuenta-content .history-body > p,
.miCuenta-container .miCuenta-content .members-body > p {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-sm);
  padding: var(--space-6);
  background: var(--surface-raised);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-xl);
}

/* Responsive — single column en mobile, padding compacto */
@media (max-width: 767px) {
  .miCuenta-container .miCuenta-content {
    padding: var(--space-4);
  }
  .miCuenta-container .miCuenta-content .history-body,
  .miCuenta-container .miCuenta-content .members-body {
    grid-template-columns: 1fr;
    gap: var(--space-4) !important;
  }
  .miCuenta-container .miCuenta-content .history-title h3,
  .miCuenta-container .miCuenta-content .title-section h3 {
    font-size: var(--text-xl);
  }
}


/* ============================================================
   V11.2 — Dark mode overrides del dashboard moderno
   ============================================================
   Cobertura de hallazgos visuales QA-verificados en
   localhost:3000 con <html data-theme="dark"> activo.

   Hallazgo 1: .account-card__title i — el icon squircle usa
     --brand-cyan-100 (#EBF4F5) como bg. En dark queda blanco
     pálido sobre superficie oscura. Override a cyan-500
     translúcido + texto cyan-300 (sigue siendo cyan acento,
     pero legible).

   Hallazgo 2: .account-card hereda color:#000 del
     body{color:#000} en base/reset.css:41 (cascada legacy).
     Override SOLO en dark — light queda intacto.
     NOTA: el plan inicial sugería el fix sin selector
     [data-theme], pero --text-default light = neutral-700
     ≠ #000 → habría cambiado light. Trip-wire documentado en
     bitácora. Solución: override solo dark, fix root del body
     queda para V11.8 (cleanup CSS legacy).

   Hallazgo 3: .security-card--tips usa --brand-navy-100 +
     color:#000 hardcoded — card pale en light, catastrófico
     en dark (bg claro con texto claro heredado de los hijos).
     Override completo bg/border/color en dark.
   ============================================================ */

[data-theme="dark"] .account-card__title i {
  background-color: rgba(0, 186, 212, 0.15);   /* cyan-500 @ 15% */
  color: var(--brand-cyan-300);                 /* #66D9F5 */
}

[data-theme="dark"] .account-card {
  color: var(--text-default);
}

[data-theme="dark"] .security-card--tips {
  background-color: rgba(34, 45, 139, 0.20);   /* navy-700 @ 20% */
  border-color: rgba(34, 45, 139, 0.30);       /* navy-700 @ 30% */
  color: var(--text-default);
}


/* ============================================================
   V11.2-bis — Override de wrappers legacy con bg light hardcoded
   ============================================================
   QA visual de V11.2 con Chrome MCP detectó que /home expone el
   bg #F8F8FC literal de los wrappers .content-section y
   .content-section .bodyFirma (application.css:91, 95). Otras
   vistas del dashboard (/my_account, /security, /payments,
   /preferences) lo enmascaran con .miCuenta-container — pero
   /home no tiene ese descendiente, así que el bg light queda
   expuesto y vuelve invisible al H1 .home-hero__name (blanco
   sobre blanco).

   La regla legacy de .bodyFirma vive ANIDADA dentro de
   .content-section en application.css — selector efectivo
   .content-section .bodyFirma (specificity [0,2,0]). Por eso
   el override usa el mismo selector encadenado, no main.bodyFirma
   (que daría [0,1,1] y perdería la cascada).

   Fix root (refactor del hex en application.css a token) queda
   diferido a V11.8 (cleanup CSS legacy).
   ============================================================ */

[data-theme="dark"] .content-section,
[data-theme="dark"] .content-section .bodyFirma {
  background: var(--surface-app);
}


/* ============================================================
   V11.3 — Cobertura adicional dark mode /preferences
   ============================================================
   H: .profile-item--main — variante "perfil principal" usa
      bg cyan-100 hardcoded como acento light. En dark queda
      cuadro claro con texto blanco invisible. Override
      translúcido cyan-500 al 10% + border al 24% — preserva
      identidad de acento sin sacrificar legibilidad.
   I: .link-account-cta__icon — squircle navy-100/navy-700
      hardcoded. Mismo patrón que B de V11.3: navy-300
      translúcido + cyan-300 (paleta unificada de squircles
      dark). Hover state intacto (navy-300 sobre dark queda
      razonable, no requiere override en V11.3).
   ============================================================ */

[data-theme="dark"] .profile-item--main {
  background-color: rgba(0, 186, 212, 0.10);   /* cyan-500 @ 10% */
  border-color: rgba(0, 186, 212, 0.24);
}

[data-theme="dark"] .link-account-cta__icon {
  background-color: rgba(196, 200, 255, 0.16);  /* navy-300 @ 16% */
  color: var(--brand-cyan-300);
}


/* ============================================================
   V11.4 — Sidebar miCuenta en dark
   ============================================================
   QA visual detectó que aside.miCuenta-sidebar.account-nav
   seguía con bg #ffff en dark. Legacy en dashboard.css:14
   está nested bajo .miCuenta-container (línea 11) con CSS
   native nesting → specificity efectiva supera al override
   moderno estándar. Mismo patrón que .container-opciones
   (V11.3-bis). Resolución: !important en background.

   Doble selector defensivo — el template renderea ambas
   clases en el mismo <aside class="miCuenta-sidebar account-nav">.
   Refactor del legacy diferido a V11.8.
   ============================================================ */

[data-theme="dark"] .miCuenta-sidebar,
[data-theme="dark"] aside.account-nav {
  background: var(--surface-raised) !important;
}


/* ============================================================
   V11.4-bis — Color de items del sidebar miCuenta en dark
   ============================================================
   El bloque legacy de .miCuenta-sidebar en dashboard.css tiene
   nested .miCuenta-sidebar ul li a { color: #222D8B } (y otro
   bloque para .option-selected a). Selector efectivo
   [0,1,3] supera al .account-nav__link moderno [0,1,0]. En
   light navy-700 sobre blanco da contraste ~10:1 (OK); en dark
   navy-700 sobre --surface-raised da 1.42:1 (WCAG fail).

   El item activo ya queda en text-brand vía otra regla del
   moderno, pero lo declaramos explícito por consistencia y para
   blindar contra futuros cambios en el legacy.

   Misma deuda nested que V11.3-bis (.container-opciones) y
   V11.4 J (.miCuenta-sidebar bg) — todos en el mismo bloque
   legacy de dashboard.css. V11.8 podrá eliminar los 3
   !important de una sola vez al refactorizar el legacy.
   ============================================================ */

[data-theme="dark"] .miCuenta-sidebar ul li a {
  color: var(--text-default) !important;
}

[data-theme="dark"] .miCuenta-sidebar ul li.option-selected a {
  color: var(--text-brand) !important;
}


/* ============================================================
   V11.5b — Hover sidebar miCuenta en dark
   ============================================================
   .account-nav__link:hover (dashboard_modern.css:69) declara
   bg --brand-navy-100 + color --text-brand. El primitivo
   navy-100 no se redefine en dark → bg #EFEFFD claro sobre
   superficie dark, contraste de texto cae a 1.41-1.51:1
   (WCAG fail).

   Mapping V11.5b:
   - No-activo: bg cyan @ 10% + color --text-strong.
     Doctrina cyan-translúcido (V11.3) extendida a sidebar
     hover. Contraste ≈14:1 sobre composición dark.
   - Activo: bg --text-brand translúcido @ 12% + color
     --text-brand. Diferenciación clara del estado no-activo,
     contraste ≥10:1.
   Alpha por rol jerárquico (10/12%) consistente con doctrina V11.

   Trip-wire walker rg: !important asimétrico requerido.
     - bg NO compite con !important legacy → override sin escalar.
     - color SÍ compite con V11.4-bis arriba
       ([data-theme="dark"] .miCuenta-sidebar ul li a {
          color: --text-default !important; })
       que matchea durante :hover por selector descendiente.
       Sin !important el text-default V11.4-bis ganaría.
   ============================================================ */

[data-theme="dark"] .account-nav__link:hover {
  background: rgba(0, 186, 212, 0.10);            /* cyan-500 @ 10% */
  color: var(--text-strong) !important;
}

[data-theme="dark"] li.option-selected .account-nav__link:hover {
  background: rgba(196, 200, 255, 0.12);          /* text-brand @ 12% */
  color: var(--text-brand) !important;
}


/* ============================================================
   V11.5c — Empty CTA "Agregar celular" en dark
   ============================================================
   .account-card__empty-cta declara bg navy-100 + color navy-700
   (primitivos light-only). En dark queda pastilla casi blanca
   sobre layout oscuro — mismo bug "flash claro" del patrón
   sistémico.

   Override translúcido cyan @ 10% + text-strong. El <i> y <span>
   interiores quedan con `color: inherit` (en realidad ya heredan
   por default, pero el legacy nested
   `label, h4, p, i { color: #222D8B }` en dashboard.css:407 ataca
   también al <i> aquí porque la cadena bajo .miCuenta-container
   lo alcanza). Override del color en padre con !important para
   blindar, e inherit explícito en hijos.

   Hover (.account-card__empty-cta:hover) tiene bg navy-300 +
   color #fff — funciona razonable en dark (navy-300 sobre dark
   + blanco). NO se toca; si QA lo objeta, V11.5c-bis.
   ============================================================ */

[data-theme="dark"] .account-card__empty-cta {
  background: rgba(0, 186, 212, 0.10);            /* cyan-500 @ 10% */
  color: var(--text-strong) !important;
  border-color: rgba(0, 186, 212, 0.24);
}

[data-theme="dark"] .account-card__empty-cta i,
[data-theme="dark"] .account-card__empty-cta span {
  color: inherit !important;
}


/* V11.5c-bis — Hover feedback distintivo de .account-card__empty-cta.
   V11.5c reposo (cyan @10%) ganaba la cascada también durante el
   :hover legacy (.account-card__empty-cta:hover bg navy-300, color
   #fff, translateY -1px) — el transform sí aplicaba pero el cambio
   de bg/color se cancelaba. Resultado: el botón saltaba 1px sin
   feedback de color, hover indistinguible del reposo.

   Override hover dark con alpha 20% (vs 10% reposo) — doctrina
   alpha-por-rol V11 (más activo = más saturado, mismo patrón
   .upload-container.drag-over en V11.5a-ter). border cyan-400
   refuerza el feedback. Sin !important — specificity [0,3,1]
   gana al hover legacy [0,2,0]. translateY del legacy se
   preserva (transform no compite). */

[data-theme="dark"] .account-card__empty-cta:hover {
  background: rgba(0, 186, 212, 0.20);            /* cyan-500 @ 20% */
  color: var(--text-strong);
  border-color: var(--brand-cyan-400);
}


/* ============================================================
   V11.5e — Auditoría Bloque A (security íconos + badge main)
   ============================================================
   QA visual de superficies no tocadas reveló 2 fixes en
   dashboard_modern (el 3ro va en payments_modern):

   Fix 1: .security-options__link i (color navy-700 moderno
   L.956 + legacy nested label/h4/p/i en dashboard.css:407)
   sobre raised dark → 1.42:1 ilegible. Override cyan-300 con
   !important por legacy nested (mismo patrón V11.5c Fix 1/2/3).

   Fix 2: .profile-item--main .profile-item__badge declara
   bg: #fff hardcoded (L.1252) — pastilla blanca sobre layout
   dark, además contraste cyan-700 sobre #fff cae a 3.34:1 AA fail.
   Override text-brand @16% + color text-brand. Alpha 16%
   intermedio (entre 12% sidebar hover-activo y 20% drag-over)
   identifica el badge "destacado" del perfil principal sin
   romper la diferenciación visual de badges genéricos
   (que siguen cyan-100/cyan-700 base).
   ============================================================ */

[data-theme="dark"] .security-options__link i {
  color: var(--brand-cyan-300) !important;
}

[data-theme="dark"] .profile-item--main .profile-item__badge {
  background: rgba(196, 200, 255, 0.16);          /* text-brand @ 16% */
  color: var(--text-brand);
}


/* ============================================================
   V11.5g — Vista /members "Usuarios" dark
   ============================================================
   Auditoría visual reveló bug sistémico: toda la vista (8
   elementos) bajo .miCuenta-container con texto navy-700
   hardcoded ilegible (1.42-1.62:1). Causa: legacy nested
   dashboard.css:407-413 (label,h4,p,i { color: #222D8B }) con
   specificity expandida bajo .miCuenta-container pisa los
   modernos que ya declaraban text-default/text-muted.

   Mapping del override:
   - h4.title-container ("Usuario actual" / "Otros usuarios")
     → text-strong (titular de sección, máxima jerarquía).
   - p y p.info → text-default (labels y valores al mismo
     nivel semántico, contraste 10:1 sobre raised).
   - i interno → cyan-300 (doctrina V11.5c íconos).
   - .agregar-miembro .proximamente (badge "PRÓXIMAMENTE" en
     card "Agregar usuarios") → cyan-300 @16% + cyan-300
     (doctrina V11.5e/V11.5f Fix 5 .soon-chip).

   Corrección al plan: el selector real del badge es
   .miCuenta-container .agregar-miembro .proximamente
   (dashboard_modern.css:2531), NO .members-body .proximamente
   ni .planes-content.miembros .proximamente.

   !important defensivo en las 4 (legacy nested + posible
   nesting invisible). Eliminables en V11.9.
   ============================================================ */

[data-theme="dark"] .members-body h4.title-container,
[data-theme="dark"] .members-body .container-usuario h4.title-container {
  color: var(--text-strong) !important;
}

[data-theme="dark"] .members-body p,
[data-theme="dark"] .members-body p.info {
  color: var(--text-default) !important;
}

[data-theme="dark"] .members-body i {
  color: var(--brand-cyan-300) !important;
}

[data-theme="dark"] .miCuenta-container .agregar-miembro .proximamente {
  background: rgba(102, 217, 245, 0.16) !important;   /* cyan-300 @ 16% */
  color: var(--brand-cyan-300) !important;
}


/* ============================================================
   V11.5h — Bloque C: validador password + botones "labeled"
   ============================================================
   QA visual Bloque C (formularios/estados). 2 bugs puntuales —
   el resto de los forms pasa limpio (inputs, labels, focus, etc).

   C1: .password-requirements .valid usa --success-700
   (#15803D) tanto en auth_modern.css:262-267 como en
   dashboard_modern.css:783-790. Sobre raised dark = 3.74:1
   AA fail. Inconsistencia interna: el ÍCONO valid (selector
   ~ i, p:has(.valid) i) ya usa --success-500 (#16A34A) y
   funciona 7.80:1. Override del texto unifica con el ícono.

   C2: .account-card__action--labeled (dashboard_modern.css:448)
   declara bg cyan-100 + color cyan-700 → 3.34:1 + flash light
   en dark. Mismo patrón badge soft que V11.5e/f/g. Doctrina
   V11 alpha 16% + cyan-300.

   Hover de C2 (.account-card__action--labeled:hover en L.468)
   declara bg cyan-200 + border cyan-400 — mismo problema en
   dark, pero el plan V11.5h NO lo incluyó explícitamente.
   Anotado para V11.5h-bis si QA lo detecta.
   ============================================================ */

[data-theme="dark"] .password-requirements .valid,
[data-theme="dark"] .password-requirements span.valid,
[data-theme="dark"] .security-form .password-requirements .valid {
  color: var(--success-500) !important;
}

[data-theme="dark"] .account-card__action--labeled {
  background: rgba(102, 217, 245, 0.16);              /* cyan-300 @ 16% */
  color: var(--brand-cyan-300);
}


/* ============================================================
 * V11.8a — Dark mode sub-vistas dashboard + fix hover .back-link
 * ============================================================
 * 3 frentes coordinados sobre 3 vistas hermanas
 * (/email_settings, /terms_and_conditions, /desactivate_account)
 * + fix WCAG del hover de .back-link en dark mode.
 *
 * Frente 1 — Dark mode 9 white-bgs preexistentes:
 *   - /email_settings: .email-settings__row reposo + hover +
 *     .email-settings__soon-badge (bg neutral-50 / cyan-100 light
 *     hardcoded, sin variante dark)
 *   - /terms_and_conditions: .alert--info (bg info-50 hardcoded en
 *     components/alerts.css:162)
 *   - /desactivate_account: .deactivate-card__consequences li × 5
 *     (bg neutral-50 hardcoded)
 *
 * Doctrina alpha-por-rol V11 (rangos consolidados §11.3):
 *   - 3% wrappers muy sutil (rows reposo, consequences li)
 *   - 6% hover sutil (rows hover)
 *   - 10% alert info (patrón alert dark)
 *   - 16% badge soft (soon-badge — patrón V11.6/V11.7c)
 *   - 24% border hover
 *
 * Frente 3 — Fix hover .back-link contraste 1.46:1 (FAIL WCAG AA):
 *   La regla base en plans_modern.css:68-71 usa `bg neutral-100 +
 *   color text-brand` que en dark resulta bg light + text light =
 *   1.46:1. Fix: cyan-300 @8% bg + text-brand → 8.50:1 PASS AAA.
 *
 * 0 !important agregados. Reglas legacy intactas (light pixel-perfect).
 * ============================================================ */

/* /email_settings — rows + badge "Próximamente" */
[data-theme="dark"] .email-settings__row {
  background: rgba(245, 245, 251, 0.03);              /* blanco @3% — wrapper muy sutil */
  border-color: var(--border-default);                /* token theme-aware */
}

[data-theme="dark"] .email-settings__row:hover {
  background: rgba(102, 217, 245, 0.06);              /* cyan-300 @6% */
  border-color: rgba(102, 217, 245, 0.24);            /* cyan-300 @24% border hover */
}

/* V11.8b — fix hover sobre rows con input disabled (feature "Próximamente").
   La regla legacy `.email-settings__row:has(input:disabled):hover` en
   dashboard_modern.css:1902 declara `bg var(--neutral-50)` hardcoded con
   specificity [0,3,1] — el override V11.8a `.email-settings__row:hover`
   [0,2,1] perdía contra la legacy en rows con input disabled (2 rows
   "Próximamente" del módulo). Override scoped específico para
   `:has(input:disabled):hover` con specificity [0,4,1] gana sin
   ambigüedad. Mismo bg sutil del reposo (no cambia visualmente entre
   reposo y hover en estado disabled — coherente con cursor: not-allowed). */
[data-theme="dark"] .email-settings__row:has(input:disabled):hover {
  background: rgba(245, 245, 251, 0.03);              /* blanco @3% — mismo del reposo */
  border-color: rgba(245, 245, 251, 0.08);            /* border-default dark */
}

[data-theme="dark"] .email-settings__soon-badge {
  background: rgba(102, 217, 245, 0.16);              /* cyan-300 @16% badge soft */
  border-color: rgba(102, 217, 245, 0.24);
  color: var(--brand-cyan-300);                       /* #66D9F5 legible en dark */
}

/* /terms_and_conditions — alert info (definida en components/alerts.css) */
[data-theme="dark"] .alert--info {
  background: rgba(59, 130, 246, 0.10);               /* info-500 @10% — patrón alert dark */
  border-color: rgba(59, 130, 246, 0.24);
  color: var(--text-default);
}

/* /desactivate_account — consequences list items */
[data-theme="dark"] .deactivate-card__consequences li {
  background: rgba(245, 245, 251, 0.03);              /* blanco @3% — fila sutil */
  color: var(--text-default);
}

[data-theme="dark"] .deactivate-card__consequences li i {
  color: var(--brand-cyan-300);                       /* consistencia con squircle V11.6f */
}

/* Frente 3 — Fix hover .back-link bajo contraste en dark.
 * La regla base en plans_modern.css:68-71 con bg neutral-100 + color
 * text-brand resulta 1.46:1 en dark (bg light + text light). Aquí
 * sobreescribimos solo en dark: bg cyan-300 @8% sobre surface-raised
 * + text-brand → 8.50:1 AAA. Light intacto. */
[data-theme="dark"] .back-link:hover {
  background: rgba(102, 217, 245, 0.08);              /* cyan-300 @8% */
  color: var(--text-brand);                            /* #C4C8FF dark, ya theme-aware */
}

/* ============================================================
 * FIN V11.8a
 * ============================================================ */
/*
 * views/payments_modern.css — Pagos y planes moderno (paso 12)
 * FirmaYa / zappb
 *
 * Aditivo sobre dashboard.css + dashboard_modern.css (paso 5d).
 * Rediseña la vista /payments con:
 *   - Pricing card con plan name destacado + precio display XL + features
 *   - Cards de firmas disponibles con icono grande + contador + gauge
 *   - Grid de acciones (Ver planes / Miembros / Historial) como cards
 *   - "Cancelar suscripción" como acción secundaria sutil al final
 *
 * Preserva: data-action="click->layout#goPlanes", Stimulus cancel-subscription,
 *           rut_modal, partial account_sidebar, buttons to request_store_id.
 */


/* ============================================================
   OVERRIDE LEGACY — neutralizamos el círculo $precio y la card navy
   ============================================================ */

/* V9.6: prefix .miCuenta-container .miCuenta-content para subir
   specificity a (0,4,0) y ganarle a dashboard_modern.css:2374
   (`.miCuenta-container .miCuenta-content .informacion-container`,
   (0,3,0) + !important) que pintaba este wrapper como card moderno
   y producía el bug "doble card" en /payments. Ambas reglas usan
   !important, así que la batalla se resuelve por specificity.
   Scope deliberado a .pagos-body porque .informacion-container SÍ
   debe verse como card en /members y /history_payments. Lección
   DS: specificity war entre !importants modernos (extiende V8.2,
   que cubría legacy ID selectors). */
.miCuenta-container .miCuenta-content .pagos-body .informacion-container {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  /* El legacy tiene align-items: center (flex-column), que impedía que
     el .plan-card y .signatures-card se estiraran al ancho del container.
     Quedaban shrunk al tamaño del contenido (~287px). */
  align-items: stretch !important;
  /* Legacy .informacion-container usa margin: 0 auto + min-width: 370px
     lo cual centra el wrapper dentro de su grid cell y deja el plan-card
     desplazado ~90px a la derecha de la columna. Forzamos margin 0 y
     width 100% para que el card ocupe toda la columna, flush-left. */
  margin: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
}

.pagos-body .paquetesFirma-container {
  display: grid !important;
  gap: var(--space-4);
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* Oculta el H4 legacy "Plan actual" / "Firmas disponibles" — ya viene
   reemplazado por el header de cada card moderna abajo */
.pagos-body .informacion-container > h4.titulo-box {
  display: none;
}

/* Oculta el botón "Cambiar plan" legacy — duplicado por el de la pricing card */
.pagos-body .informacion-container .btn-cambiarPlan {
  display: none;
}


/* ============================================================
   HEADER DE LA VISTA
   ============================================================ */

/* Override del .miCuenta-content padre (legacy flex + justify-content:
   center) cuando contiene .pagos-content. Sin esto, todo el bloque
   de payments queda empujado al centro del viewport en vez de
   flush-left desde el sidebar como las otras vistas del dashboard. */
.miCuenta-container .miCuenta-content:has(.pagos-content) {
  justify-content: flex-start !important;
}

/* Override legacy .pagos-content que es flex column + align-items:
   center (dashboard.css, native nesting). Lo forzamos a stretch
   para que title/subtitle/cards queden left-aligned como el resto
   de las vistas del dashboard (my_account, security, preferences)
   que usan .account-main. */
.miCuenta-container .pagos-content {
  align-items: stretch !important;
  max-width: 1080px;
  width: 100%;
  padding: 0 var(--space-6);
}

/* Title alineado al patrón .account-main__title (mismo tamaño, color
   text-brand navy, font-family base — NO display). */
.pagos-title {
  margin-bottom: var(--space-6);
  text-align: left !important;
}

.pagos-title h3 {
  font-family: var(--font-family-base) !important;
  font-size: var(--text-display-sm) !important;
  font-weight: var(--font-weight-bold) !important;
  letter-spacing: normal !important;
  line-height: var(--leading-snug) !important;
  color: var(--text-brand) !important;
  margin: 0 0 var(--space-1) !important;
  text-align: left !important;
}

.pagos-title span {
  color: var(--text-muted) !important;
  font-size: var(--text-base) !important;
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-normal);
  text-align: left;
}


/* ============================================================
   CONTAINER PRINCIPAL — grid de secciones
   ============================================================ */

.pagos-content {
  font-family: var(--font-family-base);
}

.pagos-body {
  display: flex !important;
  flex-direction: column;
  gap: var(--space-6);
}

.container-boxFirmas {
  display: grid !important;
  grid-template-columns: 1.35fr 1fr;
  gap: var(--space-5);
  padding: 0 !important;
  background: transparent !important;
}


/* ============================================================
   PRICING CARD — plan actual destacado
   ============================================================ */

.plan-card {
  position: relative;
  background: linear-gradient(155deg, var(--brand-navy-700) 0%, var(--brand-navy-800) 55%, var(--brand-navy-900) 100%);
  color: var(--text-on-brand);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--elevation-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.plan-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 88% 20%, rgba(0, 186, 212, 0.35) 0%, transparent 40%),
    radial-gradient(circle at 15% 110%, rgba(73, 183, 210, 0.22) 0%, transparent 55%);
}

.plan-card::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -60px;
  width: 220px;
  height: 220px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'><circle cx='30' cy='30' r='1' fill='%23ffffff' fill-opacity='0.12'/></svg>");
  background-size: 24px 24px;
  z-index: -1;
  opacity: 0.6;
}

.plan-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.plan-card__eyebrow {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--brand-cyan-200);
  font-weight: var(--font-weight-semibold);
}

.plan-card__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px var(--space-3);
  border-radius: var(--radius-round);
  background: rgba(102, 217, 245, 0.16);
  border: 1px solid rgba(102, 217, 245, 0.28);
  color: var(--brand-cyan-200);
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

.plan-card__badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-round);
  background: var(--brand-cyan-300);
  box-shadow: 0 0 0 3px rgba(102, 217, 245, 0.2);
}

.plan-card__name {
  font-family: var(--font-family-display);
  font-size: clamp(28px, 3vw, var(--text-display-md));
  font-weight: var(--font-weight-extra);
  color: #fff;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0;
}

.plan-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: var(--space-2) 0 var(--space-4);
  font-family: var(--font-family-display);
}

.plan-card__price-amount {
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: var(--font-weight-extra);
  color: #fff;
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}

.plan-card__price-period {
  font-size: var(--text-md);
  color: rgba(255, 255, 255, 0.65);
  font-weight: var(--font-weight-medium);
}

.plan-card__price-free {
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: var(--font-weight-bold);
  color: var(--brand-cyan-200);
  letter-spacing: var(--tracking-snug);
}

/* Features list con checks */
.plan-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.plan-card__features li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
}

.plan-card__features li::before {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-round);
  background: rgba(0, 186, 212, 0.22);
  border: 1px solid rgba(102, 217, 245, 0.45);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2366D9F5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
}

.plan-card__footer {
  margin-top: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  justify-content: flex-start;
}

/* V9.5(c): migrado a .btn .btn--primary del DS. Sin overrides en
   el bloque base — las dimensiones canónicas (40px / 8px 30px /
   gap 5px / text-md) reemplazan las custom previas. Mini regresión
   visual aceptada. Los descendant `> span` e `i` siguen
   ajustándose para alinear el glyph FA con el texto. */
.plan-card__cta > span {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.plan-card__cta i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  height: 1em;
  /* El glyph fa-arrow-right de FA6 tiene su visual center ligeramente
     por debajo del center de la caja del carácter (padding interno del
     path SVG). Se sube 1px para que calce con la x-height del texto. */
  transform: translateY(-1px);
}


/* ============================================================
   SIGNATURES CARD — firmas disponibles con gauge
   ============================================================ */

.signatures-card {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--elevation-1);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.signatures-card__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space-1);
  p{
    margin: 0 !important;
  }
}

.signatures-card__title {
  font-family: var(--font-family-display);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-snug);
  color: var(--text-strong);
  margin: 0;
}

.signatures-card__subtitle {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin: 0;
}

.signatures-card__items {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.signatures-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--surface-app);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}

/* :hover unificado V9.5(b) — ver components/cards.css */

.signatures-item__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  background: var(--brand-cyan-100);
  color: var(--brand-cyan-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.signatures-item--disabled .signatures-item__icon {
  background: var(--neutral-100);
  color: var(--text-muted);
}

.signatures-item__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.signatures-item__label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
}

.signatures-item__name {
  font-family: var(--font-family-display);
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
  color: var(--text-strong);
  letter-spacing: var(--tracking-snug);
}

.signatures-item__count {
  font-family: var(--font-family-display);
  font-size: var(--text-display-md);
  font-weight: var(--font-weight-extra);
  color: var(--brand-navy-700);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  text-align: right;
}

.signatures-item--disabled .signatures-item__count {
  color: var(--text-muted);
}


/* Gauge bar — visualiza "firmas disponibles" sobre un máximo referencial */
.signatures-item__gauge {
  grid-column: 1 / -1;
  width: 100%;
  height: 6px;
  background: var(--neutral-200);
  border-radius: var(--radius-round);
  overflow: hidden;
  position: relative;
}

.signatures-item__gauge-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-cyan-500) 0%, var(--brand-cyan-400) 100%);
  border-radius: var(--radius-round);
  transition: width 0.6s var(--ease-out);
}

.signatures-item--disabled .signatures-item__gauge-fill {
  background: var(--neutral-300);
}

.signatures-item__gauge-label {
  grid-column: 1 / -1;
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: calc(var(--space-1) * -1);
}


/* ============================================================
   QUICK ACTIONS — grid de cards clickeables
   ============================================================ */

.payment-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.payment-action {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  cursor: pointer;
  box-shadow: var(--elevation-1);
}

.payment-action:hover {
  transform: translateY(-2px);
  border-color: var(--brand-cyan-400);
  box-shadow: var(--elevation-2);
}

.payment-action__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--brand-navy-100);
  color: var(--brand-navy-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
  transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.payment-action:hover .payment-action__icon {
  background: var(--brand-cyan-100);
  color: var(--brand-cyan-700);
  transform: scale(1.04);
}

.payment-action__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.payment-action__title {
  font-family: var(--font-family-base);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--text-strong);
  letter-spacing: var(--tracking-snug);
  margin: 0;
}

.payment-action__desc {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin: 0;
}

.payment-action__arrow {
  font-size: 12px;
  color: var(--text-muted);
  opacity: 0.6;
  transition: transform var(--transition-fast), opacity var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
}

.payment-action:hover .payment-action__arrow {
  transform: translateX(3px);
  opacity: 1;
  color: var(--brand-cyan-700);
}


/* ============================================================
   CANCELAR — acción secundaria sutil
   ============================================================ */

.pagos-body .container-opciones {
  display: flex !important;
  justify-content: center;
  padding: var(--space-4);
  margin-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
  cursor: pointer;
  border-radius: var( --radius-md);
  background: #fff;
  box-shadow: 0px 6px 6px 3px rgba(0, 0, 0, 0.14);
}
.container-opciones:hover{
  color: var(--danger-700) !important;
  background-color: var(--danger-50);
  a{
    color: var(--danger-700) !important;
  }
}

.pagos-body .container-opciones ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  width: 100%;
}

/* V9.4-bonus: "Cancelar suscripción" como link destructivo
   secundario, centrado debajo de las 3 .payment-action cards.
   El <ul> + <li class="last-option"> es markup legacy preservado
   (Stimulus data-action sigue intacto), modernizado solo via CSS.

   Padding clickeable + border-radius + hover destructivo sutil.
   !important en color y font-size por specificity wars con regla
   legacy nested en dashboard.css (`.miCuenta-content ...
   .container-opciones ul li a { color: #222D8B }` con specificity
   (0,4,3) que pisa al selector moderno (0,3,2)). Lección V8.2. */
.pagos-body .container-opciones li.last-option {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: var(--space-2);
}

.pagos-body .container-opciones li.last-option a ,
.pagos-body .container-opciones a{
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-base) !important;
  font-weight: var(--font-weight-semibold);
  color: var(--danger-600) !important;
  text-decoration: none;
  border-radius: var(--radius-md);
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast);
}

.pagos-body .container-opciones li.last-option a:hover{
  color: var(--danger-700) !important;
  background-color: var(--danger-50);
}

.pagos-body .container-opciones li.last-option a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}


/* Ocultamos los links legacy que movimos a payment-actions */
.pagos-body .container-opciones li:not(.last-option) {
  display: none;
}


/* ============================================================
   OVERRIDE — esconde paquetesFirma legacy visible si la nueva
   estructura ya está montada. Si no, el fallback legacy se mantiene.
   ============================================================ */

.pagos-body:has(.plan-card) .paquetesFirma-container.tipo-firmas,
.pagos-body:has(.plan-card) .paquetesFirma-container:not(.tipo-firmas),
.pagos-body:has(.plan-card) .informacion-container:not(:has(.plan-card)):not(:has(.signatures-card)) {
  display: none;
}

.pagos-body:has(.plan-card) .container-boxFirmas {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 960px) {
  .container-boxFirmas { grid-template-columns: 1fr !important; }
  .payment-actions { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .plan-card { padding: var(--space-5); }
  .plan-card__price-amount { font-size: 38px; }
  .signatures-item {
    grid-template-columns: auto 1fr;
  }
  .signatures-item__count {
    grid-column: 2;
    text-align: left;
    font-size: var(--text-2xl);
  }
  .signatures-item__icon { grid-row: span 2; }
  .payment-actions { grid-template-columns: 1fr; }
}

/* Ajustes extra a 400px */
@media (max-width: 400px) {
  .plan-card { padding: var(--space-4); gap: var(--space-3); }
  .plan-card__name { font-size: 24px; }
  .plan-card__price-amount { font-size: 32px; }
  .plan-card__price-free { font-size: 26px; }
  .plan-card__features li { font-size: var(--text-xs); }
  .plan-card__cta { width: 100%; justify-content: center; height: 40px; }

  .signatures-card { padding: var(--space-4); gap: var(--space-3); }
  .signatures-card__title { font-size: var(--text-md); }
  .signatures-item { padding: var(--space-3); gap: var(--space-3); }
  .signatures-item__icon { width: 40px; height: 40px; font-size: 17px; }
  .signatures-item__count { font-size: var(--text-xl); }

  .payment-action { padding: var(--space-4); gap: var(--space-3); }
  .payment-action__icon { width: 38px; height: 38px; font-size: 15px; }
  .payment-action__title { font-size: var(--text-sm); }
  .payment-action__desc { display: none; }
}


/* ============================================================
   ENTRADA ANIMADA
   ============================================================ */

@keyframes pay-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.plan-card, .signatures-card {
  animation: pay-in var(--transition-base) var(--ease-out) both;
}
.signatures-card { animation-delay: 0.08s; }

.payment-action {
  animation: pay-in var(--transition-base) var(--ease-out) both;
}
.payment-actions .payment-action:nth-child(1) { animation-delay: 0.12s; }
.payment-actions .payment-action:nth-child(2) { animation-delay: 0.18s; }
.payment-actions .payment-action:nth-child(3) { animation-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .plan-card, .signatures-card, .payment-action { animation: none; }
}


/* ============================================================
   V11.2 — Dark mode override de /payments
   ============================================================
   Hallazgo 4: .signatures-item__count usa --brand-navy-700
     hardcoded — sobre --surface-app dark el contraste cae a
     ~1.5:1 (WCAG fail). El número grande es información
     principal de la card; va con --text-strong (alto contraste
     puro). Alternativa cyan-300 descartada para preservar
     claridad de la métrica.
   ============================================================ */

[data-theme="dark"] .signatures-item__count {
  color: var(--text-strong);
}


/* ============================================================
   V11.3 — Cobertura adicional dark mode en /payments
   ============================================================
   QA visual con Chrome MCP detectó 3 superficies más:

   A: .signatures-item__icon — squircles de los 3 ítems de
      "Firmas disponibles" usan bg cyan-100 + color cyan-700
      hardcoded. Mismo patrón que H1 V11.2 — cyan translúcido
      + cyan-300 en dark. Variante --disabled tiene neutral-100
      hardcoded: en dark se usa whitish translúcido (color queda
      en --text-muted, ya tokenizado).
   B: .payment-action__icon — squircles navy-100/navy-700 en
      las 3 cards inferiores. Override navy-300 translúcido +
      cyan-300 (unifica paleta de squircles dark con A y H1
      V11.2 — todos terminan en cyan acento sobre dark).
   G: .pagos-body .container-opciones — wrapper legacy con
      background: #fff literal en dashboard.css:444 (nested,
      specificity [0,2,0]). El moderno ya usa
      .pagos-body .container-opciones [0,2,0] como override
      con !important para vencer legacy. El nuevo override
      dark usa misma chain con [data-theme="dark"] prefix
      → [0,3,0] gana ambos sin necesidad de !important.
   ============================================================ */

[data-theme="dark"] .signatures-item__icon {
  background-color: rgba(0, 186, 212, 0.15);   /* cyan-500 @ 15% */
  color: var(--brand-cyan-300);
}

[data-theme="dark"] .signatures-item--disabled .signatures-item__icon {
  background-color: rgba(245, 245, 251, 0.06);
  /* color queda en --text-muted del selector base */
}

[data-theme="dark"] .payment-action__icon {
  background-color: rgba(196, 200, 255, 0.16);  /* navy-300 @ 16% */
  color: var(--brand-cyan-300);
}

[data-theme="dark"] .pagos-body .container-opciones {
  /* V11.3-bis: !important requerido en background para vencer
     legacy nested en dashboard.css:444 (anidado bajo
     .miCuenta-container desde línea 11 → specificity efectiva
     ≥[0,4,0], supera a nuestro [0,3,0]). Verificado in-browser
     con Chrome MCP: sin !important el override no aplica.
     color no requiere !important porque el legacy nested no
     redefine color en .container-opciones. Refactor del
     legacy diferido a V11.8. */
  background: var(--surface-raised) !important;
  color: var(--text-default);
}


/* ============================================================
   V11.5c — Patrón navy-700 dark (subtítulo + íconos squircles)
   ============================================================
   QA visual de /payments mostró:
   - .signatures-card__subtitle "Resto de firmas..." con color
     computed navy-700 (1.42:1 contraste) pese a que el moderno
     declara --text-muted.
   - Íconos <i> dentro de .signatures-item__icon con color navy-700
     (1.09:1 contraste) pese a que V11.3 override aplica cyan-300
     al padre .signatures-item__icon.

   Causa raíz: legacy nested en dashboard.css:407-413 declara
     label, h4, p, i { color: #222D8B; }
   bajo cadena .miCuenta-container .miCuenta-content [...]
   con specificity expandida que pisa los modernos. Es el bloque
   invisible al walker DOM-API (CSS native nesting no se descomprime
   en document.styleSheets).

   Fix con !important. Refactor del legacy diferido a V11.9.
   ============================================================ */

[data-theme="dark"] .signatures-card__subtitle {
  color: var(--text-muted) !important;
}

[data-theme="dark"] .signatures-item__icon i {
  color: var(--brand-cyan-300) !important;
}


/* V11.5e — "Cancelar suscripción" link rojo legible en dark.
   .pagos-body .container-opciones li.last-option a declara
   color: var(--danger-600) !important en payments_modern:600.
   danger-600 (#B80425) sobre raised dark = 2.41:1 fail.
   Override a --danger-300 (#EE8B9D, rosa claro) sobre dark
   da ~7:1 AAA, mantiene semántica danger. !important por
   legacy moderno con !important (doctrina V11.5a-ter). */
[data-theme="dark"] .pagos-body .container-opciones li.last-option a {
  color: var(--danger-300) !important;
}
/*
 * views/plans_modern.css — Rediseño de la vista /plans (V4)
 * FirmaYa / zappb
 *
 * Aditivo sobre dashboard.css + dashboard_modern.css. Reemplaza el
 * comparativo de columnas por pricing cards independientes por plan,
 * alineados con el design system (Plus Jakarta Sans, tokens navy/cyan,
 * elevation, radius-2xl). Preserva data-controller="classes" para el
 * toggle personas/empresas y data-controller="cancel-subscription"
 * para el flujo del botón "Elegir plan" cuando el user está en un
 * plan pagado y quiere volver a Free.
 *
 * El legacy .planes-content / .columna-detalle / .columna-plan queda
 * oculto por este archivo mientras .plans-shell esté presente.
 */


/* ============================================================
   OVERRIDE — oculta la comparativa legacy cuando está el shell nuevo
   ============================================================ */

.miCuenta-container:has(.plans-shell) .planes-content {
  display: none !important;
}


/* ============================================================
   SHELL + HEADER
   ============================================================ */

.miCuenta-container .plans-shell {
  flex: 1;
  min-width: 0;
  display: block;
  padding: var(--space-4) var(--space-6) var(--space-8);
  max-width: 1280px;
  font-family: var(--font-family-base);
  color: var(--text-default);
}

.plans-header {
  display: flex;
  /* V11.8b — apilar verticalmente (botón Atrás arriba, título debajo)
     alineando con el patrón consolidado en /email_settings,
     /terms_and_conditions, /desactivate_account, /members. /plans era
     el outlier con flex row inline. Cambio mínimo de 1 línea. */
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

/* V10.1-bis — A11y: scope global.
   El selector original `.plans-header .back-link` solo cubría /plans.
   /members usaba <a> sin clase (estilado por .title-section a). Para
   unificar y permitir reuso, .back-link es ahora global y vive aquí
   por simplicidad (tech debt: mover a components/links.css).
   Tokens: color=#51517D (~7.5:1 vs #F8F8FC ✓ AA), font-size=14px. */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-default);
  text-decoration: none;
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-base);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.back-link:hover {
  background: var(--neutral-100);
  color: var(--text-brand);
}

.plans-header__body { flex: 1; min-width: 240px; }

.plans-header__title {
  font-family: var(--font-family-base);
  font-size: clamp(24px, 2.4vw, var(--text-display-md));
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--text-brand);
  margin: 0;
}

.plans-header__sub {
  color: var(--text-muted);
  font-size: var(--text-base);
  margin: var(--space-1) 0 0;
  max-width: 640px;
  line-height: var(--leading-normal);
}


/* ============================================================
   TABS PERSONAS / EMPRESAS — pill switch
   ============================================================ */

.plans-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-round);
  background: var(--neutral-100);
  border: 1px solid var(--border-subtle);
  margin: var(--space-4) 0 var(--space-6);
}

.plans-tabs__btn {
  padding: 10px 22px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-muted);
  border-radius: var(--radius-round);
  cursor: pointer;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.plans-tabs__btn:hover:not(.active) { color: var(--text-strong); }

.plans-tabs__btn.active {
  background: var(--surface-raised);
  color: var(--text-brand);
  box-shadow: var(--elevation-1);
}

.plans-tabs__btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

#btnEmpresa{
  color:var(--text-muted);
  opacity: 0.7;
  span.proximamente {
    background: transparent;
    border: 1px solid var(--text-muted);
    color: var(--text-muted);
  }
}

/* ============================================================
   VISTA PERSONAS / EMPRESAS — toggle por clase de shell
   ============================================================
   El classes_controller mantiene una única clase persona|empresa
   en el shell. Usamos ese estado para mostrar/ocultar el grid. */

.plans-shell .plans-view { display: none; }
.plans-shell.persona .plans-view--persona { display: block; }
.plans-shell.empresa .plans-view--empresa { display: block; }


/* ============================================================
   GRID DE PRICING CARDS
   ============================================================ */

.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.plans-grid--enterprise {
  grid-template-columns: repeat(5, minmax(220px, 1fr));
  gap: var(--space-4);
}

@media (max-width: 1280px) {
  .plans-grid--enterprise {
    grid-template-columns: repeat(3, minmax(260px, 1fr));
    gap: var(--space-5);
  }
}

@media (max-width: 960px) {
  .plans-grid,
  .plans-grid--enterprise {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   PRICING CARD — base
   ============================================================ */

.pricing-card {
  position: relative;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  box-shadow: var(--elevation-1);
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-base),
    border-color var(--transition-fast);
}

.pricing-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand-cyan-400);
  box-shadow: var(--elevation-2);
}

.pricing-card__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pricing-card__eyebrow {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--text-muted);
  font-weight: var(--font-weight-semibold);
}

.pricing-card__name {
  font-family: var(--font-family-base);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-brand);
  margin: 0;
}

.pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.pricing-card__price-amount {
  font-size: var(--text-display-md);
  font-weight: var(--font-weight-extra);
  font-family: var(--font-family-base);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  line-height: 1;
}

.pricing-card__price-period {
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-weight: var(--font-weight-medium);
}

.pricing-card__price-free {
  font-size: var(--text-display-md);
  font-weight: var(--font-weight-extra);
  letter-spacing: var(--tracking-tight);
  color: var(--brand-cyan-600);
  line-height: 1;
}

.pricing-card__quota {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-round);
  background: var(--brand-cyan-100);
  color: var(--brand-cyan-700);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  align-self: flex-start;
}

.pricing-card__quota i { font-size: 13px; }
.pricing-card__quota strong {
  color: var(--brand-navy-700);
  font-weight: var(--font-weight-extra);
}

.pricing-card__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pricing-card__features li {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-default);
  line-height: var(--leading-snug);
}

.pricing-card__features li i.fa-check { color: var(--success-600); font-size: 14px; }
.pricing-card__features li i.fa-xmark,
.pricing-card__features li i.fa-times { color: var(--neutral-300); font-size: 14px; }

/* V9.8: strike-through eliminado. El icon distinto (fa-xmark vs
   fa-check) ya transmite "no incluido" semánticamente; el gris
   refuerza el contraste visual. Decoración duplicada removida. */
.pricing-card__features li.is-disabled {
  color: var(--neutral-400, #a7a9bf);
}

.pricing-card__features li .soon-chip {
  display: inline-flex;
  padding: 1px 8px;
  border-radius: var(--radius-round);
  background: var(--brand-cyan-100);
  border: 1px solid var(--brand-cyan-200);
  color: var(--brand-cyan-700);
  font-size: 10px;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  font-weight: var(--font-weight-semibold);
}

.pricing-card__footer {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pricing-card__support {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
}

.pricing-card__support strong {
  color: var(--text-default);
  font-weight: var(--font-weight-semibold);
}


/* ============================================================
   CTA — button + button_to (form wrapper)
   ============================================================ */

.pricing-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: 14px var(--space-5);
  line-height: 1;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--surface-raised);
  color: var(--text-brand);
  font-family: inherit;
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.pricing-card__cta i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  height: 1em;
  /* Shift óptico -1px — el glyph fa-arrow-right tiene su centro visual
     por debajo del centro de su box, queda más bajo que el x-height
     del texto. */
  transform: translateY(-1px);
}

.pricing-card__cta:hover {
  background: var(--brand-cyan-100);
  border-color: var(--brand-cyan-400);
}

.pricing-card__cta:active { transform: scale(0.98); }

.pricing-card__cta:disabled,
.pricing-card__cta[disabled] {
  background: var(--neutral-100);
  color: var(--text-muted);
  border-color: var(--border-subtle);
  cursor: default;
  opacity: 0.95;
}

.pricing-card__cta:disabled::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--brand-cyan-600);
}

/* ----------------------------------------------------------------
   Variante --disabled: "Próximamente" (Empresas + API).
   Diferenciada del :disabled "Plan actual" del tab Personas: aquí
   NO va el check icon (no es plan vigente, es feature no disponible)
   y se apaga visualmente con opacity para reforzar el estado.
   ---------------------------------------------------------------- */

.pricing-card__cta.pricing-card__cta--disabled {
  background: var(--brand-navy-300, #C5CDE8);
  color: var(--text-muted);
  border-color: transparent;
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Anular el check ::before del :disabled genérico — no aplica en
   la variante --disabled "Próximamente". */
.pricing-card__cta.pricing-card__cta--disabled::before {
  content: none;
}

.pricing-card__cta.pricing-card__cta--disabled:hover,
.pricing-card__cta.pricing-card__cta--disabled:focus,
.pricing-card__cta.pricing-card__cta--disabled:active {
  transform: none;
  box-shadow: none;
  background: var(--brand-navy-300, #C5CDE8);
  color: var(--text-muted);
}

/* Chip "Próximamente" que acompaña al botón disabled. Mismo contrato
   visual que .soon-chip de los features, escalado para ser más
   prominente como acompañante del CTA del footer. */
.pricing-card__soon-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 10px;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-round);
  background: var(--brand-cyan-100);
  border: 1px solid var(--brand-cyan-200);
  color: var(--brand-cyan-700);
  font-size: 11px;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  font-weight: var(--font-weight-semibold);
  width: fit-content;
  align-self: flex-start;
}

.pricing-card__soon-badge i {
  font-size: 10px;
}

/* En cards featured (navy gradient) el chip cyan light se invierte:
   fondo cyan más saturado para que destaque sobre el navy. */
.pricing-card--featured .pricing-card__soon-badge {
  background: rgba(0, 186, 212, 0.25);
  border-color: rgba(102, 217, 245, 0.55);
  color: var(--brand-cyan-100);
}


/* button_to envuelve el botón en un <form> — hacer que no rompa el layout */
.pricing-card__footer form.button_to {
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
}


/* ============================================================
   VARIANTE FEATURED — plan recomendado (navy gradient)
   ============================================================ */

.pricing-card--featured {
  background: linear-gradient(
    155deg,
    var(--brand-navy-700) 0%,
    var(--brand-navy-800) 55%,
    var(--brand-navy-900) 100%
  );
  color: var(--text-on-brand);
  border-color: transparent;
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--elevation-3);
}

.pricing-card--featured::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 88% 20%, rgba(0, 186, 212, 0.35) 0%, transparent 40%),
    radial-gradient(circle at 15% 110%, rgba(73, 183, 210, 0.22) 0%, transparent 55%);
}

.pricing-card--featured .pricing-card__eyebrow { color: var(--brand-cyan-200); }
.pricing-card--featured .pricing-card__name { color: #fff; }
.pricing-card--featured .pricing-card__price-amount { color: #fff; }
.pricing-card--featured .pricing-card__price-period { color: rgba(255, 255, 255, 0.7); }
.pricing-card--featured .pricing-card__quota {
  background: rgba(102, 217, 245, 0.16);
  color: var(--brand-cyan-200);
}
.pricing-card--featured .pricing-card__quota strong { color: #fff; }
.pricing-card--featured .pricing-card__features li { color: rgba(255, 255, 255, 0.88); }
.pricing-card--featured .pricing-card__features li i.fa-check { color: var(--brand-cyan-300); }
.pricing-card--featured .pricing-card__features li i.fa-xmark,
.pricing-card--featured .pricing-card__features li i.fa-times { color: rgba(255, 255, 255, 0.35); }
.pricing-card--featured .pricing-card__features li.is-disabled { color: rgba(255, 255, 255, 0.35); }
.pricing-card--featured .pricing-card__features li .soon-chip {
  background: rgba(102, 217, 245, 0.16);
  color: var(--brand-cyan-200);
  border-color: rgba(102, 217, 245, 0.28);
}
.pricing-card--featured .pricing-card__footer { border-top-color: rgba(255, 255, 255, 0.14); }
.pricing-card--featured .pricing-card__support { color: rgba(255, 255, 255, 0.6); }
.pricing-card--featured .pricing-card__support strong { color: rgba(255, 255, 255, 0.9); }
.pricing-card--featured .pricing-card__cta {
  background: linear-gradient(135deg, var(--brand-cyan-600) 0%, var(--brand-cyan-500) 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 12px -4px rgba(0, 186, 212, 0.5);
}
.pricing-card--featured .pricing-card__cta:hover {
  background: linear-gradient(135deg, var(--brand-cyan-500) 0%, var(--brand-cyan-400) 100%);
  transform: translateY(-1px);
}


/* ============================================================
   VARIANTE CURRENT — plan actual destacado con ring cyan
   ============================================================ */

.pricing-card--current {
  border-color: var(--brand-cyan-500);
  box-shadow: 0 0 0 3px rgba(0, 186, 212, 0.08), var(--elevation-1);
}


/* ============================================================
   RIBBON — "Recomendado" / "Más vendido"
   ============================================================ */

.pricing-card__ribbon {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px var(--space-3);
  border-radius: var(--radius-round);
  background: rgba(102, 217, 245, 0.16);
  border: 1px solid rgba(102, 217, 245, 0.28);
  color: var(--brand-cyan-200);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

.pricing-card__ribbon i { font-size: 9px; }


/* ============================================================
   COMPACT — en empresas los cards son más angostos
   ============================================================ */

.plans-grid--enterprise .pricing-card {
  padding: var(--space-5);
  gap: var(--space-4);
}
.plans-grid--enterprise .pricing-card__name { font-size: var(--text-xl); }
.plans-grid--enterprise .pricing-card__price-amount { font-size: var(--text-3xl); }
.plans-grid--enterprise .pricing-card__features li { font-size: 13px; }
.plans-grid--enterprise .pricing-card__ribbon {
  top: var(--space-4);
  right: var(--space-4);
  padding: 3px var(--space-2);
  font-size: 10px;
}


/* ============================================================
   FOOTER — nota legal / cancelación
   ============================================================ */

.plans-footer {
  margin-top: var(--space-8);
  padding: var(--space-5);
  background: var(--neutral-100);
  border-radius: var(--radius-lg);
  border: 1px dashed var(--border-subtle);
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-align: center;
}

.plans-footer strong { color: var(--text-default); }


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .pricing-card,
  .pricing-card__cta { transition: none; }
  .pricing-card:hover,
  .pricing-card__cta:hover { transform: none; }
}


/* ============================================================
   V11.5f — Cobertura dark de /plans (nueva superficie)
   ============================================================
   La vista /plans (acceso desde /payments "Cambiar plan") no
   estaba en el inventario de V11.1-V11.5e. QA reveló 4 bugs:

   - .plans-tabs bg neutral-100 light → pastilla blanca grande
   - .pricing-card__quota chip cyan-100/cyan-700 → flash claro
   - .plans-footer bg neutral-100 → pastilla blanca nota
   - .pricing-card__features li .soon-chip cyan-100/cyan-700 →
     3.34:1 AA fail (mismo bug que .profile-item__badge V11.5e)

   /plans NO está bajo .miCuenta-container → no compite con el
   legacy nested label/h4/p/i (dashboard.css:407). Por eso ninguno
   de estos overrides requiere !important.

   .pricing-card--featured.* ya tiene overrides modernos
   dark-friendly (cyan-300 + #fff) que NO se tocan.

   NO incluido: .proximamente del nav top (funciona ya); modal
   "Posiciona tu Firma" wizard (V11.6); SVG /user.svg (deuda
   no-CSS).
   ============================================================ */

[data-theme="dark"] .plans-tabs {
  background: var(--surface-raised);
}

[data-theme="dark"] .pricing-card__quota {
  background: rgba(0, 186, 212, 0.10);            /* cyan-500 @ 10% */
  color: var(--text-strong);
}

[data-theme="dark"] .pricing-card__quota strong {
  color: var(--text-strong);
}

[data-theme="dark"] .plans-footer {
  background: rgba(0, 186, 212, 0.08);            /* cyan-500 @ 8% */
  color: var(--text-muted);
}

[data-theme="dark"] .pricing-card__features li .soon-chip {
  background: rgba(102, 217, 245, 0.16);          /* cyan-300 @ 16% */
  color: var(--brand-cyan-300);
  border-color: rgba(102, 217, 245, 0.24);
}


/* V11.5f-bis — Hover "Elegir plan" en planes non-featured.
   Bug detectado QA V11.5f: .pricing-card__cta:hover (L.384) declara
   bg: --brand-cyan-100 light primitivo + el color text-brand del
   reposo daban contraste 1.44:1 invisible en dark.

   Override scoped a non-featured Y non-disabled:
   - .pricing-card--featured tiene gradient cyan-500/cyan-400
     propio que funciona en dark (21:1) — se excluye.
   - .pricing-card__cta--disabled (L.430-435) declara
     bg: navy-300, transform: none — comportamiento intencional
     del disabled. Se excluye para no pisarlo.

   Alpha 20% (doctrina hover saturado V11.5a-ter/V11.5c-bis).
   color text-strong sobre cyan@20% blendeado ≈13:1 AAA. */
[data-theme="dark"] .pricing-card:not(.pricing-card--featured) .pricing-card__cta:not(.pricing-card__cta--disabled):hover {
  background: rgba(0, 186, 212, 0.20);            /* cyan-500 @ 20% */
  border-color: var(--brand-cyan-400);
  color: var(--text-strong);
}


/* V11.5f-ter — Disabled "Elegir plan" en planes empresa (Pyme,
   Empresa S, Empresa L, API). Bug QA: legacy plans_modern.css:414
   declara bg --brand-navy-300 light + color --text-muted +
   opacity 0.55 → en dark casi idéntico bg-vs-color, 1.09:1 invisible.

   Diego eligió opción B tras comparar 3 visuales con Chrome MCP
   (vs cyan-translúcido y vs navy-300+text-default): gris neutro
   con border sutil. Diferenciación semántica inequívoca vs el
   activo (que usa cyan-translúcido en toda V11).

   - bg blanco @6% — gris neutro mínimo, sin tinte de marca.
   - color --text-muted — texto atenuado.
   - opacity 0.7 — moderada (vs 0.55 legacy), recupera legibilidad
     preservando señal "disabled".
   - border blanco @10% — outline mínimo que define el área.

   !important defensivo en las 4 propiedades (el plan reportó que
   alguna regla moderna estaba pisando inline styles durante QA;
   walker rg no la identificó pero el override debe ganar
   garantizado). Excluido featured: Empresa M disabled mantiene
   gradient + #fff (21:1).

   WCAG 1.4.3 exception 1: componentes inactivos no requieren
   contraste mínimo. */

/* V11.9.3 Commit 2 — Removidos los 4 !important defensivos de V11.5f-ter.
   Investigación bundle compilado (L.18501) confirmó: el legacy
   .pricing-card__cta.pricing-card__cta--disabled (base [0,2,0]) y
   :hover/:focus/:active ([0,2,1]) NO tienen !important. El override
   [0,4,0] gana por specificity natural sin defensivos. El "selector
   legacy invisible" del reporte original V11.5f-ter probable fue
   cache stale durante QA. */

/* V11.9.3 Commit 2 ampliado — fix contraste light preexistente.
   Bug detectado durante QA del Commit 2: el legacy base [0,2,0]
   .pricing-card__cta--disabled con bg --brand-navy-300 + color
   --text-muted + opacity 0.55 daba contraste 1.04:1 en light
   (texto invisible). Override [0,4,0] sin !important a
   surface-sunken + text-muted + opacity 0.7 ≈ 2.1:1. WCAG 1.4.3
   Exception 1 OK (componentes inactivos exentos de contraste
   textual). Featured (Plan Pro / Empresa M) excluida por :not —
   mantiene gradient cyan + #fff + opacity 0.55. */
.pricing-card:not(.pricing-card--featured) .pricing-card__cta--disabled {
  background: var(--surface-sunken);
  color: var(--text-muted);
  opacity: 0.7;
  border: 1px solid var(--border-subtle);
}

[data-theme="dark"] .pricing-card:not(.pricing-card--featured) .pricing-card__cta--disabled {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  opacity: 0.7;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
/*
 * documents.css — Documentos
 * FirmaYa / zappb
 *
 * Cubre: .container-validarDocumento, .container-buscarDocumento,
 *        table.document-table, .filter-box
 *
 * EXTRAÍDO DESDE application.css
 */

.container-validarDocumento{
    .texto-validarDocumento{
        text-align: center;
        padding-top: 34px;
        p{
            color: #51517D;
            font-size: 18px;
        }
    }
    .container-btnValidar{
        display: flex;
        justify-content: center;
        margin-top: 50px;
        gap: 160px;
        .btn-validar {
            text-align: center;
            background: #fff;
            padding: 10px;
            width: 250px;
            height: 50px;
            border-radius: 22px;
            border: 1px solid #222D8B;
            label{
                color: #222D8B;
                cursor: pointer;
            }
        }
        
        .btn-validar.active{
            background: #222D8B;
            label{
                color: #ffff;
            }
        }

        /*.container-ValidarPDF.active{
            .container-btnSeleccionar{
                display: flex;
            }
            .btn-validarPDF{
                display: block;
            }
        }*/

        .container-RevisarPDF{
            .container-btns{
                margin-bottom: 12px;
                display: flex;
                justify-content: flex-end;
                .btns-pdf{
                    width: 160px;
                    display: flex;
                    justify-content: space-between;
                    button{
                        font-size: 14px;
                        font-weight: 600;
                        background: none;
                        border: none;
                        color: #182e8a;
                        border-bottom: 1px solid #182e8a;
                        cursor: pointer;
                    }
                }
                .filtrarList{
                    display: none;
                    position: absolute;
                    background: #fff;
                    box-shadow: 0px 6px 6px 3px rgba(0, 0, 0, 0.14);
                    margin-top: 29px;
                    padding: 12px;
                    li{
                        list-style-type: none;
                        label{
                            color: #7A7A7A;
                            font-size: 14px;
                        }
                    }
                }
                
            }
            .container-btns.expanded{
                .filtrarList{
                    display: block;
                }
            }
            .container-documentos-validar{
                border-radius: 10px;
                width: 84vw;
                margin: auto;
                margin-bottom: 25px;
                display: flex;
                text-align: center;
                transition: background-color 0.3s;
                background-color: #ffff;
                box-shadow: 0px 6px 6px 3px rgba(0, 0, 0, 0.14);
                color: #182e8a;
                flex-direction: column;
                min-height: 150px;
                height: auto;
                padding: 10px 0;
                div.doc-pdf{
                    padding: 9px 20px;
                    h4 {
                        font-size: 18px;
                        padding: 14px 0px 4px;
                        width: fit-content;
                        margin: auto 0px;
                        border-bottom: 2px solid #182e8a;
                        i{
                            margin-right: 10px;
                        }
                    }
                    table{
                        width: -webkit-fill-available;
                        display: none;
                    }
                }
                
                div.expanded{
                    margin-bottom: 10px;
                    width: 84vw;
                    h4{
                        .fa-chevron-down{
                            transform: rotate(180deg);
                        }
                    }
                    table{
                        margin-top: 15px;
                        display: inline-table;
                        padding: 0;
                        border-bottom: 1px solid #D9D9D9;
                        border-top: 1px solid #D9D9D9;
                        th{
                            border-bottom: 1px solid #D9D9D9;
                        }
                        td {
                            padding: 2px 20px;
                            font-size: 14px;
                        }
                        td.numero {
                            width: 30px;
                        }
                        td.nombre {
                            width: 170px;
                        }
                        td.rut,
                        td.estado {
                            width: 110px;
                        }
                        td.firma {
                            width: 100px;
                        }
                        td.timestamp{
                            width: 185px;
                        }
                        td.autoridad {
                            width: 210px;
                        }
                        td.emisor {
                            width: 280px;
                        }
                    }
                }
            }
            
        }
    }
    .content-container-validarCve{
        display: none;
        width: 450px;
        margin: 25px auto;
        flex-direction: column;
        form{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        input.input-cve{
            padding: 10px;
            border: 1px solid #E0E0EC;
            border-radius: 20px;
            height: 40px;
            width: 100%;
            font-size: 14px;
            margin: 18px 0;
        }
    }
    .container-btnValidar:has(.container-validarCVE.active) ~ .content-container-validarCve {
        display: flex;
    }

    .content-container-validarPdf{
        display: none;
        width: 450px;
        margin: 25px auto;
        flex-direction: column;
        align-items: center;
        gap: 22px;

        #uploadContainer{
            width: 450px;
            color: #222D8B;
            display: flex;
            margin-top: 0;
            justify-content: center;
            min-height: 220px;
            .tittle-addDocuments,
            .timestamp-seal-message.is-disabled,
            .upload-text,
            #file_container_form{
                display: none;
            }
            form#fileAdder {
                padding-bottom: 22px;
            }
            .upload-text.validar-documento{
                display: block;
            }
        }
        #uploadContainer:has(.content-uploadContainer.noDisplay) #file_container_form {
            display: block;
        }

        .container-btnSeleccionar{
            display: flex;
            flex-direction: column;
            margin-top: 20px;
            background: #fff;
            border-radius: 6px;
            align-items: center;
            height: 150px;
            min-width: 450px;
            justify-content: center;
            box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 
            0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
            .btn-seleccionar{
                color: #222D8B;
                border: 2px solid #222D8B;
                padding: 4px 20px;
                border-radius: 23px;
                font-size: 14px;
                background: #ffff;
                cursor: pointer;
            }
            p{
                color: #222D8B;
                font-size: 14px;
            }
        }
        #fileInput{
            display: none;
        }
        div#uploadedFilesListContainer {
            ul{
                padding: 0;
                li {
                    display: flex;
                    list-style-type: none;
                    color: #222D8B;
                    font-size: 14px;
                    width: 100% !important;
                    justify-content: space-between;
                    padding: 6px 15px !important;      
                    border-bottom: 1px solid #d9d9d9;
                    align-items: center;
                    .fas.fa-trash-alt {
                        background: none;
                        border: none;
                        cursor:pointer;
                    }
                }
            }
            .btn-agregar{
                color: #222D8B;
                border: 2px solid #222D8B;
                padding: 4px 20px;
                border-radius: 23px;
                font-size: 14px;
                background: #ffff;
                cursor: pointer;
                margin-bottom: 10px;
            }
        }
        .btn-validarPDF{
            display: none;
            margin: auto;
            margin-top: 15px;
            height: 35px;
        }
        
    }
    .container-btnValidar:has(.container-ValidarPDF.active) ~ .content-container-validarPdf {
        display: flex;
        .btn-validarPDF{
            display: block;
        }
    }

    
}
#fileAdder{
    margin-bottom: 15px;
}

.container-buscarDocumento{
    width: fit-content;
    margin: auto;
    .texto-buscarDocumento{
        text-align: center;
        padding-top: 34px;
        display: grid;
        align-items: center;
        justify-items: center;
        h3{
            margin-bottom: 10px;
        }
        input{
            padding: 10px;
            border: 1px solid #E0E0EC;
            border-radius: 20px;
            height: 40px;
            position: relative;
            width: 566px;
            font-size: 14px;
            margin-right: 9px;
        };
        button {
            background: none;
            border: none;
            color: #182e8a;
            cursor: pointer;
        }
        .filter-btn{
            position: absolute;
            margin-top: 13px;
            i{
                margin-right: 2px;
            }
        }
        .cuenta-container form{
            padding: 0;
        }
        .cuenta-container{
            position: absolute;
            top: 200px;
            z-index: 2;
            background: #ffff;
            display: inline-block;
            border: 1px solid #222D8B;
            color: #222D8B;          
            border-radius: 25px;
            min-width: 320px;
            .cuenta{
                display: flex;
                align-items: center;
                padding: 10px 25px 10px 15px;
                .fa-chevron-down.transparent{
                    color: transparent;
                }
                img{
                    width: 30px;
                }
                i.fa-user{
                    font-size: 24px;
                    margin: 0 5px;
                }
                h4{
                    cursor: default;
                    font-size: 16px;
                    margin: 0;
                    margin-left: 5px;
                    display: grid;
                    justify-items: start;
                    line-height: 1;
                    span{
                        font-size: 14px;
                        font-weight: 100;
                    }
                }
            }
            .fa-chevron-down{
                transition: 0.3s;
            }
            .rotate{
                transform: rotate(180deg);
            }
          
        }
        .cuenta-container:has(.principal){
            form{
                padding: 0;
            }
            .cuenta{
                display: none;
                border-bottom: none;
            }
            .cuenta.principal{
                display: flex;
            }
        }
        .cuenta-container:has(.open){
            .cuenta{
                display:flex;
                border-bottom: 1px solid #222d8b2e;
            }
            .cuenta:last-of-type{
                border-bottom: none;
            }
        }
        .buscador-container{
            margin-top: 100px;
        }
    }
    .scrollable-table {
        height: 44vh;
        overflow-y: auto;
        scroll-snap-type: y mandatory;
        margin-top: 40px;
        scrollbar-gutter: stable;
        /* Firefox */
        scrollbar-width: thin;
        scrollbar-color: #50517D transparent;
    }
    /* Chrome, Edge, Safari */
    .scrollable-table::-webkit-scrollbar {
        width: 8px; /* ancho de la barra */
    }

    .scrollable-table::-webkit-scrollbar-track {
        background: transparent; /* fondo */
    }

    .scrollable-table::-webkit-scrollbar-thumb {
        background-color: #50517D; /* color que quieres */
        border-radius: 10px;
        border: 2px solid transparent; /* opcional para efecto más limpio */
        background-clip: content-box;
    }

    /* Hover opcional */
    .scrollable-table::-webkit-scrollbar-thumb:hover {
        background-color: #5b5c8b;
    }
    table.document-table {
        color: #182e8a;
        border-collapse: collapse;
        width: 85vw;
        thead{
            th {
                position: sticky;
                top: -105%;
                background: #F8F8FC;
                color: #50517D;
                padding: 8px 0;
                text-align: left;
            }
        }
        tbody{
            tr {
                border-top: 1px solid #D6D6D6;
                color: #51517D;
                td {
                    font-size: 14px;
                    text-align: left;
                    padding: 4px 0;
                    i{
                        color: #162F85;
                    }
                    a{
                        color: #51517D;
                        text-decoration: none;
                    }
                    button {
                        background: none;
                        border: none;
                        color: #182e8a;
                        cursor: pointer;
                    }
                }
                td.document-name.indent {
                    padding-left: 20px !important;
                }
                td.actions{
                    padding-right: 3px;
                    cursor: pointer;
                    position: relative;
                    display: flex;
                    align-items: center;
                    flex-direction: column;
                    .container-actions {
                        position: absolute;
                        background: #F8F8FC;
                        border-radius: 8px;
                        box-shadow: 4px 6px 6px 0px rgba(0, 0, 0, 0.14);
                        margin-right: 120px;
                        display: none;
                        form{
                            margin: 0;
                        }
                        button{
                            color: #50517D;
                            width: 100%;
                            text-align: left;
                            padding: 0px 15px;
                            height: 30px;
                        }
                        form:first-of-type button{
                            border-bottom: 1px solid #D6D6D6;
                        }
                    }
                    .container-actions.show{
                        display: block;
                    }
                }
            }
            tr.folder-row{
                cursor: pointer;
            }
            tr.file-row{
                border-top: none;
            }
            tr.file-row:last-of-type{
                td.document-name.indent{
                    padding-bottom: 15px;
                }
            }
        }
        tbody:has(.show){
            background: #EBEBF5;
        }
    }
    .container-paginator{
        margin: 25px 0;
        display: flex;
        justify-content: center;
        .pagy.series-nav{
            border-radius: 16px;
            /*background: #162F85;*/
            background: #50517D;
            [aria-current="page"] {
                /*background: #29439b;*/
                background: #5b5c8b;
            }
            a{
                background: transparent;
                color: #fff;
                border-radius: 0;
            }
        }
        
    }
    .filter-box {
        width: 260px;
        background: #fff;
        border-radius: 2px;
        padding: 16px;
        box-shadow: 5px 4px 12px 0px rgba(0, 0, 0, 0.15);
        font-family: system-ui;
        position: absolute;
        left: 0;
        bottom: 5px;
        visibility: hidden;
        opacity: 0;
        transition: 0.3s;
        .filter-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 600;
            color: #222D8B;
            margin-bottom: 30px;
            i {
                cursor: pointer;
            }
        }
        .filter-group {
            margin-bottom: 25px;
            .filter-title {
                color: #222D8B;
                display: flex;
                align-items: center;
                gap: 6px;
                font-weight: 600;
                margin-bottom: 6px;
                font-size: 16px;
            }
            .filter-option {
                display: block;
                margin-left: 20px;
                margin-bottom: 4px;
                font-size: 14px;
                color: #222D8B;
            }
            .filter-select {
                text-align: center;
                width: 100%;
                padding: 5px 16px;
                border-radius: 16px;
                border: 1px solid #222D8B;
                font-size: 13px;
                color: #222D8B;
            }
        }
        /* V10.2 — H2: legacy .filter-apply eliminado.
           Mismo selector (0,3,0) que el override moderno; si no se
           borra aquí, el cyan #00BAD4 rellena las declaraciones que
           se eliminaron del bloque moderno y .btn--primary nunca
           gana. El estilo lo provee ahora components/buttons.css
           vía clases btn + btn--primary en el ERB. */
    }
    .filter-box.show-box{
        visibility: visible;
        opacity: 1;
    }

    .date-range-box {
        display: none;
        margin-top: 2px;
        padding: 13px 5px 8px 12px;
        border: 1px solid #222D8B;
        border-radius: 16px;
    flex-direction: column;
    gap: 11px;
    div{
            display: flex;
    justify-content: space-between;
    gap: 5px;
    align-items: baseline;
    label{
                font-size: 14px;
    color: #222D8B;
        }
        input{
            padding: 3px 8px;
            font-size: 14px;
            border: 1px solid #222D8B;
            width: 160px;
            color: #222D8B;
            border-radius: 16px;
        }
    }
        
        button{
            display: flex;
    margin: auto;
    background: transparent;
    border: 1px solid #222D8B;
    border-radius: 16px;
    padding: 6px 12px;
    color: #222D8B;
        }
}

.date-range-box.show {
  display: flex;
}
}
/* Modal de inicio de sesión y registro desde la vista de documentos */


/*Animaciones*/

/*
 * views/documents_modern.css — Mis Documentos moderno (paso 11)
 * FirmaYa / zappb
 *
 * Aditivo sobre documents.css legacy. Moderniza la lista de carpetas
 * / documentos (/buscar_documento) con:
 *   - Hero con título + subtitle + contador
 *   - Search bar con icono lupa integrado
 *   - Chips de filtro rápido
 *   - Tabla con zebra sutil, hover tint cyan, iconos tipo archivo
 *   - Badges de estado (completado/pendiente)
 *   - Dropdown de acciones estilizado
 *   - Empty state con ilustración + CTA
 *
 * Preserva: data-controller/data-action/data-search-table-target,
 *           IDs existentes, estructura de folders_list turbo-frame.
 */


/* ============================================================
   CONTAINER — layout moderno
   ============================================================ */

.container-buscarDocumento {
  /* Override del width: fit-content + margin:auto legacy */
  max-width: 1200px !important;
  width: auto;
  margin: 0 auto !important;
  padding: var(--space-8) var(--space-6) var(--space-12);
  font-family: var(--font-family-base);
}

/* Override del legacy @media (min-width: 1840px) en responsive.css:102-104
   que aplica transform: scale(1.2) sobre `.container-buscarDocumento,
   .container-validarDocumento` → magnifica título, buscador, cuenta-card
   y drop-zone validador al 120%. Neutralizamos AMBAS clases.

   V11.7g: extendido para cubrir .container-validarDocumento. El override
   original (V11.6 docs commit / previo) solo canceló el scale para
   .container-buscarDocumento; el container del validador quedó con
   scale(1.2) huérfano, empujando el botón "Validar" inferior dentro de
   la franja del footer en viewports ≥1840px con altura ≤836px (el
   container se ampliaba de 586px a 703px renderizados).

   Patrón double-class trick (specificity 0,2,0) gana al nested original
   (0,1,0) en responsive.css. Mismo patrón gotcha §8.22 que V11.7d
   (regla huérfana .filter-box left:-70px) — segunda instancia del
   mismo refactor incompleto en el mismo media query. */
@media (min-width: 1840px) {
  .container-buscarDocumento.container-buscarDocumento,
  .container-validarDocumento.container-validarDocumento {
    transform: none !important;
  }
}


/* ============================================================
   HERO — título + subtitle + meta
   ============================================================ */

.container-buscarDocumento .texto-buscarDocumento {
  /* Override del display:grid + text-align:center legacy */
  display: flex !important;
  flex-direction: column;
  align-items: stretch !important;
  text-align: left !important;
  justify-items: start !important;
  padding-top: 0 !important;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

.container-buscarDocumento .texto-buscarDocumento h3 {
  font-family: var(--font-family-display);
  font-size: clamp(24px, 2.4vw, var(--text-display-md));
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--text-strong);
  margin: 0 0 var(--space-1) !important;
}

.docs-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.docs-hero__title {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.docs-hero__title-text {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: clamp(24px, 2.4vw, var(--text-display-md));
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--text-strong);
}

.docs-hero__subtitle {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}


/* ============================================================
   TOOLBAR — buscador + chips de filtro
   ============================================================ */

.container-buscarDocumento .buscador-container {
  /* Override del margin-top: 100px legacy */
  display: flex !important;
  align-items: center;
  gap: var(--space-3);
  margin-top: 0 !important;
  flex-wrap: wrap;
}

.container-buscarDocumento .buscador-container {
  position: relative;
}

.container-buscarDocumento .buscador-container input[type="text"] {
  flex: 1;
  min-width: 280px;
  width: auto !important;
  height: 44px !important;
  padding: 0 var(--space-4) 0 calc(var(--space-4) + var(--space-6)) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  background: var(--surface-raised);
  font-family: var(--font-family-base);
  font-size: var(--text-md) !important;
  color: var(--text-strong);
  margin-right: 0 !important;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.container-buscarDocumento .buscador-container input[type="text"]::placeholder {
  color: var(--text-muted);
}

.container-buscarDocumento .buscador-container input[type="text"]:focus {
  outline: none;
  border-color: var(--brand-cyan-500);
  box-shadow: 0 0 0 3px rgba(0, 186, 212, 0.18);
}

.buscador-container__search-wrap {
  position: relative;
  flex: 1;
  min-width: 280px;
  display: inline-flex;
  align-items: center;
}

.buscador-container__search-wrap::before {
  content: "\f002";  /* Font Awesome magnifying glass */
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "FontAwesome";
  font-weight: 900;
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 14px;
  pointer-events: none;
  z-index: 1;
}

.container-buscarDocumento .filter-btn {
  /* Override del position:absolute + margin-top:13px legacy */
  position: static !important;
  margin: 0 !important;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  height: 44px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--text-brand);
  font-family: var(--font-family-base);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.container-buscarDocumento .filter-btn:hover {
  border-color: var(--brand-cyan-400);
  background: var(--brand-cyan-100);
}

.container-buscarDocumento .filter-btn i {
  font-size: 13px;
  color: var(--brand-navy-700);
}


/* Chips de filtro rápido (por estado) — opcional, visible encima de la tabla */
.docs-filter-chips {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-4) 0 var(--space-2);
  flex-wrap: wrap;
}

.docs-filter-chips__label {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: var(--space-2);
}

.docs-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px var(--space-3);
  border-radius: var(--radius-round);
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  color: var(--text-default);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.docs-chip i { font-size: 10px; }
.docs-chip:hover {
  border-color: var(--brand-cyan-400);
  color: var(--text-brand);
}

.docs-chip.is-active {
  background: var(--brand-cyan-100);
  color: var(--brand-cyan-700);
  border-color: var(--brand-cyan-400);
}


/* ============================================================
   SCROLLABLE TABLE — card blanca con tabla moderna
   ============================================================ */

.container-buscarDocumento .scrollable-table {
  height: auto !important;
  max-height: 58vh;
  overflow-y: auto;
  margin-top: var(--space-5) !important;
  padding: 0;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--elevation-1);
  scrollbar-width: thin;
  scrollbar-color: var(--neutral-400) transparent;
}

.container-buscarDocumento .scrollable-table::-webkit-scrollbar { width: 8px; }
.container-buscarDocumento .scrollable-table::-webkit-scrollbar-track { background: transparent; }
.container-buscarDocumento .scrollable-table::-webkit-scrollbar-thumb {
  background-color: var(--neutral-400);
  border-radius: var(--radius-round);
  background-clip: content-box;
  border: 2px solid transparent;
}


/* Tabla */
.container-buscarDocumento table.document-table {
  width: 100% !important;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-family-base);
}

/* Header */
.container-buscarDocumento table.document-table thead th {
  position: sticky;
  top: 0 !important;
  z-index: 2;
  background: var(--surface-raised) !important;
  color: var(--text-muted) !important;
  padding: var(--space-4) var(--space-5) !important;
  text-align: left !important;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}

.container-buscarDocumento table.document-table thead th i {
  margin-left: var(--space-1);
  font-size: 11px;
  color: var(--text-muted);
}


/* Zebra + hover sobre cada tbody (= grupo folder+documents) */
.container-buscarDocumento table.document-table tbody {
  transition: background-color var(--transition-fast);
}

.container-buscarDocumento table.document-table tbody:nth-child(even) {
  background: var(--neutral-50);
}

.container-buscarDocumento table.document-table tbody:hover {
  background: var(--brand-cyan-100);
}

.container-buscarDocumento table.document-table tbody:has(.show) {
  background: var(--brand-navy-100) !important;
}

.container-buscarDocumento table.document-table tbody tr {
  border-top: 0 !important;
}

.container-buscarDocumento table.document-table tbody tr + tr {
  border-top: 1px solid var(--border-subtle) !important;
}

/* Celdas */
.container-buscarDocumento table.document-table tbody td {
  padding: var(--space-4) var(--space-5) !important;
  font-size: var(--text-sm) !important;
  color: var(--text-default) !important;
  vertical-align: middle;
}

.container-buscarDocumento table.document-table tbody td a {
  color: var(--text-strong) !important;
  text-decoration: none;
  font-weight: var(--font-weight-semibold);
  transition: color var(--transition-fast);
}

.container-buscarDocumento table.document-table tbody td a:hover {
  color: var(--brand-cyan-700) !important;
}


/* Document-name — icono + nombre */
.container-buscarDocumento td.document-name {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.container-buscarDocumento td.document-name i.folder-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--brand-cyan-100);
  color: var(--brand-cyan-700) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.container-buscarDocumento td.document-name i.file-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--neutral-100);
  color: var(--brand-navy-700) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

.container-buscarDocumento td.document-name.indent {
  padding-left: calc(var(--space-5) + 52px) !important;
  color: var(--text-default) !important;
  font-size: var(--text-sm);
}

.container-buscarDocumento tr.folder-row {
  cursor: pointer;
}


/* Badge de estado */
.doc-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px var(--space-3);
  border-radius: var(--radius-round);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-normal);
  line-height: 1.6;
  white-space: nowrap;
}

.doc-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--radius-round);
  flex-shrink: 0;
}

.doc-status--signed {
  background: var(--success-50);
  color: var(--success-700);
}
.doc-status--signed::before { background: var(--success-500); }

.doc-status--pending {
  background: var(--warning-50);
  color: var(--warning-700);
}
.doc-status--pending::before { background: var(--warning-500); }

.doc-status--in_progress,
.doc-status--open {
  background: var(--info-50);
  color: var(--info-700);
}
.doc-status--in_progress::before,
.doc-status--open::before { background: var(--info-500); }

.doc-status--expired,
.doc-status--rejected,
.doc-status--error {
  background: var(--danger-50);
  color: var(--danger-700);
}
.doc-status--expired::before,
.doc-status--rejected::before,
.doc-status--error::before { background: var(--danger-500); }

.doc-status--none,
.doc-status--unknown {
  background: var(--neutral-100);
  color: var(--text-muted);
}
.doc-status--none::before,
.doc-status--unknown::before { background: var(--neutral-400); }


/* Actions dropdown */
.container-buscarDocumento td.actions {
  padding: var(--space-2) var(--space-4) !important;
  text-align: right !important;
  width: 56px;
  overflow: visible;
}

.container-buscarDocumento td.actions > i.fa-ellipsis-vertical {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-round);
  background: transparent;
  color: var(--text-muted) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.container-buscarDocumento td.actions > i.fa-ellipsis-vertical:hover {
  background: var(--neutral-100);
  color: var(--text-strong) !important;
}

.container-buscarDocumento td.actions .container-actions {
  background: var(--surface-raised) !important;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg) !important;
  box-shadow:
    0 1px 2px rgba(15, 18, 35, 0.04),
    0 16px 32px -12px rgba(15, 18, 35, 0.18) !important;
  min-width: 180px;
  padding: var(--space-2);
  margin: 0 !important;
  right: 48px;
  top: 50%;
  transform: translateY(-50%);
  left: auto !important;
  /* V10.5.2: thead sticky tiene z-index:2 (L283) y crea stacking
     context. Sin z-index explícito, el pop-up cae por detrás.
     --z-dropdown (100) deja amplio headroom vs el thead. */
  z-index: var(--z-dropdown);
}

.container-buscarDocumento td.actions .container-actions button {
  display: flex !important;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) !important;
  height: auto !important;
  width: 100% !important;
  text-align: left !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-strong) !important;
  font-family: var(--font-family-base);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.container-buscarDocumento td.actions .container-actions button:hover {
  background: var(--brand-cyan-100);
  color: var(--brand-cyan-700) !important;
}

.container-buscarDocumento td.actions .container-actions form:first-of-type button {
  border-bottom: 0 !important;
}


/* ============================================================
   EMPTY STATE
   ============================================================ */

.docs-empty {
  padding: var(--space-16) var(--space-6);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.docs-empty__icon {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-round);
  background: var(--brand-cyan-100);
  color: var(--brand-cyan-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-bottom: var(--space-2);
}

.docs-empty__title {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-strong);
  letter-spacing: var(--tracking-snug);
}

.docs-empty__description {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  max-width: 420px;
  line-height: var(--leading-normal);
}

/* V9.5(c): migrado a .btn .btn--primary del DS. Sólo quedan overrides
   no-DS: gap más amplio y margin-top específico del empty state.
   La altura/padding canónicos del DS (40px / 8px 30px) reemplazan
   los 44px / 0 var(--space-5) previos — mini regresión visual
   aceptada. */
.docs-empty__cta {
  gap: var(--space-2);
  margin-top: var(--space-2);
}


/* ============================================================
   PAGINADOR REFINADO
   ============================================================ */

.container-buscarDocumento .container-paginator {
  margin: var(--space-6) 0 !important;
  display: flex;
  justify-content: center;
}

.container-buscarDocumento .container-paginator .pagy.series-nav {
  background: var(--surface-raised) !important;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md) !important;
  overflow: hidden;
  display: inline-flex;
  padding: 4px;
  gap: 2px;
  box-shadow: var(--elevation-1);
}

.container-buscarDocumento .container-paginator .pagy a,
.container-buscarDocumento .container-paginator .pagy span {
  padding: 6px var(--space-3) !important;
  min-width: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm) !important;
  color: var(--text-default) !important;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  background: transparent !important;
  text-decoration: none;
}

.container-buscarDocumento .container-paginator .pagy a:hover {
  background: var(--brand-cyan-100) !important;
  color: var(--brand-cyan-700) !important;
}

.container-buscarDocumento .container-paginator .pagy [aria-current="page"] {
  background: var(--brand-navy-700) !important;
  color: #fff !important;
}


/* ============================================================
   FILTER BOX — moderniza el popover lateral existente
   ============================================================ */

/* V10.2 — H1: el panel quedaba pegado al borde derecho del viewport
   porque parent .container-buscarDocumento es position:static, así que
   right:0 ancla al viewport. Offset --space-4 + z-index dropdown para
   asegurar que el panel queda sobre el card "Cuenta Actual". */
.container-buscarDocumento .filter-box {
  width: 300px !important;
  border-radius: var(--radius-xl) !important;
  padding: var(--space-5) !important;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  box-shadow:
    0 1px 2px rgba(15, 18, 35, 0.04),
    0 16px 32px -12px rgba(15, 18, 35, 0.18) !important;
  font-family: var(--font-family-base) !important;
  top: calc(var(--space-16) + var(--space-6));
  left: auto !important;
  right: var(--space-4) !important;
  bottom: auto !important;
  z-index: var(--z-dropdown);
}

.container-buscarDocumento .filter-box .filter-header {
  margin-bottom: var(--space-5) !important;
  font-size: var(--text-md);
  color: var(--text-strong) !important;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}

.container-buscarDocumento .filter-box .filter-header i.fa-filter {
  color: var(--brand-navy-700);
  margin-right: var(--space-2);
}

.container-buscarDocumento .filter-box .filter-header .close-filter {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-round);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: background-color var(--transition-fast);
}

.container-buscarDocumento .filter-box .filter-header .close-filter:hover {
  background: var(--neutral-100);
  color: var(--text-strong);
}

.container-buscarDocumento .filter-box .filter-group {
  margin-bottom: var(--space-4) !important;
}

.container-buscarDocumento .filter-box .filter-title {
  color: var(--text-strong) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--font-weight-semibold) !important;
  margin-bottom: var(--space-3) !important;
}

.container-buscarDocumento .filter-box .filter-option {
  color: var(--text-default) !important;
  font-size: var(--text-sm) !important;
  margin-left: 0 !important;
  padding-left: var(--space-5);
  margin-bottom: var(--space-2) !important;
  cursor: pointer;
}

.container-buscarDocumento .filter-box .filter-select {
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-2) var(--space-3) !important;
  font-size: var(--text-sm) !important;
  color: var(--text-strong) !important;
  text-align: left !important;
  height: 36px;
  background: var(--surface-raised);
}

/* V10.2 — H2: migrado a .btn--primary (gotcha 8.9 / V9.5(c)). El ERB
   ahora aplica `btn btn--primary filter-apply`; lo canónico
   (background navy, color, radius, padding, font-*, hover lift)
   lo gestiona components/buttons.css. Solo preservamos contexto:
   ancho 100% del filter-box y margen superior al bloque previo.
   El :hover se elimina (cyan shadow + translateY-1px duplicado
   del canónico .btn--primary; opacity:1 !important era anti-patrón). */
.container-buscarDocumento .filter-box .filter-apply {
  width: 100%;
  margin: var(--space-4) 0 0 !important;
}

.container-buscarDocumento .filter-box .date-range-box {
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border-default) !important;
  padding: var(--space-3) !important;
}

.container-buscarDocumento .filter-box .date-range-box input {
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-strong) !important;
  padding: var(--space-2) var(--space-3) !important;
}


/* ============================================================
   CUENTA SELECTOR (multi-profile dropdown)
   ============================================================ */

/* CUENTA CARD — picker de perfil en la esquina superior derecha del hero.
   Estilo moderno: card con border subtle + radius-xl + elevation-1,
   avatar circular gradient navy→cyan (mismo del home-hero), eyebrow
   "Cuenta Actual" uppercase letter-spaced, email body, chevron cyan. */

.container-buscarDocumento .cuenta-container {
  position: static !important;
  min-width: 280px;
  max-width: 360px;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-xl) !important;
  background: var(--surface-raised) !important;
  box-shadow: var(--elevation-1);
  overflow: hidden;
  align-self: flex-start;
}

/* button_to genera <form class="cuenta"> wrapping <button>; el contenido
   real va en el <div class="cuenta principal"> dentro del button. Reset
   del form y del button, y aplicamos grid al div interno. */
.container-buscarDocumento .cuenta-container form.cuenta {
  display: block;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

.container-buscarDocumento .cuenta-container form.cuenta > button {
  all: unset;
  display: block;
  width: 100%;
  cursor: pointer;
  box-sizing: border-box;
}

.container-buscarDocumento .cuenta-container div.cuenta {
  display: grid !important;
  grid-template-columns: auto 40px 1fr !important;
  align-items: center !important;
  gap: var(--space-3) !important;
  padding: var(--space-3) var(--space-4) !important;
  color: var(--text-strong) !important;
  font-family: var(--font-family-base);
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast);
  cursor: pointer;
}

.container-buscarDocumento .cuenta-container form.cuenta:hover div.cuenta,
.container-buscarDocumento .cuenta-container div.cuenta:hover {
  background: var(--brand-navy-100);
}

/* Chevron orden: columna 1 izquierda del avatar */
.container-buscarDocumento .cuenta-container div.cuenta > i.fa-chevron-down {
  grid-column: 1;
  color: var(--text-muted);
  font-size: 12px;
  transition: var(--transition-base);
}

/* Legacy .transparent oculta el chevron en items secundarios */
.container-buscarDocumento .cuenta-container div.cuenta > i.fa-chevron-down.transparent {
  visibility: hidden;
}

/* V10.5.1: el chevron rota 180° (apunta ↑) SOLO cuando el dropdown
   está abierto. dropdown_controller.js#toggleDropdown agrega .open al
   <form class="cuenta"> y .rotate al <i>, por eso targeteamos
   .cuenta.open y .fa-chevron-down.rotate (no .cuenta-container.open).
   El selector original :has(.cuenta.principal) :not(.transparent)
   rotaba por default porque el JS quita .transparent de la cuenta
   principal en renderUI → chevron quedaba ↑ en estado cerrado. */
.container-buscarDocumento .cuenta-container .cuenta.open > i.fa-chevron-down,
.container-buscarDocumento .cuenta-container .cuenta > i.fa-chevron-down.rotate {
  transform: rotate(180deg);
}

/* Avatar — círculo gradient navy→cyan, iniciales tipográficas del user
   (aquí el legacy renderea fa-user; se enmascara el icono con el gradient). */
.container-buscarDocumento .cuenta-container div.cuenta > i.fa-user {
  grid-column: 2;
  width: 40px !important;
  height: 40px !important;
  border-radius: var(--radius-round);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--brand-navy-700) 0%, var(--brand-cyan-600) 100%);
  color: #fff !important;
  font-size: 16px !important;
  box-shadow:
    0 1px 2px rgba(15, 18, 35, 0.08),
    0 8px 16px -8px rgba(34, 45, 139, 0.4);
  flex-shrink: 0;
}

/* Texto: eyebrow + email en columna (sobrescribe el h4 inline con span) */
.container-buscarDocumento .cuenta-container div.cuenta h4 {
  grid-column: 3;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0;
  color: var(--text-muted) !important;
  font-family: var(--font-family-base) !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--font-weight-semibold) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--tracking-widest) !important;
  line-height: 1.2 !important;
  overflow: hidden;
}

.container-buscarDocumento .cuenta-container div.cuenta h4 span {
  font-family: var(--font-family-base) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--font-weight-medium) !important;
  color: var(--text-strong) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: var(--leading-snug) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Items secundarios (otras cuentas) separados con border-top */
.container-buscarDocumento .cuenta-container div.cuenta:not(.principal) {
  border-top: 1px solid var(--border-subtle);
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
  .container-buscarDocumento {
    padding: var(--space-6) var(--space-4) var(--space-10);
  }

  .docs-hero { align-items: flex-start; }

  .container-buscarDocumento .buscador-container {
    flex-wrap: wrap;
  }

  .container-buscarDocumento .buscador-container input[type="text"] {
    min-width: 0;
    width: 100% !important;
    flex: 1 1 100%;
  }

  .container-buscarDocumento .buscador-container__search-wrap {
    flex: 1 1 100%;
    min-width: 0;
  }

  .container-buscarDocumento .filter-btn {
    flex: 0 0 auto;
  }

  .container-buscarDocumento table.document-table thead th:nth-child(3),
  .container-buscarDocumento table.document-table tbody td:nth-child(3) {
    display: none;  /* ocultar columna "Creador" en móvil */
  }

  .container-buscarDocumento td.document-name.indent {
    padding-left: var(--space-6) !important;
  }

  .container-buscarDocumento .filter-box {
    right: var(--space-4) !important;
    left: var(--space-4) !important;
    width: auto !important;
  }
}

/* Ajustes extra 480px — ocultamos más columnas y compactamos el empty state */
@media (max-width: 480px) {
  .container-buscarDocumento {
    padding: var(--space-5) var(--space-3) var(--space-8);
  }

  /* Ocultar "Última modificación" también en pantallas muy chicas
     (queda Nombre + Badge estado + 3-dots) */
  .container-buscarDocumento table.document-table thead th:nth-child(4),
  .container-buscarDocumento table.document-table tbody td:nth-child(4) {
    display: none;
  }

  .container-buscarDocumento table.document-table thead th,
  .container-buscarDocumento table.document-table tbody td {
    padding: var(--space-3) var(--space-3) !important;
  }

  .container-buscarDocumento td.document-name i.folder-icon {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }

  .container-buscarDocumento td.document-name.indent {
    padding-left: calc(var(--space-3) + 40px) !important;
  }

  /* Filter-btn: sólo icono en pantallas muy chicas */
  .container-buscarDocumento .filter-btn {
    padding: 0 var(--space-3) !important;
  }

  /* Empty state: CTA full-width */
  .docs-empty { padding: var(--space-10) var(--space-4); }
  .docs-empty__cta { width: 100%; justify-content: center; }
  .docs-empty__icon { width: 60px; height: 60px; font-size: 22px; }
  .docs-empty__title { font-size: var(--text-lg); }
}


/* ============================================================
   ENTRADA ANIMADA
   ============================================================ */

@keyframes doc-row-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.container-buscarDocumento table.document-table tbody {
  animation: doc-row-in var(--transition-base) var(--ease-out) both;
}
.container-buscarDocumento table.document-table tbody:nth-child(1) { animation-delay: 0.02s; }
.container-buscarDocumento table.document-table tbody:nth-child(2) { animation-delay: 0.04s; }
.container-buscarDocumento table.document-table tbody:nth-child(3) { animation-delay: 0.06s; }
.container-buscarDocumento table.document-table tbody:nth-child(4) { animation-delay: 0.08s; }

@media (prefers-reduced-motion: reduce) {
  .container-buscarDocumento table.document-table tbody { animation: none; }
}


/* ============================================================
 * V11.7c — Dark mode tabla Mis Documentos (/buscar_documento)
 * ============================================================
 * 6 frentes legacy con tokens light hardcoded (--neutral-50,
 * --brand-cyan-100, --brand-navy-100, --success-50, --warning-50,
 * --info-50, --danger-50) que no tienen variante dark.
 *
 * Causa raíz del bug: las reglas legacy modernas (líneas 304-318,
 * 356-380, 415-451 de este archivo) usan tokens base del palette
 * light. En dark mode, esos tokens NO redefinen — quedan como
 * #F8F8FC, #EBF4F5, #EFEFFD, etc. — generando flash white masivo
 * en las filas alternas (zebra) de la tabla más 5 frentes
 * adicionales (hover tbody, expand state, squircles folder/file,
 * 5 variantes de badges status).
 *
 * Aplicación directa de la doctrina V11.6 alpha-por-rol
 * cyan-translúcido sobre dark (design-system.md §11.3):
 *   - 3% zebra wrapper muy sutil
 *   - 8% hover tbody
 *   - 12% expand :has(.show) — defensivo con !important
 *   - 10% squircle folder reposo destacado (patrón V11.6f)
 *   - 6% squircle file hover sutil neutro
 *   - 16% badges soft (patrón consolidado V11.5e/f/g/h, §11.4)
 *
 * Light mode intacto: cero modificaciones a las reglas existentes.
 *
 * TOKENS FALTANTES en tokens.css — fix con hex directo:
 *   - --success-300 → #6EE7B7 (emerald-300)
 *   - --warning-300 → #FCD34D (amber-300)
 *   - --info-300    → #7DD3FC (sky-300)
 *   - --danger-300  → var(--danger-300) (#EE8B9D, ya existe)
 * Decisión arquitectónica Diego (opción B brief): hex directo
 * para no ampliar scope de tokens.css. Si emerge otra superficie
 * dark con badges status, promover los 3 tokens al DS.
 *
 * 1 !important agregado (F3 igualando legacy con !important).
 * F4/F5 mantienen el patrón asimétrico color !important + bg sin
 * !important (matching el legacy correspondiente).
 * ============================================================ */

/* F1 — Zebra striping (BUG CRÍTICO: causa del flash white masivo) */
[data-theme="dark"] .container-buscarDocumento table.document-table tbody:nth-child(even) {
  background: rgba(102, 217, 245, 0.03);  /* cyan-300 @3% */
}

/* F2 — Hover sutil sobre tbody */
[data-theme="dark"] .container-buscarDocumento table.document-table tbody:hover {
  background: rgba(102, 217, 245, 0.08);  /* cyan-300 @8% */
}

/* F3 — Estado expandido :has(.show) — !important defensivo
 * porque el legacy también declara !important. */
[data-theme="dark"] .container-buscarDocumento table.document-table tbody:has(.show) {
  background: rgba(102, 217, 245, 0.12) !important;  /* cyan-300 @12% */
}

/* F4 — Squircle ícono carpeta — patrón squircle V11.6f.
 * Color !important defensivo porque legacy [0,3,1] tiene !important;
 * bg sin !important porque el legacy no lo declara. */
[data-theme="dark"] .container-buscarDocumento td.document-name i.folder-icon {
  background: rgba(102, 217, 245, 0.10);  /* cyan-300 @10% */
  color: var(--brand-cyan-300) !important;
}

/* F5 — Squircle ícono archivo. Mismo patrón asimétrico color
 * !important + bg sin !important. */
[data-theme="dark"] .container-buscarDocumento td.document-name i.file-icon {
  background: rgba(245, 245, 251, 0.06);  /* blanco @6% — neutro sobre dark */
  color: var(--text-brand) !important;     /* #C4C8FF en dark */
}

/* F6 — Badges .doc-status--* (patrón badge soft V11) */

[data-theme="dark"] .doc-status--signed {
  background: rgba(22, 163, 74, 0.16);    /* success-500 @16% */
  color: #6EE7B7;                          /* emerald-300 (--success-300 inexistente) */
}

[data-theme="dark"] .doc-status--pending {
  background: rgba(245, 158, 11, 0.16);   /* warning-500 @16% */
  color: #FCD34D;                          /* amber-300 (--warning-300 inexistente) */
}

[data-theme="dark"] .doc-status--in_progress,
[data-theme="dark"] .doc-status--open {
  background: rgba(33, 150, 243, 0.16);   /* info-500 @16% */
  color: #7DD3FC;                          /* sky-300 (--info-300 inexistente) */
}

[data-theme="dark"] .doc-status--expired,
[data-theme="dark"] .doc-status--rejected,
[data-theme="dark"] .doc-status--error {
  background: rgba(219, 6, 50, 0.16);     /* danger-500 @16% */
  color: var(--danger-300);                /* #EE8B9D — ya existe en tokens.css */
}

[data-theme="dark"] .doc-status--none,
[data-theme="dark"] .doc-status--unknown {
  background: rgba(245, 245, 251, 0.08);  /* blanco @8% — neutro sobre dark */
  /* color: var(--text-muted) ya theme-aware vía cascada del legacy original */
}

/* ============================================================
 * FIN V11.7c
 * ============================================================ */
/*
 * views/validator_modern.css — Validar Documento (paso 19)
 * FirmaYa / zappb
 *
 * Aditivo sobre documents.css legacy (que cubre .container-validarDocumento).
 * Convierte el layout de 2 botones toggle + form en tabs modernas + card
 * con formulario. Reutiliza el patrón de drop-zone del paso 14 para la
 * variante "Validar PDF".
 *
 * Preserva: data-controller="classes", data-classes-target="validarCve|
 * validarPdf", data-action="click->classes#activateContainerValidar",
 * form action validate_cves_path / validate_files_path, input names.
 */


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

.container-validarDocumento {
  max-width: 1044px !important;
  width: auto !important;
  margin: var(--space-8) auto !important;
  padding: 0 var(--space-6);
  font-family: var(--font-family-base);
}


/* ============================================================
   HEADER — título + subtitle
   ============================================================ */

.container-validarDocumento .texto-validarDocumento {
  padding-top: 0 !important;
  text-align: left !important;
  margin-bottom: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.container-validarDocumento .validator-eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--brand-cyan-700);
  font-weight: var(--font-weight-semibold);
  margin-bottom: 0;
}

.container-validarDocumento .texto-validarDocumento h3 {
  margin: 0 !important;
  font-family: var(--font-family-display);
  font-size: clamp(24px, 2.4vw, var(--text-display-md));
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--text-strong);
}

.container-validarDocumento .texto-validarDocumento p {
  margin: 0 !important;
  color: var(--text-muted) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--font-weight-medium) !important;
  line-height: var(--leading-normal);
}


/* ============================================================
   TABS (CVE / PDF) — underline cyan en activa (patrón paso 14)
   ============================================================ */

.container-validarDocumento .container-btnValidar {
  justify-content: flex-start !important;
  gap: var(--space-5) !important;
  margin-top: 0 !important;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}

.container-validarDocumento .container-btnValidar .btn-validar,
.container-validarDocumento .container-btnValidar .container-validarCVE,
.container-validarDocumento .container-btnValidar .container-ValidarPDF {
  background: transparent !important;
  padding: var(--space-2) !important;
  width: auto !important;
  height: auto !important;
  border: none !important;
  border-radius: 0 !important;
  position: relative;
  cursor: pointer !important;
}

.container-validarDocumento .container-btnValidar .btn-validar label {
  color: var(--text-muted) !important;
  font-family: var(--font-family-base);
  font-size: var(--text-sm) !important;
  font-weight: var(--font-weight-semibold) !important;
  cursor: pointer !important;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  letter-spacing: var(--tracking-snug);
  transition: color var(--transition-fast);
}

.container-validarDocumento .container-btnValidar .btn-validar:hover label {
  color: var(--text-strong) !important;
}

/* Tab activa */
.container-validarDocumento .container-btnValidar .btn-validar.active {
  background: transparent !important;
}

.container-validarDocumento .container-btnValidar .btn-validar.active label {
  color: var(--text-brand) !important;
}

.container-validarDocumento .container-btnValidar .btn-validar.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--space-3) - 1px);
  height: 2px;
  background: linear-gradient(90deg, var(--brand-cyan-500), var(--brand-cyan-600));
  border-radius: var(--radius-round);
}

/* Iconos prefijos para cada tab (inyectados vía ERB si es posible) */
.container-validarDocumento .container-btnValidar .container-validarCVE label::before {
  content: "\f3ed";  /* fa-shield-halved */
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "FontAwesome";
  font-weight: 900;
  font-size: 13px;
  color: var(--brand-cyan-500);
}

.container-validarDocumento .container-btnValidar .container-ValidarPDF label::before {
  content: "\f1c1";  /* fa-file-pdf */
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "FontAwesome";
  font-weight: 900;
  font-size: 13px;
  color: var(--danger-500);
}


/* ============================================================
   FORM CVE — card con input + CTA
   ============================================================ */

.container-validarDocumento .content-container-validarCve {
  max-width: 520px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: var(--space-6) !important;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--elevation-1);
  flex-direction: column;
  gap: var(--space-4);
}

.container-validarDocumento .content-container-validarCve form {
  gap: var(--space-4);
}

.container-validarDocumento .content-container-validarCve .input-cve {
  padding: 0 var(--space-4) 0 calc(var(--space-4) + var(--space-6)) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  background: var(--surface-raised);
  height: 44px !important;
  width: 100% !important;
  font-family: var(--font-family-base);
  font-size: var(--text-md) !important;
  color: var(--text-strong);
  margin: 0 !important;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23898AB1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/></svg>");
  background-repeat: no-repeat;
  background-position: var(--space-4) center;
}

.container-validarDocumento .content-container-validarCve .input-cve::placeholder {
  color: var(--text-muted) !important;
}

.container-validarDocumento .content-container-validarCve .input-cve:focus {
  outline: none;
  border-color: var(--brand-cyan-500) !important;
  box-shadow: 0 0 0 3px rgba(0, 186, 212, 0.18);
}

/* V6.2: unificación CTAs a navy. "Validar" del flujo CVE cambia de
   gradient cyan a navy-800 sólido + shadows navy. !important conservado
   porque hay reglas legacy con alta especificidad que de otra forma
   se imponen sobre los selectors planos. */
.container-validarDocumento .content-container-validarCve .btn-validarCVE {
  background: var(--brand-navy-800) !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
  height: 44px !important;
  padding: 0 var(--space-6) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-family-base) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--font-weight-semibold) !important;
  letter-spacing: var(--tracking-snug);
  cursor: pointer !important;
  box-shadow:
    0 1px 2px rgba(22, 47, 133, 0.18),
    0 10px 20px -12px rgba(22, 47, 133, 0.35) !important;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: unset !important;
}

.container-validarDocumento .content-container-validarCve .btn-validarCVE:hover {
  background: var(--brand-navy-500) !important;
  transform: translateY(-1px);
  box-shadow:
    0 2px 4px rgba(22, 47, 133, 0.24),
    0 14px 24px -10px rgba(22, 47, 133, 0.50) !important;
}

.container-validarDocumento .content-container-validarCve .btn-validarCVE:active {
  background: var(--brand-navy-800) !important;
  transform: translateY(0) scale(0.98);
}

.container-validarDocumento .content-container-validarCve .btn-validarCVE::before {
  content: "\f058";  /* fa-check-circle */
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "FontAwesome";
  font-weight: 900;
  font-size: 14px;
}


/* ============================================================
   FORM PDF — usa el partial _file_uploader (paso 14) tal cual
   ============================================================
   El upload_modern.css ya estiliza .upload-container con dashed
   border + icono nube. Aquí solo ajustamos el contenedor wrapper
   y el botón "Validar" de abajo.
   ============================================================ */

.container-validarDocumento .content-container-validarPdf {
  max-width: 720px !important;
  width: 100% !important;
  margin: 0 auto !important;
  gap: var(--space-4) !important;
}

.container-validarDocumento .content-container-validarPdf .upload-container {
  margin: 0 !important;
}

/* V6.2: unificación CTAs a navy. "Validar" del flujo PDF — gemelo del
   btn-validarCVE de arriba. Mismo tratamiento navy-800 sólido. */
.container-validarDocumento .content-container-validarPdf .btn-validarPDF {
  background: var(--brand-navy-800) !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
  height: 44px !important;
  padding: 0 var(--space-6) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-family-base) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--font-weight-semibold) !important;
  cursor: pointer !important;
  box-shadow:
    0 1px 2px rgba(22, 47, 133, 0.18),
    0 10px 20px -12px rgba(22, 47, 133, 0.35) !important;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: 0 auto !important;
  min-width: 160px;
}

.container-validarDocumento .content-container-validarPdf .btn-validarPDF:hover {
  background: var(--brand-navy-500) !important;
  transform: translateY(-1px);
  box-shadow:
    0 2px 4px rgba(22, 47, 133, 0.24),
    0 14px 24px -10px rgba(22, 47, 133, 0.50) !important;
}

.container-validarDocumento .content-container-validarPdf .btn-validarPDF:active {
  background: var(--brand-navy-800) !important;
  transform: translateY(0) scale(0.98);
}

.container-validarDocumento .content-container-validarPdf .btn-validarPDF::before {
  content: "\f058";  /* fa-check-circle */
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "FontAwesome";
  font-weight: 900;
  font-size: 14px;
}


/* ============================================================
   RESULTADO DE VALIDACIÓN (show_validated_docs)
   ============================================================
   Refinamiento del listado de documentos validados existente.
   Las tarjetas .container-documentos-validar se mantienen pero
   con estilos modernos.
   ============================================================ */

.container-validarDocumento .container-RevisarPDF .container-documentos-validar {
  width: 100% !important;
  margin: 0 auto var(--space-4) !important;
  background: var(--surface-raised) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--elevation-1) !important;
  padding: var(--space-5) var(--space-6) !important;
  transition:
    border-color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-base);
}

/* .container-documentos-validar:hover unificado V9.5(a) — ver
   components/cards.css. Si QA visual revela regresión (specificity
   wars con regla legacy de reposo, lección V8.2), agregar override
   scopeado aquí con !important solo para border-color y box-shadow. */

.container-validarDocumento .container-RevisarPDF .container-documentos-validar .header-doc-pdf{
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--neutral-50);
  letter-spacing: var(--tracking-snug);
  border-bottom: 1px solid var(--border-subtle) !important;
  padding: var(--space-3) !important;
  width: 100% !important;
  font-family: var(--font-family-display) !important;
}

.container-validarDocumento .container-RevisarPDF .container-documentos-validar .doc-pdf.collapsed .container-contador-firma{
  i{
    transform: rotate(180deg);
  }
}
.container-validarDocumento .container-RevisarPDF .container-documentos-validar .container-contador-firma{
  font-size: 12px;
  display: flex;
  gap: 5px;
  align-items: baseline;
  span.contador-de-firma{
    font-weight: var(--font-weight-semibold);
    background: var(--success-50);
    color: var(--success-600, #16a34a);
    padding: var( --space-1);
  }
  i{
    color: var(--brand-cyan-600);
    transition: var(--transition-base);
    cursor: pointer;
  }
}

.container-validarDocumento .container-RevisarPDF .container-documentos-validar h4 {
  font-size: var(--text-md) !important;
  font-weight: var(--font-weight-bold) !important;
  color: var(--text-strong) !important;
  margin: 0;
}

.container-validarDocumento .container-RevisarPDF .container-documentos-validar h4 i {
  color: var(--brand-cyan-600) !important;
  margin-right: var(--space-2) !important;
}

.container-validarDocumento .container-RevisarPDF .container-documentos-validar .container-not-sign{
  text-align: center;
  transition: var( --transition-base);
  img{
    width: 144px;
  }
}

.container-validarDocumento .container-RevisarPDF .container-documentos-validar .doc-pdf.collapsed .container-not-sign{
  display: none;
}

/* Botones "Ver / Filtrar" arriba de la lista */
.container-validarDocumento .container-RevisarPDF .container-btns {
  margin-bottom: var(--space-4) !important;
  max-width: 920px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.container-validarDocumento .container-RevisarPDF .container-btns .btns-pdf button {
  font-family: var(--font-family-base) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--font-weight-semibold) !important;
  color: var(--text-brand) !important;
  border: none !important;
  border-bottom: 2px solid var(--brand-cyan-400) !important;
  background: transparent !important;
  padding: var(--space-2) var(--space-3) !important;
  cursor: pointer !important;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.container-validarDocumento .container-RevisarPDF .container-btns .btns-pdf button:hover {
  color: var(--brand-cyan-700) !important;
  border-color: var(--brand-cyan-600) !important;
}


/* ============================================================
   WRAPPER RESULTADOS (show_validated_docs)
   ============================================================
   .container-resultados-validar reemplaza .container-btnValidar
   para evitar que los estilos de tabs sangren en la vista de
   resultados.
   ============================================================ */

.container-validarDocumento .container-resultados-validar {
  width: 100%;
}

.container-validarDocumento .container-resultados-validar .container-RevisarPDF {
  width: 100%;
}


/* ============================================================
   TABLA DE FIRMAS (show_validated_docs)
   ============================================================ */

.container-validarDocumento .container-RevisarPDF .container-documentos-validar .doc-pdf.collapsed table {
  display: none !important;
}

.container-validarDocumento .container-RevisarPDF .container-documentos-validar .doc-pdf table {
  display: table !important;
  width: auto !important;
  border-collapse: collapse;
  margin: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-strong);
  transition: var( --transition-base);
}

.container-validarDocumento .container-RevisarPDF .container-documentos-validar .doc-pdf thead tr {
  border-bottom: 2px solid var(--border-subtle);
}

.container-validarDocumento .container-RevisarPDF .container-documentos-validar .doc-pdf th {
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-family-base);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--brand-navy-700);
  text-align: left;
  white-space: nowrap;
}

.container-validarDocumento .container-RevisarPDF .container-documentos-validar .doc-pdf tbody tr {
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--transition-fast);
}

.container-validarDocumento .container-RevisarPDF .container-documentos-validar .doc-pdf tbody tr:last-child {
  border-bottom: none;
}

.container-validarDocumento .container-RevisarPDF .container-documentos-validar .doc-pdf tbody tr:hover {
  background: var(--surface-hover, rgba(0, 186, 212, 0.04));
}

.container-validarDocumento .container-RevisarPDF .container-documentos-validar .doc-pdf td {
  padding: var(--space-3) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-base);
  vertical-align: middle;
}

.container-validarDocumento .container-RevisarPDF .container-documentos-validar .doc-pdf td.numero {
  width: 36px;
  font-weight: var(--font-weight-semibold);
  color: var(--text-muted);
  text-align: center;
}

.container-validarDocumento .container-RevisarPDF .container-documentos-validar .doc-pdf td.nombre {
  min-width: 140px;
  font-weight: var(--font-weight-medium);
}

.container-validarDocumento .container-RevisarPDF .container-documentos-validar .doc-pdf td.rut,
.container-validarDocumento .container-RevisarPDF .container-documentos-validar .doc-pdf td.estado {
  width: 100px;
  white-space: nowrap;
}

.container-validarDocumento .container-RevisarPDF .container-documentos-validar .doc-pdf td.estado {
  font-weight: var(--font-weight-semibold);
  color: var(--success-600, #16a34a);
}

.container-validarDocumento .container-RevisarPDF .container-documentos-validar .doc-pdf td.firma {
  width: 110px;
}

.container-validarDocumento .container-RevisarPDF .container-documentos-validar .doc-pdf td.timestamp {
  width: 180px;
  white-space: nowrap;
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.container-validarDocumento .container-RevisarPDF .container-documentos-validar .doc-pdf td.autoridad {
  min-width: 160px;
}

.container-validarDocumento .container-RevisarPDF .container-documentos-validar .doc-pdf td.emisor {
  min-width: 180px;
}

/* Overflow horizontal en mobile */
.container-validarDocumento .container-RevisarPDF .container-documentos-validar .doc-pdf {
  overflow-x: auto;
  width: 100% !important;
  margin: 0 auto var(--space-4) !important;
  background: var(--surface-raised) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--elevation-1) !important;
  padding: 0 !important;
  transition:
    border-color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-base);
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
  .container-validarDocumento {
    margin: var(--space-6) auto !important;
    padding: 0 var(--space-4);
  }

  .container-validarDocumento .container-btnValidar {
    gap: var(--space-4) !important;
  }

  .container-validarDocumento .content-container-validarCve {
    padding: var(--space-5) !important;
    max-width: none !important;
  }

  .container-validarDocumento .content-container-validarCve .btn-validarCVE,
  .container-validarDocumento .content-container-validarPdf .btn-validarPDF {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .container-validarDocumento .content-container-validarCve {
    padding: var(--space-4) !important;
  }

  .container-validarDocumento .content-container-validarCve .input-cve {
    height: 42px !important;
    font-size: var(--text-sm) !important;
  }
}


/* ============================================================
   ENTRADA ANIMADA
   ============================================================ */

@keyframes validator-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.container-validarDocumento .content-container-validarCve,
.container-validarDocumento .content-container-validarPdf {
  animation: validator-fade-in var(--transition-base) var(--ease-out) both;
}

@media (prefers-reduced-motion: reduce) {
  .container-validarDocumento .content-container-validarCve,
  .container-validarDocumento .content-container-validarPdf {
    animation: none;
  }
}
.pagy {
    --B: 1;
    --H: 0;
    --S: 0;
    --L: 50;
    --A: 1;
    --spacing: 0.125rem;
    --padding: 0.75rem;
    --rounding: 1.75rem;
    --border-width: 0rem;
    --font-size: 0.875rem;
    --font-weight: 600;
    --line-height: 1.75;

    --text:               hsla(var(--H) var(--S) calc(var(--L) - (25 * var(--B))) / var(--A));
    --text-hover:         hsla(var(--H) var(--S) calc(var(--L) - (30 * var(--B))) / var(--A));
    --text-current:       hsla(var(--H) var(--S) calc(100 * (var(--B) + 1)) / var(--A));
    --background:         hsla(var(--H) var(--S) calc(var(--L) + (30 * var(--B))) / var(--A));
    --background-hover:   hsla(var(--H) var(--S) calc(var(--L) + (20 * var(--B))) / var(--A));
    --background-current: hsla(var(--H) var(--S) var(--L) / var(--A));
    --background-input:   hsla(var(--H) var(--S) calc(var(--L) + (45 * var(--B))) / var(--A));

    color: var(--text);
    font-size: var(--font-size);
    line-height: var(--line-height);
    font-weight: var(--font-weight);
    display: flex;
}

.pagy > :not([hidden]) ~ :not([hidden]) {
    margin-inline-start: var(--spacing);
}

.pagy a:not([role="separator"]) { /* all but gaps */
    display: block;
    text-decoration: none;
    background-color: var(--background);
    padding: calc(var(--padding) / 3) var(--padding);
    border: var(--border-width) solid var(--background-current);
    border-radius: var(--rounding);
    color: inherit;
}

.pagy a[href]:hover { /* all links on hover */
    background-color: var(--background-hover);
    color: var(--text-hover)
}

.pagy a:not([href]) { /* all but links */
    cursor: default;
}

.pagy a[role="link"]:not([aria-current]) { /* disabled links */
    opacity: .6;
}

.pagy a[aria-current] {  /* current page */
    background-color: var(--background-current);
    color: var(--text-current);
    border-color: var(--text);
}

.pagy label {
    white-space: nowrap;
    display: inline-block;
    border: var(--border-width) solid var(--background-current);
    border-radius: var(--rounding);
    background-color: var(--background);
    padding: calc((var(--padding) / 3) - var(--border-width)) var(--padding);
}

.pagy label input {
    all: unset;
    border: var(--border-width) solid var(--background-current);
    border-radius: calc(var(--rounding) / 2) !important;
    background-color: var(--background-input);
}
/*
 * application.css - Manifest principal
 * FirmaYa / zappb
 *
 * NOTA: Sprockets 4 ignora archivos con prefijo _ en require_tree
 * (los trata como partials de Sass). Por eso se listan explicitamente.
 * Al agregar un archivo nuevo, agregarlo aqui tambien.
 *
 * ORDEN DE CARGA:
 *   1. base/tokens          - variables CSS (debe ir primero)
 *   2. base/reset           - box-sizing, body, elementos base
 *   3. components/alerts
 *   4. components/buttons
 *   5. components/forms
 *   6. components/modals
 *   7. components/switch
 *   8. components/tooltips
 *   9. layout/header
 *  10. layout/footer
 *  11. views/home
 *  12. views/upload
 *  13. views/signers
 *  14. views/sign
 *  15. views/auth
 *  16. views/dashboard
 *  17. views/documents
 *  18. loading
 *  19. pagy
 *  20. (este archivo, require_self) - estilos globales restantes + responsive
 *  21. views/errors
 *  22. views/responsive
 *










































 */

 
/*------------------------------------------------Body---------------------------------------------*/
.content-section {
    max-width: 100vw;
    /* V7.1.2: sticky footer fix.
       Body ya es flex column con min-height:100vh (base/reset.css L31-43).
       Para que .footerFirma quede al fondo del viewport cuando el
       contenido es corto, .content-section necesita crecer dentro del
       body flex column. flex:1 0 auto = grow, NO shrink, basis auto:
       crece al menos hasta el tamaño de su contenido y rellena el
       sobrante. Reemplaza el hack `height: -webkit-fill-available` de
       a10d647 (webkit-only, no resolvía sticky footer fuera de Safari).
       Develop (FYA2-347) ya había sugerido `flex:1` con esta misma
       intención; ahora se aplica con la variante `1 0 auto` más segura. */
    width: 100%;
    flex: 1 0 auto;
    background: #F8F8FC;
    display: flex;
    .bodyFirma{
        /* background: #E0E0EC; version original*/
        background: #F8F8FC;
        width: 100%;
        display: flex;
        flex-direction: column;
        .progress-container {
            height: 90px;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            .steps{
                width: auto;
                display: flex;
                gap: 30px;
                .step{
                    display: flex;
                    height: 57px;
                    flex-direction: column;
                    align-items: center;
                    justify-content: space-between;
                    span.num-step{
                        height: 30px;
                        width: 30px;
                        display: flex;
                        padding: 0px 0px 3px;
                        font-size: 13px;
                        border-radius: 35px;
                        background: #898AB1;
                        border: 1px solid #8A8AB1;
                        color: #fff;
                        justify-content: center;
                        align-items: center;
                    }
                    .finish-text{
                        position: relative;
                        left: 36px;
                    }
                    .texto-span{
                        font-size: 13px;
                        color: #8A8AB1;
                        text-align: center;
                        margin-top: -10px;
                        min-width: 60px;
                    }
                }
                .line-conection{
                    position: absolute;
                    font-size: 18px;
                    transform: translateX(83px);
                    color:#222D8B;
                }
                .step-conection{
                    color: #8A8AB1;
                    display: flex;
                    gap: 5px;
                    align-items: baseline;
                }
                .step-conection2{
                    margin-right: 5px;
                }
                .step.active{
                    span.num-step{
                        background: #222D8B;
                        color: #fff;
                        border: none;
                    }
                    .texto-span{
                        color: #222D8B;
                        font-weight: 600;
                    }
                    .step-conection{
                        color: #222D8B;
                    }
                }
            }
        }
        .pdf-container {
            flex-direction: column;
       
            .headerBody-pdf{
                display: flex;
                position: relative;
                width: 100%;
                justify-content: space-between;
                .contenedor-firmaPersonalizada {
                    position: absolute;
                    cursor: move;
                    user-select: none;
                    padding-left: 25px;
                    display: none;
                    min-width: fit-content;
                    height: 11vh;
                    border-radius: 6px;
                    justify-content: flex-end;
                    .box-firma {
                        height: 4vh;
                        background: #ffa500;
                        padding: 0 12px;
                        border-bottom-left-radius: 6px;
                        p{
                            margin: 0;
                            color: #ffff;
                        }
                    }
                    .resize-handle {
                        position: absolute;
                        width: 15px;
                        height: 15px;
                        bottom: 0;
                        right: 0;
                        cursor: se-resize;
                        color: #ada4a4a8;
                        transform: rotate(-45deg);
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        .first-line{
                            height: 6px;
                            font-size: 18px;
                        }
                        .second-line{
                            height: 5px;
                            font-size: 14px;
                        }
                        .third-line{
                            font-size: 9px;
                        }
                    }
                }
                .contenedor-firmaPersonalizada:nth-child(3){
                    border: 2px solid #ffa500;
                    .box-firma {
                        background: #ffa500;
                    }
                }
                .contenedor-firmaPersonalizada:nth-child(4){
                    border:2px solid #ff1493;
                    top: 40%;
                    .box-firma {
                        background: #ff1493;
                    }
                }
                .contenedor-firmaPersonalizada:nth-child(5){
                    border:2px solid #1f40b2;
                    top: 60%;
                    .box-firma {
                        background: #1f40b2;
                    }
                }
                /* V10.4-bis: bloque legacy del control bar del visor
                   PDF eliminado en su totalidad. Toda la estilización
                   del control bar (paginadores, container-pagNum,
                   zoom-section, btn-section) vive ahora exclusivamente
                   en sign_position_modern.css con tokens DS.

                   Razón: el legacy usaba `transform: rotate(90deg)`
                   sobre .btn-section, lo cual obligaba a
                   `flex-direction: column` en los hijos para que el
                   resultado post-rotación quedara horizontal.
                   Mantenerlo en paralelo con el moderno generó el
                   gotcha 7.2 cinco veces en V10 (R4, bis-3, bis-4,
                   bis-5, V10.4). 5ª aparición = refactor mayor
                   (tech debt anotado en V10.3-bis-5).

                   Si surge regresión visual de algún control
                   específico durante el QA, replicar la propiedad
                   puntual en el moderno con tokens DS — NO restaurar
                   este bloque. */
                .contenedor-firmaPersonalizada{
                    display: none;
                }
            }
            /* V10.3-bis-5: removidos `max-width: 68vw` (recortaba
               el visor al 68% del viewport en TODOS los tamaños,
               sin media query) y `#pdfViewer { width: auto }` (el
               canvas se salía del container al renderizar PDFs
               anchos). El padding hardcoded `padding-bottom: 18px`
               y los box-shadow/border-radius del canvas ya están
               overrideados por el moderno en
               sign_position_modern.css:426-437 con !important +
               tokens DS. Patrón: gotcha 7.2 — eliminar competidor
               legacy en vez de bumpear specificity moderna (4ª
               aparición en V10). */
            .container-document {
                width: 100%;
                height: auto;
                padding-bottom: 18px;
                overflow: auto;
                text-align: center;
                #pdfViewer{
                    margin-top: 1%;
                    margin-right: 0;
                    border-radius: 8px;
                    box-shadow: 6px 6px 3px rgba(0, 0, 0, 0.14), -6px 6px 3px rgba(0, 0, 0, 0.14);
                    transform: none !important;
                }
                .containerFirma{
                    height: 79px;
                    width: 174px;
                    border-radius: 16px;
                    border: 1px solid #00bdd6;
                    background: #dbe6e7;
                    position: absolute;
                    top: 30%;
                    left: 60%;
                    z-index: 1;
                    display: none;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    cursor: grab;
                    i.fa-arrows{
                        color: rgb(0, 74, 103);
                        top: -105%;
                        position: absolute;
                    }
                    img{
                        max-width: 200px;
                    }
                    .btnes-firma {
                        display: flex;
                        padding: 3px;
                        button#btnEditar{
                            background: transparent;
                            color: #00bdd6;
                            cursor: pointer;
                            border: none;
                        }
                    }
                    .tooltip {
                        position: absolute;
                        top: -44px;
                        left: 50%;
                        transform: translateX(-50%);
                        background-color: #fff;
                        color: #005171;
                        border: 1px solid #004b69;
                        padding: 8px;
                        border-radius: 4px;
                        font-size: 12px;
                        transition: opacity 0.3s ease-in-out;

                        width: max-content;
                        white-space: nowrap;
                    }
                    .tooltip::after {
                        content: "";
                        position: absolute;
                        bottom: -19px;
                        left: 50%;
                        transform: translateX(-50%);
                        border-width: 8px;
                        border-style: solid;
                        border-color: rgb(0 74 103) transparent transparent transparent;
                    }

                }
            }

            .container-document::-webkit-scrollbar-button {
                display: none;
            }
            .container-document::-webkit-scrollbar {
                width: 7px;
            }
            .container-document::-webkit-scrollbar-track {
                background: #F8F8FC;
            }
            .container-document::-webkit-scrollbar-thumb {
                background: #ededf1;
                border-radius: 10px;
            }
            .content-section {
                display: flex;
                justify-content: space-between;
                .container-signatures{
                    width: 380px;
                    border: 1px solid #edeaea8a;
                    #signature-container.firmaBasica-step{
                        display: block !important;
                        z-index: 1;
                        min-width: 230px;
                        .menu-firma{
                            display: flex;
                            padding: 7px;
                            /*border: 1px solid #edeaea8a;*/
                            border-top: none;
                            align-items: center;
                            justify-content: space-between;
                            .tittle-add-detail{
                                display: flex;
                                align-items: center;
                                gap: 5px;
                            }
                            #btnModal, #btnModalDetalle, #btnModalDescarga, #btnModalEnlace{
                                background: none;
                                border: none;
                                /* border-bottom: 2px solid #222D8B;*/
                                color: #222D8B;
                                font-weight: 700;
                                font-size: 16px;
                                font-family: 'Open Sans', sans-serif;
                                cursor: pointer;
                            }
                            button#btnModal{
                                min-width: 130px;
                            }
                            #btnModalDetalle, #btnModalEnlace, .fas.fa-info-circle, #btnModalDescarga, .descripcionFirmado, .descripcionFirmadoMasiva{
                                display: none;
                            }
                            i.fa-solid.fa-palette{
                                margin-right: 3px;
                            }
                            i.fas.fa-info-circle {
                                color: #66d9f5;
                                font-size: 18px;
                                cursor: pointer;
                            }
                            .tooltip {

                                position: absolute;
                                transform: translateX(136%);
                                background-color: #fff;
                                color: #005171;
                                border: 1px solid #004b69;
                                padding: 8px;
                                border-radius: 4px;
                                font-size: 12px;
                                transition: opacity 0.3s ease-in-out;
                                width: max-content;
                                white-space: nowrap;
                            }
                            .tooltip::after {
                                content: "";
                                position: absolute;
                                bottom: 9px;
                                left: -17px;
                                /* transform: translateX(-106%); */
                                border-width: 7px;
                                border-style: solid;
                                border-color: transparent rgb(0, 74, 103) transparent transparent;
                            }
                        }
                        .menu-firma:has(.tittle-add-detail){
                            padding-right: 12px;
                            display: flex !important;
                            #btnModalDescarga{
                                .fas.fa-share-alt{
                                    margin-right: 5px;
                                }
                            }
                        }
                        .add-sign-text{
                            padding-left: 22px;
                        }
                        .container-tipodeFirma{
                            padding: 0;
                            border: 1px solid #edeaea8a;
                            margin: auto;
                            margin-bottom: 8px;
                            border-radius: 4px;
                            .nombreTipoFirma{
                                cursor: pointer;
                                display: flex;
                                align-items: baseline;
                                padding: 8px;
                                i{
                                    color:#222D8B;
                                    font-size: 14px;
                                }
                                p{
                                    width: 100%;
                                    display: flex;
                                    font-weight: 600;
                                    margin: 0;
                                    justify-content: space-between;
                                    align-items: center;
                                    padding-left: 5px;
                                    i{
                                        font-size: 11px;
                                        transition: 0.3s;
                                    }
                                }
                            }
                            .container-documentMiniatura{
                                display: none;
                                /* V11.7b — width 80% centrado + ratio nativo respetado.
                                   Removido `max-height: 20vh` que comprimía verticalmente
                                   la caja (ratio nativo MP4 432x280 = 1.543:1, antes
                                   deformado a ~2.2:1). Ahora el border-radius de 14px
                                   (regla global base/reset.css V11.7a) es claramente
                                   visible en las 4 esquinas y el contenido del video
                                   respeta su aspect ratio original. `display: block`
                                   requerido para que `margin: 0 auto` centre (pisa el
                                   `inline-block` heredado de V11.7a-bis). */
                                #pdfViewerPreview{
                                    width: 80%;
                                    height: auto;
                                    margin: 0 auto;
                                    display: block;
                                }
                            }
                            #signature-controls{
                                display: none;
                            }
                            #signature-container{
                                width: auto;
                                border: none;
                                .descripcion-texto, .descripcion-textoPersonalizada, .descripcion-textoMasiva, .data-section{
                                    padding: 0 !important;
                                    padding-left: 20px !important;
                                }
                                .descripcion-textoPersonalizada{
                                    margin-top: 0;
                                    display: block
                                }
                            }
                        }
                        .container-firmaRapida.active{
                            .nombreTipoFirma{
                                background: #ededf1;
                                i, p{
                                    color: #222D8B;
                                }
                                p{
                                    font-weight: bold;
                                    i{
                                        transform: rotate(180deg);
                                    }
                                }
                            }
                            .container-documentMiniatura{
                                display: block;
                                p.texto-unDocumento{
                                    width: 258px;
                                }
                                p.texto-masiva{
                                    display: none;
                                }
                            }
                            #signature-controls{
                                display: flex;
                                #confirmar-firma{
                                    display: none;
                                }
                                .modal-mensaje.confirmar-firma{
                                    .mensajeFinal.masiva{
                                        display: none;
                                    }
                                }
                                .modal-mensaje.mensaje-firmado{
                                    .content-mensaje{
                                        .mensajeFinal{
                                            margin-bottom: 7px;
                                            max-width: 420px;
                                        }
                                        .mensajeFinalTerceros{
                                            font-weight: 400;
                                            max-width: 420px;
                                        }
                                    }
                                }
                            }
                        }
                        .container-firmaPersonalizada.active{
                            .nombreTipoFirma{
                                margin-bottom: 22px;
                                background: #ededf1;
                                i, p{
                                    color: #222D8B;
                                }
                                p{
                                    font-weight: bold;
                                    i{
                                        transform: rotate(180deg);
                                    }
                                }
                            }
                            #signature-container{
                                display: flex !important;
                                padding-top: 0;
                                p.descripcion-texto, .data-section, .descripcion-textoPersonalizada, .descripcion-textoMasiva{
                                    padding: 0px 30px 0 50px;
                                }
                                p.descripcion-textoMasiva{
                                    display: none;
                                }
                                .container-documentMiniatura{
                                    display: block !important;
                                    width: 100%;
                                }
                                .data-section{
                                    padding-right: 0;
                                }
                                p.descripcion-texto{
                                    display: none;
                                }
                                #signature-controls{
                                    display: flex;
                                    #iniciar-buttonMasiva{
                                        display: none;
                                    }
                                    /*#continue-button, #continue-buttonMasiva{
                                        background: #d9d9d9;
                                        box-shadow: none;
                                        cursor: not-allowed;
                                    }*/
                                    #continue-button.activo, #continue-buttonMasiva.activo{
                                        cursor: pointer;
                                        background: #49B7D2;
                                        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
                                    }
                                    #continue-button.activo:hover, #continue-buttonMasiva.activo:hover{
                                        background: #66d9f5;
                                    }
                                }
                            }
                            #signature-container.second-step{
                                display: none !important;
                            }
                            #signature-container.second-step.active{
                                display: flex !important;
                            }
                        }
                        .container-tipodeFirma.signature-hidden{
                            display: none;
                        }
                        #signature-controls{
                            display: none;
                            #save-buttonMasiva{
                                display: none;
                            }
                        }
                        .modal-mensaje.confirmar-firma, .mensaje-firmado{
                            display: flex;
                        }
                    }
                    #signature-container.firmaBasica-step.agregarDetalleFirma{
                        .nombreTipoFirma, #signature-container.first-step, #btnModal{
                            display: none !important;
                        }
                        #btnModalDetalle, .fas.fa-info-circle{
                            display: block;
                        }
                        #btnModalDetalle{
                            min-width: 140px;
                        }
                    }
                }
            }

        }
        .pdf-container.firmado{
            .titulo, .subtitle, .container-documentMiniatura{
                display: none !important;
            }
            #btnModalDetalle, #btnModal, .fa-info-circle, .nombreTipoFirma{
                display: none !important;
            }
            .menu-firma{
                display: block !important;
                #btnModalEnlace{
                    display: block !important;
                    min-width: 180px;
                    text-align: left;
                }
                #btnModalDescarga{
                    display: block !important;
                }
                .descripcionFirmadoMasiva{
                    display: block !important;
                    width: 270px;
                }
                .tittle-add-signature{
                    display: none !important;
                }
                .tittle-download{
                    display: flex !important;
                }
                .toggle-close-open{
                    padding-left: 25px !important;
                    width: 100%;
                }
                .toggle-close-open.download-hidden{
                    display: none !important;
                }
            }
            .descripcionFirmado{
                display: block !important;
            }
            .content-section {
                .container-signatures {
                    #signature-container {
                        .menu-firma{
                            .descripcionFirmado.download-hidden{
                                display: none !important;
                            }
                        }
                    }
                }
            }
            .menu-firma:has(.download-hidden) ~ .container-tipodeFirma.container-firmaRapida.active{
                display: none;
            }
            .menu-firma:has(.download-hidden) ~ .container-tipodeFirma.container-firmaRapida{
                display: none;
            }
            #signature-container{
                .choise-firma,
                video {
                    display: none;
                }
                #btnDescargar{
                    display: flex !important;
                }
                .containerBtns-firmaBasica{
                    flex-direction: column;
                    height: auto;
                    gap: 12px;
                }
                .container-tipodeFirma.container-firmaRapida.active{
                    #signature-controls.containerBtns-firmaBasica.vistaFirmado{
                        display: none !important;
                    }
                }

            }
            #signature-container.firmaBasica-step{
                .container-documentMiniatura{
                    display: none;
                }
                #signature-controls.containerBtns-firmaBasica{
                    display: flex !important;
                    flex-direction: column !important;
                    height: auto !important;
                    gap: 12px !important;
                    margin-bottom: 15px;
                    .btn-descargar, .btn-enlace{
                        width: auto;
                        i{
                            margin-right: 12px;
                            font-size: 12px;
                        }
                    }
                    .btn-enlace{
                        display: block !important;
                    }
                    .btn-descargar, #confirmar-firmaBasica, #confirmar-firma{
                        display: none;
                    }
                }
                #signature-controls.containerBtns-firmaBasica.download-hidden{
                    display: none !important;
                }
                .modal-mensaje.mensaje-firmado{
                    .mensajeFinalTerceros{
                        font-weight: 400;
                    }
                }
                #signature-controls.containerBtns-firmaBasica.download-hidden ~ #signature-container.folder-step{
                    display: none !important;
                }
            }
            #signature-container.second-step.active{
                #signature-controls{
                    #save-button, #clear-button{
                        display: none;
                    }
                }
            }
            #signature-container:has(.detail-hidden){
                p.descripcionFirmado{
                    display: none !important;
                }

                #signature-controls.containerBtns-firmaBasica.toggle-close-open.vistaFirmado{
                    display: none !important;
                }
            }
        }
        .pdf-container.owner{
            #signature-container.firmaBasica-step{
                p.texto-unDocumento {
                    width: 258px;
                }
                .modal-mensaje.mensaje-firmado{
                    .mensajeFinalTerceros{
                        display: none;
                    }
                }
                .container-firmaPersonalizada{
                    .modal-mensaje.enviadoPersonalizado{
                        display: none;
                    }
                    #signature-container.first-step.active{
                        .descripcion-texto{
                            display: block;
                        }
                        .descripcion-textoMasiva{
                            display: none;
                        }
                    }
                }
            }
        }
        .pdf-container.owner.firmado{
            #signature-container.firmaBasica-step{
                .menu-firma{
                    #btnModalEnlace, .descripcionFirmadoMasiva{
                        display: none !important;
                    }
                    #btnModalDescarga, .descripcionFirmado{
                        display: block !important;
                        padding-left: 1px;
                    }
                }
                #signature-controls.containerBtns-firmaBasica{
                    .btn-descargar{
                        display: block !important;
                    }
                    #confirmar-firma{
                        display: none;
                    }
                }
            }
        }
        /*.pdf-container.personalizado{
            .menu-firma{
                button#btnModal{
                    display: none;
                } 
                #btnModalPersonalizar{
                    display: block;
                }
            }
            #signature-container.first-step.active{
                display: flex !important;
            }
            .second-step, .firmaBasica-step{
                display: none !important;
            }
            .second-step.active{
                display: flex !important;
            }
            #continue-button{
                background: #d9d9d9;
                box-shadow: none;
                cursor: not-allowed;
            }
            #continue-button.activo{
                cursor: pointer;
                background: #49B7D2;
                box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
            }
            #continue-button.activo:hover{
                background: #66d9f5;
            }
        }
        .pdf-container.personalizado.firmado{
            #signature-container.first-step{
                display: none !important;
            }
            #signature-container.second-step{
                display: block !important;
            }
        }
        .pdf-container.personalizado-second{
            .headerBody-pdf{
                .contenedor-firmaPersonalizada {
                    cursor: default;
                }
            }
            .enviadoPersonalizado.visible {
                left: -170%;
            }
            #signature-container.second-step.active{
                display: flex !important;
            }
            .firmaBasica-step{
                display: none !important;
                left: -170% !important;
            }
            .folder-step{
                display: none !important;
            }
        }
        .pdf-container.folder-active.show-document{
            .lista-documentos{
                display: none !important;
            }
            .headerBody-pdf{
                display: flex;
            }
        }
        .pdf-container.basica.folder-active.show-document{
            #signature-container.folder-step, #btnModalMasiva{
                display: none !important;
            }
            #btnModal{
                display: block;
            }
            #signature-container.firmaBasica-step{
                display: flex !important;
            }
        }
        .pdf-container.folder-active.personalizado-second, .pdf-container.folder-active.personalizado{
            .alertFirmaMasiva{
                display: none
            }
        }

        .pdf-container.personalizado-second.folder-active.show-document{
            #signature-container.folder-step, #btnModalMasiva{
                display: none !important;
                
            }
            #btnModal, .fa-info-circle, .tooltip{
                display: block;
            }
            #signature-container.second-step{
                display: flex !important;
            }

        }
        .pdf-container.personalizado.folder-active.show-document{
            #signature-container.folder-step, #btnModalMasiva{
                display: none !important;
            }
            #btnModalPersonalizar{
                display: block;
            }
            #signature-container.first-step{
                display: flex !important;
            }
        }*/
        .pdf-container.folder-active{
            .lista-documentos {
                position: fixed;
                margin-top: 80px;
                margin-left: 420px;
                background: #f1f1f9;
                width: 40%;
                height: auto;
                min-height: 180px;
                font-weight: 600;
                padding: 24px;
                display: flex;
                flex-direction: column;
                gap: 12px;
                color: #222D8B;
                border: 1px solid #edeaea8a;
                .folder-description{
                    padding-left: 20px;
                    cursor: pointer;
                }
                .folder-description:hover{
                    background-color: #dedee5;
                }
                i {
                    margin-right: 5px;
                }
            }
            #signature-container.folder-step{
                display: flex !important;
                .modal-mensaje.confirmar-firma, .modalMensajeFirmado{
                    display: block;
                }
                #signature-controls{
                    #confirmar-firma{
                        display: none;
                    }
                }
            }
            .container-firmaRapida.active ~ #signature-container.folder-step{
                border: none;
            }

            .container-signatures {
                #signature-container.firmaBasica-step {
                    .container-firmaRapida.active {
                        .container-documentMiniatura{
                            .texto-unDocumento{
                                display: none;
                            }
                            .texto-masiva{
                                display: block !important;
                            }
                        }
                        #signature-controls {
                            #confirmar-firmaBasica{
                                display: none !important;
                            }
                            #confirmar-firma{
                                display: block !important;
                            }
                        }
                    }
                    .container-firmaPersonalizada.active {
                        #signature-container.first-step.active {
                            z-index: 1;
                            p.descripcion-textoMasiva,
                            .container-documentMiniatura{
                                display: block !important;
                                width: 100%;
                            }
                            p.descripcion-textoPersonalizada{
                                display: none;
                            }
                            #signature-controls {
                                #iniciar-buttonMasiva {
                                    display: block;
                                }
                                #iniciar-buttonMasiva.hidden-important {
                                    display: none;
                                }
                            }
                        }
                    }
                }
            }
            .container-firmaPersonalizada.active ~ #signature-container.folder-step{
                border: none;
            }
            .document-list:has(#folder-entry.active) ~ .content-section{
                #signature-container.second-step.active{
                    z-index: 1;
                    #signature-controls{
                        #save-button{
                            display: none;
                        }
                        #save-buttonMasiva{
                            display: flex;
                        }
                    }
                }
                #signature-container.second-step{
                    #signature-controls{
                        #save-button{
                            display: none;
                        }
                    }
                }
                .headerBody-pdf{
                    .contenedor-firmaPersonalizada {

                    }
                }
            }
            .document-list{
                .fa-solid.fa-check{
                    display: none;
                }
            }
            #signature-container.folder-step.show-sidebar{
                left: -100%;
                #confirmar-firma{
                    display: flex !important;
                }
            }

            .headerBody-pdf{
                display: none;
            }
        }
        .pdf-container.folder-active.show-document{
            .document-list{
                .document.first.check{
                    .fa-solid.fa-check{
                        display: block;
                        margin-left: 5px;
                    }
                    .fas.fa-circle{
                        display: none;
                    }
                }
            }
            .lista-documentos{
                display: none !important;
            }
            .container-signatures {
                #save-buttonMasiva{
                    display: flex !important;
                }
            }
            .headerBody-pdf{
                display: flex;
            }
        }
        .pdf-container.folder-active.firmado{
            .descriptionSignature, #confirmar-firma, .container-documentMiniatura, #confirmar-firma{
                display: none !important;
            }
        }
        .pdf-container.agregar-detalle{
            .document-list:has(#folder-entry.active) ~ .content-section{
                .lista-documentos{
                    display: none !important;
                }
                #signature-container.second-step{
                    #signature-controls{
                        button#save-button:disabled {
                            background: #d9d9d9;
                            box-shadow: none;
                            cursor: not-allowed;
                        }
                        #save-buttonMasiva{
                            display: flex;
                        }
                    }
                }
            }
            .container-signatures{
                .menu-firma{
                    #btnModalDetalle, .fas.fa-info-circle{
                        display: block !important;
                    }
                    #btnModalDetalle{
                        min-width: auto;
                        font-weight: 700 !important;
                        padding-left: 4px;
                    }
                }
                #signature-container.second-step{
                    display: flex;
                    border: none;
                    flex-direction: column;
                    align-items: center;
                    padding-top: 0;
                    #signature-controls{
                        display: flex !important;
                        flex-direction: column;
                        height: auto;
                        margin-top: 0;
                        gap: 15px;
                        .modal-mensaje.mensaje-firmado{
                            p.mensajeFinalTerceros{
                                display: block;
                                font-weight: 400;
                            }
                        }
                    }
                }
                #signature-container.second-step.detail-hidden{
                    display: none;
                }
            }
            .descripcionFirmado{
                display: none;
            }
        }
        .pdf-container.agregar-detalle.owner{
            .container-signatures{
                #signature-container.second-step{
                    #signature-controls{
                        .modal-mensaje.mensaje-firmado{
                            p.mensajeFinalTerceros{
                                display: none;
                            }
                        }
                    }
                }
            }
        }
        .pdf-container.agregar-detalle.firmado{
            .content-section {
                #signature-container.second-step {
                    #signature-controls {
                        #save-buttonMasiva {
                            display: none !important;
                        }
                    }
                }
            }
            #signature-container.second-step{
                .descripcionDetalle, #save-button, #clear-button{
                    display: none;
                }
            }
            .menu-firma{
                #btnModalDetalle, .fas.fa-info-circle, .tooltip{
                    display: none !important;
                }
            }
        }
        .pdf-container.agregar-detalle.folder-active{
            #signature-container.folder-step{
                display: none !important;
            }
        }
        .pdf-container.agregar-detalle.basica{
            .firma-personalizada{
                display: none;
            }
            .container-tipodeFirma.container-firmaRapida.active{
                border: none !important;
                box-shadow: none;
                p{
                    width: 100% !important;
                }
            }
        }
        .pdf-container.agregar-detalle.basica.firmado,
        .pdf-container.agregar-detalle.personalizado.firmado{
            #signature-container.second-step{
                display: none !important;
            }
        }
        img.imgBodyLogo {
            position: absolute;
            top: 50%;
            height: 50%;
            right: 0;
        }

    }
    .bodyFirma:has(.pdf-container){
        height: auto;
        .pdf-container {
            height: auto;
        }
    }
}
.dark{
    background: #021a1c;
    .side-bar{
        background: #021a1c;
        color:  #bbf5ff;
    };
}

/*----------------------------------------------home.html--------------------------------------------*/
/*-------------------------Mi Cuenta-------------------------*/
/*-----------------------Fin Mi Cuenta-----------------------*/

/*-----------------------Vista Login y Registro-----------------------*/

/*---------------------FIN Vista Login y Registro---------------------*/

.upload-container.dragover {
    background-color: #e7f3ff;
}

#progressContainer {
    margin-top: 10px;
}

progress {
    width: 100%;
    height: 30px;
}

#fileModal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border: 1px solid #ccc;
    padding: 20px;
    z-index: 1000;
}

#fileModal ul {
    list-style-type: none;
    padding: 0;
}

.btnContainer-subirDocumentos{
    display: flex;
    justify-content: space-between;
    height: 30px;
    width: 70vw;
    margin: 30px auto;
}
button#addMoreButton {
    margin-bottom: 20px;
}
.btn-no{
    background: none !important;
    flex-direction: row-reverse;
    border: 2px solid #00bad4 !important;
    color: #00bad4 !important;
    font-weight: 600;
    display: flex !important;
    justify-content: space-evenly !important;
    box-shadow: none !important;
}
.btn-no{
    visibility: hidden;
}

@keyframes slide-out {
    0% {
        opacity: 1;
        transform: translateX(0) translateY(0);  /* Inicia en la posición original */
        width: 100%;
    }
    100% {
        opacity: 0;
        transform: translateX(-80%) translateY(-80%);  /* Se mueve hacia la izquierda y hacia arriba */
        width: 0px;
    }
}



/*
 * errors.css — system_error.html.erb
 *
 * EXTRAÍDO DESDE application.css
 */
.container-error{
    width: 100vw;
    height: 100vh;
    display: flex;
    margin: auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.icon-error {
  position: relative;
  display: inline-block;
}

.main-icon {
    font-size: 120px;
    color: #6c6fb3;
}

.alert-icon {
    position: absolute;
    bottom: 0;
    border: 6px solid #fff;
    right: 0;
    font-size: 40px;
    color: #6c6fb3;
    background: white;
    border-radius: 50%;
}

.text-error{
    color: #6c6fb3;
    display: flex;
    flex-direction: column;
    align-items: center;
    h4{
        font-size: 18px;
        margin-bottom: 12px;
    }
    p{
        margin: 0;
        font-size: 14px;
        margin-bottom: 3px;
    }
}
@media (min-width: 1840px){
    /*Mensaje de alerta*/
    .alert-default{
        margin: 35px 55px;
        transform: scale(1.2);
        max-width: 450px;
    }

    /*Header*/
    .headerFirma {
        height: 90px;
        padding-right: 35px;
        div.section-1 {
            img {
                width: 200px;
            }
        }
        .section-noRegistrado,
        .section-registro,
        .menuSidebar {
            transform: scale(1.2);
            .select-container {
                i.fa-chevron-down {
                    right: 10px;
                }
            }
        }

        div.section-2{
            transform: scale(1.2);
            .user-information {
                top: 40px;
                max-width: 270px;
                right: 0px;
                padding: 12px 15px;
                .goMiCuenta{
                    padding: 8px 14px !important;
                }
            }
            .detalle-firmas {
                margin-top: 220px !important;
            }
        }
    }

    /*Registro o Login*/
    div#container-registro {
        #texto-registro{
            transform: scale(1.2);
        }
        .container-datos{
            transform: scale(1.2);
            margin-top: 30px;
        }
    }

    /*Home y Firma Simple*/
    .container-text-home, .container-documentos-home {
        transform: scale(1.2);
        width: fit-content;
        margin: 90px auto;
    }
    .container-text-home{
        .container-option{
            justify-content: center;
            gap: 80px;
        }
    }
    .container-documentos-home {
        #uploadContainer, .btnContainer-subirDocumentos, #signersContainer, #finalizeDetailsContainer {
            width: 50vw;
        }
        #finalizeDetailsPersonalizada {
            width: 35vw !important;
        }
    }
    dialog{
        transform: scale(1.2);
        width: 50vw !important;
    }
    .container-comoFirmar {
        width: fit-content;
        margin: 35px auto;
        transform: scale(1.2);
    }
    .container-comoFirmar.active{
        transform: scale(1);
        top: 90px;
        h2,
        span{
            transform: scale(1.2);
        }
        .container-videos{
            transform: scale(1.2);
            width: fit-content;
            gap: 135px;
            margin-top: 144px;
        }
    }

    /*Mis Documentos y Validar Documentos*/
    .container-buscarDocumento,
    .container-validarDocumento {
        transform: scale(1.2);
        margin-top: 80px;
        transform-origin: top center;
        .texto-buscarDocumento,
        .texto-validarDocumento{
            padding-top: 0px;
            .cuenta-container {
                top: 70px;
            }
            h3{
                margin-top: 0;
            }
        }
        .scrollable-table {
            max-height: 311px;
        }
        /* V11.7d — Bloque .filter-box { left: -70px !important; bottom: 11px !important }
           eliminado. Era workaround del transform: scale(1.2) de
           .container-buscarDocumento / .container-validarDocumento (línea 104 de
           este media query). El scale fue cancelado por el double-class trick
           en documents_modern.css:37-38 (.container-buscarDocumento.container-
           buscarDocumento { transform: none !important }), dejando este
           workaround huérfano que desplazaba al filter-box panel al borde
           izquierdo del viewport y cortaba la mitad del contenido fuera de
           pantalla. Fix de raíz: eliminar el bloque. El override moderno en
           documents_modern.css:636 ya posiciona bien el panel con top calc()
           + bottom: auto !important + z-index. Ver gotcha §8.22 design-system.md. */
        .document-table,
        .container-documentos-validar,
        .doc-pdf {
            width: 75vw !important;
        }
    }

    /*Mi Cuenta*/
    .bodyFirma {
        .miCuenta-container {
            .informacion-container {
                margin-bottom: 40px !important;
            }
            .miCuenta-sidebar {
                ul {
                    transform: scale(1.2);
                    li {
                        padding: 5px 50px;
                    }
                }
            }
            .miCuenta-content {
                padding-bottom: 80px;
                .cuenta-title,
                .pagos-title,
                .seguridad-title,
                .preferencias-title,
                .history-title,
                .title-section {
                    h3{
                      font-size: 35px;
                    }
                    span{
                        font-size: 18px;
                    }
                }
                .cuenta-body,
                .pagos-body,
                .seguridad-body,
                .preferencias-body,
                .history-body{
                    transform: scale(1.2);
                    margin-top: 55px;
                }
            }
            .planes-content,  
            .history-content{
                margin-top: 0;
                .title-section,
                .history-title {
                    a {
                        left: 18vw !important;
                        font-size: 18px;
                    }
                }
                .members-body{
                    transform: scale(1.2);
                }
                .content-planes{
                    .columna-detalle{
                        width: 25% !important;
                    }
                    .columna-plan{
                        width: 20% !important;
                        .borderFlotante{
                            transform: translate(-116px, 6px) !important;
                        }
                    }
                }
            }
            .showOption {
                transform: scale(1.2);
                margin-top: 50px;
            }
        }

    }

    /*PDF-documento*/
    .content-section {
        .bodyFirma {
            .pdf-container {
                .document-list {
                    .document {
                        width: 480px;
                        font-size: 18px;              
                        padding: 10px 14px;
                    }
                    .lista-documentos {              
                        margin-top: 45px;
                        margin-left: 480px;
                        font-size: 18px;
                    }
                }
                /* V10.3-bis-5: bloque .container-document legacy
                   eliminado proactivamente del @media (min-width:
                   1840px). Recortaba el visor al 74vw en monitores
                   4K+; sin razón aparente. El moderno cubre con
                   layout flexbox sin restricción artificial. */
                .controls {
                    padding-top: 35px;
                }
            }
        }
        #signature-container,
        .container-signatures{
            width: 480px !important;
            h4{
                font-size: 18px !important;
            }
            p,
            button{
                font-size: 16px !important;
            }
            .texto-unDocumento{
                width: 440px !important;
            }
            span,
            i.fas.fa-user{
                font-size: 14px !important;
            }
            i.fas.fa-info-circle {
                font-size: 20px;
            }
            .choise-firma{
                li{
                    a{
                        font-size: 16px;
                    }
                }
                textarea#signature,
                #signature-canvas,
                div#upload-image{
                    width: 400px;
                    font-size: 16px;
                }
            }
        }
    }
    .modal-mensaje{
        transform: scale(1.2);
    }
    #signature-container.folder-step {
        p.descriptionSignature {
            padding: 0 50px;
        }
    }
       #pdfViewer {
        width: auto;
        max-width: none;
        height: auto;
        transform: none !important;
    }

    /*Footer*/
    .footerFirma {
        height: 65px !important;
        .content-footer {
            width: 95% !important;
            span, i {
                font-size: 18px !important;
            }
        }
    }
}

/* V10.3-bis-4: bloque @media (max-width: 1300px) eliminado.
   Su único contenido era .content-section .bodyFirma .pdf-container
   .container-document { max-width: 60vw; margin: auto } — recortaba
   el visor PDF al 60% del viewport en TODO el rango 0-1300px
   (mobile + tablet + laptop), descentrando el canvas y dejándolo
   parcialmente fuera. El nesting CSS native expandía la specificity
   a (0,4,0) y vencía a la regla mobile moderna (body .pdf-container
   .headerBody-pdf .container-document de V10.3-bis).
   Patrón: gotcha 7.2 — eliminar el competidor legacy en vez de
   bumpear specificity moderna (gotcha 8.9 sub-patrón B). Tercera
   aparición del mismo síndrome en V10. */

@media (max-width:960px) and (orientation: portrait){
    /* LEGACY: estas reglas eran globales (h3, span, p) y destruían
       el design system moderno en <960px. Se scopean a los contenedores
       legacy que las necesitaban. Las vistas modernas (auth-split,
       home-hero, etc.) usan clases propias con font-sizes explícitos.
       Fix replicado desde commit 6753252 (claude-style-test V5) sobre
       responsive.css de FYA2-347 que las re-introdujo sin scopear. */
    #container-registro h3,
    .container-text-home h3 {
        font-size: 60px;
    }
    #container-registro span,
    #container-registro p,
    .container-text-home span,
    .container-text-home p {
        font-size: 25px !important;
        max-width: 400px !important;
        text-align: center;
    }
    .headerFirma {
        height: 90px;
        div.section-1 {
            display: flex;
            align-items: center;
            img {
                height: 90px;
                width: 200px;
            }
            .menu-icon {
                width: 30px;
                height: 25px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                cursor: pointer;
                .line {
                    width: 100%;
                    height: 4px;
                    background-color: #ffffff;
                    transition: transform 0.7s ease;
                }
            }
            .menu-icon.open{
                position: absolute;
                z-index: 3;
                right: 25px;
                top: 25px;
            }
            .menu-icon.open .line:nth-child(1) {
                transform: rotate(45deg) translateY(14px);
            }
            .menu-icon.open .line:nth-child(2) {
                opacity: 0;
            }
            .menu-icon.open .line:nth-child(3) {
                transform: rotate(-45deg) translateY(-14px);
            }
        }
        .menuSidebar{
            display: flex;
            position: absolute;
            top: -105%;
            right: 0;
            width: 100vw;
            height: 100vh;
            z-index: 2;
            background: #fff;
            flex-direction: column;
            justify-content: space-evenly;
            color: #222D8B;
            font-weight: 600;
            font-size: 30px;
            transition: top 0.3s ease-in-out;
            span{
                font-size: 30px !important;
            }
            .menu-item{
                visibility: hidden; /* Empieza invisible */
                opacity: 0; /* Empieza con opacidad 0 */
                padding: 12px;
                border-radius: 8px;
                box-shadow: 0px 0 10px rgba(0, 0, 0, 0.2);
                width: 400px;
                transition: opacity 0.4s ease-in-out, visibility 0s linear 0.4s;
                .menu-content{
                    justify-content: center;
                    i.arrow-down{
                        display: none;
                    }
                }
                .submenu{
                    display: flex;
                    align-items: center;
                    font-weight: 100;
                    .submenu-item{
                        padding: 7px;
                    }
                }
            }
        }
        #volverInicio:has(.open) ~ .menuSidebar{
            top:0;
            .menu-item:nth-child(1){
                visibility: visible;
                opacity: 1;
                transition-delay: 0.4s;
            }
            .menu-item:nth-child(2){
                visibility: visible;
                opacity: 1;
                transition-delay: 0.7s;
            }
            .menu-item:nth-child(3){
                visibility: visible;
                opacity: 1;
                transition-delay: 1s;
            }
        }

        .section-registro label{
            font-size: 30px;
        }
        .section-noRegistrado{
            .btn-registrar {
                height: 54px;
                border-radius: 11px;
                font-size: 28px;
                margin-right: 15px;
                min-width: 0 !important;
                padding: 0px 14px 0 21px;
            }
        }
        .select-container {
            height: 50px !important;
            min-width: 161px !important;
            select {
                font-size: 25px;
                option{
                    font-size: 13px;
                }
            }
            i{
                font-size: 25px;
            }
        }
        div.section-2 {
            width: 250px;
            .switch-section {
                width: 110px;
                .switch {
                    top: 9px;
                }
            }
            a {
                font-size: 25px;
            }
        }
    }
    .footerFirma {
        height: auto !important;
        span{
            font-size: 18px !important;
        }
        i{
            font-size: 18px;
        }
    }

    /*----------Responsive para flujo registro---------------*/
    div#container-registro {
        flex-direction: column;
        align-items: center;
        height: 100%;
        width: 100%;
        padding: 0;
        div#texto-registro {
            align-items: center;
            padding: 30px;
        }
        .container-datos{
            width: 100%;
            div#datos-registro, #ingresaDatos-registro, #confirma-registro {
                height: auto;
                width: -webkit-fill-available !important;
                flex-direction: column;
                box-shadow: none;
                align-items: center;
                padding: 70px 0px;
                div{
                    width: 85%;
                }
                form{
                    width: -webkit-fill-available;
                    align-items: center;
                }
                label {
                    font-size: 40px;
                    margin: 65px 0px 7px;
                }
                input{
                    padding: 25px;
                    border-radius: 16px;
                    height: 75px;
                    font-size: 25px;
                }
                button, .btn-continuarRegistro, .btn-continuarDatos, .btn-crearCuenta{
                    border-radius: 30px;
                    font-size: 30px;
                    padding: 15px 45px;
                    min-width: 300px;
                    height: fit-content;
                }
                span{
                    max-width: -webkit-fill-available !important;
                    text-align: left;
                    padding: 7px 0;
                }
            }
            .datos-login{
                justify-content: flex-start !important;
                .btnIniciarSesion {
                    margin-top: 125px;
                }
            }
        }
    }
    /*----------FIN Responsive para flujo registro-----------*/

    /*------------Responsive para flujo home-----------------*/
    div.texto-home {
        flex-direction: column;
        p{
            margin: 0;
        }
        br{
            display: none;
        }
    }

    .container-option {
        flex-wrap: wrap;
        flex-direction: row;
        margin-top: 60px !important;
        gap: 60px !important;
        .menu-item{
            border: 1px solid #e3e2e2 !important;
            width: 235px !important;
            height: auto !important;
            span, p {
                font-size: 30px;
            }
            i {
                font-size: 25px;
            }
            .submenu-item {
                font-size: 25px !important;
                padding-bottom: 16px !important;
            }
        }
        .menu-item.hoverAction {
            width: -webkit-fill-available !important;
            border: none !important;
        }
    }
    /*------------FIN Responsive para flujo home-------------*/

    .footerFirma {
        height: auto !important;
        span{
            font-size: 18px !important;
        }
        i{
            font-size: 18px;
        }
    }

    /*----------Responsive para flujo registro---------------*/
    div#container-registro {
        flex-direction: column;
        align-items: center;
        height: 100%;
        width: 100%;
        padding: 0;
        div#texto-registro {
            align-items: center;
            padding: 30px;
        }
        .container-datos{
            width: 100%;
            div#datos-registro, #ingresaDatos-registro, #confirma-registro {
                height: auto;
                width: -webkit-fill-available !important;
                flex-direction: column;
                box-shadow: none;
                align-items: center;
                padding: 70px 0px;
                div{
                    width: 85%;
                }
                form{
                    width: -webkit-fill-available;
                    align-items: center;
                }
                label {
                    font-size: 40px;
                    margin: 65px 0px 7px;
                }
                input{
                    padding: 25px;
                    border-radius: 16px;
                    height: 75px;
                    font-size: 25px;
                }
                button, .btn-continuarRegistro, .btn-continuarDatos, .btn-crearCuenta{
                    border-radius: 30px;
                    font-size: 30px;
                    padding: 15px 45px;
                    min-width: 300px;
                    height: fit-content;
                }
                span{
                    max-width: -webkit-fill-available !important;
                    text-align: left;
                    padding: 7px 0;
                }
            }
            .datos-login{
                justify-content: flex-start !important;
                .btnIniciarSesion {
                    margin-top: 125px;
                }
            }
        }
    }
    /*----------FIN Responsive para flujo registro-----------*/

    /*------------Responsive para flujo subirDocu------------*/

    /*----------FIN Responsive para flujo subirDoc-----------*/




}
@media (max-width:430px) and (orientation: portrait){
    .headerFirma {
        div.section-1 {
            img {
                width: 185px;
            }
        }
        .section-registro {
            label {
                display: none;
            }
            .select-container {
                height: 38px !important;
                min-width: 106px !important;
                select{
                    font-size: 23px;
                }
                i{
                    font-size: 16px;
                    right: 20px !important;
                }
                img {
                    padding: 11px 2px 11px 10px;
                }
            }
        }
        .section-noRegistrado {
            .btn-registrar {
                height: 38px;
                font-size: 23px;
                padding: 0px 7px 0 12px;
            }
        }
    }
    div#container-registro {
        #texto-registro{
            h3 {
                font-size: 42px;
            }
            span{
                font-size: 22px !important;
            }
        }

        .container-datos {
            div#datos-registro, #ingresaDatos-registro, #confirma-registro {
                label {
                    font-size: 30px;
                    margin: 35px 0px 7px;
                }
                input {
                    font-size: 21px;
                }
                span{
                    font-size: 22px !important;
                }
            }
            .datos-login {
                height: 77vh !important;
                .btnIniciarSesion {
                    margin-top: 45px;
                }
                label {
                    font-size: 28px !important;
                }
            }
        }
    }
    .content-footer {
        width: 100% !important;
        justify-content: space-around !important;
        align-items: center;
    }
}

@media (max-width: 390px) and (orientation: portrait){
    #confirma-registro {
        height: 75vh !important;
    }
}

@media (max-width: 380px) and (orientation: portrait){
    .headerFirma {
        height: 65px;
        div.section-1 {
            img {
                height: auto;
                width: 155px;
            }
        }
        .section-registro {
            label {
                font-size: 18px;
            }
            .select-container {
                height: 30px !important;
                min-width: 80px !important;
                img {
                    padding: 9px 0px 7px 10px;
                }
                #paisRegistro {
                    padding: 0px 5px;
                    width: 72px;
                }
                select{
                    font-size: 18px;
                }
                i{
                    font-size: 16px;
                }
            }
        }
        .section-noRegistrado {
            .btn-registrar {
                height: 31px;
                font-size: 19px;
                padding: 0px 3px 0 8px;
            }
        }
    }
    div#container-registro {
        #texto-registro {
            padding: 18px !important;
            h3 {
                font-size: 30px;
            }
            span {
                font-size: 16px !important;
            }
        }

        .container-datos {
            div#datos-registro, & #ingresaDatos-registro, & #confirma-registro {
                padding: 27px 0px;
                label {
                    font-size: 20px;
                }
                input {
                    font-size: 16px;
                    height: 53px;
                }
                span {
                    font-size: 14px !important;
                }
                button {
                    font-size: 20px;
                    padding: 11px 25px;
                    width: 177px;
                }
            }
            .datos-login {
                label {
                    font-size: 26px !important;
                }
            }
        }
    }
    .footerFirma {
        span,i {
            font-size: 16px !important;
        }
    }
}


@media (max-height: 440px) and (orientation: landscape) {
    .headerFirma {
        height: 55px;
        div.section-1 img {
            width: 144px;
            height: 55px;
        }
        .section-registro {

            label{
                font-size: 18px;
            }
            .select-container {
                height: 30px;
                min-width: 100px;
                select,i {
                    font-size: 16px;
                }
            }
        }
        .section-noRegistrado{
            .btn-registrar {
                margin-right: 22px;
                height: 30px;
            }
        }
    }
    div#container-registro {
        padding: 10vh 0vh 5vh;
        #texto-registro{
            h3{
                font-size: 28px;
            }
            span{
                font-size: 16px !important;
            }
        }
        div#datos-registro, #ingresaDatos-registro, #confirma-registro {
            width: 47vw;
            padding: 8px 0px;
            label {
                margin-top: 16px !important;
            }
            label:first-of-type {
                margin-top: 0px !important;
            }
            input, #signaturePosition {
                height: 33px;
                font-size: 12px;
            }
            button {
                width: 132px;
                font-size: 14px;
                padding: 8px;
                margin: 0px 0 6px;
            }
        }
    }
    .footerFirma {
        height: auto !important;
    }

}

@media (max-height: 400px) and (orientation: landscape) {
    div#container-registro {
        .spanLogin {
            max-width: 200px !important;
        }
        div#datos-registro, & #ingresaDatos-registro, & #confirma-registro {
            label {
                margin-top: 8px !important;
            }
        }
    }
}