/* ============================================================================
   Buscador de Hideouts — Zona Negra (Albion Online)
   Paleta inspirada en la Zona Negra: negros profundos, carmesí y oro,
   con buen contraste (WCAG AA) para lectura prolongada.
   ============================================================================ */

:root {
  --color-fondo: #0d0c0f;
  --color-fondo-panel: #17151a;
  --color-fondo-tarjeta: #1e1b21;
  --color-borde: #322c33;
  --color-borde-suave: #2a252b;

  --color-oro: #c9a227;
  --color-oro-claro: #e8c95c;
  --color-carmesi: #8c2f2f;
  --color-carmesi-claro: #c94f4f;

  --color-texto: #ece7e0;
  --color-texto-suave: #a89f9a;
  --color-texto-tenue: #7a726d;

  --color-exito: #4caf7d;
  --color-advertencia: #d9a441;
  --color-error: #c94f4f;

  --radio: 10px;
  --radio-lg: 16px;
  --sombra: 0 8px 24px rgba(0, 0, 0, 0.45);

  --fuente-titulos: 'Cinzel', serif;
  --fuente-texto: 'Inter', system-ui, -apple-system, sans-serif;
}

* {
  box-sizing: border-box;
}

/* Cualquier elemento con el atributo [hidden] debe desaparecer siempre,
   sin importar qué otra clase (display:flex, display:block, etc.) tenga
   aplicada. Sin esta regla, una clase como ".estado { display:flex }"
   le gana en cascada a la regla nativa del navegador para [hidden] y el
   elemento queda visible aunque JS le haya puesto hidden = true. */
[hidden] {
  display: none !important;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente-texto);
  min-height: 100vh;
  position: relative;
  line-height: 1.5;
}

.fondo-textura {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at top, rgba(140, 47, 47, 0.16), transparent 55%),
    radial-gradient(ellipse at bottom, rgba(201, 162, 39, 0.08), transparent 60%),
    var(--color-fondo);
}

.contenedor {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Cabecera ---------- */

.cabecera {
  border-bottom: 1px solid var(--color-borde);
  background: linear-gradient(180deg, rgba(23, 21, 26, 0.9), rgba(13, 12, 15, 0.6));
  backdrop-filter: blur(6px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.cabecera__contenido {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 14px;
}

.marca__icono {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(201, 162, 39, 0.35));
}

.marca__titulo {
  font-family: var(--fuente-titulos);
  font-size: 1.35rem;
  margin: 0;
  color: var(--color-oro-claro);
  letter-spacing: 0.02em;
}

.marca__subtitulo {
  margin: 2px 0 0;
  font-size: 0.82rem;
  color: var(--color-texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.badge-temporada {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-fondo);
  background: var(--color-oro);
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ---------- Contenido principal ---------- */

.principal {
  padding: 32px 20px 60px;
}

.panel-busqueda {
  background: var(--color-fondo-panel);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  padding: 24px;
  box-shadow: var(--sombra);
  margin-bottom: 28px;
}

.panel-busqueda__label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-texto-suave);
  margin-bottom: 10px;
}

.panel-busqueda__caja {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-fondo);
  border: 1.5px solid var(--color-borde);
  border-radius: var(--radio);
  padding: 12px 16px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.panel-busqueda__caja:focus-within {
  border-color: var(--color-oro);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.18);
}

.icono-buscar {
  color: var(--color-texto-tenue);
  flex-shrink: 0;
}

#input-gremio {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--color-texto);
  font-size: 1rem;
  font-family: var(--fuente-texto);
}

#input-gremio::placeholder {
  color: var(--color-texto-tenue);
}

.panel-busqueda__ayuda {
  margin: 12px 0 0;
  font-size: 0.82rem;
  color: var(--color-texto-tenue);
}

/* ---------- Estados ---------- */

.estado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 48px 20px;
  color: var(--color-texto-suave);
}

.estado__icono {
  font-size: 2rem;
}

.estado--advertencia { color: var(--color-advertencia); }
.estado--error { color: var(--color-error); }

.cargando {
  width: 34px;
  height: 34px;
  border: 3px solid var(--color-borde);
  border-top-color: var(--color-oro);
  border-radius: 50%;
  animation: girar 0.8s linear infinite;
}

@keyframes girar {
  to { transform: rotate(360deg); }
}

/* ---------- Resumen ---------- */

.resumen-resultados {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  font-size: 0.85rem;
  color: var(--color-texto-suave);
}

.resumen-resultados strong {
  color: var(--color-oro-claro);
}

/* ---------- Lista de mapas ---------- */

