/* Sentidos CRM — identidad visual de marca (Fase 7).
   Perfumería ambiental premium: negro cálido, ámbar metálico, tipografía
   editorial. Sin frameworks — un solo archivo, como pide CLAUDE.md. */

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/fonts/cormorant-garamond-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --negro-base: #0A0806;
  --negro-superficie: #100D09;
  --negro-elevado: #171309;
  --borde-sutil: rgba(197,160,89,0.14);
  --borde-medio: rgba(197,160,89,0.28);

  --oro: #C5A059;
  --oro-claro: #E3CFA0;
  --oro-profundo: #8A6E3C;

  --texto: #F2EBDD;
  --texto-medio: #8A7E6B;
  /* Fase 15, punto 7b: el valor original (#5C5344) contra --negro-superficie
     daba ~2.56:1 de contraste -- muy por debajo del mínimo legible AA para
     texto normal (4.5:1). Este valor da ~4.76:1 contra --negro-superficie
     (verificado a mano con la fórmula de luminancia relativa de WCAG),
     manteniéndose distinguible pero más cerca de --texto-medio de lo que
     estaba antes -- con --negro-superficie tan oscuro como es, no hay
     margen para un tercer tono notablemente más apagado que siga
     cumpliendo AA. */
  --texto-tenue: #877D65;

  --alerta-critica: #D9694E;
  --alerta-media: #C5A059;
  --alerta-riesgo: #B8763E;

  /* No especificado en el brief de marca: verde cálido, coherente con el
     resto de la paleta (nunca un verde de sistema saturado). */
  --exito: #8FA36B;
  --exito-fondo: rgba(143,163,107,0.10);

  --alerta-critica-fondo: rgba(217,105,78,0.10);

  --font-cuerpo: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-editorial: 'Cormorant Garamond', Georgia, serif;
}

* { box-sizing: border-box; }

body {
  font-family: var(--font-cuerpo);
  font-weight: 400;
  background: var(--negro-base);
  color: var(--texto);
  margin: 0;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Fase 17: TODO número (montos, conteos, días, ml, %, fechas) tiene que
     alinearse en columna con el mismo ancho de cifra -- Cormorant Garamond
     (--font-editorial) tiene cifras old-style (el 1 sin base, 3/6/9 bajan
     de la línea), ilegible para datos. Cormorant queda solo para títulos y
     encabezados de texto (h1.titulo-pagina ya usa --font-cuerpo, no la
     toca). tabular-nums es inocuo sobre texto sin dígitos, así que se
     declara acá una sola vez en vez de repetirlo en cada selector numérico. */
  font-variant-numeric: tabular-nums;
}

/* ── Header / marca ────────────────────────────────────────────── */

header.app-header {
  background: var(--negro-superficie);
  border-bottom: 0.5px solid var(--borde-sutil);
  position: sticky;
  top: 0;
  z-index: 10;
}

.app-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.app-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0 18px;
  gap: 1rem;
}

.marca {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}

