/* ── Root ── */ :root { --accent: #0052FF; --accent-secondary: #4D7CFF; --foreground: #0F172A; --background: #FAFAFA; --muted: #F1F5F9; --muted-foreground: #64748B; --border: #E2E8F0; --card: #FFFFFF; --ring: #0052FF; } body { font-family: "Inter", system-ui, sans-serif; color: var(--foreground); background: var(--background); } h1, h2 { font-family: "Calistoga", Georgia, serif; } /* ── Modal backdrop ── */ .mud-overlay.mud-overlay-dialog .mud-overlay-scrim { background-color: rgba(148, 163, 184, 0.3) !important; border-color: transparent !important; backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; } /* ── Popover mobile fix ── */ @media (max-width: 600px) { .mud-popover { left: 8px !important; right: 8px !important; width: auto !important; max-width: calc(100vw - 16px) !important; } } /* ── Row parent-affected ── */ .row-parent-disabled td { text-decoration: line-through !important; color: rgba(100, 116, 139, 0.75) !important; } .row-parent-deleted td { color: #EF4444 !important; } /* ── Content container ── */ .content-container { padding-left: 4px !important; padding-right: 4px !important; } @media (max-width: 960px) { .content-container { padding-left: 12px !important; padding-right: 12px !important; } } /* ── Content panel (white card) ── */ .content-opaque { background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); transition: box-shadow 0.2s ease-out; } /* Account views */ .account-login-shell { position: relative; } .account-auth-title { font-size: 1.8rem !important; line-height: 1.2; } @media (max-width: 600px) { .account-auth-title { font-size: 1.55rem !important; } } /* ── Buttons: Primary filled only ── */ .mud-button-filled-primary { background: linear-gradient(to right, var(--accent), var(--accent-secondary)) !important; color: #FFFFFF !important; border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); transition: all 0.2s ease-out; } .mud-button-filled-primary:hover { transform: translateY(-0.5px); box-shadow: 0 4px 14px rgba(0, 82, 255, 0.25); filter: brightness(1.1); } .mud-button-filled-primary:active { transform: scale(0.98); } .mud-button-filled-primary.mud-button-disable, .mud-button-filled-primary:disabled { background: var(--border) !important; color: var(--muted-foreground) !important; box-shadow: none !important; filter: none !important; transform: none !important; cursor: not-allowed; } .mud-button-filled-primary .mud-button-icon-end { transition: transform 0.2s ease-out; } .mud-button-filled-primary:hover .mud-button-icon-end { transform: translateX(4px); } /* ── Outline button ── */ .mud-button-outlined { border-color: var(--border); color: var(--foreground); border-radius: 12px; transition: all 0.2s ease-out; } .mud-button-outlined:hover { border-color: rgba(0, 82, 255, 0.3); background: var(--muted); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); } /* ── Inputs: Outline variant ── */ .mud-input-outlined { border-color: var(--border) !important; border-radius: 12px !important; min-height: 48px; } .mud-input-outlined.mud-input-focused { box-shadow: 0 0 0 2px var(--ring), 0 0 0 4px rgba(0, 82, 255, 0.15) !important; } .mud-input-outlined .mud-input-label-outlined { color: rgba(100, 116, 139, 0.5); } .mud-input-outlined .mud-input-label-outlined.mud-input-label-active { color: var(--accent); } ::placeholder { color: rgba(100, 116, 139, 0.5); } /* ── Cards ── */ .card-surface { background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07); transition: box-shadow 0.2s ease-out, background 0.2s ease-out; } .card-surface:hover { box-shadow: 0 10px 15px rgba(0, 0, 0, 0.08); background: linear-gradient(to bottom right, rgba(0, 82, 255, 0.03), transparent), var(--card); } .card-surface:hover .card-icon { transform: scale(1.1); transition: transform 0.2s ease-out; } /* ── Gradient border (2px stroke effect) ── */ .gradient-border { border-radius: 12px; background: linear-gradient(to bottom right, var(--accent), var(--accent-secondary), var(--accent)); padding: 2px; } .gradient-border > .gradient-border-inner { border-radius: 10px; background: var(--card); height: 100%; width: 100%; } /* ── Gradient text ── */ .gradient-text { background: linear-gradient(to right, var(--accent), var(--accent-secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ── Gradient underline ── */ .gradient-underline { position: absolute; bottom: -0.25rem; left: 0; height: 0.75rem; width: 100%; border-radius: 0.125rem; background: linear-gradient(to right, rgba(0, 82, 255, 0.15), rgba(77, 124, 255, 0.1)); } /* ── Section label badge ── */ /* ── Inverted dark section ── */ .inverted-section { background: var(--foreground); color: var(--background); } /* ── Dot pattern ── */ .dot-pattern { background: radial-gradient(circle, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 32px 32px; } /* ── Radial glow ── */ .radial-glow { position: absolute; width: 200px; height: 200px; background: radial-gradient(circle, rgba(0, 82, 255, 0.15), transparent); filter: blur(100px); pointer-events: none; } /* ── Shadow utilities ── */ .shadow-accent { box-shadow: 0 4px 14px rgba(0, 82, 255, 0.25); } .shadow-accent-lg { box-shadow: 0 8px 24px rgba(0, 82, 255, 0.35); } .shadow-lg { box-shadow: 0 10px 15px rgba(0, 0, 0, 0.08); } .shadow-xl { box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1); } /* ── Pulsing dot ── */ /* ── NavMenu active link ── */ .mud-nav-link.mud-nav-link-active { color: var(--accent); background: rgba(0, 82, 255, 0.05); } .mud-nav-link:hover:not(.mud-nav-link-disabled) { background: rgba(0, 82, 255, 0.03); } /* ── DataGrid header ── */ .mud-table-head .mud-table-cell { font-weight: 600; color: var(--muted-foreground); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; } /* ── Focus ring for accessibility ── */ :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } /* ── Dashboard ── */ .dashboard-root { display: flex; flex-direction: column; gap: 1.25rem; padding: 0.5rem 0; } .dashboard-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 1.5rem; flex-wrap: wrap; gap: 1rem; } .dashboard-header-left { flex: 1; min-width: 200px; } .dashboard-header-title { font-family: "Inter", system-ui, sans-serif; font-weight: 700; font-size: 1.75rem; line-height: 1.2; margin-top: 0; } .dashboard-header-right { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; } .dashboard-kpi-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .dashboard-dot-success { background: #10B981; } .dashboard-dot-warning { background: #F59E0B; } .dashboard-dot-error { background: #EF4444; } .dashboard-dot-muted { background: #64748B; } .dashboard-dot-neutral { background: #E2E8F0; } .dashboard-widget { padding: 1.5rem; } .dashboard-widget.card-surface:hover { background: var(--card); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07); } .dashboard-widget-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; flex-wrap: wrap; gap: 0.5rem; } .dashboard-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 1rem; gap: 0.75rem; } .dashboard-locked { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; gap: 0.5rem; } .dashboard-locked-icon { font-size: 3rem !important; color: var(--muted-foreground); } .dashboard-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; gap: 1rem; } .dashboard-chart-wrap { position: relative; width: 100%; overflow: visible; padding-top: 1rem; } .dashboard-chart-wrap .mud-chart { width: 100%; } .dashboard-chart-wrap .mud-chart-legend { display: none; } .dashboard-datagrid-mobile { overflow-x: auto; -webkit-overflow-scrolling: touch; } .dashboard-datagrid-mobile .mud-table { min-width: 500px; } .dashboard-widget--stretch { height: 100%; display: flex; flex-direction: column; } /* ── Dashboard: Mobile responsive ── */ @media (max-width: 960px) { .dashboard-header { padding: 1.25rem; } .dashboard-widget { padding: 1.25rem; } .dashboard-header-title { font-size: 1.5rem; } } @media (max-width: 600px) { .dashboard-root { gap: 0.75rem; } .dashboard-header { flex-direction: column; padding: 1rem; } .dashboard-header-right { align-items: center; width: 100%; justify-content: space-between; } .dashboard-header-title { font-size: 1.25rem; } .dashboard-widget { padding: 1rem; } .dashboard-stat { padding: 0.75rem; gap: 0.5rem; } .dashboard-stat-value { font-size: 1.125rem; } .dashboard-stat-icon { width: 32px; height: 32px; } .dashboard-chart-wrap .mud-chart { min-width: 300px; height: 220px !important; } .dashboard-chart-totals { flex-direction: column; gap: 0.5rem; } .dashboard-widget-header { flex-direction: column; align-items: flex-start; } .dashboard-empty { padding: 2rem 0.75rem; } } /* ── Login SSR loading overlay ── */ #login-loading-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-radius: 12px; z-index: 10; } .login-loading-spinner { width: 40px; height: 40px; border: 4px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: login-spin 0.8s linear infinite; } @keyframes login-spin { to { transform: rotate(360deg); } } .login-loading-text { margin-top: 8px; color: var(--muted-foreground); font-size: 0.9rem; }
/* ── HistoryViewer full-width ── */
.content-container:has(.history-viewer-root) {
    max-width: 100% !important;
}

.history-viewer-root .mud-data-grid .mud-table-container,
.history-viewer-root .mud-data-grid .mud-table-root {
    width: 100% !important;
    min-width: 100% !important;
}

/* ── DataGrid compacto: menos padding horizontal en celdas para que las tablas
      de entidad entren en el ancho de pantalla sin scroll horizontal ── */
.mud-data-grid th.mud-table-cell,
.mud-data-grid td.mud-table-cell {
    padding-left: 6px !important;
    padding-right: 6px !important;
}

/* ── Loading overlay (mismo scrim translucido con blur que los dialogos) ── */
.import-loading-overlay .mud-overlay-scrim {
    background-color: rgba(148, 163, 184, 0.3) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}

/* ═══ Dashboard v2 ═══════════════════════════════════════════════════════ */

/* ── Header ── */
.dashboard-header-meta {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
    margin-top: 0.375rem;
    color: var(--muted-foreground);
    font-size: 0.8125rem;
}

.dashboard-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.dashboard-meta-item .mud-icon-root {
    font-size: 1rem;
    opacity: 0.7;
}

.dashboard-meta-sep {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--border);
    flex-shrink: 0;
}

