/* =========================================================
   EuroCuenta — estilo común
   Grafito y esmeralda: un único color de acento en toda la web,
   el mismo verde del logo.
   ========================================================= */
:root {
  --tinta: #171c1f;      /* grafito: cabecera, banda y pie */
  --tinta-2: #242b2f;
  --papel: #f2f4f3;
  --tarjeta: #ffffff;
  --texto: #1b2124;
  --suave: #5c676b;
  --borde: #dde2e0;

  --esmeralda: #14745a;
  --color: var(--esmeralda);
  --color-claro: #2fbf8f;   /* verde sobre fondo oscuro */
  --color-suave: #e4f1ec;

  --radio-g: 18px;
  --radio-m: 12px;
  --radio-p: 10px;
  --sombra: 0 1px 2px rgba(23, 28, 31, .05), 0 10px 28px -14px rgba(23, 28, 31, .25);

  --f-titulo: "Bricolage Grotesque", system-ui, sans-serif;
  --f-texto: "Instrument Sans", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tinta: #0e1214;
    --tinta-2: #1a2023;
    --papel: #121618;
    --tarjeta: #1b2124;
    --texto: #e8ecea;
    --suave: #9fa9a6;
    --borde: #2c3437;
    --color: #2fa57f;
    --color-suave: #17302a;
    --sombra: 0 10px 28px -14px rgba(0, 0, 0, .7);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f-texto);
  font-size: 1.0625rem;
  background: var(--papel);
  color: var(--texto);
  line-height: 1.6;
}
a { color: var(--color); }
:focus-visible { outline: 3px solid var(--color); outline-offset: 2px; }
.contenedor { max-width: 880px; margin: 0 auto; padding: 0 16px; }

/* ---------- Cabecera ---------- */
header.sitio { background: var(--tinta); color: #fff; }
header.sitio .contenedor { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-titulo); font-weight: 800; font-size: 1.25rem;
  text-decoration: none; color: #fff; letter-spacing: -.01em;
}
.logo::before {
  content: ""; display: block; flex-shrink: 0;
  width: 34px; height: 34px;
  background: url("/img/logo.svg") center / contain no-repeat;
}
.logo span { color: inherit; font-weight: 500; opacity: .75; }
nav a { margin-left: 20px; text-decoration: none; color: rgba(255,255,255,.75); font-size: .95rem; }
nav a:hover { color: #fff; }

/* ---------- Banda de título: grafito liso ---------- */
header.sitio { border-bottom: 1px solid rgba(255,255,255,.07); }
.banda {
  position: relative; overflow: hidden;
  background: var(--tinta);
  color: #fff;
  padding: 26px 0 92px;
}
.banda .migas { font-size: .85rem; color: rgba(255,255,255,.6); margin: 0 0 6px; }
.banda .migas a { color: rgba(255,255,255,.8); }
.banda h1 {
  font-family: var(--f-titulo); font-weight: 800;
  font-size: clamp(1.8rem, 5vw, 2.7rem); line-height: 1.08; letter-spacing: -.02em;
  margin: 6px 0 10px; max-width: 18ch;
}
.banda .subtitulo { color: rgba(255,255,255,.72); margin: 0; max-width: 56ch; }
.banda + .contenedor { margin-top: -66px; position: relative; }

/* Portada */
.portada { padding: 46px 0 104px; }
.portada h1 { font-size: clamp(2.1rem, 7vw, 3.5rem); max-width: 14ch; }
.portada .subtitulo { font-size: 1.15rem; }
.billetes { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.billete {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
  color: #fff; text-decoration: none; font-weight: 600; font-size: .95rem;
  transition: background .2s;
}
.billete:hover { background: rgba(255,255,255,.16); border-color: var(--color-claro); }
.billete i { width: 8px; height: 8px; border-radius: 50%; background: var(--color-claro) !important; }
.billete { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }

/* ---------- Títulos de contenido ---------- */
h2 {
  font-family: var(--f-titulo); font-weight: 700; letter-spacing: -.01em;
  font-size: 1.5rem; line-height: 1.2; margin: 44px 0 12px;
}
.migas { font-size: .85rem; color: var(--suave); }

/* ---------- Tarjeta del formulario ---------- */
.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio-m);
  padding: 22px;
  margin: 20px 0;
}
form.tarjeta {
  border-radius: var(--radio-g);
  box-shadow: var(--sombra);
  padding: 26px;
  margin-top: 0;
}
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.campo label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 6px; }
.campo input, .campo select {
  width: 100%; padding: 13px 14px; font: inherit; font-size: 1.05rem;
  border: 1.5px solid var(--borde); border-radius: var(--radio-p);
  background: var(--papel); color: var(--texto);
  transition: border-color .15s, background .15s;
}
.campo input:focus, .campo select:focus { outline: none; border-color: var(--color); background: var(--tarjeta); }
.campo input[type="checkbox"] { width: auto; accent-color: var(--color); }
.ayuda { font-size: .82rem; color: var(--suave); margin-top: 5px; }
.boton {
  margin-top: 20px; width: 100%; padding: 15px; font: inherit; font-size: 1.08rem; font-weight: 700;
  border: none; border-radius: var(--radio-p); background: var(--color); color: #fff; cursor: pointer;
  transition: filter .15s, transform .1s;
}
.boton:hover { filter: brightness(1.08); }
.boton:active { transform: scale(.99); }

