/* We Models — estilos de la app */

:root{
  --negro:#0C0909;
  --negro-2:#1D1618;
  --superficie:#261D1E;
  --superficie-2:#302527;
  /* Los colores de marca van tambien como "r,g,b" para poder usarlos con
     transparencia sin repetir el numero por todo el archivo. Cambiar la paleta
     entera es cambiar estas lineas y nada mas. */
  --oro:#F3C4CD;          --oro-rgb:243,196,205;
  --rosa:#F9D8DE;         --rosa-rgb:249,216,222;
  --bronce:#DEA1AD;       --bronce-rgb:222,161,173;
  --claro:#FDEDF0;
  --oro-suave:#F4D2D9;
  --sobre-oro:#301218;    --sobre-oro-rgb:48,18,24;
  --fondo-alto:#1A1113;
  --negro-rgb:12,9,9;     --negro-2-rgb:29,22,24;
  --degradado:linear-gradient(135deg,var(--claro) 0%,var(--oro) 55%,var(--bronce) 100%);
  --borde:rgba(var(--rosa-rgb),.13);
  --borde-fuerte:rgba(var(--rosa-rgb),.28);
  --texto:#F7EDEF;
  --tenue:#B8A3A7;
  --tenue-2:#907A7E;
  --ok:#7FC8A0;
  --error:#E88B8B;
  --espera:#E8C87F;
  --r-g:22px;
  --r-m:16px;
  --r-s:12px;
  --sombra:0 18px 40px rgba(0,0,0,.45);
  --seguro-arriba:env(safe-area-inset-top,0px);
  --seguro-abajo:env(safe-area-inset-bottom,0px);
  /* Caacupe One para los titulos. Va servida desde la propia app, no desde
     Google: asi funciona sin internet, no la pide nadie de fuera y no hay que
     abrirle la mano a la politica de seguridad. */
  --titulos:"Caacupe One",Georgia,"Times New Roman",serif;
}

@font-face{
  font-family:"Caacupe One";
  font-style:normal;
  font-weight:400;
  font-display:swap;             /* si tarda, se lee en la de reserva y luego cambia */
  src:url("/fuentes/caacupe-one.woff2") format("woff2");
  /* Solo el bloque latino: cubre acentos, ñ, ¿ y ¡. Son 14 KB. */
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ─────────────────── FONDO VIVO ───────────────────
   Ondas de color moviendose sobre negro, detras de toda la app.

   Cada onda es una mancha enorme con las esquinas redondeadas de forma
   irregular (los cuatro radios son distintos). Al girar muy despacio, el borde
   que cruza la pantalla sube y baja: eso es lo que se lee como una ola.
   · Girar 360 grados vuelve exactamente al punto de partida, asi que el bucle
     no tiene costura.
   · Las tres duraciones no son multiplos entre si (23, 31 y 41 s), asi que las
     olas tardan horas en volver a cruzarse igual.
   · Cada mancha es mas ancha que alta y esta puesta a una altura distinta, de
     modo que entre ellas queda negro: el color no llena la pantalla, la cruza.
   · Solo se anima transform, que va por la tarjeta grafica: no repinta nada.
   · El div va detras de todo con z-index -1. Funciona porque <html> no tiene
     fondo propio: asi el fondo de <body> se pinta en el lienzo, por debajo, y
     no tapa esta capa. Si algun dia le pones fondo a <html>, desaparece. */
.fondo-vivo{
  position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  /* Mas negro que el resto de la app, y mas cerrado segun baja. */
  /* Termina exactamente en --negro para que no se note ninguna costura donde
     la capa fija no alcanza (la barra del navegador que aparece y desaparece). */
  background:radial-gradient(130% 80% at 50% -5%, var(--fondo-alto) 0%, var(--negro) 62%);
}
/* Cada ola es una BANDA ancha y baja, rellena con un degradado ovalado que se
   apaga en los bordes: por eso no tiene contorno duro. Gira despacio alrededor
   del centro de la pantalla, y al girar la banda la cruza en diagonal, sube y
   baja. Eso es lo que se lee como una ola. */
.fondo-vivo i{
  position:absolute;display:block;
  left:50%;top:50%;width:210vw;height:78vw;
  margin:-39vw 0 0 -105vw;
  will-change:transform;
}
.fondo-vivo i:nth-child(1){
  background:radial-gradient(46% 52% at 38% 46%, rgba(var(--oro-rgb),.26), transparent 68%);
  animation:onda-a 23s linear infinite;
}
.fondo-vivo i:nth-child(2){
  background:radial-gradient(52% 44% at 64% 58%, rgba(var(--rosa-rgb),.17), transparent 70%);
  animation:onda-b 31s linear infinite;
}
.fondo-vivo i:nth-child(3){
  background:radial-gradient(40% 58% at 50% 40%, rgba(var(--bronce-rgb),.19), transparent 66%);
  animation:onda-c 41s linear infinite;
}
/* Girar 360 grados vuelve exactamente al punto de partida: el bucle no tiene
   costura. Las tres duraciones no son multiplos entre si (23, 31 y 41 s), asi
   que las olas tardan horas en volver a cruzarse igual. La del medio gira al
   reves para que se crucen de verdad y no vayan en fila. */
@keyframes onda-a{from{transform:rotate(0deg)}   to{transform:rotate(360deg)}}
@keyframes onda-b{from{transform:rotate(360deg)} to{transform:rotate(0deg)}}
@keyframes onda-c{from{transform:rotate(0deg)}   to{transform:rotate(360deg)}}
/* Si el telefono pide menos movimiento, las olas se quedan quietas. */
@media (prefers-reduced-motion:reduce){ .fondo-vivo i{animation:none} }

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}

