/* ── FF8 Palette ── */
:root {
  --void:       #0A0A0C;
  --abyss:      #0E0E10;
  --surface:    #16161A;
  --raised:     #1C1C22;
  --border:     #2A2A33;
  --muted:      #4A4A5A;   /* bordes sutiles únicamente — NO usar para texto visible */
  --cream:      #E8D9A8;   /* valores principales, números grandes */
  --cream-soft: #F0E8D0;   /* labels, subtítulos, encabezados de tabla */
  --cream-meta: #E8DFC4;   /* IPs, fechas, UUIDs, metadata secundaria */
  --cream2:     #C4B080;   /* celdas de tabla, texto de cuerpo */
  --gold:       #C9A961;   /* marca, item activo, acentos */
  --gold2:      #A8893A;
  --gold3:      #7A6225;
  --ruby:       #8B2E2E;
  --ruby2:      #C04040;
  --jade:       #2A5C47;
  --jade2:      #3D8A66;
  --amber:      #7A5020;
  --amber2:     #C47A30;
}

/* ── Base ── */
@layer base {
  html { @apply h-full; }
  body { background-color: var(--abyss); color: var(--cream); }
}

/* ── Typography ── */
.font-display { font-family: 'Cinzel', serif; }
.font-body    { font-family: Inter, system-ui, sans-serif; }
body {
  font-family: Inter, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

/* ── Color utilities ── */
.bg-void    { background-color: var(--void); }
.bg-abyss   { background-color: var(--abyss); }
.bg-surface { background-color: var(--surface); }
.bg-raised  { background-color: var(--raised); }
.text-cream  { color: var(--cream); }
.text-cream2 { color: var(--cream2); }
.text-gold   { color: var(--gold); }
.text-muted  { color: var(--cream-soft); }
.border-gold { border-color: var(--gold3); }
.border-edge { border-color: var(--border); }

/* ── Sidebar ── */
#sidebar {
  width: 220px;
  background-color: var(--void);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 50;
  transition: transform 0.25s ease;
}

/* Logo — único lugar donde aparece Cinzel */
#sidebar .logo {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gold);
  padding: 1.5rem 1.25rem 1rem;
  border-bottom: 1px solid var(--border);
}

#sidebar .logo span {
  display: block;
  font-size: 0.65rem;
  font-family: Inter, system-ui, sans-serif;
  font-weight: 400;
  color: var(--cream-soft);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 3px;
}

#sidebar nav a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.25rem;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--cream-soft);
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.15s, background 0.15s;
  border-left: 2px solid transparent;
}

#sidebar nav a:hover {
  color: var(--gold);
  background: rgba(201,169,97,0.05);
  border-left-color: var(--gold3);
}

#sidebar nav a.active {
  color: var(--gold);
  background: rgba(201,169,97,0.08);
  border-left-color: var(--gold);
}

#sidebar nav a .nav-icon { width: 14px; opacity: 0.7; }
#sidebar nav a.active .nav-icon { opacity: 1; }

#sidebar .sidebar-footer {
  margin-top: auto;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--cream-soft);
}

#sidebar .sidebar-footer .admin-name {
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.73rem;
  font-weight: 500;
  color: var(--cream-soft);
  margin-bottom: 0.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#sidebar .logout-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cream-soft);
  background: none;
  border: 1px solid var(--border);
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  width: 100%;
  transition: color 0.15s, border-color 0.15s;
}

#sidebar .logout-btn:hover {
  color: var(--ruby2);
  border-color: var(--ruby);
}

/* ── Main content ── */
#main-content {
  margin-left: 220px;
  min-height: 100vh;
  padding: 2rem 2.5rem;
}

/* ── Page header ── */
.page-header {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.page-header h1 {
  font-family: Inter, system-ui, sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cream);
}

.page-header p {
  font-size: 0.875rem;
  color: var(--cream-soft);
  margin-top: 0.2rem;
}

/* ── Gold divider ── */
.gold-rule {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold3), transparent);
  margin: 1.5rem 0;
}

/* ── Cards ── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 1.5rem;
}

.card-sm {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 1rem 1.25rem;
}

/* ── Stat cards ── */
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 1.25rem 1.5rem;
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, var(--gold3), var(--gold), var(--gold3));
}

.stat-card .stat-value {
  font-family: Inter, system-ui, sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--cream);
  line-height: 1;
}

.stat-card .stat-label {
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream-soft);
  margin-top: 0.4rem;
}

/* ── Tables ── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.data-table thead tr {
  border-bottom: 1px solid var(--gold3);
}

.data-table thead th {
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cream-soft);
  padding: 0.6rem 1rem;
  text-align: left;
}

.data-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}

.data-table tbody tr:hover {
  background: rgba(201,169,97,0.04);
}

.data-table tbody td {
  padding: 0.65rem 1rem;
  color: var(--cream2);
  vertical-align: middle;
}

.data-table tbody td.mono {
  font-family: 'Courier New', monospace;
  font-size: 0.78rem;
  color: var(--cream-meta);
}

/* ── Status badges ── */
.badge {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid;
}

.badge-active  { color: var(--jade2);     border-color: var(--jade);  background: rgba(42,92,71,0.2); }
.badge-pending { color: var(--amber2);    border-color: var(--amber); background: rgba(122,80,32,0.2); }
.badge-paused  { color: var(--cream-meta); border-color: var(--border); background: rgba(42,42,51,0.5); }
.badge-revoked { color: var(--ruby2);     border-color: var(--ruby);  background: rgba(139,46,46,0.2); }
.badge-admin   { color: var(--gold);      border-color: var(--gold3); background: rgba(201,169,97,0.1); }
.badge-viewer  { color: var(--cream2);    border-color: var(--border); background: rgba(30,30,38,0.5); }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.5rem 1.1rem;
  border: 1px solid;
  cursor: pointer;
  transition: all 0.15s;
  background: none;
  text-decoration: none;
  white-space: nowrap;
}

