/* ==========================================================================
   MAGIC COMMANDER — ESTILOS COMUNES DE LAS PÁGINAS DE FORMULARIO
   ==========================================================================

   ESTE ARCHIVO SE PUEDE EDITAR EN CALIENTE.
   Ábrelo con el Bloc de notas, cambia lo que quieras, guarda y pulsa F5 en
   el navegador. NO hace falta reiniciar el servidor ni tocar nada de Python.

   Aquí vive TODO lo que comparten las páginas con el estilo oscuro nuevo
   ("Generar mazo", "Mi colección"...): el marco de tres columnas con los
   huecos laterales para publicidad, las tarjetas, los campos, los
   buscadores en vivo, las etiquetas, los interruptores, el botón principal
   y el globo de ayuda "i".

   Los colores, la tipografía, la barra de arriba y el pie están en
   `global.css`. Lo propio de cada página, en su archivo (`generar.css`,
   `coleccion.css`...).

   Estructura de todas estas páginas:

       LATERAL          COLUMNA CENTRAL          LATERAL
      (publicidad)        (contenido)          (publicidad)

   Los dos laterales están VACÍOS a propósito: son el hueco reservado para
   la publicidad del futuro. No llevan ni borde ni texto. En pantallas
   pequeñas desaparecen y el contenido ocupa todo el ancho.
   ========================================================================== */

:root {
  /* ---------- MEDIDAS COMPARTIDAS ---------- */
  --central:        1040px;   /* ancho de la columna de contenido */
  --lateral:        220px;    /* ancho reservado para publicidad, a cada lado */
  --hueco-lateral:  30px;     /* separación entre el contenido y cada lateral */
  --radio-campo:    10px;     /* redondeo de las cajas de texto */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--fuente);
  color: var(--texto);
  background: var(--fondo);
  background-image:
    radial-gradient(120% 60% at 50% -10%, var(--fondo-alto) 0%, transparent 60%),
    radial-gradient(55% 40% at 88% 6%, rgba(217, 164, 65, .09) 0%, transparent 70%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--acento-claro); }

/* ==========================================================================
   EL MARCO DE TRES COLUMNAS
   ========================================================================== */
.marco {
  display: grid;
  grid-template-columns: var(--lateral) minmax(0, var(--central)) var(--lateral);
  gap: var(--hueco-lateral);
  justify-content: center;
  align-items: start;
  padding: clamp(22px, 3vw, 40px) 20px 10px;
}

/* Hueco reservado para publicidad futura. Vacío a propósito: sin borde, sin
   texto, sin relleno decorativo. Solo ocupa su sitio. */
.lateral {
  min-height: 600px;
  position: sticky; top: 84px;
}

.columna-central { min-width: 0; }

/* ==========================================================================
   CABECERA DE LA PÁGINA
   ========================================================================== */