.lista-mapas {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tarjeta-mapa {
  background: var(--color-fondo-tarjeta);
  border: 1px solid var(--color-borde-suave);
  border-left: 3px solid var(--color-carmesi);
  border-radius: var(--radio);
  padding: 16px 20px;
  animation: aparecer 0.25s ease;
}

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

.tarjeta-mapa__nombre {
  margin: 0 0 12px;
  font-family: var(--fuente-titulos);
  font-size: 1.05rem;
  color: var(--color-texto);
}

.lista-hideouts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.item-hideout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.92rem;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
}

.item-hideout__gremio {
  font-weight: 600;
  color: var(--color-texto);
  overflow-wrap: anywhere;
}

.item-hideout__slot {
  color: var(--color-texto-tenue);
  font-size: 0.78rem;
  margin-right: auto;
  margin-left: 12px;
}

.etiqueta-tipo {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.etiqueta-tipo--hq {
  background: rgba(201, 162, 39, 0.16);
  color: var(--color-oro-claro);
  border: 1px solid rgba(201, 162, 39, 0.35);
}

.etiqueta-tipo--p {
  background: rgba(140, 47, 47, 0.18);
  color: var(--color-carmesi-claro);
  border: 1px solid rgba(140, 47, 47, 0.35);
}

.etiqueta-tipo--estandar {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-texto-suave);
  border: 1px solid var(--color-borde);
}

/* ---------- Pie ---------- */

.pie {
  border-top: 1px solid var(--color-borde);
  padding: 20px 0 32px;
}

.pie p {
  margin: 0;
  font-size: 0.75rem;
  color: var(--color-texto-tenue);
  text-align: center;
}

/* ---------- Responsive ---------- */

@media (max-width: 560px) {
  .cabecera__contenido {
    flex-wrap: wrap;
    padding: 14px 16px;
  }

  .marca__icono {
    width: 36px;
    height: 36px;
  }

  .marca__titulo {
    font-size: 1.1rem;
  }

  .marca__subtitulo {
    font-size: 0.72rem;
  }

  .principal {
    padding: 24px 16px 48px;
  }

  .panel-busqueda {
    padding: 18px;
  }

  .item-hideout {
    flex-wrap: wrap;
  }

  .item-hideout__slot {
    margin-left: 0;
    order: 3;
    width: 100%;
  }
}

@media (max-width: 380px) {
  .marca {
    gap: 10px;
  }

  .marca__icono {
    width: 30px;
    height: 30px;
  }

  .marca__titulo {
    font-size: 0.98rem;
  }

  .badge-temporada {
    font-size: 0.7rem;
    padding: 4px 10px;
  }

  .resumen-resultados {
    gap: 6px 12px;
  }
}

/* ============================================================================
   v2 — Mapa interactivo, cuentas de usuario y panel de administración
   ============================================================================ */

.cabecera__derecha {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.cuenta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cuenta__nombre {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--color-texto);
}

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

.boton {
  appearance: none;
  border: 1px solid var(--color-borde);
  background: linear-gradient(180deg, #2a2430, #211d26);
  color: var(--color-texto);
  border-radius: var(--radio);
  padding: 9px 16px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.1s ease, background 0.15s ease;
}

.boton:hover { border-color: var(--color-oro); }
.boton:active { transform: translateY(1px); }
.boton:focus-visible { outline: 2px solid var(--color-oro-claro); outline-offset: 2px; }

.boton--sutil { background: transparent; color: var(--color-texto-suave); }
.boton--pequeno { padding: 5px 10px; font-size: 0.82rem; }
.boton--peligro { border-color: rgba(201, 79, 79, 0.5); color: var(--color-error); }
.boton--icono { padding: 6px 10px; font-size: 1rem; background: transparent; }

.insignia {
  display: inline-block;
  padding: 3px 9px;
  border: 1px solid var(--color-borde);
  border-radius: 999px;
  font-size: 0.76rem;
  color: var(--color-texto-suave);
  background: rgba(255, 255, 255, 0.02);
}

.insignia--admin {
  border-color: var(--color-oro);
  color: var(--color-oro-claro);
}

/* ----------------------------------------------------------- historial --- */

.panel-historial {
  background: var(--color-fondo-panel);
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio-lg);
  padding: 16px 20px;
  margin-bottom: 20px;
}

.panel-historial__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.panel-historial h2 { font-size: 1rem; margin: 0; font-family: var(--fuente-titulos); }

.historial {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.historial li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-fondo-tarjeta);
  border: 1px solid var(--color-borde-suave);
  border-radius: 999px;
  padding: 4px 12px;
}

.historial__item {
  background: none;
  border: none;
  color: var(--color-texto);
  font: inherit;
  cursor: pointer;
  padding: 0;
}

