/* ==========================================================
   ServerPACS v549
   UI profesional ordenada:
   - Cabecera limpia
   - Acciones agrupadas
   - Secciones plegables
   - Más espacio para tabla
   - Modo claro pastel
   ========================================================== */

:root{
  --sp549-bg:#081120;
  --sp549-surface:#0d1728;
  --sp549-surface2:#111d31;
  --sp549-card:#101b2e;
  --sp549-border:rgba(148,163,184,.22);
  --sp549-border-strong:rgba(56,189,248,.32);
  --sp549-text:#edf6ff;
  --sp549-muted:#9fb3c8;
  --sp549-blue:#4db8ff;
  --sp549-blue2:#2d9cff;
  --sp549-green:#53d6a5;
  --sp549-warn:#f6c85f;
  --sp549-danger:#fb7185;
  --sp549-radius:18px;
  --sp549-font:14px;
}

html,body{
  font-size:var(--sp549-font)!important;
}

body{
  background:
    radial-gradient(circle at 15% 5%,rgba(77,184,255,.12),transparent 26%),
    radial-gradient(circle at 95% 25%,rgba(83,214,165,.10),transparent 24%),
    var(--sp549-bg)!important;
  color:var(--sp549-text)!important;
  overflow-x:hidden!important;
}

/* ---------- layout general ---------- */
.app,
.layout,
.shell,
body > .page,
#app{
  min-width:0!important;
}

/* Sidebar más fino y profesional */
aside,
.sidebar,
#sidebar{
  background:linear-gradient(180deg,#0b1424,#0a1220)!important;
  border-right:1px solid rgba(148,163,184,.18)!important;
}

.sidebar button,
aside button,
#sidebar button,
.sidebar a,
aside a,
#sidebar a{
  border-radius:14px!important;
  min-height:36px!important;
}

/* marca */
.sidebar .brand,
aside .brand,
#sidebar .brand,
.logo,
.brand{
  border-radius:16px!important;
}

/* ---------- cabecera principal ---------- */
.topbar,
.toolbar,
.header,
#topbar,
#toolbar{
  border:1px solid var(--sp549-border)!important;
  background:linear-gradient(135deg,rgba(15,23,42,.92),rgba(17,29,49,.82))!important;
  border-radius:22px!important;
  padding:16px 18px!important;
  box-shadow:0 18px 45px rgba(0,0,0,.22)!important;
}

/* Evita que todo se amontone en una línea */
.topbar,
.toolbar,
.actions,
#topActions{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  align-items:center!important;
}

/* Título más limpio */
h1,h2,h3,
.page-title,
.title{
  letter-spacing:-.02em!important;
}

/* ---------- botones superiores ---------- */
button,
.btn,
input[type="button"],
input[type="submit"]{
  border-radius:14px!important;
  border:1px solid rgba(148,163,184,.28)!important;
  background:linear-gradient(180deg,rgba(30,41,59,.94),rgba(15,23,42,.94))!important;
  color:#f8fbff!important;
  font-weight:800!important;
  box-shadow:none!important;
  transition:transform .12s ease, border-color .12s ease, background .12s ease!important;
}

button:hover,
.btn:hover{
  transform:translateY(-1px);
  border-color:rgba(77,184,255,.55)!important;
}

/* Botón primario */
button.primary,
.btn-primary,
#refresh,
#actualizar,
button[id*="refresh" i]{
  background:linear-gradient(135deg,#38bdf8,#2563eb)!important;
  color:white!important;
  border-color:rgba(125,211,252,.55)!important;
}

/* Botones peligrosos */
button.danger,
[id*="Delete" i],
[id*="delete" i]{
  border-color:rgba(251,113,133,.55)!important;
}

/* ---------- métricas ---------- */
.metrics,
.cards,
.stats,
.kpis{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(160px,1fr))!important;
  gap:14px!important;
}

.card,
.metric,
.kpi,
.panel{
  background:linear-gradient(135deg,rgba(15,23,42,.90),rgba(17,29,49,.82))!important;
  border:1px solid var(--sp549-border)!important;
  border-radius:20px!important;
  box-shadow:0 14px 38px rgba(0,0,0,.18)!important;
}

/* ---------- filtros ---------- */
.filters,
#filters,
.filter-panel{
  border:1px solid var(--sp549-border)!important;
  border-radius:20px!important;
  background:rgba(13,23,40,.82)!important;
  padding:16px!important;
}

