/* ========================================
   SCAN AS YOU SHOP - ESTILOS MODERNOS
   ======================================== */

/* Variables CSS */
:root {
    --primary: #7851A9;
    --primary-light: #9370DB;
    --primary-dark: #5B3A87;
    --primary-darker: #4A2C6F;
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --white: #ffffff;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-purple: 0 4px 15px 0 rgba(120, 81, 169, 0.3);
    --footer-height: 80px;
    --ios-header-touch-offset: 0px;
}

/* iPhone/iOS: pequeño margen extra para que el botón menú no quede bajo iconos del sistema */
@supports (-webkit-touch-callout: none) {
    html,
    body {
        background-color: var(--white);
    }

    :root {
        --ios-header-touch-offset: 12px;
    }

    /* iPhone/iOS: separa controles de la zona de bateria/hora */
    .menu-header {
        padding-top: calc(1.5rem + min(env(safe-area-inset-top, 0px), 28px));
    }

    .close-menu-btn {
        margin-top: 0.35rem;
    }

    /* Panel de control: sin hueco inferior y fondo blanco continuo */
    #panelControlScreen .screen-content {
        background: var(--white);
        display: flex;
        flex-direction: column;
        padding-bottom: 0;
    }

    #panelControlScreen .herramientas-actions {
        margin-top: auto;
        padding-bottom: 0;
    }

    #panelControlScreen .panel-control-global-config {
        background: var(--white);
        padding-bottom: max(0px, env(safe-area-inset-bottom));
    }
}

/* Reset y Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    background-color: var(--white);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--white); /* Evita franja morada visible en rebote iOS PWA */
    color: var(--gray-900);
    line-height: 1.6;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    /* Asegurar que comienza desde el top */
    position: relative;
}

/* ========================================
   LAYOUT PRINCIPAL
   ======================================== */
/* Justo debajo del header */
.app-container {
    position: fixed;
    top: calc(52px + 0.5rem + min(env(safe-area-inset-top, 0px), 32px) + var(--ios-header-touch-offset));
    bottom: var(--footer-height);
    left: 0;
    right: 0;
    overflow: hidden;
    background-color: var(--gray-50); /* Fondo gris para el contenido */
}

.screen {
    display: none;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background-color: var(--gray-50); /* Fondo gris para las pantallas */
}

.screen.active {
    display: flex;
}

.screen-content {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background-color: var(--gray-50); /* Fondo gris para el contenido scrollable */
}

/* ========================================
   LOADING SCREEN
   ======================================== */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.loading-screen.hidden {
    display: none;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--gray-200);
    border-top-color: var(--primary);
    border-right-color: var(--primary-light);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    box-shadow: var(--shadow-purple);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-text {
    margin-top: 1rem;
    color: var(--gray-600);
    font-size: 0.95rem;
}

/* ========================================
   GATE / LANDING (acceso solo con login)
   ======================================== */
.gate-screen {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9000;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    overflow: auto;
}

body.gate-visible .gate-screen {
    display: flex;
}

body.gate-visible .app-header-fixed,
body.gate-visible .menu-sidebar,
body.gate-visible .menu-overlay,
body.gate-visible .app-container {
    display: none !important;
}

.gate-background {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, var(--primary-darker) 0%, var(--primary) 35%, var(--primary-light) 100%);
    z-index: -1;
}

.gate-background::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(255,255,255,0.15) 0%, transparent 50%);
    pointer-events: none;
}

.gate-content {
    text-align: center;
    max-width: 360px;
    width: 100%;
}

.gate-logo {
    margin-bottom: 1.5rem;
}

.gate-logo-img {
    width: 96px;
    height: 96px;
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    object-fit: cover;
}

.gate-title {
    color: var(--white);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.gate-subtitle {
    color: rgba(255,255,255,0.95);
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 1.25rem;
}

.gate-description {
    color: rgba(255,255,255,0.85);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

/* Formulario de login en la página (móvil: touch 44px, font 16px evita zoom iOS) */
.gate-form {
    width: 100%;
    text-align: left;
    margin-top: 0.5rem;
}

.gate-form-group {
    margin-bottom: 1rem;
}

.gate-label {
    display: block;
    color: rgba(255,255,255,0.95);
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 0.35rem;
}

.gate-input {
    width: 100%;
    min-height: 48px;
    padding: 0.75rem 1rem;
    font-size: 16px;
    line-height: 1.4;
    color: var(--gray-900);
    background: var(--white);
    border: 2px solid rgba(255,255,255,0.4);
    border-radius: 12px;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.gate-input::placeholder {
    color: var(--gray-500);
}

.gate-input:focus {
    outline: none;
    border-color: var(--white);
    box-shadow: 0 0 0 3px rgba(255,255,255,0.3);
}

.gate-error {
    color: #fecaca;
    background: rgba(185, 28, 28, 0.25);
    font-size: 0.875rem;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.gate-remember {
    margin: 0.25rem 0 1rem;
}

.gate-remember-label {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: rgba(255,255,255,0.95);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    padding: 0.25rem 0;
    min-height: 32px;
}

/* Checkbox visual propio: iOS/Android siguen pintando el control nativo si no se
   anula appearance; el estado ON usa fondo verde claro + tick verde (SVG nitido). */
.gate-remember-check-wrap {
    position: relative;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    transform: scale(1);
}

.gate-remember-checkbox {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
    /* Quitar pintado nativo (iOS mostraba cuadrado blanco / animacion rara al pulsar) */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.gate-remember-box {
    position: absolute;
    inset: 0;
    z-index: 1;
    box-sizing: border-box;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

/* Recordar activo: muy visible (tick verde sobre fondo verde claro) */
.gate-remember-checkbox:checked + .gate-remember-box {
    background: #bbf7d0;
    border-color: #22c55e;
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.5), 0 0 12px rgba(34, 197, 94, 0.45);
}

.gate-remember-checkbox:checked + .gate-remember-box::after {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    margin: 0;
    transform: none;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    /* Check verde (#15803d), trazo grueso para legibilidad en movil */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.gate-remember-checkbox:focus-visible + .gate-remember-box {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4);
}

.gate-remember-checkbox:checked:focus-visible + .gate-remember-box {
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.55), 0 0 12px rgba(34, 197, 94, 0.4);
}

.gate-remember-text {
    line-height: 1.2;
}

.gate-btn {
    width: 100%;
    min-height: 48px;
    margin-top: 0.25rem;
    padding: 0.85rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary);
    background: var(--white);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,0.2);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    -webkit-tap-highlight-color: transparent;
}

.gate-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

.gate-btn:active {
    transform: translateY(0);
}

.gate-btn:disabled {
    opacity: 0.8;
    cursor: not-allowed;
    transform: none;
}

/* ========================================
   HEADER FIJO
   ======================================== */
.app-header-fixed {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: var(--white);
    padding: 0;
    box-shadow: var(--shadow-purple);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    min-height: 48px;
    margin: 0;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.app-header-fixed::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
}

/* Navegador: padding original. En webapp instalada se ajusta en @media (display-mode: standalone) */
.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    padding-top: calc(0.5rem + min(env(safe-area-inset-top, 0px), 32px) + var(--ios-header-touch-offset));
    padding-bottom: 0.5rem;
}

.header-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ajustes responsive para pantallas pequeñas */
@media (max-width: 360px) {
    .header-title {
        font-size: 0.9rem;
    }
}

.menu-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
    touch-action: manipulation;
}

.menu-btn:active {
    background: rgba(255, 255, 255, 0.3);
}

.menu-btn svg {
    color: var(--white);
}

/* Solo iOS + webapp instalada (standalone): subir header para quitar hueco del sistema.

  Yes

   Si sigue viendo padding en el movil, aumentar el valor (ej. -32px o -40px) y la misma cantidad en padding-top y en el calc de .app-container. */
@supports (-webkit-touch-callout: none) {
    @media (display-mode: standalone) {
        .app-header-fixed {
            top: -24px;
        }
        .header-content {
            padding-top: calc(24px + min(env(safe-area-inset-top, 0px), 24px) + var(--ios-header-touch-offset));
        }
        .app-container {
            top: calc(52px + 0.5rem + min(env(safe-area-inset-top, 0px), 32px) - 24px + var(--ios-header-touch-offset));
        }
    }
}

/* Cart Info Bar (solo para pantalla carrito) */
.cart-info-bar {
    background: rgba(120, 81, 169, 0.1);
    padding: 0.75rem 1rem;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary);
    border-bottom: 1px solid rgba(120, 81, 169, 0.2);
}

/* ========================================
   MENU SIDEBAR
   ======================================== */
.menu-sidebar {
    position: fixed;
    top: 0;
    right: -300px;
    width: 300px;
    height: 100%;
    background: var(--white);
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1100;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}

.menu-sidebar.open {
    right: 0;
}

.menu-header {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: var(--white);
    padding: 1.5rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu-header h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
}

.close-menu-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    color: var(--white);
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.close-menu-btn:active {
    background: rgba(255, 255, 255, 0.3);
}

.menu-content {
    flex: 1;
    padding: 1.5rem 1rem;
    overflow-y: auto;
}

.menu-placeholder {
    text-align: center;
    color: var(--gray-600);
    font-size: 0.95rem;
    margin-top: 2rem;
}

.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1050;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.menu-overlay.active {
    opacity: 1;
    pointer-events: all;
}

/* ========================================
   FOOTER DE NAVEGACIÓN MODERNO
   ======================================== */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--white);
    border-top: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: var(--footer-height);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    z-index: 999;
    padding: 0.75rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom));
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: var(--gray-600);
    transition: all 0.3s;
    border-radius: 12px;
    position: relative;
    touch-action: manipulation;
}

.nav-item.nav-checkout {
    transform: scale(1.15);
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: var(--white);
    box-shadow: var(--shadow-purple);
    margin: 0 0.5rem;
    position: relative;
    overflow: hidden;
}

.nav-item.nav-checkout::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
}

.nav-item.nav-checkout .nav-icon svg {
    width: 28px;
    height: 28px;
    stroke-width: 2.5;
}

.nav-item.nav-checkout .nav-label {
    font-weight: 700;
    font-size: 0.8rem;
}

.nav-item.active:not(.nav-checkout) {
    color: var(--primary);
    background: rgba(120, 81, 169, 0.1);
}

.nav-item:active {
    transform: scale(0.95);
}

.nav-item.nav-checkout:active {
    transform: scale(1.1);
}

.nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
    position: relative;
}

.nav-icon svg {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}

.nav-icon-with-badge {
    position: relative;
}

.nav-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-shadow: var(--shadow-purple);
    border: 2px solid var(--white);
}

.nav-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ========================================
   CARRITO (PANTALLA PRINCIPAL)
   ======================================== */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
    color: var(--gray-600);
}

.empty-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-state h2 {
    font-size: 1.25rem;
    color: var(--gray-800);
    margin-bottom: 0.5rem;
}

.empty-state p {
    font-size: 0.95rem;
    color: var(--gray-600);
}

.cart-items {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cart-footer {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gray-200);
}

.cart-footer .btn-enviar-pedido {
    width: 100%;
    font-weight: 600;
}

#cartScreen .cart-footer .btn-guardar-prepedido {
    width: 100%;
    margin-top: 0.6rem;
    font-weight: 600;
}

#cartScreen .cart-footer .btn-generar-albaran {
    width: 100%;
    margin-top: 0.6rem;
    font-weight: 600;
}

.generar-albaran-modal-content,
.albaran-firma-datos-modal-content,
.albaran-signature-modal-content {
    max-width: 520px;
    width: 92vw;
}

/* Modo tableta XPPEN: el canvas ocupa toda la pantalla para mapeo 1:1 lapiz/pantalla */
.albaran-signature-modal.albaran-signature-modal--tablet {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
    touch-action: none;
    -ms-touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    overflow: hidden;
}

.albaran-signature-modal--tablet .login-modal-overlay {
    display: none;
}

.albaran-signature-modal--tablet .albaran-signature-modal-content {
    max-width: none;
    width: 100%;
    height: 100%;
    max-height: none;
    margin: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 0.75rem 1rem 1rem;
    overflow: hidden;
}

.albaran-signature-modal--tablet .signature-modal-title {
    flex-shrink: 0;
}

.albaran-signature-modal--tablet .signature-modal-hint {
    flex-shrink: 0;
    margin-bottom: 0.5rem;
}

.albaran-signature-modal--tablet .signature-pad-wrapper {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin-bottom: 0.5rem;
    padding: 0;
    border-width: 2px;
}

.albaran-signature-modal--tablet .signature-pad-canvas {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: 100%;
    touch-action: none;
    -ms-touch-action: none;
}

.albaran-signature-modal--tablet .signature-modal-actions {
    flex-shrink: 0;
}

body.albaran-signature-active .tienda-log-fab {
    display: none !important;
}

/* Diagnostico TiendaPC (log flotante + modal) */
.tienda-log-fab {
    position: fixed;
    right: 1rem;
    bottom: 5.5rem;
    z-index: 9500;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 3.25rem;
    height: 2.75rem;
    padding: 0 0.85rem;
    border: none;
    border-radius: 999px;
    background: var(--gray-800, #1f2937);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

.tienda-log-fab--has-errors {
    background: #b91c1c;
}

.tienda-log-fab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background: #fff;
    color: #b91c1c;
    font-size: 0.7rem;
    font-weight: 700;
}

.tienda-log-modal-content {
    max-width: 720px;
    width: 94vw;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
}

.tienda-log-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}

.tienda-log-modal-header h2 {
    margin: 0;
    font-size: 1.2rem;
}

.tienda-log-modal-hint {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    color: var(--gray-600);
    line-height: 1.4;
}

.tienda-log-list {
    flex: 1;
    min-height: 200px;
    max-height: 52vh;
    overflow: auto;
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 8px;
    background: #0f172a;
    padding: 0.5rem;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 0.78rem;
    line-height: 1.45;
}

.tienda-log-empty {
    color: #94a3b8;
    padding: 0.75rem;
}

.tienda-log-line {
    display: grid;
    grid-template-columns: 4.5rem 5.5rem 1fr;
    gap: 0.5rem;
    padding: 0.2rem 0.35rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
    color: #e2e8f0;
}

.tienda-log-ts {
    color: #94a3b8;
}

.tienda-log-src {
    color: #7dd3fc;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tienda-log-line--error .tienda-log-msg {
    color: #fca5a5;
}

.tienda-log-line--warn .tienda-log-msg {
    color: #fde68a;
}

.tienda-log-line--ok .tienda-log-msg {
    color: #86efac;
}

.tienda-log-modal-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.tienda-log-modal-actions .btn {
    flex: 1;
}

.albaran-signature-modal-content .signature-modal-title {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
}

.albaran-signature-modal-content .signature-modal-hint {
    font-size: 0.9rem;
    color: var(--gray-600);
    margin: 0 0 1rem;
    line-height: 1.4;
}

.signature-modal-fields {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.85rem;
    flex-shrink: 0;
}

.signature-field-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-700, #374151);
}

.signature-field-optional {
    font-weight: 400;
    color: var(--gray-500, #6b7280);
}

.signature-field-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--gray-300, #d1d5db);
    border-radius: 8px;
    font-size: 0.95rem;
    margin-bottom: 0.35rem;
}

.albaran-signature-modal--tablet .signature-modal-fields {
    margin-bottom: 0.5rem;
}

.signature-pad-wrapper {
    border: 3px solid var(--primary);
    border-radius: 12px;
    background: #ffffff;
    padding: 8px;
    margin-bottom: 1rem;
    width: 100%;
    box-sizing: border-box;
}

.signature-pad-canvas {
    display: block;
    width: 100%;
    min-height: 300px;
    touch-action: none;
    -ms-touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: crosshair;
    background: transparent;
}

.signature-modal-actions {
    display: flex;
    gap: 0.75rem;
    width: 100%;
}

.signature-modal-actions .btn {
    flex: 1;
}

#cartScreen .prepedido-observaciones-textarea {
    margin: 0.35rem 0 0.6rem;
}

#cartScreen .prepedido-edit-hint {
    margin: 0 0 0.5rem;
    padding: 0.35rem 0.55rem;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--primary-dark);
    background: rgba(124, 58, 237, 0.1);
}

.cart-item {
    background: var(--white);
    border-radius: 12px;
    padding: 1rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    gap: 1rem;
    align-items: center;
}

.item-info {
    flex: 1;
    min-width: 0;
}

.item-code {
    font-size: 0.8rem;
    color: var(--gray-600);
    font-weight: 600;
}

.item-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0.25rem 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary);
}

.item-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.quantity-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--gray-100);
    border-radius: 8px;
    padding: 0.25rem;
}

.qty-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--white);
    border-radius: 6px;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.qty-btn:active {
    transform: scale(0.9);
}

.qty-value {
    min-width: 30px;
    text-align: center;
    font-weight: 600;
    font-size: 1rem;
}

.btn-remove {
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
    border-radius: 8px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-remove:active {
    transform: scale(0.9);
    background: rgba(239, 68, 68, 0.2);
}

/* ========================================
   BÚSQUEDA
   ======================================== */
.search-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.input-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-700);
}

.search-input {
    width: 100%;
    padding: 0.9rem 1rem;
    border: 2px solid var(--gray-200);
    border-radius: 10px;
    font-size: 1rem;
    transition: all 0.2s;
    font-family: inherit;
}

.history-filter-group {
    margin: 0.5rem 0;
}

.checkbox-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--gray-50);
    border: 2px solid var(--gray-200);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}

.checkbox-container:active {
    transform: scale(0.98);
}

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

.checkbox-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gray-700);
    cursor: pointer;
    flex: 1;
}

.search-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(120, 81, 169, 0.15);
}

.code-group .search-input {
    background: #f0fdf4;
    border-color: #86efac;
}

.code-group .search-input:focus {
    border-color: var(--success);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.description-group .search-input {
    background: #eff6ff;
    border-color: #93c5fd;
}

.description-group .search-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(120, 81, 169, 0.15);
}

/* ==============================
   SEARCH INPUTS GRID + CHIPS UI
   ============================== */

/* Grid 2 cols en PC, 1 col en mobile */
.search-inputs-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Barra de chips + botón buscar */
.search-filter-bar {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: stretch;
}

/* Wrapper con fade derecho en mobile */
.filter-chips-wrapper {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Etiqueta "Filtros:" antes de la fila de chips */
.filter-chips-hint {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gray-500);
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.filter-chips-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 36px;
    background: linear-gradient(to right, transparent, var(--white));
    pointer-events: none;
}

/* Fila de chips: scroll horizontal en mobile */
.filter-chips-row {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 2px;
    padding-right: 36px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
}

.filter-chips-row::-webkit-scrollbar {
    display: none;
}

/* Chip base */
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0 0.9rem;
    height: 40px;
    min-height: 40px;
    border: 2px solid var(--gray-300);
    border-radius: 999px;
    background: var(--white);
    color: var(--gray-700);
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    touch-action: manipulation;
}

.filter-chip:active {
    transform: scale(0.96);
}

.filter-chip.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* Chips de tipo toggle (Mis compras, Oferta): borde punteado para indicar on/off */
.filter-chip.chip-toggle {
    border-style: dashed;
}

.filter-chip.chip-toggle.active {
    border-style: solid;
}

/* Icono dentro del chip (checkmark para toggles) */
.chip-icon {
    font-size: 0.8rem;
    opacity: 0.55;
    transition: opacity 0.15s;
}

.filter-chip.active .chip-icon {
    opacity: 1;
}

.chip-arrow {
    font-size: 0.7rem;
    opacity: 0.6;
    transition: transform 0.15s;
}

/* Flecha rotada cuando el panel del chip está abierto */
.filter-chip.config-open .chip-arrow {
    transform: rotate(180deg);
    opacity: 1;
}

/* Texto de ayuda dentro del panel de configuración */
.chip-config-hint {
    font-size: 0.78rem;
    color: var(--gray-500);
    margin: 0 0 0.6rem 0;
    line-height: 1.4;
}

/* Botón Buscar en la barra de filtros (mobile: full width debajo, PC: al final inline) */
.search-btn-chip {
    width: 100%;
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: 10px;
    flex-shrink: 0;
}

/* Panel expandible de configuración de chip */
.chip-config-panel {
    background: var(--white);
    border: 2px solid var(--gray-200);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    animation: chipConfigSlideIn 0.15s ease;
    position: relative;
    z-index: 2;
}

@keyframes chipConfigSlideIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.chip-config-block + .chip-config-block {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--gray-200);
}

/* Input dentro del panel de chip */
.chip-config-input {
    width: 100%;
    padding: 0.6rem 0.85rem;
    border: 2px solid var(--gray-200);
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.15s;
}

.chip-config-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(120, 81, 169, 0.15);
}

/* Combobox fabricante: input + dropdown */
.chip-config-combobox-wrap {
    position: relative;
    width: 100%;
    max-width: 280px;
}
.chip-config-combobox-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 220px;
    overflow-y: auto;
    border: 2px solid var(--gray-200);
    border-top: none;
    border-radius: 0 0 8px 8px;
    background: var(--bg);
    z-index: 20;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.chip-config-combobox-dropdown li {
    padding: 0.5rem 0.85rem;
    cursor: pointer;
    font-size: 0.95rem;
    border-bottom: 1px solid var(--gray-100);
}
.chip-config-combobox-dropdown li:last-child {
    border-bottom: none;
}
.chip-config-combobox-dropdown li:hover,
.chip-config-combobox-dropdown li[aria-selected="true"] {
    background: var(--gray-100);
}
.chip-config-combobox-dropdown li[role="option"] {
    cursor: pointer;
}

/* Rango de precio */
.price-range-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.price-field {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1;
    min-width: 0;
}

.price-field-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gray-600);
    white-space: nowrap;
}

.price-input {
    flex: 1;
    min-width: 0;
}

.price-field-currency {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--gray-500);
}

.price-field-sep {
    color: var(--gray-400);
    font-size: 0.9rem;
    flex-shrink: 0;
}

/* Mini selector de almacén */
.almacen-mini-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.almacen-mini-btn {
    padding: 0.38rem 0.85rem;
    border: 2px solid var(--gray-300);
    border-radius: 999px;
    background: var(--white);
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    color: var(--gray-700);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
}

.almacen-mini-btn.selected {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* Resultados de búsqueda */
.search-results {
    margin-top: 1rem;
}

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.results-header h3 {
    font-size: 1.1rem;
    color: var(--gray-800);
}

.btn-clear {
    background: var(--gray-200);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-700);
    cursor: pointer;
}

.results-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.result-item {
    background: var(--white);
    border-radius: 12px;
    padding: 1rem;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
}

.result-item:active {
    transform: scale(0.98);
    border-color: var(--primary);
}

.result-item-with-image {
    background: var(--white);
    border-radius: 12px;
    padding: 0.75rem;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.result-item-with-image:active {
    transform: scale(0.98);
    border-color: var(--primary);
}

.result-image {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    background: var(--gray-100);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.result-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.result-image-placeholder {
    font-size: 2.5rem;
    opacity: 0.3;
}

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

.result-code {
    font-size: 0.8rem;
    color: var(--gray-600);
    font-weight: 600;
}

/* Etiqueta de oferta dentro del código de producto */
.oferta-tag {
    color: var(--warning);
    font-weight: 700;
    font-size: 0.75rem;
}

.result-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0.25rem 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.result-price {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary);
}

.result-price-container {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.result-price-original {
    font-size: 0.78rem;
    color: var(--gray-500);
    text-decoration: line-through;
    line-height: 1.1;
}

.result-price-discount {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--danger);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* ========================================
   ESCANEO
   ======================================== */
.camera-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    gap: 1rem;
}

.camera-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scan-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
}

.scan-line {
    width: 80%;
    height: 2px;
    background: var(--success);
    box-shadow: 0 0 20px var(--success);
    animation: scanAnimation 2s ease-in-out infinite;
}

@keyframes scanAnimation {
    0%, 100% { transform: translateY(-50px); opacity: 0; }
    50% { transform: translateY(0); opacity: 1; }
}

.qr-frame {
    width: 200px;
    height: 200px;
    border: 3px solid var(--white);
    border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
}

.scan-instruction {
    color: var(--white);
    font-size: 0.95rem;
    font-weight: 600;
    margin-top: 1rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Camera Scanner */
.camera-scanner {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    background: var(--black);
}

.scanner-instructions {
    text-align: center;
    padding: 1rem;
    background: var(--white);
    border-radius: 12px;
    margin-top: 1rem;
    box-shadow: var(--shadow-sm);
}

.scanner-instructions p {
    margin: 0;
    color: var(--gray-700);
    font-size: 0.9rem;
}

.manual-input-section {
    background: var(--white);
    padding: 1rem;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    margin-top: 1rem;
}

.section-label {
    font-size: 0.9rem;
    color: var(--gray-600);
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.manual-input {
    flex: 1;
    padding: 0.9rem;
    border: 2px solid var(--gray-200);
    border-radius: 10px;
    font-size: 1rem;
    font-family: inherit;
}

.manual-input:focus {
    outline: none;
    border-color: var(--primary);
}

.scan-results {
    margin-top: 1rem;
}

/* ========================================
   CHECKOUT / CAJA
   ======================================== */
.checkout-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Bloque "Ya estoy en el almacén" + línea separadora blanca + botón Mostrador */
.checkout-ya-en-almacen-wrap {
    margin-top: 1.5rem;
}
.remote-order-section .checkout-sep-line {
    border: 0;
    height: 1px;
    background: #fff;
    margin: 0 0 1rem 0;
}
.remote-order-section .checkout-ya-en-almacen-text {
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    margin: 0 0 1rem 0;
    letter-spacing: 0.02em;
}

/* Integrado en recuadro verde (remote-order-section) */
.checkout-mostrador-inline {
    margin-top: 0;
    text-align: center;
}

.checkout-mostrador-inline .checkout-mostrador-title {
    margin-bottom: 0.5rem;
}

.checkout-mostrador-inline .section-description {
    margin-bottom: 1.25rem;
}

.remote-order-section .btn-escanear-mostrador {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
}

.mostrador-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.btn-back-mostrador {
    align-self: flex-start;
    background: transparent;
    border: none;
    color: var(--primary);
    font-size: 1rem;
    font-weight: 600;
    padding: 0.5rem 0;
    cursor: pointer;
}

.btn-back-mostrador:hover {
    text-decoration: underline;
}

.checkout-camera-section .section-subtitle {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gray-800);
    margin: 0 0 0.5rem;
    text-align: center;
}

.checkout-camera-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.checkout-camera-section .section-title {
    text-align: center;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0;
}

.checkout-section {
    background: var(--white);
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.section-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: 0.5rem;
}

.section-description {
    font-size: 0.9rem;
    color: var(--gray-600);
    margin-bottom: 1rem;
}

.divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--gray-500);
    font-weight: 600;
    font-size: 0.9rem;
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--gray-300);
}

.divider span {
    padding: 0 1rem;
}

.code-input-container {
    margin: 1.5rem 0;
}

.checkout-code-input {
    width: 100%;
    max-width: 200px;
    padding: 1rem;
    border: 3px solid var(--gray-300);
    border-radius: 12px;
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.3em;
    font-family: monospace;
}

.checkout-code-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(120, 81, 169, 0.15);
}

/* ========================================
   BOTONES
   ======================================== */
.btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn:active {
    transform: scale(0.97);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: var(--white);
    box-shadow: var(--shadow-purple);
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
}

.btn-primary:active {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
    transform: scale(0.98);
}

.btn-primary:disabled {
    background: var(--gray-300);
    color: var(--gray-500);
    cursor: not-allowed;
    transform: none;
}

.btn-secondary {
    background: var(--gray-200);
    color: var(--gray-800);
}

.btn-secondary:active {
    background: var(--gray-300);
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1.1rem;
    width: 100%;
}

/* ========================================
   TOASTS (sobre el cabecero, sin tapar el burger)
   ======================================== */
.toast-container {
    position: fixed;
    top: 0.5rem;
    left: 1rem;
    /* Dejar espacio a la derecha para el botón del menú (burger) */
    right: 4rem;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}

.toast {
    position: relative;
    background: var(--white);
    padding: 0.75rem 1rem;
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    animation: slideIn 0.3s ease-out;
    pointer-events: auto;
    border-left: 4px solid var(--primary);
    max-width: 100%;
}

@keyframes slideIn {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.toast.success {
    border-left-color: var(--success);
}

.toast.error {
    border-left-color: var(--danger);
}

.toast.warning {
    border-left-color: var(--warning);
}

.toast-message {
    flex: 1;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--gray-800);
}

@media (min-width: 1024px) {
    .toast-container {
        top: 4.6rem;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: min(760px, calc(100vw - 2rem));
    }
}

/* ========================================
   RESPONSIVE
   ======================================== */
/* Marco tipo telefono solo en tablet estrecha; desde 900px el contenedor usa todo el ancho del navegador */
@media (min-width: 768px) and (max-width: 899px) {
    .app-container {
        max-width: 480px;
        margin: 0 auto;
        box-shadow: var(--shadow-lg);
    }

    .bottom-nav {
        max-width: 480px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 0;
    }
}

/* Portatil / ventana ancha: Inicio (familias) a ancho real antes del breakpoint 1024px del resto de estilos PC */
@media (min-width: 900px) {
    #appContainerTienda .screen-content.inicio-content {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        box-sizing: border-box;
        align-items: stretch;
        padding-left: clamp(1rem, 3vw, 2.5rem);
        padding-right: clamp(1rem, 3vw, 2.5rem);
    }

    #appContainerTienda .screen-content.inicio-content .inicio-creaciones-card-wrap {
        align-self: center;
    }

    #appContainerTienda .screen-content.inicio-content .inicio-familias-section {
        width: 100%;
        max-width: none;
        box-sizing: border-box;
        align-self: stretch;
    }

    #appContainerTienda .screen-content.inicio-content .inicio-familias-grid {
        width: 100%;
    }

    /* Otras pantallas (carrito, buscar...): mismo ancho legible que en 1024px */
    #appContainerTienda .screen-content:not(.inicio-content) {
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        padding: 1.5rem 2rem;
        box-sizing: border-box;
    }
}

/* Tablet instalada (PWA) en apaisado: usar ancho completo en lugar de marco de 480px */
@media (min-width: 768px) and (orientation: landscape) {
    body.tablet-landscape-installed .app-container {
        max-width: none;
        left: 0;
        right: 0;
        margin: 0;
        transform: none;
    }

    body.tablet-landscape-installed .bottom-nav {
        max-width: none;
        left: 0;
        right: 0;
        transform: none;
    }
}

