html {
    overflow-x: hidden;
}

body {
    background:
        linear-gradient(
            rgba(0,0,0,.72),
            rgba(0,0,0,.72)
        ),
        url("img/general/bg.png");
    background-size: 1200px auto;
    background-repeat: repeat;
    color: var(--gs-text);
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0;
    font-family:
        "Yanone Kaffeesatz",
        sans-serif !important;
    min-height: 100vh;

}

/* CABECERA */

#buscador {
    margin-left: 0;
    background: #111;
    border: 1px solid #444;
    color: white;
    padding: 10px;
    padding-right: 32px;
    font-family:
    var(--font-ui);
    font-size: 1.1rem;
    letter-spacing: 1px;
    width: 100%;
    box-sizing: border-box;
}

.buscador-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
}

.buscador-clear {
    position: absolute;
    right: 6px;
    background: none;
    border: none;
    color: #888;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
    border-radius: 4px;
    display: none;
}

.buscador-clear:hover {
    color: var(--gs-accent);
    background: rgba(255,255,255,.08);
}

.buscador-wrapper.con-texto .buscador-clear {
    display: block;
}

/* PANEL */

.detalle-evento {
    position: relative;
    /* Este panel se solapa a propósito con la parte de abajo
       de la cronología (el margen negativo de aquí abajo), así
       que necesita un z-index claramente por encima del de
       .timeline-wrapper (20) — si no, en la zona de solape
       "gana" la cronología y se traga los clics, incluido el
       del botón de cerrar. También contiene el z-index de sus
       propios hijos (como .leer-mas) para que no se escapen
       por encima de otros paneles fijos, como el editor. */
    z-index: 100;
    margin: -150px 30px 0;
    border: 1px solid
    rgba(78,10,9,.18);
    border-radius: 16px;
    display: grid;
    grid-template-columns:
    25%
    55%
    20%;
    min-height: 200px;
    border-top: 1px solid rgba(78,10,9,.25);
    background:
    linear-gradient(
        rgba(0,0,0,.70),
        rgba(0,0,0,.70)
    ),
    url("img/general/bg-tarjeta.png");

    background-size: 800px auto;
    background-repeat: repeat;
    background-position: center;
    box-shadow:
        0 20px 60px rgba(0,0,0,.78)
        inset 0 0 0 1px
        rgba(78,10,9,.05);
    overflow: visible;
        animation: abrirDetalle .35s ease;
}
        @keyframes abrirDetalle {
        from {
            opacity: 0;
            transform: translateY(25px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
}

.detalle-imagen {
    background-size: cover;
    background-position: center;
    min-height: 220px;
    position: relative;
     overflow:hidden;
    -webkit-mask-image:
        linear-gradient(
            to right,
            rgba(0,0,0,1) 55%,
            rgba(0,0,0,.85) 70%,
            rgba(0,0,0,.4) 85%,
            transparent 100%
        );
    mask-image:
        linear-gradient(
            to right,
            rgba(0,0,0,1) 55%,
            rgba(0,0,0,.85) 70%,
            rgba(0,0,0,.4) 85%,
            transparent 100%
        );
}

.detalle-imagen-overlay {
    position: absolute;
    inset: 0;
    background: #000;
    opacity: .72;
    pointer-events: none;
}

.detalle-contenido {
    padding: 35px;
    display: contents;
}

.detalle-descripcion p {
    margin-bottom: 14px;
}

/* Enlaces dentro de las descripciones: blancos, en negrita y
   subrayados (nada de azul). El hover los ilumina en dorado
   para que se vea que son clicables. */
.detalle-descripcion a,
.popup-texto a {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-shadow:
        0 0 8px rgba(255,255,255,.25);
    transition:
        color .2s ease,
        text-shadow .2s ease;
}

.detalle-descripcion a:hover,
.popup-texto a:hover {
    color: #d8c27a;
    text-shadow:
        0 0 14px rgba(216,194,122,.7);
}

.detalle-anio {
    color: var(--gs-blood);;
    font-size: 1.1rem;
    font-family: var(--font-ui);
    font-size: 1rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-shadow:
        0 0 4px rgba(243, 243, 243, 0.2);
    margin-bottom: 6px;
}

.oculto {
    display: none;
}

.conector {
    position: absolute;
    width: 2px;
    background: linear-gradient(
        to bottom,
        rgba(242,238,230,.9),
        rgba(78,10,9,.1)
    );
    z-index: 1;
    transform: translateX(-50%);
}

.punto {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--gs-text);
    border: 2px solid #1a1a1a;
    box-shadow:
        0 0 10px rgba(78,10,9,.6);
    z-index: 6;
}

/* Marcador del año 0: el evento que actúa como referencia de
   la cronología se marca con un rombo rojo, más grande y con
   un glow pulsante, en lugar del punto normal. */
.marcador-cero {
    position: absolute;
    transform: translate(-50%, -50%);
    color: var(--gs-accent);
    font-size: 26px;
    line-height: 1;
    z-index: 7;
    pointer-events: none;
    text-shadow:
        0 0 8px rgba(106,20,18,.95),
        0 0 22px rgba(106,20,18,.65),
        0 0 40px rgba(106,20,18,.35);
}

.detalle-contenido h2 {
    font-family:
        "Medici Text",
        serif;
    font-size: 2.8rem;
    font-weight: normal;
    line-height: 1;
    letter-spacing: 1px;
    margin: 2px 0 12px;
}

/* Los números romanos de los títulos de evento (p. ej. "Campaña
   del Lobo III") se componen en Yanone en lugar de Medici. */
.num-romano {
    font-family:
        "Yanone Kaffeesatz",
        sans-serif;
    font-weight: 600;
    letter-spacing: .04em;
}

.detalle-contenido p {
    color: var(--gs-textgris);
    line-height: 1.55;
    margin: 0;
    font-size: 0.95rem;
    max-width: 800px;
}

/* ==========================
   MARCAS DE TIEMPO
========================== */

#marcas-tiempo {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    pointer-events: none;
}

.marca-tiempo {
    position: absolute;
    top: 270px;
    text-align: center;
    transform: translateX(-50%);
    pointer-events: none;
}

.marca-tiempo .anio {
    color: var(--gs-text);
    font-size: 0.9rem;
    margin-top: 0;
    white-space: nowrap;
    font-family: var(--font-ui, serif);
    opacity: .9;
}

.marca-tiempo .anio.anio-cero {
    color: var(--gs-accent);
    font-size: 1.3rem;
    font-weight: 700;
    opacity: 1;
    letter-spacing: .12em;
    text-shadow:
        0 0 10px rgba(106,20,18,.7),
        0 0 26px rgba(106,20,18,.45);
}

.marca-tiempo .tick {
    width: 2px;
    height: 16px;
    background: rgba(78,10,9,.5);
    margin: auto;
}

/* ==========================
   NAVEGACIÓN TIMELINE
========================== */

/* ========================================
   MINIMAPA
======================================== */

.timeline-minimap {
    position: relative;
    width: 100%;
    max-width: 1000px;
    height: 60px;
    margin: 28px auto 40px;
    border: 1px solid rgba(78,10,9,.2);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: rgba(8,8,8,.5);
    opacity: .55;
    transition: opacity .3s ease;
    box-shadow:
        inset 0 0 20px rgba(0,0,0,.4);
}

