:root {
  --card-bg:#92eadad7;
  --muted:#666; 
  --border:#e7e7f3; 
  --ink:#222; 
}

/* Base */
html,body{height:100%}
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial;
  background:#8bb7cb;
  margin:0;
  padding:24px;
  color:var(--ink);
}

/* Container */
.card { 
  max-width: 1500px; 
  width: min(95vw, 1500px);
  margin: 0 auto;
}
h1 { 
  margin: 0 0 8px 0;
  font-size: 22px;
}

/* Labels */
label { display:block; 
  font-size:14px; 
  margin:10px 0 4px; 
  color:#333; 
}

/* === Layout v34 (tres columnas) === */
/* Contenedor maestro: usamos flex para lograr 3 columnas prácticas */
.grid{ 
  display:flex; 
  gap:48px; 
  align-items:flex-start; 
}

/* Columna izquierda: selectores de nivel/cargo, fija en alto */
.leftCol{
  flex:1 1 auto;
  min-width:720px;
  display:grid;
  grid-template-columns: minmax(320px,360px) 1fr;
  gap:24px;
  align-items:start;
}
.sidebar{
  grid-column:1;
  grid-row:1 / span 2;   /* ocupa alto de fechas+liq */
  position:sticky;
  top:12px;
  align-self:start;
}
.stack{ 
  grid-column:2; 
  grid-row:1; 
}
#liqBlock{ 
  grid-column:2; 
  grid-row:2; 
}

/* Columna derecha: apilada (Desglose / Aguinaldo / Décimas) */
.rightCol{ 
  width: min(420px, 40vw); 
  display:flex; 
  flex-direction:column; 
  gap:24px; 
}
.months-box{
  display:block; 
  }
#sacBox, #decimasBox{ 
  grid-column:auto; 
  grid-row:auto; 
}
#decimasDetalle{ 
  display:none !important; 
}

/* Responsive */
@media (max-width: 1200px){
  .grid{ flex-direction:column; 
    gap:24px; 
  }
  .leftCol{ 
    min-width:0; 
    grid-template-columns:1fr; 
  }
}

/* === Visual de resultados/controles (igual v34) === */
.result { 
  background:#f7f7fb; 
  border:1px solid var(--border);
  padding:14px; 
  border-radius:12px;
  margin-top: 14px;
  display:inline-block;
}
/* Hace que el card de "Liquidación" ocupe todo el ancho del track central */
#liqBlock {
  display: block;    /* antes heredaba inline-block de .result */
  width: 100%; /* llena el track del grid (.grid-2) */
  margin-top: 0px;      
}

