/* Colores de filas para EventDays en el RelationManager */
tr.event-day-montaje > td {
    background-color: rgb(255 247 237) !important; /* orange-50 */
}

tr.event-day-evento > td {
    background-color: rgb(220 252 231) !important; /* green-100 */
}

tr.event-day-desmontaje > td {
    background-color: rgb(243 244 246) !important; /* gray-100 */
}

tr.event-day-montaje-evento > td {
    background-color: rgb(224 242 254) !important; /* sky-100 */
}

tr.event-day-almacen > td {
    background-color: rgb(243 232 255) !important; /* purple-100 */
}

:is(.dark) tr.event-day-montaje-evento > td {
    background-color: rgb(12 74 110 / 0.25) !important; /* sky-900/25 */
}

:is(.dark) tr.event-day-almacen > td {
    background-color: rgb(88 28 135 / 0.25) !important; /* purple-900/25 */
}

:is(.dark) tr.event-day-montaje > td {
    background-color: rgb(124 45 18 / 0.2) !important; /* orange-950/20 */
}

:is(.dark) tr.event-day-evento > td {
    background-color: rgb(20 83 45 / 0.25) !important; /* green-900/25 */
}

:is(.dark) tr.event-day-desmontaje > td {
    background-color: rgb(31 41 55 / 0.5) !important; /* gray-800/50 */
}

/* ============================================
   Reporte de Horas - Colaboradores
   ============================================ */

.report-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}
@media (min-width: 768px) {
    .report-stats-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.report-stat-card {
    padding: 1rem;
    border-radius: 0.75rem;
    background-color: #fff;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    ring-width: 1px;
    border: 1px solid rgb(17 24 39 / 0.05);
    text-align: center;
}
:is(.dark) .report-stat-card {
    background-color: rgb(17 24 39);
    border-color: rgb(255 255 255 / 0.1);
}
.report-stat-card .stat-value {
    /* Tamaño adaptable: no se desborda pero tampoco se ve diminuto en pantallas grandes. */
    font-size: clamp(1.125rem, 2vw, 1.875rem);
    line-height: 1.2;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.report-stat-card .stat-label {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    color: rgb(107 114 128);
}
:is(.dark) .report-stat-card .stat-label {
    color: rgb(156 163 175);
}

/* Pill tabs */
.report-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 0.75rem;
    background-color: rgb(243 244 246);
    border: 1px solid rgb(17 24 39 / 0.05);
}
:is(.dark) .report-tabs {
    background-color: rgb(255 255 255 / 0.05);
    border-color: rgb(255 255 255 / 0.1);
}
.report-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(75 85 99);
    white-space: nowrap;
    transition: all 0.15s ease;
    cursor: pointer;
    border: none;
    background: transparent;
}
.report-tab-btn:hover {
    color: rgb(17 24 39);
}
:is(.dark) .report-tab-btn {
    color: rgb(156 163 175);
}
:is(.dark) .report-tab-btn:hover {
    color: #fff;
}
.report-tab-btn.is-active {
    background-color: #fff;
    color: rgb(217 119 6); /* amber-600 (primary) */
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    border: 1px solid rgb(17 24 39 / 0.05);
}
:is(.dark) .report-tab-btn.is-active {
    background-color: rgb(17 24 39);
    color: rgb(251 191 36); /* amber-400 */
    border-color: rgb(255 255 255 / 0.1);
}
.report-tab-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    background-color: rgb(229 231 235);
    color: rgb(55 65 81);
}
:is(.dark) .report-tab-badge {
    background-color: rgb(255 255 255 / 0.1);
    color: rgb(209 213 219);
}
.report-tab-btn.is-active .report-tab-badge {
    background-color: rgb(254 243 199); /* amber-100 */
    color: rgb(180 83 9); /* amber-700 */
}
:is(.dark) .report-tab-btn.is-active .report-tab-badge {
    background-color: rgb(120 53 15 / 0.6); /* amber-900/60 */
    color: rgb(252 211 77); /* amber-300 */
}

/* Encabezado del colaborador */
.report-user-header {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
    border-radius: 0.75rem;
    background: linear-gradient(to right, rgb(255 251 235), #fff); /* amber-50 → white */
    border: 1px solid rgb(17 24 39 / 0.05);
}
:is(.dark) .report-user-header {
    background: linear-gradient(to right, rgb(120 53 15 / 0.2), rgb(17 24 39));
    border-color: rgb(255 255 255 / 0.1);
}
@media (min-width: 768px) {
    .report-user-header {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}
.report-user-header .field-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgb(107 114 128);
    margin-bottom: 0.25rem;
}
:is(.dark) .report-user-header .field-label {
    color: rgb(156 163 175);
}
.report-user-header .field-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: rgb(17 24 39);
}
:is(.dark) .report-user-header .field-value {
    color: #fff;
}
.report-user-header .field-value.is-primary { color: rgb(217 119 6); }
:is(.dark) .report-user-header .field-value.is-primary { color: rgb(251 191 36); }
.report-user-header .field-value.is-success { color: rgb(22 163 74); }
:is(.dark) .report-user-header .field-value.is-success { color: rgb(74 222 128); }
.report-user-header .field-value.is-muted { color: rgb(156 163 175); }

/* Tabla del reporte */
.report-table-wrapper {
    border-radius: 0.75rem;
    background-color: #fff;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    border: 1px solid rgb(17 24 39 / 0.05);
    overflow: hidden;
}
:is(.dark) .report-table-wrapper {
    background-color: rgb(17 24 39);
    border-color: rgb(255 255 255 / 0.1);
}
.report-table-wrapper .overflow-scroll-x {
    overflow-x: auto;
}
.report-table {
    width: 100%;
    border-collapse: collapse;
}
.report-table thead {
    background-color: rgb(249 250 251);
    border-bottom: 1px solid rgb(229 231 235);
}
:is(.dark) .report-table thead {
    background-color: rgb(255 255 255 / 0.03);
    border-color: rgb(255 255 255 / 0.05);
}
.report-table th {
    padding: 0.875rem 1.5rem;
    text-align: start;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgb(75 85 99);
}
:is(.dark) .report-table th {
    color: rgb(209 213 219);
}
.report-table th.text-end { text-align: end; }
.report-table tbody tr {
    border-bottom: 1px solid rgb(229 231 235);
    vertical-align: top;
}
:is(.dark) .report-table tbody tr {
    border-color: rgb(255 255 255 / 0.05);
}
.report-table tbody tr:hover {
    background-color: rgb(249 250 251);
}
:is(.dark) .report-table tbody tr:hover {
    background-color: rgb(255 255 255 / 0.02);
}
.report-table tbody tr.is-special {
    background-color: rgb(254 242 242 / 0.6); /* red-50 */
}
:is(.dark) .report-table tbody tr.is-special {
    background-color: rgb(127 29 29 / 0.15);
}
.report-table td {
    padding: 1rem 1.5rem;
}
.report-table td.text-end { text-align: end; }
.report-table td .date-main {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgb(17 24 39);
}
:is(.dark) .report-table td .date-main { color: #fff; }
.report-table td .date-meta {
    font-size: 0.75rem;
    color: rgb(107 114 128);
    margin-top: 0.125rem;
}
:is(.dark) .report-table td .date-meta { color: rgb(156 163 175); }
.report-table tr.is-special .date-main,
.report-table tr.is-special .date-meta { color: rgb(220 38 38); }
:is(.dark) .report-table tr.is-special .date-main,
:is(.dark) .report-table tr.is-special .date-meta { color: rgb(248 113 113); }

.report-table tfoot tr.total-row {
    background-color: rgb(255 251 235); /* amber-50 */
}
:is(.dark) .report-table tfoot tr.total-row {
    background-color: rgb(120 53 15 / 0.25);
}
.report-table tfoot tr.total-row td {
    font-size: 1rem;
    font-weight: 700;
    color: rgb(17 24 39);
}
:is(.dark) .report-table tfoot tr.total-row td { color: #fff; }
.report-table tfoot tr.bonus-row {
    background-color: rgb(240 253 244); /* green-50 */
}
:is(.dark) .report-table tfoot tr.bonus-row {
    background-color: rgb(20 83 45 / 0.25);
}
.report-table tfoot tr.summary-row {
    background-color: rgb(249 250 251);
}
:is(.dark) .report-table tfoot tr.summary-row {
    background-color: rgb(255 255 255 / 0.03);
}
.report-table tfoot tr.summary-row td {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgb(55 65 81);
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}
:is(.dark) .report-table tfoot tr.summary-row td { color: rgb(209 213 219); }

.report-table tfoot tr.grand-total-row {
    background: linear-gradient(to right, rgb(20 83 45 / 0.08), rgb(22 163 74 / 0.12));
    border-top: 2px solid rgb(22 163 74);
}
:is(.dark) .report-table tfoot tr.grand-total-row {
    background: linear-gradient(to right, rgb(20 83 45 / 0.2), rgb(20 83 45 / 0.35));
    border-top-color: rgb(74 222 128);
}
.report-table tfoot tr.grand-total-row td {
    font-size: 1.0625rem;
    font-weight: 800;
    color: rgb(22 101 52);
    padding-top: 1rem;
    padding-bottom: 1rem;
}
:is(.dark) .report-table tfoot tr.grand-total-row td {
    color: rgb(134 239 172);
}

/* Money badges */
.money-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 700;
}
.money-badge.is-neutral {
    background-color: rgb(229 231 235);
    color: rgb(31 41 55);
}
:is(.dark) .money-badge.is-neutral {
    background-color: rgb(255 255 255 / 0.08);
    color: rgb(229 231 235);
}
.money-badge.is-warning {
    background-color: rgb(254 243 199);
    color: rgb(146 64 14);
}
:is(.dark) .money-badge.is-warning {
    background-color: rgb(120 53 15 / 0.5);
    color: rgb(252 211 77);
}

.grand-total-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.25rem;
    border-radius: 0.5rem;
    font-size: 1.125rem;
    font-weight: 800;
    background-color: rgb(22 163 74);
    color: #fff;
    box-shadow: 0 1px 3px 0 rgb(22 163 74 / 0.35);
    /* Evita el salto a 2 líneas con montos de 4+ dígitos (S/ 9999.99) */
    white-space: nowrap;
    min-width: 9ch;
}
:is(.dark) .grand-total-badge {
    background-color: rgb(22 163 74);
    color: #fff;
}

/* Tarifas horarias del freelancer */
.freelancer-rates {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background-color: rgb(249 250 251);
    border: 1px solid rgb(229 231 235);
}
:is(.dark) .freelancer-rates {
    background-color: rgb(255 255 255 / 0.03);
    border-color: rgb(255 255 255 / 0.1);
}
.freelancer-rates .rates-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgb(107 114 128);
    margin-right: 0.25rem;
}
:is(.dark) .freelancer-rates .rates-label {
    color: rgb(156 163 175);
}
.rate-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.625rem;
    border-radius: 0.375rem;
    background-color: #fff;
    border: 1px solid rgb(229 231 235);
    font-size: 0.75rem;
}
:is(.dark) .rate-chip {
    background-color: rgb(17 24 39);
    border-color: rgb(255 255 255 / 0.1);
}
.rate-chip .rate-time {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: rgb(55 65 81);
    font-weight: 600;
}
:is(.dark) .rate-chip .rate-time {
    color: rgb(209 213 219);
}
.rate-chip .rate-amount {
    color: rgb(22 163 74);
    font-weight: 700;
    padding-left: 0.5rem;
    border-left: 1px solid rgb(229 231 235);
}
:is(.dark) .rate-chip .rate-amount {
    color: rgb(74 222 128);
    border-color: rgb(255 255 255 / 0.1);
}