/* Desktop (PC): cabecera y cuerpo a ancho completo; contenido limitado; botones de nav mas grandes */
@media (min-width: 1024px) {
    .app-header-fixed {
        left: 0;
        right: 0;
        width: 100%;
        max-width: none;
        transform: none;
    }

    .app-container {
        max-width: none;
        left: 0;
        right: 0;
        transform: none;
        bottom: calc(100px + env(safe-area-inset-bottom, 0px));
    }

    .bottom-nav {
        left: 0;
        right: 0;
        max-width: none;
        transform: none;
        height: calc(100px + env(safe-area-inset-bottom, 0px));
        padding: 1rem 2rem 1rem;
    }

    .bottom-nav .nav-item {
        padding: 0.75rem 1rem;
        gap: 0.35rem;
    }

    .bottom-nav .nav-icon svg {
        width: 32px;
        height: 32px;
    }

    .bottom-nav .nav-item.nav-checkout .nav-icon svg {
        width: 36px;
        height: 36px;
    }

    .bottom-nav .nav-label {
        font-size: 0.9rem;
    }

    .bottom-nav .nav-item.nav-checkout .nav-label {
        font-size: 0.95rem;
    }

    /* Cuerpo limitado y centrado: no llega a los bordes de la pantalla */
    .screen-content {
        padding: 1.5rem 2rem;
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }

    /* Inicio ancho completo: reglas en @media (min-width: 900px) con #appContainerTienda */

    /* PC: inputs en 2 columnas */
    .search-inputs-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    /* PC: chips + botón en fila horizontal */
    .search-filter-bar {
        flex-direction: row;
        align-items: center;
        gap: 0.75rem;
    }

    .filter-chips-wrapper {
        flex: 1;
        min-width: 0;
        overflow: visible;
    }

    /* PC: no scroll, chips se muestran todos en fila (sin fade) */
    .filter-chips-wrapper::after {
        display: none;
    }

    .filter-chips-row {
        flex-wrap: wrap;
        overflow-x: visible;
        padding-right: 0;
    }

    /* PC: botón al final de la fila, tamaño ajustado */
    .search-btn-chip {
        width: auto;
        min-width: 110px;
        padding: 0.65rem 1.4rem;
        font-size: 0.9rem;
    }

    .cart-info-bar {
        padding: 1rem 2rem;
        font-size: 1rem;
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
    }

    .gate-content {
        max-width: 420px;
    }

    .gate-title {
        font-size: 1.75rem;
    }

    .header-title {
        font-size: 1.15rem;
    }

    /* Menu cerrado: totalmente fuera de vista (ancho 360px => right -360px) */
    .menu-sidebar {
        width: 360px;
        right: -360px;
    }

    .menu-sidebar.open {
        right: 0;
    }
}

/* Safe Area (iOS) */
@supports (padding: env(safe-area-inset-bottom)) {
    .bottom-nav {
        height: calc(var(--footer-height) + env(safe-area-inset-bottom));
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
    }
    
    .app-container {
        bottom: calc(var(--footer-height) + env(safe-area-inset-bottom));
    }
}

/* Ajustes de interacción para iPhone/iOS (Safari/PWA) */
@supports (-webkit-touch-callout: none) {
    .app-header-fixed,
    .bottom-nav,
    .filter-chip,
    .menu-btn,
    .nav-item {
        -webkit-tap-highlight-color: transparent;
    }

    /* Forzar separación superior del botón X del menú burger en iPhone */
    .menu-sidebar .menu-header {
        padding-top: calc(1.5rem + min(env(safe-area-inset-top, 0px), 28px));
    }
    .menu-sidebar .close-menu-btn {
        margin-top: 0.5rem;
    }

    /* Solo webapp instalada en iPhone: footer fijo, al borde inferior y sin arrastre */
    @media (display-mode: standalone) {
        html {
            height: 100%;
            min-height: -webkit-fill-available;
            overscroll-behavior-y: none;
        }

        body {
            min-height: 100%;
            min-height: -webkit-fill-available;
            overscroll-behavior-y: none;
        }

        html,
        body,
        .app-container,
        .bottom-nav {
            background: var(--white);
        }

        #appContainerTienda {
            overscroll-behavior: contain;
        }

        #appContainerTienda .screen-content {
            overscroll-behavior-y: contain;
        }

        .app-container {
            bottom: calc(50px + env(safe-area-inset-bottom));
        }

        .bottom-nav {
            position: fixed;
            left: 0;
            right: 0;
            bottom: calc(0px - var(--ios-standalone-footer-offset, 0px));
            z-index: 10050;
            height: calc(50px + env(safe-area-inset-bottom));
            padding-top: 0;
            padding-bottom: env(safe-area-inset-bottom);
            align-items: flex-end;
            touch-action: none;
            overscroll-behavior: none;
            -webkit-overflow-scrolling: auto;
            -webkit-user-select: none;
            user-select: none;
            transform: none !important;
            -webkit-transform: none !important;
        }

        .bottom-nav .nav-item {
            touch-action: manipulation;
            justify-content: flex-end;
            padding-top: 0.2rem;
            padding-bottom: 0.15rem;
            gap: 0.15rem;
        }
    }
}

/* ========================================
   TARJETAS DE CARRITO ESTILO
   ======================================== */
.cart-product-card {
    background: var(--white);
    border-radius: 8px;
    padding: 12px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
    border: 1px solid var(--gray-200);
}

.cart-product-body {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    min-width: 0;
}

/* --- Compatibilidad WC en carrito (informativo, multi-color) --- */
:root {
    --wc-group-verde: #2f9e6b;
    --wc-group-verde-bg: #eef8f2;
    --wc-group-verde-border: #8fd4b0;
    --wc-group-azul: #3b82f6;
    --wc-group-azul-bg: #eef5ff;
    --wc-group-azul-border: #93c5fd;
    --wc-group-ambar: #d97706;
    --wc-group-ambar-bg: #fff7ed;
    --wc-group-ambar-border: #fdba74;
    --wc-group-teal: #0d9488;
    --wc-group-teal-bg: #ecfdf8;
    --wc-group-teal-border: #5eead4;
    --wc-group-violeta: #7c3aed;
    --wc-group-violeta-bg: #f5f3ff;
    --wc-group-violeta-border: #c4b5fd;
    --wc-info-banner-bg: #f8f1e7;
    --wc-info-banner-border: #e8d5bc;
    --wc-complete-bg: #f3eefc;
    --wc-complete-border: #d4c4f5;
    --wc-complete-accent: #7c3aed;
}

.cart-wc-banner {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    background: var(--wc-info-banner-bg);
    border: 1px solid var(--wc-info-banner-border);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    margin-bottom: 0.85rem;
}

.cart-wc-banner-icon {
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    margin-top: 0.1rem;
    border-radius: 4px;
    background:
        linear-gradient(135deg, #c4a574 25%, transparent 25%) -0.15rem 0 / 0.7rem 0.7rem,
        linear-gradient(225deg, #c4a574 25%, transparent 25%) -0.15rem 0 / 0.7rem 0.7rem,
        linear-gradient(315deg, #c4a574 25%, transparent 25%) 0.2rem 0.35rem / 0.7rem 0.7rem,
        linear-gradient(45deg, #c4a574 25%, transparent 25%) 0.2rem 0.35rem / 0.7rem 0.7rem,
        #e8d5bc;
    background-repeat: no-repeat;
}

.cart-wc-banner-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #7a5c3a;
    margin-bottom: 0.2rem;
}

.cart-wc-banner-text {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.35;
    color: #5c4a36;
}

.cart-wc-section {
    border-radius: 10px;
    border: 1px solid var(--gray-200);
    border-left-width: 5px;
    margin-bottom: 0.85rem;
    overflow: hidden;
    background: var(--white);
}

.cart-wc-section--verde {
    border-left-color: var(--wc-group-verde);
    background: var(--wc-group-verde-bg);
}
.cart-wc-section--azul {
    border-left-color: var(--wc-group-azul);
    background: var(--wc-group-azul-bg);
}
.cart-wc-section--ambar {
    border-left-color: var(--wc-group-ambar);
    background: var(--wc-group-ambar-bg);
}
.cart-wc-section--teal {
    border-left-color: var(--wc-group-teal);
    background: var(--wc-group-teal-bg);
}
.cart-wc-section--violeta {
    border-left-color: var(--wc-group-violeta);
    background: var(--wc-group-violeta-bg);
}

.cart-wc-section-header {
    display: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--gray-800);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.cart-wc-section-dot {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    flex-shrink: 0;
    background: currentColor;
}

.cart-wc-section--verde .cart-wc-section-dot { background: var(--wc-group-verde); }
.cart-wc-section--azul .cart-wc-section-dot { background: var(--wc-group-azul); }
.cart-wc-section--ambar .cart-wc-section-dot { background: var(--wc-group-ambar); }
.cart-wc-section--teal .cart-wc-section-dot { background: var(--wc-group-teal); }
.cart-wc-section--violeta .cart-wc-section-dot { background: var(--wc-group-violeta); }

.cart-wc-section-body {
    padding: 0.55rem 0.55rem 0.15rem;
}

.cart-wc-section .cart-product-card {
    background: rgba(255, 255, 255, 0.92);
    margin-bottom: 0.55rem;
    box-shadow: none;
}

.cart-product-card--wc {
    position: relative;
}

.cart-product-card--wc-verde { border-color: var(--wc-group-verde-border); }
.cart-product-card--wc-azul { border-color: var(--wc-group-azul-border); }
.cart-product-card--wc-ambar { border-color: var(--wc-group-ambar-border); }
.cart-product-card--wc-teal { border-color: var(--wc-group-teal-border); }
.cart-product-card--wc-violeta { border-color: var(--wc-group-violeta-border); }

.cart-wc-line-wrap {
    margin: 0.35rem 0 0.25rem;
}

.cart-wc-line-status {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--gray-700);
}

.cart-wc-line-icon {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin-top: 0.1rem;
    border-radius: 50%;
    box-sizing: border-box;
}

.cart-wc-line-icon--check {
    background: var(--wc-group-verde);
    box-shadow: inset 0 0 0 2px var(--wc-group-verde);
    position: relative;
}
.cart-product-card--wc-azul .cart-wc-line-icon--check { background: var(--wc-group-azul); box-shadow: inset 0 0 0 2px var(--wc-group-azul); }
.cart-product-card--wc-ambar .cart-wc-line-icon--check { background: var(--wc-group-ambar); box-shadow: inset 0 0 0 2px var(--wc-group-ambar); }
.cart-product-card--wc-teal .cart-wc-line-icon--check { background: var(--wc-group-teal); box-shadow: inset 0 0 0 2px var(--wc-group-teal); }
.cart-product-card--wc-violeta .cart-wc-line-icon--check { background: var(--wc-group-violeta); box-shadow: inset 0 0 0 2px var(--wc-group-violeta); }

.cart-wc-line-icon--check::after {
    content: '';
    position: absolute;
    left: 0.28rem;
    top: 0.14rem;
    width: 0.28rem;
    height: 0.5rem;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.cart-wc-line-icon--info {
    background: #f59e0b;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 800;
    font-style: italic;
    font-family: Georgia, 'Times New Roman', serif;
}
.cart-wc-line-icon--info::before {
    content: 'i';
}

.cart-wc-line-text strong {
    font-weight: 700;
    color: var(--gray-900);
}

.cart-wc-line-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    margin-top: 0.4rem;
}

.cart-wc-action-link {
    appearance: none;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    color: var(--wc-complete-accent);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    text-align: left;
}

.cart-wc-action-link--primary {
    color: #5b21b6;
}

.cart-wc-complete {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    background: var(--wc-complete-bg);
    border: 1px solid var(--wc-complete-border);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    margin-bottom: 0.85rem;
}

/* Dentro de su seccion de conjunto: pegado a las piezas, sin flotar al final del carrito */
.cart-wc-section .cart-wc-complete {
    margin: 0 0.55rem 0.55rem;
    border-radius: 8px;
}

.cart-wc-complete-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    margin-top: 0;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    color: #3b82f6;
}

.cart-wc-complete-icon .cart-wc-puzzle-svg {
    display: block;
    width: 1.35rem;
    height: 1.35rem;
}

.cart-wc-complete-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #4c1d95;
    margin-bottom: 0.2rem;
}

.cart-wc-complete-text {
    margin: 0 0 0.65rem;
    font-size: 0.85rem;
    line-height: 1.35;
    color: #5b4a7a;
}

.cart-wc-complete-btn {
    width: auto;
    min-height: 2.25rem;
    padding: 0.45rem 0.9rem;
    font-size: 0.85rem;
}

.cart-wc-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.9rem;
    padding: 0.55rem 0.15rem 0.25rem;
    margin-bottom: 0.5rem;
    font-size: 0.72rem;
    color: var(--gray-600);
}

.cart-wc-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.cart-wc-legend-icon {
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    flex-shrink: 0;
    box-sizing: border-box;
}

.cart-wc-legend-icon--check {
    background: var(--wc-group-verde);
    position: relative;
}
.cart-wc-legend-icon--check::after {
    content: '';
    position: absolute;
    left: 0.22rem;
    top: 0.1rem;
    width: 0.22rem;
    height: 0.4rem;
    border: solid #fff;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}

.cart-wc-legend-icon--dot {
    background: var(--wc-group-azul);
}

.cart-wc-legend-icon--info {
    background: #f59e0b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    font-family: Georgia, 'Times New Roman', serif;
}
.cart-wc-legend-icon--info::before { content: 'i'; }

.cart-wc-legend-icon--puzzle {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: #eff6ff;
    color: #3b82f6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cart-wc-legend-icon--puzzle .cart-wc-puzzle-svg {
    display: block;
    width: 0.72rem;
    height: 0.72rem;
}

@media (max-width: 720px) {
    .cart-wc-section-header {
        display: flex;
    }

    .cart-wc-line-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .cart-wc-action-link,
    .cart-wc-action-link--primary {
        display: block;
        width: 100%;
        text-align: center;
        text-decoration: none;
        background: rgba(124, 58, 237, 0.1);
        border-radius: 8px;
        padding: 0.55rem 0.75rem;
        border: 1px solid rgba(124, 58, 237, 0.2);
    }

    .cart-wc-complete-btn {
        width: 100%;
    }

    .cart-wc-legend {
        flex-direction: column;
        gap: 0.35rem;
    }
}

@media (min-width: 721px) {
    .cart-wc-section-header {
        display: flex;
        font-size: 0.8rem;
        font-weight: 600;
        background: rgba(255, 255, 255, 0.45);
    }
}

.cart-product-image {
    position: relative;
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    background: var(--gray-100);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.product-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    opacity: 0.5;
    background: var(--gray-100);
}

.cart-product-quantity-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: var(--white);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
    box-shadow: var(--shadow-purple);
}

.cart-product-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.cart-product-main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.cart-product-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cart-product-name {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--gray-900);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.cart-product-code {
    font-size: 0.75rem;
    color: var(--gray-500);
    font-weight: 400;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cart-product-aside {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    min-width: 0;
}

.cart-product-pricing {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 24px;
    width: 100%;
    margin-top: 0.15rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--gray-200);
    box-sizing: border-box;
}

.cart-product-unit-block,
.cart-product-line-total {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cart-product-unit-block {
    align-items: flex-start;
    text-align: left;
}

.cart-product-line-total {
    align-items: flex-end;
    text-align: right;
    margin-left: auto;
}

.cart-product-pricing-label {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gray-500);
    line-height: 1;
}

.cart-product-unit-block .cart-product-price,
.cart-product-unit-block .cart-product-price-container {
    margin-top: 0;
}

.cart-product-unit-block .cart-product-price-discount {
    flex-wrap: wrap;
    justify-content: flex-start;
    row-gap: 2px;
}

.cart-product-price-amount,
.cart-product-subtotal-amount {
    white-space: nowrap;
}

.cart-product-price-extras,
.cart-product-subtotal-extras {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.cart-product-stock {
    margin-top: 0.35rem;
}

.cart-product-price {
    font-size: 0.85rem;
    color: var(--gray-700);
    font-weight: 600;
    margin-top: 2px;
    white-space: nowrap;
}

/* Estilos para precios con descuento */
.cart-product-price-container {
    margin-top: 2px;
}

.cart-product-price-original,
.result-price-original,
.add-to-cart-price-original,
.order-product-price-original,
.recambios-vista-card-price-original,
.product-price-original {
    font-size: 0.7rem;
    color: var(--gray-500);
    text-decoration: line-through;
    margin-bottom: 2px;
}

.cart-product-price-discount,
.result-price-discount,
.add-to-cart-price-discount,
.recambios-vista-card-price-discount,
.product-price-discount {
    font-size: 0.9rem;
    color: var(--danger);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
}

.price-iva-label,
.price-sin-iva-label {
    font-size: 0.65rem;
    color: var(--gray-500);
    font-weight: 500;
}

.discount-badge {
    background: var(--danger);
    color: var(--white);
    font-size: 0.6rem;
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: 600;
}

.discount-pacto-marker {
    color: var(--danger);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

.cart-product-subtotal-container {
    text-align: right;
    flex-shrink: 0;
    min-width: 0;
}

.cart-product-line-total .cart-product-subtotal,
.cart-product-line-total .cart-product-subtotal-container {
    text-align: right;
}

.cart-product-subtotal-original {
    font-size: 0.85rem;
    color: var(--gray-500);
    text-decoration: line-through;
    margin-bottom: 2px;
    white-space: nowrap;
}

.cart-product-subtotal-discount {
    font-size: 1.2rem;
    color: var(--danger);
    font-weight: 700;
    white-space: nowrap;
}

/* Rectángulo de oferta */
.oferta-badge {
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: left;
    line-height: 1.4;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    transition: all 0.2s;
    flex: 1;
    min-width: 0;
    min-height: 40px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.oferta-badge.oferta-cumplida {
    background-color: #fef3c7;
    color: #92400e;
    border: 1px solid #fbbf24;
}

.oferta-badge.oferta-pendiente {
    background-color: var(--gray-200);
    color: var(--gray-600);
    border: 1px solid var(--gray-300);
    opacity: 0.7;
}

.cart-product-footer {
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    gap: 8px;
    padding-top: 8px;
}

.cart-product-footer.has-oferta {
    justify-content: space-between;
    margin-left: -92px; /* Extiende hasta el borde de la imagen (ancho imagen 80px + gap 12px) */
    padding-left: 0;
    min-height: 40px;
}

.cart-product-qty-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
}

/* Solo visible en layout PC horizontal; en movil no cambia la UX actual */
.cart-product-qty-label {
    display: none;
}

.quantity-controls-compact {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--gray-100);
    border-radius: 10px;
    padding: 6px 10px;
}

.qty-btn-compact {
    width: 44px;
    height: 44px;
    border: none;
    background: var(--white);
    color: var(--primary);
    font-size: 1.5rem;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.qty-btn-compact:active {
    background: var(--gray-200);
    transform: scale(0.95);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

@supports (-webkit-touch-callout: none) {
    .qty-btn-compact:active {
        transform: none;
    }
}

.qty-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-900);
    min-width: 40px;
    text-align: center;
}

.qty-value-input {
    width: 60px;
    height: 44px;
    border: none;
    background: transparent;
    color: var(--gray-900);
    font-size: 1.25rem;
    font-weight: 700;
    text-align: center;
    font-family: inherit;
    border-radius: 8px;
    transition: all 0.2s;
    appearance: textfield;
    -moz-appearance: textfield;
}

.qty-value-input::-webkit-inner-spin-button,
.qty-value-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.qty-value-input:focus {
    outline: none;
    background: var(--white);
    box-shadow: 0 0 0 3px var(--primary);
    border-radius: 8px;
}

.cart-product-subtotal {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-900);
    flex-shrink: 0;
    white-space: nowrap;
}

/* Movil vertical: aprovecha el ancho de la tarjeta y evita solapes */
@media (max-width: 720px) {
    .cart-product-card {
        padding: 10px;
        gap: 10px;
        margin-bottom: 8px;
    }

    .cart-wc-section-body {
        padding: 0.4rem 0.35rem 0.1rem;
    }

    .cart-wc-section .cart-product-card {
        padding: 8px;
        gap: 8px;
        margin-bottom: 0.45rem;
    }

    .cart-product-image {
        width: 64px;
        height: 64px;
    }

    .cart-product-info {
        gap: 6px;
    }

    .cart-product-main {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .cart-product-name {
        font-size: 0.88rem;
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }

    .cart-product-unit-block .cart-product-price,
    .cart-product-unit-block .cart-product-price-discount {
        font-size: 0.8rem;
    }

    .cart-product-unit-block .cart-product-price-original {
        font-size: 0.65rem;
    }

    .cart-product-pricing {
        gap: 10px 16px;
        margin-top: 0.25rem;
        padding-top: 0.5rem;
    }

    .cart-product-subtotal,
    .cart-product-subtotal-discount {
        font-size: 1.05rem;
    }

    .cart-product-subtotal-original {
        font-size: 0.75rem;
    }

    .cart-product-footer.has-oferta {
        margin-left: -74px; /* imagen 64px + gap 10px */
    }

    .cart-wc-section .cart-product-footer.has-oferta {
        margin-left: -72px; /* imagen 64px + gap 8px */
    }

    .quantity-controls-compact {
        gap: 6px;
        padding: 4px 8px;
    }

    .qty-btn-compact {
        width: 40px;
        height: 40px;
        font-size: 1.35rem;
    }

    .qty-value-input {
        width: 48px;
        height: 40px;
        font-size: 1.1rem;
    }

    .cart-wc-line-status {
        font-size: 0.74rem;
    }
}

@media (min-width: 721px) {
    /*
     * PC horizontal: columna detalle | columna precios (ud + total) + cantidad debajo.
     * Estructura real: .cart-product-aside envuelve pricing + footer.
     */
    .cart-product-card {
        align-items: stretch;
        gap: 0.85rem;
        padding: 14px 16px;
    }

    .cart-product-body {
        gap: 14px;
    }

    .cart-product-image {
        width: 76px;
        height: 76px;
    }

    .cart-product-info {
        flex: 1;
        min-width: 0;
    }

    .cart-product-main {
        flex-direction: row;
        align-items: flex-start;
        gap: 0;
    }

    .cart-product-details {
        flex: 1 1 auto;
        min-width: 0;
        padding-right: 1.25rem;
        gap: 0.4rem;
    }

    .cart-product-name {
        font-size: 0.95rem;
        font-weight: 600;
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }

    .cart-product-aside {
        flex: 0 0 17.5rem;
        width: 17.5rem;
        max-width: 17.5rem;
        padding-left: 1.15rem;
        border-left: 1px solid var(--gray-200);
        box-sizing: border-box;
    }

    .cart-product-pricing {
        margin: 0;
        padding: 0;
        border-top: none;
        gap: 0;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .cart-product-unit-block,
    .cart-product-line-total {
        flex: 1 1 50%;
        min-width: 0;
        align-items: flex-end;
        text-align: right;
        padding: 0 0.7rem 0 0;
        gap: 0.3rem;
    }

    .cart-product-unit-block {
        padding-left: 0;
    }

    .cart-product-line-total {
        margin-left: 0;
        padding-right: 0;
        padding-left: 0.7rem;
        border-left: 1px solid var(--gray-200);
    }

    .cart-product-pricing-label {
        margin-bottom: 0.15rem;
        font-size: 0.66rem;
        letter-spacing: 0.05em;
    }

    .cart-product-unit-block .cart-product-price-container,
    .cart-product-line-total .cart-product-subtotal-container,
    .cart-product-unit-block .cart-product-price,
    .cart-product-line-total .cart-product-subtotal {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 0.2rem;
        width: 100%;
    }

    .cart-product-unit-block .cart-product-price-original,
    .cart-product-subtotal-original {
        font-size: 0.72rem;
        line-height: 1.25;
        text-align: right;
        white-space: normal;
    }

    .cart-product-unit-block .cart-product-price,
    .cart-product-unit-block .cart-product-price-discount,
    .cart-product-subtotal,
    .cart-product-subtotal-discount {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 0.25rem;
        font-size: 1.05rem;
        font-weight: 700;
        line-height: 1.2;
        white-space: normal;
    }

    .cart-product-unit-block .cart-product-price-amount,
    .cart-product-subtotal-amount {
        font-size: 1.05rem;
        font-weight: 700;
    }

    .cart-product-unit-block .cart-product-price-extras,
    .cart-product-subtotal-extras {
        justify-content: flex-end;
    }

    .cart-product-footer,
    .cart-product-footer.has-oferta {
        margin: 0.75rem 0 0;
        margin-left: 0;
        padding: 0.7rem 0 0;
        border-top: 1px solid var(--gray-200);
        justify-content: flex-end;
        align-items: center;
        flex-wrap: nowrap;
        min-height: 0;
        width: 100%;
    }

    .cart-product-qty-row {
        width: 100%;
        justify-content: space-between;
        align-items: center;
        gap: 0.75rem;
    }

    .cart-product-qty-label {
        display: inline;
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--gray-700);
        line-height: 1;
    }

    .cart-product-aside .quantity-controls-compact {
        padding: 4px 8px;
        gap: 6px;
    }

    .cart-product-aside .qty-btn-compact {
        width: 36px;
        height: 36px;
        font-size: 1.25rem;
    }

    .cart-product-aside .qty-value-input {
        width: 44px;
        height: 36px;
        font-size: 1.05rem;
    }

    .cart-wc-section .cart-product-footer.has-oferta {
        margin-left: 0;
    }
}

/* ========================================
   CONFIRM DIALOG MODAL
   ======================================== */
.confirm-dialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease-out;
}

.confirm-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
}

.confirm-content {
    background: var(--white);
    border-radius: 16px;
    padding: 1.5rem;
    max-width: 90%;
    width: 320px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: scaleIn 0.3s ease-out;
    position: relative;
    z-index: 1;
}

.confirm-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 0.75rem 0;
    text-align: center;
}

.confirm-message {
    font-size: 0.95rem;
    color: var(--gray-700);
    margin: 0 0 1.5rem 0;
    text-align: center;
    line-height: 1.5;
    white-space: pre-line;
}

.erp-error-modal .confirm-content {
    max-width: 95%;
    width: 360px;
}

.erp-error-modal .confirm-title {
    color: var(--danger);
}

.erp-error-modal #erpErrorModalMessage {
    text-align: left;
    max-height: 180px;
    overflow-y: auto;
    word-break: break-word;
    font-size: 0.85rem;
}

.erp-error-instructions {
    font-size: 0.9rem;
    color: var(--gray-700);
    margin: 0 0 1rem 0;
    line-height: 1.5;
}

.erp-error-instructions a {
    color: var(--primary);
    text-decoration: underline;
}

.mobile-error-report-modal .confirm-content {
    max-width: 95%;
    width: 360px;
}

.mobile-error-report-modal .confirm-title {
    color: var(--danger);
}

.mobile-error-report-modal .confirm-message {
    text-align: left;
    margin-bottom: 1rem;
}

.confirm-buttons {
    display: flex;
    gap: 0.75rem;
}

.confirm-btn {
    flex: 1;
    padding: 0.75rem;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.confirm-btn-cancel {
    background: var(--gray-200);
    color: var(--gray-800);
}

.confirm-btn-cancel:active {
    background: var(--gray-300);
    transform: scale(0.97);
}

.confirm-btn-ok {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: var(--white);
    box-shadow: 0 4px 15px 0 rgba(239, 68, 68, 0.3);
}

.confirm-btn-ok:active {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    transform: scale(0.97);
}

/* ========================================
   PRODUCT PREVIEW MODAL (cuando se escanea)
   ======================================== */
.product-preview-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.product-preview-content {
    background: var(--white);
    border-radius: 16px;
    padding: 1.5rem;
    max-width: 90%;
    width: 350px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: scaleIn 0.3s ease-out;
}

@keyframes scaleIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.product-preview-image {
    width: 100%;
    height: 250px;
    background: var(--gray-100);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.product-preview-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-preview-placeholder {
    font-size: 5rem;
    opacity: 0.3;
}

.product-preview-info {
    text-align: center;
}

.product-preview-description {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--gray-900);
    line-height: 1.4;
}

/* ========================================
   MODAL DE AÑADIR AL CARRITO CON CANTIDAD
   ======================================== */
.add-to-cart-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    animation: fadeIn 0.3s ease-out;
}

.add-to-cart-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
}

.add-to-cart-content {
    position: relative;
    background: var(--white);
    border-radius: 20px;
    padding: 0;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    animation: scaleIn 0.4s ease-out;
    max-height: min(85vh, 85dvh);
    min-height: min(560px, 85dvh);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.add-to-cart-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1.5rem 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.close-add-to-cart-btn {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    background: rgba(0, 0, 0, 0.1);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--gray-700);
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 1;
}

.close-add-to-cart-btn:active {
    background: rgba(0, 0, 0, 0.2);
    transform: scale(0.95);
}

.add-to-cart-image-container {
    position: relative;
    width: 100%;
    height: 220px;
    min-height: 220px;
    flex-shrink: 0;
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.add-to-cart-image-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.add-to-cart-placeholder {
    font-size: 5rem;
    opacity: 0.3;
}

.add-to-cart-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.add-to-cart-code {
    font-size: 0.85rem;
    color: var(--gray-600);
    font-weight: 600;
}

.add-to-cart-description {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gray-900);
    line-height: 1.4;
}

.add-to-cart-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.add-to-cart-price.is-loading {
    opacity: 0.55;
    min-height: 1.5rem;
}

.add-to-cart-price-pending {
    letter-spacing: 0.15em;
    color: var(--gray-400);
}

.add-to-cart-price-original {
    font-size: 0.8rem;
    color: var(--gray-500);
    text-decoration: line-through;
    line-height: 1.1;
}

.add-to-cart-price-discount {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--danger);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.add-to-cart-oferta-badge {
    background: linear-gradient(135deg, var(--warning) 0%, #f39c12 100%);
    color: var(--white);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 2px 8px rgba(243, 156, 18, 0.3);
    margin-top: 0.5rem;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(243, 156, 18, 0.3);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 4px 12px rgba(243, 156, 18, 0.5);
    }
}

.add-to-cart-oferta-badge:hover {
    cursor: pointer;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(243, 156, 18, 0.5);
}

/* ========================================
   OVERLAY DETALLE DE PRODUCTO (carousel + ficha)
   ======================================== */
.product-detail-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10010;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: fadeIn 0.25s ease-out;
}

.product-detail-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
}

.product-detail-content {
    position: relative;
    background: var(--white);
    border-radius: 16px;
    padding: 1.25rem;
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: scaleIn 0.3s ease-out;
}

.product-detail-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.08);
    color: var(--gray-700);
    font-size: 1.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background 0.2s;
}

.product-detail-close:hover,
.product-detail-close:focus {
    background: rgba(0, 0, 0, 0.15);
}

.product-detail-header {
    margin-bottom: 1rem;
    padding-right: 2.5rem;
}

.product-detail-code {
    font-size: 0.85rem;
    color: var(--gray-600);
    font-weight: 600;
}

.product-detail-description {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900);
    line-height: 1.35;
}

.product-detail-wc-conjuntos {
    margin-bottom: 1rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--gray-200);
}

.product-detail-wc-conjuntos-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 0.5rem;
}

.product-detail-wc-conjuntos-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.product-detail-wc-conjunto-label {
    display: inline-block;
    padding: 0.4rem 0.75rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--primary);
    background: rgba(120, 81, 169, 0.1);
    border: 1px solid rgba(120, 81, 169, 0.3);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.product-detail-wc-conjunto-label:hover,
