/* ═════════════════════════════════════════════════════════════
   PINEDASR FUTURISTIC UI — capa visual global v25
   Paleta: midnight navy · electric blue · cyan · soft glass
   Solo estilos; no altera flujos de negocio ni estructura DOM.
   ═════════════════════════════════════════════════════════════ */
:root {
  --fx-ink: #e8f1ff;
  --fx-muted: #8ea4c4;
  --fx-navy-950: #071226;
  --fx-navy-900: #0b1830;
  --fx-navy-800: #112545;
  --fx-blue: #397bff;
  --fx-cyan: #48e0f5;
  --fx-line: rgba(130, 174, 235, .19);
  --fx-surface: rgba(15, 31, 57, .88);
  --fx-shadow: 0 18px 50px rgba(5, 15, 35, .12);
  --fx-glow: 0 0 0 1px rgba(72, 224, 245, .14), 0 10px 30px rgba(57, 123, 255, .12);
  --fx-radius: 1rem;
  color-scheme: light;
}
html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(ellipse at 12% 0%, rgba(56, 130, 255, .075), transparent 36rem),
    radial-gradient(ellipse at 95% 12%, rgba(72, 224, 245, .055), transparent 34rem),
    #f3f7fc;
}
::selection { background: rgba(57, 123, 255, .22); color: #10203b; }
a { transition: color .18s ease, opacity .18s ease; }
button, input, select, textarea { font: inherit; }
button, .btn, .btn-primary, .btn-secondary, .btn-danger, .btn-ghost {
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}
button:not(:disabled):hover, .btn:not(:disabled):hover, .btn-primary:not(:disabled):hover,
.btn-secondary:not(:disabled):hover, .btn-danger:not(:disabled):hover, .btn-ghost:not(:disabled):hover {
  transform: translateY(-1px);
}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--fx-cyan);
  outline-offset: 3px;
}
.btn-primary, .bg-blue-600, .bg-blue-700 {
  background-image: linear-gradient(115deg, #2866ed, #397bff 55%, #16bfe0);
  box-shadow: 0 8px 20px rgba(41, 104, 238, .22);
}
.btn-primary:hover:not(:disabled), .bg-blue-600:hover, .bg-blue-700:hover {
  filter: saturate(1.12) brightness(1.04);
  box-shadow: 0 12px 28px rgba(41, 104, 238, .28);
}
.btn-secondary, .btn-ghost {
  border: 1px solid rgba(122, 153, 195, .22);
}
.input, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select, textarea {
  border-radius: .8rem;
  border-color: rgba(122, 153, 195, .28);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.input:focus, input:focus, select:focus, textarea:focus {
  border-color: #55cde9;
  box-shadow: 0 0 0 3px rgba(72, 224, 245, .15), 0 0 0 1px rgba(57, 123, 255, .12);
}
.card, .rounded-xl.border, .rounded-2xl.border, .bg-white.border, .modal-content,
.response-modal, .panel, .stat-card, .dashboard-card, .settings-card {
  border-color: rgba(128, 159, 202, .22);
  box-shadow: var(--fx-shadow);
}
.card, .modal-content, .response-modal, .panel, .stat-card, .dashboard-card, .settings-card {
  border-radius: var(--fx-radius);
}
.page-title {
  color: #10213e;
  letter-spacing: -.045em;
}
.section-title {
  color: #142849;
}
hr, .divide-y > :not([hidden]) ~ :not([hidden]) {
  border-color: rgba(128, 159, 202, .22);
}
table thead th, .dt-container table.dataTable thead th {
  background: linear-gradient(180deg, #f5f9ff, #eaf1fb);
  color: #314a6f;
  border-bottom-color: rgba(57, 123, 255, .22);
}
table tbody tr { transition: background-color .16s ease; }
table tbody tr:hover { background-color: rgba(57, 123, 255, .045); }
.app-shell {
  background:
    radial-gradient(ellipse at 85% 0%, rgba(72, 224, 245, .06), transparent 32rem),
    #f3f7fc;
}
.app-sidebar {
  color: #dbe8ff;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(57, 123, 255, .22), transparent 20rem),
    linear-gradient(180deg, #0a1730 0%, #0b1c38 52%, #09162b 100%);
  border-right: 1px solid rgba(90, 164, 232, .25);
  box-shadow: 12px 0 42px rgba(5, 15, 35, .11);
}
.app-sidebar-cab { border-bottom: 1px solid rgba(130, 174, 235, .12); }
.app-sidebar-titulo, .app-sidebar-nombre { color: #f1f7ff; }
.app-sidebar-desc { color: #8da8ce; }
.app-sidebar-logo {
  background: linear-gradient(145deg, #397bff, #25c8e4);
  box-shadow: 0 0 22px rgba(72, 224, 245, .2);
}
.app-sidebar-nav { scrollbar-color: rgba(101, 145, 206, .45) transparent; }
.app-sidebar-nav a, .app-sidebar-nav button {
  border: 1px solid transparent;
  border-radius: .8rem;
  color: #b8c9e4;
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}
.app-sidebar-nav a:hover, .app-sidebar-nav button:hover {
  color: #fff;
  background: rgba(74, 132, 220, .15);
  border-color: rgba(113, 173, 247, .17);
}
.app-sidebar-nav .active, .app-sidebar-nav [aria-current="page"] {
  color: #fff;
  background: linear-gradient(100deg, rgba(57, 123, 255, .27), rgba(72, 224, 245, .10));
  border-color: rgba(72, 224, 245, .23);
  box-shadow: inset 3px 0 0 #48e0f5, 0 5px 18px rgba(3, 13, 30, .12);
}
.app-sidebar-pie { border-top-color: rgba(130, 174, 235, .16); }
.app-sidebar-copyright { color: #8199bd; }
.app-sidebar-copyright a:hover { color: #48e0f5; }
.app-overlay { background: rgba(3, 10, 25, .66); backdrop-filter: blur(8px); }
.app-topbar {
  background: rgba(247, 250, 255, .82);
  backdrop-filter: blur(18px) saturate(1.4);
  border-bottom-color: rgba(128, 159, 202, .25);
}
.vselect__control {
  border: 1px solid rgba(122, 153, 195, .2);
  background: linear-gradient(180deg, #f8fbff, #edf3fb);
}
.vselect__control:hover:not(:disabled) { background: #e8f2ff; }
.vselect__control:focus-visible, .vselect.is-open .vselect__control {
  box-shadow: 0 0 0 3px rgba(72, 224, 245, .16);
  border-color: rgba(57, 123, 255, .5);
}
.vselect__panel {
  border: 1px solid rgba(128, 159, 202, .3);
  box-shadow: 0 24px 65px rgba(6, 21, 46, .22);
  backdrop-filter: blur(18px);
}
div.dt-container .dt-paging button {
  border-radius: .65rem;
  border-color: rgba(128, 159, 202, .26);
}
div.dt-container .dt-paging button.current {
  background: linear-gradient(120deg, #2866ed, #16bfe0);
  color: #fff !important;
  border-color: transparent;
  box-shadow: 0 5px 16px rgba(41, 104, 238, .2);
}
.modal, [role="dialog"] {
  backdrop-filter: blur(8px);
}
@media (max-width: 767px) {
  .app-main { padding: .8rem; }
  .app-sidebar { box-shadow: 16px 0 45px rgba(3, 10, 25, .28); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}