/* MiniCore · tema "Callypso" (vino oscuro + tormenta). Compartido por todas las páginas. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: dark;
  --bg:#090506; --card:rgba(24,10,14,.86); --card-solid:#170a0e; --panel:#211016; --head:#1c0c11;
  --text:#fff3f5; --muted:#b7939c; --line:#4b202a; --line-soft:rgba(120,48,64,.38); --hover:rgba(255,90,111,.08);
  --accent:#ff5a6f; --accent-2:#c13b63; --accent-ink:#fff;
  --ok:#36d399; --ok-bg:rgba(54,211,153,.14); --off:#b7939c; --off-bg:rgba(255,255,255,.06);
  --warn:#f6c85f; --warn-bg:rgba(246,200,95,.14); --err:#ff4d61; --orange:#ff9557; --blue:#7aa7ff;
  --shadow:0 18px 50px rgba(0,0,0,.34);
  --radius:18px; --radius-sm:12px;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --side-w:248px; --side-w-collapsed:88px;
}

* { box-sizing:border-box; }
html { background:#070405; }
body {
  margin:0; min-height:100vh; color:var(--text);
  font:14px/1.5 Inter,"Segoe UI",Arial,sans-serif; -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(circle at 14% -5%,#330b13 0,transparent 28%),
    radial-gradient(circle at 92% 4%,#240812 0,transparent 24%),
    linear-gradient(180deg,#080405 0%,#0d0507 48%,#080405 100%);
  background-attachment:fixed;
}
a { color:var(--accent); text-decoration:none; }
::selection { background:rgba(255,90,111,.35); }

/* ---------- Tormenta de fondo ---------- */
#storm { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; contain:strict; transform:translateZ(0); }
#storm canvas { position:absolute; inset:0; width:100%; height:100%; }
#stormFlash { position:absolute; inset:0; opacity:0; mix-blend-mode:screen;
  background:radial-gradient(circle at var(--fx,50%) var(--fy,15%),rgba(235,215,255,.55),rgba(160,120,200,.18) 35%,transparent 70%); }