/* Chips de rangos horarios */
.time-range-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.time-range-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 0.375rem;
    background-color: rgb(249 250 251);
    border: 1px solid rgb(229 231 235);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
}
:is(.dark) .time-range-chip {
    background-color: rgb(255 255 255 / 0.05);
    border-color: rgb(255 255 255 / 0.1);
}
.time-range-chip .t-in { color: rgb(22 163 74); font-weight: 600; }
:is(.dark) .time-range-chip .t-in { color: rgb(74 222 128); }
.time-range-chip .t-out { color: rgb(220 38 38); font-weight: 600; }
:is(.dark) .time-range-chip .t-out { color: rgb(248 113 113); }
.time-range-chip .t-sep {
    color: rgb(156 163 175);
    font-weight: 700;
}
.time-range-chip .t-duration {
    color: rgb(107 114 128);
    padding-left: 0.5rem;
    margin-left: 0.125rem;
    border-left: 1px solid rgb(229 231 235);
}
:is(.dark) .time-range-chip .t-duration {
    color: rgb(156 163 175);
    border-color: rgb(255 255 255 / 0.1);
}
.time-range-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.time-range-row .desc {
    font-size: 0.875rem;
    color: rgb(55 65 81);
}
:is(.dark) .time-range-row .desc { color: rgb(209 213 219); }

/* Badge de horas del día */
.hours-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 700;
}
.hours-badge.is-normal { background-color: rgb(220 252 231); color: rgb(21 128 61); }
.hours-badge.is-medium { background-color: rgb(254 243 199); color: rgb(180 83 9); }
.hours-badge.is-high { background-color: rgb(254 226 226); color: rgb(185 28 28); }
:is(.dark) .hours-badge.is-normal { background-color: rgb(20 83 45 / 0.5); color: rgb(134 239 172); }
:is(.dark) .hours-badge.is-medium { background-color: rgb(120 53 15 / 0.5); color: rgb(253 224 71); }
:is(.dark) .hours-badge.is-high { background-color: rgb(127 29 29 / 0.5); color: rgb(252 165 165); }

.hours-total-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    border-radius: 0.375rem;
    font-size: 1rem;
    font-weight: 800;
    background-color: rgb(254 243 199); /* amber-100 */
    color: rgb(146 64 14); /* amber-800 */
}
:is(.dark) .hours-total-badge {
    background-color: rgb(120 53 15 / 0.6);
    color: rgb(252 211 77);
}

.bonus-total-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    border-radius: 0.375rem;
    font-size: 1rem;
    font-weight: 800;
    background-color: rgb(220 252 231); /* green-100 */
    color: rgb(22 101 52); /* green-800 */
}
:is(.dark) .bonus-total-badge {
    background-color: rgb(20 83 45 / 0.6);
    color: rgb(134 239 172);
}

/* Tag Evento/PopUp */
.type-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
}
.type-tag.is-event { background-color: rgb(219 234 254); color: rgb(29 78 216); }
.type-tag.is-popup { background-color: rgb(254 243 199); color: rgb(180 83 9); }
:is(.dark) .type-tag.is-event { background-color: rgb(30 58 138 / 0.5); color: rgb(147 197 253); }
:is(.dark) .type-tag.is-popup { background-color: rgb(120 53 15 / 0.5); color: rgb(253 224 71); }

/* Estado vacío */
.report-empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
}
.report-empty-state .icon-wrap {
    margin: 0 auto;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 9999px;
    background-color: rgb(255 251 235); /* amber-50 */
    display: flex;
    align-items: center;
    justify-content: center;
}
:is(.dark) .report-empty-state .icon-wrap {
    background-color: rgb(120 53 15 / 0.3);
}
.report-empty-state .icon-wrap svg {
    width: 1.75rem;
    height: 1.75rem;
    color: rgb(217 119 6);
}
:is(.dark) .report-empty-state .icon-wrap svg {
    color: rgb(251 191 36);
}
.report-empty-state .empty-title {
    margin-top: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: rgb(17 24 39);
}
:is(.dark) .report-empty-state .empty-title { color: #fff; }
.report-empty-state .empty-desc {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: rgb(107 114 128);
    max-width: 28rem;
    margin-left: auto;
    margin-right: auto;
}
:is(.dark) .report-empty-state .empty-desc { color: rgb(156 163 175); }

/* Desglose de bonos */
.bonus-breakdown {
    margin-top: 1.25rem;
    border-radius: 0.75rem;
    background-color: #fff;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    border: 1px solid rgb(17 24 39 / 0.05);
    overflow: hidden;
}
:is(.dark) .bonus-breakdown {
    background-color: rgb(17 24 39);
    border-color: rgb(255 255 255 / 0.1);
}
.bonus-breakdown .section-title {
    padding: 0.75rem 1.5rem;
    background-color: rgb(249 250 251);
    border-bottom: 1px solid rgb(229 231 235);
    font-size: 0.875rem;
    font-weight: 600;
    color: rgb(17 24 39);
}
:is(.dark) .bonus-breakdown .section-title {
    background-color: rgb(255 255 255 / 0.03);
    border-color: rgb(255 255 255 / 0.05);
    color: #fff;
}
.bonus-breakdown td.rule-name {
    font-weight: 600;
    color: rgb(17 24 39);
}
:is(.dark) .bonus-breakdown td.rule-name { color: #fff; }
.bonus-breakdown td.rule-trigger {
    color: rgb(107 114 128);
    font-size: 0.8125rem;
}
:is(.dark) .bonus-breakdown td.rule-trigger { color: rgb(156 163 175); }
.bonus-breakdown td.rule-amount {
    text-align: end;
    font-weight: 700;
    color: rgb(22 163 74);
}
:is(.dark) .bonus-breakdown td.rule-amount { color: rgb(74 222 128); }

/* ============================================
   Event Operations Hub (cabina del Event)
   ============================================ */

.evt-hub {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.evt-hub-card {
    border-radius: 0.75rem;
    border: 1px solid rgb(229 231 235);
    background-color: #fff;
    overflow: hidden;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04);
}
:is(.dark) .evt-hub-card {
    background-color: rgb(17 24 39);
    border-color: rgb(255 255 255 / 0.1);
}

.evt-hub-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgb(229 231 235);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}
:is(.dark) .evt-hub-header {
    border-color: rgb(255 255 255 / 0.08);
}
.evt-hub-header h3 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: rgb(17 24 39);
    margin: 0;
}
:is(.dark) .evt-hub-header h3 { color: #fff; }
.evt-hub-header p {
    font-size: 0.75rem;
    color: rgb(107 114 128);
    margin: 0.25rem 0 0;
    max-width: 36rem;
}
:is(.dark) .evt-hub-header p { color: rgb(156 163 175); }
.evt-hub-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    background-color: rgb(249 250 251);
    border: 1px solid rgb(229 231 235);
    font-size: 0.8125rem;
    color: rgb(55 65 81);
    white-space: nowrap;
}
:is(.dark) .evt-hub-pill {
    background-color: rgb(255 255 255 / 0.05);
    border-color: rgb(255 255 255 / 0.1);
    color: rgb(209 213 219);
}
.evt-hub-pill svg { width: 1rem; height: 1rem; flex-shrink: 0; }

/* Empty state */
.evt-hub-empty {
    padding: 2.5rem 1rem;
    text-align: center;
}
.evt-hub-empty-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    background-color: rgb(255 251 235);
    color: rgb(217 119 6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
}
:is(.dark) .evt-hub-empty-icon {
    background-color: rgb(120 53 15 / 0.3);
    color: rgb(252 211 77);
}
.evt-hub-empty h4 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: rgb(17 24 39);
    margin: 0;
}
:is(.dark) .evt-hub-empty h4 { color: #fff; }
.evt-hub-empty p {
    font-size: 0.875rem;
    color: rgb(107 114 128);
    margin: 0.375rem auto 0;
    max-width: 24rem;
}
:is(.dark) .evt-hub-empty p { color: rgb(156 163 175); }

/* Barra de tabs (una por EventDay) */
.evt-hub-tabsbar {
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid rgb(229 231 235);
    background-color: rgb(249 250 251);
}
:is(.dark) .evt-hub-tabsbar {
    border-color: rgb(255 255 255 / 0.08);
    background-color: rgb(255 255 255 / 0.02);
}
.evt-hub-tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}
.evt-hub-tabs::-webkit-scrollbar { height: 6px; }
.evt-hub-tabs::-webkit-scrollbar-thumb { background: rgb(209 213 219); border-radius: 3px; }

.evt-hub-tab {
    flex-shrink: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
    padding: 0.5rem 0.875rem;
    border-radius: 0.5rem;
    border: 1px solid rgb(229 231 235);
    background-color: #fff;
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgb(55 65 81);
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
    line-height: 1.2;
    min-width: 7rem;
}
.evt-hub-tab:hover {
    background-color: rgb(243 244 246);
    color: rgb(17 24 39);
}
:is(.dark) .evt-hub-tab {
    background-color: rgb(17 24 39);
    border-color: rgb(255 255 255 / 0.1);
    color: rgb(209 213 219);
}
:is(.dark) .evt-hub-tab:hover {
    background-color: rgb(255 255 255 / 0.05);
    color: #fff;
}
.evt-hub-tab .when {
    font-weight: 600;
    font-size: 0.8125rem;
    white-space: nowrap;
}
.evt-hub-tab .type {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.75;
    font-weight: 500;
}
.evt-hub-tab.is-active .type {
    opacity: 0.95;
}

