/* Seman · Liquidaciones de tarjetas
   Paleta y estructura del Gestor de tiempo (papel, tinta, azul, cinta métrica), sin la serif de trazo fino:
   todo en IBM Plex Sans. De BAS toma la cabecera de campos en recuadros, las solapas y los códigos en azul. */

:root {
  --papel: #F2EEE5;
  --papel-2: #E8E2D4;
  --blanco: #FBFAF6;
  --tinta: #1C1B19;
  --tinta-2: #4A463F;
  --tinta-3: #66604F;
  --linea: #D3CBBA;
  --azul: #1F2B3D;
  --azul-2: #33435C;
  --bordo: #7A2C25;
  --ocre: #8A5D16;
  --verde: #3D5A42;
  --camel: #B08D57;
  --fondo-ok: #E3EADF;
  --fondo-aviso: #F3E8D2;
  --fondo-error: #F4E6E2;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --ancho: 1240px;
  --margen: 32px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 16px/1.5 var(--sans);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
h1, h2, h3 { font-weight: 600; margin: 0; }
p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--camel); outline-offset: 2px; }

.rotulo {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.tenue { color: var(--tinta-3); }
.nota { margin-top: 12px; font-size: 14px; color: var(--tinta-3); max-width: 80ch; }
.mono, .cod { font-family: var(--mono); font-size: 14px; }

/* ---------- Cabecera ---------- */

.cabecera { max-width: var(--ancho); margin: 0 auto; padding: 22px var(--margen) 0; }
.cabecera-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.marca { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; text-decoration: none; }
.marca b { font-size: 24px; font-weight: 600; line-height: 1; letter-spacing: .3em; text-transform: uppercase; margin-right: -.3em; }
.marca span { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
.usuario { display: flex; gap: 14px; align-items: baseline; font-size: 14px; color: var(--tinta-3); }

.pestanas { display: flex; gap: 30px; margin-top: 20px; overflow-x: auto; scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }
.pestanas a {
  padding: 0 0 11px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-2);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.pestanas a:hover { color: var(--tinta); }
.pestanas a[aria-current="page"] { color: var(--tinta); border-bottom-color: var(--tinta); }
.pestanas a .cuenta { margin-left: 6px; padding: 1px 6px; font-size: 11px; color: var(--blanco); background: var(--camel); border-radius: 2px; }

.cinta {
  height: 9px;
  border-bottom: 1px solid var(--tinta);
  background:
    repeating-linear-gradient(90deg, var(--tinta) 0 1px, transparent 1px 50px) left bottom / 100% 9px no-repeat,
    repeating-linear-gradient(90deg, var(--tinta-3) 0 1px, transparent 1px 10px) left bottom / 100% 4px no-repeat;
}

.subpestanas-env { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); }
.subpestanas { display: flex; gap: 28px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--linea); }
.subpestanas a {
  padding: 14px 0 10px;
  font-size: 16px;
  color: var(--tinta-2);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.subpestanas a:hover { color: var(--tinta); }
.subpestanas a[aria-current="page"] { color: var(--tinta); font-weight: 500; border-bottom-color: var(--tinta); }

main { max-width: var(--ancho); margin: 0 auto; padding: 36px var(--margen) 96px; }
.cargando { color: var(--tinta-3); }

/* ---------- Encabezados ---------- */

.encabezado { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px 32px; flex-wrap: wrap; margin-bottom: 28px; }
.encabezado h1 { font-size: 34px; line-height: 1.1; margin-top: 6px; letter-spacing: -.01em; }
.encabezado p { margin-top: 10px; max-width: 70ch; color: var(--tinta-2); }
.acciones { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.seccion { margin-top: 44px; }
.seccion-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.seccion-cab h2 { font-size: 21px; line-height: 1.2; }
.volver { display: inline-block; margin-bottom: 14px; font-size: 14px; color: var(--tinta-2); }

/* ---------- Botones ---------- */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px;
  font: 600 13px/1 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--blanco);
  background: var(--azul);
  border: 1px solid var(--azul);
  border-radius: 2px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.boton:hover { background: var(--azul-2); border-color: var(--azul-2); }
.boton:disabled { opacity: .55; cursor: progress; }
.boton.sec { color: var(--tinta); background: transparent; border-color: var(--tinta); }
.boton.sec:hover { background: var(--papel-2); }
.boton.chico { padding: 7px 11px; font-size: 12px; }
.boton.peligro { color: var(--bordo); background: transparent; border-color: var(--bordo); }
.boton.peligro.confirmar { color: var(--blanco); background: var(--bordo); }

.enlace {
  padding: 0; font: inherit; color: var(--tinta); background: none; border: 0;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer;
}
/* Como en BAS: los códigos que llevan a otro lado van en azul subrayado. */
.enlace-bas { color: var(--azul-2); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; background: none; border: 0; padding: 0; font: inherit; }

/* ---------- Tablas ---------- */

.tabla-env { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th {
  padding: 7px 10px;
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  text-align: left; color: var(--tinta-3);
  background: var(--papel-2);
  border-bottom: 1px solid var(--tinta);
  white-space: nowrap;
}
td { padding: 8px 10px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.num { text-align: right; white-space: nowrap; }
.nowrap { white-space: nowrap; }
tr.clic { cursor: pointer; }
tr.clic:hover td, tr.clic:focus-visible td { background: var(--papel-2); }
tr.clic:focus-visible { outline: none; }
tr.apagado td { color: var(--tinta-3); }
tfoot td { border-top: 1px solid var(--tinta); border-bottom: 0; font-weight: 600; }

.vacio { padding: 22px 0; color: var(--tinta-2); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.vacio p { max-width: 70ch; }
.vacio p + p { margin-top: 8px; }

/* Etiquetas de estado: tono de fondo suave y texto del mismo color, más fuerte. */
.pill { display: inline-block; padding: 1px 8px; font-size: 12px; font-weight: 500; white-space: nowrap; border-radius: 2px; }
.pill.ok { color: var(--verde); background: var(--fondo-ok); }
.pill.aviso { color: var(--ocre); background: var(--fondo-aviso); }
.pill.error { color: var(--bordo); background: var(--fondo-error); }
.pill.neutro { color: var(--tinta-2); background: var(--papel-2); }
.pill.azul { color: var(--blanco); background: var(--azul-2); }

/* ---------- Filtros ---------- */

.filtros { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 32px; margin-bottom: 16px; }
.grupo-filtro { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.grupo-filtro button {
  padding: 2px 0; font: inherit; font-size: 15px; color: var(--tinta-2);
  background: none; border: 0; border-bottom: 1px solid transparent; cursor: pointer;
}
.grupo-filtro button:hover { color: var(--tinta); }
.grupo-filtro button[aria-pressed="true"] { color: var(--tinta); border-bottom-color: var(--tinta); }

/* ---------- Bandeja ---------- */

.contadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); border-top: 1px solid var(--tinta); border-bottom: 1px solid var(--linea); }
.contadores a { display: block; padding: 16px 18px 18px 0; text-decoration: none; }
.contadores a + a { padding-left: 18px; border-left: 1px solid var(--linea); }
.contadores b { display: block; margin-top: 6px; font-size: 38px; font-weight: 600; line-height: 1; }
.contadores a:hover b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }

.avisos { display: grid; gap: 10px; margin-top: 28px; }
.aviso-suave {
  display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--camel);
  border-radius: 0;
}
.aviso-suave p { color: var(--tinta-2); }
.aviso-suave b { color: var(--tinta); font-weight: 600; }

/* ---------- Archivos ---------- */

.soltar {
  display: block;
  padding: 26px 20px;
  text-align: center;
  background: var(--blanco);
  border: 1.5px dashed var(--camel);
  border-radius: 2px;
  cursor: pointer;
}
.soltar b { display: block; font-size: 17px; font-weight: 600; }
.soltar span { display: block; margin-top: 4px; font-size: 14px; color: var(--tinta-3); }
.soltar.encima { background: var(--fondo-aviso); border-style: solid; }
.soltar input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.progreso { margin-top: 12px; display: grid; gap: 6px; }
.progreso div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; font-size: 14px; background: var(--blanco); border: 1px solid var(--linea); }

/* ---------- Liquidación (cabecera estilo BAS) ---------- */

.cab-bas { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 16px; padding: 16px 18px; background: var(--blanco); border: 1px solid var(--linea); }
.dato-bas { display: flex; flex-direction: column; gap: 3px; }
.dato-bas > span { font-size: 12px; font-weight: 500; color: var(--azul-2); }
.dato-bas > div, .dato-bas select {
  min-height: 34px; padding: 6px 9px;
  font: 15px/1.3 var(--sans); color: var(--tinta);
  background: var(--papel); border: 1px solid var(--linea); border-radius: 2px;
}
.dato-bas select:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 1px var(--azul); }

.solapas { display: flex; gap: 22px; margin-top: 26px; border-bottom: 1px solid var(--linea); overflow-x: auto; scrollbar-width: none; }
.solapas::-webkit-scrollbar { display: none; }
.solapas button {
  padding: 8px 0; font: 500 15px/1 var(--sans); color: var(--tinta-3);
  background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap;
}
.solapas button[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--azul); }
.solapas button small { margin-left: 4px; font-size: 12px; color: var(--tinta-3); }
.panel-solapa { padding-top: 16px; }
.resumen-cruce { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }

.cuenta-final {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;
  margin-top: 26px; padding: 16px 18px;
  background: var(--blanco); border: 1px solid var(--tinta);
}
.cuenta-final .mono { font-size: 15px; }
.cuenta-final .igual { color: var(--verde); font-weight: 600; }
.cuenta-final .distinto { color: var(--ocre); font-weight: 600; }
.faltan { margin-top: 14px; padding: 12px 16px; background: var(--fondo-aviso); border-left: 3px solid var(--camel); }
.faltan ul { margin: 6px 0 0; padding-left: 18px; color: var(--tinta-2); }

