/* ==========================================================================
   GOAT Clan Web — hoja de estilo principal
   Paleta militar derivada del emblema del clan (oliva, laton, plata).
   Cada frente (2a Guerra / Vietnam) aplica su acento con [data-frente].
   Mobile-first; breakpoints en 576 / 768 / 992 / 1200 px.
   ========================================================================== */

:root {
  /* --- Base comun, tomada del emblema --------------------------------- */
  --fondo:        #14170e;   /* oliva casi negro */
  --fondo-2:      #1c2113;   /* panel */
  --fondo-3:      #232a17;   /* oliva del emblema */
  --oliva:        #4a5320;
  --oliva-claro:  #6b7639;
  --laton:        #c9a227;   /* borde del emblema */
  --laton-claro:  #e0c05a;
  --plata:        #d9dbd2;   /* relieve de las letras */
  --sangre:       #8c2f22;   /* el ojo de la cabra */

  --texto:        #d9dbd2;
  --texto-suave:  #97a084;
  --borde:        rgba(217, 219, 210, .10);

  /* --- Acento del frente (lo redefine [data-frente]) ------------------- */
  --acento:       var(--laton);
  --acento-claro: var(--laton-claro);
  --acento-2:     var(--oliva-claro);
  --acento-rgb:   201, 162, 39;
  --borde-fuerte: rgba(201, 162, 39, .38);

  --fuente-titulo: 'Oswald', 'Arial Narrow', sans-serif;
  --fuente-texto:  'Montserrat', system-ui, -apple-system, sans-serif;
  --fuente-mono:   'Roboto Mono', 'Consolas', monospace;

  --ancho: 1180px;
  --radio: 3px;
  --transicion: 180ms ease;
}

/* Segunda Guerra: laton y oliva, como el emblema */
[data-frente="wwii"] {
  --acento:       #c9a227;
  --acento-claro: #e0c05a;
  --acento-2:     #6b7639;
  --acento-rgb:   201, 162, 39;
  --borde-fuerte: rgba(201, 162, 39, .38);
}

/* Vietnam: verde selva y ambar, sobre un fondo mas humedo */
[data-frente="vietnam"] {
  --fondo:        #101408;
  --fondo-2:      #18200f;
  --fondo-3:      #26301a;
  --acento:       #d98324;
  --acento-claro: #f0a44a;
  --acento-2:     #7d9e3f;
  --acento-rgb:   217, 131, 36;
  --borde-fuerte: rgba(217, 131, 36, .38);
  --texto-suave:  #93a37a;
}

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

/*
   El navegador aplica display:none al atributo `hidden` desde su propia hoja,
   asi que cualquier regla nuestra con display (grid, flex...) lo pisa y el
   elemento sigue a la vista. Vale para todo lo que se despliega a mano:
   listas de anotados, avisos de guardado, el boton de quitar un puesto.
*/
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente-texto);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Textura de fondo: rejilla tenue + degradado */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 15% -10%, rgba(74, 83, 32, .45), transparent 58%),
    radial-gradient(ellipse at 88% 8%, rgba(var(--acento-rgb), .10), transparent 46%),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(0, 0, 0, .10) 3px 4px),
    repeating-linear-gradient(90deg, transparent 0 3px, rgba(0, 0, 0, .06) 3px 4px);
}

h1, h2, h3, h4 {
  font-family: var(--fuente-titulo);
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.15;
  margin: 0 0 .5em;
  text-transform: uppercase;
}

p { margin: 0 0 1rem; }

a { color: var(--acento); text-decoration: none; transition: color var(--transicion); }
a:hover { color: var(--plata); }

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.mono { font-family: var(--fuente-mono); font-variant-numeric: tabular-nums; }

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

/* --------------------------------------------------------------- Cabecera */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(28, 33, 19, .90);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borde);
}

.cabecera__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem 1rem;
  min-height: 64px;
  padding-block: .5rem;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--fuente-titulo);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--plata);
}

.marca__logo {
  display: block;
  width: 40px; height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .55));
}

.marca__texto small {
  display: none;              /* el subtitulo no entra en telefonos */
  white-space: nowrap;
  font-family: var(--fuente-texto);
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .3em;
  color: var(--texto-suave);
  text-transform: uppercase;
}

/* Conmutador de frente: 2a Guerra / Vietnam */
.frentes {
  display: flex;
  order: 3;                   /* en telefonos baja a su propia fila */
  width: 100%;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  background: rgba(0, 0, 0, .25);
}

.frentes__opcion {
  flex: 1;
  text-align: center;
  padding: .45rem .8rem;
  font-family: var(--fuente-titulo);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-suave);
  transition: background var(--transicion), color var(--transicion);
}
.frentes__opcion + .frentes__opcion { border-left: 1px solid var(--borde); }
.frentes__opcion:hover { color: var(--plata); background: rgba(var(--acento-rgb), .12); }

.frentes__opcion--activo,
.frentes__opcion--activo:hover {
  background: var(--acento);
  color: var(--fondo);
  font-weight: 600;
}

/* ----------------------------------------------------------------- Botones */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .7rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--radio);
  font-family: var(--fuente-titulo);
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--transicion), box-shadow var(--transicion),
              background var(--transicion), color var(--transicion);
}

/* La cabecera es angosta en telefonos: el boton se acorta en vez de partirse */
.cabecera .boton { padding: .55rem .9rem; font-size: .82rem; }
.solo-ancho { display: none; }

.boton--discord {
  background: var(--acento);
  color: var(--plata);
  box-shadow: 0 0 0 rgba(233, 69, 96, 0);
}
.boton--discord:hover {
  color: var(--plata);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(var(--acento-rgb), .30);
}

.boton--acento {
  background: transparent;
  color: var(--acento);
  border-color: var(--borde-fuerte);
}
.boton--acento:hover {
  color: var(--fondo);
  background: var(--acento);
  box-shadow: 0 0 24px rgba(var(--acento-rgb), .35);
}

.boton--fantasma { background: transparent; color: var(--texto); border-color: var(--borde); }
.boton--fantasma:hover { color: var(--plata); border-color: var(--plata); }

.boton svg { width: 18px; height: 18px; fill: currentColor; }

/* -------------------------------------------------------------------- Hero */
.hero { position: relative; padding: 4rem 0 3rem; overflow: hidden; }

.hero::after {
  content: '';
  position: absolute;
  right: -12%; top: 50%;
  translate: 0 -50%;
  width: 520px; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(var(--acento-rgb), .12), transparent 62%);
  pointer-events: none;
}

.hero__etiqueta {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1.25rem;
  padding: .3rem .85rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: 100px;
  font-family: var(--fuente-mono);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--acento);
}
.hero__etiqueta::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--acento-2);
  box-shadow: 0 0 10px var(--acento-2);
}

.hero__titulo {
  font-size: clamp(2.6rem, 9vw, 5rem);
  font-weight: 700;
  letter-spacing: .02em;
  margin-bottom: 1rem;
}
.hero__titulo span { color: var(--acento); }

.hero__bajada {
  max-width: 56ch;
  font-size: 1.05rem;
  color: var(--texto-suave);
  margin-bottom: 2rem;
}

.hero__acciones { display: flex; flex-wrap: wrap; gap: .85rem; }

/* Emblema del clan en el hero (solo en escritorio, ver breakpoint 992) */
.hero__emblema { display: none; }
.hero__emblema img {
  width: 100%;
  max-width: 320px;
  filter: drop-shadow(0 14px 36px rgba(0, 0, 0, .7));
}

