/* ============================================================================
   AURORA - Tema visual de HairDress (violeta profundo + oro)
   Se carga despues del core de la plantilla para sobreescribir colores.
   Paleta:
     Violeta profundo : #3B1D5E
     Violeta          : #6C2FB0
     Violeta claro    : #8A4FC7
     Oro              : #C9A227
     Oro claro        : #E3C04A
     Fondo            : #FAF7FD
   ============================================================================ */

:root {
    --aurora-deep: #3B1D5E;
    --aurora-purple: #6C2FB0;
    --aurora-purple-light: #8A4FC7;
    --aurora-gold: #C9A227;
    --aurora-gold-light: #E3C04A;
    --aurora-bg: #FAF7FD;
    --aurora-surface: #FFFFFF;
    --aurora-line: #ECE3F5;
    --bs-primary: #6C2FB0;
    --bs-primary-rgb: 108, 47, 176;
}

body {
    background-color: var(--aurora-bg) !important;
    font-family: 'Inter', 'Public Sans', system-ui, sans-serif;
}

h1, h2, h3, .aurora-serif {
    font-family: 'Playfair Display', Georgia, serif;
}

/* Titulo de cada pantalla (toolbar superior): sans moderna, tamaño contenido */
#exdtoolbar .navbar-brand {
    font-family: 'Inter', 'Public Sans', system-ui, sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: 0.3px;
}

/* ===== Menu lateral (violeta profundo) ===== */
.bg-menu-theme {
    background-color: var(--aurora-deep) !important;
    color: #CBB6E6 !important;
}

.bg-menu-theme .menu-link,
.bg-menu-theme .menu-toggle,
.bg-menu-theme .menu-icon {
    color: #CBB6E6 !important;
}

.bg-menu-theme .menu-item.active > .menu-link,
.bg-menu-theme .menu-item .menu-link.active {
    background-color: rgba(201, 162, 39, 0.18) !important;
    color: #FFFFFF !important;
}

    .bg-menu-theme .menu-item.active > .menu-link .menu-icon,
    .bg-menu-theme .menu-item .menu-link.active .menu-icon {
        color: var(--aurora-gold-light) !important;
    }

.bg-menu-theme .menu-link:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #FFFFFF !important;
}

.bg-menu-theme .menu-sub .menu-link {
    color: #B49DD6 !important;
}

/* Submenus: misma separacion icono-texto que los menus principales
   (la plantilla la anula con margin-right: 0) */
.layout-wrapper:not(.layout-horizontal) .menu-vertical .menu-sub .menu-icon {
    margin-right: 0.5rem !important;
}

.bg-menu-theme .app-brand-text {
    color: #FFFFFF !important;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.35rem !important;
}

.bg-menu-theme .menu-inner-shadow {
    background: linear-gradient(var(--aurora-deep) 41%, rgba(59, 29, 94, 0.11) 95%, rgba(59, 29, 94, 0)) !important;
}

/* ===== Botones primarios ===== */
.btn-primary {
    background-color: var(--aurora-purple) !important;
    border-color: var(--aurora-purple) !important;
}

    .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
        background-color: var(--aurora-deep) !important;
        border-color: var(--aurora-deep) !important;
    }

/* Boton dorado (acciones destacadas: COBRAR, etc.) */
.btn-aurora-gold {
    background: linear-gradient(135deg, var(--aurora-gold), var(--aurora-gold-light)) !important;
    color: var(--aurora-deep) !important;
    font-weight: 700 !important;
    border: none !important;
    letter-spacing: 0.4px;
}

    .btn-aurora-gold:hover {
        filter: brightness(1.06);
        color: var(--aurora-deep) !important;
    }

/* ===== Espaciado global del contenido ===== */
/* Aire entre la barra superior y el contenido de cada pantalla.
   (la toolbar usa margin-top:-70px y sin esto el contenido queda pegado
   e incluso se solapa: p.ej. el primer combo de Tablas Auxiliares) */
#PageStart > div.row:first-of-type {
    margin-top: 1.75rem;
}

/* ===== Campos de entrada: altura uniforme ===== */
/* Iguala la altura de cajas numericas, de texto, combos y fechas
   (excluye areas de texto multilinea) */
.e-outline.e-input-group:not(.e-multi-line-input):not(.e-textArea),
.e-outline.e-input-group.e-control-wrapper:not(.e-multi-line-input):not(.e-textArea) {
    height: 40px;
}

/* ===== Tarjetas y superficies ===== */
.card {
    border-radius: 14px !important;
    border: 1px solid var(--aurora-line) !important;
    box-shadow: 0 4px 18px rgba(59, 29, 94, 0.06) !important;
}

.card-header h5, .card-header .card-title {
    color: var(--aurora-deep);
}

/* ===== Enlaces y acentos ===== */
a {
    color: var(--aurora-purple);
}

    a:hover {
        color: var(--aurora-deep);
    }

.text-primary {
    color: var(--aurora-purple) !important;
}

/* ===== Navbar superior ===== */
.bg-navbar-theme {
    background-color: var(--aurora-surface) !important;
}

.layout-navbar {
    box-shadow: 0 2px 10px rgba(59, 29, 94, 0.06) !important;
}

/* ===== Badges / pills ===== */
.badge.bg-aurora {
    background-color: #EFE6FB !important;
    color: var(--aurora-purple) !important;
    font-weight: 600;
}

/* ===== TPV (pantalla tactil) ===== */
.tpv-tile {
    background: var(--aurora-surface);
    border: 1px solid var(--aurora-line);
    border-radius: 13px;
    padding: 14px 12px;
    min-height: 84px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-weight: 600;
    color: var(--aurora-deep);
    transition: border-color .15s ease, transform .1s ease, box-shadow .15s ease;
    user-select: none;
}

    .tpv-tile:hover {
        border-color: var(--aurora-gold);
        box-shadow: 0 4px 14px rgba(201, 162, 39, 0.18);
    }

    .tpv-tile:active {
        transform: scale(0.97);
    }

    .tpv-tile small {
        color: var(--aurora-purple-light);
        font-weight: 600;
    }

/* Ficha de SUBGRUPO en el TPV: se distingue de los productos por el fondo
   degradado violeta, el borde y el icono de carpeta */
