@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;900&family=Source+Code+Pro:wght@400;600&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  --bg-deep:#0c0a08; --bg-card:#1c1916; --bg-raised:#252118; --bg-input:#1a1714;
  --amber-300:#fcd34d; --amber-400:#fbbf24; --amber-500:#f59e0b; --amber-600:#d97706; --amber-700:#b45309;
  --red-500:#ef4444; --green-400:#4ade80; --green-500:#22c55e;
  --text-primary:#e8e0d4; --text-secondary:#a89e8e; --text-dim:#6b6256;
  --border:#2d2820; --border-hl:#3d3528;
  --radius:10px; --radius-lg:16px; --transition:0.2s cubic-bezier(0.4,0,0.2,1);
}

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

body{font-family:'DM Sans',sans-serif;background:var(--bg-deep);color:var(--text-primary);min-height:100vh;line-height:1.5;-webkit-font-smoothing:antialiased}
body::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse at 20% 0%,rgba(245,158,11,.06) 0%,transparent 60%),radial-gradient(ellipse at 80% 100%,rgba(180,83,9,.04) 0%,transparent 50%);pointer-events:none;z-index:0}

.app{position:relative;z-index:1;max-width:1000px;margin:0 auto;padding:1.5rem 1.5rem 4rem}

/* ── Header & Topbar ────────────────────────────────── */
.header{text-align:center;margin-bottom:1.5rem}
.header h1{font-family:'Cinzel',serif;font-weight:900;font-size:clamp(1.6rem,4vw,2.6rem);letter-spacing:.04em;background:linear-gradient(135deg,var(--amber-300),var(--amber-600));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.header p{color:var(--text-dim);font-size:.88rem;margin-top:.2rem}

.topbar{display:flex;gap:1rem;margin-bottom:2rem;flex-wrap:wrap;align-items:center;justify-content:space-between;padding-bottom:1.2rem;border-bottom:1px solid var(--border)}
.faction-selector,.sync-selector{display:flex;gap:.5rem;flex-wrap:wrap}

.faction-btn{padding:.55rem .9rem;background:var(--bg-card);border:2px solid var(--border);border-radius:var(--radius);color:var(--text-secondary);font-family:'DM Sans',sans-serif;font-weight:600;font-size:.85rem;cursor:pointer;transition:all var(--transition);display:flex;align-items:center;gap:.4rem}
.faction-btn .fi{font-size:1.1rem}
.faction-btn:hover{border-color:var(--amber-700);color:var(--text-primary)}
.faction-btn.active{border-color:var(--amber-500);background:rgba(245,158,11,.1);color:var(--amber-300)}

.sync-btn{padding:.5rem .9rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-secondary);font-family:'DM Sans',sans-serif;font-weight:600;font-size:.82rem;cursor:pointer;transition:all var(--transition)}
.sync-btn:hover{border-color:var(--amber-700)}
.sync-btn.active{border-color:var(--amber-500);color:var(--amber-300);background:rgba(245,158,11,.08)}

/* ── Main Layout (Anidado) ──────────────────────────── */
.main-container { display:flex; flex-direction:column; gap: 1.5rem; margin-bottom:2rem;}
.card-list { display:flex; flex-direction:column; gap: 1.5rem; }

/* ── Origin Card ────────────────────────────────────── */
.origin-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;transition:all var(--transition);animation:cardIn .25s ease-out both}
.origin-card:hover{border-color:var(--border-hl)}

.origin-header { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.card-num{font-family:'Source Code Pro',monospace;font-weight:600;font-size:.85rem;color:var(--amber-500);background:rgba(245,158,11,.1);padding:.2rem .5rem;border-radius:5px}

.card-label{flex:1; min-width:120px; background:transparent; border:none; color:var(--text-primary); font-family:'DM Sans',sans-serif; font-weight:600; font-size:1.1rem; padding:0}
.card-label:focus{outline:none;color:var(--amber-300)}

.coord-group { display: flex; align-items: center; gap: .4rem; background:var(--bg-raised); padding: .3rem; border-radius: 8px;}
.coord-input{width:70px;padding:.4rem .5rem;background:var(--bg-input);border:1px solid var(--border);border-radius:6px;color:var(--text-primary);font-family:'Source Code Pro',monospace;font-size:.9rem;text-align:center;transition:border-color var(--transition)}
.coord-input:focus{outline:none;border-color:var(--amber-500);box-shadow:0 0 0 3px rgba(245,158,11,.1)}
.coord-sep{color:var(--text-dim);font-weight:700}

input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none}
input[type="number"]{-moz-appearance:textfield}

.card-remove{width:32px;height:32px;border-radius:8px;border:none;background:rgba(239,68,68,0.05);color:var(--red-500);font-size:.9rem;cursor:pointer;display:grid;place-items:center;transition:all var(--transition)}
.card-remove:hover{background:rgba(239,68,68,0.15)}
.card-remove:disabled{opacity:.2;cursor:not-allowed}

/* ── Attacks Container (Dentro del Origen) ──────────── */
.attacks-container { padding-left: 1rem; border-left: 2px dashed var(--border); display: flex; flex-direction: column; gap: 1rem;}

.attack-card{background:var(--bg-raised);border:1px solid var(--border);border-left:4px solid var(--amber-500);border-radius:var(--radius);padding:1rem;animation:cardIn .2s ease-out both}
.attack-header { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; flex-wrap: wrap; }
.attack-card .card-label { font-size: .95rem; }
.pill-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}