.cloud { position:absolute; border-radius:50%; filter:blur(40px); opacity:.55; will-change:transform; }
.cloud.c1 { width:70vw; height:32vh; top:-8vh; left:-20vw; background:radial-gradient(ellipse,#3a2438 0,#1c0f18 55%,transparent 72%); animation:drift 90s linear infinite; }
.cloud.c2 { width:60vw; height:28vh; top:4vh; left:40vw; background:radial-gradient(ellipse,#2f1f36 0,#170c14 55%,transparent 72%); animation:drift 120s linear infinite reverse; }
.cloud.c3 { width:80vw; height:30vh; top:-12vh; left:20vw; background:radial-gradient(ellipse,#442634 0,#1e0d15 55%,transparent 72%); opacity:.45; animation:drift 150s linear infinite; }
.cloud.c4 { width:55vw; height:26vh; top:40vh; left:-10vw; background:radial-gradient(ellipse,#2a1826 0,#140a10 55%,transparent 72%); opacity:.35; animation:drift 170s linear infinite reverse; }
.cloud.c5 { width:50vw; height:24vh; top:70vh; left:55vw; background:radial-gradient(ellipse,#2a1826 0,#140a10 55%,transparent 72%); opacity:.3; animation:drift 140s linear infinite; }
@keyframes drift { 0% { transform:translateX(-12vw); } 50% { transform:translateX(12vw); } 100% { transform:translateX(-12vw); } }

/* ---------- Estructura: menú lateral + contenido ---------- */
.app-content { position:relative; z-index:1; margin-left:var(--side-w); min-height:100vh; min-width:0; overflow-x:clip; transition:margin-left .32s var(--ease-out); }
body.side-collapsed .app-content { margin-left:var(--side-w-collapsed); }

.sidebar {
  position:fixed; z-index:40; top:12px; bottom:12px; left:12px; width:calc(var(--side-w) - 24px);
  display:flex; flex-direction:column; padding:16px 12px; gap:6px;
  background:linear-gradient(180deg,rgba(32,12,18,.9),rgba(16,7,10,.92));
  border:1px solid #5a2533; border-radius:24px; box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  transition:width .32s var(--ease-out), transform .32s var(--ease-out);
  overflow:hidden;
}
body.side-collapsed .sidebar { width:calc(var(--side-w-collapsed) - 24px); }

.brand { display:flex; align-items:center; gap:12px; padding:4px 4px 14px; margin-bottom:6px; border-bottom:1px solid var(--line-soft); }
.brand-mark { flex:none; width:40px; height:40px; border-radius:13px; display:grid; place-items:center;
  background:linear-gradient(135deg,#ff5a6f,#a9234e); box-shadow:0 8px 24px rgba(255,90,111,.35); }
.brand-mark svg { width:22px; height:22px; color:#fff; }
.brand-text { min-width:0; white-space:nowrap; transition:opacity .2s, transform .32s var(--ease-out); }
.brand-text b { display:block; font-size:16px; letter-spacing:.01em; }
.brand-text small { display:block; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); font-weight:700; }

.nav { display:flex; flex-direction:column; gap:4px; margin:4px 0; }
.nav-label { font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:#8a6670; font-weight:700; padding:10px 12px 4px; white-space:nowrap; transition:opacity .2s; }
.nav-item {
  position:relative; display:flex; align-items:center; gap:13px; height:44px; padding:0 13px; border-radius:14px;
  color:#d8b9c1; font-weight:600; white-space:nowrap; isolation:isolate;
  transition:color .2s, background-color .2s;
}
.nav-item svg { flex:none; width:20px; height:20px; transition:transform .25s var(--ease-out), filter .25s; }
.nav-item .lbl { transition:opacity .2s, transform .32s var(--ease-out); }
.nav-item:hover { color:#fff; background:rgba(255,90,111,.08); }
.nav-item:hover svg { transform:translateX(2px) scale(1.06); filter:drop-shadow(0 0 6px rgba(255,90,111,.6)); }
.nav-item:active svg { transform:scale(.92); }
.nav-item.active { color:#fff; background:linear-gradient(135deg,rgba(255,90,111,.22),rgba(193,59,99,.16)); box-shadow:inset 0 0 0 1px rgba(255,90,111,.32); }
.nav-item.active svg { color:var(--accent); filter:drop-shadow(0 0 8px rgba(255,90,111,.7)); }
.nav-item.active::before {
  content:''; position:absolute; left:-12px; top:10px; bottom:10px; width:4px; border-radius:0 4px 4px 0;
  background:linear-gradient(180deg,#ff8a9a,#ff5a6f); box-shadow:0 0 14px #ff5a6f;
  animation:indicator-in .45s var(--ease-out) both;
}
@keyframes indicator-in { from { transform:scaleY(0); opacity:0; } to { transform:scaleY(1); opacity:1; } }

/* entrada escalonada (solo la primera vez en la sesión) */
body.side-intro .nav-item, body.side-intro .brand { animation:item-in .5s var(--ease-out) both; animation-delay:calc(var(--i,0) * 45ms + 80ms); }
@keyframes item-in { from { opacity:0; transform:translateX(-10px); } to { opacity:1; transform:none; } }

.side-foot { margin-top:auto; display:flex; flex-direction:column; gap:8px; padding-top:10px; border-top:1px solid var(--line-soft); }
.conn { display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:12px; background:rgba(255,255,255,.03); font-size:12px; color:#d8b9c1; white-space:nowrap; min-height:38px; }
.conn .dot { flex:none; width:9px; height:9px; border-radius:50%; background:#6b4a52; margin-left:5px; }
.conn .dot.ok { background:var(--ok); box-shadow:0 0 0 0 rgba(54,211,153,.6); animation:pulse 2.4s ease-out infinite; }
.conn .dot.warn { background:var(--warn); } .conn .dot.err { background:var(--err); }
@keyframes pulse { 0% { box-shadow:0 0 0 0 rgba(54,211,153,.55); } 70%,100% { box-shadow:0 0 0 8px rgba(54,211,153,0); } }
.conn .txt { overflow:hidden; text-overflow:ellipsis; transition:opacity .2s; }
.collapse-btn { display:flex; align-items:center; gap:13px; height:40px; padding:0 13px; border-radius:12px; border:0; background:transparent; color:#b7939c; cursor:pointer; font:inherit; font-weight:600; white-space:nowrap; }
.collapse-btn:hover { background:rgba(255,90,111,.08); color:#fff; }
.collapse-btn svg { flex:none; width:20px; height:20px; transition:transform .32s var(--ease-out); }

body.side-collapsed .brand-text, body.side-collapsed .nav-item .lbl, body.side-collapsed .nav-label,
body.side-collapsed .conn .txt, body.side-collapsed .collapse-btn .lbl { opacity:0; transform:translateX(-6px); pointer-events:none; }
body.side-collapsed .collapse-btn svg { transform:rotate(180deg); }

/* Menú contraído: columna de iconos centrados (los textos dejan de ocupar espacio). Solo en escritorio. */
@media (min-width:901px) {
body.side-collapsed .sidebar { padding:14px 10px; align-items:center; }
body.side-collapsed .brand { justify-content:center; padding:4px 0 14px; width:100%; }
body.side-collapsed .brand-text, body.side-collapsed .nav-item .lbl, body.side-collapsed .conn .txt,
body.side-collapsed .collapse-btn .lbl { width:0; overflow:hidden; position:absolute; }
body.side-collapsed .nav-label { height:0; padding:0; margin:6px 0; border-top:1px solid var(--line-soft); width:70%; align-self:center; }
body.side-collapsed .nav { width:100%; align-items:center; }
body.side-collapsed .nav-item { width:44px; height:44px; padding:0; justify-content:center; gap:0; }
body.side-collapsed .nav-item.active::before { left:-10px; }
body.side-collapsed .side-foot { width:100%; align-items:center; }
body.side-collapsed .conn { width:44px; padding:0; justify-content:center; gap:0; }
body.side-collapsed .conn .dot { margin:0; }
body.side-collapsed .collapse-btn { width:44px; padding:0; justify-content:center; gap:0; }
}
.menu-btn { display:none; }
.side-scrim { display:none; }
@media (max-width:900px) {
  .app-content, body.side-collapsed .app-content { margin-left:0; }
  .sidebar, body.side-collapsed .sidebar { width:260px; transform:translateX(-120%); }
  body.side-open .sidebar { transform:none; }
  body.side-collapsed .brand-text, body.side-collapsed .nav-item .lbl, body.side-collapsed .nav-label,
  body.side-collapsed .conn .txt { opacity:1; transform:none; }
  .collapse-btn { display:none; }
  .menu-btn { display:inline-grid; place-items:center; width:40px; height:40px; padding:0; }
  header.topbar { margin:10px 10px 0; padding:12px 14px; }
  main { padding:14px 10px 32px; }
  .topbar h1 { font-size:17px; }
  .side-scrim { display:block; position:fixed; inset:0; z-index:35; background:rgba(5,2,3,.6); opacity:0; pointer-events:none; transition:opacity .25s; }
  body.side-open .side-scrim { opacity:1; pointer-events:auto; }
}

/* ---------- Cabecera de página ---------- */
header.topbar {
  position:sticky; top:12px; z-index:20; margin:12px 16px 0; padding:14px 20px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:rgba(22,9,13,.86); border:1px solid var(--line); border-radius:20px;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:var(--shadow);
}
.topbar .titles { display:flex; flex-direction:column; min-width:0; }
.eyebrow { font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); font-weight:800; }
.topbar h1 { font-size:20px; margin:0; font-weight:800; letter-spacing:-.01em; }
.topbar .sp { flex:1; }
main { position:relative; padding:18px 16px 40px; }

/* ---------- Controles ---------- */
button, select, input {
  font:inherit; color:var(--text); background:var(--panel); border:1px solid #5b2d38; border-radius:var(--radius-sm); padding:8px 12px;
  transition:border-color .15s, background-color .15s, box-shadow .15s, transform .12s;
}
button { cursor:pointer; background:linear-gradient(135deg,#612235,#731d42); font-weight:600; }
button:hover { border-color:#ff5a6f; box-shadow:0 0 0 3px rgba(255,90,111,.12); }
button:active { transform:scale(.97); }
button:disabled { opacity:.55; cursor:wait; transform:none; }
button.ghost { background:var(--panel); }
input:focus, select:focus { outline:none; border-color:#ff5a6f; box-shadow:0 0 0 3px rgba(255,90,111,.16); }
input[type=date] { color-scheme:dark; }

/* ---------- Superficies ---------- */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.pill { display:inline-flex; gap:8px; align-items:center; border:1px solid #6b3240; background:#2a1118; padding:6px 12px; border-radius:999px; color:#ffe1e6; font-size:12px; }
.muted { color:var(--muted); }

/* tablas */
table { border-collapse:collapse; }
th { color:var(--muted); }
tbody tr { transition:background-color .15s; }

/* scrollbars */
* { scrollbar-width:thin; scrollbar-color:#5b2d38 transparent; }
*::-webkit-scrollbar { width:10px; height:10px; }
*::-webkit-scrollbar-thumb { background:#4b202a; border-radius:10px; border:2px solid transparent; background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover { background:#6b3240; background-clip:padding-box; }

@media (prefers-reduced-motion: reduce) {
  .cloud { animation:none; }
  *, *::before, *::after { transition-duration:0s !important; animation-duration:0s !important; }
}