* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    width: 100%;
    font-family: var(--font-family);
    color: var(--text-primary);
    background: var(--app-bg);
}

body {
    overflow-x: hidden;
    transition: background var(--transition-panel), color var(--transition-fast);
}

#app,
.main-shell,
.main-shell-content,
.page-content {
    min-width: 0;
}

img,
svg {
    max-width: 100%;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

input,
select,
textarea {
    max-width: 100%;
}

/* Estados interactivos corporativos compartidos por todos los módulos. */
* {
    scrollbar-color: #58585a var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb {
    background: #58585a;
    box-shadow: 0 0 10px color-mix(in srgb, #f89434, transparent 52%);
}

input:focus,
input:focus-visible,
select:focus,
select:focus-visible,
textarea:focus,
textarea:focus-visible {
    outline: 0;
    border-color: #58585a !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, #f89434, transparent 72%) !important;
}

:is(.pager-button, .pagination button, .plans-footer button):hover:not(:disabled):not(.active):not(.current) {
    color: #58585a;
    border-color: color-mix(in srgb, #58585a, transparent 38%);
    background: color-mix(in srgb, #f89434, transparent 86%);
}

:is(.pager-button.active, .pagination button.active, .pagination button.current, .plans-footer button.current) {
    color: #fff !important;
    border-color: #58585a !important;
    background: #58585a !important;
    box-shadow: 0 5px 14px color-mix(in srgb, #f89434, transparent 65%);
}

html[data-theme="dark"] select,
html[data-theme="dark"] select option,
html[data-theme="dark"] select optgroup {
    color-scheme: dark;
    background-color: #122033 !important;
    color: #eef4fc !important;
}

html[data-theme="dark"] select option:checked,
html[data-theme="dark"] select option:hover {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

html[data-theme="dark"] select option:disabled {
    background-color: #122033 !important;
    color: #8fa2b4 !important;
}

html[data-theme="light"] select,
html[data-theme="light"] select option,
html[data-theme="light"] select optgroup {
    color-scheme: light;
    background-color: #ffffff !important;
    color: #1a2634 !important;
}

a {
    color: inherit;
}

button,
a,
input,
select,
textarea {
    outline-color: color-mix(in srgb, var(--brand-accent), #fff 10%);
    outline-offset: 2px;
}

.login-layout {
    min-height: 100dvh;
    padding-top: env(safe-area-inset-top);
}

@media (max-width: 767px) {
    body {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

#blazor-error-ui {
    background: var(--warn-surface);
    color: var(--warn-text);
    bottom: 0;
    box-shadow: 0 -1px 2px color-mix(in srgb, var(--text-primary), transparent 78%);
    display: none;
    left: 0;
    padding: 0.6rem 1rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ApexCharts dentro del resumen de Mantenimiento respeta los tokens claro/oscuro. */
.maintenance-summary .apexcharts-canvas,
.maintenance-summary .apexcharts-svg {
    background: transparent !important;
}

.maintenance-summary .apexcharts-text,
.maintenance-summary .apexcharts-legend-text,
.maintenance-summary .apexcharts-xaxis-label,
.maintenance-summary .apexcharts-yaxis-label {
    color: var(--text-secondary) !important;
    fill: var(--text-secondary) !important;
}

.maintenance-summary .apexcharts-gridline {
    stroke: var(--glass-border);
}

.maintenance-summary .apexcharts-tooltip,
.maintenance-summary .apexcharts-xaxistooltip,
.maintenance-summary .apexcharts-menu {
    border-color: var(--glass-border) !important;
    background: var(--floating-surface) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-md);
}

.maintenance-summary .apexcharts-tooltip-title {
    border-color: var(--glass-border) !important;
    background: var(--control-bg) !important;
}

/* Smart Andon hosted modules: structural styles live in the Alchemist bundle so
   navigation and hot reload never depend on the legacy stylesheet cache. */
.smart-andon-module-host {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: auto;
    color: var(--text-primary);
}

.smart-andon-module-host .dashboard-page,
.smart-andon-module-host .andon-page {
    width: 100%;
    min-width: 0;
    padding: 0.35rem;
}

.smart-andon-module-host .board-shell,
.smart-andon-module-host .andon-panel {
    width: 100%;
    min-width: 0;
    padding: 1rem;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    background: var(--glass-surface);
    box-shadow: var(--shadow-md);
}

.smart-andon-module-host .andon-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.smart-andon-module-host .andon-header h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: clamp(1.55rem, 2.4vw, 2.25rem);
}

.smart-andon-module-host .andon-header p {
    margin: 0.25rem 0 0;
    color: var(--text-secondary);
}

.smart-andon-module-host .andon-actions,
.smart-andon-module-host .badge-row,
.smart-andon-module-host .table-footer,
.smart-andon-module-host .pager {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.smart-andon-module-host .widget {
    min-width: 0;
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--glass-surface), transparent 8%);
}

.smart-andon-module-host .widget h4 {
    margin: 0 0 0.85rem;
    color: var(--text-primary);
    font-size: 1rem;
}

.smart-andon-module-host .ghost-button,
.smart-andon-module-host .action,
.smart-andon-module-host .pager-button {
    min-height: 36px;
    padding: 0.42rem 0.72rem;
    border: 1px solid var(--control-border);
    border-radius: 8px;
    color: var(--text-primary);
    background: var(--control-bg);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.smart-andon-module-host .ghost-button:hover,
.smart-andon-module-host .pager-button:hover:not(:disabled) {
    border-color: var(--brand-accent);
    background: var(--control-bg-hover);
}

.smart-andon-module-host button:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

.smart-andon-module-host .pill {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    color: var(--text-primary);
    background: var(--control-bg);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.smart-andon-module-host .ok-pill { color: var(--state-online); background: color-mix(in srgb, var(--state-online), transparent 84%); }
.smart-andon-module-host .danger-pill { color: var(--state-critical); background: color-mix(in srgb, var(--state-critical), transparent 84%); }
.smart-andon-module-host .warn-pill { color: var(--state-warning); background: color-mix(in srgb, var(--state-warning), transparent 84%); }
.smart-andon-module-host .blue-pill,
.smart-andon-module-host .cyan-pill { color: var(--brand-accent-strong); background: color-mix(in srgb, var(--brand-accent-strong), transparent 84%); }
.smart-andon-module-host .muted-pill { color: var(--text-tertiary); background: var(--control-bg); }

.smart-andon-module-host .table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

.smart-andon-module-host .status-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
}

.smart-andon-module-host .status-table th,
.smart-andon-module-host .status-table td {
    padding: 0.65rem 0.55rem;
    border-bottom: 1px solid var(--glass-border);
    color: var(--text-primary);
    text-align: left;
    vertical-align: middle;
}

.smart-andon-module-host .status-table th {
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.smart-andon-module-host .status-table tbody tr:hover {
    background: color-mix(in srgb, var(--brand-accent), transparent 94%);
}

.smart-andon-module-host .table-footer {
    justify-content: space-between;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.smart-andon-module-host .pager-button.active {
    border-color: var(--brand-accent);
    color: var(--on-accent);
    background: var(--brand-accent);
}

@media (max-width: 700px) {
    .smart-andon-module-host .andon-header,
    .smart-andon-module-host .table-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .smart-andon-module-host .andon-actions > button {
        width: 100%;
    }
}
.maintenance-page {
    display: grid;
    gap: 16px;
    width: 100%;
    color: var(--text-primary);
    border-color: var(--glass-border);
    background: var(--glass-surface);
    box-shadow: var(--shadow-md);
}

.maintenance-page .ops-card {
    border-color: var(--glass-border);
    background: color-mix(in srgb, var(--glass-surface), transparent 8%);
    color: var(--text-primary);
}

.maintenance-page .ops-table th,
.maintenance-page .ops-table td {
    border-bottom-color: var(--glass-border);
}

.maintenance-page .ops-table th {
    color: var(--text-secondary);
}

.maintenance-page .ops-card h2 {
    margin: 0 0 16px;
    font-size: 1.25rem;
}

.maintenance-kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(130px, 1fr));
    gap: 12px;
}

.maintenance-kpis .ops-card {
    padding: 16px 18px;
}

.maintenance-kpis span,
.maintenance-form small {
    color: var(--text-secondary);
}

.maintenance-kpis strong {
    display: block;
    margin-top: 4px;
    font-size: 1.8rem;
}

.maintenance-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 14px;
}

.maintenance-row,
.maintenance-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--glass-border);
}

.maintenance-bar progress {
    flex: 1;
    accent-color: var(--accent-red);
}

.maintenance-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 14px;
}

.maintenance-form > h2,
.maintenance-form-actions {
    grid-column: 1 / -1;
}

.maintenance-form label {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.maintenance-form input,
.maintenance-form select,
.maintenance-form textarea {
    width: 100%;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--control-border);
    border-radius: 8px;
    background: var(--control-bg);
    color: var(--text-primary);
    font: inherit;
}

.maintenance-form textarea {
    min-height: 84px;
    resize: vertical;
}

.maintenance-form-actions,
.maintenance-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.maintenance-toolbar .text-input {
    width: auto;
    margin: 0;
}

.maintenance-calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(155px, 1fr));
    gap: 10px;
    overflow-x: auto;
}

.maintenance-calendar article {
    min-height: 170px;
    padding: 12px;
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--glass-surface), transparent 8%);
}