.logo-marca {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

header.app-header form { margin: 0; }

.btn-salir {
  background: none;
  border: 0.5px solid var(--borde-sutil);
  color: var(--texto-medio);
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-cuerpo);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.btn-salir:hover { background: rgba(197,160,89,0.06); }

/* ── Navegación ────────────────────────────────────────────────── */

.app-nav {
  display: flex;
  gap: 1.6rem;
  overflow-x: auto;
}

.app-nav a {
  display: inline-block;
  padding: 0.5rem 0.05rem 0.7rem;
  color: var(--texto-medio);
  text-decoration: none;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
}

.app-nav a.activo {
  color: var(--oro);
  border-bottom-color: var(--oro);
}

main {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

/* ── Fila de métricas ──────────────────────────────────────────── */

.resumen {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 32px;
}

.resumen .tile {
  flex: 1 1 200px;
  background: transparent;
  border: 0.5px solid var(--borde-sutil);
  border-radius: 8px;
  padding: 16px 18px;
}

.resumen .tile.urgente { border-color: rgba(217,105,78,0.4); }

.resumen .tile.tile-desperdicio {
  flex: 1.4 1 260px;
  border-color: var(--borde-medio);
}

.resumen .tile .etiqueta {
  display: block;
  font-size: 9px;
  color: var(--texto-medio);
  text-transform: uppercase;
  letter-spacing: 0.22em;
}

.resumen .tile.urgente .etiqueta { color: #B5654F; }

.resumen .tile .valor {
  display: block;
  /* Fase 17: era --font-editorial (Cormorant) -- sus cifras old-style
     rompían la lectura de estos números ("ESPACIOS: I" en vez de "1",
     alturas dispares en "$ 3.360"). Inter + tabular-nums (heredado de
     body) da cifras alineadas y de altura uniforme. */
  font-family: var(--font-cuerpo);
  /* 400, no 300: Inter solo tiene los pesos 400/500 cargados (ver
     @font-face arriba) -- pedir 300 no rompe nada (el navegador cae al
     peso más cercano disponible) pero es engañoso dejarlo escrito. */
  font-weight: 400;
  font-size: 30px;
  color: var(--texto);
  margin-top: 8px;
  line-height: 1.1;
}

.resumen .tile.urgente .valor { color: var(--alerta-critica); }
.resumen .tile.tile-desperdicio .valor { color: var(--oro); }

.valor-uyu {
  font-family: var(--font-cuerpo);
  font-size: 13px;
  font-weight: 400;
  color: var(--texto-medio);
  margin-left: 6px;
}

.tile-nota {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--texto-tenue);
}

.desperdicio-detalle { margin-top: 10px; }

.desperdicio-detalle summary {
  cursor: pointer;
  list-style: none;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-medio);
}

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

.desperdicio-desglose {
  list-style: none;
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 0.5px solid var(--borde-sutil);
}

.desperdicio-desglose li {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 13px;
  padding: 0.3rem 0;
}

.desperdicio-desglose .nombre {
  color: var(--texto-medio);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.desperdicio-desglose .ml {
  flex-shrink: 0;
  color: var(--oro);
}

/* ── Botón recalcular ──────────────────────────────────────────── */

.acciones {
  margin-bottom: 2rem;
}

.resultado-recalculo {
  margin-top: 0.8rem;
  padding: 0.7rem 0.9rem;
  border-radius: 6px;
  background: transparent;
  border: 0.5px solid var(--borde-sutil);
  font-size: 13px;
  color: var(--texto-medio);
}

.resultado-recalculo strong { color: var(--texto); font-weight: 500; }

/* ── Secciones de señal ────────────────────────────────────────── */

section.seccion {
  margin-bottom: 2.2rem;
}

.seccion-titulo {
  display: inline-flex;
  align-items: baseline;
  gap: 0.7rem;
  margin: 0 0 0.9rem;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.24em;
}

.seccion-titulo::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.seccion-titulo .contador {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--texto-tenue);
}

.seccion-vacia {
  color: var(--texto-tenue);
  font-size: 13px;
  text-align: center;
  padding: 2rem 0;
}

#seccion-vencido-sin-reporte .seccion-titulo { color: var(--alerta-critica); }
#seccion-proximo .seccion-titulo { color: var(--alerta-media); }
#seccion-en-riesgo .seccion-titulo { color: var(--alerta-riesgo); }
#seccion-atraso-historico .seccion-titulo { color: var(--texto-tenue); }

/* ── Fila de equipo (antes "tarjeta"): línea, no caja ─────────────── */

.tarjeta {
  border-top: 0.5px solid var(--borde-sutil);
  padding: 16px 0;
}

.tarjeta .fila-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.8rem;
}

.tarjeta .cliente {
  font-weight: 500;
  font-size: 14px;
  color: var(--texto);
}

.tarjeta .espacio {
  color: var(--texto-medio);
  font-size: 13px;
}

