/* ==========================================================================
   AI Central — hoja de estilos propia.

   Comparte el aire de la suite de P9 (fondo oscuro, superficies de cristal,
   Inter para texto y Space Grotesk para titulares) pero no su piel:
     · acento esmeralda -> cian, en vez del cian -> violeta de apps.p9tech.es
     · geometria recta (radios cortos, botones no pastilla)
     · el motivo de fondo es una onda de voz, no un grafo de nodos
   ========================================================================== */

:root {
  /* Base con un poso azul-verde, para que no sea el mismo negro de la suite */
  --bg:            #05080a;
  --bg-2:          #070c0f;
  --surface:       rgba(255, 255, 255, .028);
  /* Base OPACA de las tarjetas. El cristal se pinta encima, pero por debajo
     hay color solido: si no, la onda del fondo se transparenta y parece estar
     por delante de las cajas. */
  --card:          #0a1015;
  --surface-2:     rgba(255, 255, 255, .055);
  --line:          rgba(255, 255, 255, .08);
  --line-strong:   rgba(255, 255, 255, .16);

  --text:          #eef4f3;
  --text-2:        rgba(238, 244, 243, .70);
  --text-3:        rgba(238, 244, 243, .46);
  --text-4:        rgba(238, 244, 243, .28);

  --signal:        #34d399;   /* verde llamada activa */
  --cyan:          #22d3ee;
  --amber:         #fbbf24;
  --red:           #f87171;

  --grad:          linear-gradient(100deg, #34d399 0%, #22d3ee 100%);

  --maxw:          1180px;
  --pad-x:         clamp(20px, 5vw, 64px);
  --r:             12px;
  --r-lg:          16px;
  --ease:          cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-weight: 600;
  letter-spacing: -.025em;
  margin: 0;
}

a { color: inherit; }

/* Etiquetas y cifras en monoespaciada: la suite no las usa asi */
.mono {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* --- Fondo ---------------------------------------------------------------- */

.stage {
  position: fixed; inset: 0; z-index: -1;
  overflow: hidden;
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(52, 211, 153, .11), transparent 62%),
    radial-gradient(760px 620px at 92% 8%, rgba(34, 211, 238, .09), transparent 58%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 55%, var(--bg) 100%);
}

/* Rayas horizontales finas: sugieren un pentagrama de audio */
.stage__lines {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px);
  background-size: 100% 7px;
  mask-image: linear-gradient(180deg, transparent, #000 22%, rgba(0,0,0,.5) 55%, transparent 88%);
}

/* Banda de la onda: ocupa el ancho completo y se queda entre secciones, asi
   que no se cruza con ningun texto. */
.waveband {
  position: relative;
  width: 100%;
  height: clamp(110px, 17vh, 180px);
  overflow: hidden;
}

.waveband canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}

.stage__grain {
  position: absolute; inset: 0;
  opacity: .035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .85 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}

/* --- Barra superior ------------------------------------------------------- */

.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 18px var(--pad-x);
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}

.topbar.is-stuck {
  background: rgba(5, 8, 10, .82);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
}

.brand {
  display: inline-flex; align-items: center; gap: 11px;
  text-decoration: none;
}

/* Marca: cuadrado con la esquina cortada, no el redondel de la suite */
.brand__glyph {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  background: var(--grad);
  color: #04140f;
  clip-path: polygon(0 0, 100% 0, 100% 72%, 72% 100%, 0 100%);
}

.brand__glyph svg { width: 17px; height: 17px; }

.brand__name {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -.01em;
}

.brand__name em {
  font-style: normal;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.session { display: flex; align-items: center; gap: 14px; color: var(--text-4); }

.session a {
  color: var(--text-2);
  text-decoration: none;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: .8rem;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}

.session a:hover { color: var(--text); border-color: var(--line-strong); }

/* --- Contenedores --------------------------------------------------------- */

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); }

.band { padding: clamp(44px, 6.5vh, 78px) 0; }

/* Cabecera de sección: numeral + regla, en lugar del chip de la suite */
.band__head {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 30px;
  color: var(--text-4);
}

.band__head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}

.band__head b {
  color: var(--signal);
  font-weight: 600;
}

/* --- Hero ----------------------------------------------------------------- */

.hero { padding: clamp(40px, 8vh, 92px) 0 clamp(8px, 2vh, 20px); }

.hero__flag {
  display: inline-flex; align-items: center; gap: 9px;
  margin-bottom: 26px;
  padding: 6px 12px 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: linear-gradient(var(--surface), var(--surface)), var(--card);
  color: var(--text-3);
}

.hero__flag i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 3px rgba(52, 211, 153, .16);
}

.hero h1 {
  font-size: clamp(2.3rem, 6.4vw, 4.1rem);
  line-height: 1.02;
  max-width: 17ch;
}

