/* ExtraNeutro · sistema interno
   Identidad: trazo ligero, fondo claro, arena de la obra y gris azulado de la sierra.
   Sin sombras ni degradados: la estructura la dan las líneas finas. */

:root {
  --fondo: #ffffff;
  --papel: #f6f3ee;
  --superficie: #ffffff;
  --tinta: #1b1a18;
  --tinta-suave: #6a6359;
  --tinta-tenue: #9a9286;
  --linea: #e1dbcf;
  --linea-fuerte: #bdb5a6;
  --arena: #c9b793;
  --arena-osc: #8a7752;
  --sierra: #5f6e8c;
  --sierra-claro: #d4d9e3;
  --ok: #4c6a4f;
  --aviso: #9a6a22;
  --error: #98382e;
  --fuente: 'Jost', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --alto-toque: 48px;
  --alto-header: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  margin: 0;
  font-family: var(--fuente);
  font-weight: 350;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--fondo);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-underline-offset: 3px; }
button { font: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--sierra); outline-offset: 2px; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Iconos */
.ico { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: square; stroke-linejoin: miter; flex: none; }

/* Marca: la N lleva el trazo alargado del logotipo */
.marca {
  display: inline-block;
  font-weight: 300;
  font-size: 1.25rem;
  letter-spacing: 0.3em;
  margin-right: -0.3em;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
}
.marca .n { position: relative; }
.marca .n::before {
  content: '';
  position: absolute;
  left: 0.03em;
  top: -0.32em;
  bottom: -0.32em;
  width: 1px;
  background: currentColor;
}

/* Encabezado */
.encabezado {
  position: sticky; top: 0; z-index: 20;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: var(--alto-header);
  padding: 0 calc(8px + env(safe-area-inset-right)) 0 calc(8px + env(safe-area-inset-left));
  background: var(--fondo);
  border-bottom: 1px solid var(--linea);
}
.encabezado .izq { justify-self: start; }
.encabezado .der { justify-self: end; }
.btn-icono {
  width: var(--alto-toque); height: var(--alto-toque);
  display: inline-grid; place-items: center;
  background: none; border: 0; color: inherit; cursor: pointer; text-decoration: none;
}
.btn-icono .ico { width: 1.5rem; height: 1.5rem; }

/* Menú */
dialog.menu {
  margin: 0; padding: 0; border: 0; border-right: 1px solid var(--linea);
  height: 100dvh; max-height: none; width: min(86vw, 340px);
  background: var(--fondo); color: var(--tinta);
}
dialog.menu::backdrop { background: rgba(27, 26, 24, 0.35); }
.menu-cab { display: flex; justify-content: space-between; align-items: center; height: var(--alto-header); padding: 0 8px 0 20px; border-bottom: 1px solid var(--linea); }
.nav { display: flex; flex-direction: column; padding: 12px 0; }
.nav a, .nav button {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: var(--alto-toque);
  padding: 10px 20px; color: inherit; text-decoration: none; text-align: left;
  font-size: 1.125rem; font-weight: 300; letter-spacing: 0.02em;
  background: none; border: 0; border-left: 2px solid transparent; cursor: pointer;
}
.nav a:hover, .nav button:hover { background: var(--papel); }
.nav a[aria-current='page'] { border-left-color: var(--tinta); font-weight: 450; background: var(--papel); }
.nav .separador { height: 1px; background: var(--linea); margin: 10px 20px; }

