:root{font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:#233b32;background:#f4f6f3;font-size:15px;--green:#246748}*{box-sizing:border-box}body{margin:0}header{background:#fff;border-bottom:1px solid #dfe6dd;padding:20px 5%;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px;letter-spacing:1px}.brand small{display:block;letter-spacing:0;color:#758277;margin-top:3px}.logo{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--green);color:#fff;font-weight:750}main{max-width:1300px;margin:auto;padding:20px 36px 40px}h1{font-size:clamp(25px,3vw,36px);letter-spacing:-1px;margin:6px 0 10px}h2{font-size:21px}p{line-height:1.6}.eyebrow{letter-spacing:2px;font-size:11px;font-weight:700;color:var(--green)}.heading{display:flex;justify-content:space-between;align-items:center;margin:15px 0 26px}.heading p{margin:0;color:#6e7e73}.card{background:#fff;border:1px solid #e0e6dd;border-radius:16px;padding:24px;box-shadow:0 3px 8px #183c2404}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.metrics small{color:#748377}.metrics strong{display:block;font-size:31px;margin-top:13px;font-weight:650}button,input,select{font:inherit;border:1px solid #d7dfd4;border-radius:8px;padding:11px 14px;background:#fff;color:inherit}button{cursor:pointer;font-weight:600;white-space:nowrap}button:hover{background:#edf3eb}button:disabled{opacity:.55;cursor:wait}.primary{background:var(--green);color:white;border-color:var(--green)}.primary:hover{background:#194b33}input:focus,select:focus,button:focus-visible{outline:2px solid #71ab83;outline-offset:2px}nav{display:flex;gap:8px;margin:28px 0 18px;overflow:auto}nav button{border-color:transparent;background:transparent}nav button.active{background:#e1eddf;color:#205635}.toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:20px}.toolbar input[type=search]{flex:1;min-width:210px}.tablewrap{overflow:auto}table{width:100%;border-collapse:collapse;white-space:nowrap;text-align:left}th{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#758277;background:#f7f9f5}th,td{padding:15px 14px;border-bottom:1px solid #edf0ea}td:first-child{font-weight:550}td button{padding:6px 9px;font-size:12px;margin:2px}.badge{background:#edf4e9;color:#376141;border-radius:25px;padding:5px 10px;font-size:12px}.badge.out{background:#fff0df;color:#9c6426}.muted,footer{color:#788478;font-size:12px}footer{margin-top:28px}label{display:block;font-weight:600;font-size:13px;margin:16px 0}label input,label select{display:block;width:100%;margin-top:8px;font-weight:400}dialog{border:0;border-radius:18px;width:min(520px,94vw);padding:26px;box-shadow:0 20px 90px #0003}dialog::backdrop{background:#102b2066}.dialoghead,.dialogactions{display:flex;align-items:center;justify-content:space-between;gap:12px}.dialogactions{justify-content:flex-end;margin-top:25px}.access{max-width:460px;margin:50px auto}.access .primary{width:100%}hr{border:0;border-top:1px solid #e4eadf;margin:30px 0}#message:empty{display:none}#message{border-radius:10px;background:#e0eedc;padding:12px 16px}#message.error{background:#ffe6e3;color:#943e34}[hidden]{display:none!important}@media(max-width:700px){main{padding:14px}.metrics{grid-template-columns:repeat(2,1fr);gap:10px}.card{padding:16px}.heading{align-items:flex-start;gap:15px;flex-direction:column}.metrics strong{font-size:26px}header{padding:14px}.brand strong{font-size:13px}.brand small{font-size:10px}.toolbar button{flex:1}th,td{padding:12px 9px}}

.metric-button{text-align:left;white-space:normal;font-weight:400;transition:background .15s,border-color .15s}.metric-button:hover{background:#edf4e9;border-color:#71ab83}.metric-button[aria-pressed="true"]{border-color:var(--green);background:#edf4e9}.metric-hint{display:block;font-size:11px;color:var(--green);margin-top:8px}

/* Paleta urbana: negro, verde y dorado. */
:root{--green:#407c2f;background:#101611;color:#edf0df}
body{background:linear-gradient(#0c160dcc,#0a110ed9),url('fondo-san-andreas.jpg') center top/cover fixed;min-height:100vh}
header{background:#0e160eef;border-color:#57733c}.brand strong{color:#f0d57a}.brand small{color:#bec9a5}.logo{background:#477d2b;color:#fff2b8}
main{max-width:1350px}.card{background:#111d15ed;border-color:#53663b;box-shadow:0 5px 25px #0004}.heading p,.muted,footer,.metrics small{color:#c4ceb1}.eyebrow,.metric-hint{color:#e0c362}
h1,h2{color:#f1dea4}button,input,select{background:#17251a;color:#f3eedb;border-color:#748257}button:hover{background:#314329}.primary{background:#527b2e;border-color:#729b42;color:#fff3ca}.primary:hover{background:#638e36}nav button.active{background:#527b2e;color:#fff0bb}
th{background:#273522;color:#e1c776}th,td{border-color:#3c4a31}.badge{background:#3d532a;color:#e5f4b9}.badge.out{background:#624525;color:#ffe0a0}
dialog{background:#142219;color:#e7eddb;border:1px solid #819452}dialog::backdrop{background:#000a}.access{background:#122018f2}hr{border-color:#607149}
.metric-button:hover,.metric-button[aria-pressed="true"]{background:#354a25;border-color:#d2bb65}.danger{background:#8b342b;color:#fff;border-color:#ba5948}.danger:hover{background:#a54335}#clearError{color:#ffc0aa}#sessionInfo{font-size:12px;color:#d5c98f;margin:0 12px}#operatorForm{max-width:460px}#demoBanner{margin-bottom:20px}#message{background:#435d2f;color:#f6f2d2}#message.error{background:#6f2c27;color:#ffddce}
@media(max-width:700px){body{background-attachment:scroll}#sessionInfo{max-width:130px;overflow-wrap:anywhere}header{gap:8px;flex-wrap:wrap}}

/* Computadora, tablet y teléfono: el contenido se adapta sin desbordar la página. */
main,.card,.heading>div,.brand,.metrics>*{min-width:0}
button{touch-action:manipulation;min-height:44px}
input,select{max-width:100%;min-height:44px}
input[type=radio]{min-height:24px;width:24px;height:24px;accent-color:#a3bf65;cursor:pointer}
p,h1,h2,#message,#backupStatus,#clearError,#accountEditError{overflow-wrap:anywhere}
dialog{max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain}
.dialoghead h2{min-width:0}.dialoghead button{flex-shrink:0}
.toolbar>*{min-width:0}.tablewrap{max-width:100%;overscroll-behavior-x:contain}
@media(min-width:701px) and (max-width:1050px){
 main{padding:22px}.metrics{gap:12px}.card{padding:20px}
 .toolbar input[type=search]{flex-basis:100%}.toolbar select{flex:1}
 header{padding:18px 22px;gap:12px}.brand{flex:1}#sessionInfo{max-width:240px;overflow-wrap:anywhere}
}
@media(max-width:700px){
 main{padding:12px 12px calc(24px + env(safe-area-inset-bottom))}
 header{display:grid;grid-template-columns:minmax(0,1fr) auto;padding:12px;gap:8px 12px}
 .brand{grid-column:1/-1;gap:10px}.logo{flex-shrink:0}
 #sessionInfo{margin:0;max-width:none;min-width:0}#logout{white-space:normal;font-size:13px}
 .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.metrics .card{padding:14px 12px}
 .metrics strong{font-size:clamp(22px,6vw,30px);overflow-wrap:anywhere}
 .metrics small{font-size:12px}.metric-hint{font-size:10px}
 .heading{margin:16px 0 20px}.heading .primary{width:100%}
 nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:18px 0}
 nav button{white-space:normal;font-size:13px;padding:10px 8px;line-height:1.4}
 .toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .toolbar input[type=search]{grid-column:1/-1;min-width:0;width:100%}
 .toolbar button{white-space:normal;font-size:13px;width:100%}
 #familyFilter,#stockFilter,#deleteSelected,#historySearch,#dateFilter,#exportExcel,#backup{grid-column:1/-1}
 #history .toolbar #typeFilter{grid-column:1/-1}
 input,select{font-size:16px;width:100%}input[type=file]{padding:10px 6px;font-size:13px}
 input[type=radio]{width:24px;height:24px}
 .card{padding:16px 12px}.access{margin:24px auto}.access h1{font-size:28px}
 #operatorForm{max-width:none}#operatorForm>button,#importButton,#clearAll,#reloadBackups{width:100%;white-space:normal}
 dialog{width:calc(100% - 20px);max-width:520px;padding:18px 14px;max-height:calc(100dvh - 20px);margin:auto}
 .dialogactions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
 .dialogactions button{white-space:normal;font-size:14px;padding:11px 8px}
 #clearDialog .dialogactions{grid-template-columns:1fr}
 .tablewrap{overflow:visible}
 table,tbody{display:block;width:100%;white-space:normal}
 thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
 tbody tr{display:block;border:1px solid #53663b;border-radius:12px;padding:8px 12px;margin:12px 0;background:#16231bea}
 td{display:grid;grid-template-columns:minmax(88px,32%) minmax(0,1fr);align-items:center;gap:10px;padding:10px 0;overflow-wrap:anywhere;min-width:0}
 td::before{font-size:11px;font-weight:600;letter-spacing:.4px;color:#e1c776;content:attr(data-label)}
 td:last-child{border-bottom:0}td .badge{justify-self:start;white-space:normal}
 td button{min-height:44px;font-size:13px;white-space:normal;margin:0;padding:10px}
 td:has(button){display:flex;flex-wrap:wrap;gap:8px}td:has(button)::before{flex-basis:100%}td:has(button) button{flex:1 1 90px}
 td[colspan]{display:block;text-align:center}td[colspan]::before{display:none}
 #products td:nth-child(1)::before{content:'Seleccionar'}#products td:nth-child(2)::before{content:'Producto'}#products td:nth-child(3)::before{content:'Familia'}#products td:nth-child(4)::before{content:'Existencias'}#products td:nth-child(5)::before{content:'Acciones'}
 #movements td:nth-child(1)::before{content:'Fecha'}#movements td:nth-child(2)::before{content:'Movimiento'}#movements td:nth-child(3)::before{content:'Producto'}#movements td:nth-child(4)::before{content:'Proveedor / cliente'}#movements td:nth-child(5)::before{content:'Cantidad'}
 #accountRows td:nth-child(1)::before{content:'Usuario'}#accountRows td:nth-child(2)::before{content:'Correo'}#accountRows td:nth-child(3)::before{content:'Permiso'}#accountRows td:nth-child(4)::before{content:'Acciones'}
 #backupRows td:nth-child(1)::before{content:'Fecha'}#backupRows td:nth-child(2)::before{content:'Copia'}#backupRows td:nth-child(3)::before{content:'Acciones'}
}
@media(max-width:360px){.metrics small{font-size:11px}.metrics strong{font-size:23px}.dialogactions{grid-template-columns:1fr}.toolbar{grid-template-columns:1fr}.toolbar>*{grid-column:1!important}.brand small{font-size:10px}}