/* Depende de kilombo-brand.css, que define la rampa del logo. Cargalo antes.
   Acá los tokens grises de la PCU se remapean sobre esa rampa: no hay que
   reescribir las reglas de abajo, sólo cambia de qué color están hechas.
   Los contrastes anotados son WCAG 2.1 medidos, no estimados. */
:root {
  --bg:        #F7F2FB;   /* papel con un velo violeta, no gris neutro */
  --card:      #ffffff;
  --text:      #1A0C2B;   /* 16.8:1 sobre --bg */
  --muted:     #6B5B7B;   /*  5.6:1 */
  --border:    #E7DCF0;
  --hover:     #FAF6FD;
  --accent:    var(--k-magenta-deep);   /* 5.8:1 como texto, 6.4:1 en botón */
  --accent-on: #ffffff;                 /* texto sobre --accent */
  --ring:      rgba(var(--k-magenta-rgb), .16);
}
html.dark {
  color-scheme: dark;
  --bg:        var(--k-night);   /* #0B0512 */
  --card:      var(--k-abyss);   /* #120920 */
  --text:      #EDE4F5;          /* 15.7:1 sobre --card */
  --muted:     #9A89AC;          /*  6.3:1 — la PCU tiene mucho texto chico */
  --border:    rgba(var(--k-pink-rgb), .14);
  --hover:     rgba(var(--k-pink-rgb), .07);
  --accent:    var(--k-hot);     /* 7.2:1 — links y estados activos */
  --accent-on: var(--k-night);   /* texto sobre --accent */
  --ring:      rgba(var(--k-hot-rgb), .22);
}

html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* ── Page layout ─────────────────────────────── */
.pcu-page { padding: 1.5rem; }

.pcu-header { margin-bottom: 1.75rem; }
.pcu-header h1 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 .2rem;
  letter-spacing: -.3px;
}
.pcu-header p {
  font-size: .83rem;
  color: var(--muted);
  margin: 0;
}

/* ── Mobile responsive ───────────────────────── */
/* Tables always scroll horizontally */
.pcu-card .pcu-table,
.pcu-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Main content padding on small screens */
@media (max-width: 640px) {
  main[style*="padding:1.5rem"],
  main[style*="padding: 1.5rem"] { padding: 1rem !important; }

  .pcu-header h1 { font-size: 1.1rem; }

  /* Stack card grids */
  .pcu-card-body[style*="grid"],
  .stats-grid { grid-template-columns: 1fr !important; }

  /* Full-width buttons in toolbar areas */
  .pcu-tabs { gap: .25rem; }
  .pcu-tab  { font-size: .75rem; padding: .3rem .625rem; }

  /* Search bars go full width */
  .pcu-search { width: 100% !important; }
  .pcu-search input { max-width: none !important; }

  /* Topbar search hide on very small */
  #pcu-topbar .search-wrap { max-width: 180px; }
}

/* Prevent content overflow */
table { min-width: 100%; }
.overflow-x-auto,
.pcu-table-wrap { overflow-x: auto; }

/* Remove bg-white/shadow for dark mode tables */
.relative.overflow-x-auto { background: var(--card) !important; border-radius: 12px !important; border: 1px solid var(--border) !important; box-shadow: none !important; }
html.dark .relative.overflow-x-auto { background: var(--card) !important; }

/* ── Cards ───────────────────────────────────── */
.pcu-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.pcu-card-header {
  padding: .875rem 1.25rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: .625rem;
}
.pcu-card-header h2 {
  font-size: .88rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}
.pcu-card-header i { color: var(--muted); font-size: .8rem; }
.pcu-card-body { padding: 1.25rem; }

/* ── Tables ──────────────────────────────────── */
.pcu-table { width: 100%; border-collapse: collapse; }
.pcu-table thead th {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--muted);
  padding: .7rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: var(--card);
  white-space: nowrap;
  text-align: left;
}
.pcu-table tbody tr { border-bottom: 1px solid var(--border); transition: background var(--k-transition); }
.pcu-table tbody tr:last-child { border-bottom: none; }
.pcu-table tbody tr:hover { background: var(--hover); }
.pcu-table tbody td {
  padding: .75rem 1.25rem;
  font-size: .82rem;
  color: var(--text);
  vertical-align: middle;
}
.pcu-table tbody td a { color: var(--muted); text-decoration: none; font-weight: 500; }
.pcu-table tbody td a:hover { color: var(--text); }

