DataScope26/WEB
0
1/* Dashboard.css */2 3/* ─── Root ─────────────────────────────────────── */4.dashboard-root {5 background: var(--bg);6 min-height: 100vh;7 /* Cambiamos el padding para quitar los 2rem de arriba */8 padding: 0 1.75rem 2rem;9 box-sizing: border-box;10 font-family: var(--texto);11 color: var(--color-text);12}13 14.loading-dashboard-container{15 color: var(--green);16 font-family: var(--texto);17 display: flex;18 flex-direction: column;19 align-items: center;20 justify-content: center;21 width: 100%;22 height: calc(100dvh - var(--header-h));23 min-height: calc(100dvh - var(--header-h));24 margin-top: 0;25 padding: 1rem;26 box-sizing: border-box;27 overflow: hidden;28}29 30.loading-dashboard{31 margin-bottom: 0.625rem;32}33 34/* ─── Company name ──────────────────────────────── */35.header-name-company {36 position: relative;37 width: 100vw;38 margin: 0 0 2rem;39 margin-left: calc(50% - 50vw);40 min-height: 10rem;41 display: flex;42 align-items: center;43 justify-content: center;44 padding: 3rem 1.5rem;45 box-sizing: border-box;46 overflow: hidden;47 background:48 linear-gradient(180deg, rgba(46, 232, 138, 0.16) 0%, rgba(0,0,0,0.04) 70%, rgba(0,0,0,0.04) 100%);49 box-shadow: 0 1.125rem 3.125rem rgba(0, 0, 0, 0.12);50}51 52.header-name-company::before {53 content: "";54 position: absolute;55 background:56 radial-gradient(circle at 20% 10%, rgba(46, 232, 138, 0.10), transparent 28%),57 radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.04), transparent 24%);58 filter: blur(1.5rem);59 z-index: 0;60}61 62.dashboard-company-name {63 64 font-size: clamp(2rem, 4vw, 3.2rem);65 66 letter-spacing: -0.0313rem;67 68}69 70/* ─── Section wrapper ───────────────────────────── */71.dashboard-section {72 margin-bottom: 1.75rem;73 background: var(--surface);74 padding: 1.375rem 2.5rem;75 border-radius: 0.75rem;76}77 78.dashboard-section--spaced {79 padding-bottom: 1.125rem;80}81 82.dashboard-section-header {83 display: flex;84 align-items: center;85 gap: 1rem;86 justify-content: space-between;87}88 89.dashboard-section-title {90 font-size: 2rem;91 font-weight: 700;92 letter-spacing: 0.06em;93 color: var(--green);94 margin-left: 0.3125rem;95 text-transform: uppercase;96 padding: 1.5% 0%;97}98 99.dashboard-header-filters {100 display: flex;101 gap: 0.75rem;102 align-items: center;103}104 105/* ─── Top stats row ─────────────────────────────── */106.dashboard-stats-row {107 display: grid;108 grid-template-columns: 1fr;109 gap: 0.875rem;110 padding-bottom: 2%;111}112 113/* ─── NumberStat card ───────────────────────────── */114.number-stat {115 border-radius: 0.75rem;116 padding: 1.875rem 2.5rem;117 display: flex;118 flex-direction: column;119 gap: 0.25rem;120 background: var(--surface-2);121 box-sizing: border-box;122}123 124.number-stat__title {125 font-size: 1rem;126 font-weight: 600;127 color: var(--muted);128 margin: 0;129}130 131.number-stat__value {132 font-size: 2.6rem;133 font-weight: 800;134 color: var(--color-text);135 line-height: 1.1;136}137 138.number-stat__value--accent {139 color: var(--green);140}141 142.number-stat__subtitle {143 font-size: 0.72rem;144 color: #B4B4B4;145 margin-top: 0.25rem;146}147 148/* ─── Area grid ─────────────────────────────────── */149.dashboard-area-grid {150 display: grid;151 grid-template-columns: 1fr 1fr;152 gap: 0.875rem;153 align-items: start;154 padding-bottom: 2%;155}156 157/* Make certain cards span the full width of the area grid */158.dashboard-card--full {159 grid-column: 1 / -1;160}161 162/* ─── Generic card ──────────────────────────────── */163.dashboard-card {164 background: var(--surface-2);165 border-radius: 0.75rem;166 padding: 1.875rem 2.5rem;167 box-sizing: border-box;168}169 170.dashboard-card-pie {171 overflow: visible;172 box-sizing: border-box;173}174 175/* ─── Override ListWithPercentages internals ────── */176.dashboard-card .list-with-percentages {177 list-style: none;178 margin: 0;179 padding: 0;180 display: flex;181 flex-direction: column;182 gap: 1rem;183}184 185.dashboard-card .list-with-percentages li {186 display: flex;187 gap: 0.625rem;188}189 190/* neutraliza el <h2> dentro del <li> */191.dashboard-card .list-with-percentages li h2 {192 font-size: 0.82rem;193 font-weight: 600;194 color: #B4B4B4;195 margin: 0;196 display: flex;197 align-items: center;198 gap: 0.625rem;199 width: 100%;200}201 202.dashboard-card .list-with-percentages li h2::before {203 content: '';204 display: inline-block;205 width: 0.5625rem;206 height: 0.5625rem;207 border-radius: 50%;208 background: var(--green);209 flex-shrink: 0;210}211 212.dashboard-card .list-with-percentages li h2 span {213 margin-left: auto;214 color: var(--color-text);215 font-weight: 500;216}217 218/* card title para ListWithPercentages */219.dashboard-card .list-card-title {220 font-size: 0.8rem;221 font-weight: 600;222 color: var(--color-text);223 margin: 0 0 1.125rem;224}225 226/* ─── Override BarGraph (ApexCharts) internals ──── */227.dashboard-card .apexcharts-canvas {228 background: transparent !important;229}230 231/* Fuerza el wrapper del BarGraph a ocupar todo el ancho */232.dashboard-card>div[style*="width"] {233 width: 100% !important;234}235 236.dashboard-card .bar-graph-header {237 margin-bottom: 3%;238 display: flex;239 justify-content: space-between;240 gap: 0.625rem;241}242 243.dashboard-card .bar-graph-title {244 font-size: 1rem;245 font-weight: 600;246 color: var(--color-text);247 margin: 0;248}249 250.dashboard-card .bar-graph-tabs {251 display: flex;252 gap: 0.625rem;253}254 255.dashboard-card .bar-graph-tab {256 font-size: 0.72rem;257 color: var(--muted);258 cursor: pointer;259 background: none;260 border: none;261 padding: 0;262}263 264.dashboard-card .bar-graph-tab--active {265 color: var(--green);266}267 268/* ApexCharts: fondo y texto oscuro */269.dashboard-card .apexcharts-text,270.dashboard-card .apexcharts-yaxis-label,271.dashboard-card .apexcharts-xaxis-label {272 fill: #B4B4B4 !important;273 font-family: 'Roboto', sans-serif !important;274 font-size: 0.6875rem !important;275}276 277.dashboard-card .apexcharts-gridline {278 stroke: var(--color-border) !important;279}280 281.dashboard-card .apexcharts-bar-area {282 fill: var(--green) !important;283}284 285/* ─── Quality score card ────────────────────────── */286.quality-score {287 display: flex;288 flex-direction: column;289 gap: 0.625rem;290}291 292.quality-score__header {293 display: flex;294 align-items: center;295 justify-content: space-between;296 gap: 0.75rem;297 padding-bottom: 0.75rem;298}299 300.quality-label {301 font-size: 0.68rem;302 letter-spacing: 0.1em;303 color: #B4B4B4;304 text-transform: uppercase;305}306 307.quality-number {308 font-size: 2.8rem;309 font-weight: 800;310 color: var(--color-text);311 line-height: 1;312}313 314.quality-max {315 font-size: 1rem;316 color: #B4B4B4;317 font-weight: 400;318}319 320.quality-bar-track {321 height: 0.375rem;322 background: var(--surface-3);323 border-radius: 0.1875rem;324 overflow: hidden;325}326 327.quality-bar-fill {328 height: 100%;329 background: var(--green);330 border-radius: 0.1875rem;331}332 333.quality-level {334 font-size: 0.65rem;335 letter-spacing: 0.1em;336 color: #B4B4B4;337 text-transform: uppercase;338 text-align: right;339}340 341/* ─── Override PieChartGraph (MUI) internals ─────── */342.dashboard-card-pie .MuiStack-root {343 width: 100%;344}345 346/* PieChartGraph.css */347 348.pie-chart-row {349 display: flex;350 flex-direction: row;351 align-items: center;352 justify-content: center;353 gap: 1rem;354 width: 100%;355}356 357.pie-legend {358 display: flex;359 flex-direction: column;360 gap: 0.75rem;361 flex-shrink: 0;362}363 364.pie-legend-item {365 display: flex;366 align-items: center;367 gap: 0.5rem;368 font-size: 0.82rem;369 color: var(--muted);370 cursor: pointer;371 transition: color 0.15s;372 white-space: nowrap;373 width: max-content;374}375 376.pie-legend-item.highlighted {377 color: var(--color-text);378}379 380.pie-legend-swatch {381 width: 0.625rem;382 height: 0.625rem;383 border-radius: 50%;384 flex-shrink: 0;385}386 387.pie-legend-label {388 flex: 1;389}390 391.pie-legend-value {392 font-weight: 700;393 color: var(--color-text);394}395 396.custom-dropdown {397 position: relative;398 display: inline-block;399 width: auto;400 font-family: var(--texto);401}402 403.dropdown-button {404 padding: 0.5rem 1rem;405 border: 0.125rem solid var(--color-border);406 border-radius: 0.25rem;407 background-color: var(--surface-2);408 color: var(--color-text);409 cursor: pointer;410 font-size: 0.875rem;411 transition: all 0.3s ease;412 display: flex;413 align-items: center;414 gap: 0.5rem;415 min-width: 7.5rem;416}417 418.dropdown-button:hover {419 background-color: var(--surface-3);420 border-color: var(--color-border);421 transform: translateY(0);422}423 424.dropdown-button:focus {425 outline: none;426 border-color: #666;427}428 429.dropdown-button:active {430 background-color: #1a1a1a;431}432 433.dropdown-label {434 flex: 1;435 text-align: left;436 font-size: 1rem;437}438 439.dropdown-arrow {440 font-size: 0.625rem;441 transition: transform 0.3s ease;442 display: inline-block;443}444 445.dropdown-arrow.open {446 transform: rotate(180deg);447}448 449.dropdown-menu {450 position: absolute;451 left: 0;452 right: 0;453 background-color: var(--surface-2);454 border-radius: 0.25rem;455 box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.12);456 z-index: 1000;457 overflow: hidden;458 min-width: 7.5rem;459 animation: dropdownSlide 0.2s ease;460}461 462@keyframes dropdownSlide {463 from {464 opacity: 0;465 transform: translateY(-0.5rem);466 }467 468 to {469 opacity: 1;470 transform: translateY(0);471 }472}473 474.dropdown-option {475 display: block;476 width: 100%;477 padding: 0.75rem 1rem;478 background-color: transparent;479 border: none;480 text-align: left;481 cursor: pointer;482 font-size: 0.875rem;483 color: var(--color-text);484 transition: background-color 0.2s ease;485 font-weight: 500;486 border-radius: 0;487}488 489.dropdown-option:hover {490 background-color: var(--green);491 color: var(--black);492 transform: translateY(0);493}494 495.dropdown-option.selected {496 background-color: var(--green);497 color: var(--black);498 font-weight: 600;499}500 501.dropdown-option:active {502 background-color: var(--green);503}504 505/* Quitar estilos por defecto de botón */506.dropdown-option::-moz-focus-inner {507 border: 0;508}509 510.dropdown-button::-moz-focus-inner {511 border: 0;512}513 514/* ─── Responsive ────────────────────────────────── */515@media (max-width: 42.5rem) {516 .dashboard-root {517 padding: 0 0.875rem 1.5rem;518 }519 520 .header-name-company {521 min-height: 7.5rem;522 padding: 2rem 1rem;523 }524 525 .dashboard-section {526 padding: 1.125rem 1.125rem;527 }528 529 .dashboard-section-title {530 font-size: 1.3rem;531 margin-left: 0;532 }533 534 .dashboard-section-header {535 flex-wrap: wrap;536 gap: 0.625rem;537 }538 539 .dashboard-header-filters {540 flex-wrap: wrap;541 width: 100%;542 }543 544 .dashboard-stats-row,545 .dashboard-area-grid {546 grid-template-columns: 1fr;547 }548 549 .number-stat,550 .dashboard-card {551 padding: 1.25rem 1.25rem;552 }553 554 .number-stat__value {555 font-size: 2rem;556 }557 558 /* El gráfico de torta + leyenda pasan de fila a columna */559 .pie-chart-row {560 flex-direction: column;561 }562 563 .pie-legend {564 width: 100%;565 }566 567 .bar-graph-header {568 flex-wrap: wrap;569 }570 571 .quality-score__header {572 flex-wrap: wrap;573 }574 575 .custom-dropdown,576 .dropdown-button {577 width: 100%;578 min-width: 0;579 }580}581 582@media (max-width: 25rem) {583 .dashboard-company-name {584 font-size: clamp(1.5rem, 6vw, 2rem);585 }586 587 .number-stat,588 .dashboard-card {589 padding: 1rem;590 }591 592 .quality-number {593 font-size: 2.2rem;594 }595}596 597 598 599.adoption-toggle-btn {600 margin-top: 0.75rem;601 font-size: 0.85rem;602 padding: 0.375rem 0.875rem;603}604 605/* ─── Sin empleados ─────────────────────────────── */606.dashboard-no-employees {607 display: flex;608 flex-direction: column;609 align-items: center;610 justify-content: center;611 gap: 1rem;612 padding: 3rem 1.5rem;613}614 615.dashboard-no-employees__text {616 color: #B4B4B4;617 font-size: 1rem;618 margin: 0;619}620 621.dashboard-no-employees__btn {622 padding: 0.625rem 1.25rem;623}624 625 626/* ─── Sin datos en un componente ───────────────── */627.dashboard-no-data {628 display: flex;629 flex-direction: column;630 gap: 1rem;631}632 633.dashboard-no-data__text {634 color: #B4B4B4;635 font-size: 0.9rem;636 margin: 0;637 text-align: center;638 padding: 1.5rem 0;639}640 641.create-companies-btn{642 padding: 0.625rem 1.125rem;643 644}645 646/* ─── LIGHT THEME OVERRIDES ─────────────────────── */647html[data-theme='light'] .header-name-company {648 background:649 linear-gradient(180deg, rgba(46, 232, 138, 0.08) 0%, rgba(255, 255, 255, 0.04) 70%, rgba(255, 255, 255, 0.04) 100%);650 box-shadow: 0 1.125rem 3.125rem rgba(0, 0, 0, 0.06);651}652 653html[data-theme='light'] .header-name-company::before {654 background:655 radial-gradient(circle at 20% 10%, rgba(46, 232, 138, 0.06), transparent 28%),656 radial-gradient(circle at 80% 80%, rgba(15, 23, 42, 0.02), transparent 24%);657}658 659html[data-theme='light'] .dashboard-card,660html[data-theme='light'] .number-stat {661 background: #ffffff;662 border: 0.0625rem solid rgba(15, 23, 42, 0.08);663}664 665html[data-theme='light'] .dashboard-section {666 background: #ffffff;667 box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.08);668}669 670html[data-theme='light'] .number-stat__subtitle {671 color: #9ca3af;672}673 674html[data-theme='light'] .dashboard-card .list-with-percentages li h2 {675 color: #6b7280;676}