/* Piel NODO Metro para TPV Inventario.
   Se carga DESPUÉS de Estilo.css, metro-base.css, metro-tiles.css y metro-componentes.css.
   No toca la lógica: remapea las variables de Estilo.css a los tokens Metro y aplana los componentes de cada pantalla. */

/* ---------- Variables del sistema anterior → tokens Metro ---------- */
:root {
  --bg: var(--m-bg); --bg2: var(--m-surface); --bg3: var(--m-surface-2);
  --accent: var(--m-accent); --accent2: var(--m-ok);
  --text: var(--m-ink); --text2: var(--m-muted);
  --danger: var(--m-danger); --border: var(--m-line);
  --radius: 0px; --touch: 48px;
}
html, body { font-family: var(--m-font); background: var(--m-bg); color: var(--m-ink); }
.screen { background: var(--m-bg); }
.m-ico--i { width: 1.2em; height: 1.2em; vertical-align: -.22em; stroke-width: 2; flex: none; }

/* ---------- Encabezados: título grande, liviano y en minúscula ---------- */
.header { background: transparent; border: 0; padding: 16px 16px 8px; min-height: 72px; align-items: flex-start; gap: 12px; }
.header > div:first-child { min-width: 0; }
.header > div:first-child > div:first-child { font-size: var(--m-fs-title) !important; font-weight: 300 !important; letter-spacing: -.5px; line-height: 1.15; text-transform: lowercase; }
.header .empresa { font-size: var(--m-fs-micro); color: var(--m-muted); text-transform: lowercase; margin-top: 2px; }
.header > div:first-child > div:first-child::after { content: ''; display: block; width: 48px; height: 4px; background: var(--m-accent); margin-top: 4px; }
.header--hub { min-height: 44px; padding: 12px 16px 0; }
.header--hub > div:first-child > div:first-child { font-size: var(--m-fs-micro) !important; font-weight: 400 !important; letter-spacing: 0; color: var(--m-muted); }
.header--hub > div:first-child > div:first-child::after { display: none; }
.contenido { padding: 8px 16px 24px; }

/* ---------- Botones ---------- */
.btn { border-radius: 0; font-size: var(--m-fs-body); font-weight: 400; text-transform: lowercase; letter-spacing: 0; }
.btn-primario { background: var(--accent); color: var(--m-accent-ink); border: 2px solid var(--accent); }
.btn-secundario { background: transparent; color: var(--text); border: 2px solid var(--text); }
.btn-exito { background: var(--m-ok); color: #fff; border: 2px solid var(--m-ok); }
.btn-peligro { background: var(--danger); color: #fff; border: 2px solid var(--danger); }
.btn-icon { width: 44px; height: 44px; background: transparent; border: 2px solid var(--text); border-radius: 0; color: var(--text); }
.btn-icon:active { background: var(--accent); border-color: var(--accent); color: var(--m-accent-ink); }
.btn-icon--accent { border-color: var(--accent); color: var(--accent); }
.btn-icon--danger { border-color: var(--danger); color: var(--danger); }
.btn .m-ico--i, .btn-icon .m-ico--i { width: 1.3em; height: 1.3em; vertical-align: middle; }

/* ---------- Listas: filas planas (como los listados del resto de las apps NODO Metro) ---------- */
.lista-items { gap: 0; }
.item-card { background: transparent; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 12px 0; min-height: 64px; transition: transform var(--m-dur) var(--m-ease); }
.item-card:active { background: var(--bg2); border-color: var(--border); }
.item-card .nombre { font-weight: 400; font-size: var(--m-fs-body); }
.item-card .detalle { font-size: var(--m-fs-micro); }
.item-card.seleccionado { border-left: 4px solid var(--accent); padding-left: 12px; background: color-mix(in srgb, var(--accent) 14%, transparent); }
.footer-acciones { background: var(--bg); border-top: 1px solid var(--border); }

/* ---------- Formularios ---------- */
.form-card { background: transparent; border: 0; padding: 0; }
.campo label { text-transform: lowercase; letter-spacing: 0; font-size: var(--m-fs-micro); }
.campo input, .campo-select, .inp-codigo, .inp-cantidad, .inp-filtro, .buscar-overlay-bar input, .codigo-display {
  background: transparent; border: 2px solid var(--border); border-radius: 0; color: var(--text); }
.campo input:focus, .campo-select:focus, .inp-codigo:focus, .inp-cantidad:focus, .inp-filtro:focus, .buscar-overlay-bar input:focus { border-color: var(--accent); background: var(--bg2); box-shadow: none; }
.inp-cantidad, .inp-codigo { font-weight: 300; }
.radio-lbl { background: transparent; border: 2px solid var(--border); border-radius: 0; color: var(--text); }
.radio-lbl.activo { background: var(--accent); border-color: var(--accent); color: var(--m-accent-ink); }
.ajuste-opcion { background: transparent; border: 2px solid var(--border); border-radius: 0; }
.ajuste-opcion.activo { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.btn-periodo { background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--text2); font-weight: 400; text-transform: lowercase; }
.btn-periodo.activo { background: none; border-bottom-color: var(--accent); color: var(--text); }

/* ---------- Teclado numérico y datos ---------- */
.btn-tecla { background: var(--bg3); border: 0; border-radius: 0; color: var(--text); font-weight: 300; }
.btn-tecla:active { background: var(--bg2); }
.btn-tecla--accion { background: var(--bg3); color: var(--accent); }
.btn-tecla--accion:active { background: var(--accent); color: var(--m-accent-ink); }
.tabla-reporte th { background: var(--bg3); color: var(--text); text-transform: lowercase; letter-spacing: 0; border-bottom: 2px solid var(--accent); }
.tabla-reporte td { border-bottom: 1px solid var(--border); }
.info-fila { border-bottom: 1px solid var(--border); }
.info-valor--grande { font-weight: 300; letter-spacing: -1px; font-size: var(--m-fs-title); color: var(--text); }

/* ---------- Aviso (toast) que baja desde arriba y carga con puntitos ---------- */
@keyframes _toastIn { from { opacity: 0; transform: translateY(-110%); } to { opacity: 1; transform: none; } }
@keyframes _toastShake { 0%, 100% { transform: none; } 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }
#toast { top: calc(env(safe-area-inset-top) + 8px); bottom: auto; left: 8px; right: 8px; transform: none; max-width: none; white-space: normal; text-align: left;
  background: var(--m-ink); color: var(--m-bg); border-radius: 0; border-left: 6px solid var(--accent); padding: 14px 16px; font-size: var(--m-fs-body); animation: _toastIn .2s ease-out; }
#toast.error { background: var(--danger); color: #fff; border-left-color: #fff; animation: _toastIn .15s, _toastShake .4s .15s; }
#toast.exito { background: var(--m-ok); color: #fff; border-left-color: #fff; }
#loading { background: color-mix(in srgb, var(--m-bg) 80%, transparent); }
#loading .m-dots { width: 70%; max-width: 280px; }
.spinner { display: none; }

/* ---------- Inicio, registro y utilidades ---------- */
.screen-centrada .logo-img { width: 96px; height: 96px; border-radius: 0; }
.logo-sub { font-size: var(--m-fs-body); font-weight: 300; text-transform: lowercase; color: var(--m-ink); }
#btn-instalar { display: none !important; }                       /* la instalación va en la lista de opciones */
#debug-btn { border-radius: 0 !important; background: var(--bg3) !important; border: 0 !important; color: var(--text2) !important; opacity: .6; }

/* ---------- Menú: mosaicos ---------- */
.contenido--hub { padding: 0 12px 24px; }
.m-hub-wrap { container-type: inline-size; max-width: 520px; margin: 0 auto; }
.m-tile { color: var(--m-accent-ink); }
.m-tile .m-ico { color: var(--m-accent-ink); }
.m-tile__label { text-transform: lowercase; }
.m-tile__sub { position: absolute; left: 8px; bottom: 26px; right: 8px; font-size: var(--m-fs-micro); opacity: .85; text-align: left; text-transform: lowercase; }
.menu-lock { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; align-items: center; justify-content: center; background: rgba(0,0,0,.35); }
.menu-lock .m-ico { width: 18px; height: 18px; color: #fff; }
#tiles .m-tile[data-id="lote"], #tiles .m-tile[data-id="ajustes"] { background: color-mix(in srgb, var(--m-accent) 84%, #000); }
#tiles .m-tile[data-id="reportes"], #tiles .m-tile[data-id="acento"], #tiles .m-tile[data-id="salir"] { background: color-mix(in srgb, var(--m-accent) 88%, #fff); }
#tiles .m-tile.m-tile--color { background: var(--m-accent); }

/* ---------- Registro de dispositivo ---------- */
.reg-metro { padding: 0 16px 32px; max-width: 520px; width: 100%; margin: 0 auto; overflow-y: auto; }
.reg-titulo { font-size: var(--m-fs-title); font-weight: 300; text-transform: lowercase; letter-spacing: -.5px; margin: 8px 0 16px; }
.reg-titulo::after { content: ''; display: block; width: 48px; height: 4px; background: var(--m-accent); margin-top: 4px; }
.reg-aviso { background: var(--m-accent); color: var(--m-accent-ink); padding: 14px 16px; margin-bottom: 24px; }
.reg-aviso__t { font-size: 20px; font-weight: 300; text-transform: lowercase; margin-bottom: 6px; }
.reg-aviso__m { font-size: var(--m-fs-micro); opacity: .92; margin-bottom: 10px; }
.reg-aviso__c { font-size: var(--m-fs-micro); opacity: .75; text-transform: lowercase; }
.reg-aviso__u { font-family: Consolas, monospace; font-size: 12px; word-break: break-all; margin-top: 2px; }
.btn-instalar-inline { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
html.app-instalada [data-id="instalar"], html.app-instalada .btn-instalar-inline { display: none !important; }

/* ================= Segunda pasada: pantallas de trabajo al estilo Metro ================= */

/* Rótulos de sección: minúscula, liviano, con el acento */
.contenido label[style*="uppercase"], .contenido > div > label[style*="uppercase"] {
  text-transform: lowercase !important; letter-spacing: 0 !important; font-size: 22px !important; font-weight: 300 !important;
  color: var(--text) !important; margin-bottom: 12px !important; }
.contenido label[style*="uppercase"]::before { content: ''; display: inline-block; width: 6px; height: 22px; background: var(--accent); margin-right: 10px; vertical-align: -3px; }

/* Opciones de ajustes: filas planas; la elegida se rellena con el acento */
.ajuste-opcion { align-items: center; padding: 14px 16px; border: 0; background: var(--bg3); gap: 14px; position: relative; transition: background var(--m-dur) var(--m-ease), transform var(--m-dur) var(--m-ease); }
.ajuste-opcion:active { transform: scale(.98); }
.ajuste-opcion input[type="radio"], .ajuste-opcion input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; width: 24px; height: 24px; margin: 0; border: 2px solid var(--text2); border-radius: 0; background: transparent; flex: none; display: grid; place-items: center; }
.ajuste-opcion input:checked { background: var(--m-accent-ink); border-color: var(--m-accent-ink); }
.ajuste-opcion input:checked::after { content: ''; width: 10px; height: 10px; background: var(--accent); }
.ajuste-opcion:has(input:checked), .ajuste-opcion.activo { background: var(--accent); color: var(--m-accent-ink); border: 0; }
.ajuste-opcion:has(input:checked) div, .ajuste-opcion.activo div { color: var(--m-accent-ink) !important; }
.ajuste-opcion div div:first-child { font-weight: 400 !important; font-size: 18px; }
.ajuste-opcion div div:last-child:not(:first-child) { opacity: .8; }

/* Conteo: producto como bloque de color, cantidad grande y liviana, teclado en mosaicos */
#inv-producto-info, .producto-info, .info-producto { background: var(--bg3); border: 0; border-left: 6px solid var(--accent); border-radius: 0; }
.codigo-display { border-width: 0 0 4px 0; background: var(--bg3); }
.inp-cantidad, .cantidad-display { font-size: 56px; font-weight: 200; letter-spacing: -2px; border: 0; background: transparent; border-bottom: 2px solid var(--border); }
.btn-tecla { font-size: 28px; }
.btn-primario.btn-grande, .footer-acciones .btn-primario { min-height: 56px; font-size: 20px; font-weight: 300; }
.footer-acciones { border-top: 0; display: flex; gap: 6px; padding: 6px 12px 12px; }
.footer-acciones .btn { flex: 1; border: 0; background: var(--bg3); color: var(--text); min-height: 52px; }
.footer-acciones .btn:active { background: var(--accent); color: var(--m-accent-ink); }

/* Listas de reportes y depósitos: títulos livianos y grandes, flecha fina */
.lista-items .item-card .nombre, .reporte-opcion .nombre { font-size: 22px; font-weight: 300; }
.item-card:active, .ajuste-opcion:active { transform: translateX(6px); }

/* Chips / contadores */
.header .badge, .badge-modo, #lote-contador { border-radius: 0 !important; }
.m-tile.s1[data-id="instalar"] { background: color-mix(in srgb, var(--m-accent) 84%, #000); }
#inv-producto-desc, #lote-producto-desc { font-weight: 300 !important; font-size: 22px !important; }
#inv-producto-desc, #lote-producto-desc { }
#inv-producto-desc { border-left: 6px solid var(--accent); padding-left: 12px; }
#lote-producto-desc { border-left: 6px solid var(--accent); padding-left: 12px; }
[id$="-cantidad-display"] { background: transparent !important; border: 0 !important; border-bottom: 2px solid var(--border) !important; font-weight: 200 !important; font-size: 64px !important; letter-spacing: -2px; }