/* ============================================================
   Regina Caeli — Panel de administración
   CSS propio, sin dependencias. Tokens del canon visual:
   setting/SISTEMA-VISUAL-REGINA-CAELI.md
   ============================================================ */

@font-face { font-family: "Cinzel"; src: url("/fonts/Cinzel-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url("/fonts/Cinzel-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/fonts/Poppins-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/fonts/Poppins-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/fonts/Poppins-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/fonts/Poppins-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  /* Color — canon §2 */
  --navy-900: #001c3d; --navy-800: #002a5c; --navy-700: #003d7b;
  --navy-600: #0a4f95; --navy-200: #c3d6ec; --navy-100: #e4edf7; --navy-50: #f2f7fc;
  --gold-700: #b07d00; --gold-600: #cf9405; --gold-500: #eeb311;
  --gold-300: #f9dc8a; --gold-100: #fef6e3;
  --red-600: #b50000; --red-500: #cd0000; --red-100: #fbe5e3;
  --cream-100: #faf4e9; --cream-600: #c8a877;
  --ink-900: #16202e; --ink-700: #34404f; --ink-500: #5b6675;
  --ink-400: #8a93a0; --ink-300: #b8bec8; --ink-200: #dce0e6; --ink-100: #eef0f3;
  --paper: #ffffff; --bg: #f7f9fc;
  --success: #2f8f5b;
  /* Gradientes canónicos */
  --gradient-navy: linear-gradient(160deg, #0a4f95 0%, #003d7b 55%, #001c3d 100%);
  --gradient-gold: linear-gradient(160deg, #f4c648 0%, #eeb311 100%);
  /* Sombra navy + focus oro — canon §6 */
  --shadow-sm: 0 2px 8px rgba(0, 28, 61, 0.07);
  --shadow-md: 0 8px 24px rgba(0, 28, 61, 0.09);
  --focus-ring: 0 0 0 3px rgba(238, 179, 17, 0.45);
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink-700);
  font-family: "Poppins", -apple-system, sans-serif; font-size: 15px; line-height: 1.55;
}
a { color: var(--navy-600); text-decoration: none; }

/* ---- Layout: sidebar navy + contenido ---- */
.layout { display: flex; min-height: 100vh; }
.sidebar {
  width: 240px; flex-shrink: 0; background: var(--gradient-navy);
  color: #fff; display: flex; flex-direction: column; padding: 24px 16px;
}
.sidebar .brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 24px; }
.sidebar .brand img { width: 36px; height: 36px; }
.sidebar .brand span {
  font-family: "Cinzel", serif; font-weight: 700; font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.3;
}
.sidebar nav { display: flex; flex-direction: column; gap: 4px; }
.sidebar nav a {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px;
  border-radius: 10px; color: var(--navy-200); font-weight: 500; font-size: 14px;
}
.sidebar nav a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.sidebar nav a.active { background: rgba(255, 255, 255, 0.12); color: #fff; }
.sidebar nav a.active::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold-500); /* el punto oro del canon */
}
.sidebar .foot { margin-top: auto; padding: 16px 8px 0; font-size: 12px; color: var(--navy-200); }
.sidebar .foot button {
  background: none; border: 1px solid rgba(255, 255, 255, 0.28); color: #fff;
  padding: 8px 14px; border-radius: 10px; cursor: pointer; font: inherit; font-size: 13px;
}
.sidebar .foot button:hover { background: rgba(255, 255, 255, 0.08); }

.main { flex: 1; padding: 32px 40px; max-width: 1200px; }

/* ---- Tipografía canónica ---- */
.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold-600); margin: 0 0 6px;
}
h1.title {
  font-family: "Cinzel", serif; font-weight: 600; font-size: 28px;
  letter-spacing: 0.075em; text-transform: uppercase; color: var(--navy-700);
  margin: 0 0 4px; line-height: 1.18;
}
.subtitle { color: var(--ink-500); margin: 0 0 28px; font-size: 14px; }

/* ---- Cards (canon §9.17) ---- */
.card {
  background: var(--paper); border: 1px solid var(--ink-200);
  border-radius: 20px; box-shadow: var(--shadow-sm); padding: 24px;
}
.grid { display: grid; gap: 16px; }
.grid.stats { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 28px; }

/* ---- Stat (canon §9.18) ---- */
.stat .label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-400); margin-bottom: 6px;
}
.stat .value {
  font-size: 36px; font-weight: 800; letter-spacing: -0.025em; line-height: 1;
  color: var(--ink-900); font-variant-numeric: tabular-nums;
}
.stat .hint { font-size: 11px; color: var(--ink-400); margin-top: 6px; }
.stat.featured { border-color: var(--gold-300); box-shadow: 0 0 0 1px rgba(238,179,17,.35), 0 6px 22px rgba(238,179,17,.22); }