/* Variantes por tipo */
.evt-hub-tab--montaje { color: rgb(180 83 9); border-color: rgb(253 230 138); }
.evt-hub-tab--montaje:hover { background-color: rgb(255 251 235); }
.evt-hub-tab--montaje.is-active { background-color: rgb(245 158 11); border-color: rgb(245 158 11); color: #fff; }
:is(.dark) .evt-hub-tab--montaje { color: rgb(252 211 77); border-color: rgb(120 53 15); }
:is(.dark) .evt-hub-tab--montaje.is-active { background-color: rgb(245 158 11); border-color: rgb(245 158 11); color: #fff; }

.evt-hub-tab--evento { color: rgb(21 128 61); border-color: rgb(187 247 208); }
.evt-hub-tab--evento:hover { background-color: rgb(240 253 244); }
.evt-hub-tab--evento.is-active { background-color: rgb(22 163 74); border-color: rgb(22 163 74); color: #fff; }
:is(.dark) .evt-hub-tab--evento { color: rgb(134 239 172); border-color: rgb(20 83 45); }
:is(.dark) .evt-hub-tab--evento.is-active { background-color: rgb(22 163 74); border-color: rgb(22 163 74); color: #fff; }

.evt-hub-tab--desmontaje { color: rgb(55 65 81); border-color: rgb(229 231 235); }
.evt-hub-tab--desmontaje:hover { background-color: rgb(243 244 246); }
.evt-hub-tab--desmontaje.is-active { background-color: rgb(75 85 99); border-color: rgb(75 85 99); color: #fff; }
:is(.dark) .evt-hub-tab--desmontaje { color: rgb(209 213 219); border-color: rgb(75 85 99); }
:is(.dark) .evt-hub-tab--desmontaje.is-active { background-color: rgb(107 114 128); border-color: rgb(107 114 128); color: #fff; }

.evt-hub-tab--montaje-evento { color: rgb(3 105 161); border-color: rgb(186 230 253); }
.evt-hub-tab--montaje-evento:hover { background-color: rgb(240 249 255); }
.evt-hub-tab--montaje-evento.is-active { background-color: rgb(14 165 233); border-color: rgb(14 165 233); color: #fff; }
:is(.dark) .evt-hub-tab--montaje-evento { color: rgb(125 211 252); border-color: rgb(12 74 110); }
:is(.dark) .evt-hub-tab--montaje-evento.is-active { background-color: rgb(14 165 233); border-color: rgb(14 165 233); color: #fff; }

.evt-hub-tab--almacen { color: rgb(126 34 206); border-color: rgb(233 213 255); }
.evt-hub-tab--almacen:hover { background-color: rgb(250 245 255); }
.evt-hub-tab--almacen.is-active { background-color: rgb(147 51 234); border-color: rgb(147 51 234); color: #fff; }
:is(.dark) .evt-hub-tab--almacen { color: rgb(216 180 254); border-color: rgb(88 28 135); }
:is(.dark) .evt-hub-tab--almacen.is-active { background-color: rgb(147 51 234); border-color: rgb(147 51 234); color: #fff; }

/* Contenido principal del EventDay */
.evt-hub-body {
    padding: 1.25rem;
}

/* Resumen rápido del EventDay (4 columnas) */
.evt-hub-summary {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    border-radius: 0.5rem;
    background-color: rgb(249 250 251);
    border: 1px solid rgb(229 231 235);
}
@media (min-width: 640px) {
    .evt-hub-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .evt-hub-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
:is(.dark) .evt-hub-summary {
    background-color: rgb(255 255 255 / 0.03);
    border-color: rgb(255 255 255 / 0.08);
}
.evt-hub-summary .label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgb(107 114 128);
}
:is(.dark) .evt-hub-summary .label { color: rgb(156 163 175); }
.evt-hub-summary .value {
    margin-top: 0.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: rgb(17 24 39);
}
:is(.dark) .evt-hub-summary .value { color: #fff; }

/* Sub-tabs (Información, Colaboradores, Freelancers) */
.evt-hub-subtabs {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    border-bottom: 1px solid rgb(229 231 235);
    margin-bottom: 1rem;
    overflow-x: auto;
}
:is(.dark) .evt-hub-subtabs { border-color: rgb(255 255 255 / 0.08); }

.evt-hub-subtab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(107 114 128);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.12s ease, border-color 0.12s ease;
}
.evt-hub-subtab:hover { color: rgb(17 24 39); }
:is(.dark) .evt-hub-subtab:hover { color: #fff; }
.evt-hub-subtab svg { width: 1rem; height: 1rem; }
.evt-hub-subtab.is-active {
    color: rgb(217 119 6);
    border-bottom-color: rgb(245 158 11);
}
:is(.dark) .evt-hub-subtab.is-active {
    color: rgb(251 191 36);
    border-bottom-color: rgb(245 158 11);
}
.evt-hub-subtab .count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    border-radius: 9999px;
    background-color: rgb(229 231 235);
    color: rgb(55 65 81);
    font-size: 0.6875rem;
    font-weight: 600;
}
:is(.dark) .evt-hub-subtab .count {
    background-color: rgb(255 255 255 / 0.1);
    color: rgb(209 213 219);
}
.evt-hub-subtab.is-active .count {
    background-color: rgb(254 243 199);
    color: rgb(146 64 14);
}
:is(.dark) .evt-hub-subtab.is-active .count {
    background-color: rgb(120 53 15 / 0.6);
    color: rgb(252 211 77);
}

/* Caja interior de detalle (Información) */
.evt-hub-section {
    border-radius: 0.5rem;
    border: 1px solid rgb(229 231 235);
    overflow: hidden;
}
:is(.dark) .evt-hub-section { border-color: rgb(255 255 255 / 0.08); }
.evt-hub-section-head {
    padding: 0.625rem 1rem;
    background-color: rgb(249 250 251);
    border-bottom: 1px solid rgb(229 231 235);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}
:is(.dark) .evt-hub-section-head {
    background-color: rgb(255 255 255 / 0.03);
    border-color: rgb(255 255 255 / 0.08);
}
.evt-hub-section-head h4 {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgb(17 24 39);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
:is(.dark) .evt-hub-section-head h4 { color: #fff; }
.evt-hub-section-body {
    padding: 1.25rem 1.5rem;
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.25rem 2rem;
}
@media (min-width: 768px) {
    .evt-hub-section-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .evt-hub-section-body .col-full { grid-column: span 2 / span 2; }
}

/* Sub-grid de Estructura / Orden / Notas */
.evt-hub-info-blocks {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.25rem 2rem;
    margin-top: 0.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgb(229 231 235);
}
@media (min-width: 768px) {
    .evt-hub-info-blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
:is(.dark) .evt-hub-info-blocks { border-top-color: rgb(255 255 255 / 0.08); }
.evt-hub-info-block {
    padding: 0.875rem 1rem;
    border-radius: 0.5rem;
    background-color: rgb(249 250 251);
    border: 1px solid rgb(229 231 235);
}
:is(.dark) .evt-hub-info-block {
    background-color: rgb(255 255 255 / 0.02);
    border-color: rgb(255 255 255 / 0.08);
}
.evt-hub-section-body .label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgb(107 114 128);
    margin-bottom: 0.25rem;
}
:is(.dark) .evt-hub-section-body .label { color: rgb(156 163 175); }
.evt-hub-section-body .value {
    font-size: 0.875rem;
    color: rgb(17 24 39);
}
:is(.dark) .evt-hub-section-body .value { color: rgb(229 231 235); }

/* Badges de tipo */
.evt-hub-type-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}
.evt-hub-type-pill--montaje { background-color: rgb(254 243 199); color: rgb(146 64 14); }
.evt-hub-type-pill--evento { background-color: rgb(220 252 231); color: rgb(21 128 61); }
.evt-hub-type-pill--desmontaje { background-color: rgb(229 231 235); color: rgb(55 65 81); }
.evt-hub-type-pill--montaje-evento { background-color: rgb(224 242 254); color: rgb(7 89 133); }
.evt-hub-type-pill--almacen { background-color: rgb(243 232 255); color: rgb(107 33 168); }
:is(.dark) .evt-hub-type-pill--montaje { background-color: rgb(120 53 15 / 0.6); color: rgb(252 211 77); }
:is(.dark) .evt-hub-type-pill--evento { background-color: rgb(20 83 45 / 0.6); color: rgb(134 239 172); }
:is(.dark) .evt-hub-type-pill--desmontaje { background-color: rgb(255 255 255 / 0.1); color: rgb(209 213 219); }
:is(.dark) .evt-hub-type-pill--montaje-evento { background-color: rgb(12 74 110 / 0.6); color: rgb(125 211 252); }
:is(.dark) .evt-hub-type-pill--almacen { background-color: rgb(88 28 135 / 0.6); color: rgb(216 180 254); }

/* Botones de acción */
.evt-hub-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.12s ease;
    border: none;
    cursor: pointer;
}
.evt-hub-btn svg { width: 0.9375rem; height: 0.9375rem; }
.evt-hub-btn--primary { background-color: rgb(217 119 6); color: #fff; }
.evt-hub-btn--primary:hover { background-color: rgb(180 83 9); color: #fff; }
.evt-hub-btn--secondary { background-color: rgb(243 244 246); color: rgb(55 65 81); }
.evt-hub-btn--secondary:hover { background-color: rgb(229 231 235); }
.evt-hub-btn--purple { background-color: rgb(147 51 234); color: #fff; }
.evt-hub-btn--purple:hover { background-color: rgb(126 34 206); color: #fff; }
.evt-hub-btn--blue { background-color: rgb(37 99 235); color: #fff; }
.evt-hub-btn--blue:hover { background-color: rgb(29 78 216); color: #fff; }
:is(.dark) .evt-hub-btn--secondary {
    background-color: rgb(255 255 255 / 0.06);
    color: rgb(229 231 235);
}
:is(.dark) .evt-hub-btn--secondary:hover { background-color: rgb(255 255 255 / 0.12); }

/* Tabla de colaboradores/freelancers */
.evt-hub-table-wrap {
    border-radius: 0.5rem;
    border: 1px solid rgb(229 231 235);
    overflow: hidden;
    overflow-x: auto;
}
:is(.dark) .evt-hub-table-wrap { border-color: rgb(255 255 255 / 0.08); }
.evt-hub-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.evt-hub-table thead {
    background-color: rgb(249 250 251);
}
:is(.dark) .evt-hub-table thead { background-color: rgb(255 255 255 / 0.03); }
.evt-hub-table th {
    text-align: left;
    padding: 0.625rem 0.875rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgb(107 114 128);
    border-bottom: 1px solid rgb(229 231 235);
}
:is(.dark) .evt-hub-table th {
    color: rgb(156 163 175);
    border-color: rgb(255 255 255 / 0.08);
}
.evt-hub-table th.text-end { text-align: right; }
.evt-hub-table tbody tr {
    border-bottom: 1px solid rgb(229 231 235);
}
:is(.dark) .evt-hub-table tbody tr { border-color: rgb(255 255 255 / 0.06); }
.evt-hub-table tbody tr:hover { background-color: rgb(249 250 251); }
:is(.dark) .evt-hub-table tbody tr:hover { background-color: rgb(255 255 255 / 0.02); }
.evt-hub-table tbody tr:last-child { border-bottom: none; }
.evt-hub-table td {
    padding: 0.625rem 0.875rem;
    color: rgb(17 24 39);
}
:is(.dark) .evt-hub-table td { color: rgb(229 231 235); }
.evt-hub-table td.text-end { text-align: right; }
.evt-hub-table td .name { font-weight: 600; color: rgb(17 24 39); }
:is(.dark) .evt-hub-table td .name { color: #fff; }
.evt-hub-table td .meta { font-size: 0.75rem; color: rgb(107 114 128); margin-top: 0.125rem; }
:is(.dark) .evt-hub-table td .meta { color: rgb(156 163 175); }
.evt-hub-table td .resp-tag { font-size: 0.6875rem; font-weight: 600; color: rgb(217 119 6); margin-top: 0.125rem; }
:is(.dark) .evt-hub-table td .resp-tag { color: rgb(251 191 36); }
.evt-hub-table td.mono { font-family: ui-monospace, monospace; color: rgb(55 65 81); }
:is(.dark) .evt-hub-table td.mono { color: rgb(209 213 219); }
.evt-hub-table td .status-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 500;
}
.status-pill--pending { background-color: rgb(229 231 235); color: rgb(55 65 81); }
.status-pill--in-progress { background-color: rgb(219 234 254); color: rgb(29 78 216); }
.status-pill--paused { background-color: rgb(229 231 235); color: rgb(55 65 81); }
.status-pill--pending-confirmation,
.status-pill--verifying { background-color: rgb(254 243 199); color: rgb(146 64 14); }
.status-pill--confirmed { background-color: rgb(220 252 231); color: rgb(21 128 61); }
.status-pill--rejected,
.status-pill--invalid { background-color: rgb(254 226 226); color: rgb(153 27 27); }
:is(.dark) .status-pill--pending,
:is(.dark) .status-pill--paused {
    background-color: rgb(255 255 255 / 0.08);
    color: rgb(209 213 219);
}
:is(.dark) .status-pill--in-progress {
    background-color: rgb(30 58 138 / 0.5);
    color: rgb(147 197 253);
}
:is(.dark) .status-pill--pending-confirmation,
:is(.dark) .status-pill--verifying {
    background-color: rgb(120 53 15 / 0.5);
    color: rgb(252 211 77);
}
:is(.dark) .status-pill--confirmed {
    background-color: rgb(20 83 45 / 0.5);
    color: rgb(134 239 172);
}
:is(.dark) .status-pill--rejected,
:is(.dark) .status-pill--invalid {
    background-color: rgb(127 29 29 / 0.3);
    color: rgb(252 165 165);
}
.evt-hub-table .row-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
}
.evt-hub-table .icon-btn {
    padding: 0.375rem;
    border-radius: 0.375rem;
    color: rgb(107 114 128);
    background: transparent;
    border: none;
    cursor: pointer;
    display: inline-flex;
    text-decoration: none;
}
.evt-hub-table .icon-btn:hover { background-color: rgb(243 244 246); color: rgb(17 24 39); }
:is(.dark) .evt-hub-table .icon-btn:hover { background-color: rgb(255 255 255 / 0.06); color: #fff; }
.evt-hub-table .icon-btn svg { width: 1rem; height: 1rem; }
.evt-hub-table .icon-btn--amber { color: rgb(217 119 6); }
.evt-hub-table .icon-btn--amber:hover { background-color: rgb(255 251 235); color: rgb(146 64 14); }
.evt-hub-table .icon-btn--red { color: rgb(220 38 38); }
.evt-hub-table .icon-btn--red:hover { background-color: rgb(254 226 226); color: rgb(153 27 27); }
:is(.dark) .evt-hub-table .icon-btn--red:hover { background-color: rgb(127 29 29 / 0.3); color: rgb(252 165 165); }
.evt-hub-table .star-cell { width: 1.5rem; }
.evt-hub-table .star-cell svg { width: 1rem; height: 1rem; color: rgb(245 158 11); }

/* Empty state dentro de tablas */
.evt-hub-table-empty {
    padding: 2rem 1rem;
    text-align: center;
    border: 1px dashed rgb(209 213 219);
    border-radius: 0.5rem;
    color: rgb(107 114 128);
    font-size: 0.875rem;
}
:is(.dark) .evt-hub-table-empty {
    border-color: rgb(75 85 99);
    color: rgb(156 163 175);
}

/* Wrapper de sub-tab body */
.evt-hub-subtab-body {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}
.evt-hub-subtab-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.evt-hub-subtab-toolbar h4 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: rgb(17 24 39);
    margin: 0;
}
:is(.dark) .evt-hub-subtab-toolbar h4 { color: #fff; }
.evt-hub-subtab-toolbar .meta {
    font-size: 0.75rem;
    color: rgb(107 114 128);
    margin: 0;
}
:is(.dark) .evt-hub-subtab-toolbar .meta { color: rgb(156 163 175); }

/* Chips de viáticos otorgados (informativos) en el reporte */
.viaticos-info {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    background-color: rgb(255 251 235);
    border: 1px dashed rgb(253 230 138);
}
:is(.dark) .viaticos-info {
    background-color: rgb(120 53 15 / 0.15);
    border-color: rgb(146 64 14 / 0.5);
}
.viaticos-info .loc-label {
    color: rgb(146 64 14);
}
:is(.dark) .viaticos-info .loc-label { color: rgb(252 211 77); }
.via-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
    background-color: #fff;
    border: 1px solid rgb(229 231 235);
}
.via-chip--breakfast { color: rgb(180 83 9); border-color: rgb(253 230 138); background-color: rgb(255 251 235); }
.via-chip--lunch { color: rgb(21 128 61); border-color: rgb(187 247 208); background-color: rgb(240 253 244); }
.via-chip--dinner { color: rgb(124 58 237); border-color: rgb(221 214 254); background-color: rgb(245 243 255); }
:is(.dark) .via-chip { background-color: rgb(17 24 39); border-color: rgb(255 255 255 / 0.1); }
:is(.dark) .via-chip--breakfast { color: rgb(252 211 77); border-color: rgb(120 53 15); background-color: rgb(120 53 15 / 0.25); }
:is(.dark) .via-chip--lunch { color: rgb(134 239 172); border-color: rgb(20 83 45); background-color: rgb(20 83 45 / 0.25); }
:is(.dark) .via-chip--dinner { color: rgb(196 181 253); border-color: rgb(76 29 149); background-color: rgb(76 29 149 / 0.25); }
.via-equiv {
    font-size: 0.6875rem;
    color: rgb(107 114 128);
    margin-left: auto;
}
:is(.dark) .via-equiv { color: rgb(156 163 175); }
.via-equiv strong { color: rgb(146 64 14); }
:is(.dark) .via-equiv strong { color: rgb(252 211 77); }

/* Fila de chips de viáticos en el desglose del reporte de asistencia */
.via-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

/* Nota informativa dentro del pie del reporte de asistencia.
   Antes era display:flex y la tipografía + <strong> interno hacían que el
   texto se viera "en columnas" porque la celda estiraba el contenedor y
   los strong rompían el flujo. Ahora es un párrafo fluido (block) con
   line-height legible. */
.report-note {
    display: block;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background-color: rgb(255 251 235);
    border: 1px solid rgb(253 230 138);
    color: rgb(146 64 14);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.55;
    text-align: start;
}
.report-note strong {
    font-weight: 700;
}
:is(.dark) .report-note {
    background-color: rgb(120 53 15 / 0.25);
    border-color: rgb(120 53 15);
    color: rgb(252 211 77);
}

/* Tabla de desglose de viáticos: reutiliza estilos de bonus-breakdown */
.viaticos-breakdown { margin-top: 1rem; }

/* ============================================================================
   Branding Vilumin — paleta del panel admin
   ----------------------------------------------------------------------------
   Color primario corporativo (mismo --vlm-primary que la web pública).
   Se define a nivel root para poder referenciarlo desde overrides puntuales.
   ============================================================================ */
:root {
    --vlm-brand: #F6501A;
    --vlm-brand-hover: #ff6a35;
    --vlm-brand-dark: #D94A1E;
    --vlm-brand-contrast: #ffffff;

    /* ----------------------------------------------------------------------
       Sobrescritura de la paleta `--primary-*` que Filament 4 genera
       automáticamente a partir de `Color::hex('#F6501A')`. El algoritmo de
       Filament deja el tono 600 (que es el que usan los botones filled vía
       `--bg: var(--color-600)`) ligeramente más oscuro y desaturado, lo
       que se ve como un naranja terracota apagado en vez del naranja vivo
       de marca.

       Anclamos 600 al brand exacto y derivamos el resto (50…950) alrededor
       para que badges, anillos de focus, links y demás componentes Filament
       que usan estos tonos queden coherentes con la web pública.
       ---------------------------------------------------------------------- */
    --primary-50:  #fff5f0;
    --primary-100: #ffe7da;
    --primary-200: #ffc7ab;
    --primary-300: #ffa57b;
    --primary-400: #ff7a47;
    --primary-500: #ff6a35; /* hover light / brand-hover */
    --primary-600: #F6501A; /* BRAND — botones filled */
    --primary-700: #D94A1E; /* brand-dark / hover dark */
    --primary-800: #B33C18;
    --primary-900: #8C2F12;
    --primary-950: #5C1F0C;
}

/* ----------------------------------------------------------------------------
   Sidebar — item de menú seleccionado en color primario con texto blanco.

   Estructura real en Filament 4:
     <li class="fi-sidebar-item fi-active">
       <a class="fi-sidebar-item-btn">
         <svg class="fi-icon" />               ← ícono (clase genérica fi-icon)
         <span class="fi-sidebar-item-label">  ← texto
       </a>
     </li>

   Por defecto Filament pinta el item activo con `background: var(--gray-100)`
   y el label/ícono con `var(--primary-700)`. Sobrescribimos a fondo naranja
   con texto e ícono blancos.
   ---------------------------------------------------------------------------- */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: var(--vlm-brand) !important;
    color: var(--vlm-brand-contrast) !important;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.08);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-icon,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn svg {
    color: var(--vlm-brand-contrast) !important;
}

/* La "rama" lateral que conecta sub-items: Filament la pinta primary-700,
   sobre el fondo naranja debe verse blanca. */
.fi-sidebar-item.fi-active
    > .fi-sidebar-item-btn
    > .fi-sidebar-item-grouped-border
    > .fi-sidebar-item-grouped-border-part {
    background-color: var(--vlm-brand-contrast) !important;
}

/* Hover sobre el item activo: ligeramente más oscuro, no plano */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn:hover {
    background-color: var(--vlm-brand-dark) !important;
}

/* Hover sobre items NO activos: tinte primario sutil */
.fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn:hover {
    background-color: rgb(246 80 26 / 0.08) !important;
    color: var(--vlm-brand) !important;
}
.fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn:hover .fi-icon,
.fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn:hover svg {
    color: var(--vlm-brand) !important;
}

/* Dark mode: igual color de fondo y texto blanco */
:is(.dark) .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: var(--vlm-brand) !important;
    color: var(--vlm-brand-contrast) !important;
}
:is(.dark) .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label,
:is(.dark) .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-icon,
:is(.dark) .fi-sidebar-item.fi-active > .fi-sidebar-item-btn svg {
    color: var(--vlm-brand-contrast) !important;
}
:is(.dark) .fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn:hover {
    background-color: rgb(246 80 26 / 0.18) !important;
    color: var(--vlm-brand-hover) !important;
}

/* ----------------------------------------------------------------------------
   Tablas Filament — cabecera en color primario con texto e iconos blancos.
   Filament 4 renderiza cada `<th>` como `.fi-ta-header-cell` y el botón de
   ordenamiento como `.fi-ta-header-cell-sort-button`. El indicador de orden
   (flecha arriba/abajo) es un `<svg>` interno.
   ---------------------------------------------------------------------------- */
.fi-ta-table thead .fi-ta-header-cell,
.fi-ta-table > thead > tr > th,
.fi-ta-header-cell {
    background-color: var(--vlm-brand) !important;
    color: var(--vlm-brand-contrast) !important;
    border-bottom-color: var(--vlm-brand-dark) !important;
}

.fi-ta-header-cell .fi-ta-header-cell-label,
.fi-ta-header-cell button,
.fi-ta-header-cell .fi-ta-header-cell-sort-button,
.fi-ta-header-cell .fi-ta-header-cell-sort-button > span,
.fi-ta-header-cell svg {
    color: var(--vlm-brand-contrast) !important;
    fill: currentColor;
}

/* Botón de ordenamiento — hover y estado activo en blanco con tinte */
.fi-ta-header-cell-sort-button:hover {
    color: var(--vlm-brand-contrast) !important;
    opacity: 0.9;
}
.fi-ta-header-cell-sort-button:focus {
    outline: 2px solid rgb(255 255 255 / 0.6);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

/* Checkbox "seleccionar todos" en la cabecera de tablas con selección:
   queda visible contra el fondo naranja */
.fi-ta-header-cell .fi-checkbox-input,
.fi-ta-header-cell input[type="checkbox"] {
    border-color: var(--vlm-brand-contrast) !important;
    background-color: rgb(255 255 255 / 0.15);
}

/* Dark mode: la cabecera mantiene el branding (no se atenúa a gris) */
:is(.dark) .fi-ta-header-cell {
    background-color: var(--vlm-brand) !important;
    color: var(--vlm-brand-contrast) !important;
    border-bottom-color: var(--vlm-brand-dark) !important;
}

/* ----------------------------------------------------------------------------
   Botones primary "filled" — fuerzan brand exacto + texto blanco.

   Aunque la sobreescritura de `--primary-600` ya hace lo principal, Filament
   calcula `--text` y `--hover-text` automáticamente según la luminosidad del
   `--bg`. En algunos puntos del flujo de paneles, esos cálculos se hacen una
   sola vez al cargar y se cachean; este override garantiza que el botón
   primary filled siempre se vea con el naranja brand y el texto en blanco,
   sin importar el orden de carga.

   Cubre las acciones tipo Action::make()->color('primary')->button() y
   también los CreateAction, EditAction, etc., que renderizan como
   `<button class="fi-btn fi-color fi-color-primary">`.
   ---------------------------------------------------------------------------- */
.fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-link):not(.fi-disabled) {
    background-color: var(--vlm-brand) !important;
    color: var(--vlm-brand-contrast) !important;
}

.fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-link):not(.fi-disabled) > .fi-icon,
.fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-link):not(.fi-disabled) > .fi-btn-label {
    color: var(--vlm-brand-contrast) !important;
}

.fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-link):not(.fi-disabled):hover {
    background-color: var(--vlm-brand-dark) !important;
    color: var(--vlm-brand-contrast) !important;
}

/* Variante outlined / link: el TEXTO y el ÍCONO mantienen el brand exacto. */
.fi-btn.fi-color-primary.fi-outlined:not(.fi-disabled),
.fi-btn.fi-color-primary.fi-link:not(.fi-disabled) {
    color: var(--vlm-brand) !important;
}
.fi-btn.fi-color-primary.fi-outlined:not(.fi-disabled) > .fi-icon,
.fi-btn.fi-color-primary.fi-link:not(.fi-disabled) > .fi-icon {
    color: var(--vlm-brand) !important;
}

/* Dark mode — comportamiento idéntico (ya no se atenúa a tono apagado). */
:is(.dark) .fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-link):not(.fi-disabled) {
    background-color: var(--vlm-brand) !important;
    color: var(--vlm-brand-contrast) !important;
}
:is(.dark) .fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-link):not(.fi-disabled):hover {
    background-color: var(--vlm-brand-hover) !important;
}

/* ============================================
   Campo MapLocationPicker (mapa + marcador)
   ============================================ */

.map-loc-picker {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

/* Buscador */
.map-loc-search {
    position: relative;
    display: flex;
    align-items: center;
}
.map-loc-search-icon {
    position: absolute;
    left: 0.75rem;
    width: 1.125rem;
    height: 1.125rem;
    color: rgb(107 114 128);
    pointer-events: none;
}
.map-loc-search-input {
    width: 100%;
    padding: 0.5rem 0.75rem 0.5rem 2.25rem;
    border-radius: 0.5rem;
    border: 1px solid rgb(209 213 219);
    background-color: #fff;
    font-size: 0.875rem;
    color: rgb(17 24 39);
}
.map-loc-search-input:focus {
    outline: none;
    border-color: rgb(245 158 11);
    box-shadow: 0 0 0 1px rgb(245 158 11);
}
:is(.dark) .map-loc-search-input {
    background-color: rgb(255 255 255 / 0.05);
    border-color: rgb(255 255 255 / 0.1);
    color: rgb(243 244 246);
}

/* Lienzo del mapa */
.map-loc-canvas-wrap {
    position: relative;
    border-radius: 0.625rem;
    overflow: hidden;
    border: 1px solid rgb(229 231 235);
}
:is(.dark) .map-loc-canvas-wrap { border-color: rgb(255 255 255 / 0.1); }
.map-loc-canvas {
    width: 100%;
    background-color: rgb(243 244 246);
}
:is(.dark) .map-loc-canvas { background-color: rgb(31 41 55); }

.map-loc-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgb(75 85 99);
    background-color: rgb(243 244 246 / 0.9);
}
:is(.dark) .map-loc-overlay {
    color: rgb(209 213 219);
    background-color: rgb(31 41 55 / 0.9);
}
.map-loc-overlay--error {
    color: rgb(180 83 9);
    background-color: rgb(255 251 235 / 0.95);
}
:is(.dark) .map-loc-overlay--error {
    color: rgb(252 211 77);
    background-color: rgb(120 53 15 / 0.4);
}
.map-loc-spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgb(209 213 219);
    border-top-color: rgb(245 158 11);
    border-radius: 9999px;
    animation: map-loc-spin 0.7s linear infinite;
}
@keyframes map-loc-spin {
    to { transform: rotate(360deg); }
}

.map-loc-hint {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: rgb(107 114 128);
}
.map-loc-hint svg {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
}
:is(.dark) .map-loc-hint { color: rgb(156 163 175); }

/* Dirección resuelta */
.map-loc-field-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgb(55 65 81);
}
:is(.dark) .map-loc-field-label { color: rgb(209 213 219); }
.map-loc-address {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid rgb(209 213 219);
    background-color: #fff;
    font-size: 0.875rem;
    color: rgb(17 24 39);
    resize: vertical;
}
.map-loc-address:focus {
    outline: none;
    border-color: rgb(245 158 11);
    box-shadow: 0 0 0 1px rgb(245 158 11);
}
:is(.dark) .map-loc-address {
    background-color: rgb(255 255 255 / 0.05);
    border-color: rgb(255 255 255 / 0.1);
    color: rgb(243 244 246);
}

/* Coordenadas */
.map-loc-coords {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.map-loc-coord {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 0.375rem;
    background-color: rgb(243 244 246);
    font-size: 0.75rem;
    color: rgb(55 65 81);
}
:is(.dark) .map-loc-coord {
    background-color: rgb(255 255 255 / 0.06);
    color: rgb(209 213 219);
}
.map-loc-coord-key {
    font-weight: 600;
    color: rgb(107 114 128);
}
:is(.dark) .map-loc-coord-key { color: rgb(156 163 175); }
.map-loc-coord-val {
    font-family: ui-monospace, monospace;
}

/* El dropdown del autocompletado de Google debe quedar sobre los modales de Filament */
.pac-container {
    z-index: 100000 !important;
}

/* ============================================
   Reporte de Gastos
   ============================================ */

/* Chips de filtros activos */
.gastos-filters-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    background-color: rgb(243 244 246);
    color: rgb(55 65 81);
    border: 1px solid rgb(229 231 235);
}
.chip--neutral { background-color: rgb(243 244 246); color: rgb(55 65 81); }
.chip--primary {
    background-color: rgb(255 243 224);
    color: rgb(146 64 14);
    border-color: rgb(253 230 138);
}
:is(.dark) .chip {
    background-color: rgb(255 255 255 / 0.06);
    color: rgb(209 213 219);
    border-color: rgb(255 255 255 / 0.1);
}
:is(.dark) .chip--primary {
    background-color: rgb(120 53 15 / 0.4);
    color: rgb(252 211 77);
    border-color: rgb(120 53 15);
}

/* Stack vertical para los ChartWidgets de Filament del reporte */
.gastos-charts-stack {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

/* Grilla de tarjetas de gráficos (variante CSS legacy) */
.gastos-charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}
.gastos-bar-card {
    background-color: #fff;
    border: 1px solid rgb(229 231 235);
    border-radius: 0.75rem;
    padding: 1rem;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}
:is(.dark) .gastos-bar-card {
    background-color: rgb(31 41 55);
    border-color: rgb(255 255 255 / 0.08);
}
.gastos-bar-card--full {
    grid-column: 1 / -1;
}

.gastos-bar-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.875rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: rgb(17 24 39);
}
.gastos-bar-title svg {
    color: rgb(245 158 11);
    flex-shrink: 0;
}
:is(.dark) .gastos-bar-title { color: rgb(243 244 246); }

.gastos-bars {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.gastos-bar-row {
    display: grid;
    grid-template-columns: minmax(90px, 1fr) minmax(80px, 2fr) auto;
    align-items: center;
    gap: 0.625rem;
}
.gastos-bar-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgb(55 65 81);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
:is(.dark) .gastos-bar-label { color: rgb(209 213 219); }

.gastos-bar-track {
    position: relative;
    height: 0.625rem;
    background-color: rgb(243 244 246);
    border-radius: 9999px;
    overflow: hidden;
}
:is(.dark) .gastos-bar-track { background-color: rgb(255 255 255 / 0.06); }

.gastos-bar-fill {
    height: 100%;
    border-radius: 9999px;
    transition: width 0.4s ease;
    background-color: rgb(245 158 11);
}
.gastos-bar-fill--type { background: linear-gradient(90deg, rgb(245 158 11), rgb(217 119 6)); }
.gastos-bar-fill--category { background: linear-gradient(90deg, rgb(59 130 246), rgb(37 99 235)); }
.gastos-bar-fill--item { background: linear-gradient(90deg, rgb(168 85 247), rgb(126 34 206)); }
.gastos-bar-fill--event { background: linear-gradient(90deg, rgb(34 197 94), rgb(22 163 74)); }
.gastos-bar-fill--month { background: linear-gradient(90deg, rgb(14 165 233), rgb(2 132 199)); }

.gastos-bar-amount {
    font-family: ui-monospace, monospace;
    font-size: 0.8125rem;
    font-weight: 700;
    color: rgb(17 24 39);
    text-align: end;
    min-width: 100px;
}
:is(.dark) .gastos-bar-amount { color: rgb(243 244 246); }

/* Pills de tipo en la tabla de detalle */
.gastos-type-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
}
.gastos-type-pill--is-event {
    background-color: rgb(220 252 231);
    color: rgb(21 128 61);
}
.gastos-type-pill--is-internal {
    background-color: rgb(219 234 254);
    color: rgb(29 78 216);
}
:is(.dark) .gastos-type-pill--is-event { background-color: rgb(20 83 45 / 0.5); color: rgb(134 239 172); }
:is(.dark) .gastos-type-pill--is-internal { background-color: rgb(30 58 138 / 0.5); color: rgb(147 197 253); }

/* Chips de ubicación en el reporte de asistencia */
.loc-pair {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}
.loc-pair-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.loc-label {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgb(107 114 128);
    font-weight: 600;
}
:is(.dark) .loc-label { color: rgb(156 163 175); }
.loc-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
}
.loc-chip--event { background-color: rgb(220 252 231); color: rgb(21 128 61); }
.loc-chip--warehouse { background-color: rgb(219 234 254); color: rgb(29 78 216); }
.loc-chip--unknown { background-color: rgb(229 231 235); color: rgb(75 85 99); }
:is(.dark) .loc-chip--event { background-color: rgb(20 83 45 / 0.5); color: rgb(134 239 172); }
:is(.dark) .loc-chip--warehouse { background-color: rgb(30 58 138 / 0.5); color: rgb(147 197 253); }
:is(.dark) .loc-chip--unknown { background-color: rgb(255 255 255 / 0.08); color: rgb(209 213 219); }

/* ============================================
   Calendario del Dashboard (admin)
   ============================================ */

.evt-cal-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.5rem;
}

/* ── Toolbar del calendario en mobile ───────────────────────────── */
@media (max-width: 640px) {
    .evt-cal-toolbar {
        gap: 0.5rem;
        width: 100%;
    }

    /* El filtro de tipo (primer select) ocupa toda la fila. */
    .evt-cal-toolbar > .evt-cal-filter-select:first-of-type {
        flex: 1 1 100%;
        min-width: 0;
    }

    /* Botones de navegación (anterior / Hoy / siguiente): el del centro
       (Hoy) se expande para llenar la fila. */
    .evt-cal-toolbar > .evt-cal-nav-btn {
        flex: 0 0 auto;
        padding: 0.625rem;
    }
    .evt-cal-toolbar > .evt-cal-nav-btn svg {
        width: 1.125rem;
        height: 1.125rem;
    }
    .evt-cal-toolbar > .evt-cal-today-btn {
        flex: 1 1 auto;
        text-align: center;
        padding: 0.625rem 0.75rem;
        font-size: 0.875rem;
    }

    /* Selectores de mes y año (segundo y tercer select): 50% c/u. */
    .evt-cal-toolbar > .evt-cal-filter-select:nth-of-type(2),
    .evt-cal-toolbar > .evt-cal-filter-select:nth-of-type(3) {
        flex: 1 1 calc(50% - 0.25rem);
        min-width: 0;
        /* 16px previene el zoom automático de iOS al enfocar el select. */
        font-size: 1rem;
        padding: 0.5rem 0.625rem;
    }

    /* El nombre del mes (cuando esté visible) pasa abajo a línea propia. */
    .evt-cal-month-label {
        flex: 1 1 100%;
        margin: 0;
        text-align: center;
    }

    /* Celdas del calendario más compactas en mobile. */
    .evt-cal-cell {
        min-height: 3.25rem;
        padding: 0.25rem;
    }
    .evt-cal-cell-head { margin-bottom: 0.125rem; }
    .evt-cal-day-num { font-size: 0.75rem; }
    .evt-cal-day-count {
        font-size: 0.5625rem;
        padding: 0 0.25rem;
        height: 0.875rem;
        line-height: 0.875rem;
    }

    /* En mobile mostramos puntos de colores en lugar de las cápsulas. */
    .evt-cal-cell-events { display: none; }
    .evt-cal-cell-dots {
        display: flex;
        flex-wrap: wrap;
        gap: 0.1875rem;
        align-items: center;
    }
}

/* ── Puntos de color por tipo de fecha (solo se muestran en mobile) ── */
.evt-cal-cell-dots { display: none; }
.evt-cal-dot {
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 9999px;
    flex-shrink: 0;
}
.evt-cal-dot--montaje { background-color: rgb(245 158 11); }
.evt-cal-dot--evento { background-color: rgb(34 197 94); }
.evt-cal-dot--desmontaje { background-color: rgb(156 163 175); }
.evt-cal-dot--montaje-evento { background-color: rgb(14 165 233); }
.evt-cal-dot--almacen { background-color: rgb(147 51 234); }
.evt-cal-dot-more {
    font-size: 0.5625rem;
    font-weight: 600;
    color: rgb(107 114 128);
    line-height: 1;
}
:is(.dark) .evt-cal-dot-more { color: rgb(156 163 175); }

/* ── Backdrop + bottom sheet del sidebar (solo en mobile) ─────────── */
.evt-cal-backdrop { display: none; }

@media (max-width: 768px) {
    .evt-cal-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background-color: rgb(0 0 0 / 0.5);
        z-index: 55;
        animation: evt-cal-fade 0.18s ease-out;
    }

    /* La barra lateral se transforma en un panel deslizable desde abajo. */
    .evt-cal-sidebar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: 82vh;
        z-index: 60;
        overflow-y: auto;
        border-radius: 1.25rem 1.25rem 0 0;
        box-shadow: 0 -12px 32px rgb(0 0 0 / 0.2);
        animation: evt-cal-slide-up 0.22s ease-out;
    }

    /* Pequeño "handle" en la parte superior del panel para indicar arrastrable. */
    .evt-cal-sidebar::before {
        content: '';
        display: block;
        width: 2.5rem;
        height: 0.25rem;
        border-radius: 9999px;
        background-color: rgb(209 213 219);
        margin: 0.5rem auto 0.25rem;
    }
    :is(.dark) .evt-cal-sidebar::before { background-color: rgb(255 255 255 / 0.2); }
}

@keyframes evt-cal-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes evt-cal-slide-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* Bloquea el scroll del body SOLO mientras la hoja del calendario está realmente
   abierta en mobile. `.evt-cal-sidebar` existe siempre en el DOM (Alpine usa x-show,
   que solo aplica display:none), así que hay que apoyarse en `.has-sidebar`, que solo
   está presente cuando openDayKey es verdadero. */
@media (max-width: 768px) {
    body:has(.evt-cal-layout.has-sidebar) {
        overflow: hidden;
    }
}
.evt-cal-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem;
    border-radius: 0.5rem;
    border: 1px solid rgb(229 231 235);
    background-color: #fff;
    color: rgb(75 85 99);
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.evt-cal-nav-btn:hover { background-color: rgb(243 244 246); color: rgb(17 24 39); }
.evt-cal-nav-btn svg { width: 1rem; height: 1rem; }
:is(.dark) .evt-cal-nav-btn {
    background-color: rgb(17 24 39);
    border-color: rgb(255 255 255 / 0.1);
    color: rgb(209 213 219);
}
:is(.dark) .evt-cal-nav-btn:hover { background-color: rgb(255 255 255 / 0.05); color: #fff; }

.evt-cal-today-btn {
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid rgb(229 231 235);
    background-color: #fff;
    color: rgb(217 119 6);
    font-weight: 600;
    font-size: 0.8125rem;
    cursor: pointer;
}
.evt-cal-today-btn:hover { background-color: rgb(255 251 235); }
:is(.dark) .evt-cal-today-btn {
    background-color: rgb(17 24 39);
    border-color: rgb(255 255 255 / 0.1);
    color: rgb(251 191 36);
}
:is(.dark) .evt-cal-today-btn:hover { background-color: rgb(120 53 15 / 0.2); }

.evt-cal-month-label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: rgb(17 24 39);
    margin: 0 0 0 0.5rem;
    text-transform: capitalize;
}
:is(.dark) .evt-cal-month-label { color: #fff; }

/* Layout: grid + sidebar */
.evt-cal-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
.evt-cal-layout.has-sidebar {
    grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
    .evt-cal-layout.has-sidebar {
        grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    }
}

.evt-cal-grid-wrap {
    border-radius: 0.5rem;
    border: 1px solid rgb(229 231 235);
    overflow: hidden;
    background-color: #fff;
}
:is(.dark) .evt-cal-grid-wrap {
    border-color: rgb(255 255 255 / 0.08);
    background-color: rgb(17 24 39);
}

.evt-cal-grid {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}
.evt-cal-grid thead th {
    background-color: rgb(249 250 251);
    color: rgb(107 114 128);
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.5rem;
    text-align: center;
    border-bottom: 1px solid rgb(229 231 235);
}
:is(.dark) .evt-cal-grid thead th {
    background-color: rgb(255 255 255 / 0.03);
    color: rgb(156 163 175);
    border-color: rgb(255 255 255 / 0.06);
}

/* Celdas de día */
.evt-cal-cell {
    height: 6rem;
    vertical-align: top;
    padding: 0.375rem;
    border-right: 1px solid rgb(229 231 235);
    border-bottom: 1px solid rgb(229 231 235);
    cursor: pointer;
    transition: background-color 0.12s ease;
    overflow: hidden;
}
.evt-cal-cell:last-child { border-right: none; }
.evt-cal-cell:hover { background-color: rgb(255 251 235 / 0.6); }
.evt-cal-cell.is-other-month {
    background-color: rgb(249 250 251);
    color: rgb(156 163 175);
}
.evt-cal-cell.is-other-month .evt-cal-day-num { color: rgb(156 163 175); }
.evt-cal-cell.is-today {
    background-color: rgb(255 251 235);
}
.evt-cal-cell.is-today .evt-cal-day-num {
    background-color: rgb(245 158 11);
    color: #fff;
    border-radius: 9999px;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.evt-cal-cell.is-selected {
    background-color: rgb(254 243 199);
    box-shadow: inset 0 0 0 2px rgb(245 158 11);
}
.evt-cal-cell.is-weekend.is-other-month {
    background-color: rgb(243 244 246);
}
:is(.dark) .evt-cal-cell {
    border-color: rgb(255 255 255 / 0.05);
}
:is(.dark) .evt-cal-cell:hover { background-color: rgb(120 53 15 / 0.15); }
:is(.dark) .evt-cal-cell.is-other-month { background-color: rgb(255 255 255 / 0.02); }
:is(.dark) .evt-cal-cell.is-today { background-color: rgb(120 53 15 / 0.25); }
:is(.dark) .evt-cal-cell.is-selected {
    background-color: rgb(120 53 15 / 0.35);
    box-shadow: inset 0 0 0 2px rgb(245 158 11);
}

.evt-cal-cell-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
    min-height: 1.5rem;
}
.evt-cal-day-num {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgb(55 65 81);
}
:is(.dark) .evt-cal-day-num { color: rgb(209 213 219); }
.evt-cal-day-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.25rem;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 700;
    background-color: rgb(229 231 235);
    color: rgb(55 65 81);
}
:is(.dark) .evt-cal-day-count {
    background-color: rgb(255 255 255 / 0.1);
    color: rgb(209 213 219);
}

.evt-cal-cell-events {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.evt-cal-event {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.evt-cal-event .time {
    font-family: ui-monospace, monospace;
    font-weight: 700;
    font-size: 0.625rem;
}
.evt-cal-event .name {
    overflow: hidden;
    text-overflow: ellipsis;
}
.evt-cal-event--montaje { background-color: rgb(255 237 213); color: rgb(146 64 14); }
.evt-cal-event--evento { background-color: rgb(220 252 231); color: rgb(21 128 61); }
.evt-cal-event--desmontaje { background-color: rgb(229 231 235); color: rgb(55 65 81); }
.evt-cal-event--montaje-evento { background-color: rgb(224 242 254); color: rgb(7 89 133); }
.evt-cal-event--almacen { background-color: rgb(243 232 255); color: rgb(107 33 168); }
:is(.dark) .evt-cal-event--montaje { background-color: rgb(120 53 15 / 0.5); color: rgb(252 211 77); }
:is(.dark) .evt-cal-event--evento { background-color: rgb(20 83 45 / 0.5); color: rgb(134 239 172); }
:is(.dark) .evt-cal-event--desmontaje { background-color: rgb(255 255 255 / 0.08); color: rgb(209 213 219); }
:is(.dark) .evt-cal-event--montaje-evento { background-color: rgb(12 74 110 / 0.55); color: rgb(125 211 252); }
:is(.dark) .evt-cal-event--almacen { background-color: rgb(88 28 135 / 0.55); color: rgb(216 180 254); }

/* Leyenda de colores por tipo de fecha de evento */
.evt-cal-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 1rem;
    margin-top: 0.875rem;
    padding-top: 0.875rem;
    border-top: 1px solid rgb(229 231 235);
}
:is(.dark) .evt-cal-legend { border-top-color: rgb(255 255 255 / 0.1); }
.evt-cal-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgb(75 85 99);
}
:is(.dark) .evt-cal-legend-item { color: rgb(209 213 219); }
.evt-cal-legend-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 0.25rem;
    flex-shrink: 0;
}

