/*
 * Revio — Component styles
 *
 * Estructura de capas (se van rellenando por sub-fases):
 *   - Fase 2.1: compat layer sobre el CSS legacy
 *   - Fase 2.2: app shell + sidebar + topbar + footer
 *   - Fase 2.3: componentes (botones, cards, tablas, forms, badges)
 *   - Fase 2.4+2.5: login, dashboard, auth pages, KPIs   ← este commit
 */

/* =========================================================================
   FASE 2.2 — APP SHELL LAYOUT
   ========================================================================= */

/* Reset para body legacy: legacy pone atributos bgcolor, celldpadding, etc.
   en el body. Los neutralizamos. */
body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-base);
    color: var(--text-high);
    font-family: var(--font-body);
    min-height: 100vh;
    overflow-x: hidden;
}

/* App shell — contenedor principal con grid: sidebar + main */
.rv-app {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    grid-template-rows: 100vh;
    min-height: 100vh;
    transition: grid-template-columns var(--transition-base);
}

/* Estado colapsado del sidebar (desktop) */
.rv-app[data-sidebar="collapsed"] {
    grid-template-columns: var(--sidebar-width-collapsed) 1fr;
}

/* =========================================================================
   SIDEBAR
   ========================================================================= */

.rv-sidebar {
    grid-column: 1;
    grid-row: 1;
    background-color: var(--bg-surface);
    border-right: 1px solid var(--border-base);
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: sticky;
    top: 0;
    overflow: hidden;
    transition: width var(--transition-base);
    z-index: var(--z-fixed);
    box-shadow: 1px 0 0 0 var(--border-subtle);
}

/* Sidebar más limpio en light mode */
[data-theme="light"] .rv-sidebar {
    background-color: #FFFFFF;
    border-right-color: #E2E8F0;
}

/* Sidebar header (logo) */
.rv-sidebar-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    height: var(--topbar-height);
    border-bottom: 1px solid var(--border-base);
    flex-shrink: 0;
}

.rv-sidebar-logo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    color: var(--text-high);
    font-family: var(--font-display);
    font-weight: var(--font-weight-extrabold);
    font-size: var(--text-xl);
    letter-spacing: var(--tracking-wide);
    white-space: nowrap;
    overflow: hidden;
}

.rv-sidebar-logo:hover {
    text-decoration: none;
    color: var(--text-high);
}

.rv-sidebar-logo-mark {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: var(--color-primary);
    display: grid;
    place-items: center;
    color: white;
    font-family: var(--font-display);
    font-weight: var(--font-weight-extrabold);
    font-size: 18px;
    flex-shrink: 0;
}

.rv-sidebar-logo-text .rv-accent {
    color: var(--color-accent);
}

/* Nav: cuerpo scrolleable del sidebar */
.rv-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-3) var(--space-2);
}

.rv-sidebar-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rv-nav-group {
    margin-bottom: var(--space-4);
}

.rv-nav-group-label {
    display: block;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--text-low);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    white-space: nowrap;
}

.rv-nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    margin: 1px 0;
    border-radius: var(--radius-md);
    color: var(--text-mid);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    min-height: 36px;
    transition: background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
    white-space: nowrap;
    overflow: hidden;
}

.rv-nav-item:hover {
    background-color: var(--bg-surface-2);
    color: var(--text-high);
    text-decoration: none;
}

.rv-nav-item.is-active {
    background-color: var(--color-primary-soft);
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

/* Light: barra izquierda de acento en item activo */
[data-theme="light"] .rv-nav-item.is-active {
    background-color: rgba(79, 70, 229, 0.08);
    color: #4338CA;
    box-shadow: inset 3px 0 0 0 var(--color-primary);
}

[data-theme="dark"] .rv-nav-item.is-active {
    color: #A5B4FC;  /* indigo-300 para mejor contraste en dark */
    box-shadow: inset 3px 0 0 0 #818CF8;
}

.rv-nav-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: currentColor;
}

.rv-nav-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sidebar footer (user card) */
.rv-sidebar-footer {
    border-top: 1px solid var(--border-base);
    padding: var(--space-3);
    flex-shrink: 0;
}

.rv-user-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background-color: var(--bg-surface-2);
    min-width: 0;
    transition: background-color var(--transition-fast);
}

.rv-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    display: grid;
    place-items: center;
    color: white;
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    font-size: var(--text-sm);
    flex-shrink: 0;
}

.rv-user-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.rv-user-name {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-high);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rv-user-role {
    font-size: var(--text-xs);
    color: var(--text-low);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rv-user-logout {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-md);
    color: var(--text-mid);
    transition: background-color var(--transition-fast), color var(--transition-fast);
    flex-shrink: 0;
}

.rv-user-logout:hover {
    background-color: var(--bg-surface-2);
    color: var(--color-danger);
    text-decoration: none;
}

/* Sidebar colapsado (desktop) */
.rv-app[data-sidebar="collapsed"] .rv-sidebar-logo-text,
.rv-app[data-sidebar="collapsed"] .rv-nav-label,
.rv-app[data-sidebar="collapsed"] .rv-nav-group-label,
.rv-app[data-sidebar="collapsed"] .rv-user-info {
    display: none;
}

.rv-app[data-sidebar="collapsed"] .rv-nav-item {
    justify-content: center;
    padding: var(--space-2);
}

.rv-app[data-sidebar="collapsed"] .rv-sidebar-header {
    justify-content: center;
    padding: var(--space-3);
}

.rv-app[data-sidebar="collapsed"] .rv-user-card {
    justify-content: center;
}

/* Backdrop para cerrar sidebar en mobile */
.rv-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: calc(var(--z-fixed) - 1);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.rv-sidebar-backdrop.is-visible {
    display: block;
    opacity: 1;
}

/* =========================================================================
   MAIN
   ========================================================================= */

.rv-main {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;         /* crítico para overflow horizontal del contenido */
    height: 100vh;
    overflow-y: auto;
    background-color: var(--bg-base);
}

/* =========================================================================
   TOPBAR
   ========================================================================= */

.rv-topbar {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: 0 var(--space-6);
    height: var(--topbar-height);
    background-color: var(--bg-surface);
    border-bottom: 1px solid var(--border-base);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    flex-shrink: 0;
    backdrop-filter: saturate(180%) blur(6px);
    -webkit-backdrop-filter: saturate(180%) blur(6px);
}

/* Light topbar: fondo semi-transparente con blur para efecto moderno */
[data-theme="light"] .rv-topbar {
    background-color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.05);
}

/* Botón hamburger / toggle sidebar */
.rv-topbar-menu-toggle {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-md);
    color: var(--text-mid);
    transition: background-color var(--transition-fast), color var(--transition-fast);
    background: transparent;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}

.rv-topbar-menu-toggle:hover {
    background-color: var(--bg-surface-2);
    color: var(--text-high);
}

.rv-topbar-menu-toggle:active {
    transform: scale(0.95);
}

.rv-topbar-menu-toggle svg {
    width: 20px;
    height: 20px;
}

/* Breadcrumbs */
.rv-breadcrumbs {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-mid);
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.rv-breadcrumbs a {
    color: var(--text-mid);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transition-fast);
}

.rv-breadcrumbs a:hover {
    color: var(--text-high);
    text-decoration: none;
}

.rv-breadcrumbs-current {
    color: var(--text-high);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rv-breadcrumbs-separator {
    color: var(--text-low);
    font-size: var(--text-xs);
    flex-shrink: 0;
}

/* Topbar actions (derecha: theme toggle, iconos, avatar) */
.rv-topbar-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
    flex-shrink: 0;
}

.rv-topbar-date {
    font-size: var(--text-sm);
    color: var(--text-mid);
    white-space: nowrap;
    padding: 0 var(--space-3);
    border-right: 1px solid var(--border-base);
}

.rv-icon-button {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-md);
    color: var(--text-mid);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.rv-icon-button:hover {
    background-color: var(--bg-surface-2);
    color: var(--text-high);
}

.rv-icon-button:active {
    transform: scale(0.93);
}

.rv-icon-button svg {
    width: 20px;
    height: 20px;
}

/* Theme toggle: muestra moon en light y sun en dark */
[data-theme="dark"] .rv-theme-toggle-sun { display: block; }
[data-theme="dark"] .rv-theme-toggle-moon { display: none; }
[data-theme="light"] .rv-theme-toggle-sun { display: none; }
[data-theme="light"] .rv-theme-toggle-moon { display: block; }

/* =========================================================================
   CONTENT CONTAINER
   ========================================================================= */

.rv-content {
    flex: 1;
    padding: var(--content-padding);
    min-width: 0;
}

/* Contenedor máximo del contenido para pantallas anchas */
.rv-content-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    width: 100%;
}

/* =========================================================================
   FOOTER
   ========================================================================= */

.rv-footer {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--border-base);
    background-color: var(--bg-surface);
    color: var(--text-low);
    font-size: var(--text-xs);
}

.rv-footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    max-width: var(--container-max);
    margin: 0 auto;
}

.rv-footer a {
    color: var(--text-mid);
}

/* =========================================================================
   TOASTS (system_messages container)
   ========================================================================= */

.rv-toasts {
    position: fixed;
    top: calc(var(--topbar-height) + var(--space-4));
    right: var(--space-4);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: 380px;
    pointer-events: none;
    width: auto;
}

.rv-toasts > * {
    pointer-events: auto;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

@media (max-width: 1024px) {
    .rv-topbar-date {
        display: none;
    }
}

@media (max-width: 768px) {
    .rv-app {
        grid-template-columns: 1fr;
    }

    .rv-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        width: var(--sidebar-width);
        transform: translateX(-100%);
        transition: transform var(--transition-base);
        box-shadow: var(--shadow-xl);
    }

    .rv-app[data-sidebar="mobile-open"] .rv-sidebar {
        transform: translateX(0);
    }

    .rv-app[data-sidebar="mobile-open"] .rv-sidebar-backdrop {
        display: block;
        opacity: 1;
    }

    /* En mobile nunca colapsamos, o mostramos o ocultamos */
    .rv-app[data-sidebar="collapsed"] {
        grid-template-columns: 1fr;
    }
    .rv-app[data-sidebar="collapsed"] .rv-sidebar {
        transform: translateX(-100%);
    }

    .rv-content {
        padding: var(--space-4);
    }

    .rv-topbar {
        padding: 0 var(--space-4);
    }
}

@media (max-width: 480px) {
    .rv-breadcrumbs {
        font-size: var(--text-xs);
    }
}

/* =========================================================================
   FASE 2.3 — SISTEMA DE COMPONENTES
   Botones, cards, tablas, formularios, badges.
   Todas las clases usan el prefijo .rv-* para no colisionar con legacy.
   ========================================================================= */

/* -------------------------------------------------------------------------
   BOTONES
   ------------------------------------------------------------------------- */

.rv-btn {
    --btn-bg:       var(--bg-surface-2);
    --btn-bg-hover: var(--bg-elevated);
    --btn-color:    var(--text-high);
    --btn-border:   transparent;
    --btn-shadow:   none;
    --btn-shadow-hover: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0 var(--space-5);
    height: 38px;
    border-radius: var(--radius-md);
    border: 1px solid var(--btn-border);
    background-color: var(--btn-bg);
    color: var(--btn-color);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-tight);
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
    box-shadow: var(--btn-shadow);
    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

.rv-btn:hover {
    background-color: var(--btn-bg-hover);
    color: var(--btn-color);
    text-decoration: none;
    box-shadow: var(--btn-shadow-hover);
}

.rv-btn:active {
    transform: translateY(1px);
    box-shadow: none;
}

.rv-btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-glow-primary);
}

.rv-btn[disabled],
.rv-btn.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.rv-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Variantes */
.rv-btn--primary {
    --btn-bg:       var(--color-primary);
    --btn-bg-hover: var(--color-primary-hover);
    --btn-color:    var(--text-on-primary);
    --btn-shadow:   0 1px 2px rgba(79, 70, 229, 0.25);
    --btn-shadow-hover: 0 4px 12px rgba(79, 70, 229, 0.30);
}
.rv-btn--primary:active {
    background-color: var(--color-primary-active);
}

.rv-btn--secondary {
    --btn-bg:       var(--bg-surface);
    --btn-bg-hover: var(--bg-surface-2);
    --btn-color:    var(--text-high);
    --btn-border:   var(--border-strong);
    --btn-shadow:   var(--shadow-sm);
    --btn-shadow-hover: var(--shadow-md);
}

.rv-btn--ghost {
    --btn-bg:       transparent;
    --btn-bg-hover: var(--bg-surface-2);
    --btn-color:    var(--text-mid);
}
.rv-btn--ghost:hover {
    color: var(--text-high);
}

.rv-btn--danger {
    --btn-bg:       var(--color-danger);
    --btn-bg-hover: #E11D48;    /* rose-600 */
    --btn-color:    #FFFFFF;
    --btn-shadow:   0 1px 2px rgba(244, 63, 94, 0.25);
    --btn-shadow-hover: 0 4px 12px rgba(244, 63, 94, 0.30);
}

.rv-btn--success {
    --btn-bg:       var(--color-success);
    --btn-bg-hover: #059669;    /* emerald-600 */
    --btn-color:    #FFFFFF;
    --btn-shadow:   0 1px 2px rgba(16, 185, 129, 0.25);
    --btn-shadow-hover: 0 4px 12px rgba(16, 185, 129, 0.30);
}

.rv-btn--accent {
    --btn-bg:       var(--color-accent);
    --btn-bg-hover: var(--color-accent-hover);
    --btn-color:    var(--text-on-accent);
    --btn-shadow:   0 1px 2px rgba(6, 182, 212, 0.25);
    --btn-shadow-hover: 0 4px 12px rgba(6, 182, 212, 0.30);
}

/* Tamaños */
.rv-btn--sm {
    height: 30px;
    padding: 0 var(--space-3);
    font-size: var(--text-xs);
}

.rv-btn--lg {
    height: 46px;
    padding: 0 var(--space-6);
    font-size: var(--text-base);
}

/* Botón solo-icono (cuadrado) */
.rv-btn--icon {
    width: 38px;
    padding: 0;
}
.rv-btn--icon.rv-btn--sm { width: 30px; }
.rv-btn--icon.rv-btn--lg { width: 46px; }

/* Botón a ancho completo */
.rv-btn--block {
    display: flex;
    width: 100%;
}

