* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', Roboto, sans-serif; background: #f5f7f5; color: #2c3e2f; }

/* LOGIN */
.login-container { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #2d6a4f, #40916c); }
.login-card { background: white; padding: 2rem; border-radius: 20px; width: 400px; text-align: center; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.login-card h2 { color: #2d6a4f; margin-bottom: 10px; }
.login-card input, .login-card select { width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ddd; border-radius: 8px; }
.login-card button { width: 100%; padding: 10px; background: #2d6a4f; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; }
.qr-code { width: 130px; height: 130px; margin: 10px auto; background: white; display: flex; align-items: center; justify-content: center; border-radius: 12px; padding: 10px; }

/* DASHBOARD */
.dashboard { display: none; min-height: 100vh; flex-direction: column; }
.main-header { background: white; padding: 15px 30px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; border-bottom: 1px solid #e0e8e0; }
.logo h1 { font-size: 1.5rem; color: #2d6a4f; }
.logo p { font-size: 0.7rem; color: #6c7a6c; }
.user-info { display: flex; align-items: center; gap: 20px; }
.btn-logout { background: #dc3545; color: white; border: none; padding: 6px 15px; border-radius: 20px; cursor: pointer; }

/* FASES */
.fase-selector { background: #f8faf8; padding: 10px 30px; display: flex; gap: 15px; border-bottom: 2px solid #e0e8e0; justify-content: center; flex-wrap: wrap; }
.fase-btn { background: transparent; border: none; padding: 12px 30px; border-radius: 30px; cursor: pointer; font-weight: 600; font-size: 14px; transition: all 0.3s; }
.fase-btn:hover { background: #e8f5e9; }
.fase-btn.activo { color: white; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.fase-btn.fase-1 { border-bottom: 3px solid #ff9800; }
.fase-btn.fase-2 { border-bottom: 3px solid #2196f3; }
.fase-btn.fase-3 { border-bottom: 3px solid #4caf50; }
.fase-btn.fase-1.activo { background: #ff9800; }
.fase-btn.fase-2.activo { background: #2196f3; }
.fase-btn.fase-3.activo { background: #4caf50; }

/* NAV */
.nav-menu { background: #f8faf8; padding: 10px 30px; display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid #e0e8e0; min-height: 60px; }
.nav-menu button { background: transparent; border: none; color: #4a5b4a; padding: 8px 20px; border-radius: 25px; cursor: pointer; font-weight: 500; }
.nav-menu button:hover { background: #e8f5e9; color: #2d6a4f; }
.nav-menu button.active { background: #2d6a4f; color: white; }

/* CONTENIDO */
.main-content { flex: 1; padding: 25px 30px; background: #f5f7f5; }
.card { background: white; border-radius: 16px; padding: 22px; margin-bottom: 25px; border: 1px solid #e8f0e8; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.card h2 { color: #2d6a4f; margin-bottom: 8px; }
.card h3 { color: #3a5a3a; margin-bottom: 15px; }

/* FORMULARIOS */
.form-row { display: flex; gap: 15px; flex-wrap: wrap; margin-bottom: 15px; align-items: flex-end; }
.form-group { flex: 1; min-width: 120px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: 600; font-size: 12px; color: #6c7a6c; text-transform: uppercase; }
.form-group input, .form-group select { width: 100%; padding: 10px; border: 1px solid #d0e0d0; border-radius: 10px; }

/* BOTONES */
button { background: #2d6a4f; color: white; border: none; padding: 10px 24px; border-radius: 30px; cursor: pointer; font-weight: 600; }
button:hover { background: #1b4d3a; transform: translateY(-1px); }
button.btn-secondary { background: #e8f5e9; color: #2d6a4f; border: 1px solid #c8e0c8; }
button.btn-secondary:hover { background: #d0e8d0; }
button.btn-danger { background: #dc3545; }
button.btn-danger:hover { background: #c82333; }
button.btn-primary { background: #2d6a4f; }
button.btn-warning { background: #ff9800; }
button.btn-warning:hover { background: #e68900; }

/* TABLAS */
.table-wrapper { overflow-x: auto; overflow-y: auto; max-height: 500px; border-radius: 12px; border: 1px solid #e8f0e8; position: relative; }
.data-table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 800px; }
.data-table th { background: #f0f5f0; color: #2d6a4f; padding: 10px 6px; border-bottom: 2px solid #d0e4d0; position: sticky; top: 0; z-index: 10; white-space: nowrap; }
.data-table td { padding: 8px 6px; border-bottom: 1px solid #e8f0e8; }
.data-table input, .data-table select { width: 100%; padding: 4px 6px; border: 1px solid #d0e0d0; border-radius: 6px; font-size: 11px; }
.data-table input[type="number"] { width: 60px; text-align: center; }

/* BADGES */
.badge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 10px; font-weight: bold; white-space: nowrap; text-align: center; }
.badge-residencial { background: #e8f5e9; color: #2d6a4f; }
.badge-comercial { background: #fff3e0; color: #e65100; }
.badge-industrial { background: #e3f2fd; color: #1565c0; }
.badge-parqueadero { background: #f3e5f5; color: #6a1b9a; }
.badge-areacomun { background: #fce4ec; color: #c62828; }
.badge-casa { background: #e8f5e9; color: #2d6a4f; }

/* SUMMARY */
.summary-bar { background: #eef5ee; padding: 12px 18px; border-radius: 12px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.summary-bar.alerta { background: #ffcdd2; color: #c62828; }
.summary-bar.ok { background: #c8e6c9; color: #2d6a4f; }

/* MODAL */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); justify-content: center; align-items: center; z-index: 9999; }
.modal-content { background: white; border-radius: 20px; padding: 25px; max-width: 500px; width: 90%; text-align: center; max-height: 80vh; overflow-y: auto; position: relative; z-index: 10000; box-shadow: 0 10px 40px rgba(0,0,0,0.3); }

/* PROGRESS */
.progress-bar { background: #e0e0e0; border-radius: 10px; height: 20px; overflow: hidden; }

/* QR */
.qr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; margin-top: 15px; }
.qr-card { background: white; border: 1px solid #e0e8e0; border-radius: 12px; padding: 10px; text-align: center; cursor: pointer; transition: transform 0.2s; }
.qr-card:hover { transform: scale(1.02); background: #f0f5f0; }

/* RESPONSIVE */
@media (max-width: 768px) {
    .main-header, .nav-menu, .main-content, .fase-selector { padding-left: 15px; padding-right: 15px; }
    .form-row { flex-direction: column; }
    .data-table th, .data-table td { padding: 4px; font-size: 10px; }
    .fase-btn { padding: 8px 16px; font-size: 12px; }
}

.orden-fila { transition: background 0.2s; cursor: grab; }
.orden-fila:hover { background: #e8f5e9 !important; }
.orden-fila.dragging { opacity: 0.5; }

.fase-indicador { position: fixed; bottom: 20px; right: 20px; background: rgba(0,0,0,0.7); color: white; padding: 8px 16px; border-radius: 20px; font-size: 12px; font-weight: bold; z-index: 100; }

.votacion-timer{width:100%;box-sizing:border-box;text-align:center;font-size:64px;font-weight:900;letter-spacing:2px;padding:22px 15px;margin:12px 0;border-radius:18px;background:#111;color:#fff;border:4px solid #333;box-shadow:0 6px 20px rgba(0,0,0,.25);line-height:1.05}.votacion-timer.timer-urgente{animation:timerParpadeo .8s infinite}.votacion-timer::after{content:' TIEMPO RESTANTE';display:block;font-size:16px;letter-spacing:1px;font-weight:700;margin-top:8px;opacity:.8}@keyframes timerParpadeo{50%{opacity:.45}}

/* GRÁFICOS DE RESULTADOS DE VOTACIÓN */
.grafico-votacion{margin:15px 0;padding:15px;border:1px solid #dfe7df;border-radius:12px;background:#fff;page-break-inside:avoid;break-inside:avoid}
.grafico-titulo{font-weight:800;font-size:15px;margin-bottom:4px;color:#2d6a4f}
.grafico-subtitulo{font-size:11px;color:#666;margin-bottom:10px}
.grafico-cuerpo{display:flex;align-items:center;gap:25px;flex-wrap:wrap}
.grafico-svg{width:220px;flex:0 0 220px}
.grafico-leyenda{flex:1;min-width:260px}
.grafico-leyenda-item{display:flex;align-items:center;gap:7px;margin:7px 0;padding-bottom:6px;border-bottom:1px dotted #ddd;font-size:12px}
.grafico-numero{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:#f0f4f0;font-size:10px;font-weight:800;flex:0 0 22px}
.grafico-color{width:13px;height:13px;border-radius:3px;flex:0 0 13px}
.grafico-votos{font-size:18px;color:#2d6a4f;margin-left:auto;white-space:nowrap}
.grafico-mayor{margin-top:10px;padding:9px 11px;background:#f0f7f1;border-left:4px solid #2d6a4f;font-size:12px}
@media (max-width:768px){.grafico-cuerpo{gap:10px}.grafico-svg{margin:auto}.grafico-leyenda{min-width:100%}}

/* ===== Homologación visual de controles de votación ===== */
.votacion-config-row,
.form-row.votacion-config-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 15px;
    align-items: end;
}

.votacion-config-row .form-group,
.form-row.votacion-config-row .form-group {
    min-width: 0;
}

.votacion-opcion-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 170px;
    gap: 15px;
    align-items: end;
    margin: 10px 0;
    padding: 10px 12px;
    border: 1px solid #e1e9e1;
    border-radius: 10px;
    background: #fff;
    box-sizing: border-box;
}

.votacion-opcion-nombre,
.votacion-opcion-votos {
    min-width: 0;
}

.votacion-opcion-row label,
.votacion-presupuesto-row label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    font-size: 12px;
    color: #6c7a6c;
    text-transform: uppercase;
}

.votacion-opcion-row .op-nombre {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid #d0e0d0;
    border-radius: 10px;
}

.votacion-opcion-votos input[type="number"] {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    text-align: center;
    font-size: 18px;
    padding: 10px;
}

.votacion-opcion-votos strong {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 43px;
    box-sizing: border-box;
}

.votacion-presupuesto-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 170px;
    gap: 15px;
    align-items: end;
    margin: 10px 0;
    padding: 10px 12px;
    border: 1px solid #e1e9e1;
    border-radius: 10px;
    background: #fff;
    box-sizing: border-box;
}

.votacion-presupuesto-row input {
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 760px) {
    .votacion-config-row,
    .form-row.votacion-config-row,
    .votacion-opcion-row,
    .votacion-presupuesto-row {
        grid-template-columns: 1fr;
    }
}