@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

:root {
    --color-text-login: #333333;
    --blue: #336699;
    --green: #339966;
    --borde-textbox: #aaa;
    --color-black: #333;
    --color-blue: #142952;
    --btn-bg-blue: #4775d1;
    --btn-bg-blue-hover: #0033cc;
    --btn-bg-orange: #ff8c1a;
    --btn-bg-orange-hover: #e67300;
    --btn-bg-green: #339966;
    --btn-bg-red: #cc3300;
    --disable-bg: #cccccc;
    --disable-color: #666666;
    --disable-border: #999999;
}

body, html {
  background-color: #FFF;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

*{margin: 0; padding: 0; color: #333; font-family: 'Roboto', sans-serif; box-sizing: border-box;}

.ancho
{
    max-width: 1200px;
    width:93%;
    margin:0px auto;
}

.left {
    text-align: left;
}

.right {
    text-align: right;
}

.center {
    text-align: center;
}

.justify {
    text-align: justify;
}

.center-windows {
    margin: 0px auto;
}

.info, .exito, .alerta, .error {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
    border: 1px solid;
    margin: 22px 0px;
    padding: 22px 11px 22px 60px;
    background-repeat: no-repeat;
    background-position: 10px center;
    display: block;
    clear: both;
    text-align: left;
    box-sizing: border-box;
    width: 100%;
    border-radius: 7px;
    background-size: 32px 32px;
}

.info {
    color: #00529B;
    /*background-color: #BDE5F8;*/
    background-image: url('../images/msg/info.png');
}

.exito {
    color: #4F8A10;
    /*bbackground-color: #DFF2BF;*/
    background-image: url('../images/msg/exito.png');
}

.alerta {
    color: #9F6000;
    /*bbackground-color: #FEEFB3;*/
    background-image: url('../images/msg/alerta.png');
}

.error {
    color: #D8000C;
    /*bbackground-color: #FFBABA;*/
    background-image: url('../images/msg/error.png');
}

.no-margin{margin: 0px !important;}

.hide{display:none;}

.tleft{text-align:left;} .tright{text-align:right;} .tcenter{text-align:center;}

.fbold{font-weight:bold;}

.clear {
    display: block;
    position: static;
    clear: both !important;
    float: none !important;
    width: 100% !important;
    height: 0px;
    border: 0px;
}

div.aspNetHidden{display:none;}

.loader
{
	position:fixed;
	left:0px;
	top:0px;
	background-color: #FFFFFF;
	filter: alpha(opacity=70);
	opacity: 0.7;
	padding: 0px;
	margin: 0px;
	z-index:100000000;
	font-size:10px;
	font-weight:bold;
	text-align:center;
	vertical-align:middle;
	width:100%;
	height:100%;
}

    .loader div
    {
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    height: auto;
	    width: 50%;
	    margin: 0 0 0 -25%;
        text-align:center;
    }

        .loader div p {
            text-align:center;
        }

.btn {
    background-color: var(--btn-bg-blue);
    border: none;
    border-radius: 7px;
    padding: 7px 11px;
    color: #FFF;
    cursor:pointer;
}

    .btn:hover {
        background-color: var(--btn-bg-blue-hover);
    }

.datepicker
{
    background-image: url(../Images/date.png);
    background-size: 24px 24px;
    background-position: 95% 50%;
    background-repeat:no-repeat;
}

/* == MASTER PAGE =========================================================================================*/
form > header {
    position: relative;
    width: 100%;
    clear: both;
    background-color: #333;
    text-align: center;
    padding: 33px 0px;
    margin:0px auto;
}

    form > header h1 {
        text-align:center;
        font-size: 17pt;
        text-transform: uppercase;
        color: #FFF;
        padding: 0px;
        margin: 0px;
    }


/* == VENTANA MODAL =======================================================================================*/
.windows
{
    display:none;
    width: 100%;
    height: 100vh;
    padding: 22px 5%;
    background-color: #FFF;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 10;
    overflow-y: scroll;
}

    .windows .close
    {
        color:#333;
        font-size: 25pt;
        float:right;
        cursor:pointer;
    }

    .windows .title
    {
        width: 100%;
    }

    .windows h2.titulo
    {
        color: var(--blue);
        text-transform: uppercase;
        font-size: 18pt;
        width: 85%;
        display:inline-block;
    }

/* == LISTAS CON BOTONES A LA DERECHA =====================================================================*/
#list-btn {
    display: block;
    overflow: hidden;
    margin: 0px auto;
    box-sizing: border-box;
}

    #list-btn li {
        list-style: none;
        display: block;
        background-color: var(--btn-bg-blue);
        padding: 11px 4%;
        margin: 0px 0px 11px 11px;
        color: #FFF;
        border-radius: 7px;
        float: left;
        width: 32.33%;
        overflow: hidden;
        white-space: nowrap;
    }

        #list-btn li:hover {
            background-color: var(--blue);
        }

        #list-btn li label {
            color: #FFF;
            font-size: 11pt;
            float: left;
            margin-top: 7px;
        }

        #list-btn li i {
            background-color: #FFF;
            color: var(--btn-bg-blue);
            padding: 5px;
            border-radius: 50%;
            font-size: 14pt;
            float: right;
            margin-right: 11px;
            cursor: pointer;
        }