.titulo-pagina {
  margin: 0 0 4px;
  font-size: clamp(1.9rem, 3.2vw, 2.7rem); font-weight: 800; line-height: 1.05;
  letter-spacing: -.02em; text-transform: uppercase;
  background: linear-gradient(180deg, var(--texto) 34%, #9fb0c9 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.subtitulo-pagina { margin: 0 0 18px; color: var(--texto-suave); font-size: .95rem; }

/* El aviso de atajo al explorador. */
.nota-atajo {
  display: flex; gap: 12px; align-items: flex-start;
  background: linear-gradient(120deg, rgba(217, 164, 65, .10), rgba(217, 164, 65, .03));
  border: 1px solid var(--acento-oscuro);
  border-radius: 12px; padding: 13px 16px; margin-bottom: 20px;
  font-size: .86rem; color: var(--texto-suave);
}
.nota-atajo .icono { font-size: 1rem; line-height: 1.4; }
.nota-atajo a { text-decoration: underline; text-underline-offset: 3px; }

/* Errores de generación. */
.caja-error {
  background: rgba(179, 38, 30, .12); border: 1px solid #7b2b26;
  border-radius: 12px; padding: 14px 18px; margin-bottom: 20px;
}
.caja-error p { margin: 0 0 6px; font-weight: 700; color: #ff9c94; }
.caja-error ul { margin: 0; padding-left: 20px; color: #ffc9c4; font-size: .9rem; }

/* ==========================================================================
   SECCIONES DEL FORMULARIO
   --------------------------------------------------------------------------
   Cada bloque del boceto es una tarjeta, con el mismo panel, borde y sombra
   que los bloques de la portada.
   ========================================================================== */
.seccion {
  position: relative;
  background: linear-gradient(140deg, var(--panel-alto) 0%, var(--panel) 62%, #10141d 100%);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .40);
  padding: clamp(18px, 2vw, 26px);
  margin-bottom: 18px;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.seccion:focus-within { border-color: var(--borde-brillo); box-shadow: 0 20px 44px rgba(0, 0, 0, .5); }

.seccion-titulo {
  margin: 0 0 14px;
  font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--acento);
}

/* ---------- Campos ---------- */
.campo { position: relative; margin-bottom: 16px; }
.campo:last-child { margin-bottom: 0; }

.campo label, .etiqueta {
  display: block; margin-bottom: 7px;
  font-size: .82rem; font-weight: 700; letter-spacing: .02em;
  color: var(--texto);
}
.ayuda { margin: 6px 0 0; font-size: .79rem; color: var(--texto-tenue); }

input[type=text], input[type=number], select, textarea {
  width: 100%;
  background: #0d1119;
  border: 1px solid var(--borde);
  border-radius: var(--radio-campo);
  color: var(--texto);
  padding: 11px 13px;
  font-family: inherit; font-size: .94rem;
  transition: border-color var(--transicion), box-shadow var(--transicion), background var(--transicion);
}
input::placeholder { color: #55607a; }
input[type=text]:hover, input[type=number]:hover, select:hover { border-color: var(--borde-brillo); }
input[type=text]:focus, input[type=number]:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--acento);
  background: #101724;
  box-shadow: 0 0 0 3px rgba(217, 164, 65, .16);
}
select { cursor: pointer; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--texto-suave) 50%),
                    linear-gradient(135deg, var(--texto-suave) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }

/* ==========================================================================
   BUSCADORES EN VIVO, ETIQUETAS Y TEMAS
   ========================================================================== */
.buscador-campo { position: relative; }

.sugerencias {
  position: absolute; z-index: 25; width: 100%;
  background: #121824; border: 1px solid var(--borde-brillo); border-top: none;
  max-height: 260px; overflow-y: auto; display: none;
  border-radius: 0 var(--radio-campo) var(--radio-campo) var(--radio-campo);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .55);
}
.sugerencias div { padding: 9px 13px; cursor: pointer; font-size: .89rem; color: var(--texto-suave); }
.sugerencias div:hover, .sugerencias div.activa { background: rgba(217, 164, 65, .13); color: var(--texto); }
.sugerencias div small { color: var(--texto-tenue); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip {
  background: rgba(217, 164, 65, .10); border: 1px solid var(--acento-oscuro); border-radius: 16px;
  padding: 4px 6px 4px 12px; font-size: .82rem; color: var(--texto);
  display: inline-flex; align-items: center; gap: 5px;
}
.chip button {
  background: none; border: none; color: var(--texto-tenue); cursor: pointer;
  font-weight: 700; padding: 0 4px; font-size: 1rem; line-height: 1;
  transition: color var(--transicion);
}
.chip button:hover { color: #ff9c94; }

/* Las dos columnas de "imprescindibles" / "a evitar". */
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 26px); }

.mensaje-error { margin: 7px 0 0; font-size: .82rem; color: #ff9c94; font-weight: 600; }

/* ==========================================================================
   INTERRUPTORES Y BOTÓN
   ========================================================================== */
.rejilla-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px clamp(16px, 2vw, 26px); }

.fila-checkbox {
  position: relative;
  display: flex; align-items: flex-start; gap: 9px;
  background: rgba(255, 255, 255, .025);
  border: 1px solid var(--borde); border-radius: 11px;
  padding: 11px 13px;
  transition: border-color var(--transicion), background var(--transicion);
}
.fila-checkbox:hover { border-color: var(--borde-brillo); background: rgba(255, 255, 255, .05); }
.fila-checkbox label {
  margin: 0; font-size: .84rem; font-weight: 500; color: var(--texto-suave);
  display: flex; align-items: flex-start; gap: 9px; cursor: pointer; line-height: 1.35;
}
.fila-checkbox input[type=checkbox] {
  width: 17px; height: 17px; flex-shrink: 0; margin: 1px 0 0;
  accent-color: var(--acento); cursor: pointer;
}
.fila-checkbox:has(input:checked) { border-color: var(--acento-oscuro); }
.fila-checkbox:has(input:checked) label { color: var(--texto); }

.zona-boton { display: flex; justify-content: center; padding: 6px 0 4px; }

.boton-principal {
  font-family: inherit;
  padding: 15px 44px;
  font-size: .98rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: #14100a;
  background: linear-gradient(140deg, var(--acento-claro) 0%, var(--acento) 45%, var(--acento-oscuro) 100%);
  border: 1px solid var(--acento-claro);
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(217, 164, 65, .22), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform var(--transicion), box-shadow var(--transicion), filter var(--transicion);
}
.boton-principal:hover { transform: translateY(-2px); filter: brightness(1.06);
  box-shadow: 0 20px 40px rgba(217, 164, 65, .32), inset 0 1px 0 rgba(255, 255, 255, .4); }
.boton-principal:active { transform: translateY(0); }
.boton-principal:focus-visible { outline: 2px solid var(--acento-claro); outline-offset: 4px; }

/* ==========================================================================
   EL BOTÓN DE AYUDA "i"
   ========================================================================== */
.tip {
  display: inline-grid; place-items: center;
  width: 1.05rem; height: 1.05rem; border-radius: 50%;
  background: rgba(217, 164, 65, .16); border: 1px solid var(--acento-oscuro); color: var(--acento-claro);
  font-size: .66rem; font-weight: 800; font-style: normal;
  cursor: help; margin-left: 6px; position: relative; vertical-align: middle;
}
.tip::after {
  content: attr(data-tip); position: absolute; left: 0; top: 1.5rem;
  background: #0b0e15; border: 1px solid var(--borde-brillo); color: var(--texto-suave);
  padding: 10px 12px; border-radius: 9px; width: 270px;
  font-size: .78rem; font-weight: 400; line-height: 1.42; text-transform: none; letter-spacing: 0;
  z-index: 60; box-shadow: 0 14px 30px rgba(0, 0, 0, .6); display: none; text-align: left;
}
.tip:hover::after, .tip:focus::after { display: block; }
/* Cerca del borde derecho, el globo se abre hacia la izquierda. */
.tip.izquierda::after { left: auto; right: 0; }

/* ==========================================================================
   LA SILUETA DE UNA CARTA
   --------------------------------------------------------------------------
   El hueco que se enseña mientras no hay ninguna carta elegida, en "Generar
   mazo" (zona del comandante) y en el Bulk (añadir cartas). Dibujada solo
   con CSS: marco, ventana de ilustración y dos líneas de texto. No es
   ninguna carta concreta, es un hueco.
   ========================================================================== */
.silueta {
  width: 152px; aspect-ratio: 488 / 680;
  border: 2px dashed var(--borde-brillo);
  border-radius: 9px;
  padding: 9px;
  display: flex; flex-direction: column; gap: 7px;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 10px, transparent 10px 20px);
}
.silueta i { display: block; border-radius: 3px; background: rgba(255, 255, 255, .06); }
.silueta .s-titulo { height: 9px; }
.silueta .s-arte { flex: 1; border-radius: 4px; background: rgba(255, 255, 255, .045);
                   display: grid; place-items: center; }
.silueta .s-arte::after { content: "?"; font-size: 1.9rem; font-weight: 800; color: #3b475e; }
.silueta .s-texto { height: 34px; }
.silueta .s-pie { height: 8px; width: 55%; margin-left: auto; }

/* ==========================================================================
   PANTALLAS MÁS PEQUEÑAS
   ========================================================================== */

/* Se quedan sin sitio los laterales de publicidad: desaparecen y el
   contenido pasa a ocupar el ancho entero. */
@media (max-width: 1340px) {
  .marco { grid-template-columns: minmax(0, var(--central)); }
  .lateral { display: none; }
}

@media (max-width: 660px) {
  .marco { padding: 18px 14px 6px; }
  .seccion { padding: 16px; border-radius: 13px; }
  .dos-columnas, .rejilla-opciones { grid-template-columns: minmax(0, 1fr); }
  .boton-principal { width: 100%; padding: 15px 20px; }
  /* En móvil el globo de ayuda deja de colgar del botón "i" (se saldría de
     la pantalla) y pasa a ocupar el ancho del propio campo, justo debajo. */
  .etiqueta { position: relative; }
  .tip { position: static; }
  .tip::after { left: 0; right: 0; top: 100%; width: auto; margin-top: 6px; }
}

/* Para quien tenga desactivadas las animaciones en su sistema. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .boton-principal:hover { transform: none; }
}