.tarjeta .direccion {
  color: var(--texto-tenue);
  font-size: 12px;
  margin-top: 0.15rem;
}

.badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 500;
  padding: 0.2rem 0.55rem;
  border-radius: 3px;
  border: 0.5px solid currentColor;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.badge.urgente { color: var(--alerta-critica); }
.badge.proximo { color: var(--alerta-media); }
.badge.riesgo { color: var(--alerta-riesgo); }
.badge.historico { color: var(--texto-tenue); }

.tarjeta dl.detalle {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.8rem;
  margin: 0.8rem 0 0;
  font-size: 13px;
}

.tarjeta dl.detalle dt {
  color: var(--texto-tenue);
}

.tarjeta dl.detalle dd {
  margin: 0;
  color: var(--texto);
}

.tarjeta .representante {
  margin-top: 0.7rem;
  font-size: 13px;
  color: var(--texto-medio);
  padding-top: 0.7rem;
  border-top: 0.5px dashed var(--borde-sutil);
}

.tarjeta .representante strong { color: var(--oro); font-weight: 500; }

/* ── Marcas de confianza del dato ──────────────────────────────── */

.confianza {
  margin-top: 0.6rem;
  font-size: 12px;
  color: var(--texto-tenue);
}

.confianza .marca-sin-dato {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  border-radius: 3px;
  border: 0.5px solid var(--alerta-media);
  color: var(--alerta-media);
  font-weight: 500;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.confianza .marca-aproximado {
  display: inline-block;
  margin-left: 0.4rem;
  border: 0.5px solid var(--borde-medio);
  border-radius: 3px;
  padding: 0.05rem 0.4rem;
  color: var(--texto-medio);
  font-style: normal;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.confianza .marca-sin-ciclo {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  border-radius: 3px;
  border: 0.5px solid var(--alerta-media);
  color: var(--alerta-media);
  font-weight: 500;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.confianza .excede-capacidad {
  display: block;
  margin-top: 0.4rem;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  border: 0.5px solid var(--alerta-riesgo);
  color: var(--alerta-riesgo);
  font-weight: 500;
  font-size: 12px;
}

/* ── Sección colapsable (atraso histórico) ────────────────────── */

details.seccion-colapsable summary {
  cursor: pointer;
  list-style: none;
}

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

details.seccion-colapsable summary .seccion-titulo { display: inline-flex; }

details.seccion-colapsable summary::after {
  content: "▸";
  margin-left: 0.5rem;
  color: var(--texto-tenue);
}

details.seccion-colapsable[open] summary::after {
  content: "▾";
}

/* ── CRUD: formularios, listas, botones ───────────────────────── */

h1.titulo-pagina {
  font-family: var(--font-cuerpo);
  font-weight: 500;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 1.2rem;
  color: var(--texto);
}

.enlace-volver {
  display: inline-block;
  color: var(--texto-medio);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  margin-bottom: 1rem;
}

.enlace-volver:hover { color: var(--oro); }

.buscador {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.4rem;
}

.buscador input[type="search"] {
  flex: 1;
  padding: 12px 14px;
  background: var(--negro-superficie);
  border: 0.5px solid var(--borde-sutil);
  border-radius: 6px;
  color: var(--texto);
  font-family: var(--font-cuerpo);
  font-size: 14px;
}

.buscador input[type="search"]:focus {
  outline: none;
  border-color: var(--oro);
}

.formulario {
  background: var(--negro-superficie);
  border: 0.5px solid var(--borde-sutil);
  border-radius: 6px;
  padding: 1.4rem 1.3rem;
  margin-bottom: 1.6rem;
  /* Fase 15, punto 7d: un formulario tiene que leerse CONTENIDO dentro de
     una ficha, no como texto suelto -- la sombra suave refuerza el borde ya
     existente sin competir con la paleta (ámbar apagado, no negro puro). */
  box-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 8px 20px -14px rgba(0,0,0,0.6);
}

.formulario h2 {
  font-family: var(--font-cuerpo);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--texto-medio);
  margin: 0 0 1.1rem;
}

.campo {
  /* Fase 15, punto 7c: más respiro entre grupos de campos -- antes 0.9rem,
     los campos quedaban amontonados sin separación visual clara. */
  margin-bottom: 1.3rem;
}

.campo label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--texto-medio);
  margin-bottom: 0.35rem;
}

