/* Inversiones Cruz de Piedra · colores del logo: rojo #E30613 y grafito #26292D.
   Tema claro: fondo blanco, grafito como color principal y rojo como acento.
   Tema oscuro: fondo negro, blanco como color principal (como la "C" del logo) y rojo como acento. */
:root {
  --brand: #26292d;
  --teal: #e30613;             /* acento de marca (indicadores, foco, bordes activos) */
  --bg: #f4f4f5;
  --surface-2: #f1f1f2;
  --hover: #f7f7f8;
  --border: #e4e4e6;
  --border-strong: #d0d0d4;
  --text: #1c1d20;
  --muted: #64666b;
  --accent: #c00d1a;           /* rojo con contraste suficiente para texto */
  --accent-soft: #fdecec;
  --primary: #26292d;          /* botón principal: grafito */
  --primary-text: #ffffff;
  --accion: #c00d1a;           /* botones de acción (Agregar, Guardar, Restaurar…) */
  --rel: #2563eb;              /* presupuesto: pestaña, submódulo y origen del monto, en azul */
  --rel-soft: #e8f0fe;
  --rel-text: #1d4ed8;
  --abierta: rgba(227, 6, 19, .05);   /* fondo de la licitación desplegada: rojo muy suave y transparente */
  --accion-fuerte: var(--primary);  /* Ejecutar bot ahora: grafito / blanco, para no confundirse con Detener (rojo) */
  --shadow: 0 1px 2px rgba(38, 41, 45, .06), 0 1px 3px rgba(38, 41, 45, .04);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #ffffff;
    --teal: #ff2d3a;
    --surface: #0e0e0f;
    --surface-2: #17181a;
    --hover: #131415;
    --border: #232427;
    --border-strong: #34363a;
    --text: #ededee;
    --muted: #9b9ca1;
    --accent: #ff5a64;
    --accent-soft: #2a0a0c;
    --primary: #f5f5f5;
    --primary-text: #000000;
    --accion: #ff4d57;
    --rel: #60a5fa;
    --rel-soft: #0f1d33;
    --rel-text: #93c5fd;
    --abierta: rgba(255, 45, 58, .07);
    --log-bg: #050505;
  }
}
:root[data-theme="dark"] {
  --brand: #ffffff;
  --teal: #ff2d3a;
  --surface: #0e0e0f;
  --surface-2: #17181a;
  --hover: #131415;
  --border: #232427;
  --border-strong: #34363a;
  --text: #ededee;
  --muted: #9b9ca1;
  --accent: #ff5a64;
  --accent-soft: #2a0a0c;
  --primary: #f5f5f5;
  --primary-text: #000000;
  --accion: #ff4d57;
  --rel: #60a5fa;
  --rel-soft: #0f1d33;
  --rel-text: #93c5fd;
  --abierta: rgba(255, 45, 58, .07);
  --log-bg: #050505;
}

#btn-run { color: var(--primary-text); }

/* El logo lleva dos líneas de texto: un poco más alto para que se lea */
@media (min-width: 821px) {
  .topbar { height: 64px; }
  .toolbar { top: 64px; }      /* la barra de filtros queda pegada bajo el encabezado */
  .logo { height: 50px; }
}
@media (max-width: 820px) { .logo { height: 34px; } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(227, 6, 19, .5); } 100% { box-shadow: 0 0 0 7px rgba(227, 6, 19, 0); } }

/* ---------- Pantalla de acceso: negro con brillo rojo ---------- */
.login-body {
  background: radial-gradient(1100px 650px at 50% -10%, #3a0a0e 0%, transparent 60%), linear-gradient(160deg, #1a1b1d 0%, #0b0b0c 55%, #000 100%);
}
.blob.b1 { background: #e30613; opacity: .35; }
.blob.b2 { background: #7a0a12; }
.blob.b3 { background: #5a5d63; opacity: .25; }
.login-bot { display: none; }   /* el logo ya trae el ícono CP */
.login-logo { width: 280px; mix-blend-mode: normal; }
.login-cabecera { color: #e6e6e7; }
.login-cabecera p, .login-puntos { color: #b3b4b8; }
.login-puntos svg { stroke: #ff4d57; }
.login-pie { color: #8a8b90; }
.login-form { box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(227, 6, 19, .18); }
.login-btn { background: linear-gradient(135deg, #e30613, #9e0a14) !important; box-shadow: 0 10px 24px rgba(227, 6, 19, .32); }

/* ---------- Pestañas y botones del encabezado: íconos en el rojo del logo ---------- */
.tab-ico {
  width: 26px; height: 26px; padding: 4px; border-radius: 7px; box-sizing: border-box;
  stroke: var(--teal); stroke-width: 1.9; opacity: 1; background: var(--accent-soft);
}
.tab.active .tab-ico { stroke: #fff; background: var(--teal); }
.tab:hover:not(.active) .tab-ico { background: color-mix(in srgb, var(--teal) 22%, var(--surface)); }
.hdr-btn:not(.run-pill) svg { stroke: var(--teal); }
.hdr-btn:not(.run-pill) { border-color: color-mix(in srgb, var(--teal) 35%, var(--border)); }
#btn-tema { color: var(--teal); border-color: color-mix(in srgb, var(--teal) 35%, var(--border)); }