/* ============================================================
   SISTEMA DE MARCA REFARED
   Fuente de verdad: /design/style-guide.md del repo del proyecto.
   Este bloque retinta Bootstrap 5 (variables + componentes) para
   que las clases ya usadas en las vistas (btn-primary, text-primary,
   alert-success, badge bg-warning, etc.) reflejen la marca sin tener
   que tocar cada plantilla PHP una por una.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Inter:wght@400;500;600&display=swap');

:root {
    /* Tokens de marca */
    --refa-grafito: #1A1A1A;
    --refa-navy: #0E4D5B;
    --refa-orange: #F97316;
    --refa-gris-acero: #9CA3AF;
    --refa-blanco-humo: #F4F6F8;
    --refa-gris-medio: #6B7280;
    --refa-gris-claro: #D1D5DB;
    --refa-exito: #16A34A;
    --refa-info: #0284C7;
    --refa-advertencia: #F59E0B;
    --refa-error: #DC2626;

    /* Retinte de las variables de Bootstrap 5.3: cubre automaticamente
       las utilidades text, bg, border y link (ej. text-primary, bg-success,
       border-warning, link-danger) y las clases alert (ej. alert-info),
       que ya usan las vistas, sin editar cada archivo PHP. */
    --bs-primary: var(--refa-orange);
    --bs-primary-rgb: 249, 115, 22;
    --bs-primary-text-emphasis: #7c2d12;
    --bs-primary-bg-subtle: #ffedd5;
    --bs-primary-border-subtle: #fdba74;

    --bs-secondary: var(--refa-navy);
    --bs-secondary-rgb: 14, 77, 91;
    --bs-secondary-text-emphasis: #062329;
    --bs-secondary-bg-subtle: #dceef1;
    --bs-secondary-border-subtle: #a9cdd4;

    --bs-success: var(--refa-exito);
    --bs-success-rgb: 22, 163, 74;
    --bs-success-text-emphasis: #14532d;
    --bs-success-bg-subtle: #dcfce7;
    --bs-success-border-subtle: #86efac;

    --bs-info: var(--refa-info);
    --bs-info-rgb: 2, 132, 199;
    --bs-info-text-emphasis: #0c4a6e;
    --bs-info-bg-subtle: #e0f2fe;
    --bs-info-border-subtle: #7dd3fc;

    --bs-warning: var(--refa-advertencia);
    --bs-warning-rgb: 245, 158, 11;
    --bs-warning-text-emphasis: #78350f;
    --bs-warning-bg-subtle: #fef3c7;
    --bs-warning-border-subtle: #fcd34d;

    --bs-danger: var(--refa-error);
    --bs-danger-rgb: 220, 38, 38;
    --bs-danger-text-emphasis: #7f1d1d;
    --bs-danger-bg-subtle: #fee2e2;
    --bs-danger-border-subtle: #fca5a5;

    --bs-link-color: var(--refa-orange);
    --bs-link-color-rgb: 249, 115, 22;
    --bs-link-hover-color: #c2570f;
    --bs-link-hover-color-rgb: 194, 87, 15;

    --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Evolucion del sistema (fase 50): el radio de 14px que login.php y
       registro.php ya mostraban (seccion 9.8.1 del style-guide) solo estaba
       escopado a esas 2 pantallas via .auth-shell-login - el resto de la
       app (mecanico_*, refaccionaria_*, vistas/*, ~30 pantallas) seguia en
       el default de Bootstrap (6px), una inconsistencia visible entre lo
       mas nuevo del sitio y el resto del panel. Se sube aqui a nivel raiz
       con un valor intermedio (10/12px, no los 14px de las paginas de
       login, que son mas grandes/espaciosas) para que boton/input/tarjeta/
       modal/dropdown en las 3 cuentas se sientan de la misma generacion
       sin tener que tocar cada plantilla. La regla mas especifica de
       .auth-shell-login sigue ganando ahi, sin cambios. */
    --bs-border-radius: 10px;
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: 12px;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.brand-name,
.auth-kicker,
.btn,
.navbar-brand {
    font-family: 'Montserrat', 'Inter', sans-serif;
}

/* Botones: Bootstrap 5.3 fija estas variables por componente (no heredan
   de --bs-primary directamente), asi que se sobreescriben aqui una vez
   para que btn-primary/btn-success/etc. usados en las vistas ya salgan
   con los colores de marca. */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--refa-orange);
    --bs-btn-border-color: var(--refa-orange);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #ea670a;
    --bs-btn-hover-border-color: #dd620a;
    --bs-btn-focus-shadow-rgb: 249, 115, 22;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #dd620a;
    --bs-btn-active-border-color: #cf5b09;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--refa-orange);
    --bs-btn-disabled-border-color: var(--refa-orange);
}

.btn-outline-primary {
    --bs-btn-color: var(--refa-orange);
    --bs-btn-border-color: var(--refa-orange);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--refa-orange);
    --bs-btn-hover-border-color: var(--refa-orange);
    --bs-btn-focus-shadow-rgb: 249, 115, 22;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--refa-orange);
    --bs-btn-active-border-color: var(--refa-orange);
    --bs-btn-disabled-color: var(--refa-orange);
    --bs-btn-disabled-border-color: var(--refa-orange);
}

.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--refa-exito);
    --bs-btn-border-color: var(--refa-exito);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #128a3e;
    --bs-btn-hover-border-color: #117d38;
    --bs-btn-focus-shadow-rgb: 22, 163, 74;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #117d38;
    --bs-btn-active-border-color: #107032;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--refa-exito);
    --bs-btn-disabled-border-color: var(--refa-exito);
}

.btn-outline-success {
    --bs-btn-color: var(--refa-exito);
    --bs-btn-border-color: var(--refa-exito);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--refa-exito);
    --bs-btn-hover-border-color: var(--refa-exito);
    --bs-btn-focus-shadow-rgb: 22, 163, 74;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--refa-exito);
    --bs-btn-active-border-color: var(--refa-exito);
    --bs-btn-disabled-color: var(--refa-exito);
    --bs-btn-disabled-border-color: var(--refa-exito);
}

.btn-outline-danger {
    --bs-btn-color: var(--refa-error);
    --bs-btn-border-color: var(--refa-error);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--refa-error);
    --bs-btn-hover-border-color: var(--refa-error);
    --bs-btn-focus-shadow-rgb: 220, 38, 38;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--refa-error);
    --bs-btn-active-border-color: var(--refa-error);
    --bs-btn-disabled-color: var(--refa-error);
    --bs-btn-disabled-border-color: var(--refa-error);
}

/* Foco de inputs: quitar el azul de Bootstrap por defecto */
.form-control:focus,
.form-select:focus {
    border-color: var(--refa-orange);
    box-shadow: 0 0 0 .25rem rgba(249, 115, 22, .15);
}

/* Checkboxes/radios (fase 50): tambien seguian en azul de Bootstrap por
   defecto pese a que los inputs de texto ya se habian corregido - el
   checkbox "Notificar" de un recordatorio o los radios de tipo de cuenta
   en el registro eran el unico lugar de toda la app donde seguia
   apareciendo el azul, rompiendo la marca en un control muy visible. */
.form-check-input:checked {
    background-color: var(--refa-orange);
    border-color: var(--refa-orange);
}

.form-check-input:focus {
    border-color: var(--refa-orange);
    box-shadow: 0 0 0 .25rem rgba(249, 115, 22, .15);
}

/* Botones primarios (fase 50): antes no tenian ninguna retroalimentacion
   de hover mas alla del cambio de color plano que ya definen las
   variables de arriba - se agrega una elevacion sutil (1px + sombra
   tenue) para que se sientan clicables/dinamicos, igual criterio que ya
   usan quick-access-card e index-business-card en otras partes del
   sitio. Deliberadamente sutil (no una animacion llamativa) porque este
   boton aparece decenas de veces por pantalla en las vistas de taller. */
.btn-primary,
.btn-outline-primary {
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.btn-primary:hover,
.btn-primary:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(249, 115, 22, .28);
}

/* Filas de tabla (fase 50): las tablas densas (recordatorios, clientes,
   ordenes, productos) no tenian ningun indicio visual de sobre que fila
   esta el mouse, dificultando escanear una tabla larga - mismo objetivo
   de "facilidad de operacion" pedido explicitamente. */
.workbench-table tbody tr {
    transition: background-color 120ms ease;
}

.workbench-table tbody tr:hover {
    background-color: #FAFBFC;
}

.brand-name {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
}

.brand-name .refa {
    color: var(--refa-grafito);
}

.brand-name .red {
    color: var(--refa-orange);
}

.brand-tagline {
    color: #6c757d;
    font-size: 13px;
}

.logo-mark {
    width: 54px;
    height: 54px;
    border-radius: 8px;
    background: #F4F6F8;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.perfil-ovalo {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #eef2f6;
    background: #f8f9fa;
}

.ad-banner {
    background: linear-gradient(120deg, var(--refa-navy), var(--refa-orange));
}

.rating-star {
    color: #F59E0B;
    font-weight: 700;
}

.public-cover {
    min-height: 220px;
    border-radius: 8px;
    background-position: center;
    background-size: cover;
    background-color: #dee2e6;
}

.location-picker {
    width: 100%;
    height: 380px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    background: #e9ecef;
}

.auth-page {
    min-height: 100vh;
    margin: 0;
    background:
        linear-gradient(135deg, rgba(14, 77, 91, .12), rgba(249, 115, 22, .10)),
        #f4f7fb;
}

.auth-shell {
    width: min(1120px, calc(100% - 32px));
    min-height: 100vh;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 520px) minmax(320px, 1fr);
    align-items: center;
    gap: 28px;
    padding: 32px 0;
}

.auth-shell-register {
    grid-template-columns: minmax(0, 620px) minmax(300px, 1fr);
}

.auth-panel,
.auth-side {
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 8px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 18px 45px rgba(15, 23, 42, .10);
}

