<?php
defined('BASEPATH') OR exit('No direct script access allowed');
//if ($this->session->userdata('INSTANCIA' . $instancia->NUM_ORDEN)) {
	//   echo 'ya has votado esta instancia';
	//   exit;
	//}
	?>
<?php $this->load->view('template/head.php'); ?>
<?php if ($tipo_lista === 'LVP'): ?>
<style>
[type=checkbox] {
    position: absolute;
}

label {
    cursor: pointer
}
</style>
<?php else: ?>
<style>
label {
    cursor: auto !important
}
</style>
<?php endif; ?>

<script>
function disableBack() {
    window.history.forward()
}
window.onload = disableBack();
window.onpageshow = function(evt) {
    if (evt.persisted)
        disableBack();
}
</script>
<?php
	$data_view_header = [];
	if ($empresa) {
		$data_view_header['nombre_empresa'] = $empresa;
	}
	$this->load->view('template/header.php', $data_view_header);
	$form_data = ['name'       => 'crear_form',
	'id'         => 'crear-form',
	'class'      => 'create-form',
	'novalidate' => '',
];


//  echo '<pre>';
//  var_dump($agencia_participante);
?>
<div class="loader" style="position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    color: rgb(255, 255, 255);
    background:url(<?php echo base_url().'uploads/cargando.gif' ?>) 50% 50% no-repeat rgb(255, 255, 255);"></div>
<main class="votacion">
    <div id="url-timer" style="display: none">votacion/Votacion_listas/timer_votacion</div>

    <!--<div class="loader loader-default is-active" data-text="Procesando..." data-blink style="display: none;"></div>-->
    <section class="row contenedor-titulo votacion-titulo">
        <h1><?= $instancia->TEX_NOMINS ?></h1>


    </section>
    <section id="tarjeton lista">

        <div class="row contenedor-info-votacion">
            <div id="informacion-votacion" class="container info-votacion">
                <div class="col-lg-4">
                    <!-- Reloj -->
                    <h3 id="display"></h3>
                </div>
                <div class="col-lg-4">
                    <?php if ($tipo_lista === 'LVP'): ?>
                    <?php if ($agencia_participante->NUM_MUSEAG > 0): ?>
                    <p class="texto-max-candidatos">Puedes seleccionar hasta
                        <span><?= $agencia_participante->NUM_MUSEAG ?></span>
                        candidato<?= ((int) $agencia_participante->NUM_MUSEAG <= 1) ? '' : 's' ?>
                    </p>
                    <?php else: ?>
                    <p class="texto-max-candidatos">Puedes seleccionar hasta
                        <span><?= ($max_candidatos_lista > 0)?$max_candidatos_lista:$instancia->NUM_MUSEIN ?></span>
                        candidato<?= ((int) $instancia->NUM_MUSEIN <= 1) ? '' : 's' ?>
                    </p>
                    <?php endif; ?>
                    <?php endif; ?>
                </div>
            </div>

            <button class="btn btn-default boton-regresar">
                <a href="<?= base_url('votacion/Votacion_listas') ?>" style="color: white;">Regresar</a>
            </button>
        </div>




        <?php //
 $contador = 0;
$numero_grid = $numero_candidatos_grid;
$style_grid = ''; 
$tletra= "1.2em;";
if($numero_candidatos_grid == 8) {
      
	$style_grid= "grid-template-columns: repeat($numero_grid,134px);";
	  $tletra= "10px;";

	//$style_grid= " grid-template-columns:r-label2epeat($numero_grid, 144px);";

} elseif ($numero_candidatos_grid == 6) {
	//$style_grid="grid-template-columns:repeat($numero_grid, 198px);";
	$style_grid="grid-template-columns:repeat($numero_grid, 188px);";
	$tletra= "12px";
} elseif ($numero_candidatos_grid == 7) {
	//$style_grid="grid-template-columns:repeat($numero_grid, 198px);";
	$style_grid="grid-template-columns:repeat($numero_grid, 155px);";
	$tletra= "9px;";
}

elseif ($numero_candidatos_grid == 4) {
	$style_grid="grid-template-columns:repeat($numero_grid, 278px);";
}elseif ($numero_candidatos_grid == 3) {
	$style_grid=" grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));";
} else {
	$style_grid="grid-template-columns:repeat($numero_grid, 220px);";
	$tletra= "13px;";
}


if($this->agent->is_mobile()){
	//$style_grid="grid-template-columns:repeat(2, 160px);";
	$style_grid="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));";
}




?>

        <?= form_open(base_url('votacion/votacion_listas/proceso'), $form_data); ?>
        <?= form_hidden('NUM_ORDEN', $instancia->NUM_ORDEN) ?>
        <?= form_hidden('ID_INSTAN', $instancia->ID_INSTAN) ?>
        <?= form_hidden('ID_LISTA', $id_lista) ?>

        <?php if (isset($candidato_voto_lcc)): ?>
        <?= form_hidden('ID_CANDID_LCL', $candidato_voto_lcc->ID_CANDID) ?>

        <div class="candidatoselec">
            <label class="voto-area" style=" margin: 0px 0;">
                        
                  <div class="profile-header-container"
                  style="
    background: #ffffff;
    box-shadow: 1px 1px 3px rgb(0 0 0 / 10%);
    transition: all 0.3s ease-out;
    border-radius: 10px;
    width: 278px;
    height: 361px;">
                    <input type="checkbox" value="1" name="check-candidato-lcl"
                        style=" border: 0px; width: 0px; height: 1.2em; opacity: 0;"
                        id="<?= $candidato_voto_lcc->ID_CANDID ?>" class="lcl-candidato" checked="" disabled>
                    <div class="profile-header-img">
                        <?= img($candidato_voto_lcc->TEX_FOTO) ?>
                    </div>
                    
                </div>
                
                
                <div
                    style="padding: 5px; display: flex; justify-content: center; align-items: center; word-break: break-all;">
                    <h4 style="font-size:<?= $tletra ?>;font-weight: 900; color: coral;">
                        <?= $nombre_lista. ' ' .$candidato_voto_lcc->TEX_NOMCAN . ' ' . $candidato_voto_lcc->TEX_APECAN ?>
                    </h4>
                </div>

            </label>
        </div>

        <?php endif; ?>


        <div class="candidatos" style="display: grid; <?= $style_grid ?>">
            <?php foreach ($candidatos as $candidato): $contador++; ?>
            <?php
