/* ===================================================================== * PANEL ADMINISTRADOR · Sistema de diseño (capa visual) * --------------------------------------------------------------------- * Se carga DESPUÉS de admin.css y solo habla de aspecto: color, espacio, * tipografía, profundidad y movimiento. No toca lógica ni datos. * * Niveles de profundidad (oscuro): * fondo #0B1120 --bg * sidebar #101827 --ds-side-bg * tarjeta #151D2D --surface * elevada #192334 --surface-2 (inputs, hover, cabeceras de tabla) * * Tipografía: Plus Jakarta Sans (la de la app; Inter es la sugerencia del * brief, pero ya hay una sans moderna cargada) + JetBrains Mono para cifras. * título 26 · sección 16 · valor KPI 30-38 · texto 13-14 · secundario 12 * * Movimiento: 150-250 ms ease en interacción; entradas 450 ms con * escalonado de 50 ms; todo con transform/opacity. Las animaciones de * entrada solo corren dentro de .adm-anim (carga y cambio de mes). * ===================================================================== */ /* ---------- Tokens ---------- */ #page-admin { --ds-ease: cubic-bezier(.16, 1, .3, 1); --ds-side-bg: var(--surface); --primary-strong: #1e40af; --ds-shadow: 0 1px 2px rgba(15,23,42,.05), 0 10px 24px -14px rgba(15,23,42,.14); --ds-shadow-hover: 0 2px 4px rgba(15,23,42,.06), 0 18px 32px -16px rgba(15,23,42,.24); --ds-focus: 0 0 0 3px rgba(26,86,219,.16); --ds-line-hover: rgba(15,23,42,.16); font-size: 14px; } body.dark-mode #page-admin { --bg: #0B1120; --surface: #151D2D; --surface-2: #192334; --ds-side-bg: #101827; --border: rgba(255,255,255,.07); --text: #F8FAFC; --text-2: #CBD5E1; --text-3: #94A3B8; --primary: #3B82F6; --primary-strong: #2563EB; --primary-light: rgba(59,130,246,.14); --accent: #22D3EE; --success: #10B981; --warning: #F59E0B; --danger: #EF4444; --ds-shadow: 0 1px 2px rgba(0,0,0,.28), 0 12px 28px -16px rgba(0,0,0,.6); --ds-shadow-hover: 0 2px 4px rgba(0,0,0,.32), 0 20px 36px -16px rgba(0,0,0,.7); --ds-focus: 0 0 0 3px rgba(59,130,246,.24); --ds-line-hover: rgba(255,255,255,.16); } /* ---------- Estructura general ---------- */ #page-admin .adm-main { padding: 26px 32px 64px; max-width: 1780px; margin: 0 auto; width: 100%; } #page-admin .adm-section { margin-bottom: 26px; } #page-admin .adm-section-head { margin-bottom: 16px; } #page-admin .adm-section-head h2 { font-size: 16px; letter-spacing: -.01em; } #page-admin .adm-section-head h2 i { color: var(--primary); font-size: 18px; } #page-admin .adm-link { font-size: 12.5px; transition: color .15s ease, opacity .15s ease; } #page-admin .adm-link:hover { text-decoration: none; opacity: .8; } #page-admin .adm-card, #page-admin .adm-chart-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 20px; box-shadow: var(--ds-shadow); transition: transform .18s var(--ds-ease), box-shadow .18s ease, border-color .18s ease; } #page-admin .adm-card:hover, #page-admin .adm-chart-card:hover { border-color: var(--ds-line-hover); box-shadow: var(--ds-shadow-hover); transform: translateY(-2px); } /* La tabla y los formularios grandes no se levantan al pasar el mouse */ #page-admin .adm-view:not(#adm-view-resumen) .adm-card:hover { transform: none; box-shadow: var(--ds-shadow); border-color: var(--border); } #page-admin .adm-chart-title { font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: var(--text); margin: 0 0 14px; padding: 0; border: 0; } /* ---------- Sidebar ---------- */ #page-admin .adm-layout { --side-w: 236px; } #page-admin .adm-layout.collapsed { --side-w: 78px; } #page-admin .adm-side { width: var(--side-w); flex: 0 0 var(--side-w); background: var(--ds-side-bg); border-right: 1px solid var(--border); padding: 18px 12px; gap: 20px; overflow: hidden; transition: width .25s ease, flex-basis .25s ease; } #page-admin .adm-side-logo { padding: 0 4px; gap: 11px; min-height: 40px; } #page-admin .adm-side-logo img { width: 36px; height: 36px; border-radius: 10px; flex: 0 0 auto; } #page-admin .adm-side-brand { min-width: 0; white-space: nowrap; overflow: hidden; max-width: 140px; transition: opacity .18s ease, max-width .25s ease; } #page-admin .adm-side-brand b { font-size: 16px; letter-spacing: -.01em; } #page-admin .adm-side-brand span { font-size: 11.5px; } .adm-side-toggle { margin-left: auto; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: transparent; border: 1px solid transparent; color: var(--text-3); font-size: 18px; transition: background .15s ease, color .15s ease, transform .15s ease; } .adm-side-toggle:hover { background: var(--surface-2); color: var(--text); } .adm-side-toggle:active { transform: scale(.94); } .adm-side-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } #page-admin .adm-nav { gap: 4px; } #page-admin .adm-nav-link { position: relative; height: 42px; padding: 0 13px; gap: 13px; border-radius: 11px; font-size: 13.5px; font-weight: 700; color: var(--text-2); transition: background .18s ease, color .18s ease, transform .15s ease; } #page-admin .adm-nav-link i { font-size: 19px; width: 22px; text-align: center; flex: 0 0 auto; transition: color .18s ease, transform .18s var(--ds-ease); } #page-admin .adm-nav-link:hover { background: var(--surface-2); color: var(--text); } #page-admin .adm-nav-link:hover i { transform: scale(1.08); } #page-admin .adm-nav-link:active { transform: scale(.98); } #page-admin .adm-nav-link:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; } #page-admin .adm-nav-link.active { background: var(--primary-light); color: var(--text); } #page-admin .adm-nav-link.active i { color: var(--primary); } #page-admin .adm-nav-link::before { content: ''; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--primary); transform: scaleY(0); transition: transform .22s var(--ds-ease); } #page-admin .adm-nav-link.active::before { transform: scaleY(1); } .adm-nav-label { white-space: nowrap; overflow: hidden; max-width: 160px; transition: opacity .18s ease, max-width .25s ease; } #page-admin .adm-nav-badge { transition: transform .2s var(--ds-ease); } #page-admin .adm-side-bottom { padding: 14px 6px 0; } #page-admin .adm-conn { font-size: 12px; } /* Contraído: solo iconos */ #page-admin .adm-layout.collapsed .adm-side-brand, #page-admin .adm-layout.collapsed .adm-nav-label { opacity: 0; max-width: 0; } #page-admin .adm-layout.collapsed .adm-side-logo { flex-direction: column; gap: 10px; align-items: center; padding: 0; } #page-admin .adm-layout.collapsed .adm-side-toggle { margin: 0; } #page-admin .adm-layout.collapsed .adm-nav-link { justify-content: center; padding: 0; gap: 0; } #page-admin .adm-layout.collapsed .adm-nav-badge { position: absolute; top: 4px; right: 6px; min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; } #page-admin .adm-layout.collapsed .adm-conn { justify-content: center; } #page-admin .adm-layout.collapsed .adm-side-bottom { padding-left: 0; padding-right: 0; } /* ---------- Header ---------- */ #page-admin .adm-header { background: transparent; border: 0; box-shadow: none; padding: 0 0 4px; margin-bottom: 18px; align-items: flex-end; gap: 18px 24px; } #page-admin .adm-title { font-size: 26px; letter-spacing: -.025em; line-height: 1.15; font-weight: 800; } #page-admin .adm-subtitle { font-size: 13.5px; color: var(--text-3); margin-top: 2px; } #page-admin .adm-header-right { gap: 10px; } .adm-meta { flex-direction: row !important; align-items: center; gap: 10px; text-align: left !important; padding: 0 4px; } .adm-meta-txt { display: flex; flex-direction: column; gap: 1px; } #page-admin .adm-meta-name { font-size: 13.5px; } #page-admin .adm-meta-role { font-size: 11.5px; letter-spacing: .04em; } .adm-avatar-sm { width: 36px; height: 36px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 800; color: var(--primary); background: var(--primary-light); } /* Selects con icono y flecha propia */ .adm-sel { position: relative; display: block; } .adm-sel select { appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer; } .adm-sel-caret { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-3); font-size: 14px; transition: transform .2s ease; } .adm-sel:focus-within .adm-sel-caret { color: var(--primary); } .adm-sel-mes { display: inline-block; } .adm-sel-mes select { padding-left: 38px; min-width: 150px; font-weight: 700; } .adm-sel-ico { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--primary); font-size: 16px; z-index: 1; } /* ---------- Botones ---------- */ #page-admin .adm-btn { height: 40px; padding: 0 15px; border-radius: 10px; font-size: 13px; transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, filter .15s ease, color .15s ease; } #page-admin .adm-btn.sm { height: 32px; padding: 0 12px; font-size: 12px; border-radius: 8px; } #page-admin .adm-btn:hover { transform: translateY(-1px); filter: none; } #page-admin .adm-btn:active { transform: scale(.98); } #page-admin .adm-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } #page-admin .adm-btn:not(.ghost):not(.quiet):not(.danger):hover { background: var(--primary-strong); box-shadow: 0 8px 18px -10px var(--primary); } #page-admin .adm-btn.ghost { background: var(--surface); border: 1px solid var(--border); color: var(--text); } #page-admin .adm-btn.ghost:hover { background: var(--surface-2); border-color: var(--ds-line-hover); } #page-admin .adm-btn.quiet { background: transparent; color: var(--text-2); border: 1px solid var(--border); } #page-admin .adm-btn.quiet:hover { background: var(--surface-2); color: var(--text); } #page-admin .adm-btn.quiet:disabled { opacity: .5; background: transparent; transform: none; } #page-admin .adm-btn.icon i { font-size: 16px; } #page-admin .adm-btn.icon.spinning i { animation: adm-spin-once .9s var(--ds-ease); } @keyframes adm-spin-once { to { transform: rotate(360deg); } } /* ---------- Filtros ---------- */ #page-admin .adm-filters { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--ds-shadow); padding: 14px 16px; gap: 14px; align-items: flex-end; margin-bottom: 24px; } #page-admin .adm-field { min-width: 160px; gap: 6px; } #page-admin .adm-field-search { flex: 2.2 1 340px; } #page-admin .adm-field label { font-size: 12px; letter-spacing: .04em; transition: color .15s ease; } #page-admin .adm-input, #page-admin .adm-select { height: 40px; padding: 0 12px; border-radius: 10px; font-size: 13.5px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } #page-admin .adm-input::placeholder { color: var(--text-3); } #page-admin .adm-input:hover, #page-admin .adm-select:hover { border-color: var(--ds-line-hover); } #page-admin .adm-input:focus, #page-admin .adm-select:focus { border-color: color-mix(in srgb, var(--primary) 70%, transparent); box-shadow: var(--ds-focus); outline: none; } .adm-input-wrap { position: relative; } .adm-input-wrap > i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-3); font-size: 16px; pointer-events: none; transition: color .15s ease; } .adm-input-wrap:focus-within > i { color: var(--primary); } #page-admin .adm-input-wrap .adm-input { padding-left: 39px; } #page-admin .adm-input-wrap input[type="search"]::-webkit-search-cancel-button { appearance: none; } /* Filtro aplicado */ #page-admin .adm-field.is-active label { color: var(--primary); } #page-admin .adm-field.is-active .adm-input, #page-admin .adm-field.is-active .adm-select { border-color: color-mix(in srgb, var(--primary) 55%, var(--border)); background: color-mix(in srgb, var(--primary) 9%, var(--surface-2)); } #page-admin .adm-filters.has-active .adm-filters-actions .adm-btn { color: var(--text); border-color: var(--ds-line-hover); } /* ---------- Tarjetas KPI ---------- */ #page-admin .adm-kpi-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; } #page-admin .adm-kpi { --c: var(--text-3); grid-column: span 4; min-height: 0; padding: 18px 20px; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--ds-shadow); transition: transform .18s var(--ds-ease), box-shadow .18s ease, border-color .18s ease; } #page-admin .adm-kpi:hover { transform: translateY(-2px); box-shadow: var(--ds-shadow-hover); border-color: var(--ds-line-hover); } #page-admin .adm-kpi.c-blue { --c: var(--primary); grid-column: span 3; order: -2; } #page-admin .adm-kpi.c-cyan { --c: var(--primary); } #page-admin .adm-kpi.c-green { --c: var(--success); } #page-admin .adm-kpi.c-orange{ --c: var(--warning); } #page-admin .adm-kpi.c-red { --c: var(--danger); } #page-admin .adm-kpi.c-gold { --c: var(--warning); grid-column: span 3; order: -1; } #page-admin .adm-kpi.featured { grid-column: span 6; order: -3; padding: 22px 24px; } .adm-kpi-top { gap: 10px; justify-content: flex-start !important; } .adm-kpi-ico { width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); } #page-admin .adm-kpi-label { font-size: 12px; letter-spacing: .05em; color: var(--text-3); } #page-admin .adm-kpi-value { font-size: 30px; line-height: 1.1; font-weight: 800; letter-spacing: -.025em; color: var(--text); font-variant-numeric: tabular-nums; margin-top: 4px; } #page-admin .adm-kpi.featured .adm-kpi-value { font-size: 38px; color: var(--text); } #page-admin .adm-kpi-value.small { font-size: 20px; line-height: 1.25; } #page-admin .adm-kpi-desc { font-size: 13px; color: var(--text-3); font-weight: 500; } #page-admin .adm-trend { font-size: 12.5px; padding: 3px 9px; border-radius: 99px; background: var(--surface-2); } #page-admin .adm-trend.up { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--ok-t); } #page-admin .adm-trend.down { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); } /* Barra hacia la meta (solo en Promedio KPI) */ .adm-meta-bar { position: relative; height: 7px; border-radius: 99px; background: var(--surface-2); margin-top: 8px; overflow: hidden; } .adm-meta-bar > i { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 99px; background: linear-gradient(90deg, var(--primary-strong), var(--primary)); transform-origin: left; } .adm-meta-mark { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--text-2); opacity: .55; } .adm-meta-cap { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-3); font-weight: 600; margin-top: 2px; } /* ---------- Insights: tarjetas analíticas ---------- */ #page-admin .adm-insights { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; } #page-admin .adm-insight { --c: var(--primary); background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--ds-shadow); padding: 16px 18px; gap: 14px; align-items: flex-start; font-weight: 500; transition: transform .18s var(--ds-ease), box-shadow .18s ease, border-color .18s ease; } #page-admin .adm-insight:hover { transform: translateY(-2px); box-shadow: var(--ds-shadow-hover); border-color: var(--ds-line-hover); } #page-admin .adm-insight.up { --c: var(--success); } #page-admin .adm-insight.down { --c: var(--danger); } .adm-ins-ico { width: 36px; height: 36px; border-radius: 10px; flex: 0 0 auto; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); } #page-admin .adm-insight .adm-ins-ico i { color: inherit; font-size: 18px; margin: 0; } .adm-ins-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .adm-ins-num { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; font-size: 28px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: var(--text); } .adm-insight.up .adm-ins-num { color: var(--ok-t); } .adm-insight.down .adm-ins-num { color: var(--danger); } .adm-ins-txt { font-size: 13.5px; font-weight: 700; color: var(--text); } .adm-ins-sub { font-size: 12px; color: var(--text-3); font-weight: 500; } /* ---------- Gráficos ---------- */ #page-admin .adm-charts { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: stretch; } #page-admin .adm-chart-card { min-height: 0; } #page-admin .adm-chart-box { min-height: 175px; } #page-admin .adm-charts .adm-chart-box { min-height: 215px; } #page-admin .adm-chart-box.sm { min-height: 235px; } #page-admin .adm-chart-box.lg { min-height: 340px; } .adm-pareto-sum { display: flex; gap: 9px; align-items: flex-start; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-2); line-height: 1.5; } .adm-pareto-sum i { color: var(--warning); font-size: 16px; margin-top: 1px; } .adm-pareto-sum b { color: var(--text); } /* Tooltip de los gráficos */ .adm-tt { position: absolute; z-index: 5; pointer-events: none; min-width: 210px; padding: 10px 12px; border-radius: 12px; font-size: 12.5px; color: var(--text); background: color-mix(in srgb, var(--surface-2) 94%, transparent); border: 1px solid var(--ds-line-hover); box-shadow: 0 14px 30px -12px rgba(0,0,0,.45); backdrop-filter: blur(6px); opacity: 0; transform: translate(-50%, calc(-100% - 2px)); transition: opacity .16s ease, transform .18s var(--ds-ease); } .adm-tt.on { opacity: 1; transform: translate(-50%, calc(-100% - 12px)); } .adm-tt-title { font-weight: 800; font-size: 13px; margin-bottom: 6px; } .adm-tt-row { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 2px 0; } .adm-tt-row b { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; font-weight: 700; } .adm-tt-k { display: inline-flex; align-items: center; gap: 7px; color: var(--text-2); white-space: nowrap; } .adm-tt-k i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } /* ---------- Rankings (Top 5 / Requieren apoyo) ---------- */ #page-admin .adm-rank-list { gap: 2px; } #page-admin .adm-rank-item { background: transparent; border-radius: 12px; padding: 10px 10px; gap: 12px; font-size: 13.5px; transition: background .15s ease, transform .15s ease; } #page-admin .adm-rank-item[role="button"] { cursor: pointer; } #page-admin .adm-rank-item[role="button"]:hover { background: var(--surface-2); } #page-admin .adm-rank-item[role="button"]:active { transform: scale(.99); } #page-admin .adm-rank-item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; } #page-admin .adm-rank-pos { width: 28px; font-size: 14px; text-align: center; color: var(--text-3); font-family: 'JetBrains Mono', monospace; } #page-admin .adm-rank-pos.medal { font-size: 21px; line-height: 1; font-family: inherit; } .adm-rank-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } #page-admin .adm-rank-name { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #page-admin .adm-rank-sub { font-size: 12px; } #page-admin .adm-rank-val { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 800; color: var(--text); } #page-admin .adm-rank-val.exc { color: var(--ok-t); } #page-admin .adm-rank-val.good { color: var(--primary); } #page-admin .adm-rank-val.obs { color: var(--warn-t); } #page-admin .adm-rank-val.crit { color: var(--danger); } .adm-sup-end { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: 0 0 auto; } .adm-level { font-size: 11.5px; font-weight: 800; padding: 3px 10px; border-radius: 99px; white-space: nowrap; } .adm-level.seg { background: color-mix(in srgb, var(--primary) 15%, transparent); color: var(--primary); } .adm-level.obs { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warn-t); } .adm-level.crit { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); } #page-admin .adm-cause-chip { font-size: 11.5px; padding: 2px 8px; border-radius: 99px; margin: 0; background: color-mix(in srgb, var(--warning) 14%, transparent); color: var(--warn-t); text-transform: none; letter-spacing: 0; } /* ---------- Alertas compactas ---------- */ #page-admin .adm-alert-list { gap: 4px; } #page-admin .adm-alert-list.sm { max-height: 340px; } #page-admin .adm-alert { --st: var(--accent); display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; font-size: 13px; background: transparent; border: 1px solid transparent; border-radius: 12px; transition: background .15s ease, border-color .15s ease; } #page-admin .adm-alert:hover { background: var(--surface-2); } #page-admin .adm-alert.crit { --st: var(--danger); } #page-admin .adm-alert.warn { --st: var(--warning); } #page-admin .adm-alert.info { --st: var(--accent); } #page-admin .adm-alert.ok { --st: var(--success); } #page-admin .adm-alert.il-alert-critico { --st: var(--danger); } #page-admin .adm-alert.il-alert-preventivo { --st: var(--warning); } #page-admin .adm-alert.il-alert-informativo { --st: var(--accent); } .adm-alert-ico { width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; color: var(--st); background: color-mix(in srgb, var(--st) 15%, transparent); } .adm-alert-body { flex: 1; min-width: 0; } #page-admin .adm-alert-head { margin-bottom: 2px; } #page-admin .adm-alert-title { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } #page-admin .adm-alert-tag { font-size: 11px; padding: 2px 9px; border-radius: 99px; flex: 0 0 auto; } #page-admin .adm-alert-desc { font-size: 12.5px; color: var(--text-3); line-height: 1.45; } #page-admin .adm-alert-list.sm .adm-alert-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #page-admin .adm-alert-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 8px; } #page-admin .adm-alert-grid .adm-alert { background: var(--surface-2); border-color: var(--border); } /* El módulo IL pinta sus alertas con las mismas clases: conservan el tinte de severidad */ #page-admin .adm-alert[class*="il-alert-"] { background: color-mix(in srgb, var(--st) 6%, var(--surface-2)); border-color: color-mix(in srgb, var(--st) 38%, var(--border)); } /* ---------- Tabla y chips que comparten sistema ---------- */ #page-admin .adm-table th { font-size: 11.5px; line-height: 1.25; white-space: normal; padding: 10px 8px; background: var(--surface-2); border-bottom: 1px solid var(--border); } #page-admin .adm-table td { font-size: 13px; padding: 10px 8px; } #page-admin .adm-table .adm-person { min-width: 0; } #page-admin .adm-table .adm-name-cell { min-width: 0; } #page-admin .adm-table .adm-name-cell .nm { max-width: 190px; white-space: normal; line-height: 1.25; } #page-admin .adm-qtab { transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease; } #page-admin .adm-qtab:active { transform: scale(.97); } #page-admin .adm-qtab.active { background: var(--primary-light); } #page-admin .adm-badge { font-size: 11.5px; } #page-admin .adm-kaizen { transition: transform .18s var(--ds-ease), box-shadow .18s ease; } #page-admin .adm-kaizen:hover { transform: translateY(-2px); box-shadow: var(--ds-shadow-hover); } /* ---------- Esqueleto (carga y cambio de mes) ---------- */ .adm-sk, .adm-skel-on #adm-view-resumen :is(.adm-kpi-value, .adm-kpi-desc, .adm-ins-body, .adm-rank-main, .adm-sup-end, .adm-rank-pos, .adm-alert-body, .adm-alert-ico, .adm-pareto-sum) { display: block; border-radius: 8px; color: transparent !important; background: linear-gradient(100deg, var(--surface-2) 30%, color-mix(in srgb, var(--text) 8%, var(--surface-2)) 50%, var(--surface-2) 70%); background-size: 220% 100%; animation: adm-shimmer 1.3s linear infinite; } .adm-skel-on #adm-view-resumen :is(.adm-kpi-value, .adm-kpi-desc, .adm-ins-body, .adm-rank-main, .adm-sup-end, .adm-alert-body, .adm-pareto-sum) * { visibility: hidden; } .adm-skel-on #adm-view-resumen .adm-kpi-value { min-height: 34px; } .adm-skel-on #adm-view-resumen .adm-meta-bar, .adm-skel-on #adm-view-resumen .adm-meta-cap { opacity: 0; } .adm-skel-on #adm-view-resumen canvas { opacity: 0; } .adm-skel-on #adm-view-resumen .adm-chart-box { border-radius: 12px; background: linear-gradient(100deg, var(--surface-2) 30%, color-mix(in srgb, var(--text) 8%, var(--surface-2)) 50%, var(--surface-2) 70%); background-size: 220% 100%; animation: adm-shimmer 1.3s linear infinite; } @keyframes adm-shimmer { to { background-position: -220% 0; } } .adm-skel-card { gap: 10px; } .adm-skel-shell .adm-kpi.featured { padding: 22px 24px; } /* ---------- Entrada de contenido y cambio de mes ---------- */ @keyframes adm-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } #page-admin.adm-anim [data-enter] { animation: adm-rise .45s var(--ds-ease) both; animation-delay: calc(var(--i, 0) * 50ms); } #page-admin.adm-anim .adm-meta-bar > i { animation: adm-grow-x .9s var(--ds-ease) .25s both; } @keyframes adm-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } } #page-admin .adm-main > .adm-view, #page-admin .adm-main > .adm-filters { transition: opacity .18s ease; } #page-admin.adm-switching .adm-main > .adm-view { opacity: .35; } /* ---------- Responsive ---------- */ @media (max-width: 1600px) { #page-admin .adm-main { padding: 24px 26px 56px; } #page-admin .adm-kpi.featured .adm-kpi-value { font-size: 36px; } #page-admin .adm-charts { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } } @media (max-width: 1366px) { #page-admin .adm-layout { --side-w: 220px; } #page-admin .adm-title { font-size: 24px; } #page-admin .adm-kpi { padding: 16px 18px; } #page-admin .adm-kpi-value { font-size: 28px; } #page-admin .adm-kpi.featured .adm-kpi-value { font-size: 34px; } #page-admin .adm-charts { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } } @media (max-width: 1100px) { #page-admin .adm-side { width: 100%; flex: none; height: auto; position: static; flex-direction: row; align-items: center; padding: 10px 14px; gap: 12px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border); } .adm-side-toggle, #page-admin .adm-side-brand { display: none; } #page-admin .adm-nav-link::before { display: none; } #page-admin .adm-nav-link { width: auto; padding: 0 12px; } #page-admin .adm-main { padding: 18px 16px 48px; } #page-admin .adm-kpi, #page-admin .adm-kpi.c-blue, #page-admin .adm-kpi.c-gold { grid-column: span 6; } #page-admin .adm-kpi.featured, #page-admin .adm-kpi.c-red { grid-column: span 12; } #page-admin .adm-charts { grid-template-columns: 1fr; } #page-admin .adm-header { align-items: flex-start; } } @media (max-width: 640px) { #page-admin .adm-kpi, #page-admin .adm-kpi.c-blue, #page-admin .adm-kpi.c-gold { grid-column: span 12; } #page-admin .adm-title { font-size: 22px; } #page-admin .adm-btn-label { display: none; } #page-admin .adm-meta-txt { display: none; } #page-admin .adm-field-search { flex-basis: 100%; } } /* ---------- Paneles inferiores del Resumen: compactos y sin desborde ---------- */ #page-admin .adm-panels4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; } @media (min-width: 1500px) { #page-admin .adm-panels4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 820px) { #page-admin .adm-panels4 { grid-template-columns: minmax(0, 1fr); } } #page-admin .adm-panels4 > .adm-card { padding: 14px 14px 10px; min-width: 0; overflow: hidden; } #page-admin .adm-panels4 .adm-section-head { margin-bottom: 8px; } #page-admin .adm-panels4 .adm-section-head h2 { font-size: 15px; } #page-admin .adm-panels4 .adm-chart-box.sm { min-height: 190px; height: 190px; } /* Filas de una sola línea */ #page-admin .adm-panels4 .adm-rank-item { padding: 6px 8px; gap: 10px; } #page-admin .adm-panels4 .adm-rank-item.rk .adm-rank-main { flex-direction: row; align-items: center; gap: 8px; } #page-admin .adm-panels4 .adm-rank-item.rk .adm-rank-name { flex: 1 1 auto; min-width: 0; } #page-admin .adm-panels4 .adm-rank-item.rk .adm-rank-sub { flex: 0 0 auto; } #page-admin .adm-panels4 .adm-rank-pos.medal { font-size: 18px; width: 24px; } #page-admin .adm-panels4 .adm-pill { padding: 2px 8px; font-size: 11px; } #page-admin .adm-panels4 .adm-rank-item.sup { padding: 7px 8px; } #page-admin .adm-panels4 .adm-alert-list.sm { max-height: 300px; overflow-y: auto; } #page-admin .adm-panels4 .adm-alert { padding: 7px 8px; gap: 10px; } #page-admin .adm-panels4 .adm-alert-ico { width: 26px; height: 26px; font-size: 14px; border-radius: 8px; } #page-admin .adm-panels4 .adm-alert-list.sm .adm-alert-desc { font-size: 12px; -webkit-line-clamp: 1; } /* ---------- Detalle del maquinista, en línea bajo su fila ---------- */ #page-admin .adm-table tbody tr.adm-row-click.open { background: var(--primary-light); } #page-admin .adm-table tbody tr.adm-row-click.open td:first-child .nm { color: var(--primary); } #page-admin .adm-table tbody tr.adm-detail-row, #page-admin .adm-table tbody tr.adm-detail-row:hover { background: transparent; cursor: default; } #page-admin .adm-detail-row > td { padding: 0; white-space: normal; border-bottom: 1px solid var(--border); } /* El ancho sale del contenedor visible (container query), no de un valor medido una vez: así sigue bien al contraer el sidebar, redimensionar o paginar. */ #page-admin .adm-table-wrap { container-type: inline-size; } .adm-inline-detail { position: sticky; left: 0; width: 100cqw; max-width: 100cqw; box-sizing: border-box; overflow: hidden; padding: 22px 24px 26px; background: var(--surface-2); border-top: 1px solid var(--border); animation: adm-detail-in .28s var(--ds-ease) both; white-space: normal; text-align: left; } @keyframes adm-detail-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .adm-det-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .adm-det-name { font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--text); } .adm-det-rut { font-size: 12.5px; color: var(--text-3); font-family: 'JetBrains Mono', monospace; margin-top: 2px; } .adm-inline-detail .adm-modal-hero { background: var(--surface); } .adm-det-cols { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 22px; align-items: start; } .adm-det-main, .adm-det-side { min-width: 0; } .adm-det-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 22px; align-items: stretch; } .adm-det-bottom > * { min-width: 0; } .adm-det-bottom .adm-chart-card { padding: 16px; box-shadow: none; background: var(--surface); } .adm-det-bottom .adm-chart-box { min-height: 200px; height: 200px; position: relative; overflow: hidden; } .adm-det-bottom .adm-chart-box canvas { max-width: 100%; } .adm-inline-detail .adm-chart-card { min-width: 0; } .adm-det-cmp { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; } .adm-inline-detail .des-tile, .adm-inline-detail .des-trend, .adm-inline-detail .adm-hist-wrap { background: var(--surface); } @media (max-width: 1280px) { .adm-det-cols { grid-template-columns: minmax(0, 1fr); } .adm-det-bottom { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .adm-det-cmp { grid-column: 1 / -1; } } @media (max-width: 700px) { .adm-inline-detail { padding: 16px 14px 20px; } .adm-det-bottom { grid-template-columns: minmax(0, 1fr); } } /* ---------- Tabla de maquinistas: ancho fijo = ancho del contenedor ---------- Con table-layout:fixed la tabla nunca crece por su contenido (nombres largos, el detalle desplegado, gráficos): el detalle ocupa exactamente el ancho de la tabla y no hay desborde. Bajo 880 px la tabla conserva ese mínimo y el contenedor hace scroll interno (tablets pequeñas). */ #page-admin #adm-table { table-layout: fixed; width: 100%; } #page-admin #adm-table thead th:nth-child(1) { width: 21%; } #page-admin #adm-table thead th:nth-child(2) { width: 8%; } #page-admin #adm-table thead th:nth-child(3) { width: 7%; } #page-admin #adm-table thead th:nth-child(4) { width: 6%; } #page-admin #adm-table thead th:nth-child(5) { width: 7%; } #page-admin #adm-table thead th:nth-child(6) { width: 7%; } #page-admin #adm-table thead th:nth-child(7) { width: 6%; } #page-admin #adm-table thead th:nth-child(8) { width: 6%; } #page-admin #adm-table thead th:nth-child(9) { width: 8%; } #page-admin #adm-table thead th:nth-child(10) { width: 8%; } #page-admin #adm-table thead th:nth-child(11) { width: 10%; } #page-admin #adm-table thead th:nth-child(12) { width: 6%; } #page-admin #adm-table th { font-size: 11px; letter-spacing: .02em; padding: 10px 6px; } #page-admin #adm-table td { padding: 10px 6px; } #page-admin #adm-table .adm-badge { font-size: 10.5px; padding: 3px 7px; } #page-admin #adm-table .risk { font-size: 11px; } #page-admin #adm-table td { overflow: hidden; text-overflow: ellipsis; } #page-admin #adm-table .adm-detail-row > td { overflow: visible; padding: 0; } #page-admin #adm-table .adm-name-cell .nm { max-width: none; overflow-wrap: anywhere; } /* Tablet / pantalla angosta: se ocultan Contrato y Riesgo (siguen en el detalle) para que la tabla quepa sin scroll lateral */ @media (max-width: 1000px) { #page-admin #adm-table thead th:nth-child(4), #page-admin #adm-table tbody tr.adm-row-click > td:nth-child(4), #page-admin #adm-table thead th:nth-child(12), #page-admin #adm-table tbody tr.adm-row-click > td:nth-child(12) { display: none; } #page-admin #adm-table thead th:nth-child(1) { width: 27%; } #page-admin #adm-table thead th:nth-child(2) { width: 11%; } #page-admin #adm-table thead th:nth-child(3) { width: 9%; } #page-admin #adm-table thead th:nth-child(n+5):nth-child(-n+10) { width: 7.5%; } #page-admin #adm-table thead th:nth-child(11) { width: 8%; } } .adm-inline-detail { width: 100%; max-width: 100%; } @supports (width: 1cqw) { .adm-inline-detail { width: 100cqw; max-width: 100cqw; } } .adm-inline-detail * { min-width: 0; } .adm-inline-detail .adm-det-main, .adm-inline-detail .adm-det-side, .adm-inline-detail .adm-det-bottom > * { min-width: 0; max-width: 100%; } .adm-inline-detail img, .adm-inline-detail canvas, .adm-inline-detail svg { max-width: 100%; } /* ---------- Movimiento reducido ---------- */ @media (prefers-reduced-motion: reduce) { #page-admin *, #page-admin *::before, #page-admin *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } #page-admin .adm-card:hover, #page-admin .adm-chart-card:hover, #page-admin .adm-kpi:hover, #page-admin .adm-insight:hover, #page-admin .adm-kaizen:hover { transform: none; } } /* TDV y PS como cifras separadas en el mosaico del desglose */ .des-np { display: flex; gap: 6px; flex-wrap: wrap; } .des-n { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: var(--surface-2); color: var(--text-2); } .des-n b { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; color: var(--text); margin-left: 3px; } .des-n.tdv { background: color-mix(in srgb, var(--warning) 15%, transparent); color: var(--warn-t); } .des-n.ps { background: color-mix(in srgb, var(--primary) 15%, transparent); color: var(--primary); }