/* ===================================================================== scope.css · Sistema de diseño de SCOPE Sistema de Control, Observacion y Proyeccion Electoral Se apoya en Bootstrap 5.3 y le pone encima una capa propia: tokens de color, tipografia, superficies y componentes. Los dos temas se definen con variables sobre [data-theme]. El tema vive en el atributo data-theme del y lo fija un script en el antes de pintar, para que no haya un parpadeo blanco al cargar. ===================================================================== */ /* ==================== TOKENS ==================== */ :root { /* --- Marca --- */ --scope-red: #c1121f; --scope-red-700: #8f0d17; --scope-red-600: #a30f1a; --scope-red-400: #e0505c; /* --- Acentos para datos --- El rojo es la marca, no un color de dato: si todo el panel fuera rojo, no se distinguiria lo importante. */ --scope-verde: #15803d; --scope-verde-bg: #dcfce7; --scope-ambar: #b45309; --scope-ambar-bg: #fef3c7; --scope-frio: #0e7490; --scope-frio-bg: #cffafe; /* --- Superficies y texto (tema claro) --- */ --sc-bg: #f4f5f7; --sc-surface: #ffffff; --sc-surface-2: #fafbfc; --sc-border: #e3e6ea; --sc-border-soft: #eef0f3; --sc-text: #14171c; --sc-text-muted: #5b6472; --sc-text-faint: #8b95a3; /* Barra superior: en claro lleva el rojo del movimiento */ --sc-nav-bg: var(--scope-red); --sc-nav-text: #ffffff; --sc-nav-hover: rgba(255, 255, 255, .16); --sc-nav-border: var(--scope-red-700); --sc-shadow: 0 1px 2px rgba(16, 20, 26, .06), 0 2px 8px rgba(16, 20, 26, .05); --sc-shadow-lg: 0 2px 6px rgba(16, 20, 26, .08), 0 12px 28px rgba(16, 20, 26, .10); --sc-radius: 12px; --sc-radius-sm: 8px; /* Bootstrap: que su "primary" sea nuestro rojo */ --bs-primary: #c1121f; --bs-primary-rgb: 193, 18, 31; --bs-body-bg: var(--sc-bg); --bs-body-color: var(--sc-text); --bs-border-color: var(--sc-border); } /* --- Tema oscuro --- */ [data-theme="dark"] { --sc-bg: #0e1116; --sc-surface: #171b22; --sc-surface-2: #1d222b; --sc-border: #2a313c; --sc-border-soft: #222833; --sc-text: #e8ecf1; --sc-text-muted: #9aa5b4; --sc-text-faint: #6d7887; /* En oscuro la barra no es roja: seria demasiado. Queda casi negra con una linea roja abajo, que mantiene la identidad. */ --sc-nav-bg: #12161d; --sc-nav-text: #e8ecf1; --sc-nav-hover: rgba(255, 255, 255, .08); --sc-nav-border: var(--scope-red); --scope-verde: #4ade80; --scope-verde-bg: #14532d; --scope-ambar: #fbbf24; --scope-ambar-bg: #4a2f08; --scope-frio: #22d3ee; --scope-frio-bg: #0b3f4a; --scope-red-400: #ff6b78; --sc-shadow: 0 1px 2px rgba(0, 0, 0, .40), 0 2px 8px rgba(0, 0, 0, .30); --sc-shadow-lg: 0 2px 6px rgba(0, 0, 0, .45), 0 14px 32px rgba(0, 0, 0, .40); --bs-body-bg: var(--sc-bg); --bs-body-color: var(--sc-text); --bs-border-color: var(--sc-border); --bs-secondary-color: var(--sc-text-muted); --bs-emphasis-color: var(--sc-text); } /* ==================== BASE ==================== */ body { background-color: var(--sc-bg); color: var(--sc-text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { letter-spacing: -.015em; color: var(--sc-text); } /* Las cifras alineadas en columna: sin esto los numeros bailan */ .sc-num, .sc-stat-valor, td.text-end, .table td, .table th { font-variant-numeric: tabular-nums; } a { color: var(--scope-red); text-decoration: none; } a:hover { color: var(--scope-red-600); text-decoration: underline; } [data-theme="dark"] a { color: var(--scope-red-400); } [data-theme="dark"] a:hover { color: #ff8f99; } .text-muted { color: var(--sc-text-muted) !important; } /* ==================== BARRA SUPERIOR ==================== */ .sc-navbar { background-color: var(--sc-nav-bg); border-bottom: 1px solid var(--sc-nav-border); box-shadow: var(--sc-shadow); } .sc-navbar .navbar-brand { display: flex; align-items: center; gap: .55rem; font-weight: 800; letter-spacing: .14em; font-size: 1.05rem; color: var(--sc-nav-text); } .sc-navbar .navbar-brand:hover { color: var(--sc-nav-text); text-decoration: none; } .sc-navbar .navbar-brand .sc-logo { width: 26px; height: 26px; flex: none; } .sc-navbar .nav-link { color: var(--sc-nav-text); opacity: .85; font-weight: 500; padding: .45rem .8rem; border-radius: var(--sc-radius-sm); transition: background-color .15s ease, opacity .15s ease; } .sc-navbar .nav-link:hover { opacity: 1; background-color: var(--sc-nav-hover); } .sc-navbar .nav-link.activo { opacity: 1; background-color: var(--sc-nav-hover); font-weight: 600; } .sc-navbar .navbar-toggler { border-color: var(--sc-nav-hover); color: var(--sc-nav-text); } .sc-usuario { color: var(--sc-nav-text); opacity: .8; font-size: .875rem; } /* Boton de tema y de salir dentro de la barra */ .sc-btn-nav { background: transparent; border: 1px solid var(--sc-nav-hover); color: var(--sc-nav-text); border-radius: var(--sc-radius-sm); padding: .35rem .6rem; line-height: 1; transition: background-color .15s ease; } .sc-btn-nav:hover { background-color: var(--sc-nav-hover); color: var(--sc-nav-text); } /* ==================== TARJETAS ==================== */ .card { background-color: var(--sc-surface); border: 1px solid var(--sc-border); border-radius: var(--sc-radius); box-shadow: var(--sc-shadow); color: var(--sc-text); } .card-body { padding: 1.15rem 1.25rem; } /* Titulo de seccion dentro de una tarjeta */ .sc-titulo-seccion { font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--sc-text-faint); margin-bottom: 1rem; } /* ==================== CIFRAS DEL PANEL ==================== */ .sc-stat { background-color: var(--sc-surface); border: 1px solid var(--sc-border); border-radius: var(--sc-radius); box-shadow: var(--sc-shadow); padding: 1.15rem 1.25rem; height: 100%; position: relative; overflow: hidden; } /* Cinta de color a la izquierda: identifica la cifra de un vistazo */ .sc-stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--sc-text-faint); } .sc-stat.es-marca::before { background: var(--scope-red); } .sc-stat.es-verde::before { background: var(--scope-verde); } .sc-stat.es-frio::before { background: var(--scope-frio); } .sc-stat-etiqueta { font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--sc-text-faint); } .sc-stat-valor { font-size: 2.1rem; font-weight: 750; line-height: 1.1; letter-spacing: -.02em; margin-top: .3rem; } .sc-stat.es-marca .sc-stat-valor { color: var(--scope-red); } [data-theme="dark"] .sc-stat.es-marca .sc-stat-valor { color: var(--scope-red-400); } .sc-stat.es-verde .sc-stat-valor { color: var(--scope-verde); } .sc-stat.es-frio .sc-stat-valor { color: var(--scope-frio); } .sc-stat-pie { font-size: .8rem; color: var(--sc-text-muted); margin-top: .15rem; } /* ==================== TABLAS ==================== */ .table { --bs-table-bg: transparent; --bs-table-color: var(--sc-text); margin-bottom: 0; } .table > thead th { background-color: var(--sc-surface-2); border-bottom: 1px solid var(--sc-border); color: var(--sc-text-faint); font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: .7rem .85rem; white-space: nowrap; } .table > tbody td { border-color: var(--sc-border-soft); padding: .7rem .85rem; vertical-align: middle; color: var(--sc-text); } .table-hover > tbody > tr:hover > * { background-color: var(--sc-surface-2); color: var(--sc-text); } .table > tbody > tr.table-active > * { background-color: rgba(193, 18, 31, .07); color: var(--sc-text); } [data-theme="dark"] .table > tbody > tr.table-active > * { background-color: rgba(224, 80, 92, .12); } /* La tabla ocupa toda la tarjeta, sin doble borde */ .card > .table-responsive { border-radius: var(--sc-radius); overflow: hidden; } /* ==================== BOTONES ==================== */ .btn { border-radius: var(--sc-radius-sm); font-weight: 550; padding: .45rem .9rem; } .btn-sm { padding: .3rem .65rem; font-size: .82rem; } .btn-primary { --bs-btn-bg: var(--scope-red); --bs-btn-border-color: var(--scope-red); --bs-btn-hover-bg: var(--scope-red-600); --bs-btn-hover-border-color: var(--scope-red-600); --bs-btn-active-bg: var(--scope-red-700); --bs-btn-active-border-color: var(--scope-red-700); --bs-btn-disabled-bg: var(--scope-red); --bs-btn-disabled-border-color: var(--scope-red); box-shadow: 0 1px 2px rgba(193, 18, 31, .25); } .btn-outline-primary { --bs-btn-color: var(--scope-red); --bs-btn-border-color: var(--scope-red); --bs-btn-hover-bg: var(--scope-red); --bs-btn-hover-border-color: var(--scope-red); --bs-btn-active-bg: var(--scope-red-600); } [data-theme="dark"] .btn-outline-primary { --bs-btn-color: var(--scope-red-400); --bs-btn-border-color: var(--scope-red-400); --bs-btn-hover-bg: var(--scope-red); --bs-btn-hover-border-color: var(--scope-red); } .btn-outline-secondary { --bs-btn-color: var(--sc-text-muted); --bs-btn-border-color: var(--sc-border); --bs-btn-hover-bg: var(--sc-surface-2); --bs-btn-hover-border-color: var(--sc-border); --bs-btn-hover-color: var(--sc-text); } .btn-success { --bs-btn-bg: var(--scope-verde); --bs-btn-border-color: var(--scope-verde); --bs-btn-hover-bg: #166534; --bs-btn-hover-border-color: #166534; } [data-theme="dark"] .btn-success { --bs-btn-color: #06240f; --bs-btn-hover-color: #06240f; } /* ==================== FORMULARIOS ==================== */ .form-control, .form-select { background-color: var(--sc-surface); border: 1px solid var(--sc-border); border-radius: var(--sc-radius-sm); color: var(--sc-text); padding: .5rem .75rem; } .form-control:focus, .form-select:focus { background-color: var(--sc-surface); color: var(--sc-text); border-color: var(--scope-red-400); box-shadow: 0 0 0 3px rgba(193, 18, 31, .14); } .form-control::placeholder { color: var(--sc-text-faint); } [data-theme="dark"] .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239aa5b4' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); } .form-label { font-weight: 550; font-size: .875rem; color: var(--sc-text); margin-bottom: .35rem; } .form-text { color: var(--sc-text-muted); font-size: .82rem; } .form-check-input:checked { background-color: var(--scope-red); border-color: var(--scope-red); } .form-check-input:focus { border-color: var(--scope-red-400); box-shadow: 0 0 0 3px rgba(193, 18, 31, .14); } [data-theme="dark"] .form-check-input { background-color: var(--sc-surface-2); border-color: var(--sc-border); } /* Barra de filtros: se distingue del contenido sin gritar */ .sc-filtros { background-color: var(--sc-surface); border: 1px solid var(--sc-border); border-radius: var(--sc-radius); padding: 1rem 1.15rem; box-shadow: var(--sc-shadow); } /* ==================== SEMAFORO Y ETIQUETAS ==================== */ .sc-chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 650; letter-spacing: .02em; padding: .22rem .6rem; border-radius: 999px; white-space: nowrap; } .sc-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; } .sc-chip-verde { background: var(--scope-verde-bg); color: var(--scope-verde); } .sc-chip-rojo { background: rgba(193,18,31,.12); color: var(--scope-red); } .sc-chip-gris { background: var(--sc-surface-2); color: var(--sc-text-muted); border: 1px solid var(--sc-border); } .sc-chip-frio { background: var(--scope-frio-bg); color: var(--scope-frio); } .sc-chip-ambar { background: var(--scope-ambar-bg); color: var(--scope-ambar); } [data-theme="dark"] .sc-chip-rojo { background: rgba(255,107,120,.14); color: var(--scope-red-400); } /* Etiqueta neutra sin punto (permisos, proponentes) */ .sc-tag { display: inline-block; font-size: .74rem; font-weight: 550; padding: .18rem .55rem; border-radius: 6px; background: var(--sc-surface-2); border: 1px solid var(--sc-border); color: var(--sc-text-muted); white-space: nowrap; } /* ==================== BARRA DE AVANCE ==================== */ .sc-barra { height: 8px; background-color: var(--sc-border-soft); border-radius: 999px; overflow: hidden; } [data-theme="dark"] .sc-barra { background-color: #262c37; } .sc-barra > span { display: block; height: 100%; background: linear-gradient(90deg, var(--scope-red-600), var(--scope-red-400)); border-radius: 999px; transition: width .4s ease; } /* ==================== AVISOS ==================== */ .alert { border-radius: var(--sc-radius); border: 1px solid transparent; padding: .8rem 1rem; } .alert-success { background: var(--scope-verde-bg); border-color: var(--scope-verde); color: var(--scope-verde); } .alert-danger { background: rgba(193,18,31,.10); border-color: var(--scope-red); color: var(--scope-red); } .alert-warning { background: var(--scope-ambar-bg); border-color: var(--scope-ambar); color: var(--scope-ambar); } .alert-light { background: var(--sc-surface-2); border-color: var(--sc-border); color: var(--sc-text); } [data-theme="dark"] .alert-danger { color: var(--scope-red-400); border-color: var(--scope-red-400); } /* ==================== ESTADO VACIO ==================== */ .sc-vacio { text-align: center; padding: 2.5rem 1rem; color: var(--sc-text-muted); } .sc-vacio .sc-logo { width: 40px; height: 40px; opacity: .28; margin-bottom: .75rem; } /* ==================== ENCABEZADO DE PAGINA ==================== */ .sc-encabezado { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.25rem; } .sc-encabezado h1 { font-size: 1.45rem; font-weight: 700; margin: 0; } .sc-encabezado .sc-sub { color: var(--sc-text-muted); font-size: .875rem; margin: .15rem 0 0; } /* ==================== PAGINACION ==================== */ .pagination { --bs-pagination-bg: var(--sc-surface); } .page-link { background-color: var(--sc-surface); border-color: var(--sc-border); color: var(--sc-text); } .page-link:hover { background-color: var(--sc-surface-2); color: var(--scope-red); } .page-item.disabled .page-link { background-color: var(--sc-surface); color: var(--sc-text-faint); } /* ==================== LOGO ==================== */ .sc-logo { display: inline-block; vertical-align: middle; } /* ==================== LOGIN ==================== */ .sc-login { min-height: 100vh; display: flex; background-color: var(--sc-bg); } .sc-login-visual { flex: 1 1 55%; position: relative; display: flex; align-items: flex-end; color: #fff; background-color: #0e1116; background-image: linear-gradient(160deg, rgba(193, 18, 31, .55), rgba(14, 17, 22, .92)), url('/img/login-fondo.jpg'); background-size: cover; background-position: center; } /* Un degradado desde abajo para que el texto se lea sobre cualquier foto, sin taparla ni ensuciarla. */ .sc-login-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14, 17, 22, .75) 0%, transparent 55%); pointer-events: none; } .sc-login-visual .contenido { padding: 3rem; position: relative; z-index: 1; } .sc-login-visual .lista { display: inline-block; background: #fff; color: var(--scope-red); font-weight: 800; letter-spacing: .12em; font-size: .78rem; padding: .3rem .75rem; border-radius: 6px; margin-bottom: .9rem; } .sc-login-visual h2 { font-weight: 800; color: #fff; margin: 0; font-size: 2rem; text-shadow: 0 2px 12px rgba(0,0,0,.45); } .sc-login-visual p { margin: .4rem 0 0; opacity: .92; text-shadow: 0 1px 8px rgba(0,0,0,.45); } .sc-login-form { flex: 1 1 45%; display: flex; align-items: center; justify-content: center; padding: 2rem; background: var(--sc-surface); } .sc-login-card { width: 100%; max-width: 380px; } .sc-login-marca { display: flex; align-items: center; justify-content: center; gap: .6rem; font-size: 1.75rem; font-weight: 800; letter-spacing: .16em; color: var(--sc-text); } .sc-login-marca .sc-logo { width: 34px; height: 34px; } .sc-login-lema { color: var(--sc-text-muted); font-size: .8rem; text-align: center; margin-top: .35rem; } @media (max-width: 991.98px) { .sc-login-visual { display: none; } } /* ==================== UTILIDADES ==================== */ .sc-separador { height: 1px; background: var(--sc-border); margin: 1.25rem 0; } .sc-mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }