/* =====================================================================
 * styles.css — Calculadora de Sueldo Líquido Chile
 * Mobile-first, sin dependencias externas, optimizado para velocidad.
 * ===================================================================== */

:root {
  --azul: #1565c0;
  --azul-osc: #0d47a1;
  --azul-claro: #e8f1fc;
  --verde: #1b9e57;
  --verde-osc: #157a44;
  --verde-bg: #e7f7ee;
  --verde-borde: #b6e3c9;
  --bg: #eef1f6;
  --tarjeta: #ffffff;
  --borde: #e2e7ee;
  --texto: #1a2433;
  --texto-suave: #5d6b7e;
  --rojo: #d3413a;
  --amarillo-bg: #fff7e3;
  --amarillo-borde: #f0dca0;
  --amarillo-tx: #6b551c;
  --radio: 16px;
  --radio-sm: 10px;
  --sombra: 0 1px 3px rgba(16, 36, 64, .06), 0 6px 20px rgba(16, 36, 64, .06);
  --sombra-sm: 0 1px 2px rgba(16, 36, 64, .08);
  --max: 780px;
}

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

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--texto);
  background: var(--bg);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

.contenedor { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 18px; }

a { color: var(--azul); }

/* ---- Encabezado (sticky) ---- */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: linear-gradient(135deg, var(--azul) 0%, var(--azul-osc) 100%);
  color: #fff;
  padding: 14px 0;
  box-shadow: 0 2px 14px rgba(13, 71, 161, .25);
}
.cabecera a { color: #fff; text-decoration: none; }
.cabecera .marca { font-weight: 800; font-size: 1.15rem; letter-spacing: -.2px; display: inline-flex; align-items: center; gap: 8px; }
.cabecera nav { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .92rem; }
.cabecera nav a { opacity: .92; padding-bottom: 2px; border-bottom: 2px solid transparent; transition: border-color .15s; }
.cabecera nav a:hover { opacity: 1; border-bottom-color: rgba(255, 255, 255, .8); }

/* ---- Titulares ---- */
h1 { font-size: 1.7rem; line-height: 1.2; margin: 26px 0 10px; letter-spacing: -.5px; font-weight: 800; }
h2 { font-size: 1.32rem; margin: 34px 0 12px; letter-spacing: -.3px; font-weight: 700; }
h3 { font-size: 1.1rem; margin: 22px 0 8px; }
.subtitulo { color: var(--texto-suave); margin: 0 0 22px; font-size: 1.05rem; }

/* ---- Tarjetas ---- */
.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 22px;
  margin: 20px 0;
}

/* ---- Formulario ---- */
.campo { margin-bottom: 18px; }
label { display: block; font-weight: 650; margin-bottom: 7px; font-size: .95rem; }
.ayuda { font-weight: 400; color: var(--texto-suave); font-size: .85rem; }

input[type="text"], input[type="number"], select {
  width: 100%;
  padding: 13px 15px;
  font-size: 1.05rem;
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-sm);
  background: #fff;
  color: var(--texto);
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none; appearance: none;
}
select {
  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 fill='%235d6b7e' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; padding-right: 38px;
}
input:focus, select:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(21, 101, 192, .15); }

.fila { display: flex; gap: 14px; flex-wrap: wrap; }
.fila > * { flex: 1 1 200px; }

.radios { display: flex; gap: 8px; flex-wrap: wrap; }
.radios label {
  flex: 1 1 130px; display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 1.5px solid var(--borde); border-radius: var(--radio-sm); padding: 11px 12px;
  font-weight: 600; font-size: .95rem; cursor: pointer; margin: 0; text-align: center;
  transition: border-color .15s, background .15s, color .15s;
}
.radios input { width: auto; accent-color: var(--azul); }
.radios label:has(input:checked) { border-color: var(--azul); background: var(--azul-claro); color: var(--azul-osc); }

label.check { display: flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; padding: 4px 0; }
label.check input { width: auto; width: 18px; height: 18px; accent-color: var(--azul); }

.boton {
  display: inline-block; width: 100%;
  background: linear-gradient(135deg, var(--azul) 0%, var(--azul-osc) 100%);
  color: #fff; border: 0;
  padding: 15px 18px; font-size: 1.1rem; font-weight: 700;
  border-radius: var(--radio-sm); cursor: pointer;
  box-shadow: 0 4px 14px rgba(21, 101, 192, .3);
  transition: transform .12s, box-shadow .12s, filter .12s;
}
.boton:hover { filter: brightness(1.05); box-shadow: 0 6px 18px rgba(21, 101, 192, .38); }
.boton:active { transform: translateY(1px); }

/* ---- Resultado destacado ---- */
.resultado-grande {
  text-align: center;
  background: linear-gradient(160deg, var(--verde-bg) 0%, #f3fbf6 100%);
  border: 1px solid var(--verde-borde);
  border-radius: var(--radio); padding: 24px 20px; margin: 22px 0;
}
.resultado-grande .etiqueta { color: var(--texto-suave); font-size: .95rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.resultado-grande .monto { color: var(--verde-osc); font-size: 2.6rem; font-weight: 900; line-height: 1.05; margin: 6px 0; letter-spacing: -1px; }
.resultado-grande .nota { color: var(--texto-suave); font-size: .9rem; }

/* ---- Tabla de desglose ---- */
table.desglose { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: .98rem; }
table.desglose th, table.desglose td { text-align: left; padding: 12px 6px; border-bottom: 1px solid var(--borde); }
table.desglose td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
table.desglose tr.descuento td.num { color: var(--rojo); }
table.desglose tr.suma td.num { color: var(--verde-osc); }
table.desglose tr.bruto td { font-weight: 700; }
table.desglose tr.total td { font-weight: 800; font-size: 1.12rem; border-top: 2px solid var(--texto); border-bottom: 0; padding-top: 14px; color: var(--verde-osc); }
table.desglose .menor { color: var(--texto-suave); font-size: .82rem; font-weight: 400; }
table.desglose tr:hover td { background: #fafbfd; }

/* ---- Contenido / artículos ---- */
.contenido p, .contenido li { color: var(--texto); }
.contenido ul, .contenido ol { padding-left: 22px; }
.contenido li { margin: 6px 0; }
.contenido a { color: var(--azul); text-underline-offset: 2px; }
.contenido h2 { padding-top: 4px; }

/* ---- FAQ ---- */
details { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-sm); padding: 2px 18px; margin: 10px 0; box-shadow: var(--sombra-sm); }
details summary { cursor: pointer; font-weight: 650; padding: 14px 0; list-style: none; position: relative; padding-right: 28px; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; position: absolute; right: 2px; top: 11px; font-size: 1.4rem; color: var(--azul); font-weight: 400; transition: transform .2s; }
details[open] summary::after { transform: rotate(45deg); }
details[open] summary { border-bottom: 1px solid var(--borde); }
details p { margin: 12px 0; color: var(--texto-suave); }

/* ---- Anuncios (AdSense) ---- */
.anuncio {
  margin: 26px 0; min-height: 90px;
  display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(45deg, #f0f3f7, #f0f3f7 10px, #eaeef3 10px, #eaeef3 20px);
  border: 1px dashed #cdd5df; border-radius: var(--radio-sm);
  color: #9aa6b2; font-size: .78rem; letter-spacing: .5px;
}

/* ---- Chips de enlaces ---- */
.otros-montos { display: flex; flex-wrap: wrap; gap: 9px; }
.otros-montos a {
  background: #fff; border: 1.5px solid var(--borde); border-radius: 999px;
  padding: 8px 15px; font-size: .9rem; text-decoration: none; color: var(--azul); font-weight: 600;
  box-shadow: var(--sombra-sm); transition: transform .12s, border-color .12s, background .12s;
}
.otros-montos a:hover { background: var(--azul-claro); border-color: var(--azul); transform: translateY(-1px); }

/* ---- Aviso / disclaimer ---- */
.aviso { background: var(--amarillo-bg); border: 1px solid var(--amarillo-borde); border-left: 4px solid #e0b94e; border-radius: var(--radio-sm); padding: 14px 16px; font-size: .92rem; color: var(--amarillo-tx); margin: 18px 0; }

/* ---- Pie ---- */
footer { background: var(--tarjeta); border-top: 1px solid var(--borde); margin-top: 48px; padding: 30px 0; color: var(--texto-suave); font-size: .88rem; }
footer a { color: var(--azul); }
footer .fuentes { font-size: .82rem; margin-top: 10px; }

/* ---- Utilidades ---- */
.centro { text-align: center; }
.mt0 { margin-top: 0; }
.small { font-size: .85rem; color: var(--texto-suave); }

@media (min-width: 640px) {
  body { font-size: 18px; }
  h1 { font-size: 2.1rem; }
  h2 { font-size: 1.45rem; }
  .resultado-grande .monto { font-size: 3rem; }
  .tarjeta { padding: 26px; }
}