@charset "utf-8";

/* Cuanto te quitan — sistema visual.
   Lenguaje: mostrador de casa de cambio. Verde azulado profundo sobre lienzo
   claro, acento coral en botones y remates, cifras monoespaciadas con
   tabular-nums para que las columnas cuadren. Se dibuja con filetes y planos
   de color: nada de sombras proyectadas ni degradados. */

:root {
  --reloj-verde: #0d5c63;
  --reloj-verde-fuerte: #09474d;
  --reloj-verde-suave: #e4eff0;
  --reloj-verde-linea: #a2c8cd;

  --reloj-corral: #c98a2e;
  --reloj-corral-fuerte: #a86f1f;
  --reloj-corral-suave: #fbf3e4;
  --reloj-corral-linea: #e8d3a6;

  --reloj-tinta: #17292e;
  --reloj-tinta-suave: #455a60;
  --reloj-tinta-tenue: #6b8187;

  --reloj-fondo: #f8fafb;
  --reloj-panel: #eef2f4;
  --reloj-hundido: #e2e9ec;

  --reloj-trazo: #d5dee2;
  --reloj-trazo-fino: #e6edef;

  --reloj-bueno: #1a7a4c;
  --reloj-bueno-fondo: #e8f5ee;
  --reloj-bueno-linea: #a8d6bb;

  --reloj-alerta: #a8321f;
  --reloj-alerta-fondo: #fbeeec;
  --reloj-alerta-linea: #ecb8b2;

  --reloj-redondeo: 10px;
  --reloj-redondeo-grande: 16px;

  --reloj-ancho: 1100px;
  --reloj-lectura: 72ch;

  --reloj-letra: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --reloj-titular: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --reloj-cifras: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
}

/* ------------------------------------------------------------------ base */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--reloj-fondo);
  color: var(--reloj-tinta);
  font-family: var(--reloj-letra);
  font-size: 16px;
  line-height: 1.65;
}

h1, h2, h3, h4 {
  font-family: var(--reloj-titular);
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.25;
  margin: 0 0 .5em;
  color: var(--reloj-tinta);
}

h1 { font-size: clamp(1.5rem, 3.4vw, 2.15rem); }
h2 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); }
h3 { font-size: 1.02rem; }

p { margin: 0 0 1em; }

a { color: var(--reloj-verde); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { max-width: 100%; }

[id] { scroll-margin-top: 84px; }

.voz-apartada {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.salto-expediente {
  position: absolute; left: -9999px; top: 0;
  background: var(--reloj-verde); color: #fff;
  padding: 10px 16px; z-index: 60; border-radius: 0 0 var(--reloj-redondeo) 0;
}
.salto-expediente:focus { left: 0; text-decoration: none; }

.expediente-marco {
  width: 100%; max-width: var(--reloj-ancho);
  margin: 0 auto; padding: 0 20px;
}

/* -------------------------------------------------------------- cabecera */
.cabecera-expediente {
  position: sticky; top: 0; z-index: 40;
  background: var(--reloj-fondo);
  border-bottom: 1px solid var(--reloj-trazo);
}

.cabecera-expediente > .expediente-marco {
  display: flex; align-items: center; gap: 18px;
  min-height: 62px;
}

.emblema-expediente {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--reloj-titular); font-weight: 700;
  font-size: 1.02rem; letter-spacing: -.02em;
  color: var(--reloj-tinta); white-space: nowrap;
}
.emblema-expediente b { color: var(--reloj-verde); font-weight: 700; }
.emblema-expediente:hover { text-decoration: none; }

/* Emblema: circulo coral con dos flechas enfrentadas (compra y venta). */
.emblema-reloj {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: none;
  border-radius: 50%; background: var(--reloj-corral);
}
.emblema-reloj > span {
  display: block; position: relative;
  width: 16px; height: 2px; background: #fff; border-radius: 2px;
}
.emblema-reloj > span::before,
.emblema-reloj > span::after {
  content: ""; position: absolute; top: -3px;
  width: 0; height: 0; border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}
.emblema-reloj > span::before { left: -1px; border-right: 5px solid #fff; }
.emblema-reloj > span::after { right: -1px; border-left: 5px solid #fff; }

.ruta-expediente { margin-left: auto; }

.opciones-expediente {
  display: flex; align-items: center; gap: 4px;
  list-style: none; margin: 0; padding: 0;
}
.opciones-expediente a {
  display: block; padding: 8px 11px; border-radius: var(--reloj-redondeo);
  color: var(--reloj-tinta-suave); font-size: .9rem; white-space: nowrap;
}
.opciones-expediente a:hover {
  background: var(--reloj-panel); color: var(--reloj-tinta);
  text-decoration: none;
}
.opciones-expediente a[aria-current] {
  color: var(--reloj-verde); background: var(--reloj-verde-suave);
}

/* Hamburguesa: solo existe cuando hay JS (clase .js en <html>).
   Sin JS la lista completa sigue visible y navegable. */
.abre-expediente { display: none; }

.abre-trazos { display: block; width: 20px; height: 14px; position: relative; }
.abre-trazos i {
  position: absolute; left: 0; right: 0; height: 2px;
  background: var(--reloj-tinta); border-radius: 2px;
}
.abre-trazos i:nth-child(1) { top: 0; }
.abre-trazos i:nth-child(2) { top: 6px; }
.abre-trazos i:nth-child(3) { top: 12px; }

.velo-expediente { display: none; }

/* La hamburguesa SOLO existe en movil (<= 899px) y solo con JS.
   Antes esta regla vivia fuera del media query y por eso el boton tambien
   se veia en escritorio, donde la lista de navegacion ya esta completa.
   En escritorio .abre-expediente se queda en display:none (regla de arriba). */
@media (max-width: 899px) {
  html.js .abre-expediente {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 38px; margin-left: auto;
    background: transparent; border: 1px solid var(--reloj-trazo);
    border-radius: var(--reloj-redondeo); cursor: pointer;
  }
  html.js .ruta-expediente {
    position: fixed; top: 62px; left: 0; right: 0; z-index: 50;
    background: var(--reloj-fondo);
    border-bottom: 1px solid var(--reloj-trazo);
    max-height: calc(100vh - 62px); overflow-y: auto;
    display: none;
  }
  html.js .ruta-expediente.desplegado-expediente { display: block; }
  html.js .opciones-expediente {
    flex-direction: column; align-items: stretch; gap: 0; padding: 6px;
  }
  html.js .opciones-expediente a {
    padding: 13px 14px; font-size: 1rem; min-height: 48px;
    display: flex; align-items: center;
  }
  html.js .velo-expediente.desplegado-expediente {
    display: block; position: fixed; inset: 62px 0 0 0;
    background: rgba(30, 41, 59, .38); z-index: 45;
  }
  html.js body.menu-desplegado-expediente { overflow: hidden; }
}

/* --------------------------------------------------------------- portada */
.portada-expediente {
  background: var(--reloj-panel);
  border-bottom: 1px solid var(--reloj-trazo);
  padding: 38px 0 30px;
}
.portada-expediente h1 { max-width: 30ch; }
.portada-expediente .resumen-expediente {
  font-size: 1.06rem; color: var(--reloj-tinta-suave);
  max-width: var(--reloj-lectura); margin: 0 0 16px;
}

.cintilla-expediente { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.etiqueta-expediente {
  display: inline-block; padding: 5px 11px;
  background: var(--reloj-corral-suave); border: 1px solid var(--reloj-corral-linea);
  border-radius: 999px;
  font-family: var(--reloj-cifras); font-size: .76rem;
  color: var(--reloj-corral-fuerte);
}

/* ---------------------------------------------------------------- migas */
.recorrido-expediente { padding-top: 14px; }
.recorrido-expediente ol {
  display: flex; flex-wrap: wrap; gap: 6px;
  list-style: none; margin: 0; padding: 0;
  font-size: .84rem; color: var(--reloj-tinta-tenue);
}
.recorrido-expediente li + li::before { content: "/"; margin-right: 6px; color: var(--reloj-trazo); }
.recorrido-expediente a { color: var(--reloj-tinta-suave); }

/* -------------------------------------------------------------- bloques */
.bloque-expediente { padding: 30px 0; }

.cabecera-zocalo { margin-bottom: 18px; }
.cabecera-zocalo h2 { margin: 0 0 6px; }
.cabecera-zocalo p {
  color: var(--reloj-tinta-suave); margin: 0; max-width: var(--reloj-lectura);
}

/* Fichas: filete lateral como un renglon de cargo */
.zocalo-secciones {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
}

.escalon-ficha {
  display: block; padding: 16px 18px;
  background: var(--reloj-fondo);
  border: 1px solid var(--reloj-trazo);
  border-left: 3px solid var(--reloj-verde);
  border-radius: var(--reloj-redondeo);
  color: inherit;
}
.escalon-ficha:hover {
  background: #fff; border-color: var(--reloj-verde-linea);
  border-left-color: var(--reloj-verde-fuerte); text-decoration: none;
}
.escalon-ficha h3 { margin: 0 0 6px; font-size: .98rem; }
.escalon-ficha p { margin: 0 0 8px; font-size: .89rem; color: var(--reloj-tinta-suave); }
.escalon-ruta {
  display: inline-block; font-family: var(--reloj-cifras);
  font-size: .74rem; color: var(--reloj-tinta-tenue);
}

/* ---------------------------------------------------------- calculadora */
.calculadora-expediente { max-width: var(--reloj-ancho); margin: 26px auto 0; padding: 0 20px; }

.cabecera-aportacion {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 18px;
  border: 1px solid var(--reloj-trazo); border-bottom: 0;
  border-radius: var(--reloj-redondeo-grande) var(--reloj-redondeo-grande) 0 0;
  background: var(--reloj-hundido);
  font-family: var(--reloj-titular); font-size: .8rem;
  color: var(--reloj-tinta-suave);
}
.punto-aportacion { width: 8px; height: 8px; border-radius: 50%; background: var(--reloj-corral); flex: none; }

.expediente-cuerpo {
  display: grid; gap: 0;
  background: var(--reloj-fondo);
  border: 1px solid var(--reloj-trazo); border-top: 0;
  border-radius: 0 0 var(--reloj-redondeo-grande) var(--reloj-redondeo-grande);
}

@media (min-width: 860px) {
  .expediente-cuerpo { grid-template-columns: minmax(260px, 380px) 1fr; }
  .expediente-tomas { border-right: 1px solid var(--reloj-trazo); }
}

.expediente-tomas { padding: 20px 18px; }
.expediente-salida {
  padding: 20px 18px; background: var(--reloj-panel);
  border-radius: 0 0 var(--reloj-redondeo-grande) var(--reloj-redondeo-grande);
}

/* campos */
.carpeta-campo { margin-bottom: 15px; }
.carpeta-campo label,
.carpeta-conjunto legend {
  display: block; font-size: .87rem; font-weight: 600;
  margin-bottom: 6px; color: var(--reloj-tinta);
}
.carpeta-conjunto { border: 0; padding: 0; margin: 0 0 15px; }

.carpeta-dato, .carpeta-lista {
  width: 100%; padding: 10px 12px;
  font-family: var(--reloj-cifras); font-size: .98rem;
  color: var(--reloj-tinta);
  background: #fff;
  border: 1px solid var(--reloj-trazo); border-radius: var(--reloj-redondeo);
}
.carpeta-lista { font-family: var(--reloj-letra); }
.carpeta-dato:focus, .carpeta-lista:focus {
  outline: 2px solid var(--reloj-verde); outline-offset: 1px;
  border-color: var(--reloj-verde);
}
.aviso-carpeta { display: block; margin-top: 5px; font-size: .8rem; color: var(--reloj-tinta-tenue); }
.carpeta-par { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.carpeta-marca { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 12px; }
.carpeta-marca input {
  width: 17px; height: 17px; margin-top: 3px;
  accent-color: var(--reloj-verde); flex: none;
}
.carpeta-marca label { font-size: .89rem; color: var(--reloj-tinta-suave); }

/* resultados */
.jubilacion-ficha {
  padding: 16px 18px; margin-bottom: 16px;
  background: var(--reloj-fondo);
  border: 1px dashed var(--reloj-verde-linea);
  border-radius: var(--reloj-redondeo);
}
.jubilacion-rotulo {
  font-family: var(--reloj-titular); font-size: .78rem;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--reloj-tinta-tenue); margin-bottom: 5px;
}
.jubilacion-cifra {
  font-family: var(--reloj-cifras); font-weight: 700;
  font-size: clamp(1.5rem, 3.6vw, 2.05rem);
  letter-spacing: -.02em; color: var(--reloj-verde);
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.jubilacion-nota { margin-top: 7px; font-size: .88rem; color: var(--reloj-tinta-suave); }
.pension-nota { display: block; font-size: .78rem; color: var(--reloj-tinta-tenue); }

/* tablas */
.historial-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.aportacion-tabla, .historial-tabla {
  width: 100%; border-collapse: collapse; font-size: .88rem;
}
.aportacion-tabla { background: var(--reloj-fondo); border: 1px solid var(--reloj-trazo); }
.aportacion-rotulo {
  caption-side: top; text-align: left;
  padding: 0 0 8px; font-family: var(--reloj-titular);
  font-size: .8rem; color: var(--reloj-tinta-tenue);
}
.aportacion-tabla th, .aportacion-tabla td,
.historial-tabla th, .historial-tabla td {
  padding: 9px 11px; text-align: left;
  border-bottom: 1px solid var(--reloj-trazo-fino);
}
.aportacion-tabla thead th {
  background: var(--reloj-hundido);
  font-family: var(--reloj-titular); font-size: .76rem;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--reloj-tinta-suave); white-space: nowrap;
}
.aportacion-tabla td:not(:first-child),
.aportacion-tabla th:not(:first-child) {
  text-align: right; font-variant-numeric: tabular-nums;
  font-family: var(--reloj-cifras);
}
.aportacion-tabla tbody tr:last-child td { border-bottom: 0; }

.historial-tabla th {
  width: 40%; font-weight: 600; color: var(--reloj-tinta-suave);
  background: var(--reloj-fondo);
}
.historial-tabla td { font-variant-numeric: tabular-nums; }

.carpeta-botonera { margin-top: 14px; }

.boton-carpeta {
  display: inline-block; padding: 10px 18px;
  font-family: var(--reloj-titular); font-size: .88rem; font-weight: 700;
  color: #fff; background: var(--reloj-verde);
  border: 1px solid var(--reloj-verde); border-radius: var(--reloj-redondeo);
  cursor: pointer;
}
.boton-carpeta:hover { background: var(--reloj-verde-fuerte); text-decoration: none; }

/* --------------------------------------------------------------- prosa */
.texto-expediente { max-width: var(--reloj-lectura); }
.texto-expediente h2 { margin-top: 1.5em; }
.texto-expediente h3 { margin-top: 1.3em; }
.texto-expediente ul, .texto-expediente ol { padding-left: 1.25em; margin: 0 0 1em; }
.texto-expediente li { margin-bottom: .4em; }
.texto-expediente blockquote {
  margin: 1.2em 0; padding: 12px 16px;
  border-left: 3px solid var(--reloj-verde-linea);
  background: var(--reloj-panel); color: var(--reloj-tinta-suave);
}

.nota-cierre { font-size: .85rem; color: var(--reloj-tinta-tenue); padding: 14px 0 0; }

/* --------------------------------------------------------------- dudas */
.tramite-lista { margin-top: 8px; }
.tramite-lista details {
  border: 1px solid var(--reloj-trazo); border-radius: var(--reloj-redondeo);
  background: var(--reloj-fondo); margin-bottom: 9px;
}
.tramite-lista summary { padding: 13px 16px; cursor: pointer; font-weight: 600; font-size: .95rem; }
.tramite-lista summary:focus-visible { outline: 2px solid var(--reloj-verde); }
.tramite-paso { padding: 0 16px 4px; }
.tramite-paso p { color: var(--reloj-tinta-suave); font-size: .92rem; }

/* -------------------------------------------------------- relacionados */
.vinculos-expediente {
  display: grid; gap: 9px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.vinculo-expediente {
  display: block; padding: 13px 16px; height: 100%;
  background: var(--reloj-fondo);
  border: 1px solid var(--reloj-trazo); border-radius: var(--reloj-redondeo);
  color: inherit;
}
.vinculo-expediente:hover { border-color: var(--reloj-verde-linea); text-decoration: none; }
.vinculo-expediente b { display: block; margin-bottom: 3px; color: var(--reloj-verde); }
.vinculo-expediente span { font-size: .87rem; color: var(--reloj-tinta-suave); }

.hueco-espacio {
  padding: 18px; margin: 18px 0;
  border: 1px dashed var(--reloj-trazo); border-radius: var(--reloj-redondeo);
  background: var(--reloj-panel);
  font-size: .85rem; color: var(--reloj-tinta-tenue); text-align: center;
}

/* ------------------------------------------------------------------ pie */
.pie-expediente {
  margin-top: 26px; padding: 34px 0 24px;
  background: var(--reloj-panel);
  border-top: 3px solid var(--reloj-verde);
}
.pie-bloques { display: grid; gap: 24px; grid-template-columns: 1.5fr 1fr 1fr; }
@media (max-width: 780px) { .pie-bloques { grid-template-columns: 1fr; } }

.pie-expediente h3 {
  font-size: .84rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--reloj-tinta-suave); margin-bottom: 10px;
}
.pie-expediente ul { list-style: none; margin: 0; padding: 0; }
.pie-expediente li { margin-bottom: 6px; }
.pie-expediente li a { font-size: .87rem; color: var(--reloj-tinta); }

.zocalo-aviso {
  margin-top: 26px; padding-top: 16px;
  border-top: 1px solid var(--reloj-trazo);
  font-size: .82rem; color: var(--reloj-tinta-tenue);
}
.zocalo-aviso p { margin: 0 0 8px; }