.filters label,
#filters label,
.filter-panel label{
  color:#cde4ff!important;
  font-weight:800!important;
}

input,
select,
textarea{
  border-radius:14px!important;
  border:1px solid rgba(148,163,184,.26)!important;
  background:#061025!important;
  color:#eef7ff!important;
  min-height:38px!important;
}

input:focus,
select:focus,
textarea:focus{
  outline:none!important;
  border-color:rgba(77,184,255,.70)!important;
  box-shadow:0 0 0 3px rgba(77,184,255,.16)!important;
}

/* Buscador más ancho y claro */
input[type="search"],
input[placeholder*="Buscar" i],
input[placeholder*="paciente" i]{
  min-width:260px!important;
}

/* ---------- zona de acciones de tabla ---------- */
.table-actions,
.pager,
.pagination,
.bulk-actions,
.selection-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  align-items:center!important;
}

/* ---------- tabla ---------- */
.table-wrap,
.table-container,
.grid,
.data-grid{
  border:1px solid var(--sp549-border)!important;
  border-radius:18px!important;
  overflow:auto!important;
  background:rgba(8,17,32,.84)!important;
}

table{
  border-collapse:separate!important;
  border-spacing:0!important;
  width:100%!important;
}

thead th{
  position:sticky!important;
  top:0!important;
  z-index:10!important;
  background:#0b1930!important;
  color:#c7e9ff!important;
  font-size:12px!important;
  text-transform:uppercase!important;
  letter-spacing:.04em!important;
  border-bottom:1px solid rgba(77,184,255,.22)!important;
  white-space:nowrap!important;
}

tbody td{
  border-bottom:1px solid rgba(148,163,184,.13)!important;
  vertical-align:middle!important;
}

tbody tr:hover{
  background:rgba(77,184,255,.06)!important;
}

/* ---------- Panel operativo lateral ---------- */
#spSidebarToolsV535,
.sp-sidebar-pro-v536{
  margin:14px 10px!important;
  padding:14px!important;
  border-radius:22px!important;
  background:linear-gradient(180deg,rgba(15,23,42,.84),rgba(17,24,39,.72))!important;
}

#spSidebarToolsV535 button,
.sp-sidebar-pro-v536 button{
  width:100%!important;
  justify-content:flex-start!important;
  text-align:left!important;
  min-height:40px!important;
}

/* ---------- Panel de opciones plegables v549 ---------- */
.sp549-view-panel{
  position:fixed;
  right:18px;
  top:88px;
  z-index:24000;
  width:280px;
  max-width:calc(100vw - 24px);
  background:rgba(15,23,42,.96);
  border:1px solid rgba(148,163,184,.28);
  border-radius:20px;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  padding:14px;
  color:#e5f5ff;
  display:none;
}

.sp549-view-panel.open{
  display:block;
}

.sp549-view-panel h3{
  margin:0 0 10px;
  font-size:15px;
}

.sp549-view-panel label{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 4px;
  color:#dbeafe;
}

.sp549-view-panel input{
  min-height:auto!important;
}

.sp549-view-toggle{
  position:fixed;
  right:18px;
  top:22px;
  z-index:24001;
  border-radius:999px!important;
  background:linear-gradient(135deg,#38bdf8,#2563eb)!important;
  color:white!important;
  padding:10px 14px!important;
}

/* ocultaciones controladas */
html.sp549-hide-sidebar aside,
html.sp549-hide-sidebar .sidebar,
html.sp549-hide-sidebar #sidebar{
  display:none!important;
}

html.sp549-hide-metrics .metrics,
html.sp549-hide-metrics .cards,
html.sp549-hide-metrics .stats,
html.sp549-hide-metrics .kpis{
  display:none!important;
}

html.sp549-hide-filters .filters,
html.sp549-hide-filters #filters,
html.sp549-hide-filters .filter-panel{
  display:none!important;
}

html.sp549-hide-top-actions .topbar button:not(.sp549-keep),
html.sp549-hide-top-actions .toolbar button:not(.sp549-keep){
  display:none!important;
}

html.sp549-compact table th,
html.sp549-compact table td{
  padding-top:5px!important;
  padding-bottom:5px!important;
  font-size:12px!important;
}