/* ------------------------------------------------------------ Estadisticas */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin: 3rem 0;
  background: var(--borde);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
}

.stat { padding: 1.5rem 1.25rem; background: var(--fondo-2); text-align: center; }

.stat__valor {
  display: block;
  font-family: var(--fuente-mono);
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  color: var(--plata);
}
.stat--laton   .stat__valor { color: var(--laton-claro);   text-shadow: 0 0 22px rgba(224, 192, 90, .30); }
.stat--acento  .stat__valor { color: var(--acento);  text-shadow: 0 0 22px rgba(var(--acento-rgb), .28); }
.stat--oliva .stat__valor { color: var(--acento-2); text-shadow: 0 0 22px rgba(125, 158, 63, .30); }

.stat__etiqueta {
  display: block;
  margin-top: .5rem;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

/* ---------------------------------------------------------------- Secciones */
.seccion { padding: 3.5rem 0; }
.seccion--alterna { background: rgba(28, 33, 19, .55); border-block: 1px solid var(--borde); }

.seccion__encabezado { margin-bottom: 2.5rem; }

.seccion__kicker {
  display: block;
  margin-bottom: .5rem;
  font-family: var(--fuente-mono);
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--acento);
}

.seccion__titulo { font-size: clamp(1.6rem, 4.5vw, 2.3rem); }

.seccion__titulo::after {
  content: '';
  display: block;
  width: 56px; height: 3px;
  margin-top: .85rem;
  background: linear-gradient(90deg, var(--acento), transparent);
}

.seccion__bajada { max-width: 62ch; color: var(--texto-suave); }

/* ------------------------------------------------------------------ Tarjetas */
.tarjetas { display: grid; gap: 1.25rem; }
.tarjetas--3 { grid-template-columns: 1fr; }

.tarjeta {
  position: relative;
  padding: 1.5rem;
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  transition: border-color var(--transicion), transform var(--transicion);
}
.tarjeta:hover { border-color: var(--borde-fuerte); transform: translateY(-3px); }

.tarjeta__titulo { font-size: 1.1rem; margin-bottom: .5rem; color: var(--plata); }
.tarjeta__texto { color: var(--texto-suave); font-size: .93rem; margin: 0; }

.tarjeta__icono {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  margin-bottom: 1rem;
  background: rgba(var(--acento-rgb), .10);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  color: var(--acento);
}
.tarjeta__icono svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; }

/* -------------------------------------------------------------------- Eventos */
.evento { display: flex; gap: 1.25rem; align-items: flex-start; }

.evento__fecha {
  flex: 0 0 auto;
  width: 62px;
  padding: .55rem 0;
  background: var(--fondo-3);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  text-align: center;
  font-family: var(--fuente-mono);
}
.evento__dia { display: block; font-size: 1.5rem; font-weight: 700; line-height: 1; color: var(--plata); }
.evento__mes { display: block; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--acento); }

.evento__cuerpo { min-width: 0; }
.evento__titulo { font-size: 1.05rem; margin-bottom: .35rem; color: var(--plata); }

.evento__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .9rem;
  font-family: var(--fuente-mono);
  font-size: .74rem;
  color: var(--texto-suave);
}

.etiqueta {
  display: inline-block;
  padding: .12rem .5rem;
  border-radius: 100px;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.etiqueta--competitivo   { background: rgba(140, 47, 34, .22); color: var(--acento); }
.etiqueta--amistoso      { background: rgba(var(--acento-rgb), .12); color: var(--acento); }
.etiqueta--entrenamiento { background: rgba(125, 158, 63, .16); color: var(--acento-2); }
.etiqueta--interno       { background: rgba(255, 215, 0, .12); color: var(--laton-claro); }

/* --------------------------------------------------------------------- Rangos */
.rangos { display: grid; gap: 1.5rem; }

.rango-grupo__titulo {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .9rem;
  font-size: .78rem;
  letter-spacing: .2em;
  color: var(--texto-suave);
}
.rango-grupo__titulo::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--borde), transparent);
}

.rango-lista { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }

.rango {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .8rem;
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  font-size: .82rem;
}
.rango__insignia { color: var(--laton-claro); font-size: .72rem; letter-spacing: -.05em; }
.rango__conteo { font-family: var(--fuente-mono); font-size: .72rem; color: var(--acento); }

/* --------------------------------------------------------------- Testimonios */
.testimonio { display: flex; flex-direction: column; gap: 1rem; }

.testimonio__texto {
  position: relative;
  margin: 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--acento);
  font-size: .95rem;
  font-style: italic;
  color: var(--texto);
}

.testimonio__autor {
  font-family: var(--fuente-mono);
  font-size: .76rem;
  letter-spacing: .08em;
  color: var(--texto-suave);
}
.testimonio__autor::before { content: '// '; color: var(--acento); }

/* ---------------------------------------------------------------- Llamada final */
.cta {
  position: relative;
  padding: 3rem 1.5rem;
  margin: 3rem 0;
  background: linear-gradient(135deg, var(--fondo-3), var(--fondo-2));
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  text-align: center;
  overflow: hidden;
}
.cta::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, transparent 0 12px, rgba(var(--acento-rgb), .05) 12px 13px);
  pointer-events: none;
}
.cta__titulo { font-size: clamp(1.5rem, 5vw, 2.2rem); }
.cta__texto { max-width: 52ch; margin-inline: auto; color: var(--texto-suave); }
.cta .boton { position: relative; }

/* ------------------------------------------------------------------- Aviso */
.aviso {
  padding: .7rem 1rem;
  margin-bottom: 1.5rem;
  border-left: 3px solid var(--laton-claro);
  background: rgba(201, 162, 39, .08);
  font-size: .85rem;
  color: var(--texto-suave);
}

/* -------------------------------------------------------------------- Pie */
.pie {
  padding: 2.5rem 0 1.75rem;
  border-top: 1px solid var(--borde);
  background: rgba(35, 42, 23, .45);
}

.pie__fila { display: flex; flex-direction: column; gap: 1.25rem; }

.pie__texto { font-size: .82rem; color: var(--texto-suave); margin: 0; }