/* if ($contador % $numero_candidatos_grid == 1):
	echo '<br>';
endif; */
?>
            <!--        <div class="row tarjeton">-->



            <div class="candidato" title="<?php echo trim($candidato->TEX_NOMCAN.' '.$candidato->TEX_APECAN) ?>">
                <label class="voto-area" style="width: 100%;height: auto;display: block;" data-toggle="tooltip"
                     title="<?= $candidato->TEX_PERCAN ?>"
                    <?php ($tipo_lista === 'LCC') ? 'style=cursor:none;' : 'style=cursor:pointer;' ?>>

                    <div class="profile-header-container">
                        <div class="profile-header-img">
                            <?php if ($tipo_lista === 'LVP'): ?>
                            <input type="checkbox" value="1" name="NUM_TOVOCA[]" id="<?= $candidato->ID_CANDID ?>"
                                style=" border: 0px; width: 0px; height: 1.2em; opacity: 0;"
                                class="check-candidato candid">
                            <input type="hidden" name="ID_CANDID[]" value="" class="val-candid" disabled="">
                            <?php else: ?>
                            <input type="hidden" name="ID_CANDID[]" value="<?= $candidato->ID_CANDID  ?>"
                                class="val-candid">
                            <?php endif; ?>
                            <?=  img($candidato->TEX_FOTO) ?>
                        </div>
                    </div>
                    <div
                        style="padding: 5px; display: flex; justify-content: center; align-items: center; word-break: break-all;">
                        <h3 style="font-size:<?= $tletra ?>;font-weight: 900;">
                            <?= $candidato->TEX_NOMCAN."<br>".$candidato->TEX_APECAN   ?></h3>
                    </div>

                </label>
            </div>
            <!--        </div>-->
            <?php endforeach; ?>

            <?php if ($instancia->BOL_VOTBLA && $tipo_lista === 'LVP' && $voto_blanco): ?>
            <div class="candidato">
                <label class="voto-area">
                    <div class="profile-header-container">
                        <div class="profile-header-img">
                            <input type="checkbox" value="1" name="BOL_VOTBLA" id="BOL_VOTBLA"
                                style=" border: 0px; width: 0px; height: 1.2em; opacity: 0;">
                            <input type="hidden" name="ID_BLANCO" id="id-voto-blanco"
                                value="<?= $voto_blanco->ID_CANDID ?>" class="val-banco candid" disabled="">
                                <?= img($voto_blanco->TEX_FOTO) ?>
                           <!-- <img src="<?= base_url() ?>uploads/candidatos/en_blanco.jpg" alt="">-->
                        </div>
                    </div>
                    <div
                        style="padding: 5px; display: flex; justify-content: center; align-items: center; word-break: break-all;">
                        <h3 style="font-size:<?= $tletra ?>;font-weight: 900;">Voto en Blanco</h3>
                    </div>

                </label>
            </div>
        </div>
        <?php endif; ?>
        <input type="submit" class="btn btn-default boton-votar" value="Votar">

        <?php if($previsualizar_votacion): ?>
        <input type="hidden" name="previsualizar_votacion" id="previsualizar-votacion" value="1">
        <?php endif; ?>
        <?= form_close(); ?>
    </section>
    <!-- Modal Aviso tiempo agotado -->
    <div class="modal fade" id="modal-tiempo-agotado" tabindex="-1" role="dialog" style="top:10%"
        aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <h3 class="text-center text-danger">El tiempo de votación se ha terminado.</h3>
                </div>
                <div class="modal-footer">
                    <a href="<?= base_url('acceso/logout') ?> " class="btn btn-default btn-leave-app">Salir</a>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal Aviso max candidatos seleccionados -->
    <div class="modal fade" id="modal-max-candidatos" tabindex="-1" role="dialog" style="top:10%"
        aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <h3 class="text-center text-danger"style=" margin: 0; padding: 0; color: #333; font-weight: 800;">Ya has seleccionado el máximo de candidatos.</h3>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" style="font-weight: 900;
                    padding: 10px 5px;background: var(--principal); color: #fff; border: none; text-transform: uppercase;
                     transition: all 0.3s ease-out;">Entiendo</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal Aviso max candidatos seleccionados -->
    <div class="modal fade" id="modal-max-candidatos" tabindex="-1" role="dialog" style="top:10%"
        aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <h3 class="text-center text-success"><?= $mensaje_bienvenida ?></h3>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>
    <span class="ir-arriba icon-arrow-up2" style="display:none;
	padding:20px;
	background:#024959;
	font-size:20px;
    background:url(<?php echo base_url().'uploads/subir.png' ?>) 50% 50% no-repeat rgb(74 76 85 / 0%);
	color:#fff;
	cursor:pointer;
	position: fixed;
    border-radius: 10px;
	bottom:20px;
    top:3px;
	right:20px;"></span>
</main>

<?php
$data_view['loajs'] = $load_js;
$this->load->view('template/footer_front.php', $data_view);
?>

<script>
$(document).ready(function() {

    $('.ir-arriba').click(function() {
        $('body, html').animate({
            scrollTop: '0px'
        }, 300);
    });

    $(window).scroll(function() {
        if ($(this).scrollTop() > 0) {
            $('.ir-arriba').slideDown(300);
        } else {
            $('.ir-arriba').slideUp(300);
        }
    });

    var tipoLista = '<?= $tipo_lista ?>';

    /**
     * MAX de candidatos a seleccionar
     * @type int
     */
    var maxCheck = <?= ($max_candidatos_lista > 0)?$max_candidatos_lista:$instancia->NUM_MUSEIN ?>;
    /**
     * Si esta la opcíón de check para un solo candidato se activa el botón de votar. 
     * 
     * @type Bool.
     */
    var onlyOneCheck = <?= ($obliga_minima_multiple)?$obliga_minima_multiple:$instancia->BOL_OBLMUL ?>;
    /**
     * Evento selección de candidatos. 
     */
    var maxCandidatoPorAgencia = maxCheck;
    <?php if ($agencia_participante->NUM_MUSEAG > 0): ?>
    /**
     *  El número de selección máximo de candidatos por agencia. Depende de
     *  la agencia del participante. 
     * 
     * @type int
     */
    var maxCandidatoPorAgencia = <?= $agencia_participante->NUM_MUSEAG ?>

    <?php endif; ?>
    if (tipoLista === 'LCC') {
        console.log('hh');
        $('.candid').on('click', function() {
            return false;
        });
        $('.candid').prop('disabled', true);
        $('.candid').remove();

        $('#BOL_VOTBLA').on('click', function() {
            return false;
        });

        $('.boton-votar').show();
    } else {
        
        $('.check-candidato').on('click', function() {

            var vl =  $('#BOL_VOTBLA').is(':checked');

if(vl==true){ 
   // console.log('cad'+vl);
     $(this).parent().css({
            "opacity": "70"
        });
        $('.candidatos-contenedor').css('background', '');
        $('#' + candidatoId + '').next().val('')
        $('#' + candidatoId + '').next().prop('disabled', true);
        $(this).parent().parent().parent().parent().css('background-color', '');
        $(this).parent().parent().css('background-color', '');
        $(this).parent().parent().css('background-image', '');
        $(this).parent().parent().css({
            "background-repeat": "no-repeat",
            "background-position": "center center",
            "width": "100%",
            "height": "auto",
            "transform": "translateY(-5 px)",
            "color": "rgb(255, 255, 255)",
            "cursor": "pointer"
        });

}else{  
            console.log('fdd');
            var cantidadCheck = $('input:checkbox:checked').length;
            var candidatoId = $(this).attr('id');
            var checked = $(this).is(':checked');
            if (checked) {
                $('#id-voto-blanco').prop('disabled', true);
                $('#BOL_VOTBLA').prop('checked', false);


                //Si esta definido el max. por agencia.    
                if (maxCandidatoPorAgencia) {
                    if (cantidadCheck > maxCandidatoPorAgencia) {
                        $('#modal-max-candidatos').modal({
                            keyboard: false,
                            backdrop: 'static'
                        });
                        return false;
                    }

                } else {
                    if (cantidadCheck > maxCheck) {
                        $('#modal-max-candidatos').modal({
                            keyboard: false,
                            backdrop: 'static'
                        });
                        return false;
                    }
                }



                $('#' + candidatoId + '').next().prop('disabled', false);
                $('#' + candidatoId + '').next().val(candidatoId)
                $('.candidatos-contenedor').css('background-color', '');
                $(this).parent().css({
                    "opacity": "0.3"
                });

                $(this).parent().parent().parent().parent().css('background-color',
                    'rgba(252, 135, 58, 0.31)');
                $(this).parent().parent().css('background-color', 'rgba(252, 135, 58, 0.31)');
                $(this).parent().parent().css({
                    "background-image": 'url(<?php echo base_url().'uploads/backgrounds/equis.svg' ?>)',
                    "display": "block",
                    "background-repeat": "no-repeat",
                    "background-position": "center center",
                    "width": "100%",
                    "height": "auto"

                });

            } else {

                //  $(this).parent().parent().css('background-color', '#ffffff');
                $(this).parent().css({
                    "opacity": "70"
                });
                // $('.profile-header-img').css('opacity', '70');
                $('.candidatos-contenedor').css('background', '');
                $('#' + candidatoId + '').next().val('')
                $('#' + candidatoId + '').next().prop('disabled', true);
                $(this).parent().parent().parent().parent().css('background-color', '');
                $(this).parent().parent().css('background-color', '');
                $(this).parent().parent().css('background-image', '');
                $(this).parent().parent().css({
                    "background-repeat": "no-repeat",
                    "background-position": "center center",
                    "width": "100%",
                    "height": "auto",
                    "transform": "translateY(-5 px)",
                    "color": "rgb(255, 255, 255)",
                    "cursor": "pointer"
                });
            }
            //Si se alcanza la cantidad de candidatos seleccionados se activar votar.
            if (cantidadCheck === maxCheck) {
                $('.boton-votar').show();
            } else {
                if (!onlyOneCheck) {
                    if (cantidadCheck < maxCheck) {
                        $('.boton-votar').show();
                        if (cantidadCheck === 0) {
                            $('.boton-votar').hide();
                        }
                    }

                } else {
                    if (cantidadCheck < maxCheck) {
                        $('.boton-votar').hide();
                    }
                }
            }
            //Si selecciona solo un candidato el botón se activa
            if (onlyOneCheck === 0) {
                if (checked) {
                    $('.boton-votar').show();
                }
            }
        }
        });
    }


    $('#BOL_VOTBLA').on('click', function() {
        var checked = $(this).is(':checked');
      //  var votoId = $('#id-voto-blanco').val();
       // console.log("eeref"+votoId);
        if (checked) {
            $('.check-candidato').click();
    
            $('#id-voto-blanco').prop('disabled', false);
            $('#seleccion-scandidato').html(1);
            $('#total-seleccionado').html(1);
            $(this).parent().parent().css('background-color', 'rgba(252, 135, 58, 0.31)');
            $(this).parent().parent().css({
                "background-image": 'url(<?php echo base_url().'uploads/backgrounds/equis.svg' ?>)',
                "display": "block",
                "background-repeat": "no-repeat",
                "background-position": "center center",
                "width": "100%",
                "height": "auto"

            });

            $(this).parent().css({
                "opacity": "0.3"
            });
        }

        else {
            //console.log('rtrtrt');
            $(this).parent().css({
                "opacity": "70"
            });

            $('#id-voto-blanco').next().val('')
            $('#id-voto-blanco').next().prop('disabled', true);
           // $('.profile-header-img').css('opacity', '70');
           $('.check-candidato').prop('checked', false);
           $('.candidatos-contenedor').css('background', '');
            $(this).parent().parent().css('background-color', '');
            $(this).parent().parent().css('background-image', '');
            $(this).parent().parent().css({
                "background-repeat": "no-repeat",
                "background-position": "center center",
                "width": "100%",
                "height": "auto",
                "transform": "translateY(-5 px)",
                "color": "rgb(255, 255, 255)",
                "cursor": "pointer"
            });
        }

    });
    $('.boton-votar').on('click', function(e) {
        e.preventDefault();
        var data = $('#crear-form').serialize();
         console.log(data);
        $.ajax({
            type: "POST",
            url: baseUrl + 'votacion/votacion_listas/proceso',
            data: data,
            dataType: "json",
            success: function(response) {
                if (response.type == 'error') {
                    $('#modal-alertas').modal({
                        keyboard: false,
                        backdrop: 'static'
                    });
                    $('#modal-alertas #mensaje-sistema').html(response.message);
                    return false;
                }
                if (response.url_retorno) {
                    window.location.href = response.url_retorno;
                    return false;
                }
                if (response.lista_cerrada) {
                    $('#modal-prev-votos .nombre-lista').html(response.nombre_lista);
                    $('#modal-prev-votos #lista-candidatos').html(response.message);
                    $('#modal-prev-votos').modal({
                        keyboard: false,
                        backdrop: 'static'
                    });
                } else {
                    $('#modal-prev-votos-pref .nombre-lista').html(response.nombre_lista);
                    $('#modal-prev-votos-pref #lista-candidatos').html(response.message);
                    $('#modal-prev-votos-pref').modal({
                        keyboard: false,
                        backdrop: 'static'
                    });
                }
            }
        });
    });

    //Proceso.

    $('.boton-votar-no-ajax').on('click', function(e) {
        location.reload();
    });
    $('.boton-votar-ajax').on('click', function(e) {
        var yyy = '<div class="loader" style="position: fixed;left: 0px;top: 0px;width: 100%;height: 100%;color: rgb(255, 255, 255);background:url(<?php echo base_url().'uploads/cargando.gif' ?>) 50% 50% no-repeat rgb(255, 255, 255);"></div>'
        var sweet_loader = '<div class="sweet_loader"><svg viewBox="0 0 140 140" width="140" height="140"><g class="outline"><path d="m 70 28 a 1 1 0 0 0 0 84 a 1 1 0 0 0 0 -84" stroke="rgba(0,0,0,0.1)" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></g><g class="circle"><path d="m 70 28 a 1 1 0 0 0 0 84 a 1 1 0 0 0 0 -84" stroke="#71BBFF" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-dashoffset="200" stroke-dasharray="300"></path></g></svg></div>';
       
        e.preventDefault();
        $('#previsualizar-votacion').val('0');
        var data = $('#crear-form').serialize();
       
        $.ajax({
            type: "POST",
            url: baseUrl + 'votacion/votacion_listas/proceso',
            data: data,
            dataType: "json",
            beforeSend: function() {
                swal({
                  //  text: "Procesando...",
                    //icon: "info",
                    buttons: false,
                   // dangerMode: true,
                    html: '<h5>Loading...</h5>',
            showConfirmButton: false,
            onRender: function() {
                 // there will only ever be one sweet alert open.
                 $('.swal2-content').prepend(sweet_loader);
            }
                })
            },
            success: function(response) {
                if (response.type == 'error') {
                    $('#modal-prev-votos').modal('hide');
                    $('#modal-alertas').modal({
                        keyboard: false,
                        backdrop: 'static'
                    });
                    $('#modal-alertas #mensaje-sistema').html(response.message);
                    if (response.url_retorno) {
                        window.location.href = response.url_retorno;
                    }
                    return false;
                }
                if (response.url_retorno) {
                    window.location.href = response.url_retorno;
                }

            }
        });
    });

});
$(window).load(function() {
    $(".loader").fadeOut("slow");
});
</script>
<!-- Modal previsualización de votos -->
<div class="modal fade" id="modal-alertas" tabindex="-1" role="dialog" style="top:10%" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <h3 class="text-center text-danger">Mensaje del sistema</h3>
                <p id="mensaje-sistema" class="text-danger text-center" style="font-weight:600;"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal previsualización de votos -->
<div class="modal fade" id="modal-prev-votos" tabindex="-1" role="dialog" style="top:10%"
    aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document" style="
    border-radius: 10px;">
        <div class="modal-content" style="
    border-radius: 10px;">
            <div class="modal-body" style="
    border-radius: 10px;">
                <h3 class="text-center text-success"
                    style="margin:0;padding:0; color: var(--principal); font-weight: 800;">Señor@
                    <?= $this->session->userdata('TEX_NOMPAR') ?> <?= $this->session->userdata('TEX_APEPAR') ?></h3>
                <h3 class="text-center text-success"
                    style="margin: 14px;padding: 0;font-size: 1.0em;font-weight: 800;color: #000000bf;">Está seguro de
                    realizar su VOTO por la
                    <div class="nombre-lista" style="font-weight: 800;color: #111;"></div> que
                    tiene los siguientes candidatos:
                </h3>
                <br>
                <p id="lista-candidatos" class="text-success" style="font-size: 1.0em;
                font-weight: 800; color: #000000bf;"></p>
                <div class="row">
                    <div class="col-12 col-xs-12 col-md-6 col-lg-6 text-right">
                        <button type="button" class="btn btn-success btn-lg boton-votar-ajax btn-si-votar">Si</button>
                    </div>
                    <div class="col-12 col-xs-12 col-md-6 col-lg-6">
                        <button type="button" class="btn btn-danger btn-lg boton-votar-no-ajax btn-no-votar"
                            data-dismiss="modal">No</button>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>