/* == LISTA EN FICHAS =====================================================================================*/
#list-fichas{
    width: 100%;
    margin-top: 22px;
    overflow:hidden;
}

    #list-fichas li {
        display: block;
        width: 32.1%;
        margin: 0px 7px 11px;
        list-style: none;
        background-color: var(--blue);
        border-radius: 17px;
        padding: 14px;
        float:left;
    }

        /* Segundo Elemento */
        #list-fichas li:nth-child(3n-1) {
            background-color: var(--green);
        }

        /* Tercer Elemento */
        #list-fichas li:nth-child(3n+0) {
            background-color: var(--btn-bg-blue);
        }

        #list-fichas li div{
            display:block;
            overflow:hidden;
            margin-bottom: 11px;
        }

        #list-fichas li div:last-child{
            margin:44px 0px 0px;
        }

            #list-fichas li div label {
                display:inline-block;
                color: #FFF;
                font-size: 11pt;
            }

            #list-fichas li div label:first-child{
                float:left;
                width: 65%;
                text-indent: -28px;
                padding-left: 32px;
            }

            #list-fichas li div label:last-child {
                float:right;
                width: 33%;
            }

                #list-fichas li div label i {
                    display: inline-block;
                    font-size: 8pt;
                    background-color:#FFF;
                    color: var(--color-black);
                    padding: 7px 5px 5px 7px;
                    border-radius: 50%;
                    width: 24px;
                    height: 24px;
                    text-indent:initial;
                }

                #list-fichas li div label a {
                    background: none;
                    border: 0px;
                    display: inline-block;
                    padding: 14px 33px;
                    border-radius: 30px;
                    cursor: pointer;
                    -webkit-transition: all 2s ease;
                    -moz-transition: all 2s ease;
                    -ms-transition: all 2s ease;
                    -o-transition: all 2s ease;
                    transition: all 2s ease;
                    font-size: 11px;
                    text-decoration: none;
                    background-color: var(--btn-bg-orange);
                    text-align:center;
                    text-indent: initial;
                }

                    #list-fichas li div label a:hover {
                        background-color: var(--btn-bg-blue-hover);
                    }

/* == LISTAS EN PESTAÑAS ==================================================================================*/
.list-tabs
{
    display:block;
    float:none;
    width: 98%;
    margin:0px auto;
    overflow:hidden;
}

    .list-tabs li {
        list-style: none;
        float: left;
        background-color: var(--btn-bg-blue);
        padding: 7px 11px;
        margin-left: 5px;
        color: #FFF;
        -webkit-border-radius: 7px 7px 0 0;
        border-radius: 7px 7px 0 0;
        font-size: 10pt;
        width: 82px;
        text-align:center;
        cursor:pointer;
    }

    .list-tabs li:first-child {
        margin-left: 0px;
    }

    .list-tabs li:hover {
        background-color: var(--btn-bg-blue-hover);
    }

    .list-tabs .tab-ativa {
        background-color: var(--btn-bg-green);
    }

