/* ==========================================================================
   Prisma — sistema visual
   La página no tiene color de marca fijo: el acento es el gradiente que el
   bot está aplicando en ese momento (--vivo-a / --vivo-b, los pone el JS).
   Todo lo que "brilla" en la interfaz —el logo, el botón vivo, el halo del
   previsualizador— respira con ese mismo gradiente, para que el sitio se
   sienta hecho del mismo material que el producto.

   ORDEN DEL ARCHIVO (importa: con igual especificidad gana la última regla)
     1. Variables y base
     2. Componentes del sitio y del panel
     3. Vista previa de Discord, alta, modos, pastillas
     4. Responsive  ← siempre al final
     5. Movimiento reducido
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Archivo:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --papel: #EAEBF0;
  --panel: #FDFDFE;
  --panel-2: #F3F4F8;
  --panel-3: #E7E8EF;
  --tinta: #1B1D25;
  --tinta-suave: #656B7D;
  --linea: #D2D5DF;
  --linea-fuerte: #B7BBCA;
  --peligro: #B02A37;
  --ok: #1F7A4D;

  --vivo-a: #FF006E;
  --vivo-b: #3A86FF;
  --vivo-glow: color-mix(in srgb, var(--vivo-a) 35%, var(--vivo-b) 35%);

  --radio: 5px;
  --radio-chico: 3px;
  --radio-grande: 14px;

  --sombra-1: 0 1px 2px rgba(20, 21, 28, .05);
  --sombra-2: 0 1px 2px rgba(20, 21, 28, .05), 0 10px 28px -8px rgba(20, 21, 28, .14);
  --sombra-3: 0 2px 4px rgba(20, 21, 28, .06), 0 24px 48px -16px rgba(20, 21, 28, .22);
  --anillo: 0 0 0 3px color-mix(in srgb, var(--vivo-a) 22%, transparent);

  --display: 'Bricolage Grotesque', Georgia, serif;
  --texto: 'Archivo', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  --dur-vivo: 900ms;
  --entra: cubic-bezier(.16, 1, .3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --papel: #101119;
    --panel: #191B24;
    --panel-2: #21232E;
    --panel-3: #292C39;
    --tinta: #ECEDF3;
    --tinta-suave: #9AA0B2;
    --linea: #313543;
    --linea-fuerte: #3F4353;
    --peligro: #F08A94;
    --ok: #63D19A;
    --sombra-1: 0 1px 2px rgba(0, 0, 0, .35);
    --sombra-2: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -8px rgba(0, 0, 0, .5);
    --sombra-3: 0 2px 4px rgba(0, 0, 0, .5), 0 24px 56px -16px rgba(0, 0, 0, .65);
  }
}

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

html { -webkit-text-size-adjust: 100%; color-scheme: light dark; }

body {
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(1200px 640px at 12% -10%, color-mix(in srgb, var(--vivo-a) 7%, transparent), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, color-mix(in srgb, var(--vivo-b) 6%, transparent), transparent 55%),
    var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -.022em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 6.5vw, 4.6rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -.018em; }
h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }

p { margin: 0 0 1rem; max-width: 62ch; }

a { color: inherit; }

code, .hex { font-family: var(--mono); font-size: .8em; letter-spacing: -.01em; }

:focus-visible {
  outline: none;
  box-shadow: var(--anillo), 0 0 0 1.5px var(--tinta);
  border-radius: 3px;
}

::selection { background: color-mix(in srgb, var(--vivo-a) 30%, transparent); }

/* Scroll a medida: fino, del mismo material que las líneas del sitio. */
* { scrollbar-width: thin; scrollbar-color: var(--linea-fuerte) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--linea-fuerte);
  border-radius: 99px;
  border: 2px solid var(--papel);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--tinta-suave); }

.envoltura { width: min(1180px, 100% - 2.5rem); margin-inline: auto; }

svg.i { width: 1em; height: 1em; display: block; flex: none; }

/* --- barra superior ------------------------------------------------- */

.barra {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--linea);
}

.marca {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -.03em;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .6rem;
}

