/* =============================================================
   Funerales Andana — hoja de estilos del sistema
   Paleta tomada de la gráfica institucional: teal profundo, teal
   medio y azul claro sobre blanco. Coincide con el logo, cuyo filete es
   #0A3F30 y cuya tipografía ronda el #0D5577.
   Sin fuentes externas: la política de contenido sólo admite recursos
   propios, así que se usan las tipografías del sistema.
   ============================================================= */

:root {
  /* Marca */
  --and-950: #06242C;
  --and-900: #0C333D;
  --and-800: #124450;   /* teal dominante de la gráfica */
  --and-700: #1B5B6B;
  --and-600: #2A7589;
  --and-500: #3E8EA3;
  --and-400: #63A9BC;   /* banda diagonal clara */
  --and-300: #93C6D3;
  --and-200: #C2DDE5;
  --and-100: #E2EFF3;
  --and-50:  #F2F8FA;
  /* Acento cálido. NO viene del logo: el isotipo real no tiene dorado por
     ninguna parte —su filete es verde azulado oscuro, #0A3F30, casi el mismo
     --and-900 de esta paleta—. Se mantiene sólo como contrapunto al teal, que
     de otro modo lo cubre todo. Si prefiere una identidad estricta, cámbielo
     por var(--and-600) y la interfaz queda enteramente en los colores de la
     marca. */
  --oro:     #B08D3F;
  --oro-claro: #D9BE7E;

  /* Neutros con sesgo frío, para que convivan con el teal */
  --ground:    #F4F7F9;
  --surface:   #FFFFFF;
  --surface-2: #EDF2F5;
  --ink:       #141D23;
  --ink-2:     #3A4952;
  --muted:     #6B7C87;
  --rule:      #D2DDE4;
  --rule-soft: #E6ECF0;

  /* Semánticos */
  --ok:    #216B4E;
  --ok-bg: #E3F2EB;
  --warn:    #8A5712;
  --warn-bg: #FAF0DE;
  --crit:    #8C2F2F;
  --crit-bg: #FBE9E9;
  --info-bg: var(--and-100);

  --sombra:   0 1px 2px rgba(6,36,44,.06), 0 6px 18px -12px rgba(6,36,44,.28);
  --sombra-2: 0 2px 6px rgba(6,36,44,.10), 0 16px 40px -20px rgba(6,36,44,.35);
  --radio: 4px;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "SF Mono", Consolas, monospace;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------
   Estructura
   --------------------------------------------------------------- */
.app { display: grid; grid-template-columns: 246px 1fr; min-height: 100vh; }

.lateral {
  background: var(--and-900);
  color: var(--and-100);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.marca {
  padding: 20px 18px 18px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  display: flex; gap: 11px; align-items: center;
}
.marca img { width: 28px; height: 38px; object-fit: contain; flex: none; }
.marca .txt { line-height: 1.15; }
.marca .n {
  font-family: var(--serif);
  font-size: 12.5px; letter-spacing: .035em; color: #fff;
  white-space: nowrap;
}
.marca .s {
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--oro-claro); margin-top: 3px;
}

nav.menu { padding: 12px 0; flex: 1; }
nav.menu .grupo {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--and-400); padding: 16px 18px 6px;
}
nav.menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 18px;
  color: var(--and-100);
  text-decoration: none;
  font-size: 14px;
  border-left: 3px solid transparent;
}
nav.menu a:hover { background: rgba(255,255,255,.06); color: #fff; }
nav.menu a.activo {
  background: rgba(255,255,255,.09);
  border-left-color: var(--oro);
  color: #fff; font-weight: 500;
}
nav.menu a:focus-visible { outline: 2px solid var(--and-300); outline-offset: -2px; }
nav.menu svg { width: 17px; height: 17px; flex: none; opacity: .85; }

.pie-lateral {
  border-top: 1px solid rgba(255,255,255,.10);
  padding: 12px 18px 16px;
  font-size: 12px;
}
.pie-lateral .quien { color: #fff; font-weight: 500; }
.pie-lateral .rol { color: var(--and-300); font-size: 11.5px; }
.pie-lateral a { color: var(--and-200); text-decoration: none; }
.pie-lateral a:hover { color: #fff; text-decoration: underline; }
.pie-lateral form { margin: 8px 0 0; }
.pie-lateral button {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--and-200); font: inherit; font-size: 12px; text-decoration: underline;
}
.pie-lateral button:hover { color: #fff; }

main { min-width: 0; display: flex; flex-direction: column; }

.cabecera {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  padding: 16px 28px;
  display: flex; gap: 20px; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
}
.cabecera h1 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.cabecera .sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.cabecera .acciones { display: flex; gap: 8px; flex-wrap: wrap; }

.contenido { padding: 24px 28px 56px; flex: 1; }
.contenido > * + * { margin-top: 20px; }

/* ---------------------------------------------------------------
   Tarjetas y paneles
   --------------------------------------------------------------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.panel > h2, .panel > .panel-t {
  margin: 0;
  padding: 13px 18px;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--and-800);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.panel-cuerpo { padding: 18px; }
.panel-cuerpo > * + * { margin-top: 14px; }

.rejilla { display: grid; gap: 16px; }
.rejilla.c2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.rejilla.c3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.rejilla.c4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* Indicadores */
.cifra {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radio);
  padding: 15px 17px 16px;
  box-shadow: var(--sombra);
}
.cifra .k {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.cifra .v {
  font-size: 25px; font-weight: 600; line-height: 1.15; margin-top: 6px;
  font-variant-numeric: tabular-nums; color: var(--and-800);
}
.cifra .d { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.cifra.alerta { border-left: 3px solid var(--crit); }
.cifra.alerta .v { color: var(--crit); }
.cifra.aviso { border-left: 3px solid var(--warn); }

/* ---------------------------------------------------------------
   Tablas
   --------------------------------------------------------------- */
.tabla-env { overflow-x: auto; }
table.datos {
  width: 100%; border-collapse: collapse; font-size: 14px;
}
table.datos th {
  text-align: left; font-weight: 600; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  padding: 10px 14px; border-bottom: 1px solid var(--rule);
  white-space: nowrap; background: var(--surface-2);
}
table.datos th a { color: inherit; text-decoration: none; }
table.datos th a:hover { color: var(--and-700); }
table.datos td {
  padding: 10px 14px; border-bottom: 1px solid var(--rule-soft); vertical-align: top;
}
table.datos tbody tr:hover { background: var(--and-50); }
table.datos tbody tr:last-child td { border-bottom: 0; }
table.datos .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.datos .mono { font-family: var(--mono); font-size: 12.5px; }
table.datos a.enlace-fila { color: var(--and-700); font-weight: 500; text-decoration: none; }
table.datos a.enlace-fila:hover { text-decoration: underline; }
table.datos tr.anulada td { color: var(--muted); text-decoration: line-through; }

.vacio {
  padding: 40px 20px; text-align: center; color: var(--muted); font-size: 14px;
}
.vacio strong { display: block; color: var(--ink-2); font-size: 15px; margin-bottom: 4px; }

/* ---------------------------------------------------------------
   Formularios
   --------------------------------------------------------------- */
.campos { display: grid; gap: 14px; }
.campos.c2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.campos.c3 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo label { font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.campo .ayuda { font-size: 12px; color: var(--muted); }
.campo .err { font-size: 12.5px; color: var(--crit); }

input[type=text], input[type=email], input[type=password], input[type=date],
input[type=time], input[type=number], input[type=search], input[type=tel],
select, textarea {
  font: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  border-radius: var(--radio);
  background: var(--surface);
  color: var(--ink);
  width: 100%;
  min-width: 0;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--and-500);
  box-shadow: 0 0 0 3px rgba(62,142,163,.18);
}
input[aria-invalid=true], select[aria-invalid=true] { border-color: var(--crit); }
input:disabled, select:disabled, textarea:disabled {
  background: var(--surface-2); color: var(--muted); cursor: not-allowed;
}
textarea { min-height: 80px; resize: vertical; }
input.monto { text-align: right; font-variant-numeric: tabular-nums; }

fieldset { border: 0; padding: 0; margin: 0; }
fieldset legend {
  font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--and-800); padding: 0 0 10px;
}

/* ---------------------------------------------------------------
   Botones
   --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: 14px; font-weight: 500;
  padding: 8px 15px;
  border: 1px solid var(--rule);
  border-radius: var(--radio);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { background: var(--surface-2); border-color: var(--and-300); }
.btn:focus-visible { outline: 2px solid var(--and-500); outline-offset: 2px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; }

.btn.primario {
  background: var(--and-800); border-color: var(--and-800); color: #fff;
}
.btn.primario:hover { background: var(--and-700); border-color: var(--and-700); }

.btn.peligro { color: var(--crit); border-color: #E2C2C2; }
.btn.peligro:hover { background: var(--crit-bg); border-color: var(--crit); }

.btn.chico { padding: 5px 10px; font-size: 13px; }
.btn.enlace { border: 0; background: none; color: var(--and-700); padding: 4px 0; }
.btn.enlace:hover { background: none; text-decoration: underline; }

.acciones-form {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding-top: 6px; border-top: 1px solid var(--rule-soft); margin-top: 18px;
}

/* ---------------------------------------------------------------
   Etiquetas de estado
   --------------------------------------------------------------- */
.estado {
  display: inline-block;
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 99px; white-space: nowrap;
  border: 1px solid transparent;
}
.estado.borrador  { background: var(--surface-2); color: var(--muted); border-color: var(--rule); }
.estado.emitida   { background: var(--and-100); color: var(--and-800); border-color: var(--and-200); }
.estado.firmada   { background: var(--ok-bg); color: var(--ok); border-color: #BCDFCE; }
.estado.cerrada   { background: var(--ok-bg); color: var(--ok); border-color: #BCDFCE; }
.estado.anulada   { background: var(--crit-bg); color: var(--crit); border-color: #E7C4C4; }
.estado.pendiente { background: var(--warn-bg); color: var(--warn); border-color: #EBD9B6; }
.estado.parcial   { background: var(--warn-bg); color: var(--warn); border-color: #EBD9B6; }
.estado.pagado    { background: var(--ok-bg); color: var(--ok); border-color: #BCDFCE; }
.estado.vencida   { background: var(--crit-bg); color: var(--crit); border-color: #E7C4C4; }

/* ---------------------------------------------------------------
   Mensajes
   --------------------------------------------------------------- */
.mensajes { display: grid; gap: 10px; }
.mensaje {
  padding: 11px 15px; border-radius: var(--radio); font-size: 14px;
  border: 1px solid transparent; border-left-width: 3px;
  display: flex; gap: 10px; align-items: flex-start;
}
.mensaje.exito  { background: var(--ok-bg);   color: var(--ok);   border-color: #BCDFCE; border-left-color: var(--ok); }
.mensaje.error  { background: var(--crit-bg); color: var(--crit); border-color: #E7C4C4; border-left-color: var(--crit); }
.mensaje.aviso  { background: var(--warn-bg); color: var(--warn); border-color: #EBD9B6; border-left-color: var(--warn); }
.mensaje.info   { background: var(--info-bg); color: var(--and-800); border-color: var(--and-200); border-left-color: var(--and-600); }

/* ---------------------------------------------------------------
   Pantalla de acceso
   --------------------------------------------------------------- */
.acceso {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  background:
    linear-gradient(155deg, var(--and-800) 0%, var(--and-900) 55%, var(--and-950) 100%);
  padding: 24px;
  place-items: center;
}
.acceso-caja {
  width: 100%; max-width: 400px;
  background: var(--surface);
  border-radius: 8px;
  box-shadow: var(--sombra-2);
  overflow: hidden;
}
.acceso-cab {
  padding: 28px 30px 22px;
  text-align: center;
  border-bottom: 1px solid var(--rule-soft);
  background: linear-gradient(180deg, var(--and-50), var(--surface));
}
.acceso-cab img { width: 49px; height: 66px; object-fit: contain; }
.acceso-cab .n {
  font-family: var(--serif); font-size: 19px; letter-spacing: .08em;
  color: var(--and-900); margin-top: 10px;
}
.acceso-cab .s {
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--oro); margin-top: 4px;
}
.acceso-cuerpo { padding: 24px 30px 28px; }
.acceso-cuerpo h1 { font-size: 16px; margin: 0 0 4px; font-weight: 600; }
.acceso-cuerpo .intro { font-size: 13.5px; color: var(--muted); margin: 0 0 18px; }
.acceso-cuerpo .campos { gap: 13px; }
.acceso-cuerpo .btn { width: 100%; justify-content: center; padding: 10px; }
.acceso-pie {
  padding: 14px 30px 20px; text-align: center;
  font-size: 12.5px; color: var(--muted);
}
.acceso-pie a { color: var(--and-700); }

/* Campo de código de verificación */
.codigo-otp {
  font-family: var(--mono);
  font-size: 26px !important;
  letter-spacing: .42em;
  text-align: center;
  padding: 12px 10px 12px 20px !important;
  font-variant-numeric: tabular-nums;
}

.qr-caja {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 18px; background: var(--and-50);
  border: 1px solid var(--and-200); border-radius: var(--radio);
}
.qr-caja svg { display: block; border-radius: 2px; }
.secreto-manual {
  font-family: var(--mono); font-size: 14px; letter-spacing: .06em;
  background: var(--surface); border: 1px solid var(--rule);
  padding: 9px 12px; border-radius: var(--radio);
  word-break: break-all; text-align: center; color: var(--ink-2);
}

.codigos-respaldo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px; font-family: var(--mono); font-size: 14px;
}
.codigos-respaldo span {
  background: var(--surface-2); border: 1px solid var(--rule);
  padding: 8px 10px; border-radius: var(--radio); text-align: center;
  letter-spacing: .08em;
}

/* ---------------------------------------------------------------
   Utilidades
   --------------------------------------------------------------- */
.filtros {
  display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
  padding: 14px 18px; background: var(--surface);
  border: 1px solid var(--rule); border-radius: var(--radio);
}
.filtros .campo { min-width: 150px; }

.paginacion {
  display: flex; gap: 6px; align-items: center; justify-content: space-between;
  padding: 12px 18px; border-top: 1px solid var(--rule-soft);
  font-size: 13px; color: var(--muted); flex-wrap: wrap;
}
.paginacion .paginas { display: flex; gap: 4px; }
.paginacion a, .paginacion span.actual {
  padding: 4px 9px; border: 1px solid var(--rule); border-radius: var(--radio);
  text-decoration: none; color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.paginacion a:hover { background: var(--surface-2); }
.paginacion span.actual { background: var(--and-800); border-color: var(--and-800); color: #fff; }

.lista-datos { display: grid; gap: 0; }
.lista-datos > div {
  display: grid; grid-template-columns: 180px 1fr; gap: 14px;
  padding: 8px 0; border-bottom: 1px solid var(--rule-soft); font-size: 14px;
}
.lista-datos > div:last-child { border-bottom: 0; }
.lista-datos dt, .lista-datos .k { color: var(--muted); font-size: 13px; }
.lista-datos dd, .lista-datos .v { margin: 0; }

.migas { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.migas a { color: var(--and-700); text-decoration: none; }
.migas a:hover { text-decoration: underline; }

.tenue { color: var(--muted); }
.pequeno { font-size: 12.5px; }
.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.oculto { display: none !important; }
.solo-lectores {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------------------------------------------------------------
   Adaptación a pantallas chicas
   --------------------------------------------------------------- */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .lateral { position: static; height: auto; }
  nav.menu { display: flex; flex-wrap: wrap; padding: 6px; }
  nav.menu .grupo { display: none; }
  nav.menu a { border-left: 0; border-bottom: 3px solid transparent; padding: 8px 12px; }
  nav.menu a.activo { border-left: 0; border-bottom-color: var(--oro); }
  .cabecera, .contenido { padding-left: 18px; padding-right: 18px; }
  .lista-datos > div { grid-template-columns: 1fr; gap: 2px; }
}

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

@media print {
  .lateral, .cabecera .acciones, .filtros, .paginacion { display: none !important; }
  .app { display: block; }
  body { background: #fff; }
}

/* ---------------------------------------------------------------
   Utilidades de espaciado y alineación
   La política de contenido no admite atributos style= en línea, así que
   todo ajuste puntual de las plantillas se expresa con estas clases.
   --------------------------------------------------------------- */
.m-0    { margin: 0 !important; }
.mt-3   { margin-top: 3px; }
.mt-6   { margin-top: 6px; }
.mt-8   { margin-top: 8px; }
.mt-12  { margin-top: 12px; }
.mt-14  { margin-top: 14px; }
.mt-16  { margin-top: 16px; }
.mt-18  { margin-top: 18px; }
.mt-20  { margin-top: 20px; }
.mb-6   { margin-bottom: 6px; }
.mb-16  { margin-bottom: 16px; }
.mb-20  { margin-bottom: 20px; }
.ml-6   { margin-left: 6px; }
.centrado { text-align: center; }
.bloque-sep {
  margin-top: 14px;
  border-top: 1px solid var(--rule-soft);
  padding-top: 14px;
}
.fin-linea { align-items: end; }
.btn.ancho { width: 100%; justify-content: center; }
.btn.crece { flex: 1; justify-content: center; }
.fila-botones { margin-top: 20px; display: flex; gap: 10px; }
.pasos {
  padding-left: 18px;
  margin: 0 0 16px;
  color: var(--ink-2);
  line-height: 1.7;
  font-size: 12.5px;
}
.codigo-entrada {
  font-family: var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.alerta-texto { color: var(--warn); }

/* Saldos que pueden quedar a favor o en rojo, como el fondo de gastos
   generales. Se distinguen por color además del signo, porque en una
   columna de cifras el menos se pierde. */
.saldo-favor  { color: var(--ok); }
.saldo-rojo   { color: var(--crit); font-weight: 600; }
.numero-error {
  font-size: 34px;
  font-weight: 600;
  color: var(--and-700);
  line-height: 1;
}

/* ---------------------------------------------------------------
   Líneas del bloque SERVICIO en el formulario de la orden
   --------------------------------------------------------------- */
.lineas-servicio { display: grid; gap: 1px; background: var(--rule-soft); border: 1px solid var(--rule-soft); }
.linea-servicio {
  display: grid;
  grid-template-columns: 190px 1fr 150px;
  gap: 12px;
  align-items: center;
  padding: 9px 14px;
  background: var(--surface);
}
.linea-servicio > label,
.linea-servicio > span:first-child { font-size: 13.5px; color: var(--ink-2); }
.linea-servicio.total { background: var(--surface-2); }
.linea-servicio.total > span:first-child { font-weight: 600; }
.linea-servicio.destacada { background: var(--and-100); }
.linea-servicio.destacada > span:first-child { color: var(--and-800); }
.monto-calculado {
  display: block;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 15px;
  padding: 8px 10px;
  border: 1px solid transparent;
}
.linea-servicio.destacada .monto-calculado { color: var(--and-800); font-size: 17px; }

/* Buscador de personas */
.buscador-persona { position: relative; }
.resultados-persona {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  z-index: 20;
  margin-top: 2px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radio);
  box-shadow: var(--sombra-2);
  max-height: 280px;
  overflow-y: auto;
}
.resultados-persona .resultado {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule-soft);
  padding: 9px 12px;
  cursor: pointer;
  font: inherit;
}
.resultados-persona .resultado:last-child { border-bottom: 0; }
.resultados-persona .resultado:hover,
.resultados-persona .resultado:focus-visible { background: var(--and-50); }
.resultados-persona .n { display: block; font-size: 14px; color: var(--ink); }
.resultados-persona .d { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
.resultados-persona .sin-resultados {
  padding: 12px; font-size: 13px; color: var(--muted); text-align: center;
}

@media (max-width: 720px) {
  .linea-servicio { grid-template-columns: 1fr; gap: 6px; }
  .linea-servicio > label,
  .linea-servicio > span:first-child { font-weight: 600; }
  .monto-calculado { text-align: left; padding-left: 0; }
}

/* El buscador de productos vive dentro de la línea de servicio */
.buscador-producto { position: relative; min-width: 0; }
.buscador-producto > input[type=text] { width: 100%; }

/* ---------------------------------------------------------------
   Grilla del flujo de caja: categorías × días
   Muchas columnas angostas, así que se aprieta la tipografía y se
   fija la primera columna para no perder de vista la categoría.
   --------------------------------------------------------------- */
table.flujo { min-width: 1100px; font-size: 12.5px; }
table.flujo th, table.flujo td { padding: 5px 6px; }
table.flujo th.cat, table.flujo td.cat {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--surface);
  border-right: 1px solid var(--rule);
  min-width: 190px;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12.5px;
}
table.flujo thead th.cat { background: var(--surface-2); z-index: 3; }
table.flujo tbody tr:hover td.cat { background: var(--and-50); }
table.flujo th.dia { min-width: 34px; text-align: right; font-size: 10.5px; }
table.flujo td.dia { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }
table.flujo td.dia a { color: inherit; text-decoration: none; }
table.flujo td.dia a:hover { color: var(--and-700); text-decoration: underline; }
table.flujo .hoy { background: var(--and-50); }
table.flujo th.total, table.flujo td.total {
  border-left: 1px solid var(--rule);
  font-weight: 600;
  background: var(--surface-2);
  min-width: 92px;
}
table.flujo tr.grupo td {
  background: var(--and-100);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--and-800);
  padding: 4px 8px;
  position: sticky;
  left: 0;
}
table.flujo tr.sin-datos td.cat { color: var(--muted); }
table.flujo tfoot td {
  border-top: 2px solid var(--ink);
  font-weight: 600;
  background: var(--surface-2);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
table.flujo tfoot td.cat { text-align: left; }
.panel > h2 .tenue { font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 13px; }

/* Resumen anual: categorías × meses */
table.anual { min-width: 900px; font-size: 13px; }
table.anual th.cat, table.anual td.cat {
  position: sticky; left: 0; z-index: 2; background: var(--surface);
  border-right: 1px solid var(--rule); min-width: 210px; white-space: nowrap;
  text-transform: none; letter-spacing: 0; font-size: 13px;
}
table.anual thead th.cat { background: var(--surface-2); z-index: 3; }
table.anual td.mes { text-align: right; font-variant-numeric: tabular-nums; }
table.anual th.mes { text-align: right; }

/* Barras de comparación: la CSP no admite style= en línea, así que el
   ancho se expresa con una clase en pasos de 5%. */
.barra-serie{display:block;height:9px;background:var(--surface-2);border-radius:2px;min-width:120px;overflow:hidden}
.barra-serie .relleno{display:block;height:100%;background:var(--and-500);border-radius:2px}
tr.destacado .barra-serie .relleno{background:var(--and-800)}
tr.destacado td{background:var(--and-50)}
.barra-serie .relleno.w0{width:0%}
.barra-serie .relleno.w5{width:5%}
.barra-serie .relleno.w10{width:10%}
.barra-serie .relleno.w15{width:15%}
.barra-serie .relleno.w20{width:20%}
.barra-serie .relleno.w25{width:25%}
.barra-serie .relleno.w30{width:30%}
.barra-serie .relleno.w35{width:35%}
.barra-serie .relleno.w40{width:40%}
.barra-serie .relleno.w45{width:45%}
.barra-serie .relleno.w50{width:50%}
.barra-serie .relleno.w55{width:55%}
.barra-serie .relleno.w60{width:60%}
.barra-serie .relleno.w65{width:65%}
.barra-serie .relleno.w70{width:70%}
.barra-serie .relleno.w75{width:75%}
.barra-serie .relleno.w80{width:80%}
.barra-serie .relleno.w85{width:85%}
.barra-serie .relleno.w90{width:90%}
.barra-serie .relleno.w95{width:95%}
.barra-serie .relleno.w100{width:100%}

/* Tarjetas del índice de informes */
.tarjeta-informe {
  display: block;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--and-600);
  border-radius: var(--radio);
  padding: 16px 18px 17px;
  text-decoration: none;
  box-shadow: var(--sombra);
}
.tarjeta-informe:hover { border-left-color: var(--oro); background: var(--and-50); }
.tarjeta-informe:focus-visible { outline: 2px solid var(--and-500); outline-offset: 2px; }
.tarjeta-informe .t { display: block; font-weight: 600; font-size: 15px; color: var(--and-800); }
.tarjeta-informe .d { display: block; font-size: 13px; color: var(--muted); margin-top: 6px; line-height: 1.5; }

/* Vista del texto legal del contrato */
.texto-legal {
  background: var(--surface-2);
  border: 1px solid var(--rule-soft);
  border-left: 3px solid var(--and-600);
  padding: 16px 18px;
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 78ch;
}
.texto-legal p { margin: 0 0 10px; }
.texto-legal p:last-child { margin-bottom: 0; }
textarea.mono { font-family: var(--mono); font-size: 13px; line-height: 1.55; }

/* Folios anulados del talonario */
.folios-anulados { display: flex; flex-wrap: wrap; gap: 6px; }
.folios-anulados span {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--crit-bg);
  color: var(--crit);
  border: 1px solid #E7C4C4;
  border-radius: var(--radio);
  padding: 3px 8px;
  text-decoration: line-through;
}