/* Select de filtro por tipo en la barra del calendario */
.evt-cal-filter-select {
    appearance: auto;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgb(55 65 81);
    background-color: #fff;
    border: 1px solid rgb(209 213 219);
    border-radius: 0.5rem;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
}
:is(.dark) .evt-cal-filter-select {
    color: rgb(229 231 235);
    background-color: rgb(255 255 255 / 0.05);
    border-color: rgb(255 255 255 / 0.1);
}

.evt-cal-event-more {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 600;
    color: rgb(107 114 128);
    padding: 0.125rem 0.375rem;
}
:is(.dark) .evt-cal-event-more { color: rgb(156 163 175); }

/* Sidebar */
.evt-cal-sidebar {
    border-radius: 0.5rem;
    border: 1px solid rgb(229 231 235);
    background-color: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 36rem;
}
:is(.dark) .evt-cal-sidebar {
    background-color: rgb(17 24 39);
    border-color: rgb(255 255 255 / 0.08);
}

.evt-cal-sidebar-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid rgb(229 231 235);
    background-color: rgb(249 250 251);
}
:is(.dark) .evt-cal-sidebar-head {
    border-color: rgb(255 255 255 / 0.06);
    background-color: rgb(255 255 255 / 0.03);
}

.evt-cal-sidebar-eyebrow {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgb(107 114 128);
    margin: 0 0 0.125rem;
    font-weight: 600;
}
:is(.dark) .evt-cal-sidebar-eyebrow { color: rgb(156 163 175); }

