/* ============================================================
   LAT Suite Movil - hoja de estilo
   Los mismos tokens de la casa (ClinicSuite / LatSuiteHotel) con un
   armazon pensado para una pantalla de 5 pulgadas y un pulgar:
   una columna, tarjetas, barra inferior, objetivos de 44 px.
   ============================================================ */

:root {
  --brand-50: #eef2ff; --brand-100: #dbe3ff; --brand-300: #8fa8ff;
  --brand-400: #5b7cff; --brand-500: #2b5cff; --brand-600: #1237c9; --brand-700: #0a2a8a;
  --ink-900: #0c1a3a; --ink-800: #10234d; --ink-700: #16294d;
  /* los mismos colores en componentes, para usarlos con transparencia:
     rgb(var(--brand-rgb) / .14) es el color de la marca a poca opacidad */
  --brand-rgb: 18 55 201; --brand-400-rgb: 91 124 255;
  --surface: #f4f5fa; --card: #ffffff; --line: #e6e8f0;
  --text-1: #1c2030; --text-2: #5a6072; --text-3: #8b91a5;
  --st-green: #16a34a; --st-green-bg: #ecfdf3; --st-green-line: #bbe9cd;
  --st-blue: #2563eb;  --st-blue-bg: #eff4ff;  --st-blue-line: #c4d7fc;
  --st-orange: #ea700b;--st-orange-bg: #fff5ec;--st-orange-line: #fcd7b2;
  --st-red: #dc2626;   --st-red-bg: #fef1f1;   --st-red-line: #f6c6c6;
  --st-gray: #64748b;  --st-gray-bg: #f1f4f8;  --st-gray-line: #d5dbe5;
  --st-purple: #8b5cf6;--st-purple-bg: #f6f2ff;--st-purple-line: #ddd0fb;
  --radius: 14px; --radius-sm: 10px;
  --shadow-card: 0 1px 2px rgb(18 20 31 / .04), 0 6px 20px -6px rgb(18 20 31 / .07);
  --shadow-pop: 0 12px 40px -8px rgb(18 20 31 / .25);
  --top-h: 56px; --nav-h: 62px;
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { height: 100%; }
body {
  margin: 0; min-height: 100%;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--surface); color: var(--text-1);
  font-size: 15px; line-height: 1.4;
  -webkit-font-smoothing: antialiased; overscroll-behavior-y: contain;
}
h1, h2, h3, p { margin: 0; }
h1:focus { outline: none; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
input, select, textarea { font-family: inherit; }
.m-num { font-variant-numeric: tabular-nums; }
.t-red { color: var(--st-red); } .t-green { color: var(--st-green); } .t-gray { color: var(--text-3); }
.t-orange { color: var(--st-orange); } .t-brand { color: var(--brand-600); }
.m-derecha { text-align: right; } .m-centro { text-align: center; }
.m-oculto { display: none !important; }
.m-mt { margin-top: 14px; } .m-mb { margin-bottom: 14px; }

/* ============ El armazon ============ */
.m-shell { min-height: 100dvh; display: flex; flex-direction: column; }
.m-top {
  position: sticky; top: 0; z-index: 30;
  height: calc(var(--top-h) + var(--safe-t)); padding-top: var(--safe-t);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-left: 14px; padding-right: 8px;
  background: linear-gradient(135deg, var(--ink-900), var(--ink-800)); color: #fff;
  box-shadow: 0 2px 12px rgb(12 26 58 / .25);
}
.m-top-marca { display: flex; align-items: center; gap: 10px; min-width: 0; }
.m-top-textos { display: flex; flex-direction: column; min-width: 0; }
.m-top-suc { font-weight: 800; font-size: 14.5px; letter-spacing: .2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-top-usr { font-size: 11.5px; color: #b8c2dc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-top-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: #fff; }
.m-top-btn:active { background: rgb(255 255 255 / .12); }
.m-logo {
  width: 36px; height: 36px; flex: none; border-radius: 10px;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 14px; letter-spacing: -.5px;
  box-shadow: 0 6px 16px -4px rgb(43 92 255 / .55);
}
.m-logo-grande { width: 64px; height: 64px; border-radius: 18px; font-size: 24px; margin: 0 auto 14px; }
.m-logo-img { object-fit: cover; background: #fff; padding: 0; display: block; }
.m-logo-grande.m-logo-img { width: 88px; height: 88px; border-radius: 22px; object-fit: contain; }

.m-content { flex: 1; padding: 14px 14px calc(var(--nav-h) + var(--safe-b) + 18px); max-width: 640px; width: 100%; margin: 0 auto; }

.m-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  height: calc(var(--nav-h) + var(--safe-b)); padding-bottom: var(--safe-b);
  display: flex; justify-content: space-around; align-items: stretch;
  background: var(--card); border-top: 1px solid var(--line);
  box-shadow: 0 -6px 20px -10px rgb(18 20 31 / .2);
}
.m-nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--text-3); font-size: 11px; font-weight: 600; min-width: 0;
}
.m-nav-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.m-nav-item.active { color: var(--brand-600); }
.m-nav-item.active .icon { filter: drop-shadow(0 4px 8px rgb(43 92 255 / .35)); }

/* ============ Titulos y secciones ============ */
.m-titulo { font-size: 22px; font-weight: 800; letter-spacing: -.3px; }
.m-sub { color: var(--text-3); font-size: 12.5px; margin-top: 2px; }
.m-cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.m-seccion { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 8px; }
.m-seccion h2 { font-size: 12.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--text-2); }
.m-seccion a { font-size: 12.5px; font-weight: 700; color: var(--brand-600); }
.m-volver { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); font-size: 13px; font-weight: 600; margin-bottom: 8px; min-height: 36px; }

/* ============ Tarjetas ============ */
.m-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.m-card-pad { padding: 14px 16px; }
.m-card + .m-card { margin-top: 10px; }
.m-card-titulo { font-size: 14.5px; font-weight: 700; margin-bottom: 6px; }
.m-card-nota { color: var(--text-3); font-size: 12px; }

.m-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.m-kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 12px 12px; min-width: 0; }
.m-kpi-ancho { grid-column: span 2; }
.m-kpi-rotulo { font-size: 11px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-kpi-valor { font-size: 20px; font-weight: 800; letter-spacing: -.6px; margin-top: 4px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-kpi-apoyo { font-size: 12px; color: var(--text-2); margin-top: 3px; }
.m-kpi-grande .m-kpi-valor { font-size: 30px; }

/* ============ Listas y filas ============ */
.m-lista { display: flex; flex-direction: column; }
.m-lista .m-fila + .m-fila { border-top: 1px solid var(--line); }
.m-fila {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 56px; color: inherit;
}
a.m-fila:active, button.m-fila:active { background: var(--brand-50); }
button.m-fila { width: 100%; background: none; border: none; text-align: left; cursor: pointer; font-size: inherit; }
.m-fila-icono { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--brand-50); color: var(--brand-600); }
.m-fila-icono.verde { background: var(--st-green-bg); color: var(--st-green); }
.m-fila-icono.rojo { background: var(--st-red-bg); color: var(--st-red); }
.m-fila-icono.naranja { background: var(--st-orange-bg); color: var(--st-orange); }
.m-fila-icono.gris { background: var(--st-gray-bg); color: var(--st-gray); }
.m-fila-icono.morado { background: var(--st-purple-bg); color: var(--st-purple); }
.m-fila-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.m-fila-titulo { font-weight: 600; font-size: 14.5px; line-height: 1.25; }
.m-fila-titulo.recortar { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-fila-sub { font-size: 12.5px; color: var(--text-2); }
.m-fila-sub b { color: var(--text-1); font-weight: 600; }
.m-fila-derecha { flex: none; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.m-fila-valor { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.m-fila-chevron { color: var(--text-3); flex: none; }

/* ============ Chips y sellos ============ */
.m-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: .3px; padding: 3px 9px; border-radius: 7px; text-transform: uppercase; white-space: nowrap; }
.m-chip-verde { background: var(--st-green-bg); color: var(--st-green); }
.m-chip-azul { background: var(--st-blue-bg); color: var(--st-blue); }
.m-chip-naranja { background: var(--st-orange-bg); color: var(--st-orange); }
.m-chip-rojo { background: var(--st-red-bg); color: var(--st-red); }
.m-chip-gris { background: var(--st-gray-bg); color: var(--st-gray); }
.m-chip-morado { background: var(--st-purple-bg); color: var(--st-purple); }
/* migracion 434b: los avisos del cliente en la venta (deuda, anticipos, bloqueo), como el mostrador y la web */
.mv-avisos { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 12px; }
.mv-avisos .m-chip { text-transform: none; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.m-sello { font-size: 11.5px; color: var(--text-3); }
.m-tachado { text-decoration: line-through; color: var(--text-3); }

/* ============ Botones ============ */
.m-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 12px;
  font-weight: 700; font-size: 14.5px; border: 1px solid transparent; cursor: pointer;
  transition: filter .15s, background .15s; white-space: nowrap; text-decoration: none;
}
.m-btn:disabled { opacity: .55; cursor: default; }
.m-btn-primario { background: linear-gradient(135deg, var(--brand-500), var(--brand-600)); color: #fff; box-shadow: 0 8px 20px -8px rgb(43 92 255 / .6); }
.m-btn-primario:active { filter: brightness(.95); }
.m-btn-fantasma { background: var(--card); color: var(--text-2); border-color: var(--line); }
.m-btn-fantasma:active { border-color: var(--brand-300); color: var(--brand-600); }
.m-btn-peligro { background: var(--st-red-bg); color: var(--st-red); border-color: var(--st-red-line); }
.m-btn-exito { background: var(--st-green-bg); color: var(--st-green); border-color: var(--st-green-line); }
.m-btn-ancho { width: 100%; }
.m-btn-chico { min-height: 36px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.m-btn-icono { width: 44px; min-height: 44px; padding: 0; border-radius: 12px; }
/* si los botones no caben bajan de linea: con nowrap y sin wrap la ficha de
   venta (tres botones) desplazaba la pagina entera de lado */
.m-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.m-acciones .m-btn { flex: 1; }
.m-fab {
  position: fixed; right: 16px; bottom: calc(var(--nav-h) + var(--safe-b) + 16px); z-index: 25;
  width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-600)); color: #fff;
  box-shadow: 0 12px 28px -8px rgb(43 92 255 / .7); border: none;
}

/* ============ Campos ============ */
.m-campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.m-campo > label { font-size: 12px; font-weight: 700; color: var(--text-2); }
.m-input, .m-select, .m-textarea {
  width: 100%; min-height: 46px; border: 1px solid var(--line); border-radius: 12px; background: var(--card);
  padding: 0 14px; font-size: 16px; /* 16px: asi iOS no hace zoom al enfocar */
  color: var(--text-1); outline: none; transition: border-color .15s, box-shadow .15s;
}
.m-textarea { padding: 10px 14px; min-height: 80px; resize: vertical; }
/* el halo del foco lleva el color de la marca; antes era un azul fijo que
   no se movia aunque el negocio cambiara sus colores */
.m-input:focus, .m-select:focus, .m-textarea:focus { border-color: var(--brand-400); box-shadow: 0 0 0 3px rgb(var(--brand-400-rgb) / .16); }
.m-input-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.m-buscador { position: relative; margin-bottom: 12px; }
.m-buscador .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.m-buscador .m-input { padding-left: 42px; padding-right: 52px; }
.m-buscador .m-btn-icono { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); width: 40px; min-height: 40px; background: var(--brand-50); color: var(--brand-600); border: none; }
.m-fila-campos { display: flex; gap: 10px; }
.m-fila-campos > * { flex: 1; min-width: 0; }
.m-radio { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); margin-bottom: 8px; cursor: pointer; }
.m-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.m-radio-marca { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); flex: none; position: relative; }
.m-radio input:checked + .m-radio-marca { border-color: var(--brand-600); }
.m-radio input:checked + .m-radio-marca::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--brand-600); }
.m-radio span b { display: block; font-size: 14.5px; }
.m-radio span small { color: var(--text-3); font-size: 12px; }
.m-contador { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--card); overflow: hidden; }
.m-contador button { width: 42px; height: 42px; border: none; background: none; color: var(--brand-600); display: grid; place-items: center; cursor: pointer; }
.m-contador input { width: 56px; height: 42px; border: none; border-left: 1px solid var(--line); border-right: 1px solid var(--line); text-align: center; font-size: 17px; font-weight: 800; outline: none; }

