/*
   TIPOGRAFIA -- copia local de Nunito (antes venia de fonts.googleapis.com).
   Se auto-hospeda para que la app se vea igual sin internet.
   Nunito es una fuente VARIABLE: un mismo archivo cubre los pesos 400 a 900,
   por eso va un solo @font-face por subconjunto con el rango de peso, en vez
   de un archivo por peso.
   latin cubre el espanol (acentos, n, signos de apertura); latin-ext queda
   para nombres de laboratorios/productos con caracteres raros.
 */
@font-face{
  font-family:'Nunito';
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url('../assets/fonts/nunito-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Nunito';
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url('../assets/fonts/nunito-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/*
   DESIGN TOKENS --- idnticos a la demo v4
 */
:root{
  /* Paleta FarmaCloud (azul/celeste "nube"), reemplaza el teal/verde oscuro
     de Mi Farmacia. --teal-mid usa el mismo celeste que el icono de la PWA
     (scripts/generar_iconos.py, NUBE) a proposito, para que el acento del
     icono y el de la propia interfaz sean el mismo color. Los nombres de
     variable (--teal, --dark...) quedan igual para no reescribir cientos de
     reglas que ya las usan -son tokens, cambia el valor, no el nombre. */
  --teal:#2F80ED;--teal-dark:#1B5FA8;--teal-light:#EAF4FC;--teal-mid:#9FDAF5;
  --orange:#F5A623;--orange-dark:#D4891A;--orange-light:#FEF3E2;
  --dark:#0B2E52;--dark2:#123A63;
  /* --muted paso de #7F8C8D a #667475: el gris viejo daba 3.4:1 de contraste
     sobre blanco, por debajo del minimo legible (4.5:1), y se usa en textos
     de 10-11px -- las "letras chicas" del sistema (subtitulos, rotulos de
     tarjeta, presentacion del producto) se veian lavadas, sobre todo en la
     pantalla de un telefono a plena luz. El nuevo da 4.9:1 y es el mismo
     tono, solo mas oscuro.
     --text-muted es un ALIAS: ocho lugares del codigo lo escriben asi (una
     variable que nunca existio en :root). Una variable indefinida no cae a
     ningun valor por defecto -- la declaracion de color queda invalida y el
     texto HEREDA el color del padre, que en las tarjetas de dia del horario
     semanal terminaba casi del mismo color que su fondo. */
  --text:#2C3E50;--muted:#667475;--text-muted:#667475;
  --bg:#F4F9FD;--white:#FFFFFF;--border:#D6E8F7;
  --red:#E74C3C;--green:#27AE60;
  --font:'Nunito',sans-serif;
  --radius:12px;--radius-sm:8px;
  --shadow:0 2px 12px rgba(47,128,237,.1);
  --shadow-md:0 4px 24px rgba(11,46,82,.14);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;font-size:14px;-webkit-font-smoothing:antialiased}

/*  Scrollbar  */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--teal-mid);border-radius:4px}

/*  Animaciones globales  */
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:translateX(0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes scaleIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
@keyframes shimmer{0%{background-position:-200px 0}100%{background-position:200px 0}}

.fade-in{animation:fadeIn .3s ease both}
.slide-in{animation:slideIn .25s ease both}

/* 
   LAYOUT
 */
.app{display:flex;height:100vh;overflow:hidden}
#loading-screen{position:fixed;inset:0;background:var(--dark);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:999;transition:opacity .4s}
#loading-screen.hide{opacity:0;pointer-events:none}
.loading-logo{font-size:32px;font-weight:900;color:#fff;margin-bottom:16px}
.loading-logo span{color:var(--orange)}
.loading-bar{width:200px;height:3px;background:rgba(255,255,255,.15);border-radius:2px;overflow:hidden}
.loading-bar-fill{height:100%;background:var(--teal);border-radius:2px;animation:shimmer 1.2s infinite;background-size:400px;background-image:linear-gradient(90deg,var(--teal) 0%,#bfe3fb 50%,var(--teal) 100%)}

/* 
   SIDEBAR
 */
.sidebar{width:224px;background:var(--dark);display:flex;flex-direction:column;flex-shrink:0;transition:width .3s ease}
.logo-area{padding:18px 16px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.logo-text{color:#fff;font-size:21px;font-weight:900;letter-spacing:-.5px;line-height:1}
.logo-text span{color:var(--orange)}
.logo-sub{color:rgba(255,255,255,.58);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;margin-top:3px}

.suc-switch{margin:10px 12px 4px;border:1.5px solid rgba(255,255,255,.15);border-radius:8px;overflow:hidden;display:flex}
/* Los nombres largos se recortan con puntos suspensivos en vez de desbordar
   el sidebar. Con dos sucursales cortas nunca se noto; con "Sucursal Plan
   3000" y cuatro locales, el texto se salia de la caja. */
.suc-btn{flex:1;min-width:0;padding:6px 4px;font-size:11px;font-weight:700;font-family:var(--font);border:none;cursor:pointer;transition:.2s;color:rgba(255,255,255,.64);background:transparent;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Con 3 o mas sucursales el switch pasa a ser un desplegable: cuatro botones
   en una barra de 200px quedan ilegibles, y N botones directamente no entran.
   Lo elige updateSucursalUI() en js/shell.js. */
.suc-select{margin:10px 12px 4px;width:calc(100% - 24px);padding:7px 9px;border-radius:8px;
  border:1.5px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:#fff;
  font-family:var(--font);font-size:12px;font-weight:700;cursor:pointer}
.suc-select:focus{outline:none;border-color:var(--teal)}
.suc-select option{background:var(--dark);color:#fff}
.suc-btn.active{background:var(--teal);color:#fff}
.suc-btn:hover:not(.active){color:#fff;background:rgba(255,255,255,.08)}

.nav{flex:1;padding:8px 0;overflow-y:auto}
.nav-section{padding:10px 16px 4px;font-size:10px;color:rgba(255,255,255,.52);letter-spacing:1.5px;text-transform:uppercase;font-weight:800}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 16px;cursor:pointer;color:rgba(255,255,255,.75);font-size:13px;font-weight:600;transition:.15s;border-left:3px solid transparent;position:relative}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-item.active{background:rgba(47,128,237,.12);color:var(--teal);border-left-color:var(--teal)}
.nav-item i{font-size:17px;width:20px;text-align:center;flex-shrink:0}
.nav-badge{margin-left:auto;background:var(--orange);color:#fff;font-size:10px;font-weight:800;padding:1px 7px;border-radius:20px;animation:pulse 2s infinite}

.sidebar-footer{padding:12px 16px;border-top:1px solid rgba(255,255,255,.08)}
.user-badge{display:flex;align-items:center;gap:10px}
.user-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--teal-dark));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:13px;flex-shrink:0}
.user-info p{font-size:12px;color:#fff;font-weight:700;line-height:1.3}
.user-info small{font-size:10px;color:rgba(255,255,255,.62)}
.logout-btn{margin-left:auto;background:none;border:none;color:rgba(255,255,255,.58);cursor:pointer;font-size:17px;padding:4px;transition:.15s}
.logout-btn:hover{color:var(--red)}

/* 
   MAIN
 */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.topbar{background:var(--white);border-bottom:1px solid var(--border);padding:0 24px;height:56px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;box-shadow:0 1px 0 var(--border)}
.topbar-title{font-size:17px;font-weight:800;color:var(--dark)}

/*  Barra de estado de conexion (PWA / modo offline)
    Va como hermana de .topbar dentro de .main, asi empuja el contenido en
    vez de taparlo, y no pelea con el banner de actualizacion de abajo.
    Solo aparece cuando hay algo que decir: sin conexion, ventas pendientes
    o ventas con problema.  */
.conn-bar{display:flex;align-items:center;gap:10px;padding:8px 24px;font-size:13px;
  font-weight:700;flex-shrink:0;border-bottom:1px solid var(--border)}
.conn-bar i{font-size:17px;flex-shrink:0}
.conn-bar span{flex:1;font-weight:600}
.conn-bar strong{font-weight:900}
.conn-bar-off{background:var(--orange-light);color:var(--orange-dark)}
/* Aviso de suscripcion. El rojo se reserva para "suspendida": si todo
   aviso fuera rojo, el que de verdad corta la operacion no se
   distinguiria del que solo recuerda una fecha. */
.conn-bar-aviso{background:var(--teal-light);color:var(--teal-dark)}
.conn-bar-urgente{background:var(--orange-light);color:var(--orange-dark)}
.conn-bar-corte{background:#FDECEC;color:#9E1A20}
.conn-bar .cb-accion{font-weight:800;text-decoration:underline;cursor:pointer;background:none;border:none;font-family:var(--font);font-size:13px;color:inherit}
.conn-bar-pend{background:var(--teal-light);color:var(--teal-dark)}
.conn-bar-sync{background:var(--teal-light);color:var(--teal-dark)}
.conn-bar-sync i{animation:spin 1s linear infinite}
.conn-bar-err{background:#FDECEA;color:#A5281B}
.conn-bar-btn{background:currentColor;border:none;border-radius:6px;padding:5px 12px;
  font-family:var(--font);font-size:12px;font-weight:800;cursor:pointer;flex-shrink:0}
.conn-bar-off  .conn-bar-btn{color:var(--orange-light)}
.conn-bar-pend .conn-bar-btn,
.conn-bar-sync .conn-bar-btn{color:var(--teal-light)}
.conn-bar-err  .conn-bar-btn{color:#FDECEA}
.topbar-right{display:flex;align-items:center;gap:10px}
.badge-pill{background:var(--orange-light);color:var(--orange-dark);font-size:11px;font-weight:700;padding:4px 11px;border-radius:20px;cursor:pointer;display:flex;align-items:center;gap:4px;transition:.15s}
.badge-pill:hover{background:var(--orange);color:#fff}
.badge-teal{background:var(--teal-light);color:var(--teal-dark);font-size:11px;font-weight:700;padding:4px 11px;border-radius:20px;display:flex;align-items:center;gap:4px}
.badge-suc{font-size:11px;font-weight:800;padding:4px 12px;border-radius:20px;display:flex;align-items:center;gap:5px}
.caja-topbar{display:flex;gap:16px;align-items:center;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:6px 14px}
.caja-topbar-item{text-align:center}
.caja-topbar-label{font-size:9px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.caja-topbar-val{font-size:13px;font-weight:800;line-height:1}

.content{flex:1;overflow-y:auto;padding:20px 24px}
.page{animation:fadeIn .3s ease}

/* 
   BOTONES
 */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--radius-sm);border:none;cursor:pointer;font-size:13px;font-weight:700;font-family:var(--font);transition:.15s;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--teal);color:#fff}
.btn-primary:hover{background:var(--teal-dark)}
.btn-orange{background:var(--orange);color:#fff}
.btn-orange:hover{background:var(--orange-dark)}
.btn-outline{background:#fff;color:var(--teal);border:1.5px solid var(--teal)}
.btn-outline:hover{background:var(--teal-light)}
.btn-danger{background:var(--red);color:#fff}
.btn-danger:hover{opacity:.85}
.btn-success{background:var(--green);color:#fff}
.btn-success:hover{opacity:.85}
.btn-ghost{background:none;color:var(--muted);border:1px solid var(--border)}
.btn-ghost:hover{background:var(--bg);color:var(--text)}
.btn-sm{padding:5px 12px;font-size:12px}
.btn-lg{padding:11px 22px;font-size:15px}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* 
   CARDS
 */
.card{background:var(--white);border-radius:var(--radius);border:1px solid var(--border);padding:20px;box-shadow:var(--shadow)}
.card-sm{padding:14px 16px}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.stat-card{background:var(--white);border-radius:var(--radius);border:1px solid var(--border);padding:18px;box-shadow:var(--shadow);transition:.2s;position:relative;overflow:hidden}
.stat-card::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:.3s}
.stat-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.stat-card:hover::after{transform:scaleX(1)}
.stat-label{font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.stat-val{font-size:26px;font-weight:900;color:var(--dark);line-height:1.1;margin:6px 0 3px}
.stat-sub{font-size:11px;color:var(--teal);font-weight:600}
.stat-icon{font-size:28px;color:var(--teal);margin-bottom:8px;display:block}

/* 
   TABLAS
 */
.table-wrap{overflow-x:auto;border-radius:var(--radius-sm);border:1px solid var(--border)}
table{width:100%;border-collapse:collapse;font-size:13px}
th{background:var(--teal-light);color:var(--dark2);font-weight:700;padding:10px 14px;text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
td{padding:10px 14px;border-bottom:1px solid var(--border);color:var(--text);vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:#f5f9fd}
.table-empty{text-align:center;padding:40px!important;color:var(--muted)}

.tag{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap}
.tag-green{background:#E8F8EF;color:#1B6B3A}
.tag-red{background:#FDECEA;color:#B03A2E}
.tag-orange{background:var(--orange-light);color:var(--orange-dark)}
.tag-teal{background:var(--teal-light);color:var(--teal-dark)}
.tag-gray{background:#F2F3F4;color:#5D6D7E}
.tag-purple{background:#F5EEF8;color:#7D3C98}

/* 
   FORMULARIOS
 */
.form-group{margin-bottom:14px}
.form-label{font-size:12px;font-weight:700;color:var(--dark2);margin-bottom:5px;display:flex;align-items:center;gap:4px}
.form-required{color:var(--red)}
.form-control{width:100%;padding:9px 13px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:13px;font-family:var(--font);color:var(--text);background:#fff;transition:.15s}
.form-control:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(47,128,237,.12)}
.form-control:invalid:not(:placeholder-shown){border-color:var(--red)}
select.form-control{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237F8C8D' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
textarea.form-control{resize:vertical;min-height:72px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.form-hint{font-size:11px;color:var(--muted);margin-top:4px}

/* 
   SECCIN HEADER
 */
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.section-title{font-size:17px;font-weight:800;color:var(--dark)}
.section-sub{font-size:12px;color:var(--muted);margin-top:2px;font-weight:600}
.section-actions{display:flex;gap:8px;align-items:center}

/* 
   TABS
 */
.tabs{display:flex;gap:4px;background:var(--bg);border-radius:10px;padding:4px;margin-bottom:18px;width:fit-content;border:1px solid var(--border)}
.tab-btn{padding:7px 18px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;color:var(--muted);border:none;background:none;font-family:var(--font);transition:.15s}
.tab-btn.active{background:#fff;color:var(--teal);box-shadow:0 1px 4px rgba(0,0,0,.1)}
.tab-btn:hover:not(.active){color:var(--text)}

/* 
   INFO BOXES
 */
.info-box{background:var(--teal-light);border:1px solid var(--teal-mid);border-radius:var(--radius-sm);padding:10px 14px;font-size:12px;color:var(--dark2);display:flex;align-items:flex-start;gap:8px;line-height:1.5}
.warn-box{background:var(--orange-light);border:1px solid rgba(245,166,35,.3);border-radius:var(--radius-sm);padding:10px 14px;font-size:12px;color:var(--dark2);display:flex;align-items:flex-start;gap:8px;line-height:1.5}
.error-box{background:#FDECEA;border:1px solid rgba(231,76,60,.25);border-radius:var(--radius-sm);padding:10px 14px;font-size:12px;color:#B03A2E;display:flex;align-items:flex-start;gap:8px;line-height:1.5}
.alert-row{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border-radius:var(--radius-sm);background:var(--orange-light);border-left:3px solid var(--orange);margin-bottom:8px}
.alert-row.danger{background:#FDECEA;border-color:var(--red)}
.alert-row i{flex-shrink:0;margin-top:1px}
.alert-text{font-size:12px;font-weight:600;color:var(--dark2)}
.alert-sub{font-size:11px;color:var(--muted);margin-top:2px}
.divider{border:none;border-top:1px solid var(--border);margin:14px 0}

/* 
   LOGIN
 */
/* Pedido explicito del dueño (2026-09-10): sin fondo azul. Gris neutro en vez
   del degradado oscuro de antes -la tarjeta blanca sigue siendo el foco,
   ahora con menos contraste de color detras (la marca ya es azul en todos
   lados: logo, botones, sidebar; el login no necesitaba serlo tambien). */
#login-screen{position:fixed;inset:0;background:linear-gradient(135deg,#EEF1F4 0%,#E4E8EC 100%);display:flex;align-items:center;justify-content:center;z-index:100;transition:all .4s}
#login-screen.hide{opacity:0;pointer-events:none}
.login-card{background:#fff;border-radius:20px;padding:40px 36px;width:380px;max-width:95vw;box-shadow:0 24px 60px rgba(11,46,82,.14);animation:scaleIn .4s ease}
.login-logo{text-align:center;margin-bottom:28px}
.login-logo-text{font-size:32px;font-weight:900;color:var(--teal)}
.login-logo-text span{color:var(--orange)}
.login-logo-sub{font-size:11px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;margin-top:4px}
.login-decoration{width:48px;height:3px;background:linear-gradient(90deg,var(--teal),var(--orange));border-radius:2px;margin:12px auto 0}

/* 
   POS --- VENTAS
 */
.pos-wrap{display:grid;grid-template-columns:1fr 370px;gap:16px;height:calc(100vh - 96px)}
.pos-left{display:flex;flex-direction:column;gap:12px;overflow:hidden}
.pos-right{display:flex;flex-direction:column;gap:10px;overflow-y:auto}
.scan-bar{display:flex;gap:8px;align-items:center}
.scan-input{flex:1;padding:11px 16px;border:2px solid var(--teal);border-radius:10px;font-size:14px;font-family:var(--font);background:#fff;transition:.15s}
.scan-input:focus{outline:none;box-shadow:0 0 0 4px rgba(47,128,237,.15)}
.cart-wrap{flex:1;overflow:hidden;display:flex;flex-direction:column}
.cart-list{flex:1;overflow-y:auto;padding:0 4px}
.cart-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);animation:fadeIn .2s ease}
.cart-item:last-child{border-bottom:none}
.qty-ctrl{display:flex;align-items:center;gap:5px}
.qty-btn{width:28px;height:28px;border-radius:7px;border:1.5px solid var(--border);background:#fff;cursor:pointer;font-size:16px;font-weight:800;display:flex;align-items:center;justify-content:center;color:var(--dark);transition:.15s;flex-shrink:0}
.qty-btn:hover{border-color:var(--teal);color:var(--teal);background:var(--teal-light)}
.qty-num{width:34px;text-align:center;font-weight:800;font-size:14px}
.total-box{background:var(--dark);border-radius:var(--radius);padding:18px}
.total-label{color:rgba(255,255,255,.7);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.total-amount{color:#fff;font-size:32px;font-weight:900;margin:4px 0;line-height:1}
.pay-methods{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.pay-btn{padding:11px;border-radius:var(--radius-sm);border:2px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:rgba(255,255,255,.7);cursor:pointer;font-weight:700;font-size:13px;font-family:var(--font);transition:.2s;display:flex;align-items:center;justify-content:center;gap:7px}
.pay-btn:hover,.pay-btn.active{border-color:var(--teal);background:rgba(47,128,237,.18);color:var(--teal)}

/* 
   BSQUEDA DROPDOWN
 */
.search-wrap{position:relative;flex:1}
.search-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1.5px solid var(--border);border-radius:10px;box-shadow:var(--shadow-md);z-index:50;max-height:260px;overflow-y:auto;animation:scaleIn .15s ease}
.search-item{padding:10px 14px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);transition:.12s}
.search-item:last-child{border-bottom:none}
.search-item:hover{background:var(--teal-light)}
.search-item-name{font-weight:700;font-size:13px;color:var(--dark)}
.search-item-sub{font-size:11px;color:var(--muted);margin-top:1px}
.search-item-price{font-size:13px;font-weight:800;color:var(--teal)}
.search-item-stock{font-size:11px;color:var(--muted);text-align:right;margin-top:1px}

/*
   LISTA DE PRODUCTOS (Inventario) -- mismo lenguaje visual que .search-item
   de arriba (el desplegable de busqueda de Nueva Venta): una tarjeta por
   producto con nombre + subtitulo en una sola linea, precio/stock al
   costado. Reemplaza a la tabla vieja (una columna por dato) para que en
   celular entren varios productos por pantalla en vez de uno y medio.
 */
.prod-list{padding:0}
.prod-item{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--border);transition:.12s}
.prod-item:last-child{border-bottom:none}
.prod-item:hover{background:var(--teal-light)}
.prod-item-main{flex:1;min-width:180px}
.prod-item-name{font-weight:700;font-size:13px;color:var(--dark);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.prod-item-cod{font-size:10px;font-weight:400;color:var(--muted);font-family:monospace}
.prod-item-sub{font-size:11px;color:var(--muted);margin-top:1px}
.prod-item-venc{font-size:11px;margin-top:2px}
.prod-item-side{text-align:right;flex-shrink:0}
.prod-item-price{font-size:13px;font-weight:800;color:var(--teal)}
.prod-item-stock{font-size:11px;font-weight:700;margin-top:1px}
.prod-item-actions{display:flex;gap:2px;flex-shrink:0;margin-left:auto}
@media (max-width:620px){
  .prod-item{padding:10px 12px}
  .prod-item-side{order:3;flex:1;text-align:left;display:flex;gap:10px;align-items:center}
  .prod-item-actions{order:4;width:100%;justify-content:flex-end;margin-top:4px}
}

/*
   MODAL
 */
.modal-overlay{position:fixed;inset:0;background:rgba(11,46,82,.5);display:flex;align-items:center;justify-content:center;z-index:200;backdrop-filter:blur(2px);animation:fadeIn .2s ease}
.modal{background:#fff;border-radius:16px;padding:28px;width:520px;max-width:95vw;max-height:88vh;overflow-y:auto;animation:scaleIn .22s ease;position:relative}
.modal-lg{width:660px}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.modal-title{font-size:16px;font-weight:800;color:var(--dark);display:flex;align-items:center;gap:8px}
.modal-close{background:none;border:none;font-size:20px;cursor:pointer;color:var(--muted);padding:4px;border-radius:6px;transition:.15s;line-height:1}
.modal-close:hover{color:var(--red);background:var(--bg)}
.modal-footer{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;padding-top:14px;border-top:1px solid var(--border)}

/* 
   TOAST / NOTIFICACIONES
 */
#toast-container{position:fixed;bottom:24px;right:24px;z-index:999;display:flex;flex-direction:column;gap:8px}
.toast{padding:12px 18px;border-radius:10px;font-size:13px;font-weight:600;min-width:260px;max-width:380px;display:flex;align-items:center;gap:10px;animation:fadeIn .3s ease;box-shadow:var(--shadow-md);color:#fff}
.toast-success{background:var(--green)}
.toast-error{background:var(--red)}
.toast-warn{background:var(--orange)}
.toast-info{background:var(--teal-dark)}
.toast.hide{animation:fadeIn .3s ease reverse}

/* 
   LOADING SKELETON
 */
.skeleton{background:linear-gradient(90deg,#eff5fb 25%,#dfeaf7 50%,#eff5fb 75%);background-size:400px;animation:shimmer 1.4s infinite;border-radius:6px;height:16px;margin-bottom:8px}

/* 
   CHARTS
 */
.chart-wrap{display:flex;align-items:flex-end;gap:6px;height:100px;padding:0 4px}
.chart-bar-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}
.chart-bar-fill{width:100%;background:var(--teal);border-radius:4px 4px 0 0;min-height:4px;transition:height .5s ease;position:relative;cursor:pointer}
.chart-bar-fill:hover{background:var(--teal-dark)}
.chart-bar-fill::after{content:attr(data-val);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);font-size:9px;font-weight:700;color:var(--dark2);white-space:nowrap;margin-bottom:3px;opacity:0;transition:.2s}
.chart-bar-fill:hover::after{opacity:1}
.chart-bar-label{font-size:10px;color:var(--muted);font-weight:600}

/* 
   DIAS BAR (por vencer)
 */
.dias-bar{height:5px;border-radius:3px;background:var(--border);overflow:hidden;margin-top:4px;width:100px}
.dias-fill{height:100%;border-radius:3px;transition:.3s}

/* 
   UTILIDADES
 */
.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:8px}.gap-3{gap:12px}.w-full{width:100%}
.mt-1{margin-top:8px}.mt-2{margin-top:14px}.mt-3{margin-top:22px}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:14px}
.text-right{text-align:right}.text-center{text-align:center}.font-bold{font-weight:700}.font-black{font-weight:900}
.text-muted{color:var(--muted)}.text-teal{color:var(--teal)}.text-orange{color:var(--orange)}.text-red{color:var(--red)}.text-green{color:var(--green)}.text-dark{color:var(--dark)}
.text-sm{font-size:12px}.text-xs{font-size:11px}
.hidden{display:none!important}

/*
   TARJETA PLEGABLE (dashboard: alertas activas)
   <details>/<summary>: el plegado lo hace el navegador, sin JS ni estado
   propio que mantener. Arranca abierta en PC y plegada en celular -- lo
   decide alertasCardHTML() (js/dashboard.js) al dibujar, porque `open` es un
   atributo del HTML y el CSS no puede ponerlo ni sacarlo segun el ancho.
 */
.dash-alertas > summary{display:flex;align-items:center;gap:8px;cursor:pointer;
  list-style:none;user-select:none}
.dash-alertas > summary::-webkit-details-marker{display:none}
.dash-alertas > summary .section-title{flex:1;min-width:0}
.dash-alertas-chev{color:var(--muted);font-size:17px;transition:transform .2s;flex-shrink:0}
.dash-alertas[open] .dash-alertas-chev{transform:rotate(180deg)}
.dash-alertas-body{max-height:180px;overflow-y:auto;margin-top:10px}

/*
   BUSCADOR CON SELECTOR DE CAMPO (Productos)
   Un solo cuadro de texto con un desplegable al lado que dice contra que
   campo buscar, en vez de una caja de texto por cada campo.
 */
.buscador-doble{display:flex;gap:6px}

/*
   GUIA DE USO (js/tour.js)

   El "foco" no recorta nada: es un div del tamano del elemento iluminado con
   una sombra gigante alrededor, que oscurece toda la pantalla menos ese
   rectangulo. Se hace asi para no tener que subirle el z-index al elemento
   original -- casi siempre vive dentro de contextos de apilamiento anidados
   de los que no se lo puede sacar.

   z-index 500: por encima del modal (200), del sidebar movil (300) y del
   modal de la landing (400); por debajo de los toast (999), que tienen que
   poder avisar algo aunque la guia este abierta. Ver el mapa de capas
   completo en css/landing.css.
 */
#tour-overlay{position:fixed;inset:0;z-index:500}
/* Sin elemento que iluminar (paso de tarjeta centrada) oscurece el overlay
   entero, porque no hay sombra de un hueco que lo haga. */
#tour-overlay.tour-sin-foco{background:rgba(11,46,82,.62)}
#tour-hueco{position:absolute;border-radius:10px;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(11,46,82,.62), 0 0 0 3px var(--teal) inset;
  transition:top .2s ease,left .2s ease,width .2s ease,height .2s ease}

#tour-globo{position:absolute;width:330px;max-width:calc(100vw - 24px);
  background:var(--white);border-radius:14px;padding:16px;
  box-shadow:0 18px 50px rgba(11,46,82,.35);animation:tourAparece .18s ease}
/* Entrada SOLO por opacidad: scaleIn y fadeIn animan transform, y el paso
   centrado se posiciona justamente con transform:translate(-50%,-50%) -- la
   animacion se lo pisaria y la tarjeta arrancaria corrida de lugar. */
@keyframes tourAparece{from{opacity:0}to{opacity:1}}
.tour-globo-centrado{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}
.tour-globo-head{display:flex;align-items:center;gap:8px;font-size:15px;
  font-weight:800;color:var(--dark);margin-bottom:7px}
.tour-globo-head i{color:var(--teal);font-size:19px;flex-shrink:0}
.tour-globo-texto{font-size:13px;line-height:1.55;color:var(--text)}
.tour-globo-pie{display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-top:14px;padding-top:11px;border-top:1px solid var(--border)}
.tour-globo-pasos{font-size:11px;font-weight:800;color:var(--muted);flex-shrink:0}
.tour-globo-btns{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}

/* --- Laminas de la bienvenida (dentro del modal comun) --- */
.tour-lamina{text-align:center;padding:6px 4px 2px}
.tour-lamina-icono{font-size:46px;line-height:1;margin-bottom:12px}
.tour-lamina-titulo{font-size:19px;font-weight:900;color:var(--dark);margin-bottom:8px}
.tour-lamina-texto{font-size:13.5px;line-height:1.65;color:var(--text);
  max-width:420px;margin:0 auto}
.tour-puntos{display:flex;gap:6px;justify-content:center;margin-top:18px}
.tour-punto{width:7px;height:7px;border-radius:50%;background:var(--border);transition:.2s}
.tour-punto.on{background:var(--teal);width:20px;border-radius:4px}

/* --- Menu de la guia --- */
.tour-menu{display:flex;flex-direction:column;gap:8px}
.tour-menu-op{display:flex;align-items:flex-start;gap:11px;width:100%;
  text-align:left;padding:12px 13px;border:1.5px solid var(--border);
  border-radius:var(--radius-sm);background:var(--white);cursor:pointer;
  font-family:var(--font);color:var(--text);transition:.15s}
.tour-menu-op:hover:not(:disabled){border-color:var(--teal);background:var(--teal-light)}
.tour-menu-op:disabled{opacity:.5;cursor:not-allowed}
.tour-menu-op i{font-size:21px;color:var(--teal);flex-shrink:0;margin-top:1px}
.tour-menu-op b{display:block;font-size:13.5px;color:var(--dark);margin-bottom:2px}
.tour-menu-op small{font-size:11.5px;color:var(--muted);line-height:1.45}

/* =========================================================================
   RESPONSIVE / MOBILE

   Tres cortes:
     <=1100px  tablet -- se achica el panel de cobro y bajan las columnas
     <=768px   telefono -- sidebar en cajon, tablas como tarjetas, POS apilado
     <=430px   telefono chico -- una columna en todo

   La regla de fondo: en un telefono NUNCA tiene que hacer falta scroll
   HORIZONTAL para leer un dato. Scroll vertical si, es lo natural; el
   horizontal esconde columnas enteras sin avisar que estan ahi.
   ========================================================================= */

/* --- Vale en cualquier ancho ------------------------------------------- */

/* Un codigo de barras, un correo o un nombre sin espacios estiraban la celda
   y con ella toda la tabla. Se parten solo cuando no entran de otra forma. */
td, th, .stat-val, .section-title, .modal-title { overflow-wrap:break-word }

/* Hijos de flex que tienen que poder achicarse. Sin min-width:0 un flex item
   nunca baja de su contenido y desborda al padre en vez de recortarse. */
.section-header > div, .topbar > div, .user-info, .search-wrap { min-width:0 }
.user-info p, .user-info small { overflow:hidden;text-overflow:ellipsis;white-space:nowrap }

@media (max-width: 1100px) {
  .stat-grid { grid-template-columns:repeat(2,1fr) }
  .pos-wrap  { grid-template-columns:1fr 300px }
}

/* =========================================================================
   TELEFONO
   ========================================================================= */
@media (max-width: 768px) {

  /* --- Cajon lateral --------------------------------------------------- */
  /* Con transform en vez de left:-224px el ancho y la posicion cerrada no
     quedan atados a un mismo numero escrito dos veces. */
  .sidebar { position:fixed;left:0;top:0;bottom:0;width:min(80vw,270px);
             transform:translateX(-100%);transition:transform .25s ease;z-index:300 }
  .sidebar.open { transform:none }

  /* .app seguia siendo display:block en movil, con height:100vh y
     overflow:hidden. Como .main pasaba a ser un bloque de alto automatico, el
     flex:1 de .content no tenia contra que resolver: crecia con su contenido,
     .main se pasaba de los 100vh y el overflow:hidden de .app cortaba el
     resto SIN dejar desplazarlo. Manteniendo la columna flex, .main llena la
     pantalla y .content vuelve a ser el unico que scrollea.
     100dvh ademas descuenta la barra de direcciones del navegador movil, que
     con 100vh se come el ultimo tramo de la pagina. */
  .app  { display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden }
  .main { width:100%;flex:1;min-height:0 }
  .content { flex:1;min-height:0;overflow-y:auto;padding:14px 12px;
             padding-bottom:calc(18px + env(safe-area-inset-bottom,0px)) }
  .mob-overlay { display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:299 }
  .mob-overlay.show { display:block }
  #hamburger { display:flex!important }

  /* --- Topbar ---------------------------------------------------------- */
  /* En una barra de 360px las dos chapas de la derecha dejaban el titulo en
     tres letras ("Inven..."). Se achican las chapas y el titulo se queda con
     el espacio que sobra. */
  .topbar { padding:0 10px;gap:6px }
  .topbar > div:first-child { flex:1 1 auto;min-width:0 }
  .topbar-title { font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
  .topbar-right { gap:5px;min-width:0;flex-shrink:0 }
  .caja-topbar { display:none }
  /* "3 por vencer" queda en el reloj y el numero: el resto se sobreentiende
     y la chapa pasa de ~110px a ~40px. */
  .badge-txt-larga { display:none }
  .badge-pill { font-size:10px;padding:3px 8px }
  /* El nombre de la sucursal se recorta en vez de empujar el titulo fuera. */
  .badge-suc { max-width:34vw;min-width:0;font-size:10px;padding:3px 8px }
  .badge-suc > span { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
  /* En celular la topbar ya viene justa (ver arriba) y el navegador movil no
     deja demasiado margen util para pantalla completa real. */
  #btn-fullscreen { display:none }
  .conn-bar { padding:8px 12px;font-size:12px;flex-wrap:wrap;row-gap:6px }
  .conn-bar .cb-accion, .conn-bar-btn { font-size:12px }

  /* --- Encabezado de seccion ------------------------------------------- */
  /* Los filtros se declaran con width:200px INLINE en varios modulos, asi
     que hace falta !important para que ocupen el ancho del telefono. */
  .section-header { flex-direction:column;align-items:stretch;gap:10px }
  .section-actions { flex-wrap:wrap;width:100% }
  .section-actions > * { flex:1 1 150px;min-width:0 }
  .section-actions .form-control,
  .section-actions input, .section-actions select { width:100%!important }
  .section-actions .btn { justify-content:center }

  /* El buscador con selector es la excepcion a la regla de arriba: sus dos
     piezas comparten UN renglon (desplegable angosto + campo de texto). Sin
     esto el width:100% de cada una las dejaria una debajo de la otra, que es
     justo el doble renglon que este buscador vino a eliminar. */
  .section-actions .buscador-doble { flex:1 1 100%;width:100%!important }
  .section-actions .buscador-doble > select { width:132px!important;flex:0 0 132px!important }
  .section-actions .buscador-doble > input  { width:auto!important;flex:1 1 auto!important;min-width:0 }

  /* --- Tabs ------------------------------------------------------------ */
  /* Aca el scroll horizontal SI es correcto: son etiquetas cortas, se ve que
     la fila sigue, y no hay datos escondidos detras. */
  .tabs { width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none }
  .tabs::-webkit-scrollbar { display:none }
  .tab-btn { flex:0 0 auto;padding:7px 14px;font-size:12.5px }

  /* --- Formularios ----------------------------------------------------- */
  .form-row, .form-row-3 { grid-template-columns:1fr!important }
  /* 16px es el minimo con el que Safari de iOS NO hace zoom al enfocar un
     campo. Con 13px el navegador ampliaba la pagina solo y la interfaz
     quedaba corrida y "rota" hasta que el usuario alejaba a mano.
     Va con !important porque varios modulos fijan font-size inline en sus
     campos (11px en las fechas de Nueva Compra, por ejemplo) y ese inline
     le gana a cualquier clase. */
  input:not([type="checkbox"]):not([type="radio"]),
  select, textarea { font-size:16px!important }
  .form-label { font-size:12px }

  /* --- Modales --------------------------------------------------------- */
  .modal { width:96vw!important;padding:18px;max-height:92vh }
  .modal-lg { width:96vw!important }
  .modal-header { margin-bottom:14px }
  .modal-footer { flex-wrap:wrap }
  .modal-footer .btn { flex:1 1 140px;justify-content:center }

  /* =======================================================================
     ESCALA TIPOGRAFICA MOVIL

     En el telefono todo estaba practicamente del mismo tamano, y grande: sin
     jerarquia, cada tarjeta ocupaba media pantalla para decir un numero. Aca
     se achica y -- sobre todo -- se SEPARAN los niveles: rotulo (9.5-10px),
     texto corriente (12.5-13px), titulo de seccion (15px), cifra (17px).
     Nada de esto sale del media query: en PC la escala queda como estaba.

     La excepcion son los campos de formulario, que se quedan en 16px por el
     zoom de iOS (ver mas arriba); ahi se compensa achicando el relleno.
     ===================================================================== */
  .section-title { font-size:15px }
  .section-sub   { font-size:11px }
  .card          { padding:14px }
  .card-sm       { padding:12px 13px }
  .tag           { font-size:10px;padding:2px 8px }
  .btn           { font-size:12.5px;padding:7px 13px }
  .btn-sm        { font-size:11.5px;padding:5px 10px }
  .btn-lg        { font-size:14px;padding:10px 18px }
  .form-control  { padding:8px 11px }
  .info-box, .warn-box, .error-box { font-size:11.5px;padding:9px 11px }
  .alert-row     { padding:8px 11px }
  .alert-text    { font-size:11.5px }
  .alert-sub     { font-size:10.5px }
  .modal-title   { font-size:14.5px }
  .total-label   { font-size:10px }
  .chart-bar-label { font-size:9px }

  /* --- Fichas de estadistica ------------------------------------------- */
  /* Siempre DE A DOS por fila, incluso en pantallas de 360px: una sola ficha
     por renglon dejaba media pantalla vacia a los costados para mostrar un
     "Bs 0.00", y el dashboard entero pedia cuatro pantallazos de scroll.
     El icono se va a la esquina como marca de agua en vez de ocupar su
     propio renglon arriba del rotulo: son ~36px de alto por ficha. */
  .stat-grid { grid-template-columns:1fr 1fr!important;gap:9px;margin-bottom:14px }
  .stat-card { padding:11px 12px }
  .stat-icon { position:absolute;top:9px;right:9px;font-size:15px;
               margin:0;opacity:.45 }
  .stat-label{ font-size:9.5px;letter-spacing:.3px;line-height:1.25 }
  /* El hueco para el icono se reserva SOLO si la ficha tiene icono (el <i>
     es el hermano justo anterior al rotulo). Varias fichas no lo llevan y van
     centradas -- reservarles el hueco igual las dejaba descentradas. */
  .stat-icon + .stat-label { padding-right:20px }
  .stat-val  { font-size:17px!important;margin:4px 0 2px }
  .stat-sub  { font-size:10px;line-height:1.25 }

  /* --- Grillas de dos columnas declaradas inline ----------------------- */
  /* El dashboard (grafico + alertas) y Compras (una columna por sucursal)
     fijan sus columnas con estilo inline, asi que en el telefono quedaban
     dos paneles apretados uno al lado del otro -- con scroll horizontal en
     el dashboard, que era justo lo que habia que sacar. */
  .dash-2col, .comp-cols { grid-template-columns:1fr!important;gap:12px!important }

  /* --- Guia de uso ------------------------------------------------------ */
  /* En el telefono el globo va anclado a un borde de la pantalla y ocupa
     todo el ancho: no hay lugar para acomodarlo al costado del elemento. */
  #tour-globo{width:auto;padding:14px}
  .tour-globo-head{font-size:14px}
  .tour-globo-texto{font-size:12.5px}
  .tour-globo-pie{margin-top:12px;padding-top:9px}
  .tour-lamina-icono{font-size:38px}
  .tour-lamina-titulo{font-size:17px}
  .tour-lamina-texto{font-size:13px}

  /* --- Graficos -------------------------------------------------------- */
  /* Con 30 barras cada una quedaba de 3px. Se les da un ancho minimo y la
     tira se desplaza; una barra de 3px no comunica nada. */
  .chart-wrap { overflow-x:auto;padding-bottom:4px }
  .chart-bar-item { min-width:26px }

  /* =======================================================================
     TABLAS COMO TARJETAS

     Cada <tr> se dibuja como una tarjeta y cada <td> muestra el titulo de su
     columna encima del valor. El titulo lo pone mfEtiquetarTabla()
     (js/app.js) en data-label -- el CSS no puede leer un <th> por su cuenta.

     Solo entran las tablas que ese paso marco con .mf-tabla-cards. Una tabla
     con rowspan (asistencia por dia) no se marca y conserva el scroll: en
     tarjetas, la celda agrupada solo aparecia en la primera y las demas
     quedarian sin ese dato.
     ===================================================================== */

  .table-wrap { overflow-x:auto;-webkit-overflow-scrolling:touch }
  .mf-wrap-cards { overflow-x:visible;border:none;border-radius:0 }
  table { font-size:12.5px }
  th, td { padding:7px 8px }

  table.mf-tabla-cards { display:block;width:100%;border:none }
  table.mf-tabla-cards > thead,
  table.mf-tabla-cards .mf-fila-cabecera { display:none }
  table.mf-tabla-cards > tbody,
  table.mf-tabla-cards > tfoot { display:block }

  table.mf-tabla-cards tbody tr,
  table.mf-tabla-cards tfoot tr {
    display:flex;flex-wrap:wrap;align-items:flex-start;
    /* Fondo --bg (no blanco): casi siempre estas tarjetas van dentro de una
       .card blanca, y blanco sobre blanco dejaba el borde como unica
       separacion entre una fila y la siguiente. */
    background:var(--bg);border:1px solid var(--border);
    border-radius:var(--radius-sm);padding:10px 12px;margin-bottom:10px;
  }
  table.mf-tabla-cards tbody tr:last-child { margin-bottom:0 }
  /* El hover pintaba la celda de gris y rompia el fondo de la tarjeta. */
  table.mf-tabla-cards tr:hover td { background:transparent }

  /* Dos celdas por linea mientras los valores sean cortos. Las que llevan
     texto largo, contenido en bloque o botones piden linea entera --
     mfEtiquetarTabla() las marca con data-mf-ancho. */
  table.mf-tabla-cards td {
    display:block;flex:1 1 44%;min-width:0;
    padding:5px 10px 5px 0;border:none;
    text-align:left!important;   /* .text-right descoloca dentro de la tarjeta */
    font-size:13px;line-height:1.35;
  }
  table.mf-tabla-cards td[data-mf-ancho="full"] { flex-basis:100% }

  /* El rotulo de la columna, encima del valor. */
  table.mf-tabla-cards td::before {
    content:attr(data-label);
    display:block;margin-bottom:1px;
    font-size:9.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
    color:var(--muted);line-height:1.3;
  }
  /* Celda sin columna propia: totales con colspan, "sin datos", acciones. */
  table.mf-tabla-cards td:not([data-label])::before,
  table.mf-tabla-cards td[data-label=""]::before { display:none }

  /* Botonera: linea entera, separada del resto de la tarjeta. */
  table.mf-tabla-cards td[data-mf-ancho="acciones"] {
    flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px;
    margin-top:8px;padding-top:9px;padding-right:0;
    border-top:1px solid var(--border);
  }
  table.mf-tabla-cards td[data-mf-ancho="acciones"]::before { display:none }
  table.mf-tabla-cards td[data-mf-ancho="acciones"] .btn { flex:0 0 auto }
  table.mf-tabla-cards .table-empty { padding:28px 0!important;text-align:center!important }

  /* =======================================================================
     POS -- NUEVA VENTA

     Antes el panel de cobro era position:fixed con max-height:60vh y el
     carrito llevaba 280px de relleno inventado abajo: el panel tapaba
     contenido, el relleno dejaba un hueco muerto y con pago Mixto el boton
     de confirmar quedaba dentro de un scroll propio, apretado.

     Ahora todo va en una sola columna que fluye normal, y el total viaja en
     una barra fija abajo (.pos-mini) para que el cajero no tenga que
     desplazarse para saber cuanto va cobrando.
     ===================================================================== */
  .pos-wrap  { display:flex;flex-direction:column;gap:12px;height:auto;
               padding-bottom:calc(64px + env(safe-area-inset-bottom,0px)) }
  .pos-left  { overflow:visible;padding-bottom:0 }
  .pos-right { position:static;overflow:visible;max-height:none;
               background:transparent;padding:0;border:none }
  .cart-wrap { overflow:visible }
  .cart-list { overflow:visible;max-height:none;padding:0 }

  /* La barra de busqueda no entra entera en una linea: el desplegable de
     criterio y el campo de texto comparten el primer renglon, y los botones
     van abajo. La fila interna esta declarada con display:flex inline, sin
     clase propia, asi que se la alcanza como el unico div de .search-wrap
     que no es el desplegable de resultados. */
  .scan-bar { flex-wrap:wrap }
  .scan-bar .search-wrap { flex:1 1 100% }
  .scan-bar > .btn { flex:1 1 45%;justify-content:center }
  .search-wrap > div:not(.search-dropdown) { flex-wrap:nowrap;gap:6px!important }
  #scan-tipo, #compra-scan-tipo { width:126px!important;flex:0 0 126px!important }
  .scan-input { flex:1 1 auto!important;width:auto;min-width:0 }

  /* Renglon del carrito: nombre arriba, cantidad y subtotal abajo. Los
     cuatro bloques en una linea dejaban el nombre en dos letras. */
  .cart-item { flex-wrap:wrap;gap:8px;row-gap:6px }
  .cart-item > div:first-child { flex:1 1 100%;order:1 }
  .cart-item .qty-ctrl { order:2 }
  .cart-item > div:nth-last-child(2) { order:3;margin-left:auto;width:auto!important }
  .cart-item > .qty-btn:last-child { order:4 }

  /* .total-box (total + selector Efectivo/QR/Mixto) se muda ENTERA a la
     barra fija de abajo (.pos-mini-methods, ver css mas abajo y
     posMiniMontar() en js/ventas.js): en el telefono no hace falta que
     ocupe lugar arriba del todo, comprimido en la barra alcanza y sobra.
     Se oculta con CSS nada mas: el HTML de renderPOS() no cambia -sigue
     dibujando .total-box igual que siempre-, y en pantalla grande (fuera
     de este media query) se sigue viendo exactamente igual que antes,
     porque ahi la barra fija ni existe (viene en display:none). */
  .total-box { display:none }

  /* --- Renglon de item (Nueva Compra / Devolucion de vencidos) ---------- */
  /* Los dos declaran grid-template-columns inline y en pixeles
     (1fr 80px 90px 90px 100px 110px 30px): en un telefono desbordan si o si,
     de ahi el !important. Nombre arriba, los campos de a dos, y el boton de
     quitar como una linea entera al final.  */
  .mf-item-row { grid-template-columns:1fr 1fr!important;gap:10px!important }
  .mf-item-row > div:first-child { grid-column:1 / -1 }
  .mf-item-row > button { grid-column:1 / -1;margin-top:0!important;
                          width:100%;border:1px solid var(--border)!important }

  /* --- Horario semanal del empleado ------------------------------------ */
  /* 7 columnas en un modal de ~350px dejan 40px por dia: el campo de horas
     no entra. De a 4 por linea si. */
  .emp-horario-grid { grid-template-columns:repeat(4,1fr)!important }
}

/* =========================================================================
   TELEFONO CHICO
   ========================================================================= */
@media (max-width: 430px) {
  /* Las fichas NO bajan a una sola columna: dos siguen entrando de sobra a
     360px (~168px cada una, suficiente para "Bs 12.345,67") y una sola por
     renglon era justamente el desperdicio de espacio que habia que corregir. */
  .stat-val  { font-size:16px!important }
  .stat-label{ font-size:9px }
  .btn { padding:7px 11px;font-size:12px }
  .btn-lg { padding:10px 16px;font-size:14px }
  .content { padding:12px 10px }
  .card { padding:12px }
  /* Las tarjetas de tabla se quedan en dos columnas incluso aca: a 390px
     cada celda tiene ~150px, de sobra para un importe o un tag, y una sola
     columna volveria cada fila una tarjeta larguisima. Los valores que de
     verdad no entran ya piden linea entera desde mfEtiquetarTabla(). */
  table.mf-tabla-cards td { padding-right:8px }
  .section-actions > * { flex:1 1 100% }
  .badge-suc { max-width:34vw }
}

/* =========================================================================
   BARRA FIJA DE TOTAL + METODO DE PAGO DEL POS (solo telefono)
   La dibuja posMiniMontar() (js/ventas.js) siempre; en pantallas grandes no
   se muestra porque ahi el panel de cobro (.total-box) ya esta a la vista
   todo el tiempo. Dos filas: arriba el selector Efectivo/QR/Mixto
   comprimido (.pos-mini-methods, mismos botones .pay-btn que .total-box
   usaba antes), abajo el total y "Cobrar" como ya estaba.
   ========================================================================= */
.pos-mini { display:none }
@media (max-width: 768px) {
  .pos-mini {
    display:flex;flex-direction:column;gap:8px;
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--dark);color:#fff;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -4px 20px rgba(11,46,82,.28);
  }
  .pos-mini-methods { display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px }
  .pos-mini-methods .pay-btn { padding:7px 4px;font-size:11px;gap:4px }
  .pos-mini-methods .pay-btn i { font-size:14px }
  .pos-mini-row   { display:flex;align-items:center;gap:12px }
  .pos-mini-info  { flex:1;min-width:0 }
  .pos-mini-label { font-size:10px;font-weight:700;letter-spacing:.5px;
                    text-transform:uppercase;color:rgba(255,255,255,.55) }
  .pos-mini-total { font-size:20px;font-weight:900;line-height:1.1 }
  .pos-mini .btn  { flex-shrink:0 }
}

#hamburger { display:none;background:none;border:none;cursor:pointer;padding:6px;color:var(--dark2) }
#hamburger i { font-size:22px }

/* Boton de pantalla completa: icono chico a proposito (ver toggleFullscreen(),
   js/shell.js) -no es una accion principal, es una comodidad opcional que no
   deberia competir visualmente con la caja o el badge de sucursal. */
#btn-fullscreen{
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;cursor:pointer;
  width:28px;height:28px;border-radius:8px;
  color:var(--dark2);flex-shrink:0;
}
#btn-fullscreen i{font-size:15px}
#btn-fullscreen:hover{background:var(--bg)}


/* Agregar a tu CSS */
.cart-item-warning {
  border-left: 3px solid var(--orange);
  background: rgba(255, 165, 0, 0.05);
}

.cart-item-error {
  border-left: 3px solid var(--red);
  background: rgba(255, 0, 0, 0.05);
  opacity: 0.7;
}