/* ERP DIARTCO — Variables de tema (claro / oscuro) */

html.light {
    color-scheme: light;
    --erp-background: #f7f9fb;
    --erp-surface: #f7f9fb;
    --erp-surface-bright: #f7f9fb;
    --erp-surface-dim: #d8dadc;
    --erp-surface-container-lowest: #ffffff;
    --erp-surface-container-low: #f2f4f6;
    --erp-surface-container: #eceef0;
    --erp-surface-container-high: #e6e8ea;
    --erp-surface-container-highest: #e0e3e5;
    --erp-surface-variant: #e0e3e5;
    --erp-surface-tint: #2559bd;
    --erp-on-background: #191c1e;
    --erp-on-surface: #191c1e;
    --erp-on-surface-variant: #434653;
    --erp-primary: #00327d;
    --erp-primary-container: #0047ab;
    --erp-on-primary: #ffffff;
    --erp-on-primary-container: #a5bdff;
    --erp-primary-fixed: #dae2ff;
    --erp-primary-fixed-dim: #b1c5ff;
    --erp-on-primary-fixed: #001946;
    --erp-on-primary-fixed-variant: #00419e;
    --erp-secondary: #4e5e85;
    --erp-secondary-container: #c1d1ff;
    --erp-on-secondary: #ffffff;
    --erp-on-secondary-container: #4a5980;
    --erp-secondary-fixed: #dae2ff;
    --erp-secondary-fixed-dim: #b6c6f3;
    --erp-on-secondary-fixed: #081a3e;
    --erp-on-secondary-fixed-variant: #37466c;
    --erp-tertiary: #651f00;
    --erp-tertiary-container: #8b2e01;
    --erp-on-tertiary: #ffffff;
    --erp-on-tertiary-container: #ffaa8a;
    --erp-tertiary-fixed: #ffdbcf;
    --erp-tertiary-fixed-dim: #ffb59a;
    --erp-on-tertiary-fixed: #380d00;
    --erp-on-tertiary-fixed-variant: #802900;
    --erp-error: #ba1a1a;
    --erp-error-container: #ffdad6;
    --erp-on-error: #ffffff;
    --erp-on-error-container: #93000a;
    --erp-outline: #737784;
    --erp-outline-variant: #c3c6d5;
    --erp-inverse-surface: #2d3133;
    --erp-inverse-on-surface: #eff1f3;
    --erp-inverse-primary: #b1c5ff;
    --erp-sidebar-bg: #f8fafc;
    --erp-sidebar-border: rgb(241 245 249 / 0.95);
    --erp-nav-active-bg: #ffffff;
    --erp-nav-hover-bg: rgb(255 255 255 / 0.85);
    --erp-header-bg: rgb(255 255 255 / 0.85);
    --erp-line-border: rgb(226 232 240 / 0.95);
    --erp-shadow-ambient: 0 12px 32px -4px rgba(25, 28, 30, 0.06);
    --erp-shadow-ambient-sm: 0 4px 16px -2px rgba(25, 28, 30, 0.05);
}