<!-- Modal previsualización de votos -->
<div class="modal fade" id="modal-prev-votos-pref" tabindex="-1" role="dialog" style="top:10%"
    aria-labelledby="myModalLabel">
    < <div class="modal-dialog" role="document" style="
    border-radius: 10px;">
        <div class="modal-content" style="
    border-radius: 10px;">
            <div class="modal-body" style="
    border-radius: 10px;">
                <h3 class="text-center text-success"  style="margin:0;padding:0; color: var(--principal); font-weight: 800;">Señor@
                    <?= $this->session->userdata('TEX_NOMPAR') ?> <?= $this->session->userdata('TEX_APEPAR') ?></h3>
                <h3 class="text-center text-success"  style="margin: 14px;padding: 0;font-size: 1.0em;font-weight: 800;color: #000000bf;">Estás seguro de realizar tu VOTO por la
                    <div class="nombre-lista"
                    style="font-weight: 800;color: #111;"></div> con los
                    siguientes candidatos:
                </h3>
                <br>
                <p id="lista-candidatos" class="text-success" style="font-size: 1.0em;
                font-weight: 800; color: #000000bf;"></p>
                <div class="row">
                    <div class="col-12 col-xs-12 col-md-6 col-lg-6 text-right">
                        <button type="button" class="btn btn-success btn-lg boton-votar-ajax btn-si-votar">Si</button>
                    </div>
                    <div class="col-12 col-xs-12 col-md-6 col-lg-6">
                        <button type="button" class="btn btn-danger  boton-votar-no-ajax btn-lg btn-no-votar"
                            data-dismiss="modal">No</button>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
            </div>
        </div>