.units-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.5rem}
.unit-row{display:flex;align-items:center;gap:.35rem;padding:.35rem .5rem;background:var(--bg-input);border-radius:6px;border:1px solid transparent;}
.unit-name{flex:1;font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.unit-speed{font-family:'Source Code Pro',monospace;font-size:.7rem;color:var(--text-dim)}
.unit-input{width:50px;padding:.3rem;background:var(--bg-deep);border:1px solid var(--border);border-radius:5px;color:var(--amber-300);font-family:'Source Code Pro',monospace;font-size:.85rem;text-align:center}
.unit-input:focus{outline:none;border-color:var(--amber-500);}

.btn-add-attack { align-self: flex-start; padding: .5rem 1rem; background: transparent; border: 1px dashed var(--border); border-radius: 8px; color: var(--amber-500); font-weight: 600; font-size: .85rem; cursor: pointer; transition: all var(--transition); }
.btn-add-attack:hover { border-color: var(--amber-500); background: rgba(245,158,11,.05); }

/* ── Add Origin Button ──────────────────────────────── */
.add-origin-wrapper { text-align: center; }
.btn-secondary { background: var(--bg-card); border: 1px dashed var(--amber-600); color: var(--amber-400); padding: 1rem 2rem; border-radius: var(--radius-lg); font-size: 1rem; width: 100%; max-width: 400px; }
.btn-secondary:hover { background: rgba(245,158,11,.05); border-style: solid; }

@keyframes cardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ── Bottom bar & Buttons ───────────────────────────── */
.bottom-bar{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;padding:1.5rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:2rem}
.start-time-row{display:flex;align-items:center;gap:.6rem}
.start-time-row label{font-size:.85rem;color:var(--text-secondary);font-weight:600}
.time-input{padding:.45rem .7rem;background:var(--bg-input);border:1px solid var(--border);border-radius:7px;color:var(--amber-300);font-family:'Source Code Pro',monospace;font-size:.95rem;color-scheme:dark}
.time-input:focus{outline:none;border-color:var(--amber-500)}
.hint{font-size:.75rem;color:var(--text-dim);font-style:italic}

.btn{padding:.7rem 1.4rem;border-radius:var(--radius);font-family:'DM Sans',sans-serif;font-weight:600;font-size:.9rem;cursor:pointer;transition:all var(--transition);border:none}
.btn-primary{background:linear-gradient(135deg,var(--amber-600),var(--amber-700));color:#fff;padding:.8rem 2.2rem;font-size:1rem;box-shadow:0 4px 16px rgba(245,158,11,.2);margin-left:auto}
.btn-primary:hover{box-shadow:0 6px 24px rgba(245,158,11,.3);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}
.btn-primary:disabled{opacity:.6;cursor:wait;transform:none}

/* ── Results ────────────────────────────────────────── */
.results-section{display:none}
.results-section.visible{display:block;animation:fadeUp .35s ease-out}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

.results-container{display:flex;flex-direction:column;gap:1.5rem}

.result-group{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;animation:fadeIn .35s ease-out both}

.group-header{padding:1.1rem 1.4rem;border-left:5px solid var(--amber-500);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.8rem;background:linear-gradient(135deg,rgba(255,255,255,.015),transparent)}
.group-title{display:flex;align-items:center;gap:.5rem}
.group-title strong{font-size:1rem}
.group-coords{font-family:'Source Code Pro',monospace;font-size:.82rem;color:var(--text-dim)}
.group-arrival{display:flex;gap:1.2rem;align-items:center}
.arrival-pair{text-align:right}
.arrival-label{display:block;font-size:.68rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em}
.arrival-value{font-family:'Source Code Pro',monospace;font-size:1.4rem;font-weight:700;color:var(--green-400)}
.arrival-countdown{font-family:'Source Code Pro',monospace;font-size:1rem;color:var(--amber-400)}

.global-arrival-banner{background:linear-gradient(135deg,rgba(245,158,11,.08),rgba(245,158,11,.02));border:1px solid rgba(245,158,11,.2);border-radius:var(--radius-lg);padding:1.2rem 1.6rem;margin-bottom:1.2rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.global-arrival-icon{font-size:1.8rem}
.global-arrival-info{flex:1;min-width:120px}
.global-arrival-title{font-weight:700;font-size:.95rem;color:var(--amber-300)}
.global-arrival-sub{font-size:.78rem;color:var(--text-dim)}

.results-table-wrapper{overflow-x:auto}
.results-table{width:100%;border-collapse:collapse;font-size:.82rem}
.results-table thead th{background:var(--bg-raised);color:var(--text-secondary);font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;padding:.7rem .8rem;text-align:left;white-space:nowrap;border-bottom:1px solid var(--border)}
.results-table tbody td{padding:.6rem .8rem;border-bottom:1px solid var(--border);color:var(--text-primary);white-space:nowrap;font-family:'Source Code Pro',monospace;font-size:.8rem}
.results-table tbody td:first-child{font-family:'DM Sans',sans-serif;font-size:.85rem}
.results-table tbody tr:last-child td{border-bottom:none}
.results-table tbody tr:hover{background:rgba(245,158,11,.03)}
.result-row{animation:fadeIn .3s ease-out both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.delay-cell{color:var(--amber-400)}
.launch-cell{color:var(--green-400)}
.arrive-cell{color:var(--green-400);opacity:.7}
.no-results{color:var(--text-dim);text-align:center;padding:2rem}

/* ── Launch ─────────────────────────────────────────── */
.launch-bar{display:flex;justify-content:center;padding:1.5rem 0 .5rem}
.btn-launch{background:linear-gradient(135deg,#16a34a,#15803d);color:#fff;font-size:1rem;padding:.85rem 2.8rem;border-radius:var(--radius-lg);border:none;font-family:'DM Sans',sans-serif;font-weight:700;cursor:pointer;box-shadow:0 4px 20px rgba(22,163,74,.25);transition:all var(--transition);animation:pulse-glow 2s ease-in-out infinite}
.btn-launch:hover{box-shadow:0 6px 28px rgba(22,163,74,.4);transform:translateY(-2px)}
@keyframes pulse-glow{0%,100%{box-shadow:0 4px 20px rgba(22,163,74,.25)}50%{box-shadow:0 4px 30px rgba(22,163,74,.45)}}

/* ── Live panel ─────────────────────────────────────── */
.live-panel{position:fixed;inset:0;z-index:9000;background:var(--bg-deep);overflow-y:auto;display:none;flex-direction:column}
.live-panel.visible{display:flex;animation:fadeIn .3s ease-out}
.live-header{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;padding:1.3rem 1.8rem;background:var(--bg-card);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:1}
.live-title{font-family:'Cinzel',serif;font-weight:900;font-size:1.2rem;color:var(--amber-400);flex:1}
.live-master{text-align:center}
.live-master-label{font-size:.68rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em}
.live-master-cd{font-family:'Source Code Pro',monospace;font-size:1.8rem;font-weight:700;color:var(--green-400)}
.btn-stop{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);color:var(--red-500);padding:.55rem 1rem;border-radius:var(--radius);font-family:'DM Sans',sans-serif;font-weight:600;font-size:.82rem;cursor:pointer;transition:all var(--transition)}
.btn-stop:hover{background:rgba(239,68,68,.2)}
.live-progress-track{height:4px;background:var(--border);position:sticky;top:66px;z-index:1}
.live-progress-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--amber-500),var(--green-400));transition:width .3s linear}
.live-cards{display:flex;flex-direction:column;gap:.7rem;padding:1.3rem 1.8rem 3rem;max-width:900px;margin:0 auto;width:100%}
.live-card{display:flex;align-items:center;justify-content:space-between;background:var(--bg-card);border:1px solid var(--border);border-left:5px solid var(--amber-500);border-radius:var(--radius);padding:.9rem 1.2rem;transition:all .4s ease}
.live-card-info{flex:1}
.live-card-label{font-weight:700;font-size:.95rem;margin-bottom:.1rem}
.live-card-detail{font-size:.78rem;color:var(--text-dim);font-family:'Source Code Pro',monospace}
.live-card-timer{text-align:right;min-width:130px}
.live-card-status{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);margin-bottom:.15rem}
.live-card-countdown{font-family:'Source Code Pro',monospace;font-size:1.5rem;font-weight:700;color:var(--amber-400)}
.live-card-now{background:rgba(34,197,94,.08);border-color:rgba(34,197,94,.3);box-shadow:0 0 30px rgba(34,197,94,.15);animation:flash-card .6s ease-in-out 3}
.live-card-now .live-card-countdown{color:var(--green-400);font-size:1.1rem}
.status-now{color:var(--green-400)!important;font-weight:700;font-size:.82rem!important}
.live-card-sent{opacity:.6;border-left-color:var(--text-dim)}
.live-card-sent .live-card-countdown{color:var(--text-secondary);font-size:1rem}
.status-sent{color:var(--text-secondary)!important}
.live-card-arrived{opacity:.35}
.status-arrived{color:var(--green-500)!important}
@keyframes flash-card{0%,100%{box-shadow:0 0 30px rgba(34,197,94,.15)}50%{box-shadow:0 0 50px rgba(34,197,94,.35);background:rgba(34,197,94,.14)}}

/* ── Toast ──────────────────────────────────────────── */
#toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(20px);background:var(--bg-raised);border:1px solid var(--amber-700);color:var(--amber-300);padding:.7rem 1.4rem;border-radius:var(--radius);font-size:.88rem;font-weight:500;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;z-index:1000;box-shadow:0 8px 30px rgba(0,0,0,.4)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}

/* ── Responsive ─────────────────────────────────────── */
@media(max-width:600px){
  .origin-header { flex-direction: column; align-items: stretch; gap: 1rem; }
  .card-remove { align-self: flex-end; }
  .bottom-bar { flex-direction: column; align-items: stretch; }
  .btn-primary { margin-left: 0; }
  .live-card{flex-direction:column;align-items:stretch;gap:.5rem}
  .live-card-timer{text-align:left}
}

/* ── Sistema de Vistas (Pantallas) ──────────────────── */
.view { 
  display: none; 
  animation: fadeUp .35s ease-out;
}
.view.active { 
  display: block; 
}

/* ── Cabecera de Resultados y Botón Volver ──────────── */
.results-header-bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.btn-icon {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-icon:hover {
  background: var(--bg-raised);
  border-color: var(--amber-500);
  color: var(--amber-400);
}

.btn-icon svg {
  transition: transform var(--transition);
}

.btn-icon:hover svg {
  transform: translateX(-3px);
}

@media(max-width: 600px) {
  .results-header-bar {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 1rem;
  }
}

/* ── Corrección de Alineación en Resultados ──────────────── */

/* 1. Fuerza a todas las tablas a usar exactamente los mismos 
      anchos de columna, sin importar su contenido */
.results-table {
  table-layout: fixed;
}

/* 2. Iguala el espacio izquierdo de la tabla con el del 
      título de arriba (compensando el padding y el borde) */
.results-table thead th:first-child,
.results-table tbody td:first-child {
  padding-left: 1.8rem; 
}

/* 3. Añade un poco de respiro al final de la tabla */
.results-table thead th:last-child,
.results-table tbody td:last-child {
  padding-right: 1.8rem;
}

/* ── Barra de Lanzamiento y Cuenta Atrás ──────────────── */
.launch-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem 0 1rem;
  flex-wrap: wrap;
}

.prep-container {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: var(--bg-card);
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.prep-container label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.prep-input {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--amber-400);
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all var(--transition);
}

.prep-input:focus {
  outline: none;
  border-color: var(--amber-500);
  box-shadow: 0 0 0 3px rgba(245,158,11,.1);
}

@media(max-width: 600px) {
  .launch-bar {
    flex-direction: column;
    gap: 1rem;
  }
  .prep-container {
    width: 100%;
    justify-content: space-between;
  }
  .btn-launch {
    width: 100%;
  }
}

/* ── Botones de Copiar/Pegar ────────────────────────── */
.card-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}