/* Grupo horizontal de botones */
.rv-btn-group {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* -------------------------------------------------------------------------
   CARDS
   ------------------------------------------------------------------------- */

.rv-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-base);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.rv-card--elevated {
    box-shadow: var(--shadow-md);
    border-color: transparent;
}

.rv-card--interactive {
    cursor: pointer;
}
.rv-card--interactive:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-lg);
    transform: translateY(-1px);
}
.rv-card--interactive:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.rv-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-base);
}

.rv-card-title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--font-weight-bold);
    color: var(--text-high);
    margin: 0;
    line-height: var(--leading-tight);
}

.rv-card-subtitle {
    font-size: var(--text-sm);
    color: var(--text-mid);
    margin-top: var(--space-1);
}

.rv-card-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.rv-card-body {
    padding: var(--space-5);
    flex: 1;
}

.rv-card-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--border-base);
    background-color: var(--bg-surface-2);
}

/* Card KPI / Stat — para el dashboard (Fase 2.5) pero disponible ya */
.rv-stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-base);
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
}

.rv-stat::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: var(--color-primary);
}

.rv-stat--success::before { background: var(--color-success); }
.rv-stat--warning::before { background: var(--color-warning); }
.rv-stat--danger::before  { background: var(--color-danger); }
.rv-stat--info::before    { background: var(--color-info); }

.rv-stat-label {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--text-mid);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}

.rv-stat-value {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: var(--font-weight-extrabold);
    color: var(--text-high);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.rv-stat-delta {
    font-size: var(--text-xs);
    color: var(--text-mid);
}

.rv-stat-delta--up   { color: var(--color-success-text); }
.rv-stat-delta--down { color: var(--color-danger-text); }

/* -------------------------------------------------------------------------
   TABLAS
   ------------------------------------------------------------------------- */

/* Wrapper para scroll horizontal + bordes redondeados */
.rv-table-wrapper {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-base);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.rv-table-wrapper .rv-table-scroll {
    overflow-x: auto;
    width: 100%;
}

.rv-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--text-sm);
    color: var(--text-high);
}

.rv-table thead th {
    background-color: var(--bg-surface);
    color: var(--text-mid);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    text-align: left;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-base);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}

.rv-table tbody td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
}

.rv-table tbody tr:last-child td {
    border-bottom: none;
}

.rv-table tbody tr {
    transition: background-color var(--transition-fast);
}

.rv-table tbody tr:hover {
    background-color: var(--bg-surface-2);
}

/* Variante con filas zebra */
.rv-table--striped tbody tr:nth-child(even) {
    background-color: var(--bg-base);
}
.rv-table--striped tbody tr:hover {
    background-color: var(--bg-surface-2);
}

/* Variante compacta */
.rv-table--compact thead th,
.rv-table--compact tbody td {
    padding: var(--space-2) var(--space-3);
}

/* Columna numérica alineada a la derecha con cifras tabulares */
.rv-table .rv-col-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

/* Columna de acciones (iconos) */
.rv-table .rv-col-actions {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

/* Estado vacío dentro de una tabla */
.rv-table tbody .rv-table-empty td {
    padding: var(--space-10);
    text-align: center;
    color: var(--text-low);
    font-style: italic;
}

/* -------------------------------------------------------------------------
   FORMULARIOS
   ------------------------------------------------------------------------- */

.rv-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.rv-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
}

.rv-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.rv-label {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-mid);
    line-height: 1.2;
}

.rv-label .rv-required {
    color: var(--color-danger);
    margin-left: 2px;
}

/* Input, textarea, select base */
.rv-input,
.rv-textarea,
.rv-select {
    width: 100%;
    background-color: var(--bg-surface);
    color: var(--text-high);
    border: 1px solid var(--border-base);
    border-radius: var(--radius-md);
    padding: 0 var(--space-3);
    height: 38px;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: 1.2;
    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        background-color var(--transition-fast);
    appearance: none;
    -webkit-appearance: none;
}

.rv-textarea {
    height: auto;
    min-height: 100px;
    padding: var(--space-3);
    resize: vertical;
    font-family: var(--font-body);
    line-height: var(--leading-normal);
}

.rv-input::placeholder,
.rv-textarea::placeholder {
    color: var(--text-low);
}

.rv-input:hover,
.rv-textarea:hover,
.rv-select:hover {
    border-color: var(--border-strong);
}

.rv-input:focus,
.rv-textarea:focus,
.rv-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-glow-primary);
}

.rv-input[disabled],
.rv-textarea[disabled],
.rv-select[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    background-color: var(--bg-surface);
}

/* Chevron custom para select */
.rv-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 8 10 12 14 8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 16px 16px;
    padding-right: var(--space-8);
}

/* Tamaños */
.rv-input--sm,
.rv-select--sm { height: 30px; font-size: var(--text-xs); }
.rv-input--lg,
.rv-select--lg { height: 46px; font-size: var(--text-base); padding: 0 var(--space-4); }

/* Estado error */
.rv-input--error,
.rv-textarea--error,
.rv-select--error,
.rv-field.is-error .rv-input,
.rv-field.is-error .rv-textarea,
.rv-field.is-error .rv-select {
    border-color: var(--color-danger);
}

.rv-input--error:focus,
.rv-textarea--error:focus,
.rv-select--error:focus {
    box-shadow: 0 0 0 3px var(--color-danger-soft);
}

/* Mensajes de ayuda / error */
.rv-help {
    font-size: var(--text-xs);
    color: var(--text-low);
}

.rv-error-text {
    font-size: var(--text-xs);
    color: var(--color-danger-text);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

/* Input group (prefijo/sufijo) */
.rv-input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.rv-input-group .rv-input {
    border-radius: 0;
    flex: 1;
    min-width: 0;
}

.rv-input-group > :first-child { border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); }
.rv-input-group > :last-child  { border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }

.rv-input-group > * + * {
    border-left: 0;
}

.rv-input-addon {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-3);
    background-color: var(--bg-surface-2);
    border: 1px solid var(--border-base);
    color: var(--text-mid);
    font-size: var(--text-sm);
    white-space: nowrap;
}

/* Checkbox y radio custom */
.rv-check {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    user-select: none;
    font-size: var(--text-sm);
    color: var(--text-high);
}

.rv-check input[type="checkbox"],
.rv-check input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--border-strong);
    background-color: var(--bg-base);
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
    flex-shrink: 0;
    display: grid;
    place-items: center;
}

.rv-check input[type="checkbox"] { border-radius: var(--radius-sm); }
.rv-check input[type="radio"]    { border-radius: var(--radius-full); }

.rv-check input[type="checkbox"]:checked,
.rv-check input[type="radio"]:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.rv-check input[type="checkbox"]:checked::after {
    content: "";
    width: 10px;
    height: 10px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 8 7 12 13 4'/%3E%3C/svg%3E") center/contain no-repeat;
}

.rv-check input[type="radio"]:checked::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background-color: white;
}

.rv-check input[type="checkbox"]:focus-visible,
.rv-check input[type="radio"]:focus-visible {
    outline: none;
    box-shadow: var(--shadow-glow-primary);
}