/* Estructura de página */
.cuerpo { min-height: calc(100dvh - var(--alto-header)); }
.nav-fijo { display: none; }
.contenido { min-width: 0; }
.pagina { max-width: 1120px; margin: 0 auto; padding: 28px 16px 96px; }
.pagina.angosta { max-width: 620px; }
.titulo {
  font-size: clamp(1.6rem, 5vw, 2.5rem); font-weight: 200; letter-spacing: 0.05em; line-height: 1.15;
  text-transform: uppercase; margin: 4px 0 8px; overflow-wrap: anywhere;
}
.subtitulo { color: var(--tinta-suave); margin-bottom: 28px; max-width: 60ch; }
.cab-pagina { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 28px; }
.cab-pagina .subtitulo { margin-bottom: 0; }
.acciones { display: flex; flex-wrap: wrap; gap: 8px; }
h2.seccion { font-size: 1.25rem; font-weight: 300; letter-spacing: 0.02em; margin: 40px 0 14px; }
h2.seccion:first-child { margin-top: 0; }
.migas { font-size: 0.875rem; color: var(--tinta-suave); margin-bottom: 8px; }
.migas a { text-decoration: none; }
.migas a:hover { text-decoration: underline; }

@media (min-width: 1000px) {
  .app-admin .cuerpo { display: grid; grid-template-columns: 248px minmax(0, 1fr); }
  .app-admin .nav-fijo { display: block; border-right: 1px solid var(--linea); position: sticky; top: var(--alto-header); height: calc(100dvh - var(--alto-header)); overflow-y: auto; }
  .app-admin .btn-menu { display: none; }
  .pagina { padding: 40px 40px 96px; }
}

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--alto-toque); padding: 0 24px;
  font-weight: 400; letter-spacing: 0.04em; text-decoration: none; cursor: pointer;
  color: #fff; background: var(--tinta); border: 1px solid var(--tinta); border-radius: 0;
}
.btn:hover { background: #3a3732; border-color: #3a3732; }
.btn.sec { background: transparent; color: var(--tinta); }
.btn.sec:hover { background: var(--papel); }
.btn.peligro { background: transparent; color: var(--error); border-color: var(--error); }
.btn.peligro:hover { background: #f8ece9; }
.btn.chico { min-height: 40px; padding: 0 14px; font-size: 0.9375rem; }
.btn.texto { background: none; border-color: transparent; color: var(--tinta); text-decoration: underline; padding: 0 10px; }
.btn.bloque { width: 100%; }
.btn[disabled] { opacity: 0.45; cursor: default; }
.btn-fila { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn-fila.fijo { position: sticky; bottom: 0; background: var(--fondo); padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linea); margin-top: 20px; }
.btn-fila.fijo .btn { flex: 1; }

/* Formularios */
.campo { display: block; margin: 0 0 22px; position: relative; }
.campo .et { display: block; font-size: 0.9375rem; font-weight: 400; color: var(--tinta-suave); margin-bottom: 6px; }
.campo .opc { font-weight: 300; color: var(--tinta-tenue); }
.campo .ayuda { font-size: 0.875rem; color: var(--tinta-suave); margin-top: 6px; }
input, select, textarea {
  width: 100%; min-height: var(--alto-toque); padding: 10px 12px;
  font: inherit; font-size: 1rem; font-weight: 350; color: var(--tinta);
  background: var(--superficie); border: 1px solid var(--linea-fuerte); border-radius: 0;
  -webkit-appearance: none; appearance: none;
}
textarea { min-height: 96px; resize: vertical; }
select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%231b1a18' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
input::placeholder, textarea::placeholder { color: var(--tinta-tenue); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--sierra); outline-offset: 0; border-color: var(--sierra); }
input[type='date'] { min-width: 0; }
.campo.con-error input, .campo.con-error select, .campo.con-error textarea { border-color: var(--error); }
.msg-error { color: var(--error); font-size: 0.875rem; margin-top: 6px; }
.fila { display: grid; gap: 0 16px; }
@media (min-width: 600px) { .fila.dos { grid-template-columns: 1fr 1fr; } .fila.tres { grid-template-columns: 1fr 1fr 1fr; } }
.fila.tres-fijo { grid-template-columns: 1fr 1fr 1fr; }
details.plegable { margin: 0 0 22px; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
details.plegable summary { min-height: var(--alto-toque); display: flex; align-items: center; cursor: pointer; color: var(--tinta-suave); }
details.plegable > div { padding: 4px 0 0; }
.total-vivo { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--tinta); margin-bottom: 22px; }
.total-vivo .valor { font-size: 1.75rem; font-weight: 200; }

/* Segmentos */
.segmentos { display: flex; border: 1px solid var(--linea-fuerte); }
.segmentos button {
  flex: 1; min-height: var(--alto-toque); padding: 0 12px; border: 0; background: var(--superficie); color: var(--tinta);
  font-weight: 400; cursor: pointer; border-right: 1px solid var(--linea-fuerte);
}
.segmentos button:last-child { border-right: 0; }
.segmentos button[aria-checked='true'] { background: var(--tinta); color: #fff; }

/* Buscador de cliente */
.sugerencias { border: 1px solid var(--linea-fuerte); border-top: 0; background: var(--superficie); }
.sugerencias button, .sugerencias .nota { display: block; width: 100%; min-height: var(--alto-toque); padding: 10px 12px; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--linea); color: inherit; }
.sugerencias button { cursor: pointer; }
.sugerencias button:hover { background: var(--papel); }
.sugerencias .nota { color: var(--tinta-suave); font-size: 0.9375rem; }
.sugerencias small { color: var(--tinta-suave); display: block; }
.elegido { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--alto-toque); padding: 6px 6px 6px 12px; border: 1px solid var(--linea-fuerte); background: var(--papel); }
.elegido small { color: var(--tinta-suave); margin-left: 8px; }
.atajos-cliente { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* Atajos de captura */
.grupo-atajos + .grupo-atajos { margin-top: 36px; }
.atajos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 14px; }
@media (min-width: 720px) { .atajos { grid-template-columns: repeat(4, 1fr); } }
.atajo {
  display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
  min-height: 124px; padding: 16px; color: inherit; text-decoration: none;
  background: var(--superficie); border: 1px solid var(--linea);
}
.atajo .ico { width: 30px; height: 30px; stroke-width: 1; color: var(--arena-osc); }
.atajo span { font-size: 1.0625rem; font-weight: 400; line-height: 1.2; }
.atajo:hover { border-color: var(--tinta); }