/* Segunda línea con degradado, sin cursiva (la suite la pone en italica) */
.hero h1 span {
  display: block;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero p {
  margin: 26px 0 0;
  max-width: 56ch;
  font-size: clamp(1rem, 1.3vw, 1.09rem);
  color: var(--text-2);
  line-height: 1.65;
}

.hero p strong { color: var(--text); font-weight: 600; }

/* Tres datos duros bajo el hero, separados por reglas verticales */
.facts {
  display: flex; flex-wrap: wrap;
  gap: clamp(20px, 4vw, 52px);
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.facts div { min-width: 120px; }

.facts dt { color: var(--text-4); margin-bottom: 6px; }

.facts dd {
  margin: 0;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: -.02em;
}

/* --- Consola de la demo --------------------------------------------------- */

.console {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .015)),
    var(--card);
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
}

/* Barra tipo aparato, con tres puntos: le da cuerpo de dispositivo */
.console__bar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .02);
}

.console__dots { display: flex; gap: 6px; }

.console__dots i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--line-strong);
}

.console__title { margin-left: 6px; color: var(--text-4); }

.console__body {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
}

@media (max-width: 880px) {
  .console__body { grid-template-columns: minmax(0, 1fr); }
}

.console__form { padding: clamp(24px, 3.5vw, 38px); }

.console__side {
  padding: clamp(24px, 3.5vw, 38px);
  border-left: 1px solid var(--line);
  background:
    radial-gradient(420px 220px at 90% 0%, rgba(34, 211, 238, .07), transparent 70%),
    var(--card);
}

@media (max-width: 880px) {
  .console__side { border-left: 0; border-top: 1px solid var(--line); }
}

.console__form h2 {
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  margin-bottom: 12px;
}

.console__form > p {
  margin: 0 0 26px;
  color: var(--text-2);
  font-size: .95rem;
  line-height: 1.62;
}

/* --- Campos y botones ----------------------------------------------------- */

.field { display: block; margin-bottom: 20px; }

.field__label { display: block; margin-bottom: 9px; color: var(--text-4); }

.field__input {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #04080b;
  color: var(--text);
  font: inherit;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.field__input::placeholder { color: var(--text-4); }

.field__input:focus {
  outline: none;
  border-color: var(--signal);
  box-shadow: 0 0 0 3px rgba(52, 211, 153, .13);
}

.field--tel .field__input {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 1.05rem;
  letter-spacing: .05em;
}

.field__hint { margin: 9px 0 0; color: var(--text-4); font-size: .78rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%;
  padding: 13px 20px;
  border: 0;
  border-radius: var(--r);
  background: var(--grad);
  color: #04140f;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: filter .2s var(--ease), transform .2s var(--ease);
}

.btn:hover { filter: brightness(1.07); }

.btn:active { transform: translateY(1px); }

.btn[disabled] { opacity: .45; cursor: not-allowed; filter: none; }

.btn--ghost {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--text);
}

.btn--ghost:hover { background: var(--surface-2); filter: none; }

.btn__spin {
  width: 14px; height: 14px;
  border: 2px solid rgba(4, 20, 15, .3);
  border-top-color: #04140f;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* --- Avisos --------------------------------------------------------------- */

.alert {
  margin: 0 0 20px;
  padding: 11px 14px;
  border-left: 2px solid var(--line-strong);
  border-radius: 0 var(--r) var(--r) 0;
  background: var(--surface);
  font-size: .87rem;
  line-height: 1.5;
}

.alert--bad  { border-left-color: var(--red);    color: #fca5a5; background: rgba(248, 113, 113, .07); }
.alert--ok   { border-left-color: var(--signal); color: var(--signal); background: rgba(52, 211, 153, .07); }
.alert--wait { border-left-color: var(--cyan);   color: var(--cyan); background: rgba(34, 211, 238, .06); }

/* --- Estado de la llamada ------------------------------------------------- */

.state { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; }

.state__led {
  position: relative;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text-4);
  flex: none;
}

.state__led::after {
  content: "";
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0;
}

.state__text { color: var(--text-2); }

.is-live .state__led { background: var(--signal); color: var(--signal); }
.is-live .state__led::after { animation: ping 1.7s ease-out infinite; }
.is-live .state__text { color: var(--signal); }

.is-cold .state__led { background: var(--amber); color: var(--amber); }
.is-cold .state__text { color: var(--amber); }

@keyframes ping {
  0%   { opacity: .8; transform: scale(.5); }
  100% { opacity: 0;  transform: scale(2.1); }
}

/* Registro de eventos, como una cinta de teletipo */
.tape {
  margin: 0; padding: 0;
  list-style: none;
  display: grid; gap: 0;
  min-height: 150px;
  border-top: 1px solid var(--line);
}

.tape li {
  display: flex; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: .85rem;
  color: var(--text-3);
  opacity: 0;
  transform: translateX(-6px);
  animation: slide .4s var(--ease) forwards;
}

.tape time {
  flex: none;
  width: 62px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: .74rem;
  color: var(--text-4);
  padding-top: 1px;
}

@keyframes slide { to { opacity: 1; transform: none; } }

/* --- Flujo en tres pasos -------------------------------------------------- */

.flow { display: grid; gap: 0; }

.flow__item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: clamp(14px, 3vw, 34px);
  padding: 26px 0;
  border-top: 1px solid var(--line);
}

