/* ============================================================
   estilo.css · Pasaporte Canaima · v1.22

   El sistema visual de todas las pantallas, en un solo lugar. Antes cada
   index.html repetía su <style>; ahora lo importan y solo agregan lo
   suyo. La referencia está en mockups/lienzo/Sistema.dc.html.

   Siempre claro: las pantallas se aprobaron en claro y el oliva y el azul
   estan calibrados para fondo claro. No hay tema oscuro a proposito.

   Tres reglas que no se negocian:
   - El oliva #ACB759 es SUPERFICIE, nunca texto: sobre blanco da 2.2:1.
     Sobre oliva se escribe en azul (5.9:1). Un solo botón oliva por pantalla.
   - Las pantallas de la gente no tienen tarjeta con sombra: una columna de
     400 px y el aire alrededor. En celular, la misma columna a todo el ancho.
   - Cuentas y documentos van en monoespaciada: se leen carácter por carácter.
   ============================================================ */

:root {
  --noche:   #00345B;
  --oliva:   #ACB759;
  --fondo:   #F7F8F4;
  --papel:   #FFFFFF;
  --tinta:   #00345B;
  --tenue:   #5F6B72;
  --apagado: #93A0A6;
  --linea:   #E4E8E0;
  --campo:   #FBFCF9;
  --realce:  #EDF0E8;
  --no:      #8A2F2F;
  --si:      #3F6B4A;
  --espera:  #8A5A1F;
  --sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; color-scheme: light; }
body {
  margin: 0; min-height: 100%;
  background: var(--fondo); color: var(--tinta);
  font: 400 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column;
}
h1, h2, h3, p { margin: 0; }
a { color: var(--noche); }
a:hover { color: #1d5a8a; }
button { font: inherit; color: inherit; }

/* ---- marca -------------------------------------------------- */
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--tinta); }
.marca svg { width: 36px; height: 36px; flex: none; }
.marca .n { font: 800 17px/1.1 var(--sans); letter-spacing: -.02em; white-space: nowrap; }
.marca .n em { font-style: normal; font-weight: 500; color: var(--apagado); }
/* en fondo oscuro el azul del logo no se ve: se pinta con la tinta */
.marca svg .azul { fill: var(--tinta); }

/* ---- la columna de las pantallas de la gente ----------------- */
.persona {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 64px 24px 40px;
}
.persona > .col { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 32px; }
@media (max-width: 480px) {
  .persona { justify-content: flex-start; padding: 32px 24px 24px; }
}
.pie-pagina { padding: 24px; display: flex; justify-content: center; }
.pie-pagina .pie { text-align: center; max-width: 400px; }

/* ---- tipografía ---------------------------------------------- */
.titulo   { font: 700 24px/1.2 var(--sans); letter-spacing: -.02em; text-wrap: balance; }
.titulo-g { font: 800 28px/1.2 var(--sans); letter-spacing: -.03em; }
.sub      { font: 700 17px/1.2 var(--sans); }
.sub-ch   { font: 700 16px/1.2 var(--sans); }
.nota     { font-size: 14px; line-height: 1.5; color: var(--tenue); }
.nota b   { color: var(--tinta); font-weight: 600; }
.pie      { font: 400 12px/1.5 var(--sans); color: var(--apagado); }
.rotulo   { font: 600 12px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--apagado); }
.mono     { font-family: var(--mono); font-size: 14px; overflow-wrap: anywhere; }
.enlace   { font: 600 14px/1 var(--sans); text-decoration: none; }
.enlace.tenue { color: var(--tenue); }