.product-detail-wc-conjunto-label:focus {
    background: rgba(120, 81, 169, 0.18);
    border-color: var(--primary);
    color: var(--primary-dark);
    outline: none;
}

.product-detail-carousel {
    position: relative;
    width: 100%;
    min-height: 220px;
    background: var(--gray-100);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.product-detail-carousel-inner {
    position: relative;
    width: 100%;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
    overflow: hidden;
    user-select: none;
}

.product-detail-carousel-inner .product-detail-carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease-out;
}

.product-detail-carousel-inner .product-detail-carousel-slide.active {
    opacity: 1;
    pointer-events: auto;
}

.product-detail-carousel-inner .product-detail-carousel-slide img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.1s ease-out;
    transform-origin: center center;
}

.product-detail-carousel-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.25rem 0.25rem;
    gap: 0.5rem;
    min-height: 48px;
}

.product-detail-carousel-prev,
.product-detail-carousel-next {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.08);
    color: var(--gray-800);
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
}

.product-detail-carousel-prev:hover,
.product-detail-carousel-next:hover {
    background: rgba(0, 0, 0, 0.12);
    transform: scale(1.05);
}

.product-detail-carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.25rem;
    flex: 1;
}

.product-detail-carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: var(--gray-300);
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, transform 0.2s;
}

.product-detail-carousel-dot.active {
    background: var(--primary);
    transform: scale(1.2);
}

.product-detail-recambios-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--gray-200);
}
.product-detail-recambio-btn {
    flex: 1;
    min-width: 140px;
}

.add-to-cart-quantity-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0;
}

.add-to-cart-footer {
    flex-shrink: 0;
    background: var(--white);
    border-top: 1px solid var(--gray-200);
    padding: 0.9rem 1rem calc(0.9rem + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-shadow: 0 -8px 20px rgba(15, 23, 42, 0.08);
}

.add-to-cart-content .add-to-cart-wc-conjuntos {
    margin-top: 0.5rem;
    flex-shrink: 0;
    padding-top: 0.6rem;
    border-top: 1px solid var(--gray-200);
}

.add-to-cart-wc-compat-toggle {
    width: 100%;
    border: 1px solid rgba(120, 81, 169, 0.14);
    background: rgba(120, 81, 169, 0.03);
    color: var(--gray-600);
    border-radius: 10px;
    padding: 0.55rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    cursor: pointer;
    line-height: 1.3;
    box-shadow: 0 1px 6px rgba(120, 81, 169, 0.08);
}

.add-to-cart-wc-compat-toggle-text {
    text-align: left;
}

.add-to-cart-wc-compat-toggle-chevron {
    color: var(--gray-600);
    font-size: 0.72rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

.add-to-cart-wc-conjuntos.is-open .add-to-cart-wc-compat-toggle-chevron {
    transform: rotate(180deg);
}

.add-to-cart-wc-compat-toggle:focus {
    outline: 2px solid rgba(120, 81, 169, 0.35);
    outline-offset: 2px;
    border-radius: 4px;
}

.add-to-cart-wc-compat-list {
    margin-top: 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    max-height: 220px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.add-to-cart-wc-compat-item {
    width: 100%;
    border: 1px solid rgba(120, 81, 169, 0.16);
    border-radius: 10px;
    background: var(--white);
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 0.6rem;
    align-items: center;
    padding: 0.45rem;
    text-align: left;
    cursor: pointer;
}

.add-to-cart-wc-compat-thumb {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.add-to-cart-wc-compat-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.add-to-cart-wc-compat-thumb-fallback {
    display: none;
    color: var(--gray-400);
    font-size: 1.1rem;
}

.add-to-cart-wc-compat-meta {
    min-width: 0;
}

.add-to-cart-wc-compat-name {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1.25;
}

.add-to-cart-wc-compat-desc {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.78rem;
    color: var(--gray-600);
    line-height: 1.3;
}

.quantity-controls-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: var(--gray-100);
    border-radius: 12px;
    padding: 0.75rem 1rem;
}

.qty-btn-modal {
    width: 50px;
    height: 50px;
    border: none;
    background: var(--white);
    color: var(--primary);
    font-size: 1.8rem;
    font-weight: 700;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.qty-btn-modal:active {
    background: var(--primary);
    color: var(--white);
    transform: scale(0.95);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* iOS Safari: evita desajuste entre hitbox y posición visual en botones +/- */
@supports (-webkit-touch-callout: none) {
    #addToCartModal .qty-btn-modal {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        line-height: 1;
    }

    #addToCartModal .qty-btn-modal:active {
        transform: none;
    }
}

.qty-input-modal {
    width: 80px;
    height: 50px;
    border: none;
    background: var(--white);
    color: var(--gray-900);
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    font-family: inherit;
    border-radius: 10px;
    transition: all 0.2s;
    appearance: textfield;
    -moz-appearance: textfield;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.qty-input-modal::-webkit-inner-spin-button,
.qty-input-modal::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.qty-input-modal:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(120, 81, 169, 0.3);
}

/* ========================================
   LOGIN MODAL
   ======================================== */
.login-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    animation: fadeIn 0.3s ease-out;
}

.login-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.login-modal-content {
    position: relative;
    background: var(--white);
    border-radius: 20px;
    padding: 2rem 1.5rem;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: scaleIn 0.4s ease-out;
    max-height: 90vh;
    overflow-y: auto;
}

.login-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.login-modal-header h2 {
    font-size: 1.8rem;
    color: var(--primary);
    font-weight: 700;
    margin: 0;
}

.close-login-btn {
    background: none;
    border: none;
    font-size: 1.8rem;
    color: var(--gray-600);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s;
}

.close-login-btn:hover {
    background: var(--gray-100);
    color: var(--gray-900);
}

/* Modal Enviar Pedido (reutiliza contenido de Caja) */
.enviar-pedido-modal .login-modal-content {
    max-width: 420px;
}

.enviar-pedido-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.enviar-pedido-modal-header h2 {
    font-size: 1.25rem;
    color: var(--primary);
    font-weight: 700;
    margin: 0;
}

.enviar-pedido-modal-body {
    min-height: 80px;
}

.enviar-pedido-modal-body .remote-order-section {
    margin: 0;
}

/* Pantalla Inicio */
.inicio-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 100%;
    padding: 2rem 1rem;
}

/* Tarjeta solicitudes de articulos en Inicio (Dependiente / Comercial) */
.inicio-creaciones-card-wrap {
    width: 100%;
    max-width: 340px;
    padding: 1.25rem;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.inicio-creaciones-card-wrap:hover,
.inicio-creaciones-card-wrap:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(120, 81, 169, 0.2);
}
.inicio-creaciones-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 1rem 0;
}
.inicio-creaciones-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
}
.inicio-creaciones-stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.inicio-creaciones-stat-label {
    font-size: 0.85rem;
    color: var(--gray-600);
}
.inicio-creaciones-stat-num {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
}
.inicio-creaciones-card-hint {
    margin: 0.75rem 0 0;
    font-size: 0.8rem;
    color: var(--gray-500);
    line-height: 1.35;
}

.inicio-familias-section {
    margin-top: 1.25rem;
    padding: 1rem 0 1.5rem;
    border-top: 1px solid var(--gray-200);
}
#appContainerTienda .inicio-familias-section {
    margin-top: 0;
    padding-top: 0.55rem;
}
@media (max-width: 899px) {
    #appContainerTienda .screen-content.inicio-content {
        padding-top: 0.35rem;
    }
    #appContainerTienda .inicio-familias-section {
        padding-top: 0.2rem;
    }
}
.inicio-familias-title {
    margin: 0 0 0.35rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gray-800);
}
.inicio-familias-sub {
    margin: 0 0 0.75rem;
    font-size: 0.82rem;
    color: var(--gray-600);
    line-height: 1.35;
}
.inicio-familias-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.35rem;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
}
.inicio-familias-back-btn {
    border: 1px solid var(--gray-300);
    background: var(--white);
    color: var(--gray-800);
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}
.inicio-familias-back-btn::before {
    content: '\2190';
    margin-right: 0.35rem;
}
.inicio-familias-crumb {
    border: none;
    background: var(--gray-100);
    color: var(--primary);
    padding: 0.35rem 0.55rem;
    border-radius: 8px;
    font-size: 0.85rem;
    cursor: pointer;
    max-width: 100%;
    text-align: left;
}
.inicio-familias-crumb-sep {
    color: var(--gray-400);
    user-select: none;
}
.inicio-familias-hint {
    font-size: 0.85rem;
    color: var(--gray-500);
    margin: 0 0 0.5rem;
}
/* Movil: 2 familias por fila; desde tablet/PC: tantas columnas como quepan (ancho completo) */
.inicio-familias-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    align-items: stretch;
}
@media (max-width: 1023px) {
    .inicio-familias-grid.inicio-familias-grid-root {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (min-width: 900px) {
    .inicio-familias-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 0.75rem;
    }
}

/* PC: celdas mas anchas = menos columnas; cuadrado 1:1 grande para ver imagen completa (contain) */
@media (min-width: 1024px) {
    .inicio-familias-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 1rem;
    }
}
.inicio-familia-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.45rem;
    padding: 0.5rem 0.4rem 0.55rem;
    border-radius: 10px;
    border: 1px solid var(--gray-200);
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    height: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.inicio-familia-tile:hover {
    border-color: var(--primary);
    background: var(--gray-50);
}
.inicio-familia-tile-leaf {
    border-left: 3px solid var(--primary);
}
/* Area 1:1; en PC object-fit contain en la img (sin recorte; bandas gris si la foto no es cuadrada) */
.inicio-familia-tile-img-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    background: var(--gray-100);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.inicio-familia-tile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
    border: none;
    background: transparent;
    display: block;
}
@media (min-width: 1024px) {
    .inicio-familia-tile-img {
        object-fit: contain;
    }
}
.inicio-familia-tile-desc {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1.25;
    word-break: break-word;
    max-width: 100%;
    display: -webkit-box;
    line-clamp: 5;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
    min-height: 0;
}
@media (min-width: 1024px) {
    .inicio-familia-tile-desc {
        font-size: 1rem;
        line-clamp: 5;
        -webkit-line-clamp: 5;
        flex: 1;
        min-height: 0;
    }
}
.inicio-familia-tile-code {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gray-600);
    font-family: ui-monospace, monospace;
    display: none;
}
@media (min-width: 1024px) {
    .inicio-familia-tile {
        border-radius: 12px;
        background: #fff;
        border: 1px solid var(--gray-200);
        padding: 0.6rem 0.7rem;
        flex-direction: column;
        text-align: center;
        gap: 0.45rem;
    }
    .inicio-familia-tile-img-wrap {
        width: 100%;
        height: auto;
        border-radius: 8px;
        background: var(--gray-100);
    }
    .inicio-familia-tile-code {
        display: block;
    }
}
.inicio-familia-tile-root-mobile .inicio-familia-tile-code {
    display: none;
}
@media (max-width: 1023px) {
    .inicio-familia-tile-root-mobile {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 0.9rem;
        padding: 0.9rem 1rem;
        border-radius: 18px;
        border: 1px solid var(--gray-300);
        background: #dcdde0;
    }
    .inicio-familia-tile-root-mobile:hover {
        background: #d2d5d9;
    }
    .inicio-familia-tile-root-mobile .inicio-familia-tile-img-wrap {
        width: 92px;
        height: 92px;
        margin-left: auto;
        order: 2;
        border-radius: 14px;
        background: var(--gray-200);
    }
    .inicio-familia-tile-root-mobile .inicio-familia-tile-desc {
        font-size: clamp(1.45rem, 5.6vw, 2.1rem);
        color: #121316;
        line-height: 1.08;
        display: block;
        overflow: visible;
        order: 1;
    }
}
.inicio-familias-open-search {
    margin-top: 0.25rem;
    width: 100%;
    grid-column: 1 / -1;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.login-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.login-form-group label {
    font-weight: 600;
    color: var(--gray-700);
    font-size: 0.95rem;
}

.login-form-group input {
    padding: 1rem;
    border: 2px solid var(--gray-300);
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.3s;
}

.login-form-group input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(120, 81, 169, 0.1);
}

.login-btn {
    padding: 1rem;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 0.5rem;
}

.login-btn:hover:not(:disabled) {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-purple);
}

.login-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.login-error {
    padding: 1rem;
    background: #fee2e2;
    color: #991b1b;
    border-radius: 10px;
    text-align: center;
    font-size: 0.95rem;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   MENU USER/GUEST SECTIONS
   ======================================== */
.menu-guest {
    text-align: center;
    padding: 2rem 1rem;
}

.guest-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.guest-text {
    color: var(--gray-600);
    margin-bottom: 1.5rem;
    font-size: 1rem;
}

.menu-login-btn {
    width: 100%;
    padding: 1rem;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.menu-login-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-purple);
}

.menu-user {
    display: none;
}

.user-info {
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    border-radius: 15px;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    box-shadow: var(--shadow-purple);
}

.user-info-clickable {
    width: 100%;
    border: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    transition: filter 0.2s, transform 0.2s;
}

.user-info-clickable:hover {
    filter: brightness(1.05);
}

.user-info-clickable:active {
    transform: scale(0.99);
}

.user-info-arrow {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.7);
    margin-left: 0.5rem;
}

.user-details {
    flex: 1;
    color: var(--white);
}

.user-name {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: var(--white);
}

.user-code {
    font-size: 0.9rem;
    opacity: 0.9;
    color: var(--white);
}

.user-subtitle {
    font-size: 0.85rem;
    opacity: 0.85;
    color: var(--white);
    margin-top: 0.15rem;
}

.user-info-view-only {
    cursor: default;
    pointer-events: none;
}

.user-info-view-only:hover,
.user-info-view-only:active {
    filter: none;
    transform: none;
}

.menu-logout-btn {
    width: 100%;
    padding: 1rem;
    background: var(--danger);
    color: var(--white);
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.menu-logout-btn:hover {
    background: #dc2626;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

.menu-version {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 0.8rem;
    color: rgba(0, 0, 0, 0.45);
    text-align: center;
}

/* ========================================
   MENU ACTIONS (Últimas Compras, etc.)
   ======================================== */
.menu-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.menu-action-btn {
    width: 100%;
    padding: 1rem;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.menu-action-icon {
    font-size: 1.5rem;
}

.menu-action-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-purple);
}

#prepedidosScreen .prepedido-card .order-badge {
    display: inline-flex;
}

#prepedidosScreen .prepedido-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0.75rem 0.85rem 0.95rem;
}

#prepedidosScreen .prepedido-actions .btn {
    width: 100%;
}

#presupuestosScreen .prepedido-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0.75rem 0.85rem 0.95rem;
}

#presupuestosScreen .prepedido-actions .btn {
    width: 100%;
}

#presupuestosScreen .order-card-details .order-observaciones {
    margin: 0.65rem 0.65rem 0.5rem;
}

#presupuestosScreen .order-card-details .order-products-list {
    padding-bottom: 0.25rem;
}

#presupuestosScreen .presupuesto-detail-totals {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.35rem 1rem;
    font-size: 0.78rem;
    padding: 0.65rem 1rem 0.85rem;
    margin-top: 0;
    border-top: 1px dashed var(--gray-200);
    align-items: center;
    background: var(--gray-50);
}

#presupuestosScreen .presupuesto-detail-totals strong {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Tarjeta comercial en menú (debajo de datos del cliente) */
.menu-commercial-card.commercial-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    border-radius: 12px;
    margin-bottom: 1rem;
    cursor: pointer;
    transition: all 0.25s;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: var(--shadow-purple);
}

.menu-commercial-card.commercial-card:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.commercial-card-details {
    flex: 1;
    min-width: 0;
}

.commercial-card-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.2rem;
}

.commercial-card-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.commercial-card-arrow {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 300;
}

/* ========================================
   PANTALLA MI PERFIL
   ======================================== */
.profile-content.screen-content {
    padding: 1rem;
    padding-bottom: 2rem;
}

.profile-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.profile-back-btn {
    background: none;
    border: none;
    color: var(--primary);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.5rem 0;
}

.profile-back-btn:active {
    opacity: 0.8;
}

.profile-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0;
}

.herramientas-actions {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.panel-control-global-config {
    padding: 0 1rem 1rem;
    max-width: 40rem;
}

/* Panel Datos de Empresa (ADMINISTRADOR) */
.panel-empresa-almacen-intro {
    padding: 0 1rem 0.75rem;
    font-size: 0.875rem;
    color: var(--gray-600);
    margin: 0;
    line-height: 1.4;
}

.panel-datos-empresa-hub {
    padding: 0 1rem 1rem;
    max-width: 40rem;
}

.panel-empresa-hub-intro {
    font-size: 0.875rem;
    color: var(--gray-700);
    line-height: 1.45;
    margin-bottom: 1rem;
}

.panel-empresa-hub-intro p {
    margin: 0 0 0.5rem 0;
}

.panel-empresa-hub-list-rules {
    margin: 0;
    padding-left: 1.25rem;
}

.panel-empresa-hub-list-rules code {
    font-size: 0.8125rem;
    background: var(--gray-100);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
}

.panel-empresa-nuevo-btn {
    width: 100%;
    margin-bottom: 1.25rem;
}

.panel-empresa-hub-subtitle {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-800);
    margin: 0 0 0.5rem 0;
}

.panel-empresa-hub-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.panel-empresa-hub-loading {
    margin: 0;
    color: var(--gray-600);
    font-size: 0.875rem;
}

.panel-empresa-hub-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.65rem 0.75rem;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 10px;
}

.panel-empresa-hub-code {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--primary);
    min-width: 5.5rem;
}

.panel-empresa-hub-nombre {
    flex: 1;
    min-width: 0;
    font-size: 0.875rem;
    color: var(--gray-800);
}

.panel-empresa-hub-sin-datos {
    color: var(--gray-500);
    font-style: italic;
}

.panel-empresa-hub-smtp-hint {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: var(--gray-700);
}

.panel-empresa-hub-smtp-on,
.panel-empresa-hub-smtp-off {
    font-size: 0.75rem;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    white-space: nowrap;
}

.panel-empresa-hub-smtp-on {
    background: #d1fae5;
    color: #065f46;
}

.panel-empresa-hub-smtp-off {
    background: var(--gray-100);
    color: var(--gray-600);
}

.panel-empresa-smtp-jump-wrap {
    margin: 0 1rem 0.75rem;
}

.panel-empresa-smtp-jump {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary, #2563eb);
    text-decoration: underline;
}

.panel-empresa-smtp-section {
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--gray-200);
}

.panel-empresa-smtp-title {
    margin: 0 0 0.35rem;
    font-size: 1rem;
}

.panel-datos-empresa-pick {
    padding: 0 1rem 1.5rem;
    max-width: 24rem;
}

.panel-empresa-pick-intro {
    font-size: 0.875rem;
    color: var(--gray-700);
    line-height: 1.45;
    margin: 0 0 1rem 0;
}

.panel-empresa-pick-actions {
    margin-top: 1rem;
}

.panel-datos-empresa-form-wrap {
    padding: 0 1rem 1rem;
}

.panel-empresa-pdf-logo-hint {
    font-size: 0.8125rem;
    color: var(--gray-600);
    line-height: 1.4;
    margin: -0.25rem 0 0.75rem 0;
    max-width: 36rem;
    grid-column: 1 / -1;
}

.logo-pdf-escala-field {
    grid-column: 1 / -1;
}

.logo-pdf-escala-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

.logo-pdf-escala-row input[type="range"] {
    flex: 1;
    min-width: 0;
    height: 1.5rem;
}

.logo-pdf-escala-row input[type="number"] {
    width: 4.5rem;
    flex-shrink: 0;
    text-align: center;
}

/* Vista previa presupuesto PDF: hoja A4 real (210mm x 297mm = mismo tamano que PDFKit size A4). Unidades en pt = puntos PDF (1/72 pulgada). */
.pdf-header-preview-wrap {
    margin: 0 0 1rem 0;
    max-width: 100%;
    grid-column: 1 / -1;
}

.app-container-administracion .pdf-header-preview-wrap {
    max-width: 100%;
}

.pdf-header-preview-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gray-700);
    margin: 0 0 0.5rem 0;
    max-width: 42rem;
    line-height: 1.4;
}

.pdf-header-preview-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
}

.pdf-header-preview-zoom-value {
    min-width: 3.5rem;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-800);
    font-variant-numeric: tabular-nums;
}

.pdf-header-preview-viewport {
    overflow: auto;
    width: 100%;
    max-height: min(88vh, 1200px);
    min-height: 240px;
    padding: 10px;
    box-sizing: border-box;
    background: var(--gray-100, #f1f5f9);
    border-radius: 8px;
    border: 1px solid var(--gray-200);
    -webkit-overflow-scrolling: touch;
}

@media (min-width: 900px) {
    .pdf-header-preview-viewport {
        min-height: 65vh;
        max-height: 88vh;
        padding: 16px 20px;
    }

    .pdf-header-preview-toolbar {
        margin-bottom: 0.65rem;
    }
}

.pdf-header-preview-zoom-layer {
    display: inline-block;
    vertical-align: top;
}

.pdf-header-preview-scale {
    display: inline-block;
    vertical-align: top;
}

.pdf-header-preview-sheet {
    box-sizing: border-box;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 0;
}

/* Tamano fisico DIN A4 (coincide con impresion/PDF; desplazar si la pantalla es mas estrecha que la hoja) */
.pdf-header-preview-sheet--a4 {
    width: 210mm;
    min-width: 210mm;
    min-height: 297mm;
    max-width: none;
    flex-shrink: 0;
    border-radius: 2px;
}

/* Mismo PAGE_MARGIN que generate-pdf.js (48); texto titulo desplazado 130+10 pt como en PDF */
.pdf-header-preview-inner {
    position: relative;
    padding: 48pt 48pt 12pt 48pt;
}

/* Bloque PRESUPUESTO / fecha: mismo textX que PDF (margen + zona logo + gap) */
.pdf-header-preview-header-text {
    padding-left: 140pt;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}

/* Logo: coordenadas como en PDF (m + offsetX, m + offsetY desde esquina util); detras del texto (orden DOM + z-index) */
.pdf-header-preview-logo-float {
    position: absolute;
    left: 48pt;
    top: 48pt;
    z-index: 0;
}

.pdf-header-preview-logo {
    display: block;
    object-fit: contain;
    background: #fafbfc;
}

.pdf-header-preview-logo-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: #f1f5f9;
    color: var(--gray-500);
    font-size: 8pt;
    border: 1px dashed var(--gray-300);
    border-radius: 4px;
}

.pdf-header-preview-right {
    flex: 1;
    min-width: 0;
    text-align: right;
    position: relative;
    z-index: 2;
}

.pdf-header-preview-h1 {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 17pt;
    line-height: 1.1;
    color: #1e3a5f;
    margin: 0;
    padding: 0;
}

.pdf-header-preview-meta {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 8pt;
    line-height: 1.35;
    color: #64748b;
    margin-top: 2pt;
}

.pdf-header-preview-lower {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14pt;
    margin-top: 4pt;
    clear: both;
    position: relative;
    z-index: 2;
}

.pdf-header-preview-cif {
    flex: 0 1 46%;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 8pt;
    line-height: 1.35;
    color: #64748b;
}

.pdf-header-preview-cliente-wrap {
    flex: 0 1 54%;
    text-align: right;
}

.pdf-header-preview-cliente-h {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 7.5pt;
    line-height: 1.2;
    color: #1e3a5f;
    margin: 0 0 1pt 0;
}

.pdf-header-preview-cliente-lines {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 8pt;
    line-height: 1.35;
    color: #0f172a;
}

.pdf-header-preview-cliente-lines div {
    margin: 0;
}

.pdf-header-preview-rule {
    margin-top: 6pt;
    height: 0;
    border-top: 0.4pt solid #e2e8f0;
}

.panel-empresa-almacen-readonly-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--gray-50);
    border-radius: 8px;
    border: 1px solid var(--gray-200);
    max-width: 36rem;
}

.panel-empresa-almacen-readonly-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gray-700);
}

.panel-empresa-almacen-readonly {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 0.02em;
}

#panelDatosEmpresaScreen .panel-empresa-form {
    padding: 0 1rem 1.5rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    max-width: 36rem;
}

#panelDatosEmpresaScreen .admin-solicitud-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

#panelDatosEmpresaScreen .admin-solicitud-field-full {
    grid-column: 1 / -1;
}

#panelDatosEmpresaScreen .admin-solicitud-field label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gray-700);
}

#panelDatosEmpresaScreen .admin-solicitud-field input,
#panelDatosEmpresaScreen .admin-solicitud-field textarea,
#panelDatosEmpresaScreen .panel-empresa-almacen-select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.9375rem;
}

#panelDatosEmpresaScreen .admin-solicitud-field input:focus,
#panelDatosEmpresaScreen .admin-solicitud-field textarea:focus,
#panelDatosEmpresaScreen .panel-empresa-almacen-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(120, 81, 169, 0.2);
}

#panelDatosEmpresaScreen .admin-solicitud-field textarea {
    resize: vertical;
    min-height: 3rem;
}

.panel-empresa-logo-preview-wrap {
    margin-top: 0.35rem;
}

.panel-empresa-logo-preview {
    max-width: 200px;
    max-height: 120px;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid var(--gray-200);
    background: var(--white);
}

.panel-empresa-form-actions {
    padding-top: 0.5rem;
}

@media (min-width: 480px) {
    #panelDatosEmpresaScreen .panel-empresa-form {
        grid-template-columns: 1fr 1fr;
    }
    #panelDatosEmpresaScreen .admin-solicitud-field-full,
    #panelDatosEmpresaScreen .panel-empresa-logo-block {
        grid-column: 1 / -1;
    }
}

/* ========================================
   PANTALLA SOLICITUD ARTICULO NUEVO (estetica PC / Android / iPhone)
   ======================================== */
.solicitud-articulo-screen .solicitud-articulo-content {
    padding: 1rem;
    padding-bottom: calc(2rem + env(safe-area-inset-bottom));
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

.solicitud-articulo-header {
    margin-bottom: 1.25rem;
}

.solicitud-articulo-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.solicitud-articulo-wrap {
    background: var(--white);
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
    max-width: 100%;
}

.solicitud-articulo-form .form-group.solicitud-articulo-field {
    margin-bottom: 1rem;
}

.solicitud-articulo-form .form-group.solicitud-articulo-field:last-of-type {
    margin-bottom: 0;
}

.solicitud-articulo-form .form-group label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-700);
}

.solicitud-articulo-form .form-group input[type="text"],
.solicitud-articulo-form .form-group input[type="number"],
.solicitud-articulo-form .form-group select,
.solicitud-articulo-form .form-group textarea {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 1rem;
    color: var(--gray-800);
    background: var(--white);
    -webkit-appearance: none;
    appearance: none;
}

.solicitud-articulo-form .form-group select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2rem;
}

.solicitud-articulo-form .form-group input:focus,
.solicitud-articulo-form .form-group select:focus,
.solicitud-articulo-form .form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(120, 81, 169, 0.15);
}

.solicitud-articulo-form .form-group textarea {
    min-height: 4rem;
    resize: vertical;
}

.solicitud-articulo-row {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.solicitud-articulo-field-half {
    margin-bottom: 1rem;
}

.solicitud-articulo-row .solicitud-articulo-field-half:last-child {
    margin-bottom: 1rem;
}

.solicitud-articulo-field-foto input[type="file"] {
    width: 100%;
    padding: 0.5rem 0;
    font-size: 0.9rem;
    color: var(--gray-700);
    border: 1px dashed var(--gray-300);
    border-radius: 8px;
    background: var(--gray-50);
    cursor: pointer;
}

.solicitud-articulo-field-foto input[type="file"]:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--white);
}

.solicitud-articulo-foto-hint {
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    color: var(--gray-500);
    line-height: 1.35;
}

.solicitud-articulo-combobox {
    position: relative;
}
.solicitud-articulo-combobox #solicitudArticuloProveedorInput {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 1rem;
    color: var(--gray-800);
    background: var(--white);
}
.solicitud-articulo-proveedor-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 2px;
    max-height: 220px;
    overflow-y: auto;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    z-index: 10;
}
.solicitud-articulo-proveedor-option {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.6rem 0.85rem;
    border: none;
    background: none;
    font-size: 1rem;
    color: var(--gray-800);
    cursor: pointer;
}
.solicitud-articulo-proveedor-option:hover,
.solicitud-articulo-proveedor-option:focus {
    background: var(--gray-100);
    outline: none;
}

.solicitud-articulo-submit {
    margin-top: 1.25rem;
    width: 100%;
    padding: 0.85rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 10px;
}

.solicitud-articulo-sin-proveedores {
    padding: 1rem;
    background: var(--gray-100);
    border-radius: 10px;
    border: 1px solid var(--gray-200);
}

/* Mis solicitudes de articulos (Dependiente / Comercial) */
.mis-solicitudes-hint {
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: var(--gray-600);
}
.mis-solicitudes-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.mis-solicitudes-card {
    padding: 1rem;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
}
.mis-solicitudes-card-completo {
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.mis-solicitudes-card-completo:hover {
    background: var(--gray-50);
    box-shadow: var(--shadow-md);
}
.mis-solicitudes-add-hint {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--primary);
}
.mis-solicitudes-estado {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--gray-200);
    margin-right: 0.5rem;
}
.mis-solicitudes-fecha {
    font-size: 0.85rem;
    color: var(--gray-600);
}
.mis-solicitudes-desc {
    margin: 0.5rem 0 0;
    font-size: 0.95rem;
    color: var(--gray-800);
    line-height: 1.35;
}
.mis-solicitudes-codigo {
    margin: 0.35rem 0 0;
    font-size: 0.9rem;
    color: var(--gray-600);
}
.mis-solicitudes-codigo code {
    font-family: monospace;
    background: var(--gray-100);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
}
.mis-solicitudes-add-cart {
    margin-top: 0.75rem;
}
.mis-solicitudes-empty {
    padding: 1rem;
    color: var(--gray-600);
    font-size: 0.95rem;
}

/* Solicitud articulo: 2 columnas en tablets y PC */
@media (min-width: 480px) {
    .solicitud-articulo-row {
        flex-direction: row;
        gap: 1rem;
    }
    .solicitud-articulo-field-half {
        flex: 1;
        margin-bottom: 1rem;
    }
    .solicitud-articulo-row .solicitud-articulo-field-half:last-child {
        margin-bottom: 1rem;
    }
}

/* Vista PC: contenedor centrado y ancho maximo */
@media (min-width: 768px) {
    .solicitud-articulo-screen .solicitud-articulo-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 1.5rem 1rem 2rem;
    }
    .solicitud-articulo-screen .profile-header.solicitud-articulo-header {
        width: 100%;
        max-width: 520px;
    }
    .solicitud-articulo-screen .solicitud-articulo-form {
        width: 100%;
        max-width: 520px;
    }
    .solicitud-articulo-wrap {
        padding: 1.5rem;
    }
    .solicitud-articulo-submit {
        max-width: 280px;
        margin-left: 0;
        margin-right: auto;
    }
}