/* ---- Tabla ---- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; font-size: 10px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-400); padding: 10px 12px;
  border-bottom: 1px solid var(--ink-200);
}
td { padding: 13px 12px; border-bottom: 1px solid var(--ink-100); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--navy-50); }

/* ---- Badges (canon §9.9) ---- */
.badge {
  display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap;
}
.badge.navy { background: var(--navy-100); color: var(--navy-700); }
.badge.gold { background: var(--gold-100); color: var(--gold-700); }
.badge.sacred { background: var(--red-100); color: var(--red-600); }
.badge.success { background: #e3f2ea; color: var(--success); }
.badge.neutral { background: var(--ink-100); color: var(--ink-700); }
.badge.cream { background: #f0e3cf; color: var(--cream-600); }

/* ---- Botones (canon §9.1) ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 18px; border-radius: 10px; border: 1px solid transparent;
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: transform 130ms cubic-bezier(.4,0,.2,1), filter 130ms;
}
.btn:hover { filter: brightness(0.94); }
.btn:active { transform: scale(0.975); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn.primary { background: var(--navy-700); color: #fff; box-shadow: var(--shadow-sm); }
.btn.sacred { background: var(--gradient-gold); color: var(--navy-900); box-shadow: var(--shadow-sm); }
.btn.secondary { background: var(--paper); color: var(--navy-700); border: 1.5px solid var(--ink-300); }
.btn.danger { background: var(--red-500); color: #fff; }
.btn.sm { height: 32px; padding: 0 12px; font-size: 13px; }

/* ---- Formularios (canon §9.3) ---- */
.field { margin-bottom: 16px; }
.field label {
  display: block; font-size: 13px; font-weight: 500; color: var(--ink-700); margin-bottom: 8px;
}
.field input, .field textarea, .field select {
  width: 100%; height: 48px; padding: 0 14px; font: inherit; font-size: 15px;
  color: var(--ink-900); background: var(--paper);
  border: 1.5px solid var(--ink-300); border-radius: 14px;
  transition: border-color 130ms, box-shadow 130ms;
}
.field textarea { height: auto; padding: 12px 14px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--navy-700); box-shadow: var(--focus-ring);
}
.field .error { color: var(--red-600); font-size: 12px; margin-top: 6px; }

/* ---- Login (superficie devocional navy) ---- */
.login-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--gradient-navy); padding: 24px;
}
.login-card {
  width: 100%; max-width: 400px; background: var(--paper);
  border-radius: 28px; box-shadow: var(--shadow-md); padding: 40px 36px; text-align: center;
}
.login-card img { width: 72px; margin: 0 auto 16px; }
.login-card h1 {
  font-family: "Cinzel", serif; font-weight: 700; font-size: 18px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy-700); margin: 0 0 4px;
}
.login-card .sub { color: var(--ink-500); font-size: 13px; margin: 0 0 28px; }
.login-card form { text-align: left; }

/* ---- Flash / misc ---- */
.flash {
  background: #e3f2ea; color: var(--success); border: 1px solid #bfe3cf;
  border-radius: 14px; padding: 12px 16px; margin-bottom: 20px; font-size: 14px;
}
.toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 20px; flex-wrap: wrap; }
.toolbar form { display: flex; gap: 8px; flex: 1; min-width: 220px; }
.toolbar input[type="search"] {
  flex: 1; height: 40px; padding: 0 14px; font: inherit; font-size: 14px;
  border: 1.5px solid var(--ink-300); border-radius: 10px;
}
.toolbar input[type="search"]:focus { outline: none; border-color: var(--navy-700); box-shadow: var(--focus-ring); }
.tabs { display: inline-flex; gap: 6px; background: var(--ink-100); border-radius: 999px; padding: 4px; }
.tabs a { padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink-500); }
.tabs a.active { background: var(--paper); color: var(--navy-700); box-shadow: 0 1px 2px rgba(0,28,61,.06); }
.pagination { display: flex; gap: 6px; margin-top: 20px; }
.pagination a, .pagination span {
  padding: 8px 13px; border-radius: 10px; font-size: 13px; font-weight: 500;
  border: 1px solid var(--ink-200); color: var(--ink-700);
}
.pagination .current { background: var(--navy-700); color: #fff; border-color: var(--navy-700); }
.muted { color: var(--ink-400); font-size: 12px; }
.actions-inline { display: flex; gap: 8px; align-items: center; }
.empty { text-align: center; padding: 48px 24px; color: var(--ink-500); }
.empty .icon { font-size: 40px; margin-bottom: 12px; }
details.reject-form { margin-top: 6px; }
details.reject-form summary { cursor: pointer; font-size: 13px; color: var(--red-600); font-weight: 500; }
details.reject-form form { margin-top: 10px; display: flex; gap: 8px; }
details.reject-form input { flex: 1; height: 36px; padding: 0 12px; border: 1.5px solid var(--ink-300); border-radius: 10px; font: inherit; font-size: 13px; }