.auth-panel {
    padding: 28px;
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 34px;
}

.auth-logo {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #F4F6F8;
}

.auth-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Logo completo (isotipo + REFARED + tagline), un solo archivo de imagen -
   reemplaza reconstruir el nombre de marca a mano con texto/spans. */
.brand-logo-lockup {
    display: block;
    height: 34px;
    width: auto;
}


.auth-muted {
    color: #6B7280;
}

.auth-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    color: #7c2d12;
    background: #FFD9B3;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.auth-copy h1,
.auth-side h2 {
    margin: 12px 0 10px;
    color: #1A1A1A;
    font-weight: 800;
    line-height: 1.08;
}

.auth-copy h1 {
    font-size: clamp(30px, 5vw, 46px);
}

.auth-copy p,
.auth-side p {
    color: #6B7280;
    font-size: 16px;
}

.auth-form-box {
    margin-top: 26px;
}

.auth-form-box .input-group-text {
    min-width: 48px;
    justify-content: center;
    color: var(--refa-orange);
    background: #FFF1E6;
}

.auth-switch {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    color: #6B7280;
    font-size: 14px;
}

.auth-side {
    min-height: 520px;
    display: flex;
    align-items: end;
    overflow: hidden;
    color: #fff;
    background:
        linear-gradient(160deg, rgba(23, 32, 42, .1), rgba(23, 32, 42, .78)),
        url("../img/default-mecanico.svg") center 20% / 58% no-repeat,
        #1A1A1A;
}

.auth-side-content {
    padding: 34px;
}

.auth-side .auth-kicker {
    color: #7c2d12;
    background: #FFD9B3;
}

.auth-side h2,
.auth-side p {
    color: #fff;
}

/* Variante del panel derecho con foto de fondo (usada en login.php) */
.auth-side-photo {
    min-height: 680px;
    background: url("../img/auth-side-photo-v2.jpg") center / cover no-repeat;
}

/* Fila de "Talleres / Clientes / Refaccionarias" bajo el formulario de login */
.auth-features {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid #E5EAF1;
}

.auth-feature {
    flex: 1 1 140px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.auth-feature i {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #FFF1E6;
    color: var(--refa-orange);
    font-size: 16px;
}

.auth-feature strong {
    display: block;
    font-size: 13px;
    color: #1A1A1A;
}

.auth-feature small {
    display: block;
    font-size: 12px;
    color: #6B7280;
    line-height: 1.3;
}

/* Fila "Recordarme" + "Olvidaste tu contrasena" */
.auth-form-extra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin: 2px 0 18px;
    font-size: 13.5px;
}

.auth-form-extra .form-check-label {
    color: #374151;
}

.auth-forgot-note {
    display: none;
    margin-top: -8px;
    margin-bottom: 18px;
    font-size: 13px;
    background: #F4F6F8;
    border-radius: 8px;
    padding: 10px 12px;
    color: #374151;
}

.auth-forgot-note.show {
    display: block;
}

/* Boton de mostrar/ocultar contrasena dentro del input-group */
.auth-form-box .btn.auth-password-toggle {
    border-color: #ced4da;
    color: #6B7280;
    background: #fff;
}

/* ===== Login: pantalla dividida a todo lo ancho (mockup 2026-09-15) =====
   Escopado a .auth-shell-login para no afectar a registro.php, que
   comparte las clases base .auth-page/.auth-shell/.auth-panel/.auth-side
   con su propio estilo de tarjeta (ver seccion 9.8 de design/style-guide.md). */

.auth-page-login {
    background: #fff;
    overflow-x: hidden;
}

.auth-shell.auth-shell-login {
    width: 100%;
    max-width: none;
    min-height: 100vh;
    grid-template-columns: minmax(0, 46%) minmax(0, 54%);
    align-items: stretch;
    gap: 0;
    padding: 0;
    /* Bootstrap 5.3 lee estas variables en inputs, botones y input-groups -
       overridearlas aqui redondea todo el formulario de forma consistente
       sin tocar los selectores de cada componente uno por uno. */
    --bs-border-radius: 14px;
    --bs-border-radius-lg: 14px;
}

.auth-shell-login .auth-panel {
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px clamp(28px, 6vw, 96px);
    max-width: 100%;
}

.auth-shell-login .auth-panel > * {
    max-width: 100%;
    width: 100%;
    min-width: 0;
}

.auth-shell-login .auth-copy h1 {
    overflow-wrap: break-word;
    word-break: break-word;
}

.auth-shell-login .auth-side {
    border: none;
    border-radius: 0;
    box-shadow: none;
    min-height: 100vh;
}

.auth-shell-login .input-group-text {
    background: #fff;
    color: var(--refa-navy);
    border-color: #E5EAF1;
    border-right: 0;
}

.auth-shell-login .input-group .form-control {
    border-color: #E5EAF1;
    border-left: 0;
}

.auth-shell-login .btn.auth-password-toggle {
    border-color: #E5EAF1;
    border-left: 0;
}

.auth-shell-login .input-group:focus-within .input-group-text,
.auth-shell-login .input-group:focus-within .form-control,
.auth-shell-login .input-group:focus-within .btn.auth-password-toggle {
    border-color: var(--refa-orange);
}

@media (max-width: 991.98px) {
    .auth-shell.auth-shell-login {
        grid-template-columns: minmax(0, 1fr);
    }

    .auth-shell-login .auth-side {
        min-height: 260px;
        order: -1;
    }
}

.auth-features-heading {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid #E5EAF1;
}

.auth-features-heading strong {
    display: block;
    color: #1A1A1A;
    font-weight: 800;
}

.auth-features-heading span {
    display: block;
    color: #6B7280;
    font-size: 13px;
}

.auth-shell-login .auth-features {
    margin-top: 14px;
    padding-top: 0;
    border-top: none;
    flex-wrap: nowrap;
}

.auth-shell-login .auth-feature {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding-left: 16px;
    border-left: 1px solid #E5EAF1;
}

.auth-shell-login .auth-feature:first-child {
    padding-left: 0;
    border-left: none;
}

.auth-shell-login .auth-feature i {
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    color: #1A1A1A;
    font-size: 22px;
}

@media (max-width: 575.98px) {
    .auth-shell-login .auth-features {
        flex-wrap: wrap;
    }

    .auth-shell-login .auth-feature {
        flex: 1 1 100%;
        padding-left: 0;
        padding-top: 12px;
        border-left: none;
        border-top: 1px solid #E5EAF1;
    }

    .auth-shell-login .auth-feature:first-child {
        padding-top: 0;
        border-top: none;
    }
}



.role-picker {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.role-picker-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 480px) {
    .role-picker-3 {
        grid-template-columns: minmax(0, 1fr);
    }
}

.role-option {
    position: relative;
    min-height: 112px;
    display: flex;
    gap: 12px;
    padding: 14px;
    border: 1px solid #d7dee8;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

.role-option input {
    position: absolute;
    opacity: 0;
}

.role-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--refa-orange);
    background: #FFF1E6;
    border-radius: 8px;
    font-size: 20px;
}

.role-option strong,
.role-option small {
    display: block;
}

.role-option small {
    margin-top: 4px;
    color: #6B7280;
    line-height: 1.25;
}

.role-option:has(input:checked) {
    border-color: var(--refa-orange);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, .12);
}

.mechanic-signup-fields {
    margin: 0 0 18px;
    padding: 16px;
    border: 1px solid #dbe7f4;
    border-radius: 8px;
    background: #f8fbff;
}

.mechanic-fields-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    color: #1A1A1A;
    font-weight: 800;
}

.profile-hero {
    padding: 28px;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(120deg, #1A1A1A, #0E4D5B 58%, #F97316);
}

.profile-avatar-xl {
    width: 96px;
    height: 96px;
    border: 4px solid rgba(255, 255, 255, .55);
    border-radius: 50%;
    background: #fff;
    object-fit: cover;
}

.profile-card {
    border: 0;
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
}

.profile-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #1A1A1A;
    font-weight: 800;
}

.profile-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.profile-meta-item {
    padding: 12px;
    border: 1px solid #e5eaf1;
    border-radius: 8px;
    background: #fff;
}

.profile-meta-item small,
.profile-meta-item span {
    display: block;
}

.profile-meta-item small {
    color: #6B7280;
}

.profile-meta-item span {
    color: #1A1A1A;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.mechanic-profile-hero {
    padding: 28px;
    border-radius: 8px;
    color: #fff;
    background:
        linear-gradient(120deg, rgba(26, 26, 26, .94), rgba(14, 77, 91, .88) 58%, rgba(249, 115, 22, .88)),
        url("../img/default-mecanico.svg") right 32px center / 180px no-repeat;
}

.mechanic-profile-hero h1 {
    font-size: clamp(30px, 4vw, 46px);
}

.mechanic-profile-score {
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 8px;
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(10px);
}

.mechanic-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 10px;
    color: #1A1A1A;
    background: rgba(255, 255, 255, .78);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 800;
}

.mechanic-status-pill.is-ready {
    color: #14532d;
    background: #dcfce7;
}

/* Variante para cuando el pill vive sobre una tarjeta blanca en vez del
   degradado (fase 33) - el fondo translucido original se pierde sobre
   blanco, aqui se usa un gris solido en su lugar. */
.mechanic-status-pill-light {
    background: #F3F5F6;
}