/* Switch toggle */
.rv-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}
.rv-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.rv-switch-slider {
    position: absolute;
    inset: 0;
    background-color: var(--bg-elevated);
    border-radius: var(--radius-full);
    transition: background-color var(--transition-fast);
    cursor: pointer;
}
.rv-switch-slider::before {
    content: "";
    position: absolute;
    height: 16px;
    width: 16px;
    left: 3px;
    top: 3px;
    background: white;
    border-radius: var(--radius-full);
    transition: transform var(--transition-fast);
    box-shadow: var(--shadow-sm);
}
.rv-switch input:checked + .rv-switch-slider {
    background-color: var(--color-primary);
}
.rv-switch input:checked + .rv-switch-slider::before {
    transform: translateX(18px);
}

/* Acciones al pie de un formulario */
.rv-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-base);
}

/* -------------------------------------------------------------------------
   BADGES
   ------------------------------------------------------------------------- */

.rv-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    height: 22px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    white-space: nowrap;
    background-color: var(--bg-surface-2);
    color: var(--text-mid);
    border: 1px solid transparent;
}

.rv-badge svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.rv-badge--primary {
    background-color: var(--color-primary-soft);
    color: var(--text-link);
}
.rv-badge--success {
    background-color: var(--color-success-soft);
    color: var(--color-success-text);
}
.rv-badge--warning {
    background-color: var(--color-warning-soft);
    color: var(--color-warning-text);
}
.rv-badge--danger {
    background-color: var(--color-danger-soft);
    color: var(--color-danger-text);
}
.rv-badge--info {
    background-color: var(--color-info-soft);
    color: var(--color-info-text);
}
.rv-badge--neutral {
    background-color: var(--bg-surface-2);
    color: var(--text-mid);
}

/* Variante "dot" (solo círculo + label) */
.rv-badge--dot::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: currentColor;
    display: inline-block;
    flex-shrink: 0;
}

/* Badges de estado de reparación (ver BRANDING.md) — se usarán en Fase 4.
   Basados en color plano + texto blanco legible. */
.rv-status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-3);
    height: 24px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    white-space: nowrap;
    color: #FFFFFF;
    letter-spacing: var(--tracking-tight);
}

.rv-status-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.8);
    flex-shrink: 0;
}

.rv-status-badge--recibido                   { background-color: var(--wo-recibido); }
.rv-status-badge--en-diagnostico              { background-color: var(--wo-en-diagnostico); }
.rv-status-badge--presupuesto-pendiente       { background-color: var(--wo-presupuesto-pendiente); }
.rv-status-badge--presupuesto-enviado         { background-color: var(--wo-presupuesto-enviado); }
.rv-status-badge--presupuesto-aprobado        { background-color: var(--wo-presupuesto-aprobado); }
.rv-status-badge--presupuesto-rechazado       { background-color: var(--wo-presupuesto-rechazado); }
.rv-status-badge--esperando-repuestos         { background-color: var(--wo-esperando-repuestos); }
.rv-status-badge--en-reparacion               { background-color: var(--wo-en-reparacion); }
.rv-status-badge--reparado-pendiente-entrega  { background-color: var(--wo-reparado-pendiente-entrega); color: #0F172A; }
.rv-status-badge--reparado-pendiente-entrega::before { background: rgba(15, 23, 42, 0.6); }
.rv-status-badge--entregado                   { background-color: var(--wo-entregado); }
.rv-status-badge--no-reparable                { background-color: var(--wo-no-reparable); }
.rv-status-badge--abandonado                  { background-color: var(--wo-abandonado); }
.rv-status-badge--en-garantia                 { background-color: var(--wo-en-garantia); }
.rv-status-badge--cancelado                   { background-color: var(--wo-cancelado); }

/* -------------------------------------------------------------------------
   PAGINACIÓN
   ------------------------------------------------------------------------- */

.rv-pagination {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    list-style: none;
    padding: 0;
    margin: 0;
}

.rv-pagination-item {
    min-width: 34px;
    height: 34px;
    padding: 0 var(--space-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    color: var(--text-mid);
    background: transparent;
    border: 1px solid transparent;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.rv-pagination-item:hover {
    background-color: var(--bg-surface-2);
    color: var(--text-high);
    text-decoration: none;
    border-color: var(--border-base);
}

.rv-pagination-item.is-active {
    background-color: var(--color-primary);
    color: var(--text-on-primary);
}

.rv-pagination-item.is-disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* -------------------------------------------------------------------------
   EMPTY STATE
   ------------------------------------------------------------------------- */

.rv-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-12) var(--space-6);
    text-align: center;
    color: var(--text-mid);
}

.rv-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background-color: var(--bg-surface-2);
    display: grid;
    place-items: center;
    color: var(--text-low);
    margin-bottom: var(--space-2);
}

.rv-empty-icon svg {
    width: 28px;
    height: 28px;
}

.rv-empty-title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--font-weight-bold);
    color: var(--text-high);
    margin: 0;
}

.rv-empty-description {
    font-size: var(--text-sm);
    color: var(--text-mid);
    max-width: 420px;
    margin: 0;
}

.rv-empty-actions {
    margin-top: var(--space-3);
}

/* -------------------------------------------------------------------------
   PAGE HEADER (título de página + acciones)
   ------------------------------------------------------------------------- */

.rv-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}

.rv-page-title {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: var(--font-weight-extrabold);
    color: var(--text-high);
    letter-spacing: var(--tracking-tight);
    margin: 0;
    line-height: var(--leading-tight);
}

.rv-page-subtitle {
    color: var(--text-mid);
    font-size: var(--text-sm);
    margin-top: var(--space-1);
}

.rv-page-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

/* =========================================================================
   FASE 2.1 — COMPAT LAYER (heredado)
   Overrides mínimos al CSS legacy de legacy para que las páginas internas
   (que siguen siendo tablas feas) al menos no se vean "naked" dentro del
   nuevo app shell.
   ========================================================================= */

/* legacy usa <table> para layouts de contenido. Fondo transparente dentro
   del .rv-content para que no haya "cajas blancas" feas sobre el dark. */
.rv-content table {
    background-color: transparent;
    color: var(--text-high);
}

/* Headers de tabla legacy */
td.menuhead,
td.menuhead2,
.rv-content th {
    background-color: var(--bg-surface);
    color: var(--text-high);
    font-family: var(--font-display);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-tight);
    padding: var(--space-3);
    font-size: var(--text-sm);
    text-align: left;
}

.menutd,
.menutd2 {
    background-color: var(--bg-surface);
    color: var(--text-high);
    padding: var(--space-3);
}

/* Wrapper de panel tipo "card" heredado */
.olotable {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-base);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* Las tablas "menutable" son el listado de registros. Le damos look de
   .rv-table sin tener que tocar los .tpl. */
.rv-content table.menutable {
    background-color: var(--bg-surface);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.rv-content table.menutable tr:hover td {
    background-color: var(--bg-surface-2);
    transition: background-color var(--transition-fast);
}

/* Filas zebra en tablas legacy */
.rv-content table.menutable tr:nth-child(even) td {
    background-color: rgba(148, 163, 184, 0.04);
}

/* Clases de celdas inputs legacy */
.rv-content .olotd4,
.rv-content .olotd5 {
    background-color: var(--bg-base);
    color: var(--text-high);
    border: 1px solid var(--border-base);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-body);
    font-size: var(--text-sm);
}

.rv-content .olotd4:focus,
.rv-content .olotd5:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-glow-primary);
}

