/*
 * Área de cliente — hoja de estilo.
 * Logo: /img/mark.svg (con su degradado) y /img/wordmark.svg (coloreado por tema con
 * currentColor vía máscara CSS, un solo fichero).
 * Temas claro/oscuro por @media (prefers-color-scheme) + override :root[data-theme], que
 * es el que gana cuando el visitante toca el interruptor.
 */
:root{
    --paper:#FBF8FB; --surface:#FFFFFF; --surface-2:#F4EDF3;
    --ink:#17131A; --ink-soft:#574F5B; --ink-faint:#8B8291;
    --hairline:rgba(23,19,26,.13); --hairline-2:rgba(23,19,26,.07);
    --brand:#92117E; --brand-rgb:146,17,126; --lift:#C724A8; --lavanda:#EFDAFF; --plum:#4A0B40;
    --accent:#92117E;
    /* semánticos (independientes del acento) */
    --good:#1f9d57; --good-bg:rgba(31,157,87,.12);
    --warn:#c07d12; --warn-bg:rgba(192,125,18,.13);
    --bad:#d23f4f;  --bad-bg:rgba(210,63,79,.12);

    --maxw:1120px; --gutter:clamp(18px,4.5vw,52px);
    --font-display:ui-sans-serif,system-ui,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
    --font-body:ui-sans-serif,system-ui,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
    --font-serif:Georgia,"Times New Roman",serif;
    --font-mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
  }
  @media (prefers-color-scheme: dark){:root{
    --paper:#0E090D; --surface:#160F16; --surface-2:#201325;
    --ink:#F6EEF4; --ink-soft:#C0B0BE; --ink-faint:#8C7C8B;
    --hairline:rgba(239,218,255,.15); --hairline-2:rgba(239,218,255,.07);
    --accent:#DE5BC7;
    --good:#42c47f; --good-bg:rgba(66,196,127,.14);
    --warn:#e0a13a; --warn-bg:rgba(224,161,58,.15);
    --bad:#ef6674;  --bad-bg:rgba(239,102,116,.15);
  }}
  :root[data-theme="light"]{
    --paper:#FBF8FB; --surface:#FFFFFF; --surface-2:#F4EDF3;
    --ink:#17131A; --ink-soft:#574F5B; --ink-faint:#8B8291;
    --hairline:rgba(23,19,26,.13); --hairline-2:rgba(23,19,26,.07);
    --accent:#92117E;
    --good:#1f9d57; --good-bg:rgba(31,157,87,.12);
    --warn:#c07d12; --warn-bg:rgba(192,125,18,.13);
    --bad:#d23f4f;  --bad-bg:rgba(210,63,79,.12);
  }
  :root[data-theme="dark"]{
    --paper:#0E090D; --surface:#160F16; --surface-2:#201325;
    --ink:#F6EEF4; --ink-soft:#C0B0BE; --ink-faint:#8C7C8B;
    --hairline:rgba(239,218,255,.15); --hairline-2:rgba(239,218,255,.07);
    --accent:#DE5BC7;
    --good:#42c47f; --good-bg:rgba(66,196,127,.14);
    --warn:#e0a13a; --warn-bg:rgba(224,161,58,.15);
    --bad:#ef6674;  --bad-bg:rgba(239,102,116,.15);
  }

  *{box-sizing:border-box;}
  body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);
    font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;transition:background .4s,color .4s;}
  a{color:inherit;text-decoration:none;}
  :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px;}
  .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}
  .mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}

  /* logo */
  .logo{display:inline-flex;align-items:center;gap:.6em;}
  /* logo vectorial original (public/img); el wordmark sigue el tema con currentColor vía máscara */
  .logo-mark{background:url("/img/mark.svg") center/contain no-repeat;width:30px;height:29px;display:block;flex:none;}
  .logo-word{width:104px;height:31px;display:block;flex:none;background:var(--ink);
    -webkit-mask:url("/img/wordmark.svg") left center/contain no-repeat;
    mask:url("/img/wordmark.svg") left center/contain no-repeat;}

  /* topbar */
  header.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 82%,transparent);
    backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--hairline-2);}
  .top-in{display:flex;align-items:center;justify-content:space-between;height:66px;gap:20px;}
  .top-nav{display:flex;gap:26px;}
  .top-nav a{font-size:14px;color:var(--ink-soft);position:relative;padding:4px 0;transition:color .2s;}
  .top-nav a.active{color:var(--ink);}
  .top-nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--accent);border-radius:2px;}
  .top-nav a:hover{color:var(--ink);}
  .top-right{display:flex;align-items:center;gap:12px;}
  .toggle{appearance:none;border:1px solid var(--hairline);background:transparent;color:var(--ink-soft);
    width:36px;height:36px;border-radius:50%;cursor:pointer;display:grid;place-items:center;font-size:14px;
    transition:border-color .2s,color .2s,transform .2s;}
  .toggle:hover{color:var(--ink);border-color:var(--accent);transform:rotate(-18deg);}
  .user{display:flex;align-items:center;gap:9px;border:1px solid var(--hairline);border-radius:999px;
    padding:5px 6px 5px 12px;cursor:pointer;transition:border-color .2s;}
  .user:hover{border-color:var(--accent);}
  .user .nm{font-size:13.5px;font-weight:600;letter-spacing:-.01em;}
  .user .av{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:700;
    background:linear-gradient(135deg,var(--lift),var(--brand));}

  /* page head */
  .head{padding-block:clamp(26px,4vw,44px) 6px;}
  .eyebrow{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
    display:inline-flex;align-items:center;gap:.7em;}
  .eyebrow::before{content:"";width:24px;height:1px;background:currentColor;opacity:.55;}
  .head h1{font-family:var(--font-display);font-weight:800;font-size:clamp(28px,4.2vw,42px);
    letter-spacing:-.035em;margin:12px 0 0;}
  .head p{color:var(--ink-soft);margin:8px 0 0;font-size:15px;}
  .head .last{font-family:var(--font-mono);font-size:12px;color:var(--ink-faint);}

  /* KPIs */
  .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px;}
  .kpi{background:var(--surface);border:1px solid var(--hairline);border-radius:14px;padding:16px 18px;position:relative;overflow:hidden;}
  .kpi .k{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);}
  .kpi .v{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:clamp(22px,2.6vw,29px);
    letter-spacing:-.02em;margin-top:8px;color:var(--ink);}
  .kpi .v small{font-size:15px;color:var(--ink-faint);letter-spacing:0;}
  .kpi.accent .v{color:var(--accent);}
  .kpi.warn .v{color:var(--warn);}
  .kpi .spark{position:absolute;right:12px;top:14px;font-family:var(--font-mono);font-size:11px;color:var(--ink-faint);}

  /* section card */
  .card{background:var(--surface);border:1px solid var(--hairline);border-radius:16px;margin-top:22px;overflow:hidden;}
  .card-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
    padding:18px 20px;border-bottom:1px solid var(--hairline);}
  .card-head h2{font-family:var(--font-display);font-weight:720;font-size:19px;letter-spacing:-.02em;margin:0;}
  .card-head .sub{font-size:13px;color:var(--ink-faint);margin-top:2px;}
  .tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
  .tabs{display:flex;gap:4px;background:var(--surface-2);border-radius:999px;padding:4px;}
  .tab{appearance:none;border:0;background:transparent;color:var(--ink-soft);font-family:var(--font-body);
    font-size:13px;padding:6px 13px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s;white-space:nowrap;}
  .tab.active{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08);}
  .btn-sm{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;
    padding:8px 13px;border-radius:9px;border:1px solid var(--hairline);background:transparent;color:var(--ink);
    cursor:pointer;transition:border-color .2s,background .2s;}
  .btn-sm:hover{border-color:var(--accent);}

  /* "ver más" / "ver historial": pie de lista con contador + botón, centrado */
  .listmore{display:flex;align-items:center;justify-content:center;gap:14px;
    padding:16px 0 2px;border-top:1px solid var(--hairline-2);margin-top:2px;}
  .listmore[hidden]{display:none;}
  .listmore .cnt{font-family:var(--font-mono);font-variant-numeric:tabular-nums;
    font-size:12px;letter-spacing:.04em;color:var(--ink-faint);}

  /* tabla facturas */
  table.inv{width:100%;border-collapse:collapse;font-size:14.5px;}
  table.inv th{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--ink-faint);text-align:left;font-weight:500;padding:12px 20px;border-bottom:1px solid var(--hairline);}
  table.inv th.r,table.inv td.r{text-align:right;}
  table.inv td{padding:15px 20px;border-bottom:1px solid var(--hairline-2);vertical-align:middle;}
  table.inv tr:last-child td{border-bottom:0;}
  table.inv tbody tr{transition:background .18s;}
  table.inv tbody tr:hover{background:color-mix(in srgb,var(--surface) 90%,var(--lavanda));}
  :root[data-theme="dark"] table.inv tbody tr:hover{background:color-mix(in srgb,var(--surface) 82%,var(--plum));}
  @media (prefers-color-scheme: dark){table.inv tbody tr:hover{background:color-mix(in srgb,var(--surface) 82%,var(--plum));}}
  .inv .num{font-family:var(--font-mono);font-weight:600;letter-spacing:-.01em;}
  .inv .date{font-family:var(--font-mono);color:var(--ink-soft);font-variant-numeric:tabular-nums;white-space:nowrap;}
  .inv .amount{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap;}
  .concept{color:var(--ink);}

  .pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;
    letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px;white-space:nowrap;}
  .pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
  .pill.paid{color:var(--good);background:var(--good-bg);}
  .pill.pending{color:var(--warn);background:var(--warn-bg);}
  .pill.overdue{color:var(--bad);background:var(--bad-bg);}

  /* sesión actual + conexiones */
  .session{margin-top:16px;display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;
    font-family:var(--font-mono);font-size:12.5px;color:var(--ink-soft);
    background:var(--surface);border:1px solid var(--hairline);border-radius:999px;padding:8px 15px;}
  .session .live-dot{width:8px;height:8px;border-radius:50%;background:var(--good);
    box-shadow:0 0 0 0 rgba(31,157,87,.5);animation:pulse 2.5s infinite;}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(31,157,87,.45)}70%{box-shadow:0 0 0 7px rgba(31,157,87,0)}100%{box-shadow:0 0 0 0 rgba(31,157,87,0)}}
  .session .sep{color:var(--ink-faint);opacity:.7;}
  .ip{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
  .loc{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;}
  .flag{display:inline-block;width:17px;height:12px;border-radius:2px;flex:none;
    background:linear-gradient(#c60b1e 0 25%,#ffc400 25% 75%,#c60b1e 75%);
    box-shadow:0 0 0 1px rgba(0,0,0,.12) inset;}
  .tag{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
    padding:3px 9px;border-radius:999px;background:var(--surface-2);color:var(--ink-faint);white-space:nowrap;}
  .tag.now{background:var(--good-bg);color:var(--good);}
  .tag.new{background:var(--warn-bg);color:var(--warn);}
  table.inv tbody tr.current td{background:color-mix(in srgb,var(--surface) 88%,var(--lavanda));}
  :root[data-theme="dark"] table.inv tbody tr.current td{background:color-mix(in srgb,var(--surface) 82%,var(--plum));}
  @media (prefers-color-scheme: dark){table.inv tbody tr.current td{background:color-mix(in srgb,var(--surface) 82%,var(--plum));}}

  .dl{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--accent);
    border:1px solid var(--hairline);border-radius:9px;padding:7px 12px;cursor:pointer;background:transparent;
    font-family:var(--font-body);transition:border-color .2s,background .2s,transform .15s;}
  .dl:hover{border-color:var(--accent);background:color-mix(in srgb,var(--surface) 88%,var(--lavanda));}
  .dl:active{transform:translateY(1px);}
  .dl svg{width:14px;height:14px;}

  /* servicios contratados */
  .svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px;}
  .svc-card{background:var(--surface);border:1px solid var(--hairline);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:6px;}
  .svc-card .t{font-family:var(--font-display);font-weight:680;font-size:16px;letter-spacing:-.01em;}
  .svc-card .d{font-size:13px;color:var(--ink-soft);}
  .svc-card .meta{margin-top:8px;display:flex;align-items:center;justify-content:space-between;
    font-family:var(--font-mono);font-size:11px;color:var(--ink-faint);}

  footer.ft{margin-top:40px;border-top:1px solid var(--hairline);}
  .ft-in{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-block:26px;}
  .ft-in small{font-family:var(--font-mono);font-size:12px;color:var(--ink-faint);}

  /* toast */
  #toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
    background:var(--ink);color:var(--paper);font-size:14px;padding:12px 18px;border-radius:10px;
    box-shadow:0 16px 40px -12px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;z-index:80;
    display:flex;align-items:center;gap:10px;}
  #toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
  #toast .dot{width:8px;height:8px;border-radius:50%;background:var(--good);}

  @media (max-width:820px){
    .top-nav{display:none;}
    .kpis{grid-template-columns:1fr 1fr;}
    .svcs{grid-template-columns:1fr;}
    .user .nm{display:none;}
    /* tabla -> tarjetas */
    table.inv thead{display:none;}
    table.inv,table.inv tbody,table.inv tr,table.inv td{display:block;width:100%;}
    table.inv tr{border:1px solid var(--hairline);border-radius:12px;margin:12px;padding:6px 0;}
    table.inv td{border:0;padding:8px 16px;display:flex;justify-content:space-between;align-items:center;gap:16px;text-align:right;}
    table.inv td::before{content:attr(data-label);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;
      text-transform:uppercase;color:var(--ink-faint);text-align:left;}
    table.inv td.actions{justify-content:flex-end;}
    table.inv td.actions::before{content:"";}
    .dl{width:100%;justify-content:center;}
  }
  @media (max-width:480px){ .kpis{grid-template-columns:1fr;} }
  @media (prefers-reduced-motion:reduce){*{transition:none!important;}}

/* ============================================================================
 * Estilos del formulario de acceso (enlace mágico) y de los avisos, con los
 * mismos tokens de arriba para que no se note la costura.
 * ========================================================================== */

.lbl{display:block;font-size:13px;font-weight:600;color:var(--ink-soft);margin:0 0 7px}

.inp{
  width:100%;box-sizing:border-box;padding:12px 14px;
  font-family:var(--font-body);font-size:15px;color:var(--ink);
  background:var(--paper);border:1px solid var(--hairline);border-radius:10px;
  transition:border-color .15s,box-shadow .15s;
}
.inp:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(var(--brand-rgb),.15);
}
.inp::placeholder{color:var(--ink-faint)}

.ayuda{font-size:13px;color:var(--ink-faint);margin:10px 0 18px;line-height:1.5}
.ayuda a{color:var(--accent)}

.btn{
  width:100%;padding:13px 18px;cursor:pointer;
  font-family:var(--font-display);font-size:15px;font-weight:640;letter-spacing:-.01em;
  color:#fff;background:var(--brand);border:0;border-radius:10px;
  transition:background .15s,transform .1s;
}
.btn:hover{background:var(--lift)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Avisos. El color es refuerzo, no el mensaje: el texto ya dice qué pasa, para quien no
   distinga los tonos y para quien lo lea con un lector de pantalla (de ahí role="status"
   y role="alert" en la plantilla). */
.aviso{
  padding:12px 14px;border-radius:10px;margin:0 0 18px;
  font-size:14px;line-height:1.5;border:1px solid transparent;
}
.aviso.ok{color:var(--good);background:var(--good-bg);border-color:var(--good-bg)}
.aviso.mal{color:var(--bad);background:var(--bad-bg);border-color:var(--bad-bg)}
.aviso strong{display:block;margin-bottom:2px}

/* Fila vacía de una tabla (sin facturas todavía, sin conexiones registradas). */
.vacio{padding:40px 20px;text-align:center;color:var(--ink-faint);font-size:14px}

/* Botón de salir. Hermano visual de .toggle (mismo círculo de 36px) pero con animación
   propia: .toggle gira -18deg, que es un gesto que le pega al ◐ del tema y no a una puerta.
   Aquí la flecha se DESPLAZA hacia fuera, que es lo que la acción significa.

   En rojo semántico al pasar por encima, no en el acento de marca: cerrar sesión es
   destructivo (si es un ordenador prestado, es justo lo que quieres que no falle) y los
   semánticos son independientes del acento, así que el rojo dice lo mismo en claro y oscuro.

   El icono va en SVG y no en emoji a propósito: el ⏻ (U+23FB) sale como tofu en Chrome/Linux
   —el mismo problema que las banderas, ver §11 del handoff— y un botón que no se entiende no
   se pulsa. */
.salir{
  appearance:none;border:1px solid var(--hairline);background:transparent;color:var(--ink-soft);
  width:36px;height:36px;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  padding:0;transition:border-color .2s,color .2s,background .2s;
}
.salir svg{width:16px;height:16px;transition:transform .2s}
.salir:hover{color:var(--bad);border-color:var(--bad);background:var(--bad-bg)}
.salir:hover svg{transform:translateX(2px)}
.salir:focus-visible{outline:2px solid var(--bad);outline-offset:2px}

/* .user es un enlace (lleva a "Mi cuenta"); se desactiva el estilo de link
   para que no salga subrayado ni en el color de los enlaces. */
a.user{text-decoration:none;color:inherit}

/* KPI que lleva a algún sitio. Solo algunas lo son, así que tiene que NOTARSE cuál:
   la señal es la flecha, que aparece al pasar por encima o al recibir el foco. La tarjeta
   no cambia de tamaño ni de fondo: la retícula de cuatro tiene que leerse igual. */
a.kpi{text-decoration:none;color:inherit;display:block;position:relative;
  transition:border-color .2s,transform .12s}
a.kpi:hover{border-color:var(--accent);transform:translateY(-1px)}
a.kpi:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
a.kpi .ir{position:absolute;top:14px;right:14px;opacity:0;transform:translateX(-3px);
  color:var(--accent);transition:opacity .2s,transform .2s}
a.kpi:hover .ir,a.kpi:focus-visible .ir{opacity:1;transform:translateX(0)}
@media (prefers-reduced-motion:reduce){
  a.kpi:hover{transform:none}
  a.kpi .ir{transition:opacity .2s}
  a.kpi:hover .ir,a.kpi:focus-visible .ir{transform:none}
}

/* Salto a un ancla desde un KPI: suave, y con margen para que el título de la sección no
   quede pegado al borde de arriba (o debajo de la cabecera). `scroll-behavior` se anula en
   el bloque de prefers-reduced-motion de más arriba vía la regla global de transiciones, así
   que se declara aquí explícitamente para quien pida menos movimiento. */
html{scroll-behavior:smooth}
#facturas,#servicios{scroll-margin-top:24px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}