/* Confirmación de captura */
.exito { border-left: 1px solid var(--tinta); padding: 4px 0 4px 22px; margin: 8px 0 8px 6px; }
.exito .folio { font-size: 2.25rem; font-weight: 200; letter-spacing: 0.04em; line-height: 1.2; }
.exito p { color: var(--tinta-suave); margin-top: 6px; }
.datos { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; margin-top: 18px; }
.datos dt { color: var(--tinta-suave); }
.datos dd { margin: 0; text-align: right; }

/* Indicadores */
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--linea); border-left: 1px solid var(--linea); }
@media (min-width: 720px) { .kpis { grid-template-columns: repeat(3, 1fr); } }
.kpi { padding: 18px 16px; border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); min-width: 0; }
.kpi .et { font-size: 0.9375rem; font-weight: 400; color: var(--tinta-suave); }
.kpi .valor { font-size: clamp(1.35rem, 3.6vw, 2rem); font-weight: 200; line-height: 1.25; margin: 4px 0; overflow-wrap: anywhere; }
.kpi .nota { font-size: 0.8125rem; color: var(--tinta-tenue); }
.kpi.neg .valor { color: var(--error); }

/* Rejilla de módulos del resumen */
.dos-col { display: grid; gap: 32px; }
@media (min-width: 900px) { .dos-col { grid-template-columns: 1fr 1fr; gap: 48px; } }
.filtros-resumen { display: flex; gap: 12px; flex-wrap: wrap; }
.filtros-resumen .campo { margin: 0; min-width: 150px; }

/* Gráficas */
.grafica { width: 100%; min-height: 240px; }
.grafica svg { display: block; width: 100%; height: auto; }
.grafica text { font-family: var(--fuente); font-size: 11px; fill: var(--tinta-suave); }
.grafica .eje { stroke: var(--linea); stroke-width: 1; }
.grafica .base { stroke: var(--linea-fuerte); stroke-width: 1; }
.b-cobrado { fill: var(--arena-osc); }
.b-egresos { fill: var(--sierra); }
.l-flujo { fill: none; stroke: var(--tinta); stroke-width: 1.25; }
.p-flujo { fill: var(--fondo); stroke: var(--tinta); stroke-width: 1.25; }
.leyenda { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 10px; font-size: 0.875rem; color: var(--tinta-suave); }
.leyenda i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; }
.leyenda .c1 { background: var(--arena-osc); } .leyenda .c2 { background: var(--sierra); } .leyenda .c3 { background: var(--fondo); border: 1.5px solid var(--tinta); border-radius: 50%; }
.barra-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; margin-bottom: 14px; }
.barra-fila .nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-fila .valor { text-align: right; }
.barra-pista { grid-column: 1 / -1; height: 5px; background: var(--papel); }
.barra-pista i { display: block; height: 100%; background: var(--arena-osc); }
.barra-fila.sierra .barra-pista i { background: var(--sierra); }

/* Tablas */
.tabla-wrap { width: 100%; overflow-x: auto; }
table.tabla { width: 100%; border-collapse: collapse; }
.tabla th { text-align: left; font-size: 0.875rem; font-weight: 400; color: var(--tinta-suave); padding: 10px 12px; border-bottom: 1px solid var(--linea-fuerte); white-space: nowrap; }
.tabla td { padding: 13px 12px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla .num { text-align: right; white-space: nowrap; }
.tabla th.num { text-align: right; }
.tabla tr.link { cursor: pointer; }
.tabla tr.link:hover td { background: var(--papel); }
.tabla .acc { text-align: right; white-space: nowrap; width: 1%; }
.tabla .acc .btn-icono { width: 40px; height: 40px; }
.tabla tfoot td { font-weight: 450; border-top: 1px solid var(--tinta); border-bottom: 0; }
.neg { color: var(--error); }
.suave { color: var(--tinta-suave); }
@media (max-width: 719px) {
  .tabla thead { display: none; }
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; }
  .tabla tr { padding: 14px 0; border-bottom: 1px solid var(--linea); }
  .tabla td { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; border: 0; text-align: right; }
  .tabla td::before { content: attr(data-t); color: var(--tinta-suave); font-size: 0.875rem; text-align: left; flex: none; }
  .tabla td.sin-et::before { content: none; }
  .tabla td.acc { justify-content: flex-end; width: auto; }
  .tabla tfoot td { border: 0; }
}

/* Lista con filtros */
.barra-lista { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 16px; }
.barra-lista .campo { margin: 0; flex: 1 1 160px; }
.barra-lista .campo.ancho { flex: 2 1 240px; }
.paginacion { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; color: var(--tinta-suave); font-size: 0.9375rem; }
.paginacion div { display: flex; gap: 8px; }

/* Estados */
.estado { display: inline-block; padding: 1px 9px; border: 1px solid currentColor; font-size: 0.8125rem; font-weight: 400; white-space: nowrap; line-height: 1.5; }
.e-en_proceso, .e-activa, .e-vigente { color: var(--sierra); }
.e-entregado { color: var(--ok); }
.e-cotizado { color: var(--arena-osc); }
.e-cancelado, .e-cancelada, .e-cerrada, .e-inactivo { color: var(--tinta-tenue); }
.e-revisar { color: var(--aviso); }