/* ── Tabs / Filters ──────────────────────────── */
.pcu-tabs { display: flex; gap: .375rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.pcu-tab {
  padding: .375rem .875rem;
  border-radius: 7px;
  font-size: .8rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--muted);
  background: var(--card);
  border: 1px solid var(--border);
  transition: background var(--k-transition), color var(--k-transition),
              border-color var(--k-transition), box-shadow var(--k-transition);
  cursor: pointer;
}
.pcu-tab:hover { background: var(--hover); color: var(--text); }
.pcu-tab.active {
  background: var(--accent);
  color: var(--accent-on);
  border-color: var(--accent);
}

/* ── Buttons ─────────────────────────────────── */
.pcu-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1rem;
  border-radius: 8px;
  font-size: .82rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--k-transition), color var(--k-transition),
              border-color var(--k-transition), box-shadow var(--k-transition),
              filter var(--k-transition), transform .08s var(--k-ease);
  text-decoration: none;
}
/* El hundido al hacer clic es lo que da la sensación de que el botón responde.
   Va rápido (80 ms) a propósito: un clic tiene que sentirse inmediato. */
.pcu-btn:active { transform: scale(.97); }
.pcu-btn-primary {
  background: var(--accent);
  color: var(--accent-on);
  border-color: var(--accent);
}
.pcu-btn-primary:hover { opacity: .85; }
/* La acción principal de una pantalla lleva el degradé del logo. Se reserva
   para eso: si todos los botones brillan, ninguno destaca. */