.historial__item:hover { color: var(--color-oro-claro); }
.historial__detalle { font-size: 0.76rem; color: var(--color-texto-tenue); }
.historial__vacio { color: var(--color-texto-tenue); font-size: 0.88rem; }

/* ------------------------------------------------------ mapa interactivo --- */

.mapa-mundial {
  background: var(--color-fondo-panel);
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio-lg);
  padding: 16px 20px 20px;
  margin-bottom: 22px;
}

.mapa-mundial__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.mapa-mundial h2 { font-family: var(--fuente-titulos); font-size: 1.05rem; margin: 0 0 6px; }
.mapa-mundial__leyenda, .mapa-mundial__pie { color: var(--color-texto-tenue); font-size: 0.8rem; margin: 0; }
.mapa-mundial__pie { margin-top: 8px; }

.lienzo {
  display: block;
  width: 100%;
  height: 460px;
  background: radial-gradient(circle at 50% 40%, #16131a, #0c0b0f 70%);
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio);
  touch-action: none;
  cursor: grab;
}

.lienzo.arrastrando { cursor: grabbing; }
.lienzo.svg--marcando { cursor: crosshair; }

/* Mapa mundial (sobre el mapa del juego) */
.mundo__fondo image { image-rendering: auto; }
.mundo__aristas line { stroke: rgba(20, 16, 12, 0.55); }
.mundo__nodo rect {
  fill: rgba(16, 14, 18, 0.82);
  stroke: rgba(236, 231, 224, 0.55);
  transition: fill 0.15s ease;
}
.mundo__nodo--ocupado rect { fill: #121014; stroke: var(--color-oro); }
.mundo__nodo:hover rect,
.mundo__nodo:focus-visible rect { fill: var(--color-oro-claro); }
.mundo__nodo--destacado rect { fill: var(--color-carmesi-claro); stroke: #fff4c8; }
.mundo__etiqueta {
  /* El tamaño y el grosor del contorno los fija el JS en unidades del mapa. */
  fill: #fff7e6;
  font-family: var(--fuente-texto);
  font-weight: 600;
  paint-order: stroke;
  stroke: rgba(10, 8, 12, 0.9);
  opacity: 0;
  pointer-events: none;
}
.mundo__nodo:hover .mundo__etiqueta,
.mundo__nodo:focus-visible .mundo__etiqueta,
.mundo__nodo--destacado .mundo__etiqueta { opacity: 1; }
.mapa-mundial__atribucion { font-size: 0.72rem; margin-top: 2px; }

/* Mapa de un cluster */
.mapa__terreno { fill: #191520; }
.mapa__borde { fill: none; stroke: rgba(232, 201, 92, 0.8); stroke-width: 2; vector-effect: non-scaling-stroke; }
.mapa__mascara { fill: rgba(9, 8, 11, 0.62); pointer-events: none; }
.mapa__rejilla line { stroke: rgba(255, 255, 255, 0.04); stroke-width: 1.5; }
.mapa__caminos line { stroke: #8a7c5a; stroke-width: 3; stroke-linecap: round; opacity: 0.7; vector-effect: non-scaling-stroke; }
.mapa__caminos--sobre-fondo line { stroke: #ffe28a; stroke-width: 2.5; opacity: 0.85; stroke-dasharray: 6 5; }
.mapa__territorio--sutil polygon { fill: rgba(201, 162, 39, 0.05); stroke-opacity: 0.7; }

.mapa__territorio polygon { fill: rgba(201, 162, 39, 0.08); stroke: var(--color-oro); stroke-width: 1.5; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.mapa__territorio circle { fill: var(--color-oro); }
.mapa__territorio--castle polygon { stroke: var(--color-carmesi-claro); }

.mapa__etiqueta {
  /* Las etiquetas no deben interceptar clics: al marcar la ubicación de
     un hideout, el clic tiene que llegar al mapa que hay debajo. */
  pointer-events: none;
  /* Tamaño y contorno los fija el JS: el texto se dibuja en píxeles. */
  fill: var(--color-texto-suave);
  font-family: var(--fuente-texto);
  paint-order: stroke;
  stroke: #0d0c0f;
}

.mapa__etiqueta--salida { fill: var(--color-oro-claro); font-weight: 600; }
.mapa__etiqueta--pin { fill: #fff; font-weight: 600; }
.mapa__rotulo .mapa__etiqueta { fill: #f3e3b0; }

.mapa__salida { cursor: pointer; }
.mapa__salida circle { fill: rgba(20, 16, 12, 0.55); stroke: var(--color-oro); stroke-width: 2; }
.mapa__salida-centro { fill: var(--color-oro) !important; }
.mapa__salida:hover circle { fill: rgba(232, 201, 92, 0.35); }

.mapa__pin { cursor: pointer; }
.mapa__pin-cuerpo { fill: var(--color-exito); stroke: #0d0c0f; stroke-width: 1.5; }
.mapa__pin-centro { fill: #0d0c0f; }
.mapa__pin--hq .mapa__pin-cuerpo { fill: var(--color-oro); }
.mapa__pin--personal .mapa__pin-cuerpo { fill: #5b8fd9; }
.mapa__pin--destacado .mapa__pin-cuerpo { stroke: #fff4c8; stroke-width: 2.5; }

/* -------------------------------------------------- ventanas flotantes --- */

.ventana {
  border: none;
  padding: 0;
  background: transparent;
  max-width: min(1180px, 96vw);
  width: 100%;
}

.ventana::backdrop { background: rgba(5, 4, 7, 0.78); backdrop-filter: blur(3px); }

.ventana--estrecha { max-width: min(420px, 94vw); }

.ventana__contenido {
  background: var(--color-fondo-panel);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra);
  color: var(--color-texto);
  overflow: hidden;
}

.ventana__cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--color-borde-suave);
}

.ventana__cabecera h2 { font-family: var(--fuente-titulos); font-size: 1.3rem; margin: 0 0 8px; }
.ventana__insignias { display: flex; flex-wrap: wrap; gap: 6px; }
.ventana__controles { display: flex; gap: 8px; align-items: center; }

.ventana__cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr);
  gap: 18px;
  padding: 18px 22px;
}

.lienzo--mapa { height: 540px; }

.leyenda {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 10px 0 0;
  padding: 0;
  font-size: 0.8rem;
  color: var(--color-texto-suave);
}

.leyenda li { display: inline-flex; align-items: center; gap: 6px; }

.punto { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.punto--hq { background: var(--color-oro); }
.punto--personal { background: #5b8fd9; }
.punto--estandar { background: var(--color-exito); }
.punto--salida { background: rgba(201, 162, 39, 0.4); border: 2px solid var(--color-oro); }

.ventana__panel h3 { font-family: var(--fuente-titulos); font-size: 1rem; margin: 0 0 10px; }

.lista-hideouts-detalle {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 420px;
  overflow-y: auto;
}

.hideout-fila {
  background: var(--color-fondo-tarjeta);
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio);
  padding: 10px 12px;
  cursor: pointer;
}

.hideout-fila--activa { border-color: var(--color-oro); }
.hideout-fila--destacada { box-shadow: inset 3px 0 0 var(--color-carmesi-claro); }

.hideout-fila__cabecera { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hideout-fila__logo { border-radius: 6px; object-fit: cover; }
.hideout-fila__detalle { font-size: 0.8rem; color: var(--color-texto-tenue); margin-top: 4px; }
.hideout-fila__acciones { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

.ventana__admin {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--color-borde);
}

.ventana__ayuda { font-size: 0.82rem; color: var(--color-texto-suave); margin: 0 0 10px; }

.formulario-linea { display: flex; flex-wrap: wrap; gap: 8px; }
.formulario-linea input, .formulario-linea select {
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  color: var(--color-texto);
  padding: 7px 10px;
  font: inherit;
  min-width: 0;
  flex: 1 1 120px;
}
.entrada-corta { flex: 0 0 70px; }

.ventana__pie {
  padding: 12px 22px 18px;
  border-top: 1px solid var(--color-borde-suave);
  color: var(--color-texto-tenue);
  font-size: 0.78rem;
}

.ventana-mapa__vacio { color: var(--color-texto-tenue); font-size: 0.88rem; }

/* ------------------------------------------------------------ formulario -- */

.formulario { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px 24px; }
.formulario label { font-size: 0.85rem; color: var(--color-texto-suave); }
.formulario input {
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  color: var(--color-texto);
  padding: 10px 12px;
  font: inherit;
  margin-bottom: 6px;
}
.formulario input:focus-visible { outline: 2px solid var(--color-oro-claro); outline-offset: 1px; }
.formulario__mensaje { color: var(--color-advertencia); font-size: 0.83rem; min-height: 1.2em; margin: 4px 0 8px; }
.formulario .boton { margin-top: 4px; }

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

.tarjeta-mapa__encabezado {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  padding: 0 0 8px;
}

.tarjeta-mapa__encabezado:hover .tarjeta-mapa__nombre { color: var(--color-oro-claro); }
.tarjeta-mapa__meta { font-size: 0.78rem; color: var(--color-texto-tenue); }
.tarjeta-mapa__accion {
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--color-oro);
  border: 1px solid var(--color-borde);
  border-radius: 999px;
  padding: 3px 10px;
}

.item-hideout__logo { border-radius: 5px; object-fit: cover; }
.item-hideout__ubicado { font-size: 0.8rem; }

/* ----------------------------------------------------------- admin panel -- */

.panel-admin {
  background: var(--color-fondo-panel);
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio-lg);
  padding: 18px 22px 24px;
  margin-top: 24px;
}

.panel-admin__cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-admin h2 { font-family: var(--fuente-titulos); margin: 0; font-size: 1.15rem; }
.panel-admin h3 { font-family: var(--fuente-titulos); font-size: 0.98rem; margin: 22px 0 10px; }
.panel-admin__mensaje { color: var(--color-advertencia); font-size: 0.85rem; min-height: 1.2em; }

.panel-admin input[type="search"], .panel-admin input[type="text"] {
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  color: var(--color-texto);
  padding: 8px 12px;
  font: inherit;
  width: 100%;
  max-width: 380px;
}

.admin-resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.admin-tarjeta {
  background: var(--color-fondo-tarjeta);
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-tarjeta__titulo { font-size: 0.76rem; color: var(--color-texto-tenue); }
.admin-tarjeta strong { font-size: 1.25rem; font-family: var(--fuente-titulos); }

.admin-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.admin-fila {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--color-fondo-tarjeta);
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio);
  padding: 8px 12px;
}

.admin-fila__logo { border-radius: 6px; object-fit: cover; background: #0d0c0f; }
.admin-fila__nombre { flex: 1 1 200px; }
.admin-fila__conteo { font-size: 0.78rem; color: var(--color-texto-tenue); }
.admin-fila__archivo { font-size: 0.78rem; color: var(--color-texto-suave); max-width: 210px; }

.admin-fila select {
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  color: var(--color-texto);
  padding: 6px 8px;
  font: inherit;
}

.admin-lista--compacta li {
  font-size: 0.8rem;
  color: var(--color-texto-suave);
  background: none;
  border: none;
  padding: 2px 0;
}

@media (max-width: 900px) {
  .ventana__cuerpo { grid-template-columns: 1fr; }
  .lienzo--mapa { height: 380px; }
  .lienzo { height: 340px; }
}

/* ------------------------------------------------------ fondo del mapa --- */

.selector-fondo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.selector-fondo__opciones {
  display: inline-flex;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  overflow: hidden;
}

.selector-fondo__boton {
  background: transparent;
  border: none;
  border-right: 1px solid var(--color-borde);
  color: var(--color-texto-suave);
  font: inherit;
  font-size: 0.82rem;
  padding: 6px 12px;
  cursor: pointer;
}

.selector-fondo__boton:last-child { border-right: none; }
.selector-fondo__boton[aria-pressed="true"] { background: rgba(201, 162, 39, 0.18); color: var(--color-oro-claro); }
.selector-fondo__boton:disabled { opacity: 0.4; cursor: not-allowed; }
.selector-fondo__boton:focus-visible { outline: 2px solid var(--color-oro-claro); outline-offset: -2px; }

.selector-fondo__caminos {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--color-texto-suave);
}

.lienzo--mapa { background: #0b0a0d; }
#mapa-mundial__svg { background: #46545c; }

.ajuste-imagen { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--color-borde); }
.ajuste-imagen h4 { margin: 0 0 6px; font-size: 0.9rem; font-family: var(--fuente-titulos); }
.ajuste-imagen__archivo { font-size: 0.8rem; color: var(--color-texto-suave); max-width: 100%; }
.ajuste-imagen__controles { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.ajuste-imagen__fila {
  display: grid;
  grid-template-columns: 72px 1fr 48px;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--color-texto-suave);
}
.ajuste-imagen__fila select {
  grid-column: 2 / 4;
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  color: var(--color-texto);
  padding: 4px 8px;
  font: inherit;
}
.ajuste-imagen__fila output { text-align: right; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- pestañas --- */

.pestanas {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--color-borde);
}

.pestanas__boton {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 10px 14px;
  color: var(--color-texto-suave);
  font-family: var(--fuente-titulos);
  font-size: 0.98rem;
  font-weight: 600;
  cursor: pointer;
}

.pestanas__boton:hover { color: var(--color-texto); }
.pestanas__boton[aria-selected="true"] { color: var(--color-oro-claro); border-bottom-color: var(--color-oro); }
.pestanas__boton:focus-visible { outline: 2px solid var(--color-oro-claro); outline-offset: -2px; }

/* ---------------------------------------------------- caminos de Avalon --- */

.caminos-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 16px;
}

.caminos-cabecera__titulo {
  font-family: var(--fuente-titulos);
  color: var(--color-oro-claro);
  font-size: 1.15rem;
  margin: 0;
}

.caminos-estado {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  color: var(--color-texto-suave);
}

.caminos-estado__punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-exito);
  box-shadow: 0 0 6px var(--color-exito);
  flex-shrink: 0;
}

.caminos-estado--viejo .caminos-estado__punto { background: var(--color-advertencia); box-shadow: none; }
.caminos-estado--viejo { color: var(--color-advertencia); }
.caminos-estado--error .caminos-estado__punto { background: var(--color-error); box-shadow: none; }
.caminos-estado--error { color: var(--color-error); }

.entrada-busqueda {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--color-texto);
  font-size: 1rem;
  font-family: var(--fuente-texto);
}

.entrada-busqueda::placeholder { color: var(--color-texto-tenue); }

.caminos-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 14px;
}

.caminos-filtros select {
  background: var(--color-fondo);
  color: var(--color-texto);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: 7px 10px;
  font: inherit;
  font-size: 0.88rem;
}

.caminos-filtros select:focus-visible { outline: 2px solid var(--color-oro-claro); outline-offset: 1px; }

.casilla {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.88rem;
  color: var(--color-texto-suave);
  cursor: pointer;
}

.casilla input { accent-color: var(--color-oro); width: 16px; height: 16px; }

.caminos-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
}