.card-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-deep);
  color: var(--text-secondary);
  font-size: 1rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all var(--transition);
}

.card-btn:hover:not(:disabled) {
  border-color: var(--amber-500);
  color: var(--amber-400);
  background: rgba(245,158,11,.05);
}

.card-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  border-color: transparent;
}

@media(max-width: 600px) {
  .card-actions {
    align-self: flex-end;
  }
}

/* ── Estados de Selección (Ctrl+C / Ctrl+V) ────────── */
.origin-card.selected {
  border-color: var(--amber-500);
  box-shadow: 0 0 0 2px rgba(245,158,11,.2);
}

.attack-card.selected {
  border-color: var(--amber-400);
  box-shadow: 0 0 0 2px rgba(245,158,11,.15);
}

/* ── Indicador de Tiempo en Vivo ────────────────────── */
.live-travel-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(245, 158, 11, 0.08);
  color: var(--amber-400);
  border: 1px solid rgba(245, 158, 11, 0.2);
  padding: 0.35rem 0.7rem;
  border-radius: 6px;
  font-family: 'Source Code Pro', monospace;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  margin-left: auto; /* Empuja los botones de acción a la derecha */
}

@media(max-width: 600px) {
  .live-travel-badge {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }
}

/* ── Navegación (Tabs) ──────────────────────────────── */
.main-nav {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.nav-tab {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  transition: all var(--transition);
}

.nav-tab:hover {
  border-color: var(--amber-600);
  color: var(--text-primary);
}

.nav-tab.active {
  background: rgba(245, 158, 11, 0.1);
  border-color: var(--amber-500);
  color: var(--amber-400);
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.1);
}