.pcu-btn-brand {
  background: var(--k-grad-brand);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--k-glow-sm);
}
.pcu-btn-brand:hover { filter: brightness(1.08); }
.pcu-btn-ghost {
  background: transparent;
  color: var(--muted);
  border-color: var(--border);
}
.pcu-btn-ghost:hover { background: var(--hover); color: var(--text); }
.pcu-btn-danger { background: #fef2f2; color: #c0203c; border-color: #fbd0d9; }
.pcu-btn-danger:hover { background: #fde4e9; }
html.dark .pcu-btn-danger { background: rgba(var(--k-danger-rgb), .12); color: var(--k-danger); border-color: rgba(var(--k-danger-rgb), .28); }
html.dark .pcu-btn-danger:hover { background: rgba(var(--k-danger-rgb), .2); }

/* ── Alerts ──────────────────────────────────── */
.pcu-alert {
  padding: .75rem 1rem;
  border-radius: 9px;
  font-size: .83rem;
  font-weight: 500;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.pcu-alert-success { background: #eefbf5; color: #0d7355; border: 1px solid #b6ecd8; }
.pcu-alert-error   { background: #fef2f2; color: #c0203c; border: 1px solid #fbd0d9; }
html.dark .pcu-alert-success { background: rgba(var(--k-success-rgb), .10); color: var(--k-success); border-color: rgba(var(--k-success-rgb), .26); }
html.dark .pcu-alert-error   { background: rgba(var(--k-danger-rgb), .10);  color: var(--k-danger);  border-color: rgba(var(--k-danger-rgb), .26); }

/* ── Badges ──────────────────────────────────── */
.pcu-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .6rem;
  border-radius: 6px;
  font-size: .73rem;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--hover);
  color: var(--muted);
}
.pcu-badge-red   { background: rgba(var(--k-danger-rgb), .09);  color: #c0203c; border-color: rgba(var(--k-danger-rgb), .22); }
.pcu-badge-green { background: rgba(var(--k-success-rgb), .12); color: #0d7355; border-color: rgba(var(--k-success-rgb), .3); }
/* "blue" es el nombre heredado del badge neutro-informativo; ahora es violeta */
.pcu-badge-blue  { background: rgba(var(--k-magenta-rgb), .08); color: var(--k-magenta-deep); border-color: rgba(var(--k-magenta-rgb), .2); }
html.dark .pcu-badge-red   { background: rgba(var(--k-danger-rgb), .14);  color: var(--k-danger);  border-color: rgba(var(--k-danger-rgb), .26); }
html.dark .pcu-badge-green { background: rgba(var(--k-success-rgb), .12); color: var(--k-success); border-color: rgba(var(--k-success-rgb), .26); }
html.dark .pcu-badge-blue  { background: rgba(var(--k-pink-rgb), .13);    color: var(--k-hot);     border-color: rgba(var(--k-pink-rgb), .28); }

/* ── Search input ────────────────────────────── */
.pcu-search {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.pcu-search i {
  position: absolute;
  left: 10px;
  color: var(--muted);
  font-size: .78rem;
  pointer-events: none;
}
.pcu-search input {
  background: var(--hover);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .5rem .75rem .5rem 2rem;
  font-size: .82rem;
  color: var(--text);
  outline: none;
  transition: border-color .15s;
  width: 100%;
}
.pcu-search input:focus { border-color: var(--accent); }
.pcu-search input::placeholder { color: var(--muted); }

/* ── Forms ───────────────────────────────────── */
.pcu-input, .pcu-select, .pcu-textarea {
  width: 100%;
  background: var(--hover);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .6rem .75rem;
  font-size: .85rem;
  color: var(--text);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
}
.pcu-input:focus, .pcu-select:focus, .pcu-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}
.pcu-label {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: .4rem;
  letter-spacing: .3px;
  text-transform: uppercase;
}

/* ── Tailwind overrides (light) ──────────────── */
.bg-white  { background-color: var(--card) !important; }
.bg-gray-50, .bg-gray-100 { background-color: var(--hover) !important; }
.text-gray-900, .text-gray-800 { color: var(--text) !important; }
.text-gray-700 { color: var(--text) !important; }
.text-gray-600, .text-gray-500 { color: var(--muted) !important; }
.border-gray-200, .border-gray-300 { border-color: var(--border) !important; }
.rounded-lg { border-radius: 10px !important; }

/* Las vistas están escritas con utilidades de Tailwind en azul/índigo. En vez
   de reescribir cada Blade, los azules se remapean al acento de la marca. */
.bg-blue-600, .bg-blue-500,
.bg-indigo-600, .bg-indigo-500 { background-color: var(--accent) !important; color: var(--accent-on) !important; }
.bg-gray-200 { background-color: var(--hover) !important; color: var(--muted) !important; }
a.bg-blue-600, a.bg-blue-500,
a.bg-indigo-600, a.bg-indigo-500 { color: var(--accent-on) !important; }
.hover\:bg-blue-500:hover, .hover\:bg-indigo-500:hover { background-color: var(--accent) !important; filter: brightness(1.1); }
.text-blue-600, .text-blue-500, .text-blue-400,
.text-indigo-600, .text-indigo-500, .text-indigo-400 { color: var(--accent) !important; }
.border-indigo-500, .border-blue-500 { border-color: var(--accent) !important; }
.focus\:border-indigo-500:focus, .focus\:border-blue-500:focus { border-color: var(--accent) !important; }
.bg-indigo-500\/20, .bg-blue-500\/20 { background-color: rgba(var(--k-pink-rgb), .16) !important; }
.ring-indigo-500\/30 { --tw-ring-color: rgba(var(--k-pink-rgb), .3) !important; }
.shadow-indigo-500\/20, .shadow-indigo-500\/10 { box-shadow: var(--k-glow-sm) !important; }

/* ── Dark mode overrides ─────────────────────── */
html.dark .bg-white,
html.dark [class*="bg-white"]       { background-color: var(--card) !important; }
html.dark .bg-gray-50,
html.dark .bg-gray-100              { background-color: var(--hover) !important; }
html.dark .bg-gray-200              { background-color: var(--hover) !important; }
html.dark .bg-gray-700,
html.dark .bg-gray-800,
html.dark .dark\:bg-gray-800,
html.dark .dark\:bg-gray-700       { background-color: var(--k-void) !important; }
/* Varios Blade escriben el fondo oscuro a mano con estos valores exactos.
   #0a0a0a es el del <body>, así que va al fondo de página; #111116 es el de
   tarjetas y paneles. */
html.dark .dark\:bg-\[\#0a0a0a\]   { background-color: var(--bg) !important; }
html.dark .dark\:bg-\[\#111116\],
html.dark .dark\:bg-\[\#0f0f0f\],
html.dark .dark\:bg-\[\#111\]      { background-color: var(--card) !important; }
html.dark .dark\:border-white\/10  { border-color: var(--border) !important; }
/* .glass-card es el patrón de tarjeta de home y varias pantallas más */
html.dark .glass-card {
  background: rgba(var(--k-deep-rgb), .45) !important;
  border: 1px solid var(--border) !important;
}
html.dark .text-gray-900,
html.dark .text-gray-800           { color: var(--text) !important; }
html.dark .text-gray-700           { color: #e5e7eb !important; }
html.dark .text-gray-600,
html.dark .text-gray-500,
html.dark .text-gray-400           { color: var(--muted) !important; }
html.dark .border-gray-200,
html.dark .border-gray-300,
html.dark .border-gray-600,
html.dark .border-gray-700         { border-color: var(--border) !important; }
html.dark nav,
html.dark #logo-sidebar,
html.dark .dark\:bg-gray-800       { background-color: var(--k-void) !important; border-color: var(--border) !important; }
html.dark table thead tr,
html.dark thead,
html.dark table thead th           { background-color: var(--card) !important; color: var(--text) !important; }
html.dark table tbody tr           { background-color: var(--card) !important; }
html.dark table tbody tr:hover     { background-color: var(--hover) !important; }
html.dark table tbody td           { color: var(--text) !important; }
html.dark .hover\:bg-gray-50:hover,
html.dark .hover\:bg-gray-100:hover { background-color: var(--hover) !important; }
html.dark .hover\:bg-gray-700:hover { background-color: #1a1a1a !important; }
html.dark input:not([type=checkbox]):not([type=radio]),
html.dark textarea {
  background-color: var(--hover) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* ── Selects y Menús Desplegables (Opciones y Expansión) ─────────────── */
select,
.pcu-select,
.swal2-select,
select.swal2-input {
  color-scheme: light dark;
}

select option,
select optgroup,
.pcu-select option,
.pcu-select optgroup,
.swal2-select option,
select.swal2-input option {
  padding: .65rem 1rem;
  font-size: .92rem;
}

/* Modo claro explícito para evitar desajustes */
html:not(.dark) select option,
html:not(.dark) select optgroup,
html:not(.dark) .pcu-select option,
html:not(.dark) .swal2-select option,
html:not(.dark) select.swal2-input option {
  color-scheme: light !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
}

/* Modo oscuro para selects */
html.dark select,
html.dark .pcu-select,
html.dark .swal2-select,
html.dark select.swal2-input {
  color-scheme: dark !important;
  background-color: #160c24 !important;
  border-color: rgba(216, 180, 254, 0.25) !important;
  color: #f8fafc !important;
}

html.dark select:focus,
html.dark .pcu-select:focus,
html.dark .swal2-select:focus,
html.dark select.swal2-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--ring) !important;
}

/* Opciones desplegadas en modo oscuro: fondo oscuro profundo (#160c24), texto claro y sin fondo blanco */
html.dark select option,
html.dark select optgroup,
html.dark .pcu-select option,
html.dark .pcu-select optgroup,
html.dark .swal2-select option,
html.dark .swal2-select optgroup,
html.dark select.swal2-input option,
html.dark select.swal2-input optgroup,
html.dark .dataTables_wrapper select option,
html.dark .dt-container select option {
  color-scheme: dark !important;
  background-color: #160c24 !important;
  color: #f8fafc !important;
  padding: .65rem 1rem !important;
  font-size: .92rem !important;
}

/* Estados hover, focus y checked en las opciones del menú expandido */
html.dark select option:hover,
html.dark select option:focus,
html.dark select option:checked,
html.dark select option:active,
html.dark .pcu-select option:hover,
html.dark .pcu-select option:checked,
html.dark .swal2-select option:hover,
html.dark .swal2-select option:checked,
html.dark select.swal2-input option:hover,
html.dark select.swal2-input option:checked,
html.dark .dataTables_wrapper select option:hover,
html.dark .dataTables_wrapper select option:checked,
html.dark .dt-container select option:hover,
html.dark .dt-container select option:checked {
  background-color: #3b1d66 !important;
  color: #ffffff !important;
}

/* DataTables 1.x y 2.x selects de paginación */
html.dark .dataTables_wrapper .dataTables_length select,
html.dark .dt-container .dt-length select {
  color-scheme: dark !important;
  background-color: #160c24 !important;
  border: 1px solid rgba(216, 180, 254, 0.25) !important;
  color: #f8fafc !important;
  border-radius: 8px !important;
}

/* Menús de acciones flotantes, sub-desplegables y modales que se expanden */
html.dark #dropdownActions,
html.dark #dropdownActions .group > div,
html.dark [id^="dropdownHover-"],
html.dark [data-popper-placement] {
  background-color: #160c24 !important;
  border: 1px solid rgba(216, 180, 254, 0.22) !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.6) !important;
}
html.dark #dropdownActions button,
html.dark #dropdownActions a,
html.dark [id^="dropdownHover-"] a,
html.dark [id^="dropdownHover-"] li {
  color: #EDE4F5 !important;
  transition: background-color .15s ease, color .15s ease !important;
}
html.dark #dropdownActions button:hover,
html.dark #dropdownActions a:hover,
html.dark [id^="dropdownHover-"] a:hover {
  background-color: #2b1842 !important;
  color: #ffffff !important;
}
/* Antes era #374151: sobre el fondo nuevo quedaba casi invisible (1.5:1) */
html.dark input::placeholder,
html.dark textarea::placeholder    { color: #6E5F80 !important; }
html.dark .shadow, html.dark .shadow-sm,
html.dark .shadow-md, html.dark .shadow-xl,
html.dark .shadow-xs               { box-shadow: 0 1px 2px rgba(0,0,0,.5) !important; }
html.dark .divide-gray-100 > * + *,
html.dark .divide-gray-200 > * + *,
html.dark .divide-y > * + *        { border-color: var(--border) !important; }
html.dark footer                   { background-color: var(--k-night) !important; }
html.dark footer span,
html.dark footer a                 { color: var(--muted) !important; }
html.dark .swal2-popup             { background-color: var(--card) !important; border: 1px solid var(--border) !important; }
html.dark .swal2-title,
html.dark .swal2-html-container    { color: var(--text) !important; }
html.dark .swal2-input,
html.dark .swal2-textarea          { background-color: var(--hover) !important; border-color: var(--border) !important; color: var(--text) !important; }
html.dark .bg-blue-600,
html.dark .bg-blue-500,
html.dark .bg-indigo-600,
html.dark .bg-indigo-500           { background-color: var(--accent) !important; color: var(--accent-on) !important; }
html.dark .bg-gray-200             { background-color: var(--hover) !important; color: var(--muted) !important; }
html.dark .bg-green-100            { background: rgba(var(--k-success-rgb), .1) !important; }
html.dark .text-green-800,
html.dark .text-green-500,
html.dark .text-green-400          { color: var(--k-success) !important; }
/* bg-red-50 faltaba: las tarjetas de alting quedaban fondo claro + texto
   claro (text-gray-900 se remapea a --text) y no se leía el nombre. */
html.dark .bg-red-50               { background: rgba(var(--k-danger-rgb), .22) !important; }
html.dark .bg-red-100              { background: rgba(var(--k-danger-rgb), .28) !important; }
html.dark .bg-red-200              { background: rgba(var(--k-danger-rgb), .40) !important; }
html.dark .hover\:bg-red-50:hover,
html.dark .hover\:bg-red-100:hover { background: rgba(var(--k-danger-rgb), .32) !important; }
html.dark .border-red-200,
html.dark .border-red-300          { border-color: rgba(var(--k-danger-rgb), .40) !important; }
html.dark .text-red-800,
html.dark .text-red-700,
html.dark .text-red-500,
html.dark .text-red-400            { color: #fecaca !important; }

/* Tarjeta de alting del perfil: nombre siempre legible sobre el tinte rojo.
   La fila es un <a>, así que hay que pisar el color de link del tema. */
html.dark .pcu-alting-row,
html.dark .pcu-alting-row:hover,
html.dark .pcu-alting-row:visited {
  color: #fff !important;
  text-decoration: none !important;
}
html.dark .pcu-alting-name {
  color: #fff !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}
html.dark .pcu-alting-chip {
  background: rgba(0, 0, 0, .35) !important;
  color: #f3e8ff !important;
  border-color: rgba(255, 255, 255, .18) !important;
}
/* En light también, por si el fondo rojo claro lavaba el gris. */
.pcu-alting-name { color: #1a0c2b !important; }
.pcu-alting-row { text-decoration: none !important; }

/* Los dos acentos que chocaban con la marca. Se conservan como colores
   distintos entre sí (las métricas tienen que diferenciarse) pero corridos a
   los extremos de la rampa del logo: menta y durazno en vez de cian y naranja. */
.text-teal-500,   .text-teal-400,
.text-cyan-500,   .text-cyan-400,
.text-sky-500,    .text-sky-400     { color: #0d7355 !important; }
.text-orange-500, .text-orange-400,
.text-amber-500,  .text-amber-400   { color: #B4553F !important; }
html.dark .text-teal-500,   html.dark .text-teal-400,
html.dark .text-cyan-500,   html.dark .text-cyan-400,
html.dark .text-sky-500,    html.dark .text-sky-400    { color: var(--k-success) !important; }
html.dark .text-orange-500, html.dark .text-orange-400,
html.dark .text-amber-500,  html.dark .text-amber-400  { color: var(--k-peach) !important; }
html.dark .bg-teal-500\/10, html.dark .bg-cyan-500\/10 { background-color: rgba(var(--k-success-rgb), .1) !important; }
html.dark .bg-orange-500\/10, html.dark .bg-amber-500\/10 { background-color: rgba(var(--k-peach-rgb), .1) !important; }
html.dark .shadow-teal-500\/30   { box-shadow: 0 8px 20px rgba(var(--k-success-rgb), .28) !important; }
html.dark .shadow-orange-500\/30 { box-shadow: 0 8px 20px rgba(var(--k-peach-rgb), .28) !important; }
html.dark .shadow-pink-500\/30   { box-shadow: 0 8px 20px rgba(var(--k-hot-rgb), .28) !important; }
html.dark #theme-toggle            { color: var(--accent) !important; }
html.dark #theme-toggle:hover      { background-color: var(--hover) !important; }

/* ── Page load & smooth content ───────────────── */
body.pcu-ready main {
  animation: pcu-fadeIn .2s ease-out;
}
@keyframes pcu-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
body.pcu-ready main.pcu-loading { opacity: .7; pointer-events: none; }

/* ── Page header with icon (unified) ──────────── */
.pcu-page-header {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: 1.5rem;
}
.pcu-page-header-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
  background: var(--hover);
  color: var(--muted);
  border: 1px solid var(--border);
  transition: color .2s, background .2s;
}
html.dark .pcu-page-header-icon { background: var(--card); }
.pcu-page-header-text h1 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 .25rem;
  letter-spacing: -.3px;
  line-height: 1.2;
}
.pcu-page-header-text p {
  font-size: .85rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.4;
}

/* ── Empty state with icon ────────────────────── */
.pcu-empty {
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--muted);
  font-size: .9rem;
}
.pcu-empty i {
  display: block;
  font-size: 2rem;
  margin-bottom: .75rem;
  opacity: .6;
}
.pcu-empty strong { color: var(--text); font-weight: 600; }

/* ── Table link style (consistent) ────────────── */
.pcu-table tbody td a.pcu-link,
.pcu-link { color: var(--accent); text-decoration: none; font-weight: 500; transition: opacity .15s; }
.pcu-table tbody td a.pcu-link:hover,
.pcu-link:hover { opacity: .85; text-decoration: underline; }

/* ── Subsection titles in cards ───────────────── */
.pcu-card-section-title {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--muted);
  padding: .75rem 1.25rem .4rem;
  margin: 0;
}

/* ==========================================================================
   Detalles de marca
   Lo de arriba resuelve el color; esto es lo que hace que la PCU se sienta
   parte de kilomborp.net y no un panel genérico.
   ========================================================================== */

/* Un resplandor muy tenue detrás del contenido, como el halo del logo. Va en
   ::before del body y no en un canvas: acá no queremos animación, sólo que el
   fondo no sea un plano muerto. Sin coste de repintado.

   El color de fondo lo pinta <html> y el body queda transparente, para que el
   halo pueda vivir en z-index -1 sin que nada lo tape. El intento anterior
   (subir los hijos del body con `body > * {position:relative}`) rompía el
   position:fixed del selector de tema y de los toasts. */
html { background-color: var(--bg); }
body { background-color: transparent; }

html.dark body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(70% 50% at 18% 0%,   rgba(var(--k-violet-rgb), .10) 0%, transparent 60%),
    radial-gradient(60% 45% at 100% 30%, rgba(var(--k-pink-rgb),   .07) 0%, transparent 62%);
}

/* El ícono de cabecera es el único sitio de cada pantalla donde aparece el
   degradé completo del logo: marca el punto de entrada y no compite con nada. */
.pcu-page-header-icon {
  background: rgba(var(--k-pink-rgb), .10);
  border-color: rgba(var(--k-pink-rgb), .22);
  color: var(--accent);
}
html.dark .pcu-page-header-icon {
  background: rgba(var(--k-pink-rgb), .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

/* Título con el degradé de la marca, para cabeceras de sección destacadas */
.pcu-brand-text {
  background: var(--k-grad-brand);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
html.dark .pcu-brand-text { background: var(--k-grad-text); -webkit-background-clip: text; background-clip: text; }

/* Separador con el degradé del logo */
.pcu-divider {
  height: 1px;
  border: 0;
  background: var(--k-grad-line);
  opacity: .5;
  margin: 1.5rem 0;
}

/* Chapas de rango: la jerarquía del staff tiene que leerse de un vistazo */
.pcu-rank {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .15rem .5rem;
  border-radius: var(--k-radius-xs);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .3px;
  border: 1px solid currentColor;
  background: color-mix(in srgb, currentColor 12%, transparent);
}
.pcu-rank-low       { color: var(--k-rank-low); }
.pcu-rank-mid       { color: var(--k-rank-mid); }
.pcu-rank-high      { color: var(--k-rank-high); }
.pcu-rank-head      { color: var(--k-rank-head); }
.pcu-rank-directivo { color: var(--k-rank-directivo); }

/* Barra de scroll acorde, en vez de la gris del sistema */
html.dark * { scrollbar-color: rgba(var(--k-pink-rgb), .3) transparent; }
html.dark ::-webkit-scrollbar { width: 10px; height: 10px; }
html.dark ::-webkit-scrollbar-track { background: transparent; }
html.dark ::-webkit-scrollbar-thumb {
  background: rgba(var(--k-pink-rgb), .22);
  border-radius: var(--k-radius-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}
html.dark ::-webkit-scrollbar-thumb:hover { background: rgba(var(--k-pink-rgb), .38); background-clip: content-box; }

/* Selección de texto */
::selection { background: rgba(var(--k-pink-rgb), .3); color: var(--text); }

/* ==========================================================================
   Suavidad
   La PCU tiene 45 vistas escritas a mano y muchas cambian de color al pasar el
   cursor sin declarar ninguna transición, así que el cambio ocurría en un solo
   frame y se sentía brusco.

   Esta capa base va con :where(), que tiene especificidad CERO: le pone una
   transición a todo lo interactivo, pero cualquier regla real —incluida
   .pcu-btn más arriba, o una utilidad de Tailwind— la sobrescribe sin pelear.
   Sólo se transicionan propiedades baratas (color, sombra, opacidad): nada que
   obligue al navegador a recalcular la maqueta en cada cuadro.
   ========================================================================== */
:where(a, button, summary, tr, th, td,
       input, select, textarea,
       .pcu-card, .pcu-badge, .pcu-tab, .pcu-link,
       .glass-card, [class*="hover\:"]) {
  transition:
    background-color var(--k-transition),
    border-color var(--k-transition),
    color var(--k-transition),
    box-shadow var(--k-transition),
    opacity var(--k-transition);
}

/* Las tarjetas se levantan apenas: suficiente para que se note que responden,
   poco para que no salte la maqueta. */
.pcu-card { transition: border-color var(--k-transition), box-shadow var(--k-transition), transform var(--k-transition); }
.pcu-card:hover { border-color: rgba(var(--k-pink-rgb), .28); }

/* Foco visible con el acento de la marca, en todo lo que se pueda tabular.
   :focus-visible y no :focus, para que no aparezca al hacer clic con el mouse. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--k-radius-xs);
}

/* Las filas de tabla escritas con utilidades de Tailwind tampoco declaraban
   transición: se les da la misma que a las de .pcu-table. */
tbody tr { transition: background-color var(--k-transition); }

/* ── Movimiento reducido ──
   Quien activa esta preferencia no quiere que las cosas desaparezcan, quiere
   que no se desplacen. Se conservan los fundidos, que son los que evitan el
   corte brusco, y se anulan los recorridos y los rebotes.

   Se acortan los tiempos redefiniendo el token, NO con un
   `transition-duration: .12s !important` sobre `*`: eso también le pegaba a
   `visibility`, que tiene que cambiar en 0s para que un desplegable se pueda
   ver y clickear desde el primer instante. Con la regla global, el modal
   pasaba sus primeros 60 ms invisible y sin recibir el puntero. */
@media (prefers-reduced-motion: reduce) {
  :root { --k-transition: .12s var(--k-ease); }

  /* Sólo lo decorativo: los desplazamientos y los latidos */
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  :where(a, button, .pcu-card, .pcu-btn):hover,
  :where(a, button, .pcu-card, .pcu-btn):active { transform: none !important; }
}