.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-gold {
  color: var(--abyss);
  background: var(--gold);
  border-color: var(--gold);
}
.btn-gold:hover:not(:disabled) {
  background: var(--gold2);
  border-color: var(--gold2);
}

.btn-outline {
  color: var(--gold);
  border-color: var(--gold3);
}
.btn-outline:hover:not(:disabled) {
  background: rgba(201,169,97,0.08);
  border-color: var(--gold);
}

.btn-ghost {
  color: var(--cream-soft);
  border-color: var(--border);
}
.btn-ghost:hover:not(:disabled) {
  color: var(--cream);
  border-color: var(--muted);
}

.btn-danger {
  color: var(--ruby2);
  border-color: var(--ruby);
}
.btn-danger:hover:not(:disabled) {
  background: rgba(139,46,46,0.15);
}

.btn-sm {
  font-size: 0.63rem;
  padding: 0.3rem 0.75rem;
}

/* ── Forms ── */
.form-group { margin-bottom: 1.25rem; }

.form-label {
  display: block;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.4rem;
}

.form-input {
  width: 100%;
  background: var(--raised);
  border: 1px solid var(--border);
  color: var(--cream);
  padding: 0.55rem 0.85rem;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.15s;
}

.form-input:focus { border-color: var(--gold3); }
.form-input::placeholder { color: var(--muted); }

.form-select {
  width: 100%;
  background: var(--raised);
  border: 1px solid var(--border);
  color: var(--cream);
  padding: 0.55rem 0.85rem;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.9rem;
  outline: none;
  appearance: none;
  transition: border-color 0.15s;
}

.form-select:focus { border-color: var(--gold3); }

/* ── Modal ── */
#modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10,10,12,0.85);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(2px);
}

.modal-box {
  background: var(--surface);
  border: 1px solid var(--gold3);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 0 60px rgba(201,169,97,0.08);
}
.modal-box.modal-wide { max-width: 720px; }
.modal-box.modal-xl { max-width: 1100px; }

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

.modal-header h2 {
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}

.modal-close {
  background: none;
  border: none;
  color: var(--cream-soft);
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0 0.2rem;
  transition: color 0.15s;
}
.modal-close:hover { color: var(--cream); }

.modal-body { padding: 1.5rem; }
.modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}

/* ── Toast ── */
#toast-container {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

.toast {
  background: var(--raised);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  padding: 0.75rem 1.1rem;
  font-size: 0.875rem;
  color: var(--cream);
  max-width: 320px;
  animation: toastIn 0.25s ease;
  pointer-events: all;
}

.toast.toast-error { border-left-color: var(--ruby2); }
.toast.toast-success { border-left-color: var(--jade2); }

@keyframes toastIn {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Login page ── */
#login-view {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--void);
  position: relative;
  overflow: hidden;
}

#login-view::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% -10%, rgba(201,169,97,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 80% 100%, rgba(201,169,97,0.04) 0%, transparent 60%);
  pointer-events: none;
}

.login-box {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 2.5rem 2rem;
  position: relative;
}

.login-box::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}

.login-logo {
  text-align: center;
  margin-bottom: 2rem;
}

/* Login logo mantiene Cinzel — misma identidad que el sidebar */
.login-logo h1 {
  font-family: 'Cinzel', serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gold);
}

.login-logo p {
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream-soft);
  margin-top: 0.3rem;
}

/* ── Pagination ── */
.pagination {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.75rem;
}

.pagination .page-info {
  color: var(--cream-soft);
  margin: 0 0.5rem;
}

/* ── Filter bar ── */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
  margin-bottom: 1.25rem;
}

.filter-bar .form-input,
.filter-bar .form-select {
  font-size: 0.875rem;
  padding: 0.4rem 0.75rem;
}

/* ── Corner ornament ── */
.ornament-corner {
  position: absolute;
  width: 24px;
  height: 24px;
  border-color: var(--gold3);
  border-style: solid;
}
.ornament-tl { top: 6px; left: 6px; border-width: 1px 0 0 1px; }
.ornament-tr { top: 6px; right: 6px; border-width: 1px 1px 0 0; }
.ornament-bl { bottom: 6px; left: 6px; border-width: 0 0 1px 1px; }
.ornament-br { bottom: 6px; right: 6px; border-width: 0 1px 1px 0; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb { background: var(--border); }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ── Responsive ── */
@media (max-width: 768px) {
  #sidebar { transform: translateX(-100%); }
  #sidebar.open { transform: translateX(0); }
  #main-content { margin-left: 0; padding: 1.25rem; }
}

/* ── Brand logo ── */

/* Sidebar: logo + nombre en fila */
#sidebar .logo {
  padding: 1.25rem 1rem 1rem;
  border-bottom: 1px solid var(--border);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.sidebar-brand-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}

.sidebar-brand-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.sidebar-brand-name {
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--gold);
  line-height: 1.2;
}

.sidebar-brand-sub {
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-soft);
  line-height: 1;
}

/* Login: logo centrado sobre el título */
.login-brand-logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
  display: block;
  margin: 0 auto 0.5rem;
}

/* ── Utility ── */
.hidden { display: none !important; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.flex-1 { flex: 1; }
.gap-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }