/* =====================================================================
   panel-cliente.css — La piel del panel del CLIENTE, estilo Revolut
   ---------------------------------------------------------------------
   Decidido con David el 9 y 10 de septiembre de 2026. Lo que se copia de
   Revolut, y por qué:
     · Un dato grande arriba y nada compitiendo con él.
     · Tarjetas translúcidas sobre un fondo con color, no cajas blancas
       sobre gris. El color es el del logo de NIUXER, no el de Revolut.
     · Barra de abajo flotante y redonda, con el sitio donde estás
       marcado con una pastilla. Lleva el LOGO en "Con NIUXER".
     · Cada pantalla responde a UNA pregunta y tiene UN botón grande.

   SOLO SE APLICA DENTRO DE UN NEGOCIO DEL CLIENTE: body.con-rail. Las
   pantallas de David (administrador) no cambian. Y como la vista previa
   ("Ver como este cliente") pone con-rail igual, David lo ve tal cual.

   Las pantallas nuevas (Inicio, Tu dinero, Hoy toca, Data Science, Lo
   tuyo, Con NIUXER, Escríbenos) llevan clases .pcli__*. Las de dentro de
   cada herramienta (carta, ingredientes…) son las de siempre, y aquí
   abajo se les cambia el traje sin tocar su código.
   ===================================================================== */

/* ---------- 1. Fondo y aire ---------- */
body.con-rail .papp{
  background:
    radial-gradient(120% 44% at 50% -6%, rgba(139,92,246,.42), transparent 62%),
    radial-gradient(80% 34% at 92% 2%, rgba(217,38,169,.26), transparent 60%),
    var(--bg);
}
html[data-tema="claro"] body.con-rail .papp{
  background:
    radial-gradient(120% 44% at 50% -6%, rgba(139,92,246,.22), transparent 62%),
    radial-gradient(80% 34% at 92% 2%, rgba(217,38,169,.12), transparent 60%),
    var(--bg);
}
body.con-rail{
  --vidrio:rgba(255,255,255,.07);
  --vidrio-2:rgba(255,255,255,.11);
  --vidrio-linea:rgba(255,255,255,.09);
  --radio-cli:22px;
}
html[data-tema="claro"] body.con-rail{
  --vidrio:rgba(255,255,255,.62);
  --vidrio-2:rgba(255,255,255,.85);
  --vidrio-linea:rgba(20,10,40,.08);
}

/* Dentro de un negocio el saludo de arriba ("Hola, Marta") y la pastilla
   del rol sobran: cada pantalla trae su propia cabecera con el avatar y
   el nombre del negocio. En la vista previa de David, la banda de abajo
   ya dice a quién está mirando. */
body.con-rail .papp__head{display:none}