/* ---------- Resultado: estilo nómina / recibo ---------- */
.resultado { display: none; }
.resultado.visible { display: block; animation: aparecer .35s ease-out; }
@keyframes aparecer { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
section.resultado {
  border-radius: var(--radio-g);
  box-shadow: var(--sombra);
  padding: 0; overflow: hidden;
}
.cifra-principal {
  text-align: center; padding: 26px 20px 22px;
  background: var(--color-suave);
}
.cifra-principal .etiqueta { color: var(--suave); font-size: .95rem; }
.cifra-principal .valor {
  font-family: var(--f-titulo); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(2.4rem, 9vw, 3.4rem); line-height: 1.1; color: var(--color);
  font-variant-numeric: tabular-nums; margin: 4px 0;
}
.desglose { width: calc(100% - 44px); margin: 8px 22px 6px; border-collapse: collapse; }
.desglose td { padding: 11px 2px; border-bottom: 1px dashed var(--borde); }
.desglose td:last-child { text-align: right; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.desglose tr.total td { font-weight: 800; border-bottom: none; font-size: 1.1rem; }
section.resultado > details { margin: 0 22px 16px; }

/* ---------- Anuncios ---------- */
.anuncio {
  margin: 28px 0; min-height: 100px;
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--borde); border-radius: var(--radio-p);
  color: var(--suave); font-size: .8rem;
}

/* ---------- Contenido ---------- */
main p, main li { max-width: 70ch; }
.aviso {
  font-size: .88rem; color: var(--suave); background: var(--tarjeta);
  border-left: 4px solid var(--color); padding: 12px 16px; border-radius: 0 var(--radio-p) var(--radio-p) 0;
}
table.datos { width: 100%; border-collapse: collapse; font-size: .95rem; background: var(--tarjeta); border-radius: var(--radio-m); overflow: hidden; border: 1px solid var(--borde); }
table.datos th { background: var(--color-suave); text-align: left; font-weight: 700; }
table.datos th, table.datos td { padding: 10px 12px; border-bottom: 1px solid var(--borde); text-align: left; font-variant-numeric: tabular-nums; }
table.datos tr:last-child td { border-bottom: none; }
details { border-bottom: 1px solid var(--borde); padding: 14px 0; }
summary { font-weight: 600; cursor: pointer; }
details[open] summary { color: var(--color); }

/* ---------- Tarjetas de herramientas ---------- */
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.herramienta {
  --c: var(--color);
  position: relative; display: block; text-decoration: none; color: var(--texto);
  padding: 20px 20px 20px 24px; margin: 0; overflow: hidden;
  transition: border-color .2s, transform .2s;
}
.herramienta::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); }
.herramienta strong { display: block; font-family: var(--f-titulo); font-size: 1.15rem; margin-bottom: 4px; }
.herramienta span { color: var(--suave); font-size: .92rem; }
a.herramienta:hover { border-color: var(--c); transform: translateY(-2px); }
.herramienta.proximamente { pointer-events: none; background: transparent; border-style: dashed; }
.herramienta.proximamente::before { background: var(--borde); }
.herramienta.proximamente strong { color: var(--suave); }

/* Páginas sin banda (legales) */
main > h1:first-child, main > h1 {
  font-family: var(--f-titulo); font-weight: 800; letter-spacing: -.02em; font-size: 2rem; line-height: 1.15;
}

/* ---------- Pie ---------- */
footer.sitio { margin-top: 60px; padding: 30px 0; background: var(--tinta); color: rgba(255,255,255,.65); font-size: .88rem; }
footer.sitio a { color: rgba(255,255,255,.8); margin-right: 16px; }
footer.sitio a:hover { color: #fff; }

@media (max-width: 600px) {
  .campos { grid-template-columns: 1fr; }
  nav a { margin-left: 14px; font-size: .9rem; }
  form.tarjeta { padding: 20px; }
  .banda { padding-bottom: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* La portada no solapa el contenido */
.banda.portada { padding-bottom: 56px; }
.banda.portada + .contenedor { margin-top: 0; }
nav { white-space: nowrap; }
@media (max-width: 600px) {
  nav a:first-child { display: none; }
  .logo { font-size: 1.1rem; }
}

/* Anuncios laterales: solo en pantallas anchas de ordenador */
.anuncio-lateral { display: none; }
@media (min-width: 1300px) {
  .anuncio-lateral {
    display: flex; align-items: center; justify-content: center;
    position: fixed; top: 110px; width: 160px; height: 600px;
    border: 1px dashed var(--borde); border-radius: var(--radio-p);
    color: var(--suave); font-size: .8rem; background: var(--papel);
  }
  .anuncio-lateral.izq { left: calc(50% - 440px - 200px); }
  .anuncio-lateral.der { right: calc(50% - 440px - 200px); }
}

/* Huecos de anuncio ocultos hasta que tengan código de AdSense dentro.
   En cuanto pegues un <ins class="adsbygoogle"> en un hueco, aparece solo. */
.anuncio:not(:has(ins)),
.anuncio-lateral:not(:has(ins)) { display: none !important; }
.anuncio:has(ins), .anuncio-lateral:has(ins) {
  flex-direction: column; gap: 4px; border: none; min-height: 0;
}
.anuncio ins, .anuncio-lateral ins { width: 100%; }

/* =========================================================
   Ajustes para móvil (no cambian nada en ordenador)
   ========================================================= */
.casilla { display: flex; align-items: flex-start; gap: 10px; font-weight: 400 !important; cursor: pointer; }
.casilla input { width: 22px !important; height: 22px; margin: 1px 0 0; flex-shrink: 0; }

@media (max-width: 600px) {
  body { font-size: 1rem; }
  .contenedor { padding: 0 14px; }

  /* Zonas táctiles de al menos 44 px */
  nav a { display: inline-block; padding: 12px 0; }
  footer.sitio a { display: inline-block; padding: 12px 0; margin-right: 18px; }
  summary { padding: 6px 0; }
  details { padding: 10px 0; }
  .billete { padding: 12px 16px; }

  /* Formulario y resultado más compactos */
  .banda { padding-top: 20px; }
  form.tarjeta { padding: 18px 16px 20px; border-radius: 18px; }
  .boton { padding: 16px; }
  section.resultado { border-radius: 18px; }
  .desglose { width: calc(100% - 32px); margin: 6px 16px; }
  section.resultado > details { margin: 0 16px 12px; }

  /* Tablas: texto algo menor para que quepan */
  table.datos { font-size: .86rem; }
  table.datos th, table.datos td { padding: 8px 8px; }

  /* Tablas legales: cada fila se convierte en una ficha */
  table.apilable, table.apilable tbody, table.apilable tr, table.apilable td { display: block; width: 100%; }
  table.apilable tr:first-child { display: none; }
  table.apilable tr { border-bottom: 1px solid var(--borde); padding: 6px 0; }
  table.apilable tr:last-child { border-bottom: none; }
  table.apilable td { border: none; padding: 4px 12px; }
  table.apilable td::before { content: attr(data-label); display: block; font-size: .78rem; font-weight: 700; color: var(--suave); }

  /* Anuncios en móvil: a todo el ancho de la pantalla y con espacio
     reservado para que el contenido no salte al cargar el anuncio */
  .anuncio:has(ins) {
    margin-left: -14px; margin-right: -14px; border-radius: 0;
    min-height: 280px; margin-top: 24px; margin-bottom: 24px;
  }
}
@media (max-width: 360px) {
  .banda h1 { font-size: 1.65rem; }
  .cifra-principal .valor { font-size: 2.2rem; }
  table.datos { font-size: .8rem; }
  table.datos th, table.datos td { padding: 7px 6px; }
}

/* Vista previa de anuncios (#anuncios en la dirección) */
html.ver-anuncios .anuncio:not(:has(ins)) {
  display: flex !important; border: 2px dashed var(--color); background: var(--color-suave); color: var(--color); font-weight: 600;
}
@media (min-width: 1300px) {
  html.ver-anuncios .anuncio-lateral:not(:has(ins)) {
    display: flex !important; border: 2px dashed var(--color); background: var(--color-suave); color: var(--color); font-weight: 600;
  }
}
.logo .marca { font-weight: 800; }
.logo .marca span { font-weight: 500; opacity: .75; }