.tpv-group-tile {
    background: linear-gradient(135deg, #F3EBFB 0%, #EADDF8 100%);
    border: 1px solid var(--aurora-purple-light);
    color: var(--aurora-purple, #6C2FB0);
}

    .tpv-group-tile:hover {
        border-color: var(--aurora-purple, #6C2FB0);
        box-shadow: 0 4px 14px rgba(108, 47, 176, 0.22);
    }

    .tpv-group-tile small {
        color: var(--aurora-purple-light);
        font-weight: 500;
    }

/* Ficha "volver al grupo padre": mas neutra que las de subgrupo */
.tpv-group-up {
    background: #F4F2F7;
    border-style: dashed;
    color: var(--aurora-deep);
}

/* Foto del vendedor en cada linea del ticket: clicable, abre el selector de empleados */
.tpv-line-seller {
    flex: 0 0 auto;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    line-height: 0;
    transition: transform .1s ease;
}

    .tpv-line-seller:hover {
        transform: scale(1.12);
    }

    .tpv-line-seller img,
    .tpv-line-seller .emp-photo-grid-empty {
        border-color: var(--aurora-gold, #C9A227);
    }

/* Caja de importe clicable (precio de linea, entregado): abre el teclado numerico */
.tpv-amount-btn {
    min-width: 84px;
    padding: 6px 10px;
    border: 1px solid var(--aurora-line);
    border-radius: 8px;
    background: #fff;
    text-align: right;
    font-weight: 600;
    color: var(--aurora-deep);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .12s ease, box-shadow .12s ease;
}

    .tpv-amount-btn:hover {
        border-color: var(--aurora-gold, #C9A227);
        box-shadow: 0 2px 8px rgba(201, 162, 39, 0.18);
    }

    .tpv-amount-btn.disabled {
        background: #F4F2F7;
        color: var(--aurora-purple-light);
        cursor: default;
        pointer-events: none;
    }

.tpv-amount-payment {
    font-size: 1.15rem;
    padding: 8px 12px;
}

/* Campo de importe "grande" de los formularios (apertura/cierre de caja):
   mismo comportamiento que TPV/Gastos, un toque abre el teclado numerico */
.tpv-amount-field {
    width: 100%;
    font-size: 1.1rem;
    padding: 10px 14px;
}

    .tpv-amount-field:focus-visible {
        outline: 2px solid var(--aurora-gold, #C9A227);
        outline-offset: 1px;
    }

/* Primer bloque de contenido de Clientes: aire para no solaparse con la barra superior */
.cli-search-row {
    margin-top: 28px;
}

/* Las tarjetas hacen scroll dentro de su contenedor: el buscador nunca se pierde */
.cli-grid-scroll {
    max-height: calc(100vh - 310px);
    overflow-y: auto;
    padding-right: 4px;
}

/* Checkbox de solo lectura en grids (columna Activo): visible sin atenuar */
.grid-check:disabled {
    opacity: 1;
    pointer-events: none;
}

    .grid-check:checked {
        background-color: var(--aurora-purple, #6C2FB0);
        border-color: var(--aurora-purple, #6C2FB0);
    }

/* Valor vacio de un campo-boton numerico (muestra la etiqueta en gris) */
.tpv-amount-empty {
    color: #A9A0BC;
    font-weight: 500;
}

/* ===== Teclado numerico de importes (AmountPadPopUp) ===== */
/* Contenedor con foco para capturar el teclado fisico, sin marco visible */
.amount-pad-focus {
    outline: none;
}

.amount-pad-display {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--aurora-deep);
    background: #F6F1FB;
    border-radius: 10px;
    padding: 8px 16px;
    text-align: right;
    margin-bottom: 12px;
    min-height: 56px;
}

.amount-pad-placeholder {
    color: var(--aurora-purple-light);
    opacity: .55;
}

.amount-pad-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.amount-pad-btn {
    height: 58px;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--aurora-deep);
    background: #FBF9FE;
    border: 1px solid var(--aurora-line);
    border-radius: 10px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform .08s ease, border-color .12s ease;
}

    .amount-pad-btn:hover {
        border-color: var(--aurora-purple-light);
    }

    .amount-pad-btn:active {
        transform: scale(0.94);
        background: #F2ECF9;
    }

.amount-pad-clear {
    min-width: 64px;
    font-weight: 700;
}

.tpv-ticket {
    background: var(--aurora-surface);
    border-left: 1px solid var(--aurora-line);
}

.tpv-total {
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--aurora-deep);
}

.tpv-qty-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #F2ECF9;
    color: var(--aurora-purple);
    border: none;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

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

.tpv-line {
    border-bottom: 1px solid #F0EAF6;
    padding: 8px 0;
}

.tpv-pay-btn {
    flex: 1;
    padding: 12px;
    border-radius: 10px;
    font-weight: 600;
    border: 1.5px solid transparent;
    background: #F6F1FB;
    color: #4A3560;
    cursor: pointer;
    font-size: 1rem;
}

    .tpv-pay-btn.selected {
        background: var(--aurora-deep);
        color: #fff;
        border-color: var(--aurora-deep);
    }

.tpv-cobrar {
    width: 100%;
    padding: 16px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1.25rem;
    text-align: center;
    cursor: pointer;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, var(--aurora-gold), var(--aurora-gold-light));
    color: var(--aurora-deep);
    border: none;
}

    .tpv-cobrar:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* El cambio a devolver debe destacar: es el dato que el empleado lee en voz alta al cliente */
.tpv-change {
    display: inline-block;
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--aurora-deep);
    background: #FFF7E0;
    border: 2px solid var(--aurora-gold, #C9A227);
    border-radius: 10px;
    padding: 2px 14px;
    line-height: 1.3;
}

/* ===== Clientes (CRM) ===== */
.cli-search .e-input {
    font-size: 1.1rem !important;
}

.cli-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

.cli-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--aurora-line);
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .12s ease, box-shadow .12s ease;
}

    .cli-card:hover {
        border-color: var(--aurora-gold, #C9A227);
        box-shadow: 0 2px 10px rgba(201, 162, 39, 0.18);
    }

    .cli-card.cli-inactive {
        opacity: .55;
    }

.cli-avatar {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background: #F2ECF9;
    color: var(--aurora-purple);
    font-weight: 700;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cli-avatar-lg {
    width: 56px;
    height: 56px;
    min-width: 56px;
    font-size: 1.5rem;
}

.cli-card-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.cli-card-name {
    font-weight: 600;
    color: var(--aurora-deep);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cli-allergy-dot {
    color: #C62828;
    font-size: 1.05rem;
}

.cli-allergy-badge {
    background: #FBEAEA;
    color: #C62828;
    border-radius: 999px;
    padding: 4px 14px;
    font-size: .85rem;
    font-weight: 600;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Pestañas de la ficha */
.cli-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.cli-tab {
    border: 1px solid var(--aurora-line);
    background: #fff;
    border-radius: 999px;
    padding: 8px 18px;
    font-weight: 600;
    color: var(--aurora-purple);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

    .cli-tab.active {
        background: var(--aurora-deep, #3B1D5E);
        border-color: var(--aurora-deep, #3B1D5E);
        color: #fff;
    }

/* KPIs del historial (solo admin) */
.cli-kpi {
    background: #fff;
    border: 1px solid var(--aurora-line);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 100%;
}

    .cli-kpi small {
        text-transform: uppercase;
        color: #8a8199;
        font-weight: 600;
        letter-spacing: .04em;
    }

    .cli-kpi b {
        font-size: 1.4rem;
        color: var(--aurora-deep);
        font-variant-numeric: tabular-nums;
    }

.cli-kpi-gold {
    background: #FFF7E0;
    border-color: var(--aurora-gold, #C9A227);
}

/* Ficha tecnica: tarjetas del historico */
.tech-form {
    border: 1px dashed var(--aurora-gold, #C9A227);
    border-radius: 12px;
    padding: 16px;
    background: #FFFDF6;
}

/* Lista de registros con scroll propio: el formulario de alta queda siempre a la vista */
.tech-list {
    max-height: 48vh;
    overflow-y: auto;
    padding-right: 4px;
}

.tech-card {
    border: 1px solid var(--aurora-line);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 10px;
    background: #fff;
}

    /* El ultimo registro destaca en violeta claro (distinto del formulario, que va crema) */
    .tech-card.tech-latest {
        border-color: var(--aurora-gold, #C9A227);
        background: #F6F1FB;
    }

.tech-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.tech-date {
    font-weight: 700;
    color: var(--aurora-deep);
}

/* Popup de cliente del TPV */
/* Lista mas contenida (36vh) para que el dialogo completo quepa en pantalla
   sin cortarse por arriba en tablets y portatiles */
.cli-popup-list {
    max-height: 36vh;
    overflow-y: auto;
}

.cli-popup-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 6px;
    border-bottom: 1px solid var(--aurora-line);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

    .cli-popup-row:hover {
        background: #F6F1FB;
    }

/* Pildora de cliente asignado en el TPV */
.tpv-customer-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #F2ECF9;
    color: var(--aurora-deep);
    font-weight: 600;
    border: 1px solid var(--aurora-purple-light, #C9B8E8);
    border-radius: 999px;
    padding: 6px 8px 6px 14px;
    max-width: 260px;
}

/* La misma pildora en la cita de la Agenda: lleva ademas telefono y plantones, asi que
   puede ocupar todo el ancho del formulario y cada dato va en una sola linea (sin esto el
   nombre partia en tres lineas y el aviso de plantones se salia de la pildora). */
.tpv-customer-pill.apt-customer-pill {
    max-width: 100%;
    flex-wrap: nowrap;
}

    .tpv-customer-pill.apt-customer-pill > * {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Si aun asi no cabe (nombre muy largo en movil), se recorta solo el nombre */
    .tpv-customer-pill.apt-customer-pill > b {
        flex-shrink: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tpv-customer-pill .tpv-customer-remove {
        border: none;
        background: #E3D9F2;
        color: var(--aurora-deep);
        border-radius: 50%;
        width: 24px;
        height: 24px;
        line-height: 1;
        font-size: 1rem;
        cursor: pointer;
    }

/* ===== Clasificacion por estrellas (Proveedores) ===== */
.rating-stars {
    display: inline-flex;
    gap: 4px;
    font-size: 1.4rem;
    color: var(--aurora-gold, #C9A227);
    user-select: none;
}

    .rating-stars .bi {
        cursor: pointer;
        transition: transform .1s ease;
    }

    .rating-stars:not(.rating-readonly):not(.rating-stars-grid) .bi:hover {
        transform: scale(1.15);
    }

    .rating-stars.rating-readonly .bi,
    .rating-stars.rating-stars-grid .bi {
        cursor: default;
        pointer-events: none;
    }

.rating-stars-grid {
    font-size: 0.95rem;
    gap: 2px;
}

/* ===== Ver arqueo (popup de cierre, solo admin) ===== */
.arqueo-lines {
    font-variant-numeric: tabular-nums;
}

.arqueo-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 2px 0;
}

    .arqueo-row.arqueo-total b {
        color: var(--aurora-deep);
    }

/* ===== Camara web (CameraCapturePopUp) ===== */
.camera-frame {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #1c1826;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .camera-frame video,
    .camera-frame img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* ===== Foto de empleado ===== */
.emp-photo {
    width: 120px;
    height: 120px;
    max-width: 100%;      /* nunca desborda su columna aunque la imagen sea mayor */
    border-radius: 50%;
    object-fit: cover;    /* rellena el círculo recortando, sin deformar */
    border: 3px solid var(--aurora-line);
    box-shadow: 0 4px 14px rgba(59, 29, 94, 0.12);
    background: #F6F1FB;
}

.emp-photo-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--aurora-purple-light);
    font-size: 3rem;
}

/* Miniatura de foto en el grid de empleados */
.emp-photo-grid {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--aurora-line);
    background: #F6F1FB;
    vertical-align: middle;
}

.emp-photo-grid-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--aurora-purple-light);
    font-size: 1.1rem;
}

/* ===== Selector de empleados (EmployeeSelectorPopUp) ===== */
.emp-selector-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 14px;
    padding: 6px 2px;
    max-height: 60vh;
    overflow-y: auto;
}

.emp-selector-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 8px 14px;
    border: 2px solid transparent;
    border-radius: 14px;
    background: #FBF9FE;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.emp-selector-card:hover,
.emp-selector-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(59, 29, 94, 0.16);
    border-color: var(--aurora-purple-light);
    outline: none;
}

.emp-selector-card:active {
    transform: scale(0.97);
}

.emp-selector-card img,
.emp-selector-noPhoto {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--aurora-line);
    background: #F6F1FB;
}

.emp-selector-noPhoto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--aurora-purple-light);
    font-size: 2.6rem;
}

.emp-selector-name {
    font-weight: 600;
    color: var(--aurora-deep);
    text-align: center;
    font-size: .92rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

/* Empleado seleccionado actualmente: anillo dorado */
.emp-selector-selected {
    border-color: var(--aurora-gold, #C9A227);
    background: #FDFAF1;
}

.emp-selector-selected img,
.emp-selector-selected .emp-selector-noPhoto {
    border-color: var(--aurora-gold, #C9A227);
}

/* ===== Recuento de metálico (CashCountPopUp) ===== */
/* Boton que abre el recuento, junto al campo Metálico del cierre */
.cash-count-open {
    height: 40px;
    min-width: 46px;
    font-size: 1.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cash-count-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.cash-count-total {
    flex: 1 1 auto;
    min-width: 160px;
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--aurora-deep);
    background: #F6F1FB;
    border-radius: 10px;
    padding: 4px 16px;
    text-align: right;
}

.cash-count-step .btn {
    min-width: 56px;
    font-weight: 700;
}

.cash-count-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
    gap: 10px;
    max-height: 52vh;
    overflow-y: auto;
    padding: 2px;
}

.cash-count-card {
    border: 2px solid transparent;
    border-radius: 12px;
    background: #FBF9FE;
    padding: 8px 8px 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.cash-count-active {
    border-color: var(--aurora-gold, #C9A227);
    background: #FDFAF1;
}

.cash-count-img {
    position: relative;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    text-align: center;
    transition: transform .1s ease;
}

.cash-count-img:hover {
    transform: translateY(-2px);
}

.cash-count-img:active {
    transform: scale(0.95);
}

.cash-count-img img {
    max-width: 100%;
    height: 64px;
    object-fit: contain;
    pointer-events: none;
}

.cash-count-badge {
    position: absolute;
    top: -6px;
    right: -2px;
    min-width: 26px;
    height: 26px;
    border-radius: 13px;
    background: var(--aurora-purple, #6C2FB0);
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 7px;
    box-shadow: 0 2px 8px rgba(59, 29, 94, 0.35);
}

.cash-count-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.cash-count-value {
    font-size: .82rem;
    font-weight: 600;
    color: var(--aurora-deep);
}

.cash-count-minus {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--aurora-line);
    background: #fff;
    color: #B02F2F;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.cash-count-minus:disabled {
    opacity: .35;
    cursor: default;
}

.cash-count-minus:not(:disabled):hover {
    border-color: #B02F2F;
    background: #FDF3F3;
}

/* Bloque "quien realiza la accion" (foto clicable que abre el selector) */
.cash-actor {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 8px 14px 8px 8px;
    border: 1px dashed var(--aurora-line);
    border-radius: 60px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: box-shadow .12s ease, border-color .12s ease;
}

.cash-actor:hover {
    border-color: var(--aurora-gold, #C9A227);
    box-shadow: 0 4px 14px rgba(59, 29, 94, 0.12);
}

.cash-actor img,
.cash-actor .cash-actor-noPhoto {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--aurora-gold, #C9A227);
    background: #F6F1FB;
}

.cash-actor .cash-actor-noPhoto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--aurora-purple-light);
    font-size: 1.6rem;
}

/* ===== Login ===== */
.aurora-login-bg {
    background: linear-gradient(150deg, var(--aurora-deep) 0%, #2A1640 60%, #1D0F2E 100%);
    min-height: 100vh;
}

.aurora-login-card {
    background: #FFFFFF;
    border-radius: 18px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
    padding: 2.4rem;
    max-width: 460px;
    width: 100%;
}

.aurora-login-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    color: var(--aurora-deep);
    text-align: center;
}

.aurora-code-input input {
    text-align: center !important;
    font-size: 1.6rem !important;
    letter-spacing: 10px !important;
    font-weight: 700 !important;
}

/* ===== Home / dashboard ===== */
.aurora-hero {
    background: linear-gradient(135deg, var(--aurora-deep), var(--aurora-purple));
    border-radius: 18px;
    color: #fff;
    padding: 2rem 2.4rem;
}

    .aurora-hero h2 {
        color: #fff;
        font-family: 'Playfair Display', Georgia, serif;
    }

    .aurora-hero .gold {
        color: var(--aurora-gold-light);
    }

    /* Los badges del hero (caja, sin fichar) pueden ser largos en movil:
       Bootstrap los trae con nowrap y se salen; aqui se permite el salto de linea */
    .aurora-hero .badge {
        white-space: normal;
        text-align: start;
        line-height: 1.4;
    }

.aurora-quick {
    border-radius: 14px;
    border: 1px solid var(--aurora-line);
    background: #fff;
    padding: 1.3rem;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
    text-decoration: none;
    color: var(--aurora-deep);
}

    .aurora-quick:hover {
        border-color: var(--aurora-gold);
        box-shadow: 0 4px 16px rgba(59, 29, 94, 0.10);
        color: var(--aurora-deep);
    }

    .aurora-quick .icon {
        width: 46px;
        height: 46px;
        border-radius: 11px;
        background: #F2ECF9;
        color: var(--aurora-purple);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.4rem;
        flex-shrink: 0;
    }

    .aurora-quick b {
        display: block;
    }

    .aurora-quick small {
        color: #8a7a9e;
    }

/* ===== Agenda de citas ===== */
.agenda-banner {
    background: #FBE7E7;
    border: 1px solid #E7B3B0;
    color: #B3403A;
    border-radius: 10px;
    padding: 8px 16px;
    margin-bottom: 12px;
    font-weight: 600;
}

.agenda-week-emp { margin-right: 4px; }

/* Mientras carga la agenda: aviso discreto en vez de una rejilla vacia */
.agenda-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--aurora-purple-light, #8A4FC7);
    font-weight: 600;
}

/* La agenda ocupa todo el ancho (.agenda-page) y su barra (NavToolBar, montada encima de la
   barra superior con margenes negativos) tambien: la barra superior la acompaña para que
   Dia/Semana/Mes y el engranaje no queden encima de la foto del usuario (como en Proveedores) */
.layout-page:has(.agenda-page) #layout-navbar {
    max-width: none !important;
}

/* Tarjetas de cita por estado (CssClass del Scheduler).
   En las vistas con empleados (Dia) Syncfusion pinta cada cita con el COLOR DEL EMPLEADO como
   estilo en linea, que gana a cualquier regla normal. Las reservadas se quedan con ese color (asi
   se distingue de quien es cada cita); finalizada y no presentado llevan !important para que su
   estado se vea siempre. */
.agenda-card .e-schedule .e-appointment.apt-reserved,
.agenda-card .e-schedule .e-appointment.apt-parked {
    background: #6C2FB0;
    border-color: #3B1D5E;
}

.agenda-card .e-schedule .e-appointment.apt-finished {
    background: #7BA98A !important;
    border-color: #2E7D43 !important;
}

.agenda-card .e-schedule .e-appointment.apt-noshow {
    background: #C96A64 !important;
    border-color: #B3403A !important;
    text-decoration: line-through;
}

.agenda-card .e-schedule .e-appointment { border-radius: 6px; }

/* Cita con un ticket ALMACENADO en el TPV (pendiente de cobro): borde ambar discontinuo y el
   cronometro de "Pendientes" del TPV en un circulo ambar en la esquina, para que se vea aunque
   la tarjeta sea pequeña. Al pulsar Cobrar se recupera ese ticket. */
.agenda-card .e-schedule .e-appointment.apt-parked {
    outline: 2px dashed #F2A900;
    outline-offset: -2px;
}

    .agenda-card .e-schedule .e-appointment.apt-parked::after {
        content: "\f596"; /* bi-stopwatch-fill */
        font-family: bootstrap-icons !important;
        position: absolute;
        top: 2px;
        right: 2px;
        width: 18px;
        height: 18px;
        line-height: 18px;
        text-align: center;
        font-size: 11px;
        border-radius: 50%;
        background: #F2A900;
        color: #3B1D5E;
        box-shadow: 0 0 0 2px #fff;
        z-index: 2;
        pointer-events: none;
    }

/* PAGINA DE LA AGENDA: aprovecha todo el ancho y casi todo el alto. Las demas pantallas
   llevan el margen de la plantilla (container-xxl, 1440 px y 1.5rem arriba y abajo); la
   agenda necesita todas las horas posibles a la vista. --agenda-offset es lo que se resta
   al alto de la ventana para el calendario (barra superior + margenes): se ajusta aqui y
   nada mas. */
.agenda-page {
    max-width: none !important;
    padding-top: .5rem !important;
    padding-bottom: .25rem !important;
    --agenda-offset: 130px;
}

    .agenda-page .agenda-banner {
        margin-bottom: 6px;
        padding: 4px 12px;
    }

/* ALTURA DE CADA FRANJA (vistas Dia y Semana). El tema de Syncfusion pone 36 px por franja:
   con franjas de 15 minutos son 144 px por hora y solo cabian 4-5 horas en pantalla. Con
   20 px la hora mide 80 px y se ve casi el doble de dia. Syncfusion coloca y dimensiona las
   citas midiendo la celda en pantalla, asi que basta con cambiar la altura por CSS (es la
   forma que documenta). Para mas o menos densidad, cambiar --agenda-slot-h y nada mas. */
.agenda-card { --agenda-slot-h: 20px; }

.agenda-card .e-schedule .e-vertical-view .e-time-cells-wrap table td,
.agenda-card .e-schedule .e-vertical-view .e-work-cells {
    height: var(--agenda-slot-h);
}

    /* Las horas de la columna izquierda, un poco mas pequenas para que quepan en la franja */
    .agenda-card .e-schedule .e-vertical-view .e-time-cells-wrap table td {
        font-size: 12px;
    }

/* Chips de servicios del popup de cita */
.apt-services {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 30vh;
    overflow-y: auto;
    padding: 2px;
}

.apt-service-chip {
    border: 1.5px solid #D9CBEE;
    background: #fff;
    color: #3B1D5E;
    border-radius: 99px;
    padding: 6px 14px;
    font-size: .9rem;
    cursor: pointer;
    transition: all .12s ease;
}

.apt-service-chip:hover { border-color: #8A4FC7; }

.apt-service-chip.selected {
    background: #6C2FB0;
    border-color: #3B1D5E;
    color: #fff;
    font-weight: 600;
}

.apt-service-chip:disabled { opacity: .6; cursor: default; }

/* Badges de estado de cita */
.apt-badge {
    display: inline-block;
    padding: 2px 12px;
    border-radius: 99px;
    font-size: .8rem;
    font-weight: 600;
}

.apt-badge-reserved { background: #EDE3FA; color: #6C2FB0; }
.apt-badge-finished { background: #E3F2E6; color: #2E7D43; }
.apt-badge-noshow { background: #FBE7E7; color: #B3403A; }
.apt-badge-parked { background: #FFF1CC; color: #7A5200; border: 1px dashed #F2A900; }

/* Badges de estado de pedido a proveedor (pantalla Pedidos), sobre la pildora .apt-badge */
.por-badge-draft { background: #EEF0F3; color: #5F6B7A; }
.por-badge-sent { background: #E3F2E6; color: #2E7D43; }
.por-badge-partial { background: #FBF3D6; color: #8A6D0B; }
.por-badge-received { background: #EDE3FA; color: #6C2FB0; }
.por-badge-closed { background: #DCE6F2; color: #2B4C7E; }
.por-badge-cancelled { background: #FBE7E7; color: #B3403A; }

/* Cantidades y precio de la linea de pedido: caja clicable dentro de la celda (abre el teclado
   numerico, como el precio de linea del TPV), compacta para la altura de la fila del grid */
.por-cell-btn {
    min-width: 0;
    width: 100%;
    padding: 3px 8px;
    font-size: .9rem;
}

/* Tabla del horario semanal y lista de dias especiales (popup ajustes) */
.apt-week-table input[type="time"] { min-width: 92px; }

.apt-exception-list {
    max-height: 32vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.apt-exception-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #FAF7FD;
    border: 1px solid #E6DEF2;
    border-radius: 8px;
    padding: 6px 12px;
}

/* Cuerpo del popup de ajustes de la agenda: scroll propio para que el popup
   nunca desborde la pantalla (horario semanal + lista de dias especiales) */
.apt-settings-body {
    max-height: 62vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
}

/* Fecha fija de la cita nueva (alineada con los inputs de hora) */
.apt-date-fixed {
    background: #F3ECFB;
    color: #3B1D5E;
    font-weight: 600;
    border-color: #E6DEF2;
    text-transform: capitalize;
}

/* Chip de acceso rapido (top vendidos) */
.apt-service-chip.apt-chip-top {
    border-style: dashed;
    background: #FFFDF6;
}

.apt-service-chip.apt-chip-top .bi-star-fill { color: #C9A227; font-size: .75em; }

/* Selector de servicios estilo TPV */
.apt-picker-groups {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.apt-picker-list {
    max-height: 42vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-right: 2px;
}

.apt-picker-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1.5px solid #E6DEF2;
    border-radius: 10px;
    padding: 9px 14px;
    color: #2A2233;
    cursor: pointer;
    transition: all .12s ease;
}

.apt-picker-item:hover { border-color: #8A4FC7; }

.apt-picker-item.selected {
    background: #EDE3FA;
    border-color: #6C2FB0;
    font-weight: 600;
}

.apt-picker-item .apt-picker-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    color: #6E6579;
}

/* Cabecera de columna de empleado (vista Dia): foto cuadrada + nombre */
.agenda-res-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 6px;
    min-width: 0;
}

.agenda-res-header img,
.agenda-res-header .agenda-res-noPhoto {
    width: 36px;
    height: 36px;
    border-radius: 9px;          /* cuadrada con esquinas suaves, como pidio Fran */
    object-fit: cover;
    flex: 0 0 36px;
    border: 2px solid #E6DEF2;
}

.agenda-res-header .agenda-res-noPhoto {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F3ECFB;
    color: #8A4FC7;
    font-size: 1.1rem;
}

.agenda-res-header .agenda-res-name {
    font-weight: 600;
    color: #3B1D5E;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;     /* si no cabe, el nombre se recorta (la foto manda) */
    min-width: 0;
}

/* Que la celda de recurso deje sitio a la cabecera nueva */
.agenda-card .e-schedule .e-resource-cells { padding: 2px 4px; }

/* Vista Dia: fotos de empleado mas grandes (peticion de Fran) */
.agenda-res-header img,
.agenda-res-header .agenda-res-noPhoto {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 11px;
}

.agenda-res-header .agenda-res-noPhoto { font-size: 1.5rem; }

.agenda-res-header .agenda-res-name { font-size: .95rem; }

/* Vista Dia: fuera la fila que repite la fecha ("vie 28") bajo cada empleado
   (la fecha ya esta en la cabecera, ahora con el dia de la semana) */
.agenda-day .e-date-header-wrap tr:has(.e-header-cells) { display: none; }

/* La sangria IZQUIERDA (encima de la columna de horas) es una tabla aparte y debe
   medir lo mismo que la cabecera: se le oculta tambien su fila de fecha y se iguala
   la altura de la celda de recurso en los dos lados (la foto de 48px estira la de
   la derecha). Sin esto las horas quedaban descolgadas ~27px de la rejilla. */
.agenda-day .e-left-indent-wrap tr:has(.e-header-cells) { display: none; }
.agenda-day .e-left-indent-wrap .e-resource-cells,
.agenda-day .e-date-header-wrap .e-resource-cells { height: 74px; }

/* CARRIL PARA EL DEDO a la derecha de las citas (vista Dia, una columna por empleado).
   Para poner una segunda cita solapada con otra hay que pulsar la celda a la derecha de la
   que ya esta puesta, y Syncfusion solo deja libre un 4% (su getEventWidth devuelve 96-97%):
   medido en pantalla eran 9 px. Con el raton se acierta; con el dedo no.

   .e-day-wrapper es el contenedor de citas de CADA columna y el offsetParent de las citas,
   que se colocan en PORCENTAJE de el (width y left). Estrechandolo se reducen todas
   proporcionalmente, asi que el reparto que hace Syncfusion entre citas solapadas sigue
   siendo el suyo: no se toca su calculo, solo el lienzo sobre el que lo aplica.

   OJO, se estrecha con BORDE y no con width a proposito: ese div es display:table-cell
   (cuelga directo de un <tr>), y en una celda de tabla el width se lo pasa por el arco del
   triunfo. El borde si cuenta, porque el bloque contenedor de un absolute es la caja de
   RELLENO del ancestro, que el borde si recorta (y con box-sizing:border-box la columna no
   cambia de ancho). Va transparente y el div mide 0 de alto, asi que no se ve nada.

   Medido: la cita pasa de 224 a 185 px y el carril de 9 a 48 px en una columna de 233.
   Para mas o menos carril, cambiar --agenda-tap-lane y nada mas. */
.agenda-day { --agenda-tap-lane: 40px; }
.agenda-day.e-schedule .e-vertical-view .e-day-wrapper { border-right: var(--agenda-tap-lane) solid transparent; }

/* Fecha de la cabecera con el dia de la semana en mayusculas */
.agenda-date-range { color: #3B1D5E; }
.agenda-date-range b { color: #6C2FB0; letter-spacing: .04em; }

/* Coincidencias de cliente EN VIVO bajo el telefono de la cita */
.apt-cli-matches {
    margin-top: 6px;
    border: 1px solid #E6DEF2;
    border-radius: 10px;
    overflow: hidden;
    max-height: 22vh;
    overflow-y: auto;
    background: #fff;
}

.apt-cli-matches .cli-popup-row { border-radius: 0; }

/* ===== Tipo de producto: SERVICIO / PRODUCTO (segmentado con deslizador) ===== */
.prd-type-toggle {
    position: relative;
    display: inline-flex;
    background: #F3ECFB;
    border: 1.5px solid #E6DEF2;
    border-radius: 99px;
    padding: 3px;
    gap: 0;
}

.prd-type-toggle button {
    position: relative;
    z-index: 1;
    border: 0;
    background: transparent;
    color: #6E6579;
    font-weight: 600;
    padding: 7px 20px;
    border-radius: 99px;
    cursor: pointer;
    min-width: 130px;
    transition: color .18s ease;
}

.prd-type-toggle button.active { color: #fff; }

.prd-type-slider {
    position: absolute;
    z-index: 0;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc(50% - 3px);
    border-radius: 99px;
    background: linear-gradient(135deg, #6C2FB0, #8A4FC7);
    transition: transform .18s ease, background .18s ease;
}

.prd-type-toggle.is-goods .prd-type-slider {
    transform: translateX(100%);
    background: linear-gradient(135deg, #A07A1F, #C9A227);
}

.prd-badge-goods { background: #FFF4D6; color: #8A6D14; }

/* KPI en rojo (plantones del cliente) */
.cli-kpi-red { border-left: 4px solid #B3403A; }
.cli-kpi-red b { color: #B3403A; }

/* ===== Pantalla de inicio: citas de hoy + cumpleaños ===== */
.home-card { height: 100%; }

.home-scroll {
    max-height: 42vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.home-apt,
.home-birthday {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #FAF7FD;
    border: 1px solid #E6DEF2;
    border-radius: 10px;
    padding: 7px 12px;
    min-width: 0;
}

.home-apt-time {
    font-weight: 700;
    color: #6C2FB0;
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
}

.home-apt-body {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-apt-emp {
    flex: 0 0 auto;
    color: #6E6579;
    font-size: .85rem;
}

.home-apt-done { opacity: .65; }

.home-birthday .bi-cake2 { color: #C9A227; flex: 0 0 auto; }

.home-birthday-when {
    flex: 0 0 auto;
    color: #6E6579;
    font-size: .85rem;
    font-weight: 600;
}

.home-birthday-when.is-today { color: #C9A227; }

/* Badges DENTRO de grids: mas cuadrados y estrechos que la pildora de los popups,
   para que no se solapen con la linea de la fila */
.grid-badge {
    border-radius: 5px;
    padding: 1px 8px;
    font-size: .74rem;
    line-height: 1.35;
    letter-spacing: .01em;
}

/* ===== Vacaciones y ausencias ===== */
.abs-year,
.abs-month {
    color: #3B1D5E;
    min-width: 64px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Calendario mensual del administrador: un empleado por fila, un punto por ausencia */
.abs-cal {
    border-collapse: collapse;
    width: 100%;
    font-size: .8rem;
}

.abs-cal th,
.abs-cal td {
    border: 1px solid #E6DEF2;
    text-align: center;
    padding: 3px 0;
    min-width: 26px;
}

.abs-cal th { background: #F3ECFB; color: #3B1D5E; font-weight: 600; }

.abs-cal .abs-cal-name {
    text-align: left;
    padding: 3px 10px;
    font-weight: 600;
    color: #3B1D5E;
    white-space: nowrap;
    min-width: 110px;
    background: #FAF7FD;
}

.abs-cal .abs-cal-weekend { background: #F5F2F9; }

.abs-cal-dot {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 5px;
    vertical-align: middle;
}

/* Pendiente de aprobar: mismo color pero hueco (borde) */
.abs-cal-dot.is-pending {
    background: transparent !important;
    border: 2.5px dashed #8A4FC7;
}

/* Totales del año */
.abs-totals th { font-size: .8rem; }

/* ===== Tabla ligera (sustituye al ExdDataGrid en listados de consulta) =====
   Mismo aspecto que la tabla de "Dias aprobados por tipo" (table table-sm de Bootstrap)
   con lo que el grid aportaba y hace falta: cabecera fija al hacer scroll, numeros a la
   derecha, texto largo recortado y fila seleccionable. Uso:
     <div class="hd-table-wrap [hd-table-scroll]"><table class="table table-sm hd-table">...
   ============================================================================ */
.hd-table-wrap {
    overflow-x: auto;
}

    /* Listas que pueden crecer mucho (Economicos): scroll propio en vez de paginas */
    .hd-table-wrap.hd-table-scroll {
        max-height: 460px;
        overflow-y: auto;
    }

.hd-table {
    margin-bottom: 0;
}

    .hd-table th {
        font-size: .8rem;
        white-space: nowrap;
        position: sticky;
        top: 0;
        z-index: 1;
        background: var(--bs-body-bg, #fff);
    }

    .hd-table td {
        vertical-align: middle;
        font-size: .85rem;
    }

    /* Importes y cantidades */
    .hd-table .hd-num {
        text-align: right;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }

    .hd-table .hd-center {
        text-align: center;
        white-space: nowrap;
    }

    /* Columna de texto largo: ocupa el sitio que sobre y se recorta (entero en el title) */
    .hd-table .hd-clip {
        width: 100%;
        max-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Botones de accion de la fila: zona de toque comoda en tablet */
    .hd-table .hd-actions {
        text-align: right;
        white-space: nowrap;
    }

    /* Filas que se seleccionan con un toque */
    .hd-table tr.hd-row-click {
        cursor: pointer;
    }

        .hd-table tr.hd-row-click:hover > * {
            --bs-table-bg-state: #FBF8FE;
        }

    .hd-table tr.on > * {
        --bs-table-bg-state: #F3ECFB;
    }

    .hd-table tr.on > td:first-child {
        box-shadow: inset 3px 0 0 var(--aurora-purple, #6C2FB0), inset 0 0 0 9999px #F3ECFB;
    }

/* Mientras se edita no se cambia de fila (lo que hacia Disabled en el grid) */
.hd-table-wrap.hd-table-disabled {
    pointer-events: none;
    opacity: .6;
}

/* Cabecera de la agenda cuando el empleado esta AUSENTE ese dia */
.agenda-res-header.is-absent img,
.agenda-res-header.is-absent .agenda-res-noPhoto {
    filter: grayscale(1);
    opacity: .55;
}

.agenda-res-header.is-absent .agenda-res-name { color: #B3403A; }

/* ===== Tickets pendientes de cobro (aparcados en el TPV) ===== */

/* Boton "Dejar pendiente" bajo el COBRAR: secundario, mismo ancho */
.tpv-park {
    width: 100%;
    margin-top: 8px;
    padding: 10px;
    border-radius: 12px;
    border: 1.5px solid #D9CBEE;
    background: #fff;
    color: #6C2FB0;
    font-weight: 600;
    cursor: pointer;
    transition: all .12s ease;
}

.tpv-park:hover:not(:disabled) { border-color: #6C2FB0; background: #FAF7FD; }

.tpv-park:disabled { opacity: .5; cursor: default; }

/* Boton de la bandeja de pendientes (cabecera del TPV) */
.tpv-parked-btn { border-style: dashed; }

/* Lista del popup de pendientes */
.pkd-list {
    max-height: 48vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pkd-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #FAF7FD;
    border: 1px solid #E6DEF2;
    border-radius: 10px;
    padding: 8px 12px;
    min-width: 0;
}

.pkd-time {
    font-weight: 700;
    color: #6C2FB0;
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
}

.pkd-body {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pkd-total { flex: 0 0 auto; color: #3B1D5E; }

/* ===== Modulo de FICHAJE ===== */
.tmc-clock {
    font-size: 1.6rem;
    color: #6C2FB0;
    font-variant-numeric: tabular-nums;
}

.tmc-grid .emp-selector-card { min-width: 150px; }

.tmc-panel { max-width: 560px; margin: 0 auto; }

/* Botones grandes ENTRADA / SALIDA */
.tmc-big-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 190px;
    padding: 26px 30px;
    border-radius: 16px;
    border: 2px solid transparent;
    font-size: 1.15rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform .1s ease;
}

.tmc-big-btn i { font-size: 2.1rem; }

.tmc-big-btn:active { transform: scale(.97); }

.tmc-big-btn.tmc-entry { background: linear-gradient(135deg, #2E7D43, #4CAF6D); color: #fff; }

.tmc-big-btn.tmc-exit { background: linear-gradient(135deg, #8A2F2A, #C96A64); color: #fff; }

.tmc-big-btn.tmc-secondary {
    background: #fff;
    border-color: #E6DEF2;
    color: #6E6579;
}

/* Confirmacion tras fichar */
.tmc-done .tmc-done-icon { font-size: 3.4rem; color: #2E7D43; }

.tmc-done .tmc-done-type { color: #6E6579; margin-bottom: 0; }

.tmc-done .tmc-done-time {
    font-size: 2.6rem;
    font-weight: 700;
    color: #3B1D5E;
    font-variant-numeric: tabular-nums;
}

/* Jornada en Mis fichajes (E/S compactos) */
.tmc-journey { font-variant-numeric: tabular-nums; color: #3B1D5E; }

/* Banner de la cadena de integridad */
.tmc-chain {
    border-radius: 10px;
    padding: 8px 16px;
    margin-bottom: 14px;
    font-weight: 600;
}

.tmc-chain-ok { background: #E3F2E6; border: 1px solid #BFDcc7; color: #2E7D43; }

.tmc-chain-broken { background: #FBE7E7; border: 1px solid #E7B3B0; color: #B3403A; }

/* ============================================================================
   PROVEEDORES (pantalla rehecha 10-09-2026): lista sencilla + ficha con
   pestañas. La lista carga todos los proveedores y filtra en memoria.
   ============================================================================ */

/* ----- Filtro y conmutador de vista ----- */
.prv-filterbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

/* min-width: con la lista estrecha, el selector de activos baja a otra linea en vez de
   dejar el cuadro de texto sin sitio */
.prv-filterbox {
    flex: 1;
    min-width: 170px;
}

/* Selector Todos / Activos / Inactivos (ActiveFilterSelector) */
.act-filter {
    flex: 0 0 auto;
}

    .act-filter .btn {
        font-size: 0.74rem;
        padding: 4px 10px;
    }

/* Avatar con foto (Empleados, Usuarios): la imagen llena el cuadrado redondeado */
.prv-ava img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.prv-ava.prv-ava-photo {
    background: #EFE6FA;
    overflow: hidden;
}

/* Pildora solo de consulta (historial de Apertura de caja): sin mano ni resalte */
.prv-item.prv-item-static {
    cursor: default;
}

    .prv-item.prv-item-static:hover {
        border-color: var(--aurora-line, #ECE3F5);
    }

/* Estado de la caja en el historial: candado verde cerrada, dorado abierta */
.cash-state-closed {
    color: #2E7D32;
    font-size: 1.15rem;
    flex: 0 0 auto;
}

.cash-state-open {
    color: var(--aurora-gold, #C9A227);
    font-size: 1.15rem;
    flex: 0 0 auto;
}

/* Cierre de caja: intento de cierre incorrecto (el correcto usa .cash-state-closed) */
.cash-close-invalid {
    color: #C62828;
    font-size: 1.15rem;
    flex: 0 0 auto;
}

/* Mis ausencias: la observacion larga se corta en una linea (entera en el title) */
.prv-item-txt small.abs-remarks {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mis ausencias: boton de cancelar una pendiente, con zona de toque comoda en tablet */
.abs-cancel {
    flex: 0 0 auto;
    font-size: 1.15rem;
    min-width: 32px;
    min-height: 32px;
}

/* Empleados: el comentario se lee entero (varias lineas), no se recorta */
.prv-item-txt small.emp-remark-text {
    white-space: pre-wrap;
    color: #4A3560;
    font-size: 0.8rem;
}

/* Lista de pildoras mientras se edita la ficha: no se cambia de elemento (Tabla maestra) */
.prv-list.prv-list-disabled {
    pointer-events: none;
    opacity: .6;
}

/* Usuarios: visto verde / aspa roja de activo en la lista */
.usr-active-yes {
    color: #2E7D32;
    font-size: 1.05rem;
}

.usr-active-no {
    color: #C62828;
    font-size: 1.05rem;
}

.prv-listsub {
    font-size: 0.74rem;
    color: #8A8199;
    margin: 0 2px 9px;
}

/* ----- Lista de proveedores ----- */
.prv-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.prv-item {
    background: #fff;
    border: 1px solid var(--aurora-line, #ECE3F5);
    border-radius: 11px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

    .prv-item:hover {
        border-color: var(--aurora-purple-light, #8A4FC7);
    }

    .prv-item.on {
        border-color: var(--aurora-purple, #6C2FB0);
        background: #FBF8FE;
        box-shadow: inset 3px 0 0 var(--aurora-purple, #6C2FB0);
    }

    /* Proveedor de baja: se ve, pero apagado */
    .prv-item.off {
        opacity: .55;
    }

.prv-ava {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: #EFE6FA;
    color: var(--aurora-purple, #6C2FB0);
    font-weight: 700;
    font-size: 0.72rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.prv-ava-lg {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    font-size: 0.95rem;
    background: linear-gradient(135deg, var(--aurora-purple, #6C2FB0), var(--aurora-purple-light, #8A4FC7));
    color: #fff;
}

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

    .prv-item-txt b {
        display: block;
        font-size: 0.84rem;
        color: #2A1640;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .prv-item-txt small {
        display: block;
        font-size: 0.72rem;
        color: #8A8199;
        margin-top: 1px;
    }

.prv-item-right {
    text-align: right;
    flex: 0 0 auto;
}

    .prv-item-right b {
        display: block;
        font-size: 0.8rem;
        color: #2A1640;
        font-variant-numeric: tabular-nums;
    }

    .prv-item-right small {
        font-size: 0.68rem;
        color: #8A8199;
    }

/* Punto de aviso de la lista */
.prv-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-left: 5px;
}

.prv-dot-bad { background: #B3403A; }

.prv-dot-warn { background: var(--aurora-gold, #C9A227); }

.prv-dot-ok { background: #D8D2E2; }

/* ----- Cabecera de la ficha ----- */
.prv-dhead {
    display: flex;
    align-items: center;
    gap: 13px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--aurora-line, #ECE3F5);
    margin-bottom: 14px;
}

.prv-dhead-main {
    flex: 1;
    min-width: 220px;
}

    .prv-dhead-main h4 {
        font-family: 'Playfair Display', Georgia, serif;
        color: var(--aurora-deep, #3B1D5E);
        margin-bottom: 2px;
    }

.prv-dhead-sub {
    font-size: 0.78rem;
    color: #8A8199;
}

.prv-dhead-tags {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 7px;
    flex-wrap: wrap;
}

/* ----- Avisos del resumen ----- */
.prv-alert {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--aurora-line, #ECE3F5);
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 0.8rem;
    margin-bottom: 7px;
}

.prv-alert-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.prv-alert-bad .prv-alert-dot { background: #B3403A; }

.prv-alert-warn .prv-alert-dot { background: var(--aurora-gold, #C9A227); }

.prv-alert-info .prv-alert-dot { background: #2B4C7E; }

.prv-alert-ok .prv-alert-dot { background: #2E7D43; }

.prv-lastorder {
    font-size: 0.78rem;
    color: #4A3560;
    margin-top: 10px;
}

/* ----- Sin proveedor seleccionado ----- */
.prv-empty {
    text-align: center;
    padding: 48px 20px;
    color: #8A8199;
}

    .prv-empty .bi {
        font-size: 2.6rem;
        color: #D8D2E2;
    }

    .prv-empty p {
        margin-top: 10px;
        margin-bottom: 0;
    }

/* La lista ocupa un tercio y la ficha dos tercios (el maestro-detalle horizontal del
   framework reparte 50/50). Selector atado a la estructura de la pantalla para no
   tocar los col-md-6 de los formularios de dentro. */
@media (min-width: 992px) {
    .prv-page > .row > .col-xl > .row > .col-md-6:first-child {
        flex: 0 0 34%;
        max-width: 34%;
    }

    .prv-page > .row > .col-xl > .row > .col-md-6:last-child {
        flex: 0 0 66%;
        max-width: 66%;
    }
}

/* Proveedores aprovecha mas pantalla: la plantilla corta el contenido en 1440 px y esta
   pantalla llega a 1880 (440 mas), conservando el aire lateral de la plantilla. El relleno
   de las tarjetas baja un poco. Solo afecta a esta pantalla (.prv-page). */
.prv-page {
    max-width: 1880px !important;
}

/* La barra superior acompaña a las pantallas anchas: si no, la barra de la pantalla
   (NavToolBar, montada encima con margenes negativos) se sale de ella y tapa el avatar */
.layout-page:has(.prv-page) #layout-navbar {
    max-width: 1880px !important;
}

    .prv-page .card-body {
        padding: 1.25rem;
    }

/* ===== Empresas: ficha por bloques (cabecera como Proveedores, secciones con titulo) ===== */

.cmp-head-logo {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    border: 1px solid var(--aurora-line, #ECE3F5);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: 0 0 auto;
}

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

.cmp-sec {
    background: #fff;
    border: 1px solid var(--aurora-line, #ECE3F5);
    border-radius: 14px;
    padding: 1.1rem 1.25rem 1.25rem;
    margin-bottom: 1rem;
}

.cmp-sec-muted {
    background: #FBF8FE;
}

.cmp-sec-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--aurora-deep, #3B1D5E);
    margin-bottom: 1rem;
}

    .cmp-sec-title .bi {
        color: var(--aurora-gold, #C9A227);
        font-size: 1rem;
    }

.cmp-logo-box {
    height: 140px;
    border: 1px dashed #D8CDE6;
    border-radius: 12px;
    background: #FBF8FE;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

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

/* ===== HORARIOS (Salon, Empleados, Cuadrante, Mi horario): prefijo sch- ===== */

.sch-title { color: var(--aurora-deep, #3B1D5E); font-family: 'Playfair Display', Georgia, serif; }
.sch-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 1rem; align-items: start; }
.sch-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
@media (max-width: 991.98px) { .sch-layout, .sch-two { grid-template-columns: minmax(0, 1fr); } }
.sch-stack { display: grid; gap: 1rem; min-width: 0; align-content: start; }
.sch-panel { background: #fff; border: 1px solid var(--aurora-line, #ECE3F5); border-radius: 16px; padding: 1rem; min-width: 0; }
.sch-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.sch-panel-head .sch-panel-title { margin-bottom: 0; }
.sch-panel-title { font-size: .76rem; letter-spacing: .07em; text-transform: uppercase; color: var(--aurora-deep, #3B1D5E); font-weight: 700; margin: 0 0 .75rem; }
.sch-hint { color: #7C718A; font-size: .82rem; margin: 0; }
.sch-date { font-family: 'Playfair Display', Georgia, serif; font-size: 1.1rem; color: var(--aurora-deep, #3B1D5E); }
.sch-date::first-letter { text-transform: uppercase; }

/* Tipos de jornada (pincel) */
.sch-types { display: grid; gap: .5rem; }
.sch-type { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; border: 1.5px solid var(--aurora-line, #ECE3F5); background: #fff; border-radius: 12px; padding: 9px 8px 9px 12px; cursor: pointer; }
.sch-type:hover { border-color: color-mix(in srgb, var(--c) 55%, #ECE3F5); }
.sch-type.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 9%, #fff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent); }
.sch-type-name { font-weight: 600; }
.sch-type-hours { font-size: .78rem; color: #7C718A; font-variant-numeric: tabular-nums; }
.sch-acts { grid-row: span 2; display: flex; gap: 2px; }
.sch-ibtn { border: 0; background: transparent; color: #7C718A; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; }
.sch-ibtn:hover { background: #F5EFFB; color: var(--aurora-deep, #3B1D5E); }
.sch-ibtn.trash:hover { background: #FBEAE8; color: #B3403A; }
.sch-dot { width: 14px; height: 14px; border-radius: 4px; background: var(--c); display: inline-block; flex: 0 0 auto; }
.sch-dot.closed { background: repeating-linear-gradient(135deg, #D9D2E2 0 3px, transparent 3px 6px); border: 1px solid #D9D2E2; }
.sch-dot.erase { background: transparent; border: 1.5px dashed #7C718A; }
.sch-bar { position: relative; height: 8px; border-radius: 4px; background: #F5EFFB; overflow: hidden; }
.sch-bar span { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: var(--c); }
.sch-add { margin-top: .6rem; border: 1.5px dashed var(--aurora-line, #ECE3F5); background: transparent; border-radius: 12px; padding: 8px; color: var(--aurora-purple, #6C2FB0); font-weight: 600; width: 100%; }
.sch-add:hover { border-color: var(--aurora-purple, #6C2FB0); }
.sch-msg { border-radius: 10px; padding: 8px 12px; font-size: .82rem; display: flex; gap: 8px; align-items: start; justify-content: space-between; margin-bottom: .6rem; }
.sch-msg.err { background: #FBEAE8; color: #B3403A; }
.sch-msg.ok { background: #F5EFFB; color: var(--aurora-deep, #3B1D5E); }
.sch-msg button { border: 0; background: transparent; color: inherit; font-weight: 700; }

/* Editor de tipo */
.sch-editor { border: 1px solid var(--aurora-line, #ECE3F5); background: #F5EFFB; border-radius: 12px; padding: 12px; display: grid; gap: 10px; margin-top: .6rem; }
.sch-editor label { font-size: .75rem; color: #7C718A; display: grid; gap: 4px; }
.sch-slot { display: grid; gap: 4px; }
.sch-slot > span { font-size: .75rem; color: #7C718A; }
.sch-slot-times { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.sch-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.sch-swatch { width: 24px; height: 24px; border-radius: 7px; border: 2px solid transparent; background: var(--c); }
.sch-swatch.on { border-color: #2A1A3D; }
.sch-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.sch-chip { border: 1px solid var(--aurora-line, #ECE3F5); background: #fff; border-radius: 999px; padding: 3px 10px; font-size: .78rem; }
.sch-chip:hover { border-color: var(--aurora-purple, #6C2FB0); color: var(--aurora-purple, #6C2FB0); }
.sch-toggle { display: flex !important; align-items: center; gap: 8px; font-size: .85rem; color: inherit !important; }

/* Semana normal */
.sch-week { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: .5rem; }
.sch-wday { border: 1px solid var(--aurora-line, #ECE3F5); border-left: 3px solid var(--c); border-radius: 12px; padding: 8px; display: grid; gap: 6px; min-width: 0; }
.sch-wday b { font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: #7C718A; }
.sch-wday .sch-bar { height: 6px; }

/* Calendario anual */
.sch-cal-head { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.sch-year { display: flex; align-items: center; gap: 6px; }
.sch-year strong { font-family: 'Playfair Display', Georgia, serif; font-size: 1.3rem; color: var(--aurora-deep, #3B1D5E); min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; }
.sch-year strong.sch-week-label { font-size: 1rem; min-width: 170px; }
.sch-icon-btn { border: 1px solid var(--aurora-line, #ECE3F5); background: #fff; border-radius: 8px; width: 32px; height: 32px; }
.sch-brush { display: flex; align-items: center; gap: 8px; background: #F5EFFB; border-radius: 999px; padding: 5px 12px 5px 8px; font-size: .84rem; }
.sch-months { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 14px 18px; user-select: none; }
.sch-month h3 { margin: 0 0 6px; font-size: .86rem; font-weight: 700; color: var(--aurora-deep, #3B1D5E); text-transform: capitalize; font-family: inherit; }
.sch-grid7 { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.sch-dow { font-size: .66rem; color: #7C718A; text-align: center; }
.sch-day { aspect-ratio: 1; border: 0; border-radius: 6px; font-size: .74rem; font-variant-numeric: tabular-nums; display: flex; align-items: center; justify-content: center; position: relative; padding: 0; background: color-mix(in srgb, var(--c) 20%, #fff); color: #2A1A3D; touch-action: manipulation; }
.sch-day.marked { background: var(--c); color: #fff; font-weight: 600; }
.sch-day.closed { background: repeating-linear-gradient(135deg, #D9D2E2 0 3px, transparent 3px 7px); color: #7C718A; }
.sch-day.closed.marked { box-shadow: inset 0 0 0 2px var(--c); color: #2A1A3D; font-weight: 600; }
.sch-day.absent { background: #E07A1F; color: #fff; font-weight: 600; }
.sch-day.today::after { content: ""; position: absolute; inset: -2px; border: 2px solid var(--aurora-gold, #C9A227); border-radius: 8px; pointer-events: none; }
.sch-day.sel { outline: 2px solid var(--aurora-deep, #3B1D5E); outline-offset: 1px; }
.sch-day:hover { outline: 2px solid var(--aurora-purple, #6C2FB0); outline-offset: 1px; }
.sch-day.empty { background: transparent; pointer-events: none; }
.sch-badge { position: absolute; top: -4px; right: -4px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px; background: #E07A1F; color: #fff; font-size: .58rem; font-weight: 700; line-height: 11px; border: 1.5px solid #fff; }
.sch-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: .9rem; font-size: .78rem; color: #7C718A; }
.sch-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sch-lg { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.sch-lg-closed { background: repeating-linear-gradient(135deg, #D9D2E2 0 3px, transparent 3px 6px); border: 1px solid #D9D2E2; }
.sch-lg-absent { background: #E07A1F; }
.sch-lg-badge { background: #E07A1F; border-radius: 50%; }
.sch-lg-today { box-shadow: inset 0 0 0 2px var(--aurora-gold, #C9A227); }

/* Dia seleccionado y resumen */
.sch-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: .76rem; font-weight: 600; background: #F5EFFB; }
.sch-tag.absent { background: #FFF1E2; color: #C2640F; }
.sch-tag.warn { background: #FBEAE8; color: #B3403A; }
.sch-ticks { display: flex; justify-content: space-between; font-size: .64rem; color: #7C718A; margin-left: 88px; font-variant-numeric: tabular-nums; }
.sch-tl-row { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 8px; align-items: center; font-size: .76rem; color: #7C718A; margin-top: 4px; }
.sch-timeline { height: 18px; border-radius: 6px; }
.sch-timeline span { top: 3px; bottom: 3px; }
.sch-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.sch-stat { background: #F5EFFB; border-radius: 12px; padding: 10px 12px; }
.sch-stat b { display: block; font-size: 1.25rem; color: var(--aurora-deep, #3B1D5E); font-variant-numeric: tabular-nums; }
.sch-stat span { font-size: .76rem; color: #7C718A; }
.sch-counts { display: grid; gap: 6px; margin-top: .75rem; }
.sch-count { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: .84rem; }
.sch-count em { font-style: normal; color: #7C718A; font-variant-numeric: tabular-nums; }

/* Empleado elegido */
.sch-person { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sch-person img { width: 52px; height: 52px; border-radius: 14px; object-fit: cover; }

/* Cuadrante */
.sch-table-wrap { overflow-x: auto; }
table.sch-rota { border-collapse: separate; border-spacing: 4px; min-width: 760px; width: 100%; }
.sch-rota th { font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: #7C718A; font-weight: 600; padding: 4px 6px; vertical-align: bottom; }
.sch-rota th span { display: block; text-transform: none; letter-spacing: 0; font-weight: 500; }
.sch-rota th.closedcol { color: #B3403A; }
.sch-rota th.todaycol { color: var(--aurora-deep, #3B1D5E); }
.sch-rota td { background: #F5EFFB; border-radius: 10px; padding: 7px 8px; font-size: .8rem; vertical-align: top; }
.sch-rota td.name { background: transparent; font-weight: 600; white-space: nowrap; }
.sch-rota td .h { font-variant-numeric: tabular-nums; display: block; }
.sch-rota td.off { background: repeating-linear-gradient(135deg, #D9D2E2 0 3px, transparent 3px 7px); color: #7C718A; }
.sch-rota td.changed { box-shadow: inset 0 0 0 1.5px var(--c); }
.sch-rota td.outside { box-shadow: inset 0 0 0 1.5px #B3403A; }
.sch-rota td.absent { background: #FFF1E2; color: #C2640F; font-weight: 600; }
.sch-rota tfoot td { background: transparent; font-size: .74rem; color: #7C718A; }

/* Mi horario: esa semana */
.sch-mine-week { display: grid; gap: 4px; }
.sch-mine-day { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 8px; font-size: .84rem; padding: 4px 6px; border-radius: 8px; }
.sch-mine-day b { text-transform: capitalize; }
.sch-mine-day.on { background: #F5EFFB; }

/* Agenda: horario propio del empleado en su cabecera y enlace a Horarios en los ajustes */
.agenda-res-header .agenda-res-hours { font-size: .7rem; color: #7C718A; font-weight: 500; }
.apt-schedule-link { display: flex; align-items: center; gap: 10px; background: #F5EFFB; border-radius: 12px; padding: 10px 12px; font-size: .85rem; color: var(--aurora-deep, #3B1D5E); }
.apt-schedule-link .btn { white-space: nowrap; flex: 0 0 auto; }
.apt-schedule-link .bi { color: var(--aurora-gold, #C9A227); font-size: 1.1rem; }

/* ===== LLAMADAS ENTRANTES (HairDress Connect) =====
   Panel flotante y NO modal abajo a la derecha (Components/Layout/IncomingCallsPanel.razor):
   la llamada mas reciente arriba, como mucho 3 a la vez y el resto en "+N". z-index 990: por
   encima de la pagina y por DEBAJO de los popups (los de Syncfusion empiezan en 1000), asi un
   popup abierto desde el panel no queda tapado. En tablet/movil ocupa todo el ancho y deja libre
   la barra inferior de botones (72 px). */
.hd-calls {
    position: fixed;
    right: 16px;
    bottom: 16px;
    width: 380px;
    max-width: calc(100vw - 32px);
    z-index: 990;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    pointer-events: none;
}

    .hd-calls > * {
        pointer-events: auto;
    }

.hd-call-card {
    width: 100%;
    background: var(--aurora-surface);
    border: 1px solid var(--aurora-line);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(59, 29, 94, .22);
    overflow: hidden;
}

.hd-call-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px 10px 14px;
    background: var(--aurora-deep);
    color: #fff;
}

.hd-call-icon {
    font-size: 1.3rem;
    color: var(--aurora-gold-light);
}

.hd-call-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    min-width: 0;
}

.hd-call-sub {
    color: #CDBDE3;
}

.hd-call-head .min-w-0 {
    min-width: 0;
}

.hd-call-btn {
    border: 0;
    background: transparent;
    color: #CDBDE3;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    flex: 0 0 auto;
}

    .hd-call-btn:hover {
        background: rgba(255, 255, 255, .12);
        color: #fff;
    }

.hd-call-tag {
    background: var(--aurora-gold);
    color: var(--aurora-deep);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: .7rem;
    font-weight: 700;
    flex: 0 0 auto;
}

.hd-call-inactive {
    background: #FBE7E7;
    color: #B3403A;
    border-radius: 999px;
    padding: 1px 8px;
    font-size: .7rem;
    font-weight: 700;
    flex: 0 0 auto;
}

.hd-call-body {
    padding: 10px 14px;
    max-height: 45vh;
    overflow-y: auto;
}

.hd-call-note {
    background: #FBF3DC;
    color: #9A7A12;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: .85rem;
    margin-bottom: 8px;
}

.hd-call-remarks {
    font-size: .85rem;
    color: #4A3A62;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hd-call-section {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--aurora-purple);
    margin: 6px 0 4px;
}

.hd-call-apt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
    font-size: .88rem;
    min-width: 0;
}

    .hd-call-apt:hover {
        background: #F1E9FB;
    }

    .hd-call-apt b {
        color: var(--aurora-deep);
        flex: 0 0 auto;
    }

    .hd-call-apt.past {
        color: #9A9AA5;
    }

.hd-call-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--aurora-line);
}

    .hd-call-actions:empty {
        display: none;
    }

.hd-call-pill {
    border: 0;
    border-radius: 999px;
    background: var(--aurora-deep);
    color: #fff;
    padding: 7px 16px;
    font-weight: 600;
    box-shadow: 0 8px 22px rgba(59, 29, 94, .25);
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .hd-call-pill .bi {
        color: var(--aurora-gold-light);
    }

.hd-call-more {
    background: var(--aurora-purple);
}

@media (max-width: 768px) {
    .hd-calls {
        left: 8px;
        right: 8px;
        width: auto;
        max-width: none;
        bottom: 80px;
    }
}

/* Icono del telefono en la barra superior (Components/Layout/NavBar.razor): ES el interruptor de
   los avisos de llamadas. Activos = telefono violeta; desactivados = tachado en rojo. */
.hd-calls-toggle {
    border: 0;
    background: transparent;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: var(--aurora-purple);
    transition: background-color .15s ease, color .15s ease;
}

    .hd-calls-toggle:hover {
        background: #F1E9FB;
    }

    .hd-calls-toggle.off {
        color: #C62828;
    }

        .hd-calls-toggle.off:hover {
            background: #FBEAEA;
        }

/* Aviso de la agenda "toca un hueco para dar cita a..." (cita pedida desde el panel) */
.agenda-banner.agenda-banner-pending {
    background: #F1E9FB;
    border-color: #D9C6F2;
    color: var(--aurora-deep);
}

/* ===== Ajustes > App movil (Components/Settings/MobileApp.razor) ===== */
.mob-title {
    color: var(--aurora-deep);
    font-weight: 600;
    margin-bottom: 12px;
}

    .mob-title .bi {
        color: var(--aurora-gold);
    }

.mob-subtitle {
    color: var(--aurora-purple);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.mob-steps {
    padding-left: 1.2rem;
    margin-bottom: 0;
    font-size: .9rem;
    color: #4A3A62;
}

    .mob-steps li + li {
        margin-top: 4px;
    }

/* QR: el de vincular a unos 260 px; el de descarga, mas pequeño. Caducado = atenuado */
.mob-qr {
    width: 260px;
    max-width: 100%;
    margin: 16px auto 0;
    padding: 10px;
    border: 1px solid var(--aurora-line);
    border-radius: 14px;
    background: #fff;
    transition: opacity .2s ease;
}

    .mob-qr img {
        width: 100%;
        height: auto;
        display: block;
        image-rendering: pixelated;
    }

    .mob-qr.expired {
        opacity: .2;
    }

.mob-qr-sm {
    width: 150px;
    margin: 0;
}

.mob-countdown {
    font-weight: 600;
    color: var(--aurora-deep);
}

.mob-paired {
    background: #E3F2E6;
    color: #2E7D43;
    border-radius: 10px;
    padding: 8px 12px;
    font-weight: 600;
    margin-top: 12px;
}

.mob-health {
    font-size: 1rem;
    margin-right: 6px;
}

.mob-warning {
    color: #9A7A12;
    margin-top: 2px;
}