.timeline-minimap:hover {
    opacity: 1;
}

.minimap-timeline-clone {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: top left;
    pointer-events: none;
}

.minimap-timeline-clone .evento-contenido {
    opacity: 0;
}

.minimap-timeline-clone .marca-tiempo {
    opacity: 0;
}

.minimap-timeline-clone .marcador-cero {
    display: none;
}

.minimap-viewport {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-left: 1px solid rgba(78,10,9,.7);
    border-right: 1px solid rgba(78,10,9,.7);
    pointer-events: none;
    transition: left .06s ease-out,
                width .06s ease-out;
    box-shadow:
        0 0 10px rgba(78,10,9,.15);
}

.minimap-overlay-izq,
.minimap-overlay-dch {
    position: absolute;
    top: 0;
    height: 100%;
    pointer-events: none;
    background: rgba(0,0,0,.7);
    transition: left .06s ease-out,
                width .06s ease-out;
}

.minimap-overlay-izq {
    left: 0;
}

.minimap-overlay-dch {
    right: 0;
}

.detalle-punta {
    position: absolute;
    top: -12px;
    left: 50%;
    width: 24px;
    height: 24px;
    background:
        rgba(15,15,15,.98);
    border-left:
        1px solid rgba(78,10,9,.18);
    border-top:
        1px solid rgba(78,10,9,.18);
    transform:
        translateX(-50%)
        rotate(45deg);
    z-index: 10;
}

/* ==========================   CABECERA MOCKUP   ========================== */
/* ========================================
   CRONOLOGÍA GENERAL
======================================== */
.cronologia-top {
    position: relative;
    z-index: 50;
    display: grid;
    grid-template-columns: 350px 1fr 350px;
    align-items: center;
    padding: 25px 30px 10px;
    gap: 30px;
}

.cronologia-brand h1 {
    font-family: var(--font-logo);
    font-size: 4rem;
    font-weight: normal;
    text-transform: none; /* importante */
    letter-spacing: 1px;
}

.cronologia-brand p {
    font-family: var(--font-ui);
    font-size: 1.1rem;
    margin-top: 8px;
    color: var(--gs-textgris);
}

.cronologia-filtros{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:18px;
}

.cronologia-general{
    width:100%;
    max-width:650px;
    margin:0 auto 6px;
}

.cronologia-cabecera{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    column-gap:12px;
    cursor:pointer;
    user-select:none;
    position:relative;
}

.cronologia-cabecera span{
    font-family:var(--font-ui);
    font-size:1rem;
    text-transform:uppercase;
    letter-spacing:.55em;
    color:var(--gs-text);
    white-space:nowrap;
}

#flecha-cronologia{
    margin-left:10px;
    font-size:.8rem;
    color:var(--gs-textgris);
    transition:
        transform .35s ease,
        color .25s ease;
}

#flecha-cronologia.abierta{
    transform:rotate(180deg);
}

.cronologia-busqueda {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    justify-self:end;
    position: relative;
    min-width: 0;
}

.resultados-busqueda {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 380px;
    max-width: 90vw;
    max-height: 420px;
    overflow-y: auto;
    background: #111;
    border: 1px solid rgba(78,10,9,.4);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0,0,0,.6);
    z-index: 2000;
    padding: 6px;
}

.resultados-busqueda.oculto {
    display: none;
}

.resultado-busqueda {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: 8px;
    padding: 10px 12px;
    cursor: pointer;
    color: var(--gs-text);
    font-family: var(--font-ui);
}

.resultado-busqueda:hover {
    background: rgba(78,10,9,.18);
}

.resultado-cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.resultado-titulo {
    font-weight: bold;
    font-size: .95rem;
}

.resultado-tag {
    color: var(--gs-textgris);
    font-size: .72rem;
    white-space: nowrap;
    letter-spacing: .5px;
}

.resultado-fragmento {
    margin-top: 4px;
    color: var(--gs-textgris);
    font-size: .82rem;
    line-height: 1.4;
}

.resultado-busqueda mark,
.resultado-fragmento mark {
    background: var(--gs-blood);
    color: #fff;
    border-radius: 3px;
    padding: 0 2px;
}

.resultado-vacio {
    padding: 14px;
    color: var(--gs-textgris);
    font-size: .85rem;
    text-align: center;
}

/* ========================================
   ESTADOS DE CRONOLOGÍAS
======================================== */
.eras-general{
    overflow:hidden;
    transform-origin:top;
    max-height:220px;
    opacity:1;
    transform:scaleY(1);
    transition:
        max-height .35s ease,
        opacity .25s ease,
        transform .35s ease,
        margin .35s ease;
}

.eras-caja{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;
    padding-top:18px;
}

.era-descripcion{
    max-width:540px;
    margin:14px auto 0;
    padding:0 24px 16px;
    text-align:center;
    color:var(--gs-textgris);
    font-family:var(--font-ui);
    font-size:.95rem;
    letter-spacing:.03em;
    line-height:1.5;
}

.eras-general.oculto{
    max-height:0;
    opacity:0;
    transform:scaleY(.85);
    margin-top:-8px;
}

.era-btn:hover{
    color:var(--gs-text);
}

.era-btn.activo{
    color:var(--gs-white-soft);
}

.era-btn.activo::after{
    content:"";
    position:absolute;
    left:14px;
    right:14px;
    bottom:0;
    height:18px;
    background:linear-gradient(
        to top,
        rgba(78,10,9,.9),
        rgba(78,10,9,.35),
        transparent
    );
    pointer-events:none;
}

.era-separador{
    color:rgba(255,255,255,.12);
    user-select:none;
    font-size:1.1rem;
}


/* ========================================
   GRANDES CASAS
======================================== */
.casas-selector{
    width:100%;
    max-width:650px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
}

.casas-cabecera{
    width:100%;
    max-width:650px;
    margin:2px auto 10px;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    column-gap:20px;
}

.casas-cabecera span{
    font-family:var(--font-ui);
    font-size:1rem;
    text-transform:uppercase;
    letter-spacing:.55em;
    color:var(--gs-textgris);
    padding:0 6px;
    white-space:nowrap;
}

.casas-linea{
    width:100%;
    height:1px;
    background:rgba(78,10,9,.55);
    display:block;
}
.casas-grid{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:nowrap;
    gap:12px;
    width:100%;
    max-width:900px;
    margin:0 auto;
}

.casa-btn{
    width:36px;
    height:36px;
    padding:8px;
    display:flex;
    justify-content:center;
    align-items:center;
    border:1px solid rgba(78,10,9,.25);
    border-radius:10px;
    background:rgba(8,8,8,.65);
    cursor:pointer;
    transition:all .25s ease;
    overflow:hidden;
}

.casa-btn img{
    width:25px;
    height:25px;
    object-fit:contain;
}

.casa-btn span{
    width:0;
    opacity:0;
    white-space:nowrap;
    overflow:hidden;
    transition:.25s;
}

.casa-btn:hover{
    width:170px;
    justify-content:flex-start;
    gap:12px;
    padding:0 14px;
    border-color:var(--gs-textgris);
}

