/* Admin ahora comparte la paleta azul/violeta del resto del sitio
   (antes usaba un rojo suelto, --admin-red, que no combinaba con
   nada más). Se mantienen los mismos nombres de variable para no
   tener que tocar cada regla de abajo. */
:root {
  --admin-bg: var(--dark-bg, #212529);
  --admin-card: var(--bg-elevated, #181b23);
  --admin-border: var(--border-subtle, rgba(255, 255, 255, 0.08));
  --admin-red: var(--accent, #4da3ff);
  --admin-text: var(--primary, #e9e7f5);
  --admin-muted: var(--muted-text, #9aa0ad);
}

* { box-sizing: border-box; }

body.admin-body {
  background: var(--admin-bg);
  color: var(--admin-text);
  font-family: var(--font-body, "Segoe UI", Arial, sans-serif);
  margin: 0;
  padding: 0 0 60px;
}

/* La barra tenía el fondo oscuro fijo. En modo claro el resto de la
   página se aclaraba pero esta barra no, así que el correo de la sesión
   (gris oscuro en modo claro) quedaba sobre negro: 2.2:1, ilegible.
   Ahora la barra sigue el tema como todo lo demás. */
.admin-header {
  background: var(--bg-elevated, rgba(10, 11, 15, 0.85));
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--admin-border);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.admin-header h1 {
  font-size: 1.3rem;
  margin: 0;
  font-family: var(--font-heading, inherit);
  background: var(--accent-gradient, var(--admin-red));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.admin-header .admin-session {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9rem;
  color: var(--admin-muted);
}

.admin-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px;
}

.admin-gate {
  max-width: 420px;
  margin: 80px auto;
  text-align: center;
  padding: 32px 24px;
  background: var(--admin-card);
  border: 1px solid var(--admin-border);
  border-radius: 16px;
  box-shadow: var(--shadow-soft, 0 10px 30px rgba(0, 0, 0, 0.35));
}

.admin-gate h1 {
  font-family: var(--font-heading, inherit);
}

.admin-gate p { color: var(--admin-muted); }

.btn-admin {
  background: var(--accent-gradient, var(--admin-red));
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 10px 22px;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.95rem;
  transition: transform 0.18s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}
.btn-admin:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow, 0 0 22px rgba(77, 163, 255, 0.35));
}
/* .btn-admin pone color:#fff para los botones de color. El secundario usa
   como fondo --bg-elevated-2, que en modo claro es casi blanco: quedaba
   letra blanca sobre fondo blanco (1.1:1, botón invisible). El color de
   texto tiene que seguir al tema, igual que el fondo. */
.btn-admin.secondary {
  background: var(--bg-elevated-2, #2a2e38);
  color: var(--text-color, #ffffff);
  border: 1px solid var(--border-subtle, transparent);
}
.btn-admin.secondary:hover {
  background: var(--bg-elevated, #333844);
  box-shadow: none;
}
.btn-admin.danger { background: linear-gradient(135deg, #ff6b6b, #d64545); }
.btn-admin.danger:hover { box-shadow: 0 0 22px rgba(255, 107, 107, 0.4); }
.btn-admin:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

.admin-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--admin-border);
  padding-bottom: 12px;
}

/* La pestaña activa tenía letra blanca sobre un degradado que arranca en
   #4da3ff: 2.6:1 en ese extremo. Se arranca en el azul del sistema, que
   con blanco llega a 5.5:1. */
.admin-tab-btn.active {
  background: linear-gradient(135deg, #1668c9 0%, #6b46e8 100%);
  color: #ffffff;
}

.admin-tab-btn {
  background: transparent;
  border: 1px solid var(--admin-border);
  color: var(--admin-text);
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.25s ease;
}
.admin-tab-btn:hover {
  border-color: var(--admin-red);
  color: var(--admin-red);
}
.admin-tab-btn.active {
  background: var(--accent-gradient, var(--admin-red));
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-glow, 0 0 22px rgba(77, 163, 255, 0.35));
}

.admin-panel { display: none; }
.admin-panel.active { display: block; }

.admin-card {
  background: var(--admin-card);
  border: 1px solid var(--admin-border);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-soft, 0 10px 30px rgba(0, 0, 0, 0.35));
}

.admin-card h2 {
  margin-top: 0;
  font-family: var(--font-heading, inherit);
  color: var(--admin-red);
  font-size: 1.1rem;
}

.admin-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.admin-form-grid.single { grid-template-columns: 1fr; }

.admin-form-grid label {
  font-size: 0.8rem;
  color: var(--admin-muted);
  display: block;
  margin-bottom: 4px;
}

.admin-form-grid input,
.admin-form-grid textarea {
  width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--admin-border);
  background: #262626;
  color: var(--admin-text);
  font-size: 0.9rem;
}

.admin-form-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

/* Aviso de "todavía no has importado tu contenido" */
.admin-aviso {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid rgba(77, 163, 255, 0.45);
  background: rgba(77, 163, 255, 0.1);
}
.admin-aviso strong {
  display: block;
  margin-bottom: 4px;
}
.admin-aviso p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--admin-muted);
  max-width: 62ch;
}
.admin-aviso .btn-admin {
  flex-shrink: 0;
}

/* Estado vacío / de error dentro de cada lista: antes no se mostraba
   nada y parecía que el panel estaba roto. */
.admin-empty {
  grid-column: 1 / -1;
  padding: 22px;
  border-radius: 12px;
  border: 1px dashed var(--admin-border);
  background: rgba(255, 255, 255, 0.02);
  text-align: center;
}
.admin-empty p {
  margin: 8px auto 14px;
  font-size: 0.85rem;
  color: var(--admin-muted);
  max-width: 52ch;
}
.admin-empty--error {
  border-color: rgba(255, 107, 107, 0.5);
  background: rgba(255, 107, 107, 0.08);
}
.admin-empty code {
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.82em;
}

.admin-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.admin-item-card {
  background: var(--bg-elevated-2, #232323);
  border: 1px solid var(--admin-border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.admin-item-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-glow, 0 0 22px rgba(77, 163, 255, 0.35));
}

.admin-item-card img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  background: #333;
}

.admin-item-body {
  padding: 10px 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-item-body strong { font-size: 0.9rem; }
.admin-item-body span { font-size: 0.78rem; color: var(--admin-muted); }

.admin-item-actions {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--admin-border);
}

.admin-item-actions button {
  flex: 1;
  font-size: 0.78rem;
  padding: 6px 8px;
}

.admin-msg {
  font-size: 0.85rem;
  margin-top: 10px;
  min-height: 1.2em;
}
.admin-msg.ok { color: #4caf50; }
.admin-msg.err { color: #ff6b6b; }

.admin-config-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
}

.admin-config-preview img {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--admin-border);
}

.admin-note {
  font-size: 0.82rem;
  color: var(--admin-muted);
  line-height: 1.5;
}

.admin-seed-box {
  border: 1px dashed var(--admin-border);
  padding: 14px;
  border-radius: 8px;
  margin-top: 10px;
}

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

/* Filas de subhabilidades del formulario de Habilidades */
.sub-fila {
  display: grid;
  grid-template-columns: 1fr 110px 44px;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
}

.sub-fila input {
  width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--admin-border);
  background: #262626;
  color: var(--admin-text);
  font-size: 0.9rem;
}

.sub-fila .sub-quitar {
  min-height: 38px;
  padding: 0;
  font-size: 1.1rem;
  line-height: 1;
}

#add-sub-btn {
  margin-top: 4px;
}

.admin-form-grid select {
  width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--admin-border);
  background: #262626;
  color: var(--admin-text);
  font-size: 0.9rem;
}

[data-theme="light"] .sub-fila input,
[data-theme="light"] .admin-form-grid input,
[data-theme="light"] .admin-form-grid textarea,
[data-theme="light"] .admin-form-grid select {
  background: #ffffff;
  color: #1b1e27;
  border-color: #d7dbe3;
}

/* ================= Estadísticas de visitas ================= */
.admin-stats {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 0.8rem;
}

.stat-fila {
  display: grid;
  grid-template-columns: minmax(120px, 190px) 1fr auto;
  align-items: center;
  gap: 0.8rem;
}

.stat-nombre {
  font-size: 0.92rem;
  color: var(--text-color, #ffffff);
}

/* La barra es solo proporcional a la sección más visitada: sirve para
   comparar de un vistazo, no para leer valores exactos (para eso está
   el número de la derecha). */
.stat-barra {
  display: block;
  height: 10px;
  border-radius: 999px;
  background: var(--border-subtle, rgba(255, 255, 255, 0.12));
  overflow: hidden;
}

.stat-barra > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--btn-solido-fondo, #1668c9);
  transition: width 0.4s ease;
}

.stat-valor {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text-color, #ffffff);
  min-width: 3ch;
  text-align: right;
}

@media (max-width: 560px) {
  .stat-fila {
    grid-template-columns: 1fr auto;
  }
  .stat-barra {
    grid-column: 1 / -1;
  }
}

/* Casilla de "Publicada" y estado de cada entrada */
.admin-check {
  display: flex;
  align-items: center;
}

.admin-check label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  margin: 0;
}

.admin-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--btn-solido-fondo, #1668c9);
}

.etiqueta-publicada,
.etiqueta-borrador {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.etiqueta-publicada {
  background: rgba(34, 139, 84, 0.18);
  color: #35c07a;
}

.etiqueta-borrador {
  background: rgba(200, 150, 20, 0.18);
  color: #d9a520;
}