/* ═══════════════════════════════════════════════════════════════════════
   ENERSOL · Sistema de diseño "Luz de día"
   Minimalismo tipo Apple: contenido primero, cromo que desaparece,
   una sola tipografía en muchos pesos, un solo acento (ámbar Enersol).
   ═══════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  /* Superficies */
  --bg:#f5f5f7;             /* fondo de ventana (gris Apple) */
  --surface:#ffffff;        /* tarjetas y paneles */
  --surface-2:#fafafc;      /* filas alternas / hover suave */
  --fill:#f0f0f3;           /* inputs, chips neutros */
  --fill-hover:#e8e8ed;
  --line:rgba(0,0,0,.08);   /* hairlines */
  --line-2:rgba(0,0,0,.055);

  /* Texto */
  --ink:#1d1d1f;            /* titulares */
  --ink-2:#424245;          /* cuerpo */
  --ink-3:#86868b;          /* secundario */
  --ink-4:#aeaeb2;          /* terciario / placeholders */

  /* Acento de marca */
  --sol:#f59300;
  --sol-2:#ff7a00;
  --sol-soft:#fff4e0;
  --sol-ink:#8a4b00;

  /* Semánticos (tono iOS, desaturados) */
  --verde:#00a15a;  --verde-soft:#e3f7ec;
  --azul:#0a84ff;   --azul-soft:#e8f2ff;
  --rojo:#e5342a;   --rojo-soft:#ffeceb;
  --morado:#7a5af8; --morado-soft:#f0ecff;

  /* Burbujas de chat */
  --burb-cliente:#e9e9eb;
  --burb-cliente-ink:#1d1d1f;
  --burb-bot:linear-gradient(180deg,#ffb03a,#f59300);
  --burb-bot-ink:#3d2200;
  --burb-vend:linear-gradient(180deg,#3d9bff,#0a84ff);
  --burb-vend-ink:#ffffff;

  /* Forma y profundidad */
  --r-xs:8px; --r-sm:12px; --r:16px; --r-lg:22px; --r-full:999px;
  --sh-1:0 1px 2px rgba(0,0,0,.04),0 1px 1px rgba(0,0,0,.03);
  --sh-2:0 4px 16px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.04);
  --sh-3:0 12px 40px rgba(0,0,0,.10),0 2px 8px rgba(0,0,0,.05);
  --sh-sol:0 6px 20px rgba(245,147,0,.28);

  --font:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.4,0,.2,1);
  --spring:cubic-bezier(.34,1.4,.5,1);
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#000000; --surface:#1c1c1e; --surface-2:#232325; --fill:#2c2c2e; --fill-hover:#3a3a3c;
    --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.07);
    --ink:#f5f5f7; --ink-2:#d1d1d6; --ink-3:#98989d; --ink-4:#636366;
    --sol-soft:#3a2a08; --sol-ink:#ffc266;
    --verde-soft:#0d2b1c; --azul-soft:#0b2545; --rojo-soft:#3a1614; --morado-soft:#241d45;
    --burb-cliente:#2c2c2e; --burb-cliente-ink:#f5f5f7;
    --sh-1:0 1px 2px rgba(0,0,0,.5); --sh-2:0 4px 16px rgba(0,0,0,.5);
    --sh-3:0 12px 40px rgba(0,0,0,.6);
  }
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  font-family:var(--font);background:var(--bg);color:var(--ink);
  font-size:15px;line-height:1.47;letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overscroll-behavior-y:none;              /* sin "jalar para recargar" accidental */
  -webkit-text-size-adjust:100%;
}
/* Alturas reales en celular: 100vh se equivoca por la barra del navegador */
:root{
  --alto:100vh;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
}
@supports (height:100dvh){:root{--alto:100dvh}}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.025em;line-height:1.15}
::selection{background:var(--sol-soft);color:var(--sol-ink)}

/* Scrollbars discretas */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,.16);border-radius:99px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.28);background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}
@media (prefers-color-scheme:dark){::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);background-clip:content-box}}

/* ── Barra superior translúcida ── */
.topbar{
  display:flex;align-items:center;gap:14px;padding:0 20px;height:56px;flex:none;
  background:color-mix(in srgb,var(--surface) 78%,transparent);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;
}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.logo-mark{
  width:32px;height:32px;border-radius:9px;flex:none;object-fit:cover;
  display:flex;align-items:center;justify-content:center;background:#fff;
  box-shadow:0 1px 4px rgba(245,147,0,.25);
}
.logo-mark svg{width:17px;height:17px;color:#fff}
.logo-text{font-weight:800;font-size:16px;letter-spacing:-.03em}
.logo-sub{font-size:11.5px;color:var(--ink-3);font-weight:500;letter-spacing:0}

/* Navegación segmentada tipo iOS */
.seg{display:flex;background:var(--fill);border-radius:var(--r-full);padding:2px;gap:2px}
.seg a,.seg button{
  font:inherit;font-size:13px;font-weight:600;color:var(--ink-2);text-decoration:none;
  padding:6px 15px;border-radius:var(--r-full);border:none;background:none;cursor:pointer;
  transition:.2s var(--ease);white-space:nowrap;
}
.seg a:hover,.seg button:hover{color:var(--ink)}
.seg a.on,.seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1)}