/* iPhone / Android pequeno: toques mas grandes y espaciado seguro */
@media (max-width: 400px) {
    .solicitud-articulo-form .form-group input[type="text"],
    .solicitud-articulo-form .form-group input[type="number"],
    .solicitud-articulo-form .form-group select,
    .solicitud-articulo-form .form-group textarea {
        padding: 0.75rem 0.85rem;
        min-height: 44px;
    }
    .solicitud-articulo-form .form-group textarea {
        min-height: 5rem;
    }
    .solicitud-articulo-submit {
        min-height: 48px;
    }
}

/* Panel de Control: Conjuntos WC */
.wc-conjuntos-toolbar {
    padding: 0 1rem 0.75rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
}
.wc-conjuntos-filter {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.wc-conjuntos-filter-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-600);
}
.wc-conjuntos-filter-input {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 1rem;
    min-width: 200px;
}
.wc-conjuntos-list {
    padding: 0 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.wc-conjunto-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--white);
    border-radius: 12px;
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-sm);
}
.wc-conjunto-card-info {
    flex: 1;
    min-width: 0;
}
.wc-conjunto-card-info strong { font-weight: 600; color: var(--gray-800); }
.wc-conjunto-codigo { font-size: 0.9rem; color: var(--gray-600); margin-left: 0.25rem; }
.wc-conjunto-activo { font-size: 0.8rem; color: var(--gray-500); margin-left: 0.5rem; }
.wc-conjunto-card-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
.wc-conjuntos-empty { padding: 1.5rem 1rem; text-align: center; color: var(--gray-600); font-size: 0.95rem; }
.wc-conjuntos-error { color: var(--red-600, #b91c1c); }

.wc-conjunto-detail-form .form-group {
    margin-bottom: 1rem;
}
.wc-conjunto-detail-form .form-group label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--gray-700);
}
.wc-conjunto-detail-form .form-group input[type="text"],
.wc-conjunto-detail-form .form-group input[type="number"] {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 1rem;
}
.wc-conjunto-detail-form .form-actions {
    margin-top: 1.25rem;
    margin-bottom: 1rem;
}
.wc-conjunto-imagen-check {
    margin-top: 0.5rem;
}
.wc-conjunto-imagen-check .btn {
    margin-bottom: 0.5rem;
}
.wc-conjunto-imagen-check-result {
    min-height: 1.5rem;
    font-size: 0.85rem;
    margin-top: 0.35rem;
}
.wc-conjunto-imagen-check-msg {
    display: block;
}
.wc-conjunto-imagen-check-loading {
    color: var(--gray-600);
}
.wc-conjunto-imagen-check-ok {
    color: var(--success, #059669);
    font-weight: 500;
}
.wc-conjunto-imagen-check-error {
    color: var(--danger, #dc2626);
}
.wc-conjunto-imagen-check-preview {
    display: block;
    max-width: 120px;
    max-height: 120px;
    object-fit: contain;
    margin-top: 0.5rem;
    border-radius: 8px;
    border: 1px solid var(--gray-200);
}
.wc-conjunto-piezas {
    padding: 1rem;
    border-top: 1px solid var(--gray-200);
}
.wc-conjunto-piezas .profile-section-title {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}
.wc-conjunto-piezas .profile-section-title:first-child { margin-top: 0; }
.wc-piezas-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.wc-piezas-input {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.95rem;
}
.wc-piezas-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem 0;
}
.wc-piezas-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.9rem;
}
.wc-piezas-item-text {
    flex: 1;
    min-width: 0;
    line-height: 1.35;
    color: var(--gray-800);
}
.wc-piezas-item button { flex-shrink: 0; }
.wc-piezas-error { color: var(--red-600, #b91c1c); font-size: 0.9rem; padding: 0.5rem 0; }

/* Recambios (Panel de Control) */
.recambios-buscar { margin-bottom: 1.5rem; }
.recambios-label { display: block; font-size: 0.9rem; font-weight: 600; color: var(--gray-700); margin-bottom: 0.5rem; }
.recambios-producto-actual { margin-top: 0.75rem; padding: 0.75rem; background: var(--gray-50); border-radius: 8px; border: 1px solid var(--gray-200); }
.recambios-producto-text { margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--gray-800); }
.recambios-contenido { margin-top: 1rem; }
.recambios-seccion { margin-bottom: 1.5rem; }

/* Vista Recambios (cliente, Herramientas) - Pagina con imagenes */
.recambios-vista-page {
    overflow-y: auto;
}
.recambios-vista-page-content {
    padding-bottom: 2rem;
    max-width: 100%;
}
.recambios-vista-producto-actual { margin: 0 1rem 1.5rem; }
.recambios-vista-producto-actual .profile-section-title { margin-bottom: 0.75rem; }
/* Tarjeta destacada del producto seleccionado (imagen pequena + texto en movil, imagen grande en escritorio) */
.recambios-vista-card-destacada {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 0.75rem;
    padding: 0;
    background: var(--gray-50);
    border-radius: 12px;
    border: 1px solid var(--gray-200);
    overflow: hidden;
}
@media (min-width: 480px) {
    .recambios-vista-card-destacada {
        grid-template-columns: 200px 1fr;
        gap: 1rem;
    }
}
.recambios-vista-card-destacada .recambios-vista-card-img-wrap {
    width: 100%;
    aspect-ratio: 1;
    background: var(--gray-100);
    align-self: center;
    max-height: 100%;
    overflow: hidden;
}
.recambios-vista-card-destacada .recambios-vista-card-body {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
@media (min-width: 480px) {
    .recambios-vista-card-destacada .recambios-vista-card-body {
        padding: 1rem;
    }
}
.recambios-vista-producto-text { margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--gray-800); }
.recambios-vista-codigo-sec { font-size: 0.85rem; color: var(--gray-600); font-weight: normal; }
.recambios-vista-producto-desc {
    margin: 0.35rem 0 0 0;
    font-size: 0.9rem;
    color: var(--gray-700);
    line-height: 1.4;
}
.recambios-vista-contenido { margin: 0 1rem 2rem; }
.recambios-vista-seccion { margin-bottom: 2rem; }
.recambios-vista-seccion .profile-section-title { margin-bottom: 0.35rem; }
.recambios-vista-seccion-desc {
    font-size: 0.85rem;
    color: var(--gray-600);
    margin: 0 0 0.75rem 0;
}
/* Grid de tarjetas: 2 columnas en movil, 4 columnas en escritorio */
.recambios-vista-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem 1rem;
}
@media (min-width: 768px) {
    .recambios-vista-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}
.recambios-vista-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    text-align: left;
    background: var(--gray-0, #fff);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.recambios-vista-card:hover,
.recambios-vista-card:focus {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    outline: none;
}
.recambios-vista-card-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    background: var(--gray-100);
    overflow: hidden;
}
.recambios-vista-card-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.recambios-vista-card-placeholder {
    width: 100%;
    height: 100%;
    background: var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
}
.recambios-vista-card-desc {
    padding: 0.5rem 0.6rem 0;
    font-size: 0.8rem;
    color: var(--gray-700);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.recambios-vista-card-code {
    padding: 0.25rem 0.6rem 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-600);
}
.recambios-vista-card-price {
    padding: 0.35rem 0.6rem 0.6rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
}
.recambios-vista-empty-grid {
    padding: 1rem;
    text-align: center;
    color: var(--gray-500);
    font-size: 0.9rem;
    font-style: italic;
}
.recambios-vista-lista-error {
    padding: 1rem;
    text-align: center;
    color: var(--red-600, #b91c1c);
    font-size: 0.9rem;
}

.wc-conjunto-preview {
    margin-top: 0.5rem;
    padding: 0.75rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
}
.wc-conjunto-preview-text {
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--gray-800);
}
.wc-conjunto-preview .btn { margin-top: 0.25rem; }

/* WC Completo (configurador en Herramientas) - UX con imagenes y descripciones */
.wc-completo-main {
    padding-bottom: 1.5rem;
}
.wc-completo-intro {
    font-size: 0.95rem;
    color: var(--gray-600);
    margin: 0 1rem 1rem;
    line-height: 1.45;
}
.wc-completo-step {
    margin: 0 1rem 1.5rem;
}
.wc-completo-step-locked {
    opacity: 0.6;
    pointer-events: none;
}
.wc-completo-step-title {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gray-600);
    margin: 0 0 0.75rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.wc-completo-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--primary, #667eea);
    color: var(--white, #fff);
    font-size: 0.8rem;
}
.wc-completo-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    align-items: flex-end;
}
.wc-completo-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.wc-completo-filter-group label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-600);
}
.wc-completo-filter-group select {
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    border: 1px solid var(--gray-300);
    font-size: 0.9rem;
    min-width: 140px;
}
/* Chips de filtro WC Completo (tipo, adosado, nombre) */
.wc-completo-chips-block {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    width: 100%;
}
.wc-completo-chips-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-600);
}
.wc-completo-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}
.wc-completo-chip {
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--gray-300);
    background: var(--white);
    font-size: 0.85rem;
    color: var(--gray-700);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.wc-completo-chip:hover {
    border-color: var(--primary, #667eea);
    color: var(--primary, #667eea);
}
.wc-completo-chip.selected {
    background: var(--primary, #667eea);
    border-color: var(--primary, #667eea);
    color: var(--white, #fff);
}
.wc-completo-chip-nombre-wrap {
    max-width: 280px;
}
.wc-completo-chip-input {
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--gray-300);
    font-size: 0.85rem;
    color: var(--gray-800);
    background: var(--white);
    width: 100%;
    min-width: 0;
}
.wc-completo-chip-input::placeholder {
    color: var(--gray-500);
}
.wc-completo-chip-input:focus {
    outline: none;
    border-color: var(--primary, #667eea);
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}
.wc-completo-grid {
    display: grid;
    gap: 0.75rem;
}
.wc-completo-grid-conjuntos {
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
    .wc-completo-grid-conjuntos {
        grid-template-columns: repeat(4, 1fr);
    }
}
.wc-completo-grid-products {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.wc-completo-card {
    border: 2px solid var(--gray-200);
    border-radius: 12px;
    background: var(--white);
    padding: 0;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    overflow: hidden;
}
.wc-completo-card:hover,
.wc-completo-card:focus {
    border-color: var(--primary, #667eea);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}
.wc-completo-card.selected {
    border-color: var(--primary, #667eea);
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.25);
}
/* Card conjunto (modelo): imagen (o icono) + nombre + descripcion */
.wc-completo-card-conjunto {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
}
.wc-completo-card-conjunto-img-wrap {
    width: 100%;
    aspect-ratio: 1;
    background: var(--gray-100);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}
.wc-completo-card-conjunto-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.wc-completo-card-conjunto-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200) 100%);
    display: block;
}
.wc-completo-card-conjunto-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--gray-800);
    margin-bottom: 0.25rem;
    padding: 0 0.5rem;
}
.wc-completo-card-conjunto-desc {
    font-size: 0.75rem;
    color: var(--gray-500);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 0 0.5rem 0.75rem;
}
/* Card producto: imagen + descripcion + precio */
.wc-completo-card-product {
    display: flex;
    flex-direction: column;
    padding: 0;
}
.wc-completo-card-product-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    background: var(--gray-100);
    overflow: hidden;
}
.wc-completo-card-product-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.wc-completo-card-product-placeholder {
    width: 100%;
    height: 100%;
    background: var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
}
.wc-completo-card-product-desc {
    padding: 0.5rem 0.6rem 0;
    font-size: 0.8rem;
    color: var(--gray-700);
    line-height: 1.35;
    display: block;
    overflow-wrap: break-word;
    white-space: normal;
    max-height: 9em;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.wc-completo-card-product-price {
    padding: 0.35rem 0.6rem 0.6rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary, #667eea);
}
.wc-completo-card-none {
    justify-content: center;
    align-items: center;
    min-height: 100%;
    padding: 1rem 0.75rem;
    background: var(--gray-50, #f9fafb);
    border-style: dashed;
}
.wc-completo-card-none.selected {
    background: #f3f4f6;
}
.wc-completo-card-none-icon {
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 0.5rem;
    border-radius: 50%;
    border: 2px solid var(--gray-400, #9ca3af);
    position: relative;
    flex-shrink: 0;
}
.wc-completo-card-none-icon::before,
.wc-completo-card-none-icon::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1.35rem;
    height: 2px;
    background: var(--gray-500, #6b7280);
    transform: translate(-50%, -50%) rotate(45deg);
}
.wc-completo-card-none-icon::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}
.wc-completo-card-none .wc-completo-card-product-desc {
    text-align: center;
    font-weight: 600;
    color: var(--gray-800, #1f2937);
    max-height: none;
    overflow: visible;
}
.wc-completo-card-none-hint {
    display: block;
    margin-top: 0.25rem;
    padding: 0 0.35rem;
    font-size: 0.72rem;
    color: var(--gray-500, #6b7280);
    text-align: center;
    line-height: 1.3;
}
.wc-completo-loading,
.wc-completo-empty {
    padding: 1rem;
    text-align: center;
    color: var(--gray-500);
    font-size: 0.9rem;
}
/* Resumen y boton Anadir */
.wc-completo-summary {
    margin: 1.5rem 1rem 0;
    padding: 1rem;
    background: linear-gradient(180deg, var(--gray-50) 0%, var(--white) 100%);
    border-radius: 14px;
    border: 1px solid var(--gray-200);
}
.wc-completo-summary-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-800);
    margin: 0 0 0.75rem 0;
}
.wc-completo-summary-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.wc-completo-summary-item {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    grid-template-rows: auto auto;
    gap: 0.15rem 0.5rem;
    align-items: center;
    font-size: 0.85rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--gray-100);
}
.wc-completo-summary-item:last-of-type { border-bottom: none; }
.wc-completo-summary-item img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 6px;
    background: var(--gray-100);
    grid-row: 1 / -1;
}
.wc-completo-summary-item-label {
    font-weight: 600;
    color: var(--gray-700);
    grid-column: 2;
    grid-row: 1;
}
.wc-completo-summary-item-desc {
    color: var(--gray-500);
    font-size: 0.8rem;
    grid-column: 2;
    grid-row: 2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.wc-completo-summary-item-price {
    font-weight: 600;
    color: var(--primary, #667eea);
    grid-column: 3;
    grid-row: 1 / -1;
    align-self: center;
}
.wc-completo-summary-empty {
    color: var(--gray-500);
    font-size: 0.9rem;
    margin: 0;
}
.wc-completo-summary-total {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: 1rem;
}
.wc-completo-add-btn {
    width: 100%;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.profile-section {
    margin-bottom: 1.75rem;
}

.profile-section-title {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-600);
    margin: 0 0 0.5rem 0;
}

.profile-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.profile-section-head .profile-section-title {
    margin: 0;
}

.profile-section-desc {
    font-size: 0.9rem;
    color: var(--gray-600);
    margin: 0 0 0.75rem 0;
    line-height: 1.4;
}

.profile-section-desc-compact {
    margin: 0.5rem 0 0;
}

.profile-toggle-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    cursor: pointer;
    user-select: none;
}

.profile-toggle-input {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}

.profile-toggle-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gray-800);
}

.profile-cache-progress-wrap {
    margin-top: 0.65rem;
}

.profile-cache-progress-track {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: var(--gray-200);
    overflow: hidden;
}

.profile-cache-progress-bar {
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--primary), #9370db);
    transition: width 220ms ease;
}

.profile-cache-progress-label {
    margin: 0.4rem 0 0;
    font-size: 0.78rem;
    color: var(--gray-600);
}

.profile-card {
    background: var(--white);
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
}

.profile-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.5rem 0;
}

.profile-field:not(:last-child) {
    border-bottom: 1px solid var(--gray-100);
}

.profile-field-label {
    font-size: 0.75rem;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.profile-field-value {
    font-size: 1rem;
    font-weight: 500;
    color: var(--gray-800);
}

.profile-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.profile-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.profile-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--gray-700);
}

.profile-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 10px;
    font-size: 1rem;
    color: var(--gray-800);
    background: var(--white);
}

.profile-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(120, 81, 169, 0.2);
}

/* Campo oculto para accesibilidad: formularios de contraseña con contexto de usuario */
.profile-input-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.profile-message {
    font-size: 0.9rem;
    padding: 0.5rem 0;
}

.profile-message.success {
    color: var(--success);
}

.profile-message.error {
    color: var(--danger);
}

.profile-operarios-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.profile-operario-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--white);
    border-radius: 10px;
    border: 1px solid var(--gray-200);
}

.selector-cliente-item {
    cursor: pointer;
}

.selector-cliente-item:hover {
    background: var(--gray-50);
    border-color: var(--primary);
}

.selector-cliente-representando {
    margin: 0 1rem 1rem;
    padding: 1rem 1.25rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 10px;
}

.selector-cliente-representando-texto {
    margin: 0;
    font-size: 0.95rem;
    color: var(--gray-700);
}

.selector-cliente-alias-link {
    margin-left: 0.35rem;
    padding: 0;
    background: none;
    border: none;
    font-size: inherit;
    color: var(--primary);
    text-decoration: underline;
    cursor: pointer;
    font-weight: 600;
}

.selector-cliente-alias-link:hover {
    color: var(--primary-dark, #0d47a1);
}

.selector-cliente-representando-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.selector-cliente-representando-row .selector-cliente-representando-texto {
    flex: 1;
    min-width: 0;
    margin: 0;
}

.selector-cliente-dejar-btn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: var(--danger);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.selector-cliente-dejar-btn:hover {
    background: #dc2626;
}

.selector-cliente-otro-titulo {
    margin: 0 1rem 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-700);
}

.selector-cliente-footer {
    margin: 1.5rem 1rem 1rem;
    display: flex;
    justify-content: center;
}

.selector-cliente-password-btn {
    width: 100%;
    padding: 0.75rem 1rem;
    background: none;
    border: 1px solid var(--gray-300);
    border-radius: 10px;
    font-size: 0.9rem;
    color: var(--gray-600);
    cursor: pointer;
    text-align: center;
}

.selector-cliente-password-btn:hover {
    background: var(--gray-50);
    border-color: var(--gray-400);
    color: var(--gray-800);
}

.profile-operario-info {
    flex: 1;
    min-width: 0;
}

.profile-operario-name {
    font-weight: 600;
    color: var(--gray-800);
    font-size: 1rem;
}

.profile-operario-codigo {
    font-size: 0.85rem;
    color: var(--gray-600);
    margin-top: 0.2rem;
}

.profile-operario-remove {
    background: none;
    border: none;
    color: var(--gray-500);
    font-size: 1.1rem;
    padding: 0.35rem;
    cursor: pointer;
    border-radius: 6px;
    line-height: 1;
}

.profile-operario-remove:hover {
    color: var(--danger);
    background: var(--gray-100);
}

.profile-operarios-empty {
    padding: 1.25rem;
    text-align: center;
    background: var(--gray-50);
    border-radius: 10px;
    border: 1px dashed var(--gray-300);
}

.profile-operarios-empty-text {
    font-size: 0.9rem;
    color: var(--gray-600);
}

.btn-outline-primary {
    background: transparent;
    color: var(--primary);
    border: 1px solid var(--primary);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.btn-outline-primary:hover {
    background: rgba(120, 81, 169, 0.08);
}

.btn-sm {
    padding: 0.4rem 0.85rem;
    font-size: 0.85rem;
}

/* Modal perfil (añadir operario) */
.profile-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
}

.profile-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}

.profile-modal-content {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--white);
    border-radius: 16px 16px 0 0;
    padding: 1.5rem;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
}

.profile-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.profile-modal-header h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0;
}

.profile-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--gray-500);
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
}

.profile-modal-close:hover {
    color: var(--gray-700);
}

.profile-operario-hint {
    font-size: 0.9rem;
    color: var(--gray-600);
    margin: 0 0 1rem 0;
    padding: 0.75rem;
    background: var(--gray-50);
    border-radius: 8px;
    border: 1px solid var(--gray-200);
}

/* ========================================
   PANTALLA COMERCIAL ASIGNADO
   ======================================== */
.commercial-content.screen-content {
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.commercial-detail {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 400px;
}

.commercial-detail-name {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 1rem 0;
}

.commercial-detail-info {
    width: 100%;
    margin-bottom: 1.5rem;
}

.commercial-detail-row {
    font-size: 1rem;
    color: var(--gray-600);
    margin: 0.25rem 0;
    word-break: break-all;
}

.commercial-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
}

.commercial-action-btn {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s;
    text-align: center;
    box-sizing: border-box;
}

.commercial-action-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-purple);
}

.commercial-action-icon {
    font-size: 1.25rem;
}

/* ========================================
   PANTALLA DE HISTORIAL DE COMPRAS
   ======================================== */

/* Section Title */
.section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: 1.5rem;
    text-align: center;
}

/* Button Group */
.button-group {
    display: flex;
    gap: 0.75rem;
}

.btn-secondary {
    background: var(--gray-600);
    color: var(--white);
    border: none;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    flex: 1;
}

.btn-secondary:hover {
    background: var(--gray-700);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Loading State */
.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    gap: 1rem;
}

.loading-state .spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--gray-200);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loading-state p {
    font-size: 1rem;
    color: var(--gray-600);
    font-weight: 500;
}

/* Result Meta Info */
.result-meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--gray-600);
}

.result-purchase-count {
    font-weight: 600;
    color: var(--primary);
}

.result-last-purchase {
    color: var(--gray-500);
}

/* ========================================
   STOCK BADGES
   ======================================== */
.result-stock {
    margin-top: 0.25rem;
}

.result-stock-global {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-top: 0.35rem;
}

.stock-almacen-line {
    display: flex;
    align-items: center;
}

.stock-almacen-line .stock-almacen-label {
    flex-shrink: 0;
}

.stock-badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.4;
}

.stock-verde {
    background-color: #dcfce7;
    color: #15803d;
}

.stock-naranja {
    background-color: #fff7ed;
    color: #c2410c;
}

.stock-rojo {
    background-color: #fee2e2;
    color: #b91c1c;
}

.stock-desconocido {
    background-color: var(--gray-100);
    color: var(--gray-500);
}

/*
 * Stock en tarjetas del carrito: pills en fila (mockup PC).
 * Va DESPUES de .result-stock-global para no ser pisado por flex-direction: column.
 */
#cartScreen .cart-product-stock .result-stock-global,
#cartScreen .cart-product-stock .cart-stock-breakdown,
.cart-product-stock .result-stock-global.cart-stock-breakdown {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.45rem;
}

#cartScreen .cart-product-stock .stock-almacen-line,
.cart-product-stock .stock-almacen-line {
    display: inline-flex;
    width: auto;
    margin: 0;
}

#cartScreen .cart-product-stock .stock-almacen-line .stock-almacen-label,
.cart-product-stock .stock-almacen-line .stock-almacen-label {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.25;
    white-space: nowrap;
}

#cartScreen .cart-product-stock .stock-almacen-label strong,
.cart-product-stock .stock-almacen-label strong {
    font-weight: 800;
    margin-right: 0.15rem;
}

@media (min-width: 721px) {
    #cartScreen .cart-product-stock .stock-almacen-line .stock-almacen-label,
    .cart-product-stock .stock-almacen-line .stock-almacen-label {
        font-size: 0.7rem;
        padding: 0.3rem 0.7rem;
    }
}

/* Select de almacen de stock en la pantalla de busqueda */
.stock-almacen-select {
    appearance: auto;
    cursor: pointer;
}

/* History Item con botón de eliminar */
.history-item {
    position: relative;
}

.btn-delete-history {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    background: var(--danger);
    color: var(--white);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
    z-index: 10;
}

.btn-delete-history:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.5);
}

.btn-delete-history:active {
    transform: scale(0.95);
}

/* ========================================
   PEDIDOS REMOTOS - Temática morada + fondo animado
   ======================================== */
.remote-order-section {
    position: relative;
    padding: 2rem 1.5rem;
    border-radius: 20px;
    margin-bottom: 2rem;
    text-align: center;
    box-shadow: var(--shadow-purple);
    overflow: hidden;
    background: linear-gradient(
        110deg,
        var(--primary-dark) 0%,
        var(--primary) 25%,
        var(--primary-light) 50%,
        var(--primary) 75%,
        var(--primary-dark) 100%
    );
    background-size: 200% 100%;
    animation: checkoutBgMove 24s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes checkoutBgMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.remote-order-section .section-title {
    color: var(--white);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.remote-order-section .section-description {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.remote-order-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

/* Cliente: fuerza separación vertical clara entre Recoger y Enviar en Ruta */
#remoteOrderButtonsNormal {
    flex-direction: column;
    align-items: stretch;
    row-gap: 1.8rem;
    column-gap: 0;
}

/* Dependiente: separa más los dos botones de acción en el modal */
#dependienteOrderButtons {
    flex-direction: column;
    align-items: stretch;
    row-gap: 1.8rem;
    column-gap: 0;
}

/* Dependiente (vista PC): separación adicional para mejor legibilidad */
@media (min-width: 900px) {
    #remoteOrderButtonsNormal {
        row-gap: 2rem;
    }

    #dependienteOrderButtons {
        row-gap: 2rem;
    }
}

.remote-order-section .btn-success {
    background: var(--white);
    color: var(--primary);
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(120, 81, 169, 0.35);
}

.remote-order-section .btn-success:hover {
    background: rgba(255, 255, 255, 0.95);
    color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(120, 81, 169, 0.45);
}

.remote-order-section .btn-escanear-mostrador {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.remote-order-options .divider {
    margin-top: 2rem;
    margin-bottom: 0;
}

.remote-order-section .divider span {
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
}

/* ========================================
   MODAL DE SELECCIÓN DE ALMACÉN
   ======================================== */
.almacen-modal .almacen-modal-content {
    padding: 1.5rem 1.5rem 1.25rem;
}

.almacen-selection {
    padding: 0;
}

.almacen-description {
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.25;
    color: var(--gray-800);
    margin: 0 0 1rem;
    font-weight: 600;
}

@media (min-width: 380px) {
    .almacen-description {
        white-space: nowrap;
        font-size: 1rem;
    }
}

.almacen-cancel-btn {
    display: block;
    width: 100%;
    margin-top: 1.25rem;
    padding: 0.6rem 1rem;
    background: none;
    border: none;
    border-top: 1px solid var(--gray-200);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--gray-600);
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
}

.almacen-cancel-btn:hover {
    color: var(--gray-800);
    background: var(--gray-100);
}

.almacen-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.almacen-btn {
    background: var(--white);
    border: 3px solid var(--gray-200);
    border-radius: 12px;
    padding: 1.15rem 0.6rem;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gray-900);
}

.almacen-btn:hover {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--white);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(120, 81, 169, 0.3);
}

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

.almacen-icon {
    font-size: 2.1rem;
}

.almacen-name {
    font-size: 0.95rem;
    font-weight: 700;
    text-align: center;
}

.almacen-btn.selected {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--white);
    box-shadow: 0 4px 15px rgba(120, 81, 169, 0.4);
}

/* Modal observaciones: posicionado hacia arriba para que el teclado no tape el textarea */
.almacen-observaciones-modal {
    align-items: flex-start;
    justify-content: center;
    padding-top: 1.5rem;
    padding-bottom: 2rem;
}

.almacen-observaciones-modal .almacen-observaciones-modal-content {
    max-width: 420px;
    width: 92%;
}

/* Título: una línea, mayúsculas, tamaño reducido */
.almacen-observaciones-modal .almacen-observaciones-modal-header {
    justify-content: center;
    text-align: center;
}

.almacen-observaciones-modal .almacen-observaciones-modal-header h2 {
    width: 100%;
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.almacen-observaciones-modal-body {
    padding: 0 0 1rem;
}

.almacen-observaciones-advertencia {
    color: #dc2626;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(220, 38, 38, 0.08);
    border-radius: 10px;
    border-left: 4px solid #dc2626;
    line-height: 1.4;
    display: block;
}

.almacen-observaciones-actions {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    margin-top: 1rem;
}

.almacen-observaciones-actions .almacen-volver-btn {
    flex: 0 0 auto;
    min-width: 0;
    padding-left: 1rem;
    padding-right: 1rem;
}

.almacen-observaciones-actions .almacen-enviar-btn {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    border-radius: 12px;
    padding: 0.75rem 1.25rem;
    color: #fff;
    background: linear-gradient(135deg, #059669 0%, #10b981 50%, #34d399 100%);
    background-size: 200% 200%;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
    cursor: pointer;
    transition: box-shadow 0.3s ease, transform 0.2s ease;
    animation: almacen-enviar-glide 4s ease-in-out infinite;
}

.almacen-observaciones-actions .almacen-enviar-btn:hover {
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
    transform: translateY(-1px);
}

.almacen-observaciones-actions .almacen-enviar-btn:active {
    transform: translateY(0);
}

@keyframes almacen-enviar-glide {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.almacen-observaciones-actions .btn-outline-secondary {
    background: var(--white);
    border: 2px solid var(--gray-300);
    color: var(--gray-700);
}

.almacen-observaciones-actions .btn-outline-secondary:hover {
    background: var(--gray-100);
    border-color: var(--gray-400);
}

.almacen-observaciones-block {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gray-200);
}

.observaciones-label {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.35rem;
}

.observaciones-prefix {
    font-size: 0.9rem;
    color: var(--gray-600);
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.observaciones-textarea {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid var(--gray-200);
    border-radius: 10px;
    font-size: 1rem;
    resize: vertical;
    margin-bottom: 1rem;
    min-height: 80px;
}

.almacen-observaciones-block .btn-success,
#enviarEnRutaModal .btn-success {
    width: 100%;
}

.enviar-ruta-aviso {
    background: #fef3c7;
    color: var(--gray-800);
    padding: 1rem;
    border-radius: 10px;
    margin-bottom: 1rem;
    font-size: 1rem;
    line-height: 1.5;
}

/* Responsive para almacén selection */
@media (max-width: 400px) {
    .almacen-options {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   MIS PEDIDOS ENVIADOS - ORDERS SCREEN
   ======================================== */

.my-orders-representando {
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    background: var(--gray-100, #f3f4f6);
    border-radius: 12px;
    border-left: 4px solid var(--primary, #2563eb);
}
.my-orders-representando-texto {
    margin: 0;
    font-size: 0.95rem;
    color: var(--gray-800, #1f2937);
}

.orders-list {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Order Card */
.order-card {
    background: var(--white);
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    margin-bottom: 1rem;
}
.order-card:last-child {
    margin-bottom: 0;
}

.order-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.order-card:active {
    transform: scale(0.99);
}

.order-card-header {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.order-card-main {
    flex: 1;
    min-width: 0;
    padding: 0.65rem 0.9rem 0.5rem;
}

.order-card-top {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.4rem 0.5rem;
    margin-bottom: 0.4rem;
    min-width: 0;
}

.order-card-cliente {
    font-size: 0.85rem;
    color: var(--gray-700);
    margin-bottom: 0.35rem;
}

.order-almacen {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--gray-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Order Badges - Estados */
.order-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.2rem 0.45rem;
    border-radius: 8px;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.25px;
    flex-shrink: 0;
}

.order-type {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.45rem;
    border-radius: 8px;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    flex-shrink: 0;
}

.order-type-remote {
    background: #e0e7ff;
    color: #4338ca;
}

.order-type-presencial {
    background: #fce7f3;
    color: #be185d;
}

.order-badge-pending {
    background: #fef3c7;
    color: #92400e;
}

.order-badge-processing {
    background: #dbeafe;
    color: #1e40af;
}

.order-badge-completed {
    background: #d1fae5;
    color: #065f46;
}

.order-badge-cancelled {
    background: #f3f4f6;
    color: #6b7280;
}

.order-badge-erp-retry {
    cursor: pointer;
    border: none;
    font: inherit;
}

.order-badge-erp-retry:hover {
    opacity: 0.9;
}

.order-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
    margin-bottom: 0.4rem;
    font-size: 0.8rem;
    color: var(--gray-600);
}

.order-date {
    font-variant-numeric: tabular-nums;
}

.order-code,
.order-erp {
    font-size: 0.8rem;
    color: var(--gray-600);
}

.order-erp {
    font-weight: 600;
}

.order-observaciones {
    font-size: 0.8rem;
    color: var(--gray-700);
    background: var(--gray-50);
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
    margin-bottom: 0.4rem;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    max-height: 8em;
    overflow-y: auto;
}

.order-operario {
    font-size: 0.75rem;
    color: var(--gray-500);
    margin-bottom: 0.4rem;
}

.order-card-totals {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.5rem;
    margin-top: 0.2rem;
    border-top: 1px solid var(--gray-200);
}

.order-items {
    font-size: 0.85rem;
    color: var(--gray-700);
    font-weight: 500;
}

.order-total-pair {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
}

.order-total-original {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--gray-500);
    text-decoration: line-through;
}

.order-total {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary);
}

/* Pie minimalista: ver detalles (no boton, estetica moderna) */
.order-card-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    padding: 0.4rem 0.9rem;
    border-top: 1px solid var(--gray-200);
    background: transparent;
    color: var(--gray-500);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.03em;
}

.order-card-trigger-label {
    color: var(--gray-500);
}

.order-card-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.order-card-arrow svg {
    color: var(--gray-400);
    transition: transform 0.25s ease;
}

/* Order Details (expandible) */
.order-card-details {
    border-top: 1px solid var(--gray-200);
    background: var(--gray-50);
}

.order-details-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem;
    color: var(--gray-600);
}

.spinner-small {
    width: 20px;
    height: 20px;
    border: 2px solid var(--gray-300);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Order Products List */
.order-products-list {
    padding: 1rem;
}

.order-product-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: var(--white);
    border-radius: 12px;
    margin-bottom: 0.75rem;
    box-shadow: var(--shadow-sm);
}

.order-product-item:last-child {
    margin-bottom: 0;
}

.order-product-image {
    width: 70px;
    height: 70px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: var(--gray-100);
}

.order-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.order-product-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    background: var(--gray-100);
}

.order-product-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.order-product-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gray-900);
    line-height: 1.3;
}

.order-product-code {
    font-size: 0.8rem;
    color: var(--gray-500);
}

.order-product-details {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-top: 0.25rem;
}

.order-product-discount {
    font-size: 0.78rem;
    font-weight: 600;
    color: #15803d;
    background: rgba(21, 128, 61, 0.1);
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
    white-space: nowrap;
}

.order-product-item--no-reorder {
    padding-right: 1rem;
}

.order-product-qty {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary);
    padding: 0.25rem 0.65rem;
    background: var(--primary-light);
    background: rgba(120, 81, 169, 0.1);
    border-radius: 8px;
}