.choice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.choice-pill {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border: 1px solid #d7dee8;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

.choice-pill span {
    color: #1A1A1A;
    font-weight: 600;
    line-height: 1.2;
}

.choice-pill:has(input:checked) {
    border-color: var(--refa-orange);
    background: #FFF4EC;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, .10);
}

.mechanic-side-panel {
    top: 16px;
}

.mechanic-map {
    height: 320px;
}

.public-profile-hero {
    min-height: 330px;
    display: flex;
    align-items: end;
    padding: 30px;
    border-radius: 8px;
    color: #fff;
    background:
        linear-gradient(120deg, rgba(26, 26, 26, .94), rgba(14, 77, 91, .78) 58%, rgba(249, 115, 22, .74)),
        url("../img/default-mecanico.svg") right 48px center / 230px no-repeat,
        #1A1A1A;
    background-position: center;
    background-size: cover;
}

.public-profile-hero > .row {
    width: 100%;
}

.public-profile-avatar {
    width: 104px;
    height: 104px;
    border: 4px solid rgba(255, 255, 255, .62);
    border-radius: 50%;
    background: #fff;
    object-fit: cover;
}

.public-profile-lead {
    max-width: 680px;
    font-size: 17px;
    line-height: 1.55;
}

.public-profile-actions {
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 8px;
    background: rgba(15, 23, 42, .42);
    backdrop-filter: blur(10px);
}

.public-rating {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.public-rating strong {
    color: #fff;
    font-size: 34px;
    line-height: 1;
}

.public-rating small {
    color: rgba(255, 255, 255, .78);
}

.public-info-tile {
    min-height: 116px;
    padding: 18px;
    border: 1px solid #e5eaf1;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .07);
}

.public-info-tile i {
    color: var(--refa-orange);
    font-size: 22px;
}

.public-info-tile small,
.public-info-tile strong {
    display: block;
}

.public-info-tile small {
    margin-top: 10px;
    color: #6B7280;
}

.public-info-tile strong {
    color: #1A1A1A;
    overflow-wrap: anywhere;
}

.public-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.public-chip-list span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    color: #1A1A1A;
    background: #f4f7fb;
    border: 1px solid #dbe3ee;
    border-radius: 8px;
    font-weight: 700;
}

.review-item {
    padding: 16px 0;
    border-top: 1px solid #e5eaf1;
}

.review-item:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.index-hero {
    background:
        linear-gradient(135deg, rgba(14, 77, 91, .08), rgba(249, 115, 22, .08)),
        #fff;
}

.index-zone-card {
    padding: 22px;
    border: 1px solid #e5eaf1;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .08);
}

.index-zone-icon {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--refa-orange);
    background: #FFF1E6;
    border-radius: 8px;
    font-size: 22px;
}

.index-zone-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.index-zone-metrics > div {
    padding: 12px;
    border: 1px solid #eef2f6;
    border-radius: 8px;
    background: #f8fafc;
}

.index-zone-metrics small,
.index-zone-metrics strong {
    display: block;
}

.index-zone-metrics small {
    color: #6B7280;
    font-weight: 700;
}

.index-zone-metrics strong {
    color: #1A1A1A;
    font-size: 24px;
}

.index-business-card {
    padding: 16px;
    border: 1px solid #e5eaf1;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .07);
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.index-business-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(15, 23, 42, .10);
}

.workbench-hero {
    padding: 28px;
    border-radius: 8px;
    color: #fff;
    background:
        linear-gradient(120deg, rgba(26, 26, 26, .96), rgba(14, 77, 91, .88) 58%, rgba(249, 115, 22, .82)),
        #1A1A1A;
}

.workbench-hero h1 {
    font-size: clamp(30px, 4vw, 44px);
}

.workbench-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.workbench-metrics-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.workbench-metrics > div {
    min-height: 88px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 8px;
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(8px);
}

.workbench-metrics small,
.workbench-metrics strong {
    display: block;
}

.workbench-metrics small {
    color: rgba(255, 255, 255, .78);
    font-weight: 700;
}

.workbench-metrics strong {
    margin-top: 4px;
    color: #fff;
    font-size: 34px;
    line-height: 1;
}

/* ===== KPIs del dashboard del mecanico (design/style-guide.md seccion 9.2) ===== */

.kpi-tile-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

.kpi-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 92px;
    padding: 14px;
    border: 1px solid #e5eaf1;
    border-radius: 8px;
    background: #fff;
}

.kpi-tile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    font-size: 20px;
    flex-shrink: 0;
}

.kpi-tile-icon-info {
    color: #0284C7;
    background: #e0f2fe;
}

.kpi-tile-icon-primary {
    color: var(--refa-orange);
    background: #ffedd5;
}

.kpi-tile-icon-success {
    color: #16A34A;
    background: #dcfce7;
}

.kpi-tile-icon-secondary {
    color: var(--refa-navy);
    background: #dceef1;
}

.kpi-tile-icon-warning {
    color: #F59E0B;
    background: #fef3c7;
}

.kpi-tile-icon-teal {
    color: #0D9488;
    background: #CCFBF1;
}

.kpi-tile small,
.kpi-tile strong {
    display: block;
}

.kpi-tile small {
    color: #6B7280;
    font-weight: 700;
    font-size: 12px;
}

.kpi-tile strong {
    margin-top: 2px;
    color: #1A1A1A;
    font-size: 22px;
    line-height: 1.15;
}

/* Tendencia honesta bajo cada KPI (fase 34): solo lleva un porcentaje real
   cuando hay periodo anterior contra el que comparar; ver tendencia_kpi_html
   en index.php. kpi-tendencia-flat cubre tanto "sin cambios" como las
   leyendas neutras (ordenes activas, stock bajo) que no son un porcentaje. */
.kpi-tendencia {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.2;
}

.kpi-tendencia i {
    font-size: 12px;
}

.kpi-tendencia-up {
    color: #16A34A;
}

.kpi-tendencia-down {
    color: #DC2626;
}

.kpi-tendencia-flat {
    color: #8B98A3;
    font-weight: 500;
}

.quick-access-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 14px;
}

.quick-access-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 22px 14px;
    border: 1px solid #e5eaf1;
    border-radius: 10px;
    background: #fff;
    text-decoration: none;
    color: #1A1A1A;
    text-align: center;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.quick-access-card:hover,
.quick-access-card:focus {
    border-color: var(--refa-orange);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
    transform: translateY(-2px);
    color: #1A1A1A;
}

.quick-access-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    font-size: 22px;
    background: #FFEDD5;
    color: var(--refa-orange);
}

.quick-access-card span:not(.quick-access-icon):not(.sidebar-badge) {
    font-weight: 600;
    font-size: 13px;
}

.quick-access-card .sidebar-badge {
    position: absolute;
    top: 10px;
    right: 10px;
}

.card-stat-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.card-stat-row > div {
    text-align: center;
    padding: 10px 6px;
    border: 1px solid #e5eaf1;
    border-radius: 8px;
    background: #fafbfc;
}

.card-stat-row small {
    display: block;
    color: #6B7280;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
}

.card-stat-row strong {
    display: block;
    margin-top: 4px;
    color: #1A1A1A;
    font-size: 17px;
}


.client-card {
    padding: 18px;
    border: 1px solid #e5eaf1;
    border-radius: 8px;
    background: #fff;
}

.client-card + .client-card {
    margin-top: 14px;
}

.quick-vehicle-box {
    padding: 14px;
    border: 1px solid #dbe7f4;
    border-radius: 8px;
    background: #f8fbff;
}

.workbench-table {
    --bs-table-bg: transparent;
}

.workbench-table thead th {
    color: #526271;
    border-bottom-color: #dbe3ee;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: none;
}

.workbench-table tbody td {
    border-bottom-color: #edf1f6;
}

.date-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    color: #1A1A1A;
    background: #f4f7fb;
    border-radius: 6px;
    font-weight: 800;
    white-space: nowrap;
}

.date-pill.date-today {
    color: #78350f;
    background: #fef3c7;
}

.date-pill.date-danger {
    color: #7f1d1d;
    background: #fee2e2;
}

.empty-state {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px;
    color: #6B7280;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    background: #f8fafc;
}

.empty-state i {
    color: var(--refa-orange);
    font-size: 24px;
}

.action-cell {
    min-width: 210px;
}

.action-cell .btn,
.action-cell form {
    margin: 2px 0;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 800;
    text-transform: capitalize;
    white-space: nowrap;
}

.status-nueva,
.status-enviada,
.status-confirmada {
    color: #0c4a6e;
    background: #e0f2fe;
}

.status-contactada {
    color: #78350f;
    background: #fef3c7;
}

.status-atendida,
.status-aceptada,
.status-realizado,
.status-completada {
    color: #14532d;
    background: #dcfce7;
}

.status-descartada,
.status-rechazada,
.status-cancelada,
.status-no_asistio {
    color: #7f1d1d;
    background: #fee2e2;
}

.quote-line-header {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 12px;
    margin: 20px 0 10px;
}

.quote-line-header span {
    color: #1A1A1A;
    font-weight: 800;
}

.quote-line-header small {
    color: #6B7280;
}

.quote-line {
    padding: 10px;
    border: 1px solid #e5eaf1;
    border-radius: 8px;
    background: #f8fafc;
}

.quote-summary {
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 8px;
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(8px);
}

.quote-summary small,
.quote-summary strong {
    display: block;
}

.quote-summary small {
    color: rgba(255, 255, 255, .78);
    font-weight: 700;
}

.quote-summary strong {
    margin: 4px 0 12px;
    color: #fff;
    font-size: 36px;
    line-height: 1;
}

.quote-total-box {
    padding: 14px;
    border: 1px solid #e5eaf1;
    border-radius: 8px;
    background: #f8fafc;
}

.quote-total-box small,
.quote-total-box strong {
    display: block;
}

.quote-total-box small {
    color: #6B7280;
}

.quote-total-box strong {
    color: #1A1A1A;
    font-size: 28px;
}

.quote-line-columns {
    padding: 0 2px;
    margin-bottom: 4px;
}

