/* Sueldo neto · enekojv.com
   Idea: la impresora de nóminas. Arriba, la carcasa oscura con una tecla por territorio y su
   piloto encendido; de la ranura sale una hoja de papel continuo con los agujeros de arrastre
   en los márgenes y una perforación entre bloque y bloque. La nómina sale impresa en papel
   pijama y el líquido a percibir va subrayado con fosforito, como cuando la revisas a mano. */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("fuentes/plex-sans-var.woff2") format("woff2");
  font-weight: 100 700;
  font-display: optional;
}

@font-face {
  font-family: "IBM Plex Sans Condensed";
  src: url("fuentes/plex-sans-condensed-600.woff2") format("woff2");
  font-weight: 600;
  font-display: optional;
}

@font-face {
  font-family: "IBM Plex Sans Condensed";
  src: url("fuentes/plex-sans-condensed-700.woff2") format("woff2");
  font-weight: 700;
  font-display: optional;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fuentes/plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: optional;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fuentes/plex-mono-600.woff2") format("woff2");
  font-weight: 600;
  font-display: optional;
}

:root {
  --carcasa: #2a2d31;
  --carcasa-2: #1c1e21;
  --carcasa-3: #3b4045;
  --carcasa-texto: #d7dadd;
  --carcasa-texto-2: #a9afb4;

  --papel: #fff;
  --tinta: #1d2024;
  --tinta-2: #474d53;
  --tinta-3: #5f666d;
  --linea: #e1e4e6;
  --linea-2: #c6cbcf;
  --perforado: #b9bfc3;

  --barra: #e8f2eb;          /* la banda verde del papel pijama */
  --barra-linea: #c4dccb;
  --fosforito: #ffe45a;
  --fosforito-2: #ffd92e;
  --led: #7be08e;
  --mas: #1c6a43;
  --menos: #a2321f;

  --sans: "IBM Plex Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --estrecha: "IBM Plex Sans Condensed", "Arial Narrow", "Roboto Condensed", "Segoe UI", Arial, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  /* Márgenes de arrastre de la hoja (los agujeros) y aire interior */
  --arrastre: 44px;
  --agujero: 6px;
  --paso-agujero: 36px;
  --aire: clamp(18px, 4.6vw, 60px);
  --borde-hoja: calc(var(--arrastre) + var(--aire));

  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--carcasa);
  color: var(--tinta);
  font: 400 1.0625rem/1.6 var(--sans);
  font-kerning: normal;
}

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

a {
  color: inherit;
  text-decoration-color: #c99a00;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

a:hover {
  background: linear-gradient(transparent 55%, var(--fosforito) 55%, var(--fosforito) 92%, transparent 92%);
  text-decoration-color: var(--tinta);
}

:focus-visible {
  outline: 3px solid var(--tinta);
  outline-offset: 2px;
}

strong,
b {
  font-weight: 600;
}

.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.saltar {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 10;
  padding: 8px 14px;
  background: var(--fosforito);
  color: var(--tinta);
  font-weight: 600;
}

.saltar:focus {
  top: 12px;
}

.marco {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- La impresora ------------------------------------------------------------------------ */

.impresora {
  background: linear-gradient(#34383d, var(--carcasa) 70%);
  color: var(--carcasa-texto);
}

.impresora :focus-visible {
  outline-color: var(--fosforito);
}

.impresora-sup {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding-top: 16px;
  padding-bottom: 6px;
  font-size: 0.9375rem;
}

.marca {
  margin: 0;
  color: var(--carcasa-texto-2);
}

.marca a {
  text-decoration: none;
}

.marca a:hover {
  background: none;
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--fosforito);
}

.marca b {
  color: #fff;
  font-weight: 600;
}

.idiomas {
  display: flex;
  gap: 4px;
}

.idiomas a {
  padding: 2px 9px;
  border-radius: 4px;
  color: var(--carcasa-texto-2);
  text-decoration: none;
}

.idiomas a:hover {
  background: none;
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--fosforito);
}

.idiomas a[aria-current] {
  background: var(--carcasa-3);
  color: #fff;
  box-shadow: inset 0 0 0 1px #50565c;
}

/* Las teclas de la botonera, con su piloto */
.botonera {
  display: flex;
  gap: 8px;
  padding-top: 14px;
  padding-bottom: 20px;
  overflow-x: auto;
  scrollbar-width: none;
}

.botonera::-webkit-scrollbar {
  display: none;
}

.tecla {
  position: relative;
  top: 0;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 9px;
  padding: 9px 15px 10px 12px;
  border-radius: 6px;
  background: linear-gradient(#484d53, #3c4146);
  box-shadow: 0 3px 0 #17191b, inset 0 1px 0 rgba(255, 255, 255, 0.09);
  color: #e6e8ea;
  font: 600 0.9375rem/1 var(--estrecha);
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  transition: top 0.08s, box-shadow 0.08s;
}

.tecla:hover {
  background: linear-gradient(#52585e, #444a50);
  color: #fff;
}

/* Encendida, la tecla del territorio de la nómina: el del selector «Dónde trabajas», que puede no
   ser el de la página (nomina.js la cambia con él) */
.tecla.encendida {
  top: 2px;
  box-shadow: 0 1px 0 #17191b, inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: #fff;
}

.led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #23272a;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6);
}

.tecla.encendida .led {
  background: var(--led);
  box-shadow: 0 0 7px 1px rgba(123, 224, 142, 0.7);
}

/* La ranura por la que sale el papel */
.ranura {
  position: relative;
  z-index: 2;
  height: 14px;
  margin: 0 -8px;
  border-radius: 8px;
  background: var(--carcasa-2);
  box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.75), 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* --- La hoja de papel continuo ------------------------------------------------------------ */

.hoja {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: -8px;
  padding: clamp(36px, 5vw, 64px) var(--borde-hoja) clamp(36px, 5vw, 64px);
  background:
    linear-gradient(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0) 22px) top / 100% 22px no-repeat,
    var(--papel);
}

/* Márgenes de arrastre: agujeros y la línea perforada para separarlos */
.hoja::before,
.hoja::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--arrastre);
  background: radial-gradient(circle, var(--carcasa) 0 var(--agujero), transparent calc(var(--agujero) + 0.6px))
    50% calc(var(--paso-agujero) / 2) / 100% var(--paso-agujero) repeat-y;
}

.hoja::before {
  left: 0;
  border-right: 1px dashed var(--perforado);
}

.hoja::after {
  right: 0;
  border-left: 1px dashed var(--perforado);
}

/* La perforación entre hojas: corta todo el ancho, márgenes incluidos */
.corte {
  position: relative;
  height: 0;
  margin: clamp(48px, 7vw, 80px) calc(-1 * var(--borde-hoja));
  border-top: 2px dashed var(--perforado);
}