.flow__item:last-child { border-bottom: 1px solid var(--line); }

.flow__n {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -.03em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.flow__item h3 { font-size: 1.05rem; margin-bottom: 7px; }

.flow__item p {
  margin: 0;
  max-width: 62ch;
  color: var(--text-3);
  font-size: .92rem;
  line-height: 1.62;
}

/* --- Nota legal ----------------------------------------------------------- */

.note {
  padding: clamp(22px, 3vw, 32px);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: linear-gradient(var(--surface), var(--surface)), var(--card);
}

.note h2 { font-size: 1.12rem; margin-bottom: 9px; }

.note p { margin: 0; color: var(--text-3); font-size: .9rem; line-height: 1.62; max-width: 74ch; }

/* --- Pie ------------------------------------------------------------------ */

.foot {
  margin-top: 40px;
  padding: 30px var(--pad-x) 40px;
  border-top: 1px solid var(--line);
}

.foot__in {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: center; justify-content: space-between;
  color: var(--text-4);
  font-size: .82rem;
}

.foot__in a { color: var(--text-3); text-decoration: none; }

.foot__in a:hover { color: var(--text); }

/* --- Pantalla de acceso --------------------------------------------------- */

.gate {
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: 28px var(--pad-x);
}

.gate__box {
  width: 100%;
  max-width: 400px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)),
    var(--card);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .6);
  overflow: hidden;
}

/* Cinta de acento arriba: firma visual de AI Central */
.gate__box::before {
  content: "";
  display: block;
  height: 2px;
  background: var(--grad);
}

.gate__in { padding: clamp(26px, 5vw, 36px); }

.gate__glyph {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  margin-bottom: 22px;
  background: var(--grad);
  color: #04140f;
  clip-path: polygon(0 0, 100% 0, 100% 72%, 72% 100%, 0 100%);
}

.gate h1 { font-size: 1.4rem; margin-bottom: 7px; }

.gate__sub { margin: 0 0 24px; color: var(--text-3); font-size: .89rem; line-height: 1.55; }

.gate__foot { margin: 20px 0 0; color: var(--text-4); font-size: .76rem; line-height: 1.5; }

/* --- Aparición al hacer scroll -------------------------------------------- */

.rise {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}

.rise.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .state__led::after { animation: none !important; }
}

/* Solo para lectores de pantalla */
.sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- Chuleta de socios de prueba ----------------------------------------- */
/* En horizontal y bajo la consola: dentro del panel de estado la estiraba. */

.cheatbar {
  margin-top: 18px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(var(--surface), var(--surface)), var(--card);
}

.cheatbar__t { margin: 0 0 14px; color: var(--text-4); }

.cheatbar ul {
  margin: 0; padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px 24px;
}

.cheatbar li {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: baseline;
}

.cheatbar b {
  grid-row: 1 / 3;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--signal);
}

.cheatbar span { font-size: .9rem; color: var(--text-2); }

.cheatbar em {
  font-style: normal;
  font-size: .75rem;
  color: var(--text-4);
  margin-top: 2px;
}

/* El moroso en ambar: es el caso que acaba en una persona */
.cheatbar .is-warn b { color: var(--amber); }

.cheatbar__n {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: .76rem;
  line-height: 1.55;
  color: var(--text-4);
}

/* --- Registro en directo -------------------------------------------------- */
/* Discreto: plegado es solo una línea de texto pequeña bajo la consola. */

.logbox { margin-top: 14px; }

.logbox__t {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 2px;
  border: 0;
  background: none;
  color: var(--text-4);
  font: inherit;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s var(--ease);
}

.logbox__t:hover { color: var(--text-2); }

.logbox__t svg { transition: transform .25s var(--ease); }

.logbox__t[aria-expanded="true"] svg { transform: rotate(90deg); }

/* Punto que late cuando entran eventos nuevos y está plegado */
.logbox__t i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--signal);
  opacity: 0;
  transition: opacity .3s var(--ease);
}

.logbox__t i.is-on { opacity: 1; animation: ping 1.6s ease-out infinite; }

.logbox__b {
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #04080b;
  overflow: hidden;
}

.logbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--text-4);
}