.muted { color:var(--muted); font-size: 13px; }
.title { font-weight: 600; font-size: 16px; }
input[type="date"] { width: 14ch; padding:10px 12px; border:1px solid #d6d6e7; border-radius:12px; outline:none; }

table { width:auto; border-collapse: collapse; font-size: 14px; table-layout: auto; }
th, td { padding:3px 6px; border-bottom:1px solid var(--border); }
th { font-weight:600; font-size:13px; color:#444; }
th:nth-child(2), td:nth-child(2){ text-align:right; min-width: 48px; }
tfoot td { font-weight:700; }

.pill { display:inline-block; padding:2px 8px; border-radius:999px; border:1px solid #cfd3ea; background:#fff; font-size:12px; }
.months-header { display:flex; flex-direction:column; align-items:flex-start; gap:4px; margin-bottom:8px; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

select { padding:6px 10px; border:1px solid #d6d6e7; border-radius:10px; background:#fff; width:auto; }

/* Mini índice */
.mini { width:78px; border:1px solid #bfc3d6; border-radius:6px; overflow:hidden; box-shadow: inset 0 0 0 1px #fff; }
.mini-top { background:#ededf3; text-align:center; font-weight:600; font-size:11px; padding:4px 4px; }
.mini-bottom { background:#fff36b; text-align:center; font-weight:800; font-size:18px; padding:3px; }
.mini-bottom input { width:100%; text-align:center; border:none; background:transparent; font:inherit; outline:none; }

/* Tablas de la liquidación */
.tabla-codigos{ width:100%; border-collapse:collapse; font-size:14px; table-layout:auto; }
.tabla-codigos th,.tabla-codigos td{ border-bottom:1px solid var(--border); padding:6px 8px; }
.tabla-codigos thead th{ background:#d6e4f0; color:#333; }
.liq-columns{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; align-items:start; }
.liq-columns > div{ align-self:start; }

/* Anchos consistentes en la 1ª columna de ambas tablas */
#liqBlock .tabla-codigos th:first-child, #liqBlock .tabla-codigos td:first-child,
#complementoBox .tabla-codigos th:first-child, #complementoBox .tabla-codigos td:first-child { width: 180px; }

/* Encabezados alineados en Complemento */
#complementoBox{ position: relative; }
#complementoBox > .muted{ position:absolute; top:-24px; left:0; margin:0; }
#complementoBox > .pill{ position:absolute; top:-28px; right:0; margin:0; }

/* Fila altura uniforme */
#liqBlock .tabla-codigos thead th,
#liqBlock .tabla-codigos tbody td{ height: 28px; }

/* ===== Extras (checkboxes) ===== */
#optExtras {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 12px;
  color: var(--muted);
}

#optExtras > span.label {
  margin-right: 4px;
}

#optExtras label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--ink);
}

#indicePeriodo {
  margin-left: 8px;
  min-width: 110px;
}

/* Cuando el select tiene size (lista abierta): que se expanda y aparezca scroll */
#indicePeriodo[size] {
  height: auto;           /* deja que el navegador calcule la altura de 6 filas */
  max-height: 10.5em;     /* un límite razonable por si un navegador no respeta size */
  overflow-y: auto;
}


/* Wrap en pantallas angostas */
@media (max-width: 680px) {
  #optExtras {
    flex-wrap: wrap;
    gap: 8px 12px; /* filas x columnas */
    margin-left: 0;
  }
}

/* Contenedor principal de 3 columnas (versión v34) */
.grid-2 {
  display: grid;
  grid-template-columns: 1100px 1fr 360px;
  column-gap: 48px;/* espacio entre columnas*/
}

/* ===== Layout 3 columnas ===== */
.grid {
  display: grid;
  /* izq: 340px  | centro: crece entre 560–760 | der: 360px  */
  grid-template-columns: 340px 760px 360px;
  column-gap: 48px; /* espacio entre columnas*/
  align-items: start; /* que todo arranque arriba */
}

/* Mapeo de columnas (usando tus clases/ids actuales) */
.leftCol        { grid-column: 1; }
#liqBlock,
.col-center     { grid-column: 2; }
.rightCol,
.col-right      { grid-column: 3; }

/* La columna derecha se queda “pegada” al top al hacer scroll */
.rightCol,
.col-right {
  position: sticky;
  top: 96px;        /* ajustá si querés que baje/suba */
  align-self: start;
}

/* Asegura que los cards de la derecha usen el ancho de su columna */
.rightCol > * ,
.col-right > * {
  width: 100%;
  box-sizing: border-box;
}

/* Responsive: en pantallas chicas, apilamos todo */
@media (max-width: 1366px) {
  .grid {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }
  .rightCol,
  .col-right {
    position: static; /* sin sticky en móvil */
  }
}

.rightCol { top: 30px; }  /* subí/bajá ese 96px a gusto */

.grid {
  grid-template-columns: 340px minmax(600px, 820px) 360px;
}
.rightCol,
.col-right {
  position: sticky;
  top: 30px;      /* subí/bajá a 60/96 si querés más aire */
  align-self: start;
}

.wrap { max-width: 1480px; margin: 0 auto; padding: 0 24px; }
.grid { grid-template-columns: 300px minmax(520px, 760px) 320px; }

/* ===== Presentación compacta y solo visualización ===== */
.num-display {
  width: 10ch;                 /* tamaño compacto aproximado al contenido */
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* quitar flechas en number para que sea realmente solo lectura visual */
.num-display[readonly]::-webkit-outer-spin-button,
.num-display[readonly]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.num-display[readonly] {
  appearance: textfield;
}

/* Select de período al lado del índice */
#indicePeriodo {
  margin-left: 8px;
  min-width: 110px;
}

/* Si alguna vez se usa <select size=...> (lista abierta), que sea scrollable */
#indicePeriodo[size] {
  height: auto;
  max-height: 10.5em;
  overflow-y: auto;
}
/* ===== Interacciones y look de controles ===== */
select,
input[type="radio"],
input[type="checkbox"],
label[for] {
  cursor: pointer;
}

/* Hover/focus con borde dorado en controles seleccionables */
select:hover,
select:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
  outline: none;
  border-color: #d4a017 !important; /* dorado suave */
  box-shadow: 0 0 0 2px rgba(212,160,23,0.2);
}

/* Presentación compacta de los campos numéricos “solo visualización” */
.num-display[readonly] {
  width: 10ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
  appearance: textfield;
}
.num-display[readonly]::-webkit-outer-spin-button,
.num-display[readonly]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Cuando el select se “expande” a lista (size=6), que tenga límite y scroll */
#indicePeriodo[size="6"] {
  max-height: 11.5em;          /* ~6 filas */
  overflow-y: auto;
}
/* ===== Interacciones y look de controles ===== */