.evt-cal-sidebar-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: rgb(17 24 39);
    text-transform: capitalize;
}
:is(.dark) .evt-cal-sidebar-title { color: #fff; }

.evt-cal-close {
    padding: 0.25rem;
    border-radius: 0.25rem;
    background: transparent;
    border: none;
    color: rgb(107 114 128);
    cursor: pointer;
}
.evt-cal-close:hover { background-color: rgb(229 231 235); color: rgb(17 24 39); }
.evt-cal-close svg { width: 1rem; height: 1rem; }
:is(.dark) .evt-cal-close:hover { background-color: rgb(255 255 255 / 0.06); color: #fff; }

.evt-cal-sidebar-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: rgb(107 114 128);
    font-size: 0.875rem;
}
:is(.dark) .evt-cal-sidebar-empty { color: rgb(156 163 175); }

.evt-cal-sidebar-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.evt-cal-sidebar-item {
    flex-shrink: 0;
    border-radius: 0.5rem;
    border: 1px solid rgb(229 231 235);
    overflow: hidden;
    background-color: #fff;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.evt-cal-sidebar-item:hover { border-color: rgb(209 213 219); }
.evt-cal-sidebar-item.is-open {
    border-color: rgb(245 158 11);
    box-shadow: 0 0 0 1px rgb(245 158 11);
}
:is(.dark) .evt-cal-sidebar-item {
    background-color: rgb(17 24 39);
    border-color: rgb(255 255 255 / 0.08);
}
:is(.dark) .evt-cal-sidebar-item:hover { border-color: rgb(255 255 255 / 0.15); }

.evt-cal-sidebar-item-head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem;
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
}
.evt-cal-sidebar-item-head:hover { background-color: rgb(249 250 251); }
:is(.dark) .evt-cal-sidebar-item-head:hover { background-color: rgb(255 255 255 / 0.03); }
.evt-cal-sidebar-item-time {
    display: flex;
    flex-direction: column;
    min-width: 3rem;
    font-family: ui-monospace, monospace;
    font-size: 0.75rem;
    text-align: center;
}
.evt-cal-sidebar-item-time .time-start { font-weight: 700; color: rgb(17 24 39); }
.evt-cal-sidebar-item-time .time-end { color: rgb(107 114 128); font-size: 0.6875rem; }
:is(.dark) .evt-cal-sidebar-item-time .time-start { color: #fff; }
:is(.dark) .evt-cal-sidebar-item-time .time-end { color: rgb(156 163 175); }

.evt-cal-sidebar-item-info {
    flex: 1;
    min-width: 0;
}
.evt-cal-sidebar-item-info .event-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgb(17 24 39);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
:is(.dark) .evt-cal-sidebar-item-info .event-name { color: #fff; }
.evt-cal-sidebar-item-info .event-meta {
    font-size: 0.6875rem;
    color: rgb(107 114 128);
    margin: 0.125rem 0 0;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}
:is(.dark) .evt-cal-sidebar-item-info .event-meta { color: rgb(156 163 175); }

.evt-cal-sidebar-item-head .chev {
    width: 1rem;
    height: 1rem;
    color: rgb(156 163 175);
    transition: transform 0.12s ease;
    flex-shrink: 0;
}
.evt-cal-sidebar-item.is-open .chev { transform: rotate(180deg); color: rgb(217 119 6); }

.evt-cal-type-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.0625rem 0.375rem;
    border-radius: 9999px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.evt-cal-type-tag--montaje { background-color: rgb(254 243 199); color: rgb(146 64 14); }
.evt-cal-type-tag--evento { background-color: rgb(220 252 231); color: rgb(21 128 61); }
.evt-cal-type-tag--desmontaje { background-color: rgb(229 231 235); color: rgb(55 65 81); }
.evt-cal-type-tag--montaje-evento { background-color: rgb(224 242 254); color: rgb(7 89 133); }
.evt-cal-type-tag--almacen { background-color: rgb(243 232 255); color: rgb(107 33 168); }
:is(.dark) .evt-cal-type-tag--montaje { background-color: rgb(120 53 15 / 0.6); color: rgb(252 211 77); }
:is(.dark) .evt-cal-type-tag--evento { background-color: rgb(20 83 45 / 0.6); color: rgb(134 239 172); }
:is(.dark) .evt-cal-type-tag--desmontaje { background-color: rgb(255 255 255 / 0.1); color: rgb(209 213 219); }
:is(.dark) .evt-cal-type-tag--montaje-evento { background-color: rgb(12 74 110 / 0.6); color: rgb(125 211 252); }
:is(.dark) .evt-cal-type-tag--almacen { background-color: rgb(88 28 135 / 0.6); color: rgb(216 180 254); }

.evt-cal-sidebar-item-body {
    padding: 0.75rem;
    border-top: 1px solid rgb(229 231 235);
    background-color: rgb(249 250 251);
}
:is(.dark) .evt-cal-sidebar-item-body {
    border-color: rgb(255 255 255 / 0.06);
    background-color: rgb(255 255 255 / 0.02);
}

.evt-cal-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem;
    margin: 0 0 0.625rem;
}
.evt-cal-detail-grid .col-full { grid-column: span 2 / span 2; }
.evt-cal-detail-grid dt {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgb(107 114 128);
    font-weight: 600;
    margin: 0 0 0.125rem;
}
:is(.dark) .evt-cal-detail-grid dt { color: rgb(156 163 175); }
.evt-cal-detail-grid dd {
    font-size: 0.8125rem;
    color: rgb(17 24 39);
    margin: 0;
}
:is(.dark) .evt-cal-detail-grid dd { color: rgb(229 231 235); }

.evt-cal-detail-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background-color: rgb(217 119 6);
    color: #fff;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.12s ease;
    width: 100%;
    justify-content: center;
    margin-top: 10px;
}
.evt-cal-detail-link:hover { background-color: rgb(180 83 9); color: #fff; }
.evt-cal-detail-link svg { width: 0.875rem; height: 0.875rem; }

/* Bloque de personas en el detalle del calendario */
.evt-cal-people-block {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgb(229 231 235);
}
:is(.dark) .evt-cal-people-block { border-color: rgb(255 255 255 / 0.08); }
.evt-cal-people-head {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.5rem;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgb(107 114 128);
    font-weight: 700;
}
:is(.dark) .evt-cal-people-head { color: rgb(156 163 175); }
.evt-cal-people-head svg { width: 0.875rem; height: 0.875rem; }
.evt-cal-people-head .count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.25rem;
    border-radius: 9999px;
    background-color: rgb(229 231 235);
    color: rgb(55 65 81);
    font-size: 0.625rem;
    font-weight: 700;
    margin-left: auto;
}
:is(.dark) .evt-cal-people-head .count {
    background-color: rgb(255 255 255 / 0.1);
    color: rgb(209 213 219);
}
.evt-cal-people-empty {
    font-size: 0.75rem;
    color: rgb(156 163 175);
    margin: 0;
    font-style: italic;
}
.evt-cal-people-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.evt-cal-people-list li {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    background-color: #fff;
    font-size: 0.75rem;
    color: rgb(17 24 39);
}
:is(.dark) .evt-cal-people-list li {
    background-color: rgb(255 255 255 / 0.03);
    color: rgb(229 231 235);
}
.evt-cal-people-list li .star {
    width: 0.75rem;
    height: 0.75rem;
    color: rgb(245 158 11);
    flex-shrink: 0;
}
.evt-cal-people-list li .resp {
    margin-left: auto;
    font-size: 0.625rem;
    font-weight: 700;
    color: rgb(217 119 6);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
:is(.dark) .evt-cal-people-list li .resp { color: rgb(251 191 36); }

/* Mini nota en celdas de tabla del hub */
.evt-hub-mini-note {
    display: inline-block;
    margin-left: 0.25rem;
    font-size: 0.625rem;
    color: rgb(217 119 6);
    font-weight: 600;
}
:is(.dark) .evt-hub-mini-note { color: rgb(251 191 36); }

/* Chips para coordenadas */
.evt-hub-coord-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    background-color: rgb(243 244 246);
    color: rgb(55 65 81);
    font-family: ui-monospace, monospace;
    font-size: 0.6875rem;
}
:is(.dark) .evt-hub-coord-chip {
    background-color: rgb(255 255 255 / 0.05);
    color: rgb(209 213 219);
}


/* ── Quotation Detail Builder ─────────────────────────────────────
   Estilos del componente Livewire QuotationDetailBuilder que arma
   la tabla de detalle de una cotización.
   ─────────────────────────────────────────────────────────────── */

.quotation-builder {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.qb-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}

.qb-toolbar-right {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.qb-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: rgb(17 24 39);
}

:is(.dark) .qb-title {
    color: rgb(243 244 246);
}

.qb-subtitle {
    font-size: 0.85rem;
    color: rgb(107 114 128);
}

.qb-table-wrapper {
    overflow-x: auto;
    border-radius: 0.5rem;
    border: 1px solid rgb(229 231 235);
    background-color: rgb(255 255 255);
}

:is(.dark) .qb-table-wrapper {
    border-color: rgb(55 65 81);
    background-color: rgb(17 24 39);
}

.qb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.qb-table th {
    text-align: left;
    padding: 0.6rem 0.75rem;
    font-weight: 600;
    color: rgb(75 85 99);
    background-color: rgb(249 250 251);
    border-bottom: 1px solid rgb(229 231 235);
}

:is(.dark) .qb-table th {
    color: rgb(156 163 175);
    background-color: rgb(31 41 55);
    border-color: rgb(55 65 81);
}

.qb-table td {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid rgb(243 244 246);
    vertical-align: middle;
}

:is(.dark) .qb-table td {
    border-color: rgb(55 65 81);
}

.qb-col-qty,
.qb-col-price,
.qb-col-total {
    text-align: right;
    white-space: nowrap;
}

.qb-col-unit {
    text-align: center;
    white-space: nowrap;
}

.qb-col-actions {
    width: 1%;
    white-space: nowrap;
}

/* Fila de grupo */
.qb-group-row td {
    background-color: rgb(238 242 255);
    font-weight: 600;
    border-top: 2px solid rgb(199 210 254);
}

:is(.dark) .qb-group-row td {
    background-color: rgba(99, 102, 241, 0.15);
    border-top-color: rgb(79 70 229);
}

.qb-group-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgb(49 46 129);
    font-size: 0.95rem;
}