.logbox__acc { display: flex; align-items: center; gap: 14px; }

.logbox__chk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  color: var(--text-4);
  cursor: pointer;
}

.logbox__chk input { accent-color: var(--signal); }

.logbox__x {
  border: 0;
  background: none;
  padding: 0;
  color: var(--text-4);
  font: inherit;
  font-family: ui-monospace, Menlo, monospace;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}

.logbox__x:hover { color: var(--text-2); }

.logbox__lines {
  margin: 0;
  padding: 10px 14px;
  list-style: none;
  max-height: 300px;
  overflow-y: auto;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .74rem;
  line-height: 1.6;
}

.logbox__lines li {
  display: flex;
  gap: 10px;
  padding: 1px 0;
  color: var(--text-3);
  white-space: pre-wrap;
  word-break: break-word;
}

.logbox__lines time { flex: none; color: var(--text-4); }

.logbox__lines b { flex: none; width: 52px; color: var(--text-4); font-weight: 500; }

/* Los turnos de la conversación destacan; el resto es contexto */
.logbox__lines .is-user  span { color: var(--cyan); }
.logbox__lines .is-agent span { color: var(--signal); }
.logbox__lines .is-tool  span { color: var(--amber); }
.logbox__lines .is-warn  span { color: var(--red); }

/* Mensaje de vacío por CSS, para que no cuente como una línea más */
.logbox__lines:empty::before {
  content: "Sin eventos todavía. Lanza una llamada.";
  color: var(--text-4);
}

/* ---------- conmutador de calidad de voz ---------- */
/* Dos botones, no un <select>: en una demo delante de un cliente el estado
   tiene que verse de un golpe, sin desplegar nada. */
/* OJO con el orden: un `display` de autor gana al display:none que el
   navegador aplica a [hidden], asi que con solo `display:block` el bloque se
   veia SIEMPRE — rotulo presente y rejilla vacia — en vez de ocultarse hasta
   que llegan los presets. El selector [hidden] tiene que ir despues. */
.calidad { display: block; margin-bottom: 1.1rem; }
.calidad[hidden] { display: none; }
.calidad__g {
  display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
  margin: .45rem 0 .3rem;
}
.calidad__b {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .6rem .7rem; cursor: pointer; text-align: left;
  font: inherit; font-weight: 600; font-size: .9rem;
  color: var(--tenue, #9fb4ad);
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .09); border-radius: 10px;
  transition: border-color .15s, background .15s, color .15s;
}
.calidad__b small {
  font-weight: 400; font-size: .72rem; opacity: .72;
  font-family: var(--mono, monospace);
}
.calidad__b:hover:not(.is-sel):not(:disabled) {
  border-color: rgba(255, 255, 255, .2); color: #e8f0ea;
}
.calidad__b.is-sel {
  color: #e8f0ea;
  border-color: var(--acc, #34d399);
  background: rgba(52, 211, 153, .11);
}
.calidad__b:disabled { cursor: default; opacity: .55; }

/* ==========================================================================
   Panel de pases de cliente (pases.php)
   ========================================================================== */

.pase-nuevo {
  margin-bottom: 28px;
  padding: 20px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--surface);
}

.pase-nuevo .field__input {
  font-family: ui-monospace, Menlo, monospace;
  font-size: .82rem;
}

.pase-acc { display: flex; gap: 10px; flex-wrap: wrap; }
.pase-acc .btn { flex: 1 1 180px; }

.pases { margin-top: 34px; }

.pases__t {
  margin: 0 0 14px;
  color: var(--text-4);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.pases__vacio { margin: 0; color: var(--text-3); font-size: .9rem; }

.pases__t2 {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}

.pases__t2 th {
  padding: 0 0 10px;
  text-align: left;
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-4);
  border-bottom: 1px solid var(--line);
}

.pases__t2 td {
  padding: 13px 14px 13px 0;
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
  vertical-align: middle;
}

.pases__t2 td:last-child { padding-right: 0; text-align: right; width: 1%; }

/* Puntito de estado, como el de la consola pero sin animacion: aqui hay una
   fila por pase y varios latidos a la vez marean. */
.pip {
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 9px;
  border-radius: 50%;
  vertical-align: middle;
}
.pip--on   { background: var(--signal); }
.pip--wait { background: var(--amber); }

.pases__x {
  padding: 4px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--text-4);
  font-size: 1rem;
  line-height: 1.2;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.pases__x:hover { color: var(--red); border-color: var(--red); }

@media (max-width: 620px) {
  .pases__t2 thead { display: none; }
  .pases__t2 tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }
  .pases__t2 td { border: 0; padding: 0; }
  .pases__t2 td:nth-child(3) { color: var(--text-4); font-size: .78rem; }
  .pases__t2 td:last-child { grid-row: 1 / span 3; align-self: center; }
}