/* Chamba — hoja de estilos.
   Paleta de la referencia (naranja y amarillo) con ejecución moderna:
   degradados, vidrio esmerilado, brillos de color y movimiento corto.
   Nada de bordes duros ni grises planos. */

:root{
  /* Marca */
  --naranja:#F5821F;
  --naranja-osc:#DE6A05;
  --amarillo:#FFC61A;
  --amarillo-osc:#F0A800;
  --grad: linear-gradient(135deg,#FF8A00 0%,#FFC61A 100%);
  --grad-suave: linear-gradient(135deg,rgba(255,138,0,.12) 0%,rgba(255,198,26,.12) 100%);

  /* Base */
  --fondo:#F6F7FB;
  --superficie:#FFFFFF;
  --vidrio:rgba(255,255,255,.72);
  --borde:rgba(20,24,36,.07);
  --borde-fuerte:rgba(20,24,36,.14);

  /* Texto */
  --texto:#141824;
  --texto-suave:#6A7386;
  --texto-tenue:#9AA3B5;
  --sobre-amarillo:#3A2A00;

  /* Estados */
  --ok:#00B37E;
  --ok-suave:#E3FAF2;
  --alerta:#F0384B;
  --alerta-suave:#FFECEE;
  --aviso:#C77700;
  --aviso-suave:#FFF6E5;

  --r-xl:26px;
  --r-lg:20px;
  --r-md:15px;
  --r-sm:11px;

  --sombra:0 1px 2px rgba(20,24,36,.04), 0 8px 24px -12px rgba(20,24,36,.18);
  --sombra-alta:0 18px 44px -18px rgba(20,24,36,.35);
  --glow-naranja:0 10px 30px -10px rgba(245,130,31,.6);
  --glow-amarillo:0 10px 28px -8px rgba(255,198,26,.65);
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}

body{
  background:
    radial-gradient(1000px 500px at 15% -10%, rgba(255,198,26,.16), transparent 60%),
    radial-gradient(900px 460px at 95% 5%, rgba(245,130,31,.14), transparent 60%),
    var(--fondo);
  font-family:'Inter',system-ui,sans-serif;
  color:var(--texto);
  display:flex; flex-direction:column; align-items:center;
  padding:20px 12px 22px;
  height:100vh; height:100dvh;
  overflow:hidden;
}
h1,h2,h3,.display{font-family:'Sora',sans-serif; letter-spacing:-.01em;}

/* --- Encabezado de la ventana de escritorio --- */
.app-header{
  width:100%; max-width:900px; flex-shrink:0;
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:14px; color:var(--texto-suave); font-size:13px;
}
.app-header .brand{
  color:var(--texto); font-weight:800; font-family:'Sora',sans-serif;
  display:flex; align-items:center; gap:9px; font-size:15px;
}
.app-header .brand .dot{
  width:10px;height:10px;border-radius:50%;background:var(--grad);
  box-shadow:var(--glow-naranja);
}
.app-header .modo{display:flex; align-items:center; gap:10px;}
.app-header button{
  background:var(--vidrio); backdrop-filter:blur(10px);
  border:1px solid var(--borde); color:var(--texto-suave);
  font-size:11px; font-weight:600; padding:8px 13px; border-radius:100px; cursor:pointer;
  font-family:'Inter',sans-serif; transition:.18s;
}
.app-header button:hover{color:var(--texto); border-color:var(--borde-fuerte); transform:translateY(-1px);}

/* --- Marco del teléfono --- */
.stage{flex:1; min-height:0; width:100%; display:flex; justify-content:center; align-items:flex-start;}
.phone{
  transform:scale(var(--fit,1)); transform-origin:top center;
  width:390px; height:820px;
  background:var(--fondo);
  border-radius:46px; border:9px solid #0D1017;
  box-shadow:0 40px 90px -25px rgba(20,24,36,.5), 0 0 0 1px rgba(20,24,36,.06);
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
}
.notch{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:112px; height:23px; background:#0D1017; border-radius:0 0 15px 15px; z-index:40;
}
.status{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 24px 8px; font-size:12px; font-weight:700;
  color:#fff; flex-shrink:0; position:relative; z-index:2;
}

/* --- Barra superior: degradado con formas de fondo --- */
.barra{
  position:relative; overflow:hidden; flex-shrink:0;
  background:var(--grad);
  color:#fff; padding:4px 18px 22px;
  display:flex; align-items:flex-start; gap:12px;
  border-radius:0 0 26px 26px;
  box-shadow:0 12px 30px -14px rgba(245,130,31,.75);
}
/* Manchas suaves que le quitan lo plano al degradado */
.barra::before, .barra::after{
  content:''; position:absolute; border-radius:50%; pointer-events:none;
  background:rgba(255,255,255,.16);
}
.barra::before{width:190px;height:190px; right:-60px; top:-110px;}
.barra::after{width:120px;height:120px; right:60px; bottom:-80px; background:rgba(255,255,255,.10);}
.barra > *{position:relative; z-index:1;}
.barra .volver{
  background:rgba(255,255,255,.24); border:none; color:#fff;
  width:34px; height:34px; border-radius:12px; cursor:pointer;
  font-size:18px; line-height:1; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(6px); transition:.16s;
}
.barra .volver:active{transform:scale(.92);}
.barra .txt{flex:1; min-width:0;}
.barra h1{font-size:20px; font-weight:800; line-height:1.2;}
.barra .sub{font-size:12.5px; opacity:.92; margin-top:4px; line-height:1.35;}

.status + .barra{margin-top:-4px;}
.phone > .status{background:var(--naranja);}

.screens{position:relative; flex:1; overflow:hidden;}
.screen{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  overflow-y:auto; overflow-x:hidden;
  padding-bottom:100px;
  -webkit-overflow-scrolling:touch;
}
.screen::-webkit-scrollbar{width:0;}
.screen.sin-nav{padding-bottom:18px;}

/* Entrada de las tarjetas.
   SIN animation-delay y SIN fill-mode backwards, a propósito. Con `backwards`
   el elemento se queda en el estado inicial —opacidad 0— mientras la animación
   no arranca, y hay situaciones donde no arranca (ventana sin pintar, pestaña
   en segundo plano, animaciones desactivadas). El resultado era una pantalla
   en blanco. Así, si la animación no corre, el contenido simplemente se ve. */
@keyframes surgir{from{transform:translateY(8px);} to{transform:none;}}
.anim > *{animation:surgir .32s cubic-bezier(.22,1,.36,1);}

/* --- Navegación inferior con píldora deslizante --- */
.bottom-nav{
  position:absolute; bottom:0; left:0; right:0;
  background:rgba(255,255,255,.86); backdrop-filter:blur(18px) saturate(1.4);
  border-top:1px solid var(--borde);
  display:flex; align-items:center; justify-content:space-around;
  padding:9px 6px 18px; z-index:15;
}
.nav-btn{
  background:none; border:none; color:var(--texto-tenue);
  display:flex; flex-direction:column; align-items:center; gap:3px;
  font-size:11px; font-weight:700; cursor:pointer; padding:7px 12px;
  min-height:52px; justify-content:center;
  font-family:'Inter',sans-serif; position:relative; border-radius:14px;
  transition:.2s;
}
.nav-btn .ic{font-size:21px; line-height:1; transition:.2s;}
.nav-btn.activo{color:var(--naranja); background:var(--grad-suave);}
.nav-btn.activo .ic{transform:translateY(-2px) scale(1.08);}
.nav-btn .globo{
  position:absolute; top:0; right:6px; min-width:17px; height:17px; padding:0 5px;
  background:var(--alerta); color:#fff; border-radius:100px;
  font-size:9px; font-weight:800; display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 8px -2px rgba(240,56,75,.7);
}
.fab{
  width:56px; height:56px; border-radius:20px;
  background:var(--grad);
  display:flex; align-items:center; justify-content:center;
  margin-top:-30px; font-size:28px; font-weight:300; color:#fff;
  box-shadow:var(--glow-naranja);
  border:4px solid #fff; cursor:pointer; line-height:1;
  transition:.2s;
}
.fab:active{transform:scale(.93);}

/* --- Bloques --- */
.px{padding-left:18px; padding-right:18px;}
.pt{padding-top:16px;}
.section-title{font-size:19px; font-weight:800; line-height:1.25;}
.section-sub{font-size:14px; color:var(--texto-suave); margin-top:4px; line-height:1.45;}
.eyebrow{
  font-size:11.5px; letter-spacing:.09em; text-transform:uppercase;
  font-weight:800; margin-bottom:8px;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mt{margin-top:14px;} .mt-s{margin-top:8px;} .mb{margin-bottom:12px;}
.fila{display:flex; align-items:center; gap:11px;}
.entre{display:flex; justify-content:space-between; align-items:center; gap:10px;}
.crecer{flex:1; min-width:0;}
.chico{font-size:13px; color:var(--texto-suave); line-height:1.45;}
.recorta{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.card{
  background:var(--superficie); border:1px solid var(--borde);
  border-radius:var(--r-lg); padding:15px; margin-bottom:11px;
  box-shadow:var(--sombra);
}
.card.clic{cursor:pointer; transition:transform .16s, box-shadow .16s, border-color .16s;}
.card.clic:hover{transform:translateY(-2px); box-shadow:var(--sombra-alta);}
.card.clic:active{transform:scale(.99);}
.card.acento{
  border-color:transparent;
  background:linear-gradient(#fff,#fff) padding-box, var(--grad) border-box;
  border:1.5px solid transparent;
}
.card.peligro{border-color:rgba(240,56,75,.35); background:var(--alerta-suave);}
.card.vidrio{background:var(--vidrio); backdrop-filter:blur(14px);}

/* --- Rejilla de accesos rápidos --- */
.rejilla{display:grid; grid-template-columns:repeat(4,1fr); gap:9px;}
.tile{
  background:var(--superficie); border:1px solid var(--borde); border-radius:var(--r-md);
  padding:13px 6px 11px; min-height:88px; justify-content:center; text-align:center; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  box-shadow:var(--sombra); transition:transform .16s, box-shadow .16s;
}
.tile:hover{transform:translateY(-3px); box-shadow:var(--sombra-alta);}
.tile:active{transform:scale(.95);}
.tile .ic{
  width:40px;height:40px;border-radius:13px; background:var(--grad-suave);
  display:flex; align-items:center; justify-content:center; font-size:20px;
}
.tile .nom{font-size:11px; font-weight:700; color:var(--texto-suave); line-height:1.2;}
.tile.mas .ic{background:var(--grad); color:#fff;}

/* --- Botones --- */
.btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 18px; border-radius:var(--r-md); font-weight:800; font-size:14.5px;
  border:none; cursor:pointer; width:100%; font-family:'Sora',sans-serif;
  letter-spacing:.01em; transition:transform .14s, box-shadow .14s, opacity .14s;
}
.btn:active{transform:scale(.985);}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none;}
.btn-primary{background:var(--grad); color:#fff; box-shadow:var(--glow-naranja);}
.btn-amarillo{background:linear-gradient(135deg,var(--amarillo),var(--amarillo-osc)); color:var(--sobre-amarillo); box-shadow:var(--glow-amarillo);}
.btn-ghost{background:var(--superficie); color:var(--texto); border:1px solid var(--borde-fuerte); box-shadow:var(--sombra);}
.btn-ok{background:linear-gradient(135deg,#00C98D,#00A06F); color:#fff; box-shadow:0 10px 28px -10px rgba(0,179,126,.7);}
.btn-danger{background:var(--alerta-suave); color:var(--alerta); border:1px solid rgba(240,56,75,.4);}
.btn-mini{width:auto; padding:10px 15px; font-size:11.5px; border-radius:12px;}
.btns{display:flex; gap:8px;}

/* Botones de acción rápida en fila */
.rapidos{display:flex; gap:7px; flex-wrap:wrap;}
.rapido{
  flex:1; min-width:92px; min-height:56px; background:var(--superficie); border:1px solid var(--borde);
  border-radius:var(--r-sm); padding:11px 8px; cursor:pointer; text-align:center;
  font-family:'Sora',sans-serif; font-weight:700; font-size:13.5px; color:var(--texto);
  box-shadow:var(--sombra); transition:.16s;
}
.rapido:hover{border-color:var(--naranja); color:var(--naranja); transform:translateY(-2px);}
.rapido:active{transform:scale(.96);}
.rapido .sup{display:block; font-family:'Inter',sans-serif; font-weight:600; font-size:11px; color:var(--texto-tenue); margin-bottom:2px;}
.rapido.destacado{background:var(--grad); color:#fff; border-color:transparent; box-shadow:var(--glow-naranja);}
.rapido.destacado .sup{color:rgba(255,255,255,.85);}

.chip{
  display:inline-flex; align-items:center; gap:6px; padding:12px 16px; min-height:44px; border-radius:100px;
  background:var(--superficie); font-size:13.5px; font-weight:600; color:var(--texto-suave);
  border:1px solid var(--borde); cursor:pointer; user-select:none; transition:.16s;
  box-shadow:var(--sombra);
}
.chip:active{transform:scale(.95);}
.chip.sel{background:var(--grad); color:#fff; border-color:transparent; box-shadow:var(--glow-naranja);}
.chips{display:flex; flex-wrap:wrap; gap:7px;}

.avatar{
  width:42px;height:42px;border-radius:14px;
  background:var(--grad);
  display:flex;align-items:center;justify-content:center;
  font-weight:800; font-size:13px; color:#fff; flex-shrink:0;
  box-shadow:var(--glow-naranja); font-family:'Sora',sans-serif;
}
.avatar.g{width:64px;height:64px;font-size:21px;border-radius:20px;}

.badge{display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:800; padding:5px 10px; border-radius:100px;}
.badge-ok{background:var(--ok-suave); color:var(--ok);}
.badge-warn{background:var(--aviso-suave); color:var(--aviso);}
.badge-danger{background:var(--alerta-suave); color:var(--alerta);}
.badge-neutro{background:rgba(20,24,36,.05); color:var(--texto-suave);}

.stat-box{
  background:var(--superficie); border:1px solid var(--borde); border-radius:var(--r-md);
  padding:14px 12px; display:flex; flex-direction:column; gap:2px; flex:1; box-shadow:var(--sombra);
}
.stat-box .num{
  font-family:'Sora',sans-serif; font-size:23px; font-weight:800;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat-box .label{font-size:10.5px; color:var(--texto-tenue); text-transform:uppercase; letter-spacing:.06em; font-weight:700;}

/* --- Formularios --- */
.campo{margin-bottom:13px;}
.campo label{display:block; font-size:12.5px; color:var(--texto-suave); margin-bottom:7px; font-weight:700;}
.campo input, .campo textarea, .campo select{
  width:100%; background:var(--superficie); border:1.5px solid var(--borde);
  color:var(--texto); border-radius:var(--r-md); padding:14px 15px;
  font-family:'Inter',sans-serif; font-size:14px; outline:none; transition:.18s;
  box-shadow:var(--sombra);
}
.campo textarea{resize:none; min-height:88px; line-height:1.5;}
.campo input::placeholder, .campo textarea::placeholder{color:var(--texto-tenue);}
.campo input:focus, .campo textarea:focus, .campo select:focus{
  border-color:var(--naranja); box-shadow:0 0 0 4px rgba(245,130,31,.14);
}
.campo .ayuda{font-size:12px; color:var(--texto-tenue); margin-top:6px;}

.buscador{position:relative;}
.buscador input{padding-left:42px;}
.buscador .lupa{position:absolute; left:15px; top:50%; transform:translateY(-50%); font-size:15px; opacity:.5;}

.precio{display:flex; align-items:center; justify-content:center; gap:14px; margin:10px 0;}
.precio button{
  width:42px;height:42px;border-radius:14px; background:var(--grad-suave);
  border:1px solid var(--borde); color:var(--naranja); font-size:22px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; line-height:1; transition:.16s;
}
.precio button:active{transform:scale(.9);}
.precio input{
  width:150px; background:none; border:none; text-align:center;
  font-family:'Sora',sans-serif; font-size:34px; font-weight:800; outline:none;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Medidor del rango de zona */
.medidor{margin-top:12px;}
.medidor .riel{
  height:7px; border-radius:100px; position:relative;
  background:linear-gradient(90deg,#F0384B 0%,#FFC61A 28%,#00B37E 50%,#FFC61A 72%,#F0384B 100%);
  opacity:.28;
}
.medidor .riel .marca{
  position:absolute; top:-4px; width:15px; height:15px; border-radius:50%;
  background:#fff; border:3px solid var(--naranja); transform:translateX(-50%);
  box-shadow:0 3px 8px -2px rgba(20,24,36,.4); transition:left .25s cubic-bezier(.22,1,.36,1);
}
.medidor .topes{display:flex; justify-content:space-between; font-size:9.5px; color:var(--texto-tenue); margin-top:7px; font-weight:600;}

/* --- Avisos --- */
.aviso{
  border-radius:var(--r-md); padding:13.5px 14px; font-size:12px; line-height:1.5;
  margin-bottom:12px; display:flex; gap:9px; align-items:flex-start;
}
.aviso-error{background:var(--alerta-suave); color:var(--alerta); border:1px solid rgba(240,56,75,.3);}
.aviso-ok{background:var(--ok-suave); color:var(--ok); border:1px solid rgba(0,179,126,.3);}
.aviso-info{background:var(--superficie); color:var(--texto-suave); border:1px solid var(--borde); box-shadow:var(--sombra);}
.aviso-warn{background:var(--aviso-suave); color:var(--aviso); border:1px solid rgba(199,119,0,.25);}

.vacio{text-align:center; padding:46px 22px; color:var(--texto-tenue);}
.vacio .ic{
  width:74px;height:74px;border-radius:24px; margin:0 auto 16px;
  background:var(--grad-suave); display:flex; align-items:center; justify-content:center; font-size:32px;
}
.vacio p{font-size:14.5px; line-height:1.55;}

/* --- Mapa --- */
.mapa{
  position:relative; height:270px; flex-shrink:0;
  background:
    repeating-linear-gradient(0deg, rgba(20,24,36,.045) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(90deg, rgba(20,24,36,.045) 0 1px, transparent 1px 42px),
    linear-gradient(160deg,#EEF2F8,#F7F9FC);
  overflow:hidden;
}
.mapa .nota-mapa{
  position:absolute; left:11px; bottom:11px; z-index:5;
  background:var(--vidrio); backdrop-filter:blur(10px); border:1px solid var(--borde);
  color:var(--texto-suave); font-size:9.5px; padding:6px 10px; border-radius:9px; font-weight:600;
}
.pin{position:absolute; transform:translate(-50%,-100%); display:flex; flex-direction:column; align-items:center; cursor:pointer; z-index:4;}
.pin .tag{
  padding:7px 11px; border-radius:11px; font-family:'Sora',sans-serif;
  font-weight:800; font-size:12px; white-space:nowrap;
  box-shadow:var(--sombra-alta);
}
.pin.ok .tag{background:var(--grad); color:#fff;}
.pin.bajo .tag{background:var(--alerta); color:#fff;}
.pin.dentro .tag, .pin.alto .tag{background:#fff; color:var(--texto); border:1px solid var(--borde-fuerte);}
.pin .stem{width:2px; height:12px; background:var(--texto-tenue);}
.pin.yo{transform:translate(-50%,-50%);}
.pin.yo .punto{
  width:18px;height:18px;border-radius:50%;background:var(--naranja);border:3px solid #fff;
  box-shadow:0 0 0 7px rgba(245,130,31,.18); animation:latir 2.4s ease-in-out infinite;
}
@keyframes latir{0%,100%{box-shadow:0 0 0 7px rgba(245,130,31,.18);} 50%{box-shadow:0 0 0 12px rgba(245,130,31,.07);}}

.marca-yo{
  width:18px;height:18px;border-radius:50%;background:var(--naranja);border:3px solid #fff;
  box-shadow:0 0 0 7px rgba(245,130,31,.18);
}
.marca-tag{
  padding:7px 11px; border-radius:11px; font-family:'Sora',sans-serif;
  font-weight:800; font-size:12px; white-space:nowrap; cursor:pointer;
  box-shadow:var(--sombra-alta); background:#fff; color:var(--texto); border:1px solid var(--borde-fuerte);
}
.marca-tag.ok{background:var(--grad); color:#fff; border-color:transparent;}
.marca-tag.bajo{background:var(--alerta); color:#fff; border-color:transparent;}

/* --- Llamar y WhatsApp dentro del trato --- */
.contacto{display:flex; gap:9px;}
.btn-contacto{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:50px; padding:13px 12px; border-radius:var(--r-md);
  border:none; cursor:pointer; color:#fff;
  font-family:'Sora',sans-serif; font-weight:800; font-size:14px;
  transition:transform .14s, box-shadow .14s;
}
.btn-contacto:active{transform:scale(.97);}
.btn-contacto:disabled{opacity:.55; cursor:not-allowed;}
.btn-contacto .ic{font-size:17px; line-height:1;}
.btn-contacto.llamar{background:var(--grad); box-shadow:var(--glow-naranja);}
/* El verde de WhatsApp: la gente lo reconoce antes de leer la etiqueta. */
.btn-contacto.whats{background:linear-gradient(135deg,#3ED66E,#1FA855); box-shadow:0 10px 26px -10px rgba(31,168,85,.7);}

/* --- Chat --- */
.chat{display:flex; flex-direction:column; gap:9px; padding:4px 0 12px;}
.burbuja{max-width:78%; padding:11px 14px; border-radius:17px; font-size:14.5px; line-height:1.45; word-wrap:break-word;}
.burbuja.mia{align-self:flex-end; background:var(--grad); color:#fff; border-bottom-right-radius:5px; box-shadow:var(--glow-naranja);}
.burbuja.suya{align-self:flex-start; background:#fff; border:1px solid var(--borde); border-bottom-left-radius:5px; box-shadow:var(--sombra);}
.burbuja .hora{display:block; font-size:9px; opacity:.65; margin-top:4px;}
.chat-envio{display:flex; gap:8px; align-items:center;}
.chat-envio input{
  flex:1; background:#fff; border:1.5px solid var(--borde); color:var(--texto);
  border-radius:100px; padding:13px 17px; font-family:'Inter',sans-serif; font-size:13px; outline:none;
  box-shadow:var(--sombra);
}
.chat-envio input:focus{border-color:var(--naranja);}
.chat-envio button{
  width:46px;height:46px;border-radius:16px; background:var(--grad); color:#fff;
  border:none; font-size:16px; cursor:pointer; flex-shrink:0; box-shadow:var(--glow-naranja);
}

/* --- Pasos del trato --- */
.pasos{display:flex; align-items:flex-start; margin:8px 0 18px;}
.paso{flex:1; display:flex; flex-direction:column; align-items:center; gap:7px; position:relative;}
.paso .bola{width:13px;height:13px;border-radius:50%; background:rgba(20,24,36,.13); z-index:2; transition:.3s;}
.paso.hecho .bola{background:var(--ok);}
.paso.actual .bola{background:var(--naranja); box-shadow:0 0 0 5px rgba(245,130,31,.18);}
.paso .txt{font-size:10.5px; color:var(--texto-tenue); text-align:center; line-height:1.25;}
.paso.hecho .txt, .paso.actual .txt{color:var(--texto-suave); font-weight:700;}
.paso::before{content:''; position:absolute; top:5.5px; left:-50%; width:100%; height:2px; background:rgba(20,24,36,.13); z-index:1;}
.paso:first-child::before{display:none;}
.paso.hecho::before{background:var(--ok);}

.estrellas{display:flex; gap:8px; justify-content:center; font-size:32px; cursor:pointer;}
.estrellas span{color:rgba(20,24,36,.13); transition:transform .16s, color .16s;}
.estrellas span.on{color:var(--amarillo); transform:scale(1.1);}

.desglose .ren{display:flex; justify-content:space-between; font-size:14px; margin-bottom:8px;}
.desglose .ren span:first-child{color:var(--texto-suave);}
.desglose .total{
  display:flex; justify-content:space-between; font-size:15px; font-weight:800;
  padding-top:10px; border-top:1px solid var(--borde); margin-top:4px;
}
.monto{
  font-family:'Sora',sans-serif; font-weight:800;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.monto.verde{background:linear-gradient(135deg,#00C98D,#00A06F); -webkit-background-clip:text; background-clip:text;}
.monto.rojo{background:linear-gradient(135deg,#FF6B7A,#F0384B); -webkit-background-clip:text; background-clip:text;}

/* --- Pantalla de éxito --- */
.exito{text-align:center; padding:26px 20px;}
.exito .marca{
  width:88px;height:88px;border-radius:30px; margin:0 auto 18px;
  background:var(--grad); color:#fff; font-size:42px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--glow-naranja); animation:brotar .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes brotar{from{transform:scale(.6);} to{transform:none;}}

/* --- Esqueletos de carga (en vez de una rueda girando) --- */
.esqueleto{
  border-radius:var(--r-lg); margin-bottom:11px; height:78px;
  background:linear-gradient(100deg, rgba(20,24,36,.055) 30%, rgba(20,24,36,.02) 50%, rgba(20,24,36,.055) 70%);
  background-size:220% 100%; animation:brillo 1.3s ease-in-out infinite;
}
@keyframes brillo{from{background-position:180% 0;} to{background-position:-40% 0;}}

.spinner{
  width:26px;height:26px;border-radius:50%;
  border:3px solid rgba(20,24,36,.1); border-top-color:var(--naranja);
  animation:girar .8s linear infinite;
}
@keyframes girar{to{transform:rotate(360deg);}}

/* --- Modales y hojas (adiós a los confirm() del navegador) --- */
#capa{position:fixed; inset:0; z-index:1700; display:flex; align-items:flex-end; justify-content:center;}
#capa .velo{position:absolute; inset:0; background:rgba(13,16,23,.55); backdrop-filter:blur(3px);}
#capa .hoja{
  position:relative; width:100%; max-width:390px;
  background:var(--superficie); border-radius:26px 26px 0 0;
  padding:10px 20px calc(20px + env(safe-area-inset-bottom));
  box-shadow:0 -20px 50px -20px rgba(13,16,23,.5);
  animation:subir .3s cubic-bezier(.22,1,.36,1);
}
@keyframes subir{from{transform:translateY(28px);} to{transform:none;}}
#capa .asa{width:42px;height:4px;border-radius:4px;background:rgba(20,24,36,.15); margin:0 auto 16px;}
#capa h3{font-size:17px; font-weight:800; margin-bottom:7px;}
#capa p{font-size:13px; color:var(--texto-suave); line-height:1.55; margin-bottom:16px;}
#capa .btns{flex-direction:column; gap:9px;}
#capa input{
  width:100%; background:var(--superficie); border:1.5px solid var(--borde);
  border-radius:var(--r-md); padding:14px 15px; font-family:'Inter',sans-serif;
  font-size:14px; outline:none; margin-bottom:14px;
}
#capa input:focus{border-color:var(--naranja);}

/* --- Avisos flotantes --- */
#tostadas{
  /* Arriba de la barra inferior, para no taparla en ninguna de las dos vistas */
  position:fixed; left:0; right:0; bottom:96px; z-index:1800;
  display:flex; flex-direction:column; align-items:center; gap:9px; pointer-events:none;
}
.tostada{
  background:#0D1017; color:#fff; padding:13px 19px; border-radius:100px;
  font-size:12.5px; font-weight:600; max-width:330px; text-align:center;
  box-shadow:0 14px 34px -12px rgba(13,16,23,.8);
  animation:entrar-tostada .3s cubic-bezier(.22,1,.36,1);
  display:flex; align-items:center; gap:9px;
}
.tostada.ok{background:linear-gradient(135deg,#00C98D,#00A06F);}
.tostada.error{background:linear-gradient(135deg,#FF6B7A,#E02133);}
.tostada.saliendo{animation:salir-tostada .25s forwards;}
@keyframes entrar-tostada{from{transform:translateY(16px) scale(.96);} to{transform:none;}}
@keyframes salir-tostada{to{opacity:0; transform:translateY(10px) scale(.96);}}

/* --- Guía visual --- */
#guia{position:fixed; inset:0; z-index:1500; font-family:'Inter',sans-serif;}
/* Sin transición en posición ni tamaño: al reescribir cssText, top/left pasan
   por `auto` y la interpolación deja el recuadro clavado donde estaba el paso
   anterior. La animación es adorno; que señale el botón correcto no lo es. */
#guia .foco{
  position:absolute; border-radius:20px;
  box-shadow:0 0 0 9999px rgba(13,16,23,.76), 0 0 0 3px var(--amarillo), 0 0 24px 3px rgba(255,198,26,.5);
  pointer-events:none;
}
#guia .foco.centro{box-shadow:0 0 0 9999px rgba(13,16,23,.76);}
#guia .globo{
  position:absolute; max-width:250px;
  background:var(--grad); color:#fff;
  padding:14px 17px; border-radius:var(--r-md);
  font-family:'Sora',sans-serif; font-weight:800; font-size:14.5px; line-height:1.35;
  box-shadow:0 16px 40px -10px rgba(0,0,0,.6);
}
#guia .globo .cuenta{
  display:block; font-family:'Inter',sans-serif; font-weight:700;
  font-size:10px; opacity:.75; margin-bottom:5px; letter-spacing:.06em;
}
#guia .barra-guia{
  position:absolute; left:0; right:0; bottom:26px;
  display:flex; justify-content:center; align-items:center; gap:10px;
}
#guia .barra-guia button{
  border:none; cursor:pointer; font-family:'Sora',sans-serif; font-weight:800;
  font-size:12.5px; padding:13px 26px; border-radius:100px;
}
#guia .barra-guia .saltar{background:rgba(255,255,255,.18); color:#fff; backdrop-filter:blur(8px);}
#guia .barra-guia .seguir{background:var(--amarillo); color:var(--sobre-amarillo); box-shadow:var(--glow-amarillo);}
#guia .puntos{display:flex; gap:5px; margin-right:6px;}
#guia .puntos i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.35); transition:.25s;}
#guia .puntos i.on{background:var(--amarillo); width:18px; border-radius:4px;}

/* --- Pantalla de arranque --- */
#boot{
  position:fixed; inset:0; z-index:2000;
  background:var(--grad);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px;
  color:#fff;
}
#boot .marca{font-family:'Sora',sans-serif; font-weight:800; font-size:30px; letter-spacing:.06em;}
#boot .spinner{border-color:rgba(255,255,255,.3); border-top-color:#fff;}
#boot .log{font-size:12px; opacity:.9; min-height:18px;}
#boot.oculto{opacity:0; pointer-events:none; transition:opacity .4s ease;}

/* --- En celular la app ocupa toda la pantalla: nada de marco --- */
@media (max-width:560px), (pointer:coarse) and (max-height:900px){
  body{padding:0; height:100vh; height:100dvh;}
  .app-header{display:none;}
  .stage{width:100%;}
  .phone{
    transform:none !important;
    width:100%; height:100%;
    border:none; border-radius:0; box-shadow:none;
  }
  .notch{display:none;}
  .phone > .status{padding-top:max(12px, env(safe-area-inset-top));}
  .bottom-nav{padding-bottom:max(18px, env(safe-area-inset-bottom));}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important;}
}