/* ── Calculadora Rápida (Estilos Visuales) ──────────── */
.qc-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.qc-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  text-align: center;
}

.qc-panel h3 {
  font-family: 'Cinzel', serif;
  color: var(--amber-500);
  margin-bottom: 1.5rem;
  font-size: 1.3rem;
  letter-spacing: 0.05em;
}

.coord-group.large .coord-input {
  font-size: 1.4rem;
  width: 100px;
  padding: 0.8rem;
}

.qc-units-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.2rem;
}

.qc-unit-card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  transition: all var(--transition);
}

.qc-unit-card:hover {
  border-color: var(--amber-500);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

.qc-unit-icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin-bottom: 0.5rem;
}

.qc-unit-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
}

.qc-unit-speed {
  font-size: 0.8rem;
  color: var(--text-dim);
  font-family: 'Source Code Pro', monospace;
}

.qc-unit-time {
  font-family: 'Source Code Pro', monospace;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-dim);
  margin-top: 0.5rem;
  transition: color var(--transition);
}

.qc-unit-time.active {
  color: var(--green-400);
  text-shadow: 0 0 10px rgba(34, 197, 94, 0.2);
}

@media(max-width: 600px) {
  .qc-panels { grid-template-columns: 1fr; }
}

/* ── Modal "Mis Ciudades" ───────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: none; /* hidden by default */
  place-items: center;
  padding: 1rem;
  opacity: 0;
  transition: opacity var(--transition);
}

.modal-overlay.active {
  display: grid;
  opacity: 1;
}

.modal-content {
  background: var(--bg-card);
  border: 1px solid var(--amber-700);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 500px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: 90vh;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
  transform: translateY(20px);
  transition: transform var(--transition);
}

.modal-overlay.active .modal-content {
  transform: translateY(0);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding-bottom: 1rem;
}

.city-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto;
  padding-right: 0.5rem;
  max-height: 40vh;
}

.city-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-raised);
  padding: 0.8rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  transition: all var(--transition);
}

.city-item:hover {
  border-color: var(--amber-500);
}

/* Estado de la ciudad cuando estamos en "Modo Seleccionar" */
.city-item.selectable {
  cursor: pointer;
}
.city-item.selectable:hover {
  background: rgba(245, 158, 11, 0.05);
  transform: translateX(3px);
}

.city-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.city-name {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 0.95rem;
}

.city-coords {
  font-family: 'Source Code Pro', monospace;
  font-size: 0.85rem;
  color: var(--amber-400);
}

.city-form {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
  border-top: 1px dashed var(--border);
  padding-top: 1.5rem;
}

.city-empty {
  text-align: center;
  color: var(--text-dim);
  font-style: italic;
  padding: 2rem 0;
  font-size: 0.9rem;
}

/* ── Modal "Libreta de Direcciones" ─────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: none;
  place-items: center;
  padding: 1rem;
  opacity: 0;
  transition: opacity var(--transition);
}

.modal-overlay.active {
  display: grid;
  opacity: 1;
}

.modal-content {
  background: var(--bg-card);
  border: 1px solid var(--amber-700);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 500px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: 90vh;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
  transform: translateY(20px);
  transition: transform var(--transition);
}

.modal-overlay.active .modal-content {
  transform: translateY(0);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding-bottom: 1rem;
}

/* Pestañas dentro del Modal */
.modal-tabs {
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
}

.modal-tab {
  flex: 1;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  padding: 0.6rem;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all var(--transition);
}

.modal-tab:hover {
  background: var(--bg-raised);
  color: var(--text-primary);
}

.modal-tab.active {
  background: rgba(245, 158, 11, 0.08);
  border-color: var(--amber-600);
  color: var(--amber-400);
}

/* Lista de ubicaciones */
.city-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  overflow-y: auto;
  padding-right: 0.5rem;
  max-height: 45vh;
}

.city-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, rgba(255,255,255,0.03), transparent);
  padding: 0.8rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  border-left: 4px solid var(--text-dim);
  transition: all var(--transition);
}

.city-item.type-origins { border-left-color: var(--amber-500); }
.city-item.type-dests { border-left-color: var(--red-500); }