/* ── KPI strip ── */
.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.75rem;
}

@media (max-width: 1400px) {
    .dashboard-stats { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 700px) {
    .dashboard-stats { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
}

.dashboard-stat {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    min-width: 0;
}

.dashboard-stat--clickable {
    cursor: pointer;
    transition: box-shadow 0.2s ease-out, border-color 0.2s ease-out, transform 0.2s ease-out;
}

.dashboard-stat--clickable:hover,
.dashboard-stat--clickable:focus-visible {
    border-color: rgba(0, 82, 255, 0.35);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.dashboard-stat-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid transparent;
}

.dashboard-stat-icon .mud-icon-root { font-size: 1.25rem; }

.dashboard-stat-icon--primary { background: rgba(0, 82, 255, 0.1); border-color: rgba(0, 82, 255, 0.18); color: #0052FF; }
.dashboard-stat-icon--success { background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.18); color: #059669; }
.dashboard-stat-icon--info    { background: rgba(139, 92, 246, 0.1); border-color: rgba(139, 92, 246, 0.2); color: #8B5CF6; }
.dashboard-stat-icon--muted   { background: rgba(100, 116, 139, 0.1); border-color: rgba(100, 116, 139, 0.18); color: #64748B; }
.dashboard-stat-icon--error   { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.2); color: #EF4444; }

.dashboard-stat-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dashboard-stat-label {
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted-foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-stat-value {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
}

/* ── Widget refinements ── */
.dashboard-widget-title {
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}

.dashboard-widget-header {
    align-items: flex-start;
    margin-bottom: 1rem;
}

/* ── Donut (progreso de campaña) ── */
.dashboard-donut-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 0.5rem 0 1rem;
}

.dashboard-donut-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% - 0.25rem));
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

.dashboard-donut-percent {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
}

.dashboard-donut-caption {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted-foreground);
}

/* ── Key-value list ── */
.dashboard-kv-list {
    display: flex;
    flex-direction: column;
}

.dashboard-kv {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.4rem 0;
    font-size: 0.85rem;
}

.dashboard-kv + .dashboard-kv {
    border-top: 1px solid var(--muted);
}

.dashboard-kv-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--muted-foreground);
}