/* ============ Pestanas ============ */
.m-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 10px; scrollbar-width: none; }
.m-tabs::-webkit-scrollbar { display: none; }
.m-tabs button, .m-tabs a { flex: none; border: 1px solid var(--line); background: var(--card); color: var(--text-2); border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.m-tabs .activa { background: var(--ink-900); color: #fff; border-color: var(--ink-900); }

/* ============ Avisos y estados ============ */
.m-aviso { display: flex; align-items: flex-start; gap: 9px; border-radius: 12px; padding: 11px 14px; font-size: 13.5px; font-weight: 600; margin-bottom: 12px; border: 1px solid; }
.m-aviso .icon { flex: none; margin-top: 1px; }
.m-aviso-error { background: var(--st-red-bg); color: var(--st-red); border-color: var(--st-red-line); }
.m-aviso-aviso { background: var(--st-orange-bg); color: var(--st-orange); border-color: var(--st-orange-line); }
.m-aviso-ok { background: var(--st-green-bg); color: var(--st-green); border-color: var(--st-green-line); }
.m-aviso-info { background: var(--st-blue-bg); color: var(--st-blue); border-color: var(--st-blue-line); }
.m-vacio { text-align: center; color: var(--text-3); padding: 40px 20px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.m-vacio b { color: var(--text-2); font-size: 15px; }
.m-vacio span { font-size: 13px; max-width: 320px; }
.m-vacio em { font-style: normal; font-weight: 700; }
.m-cargando { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--text-3); padding: 30px; font-size: 13.5px; }
.m-spinner { width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--brand-600); animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.m-sinpermiso { padding: 30px 16px; }

/* ============ Barras de proporcion y graficos sencillos ============ */
.m-barra { height: 6px; border-radius: 4px; background: var(--st-gray-bg); overflow: hidden; margin-top: 6px; }
.m-barra > span { display: block; height: 100%; background: linear-gradient(90deg, var(--brand-400), var(--brand-600)); border-radius: 4px; }
.m-barra.verde > span { background: var(--st-green); } .m-barra.roja > span { background: var(--st-red); } .m-barra.naranja > span { background: var(--st-orange); }
.m-columnas { display: flex; align-items: flex-end; gap: 4px; height: 120px; padding: 6px 2px 0; }
.m-columna { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.m-columna-barra { width: 100%; max-width: 26px; background: linear-gradient(180deg, var(--brand-400), var(--brand-600)); border-radius: 6px 6px 2px 2px; min-height: 2px; }
.m-columna-barra.hoy { background: linear-gradient(180deg, var(--st-orange), #c85d05); }
.m-columna-rotulo { font-size: 10px; color: var(--text-3); margin-top: 5px; white-space: nowrap; }
.m-hbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 8px 0; }
.m-hbar + .m-hbar { border-top: 1px solid var(--line); }
.m-hbar-rotulo { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-hbar-valor { font-weight: 800; font-size: 13.5px; font-variant-numeric: tabular-nums; text-align: right; }
.m-hbar .m-barra { grid-column: 1 / -1; margin-top: 2px; }
.m-cascada { display: flex; flex-direction: column; }
.m-cascada-fila { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.m-cascada-fila > span:first-child { min-width: 0; }
.m-cascada-fila > span:first-child small { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.m-cascada-fila .m-num { white-space: nowrap; flex: none; }
.m-cascada-fila.total { border-bottom: none; font-weight: 800; font-size: 17px; }
.m-cascada-fila.resta { color: var(--text-2); }
.m-cascada-fila.resta .m-num::before { content: "− "; }
.m-pares { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.m-par { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.m-par small { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .4px; font-weight: 700; }
.m-par b { font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============ Tablas (solo las que de verdad lo necesitan) ============ */
.m-tabla-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.m-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.m-tabla th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-3); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.m-tabla td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.m-tabla td.num, .m-tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ============ Hoja inferior (modal) ============ */
.m-hoja-fondo { position: fixed; inset: 0; background: rgb(12 26 58 / .45); z-index: 40; animation: fade .15s ease both; }
.m-hoja { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; background: var(--card); border-radius: 20px 20px 0 0; box-shadow: var(--shadow-pop); padding: 10px 16px calc(16px + var(--safe-b)); max-height: 88dvh; overflow-y: auto; animation: subir .2s ease both; max-width: 640px; margin: 0 auto; }
.m-hoja-asa { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 0 auto 12px; }
.m-hoja h2 { font-size: 17px; font-weight: 800; margin-bottom: 8px; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes subir { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.animate-fade-up { animation: fadeUp .35s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ============ Escaner ============ */
.m-escaner { position: relative; border-radius: var(--radius); overflow: hidden; background: #000; aspect-ratio: 4 / 3; margin-bottom: 12px; }
.m-escaner video { width: 100%; height: 100%; object-fit: cover; display: block; }
.m-escaner-marco { position: absolute; inset: 18% 12%; border: 2px solid rgb(255 255 255 / .85); border-radius: 12px; box-shadow: 0 0 0 999px rgb(0 0 0 / .35); }
.m-escaner-linea { position: absolute; left: 12%; right: 12%; top: 50%; height: 2px; background: var(--st-red); opacity: .8; animation: barrer 1.6s ease-in-out infinite; }
@keyframes barrer { 0%, 100% { transform: translateY(-40px); } 50% { transform: translateY(40px); } }

/* ============ Galeria de fotos del producto ============ */
.m-galeria { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
.m-galeria a { flex: none; scroll-snap-align: start; }
.m-galeria img { height: 200px; max-width: 86vw; border-radius: 16px; background: #fff; object-fit: contain; box-shadow: 0 6px 18px -8px rgb(18 20 31 / .25); display: block; }

/* ============ Ingreso ============ */
.m-ingreso-fondo {
  min-height: 100dvh; display: grid; place-items: center; padding: 22px 16px;
  background:
    radial-gradient(700px 420px at 12% 8%, rgb(43 92 255 / .35), transparent 60%),
    radial-gradient(640px 420px at 92% 92%, rgb(43 92 255 / .22), transparent 55%),
    linear-gradient(160deg, var(--ink-800), var(--ink-900));
}
/* La tarjeta lleva un BORDE RESALTANTE del color de la marca -un hilo del
   color y un halo del mismo a poca opacidad-: sobre la foto del fondo, un
   borde asi la hace ver encendida en vez de pegada. */
.m-ingreso {
  width: 100%; max-width: 400px; background: var(--card); border-radius: 22px; overflow: hidden;
  box-shadow:
    0 0 0 1px rgb(var(--brand-rgb) / .5),
    0 0 0 6px rgb(var(--brand-rgb) / .12),
    var(--shadow-pop);
}
/* el boton de entrar lleva su propia luz, del color con el que esta pintado */
.m-ingreso .m-btn-primario {
  box-shadow: 0 6px 20px -4px rgb(var(--brand-rgb) / .55);
  transition: transform .12s ease, box-shadow .12s ease;
}
.m-ingreso .m-btn-primario:active { transform: scale(.98); box-shadow: 0 3px 12px -4px rgb(var(--brand-rgb) / .55); }
/* la banda de arriba lleva el color configurado (Fondo1 -> Fondo2), como la barra del escritorio */
.m-ingreso-marca { text-align: center; padding: 26px 22px 20px; background: linear-gradient(135deg, var(--ink-900), var(--ink-800)); color: #fff; }
.m-ingreso-marca h1 { font-size: 21px; font-weight: 800; letter-spacing: -.3px; color: #fff; }
.m-ingreso-marca p { color: rgb(255 255 255 / .78); font-size: 12.5px; margin-top: 4px; }
.m-ingreso-marca .m-logo-grande { box-shadow: 0 10px 24px -10px rgb(0 0 0 / .6); }
.m-ingreso-cuerpo { padding: 22px 26px 22px; }
.m-ingreso-pie { text-align: center; color: var(--text-3); font-size: 11.5px; margin-top: 20px; }

/* ============ La portada del ingreso ============
   El nombre del negocio se arma solo y deja paso a la tarjeta en 1.35 s. No
   pide un toque ni espera a nada: en el mostrador se entra muchas veces al
   dia y un paso de mas se cobra todas. Como no atrapa el dedo ni el teclado,
   el que ya sabe su usuario puede escribir con el telon todavia puesto.

   EL CONTENIDO SE VA ANTES QUE EL FONDO. Si se desvanece todo junto, el
   nombre en letras grandes queda flotando encima del formulario medio segundo
   y parece un error de pintado.

   Los colores son los configurados: el mismo degradado de la barra
   (Fondo1 -> Fondo2) y el halo y la linea en el tono claro de la marca.

   Si el ingreso vuelve con un error, el telon no se pinta: primero se lee lo
   que paso. Eso lo decide LoginLayout. */
/* EL FONDO ES HONDO, NO OSCURO: se oscurecen SOLO LOS BORDES. El centro se
   queda con el color del negocio a su brillo y las esquinas caen; esa
   diferencia es la que da hondura, como el vineteado de una foto. Una capa
   negra encima de todo apaga la pantalla entera. */
.m-portada {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(70% 48% at 50% 44%, rgb(var(--brand-400-rgb) / .55) 0%, rgb(var(--brand-400-rgb) / 0) 72%),
    radial-gradient(85% 62% at 50% 44%, rgb(0 0 0 / 0) 32%, rgb(0 0 0 / .5) 100%),
    linear-gradient(160deg, var(--ink-800), var(--ink-900));
  overflow: hidden; pointer-events: none;
  animation: mPortadaSalir .35s 1s ease forwards;
}
.m-portada-centro {
  position: relative; display: flex; flex-direction: column; align-items: center;
  animation: mPortadaApaga .2s .95s ease forwards;
}
/* dos luces: la de atras respira, el nucleo se mueve. Con una sola el brillo
   se ve plano y pegado. */
.m-portada-brillo {
  position: absolute; width: 480px; height: 480px; max-width: 130vw; max-height: 130vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--brand-400-rgb) / .55) 0%, rgb(var(--brand-400-rgb) / 0) 68%);
  filter: blur(6px);
  animation: mPortadaHalo 3.2s ease-in-out infinite;
}
.m-portada-brillo::after {
  content: ""; position: absolute; inset: 28%;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 255 255 / .3) 0%, rgb(255 255 255 / 0) 65%);
  animation: mPortadaNucleo 4.6s ease-in-out infinite;
}
.m-portada-logo {
  max-height: 68px; max-width: 180px; object-fit: contain;
  background: #fff; border-radius: 16px; padding: 8px; margin-bottom: 16px;
  /* el mismo borde resaltante de la tarjeta, para que el logo no se vea
     recortado y pegado sobre el fondo */
  box-shadow:
    0 0 0 1px rgb(255 255 255 / .55),
    0 0 0 7px rgb(255 255 255 / .1),
    0 10px 24px -10px rgb(0 0 0 / .6);
  animation: mPortadaSube .6s ease both;
}
.m-portada-nombre {
  margin: 0; text-align: center; color: #fff;
  font-size: clamp(24px, 8vw, 34px); font-weight: 800; line-height: 1.05;
  animation: mPortadaNombre .75s ease both;
}
.m-portada-linea {
  width: 0; height: 2px; margin: 14px 0 12px;
  background: linear-gradient(90deg, transparent, var(--brand-400), transparent);
  animation: mPortadaLinea .8s .35s ease forwards;
}
.m-portada-tag {
  margin: 0; color: rgb(255 255 255 / .82);
  font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase;
  opacity: 0; animation: mPortadaSube .6s .5s ease forwards;
}
.m-portada-barra {
  width: 150px; height: 3px; margin-top: 22px;
  border-radius: 4px; background: rgb(255 255 255 / .18); overflow: hidden;
  opacity: 0; animation: mPortadaSube .6s .6s ease forwards;
}
.m-portada-barra i {
  display: block; width: 0; height: 100%; border-radius: 4px;
  background: var(--brand-400);
  /* la barra brilla con su propio color mientras se llena */
  box-shadow: 0 0 12px 1px var(--brand-400);
  animation: mPortadaCarga .8s .1s linear forwards;
}
.m-portada ~ .m-ingreso { animation: mPortadaCaja .4s 1.05s ease both; }

@keyframes mPortadaSalir { to { opacity: 0; visibility: hidden; } }
@keyframes mPortadaApaga { to { opacity: 0; transform: translateY(-6px); } }
@keyframes mPortadaHalo {
  0%, 100% { opacity: .45; transform: scale(1) translate(0, 0); }
  50%      { opacity: 1;   transform: scale(1.14) translate(0, -2%); }
}
@keyframes mPortadaNucleo {
  0%, 100% { opacity: .5;  transform: translate(-6%, 4%) scale(.95); }
  50%      { opacity: .95; transform: translate(6%, -4%) scale(1.08); }
}
@keyframes mPortadaNombre {
  from { opacity: 0; letter-spacing: .5em; transform: translateY(6px); }
  to   { opacity: 1; letter-spacing: .02em; transform: translateY(0); }
}
@keyframes mPortadaLinea { to { width: 140px; } }
@keyframes mPortadaSube { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mPortadaCarga { to { width: 100%; } }
@keyframes mPortadaCaja { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .m-portada { display: none; }
  .m-portada ~ .m-ingreso { animation: none; }
}
.m-enlace-pie { display: block; text-align: center; color: var(--brand-600); font-size: 13px; font-weight: 700; margin-top: 14px; }
.m-lista-radio { margin-bottom: 14px; }

/* ============ Inicio: mi dia y accesos ============
   Lo que se hace con el pulgar (vender, cotizar, cobrar) en una cuadricula
   de cuatro, y arriba lo de la persona: su asistencia y su caja. */
.m-midia-accion { padding: 0 14px 14px; }
.m-accesos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.m-acceso {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  min-height: 86px; padding: 12px 4px 10px; text-align: center;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card);
  font-size: 12px; font-weight: 700; color: var(--text-2); line-height: 1.15;
}
.m-acceso:active { background: var(--brand-50); border-color: var(--brand-300); }
.m-acceso .m-fila-icono { width: 42px; height: 42px; border-radius: 13px; }
.m-acceso > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============ Mi asistencia ============ */
.m-asis-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.m-asis-horario { font-size: 24px; font-weight: 800; letter-spacing: -.5px; margin-top: 3px; font-variant-numeric: tabular-nums; }
.m-asis-marcas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.m-asis-marcas > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.m-asis-marcas b { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ============ Cobrar lo que falta de una venta ============ */
.m-cobro { border-color: var(--st-orange-line); }
.m-cobro-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.m-cobro-saldo { font-size: 28px; font-weight: 800; letter-spacing: -.7px; color: var(--st-orange); margin-top: 2px; font-variant-numeric: tabular-nums; }
.m-cobro-form { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.m-cobro-vuelto {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; margin-bottom: 10px; border-radius: 12px; font-weight: 700;
  background: var(--st-green-bg); color: var(--st-green); border: 1px solid var(--st-green-line);
}
.m-cobro-vuelto b { font-size: 19px; font-variant-numeric: tabular-nums; }
.m-elegir { display: flex; flex-wrap: wrap; gap: 8px; }

/* migracion 425: el % de descuento de una linea de la venta (angosto, al lado del contador) */
.m-desc { width: 84px; min-height: 42px; padding: 0 10px; font-size: 15px; }
.m-desc-caja { display: inline-flex; align-items: center; gap: 4px; }
.m-desc-caja > span { color: var(--text-3); font-weight: 800; }

/* ============ Reconexion de Blazor ============ */
#components-reconnect-modal { display: none; position: fixed; inset: 0; z-index: 100; background: rgb(12 26 58 / .55); align-items: flex-end; justify-content: center; padding: 16px; }
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected { display: flex; }
.m-reconectar-caja { background: var(--card); border-radius: 16px; padding: 14px 16px; display: flex; gap: 12px; align-items: center; width: 100%; max-width: 420px; box-shadow: var(--shadow-pop); margin-bottom: calc(var(--nav-h) + var(--safe-b)); }
.m-reconectar-icono { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--st-orange); animation: girar .9s linear infinite; flex: none; }
.m-reconectar-txt { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.m-reconectar-txt b { font-size: 14px; }
.m-reconectar-txt a { color: var(--brand-600); font-weight: 700; text-decoration: underline; }
.m-rc-fallo, .m-rc-rechazo { display: none; }
.components-reconnect-failed .m-rc-intentando, .components-reconnect-rejected .m-rc-intentando { display: none; }
.components-reconnect-failed .m-rc-fallo { display: inline; }
.components-reconnect-rejected .m-rc-rechazo { display: inline; }
.components-reconnect-failed .m-reconectar-icono, .components-reconnect-rejected .m-reconectar-icono { animation: none; border-color: var(--st-red); }

/* ============ Pantallas anchas (tableta / escritorio): la misma app, centrada ============ */
@media (min-width: 720px) {
  .m-content { padding-left: 20px; padding-right: 20px; }
  .m-kpis { grid-template-columns: repeat(3, 1fr); }
  .m-kpi-ancho { grid-column: span 3; }
}

/* migraciones 291 y 426: de donde salio el precio de la linea (escalera, por mayor u oferta) */
.m-precio-origen { color: #c4620f; font-weight: 600; }

/* migracion 439: a cuantos metros de la sucursal se marco, la ficha del cliente con su punto exacto y
   "Cerca de mi" en la cobranza */
.m-asis-lugar { font-size: 11.5px; font-weight: 700; color: #15803d; }
.m-asis-lugar.lejos { color: #c2410c; }
.m-ubicacion { display: flex; flex-direction: column; gap: 8px; }
.m-ubicacion-cab { display: flex; align-items: center; gap: 8px; }
.m-ubicacion-cab b { font-size: 14px; }
.m-distancia { font-size: 12px; font-weight: 700; color: var(--brand-600); white-space: nowrap; }