.city-item.selectable { cursor: pointer; }
.city-item.selectable:hover {
  background: var(--bg-raised);
  border-color: var(--amber-400);
  transform: translateX(3px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.city-info-wrapper {
  display: flex;
  align-items: center;
  flex: 1;
}

.city-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(0,0,0,0.2);
  border-radius: 8px;
  margin-right: 1rem;
  font-size: 1.2rem;
  border: 1px solid rgba(255,255,255,0.05);
}

.city-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.city-name { font-weight: 700; color: var(--text-primary); font-size: 0.95rem; }
.city-coords { font-family: 'Source Code Pro', monospace; font-size: 0.85rem; color: var(--amber-400); }

.city-form {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  border-top: 1px dashed var(--border);
  padding-top: 1.2rem;
}

.city-empty {
  text-align: center;
  color: var(--text-dim);
  font-style: italic;
  padding: 2rem 0;
  font-size: 0.9rem;
}

/* ── Info Facciones ─────────────────────────────────── */
.factions-info-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.faction-info-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  animation: fadeIn 0.3s ease-out;
}

.faction-info-header {
  background: linear-gradient(135deg, rgba(245,158,11,0.1), transparent);
  padding: 1.2rem 1.5rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.faction-info-title {
  font-family: 'Cinzel', serif;
  font-size: 1.3rem;
  color: var(--amber-500);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.faction-info-table-wrapper {
  overflow-x: auto;
}

.faction-info-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.faction-info-table th {
  background: var(--bg-raised);
  padding: 1rem 1.5rem;
  color: var(--text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8rem;
  border-bottom: 1px solid var(--border);
}

.faction-info-table td {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  vertical-align: middle;
}

.faction-info-table tr:last-child td {
  border-bottom: none;
}

.faction-info-table tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

.fi-unit-cell {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.fi-unit-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.fi-unit-name {
  font-weight: 600;
  font-size: 1rem;
}

.fi-speed {
  font-family: 'Source Code Pro', monospace;
  color: var(--amber-400);
  font-weight: 600;
  font-size: 1.1rem;
}

/* ═══ APPEND THIS TO YOUR styles.css ════════════════════ */

/* ── Header top bar ─────────────────────────────────── */
.header-top { display:flex; align-items:center; justify-content:center; gap:1.5rem; margin-bottom:1rem; position:relative; }
.header-top h1 { margin:0; }

/* ── User bar & dropdown ────────────────────────────── */
.user-bar { position:absolute; right:0; top:50%; transform:translateY(-50%); }

.user-menu { position:relative; }

.user-menu-toggle {
  display:flex; align-items:center; gap:.5rem; padding:.4rem .7rem .4rem .4rem;
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  color:var(--text-secondary); cursor:pointer; transition:all var(--transition);
  font-family:'DM Sans',sans-serif; font-size:.85rem;
}
.user-menu-toggle:hover { border-color:var(--amber-700); color:var(--text-primary); }
.user-menu-toggle.open { border-color:var(--amber-500); }

.user-avatar {
  width:28px; height:28px; border-radius:50%; object-fit:cover;
  border:2px solid var(--border); background:var(--bg-raised);
}

.user-name { font-weight:600; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.user-dropdown {
  display:none; position:absolute; right:0; top:calc(100% + 6px);
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  min-width:200px; padding:.4rem 0; z-index:100;
  box-shadow:0 8px 30px rgba(0,0,0,.4);
  animation:fadeIn .15s ease-out;
}
.user-dropdown.open { display:block; }

.dropdown-item {
  display:flex; align-items:center; gap:.6rem; padding:.6rem 1rem;
  color:var(--text-secondary); text-decoration:none; font-size:.88rem; font-weight:500;
  background:none; border:none; width:100%; text-align:left; cursor:pointer;
  font-family:'DM Sans',sans-serif; transition:all var(--transition);
}
.dropdown-item:hover { background:var(--bg-raised); color:var(--text-primary); }
.dropdown-item.danger:hover { color:var(--red-500); }

.dropdown-sep { height:1px; background:var(--border); margin:.3rem 0; }

/* ── Settings pages ─────────────────────────────────── */
.settings-page { display:flex; justify-content:center; padding:2rem 1rem; }

.settings-card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:2rem; max-width:560px; width:100%;
}

.settings-header { display:flex; align-items:center; gap:1rem; margin-bottom:1.5rem; padding-bottom:1rem; border-bottom:1px solid var(--border); }
.settings-header h2 {
  font-family:'Cinzel',serif; font-weight:700; font-size:1.3rem;
  color:var(--amber-400); margin:0;
}

.settings-section { margin-bottom:1.5rem; }
.settings-section-title { font-size:.95rem; color:var(--amber-300); margin-bottom:.8rem; font-weight:600; }

.settings-success {
  background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.3);
  color:var(--green-400); padding:.5rem .8rem; border-radius:8px;
  font-size:.85rem; margin-bottom:1rem;
}

.avatar-section { display:flex; align-items:center; gap:1.2rem; margin-bottom:1rem; }
.avatar-preview {
  width:72px; height:72px; border-radius:50%; object-fit:cover;
  border:3px solid var(--border); background:var(--bg-raised); flex-shrink:0;
}

/* ── Responsive adjustments ─────────────────────────── */
@media(max-width:640px) {
  .header-top { flex-direction:column; gap:.5rem; }
  .user-bar { position:static; transform:none; }
  .settings-card { padding:1.2rem; }
}

/* ═══════════════════════════════════════════════════════
   APPEND: Unit checkboxes + Stagger config
   ═══════════════════════════════════════════════════════ */

/* ── Unit row as clickable checkbox ─────────────────── */
.unit-row {
  display:flex; align-items:center; gap:0.5rem;
  padding:0.4rem 0.6rem; border-radius:8px;
  border:2px solid var(--border); background:var(--bg-input);
  cursor:pointer; transition:all var(--transition);
  user-select:none;
}
.unit-row:hover { border-color:var(--amber-700); }
.unit-row.unit-selected {
  border-color:var(--amber-500);
  background:rgba(245,158,11,.08);
}

.unit-info {
  display:flex; flex-direction:column; flex:1; min-width:0;
}
.unit-name-label {
  font-size:0.78rem; font-weight:600; color:var(--text-primary);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ── Unit row & Modern Tick ─────────────────────────── */
.unit-check {
  width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0;
  border: 2px solid var(--border); background: var(--bg-deep);
  display: grid; place-items: center;
  color: var(--amber-400);
  transition: all var(--transition);
}
.unit-check.checked {
  border-color: var(--amber-500);
  background: rgba(245, 158, 11, 0.15);
}
.unit-check svg {
  /* Animación de "pop" al seleccionar la tropa */
  animation: checkPop 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
@keyframes checkPop {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* ── Stagger config bar (Rediseño Premium) ──────────── */
.stagger-config {
  display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
  padding: 1rem 1.2rem; margin-bottom: 1.5rem;
  background: rgba(245, 158, 11, 0.05); /* Fondo ligeramente tintado */
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: var(--radius-lg);
}
.stagger-label {
  font-size: 0.95rem; font-weight: 600; color: var(--amber-400);
}
.stagger-input {
  width: 80px; padding: 0.5rem; text-align: center;
  background: var(--bg-deep); /* Fondo muy oscuro */
  border: 1px solid var(--amber-700);
  border-radius: 6px; color: var(--amber-300);
  font-family: 'Source Code Pro', monospace;
  font-size: 1rem; font-weight: 700;
  color-scheme: dark; /* ⚠️ CRUCIAL: Obliga al navegador a usar UI oscura */
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5); /* Profundidad interior */
  transition: all var(--transition);
}
.stagger-input:focus {
  outline: none;
  border-color: var(--amber-500);
  background: var(--bg-card);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15), inset 0 2px 4px rgba(0,0,0,0.5);
}
.stagger-unit { font-size: 0.85rem; color: var(--text-dim); }
.stagger-config .hint {
  width: 100%; font-size: 0.8rem; color: var(--text-dim); margin-top: 0.2rem;
}

/* ═══ APPEND: Recent attacks ═════════════════════════════ */

.recent-attacks-section {
  margin:1.5rem 0; padding:1rem;
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius);
}

.recent-attacks-list {
  display:flex; flex-direction:column; gap:.5rem;
}

.recent-attack-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:.6rem .8rem; background:var(--bg-raised);
  border:1px solid var(--border); border-radius:8px;
  font-size:.85rem; gap:1rem;
}

.recent-attack-info {
  display:flex; flex-direction:column; gap:.15rem;
  color:var(--text-primary); min-width:0; flex:1;
}

.recent-attack-coords {
  font-size:.78rem; color:var(--text-dim);
  font-family:'Source Code Pro',monospace;
}

.recent-attack-meta {
  display:flex; align-items:center; gap:.5rem; flex-shrink:0;
  font-size:.78rem; color:var(--text-dim);
}

/* ── Origin Faction Bar ────────────────────────────── */
.origin-faction-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1.5rem 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px dashed var(--border-hl);
}

.origin-faction-label {
  color: var(--text-dim);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.faction-selector.mini {
  margin-bottom: 0;
  gap: 0.4rem;
}

.faction-selector.mini .faction-btn {
  padding: 0.35rem 0.8rem;
  font-size: 0.85rem;
  border-radius: 6px;
}

.faction-selector.mini .fi {
  font-size: 1rem; /* Ajusta el emoji para que no se vea gigante */
}

/* ── Cabeceras Colapsables (Collapsible Headers) ────── */
.collapsible-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  margin: 0 !important; /* Sobrescribe el margen por defecto del título */
  font-size: 0.95rem;
  color: var(--text-primary);
  transition: color var(--transition);
  user-select: none; /* Evita que el texto se subraye azul al hacer doble clic rápido */
}

.collapsible-header:hover {
  color: var(--amber-400);
}

.chevron {
  font-size: 0.8rem;
  color: var(--text-dim);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.chevron.open {
  transform: rotate(180deg);
  color: var(--amber-400);
}

/* ═══ APPEND: Premium UI ═════════════════════════════════ */

/* ── Badges ─────────────────────────────────────────── */
.badge-premium {
  font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  padding:.15rem .45rem; border-radius:4px;
  background:linear-gradient(135deg, #f59e0b, #d97706);
  color:#0c0a08;
}

.badge-free {
  font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  padding:.15rem .45rem; border-radius:4px;
  background:var(--bg-raised); color:var(--text-dim);
  border:1px solid var(--border);
}

/* ── Upgrade item in dropdown ───────────────────────── */
.dropdown-upgrade {
  color:var(--amber-400) !important; font-weight:600 !important;
}
.dropdown-upgrade:hover {
  background:rgba(245,158,11,.1) !important;
}

/* ── Premium banner ─────────────────────────────────── */
.premium-banner {
  margin-bottom:1.5rem;
  background:linear-gradient(135deg, rgba(245,158,11,.06), rgba(180,83,9,.04));
  border:1px solid rgba(245,158,11,.2);
  border-radius:var(--radius-lg);
  overflow:hidden;
}

.premium-banner-content {
  display:flex; align-items:center; gap:1.2rem;
  padding:1rem 1.5rem; flex-wrap:wrap;
}

.premium-banner-icon { font-size:2rem; flex-shrink:0; }

.premium-banner-text { flex:1; min-width:200px; }

.premium-banner-title {
  font-family:'Cinzel',serif; font-weight:700; font-size:1rem;
  color:var(--amber-300); margin-bottom:.2rem;
}

.premium-banner-features {
  font-size:.82rem; color:var(--text-secondary);
}

.btn-upgrade {
  padding:.6rem 1.2rem; border-radius:var(--radius);
  background:linear-gradient(135deg, var(--amber-500), var(--amber-700));
  color:#0c0a08; font-weight:700; font-size:.88rem;
  border:none; cursor:pointer; white-space:nowrap;
  transition:all var(--transition); font-family:'DM Sans',sans-serif;
}
.btn-upgrade:hover {
  background:linear-gradient(135deg, var(--amber-400), var(--amber-600));
  transform:translateY(-1px); box-shadow:0 4px 16px rgba(245,158,11,.3);
}

/* ── Locked tab ─────────────────────────────────────── */
.nav-tab-locked { opacity:.6; }
.lock-icon { font-size:.75rem; margin-left:.2rem; }

/* ── Free limit message ─────────────────────────────── */
.free-limit-msg {
  text-align:center; padding:.7rem 1.2rem;
  background:var(--bg-card); border:1px dashed var(--border);
  border-radius:var(--radius); color:var(--text-dim);
  font-size:.88rem; width:100%;
}

/* ── Responsive ─────────────────────────────────────── */
@media(max-width:640px) {
  .premium-banner-content { flex-direction:column; text-align:center; }
  .btn-upgrade { width:100%; }
}

/* ═══════════════════════════════════════════════════════
   Páginas de Autenticación (Login, Register, Premium)
   ═══════════════════════════════════════════════════════ */

.auth-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80vh; /* Centra el contenido verticalmente */
  padding: 2rem 1rem;
}

.auth-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 3rem 2.5rem;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
  animation: fadeUp 0.4s ease-out both;
}

.auth-card h2 {
  font-family: 'Cinzel', serif;
  font-size: 2.5rem;
  color: var(--amber-500);
  text-align: center;
  margin-bottom: 0.2rem;
  text-shadow: 0 2px 10px rgba(245,158,11,0.2);
}

.auth-sub {
  color: var(--text-dim);
  text-align: center;
  font-size: 0.95rem;
  margin-bottom: 2.5rem;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.2rem;
  text-align: left;
}

.auth-field label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.auth-field input,
.auth-field select {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 0.9rem 1rem;
  border-radius: var(--radius);
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  transition: all var(--transition);
  color-scheme: dark; /* CRUCIAL: Fuerza al navegador a pintar el desplegable oscuro */
}

.auth-field input:focus,
.auth-field select:focus {
  outline: none;
  border-color: var(--amber-500);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

.auth-error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: var(--red-500);
  padding: 0.8rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 1.5rem;
  display: none;
}

.auth-error.show {
  display: block;
  animation: shakeError 0.4s cubic-bezier(.36,.07,.19,.97) both;
}

.auth-actions {
  margin-top: 2rem;
}

.auth-actions .btn-primary {
  width: 100%;
  padding: 1rem;
  font-size: 1.05rem;
}

.auth-toggle {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--text-dim);
}