.order-product-price {
    font-size: 0.85rem;
    color: var(--gray-600);
}

.order-product-subtotal {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-left: auto;
}

/* Reorder Actions */
.order-reorder-actions {
    padding: 1rem;
    border-bottom: 2px solid var(--gray-200);
    background: var(--white);
}

.btn-reorder-all {
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: var(--white);
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(120, 81, 169, 0.2);
}

.btn-reorder-all:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(120, 81, 169, 0.3);
}

.btn-reorder-all:active {
    transform: translateY(0);
}

.btn-reorder-product {
    width: 40px;
    height: 40px;
    padding: 0;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(120, 81, 169, 0.2);
}

.btn-reorder-product:hover {
    background: var(--primary-dark);
    transform: scale(1.05);
}

.btn-reorder-product:active {
    transform: scale(0.95);
}

.btn-reorder-product svg {
    width: 20px;
    height: 20px;
}

/* Empty/Error States */
.order-no-products,
.order-error {
    padding: 2rem;
    text-align: center;
    color: var(--gray-500);
    font-size: 0.95rem;
}

.order-error {
    color: var(--danger);
}

/* Responsive para Orders */
@media (max-width: 400px) {
    .order-card-header {
        padding: 1rem;
    }

    .order-almacen {
        font-size: 1rem;
    }

    .order-badge {
        font-size: 0.7rem;
        padding: 0.3rem 0.6rem;
    }

    .order-type {
        font-size: 0.65rem;
        padding: 0.3rem 0.6rem;
    }

    .order-total {
        font-size: 1.1rem;
    }

    .order-product-item {
        padding: 0.75rem;
    }

    .order-product-image {
        width: 60px;
        height: 60px;
    }

    .order-product-details {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}

/* ========================================
   MODAL DE INFORMACIÓN DE OFERTA
   ======================================== */
.oferta-info-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.oferta-info-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.oferta-info-content {
    position: relative;
    background: var(--white);
    border-radius: 16px;
    max-width: 500px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    padding: 2rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    animation: slideUpOferta 0.3s ease-out;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@keyframes slideUpOferta {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Contenedor de miniaturas de productos */
.oferta-info-images {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.oferta-info-thumbnail {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--gray-100);
    border: 2px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
}

.oferta-info-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.oferta-info-thumbnail-placeholder {
    font-size: 1.5rem;
    color: var(--gray-400);
}

.oferta-info-more {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-color: var(--primary);
}

.oferta-info-more-text {
    color: var(--white);
    font-weight: 700;
    font-size: 1rem;
}

.oferta-info-icon {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 0.5rem;
}

.oferta-info-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    text-align: center;
    margin: 0;
    line-height: 1.3;
}

.oferta-info-description {
    font-size: 1rem;
    color: var(--gray-700);
    text-align: center;
    line-height: 1.6;
    white-space: pre-line;
}

.oferta-info-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.oferta-info-actions .btn {
    flex: 1;
    padding: 0.875rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.oferta-info-actions .btn-secondary {
    background: var(--gray-200);
    color: var(--gray-800);
}

.oferta-info-actions .btn-secondary:hover {
    background: var(--gray-300);
}

.oferta-info-actions .btn-primary {
    background: var(--primary);
    color: var(--white);
}

.oferta-info-actions .btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
}

/* Panel Administracion (rol ADMINISTRACION) */
.app-container-administracion { display: none; }
body.admin-panel-visible .app-container-administracion { display: block !important; top: 0; bottom: 0; }
body.admin-panel-visible .app-header-fixed,
body.admin-panel-visible .menu-sidebar,
body.admin-panel-visible .menu-overlay { display: none !important; }
.app-container-administracion .screen-admin { display: none; flex-direction: column; height: 100%; overflow: hidden; background-color: var(--gray-50); }
.app-container-administracion .screen-admin.screen-active { display: flex; }
.app-container-administracion .screen-content { flex: 1; padding: 1rem; padding-bottom: calc(var(--footer-height) + 1.5rem); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.app-container-administracion .screen-content-detail { padding-top: 0.5rem; padding-left: 1rem; padding-right: 1rem; }
.app-container-administracion .screen-header { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; background: var(--white); border-bottom: 1px solid var(--gray-200); }
.app-container-administracion .screen-header > h2 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--gray-800);
}
.app-container-administracion .screen-header-detail .admin-detail-header-row { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.app-container-administracion .screen-header-detail .admin-detail-header-row h2 { margin: 0; flex-shrink: 0; }
.app-container-administracion .admin-detail-header-meta { font-size: 0.8125rem; color: var(--gray-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.app-container-administracion .admin-inicio-title { font-size: 1.5rem; margin-bottom: 0.5rem; }
.app-container-administracion .admin-inicio-subtitle { color: var(--gray-600); margin-bottom: 1rem; }
.app-container-administracion .admin-stat-number { font-size: 2.5rem; font-weight: 700; color: var(--primary); margin-bottom: 1.5rem; }
.app-container-administracion .bottom-nav-admin { position: fixed; bottom: 0; left: 0; right: 0; background: var(--white); border-top: 1px solid var(--gray-200); display: flex; justify-content: space-around; align-items: center; height: var(--footer-height); padding: 0.75rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom)); z-index: 999; }
.app-container-administracion .nav-item-admin { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.5rem; background: none; border: none; cursor: pointer; color: var(--gray-600); border-radius: 12px; }
.app-container-administracion .nav-item-admin.active { color: var(--primary); background: rgba(120, 81, 169, 0.1); }
.app-container-administracion .admin-list { display: flex; flex-direction: column; gap: 0.5rem; }
.app-container-administracion .admin-solicitud-card { display: block; width: 100%; text-align: left; padding: 1rem; background: var(--white); border: 1px solid var(--gray-200); border-radius: 8px; cursor: pointer; }
.app-container-administracion .admin-solicitud-estado { display: inline-block; padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.75rem; background: var(--gray-200); margin-right: 0.5rem; }
.app-container-administracion .admin-solicitud-fecha { font-size: 0.85rem; color: var(--gray-600); }
.app-container-administracion .admin-solicitud-desc { display: block; margin-top: 0.25rem; font-size: 0.9rem; }
.app-container-administracion .admin-detail-block { margin-bottom: 1rem; }
.app-container-administracion .admin-detail-block p { margin: 0.5rem 0; }
.app-container-administracion .admin-detail-foto { max-width: 100%; height: auto; border-radius: 8px; }
.app-container-administracion .admin-detail-actions { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--gray-200); display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.app-container-administracion .admin-detail-btn-volver { margin-right: 0.5rem; }
.app-container-administracion .admin-detail-actions-group { display: inline-flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.app-container-administracion .admin-detail-btn-completar { margin-left: auto; }
.app-container-administracion .admin-detail-completar { margin-top: 0.5rem; padding: 1rem; background: var(--white); border: 1px solid var(--gray-200); border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.app-container-administracion .admin-detail-completar-title { margin: 0 0 0.35rem; font-size: 1rem; font-weight: 700; color: var(--gray-800); }
.app-container-administracion .admin-detail-completar-hint { margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--gray-600); line-height: 1.4; }
.app-container-administracion .admin-detail-completar-check { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0; margin-top: 0.5rem; font-size: 0.9rem; cursor: pointer; }
.app-container-administracion .admin-detail-completar-row { margin-bottom: 0.5rem; }
.app-container-administracion .admin-detail-completar-row label { display: block; margin-bottom: 0.25rem; font-size: 0.9rem; font-weight: 600; }
.app-container-administracion .admin-detail-completar-row input { width: 100%; max-width: 220px; padding: 0.5rem 0.75rem; border: 1px solid var(--gray-300); border-radius: 6px; }
.app-container-administracion .admin-detail-completar-row select { width: 100%; max-width: 280px; padding: 0.5rem 0.75rem; border: 1px solid var(--gray-300); border-radius: 6px; }
.app-container-administracion .admin-detail-btn-completar { margin-left: auto; background: var(--primary); color: var(--white); font-weight: 700; }
.app-container-administracion .admin-detail-btn-completar:hover { background: var(--primary-dark, #5a3d8a); color: var(--white); }
.app-container-administracion .admin-proveedores-hint { margin-bottom: 1rem; font-size: 0.9rem; color: var(--gray-600); }
.app-container-administracion .admin-proveedor-alias-count { font-size: 0.8rem; color: var(--gray-500); margin-left: 0.5rem; }
.app-container-administracion .admin-proveedor-alias-list { list-style: none; padding: 0; margin: 0 0 1rem; }
.app-container-administracion .admin-proveedor-alias-item { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0; border-bottom: 1px solid var(--gray-100); }
.app-container-administracion .admin-proveedor-alias-empty { color: var(--gray-500); font-size: 0.9rem; padding: 0.5rem 0; }
.app-container-administracion .admin-proveedor-alias-add { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.app-container-administracion .admin-proveedor-alias-add input { flex: 1; min-width: 120px; padding: 0.5rem 0.75rem; border: 1px solid var(--gray-300); border-radius: 6px; }
.app-container-administracion .admin-proveedor-alias-del { padding: 0.25rem 0.5rem; font-size: 0.8rem; }

/* Detalle solicitud: layout tipo pagina de producto (PC) */
.app-container-administracion .admin-solicitud-detail { max-width: 100%; padding-bottom: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.app-container-administracion .admin-solicitud-product-page { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 0; }
.app-container-administracion .admin-solicitud-gallery { flex-shrink: 0; background: var(--white); border: 1px solid var(--gray-200); border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: 200px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.app-container-administracion .admin-solicitud-foto { width: 100%; max-width: 100%; height: auto; max-height: 400px; object-fit: contain; display: block; }
.app-container-administracion .admin-solicitud-foto-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; padding: 2rem; color: var(--gray-500); font-size: 0.9rem; min-height: 200px; }
.app-container-administracion .admin-solicitud-foto-placeholder-icon { font-size: 3rem; opacity: 0.5; }
.app-container-administracion .admin-solicitud-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.app-container-administracion .admin-solicitud-meta-badge { display: inline-block; padding: 0.25rem 0.6rem; border-radius: 6px; font-weight: 600; background: var(--gray-200); color: var(--gray-800); }
.app-container-administracion .admin-solicitud-meta-fecha { color: var(--gray-600); }
.app-container-administracion .admin-solicitud-meta-codigo { color: var(--gray-700); }
.app-container-administracion .admin-solicitud-meta-codigo code { font-family: ui-monospace, monospace; font-size: 0.85em; background: var(--gray-100); padding: 0.15rem 0.4rem; border-radius: 4px; }
.app-container-administracion .admin-solicitud-codigo-asignado { margin: 0; }
.app-container-administracion .admin-detail-codigo { font-family: ui-monospace, monospace; background: var(--gray-100); padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.9em; }
.app-container-administracion .admin-detail-observaciones { white-space: pre-wrap; word-break: break-word; display: block; margin-top: 0.25rem; }
.app-container-administracion .admin-solicitud-card { padding: 1rem; background: var(--white); border: 1px solid var(--gray-200); border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.app-container-administracion .admin-solicitud-fields { display: grid; grid-template-columns: 1fr; gap: 0.5rem 0.75rem; }
.app-container-administracion .admin-solicitud-row-1 { display: grid; grid-template-columns: 1fr; gap: 0.5rem 0.75rem; }
.app-container-administracion .admin-solicitud-row-2 { display: grid; grid-template-columns: 1fr; gap: 0.5rem 0.75rem; }
.app-container-administracion .admin-solicitud-field input#adminSolicitudPagina { max-width: 5em; }
.app-container-administracion .admin-solicitud-field input#adminSolicitudPrecio { max-width: 8em; }
.app-container-administracion .admin-solicitud-field-full { grid-column: 1 / -1; }
.app-container-administracion .admin-solicitud-field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.app-container-administracion .admin-solicitud-field label { font-size: 0.8125rem; font-weight: 600; color: var(--gray-700); letter-spacing: 0.01em; }
.app-container-administracion .admin-solicitud-field input,
.app-container-administracion .admin-solicitud-field textarea,
.app-container-administracion .admin-solicitud-field select { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--gray-300); border-radius: 8px; font-size: 0.9375rem; transition: border-color 0.15s ease; }
.app-container-administracion .admin-solicitud-field input:focus,
.app-container-administracion .admin-solicitud-field textarea:focus,
.app-container-administracion .admin-solicitud-field select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(120, 81, 169, 0.2); }
.app-container-administracion .admin-solicitud-field textarea { resize: vertical; min-height: 3rem; }
@media (min-width: 768px) {
    .app-container-administracion .screen-header {
        position: relative;
        justify-content: center;
        min-height: 3.1rem;
        padding-left: 5.5rem;
        padding-right: 5.5rem;
    }

    .app-container-administracion .screen-header > .profile-back-btn {
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
    }

    .app-container-administracion .screen-header > h2 {
        width: 100%;
        text-align: center;
        font-size: 1.25rem;
    }

    .app-container-administracion .screen-header-detail .admin-detail-header-row {
        width: 100%;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        gap: 0.2rem;
        text-align: center;
    }

    .app-container-administracion .screen-header-detail .admin-detail-header-row h2 {
        width: 100%;
        text-align: center;
    }

    .app-container-administracion .screen-header-detail .admin-detail-header-meta {
        white-space: normal;
        text-align: center;
    }

    .app-container-administracion .screen-content { padding: 1.25rem 1.5rem; padding-bottom: calc(var(--footer-height) + 1.5rem); }
    .app-container-administracion .screen-content-detail { padding-top: 0.5rem; padding-left: 1.25rem; padding-right: 1.5rem; }
    .app-container-administracion .admin-solicitud-product-page { flex-direction: row; align-items: flex-start; gap: 1.5rem; }
    .app-container-administracion .admin-solicitud-gallery { width: 360px; max-width: 42%; min-height: 300px; position: sticky; top: 1rem; }
    .app-container-administracion .admin-solicitud-foto { max-height: 440px; }
    .app-container-administracion .admin-solicitud-info { gap: 1rem; }
    .app-container-administracion .admin-solicitud-fields { grid-template-columns: 1fr 1fr; gap: 0.5rem 1rem; }
    .app-container-administracion .admin-solicitud-row-1 { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
    .app-container-administracion .admin-solicitud-row-2 { grid-column: 1 / -1; grid-template-columns: 2fr 1fr 1fr; }
    .app-container-administracion .admin-detail-completar { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; gap: 0.5rem 1rem; align-items: center; margin-top: 0.5rem; }
    .app-container-administracion .admin-detail-completar-title { grid-column: 1 / -1; margin-bottom: 0; }
    .app-container-administracion .admin-detail-completar-hint { grid-column: 1 / -1; margin-bottom: 0.5rem; }
    .app-container-administracion .admin-detail-completar-row { grid-column: 1; margin-bottom: 0; }
    .app-container-administracion .admin-detail-completar-row input { max-width: 200px; }
    .app-container-administracion .admin-detail-completar-check { grid-column: 2; margin-top: 0; justify-self: start; }
    .app-container-administracion .admin-detail-actions { gap: 0.75rem; }
    .app-container-administracion .admin-detail-btn-completar { margin-left: auto; min-width: 120px; }
}
@media (min-width: 1024px) {
    .app-container-administracion .admin-solicitud-detail { max-width: 920px; margin: 0 auto; }
    .app-container-administracion .admin-solicitud-gallery { width: 400px; min-height: 340px; }
    .app-container-administracion .screen-content { padding: 1.5rem 2rem; padding-bottom: calc(var(--footer-height) + 1.5rem); }
    .app-container-administracion .screen-content-detail { padding-top: 0.5rem; padding-left: 1.5rem; padding-right: 2rem; }
}

/* Panel admin: familias primera fila Inicio (bucket fotos_familias) */
.familias-admin-intro {
    font-size: 0.88rem;
    color: var(--gray-600);
    line-height: 1.45;
    margin: 0 0 1rem;
}

.panel-pedidos-erp-intro {
    font-size: 0.88rem;
    color: var(--gray-600);
    line-height: 1.45;
    margin: 0 0 1rem;
}
.familias-admin-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 1rem;
}
.familias-admin-loading,
.familias-admin-empty {
    font-size: 0.9rem;
    color: var(--gray-600);
    margin: 0;
}
.familias-admin-card {
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    background: var(--white);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.familias-admin-card-head {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}
.familias-admin-card-cod {
    font-family: ui-monospace, monospace;
    font-weight: 700;
    font-size: 1rem;
    color: var(--gray-900);
}
.familias-admin-card-erp {
    font-size: 0.82rem;
    color: var(--gray-600);
    line-height: 1.35;
    word-break: break-word;
}
.familias-admin-card-body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.familias-admin-card-preview-wrap {
    align-self: center;
    width: 120px;
    height: 120px;
    border-radius: 10px;
    border: 1px solid var(--gray-200);
    background: var(--gray-50);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.familias-admin-card-preview {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.familias-admin-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-top: 0.25rem;
}
.familias-admin-input {
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.9rem;
}
.familias-admin-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.84rem;
    color: var(--gray-800);
    margin-top: 0.25rem;
}
.familias-admin-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
}
.familias-admin-file {
    font-size: 0.85rem;
}
.familias-admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.35rem;
}
.familias-admin-file-hint {
    font-size: 0.72rem;
    color: var(--gray-500);
    margin: 0;
    word-break: break-all;
}

.encargados-comerciales-intro {
    font-size: 0.88rem;
    color: var(--gray-600);
    line-height: 1.45;
    margin: 0 0 1rem;
}

.encargados-comerciales-layout {
    display: grid;
    grid-template-columns: minmax(220px, 34%) 1fr;
    gap: 1rem;
    align-items: start;
}

@media (max-width: 768px) {
    .encargados-comerciales-layout {
        grid-template-columns: 1fr;
    }
}

.encargados-comerciales-subtitle {
    font-size: 0.95rem;
    margin: 0 0 0.65rem;
    color: var(--gray-800);
}

.encargados-comerciales-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.encargados-comerciales-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    width: 100%;
    text-align: left;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    background: var(--white);
    cursor: pointer;
}

.encargados-comerciales-item.is-selected {
    border-color: var(--primary-color, #2563eb);
    background: #eff6ff;
}

.encargados-comerciales-item-num {
    font-weight: 700;
    font-size: 0.85rem;
}

.encargados-comerciales-item-name {
    font-size: 0.88rem;
    color: var(--gray-800);
}

.encargados-comerciales-item-count {
    font-size: 0.75rem;
    color: var(--gray-500);
}

.encargados-comerciales-detail-hint {
    font-size: 0.85rem;
    color: var(--gray-600);
    margin: 0;
}

.encargados-comerciales-detail {
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 0.85rem;
    background: var(--white);
}

.encargados-comerciales-add-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-end;
    margin-bottom: 0.85rem;
}

.encargados-comerciales-label {
    display: block;
    width: 100%;
    font-size: 0.82rem;
    color: var(--gray-700);
    margin-bottom: 0.25rem;
}

.encargados-comerciales-select {
    flex: 1 1 220px;
    min-width: 180px;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.88rem;
}

.encargados-comerciales-encargados-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.encargados-comerciales-encargado-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    background: var(--gray-50);
}

.encargados-comerciales-encargado-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.encargados-comerciales-encargado-meta,
.encargados-comerciales-encargado-email {
    font-size: 0.78rem;
    color: var(--gray-600);
    word-break: break-word;
}

.encargados-comerciales-no-email {
    color: #b45309;
}

.encargados-comerciales-empty {
    font-size: 0.85rem;
    color: var(--gray-600);
    margin: 0;
}

/* --- Panel admin: emails pedidos (copia global y encargados almacen) --- */
.pedidos-email-admin-intro {
    font-size: 0.9rem;
    color: var(--gray-600);
    margin: 0 0 1rem;
    line-height: 1.45;
}

.pedidos-email-admin-add-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-end;
    margin-bottom: 1rem;
}

.pedidos-email-admin-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.35rem;
}

.pedidos-email-admin-input {
    flex: 1 1 220px;
    min-width: 0;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.95rem;
}

.pedidos-email-admin-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pedidos-email-admin-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    background: #fff;
}

.pedidos-email-admin-row-email {
    font-size: 0.95rem;
    word-break: break-word;
}

.pedidos-email-admin-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .pedidos-email-admin-layout {
        grid-template-columns: minmax(220px, 1fr) minmax(280px, 1.2fr);
    }
}

.pedidos-email-admin-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.pedidos-email-admin-subtitle {
    font-size: 1rem;
    margin: 0 0 0.5rem;
}

.pedidos-email-admin-encargados-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pedidos-email-admin-encargado-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    width: 100%;
    text-align: left;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
}

.pedidos-email-admin-encargado-item.is-selected {
    border-color: var(--primary-color, #2563eb);
    background: rgba(37, 99, 235, 0.06);
}

.pedidos-email-admin-encargado-email {
    font-weight: 600;
    font-size: 0.95rem;
    word-break: break-word;
}

.pedidos-email-admin-encargado-almacenes {
    font-size: 0.8rem;
    color: var(--gray-600);
}

.pedidos-email-admin-detail-hint {
    font-size: 0.85rem;
    color: var(--gray-600);
    margin: 0 0 0.75rem;
}

.pedidos-email-admin-detail {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    background: #fff;
}

.pedidos-email-admin-almacenes-fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

.pedidos-email-admin-almacenes-checks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.pedidos-email-admin-almacen-check {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9rem;
}

.pedidos-email-admin-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pedidos-email-admin-fieldset {
    border: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pedidos-email-admin-radio {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9rem;
}

.pedidos-email-admin-source-wrap {
    margin-top: 0.25rem;
}

.pedidos-email-admin-select {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.95rem;
    background: #fff;
}

.pedidos-email-admin-encargado-modo {
    font-size: 0.78rem;
    color: var(--gray-500);
}

/* --- Activos empresa --- */
.activos-inicio-card {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gray-200);
}

.admin-activos-alertas-count {
    margin: -1rem 0 1.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gray-600);
}

.admin-activos-alertas-count--warning {
    color: #b45309;
}

.activos-worker-avisos {
    margin-bottom: 1rem;
}

.activos-hub-actions {
    margin-bottom: 1rem;
}

.activos-hub-actions .btn {
    width: 100%;
}

.activos-hub-search-wrap,
.activos-hub-filters {
    margin-bottom: 1rem;
}

.activos-admin-list-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(9rem, 11rem) minmax(9rem, 11rem);
    gap: 0.65rem;
    margin-bottom: 1rem;
    align-items: center;
}

.activos-admin-list-search,
.activos-hub-search.activos-admin-list-search {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--gray-300);
    border-radius: 10px;
    font-size: 0.95rem;
    background: #fff;
}

.activos-admin-list-almacen-filter {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 10px;
    font-size: 0.9rem;
    background: #fff;
}

.activos-admin-list-alerta-filter {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 10px;
    font-size: 0.9rem;
    background: #fff;
}

.activos-admin-alertas-panel {
    margin-bottom: 1rem;
}

.activos-admin-load-error {
    padding: 1rem 1.1rem;
    border: 1px solid #f5c6cb;
    border-radius: 12px;
    background: #fff5f5;
    color: #721c24;
}

.activos-admin-load-error-title {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
}

.activos-admin-load-error-msg {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
}

.activos-admin-load-error-hint {
    margin: 0;
    font-size: 0.85rem;
    color: #856404;
}

.activos-admin-alertas-panel-inner {
    padding: 1rem 1.1rem;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    background: #fff;
}

.activos-admin-alertas-panel-inner--ok {
    border-color: #c8e6c9;
    background: #f1f8f4;
}

.activos-admin-alertas-title {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    font-weight: 600;
}

.activos-admin-alertas-ok {
    margin: 0;
    font-size: 0.9rem;
    color: var(--gray-700);
}

.activos-admin-alertas-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.activos-admin-alertas-chip {
    border: 1px solid var(--gray-300);
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
    background: #fff;
    cursor: pointer;
}

.activos-admin-alertas-chip--warning {
    border-color: #f0c36d;
    background: #fff8e8;
    color: #8a5a00;
}

.activos-admin-alertas-chip--danger {
    border-color: #f0a0a0;
    background: #fef2f2;
    color: #991b1b;
}

.activos-admin-alertas-chip--active {
    border-color: var(--primary, #2563eb);
    background: #eff6ff;
    font-weight: 600;
}

.activos-admin-alertas-chip--danger.activos-admin-alertas-chip--active {
    border-color: #dc2626;
    background: #fee2e2;
}

.activos-admin-alertas-chip--warning.activos-admin-alertas-chip--active {
    border-color: #d97706;
    background: #fef3c7;
}

.activos-admin-alertas-scroll {
    max-height: 14rem;
    overflow-y: auto;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    background: #fafafa;
}

.activos-admin-alertas-scroll-empty {
    margin: 0;
    padding: 0.85rem 1rem;
    font-size: 0.88rem;
    color: var(--gray-600);
}

.activos-admin-alertas-scroll .activos-admin-alertas-list {
    margin: 0;
    padding: 0 0.65rem;
}

.activos-admin-alertas-scroll .activos-admin-alertas-item-btn {
    padding: 0.6rem 0.15rem;
}

.activos-admin-alertas-list {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
}

.activos-admin-alertas-item-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: 0.55rem 0;
    border: none;
    border-bottom: 1px solid var(--gray-200);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.activos-admin-alertas-item:last-child .activos-admin-alertas-item-btn {
    border-bottom: none;
}

.activos-admin-alertas-item-name {
    font-weight: 600;
    font-size: 0.92rem;
}

.activos-admin-alertas-item-meta {
    font-size: 0.82rem;
    color: var(--gray-600);
}

.activos-admin-alertas-ver-todos {
    margin-top: 0.25rem;
}

.activos-hub-alert-list-header {
    margin-bottom: 0.85rem;
}

.activos-hub-alert-list-title {
    margin: 0.5rem 0 0;
    font-size: 0.92rem;
    color: var(--gray-700);
}

.activos-admin-list-filters-empty,
.activos-hub-search-empty {
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
    color: var(--gray-600);
}

.activos-admin-list-filter-hidden {
    display: none !important;
}

@media (max-width: 560px) {
    .activos-admin-list-filters {
        grid-template-columns: 1fr;
    }
}

.activos-hub-search {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--gray-300);
    border-radius: 10px;
    font-size: 0.95rem;
    background: #fff;
}

