:root {
  --azul: #0a9bff;          /* el azul de la marca, para texto y acentos sobre el fondo */
  --azul-claro: #4fb8ff;
  /* El de marca con texto blanco encima da 2,94 de contraste y hace falta 4,5. Este es el
     mismo tono un par de pasos mas oscuro y da 4,66, asi que los rellenos con texto blanco
     usan este y la marca se queda intacta donde de verdad se ve: titulos, cifras y enlaces. */
  --azul-boton: #0077cc;
  --app-azul: #3b82f6;      /* el que usa la app por dentro, blue-500 */
  --app-azul-claro: #60a5fa;
  --app-azul-fuerte: #2563eb; /* blue-600: el mismo azul de la app, legible en un boton */
  --fondo: #0b0b0d;
  --panel: #141418;
  --borde: #ffffff14;
  --texto: #e9e9ee;
  --suave: #8e8e9a;
  --apagado: #84848f;
  --radio: 16px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* [hidden] tiene que ganar a los display de las reglas de abajo */
[hidden] { display: none !important; }

/* barras de desplazamiento como las del webview de la app, no las del sistema */
.tira-pista::-webkit-scrollbar { height: 8px; }
.tira-pista::-webkit-scrollbar-track { background: transparent; }
.tira-pista::-webkit-scrollbar-thumb { background: #ffffff1f; border-radius: 99px; }
.tira-pista::-webkit-scrollbar-thumb:hover { background: #ffffff33; }
.tira-pista { scrollbar-width: thin; scrollbar-color: #ffffff1f transparent; }

html { scroll-behavior: smooth; }
body {
  background: var(--fondo);
  color: var(--texto);
  font: 16px/1.6 ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.env { width: min(1120px, 100% - 40px); margin-inline: auto; }
.centrado { text-align: center; }
.centrado .entradilla { margin-inline: auto; }
a { color: var(--azul-claro); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; }

/* ---------- cabecera: una barra ovalada que flota sobre la página ---------- */
nav {
  position: sticky; top: 0; z-index: 50; padding: 14px 0 12px;
  background: linear-gradient(180deg, var(--fondo) 62%, transparent);
}
nav .env {
  /* 1fr a los lados para que el menú caiga en el centro exacto de la barra */
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 16px; height: 58px; padding: 0 8px 0 18px;
  border-radius: 999px; border: 1px solid #ffffff1a;
  background: #14141ccc; backdrop-filter: blur(18px);
  box-shadow: 0 14px 34px #00000059;
}
.marca { display: flex; align-items: center; gap: 10px; font-weight: 650; letter-spacing: -0.01em; }
.marca svg { width: 26px; height: 26px; }
.marca svg.chico { width: 20px; height: 20px; }
nav .enlaces {
  justify-self: center; display: flex; align-items: center; gap: 2px; font-size: 14px;
}
nav .enlaces a {
  color: var(--suave); padding: 9px 15px; border-radius: 999px;
  transition: background .14s, color .14s;
}
nav .enlaces a:hover { color: var(--texto); background: #ffffff14; text-decoration: none; }
nav .acciones { justify-self: end; display: flex; align-items: center; gap: 8px; }
.idioma {
  padding: 9px 18px; border-radius: 999px; border: 1px solid #ffffff1a;
  background: #ffffff0d; color: var(--texto); font-size: 13.5px; font-weight: 600;
  cursor: pointer; transition: background .14s, border-color .14s;
}
.idioma:hover { background: #ffffff1f; border-color: #ffffff33; }

/* Solo el logo, en un circulo del mismo alto y el mismo borde que el boton de idioma,
   para que la esquina derecha de la barra sea una pieza y no dos cosas distintas. */
/* 41.6 px es lo que mide el boton de idioma de al lado: 13.5 px de letra por el 1.6 de
   interlineado del body, mas 9 de relleno arriba y abajo, mas los dos bordes. Se le da
   ese tamano exacto para que los dos circulos de la esquina sean del mismo alto. */
.gh {
  display: grid; place-items: center; width: 41.6px; height: 41.6px;
  border-radius: 999px; border: 1px solid #ffffff1a; background: #ffffff0d;
  color: var(--texto); transition: background .14s, border-color .14s, color .14s;
}
.gh:hover { background: #ffffff1f; border-color: #ffffff33; }
.gh-marca { width: 22px; height: 22px; }
@media (max-width: 900px) {
  nav .env { grid-template-columns: 1fr auto; padding-right: 10px; }
  nav .enlaces { display: none; }
}

/* ---------- portada ---------- */
.portada { position: relative; padding: 86px 0 60px; text-align: center; }
.portada::before {
  content: ""; position: absolute; inset: -180px 0 auto; height: 520px; z-index: -1;
  background: radial-gradient(ellipse 60% 50% at 50% 40%, #0a9bff26, transparent 70%);
}
.marca.solo-logo svg { width: 30px; height: 30px; }
.firma { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 24px; }
.portada .logo { width: 62px; height: 62px; }
.firma .palabra { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; }

/* ---------- comparación cara a cara ---------- */
.duelo {
  margin-top: 26px; border: 1px solid var(--borde); border-radius: var(--radio);
  overflow-x: auto; background: var(--panel);
}
.duelo table {
  width: 100%; min-width: 660px; border-collapse: collapse; margin: 0; font-size: 14px;
  table-layout: fixed;
}
.duelo th, .duelo td { padding: 13px 18px; border-bottom: 1px solid var(--borde); text-align: left; }
.duelo tr:last-child th, .duelo tr:last-child td { border-bottom: 0; }
.duelo thead th {
  position: sticky; top: 0; z-index: 1; background: #191920;
  font-size: 14px; font-weight: 650; text-transform: none; letter-spacing: -0.01em; color: var(--texto);
  border-bottom: 1px solid #ffffff1f;
}
/* Los dos contendientes ocupan lo mismo: si una columna es mas ancha que la otra, la
   comparacion ya parece inclinada antes de leer ni un dato. */
.duelo thead th:first-child { width: 38%; }
.duelo thead th:not(:first-child) { width: 31%; }
/* Las dos columnas comparadas van centradas y con cifras de ancho fijo, para que los
   numeros queden en columna y se puedan comparar de un vistazo. */
.duelo td { text-align: center; font-variant-numeric: tabular-nums; }
.duelo thead th:not(:first-child) { text-align: center; }
.duelo .equipo { justify-content: center; }
/* Una linea separa a los dos, que es de lo que va la tabla. */
.duelo th:nth-child(2), .duelo td:nth-child(2) { border-left: 1px solid var(--borde); }
.duelo th:last-child, .duelo td:last-child { border-left: 1px solid var(--borde); }
/* Y la columna de winshotx, un poco de azul de fondo para que se siga sin perderse. */
.duelo thead th:last-child { background: #0a9bff1a; }
.duelo tbody td:last-child { background: #0a9bff08; }

.duelo tbody th {
  font-weight: 650; font-size: 13.5px; text-transform: none; letter-spacing: -0.01em;
  color: var(--texto);
}
.duelo tbody td { color: var(--apagado); white-space: nowrap; }
.duelo tbody td.gana { color: var(--texto); font-weight: 650; background: #34d99914; }
.duelo tbody td:last-child.gana { background: #34d9991f; }
.duelo tbody td.empate { color: var(--texto); }
.duelo tbody tr:hover td:not(.gana) { background: #ffffff08; }
.duelo tbody tr:hover td:last-child:not(.gana) { background: #0a9bff14; }
/* Los tres primeros son los numeros medidos: el argumento entero de la pagina esta ahi,
   asi que se leen mas grandes que el resto de la tabla. */
.duelo tbody tr.cifras td { font-size: 17px; padding-top: 15px; padding-bottom: 15px; }
.duelo tbody tr.cifras td.gana { font-weight: 700; letter-spacing: -0.01em; }
.equipo { display: inline-flex; align-items: center; gap: 9px; }
.equipo.nuestro { color: var(--azul); }
.mini-marca { width: 20px; height: 20px; }
/* los cuatro cuadraditos de Windows, sin traerse ninguna imagen */
.ventanita {
  width: 17px; height: 17px; flex: none;
  background:
    linear-gradient(#0078d4, #0078d4) 0 0 / 7.5px 7.5px no-repeat,
    linear-gradient(#0078d4, #0078d4) 9.5px 0 / 7.5px 7.5px no-repeat,
    linear-gradient(#0078d4, #0078d4) 0 9.5px / 7.5px 7.5px no-repeat,
    linear-gradient(#0078d4, #0078d4) 9.5px 9.5px / 7.5px 7.5px no-repeat;
}
.duelo b.si, .duelo b.no {
  display: inline-grid; place-items: center; width: 17px; height: 17px;
  border-radius: 5px; margin-right: 5px; vertical-align: -3px;
}
.duelo b.si { background: #34d99926; color: #6ee7b7; }
.duelo b.no { background: #ffffff12; color: #7c7c88; }
.duelo b svg { width: 11px; height: 11px; }
h1 { font-size: clamp(34px, 6vw, 60px); line-height: 1.06; letter-spacing: -0.035em; font-weight: 700; }
h1 em { font-style: normal; color: var(--azul); }
.bajada { margin: 20px auto 0; max-width: 62ch; font-size: clamp(16px, 2.2vw, 19px); color: var(--suave); }
.botones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 32px; }
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 24px; border-radius: 12px;
  font-weight: 600; font-size: 15px; border: 1px solid transparent;
  transition: background .16s, transform .16s;
}
.btn.primario { background: var(--azul-boton); color: #fff; box-shadow: 0 8px 30px #0a9bff40; }
/* En fondo oscuro lo natural seria aclarar al pasar por encima, pero eso tumba el
   contraste del texto blanco. Se oscurece y el movimiento lo marca la sombra. */
.btn.primario:hover {
  background: #0072c4; text-decoration: none; transform: translateY(-1px);
  box-shadow: 0 10px 34px #0a9bff59;
}
.btn.fantasma { border-color: var(--borde); color: var(--texto); background: #ffffff08; }
.btn.fantasma:hover { background: #ffffff12; text-decoration: none; }
.letra-chica { margin-top: 14px; font-size: 13px; color: var(--apagado); }
/* Mismo motivo que en el pie: el azul de marca sobre el gris de esta linea se queda en 1,22
   de contraste, muy por debajo del 3 que pide la norma para distinguir un enlace por color.
   Con subrayado se ve sin depender del color. */
.letra-chica a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.letra-chica a:hover { color: var(--texto); }

/* ---------- números: sin cajas, solo el dato y una línea que los separa ---------- */
.numeros { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 62px; }
.dato { display: grid; gap: 3px; padding: 4px 18px; border-left: 1px solid var(--borde); }
.dato:first-child { border-left: 0; }
.dato .valor {
  font-size: clamp(30px, 3.4vw, 40px); font-weight: 700; letter-spacing: -0.035em;
  line-height: 1.1; color: var(--azul); font-variant-numeric: tabular-nums;
}
.dato .que { font-size: 14px; color: var(--texto); }
.dato .contra { font-size: 12.5px; color: var(--apagado); }
@media (max-width: 760px) {
  .numeros { grid-template-columns: 1fr 1fr; row-gap: 26px; }
  .dato:nth-child(3) { border-left: 0; }
}
@media (max-width: 420px) {
  .numeros { grid-template-columns: 1fr; row-gap: 22px; }
  .dato { border-left: 0; padding-inline: 0; }
}

/* ---------- los tres pilares, debajo de los numeros ---------- */
/* Van dentro de la cabecera y no en una seccion aparte a proposito: quien llega tiene que
   ver de un vistazo que es rapida (los numeros) y para que sirve (esto), sin bajar. */
.pilares {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 54px;
  text-align: left;
}
.pilar {
  padding: 18px 18px 16px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--panel);
}
/* El icono al lado del titulo y no encima: la tarjeta es un rotulo con tres funciones
   debajo, y apilarlos le sumaba tres lineas de alto a cada una para no decir nada mas. */
.cabeza-pilar { display: flex; align-items: center; gap: 11px; }
.pilar h2 {
  font-size: 17px;
  letter-spacing: -0.01em;
  margin: 0;
  text-transform: uppercase;
}
.pilar ul {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
}
/* La marca de verificacion se dibuja con el borde de una caja girada: un carácter suelto
   cambia de forma con la fuente del sistema y aquí hay que verlo igual en todas partes. */
.pilar li {
  position: relative;
  padding-left: 22px;
  font-size: 13.5px;
  color: var(--texto);
  line-height: 1.45;
}
.pilar li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 4px;
  width: 5px;
  height: 9px;
  border: solid var(--azul);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.ico-pilar {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: #0a9bff1f;
  color: var(--azul);
}
.ico-pilar svg { width: 17px; height: 17px; }
@media (max-width: 900px) {
  .pilares { grid-template-columns: 1fr; gap: 14px; margin-top: 40px; }
}

/* ---------- secciones ---------- */
/* solo las secciones de la página; dentro de las demos hay <section> propias */
body > section { padding: 74px 0; }
h2 { font-size: clamp(26px, 4vw, 38px); line-height: 1.15; letter-spacing: -0.03em; margin: 0 0 12px; font-weight: 700; }
.entradilla { color: var(--suave); max-width: 65ch; }

/* ---------- marco de las demos ---------- */
.cabecera-demo {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin: 0 0 18px;
}
.cabecera-demo .entradilla { margin-bottom: 2px; }
@media (max-width: 860px) { .cabecera-demo { flex-direction: column; align-items: stretch; gap: 16px; } }
.pestanas {
  display: flex; gap: 4px; flex: none; padding: 4px; border-radius: 12px;
  background: #ffffff08; border: 1px solid var(--borde);
}
.pestana {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 9px;
  font-size: 13.5px; font-weight: 550; cursor: pointer; white-space: nowrap;
  background: transparent; border: 0; color: var(--suave);
  transition: background .14s, color .14s;
}
.pestana svg { width: 15px; height: 15px; opacity: .85; }
.pestana:hover { color: var(--texto); }
.pestana[aria-selected="true"] {
  background: var(--azul-boton); color: #fff; box-shadow: 0 4px 14px #0a9bff40;
}
.pestana[aria-selected="true"] svg { opacity: 1; }
@media (max-width: 520px) { .pestana { padding: 8px 10px; font-size: 12.5px; } }
.marco {
  position: relative; border: 1px solid var(--borde); border-radius: var(--radio);
  overflow: hidden; background: #161618; box-shadow: 0 30px 80px #0008;
}
.barra-falsa {
  display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 14px;
  background: #101014; border-bottom: 1px solid var(--borde);
  font-size: 12.5px; color: var(--suave);
}
.semaforo { display: flex; gap: 6px; }
.semaforo i { width: 10px; height: 10px; border-radius: 50%; background: #ffffff1f; display: block; }

/* ---------- 1. seleccion ---------- */
.lienzo-caja {
  position: relative; aspect-ratio: 16 / 10; background: #000;
  cursor: crosshair; user-select: none; touch-action: none;
}
.lienzo-caja > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.velo { position: absolute; inset: 0; background: #00000085; pointer-events: none; }
/* borde de 2px azul con el interior teñido, igual que SelectionCanvas */
.seleccion {
  position: absolute; display: none; pointer-events: none;
  border: 2px solid #3b82f6cc; background: #3b82f60d; border-radius: 2px;
}
.tiradores { position: absolute; inset: 0; pointer-events: none; display: none; }
.tiradores i {
  position: absolute; width: 12px; height: 12px; border-radius: 50%;
  border: 1.5px solid var(--app-azul); background: #fff;
  translate: -50% -50%; box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
.medida {
  position: absolute; display: none; padding: 3px 8px; border-radius: 6px;
  background: #0f0f14ee; border: 1px solid var(--borde);
  font: 600 11.5px/1 ui-monospace, monospace; color: #fff;
  pointer-events: none; white-space: nowrap;
}
.lupa { position: absolute; width: 116px; pointer-events: none; display: none; z-index: 4; }
.lupa canvas {
  width: 116px; height: 116px; border-radius: 10px; border: 1px solid #ffffff2e;
  image-rendering: pixelated; box-shadow: 0 10px 30px #000a; display: block;
}
.lupa .hex {
  margin-top: 5px; text-align: center; font: 600 11px/1.7 ui-monospace, monospace;
  background: #0f0f14ee; border: 1px solid var(--borde); border-radius: 6px; color: #fff;
}
/* GlassPanel + IconButton, con las medidas del componente */
.herramientas {
  position: absolute; display: none; align-items: center; gap: 2px; padding: 4px;
  border-radius: 16px; background: #171717e6; border: 1px solid #ffffff1a;
  backdrop-filter: blur(16px); box-shadow: 0 25px 50px -12px #000000bf; z-index: 5;
}
.herramientas button {
  display: flex; align-items: center; height: 36px; padding: 0 10px;
  border: 0; border-radius: 8px; background: transparent; color: #d4d4d4; cursor: pointer;
  transition: background .1s, color .1s;
}
.herramientas button:hover:not(:disabled) { background: #ffffff1a; color: #fff; }
.herramientas button:disabled { opacity: .4; pointer-events: none; }
.herramientas button.mata { color: #f87171; }
.herramientas button.mata:hover { background: #ef444426; color: #fca5a5; }
.herramientas svg { width: 18px; height: 18px; stroke-width: 1.9; }
.herramientas .raya, .edi-pildora .raya { width: 1px; height: 20px; background: #ffffff1a; margin: 0 2px; }
/* La barra de modos: qué sale del recorte y de qué pantalla, elegido ANTES de recortar.
   Va arriba y centrada, donde Windows pone la suya y donde la gente ya la busca. */
.modos {
  position: absolute; left: 50%; top: 18px; translate: -50% 0; z-index: 6;
  display: flex; align-items: center; gap: 4px; padding: 6px;
  border-radius: 16px; background: #171717e6; border: 1px solid #ffffff1a;
  backdrop-filter: blur(16px); box-shadow: 0 25px 50px -12px #000000bf;
  transition: opacity .15s;
}
.modos.apagada { opacity: .25; }
.modos button {
  display: flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border: 0; border-radius: 12px; background: transparent; color: #d4d4d4; cursor: pointer;
  transition: background .1s, color .1s;
}
.modos button:hover { background: #ffffff1a; color: #fff; }
.modos button.viva { background: #0a9bff; color: #fff; }
.modos button.viva:hover { background: #38aeff; }
.modos button.mata { color: #f87171; }
.modos button.mata:hover { background: #ef444426; color: #fca5a5; }
.modos svg { width: 19px; height: 19px; }
.modos .raya { width: 1px; height: 22px; background: #ffffff1a; margin: 0 3px; }

/* Elegir pantalla: el número es lo que hace que una pantalla se pueda nombrar. */
.elige-pantalla {
  position: absolute; inset: 0; z-index: 5; display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  pointer-events: none;
}
.elige-pantalla.viva { display: flex; }
.elige-pantalla::before {
  content: ""; position: absolute; inset: 3px; border-radius: 8px;
  border: 2px solid #0a9bffb3;
}
.numero-pantalla {
  display: flex; align-items: center; justify-content: center; width: 104px; height: 104px;
  border-radius: 24px; border: 2px solid #60b8ff80; background: #171717d9;
  font-size: 56px; font-weight: 600; color: #fff; line-height: 1;
  backdrop-filter: blur(10px); box-shadow: 0 25px 50px -12px #000000bf;
}
.cartel-pantalla {
  display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px;
  background: #171717e6; border: 1px solid #ffffff1a; font-size: 13px; color: #e5e5e5;
  backdrop-filter: blur(10px); box-shadow: 0 20px 25px -5px #00000080;
}
.cartel-pantalla kbd {
  padding: 2px 6px; border-radius: 5px; border: 1px solid #ffffff26; background: #ffffff1a;
  font: inherit; font-size: 11px;
}
.cartel-pantalla em { font-style: normal; color: #a3a3a3; }

/* El botón de grabar de la barra de selección: rojo, porque empieza algo que dura. */
.herramientas button.grabar {
  gap: 8px; background: #ef4444; color: #fff; font-weight: 600; font-size: 13px;
  padding: 0 14px;
}
.herramientas button.grabar:hover { background: #f87171; color: #fff; }
.aviso { display: none; align-items: center; gap: 8px; margin-top: 12px; font-size: 13.5px; color: #6ee7b7; }

/* ---------- 2. editor ---------- */
.edi-titulo {
  display: flex; align-items: center; justify-content: space-between;
  height: 44px; padding: 0 12px; border-bottom: 1px solid var(--borde);
}
.edi-nombre { display: flex; align-items: baseline; gap: 8px; padding-left: 4px; font-size: 13px; font-weight: 600; color: #fff; }
.edi-sub { font-size: 11px; font-weight: 400; color: #737373; font-variant-numeric: tabular-nums; }
.edi-controles { display: flex; align-items: center; gap: 4px; }
.edi-controles button {
  display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 6px;
  background: transparent; color: #a3a3a3; cursor: pointer; transition: background .12s, color .12s;
}
.edi-controles button:hover { background: #ffffff1a; color: #fff; }
.edi-controles button.cerrar:hover { background: #ef4444; color: #fff; }
.edi-controles svg { width: 16px; height: 16px; }

.edi-cuerpo { display: flex; min-height: 0; }
.edi-main { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.edi-vista {
  position: relative; display: grid; place-items: center; padding: 16px; min-height: 300px;
  background: repeating-conic-gradient(#1c1c1c 0% 25%, #242424 0% 50%) 0 0 / 20px 20px;
}
.edi-vista canvas {
  max-width: 100%; max-height: 340px; border-radius: 2px; display: block;
  box-shadow: 0 10px 40px #0009;
}
.edi-pildora {
  position: absolute; bottom: 12px; left: 50%; translate: -50% 0;
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 999px;
  border: 1px solid #ffffff1a; background: #171717d9; backdrop-filter: blur(12px);
  box-shadow: 0 20px 25px -5px #0009;
}
.edi-pildora .redondo {
  display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%;
  background: #ffffff1a; color: #fff; cursor: pointer; transition: background .12s;
}
.edi-pildora .redondo:hover { background: #ffffff33; }
.edi-pildora .redondo svg { width: 14px; height: 14px; }
.edi-tiempo { padding: 0 4px; font: 11px/1 ui-monospace, monospace; color: #d4d4d4; font-variant-numeric: tabular-nums; }
.edi-pildora .marca {
  display: flex; align-items: center; gap: 4px; padding: 2px 8px; border: 0; border-radius: 999px;
  background: transparent; color: #d4d4d4; font-size: 11px; cursor: pointer; transition: background .12s, color .12s;
}
.edi-pildora .marca:hover { background: #ffffff1a; color: #fff; }
.edi-pildora .marca svg { width: 12px; height: 12px; }
.edi-pildora .marca svg.espejo { transform: scaleX(-1); }

.edi-tira { flex: none; border-top: 1px solid var(--borde); background: #00000040; padding: 8px 12px 12px; }
.tira-cabecera {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px;
  font-size: 11px; color: #737373; font-variant-numeric: tabular-nums;
}
.tira-pista {
  position: relative; height: 52px; overflow-x: auto; overflow-y: hidden;
  border-radius: 8px; border: 1px solid var(--borde); background: #00000066;
}
.tira-lienzo { position: relative; height: 42px; }
.tira-lienzo img, .tira-lienzo canvas {
  position: absolute; top: 1px; width: 56px; height: 40px; object-fit: cover; opacity: .9; display: block;
}
.tira-apagado { position: absolute; top: 0; bottom: 0; background: #000000a6; }
.tira-marco { position: absolute; top: 0; bottom: 0; border-top: 2px solid #3b82f6b3; border-bottom: 2px solid #3b82f6b3; pointer-events: none; }
.tira-tirador {
  position: absolute; top: 0; bottom: 0; width: 10px; background: var(--app-azul);
  cursor: ew-resize; z-index: 10;
}
.tira-tirador.a { translate: -100% 0; border-radius: 6px 0 0 6px; }
.tira-tirador.b { border-radius: 0 6px 6px 0; }
.tira-tirador i { position: absolute; top: 50%; left: 50%; width: 1px; height: 16px; translate: -50% -50%; background: #ffffffb3; }
.tira-cabezal { position: absolute; top: 0; bottom: 0; width: 1px; background: #fff; box-shadow: 0 0 6px rgba(255,255,255,.8); pointer-events: none; }

.edi-panel {
  display: flex; width: 292px; flex: none; flex-direction: column; gap: 16px;
  border-left: 1px solid var(--borde); background: #00000033; padding: 16px;
}
@media (max-width: 860px) { .edi-cuerpo { flex-direction: column; } .edi-panel { width: auto; border-left: 0; border-top: 1px solid var(--borde); } }
.edi-rotulo { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600; color: #d4d4d4; }
.segmentado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 8px; background: #00000066; }
.segmentado button {
  padding: 6px 0; border: 0; border-radius: 6px; background: transparent;
  color: #a3a3a3; font-size: 12px; font-weight: 500; cursor: pointer; transition: background .12s, color .12s;
}
.segmentado button:hover { color: #fff; }
.segmentado button.viva { background: #ffffff26; color: #fff; }
.campo-cab { display: flex; justify-content: space-between; font-size: 12px; color: #d4d4d4; margin-bottom: 6px; }
.campo-cab span:last-child { color: #737373; font-variant-numeric: tabular-nums; }
.campo input[type="range"] { width: 100%; height: 4px; border-radius: 2px; background: #ffffff1a; appearance: none; cursor: pointer; }
.campo input[type="range"]::-webkit-slider-thumb {
  appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--app-azul);
  border: 2px solid #fff; cursor: grab;
}
.dimensiones { display: flex; align-items: flex-end; gap: 8px; }
.numero { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; font-size: 11px; color: #737373; }
.numero > span {
  display: flex; align-items: center; gap: 4px; padding: 5px 8px;
  border: 1px solid var(--borde); border-radius: 8px; background: #00000066;
}
.numero input {
  width: 100%; min-width: 0; border: 0; background: transparent; color: #e5e5e5;
  font: 500 12px/1 ui-sans-serif, system-ui, sans-serif; font-variant-numeric: tabular-nums; outline: none;
}
.numero i { font-style: normal; font-size: 10px; color: #737373; }
.candado {
  display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 6px; flex: none;
  border: 0; border-radius: 6px; background: #ffffff1a; color: var(--app-azul-claro); cursor: pointer;
}
.candado[data-on="0"] { background: transparent; color: #737373; }
.candado svg { width: 16px; height: 16px; }
.porcientos { display: flex; gap: 4px; margin-top: 6px; }
.porcientos button {
  padding: 4px 8px; border: 0; border-radius: 6px; background: #ffffff0d;
  color: #a3a3a3; font-size: 11px; cursor: pointer; transition: background .12s, color .12s;
}
.porcientos button:hover { background: #ffffff1a; color: #fff; }
.edi-separado { border-top: 1px solid var(--borde); padding-top: 12px; display: grid; gap: 2px; }
.fila-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; }
.fila-toggle .txt { font-size: 13px; color: #e5e5e5; }
.fila-toggle .txt small { display: block; font-size: 11px; color: #737373; }
.carpeta {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--borde); background: #0000004d; color: #a3a3a3;
  font-size: 11px; text-align: left; cursor: pointer; transition: border-color .12s;
}
.carpeta:hover { border-color: #ffffff33; }
.carpeta svg { width: 16px; height: 16px; flex: none; }
.carpeta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.edi-abajo { margin-top: auto; display: grid; gap: 8px; padding-top: 8px; }
.edi-estimado { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: #737373; }
.edi-estimado span { display: flex; align-items: center; gap: 6px; }
.edi-estimado .ambar { color: #fbbf24; }
.edi-acciones { display: flex; gap: 8px; }
.edi-acciones button {
  display: flex; align-items: center; justify-content: center; gap: 6px; height: 36px;
  border-radius: 8px; border: 1px solid transparent; cursor: pointer; font-size: 14px;
  transition: background .12s, color .12s;
}
.edi-acciones .azul { flex: 1; background: var(--app-azul-fuerte); color: #fff; font-weight: 600; }
.edi-acciones .azul:hover { background: #1d4ed8; }
.edi-acciones .hueco { padding: 0 12px; border-color: #ffffff1a; background: transparent; color: #d4d4d4; }
.edi-acciones .hueco:hover { background: #ffffff1a; color: #fff; }
.edi-acciones svg { width: 16px; height: 16px; }
.edi-resultado {
  display: flex; align-items: center; gap: 6px; width: 100%; padding: 8px 10px; border: 0;
  border-radius: 8px; background: #10b9811a; color: #6ee7b7; font-size: 11px; text-align: left; cursor: pointer;
}
.edi-resultado:hover { background: #10b98133; }

/* ---------- 3. ajustes: mismo grid de dos columnas y banda a lo ancho ---------- */
.ajustes {
  display: grid; grid-template-columns: 1fr 1fr; align-content: start; align-items: start;
  column-gap: 16px; row-gap: 12px; padding: 16px; background: #161618;
}
.ajustes .columna { display: grid; align-content: start; gap: 12px; min-width: 0; }
.ajustes .a-lo-ancho { grid-column: span 2; }
@media (max-width: 780px) {
  .ajustes { grid-template-columns: 1fr; }
  .ajustes .a-lo-ancho { grid-column: span 1; }
}
.tarjeta { border: 1px solid #ffffff14; border-radius: 12px; background: #ffffff08; overflow: hidden; }
/* El nombre del grupo va dentro de su tarjeta y en azul, que es como se ve en la app. */
.tarjeta h3 {
  margin: 0; padding: 12px 14px 11px; border-bottom: 1px solid #ffffff0f;
  font-size: 13px; font-weight: 600; color: var(--app-azul);
}
.fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; }
.fila + .fila { border-top: 1px solid #ffffff0f; }
.fila .txt { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 13px; color: #e5e5e5; }
.fila .txt small { display: block; font-size: 11px; color: #737373; }
.ico-fila { width: 16px; height: 16px; flex: none; color: #737373; }
.ico-fila.verde { color: #34d399; }
.fila.apilada { flex-direction: column; align-items: stretch; gap: 8px; }
.campo-atajo {
  display: flex; align-items: center; justify-content: flex-end; gap: 4px; flex: none;
  height: 32px; min-width: 132px; padding: 0 8px;
  border: 1px solid #ffffff1a; border-radius: 8px; background: #00000066;
}
.campo-atajo kbd, .llave kbd {
  font: 500 11px/1 ui-monospace, monospace; padding: 4px 6px; border-radius: 5px;
  background: #ffffff1a; border: 1px solid #ffffff1a; color: #e5e5e5;
}
.botoncitos { display: flex; gap: 4px; flex: none; }
.botoncitos button {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px;
  border: 1px solid #ffffff1a; border-radius: 6px; background: transparent;
  color: #d4d4d4; font-size: 11px; cursor: pointer; transition: background .12s, color .12s;
}
.botoncitos button:hover:not(:disabled) { background: #ffffff1a; color: #fff; }
.botoncitos button:disabled { opacity: .4; cursor: default; }
.botoncitos svg { width: 12px; height: 12px; }
.segmentado.fps { grid-template-columns: repeat(3, 1fr); }
.segmentado.dos { grid-template-columns: repeat(2, 1fr); }
.segmentado.cuatro { grid-template-columns: repeat(4, 1fr); }
/* La otra forma de instalarlo, para quien vive en la terminal. */
.por-terminal { margin: 10px 0 0; font-size: 12.5px; color: var(--apagado); }
.por-terminal code {
  padding: 3px 8px; border: 1px solid var(--borde); border-radius: 7px;
  background: #ffffff0a; color: var(--suave);
  font: 500 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* La barra de las seis marcas, entre la vista previa y la tira de fotogramas. */
.edi-marcas {
  display: flex; align-items: center; gap: 4px; padding: 6px 10px;
  border-top: 1px solid var(--borde); background: #131315;
}
.edi-marcas > button {
  display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 8px;
  background: transparent; color: #a3a3a3; cursor: pointer; transition: background .12s, color .12s;
}
.edi-marcas > button:hover { background: #ffffff14; color: #fff; }
.edi-marcas > button.viva { background: #ffffff1f; color: #fff; }
.edi-marcas svg { width: 16px; height: 16px; }
.edi-marcas .raya { width: 1px; height: 18px; margin: 0 4px; background: #ffffff1a; }
.colores { display: flex; gap: 6px; }
.color {
  width: 18px; height: 18px; padding: 0; border: 2px solid transparent; border-radius: 50%;
  background: var(--c); cursor: pointer;
}
.color.viva { border-color: #fff; }
.edi-nota { margin: 8px 0 0; font-size: 10.5px; line-height: 1.45; color: #737373; }
.campo-cab .apagado { color: #737373; }
/* La cabecera: version a la izquierda, pestannas en el centro y salir a la derecha. */
.cab-set {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 48px; padding: 0 14px; border-bottom: 1px solid var(--borde);
}
.ver-set { font-size: 11px; color: #737373; flex: 1; }
.pes-set { display: flex; gap: 2px; padding: 3px; border-radius: 9px; background: #ffffff0a; }
.pes-set button {
  border: 0; border-radius: 7px; padding: 5px 10px; background: transparent;
  color: #a3a3a3; font-size: 12px; cursor: pointer; transition: background .12s, color .12s;
}
.pes-set button:hover { color: #fff; }
.pes-set button.viva { background: #ffffff1f; color: #fff; }
.cab-set .salir {
  flex: 1; text-align: right; border: 0; background: transparent;
  color: #a3a3a3; font-size: 11px; cursor: pointer; transition: color .12s;
}
.cab-set .salir:hover { color: #fca5a5; }

/* La barra de abajo, siempre a la vista: lo que se toca a menudo. */
.barra-set {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border-top: 1px solid var(--borde); padding: 8px 12px; background: #131315;
}
.mini-seg { display: flex; gap: 2px; padding: 2px; border-radius: 8px; background: #ffffff0a; }
.mini-seg button {
  display: inline-flex; align-items: center; gap: 4px; border: 0; border-radius: 6px;
  padding: 4px 8px; background: transparent; color: #a3a3a3; font-size: 11px;
  cursor: pointer; transition: background .12s, color .12s;
}
.mini-seg button:hover { color: #fff; }
.mini-seg button.viva { background: #ffffff1f; color: #fff; }
.mini-seg svg { width: 14px; height: 14px; }
.mini-seg.tema button { padding: 4px 7px; }
.mini-etiqueta { font-size: 11px; color: #737373; }
.mini-boton {
  display: inline-flex; align-items: center; gap: 5px; border: 0; border-radius: 7px;
  padding: 5px 9px; background: transparent; color: #a3a3a3; font-size: 11px;
  cursor: pointer; transition: background .12s, color .12s;
}
.mini-boton:hover { background: #ffffff14; color: #fff; }
.mini-boton svg { width: 14px; height: 14px; }
/* Estando al dia no hay nada que contar: un tick verde y ya, que ademas es el boton. */
.al-dia { display: grid; place-items: center; width: 26px; height: 26px; margin-left: auto; border-radius: 8px; color: #34d399; }
.al-dia svg { width: 15px; height: 15px; }
.aviso-fila { color: #fbbf24 !important; }
/* el Switch de la app: 40 x 22 con la bolita de 18 */
.palanca {
  width: 40px; height: 22px; border-radius: 99px; background: #ffffff26; border: 0;
  position: relative; cursor: pointer; transition: background .15s; flex: none;
}
.palanca::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; transition: left .15s;
}
.palanca[data-on="1"] { background: var(--app-azul); }
.palanca[data-on="1"]::after { left: 20px; }
.palanca:disabled { opacity: .4; cursor: default; }

/* ---------- rejillas y tabla ---------- */
/* Doce tarjetas en tres columnas: cuatro filas exactas y ningun hueco.
   Estuvo con once mas una destacada a lo ancho, y la cuarta fila se quedaba con dos
   tarjetas y un agujero al lado, que es lo primero que se ve al llegar aqui.
   Cada fila toma el alto de su tarjeta mas larga (lo que hace la rejilla por su cuenta)
   y no se igualan TODAS entre si: forzar eso dejaba medio cuerpo de aire debajo de los
   textos cortos, que se ve peor que una fila mas baja que otra. */
.rejilla {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; margin-top: 30px;
}
.caja {
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 24px; transition: border-color .18s, transform .18s, background .18s, box-shadow .18s;
}
.caja:hover {
  border-color: #0a9bff5c; background: #17171c; transform: translateY(-3px);
  box-shadow: 0 16px 32px -20px #0006;
}
.caja .ico {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none;
  background: linear-gradient(155deg, #0a9bff3d, #0a9bff14); color: var(--azul);
  border: 1px solid #0a9bff26; margin-bottom: 16px;
}
.caja .ico svg { width: 22px; height: 22px; }
/* El icono se ilumina con su tarjeta: sin esto el hover mueve la caja entera y el icono
   se queda igual, que es lo que hace que un hover parezca a medio hacer. */
.caja:hover .ico { background: linear-gradient(155deg, #0a9bff5c, #0a9bff1f); border-color: #0a9bff45; }
.caja h3 { font-size: 16.5px; margin-bottom: 7px; letter-spacing: -0.015em; }
/* `pretty` evita que la ultima linea se quede con una palabra suelta, que con parrafos
   de tres o cuatro lineas pasa en casi todas y hace que la rejilla se vea sucia. */
.caja p { font-size: 14px; line-height: 1.62; color: var(--suave); text-wrap: pretty; }

/* Con dos columnas los pares siguen cuadrando (seis filas), y con una, cada tarjeta se
   mide sola: ahi igualar alturas solo dejaria huecos debajo del texto corto. */
@media (max-width: 1000px) {
  .rejilla { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .rejilla { grid-template-columns: 1fr; grid-auto-rows: auto; }
}

/* ---------- preguntas frecuentes ----------
   Animadas de verdad: `open` no se anima (aparece/desaparece de golpe), asi que el
   JS mantiene `data-abierta` puesta mientras dura la transicion y solo esa marca
   controla lo visual. Sin JS sigue funcionando como un <details> normal, sin
   animacion y sin exclusividad (ver @media (scripting: none) mas abajo). */
.faq-grid { display: grid; grid-template-columns: 280px 1fr; gap: 48px; align-items: start; }
.faq-lateral { position: sticky; top: 100px; }
.faq-marca { width: 40px; height: 40px; margin-bottom: 16px; }
.faq-etiqueta {
  color: var(--azul); font-size: 13px; font-weight: 650; letter-spacing: .02em; margin-bottom: 8px;
}
.faq-lateral h2 { font-size: 26px; margin-bottom: 10px; }
.faq-lateral .entradilla { font-size: 14px; margin-bottom: 20px; }

.faq { --faq-ms: 380ms; display: flex; flex-direction: column; gap: 10px; }
.faq details {
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 18px 22px; transition: border-color .18s, background .18s;
}
.faq details:hover { border-color: #0a9bff5c; }
.faq details[data-abierta], .faq details[open] { background: #17171c; border-color: #0a9bff3d; }
.faq summary {
  cursor: pointer; font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus-visible { outline: 2px solid var(--azul); outline-offset: 4px; border-radius: 4px; }
.faq summary h3 { font-size: inherit; font-weight: inherit; letter-spacing: inherit; margin: 0; }
.faq-chevron {
  width: 18px; height: 18px; color: var(--azul); flex: none;
  transition: transform var(--faq-ms) cubic-bezier(.4, 0, .2, 1);
}
.faq details[data-abierta] .faq-chevron { transform: rotate(180deg); }

/* El truco: la fila de la rejilla pasa de 0fr a 1fr. Un max-height a ojo se queda
   corto con respuestas largas o va a saltos; esto se ajusta solo al contenido. */
.faq-cajon {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows var(--faq-ms) ease-in-out, opacity calc(var(--faq-ms) * .75) ease-in-out,
    margin-top var(--faq-ms) ease-in-out;
}
.faq details[data-abierta] .faq-cajon { grid-template-rows: 1fr; opacity: 1; margin-top: 14px; }
.faq-cajon > p { overflow: hidden; font-size: 14px; color: var(--suave); max-width: 60ch; margin: 0; }
.faq details code { background: #ffffff14; padding: 2px 6px; border-radius: 6px; font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  .faq-cajon, .faq-chevron { transition-duration: 140ms; }
}
/* Sin JavaScript: <details> nativo, abre y cierra de golpe, sin exclusividad. */
@media (scripting: none) {
  .faq details[open] .faq-cajon { grid-template-rows: 1fr; opacity: 1; margin-top: 14px; }
  .faq details[open] .faq-chevron { transform: rotate(180deg); }
}

@media (max-width: 760px) {
  .faq-grid { grid-template-columns: 1fr; gap: 24px; }
  .faq-lateral { position: static; }
}

table { width: 100%; border-collapse: collapse; margin-top: 26px; font-size: 14.5px; }
th, td { padding: 12px 14px; border-bottom: 1px solid var(--borde); text-align: left; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #7c7c88; font-weight: 650; }
tbody tr:hover { background: #ffffff06; }
.llave-tabla kbd {
  font: 500 12px/1 ui-monospace, monospace; padding: 5px 7px; border-radius: 6px;
  background: #ffffff12; border: 1px solid #ffffff1a; color: #dcdce4; margin-right: 3px;
}

footer { border-top: 1px solid var(--borde); padding: 40px 0 60px; color: var(--apagado); font-size: 14px; }
footer .env { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }

/* Un enlace metido dentro de una frase no se puede distinguir solo por el color. Sobre el gris
   del pie, el azul de marca queda en 1,26 de contraste y la norma pide 3 o un subrayado, asi
   que aqui va subrayado desde el principio y no solo al pasar el raton. */
footer a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
footer a:hover { color: var(--texto); }

/* El unico enlace del pie que pide algo, asi que se separa de los otros: sin subrayado y
   con su icono, para que se lea como un boton pequenno y no como parte de la frase de al
   lado. En movil el pie se apila y este cae el ultimo, que es donde tiene que estar. */
footer a.cafe {
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  padding: 7px 12px; border: 1px solid var(--borde); border-radius: 999px;
  color: var(--suave); transition: border-color 0.15s ease, color 0.15s ease;
}
footer a.cafe:hover { border-color: var(--azul); color: var(--texto); }
footer a.cafe svg { width: 15px; height: 15px; }

/* ---------- la guia ---------- */
.guia { max-width: 780px; padding-top: 56px; padding-bottom: 40px; }
.guia h1 { font-size: clamp(32px, 5vw, 46px); letter-spacing: -0.025em; line-height: 1.08; }
.guia .entradilla { margin-top: 14px; font-size: 17px; color: var(--suave); max-width: 62ch; }
.guia section { padding: 0; margin-top: 54px; scroll-margin-top: 96px; }
.guia h2 {
  font-size: 26px; letter-spacing: -0.02em;
  padding-bottom: 12px; border-bottom: 1px solid var(--borde);
}
.guia h3 { margin-top: 28px; font-size: 17px; letter-spacing: -0.01em; }
.guia p { margin-top: 14px; color: var(--suave); line-height: 1.65; }
.guia h3 + p { margin-top: 8px; }
.guia ul { margin-top: 16px; padding-left: 0; list-style: none; display: grid; gap: 12px; }
.guia li {
  position: relative; padding-left: 20px; color: var(--suave); line-height: 1.6;
}
.guia li::before {
  content: ""; position: absolute; left: 3px; top: 10px;
  width: 6px; height: 6px; border-radius: 99px; background: var(--azul);
}
.guia b { color: var(--texto); font-weight: 650; }
.guia .botones { justify-content: flex-start; margin-top: 22px; }
.guia .nota {
  margin-top: 18px; padding: 14px 16px; border-radius: 12px;
  border: 1px solid #f0b42933; background: #f0b4290f; color: #e8cf9a; font-size: 14.5px;
}
.guia code {
  padding: 2px 6px; border-radius: 6px; background: #ffffff12;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .9em; color: var(--texto);
}

/* el indice: una fila de fichas que se parte sola en pantallas estrechas */
.indice { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 30px; }
.indice a {
  padding: 7px 13px; border-radius: 999px; border: 1px solid #ffffff1a;
  background: #ffffff08; color: var(--suave); font-size: 13.5px;
  transition: background .14s, color .14s;
}
.indice a:hover { background: #ffffff1a; color: var(--texto); text-decoration: none; }

.tabla-guia { width: 100%; margin-top: 18px; border-collapse: collapse; font-size: 14.5px; }
.tabla-guia th {
  text-align: left; padding: 10px 12px; font-size: 12px; font-weight: 650;
  text-transform: uppercase; letter-spacing: .06em; color: var(--apagado);
  border-bottom: 1px solid var(--borde);
}
.tabla-guia td { padding: 12px; color: var(--suave); border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla-guia tr:last-child td { border-bottom: 0; }
.tabla-guia td:first-child { color: var(--texto); white-space: nowrap; }

.guia kbd {
  display: inline-block; padding: 2px 7px; border-radius: 6px;
  border: 1px solid #ffffff26; border-bottom-width: 2px; background: #ffffff12;
  font-family: inherit; font-size: .85em; font-weight: 600; color: var(--texto);
}
nav .enlaces a.aqui { color: var(--texto); background: #ffffff14; }

@media (max-width: 720px) {
  .tabla-guia { display: block; overflow-x: auto; }
}

.tabla-guia th[scope="row"] {
  text-align: left; padding: 12px; font-size: inherit; font-weight: 600;
  text-transform: none; letter-spacing: normal; color: var(--texto);
  white-space: nowrap; vertical-align: top;
}

/* El segmentado que va al lado de su nombre y no debajo: cada boton ocupa lo que ocupa su
   texto, para que la fila entera quepa en una linea. Es lo que hace que la seccion de los
   ultimos segundos, con sus cinco filas, no obligue a bajar con la rueda. */
.segmentado.ajustado {
  /* Flex y no la rejilla de tres: «Qué pantalla» puede tener cuatro botones (ratón y tres
     monitores) y con tres columnas el cuarto se caía a una segunda fila. */
  display: flex;
  flex: 0 0 auto;
  margin-left: auto;
}
.segmentado.ajustado button {
  flex: 0 0 auto;
  padding-inline: 0.7rem;
}