.quote-line-columns small {
    font-size: 11px;
    font-weight: 800;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.quote-line-importe {
    background: #F4F6F8 !important;
    font-weight: 800;
    color: #1A1A1A;
    text-align: right;
    border-color: #e5eaf1 !important;
}

.quote-total-live {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    margin-top: 14px;
    border-radius: 8px;
    background: #1A1A1A;
}

.quote-total-live span {
    color: rgba(255, 255, 255, .78);
    font-weight: 700;
    font-size: 13px;
}

.quote-total-live strong {
    color: #fff;
    font-size: 26px;
}


/* ===== Orden de servicio: badges de etapa y stepper (design/style-guide.md seccion 9.3) ===== */

.etapa-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.etapa-recepcion {
    color: #374151;
    background: #e5e7eb;
}

.etapa-diagnostico {
    color: #0c4a6e;
    background: #e0f2fe;
}

.etapa-autorizacion {
    color: #78350f;
    background: #fef3c7;
}

.etapa-reparacion {
    color: #062329;
    background: #dceef1;
}

.etapa-calidad {
    color: #7c2d12;
    background: #ffedd5;
}

.etapa-entrega {
    color: #14532d;
    background: #dcfce7;
}

.confirm-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.confirm-pendiente {
    color: #78350f;
    background: #fef3c7;
}

.confirm-aprobada {
    color: #14532d;
    background: #dcfce7;
}

.confirm-rechazada {
    color: #7f1d1d;
    background: #fee2e2;
}

.order-stepper {
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding: 8px 0 4px;
    overflow-x: auto;
}

.order-stepper-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    width: 108px;
    text-align: center;
}

.order-stepper-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 18px;
    flex-shrink: 0;
}

.order-stepper-step.pending .order-stepper-circle {
    background: #F4F6F8;
    color: #9CA3AF;
    border: 2px solid #D1D5DB;
}

.order-stepper-step.current .order-stepper-circle {
    background: #fff;
    color: var(--refa-orange);
    border: 2px solid var(--refa-orange);
}

.order-stepper-step.completed .order-stepper-circle {
    background: var(--refa-orange);
    color: #fff;
    border: 2px solid var(--refa-orange);
}

.order-stepper-label {
    font-size: 12px;
    font-weight: 700;
    color: #9CA3AF;
    line-height: 1.2;
}

.order-stepper-step.current .order-stepper-label,
.order-stepper-step.completed .order-stepper-label {
    color: #1A1A1A;
}

.order-stepper-connector {
    flex: 1 1 auto;
    height: 2px;
    background: #D1D5DB;
    margin: 19px -4px 0;
    min-width: 16px;
}

.order-stepper-connector.completed {
    background: var(--refa-orange);
}

.order-stepper-fecha {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: #9CA3AF;
    margin-top: 2px;
}

.order-detail-tabs {
    border-bottom-color: #e5eaf1;
}

.order-detail-tabs .nav-link {
    color: #6B7280;
    font-weight: 700;
    font-size: 14px;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 16px;
}

.order-detail-tabs .nav-link:hover {
    color: #1A1A1A;
    border-color: transparent;
}

.order-detail-tabs .nav-link.active {
    color: var(--refa-orange);
    background: none;
    border-bottom-color: var(--refa-orange);
}

.order-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

.order-timeline li {
    position: relative;
    padding: 0 0 18px 26px;
    border-left: 2px solid #e5eaf1;
}

.order-timeline li:last-child {
    border-left-color: transparent;
    padding-bottom: 0;
}

.order-timeline li::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--refa-orange);
}

.order-timeline .order-timeline-fecha {
    display: block;
    font-size: 12px;
    color: #6B7280;
    font-weight: 700;
    margin-bottom: 2px;
}

.order-timeline .order-timeline-comentario {
    color: #1A1A1A;
}

.stock-bajo-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 800;
    color: #7f1d1d;
    background: #fee2e2;
}

@media (max-width: 767.98px) {
    .order-stepper-step {
        width: 84px;
    }

    .order-stepper-label {
        font-size: 11px;
    }
}


@media (min-width: 992px) {
    .public-profile-hero {
        min-height: 300px;
    }

    .public-profile-avatar {
        width: 92px;
        height: 92px;
    }
}

.search-result-list {
    display: grid;
    gap: 12px;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 112px;
    padding: 16px;
    border: 1px solid #e5eaf1;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .06);
}

.search-result-copy {
    min-width: 0;
    flex: 1;
}

.search-result-action {
    flex: 0 0 auto;
}

.has-app-sidebar {
    padding-left: 68px;
    transition: padding-left 180ms ease;
}

.app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1040;
    width: 68px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #e9ecef;
    background: #1A1A1A;
    border-right: 1px solid #2d3742;
    box-shadow: 4px 0 16px rgba(0, 0, 0, .12);
    transition: width 180ms ease;
}

.app-sidebar:hover,
.app-sidebar:focus-within {
    width: 252px;
}

.sidebar-user {
    position: relative;
    min-height: 72px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
    border-bottom: 1px solid #303b46;
    white-space: nowrap;
}

.sidebar-user-icon,
.sidebar-link > i {
    width: 38px;
    min-width: 38px;
    text-align: center;
}

.sidebar-user-icon {
    font-size: 30px;
    line-height: 1;
}

.sidebar-user-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    opacity: 0;
    transition: opacity 120ms ease;
}

.sidebar-user-copy strong {
    max-width: 165px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-copy small {
    color: #aeb8c2;
}

.sidebar-nav {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 8px 0;
}

.sidebar-section {
    display: block;
    height: 30px;
    padding: 10px 18px 4px;
    overflow: hidden;
    color: #a9b7c1;
    font-size: 13px;
    font-weight: 600;
    line-height: 16px;
    text-transform: none;
    white-space: nowrap;
    opacity: 0;
}

.sidebar-link {
    position: relative;
    height: 46px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 2px 8px;
    padding: 0 7px;
    overflow: hidden;
    color: #dce2e7;
    border-radius: 6px;
    font-size: 14.5px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.sidebar-link > i {
    font-size: 19px;
}

.sidebar-link > span {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    opacity: 0;
    transition: opacity 120ms ease;
}

.sidebar-link:hover,
.sidebar-link:focus {
    color: #fff;
    background: #263544;
}

.sidebar-link.active {
    color: #fff;
    background: var(--refa-orange);
    font-weight: 700;
}

.sidebar-badge {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 20px;
    padding: 2px 6px;
    color: #1A1A1A;
    background: #F59E0B;
    border-radius: 10px;
    font-size: 11px;
    line-height: 16px;
    text-align: center;
}

.sidebar-badge-danger {
    color: #fff;
    background: #DC2626;
}

.sidebar-link-soon {
    color: #6b7c8a;
    cursor: default;
}

.sidebar-link-soon:hover,
.sidebar-link-soon:focus {
    color: #6b7c8a;
    background: none;
}

.sidebar-link-soon .sidebar-badge {
    position: static;
    margin-left: auto;
    flex-shrink: 0;
    font-size: 10px;
    text-transform: uppercase;
    opacity: 1;
}

.sidebar-group {
    margin: 2px 8px;
}

.sidebar-group-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 46px;
    padding: 0 7px;
    background: none;
    border: none;
    color: #dce2e7;
    border-radius: 6px;
    font-size: 14.5px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
}

.sidebar-group-toggle > i:first-child {
    font-size: 19px;
    flex-shrink: 0;
}

.sidebar-group-toggle span {
    flex-grow: 1;
    text-align: left;
}

.sidebar-group-toggle:hover,
.sidebar-group-toggle:focus {
    color: #fff;
    background: #263544;
}

.sidebar-group-toggle.active {
    color: #fff;
    background: rgba(249, 115, 22, .16);
}

.sidebar-group-toggle.active > i:first-child {
    color: var(--refa-orange);
}

.sidebar-group-chevron {
    flex-shrink: 0;
    font-size: 12px;
    color: #7c8a97;
    transition: transform 150ms ease;
}

.sidebar-group-toggle[aria-expanded="true"] .sidebar-group-chevron {
    transform: rotate(180deg);
}

.sidebar-group-body {
    padding-left: 12px;
    margin-left: 22px;
    border-left: 1px solid #2d3742;
}

.sidebar-group-body .sidebar-link {
    height: 42px;
    margin: 2px 0 2px 8px;
}


.sidebar-logout {
    flex: 0 0 46px;
    margin-bottom: 10px;
    color: #fca5a5;
    border-top: 1px solid #303b46;
}

.app-sidebar:hover .sidebar-user-copy,
.app-sidebar:hover .sidebar-section,
.app-sidebar:hover .sidebar-link > span,
.app-sidebar:focus-within .sidebar-user-copy,
.app-sidebar:focus-within .sidebar-section,
.app-sidebar:focus-within .sidebar-link > span {
    opacity: 1;
}

.app-sidebar:hover .sidebar-badge,
.app-sidebar:focus-within .sidebar-badge {
    position: static;
    margin-left: auto;
}

.sidebar-close,
.sidebar-backdrop,
.mobile-sidebar-toggle {
    display: none;
}

.sidebar-close {
    margin-left: auto;
    color: #fff;
    background: transparent;
    border: 0;
    font-size: 18px;
}

.sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1035;
    background: rgba(0, 0, 0, .45);
    border: 0;
}

