/* Rentame · sistema visual del template (ESPECIFICACION-RENTAME.md §1). Los componentes llevan estilos inline como en el prototipo. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#F2F2F2;font-family:'Alexandria',system-ui,-apple-system,sans-serif;color:#181818;-webkit-font-smoothing:antialiased;text-wrap:pretty;font-size:13.5px;line-height:1.5}
a{color:#026CFC;text-decoration:none}a:hover{color:#0450C9}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
input[type=range]{accent-color:#181818}
::-webkit-scrollbar{width:11px;height:11px}::-webkit-scrollbar-thumb{background:#D5D5D5;border-radius:99px;border:3px solid transparent;background-clip:content-box}::-webkit-scrollbar-track{background:transparent}
.ms{font-family:'Material Symbols Rounded';font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';font-feature-settings:'liga';-webkit-font-smoothing:antialiased;font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;vertical-align:middle}
.ms.fill{font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}
.mono{font-family:'IBM Plex Mono',monospace}
.lbl{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:#B0B0B6;font-weight:600}
[x-cloak]{display:none!important}
@keyframes rmspin{to{transform:rotate(360deg)}}
@keyframes rmup{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes rmring{0%{transform:scale(.7);opacity:.55}80%{transform:scale(1.9);opacity:0}100%{opacity:0}}
.rmup{animation:rmup .4s ease-out}
.spin{animation:rmspin .8s linear infinite}
/* hovers del prototipo (style-hover) */
.hv-dark:hover{background:#000!important}
.hv-border:hover{border-color:#181818!important}
.hv-lift:hover{border-color:#181818!important;transform:translateY(-2px)}
.hv-lift1:hover{background:#000!important;transform:translateY(-1px)}
.hv-soft:hover{background:#FAFAFA!important}
.btn-p{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#181818;color:#fff;font-weight:500;border-radius:999px;padding:9px 15px;font-size:12.5px;white-space:nowrap}
.btn-p:hover{background:#000}
.btn-p:disabled,.btn-p.dis{background:#EDEDED;color:#B0B0B6;cursor:not-allowed}
.btn-s{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#fff;border:1px solid #E4E4E4;color:#181818;font-weight:500;border-radius:999px;padding:8px 13px;font-size:12.5px;white-space:nowrap}
.btn-s:hover{border-color:#181818}
.btn-m{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:#181818;color:#fff;font-weight:500;border-radius:16px;padding:16px;font-size:15px}
.btn-m:hover{background:#000}
.btn-m:disabled,.btn-m.dis{background:#EDEDED;color:#B0B0B6;cursor:not-allowed}
.btn-ms{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:#fff;border:1.5px solid #E6E6E6;color:#181818;font-weight:500;border-radius:16px;padding:14px;font-size:14.5px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;border:1px solid #E6E6E6;background:#fff;color:#5E5E64;font-size:12.5px;white-space:nowrap}
.chip.on{background:#181818;border-color:#181818;color:#fff;font-weight:500}
.chip.on-blue{background:#E5F0FF;border-color:#B7D4FE;color:#0450C9;font-weight:500}
.pill{display:inline-block;padding:3px 9px;border-radius:999px;font-size:10.5px;font-weight:600;white-space:nowrap}
.pill.g{background:#E3F3EB;color:#0B6742}.pill.b{background:#E5F0FF;color:#0450C9}.pill.a{background:#FBF3E2;color:#7A5A18}.pill.r{background:#FBE9E6;color:#A32A1E}.pill.n{background:#F3F4F6;color:#5E5E64}
.av{display:inline-grid;place-items:center;border-radius:999px;font-weight:600;flex:none}
.opt{display:flex;align-items:center;gap:12px;padding:14px;border-radius:16px;border:1.5px solid #EDEDED;background:#fff;cursor:pointer;width:100%;text-align:left}
.opt.on{border-color:#181818;background:#FAFAFA}
.opt .ms{color:#B0B0B6}.opt.on .ms{color:#181818}
.opt.off{opacity:.5;cursor:not-allowed}
.line{display:flex;align-items:baseline;gap:8px;font-size:12.5px}.line i{flex:1;border-bottom:1px dotted #E4E4E4;min-width:12px}
.sw{position:relative;width:46px;height:27px;border-radius:999px;background:#E0E0E4;transition:background .2s;flex:none}.sw:after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:999px;background:#fff;transition:left .2s}.sw.on{background:#181818}.sw.on:after{left:22px}
.inp{width:100%;border:1.5px solid #E6E6E6;border-radius:14px;padding:12px 14px;background:#fff;font-size:13.5px;outline:none}.inp:focus{border-color:#181818}
.inp-d{width:100%;border:1px solid #E6E6E6;border-radius:12px;padding:9px 12px;background:#fff;font-size:12.5px;outline:none}.inp-d:focus{border-color:#181818}
.ta{width:100%;border:1.5px solid #E6E6E6;border-radius:14px;padding:12px 14px;background:#fff;font-size:13.5px;outline:none;min-height:96px;resize:vertical;line-height:1.5}
.card-d{max-width:100%;margin:0 auto;background:#fff;border-radius:26px;overflow:hidden;box-shadow:0 1px 2px rgba(24,24,24,.04),0 20px 44px -26px rgba(24,24,24,.22)}
.page-d{padding:18px 30px 40px}
@media(max-width:760px){.page-d{padding:0}.card-d{border-radius:0;box-shadow:none}.hide-m{display:none!important}}
.ph-shell{margin:0 auto;background:#fff;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.ph-in{flex:1;display:flex;flex-direction:column;background:#fff;min-height:100vh;min-height:100dvh}
.ph-back{color:#181818}.ph-back:hover{color:#181818}
/* Pantallas de flujo (publicar, pago, alquiler, entrega, reclamo, reseña, verificación): en el celular ocupan toda la pantalla; en escritorio son una columna centrada, SIN mockup de teléfono */
@media(min-width:761px){
.ph-shell{max-width:560px;margin:28px auto 48px;border-radius:26px;box-shadow:0 1px 2px rgba(24,24,24,.04),0 20px 44px -26px rgba(24,24,24,.22);min-height:0;overflow:hidden}
.ph-in{min-height:calc(100vh - 76px);min-height:calc(100dvh - 76px)}
}
.ph-head{flex:none;padding:14px 18px 12px;display:flex;align-items:center;gap:12px}
.ph-back{width:34px;height:34px;border-radius:999px;background:#F4F4F5;display:grid;place-items:center;flex:none}
.ph-body{flex:1;padding:0 18px 16px}
.ph-foot{flex:none;padding:12px 18px 22px;border-top:1px solid #F2F2F2;background:#fff;position:sticky;bottom:0;z-index:5}
.flash{padding:12px 14px;border-radius:14px;margin:0 0 14px;font-size:12.5px;line-height:1.5}
.flash.ok{background:#E3F3EB;color:#0B6742}.flash.error{background:#FBE9E6;color:#A32A1E}.flash.info{background:#E5F0FF;color:#0B4694}.flash.warn{background:#FBF3E2;color:#7A5A18}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#181818;color:#fff;padding:11px 16px;border-radius:14px;font-size:13px;z-index:60;max-width:92vw;box-shadow:0 18px 40px -28px rgba(24,24,24,.5)}
.sr{position:absolute;left:-9999px}
table.t{width:100%;border-collapse:collapse;font-size:12.5px}table.t th{text-align:left;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:#B0B0B6;font-weight:600;padding:8px 10px;border-bottom:1px solid #F0F0F0}table.t td{padding:10px;border-bottom:1px solid #F4F4F5;vertical-align:top}
.sig{border:1.5px dashed #E0E0E4;border-radius:14px;background:#FAFAFA;touch-action:none;width:100%;height:140px}
.slot{aspect-ratio:1/1;border:1.5px dashed #E0E0E4;background:#FAFAFA;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;position:relative;overflow:hidden;cursor:pointer}
.slot.on{border:1.5px solid #181818}.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slot .stamp{position:absolute;left:6px;bottom:6px;font-family:'IBM Plex Mono',monospace;font-size:9.5px;color:#fff;background:rgba(24,24,24,.8);padding:3px 6px;border-radius:6px}
.slot .chk{position:absolute;top:6px;right:6px;color:#fff;font-variation-settings:'FILL' 1;font-size:20px;text-shadow:0 1px 3px rgba(0,0,0,.4)}
/* ===== Componentes de gestión (pantallas fuera del prototipo: admin, cuenta, legales). Misma línea: Alexandria, radios 14–18, ink #181818 ===== */
.legacy{padding:22px 24px 28px}
.legacy h1{font-size:19px;font-weight:600;letter-spacing:-.03em;margin:0 0 6px}
.legacy h2{font-size:15px;font-weight:600;letter-spacing:-.025em;margin:22px 0 10px}
.legacy h3{font-size:13.5px;font-weight:600;letter-spacing:-.02em;margin:14px 0 8px}
.legacy p{margin:6px 0 10px;font-size:13px;line-height:1.55;color:#5E5E64}
.legacy p.lead{color:#181818;font-size:13.5px}
.legacy ul,.legacy ol{font-size:13px;line-height:1.6;color:#5E5E64;padding-left:20px}
.legacy label{display:block;font-size:11px;font-weight:600;letter-spacing:.02em;color:#5E5E64;margin:12px 0 5px}
.legacy input[type=text],.legacy input[type=email],.legacy input[type=password],.legacy input[type=number],.legacy input[type=tel],.legacy input[type=date],.legacy input[type=datetime-local],.legacy input[type=search],.legacy select,.legacy textarea{width:100%;border:1.5px solid #E6E6E6;border-radius:12px;padding:10px 12px;background:#fff;font-size:13px;outline:none}
.legacy input:focus,.legacy select:focus,.legacy textarea:focus{border-color:#181818}
.legacy textarea{min-height:90px;line-height:1.5;resize:vertical}
.legacy table{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px;border:1px solid #EDEDED;border-radius:16px;overflow:hidden}
.legacy th{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:#9A9AA0;font-weight:600;background:#FAFAFA;padding:11px 14px;text-align:left;border-bottom:1px solid #F0F0F0}
.legacy td{padding:11px 14px;border-bottom:1px solid #F4F4F5;vertical-align:top;line-height:1.4}
.legacy tr:last-child td{border-bottom:0}
.legacy img{max-width:100%}
.card{border:1px solid #EDEDED;border-radius:18px;background:#fff;padding:18px}
.card.dark{background:#181818;color:#fff;border-color:#181818}
.grid{display:grid;gap:12px}.grid.c2{grid-template-columns:repeat(2,1fr)}.grid.c3{grid-template-columns:repeat(3,1fr)}.grid.c4{grid-template-columns:repeat(4,1fr)}
@media(max-width:860px){.grid.c3,.grid.c4{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.grid.c2,.grid.c3,.grid.c4{grid-template-columns:1fr}}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.between{justify-content:space-between}.right{margin-left:auto}
.muted{color:#8A8A90}.small{font-size:12.5px}.tiny{font-size:11px}.b{font-weight:600}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:#181818;color:#fff;font-weight:500;border-radius:999px;padding:9px 15px;font-size:12.5px;white-space:nowrap;border:1px solid #181818;cursor:pointer;line-height:1.2}
.btn:hover{background:#000;color:#fff}.btn.sec{background:#fff;color:#181818;border-color:#E4E4E4}.btn.sec:hover{border-color:#181818;background:#fff}
.btn.ghost{background:transparent;border-color:transparent;color:#5E5E64}.btn.ghost:hover{background:#F4F4F5;color:#181818}
.btn.sm{padding:6px 11px;font-size:11.5px}.btn.lg{padding:14px 22px;font-size:14.5px;border-radius:16px}
.btn.ok{background:#0E7A50;border-color:#0E7A50}.btn.ok:hover{background:#0B6742}.btn.danger{background:#fff;color:#A32A1E;border-color:#F5D9D4}.btn.danger:hover{background:#FEF7F6}
.btn[disabled],.btn.disabled{background:#EDEDED;color:#B0B0B6;border-color:#EDEDED;cursor:not-allowed}.btn.block{width:100%}
.tag{display:inline-block;padding:3px 9px;border-radius:999px;background:#F3F4F6;color:#5E5E64;font-size:10.5px;font-weight:600;white-space:nowrap}
.tag.ok{background:#E3F3EB;color:#0B6742}.tag.warn{background:#FBF3E2;color:#7A5A18}.tag.danger{background:#FBE9E6;color:#A32A1E}.tag.info{background:#E5F0FF;color:#0450C9}
.badge{display:inline-block;min-width:18px;padding:0 6px;border-radius:999px;background:#C93A2B;color:#fff;font-size:10.5px;font-weight:600;line-height:18px;text-align:center}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:5px 14px;font-size:12.5px;margin:0}.kv dt{color:#8A8A90}.kv dd{margin:0;font-weight:500}
.stat{padding:17px;border-radius:18px;border:1px solid #EDEDED;background:#fff}.stat .n{font-size:24px;font-weight:600;letter-spacing:-.04em}.stat .l{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:#9A9AA0;font-weight:600;margin-top:4px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.pill-row{display:flex;gap:8px;flex-wrap:wrap}
.pill-row .pill,a.pill{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;border:1px solid #E6E6E6;background:#fff;color:#5E5E64;font-size:12.5px;font-weight:400}
.pill-row .pill.on,a.pill.on{background:#181818;border-color:#181818;color:#fff;font-weight:500}
.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}.photos>div{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:#F4F4F5}.photos img{width:100%;height:100%;object-fit:cover}.photos button{position:absolute;top:6px;right:6px;border:0;background:rgba(24,24,24,.72);color:#fff;border-radius:8px;padding:2px 7px;cursor:pointer;font-size:12px}
.progress{height:5px;background:#F0F0F0;border-radius:999px;overflow:hidden}.progress i{display:block;height:100%;background:#0E7A50;border-radius:999px}
.two{display:grid;grid-template-columns:1fr 360px;gap:20px}@media(max-width:860px){.two{grid-template-columns:1fr}}
.sticky{position:sticky;top:20px}
.timeline{list-style:none;padding:0;margin:0}.timeline li{padding:5px 0 5px 16px;border-left:2px solid #EDEDED;position:relative;font-size:12px;color:#5E5E64}.timeline li:before{content:"";position:absolute;left:-6px;top:10px;width:10px;height:10px;border-radius:50%;background:#181818}
.tabs{display:flex;gap:2px;border-bottom:1px solid #F0F0F0;margin-bottom:16px;overflow-x:auto}.tabs a{padding:12px 14px 10px;font-size:13px;color:#8A8A90;border-bottom:2px solid transparent;white-space:nowrap}.tabs a.on{color:#181818;font-weight:600;border-color:#181818}
.hint{font-size:11.5px;color:#8A8A90;margin-top:4px}.err{color:#A32A1E;font-size:12px;margin-top:6px}
.stars{color:#E0A800;font-size:12.5px;font-weight:600}
.msgs{display:flex;flex-direction:column;gap:8px;max-height:60vh;overflow:auto;padding:8px 0}.msg{max-width:78%;padding:9px 13px;border-radius:16px;background:#F4F4F5;white-space:pre-wrap;font-size:13px}.msg.me{align-self:flex-end;background:#181818;color:#fff}.msg time{display:block;font-size:10.5px;opacity:.6;margin-top:2px}
.legacy #map{height:280px;border-radius:14px;border:1px solid #EDEDED}
.dims label{display:flex;justify-content:space-between;align-items:center;margin:8px 0}.dims .r{display:flex;gap:4px}.dims .r button{border:1px solid #E6E6E6;background:#fff;width:34px;height:34px;border-radius:10px;cursor:pointer}.dims .r button.on{background:#FBF3E2;border-color:#E0A800;color:#7A5A18}
[x-cloak]{display:none!important}
/* ===== Mobile: la nav de escritorio en una sola fila, tarjeta sin márgenes, tablas con scroll ===== */
@media (max-width: 640px) {
.page-d { padding: 0 !important; }
.card-d { border-radius: 0 !important; box-shadow: none !important; }
.nav-d { padding: 12px 14px !important; gap: 10px !important; flex-wrap: wrap !important; }
.nav-d .loc-btn { order: 3; flex: 1 1 100% !important; justify-content: center; padding: 10px 12px !important; }
.nav-d > a.btn-p { padding: 8px 13px !important; }
.legacy { padding: 18px 14px 24px; }
.legacy table { display: block; overflow-x: auto; white-space: nowrap; }
.two { grid-template-columns: 1fr !important; }
.sticky { position: static !important; }
}
.ovl{display:flex}
/* ===== Movimiento: entradas al hacer scroll, hover, pulsación, carga de imágenes. Sutil, rápido, y apagado si el sistema pide menos movimiento ===== */
.js [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1)}
[data-reveal].in{opacity:1;transform:none}
.js [data-reveal="left"]{transform:translateX(-16px)}.js [data-reveal="scale"]{transform:scale(.96)}
[data-reveal-delay="1"]{transition-delay:.08s}[data-reveal-delay="2"]{transition-delay:.16s}[data-reveal-delay="3"]{transition-delay:.24s}[data-reveal-delay="4"]{transition-delay:.32s}[data-reveal-delay="5"]{transition-delay:.4s}
.hv-lift{transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s,border-color .18s}
.hv-lift:hover{transform:translateY(-3px);box-shadow:0 14px 30px -18px rgba(24,24,24,.35)}
.hv-lift1:hover{transform:translateY(-2px)}
.btn-p,.btn-s,.btn-m,.chip,.opt,button.hv-dark,a.hv-dark{transition:transform .12s ease,background .18s,border-color .18s,color .18s,box-shadow .18s}
.btn-p:active,.btn-m:active,.btn-s:active,.chip:active,.hv-dark:active{transform:scale(.97)}
.btn-p:hover,.btn-m:hover{box-shadow:0 10px 24px -14px rgba(24,24,24,.6)}
.js img[data-fade]{opacity:0;transition:opacity .45s ease}img[data-fade].ld{opacity:1}
.skel{background:linear-gradient(90deg,#F0F0F0 25%,#F7F7F8 50%,#F0F0F0 75%);background-size:200% 100%;animation:skel 1.2s infinite}
@keyframes skel{0%{background-position:200% 0}100%{background-position:-200% 0}}
.rmup{animation:rmup .32s cubic-bezier(.2,.7,.2,1)}@keyframes rmup{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.hero-glow{position:relative;overflow:hidden}
.hero-glow:before{content:"";position:absolute;inset:-40% -20% auto -20%;height:80%;background:radial-gradient(60% 60% at 50% 40%,rgba(2,108,252,.10),rgba(2,108,252,0) 70%);animation:glow 9s ease-in-out infinite alternate;pointer-events:none}
@keyframes glow{from{transform:translateX(-6%) scale(1)}to{transform:translateX(6%) scale(1.08)}}
.pulse-dot{position:relative}.pulse-dot:after{content:"";position:absolute;inset:-4px;border-radius:999px;border:2px solid currentColor;opacity:.5;animation:pulse 1.8s ease-out infinite}
@keyframes pulse{0%{transform:scale(.6);opacity:.6}100%{transform:scale(1.5);opacity:0}}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){.js [data-reveal]{opacity:1;transform:none;transition:none}.hero-glow:before,.pulse-dot:after,.skel{animation:none}html{scroll-behavior:auto}.hv-lift:hover,.hv-lift1:hover{transform:none}}
.nav-m{display:none}
/* barra mínima con la marca sobre las pantallas de flujo (solo escritorio; en el celular manda la cabecera del prototipo) */
.ph-top{display:none}
@media(min-width:761px){.ph-top{display:flex;align-items:center;justify-content:space-between;max-width:560px;margin:22px auto -10px;padding:0 8px}}
/* alta */
.alta-tel::placeholder{color:#C4C4CA}
.alta-opt:hover{border-color:#B8B8BE!important}
.alta-geo:hover{border-color:#181818!important}
.alta-geo:disabled{opacity:.75;cursor:progress}
/* cuenta */
@media(max-width:480px){.hide-xs{display:none!important}}
@media(max-width:640px){.cta-head{padding:20px!important;border-radius:20px!important}}
/* calendario (panel/calendario): la grilla del mes nunca desborda su columna; en el celular las celdas se achican en vez de recortarse */
.cal-wrap{display:flex;gap:24px;padding:22px 24px 28px;flex-wrap:wrap}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;container-type:inline-size}
.cal-day{aspect-ratio:1;border-radius:12px;padding:8px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;text-align:left;min-width:0;overflow:hidden;cursor:pointer;transition:border-color .18s}
.cal-day .cal-n{font-size:13px;line-height:1.1}
.cal-day .cal-p{font-size:10.5px;font-weight:500;line-height:1.1;max-width:100%;overflow:hidden;text-overflow:ellipsis;-webkit-hyphens:manual;hyphens:manual}
.cal-day.free:hover{border-color:#181818!important}
.cal-day.bl:hover{border-color:#B0B0B6!important}
.cal-day:disabled{cursor:default}
.cal-day.past{opacity:.55}
.cal-sel{appearance:none;-webkit-appearance:none;border:1px solid #E4E4E4;border-radius:999px;padding:7px 32px 7px 13px;font-size:12.5px;font-weight:500;color:#181818;background:#fff;max-width:100%;text-overflow:ellipsis;outline:none;font-family:inherit;cursor:pointer;transition:border-color .18s}
.cal-sel:hover,.cal-sel:focus{border-color:#181818}
@media(max-width:520px){
.cal-wrap{padding:18px 14px 24px;gap:20px}
.cal-grid{gap:4px}
.cal-day{padding:5px 4px 4px;border-radius:9px}
.cal-day .cal-n{font-size:12px}
.cal-day .cal-p{font-size:9px;letter-spacing:-.01em}
}
/* pestañas del panel en el celular: se desplazan, y un degradado a la derecha avisa que hay más */
.pan-tabs-w{position:relative}
.pan-tabs{position:relative;scrollbar-width:none}.pan-tabs::-webkit-scrollbar{display:none}
@media(max-width:640px){
.pan-tabs{scroll-snap-type:x proximity;scroll-padding:0 24px}.pan-tabs a{scroll-snap-align:start;padding:14px 10px 12px!important}
.pan-tabs-w:after{content:"";position:absolute;top:0;right:0;bottom:1px;width:40px;background:linear-gradient(90deg,rgba(255,255,255,0),#fff 75%);pointer-events:none;transition:opacity .2s}
.pan-tabs-w.end:after{opacity:0}
}
/* ingresos (panel/ingresos): en el celular la tabla pasa a dos columnas (alquiler | neto + estado) y esconde el bruto; el nombre del locatario y la línea mono nunca parten la fila */
.ing-row{transition:background .15s}.ing-row:hover,.ing-more:hover{background:#F5F5F6!important}
.ing-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ing-c{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ing-csv-s{display:none}
@media(max-width:560px){
.ing-csv-l{display:none}.ing-csv-s{display:inline}
.ing-head,.ing-row{grid-template-columns:minmax(0,1fr) auto!important;gap:3px 12px!important}
.ing-row{grid-template-areas:"al neto" "al est"}
.ing-row>.ing-al{grid-area:al}.ing-row>.ing-neto{grid-area:neto;align-self:end}.ing-row>.ing-est{grid-area:est;align-self:start}
.ing-bruto,.ing-head>.ing-est{display:none!important}
}
/* solicitudes (panel/solicitudes): la columna de acciones cambia entre «Aceptar / No puedo» y el campo de motivo del rechazo; en el celular la ficha de reputación va en dos filas: avatar + nombre + datos arriba y «Te queda» abajo en una sola línea */
.sol-acts-in{display:flex;flex-direction:column;gap:8px}
@media(max-width:560px){
.sol-queda{flex:1 1 100%!important;text-align:left!important;display:flex;align-items:baseline;gap:8px;margin-top:-4px}
.sol-queda .sol-neto{margin-top:0!important}
}
/* mensajes (/mensajes): en escritorio las dos columnas de 620 px del prototipo; en el celular una sola columna: /mensajes es la lista a ancho completo y /mensajes/{uuid} el hilo, que ocupa lo que queda de pantalla debajo de la barra del panel (--msg-top la mide un script) */
.msg-back{display:none}
.msg-q{transition:border-color .18s,color .18s}.msg-q:hover{border-color:#181818!important;color:#181818!important}
@media(max-width:760px){
.msg-wrap{height:auto!important}
.msg-wrap.is-thread{height:calc(100vh - var(--msg-top,190px))!important;height:calc(100dvh - var(--msg-top,190px))!important;min-height:420px}
.msg-wrap.is-empty{min-height:320px}
.msg-wrap.is-thread .msg-list,.msg-wrap.is-empty .msg-list,.msg-wrap.is-inbox .msg-thread{display:none!important}
.msg-list{width:100%!important;border-right:0!important;overflow:visible!important}
.msg-back{display:inline-flex}
.msg-head{padding:10px 16px 12px!important}
.msg-box{padding:16px 14px!important}
.msg-foot{padding:12px 14px!important}
}
/* perfil (/u/{uuid}) y el modo «outside» del layout: en el celular la columna de contenido queda inset 12 px sobre el gris (#F2F2F2), como en el prototipo; la nav sigue a sangre */
@media(max-width:760px){
.page-d.page-out{padding:0 12px 28px!important}
.page-d.page-out>.card-d{margin:0 -12px 18px!important;max-width:none!important}
}
/* perfil: cuando el bloque del puntaje baja a su propia fila (celular), va alineado a la izquierda como el resto del encabezado */
@media(max-width:640px){.perfil-score{text-align:left!important;flex:1 1 100%!important}.perfil-score>div:first-child{justify-content:flex-start!important}}
/* reclamo: el monto sugerido va en gris de placeholder; los textareas del reclamo no muestran el tirador de resize */
.rec-monto::placeholder{color:#B0B0B6}
.rec-ta{resize:none!important}
/* admin (/admin): armazón de operaciones. Escritorio: barra negra de una sola fila con 4 pestañas + «Más» desplegable. Celular: la fila de pestañas baja entera debajo de la marca y desliza en horizontal (todas inline, sin desplegable). La cola de reclamos abandona el grid de 5 columnas: el encabezado se oculta y cada fila queda como ficha (caso + monto arriba, bien y partes al medio, SLA + Resolver abajo) */
.adm-more-inline{display:none}
.adm-more-menu{display:flex;flex-direction:column;gap:1px} /* el display va en clase: x-show borra el display inline al mostrar */
.adm-more-a:hover{background:#F2F2F2!important;color:#181818!important}
@media(max-width:760px){
.adm-bar{padding:13px 16px!important;gap:12px!important}
.adm-tabs{flex:1 1 100%;order:9;overflow-x:auto;gap:18px!important;padding-bottom:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.adm-tabs::-webkit-scrollbar{display:none}
.adm-more-dd{display:none!important}.adm-more-inline{display:contents}
.adm-pad{padding:18px 16px 24px!important}
.adm-cola-head{flex-wrap:wrap}
.adm-head{display:none!important}
.adm-fila{grid-template-columns:minmax(0,1fr) auto!important;grid-template-areas:"caso monto" "bien bien" "sla act"!important;gap:8px 12px!important;padding:14px 16px!important}
.adm-caso{grid-area:caso}.adm-bien{grid-area:bien}.adm-monto{grid-area:monto;text-align:right}.adm-sla{grid-area:sla}.adm-act{grid-area:act}
}
/* home */
/* La tarjeta blanca va a ancho completo en escritorio (pedido de Agustín, 02/09); el aire lo da el padding de .page-d. En el celular va a sangre, sin radio ni sombra. */
@media(max-width:760px){
.card-d{max-width:100%}
/* la fila de píldoras «Alquilar · Publicar · Cómo funciona · Respaldo» aparece en el MISMO corte en que .hide-m esconde los enlaces de escritorio (antes había un hueco 641-760 sin ningún enlace) */
.nav-m{display:flex!important;gap:4px;padding:0 10px 8px;overflow-x:auto;scrollbar-width:none}
.nav-m a{padding:7px 10px;border-radius:999px;font-size:12.5px;color:#5E5E64;white-space:nowrap}
.nav-m a.on{background:#F3F4F6;color:#181818;font-weight:500}
}
/* buscar */
/* Barra de filtros de /buscar: la fila de categorías scrollea sola (sin barra) y avisa con un degradé de 32 px cuando hay más chips a la derecha; los modos de entrega y los controles de precio/radio son grupos fijos que, si no entran, bajan de fila. En el celular cada grupo ocupa su propia fila y arranca en x=0, así ningún chip queda 100% fuera de vista. */
.fscroll{position:relative}
.fscroll-in{scrollbar-width:none;-webkit-overflow-scrolling:touch}
.fscroll-in::-webkit-scrollbar{display:none}
.fscroll::after{content:'';position:absolute;top:0;right:0;bottom:0;width:32px;background:linear-gradient(90deg,rgba(255,255,255,0),#fff 70%);pointer-events:none;opacity:0;transition:opacity .2s}
.fscroll.more::after{opacity:1}
/* (r2: las reglas móviles de la barra viven al final, bajo «buscar r2»: la barra es UNA fila también en el celular) */
/* nav con buscador (/buscar): «+ Publicar» queda en el celular como botón negro circular de 36 px sólo con el ícono; el campo de búsqueda cede base para que logo + buscador + Publicar + Ingresar/avatar entren en una fila */
@media(max-width:760px){
.nav-d > a.pub-m{width:36px;height:36px;padding:0!important;justify-content:center;flex:none}
.nav-d form[role=search]{flex-basis:120px!important}
}
/* pago */
/* Confirmar y pagar: en el celular la pantalla mide exactamente el alto de la ventana y el contenido scrollea ADENTRO (.ph-body), como en el prototipo; así el pie con el botón nunca se pinta encima de la casilla legal. En escritorio la columna crece con el contenido. */
.pago-shell{flex:1;min-height:0}
@media(max-width:760px){.pago-shell{height:100vh;height:100dvh;flex:none}}
/* devolucion */
/* Cabecera de las pantallas de flujo que queda fija mientras el cuerpo scrollea (en el proto el head vive fuera del área scrolleable). Solo en las vistas que la piden con .ph-sticky. */
.ph-head.ph-sticky{position:sticky;top:0;background:#fff;z-index:6}
/* alquiler: pie sticky en escritorio. overflow:hidden hacía de .ph-shell un scrollport (que no scrollea) y el sticky de .ph-foot no pegaba; clip recorta igual con el radio 26 sin crear scrollport */
@media(min-width:761px){.ph-shell{overflow:clip}}
/* mensajes r2 */
/* /mensajes (bandeja): en escritorio la conversación abierta al lado se resalta; en el celular no hay hilo abierto, así que ninguna fila se pinta como elegida */
@media(min-width:761px){.msg-wrap.is-inbox .msg-list a.on{background:#F7F8FA!important}.msg-wrap.is-inbox .msg-list a.on .msg-nm{font-weight:600!important}}
/* /mensajes/{uuid} en el celular: el hilo mide exactamente lo que queda de pantalla y la barra de escritura es el borde inferior; el pie del sitio se oculta para que no haya nada más abajo que la desplace */
@media(max-width:760px){.page-d:has(.msg-wrap.is-thread)>.card-d~div{display:none!important}}
/* ingresos r2: en escritorio el título de la fila va en una sola línea (filas parejas como el prototipo; el título completo queda en title=) y el gráfico acompaña la tabla cuando se despliegan todas las liquidaciones. El margen lateral del celular vuelve a los 24 px del resto del panel. */
@media(min-width:561px){.ing-t{-webkit-line-clamp:1}.ing-side{position:sticky;top:16px}}
/* review r2: el comentario marca el foco como el prototipo (style-focus border-color #181818), igual que .inp */
.ta:focus{border-color:#181818}
/* home r2 */
/* Seguro de lo que nace oculto (.js [data-reveal] e img[data-fade]): motion() marca html.mo al correr; si app.js muere antes (o motion() revienta), a los 2,5 s se revela todo igual. Con motion() vivo el seguro no aplica y el reveal por scroll sigue intacto. */
.js:not(.mo) [data-reveal],.js:not(.mo) img[data-fade]{animation:r2safe .01s linear 2.5s forwards}
@keyframes r2safe{to{opacity:1;transform:none}}
/* ficha r2 */
/* atribución de Google Maps: se sube 8 px para que no la corte la curva de 18 px del contenedor (sigue entera y visible) */
#map .gm-style-cc{bottom:8px}
#map .gm-style a[href*="maps.google.com"]{position:relative;bottom:8px;display:inline-block}
/* tarjeta del dueño en 390: el botón «Ver perfil» pasa a ser un chevron y la tarjeta entera lleva al perfil */
.ficha-owner-more{display:none}
@media(max-width:480px){.ficha-owner{cursor:pointer}.ficha-owner-btn{display:none!important}.ficha-owner-more{display:inline-block}}
/* calendario r2 */
@container (max-width:540px){.cal-day{padding:6px}.cal-day .cal-p{font-size:10px}}
@container (max-width:430px){.cal-day{padding:5px 4px 4px}.cal-day .cal-p{font-size:9px;letter-spacing:-.01em}}
.cal-day.hold{cursor:default}
/* solicitudes r2: «No puedo» se pone rojo al pasar el mouse (antes era onmouseover inline y también cambiaba estando deshabilitado mientras se procesa otra tarjeta) */
.sol-no{transition:border-color .18s,color .18s}.sol-no:hover:not(:disabled){border-color:#C93A2B!important;color:#C93A2B!important}
/* disputa r2: barra de operaciones en el celular en UNA fila de 54 px (como el prototipo); las pestañas deslizan en su propio carril en vez de bajar a una segunda fila */
@media(max-width:760px){
.adm-bar{flex-wrap:nowrap!important;padding:14px 16px!important}
.adm-tabs{flex:999 1 0%!important;order:0!important;min-width:0;padding-bottom:0!important;mask-image:linear-gradient(90deg,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent)}
}
.dis-row{display:flex;align-items:baseline} /* filas del resumen con x-show: el display va en clase porque x-show borra el inline al mostrar */
/* devolucion r2 */
/* La devolución mide exactamente el alto de la ventana y el cuerpo scrollea ADENTRO (como el teléfono del proto): el pie nunca se pinta encima del aviso ni del flash. En escritorio la columna se ajusta al alto útil: 66 px arriba (barra de marca + márgenes) y 48 abajo, sin scroll del documento. */
.devol-shell{flex:1;min-height:0}
@media(max-width:760px){.devol-shell{height:100vh;height:100dvh;flex:none}}
@media(min-width:761px){
.ph-in:has(> .devol-shell){min-height:0;height:calc(100vh - 114px);height:calc(100dvh - 114px)}
.devol-cell{height:140px;width:100%} /* width:100% porque con aspect-ratio inline + alto fijo la grilla no estira la celda · a 560 px las celdas 1.2:1 medían 215 px y el aviso quedaba bajo el pliegue; con 140 px (el alto de celda del teléfono del proto) entra todo en el primer pintado */
}
.devol-head{border-bottom:1px solid #F2F2F2} /* separa la cabecera del cuerpo que scrollea debajo */
/* pago r2 */
/* El layout lleva viewport-fit=cover: en un iPhone instalado como PWA el pie fijo quedaba sobre el indicador de inicio (22 px de padding sin área segura). env() vale 0 donde no hay inset, así que el resto de las pantallas no cambia un píxel. */
.ph-foot{padding-bottom:calc(22px + env(safe-area-inset-bottom,0px))}
/* El cuerpo scrollea adentro y el pie es sticky: cuando el brick de MP enfoca un campo, el scroll automático deja lugar para el pie en vez de esconder el campo debajo. */
.pago-shell .ph-body{scroll-padding-bottom:110px}
/* buscar r2 */
/* Barra de filtros de /buscar en UNA fila como el prototipo (47 px). Escritorio: el riel [categorías | modos] scrollea sin barra y las píldoras de precio/radio quedan fijas a la derecha, siempre visibles; cuando hay chips escondidos el riel lo dice con un degradé de 32 px Y una flecha real (clic = avanza 60 % del riel); al volver, la flecha izquierda. Celular: la barra entera es un solo riel táctil (los sliders no disparan el paneo horizontal). */
.fscroll::before{content:'';position:absolute;top:0;bottom:0;left:0;width:32px;background:linear-gradient(270deg,rgba(255,255,255,0),#fff 70%);pointer-events:none;opacity:0;transition:opacity .2s;z-index:2}
.fscroll::after{z-index:2}
.fscroll.less::before{opacity:1}
.fbarw::before,.fbarw::after{bottom:1px}
.frail-arrow{position:absolute;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:999px;background:#fff;border:1px solid #E6E6E6;box-shadow:0 3px 10px -3px rgba(24,24,24,.3);display:none;place-items:center;color:#181818;z-index:3;cursor:pointer;padding:0}
.frail-arrow.r{right:0}
.frail-arrow.l{left:0}
.fscroll.more>.frail-arrow.r,.fscroll.less>.frail-arrow.l{display:grid}
.fbar input[type=range]{touch-action:pan-y}
@media(max-width:860px){
.fbar{padding:10px 14px!important;overflow-x:auto}
.frail{flex:none!important}
.frail>.fscroll-in{overflow:visible!important}
.frail::before,.frail::after,.frail-arrow{display:none!important}
/* leyenda del mapa: en 390 px medía 210 de 390 (54 %); acá topa en 168 y baja a 10 px */
.maplegend{max-width:168px!important;font-size:10px!important;padding:7px 10px!important}
}
/* tarjeta de resultado en el celular: chips y precio no entran en los 215 px que quedan al lado de la foto (necesitan ~270 con «Punto rentame»), así que baja SOLO el grupo del precio, a la derecha; en escritorio es una fila como el prototipo */
@media(max-width:480px){
.rbot{flex-wrap:wrap}
.rbot>span:last-child{margin-left:auto}
}
/* kyc r2 */
/* Como la devolución: la pantalla mide el alto de la ventana y el cuerpo scrollea ADENTRO (el teléfono del proto); el pie sticky nunca se pinta encima del rótulo «Para cobrar» ni de la tarjeta de MercadoPago. En escritorio la columna se ajusta al alto útil (66 arriba + 48 abajo). */
.kyc-shell{flex:1;min-height:0}
@media(max-width:760px){.kyc-shell{height:100vh;height:100dvh;flex:none}}
@media(min-width:761px){
.ph-in:has(> .kyc-shell){min-height:0;flex:none;height:calc(100vh - 114px);height:calc(100dvh - 114px)} /* flex:none: con flex:1 (basis 0 %) en un contenedor de alto indefinido la altura se ignora y la columna crece con el contenido */
.kyc-slots{max-width:310px} /* en la columna de 560 las ranuras del DNI llegaban a 222 px con el ícono perdido al centro; topadas a 310 miden ~150, como en el teléfono del proto */
}
/* entrega r2 */
/* Como la devolución y la verificación: el acta mide el alto de la ventana y el cuerpo scrollea ADENTRO (el teléfono del proto), así el pie sticky no se pinta encima de OBSERVACIONES al entrar en escritorio. En escritorio la columna se ajusta al alto útil (66 arriba + 48 abajo). */
.acta-shell{flex:1;min-height:0}
@media(max-width:760px){.acta-shell{height:100vh;height:100dvh;flex:none}}
@media(min-width:761px){
.ph-in:has(> .acta-shell){min-height:0;flex:none;height:calc(100vh - 114px);height:calc(100dvh - 114px)}
.acta-slot{height:140px;width:100%} /* en la columna de 560 las ranuras 1.15:1 medían 224 px; con 140 (el alto de celda del teléfono del proto, igual que .devol-cell) la condición y las observaciones entran en el primer pintado */
}
/* vacio r2 */
/* Pildora del estado vacío con chip de categoría: en pantallas angostas el chip cede (puntos suspensivos) y, si hay fechas, el «15 km · » se retira — el radio ya lo dice el párrafo de abajo. */
@media(max-width:480px){
.vpill.has-cat.has-f .vpill-km{display:none}
}
/* onboarding r2 */
/* Símbolo de la marca en todas las pantallas de flujo: en el celular .ph-top no existe, así que la cabecera lleva el iso de 20 px a la derecha (en escritorio ya va en .ph-top). */
@media(max-width:760px){.ph-head::after{content:'';width:20px;height:20px;flex:none;margin-left:auto;background:url(../img/marca/iso-color.png) center/contain no-repeat}}
/* Verificación con Didit: el ícono que gira mientras esperamos el veredicto (02/09) */
.kyc-spin{animation:kyc-spin 1.1s linear infinite;display:inline-block}
@keyframes kyc-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.kyc-spin{animation:none}}
/* Cuenta de MercadoPago (/cuenta/mercadopago): las dos acciones del pie van en una fila. La fila es una CLASE y no un style inline
porque x-show de Alpine, al mostrar el elemento, hace removeProperty('display') y se llevaba puesto el display:flex (botones apilados). */
.mp-acts{display:flex;gap:8px;margin:0;align-items:stretch}
.mp-acts>.btn-m{flex:1;min-width:0}
.mp-acts>.btn-s{flex:none;white-space:nowrap}
/* iconos: hasta que la fuente esté lista no se muestra el nombre de la ligadura como texto suelto.
font-display:block en el link de Google Fonts da el bloqueo, esto cubre el caso de fuente caída. */
.ms{font-synthesis:none}
.fonts-loading .ms{visibility:hidden}
/* ===================================================================================
admin — vocabulario del PANEL DE OPERACIONES (/admin/*). 02/09/2026
-----------------------------------------------------------------------------------
ESTAS CLASES SON LA CONVENCIÓN: si estás rediseñando una pantalla de admin, usalas.
No inventes otras y no vuelvas a `.legacy` (eso era el parche, no el diseño).
Todo lo de abajo se apoya en lo que ya existe arriba: .btn-p/.btn-s, .inp-d, .chip,
.pill, .flash, .lbl, .mono, .ms. Acá sólo está lo que el panel agrega.
ESQUELETO DE UNA PANTALLA
include('admin._shell') ?>
Publicaciones
Qué hay que hacer acá.
…filtros…
…tabla…
BARRA DE FILTROS .a-bar → buscador .a-find (input .inp-d) + chips .a-chip[.on]
El chip lleva el número entre : «Activas 128». En el celular la tira de chips
desliza sola; la página nunca se va de ancho.
TABLA .a-tw (envoltorio que scrollea y redondea) > table.a-t.mc
th se queda fijo al scrollear. Números: (mono, a la derecha,
tabular). Acciones: | . Fila que urge: | .
`.mc` es obligatorio: abajo de 760 px la tabla se vuelve tarjetas y cada celda
necesita su data-l="Encabezado" para que se entienda sin encabezado de columna.
PÍLDORA DE ESTADO .a-st.g|b|a|r|n (verde, azul, ámbar, rojo, neutro)
Lleva un punto adelante: el estado se lee por forma y color, no sólo por texto.
ESTADO VACÍO .a-empty → ícono + qué pasa + QUÉ HACER + acción. Nunca «no hay datos».
ACCIÓN PELIGROSA botón .btn-d dentro de un form con
onsubmit="return confirm('Vas a … sobre …. ¿Confirmás?')"
El texto dice el verbo y el objeto concretos, no «¿Estás seguro?».
PAGINACIÓN .a-pag al pie del .a-tw. Siempre que la lista pueda pasar de 100 filas.
=================================================================================== */
.a-wrap{padding:22px 24px 30px}
@media(max-width:760px){.a-wrap{padding:16px 14px 26px}}
.a-head{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin:0 0 18px}
.a-head h1{margin:0;font-size:19px;font-weight:600;letter-spacing:-.03em}
.a-sub{margin:5px 0 0;font-size:12.5px;line-height:1.5;color:#70707A;max-width:64ch}
.a-acts{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
@media(max-width:760px){.a-acts{margin-left:0;width:100%}}
.a-sec{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 12px}
.a-sec h2{margin:0;font-size:15px;font-weight:600;letter-spacing:-.025em}
.a-sec h2+.a-sub{margin-top:3px;font-size:11.5px;color:#8A8A90}
.a-card{border:1px solid #EDEDED;border-radius:18px;background:#fff;padding:18px}
.a-card.flush{padding:0;overflow:hidden}
.a-card.dark{background:#181818;border-color:#181818;color:#fff}
.a-cols{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}
.a-cols>.a-main{flex:1 1 460px;min-width:0}
.a-cols>.a-side{width:330px;flex:1 1 280px;min-width:0;display:flex;flex-direction:column;gap:12px}
.a-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.a-find{position:relative;flex:0 1 300px;min-width:170px}
.a-find>.ms{position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:17px;color:#B0B0B6;pointer-events:none}
.a-find .inp-d{padding-left:33px}
.a-chips{display:flex;gap:6px;flex-wrap:wrap;min-width:0}
.a-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;border:1px solid #E6E6E6;background:#fff;color:#5E5E64;font-size:11.5px;font-weight:500;white-space:nowrap;transition:background .18s,border-color .18s,color .18s}
.a-chip:hover{border-color:#181818}
.a-chip.on{background:#181818;border-color:#181818;color:#fff}
.a-chip b{font-family:'IBM Plex Mono',monospace;font-weight:500;opacity:.6}
.a-chip.on b{opacity:.7}
@media(max-width:760px){.a-chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -14px;padding:2px 14px;max-width:100vw}.a-chips::-webkit-scrollbar{display:none}}
.a-tw{border:1px solid #EDEDED;border-radius:18px;background:#fff;overflow:auto}
.a-tw.h{max-height:560px}
.a-t{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px}
.a-t th{position:sticky;top:0;z-index:1;background:#FAFAFA;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:#9A9AA0;font-weight:600;padding:11px 14px;text-align:left;border-bottom:1px solid #F0F0F0;white-space:nowrap}
.a-t td{padding:12px 14px;border-bottom:1px solid #F4F4F5;vertical-align:middle;line-height:1.4}
.a-t tbody tr:last-child td{border-bottom:0}
.a-t tbody tr:hover td{background:#FCFCFD}
.a-t tr.urg td{background:#FEFBFA}
.a-t tr.urg:hover td{background:#FDF6F4}
.a-t .num,.a-t th.num{text-align:right;font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
.a-t .act,.a-t th.act{text-align:right;white-space:nowrap}
.a-t .sub{display:block;font-size:10.5px;color:#9A9AA0;margin-top:2px;font-weight:400}
.a-t .k{font-weight:500}
@media(max-width:760px){
.a-t.mc,.a-t.mc tbody,.a-t.mc tr,.a-t.mc td{display:block;width:auto}
.a-t.mc thead{display:none}
.a-t.mc tr{padding:12px 14px;border-bottom:1px solid #F0F0F0}
.a-t.mc tbody tr:last-child{border-bottom:0}
.a-t.mc td{border:0;padding:3px 0;display:flex;gap:12px;align-items:baseline;text-align:left}
.a-t.mc td::before{content:attr(data-l);flex:none;width:88px;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:#B0B0B6;font-weight:600;line-height:1.7}
.a-t.mc td.num,.a-t.mc td.act{text-align:left}
.a-t.mc td.wide{display:block}
.a-t.mc td.wide::before{display:block;margin-bottom:3px}
.a-t.mc td.act{padding-top:9px}
.a-t.mc tbody tr:hover td,.a-t.mc tr.urg td{background:transparent}
.a-t.mc tr.urg{background:#FEFBFA}
}
.a-empty{padding:34px 22px;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center}
.a-empty>.ms{font-size:26px;color:#B0B0B6}
.a-empty b{font-size:13.5px;font-weight:600;letter-spacing:-.015em}
.a-empty p{margin:0;font-size:12px;line-height:1.55;color:#8A8A90;max-width:46ch}
.a-empty .btn-s,.a-empty .btn-p{margin-top:5px}
.a-pag{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-top:1px solid #F0F0F0;font-size:11.5px;color:#8A8A90;flex-wrap:wrap}
.a-pag .b{display:flex;gap:6px;font-weight:400}
.a-pag a,.a-pag span.dis{display:inline-flex;align-items:center;gap:4px;padding:6px 11px;border-radius:999px;border:1px solid #E6E6E6;background:#fff;font-size:11.5px;color:#5E5E64}
.a-pag a:hover{border-color:#181818;color:#181818}
.a-pag span.dis{color:#C7C7CC;border-color:#F0F0F0}
.a-st{display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 7px;border-radius:999px;font-size:10.5px;font-weight:600;white-space:nowrap;line-height:1.5}
.a-st::before{content:'';width:5px;height:5px;border-radius:999px;background:currentColor;flex:none;opacity:.7}
.a-st.g{background:#E3F3EB;color:#0B6742}
.a-st.b{background:#E5F0FF;color:#0450C9}
.a-st.a{background:#FBF3E2;color:#8A5A12}
.a-st.r{background:#FBE9E6;color:#A32A1E}
.a-st.n{background:#F3F4F6;color:#5E5E64}
.btn-d{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 13px;border-radius:999px;border:1px solid #F0D3CD;background:#FEF7F6;color:#A32A1E;font-weight:500;font-size:12.5px;white-space:nowrap;cursor:pointer;transition:background .18s,border-color .18s,color .18s}
.btn-d:hover{background:#A32A1E;border-color:#A32A1E;color:#fff}
/* Tablero: la fila de «hay que atender». Número grande, qué es, y el enlace lleva a resolverlo. */
.a-todo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(min-width:640px){.a-todo{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:900px){.a-todo{grid-template-columns:repeat(4,minmax(0,1fr))}}
.a-todo a{display:block;padding:13px 14px;border-radius:16px;border:1px solid #EDEDED;background:#fff;transition:border-color .18s,box-shadow .18s,background .18s}
.a-todo a:hover{border-color:#D8D8DC;box-shadow:0 10px 22px -16px rgba(24,24,24,.5)}
.a-todo .n{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;font-size:23px;font-weight:600;letter-spacing:-.045em;line-height:1.1}
.a-todo .k{display:block;font-size:11.5px;color:#5E5E64;line-height:1.35;margin-top:3px}
.a-todo .w{display:block;font-size:10.5px;color:#9A9AA0;margin-top:3px}
.a-todo a.on{border-color:#B7D4FE;background:#F5FAFF}.a-todo a.on .n{color:#0450C9}
.a-todo a.warn{border-color:#F0E2C0;background:#FDFAF3}.a-todo a.warn .n{color:#8A5A12}
.a-todo a.bad{border-color:#F5D9D4;background:#FEF7F6}.a-todo a.bad .n{color:#A32A1E}
.a-todo a.bad .k{color:#A32A1E}
.a-todo a.zero .n{color:#C7C7CC}.a-todo a.zero .k{color:#9A9AA0}
.a-todo a.zero:hover{border-color:#E0E0E4}
.a-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px}
.a-kpi{padding:17px;border-radius:18px;border:1px solid #EDEDED;background:#fff}
.a-kpi .v{font-size:24px;font-weight:600;letter-spacing:-.04em;margin-top:9px}
.a-kpi .d{display:flex;align-items:center;gap:4px;margin-top:4px;font-size:11px;font-weight:500}
/* Barra de operaciones (admin/_shell.php). Antes todo iba en style= inline y no se podía reusar.
Escritorio: una fila negra con las 4 pestañas diarias (con su contador) + «Más» agrupado + el avatar.
Celular: la fila de pestañas desliza en su propio carril (las medias de arriba siguen mandando). */
.adm-bar{display:flex;align-items:center;gap:14px;padding:15px 24px;background:#181818;color:#fff;flex-wrap:wrap;position:relative;z-index:20}
.adm-iso{display:flex;align-items:center;flex:none}
.adm-iso img{height:24px;width:auto;display:block;flex:none}
.adm-tag{padding:3px 9px;border-radius:6px;background:rgba(255,255,255,.14);font-size:10px;font-weight:600;letter-spacing:.08em;flex:none}
.adm-tabs{display:flex;align-items:center;gap:20px;font-size:12.5px}
.adm-tab{display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,.45);font-weight:400;white-space:nowrap;background:none;border:0;padding:0;cursor:pointer;font-family:inherit;font-size:12.5px;transition:color .15s}
.adm-tab:hover{color:rgba(255,255,255,.8)}
.adm-tab.on{color:#fff;font-weight:600}
.adm-n{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 5px;border-radius:999px;background:rgba(255,255,255,.16);color:rgba(255,255,255,.85);font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:500;line-height:1;flex:none}
.adm-n.on{background:#fff;color:#181818}
.adm-more-dd{position:relative;display:flex}
.adm-more-menu{position:absolute;top:calc(100% + 14px);right:-8px;min-width:196px;padding:6px;background:#fff;border-radius:14px;box-shadow:0 1px 2px rgba(24,24,24,.06),0 16px 36px -14px rgba(24,24,24,.35),0 0 0 1px #EDEDED;z-index:40}
.adm-more-g{padding:9px 12px 4px;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:#B0B0B6;font-weight:600}
.adm-more-g:first-child{padding-top:5px}
.adm-more-a{display:block;padding:8px 12px;border-radius:9px;font-size:12.5px;white-space:nowrap;color:#5E5E64;font-weight:400}
.adm-more-a.on{color:#181818;font-weight:600;background:#F2F2F2}
.adm-yo{position:relative;display:flex;flex:none}
.adm-av{width:26px;height:26px;border-radius:999px;background:rgba(255,255,255,.16);color:#fff;display:grid;place-items:center;font-size:10px;font-weight:600;border:0;cursor:pointer;font-family:inherit;flex:none;transition:background .15s}
.adm-av:hover{background:rgba(255,255,255,.28)}
.adm-yo-menu{right:0;min-width:180px}
.adm-yo-id{padding:9px 12px 10px;margin-bottom:3px;border-bottom:1px solid #F0F0F0}
.adm-yo-id b{display:block;font-size:12.5px;font-weight:600;letter-spacing:-.015em}
.adm-yo-id span{display:block;font-size:10.5px;color:#9A9AA0;margin-top:2px}