iframe.original { width: 100%; height: 70vh; border: 1px solid var(--linea); background: var(--blanco); }
pre.json { margin: 0; padding: 14px; overflow: auto; max-height: 60vh; font: 13px/1.5 var(--mono); background: var(--blanco); border: 1px solid var(--linea); }

/* ---------- Ficha lateral ---------- */

body.con-ficha { overflow: hidden; }
.velo { position: fixed; inset: 0; z-index: 20; background: rgba(28, 27, 25, .28); }
.ficha {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 21;
  display: flex; flex-direction: column;
  width: min(520px, 100vw);
  background: var(--blanco); border-left: 1px solid var(--tinta);
}
.ficha > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 24px 26px 16px; border-bottom: 1px solid var(--linea); }
.ficha h2 { margin-top: 6px; font-size: 24px; line-height: 1.2; }
.ficha .cuerpo { flex: 1; overflow-y: auto; padding: 20px 26px 26px; }
.ficha > footer { display: flex; justify-content: space-between; gap: 12px; padding: 14px 26px; border-top: 1px solid var(--linea); }

form.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.campo { display: block; grid-column: span 2; margin-bottom: 16px; }
.campo.medio { grid-column: span 1; }
.campo > span:first-child { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 600; color: var(--tinta-2); }
.campo > span em { font-style: normal; font-weight: 400; color: var(--tinta-3); }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 9px 11px;
  font: 16px/1.4 var(--sans); color: var(--tinta);
  background: var(--papel); border: 1px solid var(--linea); border-radius: 2px;
}
.campo textarea { resize: vertical; min-height: 90px; }
.campo textarea.codigo { min-height: 300px; font: 13px/1.5 var(--mono); }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 1px var(--azul); }
.campo small { display: block; margin-top: 5px; font-size: 13px; color: var(--tinta-3); }