.tarjeta-camino {
  appearance: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--color-fondo-tarjeta);
  border: 1px solid var(--color-borde-suave);
  border-left: 3px solid var(--color-borde);
  border-radius: var(--radio);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.1s ease;
}

.tarjeta-camino:hover { border-color: var(--color-oro); }
.tarjeta-camino:focus-visible { outline: 2px solid var(--color-oro-claro); outline-offset: 2px; }
.tarjeta-camino--activa { border-left-color: var(--color-exito); }
.tarjeta-camino--zonaNegra { border-left-color: var(--color-carmesi); }
.tarjeta-camino--zonaNegra.tarjeta-camino--activa { border-left-color: var(--color-exito); }

.tarjeta-camino__cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.tarjeta-camino__nombre {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.tarjeta-camino__conexiones {
  font-size: 0.74rem;
  color: var(--color-texto-tenue);
  white-space: nowrap;
}

.tarjeta-camino__conexiones--si { color: var(--color-exito); font-weight: 600; }

.tarjeta-camino__meta {
  font-size: 0.78rem;
  color: var(--color-texto-suave);
}

.caminos-mas { display: block; margin: 16px auto 0; }

.caminos-atribucion {
  margin: 28px 0 0;
  font-size: 0.78rem;
  color: var(--color-texto-tenue);
}

.caminos-atribucion a { color: var(--color-oro); }

.caminos-detalle {
  background: var(--color-fondo-panel);
  border: 1px solid var(--color-oro);
  border-radius: var(--radio-lg);
  padding: 18px 20px;
  margin-bottom: 22px;
  box-shadow: var(--sombra);
}

.caminos-detalle__cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.caminos-detalle__titulo {
  font-family: var(--fuente-titulos);
  color: var(--color-oro-claro);
  font-size: 1.2rem;
  margin: 0 0 6px;
  overflow-wrap: anywhere;
}

.caminos-detalle__cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 20px;
  margin-top: 14px;
}

