/* ============================================================
   STAGE by Innova Centre · App PHP · componentes clay + shell responsivo
   Mobile-first: en móvil ocupa toda la pantalla; en escritorio se
   muestra como dispositivo centrado. Cero border:1px como contorno.
   ============================================================ */
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{font-family:var(--f-ui);color:var(--tinta);background:#d9d7de;-webkit-font-smoothing:antialiased;min-height:100vh}
h1,h2,h3,h4,h5{font-family:var(--f-display);font-weight:400;letter-spacing:.01em;margin:0}
a{color:var(--morado)}
button{font-family:var(--f-ui);cursor:pointer}
:focus-visible{outline:2px solid var(--morado);outline-offset:2px}
input,textarea,select{font-family:inherit}

.stage{height:100vh;height:100dvh;display:flex;flex-direction:column;gap:0;padding:0}
.brandbar{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;flex:none;padding:12px 16px}
.brandbar .b-title{display:flex;align-items:center;gap:12px}
.brandbar .b-logo{width:34px;height:34px;border-radius:11px;background:var(--fondo);box-shadow:var(--clay-up);display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:15px;color:var(--morado)}
.brandbar h1{font-family:var(--f-display);font-size:19px;color:var(--tinta);line-height:1}
.brandbar .b-sub{font:400 11px/1.2 var(--f-ui);color:rgba(18,38,32,.55)}
.brand-logout{margin:0}
.rolechip{border:0;border-radius:var(--r-pill);padding:8px 13px;font:600 11px/1 var(--f-ui);color:var(--tinta);background:var(--fondo);box-shadow:var(--clay-up-soft);display:inline-flex;align-items:center;gap:6px}

/* App shell a pantalla completa (sin marco): llena todo el ancho y alto */
.phone{width:100%;flex:1 1 auto;min-height:0;background:var(--fondo);
  padding:0;position:relative;overflow:hidden}
.phone .notch{display:none}
.screen{position:relative;width:100%;height:100%;border-radius:0;background:var(--fondo);overflow:hidden;display:flex;flex-direction:column}
.screen__scroll{flex:1;min-width:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;-webkit-overflow-scrolling:touch}
.screen__scroll::-webkit-scrollbar{width:0}

/* Header */
.hdr{padding:calc(env(safe-area-inset-top,0px) + 26px) 20px 16px;background:var(--fondo);border-radius:0 0 var(--r-pantalla) var(--r-pantalla);box-shadow:var(--clay-float);position:relative;z-index:2;flex:none}
.hdr--oscuro{background:linear-gradient(160deg,var(--c-encabezados,var(--morado-hondo)),var(--morado-tinta));color:#fff;box-shadow:0 14px 30px rgba(61,4,73,.35)}
.hdr--petroleo{background:linear-gradient(160deg,#0d384a,#0a2c3a);color:#fff}
.hdr__row{display:flex;align-items:center;gap:12px}
.hdr__row .grow{flex:1;min-width:0}
.hdr h2,.hdr h3,.hdr h4{font-family:var(--f-ui);font-weight:700;font-size:19px;line-height:1.15;letter-spacing:0}
.hdr--oscuro h2,.hdr--oscuro h3,.hdr--oscuro h4,.hdr--petroleo h2,.hdr--petroleo h3{color:#fff}
.hdr__sub{font:400 10px/1.35 var(--f-ui);color:rgba(18,38,32,.55);margin-top:3px}
.hdr--oscuro .hdr__sub,.hdr--petroleo .hdr__sub{color:rgba(255,255,255,.72)}
.clay-back{width:36px;height:36px;flex:none;display:flex;align-items:center;justify-content:center;border:0;border-radius:var(--r-back);background:var(--fondo);box-shadow:var(--clay-up);color:var(--morado);text-decoration:none}
.clay-back--oscuro{background:rgba(255,255,255,.10);box-shadow:none;color:var(--ambar)}

.body{flex:1;min-width:0;display:flex;flex-direction:column;gap:16px;padding:18px 18px 8px}

/* Tarjetas */
.card{background:var(--fondo);border-radius:var(--r-card);box-shadow:var(--clay-up);padding:16px;border:0;display:block}
.card--alta{background:var(--superficie-alta)}
.card--flat{box-shadow:var(--clay-up-soft)}
.card--oscuro{background:linear-gradient(160deg,var(--morado-hondo),var(--morado-tinta));color:#fff}
a.card{text-decoration:none;color:inherit}

.dato{display:flex;flex-direction:column;gap:4px}
.eyebrow{font:600 9px/1.3 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:rgba(18,38,32,.5)}
.card--oscuro .eyebrow{color:rgba(255,255,255,.6)}
.cifra{font-family:var(--f-display);font-size:34px;line-height:1;color:var(--tinta)}
.card--oscuro .cifra{color:#fff}
.cifra--ambar{color:var(--ambar)}
.cifra--sm{font-size:26px}.cifra--lg{font-size:44px}
.etiqueta{font:500 11px/1.3 var(--f-ui);color:rgba(18,38,32,.6)}
.card--oscuro .etiqueta{color:rgba(255,255,255,.7)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}

/* Botones */
.btn{border:0;border-radius:var(--r-boton);background:var(--fondo);box-shadow:var(--clay-up-soft);font:600 13px/1 var(--f-ui);padding:14px 16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .1s ease;color:var(--tinta);width:100%;text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn--morado{background:linear-gradient(150deg,var(--morado),var(--morado-hondo));box-shadow:var(--clay-morado);color:#fff}
.btn--ambar{background:var(--c-botones,var(--ambar));box-shadow:var(--clay-ambar);color:#122620}
.btn--ambar-lg{background:var(--c-botones,var(--ambar));box-shadow:var(--clay-ambar-lg);color:#122620;padding:16px;font-size:14px}
.btn--ghost{background:transparent;box-shadow:none;color:var(--morado);font-weight:600}
.btn--sm{padding:9px 12px;font-size:12px;width:auto}
.btn[disabled]{opacity:.5;cursor:not-allowed;box-shadow:var(--clay-in);color:rgba(18,38,32,.5)}
.btn-row{display:flex;gap:10px}
.btn-row .btn,.btn-row form{flex:1}
.btn-row form .btn{width:100%}
.pill-btn{border:0;border-radius:var(--r-pill);padding:8px 14px;font:600 12px/1 var(--f-ui);color:#122620;background:var(--c-botones,var(--ambar));box-shadow:var(--clay-ambar);display:inline-flex;align-items:center;gap:6px;width:auto;text-decoration:none}

/* Campos hundidos */
.field{border:0;border-radius:var(--r-campo);background:var(--superficie);box-shadow:var(--clay-in);font:400 13px/1.3 var(--f-ui);color:var(--tinta);padding:13px 15px;width:100%}
.field::placeholder{color:var(--gris)}
.field:focus{outline:0;box-shadow:var(--clay-in-focus)}
select.field{appearance:none;-webkit-appearance:none}
.wheel-field{position:relative}
.wheel-trigger{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;cursor:pointer}
.wheel-trigger__value{display:flex;align-items:center;gap:9px;min-width:0}
.wheel-trigger__value svg{flex:none;color:var(--morado)}
.wheel-trigger.is-empty .wheel-trigger__text{color:var(--gris)}
.wheel-trigger[aria-expanded="true"]{box-shadow:var(--clay-in-focus)}
.wheel-field.is-invalid .wheel-trigger{box-shadow:0 0 0 2px var(--alerta),var(--clay-in)}
.wheel-menu{position:relative;z-index:8;margin-top:8px;padding:12px;border-radius:var(--r-card);background:var(--superficie-alta);box-shadow:var(--clay-up);animation:wheel-in .16s ease-out}
.wheel-menu[hidden]{display:none}
.wheel-menu__head,.wheel-menu__actions{display:flex;align-items:center;justify-content:space-between;gap:10px}
.wheel-menu__head{margin-bottom:10px}
.wheel-menu__title{font:700 12px/1 var(--f-ui);color:var(--tinta)}
.wheel-menu__close{border:0;background:transparent;color:var(--gris);padding:4px;cursor:pointer;font-size:18px;line-height:1}
.wheel-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.wheel-columns--time{grid-template-columns:1fr 1fr}
.wheel-column{position:relative;min-width:0;padding:7px 4px;border-radius:var(--r-campo);background:var(--fondo);box-shadow:var(--clay-in)}
.wheel-column__label{display:block;margin-bottom:3px;text-align:center;font:600 8px/1.2 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:rgba(18,38,32,.45)}
.wheel-list{height:132px;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;padding:48px 0}
.wheel-list::-webkit-scrollbar{display:none}
.wheel-list:focus-visible{outline:2px solid var(--morado);outline-offset:-2px}
.wheel-list::after{content:"";position:absolute;left:6px;right:6px;top:57px;height:36px;border-radius:var(--r-campo);box-shadow:var(--clay-up-xs);pointer-events:none;opacity:.72}
.wheel-option{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;height:36px;border:0;border-radius:var(--r-campo);background:transparent;color:rgba(18,38,32,.42);font:500 13px/1 var(--f-ui);scroll-snap-align:center;cursor:pointer;transition:background .12s,color .12s,transform .12s,box-shadow .12s}
.wheel-option.is-selected{background:var(--fondo);box-shadow:var(--clay-up-xs);color:var(--morado);font-weight:700;transform:scale(1.03)}
.wheel-menu__actions{justify-content:flex-end;margin-top:10px}
.wheel-apply{width:auto;padding:10px 16px}
@keyframes wheel-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.field-label{font:600 9.5px/1.4 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:rgba(18,38,32,.5);margin-bottom:7px;padding-left:4px;display:block}
.field-group{display:flex;flex-direction:column}
.field--readonly{background:var(--superficie);color:rgba(18,38,32,.7)}
.field-hint{font:400 10px/1.4 var(--f-ui);color:rgba(18,38,32,.5);margin-top:6px;padding-left:4px}
.field-hint--alerta{color:var(--alerta)}.field-hint--ok{color:var(--ok)}

/* Chips / tabs / segmentos */
.chip{border:0;border-radius:var(--r-pill);padding:5px 11px;font:600 10px/1.2 var(--f-ui);box-shadow:var(--clay-up-xs);background:var(--fondo);color:var(--tinta);display:inline-flex;align-items:center;gap:5px}
.chip--ok{background:rgba(28,122,74,.12);color:var(--ok);box-shadow:none}
.chip--alerta{background:rgba(192,43,60,.12);color:var(--alerta);box-shadow:none}
.chip--ambar{background:rgba(253,157,11,.16);color:var(--ambar-hondo);box-shadow:none}
.chip--morado{background:rgba(99,6,121,.12);color:var(--morado);box-shadow:none}
.chip--gris{background:rgba(18,38,32,.07);color:rgba(18,38,32,.6);box-shadow:none}
/* Radio-chip: selección única con aspecto de chip clay (sin JS) */
.chip-radio{position:relative;display:inline-flex;cursor:pointer;border-radius:var(--r-pill)}
.chip-radio input{position:absolute;opacity:0;width:0;height:0;margin:0}
.chip-radio>span{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-pill);padding:9px 15px;
  font:600 11px/1.2 var(--f-ui);background:var(--fondo);color:rgba(18,38,32,.6);box-shadow:var(--clay-up-xs);
  transition:background .15s,color .15s,box-shadow .15s}
.chip-radio input:checked+span{background:var(--morado);color:#fff}
.chip-radio input:focus-visible+span{outline:2px solid var(--morado);outline-offset:2px}
.seg{display:flex;gap:6px;background:var(--superficie);box-shadow:var(--clay-in);border-radius:var(--r-pill);padding:5px;flex-wrap:wrap}
.seg button,.seg a{flex:1;border:0;background:transparent;border-radius:var(--r-pill);padding:8px 6px;font:600 11px/1 var(--f-ui);color:rgba(18,38,32,.6);text-align:center;text-decoration:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.seg button[aria-selected="true"],.seg a[aria-selected="true"]{background:var(--fondo);box-shadow:var(--clay-up-xs);color:var(--tinta)}

/* Filas */
.list{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:11px;padding:12px 2px;border-radius:var(--r-fila)}
.row>.txt{min-width:0;flex:1}
.row .txt .t1{font:600 13px/1.25 var(--f-ui);color:var(--tinta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .txt .t2{font:400 11px/1.3 var(--f-ui);color:rgba(18,38,32,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .val{font:600 13px/1 var(--f-ui);color:var(--tinta);text-align:right;flex:none}
.row .val small{display:block;font:400 10px/1.3 var(--f-ui);color:rgba(18,38,32,.5);margin-top:3px}
.divisor{height:1px;background:rgba(18,38,32,.08);border:0;margin:0}
.avatar{width:40px;height:40px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;font:700 13px/1 var(--f-ui);color:#fff;background:linear-gradient(150deg,var(--morado),var(--morado-hondo));box-shadow:var(--clay-up-xs)}
.avatar--ambar{background:var(--ambar);color:#122620}
.ico{width:38px;height:38px;flex:none;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--fondo);box-shadow:var(--clay-up-xs);color:var(--morado)}

/* Medidores */
.meter{height:12px;border-radius:var(--r-pill);background:var(--superficie);box-shadow:var(--clay-in);overflow:hidden;display:flex}
.meter span{display:block;height:100%}
.meter .m-vendido{background:var(--morado)}.meter .m-apartado{background:var(--ambar)}.meter .m-cortesia{background:var(--petroleo)}
.meter-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font:500 12px/1 var(--f-ui)}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:middle}

/* Notas */
.note{border-radius:var(--r-card);padding:13px 15px;font:400 12px/1.5 var(--f-ui)}
.note--info{background:rgba(99,6,121,.07);color:var(--morado-hondo)}
.note--alerta{background:rgba(192,43,60,.09);color:var(--alerta)}
.note--ambar{background:rgba(253,157,11,.14);color:var(--ambar-hondo)}
.note--ok{background:rgba(28,122,74,.10);color:var(--ok)}
.note b{font-weight:700}
.lock{display:inline-flex;align-items:center;gap:6px}

/* Pasos */
.steps{display:flex;flex-direction:column}
.step{display:flex;gap:12px}
.step__rail{display:flex;flex-direction:column;align-items:center;flex:none;width:22px}
.step__dot{width:14px;height:14px;border-radius:50%;background:var(--superficie);box-shadow:var(--clay-in);margin-top:2px}
.step--done .step__dot{background:var(--ok);box-shadow:none}
.step--now .step__dot{background:var(--ambar);box-shadow:none}
.step__line{width:2px;flex:1;background:rgba(18,38,32,.12);margin:3px 0}
.step:last-child .step__line{display:none}
.step__body{padding-bottom:16px}
.step__t{font:600 13px/1.25 var(--f-ui)}
.step__s{font:400 11px/1.35 var(--f-ui);color:rgba(18,38,32,.55);margin-top:2px}

.mono{font-family:var(--f-datos);letter-spacing:.02em}
.qr{width:150px;height:150px;border-radius:18px;background:var(--superficie-alta);box-shadow:var(--clay-up);padding:12px;margin:12px auto}
.qr svg{width:100%;height:100%;display:block}
.flyer{border-radius:18px;min-height:130px;display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,var(--morado),var(--morado-tinta));color:rgba(255,255,255,.7);font:600 11px/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;box-shadow:var(--clay-up)}

.pie{margin-top:auto;padding:18px 0 10px;text-align:center;font:600 8px/1.4 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:rgba(18,38,32,.42)}
.pie--oscuro{color:rgba(255,255,255,.5)}
.blocked{display:inline-flex;align-items:center;gap:6px;justify-content:center;font:600 8px/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:rgba(18,38,32,.4);margin-top:8px}

/* NavBar */
.nav{flex:none;display:flex;justify-content:space-around;align-items:stretch;background:var(--c-navbar,var(--petroleo));box-shadow:var(--clay-nav);padding:10px 8px;border-radius:26px 26px 0 0}
.nav-item{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 6px;flex:1;color:rgba(255,255,255,.55);text-decoration:none}
.nav-item .nav-ico{width:22px;height:22px;display:flex;align-items:center;justify-content:center}
.nav-item .nav-lbl{font:600 9px/1 var(--f-ui);letter-spacing:.02em}
.nav-item[aria-current="page"]{color:var(--ambar)}

/* Toast */
.toast{position:absolute;left:16px;right:16px;bottom:92px;z-index:60;background:var(--tinta);color:#fff;border-radius:14px;padding:12px 15px;font:500 12px/1.4 var(--f-ui);box-shadow:0 10px 24px rgba(18,38,32,.35);display:flex;align-items:center;gap:10px}
.toast--ok{background:var(--ok)}.toast--alerta{background:var(--alerta)}

/* Utilidades */
.stack{display:flex;flex-direction:column;gap:12px}
.rowflex{display:flex;align-items:center;gap:10px}

/* ===== Dashboard de mosaicos dinámicos (Dueño/Admin) ===== */
.dash-hint{display:flex;align-items:center;gap:7px;font:500 11px/1.4 var(--f-ui);color:rgba(18,38,32,.55);padding:2px 4px 12px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:14px}
.tile{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:12px;aspect-ratio:1/1;
  background:var(--fondo);box-shadow:var(--clay-up);border-radius:24px;padding:16px;overflow:hidden;color:var(--tinta)}
.tile--wide{grid-column:span 2;aspect-ratio:auto;min-height:120px;flex-direction:row;align-items:center;gap:16px}
.tile__link{position:absolute;inset:0;z-index:1;border-radius:inherit}
.tile:hover{box-shadow:var(--clay-up-lg,var(--clay-up))}
.tile__ico,.tile__body{position:relative;z-index:2;pointer-events:none}
.tile__ico{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:14px;background:var(--superficie);box-shadow:var(--clay-in);color:var(--morado)}
.tile--wide .tile__ico{width:54px;height:54px}
.tile--ambar .tile__ico{color:var(--ambar-hondo)}
.tile__body{display:flex;flex-direction:column;gap:3px;min-width:0}
.tile--wide .tile__body{flex:1}
.tile__cap{font:600 10px/1.2 var(--f-ui);letter-spacing:.11em;text-transform:uppercase;color:rgba(18,38,32,.45)}
.tile__num{font-family:var(--f-display);font-size:30px;line-height:1;letter-spacing:.01em;color:var(--tinta);transform-origin:left center}
.tile--wide .tile__num{font-size:40px}
.tile__num--sm{font-size:21px;letter-spacing:.04em}
.tile__lbl{font:500 11px/1.35 var(--f-ui);color:rgba(18,38,32,.6)}
.tile__lbl b{font-weight:700;color:rgba(18,38,32,.82)}
.tile__resize{position:absolute;top:10px;right:10px;z-index:3;width:27px;height:27px;border:0;border-radius:10px;
  background:var(--superficie);box-shadow:var(--clay-up-xs);color:rgba(18,38,32,.5);display:grid;place-items:center;cursor:pointer;opacity:.7;transition:opacity .15s,color .15s}
.tile__resize:hover{opacity:1;color:var(--morado)}
.tile__pulse{animation:tilePulse .6s ease}
@keyframes tilePulse{0%{color:var(--ambar-hondo);transform:scale(1.1)}100%{color:var(--tinta);transform:scale(1)}}
.between{display:flex;align-items:center;justify-content:space-between;gap:10px}
.wrap{flex-wrap:wrap}.grow{flex:1;min-width:0}.right{margin-left:auto}.center{text-align:center}
.muted{color:rgba(18,38,32,.55)}.small{font-size:11px}
.tiny{font:600 9px/1.3 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:rgba(18,38,32,.5)}
.bold{font-weight:700}.t-alerta{color:var(--alerta)}.t-ok{color:var(--ok)}.t-morado{color:var(--morado)}.t-ambar{color:var(--ambar-hondo)}
.badge-num{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--alerta);color:#fff;font:700 10px/20px var(--f-ui);text-align:center;display:inline-block}

/* ============================================================
   Responsive por dispositivo (sin marco: la app llena la pantalla)
   Pantallas pequeñas  ->  NavBar inferior (menú de barra).
   Pantallas grandes    ->  menú superior horizontal en la cabecera.
   móvil · tablet · laptop · escritorio · TV · pantalla gigante
   ============================================================ */

@media (max-width:600px){
  .brandbar .b-sub{display:none}
}
@media (max-width:360px){
  .grid3{grid-template-columns:1fr 1fr}
}

/* --- Pantallas grandes: menú superior + contenido a lo ancho --- */
@media (min-width:1024px){
  .brandbar{padding:14px 28px 10px}
  /* NavBar inferior -> menú superior horizontal (cabecera) */
  .nav{order:-1;flex:none;flex-direction:row;justify-content:flex-start;align-items:center;
    gap:8px;flex-wrap:wrap;padding:9px 24px;border-radius:0;
    box-shadow:0 10px 24px rgba(13,56,74,.20),inset 0 -2px 4px rgba(0,0,0,.12)}
  .nav-item{flex:none;flex-direction:row;gap:9px;padding:10px 16px;border-radius:14px}
  .nav-item .nav-ico{width:20px;height:20px}
  .nav-item .nav-lbl{font-size:13px;letter-spacing:.01em}
  .nav-item[aria-current="page"]{background:rgba(255,255,255,.12)}
  .nav-item:hover{color:rgba(255,255,255,.85)}
  /* Encabezado y contenido con más aire, ocupando el ancho */
  .hdr{padding:26px 40px 18px}
  .body{max-width:1180px;width:100%;margin-inline:auto;padding:26px 40px 16px;gap:18px}
  .toast{left:auto;right:32px;bottom:32px;max-width:360px}
}

/* --- Escritorio amplio / TV --- */
@media (min-width:1600px){
  .nav{padding:11px 40px}
  .hdr{padding:30px 56px 22px}
  .body{max-width:1440px;padding:32px 56px 18px;gap:22px}
}
@media (min-width:2200px){
  .nav{padding:13px 60px}
  .nav-item .nav-lbl{font-size:14px}
  .hdr{padding:34px 72px 26px}
  .body{max-width:1760px;padding:40px 72px 22px}
}

/* --- Pantalla gigante (4K / TV grande): escala para lectura a distancia --- */
@media (min-width:2560px){
  .stage{height:100%;zoom:1.35}
}
@media (min-width:3400px){
  .stage{zoom:1.8}
}