.campo input[type="text"],
.campo input[type="search"],
.campo input[type="tel"],
.campo input[type="email"],
.campo input[type="number"],
.campo input[type="date"],
.campo input[type="password"],
.campo select,
.campo textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--negro-superficie);
  border: 0.5px solid var(--borde-sutil);
  border-radius: 6px;
  color: var(--texto);
  font-family: var(--font-cuerpo);
  font-size: 14px;
  box-sizing: border-box;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--oro);
}

.campo select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23C5A059' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  padding-right: 38px;
}

.campo textarea {
  resize: vertical;
  min-height: 4rem;
}

.campo-checkbox {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.campo-checkbox label { margin-bottom: 0; }

.campo-checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
  background: var(--negro-superficie);
  border: 1px solid var(--borde-medio);
  border-radius: 3px;
  cursor: pointer;
}

.campo-checkbox input[type="checkbox"]:checked {
  background-color: var(--oro);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%230A0806' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3 3 7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  border-color: var(--oro);
}

.campo-checkbox input[type="checkbox"]:focus-visible {
  outline: 1px solid var(--oro);
  outline-offset: 2px;
}

.fila-campos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}

.btn {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 4px;
  background: transparent;
  font-family: var(--font-cuerpo);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.btn-primario,
.btn-recalcular,
.tarjeta .btn-recarga {
  border: 1px solid var(--oro);
  color: var(--oro);
  background: transparent;
}

.btn-primario:hover,
.btn-recalcular:hover,
.tarjeta .btn-recarga:hover {
  background: rgba(197,160,89,0.08);
}

.btn-secundario {
  border: 0.5px solid var(--borde-sutil);
  color: var(--texto-medio);
}

.btn-secundario:hover {
  background: rgba(197,160,89,0.05);
}

.error-form {
  background: var(--alerta-critica-fondo);
  color: var(--alerta-critica);
  border: 0.5px solid var(--alerta-critica);
  border-radius: 6px;
  padding: 0.7rem 0.9rem;
  font-size: 13px;
  margin-bottom: 0.9rem;
}

/* Distinta de .error-form a propósito: no es un rechazo, es una pregunta
   (confirmación de sobrecarga) -- tono ámbar de marca, no rojo. */
.aviso-sobrecarga {
  background: rgba(197,160,89,0.08);
  color: var(--oro);
  border: 0.5px solid var(--oro);
  border-radius: 6px;
  padding: 0.7rem 0.9rem;
  font-size: 13px;
  margin-bottom: 0.9rem;
}

.aviso-info {
  background: transparent;
  border: 0.5px solid var(--borde-sutil);
  border-radius: 6px;
  padding: 0.7rem 0.9rem;
  font-size: 13px;
  color: var(--texto-medio);
  margin-bottom: 0.9rem;
}

.aviso-info a { color: var(--oro); }

.aviso-exito {
  background: var(--exito-fondo);
  border: 0.5px solid var(--exito);
  color: var(--exito);
  border-radius: 6px;
  padding: 0.7rem 0.9rem;
  font-size: 13px;
  margin-bottom: 0.9rem;
}

/* ── Facturación (Fase 16) ─────────────────────────────────────── */

.formulario-rango {
  display: flex;
  align-items: flex-end;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 1.4rem;
}

.formulario-rango .campo {
  margin-bottom: 0;
}

/* Ancho de página completo con scroll horizontal PROPIO en mobile -- nunca
   el body entero, la tabla es la única que se desborda (regla general de
   artifacts/diseño responsive: contenido ancho scrollea en su contenedor). */
.tabla-facturacion-wrap {
  overflow-x: auto;
  margin-bottom: 1.2rem;
  border: 0.5px solid var(--borde-sutil);
  border-radius: 6px;
}

.tabla-facturacion {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  white-space: nowrap;
}

.tabla-facturacion th,
.tabla-facturacion td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 0.5px solid var(--borde-sutil);
}