.casa-btn:hover span{
    width:auto;
    opacity:1;
    color:var(--gs-text);
    font-family:var(--font-ui);
    font-size:1rem;
    text-transform:uppercase;
    letter-spacing:.30em;
}

.casa-btn.activa{
    width:145px;
    justify-content:flex-start;
    gap:12px;
    padding:0 16px;
    position:relative;
}

.casa-btn.activa::before{
    content:"";
    position:absolute;
    left:0;
    top:6px;
    bottom:6px;
    width:6px;
    border-radius:0 6px 6px 0;
    background:var(--gs-blood);
}

.casa-btn.activa span{
    width:auto;
    opacity:1;
    font-family:var(--font-ui);
    font-size:1rem;
    color:var(--gs-text);
    text-transform:uppercase;
    letter-spacing:.12em;
}

/* TIMELINE */

.timeline-wrapper {
    margin-top: 10px;
    position: relative;
    z-index: 20;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none; /* Firefox */
    cursor: grab;
}
.timeline-wrapper::-webkit-scrollbar {
    display: none; /* Chrome, Edge, Opera */
}

.timeline-scroll {
    position: relative;
    width: 4000px;
    height: 460px; /* antes 300 */
    cursor: grab;
}

.timeline-wrapper.dragging,
.timeline-wrapper.dragging * {
    cursor: grabbing !important;
    user-select: none;
}

.timeline-line {
    position: absolute;
    top: 250px;
    left: 0;
    width: 4000px;
    height: 6px;
    background: linear-gradient(
        to right,
        #180404,
        #350909,
        #4e120f,
        #350909,
        #180404
    );
    box-shadow:
        0 0 18px rgba(78,18,15,.55);
    border-radius: 999px;
    z-index: 0;
    overflow: visible;
}

.timeline-line::before,
.timeline-line::after {
    content: "◆";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(78,10,9,.85);
    font-size: 16px;
    text-shadow:
        0 0 8px rgba(78,10,9,.5);
}

.timeline-line::before {
    left: -10px;
}

.timeline-line::after {
    right: -10px;
}

#timeline {
    position: relative;
    height: 100%;
}

/* Aviso "PRÓXIMAMENTE" de las cronologías de Grandes Casas.
   Cubre toda el área de la línea de tiempo con un velo negro
   y sitúa el texto justo sobre la línea (top: 250px es donde
   nace .timeline-line), centrado en el área visible. */
.proximamente{
    position:absolute;
    inset:0;
    z-index:200;
    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.96),
            rgba(5,1,1,.93)
        );
    backdrop-filter:blur(3px);
    animation:
        aparecerProximamente .5s ease;
}

.proximamente-texto{
    position:absolute;
    top:250px;
    left:50%;
    transform:translate(-50%,-50%);
    font-family:var(--font-titulos);
    font-size:clamp(3rem, 9vw, 6.5rem);
    letter-spacing:.18em;
    color:var(--gs-text);
    opacity:.92;
    white-space:nowrap;
    text-shadow:
        0 0 30px rgba(78,10,9,.5),
        0 4px 20px rgba(0,0,0,.9);
}

@keyframes aparecerProximamente{
    from{
        opacity:0;
        transform:scale(.98);
    }
    to{
        opacity:1;
        transform:scale(1);
    }
}

/* ==========================   EVENTOS   ========================== */

.evento {
    position: absolute;
    width: 210px;
    height: 56px;
    border-radius: 8px;
    overflow: visible;
    cursor: pointer;
    border: 1px solid rgba(78,10,9,.65);
    background-size: cover;
    background-position: center;
    backdrop-filter: blur(2px);
    box-shadow:
        0 10px 25px rgba(0,0,0,.6),
        0 0 15px rgba(78,10,9,.15);
    transition:
        transform .2s ease,
        box-shadow .2s ease;
    z-index: 50;
}

.evento:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 30px rgba(78,10,9,.3);
}

/* Eventos de la fila superior (las eras): ya nacen elevados
   (mismo levantamiento que produce el hover en el resto) para
   que su triángulo no tape la tarjeta de la fila de debajo.
   Al pasarles el ratón se elevan un poco más. */
.evento.fila-superior {
    transform: translateY(-5px);
}

.evento.fila-superior:hover {
    transform: translateY(-10px);
}

.evento::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -8px;
    transform:
        translateX(-50%);

    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid rgba(78,10,9,1);
    z-index: 5;
}

.evento.periodo::before {
    display: none;
}

/* Tarjeta del evento que marca el año 0: más grande y elevada
   para que se vea como la protagonista de la escala. Sin glow
   exterior ni borde brillante: se distingue por su tamaño. */
.evento-cero {
    width: 320px !important;
    height: 68px;
    margin-left: -50px;
    margin-top: -12px;
    border: 1px solid rgba(78,10,9,.65);
    box-shadow:
        0 10px 25px rgba(0,0,0,.6),
        0 0 15px rgba(78,10,9,.15);
}

.evento-cero:hover {
    box-shadow:
        0 0 30px rgba(78,10,9,.3);
}

.marcador-periodo {
    position: absolute;
    bottom: -8px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid rgba(78,10,9,1);
    z-index: 5;
    transform: translateX(-50%);
    /* Compensa el borde de 1px de .evento: al ser hijo
       suyo, sus coordenadas absolutas se miden desde el
       padding box (1px más adentro), y sin este ajuste la
       punta del triángulo cae 1px a la derecha del conector. */
    margin-left: -1px;
}

.evento::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.85),
            rgba(0,0,0,.2),
            transparent
        );
    z-index: 1;
    border-radius: 8px;
}

.evento-overlay {
    position: absolute;
    top: -1px;
    left: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    opacity: .72;
    border-radius: 8px;
}

.evento-contenido {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 10px 12px;
    color: white;
}

.evento-anio {
    font-size: .75rem;
    margin-bottom: 4px;
    line-height: 1;
}

.evento-titulo {
    font-size: .9rem;
    line-height: 1.35;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.evento-cero .evento-contenido {
    justify-content: center;
}

.evento-cero .evento-titulo {
    font-family: var(--font-ui);
    font-size: 1.3rem;
    letter-spacing: 1px;
    text-align: center;
}

.evento.activo {
    border-color: var(--gs-textgris);
    box-shadow:
        0 0 25px rgba(241, 241, 241, 0.15),
        0 10px 30px rgba(0,0,0,.6);
    transform: translateY(-4px);
    z-index: 20;
}

.evento.buscado-coincide {
    border-color: var(--gs-blood);
    box-shadow:
        0 0 0 2px var(--gs-blood),
        0 0 20px rgba(78,10,9,.5);
    z-index: 15;
}

.evento.buscado-difuminado {
    opacity: .3;
    filter: grayscale(.4);
}

/* ==========================   PANEL MOCKUP   ========================== */

.detalle-centro {
    padding: 10px 20px 12px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.meta-item h3 i {
    color: var(--gs-blood);
    margin-right: 10px;
    font-size: 1rem;
    width: 18px;
    text-align: center;
}

.detalle-extra {
    display: grid;
    grid-template-columns:
        repeat(2, 1fr);
    margin-top: 8px;
    gap: 10px;
}

/* ==========================   METADATOS MOCKUP   ========================== */

.detalle-meta {
    border-left:
        1px solid
        rgba(78,10,9,.15);
    padding: 35px 25px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.meta-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.meta-item h3 {
    color: var(--gs-blood);
    font-size: .85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.meta-item p,
.meta-item li {
    color: var(--gs-textgris);
    line-height: 1.6;
}

/* ==========================   FIGURAS CLAVE   ========================== */

.detalle-personajes{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:12px;
}

.personaje-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:58px;
    cursor:pointer;
    transition:.25s;
    position:relative;
}

.personaje-card:hover{
    transform:translateY(-2px);
}

.personaje-avatar{
    width:42px;
    height:42px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.08);
    background-size:cover;
    background-position:center;
    background-color:#141414;
}
.personaje-avatar:hover {
    transform: scale(1.05);
    box-shadow:
        0 0 20px
        rgba(78,10,9,.45);
}

.personaje-nombre{
    display:none;
}

/* ==========================   REINOS   ========================== */

.detalle-reinos{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:12px;
}

.reino-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:58px;
}

.reino-escudo{
    width:42px;
    height:42px;
    background-image:var(--reino-escudo, none);
    background-size:70%;
    background-position:center;
    background-repeat:no-repeat;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--gs-text);
    font-size:.75rem;
}