/* ---- bloques ------------------------------------------------- */
.pila   { display: flex; flex-direction: column; }
.pila-8  { display: flex; flex-direction: column; gap: 8px; }
.pila-12 { display: flex; flex-direction: column; gap: 12px; }
.pila-16 { display: flex; flex-direction: column; gap: 16px; }
.pila-20 { display: flex; flex-direction: column; gap: 20px; }
.fila   { display: flex; align-items: center; gap: 12px; }
.entre  { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.sep    { height: 1px; background: var(--linea); }

/* ---- campos -------------------------------------------------- */
.campo { display: flex; flex-direction: column; gap: 8px; }
.campo label { font: 600 12px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--apagado); }
.in {
  height: 48px; width: 100%;
  border: 1px solid var(--linea); border-radius: 10px;
  background: var(--campo); color: var(--tinta);
  padding: 0 14px; font: 500 16px/1 var(--sans);
}
.in::placeholder { color: var(--apagado); font-weight: 400; }
.in:focus-visible { outline: 0; border-color: var(--tinta); background: var(--papel); }
.in.mono { font-family: var(--mono); font-size: 15px; }
/* clave con ojo */
.clave { position: relative; }
.clave .in { padding-right: 48px; }
.clave .ojo {
  position: absolute; right: 6px; top: 6px; width: 36px; height: 36px;
  border: 0; background: none; border-radius: 8px; cursor: pointer;
  display: grid; place-items: center; color: var(--apagado);
}
.clave .ojo:hover { background: var(--realce); color: var(--tinta); }
.clave .ojo svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.clave .ojo .tachado { display: none; }
.clave[data-visible="1"] .ojo .abierto { display: none; }
.clave[data-visible="1"] .ojo .tachado { display: block; }
.clave[data-visible="1"] .ojo { color: var(--tinta); }
/* fuerza de la clave: cuatro rayitas */
.fuerza { display: flex; flex-direction: column; gap: 8px; margin-top: -8px; }
.fuerza .rayas { display: flex; gap: 6px; }
.fuerza .rayas span { flex: 1; height: 4px; border-radius: 2px; background: var(--linea); }
.fuerza[data-nivel="1"] .rayas span:nth-child(-n+1) { background: var(--no); }
.fuerza[data-nivel="2"] .rayas span:nth-child(-n+2) { background: var(--espera); }
.fuerza[data-nivel="3"] .rayas span:nth-child(-n+3) { background: var(--si); }
.fuerza[data-nivel="4"] .rayas span { background: var(--si); }
/* opciones tipo pastilla (sexo, estado civil) */
.opciones { display: flex; gap: 8px; flex-wrap: wrap; }
.opciones button {
  height: 40px; padding: 0 16px; cursor: pointer;
  border: 1px solid var(--linea); border-radius: 10px; background: var(--campo);
  font: 500 14px/1 var(--sans); color: var(--tinta);
}
.opciones button[aria-pressed="true"] { border-color: var(--noche); background: var(--noche); color: #fff; }

/* ---- botones ------------------------------------------------- */
.btn {
  height: 48px; width: 100%; border-radius: 10px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 700 16px/1 var(--sans); letter-spacing: -.01em; border: 1px solid transparent;
  text-decoration: none;
}
.btn.p { background: var(--oliva); color: #00345B; border-color: var(--oliva); }
.btn.s { background: transparent; color: var(--tinta); border-color: var(--linea); font-weight: 600; }
.btn.s:hover { background: var(--realce); }
.btn.auto { width: auto; padding: 0 20px; }
.btn.chico { height: 36px; font-size: 13px; padding: 0 14px; border-radius: 8px; width: auto; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

/* ---- avisos -------------------------------------------------- */
.aviso {
  padding: 10px 12px; border-radius: 0 6px 6px 0; font-size: 13px; line-height: 1.5;
  border-left: 3px solid var(--linea); background: var(--campo);
}
.aviso.mal  { border-left-color: var(--no); }
.aviso.bien { border-left-color: var(--si); }

/* ---- pastillas, avatares, tipo ------------------------------- */
.pastilla {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px;
  border-radius: 6px; font: 700 11px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  background: color-mix(in srgb, currentColor 8%, transparent);
}
.pastilla::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.p-si { color: var(--si); } .p-espera { color: var(--espera); } .p-gris { color: var(--apagado); } .p-no { color: var(--no); }
.tipo { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--sans); color: var(--tenue); }
.tipo svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none; overflow: hidden;
  display: grid; place-items: center; font: 800 12px/1 var(--sans); letter-spacing: .02em;
}
.avatar.tienda { border-radius: 8px; }           /* persona redonda, tienda cuadrada */
.avatar.g { width: 64px; height: 64px; font-size: 20px; border-radius: 14px; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.a0 { background: #ACB759; color: #25320a; } .a1 { background: #5b8ea8; color: #04222f; }
.a2 { background: #c08a5e; color: #3a1f0a; } .a3 { background: #8d8ab5; color: #22204a; } .a4 { background: #6fa88a; color: #0c2d20; }

/* ---- datos (Mi cuenta) --------------------------------------- */
.dato { display: flex; flex-direction: column; gap: 2px; }
.dato .k { font: 600 12px/1.5 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--apagado); }
.dato .v { font-weight: 600; }
.bloque { display: flex; flex-direction: column; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--linea); }
.bloque .avisar { font: 500 12px/1 var(--sans); color: var(--apagado); text-decoration: underline; align-self: flex-start; background: none; border: 0; padding: 0; cursor: pointer; }

/* ---- portales ------------------------------------------------ */
.grilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 860px) { .grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
@media (max-width: 520px) { .grilla { grid-template-columns: 1fr; gap: 12px; } }
.portal {
  display: flex; flex-direction: column; gap: 14px; padding: 22px; min-height: 150px;
  background: var(--papel); border: 1px solid var(--linea); border-radius: 14px;
  text-decoration: none; color: var(--tinta);
}
.portal:hover { border-color: var(--tinta); color: var(--tinta); }
.portal.pronto { opacity: .55; pointer-events: none; }
.portal .cab { display: flex; align-items: center; justify-content: space-between; }
.portal .cab svg { width: 28px; height: 28px; }
.portal .nom { font: 700 17px/1.2 var(--sans); letter-spacing: -.01em; }
.portal .des { font-size: 13px; color: var(--tenue); }
@media (max-width: 520px) { .portal { min-height: auto; } }

.cabecera { display: flex; align-items: center; justify-content: space-between; padding: 28px 56px; }
@media (max-width: 640px) { .cabecera { padding: 20px 20px; } }
.contenido { padding: 32px 56px 72px; display: flex; flex-direction: column; gap: 32px; max-width: 1100px; width: 100%; margin: 0 auto; }
@media (max-width: 640px) { .contenido { padding: 16px 20px 40px; gap: 24px; } }