.dashboard-kv-value {
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ── Chart totals (leyenda con totales) ── */
.dashboard-chart-totals {
    display: flex;
    gap: 1.75rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--muted);
}

.dashboard-chart-total {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
}

.dashboard-chart-total-label { color: var(--muted-foreground); }

.dashboard-chart-total-value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.dashboard-interval-toggle { flex-shrink: 0; }

/* ── Contadores de análisis ── */
.dashboard-analisis-counters {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.875rem;
}

.dashboard-analisis-counter {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 0.25rem;
    border-radius: 8px;
    background: var(--muted);
}

.dashboard-analisis-counter-value {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.2;
}

.dashboard-analisis-counter-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted-foreground);
    white-space: nowrap;
}

.dashboard-text-success { color: #059669; }
.dashboard-text-warning { color: #D97706; }
.dashboard-text-error   { color: #EF4444; }

/* ── Listas de filas (incidencias, parcelas, cubas) ── */
.dashboard-list {
    display: flex;
    flex-direction: column;
}

.dashboard-list--scroll {
    overflow-y: auto;
    max-height: 260px;
    min-height: 0;
}

.dashboard-list-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.25rem;
    border-radius: 6px;
    transition: background 0.15s ease-out;
}

.dashboard-list-row + .dashboard-list-row {
    border-top: 1px solid var(--muted);
}

.dashboard-list-row:hover { background: var(--muted); }

.dashboard-list-row--stacked {
    flex-direction: column;
    align-items: stretch;
    gap: 0.375rem;
}

.dashboard-list-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.dashboard-list-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dashboard-list-title {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-list-sub {
    font-size: 0.72rem;
    color: var(--muted-foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-list-value {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.dashboard-list-progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dashboard-list-percent {
    font-size: 0.72rem;
    color: var(--muted-foreground);
    min-width: 34px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.dashboard-mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }

.dashboard-empty--compact { padding: 1.75rem 1rem; }

/* ── Icono de refresco girando durante recarga ── */
.dashboard-refresh-spinning .mud-icon-root {
    animation: dashboard-refresh-spin 0.9s linear infinite;
}

@keyframes dashboard-refresh-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-refresh-spinning .mud-icon-root { animation: none; }
    .dashboard-stat--clickable:hover { transform: none; }
}