/* Vacíos, carga y errores */
.vacio { padding: 36px 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.vacio h3 { font-weight: 400; font-size: 1.125rem; margin-bottom: 4px; }
.vacio p { color: var(--tinta-suave); max-width: 52ch; }
.vacio .btn { margin-top: 16px; }
.cargando { padding: 48px 0; color: var(--tinta-suave); }
.cargando::before { content: ''; display: inline-block; width: 14px; height: 14px; margin-right: 10px; vertical-align: -2px; border: 1px solid var(--linea-fuerte); border-top-color: var(--tinta); border-radius: 50%; animation: gira 0.9s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cargando::before { animation: none; } * { scroll-behavior: auto !important; } }
.aviso { padding: 14px 16px; border-left: 2px solid var(--arena-osc); background: var(--papel); margin-bottom: 24px; }
.aviso.error { border-left-color: var(--error); }

/* Registros recientes */
.registro { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 16px 0; border-bottom: 1px solid var(--linea); }
.registro .tipo { font-size: 0.875rem; color: var(--tinta-suave); }
.registro .resumen { font-weight: 400; overflow-wrap: anywhere; }
.registro .monto { text-align: right; font-weight: 400; }
.registro .acc { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 8px; }

/* Venta de colección */
.item-venta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--linea); }
.item-venta .nombre { font-weight: 400; }
.item-venta .meta { font-size: 0.875rem; color: var(--tinta-suave); }
.item-venta .precio { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; }
.item-venta .precio .campo { margin: 0; flex: 1; }
.item-venta .descuento { font-size: 0.875rem; color: var(--aviso); }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--linea-fuerte); }
.stepper button { width: 44px; height: 44px; background: var(--superficie); border: 0; cursor: pointer; display: grid; place-items: center; color: inherit; }
.stepper button[disabled] { opacity: 0.35; cursor: default; }
.stepper output { min-width: 40px; text-align: center; font-weight: 400; }

/* Modal */
dialog.modal { padding: 0; border: 1px solid var(--linea-fuerte); background: var(--superficie); color: var(--tinta); width: calc(100% - 24px); max-width: 560px; max-height: calc(100dvh - 24px); overflow: auto; }
dialog.modal::backdrop { background: rgba(27, 26, 24, 0.4); }
.modal-cab { display: flex; justify-content: space-between; align-items: center; padding: 8px 8px 8px 24px; border-bottom: 1px solid var(--linea); }
.modal-cab h2 { font-size: 1.25rem; font-weight: 300; }
.modal-cuerpo { padding: 24px; }
.modal-pie { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; padding: 0 24px 24px; }
.credencial { padding: 16px; background: var(--papel); border-left: 2px solid var(--arena-osc); margin: 16px 0; font-size: 1.125rem; line-height: 1.8; overflow-wrap: anywhere; }

/* Aviso emergente y conexión */
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 100; max-width: calc(100% - 32px); padding: 13px 22px; background: var(--tinta); color: #fff; }
.toast.error { background: var(--error); }
.sin-conexion { background: var(--tinta); color: #fff; text-align: center; padding: 6px 12px; font-size: 0.875rem; }

/* Acceso */
.acceso { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; padding: 0 20px 40px; }
.acceso .regla { width: 1px; height: clamp(56px, 16vh, 140px); background: var(--tinta); }
.acceso .marca { font-size: clamp(1.45rem, 6.2vw, 2.1rem); margin-top: 0; }
.acceso form { width: 100%; max-width: 380px; margin-top: 56px; }
.acceso .pie { margin-top: auto; padding-top: 40px; color: var(--tinta-tenue); font-size: 0.875rem; text-align: center; }
.acceso h1 { font-size: 1rem; font-weight: 300; color: var(--tinta-suave); margin-top: 20px; letter-spacing: 0.02em; }
.sub-pantalla { max-width: 440px; margin: 0 auto; padding: 56px 20px; }

button.atajo { font: inherit; text-align: left; cursor: pointer; width: 100%; }
button.atajo[disabled] { opacity: 0.5; cursor: default; }
.sub-pantalla > .marca { display: block; text-align: center; margin: 0 0 40px; }
.sub-pantalla > .btn.texto { display: block; margin: 24px auto 0; }
.catalogo-nombre .estado { margin-left: 10px; }
.marca-enlace { text-decoration: none; color: inherit; }

.diagnostico { width: 100%; max-width: 380px; margin-top: 12px; padding: 14px 16px; background: var(--papel); border-left: 2px solid var(--arena-osc); font-size: 0.9375rem; }
.diagnostico p { margin-top: 8px; color: var(--tinta-suave); }
.acceso > .btn.texto { margin-top: 12px; }