.reino-card:hover .reino-escudo{
    background-image:var(--reino-escudo-hover, none);
}

.reino-nombre{
    margin-top:6px;
    font-size:.72rem;
    text-align:center;
    color:#fff;
}

.cerrar-detalle {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--gs-textgris);
    background: rgba(10,10,10,.8);
    color: var(--gs-textgris);
    cursor: pointer;
    z-index: 50;
    transition: .2s;
}

.cerrar-detalle:hover {
    background: rgba(78,10,9,.12);
    transform: rotate(90deg);
    box-shadow:
        0 0 12px rgba(78,10,9,.25);
}

/* ==========================
   POPUP RELATO
========================== */

.popup-relato {
    position: fixed;
    inset: 0;
    z-index:10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-fondo {
    position: absolute;
    inset: 0;
    background:
        rgba(0,0,0,.75);
    backdrop-filter: blur(4px);
}

.popup-contenido {
    position: relative;
    width: min(900px, 90vw);
    max-height: 85vh;
    overflow-y: auto;
    padding: 45px;
    background:
        linear-gradient(
            135deg,
            rgba(15,15,15,.98),
            rgba(5,5,5,.98)
        );
    border:
        1px solid
        rgba(78,10,9,.2);
    border-radius: 16px;
    z-index:10000;
    box-shadow:
        0 30px 80px
        rgba(0,0,0,.8);
        animation: abrirPopup .4s ease;
}

            @keyframes abrirPopup {

                from {
                    opacity: 0;
                    transform:
                        translateY(20px)
                        scale(.97);
                }

                to {
                    opacity: 1;
                    transform:
                        translateY(0)
                        scale(1);
                }

            }

.popup-anio {
    color: var(--gs-blood);
    letter-spacing: 3px;
    font-family:
        var(--font-ui);
}

.popup-titulo {
    margin: 12px 0 25px;
    font-size: 2.5rem;
    font-family: var(--font-logo);
    color: var(--gs-text);
    font-weight: normal;
}

.popup-texto {
    color: var(--gs-textgris);
    font-size: 1rem;
}

.cerrar-popup {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background:
        rgba(10,10,10,.8);
    border:
        1px solid
        var(--gs-textgris);
    color: var(--gs-textgris);
    cursor: pointer;
}

.leer-mas {
    margin-top: 20px;
    margin-bottom: 25px;
    background: none;
    border: none;
    color: var(--gs-text);;
    cursor: pointer;
    font-family:
        var(--font-ui);
    font-size: 1rem;
    padding: 0;
    position: relative;
    z-index: 2;
}

.leer-mas:hover {
    text-decoration: underline;
}
.popup-relato.oculto {
    display: none !important;
}
.detalle-evento.oculto {
    display: none !important;
}

.era-btn{
    background:none;
    border:none;
    color:var(--gs-textgris);
    cursor:pointer;
    padding:12px 24px;
    position:relative;
    font-family:var(--font-ui);
    font-size:1rem;
    letter-spacing:.08em;
    transition:.25s;
}

.popup-texto p {
    margin: 0 0 8px;
    line-height: 1.4;
}

/* Los diálogos (párrafos que empiezan con —) conservan un
   respiro mayor; el resto de párrafos va más compacto. */
.popup-texto p.dialogo {
    margin: 0 0 14px;
}

/* Los párrafos en blanco (pulsar Enter en Quill genera
   <p><br></p>) no deben dejar huecos descomunales: se
   colapsan a una sola línea en blanco compacta. */
.popup-texto p:empty,
.popup-texto p:has(> br:only-child),
.detalle-descripcion p:empty,
.detalle-descripcion p:has(> br:only-child) {
    margin: 0;
    line-height: 1.1;
}

.popup-texto h1,
.popup-texto h2,
.popup-texto h3,
.detalle-descripcion h1,
.detalle-descripcion h2,
.detalle-descripcion h3 {
    font-family: var(--font-logo);
    color: var(--gs-text);
    font-weight: normal;
    line-height: 1.3;
    margin: 28px 0 14px;
}

.popup-texto h1,
.detalle-descripcion h1 { font-size: 1.9rem; }

.popup-texto h2,
.detalle-descripcion h2 { font-size: 1.55rem; }

.popup-texto h3,
.detalle-descripcion h3 { font-size: 1.25rem; }

.relato-titulo {
    text-align: center;
    color: #d8c27a;
    font-size: 1.4rem;
    letter-spacing: 4px;
    margin: 40px 0 25px;
    text-transform: uppercase;
}

.frase-final {
    text-align: center;
    font-size: 1.25rem;
    color: #f3e6bb;
    font-style: italic;
    margin-top: 40px;
}

.detalle-consecuencias-destacadas {
    margin-top: 35px;
    text-align: left;
    max-width: 800px;
}

.detalle-consecuencias-destacadas h3 {
    color: var(--gs-blood);;
    text-transform: uppercase;
    font-size: 1.35rem;
    letter-spacing: 4px;
    margin-bottom: 22px;
}

.consecuencias-destacadas-lista {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 800px;
    margin: 0;
}

.consecuencia-destacada {
    color: var(--gs-textgris);
    font-size: 1rem;
    line-height: 1.6;
}

.consecuencia-destacada::before {
    content: "✢ ";
    color: var(--gs-accent);
}

strong,
b {
    color: var(--gs-text);
    font-weight: 700;
}

/* ========================================
   POPUP PERSONAJES
======================================== */

.popup-personaje-contenido{
    width:460px;
    text-align:center;
}

/* El popup de figura muestra solo la foto, sin caja: se quita
   el fondo, el borde y el sombreado que comparten los demás
   popups. El selector por id gana a los media queries que
   re-aplican padding / max-height a .popup-contenido. */
#popup-personaje .popup-contenido{
    background:none;
    border:none;
    box-shadow:none;
    padding:0;
    overflow:visible;
    max-height:none;
}

.popup-personaje-imagen{
    display:block;
    max-width:100%;
    max-height:70vh;
    margin:10px auto;
    border-radius:6px;
    box-shadow:
        0 0 30px rgba(0,0,0,.5);
}