@media (max-width: 767.98px) {
    .auth-shell,
    .auth-shell-register {
        width: min(100% - 24px, 620px);
        min-height: auto;
        grid-template-columns: 1fr;
        padding: 18px 0 28px;
    }

    .auth-panel {
        padding: 22px;
    }

    .auth-brand {
        margin-bottom: 24px;
    }

    .auth-side {
        min-height: 260px;
    }

    .role-picker,
    .profile-meta,
    .choice-grid {
        grid-template-columns: 1fr;
    }

    .mechanic-profile-hero {
        background: linear-gradient(120deg, #1A1A1A, #0E4D5B 62%, #F97316);
    }

    .public-profile-hero {
        min-height: auto;
        padding: 24px;
    }

    .public-profile-avatar {
        width: 84px;
        height: 84px;
    }

    .workbench-metrics,
    .workbench-metrics-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kpi-tile-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .has-app-sidebar {
        padding-left: 0;
    }

    .app-sidebar,
    .app-sidebar:hover,
    .app-sidebar:focus-within {
        width: min(300px, 86vw);
        transform: translateX(-102%);
        transition: transform 180ms ease;
    }

    .sidebar-mobile-open .app-sidebar {
        transform: translateX(0);
    }

    .sidebar-mobile-open {
        overflow: hidden;
    }

    .sidebar-mobile-open .sidebar-backdrop,
    .mobile-sidebar-toggle,
    .sidebar-close {
        display: block;
    }

    .sidebar-user-copy,
    .sidebar-section,
    .sidebar-link > span {
        opacity: 1;
    }

    .sidebar-badge {
        position: static;
        margin-left: auto;
    }
}

@media (max-width: 576px) {
    .navbar .container {
        align-items: flex-start;
        flex-direction: column;
    }

    .nav-actions {
        width: 100%;
    }

    .nav-actions .btn {
        flex: 1;
        /* Sin esto, un boton con texto que no envuelve (white-space: nowrap
           de Bootstrap) nunca se encoge por debajo del ancho de su propio
           texto - min-width:auto es el default en un flex item, y provoca
           que el renglon completo se desborde en vez de repartirse. */
        min-width: 0;
        padding-left: 10px;
        padding-right: 10px;
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .has-app-sidebar .navbar .container {
        flex-direction: row;
        align-items: center;
    }

    .has-app-sidebar .nav-actions {
        width: auto;
        margin-left: auto;
    }

    .has-app-sidebar .nav-actions .btn {
        flex: none;
    }

    .has-app-sidebar .brand-tagline,
    .has-app-sidebar .nav-actions > span {
        display: none;
    }

    .search-result-item {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .search-result-item .perfil-ovalo {
        width: 64px;
        height: 64px;
    }

    .search-result-action {
        width: 100%;
    }

    .workbench-metrics,
    .workbench-metrics-4 {
        grid-template-columns: 1fr;
    }

    .kpi-tile-row {
        grid-template-columns: 1fr;
    }

    .client-card > .d-flex {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ============================================================
   SHELL DE ESCRITORIO: sidebar siempre expandido + topbar
   (actualiza el rail-icono-colapsable anterior; el off-canvas
   de movil, ya definido arriba, no se toca)
   ============================================================ */

.has-app-sidebar {
    padding-left: 252px;
}

.app-sidebar {
    width: 252px;
}

.app-sidebar:hover,
.app-sidebar:focus-within {
    width: 252px;
}

.app-sidebar .sidebar-user-copy,
.app-sidebar .sidebar-section,
.app-sidebar .sidebar-link > span {
    opacity: 1;
}

.app-sidebar:hover .sidebar-badge,
.app-sidebar:focus-within .sidebar-badge,
.app-sidebar .sidebar-badge {
    position: static;
    margin-left: auto;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 16px;
    border-bottom: 1px solid #2d3742;
}

.sidebar-brand-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex: 0 0 auto;
}

.sidebar-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}

.sidebar-brand-name {
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-weight: 800;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: .2px;
}

.sidebar-brand-name .refa {
    color: #fff;
}

.sidebar-brand-name .red {
    color: var(--refa-orange);
}

.sidebar-brand-text small {
    color: #8e9aa6;
    font-size: 11px;
}

/* Topbar (reemplaza al navbar simple en las vistas con sidebar) */
.app-topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 68px;
    padding: 10px 24px;
    background: #fff;
    border-bottom: 1px solid #e5eaf1;
    position: sticky;
    top: 0;
    z-index: 1020;
}

.app-topbar-search {
    position: relative;
    flex: 1;
    max-width: 480px;
}

.app-topbar-search i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #6B7280;
    font-size: 15px;
}

.app-topbar-search input {
    width: 100%;
    border: 1px solid var(--refa-gris-claro);
    border-radius: 8px;
    padding: 9px 14px 9px 38px;
    background: var(--refa-blanco-humo);
    font-size: 14px;
    color: var(--refa-grafito);
}

.app-topbar-search input:focus {
    outline: none;
    border-color: var(--refa-orange);
    box-shadow: 0 0 0 .2rem rgba(249, 115, 22, .12);
    background: #fff;
}

.app-topbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 14px;
}

.topbar-notif {
    position: relative;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--refa-blanco-humo);
    color: var(--refa-grafito);
    font-size: 18px;
    text-decoration: none;
    flex: 0 0 auto;
}

.topbar-notif:hover {
    background: #FFF1E6;
    color: var(--refa-orange);
}

.topbar-notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--refa-orange);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    border: 2px solid #fff;
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px 6px 6px;
    border-radius: 8px;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-decoration: none;
}

.topbar-user:hover {
    background: var(--refa-blanco-humo);
}

.topbar-user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #FFF1E6;
    color: var(--refa-orange);
    font-size: 22px;
    flex: 0 0 auto;
}

.topbar-user-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    text-align: left;
    min-width: 0;
}

.topbar-user-copy strong {
    font-size: 13.5px;
    color: var(--refa-grafito);
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-user-copy small {
    font-size: 11.5px;
    color: #6B7280;
}

.topbar-user-chevron {
    color: #6B7280;
    font-size: 12px;
}

@media (max-width: 767.98px) {
    .has-app-sidebar {
        padding-left: 0;
    }

    .app-topbar-search {
        display: none;
    }
}

@media (max-width: 991.98px) and (min-width: 768px) {
    .app-topbar-search {
        max-width: 280px;
    }
}

/* =====================================================================
   Refinamiento visual del panel de refaccionaria (fase 32).
   Los componentes de aqui abajo (.refa-page-header, .refa-status-*,
   .refa-spotlight-*, .refa-activity-*) se construyeron primero solo para
   refaccionaria bajo body.role-refa, y se liberaron de ese scope en la
   fase 33 para poder reusarlos tambien en el panel del taller - el nombre
   con prefijo "refa-" se conserva por historia, ya no implica un rol.
   Ver docs/api-y-roadmap.md 3.32 y 3.33. */

/* Fondo con dejo acero en el shell autenticado (taller y refaccionaria) -
   antes bg-light generico de Bootstrap. Acotado a .has-app-sidebar para no
   tocar las paginas publicas (index.php de visitante, perfil publico, etc.)
   que tambien usan bg-light pero con otro diseno. Se aplico primero solo a
   refaccionaria (fase 32) y se extendio al taller al mejorarlo (fase 33). */
body.bg-light.has-app-sidebar {
    background-color: #F3F5F6;
}

/* Header de pagina compacto: reemplaza el degradado de .workbench-hero
   repetido en cada subpantalla - el degradado queda reservado solo para
   el saludo del dashboard, para que sea un momento real, no una plantilla. */
.refa-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 22px 28px;
    color: #fff;
    background: #0F2A3D;
    border-radius: 8px;
}

.refa-page-header h1 {
    margin: 0 0 4px;
    font-size: 24px;
    font-weight: 700;
}

.refa-page-header p {
    max-width: 56ch;
    margin: 0;
    color: rgba(255, 255, 255, .72);
    font-size: 14.5px;
}

.refa-page-header-meta {
    white-space: nowrap;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.refa-page-header-meta strong {
    display: block;
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
}

.refa-page-header-meta span {
    font-size: 12px;
    color: rgba(255, 255, 255, .6);
}

/* Variante con varias metricas lado a lado (antes .workbench-metrics-4
   dentro del propio degradado) - mismo componente .refa-page-header-meta,
   repetido, en vez de una caja translucida por metrica. */
.refa-page-header-metrics {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
}

/* Dashboard: fila compacta de estado del negocio */
.refa-status-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
}

.refa-status-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    color: inherit;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .06);
    transition: box-shadow 120ms ease, transform 120ms ease;
}

body.role-refa a.refa-status-item:hover,
body.role-refa a.refa-activity-item:hover {
    box-shadow: 0 12px 26px rgba(15, 23, 42, .1);
    transform: translateY(-1px);
}

.refa-status-item .refa-status-label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #14212B;
    font-weight: 600;
}

.refa-status-item .refa-status-label i {
    font-size: 18px;
    color: var(--refa-orange);
}

/* Variedad de color por icono (fase 34, alineado a design/mockups/web/dashboard-taller.png:
   cada metrica lleva su propio color en vez de repetir un solo tono). Se
   reutiliza en .refa-status-label y .refa-activity-label; estas reglas
   llevan .refa-status-item/.refa-activity-item en el selector para igualar
   o superar la especificidad de las reglas base de color (mas abajo en el
   archivo) y no perder frente a ellas. */
.refa-status-item .refa-status-label i.refa-icon-info,
.refa-activity-item .refa-activity-label i.refa-icon-info {
    color: #0284C7;
}

.refa-status-item .refa-status-label i.refa-icon-secondary,
.refa-activity-item .refa-activity-label i.refa-icon-secondary {
    color: var(--refa-navy);
}

.refa-status-item .refa-status-label i.refa-icon-warning,
.refa-activity-item .refa-activity-label i.refa-icon-warning {
    color: #F59E0B;
}

.refa-status-item .refa-status-label i.refa-icon-success,
.refa-activity-item .refa-activity-label i.refa-icon-success {
    color: #16A34A;
}

.refa-status-item .refa-status-label i.refa-icon-teal,
.refa-activity-item .refa-activity-label i.refa-icon-teal,
.empty-state i.refa-icon-teal {
    color: #0D9488;
}

.refa-status-item .refa-status-value {
    font-size: 22px;
    font-weight: 800;
    color: #14212B;
    font-variant-numeric: tabular-nums;
}

/* Dashboard: bloque destacado de catalogo - un solo panel con jerarquia
   interna en vez de varias tarjetas identicas repetidas. */
.refa-spotlight {
    padding: 24px 28px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .07);
}

.refa-spotlight-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.refa-spotlight-header h2 {
    margin: 0;
    color: #14212B;
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
}

.refa-spotlight-grid {
    display: grid;
    grid-template-columns: auto repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: 24px;
}

