/* Napo Core — estilos de la interfaz operativa. Pensada primero para teléfono y tableta en tienda. */
:root {
  --fondo: #f6f5f2;
  --superficie: #ffffff;
  --texto: #1d1b18;
  --texto-suave: #5f5a52;
  --borde: #e2ded6;
  --marca: #8a6d1f;
  --marca-fuerte: #6f5716;
  --marca-suave: #f4ecd6;
  --ok: #1f7a4d;
  --ok-suave: #e3f3ea;
  --aviso: #9a6200;
  --aviso-suave: #fff3d6;
  --error: #b3261e;
  --error-suave: #fde7e5;
  --info-suave: #e8eef8;
  --anulado: #a8326e;
  --anulado-suave: #fbe6f0;
  --lateral-fondo: #28313b;
  --lateral-sub: #313b46;
  --lateral-texto: #c3ccd6;
  --lateral-suave: #8793a0;
  --lateral-activo: #ffffff;
  --azul: #2f6fd6;
  --azul-fuerte: #2459b0;
  --radio: 10px;
  --sombra: 0 1px 2px rgba(0, 0, 0, .06), 0 2px 8px rgba(0, 0, 0, .04);
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #151412;
    --superficie: #1f1d1a;
    --texto: #f1ede6;
    --texto-suave: #b2aa9d;
    --borde: #36322c;
    --marca: #d4b25a;
    --marca-fuerte: #e6c46c;
    --marca-suave: #2d2716;
    --ok: #5cc28f;
    --ok-suave: #16291f;
    --aviso: #e0a93a;
    --aviso-suave: #2e2410;
    --error: #f08a82;
    --error-suave: #331614;
    --info-suave: #1a2230;
    --anulado: #f08cbd;
    --anulado-suave: #34172a;
    --lateral-fondo: #171c22;
    --lateral-sub: #1f262e;
    --azul: #24539f;
    --azul-fuerte: #1d4583;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 16px/1.45 var(--fuente); }
a { color: var(--marca-fuerte); }
h1 { font-size: 1.4rem; margin: .2rem 0 1rem; }
h2 { font-size: 1.1rem; margin: 1.4rem 0 .6rem; }
h3 { font-size: 1rem; margin: 1rem 0 .4rem; }
small, .suave { color: var(--texto-suave); }

/* ---------------------------------------------------------------- marco (como EFFI: documento 24A, A.2) */
/* Menú lateral a la izquierda con las secciones; barra superior azul con ☰, búsqueda, campana y usuario. */
.marco { display: flex; min-height: 100vh; }
.lateral { width: 250px; flex: 0 0 250px; background: var(--lateral-fondo); color: var(--lateral-texto);
  position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 30; font-size: .95rem; }
.lateral-marca { display: flex; align-items: center; justify-content: center; height: 52px; background: var(--azul);
  color: #fff; font-weight: 700; font-size: 1.25rem; letter-spacing: .03em; text-decoration: none; }
.lateral-marca span { color: #f3cf6b; }
.lateral-empresa { display: flex; align-items: center; gap: .6rem; padding: .8rem .9rem; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.lateral-empresa strong { display: block; color: var(--lateral-activo); font-size: .85rem; text-transform: uppercase; line-height: 1.2; }
.lateral-empresa small { color: var(--lateral-suave); font-size: .8rem; }
.empresa-sello { flex: 0 0 2.4rem; height: 2.4rem; border-radius: 50%; background: #000; color: #e2b94b; display: grid;
  place-items: center; font-weight: 700; border: 1px solid #6b5520; }
.lateral-rotulo { margin: .9rem .9rem .3rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--lateral-suave); }
.lateral nav { padding-bottom: 2rem; }
.lateral a { color: inherit; text-decoration: none; }
.lateral .icono { flex: 0 0 18px; opacity: .85; }
.lateral-directo, .lateral-seccion > summary { display: flex; align-items: center; gap: .6rem; padding: .62rem .9rem;
  border-left: 3px solid transparent; cursor: pointer; }
.lateral-seccion > summary { list-style: none; }
.lateral-seccion > summary::-webkit-details-marker { display: none; }
.lateral-seccion > summary span { flex: 1; }
.lateral-seccion > summary::after { content: "‹"; font-size: 1.1rem; line-height: 1; color: var(--lateral-suave); transition: transform .15s; }
.lateral-seccion[open] > summary::after { transform: rotate(-90deg); }
.lateral-directo:hover, .lateral-seccion > summary:hover { background: rgba(255, 255, 255, .05); color: var(--lateral-activo); }
.lateral-directo.activa, .lateral-seccion.activa > summary { border-left-color: var(--azul); color: var(--lateral-activo); font-weight: 600; }
.lateral-seccion ul { list-style: none; margin: 0; padding: .2rem 0 .4rem; background: var(--lateral-sub); }
.lateral-seccion li a { display: block; padding: .45rem .9rem .45rem 2.9rem; color: var(--lateral-suave); }
.lateral-seccion li a:hover { color: var(--lateral-activo); }
.lateral-seccion li a.activa { color: var(--lateral-activo); font-weight: 700; }
.area { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.barra-superior { display: flex; align-items: center; gap: .75rem; height: 52px; padding: 0 1rem; background: var(--azul);
  color: #fff; position: sticky; top: 0; z-index: 20; }
.hamburguesa { background: transparent; border: 0; color: #fff; font-size: 1.35rem; padding: .2rem .45rem; min-height: 0; cursor: pointer; }
.hamburguesa:hover { background: var(--azul-fuerte); }
.barra-superior .buscar-global input { border-color: transparent; }
.barra-derecha { margin-left: auto; display: flex; align-items: center; gap: .6rem; font-size: .9rem; }
.barra-derecha form { margin: 0; }
.campana { position: relative; color: #fff; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; }
.campana:hover { background: var(--azul-fuerte); }
.campana .icono { width: 21px; height: 21px; }
.insignia { position: absolute; top: 1px; right: -2px; min-width: 1.15rem; padding: 0 .3rem; border-radius: 999px; background: #8fc2ff;
  color: #0b2a57; font-size: .7rem; font-weight: 700; line-height: 1.15rem; text-align: center; }
.migas { padding: .55rem 1rem; background: var(--superficie); border-bottom: 1px solid var(--borde); font-size: .85rem; color: var(--texto-suave); }
.migas a { color: inherit; }
.migas span { color: var(--texto); font-weight: 600; }
.velo { display: none; }
/* Pantalla ancha: el menú está a la vista; ☰ lo esconde (se recuerda en este navegador). */
@media (min-width: 1000px) {
  .marco.menu-oculto .lateral { display: none; }
}
/* Teléfono y tableta: el menú se abre sobre el contenido con ☰ y se cierra al tocar fuera o al navegar. */
@media (max-width: 999px) {
  .lateral { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 0 24px rgba(0, 0, 0, .35); }
  .marco.menu-abierto .lateral { transform: none; }
  .marco.menu-abierto .velo { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 25; }
}
.contador { display: inline-block; min-width: 1.3rem; padding: 0 .35rem; border-radius: 999px; background: var(--error); color: #fff; font-size: .75rem; text-align: center; margin-left: .2rem; }

main { max-width: 1100px; margin: 0 auto; padding: 1rem 1rem 4rem; }
/* Dentro del marco el contenido usa todo el ancho, como en EFFI (tablas anchas). */
.area main, .area .pie { max-width: none; margin: 0; width: 100%; }
.tarjetas { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1rem; box-shadow: var(--sombra); }
.tarjeta h2 { margin-top: 0; }
.cifra { font-size: 2rem; font-weight: 700; line-height: 1; }
.acciones { display: flex; gap: .5rem; flex-wrap: wrap; margin: .75rem 0; }

.boton, button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; padding: .55rem 1rem; border-radius: 8px; border: 1px solid var(--borde); background: var(--superficie); color: var(--texto); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.boton.primario, button.primario { background: var(--marca); border-color: var(--marca); color: #fff; }
.boton.primario:hover, button.primario:hover { background: var(--marca-fuerte); }
.boton.peligro, button.peligro { border-color: var(--error); color: var(--error); }
.boton.pequeno, button.pequeno { min-height: 34px; padding: .3rem .65rem; font-size: .9rem; }
button:disabled { opacity: .55; cursor: not-allowed; }

form.pila > * + * { margin-top: .75rem; }
label { display: block; font-weight: 600; margin-bottom: .25rem; }
input, select, textarea { width: 100%; min-height: 44px; padding: .55rem .7rem; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie); color: var(--texto); font: inherit; }
textarea { min-height: 90px; }
/* Casillas y opciones no son campos de texto: sin el ancho completo ni el alto de 44 px de los campos. */
input[type="checkbox"], input[type="radio"] { width: 1.15rem; height: 1.15rem; min-height: auto; padding: 0;
  flex: none; accent-color: var(--marca); }
/* Ubicación en la 429: tres listas cortas lado a lado, también en el teléfono. */
fieldset.ubicacion-bodega { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.ubicacion-bodega legend { font-weight: 600; margin-bottom: .25rem; padding: 0; }
.ubicacion-bodega .tres { display: grid; gap: .5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fila-form { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.ayuda { font-size: .85rem; color: var(--texto-suave); margin-top: .2rem; }
.errorlist { color: var(--error); margin: .25rem 0; padding-left: 1.1rem; }

.escaner { display: flex; gap: .5rem; flex-wrap: wrap; }
.escaner input { flex: 1 1 8rem; }
.escaner input[data-escaner], .escaner input[name="q"] { flex: 3 1 12rem; }
.escaner button { flex: 0 0 auto; }
.escaner input { font-size: 1.25rem; font-variant-numeric: tabular-nums; letter-spacing: .03em; }

.mensajes { list-style: none; padding: 0; margin: 0 0 1rem; }
.mensaje { padding: .7rem .9rem; border-radius: 8px; margin-bottom: .5rem; border: 1px solid transparent; }
.mensaje.success { background: var(--ok-suave); border-color: var(--ok); }
.mensaje.error { background: var(--error-suave); border-color: var(--error); font-weight: 600; }
.mensaje.warning { background: var(--aviso-suave); border-color: var(--aviso); }
.mensaje.info { background: var(--info-suave); }

.tabla-contenedor { overflow-x: auto; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--borde); vertical-align: top; }
th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); background: var(--fondo); }
tr:last-child td { border-bottom: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.codigo { font-variant-numeric: tabular-nums; font-weight: 700; }

.etiqueta { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .8rem; font-weight: 600; background: var(--fondo); border: 1px solid var(--borde); white-space: nowrap; }
.etiqueta.ok { background: var(--ok-suave); border-color: var(--ok); color: var(--ok); }
.etiqueta.aviso { background: var(--aviso-suave); border-color: var(--aviso); color: var(--aviso); }
.etiqueta.error { background: var(--error-suave); border-color: var(--error); color: var(--error); }
.etiqueta.info { background: var(--info-suave); }
.etiqueta.anulado { background: var(--anulado-suave); border-color: var(--anulado); color: var(--anulado); }

.datos { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; }
.datos dt { color: var(--texto-suave); }
.datos dd { margin: 0; font-weight: 600; }

.linea-tiempo { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--borde); }
.linea-tiempo li { position: relative; padding: .1rem 0 .9rem 1rem; }
.linea-tiempo li::before { content: ""; position: absolute; left: -7px; top: .45rem; width: 12px; height: 12px; border-radius: 50%; background: var(--marca); }
.linea-tiempo time { display: block; font-size: .8rem; color: var(--texto-suave); }

.vacio { padding: 1.2rem; text-align: center; color: var(--texto-suave); }
.alerta-caja { border-left: 4px solid var(--aviso); padding-left: .6rem; }
.alerta-caja.CRITICA { border-left-color: var(--error); }
.pie { max-width: 1100px; margin: 0 auto; padding: 1rem; font-size: .8rem; color: var(--texto-suave); }
.oculto { display: none; }
.htmx-request .indicador { display: inline; }
.indicador { display: none; }

.ingreso { max-width: 380px; margin: 8vh auto; }
.ingreso .tarjeta { padding: 1.5rem; }

@media (max-width: 640px) {
  .barra-superior { gap: .4rem; padding: 0 .5rem; }
  .usuario-nombre { display: none; }
  .escaner input[data-escaner], .escaner input[name="q"] { flex-basis: 100%; }
  .escaner button { flex: 1 1 auto; }
  main { padding: .75rem .75rem 4rem; }
  .datos { grid-template-columns: 1fr; }
  /* Tablas como tarjetas en el teléfono: cada celda muestra su etiqueta. */
  .responsiva thead { display: none; }
  .responsiva, .responsiva tbody, .responsiva tr, .responsiva td { display: block; width: 100%; }
  .responsiva tr { border-bottom: 1px solid var(--borde); padding: .5rem .25rem; }
  .responsiva td { border: 0; padding: .2rem .5rem; text-align: left; }
  .responsiva td[data-etiqueta]::before { content: attr(data-etiqueta) ": "; color: var(--texto-suave); font-weight: 400; }
  .responsiva td.num { text-align: left; }
  .datos dt { margin-top: .4rem; }
}

/* Segundo factor */
.qr { text-align: center; margin: .5rem 0; }
.qr img { background: #fff; padding: 8px; border-radius: 8px; }
code.secreto { font-size: 1rem; letter-spacing: .08em; word-break: break-all; }
input.codigo-mfa { font-size: 1.4rem; letter-spacing: .3em; text-align: center; max-width: 12rem; }
ol.pasos { padding-left: 1.2rem; }
ul.codigos-recuperacion { columns: 2; list-style: none; padding: 0; font-size: 1.05rem; }
ul.codigos-recuperacion li { padding: .2rem 0; }

/* Búsqueda global en la barra (atajo «/») */
.buscar-global { flex: 0 1 17rem; }
.buscar-global input { width: 100%; min-height: 38px; padding: .35rem .6rem; }

/* Tabla operativa: filtros, barra de resultados, selección masiva y páginas */
.filtros > * + * { margin-top: .5rem; }
.filtros-fila { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.filtros-fila select { flex: 1 1 10rem; min-height: 40px; }
.barra-tabla { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin: .75rem 0 .25rem; }
.barra-tabla p { margin: 0; }
.acciones-masivas { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .5rem .75rem; margin-bottom: .5rem;
  background: var(--marca-suave); border: 1px solid var(--borde); border-radius: var(--radio); position: sticky; top: 3.4rem; z-index: 5; }
.acciones-masivas select { min-height: 40px; max-width: 22rem; }
label.en-linea { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; }
th.casilla, td.casilla { width: 2.5rem; text-align: center; }
td.casilla input, th.casilla input { width: 1.25rem; height: 1.25rem; }
a.orden { color: inherit; text-decoration: none; white-space: nowrap; }
a.orden:hover { text-decoration: underline; }
.paginacion { display: flex; align-items: center; justify-content: center; gap: .75rem; margin: 1rem 0; }
.htmx-request #tabla-piezas, #tabla-piezas.htmx-request { opacity: .6; transition: opacity .2s; }

@media (max-width: 640px) {
  .buscar-global { flex: 1 1 auto; min-width: 0; }
  .acciones-masivas { position: static; }
  .acciones-masivas label.en-linea { flex: 1 1 100%; white-space: nowrap; }
  .acciones-masivas select { flex: 1 1 auto; min-width: 0; max-width: none; }
  .acciones-masivas button { flex: 1 1 100%; }
  .responsiva td.casilla { display: inline-block; width: auto; float: right; }
}

/* Filas coloreadas por estado, como en EFFI (documento 24, RF-UX-02): verde completo, amarillo por revisar, rosado anulado. */
tr.fila-ok td, tr.fila-resuelta td { background: var(--ok-suave); }
tr.fila-aviso td { background: var(--aviso-suave); }
tr.fila-anulado td { background: var(--anulado-suave); }
tr.fila-anulado td.codigo { text-decoration: line-through; }

/* Cifras de avance (conteo). */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: .5rem; margin: .75rem 0; }
.cifras > div { background: var(--fondo); border: 1px solid var(--borde); border-radius: 8px; padding: .4rem .6rem; }
.cifras dt { color: var(--texto-suave); font-size: .8rem; }
.cifras dd { margin: 0; font-size: 1.25rem; font-weight: 700; }
.acciones-masivas input[name="nota"] { flex: 1 1 16rem; min-width: 0; }

/* Acta imprimible: casillas de firma y papel sin menú. */
.acta table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.acta th, .acta td { border: 1px solid var(--borde); padding: .3rem .5rem; text-align: left; vertical-align: top; }
.firmas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 3rem 0 1rem; }
.firmas div { border-top: 1px solid var(--texto); padding-top: .3rem; min-height: 4rem; }
.firmas span { font-size: .85rem; color: var(--texto-suave); }
@media print {
  .lateral, .barra-superior, .migas, .velo, .pie, .no-imprimir, .mensajes { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  main { padding: 0; max-width: none; }
  .acta th, .acta td { border-color: #999; }
  .acta tr { break-inside: avoid; }
  .firmas { break-inside: avoid; }
}

/* Ventas: opciones de cliente al buscar. */
.opciones-cliente { list-style: none; padding: 0; margin: .5rem 0; display: grid; gap: .35rem; }
/* Soportes de la orden: una fila por archivo, con su tipo y quién lo subió. */
.lista-soportes { list-style: none; padding: 0; margin: .5rem 0; display: grid; gap: .4rem; }
.lista-soportes li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; padding: .45rem .6rem;
  border: 1px solid var(--borde); border-radius: 8px; background: var(--fondo); }
.lista-soportes form.en-linea { margin-left: auto; }
/* Toda la fila se puede tocar; la elegida queda resaltada. */
.opciones-cliente label { display: flex; align-items: center; gap: .6rem; margin: 0; cursor: pointer;
  background: var(--fondo); border: 1px solid var(--borde); border-radius: 8px; padding: .55rem .7rem; font-weight: 400; }
.opciones-cliente label strong { font-weight: 700; }
.opciones-cliente label:has(input:checked) { border-color: var(--marca); background: var(--marca-suave); }
.opciones-cliente .elegido { display: none; margin-left: auto; font-weight: 700; color: var(--marca); white-space: nowrap; }
.opciones-cliente label:has(input:checked) .elegido { display: inline; }

/* Registro de joyas: el formulario a la izquierda y lo que calcula Napo a la derecha (fijo al desplazarse). */
.registro-columnas { display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.registro-columnas > div > .tarjeta + .tarjeta { margin-top: .75rem; }
@media (min-width: 980px) {
  .registro-columnas { grid-template-columns: minmax(0, 1fr) 340px; }
  .resultado { position: sticky; top: 1rem; }
}
.resultado .nombre-joya { margin: 0 0 .25rem; }
.cifra-media { font-size: 1.25rem; }
fieldset.piedras { border: 1px solid var(--borde); border-radius: 8px; padding: .6rem .8rem; margin: 0; }
fieldset.piedras legend { font-weight: 600; padding: 0 .25rem; }
.piedra { display: grid; grid-template-columns: 9rem 6rem auto; gap: .5rem; align-items: center; padding: .2rem 0; }
.piedra input[name^="puntos_"] { min-height: 38px; }
.aviso-confirmar { border-left: 4px solid var(--aviso); }
.aviso-confirmar label { font-weight: 400; margin-top: .4rem; }


/* ---------------------------------------------------------------- módulo Sistema (documento 27) */
.pestanas { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0 0 1rem; border-bottom: 1px solid var(--borde); }
.pestanas a { padding: .45rem .8rem; border-bottom: 3px solid transparent; color: var(--texto-suave); text-decoration: none; }
.pestanas a:hover { color: var(--texto); }
.pestanas a.activa { border-bottom-color: var(--marca); color: var(--texto); font-weight: 600; }
.semaforo { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; background: var(--borde); vertical-align: middle; }
.semaforo.ok { background: var(--ok); }
.semaforo.aviso { background: var(--aviso); }
.semaforo.error { background: var(--error); }
.semaforo.info { background: var(--azul); }
.no-demuestra { color: var(--texto-suave); font-size: .85rem; font-style: italic; }