.popup-personaje-pie{
    margin:18px 0 6px;
    font-family:var(--font-ui);
    color:var(--gs-textgris);
    font-size:.85rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    opacity:.75;
    text-align:center;
}

.popup-personaje-nombre{
    font-family:var(--font-logo);
    color:var(--gs-text);
    font-size:2rem;
    margin-bottom:20px;
}

.personaje-card::after{
    content:attr(data-nombre);
    position:absolute;
    bottom:calc(100% + 10px);
    left:50%;
    transform:translateX(-50%);
    background:
        rgba(10,10,10,.96);
    border:
        1px solid rgba(255,255,255,.08);
    padding:5px 10px;
    border-radius:8px;
    color:var(--gs-text);
    font-size:.8rem;
    white-space:nowrap;
    opacity:0;
    pointer-events:none;
    transition:.2s;
    z-index:500;
}

.personaje-card::before{
    content:"";
    position:absolute;
    bottom:calc(100% + 4px);
    left:50%;
    transform:translateX(-50%);
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    border-top:6px solid rgba(10,10,10,.96);
    opacity:0;
    transition:.2s;
}

.personaje-card:hover::before{
    opacity:1;
}

.personaje-card:hover::after{
    opacity:1;
}

/* ========================================
   BOTÓN VOLVER
======================================== */

.volver-home{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    border:1px solid rgba(78,10,9,.25);
    background:#111;
    color:var(--gs-text);
    text-decoration:none;
    transition:.25s;
}

.volver-home:hover{
    transform:translateX(-3px);
    background:rgba(78,10,9,.15);
    border-color:var(--gs-textgris);
    box-shadow:
        0 0 10px rgba(255,255,255,.08);
}

/* ========================================
   ADMIN
======================================== */
#admin-toolbar{
    display:none;
    position:absolute;
    top:30px;
    right:30px;
    z-index:999;
}

#admin-toolbar button{
    background:rgba(10,10,10,.9);
    border:1px solid rgba(78,10,9,.35);
    color:var(--gs-text);
    padding:10px 18px;
    border-radius:10px;
    font-family:var(--font-ui);
    font-size:1rem;
    cursor:pointer;
    transition:.25s;
}

#admin-toolbar button:hover{
    background:rgba(78,10,9,.18);
    border-color:var(--gs-textgris);
}

/* ========================================
   EDITOR
======================================== */

.editor-evento{
    position:fixed;
    top:0;
    right:0;
    width:430px;
    min-width:360px;
    max-width:min(900px, 90vw);
    height:100vh;
    display:flex;
    flex-direction:column;
    background:#090909;
    border-left:
        1px solid rgba(78,10,9,.25);
    box-shadow:
        -20px 0 40px rgba(0,0,0,.6);
    padding:30px;
    box-sizing:border-box;
    z-index:1500;
    transform:translateX(100%);
    transition:transform .35s ease;
}

.editor-evento.abierto{
    transform:translateX(0);
}

/* Mientras se arrastra el tirador no queremos la transición
   de apertura/cierre interfiriendo con el cambio de ancho */
.editor-evento.redimensionando{
    transition:none;
}

.editor-resize-handle{
    position:absolute;
    top:0;
    left:0;
    width:10px;
    height:100%;
    cursor:ew-resize;
    z-index:10;
    touch-action:none;
}

.editor-resize-handle::before{
    content:"";
    position:absolute;
    top:0;
    left:4px;
    width:2px;
    height:100%;
    background:rgba(78,10,9,.35);
    transition:background .2s ease;
}

