/* =============================================
SISCO - Estilos Generales
Sistema de Cómputo Electoral
============================================= */
/* Reset y Variables */
:root {
--primary-color: #1a73e8;
--primary-dark: #1557b0;
--secondary-color: #34a853;
--danger-color: #ea4335;
--warning-color: #fbbc04;
--dark-color: #202124;
--gray-color: #5f6368;
--light-gray: #f1f3f4;
--white: #ffffff;
--shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
--shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.15);
--border-radius: 8px;
--transition: all 0.3s ease;
/* === Tematización por organización (tenant) ===
Estas variables son sobreescritas en runtime desde sidebar.php
según el color de la organización en sesión. */
--org-color: #1a73e8;
--org-color-dark: #0d47a1;
--org-color-light: rgba(26, 115, 232, 0.10);
--org-gradient: linear-gradient(135deg, var(--org-color) 0%, var(--org-color-dark) 100%);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: var(--dark-color);
background-color: var(--light-gray);
overflow-x: hidden;
}
/* =============================================
LOGIN PAGE
============================================= */
.login-body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #1a73e8 0%, #0d47a1 100%);
padding: 20px;
}
.login-container {
width: 100%;
max-width: 880px;
}
.login-card {
background: var(--white);
border-radius: 16px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
overflow: hidden;
animation: slideUp 0.5s ease;
display: flex;
flex-direction: row;
min-height: 520px;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.login-header {
background: linear-gradient(135deg, #1a73e8 0%, #0d47a1 100%);
color: var(--white);
padding: 50px 40px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
flex: 0 0 45%;
}
.login-logo {
width: 100px;
height: 100px;
min-width: 100px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 0 22px;
font-size: 44px;
}
.login-header-text {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.login-header h1 {
font-size: 34px;
font-weight: 700;
margin-bottom: 6px;
letter-spacing: 3px;
}
.login-header p {
font-size: 15px;
opacity: 0.9;
margin: 0;
}
.login-form {
padding: 40px 36px;
flex: 1 1 55%;
display: flex;
flex-direction: column;
justify-content: center;
}
.form-group {
margin-bottom: 24px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: var(--gray-color);
font-size: 14px;
}
.form-group label i {
margin-right: 8px;
color: var(--primary-color);
}
.form-group input {
width: 100%;
padding: 14px 16px;
border: 2px solid var(--light-gray);
border-radius: var(--border-radius);
font-size: 15px;
transition: var(--transition);
background-color: var(--light-gray);
}
.form-group input:focus {
outline: none;
border-color: var(--primary-color);
background-color: var(--white);
box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.1);
}
.form-group input::placeholder {
color: #9aa0a6;
}
/* Select estilizado (combo de organización en login) */
.form-group select {
width: 100%;
padding: 14px 44px 14px 16px;
border: 2px solid var(--light-gray);
border-radius: var(--border-radius);
font-size: 15px;
font-family: inherit;
color: var(--dark-color);
background-color: var(--light-gray);
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 14px;
cursor: pointer;
transition: var(--transition);
}
.form-group select:hover:not(:disabled) {
border-color: #c4c8cc;
}
.form-group select:focus {
outline: none;
border-color: var(--primary-color);
background-color: var(--white);
box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.1);
background-image: url("data:image/svg+xml;utf8,");
}
.form-group select:disabled {
color: #9aa0a6;
cursor: not-allowed;
opacity: 0.7;
background-image: url("data:image/svg+xml;utf8,");
}
.form-group select option {
color: var(--dark-color);
background-color: var(--white);
padding: 10px;
}
.form-group select option:disabled {
color: #9aa0a6;
}
/* Hint debajo del combo */
.form-hint {
display: block;
margin-top: 8px;
font-size: 12px;
color: var(--gray-color);
line-height: 1.4;
}
.form-hint i {
margin-right: 6px;
}
.password-wrapper {
position: relative;
}
.password-wrapper input {
padding-right: 50px;
}
.toggle-password {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: var(--gray-color);
cursor: pointer;
padding: 5px;
transition: var(--transition);
}
.toggle-password:hover {
color: var(--primary-color);
}
.mensaje-error {
background-color: #fce8e6;
color: var(--danger-color);
padding: 12px 16px;
border-radius: var(--border-radius);
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
animation: shake 0.5s ease;
}
.mensaje-warning {
background-color: #fef7e0;
color: #b06000;
padding: 12px 16px;
border-radius: var(--border-radius);
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
border-left: 4px solid var(--warning-color);
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
.btn-login {
width: 100%;
padding: 16px;
background: linear-gradient(135deg, #1a73e8 0%, #0d47a1 100%);
color: var(--white);
border: none;
border-radius: var(--border-radius);
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.btn-login:hover {
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(26, 115, 232, 0.4);
}
.btn-login:active {
transform: translateY(0);
}
.btn-login:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
.login-footer {
margin-top: 16px;
padding: 14px;
text-align: center;
background: transparent;
font-size: 12px;
color: rgba(255, 255, 255, 0.85);
}
/* =============================================
PÁGINA PRINCIPAL
============================================= */
.main-container {
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* Header */
.header {
background: linear-gradient(135deg, #1a73e8 0%, #0d47a1 100%);
color: var(--white);
padding: 15px 30px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: var(--shadow);
position: sticky;
top: 0;
z-index: 1000;
}
.header-left {
display: flex;
align-items: center;
gap: 15px;
}
.header-logo {
font-size: 24px;
}
.header-title h1 {
font-size: 20px;
font-weight: 700;
letter-spacing: 1px;
}
.header-title p {
font-size: 12px;
opacity: 0.8;
}
.header-right {
display: flex;
align-items: center;
gap: 20px;
}
/* Proceso Activo en Header */
.proceso-activo {
margin: 0 20px;
}
.proceso-badge {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 18px;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 10px;
color: white;
text-decoration: none;
transition: all 0.3s ease;
}
.proceso-badge:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-1px);
}
.proceso-badge > i:first-child {
font-size: 1.2rem;
color: #10b981;
}
.proceso-info-header {
display: flex;
flex-direction: column;
line-height: 1.3;
}
.proceso-label {
font-size: 10px;
opacity: 0.8;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.proceso-nombre {
font-weight: 600;
font-size: 13px;
}
.proceso-ano {
font-size: 11px;
opacity: 0.9;
}
.cambiar-icon {
font-size: 0.9rem;
opacity: 0.6;
transition: all 0.3s ease;
}
.proceso-badge:hover .cambiar-icon {
opacity: 1;
transform: rotate(180deg);
}
.user-info {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 15px;
background: rgba(255, 255, 255, 0.1);
border-radius: 25px;
}
.user-avatar {
width: 35px;
height: 35px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.user-details {
line-height: 1.3;
}
.user-name {
font-weight: 600;
font-size: 14px;
}
.user-role {
font-size: 11px;
opacity: 0.8;
}
.btn-logout {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3);
color: var(--white);
border-radius: 25px;
cursor: pointer;
font-size: 14px;
transition: var(--transition);
text-decoration: none;
}
.btn-logout:hover {
background: rgba(255, 255, 255, 0.2);
}
/* Sidebar */
.content-wrapper {
display: flex;
flex: 1;
overflow: hidden;
}
.sidebar {
width: 260px;
background: var(--white);
box-shadow: var(--shadow);
padding: 0;
height: calc(100vh - 70px);
position: sticky;
top: 70px;
overflow-y: auto;
transition: width 0.3s ease;
}
/* Sidebar colapsado */
.sidebar.collapsed {
width: 60px;
}
.sidebar.collapsed .sidebar-menu > li > .menu-link span,
.sidebar.collapsed .accordion-left span,
.sidebar.collapsed .accordion-arrow,
.sidebar.collapsed .accordion-content a span {
display: none;
}
.sidebar.collapsed .sidebar-menu > li > .menu-link,
.sidebar.collapsed .accordion-toggle,
.sidebar.collapsed .accordion-content a {
justify-content: center;
padding: 14px 10px;
}
.sidebar.collapsed .accordion-left {
gap: 0;
}
.sidebar.collapsed .sidebar-menu > li > .menu-link i,
.sidebar.collapsed .accordion-left i,
.sidebar.collapsed .accordion-content a i {
font-size: 18px;
width: auto;
}
/* Tooltip en modo colapsado */
.sidebar.collapsed .menu-link,
.sidebar.collapsed .accordion-toggle,
.sidebar.collapsed .accordion-content a {
position: relative;
}
.sidebar.collapsed .menu-link::after,
.sidebar.collapsed .accordion-toggle::after,
.sidebar.collapsed .accordion-content a::after {
content: attr(data-tooltip);
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-50%);
background: var(--dark-color);
color: white;
padding: 6px 12px;
border-radius: 4px;
font-size: 12px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: all 0.2s;
z-index: 1000;
margin-left: 10px;
}
.sidebar.collapsed .menu-link:hover::after,
.sidebar.collapsed .accordion-toggle:hover::after,
.sidebar.collapsed .accordion-content a:hover::after {
opacity: 1;
visibility: visible;
}
/* Botón toggle sidebar */
.sidebar-toggle {
display: flex;
align-items: center;
justify-content: flex-end;
padding: 4px 10px;
border-bottom: 1px solid var(--light-gray);
margin-bottom: 0;
}
.sidebar-toggle button {
background: transparent;
border: none;
color: var(--gray-color);
cursor: pointer;
padding: 4px 6px;
border-radius: 4px;
transition: all 0.2s;
}
.sidebar-toggle button:hover {
background: var(--light-gray);
color: var(--primary-color);
}
.sidebar.collapsed .sidebar-toggle {
justify-content: center;
padding: 5px 10px 10px;
}
.sidebar-menu {
list-style: none;
}
/* Link directo (Inicio) */
.sidebar-menu > li > .menu-link {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 20px;
color: var(--gray-color);
text-decoration: none;
font-size: 14px;
transition: var(--transition);
border-left: 3px solid transparent;
}
.sidebar-menu > li > .menu-link:hover,
.sidebar-menu > li > .menu-link.active {
background-color: rgba(26, 115, 232, 0.1);
color: var(--primary-color);
border-left-color: var(--primary-color);
}
.sidebar-menu > li > .menu-link i {
width: 20px;
text-align: center;
}
/* Acordeón */
.menu-accordion {
border-bottom: 1px solid var(--light-gray);
}
.accordion-toggle {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px;
color: var(--gray-color);
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: var(--transition);
cursor: pointer;
border-left: 3px solid transparent;
}
.accordion-toggle:hover {
background-color: rgba(26, 115, 232, 0.05);
color: var(--primary-color);
}
.accordion-toggle.active {
background-color: rgba(26, 115, 232, 0.1);
color: var(--primary-color);
border-left-color: var(--primary-color);
}
.accordion-left {
display: flex;
align-items: center;
gap: 12px;
}
.accordion-left i {
width: 20px;
text-align: center;
}
.accordion-arrow {
font-size: 12px;
transition: transform 0.3s ease;
}
.accordion-toggle.active .accordion-arrow {
transform: rotate(180deg);
}
/* Contenido del acordeón */
.accordion-content {
list-style: none;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
background-color: #f8f9fa;
}
.accordion-content.open {
max-height: 500px;
}
.accordion-content li a {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 20px 12px 48px;
color: var(--gray-color);
text-decoration: none;
font-size: 13px;
transition: var(--transition);
}
.accordion-content li a:hover {
background-color: rgba(26, 115, 232, 0.1);
color: var(--primary-color);
}
.accordion-content li a.active {
color: var(--primary-color);
font-weight: 500;
}
.accordion-content li a i {
font-size: 14px;
width: 18px;
text-align: center;
color: #9aa0a6;
}
.accordion-content li a:hover i,
.accordion-content li a.active i {
color: var(--primary-color);
}
/* Main Content */
.main-content {
flex: 1;
min-width: 0; /* Evita que flex item se desborde */
padding: 30px;
background-color: var(--light-gray);
overflow-x: auto;
}
.page-header {
margin-bottom: 30px;
}
.page-header h2 {
font-size: 24px;
color: var(--dark-color);
margin-bottom: 5px;
}
.page-header p {
color: var(--gray-color);
font-size: 14px;
}
/* Cards de estadísticas */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.stat-card {
background: var(--white);
border-radius: var(--border-radius);
padding: 25px;
box-shadow: var(--shadow);
display: flex;
align-items: center;
gap: 20px;
transition: var(--transition);
}
.stat-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-hover);
}
.stat-icon {
width: 60px;
height: 60px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: var(--white);
}
.stat-icon.blue { background: linear-gradient(135deg, #1a73e8 0%, #0d47a1 100%); }
.stat-icon.green { background: linear-gradient(135deg, #34a853 0%, #1e7e34 100%); }
.stat-icon.orange { background: linear-gradient(135deg, #fbbc04 0%, #f57c00 100%); }
.stat-icon.red { background: linear-gradient(135deg, #ea4335 0%, #c62828 100%); }
.stat-info h3 {
font-size: 28px;
color: var(--dark-color);
margin-bottom: 5px;
}
.stat-info p {
color: var(--gray-color);
font-size: 14px;
}
/* Panel de contenido */
.content-panel {
background: var(--white);
border-radius: var(--border-radius);
box-shadow: var(--shadow);
overflow: hidden;
}
.panel-header {
padding: 20px 25px;
border-bottom: 1px solid var(--light-gray);
display: flex;
justify-content: space-between;
align-items: center;
}
.panel-header h3 {
font-size: 18px;
color: var(--dark-color);
}
.panel-body {
padding: 25px;
}
/* Responsive */
@media (max-width: 1024px) {
.sidebar {
width: 220px;
}
}
@media (max-width: 768px) {
.header {
padding: 12px 20px;
flex-wrap: wrap;
gap: 15px;
}
.user-details {
display: none;
}
.sidebar {
display: block;
position: fixed;
top: 0;
left: -280px;
width: 260px;
height: 100vh;
z-index: 1000;
transition: left 0.3s ease;
overflow-y: auto;
}
.sidebar.mobile-open {
left: 0;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.35);
}
.sidebar-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
}
.sidebar-overlay.active {
display: block;
}
.menu-toggle-mobile {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: none;
background: var(--primary-color);
color: var(--white);
border-radius: 50%;
cursor: pointer;
font-size: 18px;
position: fixed;
top: 12px;
left: 12px;
z-index: 1001;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.main-content {
padding: 20px;
margin-left: 0 !important;
}
.header {
padding-left: 70px; /* espacio para botón hamburger fijo */
}
.stats-grid {
grid-template-columns: 1fr;
}
}
/* Botón hamburguesa: oculto en escritorio.
IMPORTANTE: estas reglas deben ir ANTES del @media (max-width:768px),
o tener menor especificidad / estar protegidas por (min-width:769px),
de lo contrario sobrescriben la regla móvil y el botón nunca aparece. */
@media (min-width: 769px) {
.menu-toggle-mobile {
display: none;
}
.sidebar-overlay {
display: none;
}
}
/* =============================================
RESPONSIVE GLOBAL (móvil)
============================================= */
@media (max-width: 768px) {
.header-title h1 {
font-size: 18px;
}
.header-title p {
font-size: 11px;
}
.header-logo {
width: 40px;
height: 40px;
font-size: 20px;
}
.proceso-info-header {
display: none;
}
.proceso-badge {
padding: 6px 10px;
font-size: 12px;
}
/* Tablas con scroll horizontal forzado */
.table-responsive,
.data-table-wrapper,
.tabla-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.data-table,
.tabla-partidos,
.tabla-preferencial {
min-width: 600px;
font-size: 13px;
}
/* Modales */
.modal-content,
.modal-content.modal-lg,
.modal-content.modal-xl {
width: 95% !important;
max-width: 95% !important;
margin: 12px auto !important;
max-height: 92vh;
overflow-y: auto;
}
/* Forms en grid → 1 columna */
.form-row,
.form-grid,
.form-row-2,
.form-row-3 {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
/* Botones */
.btn-group,
.botones-acciones {
flex-wrap: wrap;
gap: 6px;
}
.btn-group .btn,
.botones-acciones .btn {
font-size: 13px;
}
/* Filtros */
.filters,
.search-bar,
.filtros-container {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
/* Paginación */
.pagination-container,
.paginacion {
flex-direction: column;
gap: 10px;
align-items: stretch;
}
/* Cards y secciones */
.panel-header,
.section-header,
.card-header {
flex-wrap: wrap;
gap: 10px;
}
}
@media (max-width: 576px) {
.header {
padding: 10px 14px;
}
.header-title h1 {
font-size: 16px;
}
.header-title p {
display: none;
}
.header-logo {
display: none;
}
.main-content {
padding: 14px;
}
.panel,
.card,
.stat-card {
padding: 14px;
}
.stat-card .stat-number {
font-size: 22px;
}
/* Tablas que se vuelven cards */
.data-table.responsive-cards thead {
display: none;
}
.data-table.responsive-cards tr {
display: block;
margin-bottom: 12px;
border: 1px solid #e0e0e0;
border-radius: 8px;
background: #fff;
}
.data-table.responsive-cards td {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 8px 12px;
border: none;
border-bottom: 1px solid #f1f3f4;
font-size: 13px;
}
.data-table.responsive-cards td:last-child {
border-bottom: none;
}
.data-table.responsive-cards td::before {
content: attr(data-label);
font-weight: 600;
color: var(--gray-color);
}
/* Inputs de tabla (registrar actas) más compactos */
.tabla-partidos th,
.tabla-partidos td,
.tabla-preferencial th,
.tabla-preferencial td {
padding: 6px 4px;
font-size: 12px;
}
.tabla-partidos input[type="number"],
.tabla-preferencial input[type="number"] {
width: 60px;
padding: 4px 6px;
font-size: 12px;
}
/* Botones full-width en formularios */
.form-actions,
.modal-footer {
flex-direction: column;
gap: 8px;
}
.form-actions .btn,
.modal-footer .btn {
width: 100%;
}
}
/* =============================================
LOGIN - RESPONSIVE
============================================= */
@media (max-width: 992px) {
.login-container {
max-width: 760px;
}
.login-card {
min-height: 480px;
}
.login-header {
flex: 0 0 42%;
padding: 40px 28px;
}
.login-form {
padding: 36px 28px;
}
}
@media (max-width: 768px) {
.login-body {
padding: 16px;
align-items: flex-start;
padding-top: 24px;
}
.login-container {
max-width: 460px;
}
.login-card {
flex-direction: column;
min-height: auto;
}
.login-header {
flex: 0 0 auto;
padding: 32px 24px;
}
.login-logo {
width: 72px;
height: 72px;
min-width: 72px;
font-size: 32px;
margin-bottom: 16px;
}
.login-header h1 {
font-size: 26px;
letter-spacing: 2px;
}
.login-header p {
font-size: 13px;
}
.login-form {
padding: 32px 24px;
}
.login-footer {
margin-top: 12px;
font-size: 11px;
}
}
@media (max-width: 480px) {
.login-body {
padding: 12px;
padding-top: 16px;
}
.login-container {
max-width: 100%;
}
.login-card {
border-radius: 12px;
}
.login-header {
padding: 26px 18px;
}
.login-logo {
width: 64px;
height: 64px;
min-width: 64px;
font-size: 28px;
margin-bottom: 12px;
}
.login-header h1 {
font-size: 22px;
letter-spacing: 1.5px;
}
.login-header p {
font-size: 12px;
}
.login-form {
padding: 24px 18px;
}
.form-group {
margin-bottom: 18px;
}
.login-footer p {
font-size: 11px;
}
}
@media (max-width: 360px) {
.login-header {
padding: 22px 14px;
}
.login-form {
padding: 20px 14px;
}
.login-header h1 {
font-size: 20px;
}
}
/* =============================================
GESTIÓN DE UBIGEO
============================================= */
/* Tabs de navegación */
.ubigeo-tabs,
.tabs-container {
display: flex;
gap: 5px;
margin-bottom: 20px;
background: var(--white);
padding: 10px;
border-radius: var(--border-radius);
box-shadow: var(--shadow);
}
.tab-btn {
flex: 1;
padding: 12px 20px;
background: transparent;
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
color: var(--gray-color);
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.tab-btn:hover {
background: var(--light-gray);
color: var(--primary-color);
}
.tab-btn.active {
background: var(--primary-color);
color: var(--white);
}
.tab-btn i {
font-size: 16px;
}
/* Tab content */
.tab-content {
display: none;
}
.tab-content.active {
display: block;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Filtros de búsqueda */
.filtros-busqueda {
display: flex;
gap: 20px;
margin-bottom: 20px;
padding: 15px;
background: var(--light-gray);
border-radius: var(--border-radius);
flex-wrap: wrap;
}
.filtro-grupo {
display: flex;
flex-direction: column;
gap: 5px;
min-width: 200px;
}
.filtro-grupo label {
font-size: 13px;
font-weight: 600;
color: var(--gray-color);
}
.form-select {
padding: 10px 12px;
border: 2px solid #e8eaed;
border-radius: 6px;
font-size: 14px;
color: var(--dark-color);
background: var(--white);
transition: var(--transition);
cursor: pointer;
}
.form-select:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1);
}
.form-input {
padding: 10px 12px;
border: 2px solid #e8eaed;
border-radius: 6px;
font-size: 14px;
color: var(--dark-color);
transition: var(--transition);
width: 100%;
}
.form-input:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1);
}
/* Tabla de datos */
.table-responsive {
overflow-x: auto;
}
.data-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.data-table thead {
background: linear-gradient(135deg, #1a73e8 0%, #0d47a1 100%);
color: var(--white);
}
.data-table thead th {
padding: 14px 16px;
text-align: left;
font-weight: 600;
white-space: nowrap;
}
.data-table tbody tr {
border-bottom: 1px solid #e8eaed;
transition: var(--transition);
}
.data-table tbody tr:hover {
background-color: rgba(26, 115, 232, 0.05);
}
.data-table tbody td {
padding: 12px 16px;
color: var(--dark-color);
}
.data-table tbody tr:last-child {
border-bottom: none;
}
/* Botones de acciones */
.btn-accion {
padding: 6px 10px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: var(--transition);
font-size: 13px;
margin-right: 5px;
}
.btn-editar {
background: #e3f2fd;
color: var(--primary-color);
}
.btn-editar:hover {
background: var(--primary-color);
color: var(--white);
}
.btn-eliminar {
background: #ffebee;
color: var(--danger-color);
}
.btn-eliminar:hover {
background: var(--danger-color);
color: var(--white);
}
/* Botones generales */
.btn-primary {
padding: 10px 20px;
background: linear-gradient(135deg, #1a73e8 0%, #0d47a1 100%);
color: var(--white);
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: var(--transition);
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(26, 115, 232, 0.4);
}
.btn-secondary {
padding: 10px 20px;
background: var(--light-gray);
color: var(--gray-color);
border: 1px solid #e8eaed;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: var(--transition);
}
.btn-secondary:hover {
background: #e8eaed;
color: var(--dark-color);
}
.btn-danger {
padding: 10px 20px;
background: linear-gradient(135deg, #ea4335 0%, #c62828 100%);
color: var(--white);
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: var(--transition);
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-danger:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(234, 67, 53, 0.4);
}
/* Modal */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 2000;
align-items: center;
justify-content: center;
padding: 20px;
}
.modal.show {
display: flex;
animation: fadeIn 0.2s ease;
}
.modal-content {
background: var(--white);
border-radius: 12px;
width: 100%;
max-width: 500px;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
animation: slideUp 0.3s ease;
}
.modal-sm {
max-width: 400px;
}
.modal-header {
padding: 20px 25px;
border-bottom: 1px solid var(--light-gray);
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-header h3 {
font-size: 18px;
color: var(--dark-color);
display: flex;
align-items: center;
gap: 10px;
}
.modal-close {
width: 32px;
height: 32px;
border: none;
background: var(--light-gray);
border-radius: 50%;
font-size: 20px;
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
}
.modal-close:hover {
background: var(--danger-color);
color: var(--white);
}
.modal-body {
padding: 25px;
}
.modal-body .form-group {
margin-bottom: 20px;
}
.modal-body .form-group:last-child {
margin-bottom: 0;
}
.modal-body label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: var(--gray-color);
font-size: 14px;
}
.modal-body .required {
color: var(--danger-color);
}
.modal-footer {
padding: 15px 25px;
border-top: 1px solid var(--light-gray);
display: flex;
justify-content: flex-end;
gap: 10px;
}
/* Mensajes de notificación */
.toast {
position: fixed;
top: 90px;
right: 20px;
padding: 15px 25px;
border-radius: 8px;
color: var(--white);
font-size: 14px;
display: none;
align-items: center;
gap: 10px;
z-index: 3000;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
transform: translateX(100px);
opacity: 0;
transition: all 0.3s ease;
}
.toast.show {
display: flex;
transform: translateX(0);
opacity: 1;
}
.toast.success, .toast-success {
background: linear-gradient(135deg, #34a853 0%, #1e7e34 100%);
}
.toast.error, .toast-error {
background: linear-gradient(135deg, #ea4335 0%, #c62828 100%);
}
.toast.warning, .toast-warning {
background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
color: #333;
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(100px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Estado vacío de tabla */
.empty-state {
text-align: center;
padding: 40px 20px;
color: var(--gray-color);
}
.empty-state i {
font-size: 48px;
margin-bottom: 15px;
opacity: 0.5;
}
.empty-state p {
font-size: 14px;
}
/* Responsive para ubigeo */
@media (max-width: 768px) {
.ubigeo-tabs {
flex-direction: column;
}
.filtros-busqueda {
flex-direction: column;
}
.filtro-grupo {
min-width: 100%;
}
.modal-content {
margin: 10px;
}
.panel-header {
flex-direction: column;
gap: 15px;
align-items: flex-start;
}
}
/* =============================================
PAGINACIÓN
============================================= */
.paginacion {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 0;
margin-top: 15px;
border-top: 1px solid var(--light-gray);
flex-wrap: wrap;
gap: 10px;
}
.paginacion-info {
font-size: 13px;
color: var(--gray-color);
}
.paginacion-botones {
display: flex;
align-items: center;
gap: 5px;
}
.btn-pag {
min-width: 36px;
height: 36px;
padding: 0 10px;
background: var(--white);
border: 1px solid #e8eaed;
border-radius: 6px;
font-size: 14px;
color: var(--gray-color);
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
}
.btn-pag:hover:not(.disabled):not(.active) {
background: var(--light-gray);
border-color: var(--primary-color);
color: var(--primary-color);
}
.btn-pag.active {
background: var(--primary-color);
border-color: var(--primary-color);
color: var(--white);
}
.btn-pag.disabled {
opacity: 0.5;
cursor: not-allowed;
}
.pag-ellipsis {
padding: 0 8px;
color: var(--gray-color);
}
@media (max-width: 576px) {
.paginacion {
flex-direction: column;
align-items: center;
}
.paginacion-info {
order: 2;
}
.paginacion-botones {
order: 1;
}
}
/* =============================================
GESTIÓN DE USUARIOS
============================================= */
/* Input con botón de búsqueda */
.input-con-boton {
display: flex;
gap: 0;
}
.input-con-boton .form-input {
border-radius: 6px 0 0 6px;
border-right: none;
}
.btn-buscar {
padding: 10px 15px;
background: var(--primary-color);
color: var(--white);
border: 2px solid var(--primary-color);
border-radius: 0 6px 6px 0;
cursor: pointer;
transition: var(--transition);
}
.btn-buscar:hover {
background: var(--primary-dark);
border-color: var(--primary-dark);
}
.filtro-largo {
flex: 1;
min-width: 300px;
}
/* Badges para tipos y estados */
.badge {
display: inline-block;
padding: 4px 10px;
border-radius: 20px;
font-size: 12px;
font-weight: 500;
text-align: center;
}
.badge-tipo-1 {
background: #e8f5e9;
color: #2e7d32;
}
.badge-tipo-2 {
background: #fff3e0;
color: #ef6c00;
}
.badge-tipo-3 {
background: #e3f2fd;
color: #1565c0;
}
.estado-activo {
background: #e8f5e9;
color: #2e7d32;
}
.estado-inactivo {
background: #ffebee;
color: #c62828;
}
/* Botón reset password */
.btn-reset {
background: #fff8e1;
color: #f9a825;
}
.btn-reset:hover {
background: #f9a825;
color: var(--white);
}
/* Modal grande */
.modal-lg {
max-width: 600px;
}
/* Form row para campos en línea */
.form-row {
display: flex;
gap: 20px;
margin-bottom: 0;
}
.form-row .form-group {
flex: 1;
}
/* Info box */
.info-box {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 15px;
background: #e3f2fd;
border-radius: 6px;
color: #1565c0;
font-size: 13px;
margin-top: 10px;
}
.info-box i {
font-size: 16px;
}
.texto-info {
color: var(--gray-color);
font-size: 13px;
margin-top: 10px;
}
.texto-info i {
color: var(--primary-color);
}
/* Botón warning */
.btn-warning {
padding: 10px 20px;
background: linear-gradient(135deg, #f9a825 0%, #f57c00 100%);
color: var(--white);
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: var(--transition);
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-warning:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(249, 168, 37, 0.4);
}
/* Responsive para usuarios */
@media (max-width: 768px) {
.form-row {
flex-direction: column;
gap: 0;
}
.filtro-largo {
min-width: 100%;
}
}
/* ====================================================
PROCESOS ELECTORALES
==================================================== */
/* Header de contenido */
.content-header {
margin-bottom: 25px;
}
.content-header h2 {
font-size: 24px;
color: var(--text-color);
display: flex;
align-items: center;
gap: 12px;
margin: 0;
}
.content-header h2 i {
color: var(--primary-color);
}
/* Grupo de checkboxes */
.checkbox-group {
display: flex;
flex-wrap: wrap;
gap: 15px;
padding: 15px;
background: #f8f9fa;
border-radius: 8px;
border: 1px solid var(--border-color);
min-height: 50px;
}
.checkbox-label {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 15px;
background: var(--white);
border: 1px solid var(--border-color);
border-radius: 20px;
cursor: pointer;
font-size: 13px;
transition: var(--transition);
}
.checkbox-label:hover {
border-color: var(--primary-color);
background: #e8f0fe;
}
.checkbox-label input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--primary-color);
}
.checkbox-label input[type="checkbox"]:checked + span,
.checkbox-label:has(input[type="checkbox"]:checked) {
color: var(--primary-color);
font-weight: 500;
}
/* Info Grid para modal de información */
.info-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.info-item {
padding: 12px;
background: #f8f9fa;
border-radius: 8px;
}
.info-item.full-width {
grid-column: 1 / -1;
}
.info-item label {
display: block;
font-size: 11px;
text-transform: uppercase;
color: var(--gray-color);
margin-bottom: 5px;
font-weight: 600;
}
.info-item span,
.info-item div {
font-size: 14px;
color: var(--text-color);
}
.info-item .badge {
font-size: 12px;
}
/* Modal pequeño */
.modal-sm {
max-width: 400px;
}
/* Badge info (azul claro) */
.badge-info {
background: #17a2b8;
color: var(--white);
}
/* Colores de badges para tipos de proceso */
.badge-primary {
background: linear-gradient(135deg, var(--primary-color) 0%, #1a4a8a 100%);
color: var(--white);
}
.badge-warning {
background: linear-gradient(135deg, #f9a825 0%, #f57c00 100%);
color: var(--white);
}
.badge-success {
background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
color: var(--white);
}
.badge-danger {
background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
color: var(--white);
}
.badge-secondary {
background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
color: var(--white);
}
.badge-info {
background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
color: var(--white);
}
/* Estilos para cards de estadísticas */
.stats-row {
display: flex;
gap: 1rem;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
.stat-card {
background: var(--white);
border-radius: 10px;
padding: 1rem 1.25rem;
display: flex;
align-items: center;
gap: 1rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
flex: 1;
min-width: 180px;
}
.stat-icon {
width: 50px;
height: 50px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
color: var(--white);
}
.stat-icon.bg-primary {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
}
.stat-icon.bg-secondary {
background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
}
.stat-icon.bg-success {
background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
}
.stat-icon.bg-warning {
background: linear-gradient(135deg, #f9a825 0%, #f57c00 100%);
}
.stat-icon.bg-info {
background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
}
.stat-info {
display: flex;
flex-direction: column;
}
.stat-value {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-dark);
line-height: 1;
}
.stat-label {
font-size: 0.85rem;
color: #6c757d;
margin-top: 0.25rem;
}
/* =============================================
LOGOS DE PARTIDOS
============================================= */
.logo-partido {
width: 40px;
height: 40px;
object-fit: contain;
border-radius: 4px;
border: 1px solid #e0e0e0;
background: white;
padding: 2px;
}
.logo-partido-sm {
width: 30px;
height: 30px;
object-fit: contain;
border-radius: 3px;
border: 1px solid #e0e0e0;
background: white;
padding: 1px;
}
/* =============================================
VOTOS PREFERENCIALES
============================================= */
.votos-preferenciales {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.voto-preferencial {
display: inline-block;
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-size: 0.8rem;
font-weight: 500;
color: #1565c0;
border: 1px solid #90caf9;
}
.voto-preferencial:hover {
background: linear-gradient(135deg, #bbdefb 0%, #90caf9 100%);
}
.text-muted {
color: #9e9e9e !important;
}
/* =============================================
GRÁFICOS DE VOTOS (CHARTS)
============================================= */
.chart-votos-container {
display: flex;
gap: 1.5rem;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
.chart-wrapper {
flex: 1;
min-width: 200px;
max-width: 250px;
text-align: center;
}
.chart-wrapper canvas {
max-height: 180px;
}
.chart-title {
margin-top: 0.5rem;
font-size: 0.85rem;
color: #666;
font-weight: 500;
}
/* Resumen de votos estilizado */
.votos-resumen-grid {
display: flex;
gap: 2rem;
margin-top: 1rem;
flex-wrap: wrap;
}
.votos-columna {
flex: 1;
min-width: 200px;
background: #f8f9fa;
border-radius: 8px;
padding: 1rem;
}
.votos-columna-titulo {
font-size: 1rem;
font-weight: 600;
color: var(--primary-color);
margin-bottom: 0.75rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--primary-color);
}
.votos-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 0;
border-bottom: 1px dashed #dee2e6;
}
.votos-item:last-child {
border-bottom: none;
}
.votos-label {
font-size: 0.9rem;
color: #495057;
display: flex;
align-items: center;
gap: 0.5rem;
}
.votos-label i {
width: 16px;
text-align: center;
}
.votos-valor {
font-size: 1.1rem;
font-weight: 600;
color: #212529;
}
/* Colores por tipo de voto */
.votos-emitidos .votos-label i { color: #28a745; }
.votos-blancos .votos-label i { color: #6c757d; }
.votos-nulos .votos-label i { color: #dc3545; }
.votos-impugnados .votos-label i { color: #ffc107; }
.votos-emitidos .votos-valor { color: #28a745; }
.votos-blancos .votos-valor { color: #6c757d; }
.votos-nulos .votos-valor { color: #dc3545; }
.votos-impugnados .votos-valor { color: #856404; }
/* Responsive procesos */
@media (max-width: 768px) {
.info-grid {
grid-template-columns: 1fr;
}
.checkbox-group {
flex-direction: column;
}
.chart-votos-container {
flex-direction: column;
align-items: center;
}
.chart-wrapper {
max-width: 100%;
}
.votos-resumen-grid {
flex-direction: column;
}
}
/* =============================================
REGISTRAR ACTAS
============================================= */
.contenedor-registrar-actas {
padding: 20px;
}
/* Búsqueda de mesa */
.busqueda-mesa-grid {
display: grid;
grid-template-columns: 1fr 1fr auto;
gap: 15px;
align-items: end;
margin-bottom: 20px;
}
.busqueda-mesa-grid .form-group {
margin-bottom: 0;
}
/* Info de mesa encontrada */
.info-mesa-container {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-radius: 8px;
padding: 20px;
margin-bottom: 25px;
border-left: 4px solid #007bff;
}
.info-mesa-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 15px;
}
.info-mesa-item {
display: flex;
flex-direction: column;
}
.info-mesa-label {
font-size: 0.75rem;
color: #6c757d;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 4px;
}
.info-mesa-valor {
font-size: 1rem;
font-weight: 600;
color: #495057;
}
.info-mesa-valor.numero-mesa {
font-size: 1.5rem;
color: #007bff;
}
/* Secciones del acta */
.seccion-acta {
background: #fff;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.seccion-acta h3 {
font-size: 1.1rem;
color: #495057;
border-bottom: 2px solid #e9ecef;
padding-bottom: 10px;
margin-bottom: 20px;
}
/* Tabla de partidos */
.tabla-partidos {
width: 100%;
border-collapse: collapse;
}
.tabla-partidos th,
.tabla-partidos td {
padding: 10px;
text-align: center;
border-bottom: 1px solid #e9ecef;
}
.tabla-partidos th {
background: #f8f9fa;
font-weight: 600;
font-size: 0.85rem;
color: #495057;
}
.tabla-partidos td.nombre-partido {
text-align: left;
font-weight: 500;
}
.tabla-partidos .votos-input {
width: 80px;
text-align: center;
padding: 6px;
border: 1px solid #ced4da;
border-radius: 4px;
}
.tabla-partidos .votos-input:focus {
border-color: #007bff;
box-shadow: 0 0 0 2px rgba(0,123,255,0.15);
outline: none;
}
.tabla-partidos tfoot {
background: #f8f9fa;
font-weight: 700;
}
.logo-partido-mini {
width: 35px;
height: 35px;
object-fit: contain;
border-radius: 4px;
}
.sin-logo {
color: #adb5bd;
font-style: italic;
}
.btn-eliminar {
background: #dc3545;
color: white;
border: none;
border-radius: 4px;
padding: 5px 10px;
cursor: pointer;
}
.btn-eliminar:hover {
background: #c82333;
}
/* Tabla preferencial */
.tabla-preferencial-wrapper {
overflow-x: auto;
margin-top: 15px;
}
.tabla-preferencial {
width: 100%;
border-collapse: collapse;
min-width: 1800px;
}
.tabla-preferencial th,
.tabla-preferencial td {
padding: 8px 5px;
text-align: center;
border: 1px solid #e9ecef;
font-size: 0.85rem;
}
.tabla-preferencial th {
background: #007bff;
color: white;
position: sticky;
top: 0;
}
.tabla-preferencial th.col-voto {
width: 50px;
min-width: 50px;
}
.tabla-preferencial .pref-input {
width: 45px;
padding: 4px;
text-align: center;
border: 1px solid #ced4da;
border-radius: 3px;
font-size: 0.8rem;
}
.tabla-preferencial .pref-input:focus {
border-color: #007bff;
outline: none;
}
/* Wrapper para tabla de partidos con scroll horizontal */
.tabla-partidos-wrapper {
overflow-x: auto;
max-width: 100%;
}
.tabla-partidos-wrapper::-webkit-scrollbar {
height: 8px;
}
.tabla-partidos-wrapper::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
.tabla-partidos-wrapper::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 4px;
}
.tabla-partidos-wrapper::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}
/* Columnas de voto preferencial en tabla de partidos */
#tablaPartidos .col-pref {
background-color: #fef3c7;
}
#tablaPartidos thead .col-pref {
background-color: #fbbf24;
color: #78350f;
font-size: 11px;
padding: 6px 4px;
white-space: nowrap;
}
#tablaPartidos .col-pref .input-pref,
#tablaPartidos .col-pref input[type="number"] {
width: 50px;
text-align: center;
padding: 4px 2px;
border: 1px solid #d4a82d;
border-radius: 4px;
font-size: 13px;
}
#tablaPartidos .col-pref .input-pref:focus,
#tablaPartidos .col-pref input[type="number"]:focus {
border-color: #f59e0b;
outline: none;
box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}
/* Resumen de votos */
.resumen-votos-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 20px;
}
.resumen-votos-item {
background: #f8f9fa;
border-radius: 8px;
padding: 15px;
text-align: center;
}
.resumen-votos-item label {
display: block;
font-size: 0.8rem;
color: #6c757d;
text-transform: uppercase;
margin-bottom: 8px;
}
.resumen-votos-item .resumen-input {
width: 100%;
padding: 10px;
font-size: 1.2rem;
font-weight: 700;
text-align: center;
border: 2px solid #ced4da;
border-radius: 6px;
}
.resumen-votos-item.blancos .resumen-input { border-color: #6c757d; color: #6c757d; }
.resumen-votos-item.nulos .resumen-input { border-color: #dc3545; color: #dc3545; }
.resumen-votos-item.impugnados .resumen-input { border-color: #ffc107; color: #856404; }
.resumen-votos-item.emitidos .resumen-input {
border-color: #28a745;
color: #28a745;
background: #d4edda;
}
/* Observaciones */
.observacion-textarea {
width: 100%;
min-height: 80px;
padding: 10px;
border: 1px solid #ced4da;
border-radius: 4px;
resize: vertical;
}
/* Botones de acción */
.acciones-registro {
display: flex;
gap: 15px;
justify-content: flex-end;
margin-top: 20px;
}
.acciones-registro .btn {
padding: 12px 30px;
font-weight: 600;
}
/* Alertas */
.alerta {
padding: 12px 20px;
border-radius: 6px;
margin-bottom: 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
.alerta-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.alerta-error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.alerta-warning { background: #fff3cd; color: #856404; border: 1px solid #ffeeba; }
.alerta button {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: inherit;
opacity: 0.5;
}
.alerta button:hover {
opacity: 1;
}
/* Modal */
.modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index: 1000;
align-items: center;
justify-content: center;
}
.modal-overlay.activo {
display: flex;
}
.modal-contenido {
background: white;
border-radius: 8px;
padding: 25px;
width: 90%;
max-width: 500px;
box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.modal-header h3 {
margin: 0;
font-size: 1.2rem;
}
.modal-close {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: #6c757d;
}
.modal-close:hover {
color: #dc3545;
}
.modal-footer {
margin-top: 20px;
display: flex;
gap: 10px;
justify-content: flex-end;
}
/* Clase oculto */
.oculto {
display: none !important;
}
/* Responsive registrar actas */
@media (max-width: 768px) {
.busqueda-mesa-grid {
grid-template-columns: 1fr;
}
.info-mesa-grid {
grid-template-columns: 1fr 1fr;
}
.resumen-votos-grid {
grid-template-columns: repeat(2, 1fr);
}
.acciones-registro {
flex-direction: column;
}
.acciones-registro .btn {
width: 100%;
}
}
/* Estilos adicionales para registrar actas */
.seccion-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid #e9ecef;
}
.seccion-header h4 {
margin: 0;
font-size: 1rem;
color: #495057;
}
.btn-action {
padding: 6px 12px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 0.85rem;
transition: all 0.3s ease;
}
.btn-action.btn-danger {
background: #dc3545;
color: white;
}
.btn-action.btn-danger:hover {
background: #c82333;
}
.input-votos {
width: 80px;
text-align: center;
padding: 8px;
border: 1px solid #ced4da;
border-radius: 4px;
font-size: 1rem;
}
.input-votos:focus {
border-color: #007bff;
box-shadow: 0 0 0 2px rgba(0,123,255,0.15);
outline: none;
}
.logo-mini {
width: 35px;
height: 35px;
object-fit: contain;
border-radius: 4px;
}
.sin-logo {
color: #adb5bd;
font-style: italic;
font-size: 0.85rem;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.row-total {
background: #f8f9fa;
font-weight: 700;
}
.resumen-columna {
background: #f8f9fa;
border-radius: 8px;
padding: 20px;
}
.resumen-columna h5 {
margin: 0 0 15px 0;
padding-bottom: 10px;
border-bottom: 2px solid #007bff;
color: #007bff;
font-size: 1rem;
}
.total-emitidos input {
background: #d4edda !important;
border-color: #28a745 !important;
color: #28a745 !important;
font-weight: 700;
}
.info-mesa-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.info-mesa-header h4 {
margin: 0;
font-size: 1.1rem;
color: #495057;
}
.info-label {
font-size: 0.75rem;
color: #6c757d;
text-transform: uppercase;
display: block;
margin-bottom: 4px;
}
.info-value {
font-size: 0.95rem;
font-weight: 600;
color: #495057;
}
.btn-sm {
padding: 6px 12px;
font-size: 0.85rem;
}
.btn-success {
background: #28a745;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background 0.3s ease;
}
.btn-success:hover {
background: #218838;
}
.help-text {
font-size: 0.8rem;
color: #6c757d;
margin-top: 10px;
}
.input-pref {
width: 50px;
padding: 4px;
text-align: center;
border: 1px solid #ced4da;
border-radius: 3px;
font-size: 0.8rem;
}
.input-pref:focus {
border-color: #007bff;
outline: none;
}
.form-group-btn {
display: flex;
align-items: flex-end;
}
/* =============================================
ESTILOS OCR - Reconocimiento de Imágenes
============================================= */
.ocr-panel {
border: 2px dashed #17a2b8;
background: linear-gradient(135deg, #f8f9fa 0%, #e3f2fd 100%);
}
.panel-header-collapsible {
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: background 0.3s ease;
}
.panel-header-collapsible:hover {
background: rgba(23, 162, 184, 0.1);
}
.panel-header-actions {
display: flex;
align-items: center;
gap: 10px;
}
.ocr-toggle-icon {
transition: transform 0.3s ease;
color: #6c757d;
}
.ocr-toggle-icon.rotated {
transform: rotate(180deg);
}
.ocr-panel-body {
padding: 20px;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
.ocr-info-message {
background: #d1ecf1;
border: 1px solid #bee5eb;
border-radius: 6px;
padding: 12px 15px;
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 20px;
color: #0c5460;
}
.ocr-info-message i {
font-size: 1.2rem;
margin-top: 2px;
}
.ocr-upload-area {
border: 2px dashed #adb5bd;
border-radius: 10px;
padding: 40px;
text-align: center;
background: #fff;
transition: all 0.3s ease;
cursor: pointer;
}
.ocr-upload-area:hover {
border-color: #17a2b8;
background: #f8f9fa;
}
.ocr-upload-area.dragover {
border-color: #28a745;
background: #d4edda;
}
.ocr-upload-content i {
font-size: 3rem;
color: #6c757d;
margin-bottom: 15px;
}
.ocr-upload-content p {
font-size: 1.1rem;
color: #495057;
margin-bottom: 5px;
}
.ocr-upload-content span {
font-size: 0.85rem;
color: #6c757d;
}
.ocr-preview-container {
display: flex;
gap: 20px;
align-items: center;
padding: 20px;
background: #fff;
border-radius: 8px;
border: 1px solid #dee2e6;
}
.ocr-preview-image {
flex: 0 0 200px;
max-width: 200px;
}
.ocr-preview-image img {
width: 100%;
height: auto;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.ocr-preview-actions {
display: flex;
flex-direction: column;
gap: 10px;
}
.ocr-preview-actions button {
padding: 10px 20px;
display: flex;
align-items: center;
gap: 8px;
font-weight: 500;
}
.ocr-processing {
text-align: center;
padding: 40px;
background: #fff;
border-radius: 8px;
}
.ocr-spinner {
width: 50px;
height: 50px;
border: 4px solid #e9ecef;
border-top-color: #17a2b8;
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto 15px;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.ocr-processing p {
color: #495057;
font-size: 1rem;
}
.ocr-result-container {
background: #fff;
border-radius: 8px;
border: 1px solid #28a745;
overflow: hidden;
}
.ocr-result-header {
background: #28a745;
color: white;
padding: 12px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.ocr-result-header h4 {
margin: 0;
display: flex;
align-items: center;
gap: 10px;
}
.ocr-result-summary {
padding: 15px 20px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
border-bottom: 1px solid #dee2e6;
}
.ocr-result-item {
text-align: center;
}
.ocr-result-item .label {
display: block;
font-size: 0.8rem;
color: #6c757d;
margin-bottom: 5px;
}
.ocr-result-item .value {
display: block;
font-size: 1.3rem;
font-weight: 700;
color: #28a745;
}
.ocr-result-actions {
padding: 15px 20px;
display: flex;
gap: 10px;
justify-content: center;
}
.ocr-result-actions button {
padding: 10px 25px;
display: flex;
align-items: center;
gap: 8px;
}
.ocr-debug {
background: #f8f9fa;
padding: 15px 20px;
border-top: 1px solid #dee2e6;
}
.ocr-debug h5 {
margin: 0 0 10px 0;
font-size: 0.9rem;
color: #6c757d;
}
.ocr-debug pre {
background: #343a40;
color: #f8f9fa;
padding: 15px;
border-radius: 6px;
font-size: 0.8rem;
max-height: 200px;
overflow-y: auto;
white-space: pre-wrap;
word-wrap: break-word;
}
.badge-info {
background: #17a2b8;
color: white;
padding: 4px 10px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 500;
}
/* Responsive OCR */
@media (max-width: 768px) {
.ocr-preview-container {
flex-direction: column;
}
.ocr-preview-image {
flex: none;
max-width: 100%;
}
.ocr-result-summary {
grid-template-columns: 1fr;
}
.ocr-result-actions {
flex-direction: column;
}
}
/* =============================================
VERIFICACIÓN DE ACTAS
============================================= */
.info-verificacion {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-radius: 8px;
padding: 15px 20px;
margin-bottom: 20px;
border-left: 4px solid var(--primary-color);
}
.info-verificacion .info-row {
display: flex;
gap: 30px;
flex-wrap: wrap;
}
.grid-verificacion {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
margin-bottom: 20px;
}
.verif-columna {
background: #f8f9fa;
border-radius: 8px;
padding: 20px;
border: 1px solid #dee2e6;
}
.verif-columna h5 {
margin-bottom: 15px;
color: var(--primary-color);
font-size: 1rem;
border-bottom: 2px solid var(--primary-color);
padding-bottom: 8px;
}
.verif-columna hr {
margin: 15px 0;
border: none;
border-top: 1px dashed #ced4da;
}
.valor-suma {
font-size: 1.5rem;
font-weight: 700;
color: var(--primary-color);
padding: 10px;
background: white;
border-radius: 8px;
text-align: center;
border: 2px solid var(--primary-color);
}
.input-destacado {
font-size: 1.1rem !important;
font-weight: 600 !important;
border: 2px solid var(--primary-color) !important;
background: #fff !important;
}
.indicador-verificacion {
padding: 12px 15px;
border-radius: 8px;
font-weight: 600;
text-align: center;
margin-top: 10px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.indicador-ok {
background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
color: #155724;
border: 1px solid #28a745;
}
.indicador-error {
background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
color: #721c24;
border: 1px solid #dc3545;
}
.indicador-verificacion i {
font-size: 1.2rem;
}
.input-sm {
padding: 6px 10px !important;
font-size: 0.9rem !important;
}
/* Modal grande */
.modal-lg {
max-width: 900px !important;
}
.modal-lg .modal-body {
max-height: 70vh;
overflow-y: auto;
}
.modal-lg h4 {
margin: 20px 0 10px;
color: var(--dark-color);
font-size: 1rem;
border-bottom: 1px solid #dee2e6;
padding-bottom: 8px;
}
/* Responsive verificación */
@media (max-width: 768px) {
.grid-verificacion {
grid-template-columns: 1fr;
}
.info-verificacion .info-row {
flex-direction: column;
gap: 10px;
}
.modal-lg {
max-width: 95% !important;
}
}
/* =============================================
REGISTRO DE ACTAS - Suma automática
============================================= */
.suma-automatica {
margin-bottom: 10px;
}
.valor-suma-auto {
font-size: 1.3rem;
font-weight: 700;
color: var(--primary-color);
padding: 10px;
background: #e3f2fd;
border-radius: 8px;
text-align: center;
border: 2px solid var(--primary-color);
}
.indicador-suma {
padding: 8px 12px;
border-radius: 6px;
font-size: 0.85rem;
font-weight: 600;
text-align: center;
margin-top: 8px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.indicador-suma.indicador-ok {
background: #d4edda;
color: #155724;
border: 1px solid #28a745;
}
.indicador-suma.indicador-warning {
background: #fff3cd;
color: #856404;
border: 1px solid #ffc107;
}
.indicador-suma i {
font-size: 1rem;
}
/* Indicador de Modo Edición/Verificación */
.indicador-edicion {
padding: 15px 20px;
border-radius: 8px;
margin-bottom: 20px;
font-weight: 600;
font-size: 0.95rem;
display: flex;
align-items: center;
gap: 10px;
}
.indicador-edicion i {
font-size: 1.3rem;
}
.indicador-verificado {
background: linear-gradient(135deg, #fff3cd 0%, #ffeeba 100%);
color: #856404;
border: 2px solid #ffc107;
}
.indicador-observado {
background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
color: #721c24;
border: 2px solid #dc3545;
}
/* =============================================
REGISTRO DE ACTAS - Layout con Visor de Imagen
============================================= */
.acta-layout-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 20px;
align-items: stretch;
}
/* Layout expandido - imagen ocupa más espacio */
.acta-layout-grid.imagen-expandida {
grid-template-columns: 60% 40%;
}
.acta-imagen-panel {
display: flex;
flex-direction: column;
}
.acta-imagen-panel .seccion-acta {
flex: 1;
display: flex;
flex-direction: column;
}
.acta-imagen-panel .imagen-acta-container {
flex: 1;
display: flex;
flex-direction: column;
}
.acta-votos-panel {
min-width: 0;
}
.imagen-acta-container {
padding: 15px;
}
/* Visor de imagen con zoom integrado */
.imagen-acta-preview {
width: 100%;
flex: 1;
min-height: 400px;
border: 2px dashed #dee2e6;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
background: #f8f9fa;
overflow: hidden;
position: relative;
cursor: default;
}
.imagen-acta-preview.has-image {
cursor: grab;
background: #1a1a1a;
border-style: solid;
border-color: var(--primary-color);
}
.acta-layout-grid.imagen-expandida .imagen-acta-preview {
min-height: 500px;
}
.imagen-acta-preview.dragging {
cursor: grabbing;
}
.imagen-acta-preview img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
transform-origin: center center;
transition: transform 0.1s ease;
user-select: none;
pointer-events: none;
}
.placeholder-imagen {
text-align: center;
color: #6c757d;
}
.placeholder-imagen i {
font-size: 4rem;
margin-bottom: 15px;
color: #dee2e6;
}
.placeholder-imagen p {
margin: 0;
font-size: 0.9rem;
}
/* Controles de imagen flotantes */
.imagen-acta-controles-flotantes {
position: absolute;
top: 10px;
right: 10px;
display: flex;
flex-direction: column;
gap: 5px;
z-index: 10;
}
.imagen-acta-controles-flotantes .btn-control {
width: 36px;
height: 36px;
border-radius: 6px;
border: none;
background: rgba(0, 0, 0, 0.6);
color: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
font-size: 14px;
}
.imagen-acta-controles-flotantes .btn-control:hover {
background: var(--primary-color);
transform: scale(1.1);
}
.imagen-acta-controles-flotantes .btn-control.btn-danger:hover {
background: var(--danger-color);
}
/* Indicador de zoom */
.zoom-indicator {
position: absolute;
bottom: 10px;
left: 10px;
background: rgba(0, 0, 0, 0.6);
color: white;
padding: 4px 10px;
border-radius: 4px;
font-size: 12px;
z-index: 10;
}
.imagen-acta-controles {
display: flex;
gap: 10px;
margin-top: 15px;
flex-wrap: wrap;
justify-content: center;
}
.imagen-acta-controles .btn {
flex: 1;
min-width: 80px;
}
/* Visor oculto - solo tabla visible */
.acta-layout-grid.visor-oculto {
grid-template-columns: 1fr;
}
.acta-layout-grid.visor-oculto .acta-imagen-panel {
display: none;
}
/* =============================================
DASHBOARD - CHARTS
============================================= */
.charts-grid {
width: 100%;
}
.chart-single-container {
width: 100%;
min-height: 400px;
background: white;
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
/* Gráfico VERTICAL con logos */
.votos-chart-vertical {
padding: 15px 0;
}
.chart-bars-container {
display: flex;
justify-content: center;
align-items: flex-end;
gap: 8px;
min-height: 280px;
padding: 15px 10px;
background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
border-radius: 12px;
overflow-x: auto;
}
.chart-column {
display: flex;
flex-direction: column;
align-items: center;
min-width: 65px;
max-width: 90px;
flex: 1;
}
.bar-value {
font-size: 11px;
font-weight: 700;
color: #333;
margin-bottom: 2px;
white-space: nowrap;
}
.bar-percentage {
font-size: 12px;
font-weight: 600;
color: #667eea;
margin-bottom: 5px;
}
.bars-area {
width: 100%;
height: 180px;
display: flex;
justify-content: center;
align-items: flex-end;
gap: 4px;
}
.vertical-bar {
width: 35px;
min-height: 8px;
border-radius: 6px 6px 0 0;
border: 2px solid;
border-bottom: none;
transition: height 0.6s ease;
box-shadow: 0 -2px 6px rgba(0,0,0,0.15);
cursor: pointer;
}
.vertical-bar:hover {
opacity: 0.85;
transform: scaleX(1.05);
}
.vertical-bar.secondary {
width: 28px;
}
.bar-logo {
width: 45px;
height: 45px;
margin-top: 10px;
border-radius: 8px;
overflow: hidden;
background: white;
box-shadow: 0 2px 8px rgba(0,0,0,0.12);
display: flex;
align-items: center;
justify-content: center;
}
.bar-logo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.bar-logo .logo-fallback {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
font-size: 14px;
font-weight: bold;
}
/* Leyenda del gráfico */
.chart-legend {
display: flex;
justify-content: center;
gap: 30px;
margin-top: 20px;
padding: 15px;
background: #f8f9fa;
border-radius: 8px;
}
.legend-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: #555;
}
.legend-color {
width: 20px;
height: 20px;
border-radius: 4px;
}
/* Totales */
.chart-totales {
text-align: center;
margin-top: 15px;
padding: 12px;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
border-radius: 8px;
font-size: 14px;
}
.chart-totales .ms-3 {
margin-left: 15px;
}
.charts-wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 20px;
}
/* Responsive gráfico vertical */
@media (max-width: 768px) {
.chart-bars-container {
min-height: 220px;
gap: 5px;
padding: 10px 5px;
}
.chart-column {
min-width: 50px;
}
.bars-area {
height: 140px;
}
.vertical-bar {
width: 28px;
}
.vertical-bar.secondary {
width: 22px;
}
.bar-logo {
width: 35px;
height: 35px;
}
.bar-value {
font-size: 10px;
}
.bar-percentage {
font-size: 10px;
}
.chart-legend {
flex-direction: column;
align-items: center;
gap: 10px;
}
}
.chart-card {
background: white;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.chart-card:hover {
transform: translateY(-3px);
box-shadow: 0 5px 20px rgba(0,0,0,0.12);
}
.chart-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 12px 15px;
}
.chart-title {
font-weight: 600;
font-size: 14px;
display: block;
}
.chart-subtitle {
font-size: 11px;
opacity: 0.85;
display: block;
margin-top: 3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.chart-body {
padding: 15px;
height: 280px;
position: relative;
}
/* Responsive charts */
@media (max-width: 992px) {
.charts-wrapper {
grid-template-columns: 1fr;
}
.chart-body {
height: 250px;
}
}
@media (max-width: 576px) {
.charts-wrapper {
grid-template-columns: 1fr;
}
.chart-card {
margin-bottom: 15px;
}
.chart-body {
height: 220px;
}
}
/* Botón para mostrar visor cuando está oculto */
.btn-mostrar-visor {
position: fixed;
bottom: 20px;
left: 20px;
z-index: 100;
padding: 12px 20px;
background: var(--primary-color);
color: white;
border: none;
border-radius: 30px;
cursor: pointer;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
transition: all 0.3s;
}
.btn-mostrar-visor:hover {
background: var(--primary-dark);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.btn-mostrar-visor.hidden {
display: none;
}
/* Responsive para layout de acta */
@media (max-width: 1400px) {
.acta-layout-grid {
grid-template-columns: 45% 55%;
}
.imagen-acta-preview {
height: 550px;
}
}
@media (max-width: 1200px) {
.acta-layout-grid {
grid-template-columns: 1fr;
}
.acta-layout-grid.imagen-expandida {
grid-template-columns: 1fr;
}
.imagen-acta-preview {
height: 450px;
}
}
@media (max-width: 992px) {
.acta-imagen-panel {
position: relative;
top: 0;
}
.imagen-acta-preview {
height: 400px;
}
}
/* =============================================
DASHBOARD - ESTADÍSTICAS
============================================= */
/* Badge de porcentaje en header */
.badge-porcentaje {
background: var(--primary-color);
color: white;
padding: 5px 15px;
border-radius: 20px;
font-weight: 600;
font-size: 14px;
}
/* Barra de progreso general */
.progress-container {
padding: 10px 0;
}
.progress-bar-wrapper {
background: #e9ecef;
border-radius: 10px;
height: 30px;
overflow: hidden;
position: relative;
}
.progress-bar {
height: 100%;
border-radius: 10px;
transition: width 0.6s ease;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}
.progress-bar.bg-success {
background: linear-gradient(90deg, #28a745, #20c997);
}
.progress-bar.bg-info {
background: linear-gradient(90deg, #17a2b8, #6f42c1);
}
.progress-bar.bg-warning {
background: linear-gradient(90deg, #ffc107, #fd7e14);
}
.progress-bar.bg-danger {
background: linear-gradient(90deg, #dc3545, #e83e8c);
}
.progress-text {
color: white;
font-weight: 600;
font-size: 14px;
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.progress-labels {
display: flex;
justify-content: space-around;
margin-top: 15px;
flex-wrap: wrap;
gap: 10px;
}
.progress-labels span {
display: flex;
align-items: center;
gap: 5px;
font-size: 14px;
color: var(--gray-color);
}
.progress-labels i {
font-size: 12px;
}
.text-success { color: #28a745 !important; }
.text-primary { color: var(--primary-color) !important; }
.text-info { color: #17a2b8 !important; }
/* Mini barras de progreso en tabla */
.progress-mini {
position: relative;
background: #e9ecef;
border-radius: 5px;
height: 22px;
overflow: hidden;
}
.progress-bar-mini {
height: 100%;
border-radius: 5px;
transition: width 0.4s ease;
}
.progress-bar-mini.bg-success {
background: linear-gradient(90deg, #28a745, #20c997);
}
.progress-bar-mini.bg-info {
background: linear-gradient(90deg, #17a2b8, #6f42c1);
}
.progress-bar-mini.bg-warning {
background: linear-gradient(90deg, #ffc107, #fd7e14);
}
.progress-bar-mini.bg-danger {
background: linear-gradient(90deg, #dc3545, #e83e8c);
}
.progress-label-mini {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 12px;
font-weight: 600;
color: #333;
}
/* Badges */
.badge {
display: inline-block;
padding: 4px 10px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
color: white;
}
.badge.bg-success { background-color: #28a745; }
.badge.bg-primary { background-color: var(--primary-color); }
.badge.bg-danger { background-color: #dc3545; }
.badge.bg-secondary { background-color: #6c757d; }
.badge.bg-warning { background-color: #ffc107; color: #333; }
/* Votos por partido */
.votos-partido-container {
max-height: 500px;
overflow-y: auto;
}
.votos-partido-lista {
display: flex;
flex-direction: column;
gap: 12px;
}
.partido-voto-item {
display: grid;
grid-template-columns: 200px 1fr 120px;
align-items: center;
gap: 15px;
padding: 10px;
background: #f8f9fa;
border-radius: 8px;
transition: all 0.2s ease;
}
.partido-voto-item:hover {
background: #e9ecef;
transform: translateX(5px);
}
.partido-info {
display: flex;
align-items: center;
gap: 10px;
}
.partido-logo {
width: 40px;
height: 40px;
border-radius: 8px;
overflow: hidden;
background: white;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.partido-logo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.logo-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
font-size: 18px;
}
.partido-nombre {
font-weight: 500;
font-size: 13px;
color: var(--dark-color);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.partido-barra-container {
height: 20px;
background: #e9ecef;
border-radius: 10px;
overflow: hidden;
}
.partido-barra {
height: 100%;
border-radius: 10px;
transition: width 0.6s ease;
}
/* Colores para barras de partidos */
.partido-barra.color-0 { background: linear-gradient(90deg, #3498db, #2980b9); }
.partido-barra.color-1 { background: linear-gradient(90deg, #e74c3c, #c0392b); }
.partido-barra.color-2 { background: linear-gradient(90deg, #2ecc71, #27ae60); }
.partido-barra.color-3 { background: linear-gradient(90deg, #9b59b6, #8e44ad); }
.partido-barra.color-4 { background: linear-gradient(90deg, #f39c12, #e67e22); }
.partido-barra.color-5 { background: linear-gradient(90deg, #1abc9c, #16a085); }
.partido-barra.color-6 { background: linear-gradient(90deg, #34495e, #2c3e50); }
.partido-barra.color-7 { background: linear-gradient(90deg, #e91e63, #c2185b); }
.partido-barra.color-8 { background: linear-gradient(90deg, #00bcd4, #0097a7); }
.partido-barra.color-9 { background: linear-gradient(90deg, #ff5722, #e64a19); }
.partido-votos {
text-align: right;
font-weight: 600;
}
.votos-principal {
font-size: 16px;
color: var(--dark-color);
}
.votos-secundario {
font-size: 12px;
color: var(--gray-color);
margin-left: 5px;
}
/* Resumen votos especiales */
.resumen-votos-especiales {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #e9ecef;
}
.votos-especiales-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
.voto-especial-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
padding: 15px;
border-radius: 10px;
background: #f8f9fa;
transition: transform 0.2s ease;
}
.voto-especial-card:hover {
transform: translateY(-3px);
}
.voto-especial-card i {
font-size: 24px;
}
.voto-especial-card .label {
font-size: 12px;
color: var(--gray-color);
text-transform: uppercase;
}
.voto-especial-card .valor {
font-size: 20px;
font-weight: 700;
}
.voto-especial-card.blancos {
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
}
.voto-especial-card.blancos i { color: #6c757d; }
.voto-especial-card.blancos .valor { color: #495057; }
.voto-especial-card.nulos {
background: linear-gradient(135deg, #fff5f5, #fee);
}
.voto-especial-card.nulos i { color: #dc3545; }
.voto-especial-card.nulos .valor { color: #dc3545; }
.voto-especial-card.impugnados {
background: linear-gradient(135deg, #fff8e1, #ffecb3);
}
.voto-especial-card.impugnados i { color: #f57c00; }
.voto-especial-card.impugnados .valor { color: #e65100; }
.voto-especial-card.emitidos {
background: linear-gradient(135deg, #e3f2fd, #bbdefb);
}
.voto-especial-card.emitidos i { color: var(--primary-color); }
.voto-especial-card.emitidos .valor { color: var(--primary-dark); }
/* Info grid para sesión de usuario */
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
}
.info-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px;
background: #f8f9fa;
border-radius: 8px;
}
.info-item i {
font-size: 20px;
color: var(--primary-color);
width: 30px;
text-align: center;
}
.info-item div {
display: flex;
flex-direction: column;
}
.info-item strong {
font-size: 11px;
color: var(--gray-color);
text-transform: uppercase;
}
.info-item span {
font-size: 14px;
color: var(--dark-color);
}
/* Panel actions */
.panel-actions {
display: flex;
gap: 10px;
}
.form-select-sm {
padding: 5px 30px 5px 10px;
font-size: 13px;
border: 1px solid #ddd;
border-radius: 6px;
background: white;
cursor: pointer;
}
.mt-3 {
margin-top: 1rem;
}
.py-4 {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.py-5 {
padding-top: 3rem;
padding-bottom: 3rem;
}
.mb-3 {
margin-bottom: 1rem;
}
/* Responsive dashboard */
@media (max-width: 992px) {
.partido-voto-item {
grid-template-columns: 150px 1fr 80px;
}
.votos-especiales-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.partido-voto-item {
grid-template-columns: 1fr;
text-align: center;
}
.partido-info {
justify-content: center;
}
.partido-votos {
text-align: center;
}
.progress-labels {
flex-direction: column;
align-items: center;
}
}
@media (max-width: 576px) {
.votos-especiales-grid {
grid-template-columns: 1fr 1fr;
}
.info-grid {
grid-template-columns: 1fr;
}
}
/* =============================================
REPORTES - RESULTADOS ELECTORALES
============================================= */
/* Filtros */
.filtros-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
}
.filtros-actions {
display: flex;
gap: 10px;
margin-top: 20px;
justify-content: flex-end;
}
/* Avance */
.avance-info {
display: flex;
flex-wrap: wrap;
gap: 30px;
margin-bottom: 15px;
}
.avance-item {
display: flex;
flex-direction: column;
}
.avance-label {
font-size: 12px;
color: var(--gray-color);
text-transform: uppercase;
}
.avance-valor {
font-size: 20px;
font-weight: 700;
color: var(--dark-color);
}
.badge-avance {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
padding: 8px 20px;
border-radius: 20px;
font-weight: 700;
font-size: 16px;
}
.progress-avance {
background: #e9ecef;
border-radius: 10px;
height: 25px;
overflow: hidden;
}
.progress-bar-avance {
height: 100%;
background: linear-gradient(90deg, #667eea, #764ba2);
border-radius: 10px;
transition: width 0.6s ease;
}
/* Resultados con barras VERTICALES */
.resultados-vertical {
padding: 15px 0;
}
.resultados-barras-container {
display: flex;
justify-content: center;
align-items: flex-end;
gap: 10px;
min-height: 320px;
padding: 20px 15px;
background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
border-radius: 12px;
overflow-x: auto;
}
.resultado-columna {
display: flex;
flex-direction: column;
align-items: center;
min-width: 70px;
max-width: 100px;
flex: 1;
cursor: pointer;
transition: transform 0.2s ease;
}
.resultado-columna:hover {
transform: scale(1.05);
}
.resultado-votos-top {
font-size: 12px;
font-weight: 700;
color: #333;
margin-bottom: 3px;
white-space: nowrap;
}
.resultado-porcentaje-top {
font-size: 13px;
font-weight: 600;
color: #667eea;
margin-bottom: 8px;
}
.resultado-barra-area {
width: 100%;
height: 200px;
display: flex;
justify-content: center;
align-items: flex-end;
}
.resultado-barra-vertical {
width: 40px;
min-height: 10px;
border-radius: 8px 8px 0 0;
border: 2px solid;
border-bottom: none;
transition: height 0.6s ease;
box-shadow: 0 -3px 8px rgba(0,0,0,0.15);
}
.resultado-barra-vertical:hover {
opacity: 0.85;
}
.resultado-logo-bottom {
width: 50px;
height: 50px;
margin-top: 12px;
border-radius: 10px;
overflow: hidden;
background: white;
box-shadow: 0 2px 8px rgba(0,0,0,0.12);
display: flex;
align-items: center;
justify-content: center;
}
.resultado-logo-bottom img {
width: 100%;
height: 100%;
object-fit: cover;
}
.resultado-logo-bottom .logo-fallback {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
font-size: 14px;
font-weight: bold;
}
.resultado-posicion-bottom {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
border-radius: 50%;
font-weight: 700;
font-size: 11px;
margin-top: 8px;
}
.resultados-total {
text-align: center;
margin-top: 15px;
padding: 12px;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
border-radius: 8px;
font-size: 14px;
}
/* Responsive resultados verticales */
@media (max-width: 768px) {
.resultados-barras-container {
min-height: 250px;
gap: 6px;
padding: 15px 10px;
}
.resultado-columna {
min-width: 55px;
}
.resultado-barra-area {
height: 150px;
}
.resultado-barra-vertical {
width: 30px;
}
.resultado-logo-bottom {
width: 40px;
height: 40px;
}
.resultado-votos-top {
font-size: 10px;
}
.resultado-porcentaje-top {
font-size: 11px;
}
}
/* Votos resumen */
.votos-resumen-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
.voto-resumen-card {
display: flex;
align-items: center;
gap: 15px;
padding: 20px;
border-radius: 12px;
background: #f8f9fa;
}
.voto-resumen-card i {
font-size: 32px;
}
.voto-resumen-card .voto-info {
display: flex;
flex-direction: column;
}
.voto-resumen-card .voto-cantidad {
font-size: 24px;
font-weight: 700;
}
.voto-resumen-card .voto-label {
font-size: 12px;
color: var(--gray-color);
text-transform: uppercase;
}
.voto-resumen-card .voto-porcentaje {
font-size: 14px;
font-weight: 600;
margin-top: 5px;
}
.voto-resumen-card.validos {
background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
}
.voto-resumen-card.validos i { color: #2e7d32; }
.voto-resumen-card.validos .voto-cantidad { color: #1b5e20; }
.voto-resumen-card.validos .voto-porcentaje { color: #388e3c; }
.voto-resumen-card.blancos {
background: linear-gradient(135deg, #f5f5f5, #e0e0e0);
}
.voto-resumen-card.blancos i { color: #616161; }
.voto-resumen-card.blancos .voto-cantidad { color: #424242; }
.voto-resumen-card.blancos .voto-porcentaje { color: #757575; }
.voto-resumen-card.nulos {
background: linear-gradient(135deg, #ffebee, #ffcdd2);
}
.voto-resumen-card.nulos i { color: #c62828; }
.voto-resumen-card.nulos .voto-cantidad { color: #b71c1c; }
.voto-resumen-card.nulos .voto-porcentaje { color: #d32f2f; }
.voto-resumen-card.impugnados {
background: linear-gradient(135deg, #fff3e0, #ffe0b2);
}
.voto-resumen-card.impugnados i { color: #e65100; }
.voto-resumen-card.impugnados .voto-cantidad { color: #bf360c; }
.voto-resumen-card.impugnados .voto-porcentaje { color: #f57c00; }
/* Botones vista */
.btn-outline {
background: transparent;
border: 2px solid var(--primary-color);
color: var(--primary-color);
padding: 6px 12px;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-outline:hover,
.btn-outline.active {
background: var(--primary-color);
color: white;
}
/* Tabla mini */
.logo-mini {
width: 40px;
height: 40px;
border-radius: 8px;
overflow: hidden;
background: white;
box-shadow: 0 1px 4px rgba(0,0,0,0.1);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
.logo-mini img {
width: 100%;
height: 100%;
object-fit: cover;
}
.logo-fallback-mini {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
font-size: 12px;
font-weight: bold;
}
.mini-barra-wrapper {
background: #e9ecef;
border-radius: 6px;
height: 18px;
overflow: hidden;
}
.mini-barra {
height: 100%;
border-radius: 6px;
transition: width 0.4s ease;
}
.badge-porcentaje {
background: var(--primary-color);
color: white;
padding: 4px 10px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
}
/* Responsive reportes */
@media (max-width: 992px) {
.resultado-item {
grid-template-columns: 35px 50px 1fr 100px;
}
.votos-resumen-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.resultado-item {
grid-template-columns: 1fr;
text-align: center;
}
.resultado-posicion {
margin: 0 auto;
}
.resultado-logo {
margin: 0 auto;
}
.resultado-datos {
align-items: center;
}
.avance-info {
justify-content: center;
}
.filtros-actions {
flex-direction: column;
}
}
@media (max-width: 576px) {
.votos-resumen-grid {
grid-template-columns: 1fr;
}
.voto-resumen-card {
justify-content: center;
}
}
/* =============================================
ESTADÍSTICAS ELECTORALES
============================================= */
/* KPIs Dashboard */
.kpis-dashboard {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.kpi-card {
display: flex;
align-items: center;
gap: 15px;
padding: 20px;
border-radius: 16px;
color: white;
position: relative;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.kpi-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
.kpi-card::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 100px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
transform: translate(30%, -30%);
}
.kpi-card.gradient-blue { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.kpi-card.gradient-green { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); }
.kpi-card.gradient-orange { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.kpi-card.gradient-red { background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%); }
.kpi-card.gradient-purple { background: linear-gradient(135deg, #8E2DE2 0%, #4A00E0 100%); }
.kpi-card.gradient-teal { background: linear-gradient(135deg, #00c6fb 0%, #005bea 100%); }
/* =============================================
TEMATIZACIÓN POR ORGANIZACIÓN (TENANT)
Sobreescriben los azules fijos cuando se ha seteado
una organización en sesión. Las variables --org-*
se inyectan desde sidebar.php (vía