/* =====================================================================
   Taller Mackauto — capa de diseño sobre ARK.
   Marca (mackauto.es): azul #202f57 · rojo #cb1824 · amarillo #f5cd35 · verde #3eab34
   Los grises del programa ya salen en la gama del azul (tailwind.config.js).
   ===================================================================== */

:root,
html[data-accent] {
    --mack-navy: #202f57;
    --mack-navy-900: #17223f;
    --mack-navy-950: #111a33;
    --mack-red: #cb1824;
    --mack-red-600: #b3141f;
    --mack-yellow: #f5cd35;
    --mack-green: #3eab34;
    --mack-fondo: #eef0f5;
    --mack-borde: #dde1ea;
    --mack-radio: 12px;
    --mack-arco: linear-gradient(90deg, var(--mack-green) 0 38%, var(--mack-yellow) 38% 72%, var(--mack-red) 72% 100%);

    --ops-accent-400: #e0474f !important;
    --ops-accent-500: #cb1824 !important;
    --ops-accent-800: #202f57 !important;
    --ops-accent-900: #17223f !important;
}

html, body {
    font-family: 'Barlow', 'Figtree', ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: 'tnum' 1; /* cifras del mismo ancho: los importes cuadran en columna */
}

/* ---------- Fondo general ---------- */
.ops-shell,
.ops-main-shell,
body.bg-slate-100 {
    background: var(--mack-fondo) !important;
}

/* ---------- Menú lateral ---------- */
.ops-left-rail {
    background: var(--mack-navy) !important;
    border-right: 0 !important;
    color: #fff !important;
    padding: 1rem 0.75rem 1rem !important;
}

.ops-rail-brand {
    border-bottom: 0 !important;
    padding: 0.25rem 0.25rem 0 !important;
    margin-bottom: 0 !important;
}

.ops-rail-brand-logo {
    width: 100% !important;
    max-width: none !important;
    margin: 0 -0.35rem 0.75rem;
}

.mack-arco {
    display: none;
    height: 3px;
    margin: 0.9rem 0.25rem 1.1rem;
    border-radius: 3px;
    background: var(--mack-arco);
    opacity: 0.9;
}

.ops-rail-section + .ops-rail-section {
    margin-top: 1.25rem !important;
    padding-top: 1.25rem;
    border-top: 1px solid rgb(255 255 255 / 0.08);
}

.ops-rail-link {
    min-height: 2.75rem !important;
    gap: 0.75rem !important;
    border-radius: 10px !important;
    padding: 0 0.85rem !important;
    color: rgb(255 255 255 / 0.72) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ops-rail-icon,
.ops-rail-icon svg {
    width: 1.15rem !important;
    height: 1.15rem !important;
}

.ops-rail-link:hover {
    background: rgb(255 255 255 / 0.08) !important;
    color: #fff !important;
}

.ops-rail-link--active {
    background: rgb(255 255 255 / 0.12) !important;
    box-shadow: inset 4px 0 0 var(--mack-red) !important;
    color: #fff !important;
    font-weight: 700 !important;
}

.ops-rail-link--active .ops-rail-icon {
    color: #fff !important;
}

/* ---------- Barra superior ---------- */
.ops-shell-chrome {
    box-shadow: 0 1px 0 var(--mack-borde) !important;
    background: #fff !important;
}

.ops-shell-chrome::before {
    content: '';
    display: block;
    height: 3px;
    background: var(--mack-arco);
}

/* ---------- Contenedores: blancos, esquinas suaves ---------- */
.ops-main .border.bg-white,
.ops-main section.border,
.ops-main .rounded-md.border,
.ops-today__section,
.ops-main .ops-card {
    border-radius: var(--mack-radio) !important;
    border-color: var(--mack-borde) !important;
}

.ops-main {
    padding: 1rem !important;
}

/* ---------- Títulos ---------- */
.ops-main h1,
.ops-main .text-2xl,
.ops-main .text-3xl {
    font-weight: 800 !important;
    letter-spacing: -0.01em;
    color: var(--mack-navy-950);
}

.ops-main h2 {
    font-weight: 800 !important;
    letter-spacing: 0;
}

/* Rótulos en mayúsculas: Barlow Condensed, más de taller */
.ops-main .uppercase,
.ops-rail-section__label {
    font-family: 'Barlow Condensed', 'Barlow', sans-serif !important;
    letter-spacing: 0.08em !important;
}

/* ---------- Botones ---------- */
.ops-main button,
.ops-main .ops-page-link,
.ops-main a.rounded-md,
.ops-main input,
.ops-main select,
.ops-main textarea {
    border-radius: 10px !important;
}

.ops-main .bg-slate-950,
.ops-main .bg-slate-900 {
    background-color: var(--mack-navy) !important;
}

.ops-main .bg-slate-950:hover,
.ops-main .bg-slate-900:hover,
.ops-main .hover\:bg-slate-800:hover {
    background-color: var(--mack-navy-900) !important;
}

/* Acción principal del taller: recibir un coche, en rojo de la marca */
.ops-board-command .bg-slate-950,
.ops-board-command button.bg-slate-950,
.ops-board-command a.bg-slate-950,
[data-mack-cta],
a[href$="/app/intake/new"].bg-slate-950 {
    background-color: var(--mack-red) !important;
    border-color: var(--mack-red) !important;
    color: #fff !important;
}

.ops-board-command .bg-slate-950:hover,
a[href$="/app/intake/new"].bg-slate-950:hover {
    background-color: var(--mack-red-600) !important;
}

/* ---------- Campos ---------- */
.ops-main input:not([type=checkbox]):not([type=radio]):focus,
.ops-main select:focus,
.ops-main textarea:focus {
    border-color: var(--mack-navy) !important;
    box-shadow: 0 0 0 3px rgb(32 47 87 / 0.15) !important;
    outline: none !important;
}

/* ---------- Pestañas abiertas (arriba) ---------- */
.ops-workspace-tabs,
.ops-workspace-tab {
    font-family: 'Barlow', sans-serif;
}

/* ---------- Tablero ---------- */
.ops-main [class*="workboard"] [class*="lane"],
.ops-main [class*="board"] [class*="column"] {
    border-radius: var(--mack-radio);
}

/* Cifras grandes del Inicio */
.ops-main .text-4xl,
.ops-main .text-3xl,
.ops-main .text-2xl.font-black,
.ops-main .font-black.tabular-nums {
    font-weight: 800 !important;
}

/* Modo oscuro: el menú ya es oscuro; solo mantener el fondo */
html.dark .ops-left-rail {
    background: var(--mack-navy-950) !important;
}

/* ---------- Barra superior compacta: el avatar va en la fila de pestañas ---------- */
.ops-shell-chrome { position: sticky !important; }
.ops-topbar {
    position: absolute !important;
    top: 3px;
    right: 0.75rem;
    height: calc(100% - 3px);
    width: auto !important;
    display: flex;
    align-items: center;
    z-index: 5;
    background: transparent !important;
}
.ops-topbar__account { padding: 0 !important; min-height: 0 !important; }
.ops-workspace-tabs,
#ops-workspace-tabs { padding-right: 3.5rem !important; }
.ops-user-avatar--topbar { background-color: var(--mack-red) !important; }

/* Botón de recibir un coche en el tablero */
.ops-job-board-toolbar__check-in {
    background: var(--mack-red) !important;
    border-color: var(--mack-red) !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    padding-inline: 1.1rem !important;
}
.ops-job-board-toolbar__check-in:hover { background: var(--mack-red-600) !important; }