/* ═══════════════════════════════════════════════════════════
   ICA SERIES · TEMA COMÚN  (theme.css)
   ───────────────────────────────────────────────────────────
   Tokens de color, barra lateral, barra superior e iconos.
   Enlázalo en cada página DESPUÉS de su <style> propio:

       <style> ...estilos de la página... </style>
       <link rel="stylesheet" href="theme.css">

   El orden importa: al ir después, el tema tiene la última
   palabra sobre el color y los componentes compartidos, igual
   que ocurría cuando este bloque vivía al final del <style>.

   Para cambiar el acento de marca, toca solo --accent aquí.
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@300;400;500;600;700&display=swap');

/* Tokens completos: los de marca del rediseño + los de estado y
   tipografía, para que una página enlace solo este archivo. */
:root{
  --success:#00c9a7; --warn:#f5a623; --danger:#ff4d6a;
  --mono:'DM Mono',monospace; --sans:'DM Sans',sans-serif;
}

:root{
  --bg:#08080a; --bg2:#101014; --bg3:#17171e; --bg4:#20202a;
  --border:#1f1f29; --border2:#2d2d3a;
  --text:#edeff5; --muted:#7b8093; --muted2:#a3a8bb;
  --accent:#FF0066; --accent-soft:rgba(255,0,102,.14);
  /* derivados del acento: cámbialo arriba y estos siguen */
  --accent-border:rgba(255,0,102,.27); --accent-pill:rgba(255,0,102,.15);
  --pink:#FF0066;
  --sb-w:244px;
}
body{background:var(--bg)}
/* Estas dos reglas solo aplican en páginas que YA tienen barra lateral
   (<aside class="sb">). Así una página con la cabecera antigua puede
   enlazar el tema para heredar el color sin perder su cabecera. */
#app:has(.sb){flex-direction:row!important;align-items:stretch}
#app:has(.sb) .hdr{display:none!important}