/* Cursor “manito” en controles seleccionables */
select,
input[type="radio"],
input[type="checkbox"],
input[type="date"],
label[for] {
  cursor: pointer;
}

/* Hover/focus con borde dorado en controles clave */
select:hover,
select:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus,
input[type="date"]:hover,
input[type="date"]:focus {
  outline: none;
  border-color: #d4a017 !important; /* dorado suave */
  box-shadow: 0 0 0 2px rgba(212,160,23,0.2);
}

/* Campos numéricos “solo visualización” (compactos, sin flechitas) */
.num-display[readonly] {
  width: 10ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
  appearance: textfield;
}
.num-display[readonly]::-webkit-outer-spin-button,
.num-display[readonly]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Select de período: ancho mínimo razonable */
#indicePeriodo {
  min-width: 120px;
}

/* Si en algún momento se usa <select size="...">, limitar y permitir scroll
   (NO lo activamos por JS para evitar reflow del layout) */
#indicePeriodo[size] {
  max-height: 11.5em;  /* ~6 filas */
  overflow-y: auto;
}
/* Señal de interacción consistente */
select,
input[type="radio"],
input[type="checkbox"],
input[type="date"],
label[for],
#antiguedadAnios { cursor: pointer; }

select:hover, select:focus,
input[type="date"]:hover, input[type="date"]:focus,
input[type="radio"]:focus, input[type="checkbox"]:focus,
#antiguedadAnios:hover, #antiguedadAnios:focus,
#antiguedadSelect:hover,  #antiguedadSelect:focus {
  outline: none;
  border-color: #d4a017 !important;
  box-shadow: 0 0 0 2px rgba(212,160,23,.2);
}

/* Campos de índice solo visual (compactos y redondeados) */
.num-display[readonly]{
  width: 10ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
  appearance: textfield;
  border: 1px solid #d6d6e7;
  border-radius: 10px;
  padding: 6px 8px;
}
.num-display[readonly]::-webkit-outer-spin-button,
.num-display[readonly]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Bordes redondeados en campos y selectores */
.num-display[readonly],
#indicePeriodo,
#antiguedadSelect { border-radius: 10px; }

/* (Opcional) Ancho mínimo razonable del select de índice */
#indicePeriodo { min-width: 120px; }
/* Antigüedad: look compacto y redondeado (2 dígitos) */
#antiguedadAnios {
  /* ancho para 2 dígitos + padding/flechas; si el tema lo estira, forzamos con !important */
  width: 5.5ch !important;   /* ~2 dígitos cómodos */
  min-width: 5.5ch !important;
  max-width: 6ch;

  border-radius: 10px !important;
  padding: 6px 8px;
  text-align: right;
  font-variant-numeric: tabular-nums;

  /* Por si alguna regla global lo hace block/100% */
  display: inline-block;
  box-sizing: border-box;
}

/* El hover/focus dorado ya existe para inputs; lo reforzamos por si el tema lo pisa */
#antiguedadAnios:hover,
#antiguedadAnios:focus {
  outline: none;
  border-color: #d4a017 !important;
  box-shadow: 0 0 0 2px rgba(212,160,23,0.2);
  cursor: pointer;
}
/* Antigüedad: borde fino + ancho 2 dígitos sin que tape el spinner */
#antiguedadAnios {
  /* Borde y radio iguales al resto (quitar look “negrita”) */
  border: 1px solid #d6d6e7 !important;
  border-radius: 10px !important;

  /* Tipografía y caja */
  font-weight: 400;                  /* asegurar que no se vea “bold” */
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  text-align: right;
  box-sizing: border-box;
  display: inline-block;

  /* Ancho compacto para 2 dígitos + espacio del spinner */
  /* (las flechitas ocupan ~2em; reservamos padding-right para que no tapen) */
  width: 8ch !important;             /* 2 dígitos cómodos + padding */
  min-width: 8ch !important;
  max-width: 9ch;
  padding: 6px 2.2em 6px 8px;        /* ← espacio derecho para el spinner */
}

