/* Consola AlchemyCode · ajustes sobre el sistema de diseño (que nació para mockups
   fijos de 1440×900). Aquí lo volvemos una aplicación fluida y responsive. */

:root { --sidebar-w: 226px; }

html, body { height: auto; min-height: 100%; }
body { background: var(--canvas); }

.app { display: flex; width: 100%; height: auto; min-height: 100vh; }
.app-body { width: 100%; height: auto; }

.sidebar {
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  height: 100vh; position: sticky; top: 0;
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
}
.sidebar .nav { flex: 1 1 auto; overflow-y: auto; }
.sidebar-foot { margin-top: auto; padding: 12px 14px 16px; border-top: 1px solid rgba(255,255,255,.06); }

.main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; height: auto; min-height: 100vh; }
.topbar { position: sticky; top: 0; z-index: 20; height: 54px; flex: 0 0 54px; display: flex; align-items: center; gap: 10px; padding: 0 20px; background: var(--paper); border-bottom: 1px solid var(--line); }
.topbar .spacer { flex: 1 1 auto; }
.topbar .crumb { font-size: 11.5px; color: var(--text-2); display: flex; align-items: center; gap: 7px; }
.topbar .crumb b { color: var(--ink-800); font-weight: 600; }
.topbar .search { width: 250px; }

.content { flex: 1 1 auto; overflow: visible; padding: 22px 26px 56px; max-width: 1380px; width: 100%; margin: 0 auto; gap: 14px; }
.page-head { align-items: center; }
.page-title h1 { font-size: 22px; }
.page-title p { font-size: 12px; }

.card, .table-card, .form-card { min-width: 0; }
.card-body { padding: 14px 16px 16px; }
.table-wrap { overflow-x: auto; }

/* Tablas genéricas dentro de tarjetas */
.table-card table { font-size: 12px; }
.table-card thead th, table.tbl thead th {
  text-align: left; font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--slate-500); font-weight: 600; padding: 9px 12px; border-bottom: 1px solid var(--line);
  background: var(--canvas-2); white-space: nowrap;
}
.table-card tbody td, table.tbl tbody td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.table-card tbody tr:hover td, table.tbl tbody tr:hover td { background: var(--canvas-2); }
.table-card tbody tr:last-child td, table.tbl tbody tr:last-child td { border-bottom: 0; }

/* KPIs fluidos */
.kpis { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.kpi-val { font-size: 24px; }
.kpi-val small { font-size: 11px; }

.grid-2 { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* Servicios */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; }
.svc { border: 1px solid var(--line); border-radius: 10px; padding: 12px 13px; background: #fff; display: flex; flex-direction: column; gap: 7px; box-shadow: var(--sh-sm); }
.svc-top { display: flex; align-items: center; gap: 8px; }
.svc-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--cobalt-50); color: var(--cobalt-600); flex: 0 0 auto; }
.svc-name { font-weight: 600; font-size: 12.5px; letter-spacing: -.01em; }
.svc-desc { font-size: 11px; color: var(--text-2); line-height: 1.45; }
.svc-meta { display: flex; align-items: center; gap: 6px; margin-top: auto; font-size: 10.5px; color: var(--slate-400); }

/* Gráfica */
.chart { width: 100%; height: 150px; }
.chart .bar { fill: var(--cobalt-100); }
.chart .bar.hi { fill: var(--cobalt-500); }
.chart .axis { stroke: var(--line); stroke-width: 1; }
.chart .lbl { fill: var(--slate-400); font-size: 8.5px; font-family: var(--font-sans); }