/* ── BARRA LATERAL ── */
.sb{
  width:var(--sb-w);flex-shrink:0;background:var(--bg2);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;z-index:150;
}
.sb-top{padding:20px 18px 14px;display:flex;align-items:center}
.sb-logo{height:26px;width:auto;max-width:100%;object-fit:contain}
.sb-search{margin:0 14px 16px;position:relative}
.sb-search input{
  width:100%;background:var(--bg3);border:1px solid var(--border);
  border-radius:9px;padding:8px 30px 8px 30px;color:var(--text);
  font-family:var(--sans);font-size:12.5px;outline:none;transition:border-color .2s
}
.sb-search input:focus{border-color:var(--accent)}
.sb-search input::placeholder{color:var(--muted)}
.sb-search-ic{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:13px;pointer-events:none}
.sb-nav{flex:1;overflow-y:auto;padding:0 12px 12px;scrollbar-width:thin}
.sb-label{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);padding:14px 8px 7px
}
.sb-item{
  display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:9px;
  color:var(--muted2);text-decoration:none;font-size:13.5px;font-weight:500;
  transition:background .15s,color .15s;margin-bottom:2px;cursor:pointer;position:relative
}
.sb-item:hover{background:var(--bg3);color:var(--text)}
.sb-item.active{background:var(--accent-soft);color:#FF599B}
.sb-item.active::before{content:'';position:absolute;left:-12px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
.sb-ic{font-size:14px;width:18px;text-align:center;flex-shrink:0}
.sb-badge{
  margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--muted);
  background:var(--bg4);border-radius:6px;padding:1px 6px;min-width:20px;text-align:center
}
.sb-badge:empty{display:none}
.sb-badge.on{background:rgba(0,201,167,.16);color:#00c9a7}
.sb-badge.off{background:var(--bg4);color:var(--muted)}

/* usuario + desplegable */
.sb-user{padding:12px;border-top:1px solid var(--border);position:relative}
.sb-user-btn{
  width:100%;display:flex;align-items:center;gap:10px;background:var(--bg3);
  border:1px solid var(--border);border-radius:11px;padding:9px 11px;cursor:pointer;
  color:var(--text);font-family:var(--sans);transition:border-color .2s
}
.sb-user-btn:hover{border-color:var(--accent)}
.sb-user-info{flex:1;min-width:0;text-align:left;display:flex;flex-direction:column;line-height:1.25}
.sb-user-info span{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-user-info small{font-size:10.5px;color:var(--muted)}
.sb-user-caret{color:var(--muted);font-size:11px;flex-shrink:0}
.sb-menu{
  display:none;position:absolute;bottom:calc(100% - 4px);left:12px;right:12px;
  background:var(--bg3);border:1px solid var(--border2);border-radius:12px;
  padding:6px;flex-direction:column;gap:2px;z-index:400;
  box-shadow:0 12px 34px rgba(0,0,0,.55)
}
.sb-menu.open{display:flex}
.sb-menu button,.sb-menu a{
  display:flex;align-items:center;gap:9px;width:100%;background:transparent;border:none;
  color:var(--muted2);font-family:var(--sans);font-size:12.5px;text-align:left;
  padding:9px 10px;border-radius:8px;cursor:pointer;text-decoration:none;transition:background .15s,color .15s
}
.sb-menu button:hover,.sb-menu a:hover{background:var(--bg4);color:var(--text)}
.sb-menu .danger:hover{color:#ff4d6a}
.sb-menu-sep{height:1px;background:var(--border);margin:4px 2px}

/* ── ZONA DERECHA ── */
.shell{flex:1;min-width:0;display:flex;flex-direction:column;min-height:100vh}

/* ── BARRA SUPERIOR ── */
.tb{
  height:58px;flex-shrink:0;display:flex;align-items:center;gap:12px;
  padding:0 26px;border-bottom:1px solid var(--border);
  background:rgba(8,8,10,.86);backdrop-filter:blur(10px);
  position:sticky;top:0;z-index:120
}
.tb-burger{display:none;background:transparent;border:1px solid var(--border2);color:var(--muted2);border-radius:8px;padding:5px 10px;font-size:14px;cursor:pointer}
.tb-crumb{font-size:13px;color:var(--muted)}
.tb-crumb b{color:var(--accent);font-weight:600}
.tb-crumb span{margin:0 5px;opacity:.5}
.tb-date{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-left:8px}
.tb-sep{flex:1}
.tb-icbtn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:5px;
  min-width:38px;height:34px;padding:0 10px;border-radius:9px;
  background:transparent;border:1px solid var(--border2);color:var(--muted2);
  font-size:14px;cursor:pointer;text-decoration:none;font-family:var(--sans);transition:all .2s
}
.tb-icbtn:hover{border-color:var(--accent);color:var(--accent)}
.tb-newbtn{
  background:var(--accent);border:none;color:#fff;border-radius:9px;height:34px;padding:0 16px;
  font-family:var(--sans);font-size:13px;font-weight:600;cursor:pointer;transition:filter .2s
}
.tb-newbtn:hover{filter:brightness(1.12)}
.tb-new{position:relative}
.tb-new .sb-menu{bottom:auto;top:calc(100% + 7px);left:auto;right:0;width:224px}

/* ── PANEL ── */
.dash-outer{padding:22px 26px 26px;max-width:1560px;gap:22px}
.dash-main{flex:1;min-width:0}
.dash-right{width:320px;flex-shrink:0;position:static;display:flex;flex-direction:column;gap:16px}
.dash-greeting{margin-bottom:22px}
.dash-greeting-time{display:none}
.dash-greeting-name{font-size:26px;letter-spacing:-.02em}
.dash-greeting-sub{font-size:13px}
#tasks-list{max-height:330px!important}

/* KPIs */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:26px}
.kpi{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:16px 18px}
.kpi-t{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)
}
.kpi-v{font-size:27px;font-weight:700;margin-top:10px;letter-spacing:-.02em;line-height:1.1}
.kpi-s{font-size:11.5px;color:var(--muted);margin-top:6px}

/* tarjetas de módulo */
.apps-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-bottom:26px}
.app-card{background:var(--bg2)!important;border:1px solid var(--border)!important;border-radius:14px}
.app-card:hover{transform:none;border-color:var(--accent)!important;box-shadow:0 8px 26px rgba(0,0,0,.4)}
.app-card-hero{height:auto;padding:16px 18px 0;gap:12px;background:none!important}
.app-card-icon{
  font-size:17px;width:36px;height:36px;flex-shrink:0;border-radius:10px;
  background:var(--accent-soft);border:1px solid rgba(255,0,102,.22);
  display:flex;align-items:center;justify-content:center
}
.app-card-name{font-size:15px;color:var(--text)!important}
.app-card-desc{font-size:11.5px;color:var(--muted)!important;opacity:1}
.app-card-body{padding:15px 18px 0;border-top:none}
.app-card-stats{gap:20px;margin-bottom:0}
.stat-val{font-size:21px}
.app-card-preview{font-size:11.5px;border-top:1px solid var(--border);padding-top:11px;margin-top:13px}
.app-card-footer{padding:12px 18px 14px}
.app-badge{font-size:9px;opacity:.85}

