/* ============================================================
   PHUYU — sistema de diseño
   Identidad: nube de quipus. Marino profundo, cian luminoso,
   azul eléctrico, ámbar de quipus, plata.
   ============================================================ */
:root {
  --bg: #0B132B;            /* marino de marca */
  --bg-2: #0E1730;
  --panel: #101B36;
  --panel-2: #16233f;
  --line: #1E2C4F;
  --line-2: #273962;
  --text: #E8EDF5;
  --muted: #9AAFC8;
  --cyan: #21C5F5;
  --blue: #1769FF;
  --amber: #D9A65A;
  --green: #3DDC97;
  --yellow: #F2C14E;
  --red: #FF7B7B;
  --grad: linear-gradient(120deg, var(--blue), var(--cyan));
  --sombra: 0 18px 44px rgba(2, 8, 23, .55);
  --radio: 16px;
}
* { box-sizing: border-box; }
/* el atributo hidden manda siempre: display:flex en una clase lo pisaría */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
html { scrollbar-color: var(--line-2) var(--bg); }
body {
  background:
    radial-gradient(1000px 460px at 88% -12%, rgba(33, 197, 245, .10), transparent),
    radial-gradient(760px 420px at -12% 108%, rgba(23, 105, 255, .10), transparent),
    var(--bg);
  color: var(--text);
  font: 16px/1.55 ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(33, 197, 245, .30); }
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 26px 22px 72px; }

/* ---------- marca y cabecera ---------- */
.top {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 14px; margin-bottom: 26px;
  background: linear-gradient(180deg, rgba(22, 35, 63, .75), rgba(16, 27, 54, .75));
  border: 1px solid var(--line); border-radius: var(--radio);
  backdrop-filter: blur(6px);
}
.marca { display: flex; align-items: center; gap: 11px; min-width: 0; }
.marca img.isotipo { width: 38px; height: 38px; border-radius: 10px; display: block; }
.logo {
  font-size: 22px; font-weight: 800; letter-spacing: .3px; line-height: 1.05;
  background: linear-gradient(180deg, #FFFFFF, #B9C7DE 62%, #7E93B8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.logo b { font-weight: 800; }
.tagline { color: var(--muted); font-size: 12px; letter-spacing: .4px; margin-top: 1px; }
.top .spacer { flex: 1; }
.whoami { color: var(--muted); font-size: 13px; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- secciones ---------- */
.seccion { display: flex; align-items: center; gap: 10px; margin: 30px 2px 13px; }
.seccion img { width: 20px; height: 20px; opacity: .9; }
.seccion h2 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: #C6D4E8; }
.seccion .rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-2), transparent); }

/* ---------- tarjetas ---------- */
.card {
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: var(--radio);
  padding: 19px 21px;
  margin-bottom: 18px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .02) inset;
}
.card h2 { margin: 0 0 12px; font-size: 16.5px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.card h2 img { width: 19px; height: 19px; }
.card h2 .sub { color: var(--muted); font-weight: 400; font-size: 12.5px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.dos-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 860px) { .dos-col { grid-template-columns: 1fr; } }

/* tarjetas de features (con ícono de marca) */
.card.feature { display: flex; gap: 15px; align-items: flex-start; }
.icono-chip {
  flex: none; width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: radial-gradient(120% 120% at 30% 20%, rgba(33, 197, 245, .16), rgba(23, 105, 255, .07));
  border: 1px solid rgba(33, 197, 245, .22);
}
.icono-chip img { width: 26px; height: 26px; }
.card.feature .cuerpo { flex: 1; min-width: 0; }
.card.feature h2 { margin-bottom: 6px; }

.app-card { position: relative; transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease; }
.app-card:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: var(--sombra); }
.app-card h3 { margin: 0 0 4px; font-size: 17px; }
.app-card h3 a { color: var(--text); }
.app-card .slug { color: var(--muted); font-size: 12px; font-family: ui-monospace, Consolas, monospace; }
.app-card .row { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

/* ---------- badges de estado ---------- */
.badge { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; padding: 3px 11px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); }
.badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.badge.running { color: var(--green); border-color: rgba(61, 220, 151, .35); }
.badge.running::before { background: var(--green); box-shadow: 0 0 9px rgba(61, 220, 151, .8); }
.badge.building, .badge.starting { color: var(--yellow); border-color: rgba(242, 193, 78, .38); }
.badge.building::before, .badge.starting::before { background: var(--yellow); animation: pulso 1s infinite; }
.badge.sleeping { color: var(--cyan); border-color: rgba(33, 197, 245, .36); }
.badge.sleeping::before { background: var(--cyan); box-shadow: 0 0 9px rgba(33, 197, 245, .65); }
.badge.error { color: var(--red); border-color: rgba(255, 123, 123, .38); }
.badge.error::before { background: var(--red); }
@keyframes pulso { 50% { opacity: .25; } }

/* ---------- botones ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line-2); border-radius: 11px;
  padding: 9px 16px; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: filter .12s ease, transform .08s ease, border-color .12s ease;
  text-decoration: none !important;
}
.btn:hover { border-color: rgba(33, 197, 245, .45); filter: brightness(1.12); }
.btn:active { transform: scale(.98); }
.btn img { width: 15px; height: 15px; }
.btn.primary { background: var(--grad); border: none; color: #061021; font-weight: 700; }
.btn.primary:hover { filter: brightness(1.08); box-shadow: 0 6px 22px rgba(33, 197, 245, .28); }
.btn.danger { color: var(--red); border-color: rgba(255, 123, 123, .35); background: transparent; }
.btn.danger:hover { border-color: rgba(255, 123, 123, .6); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.small { padding: 6px 12px; font-size: 13px; border-radius: 9px; }

/* ---------- formularios ---------- */
input, textarea {
  width: 100%; background: var(--bg); color: var(--text);
  border: 1px solid var(--line-2); border-radius: 11px;
  padding: 11px 13px; font-size: 15px; font-family: inherit;
  transition: border-color .12s ease, box-shadow .12s ease;
}
input:focus, textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(33, 197, 245, .14); }
input::placeholder, textarea::placeholder { color: #62779B; }
textarea { font-family: ui-monospace, Consolas, monospace; font-size: 13px; resize: vertical; }
label { display: block; font-size: 13px; color: var(--muted); margin: 10px 0 6px; }
.hint { color: var(--muted); font-size: 12.5px; margin-top: 8px; }
.hint code, .card code { background: rgba(33, 197, 245, .10); border: 1px solid rgba(33, 197, 245, .16); color: #9BDCFA; padding: 1px 6px; border-radius: 6px; font-size: 12px; }
.row-form { display: flex; gap: 10px; }
.row-form input { flex: 1; }

/* ---------- logs (terminal) ---------- */
.logs {
  background: #070E1F; border: 1px solid var(--line); border-radius: 12px;
  padding: 13px 15px; font: 12.5px/1.65 ui-monospace, Consolas, monospace;
  height: 360px; overflow-y: auto; white-space: pre-wrap; word-break: break-all;
  box-shadow: 0 10px 26px rgba(2, 8, 23, .5) inset;
}
.logs .l-build { color: var(--yellow); }
.logs .l-phuyu { color: var(--cyan); }
.logs .l-stderr { color: var(--red); }

/* ---------- login ---------- */
.centro { display: grid; place-items: center; min-height: 100vh; padding: 26px; position: relative; overflow: hidden; }
.centro .agua {
  position: absolute; width: 640px; max-width: 120vw; opacity: .05; pointer-events: none;
  filter: saturate(1.2); transform: rotate(-8deg);
}
.login-card { width: 100%; max-width: 420px; text-align: center; position: relative; z-index: 1; }
.login-card .hero-logo { width: 132px; height: 132px; border-radius: 28px; box-shadow: 0 22px 60px rgba(23, 105, 255, .35); }
.login-card .logo { font-size: 42px; margin: 16px 0 2px; }
.login-card .tagline { margin-bottom: 24px; font-size: 14px; letter-spacing: 1.2px; }
.login-card form { text-align: left; }
.devlink {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  margin-top: 14px; padding: 13px 14px;
  background: rgba(33, 197, 245, .07); border: 1px dashed rgba(33, 197, 245, .5);
  border-radius: 11px; font-size: 13px; word-break: break-all; color: var(--text);
}
.devlink:hover { text-decoration: none; background: rgba(33, 197, 245, .12); }
.devlink img { width: 17px; height: 17px; flex: none; }

/* ---------- estados vacíos ---------- */
.empty { text-align: center; color: var(--muted); padding: 46px 12px; }
.empty img { width: 58px; height: 58px; opacity: .55; margin-bottom: 10px; }

/* ---------- mensajes ---------- */
.error-msg { color: var(--red); font-size: 13.5px; margin-top: 10px; }
.ok-msg { color: var(--green); font-size: 13.5px; margin-top: 10px; }
.aviso-msg { color: var(--yellow); font-size: 13.5px; margin-top: 10px; }

/* ---------- toast ---------- */
.toast {
  position: fixed; bottom: 22px; right: 22px; max-width: 380px;
  background: var(--panel-2); border: 1px solid var(--line-2); border-left: 4px solid var(--cyan);
  border-radius: 12px; padding: 13px 16px; font-size: 14px; z-index: 50;
  box-shadow: var(--sombra);
  opacity: 0; transform: translateY(8px); transition: all .2s ease;
}
.toast.show { opacity: 1; transform: none; }
.toast.err { border-left-color: var(--red); }

/* ---------- diagnóstico ---------- */
.diag-caja { margin-top: 12px; border: 1px solid var(--line-2); border-radius: 13px; padding: 15px 16px; background: var(--bg-2); }
.diag-caja .cab { display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap; }
.diag-caja b.titulo { font-size: 15.5px; }
.diag-caja p { margin: 8px 0; font-size: 14px; }

/* ---------- listas (tokens, historial) ---------- */
.lista-fila { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-top: 1px solid var(--line); font-size: 13.5px; flex-wrap: wrap; }

/* ---------- créditos ---------- */
.saldo { display: flex; align-items: baseline; gap: 10px; margin: 10px 2px; }
.saldo .numero { font-size: 34px; font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ============================================================
   LAYOUT DEL PANEL — barra lateral + contenido
   ============================================================ */
.menu-btn {
  display: none; position: fixed; top: 14px; left: 14px; z-index: 30;
  width: 44px; height: 40px; border-radius: 11px; padding: 9px 11px;
  background: var(--panel-2); border: 1px solid var(--line-2); cursor: pointer;
}
.menu-btn span { display: block; height: 2px; background: var(--cyan); border-radius: 2px; margin: 4px 0; }

.panel-layout { display: flex; min-height: 100vh; }
.sidebar {
  position: fixed; top: 0; bottom: 0; left: 0; width: 236px; z-index: 20;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border-right: 1px solid var(--line); padding: 18px 14px;
}
.sidebar .marca {
  display: flex; align-items: center; gap: 10px; padding: 2px 6px 14px;
  border-bottom: 1px solid var(--line); margin-bottom: 12px;
  text-decoration: none !important; color: inherit;
}
.sidebar .isotipo { width: 36px; height: 36px; border-radius: 9px; }
.nav { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 10px;
  color: var(--muted); font-size: 14px; font-weight: 600;
  text-decoration: none !important; cursor: pointer;
  border: none; background: none; width: 100%; text-align: left; font-family: inherit;
}
.nav-item img { width: 17px; height: 17px; opacity: .85; flex: none; }
.nav-item:hover { background: var(--panel-2); color: var(--text); }
.nav-item.activo {
  background: linear-gradient(90deg, rgba(33, 197, 245, .14), rgba(23, 105, 255, .06));
  color: var(--text); box-shadow: inset 2px 0 0 var(--cyan);
}
.nav-item.sub { padding-left: 24px; font-weight: 400; font-size: 13px; }
.nav-grupo summary { list-style: none; }
.nav-grupo summary::-webkit-details-marker { display: none; }

.sb-pie { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 9px; }
.sb-saldo {
  display: flex; align-items: baseline; gap: 7px; text-decoration: none !important;
  color: var(--muted); font-size: 12px; padding: 9px 11px; border-radius: 10px;
  background: rgba(33, 197, 245, .06); border: 1px solid rgba(33, 197, 245, .18);
}
.sb-saldo:hover { background: rgba(33, 197, 245, .11); }
.sb-saldo b { font-size: 19px; color: var(--cyan); }
.sb-user { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.contenido { flex: 1; margin-left: 236px; max-width: 1120px; padding: 26px 30px 70px; min-width: 0; }

@media (max-width: 900px) {
  .menu-btn { display: block; }
  .sidebar { transform: translateX(-106%); transition: transform .18s ease; box-shadow: var(--sombra); }
  body.nav-abierta .sidebar { transform: none; }
  .contenido { margin-left: 0; padding: 68px 18px 60px; }
}

/* ---------- pestañas (crear) ---------- */
.pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; flex-wrap: wrap; }
.pestana {
  padding: 10px 16px; font-size: 14px; font-weight: 600; color: var(--muted);
  background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; font-family: inherit;
}
.pestana.activa { color: var(--text); border-bottom-color: var(--cyan); }

/* ---------- inicio ---------- */
.saludo { margin: 4px 0 18px; }
.saludo h1 { margin: 0 0 6px; font-size: 24px; }
.saludo p { margin: 0; color: var(--muted); font-size: 14px; }
.saludo-fila { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.fila-app {
  display: flex; align-items: center; gap: 12px; padding: 12px 4px;
  border-top: 1px solid var(--line); flex-wrap: wrap;
}
.fila-app .nom { font-weight: 700; }
.fila-app .url { color: var(--muted); font-size: 12.5px; font-family: ui-monospace, Consolas, monospace; }
.atencion {
  border: 1px solid rgba(255, 123, 123, .38); background: rgba(255, 123, 123, .05);
  border-radius: 13px; padding: 10px 14px; display: flex; gap: 10px;
  align-items: center; flex-wrap: wrap; margin-bottom: 10px; font-size: 14px;
}
.atencion .nom { font-weight: 700; color: var(--red); }
.atencion .hint { flex-basis: 100%; }

.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.paso { border: 1px solid var(--line); border-radius: 13px; padding: 15px; background: var(--bg-2); font-size: 13.5px; color: var(--muted); }
.paso b { display: block; margin-bottom: 5px; color: var(--text); }
.paso .n { color: var(--cyan); font-weight: 800; margin-right: 6px; }
@media (max-width: 760px) { .pasos { grid-template-columns: 1fr; } }

/* ---------- tarjetas de app con estado dominante ---------- */
.app-card[data-estado="error"] { border-color: rgba(255, 123, 123, .45); }
.app-card[data-estado="error"]:hover { border-color: rgba(255, 123, 123, .7); }
.app-card[data-estado="running"] { border-color: rgba(61, 220, 151, .25); }
.app-card .url-viva { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--green); word-break: break-all; }
.buscar { max-width: 340px; }

/* ============================================================
   INICIO — despliegue de un proyecto hecho (ZIP)
   ============================================================ */
.card.desplegar { padding: 24px; }
.zona {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 210px; padding: 26px 18px; text-align: center; cursor: pointer;
  background: var(--bg); border: 2px dashed var(--line-2); border-radius: var(--radio);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.zona:hover { border-color: rgba(33, 197, 245, .5); }
.zona:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.zona.activo {
  border-color: var(--cyan); background: rgba(33, 197, 245, .08);
  box-shadow: 0 0 0 4px rgba(33, 197, 245, .12) inset;
}
.zona.error { border-color: var(--red); background: rgba(255, 123, 123, .06); }
.zona-icono { width: 44px; height: 44px; opacity: .85; margin-bottom: 6px; }
.zona-texto b { display: block; font-size: 16px; }
.zona-texto span { color: var(--muted); font-size: 13px; }
.zona label.btn { margin-top: 10px; }
/* separador «o» entre soltar y elegir archivo: centrado, con líneas finas */
.zona-o {
  display: flex; align-items: center; gap: 12px; width: min(260px, 82%);
  margin: 8px 0 0; color: var(--muted); font-size: 12px;
}
.zona-o::before, .zona-o::after { content: ""; height: 1px; flex: 1; background: var(--line-2); }
/* nombre opcional bajo la zona de arrastre */
.nombre-app { margin-top: 14px; }
.nombre-app label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.nombre-app input { max-width: 340px; }

/* progreso de 4 pasos */
.pasos-despliegue {
  display: flex; gap: 8px; flex-wrap: wrap; list-style: none;
  margin: 18px 0 0; padding: 0;
}
.pasos-despliegue li {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 11px; font-size: 13.5px; font-weight: 600;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--muted);
}
.pasos-despliegue li .punto {
  width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); flex: none;
}
.pasos-despliegue li.activo { color: var(--text); border-color: rgba(242, 193, 78, .5); }
.pasos-despliegue li.activo .punto { background: var(--yellow); animation: pulso 1s infinite; }
.pasos-despliegue li.ok { color: var(--green); border-color: rgba(61, 220, 151, .35); }
.pasos-despliegue li.ok .punto { background: var(--green); }
.pasos-despliegue li.error { color: var(--red); border-color: rgba(255, 123, 123, .45); }
.pasos-despliegue li.error .punto { background: var(--red); }

/* fallo del despliegue */
.despliegue-error { margin-top: 16px; }
.despliegue-error .error-msg { margin: 0 0 10px; }
.row-btn { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* éxito: la URL en grande */
.despliegue-ok { margin-top: 18px; text-align: center; }
.ok-marca {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--green); font-weight: 700; font-size: 14px; margin-bottom: 8px;
}
.ok-marca img { width: 18px; height: 18px; }
.ok-url {
  display: block; font-size: clamp(19px, 3.6vw, 27px); font-weight: 800; letter-spacing: .2px;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  word-break: break-all; margin-bottom: 16px;
}
.despliegue-ok .row-btn { justify-content: center; }

/* renglón CLI secundario */
.cli-renglon {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 12px 2px 4px; color: var(--muted); font-size: 12.5px;
}
.cli-codigo {
  background: #070E1F; border: 1px solid var(--line); border-radius: 8px;
  padding: 4px 10px; font: 12.5px ui-monospace, Consolas, monospace; color: #9BDCFA;
}

/* enlaces secundarios de creación */
.crear-secundarias {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 2px 26px; font-size: 13px;
}
.crear-secundarias a {
  display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-weight: 600;
  text-decoration: none !important; padding: 4px 6px; border-radius: 8px;
}
.crear-secundarias a:hover { color: var(--cyan); background: rgba(33, 197, 245, .07); }
.crear-secundarias a img { width: 14px; height: 14px; opacity: .95; }
.crear-secundarias span { color: var(--muted); }

/* filas compactas de apps (Inicio) */
.fila-app.compacta { padding: 9px 4px; gap: 10px; font-size: 14px; }
.fila-app.compacta .nom { font-size: 14px; }
.fila-app .relleno { flex: 1; }

/* enlace discreto «Ver todas» de las secciones */
.ver-todas { font-size: 12px; color: var(--muted); text-decoration: none !important; }
.ver-todas:hover { color: var(--cyan); }

/* tiempo equivalente del saldo */
.saldo-tiempo { color: var(--cyan); }
.sb-tiempo { font-size: 11px; color: var(--muted); padding: 0 11px; margin-top: -4px; }
.sb-recargar { justify-content: center; }

@media (max-width: 700px) {
  .card.desplegar { padding: 18px 14px; }
  .zona { min-height: 168px; padding: 20px 12px; }
  .pasos-despliegue { gap: 6px; }
  .pasos-despliegue li { padding: 7px 11px; font-size: 12.5px; flex: 1 1 40%; justify-content: center; }
  .atencion { align-items: flex-start; }
  .atencion .row-btn, .atencion button, .atencion a { width: 100%; justify-content: center; }
  .cli-renglon { flex-direction: column; align-items: flex-start; }
}

/* ---------- texto listo para pegar en el agente ---------- */
.texto-copiable {
  background: #070E1F; border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; margin: 0 0 14px; overflow-x: auto;
  font: 12.5px/1.7 ui-monospace, Consolas, monospace; color: #B7CBE6;
  white-space: pre-wrap; word-break: break-word;
}
.texto-copiable.sin-token { border-color: rgba(217, 166, 90, .45); }
details.card > summary {
  cursor: pointer; font-weight: 700; font-size: 15px;
  list-style: none; display: flex; align-items: center; gap: 8px;
}
details.card > summary::before { content: "›"; color: var(--cyan); font-size: 19px; transition: transform .15s ease; }
details.card[open] > summary::before { transform: rotate(90deg); }
details.card > summary::-webkit-details-marker { display: none; }

/* ============================================================
   ACCESIBILIDAD — foco visible en todo lo interactivo
   ============================================================ */
a:focus-visible, button:focus-visible, .btn:focus-visible,
summary:focus-visible, .pestana:focus-visible, .nav-item:focus-visible {
  outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 8px;
}
input:focus-visible, textarea:focus-visible { outline: none; }

/* ---------- páginas legales ---------- */
.legal { max-width: 820px; margin: 0 auto; padding: 38px 24px 80px; color: var(--text); font-size: 15px; line-height: 1.65; }
.legal .marca img { height: 42px; }
.legal h1 { font-size: 28px; margin: 22px 0 6px; }
.legal h2 { font-size: 17px; margin: 26px 0 6px; color: var(--cyan); }
.legal p, .legal li { color: var(--muted); }
.legal p { margin: 8px 0; }
.legal ul { padding-left: 20px; margin: 8px 0; }
.legal a { color: var(--cyan); }
.legal b { color: var(--text); }
.legal code { background: rgba(33, 197, 245, .10); border: 1px solid rgba(33, 197, 245, .16); color: #9BDCFA; padding: 1px 6px; border-radius: 6px; font-size: 12.5px; }
.legal-nota { text-align: center; color: var(--muted); font-size: 12.5px; margin-top: 16px; }
.legal-nota a { color: var(--cyan); text-decoration: none; }
.sb-legal { font-size: 11px; color: var(--muted); text-align: center; line-height: 1.6; }
.sb-legal a { color: var(--muted); text-decoration: none; }
.sb-legal a:hover { color: var(--cyan); }

/* Uso de datos persistentes */
.uso-cab { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; margin: 12px 0 6px; color: var(--text); }
.uso-cab b { font-size: 15px; }
.uso-cab span { color: var(--muted); }
.uso-barra { height: 8px; border-radius: 999px; background: rgba(154, 175, 200, .15); overflow: hidden; border: 1px solid var(--line); }
.uso-barra i { display: block; height: 100%; width: 0; background: var(--cyan); border-radius: 999px; transition: width .3s ease; }
.uso-barra.warning i { background: #f0b429; }
.uso-barra.blocked i { background: #ef476f; }