/* Sistema de Uniformes — estilos */
:root{
  --azul:#23237f; --azul2:#3a3aa6; --naranja:#e85d14; --fondo:#f4f6f8; --borde:#dfe4ea; --texto:#1a1f26; --gris:#6b7480;
  --verde:#2e7d32; --verde-bg:#e8f5e9; --rojo:#c0392b; --rojo-bg:#fdecea; --ambar:#b26a00; --ambar-bg:#fff4e0;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{font-size:15px;}
body{font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif; background:var(--fondo); color:var(--texto);}
a{color:var(--azul2);}
h1{font-size:20px; margin-bottom:14px; color:var(--azul);}
h2{font-size:16px; margin-bottom:12px; color:var(--azul);}
h3{font-size:14px; margin:14px 0 8px; color:var(--azul);}
code{background:#eef1f4; padding:1px 5px; border-radius:4px; font-size:13px;}

/* --- estructura --- */
.barra{background:var(--azul); color:#fff; border-bottom:3px solid var(--naranja); padding:8px 18px; display:flex; align-items:center; gap:14px; position:sticky; top:0; z-index:20;}
.barra .marca{font-weight:700; font-size:16px; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.barra .quien{font-size:12px; text-align:right; line-height:1.3; opacity:.95;}
.barra .quien b{display:block; font-size:13px;}
.barra button{background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.3); padding:7px 12px; border-radius:6px; cursor:pointer; font-size:13px;}
.barra button:hover{background:rgba(255,255,255,.26);}
#btn-menu{display:none; font-size:18px; padding:4px 11px;}
.cuerpo{display:flex; min-height:calc(100vh - 57px);}
.menu{width:200px; background:#fff; border-right:1px solid var(--borde); padding:10px 0; flex-shrink:0;}
.menu a{display:block; padding:10px 18px; color:#444; text-decoration:none; font-size:14px; font-weight:600; border-left:4px solid transparent;}
.menu a:hover{background:var(--fondo);}
.menu a.activo{color:var(--azul); border-left-color:var(--naranja); background:#f0f0fa;}
.menu .sep{height:1px; background:var(--borde); margin:8px 0;}
main{flex:1; padding:20px; min-width:0;}

/* --- identidad del colegio --- */
.barra .logo{background:#fff; border-radius:6px; padding:3px 8px; display:flex; align-items:center; flex-shrink:0;}
.barra .logo img{height:34px; display:block;}
.acceso-logo{display:block; margin:0 auto 14px; width:190px; max-width:70%;}
.acceso-elfi{position:absolute; right:-132px; bottom:-6px; height:210px; pointer-events:none;}
.tarjeta-simple{position:relative;}
.tarjeta-simple h1{text-align:center;}
.tarjeta-simple .sub{text-align:center; color:var(--gris); margin-bottom:6px;}
.nota .nota-logo{display:block; margin:0 auto 6px; width:150px;}
@media (max-width:720px){ .acceso-elfi{display:none;} }

/* --- piezas --- */
.panel{background:#fff; border:1px solid var(--borde); border-radius:10px; padding:18px; margin-bottom:18px;}
.fila{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; margin-bottom:12px;}
.fila > .campo{flex:1; min-width:150px;}
.fila > .campo.chico{flex:0 0 130px; min-width:110px;}
.campo label, label{display:block; font-size:12px; font-weight:600; color:#555; margin-bottom:4px;}
input,select,textarea{width:100%; padding:8px 10px; border:1px solid #c5ccd4; border-radius:6px; font-size:14px; font-family:inherit; background:#fff; color:var(--texto);}
input:focus,select:focus,textarea:focus{outline:2px solid #9dbbe0; border-color:var(--azul2);}
input[type=checkbox]{width:auto; margin-right:6px;}
input.num{text-align:right;}
.btn{display:inline-block; background:var(--azul); color:#fff; border:none; padding:9px 16px; border-radius:6px; font-size:14px; font-weight:600; cursor:pointer; text-decoration:none; white-space:nowrap;}
.btn:hover{background:var(--azul2);}
.btn:disabled{background:#aab; cursor:not-allowed;}
.btn.sec{background:#fff; color:var(--azul); border:1px solid var(--azul);}
.btn.sec:hover{background:#eef3f9;}
.btn.rojo{background:var(--rojo);}
.btn.verde{background:var(--verde);}
.btn.chico{padding:5px 10px; font-size:12px;}
.btn.grande{padding:16px; font-size:20px; width:100%;}
.enlace{background:none; border:none; color:var(--azul2); cursor:pointer; font-size:inherit; text-decoration:underline; padding:0; font-family:inherit;}
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--borde); margin-bottom:16px; overflow-x:auto;}
.tabs button{background:none; border:none; padding:10px 14px; font-size:14px; font-weight:600; color:var(--gris); cursor:pointer; border-bottom:3px solid transparent; white-space:nowrap;}
.tabs button.activo{color:var(--azul); border-bottom-color:var(--naranja);}
.msg{padding:10px 12px; border-radius:6px; font-size:14px; margin-bottom:12px;}
.msg.ok{background:var(--verde-bg); color:var(--verde);}
.msg.error{background:var(--rojo-bg); color:var(--rojo);}
.msg.aviso{background:var(--ambar-bg); color:var(--ambar);}
.vacio{color:#99a; text-align:center; padding:22px 0; font-size:14px;}
.nota-pie{font-size:12px; color:var(--gris); margin-top:8px;}
.derecha{text-align:right;} .centro{text-align:center;} .negrita{font-weight:700;} .oculto{display:none !important;}
.espacio{flex:1;}

/* --- tablas --- */
.tabla-wrap{overflow-x:auto;}
table.tabla{width:100%; border-collapse:collapse; font-size:13px;}
.tabla th,.tabla td{text-align:left; padding:8px; border-bottom:1px solid var(--borde); vertical-align:middle;}
.tabla th{color:var(--gris); font-weight:600; font-size:11px; text-transform:uppercase; white-space:nowrap; background:#fafbfc;}
.tabla td.num,.tabla th.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;}
.tabla tr.clic{cursor:pointer;}
.tabla tr.clic:hover{background:#f3f7fb;}
.tabla tr.total td{font-weight:700; background:#fafbfc; border-top:2px solid var(--borde);}
.tabla tr.titulo td{font-weight:700; color:var(--azul); background:#eef3f9;}
.tabla input{padding:5px 6px; font-size:13px;}
.badge{display:inline-block; padding:2px 8px; border-radius:12px; font-size:11px; font-weight:700; white-space:nowrap;}
.badge.verde{background:var(--verde-bg); color:var(--verde);}
.badge.rojo{background:var(--rojo-bg); color:var(--rojo);}
.badge.ambar{background:var(--ambar-bg); color:var(--ambar);}
.badge.gris{background:#eceff2; color:#556;}

/* --- indicadores --- */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin-bottom:18px;}
.kpi{background:#fff; border:1px solid var(--borde); border-radius:10px; padding:14px 16px;}
.kpi .valor{font-size:23px; font-weight:700; color:var(--azul); font-variant-numeric:tabular-nums;}
.kpi .etq{font-size:12px; color:var(--gris); margin-top:3px;}
.kpi.alerta .valor{color:var(--rojo);}
.dos-col{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:18px;}
.barras .renglon{display:flex; align-items:center; gap:8px; font-size:12px; margin-bottom:5px;}
.barras .etq{width:74px; color:var(--gris);}
.barras .barra-h{flex:1; background:#eef1f4; border-radius:4px; height:16px; overflow:hidden;}
.barras .barra-h span{display:block; height:100%; background:var(--azul2);}
.barras .val{width:86px; text-align:right; font-variant-numeric:tabular-nums;}

/* --- cuadrícula de inventario (prenda × talla) --- */
.matriz{border-collapse:collapse; font-size:13px; margin-bottom:6px;}
.matriz th,.matriz td{border:1px solid var(--borde); padding:5px 6px; text-align:center; min-width:62px;}
.matriz th{background:#fafbfc; font-size:11px; color:var(--gris);}
.matriz td.prenda{text-align:left; font-weight:600; min-width:170px; background:#fff; position:sticky; left:0;}
.matriz td.cero{color:#c33; background:#fff6f5;}
.matriz td.bajo{background:var(--ambar-bg);}
.matriz input{width:62px; padding:4px; text-align:center; font-size:13px;}
.matriz input.cambio{background:#fff8d6; border-color:#d4a700;}
.matriz td.clic{cursor:pointer;} .matriz td.clic:hover{outline:2px solid var(--azul2);}

/* --- punto de venta --- */
.pos{display:grid; grid-template-columns:1fr 380px; gap:16px; align-items:start;}
.pos-buscar{display:flex; gap:8px; margin-bottom:12px;}
.pos-buscar input{font-size:16px; padding:11px;}
.prendas{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px;}
.prenda-btn{background:#fff; border:1px solid var(--borde); border-radius:8px; padding:12px 10px; cursor:pointer; text-align:left; font-size:14px; font-weight:600; color:var(--azul);}
.prenda-btn:hover{border-color:var(--azul2); background:#f3f7fb;}
.prenda-btn small{display:block; color:var(--gris); font-weight:400; font-size:11px; margin-top:3px;}
.prenda-btn.agotada{opacity:.5;}
.cat-titulo{font-size:12px; font-weight:700; color:var(--gris); text-transform:uppercase; margin:14px 0 6px;}
.tallas{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px;}
.talla-btn{background:#fff; border:1px solid var(--borde); border-radius:8px; padding:10px; cursor:pointer; text-align:center; font-size:15px; font-weight:700;}
.talla-btn:hover:not(:disabled){border-color:var(--azul2); background:#f3f7fb;}
.talla-btn:disabled{opacity:.45; cursor:not-allowed;}
.talla-btn small{display:block; font-weight:400; font-size:11px; color:var(--gris); margin-top:2px;}
.talla-btn .otra{color:var(--ambar);}
.carrito{background:#fff; border:1px solid var(--borde); border-radius:10px; padding:14px; position:sticky; top:66px;}
.carrito .linea{border-bottom:1px solid var(--borde); padding:8px 0; font-size:13px;}
.carrito .linea .nom{font-weight:600;}
.carrito .linea .ctl{display:flex; align-items:center; gap:6px; margin-top:5px;}
.carrito .linea .ctl input{width:54px; text-align:center; padding:4px;}
.carrito .linea .ctl .imp{margin-left:auto; font-weight:700; font-variant-numeric:tabular-nums;}
.carrito .origen{color:var(--ambar); font-size:11px; font-weight:700;}
.totales{margin:10px 0; font-size:14px;}
.totales div{display:flex; justify-content:space-between; padding:2px 0;}
.totales .gran{font-size:24px; font-weight:800; color:var(--azul); border-top:2px solid var(--borde); margin-top:6px; padding-top:8px;}
.cambio-grande{font-size:30px; font-weight:800; color:var(--verde); text-align:center; margin:10px 0;}

/* --- ventanas --- */
.velo{position:fixed; inset:0; background:rgba(20,30,45,.5); display:flex; align-items:flex-start; justify-content:center; padding:5vh 12px; z-index:50; overflow-y:auto;}
.modal{background:#fff; border-radius:10px; width:100%; max-width:560px; padding:20px; box-shadow:0 12px 40px rgba(0,0,0,.25);}
.modal.ancho{max-width:860px;}
.modal .pie{display:flex; gap:8px; justify-content:flex-end; margin-top:16px; flex-wrap:wrap;}
#avisos{position:fixed; right:16px; bottom:16px; z-index:80; display:flex; flex-direction:column; gap:8px; max-width:360px;}
#avisos div{padding:11px 14px; border-radius:8px; color:#fff; font-size:14px; box-shadow:0 4px 14px rgba(0,0,0,.2);}
#avisos .ok{background:var(--verde);} #avisos .error{background:var(--rojo);}

/* --- páginas sueltas: acceso, instalación, validación --- */
.pagina-simple{display:flex; align-items:center; justify-content:center; min-height:100vh; padding:16px; background:var(--azul);}
.tarjeta-simple{background:#fff; border-radius:12px; padding:28px; width:100%; max-width:420px; box-shadow:0 10px 40px rgba(0,0,0,.3);}
.tarjeta-simple label{margin-top:12px;}
.tarjeta-simple .btn{margin-top:16px; width:100%;}
.tarjeta-simple p{margin-bottom:10px; font-size:14px; line-height:1.45;}
.tarjeta-simple .tabla th{background:none; text-transform:none; font-size:13px; width:40%;}

/* --- nota de venta --- */
.nota{max-width:420px; margin:20px auto; background:#fff; padding:22px; border:1px solid var(--borde); border-radius:8px; font-size:13px;}
.nota h1{text-align:center; font-size:17px; margin-bottom:4px;}
.nota .sub{text-align:center; color:var(--gris); margin-bottom:12px;}
.nota table{width:100%; border-collapse:collapse; margin:10px 0;}
.nota td,.nota th{padding:4px 2px; border-bottom:1px dashed #ccc; text-align:left; font-size:12px;}
.nota .num{text-align:right;}
.nota .qr{text-align:center; margin-top:12px;}
.nota .qr img{width:130px; height:130px;}
.nota .estado{text-align:center; font-weight:800; color:var(--rojo); font-size:16px; border:2px solid var(--rojo); padding:4px; margin:8px 0;}

@media (max-width:900px){
  #btn-menu{display:block;}
  .menu{position:fixed; top:57px; bottom:0; left:0; z-index:30; transform:translateX(-100%); transition:transform .2s; box-shadow:4px 0 20px rgba(0,0,0,.2); overflow-y:auto;}
  .menu.abierto{transform:none;}
  main{padding:14px;}
  .pos{grid-template-columns:1fr;}
  .carrito{position:static;}
  .barra .quien{display:none;}
  .matriz td.prenda{min-width:118px; font-size:12px;}
  .matriz th,.matriz td{min-width:50px;}
  .matriz input{width:50px;}
}
@media print{
  .barra,.menu,.no-imprimir,#avisos{display:none !important;}
  body{background:#fff;} main{padding:0;}
  .panel,.nota{border:none; margin:0 auto;}
}