@import url(style.css);
  /* ── PANTALLA DE LOGIN ──────────────────────────────────── */
   :root {
    --negro:   #0A0A0A;
    --blanco:  #F5F3EE;
    --dorado:  #BFAE76;
    --dorado2: #E8C46A;
    --gris1:   #1A1A1A;
    --gris2:   #2C2C2C;
    --gris3:   #444444;
    --gris4:   #888888;
    --gris5:   #CCCCCC;
    --error:   #E25C5C;
    --exito:   #5CB87A;
  }
body.tema-claro {
  --negro:   #F5F3EE;
  --blanco:  #1A1A1A;
  --gris1:   #FFFFFF;
  --gris2:   #E0DDD6;
  --gris3:   #AAAAAA;
  --gris4:   #666666;
  --gris5:   #333333;
}

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

  body {
    font-family: 'Roboto', sans-serif;
    background: var(--negro);
    color: var(--blanco);
    min-height: 100vh;
    overflow-x: hidden;
  }
  #screen-login {
    min-height: 100vh;
    display: grid;
    /* La imagen mas ancha que el formulario, PERO con un piso.
       Sin el minmax, en 1024px de ancho la columna derecha quedaria en 440px
       y ahi tiene que entrar una .login-card de 420 mas 48 de padding a cada
       lado. El formulario se apretaria y el titulo se partiria.
       Con el piso de 480 cede la imagen, que tiene background-size: cover y
       se recorta sola sin deformarse. */
    grid-template-columns: 1.33fr minmax(480px, 1fr);
    /* Segunda fila para el pie. 'auto' hace que ocupe solo lo que necesita y
       que la fila de arriba se quede con el resto de la pantalla. */
    grid-template-rows: 1fr auto;
  }

  /* Panel de imagen. Sin padding ni flex: ya no tiene hijos, solo la foto.
     El gris1 queda como color de fondo mientras la imagen carga. */
  .login-izq {
    background: var(--gris1);
    position: relative;
    overflow: hidden;
  }

  /* La imagen SOLO en escritorio.
     Con un <img> y display:none la mayoria de los navegadores la descarga
     igual — 138 KB que el usuario del celular paga sin verlos nunca. Como
     background dentro de un @media, no se pide.

     El .jpg va ANTES del image-set(): los navegadores que no entienden
     image-set() se quedan con el jpg, los que si lo entienden lo pisan con
     el webp, que pesa la mitad. */
  @media (min-width: 769px) {
    .login-izq {
      background-image: url('../img/login-hero.jpg');
      background-image: image-set(
        url('../img/login-hero.webp') type('image/webp'),
        url('../img/login-hero.jpg')  type('image/jpeg')
      );
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
  }

  /* Los circulos dorados de fondo se fueron: quedaban ENCIMA de la foto y le
     metian un velo amarillo. La imagen ya trae su propia luz. */

  /* Logo ARRIBA del nombre, no al lado.
     Alineado a la izquierda (no centrado) para que la marca comparta la misma
     linea vertical que el titulo grande y las features del panel. */
  /* Ancho de columna compartido por la marca y el titulo grande.
     Es el unico numero a tocar si el logo no calza con "manuales operativos":
     subirlo o bajarlo hasta que las dos lineas terminen a la par.
     No se puede automatizar -- ver cabecera del patch. */
  .login-izq { --marca-ancho: 420px; }

  .brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    max-width: var(--marca-ancho);
  }

  .brand-icon {
    width: 54px; height: 44px;
    background: var(--dorado);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
  }

  .brand-icon svg { width: 22px; height: 22px; fill: var(--negro); }

  /* Logo de marca. Reemplaza al cuadrado dorado del candado.
     El archivo es apaisado (1080x438): se fija el ALTO y el ancho sale solo,
     asi no se deforma.

     mix-blend-mode: screen -> el logo es un JPEG con fondo negro solido, sin
     transparencia. Sobre el panel se veria un rectangulo mas oscuro alrededor;
     con blend screen el negro se funde con el fondo y queda solo el texto
     blanco. Si algun dia se reemplaza por un PNG con transparencia, esta linea
     se puede sacar. */
  /* Antes era 'height: 64px; width: auto'. Ahora manda el ANCHO: el logo
     llena la columna --marca-ancho y el alto sale solo por la proporcion del
     archivo (1080x438), asi que no se deforma. */
  .brand-logo {
    width: 85%;
    height: auto;
    display: block;
    flex-shrink: 0;
    mix-blend-mode: screen;
  }

  .brand-name {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--blanco);
    line-height: 1.2;
  }

  .brand-name span {
    display: block;
    font-size: 15px;
    font-weight: 400;
    color: var(--gris4);
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  .login-izq-copy {
    position: relative;
    z-index: 1;
  }

  .login-izq-copy h1 {
    font-family: 'Roboto', sans-serif;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--blanco);
    margin-bottom: 20px;
    max-width: var(--marca-ancho);
  }

  .login-izq-copy h1 em {
    font-style: normal;
    color: var(--dorado);
  }

  .login-izq-copy p {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: var(--gris4);
    line-height: 1.6;
    max-width: 320px;
  }

  .login-features {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    z-index: 1;
  }

  .feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--gris5);
    font-family: 'Roboto', sans-serif;
  }

  .feature-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--dorado);
    flex-shrink: 0;
  }

  /* ── FORMULARIO LOGIN ───────────────────────────────────── */
  .login-der {
    background: var(--negro);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
  }

  .login-card {
    width: 100%;
    /* 420 y no 380: ahora el titulo grande vive adentro de esta caja y a 380
       "documentación empresarial" se parte en tres lineas. */
    max-width: 420px;
  }

  /* ── COPY DE MARCA, AHORA ARRIBA DEL FORMULARIO ──────────── */
  /* Conservan su nombre de clase para heredar el CSS que ya existia. Lo unico
     que cambia son los anchos: antes vivian en media pantalla, ahora en una
     columna de 420. */
  .login-der .login-izq-copy {
    margin-bottom: 22px;
  }
  .login-der .login-izq-copy h1 {
    font-size: 34px;
    line-height: 1.15;
    max-width: none;
    margin-bottom: 14px;
  }
  .login-der .login-izq-copy p {
    font-size: 13.5px;
    line-height: 1.6;
    max-width: none;
  }
  .login-der .login-features {
    margin-bottom: 34px;
  }

  /* ── PANTALLAS BAJAS ─────────────────────────────────────── */
  /*
     Todo esto vive dentro de min-width: 769px. En celular la pantalla apila y
     scrollea, que ahi es lo correcto, y ademas las unidades vh saltan cuando
     el navegador esconde la barra de direcciones.

     clamp(minimo, preferido, maximo) con vh: el valor sigue al alto de la
     ventana y se frena en los extremos. Asi no hay saltos entre un breakpoint
     y el siguiente — la pantalla se comprime de a poco mientras la achicas.
  */
  @media (min-width: 769px) {
    .login-der {
      /* 48px en pantallas altas, 24 en las bajas. */
      padding: clamp(24px, 4.4vh, 48px);
    }

    .login-der .login-izq-copy h1 {
      font-size: clamp(24px, 3.6vh, 34px);
      margin-bottom: clamp(8px, 1.4vh, 14px);
    }
    .login-der .login-izq-copy p {
      font-size: clamp(12.5px, 1.5vh, 13.5px);
      line-height: 1.55;
    }
    .login-der .login-izq-copy {
      margin-bottom: clamp(12px, 2.2vh, 22px);
    }

    .login-features { gap: clamp(7px, 1.2vh, 12px); }
    .feature-item   { font-size: clamp(12.5px, 1.5vh, 14px); }
    .login-der .login-features {
      margin-bottom: clamp(16px, 3.4vh, 34px);
    }

    .login-card h2       { font-size: clamp(20px, 2.6vh, 26px); }
    .login-card p.sub    { margin-bottom: clamp(16px, 3.6vh, 36px); }
    .form-group          { margin-bottom: clamp(12px, 2vh, 20px); }
    .btn-login           { padding: clamp(11px, 1.5vh, 14px); }
  }

  /*
     Menos de 800px de alto: ya no queda de donde recortar sin que el texto
     quede ilegible, asi que se saca el parrafo.

     Es contenido menos, y es deliberado: el titulo y las tres features ya
     dicen lo mismo. La alternativa es dejar el boton de Ingresar abajo del
     pliegue en una pantalla cuyo unico proposito es apretar ese boton.

     800 y no 720: con el corte en 720 quedaba un hueco entre 730 y 750 donde
     el contenido pasaba la ventana por unos 15px. Se verifico resolviendo los
     clamp() para cada altura entre 540 y 1100.
  */
  @media (min-width: 769px) and (max-height: 800px) {
    .login-der .login-izq-copy p { display: none; }
    .login-der .login-izq-copy   { margin-bottom: 10px; }
  }

  /*
     Menos de 620px: ventana muy baja (alguien con el navegador a media
     pantalla). Se van tambien las features y el subtitulo. Queda el titulo y
     el formulario — lo unico sin lo cual la pantalla no cumple su funcion.

     El widget de Turnstile ocupa 65px fijos y no se puede achicar, asi que a
     partir de aca cada bloque que se saca es el que permite que el boton siga
     siendo visible.
  */
  @media (min-width: 769px) and (max-height: 620px) {
    .login-der .login-features { display: none; }
    .login-card p.sub          { display: none; }
    .login-card h2             { margin-bottom: 16px; }
  }

  /* ── PIE ─────────────────────────────────────────────────── */
  .login-footer {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 18px;
    padding: 18px 24px;
    background: var(--negro);
    border-top: 1px solid var(--dorado);
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: var(--gris4);
    text-align: center;
  }
  .login-footer a {
    color: var(--dorado);
    text-decoration: none;
  }
  .login-footer a:hover { text-decoration: underline; }

  /* Separador. Se oculta al envolver en mobile, donde las lineas se apilan y
     una barra suelta al principio de una linea queda huerfana. */
  .login-footer-sep {
    width: 1px;
    height: 12px;
    background: var(--gris2);
  }

  @media (min-width: 769px) {
    .login-footer {
      padding: clamp(10px, 1.7vh, 18px) 24px;
      font-size: clamp(11px, 1.25vh, 12px);
    }
  }

  .login-card h2 {
    font-size: 26px;
    font-weight: 700;
    color: var(--blanco);
    margin-bottom: 8px;
  }

  .login-card p.sub {
    font-size: 14px;
    color: var(--gris4);
    margin-bottom: 36px;
    font-family: 'Roboto', sans-serif;
  }

  .form-group {
    margin-bottom: 20px;
  }

  .form-group label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--gris5);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 8px;
  }

  .form-group input {
    width: 100%;
    background: var(--gris1);
    border: 1px solid var(--gris2);
    border-radius: 8px;
    padding: 13px 16px;
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
    color: var(--blanco);
    outline: none;
    transition: border-color .2s;
  }

  .form-group input:focus {
    border-color: var(--dorado);
  }

  .form-group input::placeholder {
    color: var(--gris3);
  }

  .btn-login {
    width: 100%;
    padding: 14px;
    background: var(--dorado);
    color: var(--negro);
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    font-family: 'Roboto', sans-serif;
    letter-spacing: .03em;
    cursor: pointer;
    transition: background .2s, transform .1s;
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .btn-login:hover  { background: var(--dorado2); }
  .btn-login:active { transform: scale(.98); }
  .btn-login:disabled { opacity: .6; cursor: not-allowed; }

  .login-error {
    background: rgba(226,92,92,.1);
    border: 1px solid rgba(226,92,92,.3);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 13px;
    color: var(--error);
    margin-bottom: 20px;
    display: none;
  }

  .spinner {
    width: 16px; height: 16px;
    border: 2px solid rgba(10,10,10,.3);
    border-top-color: var(--negro);
    border-radius: 50%;
    animation: spin .6s linear infinite;
    display: none;
  }

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

  /* ── APP (post-login) ───────────────────────────────────── */
  #screen-app {
    display: none;
    min-height: 100vh;
    flex-direction: column;
  }

  /* Topbar */
  .topbar {
    height: 56px;
    background: var(--gris1);
    border-bottom: 1px solid var(--gris2);
    display: flex;
    align-items: center;
    padding: 0 24px;
    gap: 16px;
    position: sticky;
    top: 0;
    z-index: 100;
  }

  .topbar-brand {
    display: flex; align-items: center; gap: 10px;
    font-size: 14px; font-weight: 600;
    color: var(--blanco);
    flex: 1;
  }

  .topbar-brand-dot {
    width: 8px; height: 8px;
    background: var(--dorado);
    border-radius: 2px;
  }

  .topbar-right {
    display: flex; align-items: center; gap: 12px;
  }

  .rol-badge {
    font-size: 11px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  .rol-badge.super-admin { background: rgba(245, 210, 115, 0.15); color: var(--dorado); }
  .rol-badge.franquiciante { background: rgba(201,168,76,.15); color: var(--dorado); }
  .rol-badge.franquiciado  { background: rgba(92,184,122,.15); color: var(--exito); }
  .rol-badge.empleado      { background: rgba(136,136,136,.15); color: var(--gris5); }

  .topbar-user {
    font-size: 13px;
    color: var(--gris5);
    font-family:'Roboto', sans-serif;
  }

  .notif-btn {
    position: relative;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--gris4);
    padding: 6px;
    border-radius: 6px;
    transition: color .2s, background .2s;
  }

  .notif-btn:hover { color: var(--blanco); background: var(--gris2); }

  .notif-badge {
    position: absolute;
    top: 2px; right: 2px;
    background: var(--dorado);
    color: var(--negro);
    font-size: 11px;
    font-weight: 700;
    width: 16px; height: 16px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
  }

  .btn-logout {
    font-size: 12px;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    color: var(--gris4);
    background: transparent;
    border: 1px solid var(--gris2);
    border-radius: 6px;
    padding: 5px 12px;
    cursor: pointer;
    transition: color .2s, border-color .2s;
  }

  .btn-logout:hover { color: var(--blanco); border-color: var(--gris3); }

  /* Layout principal */
  .app-body {
    display: grid;
    grid-template-columns: 220px 1fr;
    flex: 1;
    min-height: calc(100vh - 56px);
  }

  /* Sidebar */
  .sidebar {
    background: var(--gris1);
    border-right: 1px solid var(--gris2);
    padding: 20px 0;
    position: sticky;
    top: 56px;
    height: calc(100vh - 56px);
    overflow-y: auto;
  }

  .nav-section {
    padding: 0 12px;
    margin-bottom: 4px;
  }

  .nav-section-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gris3);
    padding: 8px 12px 4px;
  }

  .nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 7px;
    font-size: 13px;
    font-family:'Roboto', sans-serif;
    color: var(--gris4);
    cursor: pointer;
    transition: background .15s, color .15s;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
  }

  .nav-item:hover { background: var(--gris2); color: var(--blanco); }

  .nav-item.active {
    background: rgba(201,168,76,.12);
    color: var(--dorado);
  }

  .nav-item svg { width: 16px; height: 16px; flex-shrink: 0; }

  /* Contenido principal */
  .main-content {
    padding: 32px;
    overflow-y: auto;
  }

  .page-header {
    margin-bottom: 28px;
  }

  .page-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--blanco);
    margin-bottom: 4px;
  }

  .page-sub {
    font-size: 14px;
    color: var(--gris4);
    font-family:'Roboto', sans-serif;
  }

  /* Panels (vistas por sección) */
  .panel { display: none; }
  .panel.active { display: block; }

  /* Cards de stats */
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
  }

  .stat-card {
    background: var(--gris1);
    border: 1px solid var(--gris2);
    border-radius: 12px;
    padding: 20px;
  }

  .stat-card-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gris4);
    margin-bottom: 8px;
  }

  .stat-card-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--blanco);
    line-height: 1;
  }

  .stat-card-value.dorado { color: var(--dorado); }

  /* Tabla */
  .tabla-wrap {
    background: var(--gris1);
    border: 1px solid var(--gris2);
    border-radius: 12px;
    overflow: hidden;
  }

  .tabla-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--gris2);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .tabla-header h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--blanco);
  }

  table {
    width: 100%;
    border-collapse: collapse;
  }

  thead th {
    text-align: left;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gris4);
    padding: 10px 20px;
    border-bottom: 1px solid var(--gris2);
  }

  tbody td {
    padding: 12px 20px;
    font-size: 13px;
    color: var(--gris5);
    border-bottom: 1px solid rgba(44,44,44,.5);
    font-family:'Roboto', sans-serif;
  }

  tbody tr:last-child td { border-bottom: none; }
  tbody tr:hover td { background: rgba(255,255,255,.02); }

  /* Botones */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
    cursor: pointer;
    border: none;
    transition: opacity .2s, transform .1s;
  }

  .btn:active { transform: scale(.97); }
  .btn-primary { background: var(--dorado); color: var(--negro); }
  .btn-primary:hover { opacity: .88; }
  .btn-ghost { background: transparent; color: var(--gris5); border: 1px solid var(--gris2); }
  .btn-ghost:hover { border-color: var(--gris3); color: var(--blanco); }
  .btn-danger { background: transparent; color: var(--error); border: 1px solid rgba(226,92,92,.3); }
  .btn-danger:hover { background: rgba(226,92,92,.08); }

  /* Estados de validación */
  .estado-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 9px;
    border-radius: 20px;
  }

  .estado-completo     { background: rgba(92,184,122,.12); color: var(--exito); }
  .estado-solo-digital { background: rgba(201,168,76,.12);  color: var(--dorado); }
  .estado-solo-fisico  { background: rgba(136,136,136,.12); color: var(--gris5); }
  .estado-pendiente    { background: rgba(226,92,92,.12);   color: var(--error); }

  /* Loading state */
  .loading-msg {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px;
    color: var(--gris4);
    font-size: 14px;
    font-family:'Roboto', sans-serif;
  }

  .loading-msg .spinner { display: block; border-top-color: var(--dorado); }

  /* Panel vacío */
  .empty-state {
    text-align: center;
    padding: 64px 32px;
    color: var(--gris4);
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
  }