/* Código / JSON */
pre.code, .code-block {
  margin: 0; padding: 12px 14px; border-radius: 9px; background: var(--ink-900); color: #D7DEEA;
  font-family: var(--font-mono); font-size: 11px; line-height: 1.65; overflow: auto; max-height: 420px;
}
pre.code .k { color: #9CC7FF; }
pre.code .s { color: #C7E59A; }
code.inline { font-family: var(--font-mono); font-size: 11px; background: var(--canvas); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; }

/* Alertas / flash */
.flash { display: flex; align-items: flex-start; gap: 9px; padding: 11px 13px; border-radius: 9px; font-size: 12px; border: 1px solid; }
.flash-ok { background: var(--green-50); border-color: #C6EBDD; color: var(--green-600); }
.flash-err { background: var(--red-50); border-color: #F5CDC8; color: var(--red-600); }
.flash-info { background: var(--cobalt-50); border-color: #D9E1FF; color: var(--cobalt-700); }

/* Credenciales */
.cred { border: 1px solid var(--line); border-radius: 10px; padding: 13px 14px; background: #fff; }
.cred-head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.cred-head .ic-lg { color: var(--slate-400); }
.cred-title { font-weight: 600; font-size: 12.5px; }
.cred-sub { font-size: 10.5px; color: var(--text-3); }
.cred-actions { margin-top: 12px; display: flex; gap: 7px; flex-wrap: wrap; }

/* Formularios en consola */
.form-card .input, .form-card select.input { width: 100%; }
.field .hint { font-size: 10.5px; color: var(--text-3); }
.field .err { font-size: 10.5px; color: var(--red-600); }
.form-actions { display: flex; gap: 8px; align-items: center; padding: 14px 18px; background: var(--canvas-2); border-top: 1px solid var(--line); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.checkline { display: flex; align-items: flex-start; gap: 8px; font-size: 11.5px; color: var(--ink-700); padding: 5px 0; }
.checkline input { margin-top: 2px; accent-color: var(--cobalt-500); }

/* Estados vacíos */
.empty { text-align: center; padding: 44px 20px; color: var(--text-2); }
.empty .ic { width: 34px; height: 34px; color: var(--slate-300); margin: 0 auto 10px; }
.empty h3 { font-size: 14px; color: var(--ink-800); margin-bottom: 4px; }
.empty p { font-size: 11.5px; max-width: 380px; margin: 0 auto 14px; }

/* Auth */
.auth-page { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(1200px 600px at 15% -10%, #E8EDFF 0%, transparent 60%), var(--canvas); padding: 32px; }
.auth-card { width: 100%; max-width: 420px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--sh-lg); overflow: hidden; }
.auth-head { padding: 26px 26px 0; }
.auth-body { padding: 18px 26px 24px; display: flex; flex-direction: column; gap: 13px; }
.auth-foot { padding: 13px 26px; background: var(--canvas-2); border-top: 1px solid var(--line); font-size: 11px; color: var(--text-2); }
.auth-logo { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; }

/* Navegación */
.nav-item .nav-badge { font-size: 9.5px; }
.nav-item.active { border-radius: 7px; }

/* Responsive */
@media (max-width: 980px) {
  .sidebar { display: none; }
  .content { padding: 16px 14px 40px; }
  .topbar .search { display: none; }
  .form-grid { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .kpis { grid-template-columns: 1fr; }
  .page-actions { width: 100%; }
}

/* Utilidades */
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; align-items: center; gap: 8px; }
.row.wrap { flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.mt-auto { margin-top: auto; }
.w-full { width: 100%; }
.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-sm { font-size: 11.5px; }
.text-xs { font-size: 10.5px; }
.strong { font-weight: 600; }
.muted-2 { color: var(--text-3); }
.hr-thin { height: 1px; background: var(--line-soft); border: 0; margin: 10px 0; }
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; padding: 2px 7px; border-radius: 5px; background: var(--canvas); color: var(--slate-500); border: 1px solid var(--line); font-family: var(--font-mono); }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--line-soft); font-size: 11.5px; }
.kv:last-child { border-bottom: 0; }
.kv dt { color: var(--text-2); }
.kv dd { margin: 0; font-weight: 500; text-align: right; }
.progress { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--cobalt-500); border-radius: 999px; }
.progress.warn > i { background: var(--amber-500); }
.progress.danger > i { background: var(--red-500); }


/* Inputs de archivo y botones dentro de .stack */
.stack > .btn { align-self: flex-start; }
input[type=file].input { height: auto; padding: 7px 9px; font-size: 11px; color: var(--slate-500); }
input[type=file].input::file-selector-button {
  font: inherit; font-size: 10.5px; font-weight: 600; color: var(--ink-700);
  background: var(--canvas); border: 1px solid var(--line); border-radius: 5px;
  padding: 3px 8px; margin-right: 8px; cursor: pointer;
}
/* Los checkboxes son <label>, no deben heredar el estilo de label de campo */
.field > label.checkline {
  text-transform: none; letter-spacing: 0; font-size: 11.5px; font-weight: 400;
  color: var(--ink-700); align-items: center; gap: 8px; padding: 4px 0;
}
.field > label.checkline code.inline { font-size: 10px; color: var(--slate-500); }

/* ==========================================================================
   AlchemyCode · identidad de marca
   Azul #2563EB · tinta #0F172A · Inter · matraz como símbolo
   ========================================================================== */
@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/static/fonts/inter.woff2') format('woff2');
}

:root{
  --ink-950:#030508; --ink-900:#05070C; --ink-850:#0B1220; --ink-800:#0F172A;
  --ink-700:#1E293B; --ink-600:#334155;
  --slate-600:#475569; --slate-500:#64748B; --slate-400:#94A3B8;
  --slate-300:#CBD5E1; --slate-200:#E2E8F0; --slate-100:#F1F5F9;
  --paper:#FFFFFF; --canvas:#FAFAFA; --canvas-2:#F8FAFC; --warm:#F8FAFC;
  --line:#E2E8F0; --line-soft:#F1F5F9;
  --cobalt-700:#1E40AF; --cobalt-600:#1D4ED8; --cobalt-500:#2563EB;
  --cobalt-200:#BFDBFE; --cobalt-100:#DBEAFE; --cobalt-50:#EFF6FF;
  --lime-500:#3B82F6; --lime-400:#60A5FA; --lime-100:#DBEAFE;
  --green-600:#047857; --green-500:#10B981; --green-50:#ECFDF5;
  --amber-600:#B45309; --amber-500:#F59E0B; --amber-50:#FFFBEB;
  --red-600:#B91C1C; --red-500:#EF4444; --red-50:#FEF2F2;
  --violet-500:#7C3AED; --violet-50:#F5F3FF;
  --font-display:"Inter",ui-sans-serif,system-ui,sans-serif;
  --font-sans:"Inter",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  --sh-sm:0 1px 2px rgba(15,23,42,.05);
  --sh-md:0 12px 32px -16px rgba(15,23,42,.20);
  --sh-lg:0 30px 70px -30px rgba(15,23,42,.30);
}

body{font-feature-settings:"cv02","cv03","cv04","cv11";background:var(--canvas)}
.sidebar{background:linear-gradient(180deg,#05070C 0%,#080B12 100%);color:#94A3B8}
.sidebar::after{background:radial-gradient(440px 260px at 0% -12%,rgba(37,99,235,.24),transparent 65%)}
.brand-mark{background:transparent;box-shadow:none}
.brand-flask{width:30px;height:30px;object-fit:contain;flex:0 0 30px;padding:3px;
  background:#fff;border-radius:9px;box-shadow:0 2px 10px rgba(37,99,235,.25)}
.brand-word{letter-spacing:.12em;font-size:12.5px}
.brand-suffix{color:#93C5FD;border-color:rgba(147,197,253,.28);background:rgba(37,99,235,.12)}
.workspace{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
.workspace .ws-icon{background:rgba(37,99,235,.16);color:#93C5FD}
.nav-item.active{background:rgba(37,99,235,.16)}
.nav-item.active .ic{color:#93C5FD}
.nav-item.active::before{background:#3B82F6}
.nav-item.active .nav-badge{background:rgba(37,99,235,.22);color:#BFDBFE}
.nav-item:hover{background:rgba(255,255,255,.04)}
.topbar{background:rgba(255,255,255,.92);backdrop-filter:blur(12px)}
.card,.table-card,.form-card,.kpi,.cred,.svc{border-radius:14px}
.btn{border-radius:8px}
.btn-primary{box-shadow:0 1px 2px rgba(37,99,235,.35),inset 0 1px 0 rgba(255,255,255,.18)}
.btn-lime{background:var(--cobalt-500);color:#fff;border-color:transparent}
.badge-lime{background:#EFF6FF;color:#1D4ED8;border-color:#BFDBFE}
.input:focus{border-color:#93C5FD;box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.chart .bar{fill:#DBEAFE}
.chart .bar.hi{fill:#2563EB}
.auth-page{background:
  radial-gradient(900px 420px at 12% -8%,#DBEAFE 0%,transparent 60%),
  radial-gradient(700px 420px at 100% 0%,#EFF6FF 0%,transparent 55%),#FAFAFA}
.auth-card{border-radius:18px}
.auth-logo-img{width:184px;height:auto;display:block;margin-bottom:16px}
pre.code{background:#0B1220}

/* El sistema original dimensiona .auth-body para un lienzo fijo de 1440×900. */
.auth-body{width:auto;height:auto;overflow:visible;padding:20px 26px 26px;display:flex;flex-direction:column;gap:13px}
.auth-card{width:100%;max-width:420px}
.auth-head{padding:26px 26px 0}

/* ==========================================================================
   Estados de carga · skeletons, progreso y botones
   ========================================================================== */
@keyframes sk-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
@keyframes sk-spin{to{transform:rotate(360deg)}}

.sk{
  background:linear-gradient(90deg,#EEF2F7 25%,#F8FAFC 37%,#EEF2F7 63%);
  background-size:400% 100%;animation:sk-shimmer 1.6s ease infinite;
  border-radius:6px;min-height:10px;
}
.sk-line{height:10px;margin-bottom:8px}
.sk-line.lg{height:14px}
.sk-line.sm{height:8px}
.sk-line.w-40{width:40%}.sk-line.w-60{width:60%}.sk-line.w-75{width:75%}
.sk-circle{width:34px;height:34px;border-radius:10px;flex:0 0 auto}
.sk-card{height:92px;border-radius:12px}
.sk-panel{height:150px;border-radius:10px}
.sk-row{display:grid;grid-template-columns:1.5fr 1fr .8fr;gap:18px;padding:13px 0;border-bottom:1px solid var(--line-soft)}
.sk-row:last-child{border-bottom:0}
.sk-stack{display:flex;flex-direction:column;gap:10px}
.sk-json{background:#0B1220;border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:9px}
.sk-json .sk{background:linear-gradient(90deg,#141C2B 25%,#1D283A 37%,#141C2B 63%);background-size:400% 100%}
.sk-json .sk:nth-child(2n){width:78%}
.sk-json .sk:nth-child(3n){width:62%}

/* Barra de progreso en navegación */
#nav-progress{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:9999;pointer-events:none;
  background:linear-gradient(90deg,#2563EB,#60A5FA);
  box-shadow:0 0 10px rgba(37,99,235,.55);opacity:0;transition:width .25s ease,opacity .2s ease;
}
#nav-progress.is-on{opacity:1;width:82%;transition:width 7s cubic-bezier(.08,.65,.2,1),opacity .15s ease}
body.is-navigating .main{opacity:.5;filter:saturate(.65);transition:opacity .15s ease}
body.is-navigating .topbar{opacity:.7}

/* Botón en estado de carga */
.btn.is-loading{position:relative;color:transparent!important;pointer-events:none}
.btn.is-loading svg,.btn.is-loading span{opacity:0}
.btn.is-loading::after{
  content:"";position:absolute;width:15px;height:15px;border-radius:50%;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:sk-spin .7s linear infinite;
}
.btn-ghost.is-loading::after,.btn-soft.is-loading::after{border-color:rgba(15,23,42,.2);border-top-color:#0F172A}

/* ==========================================================================
   SweetAlert2 · tema AlchemyCode
   ========================================================================== */
.swal2-container.swal2-backdrop-show{background:rgba(5,7,12,.42);backdrop-filter:blur(3px)}
.swal2-popup.alchemy-swal{
  font-family:var(--font-sans);border-radius:16px;padding:24px 24px 20px;
  box-shadow:0 30px 70px -30px rgba(15,23,42,.45);border:1px solid var(--line);
}
.alchemy-swal .swal2-title{
  font-family:var(--font-sans);font-size:19px;font-weight:700;letter-spacing:-.02em;
  color:var(--ink-900);padding:0;margin:2px 0 6px;
}
.alchemy-swal .swal2-html-container{
  font-size:12.5px;line-height:1.55;color:var(--slate-500);margin:0;padding:0 4px;
}
.alchemy-swal .swal2-icon{transform:scale(.8);margin:2px auto 8px}
.alchemy-swal .swal2-actions{gap:8px;margin-top:18px;width:100%}
.alchemy-swal .swal2-styled{
  font-family:var(--font-sans);font-size:12.5px;font-weight:600;border-radius:8px;
  padding:10px 16px;margin:0;box-shadow:none;transition:background .15s ease,border-color .15s ease;
}
.alchemy-swal .swal2-confirm{background:var(--cobalt-500)}
.alchemy-swal .swal2-confirm:hover{background:var(--cobalt-600)}
.alchemy-swal .swal2-confirm.swal-danger{background:var(--red-500)}
.alchemy-swal .swal2-confirm.swal-danger:hover{background:var(--red-600)}
.alchemy-swal .swal2-cancel{background:#fff;border:1px solid var(--line);color:var(--ink-700)}
.alchemy-swal .swal2-cancel:hover{background:var(--canvas-2)}
.alchemy-swal .swal2-close{color:var(--slate-400);font-size:22px}
.alchemy-swal .swal2-timer-progress-bar{background:var(--cobalt-500)}

.swal2-popup.alchemy-toast{
  font-family:var(--font-sans);border-radius:10px;border:1px solid var(--line);
  box-shadow:var(--sh-md);padding:10px 14px;font-size:12.5px;
}
.alchemy-toast .swal2-title{font-size:12.5px;font-weight:600;color:var(--ink-800);padding:0;margin:0}
.alchemy-toast .swal2-icon{transform:scale(.62);margin:0 8px 0 0}

@media (prefers-reduced-motion: reduce){
  .sk{animation:none;background:#EEF2F7}
  #nav-progress.is-on{width:100%;transition:none}
  .btn.is-loading::after{animation-duration:1.4s}
}

/* Acción con apariencia de enlace (dentro de texto) */
.linklike{
  background:none;border:0;padding:0;margin-left:8px;color:var(--cobalt-600);
  font:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer;
}
.linklike:hover{color:var(--cobalt-700)}

/* Correcciones de integración SweetAlert */
.swal2-container.swal2-backdrop-show{background:transparent;backdrop-filter:none}
.swal2-container.swal2-backdrop-show:has(.alchemy-swal){
  background:rgba(5,7,12,.42);backdrop-filter:blur(3px);
}
.alchemy-swal .swal2-actions .swal2-confirm,
.alchemy-swal .swal2-actions .swal2-cancel{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:112px;min-height:38px;padding:0 16px;margin:0;
  font-family:var(--font-sans);font-size:12.5px;font-weight:600;line-height:1;
  border-radius:8px;border:1px solid transparent;cursor:pointer;box-shadow:none;
}
.alchemy-swal .swal2-actions .swal2-confirm{background:var(--cobalt-500);color:#fff}
.alchemy-swal .swal2-actions .swal2-confirm:hover{background:var(--cobalt-600)}
.alchemy-swal .swal2-actions .swal2-confirm.swal-danger{background:var(--red-500);color:#fff}
.alchemy-swal .swal2-actions .swal2-confirm.swal-danger:hover{background:var(--red-600)}
.alchemy-swal .swal2-actions .swal2-cancel{background:#fff;border-color:var(--line);color:var(--ink-700)}
.alchemy-swal .swal2-actions .swal2-cancel:hover{background:var(--canvas-2)}
.alchemy-swal .swal2-icon{width:56px;height:56px;min-width:56px;margin:4px auto 12px;border-width:3px}
.alchemy-swal .swal2-icon .swal2-icon-content{font-size:34px}

.staging-banner{
  position:fixed;top:10px;left:50%;transform:translateX(-50%);z-index:9999;
  background:#F59E0B;color:#111827;border:1px solid #D97706;border-radius:999px;
  padding:4px 12px;font-size:10px;font-weight:700;letter-spacing:.06em;
  box-shadow:0 4px 14px rgba(15,23,42,.18);pointer-events:none;
}