/* ============================================
   PROLUID · Design Tokens
   Niebla metálica: paneles gradient gris-azulado,
   header un step más claro, accent amber, sidebar blue.
   ============================================ */

:root {

  /* ── BACKGROUNDS ─────────────────────────────────────── */
  --bg-app:         #9BA5B2;  /* fallback body (si foto no carga) */
  --bg-panel-top:   #ECEEF2;  /* gradient stop top — paneles */
  --bg-panel-bot:   #D6D9DE;  /* gradient stop bottom — paneles */
  --bg-panel:       linear-gradient(180deg, #ECEEF2 0%, #D6D9DE 100%);
  --bg-panel-solid: #E0E3E8;  /* fallback sólido (chips, hovers) */
  --bg-header-top:  #F5F7FA;
  --bg-header-bot:  #E8ECF1;
  --bg-header:      linear-gradient(180deg, #F5F7FA 0%, #E8ECF1 100%);
  --bg-card:        var(--bg-panel);
  --bg-inner:       rgba(255,255,255,.55);   /* event/task rows sobre panel */
  --bg-inner-hover: rgba(255,255,255,.78);
  --bg-input:       #F4F6F9;
  --bg-sidebar:     #5BA4D9;                  /* anchor azul (sin cambios) */
  --bg-amber:       #E8821F;                  /* proyecto activo */
  --bg-amber-d:     #C57906;
  --bg-topbar:      var(--bg-header);

  --bg-dark:        var(--bg-panel);  /* alias */

  /* ── TEXT ────────────────────────────────────────────── */
  --txt-1:        #18181B;
  --txt-2:        #4B5563;
  --txt-3:        #71717A;
  --txt-white:    #FFFFFF;
  --txt-accent:   #1F6FE5;
  --txt-sec-ai:   #C46410;                    /* amber sobre niebla — SecretarIA */

  /* ── STATUS ──────────────────────────────────────────── */
  --status-green:        #16A34A;
  --status-green-soft:   rgba(22,163,74,.12);
  --status-green-border: rgba(22,163,74,.45);
  --status-red:          #D94242;
  --status-red-soft:     rgba(217,66,66,.12);
  --status-amber:        #E8821F;
  --status-amber-soft:   rgba(232,130,31,.14);

  /* ── BORDERS ─────────────────────────────────────────── */
  --border-default:  rgba(45,60,80,.12);
  --border-strong:   rgba(45,60,80,.22);
  --border-card:     rgba(45,60,80,.12);
  --border-inner:    rgba(45,60,80,.08);
  --border-dark:     rgba(45,60,80,.12);      /* legacy alias */
  --border-amber:    rgba(255,255,255,.18);
  --border-accent:   rgba(31,111,229,.35);
  --border-sidebar:  rgba(31,111,229,.30);

  /* ── BORDER RADIUS ───────────────────────────────────── */
  --r-xs:    6px;
  --r-sm:    8px;
  --r-md:    12px;
  --r-lg:    16px;
  --r-xl:    20px;
  --r-2xl:   22px;
  --r-pill:  999px;

  /* ── SHADOWS ─────────────────────────────────────────── */
  --shadow-sm:    0 2px 6px rgba(20,30,50,.06);
  --shadow-card:  0 4px 12px rgba(20,30,50,.10), inset 0 1px 0 rgba(255,255,255,.75);
  --shadow-dark:  0 4px 12px rgba(20,30,50,.10), inset 0 1px 0 rgba(255,255,255,.75);
  --shadow-amber: 0 6px 20px rgba(197,121,6,.35);

  /* ── SPACING ─────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;

  /* ── TYPOGRAPHY ──────────────────────────────────────── */
  --font-ui:   'Space Grotesk', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --font-ai:   'Pixelify Sans', monospace;

  --text-xs:   9px;
  --text-sm:   10px;
  --text-base: 12px;
  --text-md:   13px;
  --text-lg:   15px;
  --text-xl:   18px;
  --text-2xl:  22px;

  /* ── LAYOUT ──────────────────────────────────────────── */
  --sidebar-w:   52px;
  --topbar-h:    44px;
  --streams-h:   38px;
  --content-pad: 14px;
}

/* ============================================
   COMPONENTES BASE
   ============================================ */

.card {
  background: var(--bg-panel);
  border: 1px solid var(--border-card);
  border-radius: var(--r-xl);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}

.card-inner {
  background: var(--bg-inner);
  border: 1px solid var(--border-inner);
  border-radius: var(--r-sm);
  padding: 9px var(--space-3);
}

.card-dark {
  background: var(--bg-panel);
  border: 1px solid var(--border-card);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
}

.card-project {
  background: var(--bg-amber);
  border: 1px solid var(--border-amber);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-amber);
}

.sidebar-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--txt-2);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .18s;
}
.sidebar-icon:hover {
  background: rgba(45,60,80,.10);
  border-color: var(--border-default);
}
.sidebar-icon.active {
  background: rgba(31,111,229,.12);
  border-color: var(--border-sidebar);
  color: var(--txt-accent);
}