html.dark {
    color-scheme: dark;
    --erp-background: #0f172a;
    --erp-surface: #0f172a;
    --erp-surface-bright: #0f172a;
    --erp-surface-dim: #334155;
    --erp-surface-container-lowest: #1e293b;
    --erp-surface-container-low: #1e293b;
    --erp-surface-container: #334155;
    --erp-surface-container-high: #475569;
    --erp-surface-container-highest: #64748b;
    --erp-surface-variant: #475569;
    --erp-surface-tint: #60a5fa;
    --erp-on-background: #f1f5f9;
    --erp-on-surface: #f1f5f9;
    --erp-on-surface-variant: #94a3b8;
    --erp-primary: #60a5fa;
    --erp-primary-container: #3b82f6;
    --erp-on-primary: #0f172a;
    --erp-on-primary-container: #1e3a5f;
    --erp-primary-fixed: #1e3a5f;
    --erp-primary-fixed-dim: #172554;
    --erp-on-primary-fixed: #dbeafe;
    --erp-on-primary-fixed-variant: #93c5fd;
    --erp-secondary: #94a3b8;
    --erp-secondary-container: #334155;
    --erp-on-secondary: #0f172a;
    --erp-on-secondary-container: #e2e8f0;
    --erp-secondary-fixed: #334155;
    --erp-secondary-fixed-dim: #475569;
    --erp-on-secondary-fixed: #f1f5f9;
    --erp-on-secondary-fixed-variant: #cbd5e1;
    --erp-tertiary: #fca5a5;
    --erp-tertiary-container: #7f1d1d;
    --erp-on-tertiary: #450a0a;
    --erp-on-tertiary-container: #fecaca;
    --erp-tertiary-fixed: #450a0a;
    --erp-tertiary-fixed-dim: #7f1d1d;
    --erp-on-tertiary-fixed: #fee2e2;
    --erp-on-tertiary-fixed-variant: #fca5a5;
    --erp-error: #f87171;
    --erp-error-container: #7f1d1d;
    --erp-on-error: #450a0a;
    --erp-on-error-container: #fecaca;
    --erp-outline: #64748b;
    --erp-outline-variant: #475569;
    --erp-inverse-surface: #f1f5f9;
    --erp-inverse-on-surface: #0f172a;
    --erp-inverse-primary: #00327d;
    --erp-sidebar-bg: #0f172a;
    --erp-sidebar-border: rgb(30 41 59 / 0.9);
    --erp-nav-active-bg: #1e293b;
    --erp-nav-hover-bg: rgb(30 41 59 / 0.85);
    --erp-header-bg: rgb(15 23 42 / 0.92);
    --erp-line-border: rgb(51 65 85 / 0.75);
    --erp-shadow-ambient: 0 12px 32px -4px rgba(0, 0, 0, 0.45);
    --erp-shadow-ambient-sm: 0 4px 16px -2px rgba(0, 0, 0, 0.35);
}

/* Terra balanced — tonos cálidos / papel / verde bosque (claro, no es modo oscuro) */
html.terra {
    color-scheme: light;
    --erp-background: #f0ebe3;
    --erp-surface: #f0ebe3;
    --erp-surface-bright: #faf7f1;
    --erp-surface-dim: #d4cbc0;
    --erp-surface-container-lowest: #faf8f4;
    --erp-surface-container-low: #ebe4d8;
    --erp-surface-container: #e0d8cb;
    --erp-surface-container-high: #d4cbbd;
    --erp-surface-container-highest: #c9bfb0;
    --erp-surface-variant: #d4cbbd;
    --erp-surface-tint: #3d5d4a;
    --erp-on-background: #1c1917;
    --erp-on-surface: #1c1917;
    --erp-on-surface-variant: #57534e;
    --erp-primary: #2d4a3e;
    --erp-primary-container: #3d5f4f;
    --erp-on-primary: #ffffff;
    --erp-on-primary-container: #d4e8dc;
    --erp-primary-fixed: #c8e6d4;
    --erp-primary-fixed-dim: #a3cbb4;
    --erp-on-primary-fixed: #0f241c;
    --erp-on-primary-fixed-variant: #1a3d30;
    --erp-secondary: #5c5348;
    --erp-secondary-container: #d6cfc4;
    --erp-on-secondary: #ffffff;
    --erp-on-secondary-container: #3d3830;
    --erp-secondary-fixed: #e8e2d9;
    --erp-secondary-fixed-dim: #ccc4b8;
    --erp-on-secondary-fixed: #1c1917;
    --erp-on-secondary-fixed-variant: #44403c;
    --erp-tertiary: #7c4a2a;
    --erp-tertiary-container: #a1623a;
    --erp-on-tertiary: #ffffff;
    --erp-on-tertiary-container: #5c3d26;
    --erp-tertiary-fixed: #f5e0d4;
    --erp-tertiary-fixed-dim: #e8c4b0;
    --erp-on-tertiary-fixed: #3d1f0f;
    --erp-on-tertiary-fixed-variant: #6b3d24;
    --erp-error: #b3261e;
    --erp-error-container: #f9dedc;
    --erp-on-error: #ffffff;
    --erp-on-error-container: #410e0b;
    --erp-outline: #79747e;
    --erp-outline-variant: #cac4ba;
    --erp-inverse-surface: #313033;
    --erp-inverse-on-surface: #f4eff4;
    --erp-inverse-primary: #a3cbb4;
    --erp-sidebar-bg: #e8e2d6;
    --erp-sidebar-border: rgb(201 191 176 / 0.85);
    --erp-nav-active-bg: #faf8f4;
    --erp-nav-hover-bg: rgb(250 248 244 / 0.92);
    --erp-header-bg: rgb(250 248 244 / 0.9);
    --erp-line-border: rgb(201 191 176 / 0.75);
    --erp-shadow-ambient: 0 12px 32px -4px rgba(28, 25, 23, 0.07);
    --erp-shadow-ambient-sm: 0 4px 16px -2px rgba(28, 25, 23, 0.06);
}