/* ───────────────────────────── ICONOS ─────────────────────────────
   Trazo fino, sin relleno, toman el color del texto que los rodea. */
.ic{width:24px;height:24px;display:block;flex:none}
.tarjeta-ico .ic{width:26px;height:26px}
.grupo-ico .ic{width:22px;height:22px}
.servicio-emoji .ic{width:20px;height:20px;margin:0 auto}
.hoja-emoji .ic{width:26px;height:26px}
.fila-ico .ic{width:21px;height:21px}
.tab-ico .ic{width:22px;height:22px}
.estado-sello .ic{width:38px;height:38px;stroke-width:1.25}
.vacio-emoji .ic{width:42px;height:42px;margin:0 auto}
.chip .ic,.hoja-aviso .ic{width:16px;height:16px;display:inline-block;vertical-align:-3px}
.hoja-aviso .ic{width:18px;height:18px;vertical-align:-4px;margin-right:2px}
.tarjeta-ico,.grupo-ico,.hoja-emoji,.fila-ico,.ico-g,.ico-m{color:var(--oro)}
.servicio-emoji{color:var(--oro);opacity:.8}
html,body{margin:0;padding:0;height:100%;overflow-x:hidden}
body{
  background:var(--negro);
  color:var(--texto);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  font-size:16px;line-height:1.45;
  overscroll-behavior-y:none;
  -webkit-font-smoothing:antialiased;
}
button,input,textarea{font-family:inherit;font-size:16px;color:inherit}
button{cursor:pointer;border:0;background:none}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.01em}
p{margin:0}

.pantalla{display:none;min-height:100dvh}
.pantalla.activa{display:block}

/* ───────────────────────────── LOGIN ───────────────────────────── */
.login{display:none;place-items:center;position:relative;overflow:hidden;padding:24px}
.login.activa{display:grid}
.login-fondo{
  position:absolute;inset:0;
  background:
    radial-gradient(80% 55% at 50% 0%,rgba(var(--oro-rgb),.20),transparent 70%),
    radial-gradient(60% 45% at 15% 100%,rgba(var(--rosa-rgb),.10),transparent 70%);
}
.login-caja{position:relative;width:100%;max-width:380px;display:grid;gap:18px}
.marca{text-align:center;margin-bottom:8px}
.logo-pie{display:block;width:104px;height:auto;margin:26px auto 0;opacity:.6}
/* Sin el nombre escrito debajo, el logo carga solo con la identidad: por eso
   crece. Se limita al 62% del ancho para que no se coma la pantalla en un
   telefono pequeno. */