.refa-spotlight-main strong {
    display: block;
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    color: #14212B;
    font-variant-numeric: tabular-nums;
}

.refa-spotlight-main span {
    color: #5B6B76;
    font-size: 13.5px;
}

.refa-spotlight-sub strong {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: #14212B;
    font-variant-numeric: tabular-nums;
}

.refa-spotlight-sub span {
    color: #5B6B76;
    font-size: 12.5px;
}

/* Dashboard: lista de actividad reciente en vez de tarjetas sueltas */
.refa-activity-list {
    overflow: hidden;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .07);
}

.refa-activity-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 24px;
    color: inherit;
    border-bottom: 1px solid #EEF1F4;
}

.refa-activity-item:last-child {
    border-bottom: none;
}

.refa-activity-item .refa-activity-label {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #14212B;
    font-weight: 600;
}

.refa-activity-item .refa-activity-label i {
    font-size: 17px;
    color: #8b98a3;
}

.refa-activity-item .refa-activity-meta {
    text-align: right;
    color: #5B6B76;
    font-size: 13px;
}

@media (max-width: 767px) {
    .refa-status-row {
        grid-template-columns: 1fr;
    }

    .refa-spotlight-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .refa-page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .refa-page-header-meta {
        text-align: left;
    }
}

/* =====================================================================
   Rediseno visual del panel del taller (fase 33) - alineado a los mockups
   en design/mockups/web/. Aplica a body.has-app-sidebar sin distincion de
   rol (a diferencia de la fase 32, el taller es el objetivo explicito aqui,
   asi que estas reglas viven en la base, no en un scope aparte).
   ===================================================================== */

/* Numero central del donut de "Ordenes por etapa", como en el mockup del
   dashboard (el total no se pierde solo en la leyenda de abajo). */
.donut-centro {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    text-align: center;
    color: #14212B;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.donut-centro strong {
    display: block;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.donut-centro span {
    display: block;
    color: #5B6B76;
    font-size: 11.5px;
}

/* Calendario mensual de recordatorios del cliente (fase 39) - grid simple
   en CSS puro, sin libreria: solo hacen falta 7 columnas y una celda por
   dia, no justifica traer un componente de calendario completo. */
.calendario-grid-encabezado {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 4px;
    color: #6B7280;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.calendario-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.calendario-celda {
    min-height: 84px;
    padding: 6px;
    border: 1px solid #E5EAF1;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}

.calendario-celda.vacia {
    border: none;
    background: transparent;
}

.calendario-celda.es-hoy {
    border-color: var(--refa-orange);
    background: #FFF7ED;
}

.calendario-numero {
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 4px;
}

.calendario-evento {
    font-size: 10.5px;
    line-height: 1.3;
    padding: 2px 4px;
    margin-bottom: 2px;
    border-radius: 4px;
    background: #FFEDD5;
    color: #9A3412;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 576px) {
    .calendario-celda {
        min-height: 56px;
        padding: 4px;
    }

    .calendario-evento {
        font-size: 9px;
    }
}

/* ============================================================
   Landing publica de index.php (fase 40) - el hero reusa
   .workbench-hero (mismo degradado navy->naranja de una sola vez
   por rol que ya usan los dashboards internos) para que el
   visitante sin cuenta vea la misma identidad visual, no una
   segunda marca aparte.
   ============================================================ */
.index-hero-wrap {
    background: #F3F5F6;
}

.index-hero-card {
    padding: 32px;
}

@media (max-width: 767px) {
    .index-hero-card {
        padding: 22px;
    }
}

/* Vista previa publica del buscador de piezas */
.piezas-preview-section {
    background: #fff;
    border-top: 1px solid #E5EAF1;
    border-bottom: 1px solid #E5EAF1;
}

.pieza-chip {
    padding: 6px 14px;
    border: 1px solid #E5EAF1;
    border-radius: 999px;
    color: #374151;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    background: #fff;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.pieza-chip:hover {
    background: #FFF1E6;
    border-color: var(--refa-orange);
    color: var(--refa-orange);
}

.pieza-chip.activo {
    background: var(--refa-orange);
    border-color: var(--refa-orange);
    color: #fff;
}

.pieza-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid #E5EAF1;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .05);
}

.pieza-card-foto {
    position: relative;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F3F5F6;
    color: #9CA3AF;
    font-size: 34px;
}

.pieza-card-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pieza-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.pieza-badge.disponible {
    background: #DCFCE7;
    color: #16A34A;
}

.pieza-badge.agotado {
    background: #FEE2E2;
    color: #DC2626;
}

.pieza-card-body {
    padding: 14px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.pieza-precio-cta {
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px dashed #E5EAF1;
    color: var(--refa-orange);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
}

.pieza-precio-cta:hover {
    text-decoration: underline;
}

.piezas-cta-vacio {
    color: #9CA3AF;
}

.piezas-cta-vacio i {
    font-size: 32px;
    display: block;
    margin-bottom: 10px;
}

/* ============================================================
   Landing publica (fase 41) - segunda pasada con mas impacto
   visual: hero fotografico real, en vez de un degradado plano. Un
   solo momento fuerte de marca, con el resto de la pagina en calma
   alrededor. hero_landing.jpg es un recorte propio (no el archivo
   de login.php) de la misma foto de auto+skyline ya usada en el
   login - se recorto aparte porque auth-side-photo-v2.jpg trae
   texto de marca "horneado" en los pixeles (arriba y abajo) que a
   ciertos anchos de pantalla quedaba encimado con el texto real de
   esta pagina; este recorte usa solo la franja intermedia limpia
   (skyline + auto), sin texto horneado, asi que es seguro con
   cualquier proporcion de pantalla.
   ============================================================ */
.index-hero-photo {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: center;
    padding: 64px 0 0;
    color: #fff;
    background: url("../img/hero_landing.jpg") center 65% / cover no-repeat, #14212B;
    overflow: hidden;
}

.index-hero-scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(100deg, rgba(10, 16, 22, .94) 0%, rgba(10, 16, 22, .82) 38%, rgba(10, 16, 22, .35) 68%, rgba(10, 16, 22, .55) 100%),
        linear-gradient(0deg, rgba(10, 16, 22, .96) 0%, rgba(10, 16, 22, 0) 30%);
}

.index-hero-grid {
    position: relative;
    max-width: 760px;
    padding-bottom: 36px;
}

.index-hero-copy {
    margin-bottom: 28px;
}

.index-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    border: 1px solid rgba(249, 115, 22, .5);
    border-radius: 999px;
    color: #FDBA74;
    background: rgba(249, 115, 22, .12);
    font-size: 12.5px;
    font-weight: 700;
}

.index-hero-eyebrow-dark {
    color: var(--refa-orange);
    background: #FFF1E6;
    border-color: #FFDAB3;
}

.index-hero-title {
    margin: 18px 0 16px;
    color: #fff;
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(34px, 4.6vw, 56px);
    line-height: 1.06;
    letter-spacing: -.01em;
}

.index-hero-accent {
    color: var(--refa-orange);
}

.index-hero-sub {
    max-width: 46ch;
    color: rgba(255, 255, 255, .8);
    font-size: 17px;
    line-height: 1.5;
}

.index-hero-searchcard {
    padding: 22px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}

.index-hero-stats {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px;
    padding: 22px 0 28px;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.index-hero-stats > a {
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: #fff;
    text-decoration: none;
}

.index-hero-stats > a:hover strong {
    color: var(--refa-orange);
}

.index-hero-stats strong {
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 26px;
    font-weight: 800;
    transition: color 120ms ease;
}

.index-hero-stats small {
    color: rgba(255, 255, 255, .68);
    font-size: 13px;
}

.index-hero-stats-divider {
    width: 1px;
    height: 26px;
    background: rgba(255, 255, 255, .18);
}

.index-hero-stats-cta {
    margin-left: auto;
    color: var(--refa-orange) !important;
    font-weight: 700;
    font-size: 14px;
}

@media (max-width: 991px) {
    .index-hero-photo {
        min-height: 0;
        padding-top: 40px;
    }

    .index-hero-stats-cta {
        margin-left: 0;
        width: 100%;
    }
}

/* Franja de resultados/busqueda de talleres - vive en un div claro justo
   debajo de la foto del hero (ya no es .workbench-hero, ver arriba). */
.index-hero-wrap {
    background: #F3F5F6;
    padding: 32px 0;
}

/* Ranking con numeral grande en vez del avatar generico circular - se
   justifica aqui porque de verdad es un top-N ordenado, no una decoracion. */
.index-rankings-section {
    background: #fff;
}

.index-section-title {
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(24px, 3vw, 32px);
    color: #14212B;
}

.index-rank-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px;
    border: 1px solid #E5EAF1;
    border-radius: 10px;
    background: #fff;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.index-rank-card:hover {
    border-color: #FFDAB3;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .07);
}

.index-rank-number {
    flex: 0 0 auto;
    width: 52px;
    text-align: center;
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 26px;
    font-weight: 800;
    color: var(--refa-orange);
    font-variant-numeric: tabular-nums;
}

.index-rank-number-alt {
    color: var(--refa-navy);
}

/* Franja de conversion para negocios (talleres/refaccionarias), el segundo
   y ultimo momento fuerte de la pagina - color solido, sin foto, para no
   repetir el mismo recurso 2 veces. */