/* Tipografía de marca: cuerpo legible + display geométrico (evita Inter genérico) */
html.light,
html.dark,
html.terra {
    --font-sans: "Plus Jakarta Sans", system-ui, sans-serif;
    --font-display: "Outfit", "Plus Jakarta Sans", system-ui, sans-serif;
}

body.erp-app {
    font-family: var(--font-sans);
    background-color: var(--erp-background);
    color: var(--erp-on-surface);
}

/* Entrada del área principal: opacidad + translateY (respeta reduced-motion) */
@media (prefers-reduced-motion: no-preference) {
    body.erp-app main {
        animation: erp-main-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
}
@keyframes erp-main-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@media (prefers-reduced-motion: reduce) {
    body.erp-app main {
        animation: none;
    }
}

.font-display {
    font-family: var(--font-display);
}

body.erp-app ::selection {
    background-color: rgba(0, 50, 125, 0.18);
}

html.dark body.erp-app ::selection {
    background-color: rgba(96, 165, 250, 0.28);
}

html.terra body.erp-app ::selection {
    background-color: rgba(45, 74, 62, 0.2);
}

.erp-app .material-symbols-outlined {
    font-size: 20px;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.erp-app .tabular-nums {
    font-variant-numeric: tabular-nums;
}

.ambient-shadow {
    box-shadow: var(--erp-shadow-ambient);
}

.ambient-shadow-sm {
    box-shadow: var(--erp-shadow-ambient-sm);
}

body.erp-app ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
html.light body.erp-app ::-webkit-scrollbar-track {
    background: #eceef0;
}
html.light body.erp-app ::-webkit-scrollbar-thumb {
    background: #c3c6d5;
    border-radius: 10px;
}
html.dark body.erp-app ::-webkit-scrollbar-track {
    background: #1e293b;
}
html.dark body.erp-app ::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 10px;
}
html.terra body.erp-app ::-webkit-scrollbar-track {
    background: #e5dfd4;
}
html.terra body.erp-app ::-webkit-scrollbar-thumb {
    background: #a89b88;
    border-radius: 10px;
}

/* Alertas de error: legibles en oscuro */
html.dark .border-red-200 {
    border-color: rgb(127 29 29 / 0.6) !important;
}
html.dark .bg-red-50 {
    background-color: rgb(127 29 29 / 0.25) !important;
}
html.dark .text-red-800 {
    color: #fecaca !important;
}

/* Login (public/login.html) — sin Tailwind: utilidad mínima */
.login-page .hidden {
    display: none !important;
}

/* Login (public/login.html) */
.login-page {
    font-family: var(--font-sans);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--erp-background);
    color: var(--erp-on-surface);
    position: relative;
}
.login-page::before {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse 80% 50% at 50% -15%, rgba(0, 50, 125, 0.08), transparent 55%);
    pointer-events: none;
}
html.dark .login-page::before {
    background: radial-gradient(ellipse 80% 50% at 50% -15%, rgba(96, 165, 250, 0.07), transparent 55%);
}
html.terra .login-page::before {
    background: radial-gradient(ellipse 80% 50% at 50% -15%, rgba(45, 74, 62, 0.1), transparent 55%);
}
.login-page .login-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    background: var(--erp-surface-container-lowest);
    border: 1px solid var(--erp-line-border);
    border-radius: 16px;
    padding: 44px 40px;
    box-shadow: var(--erp-shadow-ambient);
}
.login-page .logo-icon {
    width: 52px;
    height: 52px;
    background: linear-gradient(145deg, var(--erp-primary) 0%, var(--erp-primary-container) 100%);
    border: none;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    box-shadow: 0 4px 16px -2px rgba(0, 50, 125, 0.25);
}
html.dark .login-page .logo-icon {
    box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.35);
}
html.terra .login-page .logo-icon {
    box-shadow: 0 4px 16px -2px rgba(45, 74, 62, 0.28);
}
.login-page .logo-icon span {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.05em;
}
.login-page .logo h1 {
    font-family: var(--font-display);
    color: var(--erp-on-surface);
    font-size: clamp(1.25rem, 1.1rem + 0.4vw, 1.35rem);
    font-weight: 700;
    letter-spacing: -0.03em;
}
.login-page .logo p {
    color: var(--erp-on-surface-variant);
    font-size: 13px;
    margin-top: 6px;
    line-height: 1.45;
}
.login-page *,
.login-page *::before,
.login-page *::after {
    box-sizing: border-box;
}
.login-page .logo {
    text-align: center;
    margin-bottom: 32px;
}
.login-page .form-group {
    margin-bottom: 18px;
}
.login-page label {
    display: block;
    color: var(--erp-on-surface-variant);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}
.login-page input {
    width: 100%;
    padding: 11px 14px;
    background: var(--erp-surface-container-low);
    border: 1px solid var(--erp-line-border);
    border-radius: 10px;
    color: var(--erp-on-surface);
    font-size: 15px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.login-page input::placeholder {
    color: var(--erp-on-surface-variant);
    opacity: 0.75;
}
.login-page input:focus {
    outline: none;
    border-color: var(--erp-primary);
    box-shadow: 0 0 0 3px rgba(0, 50, 125, 0.12);
    background: var(--erp-surface-container-lowest);
}
html.dark .login-page input:focus {
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
}
html.terra .login-page input:focus {
    box-shadow: 0 0 0 3px rgba(45, 74, 62, 0.18);
}
.login-page .btn-login {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    margin-top: 10px;
    transition: background 0.2s, transform 0.1s;
    background: var(--erp-primary);
    color: var(--erp-on-primary);
}
.login-page .btn-login:hover {
    background: var(--erp-primary-container);
}
.login-page .btn-login:active {
    transform: scale(0.99);
}
.login-page .btn-login:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}
.login-page .error-msg {
    display: none;
    background: var(--erp-error-container);
    border: 1px solid rgba(185, 28, 28, 0.35);
    color: var(--erp-on-error-container);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 16px;
}
html.dark .login-page .error-msg {
    border-color: rgba(248, 113, 113, 0.4);
    color: #fecaca;
}
.login-page .version {
    text-align: center;
    color: var(--erp-on-surface-variant);
    font-size: 11px;
    margin-top: 28px;
    letter-spacing: 0.04em;
    opacity: 0.9;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Login: theme picker (login.html no carga Tailwind; replicar stitch) */
.login-page .login-theme-picker {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 100;
}
.login-page .login-theme-picker #erp-theme-btn {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 9999px;
    background: transparent;
    cursor: pointer;
    color: color-mix(in srgb, var(--erp-on-surface-variant) 80%, transparent);
    transition: color 0.15s ease, background-color 0.15s ease;
}
@supports not (color: color-mix(in srgb, white, black)) {
    .login-page .login-theme-picker #erp-theme-btn {
        color: var(--erp-on-surface-variant);
        opacity: 0.85;
    }
    .login-page .login-theme-picker #erp-theme-btn:hover {
        opacity: 1;
    }
}
.login-page .login-theme-picker #erp-theme-btn:hover {
    color: var(--erp-on-surface);
    background-color: var(--erp-surface-container);
}
.login-page .login-theme-picker #erp-theme-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 0.25rem;
    min-width: 10rem;
    padding: 0.375rem;
    border-radius: 0.75rem;
    border: 1px solid var(--erp-line-border);
    background-color: var(--erp-surface-container-lowest);
    box-shadow: var(--erp-shadow-ambient);
    z-index: 50;
}
.login-page .login-theme-picker #erp-theme-dropdown:not(.hidden) {
    display: block;
}
.login-page .login-theme-picker .erp-theme-option {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.875rem;
    line-height: 1.25;
    text-align: left;
    color: var(--erp-on-surface);
    transition: background-color 0.15s ease;
    font-family: inherit;
}
.login-page .login-theme-picker .erp-theme-option:hover {
    background-color: var(--erp-surface-container);
}
.login-page .login-theme-picker .erp-theme-option > span:first-child {
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 9999px;
    flex-shrink: 0;
    display: inline-block;
}
.login-page .login-theme-picker .erp-theme-option[data-theme='light'] > span:first-child {
    background-color: #e0f2fe;
    border: 1px solid #7dd3fc;
}
.login-page .login-theme-picker .erp-theme-option[data-theme='dark'] > span:first-child {
    background-color: #334155;
    border: 1px solid #475569;
}
.login-page .login-theme-picker .erp-theme-option[data-theme='terra'] > span:first-child {
    background-color: #b45309;
    border: 1px solid #d97706;
}
.login-page .login-theme-picker .erp-theme-option.font-semibold {
    font-weight: 600;
}
.login-page .login-theme-picker .erp-theme-option.text-primary {
    color: var(--erp-primary);
}

/* Cabecera ERP: el menú del tema no debe recortarse por overflow */
body.erp-app main > header.sticky {
    overflow: visible;
}

/* —— Pulido UI: foco accesible, tablas, coherencia con temas —— */
body.erp-app aside nav a {
    outline: none;
}
body.erp-app aside nav a:focus-visible {
    outline: 2px solid var(--erp-primary);
    outline-offset: 2px;
}
body.erp-app header button:focus-visible,
body.erp-app main button:focus-visible:not(:disabled) {
    outline: 2px solid var(--erp-primary);
    outline-offset: 2px;
}
body.erp-app main table tbody tr {
    transition: background-color 0.14s ease;
}
body.erp-app main table tbody tr:hover {
    background-color: var(--erp-surface-container-low);
}
body.erp-app main a:focus-visible {
    outline: 2px solid var(--erp-primary);
    outline-offset: 2px;
    border-radius: 2px;
}
.login-page .btn-login:focus-visible,
.login-page .login-theme-select:focus-visible {
    outline: 2px solid var(--erp-primary);
    outline-offset: 2px;
}

/* Planilla control de obra (estilo Excel) */
.sheet-wrap {
    background: var(--erp-surface-container-lowest);
    border: 1px solid var(--erp-line-border);
    overflow: hidden;
}
.sheet-kicker {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--erp-primary);
    margin: 0 0 0.2rem;
}
.sheet-summary {
    border-collapse: collapse;
    font-size: 12px;
    min-width: 28rem;
}
.sheet-summary th,
.sheet-summary td {
    border: 1px solid color-mix(in srgb, var(--erp-outline-variant) 85%, var(--erp-outline));
    padding: 0.32rem 0.55rem;
    white-space: nowrap;
}
.sheet-summary thead th {
    background: var(--erp-primary);
    color: var(--erp-on-primary);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: right;
}
.sheet-summary thead th:first-child {
    text-align: left;
    background: var(--erp-primary-container);
}
.sheet-summary tbody td:first-child {
    font-weight: 600;
    color: var(--erp-on-surface);
    background: var(--erp-surface-container-low);
}
.sheet-summary .num,
.sheet-grid .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.sheet-summary tbody tr:last-child td {
    font-weight: 700;
    background: color-mix(in srgb, var(--erp-primary) 8%, var(--erp-surface-container-lowest));
}
.sheet-grid {
    border-collapse: collapse;
    width: max-content;
    min-width: 100%;
    font-size: 12px;
}
.sheet-grid th,
.sheet-grid td {
    border: 1px solid color-mix(in srgb, var(--erp-outline-variant) 85%, var(--erp-outline));
    padding: 0.32rem 0.5rem;
    white-space: nowrap;
    vertical-align: middle;
}
.sheet-grid thead th {
    background: var(--erp-primary);
    color: var(--erp-on-primary);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    position: sticky;
    top: 0;
    z-index: 2;
}
.sheet-grid tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--erp-surface-container) 50%, var(--erp-surface-container-lowest));
}
.sheet-grid tbody tr:hover td {
    background: color-mix(in srgb, var(--erp-primary) 7%, var(--erp-surface-container-lowest));
}
.sheet-desc {
    white-space: normal !important;
    min-width: 12rem;
    max-width: 22rem;
}
.sheet-neg { color: var(--erp-error); font-weight: 600; }
.sheet-pos { color: #15803d; font-weight: 600; }
html.dark .sheet-pos,
html.terra .sheet-pos { color: #4ade80; }