.caminos-detalle__bloque h4 {
  margin: 0 0 10px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-texto-suave);
}

.caminos-detalle__vacio {
  margin: 0;
  font-size: 0.88rem;
  color: var(--color-texto-tenue);
}

.lista-conexiones {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.conexion {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  background: var(--color-fondo-tarjeta);
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio);
  padding: 9px 12px;
}

.conexion__sentido {
  color: var(--color-oro);
  font-weight: 700;
  width: 1em;
  text-align: center;
}

.conexion__destino {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 140px;
}

.conexion__nombre {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--color-texto);
  text-align: left;
  cursor: pointer;
  overflow-wrap: anywhere;
}

button.conexion__nombre:hover { color: var(--color-oro-claro); text-decoration: underline; }
.conexion__nombre--oculto { color: var(--color-texto-tenue); font-style: italic; cursor: default; }
.conexion__meta { font-size: 0.76rem; color: var(--color-texto-tenue); }

.conexion__tiempo {
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-exito);
  white-space: nowrap;
}

.conexion__tiempo--pronto { color: var(--color-advertencia); }
.conexion__tiempo--urgente { color: var(--color-error); font-weight: 600; }
.conexion__tiempo--cerrada { color: var(--color-texto-tenue); text-decoration: line-through; }
.conexion__tiempo--desconocido { color: var(--color-texto-tenue); }