/* == FORMULARIOS =========================================================================================*/
.form label {
    color: var(--color-black);
    font-size: 9pt;
    margin-bottom: 11px;
    display: block;
}

    .form .horario .btnHora
    {
        display:inline-block;
        cursor:pointer;
        background-color: var(--disable-bg);
        padding: 18px 0px;
        margin:0px 5px 0px 18px;
        border-radius: 11px;
        float:left;
        width: 19%;
    }

    .form .horario .btnMarcado
    {
        background-color: var(--btn-bg-blue);
    }

    .form .horario .marcado{background-color: var(--btn-bg-orange);}

    .form .horario .inicio{background-color: var(--btn-bg-green);}

    .form .horario input[type=text]
    {
        width: 53%;
        min-width:auto;
    }

.form input[type=text]
, .form input[type=password]
, .form input[type=email]
, .form input[type=tel]
, .form input[type=number]
, .form input[type=date]
, .form textarea
{
	border:1px solid var(--borde-textbox);
    border-radius: 3px;
    padding: 9px 5px;
    box-sizing: border-box;
    width: 100%;
    margin:0px;
}

.form input[type=text].aspNetDisabled
, .form input[type=password].aspNetDisabled
, .form input[type=email].aspNetDisabled
, .form input[type=tel].aspNetDisabled
, .form input[type=number].aspNetDisabled
, .form input[type=date].aspNetDisabled
, .form textarea.aspNetDisabled
{
	font-size: 11pt;
    color: var(--disable-color);
}

.form input[type=text]:focus
, .form input[type=password]:focus
, .form input[type=email]:focus
, .form input[type=tel]:focus
, .form input[type=number]:focus
, .form input[type=date]:focus
, .form textarea:focus
{
    outline: none !important;
	border:1px solid var(--borde-textbox);
    border-radius: 3px;
    box-shadow:0px;
}

.form input[type=text].spinner, 
.form input[type=text].spinner:focus
{
    border:0px;
    padding:7px 2px;
    margin:0px;
    outline: none !important;
}

.check-content{display:block; padding-bottom: 11px;}

    .check-content label{display: inline-block !important; margin-right: 11px;}

.form input[type=checkbox], .form input[type=radio]{margin-right: 11px;}

.form .acciones{width: 100%; overflow: hidden;}

    .form .acciones input[type=submit]
    , .form .acciones a.input
    {
        background:none;
        border:0px;
        display:inline-block;
        padding:14px 44px;
        border-radius: 30px;
        cursor:pointer;
        -webkit-transition: all 2s ease;
        -moz-transition: all 2s ease;
        -ms-transition: all 2s ease;
        -o-transition: all 2s ease;
        transition: all 2s ease;
        font-size: 11px;
    }

        .form .acciones input[type=submit].default
        {
            background-color: var(--btn-bg-red);
            color: #FFF;
            font-size: 12pt;
        }

        .form .acciones input[type=submit].default:hover
        {
            opacity: 0.6;
        }

    .form .acciones input[type=submit].save
    , .form .acciones a.save
    {
        background-color: var(--btn-bg-blue);
        color: #FFF;
    }

        .form .acciones input[type=submit].save:hover
        , .form .acciones a.save:hover
        {
            background-color: var(--btn-bg-blue-hover);
        }

    .form .acciones input[type=submit].print,
    .form .acciones a.print {
        background-color: var(--btn-bg-orange);
        color: #FFF;
    }

        .form .acciones input[type=submit].print:hover,
        .form .acciones a.print:hover {
            background-color: var(--btn-bg-orange-hover);
        }

    .form .acciones input[type=submit].aspNetDisabled
    {
            border: 1px solid var(--disable-border) !important;
            background-color: var(--disable-bg) !important;
            color: var(--disable-color) !important;
    }

