:root { color-scheme: light; /* Marca 5S — no cambian con el tema */ --audit-primary: #f36f22; --audit-primary-dark: #d85f1a; --audit-charcoal: #5a5c69; --audit-success: #006400; --audit-danger: #b42318; --audit-warning: #b54708; /* Superficies y texto — modo claro (predeterminado) */ --audit-background: #f4f6f9; --audit-surface: #ffffff; --audit-surface-muted: #fafafb; --audit-surface-inset: #faf8f6; --audit-border: #e6e8ec; --audit-muted: #858796; --audit-text: #5a5c69; --audit-text-strong: #30313a; --audit-input-bg: #ffffff; --audit-navbar-bg: #ffffff; --audit-navbar-border: #dee2e6; --audit-hero-start: #5a5c69; --audit-hero-end: #3f414c; --audit-shadow: 0 8px 24px rgba(42, 44, 54, .06); --audit-focus-ring: rgba(243, 111, 34, .25); } /* Modo oscuro: misma familia charcoal del tablero. data-theme se pone en . */ html[data-theme="dark"] { color-scheme: dark; --audit-success: #6ecb7a; --audit-danger: #ff8a7a; --audit-warning: #e8b15a; --audit-background: #3f414c; --audit-surface: #4a4c56; --audit-surface-muted: #43454f; --audit-surface-inset: #3a3c46; --audit-border: #6b6d78; --audit-muted: #b8bbc4; --audit-text: #eceef2; --audit-text-strong: #f4f5f7; --audit-input-bg: #3f414c; --audit-navbar-bg: #3f414c; --audit-navbar-border: #5a5c69; --audit-hero-start: #2f313a; --audit-hero-end: #3f414c; --audit-shadow: 0 8px 18px rgba(42, 44, 54, .22); --audit-focus-ring: rgba(243, 111, 34, .35); } html { font-size: 14px; } body { background: var(--audit-background); color: var(--audit-text); } .brand-link, .nav-sidebar .nav-link.active, .btn-primary { background-color: var(--audit-primary) !important; border-color: var(--audit-primary) !important; color: #fff !important; } .btn-primary:hover, .btn-primary:focus { background-color: var(--audit-primary-dark) !important; border-color: var(--audit-primary-dark) !important; } .brand-mark { display: inline-grid; place-items: center; width: 34px; height: 34px; margin: 0 10px; border-radius: 9px; background: rgba(255,255,255,.2); font-weight: 800; } .content-wrapper { background: var(--audit-background); } .content-header h1 { color: var(--audit-text); font-weight: 700; } .theme-toggle { color: inherit; } .theme-toggle:hover, .theme-toggle:focus { color: var(--audit-primary) !important; } .theme-toggle__label { margin-left: .35rem; } .main-header .theme-toggle__label { display: none; } .account-toggle { font-weight: 600; } .account-toggle__name { display: inline-block; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } .account-toggle::after { vertical-align: .15em; } .account-menu { min-width: 220px; padding: .4rem 0; } .account-menu__role { display: block; color: var(--audit-muted); font-size: .78rem; font-weight: 700; } .account-menu .dropdown-item { display: flex; align-items: center; width: 100%; padding: .45rem 1rem; border: 0; background: transparent; color: var(--audit-text); text-align: left; } .account-menu .dropdown-item:hover, .account-menu .dropdown-item:focus { background: var(--audit-surface-muted); color: var(--audit-text-strong); } html[data-theme="dark"] .account-menu { background: var(--audit-surface); border-color: var(--audit-border); } html[data-theme="dark"] .account-menu .dropdown-divider { border-top-color: var(--audit-border); } .login-theme { position: absolute; top: 12px; right: 12px; z-index: 2; } .login-theme .theme-toggle { color: #f4f5f7; } .login-theme .theme-toggle:hover, .login-theme .theme-toggle:focus { color: var(--audit-primary) !important; } .login-theme .theme-toggle__label { display: inline !important; } html[data-theme="dark"] .main-header.navbar-white, html[data-theme="dark"] .main-header.navbar-light { background-color: var(--audit-navbar-bg); border-bottom-color: var(--audit-navbar-border); } html[data-theme="dark"] .main-header.navbar-light .nav-link, html[data-theme="dark"] .main-header.navbar-light .nav-link:hover, html[data-theme="dark"] .main-header.navbar-light .nav-link:focus, html[data-theme="dark"] .main-header .theme-toggle { color: var(--audit-text); } html[data-theme="dark"] .main-footer { background-color: var(--audit-navbar-bg); color: var(--audit-muted); border-top-color: var(--audit-border); } /* Chrome AdminLTE/Bootstrap en oscuro. :where() baja la especificidad para no pisar el tablero. */ html[data-theme="dark"] :where(.main-header.navbar-white) { background-color: var(--audit-navbar-bg); border-color: var(--audit-navbar-border) !important; } html[data-theme="dark"] :where(.main-header .nav-link, .main-header .navbar-nav .nav-link) { color: var(--audit-text); } html[data-theme="dark"] :where(.content-wrapper, .content-header, .main-footer) { background-color: var(--audit-background); color: var(--audit-text); border-color: var(--audit-border); } html[data-theme="dark"] :where(.card, .modal-content, .dropdown-menu) { background-color: var(--audit-surface); color: var(--audit-text); border-color: var(--audit-border); } html[data-theme="dark"] :where(.table) { color: var(--audit-text); background-color: var(--audit-surface); } html[data-theme="dark"] :where(.table td, .table th) { border-color: var(--audit-border); } html[data-theme="dark"] :where(.table thead th) { background-color: var(--audit-surface-muted); color: var(--audit-text); } html[data-theme="dark"] :where(.table-hover tbody tr:hover) { background-color: var(--audit-surface-muted); color: var(--audit-text-strong); } html[data-theme="dark"] :where(.form-control, .custom-select, .custom-file-label) { background-color: var(--audit-input-bg); border-color: var(--audit-border); color: var(--audit-text-strong); } html[data-theme="dark"] :where(.form-control:focus, .custom-select:focus) { background-color: var(--audit-input-bg); border-color: var(--audit-primary); color: var(--audit-text-strong); box-shadow: 0 0 0 .2rem var(--audit-focus-ring); } html[data-theme="dark"] :where(.text-muted, .form-text) { color: var(--audit-muted) !important; } html[data-theme="dark"] :where(.close) { color: var(--audit-text-strong); text-shadow: none; } html[data-theme="dark"] :where(.btn-outline-secondary) { color: var(--audit-text); border-color: var(--audit-border); } html[data-theme="dark"] :where(.btn-outline-secondary:hover) { color: #fff; background-color: var(--audit-charcoal); border-color: var(--audit-charcoal); } html[data-theme="dark"] :where(.custom-control-label) { color: var(--audit-text); } html[data-theme="dark"] :where(.modal-header, .modal-footer) { border-color: var(--audit-border); } .dashboard-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 32px; margin-bottom: 24px; border-radius: 14px; color: #fff; background: linear-gradient(125deg, var(--audit-hero-start), var(--audit-hero-end)); } .dashboard-hero h2 { margin: 4px 0 8px; font-size: 1.8rem; font-weight: 700; } .dashboard-hero p { max-width: 720px; margin: 0; color: rgba(255,255,255,.78); } .dashboard-hero__eyebrow, .module-placeholder__eyebrow { color: #ffd9c3; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .dashboard-metrics { margin-bottom: 8px; } .metric-card { min-height: 148px; margin-bottom: 24px; padding: 22px; border-top: 4px solid var(--audit-primary); border-radius: 12px; background: var(--audit-surface); box-shadow: var(--audit-shadow); } .metric-card--success { border-top-color: var(--audit-success); } .metric-card--warning { border-top-color: var(--audit-warning); } .metric-card--danger { border-top-color: var(--audit-danger); } .metric-card__label { display: block; color: var(--audit-text); font-weight: 700; } .metric-card strong { display: block; margin: 6px 0; color: var(--audit-text-strong); font-size: 2rem; } .metric-card > span:last-child { color: var(--audit-muted); font-size: .84rem; } .dash-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .dash-head__meta { margin: 0; color: var(--audit-muted); font-size: .9rem; font-weight: 650; } .dash-kpis { display: grid; gap: 12px; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 16px; } .dash-kpi { min-height: 118px; padding: 14px 14px 12px; border: 1px solid var(--audit-border); border-top: 3px solid var(--audit-primary); border-radius: 10px; background: var(--audit-surface); box-shadow: var(--audit-shadow); } .dash-kpi--ok { border-top-color: var(--audit-success); } .dash-kpi--warn { border-top-color: var(--audit-warning); } .dash-kpi--danger { border-top-color: var(--audit-danger); } .dash-kpi__icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-bottom: 8px; border-radius: 8px; background: rgba(243, 111, 34, .14); color: var(--audit-primary); font-size: .85rem; } .dash-kpi--ok .dash-kpi__icon { background: rgba(0, 100, 0, .12); color: var(--audit-success); } .dash-kpi--warn .dash-kpi__icon { background: rgba(181, 71, 8, .12); color: var(--audit-warning); } .dash-kpi--danger .dash-kpi__icon { background: rgba(180, 35, 24, .12); color: var(--audit-danger); } .dash-kpi > span { display: block; color: var(--audit-muted); font-size: .78rem; font-weight: 650; } .dash-kpi strong { display: block; margin: 4px 0 2px; color: var(--audit-text-strong); font-size: 1.55rem; font-variant-numeric: tabular-nums; line-height: 1.1; } .dash-kpi small { color: var(--audit-muted); font-size: .72rem; } .dash-charts, .dash-lower { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 16px; } .dash-panel { padding: 16px; border: 1px solid var(--audit-border); border-radius: 10px; background: var(--audit-surface); } .dash-panel__head { margin-bottom: 12px; } .dash-panel__head h2 { margin: 0; color: var(--audit-text); font-size: 1.02rem; font-weight: 750; } .dash-panel__head p { margin: 4px 0 0; color: var(--audit-muted); font-size: .78rem; } .dash-chart-frame { height: 240px; } .dash-table th { border-top: 0; color: var(--audit-muted); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; } .dash-table td { color: var(--audit-text); } .dash-empty { margin: 8px 0 0; color: var(--audit-muted); } .dash-alerts { display: grid; gap: 8px; } .dash-alert { display: block; padding: 10px 12px; border: 1px solid var(--audit-border); border-radius: 8px; background: var(--audit-surface-muted); color: inherit; } .dash-alert:hover { border-color: var(--audit-primary); color: inherit; text-decoration: none; } .dash-alert strong { display: block; color: var(--audit-primary); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; } .dash-alert span { display: -webkit-box; margin-top: 3px; color: var(--audit-text); font-weight: 650; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .dash-alert small { display: block; margin-top: 3px; color: var(--audit-muted); font-size: .75rem; } @media (max-width: 1199px) { .dash-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 767px) { .dash-head { align-items: flex-start; flex-direction: column; } .dash-kpis, .dash-charts, .dash-lower { grid-template-columns: 1fr; } } /* Dashboard de metas */ .dash-summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 16px; padding: 22px 24px; border-radius: 14px; color: #fff; box-shadow: 0 10px 24px rgba(28, 32, 40, .14); } .dash-date-filter { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 16px; padding: 14px 16px; border: 1px solid var(--audit-border); border-radius: 10px; background: var(--audit-surface); } .dash-date-filter label { display: block; margin: 0; color: var(--audit-text-strong); font-size: .9rem; font-weight: 750; } .dash-date-filter small { display: block; margin-top: 2px; color: var(--audit-muted); } .dash-date-filter__controls { display: flex; gap: 8px; } .dash-date-filter__controls .form-control, .dash-date-filter__controls .date-dmy { min-width: 165px; } .dash-history-warning { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; padding: 12px 14px; border: 1px solid #d6a33d; border-radius: 10px; color: var(--audit-text); background: rgba(214, 163, 61, .12); } .dash-history-warning i { margin-top: 3px; color: #b7790b; } .dash-history-warning strong, .dash-history-warning span { display: block; } .dash-history-warning span { margin-top: 2px; color: var(--audit-muted); font-size: .8rem; } .dash-action-summary { display: flex; gap: 20px; margin: -4px 0 16px; color: var(--audit-muted); font-size: .84rem; } .dash-action-summary span { display: flex; align-items: center; gap: 7px; } .dash-action-summary strong { color: var(--audit-text-strong); font-size: 1rem; } .dash-action-summary .is-risk, .dash-action-summary .is-risk strong { color: var(--audit-danger, #b42318); } .dash-summary--ok { background: #166b46; } .dash-summary--risk { background: #9f2d25; } .dash-summary h2 { margin: 0; font-size: 1.45rem; font-weight: 760; } .dash-summary p { margin: 5px 0 0; color: rgba(255,255,255,.82); } .dash-goals { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; } .goal-metric { min-width: 0; padding: 18px; border: 1px solid var(--audit-border); border-radius: 12px; background: var(--audit-surface); box-shadow: 0 6px 18px rgba(28, 32, 40, .07); } button.goal-metric { display: block; width: 100%; margin: 0; font: inherit; text-align: left; color: inherit; cursor: pointer; appearance: none; } button.goal-metric:hover { border-color: var(--audit-primary); } button.goal-metric:focus { outline: 3px solid var(--audit-focus-ring); outline-offset: 2px; } .goal-metric--ok .goal-metric__head i { color: var(--audit-success); } .goal-metric--risk .goal-metric__head i { color: var(--audit-danger); } .goal-metric__head { display: flex; justify-content: space-between; gap: 8px; color: var(--audit-muted); font-size: .8rem; font-weight: 700; } .goal-metric > span:not(.goal-metric__hint) { color: var(--audit-muted); font-size: .8rem; font-weight: 700; } .goal-metric strong { display: block; margin: 8px 0 4px; color: var(--audit-text-strong); font-size: 1.65rem; font-variant-numeric: tabular-nums; line-height: 1.1; } .goal-metric p, .goal-metric small { margin: 0; color: var(--audit-muted); font-size: .76rem; } .goal-metric small { display: block; margin-top: 5px; } .goal-metric__hint { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--audit-primary); font-size: .74rem; font-weight: 700; } .goal-metric__hint i { font-size: .68rem; } .goal-metric--rating { border-top: 4px solid var(--rating-color, var(--audit-muted)); } .goal-metric--rating strong { color: var(--rating-color, var(--audit-text-strong)); } .goal-metric--rating p { color: var(--rating-color, var(--audit-text)); font-weight: 750; } .dash-actions-modal .modal-content { border: 1px solid var(--audit-border); border-radius: 10px; background: var(--audit-surface); } .dash-actions-modal .modal-header { align-items: flex-start; border-color: var(--audit-border); } .dash-actions-modal .modal-footer { border-color: var(--audit-border); } .dash-actions-modal .modal-title { margin: 0; color: var(--audit-text-strong); font-size: 1.05rem; font-weight: 700; } .dash-actions-modal .modal-lede { margin: 4px 0 0; color: var(--audit-muted); font-size: .8rem; } .dash-actions-modal .close { color: var(--audit-text-strong); text-shadow: none; opacity: .7; } .dash-actions-modal td a { color: var(--audit-primary); font-weight: 650; } .dash-action-progress { display: flex; align-items: center; gap: 8px; min-width: 108px; } .dash-action-progress__bar { flex: 1; height: 6px; overflow: hidden; border-radius: 3px; background: var(--audit-surface-inset); } .dash-action-progress__bar > span { display: block; height: 100%; background: var(--audit-primary); } .dash-action-progress__value { min-width: 2.6rem; color: var(--audit-text-strong); font-variant-numeric: tabular-nums; font-weight: 700; } .dash-action-overdue { display: block; margin-top: 3px; color: var(--audit-danger); font-size: .72rem; font-weight: 700; } .goal-state { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: .75rem; font-weight: 750; white-space: nowrap; } .goal-state--ok { color: #145c3d; background: #d9f3e6; } .goal-state--risk { color: #8b241e; background: #fde3e0; } .dash-summary .goal-state { color: #fff; background: rgba(255,255,255,.16); } html[data-theme="dark"] .goal-state--ok { color: #c5f2d8; background: #244e3b; } html[data-theme="dark"] .goal-state--risk { color: #ffd0cc; background: #65302d; } .dash-chart-frame--large { height: 320px; } .goal-table__row { cursor: pointer; } .goal-table__row:focus { outline: 3px solid rgba(243,111,34,.35); outline-offset: -3px; } .goal-breadcrumb { display: flex; align-items: center; gap: 9px; margin: -4px 0 16px; color: var(--audit-muted); font-size: .82rem; } .goal-breadcrumb a { color: var(--audit-primary); font-weight: 700; } .goal-breadcrumb i { font-size: .55rem; } .audit-focus { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .audit-focus span { color: var(--audit-muted); font-size: .76rem; font-weight: 700; text-transform: uppercase; } .audit-focus h2 { margin: 3px 0; color: var(--audit-text-strong); font-size: 1.3rem; } .audit-focus p { margin: 0; color: var(--audit-muted); } .audit-score { text-align: right; } .audit-score strong, .audit-score small { display: block; } .audit-score strong { color: var(--audit-text-strong); font-size: 2rem; font-variant-numeric: tabular-nums; } .audit-score small { color: var(--audit-muted); text-transform: none; } .goals-layout { display: grid; grid-template-columns: minmax(320px, 420px) minmax(0, 1fr); gap: 16px; align-items: start; } .goals-form { max-width: none; } .goals-form h2 { color: var(--audit-text-strong); font-size: 1.2rem; } .goals-history { min-width: 0; } ::selection { color: #fff; background: var(--audit-primary); } @media (max-width: 991px) { .dash-goals { grid-template-columns: repeat(2, minmax(0, 1fr)); } .goals-layout { grid-template-columns: 1fr; } } @media (max-width: 575px) { .dash-summary, .audit-focus { align-items: flex-start; flex-direction: column; } .dash-date-filter { align-items: stretch; flex-direction: column; } .dash-date-filter__controls { flex-wrap: wrap; } .dash-date-filter__controls .form-control, .dash-date-filter__controls .date-dmy { flex: 1 1 100%; } .dash-action-summary { align-items: flex-start; flex-direction: column; gap: 6px; } .dash-goals { grid-template-columns: 1fr; } .audit-score { text-align: left; } .dash-chart-frame--large { height: 360px; } } .workflow-panel, .module-placeholder { padding: 28px; border: 1px solid var(--audit-border); border-radius: 14px; background: var(--audit-surface); } .workflow-panel h3 { margin-bottom: 22px; color: var(--audit-text); font-size: 1.2rem; font-weight: 700; } .workflow-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; } .workflow-steps > div { position: relative; min-height: 120px; padding: 18px; border-radius: 10px; background: var(--audit-surface-inset); } .workflow-steps span { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 12px; border-radius: 50%; background: var(--audit-primary); color: #fff; font-weight: 700; } .workflow-steps strong, .workflow-steps small { display: block; } .workflow-steps small { margin-top: 5px; color: var(--audit-muted); } .module-placeholder { max-width: 760px; } .module-placeholder h2 { margin-top: 6px; color: var(--audit-text); } .module-placeholder p { color: var(--audit-muted); } .btn:focus, .nav-link:focus { box-shadow: 0 0 0 .2rem var(--audit-focus-ring) !important; } @media (max-width: 991px) { .workflow-steps { grid-template-columns: 1fr 1fr; } } @media (max-width: 767px) { .dashboard-hero { align-items: flex-start; flex-direction: column; padding: 24px; } .workflow-steps { grid-template-columns: 1fr; } } .user-name { color: var(--audit-text); font-weight: 600; } .user-role { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 999px; color: #8a3b12; background: #fff1e8; font-size: .68rem; font-weight: 750; vertical-align: 1px; } html[data-theme="dark"] .user-role { color: #ffd0b5; background: rgba(243,111,34,.22); } .login-body { position: relative; min-height: 100vh; margin: 0; background: linear-gradient(135deg, #343640, var(--audit-charcoal)); } .login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; } .login-frame { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(390px, .95fr); width: min(100%, 1060px); min-height: 620px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: var(--audit-surface); box-shadow: 0 2px 8px rgba(15,16,21,.24); } .login-visual { min-width: 0; background: url('/images/login-fabrica.jpg') center center / cover no-repeat; } .login-card { align-self: center; width: 100%; padding: 42px 38px; background: var(--audit-surface); } .login-brand { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 22px; border-radius: 15px; color: #fff; background: var(--audit-primary); font-size: 1.35rem; font-weight: 800; } .login-heading { margin-bottom: 26px; } .login-heading h1 { margin: 5px 0 8px; color: var(--audit-text); font-size: 2rem; font-weight: 750; } .login-heading p, .login-help { color: var(--audit-muted); line-height: 1.55; } .login-eyebrow { color: var(--audit-primary-dark); font-size: .72rem; font-weight: 800; letter-spacing: .13em; } .login-card label { color: var(--audit-text); font-weight: 650; } .login-card .form-control { min-height: 48px; padding: 10px 13px; border-color: var(--audit-border); border-radius: 9px; background: var(--audit-input-bg); color: var(--audit-text-strong); } .login-card .form-control:focus { border-color: var(--audit-primary); box-shadow: 0 0 0 .2rem rgba(243,111,34,.18); } .login-submit { min-height: 48px; border-radius: 9px; font-weight: 700; } .login-help { margin: 22px 0 0; text-align: center; font-size: .82rem; } @media (max-width: 991px) { .login-frame { grid-template-columns: 1fr; width: min(100%, 560px); min-height: 0; } .login-visual { min-height: 190px; background-position: center 43%; } .login-card { padding: 32px; } } @media (max-width: 575px) { .login-shell { align-items: start; padding: 12px; } .login-frame { border-radius: 10px; } .login-visual { min-height: 150px; } .login-card { padding: 26px 22px; } .login-heading h1 { font-size: 1.7rem; } } .catalog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; } .catalog-toolbar p { margin: 0; color: var(--audit-muted); } .catalog-card { overflow: hidden; border: 1px solid var(--audit-border); border-radius: 12px; box-shadow: var(--audit-shadow); background: var(--audit-surface); } .catalog-card .table th { border-top: 0; background: var(--audit-surface-muted); color: var(--audit-text); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; } .catalog-card .table td, .catalog-card .table th { padding: 15px 18px; vertical-align: middle; } .font-weight-semibold { font-weight: 600; } .status-pill { display: inline-block; padding: 4px 9px; border-radius: 999px; font-size: .76rem; font-weight: 700; } .status-pill--active { color: #166534; background: #dcfce7; } .status-pill--inactive { color: #52525b; background: #e4e4e7; } .status-pill--neutral { color: #374151; background: #eef0f3; } html[data-theme="dark"] .status-pill--active { color: #b6f0c8; background: #1f4a2e; } html[data-theme="dark"] .status-pill--inactive { color: #d5d7de; background: #52545e; } html[data-theme="dark"] .status-pill--neutral { color: #e4e6eb; background: #5a5c69; } .form-panel { max-width: 650px; padding: 28px; border: 1px solid var(--audit-border); border-radius: 14px; background: var(--audit-surface); } .form-panel__intro { margin-bottom: 24px; color: var(--audit-muted); } .form-panel label { color: var(--audit-text); font-weight: 650; } .form-panel .form-control { min-height: 46px; border-radius: 8px; background: var(--audit-input-bg); color: var(--audit-text-strong); border-color: var(--audit-border); } .form-actions { display: flex; align-items: center; gap: 8px; padding-top: 8px; } .role-badges { display: flex; flex-wrap: wrap; gap: 5px; } .role-badge { display: inline-block; padding: 4px 8px; border-radius: 999px; color: #4b5563; background: #f0f1f3; font-size: .72rem; font-weight: 700; } html[data-theme="dark"] .role-badge { color: #d5d7de; background: #5a5c69; } .role-selector { display: grid; gap: 10px; margin: 22px 0; padding: 18px; border: 1px solid var(--audit-border); border-radius: 11px; background: var(--audit-surface-muted); } .role-selector legend { width: auto; margin: 0 0 4px; color: var(--audit-text); font-size: .9rem; font-weight: 750; } .role-option { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 11px; margin: 0; padding: 11px 12px; border: 1px solid transparent; border-radius: 9px; background: var(--audit-surface); cursor: pointer; } .role-option:hover { border-color: #ffd9c3; } .role-option:has(input:checked) { border-color: #ffd9c3; background: var(--audit-surface-inset); } .role-option input { width: 17px; height: 17px; margin-top: 3px; accent-color: var(--audit-primary); } .role-option strong, .role-option small { display: block; } .role-option small { margin-top: 3px; color: var(--audit-muted); font-weight: 400; line-height: 1.4; } .audit-scope-banner { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; padding: 16px 18px; border: 1px solid #ffd9c3; border-radius: 11px; color: #71340f; background: #fff7f2; } html[data-theme="dark"] .audit-scope-banner { border-color: rgba(243,111,34,.35); color: #ffd0b5; background: rgba(243,111,34,.12); } .audit-scope-banner > i { font-size: 1.3rem; } .audit-scope-banner strong, .audit-scope-banner span, .table-meta { display: block; } .audit-scope-banner span { margin-top: 2px; font-size: .82rem; opacity: .78; } .table-meta { margin-top: 3px; color: var(--audit-muted); font-size: .76rem; font-weight: 400; } .audit-detail-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 18px; } .audit-detail-hero h2 { margin: 4px 0 7px; color: var(--audit-text); font-size: 1.55rem; font-weight: 750; } .audit-detail-hero p { margin: 0; color: var(--audit-muted); } .audit-detail-hero__aside { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; } .audit-summary-text { font-size: .95rem !important; line-height: 1.35; } .audit-detail-section { overflow: hidden; margin-bottom: 18px; border: 1px solid var(--audit-border); border-radius: 12px; background: var(--audit-surface); } .audit-close-toolbar { align-items: center; background: #f4faf6; border: 1px solid #cfe6d6; border-radius: 12px; color: #355b42; display: flex; gap: 1rem; justify-content: space-between; margin: 1rem 0; padding: .9rem 1rem; } html[data-theme="dark"] .audit-close-toolbar { background: #2f4638; border-color: #3d6a4c; color: #c8e6d0; } .audit-close-toolbar form { flex: 0 0 auto; margin: 0; } .process-assignment-row { align-items: center; border-top: 1px solid var(--audit-border); display: grid; gap: 12px; grid-template-columns: minmax(180px, 1fr) auto auto; padding: 10px 0; } .process-assignment-row label { font-weight: 500; margin: 0; } .action-validation-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 18px 20px; } .action-cancel-panel { background: #fff8f8; border: 1px solid #f1cece; border-radius: 12px; margin-bottom: 18px; padding: 14px; } html[data-theme="dark"] .action-cancel-panel { background: #5a3a3c; border-color: #a85a54; } .action-cancel-panel form { align-items: center; display: grid; gap: 10px; grid-template-columns: 1fr auto; } .report-metrics { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 18px; } .report-metrics article { background: var(--audit-surface); border: 1px solid var(--audit-border); border-radius: 12px; display: flex; flex-direction: column; padding: 18px; } .report-metrics span, .report-metrics small { color: var(--audit-muted); } .report-metrics strong { color: var(--audit-text); font-size: 2rem; line-height: 1.15; } .audit-detail-section h3 { margin: 0; padding: 17px 20px; border-bottom: 1px solid var(--audit-border); color: var(--audit-text); background: var(--audit-surface-muted); font-size: 1rem; font-weight: 750; } .audit-detail-section th { border-top: 0; color: var(--audit-muted); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; } .audit-detail-section th, .audit-detail-section td { padding: 13px 20px; vertical-align: middle; } .audit-empty-text { margin: 0; padding: 24px 20px; color: var(--audit-muted); } @media (max-width: 575px) { .catalog-toolbar { align-items: flex-start; flex-direction: column; } } .template-toolbar { padding: 4px 0 8px; } .template-toolbar__label { margin: 0 0 5px !important; color: var(--audit-primary-dark) !important; font-size: .72rem; font-weight: 800; letter-spacing: .12em; } .template-list { display: grid; gap: 16px; } .template-version-card { display: grid; grid-template-columns: 112px 1fr; overflow: hidden; border: 1px solid var(--audit-border); border-radius: 14px; background: var(--audit-surface); box-shadow: var(--audit-shadow); } .template-version-card__version { display: flex; align-items: center; justify-content: center; flex-direction: column; color: #fff; background: var(--audit-charcoal); } .template-version-card__version span { font-size: .68rem; font-weight: 800; letter-spacing: .12em; opacity: .7; } .template-version-card__version strong { font-size: 2.2rem; line-height: 1.1; } .template-version-card__body { padding: 22px 24px; } .template-version-card__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; } .template-version-card__heading h2 { margin: 0 0 8px; color: var(--audit-text); font-size: 1.2rem; font-weight: 700; } .template-status { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; } .template-status i { font-size: .5rem; } .template-status--published { color: var(--audit-success); } .template-status--draft { color: var(--audit-warning); } .template-status--retired { color: var(--audit-muted); } .template-version-card__metrics, .template-summary { display: grid; grid-template-columns: repeat(4, minmax(100px, 1fr)); gap: 12px; margin: 20px 0 0; } .template-version-card__metrics div, .template-summary div { padding: 11px 13px; border-radius: 9px; background: var(--audit-surface-muted); } .template-version-card__metrics dt, .template-summary dt { margin: 0 0 3px; color: var(--audit-muted); font-size: .72rem; font-weight: 650; text-transform: uppercase; } .template-version-card__metrics dd, .template-summary dd { margin: 0; color: var(--audit-text); font-size: 1rem; font-weight: 750; } .template-empty { max-width: 680px; padding: 40px; border: 1px dashed var(--audit-border); border-radius: 14px; text-align: center; background: var(--audit-surface); } .template-empty i { margin-bottom: 14px; color: var(--audit-primary); font-size: 2rem; } .template-empty h2 { color: var(--audit-text); font-size: 1.25rem; } .template-empty p { margin: 0; color: var(--audit-muted); } .template-detail-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 18px; padding: 4px 0; } .template-detail-header h2 { margin: 4px 0 7px; color: var(--audit-text); font-size: 1.55rem; font-weight: 750; } .template-detail-header p { margin: 0; color: var(--audit-muted); } .template-back { display: inline-block; margin-bottom: 20px; color: var(--audit-muted); font-size: .86rem; font-weight: 650; } .template-back:hover { color: var(--audit-primary-dark); } .template-readonly { display: flex; align-items: center; gap: 12px; min-width: 235px; padding: 14px 16px; border: 1px solid #cfe5d4; border-radius: 11px; color: #14532d; background: #f0fdf4; } html[data-theme="dark"] .template-readonly { border-color: #3d6a4c; color: #c8e6d0; background: #2f4638; } .template-readonly > i { font-size: 1.1rem; } .template-readonly strong, .template-readonly span { display: block; } .template-readonly span { margin-top: 2px; font-size: .76rem; opacity: .76; } .template-summary { margin: 0 0 24px; } .template-summary div { padding: 16px 18px; border: 1px solid var(--audit-border); background: var(--audit-surface); } .template-summary dd { font-size: 1.35rem; } .template-sections { display: grid; gap: 18px; padding-bottom: 24px; } .template-section { overflow: hidden; border: 1px solid var(--audit-border); border-radius: 13px; background: var(--audit-surface); } .template-section__header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--audit-border); background: var(--audit-surface-muted); } .template-section__number { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: #fff; background: var(--audit-primary); font-weight: 800; } .template-section__header h3 { margin: 0 0 3px; color: var(--audit-text); font-size: 1.02rem; font-weight: 750; } .template-section__header span { color: var(--audit-muted); font-size: .78rem; } .template-section__header > strong { color: var(--audit-text); font-size: .92rem; } .template-criteria-table th { border-top: 0; color: var(--audit-muted); background: var(--audit-surface); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; } .template-criteria-table th, .template-criteria-table td { padding: 13px 20px; vertical-align: middle; } .template-criteria-table td { color: var(--audit-text); line-height: 1.45; } .criterion-code { display: inline-block; min-width: 42px; color: var(--audit-primary-dark); font-weight: 800; } .criterion-score { color: var(--audit-text) !important; font-weight: 750; } .template-criterion--inactive { opacity: .58; } @media (max-width: 767px) { .template-version-card { grid-template-columns: 76px 1fr; } .template-version-card__body { padding: 18px; } .template-version-card__heading, .template-detail-header { align-items: flex-start; flex-direction: column; } .template-version-card__metrics, .template-summary { grid-template-columns: 1fr 1fr; } .template-readonly { width: 100%; } .audit-detail-hero { align-items: flex-start; flex-direction: column; } .audit-detail-hero__aside { width: 100%; } } @media (max-width: 479px) { .template-version-card { display: block; } .template-version-card__version { padding: 12px; flex-direction: row; gap: 8px; } .template-version-card__version strong { font-size: 1.25rem; } .template-version-card__metrics { grid-template-columns: 1fr 1fr; } .template-criteria-table th, .template-criteria-table td { padding: 12px 14px; } } .audit-findings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .audit-note-list { margin: 0; padding-left: 1.1rem; color: var(--audit-text); } .audit-note-list li + li { margin-top: .65rem; } .audit-severity { display: inline-block; margin-right: .55rem; padding: .12rem .45rem; border-radius: 999px; background: #fff1e8; color: #9a4717; font-size: .72rem; font-weight: 700; text-transform: uppercase; } html[data-theme="dark"] .audit-severity { background: rgba(243,111,34,.22); color: #ffd0b5; } .audit-result { display: inline-block; padding: .2rem .55rem; border-radius: 999px; background: #edf0f3; color: #555b66; font-size: .75rem; font-weight: 700; } .audit-result--cumple { background: #e7f5ea; color: #236b35; } .audit-result--parcial { background: #fff4dd; color: #825b0b; } .audit-result--nocumple { background: #fde9e8; color: #9a302a; } html[data-theme="dark"] .audit-result { background: #5a5c69; color: #e4e6eb; } html[data-theme="dark"] .audit-result--cumple { background: #1f4a2e; color: #b6f0c8; } html[data-theme="dark"] .audit-result--parcial { background: #6f5410; color: #fff3cd; } html[data-theme="dark"] .audit-result--nocumple { background: #6a3a34; color: #ffd0cc; } .audit-evidence-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; padding: 16px 20px 20px; } .audit-evidence-card { overflow: hidden; border: 1px solid var(--audit-border); border-radius: .8rem; background: var(--audit-surface); color: inherit; } .audit-evidence-card > a { display: block; color: inherit; text-decoration: none; } .audit-evidence-card:hover { transform: translateY(-2px); box-shadow: var(--audit-shadow); } .audit-evidence-card { transition: transform .15s ease, box-shadow .15s ease; } .audit-evidence-card--fortaleza { border-left: 3px solid #2E7D32; } .audit-evidence-card--hallazgo { border-left: 3px solid #D94801; } .audit-evidence-card--critico { border-left: 3px solid #B91C1C; } .audit-evidence-card img { display: block; width: 100%; height: 150px; object-fit: cover; image-orientation: from-image; background: var(--audit-surface-muted); } .audit-evidence-caption { display: block; padding: .75rem; } .audit-evidence-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: .2rem; } .audit-evidence-card strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .audit-evidence-card small { display: block; margin-top: .25rem; color: var(--audit-muted); font-size: .75rem; } .audit-evidence-card small a { color: #f36f22; font-weight: 600; } .audit-evidence-criterion { display: block; color: #f36f22; font-size: .72rem; font-style: normal; font-weight: 700; } .audit-evidence-legend { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px 0 0; } .audit-evidence-kind { display: inline-block; padding: .12rem .45rem; border-radius: 999px; font-size: .65rem; font-style: normal; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; } .audit-evidence-kind--fortaleza { color: #166534; background: #dcfce7; } .audit-evidence-kind--hallazgo { color: #9a3412; background: #ffedd5; } .audit-evidence-kind--critico { color: #991b1b; background: #fee2e2; } html[data-theme="dark"] .audit-evidence-kind--fortaleza { color: #b6f0c8; background: #1f4a2e; } html[data-theme="dark"] .audit-evidence-kind--hallazgo { color: #ffd0b5; background: rgba(217,72,1,.28); } html[data-theme="dark"] .audit-evidence-kind--critico { color: #fecaca; background: rgba(185,28,28,.32); } @media (max-width: 767px) { .audit-findings-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .audit-close-toolbar { align-items: stretch; flex-direction: column; } } @media (max-width: 767px) { .action-validation-grid, .report-metrics { grid-template-columns: 1fr; } .process-assignment-row { grid-template-columns: 1fr 1fr; } .process-assignment-row strong { grid-column: 1 / -1; } .action-cancel-panel form { grid-template-columns: 1fr; } } .action-link { color: var(--audit-text); font-weight: 650; } .action-link:hover { color: var(--audit-primary-dark); } .priority-pill { display: inline-block; padding: .22rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 750; } .priority-pill--baja { color: #35556f; background: #e8f1f7; } .priority-pill--media { color: #6f5410; background: #fff3cd; } .priority-pill--alta { color: #92400e; background: #ffedd5; } .priority-pill--critica { color: #991b1b; background: #fee2e2; } html[data-theme="dark"] .priority-pill--baja { color: #d7e8f4; background: #35556f; } html[data-theme="dark"] .priority-pill--media { color: #fff3cd; background: #6f5410; } html[data-theme="dark"] .priority-pill--alta { color: #ffedd5; background: #92400e; } html[data-theme="dark"] .priority-pill--critica { color: #fee2e2; background: #991b1b; } .action-form-header { margin-bottom: 18px; } .action-form-header h2 { margin: 4px 0 7px; color: var(--audit-text); font-size: 1.55rem; font-weight: 750; } .action-form-header p { margin: 0; color: var(--audit-muted); } .action-form-panel { max-width: 860px; } .action-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; } .field-optional { margin-left: .35rem; color: var(--audit-muted); font-size: .72rem; font-weight: 500; } .action-detail-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 18px; } .action-detail-hero h2 { max-width: 800px; margin: 4px 0 7px; color: var(--audit-text); font-size: 1.5rem; font-weight: 750; } .action-detail-hero p { margin: 0; color: var(--audit-muted); } .action-status-block { min-width: 135px; padding: 14px 16px; border: 1px solid var(--audit-border); border-radius: 11px; text-align: right; background: var(--audit-surface); } .action-status-block strong, .action-status-block small { display: block; } .action-status-block strong { margin-top: 5px; color: var(--audit-text); font-size: 1.55rem; } .action-status-block small { color: var(--audit-muted); } .action-approval-panel { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; padding: 18px 20px; border: 1px solid #ffd9c3; border-radius: 12px; background: #fff7f2; } html[data-theme="dark"] .action-approval-panel { border-color: rgba(243,111,34,.35); background: rgba(243,111,34,.12); } .action-approval-panel strong, .action-approval-panel span { display: block; } .action-approval-panel span { margin-top: 3px; color: #87512f; font-size: .82rem; } html[data-theme="dark"] .action-approval-panel span { color: #ffd0b5; } .audit-section-heading { display: flex; align-items: center; justify-content: space-between; padding-right: 16px; border-bottom: 1px solid var(--audit-border); background: var(--audit-surface-muted); } .audit-section-heading h3 { border-bottom: 0; } .action-followup-form { display: grid; grid-template-columns: minmax(260px, 2fr) repeat(2, minmax(140px, 1fr)); gap: 14px; padding: 20px; } .action-followup-comment { grid-row: span 2; } .action-followup-submit { grid-column: 2 / -1; display: flex; justify-content: flex-end; align-items: end; } .action-timeline { padding: 6px 20px 22px 38px; } .action-timeline__item { position: relative; padding: 18px 0 4px 20px; border-left: 2px solid var(--audit-border); } .action-timeline__dot { position: absolute; top: 23px; left: -7px; width: 12px; height: 12px; border: 3px solid var(--audit-surface); border-radius: 50%; background: var(--audit-primary); box-shadow: 0 0 0 1px #ffd9c3; } .action-timeline__header, .action-timeline__meta { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .action-timeline__header strong { color: var(--audit-text); } .action-timeline__header time, .action-timeline__meta { color: var(--audit-muted); font-size: .78rem; } .action-timeline__item p { margin: 8px 0; color: var(--audit-text); } .action-timeline__evidence { margin-top: 8px; } .action-timeline__evidence a { display: inline-block; margin-right: 8px; color: var(--audit-primary-dark); font-size: .8rem; font-weight: 650; } @media (max-width: 767px) { .action-form-grid, .action-followup-form { grid-template-columns: 1fr; } .action-detail-hero, .action-approval-panel { align-items: flex-start; flex-direction: column; } .action-status-block { width: 100%; text-align: left; } .action-followup-comment { grid-row: auto; } .action-followup-submit { grid-column: auto; justify-content: flex-start; } .action-timeline__header, .action-timeline__meta { align-items: flex-start; flex-direction: column; gap: 3px; } } .audit-row-actions { gap: .4rem; } .audit-finding-action { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .audit-finding-action .btn { flex: 0 0 auto; } .action-create-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding: 1rem 1.15rem; background: var(--audit-surface); border: 1px solid var(--audit-border); border-radius: .75rem; } .action-create-toolbar strong, .action-create-toolbar span { display: block; } .action-create-toolbar span { color: var(--audit-muted); font-size: .9rem; } @media (max-width: 767.98px) { .audit-finding-action, .action-create-toolbar { align-items: stretch; flex-direction: column; } } /* Tablero: paleta charcoal fija. No usa tokens de tema; el contenido no cambia con Claro/Oscuro. */ .board-page .content-wrapper { background: radial-gradient(1100px 240px at 6% -8%, rgba(243,111,34,.08), transparent 52%), linear-gradient(180deg, #3f414c 0%, #4a4c56 100%); } .board-page .content-header { background: transparent; } .board-page .content-header h1 { color: #f4f5f7; } .board-shell { margin: 0 -4px 8px; padding: 4px 2px 18px; color: #eceef2; -webkit-font-smoothing: antialiased; } .board-shell .audit-scope-banner { border-color: rgba(243,111,34,.28); background: rgba(90,92,105,.38); color: #d8dae0; } .board-shell .audit-scope-banner strong { color: #f7f8fa; } .board-shell .audit-scope-banner span { color: #c5c7cf; } .board-shell .audit-scope-banner i { color: var(--audit-primary); } .board-metrics { margin-bottom: 18px; } .board-shell .report-metrics article { border-color: #6b6d78; background: #52545e; box-shadow: 0 8px 18px rgba(42,44,54,.12); } .board-shell .report-metrics span { color: #d0d2d8; } .board-shell .report-metrics strong { color: #f7f8fa; } .board-shell .report-metrics small { color: #b8bbc4; } .board-metric--danger strong { color: #ff8a7a; } .board-filters { max-width: none; } .board-shell .form-panel { border-color: #6b6d78; background: #52545e; box-shadow: 0 8px 18px rgba(42,44,54,.12); } .board-shell .form-panel label, .board-shell .form-panel .form-check-label { color: #e4e6eb; } .board-shell .form-control, .board-shell .custom-select { border-color: #6b6d78; background: #3f414c; color: #f4f5f7; } .board-shell .form-control:focus { border-color: var(--audit-primary); background: #3a3c46; color: #fff; } .board-filter-checks { gap: 12px 18px; } .board-filter-checks label { margin: 0; font-weight: 650; color: var(--audit-charcoal); } .board-shell .board-filter-checks label { color: #d8dae0; } .board-filter-checks input { margin-right: 6px; accent-color: var(--audit-primary); } .board-lane { margin-bottom: 22px; } .board-lane h2 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; color: var(--audit-charcoal); font-size: 1.05rem; font-weight: 750; } .board-shell .board-lane h2 { color: #f0f1f4; } .board-lane h2 small { color: var(--audit-muted); font-size: .82rem; font-weight: 650; } .board-shell .board-lane h2 small { color: #b4b7c0; } .board-columns { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 16px; overflow-x: auto; padding: 4px 2px 14px; } .board-column { display: flex; flex-direction: column; min-height: 300px; border: 1px solid #2c2e36; border-radius: 14px; background: #343640; box-shadow: 0 0 0 1px rgba(243,111,34,.1), 0 12px 24px rgba(42,44,54,.16); } .board-column header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 14px 12px; border-bottom: 1px solid #3f414c; border-radius: 14px 14px 0 0; background: linear-gradient(180deg, #3f414c 0%, #353740 100%); box-shadow: inset 0 3px 0 var(--audit-primary); } .board-column h3 { margin: 0; color: var(--audit-charcoal); font-size: .92rem; font-weight: 750; } .board-shell .board-column h3 { color: #f4f5f7; letter-spacing: .01em; } .board-column header span { min-width: 26px; padding: 2px 8px; border-radius: 999px; background: #eef0f3; color: #374151; font-size: .75rem; font-weight: 750; text-align: center; font-variant-numeric: tabular-nums; } .board-shell .board-column header span { background: rgba(243,111,34,.18); color: #ffd0b5; border: 1px solid rgba(243,111,34,.35); } .board-column__drop { flex: 1; display: flex; flex-direction: column; gap: 10px; min-height: 168px; padding: 12px; background: rgba(47,49,58,.45); } .board-column.is-target .board-column__drop { outline: 2px dashed var(--audit-primary); outline-offset: -6px; background: rgba(243,111,34,.12); } .board-column.is-forbidden .board-column__drop { outline: 2px dashed #6b6d78; background: rgba(90,92,105,.18); } .board-card { position: relative; padding: 12px 13px 10px; border: 1px solid #6b6d78; border-radius: 11px; background: #5a5c69; box-shadow: 0 6px 14px rgba(42,44,54,.14); transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; } .board-card[draggable="true"] { cursor: grab; } .board-card.is-dragging { opacity: .55; } .board-card:hover { border-color: rgba(243,111,34,.45); transform: translateY(-1px); } .board-card--overdue { border-color: #a85a54; background: #6a4a4c; } .board-card__link { display: block; color: inherit; } .board-card__link:hover { color: inherit; text-decoration: none; } .board-card__code { display: block; margin-bottom: 4px; color: var(--audit-primary); font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .board-card strong { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: #f4f5f7; font-size: .92rem; line-height: 1.35; text-wrap: pretty; } .board-card__meta { margin: 8px 0 10px; color: #d5d7de; font-size: .76rem; } .board-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .board-card__footer time, .board-card__pct { color: #eceef2; font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; } .board-card__due { display: inline-block; margin-top: 8px; color: #ff8a7a; font-size: .72rem; font-weight: 750; } .board-card__actions { margin-top: 10px; } .board-shell .board-card .btn-outline-secondary { border-color: #6b6d78; color: #e4e6eb; background: transparent; } .board-shell .board-card .btn-outline-secondary:hover { border-color: var(--audit-primary); color: #fff; background: rgba(243,111,34,.18); } .board-shell .board-card__select { border-color: #6b6d78; background: #3f414c; color: #f4f5f7; } .board-shell .priority-pill--baja { color: #d7e8f4; background: #35556f; } .board-shell .priority-pill--media { color: #fff3cd; background: #6f5410; } .board-shell .priority-pill--alta { color: #ffedd5; background: #92400e; } .board-shell .priority-pill--critica { color: #fee2e2; background: #991b1b; } .board-shell .template-empty { border-color: #6b6d78; background: #4a4c56; } .board-shell .template-empty h2 { color: #f4f5f7; } .board-shell .template-empty p { color: #c5c7cf; } .board-move-summary { color: var(--audit-charcoal); font-weight: 650; } .board-modal .modal-content { border: 1px solid #6b6d78; background: #52545e; color: #eceef2; } .board-modal .modal-header, .board-modal .modal-footer { border-color: #6b6d78; } .board-modal .modal-title, .board-modal .board-move-summary, .board-modal label { color: #f4f5f7; } .board-modal .close { color: #fff; text-shadow: none; opacity: .8; } .board-modal .form-control { border-color: #6b6d78; background: #3f414c; color: #f4f5f7; } .board-modal .form-text, .board-modal .text-muted { color: #b4b7c0 !important; } .board-modal .btn-outline-secondary { border-color: #6b6d78; color: #e4e6eb; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } @media (max-width: 767px) { .board-columns { grid-auto-flow: row; grid-auto-columns: minmax(0, 1fr); } .board-card[draggable="true"] { cursor: default; } } /* Reafirma el tablero si data-theme=dark eleva la especificidad del chrome global. */ html[data-theme="dark"] body.board-page .content-wrapper { background: radial-gradient(1100px 240px at 6% -8%, rgba(243,111,34,.08), transparent 52%), linear-gradient(180deg, #3f414c 0%, #4a4c56 100%); } html[data-theme="dark"] body.board-page .content-header { background: transparent; } html[data-theme="dark"] body.board-page .content-header h1 { color: #f4f5f7; } html[data-theme="dark"] .board-shell .audit-scope-banner { border-color: rgba(243,111,34,.28); background: rgba(90,92,105,.38); color: #d8dae0; } html[data-theme="dark"] .board-shell .form-control, html[data-theme="dark"] .board-shell .custom-select, html[data-theme="dark"] .board-modal .form-control { border-color: #6b6d78; background: #3f414c; color: #f4f5f7; } html[data-theme="dark"] .board-modal .modal-content { border-color: #6b6d78; background: #52545e; color: #eceef2; } /* Captura web de auditorías */ .capture-shell { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 18px; align-items: start; padding-bottom: 24px; } .area-audit-reference { border: 1px solid #d8e2dc; border-radius: 14px; background: #f8fbf9; padding: 16px; } .area-audit-reference__heading { display: flex; justify-content: space-between; gap: 16px; align-items: start; } .area-audit-reference__heading h3 { margin: 2px 0 12px; font-size: 1.05rem; } .area-audit-reference__heading small { color: #42745b; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .area-audit-reference__summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .area-audit-reference__summary span { border-radius: 999px; background: #e7f0ea; padding: 4px 9px; font-size: .82rem; } .area-audit-reference__actions { display: grid; gap: 10px; } .area-audit-action { display: grid; gap: 3px; border-top: 1px solid #d8e2dc; padding-top: 10px; } .area-audit-action > small { color: #627069; } .area-audit-action__comment { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; margin-top: 7px; } @media (max-width: 575px) { .area-audit-reference__heading, .area-audit-action__comment { grid-template-columns: 1fr; display: grid; } } .capture-shell > .alert { grid-column: 1 / -1; } .capture-nav { position: sticky; top: 76px; display: grid; gap: 6px; padding: 16px; border: 1px solid var(--audit-border); border-radius: 12px; background: var(--audit-surface); box-shadow: var(--audit-shadow); } .capture-nav > strong { margin-bottom: 8px; color: var(--audit-text-strong); } .capture-step { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--audit-text); text-align: left; } .capture-step span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: var(--audit-surface-muted); font-weight: 750; } .capture-step.is-active { background: rgba(243,111,34,.13); color: var(--audit-primary-dark); font-weight: 750; } .capture-step.is-active span { background: var(--audit-primary); color: #fff; } .capture-main { min-width: 0; } .capture-panel { display: none; min-height: 430px; padding: 22px; border: 1px solid var(--audit-border); border-radius: 12px; background: var(--audit-surface); box-shadow: var(--audit-shadow); } .capture-panel.is-active { display: block; } .capture-panel h2 { margin: 0 0 18px; color: var(--audit-text-strong); font-size: 1.3rem; font-weight: 750; } .capture-panel h3 { margin: 18px 0 6px; color: var(--audit-text-strong); font-size: 1.05rem; font-weight: 700; } .capture-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; } .capture-section-tabs { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 16px; } .capture-checklist { display: none; gap: 12px; } .capture-checklist.is-active { display: grid; } .capture-criterion { padding: 16px; border: 1px solid var(--audit-border); border-radius: 10px; background: var(--audit-surface-muted); } .capture-criterion header { display: flex; justify-content: space-between; gap: 12px; color: var(--audit-text-strong); } .capture-criterion p { margin: 7px 0 12px; } .criterion-evidence { padding-top: 12px; border-top: 1px solid var(--audit-border); } .criterion-evidence-actions, .criterion-evidence-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .criterion-evidence-actions > div { display: flex; gap: 7px; flex-wrap: wrap; } .criterion-camera-panel { display: grid; gap: 9px; margin-top: 12px; padding: 12px; border-radius: 9px; background: #111827; } .criterion-camera-panel[hidden] { display: none; } .criterion-camera-preview { display: block; width: 100%; max-height: 420px; border-radius: 8px; object-fit: contain; background: #000; } .criterion-camera-controls { display: flex; justify-content: center; gap: 8px; } .criterion-evidence-editor { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; margin-top: 12px; padding: 12px; border-radius: 9px; background: var(--audit-surface); } .criterion-evidence-editor[hidden] { display: none; } .criterion-evidence-preview { width: 120px; height: 120px; border-radius: 8px; object-fit: cover; background: var(--audit-surface-muted); } .criterion-evidence-fields { display: grid; gap: 8px; } .criterion-evidence-status { font-size: .82rem; } .capture-rating { display: grid; grid-template-columns: repeat(6, minmax(44px, 1fr)) minmax(92px, 1.5fr); gap: 7px; margin-bottom: 10px; } .capture-rating label { margin: 0; cursor: pointer; } .capture-rating input { position: absolute; opacity: 0; } .capture-rating span { display: grid; place-items: center; min-height: 44px; padding: 6px; border: 1px solid var(--audit-border); border-radius: 8px; background: var(--audit-surface); text-align: center; font-variant-numeric: tabular-nums; } .capture-rating input:checked + span { border-color: var(--audit-primary); background: rgba(243,111,34,.14); color: var(--audit-primary-dark); font-weight: 750; } .capture-rating input:focus + span { box-shadow: 0 0 0 .2rem var(--audit-focus-ring); } .capture-finding { display: grid; grid-template-columns: 120px minmax(0, 1fr) 130px; gap: 8px; margin-bottom: 9px; align-items: start; } .capture-finding:has(.finding-remove) { grid-template-columns: 120px minmax(0, 1fr) 130px auto; } .capture-review { margin-top: 10px; padding: 14px; border: 1px solid var(--audit-border); border-radius: 9px; background: var(--audit-surface-muted); } .capture-strength { margin-bottom: 9px; padding: 12px; border: 1px solid var(--audit-border); border-radius: 9px; background: var(--audit-surface-muted); } .capture-strength strong { color: var(--audit-success); } .capture-strength p { margin: 6px 0 0; white-space: pre-wrap; } .capture-upload-list { display: grid; gap: 6px; margin-top: 14px; } .capture-upload { padding: 9px 11px; border-radius: 7px; background: var(--audit-surface-muted); } .capture-upload.is-success { color: var(--audit-success); } .capture-upload.is-error { color: var(--audit-danger); } @media (max-width: 575px) { .criterion-evidence-editor { grid-template-columns: 1fr; } .criterion-evidence-preview { width: 100%; height: 190px; } } .capture-summary { display: grid; gap: 5px; margin-bottom: 18px; } .capture-summary strong { color: var(--audit-text-strong); font-size: 2.5rem; } .capture-summary span { font-size: 1.1rem; font-weight: 700; } .capture-summary small { color: var(--audit-muted); } .capture-actions { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--audit-border); border-radius: 10px; background: var(--audit-surface); box-shadow: 0 -5px 18px rgba(42,44,54,.08); z-index: 4; } .capture-actions > div { display: flex; gap: 7px; flex-wrap: wrap; } #saveStatus { color: var(--audit-muted); font-size: .82rem; } @media (max-width: 991px) { .capture-shell { grid-template-columns: 1fr; } .capture-nav { position: static; grid-template-columns: repeat(6, minmax(0, 1fr)); overflow-x: auto; } .capture-nav > strong { grid-column: 1 / -1; } .capture-step { justify-content: center; font-size: 0; } .capture-step span { font-size: .85rem; } } @media (max-width: 767px) { .capture-grid { grid-template-columns: 1fr 1fr; } .capture-criterion { padding: 12px; } .capture-rating { display: flex; flex-wrap: nowrap; gap: 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .capture-rating::-webkit-scrollbar { display: none; } .capture-rating label { flex: 1 1 0; min-width: 36px; } .capture-rating span { min-height: 44px; padding: 4px 2px; font-size: .95rem; } .capture-rating label.capture-rating__na { flex: 0 0 auto; min-width: 4.5rem; } .capture-rating__na span { padding: 4px 6px; font-size: .72rem; font-weight: 650; } .capture-finding { grid-template-columns: 1fr; } .capture-panel { min-height: 0; padding: 16px; } .capture-actions { align-items: stretch; flex-direction: column; } .capture-actions > div { display: grid; grid-template-columns: 1fr 1fr; } } .whatsapp-compose { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, .8fr); gap: 22px; align-items: start; } .whatsapp-compose__form { max-width: none; } .whatsapp-compose__form textarea.form-control { min-height: 132px; resize: vertical; } .whatsapp-compose__help { padding: 22px 24px; border: 1px solid var(--audit-border); border-radius: 14px; background: var(--audit-surface-muted); } .whatsapp-compose__help h2 { margin: 0 0 12px; color: var(--audit-text); font-size: 1.05rem; font-weight: 750; } .whatsapp-compose__help ol { margin: 0 0 14px; padding-left: 1.2rem; } .whatsapp-compose__help li { margin-bottom: 10px; color: var(--audit-text); line-height: 1.45; } .whatsapp-compose__help p { margin: 0; color: var(--audit-muted); line-height: 1.45; } .whatsapp-preview { min-height: 132px; padding: 14px 16px; border: 1px dashed var(--audit-border); border-radius: 10px; background: var(--audit-surface-muted); } .whatsapp-preview__to { margin-bottom: 10px; color: var(--audit-muted); font-size: .82rem; font-weight: 650; } .whatsapp-preview p { margin: 0 0 10px; color: var(--audit-text); line-height: 1.45; } .whatsapp-preview p:last-child { margin-bottom: 0; } @media (max-width: 991px) { .whatsapp-compose { grid-template-columns: 1fr; } } .app-busy { position: fixed; inset: 0; z-index: 20000; display: none; place-items: center; background: rgba(48, 49, 58, .45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); pointer-events: all; } .app-busy.is-visible { display: grid; } html[data-theme="dark"] .app-busy { background: rgba(18, 19, 24, .58); } .app-busy__box { display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 196px; padding: 28px 32px; border: 1px solid var(--audit-border); border-radius: 16px; background: var(--audit-surface); box-shadow: var(--audit-shadow); color: var(--audit-text-strong); } .app-busy__spinner { width: 36px; height: 36px; border: 3px solid var(--audit-border); border-top-color: var(--audit-primary); border-radius: 50%; animation: app-busy-spin .7s linear infinite; } .app-busy__text { font-size: .95rem; font-weight: 650; } @keyframes app-busy-spin { to { transform: rotate(360deg); } } body.is-busy { overflow: hidden; } .swal2-popup.app-swal { padding: 1.6rem 1.4rem 1.35rem; border: 1px solid var(--audit-border); border-radius: 16px; background: var(--audit-surface); color: var(--audit-text); box-shadow: var(--audit-shadow); } .swal2-popup.app-swal .swal2-title { color: var(--audit-text-strong); font-size: 1.35rem; font-weight: 750; } .swal2-popup.app-swal .swal2-html-container { color: var(--audit-text); font-size: .95rem; } .swal2-popup.app-swal .app-swal__actions { width: 100%; margin: 1.15rem 0 0; gap: .6rem; } .swal2-popup.app-swal .btn { min-width: 118px; margin: 0; } .swal2-popup.app-swal .swal2-icon { margin-top: .15rem; } .date-dmy { position: relative; display: block; } .form-group > .date-dmy { width: 100%; } .date-dmy__display { width: 100%; padding-right: 2.75rem; } .date-dmy__native { position: absolute; inset: 0 0 0 auto; width: 2.75rem; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; z-index: 2; } .date-dmy__native:disabled { cursor: default; pointer-events: none; } .date-dmy::after { content: "\f073"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; right: .85rem; top: 50%; transform: translateY(-50%); color: var(--audit-muted); pointer-events: none; z-index: 1; font-size: .95rem; } .date-dmy:has(.date-dmy__native:disabled)::after { opacity: .45; }