.index-join-cta {
    padding: 56px 0;
    color: #fff;
    background: linear-gradient(120deg, #0F2A3D, #14212B 55%, #7c2d12);
}

.index-join-title {
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(24px, 3.4vw, 34px);
    color: #fff;
}

.index-join-btn {
    background: var(--refa-orange);
    color: #fff;
    font-weight: 700;
}

.index-join-btn:hover {
    background: #EA6A0C;
    color: #fff;
}

/* Panel derecho de registro.php (fase 42) - mismo tratamiento fotografico
   que login.php (auth-side-photo), pero con hero_landing.jpg (el recorte
   limpio sin texto horneado ya creado en la fase 41) en vez del archivo
   original: aqui el panel SI lleva texto real superpuesto (.auth-side-content,
   cambia segun el contexto de registro), y el texto horneado del archivo
   original habria quedado encimado con el, el mismo problema ya resuelto
   en el landing publico. El degradado extra oscurece la parte de abajo,
   donde vive el texto, sin tapar la foto en la parte de arriba. */
.auth-side.auth-side-photo-clean {
    background:
        linear-gradient(180deg, rgba(10, 16, 22, .25) 0%, rgba(10, 16, 22, .92) 82%),
        url("../img/hero_landing.jpg") 78% center / cover no-repeat;
}

/* Inicio personalizado del cliente final (index.php, tipo_sesion == 'usuario'):
   mismo componente .workbench-hero que ya usa el dashboard del mecanico,
   con la foto real de hero_landing.jpg en vez del degradado plano - el
   mismo ajuste que dashboard-taller.png ya propone (foto de fondo en vez
   de gradiente) y que ya se aplico al landing publico y a registro.php.
   Selector de 2 clases (mayor especificidad) para ganarle a .workbench-hero
   sin importar el orden en la hoja. */
.workbench-hero.workbench-hero-photo {
    position: relative;
    overflow: hidden;
    background: url("../img/hero_landing.jpg") center 55% / cover no-repeat, #14212B;
}

.workbench-hero-photo-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(10, 16, 22, .93) 0%, rgba(10, 16, 22, .8) 42%, rgba(10, 16, 22, .32) 100%);
}

/* ============================================================
   TEMA OSCURO DEL PANEL AUTENTICADO (fase 51)
   Propuesta visual aprobada por el usuario (lienzo de diseño:
   fondo casi negro + vidrio esmerilado + doble acento naranja/cian).
   Todo escopado a "body.has-app-sidebar" (la clase que
   includes/layout_header.php ya pone en el <body> de CUALQUIER
   pantalla autenticada, mecanico/refa/usuario por igual) para no
   tocar login.php/registro.php ni la landing publica sin sesion,
   que no llevan esa clase. Un solo archivo, cascada automatica a
   las ~30 pantallas de las 3 cuentas.
   ============================================================ */

body.has-app-sidebar {
    --bs-body-bg: #070E16;
    --bs-body-color: #E7EEF2;
    --bs-border-color: rgba(255, 255, 255, .10);
    --bs-secondary-color: #90A4B2;
    --bs-emphasis-color: #FFFFFF;
    --bs-heading-color: #F2F6F8;
    --bs-tertiary-bg: #0F1B26;
    --bs-secondary-bg: #101B26;

    /* Mismos tokens de "-bg-subtle"/"-text-emphasis" que ya se
       retintaban para claro (ver tope del archivo) - version
       traslucida sobre fondo oscuro, usada por .badge/.alert de
       Bootstrap y reaprovechada abajo por los chips propios
       (status-badge, etapa-badge, kpi-tile-icon, date-pill). */
    --bs-primary-bg-subtle: rgba(249, 115, 22, .16);
    --bs-primary-text-emphasis: #FDBA74;
    --bs-primary-border-subtle: rgba(249, 115, 22, .32);
    --bs-secondary-bg-subtle: rgba(148, 163, 184, .14);
    --bs-secondary-text-emphasis: #C9D6DE;
    --bs-secondary-border-subtle: rgba(148, 163, 184, .3);
    --bs-success-bg-subtle: rgba(52, 211, 153, .14);
    --bs-success-text-emphasis: #34D399;
    --bs-success-border-subtle: rgba(52, 211, 153, .3);
    --bs-info-bg-subtle: rgba(34, 211, 238, .14);
    --bs-info-text-emphasis: #22D3EE;
    --bs-info-border-subtle: rgba(34, 211, 238, .3);
    --bs-warning-bg-subtle: rgba(245, 158, 11, .16);
    --bs-warning-text-emphasis: #FBBF24;
    --bs-warning-border-subtle: rgba(245, 158, 11, .3);
    --bs-danger-bg-subtle: rgba(220, 38, 38, .16);
    --bs-danger-text-emphasis: #F87171;
    --bs-danger-border-subtle: rgba(220, 38, 38, .3);

    /* Bootstrap ya pone "bg-light" junto con "has-app-sidebar" en el mismo
       <body> (includes/layout_header.php) para cualquier pantalla
       autenticada - esa utilidad trae su propio background-color con
       !important, que le gana a un "background" normal sin importar la
       especificidad. Se separa aqui background-color (con !important,
       misma tecnica) de background-image (que no lo necesita, "bg-light"
       no toca esa propiedad). */
    background-color: #070E16 !important;
    background-image:
        radial-gradient(1200px 560px at 86% -10%, rgba(34, 211, 238, .07), transparent 60%),
        radial-gradient(1000px 480px at 6% 106%, rgba(249, 115, 22, .07), transparent 55%);
    color: #E7EEF2;
}

/* Mismo problema que el <body> (utilidades de Bootstrap con !important)
   en cualquier OTRO elemento dentro del panel autenticado que use
   bg-white/bg-light directamente - ej. el <footer class="bg-white"> que
   index.php comparte entre su vista publica y la autenticada. */
body.has-app-sidebar .bg-white,
body.has-app-sidebar .bg-light {
    background-color: #0A121C !important;
}

body.has-app-sidebar h1,
body.has-app-sidebar h2,
body.has-app-sidebar h3,
body.has-app-sidebar h4,
body.has-app-sidebar h5,
body.has-app-sidebar h6 {
    color: #F2F6F8;
}

body.has-app-sidebar .text-muted {
    color: #90A4B2 !important;
}

body.has-app-sidebar .text-dark {
    color: #E7EEF2 !important;
}

/* Rail lateral: mismo tono casi-negro que el resto del panel en vez
   del grafito neutro que usaba antes, para que sidebar y contenido
   se sientan de una sola pieza. */
body.has-app-sidebar .app-sidebar {
    background: #0A121C;
    border-right-color: rgba(255, 255, 255, .07);
}

/* Topbar */
body.has-app-sidebar .app-topbar {
    background: #0A121C;
    border-bottom-color: rgba(255, 255, 255, .08);
}

body.has-app-sidebar .app-topbar-search input {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .12);
    color: #E7EEF2;
}

body.has-app-sidebar .app-topbar-search input::placeholder {
    color: #5D7285;
}

body.has-app-sidebar .app-topbar-search input:focus {
    background: rgba(255, 255, 255, .06);
}

body.has-app-sidebar .app-topbar-search i {
    color: #5D7285;
}

body.has-app-sidebar .topbar-notif {
    color: #C9D6DE;
}

body.has-app-sidebar .topbar-notif:hover {
    background: rgba(249, 115, 22, .14);
    color: var(--refa-orange);
}

body.has-app-sidebar .topbar-user:hover {
    background: rgba(255, 255, 255, .05);
}

body.has-app-sidebar .topbar-user-copy strong {
    color: #F2F6F8;
}

body.has-app-sidebar .topbar-user-copy small,
body.has-app-sidebar .topbar-user-chevron {
    color: #90A4B2;
}

/* Tarjetas */
body.has-app-sidebar .profile-card {
    background: #0F1B26;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .35);
}

body.has-app-sidebar .profile-section-title {
    color: #F2F6F8;
}

body.has-app-sidebar .profile-meta-item {
    background: rgba(255, 255, 255, .03);
    border-color: rgba(255, 255, 255, .08);
}

body.has-app-sidebar .profile-meta-item small {
    color: #90A4B2;
}

body.has-app-sidebar .profile-meta-item span {
    color: #F2F6F8;
}

/* KPIs: mismo patron de chip traslucido que ya usa la propuesta
   visual (fondo del color al 14-16% de opacidad, texto en el
   color solido) en vez del pastel solido que solo funcionaba sobre
   fondo blanco. */
body.has-app-sidebar .kpi-tile {
    background: #0F1B26;
    border-color: rgba(255, 255, 255, .08);
}

body.has-app-sidebar .kpi-tile small {
    color: #90A4B2;
}

body.has-app-sidebar .kpi-tile strong {
    color: #F2F6F8;
}

body.has-app-sidebar .kpi-tile-icon-info {
    color: #22D3EE;
    background: rgba(34, 211, 238, .14);
}

body.has-app-sidebar .kpi-tile-icon-primary {
    color: var(--refa-orange);
    background: rgba(249, 115, 22, .16);
}

body.has-app-sidebar .kpi-tile-icon-success {
    color: #34D399;
    background: rgba(52, 211, 153, .14);
}

body.has-app-sidebar .kpi-tile-icon-secondary {
    color: #7DD3FC;
    background: rgba(125, 211, 252, .14);
}

body.has-app-sidebar .kpi-tile-icon-warning {
    color: #FBBF24;
    background: rgba(245, 158, 11, .16);
}

body.has-app-sidebar .kpi-tile-icon-teal {
    color: #2DD4BF;
    background: rgba(45, 212, 191, .16);
}

/* Tabla */
body.has-app-sidebar .workbench-table thead th {
    color: #90A4B2;
    border-bottom-color: rgba(255, 255, 255, .12);
}

body.has-app-sidebar .workbench-table tbody td {
    border-bottom-color: rgba(255, 255, 255, .06);
    color: #E7EEF2;
}

body.has-app-sidebar .workbench-table tbody tr:hover {
    background-color: rgba(255, 255, 255, .03);
}

/* Chips de estado: mismo criterio traslucido que los KPI. Se
   mantienen las reglas claras de arriba sin tocarlas (para la
   landing publica y cualquier vista sin sesion que las reutilice);
   estas ganan por especificidad solo dentro del panel autenticado. */
body.has-app-sidebar .date-pill {
    color: #E7EEF2;
    background: rgba(255, 255, 255, .06);
}

