:root {
  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #f8f9fb;
  --border: #e2e6ed;
  --text: #1c2430;
  --text-muted: #667085;
  --primary: #1e4f91;
  --primary-dark: #163a6b;
  --primary-light: #e8f0fb;
  --accent: #0e7c66;
  --danger: #b3261e;
  --danger-bg: #fbeaea;
  --warn: #a15c00;
  --warn-bg: #fdf1de;
  --ok: #0e7c66;
  --ok-bg: #e6f4f0;
  --sidebar-w: 248px;
  --topbar-h: 60px;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
}
a { color: var(--primary); text-decoration: none; transition: color .15s ease; }
a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes toastIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes pulseDot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Nota: deliberadamente NO se anima la entrada del contenido principal
   (.panel/.grid al cargar la pagina). Un fade-in que depende de que la
   animacion corra a tiempo puede dejar contenido critico invisible si el
   navegador tarda en pintar (se detecto exactamente eso en pruebas). Las
   animaciones de entrada se reservan para elementos creados por JS despues
   de la carga (toasts, dropdowns, tabs), donde no hay riesgo de contenido
   bloqueado. */

.app-shell { display: flex; min-height: 100vh; }

/* ---------- Sidebar ---------- */
.sidebar {
  width: var(--sidebar-w);
  background: var(--primary-dark);
  color: #dce6f5;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.sidebar-brand {
  padding: 18px 20px;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.12);
  letter-spacing: .2px;
}
.sidebar-brand small { display: block; font-weight: 400; font-size: 11px; color: #a9c2e6; margin-top: 4px; margin-left: 44px; }
.brand-row { display: flex; align-items: center; gap: 10px; }
.brand-logo {
  width: 34px; height: 34px; border-radius: 8px; background: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.brand-logo img { width: 26px; height: 26px; object-fit: contain; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 10px 0; }
.sidebar-section { padding: 14px 20px 6px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: #7fa0cf; }
.sidebar-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 20px; color: #dce6f5; text-decoration: none; font-size: 13.5px;
  border-left: 3px solid transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, padding-left .15s ease;
}
.sidebar-nav a svg { flex-shrink: 0; opacity: .82; transition: opacity .15s ease, transform .15s ease; }
.sidebar-nav a:hover { background: rgba(255,255,255,.07); text-decoration: none; padding-left: 23px; }
.sidebar-nav a:hover svg { opacity: 1; transform: scale(1.08); }
.sidebar-nav a.active { background: rgba(255,255,255,.1); border-left-color: #6ea8ff; color: #fff; font-weight: 600; }
.sidebar-nav a.active svg { opacity: 1; }
.sidebar-foot { padding: 14px 20px; border-top: 1px solid rgba(255,255,255,.12); font-size: 12px; color: #a9c2e6; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sidebar-foot a { display: inline-flex; align-items: center; gap: 5px; transition: color .15s ease; }
.sidebar-foot a:hover { color: #fff; }

/* ---------- Main ---------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px;
  position: sticky; top: 0; z-index: 10;
}
.topbar h1 { font-size: 17px; margin: 0; font-weight: 600; }
.topbar .user-chip { display:flex; align-items:center; gap: 10px; font-size: 13px; color: var(--text-muted); }
.badge-rol { background: var(--primary-light); color: var(--primary); padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 600; text-transform: uppercase; }
.user-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--primary);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
}

.content { padding: 22px 26px 60px; max-width: 1400px; width: 100%; margin: 0 auto; }

/* ---------- Cards / panels ---------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 22px;
  margin-bottom: 20px;
  transition: box-shadow .2s ease;
}
.panel-title { font-size: 15px; font-weight: 700; margin: 0 0 4px; }
.panel-sub { color: var(--text-muted); font-size: 12.5px; margin: 0 0 16px; }
.panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ---------- KPI tiles ---------- */
.kpi {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow);
  transition: transform .18s cubic-bezier(.16,.84,.44,1), box-shadow .18s ease, border-color .18s ease;
}
.kpi:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(16,24,40,.1), 0 2px 4px rgba(16,24,40,.06); border-color: #c9dcf5; }
.kpi .label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.kpi .label svg { color: var(--primary); opacity: .7; }
.kpi .value { font-size: 26px; font-weight: 700; margin-top: 6px; color: var(--primary-dark); font-variant-numeric: tabular-nums; }
.kpi .sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* ---------- Forms ---------- */
.form-row { margin-bottom: 14px; }
label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; color: #3a4453; }
input[type=text], input[type=number], input[type=date], input[type=email], input[type=password],
input[type=search], select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 7px;
  font-size: 13.5px; background: #fff; color: var(--text); font-family: inherit;
}
textarea { resize: vertical; min-height: 70px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.form-help { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }
fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin: 0 0 16px; }
legend { font-weight: 700; font-size: 13px; padding: 0 6px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: 7px; border: 1px solid transparent;
  font-size: 13.5px; font-weight: 600; cursor: pointer; text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease, box-shadow .15s ease;
}
.btn svg { flex-shrink: 0; }
.btn:active { transform: scale(.96); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); text-decoration: none; box-shadow: 0 2px 8px rgba(30,79,145,.28); }
.btn-outline { background: #fff; border-color: var(--border); color: var(--text); }
.btn-outline:hover { background: var(--surface-2); text-decoration: none; border-color: #c3c2b7; }
.btn-danger { background: var(--danger-bg); color: var(--danger); border-color: #f2c9c6; }
.btn-danger:hover { background: #f6d9d7; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn[disabled], .btn.is-loading { opacity: .65; cursor: not-allowed; pointer-events: none; }
.btn .spinner {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
  animation: spin .6s linear infinite; display: inline-block;
}
.btn-outline .spinner { border-color: rgba(30,79,145,.25); border-top-color: var(--primary); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  text-align: left; background: var(--surface-2); color: #48526a; font-weight: 700;
  padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .04em;
}
tbody td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background-color .12s ease; }
tbody tr:hover { background: #fafbfd; }
.table-empty { text-align: center; color: var(--text-muted); padding: 30px !important; }

/* ---------- Misc ---------- */
.tag { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.tag-ok { background: var(--ok-bg); color: var(--ok); }
.tag-warn { background: var(--warn-bg); color: var(--warn); }
.tag-danger { background: var(--danger-bg); color: var(--danger); }
.tag-neutral { background: #eef0f4; color: #555; }

.alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 13.5px; border: 1px solid transparent; }
.alert-success { background: var(--ok-bg); color: #0a5c4a; border-color: #bfe6da; }
.alert-error { background: var(--danger-bg); color: #8a1f18; border-color: #f2c9c6; }
.alert-info { background: var(--primary-light); color: var(--primary-dark); border-color: #c9dcf5; }

.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar .spacer { flex: 1; }
.search-box { position: relative; }
.autocomplete-results {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #fff; border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 10px 28px rgba(16,24,40,.14), 0 2px 6px rgba(16,24,40,.08);
  max-height: 280px; overflow-y: auto; z-index: 30; display: none;
  animation: fadeInUp .16s ease both;
}
.autocomplete-results div { padding: 9px 12px; cursor: pointer; font-size: 13px; border-bottom: 1px solid var(--border); transition: background-color .1s ease; }
.autocomplete-results div:last-child { border-bottom: none; }
.autocomplete-results div:hover, .autocomplete-results div.active { background: var(--primary-light); }

.timeline { border-left: 2px solid var(--border); margin-left: 8px; padding-left: 20px; }
.timeline-item { position: relative; padding-bottom: 18px; }
.timeline-item::before { content: ""; position: absolute; left: -25.5px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); }
.timeline-date { font-size: 11.5px; font-weight: 700; color: var(--primary-dark); }
.timeline-tipo { font-size: 10.5px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; margin-left: 8px; }
.timeline-desc { font-size: 13px; margin-top: 3px; }

.card-view { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.ep-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; padding: 12px 14px; }
.ep-card .d { font-size: 11px; color: var(--text-muted); font-weight: 700; }
.ep-card .t { font-size: 10px; text-transform: uppercase; color: var(--accent); font-weight: 700; margin: 3px 0; }
.ep-card .s { font-size: 12.5px; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.tabs a {
  padding: 9px 16px; font-size: 13px; font-weight: 600; color: var(--text-muted);
  border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 6px;
  transition: color .15s ease, border-color .15s ease; text-decoration: none;
}
.tabs a:hover { color: var(--primary-dark); text-decoration: none; }
.tabs a.active { color: var(--primary); border-bottom-color: var(--primary); }
.tabs.tabs-js { position: relative; }
.tabs .tab-panel { animation: fadeIn .22s ease both; }

.pill-toggle { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 30px; padding: 3px; }
.pill-toggle a { padding: 6px 16px; border-radius: 30px; font-size: 12.5px; font-weight: 700; color: var(--text-muted); transition: background-color .18s ease, color .18s ease; text-decoration: none; }
.pill-toggle a:hover { text-decoration: none; color: var(--primary-dark); }
.pill-toggle a.active { background: var(--primary); color: #fff; box-shadow: 0 1px 4px rgba(30,79,145,.35); }

@keyframes gradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.login-wrap {
  min-height: 100vh; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  background: var(--surface);
}
/* Los items de grid no se encogen bajo su ancho de contenido minimo por
   defecto (min-width:auto) -- sin esto, texto/inputs largos empujan el
   layout y provocan scroll horizontal, sobre todo en movil. */
.login-brand, .login-form-side { min-width: 0; }

/* -- Panel izquierdo: marca -- */
.login-brand {
  position: relative; overflow: hidden;
  background: linear-gradient(155deg, #12305c, #1e4f91 55%, #2f6bc4);
  background-size: 200% 200%; animation: gradientShift 16s ease infinite;
  display: flex; align-items: center; justify-content: center; padding: 60px 56px;
  color: #fff;
}
.login-orb { position: absolute; border-radius: 50%; pointer-events: none; }
.login-orb-1 { width: 380px; height: 380px; background: radial-gradient(circle, rgba(255,255,255,.16), transparent 70%); top: -140px; right: -120px; }
.login-orb-2 { width: 300px; height: 300px; background: radial-gradient(circle, rgba(255,255,255,.10), transparent 70%); bottom: -110px; left: -80px; }
.login-brand-inner { position: relative; z-index: 2; max-width: 380px; animation: settleInBig .5s cubic-bezier(.16,.84,.44,1); }
@keyframes settleInBig { from { transform: translateY(10px); } to { transform: translateY(0); } }
.login-brand-logo {
  width: 60px; height: 60px; border-radius: 16px; background: #fff;
  display: flex; align-items: center; justify-content: center; margin-bottom: 26px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.login-brand-logo img { width: 42px; height: 42px; object-fit: contain; }
.login-brand-inner h2 { font-size: 25px; margin: 0 0 10px; font-weight: 700; letter-spacing: -.01em; }
.login-brand-inner > p { font-size: 14px; color: #cfe0f7; margin: 0 0 34px; line-height: 1.55; }
.login-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 15px; }
.login-features li { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: #e6eefb; line-height: 1.4; }
.login-features .fi {
  width: 32px; height: 32px; border-radius: 9px; background: rgba(255,255,255,.14);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* -- Panel derecho: formulario -- */
.login-form-side { display: flex; align-items: center; justify-content: center; padding: 40px 28px; }
.login-box { width: 100%; max-width: 360px; animation: settleInBig .45s cubic-bezier(.16,.84,.44,1); }
.login-box h1 { font-size: 23px; margin: 0 0 4px; letter-spacing: -.01em; }
.login-box p.sub { color: var(--text-muted); font-size: 13px; margin: 0 0 26px; }
.login-box .alert { display: flex; align-items: center; gap: 8px; }
.login-footnote { text-align: center; font-size: 11.5px; color: var(--text-muted); margin: 26px 0 0; line-height: 1.5; }

.input-with-icon { position: relative; }
.input-with-icon .field-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.input-with-icon input { padding-left: 38px; }
.input-with-icon .toggle-password {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: var(--text-muted);
  padding: 5px; border-radius: 6px; display: flex; transition: background-color .15s ease, color .15s ease;
}
.input-with-icon .toggle-password:hover { background: var(--surface-2); color: var(--primary); }

.btn-block { width: 100%; justify-content: center; padding: 11px 16px; font-size: 14px; }

@media (max-width: 860px) {
  .login-wrap { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .login-brand { padding: 34px 28px; }
  .login-features { display: none; }
  .login-brand-inner > p { margin-bottom: 0; }
  .login-orb-1, .login-orb-2 { display: none; }
}

.pagination { display: flex; align-items: center; gap: 14px; margin-top: 16px; justify-content: flex-end; }
.pagination-info { font-size: 12.5px; color: var(--text-muted); }
.pagination .btn[disabled] { opacity: .4; pointer-events: none; }

/* ---------- Toasts (flash messages) ---------- */
.toast-stack {
  position: fixed; top: calc(var(--topbar-h) + 14px); right: 18px; z-index: 1000;
  display: flex; flex-direction: column; gap: 10px; max-width: 380px;
  pointer-events: none;
}
.toast-stack .toast { pointer-events: auto; }
.toast {
  display: flex; align-items: flex-start; gap: 10px;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; box-shadow: 0 8px 24px rgba(16,24,40,.14), 0 2px 6px rgba(16,24,40,.08);
  animation: toastIn .28s cubic-bezier(.16,.84,.44,1) both;
  font-size: 13px; transition: opacity .25s ease, transform .25s ease;
}
.toast.toast-hide { opacity: 0; transform: translateX(24px); }
.toast svg { flex-shrink: 0; margin-top: 1px; }
.toast-success { border-left: 3px solid var(--ok); }
.toast-success svg { color: var(--ok); }
.toast-error { border-left: 3px solid var(--danger); }
.toast-error svg { color: var(--danger); }
.toast-info { border-left: 3px solid var(--primary); }
.toast-info svg { color: var(--primary); }
.toast-close { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 2px; border-radius: 4px; transition: background-color .15s ease; }
.toast-close:hover { background: var(--surface-2); }

/* ---------- Section icon chip (fieldset legends, headers) ---------- */
.section-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px; background: var(--primary-light); color: var(--primary);
  margin-right: 6px; vertical-align: -6px;
}

/* ---------- Breadcrumb ---------- */
.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); margin-bottom: 12px; flex-wrap: wrap; }
.breadcrumb a { display: inline-flex; align-items: center; gap: 4px; color: var(--text-muted); font-weight: 600; }
.breadcrumb a:hover { color: var(--primary); text-decoration: none; }
.breadcrumb svg { opacity: .6; }
.breadcrumb .current { color: var(--text); font-weight: 700; }

/* ---------- Barra de progreso de navegacion ---------- */
#progress-bar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, #6ea8ff, #a9c8ff);
  z-index: 2000; transition: width .35s cubic-bezier(.1,.7,.3,1);
  box-shadow: 0 0 8px rgba(110,168,255,.7);
  pointer-events: none;
}
#progress-bar.done { transition: width .2s ease, opacity .3s ease .15s; opacity: 0; }

/* ---------- Live/status dot ---------- */
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: pulseDot 1.8s ease-in-out infinite; margin-right: 5px; }

.muted { color: var(--text-muted); }
.text-right { text-align: right; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }