/* ======================================================================
   Paneles (cliente, proveedor, admin) con el mismo diseño claro del sitio:
   fondo crema con halos suaves, texto azul marino, botones coral y Fraunces.
   Se carga DESPUÉS de main.css solo en /cuenta, /proveedor y /admin.
   ====================================================================== */
body[data-app] {
  --bg:#fbf9f6; --bg-alt:#f5eff5; --surface:#fff; --surface-2:#f8f4f7; --field-bg:#fff;
  --ink:#1b2940; --paper:#1b2940; --muted:#5c687b; --muted-2:#7f8795;
  --line:#e5dfe5; --line-soft:#eee8eb;
  --gold:#e96d55; --gold-bright:#f39b61; --gold-dim:#9279cc; --teal:#269f8d;
  --accent:#e96d55; --accent-hover:#f39b61; --accent-2:#269f8d; --accent-3:#9279cc;
  --ok:#1f8a5c; --ok-bg:#e3f5ec; --warn:#a4660b; --warn-bg:#fdf1dc; --err:#c2413a; --err-bg:#fde8e6;
  --prism:linear-gradient(112deg,#36b7a1 0%,#7585dd 48%,#e47c68 100%);
  color:var(--ink);
  background-color:var(--bg);
  background-image:radial-gradient(ellipse 720px 470px at 92% 0%,rgba(255,177,128,.20),transparent 67%),
    radial-gradient(ellipse 650px 520px at 18% 40%,rgba(170,157,235,.10),transparent 68%),
    radial-gradient(ellipse 700px 380px at 70% 100%,rgba(133,215,195,.10),transparent 68%);
  background-attachment:fixed;
  padding-top:0; /* los paneles no tienen el header fijo del sitio */
}
body[data-app] ::selection { background:#f8d9ce; color:#663e46; }
body[data-app] h1, body[data-app] h2, body[data-app] h3 { color:var(--ink); font-family:'Fraunces',Georgia,serif; font-weight:560; letter-spacing:-.015em; }
body[data-app] h1 { font-size:clamp(1.9rem,3.2vw,2.6rem); line-height:1.1; }
body[data-app] h2 { font-size:1.3rem; }
body[data-app] .muted, body[data-app] .empty-state { color:var(--muted); }
body[data-app] a { color:#c55a45; }
body[data-app] .kicker, body[data-app] .eyebrow { color:#188b7c; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; background:none; border:0; padding:0; box-shadow:none; }
body[data-app] .kicker::before, body[data-app] .eyebrow::before { display:none; }

/* Estructura */
body[data-app] .app-shell { grid-template-columns:256px minmax(0,1fr); background:transparent; }
body[data-app] .app-main { background:transparent; padding:36px clamp(20px,4vw,48px) 64px; max-width:1240px; width:100%; }

/* Barra lateral: blanca y translúcida como el header del sitio */
body[data-app] .sidebar { position:sticky; top:0; height:calc(100vh / var(--z, 1)); overflow-y:auto; padding:22px 16px; color:var(--ink);
  background:rgba(255,255,255,.86); backdrop-filter:blur(14px) saturate(140%); border-right:1px solid #ebe3e1; box-shadow:8px 0 26px rgba(65,48,63,.05); }
body[data-app] .sidebar-brand { display:flex !important; align-items:center; gap:10px; padding:4px 10px 14px !important; color:var(--ink) !important; background:none !important; box-shadow:none !important; }
body[data-app] .sidebar-brand .brand-mark { width:38px; height:38px; flex:none; display:grid; place-items:center; border:1px solid #dce8f4 !important; border-radius:12px !important;
  background:linear-gradient(145deg,#fff,#edf5ff) !important; box-shadow:0 5px 14px rgba(23,105,210,.1); }
body[data-app] .sidebar-brand .brand-mark img { width:26px !important; height:26px !important; }
body[data-app] .sidebar-brand span { font-family:'Fraunces',serif; font-weight:560; font-size:1.15rem; }
body[data-app] .sidebar-brand em { font-style:normal; background:var(--prism); -webkit-background-clip:text; background-clip:text; color:transparent; }
body[data-app] .sidebar .kicker { margin:0 0 0 10px; }
body[data-app] .sidebar-user { margin:10px 0 16px; border:1px solid var(--line); background:linear-gradient(135deg,#fff7f2,#f5f2ff); border-radius:14px; }
body[data-app] .sidebar-user strong { color:var(--ink); }
body[data-app] .sidebar-user span { color:var(--muted); }
body[data-app] .sidebar a { color:#526178; border-radius:10px; font-weight:500; }
body[data-app] .sidebar a:hover { background:#f7f2f0; color:#c55a45; }
body[data-app] .sidebar a[aria-current="page"] { background:linear-gradient(135deg,rgba(243,155,97,.16),rgba(233,109,85,.12)); color:#b94f3c; font-weight:600; box-shadow:inset 3px 0 0 #e96d55; }
body[data-app] .sidebar .nav-group { color:var(--muted-2); }
body[data-app] .sidebar-signout { color:#c55a45; margin-left:12px; }
body[data-app] .sidebar-signout:hover { color:#8f3a2b; }
body[data-app] .nav-badge { background:#e96d55; color:#fff; }

/* Botones iguales al sitio */
body[data-app] .btn { border-radius:8px; text-transform:none; letter-spacing:0; font-size:.9rem; font-weight:600; }
body[data-app] .btn-sm { padding:7px 12px; font-size:.8rem; }
body[data-app] .btn-primary { color:#fff; background:linear-gradient(135deg,#f39b61,#e96d55 72%); border-color:transparent; box-shadow:0 10px 24px -12px rgba(211,106,85,.62); }
body[data-app] .btn-primary:hover { color:#fff; background:linear-gradient(135deg,#ea8754,#d95745); transform:translateY(-1px); }
body[data-app] .btn-ghost { color:#4c5870; border:1px solid #d9d2dc; background:rgba(255,255,255,.8); }
body[data-app] .btn-ghost:hover { color:#715bb5; border-color:#b6a9da; background:#fff; }
body[data-app] .btn-danger { color:#c2413a; border-color:#f1c9c4; }
body[data-app] .btn-danger:hover { color:#fff; background:#d9534a; border-color:#d9534a; }
body[data-app] .btn:disabled { opacity:.55; cursor:not-allowed; transform:none; }
body[data-app] .btn-telegram { background:#229ED9; color:#fff; border-color:#229ED9; }

/* Tarjetas, tablas y formularios */
body[data-app] .card { background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:0 18px 44px -34px rgba(67,52,84,.35); padding:22px; }
body[data-app] .stat-card b { color:var(--ink); font-size:1.8rem; }
body[data-app] .stat-card:hover { border-color:#f0b7a6; }
body[data-app] .stat-card.needs-attention { border-color:#f3b27c; box-shadow:inset 3px 0 0 #e96d55, 0 18px 44px -34px rgba(67,52,84,.35); background:linear-gradient(155deg,#fff,#fff5ef); }
body[data-app] .stat-grid .card:nth-child(4n+2):not(.needs-attention) { background:linear-gradient(155deg,#fff,#f6f3ff); }
body[data-app] .stat-grid .card:nth-child(4n+3):not(.needs-attention) { background:linear-gradient(155deg,#fff,#effaf6); }
body[data-app] .table-wrap { background:#fff; border:1px solid var(--line); border-radius:16px; overflow-x:auto; box-shadow:0 18px 44px -36px rgba(67,52,84,.35); }
body[data-app] table { width:100%; border-collapse:collapse; background:transparent; }
body[data-app] th { background:#faf7f6; color:var(--muted); font-family:'Space Grotesk',sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); }
body[data-app] td { color:var(--ink); padding:12px 14px; border-bottom:1px solid #f0ebee; vertical-align:middle; background:transparent; }
body[data-app] tbody tr:last-child td { border-bottom:0; }
body[data-app] tbody tr:hover { background:#fdfaf8; }
body[data-app] .inline-form input, body[data-app] .inline-form select,
body[data-app] .field input, body[data-app] .field select, body[data-app] .form select, body[data-app] textarea {
  color:var(--ink); background:#fff; border:1px solid #d4deea; border-radius:9px; padding:9px 12px; font:inherit; }
body[data-app] .inline-form input:focus, body[data-app] .inline-form select:focus, body[data-app] .field input:focus, body[data-app] .form select:focus {
  outline:0; border-color:#e9956f; box-shadow:0 0 0 4px rgba(233,109,85,.12); }
body[data-app] .form.card { background:transparent; border:0; box-shadow:none; padding:0; }
body[data-app] .tabs { border-color:var(--line); }
body[data-app] .tab { color:var(--muted); }
body[data-app] .tab.is-active { color:#b94f3c; border-bottom-color:#e96d55; }
body[data-app] .tab-count { background:#f3edf0; color:var(--muted); }
body[data-app] .status-pill { border:0; letter-spacing:.04em; }
body[data-app] .status-pill.is-ok { color:var(--ok); background:var(--ok-bg); }
body[data-app] .status-pill.is-wait { color:var(--warn); background:var(--warn-bg); }
body[data-app] .status-pill.is-off { color:var(--err); background:var(--err-bg); }
body[data-app] .todo-list a { color:var(--ink); }
body[data-app] .todo-list a:hover { color:#c55a45; }
body[data-app] .account-statement { background:linear-gradient(145deg,#fff,#f3f7fb); border:1px solid var(--line); border-top:3px solid #e96d55; border-radius:16px; }
body[data-app] .statement-top { color:#188b7c; }
body[data-app] .statement-total, body[data-app] .statement-row { border-color:var(--line); }
body[data-app] .statement-row b, body[data-app] .statement-total b, body[data-app] .line-number { color:var(--ink); }

/* Cabecera de página con botón de acción a la derecha */
body[data-app] .page-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:24px; }
body[data-app] .row-actions { display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
body[data-app] td:last-child { text-align:right; }
body[data-app] td.empty-state { text-align:center; padding:28px 14px; }
body[data-app] .section-title-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
body[data-app] .steps-list { margin:12px 0 18px; padding-left:20px; color:var(--muted); line-height:1.8; }
body[data-app] .settings-form { display:grid; gap:14px; max-width:560px; }
body[data-app] .settings-form label { display:grid; gap:6px; font-weight:600; font-size:.88rem; color:var(--ink); }
body[data-app] .settings-form .field input, body[data-app] .settings-form select { width:100%; }
body[data-app] .form-actions { display:flex; flex-wrap:wrap; gap:10px; }

/* Estado de la línea paso a paso (cliente y modal del admin) */
.status-rows { display:grid; gap:0; margin:14px 0; border:1px solid #efe8ec; border-radius:14px; overflow:hidden; }
.status-rows > div { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; border-bottom:1px solid #f3eef1; }
.status-rows > div:last-child { border-bottom:0; }
.status-rows dt { color:#5c687b; font-size:.85rem; }
.status-rows dd { margin:0; text-align:right; }
body[data-app] .line-card { max-width:560px; }
body[data-app] .verify-box { display:grid; gap:12px; padding:16px; border-radius:14px; background:linear-gradient(135deg,#eef8fd,#f5f2ff); border:1px solid #d6eaf5; }
body[data-app] .verify-box p { margin:0; }
body[data-app] .verify-box .btn { justify-self:start; }
body[data-app] .activation-hero { margin-bottom:22px; }
body[data-app] .activation-hero .ok-mark { display:inline-grid; place-items:center; width:1.2em; height:1.2em; margin-left:6px; border-radius:50%; background:var(--ok-bg); color:var(--ok); font-size:.8em; vertical-align:middle; }
body[data-app] .notice-warn, .prism-dialog .notice-warn { color:var(--warn, #a4660b); background:var(--warn-bg, #fdf1dc); border-color:transparent; }

/* Plan: cancelar / mantener suscripción */
body[data-app] .plan-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
body[data-app] .plan-note { margin:14px 0 0; color:var(--muted); line-height:1.6; }
.prism-dialog p { margin:0; line-height:1.6; }

/* Ventana modal para crear/editar */
.prism-dialog { width:min(520px,calc(100vw - 32px)); padding:0; border:1px solid #e8e1de; border-radius:20px; background:#fff; color:#1b2940;
  box-shadow:0 30px 80px -30px rgba(40,30,60,.45); }
.prism-dialog::backdrop { background:rgba(27,41,64,.35); backdrop-filter:blur(3px); }
.prism-dialog form { display:grid; gap:14px; padding:24px; }
.prism-dialog label { display:grid; gap:6px; font-weight:600; font-size:.88rem; color:#1b2940; }
.prism-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.prism-dialog-head h2 { margin:0; font-size:1.35rem; }
.prism-dialog-close { border:0; background:none; font-size:1.6rem; line-height:1; color:#7f8795; cursor:pointer; }
.prism-dialog-close:hover { color:#c2413a; }
.prism-dialog .field { display:block; }
.prism-dialog .field input, .prism-dialog select { width:100%; color:#1b2940; background:#fff; border:1px solid #d4deea; border-radius:9px; padding:10px 12px; font:inherit; }
.prism-dialog .field input:focus, .prism-dialog select:focus { outline:0; border-color:#e9956f; box-shadow:0 0 0 4px rgba(233,109,85,.12); }
.prism-dialog small { font-weight:400; color:#5c687b; }
.prism-dialog-actions { display:flex; justify-content:flex-end; gap:10px; padding-top:6px; }

/* Una tabla ancha nunca debe estirar la página: se desplaza dentro de su recuadro. */
body[data-app] .app-main { min-width:0; }

@media (max-width:900px) {
  body[data-app] .app-shell { grid-template-columns:minmax(0,1fr); }
  body[data-app] .sidebar { position:static; height:auto; border-right:0; border-bottom:1px solid var(--line); }
  body[data-app] .sidebar nav { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
  body[data-app] .sidebar .nav-group { grid-column:1/-1; }
  body[data-app] td:last-child { text-align:left; }
  body[data-app] .row-actions { justify-content:flex-start; }
}

/* Bandeja de mensajes (admin) */
body[data-app] .message-list { display:grid; gap:14px; }
body[data-app] .message-card.is-new { box-shadow:inset 3px 0 0 #e96d55, 0 18px 44px -34px rgba(67,52,84,.35); }
body[data-app] .message-body { margin:12px 0 16px; white-space:pre-wrap; word-break:break-word; line-height:1.6; }
body[data-app] .message-card .section-title-row > div { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
body[data-app] .message-card .form-actions { align-items:center; }
body[data-app] .small-link { font-size:.85rem; }