/* ==========================================================================
   thetfordAdmin — panel

   Thetford es la ciudad morada de Albion, la de los magos. De ahi sale la
   paleta: tinta violeta oscura de fondo, violeta encendido para lo que se
   puede tocar, y un oro apagado para lo que ya esta en uso.
   ========================================================================== */

:root {
    --tinta:        #17121f;   /* fondo */
    --tinta-alta:   #1f1929;   /* tarjetas */
    --tinta-borde:  #2f2740;
    --violeta:      #9b6cf2;   /* accion */
    --violeta-tenue:#6f4bb0;
    --oro:          #c9a227;   /* activo, en uso */
    --pergamino:    #ece7f5;   /* texto */
    --pergamino-op: #9c92b3;   /* texto secundario */
    --rojo:         #d9534f;

    --radio: 10px;
    --sombra: 0 12px 32px rgba(0, 0, 0, .45);
}

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600&family=Karla:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap');

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--tinta);
    color: var(--pergamino);
    font-family: 'Karla', system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.55;
}

h1, h2, h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 0 0 .4em;
}

h1 { font-size: 1.9rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1rem; }

a { color: var(--violeta); text-decoration: none; }
a:hover { text-decoration: underline; }

code, .mono {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .85em;
}

/* ------------------------------------------------------------- estructura */

.marco { display: flex; min-height: 100vh; }

.lateral {
    width: 240px;
    flex-shrink: 0;
    background: #120e18;
    border-right: 1px solid var(--tinta-borde);
    padding: 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.marca {
    font-family: 'Fraunces', serif;
    font-size: 1.15rem;
    line-height: 1.2;
}
.marca span { display: block; color: var(--violeta); }

.navegacion { display: flex; flex-direction: column; gap: .15rem; }

.navegacion a {
    color: var(--pergamino-op);
    padding: .5rem .7rem;
    border-radius: 8px;
    font-weight: 500;
}
.navegacion a:hover { background: var(--tinta-alta); color: var(--pergamino); text-decoration: none; }
.navegacion a.actual { background: var(--violeta-tenue); color: #fff; }

.cifras { margin-top: auto; font-size: .85rem; color: var(--pergamino-op); }
.cifras div { display: flex; justify-content: space-between; padding: .2rem 0; }
.cifras strong { color: var(--pergamino); font-family: 'JetBrains Mono', monospace; }

.contenido { flex: 1; padding: 2rem 2.5rem; max-width: 1100px; }

.encabezado {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.bajada { color: var(--pergamino-op); margin: 0; max-width: 62ch; }

/* --------------------------------------------------------------- tarjetas */

.tarjeta {
    background: var(--tinta-alta);
    border: 1px solid var(--tinta-borde);
    border-radius: var(--radio);
    padding: 1.25rem;
}

.rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.tarjeta-formulario { display: block; color: inherit; transition: border-color .15s; }
.tarjeta-formulario:hover { border-color: var(--violeta); text-decoration: none; }
.tarjeta-formulario h3 { margin-bottom: .2rem; }
.tarjeta-formulario .detalle { color: var(--pergamino-op); font-size: .88rem; }

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

.boton {
    display: inline-block;
    background: var(--violeta);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: .55rem 1rem;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.boton:hover { background: #ab80f5; text-decoration: none; }

.boton.tenue { background: transparent; color: var(--pergamino-op); border: 1px solid var(--tinta-borde); }
.boton.tenue:hover { background: var(--tinta-alta); color: var(--pergamino); }

.boton.peligro { background: transparent; color: var(--rojo); border: 1px solid rgba(217, 83, 79, .4); }
.boton.peligro:hover { background: rgba(217, 83, 79, .12); }

.boton.chico { padding: .3rem .6rem; font-size: .82rem; }

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

label { display: block; font-weight: 700; font-size: .82rem; margin-bottom: .3rem; }

input[type=text], textarea, select {
    width: 100%;
    background: #140f1c;
    border: 1px solid var(--tinta-borde);
    border-radius: 8px;
    color: var(--pergamino);
    padding: .55rem .7rem;
    font: inherit;
}
input:focus, textarea:focus, select:focus {
    outline: 2px solid var(--violeta);
    outline-offset: 1px;
    border-color: transparent;
}

textarea { resize: vertical; min-height: 70px; }

.campo { margin-bottom: .9rem; }
.fila { display: flex; gap: .9rem; }
.fila > * { flex: 1; }

.marca-check { display: flex; align-items: center; gap: .5rem; font-weight: 500; }
.marca-check input { width: auto; }

.aviso {
    background: rgba(217, 83, 79, .12);
    border: 1px solid rgba(217, 83, 79, .35);
    border-radius: 8px;
    padding: .6rem .9rem;
    margin-bottom: 1rem;
    color: #f0b3b1;
}

/* -------------------------------------------------------------------------
   La firma del panel: las preguntas agrupadas en las ventanas que Discord va
   a mostrar de verdad. Discord no admite mas de 5 campos por ventana, asi que
   verlas apiladas dice algo cierto sobre el formulario mientras lo armas.
   ------------------------------------------------------------------------- */

.pila { display: flex; flex-direction: column; gap: 1.1rem; }

.ventana {
    border: 1px solid var(--tinta-borde);
    border-radius: var(--radio);
    background: var(--tinta-alta);
    overflow: hidden;
}

.ventana-titulo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .55rem .9rem;
    background: #241d31;
    border-bottom: 1px solid var(--tinta-borde);
    font-size: .8rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pergamino-op);
}

.ventana-titulo .cupo { font-family: 'JetBrains Mono', monospace; }
.ventana-titulo .cupo.lleno { color: var(--oro); }

.pregunta {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    padding: .75rem .9rem;
    border-bottom: 1px solid rgba(47, 39, 64, .5);
    cursor: grab;
}
.pregunta:last-child { border-bottom: none; }
.pregunta:hover { background: rgba(155, 108, 242, .06); }
.pregunta.arrastrando { opacity: .4; }

.orden {
    font-family: 'JetBrains Mono', monospace;
    color: var(--violeta);
    font-size: .85rem;
    padding-top: .15rem;
    min-width: 1.6rem;
}

.pregunta-cuerpo { flex: 1; min-width: 0; }
.pregunta-texto { font-weight: 500; }
.pregunta-meta { font-size: .8rem; color: var(--pergamino-op); }

.etiqueta {
    display: inline-block;
    font-size: .72rem;
    padding: .1rem .45rem;
    border-radius: 5px;
    background: rgba(155, 108, 242, .15);
    color: var(--violeta);
    margin-right: .35rem;
}
.etiqueta.opcional { background: rgba(156, 146, 179, .15); color: var(--pergamino-op); }

.acciones { display: flex; gap: .35rem; align-items: center; }

/* El paso de imagen va afuera de la pila: no viaja en la ventana de Discord. */
.aparte {
    border: 1px dashed var(--violeta-tenue);
    border-radius: var(--radio);
    padding: .9rem;
    background: rgba(111, 75, 176, .08);
}
.aparte .nota { font-size: .82rem; color: var(--pergamino-op); margin-top: .5rem; }

.vacio {
    border: 1px dashed var(--tinta-borde);
    border-radius: var(--radio);
    padding: 2rem;
    text-align: center;
    color: var(--pergamino-op);
}

.insignia {
    font-size: .72rem;
    padding: .12rem .5rem;
    border-radius: 5px;
    background: rgba(201, 162, 39, .16);
    color: var(--oro);
    font-weight: 700;
}

/* ---------------------------------------------------------------- ingreso */

.ingreso {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 2rem;
}
.ingreso .tarjeta { max-width: 400px; text-align: center; }
.ingreso h1 { margin-bottom: .5rem; }
.ingreso p { color: var(--pergamino-op); }

/* -------------------------------------------------------------- responsive */

@media (max-width: 800px) {
    .marco { flex-direction: column; }
    .lateral { width: auto; }
    .navegacion { flex-direction: row; flex-wrap: wrap; }
    .contenido { padding: 1.25rem; }
    .fila { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------- tablero */

.tablero {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: .8rem;
}

.cifra {
    background: var(--tinta-alta);
    border: 1px solid var(--tinta-borde);
    border-left: 3px solid var(--tinta-borde);
    border-radius: var(--radio);
    padding: .9rem 1rem;
}
.cifra strong {
    display: block;
    font-family: 'Fraunces', serif;
    font-size: 1.9rem;
    line-height: 1.1;
}
.cifra span { font-size: .82rem; color: var(--pergamino-op); }

/* Lo que espera a alguien se marca; lo demas es solo informacion. */
.cifra.atencion { border-left-color: var(--oro); }
.cifra.atencion strong { color: var(--oro); }

.listado { list-style: none; margin: 0; padding: 0; }
.listado li {
    padding: .4rem 0;
    border-bottom: 1px solid rgba(47, 39, 64, .5);
    font-size: .9rem;
}
.listado li:last-child { border-bottom: none; }

.nota { font-size: .82rem; color: var(--pergamino-op); margin: .6rem 0 0; }

.aviso.exito {
    background: rgba(155, 108, 242, .12);
    border-color: rgba(155, 108, 242, .35);
    color: var(--pergamino);
}

.barra-guardar {
    position: sticky;
    bottom: 0;
    background: linear-gradient(transparent, var(--tinta) 40%);
    padding: 1rem 0;
}

/* --------------------------------------------------- anuncios y su previa */

.dos-columnas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

/* La previa imita la forma de un embed de Discord: barra de color a la
   izquierda, titulo, campos. Editar a ciegas y publicar para ver como quedo
   es justo lo que queremos evitar. */
.vista-previa {
    background: #2b2d31;
    border-left: 4px solid var(--violeta);
    border-radius: 4px;
    padding: 1rem 1.1rem;
    position: sticky;
    top: 1.5rem;
    font-size: .92rem;
}

.previa-titulo { font-weight: 700; margin-bottom: .5rem; color: #fff; }
.previa-texto { color: #dbdee1; white-space: pre-wrap; }
.previa-bloque { margin-top: .8rem; }
.previa-campo { font-weight: 700; color: #fff; margin-bottom: .1rem; }
.previa-pie {
    margin-top: .9rem;
    font-size: .78rem;
    color: #949ba4;
    border-top: 1px solid #3f4147;
    padding-top: .5rem;
}

@media (max-width: 900px) {
    .dos-columnas { grid-template-columns: 1fr; }
    .vista-previa { position: static; }
}