/* Estilos comunes para el panel web y mensajes relacionados con Discord */
body {
  font-family: Inter, Roboto, Arial, sans-serif;
  background: #0f1720;
  color: #e6eef6;
  margin: 0;
  padding: 16px;
}

/* Pulido visual general: mismas transiciones/foco en todo el sitio para que
   los estados de interacción (hover, foco por teclado, scroll) se sientan
   consistentes en vez de depender del estilo por defecto del navegador. */
::selection { background: #2563eb; color: #fff; }

* { scrollbar-color: #26364a #0b1220; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0b1220; }
::-webkit-scrollbar-thumb { background: #26364a; border-radius: 6px; border: 2px solid #0b1220; }
::-webkit-scrollbar-thumb:hover { background: #33475e; }

a, button, input, select, textarea {
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, opacity .15s ease, transform .1s ease;
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #4fc3f7;
  outline-offset: 2px;
}

textarea:focus, input[type="text"]:focus, select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
  outline: none;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
}

h1, h2, h3 {
  color: #f1f5f9;
}

.card {
  background: #0b1220;
  border: 1px solid #1f2a37;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

label {
  display: block;
  margin-bottom: 6px;
  color: #9fb3cc;
}

textarea, input[type="text"], input[type="number"] {
  width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid #253444;
  background: #071026;
  color: #e6eef6;
  box-sizing: border-box;
}

select {
  width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid #253444;
  background: #071026;
  color: #e6eef6;
  box-sizing: border-box;
}

button {
  background: #2563eb;
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
}

button:hover:not(:disabled) { filter: brightness(1.12); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { cursor: not-allowed; opacity: 0.55; }

button.secondary {
  background: #475569;
}

button.danger {
  background: #b91c1c;
}

.row { display: flex; gap: 8px; }
.col { flex: 1; }

.status { color: #9fb3cc; margin-bottom: 8px; }

.muted { color: #7b8b99; font-size: 0.9em; }

/* Layout con barra de navegacion superior */
/* min-height resta el padding vertical del body (16px arriba + 16px abajo):
   sin este ajuste, min-height:100vh + el padding del body sumaban más de
   100vh de alto total y forzaban scroll de página en cualquier pantalla,
   incluso con poco contenido. */
.app-shell { display: flex; flex-direction: column; min-height: calc(100vh - 32px); }
.sidebar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  width: 100%;
  background: linear-gradient(90deg,#071026 0%, #0b1220 100%);
  border-bottom: 1px solid #16202a;
  padding: 12px 16px;
  box-sizing: border-box;
}
.sidebar h2 {
  font-size: 18px; margin: 0 16px 0 0; padding-right: 16px; color: #cfe7ff;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}
.nav-link {
  display: inline-block; padding: 8px 10px; color: #9fb3cc; text-decoration: none;
  border-radius: 6px; border-bottom: 3px solid transparent;
}
.nav-link:hover { background: rgba(37, 99, 235, 0.12); color: #eaf4ff; }
.nav-link.active {
  background: rgba(37, 99, 235, 0.18); color: #eaf4ff; font-weight: 600;
  border-bottom: 3px solid #4fc3f7;
}

.main-content {
  flex: 1; padding: 24px; background: linear-gradient(180deg,#071026 0%, #051018 100%);
  animation: fade-in .25s ease;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* Fondo tematico para las paginas del Eje: degradado oscuro con un tono rojo
   sutil (mismo rojo que ya se usaba para .faction.eje) mas una trama
   diagonal muy tenue, todo generado por CSS -- sin imagenes ni simbologia
   historica, solo para diferenciar visualmente del lado Aliado. */
.main-content.axis-theme {
  background:
    radial-gradient(circle at 12% -10%, rgba(212, 32, 32, 0.20), transparent 45%),
    repeating-linear-gradient(135deg, rgba(212, 32, 32, 0.045) 0px, rgba(212, 32, 32, 0.045) 2px, transparent 2px, transparent 14px),
    linear-gradient(180deg, #1a0e0e 0%, #0d0808 55%, #051018 100%);
}

/* Fondos tematicos adicionales (misma idea que .axis-theme arriba: solo
   gradientes CSS, sin imagenes ni simbologia de ningun bando/regimen) para
   diferenciar visualmente las secciones de mapa, investigacion y
   produccion/envios del panel. Todos oscuros a proposito -- nada de fondos
   claros/blancos en el panel -- asi que ninguno necesita tocar el color de
   texto/tarjetas por defecto. */

/* Archivo clasificado: variante mas texturizada de .axis-theme (mismo rojo
   apagado + rayado diagonal, mas viñeta). Se usa tanto en las paginas de
   mapa (neutral) como en Investigacion del Eje. */
.main-content.theme-classified {
  background:
    repeating-linear-gradient(135deg, rgba(212, 32, 32, 0.05) 0px, rgba(212, 32, 32, 0.05) 2px, transparent 2px, transparent 14px),
    radial-gradient(circle at 22% 20%, rgba(255, 255, 255, 0.035), transparent 45%),
    radial-gradient(circle at 82% 78%, rgba(0, 0, 0, 0.4), transparent 55%),
    linear-gradient(180deg, #1c0e0e 0%, #100909 55%, #08080a 100%);
}

/* Investigacion Aliados: mismo espiritu que .theme-classified (rayas +
   viñeta oscura) pero con el azul de .faction.aliado en vez del rojo del
   Eje, y lineas horizontales (como columnas de periodico) en vez de
   diagonales, para diferenciarla a simple vista. */
.main-content.theme-newspaper {
  background:
    repeating-linear-gradient(0deg, rgba(160, 190, 230, 0.05) 0px, rgba(160, 190, 230, 0.05) 1px, transparent 1px, transparent 24px),
    radial-gradient(circle at 18% 20%, rgba(32, 128, 212, 0.18), transparent 50%),
    radial-gradient(circle at 82% 80%, rgba(0, 0, 0, 0.4), transparent 55%),
    linear-gradient(180deg, #0d1520 0%, #0a0f16 55%, #060a10 100%);
}

/* Produccion + Envios (ambos bandos): tono calido/laton oscuro con lineas
   horizontales tipo telex y un "sello" circular muy tenue -- neutral, no
   ligado a ningun bando. */
.main-content.theme-telegram {
  background:
    repeating-linear-gradient(180deg, rgba(196, 145, 74, 0.05) 0px, rgba(196, 145, 74, 0.05) 1px, transparent 1px, transparent 21px),
    radial-gradient(circle at 88% 18%, rgba(196, 145, 74, 0.10) 0 58px, transparent 60px),
    radial-gradient(circle at 15% 85%, rgba(0, 0, 0, 0.32), transparent 50%),
    linear-gradient(180deg, #1c1712 0%, #100d0a 60%, #08070a 100%);
}

.header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom: 16px; }
.brand { font-weight:700; color:#eaf4ff; }

/* Estilo tipo tarjeta más ancho para contenido principal */
.card.wide { max-width: 900px; }

@media (max-width: 800px) {
  .sidebar { flex-wrap: nowrap; overflow-x: auto; }
}

/* Restaurar estilos previos para la página de reservas (apariencia anterior)
   Estos estilos replican la versión anterior que estaban embebidos en /reservas */
.faction { margin: 20px 0; border: 2px solid #444; padding: 15px; border-radius: 10px; }
.faction.eje { border-color: #d42020; }
.faction.aliado { border-color: #2080d4; }
.faction h2 { margin-top: 0; }
.category { margin: 15px 0; background: #1f1f1f; padding: 12px; border-radius: 8px; }
.category h3 { margin-top: 0; }
.country { margin: 10px 0; }
.country-name { font-weight: bold; color: #ffd54f; margin-bottom: 8px; }
.vehicle { display: flex; justify-content: space-between; padding: 8px 10px; margin: 3px 0; background: #222; border-radius: 6px; }
.vehicle.full { background: #3f1f1f; color: #c7c7c7; }
.vehicle-name { flex: 1; }
.vehicle-count { text-align: right; min-width: 90px; }
.reserved-by { font-size: 0.85em; color: #bbb; margin-top: 4px; }
.back-link { margin-bottom: 20px; }

/* Login page tweaks */
.login-card { max-width: 640px; margin: 36px auto; padding: 18px; }
.login-button { display:inline-block; padding:10px 14px; background:#586cf5; color:#fff; border-radius:8px; text-decoration:none; }
.login-button:hover { filter: brightness(1.12); box-shadow: 0 4px 14px rgba(88, 108, 245, 0.35); }

/* Reserva semanal aliados */
.weekly-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}

.weekly-slot {
  background: #121d2c;
  border: 1px solid #22364d;
  border-radius: 8px;
  padding: 10px;
}

.weekly-slot button {
  margin-top: 8px;
  margin-right: 6px;
}

.weekly-slot.empty {
  opacity: 0.75;
  border-style: dashed;
}

.slot-title {
  color: #a9d1ff;
  font-weight: 700;
  margin-bottom: 6px;
}

.slash-list {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #253444;
  background: #071026;
  color: #e6eef6;
  min-height: 120px;
}

.slash-group {
  border: 1px solid #22364d;
  border-radius: 6px;
  background: #0b1628;
  margin-bottom: 8px;
}

.slash-group summary {
  cursor: pointer;
  padding: 8px 10px;
  color: #b9dbff;
  font-weight: 700;
}

.slash-group ul {
  margin: 0;
  padding: 0 18px 10px 30px;
}

.slash-group li {
  margin: 4px 0;
  color: #d8e8f8;
}

/* Dentro de un grupo por nación, los sub-grupos por tipo (Tanques/Aviones/
   Barcos) van uno al lado del otro en vez de apilados. */
.slash-nation-group > .slash-type-row {
  padding: 0 10px 10px 10px;
}

.slash-type-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.slash-type-row > .slash-group {
  flex: 1 1 160px;
  min-width: 160px;
  margin-bottom: 0;
}

/* Barra de progreso de investigación (nombre del vehículo + % hasta el coste) */
.research-progress {
  margin: 6px 0;
  font-size: 0.9em;
  color: #d8e8f8;
}

.research-progress-track {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: #071026;
  border: 1px solid #253444;
  overflow: hidden;
  margin-top: 4px;
}

.research-progress-fill {
  height: 100%;
  background: #2563eb;
}

/* Fichas de vehiculo (base de datos) -- misma composicion que la tarjeta de
   referencia (foto a la izquierda, pastillas de datos a la derecha) pero con
   la paleta oscura del resto del panel en vez del beige/dorado del mockup. */
.vdb-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vdb-card {
  display: flex;
  background: #0b1220;
  border: 1px solid #1f2a37;
  border-radius: 12px;
  overflow: hidden;
}

.vdb-card-img {
  flex: 0 0 340px;
  align-self: stretch;
  background: #071026;
  border-right: 1px solid #1f2a37;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  box-sizing: border-box;
}

.vdb-card-img-frame {
  position: relative;
  width: 100%;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Lápiz para editar la URL de la imagen -- oculto hasta que se pasa el
   ratón por la foto, y siempre visible en pantallas táctiles. */
.vdb-img-edit-toggle {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #253444;
  border-radius: 999px;
  background: rgba(11, 18, 32, 0.85);
  color: #e6eef6;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s ease;
}

.vdb-card-img-frame:hover .vdb-img-edit-toggle,
.vdb-img-edit-toggle:focus-visible {
  opacity: 1;
}

/* Buscador de vehículo existente (propuesta de actualización): en vez de un
   <select> con cientos de opciones, se filtra en vivo y solo se muestran
   las coincidencias en un desplegable superpuesto. */
.vp-target-combo { position: relative; }

.vp-target-results {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  background: #071026;
  border: 1px solid #253444;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}

.vp-target-result {
  padding: 8px 10px;
  cursor: pointer;
  color: #e6eef6;
}

.vp-target-result:hover,
.vp-target-result.active {
  background: #1f2a37;
}

.vp-target-result.empty {
  color: #7b8b99;
  cursor: default;
}

.vp-target-result.empty:hover {
  background: transparent;
}

@media (hover: none) {
  .vdb-img-edit-toggle { opacity: 1; }
}

.vdb-card-img img {
  max-width: 100%;
  max-height: 260px;
  object-fit: contain;
  display: block;
}

.vdb-card-noimg {
  color: #7b8b99;
  font-size: 0.85em;
  text-align: center;
}

.vdb-img-url-input {
  width: 100%;
  padding: 6px 8px;
  font-size: 0.75rem;
  border-radius: 6px;
  border: 1px solid #253444;
  background: #0b1220;
  color: #e6eef6;
  box-sizing: border-box;
}

.vdb-card-body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 22px 26px;
}

.vdb-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.vdb-card-title {
  margin: 0;
  font-size: 1.7rem;
  color: #f1f5f9;
}

/* Boton "editar" arriba a la derecha de la ficha -- misma composicion (pill
   con borde) que el mockup de referencia, con los colores del sitio. */
.vdb-edit-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid #4fc3f7;
  color: #4fc3f7;
  background: transparent;
  border-radius: 999px;
  padding: 0.45rem 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.vdb-edit-btn:hover {
  background: rgba(79, 195, 247, 0.12);
}

.vdb-card-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Botones de Staff (editar campos / eliminar) -- mismo estilo "pill con
   borde" que .vdb-edit-btn, pero con su propio color de acento para
   distinguirlos de "Proponer actualización". */
.vdb-staff-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid #ffd54f;
  color: #ffd54f;
  background: transparent;
  border-radius: 999px;
  padding: 0.45rem 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}

.vdb-staff-btn:hover {
  background: rgba(255, 213, 79, 0.12);
}

.vdb-staff-btn.vdb-danger-btn {
  border-color: #e35555;
  color: #e35555;
}

.vdb-staff-btn.vdb-danger-btn:hover {
  background: rgba(227, 85, 85, 0.12);
}

.vdb-edit-form {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed #253444;
}

.vdb-history-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.vdb-history-row {
  border: 1px solid #1f2a37;
  border-radius: 8px;
  padding: 10px 12px;
  background: #071026;
}

.vdb-pill-row {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 10px;
  margin-bottom: 14px;
}

.vdb-pill {
  flex: 0 0 auto;
  border: 1px solid #253444;
  border-radius: 8px;
  padding: 7px 14px;
  background: #071026;
  white-space: nowrap;
}

.vdb-pill.accent {
  border-left: 4px solid var(--pill-c, #9fb3cc);
}

.vdb-pill .l {
  display: block;
  color: #7b8b99;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.68rem;
  margin-bottom: 3px;
}

.vdb-pill .v {
  color: #e6eef6;
  font-weight: 600;
  font-size: 0.95rem;
}

.vdb-pill.accent .v {
  color: var(--pill-c, #9fb3cc);
  text-transform: uppercase;
}

.vdb-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 16px 0;
}

.vdb-stat {
  border-left: 4px solid #4fc3f7;
  padding-left: 12px;
}

.vdb-stat.accent {
  border-left-color: var(--stat-c, #4fc3f7);
}

.vdb-stat .l {
  display: block;
  color: #7b8b99;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.68rem;
  margin-bottom: 3px;
}

.vdb-stat b {
  font-size: 2.1rem;
  color: #4fc3f7;
}

.vdb-stat.accent b {
  color: var(--stat-c, #4fc3f7);
}

@media (max-width: 700px) {
  .vdb-card { flex-direction: column; }
  .vdb-card-img { flex: 0 0 auto; border-right: none; border-bottom: 1px solid #1f2a37; }
}