/* El Cheque Claro — el mundo visual es el talón de pago impreso:
   papel de seguridad verdoso, tinta verde y cifras en monoespaciada, que es
   como vienen en los cheques de verdad. De noche, el mismo talón bajo una
   lámpara: papel apagado y la tinta encendida. */

:root {
  --papel:        #EAEEE4;
  --papel-alto:   #F8FAF5;
  --papel-linea:  #D6DCCB;
  --trama:        rgba(23, 101, 74, .028);

  --tinta:        #16231D;
  --tinta-suave:  #5C6B60;

  --verde:        #17654A;
  --verde-vivo:   #1E8862;
  --verde-tenue:  rgba(30, 136, 98, .08);
  --verde-borde:  rgba(30, 136, 98, .24);

  --federal:      #B0522C;
  --estatal:      #C68A28;
  --ss:           #4E7288;
  --medicare:     #7E6395;

  --hora-fondo:   #16231D;
  --hora-texto:   #F8FAF5;
  --hora-suave:   rgba(248, 250, 245, .70);

  --sombra:       0 1px 0 rgba(22,35,29,.04), 0 14px 34px -22px rgba(22,35,29,.35);

  --radio: 14px;
  --ancho: 640px;

  --display: 'Zilla Slab', Georgia, serif;
  --cuerpo:  'IBM Plex Sans', system-ui, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, monospace;
}

/* Modo oscuro por preferencia del sistema, salvo que se haya elegido claro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --papel:        #101815;
    --papel-alto:   #18221E;
    --papel-linea:  #2B3A33;
    --trama:        rgba(111, 217, 168, .035);

    --tinta:        #E7EDE7;
    --tinta-suave:  #93A399;

    --verde:        #56C494;
    --verde-vivo:   #74DDAE;
    --verde-tenue:  rgba(86, 196, 148, .10);
    --verde-borde:  rgba(86, 196, 148, .28);

    --federal:      #E08055;
    --estatal:      #E5B155;
    --ss:           #7BA6C0;
    --medicare:     #AE92C6;

    --hora-fondo:   #0A100D;
    --hora-texto:   #E7EDE7;
    --hora-suave:   rgba(231, 237, 231, .68);

    --sombra:       0 1px 0 rgba(0,0,0,.2), 0 14px 34px -22px rgba(0,0,0,.8);
  }
}

/* Y el interruptor manda en los dos sentidos. */
:root[data-tema="oscuro"] {
  --papel:        #101815;
  --papel-alto:   #18221E;
  --papel-linea:  #2B3A33;
  --trama:        rgba(111, 217, 168, .035);

  --tinta:        #E7EDE7;
  --tinta-suave:  #93A399;

  --verde:        #56C494;
  --verde-vivo:   #74DDAE;
  --verde-tenue:  rgba(86, 196, 148, .10);
  --verde-borde:  rgba(86, 196, 148, .28);

  --federal:      #E08055;
  --estatal:      #E5B155;
  --ss:           #7BA6C0;
  --medicare:     #AE92C6;

  --hora-fondo:   #0A100D;
  --hora-texto:   #E7EDE7;
  --hora-suave:   rgba(231, 237, 231, .68);

  --sombra:       0 1px 0 rgba(0,0,0,.2), 0 14px 34px -22px rgba(0,0,0,.8);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papel);
  background-image: repeating-linear-gradient(
    -45deg, var(--trama) 0 1px, transparent 1px 7px);
  color: var(--tinta);
  font-family: var(--cuerpo);
  font-size: 17px;
  line-height: 1.55;
  transition: background-color .2s ease, color .2s ease;
}

main { max-width: var(--ancho); margin: 0 auto; padding: 0 20px 64px; }

/* ── Cinta ───────────────────────────────────────────────────────────────── */

.cinta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 14px 20px;
}

.cinta__marca {
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -.01em;
  color: var(--verde);
  text-decoration: none;
  border-radius: 8px;
  padding: 2px 4px;
  margin-left: -4px;
  transition: background .16s ease;
}
.cinta__marca:hover { background: var(--verde-tenue); }
.cinta__marca:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }

.cinta__derecha { display: flex; align-items: center; gap: 10px; }

.cinta__ano {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--tinta-suave);
  border: 1px solid var(--papel-linea);
  border-radius: 999px;
  padding: 3px 10px;
}

.btn-tema {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: var(--papel-alto);
  border: 1px solid var(--papel-linea);
  border-radius: 999px;
  cursor: pointer;
  padding: 0;
  transition: border-color .16s ease;
}

.btn-tema:hover { border-color: var(--verde); }

/* Luna en claro, sol en oscuro: el icono enseña a dónde vas. */
.btn-tema__icono {
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--tinta-suave);
  box-shadow: inset -4px -3px 0 0 var(--papel-alto);
  transition: box-shadow .2s ease, background .2s ease;
}

:root[data-tema="oscuro"] .btn-tema__icono,
.btn-tema__icono.sol {
  background: var(--estatal);
  box-shadow: 0 0 0 2px var(--papel-alto), 0 0 0 3.5px var(--estatal);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .btn-tema__icono {
    background: var(--estatal);
    box-shadow: 0 0 0 2px var(--papel-alto), 0 0 0 3.5px var(--estatal);
  }
}

/* ── Portada ─────────────────────────────────────────────────────────────── */

.portada { padding: 20px 0 32px; }

.eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--verde);
  margin: 0 0 14px;
}

h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.4rem, 9vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -.025em;
  margin: 0 0 16px;
}

h1 em {
  font-style: normal;
  color: var(--verde);
  background-image: linear-gradient(transparent 74%, var(--verde-borde) 74%);
}

.entrada { margin: 0; max-width: 34em; color: var(--tinta-suave); font-size: 1.02rem; }

/* ── Formularios ─────────────────────────────────────────────────────────── */

.formulario {
  display: grid;
  gap: 18px;
  background: var(--papel-alto);
  border: 1px solid var(--papel-linea);
  border-radius: var(--radio);
  padding: 20px;
  margin-bottom: 16px;
}

.grupo {
  margin: 0;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--tinta-suave);
}

.fila-doble { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fila-doble > .campo { min-width: 0; }

.campo { display: grid; gap: 7px; min-width: 0; align-content: start; }

.campo label { font-size: 13.5px; font-weight: 600; }

.pista { font-weight: 400; color: var(--tinta-suave); }

.ayuda {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--tinta-suave);
}

input[type="number"], select {
  width: 100%;
  font-family: var(--mono);
  font-size: 17px;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--papel-linea);
  border-radius: 10px;
  padding: 11px 12px;
  appearance: none;
  -moz-appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

select {
  font-family: var(--cuerpo);
  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' stroke='%23888' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
  max-width: 100%;
  text-overflow: ellipsis;
}

input:focus-visible, select:focus-visible,
.segmentos button:focus-visible, .btn-tema:focus-visible {
  outline: 2px solid var(--verde-vivo);
  outline-offset: 2px;
}

.entrada-dinero { position: relative; }

.entrada-dinero .signo {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 17px;
  color: var(--tinta-suave);
  pointer-events: none;
}

.entrada-dinero input { padding-left: 28px; }

.campo--dinero input { font-size: 22px; font-weight: 500; padding-block: 12px; }

.segmentos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  background: var(--papel);
  border: 1px solid var(--papel-linea);
  border-radius: 10px;
  padding: 5px;
}

.segmentos button {
  font-family: var(--cuerpo);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--tinta-suave);
  background: transparent;
  border: 0;
  border-radius: 7px;
  padding: 9px 4px;
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}

.segmentos button:hover { color: var(--tinta); }
.segmentos button.activo { background: var(--verde); color: var(--papel-alto); font-weight: 600; }

:root[data-tema="oscuro"] .segmentos button.activo { color: #0A100D; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .segmentos button.activo { color: #0A100D; }
}