.cf-turnstile {
  transform: scale(.62);
  /* top LEFT, no center: con center el widget queda corrido hacia adentro
     porque el scale lo encoge desde el medio. */
  transform-origin: top left;
  display: flex;
  justify-content: flex-start;
  margin-top: 16px;
  /* El scale no reduce el espacio que ocupa en el layout: el margen negativo
     recupera los ~12px que quedarian en blanco abajo. */
  margin-bottom: -12px;
}
  /* Responsive */
  @media (max-width: 768px) {
    /* En celular no hay dos columnas: la imagen se va y queda el formulario
       con su copy arriba, en el orden en que ya estan en el HTML.

       Antes esto era mucho mas complicado: .brand, .login-izq-copy y
       .login-features eran hijos de .login-izq mientras que el formulario era
       HERMANO, asi que hacia falta 'display: contents' para subirlos al mismo
       flex y poder reordenarlos. Al mover el copy adentro de .login-der eso
       dejo de ser necesario. */
    #screen-login {
      display: flex;
      flex-direction: column;
    }

    /* No solo se oculta: el background-image esta declarado dentro de un
       @media (min-width: 769px), asi que en celular ni se pide. */
    .login-izq { display: none; }

    .login-der  { padding: 40px 24px; }
    .login-card { max-width: 100%; }

    .login-der .login-izq-copy h1 { font-size: 28px; }

    .login-footer {
      font-size: 11.5px;
      padding: 16px 20px;
      gap: 6px 12px;
    }
    /* Apilado, el separador queda colgando al principio de una linea. */
    .login-footer-sep { display: none; }

    .app-body   { grid-template-columns: 1fr; }
    .sidebar    { display: none; }
  }

  /* ══════════════════════════════════════════════════════════
     MARCA, TITULO Y REDES
     Va al final del archivo por orden de cascada: el bloque
     @media (max-width: 768px) esta mas arriba, y una regla suelta
     insertada antes que el podria quedar pisada en celular.
     ══════════════════════════════════════════════════════════ */

  /* ── Marca sobre la imagen ────────────────────────────────── */
  .login-marca {
    position: absolute;
    top: clamp(20px, 4vh, 42px);
    left: clamp(20px, 2.4vw, 44px);
    right: clamp(20px, 2.4vw, 44px);
    z-index: 2;
    pointer-events: none;   /* la foto de abajo no se vuelve clickeable */
  }

  .login-marca-logo {
    display: block;
    width: clamp(150px, 17vw, 230px);
    height: auto;
    margin-bottom: 14px;
  }

  .login-marca-bp strong {
    display: block;
    font-family: 'Archivo', sans-serif;
    font-size: clamp(13px, 1.5vw, 17px);
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dorado);
    margin-bottom: 2px;
  }

  .login-marca-bp span {
    display: block;
    font-family: 'Archivo', sans-serif;
    font-size: clamp(12px, 1.3vw, 15px);
    color: var(--blanco);
    letter-spacing: .02em;
  }

  /* ── Titulo del panel derecho ─────────────────────────────── */
  .login-titulo h1 {
    font-family: 'Roboto', sans-serif;
    font-size: clamp(24px, 3.6vh, 34px);
    font-weight: 700;
    line-height: 1.15;
    color: var(--blanco);
    margin: 0 0 clamp(14px, 2.2vh, 22px);
  }

  /* El renglon dorado es el que lleva el enfasis, asi que el <em> no va en
     itálica: solo cambia el color. */
  .login-titulo h1 em {
    font-style: normal;
    color: var(--dorado);
  }

  .login-titulo-linea {
    display: block;
    width: 64px;
    height: 2px;
    background: var(--dorado);
    margin-bottom: clamp(18px, 3vh, 30px);
  }

  /* ── Botones de redes ─────────────────────────────────────── */
  .login-redes {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }

  .login-red {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--dorado);
    color: var(--dorado);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .18s, color .18s;
  }

  .login-red:hover {
    background: var(--dorado);
    color: var(--negro);
    text-decoration: none;
  }

  /* La mano SOLO cuando el link tiene destino.
     Con el selector de atributo, el dia que se peguen las URLs reales el
     boton empieza a comportarse como link sin tocar este archivo. */
  .login-red[href] { cursor: pointer; }

  /* ── Pantallas bajas ──────────────────────────────────────── */
  /* Mismos escalones que el resto del panel: cuando se va el subtitulo,
     el titulo grande tambien tiene que achicarse o se come la pantalla. */
  @media (min-width: 769px) and (max-height: 620px) {
    .login-titulo h1        { font-size: 22px; margin-bottom: 10px; }
    .login-titulo-linea     { margin-bottom: 14px; }
    .login-marca-logo       { width: 150px; margin-bottom: 10px; }
  }

  /* ── Celular ──────────────────────────────────────────────── */
  @media (max-width: 768px) {

    /* ── Franja de marca ──────────────────────────────────────
       .login-izq vuelve a mostrarse, pero como franja horizontal en vez de
       columna. Sin esto el celular no tiene NINGUNA marca: solo un titulo
       sobre negro.

       No trae la foto: el background-image vive dentro de
       @media (min-width: 769px), asi que el navegador no lo pide. Se muestra
       la caja con el logo adentro, sin los 138 KB de la imagen. */
    .login-izq {
      display: block;
      background: var(--gris1);
      border-bottom: 1px solid var(--gris2);
      padding: 22px 24px 20px;
      position: static;      /* .login-marca es absolute respecto de esto */
      overflow: visible;
    }

    .login-marca {
      position: static;
      top: auto; left: auto; right: auto;
      text-align: center;
      pointer-events: auto;
    }

    .login-marca-logo {
      width: 168px;
      margin: 0 auto 8px;
    }

    .login-marca-bp strong { font-size: 12px; letter-spacing: .14em; }
    .login-marca-bp span   { font-size: 12px; }

    /* ── Formulario ───────────────────────────────────────────── */
    .login-der  { padding: 30px 24px 34px; }

    .login-titulo h1    { font-size: 25px; }
    .login-titulo-linea { width: 52px; margin-bottom: 20px; }

    /* ── Pie ──────────────────────────────────────────────────
       En columna y no envuelto: con flex-wrap la direccion se partia a mitad
       de linea y las redes quedaban abajo del pliegue. Apilado ocupa mas
       alto pero se lee entero. */
    .login-footer {
      flex-direction: column;
      gap: 7px;
      padding: 18px 20px 20px;
      font-size: 11.5px;
      line-height: 1.5;
    }
    .login-footer-sep { display: none; }
    .login-redes      { margin-top: 5px; }
  }

  /* ── Celular angosto ──────────────────────────────────────────
     Debajo de 400px (iPhone SE, Android chicos) el titulo a 25px se parte en
     cuatro lineas y come media pantalla. */
  @media (max-width: 400px) {
    .login-titulo h1     { font-size: 22px; }
    .login-marca-logo    { width: 145px; }
    .login-der           { padding: 24px 18px 28px; }
    .login-footer        { font-size: 11px; padding: 16px 16px 18px; }
  }