.activos-hub-search:focus {
    outline: none;
    border-color: var(--primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.activos-hub-search-empty {
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
    color: var(--gray-600);
}

.activos-hub-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.activos-hub-card,
.activos-hub-search-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    text-align: left;
    width: 100%;
    padding: 1rem;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

.activos-hub-card-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 10px;
    background: #eef2ff;
    color: var(--primary, #4f46e5);
    line-height: 1;
}

.activos-hub-card-icon-svg {
    display: block;
    flex-shrink: 0;
}

.activos-hub-card-body,
.activos-hub-search-item-body {
    flex: 1;
    min-width: 0;
}

.activos-hub-card-title {
    display: block;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.35rem;
}

.activos-hub-search-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.activos-hub-search-item-head .activos-hub-card-title {
    margin-bottom: 0;
    flex: 1;
    min-width: 0;
}

.activos-hub-search-badge {
    flex-shrink: 0;
    box-shadow: none;
}

.activos-hub-card-meta {
    display: block;
    font-size: 0.85rem;
    color: var(--gray-600);
}

.activos-list-item {
    margin-bottom: 0.5rem;
}

.activos-list-id {
    font-size: 0.85rem;
    color: var(--gray-600);
}

.activos-list-meta {
    font-size: 0.8rem;
    color: var(--gray-600);
}

.activos-badge {
    display: inline-block;
    font-size: 0.75rem;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    margin-top: 0.25rem;
}

.activos-badge-itv-ok {
    background: #dcfce7;
    color: #166534;
}

.activos-badge-itv-aviso {
    background: #fef3c7;
    color: #92400e;
}

.activos-badge-itv-vencida {
    background: #fee2e2;
    color: #991b1b;
}

.activos-badge-rueda-aviso {
    background: #fef3c7;
    color: #92400e;
}

.activos-badge-rueda-vencida {
    background: #fee2e2;
    color: #991b1b;
}

.activos-badge-permanencia-ok {
    background: #dcfce7;
    color: #166534;
}

.activos-badge-permanencia-aviso {
    background: #fef3c7;
    color: #92400e;
}

.activos-badge-permanencia-vencida {
    background: #fee2e2;
    color: #991b1b;
}

.activos-badge-garantia-ok {
    background: #dcfce7;
    color: #166534;
}

.activos-badge-garantia-aviso {
    background: #fef3c7;
    color: #92400e;
}

.activos-badge-garantia-vencida {
    background: #fee2e2;
    color: #991b1b;
}

.activos-garantia-form-alerta,
.activos-permanencia-form-alerta {
    margin-top: -0.25rem;
    margin-bottom: 0.75rem;
}

.activos-form-alert-banner {
    margin: 0 0 1rem;
    padding: 0.9rem 1rem;
    border-radius: 12px;
    border: 1px solid #fcd34d;
    background: #fffbeb;
}

.activos-form-alert-banner--danger {
    border-color: #fca5a5;
    background: #fef2f2;
}

.activos-form-alert-banner--info {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.activos-form-alert-banner-kicker {
    margin: 0 0 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #92400e;
}

.activos-form-alert-banner--danger .activos-form-alert-banner-kicker {
    color: #991b1b;
}

.activos-form-alert-banner-title {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    font-weight: 700;
}

.activos-form-alert-banner-msg {
    margin: 0;
    font-size: 0.95rem;
}

.activos-form-alert-banner-more {
    margin: 0.65rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.85rem;
}

.activos-form-alert-focus {
    outline: 2px solid #f59e0b;
    outline-offset: 3px;
    border-radius: 10px;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.15);
}

.activos-telefono-band-alertas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

.activos-admin-list-alertas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.35rem;
}

.activos-vehiculo-ficha-body .activos-admin-list-alertas,
.activos-telefono-band-title-block .activos-admin-list-alertas,
.activos-ordenador-band-open .activos-admin-list-alertas,
.admin-list-item.activos-list-item > .activos-admin-list-alertas {
    width: 100%;
}

.activos-admin-list-alerta {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.activos-admin-list-alerta--danger {
    background: #fee2e2;
    color: #991b1b;
}

.activos-admin-list-alerta--warning {
    background: #fef3c7;
    color: #92400e;
}

.activos-admin-list-alerta--info {
    background: #e0e7ff;
    color: #3730a3;
}

.activos-admin-list-alerta--more {
    background: var(--gray-100);
    color: var(--gray-600);
    text-transform: none;
    font-weight: 600;
}

.activos-mis-estado {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 1rem;
    text-align: center;
}

.activos-mis-estado-msg {
    margin: 0;
    color: var(--gray-600);
}

.activos-mis-estado--error .activos-mis-estado-msg {
    color: #991b1b;
}

.activos-mis-stale-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    background: #fef3c7;
    color: #92400e;
    border-radius: 6px;
    font-size: 0.85rem;
}

.activos-mis-stale-retry {
    border: none;
    background: #92400e;
    color: #fff;
    padding: 0.3rem 0.7rem;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
}

.app-container-administracion .activos-ordenador-form-card--with-media {
    display: grid;
    grid-template-columns: minmax(140px, 220px) 1fr;
    gap: 1rem;
    align-items: start;
}

.app-container-administracion .activos-telefono-form-card {
    display: grid;
    grid-template-columns: minmax(140px, 220px) 1fr;
    gap: 1rem;
    align-items: start;
}

.activos-vehiculo-alerta-rueda {
    margin: 0.75rem 0;
}

.activos-vehiculo-alerta-rueda--warning {
    padding: 0.5rem 0.75rem;
    background: #fffbeb;
    border-radius: 6px;
    border: 1px solid #fcd34d;
}

.activos-vehiculo-alerta-rueda--danger {
    padding: 0.5rem 0.75rem;
    background: #fef2f2;
    border-radius: 6px;
    border: 1px solid #fca5a5;
}

.activos-taller-tipos-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

.activos-taller-tipo-check {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9rem;
}

.activos-taller-tipo-chip {
    display: inline-block;
    font-size: 0.75rem;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    background: #ede9fe;
    color: #5b21b6;
    margin-right: 0.25rem;
}

.activos-vehiculo-rueda-hint {
    font-size: 0.85rem;
    color: #6b7280;
    margin: 0;
}

.activos-vehiculo-ficha-rueda-info {
    display: block;
    font-size: 0.82rem;
    color: #374151;
    margin-top: 0.35rem;
    line-height: 1.35;
}

.activos-vehiculo-ficha-rueda-info-label {
    font-weight: 600;
    color: #5b21b6;
}

.activos-vehiculo-ficha-rueda-info-meta {
    color: #6b7280;
}

.activos-rueda-info-block {
    margin: 0.75rem 0 1rem;
    padding: 0.75rem 1rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.activos-rueda-info-block .activos-rueda-info-fields {
    display: grid;
    gap: 0.35rem;
}

.activos-rueda-info-empty {
    margin: 0;
    color: #6b7280;
    font-size: 0.9rem;
}

.activos-rueda-info-alerta {
    margin-top: 0.5rem;
}

.activos-admin-block--rueda {
    margin-bottom: 1rem;
}

.app-container-administracion #adminActivoFormVehiculoExtra .activos-admin-block {
    margin: 0;
}

.app-container-administracion .activos-admin-block--rueda-compact .activos-admin-block-body {
    padding: 0.7rem 1.15rem 0.85rem;
}

.app-container-administracion .activos-rueda-info-fields--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem 1.25rem;
}

.app-container-administracion .activos-rueda-info-fields--grid .activos-activo-detail-label {
    font-size: 0.75rem;
}

.app-container-administracion .activos-rueda-info-fields--grid .activos-activo-detail-value {
    font-size: 0.9rem;
}

.app-container-administracion .activos-admin-block--rueda-compact .activos-rueda-info-alerta {
    margin-top: 0.65rem;
}

.app-container-administracion #adminActivoFormVehiculoEventoExtra.activos-vehiculo-form-extra,
.app-container-administracion #adminActivoFormTelefonoExtra .activos-admin-evento-actions,
.app-container-administracion #adminActivoFormOrdenadorExtra .activos-admin-evento-actions,
.app-container-administracion #adminActivoFormImpresoraExtra .activos-admin-evento-actions,
.app-container-administracion #adminActivoEventoActions.activos-admin-evento-actions {
    margin-top: 1.25rem;
    margin-bottom: 2.75rem;
}

.app-container-administracion .activos-admin-evento-actions {
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;
}

@media (max-width: 520px) {
    .app-container-administracion .activos-rueda-info-fields--grid {
        grid-template-columns: 1fr;
    }
}

.activos-worker-cambio-rueda-form {
    padding: 0.25rem 0 0.5rem;
}

.activos-worker-cambio-rueda-hint {
    margin: 0 0 0.75rem;
    font-size: 0.88rem;
    color: #6b7280;
}

.activos-worker-cambio-rueda-btn {
    margin-top: 0.75rem;
    width: 100%;
}

.activos-worker-rueda-proximo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 1rem;
    margin: 0.65rem 0 0.85rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.9rem;
    line-height: 1.4;
    border-radius: 8px;
    border: 1px solid transparent;
}

.activos-worker-rueda-proximo-label {
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    flex: 0 0 100%;
    margin-bottom: 0.1rem;
}

.activos-worker-rueda-proximo--ok {
    background: #dcfce7;
    border-color: #86efac;
    color: #166534;
}

.activos-worker-rueda-proximo--compact {
    display: block;
    margin: 0.35rem 0 0;
    padding: 0.4rem 0.55rem;
    font-size: 0.82rem;
    border-radius: 6px;
}

.activos-worker-rueda-proximo--compact .activos-worker-rueda-proximo-label {
    display: inline;
    margin-right: 0.35rem;
    margin-bottom: 0;
    flex: none;
}

.activos-worker-rueda-proximo--compact .activos-worker-rueda-proximo-body {
    display: inline;
}

.activos-worker-rueda-proximo--warning {
    background: #fffbeb;
    border-color: #fcd34d;
    color: #92400e;
}

.activos-worker-rueda-proximo--danger {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #991b1b;
}

.activos-worker-rueda-proximo-sep {
    opacity: 0.65;
}

.activos-vehiculo-ficha-body .activos-worker-rueda-proximo:not(.activos-worker-rueda-proximo--compact) {
    margin-top: 0.35rem;
    margin-bottom: 0;
}

.activos-worker-tipo-seguro {
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
}

.activos-list-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.activos-list-actions .btn {
    flex: 1 1 auto;
    min-width: 9rem;
}

.activos-detail-content {
    margin-bottom: 1rem;
}

.activos-detail-block p {
    margin: 0.35rem 0;
}

.activos-asignacion-block,
.activos-evento-block {
    margin-top: 1rem;
}

.activos-registros-block {
    margin-top: 1rem;
}

.activos-registros-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
}

.activos-registros-list li {
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.85rem;
}

.activos-mis-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.activos-mis-cat-title {
    margin: 1rem 0 0.5rem;
    font-size: 0.95rem;
    color: var(--gray-700);
}

.activos-mis-item {
    text-align: left;
    width: 100%;
}

.activos-mis-hint,
.activos-admin-hint {
    font-size: 0.9rem;
    color: var(--gray-600);
    margin-bottom: 1rem;
}

@media (max-width: 640px) {
    #appContainerTienda .profile-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
        margin-bottom: 1rem;
    }

    #appContainerTienda .profile-header .profile-title,
    #appContainerTienda .profile-header h2 {
        font-size: 1.2rem;
        padding-left: 0;
        margin: 0;
    }
}

.activos-uso-block {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gray-200);
}

.activos-uso-title {
    font-size: 1rem;
    margin: 0 0 0.75rem;
}

/* --- Fichas vehiculo: tienda (Mis activos / detalle trabajador) --- */
#appContainerTienda .activos-vehiculo-ficha-alertas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: center;
    margin-top: 0.4rem;
}

#appContainerTienda .activos-vehiculo-ficha-alertas .activos-badge {
    font-size: 0.72rem;
}

#appContainerTienda .activos-mis-vehiculos-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.9rem;
    margin-bottom: 0.5rem;
}

@media (min-width: 520px) {
    #appContainerTienda .activos-mis-vehiculos-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }
}

#appContainerTienda .activos-worker-vehiculo-detail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}

#appContainerTienda .activos-vehiculo-ficha--detail {
    width: 100%;
    max-width: 100%;
}

#appContainerTienda .activos-vehiculo-ficha--static {
    cursor: default;
    pointer-events: none;
}

#appContainerTienda .activos-vehiculo-ficha--static .activos-vehiculo-ficha-body .activos-vehiculo-uso-hoy,
#appContainerTienda .activos-vehiculo-ficha--static .activos-vehiculo-ficha-body .activos-worker-registro-btn,
#appContainerTienda .activos-vehiculo-ficha--static .activos-vehiculo-ficha-body .activos-worker-cambio-rueda-open-btn {
    pointer-events: auto;
}

#appContainerTienda .activos-worker-historial {
    width: 100%;
    text-align: center;
}

/* Bloc Hoy (detail travailleur) */
#appContainerTienda .activos-hoy-worker {
    margin-top: 0.5rem;
    padding: 0.85rem 0.75rem 0.9rem;
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(120, 81, 169, 0.12) 0%, rgba(120, 81, 169, 0.04) 100%);
    border: 1px solid rgba(120, 81, 169, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

#appContainerTienda .activos-hoy-worker-head {
    display: flex;
    justify-content: center;
    margin-bottom: 0.65rem;
}

#appContainerTienda .activos-hoy-worker-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    box-shadow: 0 2px 8px rgba(120, 81, 169, 0.28);
}

#appContainerTienda .activos-hoy-worker-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

#appContainerTienda .activos-hoy-worker-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.55rem 0.35rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(120, 81, 169, 0.1);
    min-width: 0;
}

#appContainerTienda .activos-hoy-worker-label {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--gray-600);
    text-align: center;
    line-height: 1.2;
}

#appContainerTienda .activos-hoy-worker-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary-dark);
    line-height: 1.15;
    text-align: center;
}

#appContainerTienda .activos-hoy-worker-value small {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--gray-600);
}

/* Historial depliable */
#appContainerTienda .activos-historial-collapsible {
    width: 100%;
    text-align: left;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
    overflow: hidden;
}

#appContainerTienda .activos-historial-collapsible-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
    background: var(--gray-50);
    border-bottom: 1px solid transparent;
    transition: background 0.15s ease;
}

#appContainerTienda .activos-historial-collapsible-summary::-webkit-details-marker {
    display: none;
}

#appContainerTienda .activos-historial-collapsible-summary::after {
    content: '';
    flex-shrink: 0;
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid var(--primary);
    border-bottom: 2px solid var(--primary);
    transform: rotate(45deg);
    margin-top: -0.2rem;
    transition: transform 0.2s ease;
}

#appContainerTienda .activos-historial-collapsible[open] .activos-historial-collapsible-summary {
    border-bottom-color: var(--gray-200);
    background: rgba(120, 81, 169, 0.06);
}

#appContainerTienda .activos-historial-collapsible[open] .activos-historial-collapsible-summary::after {
    transform: rotate(-135deg);
    margin-top: 0.15rem;
}

#appContainerTienda .activos-historial-collapsible-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--gray-800);
}

#appContainerTienda .activos-historial-collapsible-meta {
    font-size: 0.78rem;
    color: var(--gray-600);
    margin-right: auto;
    padding-left: 0.5rem;
}

#appContainerTienda .activos-historial-collapsible .activos-vehiculo-historial-table-wrap {
    padding: 0.75rem 0.5rem 1rem;
}

#appContainerTienda .activos-worker-extras-wrap {
    margin-top: 0.75rem;
}

#appContainerTienda .activos-worker-extras {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

#appContainerTienda .activos-worker-panel-body {
    padding-top: 0.15rem;
}

#appContainerTienda .activos-worker-talleres-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

#appContainerTienda .activos-worker-registro-hint {
    margin: 0 0 0.75rem;
    font-size: 0.88rem;
    color: var(--gray-600);
    text-align: center;
}

#appContainerTienda .activos-worker-registro-open-btn {
    width: 100%;
}

.activos-registro-modal-content .activos-registro-dia-field textarea {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 10px;
    font-size: 1rem;
    font-family: inherit;
    background: #fff;
    resize: vertical;
    min-height: 4rem;
}

.activos-registro-modal-content .activos-registro-dia-field-hint {
    margin: -0.35rem 0 0;
    font-size: 0.8rem;
    color: var(--gray-600);
}

.activos-registro-modal-content {
    max-width: 420px;
    width: calc(100% - 2rem);
}

.activos-registro-modal-actions {
    display: flex;
    gap: 0.65rem;
    margin-top: 1rem;
}

.activos-registro-modal-actions .btn {
    flex: 1;
}

.activos-list-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.activos-config-modal-content {
    max-width: 560px;
    width: calc(100% - 2rem);
    max-height: min(90vh, 720px);
    overflow: auto;
}

.activos-nueva-categoria-modal-content,
.activos-vehiculo-seguro-modal-content {
    max-width: min(96vw, 780px);
    width: calc(100% - 1.5rem);
    max-height: min(92vh, 860px);
}

.activos-nueva-categoria-modal-content {
    overflow-y: auto;
}

.activos-nueva-categoria-modal-content .activos-config-modal-actions {
    position: sticky;
    bottom: 0;
    margin: 0.75rem -1.5rem -1.25rem;
    padding: 1rem 1.5rem 1.25rem;
    background: var(--white);
    border-top: 1px solid var(--gray-200);
    justify-content: flex-end;
    gap: 0.65rem;
    z-index: 2;
}

.activos-nueva-categoria-modal-content .activos-config-modal-actions .btn {
    min-width: 9.5rem;
    margin: 0;
}

@media (max-width: 520px) {
    .activos-nueva-categoria-modal-content .activos-config-modal-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .activos-nueva-categoria-modal-content .activos-config-modal-actions .btn {
        width: 100%;
        min-width: 0;
    }
}

.activos-nueva-categoria-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem 1rem;
}

.activos-nueva-categoria-fields .admin-solicitud-field-full {
    grid-column: 1 / -1;
}

.activos-nueva-categoria-icono-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
    color: var(--gray-700);
}

.activos-hub-icon-picker {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.45rem;
}

.activos-hub-icon-picker-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.6rem;
    padding: 0.4rem;
    border: 1px solid var(--gray-300);
    border-radius: 10px;
    background: #fff;
    color: var(--gray-700);
    cursor: pointer;
}

.activos-hub-icon-picker-btn:hover {
    border-color: var(--primary-light, #a5b4fc);
    color: var(--primary, #4f46e5);
}

.activos-hub-icon-picker-btn--active {
    border-color: var(--primary, #4f46e5);
    background: #eef2ff;
    color: var(--primary, #4f46e5);
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
}

@media (max-width: 520px) {
    .activos-hub-icon-picker {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.activos-custom-visual-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary, #4f46e5);
}

.activos-worker-ordenador-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary, #4f46e5);
}

.activos-nueva-categoria-fields .activos-nueva-categoria-options {
    grid-column: 1 / -1;
}

.activos-nueva-categoria-options {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-top: 0.15rem;
}

.activos-nueva-categoria-options-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.1rem;
}

.activos-nueva-categoria-option {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--gray-800);
    cursor: pointer;
    line-height: 1.4;
}

.activos-nueva-categoria-option input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0.12rem 0 0;
    flex-shrink: 0;
    padding: 0;
    accent-color: var(--primary);
}

.activos-nueva-categoria-campos-section {
    margin-top: 0.35rem;
}

.activos-nueva-categoria-modal-content .activos-nueva-categoria-campos-list {
    min-height: 4.5rem;
}

.activos-nueva-categoria-modal-content .activos-categoria-campo-row {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(5.5rem, 7.5rem) auto;
    gap: 0.65rem;
    align-items: end;
    padding: 0.75rem;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    background: var(--gray-50, #f9fafb);
}

.activos-nueva-categoria-modal-content .activos-categoria-campo-row .admin-solicitud-field label {
    font-size: 0.75rem;
}

.activos-nueva-categoria-modal-content .activos-categoria-campo-row .activos-config-row-remove {
    align-self: end;
    white-space: nowrap;
    margin-bottom: 0.15rem;
}

@media (max-width: 640px) {
    .activos-nueva-categoria-modal-content .activos-categoria-campo-row {
        grid-template-columns: 1fr;
    }

    .activos-nueva-categoria-modal-content .activos-categoria-campo-row .activos-config-row-remove {
        justify-self: start;
        margin-bottom: 0;
    }
}

.app-container-administracion .activos-field-hint-inline {
    margin-top: 0.25rem;
}

.app-container-administracion .activos-vehiculo-seguro-form-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.app-container-administracion .activos-vehiculo-seguro-field--inline .activos-vehiculo-seguro-form-actions {
    min-height: 2.75rem;
    align-items: center;
}

.app-container-administracion .activos-vehiculo-seguro-field--inline .activos-seguro-summary {
    font-size: 0.8125rem;
}

.app-container-administracion .activos-seguro-summary {
    font-size: 0.875rem;
    color: var(--gray-600);
}

.app-container-administracion .activos-custom-visual {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 0.5rem 0;
}

.app-container-administracion .activos-custom-visual-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 140px;
    min-height: 140px;
    padding: 1rem;
    border-radius: 16px;
    background: linear-gradient(145deg, #f8fafc 0%, #e2e8f0 100%);
    border: 1px solid var(--gray-200);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

.app-container-administracion .activos-custom-visual-icon {
    font-size: 2.5rem;
    line-height: 1;
}

.app-container-administracion .activos-custom-visual-nombre {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-800);
    text-align: center;
}

.app-container-administracion .activos-custom-visual-sub {
    font-size: 0.75rem;
    color: var(--gray-600);
    text-align: center;
}

.app-container-administracion .activos-custom-form-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.75rem;
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    padding: 1.25rem 1.35rem;
    border: 1px solid var(--gray-200);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
    position: relative;
}

.app-container-administracion .activos-custom-form-card--no-media:has(.activos-custom-ficha-badge) {
    padding-top: 2.85rem;
}

.app-container-administracion .activos-custom-form-media-wrap {
    position: relative;
    flex-shrink: 0;
}

.app-container-administracion .activos-custom-form-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
    width: 100%;
    min-width: 0;
    flex: 1;
}

.app-container-administracion #adminActivoFormFields.activos-custom-form-wrap {
    display: block;
    width: 100%;
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
}

.app-container-administracion .admin-list.activos-admin-custom-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.activos-custom-ficha-badge,
.app-container-administracion .activos-custom-visual .activos-custom-ficha-badge {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    z-index: 3;
    flex-shrink: 0;
    margin-top: 0;
    min-width: 5.5rem;
    box-shadow: 0 1px 6px rgba(15, 23, 42, 0.16);
}

.activos-worker-telefono-card.activos-custom-worker-card {
    position: relative;
}

.activos-worker-telefono-card.activos-custom-worker-card:has(.activos-custom-ficha-badge) {
    padding-top: 2.85rem;
}

.activos-custom-worker-title {
    margin: 0 0 0.75rem;
    padding-right: 6.5rem;
}

@media (max-width: 640px) {
    .activos-nueva-categoria-fields {
        grid-template-columns: 1fr;
    }
}

.activos-config-modal-hint {
    margin: 0 0 1rem;
    font-size: 0.88rem;
    color: var(--gray-600);
}

.activos-config-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.activos-config-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 0.65rem;
    align-items: end;
    padding: 0.75rem;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    background: var(--gray-50, #f9fafb);
}

.activos-config-row-taller {
    grid-template-columns: 1fr 1fr;
}

.activos-config-row-taller .activos-config-row-remove {
    grid-column: 1 / -1;
    justify-self: start;
}

.activos-categoria-campo-row {
    grid-template-columns: 1.15fr 1.15fr minmax(6.5rem, 8rem) auto;
    align-items: end;
}

.activos-categoria-campo-row .activos-config-row-remove {
    align-self: end;
    white-space: nowrap;
    margin-bottom: 0.15rem;
}

.activos-config-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (max-width: 640px) {
    .activos-config-row {
        grid-template-columns: 1fr;
    }

    .activos-config-row-taller {
        grid-template-columns: 1fr;
    }

    .activos-categoria-campo-row {
        grid-template-columns: 1fr;
    }

    .activos-categoria-campo-row .activos-config-row-remove {
        justify-self: start;
        margin-bottom: 0;
    }
}

.app-container-administracion .activos-admin-vehiculos-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.app-container-administracion .activos-admin-vehiculo-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 0.9rem;
    width: 100%;
    text-align: left;
    border-radius: 12px;
}

.app-container-administracion .activos-admin-vehiculo-row-img {
    width: 56px;
    height: 42px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
    background: var(--gray-100);
}

.app-container-administracion .activos-admin-vehiculo-row-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.app-container-administracion .activos-admin-vehiculo-row-nombre {
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1.2;
}

.app-container-administracion .activos-admin-vehiculo-row-matricula {
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gray-600);
}

.app-container-administracion .activos-admin-vehiculo-row-meta,
.app-container-administracion .activos-admin-vehiculo-row-asignado {
    font-size: 0.88rem;
    color: var(--gray-600);
    line-height: 1.3;
}

.app-container-administracion .activos-admin-vehiculo-row-badge {
    position: static;
    flex-shrink: 0;
    font-size: 0.72rem;
}

.app-container-administracion .activos-admin-block {
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    border: 1px solid var(--gray-200);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.app-container-administracion .activos-admin-block-header {
    padding: 0.9rem 1.15rem;
    background: linear-gradient(135deg, rgba(120, 81, 169, 0.14) 0%, rgba(120, 81, 169, 0.04) 100%);
    border-bottom: 1px solid rgba(120, 81, 169, 0.12);
}

.app-container-administracion .activos-admin-block-header .activos-admin-block-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary-dark);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.app-container-administracion .activos-admin-block-body {
    padding: 1.05rem 1.15rem 1.2rem;
}

.app-container-administracion .activos-admin-block--collapsible .activos-admin-block-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 1.15rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
    background: linear-gradient(135deg, rgba(120, 81, 169, 0.14) 0%, rgba(120, 81, 169, 0.04) 100%);
    border-bottom: 1px solid transparent;
}

.app-container-administracion .activos-admin-block--collapsible .activos-admin-block-summary::-webkit-details-marker {
    display: none;
}

.app-container-administracion .activos-admin-block--collapsible[open] .activos-admin-block-summary {
    border-bottom-color: var(--gray-200);
}

.app-container-administracion .activos-admin-block--collapsible .activos-admin-block-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary-dark);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.app-container-administracion .activos-admin-block-chevron {
    flex-shrink: 0;
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid var(--primary);
    border-bottom: 2px solid var(--primary);
    transform: rotate(45deg);
    margin-top: -0.15rem;
    transition: transform 0.2s ease;
}

.app-container-administracion .activos-admin-block--collapsible[open] .activos-admin-block-chevron {
    transform: rotate(-135deg);
    margin-top: 0.15rem;
}

.app-container-administracion .activos-admin-block-actions {
    margin-top: 0.85rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.app-container-administracion .activos-admin-hoy-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.app-container-administracion .activos-admin-hoy-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.9rem 0.5rem;
    border-radius: 12px;
    background: var(--gray-50, #f9fafb);
    border: 1px solid var(--gray-200);
}

.app-container-administracion .activos-admin-hoy-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gray-600);
    text-align: center;
}

.app-container-administracion .activos-admin-hoy-value {
    font-size: 1.28rem;
    font-weight: 700;
    color: var(--primary-dark);
    line-height: 1.15;
    text-align: center;
}

@media (max-width: 520px) {
    .app-container-administracion .activos-admin-hoy-grid {
        grid-template-columns: 1fr;
    }
}

.app-container-administracion .activos-admin-historial-search-wrap {
    margin-bottom: 0.85rem;
}

.app-container-administracion .activos-admin-historial-search {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1px solid rgba(120, 81, 169, 0.22);
    border-radius: 10px;
    font-size: 0.95rem;
    background: #fff;
}

.activos-talleres-almacen-field {
    margin-bottom: 1.5rem !important;
}

#appContainerTienda .activos-worker-collapsible-body {
    padding: 0.75rem 1rem 1rem;
    min-width: 0;
}

@media (max-width: 520px) {
    #appContainerTienda .activos-worker-vehiculo-detail {
        max-width: 100%;
        align-items: stretch;
        gap: 1rem;
    }

    #appContainerTienda .activos-worker-historial.activos-historial-collapsible {
        width: 100%;
        min-width: 0;
    }

    #appContainerTienda .activos-historial-collapsible-summary {
        flex-wrap: wrap;
        align-items: center;
        row-gap: 0.2rem;
        padding: 0.75rem 0.85rem;
    }

    #appContainerTienda .activos-historial-collapsible-title {
        flex: 1 1 auto;
        min-width: 0;
    }

    #appContainerTienda .activos-historial-collapsible-meta {
        flex: 1 1 100%;
        margin-right: 0;
        padding-left: 0;
        text-align: left;
    }

    #appContainerTienda .activos-worker-historial .activos-vehiculo-historial-table-wrap {
        padding: 0.35rem 0.2rem 0.65rem;
    }

    #appContainerTienda .activos-worker-historial .activos-vehiculo-historial-table {
        width: 100%;
        min-width: 0;
        table-layout: fixed;
    }

    #appContainerTienda .activos-worker-historial .activos-vehiculo-historial-table th,
    #appContainerTienda .activos-worker-historial .activos-vehiculo-historial-table td {
        padding: 0.3rem 0.15rem;
        font-size: 0.62rem;
        line-height: 1.15;
        word-break: break-word;
    }

    #appContainerTienda .activos-worker-historial .activos-vehiculo-historial-table th {
        font-size: 0.58rem;
        white-space: normal;
        letter-spacing: 0;
    }
}

#appContainerTienda .activos-worker-extras .activos-historial-collapsible {
    width: 100%;
}

#appContainerTienda .activos-worker-extra-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

#appContainerTienda .activos-worker-extra-contact {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

#appContainerTienda .activos-worker-extra-contact-name,
#appContainerTienda .activos-worker-extra-taller-name {
    margin: 0;
    font-weight: 700;
    color: var(--gray-800);
    font-size: 0.95rem;
}

#appContainerTienda .activos-worker-extra-contact-tel {
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary, #2563eb);
    text-decoration: underline;
    text-underline-offset: 2px;
}

#appContainerTienda .activos-worker-extra-contact-tel:hover {
    color: var(--primary-dark, #1d4ed8);
}

#appContainerTienda .activos-worker-extra-taller-dir {
    margin: 0.15rem 0 0;
    font-size: 0.88rem;
    color: var(--gray-600);
    line-height: 1.45;
}

#appContainerTienda .activos-worker-extra-address-link {
    color: var(--gray-900, #111827);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}

#appContainerTienda .activos-worker-extra-address-link:hover {
    color: var(--gray-700, #374151);
}

#appContainerTienda .activos-worker-extra-empty {
    margin: 0;
    font-size: 0.88rem;
    color: var(--gray-600);
    line-height: 1.4;
}

#appContainerTienda .activos-vehiculo-ficha-badge,
#appContainerTienda .activos-badge {
    text-transform: uppercase;
}

#appContainerTienda .activos-vehiculo-historial-title {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-800);
    text-align: center;
}

#appContainerTienda .activos-vehiculo-ficha {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    cursor: pointer;
    text-align: left;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.07);
    transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    font-family: inherit;
}

#appContainerTienda button.activos-vehiculo-ficha {
    appearance: none;
    -webkit-appearance: none;
}

#appContainerTienda .activos-vehiculo-ficha:not(.activos-vehiculo-ficha--static):hover,
#appContainerTienda .activos-vehiculo-ficha:not(.activos-vehiculo-ficha--static):focus-visible {
    border-color: var(--primary-light);
    box-shadow: 0 4px 14px rgba(120, 81, 169, 0.14);
    transform: translateY(-1px);
}

#appContainerTienda .activos-vehiculo-ficha-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: linear-gradient(145deg, var(--primary-light), var(--primary));
    overflow: hidden;
    flex-shrink: 0;
}

#appContainerTienda .activos-vehiculo-ficha-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#appContainerTienda .activos-vehiculo-ficha-img-wrap .activos-vehiculo-ficha-badge {
    position: absolute;
    top: 0.45rem;
    right: 0.45rem;
    z-index: 2;
    min-width: 5.2rem;
    padding: 0.28rem 0.5rem;
    font-size: 0.72rem;
    box-shadow: 0 1px 6px rgba(15, 23, 42, 0.16);
}

