/* Portal GGP — línea visual "Identidad GGP" de Seguimiento Comercial (vino y ciruela sobre superficies cálidas). */
:root{
  --fondo:#faf7f8;--superficie:#fff;--texto:#3c2230;--titulo:#421e2d;--suave:#6f5a65;
  --borde:#eadbe0;--borde-suave:#f0e4e8;--vino:#aa1838;--vino-osc:#861b34;--ciruela:#4a1e30;
  --rosa:#fbf0f3;--foco:#bb2648;--ok-fondo:#e6f5eb;--ok-texto:#1b6b42;--prox-fondo:#f3edf0;--prox-texto:#5f4a56;
  --radio:15px;--sombra:0 7px 22px #58223808;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(180deg,#f9f5f6 0,#fcfafb 450px);color:var(--texto);
  font:15px/1.5 Inter,"Segoe UI",Roboto,Arial,system-ui,sans-serif;overflow-x:hidden}
svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:3px solid var(--foco);outline-offset:3px;border-radius:6px}

.saltar{position:absolute;left:12px;top:-60px;background:var(--ciruela);color:#fff;padding:10px 14px;border-radius:8px;z-index:10;text-decoration:none;font-weight:700}
.saltar:focus{top:12px}

/* Barra superior */
.barra{display:flex;align-items:center;gap:14px;height:74px;padding:0 max(24px,calc((100vw - 1130px)/2));background:#fff;border-bottom:1px solid var(--borde)}
.marca{display:flex;align-items:center;gap:12px;min-width:0}
.marca-logo{width:44px;height:44px;object-fit:contain;flex:none}
.marca-texto{display:flex;flex-direction:column;min-width:0}
.marca-texto strong{font-size:19px;letter-spacing:-.025em;color:#371b27;line-height:1.2}
.marca-texto span{text-transform:uppercase;font-size:10px;font-weight:700;letter-spacing:.12em;color:#7a6872;margin-top:3px}
.distintivo{flex:none;font-size:12px;font-weight:700;color:#7a4a12;background:#fff4e2;border:1px solid #efd6ac;border-radius:20px;padding:4px 11px;white-space:nowrap}
.barra-derecha{margin-left:auto;display:flex;align-items:center;gap:12px;min-width:0}
.cuenta{display:flex;align-items:center;gap:10px;min-width:0}
.cuenta[hidden],.enlace-barra[hidden],.distintivo[hidden]{display:none}
.cuenta-nombre{font-size:13.5px;font-weight:700;color:var(--titulo);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.enlace-barra{font-size:13.5px;font-weight:700;color:var(--vino);text-decoration:none;padding:8px 4px}
.enlace-barra:hover{text-decoration:underline}
.boton-sec{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 14px;border-radius:9px;border:1px solid #c98d9e;background:#fff;color:#8f2340;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer}
.boton-sec:hover:not(:disabled){background:#fbf1f4}
.boton-sec:disabled{opacity:.5;cursor:not-allowed}

/* Contenido */
.pagina{flex:1;width:100%;max-width:1180px;margin:0 auto;padding:25px 25px 56px}
.encabezado{position:relative;overflow:hidden;border-radius:17px;padding:30px 32px;margin-bottom:16px;color:#fff;
  background:linear-gradient(105deg,#381a29 0%,#5d2035 47%,#ad2043 100%);box-shadow:0 14px 27px #57132918}
.encabezado::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:8%;top:-160px;background:#ffffff0a;pointer-events:none}
.antetitulo{margin:0 0 6px;color:#f2c8d2;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.encabezado h1{margin:0 0 6px;font-size:clamp(27px,3vw,37px);font-weight:780;letter-spacing:-.04em;line-height:1.15}
.bajada{margin:0;color:#f5dfe5;font-size:15px;max-width:640px}

.nota{display:flex;align-items:center;gap:9px;margin:0 0 20px;padding:11px 15px;background:#fff;border:1px solid var(--borde);border-radius:11px;color:var(--suave);font-size:13.5px}
.nota svg{width:18px;height:18px;flex:none;color:var(--vino)}

/* Tarjetas */
.rejilla{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}
.tarjeta{display:flex;flex-direction:column;min-width:0;background:var(--superficie);border:1px solid var(--borde);border-radius:var(--radio);padding:20px 20px 18px;box-shadow:var(--sombra);transition:border-color .15s,box-shadow .15s,transform .15s}
.tarjeta.es-disponible:hover{border-color:#d7b3c0;box-shadow:0 10px 26px #5822381a;transform:translateY(-2px)}
.tarjeta-cabeza{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.tarjeta-icono{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--rosa);color:#9f2343;flex:none}
.tarjeta-icono svg{width:23px;height:23px}
.es-proxima .tarjeta-icono{background:#f6f1f3;color:#8a7380}
.estado{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;border-radius:20px;padding:4px 10px;white-space:nowrap}
.estado::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.estado-ok{background:var(--ok-fondo);color:var(--ok-texto)}
.estado-prox{background:var(--prox-fondo);color:var(--prox-texto)}
.estado-prox::before{background:transparent;border:1.5px solid currentColor}
.tarjeta-titulo{margin:0 0 5px;font-size:18px;font-weight:760;letter-spacing:-.02em;color:var(--titulo);overflow-wrap:anywhere}
.tarjeta-desc{margin:0 0 18px;color:var(--suave);font-size:14px;overflow-wrap:anywhere}
.tarjeta-pendiente{margin:auto 0 0;padding-top:12px;border-top:1px dashed var(--borde);color:#76626d;font-size:13px}
.boton{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:9px;
  background:var(--vino);color:#fff;font-weight:700;font-size:14.5px;text-decoration:none;box-shadow:0 5px 13px #a31b3824;transition:background .15s}
.boton svg{width:17px;height:17px}
.boton:hover{background:var(--vino-osc)}
.boton:focus-visible{outline-offset:3px}
.aviso-js{padding:14px;background:#fff3dd;border:1px solid #eed0a6;border-radius:10px}

.pie{padding:22px 16px 28px;text-align:center;color:#7a6872;font-size:13px;border-top:1px solid var(--borde-suave);background:#fff}

/* Tableta: dos columnas */
/* Etapa 2: sesión, modos de ingreso, avisos y administración */
.cargando{color:var(--suave);padding:30px 0}
.estado-unico{background:#f4e6ee;color:#6b1d3e}
.tarjeta-modo{margin:-10px 0 16px;font-size:12.5px;color:#7a6470}
.subtitulo{margin:30px 0 12px;font-size:16px;color:var(--titulo)}
.rejilla-proxima .tarjeta{box-shadow:none;background:#fdfbfc}
.bienvenida,.vacio,.panel{background:#fff;border:1px solid var(--borde);border-radius:var(--radio);padding:24px;box-shadow:var(--sombra)}
.bienvenida h2,.vacio h2,.panel h2{margin:0 0 8px;font-size:19px;color:var(--titulo)}
.bienvenida p,.vacio p{margin:0 0 16px;color:var(--suave)}
.bienvenida .ayuda{margin:16px 0 0;font-size:13.5px}
a{color:var(--vino)}
.aviso{margin:0 0 14px;padding:11px 14px;border-radius:10px;font-size:14px;border:1px solid}
.aviso-error{background:#fff0ee;border-color:#f1c9c2;color:#8d2a1c}
.aviso-exito{background:var(--ok-fondo);border-color:#bfe3cc;color:var(--ok-texto)}
.aviso-codigo{background:#fff8ea;border-color:#efd6ac;color:#5b3a0c}
.aviso-codigo p{margin:4px 0}
.aviso-codigo code{font-size:18px;font-weight:800;letter-spacing:.06em;background:#fff;border:1px solid #efd6ac;border-radius:6px;padding:2px 8px;white-space:nowrap}
.encabezado-chico{padding:22px 28px}
.panel{margin-bottom:16px}
.formulario{display:grid;gap:14px}
.formulario-linea{grid-template-columns:minmax(0,2fr) minmax(0,1.3fr) auto;align-items:end}
.campo{display:grid;gap:6px;font-size:13.5px;font-weight:700;color:#5c4250}
.campo input{min-height:44px;width:100%;padding:10px 12px;border:1px solid #dfcbd2;border-radius:9px;font:inherit;font-weight:400;color:var(--texto);background:#fff}
.campo input:focus{outline:3px solid #ad315133;border-color:#ad3151}
.boton{border:0;cursor:pointer;font-family:inherit}
.boton-ancho{width:100%;align-self:stretch}
.usuarios{display:grid;gap:12px}
.usuario{border:1px solid var(--borde-suave);border-radius:12px;padding:16px;background:#fff}
.usuario-inactivo{background:#faf6f7}
.usuario-cabeza{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.usuario h3{margin:0;font-size:16px;color:var(--titulo)}
.usuario-dato{margin:2px 0 0;font-size:13px;color:var(--suave)}
.usuario-estados{display:flex;gap:6px;flex-wrap:wrap;align-items:flex-start}
.accesos{border:1px dashed var(--borde);border-radius:10px;margin:0 0 12px;padding:10px 12px;display:flex;flex-wrap:wrap;gap:8px 18px}
.accesos legend{font-size:12.5px;font-weight:700;color:#6f5a65;padding:0 4px}
.check{display:inline-flex;align-items:center;gap:7px;font-size:14px;min-height:32px;cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--vino)}
.usuario-acciones{display:flex;gap:8px;flex-wrap:wrap}

/* Pantallas de acceso (identidad central) */
.cuerpo-acceso{background:radial-gradient(ellipse at top,#f8e5eb,#fbf9f8 65%)}
.acceso{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 16px}
.acceso-tarjeta{width:100%;max-width:440px;background:#fff;border:1px solid var(--borde);border-radius:22px;padding:34px;box-shadow:0 20px 60px #4a1e3014}
.acceso-marca{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.acceso-marca img{width:52px;height:52px;object-fit:contain}
.acceso-marca strong{display:block;font-size:20px;color:#371b27;letter-spacing:-.02em}
.acceso-marca span{display:block;text-transform:uppercase;font-size:10px;font-weight:700;letter-spacing:.12em;color:#7a6872;margin-top:2px}
.distintivo-acceso{display:inline-block;margin:0 0 14px}
.acceso h1{margin:0 0 8px;font-size:25px;letter-spacing:-.03em;color:var(--titulo);line-height:1.2}
.acceso-texto{margin:0 0 18px;color:var(--suave)}
.acceso-ayuda{margin:18px 0 0;font-size:13.5px;color:var(--suave)}
.acceso-pie{margin:18px 0 0;color:#7a6872;font-size:13px}
.acceso .boton{justify-content:center}

@media (max-width:980px){.rejilla{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.formulario-linea{grid-template-columns:1fr}.cuenta-nombre{max-width:120px}}
/* Celular: una columna */
@media (max-width:640px){
  .barra{height:auto;min-height:64px;padding:10px 16px;gap:10px;flex-wrap:wrap}
  .barra-derecha{display:contents}
  .barra .distintivo{margin-left:auto}
  .cuenta{flex-basis:100%;flex-wrap:wrap;justify-content:flex-end;gap:2px 10px;border-top:1px solid var(--borde-suave);padding-top:8px}
  .cuenta{align-items:center}
  .cuenta-nombre{flex:1 1 0;min-width:0;max-width:none;font-size:13px;white-space:normal}
  .cuenta .boton-sec{min-height:40px;padding:6px 12px}
  .acceso-tarjeta{padding:24px 20px;border-radius:18px}
  .usuario-acciones .boton-sec{flex:1 1 auto}
  .marca-logo{width:38px;height:38px}
  .marca-texto strong{font-size:17px}
  .distintivo{font-size:11px;padding:3px 9px}
  .pagina{padding:16px 16px 44px}
  .encabezado{padding:23px 20px;margin-bottom:13px}
  .encabezado h1{font-size:28px}
  .rejilla{grid-template-columns:1fr;gap:12px}
  .tarjeta{padding:18px 17px 16px}
  .boton{align-self:stretch}
}
@media (max-width:380px){.marca-texto span{display:none}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}.tarjeta.es-disponible:hover{transform:none}}
/* Verificación en dos pasos */
.aviso-alerta{background:#fff7e6;border-color:#f0d9a8;color:#7a4b00}
.acceso-pasos{margin:0 0 14px;padding-left:20px;color:var(--suave);font-size:14px;line-height:1.5}
.acceso-qr{display:flex;justify-content:center;margin:6px 0 10px}
.acceso-qr svg path{stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter}
.acceso-qr svg path:first-child{fill:#fff;stroke:none}
.acceso-qr svg path:last-child{fill:none;stroke:#000}
.acceso-qr svg{width:200px;height:200px;max-width:100%;background:#fff;border:1px solid var(--borde,#e7dadd);border-radius:12px;padding:6px}
.acceso-clave{margin:0 0 16px;text-align:center;font-size:13px;color:var(--suave);overflow-wrap:anywhere}
.acceso-clave code,.acceso-codigos code{font-family:ui-monospace,Consolas,monospace;font-size:14px;letter-spacing:.04em;color:var(--texto,#2b1a1f)}
.acceso-codigos{list-style:none;margin:0 0 18px;padding:12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;background:#faf6f7;border:1px solid var(--borde,#e7dadd);border-radius:12px}
.acceso-codigos li{text-align:center}