.tabla-facturacion thead th {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--texto-medio);
  background: var(--negro-elevado);
  white-space: nowrap;
}

.tabla-facturacion tbody tr:last-child td {
  border-bottom: none;
}

.tabla-facturacion .fila-cliente {
  background: var(--negro-elevado);
}

.tabla-facturacion .fila-cliente a { color: var(--oro); text-decoration: none; }
.tabla-facturacion .fila-cliente a:hover { text-decoration: underline; }

.tabla-facturacion .col-numerico {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tabla-facturacion input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  background: var(--negro-superficie);
  border: 1px solid var(--borde-medio);
  border-radius: 3px;
  cursor: pointer;
  vertical-align: middle;
}

.tabla-facturacion input[type="checkbox"]:checked {
  background-color: var(--oro);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%230A0806' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3 3 7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  border-color: var(--oro);
}

.acciones-facturacion {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.contador-seleccion {
  color: var(--oro);
  font-weight: 500;
}

.lista-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.item-fila {
  border-top: 0.5px solid var(--borde-sutil);
  padding: 14px 0.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
  color: var(--texto);
}

.lista-items li:last-child .item-fila {
  border-bottom: 0.5px solid var(--borde-sutil);
}

.item-fila .item-info { min-width: 0; }

.item-fila .item-nombre {
  font-weight: 500;
  font-size: 14px;
}

.item-fila .item-detalle {
  color: var(--texto-medio);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 0.2rem;
}

.item-fila .item-accion {
  flex-shrink: 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--oro);
}

.form-inline {
  flex-shrink: 0;
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.form-inline input[type="number"] {
  width: 5.5rem;
}

.resumen .tile .valor a {
  color: inherit;
  text-decoration: none;
  border-bottom: 0.5px solid currentColor;
}

.badge-inactivo {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  border: 0.5px solid var(--borde-medio);
  color: var(--texto-tenue);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-left: 0.4rem;
}

.badge-tipo {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  border: 0.5px solid var(--borde-medio);
  color: var(--oro);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-left: 0.4rem;
}

/* ── Registrar recarga ─────────────────────────────────────────── */

.carga-sugerida {
  border: 0.5px solid var(--borde-medio);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  margin-bottom: 1.4rem;
}

.carga-sugerida .valor-ml {
  /* Fase 17: número, no título -- Inter/tabular-nums, no Cormorant. */
  font-family: var(--font-cuerpo);
  font-weight: 400;
  font-size: 34px;
  color: var(--oro);
  line-height: 1.1;
}

.carga-sugerida .etiqueta {
  font-size: 9px;
  color: var(--texto-medio);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  margin-bottom: 0.3rem;
}

.carga-sugerida .procedencia {
  margin-top: 0.6rem;
  font-size: 12px;
  color: var(--texto-tenue);
}

.carga-sugerida .excede-capacidad {
  display: block;
  margin-top: 0.5rem;
  color: var(--alerta-critica);
  font-size: 12px;
}

/* ── Ciclo de trabajo: botones de un toque (Fase 9) ──────────────
   Pensado para un representante parado en un local, con una mano:
   botones grandes en vez de selects, feedback inmediato. */

.ciclo-trabajo h2 {
  font-family: var(--font-cuerpo);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--texto-medio);
  margin: 1.4rem 0 0.8rem;
}

.ciclo-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}

.ciclo-preset-btn {
  padding: 10px 16px;
  border-radius: 20px;
  border: 0.5px solid var(--borde-medio);
  background: transparent;
  color: var(--texto);
  font-family: var(--font-cuerpo);
  font-size: 13px;
  cursor: pointer;
}

