html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
            font-family: 'Inter', sans-serif;
        }
        /* ===============================================================
           PANTALLA DE ACCESO - TIENE QUE PODER DESPLAZARSE (v213)

           El registro de cuatro pasos hizo alto el formulario: el paso 2
           mide ~1200 px y no entra en ningun telefono. Hasta aca
           #authContainer era `absolute inset-0 flex items-center` sin
           scroll, y `body` tiene `overflow: hidden`, asi que el boton
           "Continuar" quedaba FUERA de la pantalla y era inalcanzable en
           320, 360, 390, 420, 430 y 768. Medido, no deducido.

           NO usar `align-items: center` aca, y no alcanza con agregar
           overflow. Cuando el hijo es MAS ALTO que el contenedor, centrar
           desborda hacia ARRIBA y hacia abajo, y la parte de arriba queda
           fuera del area desplazable: no se llega ni con scroll. El patron
           correcto es alinear al inicio y centrar con margenes automaticos,
           que centran cuando SOBRA espacio y valen 0 cuando falta.

           Lo vigila scratchpad/signup-v2/test-alcanzable.mjs, que mide las
           DOS puntas: que se alcance el boton (abajo) y el principio de la
           tarjeta (arriba). Medir solo el boton no ve el defecto de
           `center`, porque el boton esta al final.
           =============================================================== */
        #authContainer {
            height: 100vh;    /* respaldo para navegadores viejos */
            height: 100dvh;   /* movil: la altura VISIBLE real */
            overflow-y: auto;
            overflow-x: hidden;            /* nada de scroll lateral a 320 px */
            -webkit-overflow-scrolling: touch;
            align-items: flex-start;       /* NO `center`: ver arriba */
            padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 32px);
        }
        /* Centrado seguro: con espacio de sobra los margenes automaticos
           centran la tarjeta; sin espacio valen 0 y nada se recorta. */
        #authContainer > div {
            margin-top: auto;
            margin-bottom: auto;
        }
        #app-container {
            display: flex;
            flex-direction: column;
            height: 100vh;   /* respaldo para navegadores viejos */
            height: 100dvh;  /* móvil: la altura VISIBLE real, no la de la ventana grande */
        }
        #mainApp {
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            overflow: hidden;
        }
        #main-content-area {
            flex-grow: 1;
            position: relative;
            overflow: hidden;
        }
        #map-view, .content-view {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        #map-container {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
        #map {
            height: 100%;
            width: 100%;
            background-color: #a3a3a3;
            z-index: 10;
        }
        #bottom-panel {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            flex-shrink: 0;
            height: 90px;
            max-height: 100%;
            min-height: 0;   /* v143: el alto compacto sale del contenido, no de un número fijo */
            z-index: 20;
            transform: translateZ(0);
            transition: height 0.3s ease-out;
            display: flex;
            flex-direction: column;
        }
        #panel-header {
            flex-shrink: 0;
            cursor: ns-resize;
            touch-action: none;
        }
     .modal { z-index: 1000; }
        /* --- INICIO DEL CAMBIO --- */
        #reassignJobModal { z-index: 2000; } /* <-- ¡Esta es la línea clave! */
        /* --- FIN DEL CAMBIO --- */
        #side-menu-container {
            z-index: 50;
            transition: visibility 0.3s;
        
        }
        #side-menu-container.hidden {
            visibility: hidden;
        }
        #menu-overlay {
            transition: opacity 0.3s ease-in-out;
        }
        #side-menu {
            transition: transform 0.3s ease-in-out;
            transform: translateX(-100%);
        }
        #side-menu-container:not(.hidden) #side-menu {
            transform: translateX(0);
        }
        .hidden { display: none !important; }
        .job-item { cursor: pointer; }
        #addNewClientBtn:disabled, #confirmAddNewClientBtn:disabled, #addAllToRouteBtn:disabled, #signupBtn:disabled, #openGroupScheduleModalBtn:disabled {
            background-color: #4b5563;
            cursor: not-allowed;
        }
        .pac-container { 
            z-index: 9999 !important;
            background-color: white;
            border-radius: 8px;
        }
        .dark .pac-container {
            background-color: #1f2937;
            border: 1px solid #4b5563;
        }
        .pac-item {
            padding: 10px;
            color: #111827;
            cursor: pointer;
            border-bottom: 1px solid #e5e7eb;
        }
         .dark .pac-item {
            color: white;
            border-bottom: 1px solid #374151;
        }
        .pac-item:last-child { border-bottom: none; }
        .pac-item:hover, .pac-item-selected { background-color: #f3f4f6; }
        .dark .pac-item:hover, .dark .pac-item-selected { background-color: #374151; }
        .pac-item-query { font-weight: 600; }
        .chart-container {
            position: relative;
            width: 100%;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
            height: 300px;
            max-height: 40vh;
        }
        .map-control-button {
            background-color: white;
            border: none;
            border-radius: 9999px;
            width: 40px;
            height: 40px;
            margin: 10px;
            cursor: pointer;
            box-shadow: 0 2px 6px rgba(0,0,0,0.3);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .dark .map-control-button {
            background-color: #1f2937;
            color: #e5e7eb;
        }
        .map-control-button.nearby-active,
        .dark .map-control-button.nearby-active {
            background-color: #16a34a;
            color: white;
        }
        /* --- Pantalla de carga --- */
        #loadingScreen {
            position: fixed;
            inset: 0;
            width: 100vw;
            height: 100vh;   /* fallback para navegadores viejos */
            height: 100dvh;  /* Chrome Android: altura visible real, ajustada a la barra de direcciones */
            background: linear-gradient(135deg, #ffffff 0%, #f0f9f4 100%);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            transition: opacity 0.4s ease;
        }
        .dark #loadingScreen {
            background: linear-gradient(135deg, #111827 0%, #0d1f16 100%);
        }
        #loadingScreen.fade-out {
            opacity: 0;
            pointer-events: none;
        }
        #loadingScreen.hidden {
            display: none; /* la regla por ID le ganaría a .hidden de Tailwind sin esto */
        }
        .loading-logo {
            width: 110px;
            height: 110px;
            object-fit: contain;
        }
        .loading-spinner {
            width: 40px;
            height: 40px;
            border: 3px solid #e5e7eb;
            border-top-color: #1D6A3A;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
            margin-top: 16px;
        }
        .dark .loading-spinner {
            border-color: #374151;
            border-top-color: #4ade80;
        }
        .loading-text {
            margin-top: 12px;
            font-size: 0.85rem;
            color: #6b7280;
        }
        .dark .loading-text {
            color: #9ca3af;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        .client-address-link {
            cursor: pointer;
            text-decoration: underline;
            color: #3b82f6;
        }
        .dark .client-address-link {
            color: #60a5fa;
        }

/* --- ESTILOS PARA VENTANA DE INFORMACIÓN (VERSIÓN 7 - SIN FONDO DE GOOGLE) --- */

/* 1. Hacemos invisible el contenedor de Google Maps */
.gm-style .gm-style-iw-c {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.gm-style .gm-style-iw-d {
    overflow: visible !important; /* Permitimos que nuestro contenido se vea */
}

/* 2. Estilizamos NUESTRO contenido para que se vea como queremos */
.info-window-content {
    background: linear-gradient(145deg, #10B981, #4ade80);
    color: white;
    padding: 1rem;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.25);
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-align: center;
    max-width: 250px;
}

/* Variante cálida (ámbar/naranja): trabajo completado y cobrado */
.info-window-content.info-window-paid {
    background: linear-gradient(145deg, #F97316, #FBBF24);
}

/* 3. La flecha de la ventana ahora apunta a nuestro contenido */
.gm-style .gm-style-iw-t::after {
    background: #10B981 !important; /* Color más oscuro del degradado */
}
/* Flecha naranja cuando la ventana es de un trabajo cobrado (:has — en navegadores
   sin soporte la flecha queda verde, solo detalle cosmético) */
.gm-style .gm-style-iw-t:has(.info-window-paid)::after {
    background: #F97316 !important;
}
/* 4. Estilos para el texto dentro de nuestro contenido (sin cambios) */
.info-window-content b {
    font-size: 1.55rem !important;
    font-weight: 700 !important;
    line-height: 1.0 !important;
    display: block;
    margin-bottom: 0;
    color: white !important;
}

.info-window-content span {
    font-size: 0.875rem !important;
    opacity: 0.9;
    display: block;
}

.info-window-content .mt-2 {
    margin-top: 0.3rem !important;
    padding-top: 0.3rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.4) !important;
}

.info-window-content p {
    font-size: 0.875rem !important;
    color: white !important;
    text-align: center !important;
    margin: 0.1rem 0 !important;
}

.info-window-content p strong {
    font-weight: 600 !important;
}


/* --- INICIO: Ocultar botón 'X' de la ventana de Google Maps --- */
.gm-style .gm-ui-hover-effect {
    display: none !important;
}
/* --- FIN: Ocultar botón 'X' --- */
       
       
        .content-view {
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .content-view-header {
            flex-shrink: 0;
            padding: 1rem;
            background-color: white;
            border-bottom: 1px solid #e5e7eb;
            z-index: 5;
        }
        .dark .content-view-header {
            background-color: #1f2937;
            border-bottom-color: #374151;
        }
        .finance-tab {
            border-bottom: 2px solid transparent;
        }
        .finance-tab.active {
            border-bottom-color: #10B981;
            color: #10B981;
        }
        /* v143: el panel de llegada/salida se fusionó dentro del bottom sheet.
           Su posicionamiento vive ahora en el bloque de v143 (colapsa con grid-template-rows,
           porque un transform no libera espacio en el flujo). */
        #swipe-container {
            touch-action: none;
            position: relative;
            overflow: hidden;
        }
        #swipe-handle {
            position: absolute;
            left: 4px;
            top: 4px;
            cursor: grab;
            z-index: 10;
            transition: transform 0.1s linear, background-color 0.3s ease;
        }
        #swipe-handle:active {
            cursor: grabbing;
        }
        #swipe-text {
            text-align: center;
            width: 100%;
            position: relative;
            z-index: 5;
            transition: opacity 0.2s ease-in-out;
            user-select: none;
        }
        .job-item.dragging {
            opacity: 0.5;
            background-color: #dbeafe;
        }
        .dark .job-item.dragging {
            background-color: #312e81;
        }
        .day-filter-btn {
            padding: 0.25rem 0.75rem;
            border-radius: 0.375rem;
            font-size: 0.875rem;
            font-weight: 500;
            transition: background-color 0.2s, color 0.2s;
        }
       /* v151: la regla vieja de #calendar-grid (filas de 120 px) se quitó. Ganaba por
          especificidad —id contra clase— y era la causa de que la cuadrícula midiera 374 px.
          El tamaño lo define ahora .cal-grid, al final del archivo. */
        /* v151: las reglas viejas de la cuadrícula (celdas de 100px con etiquetas de texto
           por trabajo) se reemplazaron por el bloque del calendario, al final del archivo. */
        /* v148: esta regla pintaba la fila ENTERA de verde con !important. Se quitó por dos
           razones: el usuario pidió no usar una tarjeta verde completa, y el verde ahí decía
           lo contrario de lo que parecía —no es "agendado", es "se le pasó la fecha ideal"—.
           Ahora la marca es el borde ámbar de .cl-* , que es el color de atención pendiente.
           La clase se conserva: la sigue poniendo el render y puede haber quien la use. */
        #client-detail-drawer-container {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 999;
            pointer-events: none;
            transition: background-color 0.3s ease-in-out;
        }
        #client-detail-drawer-container.visible {
            pointer-events: all;
            background-color: rgba(0, 0, 0, 0.6);
        }
        #client-detail-drawer {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            width: 420px;
            max-width: 100vw;
            transform: translateX(100%);
            transition: transform 0.3s ease-in-out;
            display: flex;
            flex-direction: column;
            box-shadow: -10px 0 25px rgba(0,0,0,0.3);
            /* v145: el fondo sale de los tokens del rediseño (claro y oscuro). */
            background-color: var(--v145-bg, #f9fafb);
        }
        .dark #client-detail-drawer {
            background-color: var(--v145-bg, #1f2937);
        }
        #client-detail-drawer-container.visible #client-detail-drawer {
            transform: translateX(0);
        }
        .drawer-header {
            padding: 1rem 1rem 0.625rem;   /* v146: menos aire debajo de los chips */
            border-bottom: 1px solid var(--v145-line, #e5e7eb);
        }
        .dark .drawer-header {
            border-bottom-color: var(--v145-line, #374151);
        }
        .drawer-body {
            /* v146: el botón "Agendar trabajo" sube un poco, más cerca de los chips. */
            padding: 0.75rem 1rem 1rem;
            overflow-y: auto;
            flex-grow: 1;
            overflow-x: hidden;   /* v145: nada de scroll horizontal a 320 px */
        }
        .drawer-action-list > button {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            padding: 1rem 0;
            border-bottom: 1px solid #e5e7eb;
            transition: background-color 0.2s;
        }
        .dark .drawer-action-list > button {
            border-bottom-color: #374151;
        }
        .drawer-action-list > button:hover {
            background-color: #f3f4f6;
        }
        .dark .drawer-action-list > button:hover {
            background-color: #374151;
        }
        .payment-method-btn {
            background-color: transparent;
            color: #9ca3af;
            border: 1px solid #4b5563;
            transition: background-color 0.2s, color 0.2s, border-color 0.2s;
        }
        .payment-method-btn.active {
            background-color: #10B981;
            color: white;
            border-color: #10B981;
        }
        @media (max-width: 768px) {
            /* v151: acá también mandaba el id sobre la clase. Fuera. */
            .calendar-day {
                padding: 4px;
            }
            .day-number {
                font-size: 0.75rem;
                margin-bottom: 4px;
            }
            .day-number.today {
                width: 22px;
                height: 22px;
            }
            .day-events {
                flex-direction: row;
                justify-content: center;
                flex-wrap: wrap;
                gap: 4px;
                padding-right: 0;
                overflow-y: hidden;
            }
            #client-detail-drawer {
                width: 100%;
            }
        }
        .group-filter-btn {
            transition: background-color 0.2s, color 0.2s;
        }
        .group-filter-btn.active {
            background-color: #10B981;
            color: white;
            font-weight: 700;
        }
        .period-filter-btn {
            transition: background-color 0.2s, color 0.2s;
            background-color: transparent;
            border: none;
            color: #6b7280;
        }
        .dark .period-filter-btn {
            color: #9ca3af;
        }
        .period-filter-btn.active {
            background-color: #10B981;
            color: white;
            font-weight: 700;
        }
        .admin-active-view {
            background-color: #dbeafe !important;
            border-left: 4px solid #3b82f6;
            transition: background-color 0.3s ease-in-out;
        }
        .dark .admin-active-view {
            background-color: #1e3a8a !important;
            border-left-color: #60a5fa;
        }
        .worker-impersonated-view {
            background-color: #dbeafe !important;
            border-left: 4px solid #3b82f6;
            transition: background-color 0.3s ease-in-out;
        }
        .dark .worker-impersonated-view {
            background-color: #1e3a8a !important;
            border-left-color: #60a5fa;
        }
        .content-view-body {
            flex-grow: 1;
            overflow-y: auto;
            padding: 1rem;
            padding-bottom: 96px; 
        }
        #panel-content-wrapper {
            padding-bottom: 80px;
        }
        #bottom-nav {
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        }
        .dark #bottom-nav {
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
        }
        .bottom-nav-btn {
            flex-grow: 1;
            padding: 8px 0;
            transition: color 0.2s ease-in-out, transform 0.1s ease-in-out;
        }
        .bottom-nav-btn:active {
            transform: scale(0.95);
        }
        .bottom-nav-btn.active {
            color: #10B981;
        }
        .bottom-nav-btn.active svg {
            transform: scale(1.1);
        }
        .dark .flatpickr-calendar {
            background: #ffffff !important;
            border-color: #e5e7eb !important;
            box-shadow: 0 3px 15px rgba(0,0,0,0.2) !important;
        }
        .dark .flatpickr-month,
        .dark .flatpickr-weekdays,
        .dark .numInputWrapper,
        .dark .flatpickr-weekday,
        .dark .flatpickr-day,
        .dark .flatpickr-time input,
        .dark .flatpickr-time .flatpickr-am-pm {
            color: #111827 !important;
        }
        .dark .flatpickr-day:hover {
            background: #f3f4f6 !important;
        }
        .dark .flatpickr-day.today {
            border-color: #10B981 !important;
            color: #10B981 !important;
        }
        .dark .flatpickr-day.selected, 
        .dark .flatpickr-day.startRange, 
        .dark .flatpickr-day.disabled {
            color: #9ca3af !important;
        }
        .dark .arrowUp:after {
            border-bottom-color: #111827 !important;
        }
        .dark .arrowDown:after {
            border-top-color: #111827 !important;
        }
        .accordion-icon.rotate-180 { transform: rotate(180deg); }
        .worker-report-card {
            background-color: white;
            border-radius: 0.75rem;
            border: 1px solid #e5e7eb;
            margin-bottom: 1.5rem;
            overflow: hidden;
        }
        .dark .worker-report-card {
            background-color: #1f2937;
            border-color: #374151;
        }
        .timeline {
            position: relative;
            padding: 1rem 0;
        }
        .timeline::before {
            content: '';
            position: absolute;
            left: 20px;
            top: 0;
            bottom: 0;
            width: 2px;
            background-color: #e5e7eb;
        }
        .dark .timeline::before {
            background-color: #374151;
        }
        .timeline-item {
            position: relative;
            padding-left: 50px;
            margin-bottom: 1rem;
        }
        .timeline-icon {
            position: absolute;
            left: 0;
            top: 0;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid white;
        }
        .dark .timeline-icon {
            border-color: #1f2937;
        }

        /* --- ESTILO PERSONALIZADO PARA LOS CALENDARIOS (FLATPICKR) --- */
        /* Cambia el color del día seleccionado a verde */
        .dark .flatpickr-day.selected, 
        .dark .flatpickr-day.startRange, 
        .dark .flatpickr-day.endRange {
            background: #10B981 !important;
            border-color: #10B981 !important;
            color: #ffffff !important;
        }

        /* Estilo para el tema claro (por si acaso) */
        .flatpickr-day.selected, 
        .flatpickr-day.startRange, 
        .flatpickr-day.endRange {
            background: #10B981;
            border-color: #10B981;
        }
/* --- INICIO: Estilos para Marcador Activo y Cronómetro (VERSIÓN CORREGIDA Y MÁS PEQUEÑA) --- */

/* La ventana de información personalizada (el cuadro verde) */
/* PEGA ESTE NUEVO BLOQUE */
.custom-info-window {
    position: absolute;
    transform: translate(-50%, -150%); /* Sube la ventana para que no tape la casa */
    background: linear-gradient(145deg, #10B981, #4ade80); /* <-- ¡COLOR CORREGIDO! */
    color: white;
    padding: 0.75rem;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.25); /* <-- SOMBRA AÑADIDA */
    border: 1px solid rgba(255, 255, 255, 0.2); /* <-- BORDE AÑADIDO */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    font-family: 'Inter', sans-serif;
    z-index: 120;
    width: 210px;
    text-align: center;
}

/* El nombre del cliente */
.custom-info-window .client-name {
    font-size: 1.875rem; /* Más pequeño (antes 2.25rem) */
    font-weight: 700;
    line-height: 1.1;
}

/* La dirección del cliente */
.custom-info-window .client-address {
    font-size: 0.75rem; /* Más pequeño (antes 0.8rem) */
    opacity: 0.85;
    margin-bottom: 0.5rem;
    max-width: 90%;
}

/* El contenedor para el cronómetro */
.custom-info-window .timer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 0.5rem;
}

/* El icono del reloj */
.custom-info-window .timer-icon {
    width: 28px; /* Más pequeño (antes 32px) */
    height: 28px; /* Más pequeño (antes 32px) */
    opacity: 0.9;
}

/* El texto del cronómetro */
.custom-info-window .timer-display {
    font-size: 1.5rem; /* Más pequeño (antes 1.875rem) */
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* Botones genéricos (X, historial) */
.custom-info-window .info-button {
    background: none; border: none; color: white;
    cursor: pointer; padding: 4px; opacity: 0.7;
    transition: opacity 0.2s;
}
.custom-info-window .info-button:hover { opacity: 1; }

/* Posición del botón de cerrar ('X') */
.custom-info-window .close-btn {
    position: absolute; top: 18px; right: 18px;
}



/* --- ESTILOS PARA EL NUEVO MARCADOR DE CASA (SVG) --- */

/* Contenedor del marcador */
.custom-marker-container {
    position: absolute;
    transform: translate(-50%, -100%); /* Centra el marcador justo encima del punto */
    z-index: 100;
    /* Los estilos de la casa ahora están directamente en el SVG */
}

/* El efecto de ondas (sin cambios) */
.pulsating-ring {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%); width: 40px; height: 40px;
    background-color: rgba(22, 163, 74, 0.5); border-radius: 50%;
    animation: pulsate 2s ease-out infinite; z-index: 1;
}
.pulsating-ring.delay { animation-delay: 1s; }
@keyframes pulsate {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
    100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}

/* --- FIN: Estilos para Marcador Activo y Cronómetro --- */

/* --- INICIO: Estilos para Personalización de Lista --- */
#field-order-list .field-order-item.dragging {
    opacity: 0.5;
    background-color: #3b82f6;
    color: white;
}
/* --- FIN: Estilos para Personalización de Lista --- */



/* --- INICIO: Estilos para Personalización de Lista (NUEVA VERSIÓN) --- */
.client-card.density-compact {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.client-card.density-comfortable {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
/* --- FIN: Estilos para Personalización de Lista --- */

/* --- INICIO: Estilos para Personalización de Lista (NUEVA VERSIÓN) --- */
.field-pill {
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-weight: 500;
    cursor: grab;
    transition: all 0.2s ease-in-out;
    border: 1px solid;
}
.field-pill.visible {
    background-color: #dcfce7; /* Verde claro */
    color: #166534; /* Verde oscuro */
    border-color: #86efac; /* Borde verde */
}
.dark .field-pill.visible {
    background-color: #166534;
    color: #dcfce7;
    border-color: #22c55e;
}
.field-pill.hidden-field {
    background-color: #f3f4f6; /* Gris claro */
    color: #4b5563; /* Gris oscuro */
    border-color: #d1d5db;
}
.dark .field-pill.hidden-field {
    background-color: #374151;
    color: #d1d5db;
    border-color: #4b5563;
}
.field-pill.dragging {
    opacity: 0.5;
    transform: scale(1.05);
    background-color: #3b82f6;
    color: white;
}
/* --- ESTILOS DE DENSIDAD CORREGIDOS --- */
.client-card.density-compact,
#client-list-preview-card.density-compact {
    padding: 0.5rem 1rem; /* py-2 px-4 */
}
.client-card.density-comfortable,
#client-list-preview-card.density-comfortable {
    padding: 1rem 1.5rem; /* py-4 px-6 */
}
.density-btn.active {
    background-color: #10B981;
    color: white;
}
/* --- FIN: Estilos para Personalización de Lista --- */

/* --- INICIO: Pull to Refresh --- */
#pullRefreshIndicator {
  position: fixed;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  background: #1D6A3A;
  color: white;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: top 0.2s ease;
  z-index: 9999;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
#pullRefreshIndicator.visible { top: 16px; }
#pullRefreshIndicator img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  transition: transform 0.2s ease;
}
#pullRefreshIndicator.ready img { transform: rotate(180deg); }
#pullRefreshIndicator::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  opacity: 0;
}
#pullRefreshIndicator.refreshing::after {
  opacity: 1;
  animation: ptr-spin 0.8s linear infinite;
}
@keyframes ptr-spin { to { transform: rotate(360deg); } }
/* --- FIN: Pull to Refresh --- */
/* ══════════════════════════════════════════════════════════════════════════
   v143 — REDISEÑO DE LA PANTALLA DE INICIO
   Solo estilo y animación. Ningún identificador cambió: la lógica de trabajos,
   GPS, geocerca, Firestore, llegada, salida y cronómetro (v139–v142) opera sobre
   los mismos nodos. Funciona en tema claro y oscuro: los tokens de abajo se
   redefinen bajo `.dark`, ningún color queda definido solo en una de las dos.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
    --v143-sheet:        #ffffff;
    --v143-sheet-2:      #f8fafc;
    --v143-ink:          #0f172a;
    --v143-ink-soft:     #64748b;
    --v143-line:         rgba(15, 23, 42, 0.10);
    --v143-accent:       #16a34a;
    --v143-accent-soft:  rgba(22, 163, 74, 0.12);
    --v143-card:         rgba(255, 255, 255, 0.94);
    --v143-card-line:    rgba(22, 163, 74, 0.55);
    --v143-avatar:       #e2e8f0;
    --v143-avatar-ink:   #0f172a;
    --v143-track:        #e2e8f0;
    --v143-nav-h:        64px;   /* alto de #bottom-nav (h-16) */
}
.dark {
    --v143-sheet:        #111827;
    --v143-sheet-2:      #0b1220;
    --v143-ink:          #f1f5f9;
    --v143-ink-soft:     #94a3b8;
    --v143-line:         rgba(255, 255, 255, 0.08);
    --v143-accent:       #22c55e;
    --v143-accent-soft:  rgba(34, 197, 94, 0.16);
    --v143-card:         rgba(13, 25, 20, 0.88);
    --v143-card-line:    rgba(34, 197, 94, 0.75);
    --v143-avatar:       #f1f5f9;
    --v143-avatar-ink:   #0f172a;
    --v143-track:        rgba(255, 255, 255, 0.10);
}

/* ── Encabezado: indicador de conexión ───────────────────────────────────── */
.conn-status {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.35rem 0.8rem 0.35rem 0.6rem;
    border-radius: 9999px;
    background: var(--v143-accent-soft);
    border: 1px solid var(--v143-line);
    font-size: 0.8125rem; font-weight: 600; color: var(--v143-ink);
    white-space: nowrap; flex-shrink: 0;
}
.conn-dot {
    width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
    background: var(--v143-accent);
    box-shadow: 0 0 0 3px var(--v143-accent-soft);
    transition: background-color .3s ease, box-shadow .3s ease;
}
.conn-status.is-syncing .conn-dot { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .18); }
.conn-status.is-offline .conn-dot { background: #94a3b8; box-shadow: 0 0 0 3px rgba(148, 163, 184, .18); }
.conn-status.is-syncing { background: rgba(245, 158, 11, .12); }
.conn-status.is-offline { background: rgba(148, 163, 184, .14); }
.conn-text { line-height: 1; }
@media (max-width: 360px) { .conn-text { display: none; } .conn-status { padding: 0.4rem; } }

/* ── Controles del mapa: círculos oscuros translúcidos ───────────────────── */
.map-control-button {
    width: 44px !important; height: 44px !important;
    border-radius: 9999px !important;
    background: var(--v143-card) !important;
    border: 1px solid var(--v143-line) !important;
    color: var(--v143-ink) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .22) !important;
    backdrop-filter: blur(8px);
    display: flex !important; align-items: center; justify-content: center;
}

/* ── Tarjeta flotante del trabajo en curso ───────────────────────────────── */
.active-job-card {
    position: absolute; top: 14px; left: 12px;
    max-width: min(78%, 420px);
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.6rem 0.55rem 0.6rem 0.6rem;
    border-radius: 18px;
    background: var(--v143-card);
    border: 1.5px solid var(--v143-card-line);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
    backdrop-filter: blur(10px);
    color: var(--v143-ink);
    z-index: 15;
    cursor: pointer;
    opacity: 1; transform: translateY(0);
    transition: opacity .28s ease, transform .28s ease;
}
.active-job-card.hidden { display: none; }
.active-job-card.is-entering { opacity: 0; transform: translateY(-10px); }
.ajc-avatar {
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--v143-accent-soft); color: var(--v143-accent);
    font-weight: 700; font-size: 1.1rem; line-height: 1;
}
.ajc-body { min-width: 0; flex: 1; }
/* v191 · Estado del trabajo activo, arriba del nombre. */
.ajc-status {
    font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--v143-accent, #16a34a); line-height: 1.2; margin-bottom: 1px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ajc-name { font-weight: 700; font-size: 1.05rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* v191 · La direccion va COMPLETA, asi que se deja envolver en dos lineas en
 * vez de cortarla con puntos suspensivos: a 360 px una calle con ciudad y zip
 * no entra en una sola linea, y cortarla deja justo lo que hace falta afuera. */
.ajc-address {
    font-size: 0.78rem; color: var(--v143-ink-soft); line-height: 1.25;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden; overflow-wrap: anywhere;
}
.ajc-timer-row {
    display: flex; align-items: center; gap: 0.35rem;
    margin-top: 0.3rem; padding-top: 0.3rem;
    border-top: 1px solid var(--v143-line);
    color: var(--v143-accent);
}
.ajc-timer-icon { width: 18px; height: 18px; flex-shrink: 0; }
.ajc-timer { font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.ajc-chevron { width: 20px; height: 20px; flex-shrink: 0; color: var(--v143-ink-soft); }

/* ── Bottom sheet ────────────────────────────────────────────────────────── */
.bottom-panel-sheet {
    background: var(--v143-sheet);
    border-top-left-radius: 22px; border-top-right-radius: 22px;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .22);
    color: var(--v143-ink);
}
#panel-header { padding: 0.55rem 0 0.35rem; }
.panel-grip {
    display: inline-block; width: 46px; height: 5px; border-radius: 9999px;
    background: var(--v143-ink-soft); opacity: .45;
}
/* El bloque compacto nunca se esconde bajo la barra inferior fija (h-16). */
.panel-compact {
    flex-shrink: 0;
    padding: 0 1rem 0.75rem;
    /* El espacio para la barra inferior fija NO va acá: va en la altura del panel
       (panelSnapHeights). Si fuera relleno, al expandir dejaría un hueco entre el
       slider y la lista. */
}
/* Con el panel expandido, el compacto sigue arriba y la lista scrollea debajo. */
#panel-content-wrapper { padding-bottom: calc(var(--v143-nav-h) + 1rem); }

/* ── Bloque del trabajo en curso (dentro del sheet) ──────────────────────── */
/* Colapsa cuando no está visible: `transform` no libera espacio, `grid-template-rows` sí. */
#geofence-arrival-overlay {
    display: grid; grid-template-rows: 0fr;
    /* El ALTO no se anima acá a propósito: showGeofenceOverlay mide el bloque justo después
       de mostrarlo (applyPanelHeight) y una transición de grid-template-rows le daba un alto
       intermedio, dejando el slider por debajo de la barra inferior. El movimiento lo pone la
       transición de altura del propio #bottom-panel. */
    transition: opacity .28s ease;
    opacity: 0;
}
#geofence-arrival-overlay > .gf-card { overflow: hidden; min-height: 0; }
#geofence-arrival-overlay.visible { grid-template-rows: 1fr; opacity: 1; pointer-events: auto; }
.gf-card { display: flex; flex-direction: column; gap: 0.85rem; }
.gf-row { display: flex; align-items: center; gap: 0.85rem; padding-top: 0.35rem; }
.gf-avatar {
    width: 60px; height: 60px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--v143-avatar); color: var(--v143-avatar-ink);
    font-weight: 700; font-size: 1.5rem; line-height: 1;
}
.gf-info { min-width: 0; flex: 1; }
.gf-status {
    font-size: 0.72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--v143-accent); margin-bottom: 0.1rem;
}
.gf-name { font-size: 1.3rem; font-weight: 700; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gf-address { font-size: 0.9rem; color: var(--v143-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gf-type { display: flex; align-items: center; gap: 0.35rem; font-size: 0.9rem; color: var(--v143-ink-soft); margin-top: 0.15rem; }
.gf-type-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--v143-accent); }

/* ── Slider ──────────────────────────────────────────────────────────────── */
.swipe-container {
    position: relative; width: 100%; height: 68px;
    border-radius: 9999px; overflow: hidden;
    background: var(--v143-track);
    border: 1px solid var(--v143-line);
    display: flex; align-items: center;
    padding: 4px;
}
.swipe-fill {
    position: absolute; left: 0; top: 0; bottom: 0; width: 0;
    border-radius: 9999px; pointer-events: none;
    background: var(--v143-accent-soft);
    transition: width .18s ease, background-color .3s ease;
}
.swipe-container.sw-departure .swipe-fill { background: rgba(239, 68, 68, .28); }
.swipe-container.sw-dragging .swipe-fill { transition: none; }
/* El texto NO se posiciona en absoluto: es un elemento flexible que ocupa lo que queda al
   lado del botón. Con posición absoluta su caja terminaba más allá del contenedor y el
   overflow:hidden de este la recortaba — el texto entraba en su caja, así que ningún
   chequeo de desborde lo veía; solo se veía en la captura. El botón se desplaza con
   transform, que no afecta al layout, de modo que el texto se queda en su sitio. */
.swipe-text {
    order: 2; flex: 1 1 auto; min-width: 0;
    text-align: center; padding: 0 0.6rem 0 0.9rem;   /* aire respecto al botón */
    font-weight: 700; color: var(--v143-ink);
    /* Escala con el ancho: en español es ~25 % más largo que en inglés. */
    font-size: clamp(0.8rem, 3.4vw, 1.02rem);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    pointer-events: none; transition: opacity .15s linear;
}
.swipe-handle {
    order: 1;   /* el botón primero; el texto ocupa el resto */
    position: relative; z-index: 2;
    width: 60px; height: 60px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
    cursor: pointer; flex-shrink: 0;
    touch-action: none;
}
.swipe-container.is-done .swipe-fill { width: 100% !important; }
.swipe-container.is-done .swipe-text { opacity: 0 !important; }

/* ── Próximo trabajo ─────────────────────────────────────────────────────── */
.next-job-row { border-top: 1px solid var(--v143-line); margin-top: 0.9rem; padding-top: 0.7rem; }
.next-job-row.hidden { display: none; }
.njr-label { font-size: 0.78rem; color: var(--v143-ink-soft); margin-bottom: 0.4rem; }
.njr-body { display: flex; align-items: center; gap: 0.75rem; width: 100%; text-align: left; }
.njr-avatar {
    width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--v143-track); color: var(--v143-ink-soft);
    font-weight: 700; font-size: 1rem;
}
.njr-name { flex: 1; min-width: 0; font-weight: 700; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.njr-price { font-weight: 700; font-size: 1rem; flex-shrink: 0; }
.njr-chevron { width: 20px; height: 20px; flex-shrink: 0; color: var(--v143-ink-soft); }
.njr-empty { font-size: 0.95rem; color: var(--v143-ink-soft); padding: 0.35rem 0 0.15rem; }

/* Pantallas angostas (320 px): la tarjeta flotante y el bloque del panel se aprietan un
   punto para que entren más caracteres antes del recorte con «…». */
@media (max-width: 360px) {
    .active-job-card { max-width: 84%; left: 10px; top: 10px; padding: 0.5rem; gap: 0.5rem; }
    .ajc-avatar { width: 38px; height: 38px; font-size: 1rem; }
    .ajc-name { font-size: 0.98rem; }
    .ajc-address { font-size: 0.72rem; }
    .ajc-timer { font-size: 1.05rem; }
    .gf-avatar { width: 52px; height: 52px; font-size: 1.3rem; }
    .gf-name { font-size: 1.15rem; }
    .gf-address, .gf-type { font-size: 0.84rem; }
    .swipe-container { height: 62px; }
    .swipe-handle { width: 54px; height: 54px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   v145 — REDISEÑO DE LA FICHA DEL CLIENTE
   Solo presentación. Ni un identificador cambió: los onclick de
   openClientDetailDrawer, las delegaciones en document del portal (v138) y la
   captura única de UI.clientDetailDrawer operan sobre los mismos nodos.
   Los tokens se definen en :root y se redefinen bajo .dark — ningún color queda
   definido en un solo tema, que es la regla que dejó v143.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
    --v145-bg:          #f8fafc;   /* fondo del panel */
    --v145-card:        #ffffff;   /* tarjetas */
    --v145-card-2:      #f1f5f9;   /* tarjetas secundarias / chips */
    --v145-line:        rgba(15, 23, 42, 0.10);
    --v145-line-soft:   rgba(15, 23, 42, 0.06);
    --v145-ink:         #0f172a;
    --v145-ink-soft:    #64748b;
    --v145-accent:      #16a34a;   /* verde LawnTrail */
    --v145-accent-ink:  #ffffff;
    --v145-accent-soft: rgba(22, 163, 74, 0.12);
    --v145-danger:      #dc2626;
    --v145-danger-soft: rgba(220, 38, 38, 0.08);
    --v145-danger-line: rgba(220, 38, 38, 0.28);
    --v145-info:        #2563eb;
    --v145-amber:       #d97706;
    --v145-violet:      #7c3aed;
    --v145-avatar-ink:  #ffffff;
    --v145-radius:      18px;
    --v145-radius-sm:   14px;
}
.dark {
    --v145-bg:          #0b1220;
    --v145-card:        #131c2e;
    --v145-card-2:      #1a2437;
    --v145-line:        rgba(255, 255, 255, 0.09);
    --v145-line-soft:   rgba(255, 255, 255, 0.05);
    --v145-ink:         #f1f5f9;
    --v145-ink-soft:    #94a3b8;
    --v145-accent:      #22c55e;
    --v145-accent-ink:  #04150b;
    --v145-accent-soft: rgba(34, 197, 94, 0.16);
    --v145-danger:      #f87171;
    --v145-danger-soft: rgba(248, 113, 113, 0.10);
    --v145-danger-line: rgba(248, 113, 113, 0.30);
    --v145-info:        #60a5fa;
    --v145-amber:       #fbbf24;
    --v145-violet:      #a78bfa;
    --v145-avatar-ink:  #04150b;
}

/* ── Cabecera ────────────────────────────────────────────────────────────── */
/* v147: la cabecera ancla al menú flotante. No lleva overflow, así que el menú puede
   desbordarla y quedar por encima del cuerpo — que sí recorta, y ahí quedaría cortado. */
.cd-header { position: relative; }
.cd-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.cd-iconbtn {
    width: 44px; height: 44px; border-radius: 9999px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--v145-ink); background: transparent;
    transition: background-color .18s ease, transform .12s ease;
}
.cd-iconbtn:hover { background: var(--v145-card-2); }
.cd-iconbtn:active { transform: scale(0.94); }

.cd-identity { display: flex; align-items: flex-start; gap: 0.875rem; }
.cd-avatar {
    width: 58px; height: 58px; border-radius: 9999px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--v145-accent); color: var(--v145-avatar-ink);
    font-size: 1.25rem; font-weight: 800; letter-spacing: 0.02em;
    box-shadow: 0 0 0 4px var(--v145-accent-soft);
}
.cd-identity-text { min-width: 0; flex: 1 1 auto; padding-top: 0.1rem; }
.cd-name {
    font-size: 1.5rem; line-height: 1.15; font-weight: 800; color: var(--v145-ink);
    /* El nombre largo envuelve; nunca se recorta ni empuja al avatar. */
    overflow-wrap: anywhere;
}
.cd-address {
    margin-top: 0.15rem;
    font-size: 0.9375rem; line-height: 1.3; color: var(--v145-ink-soft);
    /* SIN tope de líneas. Una dirección normal ocupa una o dos, que es lo que pide el
       diseño, pero el requisito duro es que NO se corte: una de 105 caracteres a 320 px
       necesita cuatro, y con line-clamp terminaba en puntos suspensivos. Se prefiere un
       renglón de más antes que esconderle al jardinero parte de la dirección. */
    overflow-wrap: anywhere;
}

/* ── Chips ───────────────────────────────────────────────────────────────── */
/* v146: el grupo se compacta. Menos hueco entre chips, entre filas y contra la dirección. */
.cd-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
.cd-chip {
    display: inline-flex; align-items: center; gap: 0.3rem;
    /* v146: 40 px en vez de 44. Sigue siendo un área táctil cómoda —el del teléfono es un
       enlace tel: de verdad— y los demás lo acompañan para que la fila no quede despareja.
       Por debajo de 40 el chip empieza a costar acertarle con el pulgar. */
    min-height: 40px;
    padding: 0.2rem 0.6rem; border-radius: 9999px;
    background: var(--v145-card-2); border: 1px solid var(--v145-line-soft);
    color: var(--v145-ink); font-size: 0.76rem; font-weight: 600; line-height: 1.15;
    max-width: 100%; min-width: 0;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.cd-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-chip svg { flex-shrink: 0; width: 13px; height: 13px; }
/* El teléfono es un enlace tel: de verdad; antes era un <span> muerto. */
.cd-chip-tap { cursor: pointer; text-decoration: none; }
.cd-chip-tap:active { transform: scale(0.97); }
.cd-chip-green { background: var(--v145-accent-soft); color: var(--v145-accent); border-color: transparent; }
.cd-chip-blue  { background: rgba(37, 99, 235, 0.12); color: var(--v145-info); border-color: transparent; }
.dark .cd-chip-blue { background: rgba(96, 165, 250, 0.14); }
/* Estados del portal: rojo SOLO para bloqueado. */
.cd-chip-portal-ok      { background: var(--v145-accent-soft); color: var(--v145-accent); border-color: transparent; }
.cd-chip-portal-blocked { background: var(--v145-danger-soft); color: var(--v145-danger); border-color: var(--v145-danger-line); }
.cd-chip-portal-nophone { background: var(--v145-card-2); color: var(--v145-ink-soft); border-color: var(--v145-line-soft); }
.cd-chip-portal-invalid { background: rgba(217, 119, 6, 0.12); color: var(--v145-amber); border-color: transparent; }

/* ── Acción principal ────────────────────────────────────────────────────── */
.cd-primary {
    width: 100%; min-height: 56px;
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0.9rem 1rem; border-radius: var(--v145-radius);
    background: var(--v145-accent); color: var(--v145-accent-ink);
    font-weight: 700; font-size: 1.0625rem;
    box-shadow: 0 6px 18px -8px var(--v145-accent);
    transition: transform .12s ease, filter .18s ease;
}
.cd-primary:hover { filter: brightness(1.05); }
.cd-primary:active { transform: scale(0.985); }
.cd-primary-main { display: inline-flex; align-items: center; gap: 0.6rem; min-width: 0; }
.cd-primary-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-primary-chevron { opacity: .85; flex-shrink: 0; }

/* ── Tarjeta financiera ──────────────────────────────────────────────────── */
.cd-finance {
    margin-top: 1rem; padding: 1rem;
    border-radius: var(--v145-radius);
    background: var(--v145-card); border: 1px solid var(--v145-line);
    box-shadow: 0 2px 10px -6px rgba(0,0,0,.25);
}
.cd-finance-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.cd-finance-texts { min-width: 0; }
.cd-finance-title { font-size: 1.0625rem; font-weight: 700; color: var(--v145-ink); line-height: 1.2; }
.cd-finance-sub   { font-size: 0.8125rem; color: var(--v145-ink-soft); margin-top: 0.1rem; }
.cd-finance-amount {
    margin-top: 0.35rem; font-size: 2rem; font-weight: 800; line-height: 1.1;
    color: var(--v145-danger); overflow-wrap: anywhere;
    transition: color .25s ease;
}
/* Sin deuda: verde, no rojo. */
.cd-finance.is-clear .cd-finance-amount { color: var(--v145-accent); font-size: 1.5rem; }
.cd-finance-icon {
    width: 46px; height: 46px; border-radius: 9999px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--v145-danger-soft); color: var(--v145-danger);
    transition: background-color .25s ease, color .25s ease;
}
.cd-finance.is-clear .cd-finance-icon { background: var(--v145-accent-soft); color: var(--v145-accent); }
.cd-finance-actions { display: flex; gap: 0.625rem; margin-top: 0.875rem; }
.cd-btn {
    flex: 1 1 0; min-width: 0; min-height: 48px;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
    padding: 0.7rem 0.6rem; border-radius: var(--v145-radius-sm);
    font-weight: 700; font-size: 0.9375rem;
    transition: transform .12s ease, background-color .18s ease, filter .18s ease;
}
.cd-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-btn svg { flex-shrink: 0; }
.cd-btn:active { transform: scale(0.97); }
.cd-btn-solid   { background: var(--v145-accent); color: var(--v145-accent-ink); }
.cd-btn-solid:hover { filter: brightness(1.05); }
.cd-btn-outline { background: transparent; color: var(--v145-ink); border: 1px solid var(--v145-line); }
.cd-btn-outline:hover { background: var(--v145-card-2); }

/* ── Acciones rápidas ────────────────────────────────────────────────────── */
.cd-section-title {
    margin: 1.25rem 0 0.625rem;
    font-size: 1.0625rem; font-weight: 700; color: var(--v145-ink);
}
.cd-section-title-flush { margin: 0; }
/* minmax(0, 1fr), no 1fr: un track 1fr tiene mínimo automático y no baja del ancho de su
   contenido, así que en español "Compartir Portal" empujaba la columna 46 px fuera del
   panel a 375 px. Con minmax(0,…) la columna puede encogerse y el texto recorta dentro. */
.cd-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.625rem; }
.cd-action {
    min-height: 56px;   /* área táctil holgada, por encima del mínimo de 44 px */
    min-width: 0;       /* el item de la cuadrícula también tiene que poder encogerse */
    display: flex; align-items: center; justify-content: space-between; gap: 0.4rem;
    padding: 0.75rem 0.8rem; border-radius: var(--v145-radius-sm);
    background: var(--v145-card); border: 1px solid var(--v145-line);
    color: var(--v145-ink); font-weight: 600; font-size: 0.9375rem; text-align: left;
    transition: transform .12s ease, background-color .18s ease, border-color .18s ease;
}
.cd-action:hover { background: var(--v145-card-2); }
.cd-action:active { transform: scale(0.97); }
.cd-action-main { display: inline-flex; align-items: center; gap: 0.55rem; min-width: 0; }
.cd-action-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* En la cuadrícula de dos columnas el texto envuelve en vez de recortarse: en español
   "Compartir Portal" y "Permitir portal" no entran en una línea a 375 px, y "Permitir p…"
   no dice nada. Se pierde altura, no significado. */
.cd-grid .cd-action-main { align-items: flex-start; }
.cd-grid .cd-action-main span {
    white-space: normal; overflow-wrap: anywhere; line-height: 1.2;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.cd-grid .cd-action { align-items: center; padding-top: 0.65rem; padding-bottom: 0.65rem; }
.cd-grid .cd-action-main svg { margin-top: 0.05rem; }
.cd-action-main svg { flex-shrink: 0; }
.cd-action-chevron { color: var(--v145-ink-soft); flex-shrink: 0; }
.cd-i-violet { color: var(--v145-violet); }
.cd-i-green  { color: var(--v145-accent); }
.cd-i-red    { color: var(--v145-danger); }
.cd-i-amber  { color: var(--v145-amber); }
.cd-i-blue   { color: var(--v145-info); }

/* ── Historial ───────────────────────────────────────────────────────────── */
.cd-history-head {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    margin: 1.25rem 0 0.625rem;
}
.cd-filter {
    display: inline-flex; align-items: center; gap: 0.35rem;
    min-height: 44px; padding: 0.4rem 0.7rem; border-radius: 9999px;
    color: var(--v145-info); font-size: 0.875rem; font-weight: 600;
    transition: background-color .18s ease, transform .12s ease;
}
.cd-filter:hover { background: var(--v145-card-2); }
.cd-filter:active { transform: scale(0.96); }
.cd-fchips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem; }
.cd-fchip {
    min-height: 36px; padding: 0.35rem 0.8rem; border-radius: 9999px;
    background: var(--v145-card-2); border: 1px solid var(--v145-line-soft);
    color: var(--v145-ink-soft); font-size: 0.8125rem; font-weight: 600;
    transition: background-color .18s ease, color .18s ease;
}
.cd-fchip.is-active { background: var(--v145-accent-soft); color: var(--v145-accent); border-color: transparent; }
.cd-history { display: flex; flex-direction: column; gap: 0.5rem; }
.cd-entry {
    display: flex; align-items: center; gap: 0.55rem;
    padding: 0.65rem 0.6rem 0.65rem 0.7rem; border-radius: var(--v145-radius-sm);
    background: var(--v145-card); border: 1px solid var(--v145-line);
}
.cd-entry-icon {
    width: 34px; height: 34px; border-radius: 9999px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.cd-entry-job     { background: var(--v145-accent-soft); color: var(--v145-accent); }
.cd-entry-payment { background: var(--v145-card-2);      color: var(--v145-ink-soft); }
.cd-entry-adjust  { background: rgba(217, 119, 6, 0.12); color: var(--v145-amber); }
.cd-entry-texts { min-width: 0; flex: 1 1 auto; }
.cd-entry-title {
    font-weight: 700; font-size: 0.9375rem; color: var(--v145-ink);
    /* Hasta dos líneas: a 375 px "Edging, Area Cleanup" no entra en una sola junto al
       monto y al botón de editar, y recortar el nombre del servicio con puntos
       suspensivos es peor que ocupar un renglón más. */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; overflow-wrap: anywhere;
}
.cd-entry-date { font-size: 0.78rem; color: var(--v145-ink-soft); margin-top: 0.05rem; }
/* La línea del cambio de saldo entra completa a 375 px sin partirse en dos. */
.cd-entry-balance { font-size: 0.72rem; color: var(--v145-ink-soft); opacity: .85; margin-top: 0.05rem; white-space: nowrap; }
.cd-entry-right { display: flex; align-items: center; gap: 0.15rem; flex-shrink: 0; }
.cd-entry-amount { font-weight: 700; font-size: 0.9rem; white-space: nowrap; }
.cd-amount-charge  { color: var(--v145-danger); }
.cd-amount-payment { color: var(--v145-accent); }
.cd-amount-plain   { color: var(--v145-ink); }
.cd-entry-edit {
    /* 44x44: es el disparador de una edición que toca dinero, no un adorno. */
    width: 44px; height: 44px; border-radius: 9999px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--v145-info); transition: background-color .18s ease, transform .12s ease;
}
.cd-entry-edit:hover { background: var(--v145-card-2); }
.cd-entry-edit:active { transform: scale(0.9); }
.cd-empty { padding: 1.25rem 0.5rem; text-align: center; color: var(--v145-ink-soft); font-size: 0.9375rem; }

/* ── Animaciones ─────────────────────────────────────────────────────────────
   Solo transform y opacity. La clase .cd-animate la pone openClientDetailDrawer
   ÚNICAMENTE cuando el panel pasa de cerrado a abierto: un pago vuelve a llamar a
   esa función y ahí la clase se quita, así que registrar dinero no re-anima nada.
   Nada de esto bloquea toques: los elementos arrancan visibles y la animación solo
   los atraviesa; sin la clase se ven igual, en su estado final. */
@keyframes cd-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes cd-in-soft { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: none; } }
.cd-animate .cd-identity   { animation: cd-in .28s ease-out both; }
.cd-animate .cd-chips      { animation: cd-in .28s ease-out .04s both; }
.cd-animate .cd-primary    { animation: cd-in .26s ease-out .06s both; }
.cd-animate .cd-finance    { animation: cd-in-soft .3s ease-out .08s both; }
.cd-animate .cd-grid > *   { animation: cd-in .22s ease-out both; }
.cd-animate .cd-grid > *:nth-child(1) { animation-delay: .10s; }
.cd-animate .cd-grid > *:nth-child(2) { animation-delay: .14s; }
.cd-animate .cd-grid > *:nth-child(3) { animation-delay: .18s; }
.cd-animate .cd-grid > *:nth-child(4) { animation-delay: .22s; }
/* El historial entra como bloque, no una tarjeta por vez: con 200 entradas eso sería
   una animación por nodo y el scroll se sentiría pesado. */
.cd-animate .cd-history    { animation: cd-in-soft .3s ease-out .24s both; }
@media (prefers-reduced-motion: reduce) {
    .cd-animate .cd-identity, .cd-animate .cd-chips, .cd-animate .cd-primary,
    .cd-animate .cd-finance, .cd-animate .cd-grid > *, .cd-animate .cd-history {
        animation: none !important;
    }
    #client-detail-drawer { transition: none !important; }
    .cd-primary, .cd-btn, .cd-action, .cd-row, .cd-iconbtn, .cd-filter, .cd-entry-edit { transition: none !important; }
}

/* v146: hasta 400 px el relleno horizontal se recorta un poco más. No es cosmético:
   con ese ajuste el id y el teléfono entran en la MISMA fila a 320 px, y a 375/392 los
   cinco chips bajan de tres filas a dos. Cada fila que se ahorra son ~46 px de pantalla. */
@media (max-width: 400px) {
    .cd-chip { padding: 0.2rem 0.5rem; gap: 0.25rem; }
    .cd-chips { gap: 0.3rem; }
}

/* ── Pantallas angostas ──────────────────────────────────────────────────── */
@media (max-width: 360px) {
    .drawer-header { padding: 0.875rem 0.75rem 0.75rem; }
    .cd-grid { grid-template-columns: minmax(0, 1fr); }
    .drawer-body { padding: 0.75rem; }
    .cd-avatar { width: 50px; height: 50px; font-size: 1.05rem; }

    .cd-name { font-size: 1.3rem; }
    .cd-finance-amount { font-size: 1.75rem; }
    /* A 320 px "Realizar Pago" + "Añadir Saldo" no entran en una fila sin recortarse. */
    .cd-finance-actions { flex-direction: column; }
    .cd-grid { grid-template-columns: 1fr; }
}

/* ── v147: menú de tres puntos ───────────────────────────────────────────────
   Reemplaza a las dos filas grandes de Editar y Borrar. Los botones de adentro son
   LOS MISMOS nodos de siempre (mismo id, mismos handlers), solo cambiaron de lugar. */
.cd-menu {
    position: absolute;
    top: 4rem;                          /* justo DEBAJO del botón: 16 px de relleno + 44 de botón */
    right: 1rem;                        /* alineado con el botón de tres puntos */
    z-index: 30;                        /* por encima del cuerpo del drawer */
    min-width: 13rem;
    max-width: calc(100% - 2rem);       /* nunca se sale del panel, ni a 320 px */
    background: var(--v145-card);
    border: 1px solid var(--v145-line);
    border-radius: 14px;
    box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .5), 0 2px 6px -2px rgba(0, 0, 0, .3);
    overflow: hidden;
    transform-origin: top right;        /* nace de la esquina del botón */
    animation: cd-menu-in .16s ease-out both;
}
.dark .cd-menu { box-shadow: 0 16px 34px -12px rgba(0, 0, 0, .75), 0 2px 8px -2px rgba(0, 0, 0, .5); }
.cd-menu.is-closing { animation: cd-menu-out .12s ease-in both; pointer-events: none; }
.cd-menu-item {
    display: flex; align-items: center; gap: 0.6rem;
    width: 100%; min-height: 48px;      /* por encima del mínimo de 44 */
    padding: 0.7rem 0.9rem; text-align: left;
    background: transparent; color: var(--v145-ink);
    font-weight: 600; font-size: 0.9rem; line-height: 1.2;
    transition: background-color .15s ease;
}
.cd-menu-item span { overflow-wrap: anywhere; }   /* el texto envuelve, no se corta */
.cd-menu-item svg { flex-shrink: 0; }
.cd-menu-item:hover { background: var(--v145-card-2); }
.cd-menu-item:active { background: var(--v145-line); }
/* Separador fino entre las dos acciones. */
.cd-menu-item + .cd-menu-item { border-top: 1px solid var(--v145-line-soft); }
/* Borrar en rojo, pero solo el texto y el icono: el menú no se tiñe entero. */
.cd-menu-item-danger { color: var(--v145-danger); }
.cd-menu-item-danger svg { color: var(--v145-danger); }
.cd-menu-item-danger:hover { background: var(--v145-danger-soft); }

@keyframes cd-menu-in  { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes cd-menu-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.96); } }
@media (prefers-reduced-motion: reduce) {
    .cd-menu, .cd-menu.is-closing { animation: none !important; }
    .cd-menu-item { transition: none !important; }
}
/* --- FIN v145 --- */

/* v149 · verde muy suave del modo selección, con su versión oscura. Se define en los
   dos temas: ningún color queda declarado en uno solo. */
:root { --v149-sel-bg: #ecfdf3; }
/* OPACO a propósito, no un rgba: un fondo translúcido deja ver lo que haya debajo, que
   es exactamente el defecto que esta versión vino a arreglar. Este verde es el resultado
   de mezclar el acento al 10 % sobre el fondo oscuro, ya resuelto. */
.dark { --v149-sel-bg: #16241e; }

/* ══════════════════════════════════════════════════════════════════════════
   v148 — PANTALLA CLIENTES
   Reutiliza los tokens --v145-*, que ya están definidos para tema claro y oscuro.
   La lista sigue respetando clientListSettings: los campos, su orden, la densidad y
   el botón de agendar los decide el usuario en Ajustes → Lista de clientes.
   ══════════════════════════════════════════════════════════════════════════ */
.cl-header { padding: 0.75rem 0.875rem 0.625rem !important; }
.cl-title-row { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.5rem; }
.cl-count { font-size: 0.85rem; font-weight: 600; color: var(--v145-ink-soft); }

/* ── Buscador ────────────────────────────────────────────────────────────── */
.cl-search-row { display: flex; gap: 0.5rem; align-items: stretch; }
.cl-search { position: relative; flex: 1 1 auto; min-width: 0; }
.cl-search-icon {
    position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%);
    color: var(--v145-ink-soft); pointer-events: none;
}
.cl-search input {
    width: 100%; min-height: 44px;
    padding: 0.5rem 0.75rem 0.5rem 2.35rem;
    border-radius: 12px;
    background: var(--v145-card-2); color: var(--v145-ink);
    border: 1px solid var(--v145-line-soft);
    font-size: 0.9rem;
}
.cl-search input::placeholder { color: var(--v145-ink-soft); }
.cl-search input:focus { outline: none; border-color: var(--v145-accent); }
.cl-filter-btn {
    position: relative; width: 44px; height: 44px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px; background: var(--v145-card-2);
    border: 1px solid var(--v145-line-soft); color: var(--v145-ink);
    transition: background-color .18s ease, transform .12s ease;
}
.cl-filter-btn:active { transform: scale(0.95); }
.cl-filter-btn.is-active { background: var(--v145-accent-soft); color: var(--v145-accent); border-color: transparent; }
.cl-filter-dot {
    position: absolute; top: 6px; right: 6px; width: 8px; height: 8px;
    border-radius: 9999px; background: var(--v145-accent);
}

/* ── Segmentado ──────────────────────────────────────────────────────────── */
.cl-seg {
    display: flex; gap: 0.25rem; margin-top: 0.625rem;
    background: var(--v145-card-2); border-radius: 12px; padding: 0.2rem;
}
.cl-seg-btn {
    flex: 1 1 0; min-width: 0; min-height: 40px;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem;
    border-radius: 10px; padding: 0.3rem 0.4rem;
    font-size: 0.8125rem; font-weight: 700; color: var(--v145-ink-soft);
    transition: background-color .2s ease, color .2s ease;
}
.cl-seg-btn > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-seg-btn.is-active { background: var(--v145-card); color: var(--v145-ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.cl-seg-count {
    font-size: 0.72rem; font-weight: 700; padding: 0.05rem 0.35rem;
    border-radius: 9999px; background: var(--v145-line); color: inherit; flex-shrink: 0;
}
.cl-seg-btn.is-active .cl-seg-count { background: var(--v145-accent-soft); color: var(--v145-accent); }

/* ── Filtros avanzados ───────────────────────────────────────────────────── */
.cl-filters {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.625rem;
    padding: 0.75rem; border-radius: 12px;
    background: var(--v145-card-2); border: 1px solid var(--v145-line-soft);
}
.cl-field { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.cl-field > span { font-size: 0.72rem; font-weight: 700; color: var(--v145-ink-soft); text-transform: uppercase; letter-spacing: .02em; }
.cl-field select, .cl-field input {
    min-height: 40px; width: 100%; padding: 0.35rem 0.5rem; border-radius: 10px;
    background: var(--v145-card); color: var(--v145-ink);
    border: 1px solid var(--v145-line); font-size: 0.85rem;
}
.cl-check {
    grid-column: 1 / -1; display: flex; align-items: center; gap: 0.5rem;
    min-height: 40px; font-size: 0.85rem; color: var(--v145-ink); cursor: pointer;
}
.cl-check input { width: 20px; height: 20px; accent-color: var(--v145-accent); flex-shrink: 0; }
.cl-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
.cl-chip {
    display: inline-flex; align-items: center; gap: 0.3rem;
    min-height: 32px; padding: 0.2rem 0.6rem; border-radius: 9999px;
    background: var(--v145-accent-soft); color: var(--v145-accent);
    font-size: 0.75rem; font-weight: 700;
}
.cl-chip-clear { background: var(--v145-card-2); color: var(--v145-ink-soft); }

/* ── Lista ───────────────────────────────────────────────────────────────── */
/* Espacio para que la última fila se pueda desplazar por encima de la barra. La altura la
   MIDE el render (--cl-bulk-h); el 84px es solo el valor de arranque hasta la primera
   medición, y nunca se mide con la vista oculta (ahí todo daría 0). */
#clients-content .content-view-body {
    padding-bottom: calc(var(--v143-nav-h, 64px) + var(--cl-bulk-h, 84px) + 12px);
}
.cl-list { display: flex; flex-direction: column; gap: 0.4rem; }
.client-card {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.6rem 0.7rem; border-radius: 14px;
    background: var(--v145-card); border: 1px solid var(--v145-line);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, transform .12s ease;
}
.client-card:active { transform: scale(0.995); }
.client-card.density-compact  { padding: 0.45rem 0.6rem; }
.client-card.density-comfortable { padding: 0.75rem 0.8rem; }
/* La fecha ideal vencida se marca con el borde, no tiñendo la fila entera. */
.client-card.client-due-for-service { border-left: 3px solid var(--v145-amber); }
.cl-avatar {
    width: 38px; height: 38px; border-radius: 9999px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--v145-accent-soft); color: var(--v145-accent);
    font-size: 0.8125rem; font-weight: 800;
}
.client-card.density-compact .cl-avatar { width: 32px; height: 32px; font-size: 0.75rem; }
.cl-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.cl-name {
    font-weight: 700; font-size: 0.9375rem; color: var(--v145-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cl-line {
    font-size: 0.78rem; color: var(--v145-ink-soft);
    display: flex; align-items: center; gap: 0.3rem; min-width: 0;
}
.cl-line > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-line svg { width: 12px; height: 12px; flex-shrink: 0; }
.cl-line-phone {
    color: var(--v145-ink-soft); text-decoration: none;
    min-height: 34px; padding: 0.3rem 0.4rem; margin-left: -0.4rem; border-radius: 8px;
    align-self: flex-start;
}
.cl-line-phone:active { background: var(--v145-card-2); }
.cl-line-ideal { color: var(--v145-amber); font-weight: 600; }
.cl-line-next  { color: var(--v145-accent); font-weight: 600; }
.cl-line-last  { color: var(--v145-violet); }
.cl-actions { display: flex; align-items: center; gap: 0.15rem; flex-shrink: 0; }
.cl-icon-btn {
    width: 44px; height: 44px; border-radius: 9999px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--v145-ink-soft);
    transition: background-color .15s ease, transform .12s ease;
}
.cl-icon-btn:active { transform: scale(0.9); }
.cl-icon-btn:hover { background: var(--v145-card-2); }
.cl-schedule-btn { color: var(--v145-accent); }
.cl-badge {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.2rem 0.5rem; border-radius: 9999px;
    background: var(--v145-accent-soft); color: var(--v145-accent);
    font-size: 0.7rem; font-weight: 700; white-space: nowrap;
}
.cl-chevron { color: var(--v145-ink-soft); opacity: .7; flex-shrink: 0; }

/* ── Modo selección ──────────────────────────────────────────────────────── */
/* v149 · EL DEFECTO QUE ARREGLA ESTE BLOQUE.
   Antes esto era `position: sticky; top: 0` DENTRO del cuerpo que se desplaza, y con un
   fondo semitransparente (--v145-accent-soft es un rgba al 12 %). Las tarjetas pasaban por
   debajo al desplazarse y se veían A TRAVÉS del panel: eso es la superposición de la
   captura, no un problema de márgenes. Ahora el panel vive en la CABECERA, en flujo normal
   y con fondo opaco, así que no hay forma de que algo pase por debajo. */
.cl-selbar {
    display: flex; flex-direction: column; gap: 0.35rem;
    margin-top: 0.625rem; padding: 0.6rem 0.7rem; border-radius: 12px;
    background: var(--v149-sel-bg); border: 1px solid var(--v145-accent-soft);
}
.cl-selbar-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-width: 0; }
.cl-selbar-texts { min-width: 0; }
.cl-selbar-title { font-weight: 700; font-size: 0.9rem; color: var(--v145-ink); }
.cl-selbar-count { font-size: 0.78rem; color: var(--v145-ink-soft); }
.cl-selbar-actions { justify-content: flex-start; gap: 0.15rem; flex-wrap: wrap; }
.cl-linkbtn {
    min-height: 40px; padding: 0.3rem 0.55rem; border-radius: 9px;
    font-size: 0.78rem; font-weight: 700; color: var(--v145-info);
    transition: background-color .15s ease;
}
.cl-linkbtn:hover { background: var(--v145-card-2); }
.cl-linkbtn-strong { color: var(--v145-ink); }
/* El círculo va a la derecha y su zona táctil es de 44x44, aunque el círculo dibujado sea
   más chico: el relleno es parte del objetivo, no hace falta un círculo enorme. */
.cl-checkbox {
    width: 44px; height: 44px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    color: transparent;
}
.cl-checkbox::before {
    content: ''; position: absolute; width: 26px; height: 26px; border-radius: 9999px;
    border: 2px solid var(--v145-line); background: transparent;
    transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}
.cl-checkbox { position: relative; }
.cl-checkbox svg { position: relative; z-index: 1; transition: color .16s ease, transform .16s ease; }
.client-card.is-selected .cl-checkbox::before { background: var(--v145-accent); border-color: var(--v145-accent); }
.client-card.is-selected .cl-checkbox { color: var(--v145-accent-ink); }
.client-card.is-selected .cl-checkbox svg { transform: scale(1.08); }
/* Fondo verde MUY suave y borde fino: la tarjeta se distingue sin volverse un bloque verde. */
.client-card.is-selected { border-color: var(--v145-accent); background: var(--v149-sel-bg); }
/* Un cliente ya agendado no se puede elegir: se atenúa en vez de desaparecer, para que
   se entienda POR QUÉ no se puede. */
.client-card.is-locked { opacity: .5; }
.cl-selecting .client-card { cursor: default; }

/* ── Barra de "Agendar varios" ───────────────────────────────────────────── */
.cl-bulkbar {
    position: absolute; left: 0; right: 0;
    /* Por encima de la navegación, no detrás: #main-content-area llega hasta el borde y
       #bottom-nav es fija encima. --v143-nav-h ya vale el alto real de la nav. */
    bottom: calc(var(--v143-nav-h, 64px) + env(safe-area-inset-bottom, 0px));
    padding: 0.6rem 0.875rem;
    /* v149: fondo OPACO con borde. Antes era un degradado a transparente y la última
       tarjeta se veía a través de la barra. El relleno inferior de la lista lo calcula el
       render midiendo esta barra de verdad, no con un número inventado. */
    background: var(--v145-bg);
    border-top: 1px solid var(--v145-line-soft);
    z-index: 6;
}
.cl-bulk-btn {
    pointer-events: auto;
    width: 100%; min-height: 52px;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    border-radius: 14px; background: var(--v145-accent); color: var(--v145-accent-ink);
    font-weight: 700; font-size: 0.95rem;
    box-shadow: 0 8px 20px -10px var(--v145-accent);
    transition: transform .12s ease, filter .18s ease, opacity .18s ease;
}
.cl-bulk-btn:active { transform: scale(0.985); }
.cl-bulk-btn:disabled { opacity: .55; }
.cl-bulk-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Hoja de agendamiento grupal ─────────────────────────────────────────── */
.bulk-sheet {
    width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto;
    background: var(--v145-bg); color: var(--v145-ink);
    border-radius: 20px 20px 0 0; padding: 0.5rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column; gap: 0.75rem;
    transform: translateY(12px); transition: transform .28s ease;
}
.modal:not(.pointer-events-none) .bulk-sheet { transform: translateY(0); }
.bulk-grip { width: 40px; height: 4px; border-radius: 9999px; background: var(--v145-line); margin: 0.35rem auto 0; flex-shrink: 0; }
.bulk-title { font-size: 1.1rem; font-weight: 800; }
.bulk-sub { font-size: 0.82rem; color: var(--v145-ink-soft); }
.bulk-modes { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0.5rem; }
.bulk-mode {
    min-height: 56px; display: flex; align-items: center; justify-content: center; gap: 0.45rem;
    padding: 0.6rem; border-radius: 14px; min-width: 0;
    background: var(--v145-card); border: 1px solid var(--v145-line);
    color: var(--v145-ink); font-weight: 700; font-size: 0.85rem;
    transition: background-color .16s ease, border-color .16s ease;
}
.bulk-mode span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bulk-mode svg { flex-shrink: 0; }
.bulk-mode.is-active { background: var(--v145-accent-soft); border-color: var(--v145-accent); color: var(--v145-accent); }
.bulk-fields { display: flex; flex-direction: column; gap: 0.5rem; }
.bulk-summary {
    border-radius: 14px; padding: 0.75rem;
    background: var(--v145-card); border: 1px solid var(--v145-line);
    font-size: 0.82rem; max-height: 34vh; overflow-y: auto;
}
.bulk-sum-title { font-weight: 700; color: var(--v145-ink); margin-bottom: 0.35rem; }
.bulk-sum-row { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.2rem 0; min-width: 0; }
.bulk-sum-row > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bulk-sum-row > span:last-child { flex-shrink: 0; font-weight: 600; }
.bulk-sum-ok span:last-child { color: var(--v145-accent); }
.bulk-sum-skip { color: var(--v145-ink-soft); }
.bulk-sum-skip span:last-child { color: var(--v145-amber); }
.bulk-sum-warn { color: var(--v145-amber); font-weight: 600; margin-top: 0.35rem; }
.bulk-actions { display: flex; gap: 0.5rem; }
/* v149 · Progreso mientras se guarda: el botón no solo se deshabilita, dice qué pasa. */
.bulk-progress { display: none; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: var(--v145-ink-soft); }
.bulk-sheet.is-saving .bulk-progress { display: flex; }
.bulk-spinner {
    width: 16px; height: 16px; border-radius: 9999px; flex-shrink: 0;
    border: 2px solid var(--v145-line); border-top-color: var(--v145-accent);
    animation: bulk-spin .7s linear infinite;
}
@keyframes bulk-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bulk-spinner { animation-duration: 2.4s; } }

/* ── Animaciones ─────────────────────────────────────────────────────────── */
@keyframes cl-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cl-animate .client-card { animation: cl-in .18s ease-out both; }
.cl-animate .client-card:nth-child(1) { animation-delay: .00s; }
.cl-animate .client-card:nth-child(2) { animation-delay: .02s; }
.cl-animate .client-card:nth-child(3) { animation-delay: .04s; }
.cl-animate .client-card:nth-child(4) { animation-delay: .06s; }
.cl-animate .client-card:nth-child(5) { animation-delay: .08s; }
/* De la sexta en adelante entran todas juntas: escalonar 100 filas se siente lento. */
.cl-animate .client-card:nth-child(n+6) { animation-delay: .10s; }
@media (prefers-reduced-motion: reduce) {
    .cl-animate .client-card { animation: none !important; }
    .cl-seg-btn, .cl-checkbox, .cl-bulk-btn, .cl-icon-btn, .bulk-sheet, .bulk-mode, .client-card { transition: none !important; }
}

@media (max-width: 360px) {
    .cl-filters { grid-template-columns: 1fr; }
    /* La flecha es decorativa: toda la fila abre la ficha igual. A 320 px esos ~20 px
       son la diferencia entre leer "Próximo: mar, 15 sep" completo o recortado. */
    .cl-chevron { display: none; }
    .cl-icon-btn { width: 40px; height: 40px; }
    .client-card { gap: 0.5rem; padding-left: 0.55rem; padding-right: 0.4rem; }
    .cl-avatar { width: 34px; height: 34px; font-size: 0.75rem; }
    /* "Próximo: mar, 15 sept" es ~20% más largo que "Next: Tue, Sep 15" y a 320 px se
       recortaba SOLO en español. Medio punto menos y entra entero en los dos idiomas. */
    .cl-line-next, .cl-line-ideal, .cl-line-last { font-size: 0.72rem; }
    .cl-seg-btn { font-size: 0.75rem; padding: 0.3rem 0.25rem; }
    .cl-name { font-size: 0.9rem; }
    .cl-bulkbar { padding-left: 0.6rem; padding-right: 0.6rem; }
}
/* En escritorio la lista no se estira a lo ancho de la pantalla. */
@media (min-width: 768px) {
    .cl-list, .cl-selbar { max-width: 720px; margin-left: auto; margin-right: auto; }
    .cl-bulk-btn { max-width: 720px; margin: 0 auto; }
}
/* --- FIN v148 --- */

/* ══════════════════════════════════════════════════════════════════════════
   v255 — AVISOS EN CÁPSULA COMPACTA (27 sep 2026; reemplaza a la tarjeta de v150)
   Una cápsula chica, centrada bajo el encabezado, ancho según el texto, 44 px de alto
   para un mensaje corto. Fondo suave + borde fino + sombra ligera; el estado se lee por
   el ICONO y el color a la vez. Sin barra de tiempo ni iconos que giren.
   Tokens por variante en los DOS temas: --lt-toast-bg / -bd / -ico / -ink.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
    --lt-toast-shadow: 0 6px 18px -8px rgba(15, 32, 56, .28), 0 1px 3px rgba(15, 32, 56, .08);
    --lt-toast-ink-soft: #52606d;
    --lt-toast-success-bg: #eef6ef; --lt-toast-success-bd: #b9d8bf; --lt-toast-success-ico: #2f7d46; --lt-toast-success-ink: #1d3b27;
    --lt-toast-info-bg:    #eef4fb; --lt-toast-info-bd:    #c3d5ef; --lt-toast-info-ico:    #2f6fb0; --lt-toast-info-ink:    #172a45;
    --lt-toast-warning-bg: #fdf5e6; --lt-toast-warning-bd: #ebd09a; --lt-toast-warning-ico: #a0600a; --lt-toast-warning-ink: #3f2a07;
    --lt-toast-error-bg:   #fdeeee; --lt-toast-error-bd:   #efc0c0; --lt-toast-error-ico:   #c0392b; --lt-toast-error-ink:   #4a1414;
    --lt-toast-neutral-bg: #f2f4f7; --lt-toast-neutral-bd: #d4dae2; --lt-toast-neutral-ico: #52606d; --lt-toast-neutral-ink: #1f2933;
}
.dark {
    --lt-toast-shadow: 0 8px 22px -10px rgba(0, 0, 0, .75), 0 1px 3px rgba(0, 0, 0, .4);
    --lt-toast-ink-soft: #a9b6c6;
    --lt-toast-success-bg: #16281d; --lt-toast-success-bd: #2e5a3b; --lt-toast-success-ico: #6fcf8e; --lt-toast-success-ink: #e3f3e7;
    --lt-toast-info-bg:    #15233a; --lt-toast-info-bd:    #2d4a74; --lt-toast-info-ico:    #7fb0f0; --lt-toast-info-ink:    #e3ecf9;
    --lt-toast-warning-bg: #2e2412; --lt-toast-warning-bd: #6b5221; --lt-toast-warning-ico: #f2b855; --lt-toast-warning-ink: #f8ecd5;
    --lt-toast-error-bg:   #33181a; --lt-toast-error-bd:   #72343a; --lt-toast-error-ico:   #ff8a8f; --lt-toast-error-ink:   #fbe3e4;
    --lt-toast-neutral-bg: #1c2430; --lt-toast-neutral-bd: #3a4656; --lt-toast-neutral-ico: #a9b6c6; --lt-toast-neutral-ink: #e6ebf1;
}

/* El anfitrión NO recibe toques: solo la cápsula. Nunca bloquea lo que queda debajo ni reserva espacio. */
.lt-toast-host {
    position: fixed;
    top: var(--lt-toast-top, calc(env(safe-area-inset-top, 0px) + 8px));
    left: 0; right: 0;
    display: flex; justify-content: center;
    padding: 0 max(12px, env(safe-area-inset-left, 0px)) 0 max(12px, env(safe-area-inset-right, 0px));
    z-index: 9999;                      /* por encima de los modales (1000) y de sus hojas */
    pointer-events: none;
}

.lt-toast {
    pointer-events: auto;
    display: inline-flex; align-items: center; gap: 8px;
    width: auto; max-width: min(560px, 100%);
    min-height: 44px;
    padding: 4px 4px 4px 14px;
    border-radius: 22px;               /* una línea = cápsula completa; dos líneas = píldora alta */
    background: var(--lt-toast-bg); color: var(--lt-toast-ink);
    border: 1px solid var(--lt-toast-bd);
    box-shadow: var(--lt-toast-shadow);
    --lt-toast-bg: var(--lt-toast-success-bg); --lt-toast-bd: var(--lt-toast-success-bd);
    --lt-toast-ico: var(--lt-toast-success-ico); --lt-toast-ink: var(--lt-toast-success-ink);
    opacity: 0; transform: translateY(-8px) scale(.98);
    transition: opacity .18s ease-out, transform .18s ease-out;
}
.lt-toast.is-in  { opacity: 1; transform: none; }
.lt-toast.is-out { opacity: 0; transform: translateY(-6px); transition-duration: .14s; }

.lt-toast[data-type="info"]    { --lt-toast-bg: var(--lt-toast-info-bg);    --lt-toast-bd: var(--lt-toast-info-bd);    --lt-toast-ico: var(--lt-toast-info-ico);    --lt-toast-ink: var(--lt-toast-info-ink); }
.lt-toast[data-type="warning"] { --lt-toast-bg: var(--lt-toast-warning-bg); --lt-toast-bd: var(--lt-toast-warning-bd); --lt-toast-ico: var(--lt-toast-warning-ico); --lt-toast-ink: var(--lt-toast-warning-ink); }
.lt-toast[data-type="error"]   { --lt-toast-bg: var(--lt-toast-error-bg);   --lt-toast-bd: var(--lt-toast-error-bd);   --lt-toast-ico: var(--lt-toast-error-ico);   --lt-toast-ink: var(--lt-toast-error-ink); }
.lt-toast[data-type="offline"],
.lt-toast[data-type="syncing"] { --lt-toast-bg: var(--lt-toast-neutral-bg); --lt-toast-bd: var(--lt-toast-neutral-bd); --lt-toast-ico: var(--lt-toast-neutral-ico); --lt-toast-ink: var(--lt-toast-neutral-ink); }

.lt-toast-icon { flex-shrink: 0; display: inline-flex; color: var(--lt-toast-ico); }
.lt-toast-icon svg { width: 20px; height: 20px; }

.lt-toast-texts { min-width: 0; padding: 5px 0; }
.lt-toast-title {
    margin: 0; font-weight: 600; font-size: .9375rem; line-height: 1.3; color: var(--lt-toast-ink);
    overflow-wrap: anywhere;
    /* Dos líneas como mucho: un texto largo nunca estira la cápsula fuera de la pantalla. */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lt-toast-msg {
    margin: 1px 0 0; font-size: .8125rem; line-height: 1.3; color: var(--lt-toast-ink-soft);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; overflow-wrap: anywhere;
}
.dark .lt-toast-msg { color: var(--lt-toast-ink-soft); }
.lt-toast-msg.hidden { display: none; }
.lt-toast.has-msg { border-radius: 18px; }

/* La acción ("Reintentar"): texto con subrayado discreto, 44 px de alto táctil. */
.lt-toast-action {
    flex-shrink: 0; min-height: 36px; padding: 0 10px; margin-left: 2px;
    border-radius: 9999px; font-weight: 700; font-size: .875rem; color: var(--lt-toast-ico);
    background: color-mix(in srgb, var(--lt-toast-ico) 12%, transparent);
    position: relative;
}
.lt-toast-action::after { content: ''; position: absolute; inset: -4px 0; }   /* 44 px de área táctil */
.lt-toast-action:hover { background: color-mix(in srgb, var(--lt-toast-ico) 20%, transparent); }
.lt-toast-action.hidden { display: none; }

/* La X: 32 px visibles, 44 px de área táctil. */
.lt-toast-close {
    position: relative; flex-shrink: 0; width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9999px; color: var(--lt-toast-ink-soft);
    transition: background-color .14s ease, color .14s ease;
}
.lt-toast-close::after { content: ''; position: absolute; inset: -6px; }
.lt-toast-close svg { width: 16px; height: 16px; }
.lt-toast-close:hover { background: color-mix(in srgb, var(--lt-toast-ink) 8%, transparent); color: var(--lt-toast-ink); }
.lt-toast :focus-visible { outline: 2px solid var(--lt-toast-ico); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    /* Sin desplazamientos: solo un cambio breve de opacidad. */
    .lt-toast, .lt-toast.is-in, .lt-toast.is-out { transform: none !important; transition: opacity .1s linear !important; }
}
@media (max-width: 360px) {
    .lt-toast { padding-left: 12px; gap: 6px; }
    .lt-toast-title { font-size: .875rem; }
}
/* Texto largo: la acción baja a su fila y el texto puede ocupar hasta 4 líneas (nunca se corta un error). */
.lt-toast.is-apilada { flex-wrap: wrap; align-items: flex-start; border-radius: 18px; padding: 6px 4px 6px 14px; row-gap: 2px; }
.lt-toast.is-apilada .lt-toast-icon { order: 1; margin-top: 7px; }
.lt-toast.is-apilada .lt-toast-texts { order: 2; flex: 1 1 0; }
.lt-toast.is-apilada .lt-toast-close { order: 3; margin-top: 2px; }
.lt-toast.is-apilada::after { content: ""; order: 4; flex-basis: 100%; height: 0; }   /* salto de fila */
.lt-toast.is-apilada .lt-toast-action { order: 5; margin: 0 6px 2px auto; }
.lt-toast.is-apilada .lt-toast-title { -webkit-line-clamp: unset; display: block; overflow: visible; }
/* --- FIN v255 (antes v150) --- */

/* ══════════════════════════════════════════════════════════════════════════
   v162 — INFORMACIÓN DEL NEGOCIO
   ══════════════════════════════════════════════════════════════════════════ */
.biz-logo-row { display: flex; gap: 0.8rem; align-items: flex-start; margin-bottom: 0.6rem; }
.biz-logo {
    width: 72px; height: 72px; border-radius: 14px; flex-shrink: 0;
    background: var(--v145-card-2) center/contain no-repeat;
    border: 1px solid var(--v145-line);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; font-weight: 800; color: var(--v145-ink-soft);
}
.biz-logo.is-empty { border-style: dashed; }
.biz-logo-actions { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; flex: 1 1 auto; }
/* La etiqueta hace de botón: el input de archivo va oculto pero accesible por teclado. */
.biz-logo-pick { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.biz-logo-pick:focus-within { outline: 2px solid var(--v145-accent); outline-offset: 2px; }

/* ══════════════════════════════════════════════════════════════════════════
   v158 — EQUIPO ALQUILADO Y CATÁLOGO DE PRECIOS
   ══════════════════════════════════════════════════════════════════════════ */
.jw-equip-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-top: 0.4rem; }
.jw-sub { font-size: 0.85rem; font-weight: 800; color: var(--v145-ink); }
.jw-sub-hint { font-size: 0.72rem; color: var(--v145-ink-soft); }
.jw-equipment { display: flex; flex-direction: column; gap: 0.4rem; }
.jw-equip {
    border-radius: 12px; padding: 0.4rem 0.6rem;
    background: var(--v145-card); border: 1px solid var(--v145-line);
}
/* Seleccionado se ve distinto: es lo que separa "sugerido" de "se cobra". */
.jw-equip.is-on { border-color: var(--v145-accent); background: var(--v145-accent-soft); }
.jw-equip-top { display: flex; align-items: center; gap: 0.5rem; min-height: 44px; width: 100%; }
.jw-equip-name { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jw-equip-total { font-weight: 800; font-size: 0.88rem; white-space: nowrap; }
.jw-equip-body { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.2rem 0 0.5rem; }
.jw-equip-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }
@media (min-width: 480px) { .jw-equip-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.jw-mini { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.jw-mini > span { font-size: 0.7rem; color: var(--v145-ink-soft); }

/* ══════════════════════════════════════════════════════════════════════════
   v164 — EL DETALLE EDITABLE (imagen 03)
   Descripción · cantidad · unidad · precio · importe · eliminar y reordenar.
   El MISMO componente para el presupuesto y la factura.
   ══════════════════════════════════════════════════════════════════════════ */
.li-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; }
.li-add-link {
    display: inline-flex; align-items: center; gap: 0.3rem; flex-shrink: 0;
    min-height: 44px; padding: 0 0.4rem;
    color: var(--v145-accent); font-size: 0.88rem; font-weight: 800;
}
.li-add-link:hover { text-decoration: underline; }

/* Los encabezados de columna solo caben en pantalla ancha; en móvil la fila se apila. */
.li-colhead { display: none; }
@media (min-width: 1000px) {
    .li-colhead {
        display: grid; grid-template-columns: minmax(0, 1fr) 78px 92px 96px 90px 84px;
        gap: 0.4rem; padding: 0.5rem 0.2rem 0.3rem;
        font-size: 0.66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
        color: var(--v145-ink-soft);
    }
}
.li-rows { display: flex; flex-direction: column; gap: 0.6rem; }

/* v171 · La configuración de cálculo de cada artículo del catálogo. */
.pc-calc { grid-column: 1 / -1; margin-top: 0.4rem; }
.pc-calc > summary { min-height: 40px; display: flex; align-items: center;
    font-size: 0.78rem; font-weight: 700; color: var(--v145-accent, #16a34a); cursor: pointer; }
.pc-calc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; margin-top: 0.3rem; }
.pc-cf { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.pc-cf > span { font-size: 0.68rem; font-weight: 700; color: var(--v145-ink-soft);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-cf-par { display: flex; gap: 0.3rem; min-width: 0; }
.pc-cf-par > select { flex: 1 1 0; min-width: 0; }
.pc-cf-check { margin-top: 0.4rem; }








/* ═══ v185 · MI EQUIPO ════════════════════════════════════════════════════ */
.eq-wrap { padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0));
    display: flex; flex-direction: column; gap: .75rem; }
.eq-head { display: flex; flex-direction: column; gap: .15rem; }
.eq-title { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
.eq-sub { font-size: .88rem; color: var(--v145-ink-soft); }

.eq-add { width: 100%; min-height: 52px; display: flex; align-items: center;
    justify-content: center; gap: .5rem; border-radius: 12px;
    background: var(--v145-accent); color: #fff; font-weight: 700; font-size: .98rem; }
.eq-add-sm { min-height: 46px; width: auto; padding: 0 1.1rem; font-size: .9rem; }
.eq-add:focus-visible { outline: 2px solid var(--v145-accent); outline-offset: 2px; }

.eq-search { position: relative; display: flex; align-items: center; }
.eq-search-ico { position: absolute; left: 13px; color: var(--v145-ink-soft); pointer-events: none; }
.eq-search-in { width: 100%; min-height: 48px; padding: .6rem .8rem .6rem 3rem;
    border: 1px solid var(--v145-line); border-radius: 12px;
    background: var(--v145-card); color: var(--v145-ink); font-size: .94rem; }
.eq-search-in:focus { outline: none; border-color: var(--v145-accent);
    box-shadow: 0 0 0 2px var(--v145-accent-soft); }

/* Los filtros: una fila que se desplaza si no entra. */
.eq-filtros { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none;
    padding-bottom: 2px; }
.eq-filtros::-webkit-scrollbar { display: none; }
.eq-filtro { flex: 1 1 auto; min-height: 44px; padding: 0 .7rem; border-radius: 99px;
    border: 1px solid var(--v145-line); background: var(--v145-card);
    color: var(--v145-ink-soft); font-size: .88rem; font-weight: 600; }
.eq-filtro.is-on { background: var(--v145-accent); border-color: var(--v145-accent);
    color: #fff; }
.eq-filtro:focus-visible { outline: 2px solid var(--v145-accent); outline-offset: 2px; }

/* Debajo de 340 px vuelven a ser una fila que se desplaza: forzarlos a entrar los
   dejaría demasiado angostos para leerlos. */
@media (max-width: 339px) { .eq-filtro { flex: 0 0 auto; padding: 0 .9rem; } }

.eq-resumen { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    padding: .7rem .9rem; background: var(--v145-card); border: 1px solid var(--v145-line);
    border-radius: 12px; font-size: .86rem; }
.eq-res-a, .eq-res-b { display: flex; align-items: center; gap: .4rem; }
.eq-res-a { color: var(--v145-ink-2, var(--v145-ink)); font-weight: 600; }
/* Ámbar solo para lo pendiente. */
.eq-res-b { color: #b45309; font-weight: 600;
    padding-left: .75rem; border-left: 1px solid var(--v145-line); }

.eq-lista { display: flex; flex-direction: column; gap: .6rem; }
.eq-tarjeta { display: flex; align-items: flex-start; gap: .7rem; width: 100%;
    padding: .85rem; text-align: left; background: var(--v145-card);
    border: 1px solid var(--v145-line); border-radius: 14px; }
.eq-tarjeta:focus-visible { outline: 2px solid var(--v145-accent); outline-offset: 2px; }
.eq-tarjeta-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.eq-tarjeta-nom { font-size: 1rem; font-weight: 700; }
.eq-fila { display: flex; align-items: center; gap: .4rem; font-size: .84rem;
    color: var(--v145-ink-soft); min-width: 0; }
.eq-fila svg { flex: 0 0 auto; }
.eq-chev { flex: 0 0 auto; color: var(--v145-ink-soft); align-self: center; }

.eq-avatar { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 99px;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    background: var(--v145-accent-soft); color: var(--v145-accent);
    font-weight: 700; font-size: .95rem; }
.eq-avatar-lg { width: 64px; height: 64px; font-size: 1.25rem; }
.eq-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ⛔ Rol y estado NUNCA comparten color: si no, no se distinguen de un vistazo. */
.eq-badges { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.eq-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem;
    border-radius: 99px; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.eq-rol-admin  { background: #d1fae5; color: #065f46; }
.eq-rol-supervisor { background: #dbeafe; color: #1e40af; }
.eq-rol-worker { background: #ecfdf5; color: #047857; }
.eq-est-active   { background: #ecfdf5; color: #047857; }
.eq-est-invited  { background: #fffbeb; color: #b45309; }
.eq-est-inactive { background: var(--v145-card-2); color: var(--v145-ink-soft); }
.eq-punto { width: 7px; height: 7px; border-radius: 99px; background: currentColor; }

.eq-vacio { display: flex; flex-direction: column; align-items: center; gap: .5rem;
    padding: 2.2rem 1rem; text-align: center; background: var(--v145-card);
    border: 1px dashed var(--v145-line); border-radius: 14px; }
.eq-vacio-ico { width: 64px; height: 64px; border-radius: 99px; display: flex;
    align-items: center; justify-content: center;
    background: var(--v145-accent-soft); color: var(--v145-accent); }
.eq-vacio strong { font-size: 1rem; }
.eq-vacio > span { font-size: .86rem; color: var(--v145-ink-soft); max-width: 34ch; }
.eq-vacio-txt { text-align: center; font-size: .9rem; color: var(--v145-ink-soft);
    padding: 1.8rem 1rem; }

/* ═══ Pantallas completas: añadir y ficha ═════════════════════════════════ */
#addWorkerModal, #editWorkerModal { z-index: 1100; }
@media (max-width: 719px) { #addWorkerModal, #editWorkerModal { background: transparent; } }

.eq-screen { position: fixed; inset: 0; width: 100%;
    height: 100vh;      /* respaldo para navegadores sin dvh */
    height: 100dvh;
    display: flex; flex-direction: column;
    background: var(--v145-bg); color: var(--v145-ink); overflow: hidden; }

.eq-scr-head { flex: 0 0 auto; display: flex; align-items: center; gap: .5rem;
    padding: calc(.55rem + env(safe-area-inset-top, 0)) .6rem .55rem;
    background: var(--v145-card); border-bottom: 1px solid var(--v145-line); }
.eq-scr-icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 99px;
    display: flex; align-items: center; justify-content: center; color: var(--v145-ink); }
.eq-scr-icon:focus-visible { outline: 2px solid var(--v145-accent); outline-offset: 2px; }
.eq-scr-sp { flex: 0 0 auto; width: 44px; }
.eq-scr-title { flex: 1 1 auto; min-width: 0; text-align: center; font-size: 1.02rem;
    font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 379px) { .eq-scr-title { white-space: normal; font-size: .92rem; line-height: 1.15; } }

/* El cuerpo es el ÚNICO que se desplaza. */
.eq-scr-body { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; padding: .9rem 1rem 1rem;
    display: flex; flex-direction: column; gap: .8rem; }
.eq-scr-lead { font-size: 1.05rem; font-weight: 700; margin-bottom: -.5rem; }
.eq-scr-lead-sub { font-size: .85rem; color: var(--v145-ink-soft); }

.eq-card { flex: 0 0 auto; background: var(--v145-card); border: 1px solid var(--v145-line);
    border-radius: 14px; padding: .9rem; display: flex; flex-direction: column; gap: .6rem; }
.eq-card-tit { font-size: .96rem; font-weight: 700; }

.eq-foto { flex-direction: row; align-items: center; gap: .7rem; }
.eq-foto-ico { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 99px;
    display: flex; align-items: center; justify-content: center;
    border: 1px dashed var(--v145-line); color: var(--v145-ink-soft); }
.eq-foto-txt { display: flex; flex-direction: column; min-width: 0; }
.eq-foto-txt strong { font-size: .92rem; }
.eq-foto-txt em { font-style: normal; font-weight: 400; color: var(--v145-ink-soft); }
.eq-foto-txt > span { font-size: .78rem; color: var(--v145-ink-soft); }

.eq-campo { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.eq-lbl { font-size: .8rem; font-weight: 600; color: var(--v145-ink-soft); }
.eq-lbl em { font-style: normal; font-weight: 400; }
.eq-in { width: 100%; min-height: 48px; padding: .6rem .75rem;
    border: 1px solid var(--v145-line); border-radius: 10px;
    background: var(--v145-card-2); color: var(--v145-ink); font-size: .92rem; }
.eq-in:focus { outline: 2px solid var(--v145-accent); outline-offset: 1px; }
.eq-in[readonly] { color: var(--v145-ink-soft); cursor: default; }
.eq-in[readonly]:focus { outline: none; }
.eq-par { display: flex; gap: .5rem; }
.eq-par > * { flex: 1 1 0; min-width: 0; }
@media (max-width: 379px) { .eq-par { flex-direction: column; } }

.eq-select { position: relative; display: flex; align-items: center; }
/* ⚠️ La flecha propia ocupa lugar: sin relleno derecho el texto se mete debajo. */
.eq-select .eq-in { padding-right: 2.2rem; appearance: none; -webkit-appearance: none; }
.eq-select-arrow { position: absolute; right: 10px; color: var(--v145-ink-soft); pointer-events: none; }
.eq-money { position: relative; display: flex; align-items: center; }
.eq-money .eq-in { padding-left: 2.2rem; }
.eq-money-ico { position: absolute; left: 11px; color: var(--v145-ink-soft); pointer-events: none; }
.eq-lock { position: relative; display: flex; align-items: center; }
.eq-lock .eq-in { padding-right: 2.4rem; }
.eq-lock-ico { position: absolute; right: 12px; color: var(--v145-ink-soft); }

.eq-ayuda { font-size: .78rem; color: var(--v145-ink-soft); }
.eq-ayuda-lock { display: flex; align-items: center; gap: .35rem; }

.eq-check { display: flex; align-items: flex-start; gap: .55rem; padding: .7rem;
    border: 1px solid var(--v145-line); border-radius: 12px; background: var(--v145-card-2); }
.eq-check:has(input:checked) { border-color: var(--v145-accent); background: var(--v145-accent-soft); }
.eq-check input { flex: 0 0 auto; width: 22px; height: 22px; accent-color: var(--v145-accent); }
.eq-check-ico { flex: 0 0 auto; color: var(--v145-ink-soft); }
.eq-check-txt { display: flex; flex-direction: column; min-width: 0; }
.eq-check-txt strong { font-size: .88rem; }
.eq-check-txt span { font-size: .78rem; color: var(--v145-ink-soft); }

.eq-permisos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem;
    list-style: none; padding: 0; margin: 0; }
@media (max-width: 379px) { .eq-permisos { grid-template-columns: 1fr; } }
.eq-permiso { display: flex; align-items: center; gap: .4rem; font-size: .8rem;
    color: var(--v145-ink-soft); }
.eq-permiso svg { flex: 0 0 auto; color: #dc2626; }
.eq-permiso.is-si svg { color: var(--v145-accent); }

.eq-perfil { display: flex; align-items: center; gap: .8rem; padding: .3rem 0 .2rem; }
.eq-perfil-txt { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.eq-perfil-nom { font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; }
.eq-perfil-mail { display: flex; align-items: center; gap: .35rem; font-size: .84rem;
    color: var(--v145-ink-soft); min-width: 0; }

.eq-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--v145-line); }
.eq-tab { flex: 1 1 0; min-height: 46px; font-size: .92rem; font-weight: 600;
    color: var(--v145-ink-soft); border-bottom: 2px solid transparent; }
.eq-tab.is-on { color: var(--v145-accent); border-bottom-color: var(--v145-accent); }
.eq-tab:focus-visible { outline: 2px solid var(--v145-accent); outline-offset: -2px; }
.eq-pane { display: flex; flex-direction: column; gap: .8rem; }
.eq-pane.hidden { display: none !important; }

.eq-activo { display: flex; align-items: center; gap: .6rem; }
.eq-activo-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.eq-activo-txt strong { font-size: .92rem; }
.eq-activo-txt span { font-size: .78rem; color: var(--v145-ink-soft); }
.eq-switch { flex: 0 0 auto; width: 52px; height: 44px; position: relative; background: transparent; }
.eq-switch::before { content: ''; position: absolute; top: 7px; left: 0; width: 52px;
    height: 30px; border-radius: 99px; background: var(--v145-line);
    transition: background .15s ease; }
.eq-switch.is-on::before { background: var(--v145-accent); }
.eq-switch-bola { position: absolute; top: 10px; left: 3px; width: 24px; height: 24px;
    border-radius: 99px; background: #fff; transition: transform .15s ease; }
.eq-switch.is-on .eq-switch-bola { transform: translateX(22px); }
.eq-switch:focus-visible { outline: 2px solid var(--v145-accent); outline-offset: 2px; }

/* Rojo SOLO para lo destructivo. */
.eq-btn-danger { display: flex; align-items: center; justify-content: center; gap: .4rem;
    min-height: 46px; border-radius: 10px; background: transparent; color: #dc2626;
    font-weight: 700; font-size: .9rem; }
.eq-btn-danger:focus-visible { outline: 2px solid #dc2626; outline-offset: 2px; }

.eq-error { font-size: .84rem; color: #dc2626; padding: .6rem .75rem;
    background: #fef2f2; border-radius: 10px; }

.eq-foot { flex: 0 0 auto; display: flex; gap: .5rem;
    padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0));
    background: var(--v145-card); border-top: 1px solid var(--v145-line); }
.eq-btn-sec { flex: 1 1 0; min-width: 0; min-height: 50px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; gap: .4rem;
    border: 1px solid var(--v145-line); background: var(--v145-card);
    color: var(--v145-ink); font-weight: 600; font-size: .94rem; }
.eq-btn-pri { flex: 1.5 1 0; min-width: 0; min-height: 50px; border-radius: 12px;
    background: var(--v145-accent); color: #fff; font-weight: 700; font-size: .94rem; }
.eq-btn-pri[disabled] { opacity: .55; }
.eq-btn-full { flex: none; width: 100%; }
.eq-btn-sec:focus-visible, .eq-btn-pri:focus-visible {
    outline: 2px solid var(--v145-accent); outline-offset: 2px; }

/* En tablet y escritorio, ancho de lectura. */
@media (min-width: 720px) {
    #addWorkerModal, #editWorkerModal { align-items: center; }
    .eq-screen { position: relative; inset: auto; width: 100%; max-width: 680px;
        height: 90dvh; max-height: 90dvh; border-radius: 16px;
        box-shadow: 0 12px 40px rgba(0,0,0,.2); }
    .eq-scr-head { border-radius: 16px 16px 0 0; padding-top: .55rem; }
    .eq-wrap { max-width: 860px; margin: 0 auto; }
}
/* ═══ v184 · NUEVO PRESUPUESTO / NUEVA FACTURA ════════════════════════════ */
/* Una sola familia visual con el selector: mismo fondo, mismas tarjetas, mismo verde. */
@media (max-width: 719px) { #jobWizardModal { background: transparent; } }

.jw-screen {
    position: fixed; inset: 0; width: 100%;
    height: 100vh;      /* respaldo para navegadores sin dvh */
    height: 100dvh;
    display: flex; flex-direction: column;
    background: var(--v145-bg); color: var(--v145-ink); overflow: hidden;
}

.jw-screen > .jw-head { flex: 0 0 auto; display: flex; align-items: center; gap: .5rem;
    padding: calc(.55rem + env(safe-area-inset-top, 0)) .75rem .55rem;
    background: var(--v145-card); border-bottom: 1px solid var(--v145-line); }
.jw-head-icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 99px;
    display: flex; align-items: center; justify-content: center; color: var(--v145-ink); }
.jw-head-icon:focus-visible { outline: 2px solid var(--v145-accent); outline-offset: 2px; }
.jw-head-title { flex: 1 1 auto; min-width: 0; text-align: center; font-size: 1.02rem;
    font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jw-head-right { flex: 0 0 auto; display: flex; align-items: center; gap: .3rem; }

/* El cuerpo es el ÚNICO que se desplaza. */
.jw-screen > .jw-body { flex: 1 1 0; min-height: 0; overflow-y: auto;
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding: .8rem 1rem 1rem; display: flex; flex-direction: column; gap: 1.1rem; }
.jw-screen .jw-sec { flex: 0 0 auto; display: flex; flex-direction: column; gap: .55rem; }
.jw-screen .jw-eyebrow { font-size: .74rem; font-weight: 700; letter-spacing: .05em;
    color: var(--v145-ink-soft); }

.jw-card { background: var(--v145-card); border: 1px solid var(--v145-line);
    border-radius: 14px; }
.jw-card-pad { padding: .9rem; display: flex; flex-direction: column; gap: .55rem; }

/* La ficha del cliente: quién y dónde, con la acción a la derecha. */
.jw-cliente { display: flex; align-items: center; gap: .7rem; padding: .8rem;
    background: var(--v145-card); border: 1px solid var(--v145-line); border-radius: 14px; }
.jw-cliente-ava { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 99px;
    display: flex; align-items: center; justify-content: center;
    background: var(--v145-accent-soft); color: var(--v145-accent); }
.jw-cliente-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.jw-cliente-nom { font-size: .98rem; font-weight: 700; }
.jw-cliente-dir, .jw-cliente-id { font-size: .8rem; color: var(--v145-ink-soft); }
.jw-cliente-dir:empty, .jw-cliente-id:empty { display: none; }
.jw-cambiar { flex: 0 0 auto; min-height: 44px; padding: 0 .3rem; color: var(--v145-accent);
    font-weight: 600; font-size: .9rem; }
.jw-cliente .jw-chev { flex: 0 0 auto; color: var(--v145-ink-soft); }

/* "Preparación e instalación de césped" no entra en una línea y quedaba cortada con
   puntos suspensivos. Se le dan dos líneas: una descripción a medias no informa. */
.jw-screen #jw-type .jt-desc { white-space: normal; overflow: visible; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.jw-screen #jw-type .jt-card { align-items: flex-start; padding-top: .7rem; padding-bottom: .7rem; }
.jw-screen #jw-type .jt-textos { min-width: 0; }

/* De dónde viene la factura. */
.jw-origen { display: flex; align-items: center; gap: .65rem; padding: .75rem;
    background: var(--v145-card); border: 1px solid var(--v145-line); border-radius: 14px; }
.jw-origen-ico { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 99px;
    display: flex; align-items: center; justify-content: center;
    background: var(--v145-accent); color: #fff; }
.jw-origen-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.jw-origen-txt strong { font-size: .93rem; }
.jw-origen-txt span { font-size: .78rem; color: var(--v145-ink-soft); }

/* Medidas: etiqueta a la izquierda, campo con su unidad adentro a la derecha. */
.jw-screen .jw-tarjeta { background: var(--v145-card); border: 1px solid var(--v145-line);
    border-radius: 14px; padding: .35rem .9rem; }
.jw-screen .jw-fila { display: flex; align-items: center; gap: .6rem; min-height: 56px;
    border-bottom: 1px solid var(--v145-line-soft); }
.jw-screen .jw-tarjeta .jw-fila:last-child { border-bottom: 0; }
.jw-screen .jw-fila-lab { flex: 1 1 auto; min-width: 0; font-size: .92rem;
    color: var(--v145-ink-soft); }
.jw-screen .jw-fila-caja { flex: 0 0 auto; display: flex; align-items: center;
    border: 1px solid var(--v145-line); border-radius: 10px; overflow: hidden;
    background: var(--v145-card); }
.jw-screen .jw-fila-caja .jw-input { width: 96px; min-height: 42px; border: 0;
    background: transparent; text-align: left; padding: 0 .6rem; }
.jw-screen .jw-fila-u { flex: 0 0 auto; min-width: 42px; padding: 0 .5rem; height: 42px;
    display: flex; align-items: center; justify-content: center; font-size: .82rem;
    color: var(--v145-ink-soft); background: var(--v145-card-2);
    border-left: 1px solid var(--v145-line); }

/* Las características del trabajo, como fichas que se tocan. */
.jw-screen .jw-checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem; }
@media (max-width: 379px) { .jw-screen .jw-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.jw-screen .jw-checks .jw-check { display: flex; align-items: center; gap: .45rem;
    min-height: 62px; padding: .5rem; border: 1px solid var(--v145-line);
    border-radius: 12px; background: var(--v145-card); font-size: .8rem; line-height: 1.2; }
.jw-screen .jw-checks .jw-check:has(input:checked) { border-color: var(--v145-accent);
    background: var(--v145-accent-soft); }
.jw-screen .jw-checks .jw-check input { flex: 0 0 auto; width: 20px; height: 20px;
    accent-color: var(--v145-accent); }

/* Servicios adicionales: dos tarjetas con icono. */
.jw-servicios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
@media (max-width: 359px) { .jw-servicios { grid-template-columns: 1fr; } }
.jw-serv { display: flex; align-items: center; gap: .5rem; min-height: 68px; padding: .65rem;
    background: var(--v145-card); border: 1px solid var(--v145-line); border-radius: 14px; }
.jw-serv.is-on { border-color: var(--v145-accent); background: var(--v145-accent-soft); }
.jw-serv input { flex: 0 0 auto; width: 20px; height: 20px; accent-color: var(--v145-accent); }
.jw-serv-ico { flex: 0 0 auto; color: var(--v145-accent); display: flex; }
.jw-serv-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.jw-serv-txt strong { font-size: .86rem; line-height: 1.2; }
.jw-serv-txt span { font-size: .74rem; color: var(--v145-ink-soft); }
.jw-serv:focus-within { outline: 2px solid var(--v145-accent); outline-offset: 2px; }

.jw-equip-card { padding: .8rem; }

/* El botón punteado del catálogo, como en la referencia. */
.jw-catalogo { width: 100%; min-height: 52px; display: flex; align-items: center;
    justify-content: center; gap: .45rem; border: 1px dashed var(--v145-line);
    border-radius: 14px; color: var(--v145-ink-soft); font-weight: 600; font-size: .9rem;
    background: transparent; }
.jw-catalogo:focus-visible { outline: 2px solid var(--v145-accent); outline-offset: 2px; }

/* La barra de subtotal, pegada arriba del pie. */
.jw-subbar { flex: 0 0 auto; display: flex; align-items: center; gap: .6rem;
    padding: .6rem 1rem; background: var(--v145-accent-soft);
    border-top: 1px solid var(--v145-line); }
.jw-subbar-ico { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--v145-card); color: var(--v145-accent); }
.jw-subbar-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.jw-subbar-txt strong { font-size: .9rem; }
.jw-subbar-txt span { font-size: .75rem; color: var(--v145-ink-soft); }
.jw-subbar-monto { flex: 0 0 auto; font-size: 1.12rem; font-weight: 800; }

.jw-screen > .jw-foot { flex: 0 0 auto; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0));
    background: var(--v145-card); border-top: 1px solid var(--v145-line); }
.jw-screen .jw-foot-btns { display: flex; gap: .5rem; }
.jw-screen .jw-foot-ghost { flex: 1 1 0; min-width: 0; min-height: 50px; border-radius: 12px;
    border: 1px solid var(--v145-accent); background: var(--v145-card);
    color: var(--v145-accent); font-weight: 700; font-size: .94rem; justify-content: center; }
.jw-screen .jw-foot-primary { flex: 1.2 1 0; min-width: 0; min-height: 50px; border-radius: 12px;
    background: var(--v145-accent); color: #fff; font-weight: 700; font-size: .94rem; }

/* Cada concepto, una tarjeta. */
.jw-screen .li-rows { display: flex; flex-direction: column; gap: .6rem; }
.jw-screen .li-row { display: flex; flex-direction: column; gap: .5rem; padding: .8rem;
    background: var(--v145-card); border: 1px solid var(--v145-line); border-radius: 14px; }
.jw-screen .li-top { display: flex; align-items: center; gap: .4rem; }
.jw-screen .li-c-desc { flex: 1 1 auto; min-width: 0; }
.jw-screen .li-row .jw-input { min-height: 44px; }

/* La descripción arriba con todo el ancho; los números y el importe, un renglón. */
.jw-screen .li-row { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
.jw-screen .li-row .li-top { flex: 1 1 100%; }
.jw-screen .li-row .li-nums { flex: 1 1 auto; min-width: 0;
    display: flex; align-items: flex-end; gap: .5rem; }
.jw-screen .li-row .li-amt { flex: 0 0 auto; display: flex; flex-direction: column;
    gap: .2rem; text-align: right; }
/* Mismo alto que un campo, para que el renglón quede parejo de verdad. */
.jw-screen .li-row .li-amt-val { min-height: 44px; display: flex; align-items: center;
    justify-content: flex-end; font-size: 1rem; }
.jw-screen .li-row .li-c { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
/* El precio necesita más aire que la cantidad: lleva el signo y dos decimales. */
.jw-screen .li-row .li-c-qty  { flex: 1 1 0; }
.jw-screen .li-row .li-c-unit { flex: 1.1 1 0; }
.jw-screen .li-row .li-c-price { flex: 1.5 1 0; }

/* "Solo para ti": lo privado, agrupado y titulado como en la referencia. */
.jw-screen .jw-privada { background: var(--v145-accent-soft); border-radius: 14px;
    padding: .8rem; margin-top: .6rem;
    border: 1px solid color-mix(in srgb, var(--v145-accent) 22%, transparent); }
.jw-privada-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .1rem; }
.jw-privada-ico { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 99px;
    display: flex; align-items: center; justify-content: center;
    background: var(--v145-card); color: var(--v145-accent); }
.jw-privada-tit { display: flex; flex-direction: column; }
.jw-privada-tit strong { font-size: .92rem; }
.jw-privada-tit span { font-size: .75rem; color: var(--v145-ink-soft); }

/* "Solo para ti": lo privado, dicho como privado. */
.jw-screen .jw-private { display: flex; gap: .5rem; padding: .7rem .8rem; border-radius: 12px;
    background: var(--v145-accent-soft); font-size: .78rem; color: var(--v145-ink-soft); }

/* "Sembradora (slit seeder)" no entra en una línea a 320 px y quedaba cortada.
   Un nombre de equipo a medias no se puede reconocer: se le dan dos líneas. */
@media (max-width: 379px) {
    .jw-screen .jw-eq-name { white-space: normal; line-height: 1.2; }
    .jw-screen .jw-eq-row { align-items: flex-start; }
}

/* En tablet y escritorio, un modal centrado con ancho de lectura. */
@media (min-width: 720px) {
    #jobWizardModal { align-items: center; }
    .jw-screen { position: relative; inset: auto; width: 100%; max-width: 760px;
        height: 90dvh; max-height: 90dvh; border-radius: 16px;
        box-shadow: 0 12px 40px rgba(0,0,0,.2); }
    .jw-screen > .jw-head { border-radius: 16px 16px 0 0; padding-top: .55rem; }
}
/* ═══ v184 · SELECTOR DE TIPO DE TRABAJO ══════════════════════════════════ */
/* ⛔ El z-index NO es decoración: la pantalla se abre DESDE el creador, que también es
   un .modal fixed inset-0 y viene antes en el documento. Sin esto está en el DOM y no
   se ve, que es exactamente como se vería un bug. Lo aprendió v173. */
#jobTypeSheet { z-index: 1200; }
@media (max-width: 719px) { #jobTypeSheet { background: transparent; } }

.jt-screen {
    position: fixed; inset: 0; width: 100%;
    height: 100vh;      /* respaldo para navegadores sin dvh */
    height: 100dvh;
    display: flex; flex-direction: column;
    background: var(--v145-bg); color: var(--v145-ink); overflow: hidden;
}

.jt-head { flex: 0 0 auto; display: flex; align-items: center; gap: .5rem;
    padding: calc(.55rem + env(safe-area-inset-top, 0)) .75rem .55rem;
    background: var(--v145-card); border-bottom: 1px solid var(--v145-line); }
.jt-head-icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 99px;
    display: flex; align-items: center; justify-content: center; color: var(--v145-ink); }
.jt-head-title { flex: 1 1 auto; min-width: 0; text-align: center; font-size: 1.02rem;
    font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jt-head-cancel { flex: 0 0 auto; min-height: 44px; padding: 0 .5rem;
    color: var(--v145-accent); font-size: .92rem; font-weight: 600; }
.jt-head-icon:focus-visible, .jt-head-cancel:focus-visible {
    outline: 2px solid var(--v145-accent); outline-offset: 2px; }

.jt-search { flex: 0 0 auto; position: relative; display: flex; align-items: center;
    margin: .7rem 1rem .2rem; }
.jt-search-ico { position: absolute; left: 13px; color: var(--v145-ink-soft); pointer-events: none; }
.jt-search-in { width: 100%; min-height: 48px; padding: .6rem .8rem .6rem 3rem;
    border: 1px solid transparent; border-radius: 12px;
    background: var(--v145-card-2); color: var(--v145-ink); font-size: .95rem; }
.jt-search-in:focus { outline: none; border-color: var(--v145-accent);
    box-shadow: 0 0 0 2px var(--v145-accent-soft); }

/* El cuerpo es el ÚNICO que se desplaza. */
.jt-body { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; padding: .4rem 1rem 1rem; }
.jt-help { font-size: .82rem; color: var(--v145-ink-soft); margin: .35rem 0 .9rem; }

.jt-sec { margin-bottom: 1.1rem; }
.jt-sec-tit { font-size: .74rem; font-weight: 700; letter-spacing: .06em;
    color: var(--v145-ink-soft); margin-bottom: .5rem; }

/* Dos columnas en teléfono; una sola cuando ya no entran. */
.jt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
@media (max-width: 339px) { .jt-grid { grid-template-columns: 1fr; } }

.jt-tile { position: relative; display: flex; background: var(--v145-card);
    border: 1px solid var(--v145-line); border-radius: 14px; }
.jt-tile.is-on { border-color: var(--v145-accent); background: var(--v145-accent-soft); }
.jt-tile-hit { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
    align-items: flex-start; gap: .3rem; padding: .8rem .8rem 2.1rem; text-align: left; }
.jt-tile-hit:focus-visible { outline: 2px solid var(--v145-accent); outline-offset: 2px;
    border-radius: 14px; }
.jt-tile-ico { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 99px;
    display: flex; align-items: center; justify-content: center;
    background: var(--v145-accent); color: #fff; }
.jt-tile-sel { position: absolute; top: .7rem; right: .7rem; color: var(--v145-accent);
    display: flex; }
.jt-tile-radio { display: block; width: 18px; height: 18px; border-radius: 99px;
    border: 2px solid var(--v145-line); }
.jt-tile-tit { font-size: .92rem; font-weight: 700; line-height: 1.2; }
.jt-tile-desc { font-size: .76rem; color: var(--v145-ink-soft); line-height: 1.3; }

/* La estrella es un botón APARTE: tocarla no elige el trabajo. */
.jt-star { position: absolute; bottom: .25rem; right: .25rem;
    width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
    color: var(--v145-ink-soft); border-radius: 99px; }
.jt-star.is-on { color: #f59e0b; }
.jt-star.is-on svg { fill: currentColor; }
.jt-star:focus-visible { outline: 2px solid var(--v145-accent); outline-offset: -2px; }

/* "Otros trabajos": una fila por trabajo, de ancho completo. */
.jt-lines { display: flex; flex-direction: column; gap: .5rem; }
.jt-line { position: relative; display: flex; align-items: center;
    background: var(--v145-card); border: 1px solid var(--v145-line); border-radius: 14px; }
.jt-line.is-on { border-color: var(--v145-accent); background: var(--v145-accent-soft); }
.jt-line-hit { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: .65rem;
    padding: .7rem 3rem .7rem .7rem; text-align: left; min-height: 60px; }
.jt-line-hit:focus-visible { outline: 2px solid var(--v145-accent); outline-offset: -2px;
    border-radius: 14px; }
.jt-line-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.jt-line .jt-star { bottom: auto; top: 50%; transform: translateY(-50%); right: 2.4rem; }
.jt-line-check { color: var(--v145-accent); position: absolute; right: .7rem; }
.jt-line .jt-chev { color: var(--v145-ink-soft); position: absolute; right: .9rem; }

.jt-empty { text-align: center; font-size: .88rem; color: var(--v145-ink-soft);
    padding: 1.6rem 0; }

.jt-crear { width: 100%; min-height: 52px; display: flex; align-items: center;
    justify-content: center; gap: .4rem; border: 1px dashed var(--v145-accent);
    border-radius: 14px; color: var(--v145-accent); font-weight: 600; font-size: .92rem;
    background: transparent; margin-bottom: .9rem; }
.jt-crear:focus-visible { outline: 2px solid var(--v145-accent); outline-offset: 2px; }

/* Lo que se va a usar, dicho antes de confirmar. */
.jt-selcard { display: flex; align-items: flex-start; gap: .6rem; padding: .8rem;
    border-radius: 14px; background: var(--v145-accent-soft);
    border: 1px solid color-mix(in srgb, var(--v145-accent) 25%, transparent); }
.jt-selcard-ico { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 99px;
    display: flex; align-items: center; justify-content: center;
    background: var(--v145-accent); color: #fff; }
.jt-selcard-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jt-selcard-txt strong { font-size: .92rem; }
.jt-selcard-txt span { font-size: .78rem; color: var(--v145-ink-soft); line-height: 1.3; }

/* Pie fijo con las dos acciones. */
.jt-foot { flex: 0 0 auto; display: flex; gap: .5rem;
    padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0));
    border-top: 1px solid var(--v145-line); background: var(--v145-card); }
.jt-cancelar { flex: 1 1 0; min-width: 0; min-height: 50px; border-radius: 12px;
    border: 1px solid var(--v145-line); background: var(--v145-card);
    color: var(--v145-ink); font-weight: 600; font-size: .95rem; }
.jt-usar { flex: 1.4 1 0; min-width: 0; min-height: 50px; border-radius: 12px;
    background: var(--v145-accent); color: #fff; font-weight: 700; font-size: .95rem; }
.jt-usar[disabled] { opacity: .45; }
.jt-cancelar:focus-visible, .jt-usar:focus-visible {
    outline: 2px solid var(--v145-accent); outline-offset: 2px; }

/* Debajo de 380 px "Seleccionar tipo de trabajo" no entra en una línea: en vez de
   recortarlo, se deja respirar en dos. Un título a medias no se puede leer. */
@media (max-width: 379px) {
    .jt-head-title { white-space: normal; font-size: .92rem; line-height: 1.15; }
    .jt-head { padding-left: .4rem; padding-right: .4rem; }
    .jt-head-cancel { padding: 0 .3rem; font-size: .85rem; }
}

/* En tablet y escritorio, un modal centrado con ancho de lectura. */
@media (min-width: 720px) {
    #jobTypeSheet { align-items: center; }
    .jt-screen { position: relative; inset: auto; width: 100%; max-width: 680px;
        height: 88dvh; max-height: 88dvh; border-radius: 16px;
        box-shadow: 0 12px 40px rgba(0,0,0,.2); }
    .jt-head { border-radius: 16px 16px 0 0; padding-top: .55rem; }
    .jt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* ═══ v182 · NUEVO CLIENTE ════════════════════════════════════════════════ */
#addClientModal, #editClientModal { z-index: 1100; }
/* En teléfono es pantalla completa, como "Agregar clientes al día" (v180). */
@media (max-width: 719px) { #addClientModal, #editClientModal { background: transparent; } }

.nc-screen {
    position: fixed; inset: 0; width: 100%;
    height: 100vh;      /* respaldo para navegadores sin dvh */
    height: 100dvh;
    display: flex; flex-direction: column;
    background: var(--v145-bg); color: var(--v145-ink); overflow: hidden;
}

/* La cabecera verde: fija, y respeta el área segura de arriba. */
.nc-head { flex: 0 0 auto; display: flex; align-items: center; gap: .6rem;
    padding: calc(.6rem + env(safe-area-inset-top, 0)) 1rem .6rem;
    background: var(--v145-accent); color: #fff; }
.nc-head-icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 99px;
    display: flex; align-items: center; justify-content: center; color: #fff; }
.nc-head-title { flex: 1 1 auto; min-width: 0; font-size: 1.05rem; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nc-head-cancel { flex: 0 0 auto; min-height: 40px; padding: 0 .5rem;
    color: #fff; font-size: .88rem; font-weight: 600; }
.nc-head-icon:focus-visible, .nc-head-cancel:focus-visible {
    outline: 2px solid #fff; outline-offset: 2px; }

/* El cuerpo es el ÚNICO que se desplaza. */
.nc-body { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; padding: .8rem 1rem 1rem;
    display: flex; flex-direction: column; gap: .8rem; }

.nc-card { flex: 0 0 auto; background: var(--v145-card); border: 1px solid var(--v145-line);
    border-radius: 14px; padding: .9rem; display: flex; flex-direction: column; gap: .6rem; }
.nc-card-head { display: flex; align-items: center; gap: .55rem; }
.nc-card-ic { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--v145-accent) 12%, var(--v145-card));
    color: var(--v145-accent); }
.nc-card-tit { flex: 1 1 auto; min-width: 0; font-size: .98rem; font-weight: 700; }
.nc-card-aside { flex: 0 0 auto; display: flex; align-items: center; gap: .25rem;
    font-size: .76rem; color: var(--v145-ink-3); }
.nc-info { width: 40px; height: 40px; border-radius: 99px; display: flex;
    align-items: center; justify-content: center; color: var(--v145-ink-3); }

/* Campos, todos con su ícono. */
.nc-field { position: relative; display: flex; align-items: center; }
.nc-field-ic { position: absolute; left: 12px; color: var(--v145-ink-3); pointer-events: none; }
.nc-in { width: 100%; min-height: 48px; padding: .6rem .7rem .6rem 2.4rem;
    border: 1px solid var(--v145-line); border-radius: 12px;
    background: var(--v145-card-2); color: var(--v145-ink); font-size: .92rem; }
.nc-in:focus { outline: 2px solid var(--v145-accent); outline-offset: 1px; }
.nc-field.is-ro { min-height: 48px; padding-left: 2.4rem; border: 1px solid var(--v145-line);
    border-radius: 12px; background: var(--v145-card-2); }
.nc-ro { font-size: .92rem; color: var(--v145-ink-2); }
.nc-lbl { font-size: .78rem; font-weight: 600; color: var(--v145-ink-2); }
.nc-row { display: flex; gap: .5rem; }
.nc-row > * { flex: 1 1 0; min-width: 0; }
.nc-col { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.nc-select { position: relative; display: flex; align-items: center; }
/* ⚠️ La flecha propia ocupa lugar: sin el relleno derecho, el texto del select se mete
   debajo. Es el mismo tropiezo que costó "pul" en vez de "pulg" en v171. */
.nc-select .nc-in { padding-right: 2.2rem; appearance: none; -webkit-appearance: none; }
.nc-select-arrow { position: absolute; right: 10px; color: var(--v145-ink-3); pointer-events: none; }

/* Las tres tarjetas de tipo de servicio. */
.nc-modos { display: flex; gap: .5rem; }
.nc-modo { flex: 1 1 0; min-width: 0; position: relative; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: .25rem;
    padding: .8rem .45rem; border: 1px solid var(--v145-line); border-radius: 12px;
    background: var(--v145-card); min-height: 108px; }
.nc-modo.is-on { background: color-mix(in srgb, var(--v145-accent) 8%, var(--v145-card));
    border-color: var(--v145-accent); }
.nc-modo:focus-visible { outline: 2px solid var(--v145-accent); outline-offset: 2px; }
.nc-modo-check { position: absolute; top: 6px; right: 6px; color: var(--v145-accent);
    opacity: 0; transition: opacity .15s ease; }
.nc-modo.is-on .nc-modo-check { opacity: 1; }
.nc-modo-ic { color: var(--v145-ink-3); }
.nc-modo.is-on .nc-modo-ic { color: var(--v145-accent); }
.nc-modo-tit { font-size: .8rem; font-weight: 700; line-height: 1.2; }
.nc-modo-sub { font-size: .68rem; color: var(--v145-ink-3); line-height: 1.25; }

/* El aviso de "el día cambia automáticamente". */
.nc-aviso { display: flex; gap: .5rem; padding: .6rem .7rem; border-radius: 12px;
    background: color-mix(in srgb, var(--v145-accent) 10%, var(--v145-card));
    border: 1px solid color-mix(in srgb, var(--v145-accent) 22%, var(--v145-card)); }
.nc-aviso-ic { flex: 0 0 auto; color: var(--v145-accent); }
.nc-aviso-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nc-aviso-txt strong { font-size: .82rem; color: var(--v145-accent); }
.nc-aviso-txt span { font-size: .75rem; color: var(--v145-ink-2); }

/* Cliente activo. */
.nc-activo { flex-direction: row; align-items: center; }
.nc-activo-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.nc-activo-txt strong { font-size: .9rem; }
.nc-activo-txt span { font-size: .75rem; color: var(--v145-ink-3); }
.nc-switch { flex: 0 0 auto; width: 52px; height: 40px; position: relative;
    background: transparent; }
.nc-switch::before { content: ''; position: absolute; top: 5px; left: 0;
    width: 52px; height: 30px; border-radius: 99px;
    background: var(--v145-line); transition: background .15s ease; }
.nc-switch.is-on::before { background: var(--v145-accent); }
.nc-switch-bola { position: absolute; top: 8px; left: 3px; width: 24px; height: 24px;
    border-radius: 99px; background: #fff; transition: transform .15s ease; }
.nc-switch.is-on .nc-switch-bola { transform: translateX(22px); }
.nc-switch:focus-visible { outline: 2px solid var(--v145-accent); outline-offset: 2px; }

/* Pie fijo, con un solo botón. */
.nc-foot { flex: 0 0 auto; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0));
    border-top: 1px solid var(--v145-line); background: var(--v145-card); }
.nc-guardar { width: 100%; min-height: 48px; border-radius: 12px;
    background: var(--v145-accent); color: #fff; font-weight: 700; font-size: .95rem; }

/* v183 · El identificador del cliente es de solo lectura: se ve, no se edita. */
.nc-in[readonly] { background: var(--v145-bg-2, var(--v145-line)); color: var(--v145-ink-2);
    cursor: default; }
.nc-in[readonly]:focus { outline: none; }

/* v183 · El pie de la edición lleva DOS acciones: guardar manda, cancelar acompaña.
   En el alta hay una sola, y por eso .nc-foot sigue igual para ese caso. */
.nc-foot-2 { display: flex; gap: .5rem; }
.nc-foot-2 .nc-guardar { flex: 2 1 0; min-width: 0; }
.nc-cancelar { flex: 1 1 0; min-width: 0; min-height: 48px; border-radius: 12px;
    border: 1px solid var(--v145-line); background: var(--v145-card);
    color: var(--v145-ink-2); font-weight: 600; font-size: .95rem; }
.nc-cancelar:focus-visible { outline: 2px solid var(--v145-accent); outline-offset: 2px; }

/* Desde cuándo se cuentan las próximas visitas. En el alta no hay historial y no se
   muestra; en la edición SÍ lo hay, y omitirlo dejaría tres fechas sin explicar. */
.nc-proximas-base { margin-top: .35rem; font-size: .72rem; color: var(--v145-ink-3); }
.nc-proximas-base:empty { display: none; }

/* Una sección oculta no puede reservar alto. */
#ec-sec-corte.hidden, #ec-sec-cobro.hidden, #ec-dia-wrap.hidden { display: none !important; }
#nc-sec-corte.hidden, #nc-sec-cobro.hidden, #nc-dia-wrap.hidden { display: none !important; }

/* Debajo de 380 px dos campos en fila no entran: el select recorta su propio texto
   ("Cada c" en vez de "Cada corte") sin desbordar, así que se apilan. */
@media (max-width: 379px) { .nc-row { flex-direction: column; } }

/* Con poco alto (teclado) ceden los textos secundarios, no los campos. */
@media (max-height: 460px) {
    .nc-modo-sub, .nc-aviso-txt span { display: none; }
    .nc-modo { min-height: 84px; }
}

/* En tablet y escritorio es un modal centrado, con la misma organización. */
@media (min-width: 720px) {
    #addClientModal, #editClientModal { align-items: center; }
    .nc-screen { position: relative; inset: auto; width: 100%; max-width: 720px;
        height: 88dvh; max-height: 88dvh; border-radius: 16px;
        box-shadow: 0 12px 40px rgba(0,0,0,.2); }
    .nc-head { border-radius: 16px 16px 0 0; padding-top: .6rem; }
}
/* ═══ v181 · LA FRECUENCIA Y EL DÍA PREFERIDO ═════════════════════════════ */
/* El selector apagado se ve apagado: si parece activo, el jardinero cree que eligió. */
.is-off select, .is-off label { opacity: .55; }
.is-off select { cursor: not-allowed; }
.nc-nota { display: flex; align-items: flex-start; gap: .35rem; margin-top: .3rem;
    font-size: .75rem; color: var(--v145-ink-3); }
.nc-nota svg { flex: 0 0 auto; margin-top: 1px; }

.nc-proximas { margin-top: .6rem; padding: .6rem .7rem; border-radius: 12px;
    background: var(--v145-card-2); border: 1px solid var(--v145-line); }
.nc-proximas-tit { font-size: .75rem; font-weight: 700; color: var(--v145-ink-2);
    margin-bottom: .4rem; }
.nc-proximas-lista { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.nc-visita { display: inline-flex; align-items: center; gap: .4rem; }
.nc-visita-num { width: 32px; height: 32px; border-radius: 99px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--v145-accent) 14%, var(--v145-card));
    color: var(--v145-accent); font-weight: 700; font-size: .8rem; }
.nc-visita-txt { display: flex; flex-direction: column; line-height: 1.15; }
.nc-visita-dia { font-size: .68rem; color: var(--v145-ink-3); text-transform: capitalize; }
.nc-visita-fecha { font-size: .72rem; color: var(--v145-ink-2); }
.nc-flecha { color: var(--v145-ink-3); font-size: .8rem; }
/* ═══ v179 · CABECERA DEL CALENDARIO E INDICADORES ════════════════════════ */

/* Smart, en el encabezado. Pastilla compacta, alineada con la bandeja. */
.hdr-smart { display: inline-flex; align-items: center; gap: .35rem; flex: 0 0 auto;
    min-height: 42px; padding: 0 .8rem; border-radius: 99px;
    background: var(--v145-accent); color: var(--v145-accent-ink);
    font-size: .85rem; font-weight: 700; white-space: nowrap; border: none; }
.hdr-smart:focus-visible { outline: 2px solid var(--v145-accent); outline-offset: 2px; }
/* A 340 px o menos el texto cede y queda el ícono: "Calendario" no se recorta. */
@media (max-width: 340px) {
    .hdr-smart { padding: 0 .6rem; }
    .hdr-smart span { display: none; }
}

/* ── El indicador de cada día ── */
.cal-daymark { display: flex; flex-direction: column; align-items: center; gap: 3px;
    width: 100%; margin-top: 3px; }
.cal-daycount { display: inline-flex; align-items: center; gap: 3px;
    padding: 1px 6px; border-radius: 99px;
    background: color-mix(in srgb, var(--v145-accent) 12%, var(--v145-card));
    color: var(--v145-accent); font-size: .68rem; font-weight: 700; line-height: 1.4; }
.cal-daycount-ic { width: 11px; height: 11px; flex: 0 0 auto; }
.cal-daycount-n { font-variant-numeric: tabular-nums; }
/* La barra: extremadamente fina, como se pidió. */
.cal-daybar { display: flex; width: 78%; height: 3px; border-radius: 99px; overflow: hidden;
    background: var(--v145-line); }
.cal-bar-seg { display: block; height: 100%; }
.cal-bar-pend { background: #f59e0b; }
.cal-bar-done { background: var(--v145-accent); }
.cal-bar-cita { background: #3b82f6; }

/* ⚠️ Sobre el día SELECCIONADO el fondo es verde: la pastilla pasa a blanco translúcido
   para que el número siga leyéndose, y la barra se aclara para no perderse. */
.cal-week-day.is-selected .cal-daycount,
.calendar-day.is-selected .cal-daycount { background: rgba(255,255,255,.92); color: #14532d; }
.cal-week-day.is-selected .cal-daybar,
.calendar-day.is-selected .cal-daybar { background: rgba(255,255,255,.35); }
.cal-week-day.is-selected .cal-bar-done,
.calendar-day.is-selected .cal-bar-done { background: #ffffff; }

/* ── La fila compacta: pista de deslizar + Estados ── */
.cal-subrow { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    position: relative; min-height: 34px; margin-top: .3rem; }
.cal-swipehint { display: inline-flex; align-items: center; gap: .3rem;
    color: var(--v145-ink-3); font-size: .75rem; }
.cal-statusbtn { display: inline-flex; align-items: center; gap: .25rem;
    min-height: 36px; padding: 0 .6rem; border-radius: 99px;
    border: 1px solid var(--v145-line); background: var(--v145-card);
    color: var(--v145-ink); font-size: .74rem; font-weight: 600; }
.cal-statusbtn .cal-dot { width: 6px; height: 6px; }
.cal-statusbtn:focus-visible { outline: 2px solid var(--v145-accent); outline-offset: 2px; }
.cal-statuspop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
    display: flex; flex-direction: column; gap: .35rem;
    padding: .6rem .7rem; border-radius: 12px;
    border: 1px solid var(--v145-line); background: var(--v145-card);
    box-shadow: 0 8px 24px rgba(0,0,0,.14); font-size: .78rem; white-space: nowrap; }
.cal-statuspop span { display: flex; align-items: center; gap: .4rem; }

/* ⚠️ La leyenda vieja y la pista vieja NO pueden seguir ocupando alto. */
.cal-legend[hidden], .cal-hint { display: none !important; }

/* El panel del día arranca más arriba, que era el objetivo de compactar todo esto. */
.cal-daypanel { margin-top: .6rem; }
/* ═══ v177 · AGREGAR CLIENTES AL DÍA ═══════════════════════════════════════ */
/* ⛔ La hoja se abre DESDE el calendario y en escritorio desde un modal. En v173 una
   hoja quedó invisible por no llevar z-index propio: acá va desde el principio. */
#dayAddSheet { z-index: 1100; }
/* ⚠️ En teléfono el velo se apaga: la hoja tapa todo, y un fondo oscuro debajo solo
   se nota como un borde raro si el alto no cierra exacto. En escritorio sí va. */
@media (max-width: 719px) {
    #dayAddSheet { background: transparent; }
}

/* ⛔ v180 · EN TELÉFONO ES PANTALLA COMPLETA, no una hoja a media altura.
   Antes: `max-height: 92dvh` (ese 8 % era el hueco por el que se veía el calendario),
   `border-radius` arriba y un tirador. Los tres salieron. */
.ds-sheet {
    position: fixed; inset: 0;
    width: 100%; max-width: none;
    /* Respaldo primero para navegadores sin dvh; el dvh de abajo lo pisa donde exista.
       Con 100vh sola, la barra del navegador móvil deja el pie fuera de la pantalla. */
    height: 100vh;
    height: 100dvh;
    display: flex; flex-direction: column;
    background: var(--v145-card); color: var(--v145-ink);
    border-radius: 0;
    /* El área segura de arriba: sin esto la cabecera queda debajo del reloj. */
    padding-top: env(safe-area-inset-top, 0);
    /* ⚠️ El área segura de ABAJO la aplica .ds-foot. Acá se aplicaba TAMBIÉN, así que
       se contaba dos veces y sobraba espacio bajo el botón. */
    box-shadow: none;
    overflow: hidden;
}
/* v180 · El tirador era del bottom sheet: en pantalla completa no significa nada. */
.ds-grab { display: none; }

/* v180 · La cabecera NO se va con el scroll: la lista es la única que se desplaza. */
.ds-head { display: flex; align-items: flex-start; gap: .5rem; padding: .6rem 1rem .5rem;
    flex: 0 0 auto; position: sticky; top: 0; z-index: 2; background: var(--v145-card); }
.ds-head-txt { flex: 1 1 auto; min-width: 0; }
.ds-title { font-size: 1.05rem; font-weight: 700; line-height: 1.2; }
.ds-fecha { font-size: .85rem; color: var(--v145-ink-2); margin-top: 2px; }
.ds-agendados { font-size: .78rem; color: var(--v145-ink-3); margin-top: 1px; }
.ds-aviso { font-size: .75rem; color: #b45309; margin-top: 2px; }
.ds-close { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 99px;
    display: flex; align-items: center; justify-content: center; color: var(--v145-ink-2); }
.ds-close:hover { background: var(--v145-card-2); }

.ds-worker { display: flex; align-items: center; gap: .6rem; width: calc(100% - 2rem);
    margin: 0 1rem .6rem; padding: .5rem .6rem; min-height: 56px;
    border: 1px solid var(--v145-line); border-radius: 12px; background: var(--v145-card-2);
    text-align: left; }
.ds-worker-avatar, .ds-avatar { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 99px;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--v145-accent) 14%, var(--v145-card));
    color: var(--v145-accent); font-weight: 700; font-size: .8rem; }
.ds-worker-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ds-worker-lbl { font-size: .72rem; color: var(--v145-ink-3); }
.ds-worker-name { font-size: .9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-worker-arrow { flex: 0 0 auto; color: var(--v145-ink-3); }

.ds-search-row { position: relative; margin: 0 1rem; flex: 0 0 auto; }
.ds-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--v145-ink-3); pointer-events: none; }
.ds-search { width: 100%; min-height: 44px; padding: .55rem .7rem .55rem 2.3rem;
    border: 1px solid var(--v145-line); border-radius: 12px;
    background: var(--v145-card-2); color: var(--v145-ink); font-size: .9rem; }
.ds-search:focus { outline: 2px solid var(--v145-accent); outline-offset: 1px; }
.ds-search-hint { font-size: .72rem; color: var(--v145-ink-3); margin: .25rem 1rem 0; }

.ds-filtros { display: flex; gap: .4rem; padding: .6rem 1rem .5rem; overflow-x: auto;
    flex: 0 0 auto; scrollbar-width: none; }
.ds-filtros::-webkit-scrollbar { display: none; }
.ds-chip { flex: 0 0 auto; min-height: 40px; padding: 0 .85rem; border-radius: 99px;
    border: 1px solid var(--v145-line); background: var(--v145-card);
    color: var(--v145-ink-2); font-size: .82rem; font-weight: 600; white-space: nowrap; }
/* El filtro activo: verde sólido con texto blanco, como pidió el encargo. */
.ds-chip.is-on { background: var(--v145-accent); border-color: var(--v145-accent); color: #fff; }
.ds-chip:focus-visible { outline: 2px solid var(--v145-accent); outline-offset: 2px; }

.ds-listwrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0 1rem; }
.ds-listhead { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ds-list-title { font-size: .85rem; font-weight: 700; }
.ds-list-sub { flex: 0 0 auto; font-size: .72rem; color: var(--v145-ink-3); margin-bottom: .4rem; }
.ds-linkbtn { min-height: 40px; padding: 0 .4rem; color: var(--v145-accent);
    font-size: .8rem; font-weight: 600; }
/* ⚠️ El scroll es de la LISTA, no de la hoja: si scrollea la hoja, el pie fijo se va. */
/* ⚠️ El scroll es de la LISTA y de nadie más: con tres zonas (cabecera fija, centro
   que se desplaza, pie fijo) no puede haber scroll anidado. */
/* ⚠️ `flex: 1 1 0` y no `1 1 auto`: con auto, el alto del contenido de la lista se
   resiste a encoger y termina empujando al pie fuera de la pantalla cuando sube el
   teclado. Con base 0 la lista cede primero, que es lo correcto — es scrollable. */
.ds-list { flex: 1 1 0; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    display: flex; flex-direction: column; gap: .4rem; padding-bottom: .5rem; }

/* ⛔ flex: 0 0 auto NO es decoración: .ds-list es flex en columna y sin esto las
   tarjetas se APLASTAN para caber, y el nombre se sale por arriba de su propia
   tarjeta. Mismo bug que v107 con el grid del Smart Schedule. */
.ds-card { flex: 0 0 auto; display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left;
    padding: .5rem .6rem; min-height: 64px;
    border: 1px solid var(--v145-line); border-radius: 12px; background: var(--v145-card); }
.ds-card.is-on { background: color-mix(in srgb, var(--v145-accent) 8%, var(--v145-card));
    border-color: var(--v145-accent); }
.ds-card.is-done { opacity: .62; }
.ds-card:focus-visible { outline: 2px solid var(--v145-accent); outline-offset: 2px; }
.ds-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ds-nombre { font-size: .9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-dir { font-size: .76rem; color: var(--v145-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-meta { font-size: .72rem; color: var(--v145-ink-3); display: flex; gap: .3rem; flex-wrap: wrap; }
.ds-badge { align-self: flex-start; margin-top: 3px; font-size: .68rem; font-weight: 700;
    padding: 1px 7px; border-radius: 99px; }
.ds-badge-due { background: color-mix(in srgb, var(--v145-accent) 14%, var(--v145-card));
    color: var(--v145-accent); }
.ds-badge-done { background: var(--v145-card-2); color: var(--v145-ink-3); }
/* El indicador redondo y grande que pedía el encargo, en vez de la casilla cuadrada. */
.ds-check { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 99px;
    border: 2px solid var(--v145-line); display: flex; align-items: center; justify-content: center;
    color: transparent; }
.ds-card.is-on .ds-check { background: var(--v145-accent); border-color: var(--v145-accent); color: #fff; }
.ds-card.is-done .ds-check { background: var(--v145-ink-3); border-color: var(--v145-ink-3); color: #fff; }

.ds-empty { text-align: center; padding: 1.5rem 1rem; }
.ds-empty-icon { display: inline-flex; width: 44px; height: 44px; border-radius: 99px;
    align-items: center; justify-content: center; background: var(--v145-card-2); color: var(--v145-ink-3); }
.ds-empty-title { font-size: .9rem; font-weight: 700; margin-top: .6rem; }
.ds-empty-sub { font-size: .78rem; color: var(--v145-ink-3); margin-top: .25rem; }
.ds-empty-acts { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin-top: .8rem; }
.ds-btn-ghost { min-height: 40px; padding: 0 .9rem; border-radius: 10px;
    border: 1px solid var(--v145-line); background: var(--v145-card);
    color: var(--v145-ink); font-size: .82rem; font-weight: 600; }

/* Dos filas: la cuenta arriba, el botón a todo el ancho abajo. Con una sola fila el
   botón principal se recortaba en 320 px, y eso no se negocia. */
.ds-foot { flex: 0 0 auto; display: grid; grid-template-columns: 1fr auto; gap: .35rem .5rem;
    align-items: center;
    padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom, 0));
    border-top: 1px solid var(--v145-line); background: var(--v145-card); }
.ds-foot-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
/* ⚠️ La cuenta NO parte en dos renglones: en español es más larga que en inglés
   ("2 clientes seleccionados" contra "2 clients selected") y partía empujando la
   línea de abajo. El botón es el que cede ancho. */
.ds-foot-count { font-size: .82rem; font-weight: 700; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
.ds-foot-worker { font-size: .72rem; color: var(--v145-ink-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-confirm { grid-column: 1 / -1; width: 100%; min-height: 44px; padding: 0 .85rem;
    border-radius: 12px; white-space: nowrap;
    background: var(--v145-accent); color: #fff; font-weight: 700; font-size: .88rem; }
.ds-confirm:disabled { background: var(--v145-line); color: var(--v145-ink-3); }

/* ⚠️ Con el teclado arriba quedan ~380 px de alto y no entra todo. Ceden los dos textos
   de ayuda: son secundarios y liberan ~40 px. NO cede el buscador —es a donde el
   usuario acaba de tocar—, ni el título de la lista, ni el pie con el botón. */
@media (max-height: 460px) {
    .ds-search-hint, .ds-list-sub { display: none; }
    .ds-worker { min-height: 48px; margin-bottom: .4rem; }
    .ds-head { padding-top: .35rem; padding-bottom: .3rem; }
    .ds-filtros { padding-top: .4rem; padding-bottom: .35rem; }
}

/* En escritorio deja de ser una hoja y es un modal centrado, con la misma organización. */
/* En tablet y escritorio NO es pantalla completa: modal centrado, con la misma
   organización de tres zonas. */
@media (min-width: 720px) {
    #dayAddSheet { align-items: center; }
    .ds-sheet {
        position: relative; inset: auto;
        width: 100%; max-width: 720px;
        /* ⚠️ Alto FIJO, no auto: con auto no hay sobrante que repartir y la lista,
           que tiene flex-basis 0, colapsaba a cero. */
        height: 88dvh; max-height: 88dvh;
        border-radius: 16px;
        padding-top: 0;
        box-shadow: 0 12px 40px rgba(0,0,0,.2);
    }
}
/* v173 · EL SELECTOR DE TIPO DE TRABAJO. Una tarjeta y una hoja desde abajo. */
/* ⛔ El z-index NO es decoración: la hoja se abre DESDE el creador, que también es
   un .modal a pantalla completa y viene después en el documento. Sin esto la hoja
   existe en el DOM y no se ve — que es exactamente como se vería un bug. */
#jobTypeSheet { z-index: 1100; }
.jw-typebox { display: block; }
.jt-card {
    display: flex; align-items: center; gap: 0.7rem; width: 100%;
    min-height: 60px; padding: 0.6rem 0.7rem; border-radius: 14px;
    background: var(--v145-card); border: 1px solid var(--v145-line); text-align: left;
}
.jt-card:hover { background: var(--v145-card-2); }
.jt-vacio { border-style: dashed; }
.jt-ico {
    flex-shrink: 0; width: 38px; height: 38px; border-radius: 9999px;
    display: inline-flex; align-items: center; justify-content: center;
}
.jt-ico.is-on { background: var(--v145-accent, #16a34a); color: #fff; }
.jt-ico-vacio { background: var(--v145-card-2); color: var(--v145-ink-soft); }
.jt-textos { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.jt-nombre { font-size: 0.95rem; font-weight: 800; color: var(--v145-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jt-desc { font-size: 0.78rem; color: var(--v145-ink-soft);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jt-cambiar { flex-shrink: 0; font-size: 0.85rem; font-weight: 800; color: var(--v145-accent, #16a34a); }
.jt-chev { flex-shrink: 0; color: var(--v145-ink-soft); }
.jt-check { flex-shrink: 0; color: var(--v145-accent, #16a34a); }

/* La hoja. Sube desde abajo y deja ver el fondo oscurecido. */
.jt-sheet {
    display: flex; flex-direction: column; width: 100%; max-width: 560px;
    max-height: 86vh; max-height: 86dvh;
    background: var(--v145-bg); color: var(--v145-ink);
    border-radius: 20px 20px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(14px); transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.modal:not(.opacity-0) .jt-sheet { transform: none; }
@media (min-width: 640px) { .jt-sheet { border-radius: 20px; margin: 1rem; } }
.jt-grip { width: 42px; height: 4px; border-radius: 9999px; background: var(--v145-line);
    margin: 0.55rem auto 0.2rem; flex-shrink: 0; }
.jt-head { display: flex; align-items: flex-start; justify-content: space-between;
    gap: 0.5rem; padding: 0.5rem 1rem 0.2rem; flex-shrink: 0; }
.jt-head-texts { min-width: 0; }
.jt-search-wrap { position: relative; padding: 0.6rem 1rem 0.4rem; flex-shrink: 0; }
.jt-search-ico { position: absolute; left: 1.65rem; top: 50%; transform: translateY(-30%);
    color: var(--v145-ink-soft); pointer-events: none; }
.jt-search-wrap .jw-input { padding-left: 2.3rem; }
.jt-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    display: flex; flex-direction: column; }
.jt-row {
    display: flex; align-items: center; gap: 0.7rem; width: 100%;
    min-height: 62px; padding: 0.5rem 1rem; text-align: left;
    border-bottom: 1px solid var(--v145-line);
}
.jt-row:hover { background: var(--v145-card-2); }
/* En la LISTA la descripción puede usar dos renglones: cortarla a 320 px dejaba
   "Preparación e instalac…", que no dice nada. En la tarjeta compacta sigue en uno. */
.jt-row .jt-desc { white-space: normal; overflow: visible; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* El elegido: fondo verde muy claro, icono verde y su marca. */
.jt-row.is-on { background: color-mix(in srgb, var(--v145-accent, #16a34a) 10%, transparent); }
.jt-empty { padding: 1.2rem 1rem; text-align: center; }
.jt-form { padding: 0.6rem 1rem 0.2rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.5rem; }
.jt-f-activo { align-self: end; min-height: 44px; }
.jt-foot { padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom, 0px)); flex-shrink: 0;
    border-top: 1px solid var(--v145-line); }
.jt-create { width: 100%; border-style: solid; min-height: 48px; border-radius: 14px;
    color: var(--v145-accent, #16a34a); font-weight: 800; }

/* La tarjeta compacta de medidas, y su fila con la unidad integrada. */
.jw-tarjeta { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.6rem;
    border: 1px solid var(--v145-line); border-radius: 14px; background: var(--v145-card); }
.jw-fila { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.jw-fila-lab { flex: 1 1 auto; min-width: 0; font-size: 0.88rem; font-weight: 600;
    color: var(--v145-ink); overflow: hidden; text-overflow: ellipsis; }
.jw-fila-caja { flex: 0 0 auto; display: flex; align-items: stretch; width: 52%; max-width: 230px; min-width: 0; }
.jw-fila-caja .jw-input { flex: 1 1 auto; min-width: 0; text-align: right;
    border-top-right-radius: 0; border-bottom-right-radius: 0; }
.jw-fila-u { flex: 0 0 auto; display: inline-flex; align-items: center; padding: 0 0.5rem;
    border: 1px solid var(--v145-line); border-left: 0; border-radius: 0 10px 10px 0;
    background: var(--v145-card-2); color: var(--v145-ink-soft);
    font-size: 0.76rem; font-weight: 700; white-space: nowrap; }

/* v172 · Tipo y cantidad comparten renglón, como en la referencia. */
.jw-par { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.5rem; }
.jw-par > .jw-field { min-width: 0; }
/* La calculadora de una medida respira un poco más: es la primera que se ve. */
.calc-medida { margin-top: 0.35rem; margin-bottom: 0.2rem; }

/* v171 · La calculadora universal. Verde muy claro, cerrada por defecto. */
.calc-bloque { margin-top: 0.15rem; }
.calc-toggle {
    display: flex; align-items: center; gap: 0.45rem; width: 100%;
    min-height: 40px; padding: 0 0.3rem; border-radius: 10px;
    color: var(--v145-accent, #16a34a); font-size: 0.82rem; font-weight: 800;
}
.calc-toggle .calc-chev { margin-left: auto; transition: transform .18s; }
.calc-toggle[aria-expanded="true"] .calc-chev { transform: rotate(180deg); }
.calc-panel {
    display: flex; flex-direction: column; gap: 0.5rem;
    padding: 0.7rem; border-radius: 12px;
    background: color-mix(in srgb, var(--v145-accent, #16a34a) 8%, transparent);
}
.calc-modos { display: flex; gap: 0.35rem; }
.calc-modo {
    flex: 1 1 0; min-width: 0; min-height: 40px; padding: 0 0.4rem; border-radius: 9px;
    background: var(--v145-bg); border: 1px solid var(--v145-line);
    font-size: 0.76rem; font-weight: 700; color: var(--v145-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.calc-modo.is-active { background: var(--v145-accent, #16a34a); border-color: transparent; color: #fff; }
.calc-en { font-size: 0.76rem; color: var(--v145-ink-soft); }
.calc-en b { color: var(--v145-ink); }
.calc-fila3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
.calc-fila2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }
.calc-campo { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.calc-lab { font-size: 0.68rem; font-weight: 700; color: var(--v145-ink-soft);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* El valor y su unidad comparten una caja: la unidad va DENTRO del campo. */
.calc-wrap { display: flex; min-width: 0; }
.calc-wrap .calc-v { flex: 1 1 auto; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
/* El selector va angosto a propósito: cada píxel que se lleva se lo saca al valor.
   ⛔ La flecha NATIVA no: se comía 18 px y dejaba "pulg" en "pul". Se dibuja una
   propia de 8 px con un degradado, que es lo único que cabe. */
.calc-wrap .calc-u {
    flex: 0 0 auto; width: 54px; min-width: 0; font-size: 0.72rem;
    padding: 0 0.7rem 0 0.3rem;
    border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: right 0.3rem center, right 0.15rem center;
    background-size: 4px 4px, 4px 4px;
    background-repeat: no-repeat;
}
.calc-wrap .calc-v { padding-left: 0.4rem; padding-right: 0.2rem; }
/* Las pestañas no se cortan: si no entran, bajan. */
.calc-modos { flex-wrap: wrap; }
.calc-modo { flex: 1 1 120px; }
/* En teléfonos muy angostos las tres dimensiones pasan a dos columnas. Es la
   adaptación que el diseño permite; cortar un número no lo es. */
@media (max-width: 359px) {
    .calc-fila3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.calc-formula { font-size: 0.76rem; color: var(--v145-ink-soft); padding: 0.35rem 0.45rem;
    background: var(--v145-bg); border-radius: 8px; overflow-wrap: anywhere; }
.calc-res { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.calc-res span { font-size: 0.88rem; font-weight: 700; color: var(--v145-ink); }
.calc-res-val { font-size: 1.15rem; font-weight: 800; color: var(--v145-accent, #16a34a); }
.calc-usar { min-height: 44px; }
.calc-falta { font-size: 0.78rem; color: var(--v145-ink-soft); }
.calc-nota { font-size: 0.7rem; color: var(--v145-ink-soft); text-align: center; }

/* v170 · El alquiler de equipo, compacto: un renglón por equipo. */
.jw-equip-toggle { flex: 1 1 auto; min-width: 0; }
.jw-eq-list { display: flex; flex-direction: column; gap: 0.3rem; }
.jw-eq { border-radius: 12px; }
.jw-eq.is-on { border: 1px solid var(--v145-line); background: var(--v145-card); padding: 0.1rem 0.5rem 0.5rem; }
.jw-eq-row {
    display: flex; align-items: center; gap: 0.55rem;
    min-height: 44px; padding: 0 0.3rem; cursor: pointer;
}
.jw-eq-row input { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--v145-accent, #22c55e); }
.jw-eq-name { flex: 1 1 auto; min-width: 0; font-size: 0.92rem; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jw-eq-tag {
    flex-shrink: 0; padding: 0.1rem 0.4rem; border-radius: 9999px;
    background: var(--v145-card-2); color: var(--v145-ink-soft);
    font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
}
.jw-eq-day { flex-shrink: 0; font-size: 0.78rem; color: var(--v145-ink-soft); }
.jw-eq-total { flex-shrink: 0; font-size: 0.88rem; font-weight: 800; color: var(--v145-ink); }
.jw-eq-body { padding: 0.2rem 0.3rem 0.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.jw-eq-calc { font-size: 0.76rem; color: var(--v145-ink-soft); margin-top: 0.1rem; }
.jw-eq-search { display: block; margin-bottom: 0.4rem; }
.jw-eq-all { align-self: flex-start; margin-top: 0.35rem; min-height: 44px; }

/* v169 · El menú de tres puntos de cada presupuesto. */
.ji-card { position: relative; }
.ji-kebab {
    position: absolute; top: 4px; right: 4px; z-index: 2;
    width: 40px; height: 40px; border-radius: 9999px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--v145-ink-soft);
}
.ji-kebab:hover { background: var(--v145-card-2); color: var(--v145-ink); }
/* Se deja lugar para que el nombre del cliente no pase por debajo del botón. */
.ji-card .ji-card-top { padding-right: 40px; }
.ji-menu {
    position: fixed; z-index: 1200; min-width: 208px; padding: 0.35rem;
    background: var(--v145-card); border: 1px solid var(--v145-line);
    border-radius: 14px; box-shadow: 0 12px 32px rgba(0,0,0,.28);
}
.ji-menu-item {
    display: flex; align-items: center; gap: 0.6rem; width: 100%;
    min-height: 44px; padding: 0 0.6rem; border-radius: 10px;
    font-size: 0.9rem; font-weight: 600; color: var(--v145-ink); text-align: left;
}
.ji-menu-item:hover { background: var(--v145-card-2); }
.ji-menu-item.is-danger { color: var(--v145-danger); }
.dv-edit { width: 100%; margin-bottom: 0.5rem; border-style: solid; }

/* v168 · EN EL TELÉFONO CADA CONCEPTO ES UNA TARJETA DE TRES RENGLONES.
   1) la descripción sola, con mover y eliminar;  2) cantidad, unidad y precio en UNA
   línea;  3) el importe calculado. Antes los cinco campos se repartían en una rejilla
   de dos columnas y no se entendía qué número era cuál. */
.li-row {
    display: flex; flex-direction: column; gap: 0.45rem;
    padding: 0.7rem 0.7rem 0.6rem;
    border: 1px solid var(--v145-line); border-radius: 14px;
    background: var(--v145-card);
}
.li-c { display: flex; min-width: 0; }

/* Renglón 1 */
.li-top { display: flex; align-items: center; gap: 0.35rem; min-width: 0; }
.li-move { display: flex; flex-direction: column; flex-shrink: 0; }
.li-move .li-icon { height: 24px; width: 34px; }
.li-c-desc { flex: 1 1 auto; min-width: 0; }
.li-c-desc .jw-input { font-weight: 700; }

/* Renglón 2. Las proporciones dejan al precio el espacio que necesita para verse entero. */
.li-nums { display: grid; grid-template-columns: 20% 26% minmax(0, 1fr); gap: 0.4rem; min-width: 0; }
.li-nums .li-c { flex-direction: column; align-items: stretch; gap: 0.15rem; }
.li-lab {
    font-size: 0.68rem; font-weight: 700; letter-spacing: .02em;
    color: var(--v145-ink-soft); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
/* El signo de peso se ancla AL CAMPO, no a la caja entera: la caja lleva la etiqueta
   arriba, así que centrarlo en ella lo dejaba flotando entre el rótulo y el input. */
.li-nums .li-money > i {
    top: auto; bottom: 0; height: 44px; transform: none;
    display: flex; align-items: center;
}

/* Renglón 3 */
.li-amt {
    display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem;
    padding-top: 0.35rem; border-top: 1px solid var(--v145-line);
}
.li-amt-lab { font-size: 0.74rem; font-weight: 700; color: var(--v145-ink-soft); }
.li-amt-val { font-size: 1rem; font-weight: 800; color: var(--v145-ink); }

/* ── ESCRITORIO: la tabla de seis columnas, igual que antes ──
   Los tres envoltorios se vuelven `display: contents`, así que sus hijos siguen siendo
   celdas de la MISMA rejilla y las columnas se alinean con .li-colhead. */
/* La hoja se ensancha justo donde aparece la tabla: con 640 px las cinco columnas
   fijas dejaban la descripción en ~130 px y cortaba el texto. */
@media (min-width: 1000px) { #jobWizardModal .jw-sheet { max-width: 880px; } }

@media (min-width: 1000px) {
    .li-rows { gap: 0; }
    .li-row {
        display: grid; align-items: center; gap: 0.4rem;
        grid-template-columns: minmax(0, 1fr) 78px 92px 96px 90px 84px;
        padding: 0.6rem 0.2rem; border: 0; border-radius: 0;
        border-bottom: 1px solid var(--v145-line); background: transparent;
    }
    .li-top, .li-nums { display: contents; }
    /* ⚠️ El `grid-row: 1` NO es decoración. Sin él la colocación automática avanza el
       cursor y, como .li-move (columna 6) va primero en el HTML, la descripción se caía
       a la fila 2 y la tabla se desarmaba en tres renglones. */
    .li-c-desc { grid-column: 1; grid-row: 1; }
    .li-c-qty { grid-column: 2; grid-row: 1; }
    .li-c-unit { grid-column: 3; grid-row: 1; }
    .li-c-price { grid-column: 4; grid-row: 1; }
    .li-amt { grid-column: 5; grid-row: 1; justify-content: flex-end; padding-top: 0; border-top: 0; }
    /* Mover y eliminar comparten la última celda: uno pegado a cada borde. */
    .li-move { grid-column: 6; grid-row: 1; flex-direction: row; justify-self: start; }
    .li-move .li-icon { height: 44px; width: 26px; }
    .li-del { grid-column: 6; grid-row: 1; justify-self: end; }
    .li-nums .li-c { flex-direction: row; align-items: center; }
    /* Los rótulos ya están en la cabecera de la tabla: repetirlos sería ruido. */
    .li-lab, .li-amt-lab { display: none; }
    .li-nums .li-money > i { top: 50%; bottom: auto; transform: translateY(-50%); }
}
.li-c .jw-input { width: 100%; min-height: 44px; }
.li-money { position: relative; }
.li-money > i {
    position: absolute; left: 0.5rem; top: 50%; transform: translateY(-50%);
    font-style: normal; color: var(--v145-ink-soft); font-size: 0.85rem; pointer-events: none;
}
.li-money .jw-input { padding-left: 1.4rem; }
.li-icon {
    width: 30px; height: 44px; border-radius: 8px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--v145-ink-soft);
}
.li-icon:hover { background: var(--v145-card-2); color: var(--v145-ink); }
.li-icon:disabled { opacity: .3; }
.li-del:hover { color: var(--v145-danger); }

.li-actions { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
/* Las tres acciones del PDF, sobre los botones principales.
   ⛔ NO reponer text-overflow: ellipsis acá. Con la etiqueta en una sola línea, a 390 px
   se leía "Vista pr..." / "Descar..." / "Compa...", y el aserto no lo veía porque con
   puntos suspensivos el texto SIEMPRE "cabe". Mismo trato que .dv-actions. */
.jw-pdf-row {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem; margin-bottom: 0.5rem;
}
/* v166 · La ventana de un documento guardado. */
.dv-head-texts { min-width: 0; }
/* Los tres caben enteros: icono arriba, etiqueta debajo y con permiso de partirse en
   dos renglones. Con la etiqueta en una sola línea y puntos suspensivos, a 390 px se
   leía "Vista pr..." / "Descar..." / "Compa...". NO reponer el text-overflow. */
.dv-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: 0.5rem; }
.dv-actions .jw-ghost {
    flex-direction: column; gap: 0.25rem; min-width: 0; border-style: solid;
    padding: 0.45rem 0.3rem; font-size: 0.72rem; line-height: 1.15; text-align: center;
}
.dv-actions .jw-ghost span { white-space: normal; overflow-wrap: anywhere; }
.dv-lines { display: flex; flex-direction: column; margin-bottom: 0.8rem; }
.dv-line {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0.5rem;
    align-items: baseline; padding: 0.45rem 0; border-bottom: 1px solid var(--v145-line);
}
.dv-line-desc { font-weight: 600; font-size: 0.88rem; min-width: 0; overflow-wrap: anywhere; }
.dv-line-qty { font-size: 0.78rem; color: var(--v145-ink-soft); white-space: nowrap; }
.dv-line-amt { font-weight: 800; font-size: 0.9rem; white-space: nowrap; }
.dv-note { font-size: 0.85rem; color: var(--v145-ink); margin-bottom: 0.6rem; overflow-wrap: anywhere; }

.jw-pdf-row .jw-ghost {
    flex-direction: column; gap: 0.25rem; min-width: 0; border-style: solid;
    padding: 0.45rem 0.3rem; font-size: 0.72rem; line-height: 1.15; text-align: center;
}
.jw-pdf-row .jw-ghost span { white-space: normal; overflow-wrap: anywhere; }
.li-cat-btn { flex: 1 1 auto; border-style: solid; }
.li-note { margin-top: 0.8rem; }

/* v167 · La tarjeta del logo. La vista previa usa contain: el logo entra ENTERO,
   nunca recortado por cover ni deformado. */
.biz-logo { background-size: contain; background-repeat: no-repeat; background-position: center; }
.biz-logo.is-empty { display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.6rem; color: var(--v145-ink-soft); }
.biz-logo-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.4rem; }
.biz-logo-btns .jw-ghost { flex: 1 1 auto; min-width: 104px; border-style: solid; }

/* v167 · Los campos nuevos de Información para facturas. */
.biz-color-field { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.biz-color { width: 56px; min-width: 56px; height: 40px; padding: 2px; cursor: pointer; }
.biz-check { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; cursor: pointer; }
.biz-check input { width: 20px; height: 20px; accent-color: var(--v145-accent, #22c55e); }
.biz-check span { font-size: 0.88rem; font-weight: 600; color: var(--v145-ink); }
.li-sum-eyebrow { margin-top: 1rem; }

/* ── El selector del catálogo ── */
.cp-list { display: flex; flex-direction: column; }
.cp-row {
    display: flex; align-items: center; gap: 0.6rem; min-height: 56px;
    padding: 0.5rem 0.2rem; border-bottom: 1px solid var(--v145-line); cursor: pointer;
}
.cp-row.is-on { background: var(--v145-accent-soft); }
.cp-row input[type="checkbox"] { width: 22px; height: 22px; flex-shrink: 0; }
.cp-texts { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.cp-price { flex-shrink: 0; font-weight: 800; font-size: 0.9rem; color: var(--v145-ink); }
.cp-price > i { font-style: normal; font-weight: 600; font-size: 0.72rem; color: var(--v145-ink-soft); }

/* ══════════════════════════════════════════════════════════════════════════
   v163 — EL CATÁLOGO CON EL FORMATO DE LA REFERENCIA (imagen 02)
   Distintivo · nombre · descripción · unidad · mi costo · precio · ganancia y margen.
   ══════════════════════════════════════════════════════════════════════════ */
.pc-sheet { max-height: 92vh; }
.pc-head { align-items: flex-start; }
.pc-head-texts { min-width: 0; }
.pc-tools {
    display: flex; flex-direction: column; gap: 0.5rem; flex-shrink: 0;
    padding: 0 1rem 0.6rem;
}
.pc-filters { display: flex; gap: 0.35rem; overflow-x: auto; padding-bottom: 0.15rem; scrollbar-width: none; }
.pc-filters::-webkit-scrollbar { display: none; }
.pc-filter {
    flex-shrink: 0; min-height: 36px; padding: 0.3rem 0.7rem; border-radius: 9999px;
    background: var(--v145-card-2); border: 1px solid var(--v145-line);
    color: var(--v145-ink-soft); font-size: 0.78rem; font-weight: 700; white-space: nowrap;
}
.pc-filter.is-on { background: var(--v145-accent); color: var(--v145-accent-ink); border-color: transparent; }

/* Los encabezados de columna que pidió el encargo. En móvil sobran: las filas se apilan. */
.pc-colhead { display: none; }
@media (min-width: 700px) {
    .pc-colhead {
        display: grid; grid-template-columns: 1fr 110px 120px 140px;
        gap: 0.5rem; padding: 0 0.6rem 0.4rem;
        font-size: 0.68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
        color: var(--v145-ink-soft);
    }
}
.pc-body { display: flex; flex-direction: column; min-height: 0; }
.pc-list { display: flex; flex-direction: column; }

.pc-row {
    display: grid; gap: 0.4rem 0.5rem; align-items: center;
    grid-template-columns: 1fr;
    padding: 0.7rem 0.6rem;
    border-bottom: 1px solid var(--v145-line);
}
.pc-row.is-off { opacity: .5; }
/* Lo editado y sin guardar se ve: el botón "Guardar precios" es lo que lo confirma. */
.pc-row.is-dirty { background: var(--v145-accent-soft); }
.pc-main { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.pc-badge {
    width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 0.66rem; font-weight: 800; letter-spacing: .03em;
}
.pc-texts { min-width: 0; flex: 1 1 auto; }
.pc-name {
    width: 100%; background: transparent; border: 0; padding: 0;
    font-weight: 700; font-size: 0.92rem; color: var(--v145-ink);
    overflow: hidden; text-overflow: ellipsis;
}
.pc-name:focus { outline: 2px solid var(--v145-accent); outline-offset: 2px; border-radius: 4px; }
.pc-desc {
    font-size: 0.75rem; color: var(--v145-ink-soft);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pc-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
.pc-f { position: relative; display: flex; min-width: 0; }
.pc-f .jw-input { width: 100%; min-height: 44px; }
.pc-money > i {
    position: absolute; left: 0.55rem; top: 50%; transform: translateY(-50%);
    font-style: normal; color: var(--v145-ink-soft); font-size: 0.85rem; pointer-events: none;
}
.pc-money .jw-input { padding-left: 1.5rem; }
/* La ganancia en verde y el margen al lado, como en la referencia. */
.pc-profit { display: flex; align-items: baseline; gap: 0.45rem; min-height: 1.2rem; }
.pc-profit strong { font-size: 1rem; font-weight: 800; color: var(--v145-accent); }
.pc-profit span { font-size: 0.75rem; color: var(--v145-ink-soft); }
.pc-row-foot { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; }

@media (min-width: 700px) {
    .pc-row { grid-template-columns: 1fr 110px 120px 140px; grid-template-areas: 'main unit cost price' 'foot profit profit profit'; }
    .pc-main { grid-area: main; }
    .pc-fields { display: contents; }
    .pc-profit { grid-area: profit; justify-content: flex-end; }
    .pc-row-foot { grid-area: foot; }
}

.pc-foot { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.pc-foot .jw-primary { margin-left: auto; }
/* En el catálogo, "Agregar material" es una acción de verdad: borde sólido, no punteado.
   El punteado se lee como "esto todavía no está". */
.pc-foot .jw-ghost { border-style: solid; }

/* Con cambios sin guardar, el botón lo dice. */
.pc-foot .jw-primary.is-dirty { animation: pc-pulse 1.6s ease-in-out infinite; }
@keyframes pc-pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.12); } }
@media (prefers-reduced-motion: reduce) { .pc-foot .jw-primary.is-dirty { animation: none; } }

.pc-tax { margin-top: 0.8rem; border-top: 1px solid var(--v145-line); padding-top: 0.6rem; }
.pc-tax > summary {
    cursor: pointer; min-height: 44px; display: flex; align-items: center;
    font-size: 0.85rem; font-weight: 800; color: var(--v145-ink);
}

/* El aviso del impuesto informa, no manda: una línea, no un bloque que se coma la lista. */
.pc-warn {
    margin: 0 1rem 0.5rem; padding: 0.4rem 0.6rem; border-radius: 8px;
    font-size: 0.72rem; line-height: 1.3;
    background: rgba(217, 119, 6, .12); color: var(--v145-amber);
}
.ji-ghost-btn {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
    min-height: 44px; padding: 0.5rem 0.8rem; border-radius: 12px;
    background: var(--v145-card); border: 1px solid var(--v145-line);
    color: var(--v145-ink); font-size: 0.82rem; font-weight: 700; white-space: nowrap;
}
.ji-ghost-btn:hover { background: var(--v145-card-2); }

/* ══════════════════════════════════════════════════════════════════════════
   v157 — LA VENTANA DE "NUEVO TRABAJO"
   Hoja que sube desde abajo en teléfono y ventana centrada en pantalla grande.
   ══════════════════════════════════════════════════════════════════════════ */
.jw-sheet {
    display: flex; flex-direction: column;
    width: 100%; max-width: 640px; max-height: 92vh; max-height: 92dvh;
    background: var(--v145-bg); color: var(--v145-ink);
    border-radius: 20px 20px 0 0;
    transform: translateY(12px); transition: transform .28s cubic-bezier(.4,0,.2,1);
}
@media (min-width: 640px) { .jw-sheet { border-radius: 20px; margin: 1rem; } }

/* v168 · EL CREADOR OCUPA LA PANTALLA ENTERA EN EL TELÉFONO.
   Antes era una hoja de 92dvh pegada abajo: quedaba una franja arriba por la que se
   veía el encabezado de "Trabajos y facturas", y el formulario más largo de la
   aplicación empezaba con un hueco. Solo el creador: las demás ventanas siguen siendo
   hojas, que es lo correcto para su tamaño. */
@media (max-width: 767px) {
    #jobWizardModal { align-items: stretch; }
    #jobWizardModal .jw-sheet {
        max-width: none; width: 100%; border-radius: 0;
        height: 100vh;
        /* dvh es lo que descuenta la barra del navegador móvil cuando aparece o se va.
           vh queda arriba como respaldo para quien no lo entienda. */
        height: 100dvh;
        max-height: none;
        padding-top: env(safe-area-inset-top, 0px);
    }
}

/* Mientras el creador está abierto, el fondo no se desplaza: si no, se arrastra la
   lista de atrás en vez del formulario. */
body.jw-abierto { overflow: hidden; }
.modal:not(.opacity-0) .jw-sheet { transform: none; }

.jw-head {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0.9rem 1rem; flex-shrink: 0;
    border-bottom: 1px solid var(--v145-line);
}
.jw-head-texts { min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.jw-title { font-size: 1.05rem; font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jw-head-meta { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.jw-head-num { font-size: 0.78rem; font-weight: 700; color: var(--v145-ink-soft); }

/* Los dos botones del pie: el principal pesa más, pero los dos se tocan igual de bien. */
.jw-foot-btns { display: flex; gap: 0.5rem; }
.jw-foot-btns > * { flex: 1 1 0; min-width: 0; }
.jw-foot-btns .jw-ghost { border-style: solid; min-height: 48px; border-radius: 14px; font-weight: 800; }
.jw-close {
    width: 44px; height: 44px; border-radius: 9999px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--v145-ink-soft);
}
.jw-close:hover { background: var(--v145-card-2); }

/* ⛔ El cuerpo es el ÚNICO que se desplaza, y min-height: 0 es lo que se lo permite
   dentro de una columna flexible. Sin eso la ventana crece y no hay scroll. */
.jw-body {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 0.9rem 1rem 1.2rem;
    display: flex; flex-direction: column; gap: 1rem;
}
.jw-sec { flex-shrink: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.jw-sec-title {
    font-size: 0.78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    color: var(--v145-ink-soft);
}
.jw-label { font-size: 0.8rem; font-weight: 600; color: var(--v145-ink-soft); }
.jw-input {
    width: 100%; min-height: 44px; padding: 0.5rem 0.7rem; border-radius: 12px;
    background: var(--v145-card); border: 1px solid var(--v145-line);
    color: var(--v145-ink); font-size: 0.92rem;
}
.jw-input:focus { outline: 2px solid var(--v145-accent); outline-offset: -1px; }
.jw-field { display: flex; flex-direction: column; gap: 0.25rem; position: relative; }
.jw-suffix { position: absolute; right: 0.7rem; bottom: 0.7rem; font-size: 0.8rem; color: var(--v145-ink-soft); }
.jw-fields { display: flex; flex-direction: column; gap: 0.6rem; }
.jw-hint { font-size: 0.75rem; color: var(--v145-ink-soft); }
.jw-help { font-size: 0.72rem; color: var(--v145-ink-soft); }

.jw-search-wrap { position: relative; }
.jw-results {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5;
    max-height: 240px; overflow-y: auto;
    background: var(--v145-card); border: 1px solid var(--v145-line);
    border-radius: 12px; box-shadow: 0 10px 24px -12px rgba(0,0,0,.4);
}
.jw-result {
    display: flex; flex-direction: column; gap: 0.1rem; width: 100%; text-align: left;
    min-height: 44px; padding: 0.5rem 0.7rem;
}
.jw-result:hover, .jw-result:focus-visible { background: var(--v145-card-2); }
.jw-result-name { font-weight: 700; font-size: 0.9rem; }
.jw-result-addr { font-size: 0.76rem; color: var(--v145-ink-soft); }

.jw-client {
    display: flex; flex-direction: column; gap: 0.1rem;
    padding: 0.7rem 0.8rem; border-radius: 14px;
    background: var(--v145-card); border: 1px solid var(--v145-line);
}
.jw-client-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-width: 0; }
.jw-client-name { font-weight: 800; font-size: 0.95rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jw-client-line { font-size: 0.8rem; color: var(--v145-ink-soft); overflow-wrap: anywhere; }
.jw-client-id { font-size: 0.72rem; color: var(--v145-ink-soft); }
.jw-linkbtn { min-height: 40px; padding: 0 0.4rem; font-size: 0.8rem; font-weight: 700; color: var(--v145-accent); flex-shrink: 0; }

.jw-ghost {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
    min-height: 44px; padding: 0.5rem 0.8rem; border-radius: 12px;
    background: transparent; border: 1px dashed var(--v145-line);
    color: var(--v145-ink); font-size: 0.85rem; font-weight: 700;
}
.jw-ghost:hover { background: var(--v145-card-2); }

.jw-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }
.jw-type {
    min-height: 44px; padding: 0.45rem 0.5rem; border-radius: 12px;
    background: var(--v145-card); border: 1px solid var(--v145-line);
    color: var(--v145-ink); font-size: 0.82rem; font-weight: 700;
    overflow: hidden; text-overflow: ellipsis;
}
.jw-type.is-active { background: var(--v145-accent); color: var(--v145-accent-ink); border-color: transparent; }

.jw-checks { display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; }
.jw-check { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 40px; font-size: 0.85rem; cursor: pointer; }
.jw-check input { width: 20px; height: 20px; accent-color: var(--v145-accent); flex-shrink: 0; }

.jw-extra { display: flex; flex-direction: column; gap: 0.5rem; }
.jw-extra-row {
    display: flex; flex-direction: column; gap: 0.35rem;
    padding: 0.6rem; border-radius: 12px;
    background: var(--v145-card-2); border: 1px solid var(--v145-line);
}
.jw-extra-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem; }
@media (min-width: 480px) { .jw-extra-nums { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.jw-extra-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }

.jw-items { display: flex; flex-direction: column; gap: 0.3rem; }
.jw-item { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.86rem; min-width: 0; }
.jw-item-desc { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jw-item-qty { font-size: 0.76rem; color: var(--v145-ink-soft); white-space: nowrap; }
.jw-item-amt { font-weight: 700; white-space: nowrap; }

.jw-totals {
    display: flex; flex-direction: column; gap: 0.2rem;
    padding: 0.7rem 0.8rem; border-radius: 14px; margin-top: 0.5rem;
    background: var(--v145-card); border: 1px solid var(--v145-line);
}
.jw-tot-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; font-size: 0.86rem; }
.jw-tot-row dt { color: var(--v145-ink-soft); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jw-tot-row dd { font-weight: 700; white-space: nowrap; }
.jw-tot-row.is-total { font-size: 1.02rem; padding-top: 0.35rem; margin-top: 0.25rem; border-top: 1px solid var(--v145-line); }
.jw-tot-row.is-total dt, .jw-tot-row.is-total dd { color: var(--v145-ink); font-weight: 800; }
/* Lo privado se marca: es lo que el cliente NUNCA debe ver en un documento. */
/* v184 · Sin emoji: el candado es un icono del sistema, dibujado por Lucide. */
.jw-tot-row.is-private dt { display: flex; align-items: center; gap: .35rem; }
.jw-tot-row.is-private dd { color: var(--v145-accent); }
.jw-private { font-size: 0.72rem; color: var(--v145-ink-soft); margin-top: 0.35rem; }

.jw-foot {
    flex-shrink: 0; padding: 0.8rem 1rem calc(0.8rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--v145-line); background: var(--v145-bg);
}
/* Con un icono al lado, el botón tiene que alinear: si no, el check se va arriba a la
   izquierda y parece un error de dibujo. */
.jw-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
    width: 100%; min-height: 48px; border-radius: 14px;
    background: var(--v145-accent); color: var(--v145-accent-ink);
    font-size: 0.95rem; font-weight: 800;
}
.jw-primary:disabled { opacity: .6; }
.jw-error { font-size: 0.8rem; color: var(--v145-danger); margin-bottom: 0.5rem; }

@media (prefers-reduced-motion: reduce) { .jw-sheet { transition: none !important; } }

/* ══════════════════════════════════════════════════════════════════════════
   v156 — TRABAJOS Y FACTURAS
   Mismos tokens --v145-* que el resto del rediseño: sin colores sueltos, y los dos
   temas salen gratis.
   ══════════════════════════════════════════════════════════════════════════ */
.ji-screen {
    display: flex; flex-direction: column;
    height: 100%; min-height: 0;
    overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* ⛔ El relleno sale de la altura REAL de la navegación más la franja segura, como en
       el Calendario: sin esto la última tarjeta queda debajo de la barra. */
    padding: 0.75rem 0.875rem calc(var(--v143-nav-h, 64px) + env(safe-area-inset-bottom, 0px) + 24px);
    /* v175 · 12 px entre la barra y la tarjeta que sigue. */
    gap: 0.75rem;
}
/* v175 · `.ji-toolbar` era la barra de v156: pestañas y botón principal compartiendo
   fila. v174 la reemplazó por la tarjeta contextual y el contenedor dejó de existir en el
   marcado; sus reglas quedaban vivas y mandaban sobre `.ji-tabs`. Se borran en vez de
   taparse. */

/* ══ v175 · LA BARRA SEGMENTADA ═══════════════════════════════════════════════
   Una sola caja con tres segmentos del mismo alto. La activa se resalta SUAVE: verde
   muy claro con texto y borde verdes, nunca el verde sólido de marca —ese es el del
   botón principal, y usarlo acá hacía que la pestaña compitiera con la acción. */
.ji-tabs {
    display: flex; min-width: 0; gap: 0.15rem;
    /* Gris verdosísimo: el gris de tarjeta secundaria con un toque del verde de marca. */
    background: var(--v145-card-2);
    background: color-mix(in srgb, var(--v145-accent) 4%, var(--v145-card-2));
    border: 1px solid var(--v145-line-soft);
    border-radius: 13px; padding: 3px;
}
.ji-tab {
    display: flex; align-items: center; justify-content: center; gap: 0.2rem;
    flex: 1 1 0; min-width: 0;
    /* 40 + 3 + 3 de relleno del contenedor + 2 de borde = 48 px de barra. Los 40 son el
       piso tactil del proyecto, que v156 y v174 vigilan: la barra se ajusta a el. */
    min-height: 40px; padding: 0.2rem; border-radius: 10px;
    font-size: 0.8rem; font-weight: 600; color: var(--v145-ink-soft);
    background: transparent; border: 1px solid transparent;
    white-space: nowrap;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.ji-tab > span { overflow: hidden; text-overflow: ellipsis; }
.ji-tab-ico { width: 15px; height: 15px; flex-shrink: 0; }
.ji-tab:hover:not(.is-active) { color: var(--v145-ink); }
.ji-tab.is-active {
    background: var(--v145-accent-soft);
    color: var(--v145-accent);
    border-color: color-mix(in srgb, var(--v145-accent) 26%, transparent);
    font-weight: 700;
}
/* El foco tiene que verse: se navega con flechas y con tabulador. */
.ji-tab:focus-visible { outline: 2px solid var(--v145-accent); outline-offset: -2px; }

.ji-newjob-btn {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
    min-height: 44px; padding: 0.5rem 0.9rem; border-radius: 12px;
    background: var(--v145-accent); color: var(--v145-accent-ink);
    font-size: 0.88rem; font-weight: 700; white-space: nowrap;
    transition: transform .12s ease, filter .18s ease;
}
.ji-newjob-btn:active { transform: scale(0.97); }
.ji-newjob-btn:hover { filter: brightness(1.05); }
#dashboard-quick-actions .ji-newjob-btn { width: 100%; }

.ji-search-row { position: relative; flex-shrink: 0; }
.ji-search-icon {
    position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%);
    color: var(--v145-ink-soft); pointer-events: none;
}
.ji-search {
    width: 100%; min-height: 44px; padding: 0.5rem 0.7rem 0.5rem 2.1rem; border-radius: 12px;
    background: var(--v145-card); border: 1px solid var(--v145-line);
    color: var(--v145-ink); font-size: 0.9rem;
}
.ji-search:focus { outline: 2px solid var(--v145-accent); outline-offset: -1px; }
.ji-count { font-size: 0.75rem; color: var(--v145-ink-soft); flex-shrink: 0; }

/* ══ v174 · LA TARJETA CONTEXTUAL ════════════════════════════════════════════
   Una sola tarjeta arriba que cambia entera con la pestaña. El botón principal vive
   ACÁ y en ningún otro lado: el estado vacío ya no lo repite. */
/* ⛔ Los hijos directos de .ji-screen NO pueden encogerse: si ceden alto, el
   contenido se comprime en vez de desplazarse, que es el bug que v107 dejó
   documentado para el Smart Schedule y que v156 vigila con un aserto propio.
   #ji-tabs pasó a ser hijo directo en v174 y se había quedado sin la regla. */
.ji-screen > #ji-tabs, .ji-screen > .ji-find, .ji-screen > #ji-chips,
.ji-screen > #ji-ready, .ji-screen > .ji-hero { flex-shrink: 0; }
/* v176 · El selector de idioma del PDF, en la ventana del documento. */
.dv-langrow { display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem; margin-bottom: 0.5rem; }
.dv-langlbl { font-size: 0.8rem; color: var(--v145-ink-soft); }
.dv-langbtns { display: flex; gap: 2px; padding: 3px; border-radius: 10px;
    background: var(--v145-card-2); border: 1px solid var(--v145-line-soft); }
.dv-lang { min-width: 44px; min-height: 40px; border-radius: 8px;
    font-size: 0.78rem; font-weight: 700; color: var(--v145-ink-soft); background: transparent;
    transition: background-color .18s ease, color .18s ease; }
.dv-lang.is-on { background: var(--v145-accent-soft); color: var(--v145-accent); }
.dv-lang:focus-visible { outline: 2px solid var(--v145-accent); outline-offset: -2px; }
.dv-langnote { font-size: 0.72rem; color: var(--v145-ink-soft); margin-bottom: 0.5rem; }

.ji-hero {
    display: flex; flex-direction: column; gap: 0.7rem; flex-shrink: 0;
    background: var(--v145-card); border: 1px solid var(--v145-line);
    border-radius: 16px; padding: 0.85rem;
}
.ji-hero-row { display: flex; align-items: flex-start; gap: 0.7rem; }
.ji-hero-icon {
    flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px;
    display: grid; place-items: center;
    background: var(--v145-accent-soft); color: var(--v145-accent);
}
.ji-hero-txt { flex: 1 1 auto; min-width: 0; }
/* El enlace del catálogo comparte renglón con el TÍTULO, no con la descripción: así
   la descripción usa el ancho entero y el título no se parte en dos. */
.ji-hero-trow { display: flex; align-items: flex-start; justify-content: space-between;
    gap: 0.5rem; min-width: 0; }
.ji-hero-trow .ji-hero-t { min-width: 0; }
.ji-hero-t { font-size: 0.97rem; font-weight: 800; color: var(--v145-ink); line-height: 1.2; }
.ji-hero-s { font-size: 0.8rem; color: var(--v145-ink-soft); line-height: 1.3; margin-top: 0.1rem; }
/* "Catálogo y precios" es una acción CHICA: no se lleva una fila propia ni compite con
   el botón principal. En teléfono baja debajo del texto para no apretar el título. */
.ji-hero-link {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.3rem;
    min-height: 40px; padding: 0.2rem 0.35rem; border-radius: 10px;
    font-size: 0.73rem; font-weight: 700; color: var(--v145-accent); background: transparent;
}
.ji-hero-link:hover { background: var(--v145-accent-soft); }
@media (max-width: 360px) {
    /* A 320 px el título y el enlace no entran juntos: el enlace baja, pegado a la
       izquierda del bloque de texto. */
    .ji-hero-trow { flex-wrap: wrap; }
    .ji-hero-link { padding-left: 0; }
}
.ji-hero .ji-newjob-btn { width: 100%; justify-content: center; }

/* ══ Buscar y filtrar, en la misma fila ═══════════════════════════════════════ */
.ji-find { display: flex; align-items: stretch; gap: 0.5rem; flex-shrink: 0; }
.ji-find .ji-search-row { flex: 1 1 auto; min-width: 0; }
/* Con el botón de filtros al lado, el marcador de posición completo no entra a 390 px a
   tamaño normal. Un punto menos y entra sin recortar. */
.ji-find .ji-search { font-size: 0.85rem; }
.ji-filter-btn {
    flex-shrink: 0; width: 46px; min-height: 44px; border-radius: 12px;
    display: grid; place-items: center;
    background: var(--v145-card); border: 1px solid var(--v145-line); color: var(--v145-ink-soft);
}
.ji-filter-btn:hover { background: var(--v145-card-2); }
.ji-filter-btn.is-on { background: var(--v145-accent-soft); color: var(--v145-accent);
    border-color: var(--v145-accent); }

/* ══ Los chips de filtro ══════════════════════════════════════════════════════
   ⛔ El desplazamiento es SUYO, no de la pantalla: sin overflow-x propio, arrastrar los
   chips en el teléfono mueve el módulo entero. Los márgenes negativos hacen que el
   primero y el último toquen el borde, como en el diseño aprobado. */
.ji-chips {
    display: flex; gap: 0.4rem; flex-shrink: 0;
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0.1rem 0 0.3rem;
}
.ji-chips::-webkit-scrollbar { display: none; }
.ji-chip-f {
    flex: 0 0 auto; min-height: 40px; padding: 0.3rem 0.8rem; border-radius: 9999px;
    font-size: 0.78rem; font-weight: 700; white-space: nowrap;
    background: var(--v145-card); border: 1px solid var(--v145-line); color: var(--v145-ink-soft);
}
.ji-chip-f.is-on { background: var(--v145-accent); border-color: var(--v145-accent);
    color: var(--v145-accent-ink); }
.ji-chip-f .ji-chip-n { opacity: .75; margin-left: 0.25rem; font-weight: 600; }

/* ══ El aviso de trabajos listos para facturar ════════════════════════════════ */
.ji-ready {
    display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0;
    background: rgba(217, 119, 6, .12); border: 1px solid rgba(217, 119, 6, .3);
    border-radius: 14px; padding: 0.6rem 0.7rem;
}
.ji-ready-icon { flex-shrink: 0; color: var(--v145-amber); display: grid; place-items: center; }
.ji-ready-txt { flex: 1 1 auto; min-width: 0; }
.ji-ready-t { font-size: 0.85rem; font-weight: 800; color: var(--v145-ink); }
.ji-ready-s { font-size: 0.76rem; color: var(--v145-ink-soft); }
.ji-ready-btn {
    flex-shrink: 0; min-height: 40px; padding: 0.3rem 0.7rem; border-radius: 10px;
    font-size: 0.78rem; font-weight: 800;
    background: var(--v145-amber); color: #fff; white-space: nowrap;
}

/* ══ Las explicaciones del estado vacío ═══════════════════════════════════════ */
.ji-empty-t { font-size: 1.05rem; font-weight: 800; color: var(--v145-ink); }
.ji-empty-s { font-size: 0.85rem; color: var(--v145-ink-soft); line-height: 1.35; max-width: 34ch; }
.ji-hints { display: flex; flex-direction: column; gap: 0.7rem; width: 100%;
    margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--v145-line); }
.ji-hint { display: flex; align-items: flex-start; gap: 0.7rem; text-align: left; }
.ji-hint-icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 12px;
    display: grid; place-items: center;
    background: var(--v145-accent-soft); color: var(--v145-accent); }
.ji-hint-t { display: block; font-size: 0.85rem; font-weight: 700; color: var(--v145-ink); }
.ji-hint-s { display: block; font-size: 0.78rem; color: var(--v145-ink-soft); line-height: 1.3; }

/* ══ La hoja de "de dónde nace" ═══════════════════════════════════════════════
   ⛔ Mismo motivo que #jobTypeSheet: se abre sobre la pantalla del módulo y compite con
   los otros .modal del documento. Sin z-index estaría en el DOM y no se vería. */
#jiNewSheet { z-index: 1100; }
.ji-src { display: flex; align-items: flex-start; gap: 0.7rem; width: 100%;
    padding: 0.8rem 1rem; text-align: left; border-bottom: 1px solid var(--v145-line); }
.ji-src:hover { background: var(--v145-card-2); }
.ji-src-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px;
    display: grid; place-items: center;
    background: var(--v145-accent-soft); color: var(--v145-accent); }
.ji-src-txt { flex: 1 1 auto; min-width: 0; }
/* ⚠️ Son <span>: sin display:block el nombre y la descripción salen pegados en el
   mismo renglón. textContent los lee igual, así que el aserto no lo veía. */
.ji-src-t { display: block; font-size: 0.92rem; font-weight: 700; color: var(--v145-ink); }
.ji-src-s { display: block; font-size: 0.78rem; color: var(--v145-ink-soft); line-height: 1.3; }
.ji-src-tag { flex-shrink: 0; font-size: 0.66rem; font-weight: 800; letter-spacing: .02em;
    padding: 0.15rem 0.45rem; border-radius: 9999px;
    background: var(--v145-accent-soft); color: var(--v145-accent); }
.ji-src.is-off { opacity: .55; }

/* ══ La tarjeta de cada documento ═════════════════════════════════════════════ */
/* La primera línea de la tarjeta: estado a la izquierda, número y kebab a la derecha. */
.ji-card-head { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
/* ⛔ El kebab de v169 era absoluto arriba a la derecha. Acá vive DENTRO de la fila, así
   que se lo devuelve al flujo: si no, se monta sobre el número del documento. Los asertos
   no lo veían —en el DOM estaba— y lo encontró la captura. */
.ji-card-head .ji-kebab { position: static; width: 40px; height: 40px; flex-shrink: 0;
    margin: -8px -8px -8px 0; }
/* A 320 px el estado, el indicador, el número y el kebab no entran en una línea. La
   fila envuelve, y el número y el kebab van en el MISMO grupo para que el botón no
   quede flotando solo en un renglón. */
.ji-card-head { flex-wrap: wrap; row-gap: 0.25rem; }
.ji-head-end { display: flex; align-items: center; gap: 0.3rem; margin-left: auto; min-width: 0; }
.ji-head-end .ji-card-num { margin-left: 0; overflow: hidden; text-overflow: ellipsis; }
.ji-card:has(.ji-card-head) .ji-card-top { padding-right: 0; }
.ji-card-num { margin-left: auto; font-size: 0.72rem; font-weight: 700;
    color: var(--v145-ink-soft); white-space: nowrap; }
.ji-card-body { display: flex; align-items: flex-start; gap: 0.6rem; margin-top: 0.5rem; }
.ji-avatar { flex-shrink: 0; width: 40px; height: 40px; border-radius: 9999px;
    display: grid; place-items: center;
    background: var(--v145-accent-soft); color: var(--v145-accent); }
.ji-card-main { flex: 1 1 auto; min-width: 0; }
.ji-card-side { flex-shrink: 0; text-align: right; }
.ji-lines { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 0.45rem; }
.ji-line { display: flex; align-items: center; gap: 0.35rem;
    font-size: 0.74rem; color: var(--v145-ink-soft); min-width: 0; }
.ji-line span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ji-line svg { flex-shrink: 0; }
.ji-badge { display: inline-flex; align-items: center; font-size: 0.6rem; font-weight: 800;
    letter-spacing: .04em; padding: 0.12rem 0.4rem; border-radius: 6px;
    background: var(--v145-card-2); color: var(--v145-ink-soft); }
.ji-money { display: flex; flex-direction: column; align-items: flex-end; gap: 0.05rem; }
.ji-money-sub { font-size: 0.7rem; color: var(--v145-ink-soft); white-space: nowrap; }
.ji-money-due { color: var(--v145-amber); font-weight: 700; }

/* ══ Colores de estado. Nunca SOLO color: cada chip lleva texto. ══════════════ */
.ji-chip-sent, .ji-chip-issued   { background: rgba(37, 99, 235, .14); color: var(--v145-info); }
.ji-chip-viewed                  { background: rgba(124, 58, 237, .14); color: var(--v145-violet); }
.ji-chip-revised                 { background: rgba(124, 58, 237, .14); color: var(--v145-violet); }
.ji-chip-expired, .ji-chip-overdue { background: rgba(217, 119, 6, .16); color: var(--v145-amber); }
.ji-chip-partial                 { background: rgba(217, 119, 6, .16); color: var(--v145-amber); }
.ji-chip-converted               { background: var(--v145-accent-soft); color: var(--v145-accent); }
.ji-chip-in_progress             { background: rgba(37, 99, 235, .14); color: var(--v145-info); }
.ji-chip-unsched                 { background: var(--v145-card-2); color: var(--v145-ink-soft); }
.ji-chip-cancelled, .ji-chip-void { background: rgba(220, 38, 38, .12); color: var(--v145-danger); }
.ji-chip-archived, .ji-chip-deleted { background: var(--v145-card-2); color: var(--v145-ink-soft); }

.ji-list { display: flex; flex-direction: column; gap: 0.55rem; flex-shrink: 0; }
.ji-card {
    display: flex; flex-direction: column; gap: 0.15rem;
    padding: 0.7rem 0.8rem; border-radius: 14px; cursor: pointer;
    background: var(--v145-card); border: 1px solid var(--v145-line);
    transition: background-color .16s ease, transform .12s ease;
}
.ji-card:active { transform: scale(0.995); background: var(--v145-card-2); }
.ji-card:focus-visible { outline: 2px solid var(--v145-accent); outline-offset: -2px; }
.ji-card-top { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.ji-card-main .ji-card-name { display: block; }
.ji-card-name {
    flex: 1 1 auto; min-width: 4.5rem;
    font-weight: 700; font-size: 0.95rem; color: var(--v145-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ji-card-type { font-size: 0.8rem; color: var(--v145-ink); }
.ji-card-addr {
    font-size: 0.78rem; color: var(--v145-ink-soft);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ji-card-bottom { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-top: 0.25rem; min-width: 0; }
.ji-card-meta { font-size: 0.72rem; color: var(--v145-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ji-card-total { font-size: 0.95rem; font-weight: 800; color: var(--v145-ink); white-space: nowrap; }

/* El chip NO se recorta: si no cabe, baja de línea. Misma lección del Calendario. */
.ji-chip {
    flex: 0 0 auto;
    padding: 0.12rem 0.5rem; border-radius: 9999px;
    font-size: 0.68rem; font-weight: 800; white-space: nowrap;
    background: var(--v145-card-2); color: var(--v145-ink-soft);
}
.ji-chip-draft         { background: var(--v145-card-2); color: var(--v145-ink-soft); }
.ji-chip-estimate_sent { background: rgba(37, 99, 235, .14); color: var(--v145-info); }
.ji-chip-approved      { background: var(--v145-accent-soft); color: var(--v145-accent); }
.ji-chip-rejected      { background: rgba(220, 38, 38, .14); color: var(--v145-danger); }
.ji-chip-scheduled     { background: rgba(217, 119, 6, .14); color: var(--v145-amber); }
.ji-chip-done          { background: var(--v145-accent-soft); color: var(--v145-accent); }
.ji-chip-invoiced      { background: rgba(37, 99, 235, .14); color: var(--v145-info); }
.ji-chip-paid          { background: var(--v145-accent); color: var(--v145-accent-ink); }

/* v161 · El menú secundario: las excepciones no compiten con la acción principal. */
.ji-more-wrap { position: relative; flex-shrink: 0; }
.ji-more {
    width: 44px; height: 44px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--v145-card); border: 1px solid var(--v145-line); color: var(--v145-ink);
}
.ji-more:hover { background: var(--v145-card-2); }
.ji-menu {
    position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 230px;
    background: var(--v145-card); border: 1px solid var(--v145-line);
    border-radius: 12px; box-shadow: 0 10px 24px -12px rgba(0,0,0,.45); overflow: hidden;
}
.ji-menu-item {
    display: block; width: 100%; text-align: left;
    min-height: 44px; padding: 0.6rem 0.8rem;
    font-size: 0.85rem; font-weight: 600; color: var(--v145-ink);
}
.ji-menu-item:hover { background: var(--v145-card-2); }
/* Un punto discreto: este documento viene de antes de que el presupuesto fuera lo primero. */
.ji-legacy { color: var(--v145-ink-soft); font-size: 1rem; line-height: 1; }

/* v160 · La acción que toca ahora. Una sola por tarjeta. */
.ji-action {
    align-self: flex-start; margin-top: 0.5rem;
    min-height: 40px; padding: 0.4rem 0.9rem; border-radius: 10px;
    background: var(--v145-accent); color: var(--v145-accent-ink);
    font-size: 0.82rem; font-weight: 700;
}
.ji-action:disabled { opacity: .6; }

.ji-empty {
    /* ⛔ flex-shrink: 0 — es item de .ji-screen, que es columna. Sin esto cede alto y se
       recorta, que es la trampa del v107 y del v154. NO quitar. */
    flex-shrink: 0;
    display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
    padding: 2rem 1rem; text-align: center;
    color: var(--v145-ink-soft); font-size: 0.9rem;
}
.ji-empty-icon {
    width: 48px; height: 48px; border-radius: 9999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--v145-card-2); color: var(--v145-ink-soft);
}
.ji-error { color: var(--v145-danger); }
.ji-btn {
    min-height: 44px; padding: 0.55rem 1rem; border-radius: 12px;
    font-weight: 700; font-size: 0.88rem;
    transition: transform .12s ease;
}
.ji-btn:active { transform: scale(0.97); }
.ji-btn-solid { background: var(--v145-accent); color: var(--v145-accent-ink); }

.ji-spinner {
    width: 26px; height: 26px; border-radius: 9999px;
    border: 3px solid var(--v145-line); border-top-color: var(--v145-accent);
    animation: ji-spin .8s linear infinite;
}
@keyframes ji-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .ji-spinner { animation-duration: 2s; }
    .ji-tab, .ji-card, .ji-newjob-btn, .ji-btn { transition: none !important; }
}
@media (max-width: 360px) {
    .ji-screen { padding-left: 0.6rem; padding-right: 0.6rem; }
    .ji-tab { font-size: 0.74rem; padding: 0.25rem 0.15rem; gap: 0.15rem; }
    .ji-tab-ico { width: 14px; height: 14px; }
    /* ⛔ NO reponer `.ji-newjob-btn { flex: 1 0 100% }` acá. Era de la barra de v156, donde
       el botón compartía FILA con las pestañas. Desde v174 vive en `.ji-hero`, que es un
       flex en COLUMNA: ahí flex-basis es ALTO, y el botón se comía la tarjeta entera
       tapando el buscador y los chips. Ya ocupa todo el ancho por `.ji-hero .ji-newjob-btn`. */
}
/* Entre 361 y 389 la palabra no entra a 0.80rem con el ícono: un punto menos y entra. */
@media (max-width: 389px) { .ji-tab { font-size: 0.76rem; } }
/* ⛔ A 340 px o menos no entra de ninguna manera. Lo que se va es el ÍCONO, que es
   decoración: la palabra tiene que leerse entera. Medido, no supuesto. */
@media (max-width: 340px) { .ji-tab-ico { display: none; } .ji-tab { gap: 0; } }
@media (min-width: 768px) {
    .ji-screen { max-width: 900px; margin: 0 auto; width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   v153 — SOLICITUDES EN EL ENCABEZADO
   Reutiliza los tokens --v145-* que ya están definidos en los dos temas.
   ══════════════════════════════════════════════════════════════════════════ */
/* v155 · Icono circular, sin etiqueta. Con la palabra al lado, el encabezado a 320 px
   quedaba en el filo y el título tenía que ceder; en círculo el orden
   Menú | Inicio | En línea | Solicitudes entra en cualquier ancho. El área táctil son
   44×44 completos y el nombre lo lleva el aria-label, que además dice cuántas hay. */
.hdr-req {
    position: relative; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; border-radius: 9999px;
    background: var(--v145-card-2); border: 1px solid var(--v145-line);
    color: var(--v145-ink);
    transition: background-color .16s ease, transform .12s ease;
}
.hdr-req:active { transform: scale(0.94); }
.hdr-req:hover { background: var(--v145-card); }
.hdr-req svg { flex-shrink: 0; }
/* El contador NO tapa el icono: se apoya en la esquina, fuera del área del glifo. */
.hdr-req-badge {
    /* -7/-7 y 18 px de alto: con el botón en modo icono (círculo de 44, glifo de 20
       centrado) una burbuja de 20 en -4/-4 mordía la esquina del glifo — 25 px² medidos.
       Así el solape es CERO en los dos ejes y el número sigue siendo legible. */
    position: absolute; top: -7px; right: -7px;
    min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9999px;
    background: var(--v145-danger); color: #fff;
    font-size: 10px; font-weight: 800; line-height: 18px; text-align: center;
    box-shadow: 0 0 0 2px var(--v145-bg);
}
/* Un solo pulso al llegar una solicitud, no una animación continua. */
@keyframes hdr-req-pulse { 0% { transform: scale(1); } 45% { transform: scale(1.14); } 100% { transform: scale(1); } }
.hdr-req.is-new { animation: hdr-req-pulse .26s ease-out 1; }
/* Un toque en el aviso abre el panel: se anuncia con el cursor. */
.lt-toast.is-tappable { cursor: pointer; }

/* ══════════════════════════════════════════════════════════════════════════
   Push (24 sep 2026) · PANEL DE LA CAMPANA (#notificationsModal)
   La campana reutiliza .hdr-req / .hdr-req-badge tal cual. El panel reutiliza la hoja
   .jt-sheet (grip, cabecera, .jw-close de 44 px) y solo agrega la lista. Tokens --v145-*.
   ══════════════════════════════════════════════════════════════════════════ */
.nt-sheet { min-height: 40vh; background: var(--v145-card); }
/* .jt-head está definida DOS veces en esta hoja (la de v184 le pone fondo de tarjeta, borde y
   la franja segura de arriba, pensada para pantalla completa). En esta hoja la cabecera va
   pegada al grip, sin banda de otro color. */
.nt-sheet .jt-head { background: transparent; border-bottom: 0; padding-top: .35rem; align-items: center; }
.nt-bar.hidden { display: none; }
.nt-bar { display: flex; justify-content: flex-end; padding: 0 .75rem .35rem; flex-shrink: 0; border-bottom: 1px solid var(--v145-line); }
.nt-mark-all {
    display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: 0 .75rem;
    border-radius: 12px; font-size: .875rem; font-weight: 700; color: var(--v145-accent);
    background: transparent;
}
.dark .nt-mark-all { color: #4ade80; }
.nt-mark-all svg { width: 18px; height: 18px; flex-shrink: 0; }
.nt-mark-all:hover:not(:disabled) { background: var(--v145-accent-soft); }
.nt-mark-all:disabled { color: var(--v145-ink-soft); opacity: .6; cursor: default; }
.nt-mark-all:focus-visible, .nt-item:focus-visible { outline: 2px solid var(--v145-accent); outline-offset: -2px; }
.nt-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; margin: 0; padding: 0 0 .5rem; list-style: none; }
.nt-list:empty { display: none; }
.nt-li { border-bottom: 1px solid var(--v145-line-soft); }
.nt-item {
    display: flex; align-items: flex-start; gap: .75rem; width: 100%; min-height: 64px;
    padding: .75rem 1rem; text-align: left; background: transparent; color: var(--v145-ink);
    -webkit-tap-highlight-color: transparent; transition: background-color .15s ease;
}
.nt-item:active { background: var(--v145-card-2); }
@media (hover: hover) { .nt-item:hover { background: var(--v145-card-2); } }
.nt-item.is-unread { background: var(--v145-accent-soft); }
.nt-ico {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 9999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--v145-card-2); color: var(--v145-ink-soft);
}
.nt-ico svg { width: 20px; height: 20px; }
.nt-ico-zelle { background: rgba(124, 58, 237, .12); color: var(--v145-violet); }
.nt-ico-card  { background: rgba(37, 99, 235, .12);  color: var(--v145-info); }
.nt-ico-jobs  { background: var(--v145-accent-soft); color: var(--v145-accent); }
.nt-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.nt-t { font-size: .9375rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.nt-item:not(.is-unread) .nt-t { font-weight: 600; }
.nt-b { font-size: .875rem; line-height: 1.35; color: var(--v145-ink-soft); overflow-wrap: anywhere; }
.nt-when { font-size: .75rem; font-weight: 600; color: var(--v145-ink-soft); }
.nt-dot { flex: 0 0 auto; width: 10px; height: 10px; margin-top: .4rem; border-radius: 9999px; background: var(--v145-danger); }
.nt-empty { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; padding: 2.25rem 1.5rem 2.75rem; text-align: center; }
.nt-empty-ico { width: 56px; height: 56px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; background: var(--v145-card-2); color: var(--v145-ink-soft); margin-bottom: .35rem; }
.nt-empty-ico svg { width: 26px; height: 26px; }
.nt-empty-t { margin: 0; font-size: 1rem; font-weight: 700; color: var(--v145-ink); }
.nt-empty-d { margin: 0; max-width: 22rem; font-size: .875rem; line-height: 1.4; color: var(--v145-ink-soft); }
.nt-empty-d:empty { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   v151 — CALENDARIO
   Mes y semana en la misma pantalla, con el panel del día debajo. Reutiliza los
   tokens --v145-* y --lt-toast-* que ya están definidos en los dos temas.
   ══════════════════════════════════════════════════════════════════════════ */
.cal-screen {
    display: flex; flex-direction: column;
    height: 100%; min-height: 0;          /* dueño único del scroll vertical de la pantalla */
    overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch;    /* impulso en Safari de iOS */
    /* El relleno de abajo lo calcula la altura REAL de la navegación más la franja segura
       del teléfono, no un margen inventado por tarjeta: así el último trabajo queda entero
       por encima de la barra en cualquier dispositivo. */
    padding: 0.75rem 0.875rem calc(var(--v143-nav-h, 64px) + env(safe-area-inset-bottom, 0px) + 24px);
    gap: 0.75rem;
}

/* ── Barra de control ────────────────────────────────────────────────────── */
.cal-toolbar { display: flex; flex-direction: column; gap: 0.55rem; flex-shrink: 0; }
.cal-toolbar-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-width: 0; }
.cal-period {
    font-size: 1.2rem; font-weight: 800; color: var(--v145-ink); line-height: 1.1;
    /* Solo la PRIMERA letra: con text-transform: capitalize salía "Septiembre De 2026". */
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-period::first-letter { text-transform: uppercase; }
.cal-nav { display: flex; gap: 0.15rem; flex-shrink: 0; }
.cal-iconbtn {
    width: 44px; height: 44px; border-radius: 9999px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--v145-ink);
    transition: background-color .16s ease, transform .12s ease;
}
.cal-iconbtn:hover { background: var(--v145-card-2); }
.cal-iconbtn:active { transform: scale(0.92); }

/* Selector Mes / Semana, con el indicador que se desliza. */
.cal-seg {
    position: relative; display: flex; flex-shrink: 0;
    background: var(--v145-card-2); border-radius: 12px; padding: 0.2rem;
}
.cal-seg-ind {
    position: absolute; top: 0.2rem; bottom: 0.2rem; left: 0.2rem;
    /* Tres segmentos: el carril interior mide 100% menos los dos rellenos de 0.2rem. */
    width: calc((100% - 0.4rem) / 3); border-radius: 10px;
    background: var(--v145-accent);
    transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}
.cal-seg[data-mode="week"] .cal-seg-ind { transform: translateX(100%); }
.cal-seg[data-mode="day"] .cal-seg-ind { transform: translateX(200%); }
/* Con tres botones el ancho fijo ya no entra a 320: reparten el espacio en partes iguales. */
.cal-seg { flex: 1 1 auto; min-width: 0; }
.cal-seg .cal-seg-btn { flex: 1 1 0; }
.cal-seg-btn {
    position: relative; z-index: 1;
    min-height: 44px; min-width: 62px; padding: 0.3rem 0.6rem; border-radius: 10px;
    font-size: 0.85rem; font-weight: 700; color: var(--v145-ink-soft);
    transition: color .2s ease;
}
.cal-seg-btn.is-active { color: var(--v145-accent-ink); }

/* Una sola fila que no envuelve: con wrap, "Hoy" caía debajo de "Smart" y la cabecera se
   veía desordenada. Los botones se encogen antes de saltar de línea. */
.cal-actions { display: flex; align-items: center; gap: 0.3rem; flex-wrap: nowrap; justify-content: flex-end; min-width: 0; }
/* Las píldoras NO ceden: "Smart" se recortaba a "Sm…". El que absorbe el apretón es el
   selector, cuyas etiquetas son cortas; y a 320 px se lleva su propia fila. */
.cal-pill { flex-shrink: 0; }
.cal-seg-btn { min-width: 0; }
.cal-pill > span:not(.cal-badge) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-pill {
    position: relative;
    display: inline-flex; align-items: center; gap: 0.35rem;
    min-height: 44px; padding: 0.35rem 0.8rem; border-radius: 9999px;
    background: var(--v145-card); border: 1px solid var(--v145-line);
    color: var(--v145-ink); font-size: 0.82rem; font-weight: 700;
    transition: background-color .16s ease, transform .12s ease;
}
.cal-pill:active { transform: scale(0.96); }
.cal-pill-accent { background: var(--v145-accent); color: var(--v145-accent-ink); border-color: transparent; }
.cal-badge {
    position: absolute; top: 2px; right: 2px;
    min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9999px;
    background: var(--v145-danger); color: #fff;
    font-size: 10px; font-weight: 800; line-height: 18px; text-align: center;
}

/* ── Barra de navegación del día ─────────────────────────────────────────────
   Las flechas de acá mueven el DÍA; las de la cabecera mueven el mes. Son controles
   distintos a propósito: dos pares haciendo lo mismo era la redundancia a evitar. */
.cal-daynav {
    display: flex; align-items: center; gap: 0.3rem; flex-shrink: 0;
    padding: 0.25rem 0.35rem; border-radius: 14px;
    background: var(--v145-card); border: 1px solid var(--v145-line);
    animation: cal-pane-in .24s ease-out both;
}
.cal-daynav-date {
    flex: 1 1 auto; min-width: 0; text-align: center;
    font-size: 0.9rem; font-weight: 700; color: var(--v145-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-daynav-date::first-letter { text-transform: uppercase; }
.cal-daynav-today { min-height: 38px; padding: 0.3rem 0.75rem; font-size: 0.78rem; flex-shrink: 0; }

/* En Día la fecha ya la muestra la barra: el título del panel sobraría repetido. */
/* La cabecera del panel queda vacía en Día -la fecha está en la barra y el resumen en su
   tarjeta-, así que se retira entera en vez de dejar su relleno como hueco muerto. */
.cal-daypanel.is-day-mode .cal-daypanel-head { display: none !important; }
/* Y el panel deja de ser una tarjeta dentro de otra: la agenda ocupa la pantalla. */
.cal-daypanel.is-day-mode { border-color: transparent; background: transparent; box-shadow: none; }
.cal-daypanel.is-day-mode .cal-daypanel-head,
.cal-daypanel.is-day-mode .cal-daypanel-body { padding-left: 0 !important; padding-right: 0 !important; }
.cal-daypanel.is-day-mode .cal-daypanel-sum { display: none; }
/* El resumen del día pasa a ser su propia tarjeta, como en la referencia. ⚠️ La tarjeta
   ENVUELVE a los botones de acción, así que nunca se oculta: en Mes y Semana es un
   contenedor sin estilo y solo se viste de tarjeta en Día. */
.cal-daypanel.is-day-mode .cal-daycard {
    padding: 0.75rem 0.8rem; border-radius: 16px; margin-bottom: 0.7rem;
    background: var(--v145-card); border: 1px solid var(--v145-line);
}
.cal-daypanel.is-day-mode .cal-daycard .cal-daypanel-actions { margin-bottom: 0; }
/* En Mes y Semana el resumen ya está en la cabecera del panel: acá sobraría repetido. */
.cal-daycard-top { display: none; align-items: center; gap: 0.5rem; min-width: 0; margin-bottom: 0.6rem; }
.cal-daypanel.is-day-mode .cal-daycard-top { display: flex; }
.cal-daycard-icon {
    width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--v145-accent-soft); color: var(--v145-accent);
}
.cal-daycard-sum {
    font-size: 1rem; font-weight: 800; color: var(--v145-ink); min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* v153 · "Solicitudes" se mudó al encabezado, así que el selector volvió a caber en la
   misma fila que Smart y Hoy. Medido a 320/375/390/430 en los dos idiomas: 62, 58, 64 y
   76 px por segmento, ninguno recortado. Si algún día vuelve una píldora a esta fila, la
   envoltura de v152 está en el historial — no apretar la tipografía, que se rompe en inglés. */

/* ── Cuadrícula mensual ──────────────────────────────────────────────────── */
.cal-pane { flex-shrink: 0; animation: cal-pane-in .24s ease-out both; }
@keyframes cal-pane-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.cal-weekdays {
    display: grid; grid-template-columns: repeat(7, 1fr);
    text-align: center; font-size: 0.72rem; font-weight: 700;
    color: var(--v145-ink-soft); text-transform: uppercase; letter-spacing: .02em;
    margin-bottom: 0.3rem;
}
.cal-grid {
    display: grid; grid-template-columns: repeat(7, 1fr);
    /* Alto de fila EXPLÍCITO: con solo min-height las filas se estiraban a 70 px y la
       cuadrícula llegaba a 374, dejando el panel del día fuera de la primera pantalla. */
    grid-auto-rows: 46px;
    border-radius: 14px; overflow: hidden;
    background: var(--v145-card); border: 1px solid var(--v145-line);
}
.calendar-day {
    /* Alto contenido a propósito: el panel del día tiene que caber debajo sin desplazarse. */
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem;
    padding: 0.15rem;
    border-right: 1px solid var(--v145-line-soft);
    border-bottom: 1px solid var(--v145-line-soft);
    cursor: pointer;
    transition: background-color .18s ease;
}
.calendar-day:nth-child(7n) { border-right: none; }
.calendar-day:nth-last-child(-n+7) { border-bottom: none; }
.calendar-day:hover { background: var(--v145-card-2); }
.calendar-day.not-current-month { opacity: .38; }
.day-number-wrapper { display: flex; align-items: center; justify-content: center; }
.day-number {
    width: 26px; height: 26px; border-radius: 9999px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.82rem; font-weight: 600; color: var(--v145-ink);
    transition: background-color .18s ease, color .18s ease;
}
.day-number.today { border: 1.5px solid var(--v145-accent); color: var(--v145-accent); font-weight: 800; }
.calendar-day.is-selected .day-number { background: var(--v145-accent); color: var(--v145-accent-ink); border-color: transparent; }

/* Puntos: como mucho cuatro, y el resto como "+N". */
.day-events { display: flex; align-items: center; justify-content: center; gap: 2px; min-height: 8px; flex-wrap: nowrap; }
.cal-dot { width: 6px; height: 6px; border-radius: 9999px; flex-shrink: 0; }
.cal-dot-done    { background: var(--v145-accent); }
.cal-dot-pending { background: var(--v145-amber); }
.cal-dot-special { background: var(--v145-info); }
.cal-more { font-size: 0.6rem; font-weight: 800; color: var(--v145-ink-soft); line-height: 1; }

/* ── Tira semanal ────────────────────────────────────────────────────────── */
.cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.3rem; touch-action: pan-y; }
.cal-week-day {
    min-height: 74px; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem;
    padding: 0.45rem 0.15rem; border-radius: 12px;
    background: var(--v145-card); border: 1px solid var(--v145-line);
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, transform .12s ease;
}
.cal-week-day:active { transform: scale(0.97); }
.cal-week-abbr { font-size: 0.66rem; font-weight: 700; color: var(--v145-ink-soft); text-transform: uppercase; }
.cal-week-num { font-size: 1.05rem; font-weight: 800; color: var(--v145-ink); line-height: 1; }
.cal-week-day.is-today .cal-week-num { color: var(--v145-accent); }
.cal-week-day.is-selected {
    background: var(--v145-accent); border-color: var(--v145-accent);
}
.cal-week-day.is-selected .cal-week-abbr,
.cal-week-day.is-selected .cal-week-num { color: var(--v145-accent-ink); }
.cal-week-day.is-selected .cal-dot-pending,
.cal-week-day.is-selected .cal-dot-done,
.cal-week-day.is-selected .cal-dot-special { background: var(--v145-accent-ink); opacity: .85; }
.cal-hint { text-align: center; font-size: 0.72rem; color: var(--v145-ink-soft); margin-top: 0.4rem; }

/* ── Leyenda ─────────────────────────────────────────────────────────────── */
/* Mismo motivo que el panel: es item flexible de .cal-screen y no debe ceder alto. */
.cal-legend { flex-shrink: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; font-size: 0.72rem; color: var(--v145-ink-soft); }
.cal-legend span { display: inline-flex; align-items: center; gap: 0.3rem; }

/* ── Panel del día ───────────────────────────────────────────────────────── */
.cal-daypanel {
    /* ⛔ flex-shrink: 0 NO ES DECORACIÓN — es lo que hace que la lista se pueda desplazar.
       Este panel es un item flexible de .cal-screen (columna). Con el flex-shrink: 1 que
       trae por defecto, y con overflow: hidden anulando la protección min-height: auto,
       el panel SE COMPRIMÍA al espacio sobrante (506 px medidos) y recortaba sus 2676 px
       de lista. Nada desbordaba a .cal-screen, así que .cal-screen no tenía qué desplazar:
       con 27 trabajos la lista quedaba cortada y el dedo no movía nada.
       Es la misma trampa del v107 con #smartScheduleGrid. NO quitar. */
    flex-shrink: 0;
    display: flex; flex-direction: column;
    border-radius: 16px; overflow: hidden;
    background: var(--v145-card); border: 1px solid var(--v145-line);
    box-shadow: 0 2px 10px -6px rgba(0, 0, 0, .25);
}
.cal-daypanel-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem;
    padding: 0.8rem 0.85rem 0.5rem !important;
    background: transparent !important; border-bottom: none !important;
}
.cal-daypanel-texts { min-width: 0; }
.cal-daypanel-date {
    font-size: 1rem; font-weight: 800; color: var(--v145-ink); line-height: 1.2;
    overflow-wrap: anywhere;
}
.cal-daypanel-date::first-letter { text-transform: uppercase; }
.cal-daypanel-sum { font-size: 0.8125rem; color: var(--v145-ink-soft); margin-top: 0.1rem; }
.cal-daypanel-body { padding: 0 0.85rem 0.85rem !important; overflow: visible !important; }
.cal-daypanel-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; margin-bottom: 0.7rem; }
.cal-daypanel-actions:has(> :not(.hidden) ~ :not(.hidden)) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cal-btn {
    min-height: 48px; min-width: 0;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
    padding: 0.6rem 0.7rem; border-radius: 13px;
    font-weight: 700; font-size: 0.9rem;
    transition: transform .12s ease, filter .18s ease, background-color .18s ease;
}
.cal-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-btn svg { flex-shrink: 0; }
.cal-btn:active { transform: scale(0.97); }
.cal-btn-solid { background: var(--v145-accent); color: var(--v145-accent-ink); }
.cal-btn-outline { background: transparent; color: var(--v145-ink); border: 1px solid var(--v145-line); }
.cal-btn-outline:hover { background: var(--v145-card-2); }

/* ── Lista de trabajos, con cronología ───────────────────────────────────── */
.cal-joblist { display: flex; flex-direction: column; }
.cal-job {
    position: relative; display: flex; gap: 0.65rem; padding: 0.5rem 0 0.5rem 0;
    min-width: 0; cursor: pointer;
}
.cal-job-time {
    width: 46px; flex-shrink: 0; text-align: right;
    font-size: 0.7rem; font-weight: 700; color: var(--v145-ink-soft); padding-top: 0.2rem;
}
.cal-job-rail { position: relative; width: 14px; flex-shrink: 0; display: flex; justify-content: center; }
/* La línea vertical une los puntos; el primero y el último la recortan. */
.cal-job-rail::before {
    content: ''; position: absolute; top: 0; bottom: 0; width: 2px; background: var(--v145-line);
}
.cal-job:first-child .cal-job-rail::before { top: 10px; }
.cal-job:last-child .cal-job-rail::before { bottom: calc(100% - 12px); }
.cal-job-dot {
    position: relative; z-index: 1; margin-top: 6px;
    width: 10px; height: 10px; border-radius: 9999px;
    box-shadow: 0 0 0 3px var(--v145-card);
}
.cal-job-body { flex: 1 1 auto; min-width: 0; padding-bottom: 0.15rem; }
/* Envuelve: antes el chip se recortaba a "P…" o "Comple…", que no se lee. Si no hay
   sitio en la primera fila, el estado baja a la suya y se lee entero. */
.cal-job-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.4rem; min-width: 0; }
.cal-job-name {
    flex: 1 1 auto; min-width: 4.5rem;   /* nunca se reduce a nada */
    font-weight: 700; font-size: 0.9rem; color: var(--v145-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* v159 · La marca de un trabajo específico: se distingue de un corte recurrente de un vistazo. */
.cal-job-badge {
    display: inline-block; margin-bottom: 0.1rem;
    padding: 0.05rem 0.35rem; border-radius: 6px;
    background: var(--v145-accent-soft); color: var(--v145-accent);
    font-size: 0.6rem; font-weight: 800; letter-spacing: .04em;
}
.cal-job-type { font-size: 0.76rem; color: var(--v145-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-job-addr {
    font-size: 0.75rem; color: var(--v145-ink-soft);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
/* Las acciones y el precio bajan a la línea de la dirección, como en la referencia: en la
   línea de arriba el nombre solo compite con el chip, y deja de truncarse a media palabra. */
.cal-job-bottom { display: flex; align-items: center; gap: 0.35rem; min-width: 0; margin-top: 0.1rem; }
.cal-job-bottom .cal-job-addr { flex: 1 1 auto; min-width: 0; -webkit-line-clamp: 1; }
.cal-job-right { display: flex; align-items: center; gap: 0.1rem; flex-shrink: 0; }
.cal-job-price { font-size: 0.78rem; font-weight: 700; color: var(--v145-ink); white-space: nowrap; }
/* Adorno, no botón: el blanco táctil es la tarjeta entera. Así no compite por el ancho
   con el nombre del cliente ni obliga a decidir qué gana cuando se tocan los dos. */
.cal-job-chevron { display: inline-flex; align-items: center; color: var(--v145-ink-soft); flex-shrink: 0; pointer-events: none; }
.cal-job { border-radius: 12px; transition: background-color .16s ease; }
.cal-job:active { background: var(--v145-card-2); }
.cal-job:focus-visible { outline: 2px solid var(--v145-accent); outline-offset: -2px; }
/* Los dos botones de la fila son más chicos que los de la cabecera: en una lista densa,
   44 px cada uno se comían el ancho del nombre. Siguen muy por encima del mínimo de 24. */
.cal-job-right .cal-iconbtn { width: 34px; height: 34px; }
/* La dirección es texto, no un enlace: la clase la usa la delegación, no el estilo. */
.cal-job-addr.client-address-link { color: var(--v145-ink-soft); text-decoration: none; }
.cal-chip {
    /* El chip CEDE antes que el nombre: con la fila apretada, el nombre del cliente es lo
       último que puede desaparecer. Antes era al revés y el nombre quedaba en 0 px. */
    flex: 0 0 auto;   /* no se recorta: si no cabe, baja de línea */
    padding: 0.1rem 0.45rem; border-radius: 9999px;
    font-size: 0.66rem; font-weight: 800; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.cal-chip-done    { background: var(--v145-accent-soft); color: var(--v145-accent); }
.cal-chip-pending { background: rgba(217, 119, 6, .14); color: var(--v145-amber); }
.cal-chip-special { background: rgba(37, 99, 235, .14); color: var(--v145-info); }
.cal-job.is-done .cal-job-name { color: var(--v145-ink-soft); text-decoration: line-through; }

.cal-empty { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1.25rem 0.5rem; text-align: center; color: var(--v145-ink-soft); font-size: 0.875rem; }
.cal-empty-date { font-weight: 700; color: var(--v145-ink); }
.cal-empty-date::first-letter { text-transform: uppercase; }
.cal-empty-next { margin-top: 0.35rem; max-width: 100%; }
.cal-empty-icon {
    width: 44px; height: 44px; border-radius: 9999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--v145-card-2); color: var(--v145-ink-soft);
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Cambio de día: la agenda entra desde el lado al que se avanza. La animación no
   bloquea nada — es solo transform y opacity, sin pointer-events. */
@keyframes cal-day-next { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes cal-day-prev { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.cal-daypanel-body.is-next { animation: cal-day-next .2s ease-out both; }
.cal-daypanel-body.is-prev { animation: cal-day-prev .2s ease-out both; }

@media (prefers-reduced-motion: reduce) {
    .cal-pane, .cal-daynav, .cal-daypanel-body.is-next, .cal-daypanel-body.is-prev { animation: none !important; }
    .cal-seg-ind, .calendar-day, .day-number, .cal-week-day, .cal-btn, .cal-pill, .cal-iconbtn { transition: none !important; }
}

@media (max-width: 360px) {
    .cal-screen { padding-left: 0.6rem; padding-right: 0.6rem; }
    .cal-seg-btn { min-width: 62px; padding: 0.3rem 0.6rem; font-size: 0.8rem; }
    .cal-pill { padding: 0.35rem 0.6rem; font-size: 0.76rem; }
    .cal-grid { grid-auto-rows: 42px; }
    .day-number { width: 24px; height: 24px; font-size: 0.76rem; }
    .cal-week-day { min-height: 66px; }
    .cal-job-time { width: 42px; font-size: 0.66rem; }
    .cal-seg-btn { padding: 0.3rem 0.3rem; font-size: 0.8rem; }
    /* La fecha completa no puede cortarse (requisito): a 320 px envuelve en dos líneas. */
    .cal-daynav-date { font-size: 0.8rem; white-space: normal; line-height: 1.15; }
    .cal-daynav-today { padding: 0.3rem 0.55rem; font-size: 0.72rem; }
    /* A 320 px el resumen y sus botones se apilan en vez de apretarse. */
    .cal-daypanel.is-day-mode .cal-daypanel-actions { grid-template-columns: minmax(0, 1fr) !important; }
    .cal-daypanel-actions .cal-btn { font-size: 0.82rem; padding-left: 0.4rem; padding-right: 0.4rem; }
}
/* "Agendar Clientes" en media pantalla no entra con el icono al lado hasta bien pasados
   los 400 px: antes se recortaba a "Agendar Cli…". El icono es lo que sobra, no la palabra. */
@media (max-width: 430px) {
    .cal-daypanel-actions .cal-btn { padding-left: 0.45rem; padding-right: 0.45rem; gap: 0.3rem; }
    .cal-daypanel-actions .cal-btn svg { display: none; }
}
@media (min-width: 768px) {
    .cal-screen { max-width: 760px; margin: 0 auto; width: 100%; }
}
/* --- FIN v151 --- */

/* ══════════════════════════════════════════════════════════════════
   v188 · MENÚ LATERAL
   Blanco, compacto y con jerarquía: etiqueta de sección en gris,
   opciones de alto contraste y la activa en verde muy claro.
   ══════════════════════════════════════════════════════════════════ */
.lt-menu {
    position: fixed;
    inset: 0;
    z-index: 60;              /* sobre la barra inferior (z-40) y el mapa */
}
.lt-menu.hidden { display: none; }

.lt-menu__overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    opacity: 0;
    transition: opacity 220ms ease;
}

.lt-menu__panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    width: 300px;
    max-width: 86vw;          /* a 320px deja ver el fondo y no llena la pantalla */
    background: #ffffff;
    border-top-right-radius: 22px;
    border-bottom-right-radius: 22px;
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.22);
    transform: translateX(-100%);
    transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;         /* el scroll lo hace el <nav>, no el panel */
    /* La barra de estado del teléfono no puede comerse el encabezado. */
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Abierto: lo pone la aplicación en el siguiente frame, para que la
   transición tenga un estado inicial del que salir. */
.lt-menu.is-open .lt-menu__overlay { opacity: 1; }
.lt-menu.is-open .lt-menu__panel  { transform: translateX(0); }

/* ── Encabezado ── */
.lt-menu__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 18px 16px;
    border-bottom: 1px solid #eef0f2;
}
.lt-menu__avatar {
    position: relative;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 9999px;
    background: #10B981;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    overflow: hidden;
}
.lt-menu__logo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.lt-menu__ident { min-width: 0; }   /* sin esto el truncado del nombre no funciona */
.lt-menu__company {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
    color: #1c1917;
    /* Dos líneas y elipsis: un nombre largo no se corta a media palabra ni
       empuja el resto del encabezado. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.lt-menu__account {
    font-size: 12.5px;
    color: #8a8f98;
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lt-menu__badge {
    display: inline-block;
    margin-top: 7px;
    padding: 3px 11px;
    border-radius: 9999px;
    border: 1px solid rgba(16, 185, 129, 0.45);
    background: rgba(16, 185, 129, 0.10);
    color: #047857;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.5;
}

/* ── Lista ── */
.lt-menu__nav {
    flex: 1 1 auto;
    min-height: 0;            /* deja que el hijo haga scroll de verdad */
    overflow-y: auto;
    overflow-x: hidden;       /* nunca scroll horizontal */
    -webkit-overflow-scrolling: touch;
    padding: 6px 0 10px;
}
.lt-menu__section { padding: 2px 0 6px; }
.lt-menu__section + .lt-menu__section {
    border-top: 1px solid #f1f2f4;
    margin-top: 4px;
    padding-top: 10px;
}
.lt-menu__section.hidden { display: none; }
.lt-menu__label {
    padding: 6px 18px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #9aa0a6;
}
.lt-menu__item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 48px;         /* por encima del mínimo táctil de 44px */
    padding: 11px 18px;
    border: 0;
    background: transparent;
    color: #1c1917;
    font-size: 15.5px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background-color 140ms ease;
}
.lt-menu__item.hidden { display: none; }
.lt-menu__item:hover { background: #f5f6f7; }
.lt-menu__item:focus-visible {
    outline: 2px solid #059669;
    outline-offset: -3px;
}
.lt-menu__icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    stroke-width: 1.9;
    color: #44484d;
}

/* La opción de la pantalla abierta. */
.lt-menu__item[aria-current="page"] {
    background: rgba(16, 185, 129, 0.12);
    color: #065f46;
    font-weight: 600;
}
.lt-menu__item[aria-current="page"] .lt-menu__icon { color: #059669; }

/* ── Pie ── */
.lt-menu__foot {
    flex-shrink: 0;
    border-top: 1px solid #eef0f2;
    padding: 8px 0 10px;
}
.lt-menu__logout {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 48px;
    padding: 11px 18px;
    border: 0;
    background: transparent;
    color: #dc2626;
    font-size: 15.5px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background-color 140ms ease;
}
.lt-menu__logout .lt-menu__icon { color: #dc2626; }
.lt-menu__logout:hover { background: rgba(220, 38, 38, 0.08); }
.lt-menu__logout:focus-visible {
    outline: 2px solid #dc2626;
    outline-offset: -3px;
}
.lt-menu__version {
    padding: 6px 18px 2px;
    text-align: center;
    font-size: 11.5px;
    color: #b0b5bb;
}

/* ── Modo oscuro ── */
.dark .lt-menu__panel {
    background: #16181d;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
}
.dark .lt-menu__head,
.dark .lt-menu__foot { border-color: #262a31; }
.dark .lt-menu__section + .lt-menu__section { border-color: #23262c; }
.dark .lt-menu__company { color: #f4f4f5; }
.dark .lt-menu__account { color: #9096a0; }
.dark .lt-menu__label { color: #7d838d; }
.dark .lt-menu__item { color: #e8e9eb; }
.dark .lt-menu__icon { color: #a9aeb6; }
.dark .lt-menu__item:hover { background: #22252b; }
.dark .lt-menu__item[aria-current="page"] {
    background: rgba(16, 185, 129, 0.18);
    color: #6ee7b7;
}
.dark .lt-menu__item[aria-current="page"] .lt-menu__icon { color: #34d399; }
.dark .lt-menu__badge {
    background: rgba(16, 185, 129, 0.16);
    border-color: rgba(16, 185, 129, 0.40);
    color: #6ee7b7;
}
.dark .lt-menu__logout { color: #f87171; }
.dark .lt-menu__logout .lt-menu__icon { color: #f87171; }
.dark .lt-menu__logout:hover { background: rgba(248, 113, 113, 0.12); }
.dark .lt-menu__version { color: #5f656d; }

/* ── Pantallas chicas ── */
/* A 320px el panel se ensancha un poco (queda menos fondo visible) y el
   espaciado se aprieta, para que "Cerrar sesión" siga alcanzable sin
   depender solo del scroll. */
@media (max-width: 360px) {
    .lt-menu__panel { width: 290px; max-width: 90vw; }
    .lt-menu__head { padding: 14px 15px 13px; gap: 10px; }
    .lt-menu__avatar { width: 46px; height: 46px; font-size: 19px; }
    .lt-menu__company { font-size: 16px; }
    .lt-menu__item, .lt-menu__logout { padding-left: 15px; padding-right: 15px; gap: 12px; }
    .lt-menu__label { padding-left: 15px; padding-right: 15px; }
    .lt-menu__version { padding-left: 15px; padding-right: 15px; }
}

/* ── Escritorio ── */
@media (min-width: 1024px) {
    .lt-menu__panel { width: 320px; max-width: 320px; }
}

/* Quien pidió menos movimiento no recibe deslizamiento. */
@media (prefers-reduced-motion: reduce) {
    .lt-menu__overlay,
    .lt-menu__panel,
    .lt-menu__item,
    .lt-menu__logout { transition: none; }
}

/* v188 · Con el menú abierto, el fondo no se desplaza. `overscroll-behavior`
   en la lista evita además que al llegar al final del menú el gesto siga de
   largo y arrastre la página de atrás (scroll chaining). */
body.lt-menu-abierto { overflow: hidden; }
.lt-menu__nav { overscroll-behavior: contain; }

/* ══════════════════════════════════════════════════════════════════
   v189 · RUTAS DEL EQUIPO
   El color de cada trabajador entra por la variable --w, que pone el
   JavaScript con el color determinista. Así el MISMO color sirve para el
   avatar, el borde, la barra y el marcador, sin repetirlo en cinco sitios.
   ══════════════════════════════════════════════════════════════════ */
.tr-screen { padding: 14px 14px 20px; }

.tr-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.tr-head__txt { flex: 1 1 auto; min-width: 0; }
.tr-head__title { font-size: 26px; font-weight: 800; line-height: 1.15; color: #1c1917; }
.tr-head__date { font-size: 14px; color: #8a8f98; margin-top: 2px; }
.tr-datebtn {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px;
    min-height: 46px; padding: 10px 14px; border: 1px solid #e6e8ea;
    border-radius: 14px; background: #fff; color: #1c1917;
    font-size: 14.5px; font-weight: 600; cursor: pointer;
}
.tr-datebtn__ico { width: 18px; height: 18px; color: #6b7280; }
.tr-datebtn:hover { background: #f7f8f9; }
/* El input real de flatpickr: tiene que EXISTIR y poder recibir el foco del
   calendario, pero no se ve. `display:none` rompe el posicionamiento. */
.tr-datepicker {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.tr-mapbtn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; min-height: 56px; margin-bottom: 14px; padding: 14px;
    border: 0; border-radius: 16px; background: #059669; color: #fff;
    font-size: 17px; font-weight: 700; cursor: pointer;
    transition: background-color 140ms ease;
}
.tr-mapbtn:hover { background: #047857; }
.tr-mapbtn__ico { width: 22px; height: 22px; }
.tr-mapbtn:focus-visible, .tr-datebtn:focus-visible, .tr-filter:focus-visible {
    outline: 2px solid #059669; outline-offset: 2px;
}

.tr-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.tr-stat {
    display: flex; align-items: center; gap: 9px;
    padding: 13px 11px; border-radius: 14px; min-width: 0;
}
.tr-stat__ico { width: 22px; height: 22px; flex-shrink: 0; }
.tr-stat strong { display: block; font-size: 21px; font-weight: 800; line-height: 1.1; color: #1c1917; }
.tr-stat span { display: block; font-size: 12px; color: #6b7280; }
.tr-stat--a { background: #eafaf2; } .tr-stat--a .tr-stat__ico { color: #059669; }
.tr-stat--b { background: #eef4ff; } .tr-stat--b .tr-stat__ico { color: #2563EB; }
.tr-stat--c { background: #eafaf2; } .tr-stat--c .tr-stat__ico { color: #059669; }

/* Los filtros se desplazan en horizontal si no caben, sin sacar scroll a la
   página. `scrollbar-width:none` evita la barra fea en escritorio. */
.tr-filters {
    display: flex; gap: 8px; margin-bottom: 14px;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; padding-bottom: 2px;
}
.tr-filters::-webkit-scrollbar { display: none; }
.tr-filter {
    flex-shrink: 0; min-height: 44px; padding: 10px 18px;
    border: 1px solid #e6e8ea; border-radius: 9999px; background: #fff;
    color: #44484d; font-size: 14.5px; font-weight: 600; cursor: pointer;
    transition: background-color 140ms ease, color 140ms ease;
}
.tr-filter.is-on { background: #059669; border-color: #059669; color: #fff; }

.tr-list { display: flex; flex-direction: column; gap: 12px; }

.tr-card {
    border: 1px solid #e9ebed; border-radius: 16px; background: #fff;
    overflow: hidden; transition: border-color 140ms ease;
}
.tr-card.is-open { border-color: var(--w, #059669); }
.tr-card__head {
    display: flex; align-items: center; gap: 12px; width: 100%;
    min-height: 72px; padding: 13px 14px; border: 0; background: transparent;
    text-align: left; cursor: pointer;
}
.tr-card.is-open .tr-card__head { background: color-mix(in srgb, var(--w, #059669) 8%, transparent); }
.tr-card__avatar {
    flex-shrink: 0; width: 46px; height: 46px; border-radius: 9999px;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--w, #059669) 20%, #fff);
    color: var(--w, #059669); font-size: 15px; font-weight: 800;
}
.tr-card__mid { flex: 1 1 auto; min-width: 0; }
.tr-card__name {
    font-size: 16.5px; font-weight: 700; color: #1c1917;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tr-card__sub { font-size: 13px; color: #8a8f98; margin-top: 1px; }
.tr-card__right { flex-shrink: 0; display: flex; align-items: center; gap: 8px; }
.tr-badge {
    padding: 4px 10px; border-radius: 9999px; font-size: 12px; font-weight: 700;
    white-space: nowrap;
}
.tr-badge--onroute { background: #059669; color: #fff; }
.tr-badge--notstarted { background: #eef4ff; color: #2563EB; }
.tr-badge--done { background: #eafaf2; color: #047857; }
.tr-badge--empty { background: #f2f3f5; color: #6b7280; }
.tr-card__pct { font-size: 14.5px; font-weight: 700; color: var(--w, #059669); }
.tr-card__chev { width: 20px; height: 20px; color: #9aa0a6; transition: transform 200ms ease; }
.tr-card.is-open .tr-card__chev { transform: rotate(180deg); }
.tr-bar {
    height: 7px; margin: 0 14px 12px; border-radius: 9999px; background: #eceef0;
    overflow: hidden;
}
.tr-card.is-open .tr-bar { margin-bottom: 0; }
.tr-bar__fill { height: 100%; border-radius: 9999px; background: var(--w, #059669); transition: width 260ms ease; }

/* ── La línea de recorrido ── */
.tr-stops { padding: 10px 14px 4px; }
.tr-stop { position: relative; display: flex; gap: 12px; padding: 7px 0; }
.tr-stop__dot {
    position: relative; z-index: 1; flex-shrink: 0;
    width: 30px; height: 30px; border-radius: 9999px;
    display: flex; align-items: center; justify-content: center;
    font-size: 12.5px; font-weight: 700; background: #eceef0; color: #6b7280;
}
/* El hilo que une las paradas: va detrás de los círculos. */
.tr-stop:not(:last-child)::before {
    content: ""; position: absolute; left: 14px; top: 34px; bottom: -4px;
    width: 2px; background: #e6e8ea;
}
.tr-stop--done .tr-stop__dot { background: #059669; color: #fff; }
.tr-stop--doing .tr-stop__dot { background: var(--w, #059669); color: #fff; }
.tr-stop--next .tr-stop__dot { background: var(--w, #059669); color: #fff; }
.tr-stop--cancel .tr-stop__dot { background: #f2f3f5; color: #9aa0a6; }
.tr-stop__txt { min-width: 0; flex: 1 1 auto; }
.tr-stop__name {
    font-size: 15px; font-weight: 600; color: #1c1917;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ⚠️ Una parada hecha NO se tacha ni se aclara hasta ser ilegible: sigue
   siendo información que el administrador necesita leer. */
.tr-stop--done .tr-stop__name { color: #44484d; }
.tr-stop--cancel .tr-stop__name { color: #9aa0a6; text-decoration: line-through; }
.tr-stop__addr {
    font-size: 13px; color: #8a8f98; margin-top: 1px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tr-chip {
    display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 9999px;
    font-size: 11.5px; font-weight: 700; vertical-align: middle;
}
.tr-chip--next { background: color-mix(in srgb, var(--w, #059669) 15%, #fff); color: var(--w, #059669); }
.tr-chip--doing { background: #fff4e5; color: #B45309; }
.tr-chip--nogeo { background: #fdecec; color: #b91c1c; }

.tr-actions { display: flex; gap: 8px; padding: 8px 14px 14px; }
.tr-act {
    flex: 1 1 0; min-height: 46px; display: flex; align-items: center;
    justify-content: center; gap: 8px; padding: 11px;
    border: 1px solid var(--w, #059669); border-radius: 12px;
    background: #fff; color: var(--w, #059669);
    font-size: 14.5px; font-weight: 700; cursor: pointer;
}
.tr-act:hover { background: color-mix(in srgb, var(--w, #059669) 8%, #fff); }
.tr-act:focus-visible { outline: 2px solid var(--w, #059669); outline-offset: 2px; }
.tr-act--ghost { border-color: #e6e8ea; color: #44484d; flex: 0 0 auto; min-width: 46px; }
.tr-act svg { width: 18px; height: 18px; }

.tr-empty { padding: 34px 18px; text-align: center; color: #8a8f98; font-size: 14.5px; }
.tr-empty svg { width: 34px; height: 34px; margin: 0 auto 10px; color: #c7cbd1; display: block; }
.tr-card__norute { padding: 4px 14px 14px; font-size: 13.5px; color: #8a8f98; }

/* ══════════════════════════════════════════════════════════════════
   v189 · MAPA DEL EQUIPO
   ══════════════════════════════════════════════════════════════════ */
.tm-screen { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.tm-bar {
    flex-shrink: 0; display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; background: #047857; color: #fff;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
}
.tm-bar__back {
    flex-shrink: 0; width: 44px; height: 44px; border: 0; border-radius: 9999px;
    background: transparent; color: #fff; display: flex; align-items: center;
    justify-content: center; cursor: pointer;
}
.tm-bar__back:hover { background: rgba(255,255,255,.14); }
.tm-bar__title {
    flex: 1 1 auto; min-width: 0; font-size: 18px; font-weight: 700; text-align: center;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tm-bar__date {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
    min-height: 44px; padding: 9px 12px; border: 0; border-radius: 12px;
    background: rgba(255,255,255,.16); color: #fff; font-size: 13.5px;
    font-weight: 600; cursor: pointer;
}
.tm-bar__back:focus-visible, .tm-bar__date:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.tm-body { position: relative; flex: 1 1 auto; min-height: 0; }
.tm-map { position: absolute; inset: 0; background: #e9eef0; }

.tm-chips {
    position: absolute; top: 10px; left: 0; right: 0; z-index: 3;
    display: flex; gap: 8px; padding: 0 12px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.tm-chips::-webkit-scrollbar { display: none; }
.tm-chip {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px;
    min-height: 44px; padding: 9px 15px; border: 1px solid #e6e8ea;
    border-radius: 9999px; background: #fff; color: #1c1917;
    font-size: 14px; font-weight: 700; cursor: pointer;
    box-shadow: 0 2px 10px rgba(15,23,42,.13);
}
.tm-chip__dot { width: 12px; height: 12px; border-radius: 9999px; background: var(--w, #059669); flex-shrink: 0; }
.tm-chip.is-on { background: #059669; border-color: #059669; color: #fff; }
.tm-chip.is-on .tm-chip__dot { background: #fff; }
/* Oculta: se ve que existe pero apagada, no desaparece de la barra. */
.tm-chip.is-off { opacity: .45; }
.tm-chip:focus-visible { outline: 2px solid #059669; outline-offset: 2px; }

.tm-notice {
    position: absolute; left: 12px; right: 12px; top: 66px; z-index: 3;
    padding: 10px 13px; border-radius: 12px; background: #fff;
    box-shadow: 0 2px 12px rgba(15,23,42,.16);
    font-size: 13px; color: #44484d;
}
.tm-notice.hidden { display: none; }

/* El panel inferior. Tres alturas, sin librería: una clase y una transición. */
.tm-sheet {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
    display: flex; flex-direction: column;
    background: #fff; border-top-left-radius: 18px; border-top-right-radius: 18px;
    box-shadow: 0 -6px 26px rgba(15,23,42,.18);
    transition: transform 240ms cubic-bezier(.22,1,.36,1);
    max-height: 62%;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tm-sheet[data-tm-state="bajo"]  { transform: translateY(calc(100% - 92px)); }
.tm-sheet[data-tm-state="medio"] { transform: translateY(0); max-height: 44%; }
.tm-sheet[data-tm-state="alto"]  { transform: translateY(0); max-height: 72%; }
.tm-sheet__grip {
    flex-shrink: 0; width: 100%; min-height: 26px; border: 0; background: transparent;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    padding: 9px 0 3px;
}
.tm-sheet__grip span { display: block; width: 42px; height: 5px; border-radius: 9999px; background: #d4d7dc; }
.tm-sheet__grip:focus-visible { outline: 2px solid #059669; outline-offset: -4px; }
.tm-sheet__head { flex-shrink: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 16px 8px; }
.tm-sheet__head h4 { font-size: 17px; font-weight: 800; color: #1c1917; }
.tm-sheet__sum { font-size: 13px; color: #8a8f98; }
.tm-sheet__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 8px 12px; }

.tm-row { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 8px; border-radius: 12px; }
.tm-row__avatar {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 9999px;
    display: flex; align-items: center; justify-content: center;
    background: var(--w, #059669); color: #fff; font-size: 12.5px; font-weight: 800;
}
.tm-row__name { flex: 0 0 auto; max-width: 34%; font-size: 14.5px; font-weight: 600; color: #1c1917;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-row__count { flex-shrink: 0; font-size: 13px; color: #6b7280; font-variant-numeric: tabular-nums; }
.tm-row__bar { flex: 1 1 auto; height: 7px; border-radius: 9999px; background: #eceef0; overflow: hidden; min-width: 40px; }
.tm-row__fill { height: 100%; border-radius: 9999px; background: var(--w, #059669); }
.tm-row__eye {
    flex-shrink: 0; width: 44px; height: 44px; border: 0; background: transparent;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    color: var(--w, #059669); border-radius: 9999px;
}
.tm-row__eye:hover { background: #f4f5f6; }
.tm-row__eye:focus-visible { outline: 2px solid var(--w, #059669); outline-offset: -3px; }
.tm-row.is-off .tm-row__avatar, .tm-row.is-off .tm-row__fill { opacity: .4; }
.tm-row.is-off .tm-row__eye { color: #9aa0a6; }

/* ── Modo oscuro ── */
.dark .tr-head__title, .dark .tr-stat strong, .dark .tr-card__name,
.dark .tr-stop__name, .dark .tm-sheet__head h4 { color: #f4f4f5; }
.dark .tr-datebtn { background: #1b1e24; border-color: #2b2f36; color: #e8e9eb; }
.dark .tr-filter { background: #1b1e24; border-color: #2b2f36; color: #c9ccd1; }
.dark .tr-filter.is-on { background: #059669; border-color: #059669; color: #fff; }
.dark .tr-card { background: #16181d; border-color: #262a31; }
.dark .tr-bar, .dark .tm-row__bar { background: #2b2f36; }
.dark .tr-stop__dot { background: #2b2f36; color: #a9aeb6; }
.dark .tr-stop:not(:last-child)::before { background: #2b2f36; }
.dark .tr-stop--done .tr-stop__name { color: #c9ccd1; }
.dark .tr-act { background: #16181d; }
.dark .tr-act--ghost { border-color: #2b2f36; color: #c9ccd1; }
.dark .tr-stat--a, .dark .tr-stat--c { background: rgba(16,185,129,.13); }
.dark .tr-stat--b { background: rgba(37,99,235,.15); }
.dark .tm-chip { background: #1b1e24; border-color: #2b2f36; color: #e8e9eb; }
.dark .tm-notice { background: #1b1e24; color: #c9ccd1; }
.dark .tm-sheet { background: #16181d; }
.dark .tm-sheet__grip span { background: #3a3f47; }
.dark .tm-map { background: #23262c; }
.dark .tr-badge--notstarted { background: rgba(37,99,235,.2); color: #93b4fd; }
.dark .tr-badge--done { background: rgba(16,185,129,.18); color: #6ee7b7; }
.dark .tr-badge--empty { background: #2b2f36; color: #a9aeb6; }

/* ── Pantallas chicas ── */
@media (max-width: 360px) {
    .tr-screen { padding: 12px 11px 18px; }
    .tr-head__title { font-size: 23px; }
    .tr-stat { padding: 11px 9px; gap: 7px; }
    .tr-stat strong { font-size: 19px; }
    .tr-stat span { font-size: 11px; }
    .tr-card__head { padding: 11px 11px; gap: 10px; }
    .tr-card__avatar { width: 42px; height: 42px; }
    .tr-actions { flex-wrap: wrap; }
}

/* ── Escritorio: el mapa no se estira sin fin ── */
@media (min-width: 1024px) {
    .tr-screen { max-width: 860px; margin: 0 auto; }
    .tm-sheet { left: auto; right: 16px; bottom: 16px; width: 380px; border-radius: 18px; }
    .tm-sheet[data-tm-state="bajo"] { transform: translateY(calc(100% - 92px)); }
}

@media (prefers-reduced-motion: reduce) {
    .tm-sheet, .tr-bar__fill, .tr-card__chev, .tr-mapbtn, .tr-filter { transition: none; }
}

/* v189 · Editar ruta */
.re-modal {
    display: flex; flex-direction: column; width: 100%; max-width: 560px;
    max-height: 86vh; background: #fff; border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 30px rgba(15,23,42,.24);
    transform: translateY(12px); transition: transform 260ms cubic-bezier(.22,1,.36,1);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (min-width: 640px) { .re-modal { border-radius: 18px; } }
.modal.is-open .re-modal, .modal:not(.pointer-events-none) .re-modal { transform: translateY(0); }
.re-modal__head { flex-shrink: 0; display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px; padding: 16px 16px 8px; }
.re-modal__head h3 { font-size: 19px; font-weight: 800; color: #1c1917; }
.re-modal__who { font-size: 13.5px; color: #8a8f98; margin-top: 2px; }
.re-close { width: 44px; height: 44px; border: 0; background: transparent; border-radius: 9999px;
    display: flex; align-items: center; justify-content: center; cursor: pointer; color: #6b7280; }
.re-close:hover { background: #f4f5f6; }
.re-modal__note { flex-shrink: 0; padding: 0 16px 10px; font-size: 13px; color: #8a8f98; }
.re-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: 0 10px 10px; display: flex; flex-direction: column; gap: 6px; }
.re-row { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 12px;
    background: #f7f8f9; }
.re-row--lock { opacity: .62; }
.re-row--out { background: #fdecec; }
.re-row__n { flex-shrink: 0; width: 26px; height: 26px; border-radius: 9999px; background: #e6e8ea;
    color: #44484d; font-size: 12.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.re-row__txt { flex: 1 1 auto; min-width: 0; }
.re-row__name { display: block; font-size: 14.5px; font-weight: 600; color: #1c1917;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.re-row__addr { display: block; font-size: 12.5px; color: #8a8f98;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.re-row__ctl { flex-shrink: 0; display: flex; align-items: center; gap: 4px; }
.re-btn { width: 44px; height: 44px; border: 0; background: transparent; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; cursor: pointer; color: #44484d; }
.re-btn svg { width: 18px; height: 18px; }
.re-btn:hover:not(:disabled) { background: #e9ebed; }
.re-btn:disabled { opacity: .3; cursor: not-allowed; }
.re-btn--del { color: #dc2626; }
.re-sel { min-height: 44px; max-width: 108px; border: 1px solid #e0e2e5; border-radius: 10px;
    background: #fff; font-size: 13px; padding: 6px 8px; color: #1c1917; }
.re-modal__foot { flex-shrink: 0; display: flex; gap: 10px; padding: 10px 16px 16px;
    border-top: 1px solid #eef0f2; }
.re-foot-btn { flex: 1 1 0; min-height: 48px; border: 1px solid #e0e2e5; border-radius: 12px;
    background: #fff; color: #44484d; font-size: 15px; font-weight: 700; cursor: pointer; }
.re-foot-btn--go { background: #059669; border-color: #059669; color: #fff; }
.re-foot-btn:disabled { opacity: .6; cursor: progress; }
.re-foot-btn:focus-visible, .re-btn:focus-visible, .re-close:focus-visible {
    outline: 2px solid #059669; outline-offset: 2px; }
.dark .re-modal { background: #16181d; }
.dark .re-modal__head h3 { color: #f4f4f5; }
.dark .re-row { background: #1b1e24; }
.dark .re-row--out { background: rgba(220,38,38,.16); }
.dark .re-row__name { color: #e8e9eb; }
.dark .re-row__n { background: #2b2f36; color: #c9ccd1; }
.dark .re-sel { background: #1b1e24; border-color: #2b2f36; color: #e8e9eb; }
.dark .re-foot-btn { background: #1b1e24; border-color: #2b2f36; color: #c9ccd1; }
.dark .re-foot-btn--go { background: #059669; border-color: #059669; color: #fff; }
.dark .re-modal__foot { border-color: #262a31; }
@media (prefers-reduced-motion: reduce) { .re-modal { transition: none; } }

/* v189 · Los textos de las tarjetas son <span>: sin `display:block` el
   recorte con puntos suspensivos NO funciona y el nombre pisa al badge. */
.tr-card__mid, .tr-card__name, .tr-card__sub,
.tr-stop__txt, .tr-stop__name, .tr-stop__addr { display: block; }
.tr-card__mid { overflow: hidden; }
/* El nombre puede encogerse hasta desaparecer antes que empujar al badge. */
.tr-card__name { min-width: 0; }
.tr-card__right { max-width: 62%; }

/* El tile del resumen: la etiqueta se recorta con puntos en vez de salirse. */
.tr-stat > div { min-width: 0; }
.tr-stat span { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Una parada en progreso o siguiente lleva su etiqueta DEBAJO del nombre si
   no cabe al lado: antes competía por la misma línea y cortaba el nombre. */
.tr-stop__name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tr-stop__name > .tr-chip { margin-left: 0; }

/* v189 · Un poco mas de aire para el nombre: el badge y el porcentaje se
   aprietan antes que recortar a la persona. */
.tr-card__right { max-width: 50%; gap: 6px; }
.tr-card__name { font-size: 16px; }
.tr-badge { padding: 4px 9px; font-size: 11.5px; }
.tr-card__pct { font-size: 13.5px; }

/* v189 · La barra del panel se quedaba VACÍA aunque el progreso fuera 3/4.
   .tm-row__bar y .tm-row__fill son <span>: el primero se blockifica por ser
   hijo de un flex, pero el SEGUNDO no, y un inline ignora width y height. La
   barra existía, el relleno no se veía. Tercera vez la misma causa en v189. */
.tm-row__bar { display: block; }
.tm-row__fill { display: block; }

/* v189 · La reserva para la barra inferior fija. Ver el porqué en
   scratchpad/v189/patch-css-nav.mjs. La forma corta `padding:` de .tr-screen
   pisaba el padding-bottom de .content-view-body y los botones de la tarjeta
   quedaban 31px por debajo de la barra. */
.tr-screen {
    padding-bottom: calc(var(--v143-nav-h, 64px) + env(safe-area-inset-bottom, 0px) + 24px);
}
@media (max-width: 360px) {
    /* A 360px y menos el bloque de arriba aprieta el padding, pero la barra
       mide lo mismo: la reserva inferior NO se toca. */
    .tr-screen {
        padding-bottom: calc(var(--v143-nav-h, 64px) + env(safe-area-inset-bottom, 0px) + 24px);
    }
}
/* Y un respiro propio debajo de la fila de botones, para que no queden
   pegados al borde del área desplazable. */
.tr-actions { padding-bottom: 16px; }

/* ══════════════════════════════════════════════════════════════════
   v191 · LA CASA DEL TRABAJO ACTIVO
   Casa (PNG) + número (capa HTML) + círculo + cortadora + cronómetro.
   Todo comparte el MISMO eje central: el contenedor centra por columna.
   ══════════════════════════════════════════════════════════════════ */

/* env() no se puede leer desde JavaScript; se expone como variable para
   que el centrado del mapa pueda tenerlo en cuenta. */
:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

.hm {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    width: 168px;
    transform: translate(-50%, -50%);   /* el OverlayView ancla por el centro */
    pointer-events: none;
}

/* El círculo: DETRÁS de la casa y sin tocarla. Una parte clara y otra del
   color del estado, para que se vea de dónde a dónde va la cortadora. */
.hm-ring {
    position: absolute; top: 0; left: 50%;
    width: 146px; height: 146px; margin-left: -73px;
    border-radius: 9999px;
    background: conic-gradient(var(--hm-c) 0turn, var(--hm-c) .62turn,
                color-mix(in srgb, var(--hm-c) 16%, #fff) .62turn, color-mix(in srgb, var(--hm-c) 16%, #fff) 1turn);
    -webkit-mask: radial-gradient(circle, transparent 0 60px, #000 60px);
            mask: radial-gradient(circle, transparent 0 60px, #000 60px);
    opacity: .9;
    z-index: 0;
}

/* La órbita: gira, y la cortadora va colgada de su borde. Girar el
   contenedor con `transform` es barato y no reflowea nada. */
.hm-orbit {
    position: absolute; top: 0; left: 50%;
    width: 146px; height: 146px; margin-left: -73px;
    z-index: 3;
    animation: hm-orbit 7s linear infinite;
}
.hm-mower {
    position: absolute; top: -9px; left: 50%; margin-left: -13px;
    display: block; width: 26px; height: 19px;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.28));
}
/* La franja de grama recién cortada: va detrás de la cortadora, sutil. */
.hm-orbit::before {
    content: ""; position: absolute; inset: 0; border-radius: 9999px;
    border: 7px solid transparent;
    border-top-color: color-mix(in srgb, var(--hm-c) 55%, #a7f3d0);
    opacity: .5;
    transform: rotate(-26deg);
}
@keyframes hm-orbit { to { transform: rotate(360deg); } }

.hm-house {
    position: relative; z-index: 2;
    width: 132px; height: 132px; display: block;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,.34));
}

/* El número: capa HTML encima del PNG, centrada en el hueco de la puerta.
   El tamaño lo pone el JavaScript según cuántos dígitos tenga. */
.hm-num {
    position: absolute; z-index: 4;
    top: 66px; left: 50%; transform: translate(-50%, -50%);
    width: 84px; text-align: center;
    color: #fff; font-weight: 800; line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    /* Contraste sobre CUALQUIER color de casa: halo oscuro, no solo sombra. */
    text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 0 6px rgba(0,0,0,.4);
    overflow: hidden; white-space: nowrap;
}

/* El cronómetro, DEBAJO de la casa y en el mismo eje. */
.hm-timer {
    position: relative; z-index: 5;
    margin-top: -6px;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px 7px 10px;
    background: #fff; border: 2px solid var(--hm-c);
    border-radius: 9999px;
    box-shadow: 0 4px 14px rgba(15,23,42,.22);
    pointer-events: auto;
}
.hm-timer__ico { width: 20px; height: 20px; color: var(--hm-c); flex-shrink: 0; }
.hm-timer__txt { display: flex; flex-direction: column; line-height: 1.05; }
.hm-timer__lbl { font-size: 9px; font-weight: 800; letter-spacing: .09em; color: #8a8f98; }
.hm-timer__val {
    font-size: 17px; font-weight: 800; color: #1c1917;
    font-variant-numeric: tabular-nums;   /* las cifras no bailan al cambiar */
}
.dark .hm-timer { background: #16181d; }
.dark .hm-timer__val { color: #f4f4f5; }
.dark .hm-timer__lbl { color: #9096a0; }

/* Pantallas chicas: la casa se achica, todo lo demás la sigue. */
@media (max-width: 360px) {
    .hm { width: 148px; }
    .hm-ring, .hm-orbit { width: 128px; height: 128px; margin-left: -64px; }
    .hm-house { width: 116px; height: 116px; }
    .hm-num { top: 58px; width: 74px; }
    .hm-timer__val { font-size: 16px; }
}

/* Quien pidió menos movimiento ve la MISMA información, quieta: la
   cortadora se queda en su sitio y el círculo no gira. */
@media (prefers-reduced-motion: reduce) {
    .hm-orbit { animation: none; }
}

/* v191 · La cortadora es el PNG suministrado (vista cenital, mirando arriba).
   Se la gira 90 grados UNA vez: colgada del borde superior del circulo y
   girando en sentido horario, su frente queda apuntando hacia donde avanza, y
   el resto del giro lo hereda de la orbita. */
.hm-mower { width: 30px; height: 36px; margin-left: -15px; top: -15px; }
.hm-mower__img {
    display: block; width: 100%; height: 100%;
    transform: rotate(90deg);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.3));
}
@media (max-width: 360px) {
    .hm-mower { width: 26px; height: 31px; margin-left: -13px; top: -13px; }
}

/* v191b · GEOMETRIA DEL MARCADOR — un solo bloque, todo derivado de dos
   medidas. Antes habia dos bloques encimados y el resultado dependia del orden:
   el aro quedaba mas alto que la casa, la casa se salia del circulo y el
   cronometro se comia el borde de abajo.

   Las dos medidas:
     --hm-aro   diametro del circulo
     --hm-casa  lado de la caja de la casa (el PNG es cuadrado)

   Todo lo demas sale de ahi, asi que el conjunto sigue cuadrando al cambiar
   cualquiera de las dos. La casa se centra EN EL CENTRO DEL ARO, no en el
   contenedor: si no, el circulo queda con mas aire arriba que abajo.

   Del PNG real (400x400, medido, no estimado): la casa ocupa del 15 % al 83 %
   de la altura y del 11 % al 89 % del ancho; la pared verde libre va del 28 %
   al 54 % y la puerta blanca empieza en el 55 %. O sea que el dibujo visible
   mide 0,78 x --hm-casa.

   v192b · La casa baja a la MITAD (132 → 66 px de caja, 116 → 58 en movil): en
   el telefono tapaba media manzana y no dejaba ver los marcadores de al lado.
   Se toca SOLO --hm-casa. El aro, la orbita de la cortadora y el cronometro
   quedan donde estaban: --hm-casa-top absorbe el cambio (la casa sigue
   centrada en el aro) y el margen del cronometro esta escrito como
   "aro - casa-top - casa", que da el mismo numero con cualquier casa. */
.hm {
    width: 190px;
    --hm-aro: 176px;
    --hm-casa: 66px;      /* v192b: la mitad de 132 */
    --hm-hueco: 74px;              /* radio del agujero del aro */
    --hm-casa-top: calc((var(--hm-aro) - var(--hm-casa)) / 2);
}
.hm-ring, .hm-orbit {
    top: 0; width: var(--hm-aro); height: var(--hm-aro);
    margin-left: calc(var(--hm-aro) / -2);
}
.hm-ring {
    -webkit-mask: radial-gradient(circle, transparent 0 var(--hm-hueco), #000 var(--hm-hueco));
            mask: radial-gradient(circle, transparent 0 var(--hm-hueco), #000 var(--hm-hueco));
}
/* object-fit evita cualquier deformacion si un PNG futuro no viniera cuadrado:
   se muestra entero y centrado, nunca estirado. */
.hm-house {
    width: var(--hm-casa); height: var(--hm-casa);
    object-fit: contain; object-position: center;
    margin-top: var(--hm-casa-top);
}
/* El numero sobre la FACHADA, al 50 % de la altura del PNG: abajo del techo
   blanco (que en el centro llega al 28 %) y arriba de la puerta (55 %), que es
   donde la pared verde es mas ancha. Con la casa SIN puerta iria mas abajo,
   en el hueco. */
.hm-num--fachada {
    top: calc(var(--hm-casa-top) + var(--hm-casa) * 0.50);
    width: calc(var(--hm-casa) * 0.44);
}
/* El cronometro empieza DESPUES del borde inferior del aro: ni lo tapa ni la
   cortadora lo atraviesa al pasar por abajo. */
.hm-timer {
    /* v194: +24 px en vez de +6. La cortadora va CENTRADA en la circunferencia,
       asi que sobresale del aro la mitad de su alto (~21 px): al pasar por abajo
       se metia sobre el borde del cronometro. El aro no lo tocaba, ella si. */
    margin-top: calc(var(--hm-aro) - var(--hm-casa-top) - var(--hm-casa) + 24px);
}

@media (max-width: 360px) {
    .hm { width: 168px; --hm-aro: 156px; --hm-casa: 58px; --hm-hueco: 65px; }   /* v192b: la mitad de 116 */
    .hm-timer__val { font-size: 16px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   v194 · EL CIRCULO MAS CHICO Y LA GRAMA RECIEN CORTADA

   El aro baja un 25 % (176 → 132 px de diametro; en movil 156 → 117) junto con
   TODO lo que depende de el: el recorrido de la cortadora y el hueco interior
   salen del mismo --hm-aro, asi que no hay valores sueltos que se puedan
   desalinear. La casa, el numero y el cronometro NO se tocan.

   El rastro: antes el aro era un conic-gradient FIJO y la orbita giraba por su
   cuenta, asi que el verde claro no tenia relacion con donde estaba la
   cortadora -- de ahi la sensacion de que solo daba vueltas. Ahora es un
   segundo circulo SVG con stroke-dasharray cuyo dashoffset baja con la MISMA
   duracion y la misma curva que el giro de la orbita: el borde del verde claro
   queda pegado detras de la cortadora sin sincronizar nada por JavaScript.

   ⛔ Esto es decoracion de "trabajo en curso", NO un porcentaje real de avance.
   ══════════════════════════════════════════════════════════════════════════ */
.hm {
    --hm-aro: 99px;                /* v195: otro 25 % menos que los 132 de v194 */
    --hm-vuelta: 7.5s;             /* vuelta de 6 s + pausa + desvanecido */
    /* El verde de lo ya cortado: el MISMO color del estado, aclarado y con
       menos saturacion. Sale de --hm-c, asi que un trabajo en rojo o morado
       tambien deja un rastro coherente con su color. */
    --hm-c-cortado: color-mix(in srgb, var(--hm-c) 62%, #ffffff);
}
/* El aro dejo de ser un div con fondo: ahora es un SVG de dos circulos. */
.hm-ring {
    background: none;
    -webkit-mask: none; mask: none;
    overflow: visible;
    opacity: 1;
}
.hm-ring__base, .hm-ring__cut {
    fill: none;
    stroke-width: 7;
    stroke-linecap: round;
    /* El trazo arranca ARRIBA, que es donde esta la cortadora al empezar. */
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}
.hm-ring__base { stroke: var(--hm-c); opacity: .92; }
.hm-ring__cut {
    stroke: var(--hm-c-cortado);
    /* 2 * PI * 45 = 282.74 unidades del viewBox. */
    stroke-dasharray: 282.74;
    stroke-dashoffset: 282.74;
    animation: hm-cortado var(--hm-vuelta) linear infinite;
}
/* 0 → 80 % de la vuelta se dibuja el rastro (6 s de los 7,5); despues una
   pausa corta y un desvanecido suave para volver al verde fuerte. Nada de
   cortes bruscos al reiniciar. */
@keyframes hm-cortado {
    0%   { stroke-dashoffset: 282.74; opacity: 1; }
    80%  { stroke-dashoffset: 0;      opacity: 1; }
    88%  { stroke-dashoffset: 0;      opacity: 1; }
    100% { stroke-dashoffset: 0;      opacity: 0; }
}
/* La orbita gira en esos mismos 80 % y espera quieta el resto: la cortadora y
   el final del rastro llegan juntos al punto de partida. */
.hm-orbit { animation: hm-orbit var(--hm-vuelta) linear infinite; }
@keyframes hm-orbit {
    0%   { transform: rotate(0deg); }
    80%  { transform: rotate(360deg); }
    100% { transform: rotate(360deg); }
}
/* Ya no hay banda de grama pintada con un borde: la dibuja el SVG. */
.hm-orbit::before { content: none; }

/* Las briznas salen por DETRAS. La cortadora cuelga del borde de arriba y
   avanza en sentido horario, asi que "atras" es hacia la izquierda en su eje
   local; la rotacion de la orbita se encarga del resto. Son cinco elementos
   fijos con retardos distintos: se reciclan, no se acumulan. */
.hm-blade {
    position: absolute; top: 50%; left: 0;
    width: 5px; height: 2px; margin-top: -1px;
    border-radius: 2px 60% 60% 2px;
    background: var(--hm-c-cortado);
    opacity: 0;
    animation: hm-brizna .9s linear infinite;
    will-change: transform, opacity;
}
.hm-blade--0 { animation-delay: 0s;    --hm-desvio: -7px; }
.hm-blade--1 { animation-delay: .18s;  --hm-desvio:  5px; }
.hm-blade--2 { animation-delay: .36s;  --hm-desvio: -3px; }
.hm-blade--3 { animation-delay: .54s;  --hm-desvio:  8px; }
.hm-blade--4 { animation-delay: .72s;  --hm-desvio: -5px; }
@keyframes hm-brizna {
    0%   { transform: translate(0, 0) rotate(0deg);                          opacity: .95; }
    70%  { transform: translate(-14px, calc(var(--hm-desvio) * .7)) rotate(140deg); opacity: .35; }
    100% { transform: translate(-20px, var(--hm-desvio)) rotate(200deg);     opacity: 0; }
}

/* Movimiento reducido: la misma informacion, quieta. La cortadora se queda en
   el borde, una parte del aro ya aparece cortada y no salta ni una brizna. */
@media (prefers-reduced-motion: reduce) {
    .hm-orbit { animation: none; }
    .hm-ring__cut {
        animation: none;
        stroke-dashoffset: 212;    /* un cuarto de vuelta ya cortado */
        opacity: 1;
    }
    .hm-blade { animation: none; opacity: 0; }
}

@media (max-width: 360px) {
    .hm { --hm-aro: 88px; }        /* v195: otro 25 % menos que los 117 de v194 */
@media (max-width: 360px) {
    /* El radio minimo tambien baja, pero no en la misma proporcion: la casa no
       se achico tanto, asi que si el circulo se cerrara igual la cortadora se le
       montaria encima. 78 px es donde la roza sin taparla. */
    .hm { --hm-r-min: 78px; }
}
}

/* v195 · La cortadora, un poco mas AFUERA del trazo.
   Va centrada en la circunferencia, asi que la mitad de su alto cae del lado
   de adentro: con el aro de 176 px eso no llegaba a ningun lado, pero con el
   de 99 px rozaba las esquinas de la casa. Corrida hacia afuera, su parte
   interior deja de alcanzarlas y el recorrido se sigue viendo pegado al aro. */
.hm-mower { top: -26px; }
@media (max-width: 360px) {
    .hm-mower { top: -22px; }
}

/* v195b · Ver el comentario de arriba: en las DIAGONALES la cortadora
   alcanzaba la esquina del dibujo de la casa. Se achica un punto y se corre
   otro punto hacia afuera. Sigue pegada al trazo y ya no la roza. */
.hm-mower { width: 26px; height: 31px; margin-left: -13px; top: -26px; }
@media (max-width: 360px) {
    .hm-mower { width: 22px; height: 26px; margin-left: -11px; top: -20px; }
}

/* v196 · La cortadora, un 25 % mas chica que en v195, para que acompanie al
   circulo. Al achicarse alcanza menos hacia adentro, asi que vuelve a
   acercarse al trazo sin rozar la casa (ver el calculo en el commit). */
.hm-mower { width: 20px; height: 23px; margin-left: -10px; top: -20px; }
@media (max-width: 360px) {
    .hm-mower { width: 17px; height: 20px; margin-left: -8.5px; top: -16px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   v197 · LA ESPIRAL

   El radio es una variable CSS TIPADA. Sin @property, --hm-r seria texto y el
   navegador no sabria interpolar de 99px a 74px: saltaria de un valor al otro.
   Declarandola como <length> se anima como cualquier medida, en el hilo de
   composicion, sin tocar JavaScript ni redibujar el mapa.

   El aro y la orbita leen la MISMA variable, asi que no hay dos trayectorias
   que se puedan desalinear: la cortadora cuelga del borde de la orbita y el
   borde se mueve con el radio. Y como los dos estan centrados con
   calc((--hm-aro - --hm-r) / 2), el circulo se cierra sobre la casa en vez de
   irse para un costado.

   Navegador sin @property (iOS anterior a 16.4): la variable se queda en su
   valor inicial y el circulo no se cierra, pero la cortadora lo sigue
   recorriendo igual. Se degrada, no se rompe.
   ══════════════════════════════════════════════════════════════════════════ */
@property --hm-r {
    syntax: "<length>";
    inherits: true;
    initial-value: 99px;
}
.hm {
    --hm-r: var(--hm-aro);
    --hm-r-min: 84px;          /* lo mas cerca de la casa sin rozarla */
    --hm-espiral: 10s;         /* el ciclo completo de acercamiento */
    --hm-vuelta: 6.25s;        /* 5 s de vuelta + pausa y desvanecido */
    animation: hm-espiral var(--hm-espiral) ease-in-out infinite;
}
/* El acercamiento: dos tercios cerrandose, un tercio volviendo al borde de
   afuera. La vuelta de regreso es la que evita el salto al reiniciar. */
@keyframes hm-espiral {
    0%   { --hm-r: var(--hm-aro); }
    65%  { --hm-r: var(--hm-r-min); }
    80%  { --hm-r: var(--hm-r-min); }
    100% { --hm-r: var(--hm-aro); }
}
.hm-ring, .hm-orbit {
    width: var(--hm-r); height: var(--hm-r);
    margin-left: calc(var(--hm-r) / -2);
    top: calc((var(--hm-aro) - var(--hm-r)) / 2);
}

/* Con movimiento reducido el circulo no se cierra: se queda en el radio de
   afuera, quieto, con su tramo ya cortado. */
@media (prefers-reduced-motion: reduce) {
    .hm { animation: none; --hm-r: var(--hm-aro); }
}

/* v197 · El marcador SALE desvaneciendose: casa, circulo y cortadora juntos. */
.hm--fin {
    animation: none;
    transition: opacity .24s ease, transform .24s ease;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.82);
}
.hm--fin .hm-orbit, .hm--fin .hm-ring__cut, .hm--fin .hm-blade { animation-play-state: paused; }

/* ══════════════════════════════════════════════════════════════════════════
   v197 · LA CELEBRACION
   Capa fija sobre el mapa, SIN pointer-events: no tapa gestos ni scroll. Se
   monta cuando Firebase confirmo y se borra sola al terminar. */
.jd {
    position: fixed; inset: 0; z-index: 900;
    display: grid; place-items: center;
    pointer-events: none;
}
.jd-centro { position: relative; display: grid; place-items: center; }

/* El resplandor: detras del logo, suave. */
.jd-brillo {
    position: absolute; width: 190px; height: 190px; border-radius: 9999px;
    background: radial-gradient(circle, rgba(5,150,105,.36) 0%, rgba(5,150,105,.12) 45%, transparent 70%);
    animation: jd-brillo 2.1s ease-out forwards;
}
@keyframes jd-brillo {
    0%   { opacity: 0; transform: scale(.4); }
    35%  { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.15); }
}

/* El logo: 20 % → 110 % → rebote → 100 %. El PNG es el logo oficial con
   fondo transparente, asi que no hay cuadro ni halo cuadrado alrededor. */
.jd-logo {
    position: relative; width: 116px; height: 116px;
    object-fit: contain;
    filter: drop-shadow(0 10px 22px rgba(15,23,42,.28));
    animation: jd-logo 2.1s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes jd-logo {
    0%   { opacity: 0; transform: scale(.2); }
    35%  { opacity: 1; transform: scale(1.1); }
    50%  { transform: scale(.96); }
    62%  { transform: scale(1.03); }
    72%  { transform: scale(1); }
    88%  { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1); }
}

/* El mensaje con su check. */
.jd-msg {
    position: relative; margin-top: 10px;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px 8px 10px;
    background: #fff; border-radius: 9999px;
    box-shadow: 0 8px 24px rgba(15,23,42,.18);
    font-size: 13px; font-weight: 800; letter-spacing: .04em; color: #14532d;
    animation: jd-msg 2.1s ease forwards;
}
.jd-check {
    display: grid; place-items: center; width: 22px; height: 22px;
    border-radius: 9999px; background: #059669; color: #fff; flex-shrink: 0;
}
.jd-check svg { width: 14px; height: 14px; }
@keyframes jd-msg {
    0%   { opacity: 0; transform: translateY(8px); }
    45%  { opacity: 0; transform: translateY(8px); }
    60%  { opacity: 1; transform: translateY(0); }
    88%  { opacity: 1; }
    100% { opacity: 0; }
}
.dark .jd-msg { background: #16181d; color: #d1fae5; }

/* Ocho chispas verdes, elementos FIJOS: salen y se apagan con la capa. */
.jd-chispa {
    position: absolute; width: 7px; height: 7px; border-radius: 3px 70% 70% 3px;
    background: #34d399; opacity: 0;
    animation: jd-chispa 1.15s ease-out forwards;
}
.jd-chispa--0 { --jd-x:  74px; --jd-y: -58px; animation-delay: .30s; }
.jd-chispa--1 { --jd-x: -70px; --jd-y: -62px; animation-delay: .36s; }
.jd-chispa--2 { --jd-x:  92px; --jd-y:  26px; animation-delay: .34s; }
.jd-chispa--3 { --jd-x: -88px; --jd-y:  30px; animation-delay: .40s; }
.jd-chispa--4 { --jd-x:  44px; --jd-y: -92px; animation-delay: .44s; }
.jd-chispa--5 { --jd-x: -40px; --jd-y: -96px; animation-delay: .32s; }
.jd-chispa--6 { --jd-x:  20px; --jd-y: -110px; animation-delay: .48s; }
.jd-chispa--7 { --jd-x: -18px; --jd-y: -104px; animation-delay: .38s; }
@keyframes jd-chispa {
    0%   { opacity: 0; transform: translate(0,0) scale(.5) rotate(0deg); }
    25%  { opacity: .95; }
    100% { opacity: 0; transform: translate(var(--jd-x), var(--jd-y)) scale(1) rotate(180deg); }
}

/* Movimiento reducido: sin crecimiento, sin rebote y sin chispas. Aparece el
   check con el mensaje y se va. Sigue diciendo lo mismo, mas corto. */
@media (prefers-reduced-motion: reduce) {
    .jd-logo, .jd-brillo, .jd-msg { animation: none; opacity: 1; transform: none; }
    .jd-chispa { display: none; }
    .hm--fin { transition: none; }
}
.jd--reducido .jd-logo, .jd--reducido .jd-brillo, .jd--reducido .jd-msg {
    animation: none; opacity: 1; transform: none;
}
.jd--reducido .jd-chispa { display: none; }

/* v198 · El slider mientras se guarda: no admite gesto y lo dice. Es un
   indicador discreto; el candado de verdad es el estado de cierre en app.js. */
#swipe-container.is-saving { pointer-events: none; opacity: .72; }
#swipe-container.is-saving #swipe-text { animation: sw-saving 1.1s ease-in-out infinite; }
@keyframes sw-saving { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { #swipe-container.is-saving #swipe-text { animation: none; } }

/* ══════════════════════════════════════════════════════════════════════════
   v199 · LA CELEBRACION, SEPARADA DEL MAPA
   Capa HTML dentro de #map-container, absolute + inset: 0, por encima del
   mapa (10), la tarjeta (15) y el panel (20). No es un marcador: no tiene
   coordenadas y el mapa no la mueve. Se centra en el espacio VISIBLE, entre
   la tarjeta y el panel, con las medidas que le pasa app.js. Bloquea toques
   mientras dura (2,2 s) y se borra sola. */
.jd {
    position: absolute; inset: 0; z-index: 60;
    display: flex; align-items: center; justify-content: center;
    padding-top: var(--jd-top, 0px); padding-bottom: var(--jd-bottom, 0px);
    box-sizing: border-box;
    pointer-events: auto;
    /* El mapa sigue debajo, congelado, con un velo verde muy claro alrededor
       del logo: ni pantalla vacia ni verde solido. */
    background: radial-gradient(circle at 50% calc(50% + (var(--jd-top, 0px) - var(--jd-bottom, 0px)) / 2),
        rgba(209,250,229,.78) 0%, rgba(209,250,229,.55) 32%, rgba(236,253,245,.30) 62%, rgba(236,253,245,.18) 100%);
    animation: jd-capa 2.2s ease forwards;
}
.jd--fija { position: fixed; z-index: 900; }
@keyframes jd-capa {
    0%   { opacity: 0; }
    10%  { opacity: 1; }
    86%  { opacity: 1; }
    100% { opacity: 0; }
}
.jd-centro { position: relative; display: flex; flex-direction: column; align-items: center; }

/* El logo: grande de verdad en el telefono. 0.15 → 0.55 → 1.12 → 0.96 → 1,
   y se queda quieto ~1,6 s. Es el PNG oficial con transparencia. */
.jd-logo {
    position: relative; z-index: 2;
    width: clamp(130px, 38vw, 175px); height: clamp(130px, 38vw, 175px);
    object-fit: contain;
    filter: drop-shadow(0 14px 28px rgba(15,23,42,.30));
    animation: jd-logo 2.2s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes jd-logo {
    0%   { opacity: 0; transform: scale(.15); }
    12%  { opacity: 1; transform: scale(.55); }
    30%  { transform: scale(1.12); }
    40%  { transform: scale(.96); }
    48%  { transform: scale(1); }
    88%  { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1); }
}

/* El resplandor, detras del logo. */
.jd-brillo {
    position: absolute; top: 50%; left: 50%; z-index: 1;
    width: clamp(220px, 64vw, 300px); height: clamp(220px, 64vw, 300px);
    margin: calc(clamp(220px, 64vw, 300px) / -2 - 22px) 0 0 calc(clamp(220px, 64vw, 300px) / -2);
    border-radius: 9999px;
    background: radial-gradient(circle, rgba(5,150,105,.34) 0%, rgba(5,150,105,.14) 45%, transparent 70%);
    animation: jd-brillo 2.2s ease-out forwards;
}

/* El mensaje, integrado debajo del logo: grande, negrita, verde oscuro,
   sobre blanco semitransparente, con su check. */
.jd-msg {
    position: relative; z-index: 2; margin-top: 18px;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 20px 12px 14px;
    background: rgba(255,255,255,.92); border-radius: 16px;
    box-shadow: 0 10px 30px rgba(15,23,42,.18);
    font-size: clamp(15px, 4.4vw, 19px); font-weight: 800; letter-spacing: .04em;
    color: #14532d; text-transform: uppercase; white-space: nowrap;
    animation: jd-msg 2.2s ease forwards;
}
.jd-check {
    display: grid; place-items: center; width: 30px; height: 30px;
    border-radius: 9999px; background: #059669; color: #fff; flex-shrink: 0;
}
.jd-check svg { width: 18px; height: 18px; }
@keyframes jd-msg {
    0%   { opacity: 0; transform: translateY(10px); }
    40%  { opacity: 0; transform: translateY(10px); }
    52%  { opacity: 1; transform: translateY(0); }
    88%  { opacity: 1; }
    100% { opacity: 0; }
}
.dark .jd-msg { background: rgba(22,24,29,.92); color: #d1fae5; }

/* Las chispas salen desde el centro del logo. */
.jd-chispa { top: 50%; left: 50%; margin: -26px 0 0 -4px; width: 9px; height: 9px; }

/* Movimiento reducido: sin crecimiento ni chispas, capa y mensaje quietos. */
.jd--reducido, .jd--reducido .jd-logo, .jd--reducido .jd-brillo, .jd--reducido .jd-msg {
    animation: none; opacity: 1; transform: none;
}

/* v200 · EL PROXIMO OBJETIVO: pulso verde corto + etiqueta SIGUIENTE sobre la
   casa sugerida. No es la casa animada del trabajo en curso: eso solo existe
   con la llegada confirmada. */
.nt { position: relative; width: 0; height: 0; pointer-events: none; }
.nt-pulso, .nt-aro {
    position: absolute; left: -34px; top: -54px; width: 68px; height: 68px;
    border-radius: 9999px; box-sizing: border-box;
}
.nt-pulso { border: 3px solid #059669; opacity: 0; animation: nt-pulso 1.4s ease-out 3; }
.nt-pulso--2 { animation-delay: .5s; }
@keyframes nt-pulso {
    0%   { transform: scale(.55); opacity: .9; }
    100% { transform: scale(1.35); opacity: 0; }
}
.nt-aro { border: 2px solid rgba(5,150,105,.55); background: rgba(5,150,105,.08); }
.nt-etiqueta {
    position: absolute; left: 50%; top: -74px; transform: translateX(-50%);
    padding: 3px 9px; border-radius: 9999px;
    background: #059669; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .08em;
    box-shadow: 0 3px 10px rgba(15,23,42,.22); white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) { .nt-pulso { animation: none; } }
/* Casitas fase 2 · la casita compuesta mide ~58 px de alto (la casa de producción, 40):
   el aro y la etiqueta SIGUIENTE suben para quedar centrados sobre ella. */
.nt--alta .nt-pulso, .nt--alta .nt-aro { top: -63px; }
.nt--alta .nt-etiqueta { top: -84px; }
/* Casitas fase 2 · servicio(s) de la visita en la ventana del marcador. */
.info-window-content .iw-servicios { margin: 0.25rem 0 0.1rem; }
.info-window-content .iw-servicios > span { color: #fff !important; opacity: .85; font-size: 0.8rem !important; }
.info-window-content .iw-servicios ul { list-style: none; margin: 0.1rem 0 0; padding: 0; }
.info-window-content .iw-servicios li { font-size: 0.875rem; font-weight: 600; line-height: 1.3; }
.info-window-content .iw-servicios li::before { content: '• '; opacity: .8; }

/* Los botones de la ventana del marcador. */
.iw-btn {
    flex: 1; text-align: center; padding: 7px 10px; border-radius: 10px;
    background: #059669; color: #fff; font-size: 12px; font-weight: 700; text-decoration: none;
}
.iw-btn--sec { background: rgba(255,255,255,.14); color: #fff; }

/* ══════════════════════════════════════════════════════════════════════════
   v201 · DASHBOARD DE RENDIMIENTO
   Solo variables del tema (--v143-*): el texto NUNCA hereda un blanco de una
   tarjeta vieja. Verde LawnTrail para lo actual, gris neutro para lo anterior. */
.db-screen { padding: 14px 14px calc(var(--v143-nav-h, 64px) + env(safe-area-inset-bottom, 0px) + 24px); color: var(--v143-ink); }
.db-head { margin-bottom: 12px; }
.db-title { font-size: 1.45rem; font-weight: 800; line-height: 1.15; color: var(--v143-ink); margin: 0; }
/* El texto secundario en claro usa #475569: --v143-ink-soft (#64748b) sobre el fondo gris de la pantalla da 4,4, justo debajo del 4,5. */
.db-sub { font-size: .8rem; color: #475569; margin: 2px 0 0; }
.dark .db-sub { color: var(--v143-ink-soft); }
.db-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--v143-accent-soft); margin-bottom: 14px; }
/* La pestania inactiva va en gris mas oscuro que --v143-ink-soft: sobre el fondo verde claro de la tira, #64748b da 3,8; #475569 da 6. */
.db-tab { flex: 1; min-height: 40px; border-radius: 9px; font-size: .86rem; font-weight: 700; color: #475569; background: transparent; border: 0; }
.dark .db-tab { color: var(--v143-ink-soft); }
/* Verde OSCURO para la pestania activa: blanco sobre #16a34a da 3,3 de contraste; sobre #15803d da 4,9. */
.db-tab.active { background: #15803d; color: #fff; box-shadow: 0 2px 8px rgba(22,163,74,.28); }
.dark .db-tab.active { background: #15803d; color: #fff; }
.db-tab:focus-visible, .period-filter-btn:focus-visible { outline: 3px solid var(--v143-accent); outline-offset: 2px; }
.db-card {
    background: var(--v143-card); border: 1px solid var(--v143-line); border-radius: 16px;
    padding: 14px; box-shadow: 0 2px 10px rgba(15,23,42,.05); margin-bottom: 12px; color: var(--v143-ink);
}
.db-card__title { font-size: 1rem; font-weight: 800; color: var(--v143-ink); margin: 0; line-height: 1.2; }
.db-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.db-summary { display: flex; align-items: center; gap: 16px; }
.db-summary__body { min-width: 0; flex: 1; }
.db-summary__count { font-size: 1.45rem; font-weight: 800; color: var(--v143-ink); margin: 4px 0 0; line-height: 1.1; }
.db-summary__count span { font-size: 1rem; font-weight: 600; color: var(--v143-ink-soft); }
.db-diff { font-size: .84rem; font-weight: 700; color: #15803d; margin: 8px 0 0; }
.dark .db-diff { color: #4ade80; }
.db-diff--down { color: #b45309; } .dark .db-diff--down { color: #fbbf24; }
.db-diff--flat { color: var(--v143-ink-soft); }
/* El anillo: SVG, el relleno con stroke-dashoffset (lo pone app.js). */
.db-ring { position: relative; width: 104px; height: 104px; flex-shrink: 0; }
.db-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.db-ring__track { fill: none; stroke: var(--v143-accent-soft); stroke-width: 10; }
.db-ring__fill { fill: none; stroke: var(--v143-accent); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset .5s ease; }
.db-ring__txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.db-ring__txt b { font-size: 1.35rem; font-weight: 800; color: var(--v143-ink); }
.db-ring__txt small { font-size: .62rem; color: var(--v143-ink-soft); margin-top: 3px; }
.db-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.db-kpi { margin-bottom: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.db-kpi__head { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.db-kpi__lbl { font-size: .8rem; font-weight: 600; color: var(--v143-ink-soft); }
.db-kpi__ico { width: 30px; height: 30px; border-radius: 9999px; background: var(--v143-accent-soft); color: var(--v143-accent); display: grid; place-items: center; flex-shrink: 0; }
.db-kpi__ico svg { width: 16px; height: 16px; }
.db-kpi__val { font-size: 1.5rem; font-weight: 800; color: var(--v143-ink); line-height: 1.1; overflow-wrap: anywhere; }
.db-kpi__sub { font-size: .72rem; color: var(--v143-ink-soft); }
.db-legend { display: flex; gap: 12px; font-size: .74rem; color: var(--v143-ink-soft); margin-top: 4px; flex-wrap: wrap; }
.db-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.db-dot { display: inline-block; width: 9px; height: 9px; border-radius: 9999px; flex-shrink: 0; }
.db-dot--now { background: var(--v143-accent); }
.db-dot--prev { background: #cbd5e1; } .dark .db-dot--prev { background: #475569; }
.db-dot--drive { background: #94a3b8; } .dark .db-dot--drive { background: #64748b; }
.db-dot--break { background: #e2e8f0; border: 1px solid var(--v143-line); } .dark .db-dot--break { background: #334155; }
.db-chart { position: relative; height: 200px; }
.db-empty { font-size: .84rem; color: var(--v143-ink-soft); margin: 10px 0 0; }
.db-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Uso del tiempo: una barra sin bordes, tres tramos. */
.db-tu-bar { display: flex; height: 14px; border-radius: 9999px; overflow: hidden; background: var(--v143-accent-soft); margin: 12px 0 10px; }
.db-tu-bar__seg { display: block; height: 100%; width: 0; transition: width .5s ease; }
.db-tu-bar__seg--work { background: var(--v143-accent); }
.db-tu-bar__seg--drive { background: #94a3b8; } .dark .db-tu-bar__seg--drive { background: #64748b; }
.db-tu-bar__seg--break { background: #e2e8f0; } .dark .db-tu-bar__seg--break { background: #334155; }
.db-tu-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.db-tu-list li { display: flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--v143-ink); min-height: 28px; }
.db-tu-list li b { margin-left: auto; font-weight: 800; color: var(--v143-ink); text-align: right; }
.db-tu-result { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--v143-line); font-size: .9rem; color: var(--v143-ink-soft); }
.db-tu-result b { font-size: 1.15rem; font-weight: 800; color: #15803d; } .dark .db-tu-result b { color: #4ade80; }
@media (min-width: 640px) { .db-grid { grid-template-columns: repeat(4, 1fr); } .db-chart { height: 240px; } .db-screen { max-width: 900px; margin: 0 auto; } }
@media (max-width: 340px) { .db-summary { flex-direction: column; align-items: flex-start; } .db-ring { width: 92px; height: 92px; } }
@media (prefers-reduced-motion: reduce) { .db-ring__fill, .db-tu-bar__seg { transition: none; } }

/* ============================================================
   v202 — MÓDULO DE PAGOS DEL JARDINERO (.pg-*)
   El bug del video 26800: #cobros-content colgaba su contenido de
   un <div class="p-4 ..."> suelto dentro de un padre overflow:hidden,
   así que NO había contenedor con scroll y la nav inferior tapaba el
   final de la lista. Ahora el cuerpo ES .content-view-body (scroll) y
   acá se le agrega el colchón inferior real.
   REGLAS QUE NO SE TOCAN:
   - UN SOLO contenedor con scroll vertical (.pg-body). Nada adentro
     vuelve a declarar overflow-y.
   - min-height: 0 en cada hijo flex desplazable (sin esto el hijo se
     niega a encogerse y el scroll nunca aparece).
   - NADA de overflow-x: el ancho se resuelve con wrap y min-width: 0.
   - Colchon inferior = alto de la nav + env(safe-area-inset-bottom) + 24px,
     para que la ultima transaccion y "Cargar mas" queden COMPLETAS
     encima de la navegacion.
   ============================================================ */
#cobros-content { min-height: 0; }
#cobros-content .pg-header { min-height: 0; padding: 0; }
#cobros-content .pg-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
    padding: 1rem;
    padding-bottom: calc(var(--v143-nav-h, 64px) + env(safe-area-inset-bottom, 0px) + 24px);
}
.pg-wrap { max-width: 42rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.pg-panel { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.pg-panel.hidden { display: none; }

/* Pestañas */
.pg-tabs { display: flex; gap: 0.25rem; padding: 0.5rem 0.75rem 0; overflow-x: auto; scrollbar-width: none; }
.pg-tabs::-webkit-scrollbar { display: none; }
.pg-tab {
    flex: 1 0 auto; min-width: max-content; padding: 0.625rem 0.5rem; font-size: 0.8125rem; font-weight: 600;
    color: var(--v143-ink-soft, #64748b); background: none; border: 0; border-bottom: 2px solid transparent;
    cursor: pointer; transition: color .15s, border-color .15s; white-space: nowrap; min-height: 44px;
}
.pg-tab.active { color: #16a34a; border-bottom-color: #16a34a; }
.dark .pg-tab.active { color: #22c55e; border-bottom-color: #22c55e; }
.pg-tab:focus-visible { outline: 2px solid #16a34a; outline-offset: -2px; border-radius: 6px; }

/* Tarjetas */
.pg-card {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 1rem;
    display: flex; flex-direction: column; gap: 0.75rem; min-width: 0;
}
.dark .pg-card { background: #1f2937; border-color: #374151; }
.pg-eyebrow { font-size: 0.6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--v143-ink-soft, #64748b); }
.pg-label { font-size: 0.8125rem; color: var(--v143-ink-soft, #64748b); }
.pg-sub { font-size: 0.75rem; color: var(--v143-ink-soft, #64748b); }
.pg-amount { font-size: 1.75rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.pg-note { font-size: 0.75rem; color: var(--v143-ink-soft, #64748b); line-height: 1.45; }
.pg-link { color: #16a34a; text-decoration: underline; font-size: 0.8125rem; background: none; border: 0; padding: 0; cursor: pointer; }
.dark .pg-link { color: #22c55e; }

/* Tarjeta "Recibís" */
.pg-net { border-color: rgba(22,163,74,.35); background: linear-gradient(180deg, rgba(22,163,74,.07), transparent 70%); }
.dark .pg-net { border-color: rgba(34,197,94,.35); background: linear-gradient(180deg, rgba(34,197,94,.10), transparent 70%); }
.pg-net-top { display: flex; align-items: center; gap: 0.625rem; min-width: 0; }
.pg-net-ico { width: 20px; height: 20px; color: #16a34a; flex: 0 0 auto; }
.dark .pg-net-ico { color: #22c55e; }
.pg-net-amount { font-size: 2rem; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
.pg-net-sub { font-size: 0.8125rem; color: var(--v143-ink-soft, #64748b); }

/* Comisiones */
.pg-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.pg-fee { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.pg-fee-head { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: var(--v143-ink-soft, #64748b); }
.pg-fee-amount { font-size: 1.0625rem; font-weight: 600; }
.pg-fee-note { font-size: 0.6875rem; color: var(--v143-ink-soft, #64748b); }

/* Filas */
.pg-list { display: flex; flex-direction: column; }
.pg-row {
    display: flex; align-items: center; gap: 0.75rem; min-width: 0;
    padding: 0.75rem 0; border-top: 1px solid #f1f5f9; min-height: 44px;
}
.dark .pg-row { border-top-color: rgba(255,255,255,.07); }
.pg-list > .pg-row:first-child { border-top: 0; }
.pg-row-main { flex: 1 1 auto; min-width: 0; }
.pg-row-amt { flex: 0 0 auto; text-align: right; white-space: nowrap; }
.pg-row-main > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-round, .pg-round-lg {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; background: rgba(22,163,74,.10); color: #16a34a;
}
.pg-round { width: 34px; height: 34px; }
.pg-round-lg { width: 40px; height: 40px; }
.dark .pg-round, .dark .pg-round-lg { background: rgba(34,197,94,.14); color: #22c55e; }
.pg-badge {
    flex: 0 0 auto; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    padding: 2px 7px; border-radius: 999px; background: #f1f5f9; color: #475569;
}
.dark .pg-badge { background: rgba(255,255,255,.10); color: #cbd5e1; }

/* Búsqueda y filtros */
.pg-txbar { display: flex; flex-direction: column; gap: 0.625rem; min-width: 0; }
.pg-search { position: relative; display: flex; align-items: center; min-width: 0; }
.pg-search .pg-ico { position: absolute; left: 10px; width: 16px; height: 16px; color: var(--v143-ink-soft, #64748b); pointer-events: none; }
.pg-search-input {
    width: 100%; min-width: 0; padding: 0.625rem 0.75rem 0.625rem 2rem; min-height: 44px;
    border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; font-size: 0.875rem; color: inherit;
}
.dark .pg-search-input { background: #111827; border-color: #374151; }
.pg-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; min-width: 0; }
.pg-chip {
    padding: 0.375rem 0.75rem; border-radius: 999px; border: 1px solid #e5e7eb; background: #fff;
    font-size: 0.75rem; font-weight: 600; color: var(--v143-ink-soft, #64748b); cursor: pointer; min-height: 44px;
}
.pg-chip.active { background: #16a34a; border-color: #16a34a; color: #fff; }
.dark .pg-chip { background: #111827; border-color: #374151; }
.dark .pg-chip.active { background: #22c55e; border-color: #22c55e; color: #05240f; }
.pg-daterange { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; min-width: 0; }
.pg-select {
    padding: 0.5rem 0.625rem; min-height: 44px; border: 1px solid #e5e7eb; border-radius: 10px;
    background: #fff; font-size: 0.8125rem; color: inherit; min-width: 0; max-width: 100%;
}
.dark .pg-select { background: #111827; border-color: #374151; }
.pg-txcount { font-size: 0.75rem; color: var(--v143-ink-soft, #64748b); }

/* Botones */
.pg-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    min-height: 44px; padding: 0.625rem 1rem; border-radius: 10px; border: 1px solid transparent;
    font-size: 0.875rem; font-weight: 600; cursor: pointer; text-align: center; min-width: 0;
}
.pg-btn-brand { background: #16a34a; color: #fff; }
.pg-btn-brand:hover { background: #15803d; }
.pg-btn-ghost { background: #fff; border-color: #e5e7eb; color: inherit; }
.dark .pg-btn-ghost { background: #111827; border-color: #374151; }
.pg-btn:disabled { opacity: .55; cursor: not-allowed; }
.pg-btn:focus-visible { outline: 2px solid #16a34a; outline-offset: 2px; }

/* Vacíos, errores y esqueletos */
.pg-empty { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 2rem 1rem; text-align: center; color: var(--v143-ink-soft, #64748b); }
.pg-skel { border-radius: 8px; background: linear-gradient(90deg, #eef2f7 25%, #f8fafc 37%, #eef2f7 63%); background-size: 400% 100%; animation: pgShimmer 1.3s ease-in-out infinite; }
.dark .pg-skel { background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.10) 37%, rgba(255,255,255,.05) 63%); background-size: 400% 100%; }
@keyframes pgShimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .pg-skel { animation: none; } }

/* Banner de modo prueba y aviso de seguridad bancaria */
.pg-test {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0.75rem; margin-bottom: 0.75rem;
    border-radius: 10px; border: 1px solid #fcd34d; background: #fffbeb; color: #92400e; font-size: 0.75rem; font-weight: 600;
}
.dark .pg-test { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.45); color: #fcd34d; }
.pg-safe { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.6875rem; color: var(--v143-ink-soft, #64748b); line-height: 1.45; }
.pg-safe .pg-ico { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 2px; }
.pg-bank-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pg-ico { width: 16px; height: 16px; flex: 0 0 auto; }

/* Pantallas angostas: 320 px sigue entrando sin scroll horizontal */
@media (max-width: 360px) {
    .pg-grid2 { grid-template-columns: 1fr; }
    .pg-amount { font-size: 1.5rem; }
    .pg-net-amount { font-size: 1.75rem; }
    .pg-tab { font-size: 0.75rem; padding-left: 0.375rem; padding-right: 0.375rem; }
    .pg-row { gap: 0.5rem; }
    .pg-row-main > * { font-size: 0.8125rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   REGISTRO EN CUATRO PASOS (signup-v2, 21 sep 2026)

   Identidad de LawnTrail: verde y blanco, tarjetas redondeadas, logo
   compacto. Sin espacios muertos: el registro se completa con el teclado
   abierto en un teléfono de 320 px, así que cada bloque vertical cuenta.

   ⛔ TODO control interactivo mide 44 px o más de alto. Es el mínimo táctil
   y también lo que evita que el pulgar abra el campo de al lado.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Indicador de pasos ──────────────────────────────────────────────── */
.su-dot {
    width: 28px; height: 28px; border-radius: 9999px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.8125rem; font-weight: 700;
    background: #e7e5e4; color: #78716c;
    transition: background-color .18s ease, color .18s ease;
}
.dark .su-dot { background: #374151; color: #9ca3af; }
.su-dot-on { background: #22c55e; color: #fff; }
.dark .su-dot-on { background: #22c55e; color: #052e16; }
.su-dot-done { background: #16a34a; color: #fff; }
.su-line { display: block; width: 26px; height: 2px; background: #e7e5e4; }
.dark .su-line { background: #374151; }
.su-line-on { background: #22c55e; }
@media (max-width: 340px) { .su-line { width: 16px; } }

/* ── Campos ──────────────────────────────────────────────────────────── */
.su-label {
    display: block; font-size: 0.8125rem; font-weight: 600;
    color: #44403c; margin-bottom: 0.25rem;
}
.dark .su-label { color: #d1d5db; }
.su-opt { font-weight: 400; color: #a8a29e; }
.dark .su-opt { color: #9ca3af; }

/* TRAMPA: dentro de un <select> el recorte NO aparece en scrollWidth: la
   flecha nativa se come ~18 px y el texto sale cortado sin que ningun
   chequeo de desborde lo vea. A 320 px "United States" se leia "United
   Stat". Las dos filas de dos columnas del paso 2 se apilan por debajo de
   400 px, que es donde dejan de caber.
   El punto de quiebre lo fija el ESPANOL, no el ingles: "Estados Unidos" es
   ~25 % mas largo que "United States" y todavia se cortaba a 360 px con el
   corte puesto en 359. Medir en los DOS idiomas, o el corte queda en el
   ancho equivocado (leccion 8.g). */
.su-par { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
@media (max-width: 399px) { .su-par { grid-template-columns: 1fr; } }

.su-input {
    width: 100%; min-height: 46px;
    background: #f5f5f4; color: #1c1917;
    border: 1px solid #d6d3d1; border-radius: 0.6rem;
    padding: 0.625rem 0.75rem; font-size: 1rem;   /* 16px: iOS no hace zoom */
    transition: border-color .15s ease, box-shadow .15s ease;
}
.dark .su-input { background: #1f2937; color: #f3f4f6; border-color: #374151; }
.su-input::placeholder { color: #a8a29e; }
.dark .su-input::placeholder { color: #6b7280; }
.su-input:focus {
    outline: none; border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.28);
}
.su-input[aria-invalid="true"] { border-color: #ef4444; }
.su-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25); }

.su-eye {
    position: absolute; top: 0; right: 0; height: 100%;
    width: 46px; display: flex; align-items: center; justify-content: center;
    color: #78716c; border-radius: 0 0.6rem 0.6rem 0;
}
.dark .su-eye { color: #9ca3af; }
.su-eye:focus-visible { outline: 2px solid #22c55e; outline-offset: -2px; }

.su-help { font-size: 0.75rem; color: #78716c; margin-top: 0.25rem; }
.dark .su-help { color: #9ca3af; }
/* El error NO reserva alto cuando está vacío: en un formulario de 12 campos,
   12 huecos de 20 px son 240 px de scroll que nadie necesita. */
.su-err { font-size: 0.75rem; color: #dc2626; margin-top: 0.25rem; }
.su-err:empty { display: none; }
.dark .su-err { color: #f87171; }

/* ── Botones ─────────────────────────────────────────────────────────── */
.su-primary {
    min-height: 48px; width: 100%;
    background: #22c55e; color: #fff; font-weight: 700;
    border-radius: 0.7rem; padding: 0.75rem 1rem;
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    transition: background-color .15s ease, opacity .15s ease;
}
.su-primary:hover:not(:disabled) { background: #16a34a; }
.su-primary:disabled { opacity: .55; cursor: not-allowed; }
.su-primary:focus-visible { outline: 3px solid #86efac; outline-offset: 2px; }
.su-secondary {
    min-height: 48px; flex: 0 0 auto; padding: 0.75rem 1.25rem;
    background: transparent; color: #16a34a; font-weight: 700;
    border: 1px solid #86efac; border-radius: 0.7rem;
}
.dark .su-secondary { color: #4ade80; border-color: #166534; }
.su-secondary:focus-visible { outline: 3px solid #86efac; outline-offset: 2px; }
.su-free-link {
    display: block; width: 100%; min-height: 44px; margin-top: 0.75rem;
    color: #57534e; font-weight: 600; font-size: 0.875rem; text-decoration: underline;
}
.dark .su-free-link { color: #d1d5db; }
.su-free-link:focus-visible { outline: 2px solid #22c55e; outline-offset: 2px; border-radius: .4rem; }

/* ── Selector mensual / anual ────────────────────────────────────────── */
.su-toggle {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem;
    background: #f5f5f4; border-radius: 0.7rem; padding: 0.25rem; margin-bottom: 0.875rem;
}
.dark .su-toggle { background: #1f2937; }
.su-toggle-btn {
    min-height: 44px; border-radius: 0.55rem; font-weight: 700; font-size: 0.875rem;
    color: #57534e; display: flex; align-items: center; justify-content: center; gap: .35rem;
}
.dark .su-toggle-btn { color: #d1d5db; }
.su-toggle-on { background: #22c55e; color: #fff; }
.dark .su-toggle-on { background: #22c55e; color: #052e16; }
.su-toggle-btn:focus-visible { outline: 2px solid #16a34a; outline-offset: -2px; }
.su-saving { font-size: 0.6875rem; font-weight: 700; opacity: .9; }

/* ── Tarjetas de plan ────────────────────────────────────────────────── */
.su-plan {
    width: 100%; text-align: left; display: block;
    border: 2px solid #e7e5e4; border-radius: 0.8rem;
    padding: 0.875rem 1rem; background: #fff; min-height: 48px;
    transition: border-color .15s ease, background-color .15s ease;
}
.dark .su-plan { background: #111827; border-color: #374151; }
.su-plan:focus-visible { outline: 3px solid #86efac; outline-offset: 2px; }
.su-plan[aria-checked="true"] { border-color: #22c55e; background: #f0fdf4; }
.dark .su-plan[aria-checked="true"] { background: #052e16; border-color: #22c55e; }
.su-plan-head { display: flex; align-items: center; gap: .5rem; }
.su-plan-radio {
    width: 20px; height: 20px; border-radius: 9999px; flex: 0 0 auto;
    border: 2px solid #d6d3d1; display: inline-block; position: relative;
}
.dark .su-plan-radio { border-color: #4b5563; }
.su-plan[aria-checked="true"] .su-plan-radio { border-color: #22c55e; }
.su-plan[aria-checked="true"] .su-plan-radio::after {
    content: ''; position: absolute; inset: 3px; border-radius: 9999px; background: #22c55e;
}
.su-plan-name { font-weight: 700; font-size: 0.9375rem; color: #1c1917; }
.dark .su-plan-name { color: #f3f4f6; }
.su-plan-price { font-size: 1.25rem; font-weight: 800; color: #1c1917; }
.dark .su-plan-price { color: #fff; }
.su-plan-per { font-size: 0.8125rem; font-weight: 600; color: #78716c; }
.dark .su-plan-per { color: #9ca3af; }
.su-plan-limits { font-size: 0.75rem; color: #57534e; margin-top: .15rem; }
.dark .su-plan-limits { color: #9ca3af; }
.su-badge {
    margin-left: auto; font-size: 0.625rem; font-weight: 800; letter-spacing: .03em;
    background: #16a34a; color: #fff; padding: .2rem .45rem; border-radius: .35rem;
}
/* Catálogo caído: un guion, jamás "$0". Un cero se lee como "es gratis". */
.su-plan-unavailable .su-plan-price { color: #a8a29e; }

/* ── Prueba ──────────────────────────────────────────────────────────── */
.su-trial {
    display: flex; gap: .625rem; align-items: flex-start; margin-top: .875rem;
    background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 0.7rem; padding: .75rem;
}
.dark .su-trial { background: #052e16; border-color: #166534; }
.su-trial-icon { color: #16a34a; flex: 0 0 auto; }
.dark .su-trial-icon { color: #4ade80; }

/* ── Resumen del paso 4 ──────────────────────────────────────────────── */
.su-sum {
    display: flex; align-items: center; gap: .625rem;
    border: 1px solid #e7e5e4; border-radius: 0.7rem; padding: .625rem .75rem; background: #fff;
}
.dark .su-sum { background: #111827; border-color: #374151; }
.su-sum-ico { color: #16a34a; flex: 0 0 auto; }
.su-sum-k { font-size: .6875rem; color: #78716c; }
.dark .su-sum-k { color: #9ca3af; }
.su-sum-v { font-size: .875rem; font-weight: 700; color: #1c1917; }
.dark .su-sum-v { color: #f3f4f6; }
.su-sum-edit { margin-left: auto; color: #16a34a; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.su-sum-edit:focus-visible { outline: 2px solid #22c55e; outline-offset: -2px; border-radius: .4rem; }

/* ── Casillas ────────────────────────────────────────────────────────── */
.su-check {
    display: flex; gap: .625rem; align-items: flex-start;
    font-size: .8125rem; color: #44403c; line-height: 1.45;
    padding: .375rem 0; min-height: 44px; cursor: pointer;
}
.dark .su-check { color: #d1d5db; }
.su-checkbox {
    width: 20px; height: 20px; flex: 0 0 auto; margin-top: .1rem;
    accent-color: #22c55e; cursor: pointer;
}
.su-checkbox:focus-visible { outline: 2px solid #22c55e; outline-offset: 2px; }
.su-check-renewal {
    background: #f0fdf4; border: 1px solid #bbf7d0;
    border-radius: .6rem; padding: .625rem .75rem;
}
.dark .su-check-renewal { background: #052e16; border-color: #166534; }
.su-link { color: #16a34a; font-weight: 600; text-decoration: underline; }
.dark .su-link { color: #4ade80; }
.su-link:focus-visible { outline: 2px solid #22c55e; outline-offset: 2px; border-radius: .2rem; }

/* ── Avisos ──────────────────────────────────────────────────────────── */
.su-note { font-size: .8125rem; color: #78716c; margin-top: .75rem; }
.dark .su-note { color: #9ca3af; }
.su-alert {
    font-size: .8125rem; color: #991b1b; background: #fef2f2;
    border: 1px solid #fecaca; border-radius: .6rem; padding: .625rem .75rem;
}
.dark .su-alert { color: #fca5a5; background: #450a0a; border-color: #7f1d1d; }
.su-done-icon {
    width: 56px; height: 56px; border-radius: 9999px; margin: 0 auto;
    background: #dcfce7; color: #16a34a; display: flex; align-items: center; justify-content: center;
}
.dark .su-done-icon { background: #052e16; color: #4ade80; }

/* ── El teclado del móvil no puede tapar el campo activo ─────────────── */
#signupScreen { padding-bottom: 1rem; }
@media (max-width: 430px) {
    #signupScreen .su-input { font-size: 16px; }
}
/* 320 px sin scroll horizontal */
@media (max-width: 340px) {
    .su-plan { padding: .75rem; }
    .su-plan-price { font-size: 1.125rem; }
    .su-toggle-btn { font-size: .8125rem; }
    .su-check { font-size: .78125rem; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ZELLE V2 (21 sep 2026 · rediseño multi-cuenta 22 sep) — Pagos por Zelle.
   Tokens del rediseño v145 (claro/oscuro), prefijo zl-, móvil primero (360–430 px).
   Fondo blanco/verde suave, bordes finos, esquinas redondeadas, títulos azul oscuro
   (--v145-ink), badges compactos. Solo dos colores fuera de los tokens: el morado de
   Zelle (#6d1ed4, identidad del producto) y el azul del botón de Google.
   ═══════════════════════════════════════════════════════════════════════════ */
.zl-beta { display:inline-block; font-size:.625rem; font-weight:800; letter-spacing:.08em; padding:.15rem .45rem; border-radius:999px; background:var(--v145-accent); color:var(--v145-accent-ink); vertical-align:middle; line-height:1.2; }
.zl-head { display:flex; align-items:center; gap:.25rem; }
.zl-headback { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:999px; color:var(--v145-ink); background:transparent; border:0; }
.zl-headback:hover { background:var(--v145-card-2); }
.zl-headtitle { display:flex; align-items:center; gap:.5rem; min-width:0; color:var(--v145-ink); }
/* ⚠️ `.content-view-body` reserva 96 px para que la barra fija no tape el final de la
   lista. `.zl-body` viene DESPUÉS en la hoja y con la misma especificidad, así que lo
   pisaba con 16 px: la última transacción quedaba 47 px DEBAJO de #bottom-nav (medido
   a 320 px con scratchpad/zelle-v2/medir-fondo.mjs). No se veía en ninguna captura
   porque el selector de escenarios del modo demo —que NO existe en producción— añadía
   justo el alto que faltaba. Se reserva la nav + aire, como #clients-content. */
.zl-body { padding-bottom: calc(var(--v143-nav-h, 64px) + 1.5rem + var(--safe-bottom, 0px)); }
.zl-root { max-width:42rem; margin:0 auto; display:flex; flex-direction:column; gap:.75rem; min-width:0; color:var(--v145-ink); }
.zl-demo { display:flex; justify-content:center; padding:.4rem .75rem; border-radius:10px; font-size:.6875rem; font-weight:700; letter-spacing:.04em; background:rgba(217,119,6,.12); color:var(--v145-amber); border:1px dashed rgba(217,119,6,.5); }
.zl-card { background:var(--v145-card); border:1px solid var(--v145-line); border-radius:var(--v145-radius-sm); padding:.875rem; display:flex; flex-direction:column; gap:.5rem; min-width:0; }
.zl-eyebrow { font-size:.6875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--v145-ink-soft); margin:.25rem 0 -.25rem; }
.zl-hint { font-size:.8125rem; color:var(--v145-ink-soft); margin:0; }
.zl-h2 { font-size:1.375rem; font-weight:800; margin:0; color:var(--v145-ink); }
.zl-h3 { font-size:1.125rem; font-weight:800; margin:0; color:var(--v145-ink); }
.zl-left { text-align:left; }

/* ── logos ── */
.zl-logo { display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:14px; font-weight:900; font-size:1.375rem; flex:0 0 auto; }
.zl-logo-sm { width:40px; height:40px; border-radius:11px; font-size:1.125rem; }
.zl-logo-xs { width:30px; height:30px; border-radius:8px; font-size:.875rem; }
.zl-logo-gmail { background:#fff; color:#d93025; border:1px solid var(--v145-line); }
.zl-logo-gmail svg { width:58%; height:58%; }
.zl-logo-zelle { background:#6d1ed4; color:#fff; }
.dark .zl-logo-gmail { background:#1f2937; }

/* ── no conectada ── */
.zl-hero { display:flex; flex-direction:column; align-items:center; text-align:center; gap:.75rem; padding:.25rem 0; }
.zl-hero-sub { color:var(--v145-ink-soft); font-size:.9375rem; margin:0; line-height:1.45; }
.zl-flow { display:flex; align-items:center; gap:.75rem; padding:.875rem 1.25rem; border-radius:var(--v145-radius); background:var(--v145-card-2); }
.zl-dots { color:var(--v145-ink-soft); letter-spacing:.2em; font-weight:700; }
.zl-benefits { list-style:none; margin:0; padding:0; width:100%; display:flex; flex-direction:column; gap:.5rem; text-align:left; }
.zl-benefits li { display:flex; gap:.75rem; align-items:flex-start; padding:.625rem .75rem; border-radius:var(--v145-radius-sm); background:var(--v145-accent-soft); border:1px solid rgba(22,163,74,.18); }
.zl-benefits b { display:block; font-size:.9375rem; color:var(--v145-ink); }
.zl-benefits p { margin:.125rem 0 0; font-size:.8125rem; color:var(--v145-ink-soft); }
.zl-bico { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:999px; flex:0 0 auto; background:var(--v145-card); color:var(--v145-accent); border:1px solid rgba(22,163,74,.25); }
.zl-bico svg { width:18px; height:18px; }
.zl-lock { display:flex; align-items:center; justify-content:center; gap:.375rem; font-size:.8125rem; color:var(--v145-ink-soft); margin:0; }
.zl-lock svg { width:14px; height:14px; }

/* ── botones ── */
.zl-primary { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; width:100%; min-height:48px; padding:.75rem 1rem; border-radius:12px; font-weight:700; font-size:.9375rem; border:0; background:var(--v145-accent); color:var(--v145-accent-ink); }
.zl-primary:disabled { opacity:.55; }
.zl-primary-sm { min-height:44px; width:auto; padding:.5rem 1rem; flex:1 1 auto; }
.zl-g { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:6px; background:#fff; color:#1a73e8; font-weight:900; font-size:.9375rem; }
.zl-secondary { display:inline-flex; align-items:center; justify-content:center; gap:.375rem; min-height:44px; padding:.5rem .875rem; border-radius:12px; font-weight:600; font-size:.875rem; background:var(--v145-card); color:var(--v145-ink); border:1px solid var(--v145-line); flex:1 1 auto; text-decoration:none; }
.zl-secondary svg { width:16px; height:16px; }
.zl-full { width:100%; }
.zl-ghost { display:inline-flex; align-items:center; justify-content:center; gap:.375rem; min-height:44px; min-width:44px; padding:.375rem .625rem; border-radius:10px; background:transparent; color:var(--v145-ink-soft); border:0; font-size:.8125rem; font-weight:600; }
.zl-ghost svg { width:18px; height:18px; }
.zl-x { min-width:44px; min-height:44px; }
.zl-linkrow { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:48px; padding:.75rem 1rem; border-radius:var(--v145-radius-sm); background:var(--v145-card); border:1px solid var(--v145-line); color:var(--v145-ink); font-weight:600; }
.zl-linkrow svg { width:18px; height:18px; color:var(--v145-ink-soft); }

/* ── conectada (tarjeta compacta) ── */
.zl-conn { gap:.5rem; }
.zl-conn-top { display:flex; align-items:center; gap:.625rem; }
.zl-conn-main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.zl-conn-main b { display:flex; align-items:center; gap:.375rem; font-size:.9375rem; color:var(--v145-ink); }
.zl-ok-ico { width:16px; height:16px; color:var(--v145-accent); }
.zl-emails { list-style:none; margin:0; padding:0 0 0 calc(40px + .625rem); display:flex; flex-direction:column; gap:.125rem; font-size:.8125rem; color:var(--v145-ink); }
.zl-emails li { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zl-warn { display:flex; align-items:center; gap:.375rem; margin:0; font-size:.75rem; font-weight:600; color:var(--v145-amber); }
.zl-warn svg { width:14px; height:14px; }
.zl-manage { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:44px; margin:.25rem -.875rem -.875rem; width:calc(100% + 1.75rem); padding:.625rem .875rem; border:0; border-top:1px solid var(--v145-line-soft); background:transparent; color:var(--v145-accent); font-weight:700; font-size:.875rem; border-radius:0 0 var(--v145-radius-sm) var(--v145-radius-sm); }
.zl-manage svg { width:18px; height:18px; }
.zl-done { display:flex; align-items:center; gap:.625rem; padding:.75rem .875rem; border-radius:var(--v145-radius-sm); border:1px solid rgba(22,163,74,.3); background:var(--v145-accent-soft); }
.zl-done svg { width:26px; height:26px; color:var(--v145-accent); flex:0 0 auto; }
.zl-done b { display:block; color:var(--v145-ink); font-size:.9375rem; }
.zl-done p { margin:0; font-size:.8125rem; color:var(--v145-ink-soft); }
.zl-error { display:flex; align-items:flex-start; gap:.625rem; padding:.875rem; border-radius:var(--v145-radius-sm); border:1px solid var(--v145-danger-line); background:var(--v145-danger-soft); }
.zl-error > svg { width:22px; height:22px; color:var(--v145-danger); flex:0 0 auto; }
.zl-error b { color:var(--v145-ink); display:block; }
.zl-error p { margin:.125rem 0 0; font-size:.8125rem; color:var(--v145-ink-soft); }

/* ── tabs, chips, badge ── */
.zl-tabs { display:flex; gap:.25rem; border-bottom:1px solid var(--v145-line-soft); }
.zl-tab { flex:1 1 0; min-height:44px; padding:.5rem .25rem; font-size:.8125rem; font-weight:700; color:var(--v145-ink-soft); background:none; border:0; border-bottom:2px solid transparent; white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; gap:.375rem; }
.zl-tab.active { color:var(--v145-accent); border-bottom-color:var(--v145-accent); }
.zl-badge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 .3rem; border-radius:999px; background:var(--v145-danger); color:#fff; font-size:.6875rem; font-weight:800; line-height:1; }
.zl-chips { display:flex; gap:.375rem; overflow-x:auto; scrollbar-width:none; padding-bottom:.125rem; }
.zl-chips::-webkit-scrollbar { display:none; }
.zl-chip { flex:0 0 auto; min-height:36px; padding:.375rem .875rem; border-radius:999px; font-size:.8125rem; font-weight:600; background:var(--v145-card-2); color:var(--v145-ink-soft); border:1px solid transparent; }
.zl-chip.active { background:var(--v145-accent); color:var(--v145-accent-ink); }

/* ── resumen ── */
.zl-sumhead { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.zl-sumhead h3 { margin:0; font-size:1rem; font-weight:800; color:var(--v145-ink); }
.zl-period { position:relative; display:inline-flex; align-items:center; }
.zl-period select { appearance:none; -webkit-appearance:none; min-height:36px; padding:.25rem 1.75rem .25rem .625rem; border-radius:10px; border:1px solid var(--v145-line); background:var(--v145-card); color:var(--v145-ink-soft); font-size:.8125rem; font-weight:600; }
.zl-period svg { position:absolute; right:.5rem; width:14px; height:14px; pointer-events:none; color:var(--v145-ink-soft); }
.zl-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.625rem; }
.zl-kpi { border-radius:var(--v145-radius-sm); padding:.75rem; border:1px solid var(--v145-line); background:var(--v145-card); display:flex; flex-direction:column; gap:.125rem; min-width:0; }
.zl-kpi-head { display:flex; align-items:center; gap:.375rem; font-size:.75rem; font-weight:700; color:var(--v145-ink); }
.zl-kpi-ico { display:inline-flex; width:22px; height:22px; border-radius:999px; align-items:center; justify-content:center; flex:0 0 auto; }
.zl-kpi-ico svg { width:13px; height:13px; }
.zl-kpi-n { font-size:1.5rem; font-weight:800; line-height:1.1; color:var(--v145-ink); margin-top:.125rem; }
.zl-kpi-amt { font-size:.9375rem; font-weight:700; }
.zl-kpi-ok { background:var(--v145-accent-soft); border-color:rgba(22,163,74,.2); } .zl-kpi-ok .zl-kpi-ico { background:var(--v145-accent); color:#fff; } .zl-kpi-ok .zl-kpi-amt { color:var(--v145-accent); }
.zl-kpi-pending { background:rgba(217,119,6,.08); border-color:rgba(217,119,6,.22); } .zl-kpi-pending .zl-kpi-ico { background:var(--v145-amber); color:#fff; } .zl-kpi-pending .zl-kpi-amt { color:var(--v145-amber); }
.zl-kpi-review { background:rgba(37,99,235,.07); border-color:rgba(37,99,235,.2); } .zl-kpi-review .zl-kpi-ico { background:var(--v145-info); color:#fff; } .zl-kpi-review .zl-kpi-amt { color:var(--v145-info); }
.zl-kpi-total .zl-kpi-ico { background:var(--v145-card-2); color:var(--v145-ink); } .zl-kpi-total .zl-kpi-amt { color:var(--v145-ink); font-size:1.25rem; margin-top:.375rem; }

/* ── listas compactas ── */
.zl-search { position:relative; }
.zl-search svg { position:absolute; left:.75rem; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--v145-ink-soft); pointer-events:none; }
.zl-search input { width:100%; min-height:44px; padding:.5rem .75rem .5rem 2.25rem; border-radius:12px; border:1px solid var(--v145-line); background:var(--v145-card); color:var(--v145-ink); font-size:.9375rem; }
.zl-list { display:flex; flex-direction:column; border-radius:var(--v145-radius-sm); border:1px solid var(--v145-line); background:var(--v145-card); overflow:hidden; }
.zl-row { display:flex; align-items:center; gap:.5rem; width:100%; min-height:56px; padding:.625rem .75rem; text-align:left; background:transparent; border:0; border-top:1px solid var(--v145-line-soft); color:var(--v145-ink); }
.zl-list > .zl-row:first-child { border-top:0; }
.zl-row:active { background:var(--v145-card-2); }
.zl-row-main { display:flex; flex-direction:column; min-width:0; flex:1 1 auto; gap:.125rem; }
.zl-row-top { display:flex; align-items:center; gap:.5rem; min-width:0; }
.zl-row-top b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.9375rem; }
.zl-row-sub { font-size:.75rem; color:var(--v145-ink-soft); }
.zl-row-side { display:flex; flex-direction:column; align-items:flex-end; gap:.125rem; flex:0 0 auto; }
.zl-row-ref { font-size:.6875rem; color:var(--v145-ink-soft); font-family:ui-monospace, SFMono-Regular, Menlo, monospace; }
.zl-chev { width:16px; height:16px; color:var(--v145-ink-soft); flex:0 0 auto; }
.zl-amt { font-weight:800; font-variant-numeric:tabular-nums; color:var(--v145-ink); }
.zl-amt-lg { font-size:1.25rem; }
.zl-amt-xl { font-size:1.875rem; letter-spacing:-.02em; line-height:1.1; }
/* Importe que NO se pudo leer del correo. Se escribe con la tipografía del texto
   y no con la de las cifras a propósito: el peso 800 y el tamaño grande de .zl-amt
   son la señal de "esto es plata que entró", y una frase con esa señal se lee como
   un importe. Acá el tamaño baja al del cuerpo y el color pasa al apagado, en los
   dos temas, para que ningún vistazo rápido lo confunda con un monto real. */
.zl-amt.zl-amt-na { font-size:.9375rem; font-weight:600; color:var(--v145-ink-soft); letter-spacing:0; line-height:1.3; }
.zl-row-side .zl-amt.zl-amt-na { font-size:.8125rem; text-align:right; }
.zl-st { display:inline-flex; align-items:center; gap:.25rem; height:22px; padding:0 .5rem; border-radius:999px; font-size:.6875rem; font-weight:700; white-space:nowrap; flex:0 0 auto; }
.zl-st svg { width:11px; height:11px; }
.zl-st-ok { background:var(--v145-accent-soft); color:var(--v145-accent); }
.zl-st-pending { background:rgba(217,119,6,.14); color:var(--v145-amber); }
.zl-st-review { background:rgba(37,99,235,.12); color:var(--v145-info); }
.zl-st-muted { background:var(--v145-card-2); color:var(--v145-ink-soft); }
.zl-empty { display:flex; flex-direction:column; align-items:center; gap:.5rem; padding:2rem 1rem; text-align:center; color:var(--v145-ink-soft); }
.zl-empty svg { width:32px; height:32px; opacity:.6; }
.zl-empty p { margin:0; font-size:.9375rem; }
.zl-empty-sm { padding:1rem; text-align:center; color:var(--v145-ink-soft); font-size:.875rem; margin:0; }

/* ── por asignar ── */
.zl-cards { display:flex; flex-direction:column; gap:.625rem; }
.zl-pcard { background:var(--v145-card); border:1px solid var(--v145-line); border-radius:var(--v145-radius-sm); padding:.75rem .875rem; display:flex; flex-direction:column; gap:.2rem; min-width:0; }
.zl-pcard-top { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.zl-pcard > b { color:var(--v145-ink); font-size:.9375rem; }
.zl-kv { display:flex; gap:.5rem; font-size:.8125rem; margin-top:.125rem; min-width:0; }
.zl-kv span { color:var(--v145-ink-soft); flex:0 0 auto; }
.zl-kv b { color:var(--v145-ink); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zl-reason { margin:.125rem 0 0; font-size:.75rem; color:var(--v145-ink-soft); }
.zl-pcard-actions { display:flex; gap:.5rem; margin-top:.5rem; }

/* ── avisos del detalle: posible duplicado y origen sin verificar (fase 2-B) ── */
.zl-note { display:flex; flex-direction:column; gap:.25rem; padding:.75rem .875rem; border-radius:var(--v145-radius-sm); font-size:.8125rem; }
.zl-note b { font-size:.875rem; color:var(--v145-ink); }
.zl-note span { color:var(--v145-ink-soft); }
.zl-note-dup { background:rgba(217,119,6,.10); border:1px solid rgba(217,119,6,.30); }
.zl-note-warn { background:rgba(37,99,235,.10); border:1px solid rgba(37,99,235,.25); }
.zl-dup-row { font-weight:600; color:var(--v145-ink) !important; }
.zl-linkish { align-self:flex-start; min-height:44px; background:none; border:0; padding:0; font-weight:700; font-size:.8125rem; color:var(--v145-info); text-decoration:underline; }

/* ── detalle ── */
.zl-back { display:inline-flex; align-items:center; gap:.5rem; min-height:44px; background:none; border:0; color:var(--v145-ink); font-weight:700; padding:0; }
.zl-back svg { width:20px; height:20px; }
.zl-status { display:flex; align-items:center; gap:.625rem; padding:.75rem .875rem; border-radius:var(--v145-radius-sm); }
.zl-status.zl-st-ok { border:1px solid rgba(22,163,74,.25); }
.zl-status.zl-st-pending { border:1px solid rgba(217,119,6,.3); }
.zl-status.zl-st-review { border:1px solid rgba(37,99,235,.25); }
.zl-status.zl-st-muted { border:1px solid var(--v145-line); }
.zl-status-ico { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:999px; background:currentColor; flex:0 0 auto; }
.zl-status-ico svg { width:16px; height:16px; color:#fff; }
.zl-status b { display:block; font-size:.9375rem; color:inherit; }
.zl-status span:last-child { font-size:.75rem; color:var(--v145-ink-soft); }
.zl-detail { gap:.25rem; }
.zl-drows { display:flex; flex-direction:column; margin-top:.5rem; }
.zl-drow { display:flex; justify-content:space-between; gap:.75rem; padding:.5rem 0; border-top:1px solid var(--v145-line-soft); font-size:.8125rem; }
.zl-drow span { color:var(--v145-ink-soft); flex:0 0 auto; }
.zl-drow b { text-align:right; min-width:0; overflow-wrap:anywhere; color:var(--v145-ink); font-weight:600; }
.zl-mono { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.02em; }
.zl-clientrow, .zl-opt { display:flex; align-items:center; gap:.625rem; width:100%; min-height:52px; padding:.5rem .75rem; border-radius:12px; background:var(--v145-accent-soft); border:1px solid rgba(22,163,74,.2); color:var(--v145-ink); text-align:left; }
.zl-opt { background:var(--v145-card); border-color:var(--v145-line); }
.zl-clientrow > div, .zl-opt > div { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.zl-clientrow b, .zl-opt b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.9375rem; }
.zl-clientrow > svg:last-child { width:18px; height:18px; color:var(--v145-ink-soft); flex:0 0 auto; }
.zl-house { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:10px; background:var(--v145-accent); color:#fff; flex:0 0 auto; }
.zl-house svg { width:17px; height:17px; }

/* ── cuentas ── */
.zl-accs { display:flex; flex-direction:column; gap:.5rem; }
.zl-acc { background:var(--v145-card); border:1px solid var(--v145-line); border-radius:var(--v145-radius-sm); overflow:hidden; }
.zl-acc-row { display:flex; align-items:center; gap:.625rem; padding:.625rem .625rem .625rem .75rem; }
.zl-acc-main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:.1rem; }
.zl-acc-main b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.9375rem; color:var(--v145-ink); }
.zl-acc-st { display:inline-flex; align-items:center; gap:.375rem; font-size:.75rem; font-weight:600; color:var(--v145-ink); }
.zl-dot { width:8px; height:8px; border-radius:999px; display:inline-block; }
.zl-dot-ok { background:var(--v145-accent); } .zl-dot-warn { background:var(--v145-amber); } .zl-dot-off { background:var(--v145-ink-soft); opacity:.5; }
.zl-acc-menu { display:flex; flex-direction:column; border-top:1px solid var(--v145-line-soft); background:var(--v145-card-2); }
.zl-acc-menu button { display:flex; align-items:center; gap:.625rem; min-height:44px; padding:.5rem .875rem; background:none; border:0; text-align:left; font-size:.875rem; font-weight:600; color:var(--v145-ink); }
.zl-acc-menu button svg { width:16px; height:16px; color:var(--v145-ink-soft); }
.zl-acc-menu button.zl-danger { color:var(--v145-danger); } .zl-acc-menu button.zl-danger svg { color:var(--v145-danger); }

/* ── bottom sheet ── */
.zl-sheet { position:fixed; inset:0; z-index:1100; pointer-events:none; }
.zl-sheet-backdrop { position:absolute; inset:0; background:rgba(15,23,42,.55); opacity:0; transition:opacity .2s; }
.zl-sheet-panel { position:absolute; left:0; right:0; bottom:0; max-height:88vh; display:flex; flex-direction:column; background:var(--v145-card); border-radius:22px 22px 0 0; box-shadow:0 -12px 40px rgba(0,0,0,.25); transform:translateY(100%); transition:transform .25s ease; padding-bottom:var(--safe-bottom, 0px); color:var(--v145-ink); }
.zl-sheet.is-open { pointer-events:auto; }
.zl-sheet.is-open .zl-sheet-backdrop { opacity:1; }
.zl-sheet.is-open .zl-sheet-panel { transform:translateY(0); }
.zl-sheet-grip { width:40px; height:4px; border-radius:999px; background:var(--v145-line); margin:.5rem auto 0; }
.zl-sheet-head { display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem; padding:.5rem 1rem .25rem; }
.zl-sheet-head h3 { margin:0; font-size:1.125rem; font-weight:800; color:var(--v145-ink); }
.zl-sheet-body { flex:1 1 auto; overflow-y:auto; padding:.25rem 1rem .5rem; display:flex; flex-direction:column; gap:.5rem; -webkit-overflow-scrolling:touch; }
.zl-sheet-search { position:sticky; top:0; background:var(--v145-card); padding-top:.25rem; z-index:1; }
.zl-sheet-list { display:flex; flex-direction:column; gap:.375rem; }
.zl-sheet-foot { padding:.75rem 1rem; border-top:1px solid var(--v145-line-soft); background:var(--v145-card); }
.zl-sheet-actions { display:flex; gap:.5rem; }
.zl-radio { cursor:pointer; }
.zl-radio input { width:20px; height:20px; accent-color:var(--v145-accent); flex:0 0 auto; margin:0; }
.zl-radio.is-picked { border-color:var(--v145-accent); background:var(--v145-accent-soft); }
.zl-confirm { padding:.5rem 0; }
.zl-confirm b { display:block; font-size:1rem; color:var(--v145-ink); }
.zl-confirm p { margin:.375rem 0 0; font-size:.9375rem; color:var(--v145-ink-soft); }
body.zl-sheet-open { overflow:hidden; }

/* ── ficha del cliente ── */
.zl-refcard { border:1px solid var(--v145-line); background:var(--v145-card); border-radius:var(--v145-radius-sm); padding:.75rem; display:flex; flex-direction:column; gap:.5rem; margin-bottom:.75rem; }
.zl-refcard-title { margin:0; font-size:.875rem; font-weight:700; color:var(--v145-ink); }
.zl-refcard-row { display:flex; align-items:center; gap:.625rem; }
.zl-refcode { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:1.25rem; font-weight:800; letter-spacing:.06em; color:var(--v145-ink); flex:1 1 auto; }
.zl-grow { flex:1 1 auto; }
.zl-copy { display:inline-flex; align-items:center; gap:.375rem; min-height:40px; padding:.375rem .75rem; border-radius:10px; font-size:.8125rem; font-weight:700; background:var(--v145-accent-soft); color:var(--v145-accent); border:1px solid rgba(22,163,74,.25); flex:0 0 auto; }
.zl-copy svg { width:15px; height:15px; }
.zl-refcard-hint { margin:0; font-size:.75rem; color:var(--v145-ink-soft); }
.zl-settings-card { min-height:64px; }

/* ── selector de escenarios (SOLO modo demo; no existe en producción) ── */
.zl-dev { position:sticky; bottom:.25rem; align-self:flex-end; display:flex; margin-top:.5rem; }
.zl-dev label { display:inline-flex; align-items:center; gap:.375rem; padding:.25rem .5rem .25rem .625rem; border-radius:999px; background:rgba(217,119,6,.14); border:1px dashed rgba(217,119,6,.5); color:var(--v145-amber); font-size:.6875rem; font-weight:700; }
.zl-dev select { min-height:28px; border-radius:8px; border:1px solid rgba(217,119,6,.4); background:var(--v145-card); color:var(--v145-ink); font-size:.75rem; }

/* ── loading ── */
.zl-skel-wrap { display:flex; flex-direction:column; gap:.75rem; }
.zl-skel { height:76px; border-radius:var(--v145-radius-sm); background:linear-gradient(90deg, var(--v145-card-2) 25%, var(--v145-card) 50%, var(--v145-card-2) 75%); background-size:200% 100%; animation:zl-shimmer 1.2s infinite; }
@keyframes zl-shimmer { from { background-position:200% 0; } to { background-position:-200% 0; } }
@media (prefers-reduced-motion: reduce) { .zl-skel { animation:none; } .zl-sheet-panel, .zl-sheet-backdrop { transition:none; } }
/* ── código del cliente C-0001 y coincidencia sugerida (22 sep 2026) ── */
.zl-eyebrow-top { margin:0 0 -.125rem; }
.zl-kv-sug { flex-wrap:wrap; } .zl-kv-sug i { font-style:normal; }
.zl-clientrow-sug { background:var(--v145-card-2); border-color:var(--v145-line); }
.zl-house-sug { background:rgba(37,99,235,.14); color:var(--v145-info); }
.zl-copy-icon { padding:.5rem .625rem; min-width:44px; min-height:44px; }

.zl-notice { margin: 0 0 .75rem; }
.zl-notice p { margin: .15rem 0 0; font-size: .8125rem; opacity: .8; }
/* Cupo de la etapa lleno (ZELLE_FULL): aviso amable, no error — azul informativo, no rojo. */
.zl-soon { border-color:rgba(37,99,235,.3); background:rgba(37,99,235,.10); }
.zl-soon > svg { color:var(--v145-info); }
/* Dentro del hero (centrado) el texto de los avisos iba centrado junto a un ícono a la izquierda. */
.zl-notice { text-align:left; }

/* ═══ 22 sep 2026 · PASADA DE UI ═══════════════════════════════════════════
   Estados que el servidor escribía y la pantalla nunca mostraba (salud de la
   cuenta, detección automática, sincronización por cuenta, fallo de lectura),
   áreas táctiles a 44 px y los anchos por debajo de 360 px, que no tenían
   NINGUNA media query. Capturas en scratchpad/zelle-v2/pasada/.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── aviso de demo, ahora con salida ── */
.zl-demo { gap:.5rem; align-items:center; flex-wrap:wrap; }
.zl-demo button { min-height:32px; padding:.125rem .5rem; border-radius:999px; border:1px solid currentColor; background:transparent; color:inherit; font-size:.6875rem; font-weight:800; letter-spacing:.02em; }

/* Con cuentas en problemas, el tilde de "Gmail conectado" no puede seguir en verde. */
.zl-ok-ico-warn { color:var(--v145-amber) !important; }

/* ── banner de problemas: rojo para lo que exige acción, ámbar para lo que se resuelve solo ── */
.zl-error-warn { border-color:rgba(217,119,6,.35); background:rgba(217,119,6,.10); }
.zl-error-warn > svg { color:var(--v145-amber); }

/* ── salud de la cuenta ── */
.zl-acc-bad { border-color:var(--v145-danger-line); }
.zl-acc-watch { display:inline-flex; align-items:center; gap:.3rem; font-size:.6875rem; font-weight:700; }
.zl-acc-watch svg { width:12px; height:12px; flex:0 0 auto; }
.zl-acc-watch.is-on { color:var(--v145-accent); }
.zl-acc-watch.is-off { color:var(--v145-amber); }
.zl-acc-issue { display:flex; gap:.4rem; align-items:flex-start; margin:0; padding:.5rem .75rem .625rem; font-size:.75rem; line-height:1.35; color:var(--v145-ink-soft); border-top:1px solid var(--v145-line-soft); background:rgba(217,119,6,.07); }
.zl-acc-issue.is-bad { background:var(--v145-danger-soft); }
.zl-acc-issue svg { width:14px; height:14px; flex:0 0 auto; margin-top:.1rem; color:var(--v145-amber); }
.zl-acc-issue.is-bad svg { color:var(--v145-danger); }
.zl-acc-issue b { color:var(--v145-ink); font-weight:700; }
.zl-spin { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex:0 0 auto; color:var(--v145-accent); }
.zl-spin svg { width:18px; height:18px; animation:zl-spin 1s linear infinite; }
@keyframes zl-spin { to { transform:rotate(360deg); } }

/* ── pago devuelto a revisión POR EL DUEÑO: se distingue del que retuvo el algoritmo ── */
.zl-st-restored { background:rgba(109,30,212,.12); color:#6d1ed4; }
.dark .zl-st-restored { background:rgba(167,110,246,.18); color:#c4a4fb; }

/* ── el código del cliente, en modo demo ── */
.zl-refcard-demo { border-color:rgba(217,119,6,.55); border-style:dashed; }
.zl-refcard-warn { display:flex; align-items:center; gap:.375rem; margin:0; font-size:.75rem; font-weight:700; color:var(--v145-amber); }
.zl-refcard-warn svg { width:14px; height:14px; flex:0 0 auto; }
.zl-copy:disabled { opacity:.45; }

/* ── áreas táctiles: el mínimo del proyecto son 44 px y estas dos estaban debajo ── */
.zl-chip { min-height:44px; padding:.5rem .875rem; }
.zl-copy { min-height:44px; }

/* ⚠️ RED DE SEGURIDAD, no la solución: las pestañas caben por milímetros (a 320 px en
   español ocupan 288 de 288 disponibles — medido, no estimado). Un contador de tres
   cifras o una etiqueta más larga las desbordaría, y el chequeo de scroll del
   documento NO lo ve, porque el que recorta es el scroller de la vista. Con
   overflow-x el desborde se vuelve desplazamiento en vez de recorte. El aire de
   verdad lo da la media query de abajo. */
.zl-tabs { overflow-x:auto; scrollbar-width:none; }
.zl-tabs::-webkit-scrollbar { display:none; }

/* ── 380 px y menos: el español ocupa ~25 % más que el inglés y acá se nota ── */
@media (max-width: 380px) {
    .zl-tabs { gap:0; }
    .zl-tab { font-size:.75rem; padding:.5rem .125rem; gap:.25rem; }
    .zl-kpi { padding:.625rem; }
    .zl-kpi-head { font-size:.6875rem; gap:.25rem; }
    .zl-kpi-amt { font-size:.875rem; letter-spacing:-.02em; }
    .zl-kpi-total .zl-kpi-amt { font-size:1.125rem; }
    .zl-grid { gap:.5rem; }
    .zl-chip { padding:.5rem .75rem; font-size:.78125rem; }
    /* En una lista de DINERO importa más quién pagó que si la insignia entra en el
       renglón: compitiendo por el ancho con la insignia y un importe de cuatro cifras,
       "Maria de los Angeles…" quedaba en "Mari…". La insignia baja un renglón. */
    .zl-row-top { flex-wrap:wrap; row-gap:.125rem; }
    .zl-row-top > b { flex:1 1 100%; }
}

/* ── 340 px y menos (iPhone SE): importes de cinco cifras en tarjetas de ~139 px ── */
@media (max-width: 340px) {
    .zl-tab { font-size:.71875rem; }
    .zl-kpi { padding:.5rem; }
    .zl-kpi-n { font-size:1.25rem; }
    .zl-kpi-amt { font-size:.8125rem; letter-spacing:-.03em; }
    .zl-kpi-total .zl-kpi-amt { font-size:1rem; }
    .zl-amt-xl { font-size:1.625rem; }
    .zl-drow { font-size:.78125rem; }
    .zl-acc-row { gap:.5rem; padding-left:.5rem; }
    .zl-emails { padding-left:calc(40px + .5rem); }
}

/* ── escritorio: la columna ya la limita .zl-root; solo respira más ── */
@media (min-width: 720px) {
    .zl-tab { font-size:.875rem; }
    .zl-grid { gap:.75rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   FINANZAS V2 (22 sep 2026) — "Todo tu dinero en un solo lugar".
   Una sola sección con 4 pestañas (Resumen · Movimientos · Métodos · Cuenta)
   que reemplaza visualmente a Panel financiero, Cuentas, Pagos y Pagos por Zelle.
   Usa los tokens --v145-* (claro y oscuro) que ya existen: NO define colores
   propios salvo los tintes por método, que se derivan de esos mismos tokens.
   ══════════════════════════════════════════════════════════════════════════ */
.fn-root { padding: 0 0 1rem; color: var(--v145-ink); }
.fn-root * { box-sizing: border-box; }

/* ── pestañas ─────────────────────────────────────────────────────────────── */
.fn-tabs {
    display: flex; gap: .25rem; border-bottom: 1px solid var(--v145-line);
    margin: 0 0 1rem; overflow-x: auto; scrollbar-width: none;
}
.fn-tabs::-webkit-scrollbar { display: none; }
.fn-tab {
    flex: 1 1 auto; min-width: 76px; min-height: 44px; padding: .625rem .375rem;
    font-size: .9375rem; font-weight: 600; color: var(--v145-ink-soft);
    background: none; border: 0; border-bottom: 2px solid transparent;
    display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
    cursor: pointer; white-space: nowrap; transition: color .15s ease, border-color .15s ease;
}
.fn-tab[aria-selected="true"] { color: var(--v145-accent); border-bottom-color: var(--v145-accent); }
.fn-tab-badge {
    min-width: 20px; height: 20px; padding: 0 .3125rem; border-radius: 9999px;
    background: var(--v145-danger); color: #fff; font-size: .6875rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}

/* ── tarjetas base ────────────────────────────────────────────────────────── */
.fn-card {
    background: var(--v145-card); border: 1px solid var(--v145-line);
    border-radius: var(--v145-radius); padding: 1rem; margin-bottom: .75rem;
}
.fn-card-tight { padding: .75rem; }
.fn-card-flush { padding: 0; overflow: hidden; }
.fn-sec { margin: 1.25rem 0 .5rem; display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.fn-sec h3 { font-size: 1rem; font-weight: 700; margin: 0; color: var(--v145-ink); }
.fn-link {
    background: none; border: 0; padding: .5rem .25rem; min-height: 44px; display: inline-flex; align-items: center;
    color: var(--v145-accent); font-size: .875rem; font-weight: 600; cursor: pointer;
}
.fn-eyebrow {
    font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--v145-ink-soft); margin: 0 0 .25rem;
}
.fn-sub { font-size: .8125rem; color: var(--v145-ink-soft); margin: .125rem 0 0; }
.fn-grow { flex: 1; min-width: 0; }
/* Recorta con puntos suspensivos. OJO: NO funciona en un <span> inline (no tiene ancho
   propio que respetar), por eso fuerza display:block. Lo destapó mirar las capturas:
   "Tarjeta · Visa •••• 4242" se metía DEBAJO de la insignia en vez de recortarse. */
.fn-trunc { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ── iconos por método ────────────────────────────────────────────────────── */
.fn-ico {
    width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
}
.fn-ico svg, .fn-ico i { width: 20px; height: 20px; }
.fn-ico-sm { width: 32px; height: 32px; border-radius: 10px; }
.fn-ico-sm svg, .fn-ico-sm i { width: 17px; height: 17px; }
.fn-ico-card     { background: rgba(37, 99, 235, .12);  color: var(--v145-info); }
.fn-ico-zelle    { background: #6d28d9; color: #fff; font-weight: 800; font-size: 1rem; }
.fn-ico-cash     { background: var(--v145-accent-soft);  color: var(--v145-accent); }
.fn-ico-transfer { background: rgba(37, 99, 235, .10);  color: var(--v145-info); }
.fn-ico-expense  { background: var(--v145-danger-soft); color: var(--v145-danger); }
.fn-ico-bank     { background: var(--v145-card-2);      color: var(--v145-ink-soft); }
.fn-ico-accent   { background: var(--v145-accent-soft); color: var(--v145-accent); }
.fn-ico-stripe   { background: rgba(99, 91, 255, .12);  color: #635bff; }
.dark .fn-ico-stripe { color: #a5a0ff; }

/* ── RESUMEN · tarjeta principal ──────────────────────────────────────────── */
.fn-hero {
    background: var(--v145-accent-soft); border: 1px solid rgba(22, 163, 74, .22);
    border-radius: var(--v145-radius); padding: 1rem; margin-bottom: .75rem;
}
.dark .fn-hero { border-color: rgba(34, 197, 94, .28); }
.fn-hero-top { display: flex; align-items: flex-start; gap: .75rem; }
.fn-hero-ico {
    width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px;
    background: var(--v145-card); color: var(--v145-accent);
    display: inline-flex; align-items: center; justify-content: center;
}
.fn-hero-amt { font-size: 1.875rem; font-weight: 800; line-height: 1.1; margin: .125rem 0 0; letter-spacing: -.02em; }
.fn-bar {
    height: 8px; border-radius: 9999px; background: rgba(15, 23, 42, .10);
    overflow: hidden; margin: .75rem 0 .375rem;
}
.dark .fn-bar { background: rgba(255, 255, 255, .12); }
.fn-bar-fill { height: 100%; border-radius: 9999px; background: var(--v145-accent); transition: width .35s ease; }
.fn-bar-meta { display: flex; justify-content: space-between; gap: .5rem; font-size: .75rem; color: var(--v145-ink-soft); }
.fn-bar-meta b { color: var(--v145-ink); font-weight: 700; }

/* ── RESUMEN · tres mini tarjetas ─────────────────────────────────────────── */
.fn-minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-bottom: .75rem; }
.fn-mini {
    background: var(--v145-card); border: 1px solid var(--v145-line);
    border-radius: var(--v145-radius-sm); padding: .75rem .625rem; min-width: 0;
}
/* "Por cobrar" es tocable: abre la lista de quién debe. Hereda el aspecto de la
   mini tarjeta para que las tres se vean iguales. */
.fn-mini-btn { text-align: left; color: inherit; cursor: pointer; min-height: 44px; }
.fn-mini-btn:hover { border-color: var(--v145-accent); }
.fn-mini-head { display: flex; align-items: center; gap: .375rem; margin-bottom: .375rem; }
.fn-mini-head span { font-size: .75rem; font-weight: 600; color: var(--v145-ink-soft); }
.fn-mini-dot { width: 18px; height: 18px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fn-mini-dot svg, .fn-mini-dot i { width: 12px; height: 12px; }
.fn-mini-amt { font-size: 1.0625rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.fn-mini-sub { font-size: .6875rem; color: var(--v145-ink-soft); margin-top: .125rem; }

/* ── RESUMEN · próximo depósito ───────────────────────────────────────────── */
.fn-rowcard {
    width: 100%; text-align: left; display: flex; align-items: center; gap: .75rem;
    background: var(--v145-card); border: 1px solid var(--v145-line);
    border-radius: var(--v145-radius); padding: .875rem 1rem; margin-bottom: .75rem;
    min-height: 56px; cursor: pointer; color: inherit;
    transition: border-color .15s ease, background-color .15s ease;
}
.fn-rowcard:hover { border-color: var(--v145-accent); }
.fn-rowcard[disabled] { cursor: default; opacity: 1; }
.fn-rowcard[disabled]:hover { border-color: var(--v145-line); }
.fn-rowcard-amt { font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
.fn-chev { color: var(--v145-ink-soft); flex-shrink: 0; }
.fn-chev svg, .fn-chev i { width: 20px; height: 20px; }

/* ── RESUMEN · métodos activos ────────────────────────────────────────────── */
.fn-mtiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.fn-mtile {
    background: var(--v145-card); border: 1px solid var(--v145-line);
    border-radius: var(--v145-radius-sm); padding: .75rem .375rem; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: .25rem;
    min-width: 0; min-height: 88px; cursor: pointer; color: inherit;
}
.fn-mtile:hover { border-color: var(--v145-accent); }
.fn-mtile b { font-size: .75rem; font-weight: 700; max-width: 100%; }
.fn-mtile span { font-size: .6875rem; color: var(--v145-accent); font-weight: 600; }
.fn-mtile-off span { color: var(--v145-ink-soft); }

/* ── RESUMEN · acciones rápidas ───────────────────────────────────────────── */
.fn-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.fn-act {
    border-radius: var(--v145-radius-sm); padding: .75rem .375rem; min-height: 72px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .375rem;
    font-size: .75rem; font-weight: 700; text-align: center; cursor: pointer; min-width: 0;
    border: 1px solid transparent;
}
.fn-act svg, .fn-act i { width: 20px; height: 20px; }
.fn-act-green { background: var(--v145-accent-soft); color: var(--v145-accent); border-color: rgba(22, 163, 74, .22); }
.fn-act-blue  { background: rgba(37, 99, 235, .10);  color: var(--v145-info);   border-color: rgba(37, 99, 235, .22); }
.fn-act-red   { background: var(--v145-danger-soft); color: var(--v145-danger); border-color: var(--v145-danger-line); }

/* ── lista de movimientos (resumen y pestaña completa) ────────────────────── */
.fn-list { background: var(--v145-card); border: 1px solid var(--v145-line); border-radius: var(--v145-radius); overflow: hidden; }
/* Dos líneas, como la referencia: arriba nombre + importe; abajo, a la derecha, la
   insignia. Con todo en una línea la insignia ("Verificado automáticamente") se comía
   el ancho y el NOMBRE del cliente quedaba en "María Go…". Lo encontró mirar la captura,
   no los chequeos: para ellos el texto estaba correctamente recortado. */
.fn-row {
    width: 100%; text-align: left; display: grid; gap: .125rem .75rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "ico main amt" "ico foot foot";
    align-items: start;
    padding: .75rem 1rem; background: none; border: 0; border-top: 1px solid var(--v145-line-soft);
    color: inherit; cursor: pointer; min-height: 60px;
}
.fn-row > .fn-ico { grid-area: ico; }
.fn-row-foot { grid-area: foot; display: flex; justify-content: flex-end; gap: .25rem; flex-wrap: wrap; }
.fn-row-foot:empty { display: none; }
.fn-row:first-child { border-top: 0; }
.fn-row:hover { background: var(--v145-card-2); }
.fn-row-main { grid-area: main; min-width: 0; display: flex; flex-direction: column; gap: .0625rem; }
.fn-row-name { font-size: .9375rem; font-weight: 700; line-height: 1.3; }
.fn-row-sub { font-size: .75rem; color: var(--v145-ink-soft); margin-top: .125rem; }
.fn-row-side { grid-area: amt; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; }
.fn-amt { font-size: .9375rem; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.fn-amt-in  { color: var(--v145-accent); }
.fn-amt-out { color: var(--v145-danger); }
.fn-day {
    font-size: .75rem; font-weight: 700; color: var(--v145-ink-soft);
    padding: .625rem 1rem .375rem; background: var(--v145-card-2);
    border-top: 1px solid var(--v145-line-soft);
}
.fn-list > .fn-day:first-child { border-top: 0; }

/* ── insignias de estado ──────────────────────────────────────────────────── */
.fn-badge {
    display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; flex-shrink: 0;
    padding: .1875rem .4375rem; border-radius: 8px; font-size: .6875rem; font-weight: 700;
}
.fn-badge svg, .fn-badge i { width: 11px; height: 11px; }
.fn-badge-auto   { background: var(--v145-accent-soft); color: var(--v145-accent); }
.fn-badge-manual { background: var(--v145-card-2);      color: var(--v145-ink-soft); }
.fn-badge-review { background: rgba(217, 119, 6, .12);  color: var(--v145-amber); }
.fn-badge-info   { background: rgba(37, 99, 235, .10);  color: var(--v145-info); }
.fn-badge-off    { background: var(--v145-card-2);      color: var(--v145-ink-soft); }

/* ── MOVIMIENTOS · buscador, filtros y periodo ────────────────────────────── */
.fn-search { position: relative; margin-bottom: .625rem; }
.fn-search svg, .fn-search i {
    position: absolute; left: .875rem; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px; color: var(--v145-ink-soft); pointer-events: none;
}
.fn-search input {
    width: 100%; min-height: 44px; padding: .625rem .875rem .625rem 2.5rem;
    border-radius: 12px; border: 1px solid var(--v145-line);
    background: var(--v145-card); color: var(--v145-ink); font-size: .9375rem;
}
.fn-search input::placeholder { color: var(--v145-ink-soft); }
.fn-search input:focus { outline: 2px solid var(--v145-accent); outline-offset: -1px; }
.fn-chips { display: flex; gap: .375rem; overflow-x: auto; padding-bottom: .25rem; margin-bottom: .625rem; scrollbar-width: none; }
.fn-chips::-webkit-scrollbar { display: none; }
.fn-chip {
    flex-shrink: 0; min-height: 44px; padding: .625rem .875rem; border-radius: 9999px;
    border: 1px solid var(--v145-line); background: var(--v145-card-2);
    color: var(--v145-ink-soft); font-size: .8125rem; font-weight: 600; cursor: pointer;
}
.fn-chip[aria-pressed="true"] { background: var(--v145-accent); border-color: var(--v145-accent); color: var(--v145-accent-ink); }
.fn-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .625rem; }
.fn-period { display: flex; align-items: center; gap: .375rem; color: var(--v145-ink-soft); }
.fn-period svg, .fn-period i { width: 18px; height: 18px; }
.fn-period select {
    min-height: 40px; padding: .4375rem .625rem; border-radius: 10px;
    border: 1px solid var(--v145-line); background: var(--v145-card);
    color: var(--v145-ink); font-size: .875rem; font-weight: 600;
}
.fn-count { font-size: .8125rem; color: var(--v145-ink-soft); white-space: nowrap; }

/* ── MÉTODOS ──────────────────────────────────────────────────────────────── */
.fn-mcard {
    width: 100%; text-align: left; display: flex; align-items: center; gap: .75rem;
    background: var(--v145-card); border: 1px solid var(--v145-line);
    border-radius: var(--v145-radius); padding: .875rem 1rem; margin-bottom: .5rem;
    min-height: 68px; cursor: pointer; color: inherit;
}
.fn-mcard:hover { border-color: var(--v145-accent); }
.fn-mcard b { font-size: .9375rem; font-weight: 700; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fn-mcard .fn-sub, .fn-acct-top .fn-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fn-flow { display: flex; align-items: center; gap: .75rem; padding: .625rem 0; border-top: 1px solid var(--v145-line-soft); }
.fn-flow:first-of-type { border-top: 0; }
.fn-flow-name { font-size: .8125rem; font-weight: 700; width: 84px; flex-shrink: 0; }
.fn-flow-body { flex: 1; min-width: 0; }
.fn-flow-top { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .25rem; }
.fn-flow-n { font-size: .75rem; color: var(--v145-ink-soft); }
.fn-flow-amt { font-size: .875rem; font-weight: 800; }
.fn-flow-bar { height: 6px; border-radius: 9999px; background: rgba(15, 23, 42, .08); overflow: hidden; }
.dark .fn-flow-bar { background: rgba(255, 255, 255, .10); }
.fn-flow-fill { height: 100%; border-radius: 9999px; }
.fn-flow-pct { font-size: .75rem; color: var(--v145-ink-soft); width: 34px; text-align: right; flex-shrink: 0; }

/* ── CUENTA ───────────────────────────────────────────────────────────────── */
.fn-acct-top { display: flex; align-items: center; gap: .75rem; margin-bottom: .625rem; min-width: 0; }
.fn-acct-name { display: block; font-size: .9375rem; font-weight: 800; letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fn-acct-num { display: block; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .8125rem; color: var(--v145-ink-soft); }
.fn-btns { display: flex; gap: .5rem; flex-wrap: wrap; }
.fn-btn {
    flex: 1 1 140px; min-height: 44px; padding: .625rem .75rem; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
    font-size: .875rem; font-weight: 700; cursor: pointer; border: 1px solid var(--v145-line);
    background: var(--v145-card-2); color: var(--v145-ink);
}
.fn-btn svg, .fn-btn i { width: 16px; height: 16px; }
.fn-btn:hover { border-color: var(--v145-accent); }
.fn-btn-primary { background: var(--v145-accent); border-color: var(--v145-accent); color: var(--v145-accent-ink); }
.fn-btn-primary:hover { filter: brightness(.95); }
.fn-btn-wide { flex-basis: 100%; }
.fn-accs { list-style: none; margin: .5rem 0 .75rem; padding: 0; display: grid; gap: .375rem; }
.fn-accs li {
    display: flex; align-items: center; gap: .625rem; padding: .5rem .625rem;
    background: var(--v145-card-2); border-radius: var(--v145-radius-sm); min-width: 0;
}
.fn-accs .fn-dot { width: 8px; height: 8px; border-radius: 9999px; background: var(--v145-accent); flex-shrink: 0; }
.fn-accs .fn-dot-off { background: var(--v145-amber); }
.fn-accs .fn-dot-bad { background: var(--v145-danger); }
.fn-acc-mail { font-size: .8125rem; font-weight: 600; }
.fn-acc-meta { font-size: .6875rem; color: var(--v145-ink-soft); margin-top: .0625rem; }

/* ── interruptores de métodos aceptados ───────────────────────────────────── */
.fn-toggles { display: grid; gap: .125rem; }
.fn-toggle { display: flex; align-items: center; gap: .625rem; padding: .5rem 0; border-top: 1px solid var(--v145-line-soft); }
.fn-toggle:first-child { border-top: 0; }
/* SOLO la etiqueta crece. Con ".fn-toggle > span" también crecían el icono y la
   pastilla del interruptor, y quedaban deformados a lo ancho (visible a 430 px). */
.fn-toggle > .fn-trunc { flex: 1; font-size: .875rem; font-weight: 600; min-width: 0; }
.fn-toggle > .fn-ico { flex-shrink: 0; }
.fn-switch { position: relative; width: 46px; height: 28px; flex-shrink: 0; }
.fn-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.fn-switch span {
    position: absolute; inset: 0; border-radius: 9999px; background: var(--v145-card-2);
    border: 1px solid var(--v145-line); transition: background-color .18s ease, border-color .18s ease;
}
.fn-switch span::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
    border-radius: 9999px; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .25);
    transition: transform .18s ease;
}
.fn-switch input:checked + span { background: var(--v145-accent); border-color: var(--v145-accent); }
.fn-switch input:checked + span::after { transform: translateX(18px); }
.fn-switch input:focus-visible + span { outline: 2px solid var(--v145-accent); outline-offset: 2px; }
.fn-switch input:disabled { cursor: not-allowed; }
.fn-switch input:disabled + span { opacity: .5; }

/* ── avisos, vacíos, carga y error ────────────────────────────────────────── */
.fn-note {
    display: flex; gap: .625rem; align-items: flex-start;
    background: rgba(37, 99, 235, .07); border: 1px solid rgba(37, 99, 235, .18);
    border-radius: var(--v145-radius-sm); padding: .75rem; margin-top: .75rem;
    font-size: .8125rem; color: var(--v145-ink-soft); line-height: 1.45;
}
.fn-note svg, .fn-note i { width: 18px; height: 18px; flex-shrink: 0; color: var(--v145-info); }
.fn-note-warn { background: rgba(217, 119, 6, .08); border-color: rgba(217, 119, 6, .22); }
.fn-note-warn svg, .fn-note-warn i { color: var(--v145-amber); }
.fn-empty { text-align: center; padding: 2rem 1rem; color: var(--v145-ink-soft); }
.fn-empty-ico {
    width: 52px; height: 52px; border-radius: 16px; margin: 0 auto .625rem;
    background: var(--v145-card-2); color: var(--v145-ink-soft);
    display: flex; align-items: center; justify-content: center;
}
.fn-empty-ico svg, .fn-empty-ico i { width: 24px; height: 24px; }
.fn-empty b { display: block; color: var(--v145-ink); font-size: .9375rem; margin-bottom: .25rem; }
.fn-empty p { font-size: .8125rem; margin: 0 auto; max-width: 30ch; line-height: 1.5; }
.fn-skel { background: var(--v145-card-2); border-radius: 10px; animation: fn-pulse 1.4s ease-in-out infinite; }
@keyframes fn-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .fn-skel { animation: none; } }
.fn-skel-wrap { display: grid; gap: .5rem; }

/* ── filas de las hojas: elegir cliente / quién me debe ───────────────────── */
.fn-pick-list { display: grid; gap: .5rem; }
.fn-pick {
    width: 100%; display: flex; align-items: center; gap: .75rem; text-align: left;
    padding: .75rem; min-height: 56px; cursor: pointer; color: inherit;
    background: var(--v145-card); border: 1px solid var(--v145-line); border-radius: var(--v145-radius-sm);
}
.fn-pick:hover { border-color: var(--v145-accent); }
.fn-pick b { display: block; font-size: .9375rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fn-pick .fn-sub { display: block; }
.fn-pick .fn-amt { flex-shrink: 0; }
.fn-pick .fn-chev { display: inline-flex; }
.fn-sheet-search { padding: .75rem 1rem; position: sticky; top: 0; z-index: 1; background: var(--v145-card); }
.fn-sheet-search input {
    width: 100%; min-height: 44px; padding: .625rem .875rem; border-radius: 12px;
    border: 1px solid var(--v145-line); background: var(--v145-card-2);
    color: var(--v145-ink); font-size: .9375rem;
}
.fn-sheet-search input:focus { outline: 2px solid var(--v145-accent); outline-offset: -1px; }

/* ── modal de depósitos ───────────────────────────────────────────────────── */
.fn-dep-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-bottom: .75rem; }
.fn-dep-tile { background: var(--v145-card-2); border-radius: var(--v145-radius-sm); padding: .75rem; }
.fn-dep-tile .fn-eyebrow { margin-bottom: .25rem; }
.fn-dep-amt { font-size: 1.125rem; font-weight: 800; }

/* ── DESGLOSE DE COBROS (Métodos → Stripe) ────────────────────────────────── */
/* Compacto a propósito: va DENTRO de la tarjeta de Stripe, no es una pantalla. */
.fn-sec-sub { margin-top: .75rem; }
.fn-sec-sub h3 { font-size: .9375rem; }
.fn-period-sm select { min-height: 36px; padding: .3125rem .5rem; font-size: .8125rem; }

.fn-br { margin-top: -.25rem; }
.fn-br-row {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: .75rem; padding: .4375rem 0;
}
/* El importe manda: nunca se encoge ni se parte. La etiqueta cede y, si hiciera
   falta, se recorta con puntos suspensivos. A 320 px los montos reales caben en
   la misma línea, así que NO se envuelve: partirlos alejaba el número de su
   concepto sin ganar nada. */
.fn-br-label { font-size: .875rem; color: var(--v145-ink-soft); flex: 1 1 auto; min-width: 0; overflow: hidden; }
/* La tasa efectiva va pegada a su etiqueta: se lee junto al monto del que sale. */
.fn-br-hint { display: block; font-size: .6875rem; color: var(--v145-ink-soft); opacity: .85; }
.fn-br-amt { font-size: .9375rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.fn-br-neg { color: var(--v145-ink-soft); }
.fn-br-row-total {
    border-top: 1px solid var(--v145-line);
    margin-top: .25rem; padding-top: .625rem;
}
.fn-br-row-total .fn-br-label { color: var(--v145-ink); font-weight: 600; }
.fn-br-row-total .fn-br-amt { font-size: 1.0625rem; font-weight: 800; color: var(--v145-accent); }
.fn-br-row-meta { border-top: 1px solid var(--v145-line-soft); margin-top: .25rem; padding-top: .625rem; }
.fn-br-meta { font-weight: 600; color: var(--v145-ink); }
/* Cuando NO hay dato: texto, nunca un número. */
.fn-br-na { font-size: .8125rem; font-weight: 600; color: var(--v145-ink-soft); white-space: normal; text-align: right; }
.fn-br-scope { font-size: .6875rem; color: var(--v145-ink-soft); margin: -.125rem 0 .25rem; }
.fn-br-count { font-size: .8125rem; color: var(--v145-ink-soft); margin: .5rem 0 0; }
.fn-br-none { font-size: .875rem; color: var(--v145-ink-soft); margin: 0; }
.fn-br-note { margin: .625rem 0 0; }
.fn-br .fn-btn-wide { margin-top: .75rem; }

/* 320 px: solo se aprieta el espaciado; la fila sigue siendo una sola línea. */
@media (max-width: 340px) {
    .fn-br-row { gap: .5rem; }
    .fn-br-label { font-size: .8125rem; }
}

/* ── anchos grandes: el panel no se estira de más ─────────────────────────── */
@media (min-width: 720px) {
    .fn-root { max-width: 760px; margin: 0 auto; }
    .fn-minis { gap: .75rem; }
    .fn-mtiles { gap: .75rem; }
}
/* 380 y no 359: a 360 px (un ancho de teléfono muy común) los importes de las mini
   tarjetas desbordaban su caja. Lo vio la captura, no el chequeo de scroll. */
@media (max-width: 380px) {
    .fn-root { font-size: .9375rem; }
    .fn-hero-amt { font-size: 1.625rem; }
    .fn-mini { padding: .625rem .5rem; }
    .fn-mini-amt { font-size: .9375rem; letter-spacing: -.02em; }
    .fn-mini-head span { font-size: .6875rem; }
    .fn-flow-name { width: 64px; }
    .fn-tab { min-width: 72px; padding: .625rem .25rem; font-size: .875rem; }
    .fn-tabs { gap: 0; }
}

/* 320 px (iPhone SE y compañía): con tres columnas, un importe de cuatro cifras como
   $3,745.00 no entra en su caja y se sale de la tarjeta. Lo vio la captura. */
/* 380 px y menos · la cabecera de una tarjeta de CUENTA con insignia.
   La insignia es `flex-shrink:0` y `nowrap`: "2 cuentas conectadas" ocupaba ~200 px
   de los 288 disponibles y dejaba ~110 px al título, con lo que "Zelle por Gmail" se
   partía en TRES líneas y el subtítulo quedaba en "Detecci…". En inglés también, en
   dos líneas. Lo vio la captura, no el chequeo: no era desborde ni scroll.
   Solución: la insignia baja a su propio renglón y el bloque de texto usa todo el ancho. */
@media (max-width: 380px) {
    /* `:has()` acota la regla a las cabeceras que SÍ llevan insignia. Sin él, el
       salto de línea del ::after también separaría el icono del texto en las
       tarjetas sin insignia (depósito, destino), que hoy se ven bien. Si un
       navegador no soporta :has(), descarta el bloque y queda el layout de antes. */
    .fn-acct-top:has(> .fn-badge) { flex-wrap: wrap; row-gap: .375rem; }
    .fn-acct-top:has(> .fn-badge) > .fn-ico   { order: 1; }
    .fn-acct-top:has(> .fn-badge) > .fn-grow  { order: 2; }
    .fn-acct-top:has(> .fn-badge)::after      { content: ''; flex-basis: 100%; height: 0; order: 3; }
    .fn-acct-top:has(> .fn-badge) > .fn-badge { order: 4; margin-left: calc(40px + .75rem); }
    .fn-acct-top .fn-sub { white-space: normal; overflow: visible; }
}

@media (max-width: 340px) {
    .fn-minis { gap: .375rem; }
    .fn-mini { padding: .5rem .375rem; }
    .fn-mini-amt { font-size: .8125rem; letter-spacing: -.03em; }
    .fn-mini-sub, .fn-mini-head span { font-size: .625rem; }
    .fn-hero-amt { font-size: 1.5rem; }
    .fn-tab { min-width: 64px; font-size: .8125rem; padding: .625rem .1875rem; }
    .fn-mtile b { font-size: .6875rem; }
    .fn-mtile span { font-size: .625rem; }
    .fn-act { font-size: .6875rem; }
}

/* ============================================================
   v232 · AJUSTES rediseñado (23 sep 2026)
   Encabezado verde oliva dentro del scroll, secciones con etiqueta, tarjetas con filas
   (ícono en burbuja · título/descripción · valor o control · chevron). Todo con prefijo
   .aj- para no tocar ninguna otra pantalla. Tema por la clase .dark de <html>, como el
   resto de la app (tailwind darkMode:'class').
   ============================================================ */
/* Casitas y servicios (25 sep 2026): la sub-vista #casitas-content usa los MISMOS tokens. */
#settings-content, #casitas-content, #jardinero-demo-content {
    --aj-bg:        #f4f4f0;
    --aj-card:      #ffffff;
    --aj-line:      #e7e5df;
    --aj-ink:       #1c1917;
    --aj-ink-soft:  #57534e;
    --aj-label:     #57534e;
    --aj-accent:    #15803d;
    --aj-accent-ink:#ffffff;
    --aj-bubble:    #e7f3ea;
    --aj-bubble-ink:#166534;
    --aj-blue:      #2563eb;
    --aj-blue-bubble:#e6efff;
    --aj-red:       #c81e1e;
    --aj-red-bubble:#fdeaea;
    --aj-track:     #d6d3d1;
    --aj-seg:       #ecebe6;
    --aj-press:     #f6f6f2;
    --aj-hero:      #1f2a1c;
    --aj-hero-2:    #2a3825;
    background: var(--aj-bg);
}
.dark #settings-content, .dark #casitas-content, .dark #jardinero-demo-content {
    --aj-bg:        var(--v145-bg, #0b1220);
    --aj-card:      var(--v145-card, #131c2e);
    --aj-line:      rgba(255, 255, 255, 0.09);
    --aj-ink:       #f1f5f9;
    --aj-ink-soft:  #a3adbd;
    --aj-label:     #9aa6b8;
    --aj-accent:    #22c55e;
    --aj-accent-ink:#04150b;
    --aj-bubble:    rgba(34, 197, 94, 0.14);
    --aj-bubble-ink:#6ee7a0;
    --aj-blue:      #7aa7ff;
    --aj-blue-bubble:rgba(96, 165, 250, 0.16);
    --aj-red:       #fb7185;
    --aj-red-bubble:rgba(248, 113, 113, 0.14);
    --aj-track:     #3b4557;
    --aj-seg:       #0f1726;
    --aj-press:     #1a2437;
    --aj-hero:      #172014;
    --aj-hero-2:    #22301d;
}
/* El cuerpo ya reserva la nav (96 px); el encabezado va de borde a borde. */
#settings-content .aj-body {
    padding: 0 0 calc(var(--v143-nav-h, 64px) + 2rem + var(--safe-bottom, 0px));
    color: var(--aj-ink);
}
.aj-hero {
    position: relative; overflow: hidden;
    background: linear-gradient(160deg, var(--aj-hero-2) 0%, var(--aj-hero) 70%);
    color: #f5f7f2;
    padding: 1.25rem 1rem 1.6rem;
}
/* El texto del encabezado alinea con el borde de las tarjetas: mismo ancho útil que .aj-grid. */
.aj-hero-in { position: relative; z-index: 1; max-width: 40rem; margin: 0 auto; padding-left: .25rem; }
.aj-brand { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1.05rem; letter-spacing: .01em; color: #eef3ea; }
.aj-brand-logo { width: 28px; height: 28px; object-fit: contain; }
.aj-hero-title { margin: .7rem 0 0; font-size: 2rem; line-height: 1.1; font-weight: 800; letter-spacing: -.01em; color: #ffffff; }
.aj-hero-sub { margin: .35rem 0 0; font-size: .95rem; line-height: 1.35; color: rgba(236, 242, 232, .82); }
.aj-hero-leaf { position: absolute; right: -10px; bottom: -8px; width: 190px; height: 150px; fill: #4d6b3a; opacity: .35; pointer-events: none; }

.aj-grid { max-width: 42rem; margin: 0 auto; padding: .25rem 1rem 0; }
.aj-col { min-width: 0; }
.aj-sec { margin-top: 1.25rem; }
.aj-sec-title {
    margin: 0 0 .55rem .25rem; font-size: .75rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: var(--aj-label);
}
.aj-card {
    background: var(--aj-card); border: 1px solid var(--aj-line);
    border-radius: 16px; overflow: hidden;
    box-shadow: 0 1px 2px rgba(28, 25, 23, .04);
}
.dark .aj-card { box-shadow: none; }
/* Divisor: cada fila lleva borde arriba y sube 1 px; el de la PRIMERA fila visible queda
   fuera de la caja y lo recorta overflow:hidden. Así funciona aunque haya filas ocultas
   (las de dueño, para un trabajador) sin depender de :first-child. */
#settings-content .aj-card > * { border-top: 1px solid var(--aj-line); margin-top: -1px; }

.aj-row {
    display: flex; align-items: center; gap: .85rem;
    width: 100%; min-height: 72px; padding: .8rem 1rem;
    text-align: left; background: transparent; border: 0; color: inherit; font: inherit;
}
.aj-row-btn { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .15s ease; }
.aj-row-btn:active { background: var(--aj-press); }
/* Hover solo con puntero real: en el teléfono, tras un toque el :hover queda pegado y la fila
   se ve gris sin motivo (visto en las capturas). */
@media (hover: hover) {
    .aj-row-btn:hover, .aj-prow:hover { background: var(--aj-press); }
}
.aj-row-btn:focus-visible { outline: 2px solid var(--aj-accent); outline-offset: -2px; }
.aj-ico {
    flex: 0 0 auto; width: 44px; height: 44px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--aj-bubble); color: var(--aj-bubble-ink);
}
.aj-ico svg { width: 22px; height: 22px; }
.aj-ico-blue { background: var(--aj-blue-bubble); color: var(--aj-blue); }
.aj-ico-red  { background: var(--aj-red-bubble); color: var(--aj-red); }
.aj-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.aj-t { font-size: 1rem; font-weight: 650; line-height: 1.25; color: var(--aj-ink); overflow-wrap: anywhere; }
.aj-d { font-size: .875rem; line-height: 1.35; color: var(--aj-ink-soft); overflow-wrap: anywhere; }
.aj-d:empty { display: none; }
.aj-danger .aj-t { color: var(--aj-red); }
.aj-end { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .5rem; }
.aj-chev { width: 20px; height: 20px; color: var(--aj-ink-soft); flex: 0 0 auto; transition: transform .2s ease; }
[aria-expanded="true"] .aj-chev-down { transform: rotate(180deg); }
.aj-val { font-size: .9375rem; font-weight: 500; color: var(--aj-ink-soft); white-space: nowrap; }
.aj-when-dark { display: none; }
.dark .aj-when-dark { display: inline; }
.dark .aj-when-light { display: none; }
#settings-content #biz-status:empty { display: none; }
#settings-content #biz-status { white-space: nowrap; }

/* Estado de Zelle */
.aj-pill { display: inline-flex; align-items: center; gap: .35rem; min-height: 28px; padding: .25rem .7rem; border-radius: 999px; font-size: .8125rem; font-weight: 700; white-space: nowrap; }
.aj-pill:empty { display: none; }
.aj-pill-ok { background: var(--aj-bubble); color: var(--aj-bubble-ink); }
.aj-pill-warn { background: rgba(217, 119, 6, .14); color: #b45309; }
.dark .aj-pill-warn { color: #fbbf24; }
.aj-pill-muted { background: var(--aj-seg); color: var(--aj-ink-soft); }
.aj-pill-cta { background: var(--aj-blue); color: #fff; min-height: 36px; padding: .4rem .9rem; }
.dark .aj-pill-cta { background: #3b82f6; color: #fff; }
/* Con el botón Conectar a la vista, el chevron sobra (como en la referencia) y le roba ancho al texto. */
.aj-pill-cta + .aj-chev { display: none; }
.aj-pill svg { width: 16px; height: 16px; }
.aj-dot { width: 8px; height: 8px; border-radius: 999px; background: currentColor; flex: 0 0 auto; }
/* Estado de Zelle como línea propia (no píldora a la derecha: apretaba el título y el correo). */
.aj-zst { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; }
.aj-zst-ok { color: var(--aj-bubble-ink); }
.aj-zst-muted { color: var(--aj-ink-soft); font-weight: 600; }
.aj-ellip { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Idioma: control segmentado. app.js alterna bg-green-600/text-white en el activo. */
.aj-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px; background: var(--aj-seg); border: 1px solid var(--aj-line); }
.aj-seg .lang-btn {
    min-width: 48px; min-height: 44px; padding: 0 .75rem; border-radius: 9px; border: 0;
    font-size: .9375rem; font-weight: 700; letter-spacing: .02em; color: var(--aj-ink-soft); background: transparent;
}
.aj-seg .lang-btn.bg-green-600 { background: var(--aj-accent) !important; color: var(--aj-accent-ink) !important; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.aj-seg .lang-btn:not(.bg-green-600) { background: transparent !important; }
.aj-seg .lang-btn:focus-visible { outline: 2px solid var(--aj-accent); outline-offset: 1px; }

/* Interruptor accesible: un checkbox real con apariencia de switch (44 px de área). */
.aj-switch {
    appearance: none; -webkit-appearance: none; position: relative; flex: 0 0 auto;
    width: 52px; height: 32px; margin: 6px 0; border-radius: 999px; cursor: pointer;
    background: var(--aj-track); transition: background-color .2s ease;
}
.aj-switch::after {
    content: ''; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 999px;
    background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s ease;
}
.aj-switch:checked { background: var(--aj-accent); }
.aj-switch:checked::after { transform: translateX(20px); }
.aj-switch:focus-visible { outline: 2px solid var(--aj-accent); outline-offset: 3px; }

/* Acceso al portal: resumen con puntos y detalle desplegable */
.aj-badges { display: flex; flex-wrap: wrap; gap: .25rem .75rem; margin-top: .3rem; }
.aj-badges:empty { display: none; }
.aj-badge { display: inline-flex; align-items: center; gap: .35rem; font-size: .8125rem; font-weight: 600; color: var(--aj-ink-soft); }
.aj-badge .aj-dot { width: 9px; height: 9px; }
.aj-badge-ok .aj-dot { background: #16a34a; }
.aj-badge-warn .aj-dot { background: #d97706; }
.aj-badge-bad .aj-dot { background: #dc2626; }
.aj-portal-body { padding: .25rem 1rem 1rem; display: flex; flex-direction: column; gap: 1rem; }
.aj-portal-body .aj-psec-t { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--aj-label); }
.aj-portal-body .aj-psec-h { margin: .2rem 0 .5rem; font-size: .8125rem; color: var(--aj-ink-soft); }
.aj-portal-body .aj-plist { display: flex; flex-direction: column; gap: .35rem; }
.aj-prow {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    width: 100%; min-height: 52px; padding: .5rem .75rem; border-radius: 12px; border: 0; text-align: left;
    background: var(--aj-bg); color: inherit; cursor: pointer;
}
.aj-prow-n { display: block; font-size: .9375rem; font-weight: 600; color: var(--aj-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aj-prow-s { display: block; font-size: .8125rem; line-height: 1.35; color: var(--aj-ink-soft); overflow-wrap: anywhere; }
.aj-prow-m { min-width: 0; }
.aj-prow-e { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .5rem; }
.aj-prow-e svg { width: 18px; height: 18px; color: var(--aj-ink-soft); }
.aj-tag-blocked { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .15rem .45rem; border-radius: 6px; background: var(--aj-red-bubble); color: var(--aj-red); }
.aj-reason { color: #b45309; }
.dark .aj-reason { color: #fbbf24; }
.aj-allgood { margin: 0; font-size: .875rem; font-weight: 600; color: #15803d; }
.dark .aj-allgood { color: #4ade80; }

/* Push (24 sep 2026): línea de estado con punto de color y acciones de la fila "Alertas en este dispositivo". */
.aj-push-st { display: block; }
.aj-push-st .aj-dot { display: inline-block; margin-right: .45rem; vertical-align: .08em; }
.aj-push-st-ok   { color: var(--aj-bubble-ink); font-weight: 600; }
.aj-push-st-warn { color: #b45309; font-weight: 600; }
.dark .aj-push-st-warn { color: #fbbf24; }
.aj-push-st-muted .aj-dot { background: var(--aj-track); }
.aj-push-actions { display: flex; flex-direction: column; gap: .5rem; padding: 0 1rem 1rem; }
.aj-push-actions.hidden { display: none; }
.aj-push-help { margin: 0; padding: .7rem .85rem; border-radius: 12px; background: var(--aj-bg); font-size: .875rem; line-height: 1.4; color: var(--aj-ink-soft); }
.aj-push-hint { margin: 0; font-size: .8125rem; line-height: 1.35; color: var(--aj-ink-soft); }
.aj-push-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    width: 100%; min-height: 48px; padding: .6rem 1rem; border-radius: 12px;
    border: 1px solid var(--aj-line); background: var(--aj-seg); color: var(--aj-ink);
    font-size: .9375rem; font-weight: 700; line-height: 1.2; text-align: center; cursor: pointer;
}
.aj-push-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.aj-push-btn-primary { background: var(--aj-accent); border-color: transparent; color: var(--aj-accent-ink); }
.aj-push-btn:disabled { opacity: .6; cursor: progress; }
.aj-push-btn:focus-visible { outline: 2px solid var(--aj-accent); outline-offset: 2px; }
@media (min-width: 640px) { .aj-push-btn { width: auto; align-self: flex-start; } }

/* Mi cuenta: datos desplegables */
/* Etiqueta arriba y valor abajo: un correo largo no se parte a mitad de palabra. */
.aj-kv { margin: 0 1rem 1rem; padding: .75rem .9rem; border-radius: 12px; background: var(--aj-bg); display: flex; flex-direction: column; gap: .7rem; }
.aj-kv > div { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.aj-kv dt { font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--aj-label); }
.aj-kv dd { margin: 0; font-size: .9375rem; font-weight: 600; color: var(--aj-ink); min-width: 0; overflow-wrap: anywhere; }

/* Teléfonos chicos: menos aire lateral, el control de idioma más compacto. */
@media (max-width: 374px) {
    .aj-grid { padding: .25rem .75rem 0; }
    .aj-hero { padding-left: .75rem; padding-right: .75rem; }
    .aj-row { gap: .7rem; padding: .75rem .8rem; }
    .aj-ico { width: 40px; height: 40px; }
    .aj-ico svg { width: 20px; height: 20px; }
    .aj-seg .lang-btn { min-width: 44px; padding: 0 .55rem; }
    .aj-kv { padding-left: 1rem; }
    .aj-hero-title { font-size: 1.75rem; }
}
/* Tableta: el encabezado respira más; a partir de 900 px, dos columnas. */
@media (min-width: 640px) {
    .aj-hero { padding: 1.75rem 1.5rem 2.1rem; }
    .aj-hero-in { max-width: 39rem; }
    .aj-hero-title { font-size: 2.35rem; }
    .aj-hero-sub { font-size: 1.05rem; }
    .aj-hero-leaf { width: 260px; height: 200px; }
    .aj-grid { padding: .5rem 1.5rem 0; }
    .aj-sec { margin-top: 1.5rem; }
}
@media (min-width: 900px) {
    .aj-hero-in { max-width: 61rem; }
    .aj-grid { max-width: 64rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; align-items: start; }
}

/* ============================================================
   v236 · FINANZAS REORGANIZADA (24 sep 2026)
   · Un solo título (el de la barra superior) y las pestañas en una franja sticky
     DENTRO del mismo .content-view-body: quedan visibles al bajar sin segundo scroll.
   · Resumen / Movimientos / Métodos / Cuenta con el orden pedido; las conexiones
     viven solo en Cuenta. Tokens --v145-* (claro y oscuro) de siempre.
   ============================================================ */
#finanzas-content { background: var(--v145-bg); }
/* Sin padding arriba: la franja de pestañas arranca pegada al borde y el sticky no
   deja ver contenido pasando por encima de ella. */
#finanzas-content .fn-body { padding-top: 0; }
.fn-stick {
    position: sticky; top: 0; z-index: 6;
    margin: 0 -1rem .875rem; padding: .25rem 1rem 0;
    background: var(--v145-bg);
    border-bottom: 1px solid var(--v145-line);
}
.fn-stick .fn-tabs { margin: 0; border-bottom: 0; }
/* Pantallas secundarias (depósitos, detalle de un cobro) no llevan pestañas. */
.fn-root > .zl-back:first-child, .fn-root > .zl-demo:first-child { margin-top: 1rem; }
.fn-root > .zl-demo { margin-bottom: .75rem; }

/* Aviso de modo prueba de Stripe: una franja, no una tarjeta más. */
.fn-testbar {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    margin: -.375rem 0 .875rem; padding: .5rem .75rem; border-radius: 10px;
    background: rgba(217, 119, 6, .10); color: #b45309;
    font-size: .8125rem; font-weight: 600; text-align: center;
}
.dark .fn-testbar { color: var(--v145-amber); background: rgba(217, 119, 6, .14); }
.fn-testbar svg, .fn-testbar i { width: 16px; height: 16px; flex-shrink: 0; }

/* Barra de período arriba de Resumen y Métodos. */
.fn-toolbar-top { margin-bottom: .75rem; }
.fn-sec-first { margin-top: .25rem; }
.fn-sec-card { margin: 0 0 .25rem; }

/* Resumen: enlace "Ver desglose por método" dentro de la tarjeta principal. */
.fn-hero-link { margin: .25rem 0 -.5rem; padding-left: 0; gap: .25rem; }
.fn-hero-link svg, .fn-hero-link i { width: 16px; height: 16px; }
.fn-acts { margin-bottom: .75rem; }
.fn-rowcard-static { cursor: default; }
.fn-rowcard-static:hover { border-color: var(--v145-line); }

/* Métodos: total, barra de distribución apilada y filas tocables. */
.fn-total-row { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.fn-total-row span { font-size: .875rem; color: var(--v145-ink-soft); font-weight: 600; }
.fn-total-row b { font-size: 1.375rem; font-weight: 800; letter-spacing: -.01em; }
.fn-dist-t { margin: .75rem 0 .375rem; }
.fn-stack { display: flex; height: 12px; border-radius: 9999px; overflow: hidden; gap: 2px; margin-bottom: .375rem; background: var(--v145-card-2); }
.fn-stack span { min-width: 4px; }
/* Fila de método en grilla: [ícono] [nombre / N pagos] [monto / %] [›] y la barra debajo.
   Antes el nombre tenía ancho fijo y a 390 px el conteo se partía ("23 / pagos") y la
   barra de la fila quedaba sin ancho (lo vio la captura, no el chequeo). */
button.fn-flow {
    width: 100%; background: none; border: 0; border-top: 1px solid var(--v145-line-soft);
    color: inherit; text-align: left; cursor: pointer; min-height: 56px;
    padding: .625rem .25rem; margin: 0 -.25rem; box-sizing: content-box;
    border-radius: 10px;
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "ico main side chev" "ico bar bar chev";
    column-gap: .75rem; row-gap: .375rem; align-items: center;
}
button.fn-flow > .fn-ico { grid-area: ico; }
button.fn-flow > .fn-chev { grid-area: chev; }
.fn-flow-main { grid-area: main; min-width: 0; display: flex; flex-direction: column; }
.fn-flow-main .fn-flow-name { width: auto; font-size: .9375rem; }
.fn-flow-main .fn-flow-n { white-space: nowrap; }
.fn-flow-side { grid-area: side; display: flex; flex-direction: column; align-items: flex-end; }
.fn-flow-side .fn-flow-amt { font-size: .9375rem; white-space: nowrap; }
.fn-flow-side .fn-flow-pct { width: auto; }
button.fn-flow > .fn-flow-bar { grid-area: bar; display: block; }
/* El relleno es un <span>: en línea ignora width/height y la barra quedaba VACÍA (solo la
   pista gris). Lo vio la captura a 360 px; ningún chequeo automático lo detectaba. */
.fn-flow-fill { display: block; }
button.fn-flow:first-of-type { border-top: 0; }
@media (hover: hover) { button.fn-flow:hover { background: var(--v145-card-2); } }
button.fn-flow:focus-visible { outline: 2px solid var(--v145-accent); outline-offset: -2px; }
.fn-flow .fn-chev svg, .fn-flow .fn-chev i { width: 18px; height: 18px; }
.fn-flow-hint { margin-top: .5rem; }
.fn-scope { display: flex; align-items: center; gap: .375rem; margin: -.25rem 0 .5rem; font-size: .8125rem; color: var(--v145-ink-soft); }
.fn-scope svg, .fn-scope i { width: 15px; height: 15px; flex-shrink: 0; color: var(--v145-info); }
.fn-br { margin-top: 0; }
.fn-br .fn-btn-wide { width: 100%; }
/* Cuenta · dos botones en un teléfono: uno por renglón, con el texto entero
   ("Cambiar cuenta bancaria" se partía en dos líneas dentro de medio ancho). */
@media (max-width: 479px) {
    .fn-acct .fn-btns .fn-btn { flex-basis: 100%; }
}

/* Cuenta: tarjetas de servicio. El texto largo se lee entero (no se recorta). */
.fn-acct .fn-acct-top { align-items: flex-start; }
.fn-acct-title { display: block; font-size: 1rem; font-weight: 700; line-height: 1.3; }
.fn-acct .fn-acct-desc { display: block; white-space: normal; overflow: visible; margin-top: .125rem; line-height: 1.4; }
.fn-acct > .fn-acct-desc { margin: -.25rem 0 .75rem calc(40px + .75rem); }
.fn-acct > .fn-accs { margin-left: 0; }
.fn-bankline { display: flex; align-items: baseline; gap: .625rem; margin: -.125rem 0 .25rem calc(40px + .75rem); min-width: 0; }
.fn-bankline .fn-acct-name { flex: 0 1 auto; }
.fn-bankline .fn-acct-num { display: inline; flex-shrink: 0; }
.fn-bankline + .fn-acct-desc { margin-bottom: .75rem; }
.fn-ico-gmail { background: rgba(234, 67, 53, .10); color: #d93025; }
.dark .fn-ico-gmail { background: rgba(234, 67, 53, .16); color: #ff8a80; }
.fn-note-tight { margin: -.125rem 0 .75rem; }
.fn-badge-loading { background: var(--v145-card-2); color: var(--v145-ink-soft); }
.fn-spin {
    width: 10px; height: 10px; border-radius: 9999px; flex-shrink: 0;
    border: 2px solid currentColor; border-right-color: transparent;
    animation: fn-girar .8s linear infinite;
}
@keyframes fn-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fn-spin { animation: none; } }

/* Métodos aceptados: nombre + "Registro manual" debajo. */
.fn-toggle-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fn-toggle-name { font-size: .9375rem; font-weight: 600; }
.fn-toggle-sub { font-size: .75rem; color: var(--v145-ink-soft); }
.fn-toggle { min-height: 56px; }

/* Escritorio: el panel se centra y las tarjetas de Cuenta respiran. */
@media (min-width: 720px) {
    .fn-stick { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
}
@media (max-width: 380px) {
    .fn-acct > .fn-acct-desc, .fn-bankline { margin-left: 0; }
    .fn-total-row b { font-size: 1.25rem; }
}

/* ============================================================
   v237 · AGENDAR SEMANA (rediseño del Smart Schedule semanal)
   Mismos tokens que el calendario (--v145-*): tarjetas blancas, verde LawnTrail,
   radios de 14–18 px. UN solo scroll (.sw-scroll); cabecera y pie son hermanos fijos
   del scroll, así el botón nunca tapa contenido. De 720 px para arriba la columna se
   centra (no se estira a lo ancho del escritorio).
   ============================================================ */
.sw-modal { background: var(--v145-bg); color: var(--v145-ink); }
.sw-screen {
    display: flex; flex-direction: column; width: 100%;
    height: 100vh; height: 100dvh; min-height: 0;
    transition: transform .3s ease;
}
.sw-screen > * { flex: 0 0 auto; }                /* ⛔ bug de flex de v107/v177/v180: solo cede el scroll */
.sw-head {
    background: var(--v145-card); border-bottom: 1px solid var(--v145-line);
    padding: max(10px, env(safe-area-inset-top)) .75rem .5rem;
}
.sw-head-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem; max-width: 44rem; margin: 0 auto; }
.sw-back {
    justify-self: start; display: inline-flex; align-items: center; gap: .25rem;
    min-height: 44px; padding: 0 .5rem 0 .25rem; border: 0; background: none; border-radius: 10px;
    color: var(--v145-accent); font-size: 1rem; font-weight: 700; cursor: pointer;
}
.sw-back svg { width: 22px; height: 22px; }
.sw-title { margin: 0; display: inline-flex; align-items: center; gap: .5rem; font-size: 1.125rem; font-weight: 800; color: var(--v145-ink); white-space: nowrap; }
.sw-title svg { width: 20px; height: 20px; color: var(--v145-accent); }
.sw-weeknav { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-top: .25rem; }
.sw-navbtn {
    width: 44px; height: 44px; border-radius: 9999px; border: 0; background: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; color: var(--v145-ink);
}
.sw-navbtn svg { width: 22px; height: 22px; }
.sw-weeklabel { min-width: 13rem; text-align: center; font-size: 1.0625rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.sw-notice {
    text-align: center; font-size: .8125rem; font-weight: 600; padding: .5rem .75rem;
    background: var(--v145-accent-soft); color: var(--v145-accent);
}

.sw-scroll { flex: 1 1 0 !important; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.sw-col { max-width: 44rem; margin: 0 auto; padding: .75rem .875rem 1.25rem; display: flex; flex-direction: column; gap: .75rem; }
.sw-col > * { flex: 0 0 auto; }

.sw-summary {
    display: flex; align-items: center; gap: .875rem; padding: .875rem 1rem;
    background: var(--v145-accent-soft); border: 1px solid rgba(22, 163, 74, .18); border-radius: var(--v145-radius);
}
.sw-sum-ico { width: 40px; height: 40px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: var(--v145-accent); }
.sw-sum-ico svg { width: 26px; height: 26px; }
.sw-sum-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .125rem; }
.sw-sum-txt b { font-size: 1rem; font-weight: 700; line-height: 1.3; }
.sw-sum-txt span { font-size: .875rem; color: var(--v145-ink-soft); }
.sw-sum-cal { width: 30px; height: 30px; flex: 0 0 auto; color: var(--v145-accent); }

.sw-bulk { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.sw-bulk-btn {
    min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    border: 1px solid var(--v145-line); border-radius: 12px; background: var(--v145-card);
    color: var(--v145-ink); font-size: .9375rem; font-weight: 600; cursor: pointer;
}
.sw-bulk-btn svg { width: 18px; height: 18px; color: var(--v145-info); }

.sw-days { display: flex; flex-direction: column; gap: .625rem; }
.sw-days > * { flex: 0 0 auto; }
.sw-day { background: var(--v145-card); border: 1px solid var(--v145-line); border-radius: 16px; overflow: hidden; }
.sw-day.is-today { border: 2px solid var(--v145-accent); }
.sw-day-head {
    width: 100%; display: flex; align-items: center; gap: .875rem; padding: .75rem .875rem;
    background: none; border: 0; color: inherit; text-align: left; cursor: pointer; min-height: 72px;
}
.sw-day-head[aria-disabled="true"] { cursor: default; }
.sw-tile {
    width: 56px; height: 56px; flex: 0 0 auto; border-radius: 12px; background: var(--v145-card-2);
    display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05;
}
.sw-day.is-today .sw-tile { background: var(--v145-accent-soft); color: var(--v145-accent); }
.sw-tile-dow { font-size: .6875rem; font-weight: 700; letter-spacing: .04em; color: var(--v145-ink-soft); }
.sw-day.is-today .sw-tile-dow { color: var(--v145-accent); }
.sw-tile-n { font-size: 1.375rem; font-weight: 800; }
.sw-day-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .125rem; }
.sw-day-title { font-size: 1rem; font-weight: 700; line-height: 1.3; }
.sw-today { display: inline-block; padding: .0625rem .4375rem; border-radius: 9999px; font-size: .6875rem; font-weight: 700; background: var(--v145-accent); color: var(--v145-accent-ink); vertical-align: .125rem; }
.sw-day-sub { display: block; font-size: .875rem; line-height: 1.45; color: var(--v145-ink-soft); }
.sw-sel { color: var(--v145-accent); font-weight: 600; }
.sw-part { white-space: nowrap; }
.sw-dot { opacity: .6; }
.sw-chev { width: 22px; height: 22px; flex: 0 0 auto; color: var(--v145-ink-soft); transition: transform .2s ease; }
.sw-day.is-today .sw-chev { color: var(--v145-accent); }
.sw-day.is-open .sw-chev { transform: rotate(180deg); }
.sw-day.is-past { opacity: .78; }
.sw-day-body { border-top: 1px solid var(--v145-line-soft); padding: .5rem .625rem .75rem; }

.sw-list { display: flex; flex-direction: column; gap: .375rem; }
.sw-list > * { flex: 0 0 auto; }
.sw-row { display: flex; align-items: stretch; gap: .25rem; border-radius: 12px; border: 1px solid var(--v145-line-soft); background: var(--v145-card); }
.sw-row.is-on { border-color: rgba(22, 163, 74, .45); background: var(--v145-accent-soft); }
.sw-row.is-late:not(.is-on) { border-color: var(--v145-danger-line); }
.sw-row.is-blocked { background: var(--v145-card-2); }
.sw-pick {
    flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: .75rem; padding: .625rem .5rem .625rem .75rem;
    border: 0; background: none; color: inherit; text-align: left; cursor: pointer; min-height: 56px;
}
.sw-pick[aria-disabled="true"] { cursor: default; }
.sw-check {
    width: 24px; height: 24px; flex: 0 0 auto; margin-top: .125rem; border-radius: 7px;
    border: 2px solid var(--v145-line); display: inline-flex; align-items: center; justify-content: center; background: var(--v145-card);
}
.sw-check svg { width: 16px; height: 16px; }
.sw-row.is-on .sw-check { background: var(--v145-accent); border-color: var(--v145-accent); color: var(--v145-accent-ink); }
.sw-row.is-blocked .sw-check { background: var(--v145-card-2); border-color: var(--v145-line); color: var(--v145-ink-soft); }
.sw-row.is-done .sw-check { color: var(--v145-accent); }
.sw-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .0625rem; }
.sw-name { font-size: .9375rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.sw-addr, .sw-meta { font-size: .8125rem; color: var(--v145-ink-soft); overflow-wrap: anywhere; }
.sw-badges { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; }
.sw-badges:empty { display: none; }
.sw-badge { display: inline-flex; align-items: center; padding: .125rem .5rem; border-radius: 9999px; font-size: .6875rem; font-weight: 700; white-space: nowrap; }
.sw-badge-ok, .sw-badge-done { background: var(--v145-accent-soft); color: var(--v145-accent); }
.sw-badge-sched, .sw-badge-moved { background: var(--v145-card-2); color: var(--v145-ink-soft); }
.sw-badge-extra { background: rgba(124, 58, 237, .12); color: var(--v145-violet); }
.sw-badge-late { background: var(--v145-danger-soft); color: var(--v145-danger); }
.sw-badge-new { background: rgba(37, 99, 235, .10); color: var(--v145-info); }
.sw-more {
    width: 44px; flex: 0 0 auto; border: 0; background: none; color: var(--v145-ink-soft); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; border-radius: 0 12px 12px 0;
}
.sw-more[aria-expanded="true"] { background: var(--v145-card-2); color: var(--v145-ink); }
.sw-more svg { width: 20px; height: 20px; }
.sw-menu {
    margin: -.125rem 0 .25rem; padding: .625rem .75rem; border-radius: 12px; background: var(--v145-card-2);
    font-size: .8125rem; color: var(--v145-ink-soft); display: flex; flex-direction: column; gap: .25rem;
}
.sw-menu p { margin: 0; overflow-wrap: anywhere; }
.sw-menu-day { margin-top: .5rem; }
.sw-menu-t { font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-top: .375rem !important; color: var(--v145-ink-soft); }
.sw-move-list { display: flex; flex-direction: column; gap: .25rem; margin-top: .125rem; }
.sw-move-opt {
    display: flex; justify-content: space-between; align-items: center; gap: .5rem; min-height: 44px;
    padding: .5rem .75rem; border-radius: 10px; border: 1px solid var(--v145-line); background: var(--v145-card);
    color: var(--v145-ink); font-size: .875rem; font-weight: 600; cursor: pointer; text-align: left;
}
.sw-move-n { font-size: .75rem; color: var(--v145-ink-soft); font-weight: 600; white-space: nowrap; }
.sw-menu-empty { font-style: italic; }
.sw-day-foot { display: flex; gap: .5rem; margin-top: .625rem; flex-wrap: wrap; }
.sw-past-note { margin: .625rem .25rem 0; font-size: .8125rem; color: var(--v145-ink-soft); }

.sw-btn {
    min-height: 44px; padding: .5rem 1rem; border-radius: 12px; border: 1px solid transparent;
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-size: .9375rem; font-weight: 700; cursor: pointer;
}
.sw-btn svg { width: 18px; height: 18px; }
.sw-btn-primary { background: var(--v145-accent); color: var(--v145-accent-ink); flex: 1 1 auto; }
.sw-btn-primary:hover { filter: brightness(.95); }
.sw-btn-primary:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.sw-btn-ghost { background: var(--v145-card); border-color: var(--v145-line); color: var(--v145-ink); }
.sw-hint {
    display: flex; align-items: center; gap: .625rem; margin: .125rem 0 0; padding: .75rem .875rem; border-radius: 12px;
    background: rgba(37, 99, 235, .07); color: var(--v145-ink-soft); font-size: .875rem;
}
.sw-hint svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--v145-info); }

.sw-foot { background: var(--v145-card); border-top: 1px solid var(--v145-line); padding: .625rem .875rem max(.75rem, env(safe-area-inset-bottom)); }
.sw-foot-in { max-width: 44rem; margin: 0 auto; display: flex; flex-direction: column; gap: .5rem; }
.sw-foot-row { display: flex; align-items: center; gap: .875rem; }
/* El botón principal no se parte: el texto de la izquierda es el que cede. */
.sw-foot-n { flex: 0 1 34%; min-width: 0; font-size: .875rem; line-height: 1.3; color: var(--v145-ink-soft); }
.sw-btn-big { flex: 1 1 auto; min-width: 0; min-height: 52px; font-size: 1.0625rem; border-radius: 14px; white-space: nowrap; }
.sw-btn-big svg { width: 22px; height: 22px; }
.sw-aviso { margin: 0; padding: .5rem .75rem; border-radius: 10px; font-size: .875rem; font-weight: 600; }
.sw-aviso-ok { background: var(--v145-accent-soft); color: var(--v145-accent); }
.sw-aviso-info { background: rgba(37, 99, 235, .08); color: var(--v145-info); }
.sw-aviso-error { background: var(--v145-danger-soft); color: var(--v145-danger); border: 1px solid var(--v145-danger-line); }
.sw-spin {
    width: 18px; height: 18px; border-radius: 9999px; border: 2px solid currentColor; border-right-color: transparent;
    animation: sw-girar .8s linear infinite;
}
@keyframes sw-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sw-spin { animation: none; } .sw-chev { transition: none; } }

@media (max-width: 360px) {
    .sw-title { font-size: 1rem; }
    .sw-weeklabel { min-width: 0; font-size: 1rem; }
    .sw-tile { width: 50px; height: 50px; }
    .sw-foot-row { flex-direction: column; align-items: stretch; gap: .375rem; }
}
/* Hover solo con puntero real: en el teléfono el :hover queda pegado tras un toque. */
@media (hover: hover) {
    .sw-navbtn:hover { background: var(--v145-card-2); }
    .sw-more:hover { background: var(--v145-card-2); color: var(--v145-ink); }
    .sw-bulk-btn:hover, .sw-move-opt:hover, .sw-btn-ghost:hover { border-color: var(--v145-accent); }
}

/* ============================================================
   Casitas y servicios (25 sep 2026) — sub-vista de Ajustes (#casitas-content).
   Contrato: scratchpad/casitas/CONTRATO.md. Prefijo .cs- para no tocar otra pantalla.
   Tokens: los de Ajustes (--aj-*), definidos para #casitas-content junto a #settings-content.
   ⛔ La casita se muestra COMPLETA (object-fit: contain, sin recorte); el contenedor tiene la
   misma proporción que la imagen (aspect-ratio en línea) para que la placa medida caiga justa.
   ============================================================ */
#casitas-content { background: var(--aj-bg); }
#casitas-content .cs-body { padding: 0 0 calc(var(--v143-nav-h, 64px) + 2rem + var(--safe-bottom, 0px)); color: var(--aj-ink); }
.cs-wrap { max-width: 64rem; margin: 0 auto; padding: .75rem 1rem 0; }
.cs-top { display: flex; align-items: flex-start; gap: .75rem; }
.cs-back {
    flex: 0 0 auto; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--aj-line);
    background: var(--aj-card); color: var(--aj-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.cs-back svg { width: 22px; height: 22px; }
.cs-back:focus-visible, .cs-select:focus-visible, .cs-btn:focus-visible { outline: 2px solid var(--aj-accent); outline-offset: 2px; }
.cs-top-txt { min-width: 0; }
.cs-title { margin: .35rem 0 0; font-size: 1.5rem; line-height: 1.2; font-weight: 800; color: var(--aj-ink); overflow-wrap: break-word; hyphens: auto; }
.cs-sub { margin: .3rem 0 0; font-size: .9375rem; line-height: 1.4; color: var(--aj-ink-soft); }
.cs-root { margin-top: .5rem; }
.cs-sec { margin-top: 1.25rem; }
.cs-sec-title { margin: 0 0 .55rem .25rem; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--aj-label); }
.cs-card { background: var(--aj-card); border: 1px solid var(--aj-line); border-radius: 16px; box-shadow: 0 1px 2px rgba(28, 25, 23, .04); }
.dark .cs-card { box-shadow: none; }
.cs-note {
    display: flex; align-items: flex-start; gap: .6rem; margin: .75rem 0 0; padding: .75rem .9rem;
    border-radius: 12px; background: var(--aj-seg); border: 1px solid var(--aj-line);
    font-size: .9rem; line-height: 1.4; color: var(--aj-ink-soft);
}
.cs-note svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: .1rem; }
.cs-note-warn { background: rgba(217, 119, 6, .12); color: #92400e; }
.dark .cs-note-warn { color: #fbbf24; }

/* La casita con su número sobre la placa. container-type: el número se dimensiona en cqw. */
.cs-house { position: relative; display: block; width: 100%; container-type: inline-size; }
.cs-house-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; }
.cs-plate-num {
    position: absolute; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none;
    font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-weight: 800;
    font-variant-numeric: tabular-nums; letter-spacing: -.01em; line-height: 1;
    color: #2b2118;   /* oscuro sobre la placa crema: igual en claro y en oscuro (la placa no cambia) */
}
.cs-tag {
    position: absolute; top: .5rem; left: .5rem; z-index: 1;
    padding: .2rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 700; line-height: 1.3;
    background: rgba(15, 23, 42, .78); color: #fff;
}
.dark .cs-tag { background: rgba(255, 255, 255, .16); }
.cs-pending {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
    width: 100%; aspect-ratio: 1144 / 1375; padding: .75rem; text-align: center;
    border: 2px dashed var(--aj-track); border-radius: 14px; color: var(--aj-ink-soft);
    font-size: .8125rem; line-height: 1.3;
}
.cs-pending svg { width: 28px; height: 28px; opacity: .7; }
.cs-pending b { color: var(--aj-ink); font-size: .9rem; }
.cs-pending code { font-size: .75rem; word-break: break-all; color: var(--aj-ink); background: var(--aj-seg); padding: .1rem .35rem; border-radius: 6px; }

/* Asignación */
.cs-assign { padding: 1rem; }
.cs-field { display: flex; flex-direction: column; gap: .4rem; }
.cs-label { font-size: .875rem; font-weight: 700; color: var(--aj-ink); padding: 0; }
.cs-select {
    width: 100%; min-height: 48px; padding: .6rem .8rem; border-radius: 12px;
    border: 1px solid var(--aj-line); background: var(--aj-bg); color: var(--aj-ink); font: inherit; font-size: 1rem;
}
.cs-current { margin: 0; font-size: .875rem; color: var(--aj-ink-soft); overflow-wrap: break-word; hyphens: auto; }
.cs-assign-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1rem; }
.cs-preview { position: relative; margin: 0; padding: .75rem; border-radius: 14px; background: var(--aj-bg); border: 1px solid var(--aj-line); }
/* En el teléfono la vista previa no se come la pantalla: las casitas y Guardar quedan cerca. */
.cs-preview .cs-house, .cs-preview .cs-pending { max-width: 10.5rem; margin: 0 auto; }
@media (min-width: 640px) { .cs-preview .cs-house, .cs-preview .cs-pending { max-width: 15rem; } }
.cs-preview-cap { margin-top: .4rem; text-align: center; font-weight: 700; font-size: .9375rem; color: var(--aj-ink); overflow-wrap: break-word; hyphens: auto; }
/* El pin tal como sale en el mapa (número arriba del pin), a tamaño real: la tarjeta de arriba muestra el arte grande. */
/* En el teléfono: etiqueta y pines en una fila, para que Guardar no se aleje (la tarjeta grande ya ocupa lo suyo). */
.cs-mappins { margin-top: .6rem; padding-top: .55rem; border-top: 1px dashed var(--aj-line); display: flex; flex-direction: row; align-items: center; justify-content: center; gap: .6rem; }
.cs-mappins-label { flex: 0 1 7rem; min-width: 0; font-size: .75rem; font-weight: 600; line-height: 1.25; color: var(--aj-ink-soft); text-align: right; overflow-wrap: break-word; hyphens: auto; }
@media (min-width: 640px) {
    .cs-mappins { flex-direction: column; gap: .3rem; }
    .cs-mappins-label { flex: none; text-align: center; }
}
.cs-mappins-row { display: flex; gap: .75rem; align-items: flex-end; }
.cs-mappins-row img { display: block; user-select: none; }
.cs-choices { border: 0; margin: 0; padding: 0; min-width: 0; }
.cs-hint { margin: .15rem 0 .5rem; font-size: .8125rem; color: var(--aj-ink-soft); }
.cs-choice-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .5rem; }
.cs-choice {
    position: relative; display: flex; align-items: center; gap: .5rem; min-height: 56px; padding: .4rem .6rem .4rem .4rem;
    border-radius: 12px; border: 2px solid var(--aj-line); background: var(--aj-card); cursor: pointer;
}
.cs-choice.is-on { border-color: var(--aj-accent); background: var(--aj-bubble); }
.cs-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cs-choice:has(input:focus-visible) { outline: 2px solid var(--aj-accent); outline-offset: 2px; }
.cs-choice-img { flex: 0 0 auto; width: 38px; }
.cs-choice-name { min-width: 0; font-size: .875rem; font-weight: 650; line-height: 1.25; color: var(--aj-ink); overflow-wrap: break-word; hyphens: auto; display: flex; flex-direction: column; }
.cs-choice-name small { font-size: .72rem; font-weight: 600; color: var(--aj-ink-soft); }
.cs-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; margin-top: 1rem; }
.cs-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 48px; min-width: 44px;
    padding: .6rem 1.1rem; border-radius: 12px; border: 1px solid var(--aj-line); background: var(--aj-card);
    color: var(--aj-ink); font: inherit; font-weight: 700; cursor: pointer; flex: 1 1 9rem;
}
.cs-btn svg { width: 18px; height: 18px; }
.cs-btn-primary { background: var(--aj-accent); border-color: var(--aj-accent); color: var(--aj-accent-ink); }
.cs-btn:disabled { opacity: .5; cursor: not-allowed; }
@media (min-width: 640px) {
    .cs-assign-grid { grid-template-columns: minmax(12rem, 16rem) 1fr; align-items: start; }
    .cs-btn { flex: 0 0 auto; }
}

/* Galería */
.cs-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 640px) { .cs-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cs-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cs-gcard { display: flex; flex-direction: column; min-width: 0; background: var(--aj-card); border: 1px solid var(--aj-line); border-radius: 16px; overflow: hidden; }
.cs-gimg { position: relative; padding: .6rem .6rem .3rem; background: var(--aj-bg); }
.cs-gimg .cs-tag { top: .4rem; left: .4rem; font-size: .6875rem; }
.cs-gtxt { padding: .6rem .7rem .75rem; display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.cs-gname { margin: 0; display: block; font-size: .9375rem; font-weight: 750; line-height: 1.25; color: var(--aj-ink); overflow-wrap: break-word; hyphens: auto; }
.cs-sw { display: inline-block; vertical-align: .05em; margin-right: .35rem; width: 10px; height: 10px; border-radius: 999px; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.cs-gdesc { margin: 0; font-size: .8125rem; line-height: 1.35; color: var(--aj-ink-soft); overflow-wrap: break-word; hyphens: auto; }
.cs-gassign { margin: .25rem 0 0; font-size: .8125rem; line-height: 1.35; font-weight: 600; color: var(--aj-bubble-ink); overflow-wrap: break-word; hyphens: auto; }
.cs-gassign-none { color: var(--aj-ink-soft); font-weight: 500; }
.cs-state { display: flex; align-items: center; gap: .9rem; padding: .8rem 1rem; }
.cs-state-img { flex: 0 0 auto; width: 5.5rem; }
.cs-state-img .cs-pending { padding: .4rem; font-size: .6875rem; gap: .15rem; }
.cs-state-img .cs-pending svg { width: 20px; height: 20px; }
.cs-state-img .cs-pending b { font-size: .75rem; }
.cs-state-img .cs-pending code { font-size: .625rem; }

/* ══════════════════════════════════════════════════════════════════════════
   EL JARDINERO ANIMADO (Fase B, 25 sep 2026) — js/jardinero.js
   Un solo contenedor (.jn) con todas las capas: en el mapa se mueven JUNTAS.
   Posiciones y tamaños en % de la casa: la escena escala con --jn-w.
   ⛔ Nada de transiciones ni fundidos en el actor: cada cuadro se muestra entero.
   ══════════════════════════════════════════════════════════════════════════ */
.jn {
    --jn-w: 150px; --jn-etq-h: 24px; --jn-gap: 6px;
    --jn-aro: rgba(245, 180, 30, .9); --jn-aro-brillo: rgba(251, 191, 36, .42);
    --jn-aro-fondo: rgba(255, 255, 255, .6);
    --jn-num-bg: #f8f1de; --jn-num-ink: #1f2937;
    position: relative; width: var(--jn-w);
    display: flex; flex-direction: column; align-items: center; gap: var(--jn-gap);
    pointer-events: none; user-select: none; -webkit-user-select: none;
}
.dark .jn { --jn-aro-fondo: rgba(17, 24, 39, .55); --jn-aro-brillo: rgba(251, 191, 36, .32); }

.jn-etq {
    position: relative; z-index: 6; height: var(--jn-etq-h); display: inline-flex; align-items: center; gap: 6px;
    padding: 0 11px; border-radius: 999px; background: #14532d; color: #fff;
    font: 800 11px/1 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; letter-spacing: .06em;
    white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.jn-etq__dot { width: 8px; height: 8px; border-radius: 50%; background: #fbbf24; box-shadow: 0 0 0 3px rgba(251, 191, 36, .28); }
.jn--pausado .jn-etq { background: #7c2d12; }
.jn--pausado .jn-etq__dot { background: #fed7aa; box-shadow: none; }
.jn--completado .jn-etq { background: #15803d; }
.jn--completado .jn-etq__dot { background: #fff; box-shadow: none; }
.jn--pendiente .jn-etq { background: #1e3a8a; }
.jn--pendiente .jn-etq__dot { background: #bfdbfe; box-shadow: none; }

.jn-escena { position: relative; width: 100%; container-type: inline-size; }
.jn-escena > * { position: absolute; }
/* EL HALO (mapa durante el trabajo, 25 sep 2026): neón amarillo, UNA sola pieza detrás de la casa.
   Borde fino y definido + resplandor exterior amplio y difuminado; centro transparente. El pulso es de
   LUMINOSIDAD (opacity del resplandor, 3.2 s), nunca de tamaño. Apoya su borde de abajo en la base de la
   escena: no cruza el cronómetro (que además va por encima, .jn-pie z-index 7). No es geocerca ni avance.
   pausado → tenue y quieto · completado/pendiente → no está · reduced-motion o quieto → sin pulso. */
.jn-aro {
    z-index: 0; left: 50%; bottom: 0; top: auto; width: 106%; aspect-ratio: 1; transform: translateX(-50%);
    border-radius: 50%; border: 2.5px solid var(--jn-halo-borde, #FFD54A); background: none;
    /* filo dorado #FFB300 por fuera del borde + brillo fino por dentro (el centro sigue transparente) */
    box-shadow: 0 0 0 1.5px rgba(255, 179, 0, .75), 0 0 6px 1px rgba(255, 213, 74, .9), inset 0 0 8px 1px rgba(255, 213, 74, .55);
    transition: opacity .3s ease;
}
.jn-aro::before {
    content: ''; position: absolute; inset: -2px; border-radius: 50%; pointer-events: none;
    /* neón suave: tres capas de resplandor exterior (amarillo cerca, dorado #FFB300 amplio y difuso) */
    box-shadow: 0 0 10px 3px var(--jn-halo-glow, rgba(255, 213, 74, .95)),
                0 0 26px 9px var(--jn-halo-glow2, rgba(255, 179, 0, .7)),
                0 0 58px 20px var(--jn-halo-glow3, rgba(255, 179, 0, .38)),
                inset 0 0 22px 4px rgba(255, 213, 74, .5);
    opacity: .8; animation: jn-halo 3.2s ease-in-out infinite;
}
@keyframes jn-halo { 0%, 100% { opacity: .58; } 50% { opacity: 1; } }
.dark .jn { --jn-halo-glow: rgba(255, 213, 74, .9); --jn-halo-glow2: rgba(255, 179, 0, .6); --jn-halo-glow3: rgba(255, 179, 0, .3); }
.jn--pausado .jn-aro { opacity: .45; }
.jn--pausado .jn-aro::before { animation: none; opacity: .25; }
.jn--completado .jn-aro, .jn--pendiente .jn-aro { display: none; }
.jn--reducido .jn-aro::before { animation: none; opacity: .8; }
.jn--quieto .jn-aro::before { animation-play-state: paused; }
.jn-escena > .jn-casa { position: relative; display: block; z-index: 1; width: 100%; height: auto; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .22)); }
.jn-ocl { left: 0; top: 0; width: 100%; height: 100%; display: block; z-index: 4; }
.jn-actor { z-index: 3; background-repeat: no-repeat; background-position-y: 0; }
.jn-fx { z-index: 3; left: 0; top: 0; width: 100%; height: 100%; }
.jn-fx i { position: absolute; display: none; border-radius: 50%; transform: translate(-50%, -50%); }
.jn-fx i.jn-p--borde { box-shadow: 0 0 0 .5px rgba(100, 116, 139, .55); }
.jn-num {
    z-index: 5; transform: translate(-50%, -50%); box-sizing: border-box;
    padding: .14em .3em; border-radius: 3px; background: var(--jn-num-bg); color: var(--jn-num-ink);
    border: 1px solid rgba(120, 90, 40, .35);
    font: 800 max(9px, 6.4cqw)/1 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-variant-numeric: tabular-nums; letter-spacing: -.01em; text-align: center; white-space: nowrap;
}
.jn-num[data-len="5"], .jn-num[data-len="6"] { font-size: max(9px, 5.6cqw); letter-spacing: -.02em; }
.jn-num[hidden] { display: none; }
.jn-pie:empty { display: none; }
.jn-pie { position: relative; z-index: 7; }   /* el cronómetro SIEMPRE por encima del halo */

/* El cronómetro del trabajo en curso (lo alimenta startActiveJobTimer: solo textContent de #activeJobTimer). */
.jn-timer {
    display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 10px; border-radius: 999px;
    background: #fff; border: 2px solid #16a34a; box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}
.jn-timer__ico { width: 18px; height: 18px; color: #16a34a; flex-shrink: 0; }
.jn-timer__txt { display: flex; flex-direction: column; line-height: 1.05; }
.jn-timer__lbl { font-size: 9px; font-weight: 800; letter-spacing: .09em; color: #6b7280; }
.jn-timer__val { font: 800 16px/1.05 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-variant-numeric: tabular-nums; color: #111827; }
.dark .jn-timer { background: #16181d; border-color: #22c55e; }
.dark .jn-timer__val { color: #f4f4f5; }
.dark .jn-timer__lbl { color: #9ca3af; }

/* En el MAPA: el punto de la latLng cae en la BASE del jardín (borde delantero del césped),
   no en el centro del bloque. Todo sale de variables: no hay números sueltos que se desajusten. */
.jn--mapa {
    position: absolute; left: 0; top: 0;
    transform: translate(-50%, calc(-1 * (var(--jn-etq-h) + var(--jn-gap) + var(--jn-w) * var(--jn-ar) * var(--jn-borde))));
}
@media (min-width: 768px) { .jn--mapa { --jn-w: 180px; } }

/* ── LA ETIQUETA COMPACTA (mapa durante el trabajo, 25 sep 2026) ──────────────────────────────────
   Reemplaza la tarjeta fija de arriba: nombre (negrita) + servicio, punto de estado, flecha y punta
   hacia la casa. Alto FIJO (--jn-etq-h) porque el translate de .jn--mapa lo usa para anclar la base del
   jardín a la latLng. Tocarla abre la ficha del cliente; tocar la casa abre el resumen del trabajo. */
.jn--ficha { --jn-etq-h: 46px; --jn-gap: 12px; }
.jn-etq--ficha {
    position: relative; z-index: 6; box-sizing: border-box; height: var(--jn-etq-h);
    display: inline-flex; align-items: center; gap: 8px; padding: 0 8px 0 11px;
    /* 140 px = los dos márgenes laterales que dejan libre la columna de controles del mapa (derecha). */
    min-width: 120px; max-width: min(232px, calc(100vw - 140px));
    border-radius: 14px; border: 2px solid #22c55e;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .22); letter-spacing: 0;
    font: 400 12px/1.2 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; text-align: left;
    pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.jn--ficha .jn-etq--ficha { background: #fff; color: #111827; }   /* gana a .jn--pausado/.jn--completado .jn-etq */
.jn-etq--ficha:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
.jn-etq--ficha .jn-etq__dot { flex-shrink: 0; width: 10px; height: 10px; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .22); }
.jn-etq__col { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.jn-etq__nom { font-weight: 800; font-size: 14px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jn-etq__srv { font-size: 12px; line-height: 1.2; color: #15803d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jn-etq__srv[hidden] { display: none; }
.jn-etq__flecha { flex-shrink: 0; width: 16px; height: 16px; color: #16a34a; }
.jn-etq__punta {
    position: absolute; left: 50%; bottom: -8px; width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg);
    background: inherit; border-right: 2px solid #22c55e; border-bottom: 2px solid #22c55e; border-bottom-right-radius: 3px;
}
.jn-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.jn--ficha.jn--pausado .jn-etq--ficha { border-color: #f59e0b; }
.jn--ficha.jn--pausado .jn-etq__dot { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .22); }
.jn--ficha.jn--pausado .jn-etq__punta { border-color: #f59e0b; }
/* setEtiquetaActivaVisible(false): el resumen del trabajo activo la tapa. visibility (no display) → el alto no cambia. */
.jn--sin-etq .jn-etq { visibility: hidden; pointer-events: none; }
.dark .jn-etq--ficha { background: #16181d; color: #f4f4f5; border-color: #22c55e; }
.dark .jn-etq__srv { color: #4ade80; }
.dark .jn-etq__flecha { color: #4ade80; }
/* La casa y el jardín se pueden tocar (resumen del trabajo); el resto del bloque deja pasar el mapa. */
.jn--tocable .jn-escena { pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* Pantallas bajas (≤ 700 px, p. ej. 320×640): la franja visible sobre el panel mide ~210 px; etiqueta,
   separación y cronómetro más compactos para que el bloque entero entre (la casa baja a 100 px en la app). */
@media (max-height: 700px) {
    .jn--mapa.jn--ficha { --jn-etq-h: 38px; --jn-gap: 9px; }
    .jn--mapa .jn-etq__nom { font-size: 13px; }
    .jn--mapa .jn-etq__srv { font-size: 11px; }
    .jn--mapa .jn-timer { padding: 3px 12px 3px 9px; }
    .jn--mapa .jn-timer__val { font-size: 14px; }
}
.jn--tocable .jn-escena:focus-visible { outline: 3px solid #2563eb; outline-offset: 4px; border-radius: 50%; }
.jn--mapa.jn--saliendo { opacity: 0; transition: opacity .26s ease; }
@media (prefers-reduced-motion: reduce) { .jn-aro, .jn-aro::before { animation: none; } .jn--mapa.jn--saliendo { transition: none; } }

/* ── Galería "Probar animaciones" (Ajustes → Casitas y servicios). Solo datos demo. ── */
.jg-body { padding-bottom: 7rem; }
.jg-wrap { max-width: 40rem; margin: 0 auto; }
.jg-note { display: flex; gap: .5rem; align-items: flex-start; font-size: .8125rem; color: #475569; background: #f1f5f9; border-radius: .75rem; padding: .6rem .8rem; margin: .75rem 0; }
.dark .jg-note { color: #cbd5e1; background: rgba(255, 255, 255, .06); }
.jg-note svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.jg-form { display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 480px) { .jg-form { grid-template-columns: 1fr 1fr; } }
.jg-field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; border: 0; padding: 0; margin: 0; }
.jg-field > label, .jg-field > legend { font-size: .8125rem; font-weight: 700; color: var(--aj-ink); padding: 0; }
.jg-field select, .jg-field input[type="text"] { min-height: 44px; border-radius: .6rem; border: 1px solid var(--aj-line); background: var(--aj-card); color: var(--aj-ink); padding: 0 .75rem; font-size: 1rem; width: 100%; }
.jg-seg { display: flex; gap: .35rem; }
.jg-seg label { flex: 1; position: relative; min-width: 0; }
.jg-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.jg-seg span { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: .6rem; border: 1px solid var(--aj-line); color: var(--aj-ink); font-size: .875rem; font-weight: 600; cursor: pointer; padding: 0 .3rem; text-align: center; }
.jg-seg input:checked + span { background: var(--aj-accent); border-color: var(--aj-accent); color: var(--aj-accent-ink); }
.jg-seg input:focus-visible + span { outline: 2px solid var(--aj-accent); outline-offset: 2px; }
.jg-stage { position: relative; margin: 1rem 0; border-radius: 1rem; min-height: 300px; display: flex; align-items: center; justify-content: center; padding: 1rem 0 1.25rem; overflow: hidden; border: 1px solid var(--aj-line); }
.jg-stage--claro { background: #f4f7f2; }
.jg-stage--oscuro { background: #111827; }
.jg-stage--mapa {
    background-color: #eceff1;
    background-image:
        linear-gradient(104deg, transparent 0 46%, #fff 46% 50%, transparent 50%),
        linear-gradient(12deg, transparent 0 62%, #fff 62% 65%, transparent 65%),
        linear-gradient(0deg, rgba(0,0,0,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.035) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 22px 22px, 22px 22px;
}
.dark .jg-stage--mapa { background-color: #1f2937; background-image: linear-gradient(104deg, transparent 0 46%, #38414e 46% 50%, transparent 50%), linear-gradient(12deg, transparent 0 62%, #38414e 62% 65%, transparent 65%); background-size: 100% 100%, 100% 100%; }
.jg-stage .jn { --jn-w: 190px; }
.jg-ctrl { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
@media (min-width: 480px) { .jg-ctrl { grid-template-columns: repeat(4, 1fr); } }
.jg-btn { min-height: 44px; border-radius: .7rem; border: 1px solid var(--aj-line); background: var(--aj-card); color: var(--aj-ink); font-weight: 700; font-size: .9375rem; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: 0 .5rem; }
.jg-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.jg-btn:disabled { opacity: .45; }
.jg-btn--primario { background: var(--aj-accent); border-color: var(--aj-accent); color: var(--aj-accent-ink); }
.jg-estado { margin-top: .75rem; font-size: .875rem; color: var(--aj-ink); }
.jg-estado b { font-weight: 800; }

/* ══════════════════════════════════════════════════════════════════════════
   MAPA DURANTE EL TRABAJO (25 sep 2026, agente A) — tarjeta inferior del trabajo en curso.
   UNA sola tarjeta redondeada: ícono del servicio, nombre, servicio, dirección corta y el swipe
   "Desliza para registrar salida" integrado (pista coral suave, tirador rojo con flecha).
   ⛔ Solo presentación: ids, gesto y lógica del slider (initSwipeActions) intactos.
   Todo cuelga de `.visible.mt-card`: oculto, el bloque vuelve a colapsar a 0 (grid 0fr) sin relleno.
   ══════════════════════════════════════════════════════════════════════════ */
.mt-ico, .mt-sw-chev { display: none; }
.mt-addr { display: flex; align-items: center; gap: .3rem; min-width: 0; }
.mt-addr__ico { width: 15px; height: 15px; flex-shrink: 0; color: var(--v143-ink-soft); }
.mt-addr__txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#geofence-arrival-overlay.visible.mt-card .gf-card {
    gap: .75rem; padding: .75rem .7rem .75rem; border-radius: 20px;
    border: 1.5px solid rgba(34, 197, 94, .45);
    background: #f4fbf5;
    background: color-mix(in srgb, #22c55e 6%, var(--v143-card, #fff));
}
.mt-card .gf-row { padding-top: 0; }
.mt-card .gf-avatar { display: none; }
.mt-card .mt-ico {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 56px; height: 56px; border-radius: 50%;
    background: #e8f5ec;
    background: color-mix(in srgb, var(--mt-srv, #16a34a) 16%, var(--v143-card, #fff));
    color: #166534;
    color: color-mix(in srgb, var(--mt-srv, #16a34a) 78%, #000);
}
.dark .mt-card .mt-ico { color: color-mix(in srgb, var(--mt-srv, #16a34a) 70%, #fff); }
.mt-ico__svg { width: 28px; height: 28px; }
/* El estado ("Trabajo en curso") queda para lectores de pantalla: la tarjeta ya lo dice con el swipe. */
.mt-card .gf-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.mt-card .gf-name { font-size: 1.2rem; }
.mt-card .gf-type { color: #15803d; font-weight: 600; margin-top: 0; }
.dark .mt-card .gf-type { color: #4ade80; }
.mt-card .gf-type-icon { display: none; }
.mt-card .gf-address { margin-top: .15rem; }
.mt-card .swipe-container { background: #fde4e1; border-color: #f6c4bd; }
.dark .mt-card .swipe-container { background: rgba(239, 68, 68, .16); border-color: rgba(239, 68, 68, .38); }
.mt-card .swipe-handle { background-color: #e53935; box-shadow: 0 0 0 4px rgba(229, 57, 53, .16), 0 6px 16px rgba(185, 28, 28, .35); }
.mt-card .swipe-text { color: #1f2937; }
.dark .mt-card .swipe-text { color: #fde8e6; }
.mt-card .mt-sw-chev { display: flex; order: 3; flex-shrink: 0; width: 26px; margin-right: 8px; color: rgba(229, 57, 53, .55); pointer-events: none; }
.mt-card .mt-sw-chev svg { width: 22px; height: 22px; }
.dark .mt-card .mt-sw-chev { color: rgba(252, 165, 165, .7); }
.mt-card .swipe-container.is-done .mt-sw-chev, .mt-card .swipe-container.sw-dragging .mt-sw-chev { opacity: 0; }
@media (max-width: 360px) {
    .mt-card .mt-ico { width: 48px; height: 48px; }
    .mt-ico__svg { width: 24px; height: 24px; }
    .mt-card .gf-name { font-size: 1.08rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   RESUMEN Y DETALLE DEL TRABAJO (25 sep 2026) — agente B · js/detalle-trabajo.js
   Tarjeta blanca anclada al marcador (.dt-card, en el floatPane del mapa) y panel "Ver trabajo"
   (.dt-sheet). Tokens --v143-*; colores de estado siempre con texto/ícono, nunca solos.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
    --dt-green: #15803d; --dt-green-soft: #dcfce7; --dt-green-ink: #14532d;
    --dt-amber: #b45309; --dt-amber-soft: #fef3c7; --dt-amber-line: #f59e0b; --dt-amber-ink: #92400e;
    --dt-blue: #1d4ed8; --dt-blue-soft: #dbeafe;
    --dt-tile: #f1f5f4; --dt-primary: #14532d; --dt-primary-ink: #ffffff;
}
.dark {
    --dt-green: #4ade80; --dt-green-soft: rgba(34, 197, 94, .16); --dt-green-ink: #bbf7d0;
    --dt-amber: #fbbf24; --dt-amber-soft: rgba(245, 158, 11, .14); --dt-amber-line: rgba(251, 191, 36, .55); --dt-amber-ink: #fde68a;
    --dt-blue: #93c5fd; --dt-blue-soft: rgba(59, 130, 246, .18);
    --dt-tile: rgba(255, 255, 255, .06); --dt-primary: #16a34a; --dt-primary-ink: #ffffff;
}
.dt-ancla { position: absolute; width: 0; height: 0; z-index: 5; }
.dt-card {
    position: absolute; left: 0; top: 0; z-index: 5; pointer-events: auto;
    width: min(320px, calc(100vw - 88px));
    transform: translate(-50%, calc(-100% - var(--dt-alto, 60px)));
    background: var(--v143-sheet); color: var(--v143-ink);
    border-radius: 18px; box-shadow: 0 10px 30px rgba(15, 23, 42, .22), 0 1px 3px rgba(15, 23, 42, .12);
    font-family: inherit; text-align: left; cursor: default;
    -webkit-tap-highlight-color: transparent;
}
.dark .dt-card { box-shadow: 0 10px 30px rgba(0, 0, 0, .55); border: 1px solid var(--v143-line); }
.dt-card::after {
    content: ""; position: absolute; left: 50%; bottom: -8px; width: 16px; height: 16px;
    background: var(--v143-sheet); transform: translateX(-50%) rotate(45deg);
    box-shadow: 3px 3px 6px rgba(15, 23, 42, .10); border-radius: 0 0 4px 0;
}
.dark .dt-card::after { border-right: 1px solid var(--v143-line); border-bottom: 1px solid var(--v143-line); }
/* Pantalla muy baja (la tarjeta no entra entre el encabezado y el panel inferior): fija arriba, sobre el panel. */
.dt-card.dt-card--fija { position: fixed; left: 50%; transform: translateX(-50%); z-index: 55; width: min(360px, calc(100vw - 24px)); }
.dt-card.dt-card--fija::after { display: none; }
.dt-card-in { position: relative; z-index: 1; padding: 12px 12px 6px 14px; }
.dt-card-head { display: flex; align-items: flex-start; gap: 10px; }
.dt-avatar {
    flex-shrink: 0; width: 44px; height: 44px; border-radius: 9999px; display: grid; place-items: center; overflow: hidden;
    background: color-mix(in srgb, var(--dt-svc, #1e3a8a) 16%, transparent);
}
.dt-avatar img { width: 34px; height: auto; display: block; }
.dt-avatar svg { width: 22px; height: 22px; color: var(--dt-svc, #1e3a8a); }
.dt-card-id { flex: 1; min-width: 0; padding-top: 2px; }
.dt-name { font-weight: 800; font-size: 1.05rem; line-height: 1.25; color: var(--v143-ink); overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dt-addr { font-size: .85rem; line-height: 1.3; color: var(--v143-ink-soft); overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; }
.dt-x {
    flex-shrink: 0; width: 44px; height: 44px; margin: -8px -6px 0 0; border-radius: 9999px;
    display: grid; place-items: center; color: var(--v143-ink-soft); background: transparent; border: 0; cursor: pointer;
}
.dt-x:hover, .dt-x:focus-visible { background: var(--v143-line); color: var(--v143-ink); }
.dt-x svg { width: 20px; height: 20px; }
.dt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dt-chip {
    display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
    min-height: 26px; padding: 3px 10px; border-radius: 9999px; font-size: .78rem; font-weight: 700; line-height: 1.2;
}
.dt-chip svg { width: 14px; height: 14px; flex-shrink: 0; }
.dt-chip-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-chip--svc { background: color-mix(in srgb, var(--dt-svc, #1e3a8a) 15%, var(--v143-sheet)); color: color-mix(in srgb, var(--dt-svc, #1e3a8a) 78%, var(--v143-ink)); }
.dark .dt-chip--svc { background: color-mix(in srgb, var(--dt-svc, #1e3a8a) 26%, var(--v143-sheet)); color: color-mix(in srgb, var(--dt-svc, #1e3a8a) 35%, #ffffff); }
.dt-st--done { background: var(--dt-green); color: #fff; }
.dark .dt-chip.dt-st--done { background: var(--dt-green-soft); color: var(--dt-green); }
.dt-st--progress { background: var(--dt-blue-soft); color: var(--dt-blue); }
.dt-st--pending { background: var(--dt-amber-soft); color: var(--dt-amber-ink); }
.dark .dt-chip.dt-st--pending { color: var(--dt-amber); }
.dt-card-meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px;
    margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--v143-line); font-size: .9rem; font-weight: 700;
}
.dt-sep { width: 1px; align-self: stretch; background: var(--v143-line); }
.dt-time, .dt-pay { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.dt-time svg, .dt-pay svg { width: 18px; height: 18px; flex-shrink: 0; }
.dt-time { color: var(--v143-ink); font-variant-numeric: tabular-nums; }
.dt-pay--due { color: var(--dt-amber); }
.dt-pay--paid { color: var(--dt-green); }
.dt-pay--none, .dt-pay--price { color: var(--v143-ink-soft); }
.dt-picker { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--v143-line); }
.dt-picker-t { font-size: .78rem; font-weight: 700; color: var(--v143-ink-soft); margin-bottom: 6px; }
.dt-picks { display: flex; flex-direction: column; gap: 6px; max-height: 150px; overflow-y: auto; overscroll-behavior: contain; }
.dt-pick {
    display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 10px; width: 100%;
    border-radius: 12px; border: 1px solid var(--v143-line); background: transparent; color: var(--v143-ink);
    font-size: .85rem; font-weight: 600; text-align: left; cursor: pointer;
}
.dt-pick.is-sel { border-color: var(--dt-svc, var(--v143-accent)); background: color-mix(in srgb, var(--dt-svc, #16a34a) 10%, transparent); }
.dt-pick-dot { width: 10px; height: 10px; border-radius: 9999px; background: var(--dt-svc, #1e3a8a); flex-shrink: 0; }
.dt-pick-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-pick-st { font-size: .75rem; color: var(--v143-ink-soft); flex-shrink: 0; }
.dt-card-acts { display: flex; gap: 8px; margin-top: 10px; }
.dt-card-acts .dt-btn { flex: 1; }
.dt-link {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; margin-top: 2px;
    background: transparent; border: 0; color: var(--dt-primary); font-weight: 800; font-size: .95rem; cursor: pointer;
}
.dark .dt-link { color: var(--dt-green); }
.dt-link svg { width: 18px; height: 18px; }
.dt-link:focus-visible, .dt-btn:focus-visible, .dt-x:focus-visible, .dt-pick:focus-visible { outline: 2px solid var(--v143-accent); outline-offset: 2px; }
.dt-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 12px;
    border-radius: 12px; font-weight: 700; font-size: .92rem; line-height: 1.2; cursor: pointer; text-align: center;
    border: 1.5px solid transparent;
}
.dt-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.dt-btn--pri { background: var(--dt-primary); color: var(--dt-primary-ink); }
.dt-btn--sec { background: var(--dt-tile); color: var(--v143-ink); }
.dt-btn--out { background: transparent; color: var(--dt-primary); border-color: var(--dt-primary); }
.dark .dt-btn--out { color: var(--dt-green); border-color: color-mix(in srgb, var(--dt-green) 60%, transparent); }
.dt-btn--wide { width: 100%; min-height: 52px; font-size: 1.05rem; }

/* El panel inferior del mapa se esconde mientras el detalle está abierto (conserva su alto y su estado). */
#bottom-panel.dt-panel-oculto { visibility: hidden !important; opacity: 0; pointer-events: none !important; }

.dt-sheet-wrap { position: fixed; inset: auto 0 0 0; z-index: 60; display: flex; justify-content: center; pointer-events: none; }
.dt-sheet-wrap[hidden] { display: none; }
.dt-sheet {
    position: relative; pointer-events: auto; width: 100%; max-width: 560px;
    max-height: min(82dvh, calc(100dvh - 96px)); display: flex; flex-direction: column;
    background: var(--v143-sheet); color: var(--v143-ink);
    border-top-left-radius: 26px; border-top-right-radius: 26px;
    box-shadow: 0 -10px 36px rgba(15, 23, 42, .28);
    transform: translateY(100%); transition: transform .26s cubic-bezier(.2, .8, .2, 1);
    outline: none;
}
.dark .dt-sheet { box-shadow: 0 -10px 36px rgba(0, 0, 0, .6); border: 1px solid var(--v143-line); border-bottom: 0; }
.dt-sheet-wrap.is-open .dt-sheet { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .dt-sheet { transition: none; } }
.dt-grip { flex-shrink: 0; display: flex; justify-content: center; align-items: center; height: 28px; cursor: grab; touch-action: none; }
.dt-grip-bar { width: 46px; height: 5px; border-radius: 9999px; background: var(--v143-ink-soft); opacity: .45; }
.dt-x--sheet { position: absolute; top: 12px; right: 12px; margin: 0; z-index: 2; background: var(--v143-sheet); }
.dt-sheet-body {
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding: 4px 18px calc(18px + env(safe-area-inset-bottom, 0px));
}
.dt-hero { display: flex; align-items: flex-start; gap: 10px; }
.dt-hero-txt { flex: 1; min-width: 0; padding-right: 36px; }
.dt-hero .dt-chips { margin-top: 0; }
.dt-title { font-size: 1.5rem; font-weight: 800; line-height: 1.2; margin-top: 8px; color: var(--v143-ink); }
.dt-title.dt-st--done { color: var(--dt-green-ink); background: none; }
.dark .dt-title.dt-st--done { color: var(--dt-green); }
.dt-title.dt-st--progress { color: var(--dt-blue); background: none; }
.dt-title.dt-st--pending { color: var(--dt-amber-ink); background: none; }
.dark .dt-title.dt-st--pending { color: var(--dt-amber); }
.dt-name--lg { font-size: 1.15rem; margin-top: 8px; -webkit-line-clamp: 3; }
.dt-addr--lg { font-size: .95rem; -webkit-line-clamp: 3; }
.dt-house { flex-shrink: 0; width: 112px; height: auto; margin-top: 30px; filter: drop-shadow(0 6px 10px rgba(15, 23, 42, .18)); }
.dt-house--icon { width: 88px; height: 88px; border-radius: 9999px; display: grid; place-items: center; background: color-mix(in srgb, var(--dt-svc) 16%, transparent); }
.dt-house--icon svg { width: 40px; height: 40px; color: var(--dt-svc); }
.dt-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-top: 14px; }
.dt-tile { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; background: var(--dt-tile); min-width: 0; }
.dt-tile > svg { width: 26px; height: 26px; flex-shrink: 0; color: var(--v143-ink); opacity: .85; }
.dt-tile > div { min-width: 0; }
.dt-tile-l { font-size: .82rem; color: var(--v143-ink-soft); }
.dt-tile-v { font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dt-h3 { font-size: 1rem; font-weight: 800; margin: 16px 0 8px; }
.dt-svc { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dt-svc-row {
    display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 12px;
    border: 1px solid var(--v143-line); border-left: 4px solid var(--dt-svc, #1e3a8a); border-radius: 12px; font-size: .98rem; font-weight: 600;
}
.dt-svc-row svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--dt-svc, #1e3a8a); }
.dark .dt-svc-row svg { color: color-mix(in srgb, var(--dt-svc, #1e3a8a) 45%, #ffffff); }
.dt-svc-row span { min-width: 0; overflow-wrap: anywhere; }
.dt-paybox { display: flex; align-items: flex-start; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--v143-line); }
.dt-paybox > svg { width: 26px; height: 26px; flex-shrink: 0; margin-top: 1px; }
.dt-paybox-grow { flex: 1; min-width: 0; }
.dt-paybox-t { font-weight: 800; font-size: .95rem; }
.dt-paybox-m { font-weight: 800; font-size: 1.7rem; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--v143-ink); }
.dt-paybox-s { font-size: .85rem; color: var(--v143-ink-soft); }
.dt-paybox--due { background: var(--dt-amber-soft); border-color: var(--dt-amber-line); }
.dt-paybox--due > svg, .dt-paybox--due .dt-paybox-t { color: var(--dt-amber-ink); }
.dark .dt-paybox--due > svg, .dark .dt-paybox--due .dt-paybox-t { color: var(--dt-amber); }
.dt-paybox--paid { background: var(--dt-green-soft); border-color: color-mix(in srgb, var(--dt-green) 45%, transparent); }
.dt-paybox--paid > svg, .dt-paybox--paid .dt-paybox-t { color: var(--dt-green-ink); }
.dark .dt-paybox--paid > svg, .dark .dt-paybox--paid .dt-paybox-t { color: var(--dt-green); }
.dt-paybox--none > svg, .dt-paybox--price > svg { color: var(--v143-ink-soft); }
.dt-paylist { margin: 6px 0 0; display: grid; gap: 4px; }
.dt-paylist > div { display: flex; justify-content: space-between; gap: 12px; font-size: .95rem; }
.dt-paylist dt { color: var(--v143-ink-soft); }
.dt-paylist dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.dt-paylist-saldo { border-top: 1px dashed var(--dt-amber-line); padding-top: 4px; }
.dt-paylist-saldo dt, .dt-paylist-saldo dd { color: var(--dt-amber-ink); font-weight: 800; }
.dark .dt-paylist-saldo dt, .dark .dt-paylist-saldo dd { color: var(--dt-amber); }
.dt-acts { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.dt-acts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dt-acts-row--one { grid-template-columns: 1fr; }
@media (max-width: 359px) { .dt-acts-row { grid-template-columns: 1fr; } .dt-house { width: 84px; } .dt-title { font-size: 1.3rem; } }
/* Orden de la referencia: nombre → servicio → dirección. Y aire entre el tirador (con su anillo) y el texto. */
.mt-card .gf-info { display: flex; flex-direction: column; }
.mt-card .gf-name { order: 1; } .mt-card .gf-type { order: 2; } .mt-card .gf-address { order: 3; }
.mt-card .swipe-text { padding-left: 1.15rem; padding-right: .3rem; }
/* El tirador es absoluto (#swipe-handle, left 4px) y el texto ocupa el 100 %: se le reserva el ancho del
   tirador con su anillo, para que "Desliza…" no empiece debajo del botón. */
.mt-card .swipe-text { padding-left: calc(60px + .85rem); padding-right: .35rem; }
@media (max-width: 360px) {
    .mt-card .swipe-text { padding-left: 64px; padding-right: 6px; font-size: 12px; }
    .mt-card .mt-sw-chev { display: none; }
}

/* v247 · LLEGADA con la MISMA tarjeta que la salida (.mt-card): mismas dimensiones y tipografía; solo el color.
   Pista verde clara, tirador verde con flecha y chevrons verdes. La salida conserva el coral de arriba. */
.mt-llegada .swipe-container { background: #e3f4e8; border-color: #bfe5ca; }
.dark .mt-llegada .swipe-container { background: rgba(34, 197, 94, .14); border-color: rgba(34, 197, 94, .36); }
.mt-llegada .swipe-handle { background-color: #15803d; box-shadow: 0 0 0 4px rgba(22, 163, 74, .18), 0 6px 16px rgba(21, 128, 61, .35); }
.mt-llegada .swipe-text { color: #14532d; }
.dark .mt-llegada .swipe-text { color: #dcfce7; }
.mt-llegada .mt-sw-chev { color: rgba(22, 163, 74, .7); }
.dark .mt-llegada .mt-sw-chev { color: rgba(134, 239, 172, .75); }
.mt-llegada .swipe-fill { background: rgba(22, 163, 74, .2); }

/* ══ RUTA DE HOY (25 sep 2026) ═══════════════════════════════════════════════
   Tarjetas del panel inferior de Inicio: número de parada (= el del pin), casita del servicio,
   precio (solo con permiso de montos) y los botones "Cómo llegar" / "Llegada". Tokens v143.
   El brillo verde del botón de llegada SOLO existe con la ubicación verificada dentro de la
   geocerca (clase .is-verified, la decide rhUbicacionVerificada en app.js). */
:root { --rh-card-bg: #ffffff; --rh-green: #15803d; --rh-green-2: #16a34a; --rh-owes: #c2410c; }
.dark { --rh-card-bg: rgba(255, 255, 255, 0.035); --rh-green: #4ade80; --rh-green-2: #22c55e; --rh-owes: #fb923c; }

.next-job-row.is-rh { border-top: 0; margin-top: 0.3rem; padding-top: 0; }
#geofence-arrival-overlay.visible + .next-job-row.is-rh { border-top: 1px solid var(--v143-line); margin-top: 0.9rem; padding-top: 0.7rem; }
.njr-label.rh-title { font-size: 1.15rem; font-weight: 800; color: var(--v143-ink); margin: 0.15rem 0 0.55rem; letter-spacing: -0.01em; }
.rh-next { cursor: pointer; }

.rh-card {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.7rem 0.75rem; border-radius: 16px;
    background: var(--rh-card-bg); border: 1px solid var(--v143-line);
    color: var(--v143-ink);
}
.rh-card--next {
    background: color-mix(in srgb, var(--v143-accent) 9%, var(--v143-sheet));
    border-color: color-mix(in srgb, var(--v143-accent) 45%, transparent);
}
.rh-card--live { border-color: color-mix(in srgb, var(--v143-accent) 45%, transparent); }
.rh-num {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1rem; font-variant-numeric: tabular-nums;
    background: color-mix(in srgb, var(--v143-accent) 16%, var(--v143-sheet)); color: var(--rh-green);
}
.rh-card--next .rh-num { background: #15803d; color: #ffffff; }
.rh-casa { position: relative; flex: 0 0 auto; width: 56px; height: 56px; }
.rh-casa__img { width: 100%; height: 100%; object-fit: contain; display: block; }
.rh-casa.is-rota { border-radius: 50%; background: color-mix(in srgb, var(--rh-srv, #1e3a8a) 18%, transparent); }
.rh-casa.is-rota .rh-casa__img { visibility: hidden; }
.rh-casa__chip {
    position: absolute; top: -3px; right: -5px; width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--rh-srv, #1e3a8a) 16%, #ffffff); color: var(--rh-srv, #1e3a8a);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.dark .rh-casa__chip { background: color-mix(in srgb, var(--rh-srv, #1e3a8a) 32%, #1f2937); color: color-mix(in srgb, var(--rh-srv, #1e3a8a) 60%, #ffffff); }
.rh-casa__chip svg { width: 13px; height: 13px; }
.rh-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.rh-card--acts .rh-main, .rh-main:has(.rh-acts) { gap: 0.3rem; }   /* el área táctil de 44 px no roza el precio */
.rh-row1 { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; }
.rh-name {
    flex: 1 1 auto; min-width: 0; text-align: left; line-height: 1.25;
    font-weight: 800; font-size: 1.02rem; color: var(--v143-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    background: none; border: 0; padding: 0;
}
.rh-price { flex: 0 0 auto; font-weight: 800; font-size: 1.05rem; color: var(--v143-ink); font-variant-numeric: tabular-nums; }
.rh-row2 { display: flex; align-items: center; gap: 0.5rem; min-width: 0; min-height: 1.3rem; }
.rh-sub {
    flex: 1 1 auto; min-width: 0; font-size: 0.84rem; color: var(--v143-ink-soft);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rh-srv { font-weight: 600; color: color-mix(in srgb, var(--rh-srv, #1e3a8a) 78%, #000000); }
.dark .rh-srv { color: color-mix(in srgb, var(--rh-srv, #1e3a8a) 62%, #ffffff); }
.rh-srv svg { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; margin-right: 3px; }
.rh-dot { margin: 0 0.3rem; }
/* Servicio y dirección comparten la línea: el servicio cede primero, la dirección nunca desaparece del todo. */
.rh-sub { display: flex; align-items: baseline; }
.rh-srv { flex: 0 1 auto; min-width: 5.2em; max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rh-dot { flex: 0 0 auto; }
.rh-addr { flex: 1 1 0; min-width: 2.6em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Con los dos botones al lado, servicio y dirección van en DOS líneas (en una sola se cortaban las dos). */
/* Lo mismo con el escudo de admin solo (cualquier botón a la derecha): la columna derecha le quita el ancho. */
.rh-card--acts .rh-sub, .rh-row2:has(.rh-acts) .rh-sub { flex-direction: column; align-items: stretch; line-height: 1.3; }
.rh-card--acts .rh-dot, .rh-row2:has(.rh-acts) .rh-dot { display: none; }
.rh-card--acts .rh-srv, .rh-card--acts .rh-addr,
.rh-row2:has(.rh-acts) .rh-srv, .rh-row2:has(.rh-acts) .rh-addr { max-width: 100%; min-width: 0; flex: 0 0 auto; }
.rh-live { display: flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; font-weight: 700; color: var(--rh-green); }
.rh-live svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Botones: se VEN de 38 px pero el área táctil es de 44 px (margen negativo). */
.rh-acts { flex: 0 0 auto; display: flex; gap: 6px; }
.rh-act {
    position: relative; width: 44px; height: 44px; margin: -3px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.rh-act__cara {
    width: 38px; height: 38px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    transition: box-shadow 0.2s ease, transform 0.1s ease;
}
.rh-act:active .rh-act__cara { transform: scale(0.94); }
.rh-act:focus-visible { outline: none; }
.rh-act:focus-visible .rh-act__cara { outline: 2px solid var(--v143-accent); outline-offset: 2px; }
.rh-act__cara svg { width: 20px; height: 20px; }
.rh-act--nav .rh-act__cara { background: var(--rh-card-bg); border: 1.5px solid var(--rh-green-2); color: var(--rh-green); }
.dark .rh-act--nav .rh-act__cara { background: transparent; }
/* Sin verificar: se distingue a simple vista (claro y punteado, sin brillo). */
.rh-act--checkin.is-unverified .rh-act__cara {
    background: color-mix(in srgb, var(--v143-accent) 12%, var(--v143-sheet)); color: var(--rh-green);
    border: 1.5px dashed color-mix(in srgb, var(--rh-green-2) 60%, transparent);
}
/* Verificada dentro de la geocerca: verde lleno con halo. */
.rh-act--checkin.is-verified .rh-act__cara {
    background: #15803d; color: #ffffff;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25), 0 0 14px 2px rgba(34, 197, 94, 0.55);
    animation: rh-brillo 2.2s ease-in-out infinite;
}
@keyframes rh-brillo {
    0%, 100% { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.22), 0 0 10px 1px rgba(34, 197, 94, 0.45); }
    50%      { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.16), 0 0 18px 4px rgba(34, 197, 94, 0.6); }
}
@media (prefers-reduced-motion: reduce) { .rh-act--checkin.is-verified .rh-act__cara { animation: none; } }
.rh-act--live .rh-act__cara { background: #15803d; color: #ffffff; }
.rh-act--done .rh-act__cara { background: #16a34a; color: #ffffff; }
/* Escudo de admin: morado de línea (como el icono morado de la base), sin competir con "Llegada". */
.rh-act--admin .rh-act__cara { background: color-mix(in srgb, #7c3aed 10%, var(--v143-sheet)); color: #6d28d9; border: 1.5px solid rgba(124, 58, 237, 0.45); }
.dark .rh-act--admin .rh-act__cara { color: #c4b5fd; border-color: rgba(196, 181, 253, 0.5); }

/* Lista */
#jobList > .rh-item + .rh-item { margin-top: 0.6rem; }
#jobList > .rh-item { cursor: pointer; }
.rh-done-head {
    width: 100%; min-height: 44px; margin-top: 0.75rem; padding: 0.6rem 0.1rem 0.4rem;
    display: flex; align-items: center; justify-content: space-between;
    border-top: 1px solid var(--v143-line);
    font-weight: 700; font-size: 0.98rem; color: var(--v143-ink); background: none;
}
#jobList > .rh-done-head:first-child { margin-top: 0; border-top: 0; }
.rh-done-head svg { width: 20px; height: 20px; color: var(--v143-ink-soft); transition: transform 0.2s ease; }
.rh-done-head[aria-expanded="false"] svg { transform: rotate(-90deg); }
#jobList > .rh-done-list { margin-top: 0.25rem; }
.rh-done-list > .rh-done + .rh-done { margin-top: 0.4rem; }
.rh-done {
    display: flex; align-items: center; gap: 0.7rem; cursor: pointer;
    padding: 0.55rem 0.75rem; border-radius: 14px;
    border: 1px solid var(--v143-line); background: var(--rh-card-bg); color: var(--v143-ink);
}
.rh-check {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--v143-accent) 14%, var(--v143-sheet)); color: var(--rh-green);
}
.rh-check svg { width: 18px; height: 18px; stroke-width: 3; }
.rh-done__info { flex: 1 1 auto; min-width: 0; }
.rh-done__name { font-weight: 700; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rh-done__sub { font-size: 0.8rem; color: var(--v143-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.rh-done__side { flex: 0 1 auto; min-width: 0; max-width: 46%; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.rh-done__side .rh-price { font-size: 0.95rem; }
.rh-paid { max-width: 100%; font-size: 0.78rem; font-weight: 700; color: var(--rh-green); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rh-paid__m { font-weight: 500; color: var(--v143-ink-soft); }
.rh-owes { font-size: 0.78rem; font-weight: 700; color: var(--rh-owes); }

@media (max-width: 359px) {
    .rh-card { gap: 0.45rem; padding: 0.6rem 0.55rem; }
    .rh-num { width: 28px; height: 28px; font-size: 0.9rem; }
    .rh-casa { width: 46px; height: 46px; }
    .rh-casa__chip { width: 19px; height: 19px; right: -4px; }
    .rh-name { font-size: 0.96rem; }
    .rh-price { font-size: 0.98rem; }
    .rh-done { gap: 0.55rem; padding: 0.5rem 0.6rem; }
}

/* ══ v247 · Tarjetas COMPACTAS bajo el swipe (referencia ref2) ═══════════════════════════════════════
   Menos relleno, casita de 52 px, y tres líneas a la izquierda de los dos botones: servicio (color del
   servicio), dirección corta con pin y, si está en curso, "En curso · hora". El precio arriba a la derecha. */
.rh-card { padding: 0.55rem 0.65rem; gap: 0.5rem; border-radius: 14px; }
.rh-casa { width: 52px; height: 52px; }
.rh-num { width: 32px; height: 32px; font-size: 0.95rem; }
.rh-card .rh-main { gap: 0.25rem; }   /* el área táctil de 44 px no roza el precio */
.rh-row2 { align-items: center; }
.rh-lines { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.05rem; line-height: 1.3; }
.rh-lines .rh-srv, .rh-lines .rh-addr {
    display: block; max-width: 100%; min-width: 0; flex: 0 0 auto;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rh-lines .rh-srv { font-size: 0.86rem; }
.rh-lines .rh-addr { font-size: 0.82rem; color: var(--v143-ink-soft); }
.rh-lines .rh-addr svg { width: 13px; height: 13px; display: inline-block; vertical-align: -2px; margin-right: 3px; }
.rh-lines .rh-live { font-size: 0.8rem; }
#jobList > .rh-item + .rh-item { margin-top: 0.5rem; }
@media (max-width: 359px) {
    .rh-card { padding: 0.5rem 0.5rem; gap: 0.4rem; }
    .rh-casa { width: 44px; height: 44px; }
    .rh-num { width: 26px; height: 26px; font-size: 0.85rem; }
}


/* ══ v249 · FINALIZAR TRABAJO (modal de completar, 26 sep 2026) ═══════════════════════════════════════
   Ventana blanca redondeada, encabezado verde salvia con hojas (SVG inline, sin imágenes), resumen con la casita
   del servicio, "¿El cliente pagó?", método de pago (Efectivo / Transferencia), "Avisar al cliente" con vista previa
   editable, y el botón principal fijo abajo. El alto sigue al teclado (--rhf-vh = visualViewport, lo pone app.js). */
:root { --rhf-sage: #eef6ee; --rhf-green: #166534; --rhf-green-ink: #14532d; --rhf-mamey: #fff1e3; --rhf-orange: #f97316; --rhf-orange-ink: #c2410c; }
.dark { --rhf-sage: #16261c; --rhf-green: #16a34a; --rhf-green-ink: #bbf7d0; --rhf-mamey: rgba(249, 115, 22, .14); --rhf-orange: #fb923c; --rhf-orange-ink: #fdba74; }
.rhf-modal .hidden { display: none !important; }
.rhf-modal {
    z-index: 1100;
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
    overscroll-behavior: contain; touch-action: none;
}
.rhf-card {
    width: 100%; max-width: 420px;
    max-height: min(calc(var(--rhf-vh, 100dvh) - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)), 820px);
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--v143-sheet, #fff); color: var(--v143-ink, #0f172a);
    border-radius: 24px; box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
    touch-action: auto;
}
.rhf-head {
    position: relative; flex-shrink: 0; overflow: hidden; text-align: center;
    padding: 20px 52px 16px; background: var(--rhf-sage);
}
.rhf-hojas { position: absolute; width: 92px; height: 70px; color: #16a34a; opacity: .16; pointer-events: none; }
.rhf-hojas path:not([fill="none"]) { fill: currentColor; }
.rhf-hojas--izq { left: -6px; top: 4px; }
.rhf-hojas--der { right: 26px; bottom: -14px; transform: scaleX(-1); opacity: .12; }
.dark .rhf-hojas { opacity: .22; }
.rhf-title { position: relative; font-size: 1.55rem; font-weight: 800; line-height: 1.15; color: var(--rhf-green-ink); letter-spacing: -.01em; }
.rhf-sub { position: relative; margin-top: 4px; font-size: .92rem; color: var(--v143-ink-soft, #64748b); }
.rhf-x {
    position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--v143-ink, #0f172a); cursor: pointer;
}
.rhf-x svg { width: 22px; height: 22px; }
.rhf-x:focus-visible { outline: 2px solid var(--rhf-green); outline-offset: -2px; }
.rhf-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 14px 18px 4px; }

.rhf-resumen { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding-bottom: 14px; }
.rhf-casa {
    width: 76px; height: 76px; border-radius: 18px; overflow: hidden; flex-shrink: 0;
    border: 2px solid color-mix(in srgb, var(--rhf-green) 55%, transparent); background: var(--rhf-sage);
    display: flex; align-items: center; justify-content: center;
}
.rhf-casa img { width: 100%; height: 100%; object-fit: contain; }
.rhf-id { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.rhf-precio:not(.hidden) ~ .rhf-id .rhf-nombre, .rhf-resumen:has(.rhf-precio:not(.hidden)) .rhf-nombre { padding-right: 6.4rem; }
.rhf-nombre { max-width: 100%; font-size: 1.25rem; font-weight: 800; line-height: 1.2; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.rhf-chip {
    display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 10px; border-radius: 9999px;
    background: color-mix(in srgb, var(--rh-srv, #16a34a) 13%, var(--v143-sheet, #fff));
    color: color-mix(in srgb, var(--rh-srv, #16a34a) 75%, #000); font-size: .88rem; font-weight: 700;
}
.dark .rhf-chip { color: color-mix(in srgb, var(--rh-srv, #16a34a) 60%, #fff); }
.rhf-chip svg { width: 15px; height: 15px; flex-shrink: 0; }
.rhf-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rhf-tel { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; color: #2563eb; font-weight: 600; font-size: .95rem; white-space: nowrap; }
.dark .rhf-tel { color: #93c5fd; }
.rhf-tel svg { width: 16px; height: 16px; color: var(--v143-ink-soft, #64748b); }
.rhf-precio {
    position: absolute; top: 0; right: 0; padding: 6px 10px; border-radius: 12px; background: var(--rhf-sage);
    color: var(--rhf-green); font-size: 1.2rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dark .rhf-precio { color: #4ade80; }

.rhf-sec { border-top: 1px solid var(--v143-line, rgba(15, 23, 42, .1)); padding: 12px 0; }
.rhf-fila { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.rhf-fila-col { flex: 1 1 auto; min-width: 0; }
.rhf-fila > .rhf-fila-t { flex: 1 1 auto; }
.rhf-fila-t { font-size: 1.1rem; font-weight: 800; line-height: 1.25; cursor: pointer; }
.rhf-fila-s { font-size: .86rem; color: var(--v143-ink-soft, #64748b); margin-top: 1px; }
.rhf-msg-ico { width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--rhf-green); }
.dark .rhf-msg-ico { color: #4ade80; }
.rhf-msg-ico svg { width: 26px; height: 26px; }
/* Interruptor: el input sigue siendo el checkbox de siempre (id intacto). */
.rhf-switch { position: relative; flex-shrink: 0; width: 56px; height: 44px; display: flex; align-items: center; cursor: pointer; }
.rhf-switch span { position: relative; width: 56px; height: 32px; border-radius: 9999px; background: #cbd5e1; transition: background .2s ease; }
.dark .rhf-switch span { background: #475569; }
.rhf-switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s ease; }
.rhf-switch input:checked + span { background: var(--rhf-green); }
.rhf-switch input:checked + span::after { transform: translateX(24px); }
.rhf-switch input:focus-visible + span { outline: 2px solid var(--rhf-green); outline-offset: 3px; }

.rhf-metodos { margin-top: 8px; }
.rhf-metodo-t { font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
.rhf-opciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* "Transferencia" no entra en media fila por debajo de ~400 px: las opciones van una debajo de la otra. */
@media (max-width: 399px) { .rhf-opciones { grid-template-columns: 1fr; gap: 8px; } }
.rhf-opcion {
    min-height: 52px; padding: 8px 12px; border-radius: 12px; display: flex; align-items: center; gap: 10px;
    border: 1.5px solid var(--v143-line, rgba(15, 23, 42, .14)); background: var(--v143-sheet, #fff);
    color: var(--v143-ink, #0f172a); font-weight: 600; font-size: 1rem; text-align: left; cursor: pointer;
}
.rhf-opcion svg { width: 24px; height: 24px; flex-shrink: 0; }
.rhf-op-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rhf-radio { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; border: 2px solid #cbd5e1; position: relative; }
.rhf-opcion.active { background: var(--rhf-mamey); border-color: var(--rhf-orange); color: var(--rhf-orange-ink); }
.rhf-opcion.active .rhf-radio { border-color: var(--rhf-orange); }
.rhf-opcion.active .rhf-radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--rhf-orange); }
.rhf-opcion:focus-visible { outline: 2px solid var(--rhf-orange); outline-offset: 2px; }
.rhf-nota { margin-top: 8px; font-size: .84rem; color: var(--v143-ink-soft, #64748b); }

.rhf-preview { margin-top: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--v143-line, rgba(15, 23, 42, .12)); background: color-mix(in srgb, var(--v143-ink, #0f172a) 3%, var(--v143-sheet, #fff)); }
.rhf-preview:focus-within { border-color: var(--rhf-green); }
.rhf-preview-h { display: flex; align-items: center; gap: 8px; }
.rhf-preview-h label { flex: 1 1 auto; font-size: .82rem; font-weight: 700; color: var(--v143-ink-soft, #64748b); }
.rhf-lapiz { width: 18px; height: 18px; color: var(--v143-ink-soft, #64748b); }
.rhf-regen { min-height: 32px; padding: 0 6px; background: none; border: 0; color: var(--rhf-green); font-weight: 700; font-size: .82rem; cursor: pointer; }
.rhf-textarea {
    display: block; width: 100%; min-height: 5.4em; max-height: 12em; margin-top: 4px; padding: 0; resize: none; overflow-y: auto;
    background: transparent; border: 0; outline: none; color: var(--v143-ink, #0f172a); font-size: 1rem; line-height: 1.4;
}
.rhf-reintento { margin: 4px 0 8px; padding: 12px; border-radius: 14px; background: var(--rhf-sage); }
.rhf-reint-t { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--rhf-green); }
.dark .rhf-reint-t { color: #4ade80; }
.rhf-reint-t svg { width: 20px; height: 20px; }
.rhf-reint-m { margin-top: 4px; font-size: .92rem; }

.rhf-pie { flex-shrink: 0; padding: 10px 18px calc(8px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 2px; background: var(--v143-sheet, #fff); }
.rhf-principal {
    width: 100%; min-height: 54px; border-radius: 12px; border: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    background: var(--rhf-green); color: #fff; font-size: 1.05rem; font-weight: 800;
}
.rhf-principal svg { width: 22px; height: 22px; flex-shrink: 0; }
.rhf-principal:disabled { opacity: .6; cursor: default; }
.rhf-principal:focus-visible { outline: 3px solid color-mix(in srgb, var(--rhf-green) 45%, transparent); outline-offset: 2px; }
.rhf-volver { min-height: 44px; background: none; border: 0; color: var(--rhf-green); font-weight: 800; font-size: 1rem; cursor: pointer; }
.dark .rhf-volver { color: #4ade80; }
.rhf-volver:focus-visible { outline: 2px solid var(--rhf-green); border-radius: 10px; }
@media (max-width: 359px) {
    .rhf-head { padding: 16px 46px 12px; }
    .rhf-title { font-size: 1.3rem; }
    .rhf-body { padding: 12px 14px 4px; }
    .rhf-pie { padding-left: 14px; padding-right: 14px; }
    .rhf-resumen { gap: 10px; }
    .rhf-resumen:has(.rhf-precio:not(.hidden)) .rhf-nombre { padding-right: 0; }
    .rhf-casa { width: 64px; height: 64px; border-radius: 14px; }
    .rhf-precio { position: static; grid-column: 1 / -1; justify-self: start; font-size: 1.15rem; padding: 4px 10px; }
    .rhf-nombre { font-size: 1.12rem; }
    .rhf-opciones { gap: 8px; }
    .rhf-opcion { padding: 8px 10px; gap: 8px; font-size: .92rem; }
    .rhf-fila-t { font-size: 1rem; }
}


/* ══════════════════════════════════════════════════════════════════════════
   v249 · PANTALLA DE ACCESO — verde salvia, crema, tarjeta blanca.

   Tokens PROPIOS del acceso (--lg-*): el repo no tenía una paleta salvia/crema.
   Los verdes se toman de lo que YA existe para no inventar otro verde de marca:
   --lg-green = --brand del portal (#1D6A3A) = --deep de la landing, y
   --lg-ink = --brand-ink del portal (#14532d). El crema sale del propio fondo
   (muestreado: #fdfbef … #fefcf4), así la foto se funde con la página.

   ⛔ Dark mode por selectores `.dark …` escritos acá, NO con variantes `dark:`
   de Tailwind: el `tailwind.config` con darkMode:'class' recién lo fija app.js
   al cargar, y antes de eso el CDN usa `media`. La pantalla de acceso es lo
   PRIMERO que se pinta, justo en esa ventana.

   ⛔ #authContainer DESPLAZA (regla v213 de arriba). Nada de acá le pone
   overflow:hidden ni alto fijo: con el teclado abierto, el botón tiene que
   seguir siendo alcanzable con scroll.

   Encuadre del fondo: el ancho de la foto es --lg-w (todo el ancho en el
   teléfono, 560 px como tope en escritorio con los bordes difuminados al
   crema). Las alturas de la zona de marca se expresan en fracciones de
   --lg-w, medidas sobre la foto de 932×1688: la casa ocupa 0.48–0.66 W y el
   césped se funde al crema hacia 0.75 W. Así el logo queda en el cielo, la
   casa entre el logo y la tarjeta, y la tarjeta arranca donde termina el
   jardín — en cualquier ancho, sin deformar ni recortar la casa.
   ══════════════════════════════════════════════════════════════════════════ */
#authContainer.lg-auth {
    --lg-cream: #fcfaf1;
    --lg-card: #ffffff;
    --lg-sage-line: #d3dfc8;
    --lg-field: #f7f8f2;
    --lg-green: #1d6a3a;
    --lg-green-2: #16512c;
    --lg-link: #1d6a3a;
    --lg-ink: #14532d;
    --lg-text: #292524;
    --lg-muted: #5f5854;
    --lg-ph: #8b8680;
    --lg-danger: #b42318;
    --lg-ring: rgba(29, 106, 58, 0.24);
    --lg-w: min(100vw, 560px);
    /* Encuadre por defecto (teléfonos de alto normal y escritorio alto). */
    --lg-shift: 0px;
    --lg-brand-h: calc(var(--lg-w) * 0.70);
    --lg-logo-h: min(calc(var(--lg-w) * 0.40), 210px);
    --lg-logo-top: calc(var(--lg-w) * 0.045);
    background: var(--lg-cream);
    color: var(--lg-text);
    padding-bottom: 0;              /* el margen inferior lo pone .lg-stage */
}
.dark #authContainer.lg-auth {
    --lg-cream: #0f1713;            /* = --bg oscuro del portal */
    --lg-card: #172219;             /* = --panel oscuro del portal */
    --lg-sage-line: #2f4034;
    --lg-field: #1e2c22;
    --lg-link: #86efac;
    --lg-ink: #dcfce7;
    --lg-text: #f5f5f4;
    --lg-muted: #a8a29e;
    --lg-ph: #7d8a80;
    --lg-danger: #fca5a5;
    --lg-ring: rgba(134, 239, 172, 0.28);
}

/* Teléfonos BAJOS (320×568, 375×667): se encoge primero lo decorativo. La
   foto sube (el cielo vacío sale por arriba), el logo se achica y la tarjeta
   arranca antes; los controles no cambian de tamaño. */
@media (max-height: 700px) and (max-width: 600px) {
    #authContainer.lg-auth {
        --lg-shift: calc(var(--lg-w) * -0.12);
        --lg-brand-h: calc(var(--lg-w) * 0.575);
        --lg-logo-h: calc(var(--lg-w) * 0.30);
        --lg-logo-top: calc(var(--lg-w) * 0.03);
    }
}
@media (max-height: 600px) and (max-width: 600px) {
    #authContainer.lg-auth {
        --lg-shift: calc(var(--lg-w) * -0.17);
        --lg-brand-h: calc(var(--lg-w) * 0.51);
        --lg-logo-h: calc(var(--lg-w) * 0.265);
        --lg-logo-top: calc(var(--lg-w) * 0.02);
    }
}
/* Escritorio o tablet apaisada con poco alto: mismo criterio. */
@media (min-width: 601px) and (max-height: 860px) {
    #authContainer.lg-auth {
        --lg-shift: calc(var(--lg-w) * -0.10);
        --lg-brand-h: calc(var(--lg-w) * 0.60);
        --lg-logo-h: calc(var(--lg-w) * 0.33);
        --lg-logo-top: calc(var(--lg-w) * 0.035);
    }
}

.lg-stage {
    position: relative;
    isolation: isolate;             /* las capas del fondo (z-index -1) quedan DENTRO */
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 16px calc(env(safe-area-inset-bottom, 0px) + 20px);
    box-sizing: border-box;
    overflow: hidden;               /* recorta la foto desplazada hacia arriba; NO el contenido: .lg-stage crece con él */
}
.lg-deco {
    position: absolute;
    left: 50%;
    width: var(--lg-w);
    transform: translateX(-50%);
    background-image: url('../img/login/fondo.webp');
    background-repeat: no-repeat;
    background-size: 100% auto;
    pointer-events: none;
    z-index: -1;
}
.lg-deco-top {
    top: var(--lg-shift);
    height: calc(var(--lg-w) * 0.80);
    background-position: center top;
    /* El pie de esta capa ya es crema en la foto; la máscara lo vuelve además
       transparente para que en oscuro no quede una franja clara. */
    -webkit-mask-image: linear-gradient(to bottom, #000 84%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 84%, transparent 100%);
}
.lg-deco-bottom {
    bottom: 0;
    height: calc(var(--lg-w) * 0.27);
    background-position: center bottom;
    -webkit-mask-image: linear-gradient(to top, #000 55%, transparent 100%);
            mask-image: linear-gradient(to top, #000 55%, transparent 100%);
}
/* Más ancho que la foto: los bordes se difuminan al crema en vez de cortar
   los árboles en seco. La foto NO se estira. */
@media (min-width: 561px) {
    .lg-deco-top {
        -webkit-mask-image: linear-gradient(to bottom, #000 84%, transparent 100%), linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
        -webkit-mask-composite: source-in;
                mask-image: linear-gradient(to bottom, #000 84%, transparent 100%), linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
                mask-composite: intersect;
    }
    .lg-deco-bottom {
        -webkit-mask-image: linear-gradient(to top, #000 55%, transparent 100%), linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
        -webkit-mask-composite: source-in;
                mask-image: linear-gradient(to top, #000 55%, transparent 100%), linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
                mask-composite: intersect;
    }
}
/* Oscuro: la misma foto, en penumbra. Sin esto una escena a pleno sol
   encandila con el tema oscuro. */
.dark .lg-deco { filter: brightness(0.5) saturate(0.8); }
/* El cielo y el crema de la foto, aun en penumbra, quedan GRIS claro sobre el
   fondo oscuro (medido en las capturas: una columna gris en escritorio y una
   franja gris abajo). Arriba se oscurece el cielo con un velo del color de
   fondo; la capa de hojas de abajo, que es casi toda crema, no se muestra. */
.dark .lg-deco-top {
    background-image: linear-gradient(to bottom, rgba(15, 23, 19, 0.72) 0%, rgba(15, 23, 19, 0.45) 38%, rgba(15, 23, 19, 0) 62%), url('../img/login/fondo.webp');
    background-size: 100% 100%, 100% auto;
}
.dark .lg-deco-bottom { display: none; }

/* Columna: 440 px de tope para el login (max-w-sm de Tailwind son 384). El
   registro sigue usando max-w-md, que app.js pone y saca. */
.lg-col { position: relative; z-index: 1; padding: 0; }
.lg-col.max-w-sm { max-width: 440px; }

.lg-brand {
    height: var(--lg-brand-h);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: var(--lg-logo-top);
    box-sizing: border-box;
}
.lg-logo {
    height: var(--lg-logo-h);
    width: auto;
    aspect-ratio: 1 / 1;
    max-width: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

/* ── Tarjeta ─────────────────────────────────────────────────────────────── */
.lg-card {
    text-align: left;
    background: var(--lg-card);
    border: 1px solid var(--lg-sage-line);
    border-radius: 24px;
    box-shadow: 0 1px 2px rgba(20, 40, 20, 0.05), 0 14px 36px rgba(29, 70, 40, 0.12);
    padding: 24px 22px 22px;
}
.dark .lg-card { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 36px rgba(0, 0, 0, 0.45); }
.lg-title {
    margin: 0;
    font-size: clamp(1.375rem, 6.2vw, 1.75rem);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--lg-ink);
}
.lg-sub { margin: 6px 0 18px; font-size: 0.9375rem; color: var(--lg-muted); }
.lg-field + .lg-field { margin-top: 14px; }
.lg-label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--lg-ink);
}
.lg-control { position: relative; }
.lg-ico {
    position: absolute;
    left: 14px;
    top: 50%;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    color: var(--lg-muted);
    pointer-events: none;
}
.lg-input {
    display: block;
    width: 100%;
    height: 52px;
    box-sizing: border-box;
    padding: 0 14px 0 44px;
    font-size: 16px;                /* < 16 px y iOS hace zoom al enfocar */
    color: var(--lg-text);
    background: var(--lg-field);
    border: 1px solid var(--lg-sage-line);
    border-radius: 14px;
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}
.lg-input--pw { padding-right: 52px; }
.lg-input::placeholder { color: var(--lg-ph); opacity: 1; }
.lg-input:focus {
    outline: none;
    background: var(--lg-card);
    border-color: var(--lg-green);
    box-shadow: 0 0 0 3px var(--lg-ring);
}
.dark .lg-input:focus { border-color: #4ade80; }
.lg-input[aria-invalid="true"],
.dark .lg-input[aria-invalid="true"]:focus { border-color: var(--lg-danger); }   /* el rojo gana también al foco en oscuro */
.lg-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.22); }
.lg-eye {
    position: absolute;
    right: 4px;
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--lg-muted);
    cursor: pointer;
}
.lg-eye:hover { color: var(--lg-ink); }
.lg-eye:focus { outline: none; }
.lg-eye:focus-visible { outline: 2px solid var(--lg-green); outline-offset: -4px; }
.dark .lg-eye:focus-visible { outline-color: #4ade80; }
.lg-err {
    margin: 6px 2px 0;
    font-size: 0.8125rem;
    line-height: 1.35;
    font-weight: 500;
    color: var(--lg-danger);
}
.lg-err:empty { display: none; }

.lg-forgot-row { display: flex; justify-content: flex-end; margin-top: 2px; }
.lg-link {
    color: var(--lg-link);
    font-weight: 600;
    text-decoration: none;
    border-radius: 6px;
}
.lg-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.lg-link:focus { outline: none; }
.lg-link:focus-visible { outline: 2px solid var(--lg-green); outline-offset: 2px; }
.dark .lg-link:focus-visible { outline-color: #4ade80; }
.lg-forgot {
    min-height: 44px;               /* área táctil; el texto sigue viéndose chico */
    display: inline-flex;
    align-items: center;
    padding: 0 2px;
    border: 0;
    background: none;
    font-size: 0.875rem;
    cursor: pointer;
    text-align: right;
}

/* Error general: solo ocupa lugar cuando tiene texto. */
.lg-alert {
    margin: 2px 0 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    font-size: 0.875rem;
    line-height: 1.4;
}
.lg-alert:empty { display: none; }
.dark .lg-alert { background: rgba(127, 29, 29, 0.28); border-color: #7f1d1d; color: #fecaca; }

.lg-submit {
    width: 100%;
    min-height: 52px;
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 18px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(180deg, #237a45 0%, var(--lg-green) 100%);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(29, 106, 58, 0.28);
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
}
.lg-submit:hover { background: var(--lg-green-2); }
.lg-submit:active { transform: translateY(1px); }
.lg-submit:focus { outline: none; }
.lg-submit:focus-visible { box-shadow: 0 0 0 2px var(--lg-card), 0 0 0 5px #4ade80; }
.lg-submit:disabled { cursor: progress; opacity: 0.85; }
.dark .lg-submit { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); }
.lg-arrow { width: 18px; height: 18px; flex-shrink: 0; transition: transform 0.15s; }
.lg-submit:hover .lg-arrow { transform: translateX(2px); }
.lg-spinner {
    display: none;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: lg-spin 0.8s linear infinite;
}
.lg-submit[aria-busy="true"] .lg-spinner { display: inline-block; }
.lg-submit[aria-busy="true"] .lg-arrow { display: none; }
@keyframes lg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .lg-spinner { animation-duration: 1.8s; }
    .lg-input, .lg-submit, .lg-arrow { transition: none; }
}

.lg-foot {
    margin: 14px 0 0;
    text-align: center;
    font-size: 0.9375rem;
    color: var(--lg-muted);
}
.lg-foot > span { display: block; }
.lg-link-strong {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 10px;
    font-size: 1rem;
}

/* El registro comparte el contenedor: hereda la tarjeta para no quedar como
   un formulario suelto sobre la foto. Su contenido y sus estilos .su-* no se
   tocan. */
#authContainer.lg-auth #signupScreen {
    background: var(--lg-card);
    border: 1px solid var(--lg-sage-line);
    border-radius: 24px;
    box-shadow: 0 1px 2px rgba(20, 40, 20, 0.05), 0 14px 36px rgba(29, 70, 40, 0.12);
    padding: 22px 18px;
}
.dark #authContainer.lg-auth #signupScreen { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 36px rgba(0, 0, 0, 0.45); }
@media (max-width: 359px) {
    .lg-card { padding: 20px 16px 18px; }
    #authContainer.lg-auth #signupScreen { padding: 18px 14px; }
}


/* ══ RUTA APRENDIDA (v248) · banner "Ruta sugerida" ══════════════════════════════
   Vive en #route-content, ANTES de #jobList (no en #panel-compact: no altera panelSnapHeights).
   Tokens v143 + los de Ruta de hoy. Botones con área táctil ≥ 44 px. Lo pinta raPintarBanner(). */
#raBanner { margin-bottom: 0.75rem; }
.ra-banner {
    padding: 0.75rem 0.8rem 0.8rem; border-radius: 16px;
    background: color-mix(in srgb, var(--v143-accent) 7%, var(--v143-sheet));
    border: 1px solid color-mix(in srgb, var(--v143-accent) 38%, transparent);
    color: var(--v143-ink);
}
.ra-head { display: flex; align-items: center; gap: 0.6rem; }
.ra-ico {
    flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--v143-accent) 16%, var(--v143-sheet)); color: var(--rh-green);
}
.ra-ico svg { width: 18px; height: 18px; }
.ra-head__txt { min-width: 0; }
.ra-title { font-size: 1rem; font-weight: 800; line-height: 1.2; color: var(--v143-ink); letter-spacing: -0.01em; }
.ra-sub { font-size: 0.78rem; line-height: 1.3; color: var(--v143-ink-soft); }
.ra-why { margin-top: 0.5rem; font-size: 0.86rem; line-height: 1.35; color: var(--v143-ink); }
.ra-why strong { font-weight: 700; }
.ra-time { margin-top: 0.35rem; display: flex; align-items: flex-start; gap: 0.35rem; font-size: 0.8rem; line-height: 1.3; font-weight: 600; color: var(--rh-green); font-variant-numeric: tabular-nums; }
.ra-time svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }
.ra-time.is-slower { color: var(--rh-owes); }
.ra-toggle {
    width: 100%; min-height: 44px; margin-top: 0.25rem; padding: 0 0.1rem;
    display: flex; align-items: center; justify-content: space-between;
    background: none; border: 0; border-top: 1px solid var(--v143-line); cursor: pointer;
    font-size: 0.86rem; font-weight: 700; color: var(--v143-ink);
}
.ra-toggle svg { width: 18px; height: 18px; color: var(--v143-ink-soft); transition: transform 0.2s ease; }
.ra-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.ra-toggle:focus-visible, .ra-btn:focus-visible { outline: 2px solid var(--v143-accent); outline-offset: 2px; border-radius: 10px; }
.ra-list { list-style: none; margin: 0 0 0.2rem; padding: 0; }
.ra-stop { display: flex; align-items: center; gap: 0.5rem; min-height: 28px; font-size: 0.86rem; line-height: 1.25; }
.ra-n {
    flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.74rem; font-weight: 800; font-variant-numeric: tabular-nums;
    background: color-mix(in srgb, var(--v143-accent) 16%, var(--v143-sheet)); color: var(--rh-green);
}
.ra-n.is-done { background: transparent; border: 1.5px solid color-mix(in srgb, var(--rh-green-2) 55%, transparent); }
.ra-n svg { width: 13px; height: 13px; stroke-width: 3; }
.ra-nm { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.ra-stop.is-done .ra-nm { font-weight: 500; color: var(--v143-ink-soft); }
.ra-stop.is-moved .ra-nm { color: var(--rh-green); font-weight: 700; }
.ra-mov { flex: 0 0 auto; width: 14px; height: 14px; color: var(--rh-green); }
.ra-tag {
    flex: 0 0 auto; margin-left: auto; display: inline-flex; align-items: center; gap: 0.2rem;
    padding: 0.05rem 0.45rem; border-radius: 999px; font-size: 0.7rem; font-weight: 700; white-space: nowrap;
    background: var(--v143-track); color: var(--v143-ink-soft);
}
.ra-tag svg { width: 11px; height: 11px; }
.ra-note { margin: 0.15rem 0 0.1rem; font-size: 0.74rem; line-height: 1.3; color: var(--v143-ink-soft); }
.ra-acts { margin-top: 0.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.ra-btn {
    min-height: 44px; padding: 0.35rem 0.6rem; border-radius: 12px; cursor: pointer;
    font-size: 0.86rem; font-weight: 700; line-height: 1.15; text-align: center;
    -webkit-tap-highlight-color: transparent;
}
.ra-btn:active { transform: scale(0.98); }
.ra-btn--use { background: #15803d; color: #ffffff; border: 1px solid #15803d; }
.ra-btn--keep { background: var(--rh-card-bg); color: var(--v143-ink); border: 1px solid var(--v143-line); }
.dark .ra-btn--keep { border-color: rgba(255, 255, 255, 0.18); }
@media (max-width: 359px) {
    .ra-banner { padding: 0.65rem 0.6rem 0.7rem; }
    .ra-btn { font-size: 0.82rem; padding: 0.3rem 0.45rem; }
}


/* ══ v253 · CLIENTES CERCANOS Y GRUPO DE TRABAJOS (26 sep 2026) ═══════════════════════════════════════════
   Mismo sistema visual que "Finalizar trabajo" (v249): tarjeta blanca redondeada, encabezado verde salvia con
   hojas, botón principal verde fijo abajo. Tokens: --rhf-*, --v143-*. Todo cuelga de .cc-* / .gr-*. */
.cc-body { padding-top: 12px; }
.cc-lista, .gr-elegir { display: flex; flex-direction: column; gap: 10px; }
.cc-item {
    position: relative; width: 100%; min-height: 72px; padding: 8px 12px 8px 8px; border-radius: 16px;
    display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
    background: var(--v143-sheet, #fff); color: var(--v143-ink, #0f172a);
    border: 1.5px solid var(--v143-line, rgba(15, 23, 42, .14));
    transition: border-color .15s ease, background-color .15s ease;
}
.cc-item.is-sel { border-color: var(--rhf-green); background: var(--rhf-sage); }
.cc-item:focus-visible { outline: 3px solid color-mix(in srgb, var(--rhf-green) 45%, transparent); outline-offset: 2px; }
.cc-casa {
    position: relative; flex-shrink: 0; width: 56px; height: 56px; border-radius: 14px; overflow: visible;
    background: color-mix(in srgb, var(--rh-srv, #16a34a) 10%, var(--v143-sheet, #fff));
    display: flex; align-items: center; justify-content: center;
}
.cc-casa img { width: 52px; height: 52px; object-fit: contain; }
.cc-num {
    position: absolute; top: -6px; left: -6px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 9999px;
    display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 800; line-height: 1;
    background: var(--rhf-green); color: #fff; box-shadow: 0 0 0 2px var(--v143-sheet, #fff); font-variant-numeric: tabular-nums;
}
.cc-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cc-name { font-size: 1.05rem; font-weight: 800; line-height: 1.2; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.cc-addr { font-size: .88rem; color: var(--v143-ink-soft, #64748b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: .82rem; font-weight: 600; }
.cc-srv, .cc-dist { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.cc-srv { color: color-mix(in srgb, var(--rh-srv, #16a34a) 75%, #000); }
.dark .cc-srv { color: color-mix(in srgb, var(--rh-srv, #16a34a) 60%, #fff); }
.cc-dist { color: var(--v143-ink-soft, #64748b); font-variant-numeric: tabular-nums; }
.cc-srv svg, .cc-dist svg { width: 14px; height: 14px; flex-shrink: 0; }
.cc-check {
    flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
    border: 2px solid #cbd5e1; color: transparent; background: var(--v143-sheet, #fff);
}
.dark .cc-check { border-color: #475569; }
.cc-check svg { width: 18px; height: 18px; stroke-width: 3; }
.cc-item.is-sel .cc-check { background: var(--rhf-green); border-color: var(--rhf-green); color: #fff; }
.cc-count { min-height: 1.2em; margin-bottom: 4px; text-align: center; font-size: .86rem; font-weight: 600; color: var(--v143-ink-soft, #64748b); }

/* ── Tarjeta inferior en modo grupo (dentro de #geofence-arrival-overlay .gf-card) ── */
.gr-panel.hidden { display: none; }
.gr-panel { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gr-chip {
    display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 3px 10px 3px 4px; border-radius: 9999px;
    background: var(--v143-sheet, #fff); border: 1px solid rgba(34, 197, 94, .35); font-size: .85rem; font-weight: 600;
}
.gr-chip b { min-width: 20px; height: 20px; padding: 0 5px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; background: var(--rhf-green); color: #fff; font-size: .74rem; }
.gr-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.gr-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gr-titulo { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: .95rem; color: var(--rhf-green-ink); }
.gr-titulo svg { width: 17px; height: 17px; }
.gr-cuenta { font-size: .8rem; font-weight: 600; color: var(--v143-ink-soft, #64748b); white-space: nowrap; }
.gr-lista { display: flex; flex-direction: column; gap: 4px; max-height: 140px; overflow-y: auto; overscroll-behavior: contain; }
.gr-miembro {
    width: 100%; min-height: 44px; padding: 6px 8px; border-radius: 12px; display: flex; align-items: center; gap: 8px;
    text-align: left; cursor: pointer; background: var(--v143-sheet, #fff); color: var(--v143-ink, #0f172a);
    border: 1.5px solid var(--v143-line, rgba(15, 23, 42, .12));
}
.gr-miembro.is-foco { border-color: var(--rhf-green); box-shadow: inset 3px 0 0 var(--rhf-green); }
.gr-miembro:focus-visible { outline: 2px solid var(--rhf-green); outline-offset: 2px; }
.gr-num { flex-shrink: 0; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; background: var(--rhf-sage); color: var(--rhf-green-ink); font-size: .78rem; font-weight: 800; }
.gr-miembro.is-foco .gr-num { background: var(--rhf-green); color: #fff; }
.gr-nombre { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-estado { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 600; color: var(--v143-ink-soft, #64748b); white-space: nowrap; }
.gr-estado svg { width: 14px; height: 14px; }
.gr-miembro.is-hecha .gr-estado { color: var(--rhf-green); }
.dark .gr-miembro.is-hecha .gr-estado { color: #4ade80; }
.gr-terminar {
    min-height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
    background: var(--v143-sheet, #fff); color: var(--rhf-green); border: 1.5px solid color-mix(in srgb, var(--rhf-green) 55%, transparent);
    font-weight: 800; font-size: .95rem;
}
.dark .gr-terminar { color: #4ade80; }
.gr-terminar svg { width: 18px; height: 18px; }
.gr-terminar.is-hecha { color: var(--v143-ink-soft, #64748b); border-color: var(--v143-line, rgba(15, 23, 42, .14)); }
.gr-terminar:focus-visible { outline: 2px solid var(--rhf-green); outline-offset: 2px; }
/* Llegada del grupo: el swipe va en VERDE (llegada), no en coral. */
#geofence-arrival-overlay.gr-llegada.mt-card .swipe-container { background: #dcfce7; border-color: #86efac; }
.dark #geofence-arrival-overlay.gr-llegada.mt-card .swipe-container { background: rgba(34, 197, 94, .16); border-color: rgba(34, 197, 94, .4); }
#geofence-arrival-overlay.gr-llegada.mt-card .swipe-handle { background-color: #16a34a; box-shadow: 0 0 0 4px rgba(22, 163, 74, .16), 0 6px 16px rgba(21, 128, 61, .35); }
#geofence-arrival-overlay.gr-llegada.mt-card .mt-sw-chev { color: rgba(22, 163, 74, .55); }
.dark #geofence-arrival-overlay.gr-llegada.mt-card .swipe-text { color: #dcfce7; }
/* En la llegada del grupo los nombres van en las fichas numeradas (todas visibles): la línea de dirección sobra. */
#geofence-arrival-overlay.gr-llegada .gf-address { display: none; }
/* Pantallas bajas (320×640): la lista de miembros muestra ~2 filas y desplaza, para no comerse el mapa. */
@media (max-height: 700px) { .gr-lista { max-height: 98px; } }

/* ── Hoja del grupo: resumen y mensajes ── */
.gr-resumen { display: flex; flex-direction: column; gap: 10px; }
.gr-r { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border-radius: 16px; border: 1.5px solid var(--v143-line, rgba(15, 23, 42, .12)); }
.gr-r .cc-casa { width: 48px; height: 48px; }
.gr-r .cc-casa img { width: 44px; height: 44px; }
.gr-r-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gr-r-top { display: flex; align-items: baseline; gap: 8px; }
.gr-r-nombre { flex: 1 1 auto; min-width: 0; font-weight: 800; font-size: 1rem; overflow: hidden; overflow-wrap: anywhere; }
.gr-r-monto { flex-shrink: 0; font-weight: 800; color: var(--rhf-green); font-variant-numeric: tabular-nums; }
.dark .gr-r-monto { color: #4ade80; }
.gr-r-srv { font-size: .84rem; color: var(--v143-ink-soft, #64748b); }
.gr-r-t { font-size: .84rem; color: var(--v143-ink-soft, #64748b); font-variant-numeric: tabular-nums; }
.gr-sms-lista[hidden] { display: none; }
.gr-r-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.gr-tag { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 9px; border-radius: 9999px; font-size: .78rem; font-weight: 700; border: 1px solid transparent; }
.gr-tag--pago { background: var(--rhf-mamey); color: var(--rhf-orange-ink); border-color: color-mix(in srgb, var(--rhf-orange) 45%, transparent); }
.gr-tag--pend { background: color-mix(in srgb, var(--v143-ink, #0f172a) 6%, var(--v143-sheet, #fff)); color: var(--v143-ink, #0f172a); }
.gr-tag--aviso { background: var(--rhf-sage); color: var(--rhf-green-ink); }
.gr-tag--no { background: color-mix(in srgb, var(--v143-ink, #0f172a) 6%, var(--v143-sheet, #fff)); color: var(--v143-ink-soft, #64748b); }
.gr-tag--ok { background: var(--rhf-green); color: #fff; }
.gr-tag--err { background: #fee2e2; color: #991b1b; }
.dark .gr-tag--err { background: rgba(239, 68, 68, .18); color: #fecaca; }
.gr-nota { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--rhf-sage); font-size: .86rem; }
.gr-nota svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--rhf-green); margin-top: 1px; }
.gr-nota.hidden { display: none; }
.gr-nota--err { background: #fee2e2; color: #991b1b; margin: 0 0 10px; }
.gr-nota--err svg { color: #b91c1c; }
.dark .gr-nota--err { background: rgba(239, 68, 68, .16); color: #fecaca; }
.dark .gr-nota--err svg { color: #fca5a5; }
.gr-sms { display: flex; flex-direction: column; gap: 10px; }
.gr-sms-para { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.gr-sms-para svg { width: 22px; height: 22px; color: var(--rhf-green); }
.dark .gr-sms-para svg { color: #4ade80; }
.gr-sms-nombre { font-weight: 800; font-size: 1.1rem; }
.gr-sms-tel { font-size: .9rem; color: var(--v143-ink-soft, #64748b); font-variant-numeric: tabular-nums; }
.gr-sms-texto {
    padding: 10px 12px; border-radius: 14px; border: 1px solid var(--v143-line, rgba(15, 23, 42, .12));
    background: color-mix(in srgb, var(--v143-ink, #0f172a) 3%, var(--v143-sheet, #fff)); font-size: .95rem; line-height: 1.4;
    white-space: pre-wrap; overflow-wrap: anywhere;
}
.gr-sms-lista { display: flex; flex-direction: column; gap: 4px; font-size: .88rem; }
.gr-sms-lista li { display: flex; align-items: center; gap: 8px; color: var(--v143-ink-soft, #64748b); }
.gr-sms-lista li svg { width: 16px; height: 16px; flex-shrink: 0; }
.gr-sms-lista li.is-actual { color: var(--v143-ink, #0f172a); font-weight: 700; }
.gr-sms-lista li.is-hecho { color: var(--rhf-green); }
.dark .gr-sms-lista li.is-hecho { color: #4ade80; }
.gr-sms-omitir { align-self: flex-start; min-height: 44px; padding: 0 4px; background: none; border: 0; color: var(--v143-ink-soft, #64748b); font-weight: 700; font-size: .9rem; text-decoration: underline; cursor: pointer; }
@media (max-width: 359px) {
    .cc-item { gap: 10px; padding: 8px 10px 8px 8px; }
    .cc-casa { width: 48px; height: 48px; }
    .cc-casa img { width: 44px; height: 44px; }
    .cc-name { font-size: .98rem; }
    .gr-estado { font-size: .74rem; }
}

/* ══ 26 sep · Correcciones del grupo ═══════════════════════════════════════════════════════════════════════
   Placa de la casita = NÚMERO DE LA DIRECCIÓN (hasta 5 cifras + letra), centrada arriba, como la del mapa.
   El orden de la ruta va APARTE (.cc-orden), a la izquierda de la casita, como en "Ruta de hoy". */
.cc-orden {
    flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: .82rem; font-variant-numeric: tabular-nums;
    background: color-mix(in srgb, var(--v143-accent, #16a34a) 16%, var(--v143-sheet, #fff)); color: var(--rh-green, #15803d);
}
.dark .cc-orden { color: #86efac; }
.cc-item, .gr-r { column-gap: 10px; }
.cc-placa {
    position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
    max-width: calc(100% + 10px); padding: 1px 5px; border-radius: 9999px; white-space: nowrap;
    font-size: .74rem; font-weight: 800; line-height: 1.25; font-variant-numeric: tabular-nums; letter-spacing: -.01em;
    background: #FFF6DF; color: #1f2937; border: 1px solid rgba(31, 41, 55, .85); box-shadow: 0 1px 2px rgba(15, 23, 42, .25);
}
.cc-placa[data-len="4"] { font-size: .68rem; }
.cc-placa[data-len="5"], .cc-placa[data-len="6"] { font-size: .62rem; padding: 1px 4px; letter-spacing: -.02em; }
.gr-r .cc-placa { top: -6px; }

/* Acceso permanente "Mensajes pendientes · N" — flota sobre el borde superior del panel de Inicio (no cambia su alto). */
.sms-chip {
    position: absolute; left: 12px; bottom: calc(100% + 10px); z-index: 6;
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; max-width: calc(100% - 24px);
    padding: 0 16px 0 12px; border-radius: 9999px; border: 1.5px solid color-mix(in srgb, var(--rhf-green, #15803d) 55%, transparent);
    background: var(--v143-sheet, #fff); color: var(--v143-ink, #0f172a); font-weight: 800; font-size: .92rem;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .22); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sms-chip svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--rhf-green, #15803d); }
.dark .sms-chip svg { color: #4ade80; }
.sms-chip.hidden { display: none; }
.sms-chip:focus-visible { outline: 3px solid color-mix(in srgb, var(--rhf-green, #15803d) 45%, transparent); outline-offset: 2px; }

/* Mensajes pendientes: texto editable, contador y lista elegible. */
.gr-sms-edit { width: 100%; min-height: 120px; resize: vertical; font-size: .95rem; line-height: 1.4; }
.gr-sms-cuenta { margin-top: -4px; font-size: .78rem; color: var(--v143-ink-soft, #64748b); text-align: right; font-variant-numeric: tabular-nums; }
.gr-sms-item { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 0 4px; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 8px; }
.gr-sms-item:disabled { cursor: default; }
.gr-sms-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.gr-sms-estado { margin-left: auto; font-size: .78rem; font-weight: 700; }
.gr-sms--pregunta .gr-sms-texto { max-height: 40vh; overflow: auto; }
.lt-toast.hidden { display: none; }

/* ══ v256 · NÚMERO DE RUTA EN CUADRITO + CHECK DE ESTADO (27 sep 2026) ═══════════════════════════════════════
   Mismo lenguaje que el marcador del mapa: cuadrito crema, borde y número verde oscuro, sombra muy suave; crece
   con los dígitos (nunca corta). Terminado: círculo verde (pago pendiente o parcial) o naranja mamey (pagado)
   con ✓ blanco y borde crema. Mismos colores en claro y oscuro (como en el mapa). */
.rh-num, .rh-card--next .rh-num {
    width: auto; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 8px;
    background: #FFF6DF; color: #1F5A36; border: 1.5px solid #1F5A36;
    box-shadow: 0 1px 2px rgba(15, 32, 56, .14);
    font-size: .95rem; line-height: 1; white-space: nowrap;
}
@media (max-width: 359px) { .rh-num, .rh-card--next .rh-num { min-width: 26px; height: 26px; padding: 0 5px; font-size: .85rem; } }
.rh-check.rh-check--terminado, .rh-check.rh-check--pagado {
    width: 30px; height: 30px; color: #fff; border: 1.5px solid #FFF6DF;
    box-shadow: 0 1px 2px rgba(15, 32, 56, .18);
}
.rh-check.rh-check--terminado { background: #16A34A; }
.rh-check.rh-check--pagado { background: #E8820C; }
.rh-check.rh-check--terminado svg, .rh-check.rh-check--pagado svg { width: 16px; height: 16px; stroke-width: 3.2; }
.rh-owes--partial { color: #B45309; }
.dark .rh-owes--partial { color: #FBBF24; }

/* ══ v258 · IMPORTAR CLIENTES (27 sep 2026) ═════════════════════════════════════════════════════════════════
   Botón: texto verde + ícono de subir, sin borde/fondo/sombra; 13–14 px de texto e ícono de 16 px, con 44 px de área
   táctil. Pantalla: completa en móvil (hoja centrada en escritorio), pasos 1·2·3, cuerpo con scroll y acciones abajo
   siempre visibles (por encima de la barra de navegación y de las áreas seguras). */
.cl-title-row { align-items: center; justify-content: space-between; }
.cl-import-btn {
    position: relative; display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
    min-height: 44px; padding: 0 2px; background: none; border: 0; box-shadow: none; cursor: pointer;
    color: #15803d; font-size: .875rem; font-weight: 700;
}
.cl-import-btn svg { width: 16px; height: 16px; stroke-width: 2.4; }
.dark .cl-import-btn { color: #4ade80; }
.cl-import-btn.hidden { display: none; }
.cl-import-btn:focus-visible { outline: 3px solid color-mix(in srgb, #15803d 45%, transparent); outline-offset: 2px; border-radius: 8px; }

html.im-abierta, html.im-abierta body { overflow: hidden; }
.im-screen {
    position: fixed; inset: 0; z-index: 1200; display: flex; flex-direction: column;
    background: var(--v145-bg, #f6f7f5); color: var(--v145-ink, #0f172a);
    padding-top: env(safe-area-inset-top, 0px);
}
.dark .im-screen { background: #0b1220; color: #e5e7eb; }
.im-screen.hidden { display: none; }
@media (min-width: 768px) {
    .im-screen { background: rgba(15, 23, 42, .55); align-items: center; justify-content: center; padding: 24px; }
    .im-screen > * { width: min(760px, 100%); }
    .im-screen > .im-head { border-radius: 20px 20px 0 0; }
    .im-screen > .im-foot { border-radius: 0 0 20px 20px; }
    .im-screen > .im-head, .im-screen > .im-steps, .im-screen > .im-body, .im-screen > .im-foot { background: var(--v145-bg, #f6f7f5); }
    .dark .im-screen > .im-head, .dark .im-screen > .im-steps, .dark .im-screen > .im-body, .dark .im-screen > .im-foot { background: #0b1220; }
    .im-screen > .im-body { flex: 0 1 auto; max-height: calc(100vh - 260px); }
}
.im-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 6px; }
.im-back { width: 44px; height: 44px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; color: inherit; flex-shrink: 0; }
.im-back svg { width: 24px; height: 24px; }
.im-back:focus-visible { outline: 3px solid color-mix(in srgb, #15803d 45%, transparent); }
.im-head-t h2 { margin: 0; font-size: 1.35rem; font-weight: 800; line-height: 1.2; }
.im-head-t p { margin: 2px 0 0; font-size: .9rem; color: var(--v145-ink-soft, #64748b); }
.dark .im-head-t p { color: #94a3b8; }
.im-steps { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 6px 16px 12px; font-size: .85rem; font-weight: 700; color: var(--v145-ink-soft, #64748b); }
.im-steps li { display: inline-flex; align-items: center; gap: 6px; }
.im-step-n { width: 24px; height: 24px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; border: 1.5px solid currentColor; }
.im-steps li.is-now { color: #15803d; }
.im-steps li.is-now .im-step-n { background: #15803d; border-color: #15803d; color: #fff; }
.im-steps li.is-done { color: #15803d; }
.dark .im-steps li.is-now, .dark .im-steps li.is-done { color: #4ade80; }
.dark .im-steps li.is-now .im-step-n { background: #16a34a; border-color: #16a34a; color: #fff; }
.im-steps .im-step-sep { flex: 1 1 12px; max-width: 40px; height: 2px; background: currentColor; opacity: .25; border-radius: 2px; }
.im-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px 24px; -webkit-overflow-scrolling: touch; }
.im-foot { flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--v143-line, rgba(15, 23, 42, .1)); background: inherit; }
.im-foot.hidden { display: none; }

.im-ops { display: flex; flex-direction: column; gap: 10px; }
.im-op { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 14px; border-radius: 16px; text-align: left; cursor: pointer;
    background: var(--v145-card, #fff); border: 1px solid var(--v143-line, rgba(15, 23, 42, .12)); color: inherit; }
.dark .im-op { background: #111a2b; border-color: #243049; }
.im-op:hover { border-color: #15803d; }
.im-op:focus-visible { outline: 3px solid color-mix(in srgb, #15803d 45%, transparent); outline-offset: 2px; }
.im-op-ico { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: #ecfdf3; color: #15803d; }
.dark .im-op-ico { background: rgba(34, 197, 94, .14); color: #4ade80; }
.im-op-ico svg { width: 22px; height: 22px; }
.im-op-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.im-op-t b { font-size: 1rem; }
.im-op-t small { font-size: .82rem; color: var(--v145-ink-soft, #64748b); }
.dark .im-op-t small { color: #94a3b8; }
.im-op-chev { width: 18px; height: 18px; color: var(--v145-ink-soft, #94a3b8); flex-shrink: 0; }
.im-note { display: flex; gap: 8px; align-items: flex-start; margin: 14px 2px 0; font-size: .84rem; line-height: 1.4; }
.im-note svg { width: 18px; height: 18px; flex-shrink: 0; color: #15803d; margin-top: 1px; }
.dark .im-note svg { color: #4ade80; }
.im-note--soft { color: var(--v145-ink-soft, #64748b); margin-top: 8px; }
.dark .im-note--soft { color: #94a3b8; }
.im-note--warn { background: #fdf5e6; color: #7a4a06; padding: 10px 12px; border-radius: 12px; margin: 0 0 10px; }
.dark .im-note--warn { background: #2e2412; color: #f8ecd5; }
.im-error { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: #fdeeee; color: #7f1d1d; font-size: .9rem; }
.dark .im-error { background: #33181a; color: #fbe3e4; }
.im-error svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.im-paste { width: 100%; min-height: 220px; padding: 12px; border-radius: 14px; font-size: .95rem; line-height: 1.45; resize: vertical;
    background: var(--v145-card, #fff); color: inherit; border: 1px solid var(--v143-line, rgba(15, 23, 42, .15)); }
.dark .im-paste { background: #111a2b; border-color: #243049; }
.im-loading { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 48px 12px; text-align: center; font-weight: 600; }
.im-dots { width: 44px; height: 44px; border-radius: 9999px; border: 4px solid color-mix(in srgb, #15803d 20%, transparent); border-top-color: #15803d; animation: im-giro 1s linear infinite; }
@keyframes im-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .im-dots { animation: none; } }
.im-bar { width: min(320px, 100%); height: 8px; border-radius: 9999px; background: color-mix(in srgb, #15803d 15%, transparent); overflow: hidden; }
.im-bar span { display: block; height: 100%; background: #16a34a; border-radius: inherit; transition: width .2s ease; }

.im-card { margin: 0 0 12px; padding: 10px 12px; border-radius: 14px; background: var(--v145-card, #fff); border: 1px solid var(--v143-line, rgba(15, 23, 42, .12)); }
.dark .im-card { background: #111a2b; border-color: #243049; }
.im-card > summary { display: flex; align-items: center; gap: 8px; min-height: 36px; font-weight: 700; cursor: pointer; list-style: none; }
.im-card > summary::-webkit-details-marker { display: none; }
.im-card > summary svg { width: 18px; height: 18px; color: #15803d; }
.im-map-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--v143-line, rgba(15, 23, 42, .08)); }
.im-map-src { min-width: 0; display: flex; flex-direction: column; }
.im-map-src b { font-size: .9rem; overflow-wrap: anywhere; }
.im-map-src small { font-size: .78rem; color: var(--v145-ink-soft, #64748b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46vw; }
.im-warn-t { color: #a0600a !important; white-space: normal !important; }
.im-map-row select, .im-field select, .im-field input { min-height: 44px; border-radius: 10px; padding: 0 10px; font-size: .95rem; background: var(--v145-bg, #f6f7f5); color: inherit; border: 1px solid var(--v143-line, rgba(15, 23, 42, .15)); max-width: 100%; }
.dark .im-map-row select, .dark .im-field select, .dark .im-field input { background: #0b1220; border-color: #334155; }
.im-map-row select { flex: 0 0 46%; }
.im-check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: .9rem; }
.im-check input, .im-row-check input { width: 22px; height: 22px; accent-color: #16a34a; }

.im-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 12px; }
.im-sum--3 { grid-template-columns: repeat(3, 1fr); }
.im-sum span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: 12px; font-size: .74rem; font-weight: 700; text-align: center;
    background: var(--v145-card, #fff); border: 1px solid var(--v143-line, rgba(15, 23, 42, .1)); color: var(--v145-ink-soft, #64748b); }
.dark .im-sum span { background: #111a2b; border-color: #243049; color: #94a3b8; }
.im-sum b { font-size: 1.3rem; color: var(--v145-ink, #0f172a); }
.dark .im-sum b { color: #f1f5f9; }
.im-sum .is-ok b { color: #15803d; } .dark .im-sum .is-ok b { color: #4ade80; }
.im-sum .is-fix b { color: #b45309; } .dark .im-sum .is-fix b { color: #fbbf24; }
.im-sum .is-dup b { color: #7c3aed; } .dark .im-sum .is-dup b { color: #c4b5fd; }
.im-bulk { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; padding-top: 8px; }
.im-sel-tools { display: flex; gap: 16px; margin: 0 2px 8px; }
.im-link { background: none; border: 0; padding: 0; min-height: 36px; color: #15803d; font-weight: 700; font-size: .88rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.dark .im-link { color: #4ade80; }
.im-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.im-row { padding: 12px; border-radius: 16px; background: var(--v145-card, #fff); border: 1.5px solid var(--v143-line, rgba(15, 23, 42, .12)); }
.dark .im-row { background: #111a2b; border-color: #243049; }
.im-row.is-fix { border-color: color-mix(in srgb, #d97706 55%, transparent); }
.im-row.is-dup { border-color: color-mix(in srgb, #7c3aed 50%, transparent); }
.im-row-head { display: flex; gap: 10px; align-items: flex-start; }
.im-row-check { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: -8px 0 -8px -8px; }
.im-row-main { flex: 1 1 auto; min-width: 0; }
.im-row-name { margin: 0; font-weight: 800; font-size: 1rem; overflow-wrap: anywhere; }
.im-row-sub { margin: 2px 0 0; font-size: .86rem; color: var(--v145-ink-soft, #64748b); overflow-wrap: anywhere; }
.dark .im-row-sub { color: #94a3b8; }
.im-row-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 0; }
.im-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 9999px; font-size: .74rem; font-weight: 800; }
.im-badge--ok { background: #ecfdf3; color: #166534; } .dark .im-badge--ok { background: rgba(34, 197, 94, .16); color: #86efac; }
.im-badge--fix { background: #fef3c7; color: #92400e; } .dark .im-badge--fix { background: rgba(251, 191, 36, .16); color: #fcd34d; }
.im-badge--dup { background: #f3e8ff; color: #6b21a8; } .dark .im-badge--dup { background: rgba(167, 139, 250, .18); color: #d8b4fe; }
.im-origin { font-size: .74rem; color: var(--v145-ink-soft, #64748b); }
.im-issues { margin: 8px 0 0; padding: 0 0 0 18px; font-size: .84rem; line-height: 1.4; color: #92400e; }
.dark .im-issues { color: #fcd34d; }
.im-issues li.is-err { color: #b91c1c; font-weight: 700; }
.dark .im-issues li.is-err { color: #fca5a5; }
.im-geo { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; font-size: .82rem; color: var(--v145-ink-soft, #64748b); overflow-wrap: anywhere; }
.im-geo { flex-wrap: nowrap; align-items: flex-start; }
.im-geo svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.im-geo > span { flex: 1 1 auto; min-width: 0; }
.im-geo.is-ok { color: #166534; } .dark .im-geo.is-ok { color: #86efac; }
.im-geo.is-no { color: #b91c1c; } .dark .im-geo.is-no { color: #fca5a5; }
.im-edit { margin-top: 8px; }
.im-edit > summary { min-height: 36px; display: inline-flex; align-items: center; font-weight: 700; font-size: .88rem; color: #15803d; cursor: pointer; }
.dark .im-edit > summary { color: #4ade80; }
.im-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; margin-top: 6px; }
.im-field { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; font-weight: 700; color: var(--v145-ink-soft, #64748b); min-width: 0; }
.dark .im-field { color: #94a3b8; }
.im-field input, .im-field select { width: 100%; color: var(--v145-ink, #0f172a); font-weight: 500; }
.dark .im-field input, .dark .im-field select { color: #f1f5f9; }
.im-field--wide, .im-grid > .im-field:nth-child(4) { grid-column: 1 / -1; }
@media (max-width: 359px) { .im-grid { grid-template-columns: 1fr; } .im-sum { grid-template-columns: repeat(2, 1fr); } }
.im-src { margin: 8px 0 0; font-size: .78rem; color: var(--v145-ink-soft, #64748b); overflow-wrap: anywhere; }
.im-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; border-radius: 14px; border: 0; cursor: pointer;
    background: #16a34a; color: #fff; font-weight: 800; font-size: 1.02rem; }
.im-btn:disabled { background: #9ca3af; cursor: not-allowed; }
.dark .im-btn:disabled { background: #334155; color: #94a3b8; }
.im-btn svg, .im-btn-sec svg { width: 20px; height: 20px; }
.im-btn-sec { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 12px; cursor: pointer; font-weight: 700;
    background: none; color: #15803d; border: 1.5px solid #15803d; }
.dark .im-btn-sec { color: #4ade80; border-color: #4ade80; }
.im-btn-full { width: 100%; margin-top: 12px; }
.im-btn-ghost { min-height: 44px; background: none; border: 0; color: var(--v145-ink-soft, #475569); font-weight: 700; cursor: pointer; }
.dark .im-btn-ghost { color: #cbd5e1; }
.im-plan { margin: 0; font-size: .84rem; text-align: center; color: var(--v145-ink-soft, #64748b); }
.im-plan.is-over { color: #b91c1c; font-weight: 700; }
.dark .im-plan.is-over { color: #fca5a5; }
.im-result { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 8px 14px; text-align: center; }
.im-result svg { width: 48px; height: 48px; }
.im-result.is-ok svg { color: #16a34a; } .im-result.is-partial svg { color: #d97706; }
.im-result h3 { margin: 0; font-size: 1.2rem; font-weight: 800; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   v260 · TIEMPOS (js/tiempos.js) — una pantalla, pestañas Clientes / Equipo. Todo con prefijo .ti-.
   Verde salvia, fondo crema, tarjetas compactas con borde suave. Claro y .dark. Sin imagen como
   interfaz: las casitas son las reales (.rh-casa), los iconos son SVG inline.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
.ti-root {
    --ti-bg: #f6f4ec; --ti-card: #ffffff; --ti-line: rgba(31, 81, 53, 0.12); --ti-ink: #1c2b22; --ti-soft: #5b6b61;
    --ti-green: #166534; --ti-green-2: #1f7a44; --ti-sage: #dfeadb; --ti-sage-ink: #1f5135; --ti-pill: #e2f0dd;
    --ti-warn-bg: #fff4dc; --ti-warn-line: #f3d18c; --ti-warn-ink: #8a4b06; --ti-neutral: #eef1f4; --ti-neutral-ink: #475569;
    --ti-skel: #e7e4da;
    position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden;
    background: var(--ti-bg); color: var(--ti-ink);
}
.dark .ti-root {
    --ti-bg: #0f1713; --ti-card: #17221c; --ti-line: rgba(134, 239, 172, 0.14); --ti-ink: #e8f1ea; --ti-soft: #a3b3a8;
    --ti-green: #86efac; --ti-green-2: #4ade80; --ti-sage: #1f3a2a; --ti-sage-ink: #bbf7d0; --ti-pill: #1d3b29;
    --ti-warn-bg: #3a2a0c; --ti-warn-line: #7c5412; --ti-warn-ink: #fcd34d; --ti-neutral: #1e2833; --ti-neutral-ink: #cbd5e1;
    --ti-skel: #22302a;
}
.ti-ico { width: 20px; height: 20px; flex-shrink: 0; }
.ti-ico--sm { width: 16px; height: 16px; }
.ti-ico--xs { width: 14px; height: 14px; }
.ti-deco { position: absolute; pointer-events: none; color: var(--ti-green); opacity: .06; z-index: 0; }
.ti-deco .ti-ico { width: 100%; height: 100%; }
.ti-deco--a { width: 140px; height: 140px; right: -34px; top: 90px; transform: rotate(-25deg); }
.ti-deco--b { width: 110px; height: 110px; left: -30px; bottom: 70px; transform: rotate(140deg); }
.dark .ti-deco { opacity: .05; }

/* Cabecera: pestañas + título + período */
.ti-top { position: relative; z-index: 2; flex-shrink: 0; background: var(--ti-bg); border-bottom: 1px solid var(--ti-line); }
.ti-top-in { max-width: 720px; margin: 0 auto; padding: 10px 12px 8px; display: flex; flex-direction: column; gap: 8px; }
.ti-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: color-mix(in srgb, var(--ti-sage) 55%, var(--ti-card)); }
.ti-tab { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 0; border-radius: 11px;
    background: transparent; color: var(--ti-soft); font-weight: 700; font-size: .98rem; cursor: pointer; }
.ti-tab.is-on { background: var(--ti-sage); color: var(--ti-sage-ink); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.dark .ti-tab { color: #b6c3ba; }
.ti-tab:focus-visible, .ti-period:focus-visible, .ti-card:focus-visible, .ti-wmain:focus-visible, .ti-day-btn:focus-visible,
.ti-btn:focus-visible, .ti-alert:focus-visible, .ti-iconbtn:focus-visible, .ti-info:focus-visible, .ti-option:focus-visible {
    outline: 3px solid var(--ti-green-2); outline-offset: 2px; }
.ti-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }
.ti-bar-title { display: flex; align-items: center; gap: 4px; min-width: 0; flex: 1 1 auto; }
.ti-h { margin: 0; font-size: 1.12rem; font-weight: 800; line-height: 1.2; color: var(--ti-ink); overflow-wrap: anywhere; }
.ti-h--name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Detalle: el nombre manda. Si no cabe junto al período, el período baja a su propia línea (a la derecha). */
.ti-root[data-ti-vista="detalle"] .ti-bar { flex-wrap: wrap; row-gap: 4px; }
.ti-root[data-ti-vista="detalle"] .ti-bar-title { flex: 1 1 190px; }
.ti-root[data-ti-vista="detalle"] .ti-period { margin-left: auto; max-width: 100%; }
.ti-period { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; min-height: 40px; padding: 0 12px; border-radius: 999px;
    border: 1px solid var(--ti-line); background: var(--ti-card); color: var(--ti-ink); font-weight: 700; font-size: .88rem; cursor: pointer; max-width: 58%; }
.ti-period-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ti-period .ti-ico:first-child { color: var(--ti-green); width: 18px; height: 18px; }
.ti-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; border: 0; border-radius: 50%;
    background: transparent; color: var(--ti-ink); cursor: pointer; }
.ti-iconbtn:hover { background: var(--ti-line); }

/* Cuerpo con scroll (reserva la barra inferior fija) */
.ti-scroll { position: relative; z-index: 1; flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ti-in { max-width: 720px; margin: 0 auto; padding: 12px 12px 104px; display: flex; flex-direction: column; gap: 10px; }
.ti-list { display: flex; flex-direction: column; gap: 10px; }
.ti-card { position: relative; background: var(--ti-card); border: 1px solid var(--ti-line); border-radius: 16px; color: var(--ti-ink); }
.ti-name { font-weight: 800; font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere; }
.ti-addr, .ti-meta { font-size: .82rem; color: var(--ti-soft); line-height: 1.3; overflow-wrap: anywhere; }
.ti-meta { display: inline-flex; align-items: center; gap: 4px; }
.ti-chev { color: var(--ti-soft); width: 18px; height: 18px; }
.ti-count { margin: 0; font-size: .82rem; color: var(--ti-soft); }

/* Controles de la pestaña Clientes */
.ti-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.ti-search { flex: 1 1 200px; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 12px;
    background: var(--ti-card); border: 1px solid var(--ti-line); color: var(--ti-soft); }
.ti-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ti-ink); font-size: 1rem; }
.ti-search:focus-within { border-color: var(--ti-green-2); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ti-green-2) 30%, transparent); }
.ti-sort { flex: 0 1 auto; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border-radius: 12px;
    background: var(--ti-card); border: 1px solid var(--ti-line); color: var(--ti-soft); }
.ti-sort select { border: 0; background: transparent; color: var(--ti-ink); font-weight: 700; font-size: .9rem; min-height: 40px; max-width: 12rem; }
.dark .ti-sort select option { background: #17221c; }

/* Tarjeta de cliente */
.ti-ccard { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "casa main side chev";
    align-items: center; gap: 10px; width: 100%; padding: 10px; text-align: left; cursor: pointer; font: inherit; }
.ti-ccard:hover { border-color: color-mix(in srgb, var(--ti-green-2) 45%, transparent); }
.ti-ccard.has-warn { background: color-mix(in srgb, var(--ti-warn-bg) 55%, var(--ti-card)); }
.ti-ccard > .ti-casa { grid-area: casa; }
.ti-cmain { grid-area: main; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ti-cside { grid-area: side; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ti-ccard > .ti-chev { grid-area: chev; }
.ti-casa.rh-casa { width: 56px; height: 56px; border-radius: 12px; }
.ti-tl .ti-casa.rh-casa { width: 40px; height: 40px; }
.ti-pill-label { font-size: .7rem; color: var(--ti-soft); white-space: nowrap; }
.ti-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 2px 12px; border-radius: 999px;
    background: var(--ti-pill); color: var(--ti-green); font-weight: 800; font-size: .95rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ti-pill.is-empty { background: var(--ti-neutral); color: var(--ti-soft); }
.ti-pill.is-muted { background: var(--ti-neutral); color: var(--ti-neutral-ink); font-weight: 700; font-size: .8rem; }
.ti-pill.is-warn { background: var(--ti-warn-bg); color: var(--ti-warn-ink); border: 1px solid var(--ti-warn-line); font-weight: 700; font-size: .8rem; white-space: normal; text-align: center; }
.ti-warn { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: .8rem; font-weight: 700; color: var(--ti-warn-ink); }
@media (max-width: 400px) {
    .ti-ccard > .ti-casa.rh-casa { width: 48px; height: 48px; }
    .ti-ccard { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "casa main chev" "casa side chev"; row-gap: 6px; }
    .ti-cside { flex-direction: row; justify-content: flex-start; flex-wrap: wrap; }
}

/* Avisos compactos (revisar / sin cerrar) */
.ti-alert { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 12px; cursor: pointer; text-align: left;
    background: var(--ti-warn-bg); border: 1px solid var(--ti-warn-line); color: var(--ti-warn-ink); font: inherit; font-weight: 700; font-size: .88rem; }
.ti-alert-t { flex: 1 1 auto; min-width: 0; }
.ti-alert-go { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; }
.ti-wcard .ti-alert { width: auto; margin: 0 12px 12px; }
/* Tarjeta angosta (teléfono, o dos columnas en Fold/escritorio): las tres cifras en filas, etiqueta a la izquierda y
   valor a la derecha. En tres columnas de ~90 px "16 h 31 min" se partía en dos líneas y las cifras no alineaban. */
.ti-wcard { container-type: inline-size; }
@container (max-width: 420px) {
    .ti-wcard .ti-metrics { grid-template-columns: 1fr; gap: 4px; padding: 4px 12px 12px 64px; }
    .ti-wcard .ti-metric { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 8px; }
    .ti-wcard .ti-metric-l { font-size: .82rem; }
    .ti-wcard .ti-metric-v { font-size: 1rem; text-align: right; white-space: nowrap; }
}
@container (max-width: 300px) { .ti-wcard .ti-metrics { padding-left: 12px; } }

/* Tarjeta de trabajador */
.ti-list--team { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .ti-list--team { grid-template-columns: 1fr 1fr; align-items: start; } }
.ti-wmain { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 12px 12px 6px; border: 0; background: transparent;
    color: inherit; text-align: left; cursor: pointer; font: inherit; border-radius: 16px 16px 0 0; }
.ti-avatar { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%;
    background: var(--ti-green-2); color: #fff; font-weight: 800; font-size: .95rem; }
.dark .ti-avatar { background: #1f7a44; color: #f0fdf4; }
.ti-avatar.is-gone { background: var(--ti-neutral); color: var(--ti-neutral-ink); }
.ti-wname { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ti-tag { display: inline-block; align-self: flex-start; padding: 1px 8px; border-radius: 999px; font-size: .72rem; font-weight: 700;
    background: var(--ti-neutral); color: var(--ti-neutral-ink); }
.ti-tag--block { margin: 0; }
.ti-empty-line { margin: 0; padding: 4px 12px 14px 64px; font-size: .88rem; color: var(--ti-soft); }
.ti-recs + .ti-empty-line, .ti-sheet-body > .ti-empty-line { padding: 8px 0; }
.ti-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 6px 12px 12px; }
.ti-metrics--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; }
@media (min-width: 560px) { .ti-metrics--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ti-metric { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ti-metric-l { display: inline-flex; align-items: center; gap: 2px; font-size: .74rem; color: var(--ti-soft); line-height: 1.2; }
.ti-metric-v { font-size: 1.06rem; font-weight: 800; line-height: 1.2; color: var(--ti-ink); font-variant-numeric: tabular-nums; }
.ti-metric.is-green .ti-metric-v { color: var(--ti-green); }
.ti-metric.is-neutral .ti-metric-v { color: var(--ti-neutral-ink); }
.ti-dsum .ti-metric { padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--ti-sage) 45%, transparent); }
.ti-dsum .ti-metric.is-neutral { background: var(--ti-neutral); }
.ti-info { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: -6px -4px -6px 0; border: 0; border-radius: 50%;
    background: transparent; color: var(--ti-soft); cursor: pointer; }
@media (max-width: 360px) { .ti-metric-v { font-size: .96rem; } .ti-empty-line { padding-left: 12px; } }

/* Detalle: días plegables */
.ti-subh { margin: 6px 0 0; font-size: .95rem; font-weight: 800; color: var(--ti-ink); }
.ti-days { display: flex; flex-direction: column; gap: 8px; }
.ti-day { background: var(--ti-card); border: 1px solid var(--ti-line); border-radius: 14px; }
.ti-day-btn { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 56px; padding: 10px 12px; border: 0; background: transparent;
    color: inherit; text-align: left; cursor: pointer; font: inherit; border-radius: 14px; }
.ti-day-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ti-day-date { font-weight: 800; font-size: .95rem; }
.ti-day-tot { font-size: .8rem; color: var(--ti-soft); }
.ti-day-chev { transition: transform .2s ease; }
.ti-day.is-open .ti-day-chev { transform: rotate(180deg); }
.ti-badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; background: var(--ti-warn-bg); color: var(--ti-warn-ink);
    border: 1px solid var(--ti-warn-line); font-size: .78rem; font-weight: 800; flex-shrink: 0; }
.ti-day-body { padding: 0 12px 12px; border-top: 1px solid var(--ti-line); }
.ti-day-period { margin: 8px 0; font-size: .85rem; color: var(--ti-soft); }
.ti-day-body .ti-alert { margin-bottom: 8px; }

/* Línea de tiempo del día */
.ti-tl { list-style: none; margin: 10px 0 0; padding: 0; position: relative; }
.ti-tl::before { content: ''; position: absolute; left: 13px; top: 14px; bottom: 14px; border-left: 2px dashed var(--ti-line); }
.ti-tl-item { position: relative; display: grid; grid-template-columns: 28px auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 0; }
.ti-tl-item.is-gap { grid-template-columns: 28px minmax(0, 1fr); }
.ti-tl-dot { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; }
.ti-tl-dot .ti-ico { width: 16px; height: 16px; }
.ti-tl-dot.is-home { background: var(--ti-green-2); color: #fff; }
.dark .ti-tl-dot.is-home { background: #1f7a44; color: #f0fdf4; }
.ti-tl-dot.is-clock { background: var(--ti-neutral); color: var(--ti-neutral-ink); border: 1px solid var(--ti-line); }
.ti-tl-item.is-alert .ti-tl-dot.is-home { background: #d97706; }
.ti-tl-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ti-tl-times { font-size: .8rem; color: var(--ti-soft); font-variant-numeric: tabular-nums; }
.ti-tl-note { font-size: .76rem; color: var(--ti-soft); line-height: 1.3; }
.ti-tl-gap { font-size: .85rem; color: var(--ti-neutral-ink); padding: 6px 10px; border-radius: 10px; background: var(--ti-neutral); justify-self: start; }
@media (max-width: 380px) {
    .ti-tl-item.is-visit { grid-template-columns: 28px auto minmax(0, 1fr); }
    .ti-tl-item.is-visit > .ti-pill { grid-column: 3; justify-self: start; }
}

/* Notas, pie, estados */
.ti-note { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: .82rem; color: var(--ti-soft); line-height: 1.35; }
.ti-note--small { font-size: .76rem; margin-top: 8px; }
.ti-foot { margin: 6px 0 0; font-size: .76rem; color: var(--ti-soft); text-align: center; }
.ti-state { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 12px; text-align: center; color: var(--ti-soft); }
.ti-state .ti-ico { width: 36px; height: 36px; color: var(--ti-green); opacity: .8; }
.ti-state p { margin: 0; font-size: .95rem; }
.ti-state--error .ti-ico { color: #b91c1c; }
.dark .ti-state--error .ti-ico { color: #fca5a5; }
.ti-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 12px; border: 0;
    background: var(--ti-green-2); color: #fff; font-weight: 800; font-size: .95rem; cursor: pointer; }
.dark .ti-btn { background: #1f7a44; }
.ti-btn--ghost { background: transparent; color: var(--ti-green); border: 1.5px solid currentColor; }
.dark .ti-btn--ghost { background: transparent; color: var(--ti-green); }
.ti-more { align-self: center; }
.ti-skel { display: flex; flex-direction: column; gap: 8px; padding: 14px; min-height: 86px; }
.ti-skel span { display: block; height: 12px; border-radius: 6px; background: var(--ti-skel); animation: ti-pulso 1.2s ease-in-out infinite; }
.ti-skel-a { width: 55%; } .ti-skel-b { width: 80%; } .ti-skel-c { width: 35%; }
@keyframes ti-pulso { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .ti-skel span { animation: none; } .ti-day-chev { transition: none; } }

/* Hojas inferiores */
.ti-sheet-wrap { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: flex-end; justify-content: center; }
.ti-sheet-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.ti-sheet { position: relative; width: 100%; max-width: 560px; max-height: 86vh; max-height: 86dvh; display: flex; flex-direction: column;
    background: var(--ti-card); color: var(--ti-ink); border-radius: 20px 20px 0 0; box-shadow: 0 -10px 30px rgba(0,0,0,.2);
    padding-bottom: env(safe-area-inset-bottom, 0); transform: translateY(12px); transition: transform .18s ease; }
.ti-sheet-wrap.is-open .ti-sheet { transform: none; }
@media (min-width: 640px) { .ti-sheet-wrap { align-items: center; } .ti-sheet { border-radius: 20px; } }
.ti-sheet-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--ti-line); margin: 8px auto 0; }
.ti-sheet-head { display: flex; align-items: flex-start; gap: 8px; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--ti-line); }
.ti-sheet-titles { flex: 1 1 auto; min-width: 0; padding-top: 8px; }
.ti-sheet-title { margin: 0; font-size: 1.05rem; font-weight: 800; overflow-wrap: anywhere; }
.ti-sheet-sub { margin: 2px 0 0; font-size: .82rem; color: var(--ti-soft); overflow-wrap: anywhere; }
.ti-sheet-body { overflow-y: auto; padding: 12px 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.ti-options { display: flex; flex-direction: column; gap: 6px; }
.ti-option { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 14px; border-radius: 12px; cursor: pointer;
    border: 1px solid var(--ti-line); background: transparent; color: var(--ti-ink); font: inherit; font-weight: 700; }
.ti-option.is-on { background: var(--ti-sage); color: var(--ti-sage-ink); border-color: transparent; }
.ti-custom { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 4px; }
.ti-custom .ti-btn, .ti-custom .ti-field-err { grid-column: 1 / -1; }
.ti-field { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; font-weight: 700; color: var(--ti-soft); min-width: 0; }
.ti-field input { min-height: 44px; padding: 0 8px; border-radius: 10px; border: 1px solid var(--ti-line); background: var(--ti-bg); color: var(--ti-ink); font-size: 1rem; width: 100%; }
.dark .ti-field input { color-scheme: dark; }
.ti-field-err { margin: 0; font-size: .82rem; font-weight: 700; color: #b91c1c; }
.dark .ti-field-err { color: #fca5a5; }
@media (max-width: 340px) { .ti-custom { grid-template-columns: 1fr; } }
.ti-recs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ti-rec { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--ti-line); background: var(--ti-bg); }
.ti-rec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ti-rec-meta { margin: 3px 0 0; font-size: .8rem; color: var(--ti-soft); overflow-wrap: anywhere; }
.ti-rec-why { margin: 6px 0 0; padding-left: 18px; font-size: .82rem; line-height: 1.35; color: var(--ti-warn-ink); }
.ti-hsum { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: .88rem; color: var(--ti-soft); }
.ti-def { margin: 0; font-size: .92rem; line-height: 1.45; color: var(--ti-ink); }
.ti-root .hidden { display: none !important; }   /* no depender del orden de Tailwind CDN */

/* v261 · Mi Suscripción: esqueleto COMPACTO mientras llega el primer dato del servidor.
   Las tarjetas se ven desde el primer cuadro; solo el importe pulsa (nunca "$0" ni "—" a secas). */
#sub-plan-grid.sub-grid--pending [data-plan-price] {
    display: inline-block; min-width: 4.5rem; height: 2.25rem; vertical-align: middle;
    border-radius: .5rem; color: transparent; background: var(--v143-line, rgba(15, 23, 42, .10));
    animation: lt-sub-pulse 1.2s ease-in-out infinite;
}
/* La comisión por plan es DINERO: sin dato del servidor no se muestra la de respaldo local. */
#sub-plan-grid.sub-grid--pending [data-plan-fee] {
    color: transparent; border-radius: .375rem; background: var(--v143-line, rgba(15, 23, 42, .10));
    animation: lt-sub-pulse 1.2s ease-in-out infinite;
}
.dark #sub-plan-grid.sub-grid--pending [data-plan-fee] { background: rgba(255, 255, 255, .12); }
#sub-plan-grid.sub-grid--pending [data-plan-period],
#sub-plan-grid.sub-grid--pending [data-plan-note] { visibility: hidden; }
.dark #sub-plan-grid.sub-grid--pending [data-plan-price] { background: rgba(255, 255, 255, .12); }
@keyframes lt-sub-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #sub-plan-grid.sub-grid--pending [data-plan-price], #sub-plan-grid.sub-grid--pending [data-plan-fee] { animation: none; } }


/* ══ v264 · REGISTRAR PAGO (pgm-*) y TARJETA DE LA CASITA EN EL MAPA (ltcc-*) — 28 sep 2026 ═══════════════════════
   Mismo lenguaje que "Finalizar trabajo" (rhf-*, que el modal de pago reutiliza para la estructura: tarjeta, cuerpo con
   scroll, pie fijo, interruptor) pero en CREMA con verde oscuro, como la referencia. Tokens propios --ltv-* tomados de
   los que ya existen (crema/verde del acceso --lg-*, ámbar suave del método de pago de rhf). Solo presentación. */
:root {
    --ltv-cream: #fcfaf1; --ltv-cream-2: #f4f1e4; --ltv-line: #e2ddcb; --ltv-field: #ffffff;
    --ltv-green: #1d6a3a; --ltv-green-2: #16512c; --ltv-ink: #14532d; --ltv-text: #292524; --ltv-soft: #5f5854;
    --ltv-sage: #e7f1e4; --ltv-ring: rgba(29, 106, 58, 0.24);
    --ltv-amber-bg: #fff3dc; --ltv-amber: #d98a14; --ltv-amber-ink: #7c4a03;
    --ltv-pick-bg: #e8f3ea; --ltv-pick-ink: #14532d;
    --ltv-err-bg: #fdecea; --ltv-err: #9f1d15; --ltv-zelle: #6d1ed4;
}
.dark {
    --ltv-cream: #172219; --ltv-cream-2: #1e2c22; --ltv-line: #2f4034; --ltv-field: #0f1713;
    --ltv-green: #1d6a3a; --ltv-green-2: #16512c; --ltv-ink: #dcfce7; --ltv-text: #f5f5f4; --ltv-soft: #b4ada7;
    --ltv-sage: #213325; --ltv-ring: rgba(134, 239, 172, 0.28);
    --ltv-amber-bg: rgba(245, 158, 11, 0.14); --ltv-amber: #f59e0b; --ltv-amber-ink: #fcd34d;
    --ltv-pick-bg: rgba(74, 222, 128, 0.12); --ltv-pick-ink: #bbf7d0;
    --ltv-err-bg: rgba(248, 113, 113, 0.14); --ltv-err: #fecaca; --ltv-zelle: #c4a1ff;
}

/* ── Registrar pago ─────────────────────────────────────────────────────────────────────────────────────── */
.pgm-modal .pgm-card { position: relative; max-width: 440px; background: var(--ltv-cream); color: var(--ltv-text); border-radius: 22px; box-shadow: 0 24px 60px rgba(0, 0, 0, .30); }
.pgm-head { position: relative; flex-shrink: 0; text-align: center; padding: 18px 58px 8px; }
.pgm-hojas { left: -10px; top: -8px; width: 104px; height: 78px; color: #3f8f4f; opacity: .30; }
.dark .pgm-hojas { color: #4ade80; opacity: .20; }
.pgm-title { position: relative; font-size: 1.45rem; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; color: var(--ltv-ink); }
.pgm-modal .pgm-x { top: 8px; right: 8px; border-radius: 50%; color: var(--ltv-text); background: radial-gradient(circle, color-mix(in srgb, var(--ltv-text) 7%, transparent) 0 17px, transparent 18px); }
.pgm-modal .pgm-body { padding: 6px 20px 6px; }
.pgm-cliente { display: flex; align-items: center; gap: 14px; padding: 2px 0 14px; min-width: 0; }
.pgm-casa, .ltcc-casa {
    flex-shrink: 0; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--ltv-green) 16%, var(--ltv-sage)) 0 55%, var(--ltv-sage) 72%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ltv-green) 18%, transparent);
}
.pgm-casa { width: 64px; height: 64px; }
.pgm-casa img, .ltcc-casa img { width: 94%; height: 94%; object-fit: contain; }
.ltv-casa-img.is-rota { visibility: hidden; }
.pgm-id { min-width: 0; flex: 1 1 auto; }
.pgm-nombre { font-size: 1.2rem; font-weight: 800; line-height: 1.2; color: var(--ltv-text); overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.pgm-dir { margin-top: 2px; font-size: .92rem; color: var(--ltv-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pgm-campo { min-width: 0; margin-bottom: 12px; }
.pgm-label { display: block; margin-bottom: 6px; font-size: .95rem; font-weight: 700; color: var(--ltv-text); }
.pgm-monto, .pgm-conico {
    display: flex; align-items: stretch; min-height: 50px; border-radius: 12px; overflow: hidden;
    border: 1.5px solid var(--ltv-line); background: var(--ltv-field); transition: border-color .15s ease, box-shadow .15s ease;
}
.pgm-monto:focus-within, .pgm-conico:focus-within { border-color: var(--ltv-green); box-shadow: 0 0 0 3px var(--ltv-ring); }
.dark .pgm-monto:focus-within, .dark .pgm-conico:focus-within { border-color: #4ade80; }
.pgm-dolar { display: flex; align-items: center; padding: 0 14px; font-size: 1.3rem; font-weight: 800; color: var(--ltv-green); background: var(--ltv-cream-2); border-right: 1px solid var(--ltv-line); }
.dark .pgm-dolar { color: #4ade80; }
.pgm-input { width: 100%; min-width: 0; min-height: 46px; padding: 0 12px; border: 0; outline: none; background: transparent; color: var(--ltv-text); font-size: 1rem; }
.dark .pgm-input { color-scheme: dark; }
.pgm-input--monto { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pgm-conico { align-items: center; padding-left: 12px; }
.pgm-conico > svg { width: 19px; height: 19px; flex-shrink: 0; color: var(--ltv-soft); }
.pgm-conico .pgm-input { padding-left: 8px; }
.pgm-conico--fecha { padding-left: 0; }
.pgm-conico--fecha .pgm-input { padding: 0 10px 0 12px; }
/* Métodos: dos columnas; con la rejilla angosta (320 px) el icono va encima de la etiqueta y nada se recorta. */
.pgm-metodos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; container-type: inline-size; }
.pgm-modal .pgm-metodo {
    position: relative; min-height: 48px; padding: 8px 10px; display: flex; align-items: center; gap: 8px;
    border-radius: 12px; border: 1.5px solid var(--ltv-line); background: var(--ltv-field); color: var(--ltv-text);
    font-size: .92rem; font-weight: 600; text-align: left; cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.pgm-modal .pgm-metodo svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--ltv-green); }
.dark .pgm-modal .pgm-metodo svg { color: #4ade80; }
.pgm-zelle { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; font-weight: 900; line-height: 1; color: var(--ltv-zelle); }
.pgm-metodo-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pgm-modal .pgm-metodo.active { background: var(--ltv-pick-bg); border-color: var(--ltv-green); color: var(--ltv-pick-ink); font-weight: 700; }
.dark .pgm-modal .pgm-metodo.active { border-color: #4ade80; }
.pgm-modal .pgm-metodo--cash.active { background: var(--ltv-amber-bg); border-color: var(--ltv-amber); color: var(--ltv-amber-ink); }
.pgm-modal .pgm-metodo--cash.active svg { color: var(--ltv-amber-ink); }
.dark .pgm-modal .pgm-metodo--cash.active { border-color: var(--ltv-amber); }
.dark .pgm-modal .pgm-metodo--cash.active svg { color: var(--ltv-amber-ink); }
/* Marca de elegido que no depende solo del color. */
.pgm-modal .pgm-metodo.active::after {
    content: ''; position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 50%;
    background: var(--ltv-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat;
    box-shadow: 0 0 0 2px var(--ltv-cream);
}
.pgm-modal .pgm-metodo--cash.active::after { background-color: var(--ltv-amber); }
.pgm-modal .pgm-metodo:focus-visible { outline: 3px solid var(--ltv-ring); outline-offset: 2px; }
@container (max-width: 300px) {
    .pgm-modal .pgm-metodo { flex-direction: column; justify-content: center; gap: 4px; min-height: 60px; padding: 8px 6px; text-align: center; font-size: .86rem; }
    .pgm-metodo-t { max-width: 100%; }
}
.pgm-nota { margin-top: 6px; font-size: .84rem; color: var(--ltv-soft); }
.pgm-fila2 { display: grid; grid-template-columns: 1fr; column-gap: 10px; }
/* Fecha y nota en una fila cuando caben: la fecha necesita ~150 px (dd/mm/aaaa + el icono nativo del calendario). */
@media (min-width: 355px) { .pgm-fila2 { grid-template-columns: minmax(150px, 1.15fr) minmax(0, 1fr); } }
.pgm-sms { border-top: 1px solid var(--ltv-line); padding-top: 8px; margin-top: 2px; }
.pgm-modal .pgm-sms-t { font-size: 1.02rem; }
.pgm-modal .pgm-sms .rhf-fila-s { color: var(--ltv-soft); }
.pgm-modal .pgm-sms .rhf-msg-ico { color: var(--ltv-green); }
.dark .pgm-modal .pgm-sms .rhf-msg-ico { color: #4ade80; }
.pgm-modal .rhf-switch input:checked + span { background: var(--ltv-green); }
.pgm-error { margin: 8px 0 4px; padding: 10px 12px; border-radius: 12px; background: var(--ltv-err-bg); color: var(--ltv-err); font-size: .9rem; font-weight: 600; line-height: 1.35; }
.pgm-modal .pgm-pie { background: var(--ltv-cream); padding: 8px 20px calc(8px + env(safe-area-inset-bottom)); }
.pgm-modal .pgm-principal { background: var(--ltv-green); border-radius: 14px; box-shadow: 0 6px 16px rgba(29, 106, 58, .28); }
.pgm-modal .pgm-principal:hover:not(:disabled) { background: var(--ltv-green-2); }
.pgm-cancelar { min-height: 44px; background: none; border: 0; color: var(--ltv-soft); font-size: .98rem; font-weight: 600; cursor: pointer; border-radius: 10px; }
.pgm-cancelar:hover { color: var(--ltv-text); }
.pgm-cancelar:focus-visible { outline: 2px solid var(--ltv-green); }
@media (max-width: 359px) {
    .pgm-head { padding: 14px 50px 6px; }
    .pgm-title { font-size: 1.28rem; }
    .pgm-modal .pgm-body { padding: 4px 14px 6px; }
    .pgm-modal .pgm-pie { padding-left: 14px; padding-right: 14px; }
    .pgm-casa { width: 56px; height: 56px; }
    .pgm-nombre { font-size: 1.1rem; }
}

/* ── Tarjeta de la casita (InfoWindow de "Clientes cerca") ───────────────────────────────────────────────
   Sigue siendo la InfoWindow de Google: Maps la ancla al marcador y la mueve con el mapa. Se apaga el marco de Google
   SOLO cuando el contenido es la tarjeta nueva (:has), así las otras ventanas quedan como estaban. La punta de Google
   se vuelve invisible SIN sacarla del flujo (visibility): la tarjeta dibuja la suya en el mismo hueco. */
.gm-style .gm-style-iw-c:has(.ltcc-card) { max-width: none !important; max-height: none !important; overflow: visible !important; border-radius: 0 !important; }
.gm-style .gm-style-iw-c:has(.ltcc-card) .gm-style-iw-chr { display: none !important; }
.gm-style .gm-style-iw-c:has(.ltcc-card) .gm-style-iw-d { max-height: none !important; overflow: visible !important; }
.gm-style .gm-style-iw-a:has(.ltcc-card) .gm-style-iw-tc { visibility: hidden !important; }
.gm-style .gm-style-iw-t:has(.ltcc-card)::after { visibility: hidden !important; }
.ltcc-card {
    position: relative; box-sizing: border-box; width: min(292px, calc(100vw - 80px));   /* deja libre la columna de botones del mapa */ padding: 14px;
    border-radius: 18px; border: 1px solid var(--ltv-line); background: var(--ltv-cream); color: var(--ltv-text);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .22); text-align: left; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px; line-height: 1.35;
}
.ltcc-card::after {
    content: ''; position: absolute; left: 50%; bottom: -8px; width: 16px; height: 16px; box-sizing: border-box;
    background: var(--ltv-cream); border-right: 1px solid var(--ltv-line); border-bottom: 1px solid var(--ltv-line);
    transform: translateX(-50%) rotate(45deg); border-bottom-right-radius: 3px;
}
.ltcc-card .hidden { display: none !important; }
.ltcc-x {
    position: absolute; top: 2px; right: 2px; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center; color: var(--ltv-text);
    background: radial-gradient(circle, color-mix(in srgb, var(--ltv-text) 7%, transparent) 0 14px, transparent 15px);
}
.ltcc-x svg { width: 18px; height: 18px; }
.ltcc-x:focus-visible { outline: 2px solid var(--ltv-green); outline-offset: -4px; }
.ltcc-top { display: flex; align-items: center; gap: 12px; padding-right: 30px; min-width: 0; }
.ltcc-casa { width: 64px; height: 64px; }
.ltcc-id { min-width: 0; flex: 1 1 auto; }
.ltcc-nombre { margin: 0; font-size: 1.2rem; font-weight: 800; line-height: 1.2; color: var(--ltv-ink); overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.ltcc-dir { margin: 2px 0 0; font-size: .88rem; color: var(--ltv-soft); overflow-wrap: anywhere; }
.ltcc-dir--2 { margin-top: 0; }
.ltcc-ultimo { display: flex; align-items: center; gap: 8px; margin: 10px 0 10px; font-size: .88rem; color: var(--ltv-soft); }
.ltcc-ultimo svg { width: 16px; height: 16px; flex-shrink: 0; }
.ltcc-error { margin: -2px 0 10px; padding: 8px 10px; border-radius: 10px; background: var(--ltv-err-bg); color: var(--ltv-err); font-size: .85rem; font-weight: 600; }
.ltcc-btn {
    width: 100%; min-height: 46px; padding: 0 14px; border: 0; border-radius: 12px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    background: var(--ltv-green); color: #fff; font-family: inherit; font-size: 1rem; font-weight: 800;
    box-shadow: 0 4px 12px rgba(29, 106, 58, .25);
}
.ltcc-btn:hover:not(:disabled) { background: var(--ltv-green-2); }
.ltcc-btn:focus-visible { outline: 3px solid var(--ltv-ring); outline-offset: 2px; }
.ltcc-btn .ltcc-ico { width: 20px; height: 20px; flex-shrink: 0; }
.ltcc-btn .ltcc-ico--ok, .ltcc-btn .ltcc-spin { display: none; }
.ltcc-spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: ltcc-giro .8s linear infinite; }
.ltcc-btn.is-busy { cursor: wait; opacity: .92; }
.ltcc-btn.is-busy .ltcc-ico { display: none; }
.ltcc-btn.is-busy .ltcc-spin { display: inline-block; }
.ltcc-btn.is-done { cursor: default; background: var(--ltv-pick-bg); color: var(--ltv-pick-ink); box-shadow: inset 0 0 0 1.5px var(--ltv-green); }
.dark .ltcc-btn.is-done { box-shadow: inset 0 0 0 1.5px #4ade80; }
.ltcc-btn.is-done .ltcc-ico--cal { display: none; }
.ltcc-btn.is-done .ltcc-ico--ok { display: inline-block; }
/* Teléfonos angostos: la tarjeta no puede crecer más que la franja visible del mapa. */
@media (max-width: 374px) {
    .ltcc-card { padding: 12px; }
    .ltcc-top { gap: 10px; }
    .ltcc-casa { width: 52px; height: 52px; }
    .ltcc-nombre { font-size: 1.08rem; }
    .ltcc-dir { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ltcc-ultimo { margin: 8px 0; }
}
@keyframes ltcc-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ltcc-spin { animation-duration: 2.4s; } }