/* =====================================================================
   panel-admin.css — La entrada del panel de DAVID, estilo Revolut
   ---------------------------------------------------------------------
   Decidido el 11/9/2026 con panel/maqueta-admin.html. Solo con el
   diseño nuevo encendido y con barra de administrador (body.con-barra).

   Reutiliza las piezas del panel del cliente (.pcli__*, en
   panel-cliente.css): aquí solo se les dan las variables que allí
   vivían bajo body.con-rail, se viste la barra de grupos y se hace
   flotante la barra de abajo del móvil. Las pantallas de dentro
   (Ingresos, Clientes…) no se tocan: son las de siempre.
   ===================================================================== */

/* ---------- 1. Variables de cristal cuando hay barra de admin ---------- */
html[data-piel="nueva"] body.con-barra{
  --vidrio:rgba(255,255,255,.06);
  --vidrio-2:rgba(255,255,255,.10);
  --vidrio-linea:rgba(255,255,255,.09);
  --radio-cli:22px;
}
html[data-piel="nueva"][data-tema="claro"] body.con-barra{
  --vidrio:rgba(255,255,255,.62);
  --vidrio-2:rgba(255,255,255,.88);
  --vidrio-linea:rgba(20,10,40,.08);
}

/* ---------- 2. La pantalla de entrada ---------- */
.padm{max-width:820px}
.padm .pcli__grande{margin-top:8px}
.padm .pcli__n{font-size:3.8rem}
/* el número: rojo por debajo de la raya, verde por encima; la flecha
   aparte, según suba o baje frente al mes anterior */
.padm .pcli__grande .pcli__n{color:var(--num, var(--text))}
.padm__sube{color:#34d399;font-weight:600}
.padm__baja{color:#fb7185;font-weight:600}
html[data-tema="claro"] .padm__sube{color:#059669}
html[data-tema="claro"] .padm__baja{color:#dc2626}
/* la línea fina de tendencia bajo el número */
.padm__spark{margin:-8px 0 20px;max-width:520px}
.padm__spark svg{display:block;width:100%;height:80px;overflow:visible}
.padm__spark text{font:500 10px Inter,system-ui,sans-serif;fill:var(--faint)}
.padm__spark-raya{stroke:rgba(255,255,255,.45);stroke-width:1;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
html[data-tema="claro"] .padm__spark-raya{stroke:rgba(20,10,40,.4)}
.padm__spark small{display:block;margin-top:4px;color:var(--faint);font-size:.74rem}
.padm .pcli__aviso{border-color:rgba(255,255,255,.12)}
html[data-tema="claro"] .padm .pcli__aviso{border-color:rgba(20,10,40,.08)}
/* las pantallas de cada grupo, como tarjetas de color (no cajas vacías):
   cada una con su tono, bajas, icono grande y el nombre debajo */
.padm .pcli__rejilla{grid-template-columns:repeat(4,1fr);gap:12px}
.padm .pcli__cuadro{position:relative;transition:transform .18s}
.padm .pcli__cuadro:hover{transform:translateY(-3px)}
.padm .pcli__pastilla--cuadro{position:absolute;top:-7px;right:8px;z-index:1;margin:0;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.padm .pcli__caja{
  aspect-ratio:auto;height:92px;border-radius:20px;border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(135deg,var(--c1),var(--c2));color:#fff;
  box-shadow:0 10px 26px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.18);
}
.padm .pcli__caja .nxi{width:30px;height:30px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}
.padm .pcli__cuadro > span:last-child{font-size:.8rem;color:var(--text);font-weight:500;margin-top:9px}
.padm__cuadro--morado{--c1:#7c3aed;--c2:#a78bfa}
.padm__cuadro--rosa{--c1:#d926a9;--c2:#f472b6}
.padm__cuadro--azul{--c1:#0284c7;--c2:#38bdf8}
.padm__cuadro--verde{--c1:#059669;--c2:#34d399}
.padm__cuadro--ambar{--c1:#d97706;--c2:#fbbf24}
html[data-tema="claro"] .padm .pcli__caja{box-shadow:0 10px 24px rgba(23,17,48,.16),inset 0 1px 0 rgba(255,255,255,.35)}
.padm .pcli__der{max-width:38%}
.padm .pcli__der b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.padm .pcli__fila--btn{width:100%;border:0;background:none;font:inherit;text-align:left;cursor:pointer;color:var(--text)}
.padm .pcli__boton--suave{background:var(--vidrio-2);border:1px solid var(--vidrio-linea);color:var(--text)}
.padm .palertas{margin:0}

@media (max-width:760px){
  .padm .pcli__n{font-size:3.2rem}
  .padm .pcli__rejilla{gap:9px}
  .padm .pcli__caja{height:70px;border-radius:16px}
  .padm .pcli__caja .nxi{width:24px;height:24px}
  .padm .pcli__cuadro > span:last-child{font-size:.7rem}
}

/* ---------- 3. La barra de la izquierda, por grupos ---------- */
html[data-piel="nueva"] .pbarra__s{
  display:flex;align-items:center;gap:10px;
  padding:7px 12px 7px 42px;border-radius:9px;
  font-size:.83rem;color:var(--barra-tenue);text-decoration:none;
  transition:background .15s,color .15s;
}
html[data-piel="nueva"] .pbarra__s .nxi{width:16px;height:16px;flex:0 0 16px;opacity:.8}
html[data-piel="nueva"] .pbarra__s:hover{color:#fff;background:rgba(255,255,255,.05)}
html[data-piel="nueva"] .pbarra__s.is-aqui{color:#fff;font-weight:600}
html[data-piel="nueva"] .pbarra__s + .pbarra__i{margin-top:6px}

/* ---------- 4. Móvil: la barra de abajo, flotante y redonda ---------- */
@media (max-width:760px){
  html[data-piel="nueva"] body.con-barra .pnavbaja{
    inset:auto 14px 14px 14px;
    border-radius:999px;border:1px solid var(--glass-line);
    padding:5px 6px;
    box-shadow:0 14px 34px rgba(0,0,0,.35);
  }
  html[data-piel="nueva"] body.con-barra .pnavbaja a{padding:7px 4px;border-radius:999px;gap:2px}
  html[data-piel="nueva"] body.con-barra .pnavbaja a.is-aqui{background:rgba(255,255,255,.10);color:#fff}
  html[data-piel="nueva"][data-tema="claro"] body.con-barra .pnavbaja a.is-aqui{background:rgba(124,58,237,.12);color:var(--purple)}
  html[data-piel="nueva"] body.con-barra .papp{padding-bottom:100px}
}