.error-form { margin: 0 0 14px; padding: 10px 12px; color: var(--bordo); background: var(--fondo-error); border-left: 2px solid var(--bordo); }

/* ---------- Diálogo amistoso (conceptos nuevos, elegir cupón) ---------- */

.dialogo {
  position: fixed; top: 50%; left: 50%; z-index: 22;
  display: flex; flex-direction: column;
  width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
  transform: translate(-50%, -50%);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-top: 4px solid var(--camel);
}
.dialogo > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 22px 26px 12px; }
.dialogo h2 { font-size: 22px; line-height: 1.25; }
.dialogo header p { margin-top: 6px; color: var(--tinta-2); max-width: 60ch; }
.dialogo .cuerpo { overflow-y: auto; padding: 4px 26px 8px; }
.dialogo > footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 26px 18px; border-top: 1px solid var(--linea); }

.renglon-nuevo { padding: 14px 0; border-bottom: 1px solid var(--linea); }
.renglon-nuevo:last-child { border-bottom: 0; }
.renglon-nuevo .que { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.renglon-nuevo .que b { font-weight: 600; }
.opciones-destino { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.opciones-destino label { position: relative; cursor: pointer; }
.opciones-destino input { position: absolute; opacity: 0; pointer-events: none; }
.opciones-destino span { display: inline-block; padding: 6px 12px; font-size: 14px; background: var(--papel); border: 1px solid var(--linea); border-radius: 2px; }
.opciones-destino input:checked + span { color: var(--blanco); background: var(--azul); border-color: var(--azul); }
.opciones-destino input:focus-visible + span { outline: 2px solid var(--camel); outline-offset: 2px; }
.renglon-nuevo .detalle { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.renglon-nuevo select, .renglon-nuevo input:not([type="radio"]) {
  width: 100%; padding: 8px 10px; font: 15px var(--sans); color: var(--tinta);
  background: var(--papel); border: 1px solid var(--linea); border-radius: 2px;
}
.listo-ok { color: var(--verde); font-size: 14px; }

.candidatos { display: grid; gap: 8px; }
.candidato { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; background: var(--papel); border: 1px solid var(--linea); }

/* ---------- Avisos e ingreso ---------- */

.aviso-flotante {
  position: fixed; left: 24px; bottom: 24px; z-index: 30;
  max-width: min(460px, calc(100vw - 48px));
  padding: 12px 18px; font-size: 15px;
  color: var(--papel); background: var(--tinta);
}
.aviso-flotante.error { background: var(--bordo); }

.ingreso { min-height: 100vh; display: grid; place-items: center; padding: 24px var(--margen); }
.ingreso form { width: min(380px, 100%); }
.ingreso .marca { flex-direction: column; gap: 12px; margin-bottom: 20px; }
.ingreso .marca b { font-size: 32px; }
.ingreso .cinta { margin-bottom: 28px; }
.ingreso .boton { width: 100%; padding: 14px; }

/* ---------- Formatos ---------- */

.dos-columnas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.muestra { font: 13px/1.5 var(--mono); }
.muestra table { font: 13px/1.4 var(--mono); }
.muestra td { padding: 4px 8px; }
.muestra ol { margin: 0; padding: 10px 10px 10px 44px; max-height: 60vh; overflow: auto; background: var(--blanco); border: 1px solid var(--linea); }

@media (max-width: 760px) {
  :root { --margen: 16px; }
  .marca span { display: none; }
  .pestanas { gap: 22px; margin-top: 16px; }
  main { padding-top: 24px; }
  .encabezado h1 { font-size: 28px; }
  .contadores a + a { padding-left: 0; border-left: 0; border-top: 1px solid var(--linea); }
  .dos-columnas { grid-template-columns: 1fr; }
  .renglon-nuevo .detalle { grid-template-columns: 1fr; }
  .ficha > header, .ficha .cuerpo, .ficha > footer, .dialogo > header, .dialogo .cuerpo, .dialogo > footer { padding-left: 16px; padding-right: 16px; }
  .aviso-flotante { left: 16px; bottom: 16px; }
}