.auth-toggle a {
  color: var(--amber-400);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--transition);
}

.auth-toggle a:hover {
  color: var(--amber-300);
  text-decoration: underline;
}

/* Animación cuando te equivocas de contraseña */
@keyframes shakeError {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

/* ═══════════════════════════════════════════════════════
   Vista: Libreta de Direcciones (Full Page)
   ═══════════════════════════════════════════════════════ */

.address-book-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.ab-column {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

.ab-col-title {
  font-family: 'Cinzel', serif;
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px dashed var(--border);
  padding-bottom: 1rem;
}

.ab-city-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1rem;
  /* Espacio suficiente para no hacer scroll infinito, pero sin encogerse */
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 0.5rem;
}

.pick-mode-banner {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid var(--amber-500);
  padding: 1rem 2rem;
  border-radius: var(--radius-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.15);
  animation: pulse-glow 2s infinite;
}

.pick-mode-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--amber-400);
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

@media(max-width: 800px) {
  .address-book-grid { grid-template-columns: 1fr; }
  .pick-mode-banner { flex-direction: column; gap: 1rem; text-align: center; }
}

.draggable-origin { transition: opacity 0.2s ease; }
.draggable-origin.dragging { opacity: 0.4; border: 2px dashed var(--amber-500); }
.drag-handle { user-select: none; opacity: 0.5; transition: opacity 0.2s; }
.drag-handle:hover { opacity: 1; }