#appContainerTienda .activos-vehiculo-ficha-body {
    flex: 1;
    min-width: 0;
    padding: 0.7rem 0.75rem 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

#appContainerTienda .activos-vehiculo-ficha-nombre {
    display: block;
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--gray-900, #111827);
    line-height: 1.25;
}

#appContainerTienda .activos-vehiculo-ficha-matricula {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--gray-600);
    text-transform: uppercase;
}

#appContainerTienda .activos-vehiculo-ficha-meta {
    font-size: 0.78rem;
    color: var(--gray-600);
    line-height: 1.3;
}

#appContainerTienda .activos-vehiculo-ficha-km-actual {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary-dark);
    line-height: 1.25;
}

#appContainerTienda .activos-vehiculo-ficha-body .activos-vehiculo-uso-hoy--compact {
    margin-top: 0.35rem;
    padding: 0.45rem 0.5rem;
}

#appContainerTienda .activos-vehiculo-ficha-body .activos-vehiculo-uso-hoy.admin-detail-completar {
    margin-top: 0.35rem;
    padding: 0.75rem;
    width: 100%;
    text-align: center;
}

#appContainerTienda .activos-vehiculo-historial-wrap {
    margin-top: 0;
    text-align: center;
    padding: 1rem;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

#appContainerTienda .activos-vehiculo-historial-table-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

#appContainerTienda .activos-worker-historial .activos-vehiculo-historial-table {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

#appContainerTienda .activos-vehiculo-historial-table {
    width: auto;
    min-width: min(100%, 420px);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
    border-radius: 8px;
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--gray-200);
}

#appContainerTienda .activos-vehiculo-historial-table thead {
    background: var(--primary);
    color: #fff;
}

#appContainerTienda .activos-vehiculo-historial-table th,
#appContainerTienda .activos-vehiculo-historial-table td {
    padding: 0.5rem 0.55rem;
    font-size: 0.78rem;
    text-align: center;
}

#appContainerTienda .activos-vehiculo-historial-table th {
    font-weight: 700;
    font-size: 0.75rem;
    white-space: nowrap;
}

#appContainerTienda .activos-vehiculo-historial-table td {
    color: var(--gray-800);
    border-top: 1px solid var(--gray-100);
}

#appContainerTienda .activos-vehiculo-historial-table td.activos-vehiculo-historial-num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

#appContainerTienda .activos-vehiculo-historial-table tbody tr:nth-child(even) {
    background: rgba(120, 81, 169, 0.04);
}

#appContainerTienda .activos-registro-dia-card {
    width: 100%;
    max-width: 480px;
    margin: 1.25rem auto 0;
    padding: 1.1rem 1.15rem 1.15rem;
    background: linear-gradient(180deg, rgba(120, 81, 169, 0.07) 0%, #fff 42%);
    border: 1px solid rgba(120, 81, 169, 0.22);
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(120, 81, 169, 0.1);
}

#appContainerTienda .activos-registro-dia-header {
    text-align: center;
    margin-bottom: 0.85rem;
}

#appContainerTienda .activos-registro-dia-title {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary-dark);
    letter-spacing: 0.01em;
}

#appContainerTienda .activos-registro-dia-hint {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--gray-600);
}

#appContainerTienda .activos-registro-dia-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 0.85rem;
    margin-bottom: 1rem;
}

#appContainerTienda .activos-registro-dia-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

#appContainerTienda .activos-registro-dia-field-full {
    grid-column: 1 / -1;
}

#appContainerTienda .activos-registro-dia-field label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-700);
}

#appContainerTienda .activos-registro-dia-field input {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 10px;
    font-size: 1rem;
    font-family: inherit;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#appContainerTienda .activos-registro-dia-field input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(120, 81, 169, 0.15);
}

#appContainerTienda .activos-registro-dia-field-hint {
    font-size: 0.74rem;
    line-height: 1.35;
    color: var(--gray-600);
}

#appContainerTienda .activos-registro-dia-btn {
    width: 100%;
    padding: 0.8rem 1.25rem;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
}

#appContainerTienda .activos-uso-block {
    width: 100%;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

/* --- Fichas vehiculos (admin: 3 por fila en escritorio) --- */
/* Prioridad sobre .admin-list que fuerza flex en columna */
.app-container-administracion .admin-list.activos-vehiculos-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
}

.app-container-administracion .activos-admin-vehiculos-search-wrap {
    margin-bottom: 1rem;
}

.app-container-administracion .activos-admin-vehiculos-search {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1px solid rgba(120, 81, 169, 0.22);
    border-radius: 10px;
    font-size: 0.95rem;
    background: #fff;
}

.app-container-administracion .activos-admin-vehiculos-search-empty {
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
    color: var(--gray-600);
    text-align: center;
}

@media (min-width: 1100px) {
    .app-container-administracion .admin-list.activos-vehiculos-grid {
        gap: 1.15rem;
    }
}

@media (max-width: 640px) {
    .app-container-administracion .admin-list.activos-vehiculos-grid {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .app-container-administracion .admin-list.activos-vehiculos-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.85rem;
    }
}

/* --- Bandeaux telefonos (admin + user) --- */
.app-container-administracion .admin-list.activos-admin-telefonos-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.app-container-administracion .admin-list.activos-admin-impresoras-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.activos-telefono-band {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    width: 100%;
    text-align: left;
    padding: 0.9rem 1rem 0.95rem;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 6px rgba(15, 23, 42, 0.05);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.app-container-administracion .activos-telefono-band:hover,
.app-container-administracion .activos-telefono-band:focus-visible,
#appContainerTienda .activos-telefono-band:hover,
#appContainerTienda .activos-telefono-band:focus-visible {
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.1);
}

.activos-telefono-band-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
}

.activos-telefono-band-title-block {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    flex: 1;
}

.activos-telefono-band-nombre {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--gray-900, #111827);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activos-telefono-band-subtitle {
    display: block;
    font-size: 0.82rem;
    line-height: 1.3;
    color: var(--gray-600);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activos-telefono-band-badge {
    position: static;
    flex-shrink: 0;
    min-width: auto;
    margin-top: 0.05rem;
    box-shadow: none;
}

.activos-telefono-band-details {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.activos-telefono-band-chip {
    display: inline-flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
    max-width: 100%;
    padding: 0.38rem 0.55rem;
    border-radius: 8px;
    background: var(--gray-50, #f9fafb);
    border: 1px solid var(--gray-200);
}

.activos-telefono-band-chip-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gray-500);
    line-height: 1.1;
}

.activos-telefono-band-chip-value {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--gray-800, #1f2937);
    line-height: 1.25;
    word-break: break-word;
}

.activos-telefono-band-tel {
    color: var(--primary);
    text-decoration: none;
}

.activos-telefono-band-tel:hover {
    text-decoration: underline;
}

#appContainerTienda .activos-telefono-band.activos-mis-item {
    background: #fff;
    color: inherit;
    border: 1px solid var(--gray-200);
}

@media (min-width: 640px) {
    .activos-telefono-band-details {
        gap: 0.5rem;
    }

    .activos-telefono-band-chip {
        flex: 0 1 auto;
        min-width: 7.5rem;
        max-width: calc(50% - 0.25rem);
    }
}

/* --- Ficha telefono user --- */
#appContainerTienda .activos-worker-telefono-detail {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#appContainerTienda .activos-worker-activo-imagen {
    overflow: hidden;
    background: linear-gradient(145deg, var(--primary-light), var(--primary));
}

#appContainerTienda .activos-worker-activo-imagen-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#appContainerTienda .activos-worker-ordenador-hero--with-photo .activos-worker-activo-imagen {
    flex-shrink: 0;
    width: 6.5rem;
    aspect-ratio: 1;
    border-radius: 14px;
}

#appContainerTienda .activos-worker-telefono-card .activos-worker-ordenador-hero {
    margin-bottom: 0.9rem;
}

@media (max-width: 767px) {
    #appContainerTienda .activos-worker-ordenador-hero--with-photo {
        flex-direction: column;
    }

    #appContainerTienda .activos-worker-ordenador-hero--with-photo .activos-worker-activo-imagen {
        width: 100%;
        aspect-ratio: 16 / 9;
        border-radius: 12px;
    }
}

#appContainerTienda .activos-worker-telefono-card {
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--gray-200);
    border-radius: 14px;
    background: linear-gradient(160deg, rgba(59, 130, 246, 0.07) 0%, #fff 42%);
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
}

#appContainerTienda .activos-worker-telefono-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0;
}

#appContainerTienda .activos-worker-telefono-title {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.25;
    color: var(--gray-900, #111827);
}

#appContainerTienda .activos-worker-telefono-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.7rem;
}

@media (min-width: 480px) {
    #appContainerTienda .activos-worker-telefono-fields {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem 1rem;
    }
}

#appContainerTienda .activos-worker-telefono-fields .activos-activo-detail-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

#appContainerTienda .activos-worker-telefono-fields .activos-activo-detail-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

#appContainerTienda .activos-worker-telefono-fields .activos-activo-detail-value {
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    font-size: 0.92rem;
    min-height: 2.2rem;
}

.app-container-administracion #adminActivoFormTelefonoExtra.activos-telefono-form-extra {
    gap: 1.75rem;
}

/* --- Ordenadores (admin + user) --- */
.app-container-administracion .admin-list.activos-admin-ordenadores-list,
#appContainerTienda .activos-mis-list--ordenadores {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.activos-ordenador-band {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    width: 100%;
    padding: 0.75rem 0.85rem 0.8rem;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 6px rgba(15, 23, 42, 0.05);
}

.activos-ordenador-band-open {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    width: 100%;
    text-align: left;
    padding: 0.35rem 0.25rem;
    margin: -0.35rem -0.25rem 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    color: inherit;
    transition: background 0.15s ease;
}

.app-container-administracion .activos-ordenador-band-open:hover,
.app-container-administracion .activos-ordenador-band-open:focus-visible,
#appContainerTienda .activos-ordenador-band-open:hover,
#appContainerTienda .activos-ordenador-band-open:focus-visible {
    background: rgba(59, 130, 246, 0.06);
    outline: none;
}

.activos-ordenador-band-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
}

.activos-ordenador-band-mainline {
    flex: 1;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gray-900, #111827);
    line-height: 1.35;
    word-break: break-word;
}

.activos-ordenador-band-sep {
    color: var(--gray-400);
    font-weight: 400;
    padding: 0 0.15rem;
}

.activos-ordenador-band-compra {
    font-size: 0.82rem;
    color: var(--gray-600);
    line-height: 1.35;
}

.activos-ordenador-band-compra-fecha {
    font-weight: 500;
}

.activos-ordenador-factura-link {
    color: var(--primary, #2563eb);
    font-weight: 600;
    text-decoration: none;
}

.activos-ordenador-factura-link:hover {
    text-decoration: underline;
}

.activos-ordenador-band-badge {
    position: static;
    flex-shrink: 0;
    box-shadow: none;
}

.activos-ordenador-band-panel {
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    background: var(--gray-50, #f9fafb);
    overflow: hidden;
}

.activos-ordenador-band-panel > summary {
    list-style: none;
    cursor: pointer;
    padding: 0.55rem 0.75rem;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--gray-700);
    user-select: none;
}

.activos-ordenador-band-panel > summary::-webkit-details-marker {
    display: none;
}

.activos-ordenador-band-panel > summary::before {
    content: '▸';
    display: inline-block;
    margin-right: 0.45rem;
    transition: transform 0.15s ease;
    color: var(--gray-500);
}

.activos-ordenador-band-panel[open] > summary::before {
    transform: rotate(90deg);
}

.activos-ordenador-panel-count {
    font-weight: 500;
    color: var(--gray-500);
}

.activos-ordenador-panel-body {
    padding: 0 0.75rem 0.65rem;
    border-top: 1px solid var(--gray-200);
}

.activos-ordenador-licencias-band-list {
    list-style: none;
    margin: 0.45rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.activos-ordenador-licencias-band-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.65rem;
    font-size: 0.84rem;
}

.activos-ordenador-licencias-band-nombre {
    font-weight: 600;
    color: var(--gray-800);
}

.activos-ordenador-licencias-band-meta {
    color: var(--gray-600);
    font-size: 0.8rem;
}

.activos-ordenador-tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: 0.45rem 0.85rem;
    padding-top: 0.45rem;
}

.activos-ordenador-tech-row {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.activos-ordenador-tech-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.activos-ordenador-tech-value {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--gray-800);
    word-break: break-word;
}

#appContainerTienda .activos-ordenador-band {
    background: #fff;
    color: inherit;
}

#appContainerTienda .activos-ordenador-band-open.activos-mis-item {
    background: transparent;
    border: none;
}

.activos-ordenador-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.1rem 0.85rem 1rem;
    background: linear-gradient(155deg, rgba(16, 185, 129, 0.14) 0%, rgba(59, 130, 246, 0.12) 55%, rgba(255, 255, 255, 0.92) 100%);
}

.activos-ordenador-visual--form,
.activos-ordenador-visual--detail {
    min-height: 220px;
    border-radius: 12px;
}

.activos-ordenador-device {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    width: min(100%, 150px);
}

.activos-ordenador-device-screen {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 10px 10px 4px 4px;
    border: 2px solid rgba(15, 23, 42, 0.82);
    background: linear-gradient(160deg, #1e293b 0%, #0f172a 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.45rem;
    text-align: center;
}

.activos-ordenador-device-base {
    width: 42%;
    height: 0.35rem;
    border-radius: 0 0 8px 8px;
    background: rgba(15, 23, 42, 0.75);
}

.activos-ordenador-device-modelo {
    font-size: 0.62rem;
    font-weight: 700;
    color: #fff;
}

.activos-ordenador-device-serie {
    font-size: 0.54rem;
    color: rgba(255, 255, 255, 0.82);
    word-break: break-word;
}

.app-container-administracion #adminActivoFormFields.activos-ordenador-form-wrap,
.app-container-administracion .activos-ordenador-form-card,
.app-container-administracion #adminActivoFormFields.activos-custom-form-wrap {
    display: block;
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
}

.app-container-administracion #adminActivoFormFields.activos-impresora-form-wrap {
    display: block;
    width: 100%;
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
}

.app-container-administracion .activos-ordenador-form-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.75rem;
    padding: 1.25rem 1.35rem;
    border: 1px solid var(--gray-200);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
}

.app-container-administracion .activos-ordenador-form-card .activos-ordenador-form-fields,
.app-container-administracion .activos-ordenador-form-card .activos-ordenador-form-section,
.app-container-administracion .activos-custom-form-card .activos-ordenador-form-fields,
.app-container-administracion .activos-custom-form-card .activos-ordenador-form-section {
    width: 100%;
    align-items: stretch;
}

.app-container-administracion .activos-admin-form-section-title {
    margin: 0 0 0.65rem 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary);
    text-align: left;
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.app-container-administracion .activos-ordenador-form-card .activos-ordenador-licencias-form-head .activos-admin-form-section-title {
    text-align: left;
    flex: 1;
    min-width: 0;
}

.app-container-administracion .activos-ordenador-form-card .activos-ordenador-form-general,
.app-container-administracion .activos-ordenador-form-card .activos-ordenador-form-tech,
.app-container-administracion .activos-ordenador-form-card .activos-ordenador-compra-section .admin-solicitud-fields,
.app-container-administracion .activos-ordenador-form-card .activos-ordenador-licencias-form-summary {
    width: 100%;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

.app-container-administracion .activos-ordenador-form-card .activos-ordenador-licencias-form-head {
    width: 100%;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
}

.app-container-administracion .activos-ordenador-form-card .activos-ordenador-licencias-form-head .admin-detail-completar-title {
    text-align: left;
}

.app-container-administracion .activos-ordenador-form-fields {
    display: flex;
    flex-direction: column;
    gap: 2.75rem;
    flex: 1;
    min-width: 0;
}

.activos-ordenador-form-section {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.activos-ordenador-form-section .admin-detail-completar-title {
    margin: 0;
}

.activos-ordenador-form-general,
.activos-ordenador-form-tech,
.activos-ordenador-compra-section .admin-solicitud-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
}

.activos-ordenador-compra-section {
    padding-top: 0.35rem;
    border-top: 1px solid var(--gray-200);
}

.activos-ordenador-tech-section {
    padding-top: 0.35rem;
    border-top: 1px solid var(--gray-200);
}

.activos-ordenador-licencias-form-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.activos-ordenador-licencias-form-summary {
    margin-top: 0.15rem;
}

.activos-ordenador-licencias-summary-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.activos-ordenador-licencias-summary-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.65rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    background: var(--gray-50, #f9fafb);
    font-size: 0.86rem;
}

.activos-ordenador-licencias-summary-nombre {
    font-weight: 600;
}

.activos-ordenador-licencias-summary-meta {
    color: var(--gray-600);
    font-size: 0.8rem;
}

.activos-ordenador-factura-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.activos-ordenador-factura-empty {
    font-size: 0.85rem;
    color: var(--gray-500);
}

.activos-config-modal-hint {
    margin: 0 0 0.85rem;
    font-size: 0.86rem;
    color: var(--gray-600);
}

.activos-worker-collapsible.activos-ordenador-licencias-panel,
.activos-worker-collapsible.activos-ordenador-tech-panel {
    margin-top: 0.65rem;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.activos-worker-collapsible.activos-ordenador-licencias-panel > summary,
.activos-worker-collapsible.activos-ordenador-tech-panel > summary {
    list-style: none;
    cursor: pointer;
    padding: 0.7rem 0.9rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--gray-800);
}

.activos-worker-collapsible.activos-ordenador-licencias-panel > summary::-webkit-details-marker,
.activos-worker-collapsible.activos-ordenador-tech-panel > summary::-webkit-details-marker {
    display: none;
}

.activos-worker-ordenador-modelo {
    margin: 0.2rem 0 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gray-700, #374151);
    line-height: 1.35;
}

.activos-worker-ordenador-serie {
    margin: 0.35rem 0 0;
    font-size: 0.82rem;
    color: var(--gray-600);
    line-height: 1.35;
    word-break: break-word;
}

.activos-worker-ordenador-serie-label {
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.72rem;
}

#appContainerTienda .activos-worker-ordenador-detail {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#appContainerTienda .activos-worker-ordenador-card {
    padding: 1.15rem 1.2rem 1.2rem;
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    background: linear-gradient(155deg, rgba(16, 185, 129, 0.1) 0%, rgba(59, 130, 246, 0.05) 38%, #fff 68%);
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.07);
}

#appContainerTienda .activos-worker-ordenador-hero {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
}

#appContainerTienda .activos-worker-ordenador-hero-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(16, 185, 129, 0.22);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.12);
    font-size: 1.55rem;
    line-height: 1;
}

@media (max-width: 767px) {
    #appContainerTienda .activos-worker-ordenador-hero-icon {
        display: none;
    }
}

#appContainerTienda .activos-worker-ordenador-hero-body {
    flex: 1;
    min-width: 0;
}

#appContainerTienda .activos-worker-ordenador-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0;
}

#appContainerTienda .activos-worker-ordenador-title {
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.25;
    font-weight: 700;
    color: var(--gray-900, #111827);
}

#appContainerTienda .activos-worker-ordenador-badge {
    flex-shrink: 0;
    margin-top: 0.1rem;
}

#appContainerTienda .activos-worker-ordenador-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

@media (min-width: 480px) {
    #appContainerTienda .activos-worker-ordenador-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem;
    }
}

#appContainerTienda .activos-worker-ordenador-chip {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.62rem 0.75rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(15, 23, 42, 0.07);
    min-width: 0;
}

#appContainerTienda .activos-worker-ordenador-chip--action {
    background: rgba(37, 99, 235, 0.06);
    border-color: rgba(37, 99, 235, 0.14);
}

#appContainerTienda .activos-worker-ordenador-chip-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gray-500);
}

#appContainerTienda .activos-worker-ordenador-chip-value {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--gray-800, #1f2937);
    word-break: break-word;
}

#appContainerTienda .activos-worker-ordenador-chip-link {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--primary, #2563eb);
    text-decoration: none;
    word-break: break-word;
}

#appContainerTienda .activos-worker-ordenador-chip-link:hover {
    text-decoration: underline;
}

#appContainerTienda .activos-worker-ordenador-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.7rem;
}

.app-container-administracion #adminActivoFormOrdenadorExtra.activos-ordenador-form-extra,
.app-container-administracion #adminActivoFormImpresoraExtra.activos-ordenador-form-extra {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    width: 100%;
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
}

.app-container-administracion #adminActivoFormOrdenadorEventoBlock .activos-ordenador-evento-btn,
.app-container-administracion #adminActivoFormImpresoraEventoBlock .activos-ordenador-evento-btn {
    margin-top: 1.35rem;
}

.activos-ordenador-licencias-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.activos-ordenador-licencias-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.activos-ordenador-licencia-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
    align-items: start;
    padding: 0.9rem 1rem;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    background: #fff;
}

.activos-ordenador-licencia-row--vencida {
    border-color: rgba(239, 68, 68, 0.35);
    background: rgba(254, 242, 242, 0.55);
}

.activos-ordenador-licencia-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    min-width: 0;
}

.activos-licencia-factura-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.activos-licencia-factura-empty {
    font-size: 0.85rem;
    color: var(--gray-500);
}

.activos-ordenador-licencias-empty {
    margin: 0;
    font-size: 0.9rem;
    color: var(--gray-600);
}

.activos-ordenador-licencias-readonly-list {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.activos-ordenador-licencias-readonly-item {
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    background: #fff;
}

@media (min-width: 640px) {
    .app-container-administracion .activos-ordenador-form-fields,
    .activos-ordenador-licencia-fields {
        grid-template-columns: 1fr 1fr;
        gap: 0.85rem 1rem;
    }

    .activos-ordenador-licencia-fields .activos-licencia-factura-field {
        grid-column: 1 / -1;
    }
}

@media (min-width: 768px) {
    .app-container-administracion .activos-ordenador-form-card {
        flex-direction: column;
        align-items: center;
    }

    .app-container-administracion .activos-ordenador-form-media {
        width: 220px;
        flex-shrink: 0;
    }
}

/* --- Fichas telefonos (admin) — visuel formulaire uniquement --- */
.app-container-administracion .admin-list.activos-telefonos-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
}

@media (min-width: 1100px) {
    .app-container-administracion .admin-list.activos-telefonos-grid {
        gap: 1.15rem;
    }
}

@media (max-width: 640px) {
    .app-container-administracion .admin-list.activos-telefonos-grid {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .app-container-administracion .admin-list.activos-telefonos-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.85rem;
    }
}

.app-container-administracion .activos-telefono-ficha {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 1px solid var(--gray-200);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    cursor: pointer;
    text-align: left;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.07);
    transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.app-container-administracion .activos-telefono-ficha:hover,
.app-container-administracion .activos-telefono-ficha:focus-visible {
    border-color: rgba(59, 130, 246, 0.45);
    box-shadow: 0 6px 18px rgba(59, 130, 246, 0.14);
    transform: translateY(-1px);
}

.activos-telefono-visual,
.activos-ordenador-visual,
.activos-impresora-visual {
    position: relative;
}

.activos-telefono-visual .activos-vehiculo-ficha-badge,
.activos-ordenador-visual .activos-vehiculo-ficha-badge,
.activos-impresora-visual .activos-vehiculo-ficha-badge {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    z-index: 2;
    box-shadow: 0 1px 6px rgba(15, 23, 42, 0.16);
}

.activos-vehiculo-ficha-badge.activos-activo-band-badge,
.activos-vehiculo-ficha-badge.activos-hub-search-badge {
    position: static;
    flex-shrink: 0;
    margin-top: 0.05rem;
    min-width: 5.5rem;
    box-shadow: none;
}

.activos-vehiculo-ficha-badge.activos-worker-ordenador-badge {
    position: static;
    flex-shrink: 0;
    box-shadow: none;
}

.activos-telefono-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.1rem 0.85rem 1rem;
    background: linear-gradient(155deg, rgba(59, 130, 246, 0.16) 0%, rgba(120, 81, 169, 0.1) 55%, rgba(255, 255, 255, 0.9) 100%);
}

.activos-telefono-visual--detail,
.activos-telefono-visual--form {
    min-height: 220px;
    border-radius: 12px;
}

.activos-telefono-ficha-badge {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.8rem;
    padding: 0.24rem 0.5rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    box-shadow: 0 1px 6px rgba(15, 23, 42, 0.14);
}

.activos-telefono-badge-activo {
    background: #dcfce7;
    color: #166534;
}

.activos-telefono-badge-inactivo {
    background: #f3f4f6;
    color: #4b5563;
}

.activos-telefono-badge-mantenimiento,
.activos-vehiculo-badge-mantenimiento {
    background: #ffedd5;
    color: #c2410c;
    border: 1px solid #fdba74;
}

.activos-telefono-badge-averia,
.activos-vehiculo-badge-averia {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.activos-estado-select option.activos-estado-option-averia {
    color: #991b1b;
    font-weight: 600;
}

.activos-estado-select option.activos-estado-option-mantenimiento {
    color: #c2410c;
    font-weight: 600;
}

.activos-estado-select.activos-estado-select--averia {
    color: #991b1b;
    font-weight: 600;
}

.activos-estado-select.activos-estado-select--mantenimiento {
    color: #c2410c;
    font-weight: 600;
}

.activos-telefono-badge-default {
    background: #ede9fe;
    color: #5b21b6;
}

.activos-impresora-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
    margin-bottom: 0.75rem;
}

.activos-impresora-detail-card {
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 1rem;
    background: #fff;
}

.activos-impresora-detail-title {
    margin: 0;
    font-size: 1.05rem;
    flex: 1;
    min-width: 0;
}

.activos-impresora-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.1rem 0.85rem 1rem;
    background: linear-gradient(155deg, rgba(16, 185, 129, 0.14) 0%, rgba(59, 130, 246, 0.08) 55%, rgba(255, 255, 255, 0.92) 100%);
}

.activos-impresora-visual--detail,
.activos-impresora-visual--form {
    min-height: 200px;
    border-radius: 12px;
}

.activos-impresora-device {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-align: center;
    padding: 0.5rem;
}

.activos-impresora-device-icon {
    font-size: 2.6rem;
    line-height: 1;
}

.activos-impresora-device-modelo {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--gray-900, #111827);
}

.activos-impresora-device-ubicacion,
.activos-impresora-device-contador {
    font-size: 0.76rem;
    color: var(--gray-600);
}

.activos-impresora-worker-visual-wrap {
    margin-bottom: 0.85rem;
}

.activos-impresora-worker-visual-wrap .activos-impresora-visual--detail {
    min-height: 160px;
}

.activos-telefono-device {
    position: relative;
    width: min(100%, 118px);
    aspect-ratio: 9 / 18;
    border-radius: 22px;
    border: 2px solid rgba(15, 23, 42, 0.82);
    background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    padding: 0.45rem 0.35rem 0.55rem;
}

.activos-telefono-visual--detail .activos-telefono-device,
.activos-telefono-visual--form .activos-telefono-device {
    width: min(100%, 132px);
}

.activos-telefono-device-notch {
    display: block;
    width: 34%;
    height: 0.28rem;
    margin: 0 auto 0.35rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
}

.activos-telefono-device-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    height: calc(100% - 0.65rem);
    border-radius: 14px;
    background: linear-gradient(160deg, rgba(120, 81, 169, 0.95) 0%, rgba(59, 130, 246, 0.88) 100%);
    padding: 0.45rem 0.35rem;
    text-align: center;
}

.activos-telefono-device-linea {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #fff;
    line-height: 1.2;
    word-break: break-word;
}

.activos-telefono-device-modelo {
    display: block;
    font-size: 0.56rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.2;
    word-break: break-word;
}

.activos-telefono-ficha-body {
    flex: 1;
    min-width: 0;
    padding: 0.75rem 0.8rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.activos-telefono-ficha-nombre {
    display: block;
    font-weight: 700;
    font-size: 0.96rem;
    color: var(--gray-900, #111827);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activos-telefono-ficha-meta {
    font-size: 0.76rem;
    color: var(--gray-600);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activos-telefono-ficha-asignado {
    font-size: 0.76rem;
    color: var(--gray-700);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-container-administracion .activos-vehiculo-ficha {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    cursor: pointer;
    text-align: left;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.07);
    transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.app-container-administracion .activos-vehiculo-ficha:hover,
.app-container-administracion .activos-vehiculo-ficha:focus-visible {
    border-color: var(--primary-light);
    box-shadow: 0 4px 14px rgba(120, 81, 169, 0.14);
    transform: translateY(-1px);
}

.app-container-administracion .activos-vehiculo-ficha-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: linear-gradient(145deg, var(--primary-light), var(--primary));
    overflow: hidden;
    flex-shrink: 0;
}

.app-container-administracion .activos-vehiculo-ficha-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.activos-vehiculo-ficha-img-wrap .activos-vehiculo-ficha-badge {
    position: absolute;
    top: 0.45rem;
    right: 0.45rem;
    z-index: 2;
    min-width: 5.2rem;
    padding: 0.28rem 0.5rem;
    font-size: 0.72rem;
    box-shadow: 0 1px 6px rgba(15, 23, 42, 0.16);
}

.activos-vehiculo-ficha-body {
    flex: 1;
    min-width: 0;
    padding: 0.7rem 0.75rem 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.activos-vehiculo-ficha-nombre {
    display: block;
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--gray-900, #111827);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activos-vehiculo-ficha-matricula {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--gray-600);
    text-transform: uppercase;
}

.activos-vehiculo-ficha-meta {
    font-size: 0.78rem;
    color: var(--gray-600);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activos-vehiculo-ficha-km-actual {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary-dark);
    line-height: 1.25;
}

.activos-vehiculo-ficha-asignado {
    font-size: 0.78rem;
    color: var(--gray-700);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activos-vehiculo-ficha-body .activos-vehiculo-uso-hoy--compact {
    margin-top: 0.35rem;
    padding: 0.45rem 0.5rem;
}

.activos-vehiculo-ficha-body .activos-vehiculo-uso-hoy--compact .activos-vehiculo-uso-hoy-title {
    font-size: 0.65rem;
    margin-bottom: 0.25rem;
}

.activos-vehiculo-ficha-body .activos-vehiculo-uso-hoy--compact .activos-vehiculo-uso-hoy-label {
    font-size: 0.62rem;
}

.activos-vehiculo-ficha-body .activos-vehiculo-uso-hoy--compact .activos-vehiculo-uso-hoy-value {
    font-size: 0.8rem;
}

.activos-vehiculo-ficha-itv .activos-badge {
    margin-top: 0;
    font-size: 0.72rem;
    padding: 0.15rem 0.45rem;
}

.activos-vehiculo-ficha-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5.5rem;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: lowercase;
    line-height: 1.2;
    text-align: center;
}

.activos-vehiculo-badge-ok {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}

.activos-vehiculo-badge-disponible {
    background: #e0e7ff;
    color: #3730a3;
    border: 1px solid #a5b4fc;
}

.activos-vehiculo-badge-no-disponible {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.activos-vehiculo-badge-mantenimiento {
    background: #ffedd5;
    color: #c2410c;
    border: 1px solid #fdba74;
}

.activos-vehiculo-badge-averia {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.activos-seguro-admin,
.activos-taller-admin {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gray-200);
}

.activos-seguro-admin-hint {
    margin: 0 0 0.75rem;
    font-size: 0.82rem;
    color: var(--gray-600);
}

.activos-seguro-admin-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

@media (max-width: 640px) {
    .activos-seguro-admin-row {
        grid-template-columns: 1fr;
    }
}

/* Formulario edicion vehiculo + historial */
.app-container-administracion #adminActivoFormVehiculoExtra.activos-vehiculo-form-extra {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2.5rem;
    width: 100%;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.app-container-administracion #adminActivoFormTelefonoExtra.activos-telefono-form-extra,
.app-container-administracion #adminActivoFormOrdenadorExtra.activos-ordenador-form-extra,
.app-container-administracion #adminActivoFormImpresoraExtra.activos-ordenador-form-extra {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.app-container-administracion #adminActivoFormScreen:has(#adminActivoFormFields.activos-custom-form-wrap) #adminActivoFormTelefonoExtra.activos-telefono-form-extra {
    max-width: 880px;
}

.app-container-administracion #adminActivoFormFields.activos-vehiculo-form-wrap,
.app-container-administracion #adminActivoFormFields.activos-telefono-form-wrap,
.app-container-administracion #adminActivoFormFields.activos-custom-form-wrap,
.app-container-administracion #adminActivoDetailContent .activos-telefono-form-card {
    display: block;
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
}

.app-container-administracion .activos-ordenador-form-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    padding: 1.25rem 1.35rem;
    border: 1px solid var(--gray-200);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
}

.app-container-administracion .activos-vehiculo-form-card,
.app-container-administracion .activos-telefono-form-card {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    padding: 1.25rem 1.35rem;
    border: 1px solid var(--gray-200);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
    align-items: stretch;
}

.app-container-administracion .activos-vehiculo-form-media {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.app-container-administracion .activos-vehiculo-itv-input-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.app-container-administracion .activos-vehiculo-itv-input-row input[type="date"] {
    flex: 1 1 10rem;
    min-width: 0;
}

.app-container-administracion .activos-vehiculo-itv-badge-wrap .activos-badge {
    margin-top: 0;
}

.app-container-administracion .activos-telefono-form-media {
    flex-shrink: 0;
}

.app-container-administracion .activos-vehiculo-form-media-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
}

.app-container-administracion .activos-vehiculo-form-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
    flex: 1;
    min-width: 0;
}

.app-container-administracion .activos-telefono-form-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
    flex: 1;
    min-width: 0;
}