.caminos-datos {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  margin: 0;
  font-size: 0.86rem;
}

.caminos-datos dt { color: var(--color-texto-suave); }
.caminos-datos dd { margin: 0; }

@media (max-width: 700px) {
  .caminos-detalle__cuerpo { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .caminos-detalle { padding: 14px; }
  .pestanas__boton { padding: 9px 10px; font-size: 0.9rem; }
  .caminos-filtros select { flex: 1; min-width: 0; }
}

/* -------------------------------------------- registro desde capturas --- */

.registro {
  background: var(--color-fondo-panel);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  padding: 16px 20px;
  margin-bottom: 22px;
}

.registro__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.registro__titulo {
  font-family: var(--fuente-titulos);
  color: var(--color-oro-claro);
  font-size: 1.02rem;
  margin: 0;
}

.registro__subtitulo {
  margin: 2px 0 0;
  font-size: 0.82rem;
  color: var(--color-texto-suave);
}

.registro__cuerpo { margin-top: 14px; }
.registro__aviso { padding: 16px; }

.registro__pasos {
  margin: 0 0 14px;
  padding-left: 20px;
  font-size: 0.88rem;
  color: var(--color-texto-suave);
  display: grid;
  gap: 4px;
}

kbd {
  font-family: var(--fuente-texto);
  font-size: 0.78rem;
  padding: 1px 6px;
  border: 1px solid var(--color-borde);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--color-fondo);
  color: var(--color-texto);
}

