/* contasuma — inventario y cuentas por cobrar.
 *
 * Pantallas de trabajo: tablas densas, acciones a la vista y diálogos cortos.
 * Nada de asistentes de varios pasos para cargar un producto.
 */

.panel.ancho{max-width:1100px}

/* ── barra de filtros ── */
.barra-filtros{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.barra-filtros input[type="search"]{
  flex:1;min-width:200px;padding:10px 12px;border:1.5px solid var(--line);
  border-radius:var(--r-2);background:var(--card);font-size:.95rem;
}
.barra-filtros input[type="search"]:focus-visible{border-color:var(--emerald);outline-offset:0}
.casilla{display:flex;align-items:center;gap:7px;font-size:.86rem;color:var(--ink-soft);cursor:pointer}
.casilla input{width:16px;height:16px;accent-color:var(--emerald-dark)}

/* ── aviso de reposición ── */
.alerta-reponer{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:#FFF3D6;border:1px solid #F5E0A3;border-radius:var(--r-2);
  padding:11px 14px;margin-bottom:14px;font-size:.86rem;
}
.alerta-reponer strong{color:var(--alerta)}
.pastilla{
  font-size:.76rem;background:var(--card);border:1px solid #F5E0A3;
  border-radius:var(--r-full);padding:3px 10px;color:var(--alerta);
}
.pastilla.agotado{background:#FDE8E6;border-color:#F6C9C4;color:var(--peligro);font-weight:600}

/* ── tablas de módulo ── */
.tabla td.acciones{white-space:nowrap;display:flex;gap:8px;justify-content:flex-end;align-items:center}
.tabla .suave{color:var(--ink-soft)}
.tabla td.por_agotarse{color:var(--alerta);font-weight:600}
.tabla td.agotado{color:var(--peligro);font-weight:600}
.btn.chico{padding:6px 12px;font-size:.82rem;border-radius:var(--r-1)}

/* ── por cobrar ── */
.total-cobrar{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}
.total-cobrar span{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft)}
.total-cobrar strong{font-size:1.4rem;font-weight:700}

.tabla td.debe{font-weight:700;font-size:.95rem}
.tabla tr.sobre-limite td.debe{color:var(--peligro)}
.etiqueta.aviso{background:#FFF3D6;color:var(--alerta);margin-left:8px}
.tel{display:block;font-size:.78rem;color:var(--emerald-dark);margin-top:2px;
  text-decoration:underline;text-underline-offset:2px}

/* ── diálogos ── */
.dialogo{
  border:none;border-radius:var(--r-4);padding:0;max-width:min(520px,calc(100vw - 32px));
  box-shadow:0 30px 70px rgba(3,37,28,.28);color:var(--ink);
}
.dialogo::backdrop{
  background:rgba(3,37,28,.4);
  transition:opacity var(--t-medio) var(--sal),display var(--t-medio) allow-discrete,
             overlay var(--t-medio) allow-discrete;
}

/* Un diálogo que aparece de golpe se lee como un fallo: el ojo no
   registra de dónde salió y la pantalla parece dar un salto.
 *
 * Entra desde scale(.97), NUNCA desde scale(0): nada en el mundo real
 * aparece de la nada, y una escala cero se ve como algo que se materializa.
 * Un 3 % basta para que el ojo lea "esto viene hacia mí".
 *
 * Y el origen se queda en el centro a propósito: los diálogos no cuelgan
 * de ningún botón concreto, así que escalarlos desde una esquina sería
 * mentir sobre de dónde vienen. Eso vale para menús, no para esto. */
.dialogo{
  opacity:1;transform:scale(1);
  transition:opacity var(--t-medio) var(--sal),transform var(--t-medio) var(--sal),
             display var(--t-medio) allow-discrete,overlay var(--t-medio) allow-discrete;
}
.dialogo:not([open]){opacity:0;transform:scale(.97)}
@starting-style{
  .dialogo[open]{opacity:0;transform:scale(.97)}
  .dialogo[open]::backdrop{opacity:0}
}
.dialogo form{padding:24px}
.dialogo h2{font-size:1.15rem;margin-bottom:16px}
.dialogo .campos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dialogo .campo{margin-bottom:0}
.dialogo .campo.ancho2{grid-column:1 / -1}
.dialogo select{
  width:100%;padding:11px 12px;border:1.5px solid var(--line);border-radius:var(--r-2);
  background:var(--card);font-size:.95rem;
}
.dialogo .error{min-height:1.1em;margin-top:12px;font-size:.82rem;color:var(--peligro);font-weight:600}
.dialogo-pie{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}

.abono-saldo{margin:-8px 0 16px;font-size:.9rem;color:var(--ink-soft)}
.abono-saldo strong{color:var(--ink);font-size:1.05rem}
.abono-equivale{margin-top:12px;font-size:.84rem;color:var(--emerald-dark);min-height:1.2em}

@media(max-width:600px){
  .dialogo .campos{grid-template-columns:1fr}
  .tabla td.acciones{flex-direction:column;align-items:flex-end;gap:4px}
  .total-cobrar{align-items:flex-start}
}

/* ══════════════════════════════════════ gastos y reportes */

/* ── barra de periodo ── */
.barra-periodo{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px;
}
.barra-periodo label{font-size:.82rem;color:var(--ink-soft)}
.barra-periodo input[type="date"],.barra-periodo select{
  padding:9px 11px;border:1.5px solid var(--line);border-radius:var(--r-2);
  background:var(--card);font-size:.9rem;
}
.barra-periodo input[type="date"]:focus-visible,
.barra-periodo select:focus-visible{border-color:var(--emerald);outline-offset:0}
.barra-periodo .separa{flex:1;min-width:0}

/* ── resumen por categoría ── */
.chips-categoria{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.chip-categoria{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--emerald-soft);border:1px solid #BBEBD5;border-radius:var(--r-full);
  padding:5px 13px;font-size:.82rem;
}
.chip-categoria strong{font-weight:700}

/* ── bloques del reporte ── */
.bloque{margin-top:26px}
.bloque h2{font-size:1rem;margin-bottom:10px}
.dos-columnas{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.leyenda{margin-top:8px;font-size:.78rem;color:var(--ink-soft);display:flex;
  align-items:center;gap:7px;flex-wrap:wrap}
.punto{width:10px;height:10px;border-radius:var(--r-1);display:inline-block}
.punto.venta{background:var(--emerald-dark)}
.punto.gasto{background:var(--amber)}
.punto.gasto+*{margin-left:2px}

/* El resultado del periodo cambia de color, y solo él: si todo se colorea,
   nada destaca. En rojo significa que el periodo se cerró gastando más. */
.tarjeta.en-verde strong{color:var(--emerald-dark)}
.tarjeta.en-rojo strong{color:var(--peligro)}

/* ── el gráfico ──
   CSS, no una librería: son barras. Se desplaza dentro de su propia caja
   para que un mes de 31 días no obligue a la página entera a moverse a lo
   ancho en un teléfono. */
.grafico{
  display:flex;gap:10px;align-items:flex-end;
  overflow-x:auto;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-3);
  /* El hueco de arriba no es aire decorativo: es donde cabe el globo con
     las cifras. Con overflow-x:auto el navegador recorta también por
     arriba, y sin ese sitio el globo salía cortado por la mitad. */
  padding:52px 14px 10px;
}
.grafico-dia{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;
  flex:0 0 auto;background:none;border:none;padding:4px 2px 0;cursor:pointer;
  border-radius:var(--r-1);
  transition:background var(--t-corto) var(--sal);
}
.grafico-dia:active{transform:scale(.97)}

/* El valor sale al tocar, no solo al pasar el ratón. Un título emergente
   del navegador no existe en un teléfono, que es donde se mira esto. */
.g-globo{
  position:absolute;bottom:calc(100% + 2px);left:50%;transform:translate(-50%,4px);
  display:flex;flex-direction:column;gap:1px;white-space:nowrap;
  background:var(--ink);color:#fff;border-radius:var(--r-1);
  padding:6px 10px;font-size:.7rem;line-height:1.35;
  opacity:0;pointer-events:none;z-index:5;
  box-shadow:0 8px 22px -10px rgba(3,37,28,.5);
  transition:opacity var(--t-corto) var(--sal),transform var(--t-corto) var(--sal);
}
.g-globo-v::before{content:"ventas ";opacity:.62}
.g-globo-g::before{content:"gastos ";opacity:.62}
.grafico-dia.abierto .g-globo,
.grafico-dia:focus-visible .g-globo{opacity:1;transform:translate(-50%,0)}
.grafico-dia.abierto{background:var(--emerald-soft)}
.grafico-barras{
  height:110px;display:flex;align-items:flex-end;gap:3px;
}
/* La altura va en el propio elemento: dentro de un contenedor de altura fija,
   un porcentaje sí resuelve. Sin altura, una barra en align-items:flex-end
   simplemente no se dibuja. */
.barra-venta,.barra-gasto{
  width:11px;height:var(--alto);border-radius:3px 3px 0 0;display:block;
  transform-origin:bottom center;
}
/* Las barras crecen desde abajo al entrar, escalonadas por día. Esto se
   mira una vez cada tanto, no cien veces al día: aquí el movimiento se
   gana el sitio, y crecer desde la base es como se lee un gráfico.
   La ALTURA es la correcta desde el principio; lo que se anima es la
   escala, así que ninguna barra miente sobre su valor a mitad de camino. */
@media (prefers-reduced-motion: no-preference){
  .barra-venta,.barra-gasto{
    animation:crecer 420ms var(--sal) backwards;
    animation-delay:calc(var(--orden) * 45ms);
  }
}
@keyframes crecer{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.barra-venta{background:var(--emerald-dark)}
.barra-gasto{background:var(--amber)}
.grafico-dia small{font-size:.68rem;color:var(--ink-soft);white-space:nowrap}

@media(max-width:820px){
  .dos-columnas{grid-template-columns:1fr;gap:0}
}
@media(max-width:600px){
  .barra-periodo{gap:8px}
  .barra-periodo .separa{display:none}
  /* Un campo de fecha nativo necesita ~150 px para no cortar el ano. Con menos,
     el telefono ensena "01/08/202" y nadie sabe de que ano habla el reporte. */
  .barra-periodo input[type="date"]{flex:1 1 150px;min-width:150px}
}

/* ══════════════════════════════════════ equipo */

.ayuda-rol{
  display:block;margin-top:6px;font-size:.78rem;color:var(--ink-soft);line-height:1.4;
}
.rol-select{
  padding:7px 10px;border:1.5px solid var(--line);border-radius:var(--r-1);
  background:var(--card);font-size:.86rem;max-width:190px;
}
.rol-select:focus-visible{border-color:var(--emerald);outline-offset:0}
/* El propio rol no se toca desde aqui: nadie puede degradarse a si mismo. */
.rol-select[disabled]{opacity:.55;cursor:not-allowed}

/* El correo NO va con estilo de enlace: no lleva a ninguna parte, y pintarlo
   como enlace invita a pulsarlo. */
.correo{display:block;font-size:.78rem;color:var(--ink-soft);margin-top:2px}

.etiqueta.soy-yo{background:var(--emerald-soft);color:var(--emerald-dark);margin-left:8px}

/* Quitar el acceso no se pinta como un enlace mas. Es lo unico de esta
   pantalla que deja a alguien fuera. */
.enlace.peligroso{color:var(--peligro)}

.roles-tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.rol-tarjeta{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-2);padding:14px 16px;
}
.rol-tarjeta strong{display:block;font-size:.92rem;margin-bottom:5px}
.rol-tarjeta span{font-size:.8rem;color:var(--ink-soft);line-height:1.45}

@media(max-width:600px){
  .rol-select{max-width:none;width:100%}
}

/* ── costo y margen ── */
.margen{color:var(--emerald-dark);font-weight:600}
.margen-malo{color:var(--peligro);font-weight:600}
.tabla td.margen,.tabla td.margen-malo{white-space:nowrap}

/* El aviso de cobertura no es decorativo: sin el, alguien lee "ganancia" y se
   cree que habla de todo su negocio cuando habla de la mitad. */
.aviso-cobertura{
  margin-top:14px;padding:12px 16px;font-size:.86rem;line-height:1.5;
  background:#FFF3D6;border:1px solid #F5E0A3;border-radius:var(--r-2);color:var(--alerta);
}
.aviso-cobertura a{color:var(--alerta);font-weight:700;
  text-decoration:underline;text-underline-offset:3px}

/* ── acciones de cabecera ── */
.cabeza-acciones{display:flex;align-items:center;gap:16px}

/* ══════════════════════════════════════ imprimir
 *
 * Para PDF no hay librería: el navegador ya sabe guardar en PDF al imprimir.
 * Lo único que hace falta es que la página impresa no lleve el menú, ni los
 * botones, ni fondos que gastan tinta. Un PDF de reportes es algo que alguien
 * imprime de verdad y le lleva a su contador.
 */
@media print{
  .lateral,.cabecera,.barra-periodo,.aviso,.salto{display:none !important}
  .app{display:block !important}
  .vista{padding:0 !important;overflow:visible !important}
  .panel,.panel.ancho{max-width:none}

  body{background:#fff;font-size:11pt}
  .tarjeta,.tabla,.grafico,.rol-tarjeta{
    background:#fff;box-shadow:none;break-inside:avoid;
  }
  .tabla th{background:#f2f2f2 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  /* Las barras se imprimen: sin color, el gráfico es una fila de huecos. */
  .barra-venta,.barra-gasto,.punto{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .grafico{overflow:visible}

  .bloque,section{break-inside:auto}
  .bloque h2{break-after:avoid}
  .panel-cabeza{border-bottom:2px solid #000;padding-bottom:8px;margin-bottom:14px}

  /* El periodo del que habla la hoja tiene que salir impreso: un reporte sin
     fechas no le sirve a nadie tres semanas después. */
  .panel-fecha{font-size:11pt;font-weight:600}

  a[href]::after{content:""}     /* sin la URL detrás de cada enlace */
}


/* ══════════════════════════════════════ libro diario */

/* El aviso de que esto NO es un libro fiscal va arriba y en grande. Al pie y
   en letra chica seria justo donde nadie lo lee, y confundirlos le cuesta
   dinero a un negocio ante el SENIAT. */
.aviso-libro{margin-bottom:18px}

/* Un libro tiene muchas columnas. Se desplaza dentro de su caja en vez de
   empujar la pagina entera, como el grafico. */
.tabla-ancha{overflow-x:auto;padding-bottom:4px}
.tabla.libro{min-width:900px}
.tabla.libro td{vertical-align:top}

.pastilla-tipo{
  display:inline-block;font-size:.72rem;padding:2px 9px;border-radius:var(--r-full);
  border:1px solid var(--line);background:var(--paper);white-space:nowrap;
}
.pastilla-tipo.venta{background:var(--emerald-soft);border-color:#BBEBD5;color:var(--emerald-dark)}
.pastilla-tipo.abono{background:#EAF3FF;border-color:#C7DDF7;color:#1B4C86}
.pastilla-tipo.gasto{background:#FFF3D6;border-color:#F5E0A3;color:var(--alerta)}

.entro{color:var(--emerald-dark);font-weight:600}
.salio{color:var(--peligro);font-weight:600}
.saldo-libro{font-weight:700}

.hora-asiento,.tasa-asiento{
  display:block;font-size:.68rem;color:var(--ink-soft);font-weight:400;
}
.nota-fiado{
  background:var(--paper);border-left:3px solid var(--amber);
  padding:10px 14px;margin:14px 0;display:block;line-height:1.5;
}

@media print{
  .aviso-libro{border:1px solid #000;background:#fff !important}
  .tabla-ancha{overflow:visible}
  .tabla.libro{min-width:0;font-size:9pt}
}


/* ══════════════════════════════════════ Suma */

.panel.suma{max-width:760px}
.aviso-suma{margin-bottom:18px}

.suma-hilo{
  display:flex;flex-direction:column;gap:12px;
  min-height:180px;max-height:52vh;overflow-y:auto;padding:4px 2px 8px;
}
.burbuja{max-width:88%;padding:12px 16px;border-radius:var(--r-3);line-height:1.5;font-size:.95rem}
/* La pregunta a la derecha y la respuesta a la izquierda: es la convencion que
   todo el mundo ya conoce de su telefono, y aqui no hay nada que ensenar. */
.burbuja.mia{align-self:flex-end;background:var(--emerald-dark);color:#fff;border-bottom-right-radius:4px}
.burbuja.suya{
  align-self:flex-start;background:var(--card);border:1px solid var(--line);
  border-bottom-left-radius:4px;
}
.burbuja.suya p{margin:0}
.suma-cifra{display:block;font-size:1.5rem;font-weight:700;margin-bottom:6px;color:var(--ink)}
.burbuja.suya .btn{margin-top:10px}

.suma-sugerencias{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 14px}
.chip-pregunta{
  background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-full);
  padding:7px 15px;font-size:.83rem;cursor:pointer;color:var(--ink-soft);
  transition:border-color var(--t-corto) var(--sal),color var(--t-corto) var(--sal);
}

.suma-caja{display:flex;gap:10px}
.suma-caja input{
  flex:1;min-width:0;padding:12px 14px;border:1.5px solid var(--line);
  border-radius:var(--r-2);background:var(--card);font-size:.95rem;
}
.suma-caja input:focus-visible{border-color:var(--emerald);outline-offset:0}

@media(max-width:600px){
  .burbuja{max-width:100%}
  .suma-hilo{max-height:none}
}

/* ══════════════════════════════════════ manual
 *
 * Un manual se ojea, no se lee de corrido. Todo aquí sirve a eso: buscador
 * arriba, apartados plegados, y lo que importa —qué puedo hacer YO— antes que
 * la teoría.
 */

.panel.manual{max-width:900px}

.manual-buscar{margin-bottom:22px}
.manual-buscar input{
  width:100%;padding:13px 16px;border:1.5px solid var(--line);border-radius:var(--r-2);
  background:var(--card);font-size:1rem;
}
.manual-buscar input:focus-visible{border-color:var(--emerald);outline-offset:0}

/* ── quién eres ── */
.manual-yo{
  display:flex;flex-direction:column;gap:3px;
  background:linear-gradient(120deg,var(--emerald-soft),var(--card));
  border:1px solid #BBEBD5;border-radius:var(--r-3);padding:18px 22px;
}
.manual-yo-eti{font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;color:var(--emerald-dark)}
.manual-yo strong{font-family:'Sora',sans-serif;font-size:1.35rem}
.manual-yo span:last-child{font-size:.88rem;color:var(--ink-soft)}

/* ── primeros pasos ── */
.m-progreso{
  font-size:.75rem;font-weight:600;color:var(--emerald-dark);
  background:var(--emerald-soft);border-radius:var(--r-full);padding:3px 11px;margin-left:10px;
  vertical-align:middle;font-family:'IBM Plex Mono',monospace;
}
.m-barra{height:6px;background:var(--line);border-radius:var(--r-full);overflow:hidden;margin-bottom:16px}
.m-barra span{
  display:block;height:100%;width:100%;background:var(--emerald);
  border-radius:var(--r-full);
  /* scaleX en vez de width: mover el ancho obliga al navegador a
     recalcular la maqueta en cada fotograma; una escala va a la GPU. */
  transform:scaleX(var(--parte));transform-origin:left center;
  transition:transform var(--t-medio) var(--sal);
}

.m-pasos{list-style:none;display:flex;flex-direction:column;gap:2px}
.m-pasos li{display:flex;gap:14px;align-items:flex-start;padding:11px 12px;border-radius:var(--r-2)}
.m-pasos li.listo{opacity:.62}
.m-pasos li.listo strong{text-decoration:line-through;text-decoration-color:var(--emerald)}
.m-marca{
  flex:0 0 auto;width:24px;height:24px;border-radius:50%;
  border:2px solid var(--line);display:grid;place-items:center;
  /* El palito tiene que VERSE. Con .8rem se perdia dentro del circulo verde y
     los pasos hechos parecian pendientes, que es justo lo contrario. */
  font-size:1rem;line-height:1;font-weight:700;color:#fff;margin-top:1px;
}
.m-pasos li.listo .m-marca{background:var(--emerald);border-color:var(--emerald)}
.m-pasos li > div{display:flex;flex-direction:column;gap:2px}
.m-pasos strong{font-size:.95rem}
.m-pasos span{font-size:.84rem;color:var(--ink-soft);line-height:1.45}
.m-pasos .btn{align-self:flex-start;margin-top:7px}

/* ── qué puede cada quien ── */
.m-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.m-tab{
  background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-full);
  padding:7px 16px;font-size:.85rem;cursor:pointer;color:var(--ink-soft);
  transition:background var(--t-corto) var(--sal),border-color var(--t-corto) var(--sal),
              color var(--t-corto) var(--sal);
}
.m-tab.activo{background:var(--emerald-dark);border-color:var(--emerald-dark);color:#fff;font-weight:600}
.m-tab-resumen{font-size:.9rem;color:var(--ink-soft);margin-bottom:14px}

.m-permisos{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2px}
.m-permisos li{display:flex;gap:11px;align-items:center;padding:9px 12px;
  border-radius:var(--r-1);font-size:.9rem}
.m-permisos li span:first-child{
  flex:0 0 auto;width:22px;height:22px;border-radius:var(--r-1);display:grid;place-items:center;
  font-size:.75rem;font-weight:700;
}
.m-permisos li.si{background:var(--emerald-soft)}
.m-permisos li.si span:first-child{background:var(--emerald-dark);color:#fff}
.m-permisos li.no{color:var(--ink-soft)}
.m-permisos li.no span:first-child{background:var(--line);color:var(--ink-soft)}

/* ── módulos ── */
.m-modulos{display:flex;flex-direction:column;gap:8px}
.m-modulo{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-3);
  overflow:hidden;transition:border-color var(--t-corto) var(--sal);
}
.m-modulo[open]{border-color:var(--emerald)}
.m-modulo summary{
  display:grid;grid-template-columns:34px 1fr;gap:4px 14px;align-items:center;
  padding:15px 18px;cursor:pointer;list-style:none;
}
.m-modulo summary::-webkit-details-marker{display:none}
.m-icono{
  grid-row:1 / span 2;width:34px;height:34px;border-radius:var(--r-1);
  background:var(--emerald-soft);color:var(--emerald-dark);
  display:grid;place-items:center;font-size:1rem;
}
.m-titulo{font-family:'Sora',sans-serif;font-weight:600;font-size:1rem}
.m-para{font-size:.85rem;color:var(--ink-soft);line-height:1.4}
.m-cuerpo-modulo{padding:0 18px 18px 66px}
.m-como{margin:0 0 12px;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.m-como li{font-size:.9rem;line-height:1.5}
.m-ojo{
  font-size:.87rem;line-height:1.55;background:#FFF3D6;border:1px solid #F5E0A3;
  border-radius:var(--r-2);padding:11px 14px;margin-bottom:12px;
}

/* ── reglas ── */
.m-intro{font-size:.9rem;color:var(--ink-soft);margin-bottom:14px}
.m-reglas{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:12px}
.m-regla{
  background:var(--card);border:1px solid var(--line);border-left:3px solid var(--emerald);
  border-radius:var(--r-2);padding:15px 17px;display:flex;flex-direction:column;gap:5px;
}
.m-regla strong{font-family:'Sora',sans-serif;font-size:.95rem}
.m-regla span{font-size:.85rem;color:var(--ink-soft);line-height:1.5}

/* ── problemas ── */
.m-problema{border-bottom:1px solid var(--line)}
.m-problema summary{padding:13px 4px;cursor:pointer;font-weight:600;font-size:.94rem;
  list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center}
.m-problema summary::-webkit-details-marker{display:none}
.m-problema summary::after{content:"+";color:var(--emerald-dark);font-size:1.2rem;font-weight:400}
.m-problema[open] summary::after{content:"−"}
.m-problema p{padding:0 4px 15px;font-size:.9rem;color:var(--ink-soft);line-height:1.6;margin:0}
.m-problema a{color:var(--emerald-dark);font-weight:600;text-decoration:underline}

@media(max-width:600px){
  .m-cuerpo-modulo{padding:0 16px 16px}
  .m-permisos{grid-template-columns:1fr}
}

@media print{
  /* El boton de imprimir dentro del papel impreso es lo mas absurdo que puede
     salir de un PDF. */
  .manual-buscar,.m-tabs,.m-pasos .btn,.m-cuerpo-modulo .btn,
  #m-pdf,.panel-cabeza .btn{display:none !important}
  .panel.manual{max-width:none}
  .m-modulo,.m-regla,.m-problema{break-inside:avoid;border:1px solid #ccc}
  .m-ojo,.m-permisos li.si,.manual-yo,.m-icono,.m-marca,.m-barra span{
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  /* En papel se enseñan los cuatro roles, no solo el elegido en pantalla. */
  .m-seccion{break-inside:auto}
  h2{break-after:avoid}
}

/* La matriz completa de permisos existe solo para el papel: en pantalla se
   navega con las pestañas, que es más cómodo; en un PDF no hay nada que tocar. */
.m-matriz{display:none}
.m-matriz td.centro,.m-matriz th.centro{text-align:center}
.m-matriz td.si{color:var(--emerald-dark);font-weight:700}
.m-matriz td.no{color:var(--ink-soft)}

@media print{
  .m-permisos{display:none !important}
  .m-matriz{display:table;width:100%;break-inside:avoid}
}

/* ══════════════════════════════════════ cierre de caja */

.ci-hecho{
  background:var(--emerald-soft);border:1px solid #BBEBD5;border-radius:var(--r-3);
  padding:16px 20px;margin-bottom:20px;display:flex;flex-direction:column;gap:4px;
}
.ci-hecho strong{font-family:'Sora',sans-serif;font-size:1rem}
.ci-hecho span{font-size:.87rem;color:var(--ink-soft);line-height:1.45}

.ci-conteo{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.ci-conteo .campo{margin-bottom:0;min-width:190px}
.ci-conteo input{
  width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:var(--r-2);
  background:var(--card);font-family:'IBM Plex Mono',monospace;font-size:1.15rem;
}
.ci-conteo input:focus-visible{border-color:var(--emerald);outline-offset:0}
.ci-nota{margin:16px 0 14px;max-width:520px}
.ci-nota input{
  width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:var(--r-2);
  background:var(--card);font-size:.95rem;
}
/* Los gastos salen de la gaveta: se marcan distinto para que no se lean como
   dinero que entró. */
.tabla tr.ci-sale td{color:var(--ink-soft)}
.ci-otros{margin-top:16px}

/* ══════════════════════════════════════ comprobante */

.comprobante{
  margin-top:12px;padding:14px 16px;border-radius:var(--r-2);
  background:var(--emerald-soft);border:1px solid #BBEBD5;
  display:flex;flex-direction:column;gap:4px;
}
.comprobante strong{font-size:.95rem}
.comprobante > span{font-size:.83rem;color:var(--ink-soft)}
.comp-botones{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}

/* ── el ticket en papel ──
   80 mm es el ancho de las impresoras térmicas de mostrador. Todo lo demás de
   la página desaparece: si no, sale la aplicación entera en el rollo. */
#ticket-papel{display:none}

@media print{
  body:has(#ticket-papel) > *:not(#ticket-papel){display:none !important}
  #ticket-papel{
    display:block;width:72mm;margin:0;padding:0;
    font-family:'IBM Plex Mono',monospace;font-size:9.5pt;line-height:1.4;color:#000;
  }
  #ticket-papel .t-negocio{font-size:13pt;font-weight:700;text-align:center;margin-bottom:2mm}
  #ticket-papel .t-linea{margin:.6mm 0}
  #ticket-papel .t-fila{display:flex;justify-content:space-between}
  #ticket-papel .t-der{text-align:right}
  #ticket-papel .t-suave{color:#555;font-size:8pt}
  #ticket-papel .t-raya{border-top:1px dashed #000;margin:2mm 0}
  #ticket-papel .t-items{width:100%;border-collapse:collapse}
  #ticket-papel .t-items td{padding:.5mm 0;vertical-align:top}
  #ticket-papel .t-total{display:flex;justify-content:space-between;font-size:12pt;font-weight:700}
  #ticket-papel .t-anulada{text-align:center;font-weight:700;margin:2mm 0;letter-spacing:.1em}
  #ticket-papel .t-pie{text-align:center;font-size:8pt;margin-top:3mm;line-height:1.5}
  @page{margin:4mm}
}

/* ── la tasa sugerida ── */
.tasa-sugerida{
  background:var(--emerald-soft);border:1px solid #BBEBD5;border-radius:var(--r-2);
  padding:12px 14px;margin:-6px 0 16px;
}
.ts-cabeza{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ts-eti{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--emerald-dark)}
.ts-cabeza strong{font-size:1.25rem}
.ts-fecha{font-size:.75rem;color:var(--ink-soft);margin-left:6px}
.ts-aviso{margin-top:9px;font-size:.8rem;line-height:1.45;color:var(--alerta);font-weight:600}

/* ── importar ── */
.dialogo.dialogo-ancho{max-width:min(760px,calc(100vw - 32px))}
.imp-resumen{font-size:.9rem;color:var(--ink-soft);margin:0 0 12px}
.imp-cuenta{margin-bottom:16px}
.imp-cuenta strong{font-family:'IBM Plex Mono',monospace;font-size:1.05rem}
.imp-cuenta li.imp-mala::before{background:var(--alerta)}
.imp-fallo{display:block;font-weight:400;font-size:.82rem;margin-top:3px}
.dialogo code{
  font-family:'IBM Plex Mono',monospace;font-size:.82em;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-1);padding:1px 5px;
}

/* ── devolver ── */
.dv-cantidad{
  width:88px;padding:8px 10px;border:1.5px solid var(--line);border-radius:var(--r-1);
  background:var(--card);text-align:right;font-size:.95rem;
}
.dv-cantidad:focus-visible{border-color:var(--emerald);outline-offset:0}
.dv-total{
  margin:12px 0 0;font-size:1.1rem;font-weight:700;text-align:right;min-height:1.4em;
  color:var(--peligro);
}


/* Los estados de hover solo donde hay un raton de verdad.
   En un telefono, tocar dispara :hover y el estilo se queda pegado
   hasta que se toca otra cosa: botones resaltados sin razon en la
   pantalla que mas se usa. */
@media (hover: hover) and (pointer: fine){
  .chip-pregunta:hover{border-color:var(--emerald);color:var(--ink)}
  .m-tab:hover{border-color:var(--emerald)}
  .m-modulo summary:hover{background:var(--paper)}
}
/* Ocho barras sin escala enseñan la forma pero no la magnitud, y el
   título emergente solo existe con ratón: en un teléfono no hay forma de
   saber si la barra alta son 30 dólares o 300. El tope, escrito. */
.g-tope{
  font-size:.72rem;font-weight:400;color:var(--ink-soft);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-full);
  padding:2px 10px;margin-left:10px;vertical-align:middle;
}

/* ══════════════════════════════════════ el panel del día
 *
 * Antes eran cuatro cajas blancas iguales. El fallo no era la fealdad: era
 * que la cifra por la que alguien abre esta aplicación pesaba lo mismo que
 * la tasa del día. Aquí manda una sola.
 */

.hero-dia{
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
  padding:26px 30px;margin-bottom:18px;border-radius:var(--r-3);
  background:
    radial-gradient(ellipse 70% 120% at 8% 0%, rgba(5,150,105,.10), transparent 62%),
    linear-gradient(180deg, var(--card), var(--card));
  border:1px solid var(--line);
  /* La sombra lleva el tinte del fondo. Una sombra negra pura sobre un
     fondo verdoso se ve sucia, aunque nadie sepa decir por qué. */
  box-shadow:0 1px 2px rgba(3,37,28,.04),0 12px 28px -18px rgba(3,37,28,.22);
}
.hd-principal{display:flex;flex-direction:column;gap:2px;min-width:0}
.hd-eti{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--emerald-dark);font-weight:600;
}
.hd-cifra{
  font-size:clamp(2.4rem,6vw,3.4rem);font-weight:700;line-height:1.05;
  letter-spacing:-.03em;color:var(--ink);
  /* Las cifras no bailan de ancho mientras suben. */
  font-variant-numeric:tabular-nums;
}
.hd-bs{font-size:1rem;color:var(--ink-soft)}
.hero-dia.sin-ventas .hd-cifra{color:var(--ink-soft)}

.hd-lado{display:flex;flex-direction:column;align-items:flex-end;gap:6px;min-width:170px}
.hd-cambio{display:flex;align-items:baseline;gap:6px;font-size:.86rem;color:var(--ink-soft)}
.hd-cambio strong{font-size:1.05rem}
.hd-cambio.sube{color:var(--emerald-dark)}
.hd-cambio.baja{color:var(--peligro)}
.hd-cambio.neutro{font-style:italic}
.hd-flecha{font-size:.7rem}
.hd-pie{font-size:.7rem;color:var(--ink-soft)}

.tendencia{
  width:170px;height:34px;color:var(--emerald);
  /* La línea se dibuja al entrar: en un gráfico de siete puntos, verla
     crecer es lo que hace leer la forma en vez de mirar un adorno. */
  stroke-dasharray:400;stroke-dashoffset:400;
  animation:trazar 900ms var(--sal) forwards;
}
@keyframes trazar{to{stroke-dashoffset:0}}

/* ── lo que hay que atender ── */
.avisos-dia{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin-bottom:20px}
.aviso-dia{
  display:flex;flex-direction:column;gap:2px;padding:13px 16px;
  border-radius:var(--r-2);border:1px solid var(--line);background:var(--card);
  border-left-width:4px;
  transition:transform var(--t-toque) var(--sal),box-shadow var(--t-corto) var(--sal);
}
.aviso-dia strong{font-size:.94rem}
.aviso-dia span{font-size:.8rem;color:var(--ink-soft);line-height:1.4}
.aviso-dia.rojo{border-left-color:var(--peligro)}
.aviso-dia.ambar{border-left-color:var(--amber)}
.aviso-dia.verde{border-left-color:var(--emerald)}
.aviso-dia:active{transform:scale(.99)}

.todo-bien{
  padding:13px 16px;margin-bottom:20px;border-radius:var(--r-2);
  background:var(--emerald-soft);border:1px solid #BBEBD5;
  font-size:.9rem;color:var(--emerald-dark);
}

/* ── atajos ── */
.atajos{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.atajo{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 18px;border-radius:var(--r-2);
  background:var(--card);border:1.5px solid var(--line);
  font-weight:600;font-size:.92rem;
  transition:border-color var(--t-corto) var(--sal),transform var(--t-toque) var(--sal);
}
.atajo span{color:var(--emerald-dark)}
.atajo:active{transform:scale(.97)}

/* ══════════════════════════════════════ esqueletos
 *
 * "Cargando…" es una palabra que no dice cuánto falta ni qué va a venir.
 * Un hueso con la forma de lo que se está cargando sí: el ojo ya sabe
 * dónde mirar cuando llegue el dato, y la espera se siente más corta
 * aunque el reloj diga lo mismo.
 */
.hueso{
  border-radius:var(--r-2);
  background:linear-gradient(90deg,var(--line) 25%,#EDF5F0 37%,var(--line) 63%);
  background-size:400% 100%;
  animation:brillo 1.4s ease infinite;
}
@keyframes brillo{from{background-position:100% 0}to{background-position:0 0}}
.hueso-hero{height:118px;margin-bottom:18px}
.hueso-tarjeta{height:96px}
.hueso-fila{height:44px;margin-bottom:8px}
.hueso-tabla{height:280px}

@media (prefers-reduced-motion: reduce){
  .hueso{animation:none;background:var(--line)}
  .tendencia{animation:none;stroke-dashoffset:0}
}

@media(max-width:700px){
  .hero-dia{padding:20px;gap:18px}
  .hd-lado{align-items:flex-start;min-width:0}
  .atajo{flex:1 1 auto;justify-content:center}
}

@media (hover: hover) and (pointer: fine){
  .aviso-dia:hover{box-shadow:0 8px 22px -12px rgba(3,37,28,.28);transform:translateY(-1px)}
  .atajo:hover{border-color:var(--emerald)}
}

/* ── la pantalla entra, las cifras no ──
 *
 * El movimiento va en la tarjeta, no en el número. Escalonado corto —60 ms
 * entre una y otra— para que el ojo recorra la pantalla en orden en vez de
 * recibirla toda de golpe. Y cada cifra es la correcta desde el primer
 * fotograma: nada de números que suben desde cero en un sistema de dinero.
 */
@media (prefers-reduced-motion: no-preference){
  .hero-dia,.avisos-dia > *,.todo-bien,.tarjetas > *,.atajos > *{
    animation:entrar 380ms var(--sal) backwards;
  }
  .avisos-dia > *:nth-child(2),.tarjetas > *:nth-child(2){animation-delay:60ms}
  .avisos-dia > *:nth-child(3),.tarjetas > *:nth-child(3){animation-delay:120ms}
  .avisos-dia > *:nth-child(4){animation-delay:180ms}
  .tarjetas{animation-delay:60ms}
  .atajos > *{animation-delay:180ms}
}
@keyframes entrar{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}


.leyenda-pista{margin-left:auto;font-style:italic;opacity:.8}
@media (hover: hover) and (pointer: fine){
  .grafico-dia:hover{background:var(--emerald-soft)}
  .grafico-dia:hover .g-globo{opacity:1;transform:translate(-50%,0)}
  .leyenda-pista{display:none}
}

/* ══════════════════════════════════════ el resto de las pantallas
 *
 * Lo que se hizo en el resumen del día, aplicado a las otras once: hueso en
 * vez de la palabra "Cargando", entrada escalonada, una cifra que manda, y
 * vacíos que dicen qué hacer en vez de "no hay nada".
 */

/* ── más piezas de esqueleto ── */
.hueso-cabecera{height:34px;margin-bottom:10px;opacity:.7}
.hueso-producto{height:88px}
.hueso-pastilla{height:30px;width:112px;border-radius:var(--r-full)}
.huesos-fila{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.huesos.tarjetas{margin-bottom:16px}

/* ── el vacío que enseña qué hacer ──
 *
 * "No hay nada" deja a alguien sin saber si la pantalla está rota, si le
 * faltan permisos o si es que todavía no ha empezado.
 */
.vacio-compuesto{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:44px 24px;text-align:center;
  border:1.5px dashed var(--line);border-radius:var(--r-3);
  background:var(--card);
}
.vacio-compuesto .vc-icono{
  font-size:1.5rem;line-height:1;color:var(--emerald);
  width:52px;height:52px;display:grid;place-items:center;
  border-radius:var(--r-full);background:var(--emerald-soft);margin-bottom:2px;
}
.vacio-compuesto strong{font-size:1.05rem}
.vacio-compuesto span{color:var(--ink-soft);font-size:.9rem;max-width:46ch}
.vacio-compuesto .btn{margin-top:6px}

/* ── la cifra que manda, también fuera del resumen ──
 *
 * "Total fiado" y "Total del periodo" son la razón por la que se abre cada
 * una de esas dos pantallas, y estaban en el mismo cuerpo que el rótulo de
 * al lado. Suben de tamaño y se van al mono, como el resto del dinero.
 */
.total-cobrar strong{font-size:2rem;letter-spacing:-.02em;line-height:1.05}
@media(max-width:700px){ .total-cobrar strong{font-size:1.6rem} }

/* ── la tabla entra, y sus primeras filas se escalonan ──
 *
 * Sólo las primeras ocho: escalonar cincuenta filas convierte la entrada en
 * una espera, que es justo lo contrario de lo que se busca.
 */
@media (prefers-reduced-motion: no-preference){
  .tabla,.vacio-compuesto,.chips-categoria,.barra-periodo{
    animation:entrar 320ms var(--sal) backwards;
  }
  .tabla tbody tr:nth-child(-n+8){animation:entrar 300ms var(--sal) backwards}
  .tabla tbody tr:nth-child(2){animation-delay:30ms}
  .tabla tbody tr:nth-child(3){animation-delay:60ms}
  .tabla tbody tr:nth-child(4){animation-delay:90ms}
  .tabla tbody tr:nth-child(5){animation-delay:110ms}
  .tabla tbody tr:nth-child(6){animation-delay:130ms}
  .tabla tbody tr:nth-child(7){animation-delay:150ms}
  .tabla tbody tr:nth-child(8){animation-delay:170ms}

  /* El lienzo se cambia entero en cada ruta: que llegue, no que aparezca. */
  .vista-lienzo{animation:entrar-vista 260ms var(--sal) backwards}
}
@keyframes entrar-vista{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}

/* ── la fila responde al dedo ──
 *
 * Una fila con botones dentro se toca; sin respuesta al toque parece que la
 * pantalla no oyó. Va en la fila entera, no sólo en el botón, porque el dedo
 * cae en cualquier parte de la fila.
 */
.tabla tbody tr{transition:background var(--t-corto) var(--sal)}
.tabla tbody tr:active{background:var(--emerald-soft)}
@media (hover: hover) and (pointer: fine){
  .tabla tbody tr:hover{background:var(--emerald-soft)}
}

/* Una deuda pasada de límite se ve desde lejos, no leyendo la etiqueta. */
.tabla tr.sobre-limite{box-shadow:inset 3px 0 0 var(--peligro)}

@media (prefers-reduced-motion: reduce){
  .tabla,.tabla tbody tr,.vacio-compuesto,.chips-categoria,
  .barra-periodo,.vista-lienzo{animation:none}
}