/* Inputs legacy */
.rv-content input[type="text"],
.rv-content input[type="email"],
.rv-content input[type="password"],
.rv-content input[type="number"],
.rv-content input[type="tel"],
.rv-content input[type="url"],
.rv-content input[type="search"],
.rv-content input[type="date"],
.rv-content input[type="time"],
.rv-content textarea,
.rv-content select {
    background-color: var(--bg-surface);
    color: var(--text-high);
    border: 1px solid var(--border-base);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    font-family: var(--font-body);
    font-size: var(--text-sm);
}

.rv-content input[type="text"]:focus,
.rv-content input[type="email"]:focus,
.rv-content input[type="password"]:focus,
.rv-content input[type="number"]:focus,
.rv-content input[type="tel"]:focus,
.rv-content input[type="url"]:focus,
.rv-content input[type="search"]:focus,
.rv-content input[type="date"]:focus,
.rv-content input[type="time"]:focus,
.rv-content textarea:focus,
.rv-content select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-glow-primary);
}

/* Botones de formulario legacy */
.rv-content input[type="submit"],
.rv-content input[type="button"],
.rv-content button[type="submit"],
.rv-content button[type="button"] {
    background-color: var(--color-primary);
    color: var(--text-on-primary);
    border: none;
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-5);
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-sm);
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(79, 70, 229, 0.25);
    transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.rv-content input[type="submit"]:hover,
.rv-content input[type="button"]:hover,
.rv-content button[type="submit"]:hover,
.rv-content button[type="button"]:hover {
    background-color: var(--color-primary-hover);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.30);
}

.rv-content input[type="submit"]:active,
.rv-content input[type="button"]:active,
.rv-content button[type="submit"]:active,
.rv-content button[type="button"]:active {
    background-color: var(--color-primary-active);
    transform: translateY(1px);
    box-shadow: none;
}

/* Labels legacy */
.rv-content label {
    color: var(--text-mid);
    font-weight: var(--font-weight-medium);
    font-size: var(--text-sm);
}

/* Enlaces legacy */
.rv-content a {
    color: var(--text-link);
}

.rv-content a:hover {
    color: var(--text-link-hover);
}

/* Override inline bgcolor attributes que legacy hardcodea en HTML */
.rv-content td[bgcolor],
.rv-content th[bgcolor],
.rv-content tr[bgcolor],
.rv-content table[bgcolor] {
    background-color: var(--bg-surface) !important;
    color: var(--text-high) !important;
}

/* Botons legacy dins .rv-content: espaiat i marges adequats */
.rv-content input[type="submit"],
.rv-content input[type="button"],
.rv-content button[type="submit"],
.rv-content button[type="button"] {
    margin: var(--space-2) var(--space-1);
    min-height: 36px;
    vertical-align: middle;
}

/* Grup de botons al peu de formularis legacy */
.rv-content td > input[type="submit"] + input[type="submit"],
.rv-content td > input[type="submit"] + input[type="button"],
.rv-content td > input[type="button"] + input[type="submit"],
.rv-content td > input[type="button"] + input[type="button"],
.rv-content td > button + button {
    margin-left: var(--space-2);
}

/* Taules legacy: millor espaiat de cel·les */
.rv-content td {
    padding: var(--space-2) var(--space-3);
    vertical-align: middle;
}

/* Capçaleres de secció legacy (olohead, menuhead2) dins content */
.rv-content .olohead,
.rv-content .menuhead2 {
    border-radius: var(--radius-sm);
}

/* Imatges dins taules legacy: no desbordar */
.rv-content img {
    max-width: 100%;
    height: auto;
}

/* Selecte dins taules: millor look */
.rv-content select {
    min-height: 32px;
    cursor: pointer;
}

/* =========================================================================
   FASE 4.2 — INTAKE FORM COMPONENTS
   ========================================================================= */

/* Card genérica (para secciones del formulario de recepción) */
.rv-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-base);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.rv-card-header {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-base);
    background-color: var(--bg-surface);
}

.rv-card-title {
    font-family: var(--font-display);
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-base);
    color: var(--text-high);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
}

.rv-card-title svg {
    color: var(--text-mid);
}

.rv-card-body {
    padding: var(--space-5);
}

/* Form elements para formularios Revio (fuera del .rv-content legacy wrapper) */
.rv-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.rv-form-label {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-mid);
}

.rv-form-input,
.rv-form-select,
.rv-form-textarea {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background-color: var(--bg-surface-2);
    border: 1px solid var(--border-base);
    border-radius: var(--radius-md);
    color: var(--text-high);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    outline: none;
}

.rv-form-input::placeholder,
.rv-form-textarea::placeholder {
    color: var(--text-low);
}

.rv-form-input:focus,
.rv-form-select:focus,
.rv-form-textarea:focus {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-glow-primary);
}

.rv-form-select {
    appearance: auto;
    cursor: pointer;
}

.rv-form-textarea {
    resize: vertical;
    min-height: 60px;
}

/* =========================================================================
   FASE 4.3 — DETAIL PAGE: TIMELINE + RESPONSIVE
   ========================================================================= */

/* Timeline (historial de cambios) */
.rv-timeline {
    padding: var(--space-4) var(--space-5);
}

.rv-timeline-item {
    position: relative;
    padding-left: var(--space-5);
    padding-bottom: var(--space-4);
    border-left: 2px solid var(--border-base);
    margin-left: 4px;
}

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

.rv-timeline-dot {
    position: absolute;
    left: -5px;
    top: 2px;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background-color: var(--color-primary);
    border: 2px solid var(--bg-surface);
}

.rv-timeline-time {
    font-size: var(--text-xs);
    color: var(--text-low);
    font-family: var(--font-mono);
}

.rv-timeline-text {
    font-size: var(--text-sm);
    color: var(--text-mid);
    margin-top: var(--space-1);
    line-height: 1.4;
}

/* Responsive: detail page grid colapsa en móvil */
@media (max-width: 900px) {
    .rv-detail-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================================
   FASE 2.4 + 2.5 — LOGIN PAGE
   ========================================================================= */

/* Full-screen auth wrapper — standalone, no sidebar */
.rv-auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-base);
    position: relative;
    overflow: hidden;
    padding: var(--space-4);
}

/* Subtle grid background decoration */
.rv-auth::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 25% 25%, rgba(79, 70, 229, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(6, 182, 212, 0.06) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

[data-theme="light"] .rv-auth::before {
    background-image:
        radial-gradient(circle at 25% 25%, rgba(79, 70, 229, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(6, 182, 212, 0.04) 0%, transparent 50%);
}

/* Grid pattern overlay */
.rv-auth::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
    z-index: 0;
}

[data-theme="light"] .rv-auth::after {
    background-image:
        linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
}

/* Auth card container */
.rv-auth-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-base);
    border-radius: var(--radius-xl);
    padding: var(--space-10) var(--space-8);
    box-shadow: var(--shadow-xl);
}

@media (max-width: 480px) {
    .rv-auth-card {
        padding: var(--space-8) var(--space-5);
        border-radius: var(--radius-lg);
    }
}

/* Auth header (logo + tagline) */
.rv-auth-header {
    text-align: center;
    margin-bottom: var(--space-8);
}