.app-container-administracion .activos-ordenador-form-fields {
    display: flex;
    flex-direction: column;
    gap: 2.75rem;
    flex: 1;
    min-width: 0;
}

.app-container-administracion .activos-activo-detail-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.app-container-administracion .activos-activo-detail-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gray-700);
    letter-spacing: 0.01em;
}

.app-container-administracion .activos-seguro-catalog-hint {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    color: var(--gray-600);
    line-height: 1.45;
}

.app-container-administracion .activos-field-hint {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--gray-500);
    line-height: 1.4;
}

.app-container-administracion .activos-nueva-categoria-campos-title {
    margin: 1rem 0 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gray-800);
}

.app-container-administracion .activos-nueva-categoria-modal-content .activos-config-list {
    max-height: none;
    overflow: visible;
}

.app-container-administracion .activos-categoria-campo-row {
    align-items: end;
}

.app-container-administracion .activos-vehiculo-seguro-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.35rem;
}

.app-container-administracion .activos-vehiculo-seguro-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    color: var(--gray-800);
    cursor: pointer;
}

.app-container-administracion .activos-vehiculo-seguro-option input {
    flex-shrink: 0;
}

.app-container-administracion .activos-activo-detail-value {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    background: var(--gray-50);
    font-size: 0.9375rem;
    line-height: 1.35;
    min-height: 2.45rem;
    display: flex;
    align-items: center;
}

.app-container-administracion .activos-activo-detail-tel {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

.app-container-administracion .activos-activo-detail-tel:hover {
    text-decoration: underline;
}

.app-container-administracion .activos-vehiculo-form-fields .activos-vehiculo-form-field-full {
    grid-column: 1 / -1;
}

@media (min-width: 640px) {
    .app-container-administracion .activos-vehiculo-form-fields,
    .app-container-administracion .activos-telefono-form-fields,
    .app-container-administracion .activos-custom-form-fields {
        grid-template-columns: 1fr 1fr;
        gap: 0.85rem 1rem;
    }

    .app-container-administracion .activos-custom-form-fields .admin-solicitud-field-full {
        grid-column: 1 / -1;
    }
}

@media (min-width: 768px) {
    .app-container-administracion .activos-vehiculo-form-card,
    .app-container-administracion .activos-telefono-form-card,
    .app-container-administracion .activos-custom-form-card--with-media {
        flex-direction: row;
        align-items: flex-start;
        gap: 1.5rem;
        padding: 1.35rem 1.5rem;
    }

    .app-container-administracion .activos-vehiculo-form-media {
        width: 240px;
    }

    .app-container-administracion .activos-telefono-form-media {
        width: 220px;
    }

    .app-container-administracion .activos-custom-form-card--with-media .activos-custom-form-media-wrap {
        width: 240px;
    }
}

#appContainerTienda .activos-worker-registro-btn {
    width: 100%;
    margin-top: 0.65rem;
}

#appContainerTienda .activos-worker-cambio-rueda-open-btn {
    width: 100%;
    margin-top: 0.5rem;
}

#appContainerTienda .activos-vehiculo-ficha-body .activos-worker-registro-btn,
#appContainerTienda .activos-vehiculo-ficha-body .activos-worker-cambio-rueda-open-btn {
    align-self: stretch;
}

.app-container-administracion #adminActivoFormVehiculoExtra .admin-detail-completar,
.app-container-administracion #adminActivoFormVehiculoExtra .activos-vehiculo-form-asignacion {
    width: 100%;
    text-align: center;
}

.app-container-administracion #adminActivoFormVehiculoExtra .admin-detail-completar-title {
    text-align: center;
}

.app-container-administracion #adminActivoFormVehiculoExtra .admin-solicitud-field {
    align-items: center;
    text-align: center;
}

.app-container-administracion #adminActivoFormVehiculoExtra .admin-solicitud-field select {
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

.app-container-administracion #adminActivoFormVehiculoExtra .admin-detail-actions,
.app-container-administracion #adminActivoFormScreen > .screen-content > .admin-detail-actions {
    justify-content: center;
    width: 100%;
}

.app-container-administracion #adminActivoFormVehiculoExtra .admin-detail-actions {
    margin-top: 0.5rem;
    padding-top: 0;
    border-top: none;
}

/* Botones del formulario vehiculo: misma base que Guardar, colores originales */
.app-container-administracion #adminActivoFormScreen .btn {
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    min-height: 0;
    width: auto;
    flex: 0 0 auto;
}

.activos-form-error {
    color: #991b1b;
    background: #fee2e2;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
}

.app-container-administracion #adminActivoFormVehiculoExtra .activos-vehiculo-form-asignacion {
    margin-top: 1.25rem;
}

.app-container-administracion #adminActivoFormScreen .btn-danger {
    background: #dc2626;
    color: #fff;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.35);
}

.app-container-administracion #adminActivosListScreen .btn-danger {
    background: #dc2626;
    color: #fff;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.35);
}

.app-container-administracion #adminActivoFormScreen .btn-danger:active {
    background: #b91c1c;
    transform: scale(0.98);
}

.app-container-administracion #adminActivosListScreen .btn-danger:active {
    background: #b91c1c;
    transform: scale(0.98);
}

.app-container-administracion #adminActivoFormScreen .activos-vehiculo-form-actions {
    gap: 0.75rem;
}

.app-container-administracion .activos-vehiculo-historial-wrap {
    margin-top: 0;
    text-align: center;
}

.app-container-administracion .activos-vehiculo-historial-wrap.admin-detail-completar {
    padding: 1rem;
}

.app-container-administracion .activos-vehiculo-historial-table-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.app-container-administracion .activos-vehiculo-historial-table {
    width: auto;
    min-width: min(100%, 560px);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
    border-radius: 8px;
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--gray-200);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.app-container-administracion .activos-vehiculo-historial-table thead {
    background: var(--primary);
    color: #fff;
}

.app-container-administracion .activos-vehiculo-historial-table th {
    padding: 0.5rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.app-container-administracion .activos-vehiculo-historial-table td {
    padding: 0.45rem 0.55rem;
    font-size: 0.78rem;
    text-align: center;
    color: var(--gray-800);
    border-top: 1px solid var(--gray-100);
}

.app-container-administracion .activos-vehiculo-historial-table td.activos-vehiculo-historial-num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.app-container-administracion .activos-vehiculo-historial-table tbody tr:nth-child(even) {
    background: rgba(120, 81, 169, 0.04);
}

.app-container-administracion .activos-vehiculo-historial-table tbody tr:hover {
    background: rgba(120, 81, 169, 0.08);
}

.app-container-administracion .activos-vehiculo-historial-empty {
    padding: 1rem !important;
    color: var(--gray-600);
    font-style: italic;
}

/* Detalle vehiculo (vertical) */
.activos-vehiculo-detail-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    border: 1px solid var(--gray-200);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
    margin-bottom: 1rem;
    overflow: hidden;
}

.activos-vehiculo-detail-img-wrap {
    position: relative;
    width: 100%;
    max-width: none;
    border-radius: 0;
    overflow: hidden;
    background: linear-gradient(145deg, var(--primary-light), var(--primary));
}

.activos-vehiculo-detail-img-wrap .activos-vehiculo-ficha-badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 2;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.2);
}

.activos-vehiculo-detail-img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.activos-vehiculo-detail-img-actions {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.55rem;
    background: linear-gradient(180deg, transparent, rgba(15, 23, 42, 0.72));
}

.activos-vehiculo-detail-img-actions .btn {
    font-size: 0.78rem;
    padding: 0.35rem 0.55rem;
}

.activos-vehiculo-detail-body {
    flex: 1;
    min-width: 0;
    padding: 1rem 1rem 1.1rem;
}

.activos-vehiculo-detail-nombre {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.25;
}

.activos-vehiculo-detail-matricula {
    margin: 0.2rem 0 0;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--gray-600);
    text-transform: uppercase;
}

.activos-vehiculo-detail-modelo {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    color: var(--gray-700);
}

.activos-vehiculo-detail-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.65rem;
}

.activos-vehiculo-chip {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    background: var(--gray-100);
    color: var(--gray-700);
    font-size: 0.78rem;
}

.activos-vehiculo-chip--estado .activos-vehiculo-ficha-badge {
    margin-left: 0.15rem;
}

.activos-vehiculo-detail-asignado {
    margin: 0;
    font-size: 0.9rem;
}

.activos-vehiculo-detail-extra p {
    margin: 0.35rem 0;
}

/* Editor imagen formulario vehiculo */
.app-container-administracion .activos-vehiculo-form-media .activos-vehiculo-imagen-preview-wrap {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--gray-200);
    background: linear-gradient(145deg, rgba(120, 81, 169, 0.08), var(--gray-50));
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.app-container-administracion .activos-vehiculo-form-media .activos-vehiculo-imagen-preview {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.app-container-administracion .activos-vehiculo-form-media .activos-vehiculo-imagen-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.app-container-administracion .activos-vehiculo-form-media .activos-vehiculo-imagen-actions .btn {
    width: 100%;
    justify-content: center;
}

.app-container-administracion .activos-vehiculo-form-fields .admin-solicitud-field {
    align-items: stretch;
    text-align: left;
}

.app-container-administracion .activos-vehiculo-form-fields .admin-solicitud-field label {
    text-align: left;
}

.app-container-administracion .activos-vehiculo-imagen-field.admin-solicitud-field-full {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.app-container-administracion .activos-vehiculo-imagen-field label {
    width: 100%;
    text-align: center;
}

.app-container-administracion .activos-vehiculo-imagen-editor {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    max-width: 240px;
    margin: 0 auto;
}

.app-container-administracion .activos-vehiculo-imagen-preview-wrap {
    width: 100%;
    max-width: 240px;
    margin: 0 auto;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--gray-200);
    background: var(--gray-50);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.app-container-administracion .activos-vehiculo-imagen-preview {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.app-container-administracion .activos-vehiculo-imagen-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.app-container-administracion .activos-vehiculo-imagen-hint {
    margin: 0;
    font-size: 0.72rem;
    color: var(--gray-600);
    text-align: center;
    max-width: 240px;
}

/* Uso del dia (vehiculos) */
.app-container-administracion .activos-vehiculo-uso-hoy.admin-detail-completar {
    margin-top: 0;
    padding: 1rem;
    width: 100%;
}

.app-container-administracion #adminActivoFormVehiculoExtra .activos-vehiculo-uso-hoy-grid {
    justify-items: center;
    text-align: center;
}

.app-container-administracion #adminActivoFormVehiculoExtra .activos-vehiculo-uso-hoy-item {
    align-items: center;
}

/* Bureau : annuler la grille admin-detail-completar (solicitudes) pour garder le centrage */
@media (min-width: 768px) {
    .app-container-administracion #adminActivoFormScreen .screen-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .app-container-administracion #adminActivoFormScreen #adminActivoFormFields {
        width: 100%;
        max-width: 720px;
    }

    .app-container-administracion #adminActivoFormScreen #adminActivoFormFields.activos-vehiculo-form-wrap,
    .app-container-administracion #adminActivoFormScreen #adminActivoFormFields.activos-ordenador-form-wrap,
    .app-container-administracion #adminActivoFormScreen #adminActivoFormFields.activos-impresora-form-wrap,
    .app-container-administracion #adminActivoFormScreen #adminActivoFormFields.activos-custom-form-wrap {
        max-width: 880px;
    }

    .app-container-administracion #adminActivoFormScreen:has(#adminActivoFormFields.activos-impresora-form-wrap) #adminActivoFormImpresoraExtra.activos-ordenador-form-extra,
    .app-container-administracion #adminActivoFormScreen:has(#adminActivoFormFields.activos-impresora-form-wrap) > .screen-content > .admin-detail-actions,
    .app-container-administracion #adminActivoFormScreen:has(#adminActivoFormFields.activos-custom-form-wrap) #adminActivoFormTelefonoExtra.activos-telefono-form-extra,
    .app-container-administracion #adminActivoFormScreen:has(#adminActivoFormFields.activos-custom-form-wrap) > .screen-content > .admin-detail-actions {
        max-width: 880px;
        width: 100%;
    }

    .app-container-administracion #adminActivoFormVehiculoExtra.activos-vehiculo-form-extra,
    .app-container-administracion #adminActivoFormTelefonoExtra.activos-telefono-form-extra,
    .app-container-administracion #adminActivoFormOrdenadorExtra.activos-ordenador-form-extra,
    .app-container-administracion #adminActivoFormImpresoraExtra.activos-ordenador-form-extra {
        max-width: 720px;
    }

    .app-container-administracion #adminActivoFormVehiculoExtra .admin-detail-completar,
    .app-container-administracion #adminActivoFormVehiculoExtra .activos-vehiculo-form-asignacion.admin-detail-completar {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .app-container-administracion #adminActivoFormVehiculoExtra .admin-detail-completar-title {
        width: 100%;
        text-align: center;
        margin-bottom: 0.5rem;
    }

    .app-container-administracion #adminActivoFormVehiculoExtra .admin-solicitud-field,
    .app-container-administracion #adminActivoFormVehiculoExtra .admin-detail-actions,
    .app-container-administracion #adminActivoFormVehiculoExtra .activos-vehiculo-historial-table-wrap,
    .app-container-administracion #adminActivoFormVehiculoExtra .activos-vehiculo-uso-hoy-grid {
        width: 100%;
        justify-content: center;
    }

    .app-container-administracion #adminActivoFormVehiculoExtra .activos-vehiculo-uso-hoy-grid {
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
    }

    .app-container-administracion #adminActivoFormVehiculoExtra .activos-vehiculo-historial-table {
        margin-left: auto;
        margin-right: auto;
    }

    .app-container-administracion #adminActivoFormScreen > .screen-content > .admin-detail-actions {
        max-width: 720px;
    }
}

.activos-vehiculo-uso-hoy--compact {
    margin-top: 0.45rem;
    padding: 0.45rem 0.5rem;
    border-radius: 8px;
    background: rgba(120, 81, 169, 0.05);
    border: 1px solid rgba(120, 81, 169, 0.12);
}

.activos-vehiculo-uso-hoy-title {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--primary-dark);
    margin-bottom: 0.35rem;
}

.activos-vehiculo-uso-hoy-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.35rem;
}

.activos-vehiculo-uso-hoy--compact .activos-vehiculo-uso-hoy-grid {
    grid-template-columns: 1fr;
    gap: 0.25rem;
}

@media (min-width: 420px) {
    .activos-vehiculo-uso-hoy:not(.activos-vehiculo-uso-hoy--compact) .activos-vehiculo-uso-hoy-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.5rem;
    }
}

.activos-vehiculo-uso-hoy-item {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.activos-vehiculo-uso-hoy-label {
    font-size: 0.68rem;
    line-height: 1.25;
    color: var(--gray-600);
}

.activos-vehiculo-uso-hoy--compact .activos-vehiculo-uso-hoy-label {
    font-size: 0.62rem;
}

.activos-vehiculo-uso-hoy-value {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--primary-dark);
    line-height: 1.2;
}

.activos-vehiculo-uso-hoy--compact .activos-vehiculo-uso-hoy-value {
    font-size: 0.82rem;
}

/* Favoritos */
.favoritos-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.favoritos-crear-btn {
    margin-left: auto;
}

.favoritos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.favoritos-carpeta-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 1rem;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    background: #fff;
    text-align: left;
    cursor: pointer;
    min-height: 110px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.favoritos-carpeta-card:hover,
.favoritos-carpeta-card:focus-visible {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.favoritos-carpeta-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.favoritos-carpeta-nombre {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--gray-900);
    word-break: break-word;
}

.favoritos-carpeta-count {
    font-size: 0.8rem;
    color: var(--gray-600);
}

.favoritos-carpeta-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.favoritos-item-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.favoritos-item-row {
    cursor: pointer;
}

.favoritos-item-mover-btn {
    flex-shrink: 0;
    align-self: center;
    padding: 0.35rem 0.6rem;
    font-size: 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    background: #fff;
    color: var(--gray-700);
}

.favoritos-item-mover-btn:hover {
    border-color: var(--primary);
    color: var(--primary-dark);
}

.btn-favorito {
    flex-shrink: 0;
    align-self: center;
    width: 2.75rem;
    height: 2.75rem;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.96);
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.btn-favorito:hover,
.btn-favorito:focus-visible {
    transform: scale(1.05);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.16);
}

.btn-favorito:active {
    transform: scale(0.96);
}

.btn-favorito--modal {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 2;
}

.btn-favorito-svg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.45rem;
    height: 1.45rem;
    pointer-events: none;
}

.favorito-heart-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.favorito-heart-path {
    fill: transparent;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: fill 0.22s ease, stroke 0.22s ease, transform 0.22s ease;
    transform-origin: center;
}

.btn-favorito.active {
    color: #e11d48;
    background: linear-gradient(180deg, #fff5f7 0%, #ffe4e8 100%);
    box-shadow: 0 4px 16px rgba(225, 29, 72, 0.22);
}

.btn-favorito.active .favorito-heart-path {
    fill: #e11d48;
    stroke: #be123c;
    transform: scale(1.04);
}

.btn-favorito--pulse {
    animation: favoritoHeartPulse 0.32s ease;
}

@keyframes favoritoHeartPulse {
    0% { transform: scale(1); }
    45% { transform: scale(1.14); }
    100% { transform: scale(1); }
}

@keyframes gotita-pulse {
    0% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); opacity: 0.7; }
}

@keyframes gotita-bar-speak {
    0%, 100% { transform: scaleY(0.35); opacity: 0.55; }
    50% { transform: scaleY(1); opacity: 1; }
}

@keyframes gotita-dot-think {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.35; }
    40% { transform: translateY(-5px); opacity: 1; }
}

@keyframes gotita-avatar-think {
    0%, 100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.25); }
    50% { box-shadow: 0 0 0 10px rgba(124, 58, 237, 0); }
}

/* Gotita IA (pantalla premium) */
#gotitaScreen .gotita-screen-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem 1rem 1rem;
    min-height: 100%;
    box-sizing: border-box;
}

.gotita-page-header {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-bottom: 0.25rem;
}

.gotita-header-brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(59, 130, 246, 0.08));
    border: 1px solid var(--gray-200, #e5e7eb);
}

.gotita-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--primary, #7c3aed), #3b82f6);
    position: relative;
    flex-shrink: 0;
}

.gotita-avatar--live::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(124, 58, 237, 0.35);
    animation: gotita-pulse 1.8s ease-in-out infinite;
}

.gotita-avatar--speaking::after {
    border-color: rgba(59, 130, 246, 0.55);
    animation: gotita-pulse 0.9s ease-in-out infinite;
}

.gotita-avatar--thinking {
    animation: gotita-avatar-think 1.4s ease-in-out infinite;
}

.gotita-avatar--thinking::after {
    border-color: rgba(124, 58, 237, 0.5);
    animation: gotita-pulse 1.1s ease-in-out infinite;
}

.gotita-page-title {
    margin: 0;
    font-size: 1.2rem;
    color: var(--gray-900, #111827);
}

.gotita-page-subtitle {
    margin: 0.15rem 0 0;
    font-size: 0.85rem;
    color: var(--gray-600, #4b5563);
}

.search-empty-diag {
    margin-top: 0.5rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--gray-600, #4b5563);
    background: var(--gray-50, #f9fafb);
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 8px;
    max-width: 32rem;
}

.gotita-status-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
    background: var(--white, #fff);
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 10px;
}

.gotita-status-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 20px;
    flex-shrink: 0;
}

.gotita-activity {
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    height: 18px;
}

.gotita-activity[hidden] {
    display: none !important;
}

.gotita-activity-bar {
    display: block;
    width: 4px;
    height: 14px;
    border-radius: 2px;
    background: var(--primary, #7c3aed);
    transform-origin: center bottom;
}

.gotita-activity--speaking .gotita-activity-bar:nth-child(1) {
    animation: gotita-bar-speak 0.55s ease-in-out infinite;
}

.gotita-activity--speaking .gotita-activity-bar:nth-child(2) {
    animation: gotita-bar-speak 0.55s ease-in-out 0.12s infinite;
}

.gotita-activity--speaking .gotita-activity-bar:nth-child(3) {
    animation: gotita-bar-speak 0.55s ease-in-out 0.24s infinite;
}

.gotita-activity--thinking .gotita-activity-bar {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    align-self: center;
    animation: gotita-dot-think 1.1s ease-in-out infinite;
}

.gotita-activity--thinking .gotita-activity-bar:nth-child(2) {
    animation-delay: 0.15s;
}

.gotita-activity--thinking .gotita-activity-bar:nth-child(3) {
    animation-delay: 0.3s;
}

.gotita-screen--speaking .gotita-status-bar {
    border-color: rgba(59, 130, 246, 0.35);
    background: rgba(59, 130, 246, 0.06);
}

.gotita-screen--thinking .gotita-status-bar {
    border-color: rgba(124, 58, 237, 0.35);
    background: rgba(124, 58, 237, 0.06);
}

.gotita-screen--listening .gotita-status-bar {
    border-color: rgba(34, 197, 94, 0.35);
    background: rgba(34, 197, 94, 0.06);
}

.gotita-status-dot--listening {
    animation: gotita-dot-listen 1.4s ease-in-out infinite;
}

@keyframes gotita-dot-listen {
    0%, 100% {
        box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 7px rgba(34, 197, 94, 0.12);
        transform: scale(1.12);
    }
}

.gotita-error-detail {
    margin: 0.5rem 0 0;
    padding: 0.65rem 0.85rem;
    font-size: 0.875rem;
    line-height: 1.45;
    color: #991b1b;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
}

.gotita-status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--gray-400, #9ca3af);
    flex-shrink: 0;
}

.gotita-status-dot--live {
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2);
}

.gotita-status-text {
    margin: 0;
    color: var(--gray-700, #374151);
    font-size: 0.9rem;
    font-weight: 500;
}

.gotita-page-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
    flex: 1;
    min-height: 0;
}

.gotita-section-title {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    color: var(--gray-800, #1f2937);
    font-weight: 600;
}

.gotita-transcript-wrap,
.gotita-cart-wrap {
    background: var(--white, #fff);
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 12px;
    padding: 0.85rem;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.gotita-transcript {
    flex: 1;
    min-height: 160px;
    max-height: 38vh;
    overflow: auto;
    border-radius: 8px;
    padding: 0.75rem;
    background: var(--gray-50, #f9fafb);
}

.gotita-transcript-line {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    line-height: 1.4;
    padding: 0.45rem 0.6rem;
    border-radius: 8px;
    background: var(--white, #fff);
    border: 1px solid var(--gray-200, #e5e7eb);
}

.gotita-transcript-line--agent {
    border-color: rgba(124, 58, 237, 0.2);
    background: rgba(124, 58, 237, 0.04);
}

.gotita-transcript-line[data-partial="true"] {
    opacity: 0.72;
}

.gotita-cart-items {
    flex: 1;
    min-height: 160px;
    max-height: 38vh;
    overflow: auto;
    margin: 0;
}

.gotita-cart-items .cart-product-card {
    margin-bottom: 0.65rem;
}

.gotita-oferta-readonly .oferta-badge {
    pointer-events: none;
}

.gotita-cart-empty-state {
    text-align: center;
    padding: 1.5rem 0.75rem;
    color: var(--gray-600, #4b5563);
}

.gotita-cart-empty-state p {
    margin: 0 0 0.35rem;
}

.gotita-cart-empty-hint {
    font-size: 0.85rem;
    color: var(--gray-500, #6b7280);
}

.gotita-cart-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--gray-200, #e5e7eb);
    font-size: 0.95rem;
    color: var(--gray-800, #1f2937);
}

.gotita-cart-total-row strong {
    color: var(--primary, #7c3aed);
    font-size: 1.05rem;
}

.gotita-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: stretch;
    padding-top: 0.25rem;
    flex-shrink: 0;
}

.gotita-page-actions .btn {
    flex: 1 1 auto;
    min-width: 140px;
}

.gotita-btn-start,
.gotita-btn-hangup,
.gotita-btn-done {
    font-weight: 600;
}

.gotita-btn-done {
    border-color: rgba(34, 197, 94, 0.45);
    color: #166534;
}

.gotita-screen--in-call .gotita-page-header {
    border-color: transparent;
}

.gotita-options-section {
    background: var(--white, #fff);
    border: 1px solid rgba(124, 58, 237, 0.22);
    border-radius: 12px;
    padding: 0.75rem 0.85rem;
    box-shadow: 0 2px 10px rgba(124, 58, 237, 0.06);
}

.gotita-options-header {
    margin-bottom: 0.55rem;
}

.gotita-options-header .gotita-section-title {
    margin-bottom: 0.15rem;
}

.gotita-options-hint {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--gray-600, #4b5563);
}

.gotita-options-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    max-height: 42vh;
    overflow-y: auto;
}

.gotita-option-card {
    width: 100%;
    text-align: left;
    cursor: pointer;
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 10px;
    padding: 0.55rem 0.65rem;
    background: var(--white, #fff);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.gotita-option-card:hover:not(:disabled) {
    border-color: rgba(124, 58, 237, 0.45);
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.12);
}

.gotita-option-card--selected {
    border-color: var(--primary, #7c3aed);
    background: rgba(124, 58, 237, 0.06);
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.15);
}

.gotita-option-card:disabled:not(.gotita-option-card--selected) {
    opacity: 0.55;
}

.gotita-option-choose {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    flex-shrink: 0;
    margin-left: 0.35rem;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    background: var(--primary, #7c3aed);
}

.gotita-option-card--selected .gotita-option-choose {
    background: #15803d;
}

@media (max-width: 768px) {
    .gotita-page-body {
        grid-template-columns: 1fr;
    }

    .gotita-transcript,
    .gotita-cart-items {
        max-height: 28vh;
    }
}

/* ===========================================================================
   Mejorar Gotita (Panel de Control, ADMINISTRADOR)
   =========================================================================== */
.panel-badge {
    display: inline-block;
    min-width: 20px;
    padding: 1px 7px;
    margin-left: 8px;
    border-radius: 999px;
    background: #e02424;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    vertical-align: middle;
}

.gotita-mejoras-intro {
    color: #555;
    font-size: 14px;
    margin: 8px 0 12px;
}

.gotita-mejoras-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.gotita-mejoras-tab {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #d0d0d0;
    border-radius: 8px;
    background: #f6f6f6;
    color: #333;
    font-weight: 600;
    cursor: pointer;
}

.gotita-mejoras-tab.active {
    background: #1f6feb;
    border-color: #1f6feb;
    color: #fff;
}

.gotita-mejoras-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gotita-mejora-card {
    border: 1px solid #e2e2e2;
    border-radius: 10px;
    padding: 12px 14px;
    background: #fff;
    cursor: pointer;
    transition: box-shadow 0.15s ease;
}

.gotita-mejora-card:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.gotita-mejora-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.gotita-tipo-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 12px;
    font-weight: 700;
}

.gotita-tipo-sin_resultado,
.gotita-tipo-tool_error {
    background: #fde8e8;
    color: #b91c1c;
}

.gotita-tipo-rechazo_opciones,
.gotita-tipo-cambio_codigo {
    background: #fff4e5;
    color: #b45309;
}

.gotita-prio {
    font-size: 12px;
    color: #888;
    font-weight: 600;
}

.gotita-mejora-frase {
    font-size: 15px;
    font-weight: 600;
    color: #111;
    margin: 4px 0;
}

.gotita-mejora-resumen-line {
    font-size: 14px;
    color: #444;
    margin-bottom: 6px;
}

.gotita-mejora-card-meta {
    font-size: 12px;
    color: #888;
}

.gotita-mejora-detail {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.gotita-mejora-resumen p {
    margin: 8px 0;
    color: #333;
}

.gotita-mejora-meta {
    font-size: 13px;
    color: #777;
}

.gotita-mejora-subtitle {
    font-size: 15px;
    font-weight: 700;
    margin: 6px 0;
}

.gotita-timeline-list {
    margin: 4px 0 0;
    padding-left: 18px;
    color: #444;
    font-size: 14px;
}

.gotita-timeline-list li {
    margin-bottom: 4px;
}

.gotita-mejora-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin: 10px 0 4px;
}

.gotita-mejora-resultados {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 220px;
    overflow-y: auto;
    margin-top: 6px;
}

.gotita-mejora-resultado {
    text-align: left;
    padding: 8px 10px;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    background: #fafafa;
    cursor: pointer;
    font-size: 14px;
}

.gotita-mejora-resultado:hover {
    background: #eef2ff;
}

.gotita-mejora-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}