.aviso-estado {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--federal);
  background: color-mix(in srgb, var(--federal) 8%, transparent);
  border-left: 3px solid var(--federal);
  border-radius: 0 8px 8px 0;
  padding: 10px 12px;
}

/* ── El talón ────────────────────────────────────────────────────────────── */

.resultado { margin-top: 26px; display: grid; gap: 16px; }

.talon {
  position: relative;
  background: var(--papel-alto);
  border: 1px solid var(--papel-linea);
  border-radius: var(--radio);
  padding: 30px 20px 20px;
  box-shadow: var(--sombra);
}

.talon__perforado {
  position: absolute;
  top: 13px; left: 16px; right: 16px;
  height: 2px;
  background-image: radial-gradient(circle, var(--papel-linea) 1px, transparent 1.2px);
  background-size: 9px 2px;
}

.talon__etiqueta, .anual__etiqueta, .hora-real__etiqueta {
  margin: 0 0 2px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.talon__neto {
  margin: 0;
  font-family: var(--mono);
  font-weight: 600;
  font-size: clamp(2.7rem, 12vw, 4rem);
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--verde);
  font-variant-numeric: tabular-nums;
}

.talon__neto .moneda, .anual__cifra .moneda {
  font-size: .48em;
  vertical-align: .42em;
  margin-right: .06em;
  color: var(--verde-vivo);
}

.talon__periodo { margin: 6px 0 22px; color: var(--tinta-suave); font-size: 15px; }

.barra {
  display: flex;
  height: 15px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--papel-linea);
  margin-bottom: 20px;
}

.barra span { display: block; height: 100%; transition: width .42s cubic-bezier(.22,.68,.32,1); }

.desglose, .creditos { list-style: none; margin: 0; padding: 0; }

.desglose li {
  display: grid;
  grid-template-columns: 11px 1fr auto;
  align-items: center;
  gap: 11px;
  padding: 11px 0;
  border-top: 1px solid var(--papel-linea);
}

.desglose li:first-child { border-top: 0; }

.punto { width: 11px; height: 11px; border-radius: 3px; }

.desglose .nombre, .creditos .nombre { font-size: 15px; }

.desglose .porcentaje, .creditos .detalle {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--tinta-suave);
  margin-top: 1px;
}

.desglose .cifra, .creditos .cifra {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.desglose li.es-neto .nombre { font-weight: 600; }
.desglose li.es-neto .cifra { color: var(--verde); font-weight: 600; }

.talon__pie {
  margin-top: 18px;
  padding-top: 15px;
  border-top: 2px dashed var(--papel-linea);
  text-align: center;
}

.talon__pie p { margin: 0; font-size: 15px; color: var(--tinta-suave); }
.talon__pie strong { font-family: var(--mono); color: var(--verde); font-size: 18px; }

/* ── Hora real ───────────────────────────────────────────────────────────── */

.hora-real {
  background: var(--hora-fondo);
  color: var(--hora-texto);
  border: 1px solid var(--papel-linea);
  border-radius: var(--radio);
  padding: 22px 20px;
  text-align: center;
}

.hora-real__etiqueta { color: var(--hora-suave); }

.hora-real__cifra {
  margin: 0;
  font-family: var(--mono);
  font-weight: 600;
  font-size: clamp(2.1rem, 8vw, 2.7rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.hora-real__cifra .moneda { font-size: .5em; vertical-align: .4em; color: var(--hora-suave); }

.hora-real__nota {
  margin: 8px auto 0;
  max-width: 30em;
  font-size: 14px;
  color: var(--hora-suave);
}

/* ── El año: créditos ────────────────────────────────────────────────────── */

.anual {
  background: var(--verde-tenue);
  border: 1px solid var(--verde-borde);
  border-radius: var(--radio);
  padding: 24px 20px 20px;
}

.anual--debe { background: color-mix(in srgb, var(--federal) 7%, transparent); }
.anual--debe { border-color: color-mix(in srgb, var(--federal) 26%, transparent); }
.anual--debe .anual__cifra, .anual--debe .anual__cifra .moneda { color: var(--federal); }

.anual__cifra {
  margin: 0;
  font-family: var(--mono);
  font-weight: 600;
  font-size: clamp(2.4rem, 10vw, 3.2rem);
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--verde);
  font-variant-numeric: tabular-nums;
}

.anual__nota { margin: 8px 0 18px; font-size: 15px; color: var(--tinta-suave); }

.creditos li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 11px;
  padding: 10px 0;
  border-top: 1px solid var(--verde-borde);
}

.anual--debe .creditos li { border-top-color: color-mix(in srgb, var(--federal) 22%, transparent); }

.anual__aviso {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 2px dashed var(--verde-borde);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--tinta-suave);
}