.badge-uses {
  background: rgba(245, 158, 11, 0.15);
  color: var(--amber-400);
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  margin-left: 0.3rem;
}

/* ═══ Modo secuenciado — responsivo ═══════════════════ */

.slots-mobile { display: block; margin: 1rem 0; }
.slots-desktop { display: none; }

@media (min-width: 1024px) {
  .slots-mobile { display: none; }
  .slots-desktop { display: block; margin: 1rem 0; }
}

/* ── Tarjetas de slot (móvil) ── */
.slot-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.8rem;
  margin-bottom: 0.5rem;
}
.slot-card-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 0.6rem;
  font-weight: 700; letter-spacing: 1px; color: var(--amber-400);
}
.slot-num { font-size: 0.85rem; }
.slot-attacks {
  display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center;
}
.slot-chip {
  background: var(--bg-input); border: 1px solid var(--border);
  padding: 0.4rem 0.7rem; border-radius: 6px; font-size: 0.85rem;
  cursor: pointer; user-select: none;
  transition: all 0.15s;
}
.slot-chip:hover { border-color: var(--amber-500); }
.slot-chip.tray { border-color: var(--text-dim); opacity: 0.85; }
.slot-add-chip {
  background: transparent; border: 1px dashed var(--border);
  padding: 0.4rem 0.7rem; border-radius: 6px;
  color: var(--text-dim); cursor: pointer; font-size: 1rem;
}
.slot-add-chip:hover { color: var(--amber-400); border-color: var(--amber-500); }