.rv-auth-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    color: var(--text-high);
    font-family: var(--font-display);
    font-weight: var(--font-weight-extrabold);
    font-size: var(--text-3xl);
    letter-spacing: var(--tracking-wide);
    margin-bottom: var(--space-3);
}

.rv-auth-logo:hover {
    text-decoration: none;
    color: var(--text-high);
}

.rv-auth-logo-mark {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    background: var(--color-primary);
    display: grid;
    place-items: center;
    color: white;
    font-family: var(--font-display);
    font-weight: var(--font-weight-extrabold);
    font-size: 24px;
    flex-shrink: 0;
}

.rv-auth-tagline {
    color: var(--text-mid);
    font-size: var(--text-sm);
    margin-top: var(--space-2);
}

/* Auth form */
.rv-auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.rv-auth-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.rv-auth-label {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-mid);
}

.rv-auth-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.rv-auth-input-icon {
    position: absolute;
    left: var(--space-3);
    width: 18px;
    height: 18px;
    color: var(--text-low);
    pointer-events: none;
    transition: color var(--transition-fast);
}

.rv-auth-input-wrapper:focus-within .rv-auth-input-icon {
    color: var(--color-primary);
}

.rv-auth-input {
    width: 100%;
    padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-3) + 18px + var(--space-3));
    background-color: var(--bg-surface-2);
    border: 1px solid var(--border-base);
    border-radius: var(--radius-md);
    color: var(--text-high);
    font-family: var(--font-body);
    font-size: var(--text-base);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    outline: none;
}

.rv-auth-input::placeholder {
    color: var(--text-low);
}

.rv-auth-input:focus {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-glow-primary);
}

/* Toggle password visibility button */
.rv-auth-toggle-pw {
    position: absolute;
    right: var(--space-3);
    background: none;
    border: none;
    padding: var(--space-1);
    color: var(--text-low);
    cursor: pointer;
    transition: color var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.rv-auth-toggle-pw:hover {
    color: var(--text-mid);
    background: none;
}

.rv-auth-toggle-pw svg {
    width: 18px;
    height: 18px;
}

/* Remember me row */
.rv-auth-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.rv-auth-remember {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
}

.rv-auth-remember input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.rv-auth-remember span {
    font-size: var(--text-sm);
    color: var(--text-mid);
}

.rv-auth-forgot {
    font-size: var(--text-sm);
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.rv-auth-forgot:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

/* Auth submit button */
.rv-auth-submit {
    width: 100%;
    padding: var(--space-3) var(--space-6);
    background-color: var(--color-primary);
    color: var(--text-on-primary);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-base);
    cursor: pointer;
    transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.rv-auth-submit:hover {
    background-color: var(--color-primary-hover);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
}

.rv-auth-submit:active {
    background-color: var(--color-primary-active);
    transform: translateY(1px);
}

.rv-auth-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.rv-auth-submit svg {
    width: 18px;
    height: 18px;
}

/* Auth secondary button (logout) */
.rv-auth-logout {
    width: 100%;
    padding: var(--space-3) var(--space-6);
    background-color: transparent;
    color: var(--text-high);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-weight: var(--font-weight-medium);
    font-size: var(--text-base);
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    text-decoration: none;
}

.rv-auth-logout:hover {
    background-color: var(--bg-surface-2);
    border-color: var(--color-danger);
    color: var(--color-danger);
    text-decoration: none;
}

.rv-auth-logout svg {
    width: 18px;
    height: 18px;
}

/* Auth footer text */
.rv-auth-footer {
    text-align: center;
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border-base);
}

.rv-auth-footer-text {
    font-size: var(--text-xs);
    color: var(--text-low);
}

/* Auth separator */
.rv-auth-separator {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    color: var(--text-low);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}

.rv-auth-separator::before,
.rv-auth-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--border-base);
}

/* reCAPTCHA container */
.rv-auth-recaptcha {
    display: flex;
    justify-content: center;
    margin-top: var(--space-2);
}

/* =========================================================================
   FASE 2.5 — WELCOME / HOME (pre-login)
   ========================================================================= */

.rv-welcome {
    text-align: center;
}

.rv-welcome-title {
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    font-size: var(--text-xl);
    color: var(--text-high);
    margin-bottom: var(--space-2);
}

.rv-welcome-subtitle {
    font-size: var(--text-sm);
    color: var(--text-mid);
    margin-bottom: var(--space-6);
}

.rv-welcome-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-8);
    background-color: var(--color-primary);
    color: var(--text-on-primary);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-base);
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.rv-welcome-btn:hover {
    background-color: var(--color-primary-hover);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
    text-decoration: none;
    color: var(--text-on-primary);
}

.rv-welcome-btn:active {
    transform: translateY(1px);
}

.rv-welcome-btn svg {
    width: 18px;
    height: 18px;
}

/* =========================================================================
   FASE 2.5 — DASHBOARD
   ========================================================================= */

/* KPI row */
.rv-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-5);
    margin-bottom: var(--space-6);
}

@media (max-width: 600px) {
    .rv-kpi-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-3);
    }
}

.rv-kpi-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-base);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.rv-kpi-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.rv-kpi-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rv-kpi-label {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-mid);
}

.rv-kpi-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.rv-kpi-icon svg {
    width: 18px;
    height: 18px;
}

.rv-kpi-icon--primary { background-color: rgba(79, 70, 229, 0.12); color: var(--color-primary); }
.rv-kpi-icon--accent  { background-color: rgba(6, 182, 212, 0.12);  color: var(--color-accent); }
.rv-kpi-icon--success { background-color: rgba(16, 185, 129, 0.12); color: var(--color-success); }
.rv-kpi-icon--warning { background-color: rgba(245, 158, 11, 0.12); color: var(--color-warning); }
.rv-kpi-icon--danger  { background-color: rgba(244, 63, 94, 0.12);  color: var(--color-danger); }
.rv-kpi-icon--info    { background-color: rgba(14, 165, 233, 0.12); color: var(--color-info); }

.rv-kpi-value {
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    font-size: var(--text-3xl);
    color: var(--text-high);
    line-height: 1;
}

.rv-kpi-trend {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
}

.rv-kpi-trend svg {
    width: 14px;
    height: 14px;
}

.rv-kpi-trend--up { color: var(--color-success); }
.rv-kpi-trend--down { color: var(--color-danger); }

/* Dashboard section headers */
.rv-dash-section {
    margin-bottom: var(--space-6);
}

.rv-dash-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-base);
}

.rv-dash-section-title {
    font-family: var(--font-display);
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-lg);
    color: var(--text-high);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.rv-dash-section-title svg {
    width: 20px;
    height: 20px;
    color: var(--text-mid);
}

.rv-dash-section-badge {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    background-color: var(--bg-surface-2);
    color: var(--text-mid);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    min-width: 24px;
    text-align: center;
}

/* Dashboard grid layout */
.rv-dash-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
}

@media (max-width: 900px) {
    .rv-dash-grid {
        grid-template-columns: 1fr;
    }
}

/* Dashboard welcome banner */
.rv-dash-welcome {
    background: linear-gradient(135deg, var(--color-primary) 0%, rgba(6, 182, 212, 0.8) 100%);
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-8);
    margin-bottom: var(--space-6);
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
}

@media (max-width: 600px) {
    .rv-dash-welcome {
        flex-direction: column;
        text-align: center;
        padding: var(--space-5);
    }
}