html.sp549-wide .content,
html.sp549-wide main,
html.sp549-wide .main{
  max-width:none!important;
  width:100%!important;
}

/* ---------- modo claro pastel ---------- */
html[data-servpacs-theme="light"],
html[data-servpacs-theme="light"] body{
  --sp549-bg:#f7fbff;
  --sp549-surface:#ffffff;
  --sp549-card:#ffffff;
  --sp549-text:#213047;
  --sp549-muted:#6b7f96;
  background:
    radial-gradient(circle at 10% 10%,rgba(186,230,253,.62),transparent 30%),
    radial-gradient(circle at 95% 20%,rgba(204,251,241,.72),transparent 26%),
    radial-gradient(circle at 50% 100%,rgba(233,213,255,.45),transparent 32%),
    #f7fbff!important;
  color:#213047!important;
}

html[data-servpacs-theme="light"] .topbar,
html[data-servpacs-theme="light"] .toolbar,
html[data-servpacs-theme="light"] .header,
html[data-servpacs-theme="light"] #topbar,
html[data-servpacs-theme="light"] #toolbar,
html[data-servpacs-theme="light"] .card,
html[data-servpacs-theme="light"] .metric,
html[data-servpacs-theme="light"] .kpi,
html[data-servpacs-theme="light"] .panel,
html[data-servpacs-theme="light"] .filters,
html[data-servpacs-theme="light"] #filters,
html[data-servpacs-theme="light"] .filter-panel,
html[data-servpacs-theme="light"] .table-wrap,
html[data-servpacs-theme="light"] .table-container,
html[data-servpacs-theme="light"] .grid,
html[data-servpacs-theme="light"] .data-grid{
  background:rgba(255,255,255,.86)!important;
  color:#213047!important;
  border-color:#d8e8f5!important;
  box-shadow:0 16px 42px rgba(148,163,184,.15)!important;
}

html[data-servpacs-theme="light"] aside,
html[data-servpacs-theme="light"] .sidebar,
html[data-servpacs-theme="light"] #sidebar{
  background:linear-gradient(180deg,#eff8ff,#f8fbff)!important;
  color:#213047!important;
  border-color:#d8e8f5!important;
}

html[data-servpacs-theme="light"] button,
html[data-servpacs-theme="light"] .btn{
  background:linear-gradient(180deg,#ffffff,#eef7ff)!important;
  color:#213047!important;
  border-color:#d5e6f3!important;
}

html[data-servpacs-theme="light"] button.primary,
html[data-servpacs-theme="light"] .btn-primary,
html[data-servpacs-theme="light"] #refresh{
  background:linear-gradient(135deg,#93c5fd,#67e8f9)!important;
  color:#123047!important;
  border-color:#bfdbfe!important;
}

html[data-servpacs-theme="light"] input,
html[data-servpacs-theme="light"] select,
html[data-servpacs-theme="light"] textarea{
  background:#fbfdff!important;
  color:#213047!important;
  border-color:#d5e6f3!important;
}

html[data-servpacs-theme="light"] thead th{
  background:#edf8ff!important;
  color:#31506b!important;
  border-color:#d8e8f5!important;
}

html[data-servpacs-theme="light"] tbody tr:hover{
  background:#f0f9ff!important;
}

html[data-servpacs-theme="light"] .sp549-view-panel{
  background:rgba(255,255,255,.96)!important;
  color:#213047!important;
  border-color:#d8e8f5!important;
}

html[data-servpacs-theme="light"] .sp549-view-panel label{
  color:#314a63!important;
}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .metrics,.cards,.stats,.kpis{
    grid-template-columns:repeat(2,minmax(160px,1fr))!important;
  }

  .topbar,.toolbar,.actions,#topActions{
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    padding-bottom:8px!important;
  }

  .topbar button,.toolbar button,.actions button,#topActions button{
    flex:0 0 auto!important;
  }
}

@media(max-width:720px){
  :root{--sp549-font:13px}

  .metrics,.cards,.stats,.kpis{
    grid-template-columns:1fr!important;
  }

  .sp549-view-toggle{
    top:auto;
    bottom:16px;
    right:16px;
  }

  .sp549-view-panel{
    top:auto;
    bottom:68px;
    right:12px;
    left:12px;
    width:auto;
  }

  input[type="search"],
  input[placeholder*="Buscar" i],
  input[placeholder*="paciente" i]{
    min-width:180px!important;
  }
}