/* =========================================
   ESTILOS GLOBALES - TORQUIA
   ========================================= */

/* Configuración: ajustes exclusivos del administrador del sistema. */
.settings-admin-card { background-color: #fffbf3; border-color: #ead7b5; }
.settings-admin-card__header { background-color: #fff3dc; border-color: #ead7b5; }

/* Fuente base para consistencia en todo el sistema */
body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html {
    scrollbar-gutter: stable;
}

/* Un desplegable con opciones largas no debe ser más ancho que su contenedor (móvil). */
select { max-width: 100%; }

/* =========================================
   COMPONENTES UI COMPARTIDOS
   ========================================= */
/* Centrado del editor nativo de fechas, también en Safari/iOS. */
.ui-filter-date {
    box-sizing: border-box;
    height: 2.5rem;
    min-width: 0;
    padding: .5rem .75rem;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.25rem;
    text-align: left;
}
.ui-filter-date::-webkit-date-and-time-value {
    margin: 0;
    text-align: left;
    line-height: 1.25rem;
}
.ui-filter-date::-webkit-datetime-edit,
.ui-filter-date::-webkit-datetime-edit-fields-wrapper {
    display: inline-flex;
    align-items: center;
    padding: 0;
    min-height: 1.25rem;
}
.ui-filter-date::-webkit-calendar-picker-indicator { margin-top: 0; margin-bottom: 0; }

/* Calendario común: fecha y fecha/hora, por encima de ventanas anidadas. */
.ui-date-field { position: relative; display: inline-flex; min-width: 0; max-width: 100%; vertical-align: middle; }
.ui-date-field--full { width: 100%; }
.ui-date-trigger { display: inline-flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 2.5rem; min-width: 0; width: 100%; font-family: inherit; font-weight: 400; text-align: left; line-height: 1.25rem; }
.ui-date-trigger > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-date-trigger > svg { flex-shrink: 0; width: 1rem; height: 1rem; color: #a8a29e; }
.ui-date-trigger:disabled { cursor: not-allowed; opacity: .6; }
.ui-date-validation { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; opacity: 0; pointer-events: none; }
.ui-date-range { display: flex; align-items: flex-end; gap: .5rem; min-width: 0; }
.ui-date-range__field { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: .25rem; }
.ui-date-range__label { font-size: .75rem; font-weight: 700; color: #78716c; }
.ui-date-range__clear { display: flex; align-items: center; justify-content: center; align-self: flex-end; flex: 0 0 2.25rem; width: 2.25rem; height: 2.5rem; padding: 0; border-radius: .5rem; color: #a8a29e; transition: color .15s, background-color .15s; }
.ui-date-range__clear:hover:not(:disabled) { background: #f5f5f4; color: var(--ui-date-accent, #2563eb); }
.ui-date-range__clear:disabled { opacity: .5; cursor: not-allowed; }
.ui-date-range__clear svg { width: 1.625rem; height: 1.625rem; }
.ui-date-calendar { position: fixed; z-index: 10050; width: 18.5rem; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow: auto; padding: .75rem; border: 1px solid #e7e5e4; border-radius: .75rem; background: white; box-shadow: 0 12px 28px #0003; color: #44403c; font-family: inherit; }
.ui-date-calendar__label { margin-bottom: .5rem; color: var(--ui-date-accent); font-size: .75rem; font-weight: 700; }
.ui-date-calendar__error { margin: 0 0 .5rem; color: #dc2626; font-size: .75rem; }
.ui-date-calendar__navigation { display: flex; align-items: center; gap: .25rem; margin-bottom: .5rem; }
.ui-date-calendar__navigation button { display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 2rem; flex-shrink: 0; border-radius: 50%; color: #78716c; }
.ui-date-calendar__navigation select { min-width: 0; height: 2rem; border: 0; background: white; font-family: inherit; font-size: .8125rem; font-weight: 700; text-transform: capitalize; }
.ui-date-calendar__navigation select:first-of-type { flex: 1; }
.ui-date-calendar__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .25rem; }
.ui-date-calendar__weekday { padding: .25rem 0; text-align: center; font-size: .75rem; font-weight: 700; color: #a8a29e; }
.ui-date-calendar__day { height: 2rem; border-radius: 50%; font-size: .875rem; font-weight: 400; }
.ui-date-calendar button { transition: background-color .15s, color .15s; }
.ui-date-calendar button:hover:not(:disabled) { background: #f5f5f4; }
.ui-date-calendar__day[aria-pressed="true"], .ui-date-calendar__day[aria-pressed="true"]:hover:not(:disabled) { background: var(--ui-date-accent); color: white; font-weight: 700; }
.ui-date-calendar button:disabled { opacity: .3; cursor: not-allowed; }
.ui-date-calendar__time { display: flex; align-items: flex-end; gap: .5rem; padding-top: .75rem; }
.ui-date-calendar__time label { flex: 1; font-size: .75rem; font-weight: 700; }
.ui-date-calendar__time input { display: block; width: 100%; height: 2.5rem; margin-top: .25rem; padding: .5rem; border: 1px solid #d6d3d1; border-radius: .5rem; font: inherit; }
.ui-date-calendar__apply { height: 2.5rem; padding: .5rem .75rem; border-radius: .5rem; background: var(--ui-date-accent); color: white; font-size: .8125rem; font-weight: 700; }
.ui-date-calendar__apply:hover:not(:disabled) { background: var(--ui-date-accent) !important; filter: brightness(.9); }
.ui-date-calendar__footer { display: flex; justify-content: space-between; margin-top: .75rem; padding-top: .5rem; border-top: 1px solid #e7e5e4; }
.ui-date-calendar__footer button { padding: .375rem .5rem; border-radius: .5rem; font-size: .75rem; color: #78716c; }
@media print { .ui-date-calendar { display: none !important; } }

/* Editor de órdenes: estilos acotados, sin alterar las demás ventanas. */
.work-order-editor-overlay { overscroll-behavior: none; }
.work-order-editor-overlay > .work-order-editor { height: 90vh; height: 90dvh; min-height: 0; }
.work-order-editor__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 1.25rem; background: #fafaf9; display: flex; flex-direction: column; gap: 1.25rem; }
.work-order-editor__body > * { flex-shrink: 0; }
.work-order-notes-history__body { flex: 1; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.work-order-overview { border: 1px solid #e7e5e4; border-radius: .75rem; background: white; overflow: hidden; }
.work-order-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: white; }
.work-order-summary__section { padding: 1rem; min-width: 0; }
.work-order-summary__section + .work-order-summary__section { border-left: 1px solid #e7e5e4; }
.work-order-section-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.work-order-section-heading h3 { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; color: #57534e; font-size: .75rem; font-weight: 700; margin: 0; }
.work-order-section-heading h3 > svg { color: #9333ea; flex-shrink: 0; }
.work-order-summary__name { font-size: .9375rem; font-weight: 600; color: #292524; margin: 0 0 .5rem; overflow-wrap: anywhere; }
.work-order-summary__details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .375rem .75rem; margin: 0; font-size: .75rem; }
.work-order-summary__details > div { display: flex; gap: .5rem; min-width: 0; }
.work-order-summary__details dt { color: #a8a29e; flex-shrink: 0; }
.work-order-summary__details dd { color: #57534e; margin: 0; overflow-wrap: anywhere; min-width: 0; }
.work-order-summary__wide { grid-column: 1 / -1; }
.work-order-summary__vehicle { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.work-order-summary__vehicle .work-order-summary__name { margin: 0; }
.work-order-license-plate { border: 1px solid #d6d3d1; border-left: 5px solid #1d4ed8; border-radius: .25rem; padding: .125rem .5rem; background: #f5f5f4; color: #292524; font-size: .875rem; font-weight: 700; }
.work-order-icon-button { width: 1.75rem; height: 1.75rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; transition: background-color 150ms, color 150ms; }
.work-order-icon-button:hover { background: #e7e5e4; }
.work-order-history-button { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; padding: .375rem .5rem; border-radius: .5rem; color: #78716c; font-size: .75rem; font-weight: 500; transition: background-color 150ms, color 150ms; }
.work-order-history-button:hover { background: #f5f5f4; color: #7e22ce; }
.work-order-reception { box-sizing: border-box; background: white; border-top: 1px solid #e7e5e4; padding: 1rem 1.25rem 1.25rem; }
.work-order-reception__fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr); gap: .75rem; }
.work-order-reception__fields label, .work-order-complaint__fields label { display: flex; flex-direction: column; gap: .375rem; font-size: .6875rem; font-weight: 600; color: #78716c; min-width: 0; }
.work-order-field { width: 100%; min-width: 0; box-sizing: border-box; height: 2.5rem; padding: .5rem .75rem; border: 1px solid #d6d3d1; border-radius: .5rem; background: white; color: #44403c; font-family: inherit; font-size: .875rem; font-weight: 400; outline: none; }
.work-order-km-unit { position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); color: #a8a29e; font-size: .6875rem; font-weight: 600; pointer-events: none; }
.work-order-field--km { padding-right: 2.5rem; }
.work-order-field:focus, .work-order-description:focus { border-color: #a855f7; box-shadow: 0 0 0 2px #f3e8ff; }
.work-order-field:disabled, .work-order-description:disabled { background: #fafaf9; color: #57534e; opacity: 1; }
.work-order-count { padding: .125rem .375rem; border-radius: .375rem; background: #f5f5f4; color: #78716c; font-size: .6875rem; font-weight: 500; }
.work-order-add-button { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; border: 1px solid #e9d5ff; border-radius: .5rem; background: white; padding: .5rem .75rem; color: #7e22ce; font-size: .75rem; font-weight: 600; white-space: nowrap; transition: background-color 150ms; }
.work-order-add-button:hover { background: #f3e8ff; }
.work-order-times-button { border-color: #d6d3d1; color: #57534e; }
.work-order-times-button:hover { background: #f5f5f4; }
.work-order-complaints__list { display: flex; flex-direction: column; gap: 1rem; }
.work-order-complaints__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.work-order-complaints > .work-order-section-heading { flex-wrap: wrap; }
.work-order-complaint { border: 1px solid #e7e5e4; border-radius: .75rem; background: white; overflow: hidden; }
.work-order-complaint__heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 2.375rem; box-sizing: border-box; padding: .25rem 1rem; background: #f5f5f4; border-bottom: 1px solid #e7e5e4; }
.work-order-complaint__heading .work-order-icon-button { width: 1.5rem; height: 1.5rem; }
@media (pointer: coarse) {
    .work-order-complaint__heading .work-order-icon-button { min-width: 2.5rem; min-height: 2.5rem; }
}
.work-order-complaint__title { font-size: .75rem; font-weight: 600; color: #7e22ce; }
.work-order-complaint__title span { color: inherit; font-weight: 700; margin-left: .25rem; }
.work-order-complaint__body { padding: .875rem 1rem 1rem; }
.work-order-description { display: block; width: 100%; box-sizing: border-box; min-height: 4.5rem; border: 1px solid #e7e5e4; border-radius: .5rem; padding: .75rem; /*background: #fafaf9;*/ color: #44403c; font: inherit; font-size: .875rem; line-height: 1.5; resize: vertical; outline: none; }
.work-order-description.work-order-notes-editor { min-height: 3.75rem; padding: .5rem .75rem; }
.work-order-complaint__fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); gap: .75rem; margin-top: .75rem; }
.work-order-notes { border: 1px solid #e7e5e4; border-radius: .75rem; background: white; }
.work-order-notes__heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem .75rem; }
.work-order-notes__toggle { display: flex; flex: 1; align-items: center; gap: .5rem; min-width: 0; padding: .375rem .25rem; font-size: .75rem; font-weight: 600; color: #57534e; text-align: left; }
.work-order-notes__toggle > svg:first-child { color: #9333ea; }
.work-order-notes__toggle > svg:last-child { margin-left: auto; color: #a8a29e; }
.work-order-notes__body { padding: 0 1rem 1rem; }
.work-order-editor__footer { flex-shrink: 0; padding: .875rem 1.25rem; border-top: 1px solid #e7e5e4; background: #fafaf9; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.work-order-editor__status { display: flex; flex-direction: column; align-items: flex-start; gap: .375rem; min-width: 0; }
.work-order-editor__footer-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; flex-shrink: 0; }
/* Detalle de visitas: misma estructura neutra que los bloques de averías. */
.visit-work-details { display: flex; flex-direction: column; gap: 1.25rem; }
.visit-work-section-title { display: flex; align-items: center; gap: .5rem; margin: 0 0 .625rem; font-size: .75rem; font-weight: 600; color: #78716c; }
.visit-work-section-title > svg { color: #9333ea; }
.visit-work-stack { display: flex; flex-direction: column; gap: .75rem; }
.visit-work-card { border: 1px solid #e7e5e4; border-radius: .75rem; overflow: hidden; background: white; }
.visit-work-card__header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; padding: .625rem .875rem; background: #f5f5f4; border-bottom: 1px solid #e7e5e4; color: #57534e; }
.visit-work-card__header h5 { margin: 0; font-size: .8125rem; font-weight: 600; }
.visit-work-card__header h5 > span { color: #7e22ce; margin-left: .25rem; }
.visit-work-type { padding: .125rem .375rem; border: 1px solid #e7e5e4; border-radius: .375rem; background: white; font-size: .6875rem; color: #78716c; }
.visit-work-card__body { padding: .875rem; min-width: 0; }
.visit-work-description { margin: 0; font-size: .875rem; line-height: 1.5; color: #44403c; white-space: pre-wrap; overflow-wrap: anywhere; }
.visit-work-invoice-heading { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .75rem; font-size: .75rem; color: #78716c; }
.visit-work-invoice-heading h5 { color: #7e22ce; }
.visit-work-group-title { margin: 0 0 .375rem; font-size: .75rem; font-weight: 600; color: #57534e; }
.visit-work-lines { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: .8125rem; color: #44403c; }
.visit-work-lines th { padding: .25rem .375rem; font-weight: 500; font-size: .6875rem; color: #a8a29e; border-bottom: 1px solid #e7e5e4; text-align: left; }
.visit-work-lines td { padding: .25rem .375rem; vertical-align: top; overflow-wrap: anywhere; }
.visit-work-lines th:first-child, .visit-work-lines tr:not(.visit-work-line-category) td:first-child { width: 4.5rem; text-align: center; color: #78716c; }
.visit-work-line-category td { padding-top: .5rem; font-size: .6875rem; color: #a8a29e; }
.visit-work-reference { display: inline; margin-left: .5rem; font-size: .75rem; color: #a8a29e; }
.visit-work-note { padding-top: .625rem; border-top: 1px solid #e7e5e4; }
.visit-work-note h4, .visit-work-note h6 { display: flex; align-items: center; gap: .375rem; margin: 0 0 .25rem; font-size: .6875rem; font-weight: 600; color: #78716c; }
.visit-work-note p { margin: 0; font-size: .8125rem; line-height: 1.5; color: #57534e; white-space: pre-wrap; overflow-wrap: anywhere; }
.visit-work-note--standalone { padding: .75rem .875rem; border: 1px solid #e7e5e4; border-radius: .75rem; background: #fafaf9; }
@media (max-width: 767px) {
    .work-order-editor__body { padding: .75rem; gap: 1rem; }
    .work-order-summary { grid-template-columns: minmax(0, 1fr); }
    .work-order-summary__section + .work-order-summary__section { border-left: 0; border-top: 1px solid #e7e5e4; }
    .work-order-reception__fields { grid-template-columns: minmax(0, 1fr); }
    .work-order-complaint__fields { grid-template-columns: minmax(0, 1fr); }
    .work-order-editor__footer { flex-direction: column; align-items: stretch; padding: .75rem; gap: .75rem; }
    .work-order-editor__footer-actions { justify-content: stretch; }
    .work-order-editor__footer-actions > button { flex: 1; padding-left: .5rem; padding-right: .5rem; }
}

.user-pill {
    display: flex;
    align-items: center;
    gap: 0;
    padding: .25rem;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 9999px;
    transition: background-color 150ms cubic-bezier(.4, 0, .2, 1), border-color 150ms cubic-bezier(.4, 0, .2, 1);
}
.user-pill:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .16); }
.user-pill__avatar {
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
    font-weight: 700;
    border: 2px solid rgba(249, 115, 22, .85);
    border-radius: 9999px;
    background: rgba(255, 255, 255, .10);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), 0 1px 2px rgba(24, 18, 28, .18);
}
.user-pill--large .user-pill__avatar { width: 2.5rem; height: 2.5rem; }
.user-pill__text { display: none; flex-direction: column; }
.user-pill__name,
.user-pill__role { transition: color 150ms cubic-bezier(.4, 0, .2, 1); }
.user-pill__name { color: #fafafa; font-size: .875rem; font-weight: 700; line-height: 1.25; }
.user-pill:hover .user-pill__name { color: white; }
.user-pill__role { margin-top: .125rem; color: #d6d3d1; font-size: .625rem; font-weight: 700; line-height: 1; letter-spacing: .05em; text-transform: uppercase; }
.user-pill:hover .user-pill__role { color: #fdba74; }

.user-menu-popover {
    position: absolute;
    top: calc(100% + .6rem);
    right: 0;
    z-index: 100;
    width: 13.5rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: .45rem;
    color: #44403c;
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(214, 211, 209, .9);
    border-radius: 1.4rem;
    box-shadow: 0 16px 36px rgba(28, 25, 23, .18), 0 2px 8px rgba(28, 25, 23, .08);
    backdrop-filter: blur(16px);
}
.user-menu-action {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .25rem .7rem .25rem .3rem;
    color: #44403c;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 9999px;
    cursor: pointer;
    transition: color 150ms, background-color 150ms, border-color 150ms;
}
.user-menu-action__label {
    min-height: 1.7rem;
    display: flex;
    align-items: center;
    line-height: 1;
}
.user-menu-action:hover { color: #c2410c; background: #fff7ed; border-color: #fed7aa; }
.user-menu-action__icon {
    width: 1.7rem;
    height: 1.7rem;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #78716c;
    background: #f5f5f4;
    border-radius: 9999px;
    transition: color 150ms, background-color 150ms;
}
.user-menu-action:hover .user-menu-action__icon { color: #ea580c; background: #ffedd5; }
.user-menu-action--danger { color: #dc2626; }
.user-menu-action--danger:hover { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }
.user-menu-action--danger .user-menu-action__icon { color: #dc2626; background: #fef2f2; }
.user-menu-action--danger:hover .user-menu-action__icon { color: #b91c1c; background: #fee2e2; }

.header-brand { display: inline-flex; align-items: center; gap: .75rem; flex: 0 0 auto; }
.header-brand__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}
.header-brand__symbol { display: block; width: 2.125rem; height: 2.125rem; object-fit: contain; }
.header-brand__full { display: none; width: auto; height: 2rem; max-width: 9rem; object-fit: contain; }
.header-brand--mobile-full .header-brand__symbol { display: none; }
.header-brand--mobile-full .header-brand__full { display: block; }
.header-brand__divider { width: 1px; height: 1.9rem; background: rgba(255, 255, 255, .16); }
/* Ajuste óptico del texto respecto al logo de la cabecera. */
.section-title { position: relative; top: -1px; margin: 0; color: #fafafa; font-size: 1.125rem; line-height: 1.9rem; font-weight: 600; white-space: nowrap; }

@media (min-width: 640px) {
    .header-brand__symbol { display: none; }
    .header-brand__full { display: block; }
}

.section-header, .auth-header { background: #302b36; }
/* Móvil: los títulos largos se acortan con puntos suspensivos en vez de montarse sobre los botones. */
@media (max-width: 639px) {
    .section-header > div > :first-child,
    .section-header > div > :first-child > div:has(> .section-title) { min-width: 0; }
    .section-header > div { column-gap: .5rem; }
    .section-header > div > :last-child:not(:first-child) { flex-shrink: 0; }
    .section-header .section-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 1rem; }
}

.section-header {
    position: sticky;
    top: 0;
    /* Por encima del contenido que se desplaza (p. ej. el filtro de las tarjetas de estadísticas, z 30). */
    z-index: 40;
    padding: .75rem 1rem;
    color: #fafafa;
    border-bottom: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 2px 10px rgba(24, 18, 28, .18);
}
.section-header--static { position: relative; flex-shrink: 0; }
.section-header--z10 { z-index: 10; }
.section-header--z30 { z-index: 30; }
.section-header--z50 { z-index: 50; }
.section-header--z60 { z-index: 60; }

.ui-toast {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    max-width: 90vw;
    padding: .75rem 1.5rem;
    color: white;
    border-radius: 9999px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .15);
    transform: translateX(-50%);
    animation: fadeInOpacity .2s ease-out;
}
/* Con left: 50% el aviso solo podía ocupar media pantalla en móvil. */
@media (max-width: 639px) { .ui-toast { width: max-content; } }
.ui-toast--error { background: #dc2626; }
.ui-toast--success { background: #059669; }
.ui-toast--info { background: #292524; }
.ui-toast--warning { background: #d97706; }
.ui-toast__message { font-size: .875rem; font-weight: 500; }

.ui-action-pill { display: inline-flex; align-items: center; padding: .125rem; background: rgb(245 245 244 / .8); border: 1px solid #e7e5e4; border-radius: 9999px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.ui-action-button { width: 1.75rem; height: 1.75rem; display: flex; align-items: center; justify-content: center; border-radius: 9999px; transition: color 150ms, background-color 150ms; }

/* Edición de conceptos de facturas de taller, sin afectar a la impresión. */
.workshop-invoice-billing-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 5rem auto; align-items: end; gap: .75rem; }
.workshop-invoice-toolbar { padding: 1rem; background: #fafaf9; border-bottom: 1px solid #e7e5e4; }
/* Destino · buscador (todo el ancho libre) · escanear · conceptos, siempre en la misma línea */
.workshop-invoice-toolbar__search { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto auto; gap: .75rem; align-items: end; }
.workshop-invoice-control { height: 2.5rem; border: 1px solid #d6d3d1; border-radius: .5rem; background: white; color: #44403c; font: inherit; font-size: .875rem; outline: none; }
.workshop-invoice-control:focus { border-color: #6366f1; box-shadow: 0 0 0 2px rgb(99 102 241 / .15); }
.workshop-invoice-concept-pill { display: flex; height: 2.5rem; padding: .25rem; border: 1px solid #e7e5e4; border-radius: .5rem; background: #f5f5f4; }
.workshop-invoice-concept-button { display: flex; align-items: center; justify-content: center; padding: 0 .75rem; border-radius: .375rem; color: #a8a29e; transition: all 150ms cubic-bezier(.4, 0, .2, 1); }
.workshop-invoice-concept-button svg { color: inherit; flex-shrink: 0; }
.workshop-invoice-concept-button:first-child svg { color: #6366f1; }
.workshop-invoice-concept-button:hover { color: #57534e; }
.workshop-invoice-concept-button:nth-child(2):hover { color: #d97706; }
.workshop-invoice-concept-button:nth-child(3):hover { color: #292524; }
.workshop-invoice-concept-button:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.workshop-invoice-lines input { min-height: 2rem; padding: .375rem .5rem; border: 1px solid transparent; border-radius: .375rem; background: transparent; font-family: inherit; outline: none; transition: border-color 150ms, background-color 150ms; }
.workshop-invoice-lines input[type=number] { background: white; border-color: #e7e5e4; }
.workshop-invoice-lines input:hover { border-color: #d6d3d1; }
.workshop-invoice-lines input:focus { background: white; border-color: #6366f1; box-shadow: 0 0 0 2px rgb(99 102 241 / .12); }
.workshop-invoice-chapter { background: #f5f5f4; }
.workshop-invoice-chapter__label { display: inline-flex; align-items: center; flex-shrink: 0; padding: .125rem .625rem .125rem 0; border-right: 1px solid #d6d3d1; color: #57534e; font-size: .75rem; font-weight: 600; white-space: nowrap; }
@media (max-width: 639px) {
    .workshop-invoice-billing-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .workshop-invoice-billing-controls > :first-child { grid-column: 1 / -1; }
    .workshop-invoice-toolbar__search { grid-template-columns: minmax(0, 1fr) auto auto; gap: .5rem; }
    .workshop-invoice-toolbar__search > :first-child { grid-column: 1 / -1; }
    .workshop-invoice-concept-button { padding: 0 1rem; }
}
.ui-time-value { font-family: inherit; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; letter-spacing: -.01em; }
.ui-modal-close { width: 1.75rem; height: 1.75rem; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; color: #a8a29e; background: transparent; border: 0; cursor: pointer; transition: color 150ms; }
.ui-modal-close:hover { color: #57534e; }

/* Ventanas y acciones compartidas */
.ui-modal-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.ui-modal-frame { max-height: 90vh !important; max-height: 90dvh !important; }
.ui-receipt-frame { height: 90vh !important; height: 90dvh !important; }
@media (max-width: 639px) { .ui-modal-frame--mobile-full { max-height: 100vh !important; max-height: 100dvh !important; } }
.ui-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.ui-modal-form > [data-modal-footer-bar] { margin-top: 0 !important; flex-shrink: 0; }
.ui-receipt-layout { overscroll-behavior: contain; }
.ui-receipt-layout > :first-child { min-height: 0; }
@media (max-width: 767px) {
    .ui-receipt-layout { display: block !important; overflow-y: auto !important; }
    .ui-receipt-layout > :first-child { height: auto; max-height: 16rem; }
    .ui-receipt-content { height: auto !important; }
    .ui-receipt-lines { flex: none !important; overflow-x: auto; }
    .ui-receipt-lines > .overflow-hidden { overflow-x: auto; }
    /* Entrada de mercancía en el móvil: pantalla completa, un solo desplazamiento y pie compacto. */
    .ui-receipt-frame { height: 100vh !important; height: 100dvh !important; max-width: none !important; border-radius: 0 !important; }
    .ui-receipt-providers { border-right: 0 !important; border-bottom: 1px solid #e7e5e4; }
    .ui-receipt-providers--chosen, .ui-receipt-providers--creating { max-height: none !important; }
    .ui-receipt-providers--chosen .ui-receipt-providers__picker { display: none !important; }
    .ui-receipt-lines { padding: .75rem !important; }
    .ui-modal-footer--invoice .ui-modal-footer__tools { justify-content: space-between; }
    .ui-receipt-actions { width: 100%; }
    .ui-receipt-actions > * { flex: 1 1 0; padding-left: .75rem !important; padding-right: .75rem !important; }
}
.ui-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, .60);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
/* Recepción rápida (Pedidos): sus avisos (exceso, pedido completo…) se abren encima
   y, mientras está abierta, no vuelven a oscurecer el fondo. */
.ui-modal-overlay.quick-receipt-overlay { z-index: 45; }
body:has(.quick-receipt-overlay) #root .ui-modal-overlay { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.ui-modal-overlay--light { background: rgba(0, 0, 0, .50); }
.ui-modal-overlay--danger { background: rgba(127, 29, 29, .40); }
.ui-modal-overlay--z60 { z-index: 60; }
.ui-modal-overlay--z70 { z-index: 70; }
.ui-modal-overlay--z100 { z-index: 100; }

.ui-modal-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    background: #fff;
    border-radius: .75rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .30);
}
.ui-modal-panel--confirm {
    max-width: 24rem;
    padding: 1.5rem;
    text-align: center;
}
.ui-modal-panel--rounded-2xl { border-radius: 1rem; }
.invoice-preview-totals > tr > td {
    padding: .375rem .75rem;
    line-height: 1.25;
    vertical-align: middle;
}
.invoice-preview-totals > .invoice-preview-totals__total > td {
    padding-top: .5rem;
    padding-bottom: .5rem;
}
.invoice-preview-totals > .invoice-preview-totals__total > td:last-child {
    font-size: 1rem;
}
.invoice-verifactu-summary {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
}
.invoice-verifactu-summary__hash {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}
.invoice-verifactu-summary__hash .font-bold { flex-shrink: 0; }
@media (min-width: 640px) {
    .invoice-verifactu-summary { flex-direction: row; align-items: center; }
    .invoice-verifactu-summary > :not(.invoice-verifactu-summary__hash) { flex: 0 0 auto; }
}
.ui-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    padding: .75rem 1.25rem;
    background: #f5f5f4;
    border-bottom: 1px solid #e7e5e4;
}
/* Cabeceras compactas: solo ventanas, no cabeceras de sección o filtros. */
:is(.ui-modal-header, [data-modal-header]) {
    box-sizing: border-box;
    min-height: 2.8125rem;
    padding: .5rem 1rem !important;
    gap: .5rem !important;
    flex-shrink: 0;
}
:is(.ui-modal-header, [data-modal-header]) :is(h2, h3) {
    margin: 0;
    min-width: 0;
    font-family: inherit;
    font-size: .9375rem !important;
    line-height: 1.25rem !important;
}
:is(.ui-modal-header, [data-modal-header]) svg {
    width: 1rem !important;
    height: 1rem !important;
    flex-shrink: 0;
}
/* Títulos de ventana: mismo estilo en toda la web. El texto siempre en gris oscuro y el icono del color
   de la sección, que es el del borde superior de la ventana (border-t-4 border-COLOR-500/600/800). */
:is(.ui-modal-header, [data-modal-header]) :is(h2, h3) { color: #292524; }
:is(.border-blue-500, .border-blue-600, .border-blue-800) :is(.ui-modal-header, [data-modal-header]) :is(h2, h3) svg { color: #2563eb; }
:is(.border-red-500, .border-red-600, .border-red-800) :is(.ui-modal-header, [data-modal-header]) :is(h2, h3) svg { color: #dc2626; }
:is(.border-fuchsia-500, .border-fuchsia-600, .border-fuchsia-800) :is(.ui-modal-header, [data-modal-header]) :is(h2, h3) svg { color: #c026d3; }
:is(.border-amber-500, .border-amber-600, .border-amber-800) :is(.ui-modal-header, [data-modal-header]) :is(h2, h3) svg { color: #d97706; }
:is(.border-purple-500, .border-purple-600, .border-purple-800) :is(.ui-modal-header, [data-modal-header]) :is(h2, h3) svg { color: #9333ea; }
:is(.border-stone-500, .border-stone-600, .border-stone-800) :is(.ui-modal-header, [data-modal-header]) :is(h2, h3) svg { color: #57534e; }
:is(.border-lime-500, .border-lime-600, .border-lime-800) :is(.ui-modal-header, [data-modal-header]) :is(h2, h3) svg { color: #65a30d; }
:is(.border-orange-500, .border-orange-600, .border-orange-800) :is(.ui-modal-header, [data-modal-header]) :is(h2, h3) svg { color: #ea580c; }
:is(.border-indigo-500, .border-indigo-600, .border-indigo-800) :is(.ui-modal-header, [data-modal-header]) :is(h2, h3) svg { color: #4f46e5; }
:is(.border-pink-500, .border-pink-600, .border-pink-800) :is(.ui-modal-header, [data-modal-header]) :is(h2, h3) svg { color: #db2777; }
:is(.border-emerald-500, .border-emerald-600, .border-emerald-800) :is(.ui-modal-header, [data-modal-header]) :is(h2, h3) svg { color: #059669; }
:is(.border-cyan-500, .border-cyan-600, .border-cyan-800) :is(.ui-modal-header, [data-modal-header]) :is(h2, h3) svg { color: #0891b2; }
:is(.border-violet-500, .border-violet-600, .border-violet-800) :is(.ui-modal-header, [data-modal-header]) :is(h2, h3) svg { color: #7c3aed; }
:is(.border-rose-500, .border-rose-600, .border-rose-800) :is(.ui-modal-header, [data-modal-header]) :is(h2, h3) svg { color: #e11d48; }
:is(.border-green-500, .border-green-600, .border-green-800) :is(.ui-modal-header, [data-modal-header]) :is(h2, h3) svg { color: #16a34a; }
:is(.border-sky-500, .border-sky-600, .border-sky-800) :is(.ui-modal-header, [data-modal-header]) :is(h2, h3) svg { color: #0284c7; }
/* Las píldoras de acciones de la barra de título usan el mismo tamaño de icono que en las tablas. */
:is(.ui-modal-header, [data-modal-header]) .ui-action-pill svg {
    width: .875rem !important;
    height: .875rem !important;
}
:is(.ui-modal-header, [data-modal-header]) .ui-modal-close svg {
    width: 1.125rem !important;
    height: 1.125rem !important;
}
@media (pointer: coarse) {
    :is(.ui-modal-header, [data-modal-header]) .ui-modal-close {
        min-width: 2.5rem;
        min-height: 2.5rem;
    }
}
.ui-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    padding: 1rem;
    background: #fafaf9;
    border-top: 1px solid #e7e5e4;
}
/* La barra del pie y sus textos comparten proporciones. Las marcas de barra
   se reservan al pie completo, no a grupos de botones dentro del formulario. */
:is(.ui-modal-footer, [data-modal-footer-bar]) {
    box-sizing: border-box;
    flex-shrink: 0;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center !important;
    gap: .5rem 1rem !important;
    padding: .75rem 1rem !important;
    background: #fafaf9 !important;
    border-top: 1px solid #e7e5e4 !important;
    box-shadow: none !important;
    font-family: inherit;
    font-size: .8125rem;
    line-height: 1.25rem;
}
:is(.ui-modal-footer, [data-modal-footer-bar]) :is(.text-sm, .text-base) { font-size: .8125rem !important; line-height: 1.25rem !important; }
:is(.ui-modal-footer, [data-modal-footer-bar]) .text-xs { font-size: .6875rem !important; line-height: 1rem !important; }
:is(.ui-modal-footer, [data-modal-footer-bar]) :is(.text-lg, .text-xl) { font-size: .875rem !important; line-height: 1.25rem !important; }
:is(.ui-modal-footer, [data-modal-footer-bar]) :is(.text-2xl, .text-3xl) { font-size: 1rem !important; line-height: 1.25rem !important; }
:is(.ui-modal-footer, [data-modal-footer-bar]) .font-mono { font-family: inherit !important; font-variant-numeric: tabular-nums; }
.ui-modal-footer__summary { min-width: 0; font-size: .75rem; line-height: 1.125rem; overflow-wrap: anywhere; }
.ui-modal-footer__summary p { margin: 0; }
.ui-modal-footer__tools { display: flex; flex: 1; min-width: 0; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .5rem 1rem; }
.ui-modal-footer__metric { text-align: right; flex-shrink: 0; }
.ui-modal-footer__label { font-size: .6875rem; font-weight: 600; line-height: .875rem; text-transform: uppercase; }
.ui-modal-footer__value { font-family: inherit; font-size: .875rem; font-weight: 500; line-height: 1.25rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-modal-footer__value--total { font-size: 1rem; font-weight: 700; }
.ui-modal-footer__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; }
@media (max-width: 639px) {
    .ui-modal-footer--invoice .ui-modal-footer__summary { width: 100%; }
    .ui-modal-footer--invoice .ui-modal-footer__tools { width: 100%; flex-basis: 100%; }
}

.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: color 150ms, background-color 150ms, border-color 150ms, opacity 150ms, transform 150ms;
}
.ui-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
}
/* Botón normal en toda la web (secciones y ventanas): misma altura y letra que los campos
   de 40 px. Los pies de ventana y las confirmaciones conservan su regla propia de 42 px. */
.ui-btn--md {
    box-sizing: border-box;
    min-height: 2.5rem;
    padding: .5rem 1rem;
    border-radius: .5rem;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.25rem;
}
.ui-btn--md.text-xs { font-size: .75rem; line-height: 1rem; }
.ui-btn--md svg { flex-shrink: 0; }
/* Tamaño compacto para acciones del pie de ventanas. No afecta cabeceras,
   buscadores, tarjetas principales ni píldoras de acciones de las tablas. */
:is(.ui-modal-footer, [data-modal-footer], .ui-confirm__actions) :is(button, input[type="submit"], input[type="button"], a[role="button"]):not(.ui-action-pill *, .ui-pager *, .ui-footer-link),
[data-modal-footer-button] {
    box-sizing: border-box;
    height: auto !important;
    min-height: 2.625rem !important;
    padding: .625rem 1rem !important;
    font-family: inherit !important;
    font-size: .875rem !important;
    font-weight: 700 !important;
    line-height: 1.25rem !important;
    gap: .375rem !important;
    border-radius: .5rem !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05) !important;
}
/* Acción discreta del pie (por ejemplo, eliminar): enlace de texto, sin aspecto de botón. */
.ui-footer-link { display: inline-flex; align-items: center; gap: .25rem; padding: 0; background: none; border: 0; font-size: .75rem; font-weight: 500; color: #a8a29e; cursor: pointer; transition: color 150ms; }
.ui-footer-link:hover { color: #dc2626; text-decoration: underline; }
.ui-footer-link svg { width: .875rem; height: .875rem; flex-shrink: 0; }
/* Fichas abiertas en modo lectura: los campos se ven como los deshabilitados de siempre. */
.ui-readonly-fields :is(input, select, textarea):disabled { background-color: #f5f5f4 !important; color: #78716c !important; cursor: default; opacity: 1; -webkit-text-fill-color: #78716c; }
.ui-readonly-fields button:disabled { cursor: default; }
/* Títulos de las tarjetas de Configuración: icono algo menor que el del título de página. */
.settings-card-title svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }
/* Ventana abierta encima de otra (p. ej. ficha del cliente desde una cita): sin segundo fondo oscuro. */
.ui-nested-modal > .fixed.inset-0 { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
/* Paginador común: discreto, fuera de las reglas de botones del pie. */
.ui-pager { display: inline-flex; align-items: center; gap: .375rem; flex-shrink: 0; margin-left: auto; }
.ui-pager .ui-pager__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    color: #57534e;
    background: #fff;
    border: 1px solid #d6d3d1;
    border-radius: .5rem;
    cursor: pointer;
    transition: background-color 150ms, border-color 150ms, opacity 150ms;
}
.ui-pager .ui-pager__btn:hover:not(:disabled) { background: #f5f5f4; border-color: #a8a29e; }
.ui-pager .ui-pager__btn:disabled { opacity: .4; cursor: not-allowed; }
.ui-pager .ui-pager__btn:focus-visible { outline: 2px solid #78716c; outline-offset: 2px; }
.ui-pager__status { min-width: 3rem; text-align: center; font-size: .75rem; font-weight: 600; color: #57534e; font-variant-numeric: tabular-nums; }
@media (pointer: coarse) {
    .ui-pager .ui-pager__btn { width: 2.5rem; height: 2.5rem; }
}
/* Misma separación entre botones en todos los pies, con o sin barra. */
[data-modal-footer] { gap: .5rem !important; }
/* Móvil: el grupo de acciones ocupa su propia fila y los botones se reparten
   el ancho, como en el editor de órdenes. Las confirmaciones siguen centradas. */
@media (max-width: 639px) {
    [data-modal-footer]:not([data-modal-footer-bar], [data-confirm-dialog] [data-modal-footer]) { width: 100%; justify-content: stretch !important; }
    /* Botones estirados al ancho: su texto e icono, centrados (algunos botones son flex sin justify-center). */
    [data-modal-footer]:not([data-confirm-dialog] [data-modal-footer]) > :is(button, input[type="submit"], input[type="button"], a[role="button"]):not(.ui-footer-link) { flex: 1 1 auto; justify-content: center; text-align: center; }
}
:is(.ui-modal-footer, [data-modal-footer], .ui-confirm__actions) :is(button, a[role="button"]):not(.ui-action-pill *, .ui-pager *, .ui-footer-link) svg,
[data-modal-footer-button] svg {
    width: 1.125rem !important;
    height: 1.125rem !important;
    flex-shrink: 0;
}
@media (pointer: coarse) {
    :is(.ui-modal-footer, [data-modal-footer], .ui-confirm__actions) :is(button, input[type="submit"], input[type="button"], a[role="button"]):not(.ui-action-pill *, .ui-pager *, .ui-footer-link),
    [data-modal-footer-button] { min-height: 2.75rem !important; }
}
/* Acciones secundarias del pie: contraste y borde suave sobre la barra clara.
   Incluye ventanas antiguas y confirmaciones; conserva los colores de acciones principales. */
:is(
    :is(.ui-modal-footer, [data-modal-footer], .ui-confirm__actions) :is(button, input[type="button"], input[type="submit"], a[role="button"]),
    [data-modal-footer-button]
):is(
    .ui-btn--secondary, .ui-confirm__cancel,
    [class~="text-stone-500"], [class~="text-stone-600"], [class~="text-stone-700"],
    [class~="text-slate-500"], [class~="text-slate-600"], [class~="text-slate-700"],
    [class~="bg-stone-100"], [class~="bg-slate-100"]
):not(.ui-action-pill *) {
    color: #44403c !important;
    background: #f5f5f4 !important;
    border: 1px solid #e7e5e4 !important;
}
:is(
    :is(.ui-modal-footer, [data-modal-footer], .ui-confirm__actions) :is(button, input[type="button"], input[type="submit"], a[role="button"]),
    [data-modal-footer-button]
):is(
    .ui-btn--secondary, .ui-confirm__cancel,
    [class~="text-stone-500"], [class~="text-stone-600"], [class~="text-stone-700"],
    [class~="text-slate-500"], [class~="text-slate-600"], [class~="text-slate-700"],
    [class~="bg-stone-100"], [class~="bg-slate-100"]
):not(.ui-action-pill *):hover:not(:disabled) {
    background: #e7e5e4 !important;
    border-color: #e7e5e4 !important;
}
:is(
    :is(.ui-modal-footer, [data-modal-footer], .ui-confirm__actions) :is(button, input[type="button"], input[type="submit"], a[role="button"]),
    [data-modal-footer-button]
):is(
    .ui-btn--secondary, .ui-confirm__cancel,
    [class~="text-stone-500"], [class~="text-stone-600"], [class~="text-stone-700"],
    [class~="text-slate-500"], [class~="text-slate-600"], [class~="text-slate-700"],
    [class~="bg-stone-100"], [class~="bg-slate-100"]
):not(.ui-action-pill *):focus-visible {
    outline: 2px solid #78716c;
    outline-offset: 2px;
}

/* Mismo aspecto que las acciones secundarias del pie (Cerrar, Cancelar…) en toda la web. */
.ui-btn--secondary { color: #44403c; background: #f5f5f4; border-color: #e7e5e4; }
.ui-btn--secondary:hover:not(:disabled) { background: #e7e5e4; border-color: #e7e5e4; }
.ui-btn--primary { color: #fff; background: #4d7c0f; }
.ui-btn--primary:hover:not(:disabled) { background: #3f6212; }
.ui-btn--success { color: #fff; background: #16a34a; }
.ui-btn--success:hover:not(:disabled) { background: #15803d; }
.ui-btn--danger { color: #fff; background: #dc2626; }
.ui-btn--danger:hover:not(:disabled) { background: #b91c1c; }
.ui-btn--danger-dark { color: #fff; background: #991b1b; }
.ui-btn--danger-dark:hover:not(:disabled) { background: #7f1d1d; }
.ui-btn--warning { color: #fff; background: #f59e0b; }
.ui-btn--warning:hover:not(:disabled) { background: #d97706; }
.ui-btn--info { color: #fff; background: #2563eb; }
.ui-btn--info:hover:not(:disabled) { background: #1d4ed8; }
.ui-btn--indigo { color: #fff; background: #4f46e5; }
.ui-btn--indigo:hover:not(:disabled) { background: #4338ca; }
.ui-btn--sky { color: #fff; background: #0284c7; }
.ui-btn--sky:hover:not(:disabled) { background: #0369a1; }
.ui-btn--outline-indigo { color: #4338ca; background: #fff; border-color: #c7d2fe; }
.ui-btn--outline-indigo:hover:not(:disabled) { background: #eef2ff; }
.ui-btn--outline-sky { color: #0369a1; background: #fff; border-color: #bae6fd; }
.ui-btn--outline-sky:hover:not(:disabled) { background: #f0f9ff; }
.ui-btn--dark { color: #fff; background: #44403c; }
.ui-btn--dark:hover:not(:disabled) { background: #292524; }

.ui-icon-action {
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 0;
    border-radius: 9999px;
    color: #a8a29e;
    background: transparent;
    cursor: pointer;
    transition: color 150ms, background-color 150ms, opacity 150ms;
    outline: none;
}
.ui-icon-action:disabled { opacity: .4; cursor: not-allowed; }
.ui-icon-action--neutral:hover:not(:disabled) { color: #292524; background: #f5f5f4; }
.ui-icon-action--primary:hover:not(:disabled) { color: #65a30d; background: #f7fee7; }
.ui-icon-action--indigo:hover:not(:disabled) { color: #4f46e5; background: #eef2ff; }
.ui-icon-action--sky:hover:not(:disabled) { color: #0284c7; background: #f0f9ff; }
.ui-icon-action--warning:hover:not(:disabled) { color: #d97706; background: #fffbeb; }
.ui-icon-action--danger:hover:not(:disabled) { color: #dc2626; background: #fef2f2; }
.ui-icon-action--restore { color: #65a30d; }
.ui-icon-action--restore:hover:not(:disabled) { color: #fff; background: #65a30d; }

.ui-progress-fill {
    height: 100%;
    transition: width 500ms ease-out, background-color 500ms ease-out;
}

.ui-loading { display: flex; align-items: center; justify-content: center; padding: 2.5rem; }
.ui-loading--fullscreen { min-height: 100vh; background: #fafaf9; }
.ui-loading__spinner { width: 2rem; height: 2rem; border: 4px solid #e7e5e4; border-top-color: #78716c; border-radius: 9999px; animation: spin 1s linear infinite; }
.ui-loading__spinner--lime { border-top-color: #65a30d; }
.ui-loading__spinner--blue { border-top-color: #2563eb; }
.ui-loading__spinner--cyan { border-top-color: #0891b2; }
.ui-loading__spinner--indigo { border-top-color: #4f46e5; }
.ui-loading__spinner--red { border-top-color: #dc2626; }
.ui-loading__spinner--sky { border-top-color: #0284c7; }
.ui-loading__spinner--violet { border-top-color: #7c3aed; }
.ui-loading__spinner--teal { border-top-color: #0d9488; }

.ui-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2.5rem; color: #a8a29e; text-align: center; }
/* Tabla vacía: icono y frase centrados en un hueco de altura suficiente */
td > .ui-empty-state { min-height: 14rem; }
.ui-empty-state__icon { margin-bottom: .75rem; opacity: .55; }
.ui-empty-state__title { color: #57534e; font-size: 1rem; font-weight: 700; }
.ui-empty-state__message { margin-top: .25rem; font-size: .875rem; }

.ui-confirm-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(0, 0, 0, .6); backdrop-filter: blur(4px); }
.ui-confirm { width: 100%; max-width: 24rem; overflow: hidden; background: white; border-top: 4px solid; border-radius: .75rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .3); animation: zoomInScale .2s ease-out; }
.ui-confirm--danger { border-color: #dc2626; }
.ui-confirm--success { border-color: #65a30d; }
.ui-confirm--warning { border-color: #f59e0b; }
.ui-confirm__body { padding: 1.5rem; text-align: center; }
.account-security-dialog { max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); overflow-y: auto; overscroll-behavior: contain; }
.ui-confirm__icon, [data-confirm-icon] { width: 3rem !important; height: 3rem !important; min-width: 3rem; min-height: 3rem; display: flex; align-items: center; justify-content: center; margin: 0 auto .75rem !important; border-radius: 9999px; }
.ui-confirm__icon svg, [data-confirm-icon] svg { width: 1.5rem !important; height: 1.5rem !important; flex-shrink: 0; }
.ui-confirm__icon--danger { color: #dc2626; background: #fee2e2; }
.ui-confirm__icon--success { color: #65a30d; background: #ecfccb; }
.ui-confirm__icon--warning { color: #d97706; background: #fef3c7; }
.ui-confirm__title { margin-bottom: .5rem; color: #1c1917; font-size: 1.25rem; font-weight: 700; }
.ui-confirm__message { margin-bottom: 1.5rem; color: #57534e; font-size: .875rem; }
.ui-confirm__actions { display: flex; gap: .75rem; }
.ui-confirm__cancel,
.ui-confirm__accept { flex: 1; padding: .625rem 1rem; border-radius: .5rem; font-weight: 700; transition: background-color 150ms; }
.ui-confirm__cancel { color: #44403c; background: #f5f5f4; }
.ui-confirm__cancel:hover { background: #e7e5e4; }
.ui-confirm__accept { color: white; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .12); }
.ui-confirm__accept--danger { background: #dc2626; }
.ui-confirm__accept--danger:hover { background: #b91c1c; }
.ui-confirm__accept--success { background: #65a30d; }
.ui-confirm__accept--success:hover { background: #4d7c0f; }
.ui-confirm__accept--warning { background: #d97706; }
.ui-confirm__accept--warning:hover { background: #b45309; }
/* Proporciones intermedias: confirmación algo más alta sin botones estirados. */
.ui-confirm__actions, [data-confirm-dialog] [data-modal-footer] { justify-content: center; flex-wrap: wrap; }
:is(.ui-confirm__actions, [data-confirm-dialog] [data-modal-footer]) button {
    flex: 0 1 auto !important;
    min-width: 6.5rem;
    min-height: 2.625rem !important;
    max-width: 100%;
    padding: .625rem 1rem !important;
}
@media (pointer: coarse) {
    :is(.ui-confirm__actions, [data-confirm-dialog] [data-modal-footer]) button { min-height: 2.75rem !important; }
}

@media (min-width: 640px) {
    .user-pill { gap: .75rem; padding-right: 1rem; }
    .user-pill__text { display: flex; }
}

/* =========================================
   COMPONENTES UI: SPINNERS
   ========================================= */

/* Spinner Base (Violeta por defecto - usado en Backup) */
.spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border-left-color: #7c3aed; /* Violeta base */
    animation: spin 1s ease infinite;
}

/* Variaciones de Color por Módulo */
.spinner-cyan { border-left-color: #0891b2; }   /* Agenda */
.spinner-lime { border-left-color: #65a30d; }   /* Seguimiento y Pedidos */
.spinner-blue { border-left-color: #0099ff; }   /* Reloj */
.spinner-red  { border-left-color: #991b1b; }   /* Usuarios */
.spinner-teal { border-left-color: #14b8a6; }   /* Tareas */
.spinner-brown { border-left-color: #78350f; }  /* Proveedores (Nuevo) */

/* Animación de rotación compartida */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* =========================================
   TARJETAS DEL DASHBOARD (INDEX)
   ========================================= */
.card-dashboard {
    background-color: white;
    padding: 1.5rem; /* p-6 */
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
    border: 1px solid #e7e5e4; /* border-stone-200 */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.card-dashboard:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.card-icon-circle {
    width: 4rem;
    height: 4rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

/* Colores Específicos de Tarjetas */
.card-cyan:hover { border-color: #06b6d4; }
.card-cyan .card-icon-circle { background-color: #ecfeff; color: #0891b2; }
.card-cyan:hover .card-icon-circle { background-color: #0891b2; color: white; }

.card-blue:hover { border-color: #3b82f6; }
.card-blue .card-icon-circle { background-color: #eff6ff; color: #2563eb; }
.card-blue:hover .card-icon-circle { background-color: #2563eb; color: white; }

.card-lime:hover { border-color: #84cc16; }
.card-lime .card-icon-circle { background-color: #f7fee7; color: #65a30d; }
.card-lime:hover .card-icon-circle { background-color: #65a30d; color: white; }

.card-teal:hover { border-color: #14b8a6; }
.card-teal .card-icon-circle { background-color: #f0fdfa; color: #0d9488; }
.card-teal:hover .card-icon-circle { background-color: #0d9488; color: white; }

.card-orange:hover { border-color: #f97316; }
.card-orange .card-icon-circle { background-color: #fff7ed; color: #ea580c; }
.card-orange:hover .card-icon-circle { background-color: #ea580c; color: white; }

.card-red:hover { border-color: #ef4444; }
.card-red .card-icon-circle { background-color: #fef2f2; color: #dc2626; }
.card-red:hover .card-icon-circle { background-color: #dc2626; color: white; }

.card-violet:hover { border-color: #8b5cf6; }
.card-violet .card-icon-circle { background-color: #f5f3ff; color: #7c3aed; }
.card-violet:hover .card-icon-circle { background-color: #7c3aed; color: white; }

/* NUEVO: Tema Marrón (Proveedores) */
.card-brown:hover { border-color: #d97706; } /* amber-600 */
.card-brown .card-icon-circle { background-color: #fffbeb; color: #92400e; } /* amber-50, amber-800 */
.card-brown:hover .card-icon-circle { background-color: #92400e; color: white; }


/* =========================================
   ANIMACIONES
   ========================================= */

.animate-fade-in { animation: fadeIn 0.5s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.animate-in { animation-duration: 0.3s; animation-fill-mode: both; }
.fade-in { animation-name: fadeInOpacity; }
.zoom-in { animation-name: zoomInScale; }

@keyframes fadeInOpacity { from { opacity: 0; } to { opacity: 1; } }
@keyframes zoomInScale { from { transform: scale(0.95); } to { transform: scale(1); } }

.slide-in-from-top-2 { animation-name: slideInFromTop; }
@keyframes slideInFromTop { from { opacity: 0; transform: translateY(-0.5rem); } to { opacity: 1; transform: translateY(0); } }

.slide-in-from-bottom-4 { animation-name: slideInFromBottom; }
@keyframes slideInFromBottom { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: translateY(0); } }

@keyframes pulse-soft { 0%, 100% { opacity: 1; } 50% { opacity: .7; } }
.animate-pulse { animation: pulse-soft 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

@keyframes slideUpFade { from { opacity: 0; transform: translateY(20px); }o { opacity: 1; transform: translateY(0); }}
.animate-slide-up { animation: slideUpFade 0.3s ease-out forwards; }


.toast-centered-bottom {
    left: 50%;
    transform: translateX(-50%); /* Centrado horizontal inicial */
    animation: slideUpCenter 0.3s ease-out forwards;
    
    /* --- CORRECCIÓN PARA MÓVIL --- */
    width: fit-content;       /* Ajusta el ancho al contenido real */
    max-width: 90vw;          /* Evita que sea más ancho que el 90% de la pantalla */
    white-space: normal;      /* Permite que el texto baje de línea si es muy largo */
    text-align: center;       /* Centra el texto si hay varias líneas */
}

@keyframes slideUpCenter {
    from { 
        opacity: 0; 
        transform: translate(-50%, 20px); /* Mantiene centro X, baja en Y */
    }
    to { 
        opacity: 1; 
        transform: translate(-50%, 0); /* Mantiene centro X, posición final Y */
    }
}


/* =========================================
   COMPONENTES DE FORMULARIO (Inputs, Sliders, Checks)
   ========================================= */

/* --- Sliders (Range) --- */
/* Base (Cyan - Agenda) */
input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; }
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; height: 16px; width: 16px; border-radius: 50%;
    background: #0891b2; cursor: pointer; margin-top: -6px; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 4px; cursor: pointer; background: #cbd5e1; border-radius: 2px; }

/* Variación Slider Rojo (Pedidos) */
.range-red::-webkit-slider-thumb { background: #dc2626; height: 20px; width: 20px; margin-top: -8px; }

/* Variación Slider Teal (Tareas) */
.range-teal::-webkit-slider-thumb { background: #0d9488; height: 20px; width: 20px; margin-top: -8px; }
.range-teal::-webkit-slider-runnable-track { background: #ccfbf1; }

/* --- Checkboxes & Switches --- */
/* Toggle Switch (Usuarios) */
.toggle-checkbox:checked { right: 0; border-color: #ef4444; }
.toggle-checkbox:checked + .toggle-label { background-color: #ef4444; }
.toggle-checkbox.toggle-checkbox--success:checked { border-color: #16a34a; }
.toggle-checkbox.toggle-checkbox--success:checked + .toggle-label { background-color: #16a34a; }

/* Checkbox Tareas (Circular Teal) */
.checkbox-wrapper input:checked + div {
    background-color: #14b8a6; /* teal-500 */
    border-color: #14b8a6;
}
.checkbox-wrapper input:checked + div svg {
    display: block;
}

/* =========================================
   UTILIDADES & DECORACIÓN
   ========================================= */

/* Scrollbar personalizado */
.day-view-scroll::-webkit-scrollbar { width: 8px; }
.day-view-scroll::-webkit-scrollbar-track { background: #f1f5f9; }
.day-view-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.day-view-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Ocultar scrollbar (Tareas) */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Cursores */
.cursor-grab { cursor: grab; }
.cursor-grabbing { cursor: grabbing !important; }
.draggable-item { cursor: grab; }
.draggable-item:active { cursor: grabbing; }
.dragging { opacity: 0.5; background: #f3f4f6; }

/* Fondo Decorativo (404) */
.pattern-bg {
    background-image: radial-gradient(#fecaca 1px, transparent 1px); /* Red-200 dots */
    background-size: 24px 24px;
}

/* =========================================
   COMPONENTES SEGUIMIENTO & PEDIDOS
   ========================================= */

.bg-olive-900 { background-color: #3f4e38; }
.text-olive-700 { color: #4d5e44; }
.border-olive-200 { border-color: #e7e5e4; }

/* Badges de Estado */
.st-Pedir { background: #FEE2E2; color: #991B1B; border: 1px solid #FCA5A5; }
.st-Prox_Mes { background: #CCFBF1; color: #115E59; border: 1px solid #5EEAD4; }
.st-Pedido { background: #DBEAFE; color: #1E40AF; border: 1px solid #93C5FD; }
.st-Recibido { background: #F3E8FF; color: #6B21A8; border: 1px solid #D8B4FE; }
.st-Entregado { background: #DCFCE7; color: #166534; border: 1px solid #86EFAC; }
.st-Cita { background: #FAF5FF; color: #6B21A8; border: 1px solid #D8B4FE; }
.st-Citado { background: #FEF3C7; color: #92400E; border: 1px solid #FCD34D; }
.st-Cancelado { background: #F3F4F6; color: #374151; border: 1px solid #D1D5DB; text-decoration: line-through; }
.st-Pedido_Incompleto { background: #FFEDD5; color: #9A3412; border: 1px solid #FDBA74; }
.st-Avisado___Completo, .st-Avisado { background: #E0F7FA; color: #006064; border: 1px solid #4DD0E1; }


/* =========================================
   IMPRESIÓN (RELOJ)
   ========================================= */

.print-only { display: none; }

@media print {
    @page { size: A4 landscape; margin: 0mm; } 
    body { 
        background-color: white !important; 
        -webkit-print-color-adjust: exact !important; 
        print-color-adjust: exact !important; 
        padding: 1cm !important; 
    }
    #root > div { background-color: white !important; min-height: 0 !important; }
    .no-print, .ui-toast, .toast-centered-bottom, [data-ui-toast] { display: none !important; }
    .print-only { display: block !important; }
    .print-container { box-shadow: none !important; border: none !important; width: 100% !important; }
    tr { break-inside: avoid; }
    .break-inside-avoid { page-break-inside: avoid; }
    ::-webkit-scrollbar { display: none; }
    table { font-size: 11px !important; }
}

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #d6d3d1; /* stone-300 */
    border-radius: 20px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #a8a29e; /* stone-400 */
}

/* Altura definida para que el cuerpo de configuración pueda desplazarse
   sin quedar recortado por el panel exterior, también en móvil. */
.sales-settings-panel {
    height: min(90vh, calc(100vh - 3rem));
    height: min(90dvh, calc(100dvh - 3rem));
    min-height: 0;
}
.sales-settings-scroll {
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #d6d3d1 #f5f5f4;
}

.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #f5f5f4; }
.custom-scrollbar::-webkit-scrollbar-thumb { background-color: #d6d3d1; border-radius: 20px; }
.day-view-scroll { scrollbar-width: thin; }
.dragging-active { opacity: 0.5; pointer-events: none !important; filter: grayscale(100%); }


/* La Q queda oculta al cargar y se anima solo al pasar el ratón. */
.torquia-stat-card { position: relative; overflow: hidden; }
.torquia-stat-card__logo {
    position: absolute;
    bottom: -40px;
    right: -40px;
    width: 144px;
    height: 144px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    flex-shrink: 0;
    transform: scale(.5) rotate(12deg);
    transition: opacity .5s ease, transform .5s ease, visibility 0s linear .5s;
}
.torquia-stat-card:hover .torquia-stat-card__logo {
    opacity: 1;
    visibility: visible;
    transform: scale(1) rotate(0deg);
    transition: opacity .5s ease, transform .5s ease, visibility 0s;
}

/* [UX] Loader CSS para evitar pantalla blanca mientras carga React */
#initial-loader {
    position: fixed; inset: 0; background-color: #f5f5f4; 
    display: flex; justify-content: center; align-items: center; z-index: 9999;
}
#initial-loader .spinner {
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 0;
    background: url('../images/favicon.png') center / contain no-repeat;
}
/* Ocultar contenido sin estilizar */
.cloak { visibility: hidden; }

.dnd-poly-drag-image {
    opacity: .5 !important;
}

.dnd-poly-drag-image.dnd-poly-snapback {
    transition-property: transform, -webkit-transform !important;
    transition-duration: 250ms !important;
    transition-timing-function: ease-out !important;
}

.dnd-poly-drag-image.dnd-poly-snapback {
    transition-property: transform, -webkit-transform !important;
    transition-duration: 250ms !important;
    transition-timing-function: ease-out !important;
}

/* =========================================
   UTILIDADES FORMULARIOS (Inputs Numéricos)
   ========================================= */

/* Ocultar flechas (spin-buttons) en inputs de tipo número */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/* Estilos para la vista previa impresa */
.print-preview h1 { font-size: 24px; font-weight: bold; margin-bottom: 10px; }
.print-preview p { margin-bottom: 5px; }
.print-preview hr { border: 0; border-top: 1px solid #ccc; margin: 15px 0; }
.animate-fade-in { animation: fadeIn 0.3s ease-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Historial productivo: cabecera opaca, sin margen por el que asomen filas. */
.productive-history-table { border-collapse: separate; border-spacing: 0; }
.productive-history-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #f1f5f9;
    box-shadow: inset 0 -1px #e2e8f0;
}
.productive-history-table thead th:hover { background: #e2e8f0; }
.productive-history-table tbody td { border-bottom: 1px solid #e2e8f0; }

/* Series: listado y edición con el mismo lenguaje visual en los tres módulos. */
.ui-series-settings { font-family: inherit; --series-accent: #4f46e5; }
.ui-series-settings input, .ui-series-settings select { font-family: inherit; border-radius: .5rem; font-size: .875rem; }
.ui-series-list { background: white; border: 1px solid #e7e5e4; border-radius: .75rem; overflow: hidden; }
.ui-series-list__toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 1rem; border-bottom: 1px solid #e7e5e4; }
.ui-series-list__toolbar h3 { font-size: .875rem; font-weight: 700; color: #292524; }
.ui-series-list__toolbar p, .ui-series-note { font-size: .75rem; color: #78716c; margin-top: .25rem; }
.ui-series-note { padding: .75rem 1rem; background: #fafaf9; margin: 0; }
.ui-series-primary { background: var(--series-accent); color: white; }
.ui-series-primary:hover { filter: brightness(.95); }
.ui-series-primary:disabled { opacity: .5; cursor: not-allowed; }
.ui-series-action:hover { color: var(--series-accent); background: #f5f5f4; }
.ui-series-list__table { overflow-x: auto; }
.ui-series-list table { width: 100%; min-width: 650px; text-align: left; font-size: .8125rem; }
.ui-series-list th { background: #fafaf9; color: #78716c; font-size: .6875rem; font-weight: 700; padding: .75rem 1rem; }
.ui-series-list td { padding: 1rem; border-top: 1px solid #f5f5f4; vertical-align: middle; color: #57534e; }
.ui-series-list strong { color: #292524; font-weight: 600; }
.ui-series-list small { display: block; color: #78716c; font-size: .6875rem; margin-top: .25rem; }
.ui-series-list .ui-series-empty { padding: 2.5rem 1rem; text-align: center; color: #a8a29e; }
.ui-series-labels { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .375rem; }
/* Etiqueta de estado o tipo (formato de las de tipo de trabajo del Reloj productivo).
   Medidas fijas: no dependen del tamaño ni del interlineado del contenedor. */
.ui-tag {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: .25rem .625rem;
    border-width: 1px;
    border-style: solid; /* el color lo pone cada etiqueta (border-*-200, .st-*) */
    border-radius: 9999px;
    font-size: .625rem;
    line-height: 1.25rem;
    font-weight: 700;
    letter-spacing: .025em;
    text-transform: uppercase;
}
.ui-series-badge { display: inline-flex; border: 1px solid #e7e5e4; border-radius: 9999px; padding: .125rem .5rem; font-size: .625rem; color: #78716c; background: #fafaf9; white-space: nowrap; }
.ui-series-badge--accent { color: var(--series-accent); }
.ui-series-badge--active { color: #047857; background: #ecfdf5; border-color: #d1fae5; }
.ui-series-preview { padding: .875rem 1rem; background: #fafaf9; border: 1px solid #e7e5e4; border-radius: .5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; font-size: .75rem; color: #78716c; }
.ui-series-preview strong { color: var(--series-accent); font-size: .875rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ui-series-preview small { width: 100%; }
.ui-series-section { padding-top: .75rem; border-top: 1px solid #e7e5e4; font-size: .75rem; font-weight: 700; color: #57534e; }
.ui-series-footer { flex-shrink: 0; display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: .5rem; padding: .875rem 1rem; border-top: 1px solid #e7e5e4; background: white; }
:is(.ui-series-list__toolbar, .ui-series-footer) .ui-btn {
    box-sizing: border-box;
    min-height: 2.625rem;
    padding: .625rem 1rem;
    font-family: inherit;
    font-size: .875rem;
    line-height: 1.25rem;
    gap: .375rem;
    border-radius: .5rem;
}
@media (pointer: coarse) {
    :is(.ui-series-list__toolbar, .ui-series-footer) .ui-btn { min-height: 2.75rem; }
}

.ui-series-list__actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.ui-series-list__toolbar .ui-series-visibility { width: 2.625rem; padding: 0; flex-shrink: 0; }
.ui-series-visibility[aria-pressed="true"] { color: var(--series-accent); background: #f5f5f4; }
@media (pointer: coarse) { .ui-series-list__toolbar .ui-series-visibility { width: 2.75rem; } }

.ui-series-name { display: inline-flex; align-items: center; gap: .375rem; }
.ui-series-favorite { display: inline-flex; flex-shrink: 0; color: #d97706; }
.ui-series-favorite svg { fill: currentColor; }

/* Agenda de citas: columnas por mecánico y planificación semanal. */
.workshop-agenda-scroll {overflow:auto;max-height:72vh;overscroll-behavior:contain;}
/* El modo ampliado no hereda el margen entre bloques del contenedor principal. */
.workshop-agenda-expanded {position:fixed;inset:0;z-index:60;margin:0!important;border:0;border-radius:0;display:flex;flex-direction:column;height:100vh;height:100dvh;}
.workshop-agenda-expanded > :not(.workshop-agenda-scroll) {flex-shrink:0;}
.workshop-agenda-expanded > .workshop-agenda-scroll {flex:1;min-height:0;max-height:none;}

.workshop-agenda-grid {display:grid;position:relative;isolation:isolate;}
.workshop-agenda-corner,.workshop-agenda-heading {position:sticky;top:0;z-index:12;background:#fafaf9;border-bottom:1px solid #e7e5e4;padding:12px;font-size:13px;min-height:48px;}
.workshop-agenda-corner {left:0;z-index:15;padding:14px 8px;color:#78716c;font-size:11px;text-align:center;}
.workshop-agenda-heading {border-left:1px solid #e7e5e4;display:flex;flex-direction:column;justify-content:center;gap:3px;}
.workshop-agenda-heading span {font-size:11px;color:#78716c;}
.workshop-agenda-hours {position:sticky;left:0;z-index:10;background:#fafaf9;}
.workshop-agenda-hours span {position:absolute;left:0;right:0;text-align:center;font-size:11px;color:#78716c;line-height:18px;}
.workshop-agenda-column {position:relative;border-left:1px solid #e7e5e4;}
.workshop-agenda-column--weekend {background:rgb(250 250 249 / .8);}
.workshop-agenda-slot {position:absolute;left:0;right:0;width:100%;border-bottom:1px dashed #f0eeec;background:transparent;}
.workshop-agenda-slot--hour {border-top:1px solid #e7e5e4;}
.workshop-agenda-slot:hover {background:#fdf2f8;}
.workshop-agenda-event {position:absolute;z-index:2;overflow:hidden;text-align:left;display:flex;flex-direction:column;gap:2px;padding:6px 10px;border-radius:12px;border:0;background:#fdf2f8;color:#831843;box-shadow:0 1px 2px #0000000d;}
.workshop-agenda-event strong {display:block;font-size:12px;line-height:16px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex-shrink:0;}
.workshop-agenda-event span {font-size:11px;line-height:15px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex-shrink:0;}
.workshop-agenda-event:hover {filter:brightness(.97);box-shadow:0 2px 5px #00000018;}
.workshop-agenda-event:focus-visible {outline:2px solid #be185d;outline-offset:1px;z-index:4;}
.workshop-agenda-event--confirmed {background:#f0f9ff;color:#075985;}
.workshop-agenda-event--in_progress {background:#fffbeb;color:#92400e;}
.workshop-agenda-event--completed {background:#ecfdf5;color:#065f46;}
.workshop-agenda-event--cancelled {background:#f5f5f4;color:#78716c;}
.workshop-agenda-event-state {font-weight:600;}

.workshop-agenda-event--compact {padding:3px 8px;gap:0;}
.workshop-agenda-cancelled-label {position:absolute;right:28px;top:6px;font-size:10px!important;line-height:16px!important;font-weight:600;}
.workshop-agenda-event--compact .workshop-agenda-cancelled-label {top:3px;}

.workshop-agenda-event--compact > div:first-child {top:1px;}
.workshop-agenda-event--compact > div:first-child button {width:20px;height:20px;}

/* Festivos de la empresa: marca visual sin bloquear la planificación. */
.workshop-agenda-heading--holiday {background:#fff7ed;color:#9a3412;}
.workshop-agenda-column--holiday {background:#fffaf5;}
.workshop-agenda-holiday-label {display:inline-flex;align-items:center;gap:.25rem;flex-shrink:0;white-space:nowrap;font-size:10px;font-weight:700;line-height:1rem;color:#ea580c;}
/* Igual que Calendario: día y FESTIVO comparten fila, con la fecha debajo. */
.workshop-agenda-heading--week {padding:6px 12px;gap:0;text-align:center;}
.workshop-agenda-weekday {display:flex;align-items:center;justify-content:center;gap:4px;font-size:10px;font-weight:700;line-height:16px;text-transform:uppercase;}
.workshop-agenda-weekday > span {font-size:10px;line-height:16px;color:#a8a29e;}
.workshop-agenda-weekdate {display:block;font-size:14px;line-height:20px;color:#44403c;}
.workshop-agenda-heading .workshop-agenda-holiday-label {font-size:10px;color:#ea580c;}
.workshop-agenda-heading .workshop-agenda-holiday-label span {color:#ea580c;line-height:16px;}
.workshop-agenda-holiday-label [role="img"] {display:inline-flex;align-items:center;justify-content:center;color:inherit;}




/* Calendario y Agenda comparten la escala y el eje horario. */
.calendar-time-grid-line {position:absolute;left:0;width:100%;border-top:1px dashed #f0eeec;pointer-events:none;}
.calendar-time-grid-line--hour {border-top:1px solid #e7e5e4;}

.calendar-grid-expanded {position:fixed;inset:0;z-index:60;margin:0!important;border:0;border-radius:0;height:100vh;height:100dvh;overflow:hidden;}
.calendar-grid-expanded > .calendar-grid-scroll {flex:1;min-height:0;overflow:auto;}
.calendar-grid-expanded .calendar-grid-header {position:sticky;top:0;}


/* Resúmenes con donut: mismas proporciones y acciones compactas en toda la web. */
.ui-stats-card { min-height: 10rem; }
.ui-stats-card .ui-stats-summary { padding: 1.625rem 1.25rem; gap: 2rem; align-items: flex-start; justify-content: center; }
.ui-stats-card .ui-stats-chart { width: 6.5rem; height: 6.5rem; }
.ui-stats-card .ui-stats-chart .text-3xl { font-size: 1.5rem; line-height: 1; }
.ui-stats-card .ui-stats-chart .text-2xl { font-size: 1.25rem; line-height: 1; }
.ui-stats-card .ui-stats-heading { margin-bottom: .875rem; }
.ui-stats-card .ui-stats-metrics { column-gap: 1rem; row-gap: .625rem; }
.ui-stats-card .ui-stats-progress { margin-top: .625rem; padding-top: .625rem; }
.ui-stats-card .ui-stats-loading { min-height: 9rem; }
.ui-stats-card .ui-stats-actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-self: stretch; }
.ui-stats-card .ui-stats-action-group { display: contents; }
.ui-stats-card .ui-stats-action { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: 5.5rem; padding: 0; text-align: center; }
.ui-stats-card .ui-stats-action--direct,
.ui-stats-card .ui-stats-action-content { display: grid; grid-template-rows: 2.75rem minmax(2.25rem, auto); align-content: center; justify-items: center; padding: 1rem .625rem; gap: .5rem; min-height: 0; height: 100%; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ui-stats-card .ui-stats-action-icon { width: 2.75rem; height: 2.75rem; min-width: 2.75rem; min-height: 2.75rem; flex-shrink: 0; box-shadow: 0 1px 2px rgb(0 0 0 / .05); }
.ui-stats-card .ui-stats-action-icon svg { width: 1.5rem; height: 1.5rem; }
.ui-stats-card .ui-stats-action-title { font-size: .875rem; line-height: 1.25rem; }
.ui-stats-card .ui-stats-action-description { font-size: .6875rem; line-height: 1rem; }
.ui-stats-card .ui-stats-actions .ui-stats-action { border-top-width: 0; border-right-width: 0; border-left: 1px solid #f5f5f4; }
.ui-stats-card .ui-stats-actions > .ui-stats-action:first-child { border-left-width: 0; }
@media (max-width: 639px) {
    .ui-stats-card .ui-stats-summary { padding: 1rem; gap: 1rem; align-items: center; }
    .ui-stats-card .ui-stats-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Leyendas proporcionadas al donut compacto. */
.ui-stats-card .ui-stats-metrics .text-xl,
.ui-stats-card .ui-stats-metrics .text-2xl { font-size: 1.0625rem; line-height: 1.25rem; }
.ui-stats-card .ui-stats-metrics .text-xs,
.ui-stats-card .ui-stats-metrics .text-sm { font-size: .6875rem; line-height: .875rem; }
.ui-stats-card .ui-stats-metrics .tracking-wider { letter-spacing: .025em; }
.ui-stats-card .ui-stats-heading { font-size: .875rem; line-height: 1.25rem; }

/* Cifras y etiquetas comparten eje y altura de línea. */
.ui-stats-card .ui-stats-metrics .flex.items-center { min-height: 1.125rem; margin-bottom: 0; }
.ui-stats-card .ui-stats-metrics span:not(.rounded-full) { line-height: 1.125rem; }
.ui-stats-card .ui-stats-metrics .text-xl,
.ui-stats-card .ui-stats-metrics .text-2xl { font-variant-numeric: tabular-nums; }
/* Etiquetas con mayor contraste, conservando el tamaño compacto. */
.ui-stats-card .ui-stats-metrics .text-stone-400,
.ui-stats-card .ui-stats-metrics .text-slate-400 { color: #78716c; }

/* Filtro temporal en la esquina del área estadística. */
.ui-stats-card .ui-stats-summary--filter { position: relative; padding-right: 3.25rem; }
.ui-stats-card .ui-stats-filter { position: absolute; top: .75rem; right: .75rem; bottom: .75rem; z-index: 30; pointer-events: none; }
.ui-stats-card .ui-stats-filter > button { position: static; pointer-events: auto; }
.ui-stats-card .ui-stats-filter > div { top: 2.25rem; right: 0; left: auto; max-height: calc(100% - 2.25rem); overflow-y: auto; pointer-events: auto; }

/* Aviso de suscripción de la empresa en la parte superior de todas las páginas. */
.ui-subscription-banner { position: relative; z-index: 40; padding: .625rem 1rem; text-align: center; font-size: .8125rem; font-weight: 600; line-height: 1.25rem; border-bottom: 1px solid; }
.ui-subscription-banner--danger { color: #991b1b; background: #fef2f2; border-color: #fecaca; }
.ui-subscription-banner--warning { color: #92400e; background: #fffbeb; border-color: #fde68a; }
@media print { .ui-subscription-banner { display: none; } }

/* X de borrar búsqueda: misma forma, tamaño y posición en toda la web. Sustituye a la X nativa. */
.ui-search-clear { position: absolute; top: 50%; right: .5rem; transform: translateY(-50%); width: 1.75rem; height: 1.75rem; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 9999px; background: transparent; color: #a8a29e; cursor: pointer; transition: color 150ms, background-color 150ms; }
.ui-search-clear:hover { color: #57534e; background: #f5f5f4; }
.ui-search-clear:focus-visible { outline: 2px solid #78716c; outline-offset: 1px; }
.ui-search-clear:disabled { opacity: .5; cursor: not-allowed; }
.ui-search-clear svg { width: 1rem !important; height: 1rem !important; color: inherit !important; }
/* Campos con etiqueta encima dentro del mismo contenedor: anclada al campo, no al conjunto. */
.ui-search-clear--bottom { top: auto; bottom: .375rem; transform: none; }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }

/* Misma tipografía para buscadores de páginas, selectores e historiales. */
:is(input[type="search"], input.ui-search-input, input[data-search-field], input[placeholder*="buscar" i], input[placeholder^="busca " i], input[aria-label^="buscar" i], input[placeholder^="introduce matrícula" i], input[placeholder^="nº de orden, matrícula" i], input[placeholder^="número de orden de trabajo" i], input[placeholder^="escribe referencia o nombre" i], input[placeholder^="referencia o nombre" i]) {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: .875rem !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.25rem !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}
:is(input[type="search"], input.ui-search-input, input[data-search-field], input[placeholder*="buscar" i], input[placeholder^="busca " i], input[aria-label^="buscar" i], input[placeholder^="introduce matrícula" i], input[placeholder^="nº de orden, matrícula" i], input[placeholder^="número de orden de trabajo" i], input[placeholder^="escribe referencia o nombre" i], input[placeholder^="referencia o nombre" i])::placeholder {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    font-style: normal !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    text-transform: none !important;
}

/* Tablas en el móvil (table.ui-mobile-cards): cada fila se ve como una tarjeta, sin desplazamiento horizontal.
   La primera columna (o la marcada con data-mobile="title") es el título; el resto, «ETIQUETA  dato».
   Las etiquetas salen de la cabecera (navbar.js las copia a data-label). En pantallas mayores no cambia nada.
   Marcas en la cabecera: data-mobile="title" | "badge" | "plain" | "hide" | "actions" (las columnas sin título o «Acciones» ya son de acciones). */
@media (max-width: 639px) {
    table.ui-mobile-cards { display: block; width: 100% !important; min-width: 0 !important; table-layout: auto !important; }
    table.ui-mobile-cards > thead { display: none; }
    /* El contenedor de la tabla tampoco debe forzar un ancho mínimo */
    :has(> table.ui-mobile-cards) { min-width: 0 !important; }
    table.ui-mobile-cards > :is(tbody, tfoot) { display: block; }
    table.ui-mobile-cards > :is(tbody, tfoot) > tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: .5rem; row-gap: .375rem; align-items: start; height: auto !important; padding: .75rem 1rem; border-style: solid !important; border-color: #e7e5e4 !important; border-width: 1px 0 0 !important; }
    /* Una sola línea entre tarjetas, también en tablas con divide-y */
    table.ui-mobile-cards > :is(tbody, tfoot) > tr:first-child { border-top-width: 0 !important; }
    /* Dato: etiqueta a la izquierda y valor a la derecha; si el valor tiene varias líneas, se apilan */
    table.ui-mobile-cards > :is(tbody, tfoot) > tr > :is(td, th):not(.hidden) {
        display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .75rem;
        grid-column: 1 / -1; width: 100% !important; min-width: 0 !important; max-width: none !important; height: auto !important;
        padding: 0 !important; border: 0 !important; text-align: right !important; white-space: normal !important; position: static !important;
    }
    table.ui-mobile-cards > :is(tbody, tfoot) > tr > :is(td, th):not(.hidden) > * { grid-column: 2; justify-self: end; min-width: 0; }
    /* Título, avisos y celdas sin etiqueta no son rejilla: su contenido va alineado normal */
    table.ui-mobile-cards > tbody > tr > td:is([data-mobile="title"], [colspan], :not([data-label]), [data-label=""]) > *,
    table.ui-mobile-cards:not(.ui-mobile-cards--titled) > tbody > tr > td:first-child > * { justify-self: auto; }
    table.ui-mobile-cards > :is(tbody, tfoot) > tr > :is(td, th)::before {
        content: attr(data-label); grid-column: 1; grid-row: 1 / span 9; align-self: center; text-align: left;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        font-size: .6875rem; font-weight: 600; line-height: 1rem; letter-spacing: .02em; text-transform: uppercase; color: #a8a29e;
    }
    table.ui-mobile-cards > :is(tbody, tfoot) > tr > :is(td, th):is(:not([data-label]), [data-label=""])::before { content: none; }
    table.ui-mobile-cards > :is(tbody, tfoot) > tr > :is(td, th):not(.hidden):is(:not([data-label]), [data-label=""]) { display: block; }
    /* Título de la tarjeta */
    table.ui-mobile-cards > tbody > tr > td[data-mobile="title"],
    table.ui-mobile-cards:not(.ui-mobile-cards--titled) > tbody > tr > td:first-child:not([colspan]) { order: -1; grid-column: 1; grid-row: 1; align-self: center; display: block; text-align: left !important; font-size: .9375rem; font-weight: 600; }
    table.ui-mobile-cards > tbody > tr > td[data-mobile="title"]::before,
    table.ui-mobile-cards:not(.ui-mobile-cards--titled) > tbody > tr > td:first-child::before { content: none !important; }
    /* Acciones: arriba a la derecha, junto al título, sin etiqueta */
    table.ui-mobile-cards > tbody > tr > td[data-mobile="actions"]:not(.hidden) { order: -1; grid-column: 3; grid-row: 1; width: auto !important; display: flex; justify-content: flex-end; align-self: start; }
    table.ui-mobile-cards > tbody > tr > td[data-mobile="actions"]::before { content: none !important; }
    /* Estado junto al título (data-mobile="badge") */
    table.ui-mobile-cards > tbody > tr > td[data-mobile="badge"]:not(.hidden) { order: -1; grid-column: 2; grid-row: 1; width: auto !important; display: flex; align-self: center; }
    table.ui-mobile-cards > tbody > tr > td[data-mobile="badge"]::before { content: none !important; }
    /* Dato sin etiqueta, como línea de texto bajo el título (data-mobile="plain") */
    table.ui-mobile-cards > tbody > tr > td[data-mobile="plain"]:not(.hidden) { display: block; text-align: left !important; }
    table.ui-mobile-cards > tbody > tr > td[data-mobile="plain"]::before { content: none !important; }
    table.ui-mobile-cards > tbody > tr > td:is([data-mobile="plain"], [data-mobile="badge"]) > * { justify-self: auto; }
    /* Dos datos en una línea: el primero a la izquierda y el segundo a la derecha (p. ej. matrícula · marca y modelo) */
    table.ui-mobile-cards > tbody > tr > td.ui-mobile-split:not(.hidden) { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; text-align: left !important; }
    table.ui-mobile-cards > tbody > tr > td.ui-mobile-split > :last-child:not(:first-child) { text-align: right; min-width: 0; }
    table.ui-mobile-cards > :is(tbody, tfoot) > tr > :is(td, th)[data-mobile="hide"] { display: none !important; }
    /* Filas de aviso («Cargando…», «Sin resultados») y de grupo: ocupan la tarjeta entera */
    table.ui-mobile-cards > :is(tbody, tfoot) > tr > :is(td, th)[colspan]:not(.hidden) { display: block; text-align: left !important; }
    table.ui-mobile-cards > :is(tbody, tfoot) > tr > :is(td, th)[colspan].text-center { text-align: center !important; }
    table.ui-mobile-cards > :is(tbody, tfoot) > tr > :is(td, th)[colspan]::before { content: none !important; }
    /* Campos editables dentro de la tarjeta (líneas de factura): ocupan el espacio del dato */
    table.ui-mobile-cards > tbody > tr > td > :is(input, select, textarea) { justify-self: stretch; width: 100% !important; max-width: 14rem; margin-left: auto; text-align: right; }
    table.ui-mobile-cards > tbody > tr > td[data-mobile="title"] > :is(input, select, textarea),
    table.ui-mobile-cards:not(.ui-mobile-cards--titled) > tbody > tr > td:first-child > :is(input, select, textarea) { max-width: none; text-align: left; }
}

/* Vacaciones: cambio de mes suave. La cuadrícula entra deslizándose un poco desde el lado del mes nuevo. */
@keyframes vacMonthNext { from { opacity: .3; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes vacMonthPrev { from { opacity: .3; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
.vac-month--next { animation: vacMonthNext .24s ease-out; }
.vac-month--prev { animation: vacMonthPrev .24s ease-out; }
@media (prefers-reduced-motion: reduce) { .vac-month--next, .vac-month--prev { animation: none; } }

/* Móvil: las ventanas ocupan toda la pantalla, sin márgenes ni bordes alrededor.
   Se reconocen por su cabecera de ventana; las confirmaciones pequeñas se quedan centradas. */
@media (max-width: 639px) {
    :is(.fixed.inset-0, .ui-modal-overlay):has(> * :is([data-modal-header], .ui-modal-header)):not(:has([data-confirm-dialog])) {
        padding: 0 !important; align-items: stretch !important; justify-content: stretch !important;
    }
    :is(.fixed.inset-0, .ui-modal-overlay):has(> * :is([data-modal-header], .ui-modal-header)):not(:has([data-confirm-dialog])) > :not(script):not(style):not(.min-h-full) {
        width: 100% !important; max-width: none !important; min-width: 0 !important;
        height: 100dvh !important; max-height: 100dvh !important; margin: 0 !important;
        border-radius: 0 !important; border-left-width: 0 !important; border-right-width: 0 !important; border-bottom-width: 0 !important;
        box-shadow: none !important; overflow-y: auto !important; overscroll-behavior: contain;
    }
    /* Ventanas con un contenedor intermedio que las centra (facturas de taller y de recambios) */
    :is(.fixed.inset-0, .ui-modal-overlay):has(> * :is([data-modal-header], .ui-modal-header)):not(:has([data-confirm-dialog])) > .min-h-full { padding: 0 !important; align-items: stretch !important; min-height: 100dvh; }
    :is(.fixed.inset-0, .ui-modal-overlay):has(> * :is([data-modal-header], .ui-modal-header)):not(:has([data-confirm-dialog])) > .min-h-full > * {
        width: 100% !important; max-width: none !important; min-height: 100dvh; margin: 0 !important;
        border-radius: 0 !important; border-left-width: 0 !important; border-right-width: 0 !important; border-bottom-width: 0 !important; box-shadow: none !important;
    }
    /* Con poco contenido, el pie de la ventana (botones) queda abajo del todo */
    :is(.fixed.inset-0, .ui-modal-overlay):has(> * :is([data-modal-header], .ui-modal-header)):not(:has([data-confirm-dialog])) > :not(.min-h-full) > :is([data-modal-footer], .ui-modal-footer),
    :is(.fixed.inset-0, .ui-modal-overlay):has(> * :is([data-modal-header], .ui-modal-header)):not(:has([data-confirm-dialog])) > .min-h-full > * > :is([data-modal-footer], .ui-modal-footer) { margin-top: auto !important; }
}

/* Ventanas: con alguna abierta, la página de fondo no se desplaza (navbar.js pone html.ui-modal-open).
   Si la ventana no cabe en pantalla, se desplaza dentro de su fondo oscuro, sin cortar la parte de arriba. */
html.ui-modal-open, html.ui-modal-open body { overflow: hidden !important; }
:is(.fixed.inset-0, .ui-modal-overlay):has(> * :is([data-modal-header], .ui-modal-header)) { overflow-y: auto; overscroll-behavior: contain; align-items: safe center; }
.ui-confirm-overlay { overscroll-behavior: contain; }