/* Panel de Mila 2.0 — estilos (PANEL-2.0, rediseño premium).
   Solo presentación. La lógica vive en app.js.
   Identidad: blanco, morado, lila, menta. Fondo claro siempre. */

:root{
  --lila-900:#31249b;
  --lila-700:#5438dc;
  --lila-500:#7a5af8;
  --lila-300:#b9a6ff;
  --lila-100:#e9e2ff;
  --lila-050:#f4f0ff;
  --tinta:#241f3a;
  --tinta-suave:#615b7e;
  --menta-700:#0e9f74;
  --menta-500:#19c895;
  --menta-100:#d2f7ea;
  --rojo-600:#e0483a;
  --rojo-100:#ffe9e6;
  --ambar-700:#8f6100;
  --ambar-100:#ffefc7;
  --blanco:#ffffff;
  --borde:#ece7fb;
  --sombra-1:0 1px 2px rgba(36,31,58,.05), 0 4px 14px rgba(84,56,220,.07);
  --sombra-2:0 2px 4px rgba(36,31,58,.06), 0 14px 38px rgba(84,56,220,.13);
  --radio:16px;
  --radio-g:22px;
  --suave:cubic-bezier(.22,.9,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif;
  background:
    radial-gradient(900px 520px at 12% -8%, #e9e0ff 0%, transparent 58%),
    radial-gradient(760px 480px at 96% 12%, #dcf7ee 0%, transparent 55%),
    linear-gradient(168deg,#f5f0ff 0%,#faf8ff 55%,#f0f4ff 100%);
  color:var(--tinta);
  min-height:100vh;
  padding:28px 16px 96px;
  -webkit-font-smoothing:antialiased;
}

.oculto{display:none !important}
.centrado{text-align:center}

/* ===== tarjeta principal ===== */
.tarjeta{
  max-width:720px;margin:0 auto;background:var(--blanco);
  border-radius:var(--radio-g);box-shadow:var(--sombra-2);overflow:hidden;
  border:1px solid var(--borde);
  transition:max-width .4s var(--suave);
}
body.modo-panel .tarjeta{max-width:1024px}

/* ===== cabecera ===== */
.cabecera{
  text-align:center;padding:34px 28px 0;
  display:flex;flex-direction:column;align-items:center;gap:2px;
}
.mila-wrap{
  height:172px;display:flex;align-items:flex-end;justify-content:center;
  margin-bottom:8px;position:relative;
}
.mila-wrap::before{
  content:'';position:absolute;bottom:2px;left:50%;transform:translateX(-50%);
  width:140px;height:24px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(84,56,220,.14),transparent 70%);
}
.mila-img{
  height:168px;width:auto;position:relative;
  transition:opacity .25s ease;
  animation:respirar 6s ease-in-out infinite;
}
@keyframes respirar{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.mila-img.cambiando{opacity:0}
.cabecera h1{
  font-size:30px;letter-spacing:-.6px;font-weight:800;
  background:linear-gradient(120deg,var(--lila-700),var(--lila-500));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.cabecera .subtitulo{color:var(--tinta-suave);font-size:14.5px;margin-top:2px}

/* Cabecera compacta cuando el panel está a la vista: el estado es el protagonista */
body.modo-panel .cabecera{
  flex-direction:row;align-items:center;gap:16px;text-align:left;
  padding:22px 28px 0;
}
body.modo-panel .mila-wrap{height:84px;margin-bottom:0}
body.modo-panel .mila-wrap::before{width:70px;height:12px;bottom:0}
body.modo-panel .mila-img{height:82px}
body.modo-panel .cabecera h1{font-size:22px}
body.modo-panel .cabecera .subtitulo{font-size:13px}

/* ===== indicador de pasos (solo onboarding) ===== */
.pasos-indicador{
  display:flex;justify-content:center;gap:8px;margin:18px 24px 0;
}
.pasos-indicador span{
  width:26px;height:5px;border-radius:3px;background:var(--lila-100);
  transition:background .25s;
}
.pasos-indicador span.activo{background:var(--lila-500)}
.pasos-indicador span.listo{background:var(--menta-500)}

/* ===== héroe de estado (protagonista) ===== */
.estado{
  margin:20px 28px 0;border-radius:var(--radio);
  padding:18px 22px;display:flex;align-items:center;gap:15px;
  transition:background .5s ease;
}
.estado .punto{width:14px;height:14px;border-radius:50%;flex-shrink:0;position:relative}
.estado .punto::after{
  content:'';position:absolute;inset:-5px;border-radius:50%;
  border:2px solid currentColor;opacity:.4;
  animation:pulso 2.6s ease-out infinite;
}
@keyframes pulso{0%{transform:scale(.6);opacity:.55}100%{transform:scale(1.35);opacity:0}}
.estado .textos{flex:1;min-width:0}
.estado .titulo{font-weight:800;font-size:18px;letter-spacing:-.2px}
.estado .detalle{font-size:13px;margin-top:3px;opacity:.92}
.estado.ok{background:linear-gradient(120deg,var(--menta-100),#eafcf5);color:var(--menta-700)}
.estado.ok .punto{background:var(--menta-500);color:var(--menta-500)}
.estado.mal{background:var(--rojo-100);color:var(--rojo-600)}
.estado.mal .punto{background:var(--rojo-600);color:var(--rojo-600)}
.estado.mal .punto::after{animation:none}
.estado.pausa{background:var(--lila-100);color:var(--lila-700)}
.estado.pausa .punto{background:var(--lila-500);color:var(--lila-500)}
.estado.pausa .punto::after{animation:none}

/* ===== aviso ámbar (computador dormido) ===== */
.aviso-ambar{
  margin:12px 28px 0;border-radius:var(--radio);
  background:var(--ambar-100);color:var(--ambar-700);
  padding:14px 18px;font-size:14px;line-height:1.55;
  border-left:4px solid #f0b400;
}
.aviso-ambar strong{font-weight:700}

/* ===== aviso takeover (la dueña atiende a mano; discreto) ===== */
.aviso-takeover{
  border-radius:var(--radio);
  background:var(--lila-050);color:var(--lila-700);
  border:1px solid var(--lila-100);
  padding:12px 16px;font-size:13.5px;line-height:1.5;margin-bottom:16px;
}

/* ===== pestañas ===== */
.pestanas{
  display:flex;gap:2px;margin:22px 28px 0;
  border-bottom:1.5px solid var(--lila-100);
}
.pestana{
  background:none;border:none;font-family:inherit;cursor:pointer;
  padding:10px 18px;font-size:14.5px;font-weight:600;
  color:var(--tinta-suave);position:relative;
  transition:color .18s;
}
.pestana::after{
  content:'';position:absolute;left:10px;right:10px;bottom:-1.5px;height:3px;
  border-radius:3px;background:var(--lila-500);
  transform:scaleX(0);transition:transform .25s var(--suave);
}
.pestana:hover{color:var(--lila-700)}
.pestana.activa{color:var(--lila-700)}
.pestana.activa::after{transform:scaleX(1)}
.pestana:focus-visible{outline:2px solid var(--lila-500);outline-offset:2px;border-radius:6px}

/* ===== contenido / secciones ===== */
.contenido{padding:26px 28px}
.contenido > section{animation:aparecer .3s var(--suave)}
@keyframes aparecer{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

h2{font-size:20px;margin-bottom:6px;color:var(--tinta);letter-spacing:-.2px}
.texto{color:var(--tinta);font-size:14.5px;line-height:1.6;margin-bottom:16px}
.detalle{font-size:13.5px;color:var(--tinta-suave);line-height:1.55}

/* ===== Inicio: rejilla del panel ===== */
.grid-inicio{display:grid;grid-template-columns:1.02fr 1fr;gap:18px;align-items:start}
.col-inicio{display:flex;flex-direction:column;gap:18px;min-width:0}

/* Aparición escalonada y suave de las tarjetas del Inicio */
.grid-inicio .stat,
.grid-inicio .carta,
.grid-inicio .acciones,
.grid-inicio .vitrina-pro{animation:aparecer .4s var(--suave) backwards}
.grid-inicio .stat:nth-child(2){animation-delay:.05s}
.grid-inicio .carta{animation-delay:.08s}
.grid-inicio .acciones{animation-delay:.12s}
.grid-inicio .vitrina-pro{animation-delay:.16s}

/* ===== Inicio: estadísticas ===== */
.stats{display:flex;gap:14px}
.stat{
  flex:1;border-radius:var(--radio);padding:18px 16px 16px;text-align:center;
  background:var(--blanco);
  border:1px solid var(--borde);box-shadow:var(--sombra-1);
  transition:transform .3s var(--suave),box-shadow .3s;
}
.stat:hover{transform:translateY(-2px);box-shadow:var(--sombra-2)}
.stat-icono{font-size:17px;margin-bottom:4px;opacity:.85}
.stat .num{
  font-size:34px;font-weight:800;letter-spacing:-1px;line-height:1.15;
  background:linear-gradient(120deg,var(--lila-700),var(--lila-500));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat .num.tick{animation:tick .5s var(--suave)}
@keyframes tick{40%{transform:scale(1.12)}}
.stat .lbl{font-size:12.5px;color:var(--tinta-suave);margin-top:2px;font-weight:500}

/* ===== tarjetas genéricas del panel ===== */
.carta{
  background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radio);
  box-shadow:var(--sombra-1);overflow:hidden;
}
.carta-cab{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 18px 12px;border-bottom:1px solid var(--lila-050);
}
.carta-cab h3{font-size:14.5px;font-weight:700;letter-spacing:-.1px}
.carta-nota{font-size:11.5px;color:var(--tinta-suave);font-weight:500}
.btn-mini{
  font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
  border:1px solid var(--lila-100);background:var(--lila-050);color:var(--lila-700);
  border-radius:999px;padding:5px 14px;
  transition:background .2s,border-color .2s,transform .2s var(--suave);
}
.btn-mini:hover{background:var(--lila-100);border-color:var(--lila-300);transform:translateY(-1px)}
.btn-mini:focus-visible{outline:2px solid var(--lila-500);outline-offset:2px}

/* ===== ficha oficial del negocio ===== */
.fila{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:12px 18px;font-size:14px;gap:16px;
}
.fila+.fila{border-top:1px solid var(--lila-050)}
.fila .k{color:var(--tinta-suave);font-size:12.5px;font-weight:500;flex-shrink:0}
.fila .v{font-weight:600;color:var(--tinta);text-align:right;word-break:break-word}
.fila .v.ok{color:var(--menta-700)}
.fila .v.mal{color:var(--rojo-600)}
.fila .v.neutro{color:var(--tinta)}
.ficha-negocio .fila:first-child .v{font-size:15px;font-weight:700}

/* ===== actividad reciente ===== */
.actividad{list-style:none}
.actividad li{
  display:flex;gap:12px;align-items:flex-start;
  padding:11px 18px;font-size:13.5px;line-height:1.45;
}
.actividad li+li{border-top:1px solid var(--lila-050)}
.actividad .evt-icono{flex-shrink:0;font-size:15px;line-height:1.4}
.actividad .evt-texto{flex:1;color:var(--tinta);font-weight:500}
.actividad .evt-cuando{flex-shrink:0;font-size:11.5px;color:var(--tinta-suave);margin-top:2px}
.actividad-vacia{padding:26px 20px 28px;text-align:center}
.actividad-vacia .vacia-icono{font-size:26px;margin-bottom:8px}
.actividad-vacia p{font-size:13.5px;font-weight:600;color:var(--tinta);line-height:1.6}
.actividad-vacia p span{font-weight:400;font-size:12.5px;color:var(--tinta-suave)}

/* ===== zona QR ===== */
.zona-qr{
  background:var(--lila-050);border:1px solid var(--lila-100);
  border-radius:var(--radio);
  padding:24px;text-align:center;margin-bottom:20px;
}
.zona-qr img{
  width:220px;height:220px;max-width:100%;margin:0 auto 14px;background:#fff;
  border-radius:12px;box-shadow:0 4px 16px rgba(84,56,220,.15);display:block;
}
.zona-qr p{font-size:14px;color:var(--tinta-suave);max-width:380px;margin:0 auto;line-height:1.5}

.pasos-lista{
  background:var(--lila-050);border:1px solid var(--lila-100);
  border-radius:var(--radio);padding:16px 18px;font-size:14px;line-height:1.9;
  color:var(--tinta);margin-top:16px;text-align:left;
}

/* ===== botones ===== */
.acciones{display:flex;gap:10px;margin-top:2px;flex-wrap:wrap}
section:not(#panel) .acciones{margin-top:20px}
.btn{
  font-family:inherit;font-size:14.5px;font-weight:600;cursor:pointer;
  border-radius:12px;padding:12px 20px;border:none;
  transition:transform .25s var(--suave),box-shadow .25s,background .2s;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid var(--lila-700);outline-offset:2px}
.btn:disabled{opacity:.6;cursor:default;transform:none}
.btn-primario{
  background:linear-gradient(120deg,var(--lila-700),var(--lila-500));
  color:#fff;box-shadow:0 5px 16px rgba(84,56,220,.32);
}
.btn-primario:hover{box-shadow:0 8px 22px rgba(84,56,220,.42)}
.btn-secundario{background:var(--lila-050);color:var(--lila-700);border:1px solid var(--lila-100)}
.btn-secundario:hover{background:var(--lila-100)}
.btn-menta{background:var(--menta-100);color:var(--menta-700)}
.btn-menta:hover{background:#bff0e0}
.btn-pausa{background:var(--blanco);color:var(--lila-700);border:1.5px solid var(--lila-300);flex-shrink:0;border-radius:999px}
.btn-pausa:hover{background:var(--lila-050)}

/* ===== formularios ===== */
.campo{margin-bottom:18px}
.campo > label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.campo .ayuda{font-size:12.5px;color:var(--tinta-suave);margin-top:5px;line-height:1.5}
.campo input[type=text],
.campo input[type=password],
.campo input[type=number],
.campo textarea{
  width:100%;font-family:inherit;font-size:14.5px;color:var(--tinta);
  background:var(--lila-050);border:1.5px solid var(--lila-100);
  border-radius:12px;padding:12px 14px;
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.campo textarea{min-height:88px;resize:vertical}
.campo input:focus,.campo textarea:focus{
  outline:none;border-color:var(--lila-500);background:#fff;
  box-shadow:0 0 0 4px rgba(122,90,248,.12);
}
.campo input.numero{max-width:150px;text-align:center;font-weight:700;font-size:16px}
.campo input.codigo-licencia{
  text-align:center;font-weight:700;font-size:16px;
  letter-spacing:1.5px;text-transform:uppercase;
}
.opcional{color:var(--tinta-suave);font-weight:400;font-size:12.5px}

/* selector de opciones (proveedor / tono) */
.opciones-tono{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.opciones-tono label{
  flex:1;min-width:120px;cursor:pointer;
  background:var(--lila-050);border:1.5px solid var(--lila-100);border-radius:12px;
  padding:12px 14px;font-size:14px;font-weight:600;text-align:center;
  transition:border-color .2s,background .2s,transform .25s var(--suave);
}
.opciones-tono label:hover{border-color:var(--lila-300);transform:translateY(-1px)}
.opciones-tono input{margin-right:6px;accent-color:var(--lila-500)}

/* ===== chip (paso QR onboarding) ===== */
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;border-radius:999px;font-size:14px;font-weight:600;
  margin:0 auto 12px;
}
.chip .punto{width:10px;height:10px;border-radius:50%;background:currentColor}
.chip.esperando{background:var(--ambar-100);color:var(--ambar-700)}
.chip.conectado{background:var(--menta-100);color:var(--menta-700)}
.chip.desconectado{background:var(--rojo-100);color:var(--rojo-600)}
.chip.pausada{background:var(--lila-100);color:var(--lila-700)}

/* ===== avisos de resultado (guardado / errores en formularios) ===== */
.aviso{
  border-radius:12px;padding:12px 16px;font-size:14px;line-height:1.5;margin-top:14px;
  animation:aparecer .3s var(--suave);
}
.aviso.info{background:var(--lila-050);color:var(--lila-700);border:1px solid var(--lila-100)}
.aviso.ok{background:var(--menta-100);color:var(--menta-700)}
.aviso.error{background:var(--rojo-100);color:var(--rojo-600)}
#zona-alertas-panel .aviso{background:var(--rojo-100);color:var(--rojo-600);margin-top:0;margin-bottom:12px;line-height:1.55}
#zona-alertas-panel .aviso strong{font-weight:700}
#resultado-panel .aviso{margin-top:0;margin-bottom:14px}

/* ===== vitrina pro ===== */
.vitrina-pro{
  padding:16px;border:1.5px dashed var(--lila-300);border-radius:var(--radio);
  background:linear-gradient(160deg,var(--lila-050),#fff);
}
.vitrina-titulo{font-weight:700;color:var(--lila-700);margin-bottom:10px;font-size:14.5px}
.btn-pro{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;
  margin:6px 0;padding:11px 14px;border:1px solid var(--lila-100);border-radius:12px;
  background:var(--blanco);color:var(--tinta);font-family:inherit;font-size:13.5px;font-weight:500;
  cursor:pointer;transition:border-color .2s,transform .25s var(--suave),box-shadow .25s}
.btn-pro:hover{border-color:var(--lila-300);transform:translateX(3px);box-shadow:var(--sombra-1)}
.pro-tag{font-size:11px;font-weight:700;white-space:nowrap;color:var(--lila-700);
  background:var(--lila-100);border-radius:999px;padding:3px 10px}

/* ===== pie con logo ===== */
.pie{
  text-align:center;padding:22px;border-top:1px solid var(--lila-050);margin-top:8px;
}
.pie .pie-logo{height:52px;width:auto;margin-bottom:6px}
.pie p{color:var(--tinta-suave);font-size:13px}
.pie p span,.pie p b{color:var(--lila-700);font-weight:700}

/* ═══════════ CHIBI MILA: la pequeña compañera del panel ═══════════
   Casi estática: respira, parpadea de vez en cuando e inclina apenas
   la cabeza. La burbuja cambia de consejo con transición suave. */
.chibi{
  position:fixed;right:22px;bottom:18px;z-index:40;
  display:flex;flex-direction:column;align-items:flex-end;gap:8px;
  pointer-events:none;
}
.chibi-sprite{
  position:relative;width:92px;height:92px;
  animation:chibi-respira 5.5s ease-in-out infinite;
  transform-origin:50% 100%;
  filter:drop-shadow(0 8px 14px rgba(84,56,220,.22));
}
@keyframes chibi-respira{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-2px) scale(1.012)}
}
.chibi-sprite img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.chibi-sprite .cuadro-b{opacity:0}
.chibi-sprite.cuadro2 .cuadro-a{opacity:0}
.chibi-sprite.cuadro2 .cuadro-b{opacity:1}
.chibi-sprite.ladea{animation:chibi-respira 5.5s ease-in-out infinite, chibi-ladea 2.4s ease-in-out}
@keyframes chibi-ladea{
  0%,100%{rotate:0deg}
  35%{rotate:2.4deg}
  65%{rotate:1.2deg}
}
.burbuja{
  position:relative;
  max-width:250px;background:var(--blanco);
  border:1px solid var(--borde);border-radius:16px 16px 4px 16px;
  box-shadow:var(--sombra-2);
  padding:11px 26px 11px 14px;margin-right:8px;
  opacity:1;transform:translateY(0);
  transition:opacity .5s ease,transform .5s var(--suave);
}
.burbuja.pensando{opacity:0;transform:translateY(6px)}
.burbuja p{font-size:12.5px;line-height:1.55;color:var(--tinta)}
/* la X para cerrar los consejos (la chibi se queda; un clic en ella los trae de vuelta).
   OJO: .chibi vive con pointer-events:none (decorativa, deja pasar los clics al panel);
   se reactivan SOLO en la X y, con los consejos cerrados, en la propia chibi. */
.burbuja-cerrar{
  position:absolute;top:4px;right:6px;
  border:none;background:none;cursor:pointer;
  font-size:15px;line-height:1;padding:2px 4px;
  color:var(--tinta-suave);border-radius:6px;
  pointer-events:auto;
}
.burbuja-cerrar:hover{color:var(--tinta);background:var(--lila-050)}
.chibi.sin-consejos .burbuja{display:none}
.chibi.sin-consejos .chibi-sprite{cursor:pointer;pointer-events:auto}

/* ===== movimiento reducido: quietud casi total ===== */
@media (prefers-reduced-motion:reduce){
  .estado .punto::after,.mila-img,.chibi-sprite,.chibi-sprite.ladea{animation:none}
  .contenido > section,.grid-inicio .stat,.grid-inicio .carta,
  .grid-inicio .acciones,.grid-inicio .vitrina-pro,.aviso,.actividad li{animation:none}
  .tarjeta{transition:none}
}

/* ===== responsive ===== */
@media (max-width:900px){
  .grid-inicio{grid-template-columns:1fr}
}
@media (max-width:560px){
  body{padding:16px 10px 120px}
  .stats{flex-direction:column}
  .acciones .btn{flex:1}
  .pestana{padding:10px 12px;font-size:13.5px}
  .estado{flex-wrap:wrap;margin:16px 16px 0}
  .estado .btn-pausa{margin-left:29px}
  .pestanas{margin:18px 16px 0}
  .contenido{padding:20px 16px}
  .aviso-ambar{margin:12px 16px 0}
  body.modo-panel .cabecera{padding:18px 16px 0}
  .cabecera{padding:26px 16px 0}
  .btn-pro{flex-direction:column;align-items:flex-start;gap:4px}
  .chibi{right:12px;bottom:12px}
  .chibi-sprite{width:72px;height:72px}
  .burbuja{max-width:200px}
}