/* ---------- 2. Cabecera de cada pantalla ---------- */
.pcli__cab{display:flex;align-items:center;gap:12px;margin:2px 0 20px}
.pcli__cab--dentro{justify-content:space-between}
.pcli__cab--dentro b{font-size:1.02rem;font-weight:600}
.pcli__avatar{
  width:42px;height:42px;border-radius:50%;flex:0 0 auto;
  background:linear-gradient(135deg,#5b21b6,#d926a9);color:#fff;
  display:grid;place-items:center;font-weight:600;font-size:.86rem;
  border:2px solid rgba(255,255,255,.22);
}
.pcli__quien{flex:1;min-width:0}
.pcli__quien b{display:block;font-size:1rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcli__quien span{display:block;color:var(--faint);font-size:.8rem}
.pcli__redondo{
  width:42px;height:42px;border-radius:50%;flex:0 0 auto;
  background:var(--vidrio);border:1px solid var(--vidrio-linea);
  display:grid;place-items:center;color:var(--text);text-decoration:none;
}
.pcli__redondo .nxi{width:19px;height:19px}

/* ---------- 3. El dato grande ---------- */
.pcli__grande{display:block;margin:4px 0 22px;color:var(--text);text-decoration:none}
.pcli__et{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:.9rem;margin-bottom:6px}
.pcli__et .nxi{width:15px;height:15px;opacity:.6}
.pcli__n{
  display:block;font-family:"Space Grotesk",Inter,sans-serif;font-weight:700;
  font-size:3.3rem;line-height:1;letter-spacing:-.035em;
}
.pcli__n small{font-size:1.45rem;font-weight:600;opacity:.6}
/* Cuando el dato grande son palabras y no un número, más pequeño: si no,
   "2 herramientas" se parte en dos líneas en el móvil. */
.pcli__n--txt{font-size:2.1rem;letter-spacing:-.025em}
.pcli__pie{display:block;margin-top:9px;color:var(--muted);font-size:.85rem}
.pcli__logo{display:inline-grid;place-items:center;overflow:hidden;border-radius:50%;
  width:20px;height:20px;vertical-align:-4px;margin-right:2px}
.pcli__logo img{width:126%;height:126%;object-fit:cover;display:block}

/* ---------- 4. Tarjetas de vidrio y filas ---------- */
.pcli__tarjeta{
  background:var(--vidrio);border:1px solid var(--vidrio-linea);
  border-radius:var(--radio-cli);padding:15px 16px;margin-bottom:13px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.pcli__tarjeta h3{font-size:.95rem;font-weight:600;margin:0 0 4px}
.pcli__tarjeta p{color:var(--muted);font-size:.84rem;line-height:1.5;margin:0}
.pcli__tarjeta--color{background:linear-gradient(100deg,rgba(139,92,246,.22),rgba(217,38,169,.16))}
.pcli__titulillo{
  color:var(--faint);font-size:.74rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;margin:22px 4px 10px;
}
.pcli__fila{display:flex;align-items:center;gap:13px;padding:11px 0;color:var(--text);text-decoration:none}
.pcli__fila + .pcli__fila{border-top:1px solid var(--vidrio-linea)}
.pcli__fila--suelta{padding:13px 16px}
.pcli__fila > .nxi{width:17px;height:17px;flex:0 0 auto;color:var(--faint)}
.pcli__bola{
  width:42px;height:42px;border-radius:14px;flex:0 0 auto;
  display:grid;place-items:center;color:#fff;
}
.pcli__bola .nxi{width:20px;height:20px}
.pcli__bola--morado{background:linear-gradient(135deg,#7c3aed,#8b5cf6)}
.pcli__bola--rosa{background:linear-gradient(135deg,#d926a9,#ec4899)}
.pcli__bola--azul{background:linear-gradient(135deg,#0ea5e9,#38bdf8)}
.pcli__bola--verde{background:linear-gradient(135deg,#059669,#34d399)}
.pcli__bola--gris{background:var(--vidrio-2);color:var(--muted)}
.pcli__txt{flex:1;min-width:0}
.pcli__txt b{display:block;font-size:.92rem;font-weight:600}
.pcli__txt span{display:block;color:var(--faint);font-size:.79rem;margin-top:1px}
.pcli__der{text-align:right;flex:0 0 auto}
.pcli__der b{font-size:.95rem;font-weight:600}
.pcli__der span{display:block;color:var(--faint);font-size:.74rem}
.pcli__vacio{color:var(--faint);font-size:.86rem;padding:6px 0}
.pcli__nota{color:var(--faint);font-size:.76rem;line-height:1.5;padding:4px 6px 0}

/* ---------- 5. "Hoy toca" ---------- */
.pcli__aviso{
  display:block;border-radius:var(--radio-cli);padding:15px 17px;margin-bottom:12px;
  border:1px solid rgba(255,255,255,.14);color:var(--text);text-decoration:none;
  background:linear-gradient(100deg,rgba(217,38,169,.22),rgba(139,92,246,.18));
}
html[data-tema="claro"] .pcli__aviso{border-color:rgba(20,10,40,.08)}
.pcli__aviso b{display:flex;align-items:center;gap:7px;font-size:.92rem;margin-bottom:4px}
.pcli__aviso p{color:var(--muted);font-size:.83rem;line-height:1.45;margin:0}
.pcli__pastilla{
  display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;
  border-radius:999px;background:#fff;color:#7c3aed;font-size:.72rem;font-weight:700;
}
.pcli__ver{display:inline-flex;align-items:center;gap:3px;margin-top:9px;font-size:.8rem;font-weight:600}
.pcli__ver .nxi{width:15px;height:15px}

/* ---------- 6. Botón grande y rejilla de cuadrados ---------- */
.pcli__boton{
  display:block;width:100%;height:52px;border:0;border-radius:999px;margin:6px 0 14px;
  background:linear-gradient(100deg,#8b5cf6,#d926a9);color:#fff;
  font:inherit;font-size:.95rem;font-weight:600;cursor:pointer;
}
.pcli__rejilla{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.pcli__cuadro{
  text-align:center;border:0;background:none;padding:0;color:var(--text);
  font:inherit;cursor:pointer;text-decoration:none;
}
.pcli__cuadro > span:last-child{display:block;font-size:.72rem;color:var(--muted);line-height:1.25;margin-top:7px}
.pcli__caja{
  display:grid;place-items:center;aspect-ratio:1;border-radius:17px;
  background:var(--vidrio-2);border:1px solid var(--vidrio-linea);color:var(--text);
}
.pcli__caja .nxi{width:24px;height:24px}
.pcli__cuadro--mas .pcli__caja{opacity:.55}

/* ---------- 7. Barras de meses con la raya ---------- */
.pcli__meses{position:relative;display:flex;align-items:flex-end;gap:8px;height:118px;padding-top:8px;margin:4px 0 26px}
.pcli__meses i{
  flex:1;height:var(--h);border-radius:8px 8px 4px 4px;position:relative;
  background:linear-gradient(180deg,#8b5cf6,#d926a9);opacity:.5;
}
.pcli__meses i.ahora{opacity:1}
.pcli__meses i.neg{background:rgba(255,255,255,.18)}
.pcli__meses i b{position:absolute;left:0;right:0;bottom:-20px;text-align:center;font-size:.68rem;color:var(--faint);font-weight:500}
.pcli__raya{position:absolute;left:0;right:0;bottom:var(--y);border-top:1.5px dashed rgba(255,255,255,.55)}
html[data-tema="claro"] .pcli__raya{border-color:rgba(20,10,40,.4)}

/* ---------- 8. La barra de abajo, flotante (móvil) ---------- */
@media (max-width:760px){
  body.con-rail .prail{
    left:14px;right:14px;bottom:14px;height:64px;border:1px solid rgba(255,255,255,.1);
    border-radius:999px;background:rgba(18,13,28,.88);
    backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
    padding:0 6px;justify-content:space-around;overflow:visible;
    box-shadow:0 14px 34px rgba(0,0,0,.5);
  }
  html[data-tema="claro"] body.con-rail .prail{background:rgba(255,255,255,.86);border-color:rgba(20,10,40,.08)}
  body.con-rail .prail__l{flex:1;justify-content:space-around}
  body.con-rail .prail__pie{display:none}
  body.con-rail .prail__i{padding:8px 11px;border-radius:999px;font-size:.64rem;gap:3px}
  body.con-rail .prail__i.is-aqui{background:rgba(255,255,255,.13);color:#fff}
  html[data-tema="claro"] body.con-rail .prail__i.is-aqui{background:rgba(124,58,237,.12);color:var(--purple)}
  body.con-rail .prail__sub{display:none}
  body.con-rail .papp{padding-bottom:96px}
}

/* El logo en la barra: gris apagado, a color cuando estás dentro */
.prail__logo{display:inline-grid;place-items:center;overflow:hidden;border-radius:50%;
  width:22px;height:22px;flex:0 0 22px;filter:grayscale(1) opacity(.55);transition:filter .18s}
.prail__logo img{width:126%;height:126%;object-fit:cover;display:block}
.prail__i.is-aqui .prail__logo{filter:none;box-shadow:0 0 0 1.5px rgba(255,255,255,.25)}

/* En escritorio, las herramientas cuelgan de "Lo tuyo", un poco metidas */
.prail__sub{padding-left:10px;opacity:.85}
.prail__sub .nxi{width:18px;height:18px;flex:0 0 18px}

/* ---------- 9. Las pantallas de dentro de cada herramienta ----------
   Son las de siempre; aquí solo cambian de traje. */
body.con-rail .papp .psection,
body.con-rail .papp .pcard,
body.con-rail .papp .ptable-wrap,
body.con-rail .papp .pwrap{
  background:var(--vidrio);border:1px solid var(--vidrio-linea);
  border-radius:var(--radio-cli);
}
body.con-rail .papp .ptabs{
  background:var(--vidrio);border:1px solid var(--vidrio-linea);border-radius:999px;padding:4px;
}
body.con-rail .papp .ptab{border-radius:999px}
body.con-rail .papp .ptab.is-sel{background:linear-gradient(100deg,#8b5cf6,#d926a9);color:#fff}
body.con-rail .papp .pkpi{background:var(--vidrio);border:1px solid var(--vidrio-linea);border-radius:18px}
body.con-rail .papp .pcab h2,
body.con-rail .papp .pcab h3{font-family:"Space Grotesk",Inter,sans-serif;letter-spacing:-.02em}
body.con-rail .papp .btn--solid{border-radius:999px}