.marca-sello{width:min(196px,62vw);height:min(196px,62vw);margin:0 auto 10px;display:grid;place-items:center}
.marca-sello img,.marca-sello svg{
  width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 8px 24px rgba(94,169,221,.20)) drop-shadow(0 2px 8px rgba(0,0,0,.45));
}
.marca-nombre{
  font-family:var(--titulos);font-size:34px;font-weight:400;letter-spacing:.04em;
  background:var(--degradado);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.marca-sub{color:var(--tenue);font-size:14.5px;margin-top:0;letter-spacing:.02em}

.campo{display:grid;gap:7px}
.campo>span{font-size:13px;color:var(--tenue);letter-spacing:.04em;text-transform:uppercase}
.campo input,.campo-hoja input,textarea{
  width:100%;padding:15px 16px;background:var(--superficie);
  border:1px solid var(--borde);border-radius:var(--r-m);color:var(--texto);
  transition:border-color .18s,background .18s;
}
.campo input:focus,.campo-hoja input:focus,textarea:focus{
  outline:none;border-color:var(--borde-fuerte);background:var(--superficie-2);
}
.campo-clave{position:relative;display:block}
.ver-clave{position:absolute;right:6px;top:50%;transform:translateY(-50%);padding:10px 12px;font-size:17px;opacity:.55}
.ver-clave.on{opacity:1}

.btn-principal{
  width:100%;padding:16px;border-radius:var(--r-m);
  background:var(--degradado);color:var(--sobre-oro);font-weight:700;font-size:16px;letter-spacing:.02em;
  box-shadow:0 10px 26px rgba(var(--oro-rgb),.24);
  transition:transform .12s,opacity .18s;
}
.btn-principal:active{transform:scale(.985)}
.btn-principal[disabled]{opacity:.55;pointer-events:none}
.btn-secundario{
  padding:14px 18px;border-radius:var(--r-m);background:var(--superficie-2);
  border:1px solid var(--borde);color:var(--texto);font-weight:600;text-align:center;
  text-decoration:none;display:block;
}
.btn-salir{padding:14px 18px;border-radius:var(--r-m);background:rgba(232,139,139,.10);
  border:1px solid rgba(232,139,139,.28);color:var(--error);font-weight:600}
.ancho{width:100%}
.pie-login{text-align:center;font-size:13px;color:var(--tenue-2);margin-top:2px}
.error{
  background:rgba(232,139,139,.10);border:1px solid rgba(232,139,139,.3);
  color:var(--error);padding:11px 14px;border-radius:var(--r-s);font-size:14px;
}

/* ───────────────────────────── CABECERA ───────────────────────────── */
.cabecera{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;
  padding:calc(var(--seguro-arriba) + 16px) 18px 14px;
  background:linear-gradient(180deg,var(--negro) 72%,rgba(var(--negro-rgb),0));
  backdrop-filter:blur(12px);
}
.cabecera-texto{flex:1;min-width:0}
.saludo{font-size:12px;color:var(--tenue-2);letter-spacing:.09em;text-transform:uppercase}
.titulo-vista{
  font-family:var(--titulos);font-weight:400;font-size:23px;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.volver{
  width:38px;height:38px;flex:none;border-radius:50%;background:var(--superficie);
  border:1px solid var(--borde);font-size:24px;line-height:1;color:var(--rosa);
  display:grid;place-items:center;padding-bottom:3px;
}
.avatar{
  width:42px;height:42px;flex:none;border-radius:50%;
  background:var(--degradado);color:var(--sobre-oro);font-weight:700;font-size:15px;
  display:grid;place-items:center;box-shadow:0 6px 16px rgba(var(--oro-rgb),.25);
}

#contenido{padding:4px 18px calc(104px + var(--seguro-abajo))}
.vista{animation:entra .28s ease}
@keyframes entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ───────────────────────────── MENÚ ───────────────────────────── */
.tarjetas{display:grid;gap:13px;margin-top:6px}
.tarjeta{
  display:flex;align-items:center;gap:15px;width:100%;text-align:left;
  padding:19px 18px;border-radius:var(--r-g);
  background:linear-gradient(145deg,var(--superficie) 0%,var(--negro-2) 100%);
  border:1px solid var(--borde);
  transition:transform .14s,border-color .18s;
  position:relative;overflow:hidden;
}
.tarjeta::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(100% 120% at 100% 0%,rgba(var(--oro-rgb),.10),transparent 62%);
  pointer-events:none;
}
.tarjeta:active{transform:scale(.985);border-color:var(--borde-fuerte)}
.tarjeta-ico{
  width:52px;height:52px;flex:none;border-radius:16px;display:grid;place-items:center;font-size:25px;
  background:rgba(var(--oro-rgb),.12);border:1px solid var(--borde);
}
.tarjeta-txt{flex:1;min-width:0;display:block}
.tarjeta-titulo{display:block;font-size:17.5px;font-weight:600}
.tarjeta-sub{display:block;font-size:12.5px;color:var(--tenue);margin-top:3px;line-height:1.35}
.tarjeta-flecha{color:var(--oro);font-size:21px;opacity:.6;flex:none}

.frase{
  text-align:center;margin-top:30px;padding:0 10px;
  /* Caacupe One no tiene cursiva: aqui se queda la serif, que si la tiene.
     Fingirla inclinando la recta se ve mal. */
  font-family:Georgia,"Times New Roman",serif;font-style:italic;color:var(--tenue-2);font-size:14px;
}

/* ───────────────────────────── GRUPOS / ACORDEÓN ───────────────────────────── */
.grupo{
  border:1px solid var(--borde);border-radius:var(--r-g);margin-bottom:12px;
  background:var(--negro-2);overflow:hidden;
}
.grupo-cabeza{
  display:flex;align-items:center;gap:13px;width:100%;padding:17px 17px;text-align:left;
}
.grupo-ico{
  width:42px;height:42px;flex:none;border-radius:13px;display:grid;place-items:center;font-size:20px;
  background:rgba(var(--oro-rgb),.12);border:1px solid var(--borde);
}
.grupo-titulo{flex:1;min-width:0;font-size:16.5px;font-weight:600}
.grupo-cuenta{display:block;font-size:12px;color:var(--tenue-2);margin-top:2px;font-weight:400}
.grupo-mas{color:var(--oro);font-size:15px;transition:transform .25s;flex:none}
.grupo.abierto .grupo-mas{transform:rotate(180deg)}
.grupo-lista{display:grid;overflow:hidden;transition:grid-template-rows .3s ease,opacity .25s;grid-template-rows:0fr;opacity:0}
.grupo.abierto .grupo-lista{grid-template-rows:1fr;opacity:1}
.grupo-lista>div{overflow:hidden}

.servicio{
  display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  padding:14px 17px;border-top:1px solid rgba(var(--rosa-rgb),.07);
}
.servicio:active{background:var(--superficie)}
.servicio-emoji{flex:none;width:24px;display:grid;place-items:center}
.servicio-txt{flex:1;min-width:0;display:block}
.servicio-nombre{display:block;font-size:15.5px;font-weight:500}
.servicio-desc{display:block;font-size:12.5px;color:var(--tenue-2);margin-top:3px;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.servicio-flecha{color:var(--oro);opacity:.5;flex:none}

/* Servicio que se puede pedir pero con costo, porque aun no se cumple el plazo.
   No se apaga ni se esconde: se puede pedir igual, solo hay que decirlo. */
.servicio-costo{
  display:flex;align-items:center;gap:5px;margin-top:4px;
  font-size:12.5px;line-height:1.35;color:var(--espera);
}
.servicio-costo .ic{width:14px;height:14px;flex:none;stroke-width:1.6}
.hoja-costo,.estado-costo{
  display:flex;gap:9px;align-items:flex-start;text-align:left;
  background:rgba(232,200,127,.10);border:1px solid rgba(232,200,127,.26);
  border-radius:var(--r-s);padding:12px 14px;
  font-size:12.5px;line-height:1.5;color:var(--espera);
}
.hoja-costo{margin:0 0 16px}
.estado-costo{margin:16px 0 0}
.hoja-costo .ic,.estado-costo .ic{width:17px;height:17px;flex:none;margin-top:1px}

.aviso-provisional{
  background:rgba(232,200,127,.08);border:1px solid rgba(232,200,127,.25);color:var(--espera);
  padding:11px 14px;border-radius:var(--r-s);font-size:13px;margin-bottom:14px;
}

/* ───────────────────────────── MENSAJE LIBRE ───────────────────────────── */
.bloque{display:grid;gap:12px;margin-top:6px}
.ayuda{color:var(--tenue);font-size:14px;line-height:1.5}
textarea{resize:vertical;min-height:130px;line-height:1.5}
.contador{text-align:right;font-size:12px;color:var(--tenue-2);margin-top:-6px}

/* ───────────────────────────── LISTA DE SOLICITUDES ───────────────────────────── */
.lista{display:grid;gap:11px;margin-top:6px}
.fila{
  display:flex;flex-wrap:wrap;gap:13px;align-items:flex-start;width:100%;text-align:left;
  padding:15px 16px;border-radius:var(--r-m);background:var(--negro-2);border:1px solid var(--borde);
}
.fila:active{background:var(--superficie)}
.fila-ico{width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;font-size:19px;
  background:rgba(var(--oro-rgb),.10);border:1px solid var(--borde)}
/* El nombre del servicio pide 140px como minimo. Si con la insignia al lado no
   caben, la insignia se baja a su propia linea y la fila crece: vale mas una
   fila alta que un titulo cortado en "Extensio...". */
.fila-txt{flex:1 1 140px;min-width:0;display:block}
.fila-titulo{
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:15.5px;font-weight:600;line-height:1.3;overflow-wrap:anywhere;
}
.fila-sub{
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:12.5px;color:var(--tenue-2);margin-top:3px;line-height:1.4;
}
.insignia{
  font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:999px;white-space:nowrap;flex:none;
  letter-spacing:.03em;margin-left:auto;
}
.insignia.pendiente{background:rgba(232,200,127,.13);color:var(--espera);border:1px solid rgba(232,200,127,.3)}
.insignia.aprobado{background:rgba(127,200,160,.13);color:var(--ok);border:1px solid rgba(127,200,160,.3)}
.insignia.propuesta{background:rgba(232,200,127,.14);color:var(--espera);border:1px solid rgba(232,200,127,.32)}
.insignia.espera{background:rgba(232,200,127,.14);color:var(--espera);border:1px solid rgba(232,200,127,.32)}
/* Solicitud guardada en el telefono, esperando senal */
.fila-espera{border-color:rgba(232,200,127,.28)}
.fila-espera .fila-ico{color:var(--espera)}
.insignia.rechazado{background:rgba(232,139,139,.13);color:var(--error);border:1px solid rgba(232,139,139,.3)}

.vacio{text-align:center;padding:60px 20px;color:var(--tenue-2)}
.vacio-emoji{display:block;margin-bottom:14px;opacity:.55;color:var(--oro)}

/* ───────────────────────────── ESTADO ───────────────────────────── */
.estado-tarjeta{
  text-align:center;padding:38px 24px 30px;border-radius:var(--r-g);margin-top:10px;
  background:linear-gradient(160deg,var(--superficie),var(--negro-2));border:1px solid var(--borde);
}
.estado-sello{
  width:88px;height:88px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center;font-size:38px;
}
.estado-sello.pendiente{color:var(--espera);background:rgba(232,200,127,.12);border:1px solid rgba(232,200,127,.3);
  animation:latido 1.9s ease-in-out infinite}
.estado-sello.aprobado{color:var(--ok);background:rgba(127,200,160,.13);border:1px solid rgba(127,200,160,.35)}
.estado-sello.propuesta{color:var(--espera);background:rgba(232,200,127,.13);border:1px solid rgba(232,200,127,.35)}
.estado-sello.rechazado{color:var(--error);background:rgba(232,139,139,.13);border:1px solid rgba(232,139,139,.35)}
@keyframes latido{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.82}}
.estado-titulo{font-family:var(--titulos);font-size:22px;font-weight:400;margin-bottom:10px}
.estado-linea{color:var(--tenue);font-size:14.5px;line-height:1.55}
.estado-fecha{
  font-family:var(--titulos);font-size:20px;margin-top:12px;color:var(--rosa)}
/* solo la primera letra en mayuscula: en espanol los dias y meses van en minuscula */
.estado-fecha::first-letter{text-transform:uppercase}
.estado-hora{
  font-family:var(--titulos);font-size:38px;margin:4px 0 4px;
  background:var(--degradado);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.detalle{margin-top:16px;border-radius:var(--r-m);border:1px solid var(--borde);background:var(--negro-2);overflow:hidden}
.detalle-fila{display:flex;justify-content:space-between;gap:14px;padding:13px 16px;font-size:14px;
  border-bottom:1px solid rgba(var(--rosa-rgb),.06)}
.detalle-fila:last-child{border-bottom:0}
.detalle-fila span:first-child{color:var(--tenue-2);flex:none}
.detalle-fila span:last-child{text-align:right;word-break:break-word}
.motivo{
  margin-top:14px;padding:14px 16px;border-radius:var(--r-m);font-size:14px;line-height:1.5;
  background:rgba(232,139,139,.08);border:1px solid rgba(232,139,139,.22);
}
.acciones-estado{display:grid;gap:10px;margin-top:16px}

/* ───────────────────────────── BARRA INFERIOR ───────────────────────────── */
.barra{
  position:fixed;left:0;right:0;bottom:0;z-index:25;display:flex;
  padding:9px 12px calc(9px + var(--seguro-abajo));
  background:rgba(var(--negro-rgb),.92);backdrop-filter:blur(16px);
  border-top:1px solid var(--borde);
}
.tab{
  flex:1;display:grid;justify-items:center;gap:3px;padding:7px 4px;border-radius:14px;
  font-size:11px;color:var(--tenue-2);letter-spacing:.02em;position:relative;
}
.tab-ico{display:grid;place-items:center;transition:transform .2s}
.tab.activa{color:var(--rosa)}
.tab.activa .tab-ico{transform:translateY(-1px)}
.punto{position:absolute;top:5px;right:calc(50% - 20px);width:8px;height:8px;border-radius:50%;
  background:var(--espera);box-shadow:0 0 0 3px rgba(var(--negro-rgb),.9)}

/* ───────────────────────────── HOJA INFERIOR ───────────────────────────── */
.velo{position:fixed;inset:0;background:rgba(0,0,0,.62);z-index:40;backdrop-filter:blur(3px);
  animation:aparece .22s ease}
@keyframes aparece{from{opacity:0}to{opacity:1}}

/* ── Aviso que hay que aceptar ──────────────────────────────────
   Va por encima de la hoja (z-index mas alto) y ocupa la pantalla entera, para
   que no se pueda leer por encima ni cerrar sin querer. */
.velo-alto{z-index:60;background:rgba(0,0,0,.78)}
.dialogo{
  position:fixed;inset:0;z-index:61;display:grid;place-items:center;padding:22px;
  overflow-y:auto;
}
.dialogo-caja{
  width:100%;max-width:400px;text-align:center;
  background:linear-gradient(165deg,var(--superficie),var(--negro-2));
  border:1px solid rgba(232,200,127,.32);border-radius:var(--r-g);
  padding:30px 24px 24px;box-shadow:var(--sombra);
  animation:sube-dialogo .26s cubic-bezier(.2,.9,.3,1);
}
@keyframes sube-dialogo{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.dialogo-sello{
  width:62px;height:62px;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px;
  color:var(--espera);background:rgba(232,200,127,.13);border:1px solid rgba(232,200,127,.36);
}
.dialogo-sello .ic{width:30px;height:30px;stroke-width:1.4}
.dialogo-titulo{font-family:var(--titulos);font-size:23px;font-weight:400;line-height:1.25;margin-bottom:12px}
.dialogo-cuerpo{font-size:14.5px;line-height:1.6;color:var(--tenue)}
.dialogo-cuerpo b{color:var(--texto)}
.dialogo-cifra{
  display:block;font-family:var(--titulos);font-size:40px;line-height:1;color:var(--espera);
  margin:4px 0 14px;letter-spacing:-.01em;
}
.dialogo-nota{
  display:block;margin-top:16px;padding-top:14px;border-top:1px solid var(--borde);
  font-size:13px;color:var(--tenue-2);line-height:1.55;
}
.dialogo-acciones{display:grid;grid-template-columns:1fr 1.25fr;gap:11px;margin-top:22px}
@media (max-width:359px){ .dialogo-acciones{grid-template-columns:1fr} }
.hoja{
  position:fixed;left:0;right:0;bottom:0;z-index:50;max-height:92dvh;
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--negro-2);border-top:1px solid var(--borde-fuerte);
  border-radius:26px 26px 0 0;box-shadow:var(--sombra);
  animation:sube .3s cubic-bezier(.2,.9,.25,1);
  padding-bottom:calc(18px + var(--seguro-abajo));
}
@keyframes sube{from{transform:translateY(100%)}to{transform:none}}
.hoja-agarre{width:42px;height:4px;border-radius:99px;background:var(--borde-fuerte);margin:11px auto 4px;flex:none}
.hoja-cuerpo{padding:14px 20px 10px;display:grid;gap:16px;overflow-y:auto;flex:1 1 auto;min-height:0}
.hoja-cabeza{display:flex;gap:14px;align-items:center}
.hoja-emoji{
  width:52px;height:52px;flex:none;border-radius:16px;display:grid;place-items:center;font-size:25px;
  background:rgba(var(--oro-rgb),.12);border:1px solid var(--borde);
}
.hoja-cabeza h3{font-size:19px}
.hoja-ruta{font-size:12.5px;color:var(--tenue-2);margin-top:3px}
.hoja-desc{font-size:14px;color:var(--tenue);line-height:1.55;margin-top:-4px}
.campo-hoja{display:grid;gap:9px}
.campo-hoja>span{font-size:13px;color:var(--tenue);letter-spacing:.03em}
.campo-hoja em{color:var(--tenue-2);font-style:normal;font-size:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  padding:10px 15px;border-radius:999px;background:var(--superficie);border:1px solid var(--borde);
  font-size:13.5px;color:var(--tenue);transition:all .16s;
}
.chip.activa{background:rgba(var(--oro-rgb),.16);border-color:var(--borde-fuerte);color:var(--rosa);font-weight:600}
.chip-icono{border-style:dashed}
input[type=time],input[type=date]{color-scheme:dark}
.campo-hoja input[type=time],.campo-hoja input[type=date]{
  width:100%;padding:13px 15px;background:var(--superficie);border:1px solid var(--borde-fuerte);
  border-radius:var(--r-m);color:var(--texto);font-size:15px}
.elegido{font-size:13px;color:var(--rosa);margin-top:2px}
.ayuda-chip{font-size:12px;color:var(--tenue-2);margin:2px 0 0}

/* ── el diseno obligatorio (manicura) ──
   Miniatura al lado del boton, no encima: con la vista previa grande el
   boton de cambiar se salia de la pantalla. Es el mismo tropiezo que ya
   tuvimos en "Mis solicitudes". */
.campo-foto .chip-icono{justify-self:start}
.foto-vista{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.foto-vista img{
  width:84px;height:84px;object-fit:cover;flex:0 0 auto;
  border-radius:var(--r-m);border:1px solid var(--borde-fuerte);
  background:var(--superficie);display:block;
}
.foto-vista .chip{flex:0 1 auto}

/* ── boton del menu bloqueado por administracion ── */
.tarjeta.bloqueada{opacity:.5}
.tarjeta.bloqueada .tarjeta-ico,.tarjeta.bloqueada .tarjeta-flecha{color:var(--tenue-2)}
.tarjeta.bloqueada .tarjeta-sub{color:var(--espera)}
.tarjeta.bloqueada .tarjeta-flecha .ic{width:19px;height:19px}

/* ── propuesta de otro horario ── */
.propuesta-acciones{display:grid;grid-template-columns:1fr 1.2fr;gap:11px;margin-top:16px;width:100%}
.propuesta-acciones .btn-principal{padding:14px;font-size:15px}

/* ─────────────────────── CALENDARIO ───────────────────────
   Rejilla propia, con los colores de la marca. Reemplaza al
   calendario gris que trae cada telefono. */
.calendario{
  background:var(--superficie);
  border:1px solid var(--borde-fuerte);
  border-radius:var(--r-m);
  padding:12px 12px 14px;
  animation:cal-entra .18s ease-out;
}
@keyframes cal-entra{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.cal-cabeza{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.cal-mes{
  font-size:14.5px;font-weight:600;color:var(--rosa);
  text-transform:capitalize;letter-spacing:.2px;text-align:center;flex:1;
}
.cal-flecha{
  width:34px;height:34px;flex:none;border-radius:50%;
  display:grid;place-items:center;
  background:var(--superficie-2);border:1px solid var(--borde);
  color:var(--oro);font-size:19px;line-height:1;
  transition:background .16s,color .16s,opacity .16s;
}
.cal-flecha:hover:not(:disabled){background:rgba(var(--oro-rgb),.18)}
.cal-flecha:disabled{opacity:.25;cursor:default}

.cal-semana{
  display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:5px;
}
.cal-semana span{
  text-align:center;font-size:11px;font-weight:600;color:var(--tenue-2);
  text-transform:uppercase;letter-spacing:.6px;
}

.cal-rejilla{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-vacia{aspect-ratio:1}
.cal-dia{
  aspect-ratio:1;width:100%;
  display:grid;place-items:center;
  border-radius:11px;
  background:transparent;border:1px solid transparent;
  font-size:14px;color:var(--texto);
  transition:background .14s,color .14s,border-color .14s,transform .14s;
}
.cal-dia:hover:not(:disabled):not(.elegida){background:var(--superficie-2);border-color:var(--borde)}
.cal-dia.hoy:not(.elegida){color:var(--oro);font-weight:600;border-color:var(--borde-fuerte)}
.cal-dia.elegida{
  background:var(--degradado);color:var(--sobre-oro);font-weight:700;
  border-color:transparent;transform:scale(1.04);
  box-shadow:0 6px 16px rgba(var(--oro-rgb),.32);
}
.cal-dia.fuera{color:var(--tenue-2);opacity:.32;cursor:default}

/* ── enviar sin nombre (requerimientos y quejas) ── */
.anonimo{
  display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  padding:14px 16px;margin-bottom:13px;
  background:var(--superficie);border:1px solid var(--borde);border-radius:var(--r-m);
  transition:background .16s,border-color .16s;
}
.anonimo:hover{border-color:var(--borde-fuerte)}
.anonimo-ico{color:var(--tenue-2);display:grid;place-items:center;flex:none;transition:color .16s}
.anonimo-ico .ic{width:24px;height:24px}
.anonimo-titulo{flex:1;min-width:0;font-size:14.5px;font-weight:600;color:var(--texto)}
.anonimo-palanca{
  width:44px;height:25px;flex:none;border-radius:999px;position:relative;
  background:var(--superficie-2);border:1px solid var(--borde-fuerte);transition:background .18s;
}
.anonimo-palanca::after{
  content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;
  background:var(--tenue-2);transition:left .18s,background .18s;
}
.anonimo.puesto{background:rgba(var(--oro-rgb),.10);border-color:var(--borde-fuerte)}
.anonimo.puesto .anonimo-ico{color:var(--oro)}
.anonimo.puesto .anonimo-palanca{background:var(--degradado);border-color:transparent}
.anonimo.puesto .anonimo-palanca::after{left:22px;background:#fff}

/* ─────────────────────── BARRAS DESLIZANTES ───────────────────────
   Para elegir el día y la hora del spa arrastrando, sin teclear. */
.corredera{
  background:var(--superficie);border:1px solid var(--borde-fuerte);
  border-radius:var(--r-m);padding:16px 18px 12px;
}
.corredera-valor{
  margin:0 0 12px;text-align:center;line-height:1;
  display:flex;align-items:baseline;justify-content:center;gap:8px;
}
.corredera-dia{
  font-family:var(--titulos);font-size:40px;font-weight:700;
  background:var(--degradado);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.corredera-mes::first-letter{text-transform:uppercase}
.corredera-mes{
  font-size:13px;color:var(--tenue);
  text-align:left;line-height:1.3;max-width:9em;
}
#valor-hora{
  font-family:var(--titulos);font-size:40px;font-weight:700;
  background:var(--degradado);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.corredera-ampm{
  font-size:14px;font-weight:600;color:var(--rosa);
  background:rgba(var(--rosa-rgb),.12);border:1px solid var(--borde);
  border-radius:999px;padding:4px 11px;letter-spacing:.02em;white-space:nowrap;
}
.corredera-topes{
  display:flex;justify-content:space-between;margin-top:9px;
  font-size:11.5px;color:var(--tenue-2);
}

/* La barra en si. Hay que peinarla a mano en cada navegador. */
.corredera-barra{
  -webkit-appearance:none;appearance:none;
  width:100%;height:34px;background:transparent;margin:0;display:block;cursor:pointer;
  /* Sin esto, arrastrar con 3 grados de desviacion hacia scroll de la hoja
     en vez de mover el dia. */
  touch-action:none;
  --recorrido:0%;
}
.corredera-barra:focus{outline:none}
.corredera-barra::-webkit-slider-runnable-track{
  height:8px;border-radius:999px;
  background:linear-gradient(90deg,var(--oro) var(--recorrido),var(--superficie-2) var(--recorrido));
  border:1px solid var(--borde);
}
.corredera-barra::-moz-range-track{
  height:8px;border-radius:999px;background:var(--superficie-2);border:1px solid var(--borde);
}
.corredera-barra::-moz-range-progress{height:8px;border-radius:999px;background:var(--oro)}
.corredera-barra::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:28px;height:28px;border-radius:50%;margin-top:-11px;
  background:var(--degradado);border:2px solid var(--negro-2);
  box-shadow:0 3px 12px rgba(0,0,0,.5),0 0 0 1px var(--oro);
  transition:transform .12s;
}
.corredera-barra::-moz-range-thumb{
  width:26px;height:26px;border-radius:50%;
  background:var(--oro-suave);border:2px solid var(--negro-2);
  box-shadow:0 3px 12px rgba(0,0,0,.5);
}
.corredera-barra:active::-webkit-slider-thumb{transform:scale(1.12)}
.corredera-barra:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px rgba(var(--rosa-rgb),.35)}

/* ─────────────────────── ROOM SERVICE ───────────────────────
   Las fotos vienen en PNG transparente: no llevan marco ni fondo,
   se apoyan directo sobre el color de la app. */
.pedido-cupo{
  font-size:12.5px;color:var(--tenue-2);margin:0 0 12px;
  display:flex;align-items:center;gap:6px;
}
.pedido-cupo::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--oro);flex:none;
}
.pedido-cupo.lleno{color:var(--espera)}
.pedido-cupo.lleno::before{background:var(--espera)}

.productos{
  /* Antes eran 2 columnas fijas: en el celular salian enormes y en PC, con los
     600px de ancho, peor todavia. Con auto-fill la ficha tiene un ancho mas o
     menos constante y el numero de columnas lo pone la pantalla: 3 en un
     celular normal, 5 en el escritorio. */
  display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px;
  padding-bottom:88px;                 /* deja aire para la barra del pedido */
}
.producto{
  position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:2px;padding:10px 8px 12px;
  background:var(--superficie);border:1px solid var(--borde);border-radius:var(--r-m);
  transition:border-color .16s,background .16s,transform .12s,opacity .16s;
}
.producto:active{transform:scale(.97)}
.producto.elegido{
  border-color:var(--oro);background:rgba(var(--oro-rgb),.10);
  box-shadow:0 0 0 1px var(--oro) inset;
}
.producto.sin-cupo{opacity:.34}

.producto-foto{
  position:relative;width:100%;max-width:86px;margin-inline:auto;aspect-ratio:1;
  display:grid;place-items:center;margin-bottom:3px;
}
.producto-sinfoto{
  display:grid;place-items:center;width:100%;height:100%;color:var(--tenue-2);
}
.producto-sinfoto svg{width:46px;height:46px}
.producto-foto img{
  width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.45));
}
.producto-cuenta{
  position:absolute;top:-2px;right:-2px;
  min-width:22px;height:22px;padding:0 5px;border-radius:999px;
  display:grid;place-items:center;
  background:var(--degradado);color:var(--sobre-oro);
  font-size:13px;font-weight:700;line-height:1;
  box-shadow:0 3px 10px rgba(0,0,0,.45);
}
.producto-menos{
  position:absolute;top:6px;left:6px;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;font-size:19px;line-height:1;font-weight:700;
  background:var(--superficie-2);border:1px solid var(--borde-fuerte);color:var(--rosa);
}
.producto-menos:active{transform:scale(.92)}
.producto-nombre{display:block;max-width:100%;overflow-wrap:anywhere;font-size:13px;font-weight:600;color:var(--texto);line-height:1.3}
/* Dos lineas y corta: una descripcion larga estiraba toda la fila y las
   fichas volvian a verse enormes. */
.producto-desc{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
  overflow:hidden;font-size:11px;color:var(--tenue-2);line-height:1.35;margin-top:2px;
}

/* barra de abajo con el resumen del pedido */
.pedido-barra{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  display:flex;align-items:center;gap:12px;
  padding:12px 18px calc(12px + var(--seguro-abajo));
  background:rgba(var(--negro-2-rgb),.94);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid var(--borde-fuerte);
  animation:barra-entra .2s ease-out;
}
@keyframes barra-entra{from{transform:translateY(100%)}to{transform:none}}
.pedido-resumen{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto}
.pedido-total{
  width:32px;height:32px;flex:none;border-radius:50%;
  display:grid;place-items:center;
  background:var(--degradado);color:var(--sobre-oro);font-weight:700;font-size:15px;
}
.pedido-lista{
  font-size:12.5px;color:var(--tenue);line-height:1.35;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.pedido-barra .btn-principal{flex:none;width:auto;padding:13px 22px;font-size:14.5px;box-shadow:none}

/* lista del pedido dentro de la hoja de confirmacion */
.pedido-detalle{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.pedido-detalle li{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:10px 13px;background:var(--superficie);border:1px solid var(--borde);
  font-size:14px;
}
.pedido-detalle li:first-child{border-radius:var(--r-s) var(--r-s) 0 0}
.pedido-detalle li:last-child{border-radius:0 0 var(--r-s) var(--r-s)}
.pedido-detalle li:only-child{border-radius:var(--r-s)}
.pedido-detalle b{color:var(--oro);font-size:13px}

/* ── cupo gastado: "una manicura cada 30 dias" ── */
.grupo-cupo{
  font-size:11px;color:var(--espera);background:rgba(232,200,127,.12);
  border:1px solid rgba(232,200,127,.28);border-radius:999px;
  padding:4px 9px;white-space:nowrap;flex:none;margin-left:auto;
}
.cupo-aviso{
  display:flex;gap:9px;align-items:flex-start;
  background:rgba(232,200,127,.09);border:1px solid rgba(232,200,127,.22);
  border-radius:var(--r-s);padding:11px 13px;margin:0 0 10px;
  font-size:12.5px;line-height:1.5;color:var(--espera);
}
.cupo-aviso .ic{width:17px;height:17px;flex:none;margin-top:1px}

/* ──────────────── NOTA DE UNA CATEGORIA ──────────────── */
.nota-categoria{
  display:flex;gap:9px;align-items:flex-start;
  background:rgba(var(--oro-rgb),.09);
  border:1px solid var(--borde);
  border-left:3px solid var(--oro);
  border-radius:var(--r-s);
  padding:12px 14px;margin-bottom:14px;
  font-size:13px;line-height:1.55;color:var(--tenue);
}
.nota-categoria .ic{width:18px;height:18px;flex:none;color:var(--oro);margin-top:1px}
.hoja-aviso{
  background:rgba(var(--oro-rgb),.10);border:1px solid var(--borde);color:var(--oro);
  padding:11px 14px;border-radius:var(--r-s);font-size:13px;line-height:1.5;margin-top:-4px}
/* El mismo aviso, pero cuando ya no se puede: ambar, no dorado. */
.hoja-aviso-no{background:rgba(232,200,127,.09);border-color:rgba(232,200,127,.30);color:var(--espera)}
.hoja-pie{flex:none;padding:13px 20px 4px;border-top:1px solid var(--borde);background:var(--negro-2)}
.hoja-pie:empty{display:none}
.hoja-acciones{display:grid;grid-template-columns:1fr 1.4fr;gap:11px}
.hoja-corta .hoja-cuerpo{gap:13px;overflow:visible}
.perfil-info{display:flex;gap:14px;align-items:center;margin-bottom:4px}
.perfil-sello{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-weight:700;
  background:var(--degradado);color:var(--sobre-oro);font-size:18px;flex:none}

/* ───────────────────────────── BRINDIS (toast) ───────────────────────────── */
.brindis{
  position:fixed;left:50%;transform:translateX(-50%);bottom:calc(96px + var(--seguro-abajo));z-index:60;
  background:var(--superficie-2);border:1px solid var(--borde-fuerte);color:var(--texto);
  padding:13px 20px;border-radius:999px;font-size:14px;box-shadow:var(--sombra);
  max-width:88vw;text-align:center;animation:sube-brindis .3s ease;
}
@keyframes sube-brindis{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}

/* ───────────────────────────── CARGANDO ───────────────────────────── */
.girando{display:inline-block;width:17px;height:17px;border-radius:50%;
  border:2px solid rgba(var(--sobre-oro-rgb),.3);border-top-color:var(--sobre-oro);animation:gira .7s linear infinite;vertical-align:-3px}
@keyframes gira{to{transform:rotate(360deg)}}

@media (min-width:640px){
  #contenido,.cabecera{max-width:600px;margin-inline:auto}
  .barra{max-width:600px;margin-inline:auto;border-radius:20px 20px 0 0;border:1px solid var(--borde);border-bottom:0}
  .hoja{max-width:560px;margin-inline:auto;border-radius:26px;bottom:16px;left:16px;right:16px}
}