/* L1: es la fuente (antes la generaba tests/caracterizacion/herramientas/acceso-vistas.py desde app/views/layouts/auth.php y los <style> de app/views/auth, borradas del portal en la limpieza del núcleo). Se edita aquí. */
  /* ── Marca Draveon Technologies (los mismos --brand-* que la consola) ── */
  :root{
    --brand-navy:#000049; --brand-navy-2:#00005a; --brand-navy-3:#06072f;
    --brand-blue:#1a8cff; --brand-indigo:#4a5ffb; --brand-violet:#7b2ff7;
    --brand-gradient:linear-gradient(135deg,#1a8cff 0%,#4a5ffb 50%,#7b2ff7 100%);
    --brand-accent:#5a22d6;
    --brand-surface:#ffffff; --brand-surface-2:#f8f6ff; --brand-surface-3:#f2edff; --brand-line:#e6e1f7;
    /* Botón: violeta sólido, igual que la consola; texto blanco 8,0:1 */
    --btn:#5a22d6; --btn-hover:#4c1cb8;
    --btn-shadow:rgba(90,34,214,.30);

    --bg:#ffffff; --ink:#0b0d2b; --head:#000049; --muted:#545a75; --soft:#656b8a;
    --line:#e1e3ef; --field:#f5f6fb; --field-focus:#ffffff;
    --link:#000049; --link-line:#7b2ff7; --focus:#000049; --ac:#5a22d6; --ac-dim:rgba(0,0,73,.13);
    --ok:#0a6b37; --bad:#b91c1c;
    --alert-bg:#fef2f2; --alert-line:#fecaca; --alert-ink:#b91c1c;
    --info-bg:#f3efff; --info-line:#d9ccff; --info-ink:#3b1a91;
    /* Panel claro */
    --pn-bg:linear-gradient(160deg,#fbfaff 0%,#f2edff 55%,#eaf3ff 100%);
    --pn-ink:#000049; --pn-muted:#4a4f6e; --pn-grid:rgba(0,0,73,.045); --pn-px:.6;
    --card-bg:#ffffff; --card-line:#e6e1f7; --card-shadow:0 10px 24px -14px rgba(0,0,73,.28);
    --strip-bg:rgba(0,0,73,.05); --strip-line:rgba(0,0,73,.09); --strip-ink:#2b2f63; --strip-ic:#5a22d6;
  }
  [data-theme="dark"]{
    --bg:#000000; --ink:#ececee; --head:#ffffff; --muted:#a4a5ab; --soft:#8b8c92;
    --line:#232327; --field:#0d0d0f; --field-focus:#141416;
    --link:#bda8ff; --link-line:#bda8ff; --focus:#a98bff; --ac:#bda8ff; --ac-dim:rgba(169,139,255,.24);
    --ok:#4ade80; --bad:#fca5a5;
    --btn:#5a22d6; --btn-hover:#4c1cb8; --btn-shadow:rgba(90,34,214,.35);
    --alert-bg:rgba(239,68,68,.12); --alert-line:rgba(248,113,113,.35); --alert-ink:#fca5a5;
    --info-bg:rgba(169,139,255,.12); --info-line:rgba(169,139,255,.35); --info-ink:#d6c9ff;
    --pn-bg:linear-gradient(160deg,#141416 0%,#08080a 45%,#000000 100%);
    --pn-ink:#ffffff; --pn-muted:#c8c8cc; --pn-grid:rgba(255,255,255,.05); --pn-px:.32;
    --card-bg:rgba(255,255,255,.06); --card-line:rgba(255,255,255,.14); --card-shadow:inset 0 1px 0 rgba(255,255,255,.06);
    --strip-bg:rgba(255,255,255,.05); --strip-line:rgba(255,255,255,.12); --strip-ink:#d5d5d9; --strip-ic:#8cc5ff;
  }
  /* El esquema sigue al tema elegido, no al del sistema: si no, con Windows
     en oscuro el autocompletado salía oscuro y con letra blanca en el login claro */
  :root{color-scheme:light}
  [data-theme="dark"]{color-scheme:dark}
  *{box-sizing:border-box}
  html,body{height:100%}
  body.auth-body{
    margin:0;display:flex;min-height:100vh;line-height:1.5;
    font-family:'Montserrat','Plus Jakarta Sans',system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;background:var(--bg);color:var(--ink);
  }
  .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  /* Logotipos por tema (el que no corresponde no se pinta) */
  .th-dark{display:none!important}
  [data-theme="dark"] .th-light{display:none!important}
  [data-theme="dark"] .th-dark{display:block!important}

  /* ── Panel de marca: claro con retícula de píxeles; negro con brillos en oscuro ── */
  .auth-left{
    position:relative;flex:1.15;min-width:0;overflow:hidden;color:var(--pn-ink);background:var(--pn-bg);
    display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 56px 56px;
  }
  /* Filete con el degradado de marca entre el panel y el formulario */
  .auth-left::after{content:"";position:absolute;top:0;right:0;bottom:0;width:4px;z-index:3;background:linear-gradient(var(--brand-blue),var(--brand-violet))}
  .al-grid{position:absolute;inset:0;pointer-events:none;background-position:center;background-size:32px 32px;
    background-image:linear-gradient(var(--pn-grid) 1px,transparent 1px),linear-gradient(90deg,var(--pn-grid) 1px,transparent 1px)}
  .px-field{position:absolute;inset:0;pointer-events:none;opacity:var(--pn-px);
    -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 52%,transparent 58%,#000 92%);
            mask-image:radial-gradient(ellipse 62% 58% at 50% 52%,transparent 58%,#000 92%)}
  .px-field i{position:absolute;border-radius:3px}
  .px-field .p1{background:var(--brand-blue)} .px-field .p2{background:var(--brand-violet)} .px-field .p3{background:var(--brand-indigo)}
  .px-field .tw{animation:pxTw 6s ease-in-out infinite alternate}
  @keyframes pxTw{from{filter:none}to{filter:brightness(1.25);transform:translateY(-3px)}}
  .al-glow{position:absolute;border-radius:50%;pointer-events:none;display:none}
  [data-theme="dark"] .al-glow{display:block}
  .al-glow.g1{width:620px;height:620px;left:-200px;top:-230px;background:radial-gradient(circle,rgba(26,140,255,.42),rgba(26,140,255,0) 65%)}
  .al-glow.g2{width:720px;height:720px;right:-260px;bottom:-300px;background:radial-gradient(circle,rgba(123,47,247,.5),rgba(123,47,247,0) 65%)}

  .auth-left-inner{position:relative;z-index:2;width:100%;max-width:620px;display:flex;flex-direction:column;align-items:center;text-align:center;
    animation:rise .6s cubic-bezier(.2,.7,.3,1) both}
  /* Logotipo oficial (PNG/WebP 1200 px): vertical en el panel, horizontal en la cabecera móvil */
  .dv-logo{display:block}
  .dv-logo img{display:block;width:100%;height:auto}
  .dv-logo-v{width:320px;max-width:80%;margin:0 0 22px}
  [data-theme="dark"] .dv-logo-v img{filter:drop-shadow(0 18px 40px rgba(26,140,255,.25))}
  .dv-logo-h{display:none}
  .auth-title{font-weight:800;font-size:34px;line-height:1.12;margin:0 0 8px;letter-spacing:-.015em;color:var(--pn-ink)}
  .auth-sub{font-size:15px;font-weight:500;color:var(--pn-muted);margin:0 0 28px}

  .auth-feats{list-style:none;padding:0;margin:0;width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .auth-feats li{display:flex;align-items:center;gap:14px;text-align:left;padding:16px;border-radius:16px;
    background:var(--card-bg);border:1px solid var(--card-line);box-shadow:var(--card-shadow)}
  .ft-ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
    color:#fff;font-size:20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
  .ft-ic.c1{background:linear-gradient(140deg,#1a8cff,#1466cc)}
  .ft-ic.c2{background:linear-gradient(140deg,#4a5ffb,#2f3fd0)}
  .ft-ic.c3{background:linear-gradient(140deg,#7b2ff7,#5a1fd0)}
  .ft-ic.c4{background:linear-gradient(140deg,#000049,#2a1fb0)}
  [data-theme="dark"] .ft-ic.c4{background:linear-gradient(140deg,#8a2be2,#661bb0)}
  .ft-tx b{display:block;font-size:15px;font-weight:700;color:var(--pn-ink);line-height:1.3}
  .ft-tx small{display:block;font-size:12.5px;line-height:1.4;color:var(--pn-muted);margin-top:3px}

  .auth-trust{list-style:none;margin:22px 0 0;padding:10px 18px;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;
    border-radius:999px;background:var(--strip-bg);border:1px solid var(--strip-line);font-size:12.5px;font-weight:600;color:var(--strip-ink)}
  .auth-trust li{display:flex;align-items:center;gap:7px}
  .auth-trust i{color:var(--strip-ic);font-size:14px}

  /* ── Panel formulario ── */
  .auth-right{width:46%;max-width:560px;display:flex;flex-direction:column;padding:40px 32px 22px;background:
    radial-gradient(520px 380px at 100% 100%,rgba(123,47,247,.06),transparent 70%),
    radial-gradient(420px 300px at 0% 0%,rgba(26,140,255,.05),transparent 70%),var(--bg)}
  [data-theme="dark"] .auth-right{background:
    radial-gradient(520px 380px at 100% 100%,rgba(123,47,247,.16),transparent 70%),
    radial-gradient(420px 300px at 0% 0%,rgba(26,140,255,.12),transparent 70%),var(--bg)}
  .auth-main{flex:1;display:flex;align-items:center;justify-content:center;width:100%}
  .auth-card{width:100%;max-width:400px;animation:rise .5s .08s cubic-bezier(.2,.7,.3,1) both}
  /* Ícono genérico en baldosa (por si una vista lo usa) */
  .auth-logo{position:relative;width:58px;height:58px;border-radius:16px;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;
    background:var(--btn);box-shadow:0 12px 26px var(--ac-dim)}
  .auth-logo i{font-size:28px;color:#fff}
  /* Marca oficial (sin recolorear): suelta en claro, sobre ficha blanca en oscuro */
  .auth-logo.dv{width:80px;height:80px;border-radius:22px;background:none;box-shadow:none;margin-bottom:18px}
  .auth-logo.dv picture,.auth-logo.dv img{display:block;width:80px;height:80px}
  [data-theme="dark"] .auth-logo.dv{background:#fff;box-shadow:0 12px 30px -8px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.4)}
  [data-theme="dark"] .auth-logo.dv picture,[data-theme="dark"] .auth-logo.dv img{width:62px;height:62px}
  /* Distintivo de la pantalla (llave, escudo…) sobre la esquina de la marca */
  .auth-logo .mk-badge{position:absolute;right:-6px;bottom:-6px;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:var(--brand-navy);color:#fff;font-size:14px;border:3px solid var(--bg)}
  .auth-logo .mk-badge i{font-size:14px;color:#fff}
  [data-theme="dark"] .auth-logo .mk-badge{background:linear-gradient(140deg,#1570d6,#7b2ff7)}
  .auth-h{text-align:center;font-weight:800;font-size:26px;margin:0 0 6px;color:var(--head);letter-spacing:-.015em;line-height:1.2}
  .auth-p{text-align:center;font-size:14px;color:var(--muted);margin:0 0 26px;line-height:1.5}
  .auth-p strong{color:var(--ink)!important}

  .fld{margin-bottom:16px}
  .fld label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:7px}
  .fld-wrap{display:flex;align-items:center;min-height:50px;background:var(--field);border:1.5px solid var(--line);
    border-radius:12px;transition:border-color .15s,box-shadow .15s,background .15s}
  .fld-wrap:focus-within{border-color:var(--focus);background:var(--field-focus);box-shadow:0 0 0 4px var(--ac-dim)}
  .fld-wrap i.lead{color:var(--muted);font-size:16px;padding:0 10px 0 14px}
  .fld-wrap input{flex:1;border:0;background:transparent;outline:none;padding:12px 4px;font:inherit;font-size:14.5px;color:var(--ink);min-width:0}
  .fld-wrap input::placeholder{color:var(--soft);opacity:1}
  /* Autocompletado del navegador: mismo fondo y letra que el campo, sin el
     bloque gris/azul que pinta Chrome encima */
  .fld-wrap input:-webkit-autofill,
  .fld-wrap input:-webkit-autofill:hover,
  .fld-wrap input:-webkit-autofill:focus{
    -webkit-text-fill-color:var(--ink);caret-color:var(--ink);
    -webkit-box-shadow:0 0 0 1000px var(--field) inset;box-shadow:0 0 0 1000px var(--field) inset;
    transition:background-color 99999s ease-out 0s}
  .fld-wrap:focus-within input:-webkit-autofill{
    -webkit-box-shadow:0 0 0 1000px var(--field-focus) inset;box-shadow:0 0 0 1000px var(--field-focus) inset}
  .fld-eye{border:0;background:transparent;color:var(--muted);padding:0 14px;cursor:pointer;font-size:16px;align-self:stretch;border-radius:0 10px 10px 0}
  .fld-eye:hover{color:var(--ink)}
  .fld-eye:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}

  .auth-row{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;margin:4px 0 22px}
  .auth-check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink);cursor:pointer;user-select:none;margin:0}
  .auth-check input{width:16px;height:16px;margin:0;accent-color:var(--focus);cursor:pointer}
  .auth-check input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
  /* Enlaces: navy y subrayado violeta (no dependen solo del color) */
  .auth-link{font-size:13px;font-weight:700;color:var(--link);text-decoration:underline;text-decoration-color:var(--link-line);
    text-decoration-thickness:1.5px;text-underline-offset:3px;border-radius:4px}
  .auth-link:hover{text-decoration-thickness:2.5px;color:var(--link)}
  .auth-link:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

  .auth-btn{width:100%;min-height:52px;border:0;border-radius:12px;padding:14px;font:inherit;font-size:15px;font-weight:700;color:#fff;cursor:pointer;
    background:var(--btn);box-shadow:0 14px 28px -10px var(--btn-shadow);
    display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .12s,box-shadow .12s,filter .12s}
  .auth-btn:hover{transform:translateY(-2px);background:var(--btn-hover);box-shadow:0 18px 34px -10px var(--btn-shadow);color:#fff}
  .auth-btn:active{transform:translateY(0)}
  .auth-btn:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
  .auth-btn:disabled{cursor:not-allowed;transform:none;filter:none}

  .auth-alert{background:var(--alert-bg);border:1px solid var(--alert-line);color:var(--alert-ink);font-size:13px;
    padding:10px 13px;border-radius:11px;margin-bottom:18px;display:flex;gap:8px;align-items:center}
  .auth-alert.auth-info{background:var(--info-bg);border-color:var(--info-line);color:var(--info-ink)}

  .auth-foot{display:flex;align-items:center;justify-content:center;gap:7px;text-align:center;margin:20px 0 0;font-size:12.5px;color:var(--muted)}
  .auth-foot i{color:var(--ac)}

  /* Pie de autoría (todas las pantallas de acceso) */
  .auth-credit{text-align:center;font-size:12px;color:var(--muted);margin-top:28px;line-height:1.6}
  .auth-credit .by{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
  .auth-credit .cr-logo img{display:block;width:124px;height:auto}
  .auth-credit a{color:var(--link);font-weight:600;text-decoration:underline;text-decoration-color:var(--link-line);text-underline-offset:3px;border-radius:3px}
  .auth-credit a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

  /* Cambio de tema. Sin ancestro posicionado: se ancla arriba a la derecha de la página */
  .theme-tg{position:absolute;top:18px;right:18px;width:40px;height:40px;border-radius:12px;
    border:1.5px solid var(--line);background:var(--field);color:var(--ink);cursor:pointer;
    display:flex;align-items:center;justify-content:center;font-size:17px;z-index:5}
  .theme-tg:hover{border-color:var(--focus)}
  .theme-tg:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
  .theme-tg .i-sun{display:none}
  [data-theme="dark"] .theme-tg .i-sun{display:inline}
  [data-theme="dark"] .theme-tg .i-moon{display:none}

  /* ── Verificación tras varios intentos (Captcha) ── */
  .hp-fld{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
  .cap-fld{border:1.5px dashed var(--line);border-radius:12px;padding:12px 12px 14px;background:var(--bg)}
  .cap-help{font-size:12.5px;color:var(--muted);margin:-2px 0 10px;line-height:1.45}
  .cap-row{display:flex;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap}
  .cap-img{display:block;width:200px;max-width:100%;height:auto;border-radius:10px;border:1.5px solid var(--line);background:#fff}
  .cap-new{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--link);
    text-decoration:none;padding:8px 10px;border-radius:10px;min-height:40px}
  .cap-new:hover,.cap-new:focus-visible{background:var(--ac-dim);text-decoration:underline;color:var(--link)}
  .cap-new:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
  .cap-txt{font-size:12.5px;color:var(--ink);margin:0 0 9px}
  .cap-txt span{font-weight:700}

  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

  /* Escritorio angosto o pantallas bajas */
  @media (max-width:1180px) and (min-width:921px){
    .auth-left{padding:40px 36px 48px}
    .auth-feats li{padding:13px;gap:11px}
    .ft-ic{width:38px;height:38px;font-size:17px;border-radius:11px}
    .ft-tx b{font-size:14px} .ft-tx small{font-size:12px}
  }
  @media (max-height:780px) and (min-width:921px){
    .dv-logo-v{width:240px;margin-bottom:14px}
    .auth-title{font-size:28px} .auth-sub{margin-bottom:20px}
    .auth-feats{gap:10px} .auth-feats li{padding:12px}
  }

  /* ── Móvil / tablet: el panel pasa a cabecera compacta con el logo horizontal ── */
  @media (max-width:920px){
    body.auth-body{flex-direction:column}
    .auth-left{flex:none;padding:58px 20px 44px;justify-content:flex-start}
    .auth-left::after{display:none}
    .px-field{-webkit-mask-image:none;mask-image:none;opacity:calc(var(--pn-px) * .4)}
    .al-glow.g1{width:340px;height:340px;left:-150px;top:-150px}
    .al-glow.g2{width:380px;height:380px;right:-170px;bottom:-200px}
    .auth-left-inner{max-width:none}
    .dv-logo-v{display:none}
    .dv-logo-h{display:block;width:236px;max-width:76%;margin:0 0 10px}
    .auth-title{font-size:18px;font-weight:700;margin:0 0 14px}
    .auth-sub,.auth-trust{display:none}
    /* Tarjetas condensadas: solo ícono y título, como fichas */
    .auth-feats{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:400px}
    .auth-feats li{padding:4px 12px 4px 4px;border-radius:999px;gap:7px;box-shadow:none}
    .ft-ic{width:26px;height:26px;border-radius:8px;font-size:13px}
    .ft-tx b{font-size:12px;font-weight:600}
    .ft-tx small{display:none}
    .auth-right{position:relative;z-index:4;width:100%;max-width:none;flex:1;margin-top:-24px;border-radius:24px 24px 0 0;
      padding:28px 16px 18px;box-shadow:0 -10px 30px -18px rgba(0,0,73,.35)}
    .theme-tg{top:14px;right:14px;width:38px;height:38px;border-radius:10px}
    [data-theme="dark"] .theme-tg{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);color:#fff}
    .auth-logo.dv{width:62px;height:62px;border-radius:18px;margin-bottom:12px}
    .auth-logo.dv picture,.auth-logo.dv img{width:62px;height:62px}
    [data-theme="dark"] .auth-logo.dv picture,[data-theme="dark"] .auth-logo.dv img{width:48px;height:48px}
    .auth-h{font-size:22px}
    .auth-p{font-size:13.5px;margin-bottom:20px}
    .auth-credit{margin-top:22px}
    .auth-credit .cr-logo img{width:112px}
  }
  @media (max-width:360px){ .ft-tx b{font-size:11.5px} .auth-feats li{padding-right:10px} }
  /* iPhone: letra de 16px en los campos para que Safari no amplíe la página */
  @media (max-width:768px){
    .fld-wrap input,input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea{font-size:16px}
  }
  /* Celular: el formulario primero y la marca debajo (antes había que bajar
     para llegar al correo); la marca Draveon sigue arriba, sobre el formulario */
  @media (max-width:767px){
    .auth-right{order:1;flex:none;margin-top:0;border-radius:0 0 24px 24px;padding:22px 16px 18px;
      box-shadow:0 10px 30px -18px rgba(0,0,73,.35)}
    .auth-left{order:2;margin-top:-24px;padding:46px 20px 30px}
    .theme-tg{top:12px;right:12px}
    [data-theme="dark"] .theme-tg{background:var(--field);border-color:var(--line);color:var(--ink)}
  }
/* app/views/auth/two_fa.php */
.code-box{width:46px;height:56px;max-width:calc((100% - 45px) / 6);font-size:22px;text-align:center;font-weight:700;font-family:'DM Mono','JetBrains Mono',monospace;
  border:2px solid var(--line);border-radius:12px;background:var(--field);color:var(--ink);outline:none;transition:border-color .15s,box-shadow .15s,background .15s}
.code-box:focus{border-color:var(--focus,var(--ac));background:var(--field-focus,#fff);box-shadow:0 0 0 4px var(--ac-dim)}