:is(.dark) .qb-group-name {
    color: rgb(199 210 254);
}

.qb-group-subtitle {
    font-weight: 400;
    color: rgb(107 114 128);
    font-size: 0.85rem;
}

.qb-group-icon {
    color: rgb(99 102 241);
    font-size: 1rem;
}

.qb-group-total,
.qb-cat-total {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.qb-group-actions,
.qb-cat-actions,
.qb-item-actions {
    display: flex;
    gap: 0.25rem;
    justify-content: flex-end;
    white-space: nowrap;
}

/* Fila de categoría */
.qb-cat-row td {
    background-color: rgb(249 250 251);
    font-weight: 500;
}

:is(.dark) .qb-cat-row td {
    background-color: rgba(255, 255, 255, 0.03);
}

.qb-cat-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 1.25rem;
    color: rgb(55 65 81);
}

:is(.dark) .qb-cat-name {
    color: rgb(209 213 219);
}

.qb-cat-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background-color: rgb(99 102 241);
    display: inline-block;
}

.qb-cat-source {
    font-weight: 400;
    color: rgb(156 163 175);
    font-size: 0.8rem;
}

/* Filas de ítems */
.qb-item-name {
    padding-left: 2.25rem !important;
}

.qb-item-title {
    color: rgb(31 41 55);
}