.rv-dash-welcome-text h2 {
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    font-size: var(--text-2xl);
    margin-bottom: var(--space-1);
    color: white;
}

.rv-dash-welcome-text p {
    font-size: var(--text-sm);
    opacity: 0.85;
    color: white;
}

.rv-dash-welcome-actions {
    display: flex;
    gap: var(--space-3);
    flex-shrink: 0;
}

.rv-dash-welcome-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-5);
    background-color: rgba(255,255,255,0.2);
    color: white;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-sm);
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--transition-fast);
    white-space: nowrap;
}

.rv-dash-welcome-btn:hover {
    background-color: rgba(255,255,255,0.3);
    text-decoration: none;
    color: white;
}

.rv-dash-welcome-btn svg {
    width: 16px;
    height: 16px;
}

/* Quick stats mini bar */
.rv-stat-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
}

.rv-stat-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-base);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    color: var(--text-mid);
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.rv-stat-chip:hover {
    background-color: var(--bg-surface-2);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: var(--text-high);
    transform: translateY(-1px);
}

.rv-stat-chip:active {
    transform: translateY(0);
}

.rv-stat-chip-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.rv-stat-chip-count {
    font-weight: var(--font-weight-semibold);
    color: var(--text-high);
}

/* Dashboard empty state */
.rv-dash-empty {
    text-align: center;
    padding: var(--space-8) var(--space-4);
    color: var(--text-low);
}

.rv-dash-empty svg {
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-3);
    opacity: 0.4;
}

.rv-dash-empty-title {
    font-weight: var(--font-weight-medium);
    font-size: var(--text-base);
    color: var(--text-mid);
    margin-bottom: var(--space-1);
}

.rv-dash-empty-text {
    font-size: var(--text-sm);
}

/* Dashboard workorder mini-cards */
.rv-wo-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.rv-wo-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-base);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--text-high);
    transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.rv-wo-item:hover {
    background-color: var(--bg-surface-2);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: var(--text-high);
}

.rv-wo-item-id {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    white-space: nowrap;
}

.rv-wo-item-client {
    flex: 1;
    font-size: var(--text-sm);
    color: var(--text-mid);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rv-wo-item-badge {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    white-space: nowrap;
}

/* Customer dashboard */
.rv-customer-dash {
    text-align: center;
    padding: var(--space-8) 0;
}

.rv-customer-dash-icon {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    background-color: rgba(79, 70, 229, 0.1);
    color: var(--color-primary);
    display: grid;
    place-items: center;
    margin: 0 auto var(--space-5);
}

.rv-customer-dash-icon svg {
    width: 36px;
    height: 36px;
}

.rv-customer-dash h2 {
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    font-size: var(--text-2xl);
    color: var(--text-high);
    margin-bottom: var(--space-2);
}

.rv-customer-dash p {
    font-size: var(--text-base);
    color: var(--text-mid);
    margin-bottom: var(--space-6);
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.rv-customer-dash-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    max-width: 300px;
    margin: 0 auto;
}

/* =========================================================================
   POLISH — LIGHT MODE REFINEMENTS & UX FEEDBACK
   ========================================================================= */

/* Sidebar logo mark en light: sombra sutil */
[data-theme="light"] .rv-sidebar-logo-mark {
    box-shadow: 0 2px 6px rgba(79, 70, 229, 0.25);
}

/* Auth logo mark en light: sombra sutil */
[data-theme="light"] .rv-auth-logo-mark {
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25);
}

/* Cards en light: sombra sutil para dar profundidad */
[data-theme="light"] .rv-card {
    box-shadow: var(--shadow-sm);
}

[data-theme="light"] .rv-card--elevated {
    box-shadow: var(--shadow-lg);
}

/* KPI cards en light: base con sombra sutil */
[data-theme="light"] .rv-kpi-card {
    box-shadow: var(--shadow-sm);
}

/* Table wrapper en light */
[data-theme="light"] .rv-table-wrapper {
    box-shadow: var(--shadow-sm);
}

/* Stat cards en light */
[data-theme="light"] .rv-stat {
    box-shadow: var(--shadow-sm);
}

/* Auth card en light: sombra más pronunciada */
[data-theme="light"] .rv-auth-card {
    box-shadow: 0 20px 40px -8px rgba(15, 23, 42, 0.10), 0 8px 16px -8px rgba(15, 23, 42, 0.06);
}

/* Auth input en light: fondo blanco */
[data-theme="light"] .rv-auth-input {
    background-color: #FFFFFF;
}

/* Form inputs de Revio (fase 4.2) en light */
[data-theme="light"] .rv-form-input,
[data-theme="light"] .rv-form-select,
[data-theme="light"] .rv-form-textarea {
    background-color: #FFFFFF;
}

/* Legacy olotable card en light */
[data-theme="light"] .olotable {
    box-shadow: var(--shadow-sm);
}

/* Legacy inputs en light: fondo blanco */
[data-theme="light"] .rv-content input[type="text"],
[data-theme="light"] .rv-content input[type="email"],
[data-theme="light"] .rv-content input[type="password"],
[data-theme="light"] .rv-content input[type="number"],
[data-theme="light"] .rv-content input[type="tel"],
[data-theme="light"] .rv-content input[type="url"],
[data-theme="light"] .rv-content input[type="search"],
[data-theme="light"] .rv-content input[type="date"],
[data-theme="light"] .rv-content input[type="time"],
[data-theme="light"] .rv-content textarea,
[data-theme="light"] .rv-content select {
    background-color: #FFFFFF;
}

/* Dashboard welcome banner: más contraste en light */
[data-theme="light"] .rv-dash-welcome {
    box-shadow: 0 4px 16px rgba(79, 70, 229, 0.20);
}

/* Footer en light: más sutil */
[data-theme="light"] .rv-footer {
    background-color: var(--bg-surface-2);
    border-top-color: transparent;
}

/* Breadcrumbs current: color más fuerte en light */
[data-theme="light"] .rv-breadcrumbs-current {
    color: #0F172A;
}

/* Logout button en sidebar: hover peligro más claro */
[data-theme="light"] .rv-user-logout:hover {
    background-color: rgba(244, 63, 94, 0.08);
}

/* =========================================================================
   LEGACY CONFIG PAGE — Layout responsiu i modern
   ========================================================================= */

/* Taules de configuració: amplada completa i millor espaiat */
.rv-content table[width="600"],
.rv-content table.olotable[width="600"] {
    width: 100% !important;
    max-width: 100%;
}

/* Seccions de config: cards amb capçalera */
.rv-content .olotable .menuhead {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: var(--font-weight-bold);
    padding: var(--space-3) var(--space-4);
    color: var(--text-high);
    border-bottom: 2px solid var(--color-primary);
    background: var(--bg-surface-2);
    letter-spacing: 0;
    text-transform: none;
}

/* Files de formulari dins config: 2 columnes en desktop */
.rv-content .olotable td[align="right"] {
    white-space: nowrap;
    min-width: 180px;
    padding: var(--space-3) var(--space-4);
    vertical-align: middle;
    text-align: right;
    color: var(--text-mid);
    font-size: var(--text-sm);
}

.rv-content .olotable td[align="right"] b {
    color: var(--text-high);
    font-weight: var(--font-weight-medium);
}