.editor-resize-handle:hover::before,
.editor-resize-handle.arrastrando::before{
    background:var(--gs-accent-soft, #c9a96e);
}

.editor-header{
    margin-bottom:30px;
}

.editor-header h2{
    margin:0;
    font-family:var(--font-logo);
    font-weight:normal;
    color:var(--gs-text);
    font-size:2rem;
}

.editor-header p{
    margin-top:8px;
    color:var(--gs-textgris);
    font-size:.95rem;
}

.editor-secciones{
    flex:1;
    overflow-y:auto;
    padding-right:8px;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.editor-contenido{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:16px 4px 8px;
}

.editor-contenido.oculto{
    display:none;
}

.editor-contenido label{
    color:var(--gs-textgris);
    font-size:.82rem;
    text-transform:uppercase;
    letter-spacing:2px;
    margin-top:8px;
}

.editor-contenido input,
.editor-contenido select{
    background:#111;
    border:1px solid rgba(78,10,9,.25);
    color:var(--gs-text);
    border-radius:8px;
    padding:10px 12px;
    font-family:var(--font-ui);
    font-size:1rem;
    transition:.2s;
}

.editor-contenido input:focus,
.editor-contenido select:focus{
    outline:none;
    border-color:var(--gs-textgris);
    box-shadow:
        0 0 8px rgba(78,10,9,.25);
}

.editor-contenido input[type="color"]{
    padding:4px;
    height:42px;
    cursor:pointer;
}

/* Paleta rápida de colores de las facciones: cada botón es un
   círculo con el color de la casa. Al pulsarlo fija el color
   del evento; el selector libre de debajo sigue funcionando. */
.editor-paleta{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:6px;
}

.editor-paleta-btn{
    width:32px;
    height:32px;
    border-radius:50%;
    border:2px solid rgba(255,255,255,.18);
    cursor:pointer;
    padding:0;
    transition:.2s ease;
}

.editor-paleta-btn:hover{
    transform:scale(1.15);
    border-color:var(--gs-text);
}

.editor-paleta-btn.activo{
    border-color:var(--gs-text);
    box-shadow:
        0 0 10px rgba(255,255,255,.45);
    transform:scale(1.1);
}

.editor-colecciones{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:6px;
}

.coleccion-chip{
    padding:8px 12px;
    border:1px solid rgba(78,10,9,.25);
    border-radius:999px;
    background:#111;
    color:var(--gs-textgris);
    font-family:var(--font-ui);
    font-size:.85rem;
    cursor:pointer;
    transition:.2s ease;
}

.coleccion-chip:hover{
    border-color:var(--gs-blood);
    color:var(--gs-text);
}

.coleccion-chip.activa{
    background:var(--gs-blood);
    color:white;
    border-color:var(--gs-blood);
}

.editor-fila-simple{
    display:flex;
    gap:8px;
}

.editor-fila-simple input{
    flex:1;
}

.editor-fila-doble{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.editor-ayuda{
    color:var(--gs-textgris);
    font-size:.8rem;
    margin:-4px 0 0;
}

.editor-anadir{
    padding:10px 14px;
    background:#111;
    border:1px solid rgba(78,10,9,.25);
    color:var(--gs-text);
    border-radius:8px;
    cursor:pointer;
    font-family:var(--font-ui);
    font-size:.85rem;
    white-space:nowrap;
    transition:.2s ease;
}

.editor-anadir:hover{
    border-color:var(--gs-blood);
    background:rgba(78,10,9,.12);
}

.editor-lista-chips{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:4px;
}

.editor-lista-chips:empty{
    display:none;
}

.chip-editable{
    display:flex;
    align-items:center;
    gap:8px;
    padding:6px 8px 6px 12px;
    border:1px solid rgba(78,10,9,.25);
    border-radius:999px;
    background:#111;
    color:var(--gs-text);
    font-family:var(--font-ui);
    font-size:.82rem;
    cursor:pointer;
    transition:.2s ease;
}

.chip-editable:hover{
    border-color:var(--gs-textgris);
}

.chip-editable span{
    outline:none;
}

.chip-editable span[contenteditable="true"]{
    border-bottom:1px solid var(--gs-textgris);
    min-width:40px;
}

.chip-editable .chip-quitar{
    width:18px;
    height:18px;
    border:none;
    border-radius:50%;
    background:rgba(78,10,9,.25);
    color:var(--gs-text);
    cursor:pointer;
    line-height:1;
    font-size:.85rem;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.2s ease;
}

.chip-editable .chip-quitar:hover{
    background:var(--gs-blood);
    color:white;
}

/* Botones para reordenar las figuras clave: desplazan el chip
   al principio / final de la lista o lo suben / bajan un
   puesto. Se atenúan cuando el movimiento no es posible. */
.chip-editable .chip-mover{
    width:20px;
    height:20px;
    padding:0;
    border:none;
    border-radius:50%;
    background:rgba(78,10,9,.15);
    color:var(--gs-textgris);
    cursor:pointer;
    line-height:1;
    font-size:.7rem;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.2s ease;
}

.chip-editable .chip-mover i{
    pointer-events:none;
}

.chip-editable .chip-mover:hover:not(:disabled){
    background:rgba(78,10,9,.3);
    color:var(--gs-text);
}

.chip-editable .chip-mover:disabled{
    opacity:.3;
    cursor:default;
}

.editor-acordeon{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:#111;
    border:1px solid rgba(78,10,9,.25);
    color:var(--gs-text);
    padding:14px 16px;
    border-radius:10px;
    cursor:pointer;
    font-family:var(--font-ui);
    font-size:1rem;
    transition:.25s;
}

.editor-flecha{
    transition:
        transform .25s ease;
    color:var(--gs-textgris);
    font-size:.8rem;
}

.editor-acordeon.abierto{
    background: var(--gs-blood);
    border-color: var(--gs-blood);
    color: #fff;
    box-shadow:
        inset 4px 0 0 var(--gs-textgris);
}

.editor-acordeon.abierto .editor-flecha{
    transform:rotate(180deg);
    color: #fff;
}

.editor-acordeon:hover{
    background:
        rgba(78,10,9,.10);
    border-color:
        rgba(78,10,9,.55);
}

.editor-footer{
    margin-top:20px;
    padding-top:20px;
    border-top:
        1px solid rgba(78,10,9,.25);
    display:flex;
    flex-direction:column;
    gap:10px;
}

.editor-footer button{
    padding:14px;
    background:#111;
    border:1px solid rgba(78,10,9,.25);
    color:var(--gs-text);
    border-radius:10px;
    cursor:pointer;
    font-family:var(--font-ui);
    transition:.25s;
}

.editor-footer button:hover{
    background:rgba(78,10,9,.12);
    border-color:var(--gs-textgris);
}

.cerrar-editor{
    position:absolute;
    top:18px;
    right:18px;
    width:34px;
    height:34px;
    border-radius:50%;
    border:1px solid var(--gs-textgris);
    background:rgba(10,10,10,.8);
    color:var(--gs-text);
    cursor:pointer;
}

/* ========================================
   PREVISUALIZACIÓN DE IMÁGENES
======================================== */

.preview-panel{
    width:100%;
    /* Antes ocupaba todo el ancho del panel, y al ser 3:4
       (vertical) eso lo convertía en una imagen enorme.
       Con un max-width se mantiene la misma proporción real
       pero en un tamaño mucho más manejable. */
    max-width:190px;
    margin:0 auto;
    aspect-ratio: 3 / 4;
    border-radius:12px;
    overflow:hidden;
    border:1px solid rgba(78,10,9,.25);
    background:#111;
    cursor:grab;
    position:relative;
}

.preview-panel:active{
    cursor:grabbing;
}

.preview-panel-imagen{
    position:absolute;
    left:0;
    top:0;
    width:auto;
    height:auto;
    max-width:none;
    max-height:none;
    user-select:none;
    pointer-events:none;
    transform-origin:top left;
}

.preview-card{
    width:100%;
    /* Misma proporción que .evento (210x50), la tarjeta real
       de la cronología. Solo es exacta para eventos puntuales
       o cortos — un evento con una duración muy larga se
       dibuja más ancho en la cronología real, así que ahí el
       encuadre será aproximado, no pixel-perfect. */
    max-width:260px;
    margin:0 auto;
    aspect-ratio: 210 / 50;
    border-radius:10px;
    overflow:hidden;
    border:1px solid rgba(78,10,9,.25);
    background:#111;
    cursor:grab;
    position:relative;
}

.preview-card:active{
    cursor:grabbing;
}

.preview-card-imagen{
    position:absolute;
    left:0;
    top:0;
    width:auto;
    height:auto;
    max-width:none;
    max-height:none;
    user-select:none;
    pointer-events:none;
    transform-origin:top left;
}

/* Recorte circular del avatar de una figura clave. El recuadro
   cuadrado y el recorte circular coinciden en tamaño con los
   avatares que se dibujan en el panel de detalle, para que el
   zoom relativo al cover se traduzca igual en ambos sitios. */
.preview-figura{
    width:170px;
    height:170px;
    margin:0 auto;
    border-radius:50%;
    overflow:hidden;
    border:1px solid rgba(78,10,9,.25);
    background:#111;
    cursor:grab;
    position:relative;
}

.preview-figura:active{
    cursor:grabbing;
}

.preview-figura-imagen{
    position:absolute;
    left:0;
    top:0;
    width:auto;
    height:auto;
    max-width:none;
    max-height:none;
    user-select:none;
    pointer-events:none;
    transform-origin:top left;
}

.figura-editor-contenido{
    width:min(420px, 90vw);
}

.figura-editor-titulo{
    text-align:center;
    margin-bottom:18px;
    font-family:var(--font-titulos);
    letter-spacing:.06em;
    color:var(--gs-text);
}

.figura-editor-guardar{
    width:100%;
    margin-top:18px;
}

.editor-ayuda{
    margin-top:10px;
    font-size:.8rem;
    color:var(--gs-textgris);
    opacity:.8;
}

.editor-reset{
    background:#111;
    border:1px solid rgba(78,10,9,.25);
    color:var(--gs-text);
    padding:10px;
    border-radius:8px;
    cursor:pointer;
    font-family:var(--font-ui);
    transition:.25s;
}

.editor-reset:hover{
    background:rgba(78,10,9,.12);
    border-color:var(--gs-textgris);
}

.preview-overlay{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    pointer-events:none;
    color:var(--gs-text);
    font-size:.85rem;
    letter-spacing:.08em;
    opacity:.75;
    transition:.2s;
}

.preview-overlay::before{
    content:"Arrastra para mover";
    background:rgba(0,0,0,.60);
    padding:8px 14px;
    border-radius:999px;
}

.preview-panel:hover .preview-overlay,
.preview-card:hover .preview-overlay,
.preview-figura:hover .preview-overlay{
    opacity:1;
}

.preview-reset{
    position:absolute;
    top:10px;
    right:10px;
    width:30px;
    height:30px;
    border:none;
    border-radius:50%;
    background:rgba(10,10,10,.8);
    color:var(--gs-text);
    cursor:pointer;
    z-index:20;
    transition:.2s;
}

.preview-reset:hover{
    background:var(--gs-blood);
    transform:rotate(180deg);
}

/* ========================================
   SLIDERS DEL EDITOR
======================================== */

.editor-contenido input[type="range"]{
    -webkit-appearance:none;
    appearance:none;
    width:100%;
    height:6px;
    border-radius:999px;
    background:
        linear-gradient(
            to right,
            rgba(78,10,9,.95),
            rgba(78,10,9,.45)
        );
    outline:none;
    margin:10px 0 18px;
}

.editor-contenido input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:18px;
    height:18px;
    border-radius:50%;
    background:var(--gs-text);
    border:2px solid var(--gs-blood);
    cursor:pointer;
    transition:
        transform .15s ease;
}

.editor-contenido input[type="range"]::-webkit-slider-thumb:hover{
    transform:scale(1.18);
}

.editor-contenido input[type="range"]::-moz-range-thumb{
    width:18px;
    height:18px;
    border:none;
    border-radius:50%;
    background:var(--gs-text);
    cursor:pointer;
}

/* ========================================
   EDITOR · REINOS
======================================== */

.editor-reinos{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.editor-reino{
    width:170px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:12px;
    padding:0 14px;
    border:1px solid rgba(78,10,9,.25);
    border-radius:10px;
    background:rgba(8,8,8,.65);
    cursor:pointer;
    transition:.2s ease;
}

.editor-reino img{
    width:30px;
    height:30px;
    object-fit:contain;
    flex-shrink:0;
}

.editor-reino span{
    font-family:var(--font-ui);
    font-size:1rem;
    color:var(--gs-text);
    text-transform:uppercase;
    letter-spacing:.15em;
}

.editor-reino.activo{
    border-color:var(--gs-accent);
    background:rgba(78,10,9,.18);
}

/* ==========================================
   QUILL
========================================== */

.ql-toolbar.ql-snow{
    background:#141414;
    border:1px solid var(--gs-border-red);
    border-bottom:none;
    border-radius:8px 8px 0 0;
}

.ql-container.ql-snow{
    background:#0c0c0c;
    border:1px solid var(--gs-border-red);
    border-radius:0 0 8px 8px;
    min-height:180px;
}

.ql-editor{
    color:var(--gs-text);
    font-family:inherit;
    font-size:15px;
    line-height:1.6;
}

.ql-editor.ql-blank::before{
    color:#777;
    font-style:italic;
}

/* El editor "Relato continuación" replica el espaciado que se
   ve en el popup del relato (párrafos compactos, diálogos con
   más aire y líneas en blanco colapsadas). Solo aplica a este
   editor: la descripción mantiene su espaciado normal. */
#editor-continuacion .ql-editor p{
    margin:0 0 8px;
    line-height:1.4;
}

#editor-continuacion .ql-editor p.dialogo{
    margin:0 0 14px;
}

#editor-continuacion .ql-editor p:empty,
#editor-continuacion .ql-editor p:has(> br:only-child){
    margin:0;
    line-height:1.1;
}