:is(.dark) .qb-item-title {
    color: rgb(229 231 235);
}

.qb-item-desc {
    font-size: 0.78rem;
    color: rgb(107 114 128);
    margin-top: 2px;
}

.qb-item-qty,
.qb-item-unit,
.qb-item-price,
.qb-item-total {
    font-variant-numeric: tabular-nums;
}

.qb-item-total {
    font-weight: 600;
    color: rgb(31 41 55);
}

:is(.dark) .qb-item-total {
    color: rgb(229 231 235);
}

.qb-empty-row td {
    padding: 1rem !important;
    color: rgb(107 114 128);
    text-align: center;
    font-style: italic;
    background-color: rgb(249 250 251);
}

:is(.dark) .qb-empty-row td {
    background-color: rgb(24 30 43);
}

.qb-empty {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-style: normal;
}

/* Footer */
.qb-foot-sub td,
.qb-foot-disc td {
    padding-top: 0.75rem !important;
    padding-bottom: 0.35rem !important;
    background-color: rgb(249 250 251);
    border-top: 1px solid rgb(229 231 235);
}

:is(.dark) .qb-foot-sub td,
:is(.dark) .qb-foot-disc td {
    background-color: rgb(24 30 43);
    border-color: rgb(55 65 81);
}

.qb-foot-label {
    text-align: right;
    color: rgb(75 85 99);
    font-weight: 500;
}