.marca-prisma {
  width: 22px; height: 22px;
  flex: none;
  overflow: visible;
}
.marca-prisma path.cuerpo {
  fill: url(#gradiente-vivo);
  stroke: color-mix(in srgb, var(--tinta) 30%, transparent);
  stroke-width: 1;
  transition: filter 260ms ease;
}
.marca-prisma path.haz {
  stroke: url(#gradiente-vivo);
  stroke-width: 1.4;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  opacity: 0;
  transition: stroke-dashoffset 560ms var(--entra), opacity 200ms ease;
}
.marca:hover .marca-prisma path.haz { stroke-dashoffset: 0; opacity: 1; }
.marca:hover .marca-prisma path.cuerpo { filter: brightness(1.08); }

.barra nav { margin-left: auto; display: flex; align-items: center; gap: 1.5rem; font-size: .92rem; }
.barra nav a:not(.btn) { text-decoration: none; color: var(--tinta-suave); transition: color 140ms ease; }
.barra nav a:not(.btn):hover { color: var(--tinta); }

/* --- botones --------------------------------------------------------- */

.btn {
  font: 600 .93rem/1 var(--texto);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .72rem 1.15rem;
  border: 1px solid var(--tinta);
  border-radius: var(--radio);
  background: var(--tinta);
  color: var(--panel);
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms var(--entra), opacity 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease;
}
.btn svg.i { width: 16px; height: 16px; }
.btn:hover { opacity: .9; box-shadow: var(--sombra-1); }
.btn:active { transform: translateY(1px) scale(.99); }

.btn.fantasma { background: transparent; color: var(--tinta); border-color: var(--linea); }
.btn.fantasma:hover { border-color: var(--tinta-suave); opacity: 1; background: var(--panel-2); }
.btn.peligro { background: transparent; color: var(--peligro); border-color: currentColor; }
.btn.peligro:hover { background: color-mix(in srgb, var(--peligro) 10%, transparent); }
.btn.chico { padding: .46rem .72rem; font-size: .82rem; }
.btn.chico svg.i { width: 14px; height: 14px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none !important; }

.btn-vivo {
  background: linear-gradient(105deg, var(--vivo-a), var(--vivo-b));
  border: none;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 14px 32px -12px color-mix(in srgb, var(--vivo-glow) 65%, transparent);
  transition: background var(--dur-vivo) ease, box-shadow var(--dur-vivo) ease, transform 160ms var(--entra);
}
.btn-vivo:hover { transform: translateY(-1px); }
/* El JS puede añadir esta clase cuando el gradiente actual es claro
   (por ejemplo si termina en #00F5D4) para que el texto siga leyéndose. */
.btn-vivo.sobre-claro {
  color: #14161C;
  text-shadow: none;
}

/* Botón circular solo-ícono, para acciones compactas en tarjetas. */
.btn-icono {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--linea);
  border-radius: 50%;
  background: var(--panel);
  color: var(--tinta-suave);
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease, transform 140ms var(--entra);
}
.btn-icono svg.i { width: 15px; height: 15px; }
.btn-icono:hover { color: var(--tinta); border-color: var(--tinta-suave); background: var(--panel-2); }
.btn-icono:active { transform: scale(.92); }
.btn-icono.peligro:hover { color: var(--peligro); border-color: var(--peligro); }

/* --- portada ---------------------------------------------------------- */

.portada {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 4rem;
  align-items: center;
  padding: clamp(3rem, 8vw, 6.5rem) 0;
  position: relative;
}

/* Antes: .entrada { max-width: 34ch } medía en la fuente del padre (16px,
   ~305px) y metía el h1 en una palabra por línea. El límite de lectura se
   queda solo en el párrafo. */
.portada .entrada { max-width: none; position: relative; z-index: 1; }
.portada h1 {
  font-size: clamp(2.6rem, 5.2vw, 4rem);
  margin-bottom: 1.4rem;
  animation: entra-arriba 720ms var(--entra) backwards;
}
.portada p.lede {
  font-size: 1.12rem;
  color: var(--tinta-suave);
  margin-bottom: 1.8rem;
  max-width: 44ch;
  animation: entra-arriba 720ms 90ms var(--entra) backwards;
}
.portada .entrada > .btn {
  animation: entra-arriba 720ms 160ms var(--entra) backwards;
}

@keyframes entra-arriba {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* Haz de luz decorativo detrás del previsualizador: el único momento de
   movimiento "porque sí" del sitio, y solo ocurre una vez al cargar. */
.haz-portada {
  position: absolute;
  inset: -8% -12% auto auto;
  width: 62%; aspect-ratio: 1;
  pointer-events: none;
  z-index: 0;
  opacity: .55;
  filter: blur(.5px);
}
.haz-portada .rayo {
  stroke-dasharray: 175;
  stroke-dashoffset: 175;
  animation: dibujar-rayo 620ms 200ms var(--entra) forwards;
}
.haz-portada .cara {
  opacity: 0;
  animation: aparecer 260ms 760ms ease forwards;
}
@keyframes aparecer { to { opacity: 1; } }
.haz-portada .banda {
  transform-origin: left center;
  transform: scaleX(0);
  animation: crecer-banda 700ms var(--entra) forwards;
}
.haz-portada .banda:nth-of-type(1) { animation-delay: 1150ms; }
.haz-portada .banda:nth-of-type(2) { animation-delay: 1210ms; }
.haz-portada .banda:nth-of-type(3) { animation-delay: 1270ms; }
.haz-portada .banda:nth-of-type(4) { animation-delay: 1330ms; }
.haz-portada .banda:nth-of-type(5) { animation-delay: 1390ms; }
@keyframes dibujar-rayo { to { stroke-dashoffset: 0; } }
@keyframes crecer-banda { to { transform: scaleX(1); } }

/* --- previsualizador real como maqueta de la portada -------------------- */

.cuenta { font-variant-numeric: tabular-nums; }

/* --- tira de muestras -------------------------------------------------- */

.tira {
  display: flex;
  height: 92px;
  border-block: 1px solid var(--linea);
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.tira span { flex: 1; transition: flex 320ms var(--entra); }
.tira span:hover { flex: 2.2; }

/* --- secciones de texto ------------------------------------------------ */

.columnas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  border-bottom: 1px solid var(--linea);
}
.columnas .marca-icono {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  color: var(--tinta);
  margin-bottom: 1rem;
  background: var(--panel);
}
.columnas .marca-icono svg.i { width: 17px; height: 17px; }
.columnas h3 { margin-bottom: .5rem; }
.columnas p { color: var(--tinta-suave); font-size: .95rem; margin: 0; }

/* --- vitrina de patrones (columna "Dale un ritmo") ----------------------- */
/* Cada patrón se ve en miniatura tal como se comporta de verdad, en vez de
   quedarse en una lista de nombres sueltos. */

.col-patrones p { margin-bottom: 0; }

.muestrario-patrones {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.patron-chip {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font: 600 .82rem/1 var(--texto);
  color: var(--tinta-suave);
  padding: .4rem .75rem .4rem .4rem;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: var(--panel);
  box-shadow: var(--sombra-1);
  transition: border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms var(--entra);
}
.patron-chip:hover { border-color: var(--tinta-suave); color: var(--tinta); transform: translateY(-1px); box-shadow: var(--sombra-2); }

.patron-disco {
  width: 24px; height: 24px;
  border-radius: 50%;
  flex: none;
  border: 1px solid rgba(0, 0, 0, .1);
}

/* Ciclo: recorre la rueda de color sin parar. */
.patron-ciclo .patron-disco {
  background: conic-gradient(from 0deg, #FF006E, #FB5607, #FFBE0B, #06FFA5, #3A86FF, #8338EC, #FF006E);
  animation: patron-girar 3.4s linear infinite;
}
@keyframes patron-girar { to { transform: rotate(360deg); } }

/* Rebote: va y viene entre dos colores, como una pelota. */
.patron-rebote .patron-disco {
  background: linear-gradient(90deg, #FF006E, #FFBE0B, #3A86FF, #FFBE0B, #FF006E);
  background-size: 320% 100%;
  animation: patron-rebotar 1.8s cubic-bezier(.5, 0, .5, 1) infinite;
}
@keyframes patron-rebotar {
  0% { background-position: 0% 0; }
  50% { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}

/* Aleatorio: salta de color sin patrón fijo. */
.patron-aleatorio .patron-disco { animation: patron-saltar 1.1s steps(1) infinite; }
@keyframes patron-saltar {
  0% { background: #FF006E; }
  20% { background: #8338EC; }
  40% { background: #FFBE0B; }
  60% { background: #06FFA5; }
  80% { background: #3A86FF; }
  100% { background: #FF006E; }
}

/* Arcoíris: una banda completa se desliza sin fin. */
.patron-arcoiris .patron-disco {
  background: linear-gradient(90deg, #FF006E, #FB5607, #FFBE0B, #06FFA5, #3A86FF, #8338EC, #FF006E);
  background-size: 300% 100%;
  animation: patron-deslizar 2.6s linear infinite;
}
@keyframes patron-deslizar { to { background-position: -300% 0; } }

/* Respiración: el color entra y sale de intensidad. */
.patron-respiracion .patron-disco {
  background: linear-gradient(135deg, #FF006E, #3A86FF);
  animation: patron-respirar 2.3s ease-in-out infinite;
}
@keyframes patron-respirar {
  0%, 100% { opacity: .3; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1); }
}

.pie {
  padding: 2.2rem 0 3rem;
  color: var(--tinta-suave);
  font-size: .85rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.pie .marca-prisma { width: 15px; height: 15px; opacity: .8; }

/* --- rejilla de servidores --------------------------------------------- */

.servidores {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
  gap: 1rem;
  padding: 2rem 0 4rem;
}

.tarjeta-servidor {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1rem;
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  text-decoration: none;
  box-shadow: var(--sombra-1);
  transition: border-color 160ms ease, box-shadow 220ms ease, transform 220ms var(--entra);
}
.tarjeta-servidor:hover { border-color: var(--linea-fuerte); box-shadow: var(--sombra-2); transform: translateY(-2px); }
.tarjeta-servidor .icono {
  width: 42px; height: 42px; border-radius: 12px; flex: none;
  background: var(--panel-2); object-fit: cover;
  display: grid; place-items: center;
  font-weight: 700; font-size: .95rem; color: var(--tinta-suave);
}
.tarjeta-servidor .meta { min-width: 0; flex: 1; }
.tarjeta-servidor .meta strong { display: block; font-size: .95rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarjeta-servidor .meta span { font-size: .8rem; color: var(--tinta-suave); display: inline-flex; align-items: center; gap: .35rem; }
.tarjeta-servidor .meta span svg.i { width: 12px; height: 12px; }
.tarjeta-servidor.sin-bot { border-style: dashed; }
.tarjeta-servidor .flecha { margin-left: auto; color: var(--tinta-suave); flex: none; transition: transform 200ms var(--entra); }
.tarjeta-servidor .flecha svg.i { width: 16px; height: 16px; }
.tarjeta-servidor:hover .flecha { transform: translateX(3px); color: var(--tinta); }

/* --- panel -------------------------------------------------------------- */

.panel-envoltura { display: grid; grid-template-columns: 252px 1fr; min-height: 100vh; }

.lateral {
  border-right: 1px solid var(--linea);
  padding: 1.4rem 1.2rem;
  background: var(--panel);
  position: sticky; top: 0; height: 100vh;
  overflow-y: auto;
}

.lateral .seccion { margin-top: 1.8rem; }
.lateral .titulo-seccion {
  font-size: .78rem; color: var(--tinta-suave);
  margin-bottom: .6rem; font-weight: 600;
}

.nav-panel { display: flex; flex-direction: column; gap: .15rem; }
.nav-panel button {
  display: flex; align-items: center; gap: .65rem;
  text-align: left;
  font: 500 .93rem/1.3 var(--texto);
  background: none; border: 0;
  color: var(--tinta-suave);
  padding: .55rem .65rem;
  border-radius: var(--radio);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.nav-panel button svg.i { width: 17px; height: 17px; flex: none; opacity: .8; }
.nav-panel button:hover { background: var(--panel-2); color: var(--tinta); }
.nav-panel button[aria-current='true'] {
  background: var(--panel-2); color: var(--tinta); font-weight: 600;
  box-shadow: inset 2px 0 0 0 var(--vivo-a);
}
.nav-panel button[aria-current='true'] svg.i { opacity: 1; }

.contenido { padding: 1.6rem clamp(1.2rem, 3vw, 2.6rem) 5rem; max-width: 1440px; width: 100%; margin-inline: auto; }

.cabecera-panel {
  display: flex; align-items: center; gap: 1rem;
  padding-bottom: 1.3rem; margin-bottom: 1.8rem;
  border-bottom: 1px solid var(--linea);
}
.cabecera-panel .icono { width: 46px; height: 46px; border-radius: 14px; background: var(--panel-2); object-fit: cover; box-shadow: var(--sombra-1); }
.cabecera-panel h2 { font-size: 1.5rem; }
.cabecera-panel .sub { font-size: .85rem; color: var(--tinta-suave); }
.cabecera-panel .usuario { margin-left: auto; display: flex; align-items: center; gap: .6rem; font-size: .88rem; }
.cabecera-panel .usuario img { width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px var(--linea); }

.vista[hidden] { display: none; }

/* Tarjeta de rol animado */
.tarea {
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  margin-bottom: .9rem;
  overflow: hidden;
  box-shadow: var(--sombra-1);
  transition: box-shadow 200ms ease;
}
.tarea:hover { box-shadow: var(--sombra-2); }
.tarea-cabecera {
  display: flex; align-items: center; gap: .9rem;
  padding: .95rem 1.1rem;
}
.muestra-par {
  width: 52px; height: 30px; flex: none;
  border-radius: var(--radio-chico);
  border: 1px solid var(--linea);
  box-shadow: var(--sombra-1);
  transition: background 800ms ease;
}
.tarea-cabecera .identidad { min-width: 0; flex: 1; }
.tarea-cabecera .identidad strong { font-size: .97rem; font-weight: 600; }
.tarea-cabecera .identidad .detalle { font-size: .8rem; color: var(--tinta-suave); }
.tarea-cabecera .acciones { display: flex; align-items: center; gap: .4rem; }

.estado { font-size: .78rem; display: inline-flex; align-items: center; gap: .35rem; }
.estado::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.estado.activo { color: var(--ok); }
.estado.activo::before { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
.estado.pausa { color: var(--tinta-suave); }
.estado.error { color: var(--peligro); }

.tarea-cuerpo {
  border-top: 1px solid var(--linea);
  padding: 1.1rem;
  background: var(--panel-2);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
  gap: 1rem;
  animation: desplegar 220ms var(--entra);
}
.tarea-cuerpo[hidden] { display: none; }
@keyframes desplegar { from { opacity: 0; } to { opacity: 1; } }

/* --- formularios --------------------------------------------------------- */

.campo { display: flex; flex-direction: column; gap: .35rem; }
.campo label { font-size: .82rem; font-weight: 600; }
.campo .ayuda { font-size: .76rem; color: var(--tinta-suave); }

input[type='text'], input[type='number'], select {
  font: 400 .9rem/1.4 var(--texto);
  padding: .58rem .68rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--panel);
  color: var(--tinta);
  width: 100%;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
input[type='text']:focus, input[type='number']:focus, select:focus {
  border-color: var(--tinta-suave);
  box-shadow: var(--anillo);
  outline: none;
}
input[type='range'] { width: 100%; accent-color: var(--vivo-a); }
input[type='color'] {
  width: 100%; height: 38px; padding: 2px;
  border: 1px solid var(--linea); border-radius: var(--radio);
  background: var(--panel); cursor: pointer;
}

.bloque {
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1.3rem;
  margin-bottom: 1.2rem;
  box-shadow: var(--sombra-1);
}
.bloque > h3 { margin-bottom: .3rem; display: flex; align-items: center; gap: .55rem; }
.bloque > h3 svg.i { width: 18px; height: 18px; color: var(--tinta-suave); }
.bloque > .ayuda { font-size: .85rem; color: var(--tinta-suave); margin-bottom: 1.1rem; }

.fila { display: flex; gap: .7rem; flex-wrap: wrap; align-items: flex-end; }
.fila > * { flex: 1 1 160px; }
.fila > .encoge { flex: 0 0 auto; }

/* --- paletas -------------------------------------------------------------- */

.rejilla-paletas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: .9rem; }

.paleta {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--panel);
  overflow: hidden;
  box-shadow: var(--sombra-1);
  transition: box-shadow 200ms ease, transform 200ms var(--entra);
}
.paleta:hover { box-shadow: var(--sombra-2); transform: translateY(-2px); }
.paleta .muestras { display: flex; height: 46px; }
.paleta .muestras span { flex: 1; }
.paleta .pie-paleta {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; padding: .6rem .75rem; font-size: .86rem;
}
.paleta .pie-paleta em { font-style: normal; color: var(--tinta-suave); font-size: .78rem; }

.editor-colores { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.chip-color { position: relative; width: 62px; }
.chip-color button.quitar {
  position: absolute; top: -6px; right: -6px;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--linea); background: var(--panel);
  color: var(--tinta-suave);
  cursor: pointer; display: grid; place-items: center;
  transition: color 140ms ease, border-color 140ms ease;
}
.chip-color button.quitar svg.i { width: 9px; height: 9px; }
.chip-color button.quitar:hover { color: var(--peligro); border-color: var(--peligro); }

/* --- previsualización ------------------------------------------------------ */

.previa { display: flex; gap: 3px; height: 54px; margin-top: .8rem; }
.previa span {
  flex: 1; border-radius: var(--radio-chico);
  border: 1px solid rgba(0, 0, 0, .08);
}

/* --- avisos ---------------------------------------------------------------- */

.aviso {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .85rem 1rem;
  border: 1px solid var(--linea);
  border-left: 3px solid var(--tinta-suave);
  border-radius: var(--radio);
  background: var(--panel);
  font-size: .88rem;
  margin-bottom: 1.2rem;
  box-shadow: var(--sombra-1);
}
.aviso svg.i { width: 18px; height: 18px; flex: none; margin-top: .1rem; color: var(--tinta-suave); }
.aviso.alerta { border-left-color: var(--peligro); }
.aviso.alerta svg.i { color: var(--peligro); }
.aviso p { margin: 0; }

.vacio {
  padding: 3rem 1.5rem;
  text-align: center;
  border: 1px dashed var(--linea);
  border-radius: var(--radio);
  color: var(--tinta-suave);
}
.vacio svg.i { width: 30px; height: 30px; color: var(--tinta-suave); margin: 0 auto .8rem; }
.vacio strong { display: block; color: var(--tinta); font-family: var(--display); font-size: 1.2rem; margin-bottom: .4rem; }

/* --- toast ------------------------------------------------------------------ */
/* Antes solo se desplazaba con translate: con bottom:1.5rem se seguían viendo
   ~17px de la píldora vacía. Ahora también queda oculto de verdad. */

#brindis {
  position: fixed; left: 50%; bottom: 1.5rem;
  transform: translate(-50%, 130%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: var(--tinta); color: var(--papel);
  padding: .7rem 1.1rem; border-radius: var(--radio);
  font-size: .9rem; box-shadow: var(--sombra-3);
  z-index: 50; max-width: min(460px, 90vw);
  transition: transform 260ms var(--entra),
              opacity 260ms ease,
              visibility 0s linear 260ms;
}
#brindis.visible {
  transform: translate(-50%, 0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
#brindis.malo { background: var(--peligro); color: #fff; }

/* ==========================================================================
   Vista previa de Discord
   Colores propios de Discord, no del sitio: aquí el objetivo es que se vea
   igual que en la app real, no que combine con el panel.
   ========================================================================== */

.previsor {
  --dc-fondo: #313338;
  --dc-lateral: #2B2D31;
  --dc-texto: #DBDEE1;
  --dc-tenue: #949BA4;
  --dc-linea: #3F4147;
  --dc-hover: #35373C;

  border: 1px solid var(--linea);
  border-radius: 10px;
  overflow: hidden;
  background: var(--dc-fondo);
  box-shadow: var(--sombra-3);
  position: relative;
  z-index: 1;
}

.previsor[data-tema='claro'] {
  --dc-fondo: #FFFFFF;
  --dc-lateral: #F2F3F5;
  --dc-texto: #313338;
  --dc-tenue: #5C5E66;
  --dc-linea: #E3E5E8;
  --dc-hover: #F7F8F9;
}

.previsor-barra {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  background: var(--panel-2);
  border-bottom: 1px solid var(--linea);
  font-size: .78rem;
  color: var(--tinta-suave);
}
.previsor-barra .crece { flex: 1; }

.previsor-barra button {
  display: inline-flex; align-items: center; gap: .35rem;
  font: 500 .76rem/1 var(--texto);
  background: var(--panel);
  color: var(--tinta-suave);
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: .33rem .6rem;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.previsor-barra button svg.i { width: 12px; height: 12px; }
.previsor-barra button[aria-pressed='true'] { background: var(--tinta); color: var(--panel); border-color: var(--tinta); }

.previsor-cuerpo {
  display: grid;
  grid-template-columns: 1fr 172px;
  min-height: 268px;
  font-family: 'Archivo', 'gg sans', system-ui, sans-serif;
  color: var(--dc-texto);
}

.dc-chat { padding: .85rem .9rem; display: flex; flex-direction: column; gap: .1rem; }

.dc-canal {
  font-size: .78rem;
  color: var(--dc-tenue);
  padding-bottom: .6rem;
  margin-bottom: .5rem;
  border-bottom: 1px solid var(--dc-linea);
}

.dc-mensaje { display: flex; gap: .6rem; padding: .3rem 0; border-radius: 4px; }
.dc-mensaje .av {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: var(--dc-linea);
}
.dc-mensaje .cuerpo { min-width: 0; }
.dc-mensaje .linea-autor { display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; }
.dc-mensaje .autor { font-weight: 600; font-size: .92rem; }
.dc-mensaje .hora { font-size: .68rem; color: var(--dc-tenue); }
.dc-mensaje .texto { font-size: .88rem; line-height: 1.4; color: var(--dc-texto); }

/* El nombre coloreado: degradado recortado sobre el texto, como en Discord */
.color-rol {
  background-image: linear-gradient(90deg, var(--rol-a), var(--rol-b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: background-image 700ms ease;
}
.color-rol.plano {
  background-image: none;
  color: var(--rol-a);
  transition: color 700ms ease;
}

/* Mención de rol */
.dc-mencion {
  display: inline-block;
  padding: 0 .25rem;
  border-radius: 3px;
  font-weight: 600;
  font-size: .86rem;
  background: color-mix(in srgb, var(--rol-a) 22%, transparent);
  transition: background 700ms ease;
}

.dc-insignia {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .68rem; font-weight: 600;
  padding: .08rem .35rem;
  border-radius: 3px;
  border: 1px solid var(--rol-a);
  transition: border-color 700ms ease;
}
.dc-insignia .punto {
  width: 7px; height: 7px; border-radius: 2px;
  background: linear-gradient(135deg, var(--rol-a), var(--rol-b));
  transition: background 700ms ease;
}

/* Lista de miembros */
.dc-miembros {
  background: var(--dc-lateral);
  padding: .8rem .7rem;
  border-left: 1px solid var(--dc-linea);
}
.dc-grupo {
  font-size: .68rem;
  color: var(--dc-tenue);
  font-weight: 600;
  margin: 0 0 .45rem .35rem;
}
.dc-miembro {
  display: flex; align-items: center; gap: .5rem;
  padding: .3rem .35rem;
  border-radius: 4px;
  font-size: .84rem;
  font-weight: 500;
  transition: background 120ms ease;
}
.dc-miembro:hover { background: var(--dc-hover); }
.dc-miembro .av { width: 22px; height: 22px; border-radius: 50%; flex: none; background: var(--dc-linea); }
.dc-miembro .av.viva { background: linear-gradient(135deg, var(--rol-a), var(--rol-b)); transition: background 700ms ease; }
.dc-miembro.tenue { color: var(--dc-tenue); }
.dc-grupo + .dc-miembro { margin-bottom: .1rem; }

.previsor-pie {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .75rem;
  background: var(--panel-2);
  border-top: 1px solid var(--linea);
  font-size: .76rem;
  color: var(--tinta-suave);
}
.previsor-pie .muestra-mini {
  width: 34px; height: 16px; border-radius: 2px;
  border: 1px solid var(--linea);
  transition: background 700ms ease;
}
.previsor-pie .crece { flex: 1; }
.previsor-pie .hex { color: var(--tinta); }

/* Barra de progreso hasta el siguiente cambio */
.pulso {
  height: 2px;
  background: var(--linea);
  overflow: hidden;
}
.pulso i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--rol-a), var(--rol-b));
  transform-origin: left;
  transform: scaleX(0);
}
.pulso i.corriendo { animation: llenar var(--dur, 3s) linear infinite; }
@keyframes llenar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* --- distribución del bloque de alta ------------------------------------ */

.alta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 1.4rem;
  align-items: start;
}

/* --- selector de modo ---------------------------------------------------- */

.modos { display: flex; gap: .5rem; flex-wrap: wrap; }
.modo {
  flex: 1 1 150px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: .6rem .7rem;
  background: var(--panel);
  cursor: pointer;
  text-align: left;
  font: 500 .86rem/1.3 var(--texto);
  color: var(--tinta);
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
.modo:hover { border-color: var(--tinta-suave); }
.modo[aria-pressed='true'] { border-color: var(--tinta); background: var(--panel-2); box-shadow: var(--sombra-1); }
.modo[disabled] { opacity: .5; cursor: not-allowed; }
.modo .mini { display: block; font-size: .74rem; color: var(--tinta-suave); font-weight: 400; margin-top: .15rem; }
.modo .barrita { display: block; height: 6px; border-radius: 2px; margin-bottom: .45rem; }

/* --- tiras de muestras más ricas ----------------------------------------- */

.previa span { position: relative; }
.previa.entrando span { animation: subir 420ms var(--entra) backwards; }
@keyframes subir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.etiqueta-modo {
  font-size: .68rem; font-weight: 600;
  padding: .1rem .35rem; border-radius: 3px;
  border: 1px solid var(--linea); color: var(--tinta-suave);
}

.acciones-paleta { display: flex; gap: .4rem; flex-wrap: wrap; }

/* --- guía del panel (dt/dd) ------------------------------------------------ */

.guia-lista { margin: 0; }
.guia-lista dt {
  font-weight: 700; font-size: .92rem;
  margin-top: 1.1rem; padding-top: 1.1rem;
  border-top: 1px solid var(--linea);
}
.guia-lista dt:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.guia-lista dd {
  margin: .3rem 0 0; color: var(--tinta-suave);
  font-size: .88rem; line-height: 1.6;
}
.guia-lista dd strong { color: var(--tinta); }
.guia-lista dd ul { margin: .5rem 0 0; padding-left: 1.1rem; }
.guia-lista dd li { margin-bottom: .4rem; }
.guia-lista dd li:last-child { margin-bottom: 0; }

.chip-color .hexin {
  font-family: var(--mono); font-size: .68rem;
  text-align: center; padding: .2rem; margin-top: .25rem;
  border: 1px solid var(--linea); border-radius: 2px;
  background: var(--panel); color: var(--tinta); width: 100%;
}

/* --- selector de paletas de la portada ------------------------------------ */

.selector-paletas { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .9rem; position: relative; z-index: 1; }

.pastilla {
  display: inline-flex; align-items: center; gap: .45rem;
  font: 500 .82rem/1 var(--texto);
  padding: .4rem .7rem .4rem .45rem;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: var(--panel);
  color: var(--tinta-suave);
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}
.pastilla:hover { border-color: var(--tinta-suave); color: var(--tinta); }
.pastilla[aria-pressed='true'] { border-color: var(--tinta); color: var(--tinta); box-shadow: var(--sombra-1); }
.pastilla:not([data-paleta]) { padding-left: .7rem; }

.muestritas { display: inline-flex; border-radius: 999px; overflow: hidden; }
.muestritas i { width: 9px; height: 15px; display: block; }

/* ==========================================================================
   RESPONSIVE — este bloque va al final a propósito.
   Todas las reglas base de arriba ya están declaradas, así que aquí ganan
   por orden (misma especificidad, última regla).
   Cortes: 1080 (el bloque de alta pasa a una columna), 900 (todo a una
   columna), 720 (la lista de miembros pasa debajo del chat), 560 (teléfono)
   y 380 (teléfonos muy estrechos).
   ========================================================================== */

@media (max-width: 1080px) {
  .alta { grid-template-columns: 1fr; }
  /* En una columna la previa va primero: es lo que se mira mientras se ajusta. */
  .alta > #previsor-alta { order: -1; }
}

@media (max-width: 900px) {
  .portada { grid-template-columns: 1fr; gap: 2.5rem; padding-block: 2.5rem 3.5rem; }
  .haz-portada { display: none; }
  .columnas { grid-template-columns: 1fr; gap: 1.8rem; }

  .panel-envoltura { grid-template-columns: 1fr; }

  .lateral {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--linea);
    padding: 1rem 1.2rem;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    overflow: visible;
  }
  .lateral .marca { flex: none; }
  .lateral .seccion { margin-top: 0; min-width: 0; }
  .lateral .titulo-seccion { display: none; }

  /* Las tres secciones del lateral se convierten en una sola tira que rueda. */
  .lateral .nav-panel {
    flex-direction: row;
    gap: .3rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .lateral .nav-panel::-webkit-scrollbar { display: none; }
  .lateral .nav-panel button { white-space: nowrap; flex: none; }

  /* Cambiar de servidor y simular nivel se esconden tras el menú del sistema:
     en móvil ocupan más de lo que aportan. */
  .lateral .seccion:nth-of-type(n + 2) { display: none; }

  .contenido { padding-top: 1.2rem; }
  .cabecera-panel { flex-wrap: wrap; gap: .8rem; }
  .cabecera-panel .usuario { margin-left: 0; width: 100%; }
}

@media (max-width: 720px) {
  /* La lista de miembros de Discord no cabe al lado del chat. */
  .previsor-cuerpo { grid-template-columns: 1fr; min-height: 0; }
  .dc-miembros {
    border-left: 0;
    border-top: 1px solid var(--dc-linea);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .2rem .5rem;
    padding: .6rem .7rem;
  }
  .dc-grupo { margin: 0 .3rem 0 0; }
  .dc-grupo + .dc-miembro { margin-bottom: 0; }
  .dc-miembro { padding: .2rem .3rem; }
}

@media (max-width: 560px) {
  .envoltura { width: min(1180px, 100% - 1.8rem); }

  body { font-size: 15px; }
  h1 { font-size: clamp(2.1rem, 9vw, 2.9rem); }
  .portada h1 { font-size: clamp(2.1rem, 9vw, 2.9rem); }
  p { max-width: none; }
  .portada p.lede { max-width: none; }

  .barra { flex-wrap: wrap; gap: .8rem; padding: .9rem 0; }
  .barra nav { width: 100%; margin-left: 0; gap: 1rem; font-size: .88rem; }
  .barra nav .btn { margin-left: auto; }

  .tira { height: 60px; }
  .tira span:hover { flex: 1; }  /* sin hover real en táctil */

  .previa { height: 40px; gap: 2px; }
  .selector-paletas { gap: .35rem; }

  /* Un control por línea: los de dos columnas quedaban demasiado estrechos. */
  .fila { gap: .8rem; }
  .fila > * { flex: 1 1 100%; }
  .fila > .encoge { flex: 1 1 100%; }
  .fila > .encoge .btn { width: 100%; justify-content: center; }
  .modos { flex-direction: column; }

  .bloque { padding: 1rem; }
  .contenido { padding-inline: 1rem; padding-bottom: 3.5rem; }

  /* Tarjeta de rol: los datos arriba, los botones en su propia línea. */
  .tarea-cabecera { flex-wrap: wrap; padding: .85rem .9rem; }
  .tarea-cabecera .identidad { flex: 1 1 100%; order: 2; }
  .tarea-cabecera .muestra-par { order: 1; width: 44px; height: 26px; }
  .tarea-cabecera .acciones { order: 3; flex: 1 1 100%; }
  .tarea-cabecera .acciones .btn { flex: 1 1 auto; justify-content: center; }
  .tarea-cuerpo { grid-template-columns: 1fr; }

  /* Área táctil: 44px es el mínimo cómodo con el pulgar. */
  .btn { padding: .8rem 1.1rem; }
  .btn.chico { padding: .6rem .75rem; }
  input[type='text'], input[type='number'], select { padding: .7rem .65rem; font-size: 16px; }
  .chip-color { width: 72px; }
  .chip-color button.quitar { width: 22px; height: 22px; font-size: 13px; }
  .nav-panel button { padding: .6rem .75rem; }

  .acciones-paleta { width: 100%; }
  .acciones-paleta .btn { flex: 1 1 calc(50% - .2rem); justify-content: center; }

  .previsor-barra { font-size: .74rem; }
  .dc-mensaje .av { width: 28px; height: 28px; }

  #brindis { left: .9rem; right: .9rem; bottom: .9rem; transform: translateY(130%); max-width: none; }
  #brindis.visible { transform: translateY(0); }

  .pie { gap: .5rem 1.2rem; }
}

@media (max-width: 380px) {
  .acciones-paleta .btn { flex: 1 1 100%; }
  .chip-color { width: 100%; }
  .editor-colores { grid-template-columns: repeat(2, 1fr); display: grid; }
}

/* ==========================================================================
   Movimiento reducido
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}