/* Inputs dins config: amplada adequada */
.rv-content .olotable .olotd5 {
    min-height: 36px;
    padding: var(--space-2) var(--space-3);
}

.rv-content .olotable select.olotd5 {
    min-width: 100px;
    cursor: pointer;
}

.rv-content .olotable input.olotd5[type="text"],
.rv-content .olotable input.olotd5[type="email"],
.rv-content .olotable input.olotd5[type="password"] {
    width: 100%;
    max-width: 400px;
}

/* Files zebra dins config */
.rv-content .olotable tr {
    border-bottom: 1px solid var(--border-subtle);
}

.rv-content .olotable tr.row2 {
    border-bottom: none;
}

/* Botons al peu de config */
.rv-content .olotable input[type="submit"],
.rv-content .olotable button {
    margin: var(--space-2) var(--space-1);
}

/* Icones d'ajuda legacy: millor posicionament */
.rv-content .olotable img[src*="help.gif"] {
    vertical-align: middle;
    margin-left: var(--space-2);
    opacity: 0.6;
    transition: opacity var(--transition-fast);
    cursor: help;
}

.rv-content .olotable img[src*="help.gif"]:hover {
    opacity: 1;
}

/* Responsive: config en 1 columna a mòbil */
@media (max-width: 768px) {
    .rv-content .olotable td[align="right"] {
        display: block;
        text-align: left;
        min-width: 0;
        padding-bottom: var(--space-1);
        white-space: normal;
    }

    .rv-content .olotable td[align="right"] + td {
        display: block;
        padding-top: 0;
        padding-bottom: var(--space-3);
    }

    .rv-content .olotable tr {
        display: block;
        padding: var(--space-2) 0;
    }

    .rv-content .olotable input.olotd5[type="text"],
    .rv-content .olotable input.olotd5[type="email"],
    .rv-content .olotable input.olotd5[type="password"] {
        max-width: 100%;
    }
}

/* =========================================================================
   LEGACY SEARCH/FILTER — Millorar espaiat de filtres
   ========================================================================= */

/* Filtres i selects de cerca: millor alineació */
.rv-content select {
    min-height: 34px;
    padding: var(--space-1) var(--space-2);
}

/* Botons de cerca i reset: espaiat */
.rv-content input[type="submit"][value*="earch"],
.rv-content input[type="submit"][value*="erca"],
.rv-content input[type="submit"][value*="eset"],
.rv-content input[type="submit"][value*="establir"] {
    margin: var(--space-2) var(--space-1);
}

/* Paginació legacy: millor estil */
.rv-content td[align="center"] > b,
.rv-content td[align="center"] > a {
    display: inline-block;
    padding: var(--space-1) var(--space-2);
}

/* Taules de llistat: files hoverable amb transició */
.rv-content table.menutable td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
}

/* =========================================================================
   MÒDUL AGENDA — Layout modern i responsiu
   ========================================================================= */

/* Layout 2 columnes: sidebar (calendari) + main (matriu horària) */
.rv-schedule-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--space-5);
    align-items: start;
}

.rv-schedule-sidebar {
    position: sticky;
    top: calc(var(--topbar-height) + var(--space-4));
}

.rv-schedule-main {
    min-width: 0;
}

/* Sobreescriure la taula generada pel PHP buildCalendarMatrix() */
.rv-schedule-main .olotable {
    width: 100% !important;
    border: none !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* Capçalera de la matriu: ocultar (és buida) */
.rv-schedule-main .olotable .olohead {
    display: none;
}

/* Files de la matriu: estil net */
.rv-schedule-main .olotable tr {
    transition: background-color var(--transition-fast);
}

/* Cel·les buides (franges horàries disponibles) */
.rv-schedule-main .olotable td.olotd {
    background: var(--bg-surface) !important;
    border: none !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    padding: var(--space-2) var(--space-3) !important;
    font-size: var(--text-sm);
    color: var(--text-mid);
    cursor: default;
    vertical-align: middle;
}

/* Hora en punt: destacar */
.rv-schedule-main .olotable td.olotd b {
    color: var(--text-high);
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-sm);
}

/* Cel·la buida primera columna (hora): amplada fixa */
.rv-schedule-main .olotable td.olotd:first-child {
    width: 70px;
    min-width: 70px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

/* Cel·les amb cita programada */
.rv-schedule-main .olotable td.menutd2 {
    background: var(--color-primary-soft) !important;
    border: none !important;
    border-bottom: 1px solid var(--border-base) !important;
    border-left: 3px solid var(--color-primary) !important;
    padding: var(--space-3) var(--space-4) !important;
    color: var(--text-high);
}

/* Hora de la cita (primera columna) */
.rv-schedule-main .olotable td.menutd2:first-child {
    width: 70px;
    min-width: 70px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    vertical-align: middle;
}

.rv-schedule-main .olotable td.menutd2:first-child span[style*="green"] {
    color: var(--color-primary) !important;
    font-weight: var(--font-weight-semibold);
}

/* Contingut de la cita: sobreescriure estils inline del PHP */
.rv-schedule-main .olotable td.menutd2 font[color="red"],
.rv-schedule-main .olotable td.menutd2 font[color="red"] b {
    color: var(--text-high) !important;
    font-size: var(--text-sm);
}

.rv-schedule-main .olotable td.menutd2 div[style*="blue"] {
    color: var(--text-mid) !important;
    font-weight: var(--font-weight-regular) !important;
    font-size: var(--text-sm);
    margin: var(--space-2) 0;
    padding: var(--space-2) var(--space-3);
    background: var(--bg-surface);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
}

/* Enllaços d'accions dins la cita */
.rv-schedule-main .olotable td.menutd2 a {
    color: var(--text-link);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast);
}

.rv-schedule-main .olotable td.menutd2 a:hover {
    background-color: var(--bg-surface-2);
    text-decoration: none;
}

/* Files clickables (quan s'assigna a una reparació) */
.rv-schedule-main .olotable td.olotd[onclick] {
    cursor: pointer;
}

.rv-schedule-main .olotable td.olotd[onclick]:hover {
    background-color: var(--color-primary-soft) !important;
}

/* =========================================================================
   JSCAL2 CALENDAR — Ajustos addicionals sobre el jscal2.css reescrit
   ========================================================================= */

/* Contenidor del calendari dins la sidebar de l'agenda */
.rv-schedule-sidebar .DynarchCalendar {
    width: 100% !important;
    max-width: 100%;
    border: none;
    box-shadow: none;
    border-radius: 0;
}

/* =========================================================================
   MATRIU HORÀRIA — Millores finals
   ========================================================================= */

/* La barra header de la matriu (olohead) — fer-la invisible */
.rv-schedule-main .olotable > tbody > tr:first-child,
.rv-schedule-main .olotable > tr:first-child {
    display: none !important;
}

/* Responsive: 1 columna en mòbil */
@media (max-width: 768px) {
    .rv-schedule-layout {
        grid-template-columns: 1fr;
    }

    .rv-schedule-sidebar {
        position: static;
    }
}

@media (max-width: 480px) {
    .rv-schedule-main .olotable td.olotd:first-child,
    .rv-schedule-main .olotable td.menutd2:first-child {
        width: 55px;
        min-width: 55px;
        font-size: 10px;
    }
}