.qb-foot-value {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.qb-foot-total td {
    padding-top: 0.6rem !important;
    padding-bottom: 0.75rem !important;
    background-color: rgb(238 242 255);
    border-top: 2px solid rgb(199 210 254);
    font-size: 1rem;
}

:is(.dark) .qb-foot-total td {
    background-color: rgba(99, 102, 241, 0.15);
    border-color: rgb(79 70 229);
}

.qb-foot-total .qb-foot-value {
    color: rgb(49 46 129);
    font-size: 1.05rem;
}

:is(.dark) .qb-foot-total .qb-foot-value {
    color: rgb(199 210 254);
}

.qb-foot-rate-note {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.78rem;
    color: rgb(107 114 128);
    background-color: rgb(249 250 251);
    text-align: right;
    font-style: italic;
}

:is(.dark) .qb-foot-rate-note {
    background-color: rgb(24 30 43);
}

/* Inputs inline dentro de la tabla del Quotation Detail Builder. */
.qb-inline-input {
    width: 100%;
    max-width: 110px;
    padding: 0.3rem 0.5rem;
    border: 1px solid rgb(209 213 219);
    border-radius: 0.375rem;
    background-color: rgb(255 255 255);
    font-size: 0.85rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: rgb(31 41 55);
    transition: border-color .15s, box-shadow .15s;
}

.qb-inline-input:focus {
    outline: none;
    border-color: rgb(99 102 241);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

:is(.dark) .qb-inline-input {
    background-color: rgb(31 41 55);
    border-color: rgb(75 85 99);
    color: rgb(229 231 235);
}

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

.qb-inline-price {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    justify-content: flex-end;
}

.qb-inline-prefix {
    color: rgb(107 114 128);
    font-size: 0.85rem;
}

.qb-foot-disc-actions {
    display: flex;
    gap: 0.25rem;
    justify-content: flex-end;
    padding: 0.3rem 0.5rem !important;
}

/* ── Quotation Builder — fase 2 (acordeones + subgrupos) ──────── */

.qb-groups { display: flex; flex-direction: column; gap: 12px; }

details.qb-group {
    border: 1px solid rgb(229 231 235);
    border-radius: 10px;
    background: rgb(255 255 255);
    overflow: hidden;
    transition: box-shadow .15s;
}
:is(.dark) details.qb-group { background: rgb(24 30 43); border-color: rgb(55 65 81); }

details.qb-group[open] { box-shadow: 0 1px 2px rgba(0,0,0,.04); }

details.qb-group-l1 { border-left: 3px solid rgb(167 139 250); margin-left: 16px; }
details.qb-group-l2 { border-left: 3px solid rgb(196 181 253); margin-left: 32px; }

.qb-group-summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: rgb(249 250 251);
    user-select: none;
}
.qb-group-summary::-webkit-details-marker { display: none; }
:is(.dark) .qb-group-summary { background: rgb(31 41 55); }

details[open] > .qb-group-summary .qb-group-chev { transform: rotate(90deg); }
.qb-group-chev {
    display: inline-block;
    transition: transform .15s;
    color: rgb(99 102 241);
    font-size: 11px;
}

.qb-group-head { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.qb-group-head-title {
    display: flex; align-items: center; gap: 6px;
    font-size: .95rem;
    color: rgb(17 24 39);
}
:is(.dark) .qb-group-head-title { color: rgb(243 244 246); }

.qb-group-badge {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .4px;
    background: rgb(237 233 254);
    color: rgb(109 40 217);
    padding: 1px 6px;
    border-radius: 999px;
    margin-left: 4px;
}

.qb-group-head-subtitle {
    font-size: .78rem;
    color: rgb(107 114 128);
    padding-left: 18px;
}

.qb-group-head-right {
    display: flex; align-items: center; gap: 10px;
    flex: 0 0 auto;
}

.qb-group-totals {
    display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.qb-group-subtotal { font-weight: 600; color: rgb(31 41 55); }
:is(.dark) .qb-group-subtotal { color: rgb(229 231 235); }
.qb-group-net { font-size: 10px; color: rgb(99 102 241); }

.qb-group-body { padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 12px; }

/* Categoría dentro del grupo */
.qb-cat {
    border: 1px solid rgb(243 244 246);
    border-radius: 8px;
    overflow: hidden;
}
:is(.dark) .qb-cat { border-color: rgb(55 65 81); }

.qb-cat-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    background: rgb(249 250 251);
}
:is(.dark) .qb-cat-head { background: rgb(31 41 55); }
.qb-cat-head-right { display: flex; align-items: center; gap: 10px; }
.qb-cat-empty { padding: 10px; font-size: 12px; color: rgb(107 114 128); font-style: italic; }

/* Tabla de ítems — reutiliza clases .qb-* existentes */
.qb-items-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.qb-items-table th,
.qb-items-table td { padding: .5rem .7rem; border-bottom: 1px solid rgb(243 244 246); vertical-align: middle; }
:is(.dark) .qb-items-table th,
:is(.dark) .qb-items-table td { border-color: rgb(55 65 81); }
.qb-items-table th {
    text-align: left; font-weight: 600; font-size: 10.5px;
    color: rgb(107 114 128); background: rgb(255 255 255);
    text-transform: none;
}
:is(.dark) .qb-items-table th { background: rgb(24 30 43); }

/* Descuentos por grupo */
.qb-group-discounts {
    border-top: 1px dashed rgb(229 231 235);
    padding-top: 8px;
    display: flex; flex-direction: column; gap: 4px;
}
.qb-group-discounts-title {
    font-size: 11px; color: rgb(107 114 128); text-transform: uppercase;
    letter-spacing: .3px; margin-bottom: 2px;
}
.qb-group-discount-row {
    display: flex; justify-content: space-between; gap: 10px;
    font-size: .85rem;
    color: rgb(107 114 128);
    padding: 2px 0;
}
.qb-group-discount-amount {
    display: flex; align-items: center; gap: 6px;
    color: rgb(220 38 38);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Footer global */
.qb-foot-card {
    margin-top: 12px;
    border: 1px solid rgb(229 231 235);
    border-radius: 10px;
    overflow: hidden;
    background: rgb(255 255 255);
}
:is(.dark) .qb-foot-card { background: rgb(24 30 43); border-color: rgb(55 65 81); }

.qb-foot-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 14px;
    font-size: .9rem;
}
.qb-foot-row + .qb-foot-row { border-top: 1px solid rgb(243 244 246); }
:is(.dark) .qb-foot-row + .qb-foot-row { border-color: rgb(55 65 81); }

.qb-foot-row-disc { color: rgb(220 38 38); }
.qb-foot-row-total {
    background: rgb(238 242 255);
    font-size: 1rem;
    font-weight: 700;
    color: rgb(49 46 129);
}
:is(.dark) .qb-foot-row-total { background: rgba(99,102,241,.15); color: rgb(199 210 254); }

.qb-foot-value-wrap { display: flex; align-items: center; gap: 6px; }

.qb-foot-rate-note {
    padding: 6px 14px;
    font-size: 11px;
    color: rgb(107 114 128);
    font-style: italic;
    text-align: right;
    background: rgb(249 250 251);
}
:is(.dark) .qb-foot-rate-note { background: rgb(24 30 43); }

/* Empty state card */
.qb-empty-card {
    border: 1px dashed rgb(209 213 219);
    border-radius: 10px;
    padding: 24px;
    text-align: center;
    color: rgb(107 114 128);
    font-size: .9rem;
}
.qb-empty-card strong { color: rgb(17 24 39); display: block; margin-bottom: 4px; }
:is(.dark) .qb-empty-card strong { color: rgb(229 231 235); }

/* ────────────────────────────────────────────────────────────
   Builder de cotización — ajustes v4
   ──────────────────────────────────────────────────────────── */

/* Totales del grupo: visibles sólo cuando el acordeón está cerrado;
   al abrirse se muestra la franja al pie del body (`-expanded`). */
.qb-group-totals-expanded { display: none; }
details.qb-group[open] > summary .qb-group-totals-collapsed { display: none; }
details.qb-group[open] > .qb-group-body > .qb-group-totals-expanded { display: flex; }

.qb-group-foot-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding: 10px 14px;
    background: rgb(249 250 251);
    border-top: 1px solid rgb(229 231 235);
    border-radius: 0 0 8px 8px;
    font-weight: 600;
}
:is(.dark) .qb-group-foot-total {
    background: rgb(24 30 43);
    border-color: rgb(55 65 81);
}
.qb-group-foot-label { color: rgb(55 65 81); }
:is(.dark) .qb-group-foot-label { color: rgb(203 213 225); }
.qb-group-foot-value { font-variant-numeric: tabular-nums; }
.qb-group-foot-net {
    margin-left: 8px;
    font-weight: 400;
    font-size: .85em;
    color: rgb(107 114 128);
}

/* Columna de días: compacta */
.qb-col-days { width: 72px; }
.qb-inline-input-days { width: 56px; }

/* Metraje: fila bajo el nombre con 3 micro-campos */
.qb-item-meter {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    font-size: .78rem;
    color: rgb(75 85 99);
}
:is(.dark) .qb-item-meter { color: rgb(156 163 175); }
.qb-item-meter label { display: inline-flex; flex-direction: column; }
.qb-item-meter label > span { font-size: .7rem; opacity: .7; }
.qb-inline-input-dim { width: 72px; }
.qb-item-area {
    margin-left: 4px;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgb(243 244 246);
    font-variant-numeric: tabular-nums;
}
:is(.dark) .qb-item-area { background: rgb(31 41 55); }

/* Badges inline en el título */
.qb-item-metered-badge,
.qb-item-bonus-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .02em;
    vertical-align: middle;
}
.qb-item-metered-badge { background: rgb(219 234 254); color: rgb(29 78 216); }
.qb-item-bonus-badge   { background: rgb(220 252 231); color: rgb(21 128 61); }
:is(.dark) .qb-item-metered-badge { background: rgb(30 58 138); color: rgb(191 219 254); }
:is(.dark) .qb-item-bonus-badge   { background: rgb(20 83 45);  color: rgb(187 247 208); }

/* Filas de regalo: fondo verde tenue */
tr.qb-item-bonus { background: rgb(240 253 244); }
:is(.dark) tr.qb-item-bonus { background: rgba(16, 185, 129, .07); }