.anual--debe .anual__aviso { border-top-color: color-mix(in srgb, var(--federal) 22%, transparent); }

/* ── Horas extras ────────────────────────────────────────────────────────── */

.extras {
  background: var(--verde-tenue);
  border: 1px solid var(--verde-borde);
  border-radius: var(--radio);
  padding: 18px 20px;
}

.extras__titulo {
  margin: 0 0 6px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 18px;
  color: var(--verde);
}

.extras__texto { margin: 0; font-size: 15px; }
.extras__texto strong { font-family: var(--mono); font-weight: 600; }

/* ── Honestidad ──────────────────────────────────────────────────────────── */

.honestidad {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--papel-linea);
  color: var(--tinta-suave);
  font-size: 14.5px;
}

.honestidad h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 19px;
  color: var(--tinta);
  margin: 0 0 12px;
}

.honestidad p { margin: 0 0 11px; }
.honestidad strong { color: var(--tinta); }
.honestidad__fuentes { font-size: 13px; padding-top: 8px; }

/* ── Pie ─────────────────────────────────────────────────────────────────── */

/* ---- Páginas por estado ---- */
.migas {
  max-width: var(--ancho); margin: 0 auto; padding: 18px 24px 0;
  font-size: 13px; color: var(--tinta-suave);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.migas a { color: var(--verde); text-decoration: none; }
.migas a:hover { text-decoration: underline; }

/* El botón de volver: en una página de estado hay que poder salir a la
   portada sin depender del «atrás» del navegador (la gente llega aquí desde
   Google, no desde el índice, así que no tiene atrás al que volver). */
.migas__volver {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px 7px 11px;
  border: 1px solid var(--papel-linea); border-radius: 999px;
  background: var(--papel-alto);
  font-size: 13px; font-weight: 600; line-height: 1;
  color: var(--verde); white-space: nowrap;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.migas__volver:hover {
  background: var(--verde-tenue); border-color: var(--verde-borde);
  text-decoration: none; transform: translateX(-2px);
}
.migas__volver:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
.migas__volver .flecha { font-size: 15px; line-height: 1; }
.migas__ruta { display: inline-flex; align-items: center; gap: 6px; }

@media (max-width: 420px) { .migas__ruta { display: none; } }
.migas__ruta { color: var(--tinta-suave); }

.estado-info { max-width: var(--ancho); margin: 0 auto 44px; padding: 0 24px; }
.estado-info h2 {
  font-family: var(--display); font-size: 22px; margin: 36px 0 12px;
  padding-top: 22px; border-top: 1px solid var(--papel-linea);
}
.estado-info h3 { font-family: var(--display); font-size: 18px; margin: 28px 0 8px; }
.estado-info p { margin: 0 0 12px; font-size: 15px; line-height: 1.62; }
.aviso-estado {
  background: var(--verde-tenue); border-left: 3px solid var(--verde);
  border-radius: 0 8px 8px 0; padding: 12px 14px; font-size: 14px;
}

/* Las tablas se desbordan solas en el móvil; el que scrollea es su envoltura,
   nunca la página. */
.tabla-envoltura { overflow-x: auto; margin: 16px 0 8px; }
.tabla-envoltura table {
  width: 100%; min-width: 460px; border-collapse: collapse;
  font-size: 14px; font-variant-numeric: tabular-nums;
}
/* La nota va FUERA del contenedor que scrollea: dentro, en el móvil su texto se
   quedaba escondido a la derecha con el resto de la tabla. */
.tabla-nota {
  margin: 10px 0 0; font-size: 13px; color: var(--tinta-suave); line-height: 1.5;
}
.tabla-envoltura th, .tabla-envoltura td {
  padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--papel-linea);
}
.tabla-envoltura thead th {
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--tinta-suave); font-weight: 600;
}
.tabla-envoltura td:not(:first-child) { font-family: var(--mono); }
.tabla-envoltura tbody tr:hover { background: var(--verde-tenue); }
.tabla-sueldos td:nth-child(4) { color: var(--verde); }