</div>
</div>


<style>
label {
    display: grid;
    max-width: 100%;
    font-weight: 600;
    margin: 30px 0;
    grid-gap: 1em;
}

#tarjeton .profile-header-img>img.img-circle {
    border: 2px solid #FC873A00;
}

h1 {
    color: #959595;
    border-bottom: 1px dotted var(--principal);
    padding-bottom: 10px;
    text-transform: uppercase;
    font-weight: 300;
}

#foto-candidato img {

    margin: 0 0 0 0px;
    padding: 0px;
}



.footer {
    padding: 10px;
    background: rgb(18, 20, 32, .75);
    color: #F0F0F0;
    text-align: center;
    bottom: 0;
    position: initial;
    width: 100%;
    display: flex;
}

.votacion {
    display: grid;
    grid-template-rows: auto 1fr auto;
}

.votacion header {
    background: var(--gris-oscuro);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: var(--gris-oscuro);
}

.boton-votar {
    position: fixed;
    top: 85%;
    width: 100%;
    background: var(--principal);
    margin: 0;
    padding: 1px 1px;
    font-size: 35px !important;
    left: 0px;
    height: auto;
}

.boton-regresar {
    background: var(--principal);
    margin-right: 6.5%;
    font-size: 20px !important;
    position: fixed;
    top: 110px;
    box-shadow: 1px 3px 4px 1px rgb(17 17 17 / 32%);
    height: auto;
    ;
    margin-left: 0px;
    z-index: 2;
}


@media screen and (max-width: 600px) {
    .boton-regresar {
        top: 140px;
    }
}

body {
    color: #444444;
    height: 100vh;
    padding: 0;
    margin: 0;
    background: #F3F2F2;
    font-family: 'Roboto', sans-serif;
}

strong {
    font-weight: 900;
}



.votacion.candidato {
    background: #ffffff;
    box-shadow: 1px 1px 3px rgb(0 0 0 / 10%);
    transition: all 0.3s ease-out;
}


.votacion main {
    padding: 0 10%;
}


a {
    color: var(--principal);
    text-decoration: none;
    transition: all 0.3s ease-out;
}

.candidatos h3::before {
    /* content: url(<?php echo base_url().'uploads/backgrounds/icon.svg' ?>);*/
    position: absolute;
    height: 100px;
    width: 100px;
    top: -23px;
    left: 0;
    animation: aparece 0.5s;
}


.candidato:hover,
.candidatos .seleccionado {
    transform: translateY(-5px);
    box-shadow: 1px 5px 3px rgb(0 0 0 / 10%);
    background: var(--principal);
    color: #fff;
    cursor: pointer;

}

img {
    width: 100%;
    height: 307px;
    display: block;
}

</style>