body.has-app-sidebar .date-pill.date-today {
    color: #FBBF24;
    background: rgba(245, 158, 11, .16);
}

body.has-app-sidebar .date-pill.date-danger {
    color: #F87171;
    background: rgba(220, 38, 38, .16);
}

body.has-app-sidebar .status-nueva,
body.has-app-sidebar .status-enviada,
body.has-app-sidebar .status-confirmada {
    color: #22D3EE;
    background: rgba(34, 211, 238, .14);
}

body.has-app-sidebar .status-contactada {
    color: #FBBF24;
    background: rgba(245, 158, 11, .16);
}

body.has-app-sidebar .status-atendida,
body.has-app-sidebar .status-aceptada,
body.has-app-sidebar .status-realizado,
body.has-app-sidebar .status-completada {
    color: #34D399;
    background: rgba(52, 211, 153, .14);
}

body.has-app-sidebar .status-descartada,
body.has-app-sidebar .status-rechazada,
body.has-app-sidebar .status-cancelada,
body.has-app-sidebar .status-no_asistio {
    color: #F87171;
    background: rgba(220, 38, 38, .16);
}

body.has-app-sidebar .etapa-recepcion {
    color: #C9D6DE;
    background: rgba(201, 214, 222, .14);
}

body.has-app-sidebar .etapa-diagnostico {
    color: #22D3EE;
    background: rgba(34, 211, 238, .14);
}

body.has-app-sidebar .etapa-autorizacion {
    color: #FBBF24;
    background: rgba(245, 158, 11, .16);
}

body.has-app-sidebar .etapa-reparacion {
    color: #7DD3FC;
    background: rgba(125, 211, 252, .14);
}

body.has-app-sidebar .etapa-calidad {
    color: var(--refa-orange);
    background: rgba(249, 115, 22, .16);
}

body.has-app-sidebar .etapa-entrega {
    color: #34D399;
    background: rgba(52, 211, 153, .14);
}

body.has-app-sidebar .confirm-pendiente {
    color: #FBBF24;
    background: rgba(245, 158, 11, .16);
}

body.has-app-sidebar .confirm-aprobada {
    color: #34D399;
    background: rgba(52, 211, 153, .14);
}

body.has-app-sidebar .confirm-rechazada {
    color: #F87171;
    background: rgba(220, 38, 38, .16);
}

/* Estados vacios y accesos rapidos */
body.has-app-sidebar .empty-state {
    color: #90A4B2;
    border-color: rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .03);
}

body.has-app-sidebar .quick-access-card {
    background: #0F1B26;
    border-color: rgba(255, 255, 255, .08);
    color: #E7EEF2;
}

body.has-app-sidebar .quick-access-card:hover,
body.has-app-sidebar .quick-access-card:focus {
    color: #E7EEF2;
    border-color: var(--refa-orange);
}

/* Formularios */
body.has-app-sidebar .form-control,
body.has-app-sidebar .form-select {
    background-color: #0F1B26;
    color: #E7EEF2;
    border-color: rgba(255, 255, 255, .14);
}

body.has-app-sidebar .form-control::placeholder {
    color: #5D7285;
}

body.has-app-sidebar .form-control:disabled,
body.has-app-sidebar .form-select:disabled {
    background-color: #0A121C;
    color: #5D7285;
}

body.has-app-sidebar .form-label {
    color: #C9D6DE;
}

body.has-app-sidebar .form-control:focus,
body.has-app-sidebar .form-select:focus {
    background-color: #0F1B26;
    color: #E7EEF2;
}

/* Modales */
body.has-app-sidebar .modal-content {
    background: #0F1B26;
    color: #E7EEF2;
    border: 1px solid rgba(255, 255, 255, .1);
}

body.has-app-sidebar .modal-header,
body.has-app-sidebar .modal-footer {
    border-color: rgba(255, 255, 255, .08);
}

body.has-app-sidebar .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Menus desplegables */
body.has-app-sidebar .dropdown-menu {
    background-color: #0F1B26;
    border-color: rgba(255, 255, 255, .1);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .4);
}

body.has-app-sidebar .dropdown-item {
    color: #E7EEF2;
}

body.has-app-sidebar .dropdown-item:hover,
body.has-app-sidebar .dropdown-item:focus {
    background-color: rgba(255, 255, 255, .06);
    color: #fff;
}

body.has-app-sidebar .dropdown-divider {
    border-color: rgba(255, 255, 255, .08);
}

/* Acordeon (ayuda.php) */
body.has-app-sidebar .accordion-item {
    background-color: #0F1B26;
    border-color: rgba(255, 255, 255, .08);
    color: #E7EEF2;
}

body.has-app-sidebar .accordion-button {
    background-color: #0F1B26;
    color: #E7EEF2;
}

body.has-app-sidebar .accordion-button:not(.collapsed) {
    background-color: rgba(249, 115, 22, .12);
    color: #FDBA74;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08);
}

body.has-app-sidebar .accordion-button::after {
    filter: invert(1) grayscale(100%) brightness(200%);
}

body.has-app-sidebar .accordion-body {
    color: #C9D6DE;
}

/* Segunda familia de componentes compartidos (fase 51b): .refa-page-header/
   .refa-status-*/.refa-spotlight/.refa-activity-* NO son exclusivos de la
   cuenta de refaccionaria pese al nombre - vistas/mis_vehiculos.php y
   vistas/avances_servicio.php (cuenta de cliente) tambien los usan como
   encabezado compacto de pagina secundaria, alternativa a .workbench-hero.
   Sin esta conversion, cualquier pantalla que los use se hubiera quedado
   en tarjetas blancas pese al resto del tema oscuro. */
body.has-app-sidebar .refa-page-header {
    background: #0F1B26;
    border: 1px solid rgba(255, 255, 255, .08);
}

body.has-app-sidebar .refa-status-item,
body.has-app-sidebar .refa-spotlight,
body.has-app-sidebar .refa-activity-list {
    background: #0F1B26;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 14px 32px rgba(0, 0, 0, .3);
}

body.has-app-sidebar .refa-status-item .refa-status-label,
body.has-app-sidebar .refa-status-item .refa-status-value,
body.has-app-sidebar .refa-spotlight-header h2,
body.has-app-sidebar .refa-spotlight-main strong,
body.has-app-sidebar .refa-spotlight-sub strong,
body.has-app-sidebar .refa-activity-item .refa-activity-label {
    color: #F2F6F8;
}

body.has-app-sidebar .refa-spotlight-main span,
body.has-app-sidebar .refa-spotlight-sub span,
body.has-app-sidebar .refa-activity-item .refa-activity-meta {
    color: #90A4B2;
}

body.has-app-sidebar .refa-activity-item {
    border-bottom-color: rgba(255, 255, 255, .07);
}

body.has-app-sidebar a.refa-status-item:hover,
body.has-app-sidebar a.refa-activity-item:hover {
    box-shadow: 0 16px 36px rgba(0, 0, 0, .4);
    border-color: rgba(255, 255, 255, .16);
}

/* Red de seguridad general (fase 51b): cualquier .card sin .profile-card
   (un puñado de casos sueltos: comparativa de planes de suscripcion,
   tarjetas con "border-0 shadow-sm") y otros componentes propios de una
   sola pantalla que tambien usaban background:#fff a mano, encontrados
   auditando cada ocurrencia de "background: #fff" en el archivo. */
body.has-app-sidebar .card {
    background-color: #0F1B26;
    border-color: rgba(255, 255, 255, .08);
    color: #E7EEF2;
}

body.has-app-sidebar .card-stat-row > div {
    background: rgba(255, 255, 255, .03);
    border-color: rgba(255, 255, 255, .08);
}

body.has-app-sidebar .card-stat-row small {
    color: #90A4B2;
}

body.has-app-sidebar .card-stat-row strong {
    color: #F2F6F8;
}

body.has-app-sidebar .client-card {
    background: #0F1B26;
    border-color: rgba(255, 255, 255, .08);
}

body.has-app-sidebar .profile-avatar-xl {
    background: #0A121C;
}

body.has-app-sidebar .order-stepper-step.pending .order-stepper-circle {
    background: rgba(255, 255, 255, .05);
    color: #5D7285;
    border-color: rgba(255, 255, 255, .14);
}

body.has-app-sidebar .order-stepper-step.current .order-stepper-circle {
    background: rgba(249, 115, 22, .14);
    color: var(--refa-orange);
}

body.has-app-sidebar .search-result-item {
    background: #0F1B26;
    border-color: rgba(255, 255, 255, .08);
}

body.has-app-sidebar .calendario-celda {
    background: rgba(255, 255, 255, .03);
    border-color: rgba(255, 255, 255, .08);
}

body.has-app-sidebar .calendario-celda.es-hoy {
    background: rgba(249, 115, 22, .12);
}

body.has-app-sidebar .calendario-grid-encabezado {
    color: #90A4B2;
}

body.has-app-sidebar .calendario-numero {
    color: #90A4B2;
}

body.has-app-sidebar .calendario-evento {
    color: var(--refa-orange);
    background: rgba(249, 115, 22, .16);
}

/* Cajas de ayuda/resumen sueltas encontradas en la misma auditoria */
body.has-app-sidebar .quick-vehicle-box {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .1);
}

body.has-app-sidebar .quote-line-header span {
    color: #F2F6F8;
}

body.has-app-sidebar .quote-line {
    background: rgba(255, 255, 255, .03);
    border-color: rgba(255, 255, 255, .08);
}

body.has-app-sidebar .quote-line-importe {
    background: rgba(255, 255, 255, .06) !important;
    color: #F2F6F8;
    border-color: rgba(255, 255, 255, .1) !important;
}

body.has-app-sidebar .quote-total-box {
    background: rgba(249, 115, 22, .10);
    border-color: rgba(249, 115, 22, .3);
}

body.has-app-sidebar .quote-total-box strong {
    color: #F2F6F8;
}