.maintenance-calendar h3 {
    margin: 0 0 8px;
    color: var(--text-secondary);
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.maintenance-order {
    display: grid;
    width: 100%;
    margin: 7px 0;
    padding: 9px 10px;
    border: 1px solid var(--control-border);
    border-left: 3px solid var(--text-tertiary);
    border-radius: 8px;
    background: var(--control-bg);
    color: var(--text-primary);
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.maintenance-order:hover {
    border-color: var(--brand-accent-strong);
    background: var(--control-bg-hover);
}

.maintenance-order.inprogress {
    border-left-color: var(--brand-accent-strong);
}

.maintenance-order.overdue {
    border-left-color: var(--danger-text, #d72f49);
}

.maintenance-order.completed {
    border-left-color: var(--ok);
}

.maintenance-order small,
.maintenance-order span {
    display: block;
    color: var(--text-secondary);
    font-weight: 400;
}

.maintenance-message,
.maintenance-error {
    margin: 0;
    padding: 10px 12px;
    border-radius: 8px;
}

.maintenance-message {
    border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent);
    background: color-mix(in srgb, var(--ok) 8%, transparent);
    color: var(--ok);
}

.maintenance-error {
    border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
    background: color-mix(in srgb, var(--danger) 8%, transparent);
    color: var(--danger);
}

.maintenance-detail {
    margin-top: 0;
}

@media (max-width: 900px) {
    .maintenance-kpis,
    .maintenance-grid,
    .maintenance-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .maintenance-calendar {
        grid-template-columns: repeat(2, minmax(230px, 1fr));
    }
}

@media (max-width: 600px) {
    .maintenance-kpis,
    .maintenance-grid,
    .maintenance-form {
        grid-template-columns: 1fr;
    }

    .maintenance-form > h2,
    .maintenance-form-actions {
        grid-column: auto;
    }
}

/* Adaptación temática del módulo Mantenimiento. */
html[data-theme] .maintenance-calendar-page .view-switch button.active,
html[data-theme] .maintenance-calendar-page .today .day-number,
html[data-theme] .maintenance-plans-page .plans-footer button.current,
html[data-theme] .schedule-maintenance-page .switch input:checked + i {
    border-color: var(--brand-accent) !important;
    background: var(--brand-accent) !important;
    color: var(--on-accent) !important;
}

html[data-theme] .maintenance-calendar-page .scheduled {
    --status: var(--brand-accent-strong) !important;
}

html[data-theme] .maintenance-calendar-page .inprogress {
    --status: var(--state-warning) !important;
}

html[data-theme] .maintenance-calendar-page .overdue {
    --status: var(--state-critical) !important;
}

html[data-theme] .maintenance-calendar-page .completed {
    --status: var(--state-online) !important;
}

html[data-theme] .maintenance-calendar-page .cancelled {
    --status: var(--text-tertiary) !important;
}

html[data-theme] .maintenance-calendar-page .calendar-day.today,
html[data-theme] .maintenance-calendar-page .calendar-summary .today-summary {
    background: color-mix(in srgb, var(--brand-accent-strong), transparent 91%) !important;
}

html[data-theme] .maintenance-calendar-page .calendar-day.today {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-accent-strong), transparent 45%) !important;
}

html[data-theme] .maintenance-calendar-page .quick-create,
html[data-theme] .maintenance-calendar-page .today-summary strong,
html[data-theme] .maintenance-summary .kpi.blue strong,
html[data-theme] .maintenance-summary .kpi.blue small,
html[data-theme] .maintenance-summary .activity-row .active,
html[data-theme] .maintenance-summary .activity-row .scheduled,
html[data-theme] .new-plan-page .checklist-card .section-heading button,
html[data-theme] .schedule-maintenance-page .section-title button {
    color: var(--brand-accent-strong) !important;
}

html[data-theme] .maintenance-summary .kpi.blue .kpi-icon,
html[data-theme] .schedule-maintenance-page .check-row > span,
html[data-theme] .schedule-maintenance-page .order-summary dd > span {
    background: color-mix(in srgb, var(--brand-accent-strong), transparent 86%) !important;
    color: var(--brand-accent-strong) !important;
}

html[data-theme] .maintenance-summary .metric-row i {
    background: var(--brand-accent-strong) !important;
}

html[data-theme] .maintenance-summary .load-week .l1,
html[data-theme] .maintenance-summary .load-legend .l1 {
    background: color-mix(in srgb, var(--state-online), transparent 72%) !important;
    color: var(--text-primary) !important;
}

html[data-theme] .maintenance-summary .load-week .l2,
html[data-theme] .maintenance-summary .load-legend .l2 {
    background: color-mix(in srgb, var(--state-warning), transparent 68%) !important;
    color: var(--text-primary) !important;
}

html[data-theme] .maintenance-summary .load-week .l3,
html[data-theme] .maintenance-summary .load-legend .l3 {
    background: color-mix(in srgb, var(--state-warning), var(--state-critical) 38%) !important;
    color: var(--on-accent) !important;
}

html[data-theme] .maintenance-summary .load-week .l4,
html[data-theme] .maintenance-summary .load-legend .l4 {
    background: var(--state-critical) !important;
    color: #ffffff !important;
}

html[data-theme] .maintenance-plans-page .plan-name > i.monthly,
html[data-theme] .maintenance-plans-page .plan-frequency b.monthly {
    background: color-mix(in srgb, var(--brand-accent-strong), transparent 82%) !important;
    color: var(--brand-accent-strong) !important;
}

html[data-theme] .maintenance-plans-page .plan-name > i.weekly,
html[data-theme] .maintenance-plans-page .plan-frequency b.weekly {
    background: color-mix(in srgb, var(--state-online), transparent 82%) !important;
    color: var(--state-online) !important;
}

html[data-theme] .maintenance-plans-page .plan-name > i.daily,
html[data-theme] .maintenance-plans-page .plan-frequency b.daily {
    background: color-mix(in srgb, var(--state-warning), transparent 82%) !important;
    color: var(--state-warning) !important;
}

html[data-theme] .new-plan-page :is(.recurrence-options button.selected, .week-days button.selected),
html[data-theme] .schedule-maintenance-page .priority button.selected {
    border-color: var(--brand-accent-strong) !important;
    background: color-mix(in srgb, var(--brand-accent-strong), transparent 85%) !important;
    color: var(--brand-accent-strong) !important;
}

html[data-theme] .new-plan-page :is(.recurrence-options button.selected, .week-days button.selected) > i {
    border-color: var(--brand-accent-strong) !important;
}

html[data-theme] .maintenance-detail-page .progress {
    color: var(--brand-accent-strong) !important;
}

/* Contenedor principal y acción primaria compartidos por todo Mantenimiento. */
:is(.maintenance-summary,
    .maintenance-calendar-page,
    .maintenance-plans-page,
    .schedule-maintenance-page,
    .new-plan-page,
    .maintenance-detail-page) {
    width: 100% !important;
    padding: 14px !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-xl) !important;
    background: var(--glass-surface) !important;
    box-shadow: var(--shadow-md) !important;
}

:is(.maintenance-summary,
    .maintenance-calendar-page,
    .maintenance-plans-page,
    .schedule-maintenance-page,
    .new-plan-page,
    .maintenance-history-page,
    .maintenance-detail-page) .action {
    border: 1px solid color-mix(in srgb, var(--brand-accent), var(--text-primary) 18%) !important;
    background: var(--brand-accent) !important;
    background-image: none !important;
    color: var(--on-accent) !important;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--brand-accent), transparent 76%) !important;
}

:is(.maintenance-summary,
    .maintenance-calendar-page,
    .maintenance-plans-page,
    .schedule-maintenance-page,
    .new-plan-page,
    .maintenance-history-page,
    .maintenance-detail-page) .action:hover:not(:disabled) {
    border-color: var(--brand-accent) !important;
    background: color-mix(in srgb, var(--brand-accent), var(--text-primary) 12%) !important;
    color: var(--on-accent) !important;
}

@media (max-width: 600px) {
    :is(.maintenance-summary,
        .maintenance-calendar-page,
        .maintenance-plans-page,
        .schedule-maintenance-page,
        .new-plan-page,
        .maintenance-detail-page) {
        padding: 10px !important;
    }
}