/* ==========================================================
   Trabajo Rápido — v43 panel del usuario con la paleta C
   Va DESPUÉS de dashboard.css y propuesta-chrome.css.
   Solo presentación: mismo HTML, mismos ids, mismo dashboard.js.
   Quitar el <link> de esta hoja (y el de tema-propuesta-c.css)
   devuelve el panel de v42. Colores: css/tema-propuesta-c.css.
   Revisión aplicada (impeccable craft-floor, Web Interface
   Guidelines, dataviz): un solo acento por función, números
   tabulares, foco visible, sin desbordes en celular.
   ========================================================== */

.page--canvas { background: var(--fondo); }
.app, .app button, .app input, .app select, .app textarea { font-family: var(--font-texto); }
.app h1, .app h2, .app .rail-name, .app .app-section-title, .app .stat__value { font-family: var(--font-titulo); }

/* ---- Barra superior azul noche ---- */
.app-topbar .back-link { color: var(--nav-sobre-azul); }
.app-topbar .back-link:hover { color: #fff; }
.app-topbar .topbar__search { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.14); color: var(--nav-sobre-azul); border-radius: 12px; }
.app-topbar .topbar__search input { color: #fff; }
.app-topbar .topbar__search input::placeholder { color: var(--nav-sobre-azul); opacity: 0.85; }
.app-topbar .topbar__search:focus-within { border-color: var(--amarillo); }
.app-topbar #pilotState { background: rgba(255,255,255,0.12); color: #fff; border-color: transparent; }
.app-topbar #pilotState::before { background: #8FE0B0; }
.app-topbar .btn--secondary { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.45); }
.app-topbar .btn--secondary:hover { background: rgba(255,255,255,0.08); color: #fff; }
.app-topbar .btn--ghost { color: var(--nav-sobre-azul); background: transparent; }
.app-topbar .btn--ghost:hover { color: #fff; background: rgba(255,255,255,0.10); }
.app-avatar { background: var(--amarillo) !important; color: var(--azul-noche) !important; font-family: var(--font-titulo); }
.app-avatar.has-photo { color: transparent !important; }

/* ---- Tarjetas ---- */
.app .card { border-color: var(--linea); border-radius: 18px; box-shadow: none; }
.app .card:hover { box-shadow: none; }
.app-card h2, #jobDetail h2 { font-family: var(--font-titulo); letter-spacing: -0.02em; }

/* ---- Rail izquierdo ---- */
.rail-avatar-initial { background: var(--azul-noche) !important; color: var(--amarillo) !important; font-family: var(--font-titulo); }
.rail-ring-pct { color: var(--azul-noche); }
.rail-ring circle:last-child, .rail-ring .ring-fill { stroke: var(--azul-acento); }
.rail-hv-link:hover { background: var(--fondo); border-color: var(--borde-input); }
.rail-nav .app-nav__link.is-active { background: var(--fondo); color: var(--azul-noche); }
.rail-setup-progress .progress__bar { background: var(--linea); }
.rail-setup-progress .progress__fill { background: var(--azul-acento); }
.rail-setup-pct strong, .rail-setup-list li.is-now { color: var(--azul-noche); }
.rail-setup-list li.is-now::before { color: var(--amarillo); font-size: 10px; }

/* ---- Pestañas: subrayado amarillo, texto azul noche ---- */
.dash-tabs { background: var(--fondo); border-bottom-color: var(--linea); }
.dash-tabs [role=tab] { color: var(--texto-sec); border-bottom-width: 3px; }
.dash-tabs [role=tab]:hover { color: var(--tinta); }
.dash-tabs [role=tab][aria-selected=true] { color: var(--azul-noche); font-weight: 800; border-bottom-color: var(--amarillo); }
.dash-tabs [role=tab]:focus-visible { outline-color: var(--azul-acento); }

/* ---- Cifras del resumen y métricas ---- */
.app-stats .stat { background: var(--superficie); border-color: var(--linea); border-radius: 14px; }
.app-stats .stat:first-child { background: var(--azul-noche); border-color: var(--azul-noche); }
.app-stats .stat:first-child .stat__value { color: var(--amarillo); }
.app-stats .stat:first-child .stat__label { color: var(--texto-sobre-azul); }
.app-stats .stat__value { color: var(--azul-noche); font-weight: 800; font-variant-numeric: tabular-nums; }
.app-stats .stat__label { color: var(--texto-apagado); }

/* ---- Kanban y chips ---- */
.kanban-tab.is-active, .chip.is-active { background: var(--azul-noche); border-color: var(--azul-noche); color: #fff; box-shadow: none; }

/* ---- Bolsas conectadas ---- */
.bolsa-row { border-top-color: var(--linea); }
.bolsa-row__logo { background: var(--fondo); color: var(--azul-noche); border-radius: 10px; font-family: var(--font-titulo); }
.bolsa-row.is-linked .bolsa-row__logo { background: var(--exito-fondo); color: var(--exito-oscuro); }
.bolsa-row.is-linked .bolsa-row__state { color: var(--exito); }
.bolsa-row__go { color: var(--azul-acento); }
.bolsa-row__confirm { background: var(--fondo); border-color: var(--linea); }
.bolsa-switch input:checked { background: var(--exito); }
.bolsa-switch input:focus-visible { outline-color: var(--azul-acento); }
.bolsas-rail__meta strong { color: var(--azul-noche); }

/* ---- Copiloto activo ---- */
.copilot-card { border-left: 1px solid var(--linea); }

/* ---- Formularios y rango ---- */
.app input[type="range"] { accent-color: var(--azul-acento); }
.app input[type="checkbox"], .app input[type="radio"] { accent-color: var(--azul-acento); }
.linklike { color: var(--azul-acento); }

/* ---- Celular: sin scroll horizontal ---- */
@media (max-width: 760px) {
  .app-topbar .topbar__search, .app-topbar .back-link, .app-topbar [data-logout] { display: none; }
  .app-topbar .topbar__actions { gap: 6px; margin-left: auto; min-width: 0; }
  .app-topbar #pilotToggle { padding: 8px 12px; font-size: 13px; min-height: 40px; }
  .app-topbar #pilotState { font-size: 11px; padding: 5px 8px; }
  .app-topbar .brand { font-size: 17px; }
}
@media (max-width: 400px) {
  .app-topbar #pilotState { display: none; }
}