/* == SELECT STYLE ========================================================================================*/
.SelectStyle {
	display: block;
	font-size: 16px;
	font-family: 'Arial', sans-serif;
	font-weight: 400;
	color: #444;
	line-height: 1.3;
	padding: .5em 1.4em .5em .1em;
	width: 100%;
	box-sizing: border-box;
	margin: 0px;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.03);
	border-radius: .3em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#f7f7f7 100%);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
}

	.SelectStyle::-ms-expand{display: none;}

	.SelectStyle:hover{border-color: #888;}

	.SelectStyle:focus
	{
		border-color: #aaa;
		box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
		box-shadow: 0 0 0 0px -moz-mac-focusring;
		color: #222; 
		outline: none;
	}

	.SelectStyle option{font-weight:normal;}

/* == COLUMNAS ============================================================================================*/
.column-two{}

    .column-two div
    {
        overflow:hidden; 
        margin-bottom: 11px;
        display:inline-block;
        width: 47%;
    }

    .column-two label{
        width: 20%;
        float: left;
        font-weight: bold;
        margin: 8px 0px 0px;
        text-align: right;
    }

    .column-two input[type=text]
    , .column-two input[type=password]
    , .column-two input[type=email]
    , .column-two input[type=tel]
    , .column-two input[type=number]
    , .column-two input[type=date]
    , .column-two textarea
    , .column-two .SelectStyle
    , .column-two .Procesar
    {
        float:right;
        width: 75%;
    }

    .column-two .Procesar{
        background-color: #336699;
        color: #FFF;
        font-size: 11pt;
        border: none;
        border-radius:0px;
        padding: 11px 0px;
    }

    .column-two .ancho {
        width: 93% !important;
        margin: 0px;
    }

        .column-two .ancho label{
            width: 10%;
        }

        .column-two .ancho textarea {
            width: 87.5%;
        }

.btnToggle {
    padding: 10px;
    margin: 5px;
    width: 45%;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 6px;
    cursor: pointer;
}

.btnToggle.selected {
    background-color: #28a745;
    color: white;
}
/* == TABLA ===============================================================================================*/
.datagird {
    width: 100%;
    border-collapse: collapse; /* elimina espacios entre celdas */
    background: #fff;
    color: #333;
    margin: 0 0 11px 0;
    font-family: Calibri, sans-serif;
    font-size: 9pt;
    display: block; /* permite que el contenedor controle el ancho */
    overflow-x: auto; /* scroll horizontal en móvil si es necesario */
    -webkit-overflow-scrolling: touch; /* scroll suave en iOS */
}

    .datagird th,
    .datagird td {
        text-align: left;
        padding: 7px 8px;
        white-space: nowrap; /* evita que el texto se corte raro en móvil */
    }

    .datagird th {
        font-style: italic;
        font-weight: 700;
        border-bottom: 1px solid #333;
        background: #f9f9f9; /* un poco más de contraste */
    }

    .datagird tr.alt {
        background-color: #f0f4f5;
    }

    .datagird td:first-child {
        border-right: 1px solid #333;
        text-align: center;
        font-style: italic;
        background-color: #fff;
        padding-right: 7px;
    }

    .datagird input[type=text],
    .datagird input[type=password],
    .datagird input[type=email],
    .datagird input[type=tel],
    .datagird input[type=number],
    .datagird textarea,
    .datagird .SelectStyle {
        border: 1px solid var(--borde-textbox, #ccc);
        border-radius: 3px;
        padding: 9px 5px;
        box-sizing: border-box;
        width: 100%; /* ocupa todo el ancho de la celda en móvil */
        margin: 0;
        font-size: 9pt;
    }

    .datagird tr:hover td,
    .datagird tr:hover p,
    .datagird tr:hover p span {
        color: #3366cc;
        cursor: pointer;
    }

    .datagird tr.selected {
        background-color: #fff2e6;
    }

/* 📱 Responsive: en pantallas pequeñas */
@media (max-width: 600px) {
    .datagird th,
    .datagird td {
        font-size: 10pt; /* un poco más legible en móvil */
        padding: 10px 6px;
    }

    .datagird {
        font-size: 10pt;
    }
}

/* == COMPRA EN PIE ======================================================================================*/
.show-movil-desktop .compra-pie-movil {
    display: none;
}

/* == PIE DE PÁGINA =======================================================================================*/
footer {
    margin-top:auto;
    padding-top: 33px;
    text-align:center;
}

footer img{
    width: 100%;
    height: 45%;
}

/* == CARRUSEL DE ITEMS ===================================================================================*/
.carousel-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 0rem;
    padding: 1rem 0;
    scrollbar-width: none; /* Firefox */
    width:84%;
    max-width: 1200px;
    margin:0px auto;
}

    .carousel-container::-webkit-scrollbar {
        display: none; /* Chrome, Safari */
    }

.carousel-item {
    flex: 0 0 31.3333%; /* Exactamente 3 ítems por fila */
    box-sizing: border-box;
    scroll-snap-align: start;
    background-color: #e6f0ff;
    border: 2px solid #007bff;
    border-radius: 10px;
    padding: 1rem;
    margin-right: 0.5rem;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s ease;
    user-select: none;
    font-size: 10pt;
}

    .carousel-item:last-child {
        margin-right: 0;
    }

    .carousel-item.selected {
        background-color: #007bff;
        color: #ffffff;
        border-color: #0056b3;
    }

    .carousel-item.disable {
        background-color: #cccccc;
        color: #333;
        border-color: #b3b3b3;
    }

/* =================================================================================*/
/* Lista de botones */
.ListButton a {
    display: block;
    padding: 44px 18px;
    margin: 6px 6px 22px;
    border-radius: 25px;
    background: #007bff; /* azul */
    color: #fff;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    cursor:pointer;
}

    .ListButton a:hover {
        background: #0056b3;
        transform: scale(1.05);
    }

    .ListButton a:active {
        transform: scale(0.95);
    }

    /* Estado procesando */
    .ListButton a.procesando {
        background: #ffc107; /* amarillo */
        color: #212529;
    }

    /* Estado completado */
    .ListButton a.completado {
        background: #28a745; /* verde */
        color: #fff;
    }


/* =================================================================================*/
/* Ajustes generales para inputs */
input[type="date"] {
    width: 100% !important;
    max-width: 400px;
    padding: 12px 15px !important;
    font-size: 16px !important;
    border: 1px solid #ccc !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    background: #fff;
    margin-bottom: 22px !important;
}

    /* Mejora para cuando se selecciona */
    input[type="date"]:focus {
        border-color: #007bff;
        outline: none;
        box-shadow: 0 0 5px rgba(0, 123, 255, .5);
    }

/* =================================================================================*/
.popup {
    position: fixed;
    left: 0px;
    top: 0px;
    background-color: #FFFFFF;
    padding: 5%;
    margin: 0px;
    text-align: center;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}

    .popup h3 {
        font-size: 17pt;
        margin: 22px 0px 22px;
        text-align: center;
        display: block;
        clear: both;
        overflow: hidden;
    }

        .popup h3 i {
            float: right;
            font-size: 24pt;
            text-decoration: none;
            cursor: pointer;
            color: #333
        }

.FloatingBtn {
    position: absolute;
    right: 5%;
    top: 11%;
    background-color: #333;
    padding: 14px;
    border-radius: 50%;
    text-decoration: none;
    cursor: pointer;
}

    .FloatingBtn i{
        color: #FFF;
        font-size: 22pt;
    }

.zindez1{
    z-index:1;
}
.zindez2 {
    z-index: 2;
}
.zindez3 {
    z-index: 3;
}
.zindez4 {
    z-index: 4;
}
.zindez5 {
    z-index: 5;
}

/* Opcional: estilo especial en pantallas pequeñas */
@media (max-width: 768px) {
    input [type="date"] {
        font-size: 18px;
        padding: 14px;
    }
}

/* =================================================================================*/
/* Contenedor de botones */
#btnbascula {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 1.5rem 0;
}

    /* Estilo general de botones */
    #btnbascula button {
        flex: 1; /* que se adapten al ancho disponible */
        max-width: 150px;
        padding: 12px 18px;
        font-size: 1rem;
        font-weight: 600;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s ease;
        color: #fff;
    }

/* Botón conectar */
#btnConnect {
    background-color: #28a745; /* verde */
}

    #btnConnect:hover:enabled {
        background-color: #218838;
    }

/* Botón desconectar */
#btnDisconnect {
    background-color: #dc3545; /* rojo */
}

    #btnDisconnect:hover:enabled {
        background-color: #c82333;
    }

/* Estado deshabilitado */
#btnbascula button:disabled {
    background-color: #6c757d !important; /* gris */
    cursor: not-allowed;
    opacity: 0.7;
}

/* =================================================================================*/
.mt-22 {
    margin-top: 22px !important;
}

.mt-33 {
    margin-top: 33px !important;
}

.mt-44 {
    margin-top: 44px !important;
}

.mt-55 {
    margin-top: 55px !important;
}

.mb-22{
    margin-bottom: 22px !important;
}
.mb-33 {
    margin-bottom: 33px !important;
}
.mb-44 {
    margin-bottom: 44px !important;
}
.mb-55 {
    margin-bottom: 55px !important;
}
.label-display-block{
    text-align:center;
}

    .label-display-block label, .label-display-block span {
        display: block;
        width: 100%;
        position: static;
        clear: both;
        margin: 0px 0px 11px;
        padding: 0px;
    }

.numeric-input {
    width: 100%;
    max-width: 200px;
    padding: 10px;
    font-size: 18px;
    border: 1px solid #ccc;
    border-radius: 6px;
}

/* 🔹 Clase base para ambos botones */
.btn-action {
    display: block;
    padding: 33px 18px;
    border-radius: 25px;
    color: #fff;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    cursor: pointer;
    border: none;
    width: 200px;
    margin: 0px auto;
    font-size: 14pt;
    text-align: center;
}

    .btn-action i {
        color: #FFF;
        margin-right: 5px;
    }

    .btn-action:hover {
        transform: scale(1.05);
    }

    .btn-action:active {
        transform: scale(0.95);
    }

/* 🔹 Específicas */
.siguiente {
    background: #007bff !important;
}

    .siguiente:hover {
        background: #0056b3;
    }

.exportar {
    background: #28a745 !important;
}

    .exportar:hover {
        background: #1e7e34;
    }


/* Contenedor exclusivo del checkbox Enviar */
/* Contenedor exclusivo del checkbox Enviar */
.chkEnviar {
    display: flex;
    justify-content: center; /* Centrar horizontal */
    align-items: center;
    margin: 15px 0 25px 0; /* Espacio arriba y abajo (más en la parte inferior) */
}

    /* Checkbox dentro del contenedor */
    .chkEnviar input[type="checkbox"] {
        width: 26px; /* Más grande que antes */
        height: 26px;
        accent-color: #25D366; /* Verde WhatsApp */
        cursor: pointer;
        margin-right: 10px;
    }

    /* Texto asociado al checkbox */
    .chkEnviar span {
        font-size: 1.2rem; /* Texto más grande */
        font-weight: 500;
        color: #333;
        cursor: pointer;
    }

/* Ajustes en pantallas pequeñas */
@media (max-width: 768px) {
    .chkEnviar input[type="checkbox"] {
        width: 30px; /* Aún más grande en móvil */
        height: 30px;
    }

    .chkEnviar span {
        font-size: 1.3rem; /* Texto más legible en móvil */
    }
}

@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px)
{
    body {
        background-size: 100% 270px;
    }

    table, .row, .cel {
        display: block;
    }

    .ancho-movil{width: 90%; margin:0px auto}

    #login {
        background-size: 100% auto;
    }

    #master .title h1 {
        text-align: center;
        margin: 0px auto 33px;
    }

    #list-btn li {
        margin: 0px auto 11px;
        float: none;
        width: 95%;
    }

    #list-fichas li {
        display: block;
        width: 100%;
        margin: 0px 0px 11px;
        float: none;
    }

        #list-fichas li div label {
            font-size: 10pt;
        }

    .column-two div {
        display: block;
        width: 100%;
    }

    .column-two .ancho {
        width: 100% !important;
        margin: 0px;
    }

        .column-two .ancho label {
            width: 20%;
        }

        .column-two .ancho textarea {
            width: 75%;
        }

    .column-two label {
        width: auto;
    }

    .movil div {
        margin: 0px auto 17px;
        width: 90%;
    }

    .movil label {
        display:block;
        width: 100%;
        float: none;
        text-align:left;
        margin: 0px;
    }

    .column-two input[type="text"], .column-two input[type="password"], .column-two input[type="email"], .column-two input[type="tel"], .column-two input[type="number"], .column-two input[type="date"], .column-two textarea, .column-two .SelectStyle, .column-two .Procesar {
        float: none;
        width: 100%;
    }

    /* == COMPRA EN PIE ======================================================================================*/
    .compra-pie-desktop {
        display: none;
    }

    .show-movil-desktop .compra-pie-titulo {
        color: #333;
        font-weight: bold;
        margin-bottom: 11px;
    }

    .show-movil-desktop .compra-pie-movil {
        display: block;
        margin:0px;
    }

    footer img {
        height: auto;
    }
}