.pie__enlaces { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.pie__enlaces a { font-size: .8rem; color: var(--texto-suave); }
.pie__enlaces a:hover { color: var(--acento); }

/* ------------------------------------------------------------ Pagina de error */
.error-pagina {
  display: grid;
  place-content: center;
  min-height: 100vh;
  padding: 2rem 1.25rem;
  text-align: center;
}
.error-pagina__codigo {
  font-family: var(--fuente-mono);
  font-size: clamp(4rem, 18vw, 8rem);
  font-weight: 700;
  line-height: 1;
  color: var(--acento);
  text-shadow: 0 0 40px rgba(var(--acento-rgb), .28);
}
.error-pagina__titulo { font-size: clamp(1.3rem, 5vw, 1.9rem); margin-top: 1rem; }
.error-pagina__texto { max-width: 46ch; margin-inline: auto; color: var(--texto-suave); }

/* ============================================================= Breakpoints */

@media (min-width: 576px) {
  .stats { grid-template-columns: repeat(3, 1fr); }
  .marca__texto small { display: block; }
  .frentes { order: 0; width: auto; }
  .frentes__opcion { flex: 0 0 auto; }
  .cabecera .boton { padding: .7rem 1.4rem; font-size: .9rem; }
  .solo-ancho { display: inline; }
  .solo-angosto { display: none; }
  .pie__fila { flex-direction: row; align-items: center; justify-content: space-between; }
}

@media (min-width: 768px) {
  body { font-size: 17px; }
  .hero { padding: 6rem 0 4rem; }
  .seccion { padding: 5rem 0; }
  .tarjetas--3 { grid-template-columns: repeat(2, 1fr); }
  .rangos { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}

@media (min-width: 992px) {
  .stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .tarjetas--3 { grid-template-columns: repeat(3, 1fr); }

  /* Hero a dos columnas: texto a la izquierda, emblema a la derecha */
  .hero__fila { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 3rem; align-items: center; }
  .hero__emblema { display: block; justify-self: end; }
  .hero__titulo { max-width: 14ch; }
}

@media (min-width: 1200px) {
  .hero { padding: 7rem 0 5rem; }
}

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

/* Epigrafe del cierre: recuerda en que frente esta el visitante */
.cta__epigrafe {
  margin-bottom: 1rem;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--acento);
}

/* ==========================================================================
   Panel de administración
   ========================================================================== */

.admin__cuerpo { padding-block: 2rem 4rem; }

.admin__encabezado {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.admin__encabezado .seccion__titulo { margin-bottom: 0; }
.admin__encabezado .seccion__titulo::after { display: none; }

.usuario-actual { font-size: .72rem; color: var(--texto-suave); }

/* Sesión en la cabecera: nombre o "Ir al portal", y al lado "Cerrar sesión" */
.cabecera__sesion { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
.cabecera__salir { margin: 0; }

/* --- Paneles y formularios --- */
.panel {
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.panel--oculto { display: none; }
.panel--oculto.abierto { display: block; }
.panel__titulo { font-size: 1rem; margin-bottom: 1rem; }
.panel__acciones { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }

.campos { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.campo { display: flex; flex-direction: column; gap: .3rem; }
.campo > span {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.campo input, .campo select, .campo textarea, .filtros select {
  padding: .5rem .7rem;
  background: var(--fondo);
  color: var(--texto);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  font-family: var(--fuente-texto);
  font-size: .9rem;
}
.campo input:focus, .campo select:focus, .campo textarea:focus, .filtros select:focus {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
}
.campo textarea { resize: vertical; min-height: 70px; }

.filtros { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.25rem; }

/* --- Tabla --- */
.tabla-envoltorio { overflow-x: auto; margin-bottom: 2rem; }

.tabla { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabla th {
  padding: .6rem .75rem;
  text-align: left;
  font-family: var(--fuente-titulo);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texto-suave);
  border-bottom: 1px solid var(--borde);
  white-space: nowrap;
}
.tabla td { padding: .7rem .75rem; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla tr:hover td { background: rgba(var(--acento-rgb), .05); }
.tabla .acciones { display: flex; gap: .35rem; white-space: nowrap; }

.tenue { color: var(--texto-suave); font-size: .85rem; }
.vacio { padding: 2rem; text-align: center; color: var(--texto-suave); border: 1px dashed var(--borde); border-radius: var(--radio); }

.boton--chico { padding: .3rem .7rem; font-size: .72rem; }
.boton--peligro { background: transparent; color: var(--sangre); border-color: rgba(140, 47, 34, .5); }
.boton--peligro:hover { background: var(--sangre); color: var(--plata); }

.estado {
  display: inline-block;
  padding: .12rem .55rem;
  border-radius: 100px;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.estado--borrador  { background: rgba(151, 160, 132, .16); color: var(--texto-suave); }
.estado--publicada { background: rgba(var(--acento-rgb), .16); color: var(--acento); }
.estado--jugada    { background: rgba(125, 158, 63, .18); color: var(--acento-2); }

.divisiones { display: grid; gap: .4rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); list-style: none; margin: 1rem 0 0; padding: 0; }
.divisiones li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .4rem .7rem;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  font-size: .82rem;
}

/* --- Editor de patrulla --------------------------------------------------- */

.volver { display: inline-block; margin-bottom: .4rem; font-size: .78rem; color: var(--texto-suave); }
.volver:hover { color: var(--acento); }

.guardado {
  align-self: center;
  font-family: var(--fuente-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--acento-2);
}

.editor { display: grid; gap: 1.25rem; align-items: start; }

/* --- Roster --- */
.roster {
  position: sticky;
  top: 76px;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1rem;
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.roster__titulo { font-size: .82rem; letter-spacing: .16em; margin: 0; color: var(--texto-suave); }
.roster__buscar, .roster__division {
  padding: .45rem .6rem;
  background: var(--fondo);
  color: var(--texto);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  font-family: var(--fuente-texto);
  font-size: .85rem;
}
.roster__lista {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  max-height: 46vh;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}
.roster__ayuda { font-size: .74rem; margin: 0; }

.soldado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .4rem .6rem;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  font-size: .82rem;
  cursor: grab;
  transition: border-color var(--transicion), background var(--transicion);
}
.soldado:hover { border-color: var(--borde-fuerte); }
.soldado:active { cursor: grabbing; }
.soldado--asignado { opacity: .45; }
.soldado--oculto { display: none; }
.soldado__nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soldado__divs { font-size: .6rem; letter-spacing: .06em; color: var(--acento); flex: 0 0 auto; }

/* --- Tablero --- */
.tablero { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); align-items: start; }

.bloque {
  padding: .8rem;
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--oliva-claro);
  border-radius: var(--radio);
}
.bloque--oro      { border-left-color: var(--laton); }
.bloque--ataque   { border-left-color: var(--sangre); }
.bloque--defensa  { border-left-color: var(--acento-2); }
.bloque--blindada { border-left-color: #8a6a3b; }
.bloque--recon    { border-left-color: #6f8f6a; }
.bloque--aire     { border-left-color: var(--acento); }
.bloque--nodo     { border-left-color: #7a7f5c; }
.bloque--neutro   { border-left-color: var(--borde); }

.bloque__titulo {
  margin: 0 0 .6rem;
  font-size: .74rem;
  letter-spacing: .14em;
  color: var(--texto-suave);
}
.bloque__puestos { display: flex; flex-direction: column; gap: .3rem; margin: 0; padding: 0; list-style: none; }

.puesto {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto;
  align-items: center;
  gap: .4rem;
  min-height: 34px;
  padding: .3rem .5rem;
  background: var(--fondo);
  border: 1px dashed var(--borde);
  border-radius: var(--radio);
  font-size: .8rem;
  cursor: pointer;
  transition: border-color var(--transicion), background var(--transicion);
}
.puesto:hover { border-color: var(--borde-fuerte); }
.puesto--ocupado { border-style: solid; background: rgba(var(--acento-rgb), .07); }
.puesto--destino { border-color: var(--acento); background: rgba(var(--acento-rgb), .16); }
.puesto--sugerido { border-color: rgba(125, 158, 63, .55); }

.puesto__etiqueta {
  font-family: var(--fuente-mono);
  font-size: .62rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.puesto__jugador { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--plata); }
.puesto--ocupado .puesto__jugador { font-weight: 500; }

.puesto__quitar {
  padding: 0 .3rem;
  background: none;
  border: 0;
  color: var(--texto-suave);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.puesto__quitar:hover { color: var(--sangre); }

/* --- Squad Leader del escuadrón ------------------------------------------
   Solo los puestos de infantería llevan la estrella, así que se les da su
   propia grilla: si la columna existiera en todos, MG, tanques y nodos
   arrastrarían una sangría vacía a la izquierda.
   ------------------------------------------------------------------------- */

.puesto--escuadron { grid-template-columns: auto 4.4rem 1fr auto; }

.puesto__lider {
  padding: 0 .1rem;
  background: none;
  border: 0;
  color: var(--borde);
  font-size: .95rem;
  line-height: 1;
  cursor: pointer;
  transition: color var(--transicion), transform var(--transicion);
}

/* Apagada casi no se ve, para no llenar el tablero de estrellas: aparece al
   pasar por encima del puesto, que es cuando se la va a usar. */
.puesto:hover .puesto__lider { color: var(--texto-suave); }
.puesto__lider:hover { color: var(--laton-claro); transform: scale(1.2); }

.puesto__lider[aria-pressed="true"] {
  color: var(--laton);
  text-shadow: 0 0 10px rgba(201, 162, 39, .5);
}

.puesto--lider {
  border-color: rgba(201, 162, 39, .45);
  border-left: 2px solid var(--laton);
}

.puesto--lider .puesto__etiqueta { color: var(--laton); font-weight: 700; }


@media (min-width: 992px) {
  .editor { grid-template-columns: 260px minmax(0, 1fr); }
}

/* --- Bandeja de partidas --- */
.enlace-tenue {
  display: block;
  margin-top: .15rem;
  padding: 0;
  background: none;
  border: 0;
  color: var(--texto-suave);
  font-family: var(--fuente-texto);
  font-size: .72rem;
  text-decoration: underline;
  cursor: pointer;
}
.enlace-tenue:hover { color: var(--acento); }

.cuenta {
  display: inline-block;
  min-width: 1.6rem;
  padding: .1rem .35rem;
  border-radius: var(--radio);
  text-align: center;
  font-size: .74rem;
}
.cuenta--si  { background: rgba(125, 158, 63, .2); color: var(--acento-2); }
.cuenta--tal { background: rgba(var(--acento-rgb), .16); color: var(--acento); }
.cuenta--no  { background: rgba(140, 47, 34, .2); color: #c76a5b; }

.fila-inscritos td { background: rgba(0, 0, 0, .2); }
.inscritos { display: flex; flex-wrap: wrap; gap: .35rem; padding: .3rem 0; }

.inscrito {
  padding: .2rem .55rem;
  border: 1px solid var(--borde);
  border-left-width: 3px;
  border-radius: var(--radio);
  font-size: .78rem;
}
.inscrito em { font-family: var(--fuente-mono); font-size: .6rem; font-style: normal; color: var(--texto-suave); }
.inscrito--si  { border-left-color: var(--acento-2); }
.inscrito--tal { border-left-color: var(--acento); }
.inscrito--no  { border-left-color: var(--sangre); opacity: .6; }

/* --- Secciones del tablero de alistamiento --- */
.seccion-unidades { margin-bottom: 1.5rem; }

.seccion-unidades__titulo {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  margin: 0 0 .7rem;
  padding-bottom: .35rem;
  font-size: .8rem;
  letter-spacing: .18em;
  border-bottom: 1px solid var(--borde);
}
.seccion-unidades__cuenta { font-family: var(--fuente-mono); font-size: .7rem; color: var(--texto-suave); }
/* order: 1 lo manda después de la raya que dibuja el ::after del título */
.seccion-unidades__accion { order: 1; align-self: center; }

/* Título del bloque con la × para quitar el último escuadrón de asalto */
.bloque__titulo { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.bloque__quitar {
  padding: 0 .2rem;
  background: none;
  border: 0;
  color: var(--texto-suave);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.bloque__quitar:hover { color: var(--sangre); }

/* Sumar o sacar soldados de un escuadrón */
.bloque__pie { display: flex; gap: .4rem; margin-top: .5rem; }
.bloque__boton {
  flex: 1;
  padding: .25rem .4rem;
  background: none;
  border: 1px dashed var(--borde);
  color: var(--texto-suave);
  font-size: .72rem;
  cursor: pointer;
}
.bloque__boton:hover:not(:disabled) { color: var(--laton-claro); border-color: var(--laton); }
.bloque__boton:disabled { opacity: .35; cursor: default; }
.seccion-unidades__titulo::after { content: ''; flex: 1; }

.seccion-unidades--oro      .seccion-unidades__titulo { color: var(--laton); border-bottom-color: rgba(201, 162, 39, .3); }
.seccion-unidades--ataque   .seccion-unidades__titulo { color: #c76a5b; border-bottom-color: rgba(140, 47, 34, .35); }
.seccion-unidades--defensa  .seccion-unidades__titulo { color: var(--acento-2); border-bottom-color: rgba(125, 158, 63, .3); }
.seccion-unidades--blindada .seccion-unidades__titulo { color: #b98f52; border-bottom-color: rgba(185, 143, 82, .3); }
.seccion-unidades--aire     .seccion-unidades__titulo { color: var(--acento); }
.seccion-unidades--recon    .seccion-unidades__titulo { color: #8fae87; }
.seccion-unidades--nodo     .seccion-unidades__titulo { color: #a3a878; }
.seccion-unidades--neutro   .seccion-unidades__titulo { color: var(--texto-suave); }

/* Estado de inscripción en el roster */
.soldado--confirmado { border-left: 3px solid var(--acento-2); }
.soldado--pendiente  { border-left: 3px solid var(--acento); }
.soldado--ausente    { border-left: 3px solid var(--sangre); opacity: .5; }
.roster__grupo {
  margin: .5rem 0 .15rem;
  font-family: var(--fuente-mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.origen-discord { color: var(--acento); }
.tablero-secciones { min-width: 0; }

/* --- Agenda del portal --- */
.partidas { display: flex; flex-direction: column; gap: .8rem; list-style: none; margin: 0; padding: 0; }

.partida {
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--acento);
  border-radius: var(--radio);
}

.partida__cabecera {
  display: grid;
  gap: .8rem;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  padding: .8rem;
}

.partida__titulo { font-size: 1rem; margin: 0 0 .25rem; color: var(--plata); }
.partida__cuentas { display: flex; gap: .25rem; }
.partida__acciones { display: flex; flex-wrap: wrap; gap: .4rem; }

.partida__listas {
  display: grid;
  gap: 1rem;
  padding: .8rem;
  border-top: 1px solid var(--borde);
  background: rgba(0, 0, 0, .18);
}

.lista-anotados__titulo {
  margin: 0 0 .4rem;
  font-size: .7rem;
  letter-spacing: .14em;
  color: var(--texto-suave);
}

@media (min-width: 768px) {
  .partida__cabecera { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .partida__listas { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

/* ==========================================================================
   Estrategias — selector de mapa, editor de dibujo y briefing
   ========================================================================== */

/* --- Selector de mapa del alta ------------------------------------------ */

.grupo-mapas__titulo {
  font-family: var(--fuente-titulo);
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin: 1.2rem 0 .5rem;
}

.grilla-mapas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: .6rem;
  list-style: none;
  margin: 0 0 .6rem;
  padding: 0;
}

.tarjeta-mapa {
  display: block;
  width: 100%;
  padding: 0;
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--transicion), transform var(--transicion);
}

.tarjeta-mapa:hover { border-color: var(--borde-fuerte); transform: translateY(-2px); }

.tarjeta-mapa--elegida {
  border-color: var(--acento);
  box-shadow: 0 0 0 1px var(--acento);
}

.tarjeta-mapa img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  filter: saturate(.8) brightness(.85);
}

.tarjeta-mapa--elegida img { filter: none; }

.tarjeta-mapa__nombre {
  display: block;
  padding: .35rem .4rem;
  font-family: var(--fuente-titulo);
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--texto);
  text-align: center;
}

.tarjeta-mapa--elegida .tarjeta-mapa__nombre { color: var(--acento); }

/* --- Lista de estrategias ----------------------------------------------- */

.lista-planes { display: flex; flex-direction: column; gap: .7rem; list-style: none; margin: 0; padding: 0; }

.plan {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: .9rem;
  align-items: center;
  padding: .7rem;
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--acento);
  border-radius: var(--radio);
}

.plan__mapa img {
  display: block;
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: var(--radio);
  filter: saturate(.85);
}

.plan__titulo { margin: 0 0 .2rem; font-size: 1rem; }
.plan__titulo a { color: var(--plata); text-decoration: none; }
.plan__titulo a:hover { color: var(--acento); }
.plan__meta { margin: 0 0 .15rem; font-size: .78rem; color: var(--texto-suave); }
.plan__acciones { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }

@media (min-width: 992px) {
  .plan { grid-template-columns: 84px minmax(0, 1fr) auto; }
}

/* --- Editor -------------------------------------------------------------- */

.pizarra {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: .8rem;
  align-items: stretch;
}

/*
   En escritorio la pizarra ocupa la pantalla y no hace scroll: el mapa tiene
   que verse entero mientras se dibuja. El alto se reparte con flex en vez de
   restarle un numero magico a 100vh, para que no se rompa si la cabecera del
   panel cambia de alto.
*/
@media (min-width: 992px) {
  body.pizarra-pagina { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
  body.pizarra-pagina .cabecera { flex: 0 0 auto; }
  .pizarra { flex: 1; min-height: 0; }
}

.pizarra__barra {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  align-items: flex-start;
  justify-content: space-between;
}

.pizarra__titulo {
  font-family: var(--fuente-titulo);
  font-size: 1.4rem;
  margin: .15rem 0;
  color: var(--plata);
  outline: none;
  border-bottom: 1px dashed transparent;
}

.pizarra__titulo:hover, .pizarra__titulo:focus { border-bottom-color: var(--borde-fuerte); }

.pizarra__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
  margin: 0;
  font-size: .75rem;
  color: var(--texto-suave);
}

.pizarra__select {
  background: var(--fondo-3);
  color: var(--texto);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: .12rem .3rem;
  font-family: var(--fuente-mono);
  font-size: .72rem;
}

.pizarra__acciones { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.pizarra__aviso { font-size: .75rem; }

/* --- Fases ---------------------------------------------------------------- */

.fases {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
  justify-content: space-between;
  padding: .4rem .5rem;
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

.fases__lista { display: flex; flex-wrap: wrap; gap: .3rem; list-style: none; margin: 0; padding: 0; }
.fases__acciones { display: flex; flex-wrap: wrap; gap: .3rem; }

.fase {
  padding: .3rem .7rem;
  background: transparent;
  color: var(--texto-suave);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  font-family: var(--fuente-titulo);
  font-size: .82rem;
  letter-spacing: .05em;
  cursor: pointer;
  transition: color var(--transicion), border-color var(--transicion);
}

.fase:hover { color: var(--texto); border-color: var(--borde-fuerte); }

.fase--activa {
  color: var(--fondo);
  background: var(--acento);
  border-color: var(--acento);
}

/* --- Cuerpo: herramientas | lienzo | briefing ---------------------------- */

.pizarra__cuerpo {
  display: grid;
  grid-template-columns: 1fr;
  gap: .6rem;
  flex: 1;
  min-height: 0;
}

@media (min-width: 992px) {
  .pizarra__cuerpo { grid-template-columns: 132px minmax(0, 1fr) 250px; }
}

.herramientas {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  padding: .6rem;
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  align-content: flex-start;
}

@media (min-width: 992px) {
  .herramientas { flex-direction: column; flex-wrap: nowrap; overflow-y: auto; }
}

.herramientas__grupo { display: flex; flex-wrap: wrap; gap: .25rem; flex: 0 0 auto; }
.herramientas__grupo--iconos { flex-direction: column; }

.herramientas__rotulo {
  width: 100%;
  font-family: var(--fuente-titulo);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.herramienta {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex: 1 0 auto;
  padding: .3rem .45rem;
  background: var(--fondo-3);
  color: var(--texto-suave);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  cursor: pointer;
  font-family: var(--fuente-texto);
  font-size: .74rem;
  transition: color var(--transicion), border-color var(--transicion);
}

.herramienta:hover { color: var(--texto); border-color: var(--borde-fuerte); }

.herramienta--activa {
  color: var(--acento);
  border-color: var(--acento);
  background: rgba(var(--acento-rgb), .12);
}

.herramienta__glifo { font-size: 1rem; line-height: 1; }
.herramienta__nombre { white-space: nowrap; }

@media (max-width: 991px) {
  .herramienta__nombre { display: none; }
  .herramienta { justify-content: center; }
  .lienzo { order: -1; min-height: 60vh; }
  .herramientas__grupo--iconos { flex: 1 1 100%; }
  .marcadores { grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); }
}

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

.paleta__color {
  width: 24px;
  height: 24px;
  padding: 0;
  background: var(--color);
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5);
}

.paleta__color--activo { border-color: var(--plata); }

.grosores { display: flex; gap: .25rem; align-items: center; }

.grosor {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  cursor: pointer;
}

.grosor span { display: block; width: 60%; background: var(--texto-suave); border-radius: 4px; }
.grosor--activo { border-color: var(--acento); }
.grosor--activo span { background: var(--acento); }

.marcadores {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  align-content: start;   /* si no, las filas se reparten el alto de la columna */
  gap: .25rem;
}

.marcador {
  height: 30px;
  padding: 0;
  background: var(--fondo-3);
  color: var(--texto-suave);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  cursor: pointer;
  font-family: var(--fuente-titulo);
  font-size: .72rem;
  font-weight: 600;
}

.marcador:hover { color: var(--texto); border-color: var(--borde-fuerte); }
.marcador--activo { color: var(--acento); border-color: var(--acento); background: rgba(var(--acento-rgb), .12); }

/* --- Lienzo --------------------------------------------------------------- */

.lienzo {
  position: relative;
  min-height: 380px;
  background: #0d1008;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  touch-action: none;      /* el pan y el zoom los maneja el editor */
  cursor: crosshair;
}

.lienzo[data-modo="mano"] { cursor: grab; }
.lienzo[data-modo="goma"] { cursor: cell; }
.lienzo[data-modo="texto"] { cursor: text; }
.lienzo--moviendo { cursor: grabbing; }

.lienzo canvas { display: block; }

.lienzo__coordenada {
  position: absolute;
  top: .5rem;
  left: .5rem;
  padding: .15rem .5rem;
  background: rgba(13, 16, 8, .82);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  font-size: .82rem;
  font-weight: 700;
  color: var(--acento);
  pointer-events: none;
}

.lienzo__ayuda {
  position: absolute;
  right: .5rem;
  bottom: .5rem;
  margin: 0;
  padding: .15rem .5rem;
  background: rgba(13, 16, 8, .78);
  border-radius: var(--radio);
  font-size: .66rem;
  color: var(--texto-suave);
  pointer-events: none;
}

@media (max-width: 767px) {
  .lienzo__ayuda { display: none; }
}

/* --- Briefing ------------------------------------------------------------- */

.briefing {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: .6rem;
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow-y: auto;
}

.briefing__titulo {
  font-family: var(--fuente-titulo);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin: .5rem 0 0;
}

.briefing__notas {
  width: 100%;
  padding: .4rem;
  background: var(--fondo-3);
  color: var(--texto);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  font-family: var(--fuente-texto);
  font-size: .8rem;
  resize: vertical;
}

.briefing__notas:focus { outline: none; border-color: var(--borde-fuerte); }

.briefing__marcadores { display: flex; flex-direction: column; gap: .25rem; list-style: none; margin: 0; padding: 0; }

.briefing__marcadores li {
  display: flex;
  gap: .4rem;
  align-items: center;
  font-size: .78rem;
  color: var(--texto);
}

.briefing__marcadores em { margin-left: auto; font-style: normal; font-size: .7rem; color: var(--acento); }

.briefing__sigla {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 20px;
  padding: 0 .3rem;
  border-radius: var(--radio);
  font-family: var(--fuente-titulo);
  font-size: .68rem;
  font-weight: 700;
}

/* --- Partidas de Discord que esperan alistamiento ----------------------- */

.panel--aviso { border-left: 3px solid var(--acento); }

.pendientes { display: flex; flex-direction: column; gap: .4rem; list-style: none; margin: 0; padding: 0; }

.pendiente {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
  justify-content: space-between;
  padding: .5rem .7rem;
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

.pendiente__datos { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.pendiente__datos strong { color: var(--plata); }
.pendiente__meta { font-size: .72rem; color: var(--texto-suave); }

/* ==========================================================================
   Puntuaciones internas y padron del clan
   ========================================================================== */

/* Las reglas del sistema, arriba de todo: es lo primero que pregunta
   cualquiera que entra, y tenerlas a la vista evita la mitad de las quejas. */
.reglas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .5rem;
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 0;
}

.regla {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .75rem;
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--borde);
  border-radius: var(--radio);
}

.regla__puntos { font-size: 1.15rem; font-weight: 700; min-width: 2.6rem; }
.regla__texto  { font-size: .78rem; color: var(--texto-suave); line-height: 1.25; }

.regla--si  { border-left-color: var(--acento-2); }
.regla--si  .regla__puntos { color: var(--acento-2); }
.regla--no  { border-left-color: var(--laton); }
.regla--no  .regla__puntos { color: var(--laton); }
.regla--tal { border-left-color: var(--texto-suave); }
.regla--tal .regla__puntos { color: var(--texto-suave); }
.regla--sin { border-left-color: var(--sangre); }
.regla--sin .regla__puntos { color: #c76a5b; }

/* Etiqueta de respuesta dentro de una tabla */
.chip {
  display: inline-block;
  padding: .1rem .45rem;
  font-family: var(--fuente-mono);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-radius: var(--radio);
  white-space: nowrap;
}

.chip--si  { background: rgba(125, 158, 63, .2); color: var(--acento-2); }
.chip--no  { background: rgba(var(--acento-rgb), .16); color: var(--acento); }
.chip--tal { background: rgba(217, 219, 210, .09); color: var(--texto-suave); }
.chip--sin { background: rgba(140, 47, 34, .2); color: #c76a5b; }

/* Nombres de Discord que no engancharon con nadie del padron */
.sueltos {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  list-style: none;
  margin: .6rem 0 0;
  padding: 0;
}

.suelto {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .6rem;
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  font-size: .8rem;
}

.suelto__nombre { color: var(--plata); }
.suelto__veces  { font-size: .7rem; color: var(--texto-suave); }


/* --- Lista de revisión en columna (padrón) --------------------------------
   Los chips uno al lado del otro sirven para una docena de nombres sueltos,
   pero los 49 activos sin Discord traen cada uno su botón de baja: en fila
   corrida los nombres arrancan en cualquier lado y los botones quedan
   desparramados. Acá van uno abajo del otro, con el nombre alineado a la
   izquierda y la acción siempre en el mismo lugar a la derecha.
   -------------------------------------------------------------------------- */

.sueltos--filas {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0;
  /* Una lista de 49 empujaría la tabla del padrón fuera de la pantalla. */
  max-height: 22rem;
  overflow-y: auto;
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

.sueltos--filas .suelto {
  justify-content: space-between;
  padding: .45rem .7rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--borde);
  border-radius: 0;
}

.sueltos--filas .suelto:last-child { border-bottom: 0; }
.sueltos--filas .suelto:hover { background: rgba(var(--acento-rgb), .06); }

/* El nombre ocupa el espacio libre y empuja el conteo y el botón a la derecha. */
.sueltos--filas .suelto__nombre {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Tablas de posiciones y padron ------------------------------------ */

.tabla .num { text-align: right; }
.tabla .negativo { color: #c76a5b; }

.tabla--posiciones tbody td { padding-top: .35rem; padding-bottom: .35rem; }
.tabla--posiciones tbody tr:hover { background: rgba(var(--acento-rgb), .05); }

/* El propio miembro, resaltado: en una tabla de 150 filas es lo unico que
   cada uno viene a buscar. */
.fila--propia { background: rgba(var(--acento-rgb), .10) !important; }
.fila--propia td { border-top: 1px solid var(--borde-fuerte); border-bottom: 1px solid var(--borde-fuerte); }

.fila--licencia { opacity: .72; }
.fila--baja     { opacity: .45; }

/* Confirmacion de guardado en la edicion en linea del padron */
.fila--guardada { animation: destello-ok 1.1s ease-out; }
.fila--error    { animation: destello-mal 1.1s ease-out; }

@keyframes destello-ok  { from { background: rgba(125, 158, 63, .3); } to { background: transparent; } }
@keyframes destello-mal { from { background: rgba(140, 47, 34, .35); } to { background: transparent; } }

@media (prefers-reduced-motion: reduce) {
  .fila--guardada, .fila--error { animation: none; }
  .fila--guardada { box-shadow: inset 3px 0 0 var(--acento-2); }
  .fila--error    { box-shadow: inset 3px 0 0 var(--sangre); }
}

.bloque-id { display: block; font-size: .68rem; margin-top: .1rem; }

/* --- Alias ------------------------------------------------------------- */

.celda-alias { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; max-width: 22rem; }

.alias {
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  padding: .1rem .35rem;
  font-size: .7rem;
  background: rgba(var(--acento-rgb), .12);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  color: var(--texto-suave);
}

.alias__quitar {
  background: none;
  border: 0;
  padding: 0 .1rem;
  color: var(--texto-suave);
  cursor: pointer;
  font-size: .85rem;
  line-height: 1;
}

.alias__quitar:hover { color: #c76a5b; }

/* --- Casillas de frente ------------------------------------------------ */

.check {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .78rem;
  color: var(--texto-suave);
  cursor: pointer;
  white-space: nowrap;
}

.check--chico { font-size: .7rem; margin-right: .5rem; }
.check input  { accent-color: var(--acento); }

.campo--frentes { border: 0; margin: 0; padding: 0; }
.campo--frentes > span {
  display: block;
  font-family: var(--fuente-titulo);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--texto-suave);
  margin-bottom: .3rem;
}

/* --- Avisos y panel propio --------------------------------------------- */

.aviso--ok { border-left-color: var(--acento-2); }
.panel--propio { border-left: 3px solid var(--acento); }

/* ==========================================================================
   Solicitudes de amistoso ("Desafianos")
   ========================================================================== */

.contenedor--angosto { max-width: 820px; }

/* El formulario embebido en la landing necesita su propio fondo: viene despues
   de secciones de contenido y sin el se lee como parte de la anterior. */
.desafio {
  padding: 1.4rem;
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-top: 3px solid var(--acento);
  border-radius: var(--radio);
}

.form-amistoso { display: flex; flex-direction: column; gap: 1rem; }

.campos--2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: .9rem;
}

.campo__ayuda { font-size: .68rem; color: var(--texto-suave); }

.form-amistoso__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem;
}

/* Campo trampa: fuera de la pantalla en vez de display:none, porque hay bots
   que descartan los campos ocultos con display y este tiene que parecer real. */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Acuse de recibo ---------------------------------------------------- */

.acuse {
  padding: 1.4rem;
  background: var(--fondo-3);
  border: 1px solid var(--borde-fuerte);
  border-left: 3px solid var(--acento-2);
  border-radius: var(--radio);
}

.acuse__titulo {
  font-family: var(--fuente-titulo);
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--acento);
  margin: 0 0 .5rem;
}

.acuse__referencia { margin: .9rem 0; font-size: 1.05rem; }
.acuse__referencia strong { color: var(--acento-claro); letter-spacing: .06em; }
.acuse__ojo { color: var(--acento); font-size: .85rem; }

.aviso--error { border-left-color: var(--sangre); }

/* --- Pasos y consulta --------------------------------------------------- */

.pasos, .consulta { margin-top: 2rem; }

.pasos__titulo {
  font-family: var(--fuente-titulo);
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--plata);
  margin: 0 0 .7rem;
}

.pasos__lista {
  margin: 0 0 1rem;
  padding-left: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  color: var(--texto-suave);
}

.pasos__lista strong { color: var(--plata); }

.consulta__form { display: flex; flex-wrap: wrap; gap: .5rem; }

.consulta__form input {
  flex: 1 1 200px;
  padding: .5rem .7rem;
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  color: var(--texto);
  font-family: var(--fuente-mono);
  text-transform: uppercase;
}

.estado-grande { margin: .6rem 0; font-size: 1.1rem; }

.ficha-datos {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .4rem 1.2rem;
  margin: 1.2rem 0;
  padding: 1rem;
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

.ficha-datos dt {
  font-family: var(--fuente-titulo);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--texto-suave);
}

.ficha-datos dd { margin: 0; color: var(--plata); }

/* --- Bandeja del panel -------------------------------------------------- */

.desafios { display: flex; flex-direction: column; gap: .8rem; }

.desafio-ficha {
  padding: 1rem 1.1rem;
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--acento);
  border-radius: var(--radio);
}

.desafio-ficha--cerrada { border-left-color: var(--borde); opacity: .72; }

.desafio-ficha__cabecera {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: flex-start;
  justify-content: space-between;
}

.desafio-ficha__clan {
  font-family: var(--fuente-titulo);
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--plata);
  margin: 0;
}

.desafio-ficha__meta { font-size: .72rem; color: var(--texto-suave); }

.desafio-ficha__datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .7rem;
  margin: .9rem 0 0;
}

.desafio-ficha__datos dt {
  font-family: var(--fuente-titulo);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--texto-suave);
}

.desafio-ficha__datos dd { margin: .1rem 0 0; color: var(--plata); font-size: .85rem; }

.desafio-ficha__mensaje {
  margin: .9rem 0 0;
  padding: .6rem .8rem;
  background: var(--fondo-3);
  border-left: 2px solid var(--borde);
  color: var(--texto-suave);
  font-size: .85rem;
  font-style: italic;
}

.desafio-ficha__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px solid var(--borde);
}

.desafio-ficha__acciones input[name="motivo"] {
  flex: 1 1 260px;
  padding: .4rem .6rem;
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  color: var(--texto);
  font-size: .82rem;
}

.desafio-ficha__acciones select {
  padding: .4rem .6rem;
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  color: var(--texto);
  font-size: .82rem;
}

.boton[disabled] { opacity: .45; cursor: not-allowed; }

/* Contador de pendientes al lado del enlace del panel */
.pastilla {
  display: inline-block;
  min-width: 1.3em;
  margin-left: .35rem;
  padding: 0 .3em;
  background: var(--acento);
  color: #14170e;
  border-radius: 999px;
  font-family: var(--fuente-mono);
  font-size: .68rem;
  font-weight: 700;
  text-align: center;
}

/* ==========================================================================
   Redes del clan: tarjetas, cartel EN VIVO y muro de publicaciones
   Cada red trae su color de marca en --marca (atributo style desde la vista).
   Se usa solo en bordes, iconos y acentos: el fondo sigue siendo el del sitio,
   asi que seis marcas distintas conviven sin romper la paleta militar.
   ========================================================================== */

/* --- Cartel de transmision en vivo -------------------------------------- */

.envivo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem .9rem;
  margin-bottom: 1.75rem;
  padding: .85rem 1.1rem;
  background: linear-gradient(90deg, rgba(145, 70, 255, .18), rgba(28, 33, 19, .55) 60%);
  border: 1px solid rgba(145, 70, 255, .45);
  border-left: 3px solid #9146ff;
  border-radius: var(--radio);
  color: var(--texto);
  transition: border-color var(--transicion), transform var(--transicion);
}

.envivo:hover { border-color: #9146ff; transform: translateY(-2px); color: var(--texto); }

.envivo__pulso {
  width: 10px;
  height: 10px;
  flex: none;
  background: #e02b2b;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(224, 43, 43, .7);
  animation: latido 1.8s infinite;
}

@keyframes latido {
  70%  { box-shadow: 0 0 0 12px rgba(224, 43, 43, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 43, 43, 0); }
}

/* Un punto que late sin parar molesta a quien pidio menos movimiento; el
   cartel se entiende igual por el color y el texto. */
@media (prefers-reduced-motion: reduce) {
  .envivo__pulso { animation: none; }
}

.envivo__etiqueta {
  font-family: var(--fuente-titulo);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #c9a6ff;
}

.envivo__texto { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; flex: 1; }
.envivo__texto strong { font-size: .95rem; font-weight: 600; }

.envivo__juego {
  padding: .1rem .5rem;
  background: rgba(145, 70, 255, .2);
  border-radius: 999px;
  font-size: .7rem;
  color: #c9a6ff;
}

.envivo__gente { font-size: .78rem; color: var(--texto-suave); }

/* --- Tarjetas de cada red ------------------------------------------------ */

.redes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.red {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icono cuerpo"
    "cta   cta";
  gap: .35rem 1rem;
  padding: 1.2rem 1.15rem 1rem;
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  color: var(--texto);
  overflow: hidden;
  transition: border-color var(--transicion), transform var(--transicion),
              background var(--transicion);
}

/* Franja superior con el color de la red: la identifica de un vistazo sin
   tener que tenir toda la tarjeta. */
.red::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--marca, var(--acento));
  opacity: .75;
}

.red:hover {
  transform: translateY(-3px);
  border-color: var(--marca, var(--borde-fuerte));
  background: var(--fondo-3);
  color: var(--texto);
}

.red__icono {
  grid-area: icono;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: color-mix(in srgb, var(--marca, var(--acento)) 16%, transparent);
  border-radius: var(--radio);
  color: var(--marca, var(--acento));
}

.red__icono svg { width: 22px; height: 22px; fill: currentColor; }

.red__cuerpo { grid-area: cuerpo; display: flex; flex-direction: column; gap: .1rem; }

.red__nombre {
  font-family: var(--fuente-titulo);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--plata);
}

.red__handle { font-size: .72rem; color: var(--marca, var(--acento)); }

.red__epigrafe {
  margin-top: .45rem;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--texto-suave);
}

.red__cta {
  grid-area: cta;
  margin-top: .7rem;
  padding-top: .7rem;
  border-top: 1px solid var(--borde);
  font-family: var(--fuente-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-suave);
  transition: color var(--transicion);
}

.red:hover .red__cta { color: var(--marca, var(--acento)); }

/* --- Muro de publicaciones ----------------------------------------------- */

.muro__titulo {
  margin: 2.5rem 0 1.25rem;
  font-size: 1.1rem;
  letter-spacing: .1em;
  color: var(--texto-suave);
}

.muro {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.publicacion {
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  transition: border-color var(--transicion), transform var(--transicion);
}

.publicacion:hover { border-color: var(--marca, var(--borde-fuerte)); transform: translateY(-3px); }

.publicacion__enlace { display: flex; flex-direction: column; height: 100%; color: var(--texto); }
.publicacion__enlace:hover { color: var(--texto); }

.publicacion__imagen {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--fondo-3);
  overflow: hidden;
}

.publicacion__imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* La foto entra desaturada para que el muro no pelee con la paleta del sitio
     y recupera el color cuando se la mira. */
  filter: grayscale(.35) contrast(1.05);
  transition: filter var(--transicion), transform 400ms ease;
}

.publicacion:hover .publicacion__imagen img { filter: none; transform: scale(1.04); }

/* Sin miniatura: el logo de la red enorme y tenue, en vez de un hueco gris. */
.publicacion__marca {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 40%,
      color-mix(in srgb, var(--marca, var(--acento)) 22%, transparent), transparent 70%);
  color: var(--marca, var(--acento));
  opacity: .5;
}

.publicacion__marca svg { width: 64px; height: 64px; fill: currentColor; }

.publicacion__red {
  position: absolute;
  top: .6rem;
  left: .6rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .22rem .55rem;
  background: rgba(20, 23, 14, .82);
  border: 1px solid color-mix(in srgb, var(--marca, var(--acento)) 55%, transparent);
  border-radius: 999px;
  backdrop-filter: blur(4px);
  font-family: var(--fuente-mono);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--marca, var(--acento));
}

.publicacion__red svg { width: 12px; height: 12px; fill: currentColor; display: block; }

.publicacion__cuerpo {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: .9rem 1rem 1rem;
  flex: 1;
}

.publicacion__titulo {
  margin: 0;
  font-size: .95rem;
  line-height: 1.3;
  color: var(--plata);
  /* Dos lineas como maximo: los titulos de TikTok traen parrafos enteros de
     hashtags y descuadran la grilla. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.publicacion__texto {
  margin: 0;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--texto-suave);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.publicacion__meta {
  margin: auto 0 0;
  padding-top: .5rem;
  font-size: .68rem;
  color: var(--texto-suave);
}

/* --- Redes en el pie ------------------------------------------------------ */

.pie__redes { display: flex; flex-wrap: wrap; gap: .55rem; }

.pie__red {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  color: var(--texto-suave);
  transition: color var(--transicion), border-color var(--transicion),
              transform var(--transicion);
}

.pie__red svg { width: 16px; height: 16px; fill: currentColor; display: block; }

.pie__red:hover {
  color: var(--marca, var(--acento));
  border-color: var(--marca, var(--acento));
  transform: translateY(-2px);
}

/* --- Breakpoints ---------------------------------------------------------- */

@media (min-width: 576px) {
  .redes { grid-template-columns: repeat(2, 1fr); }
  .muro  { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .red {
    grid-template-areas:
      "icono cuerpo"
      ".     cta";
  }
}

@media (min-width: 992px) {
  .redes { grid-template-columns: repeat(3, 1fr); }
  .muro  { grid-template-columns: repeat(4, 1fr); }

  /* La destacada ocupa dos columnas y dos filas: manda en el muro. */
  .publicacion--destacada { grid-column: span 2; }
  .publicacion--destacada .publicacion__imagen { aspect-ratio: 16 / 9; }
  .publicacion--destacada .publicacion__titulo { font-size: 1.25rem; -webkit-line-clamp: 3; }
  .publicacion--destacada .publicacion__texto { font-size: .9rem; -webkit-line-clamp: 5; }
}

/* ==========================================================================
   Panel: carga de publicaciones de las redes (/admin/redes)
   ========================================================================== */

/* Un enlace o un titulo no entran en una columna de 190 px como un select. */
.campo--ancho { grid-column: 1 / -1; }

/* --- Enlaces vigentes de cada red ---------------------------------------- */

.enlaces-red { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }

.enlace-red {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .75rem;
  padding: .55rem .7rem;
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  border-left: 2px solid var(--marca, var(--acento));
  border-radius: var(--radio);
}

.enlace-red__icono { display: grid; place-items: center; color: var(--marca, var(--acento)); }
.enlace-red__icono svg { width: 18px; height: 18px; fill: currentColor; display: block; }

.enlace-red__datos { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.enlace-red__datos strong { font-size: .85rem; color: var(--plata); }

/* La URL de un grupo de WhatsApp es larguisima: se corta con puntos suspensivos
   en vez de estirar la fila. */
.enlace-red__url {
  font-size: .68rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.enlace-red__var { font-size: .62rem; letter-spacing: .04em; }

/* --- Publicaciones ya cargadas -------------------------------------------- */

.cargadas { display: grid; gap: .75rem; }

.cargada {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: .9rem;
  padding: .7rem;
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-left: 2px solid var(--marca, var(--acento));
  border-radius: var(--radio);
}

/* Oculta de la portada: se ve igual en el panel, pero apagada. */
.cargada--oculta { opacity: .55; }

.cargada__miniatura {
  position: relative;
  aspect-ratio: 1;
  background: var(--fondo-3);
  border-radius: var(--radio);
  overflow: hidden;
}

.cargada__miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cargada__sinfoto {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--marca, var(--acento));
  opacity: .4;
}

.cargada__sinfoto svg { width: 30px; height: 30px; fill: currentColor; }

.cargada__cuerpo { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.cargada__titulo { margin: 0; font-size: .95rem; }
.cargada__titulo a { color: var(--plata); }
.cargada__titulo a:hover { color: var(--acento); }
.cargada__meta { font-size: .68rem; color: var(--texto-suave); margin: 0; }
.cargada__texto { margin: .2rem 0 0; font-size: .8rem; }

.cargada__acciones {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding-top: .6rem;
  border-top: 1px solid var(--borde);
}

.cargada__acciones form { margin: 0; }

@media (min-width: 768px) {
  /* En escritorio los botones van a la derecha, no debajo. */
  .cargada { grid-template-columns: 84px 1fr auto; align-items: start; }
  .cargada__acciones {
    grid-column: auto;
    padding-top: 0;
    border-top: 0;
    flex-direction: column;
    align-items: stretch;
  }
}