.slot-gap-row {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.3rem 0; margin-left: 1rem;
  color: var(--text-dim); font-size: 0.85rem;
}
.slot-gap-label { font-weight: bold; color: var(--amber-400); }
.slot-gap-input {
  width: 60px; padding: 0.25rem 0.4rem;
  background: var(--bg-input); border: 1px solid var(--border);
  color: var(--text-primary); border-radius: 4px;
}
.slot-gap-unit { color: var(--text-dim); }
.insert-btn { font-size: 0.75rem; padding: 0.2rem 0.4rem; }

.slot-add-end { margin: 1rem auto; display: block; }

.slot-tray {
  background: rgba(245, 158, 11, 0.05);
  border: 1px dashed var(--amber-500);
  border-radius: var(--radius);
  padding: 0.8rem; margin-top: 1rem;
}
.slot-tray-title {
  font-size: 0.8rem; color: var(--amber-400); font-weight: 700;
  letter-spacing: 1px; margin-bottom: 0.5rem;
}

/* ── Picker overlay (móvil) ── */
.slot-picker-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.65); z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.slot-picker {
  background: var(--bg-card); border-radius: var(--radius);
  padding: 1.5rem; max-width: 400px; width: 100%;
  max-height: 80vh; overflow-y: auto;
}
.slot-picker h3 { margin: 0 0 1rem 0; color: var(--amber-400); }
.slot-picker-option {
  display: block; width: 100%; text-align: left;
  padding: 0.8rem 1rem; margin-bottom: 0.4rem;
  background: var(--bg-input); border: 1px solid var(--border);
  color: var(--text-primary); border-radius: 6px;
  cursor: pointer; font-size: 0.95rem;
}
.slot-picker-option:hover { border-color: var(--amber-500); }
.slot-picker-option.new { border-color: var(--green-500); color: var(--green-400); }
.slot-picker-option.warn { border-color: var(--red-500); color: var(--red-400); }
.slot-picker-cancel {
  width: 100%; margin-top: 0.8rem; padding: 0.6rem;
  background: transparent; border: none; color: var(--text-dim);
  cursor: pointer;
}
.slot-picker-empty { color: var(--text-dim); font-size: 0.9rem; }

/* ── Timeline horizontal (desktop) ── */
.timeline-tray {
  background: rgba(245, 158, 11, 0.05);
  border: 1px dashed var(--amber-500);
  border-radius: var(--radius);
  padding: 0.8rem; margin-bottom: 1rem;
  min-height: 60px;
}
.timeline-tray.empty { opacity: 0.6; }
.timeline-tray-title {
  font-size: 0.8rem; color: var(--amber-400); font-weight: 700;
  letter-spacing: 1px; margin-bottom: 0.5rem;
}
.timeline-tray-chips {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
}

.timeline-horizontal {
  display: flex; align-items: stretch; gap: 0;
  overflow-x: auto; padding: 0.5rem 0 1rem;
  min-height: 200px;
}

.timeline-slot {
  min-width: 180px; max-width: 220px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 0.6rem;
  display: flex; flex-direction: column;
}
.timeline-slot-header {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.75rem; font-weight: 700; color: var(--amber-400);
  letter-spacing: 1px; margin-bottom: 0.5rem;
  padding-bottom: 0.4rem; border-bottom: 1px solid var(--border);
}
.timeline-slot-body {
  display: flex; flex-direction: column; gap: 0.3rem; flex: 1;
  min-height: 80px;
}
.timeline-slot-empty {
  color: var(--text-dim); font-size: 0.8rem; text-align: center;
  padding: 1rem 0; font-style: italic;
}
.timeline-chip {
  background: var(--bg-input); border: 1px solid var(--border);
  padding: 0.4rem 0.6rem; border-radius: 6px;
  font-size: 0.8rem; cursor: grab; user-select: none;
  transition: all 0.1s;
}
.timeline-chip:hover { border-color: var(--amber-500); transform: translateY(-1px); }
.timeline-chip:active { cursor: grabbing; }

.timeline-gap {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; min-width: 70px; position: relative;
}
.timeline-gap-line {
  position: absolute; top: 50%; left: 0; right: 0;
  height: 2px; background: var(--border); z-index: 0;
}
.timeline-gap-chip {
  position: relative; z-index: 1;
  background: var(--bg-card); padding: 0.3rem 0.5rem;
  border: 1px solid var(--amber-500); border-radius: 4px;
  font-size: 0.8rem; color: var(--amber-400);
  display: flex; align-items: center; gap: 0.3rem;
}
.timeline-gap-chip input {
  width: 45px; background: var(--bg-input); border: none;
  color: var(--text-primary); font-size: 0.8rem; padding: 0.1rem;
  text-align: center;
}
.timeline-gap-insert {
  margin-top: 0.3rem; position: relative; z-index: 1;
  font-size: 0.7rem; padding: 0.15rem 0.4rem;
  background: transparent; border: 1px dashed var(--border);
  color: var(--text-dim); cursor: pointer; border-radius: 4px;
}
.timeline-gap-insert:hover { color: var(--green-400); border-color: var(--green-500); }

.timeline-add-slot {
  min-width: 120px;
  background: transparent; border: 2px dashed var(--border);
  color: var(--text-dim); border-radius: var(--radius);
  cursor: pointer; font-size: 0.9rem;
  margin-left: 0.5rem;
}
.timeline-add-slot:hover { color: var(--amber-400); border-color: var(--amber-500); }

/* ── Warnings en resultados ── */
.warnings-box {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid var(--amber-500);
  border-radius: var(--radius);
  padding: 1rem 1.2rem; margin-bottom: 1.5rem;
}
.warnings-title {
  color: var(--amber-400); font-weight: 700; margin-bottom: 0.4rem;
}
.warning-line {
  font-size: 0.85rem; color: var(--text-secondary); margin: 0.2rem 0;
}