:root{--navy:#0b2a63;--blue:#0f5bbf;--blue2:#1e7ad6;--bg:#eef5fc;--line:#dbe5f1;--txt:#1d2b45}
*{box-sizing:border-box}
body{margin:0;font:15px/1.45 "Segoe UI",system-ui,sans-serif;background:var(--bg);color:var(--txt)}
.ico{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sp{flex:1}

/* ---------- Cabecera ---------- */
.top{display:flex;align-items:center;gap:18px;height:118px;padding:0 28px;color:#fff;overflow:hidden;position:relative;
  background:linear-gradient(90deg,#0a3a85 0%,#0f56b3 26%,rgba(11,42,99,.6) 46%,rgba(10,33,80,.25) 75%,rgba(10,33,80,.55) 100%),url(fondo.png) 0% 72%/140% auto no-repeat,#0b2a63}
.top-brand{display:flex;align-items:center;gap:18px;color:#fff;text-decoration:none;position:relative;z-index:1}
.logo-mini{width:76px;height:76px}
.top-brand b{display:block;font-size:38px;font-weight:800;line-height:1.05}
.top-brand small{display:block;font-size:19px;opacity:.9;margin-top:4px}
.top-book{position:absolute;left:52%;bottom:-6px;width:340px;opacity:.35;transform:rotate(-2deg)}
.top-user{display:flex;align-items:center;gap:10px;position:relative;z-index:1;font-size:18px}
.top-user .ico{width:32px;height:32px}.top-user .ico:last-child{width:18px;height:18px}
.top-out{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;border:1.5px solid #fff;border-radius:10px;padding:10px 18px;font-size:17px;position:relative;z-index:1}
.top-out:hover{background:#fff2}

/* ---------- Layout ---------- */
.shell{display:flex;min-height:calc(100vh - 118px)}
.side{width:240px;flex:none;position:relative;padding:42px 14px 0;display:flex;flex-direction:column;gap:12px;overflow:hidden;
  background:linear-gradient(180deg,#0f5bbf 0%,#0b4aa0 50%,#0a3d86 100%)}
.side a{display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:12px;color:#fff;text-decoration:none;font-weight:600;font-size:18px}
.side a .ico{width:30px;height:30px}
.side a:hover{background:#ffffff1f}.side a.on{background:linear-gradient(180deg,#2b8be0,#1668c7);box-shadow:0 3px 8px #0003}
.side-book{position:absolute;left:30px;bottom:64px;width:130px;opacity:.55}
.side::after{content:"";position:absolute;left:-30px;right:-60px;bottom:-40px;height:110px;border-radius:50% 50% 0 0;border-top:3px solid #ffffffaa;background:#4a95dc55}
.content{flex:1;min-width:0;padding:34px 30px 40px;background:linear-gradient(180deg,#f6faff,#e6f0fb)}

/* ---------- Encabezado de página ---------- */
.page-head{display:flex;align-items:center;gap:20px;margin-bottom:24px;color:var(--navy)}
.page-head .ico{width:84px;height:84px;color:var(--blue2);stroke-width:1.6;fill:#1e7ad622}
.page-head h1{margin:0;font-size:42px;line-height:1.1;font-weight:800}
.page-head p{margin:2px 0 0;font-size:21px;color:#3a4a66}
h1{margin:.2em 0 .6em;color:var(--navy)}h3{margin:0 0 10px;color:var(--navy)}

/* ---------- Tarjetas / formularios ---------- */
.card{background:#fff;border-radius:16px;padding:20px;box-shadow:0 3px 14px rgba(20,60,120,.12);margin-bottom:18px;border:1px solid #e3ecf7}
form.filters{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end}
label{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--navy);margin-bottom:6px;font-weight:500}
label .ico{color:var(--blue);width:22px;height:22px}
input,select,textarea{font:inherit;padding:11px 14px;border:1.5px solid #cfd6e1;border-radius:10px;width:100%;background:#fff;color:var(--txt)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue2);box-shadow:0 0 0 3px #1e7ad633}
.filters>div{flex:1;min-width:150px}.filters>div.big{flex:3;min-width:240px}
button,.btn{font:inherit;font-weight:600;background:var(--navy);color:#fff;border:0;border-radius:10px;padding:11px 20px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
button:hover,.btn:hover{background:#12408f}
.btn.sec{background:#e9f0fa;color:var(--navy);border:1px solid #c9d8ec;padding:6px 14px}.btn.sec:hover{background:#d8e6f7}
.btn.green{background:#2e7d32}.btn.red{background:#b3261e}button.green{background:#2e7d32}button.red{background:#b3261e}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}.grid .wide{grid-column:1/-1}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.muted{color:#6a7890;font-size:14px}

/* ---------- Tabla ---------- */
.tbl{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 3px 14px rgba(20,60,120,.12);border:1px solid #e3ecf7}
table{width:100%;border-collapse:collapse;background:#fff}
th,td{padding:12px 14px;border-bottom:1px solid #e6edf6;text-align:left;vertical-align:top}
thead th,tr:first-child>th{background:var(--navy);color:#fff;font-weight:600;font-size:16px;border:0;white-space:nowrap}
th .ico{width:21px;height:21px;vertical-align:-4px;margin-right:8px}
tbody tr:hover td{background:#f4f8fd}.num{text-align:right;white-space:nowrap}th.num{text-align:left}
.empty{text-align:center;padding:44px 20px;color:#5b6a84}
.empty .ico{width:96px;height:96px;color:var(--navy);fill:#cfe3f6;stroke-width:1.4;background:#e3eefa;border-radius:50%;padding:18px}
.empty h2{margin:10px 0 4px;color:#33425e;font-size:28px}

.badge{padding:3px 10px;border-radius:12px;font-size:13px;color:#fff;white-space:nowrap;font-weight:600}
.b-disponible{background:#2e7d32}.b-reservado{background:#e08a00}.b-entregado{background:#5b6a84}.b-baja{background:#9aa5b8}
.flash{padding:12px 16px;border-radius:10px;margin-bottom:16px}.flash.ok{background:#d9efd9}.flash.err{background:#f6d4d1}

/* ---------- Paginador ---------- */
.pager{display:flex;align-items:center;margin-top:18px;gap:12px}
.pgs{display:flex;gap:8px}
.pg{min-width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #c9d3e2;border-radius:10px;background:#fff;color:var(--navy);text-decoration:none;font-weight:700;font-size:18px;box-shadow:0 1px 3px #0001}
a.pg:hover{background:#eaf2fc}.pg.on{background:var(--blue);color:#fff;border-color:var(--blue)}.pg.dis{opacity:.45}

/* ---------- Responsive ---------- */
html{-webkit-text-size-adjust:100%}
img,svg{max-width:100%}
.tbl{overflow-x:auto}
.top-user b{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Tablet */
@media(max-width:1100px){
  .side{width:200px}.side a{font-size:16px;padding:14px 16px;gap:12px}.side a .ico{width:26px;height:26px}
  .top{height:100px;padding:0 20px}.shell{min-height:calc(100vh - 100px)}
  .top-brand b{font-size:30px}.top-brand small{font-size:16px}.logo-mini{width:62px;height:62px}.top-book{display:none}
  .content{padding:26px 20px 36px}.page-head .ico{width:64px;height:64px}.page-head h1{font-size:34px}.page-head p{font-size:18px}
}
/* Menú horizontal */
@media(max-width:820px){
  .top{height:auto;min-height:70px;padding:12px 14px;gap:10px}
  .top-brand{gap:10px}.top-brand b{font-size:21px}.top-brand small{font-size:12px}.logo-mini{width:44px;height:44px}
  .top-user{font-size:15px}.top-user .ico:first-child{width:28px;height:28px}.top-user .ico:last-child{display:none}.top-user b{max-width:90px}
  .top-out{padding:8px 12px;font-size:15px}
  .shell{flex-direction:column;min-height:0}
  .side{width:auto;flex-direction:row;padding:8px 10px;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .side a{padding:10px 14px;font-size:15px;white-space:nowrap;gap:8px}.side a .ico{width:22px;height:22px}
  .side-book,.side::after{display:none}
  .content{padding:18px 12px 30px}
  .page-head{gap:12px;margin-bottom:16px}.page-head .ico{width:46px;height:46px}.page-head h1{font-size:26px;word-break:break-word}.page-head p{font-size:15px}
  .card{padding:14px;border-radius:12px}
  form.filters{gap:10px}.filters>div,.filters>div.big{flex:1 1 100%;min-width:0}
  form.filters>button,.card.filters>button{width:100%;justify-content:center}
}
/* Tablas como tarjetas */
@media(max-width:760px){
  table.stack,table.stack tbody{display:block}
  table.stack thead{display:none}
  table.stack tr{display:block;padding:10px 12px;border-bottom:8px solid var(--bg);background:#fff}
  table.stack td{display:flex;gap:12px;justify-content:space-between;align-items:flex-start;padding:5px 0;border:0;text-align:right}
  table.stack td::before{content:attr(data-l);flex:none;font-weight:600;color:var(--navy);text-align:left}
  table.stack td.t-main{font-weight:700;font-size:16px;text-align:left;display:block;padding-bottom:6px}
  table.stack td.t-main::before{display:none}
  table.stack td.t-act{display:block;text-align:left;padding-top:8px}
  table.stack td.t-act .btn{width:100%;justify-content:center;padding:10px}
  table.stack td .muted{text-align:right}
  table.stack td form.filters{flex-wrap:nowrap}
  tbody tr:hover td{background:none}
  .empty{padding:30px 12px}.empty h2{font-size:22px}
}
/* Celular chico */
@media(max-width:520px){
  .pager{flex-wrap:wrap;justify-content:center}.pager .sp{display:none}.pager .muted{width:100%;text-align:center}
  .pg{min-width:40px;height:40px;font-size:16px}.pgs{gap:6px}
  .actions .btn,.actions button{flex:1 1 100%;justify-content:center}
  .grid{grid-template-columns:1fr}
  .top-user b{display:none}
}
@media(hover:none){a.pg:hover,.btn:hover,button:hover{filter:none}}

.top-book{display:none}

.b-admin{background:#0f5bbf}.b-operador{background:#5b6a84}
label.switch{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1.5px solid #cfd6e1;border-radius:10px;background:#fff;cursor:pointer;margin:0;font-weight:400}
label.switch input{width:20px;height:20px;padding:0;flex:none}
.btn.sec .ico{width:18px;height:18px}

.pw{position:relative}.pw input{padding-right:48px}
.pw button.eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;color:#333;padding:6px;border-radius:50%;line-height:0}
.pw button.eye:hover{background:#0001}.pw button.eye .ico{width:24px;height:24px}
.pw button.eye.on .ico{stroke:var(--blue)}

/* Encabezados ordenables */
th a.sort{display:flex;align-items:center;gap:6px;color:inherit;text-decoration:none;white-space:nowrap}
th a.sort .ico{width:21px;height:21px;margin:0}
th a.sort .arr{font-size:11px;opacity:.45;margin-left:2px}
th a.sort:hover .arr{opacity:.9}th a.sort.on .arr{opacity:1;color:#8cc4ff}
th.num a.sort{justify-content:flex-start}