.ciclo-preset-btn:hover {
  border-color: var(--oro);
}

.ciclo-preset-btn.activo {
  background: rgba(197,160,89,0.12);
  border-color: var(--oro);
  color: var(--oro);
}

.ciclo-porcentaje {
  font-size: 12px;
  color: var(--texto-medio);
  margin: -0.3rem 0 0.9rem;
}

.dias-semana {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.9rem;
}

.dia-boton {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  border-radius: 6px;
  border: 0.5px solid var(--borde-sutil);
  background: var(--negro-superficie);
  color: var(--texto-medio);
  font-size: 12px;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
}

.dia-boton input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.dia-boton.marcado {
  background: rgba(197,160,89,0.12);
  border-color: var(--oro);
  color: var(--oro);
}

/* ── Cobranza: deuda por antigüedad (Fase 13) ────────────────────
   Mismo lenguaje visual que .resumen .tile — más contraste cuanto más
   viejo el tramo, para que "más de 90 días" salte a la vista primero. */

.tramos-antiguedad {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.tramo {
  flex: 1 1 150px;
  background: transparent;
  border: 0.5px solid var(--borde-sutil);
  border-radius: 8px;
  padding: 14px 16px;
}

.tramo-etiqueta {
  display: block;
  font-size: 9px;
  color: var(--texto-medio);
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.tramo-monto {
  display: block;
  /* Fase 17: número, no título -- Inter/tabular-nums, no Cormorant. */
  font-family: var(--font-cuerpo);
  font-weight: 400;
  font-size: 22px;
  color: var(--texto);
  margin-top: 6px;
  line-height: 1.1;
}

.tramo-cantidad {
  display: block;
  font-size: 11px;
  color: var(--texto-tenue);
  margin-top: 2px;
}

.tramo-61_90 {
  border-color: rgba(184,118,62,0.35);
}
.tramo-61_90 .tramo-monto { color: var(--alerta-riesgo); }

.tramo-mas_90 {
  border-color: rgba(217,105,78,0.5);
  background: var(--alerta-critica-fondo);
}
.tramo-mas_90 .tramo-etiqueta { color: #B5654F; }
.tramo-mas_90 .tramo-monto { color: var(--alerta-critica); }

/* ── Responsive ────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .app-header-inner { padding: 0 16px; }
  main { padding: 16px; }

  .resumen { flex-direction: column; }
  .resumen .tile.tile-desperdicio { flex-basis: auto; }

  .tramos-antiguedad { flex-direction: column; }

  .item-fila {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .form-inline { width: 100%; }
  .form-inline input[type="number"] { flex: 1; width: auto; }
  .form-inline .input-monto-compacto { flex: 1; width: auto; }

  .tarjeta .fila-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }

  .fila-campos {
    grid-template-columns: 1fr;
  }

  .btn-primario,
  .btn-recalcular,
  .btn-peligro,
  .tarjeta .btn-recarga {
    display: block;
    width: 100%;
  }

  .formulario-rango {
    flex-direction: column;
    align-items: stretch;
  }

  .acciones-facturacion {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ── Fase 15 — jerarquía visual: tercer nivel de superficie ───────
   Escala de tres niveles ya declarada en :root (negro-base < negro-superficie
   < negro-elevado). negro-base es la página; negro-superficie ya la usan
   .formulario/inputs/tiles; negro-elevado (declarado en la Fase 7 pero sin
   ningún selector que lo usara) pasa a ser el nivel para contenido ANIDADO
   dentro de un .formulario -- un widget dentro de un formulario tiene que
   distinguirse de su propio contenedor, no fundirse con él. ────────────── */

.ciclo-trabajo,
.carga-sugerida {
  background: var(--negro-elevado);
  border-radius: 6px;
  padding: 14px 16px;
}

.ciclo-trabajo {
  margin-top: 1.4rem;
}

/* ── Alta desplegable: el formulario de alta no ocupa el flujo principal
   (Fase 15, punto 2) -- <details> nativo, sin JS, con el <summary> con
   pinta de botón secundario para que quede claro que es una acción, no un
   título de sección. ────────────────────────────────────────────────── */

details.alta-desplegable {
  margin-bottom: 1.6rem;
}

details.alta-desplegable summary {
  cursor: pointer;
  list-style: none;
  width: fit-content;
}

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

details.alta-desplegable[open] summary {
  margin-bottom: 1rem;
}

details.alta-desplegable .formulario {
  margin-bottom: 0;
}

/* Campo heredado (Fase 15, punto 1b): "esta sucursal tiene otra dirección" /
   "atiende otro representante" -- enlace discreto, no un campo más del
   formulario principal. */

details.campo-heredado {
  margin: -0.4rem 0 1.3rem;
}

details.campo-heredado summary {
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  color: var(--texto-tenue);
  text-decoration: underline;
  text-underline-offset: 2px;
  width: fit-content;
}

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

details.campo-heredado summary:hover { color: var(--oro); }

details.campo-heredado[open] summary {
  color: var(--texto-medio);
  margin-bottom: 0.6rem;
}

details.campo-heredado .campo { margin-bottom: 0; }

/* ── Teléfono: +598 fijo (Fase 15, punto 4a) ──────────────────────── */

.campo-telefono {
  display: flex;
  align-items: stretch;
  background: var(--negro-superficie);
  border: 0.5px solid var(--borde-sutil);
  border-radius: 6px;
  overflow: hidden;
}

.campo-telefono:focus-within { border-color: var(--oro); }

.prefijo-telefono {
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: rgba(197,160,89,0.08);
  color: var(--oro);
  font-size: 14px;
  font-weight: 500;
  border-right: 0.5px solid var(--borde-sutil);
  flex-shrink: 0;
}

.campo-telefono input[type="tel"] {
  border: none !important;
  background: transparent !important;
  flex: 1;
  min-width: 0;
}

.campo-telefono input[type="tel"]:focus { outline: none; }

/* ── Email: sugerencias de dominio de un clic (Fase 15, punto 4b) ─── */

.campo-con-sugerencias { position: relative; }

.sugerencias-email {
  position: absolute;
  left: 0; right: 0; top: 100%;
  z-index: 20;
  margin-top: 4px;
  background: var(--negro-elevado);
  border: 0.5px solid var(--borde-medio);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 8px 20px -8px rgba(0,0,0,0.7);
}

.sugerencia-email-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  background: none;
  border: none;
  color: var(--texto);
  font-family: var(--font-cuerpo);
  font-size: 13px;
  cursor: pointer;
}

.sugerencia-email-item:hover,
.sugerencia-email-item:focus {
  background: rgba(197,160,89,0.1);
  color: var(--oro);
  outline: none;
}

/* ── Monto: $ fijo, sin spinners, miles mientras se tipea (Fase 15,
   punto 4c) ───────────────────────────────────────────────────────── */

.input-monto {
  display: flex;
  align-items: stretch;
  background: var(--negro-superficie);
  border: 0.5px solid var(--borde-sutil);
  border-radius: 6px;
  overflow: hidden;
}

.input-monto:focus-within { border-color: var(--oro); }

.prefijo-moneda {
  display: flex;
  align-items: center;
  padding: 0 10px;
  background: rgba(197,160,89,0.08);
  color: var(--oro);
  font-size: 14px;
  font-weight: 500;
  border-right: 0.5px solid var(--borde-sutil);
  flex-shrink: 0;
}

.input-monto input {
  border: none !important;
  background: transparent !important;
  flex: 1;
  min-width: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.input-monto input:focus { outline: none; }

.input-monto-compacto {
  width: 9rem;
  flex-shrink: 0;
}

/* ── Atajos de fecha (Fase 15, punto 4d) ──────────────────────────── */

.atajos-fecha {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.atajo-fecha-btn {
  padding: 4px 12px;
  border-radius: 20px;
  border: 0.5px solid var(--borde-medio);
  background: transparent;
  color: var(--texto-medio);
  font-family: var(--font-cuerpo);
  font-size: 11px;
  cursor: pointer;
}

.atajo-fecha-btn:hover {
  border-color: var(--oro);
  color: var(--oro);
}

/* ── Mensaje inline de campo obligatorio (Fase 15, punto 3c) ──────── */

.mensaje-campo {
  margin: 0.35rem 0 0;
  font-size: 12px;
  color: var(--alerta-critica);
}

.campo:has(.mensaje-campo) input,
.campo:has(.mensaje-campo) select {
  border-color: var(--alerta-critica);
}

/* ── Buscador en vivo (Fase 15, punto 5) ──────────────────────────── */

.resultados-contador {
  margin: 0 0 0.8rem;
  font-size: 12px;
  color: var(--texto-tenue);
}

/* ── Contador genérico junto a un título (fuera del contexto de
   .seccion-titulo, que ya tiene el suyo propio más específico) ──────── */

.contador {
  font-size: 0.85em;
  font-weight: 400;
  color: var(--texto-tenue);
}

/* ── Zona de acciones destructivas (Fase 17) ──────────────────────
   Al final de cada ficha, fuera del flujo principal, con el color de
   alerta -- nunca el mismo peso visual que editar/agregar. <details> nativo
   como alta-desplegable, pero con acento crítico en vez de dorado. */

details.zona-peligro {
  margin-top: 2.4rem;
  padding-top: 1.4rem;
  border-top: 0.5px solid var(--borde-sutil);
}

details.zona-peligro summary {
  cursor: pointer;
  list-style: none;
  width: fit-content;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--alerta-critica);
}

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

details.zona-peligro[open] summary { margin-bottom: 1rem; }

details.zona-peligro .formulario {
  border-color: rgba(217,105,78,0.3);
}

details.zona-peligro .formulario h2 { color: var(--alerta-critica); }

.aviso-consecuencia {
  background: var(--alerta-critica-fondo);
  border: 0.5px solid var(--alerta-critica);
  border-radius: 6px;
  padding: 0.7rem 0.9rem;
  font-size: 13px;
  color: var(--texto);
  margin-bottom: 0.9rem;
}

.aviso-consecuencia strong { color: var(--alerta-critica); }

.btn-peligro {
  border: 1px solid var(--alerta-critica);
  color: var(--alerta-critica);
  background: transparent;
}

.btn-peligro:hover { background: var(--alerta-critica-fondo); }

.accion-en-linea {
  display: inline-block;
  margin-left: 0.6rem;
  font-size: 11px;
  color: var(--texto-tenue);
  text-decoration: none;
}

.accion-en-linea:hover { color: var(--oro); }

.accion-en-linea.critica { color: var(--alerta-critica); }
.accion-en-linea.critica:hover { color: var(--alerta-critica); text-decoration: underline; }

/* ── Login: pieza de marca ────────────────────────────────────── */

body.pagina-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background-color: var(--negro-base);
  background-image:
    linear-gradient(rgba(10,8,6,0.86), rgba(10,8,6,0.92)),
    url('/img/login-fondo.jpg');
  background-size: cover;
  background-position: center;
}

.login-contenedor {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 380px;
}

.login-marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 48px;
}

.login-marca .logo-marca {
  width: 112px;
  height: 112px;
}

.login-formulario {
  width: 100%;
}

.login-formulario .error {
  background: var(--alerta-critica-fondo);
  color: var(--alerta-critica);
  border: 0.5px solid var(--alerta-critica);
  border-radius: 6px;
  padding: 0.7rem 0.9rem;
  font-size: 13px;
  margin-bottom: 1rem;
}

.login-formulario button[type="submit"] {
  width: 100%;
  display: block;
  margin-top: 0.4rem;
}