/* El hover/focus dorado ya existe, lo reforzamos por si hay overrides */
#antiguedadAnios:hover,
#antiguedadAnios:focus {
  outline: none;
  border-color: #d4a017 !important;
  box-shadow: 0 0 0 2px rgba(212,160,23,0.2);
  cursor: pointer;
}
/* Antigüedad: que las flechitas no tapen los dígitos */
#antiguedadAnios {
  /* mantener borde fino y redondeado (sin “negrita”) */
  border: 1px solid #d6d6e7 !important;
  border-radius: 10px !important;

  /* caja y tipografía */
  box-sizing: border-box;
  display: inline-block;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  text-align: right;

  /* ancho compacto (2 dígitos) — no lo cambiamos */
  width: 8ch !important;
  min-width: 8ch !important;
  max-width: 9ch;

  /* *** clave: más espacio a la derecha para el spinner *** */
  /* si aún tapa, subir a 2.9em o 3em */
  padding: 6px 2.8em 6px 8px;
}

/* Hover/focus dorado (mantener comportamiento) */
#antiguedadAnios:hover,
#antiguedadAnios:focus {
  outline: none;
  border-color: #d4a017 !important;
  box-shadow: 0 0 0 2px rgba(212,160,23,0.2);
  cursor: pointer;
}
/* — Antigüedad (años): dos dígitos visibles + spinner sin superposición — */
#antiguedadAnios {
  /* ancho = 2ch de texto + espacio reservado para el spinner */
  width: calc(2ch + 2.6em);
  min-width: calc(2ch + 2.6em);

  /* espacio interno: reservamos a la derecha para el spinner */
  padding: 4px 2.1em 4px .45em;

  /* look consistente con el resto */
  border: 1px solid #d6d6e7;
  border-radius: 10px;
  box-sizing: content-box;

  /* legibilidad de números y alineación */
  text-align: right;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

/* Hover/focus dorado (igual al resto) */
#antiguedadAnios:hover,
#antiguedadAnios:focus {
  outline: none;
  border-color: #d4a017 !important;
  box-shadow: 0 0 0 2px rgba(212,160,23,.2);
  cursor: pointer;
}

/* WebKit: evitamos que el spinner “invada” el área de texto */
#antiguedadAnios::-webkit-outer-spin-button,
#antiguedadAnios::-webkit-inner-spin-button {
  margin-left: .2em;   /* empujón leve a la derecha */
}

/* (Opcional) Windows/Chrome tiende a engordar el borde en focus:
   normalizamos el grosor para que no se vea “negrita” */
#antiguedadAnios:focus {
  border-width: 1px;
}
/* Antigüedad: ancho compacto (2 dígitos), sin superposición del spinner */
#antiguedadAnios {
  /* Borde/look unificado (fino, redondeado) */
  border: 1px solid #d6d6e7 !important;
  border-radius: 10px !important;

  /* Caja y tipografía */
  box-sizing: content-box;           /* conserva espacio real del contenido */
  display: inline-block;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  line-height: 1.2;

  /* Ancho justo: 2 dígitos + espacio reservado para el spinner */
  /* (más compacto que antes, sin cortar los números) */
  width: 6.4ch !important;
  min-width: 6.4ch !important;
  max-width: 6.8ch;

  /* Reservar lugar para el spinner a la derecha (sin tapar los dígitos) */
  padding: 6px 2.1em 6px 8px;        /* ↑ si aún roza, subir a 2.2em */
}

/* Hover/focus dorado (mantener comportamiento) */
#antiguedadAnios:hover,
#antiguedadAnios:focus {
  outline: none;
  border-color: #d4a017 !important;
  box-shadow: 0 0 0 2px rgba(212,160,23,0.2);
  cursor: pointer;
}

/* WebKit: empuje sutil del spinner (si el navegador lo respeta) */
#antiguedadAnios::-webkit-inner-spin-button,
#antiguedadAnios::-webkit-outer-spin-button {
  margin-left: .15em; /* opcional; algunos motores lo ignoran y no afecta */
}