/* ==========================================
   BOTONES QUILL
========================================== */

.ql-toolbar button{
    width:30px;
    height:30px;
    margin:2px;
    border-radius:6px;
    transition:.18s;
}

.ql-toolbar button:hover{
    background:rgba(106,20,18,.35);
}

.ql-toolbar button.ql-active{
    background:var(--gs-accent);
}

.ql-toolbar button svg{
    width:18px;
    height:18px;
}

.ql-toolbar .ql-stroke{
    stroke:#cfcfcf;
}

.ql-toolbar .ql-fill{
    fill:#cfcfcf;
}

.ql-toolbar button:hover .ql-stroke,
.ql-toolbar button.ql-active .ql-stroke{
    stroke:white;
}

.ql-toolbar button:hover .ql-fill,
.ql-toolbar button.ql-active .ql-fill{
    fill:white;
}

/* Separación entre grupos */

.ql-formats{
    margin-right:14px !important;
}

/* El selector desplegable */

.ql-toolbar .ql-picker{
    color:var(--gs-text);
}

.ql-toolbar .ql-picker-label{
    color:var(--gs-text);
}

.ql-toolbar .ql-picker-options{
    background:#161616;
    border:1px solid var(--gs-border-red);
}

.ql-editor.ql-blank::before{
    color:#777 !important;
    font-style:italic;
}

.ql-editor{
    color:#d4d4d4 !important;
}

/* ==========================================
   ADMIN DEL PANEL DE DETALLE
========================================== */

#admin-detalle{
    display:none;
    grid-column: 1 / -1;
    display:none;
    justify-content:center;
    align-items:center;
    gap:18px;
    width:100%;
    padding:26px 0 30px;
    border-top:1px solid rgba(255,255,255,.08);
}

#admin-detalle button{
    cursor:pointer;
    padding:12px 26px;
    border:none;
    border-radius:2px;
    background:var(--gs-blood);
    font-family:var(--font-ui);
    color:var(--gs-text);
    text-transform:uppercase;
    letter-spacing: 3px;
    font-size:15px;
    transition:.2s;
}

#admin-detalle button:hover{
    background:#7b1d1d;
}

/* ========================================
   SCROLLBAR ROJO
======================================== */

::-webkit-scrollbar{
    width:10px;
    height:10px;
}

::-webkit-scrollbar-track{
    background:#080808;
}

::-webkit-scrollbar-thumb{
    background:var(--gs-accent);
    border-radius:20px;
    border:2px solid #080808;
    transition:.2s;
}

::-webkit-scrollbar-thumb:hover{
    background:var(--gs-accent-soft);
}

::-webkit-scrollbar-corner{
    background:#080808;
}

/* ========================================
   RESPONSIVE
======================================== */

/* ── HEADER EN DESKTOP ESTRECHO (1001–1240px) ──
   La cabecera de escritorio (350px 1fr 350px) se desborda
   por la derecha cuando falta sitio para las eras: el buscador
   se sale del límite y el centro queda descentrado. Aquí se usa
   la cabecera responsiva (marca más pequeña) sin tocar el resto
   del layout de escritorio (panel de evento, popups, etc.). */
@media (min-width: 1001px) and (max-width: 1240px) {

    .cronologia-top {
        grid-template-columns: minmax(0,auto) minmax(0,1fr) minmax(0,auto);
        gap: 12px;
        padding: 15px 16px 8px;
    }

    .cronologia-brand h1 {
        font-size: 2.2rem;
    }

    .cronologia-brand p {
        font-size: .78rem;
    }
}