/* ---- Índice de estados ---- */
.estados { max-width: var(--ancho); margin: 0 auto 44px; padding: 0 24px; }
.estados h2 { font-family: var(--display); font-size: 21px; margin: 0 0 6px; }
.estados > p { margin: 0 0 16px; font-size: 15px; color: var(--tinta-suave); }
.estados__lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2px 14px;
}
.estados__lista a, .estados__yo {
  display: block; padding: 5px 0; font-size: 14px; text-decoration: none;
  border-bottom: 1px solid transparent;
}
.estados__lista a { color: var(--verde); }
.estados__lista a:hover { border-bottom-color: var(--verde-borde); }
/* El estado en el que ya estás no se enlaza a sí mismo. */
.estados__yo { color: var(--tinta-suave); font-weight: 600; }

/* ---- Instalar como app ---- */
.instalar {
  max-width: var(--ancho); margin: 0 auto 44px; padding: 26px 24px;
  background: var(--papel-alto); border: 1px solid var(--papel-linea);
  border-radius: var(--radio); box-shadow: var(--sombra); text-align: center;
}
.instalar h2 { margin: 0 0 8px; font-family: var(--display); font-size: 21px; }
.instalar p { margin: 0 auto 18px; max-width: 46ch; color: var(--tinta-suave); font-size: 15px; }
/* Corto y centrado, no a todo el ancho: a todo el ancho parece el botón de una tienda. */
.instalar__btn {
  font: 600 15px/1 var(--cuerpo); color: var(--papel-alto); background: var(--verde);
  border: 0; border-radius: 999px; padding: 12px 26px; cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.instalar__btn:hover { background: var(--verde-vivo); transform: translateY(-1px); }
.instalar__btn:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; }
/* `hidden` es un atributo, y cualquier `display` del CSS lo pisa. */
.instalar__btn[hidden] { display: none; }
.instalar__vias {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center;
  font-size: 14px; color: var(--tinta-suave);
}
.instalar__tecla {
  font-family: var(--mono); background: var(--verde-tenue);
  border: 1px solid var(--verde-borde); border-radius: 5px; padding: 1px 6px;
}
@media (max-width: 520px) { .instalar__vias { flex-direction: column; align-items: center; gap: 8px; } }

.pie { text-align: center; padding: 0 20px 40px; font-size: 14px; color: var(--tinta-suave); }
.pie p { margin: 0; }
.credito { color: inherit; text-decoration: none; }
.firma { color: #C9A84C; font-weight: 600; }
/* El nombre va dorado siempre, no solo al pasar el cursor: el hover solo aclara. */
.credito:hover .firma, .credito:focus-visible .firma { color: #E8CE7A; }
.credito:focus-visible { outline: 2px solid #C9A84C; outline-offset: 3px; border-radius: 4px; }

/* ── Ajustes ─────────────────────────────────────────────────────────────── */

@media (min-width: 620px) {
  .talon  { padding: 34px 28px 24px; }
  .formulario, .hora-real, .anual { padding: 24px; }
  .anual { padding-top: 26px; }
}

@media (max-width: 380px) {
  .fila-doble { grid-template-columns: 1fr; }
  .segmentos  { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}