/* paneles laterales */
.side-card{background:var(--bg2);border:1px solid var(--border);border-radius:14px}
.side-card-hero{height:62px;padding:0 16px;gap:12px;background:none!important}
.side-card-icon{font-size:20px;width:34px;height:34px;border-radius:9px;background:var(--bg3);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.side-card-name{font-size:14px;color:var(--text)!important}
.side-card-desc{font-size:11px;color:var(--muted)!important;opacity:1}

/* actividad */
.quick-title{font-size:10px;letter-spacing:.16em}
.activity-item{background:var(--bg2);border:1px solid var(--border);border-radius:11px;padding:12px 15px}
.quick-btn{background:var(--bg2);border-radius:10px}
.quick-btn:hover{border-color:var(--accent);color:var(--accent)}

/* calendario / tareas con acento rosa */
.cal-day.today{background:var(--accent)}
.cal-day.has-event{background:var(--accent-soft);color:#FF599B}
.cal-day.has-event.today{background:var(--accent);color:#fff}
.task-tab.active{color:var(--accent);border-bottom-color:var(--accent)}

.footer{background:var(--bg2);border-top:1px solid var(--border)}

/* ── RESPONSIVE ── */
.sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:140}
.sb-overlay.open{display:block}
@media(max-width:1100px){.dash-outer{flex-direction:column}.dash-right{width:100%}}
@media(max-width:900px){
  .sb{position:fixed;left:calc(-1 * var(--sb-w) - 10px);top:0;bottom:0;height:100dvh;transition:left .25s ease}
  .sb.open{left:0;box-shadow:0 0 40px rgba(0,0,0,.6)}
  .tb-burger{display:inline-flex}
  .tb{padding:0 14px;gap:8px}
  .tb-crumb,.tb-date{display:none}
  .dash-outer{padding:16px 14px 22px}
  .apps-grid{grid-template-columns:1fr}
  #tasks-list{max-height:280px!important}
}
@media(max-width:480px){
  .tb-newbtn{padding:0 12px;font-size:12px}
  .dash-greeting-name{font-size:21px}
}
@media (display-mode: standalone){
  .tb{padding-top:env(safe-area-inset-top);height:calc(58px + env(safe-area-inset-top))}
}
.dash-left{width:auto!important;position:static!important;flex-shrink:1}
.app-card.filtered,.sb-item.filtered{display:none!important}


/* ── Iconos de línea (set ICA, estilo Lucide) ─────────────────
   Heredan el color del texto vía currentColor, así que siguen
   el estado hover/activo de cada contenedor sin reglas extra. */
/* Prefijo propio: inventario.html ya usaba .ic para sus tarjetas */
.ica-ic{display:block;flex-shrink:0}
.sb-ic{display:flex;align-items:center;justify-content:center}
.sb-search-ic{display:flex;align-items:center;justify-content:center}
.quick-btn-icon{display:flex;align-items:center}
.activity-icon{display:flex;align-items:center}
.tb-newbtn{display:inline-flex;align-items:center;gap:7px}
.tb-burger{align-items:center;justify-content:center}

/* ── Estructura inyectada por shell.js en las páginas de módulo ──
   .ica-root pone la barra lateral y el contenido en paralelo;
   .ica-body es el contenido original de cada página. */
.ica-root{display:flex;align-items:stretch;min-height:100vh}
.ica-body{flex:1;min-width:0}
@media(max-width:900px){ .ica-root{display:block} .ica-body{min-width:0} }

/* Sin sesión (pantalla de login): el marco no se muestra */
body.ica-anon .sb,body.ica-anon .tb,body.ica-anon .sb-overlay{display:none!important}
body.ica-anon .ica-root{display:block}

/* Páginas a pantalla completa (chat): descontar la barra superior */
.ica-body #app{height:calc(100dvh - 58px)}
@media(max-width:900px){ .ica-body #app{height:calc(100dvh - 58px)} }

/* Vista a pantalla completa (editores, previsualizaciones): el marco se
   aparta y el contenido ocupa todo el alto, sin descontar la barra. */
body.ica-fullscreen .sb,
body.ica-fullscreen .tb,
body.ica-fullscreen .sb-overlay{display:none!important}
body.ica-fullscreen .ica-root{display:block}
body.ica-fullscreen .ica-body #app{height:100dvh}

/* El marco nunca se imprime */
@media print{
  .sb,.tb,.sb-overlay{display:none!important}
  .ica-root{display:block}
}

/* Barra lateral recogida (sidebar:'oculta' en shell.js).
   Mismo comportamiento que en móvil pero a cualquier anchura: la barra
   sale por encima del contenido y el botón de menú la abre y cierra. */
body.ica-sb-oculta .ica-root{display:block}
body.ica-sb-oculta .sb{
  position:fixed;left:calc(-1 * var(--sb-w) - 12px);top:0;bottom:0;
  height:100dvh;z-index:200;transition:left .25s ease
}
body.ica-sb-oculta .sb.open{left:0;box-shadow:0 0 40px rgba(0,0,0,.6)}
body.ica-sb-oculta .tb-burger{display:inline-flex}

/* Scroll interno (scroll:'interno' en shell.js).
   El contenido de la página se desplaza dentro de un contenedor propio,
   normalmente con height en porcentaje. Para que ese porcentaje resuelva,
   el marco necesita una altura concreta en toda la cadena; si se queda en
   'auto', el contenedor colapsa y la rueda del ratón no hace nada. */
body.ica-scroll-interno .ica-root{height:100dvh}
body.ica-scroll-interno .shell{height:100dvh;min-height:0}
body.ica-scroll-interno .ica-body{height:calc(100dvh - 58px);min-height:0}