/* ── TABLET / LANDSCAPE ────────────────── */
@media (max-width: 1000px) {

    .cronologia-top {
        grid-template-columns: minmax(0,auto) minmax(0,1fr) minmax(0,auto);
        gap: 12px;
        padding: 15px 16px 8px;
    }

    .cronologia-brand h1 {
        font-size: 2.2rem;
    }

    .cronologia-brand p {
        font-size: .78rem;
    }

    .cronologia-general {
        max-width: 100%;
    }

    .detalle-evento {
        margin: -80px 16px 0;
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .detalle-imagen {
        min-height: 160px;
        -webkit-mask-image: none;
        mask-image: none;
        border-radius: 16px 16px 0 0;
    }

    .detalle-contenido {
        padding: 24px;
    }

    .detalle-contenido h2 {
        font-size: 2rem;
    }

    .detalle-meta {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        border-left: none;
        border-top: 1px solid rgba(78,10,9,.15);
        padding: 20px 24px;
    }

    .detalle-extra {
        grid-template-columns: repeat(2, 1fr);
    }

    .popup-contenido {
        padding: 30px;
    }

    .popup-titulo {
        font-size: 2rem;
    }

    .editor-evento {
        width: 360px;
        min-width: 300px;
    }
}

/* ── CABECERA EN DOS FILAS (tablet estrecha) ── */
@media (max-width: 900px) {

    .cronologia-top {
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "brand . busqueda"
            "filtros filtros filtros";
    }

    .cronologia-brand { grid-area: brand; }
    .cronologia-filtros { grid-area: filtros; }
    .cronologia-busqueda { grid-area: busqueda; }
}

/* ── MOBILE / PORTRAIT ─────────────────── */
@media (max-width: 640px) {

    .cronologia-top {
        grid-template-columns: 1fr;
        grid-template-areas:
            "brand"
            "busqueda"
            "filtros";
        gap: 10px;
        padding: 12px 12px 6px;
    }

    .cronologia-brand {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .cronologia-brand h1 {
        font-size: 1.8rem;
        margin: 0;
    }

    .cronologia-brand p {
        display: none;
    }

    .cronologia-filtros {
        gap: 10px;
    }

    .cronologia-busqueda {
        width: 100%;
    }

    .buscador-wrapper {
        flex: 1;
    }

    #buscador {
        font-size: 1rem;
        padding: 8px 28px 8px 10px;
    }

    .volver-home {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
    }

    .cronologia-cabecera span,
    .casas-cabecera span {
        font-size: .9rem;
        letter-spacing: .4em;
    }

    .eras-caja {
        gap: 10px;
    }

    .era-btn {
        font-size: .85rem;
        padding: 6px 12px;
    }

    .era-separador {
        font-size: .9rem;
    }

    .casas-cabecera {
        max-width: 100%;
        padding: 0 8px;
    }

    .casas-grid {
        flex-wrap: wrap;
        gap: 8px;
        padding: 0 8px;
    }

    .casa-btn {
        width: 32px;
        height: 32px;
    }

    .casa-btn:hover,
    .casa-btn.activa {
        width: 32px;
        padding: 8px;
    }

    .casa-btn:hover span,
    .casa-btn.activa span {
        display: none;
    }

    .timeline-wrapper {
        margin-top: 6px;
    }

    .timeline-minimap {
        height: 45px;
        margin: 16px 8px 24px;
    }

    .detalle-evento {
        margin: -40px 8px 0;
        border-radius: 12px;
    }

    .detalle-imagen {
        min-height: 120px;
        border-radius: 12px 12px 0 0;
    }

    .detalle-contenido {
        padding: 16px;
    }

    .detalle-contenido h2 {
        font-size: 1.3rem;
    }

    .detalle-contenido p {
        font-size: .88rem;
    }

    .detalle-meta {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .detalle-extra {
        grid-template-columns: 1fr;
    }

    .meta-item h3 {
        font-size: .78rem;
    }

    .cerrar-detalle {
        width: 30px;
        height: 30px;
        top: 10px;
        right: 10px;
    }

    .personaje-card {
        width: 48px;
    }

    .personaje-avatar {
        width: 36px;
        height: 36px;
    }

    .personaje-card::after {
        display: none;
    }

    .reino-card {
        width: 48px;
    }

    .reino-escudo {
        width: 36px;
        height: 36px;
    }

    .popup-contenido {
        width: 95vw;
        padding: 20px;
        max-height: 90vh;
    }

    .popup-titulo {
        font-size: 1.6rem;
    }

    .popup-texto h1 {
        font-size: 1.3rem;
    }

    .popup-texto h2 {
        font-size: 1.1rem;
    }

    .popup-texto h3 {
        font-size: 1rem;
    }

    .popup-texto p {
        font-size: .92rem;
        line-height: 1.5;
    }

    .popup-personaje-contenido {
        width: min(320px, 90vw);
    }

    .popup-personaje-imagen {
        max-height: 60vh;
    }

    .popup-personaje-nombre {
        font-size: 1.5rem;
    }

    .editor-evento {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        border-left: none;
        border-top: 1px solid rgba(78,10,9,.25);
    }

    .editor-resize-handle {
        display: none;
    }

    .resultado-busqueda {
        width: calc(100vw - 24px);
        max-width: 380px;
    }

    .leer-mas {
        font-size: .85rem;
    }

    .evento {
        width: 170px;
        height: 44px;
    }

    .evento-contenido {
        flex-direction: row;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
    }

    .evento-anio {
        font-size: .65rem;
        margin-bottom: 0;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .evento-titulo {
        font-size: .75rem;
        flex: 1;
        min-width: 0;
    }

    .marca-tiempo .anio {
        font-size: .75rem;
    }
}

/* ── MÓVIL PEQUEÑO ─────────────────────── */
@media (max-width: 400px) {

    .cronologia-brand h1 {
        font-size: 1.4rem;
    }

    .cronologia-top {
        padding: 8px 10px 4px;
    }

    .eras-caja {
        gap: 8px;
    }

    .era-btn {
        padding: 5px 10px;
    }

    .detalle-evento {
        margin: -20px 6px 0;
    }

    .detalle-contenido h2 {
        font-size: 1.15rem;
    }

    .popup-contenido {
        padding: 16px;
        border-radius: 10px;
    }

    .popup-titulo {
        font-size: 1.3rem;
    }

    .popup-texto p {
        font-size: .9rem;
    }

    .evento {
        width: 150px;
        height: 40px;
    }

    .evento-titulo {
        font-size: .68rem;
        -webkit-line-clamp: 1;
        line-clamp: 1;
    }

    .evento-cero .evento-titulo {
        font-size: 1rem;
    }

    .timeline-minimap {
        height: 40px;
        margin: 12px 6px 18px;
    }
}

/* ── TOUCH: evitar hover sticky ────────── */
@media (hover: none) {

    .casa-btn:hover {
        width: 32px;
        padding: 8px;
        border-color: rgba(78,10,9,.25);
    }

    .casa-btn:hover span {
        width: 0;
        opacity: 0;
    }

    .casa-btn.activa {
        width: auto;
        padding: 0 14px;
    }

    .casa-btn.activa span {
        display: flex;
        width: auto;
        opacity: 1;
    }

    .personaje-card::after {
        display: none;
    }
}

/* ── LANDSCAPE EN MÓVIL ────────────────── */
@media (max-height: 500px) and (orientation: landscape) {

    .detalle-evento {
        margin-top: -20px;
    }

    .detalle-imagen {
        min-height: 100px;
    }

    .popup-contenido {
        max-height: 95vh;
        padding: 16px;
    }
}