.stream-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-default);
  background: var(--bg-inner);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--txt-3);
  cursor: pointer;
}
.stream-btn.playing {
  border-color: var(--status-green-border);
  color: var(--status-green);
  background: var(--status-green-soft);
}

.event-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 9px var(--space-3);
  background: var(--bg-inner);
  border: 1px solid var(--border-inner);
  border-left: 3px solid var(--txt-accent);
  border-radius: var(--r-sm);
}
.event-time {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--txt-3);
  min-width: 36px;
}
.event-text {
  font-family: var(--font-ui);
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--txt-1);
  flex: 1;
}
.event-client {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--txt-1);
  background: rgba(31,111,229,.10);
  border: 1px solid var(--border-accent);
  border-radius: var(--r-sm);
  padding: 2px 8px;
}

.task-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 9px var(--space-3);
  background: var(--bg-inner);
  border: 1px solid var(--border-inner);
  border-radius: var(--r-sm);
}
.task-check {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--border-strong);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.task-item.done .task-check {
  background: var(--status-green);
  border-color: var(--status-green);
}
.task-item.done .task-text {
  text-decoration: line-through;
  color: var(--txt-3);
}
.task-text {
  font-family: var(--font-ui);
  font-size: var(--text-md);
  color: var(--txt-1);
  flex: 1;
}
.task-client {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--txt-3);
  background: var(--bg-inner);
  border: 1px solid var(--border-inner);
  border-radius: var(--r-pill);
  padding: 2px 7px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  border: 1px solid;
}
.pill-green  { background:var(--status-green-soft); border-color:var(--status-green-border); color:var(--status-green); }
.pill-red    { background:var(--status-red-soft);   border-color:rgba(217,66,66,.35);        color:var(--status-red); }
.pill-amber  { background:var(--status-amber-soft); border-color:rgba(232,130,31,.40);       color:var(--status-amber); }
.pill-blue   { background:rgba(31,111,229,.10);     border-color:var(--border-accent);       color:var(--txt-accent); }
.pill-ghost  { background:transparent;              border-color:var(--border-default);      color:var(--txt-3); }

.secretaria-output {
  font-family: var(--font-ai);
  font-size: var(--text-base);
  color: var(--txt-1);
  line-height: 1.7;
}
.secretaria-bullet { color: var(--txt-sec-ai); font-weight:600; }
.secretaria-name {
  font-family: var(--font-ai);
  font-size: 14px;
  font-weight: 600;
  color: var(--txt-sec-ai);
}

.project-tab {
  background: var(--bg-amber-d);
  border-radius: var(--r-sm);
  padding: 5px 12px;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 11px;
  color: var(--txt-white);
  cursor: pointer;
  border: none;
}

.projects-bar {
  background: var(--bg-panel);
  display: flex;
  align-items: center;
}
.clients-section {
  background: var(--bg-panel);
  border-left: 1px solid var(--border-default);
}

.label-upper {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--txt-3);
}

.btn-add {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--txt-3);
  cursor: pointer;
  background: transparent;
}
.btn-add:hover { border-color: var(--txt-accent); color: var(--txt-accent); }

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.section-link {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--txt-accent);
  cursor: pointer;
}