/* ── Botones ── */
.btn{
  font:inherit;font-size:14px;font-weight:600;letter-spacing:-.01em;cursor:pointer;
  border-radius:var(--r-full);padding:9px 18px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);transition:.18s var(--ease);
  display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;
}
.btn:hover{background:var(--fill);transform:translateY(-.5px)}
.btn:active{transform:scale(.97)}
.btn svg{width:16px;height:16px;flex:none}
.btn-sol{background:linear-gradient(180deg,#ffa522,var(--sol));color:#fff;border:none;box-shadow:var(--sh-sol)}
.btn-sol:hover{background:linear-gradient(180deg,#ffb03a,var(--sol-2));filter:none}
.btn-azul{background:var(--azul);color:#fff;border:none}
.btn-plain{background:none;border:none;color:var(--ink-3);padding:8px 12px}
.btn-plain:hover{background:var(--fill);color:var(--ink);transform:none}
.btn-icon{padding:8px;border-radius:var(--r-full);width:36px;height:36px}
.btn:disabled{opacity:.45;cursor:default;transform:none}

/* ── Campos ── */
.field{
  font:inherit;width:100%;background:var(--fill);border:1px solid transparent;
  color:var(--ink);border-radius:var(--r-sm);padding:11px 14px;font-size:15px;
  transition:.18s var(--ease);
}
/* iOS hace zoom si el texto mide menos de 16px: en celular subimos todos los campos */
@media (max-width:900px){
  .field,input,textarea,select{font-size:16px !important}
  .btn{min-height:44px}          /* área de toque cómoda */
  .btn-icon{width:44px;height:44px}
}
.field:focus{outline:none;background:var(--surface);border-color:var(--sol);box-shadow:0 0 0 4px var(--sol-soft)}
.field::placeholder{color:var(--ink-4)}
.lbl{display:block;font-size:12px;font-weight:600;color:var(--ink-3);margin:0 0 7px 3px;letter-spacing:0}

/* ── Tarjetas ── */
.card{background:var(--surface);border-radius:var(--r);box-shadow:var(--sh-1);border:1px solid var(--line-2)}
.card-lg{border-radius:var(--r-lg);box-shadow:var(--sh-2)}

/* ── Etiquetas de estado ── */
.tag{
  display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;
  padding:3px 9px;border-radius:var(--r-full);white-space:nowrap;letter-spacing:0;
  background:var(--fill);color:var(--ink-2);
}
.tag svg{width:11px;height:11px}
.tag-ok{background:var(--verde-soft);color:var(--verde)}
.tag-sol{background:var(--sol-soft);color:var(--sol-ink)}
.tag-azul{background:var(--azul-soft);color:var(--azul)}
.tag-rojo{background:var(--rojo-soft);color:var(--rojo)}
.tag-morado{background:var(--morado-soft);color:var(--morado)}

/* ── Avatares ── */
.ava{
  width:38px;height:38px;border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:14px;color:#fff;letter-spacing:-.02em;
}
.ava.a0{background:linear-gradient(145deg,#ffb340,#f59300)}
.ava.a1{background:linear-gradient(145deg,#5ad19a,#00a15a)}
.ava.a2{background:linear-gradient(145deg,#5aa9ff,#0a84ff)}
.ava.a3{background:linear-gradient(145deg,#ff8b7a,#e5342a)}
.ava.a4{background:linear-gradient(145deg,#a48cff,#7a5af8)}
.ava.a5{background:linear-gradient(145deg,#5fd0d8,#0a9aa8)}
.ava-sm{width:28px;height:28px;font-size:11px}

/* ── Tablas ── */
.tabla{width:100%;border-collapse:collapse;font-size:14px}
.tabla th{
  font-size:11.5px;font-weight:600;color:var(--ink-3);text-align:left;
  padding:12px 16px;border-bottom:1px solid var(--line);letter-spacing:0;white-space:nowrap;
}
.tabla td{padding:14px 16px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.tabla tbody tr:last-child td{border-bottom:none}
.tabla tbody tr{transition:background .15s var(--ease)}
.tabla tbody tr:hover{background:var(--surface-2)}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ── Animaciones ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes bubbleIn{from{opacity:0;transform:translateY(6px) scale(.97)}to{opacity:1;transform:none}}
@keyframes shimmer{0%,100%{opacity:.5}50%{opacity:1}}
.anim{animation:fadeUp .4s var(--ease) both}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ── Menú del usuario (arriba a la derecha) ── */
.menu-usuario{position:relative;margin-left:auto}
.menu-boton{
  display:flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;
  font:inherit;color:inherit;padding:4px 6px;border-radius:var(--r-full);
  transition:background .15s var(--ease);
}
.menu-boton:hover{background:var(--fill)}
.menu-nombre{font-size:13.5px;font-weight:600}
.menu-caja{
  position:absolute;right:0;top:calc(100% + 8px);min-width:222px;z-index:130;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-3);padding:6px;display:none;
  animation:fadeUp .18s var(--ease) both;
}
.menu-caja.on{display:block}
.menu-quien{padding:9px 12px 11px;border-bottom:1px solid var(--line-2);margin-bottom:5px}
.menu-quien b{display:block;font-size:14.5px;letter-spacing:-.015em}
.menu-quien span{font-size:12.5px;color:var(--ink-3)}
.menu-caja a,.menu-caja button{
  display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;
  border-radius:var(--r-xs);text-decoration:none;color:var(--ink);font:inherit;
  font-size:14px;background:none;border:none;cursor:pointer;text-align:left;
}
.menu-caja a:hover,.menu-caja button:hover{background:var(--fill)}
.menu-caja svg{width:17px;height:17px;color:var(--ink-3);flex:none}
.menu-caja #menuSalir{color:var(--rojo)}
.menu-caja #menuSalir svg{color:var(--rojo)}
/* Punto naranja cuando algo del menú necesita atención (ej. avisos apagados) */
.punto-pend{width:8px;height:8px;border-radius:50%;background:var(--sol);margin-left:auto;flex:none}
.menu-usuario.pendiente-avisos .menu-boton::after{
  content:"";position:absolute;top:3px;right:3px;width:9px;height:9px;border-radius:50%;
  background:var(--sol);border:2px solid var(--bg);
}
.menu-usuario .menu-boton{position:relative}
@media (max-width:760px){ .menu-nombre{display:none} }

/* ── Navegación inferior (celular): al alcance del pulgar ── */
/* --nav-alto: cuánto espacio hay que dejarle abajo a la barra para que no
   tape lo último de la pantalla (la caja de escribir, un botón). Vale 0 en
   escritorio, donde la barra no existe. */
:root{--nav-alto:0px}
.navmovil{display:none}
@media (max-width:760px){
  :root{--nav-alto:calc(64px + var(--safe-b))}
  .navmovil{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:90;
    background:color-mix(in srgb,var(--surface) 92%,transparent);
    backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
    border-top:1px solid var(--line);
    padding:6px calc(6px + var(--safe-l)) calc(6px + var(--safe-b)) calc(6px + var(--safe-r));
  }
  .navmovil a{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
    text-decoration:none;color:var(--ink-4);font-size:10.5px;font-weight:600;
    padding:7px 4px;border-radius:var(--r-sm);position:relative;
  }
  .navmovil a svg{width:22px;height:22px;stroke-width:1.7}
  .navmovil a.on{color:var(--sol)}
  .navmovil a .pip{
    position:absolute;top:4px;right:calc(50% - 18px);min-width:16px;height:16px;
    background:var(--rojo);color:#fff;border-radius:99px;font-size:10px;font-weight:700;
    display:flex;align-items:center;justify-content:center;padding:0 4px;
  }
  /* La barra superior se simplifica: el logo y salir; el resto va abajo */
  .topbar{height:calc(52px + var(--safe-t));padding-top:var(--safe-t);
          padding-left:calc(14px + var(--safe-l));padding-right:calc(14px + var(--safe-r))}
  .topbar .seg{display:none}
}

/* ── Barra de instalación de la app ── */
#barraInstalar{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:300;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-3);padding:12px 14px;display:flex;align-items:center;gap:12px;
  animation:fadeUp .4s var(--spring) both;max-width:520px;margin:0 auto;
}
#barraInstalar img{width:44px;height:44px;border-radius:11px;flex:none;object-fit:cover}
#barraInstalar .txt{flex:1;min-width:0;line-height:1.3}
#barraInstalar .txt b{display:block;font-size:14.5px;letter-spacing:-.02em}
#barraInstalar .txt span{font-size:12.5px;color:var(--ink-3)}
#barraInstalar .btn{padding:8px 14px;font-size:13px;flex:none}
@media (max-width:520px){
  #barraInstalar .btn-plain{display:none}
}

/* ── Estados vacíos ── */
.empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:56px 28px;text-align:center;color:var(--ink-3);font-size:14px;
}
.empty .glyph{
  width:52px;height:52px;border-radius:var(--r);background:var(--fill);
  display:flex;align-items:center;justify-content:center;margin-bottom:6px;
}
.empty .glyph svg{width:24px;height:24px;color:var(--ink-4)}
.empty strong{color:var(--ink);font-size:16px;font-weight:700;letter-spacing:-.02em}
.empty span{max-width:280px;line-height:1.5}