.registro__zona {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 22px 16px;
  border: 2px dashed var(--color-borde);
  border-radius: var(--radio);
  text-align: center;
  color: var(--color-texto-suave);
  font-size: 0.9rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.registro__zona strong { color: var(--color-texto); }
.registro__zona:focus-visible { outline: 2px solid var(--color-oro-claro); outline-offset: 2px; }
.registro__zona--activa { border-color: var(--color-oro); background: rgba(201, 162, 39, 0.06); }
.registro__archivos { cursor: pointer; }

.registro__estado {
  min-height: 1.2em;
  margin: 10px 0 0;
  font-size: 0.86rem;
  color: var(--color-exito);
}

.registro__lista {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.registro__fila {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) auto;
  grid-template-areas:
    'vista campos quitar'
    'vista estado estado';
  gap: 8px 14px;
  align-items: start;
  background: var(--color-fondo-tarjeta);
  border: 1px solid var(--color-borde-suave);
  border-left: 3px solid var(--color-borde);
  border-radius: var(--radio);
  padding: 10px 12px;
}

.registro__fila[data-estado='lista'] { border-left-color: var(--color-exito); }
.registro__fila[data-estado='revisar'] { border-left-color: var(--color-advertencia); }
.registro__fila[data-estado='error'] { border-left-color: var(--color-error); }

.registro__vista {
  grid-area: vista;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  background: var(--color-fondo);
  border-radius: 6px;
  overflow: hidden;
}

.registro__vista canvas { width: 100%; height: auto; display: block; }
.registro__sin-vista { font-size: 0.76rem; color: var(--color-texto-tenue); padding: 8px; }

.registro__campos {
  grid-area: campos;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px 10px;
}

.registro__campo {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.76rem;
  color: var(--color-texto-suave);
}

.registro__campo input {
  background: var(--color-fondo);
  color: var(--color-texto);
  border: 1px solid var(--color-borde);
  border-radius: 6px;
  padding: 6px 8px;
  font: inherit;
  font-size: 0.88rem;
  min-width: 0;
}

.registro__campo input:focus-visible { outline: 2px solid var(--color-oro-claro); outline-offset: 1px; }

.registro__tiempo {
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 6px;
}

.registro__tiempo input { width: 3.6em; text-align: right; }

.campo--dudoso,
.registro__tiempo.campo--dudoso input {
  border-color: var(--color-advertencia) !important;
  box-shadow: 0 0 0 2px rgba(217, 164, 65, 0.2);
}

.registro__quitar { grid-area: quitar; }

.registro__fila-estado {
  grid-area: estado;
  margin: 0;
  font-size: 0.8rem;
  color: var(--color-texto-suave);
}

.registro__fila[data-estado='revisar'] .registro__fila-estado { color: var(--color-advertencia); }
.registro__fila[data-estado='error'] .registro__fila-estado { color: var(--color-error); }

.registro__acciones {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.registro__privacidad {
  margin: 12px 0 0;
  font-size: 0.76rem;
  color: var(--color-texto-tenue);
}

.conexion__fuente {
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--color-borde);
  color: var(--color-texto-tenue);
  white-space: nowrap;
}

.conexion__fuente--gremio {
  border-color: rgba(76, 175, 125, 0.5);
  color: var(--color-exito);
}

.conexion__borrar {
  appearance: none;
  border: none;
  background: none;
  color: var(--color-texto-tenue);
  cursor: pointer;
  padding: 0 2px;
  font-size: 0.8rem;
}

.conexion__borrar:hover { color: var(--color-error); }

@media (max-width: 560px) {
  .registro { padding: 14px; }
  .registro__fila {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'vista quitar'
      'campos campos'
      'estado estado';
  }
}

/* ------------------------------------------------ relojes compartidos --- */

.reloj {
  font-variant-numeric: tabular-nums;
  color: var(--color-exito);
  white-space: nowrap;
}

.reloj--pronto { color: var(--color-advertencia); }
.reloj--urgente { color: var(--color-error); font-weight: 600; }
.reloj--cerrado { color: var(--color-texto-tenue); text-decoration: line-through; }

/* ---------------------------------------------------------------- rutas --- */

.caminos-rutas {
  background: var(--color-fondo-panel);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  padding: 16px 20px;
  margin-bottom: 22px;
}

.bloque-rutas { margin-bottom: 14px; }

.lista-rutas {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ruta {
  background: var(--color-fondo-tarjeta);
  border: 1px solid var(--color-borde-suave);
  border-left: 3px solid var(--color-oro);
  border-radius: var(--radio);
  padding: 10px 12px;
}

.ruta__cabecera {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-bottom: 8px;
}

.ruta__titulo {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.ruta__tramos {
  font-size: 0.76rem;
  color: var(--color-texto-tenue);
}

.ruta__cierre { font-size: 0.84rem; margin-left: auto; }

.ruta__pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.ruta__zona {
  display: flex;
  flex-direction: column;
  padding: 5px 9px;
  border: 1px solid var(--color-borde);
  border-radius: 8px;
  background: var(--color-fondo);
  min-width: 0;
}

.ruta__zona--resaltada {
  border-color: var(--color-oro);
  box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.18);
}

.ruta__nombre {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--color-texto);
  text-align: left;
  overflow-wrap: anywhere;
}

button.ruta__nombre { cursor: pointer; }
button.ruta__nombre:hover { color: var(--color-oro-claro); text-decoration: underline; }
.ruta__meta { font-size: 0.72rem; color: var(--color-texto-tenue); }

.ruta__tramo {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.74rem;
}

.ruta__tramo::before {
  content: '→';
  color: var(--color-oro);
  font-weight: 700;
}

/* ------------------------------------------ rutas en el registro --- */

.registro__en-ruta {
  grid-area: estado;
  justify-self: end;
  font-size: 0.74rem;
  color: var(--color-oro-claro);
}

.registro__rutas {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.registro__ruta {
  border: 1px solid var(--color-oro);
  border-radius: var(--radio);
  padding: 10px 12px;
  background: rgba(201, 162, 39, 0.05);
}

.registro__ruta--separada {
  border-color: var(--color-borde);
  background: none;
  opacity: 0.8;
}

.registro__ruta-titulo { margin: 0; font-size: 0.86rem; }
.registro__ruta-zonas {
  margin: 4px 0 8px;
  font-size: 0.86rem;
  color: var(--color-texto-suave);
  overflow-wrap: anywhere;
}
.registro__ruta-acciones { display: flex; flex-wrap: wrap; gap: 8px; }

/* --------------------------------------- rutas en la vista de hideouts --- */

.rutas-hideout {
  margin-top: 10px;
  border-top: 1px solid var(--color-borde-suave);
  padding-top: 10px;
}

.rutas-hideout__alternar {
  appearance: none;
  border: 1px solid var(--color-oro);
  background: rgba(201, 162, 39, 0.08);
  color: var(--color-oro-claro);
  border-radius: 999px;
  padding: 4px 12px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.rutas-hideout__alternar::after { content: ' ▾'; }
.rutas-hideout__alternar[aria-expanded='true']::after { content: ' ▴'; }
.rutas-hideout__alternar:focus-visible { outline: 2px solid var(--color-oro-claro); outline-offset: 2px; }

.rutas-hideout__panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.rutas-hideout__subtitulo {
  margin: 4px 0 0;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-texto-suave);
}

.rutas-hideout__conexiones {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.84rem;
}

.rutas-hideout__conexiones li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}

.rutas-hideout__sentido { color: var(--color-oro); font-weight: 700; }
.rutas-hideout__destino { font-weight: 600; }
.rutas-hideout__meta { font-size: 0.74rem; color: var(--color-texto-tenue); }
.rutas-hideout__panel > .boton { align-self: flex-start; }

@media (max-width: 560px) {
  .caminos-rutas { padding: 14px; }
  .ruta__cierre { margin-left: 0; }
}