/* Fuentes */
@font-face {
  font-family: 'Roobert';
  src: url('./fonts/roobert-regular_10-webfont.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roobert';
  src: url('./fonts/roobert-bold_10-webfont.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Utils */
.hidden{ display: none !important; }

/* Variables */
:root{
  --bg:#0a0d14; --panel:#0e1420; --surface:#121a28; --text:#e5e7eb; --muted:#9aa6b2;
  --accent:#e11d48; --ok:#16a34a; --warn:#f59e0b; --border:#1b2433;
  --shadow:0 12px 40px rgba(0,0,0,.35); --radius:16px; --ring:0 0 0 3px rgba(225,29,72,.25);
  --transition:180ms ease;
  --header-h: 60px; /* Altura header movil */
}
:root[data-theme="light"]{
  --bg:#f7f8fb; --panel:#ffffff; --surface:#f6f8ff; --text:#0b1220; --muted:#5a6372;
  --accent:#e11d48; --ok:#0f8a38; --warn:#cf7e03; --border:#e5e7ef; --shadow:0 8px 30px rgba(16,24,40,.08);
}

/* Base */
*{box-sizing:border-box}
html,body{
  margin:0; min-height:100%;
  color:var(--text);
  background:
    radial-gradient(1200px 420px at 20% -10%, rgba(225,29,72,.12), transparent 80%),
    radial-gradient(1200px 420px at 80% 110%, rgba(29,78,216,.1), transparent 80%),
    var(--bg);
  font-family: 'Roobert', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
:root[data-theme="light"] body{
  background:
    radial-gradient(1200px 420px at 20% -10%, rgba(225,29,72,.06), transparent 80%),
    radial-gradient(1200px 420px at 80% 110%, rgba(29,78,216,.05), transparent 80%),
    var(--bg);
}

/* Grid Layout Desktop (Por defecto) */
body{
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
}

/* Decor */
.bg-blob{position:fixed; z-index:-1; filter:blur(80px); opacity:.3; border-radius:50%}
:root[data-theme="light"] .bg-blob{opacity:.5}
.blob-a{width:300px; height:300px; background:rgba(225,29,72,.3); top:0; left:0}
.blob-b{width:300px; height:300px; background:rgba(59,130,246,.2); bottom:0; right:0}

/* Tipografía */
b,strong,h1,h2,h3{font-weight:600}
h1,h2,h3{margin:0 0 16px 0}
h2.card__title{font-size:1.4rem; padding-bottom:12px; border-bottom:1px solid var(--border)}
h3.card__title{font-size:1.1rem; padding-bottom:10px; border-bottom:1px solid var(--border)}
a{color:var(--accent); text-decoration:none}
pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}
.muted{color:var(--muted); font-size:14px}
small.muted{font-size:13px}

/* Mobile Header (Hidden on Desktop) */
.mobile-header { display: none; }
.mobile-overlay { display: none; }

/* Sidebar */
.sidebar{
  background:var(--panel);
  grid-row: 1 / 3;
  grid-column: 1 / 2;
  padding: 20px 16px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 50; /* Above content */
}

/* Marca */
.brand{ display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 8px; }
.brand__logo{ height: 36px; }
.brand__text{ display:flex; flex-direction:column; line-height:1.2; font-weight:600; width:100% }
.brand__text b{ font-size:18px; }
.brand__text small{ font-weight: 400; }

/* Nav */
.side-nav{ margin-top: 24px; display: flex; flex-direction: column; gap: 6px; }
.side-nav a{
  color: var(--muted); font-weight: 500; font-size: 15px; padding: 10px 12px;
  border-radius: 8px; transition: all var(--transition); display:flex; align-items:center; gap:12px;
}
.side-nav a:hover{ background: var(--surface); color: var(--text); }
.side-nav a.active{ background: var(--surface); color: var(--accent); font-weight: 600; box-shadow: var(--ring); }
.side-nav a svg { width:18px; height:18px; stroke-width:2.2px; color:var(--muted); transition: color var(--transition); }
.side-nav a:hover svg, .side-nav a.active svg { color: var(--accent); }

/* Sidebar options */
.side-options{ margin-top: auto; padding-top: 24px; display: flex; flex-direction: column; gap: 16px; }

/* Main */
.main{ grid-row: 1 / 2; grid-column: 2 / 3; overflow-y: auto; }
.main__content{ max-width: 1080px; margin: 0 auto; padding: 40px 24px; }
.footer{
  grid-row: 2 / 3; grid-column: 2 / 3;
  padding: 12px 24px; font-size: 12px; text-align: right;
  border-top: 1px solid rgba(255,255,255,.08); background: transparent !important;
}
:root[data-theme="light"] .footer{ border-top-color: rgba(0,0,0,.08); }

/* Cards */
.card{
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow); margin-bottom: 24px;
}
.card.error{ border-color:var(--accent); color:var(--accent); }
:root[data-theme="light"] .card{
  background: rgba(255,255,255,.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.tab{ width: 100%; margin: 24px 0; }

/* Formularios */
.form-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 20px; margin-bottom: 24px; }
.form-grid label{ display:flex; flex-direction:column; gap:6px; font-size:14px; font-weight:500; }
input[type="text"], input[type="number"], select{
  width: 100%; background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px; color: var(--text); font-size: 15px;
  transition: all var(--transition);
}
input:focus, select:focus{ outline: 0; border-color: var(--accent); box-shadow: var(--ring); }
input::placeholder{ color: var(--muted); opacity: .5}

/* Botones */
.actions{ display:flex; gap:12px; border-top:1px solid var(--border); padding-top:20px; margin-top:20px}
.btn{
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  padding: 10px 16px; font-size: 15px; font-weight: 600; border-radius: 8px;
  cursor: pointer; transition: all var(--transition);
}
.btn:hover{ background: var(--bg); border-color: #4b5563; }
.btn:focus{ outline:0; box-shadow:var(--ring); border-color:var(--accent)}
.btn.btn-primary{ background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.btn-primary:hover{ background: #be123c; border-color: #be123c; }
.btn.btn-warn{ background: var(--warn); border-color: var(--warn); color: #fff; }
.btn.btn-muted{ background: transparent; border-color: transparent; color: var(--muted); }
.btn.btn-muted:hover{ background: var(--surface); color: var(--text); }
.btn-icon{ background:transparent; border:none; color:var(--text); padding:8px; cursor:pointer; }

/* Switch */
.switch-label{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:500; }
input[type="checkbox"]{
  appearance: none; -webkit-appearance: none; position: relative; width: 38px; height: 22px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 11px; cursor: pointer;
  transition: all var(--transition);
}
input[type="checkbox"]::before{
  content: ''; position: absolute; top: 2px; left: 3px; width: 16px; height: 16px;
  background: var(--muted); border-radius: 50%; transition: all var(--transition);
}
input[type="checkbox"]:checked{ background: var(--accent); border-color: var(--accent); }
input[type="checkbox"]:checked::before{ transform: translateX(15px); background: #fff; }

/* Resultados */
.result-card{ min-height: 50px; margin-top: 20px}
.kpis-row{ display:flex; flex-wrap:wrap; gap:12px; }
.kpi{
  flex: 1 1 120px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 16px; display:flex; flex-direction:column; gap:4px;
}
.kpi span{ font-size: 13px; color: var(--muted); }
.kpi b{ font-size: 1.5rem; font-weight: 600; }

/* Toast */
.toast{
  position: fixed; bottom: 20px; left: 50%; transform: translate(-50%, 10px);
  padding: 12px 20px; background: #222; color: #fff; border-radius: 8px;
  box-shadow: 0 5px 20px rgba(0,0,0,.2); opacity: 0; visibility: hidden;
  transition: all 250ms ease; z-index: 100;
}
.toast.show{ opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.toast.ok{ background:var(--ok); }
.toast.warn{ background:var(--warn); }
.toast.error{ background:var(--accent); }

/* Semáforo, Logs, Skeleton, Backgrounds ... (Igual que antes) */
.semaforo{padding:2px 8px; font-size:11px; font-weight:600; text-transform:uppercase; border-radius:6px; background:#111; border:1px solid var(--border); display:inline-block}
.semaforo.g{background:#0f2b1b; border-color:#0e3b25}
.semaforo.a{background:#2a2310; border-color:#3c2f12}
.semaforo.r{background:#2a0f10; border-color:#3b1215}
.history .card{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:10px; margin-top:8px}
.log{background:#091120; border:1px solid var(--border); border-radius:10px; padding:8px; max-height:220px; overflow:auto; margin-top:10px; font-size:12px}
:root[data-theme="light"] .log{background:#f3f6ff}
.skeleton{
  height:120px; border-radius:12px; border:1px solid var(--border);
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.08), rgba(255,255,255,0));
  animation:shimmer 1.2s infinite; opacity:.25
}
@keyframes shimmer{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}
:root[data-theme="light"] .skeleton{opacity:.6; background:linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.04), rgba(0,0,0,0))}
.bg-blob { display: none !important; }
html, body { background: transparent !important; }
body::before{
  content: ""; position: fixed; inset: 0; z-index: -2;
  background: url("./img/fondo.png") center center / cover no-repeat fixed;
  filter: brightness(0.45) saturate(0.95); transition: background-image 0.3s ease, filter 0.3s ease;
}
body::after{
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: radial-gradient(60% 40% at 20% 0%, rgba(0,0,0,.35), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.2) 40%, rgba(0,0,0,.35));
  pointer-events: none; transition: opacity 0.3s ease;
}
:root[data-theme="light"] body::before{ background-image: url("./img/fondo_claro.png"); filter: brightness(1.0) saturate(1.0); }
:root[data-theme="light"] body::after{ opacity: 0; }

/* History Grid Fix */
#tab-historial .history{ display: grid; gap: 12px; width: 100%; }
#tab-historial .history .card{ width: 100%; margin: 0; }


/* =========================================================
   RESPONSIVE / MOBILE CSS
   ========================================================= */
@media (max-width: 1024px){
  /* 1. Layout Base: 1 sola columna */
  body{
    grid-template-columns: 1fr;
    grid-template-rows: var(--header-h) 1fr auto;
  }

  /* 2. Header Móvil Visible */
  .mobile-header {
    grid-row: 1 / 2; grid-column: 1 / 2;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 16px;
    background: var(--panel); border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 40;
  }
  .mobile-logo { height: 28px; }

  /* 3. Sidebar Transformado en Drawer Off-Canvas */
  .sidebar {
    position: fixed; top: 0; left: 0;
    width: 280px; height: 100vh;
    transform: translateX(-100%); /* Oculto a la izquierda */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 2px 0 20px rgba(0,0,0,0.5);
    padding-top: 20px;
  }
  /* Clase para abrir el menú */
  .sidebar.open { transform: translateX(0); }

  /* 4. Overlay Oscuro (Backdrop) */
  .mobile-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.6);
    backdrop-filter: blur(2px); z-index: 45;
    opacity: 0; visibility: hidden; transition: all 0.3s ease;
    display: block; /* existe en DOM, pero oculto */
  }
  .mobile-overlay.show { opacity: 1; visibility: visible; }

  /* 5. Main Content Ajustes */
  .main { grid-row: 2 / 3; grid-column: 1 / 2; }
  .main__content { padding: 20px 16px; } /* Menos padding lateral */
  .footer { grid-row: 3 / 4; grid-column: 1 / 2; text-align: center; }

  /* 6. Formulario en 1 columna */
  .form-grid { grid-template-columns: 1fr; gap: 12px; }
  
  /* Ajustes botones y tabs */
  .actions { flex-direction: column; }
  .btn { width: 100%; text-align: center; justify-content: center; }
  .tab { margin: 10px 0; }
}