/* --- Cabecera de la página ---------------------------------------------------------------- */

.antetitulo {
  margin: 0 0 14px;
  color: var(--tinta-2);
  font: 600 0.8125rem/1.35 var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

h1,
h2 {
  font-family: var(--estrecha);
  font-weight: 700;
  color: var(--tinta);
  text-wrap: balance;
}

h1 {
  max-width: 15em;
  margin: 0 0 18px;
  font-size: clamp(2.35rem, 1.5rem + 3.2vw, 3.9rem);
  line-height: 1;
  letter-spacing: -0.012em;
}

h2 {
  margin: 0 0 14px;
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.15rem);
  line-height: 1.08;
}

h3 {
  margin: 1.7em 0 0.45em;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
}

p,
ul,
ol {
  margin: 0 0 1em;
}

/* Migas de pan, en lugar del antetítulo, en las páginas que cuelgan de otra */
.migas ol {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  color: var(--tinta-2);
  font: 600 0.8125rem/1.35 var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.migas li + li::before {
  content: "/";
  margin: 0 0.6em;
  color: var(--tinta-3);
}

.migas a {
  color: inherit;
}

.migas [aria-current] {
  color: var(--tinta);
}

.entradilla {
  max-width: 40em;
  margin-bottom: 14px;
  color: var(--tinta-2);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.55;
}

.firma {
  margin: 0;
  color: var(--tinta-3);
  font-size: 0.875rem;
}

.firma a {
  color: inherit;
}

/* Las tres cifras de la cabecera */
.cifras {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 34px 0 0;
  border-top: 2px solid var(--tinta);
}

.cifra {
  margin: 0;
  padding: 12px 18px 6px 0;
}

.cifra + .cifra {
  padding-left: 18px;
  border-left: 1px dashed var(--linea-2);
}

.cifra dt {
  color: var(--tinta-2);
  font: 600 0.75rem/1.35 var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.cifra dd {
  margin: 0;
}

.cifra-valor {
  display: inline-block;
  margin: 4px 0 2px;
  font: 700 clamp(2.1rem, 1.6rem + 1.7vw, 3rem)/1.05 var(--estrecha);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.cifra-destacada .cifra-valor {
  padding: 0 0.12em;
  margin-left: -0.12em;
  background: linear-gradient(100deg, transparent 0.12em, var(--fosforito) 0.2em, var(--fosforito-2) calc(100% - 0.2em), transparent calc(100% - 0.12em)) 0 62% / 100% 62% no-repeat;
}

.cifra-nota {
  display: block;
  color: var(--tinta-3);
  font-size: 0.875rem;
  line-height: 1.4;
}

/* --- Calculadora: datos a la izquierda, nómina impresa a la derecha ------------------------- */

.calculadora {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 0 clamp(28px, 4vw, 60px);
  align-items: start;
  margin: 48px 0 0;
  scroll-margin-top: 16px;
}

.datos {
  margin: 0;
}

.datos fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.datos-titulo {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0 0 8px;
  border-bottom: 2px solid var(--tinta);
  font: 600 0.8125rem/1.3 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dato {
  padding: 15px 0 16px;
  border-bottom: 1px dashed var(--linea-2);
}

.rotulo {
  display: block;
  margin: 0 0 8px;
  color: var(--tinta-2);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.35;
  text-transform: uppercase;
}

.ayuda {
  margin: 8px 0 0;
  color: var(--tinta-3);
  font-size: 0.875rem;
  line-height: 1.45;
}

/* El aviso bajo el sueldo bruto («¿Es lo que cobras cada mes?»), con su cuadradito de fosforito */
.pista {
  color: var(--tinta);
  font-weight: 600;
}

.pista::before {
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-right: 0.45em;
  background: var(--fosforito-2);
}

.error {
  margin: 8px 0 0;
  color: var(--menos);
  font-size: 0.875rem;
  font-weight: 600;
}

/* Sueldo bruto: la cifra grande, como tecleada */
.importe {
  display: flex;
  align-items: baseline;
  gap: 8px;
  max-width: 17rem;
  border-bottom: 2px solid var(--tinta);
}

.importe input {
  width: 100%;
  min-width: 0;
  padding: 2px 0 4px;
  border: 0;
  background: transparent;
  color: var(--tinta);
  font: 600 1.875rem/1.2 var(--mono);
  letter-spacing: -0.02em;
}

.importe input:focus {
  outline: none;
}

.importe:focus-within {
  border-bottom-color: #c99a00;
  box-shadow: 0 2px 0 var(--fosforito);
}

.importe input[aria-invalid="true"] {
  color: var(--menos);
}

.unidad {
  color: var(--tinta-3);
  font: 400 1.375rem/1 var(--mono);
}

/* Interruptor «al año / por paga» y teclas de las pagas: botones de verdad */
.interruptor,
.teclas {
  display: inline-flex;
  margin-top: 12px;
  border: 1px solid var(--tinta);
  border-radius: 5px;
  overflow: hidden;
}

.teclas {
  margin-top: 0;
}

.interruptor label,
.tecla-opcion {
  position: relative;
  cursor: pointer;
}

.interruptor input,
.tecla-opcion input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.interruptor span,
.tecla-opcion span {
  display: block;
  padding: 6px 14px;
  font: 600 0.875rem/1.3 var(--mono);
  letter-spacing: 0.02em;
}

.tecla-opcion span {
  min-width: 3.4rem;
  padding: 8px 14px;
  font-size: 1rem;
  text-align: center;
}

.interruptor label + label span,
.tecla-opcion + .tecla-opcion span {
  border-left: 1px solid var(--tinta);
}

.interruptor input:checked + span,
.tecla-opcion input:checked + span {
  background: var(--tinta);
  color: #fff;
}

.interruptor input:focus-visible + span,
.tecla-opcion input:focus-visible + span {
  outline: 3px solid var(--fosforito);
  outline-offset: -3px;
}

.interruptor label:hover input:not(:checked) + span,
.tecla-opcion:hover input:not(:checked) + span {
  background: var(--barra);
}

/* Contador de hijos: − 0 + */
.contador {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--tinta);
  border-radius: 5px;
  overflow: hidden;
}

.contador input {
  width: 3.4rem;
  border: 0;
  border-left: 1px solid var(--tinta);
  border-right: 1px solid var(--tinta);
  background: #fff;
  color: var(--tinta);
  font: 600 1.25rem/1 var(--mono);
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

.contador input::-webkit-outer-spin-button,
.contador input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.contador input:focus {
  outline: 3px solid var(--fosforito);
  outline-offset: -3px;
}

button {
  font: inherit;
  cursor: pointer;
}

.tecla-mini {
  min-width: 2.75rem;
  padding: 6px 10px;
  border: 0;
  background: #f4f6f5;
  color: var(--tinta);
  font: 600 1.25rem/1 var(--mono);
}

.tecla-mini:hover {
  background: var(--barra);
}

.tecla-mini:active {
  background: var(--barra-linea);
}

.tecla-mini:focus-visible {
  outline: 3px solid var(--fosforito);
  outline-offset: -3px;
}

/* Opciones de una lista: círculos rellenos como en un formulario */
.opciones {
  display: grid;
  gap: 8px;
}

.opcion {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.35;
  cursor: pointer;
}

.opcion input {
  flex: none;
  width: 19px;
  height: 19px;
  margin: 1px 0 0;
  border: 2px solid var(--tinta-2);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.opcion input[type="checkbox"] {
  border-radius: 3px;
}

.opcion input:checked {
  border-color: var(--tinta);
  background: radial-gradient(circle, var(--tinta) 0 4.5px, #fff 5px);
}

.opcion input[type="checkbox"]:checked {
  background:
    linear-gradient(45deg, transparent 43%, var(--tinta) 43%, var(--tinta) 57%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, var(--tinta) 43%, var(--tinta) 57%, transparent 57%),
    #fff;
}

.opcion input:focus-visible {
  outline: 3px solid var(--fosforito);
  outline-offset: 1px;
}

.casillas {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.opcion input:disabled {
  border-color: var(--linea-2);
  cursor: not-allowed;
}

.opcion input:disabled + span {
  color: var(--tinta-3);
  cursor: not-allowed;
}

.selector {
  position: relative;
  max-width: 22rem;
}

.selector::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 2px solid var(--tinta);
  border-bottom: 2px solid var(--tinta);
  transform: rotate(45deg);
  pointer-events: none;
}

.selector select {
  width: 100%;
  padding: 8px 36px 8px 12px;
  border: 1px solid var(--tinta);
  border-radius: 5px;
  background: #fff;
  color: var(--tinta);
  font: 600 1rem/1.3 var(--sans);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.selector select:focus-visible {
  outline: 3px solid var(--fosforito);
  outline-offset: 0;
}

/* Los dos datos que solo cuentan en el resto de España */
.solo-comun {
  margin-top: 22px !important;
  padding: 2px 14px 4px !important;
  border: 1px dashed var(--linea-2) !important;
  border-radius: 4px;
}

.solo-comun legend {
  padding: 0 6px;
  color: var(--tinta-3);
  font: 600 0.75rem/1.3 var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.solo-comun .dato:last-child {
  border-bottom: 0;
}

/* --- La nómina impresa ------------------------------------------------------------------ */

.resultado {
  position: sticky;
  top: 16px;
}

.listado {
  --renglon: 1.6rem;
  position: relative;
  padding: 0 22px 18px;
  background:
    repeating-linear-gradient(180deg, var(--barra) 0, var(--barra) calc(var(--renglon) * 3), rgba(255, 255, 255, 0) calc(var(--renglon) * 3), rgba(255, 255, 255, 0) calc(var(--renglon) * 6))
    0 calc(var(--renglon) * 3.4) / 100% calc(100% - var(--renglon) * 3.4) no-repeat,
    #fff;
  border: 1px solid var(--barra-linea);
  border-top: 0;
  box-shadow: 0 1px 0 rgba(29, 32, 36, 0.05), 0 16px 28px -22px rgba(29, 32, 36, 0.55);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* Borde de arriba arrancado por la perforación */
.listado::before {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: -6px;
  height: 7px;
  background: radial-gradient(circle at 50% 0, transparent 0 3.5px, #fff 4px) 0 0 / 12px 7px repeat-x;
}

.listado-cab {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 2px 16px;
  min-height: calc(var(--renglon) * 3.4);
  padding: 14px 0 10px;
  border-bottom: 1px dashed var(--barra-linea);
}

.listado-titulo {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.listado-titulo span {
  color: var(--tinta-3);
  font-weight: 400;
}

.listado-sub {
  margin: 0;
  color: var(--tinta-2);
  font-size: 0.875rem;
}

.listado-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.listado-tabla th,
.listado-tabla td {
  height: var(--renglon);
  padding: 0;
  font-weight: 400;
  text-align: left;
  vertical-align: middle;
}

.listado-tabla tr.grupo th {
  padding-top: 2px;
  color: var(--tinta-2);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.listado-tabla tbody th[scope="row"] {
  padding-left: 1.2ch;
}

.listado-tabla .pc {
  width: 7.5ch;
  padding-right: 1.5ch;
  color: var(--tinta-3);
  text-align: right;
  white-space: nowrap;
}

.listado-tabla .imp {
  width: 11ch;
  text-align: right;
  white-space: nowrap;
}

.listado-tabla tr.suma th,
.listado-tabla tr.suma td {
  border-top: 1px solid var(--tinta);
  font-weight: 600;
}

.liquido {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 16px;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 3px double var(--tinta);
}

.liquido span {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* El fosforito */
.fosforito {
  padding: 0 0.28em;
  margin-right: -0.28em;
  background: linear-gradient(98deg, transparent 0.18em, var(--fosforito) 0.3em, var(--fosforito-2) calc(100% - 0.3em), transparent calc(100% - 0.18em)) 0 60% / 100% 70% no-repeat;
  color: var(--tinta);
  font: 600 clamp(1.85rem, 1.45rem + 1.5vw, 2.5rem)/1.15 var(--mono);
  letter-spacing: -0.03em;
  white-space: nowrap;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.fosforito.pasada {
  animation: pasada 0.42s cubic-bezier(0.3, 0.7, 0.4, 1) both;
}

@keyframes pasada {
  from {
    background-size: 0% 70%;
  }
}

.listado-pie {
  display: grid;
  gap: 2px;
  margin: 14px 0 0;
  font-size: 0.875rem;
}

.listado-pie div {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.listado-pie div[hidden] {
  display: none;
}

/* Puntos guía entre el concepto y la cifra */
.listado-pie div::after {
  content: "";
  order: 2;
  flex: 1 1 20px;
  min-width: 20px;
  border-bottom: 2px dotted var(--linea-2);
  transform: translateY(-0.3em);
}

.listado-pie dt {
  order: 1;
  color: var(--tinta-2);
}

.listado-pie dd {
  order: 3;
  margin: 0;
  font-weight: 600;
  white-space: nowrap;
}

.listado.sin-dato .imp,
.listado.sin-dato .pc,
.listado.sin-dato .fosforito,
.listado.sin-dato dd {
  color: var(--tinta-3);
}

.listado.sin-dato .fosforito {
  background: none;
}

/* Por qué te sale esto */
.porque-titulo {
  margin: 26px 0 10px;
  font: 600 0.8125rem/1.3 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-2);
}

.porque {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  line-height: 1.55;
}

.porque li {
  position: relative;
  margin: 0 0 10px;
  padding-left: 22px;
}

.porque li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 8px;
  height: 8px;
  background: var(--tinta);
}

/* --- Comparativa: cinco barras a un lado y otro del cero ------------------------------------ */

.comparativa {
  max-width: 62rem;
}

.comparativa-intro {
  max-width: 42em;
  color: var(--tinta-2);
}

.barras-leyenda {
  display: grid;
  grid-template-columns: 9rem 9rem minmax(0, 1fr) 8.5rem;
  gap: 0 18px;
  margin: 22px 0 6px;
  color: var(--tinta-3);
  font: 600 0.75rem/1.3 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.barras-leyenda span:nth-child(1) {
  grid-column: 3;
  grid-row: 1;
  justify-self: start;
}

.barras-leyenda span:nth-child(2) {
  grid-column: 3;
  grid-row: 1;
  justify-self: center;
}

.barras-leyenda span:nth-child(3) {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

.barras {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--tinta);
}

/* El cero: una sola línea de arriba abajo, en el centro de la columna de las barras
   (columnas de 9rem + 9rem y dos huecos de 18px antes; 8.5rem y otro hueco después) */
.barras::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(18rem + 36px + (100% - 26.5rem - 54px) / 2);
  border-left: 1px solid var(--tinta-3);
  pointer-events: none;
}

.barras li {
  display: grid;
  grid-template-columns: 9rem 9rem minmax(0, 1fr) 8.5rem;
  align-items: center;
  gap: 0 18px;
  min-height: 3.1rem;
  border-bottom: 1px dashed var(--linea-2);
}

.barras .nombre {
  font: 600 1.0625rem/1.2 var(--estrecha);
  letter-spacing: 0.01em;
  text-decoration: none;
}

.barras .nombre:hover {
  text-decoration: underline;
  text-decoration-color: #c99a00;
}

.barras .actual .nombre {
  justify-self: start;
  padding: 0 0.25em;
  margin-left: -0.25em;
  background: linear-gradient(98deg, transparent 0.12em, var(--fosforito) 0.22em, var(--fosforito-2) calc(100% - 0.22em), transparent calc(100% - 0.12em)) 0 60% / 100% 72% no-repeat;
}

.barras .valor {
  color: var(--tinta-2);
  font: 400 0.875rem/1.3 var(--mono);
  white-space: nowrap;
}

.barras .valor b {
  color: var(--tinta);
  font-weight: 600;
}

/* El carril: el cero en el centro; a la derecha, más sueldo; a la izquierda, menos
   (.pista es otra cosa: el aviso bajo el sueldo bruto). En el escritorio, el cero lo
   dibuja .barras::before; en el móvil, cada carril lleva el suyo */
.carril {
  position: relative;
  height: 12px;
}

.carril i {
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(var(--ancho, 0%) / 2);
  transition: width 0.3s ease-out;
}

.barras .mas i {
  left: 50%;
  background: var(--mas);
}

.barras .menos i {
  right: 50%;
  background: var(--menos);
}

.barras .actual i,
.barras .igual i {
  display: none;
}

.barras .dif {
  font: 600 0.875rem/1.3 var(--mono);
  text-align: right;
  white-space: nowrap;
}

.barras .mas .dif {
  color: var(--mas);
}

.barras .menos .dif {
  color: var(--menos);
}

.barras .actual .dif,
.barras .igual .dif {
  color: var(--tinta-3);
  font-weight: 400;
}

.barras.sin-dato {
  opacity: 0.35;
}

/* --- Cuerpo: texto e índice --------------------------------------------------------------- */

.cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 48em) minmax(170px, 1fr);
  gap: 0 clamp(32px, 5vw, 72px);
  align-items: start;
}

.cuerpo-texto {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

.indice {
  position: sticky;
  top: 20px;
  grid-column: 2;
  grid-row: 1;
  padding: 12px 0 0;
  border-top: 2px solid var(--tinta);
  font-size: 0.9375rem;
}

.indice p {
  margin: 0 0 8px;
  color: var(--tinta-2);
  font: 600 0.75rem/1.3 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.indice ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: indice;
}

.indice li {
  border-bottom: 1px dashed var(--linea-2);
  counter-increment: indice;
}

.indice li a {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  color: var(--tinta-2);
  line-height: 1.35;
  text-decoration: none;
}

.indice li a::before {
  content: counter(indice, decimal-leading-zero);
  color: var(--tinta-3);
  font: 400 0.8125rem/1.6 var(--mono);
}

.indice li a:hover {
  background: none;
  color: var(--tinta);
  text-decoration: underline;
  text-decoration-color: #c99a00;
}

.indice .subir {
  margin-top: 14px;
  font: 400 0.875rem/1.4 var(--sans);
  letter-spacing: 0;
  text-transform: none;
}

.bloque {
  margin-top: clamp(52px, 7vw, 80px);
  scroll-margin-top: 16px;
}

.cuerpo-texto > .bloque:first-child {
  margin-top: 0;
}

.bloque > p,
.bloque > ul,
.bloque > ol {
  max-width: 44em;
}

.bloque ul {
  padding: 0;
  list-style: none;
}

.bloque ul li {
  position: relative;
  margin-bottom: 0.6em;
  padding-left: 22px;
}

.bloque ul li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  background: var(--tinta);
}

/* Pasos numerados con números de impresora */
.pasos {
  padding: 0;
  list-style: none;
  counter-reset: paso;
}

.pasos li {
  position: relative;
  margin-bottom: 0.8em;
  padding-left: 42px;
  counter-increment: paso;
}

.pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--tinta);
  border-radius: 50%;
  font: 600 0.875rem/25px var(--mono);
  text-align: center;
}

.recuadro {
  max-width: 44em;
  margin: 22px 0;
  padding: 14px 18px;
  border: 1px dashed var(--tinta-3);
  background: #fbfbf9;
}

.recuadro p:last-child {
  margin: 0;
}

.nota {
  color: var(--tinta-3);
  font-size: 0.875rem;
}

/* Enlaces a las páginas de cada territorio */
.bloque .lurralde-estekak {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 44em;
  margin-top: 22px;
}

.bloque .lurralde-estekak li {
  margin: 0;
  padding: 12px 14px 12px 16px;
  border: 1px solid var(--tinta);
  border-left-width: 4px;
}

.bloque .lurralde-estekak li::before {
  display: none;
}

.lurralde-estekak a {
  display: block;
  font: 700 1.1875rem/1.2 var(--estrecha);
}

.lurralde-estekak span {
  display: block;
  margin-top: 2px;
  color: var(--tinta-3);
  font-size: 0.8125rem;
}

/* --- Tablas en papel pijama: bandas de tres renglones ---------------------------------------- */

.tabla-envoltorio {
  max-width: 100%;
  overflow-x: auto;
}

/* Un párrafo normal (no una nota) después de una tabla, con aire */
.tabla-envoltorio + p:not(.nota) {
  margin-top: 1.4em;
}

.tabla {
  width: 100%;
  max-width: 46em;
  margin: 10px 0 0;
  border-collapse: collapse;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.tabla caption {
  padding: 0 0 8px;
  color: var(--tinta-3);
  font-size: 0.875rem;
  text-align: left;
}

.tabla th,
.tabla td {
  padding: 7px 12px 7px 8px;
  text-align: left;
  vertical-align: top;
}

.tabla thead th {
  padding-top: 0;
  border-bottom: 2px solid var(--tinta);
  color: var(--tinta-2);
  font: 600 0.75rem/1.3 var(--mono);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: bottom;
}

.tabla tbody th {
  font-weight: 400;
  white-space: nowrap;
}

.tabla tbody tr:nth-child(6n + 1),
.tabla tbody tr:nth-child(6n + 2),
.tabla tbody tr:nth-child(6n + 3) {
  background: var(--barra);
}

.tabla tbody tr:last-child th,
.tabla tbody tr:last-child td {
  border-bottom: 1px solid var(--tinta);
}

.tabla .num {
  font-family: var(--mono);
  font-size: 0.875rem;
  text-align: right;
  white-space: nowrap;
}

.tabla thead .num {
  font-size: 0.75rem;
  white-space: normal;   /* las cabeceras largas pasan a dos líneas antes que ensanchar la tabla */
}

.tabla td small {
  display: block;
  color: var(--tinta-3);
  font-size: 0.75rem;
}

.tabla th small {
  color: var(--tinta-3);
  font-size: 0.75rem;
}

.tabla th small.debajo {
  display: block;
}

.tabla tbody th.envuelve {
  white-space: normal;
}

.tabla tr.suma th,
.tabla tr.suma td {
  border-top: 1px solid var(--tinta);
  font-weight: 600;
}

/* La columna de tu territorio en la comparativa: fosforito suave, sin las bandas */
.tabla .destacada {
  background: #fff3b8;
}

.tabla thead .destacada {
  color: var(--tinta);
}

.tabla-estrecha {
  max-width: 30em;
}

/* Tabla oficial: más apretada, y la casilla que te toca, con fosforito */
.tabla-retenciones th,
.tabla-retenciones td {
  padding: 5px 9px 5px 6px;
}

.tabla-retenciones tbody th {
  font-family: var(--mono);
  font-size: 0.8125rem;
}

.tabla-retenciones tr.marcada th {
  box-shadow: inset 4px 0 0 var(--tinta);
  font-weight: 600;
}

.tabla-retenciones td.marcada {
  background: linear-gradient(98deg, transparent 2px, var(--fosforito) 5px, var(--fosforito-2) calc(100% - 5px), transparent calc(100% - 2px));
  font-weight: 600;
}

.tabla-ancha {
  max-width: none;
}

.tabla-ancha th,
.tabla-ancha td {
  padding-left: 4px;
  padding-right: 7px;
}

/* --- Preguntas frecuentes --------------------------------------------------------------- */

.preguntas {
  max-width: 46em;
  border-top: 2px solid var(--tinta);
}

.preguntas details {
  border-bottom: 1px dashed var(--linea-2);
}

.preguntas summary {
  position: relative;
  padding: 14px 40px 14px 0;
  cursor: pointer;
  font-weight: 600;
  line-height: 1.4;
  list-style: none;
}

.preguntas summary::-webkit-details-marker {
  display: none;
}

.preguntas summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  border: 1.5px solid var(--tinta);
  border-radius: 4px;
  font: 600 1rem/21px var(--mono);
  text-align: center;
}

.preguntas details[open] summary::after {
  content: "−";
  background: var(--tinta);
  color: #fff;
}

.preguntas summary:hover {
  text-decoration: underline;
  text-decoration-color: #c99a00;
  text-decoration-thickness: 2px;
}

.preguntas details > p {
  margin: 0 0 18px;
  color: var(--tinta-2);
}

/* --- Ficha de fuentes: el pie del listado ------------------------------------------------- */

.ficha {
  max-width: 46em;
  margin-top: clamp(52px, 7vw, 80px);
  padding: 18px 0 0;
  border-top: 2px solid var(--tinta);
  font-size: 0.9375rem;
}

.ficha h2 {
  margin: 0 0 12px;
  font: 600 0.875rem/1.3 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ficha dl {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 8px 20px;
  margin: 0;
}

.ficha dt {
  color: var(--tinta-3);
  font: 600 0.8125rem/1.6 var(--mono);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ficha dd {
  margin: 0;
}

.aviso-legal {
  margin: 18px 0 0;
  padding: 10px 14px;
  border: 1px solid var(--tinta);
  font-size: 0.875rem;
}

/* --- Pie, fuera de la hoja ----------------------------------------------------------------- */

.pie {
  padding: 30px 0 48px;
  color: var(--carcasa-texto-2);
  font-size: 0.875rem;
}

.pie nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin-bottom: 14px;
}

.pie a {
  color: var(--carcasa-texto);
  text-decoration-color: rgba(255, 228, 90, 0.6);
}

.pie a:hover {
  background: none;
  color: #fff;
  text-decoration-color: var(--fosforito);
}

.pie p {
  max-width: 56em;
  margin: 0 0 8px;
}

.pie :focus-visible {
  outline-color: var(--fosforito);
}

/* --- Páginas de texto (privacidad) --------------------------------------------------------- */

.legal h1 {
  font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.1rem);
}

.legal h2 {
  margin-top: 38px;
  font-size: 1.5rem;
}

.legal p {
  max-width: 44em;
}

.boton {
  padding: 9px 16px;
  border: 1px solid var(--tinta);
  border-radius: 5px;
  background: #fff;
  color: var(--tinta);
  font-weight: 600;
  box-shadow: 0 2px 0 var(--tinta);
}

.boton:hover {
  background: var(--fosforito);
}

/* --- Descuento por huelga ------------------------------------------------------------------ */

/* Horas de huelga y horas a la semana, una al lado de la otra si caben */
.pareja {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
}

.pareja > div {
  flex: 1 1 10rem;
}

.importe-corto {
  max-width: 9rem;
}

/* «Afinar la retención»: los datos que solo cambian la retención, plegados como una pregunta */
.afinar {
  border-bottom: 1px dashed var(--linea-2);
}

.afinar summary {
  position: relative;
  min-height: 44px;
  padding: 14px 40px 14px 0;
  cursor: pointer;
  color: var(--tinta-2);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.35;
  text-transform: uppercase;
  list-style: none;
}

.afinar summary::-webkit-details-marker {
  display: none;
}

.afinar summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  border: 1.5px solid var(--tinta);
  border-radius: 4px;
  color: var(--tinta);
  font: 600 1rem/21px var(--mono);
  text-align: center;
}

.afinar[open] summary::after {
  content: "−";
  background: var(--tinta);
  color: #fff;
}

.afinar summary:hover {
  color: var(--tinta);
}

.afinar > .ayuda {
  margin: 0 0 4px;
}

.afinar > .dato:last-of-type,
.afinar .solo-comun {
  margin-bottom: 16px !important;
}

/* El error de los datos de la huelga, debajo de su grupo */
#huelga-error {
  margin: 0;
  padding: 10px 0 12px;
  border-bottom: 1px dashed var(--linea-2);
}

.tabla td.envuelve {
  white-space: normal;
}

/* --- Sueldo e IPC, finiquito y paro: zonas táctiles de 44 px ---------------------------------- */

:is(#form-ipc, #form-finiquito, #form-paro) .selector select,
:is(#form-ipc, #form-finiquito, #form-paro) .contador {
  min-height: 44px;
}

:is(#form-ipc, #form-finiquito, #form-paro) :is(.tecla-opcion, .interruptor label) span {
  padding-top: 11px;
  padding-bottom: 11px;
}

:is(#form-ipc, #form-finiquito, #form-paro) .opcion {
  min-height: 44px;
  align-items: center;
}

:is(#form-ipc, #form-finiquito, #form-paro) .opcion input {
  margin: 0;
}

/* --- Sueldo e IPC ------------------------------------------------------------------------- */

/* Mes y año, uno al lado del otro */
.mes-ano {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mes-ano .selector {
  flex: 1 1 9rem;
  max-width: 13rem;
}

.mes-ano .selector-ano {
  flex: 0 1 7.5rem;
}

.opcional {
  color: var(--tinta-3);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* Los sueldos anteriores: una fila por sueldo, con su mes, su importe y el botón para quitarla */
.anteriores {
  margin: 0;
  padding: 0;
  list-style: none;
}

.anterior {
  padding: 4px 0 14px;
}

.anterior[hidden] {
  display: none;
}

.anterior-titulo {
  margin: 0 0 6px;
  color: var(--tinta-2);
  font: 600 0.8125rem/1.3 var(--mono);
}

.anterior-campos {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
}

.importe-medio {
  flex: 1 1 8rem;
  max-width: 11rem;
}

.importe-medio input {
  font-size: 1.375rem;
}

.boton-mini {
  min-height: 44px;
  padding: 6px 12px;
  border: 1px solid var(--tinta);
  border-radius: 5px;
  background: #fff;
  color: var(--tinta);
  font: 600 0.875rem/1 var(--sans);
}

.boton-mini:hover {
  background: var(--barra);
}

.boton-mini:focus-visible,
.boton:focus-visible {
  outline: 3px solid var(--fosforito);
  outline-offset: 1px;
}

.boton-anadir {
  min-height: 44px;
}

.boton-anadir[hidden] {
  display: none;
}

#ipc-error,
#finiquito-error {
  margin: 0;
  padding: 10px 0 12px;
  border-bottom: 1px dashed var(--linea-2);
}

/* El resultado: el poder adquisitivo con fosforito, arriba, como el líquido de la nómina; las bandas
   del papel pijama, solo en las cuentas de debajo */
.listado.listado-ipc {
  background: #fff;
}

.listado-ipc .listado-tabla {
  background: repeating-linear-gradient(180deg, var(--barra) 0, var(--barra) calc(var(--renglon) * 3), rgba(255, 255, 255, 0) calc(var(--renglon) * 3), rgba(255, 255, 255, 0) calc(var(--renglon) * 6));
}

.listado-ipc .listado-tabla .imp {
  width: auto;
  padding-left: 1ch;
}

.liquido-poder > span {
  flex: 1 1 8rem;
  min-width: 0;
}

.liquido-poder {
  margin: 0;
  padding: 14px 0 12px;
  border-top: 0;
  border-bottom: 3px double var(--tinta);
}

.liquido-poder small {
  display: block;
  margin-top: 2px;
  color: var(--tinta-2);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.listado-ipc .listado-tabla {
  margin-top: 6px;
}

/* El gráfico: las líneas no engordan al estirarse y los textos son HTML, para que se lean en el móvil */
.grafico-ipc {
  margin: 28px 0 0;
}

.grafico-ipc.sin-dato,
.grafico-ipc.sin-dato + .tabla-envoltorio {
  opacity: 0.35;
}

.grafico-titulo {
  margin: 0 0 8px;
  color: var(--tinta-2);
  font: 600 0.8125rem/1.35 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.grafico-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0;
  padding: 0;
  color: var(--tinta-2);
  font-size: 0.8125rem;
  list-style: none;
}

.grafico-leyenda li,
.cursor-texto span[class] {
  display: flex;
  align-items: center;
  gap: 7px;
}

.grafico-leyenda li::before,
.cursor-texto span[class]::before {
  content: "";
  flex: none;
  width: 18px;
  border-top: 2.5px solid var(--tinta);
}

.grafico-leyenda .clave-precios::before,
.cursor-texto .clave-precios::before {
  border-top-color: var(--menos);
}

.grafico-leyenda .clave-pierdes::before,
.grafico-leyenda .clave-ganas::before {
  width: 14px;
  height: 11px;
  border: 0;
  background: rgba(162, 50, 31, 0.16);
}

.grafico-leyenda .clave-ganas::before {
  background: rgba(28, 106, 67, 0.16);
}

.grafico-lienzo {
  position: relative;
  height: 13.5rem;
  margin: 28px 0 0 2.75rem;
  border-bottom: 1px solid var(--tinta-3);
}

.grafico-lienzo:focus-visible {
  outline: 3px solid var(--fosforito);
  outline-offset: 6px;
}

.grafico-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.grafico-svg .rejilla {
  fill: none;
  stroke: var(--linea);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.grafico-svg .area-pierdes {
  fill: rgba(162, 50, 31, 0.13);
}

.grafico-svg .area-ganas {
  fill: rgba(28, 106, 67, 0.13);
}

.grafico-svg :is(.linea-precios, .linea-sueldo) {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.grafico-svg .linea-precios {
  stroke: var(--menos);
}

.grafico-svg .linea-sueldo {
  stroke: var(--tinta);
}

.eje-y {
  position: absolute;
  left: -2.75rem;
  width: 2.35rem;
  transform: translateY(-50%);
  color: var(--tinta-3);
  font: 400 0.75rem/1 var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.grafico-x {
  position: relative;
  height: 1.7rem;
  margin-left: 2.75rem;
}

.eje-x {
  position: absolute;
  top: 7px;
  color: var(--tinta-3);
  font: 400 0.75rem/1 var(--mono);
  white-space: nowrap;
}

.eje-x-c {
  transform: translateX(-50%);
}

.eje-x-d {
  transform: translateX(-100%);
}

/* Lo que ha subido cada línea, al final de la línea: el de arriba encima y el de abajo debajo */
.fin {
  position: absolute;
  right: 0;
  padding: 1px 4px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--tinta);
  font: 600 0.75rem/1.25 var(--mono);
  white-space: nowrap;
}

.fin.arriba {
  transform: translateY(calc(-100% - 5px));
}

.fin.abajo {
  transform: translateY(5px);
}

/* El cursor: una línea que sigue al ratón (o a las flechas) con los dos valores de ese mes */
.grafico-cursor {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  pointer-events: none;
}

.grafico-cursor[hidden] {
  display: none;
}

.cursor-linea {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-left: 1px solid var(--tinta);
}

.cursor-texto {
  position: absolute;
  top: 2px;
  left: 8px;
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 6px 9px;
  border: 1px solid var(--tinta);
  background: #fff;
  color: var(--tinta-2);
  font: 400 0.75rem/1.35 var(--mono);
  white-space: nowrap;
}

.grafico-cursor.a-la-izquierda .cursor-texto {
  left: auto;
  right: 8px;
}

.cursor-mes {
  color: var(--tinta);
  font-weight: 600;
}

.cursor-texto b {
  color: var(--tinta);
  font-weight: 600;
}

.grafico-vacio {
  margin: 0;
}

.tabla-grafico {
  max-width: 32em;
  margin-top: 18px;
}

.tabla-grafico :is(th, td) {
  padding-left: 5px;
  padding-right: 7px;
}

/* En el móvil, mientras se rellena el formulario: el resultado, en una tira fija abajo */
.ver-resultado {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 5;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 10px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--carcasa);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  color: #fff;
  font: 600 0.8125rem/1.3 var(--mono);
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
}

.ver-resultado[hidden] {
  display: none;
}

.ver-resultado:hover {
  background: var(--carcasa-2);
}

.ver-resultado b {
  padding: 0 0.25em;
  background: var(--fosforito);
  color: var(--tinta);
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

.ver-flecha {
  margin-left: auto;
  color: var(--carcasa-texto);
  font-weight: 400;
  text-transform: none;
}

.ver-flecha::after {
  content: " ↓";
}

.cambios {
  margin-top: 8px;
}

.cambios[hidden] {
  display: none;
}

/* --- Finiquito ------------------------------------------------------------------------------ */

/* Lo que el guion esconde según cómo acaba el contrato (las opciones y las casillas tienen su display) */
:is(#form-finiquito, #form-paro) [hidden] {
  display: none !important;
}

.selector-ancho {
  max-width: 27rem;
}

/* Las fechas del contrato, como las cifras tecleadas */
.fecha {
  width: 100%;
  max-width: 13rem;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid var(--tinta);
  border-radius: 5px;
  background: #fff;
  color: var(--tinta);
  font: 600 1rem/1.3 var(--mono);
}

.fecha:focus-visible {
  outline: 3px solid var(--fosforito);
  outline-offset: 0;
}

.fecha[aria-invalid="true"] {
  border-color: var(--menos);
  color: var(--menos);
}

/* Los días de vacaciones y, a su lado, «naturales / laborables» */
.fila-vacaciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}

.fila-vacaciones .importe {
  flex: 0 1 9rem;
}

.interruptor-alto {
  margin-top: 0;
}

.rotulo-segundo {
  margin-top: 20px;
}

/* El recibo: papel blanco, las bandas verdes por grupos (finiquito y deducciones) y el sello. El del paro
   (.listado-paro) lleva también la clase .listado-finiquito: los mismos papeles, con un tramo por banda */
.listado.listado-finiquito {
  background: #fff;
}

.listado-finiquito .listado-cab {
  position: relative;
  min-height: 0;
  padding-right: 9.5rem;
}

.listado-finiquito tbody.banda {
  background: var(--barra);
}

.listado-finiquito .listado-sub span {
  white-space: nowrap;
}

.listado-finiquito .listado-tabla tr > :first-child {
  padding-left: 1ch;
}

.listado-finiquito .listado-tabla tbody th[scope="row"] {
  padding-left: 2ch;
}

.listado-finiquito .listado-tabla tr > :last-child {
  padding-right: 1ch;
}

.listado-finiquito tbody.total tr.suma :is(th, td) {
  border-top: 2px solid var(--tinta);
}

.listado-finiquito .listado-tabla {
  font-size: 0.875rem;
}

/* Dos columnas: el importe, tan estrecho como su cifra, y el concepto con su detalle (días, %) a la derecha,
   que baja de renglón si no cabe */
.listado-finiquito .listado-tabla .imp {
  width: 1%;
  padding-left: 1ch;
}

.listado-finiquito .listado-tabla th .pc {
  float: right;
  width: auto;
  margin-left: 2ch;
  padding-right: 0;
  font-family: var(--mono);
  font-size: inherit;
}

/* Si un concepto no cabe en un renglón, que respire */
.listado-finiquito .listado-tabla th[scope="row"] {
  padding-top: 3px;
  padding-right: 1.5ch;
  padding-bottom: 3px;
  line-height: 1.3;
}

/* La indemnización, marcada con fosforito y en un renglón doble */
.listado-finiquito tr.fila-ind :is(th, td) {
  height: calc(var(--renglon) * 1.9);
}

.fosforito.fosforito-linea {
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}

.liquido-cifra {
  font: 600 clamp(1.6rem, 1.3rem + 1.1vw, 2.15rem)/1.15 var(--mono);
  letter-spacing: -0.03em;
  white-space: nowrap;
}

/* El sello de tinta roja: que nadie lo tome por un finiquito de verdad */
.sello {
  position: absolute;
  top: 13px;
  right: -6px;
  margin: 0;
  padding: 5px 10px 6px;
  border: 2px solid var(--menos);
  border-radius: 3px;
  box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px var(--menos);
  color: var(--menos);
  font: 700 0.875rem/1.1 var(--mono);
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-6deg);
  opacity: 0.88;
  pointer-events: none;
}

.sello small {
  display: block;
  margin-top: 2px;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.listado-aviso {
  margin: 14px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--linea-2);
  color: var(--tinta-3);
  font: 400 0.75rem/1.45 var(--mono);
}

.tabla-tipos {
  min-width: 46rem;
}

.tabla-tipos :is(th, td) {
  vertical-align: top;
}

/* --- Pantallas medianas y móviles ---------------------------------------------------------- */

@media (max-width: 1060px) {
  .cuerpo {
    grid-template-columns: minmax(0, 1fr);
  }

  .indice {
    position: static;
    grid-column: 1;
    grid-row: auto;
    margin-bottom: 40px;
  }

  .indice ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0 22px;
  }

  .indice li {
    border: 0;
  }

  .indice li a {
    padding: 4px 0;
    color: var(--tinta);
    text-decoration: underline;
    text-decoration-color: #c99a00;
  }

  .indice .subir {
    display: none;
  }

  .cuerpo-texto {
    grid-row: auto;
  }
}

@media (max-width: 920px) {
  .calculadora {
    grid-template-columns: minmax(0, 1fr);
  }

  .resultado {
    position: static;
    max-width: 600px;
    margin-top: 34px;
  }
}

@media (max-width: 760px) {
  :root {
    --arrastre: 30px;
    --agujero: 4.5px;
    --paso-agujero: 28px;
  }

  .barras-leyenda {
    display: none;
  }

  .barras li {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "nombre valor"
      "carril dif";
    gap: 4px 14px;
    padding: 10px 0;
  }

  .barras .nombre {
    grid-area: nombre;
  }

  .barras .valor {
    grid-area: valor;
    text-align: right;
  }

  .barras::before {
    display: none;
  }

  .barras .carril {
    grid-area: carril;
    border-bottom: 1px dotted var(--linea-2);
  }

  .barras .carril::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -3px;
    bottom: -3px;
    border-left: 1px solid var(--tinta-3);
  }

  .barras .dif {
    grid-area: dif;
  }

  .bloque .lurralde-estekak {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  body {
    font-size: 1rem;
  }

  :root {
    --arrastre: 20px;
    --agujero: 3.5px;
    --paso-agujero: 22px;
    --aire: 14px;
  }

  /* Solo a los lados: la cabecera y la botonera también son .marco y conservan su aire vertical */
  .marco {
    padding-left: 8px;
    padding-right: 8px;
  }

  /* La botonera es ella misma un .marco y ocupa todo el ancho: sin márgenes negativos, que la
     sacarían de la pantalla y la página se movería de lado */
  .impresora-sup,
  .botonera {
    padding-left: 12px;
    padding-right: 12px;
  }

  .tecla {
    padding: 8px 12px 9px 10px;
    font-size: 0.875rem;
  }

  .cifras {
    grid-template-columns: minmax(0, 1fr);
  }

  .cifra {
    padding: 10px 0;
    border-bottom: 1px dashed var(--linea-2);
  }

  .cifra + .cifra {
    padding-left: 0;
    border-left: 0;
  }

  .cifra-valor {
    font-size: 2.1rem;
  }

  .listado {
    padding: 0 12px 16px;
  }

  .listado-tabla {
    font-size: 0.875rem;
  }

  .listado-tabla .pc {
    width: 6.5ch;
    padding-right: 1ch;
  }

  .listado-tabla tbody th[scope="row"] {
    padding-left: 0.5ch;
  }

  .listado-finiquito .listado-tabla tbody th[scope="row"] {
    padding-left: 1.4ch;
  }

  .listado-finiquito .listado-tabla tr > :first-child {
    padding-left: 0.6ch;
  }

  .listado-finiquito .listado-tabla tr > :last-child {
    padding-right: 0.6ch;
  }

  .ficha dl {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .ficha dd {
    margin-bottom: 10px;
  }
}

/* Móviles pequeños: los conceptos de la nómina en letra proporcional, que ocupa menos */
@media (max-width: 440px) {
  :root {
    --arrastre: 16px;
    --agujero: 3px;
    --paso-agujero: 18px;
    --aire: 12px;
  }

  .listado {
    padding: 0 10px 14px;
  }

  .listado-tabla tbody th[scope="row"],
  .listado-pie dt,
  .listado-sub {
    font-family: var(--sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
  }

  .listado-tabla tr.suma th[scope="row"] {
    font-weight: 600;
  }

  .listado-tabla .pc {
    width: 6ch;
    padding-right: 0.8ch;
    font-size: 0.8125rem;
  }

  .listado-tabla .imp {
    width: 9ch;
  }

  .liquido span {
    font-size: 0.8125rem;
  }

  /* El sello baja al renglón de las fechas, a la derecha: arriba, al lado del título, no cabe */
  .listado-finiquito .listado-cab {
    padding-right: 0;
  }

  .listado-finiquito .listado-titulo {
    flex-basis: 100%;
  }

  .sello {
    position: relative;
    top: auto;
    right: -4px;
    order: 5;
    margin-left: auto;
    padding: 4px 6px 5px;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    transform: rotate(-4deg);
  }

  .sello small {
    font-size: 0.5rem;
    letter-spacing: 0.03em;
  }

  .listado-finiquito .listado-pie div {
    flex-wrap: wrap;
  }

  .listado-finiquito .listado-pie dd {
    margin-left: auto;
  }

  .fosforito.fosforito-linea {
    font-size: 0.9375rem;
  }

  .listado-finiquito .listado-tabla th .pc {
    margin-left: 1ch;
  }

  .listado-finiquito .listado-tabla th[scope="row"] {
    padding-right: 1ch;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

@media print {
  body {
    background: #fff;
  }

  .impresora,
  .pie,
  .indice,
  .saltar,
  .tecla-mini,
  .ver-resultado,
  .grafico-cursor,
  ins.adsbygoogle {
    display: none !important;
  }

  .listado {
    box-shadow: none;
  }

  .listado-finiquito tbody.banda,
  .fosforito,
  .sello {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Impreso, el recibo del finiquito lleva cruzada la palabra «orientativo»: que nadie lo tome por uno de verdad */
  .listado-finiquito {
    position: relative;
  }

  .listado-finiquito::after {
    content: "Orientativo";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-24deg);
    color: rgba(162, 50, 31, 0.2);
    font: 700 2.5rem/1 var(--mono);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  :lang(eu) .listado-finiquito::after {
    content: "Orientagarria";
  }

  .hoja {
    margin: 0;
    padding: 0;
    background: #fff;
  }

  .hoja::before,
  .hoja::after,
  .corte {
    display: none;
  }

  .resultado {
    position: static;
  }
}

/* --- Paro ----------------------------------------------------------------------------------- */

/* El tramo del 60 % se esconde cuando el paro no pasa del día 180 */
.listado-paro tbody[hidden] {
  display: none;
}