@font-face {
    font-family: 'Trajan-ish';
  }
  :root{
    --pergamino: #ede4d3;
    --pergamino2: #e2d5bd;
    --piedra: #cabb9c;
    --bronce: #8a6d3b;
    --bronce-dark: #5e4a26;
    --purpura: #5c1a2b;
    --purpura-dark: #3d0f1c;
    --tinta: #2b2117;
    --tinta-suave: #574a3a;
    --oro: #a9762f;
  }
  body.byz-theme{
    --pergamino: #f6ecd8;
    --pergamino2: #efdfbb;
    --piedra: #ddc48f;
    --bronce: #9c1c2b;
    --bronce-dark: #6e1019;
    --purpura: #6a2280;
    --purpura-dark: #3d1350;
    --tinta: #2a1620;
    --tinta-suave: #5a3a4d;
    --oro: #c9982c;
  }
  body{ transition: background-color 0.3s; }
  *{box-sizing:border-box;}
  html,body{
    margin:0;padding:0;
    background: var(--pergamino);
    color: var(--tinta);
    font-family: Georgia, 'Times New Roman', serif;
  }
  body{
    background-image:
      radial-gradient(ellipse at top left, rgba(255,255,255,0.25), transparent 60%),
      radial-gradient(ellipse at bottom right, rgba(0,0,0,0.06), transparent 60%);
  }
  .wrap{max-width:1000px;margin:0 auto;padding:28px 20px 80px;}

  .start-screen{
    min-height: 100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 40px 20px;
  }
  .start-box{
    max-width: 780px;
    width: 100%;
    background: #fbf6ec;
    border: 1px solid var(--bronce);
    border-radius: 6px;
    padding: 36px 40px 40px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
    text-align: center;
  }
  .start-eyebrow{
    letter-spacing: 0.35em;
    font-size: 12px;
    color: var(--purpura);
    text-transform: uppercase;
    margin: 0 0 8px;
    font-family: Georgia, serif;
  }
  .start-title{
    font-family: 'Cinzel', Georgia, serif;
    font-size: 34px;
    font-weight: normal;
    letter-spacing: 0.02em;
    margin: 0 0 10px;
    color: var(--purpura-dark);
  }
  .start-subtitle{
    color: var(--tinta-suave);
    font-size: 15px;
    font-style: italic;
    margin: 0 0 26px;
    padding-bottom: 22px;
    border-bottom: 3px double var(--bronce);
  }
  .start-story{
    text-align: left;
    margin: 0 0 30px;
  }
  .start-story-text p{
    font-size: 14.5px;
    line-height: 1.72;
    color: var(--tinta);
    margin: 0 0 14px;
  }
  .start-story-text p:last-child{ margin-bottom: 0; }
  .start-cta{
    font-family: 'Cinzel', Georgia, serif;
    color: var(--purpura-dark);
    font-size: 15px;
    letter-spacing: 0.03em;
    margin: 0 0 16px;
  }
  .start-choices{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
  }
  .start-choice{
    background: var(--pergamino);
    border: 1px solid var(--bronce);
    border-radius: 6px;
    padding: 14px 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-family: inherit;
    transition: background 0.2s, box-shadow 0.2s;
  }
  .start-choice:hover, .start-choice:focus-visible{
    background: var(--pergamino2);
    box-shadow: 0 0 8px var(--oro);
  }
  .start-choice-icon{
    font-size: 24px;
    line-height: 1;
    margin-bottom: 2px;
  }
  .start-choice-title{
    font-family: 'Cinzel', Georgia, serif;
    font-size: 14px;
    color: var(--purpura-dark);
    letter-spacing: 0.03em;
  }
  .start-choice-sub{
    font-size: 11.5px;
    color: var(--tinta-suave);
    font-style: italic;
  }
  @media (max-width: 480px){
    .start-box{ padding: 24px 18px 28px; }
    .start-title{ font-size: 24px; }
    .start-choices{ grid-template-columns: 1fr 1fr; }
  }

  .icon-row{
    display:flex;
    align-items:center;
    justify-content:center;
    justify-content:safe center;
    gap: 18px;
    flex-wrap: wrap;
    padding-bottom: 2px;
    margin: 0 0 22px;
  }
  .icon-tooltip{
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
  }
  .icon-tooltip::after{
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--pergamino);
    border: 1px solid var(--bronce);
    color: var(--purpura-dark);
    font-family: 'Cinzel', Georgia, serif;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 5px 10px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s, transform 0.15s;
    z-index: 20;
  }
  .icon-tooltip:hover::after, .icon-tooltip:focus-within::after{
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  .header-flank-icon{
    flex: 0 0 auto;
    height: 130px;
    width: auto;
    border-radius: 4px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
    opacity: 0.9;
  }
  .cruz-icon, .estandarte-icon, .admin-icon, .pagan-icon, .economia-icon, .politica-icon{
    cursor: pointer;
    transition: opacity 0.2s, filter 0.2s;
  }
  .cruz-icon:hover, .cruz-icon:focus-visible,
  .estandarte-icon:hover, .estandarte-icon:focus-visible,
  .admin-icon:hover, .admin-icon:focus-visible,
  .pagan-icon:hover, .pagan-icon:focus-visible,
  .economia-icon:hover, .economia-icon:focus-visible,
  .politica-icon:hover, .politica-icon:focus-visible{
    opacity: 1;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2)) drop-shadow(0 0 6px var(--oro));
  }

  /* Modal informativo (cruz cristiana / estandarte legionario) */
  .modal-overlay{
    display:none;
    position: fixed;
    inset: 0;
    background: rgba(20,14,8,0.55);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
  .modal-overlay.open{ display:flex; }
  .modal-box{
    background: var(--pergamino);
    border: 1px solid var(--bronce);
    border-radius: 6px;
    max-width: 640px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    padding: 26px 28px 22px;
    position: relative;
    box-shadow: 0 8px 30px rgba(0,0,0,0.35);
  }
  .modal-box h3{
    font-family: 'Cinzel', Georgia, serif;
    color: var(--purpura-dark);
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 2px double var(--bronce);
    letter-spacing: 0.03em;
  }
  .modal-body p{
    font-size: 14px;
    line-height: 1.65;
    color: var(--tinta);
    margin: 0 0 14px;
  }
  .modal-body p:last-child{ margin-bottom: 0; }
  .latin-trans{
    display: block;
    font-size: 12.5px;
    font-style: italic;
    color: var(--tinta-suave);
  }
  .modal-row{
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0 0 14px;
  }
  .modal-row p{ margin: 0; flex: 1; }
  .modal-figure-group{
    flex: 0 0 auto;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 84px;
  }
  .modal-figure{
    width: 84px;
    height: 84px;
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid var(--oro);
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  }
  .modal-figure-group figcaption{
    font-family: 'Cinzel', Georgia, serif;
    font-size: 11px;
    line-height: 1.3;
    text-align: center;
    color: var(--tinta-suave);
    letter-spacing: 0.02em;
  }
  @media (max-width: 480px){
    .modal-row{ flex-direction: column; align-items: center; gap: 8px; }
    .modal-figure-group{ width: 100px; }
    .modal-figure{ width: 100px; height: 100px; }
  }
  .modal-map-figure{
    flex: 0 0 auto;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 170px;
    max-width: 42%;
  }
  .modal-map-figure img{
    width: 100%;
    height: auto;
    border-radius: 6px;
    border: 2px solid var(--oro);
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
    cursor: zoom-in;
    transition: filter 0.2s;
  }
  .modal-map-figure img:hover, .modal-map-figure img:focus-visible{
    filter: drop-shadow(0 0 6px var(--oro));
  }
  .modal-map-figure figcaption{
    font-family: 'Cinzel', Georgia, serif;
    font-size: 11px;
    line-height: 1.3;
    text-align: center;
    color: var(--tinta-suave);
    letter-spacing: 0.02em;
  }
  @media (max-width: 480px){
    .modal-map-figure{ width: 140px; max-width: 70%; }
  }
  .legiones-figure{
    margin: 4px 0 16px;
    text-align: center;
  }
  .figure-subtitle{
    font-family: 'Cinzel', Georgia, serif;
    color: var(--purpura-dark);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin: 0 0 8px;
  }
  .legiones-img{
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    border: 1px solid var(--bronce);
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    cursor: zoom-in;
    transition: filter 0.2s;
  }
  .legiones-img:hover, .legiones-img:focus-visible{
    filter: drop-shadow(0 0 6px var(--oro));
  }
  .lightbox-overlay{ z-index: 1100; padding: 16px; cursor: zoom-out; }
  .lightbox-content{
    position: relative;
    max-width: 96vw;
    max-height: 92vh;
    line-height: 0;
  }
  .lightbox-content img{
    max-width: 96vw;
    max-height: 92vh;
    width: auto;
    height: auto;
    display: block;
    border-radius: 4px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.5);
  }
  .lightbox-content .modal-close{
    top: -14px;
    right: -14px;
    background: var(--pergamino);
  }
  .legiones-figure figcaption{
    margin-top: 6px;
    font-size: 11px;
    color: var(--tinta-suave);
  }
  .legiones-figure figcaption a{ color: var(--tinta-suave); }
  .modal-close{
    position: absolute;
    top: 14px;
    right: 14px;
    background: none;
    border: 1px solid var(--bronce);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    line-height: 1;
    cursor: pointer;
    color: var(--tinta-suave);
    font-size: 14px;
  }
  .modal-close:hover{ background: var(--piedra); }
  @media (max-width: 480px){
    .modal-box{ padding: 20px 18px 16px; }
    .modal-body p{ font-size: 13px; }
  }

  header{
    text-align:center;
    padding: 10px 0 26px;
    border-bottom: 3px double var(--bronce);
    margin-bottom: 22px;
  }
  .eyebrow{
    letter-spacing: 0.35em;
    font-size: 12px;
    color: var(--purpura);
    text-transform: uppercase;
    margin: 0 0 8px;
    font-family: Georgia, serif;
    cursor: pointer;
    display: inline-block;
    transition: color 0.2s;
  }
  .eyebrow:hover, .eyebrow:focus-visible{
    color: var(--oro);
  }
  .subtitle{
    color: var(--tinta-suave);
    font-size: 15px;
    font-style: italic;
    margin: 0 0 10px;
  }
  .games-row{
    margin: 0 0 6px;
  }
  .top-btn-emoji{
    height: 90px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size: 48px;
    line-height: 1;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.15));
    opacity: 0.55;
    transition: opacity 0.2s;
  }
  .top-btn:hover .top-btn-emoji{ opacity: 0.8; }
  .top-btn.games.open{ background: var(--pergamino2); }
  .top-btn.games.open .top-btn-emoji{ opacity: 1; }
  .top-btn.games.open .top-btn-label{ color: var(--purpura-dark); font-weight:bold; }
  .romandle-links{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap: 10px;
    margin: 0 0 14px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.25s ease, opacity 0.2s ease, margin 0.25s ease;
  }
  .romandle-links.open{
    max-height: 300px;
    opacity: 1;
  }
  .romandle-link{
    display:inline-block;
    max-width: min(340px, 88vw);
    margin: 0;
    padding: 6px 16px;
    border: 1px solid var(--bronce);
    border-radius: 20px;
    background: var(--pergamino2);
    color: var(--purpura-dark);
    font-family: 'Cinzel', Georgia, serif;
    font-size: 12px;
    letter-spacing: 0.05em;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    transition: background 0.2s, box-shadow 0.2s, color 0.2s;
  }
  .romandle-link:hover, .romandle-link:focus-visible{
    background: var(--oro);
    color: #fff;
    box-shadow: 0 0 8px var(--oro);
  }
  .title-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 0 0 6px;
  }
  .title-divider{
    width: 1px;
    height: 90px;
    background: var(--bronce);
    opacity: 0.4;
  }
  .top-btn{
    flex: 0 0 auto;
    background: none;
    border: none;
    padding: 8px 14px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
  }
  .top-btn img{
    height: 90px;
    width: auto;
    display:block;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.15));
    opacity: 0.55;
    transition: opacity 0.2s;
  }
  .top-btn:hover img{ opacity: 0.8; }
  .top-btn .top-btn-label{
    font-family: 'Cinzel', Georgia, serif;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tinta-suave);
  }
  .top-btn:hover{ background: var(--pergamino2); }
  .top-btn.active{ background: var(--pergamino2); }
  .top-btn.active img{ opacity: 1; }
  .top-btn.active .top-btn-label{ color: var(--purpura-dark); font-weight:bold; }
  @media (max-width: 480px){
    .title-row{ gap:8px; }
    .top-btn img{ height:60px; }
    .top-btn-emoji{ height:60px; font-size:32px; }
    .top-btn .top-btn-label{ font-size:10px; }
    .title-divider{ height:60px; }
    .romandle-links{ flex-direction: column; align-items: center; }
  }

  /* Conflictos bélicos (sección colapsable, arriba de la barra de eras) */
  .conflicts-box{
    max-width: 900px;
    margin: 0 auto 22px;
    border: 1px solid var(--bronce);
    border-radius: 3px;
    background: #f3ecdd;
  }
  .conflicts-box summary{
    cursor: pointer;
    list-style: none;
    padding: 12px 18px;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--purpura-dark);
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .conflicts-box summary::-webkit-details-marker{ display:none; }
  .conflicts-box summary::after{
    content: '▾';
    font-size: 12px;
    transition: transform 0.2s;
  }
  .conflicts-box[open] summary::after{ transform: rotate(180deg); }
  .conflicts-box summary:hover{ background: var(--piedra); }
  .conflicts-inner{
    padding: 4px 18px 18px;
    max-height: 480px;
    overflow-y: auto;
    border-top: 1px solid var(--piedra);
  }
  .conflicts-inner h4{
    font-family: 'Cinzel', Georgia, serif;
    font-size: 14px;
    color: var(--purpura-dark);
    margin: 18px 0 8px;
    letter-spacing: 0.04em;
  }
  .conflicts-inner h4:first-child{ margin-top: 14px; }
  .conflicts-inner h5{
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 12.5px;
    color: var(--tinta-suave);
    margin: 8px 0 4px;
    letter-spacing: 0.02em;
  }
  .conflicts-inner .conflicts-note{
    font-size: 12px;
    font-style: italic;
    color: var(--tinta-suave);
    margin: 6px 0 0;
  }
  .conflicts-inner .conflicts-hint{
    font-size: 11.5px;
    font-style: italic;
    color: var(--tinta-suave);
    margin: 6px 0 10px;
  }
  .conflicts-table{
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    line-height: 1.5;
  }
  .conflicts-table th{
    text-align:left;
    background: var(--pergamino2);
    padding: 6px 8px;
    border: 1px solid var(--piedra);
    font-weight:bold;
    color: var(--tinta);
  }
  .conflicts-table td{
    padding: 6px 8px;
    border: 1px solid var(--piedra);
    vertical-align: top;
    color: var(--tinta);
  }
  .conflicts-table td.years{ white-space:nowrap; }
  .conflicts-table tr.war-row{ cursor: pointer; }
  .conflicts-table tr.war-row:hover td{ background: var(--pergamino2); }
  .conflicts-table tr.war-row:focus-visible td{ outline: 2px solid var(--oro); outline-offset: -2px; }
  .conflicts-table tr.war-row td:first-child{ text-decoration: underline dotted; text-underline-offset: 2px; }
  @media (max-width: 640px){
    .conflicts-table{ font-size: 11px; }
    .conflicts-inner{ max-height: 380px; }
  }

  /* Modal de detalle de guerras/conflictos */
  .guerra-modal-meta{
    font-size: 12.5px;
    font-style: italic;
    color: var(--tinta-suave);
    margin: 0 0 12px !important;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--piedra);
  }

  /* Retrato / avatar de iniciales */
  .titulo-row{
    display:flex;
    align-items:center;
    gap:14px;
    margin: 4px 0 10px;
  }
  .portrait-circle{
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family: 'Cinzel', Georgia, serif;
    font-weight: bold;
    font-size: 18px;
    color: #f6ecd8;
    border: 2px solid var(--oro);
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
  }
  .portrait-circle.hidden{ display:none; }
  .portrait-circle img{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.2s;
  }
  .titulo-row h2{ margin: 0; }
  @media (max-width: 480px){
    .portrait-circle{ width:44px; height:44px; font-size:15px; }
  }
  .portrait-mini-group{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
  }
  .portrait-mini-group.hidden{ display:none; }
  .portrait-mini-group .portrait-circle{
    width: 48px;
    height: 48px;
    font-size: 15px;
  }
  .portrait-mini-group .portrait-circle .portrait-abbr{
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0.02em;
  }
  .portrait-mini-caption{
    font-size: 13px;
    font-family: 'Cinzel', Georgia, serif;
    color: var(--oro, #b8935a);
    letter-spacing: 0.03em;
    white-space: nowrap;
  }

  /* Era tabs */
  .eras{
    display:flex;
    gap:0;
    justify-content:center;
    margin: 0 0 30px;
    border: 1px solid var(--bronce);
    border-radius: 3px;
    overflow:hidden;
    max-width: 720px;
    margin-left:auto;margin-right:auto;
  }
  .era-btn{
    flex:1;
    background: var(--pergamino2);
    border:none;
    border-right: 1px solid var(--bronce);
    padding: 14px 10px;
    font-family: Georgia, serif;
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tinta-suave);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
  }
  .era-btn:last-child{border-right:none;}
  .era-btn:hover{ background: var(--piedra); }
  .era-btn.active{
    background: var(--purpura-dark);
    color: #f1e6d8;
  }
  .era-sub{
    display:block;
    font-size:11px;
    font-weight:normal;
    letter-spacing:0.03em;
    opacity:0.8;
    margin-top:3px;
    text-transform:none;
    font-style: italic;
  }

  /* Timeline rail */
  .rail-container{
    position:relative;
    margin: 0 0 20px;
  }
  .rail-scroll{
    overflow-x:auto;
    padding: 10px 4px 22px;
  }
  .rail{
    position:relative;
    display:flex;
    align-items:flex-end;
    min-width: max-content;
    padding: 30px 10px 0;
  }
  .rail.has-groups{ padding-top: 64px; }
  .rail-groups-svg{
    position:absolute;
    top:0; left:0;
    overflow:visible;
    pointer-events:none;
  }
  .rail-brace-path{
    fill:none;
    stroke: var(--bronce);
    stroke-width:1.5;
  }
  .rail-brace-label{
    font-family: 'Cinzel', Georgia, serif;
    font-size:10.5px;
    letter-spacing:0.02em;
    fill: var(--bronce);
  }
  .rail::before{
    content:'';
    position:absolute;
    left:0;right:0;bottom:26px;
    height:3px;
    background: linear-gradient(to right, var(--bronce), var(--oro), var(--bronce));
    border-radius:2px;
  }
  .tick{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    width: 46px;
    flex:0 0 auto;
    padding-bottom: 26px;
    cursor:pointer;
    z-index:1;
  }
  .tick.wide{ width: 130px; }
  .tick .dot{
    width:12px;height:12px;
    border-radius:50%;
    background: var(--pergamino);
    border: 2px solid var(--bronce);
    margin-bottom: 6px;
    transition: transform 0.15s, background 0.15s, border-color .15s;
  }
  .tick .label{
    font-size: 11px;
    color: var(--tinta-suave);
    text-align:center;
    white-space:nowrap;
    transform: rotate(0deg);
    line-height:1.25;
  }
  .tick.wide .label{ font-size:12px; font-weight:bold; white-space:normal; }
  .tick.wide .label .label-fecha{ display:inline-block; margin-top:2px; font-weight:normal; font-size:11px; color:var(--tinta-suave); }
  .tick:hover .dot{ background: var(--oro); border-color: var(--oro); transform:scale(1.3); }
  .tick.selected .dot{
    background: var(--purpura-dark);
    border-color: var(--purpura-dark);
    transform:scale(1.5);
  }
  .tick.selected .label{ color: var(--purpura-dark); font-weight:bold; }

  .hint{
    text-align:center;
    font-size:12px;
    color: var(--tinta-suave);
    font-style:italic;
    margin: -6px 0 22px;
  }

  /* Jump box */
  .jumpbar{
    display:flex;
    flex-direction: column;
    align-items:center;
    gap:8px;
    margin: 0 0 26px;
    font-size:13px;
    color: var(--tinta-suave);
  }
  .jump-range{
    margin:0;
    font-family: 'Cinzel', Georgia, serif;
    font-size:13px;
    letter-spacing:0.08em;
    color: var(--bronce);
    text-transform: uppercase;
  }
  .jumpbar-row{
    display:flex;
    gap:8px;
    justify-content:center;
    align-items:center;
  }
  .jumpbar input, .jumpbar select{
    font-family: Georgia, serif;
    padding: 6px 10px;
    border:1px solid var(--bronce);
    border-radius:3px;
    background: #fbf6ec;
    color: var(--tinta);
    font-size:13px;
  }
  .jumpbar input{ width:110px; }
  .jumpbar input#jumpConsul{ width:210px; }
  .jumpbar input[type=number]::-webkit-inner-spin-button,
  .jumpbar input[type=number]::-webkit-outer-spin-button{
    -webkit-appearance:none;
    margin:0;
  }
  .jumpbar input[type=number]{ -moz-appearance: textfield; }
  .jumpbar-era{
    font-family: Georgia, serif;
    font-style: italic;
    color: var(--tinta-suave);
  }
  .jumpbar button{
    font-family: Georgia, serif;
    padding: 6px 14px;
    border:1px solid var(--bronce-dark);
    border-radius:3px;
    background: var(--bronce);
    color:#fff;
    cursor:pointer;
    font-size:13px;
  }
  .jumpbar button:hover{ background: var(--bronce-dark); }

  /* Buscador de consules */
  .consul-results{
    display:flex;
    flex-direction:column;
    gap:6px;
    width:100%;
    max-width:520px;
    margin-top:2px;
  }
  .consul-results:empty{ display:none; }
  .consul-result{
    display:flex;
    align-items:center;
    gap:10px;
    padding:6px 10px;
    background:#fbf6ec;
    border:1px solid var(--bronce);
    border-radius:3px;
    text-align:left;
  }
  .consul-result.clickable{ cursor:pointer; }
  .consul-result.clickable:hover,
  .consul-result.clickable.result-active{ background:#f2e8d5; }
  .consul-result.clickable.result-active{ box-shadow: inset 0 0 0 2px var(--bronce-dark); }
  .consul-result .portrait-circle{
    width:38px;
    height:38px;
    font-size:12px;
    border-width:1px;
  }
  .consul-result .portrait-circle span{
    padding:0 2px;
    text-align:center;
    line-height:1;
  }
  .consul-result-body{
    display:flex;
    flex-direction:column;
    gap:3px;
    min-width:0;
  }
  .consul-result-name{
    font-family:'Cinzel', Georgia, serif;
    font-size:13px;
    color:var(--tinta);
    letter-spacing:0.02em;
  }
  .consul-result-latin{
    font-family:Georgia, serif;
    font-style:italic;
    font-size:12px;
    color:var(--oro, #a9762f);
    letter-spacing:0.02em;
  }
  .consul-result-years{
    display:flex;
    flex-wrap:wrap;
    gap:4px;
  }
  .consul-year-btn{
    font-family:Georgia, serif;
    font-size:12px;
    padding:1px 8px;
    border:1px solid var(--bronce-dark);
    border-radius:10px;
    background:var(--bronce);
    color:#fff;
    cursor:pointer;
  }
  .consul-year-btn:hover,
  .consul-year-btn.result-active{ background:var(--bronce-dark); }
  .consul-year-btn.result-active{ box-shadow: 0 0 0 2px var(--oro); }
  .consul-noresult{
    margin:0;
    font-style:italic;
    font-size:13px;
    color:var(--tinta-suave);
  }

  /* Detail card */
  .card{
    background: #fbf6ec;
    border: 1px solid var(--bronce);
    border-radius: 4px;
    padding: 26px 30px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.05);
    position:relative;
  }
  .card::before{
    content:'';
    position:absolute;
    top:6px;left:6px;right:6px;bottom:6px;
    border: 1px solid var(--piedra);
    border-radius:2px;
    pointer-events:none;
  }
  .card .periodo{
    display:inline-block;
    background: var(--purpura-dark);
    color: #f1e6d8;
    font-size: 12px;
    letter-spacing: 0.06em;
    padding: 4px 12px;
    border-radius: 2px;
    margin-bottom: 12px;
  }
  .card .dinastia-badge{
    display:inline-block;
    background: transparent;
    color: var(--bronce);
    border: 1px solid var(--bronce);
    font-size: 12px;
    letter-spacing: 0.04em;
    font-style: italic;
    padding: 3px 12px;
    border-radius: 2px;
    margin: 0 0 12px 8px;
  }
  .card h2{
    font-family: 'Cinzel', Georgia, serif;
    font-size: 24px;
    margin: 0 0 14px;
    color: var(--purpura-dark);
    font-weight:normal;
    line-height:1.3;
  }
  .card p{
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--tinta);
    margin:0;
  }
  .map-box{
    margin: 0 0 18px;
    border: 1px solid var(--piedra);
    border-radius: 3px;
    background: #f3ecdd;
    padding: 10px;
  }
  .map-box img{
    display:block;
    width:100%;
    max-height: 320px;
    object-fit: contain;
    border-radius: 2px;
    background:#fff;
  }
  .map-caption{
    margin: 8px 2px 0;
    font-size: 12px;
    line-height:1.5;
    color: var(--tinta-suave);
    font-style: italic;
  }
  .card .navbtns{
    display:flex;
    justify-content:space-between;
    margin-top:20px;
    padding-top:14px;
    border-top: 1px solid var(--piedra);
  }
  .navbtn{
    background:none;
    border:1px solid var(--bronce);
    border-radius:3px;
    padding:6px 14px;
    font-family:Georgia,serif;
    font-size:13px;
    color: var(--bronce-dark);
    cursor:pointer;
  }
  .navbtn:hover{ background: var(--pergamino2); }
  .navbtn:disabled{ opacity:0.3; cursor:default; }

  ::-webkit-scrollbar{ height:10px; }
  ::-webkit-scrollbar-track{ background: var(--pergamino2); border-radius:6px;}
  ::-webkit-scrollbar-thumb{ background: var(--bronce); border-radius:6px;}

  @media (max-width: 640px){
    h1{font-size:28px;}
    .card{padding:18px 18px;}
    .card h2{font-size:19px;}
  }