label {
    text-transform: uppercase !important;
    margin-bottom: .5rem;
}

input, option, select {
/*    color: var(--zc-secundario) !important;*/
    font-family: var(--LetraGeneral);
}

    textarea::placeholder, input::placeholder {
/*        color: var(--azul200) !important;*/
        font-family: var(--LetraGeneral);
    }

    button:focus, textarea.form-control:focus, input:focus, select:focus, select.form-select:focus, input.form-control:focus, input.form-check-input:focus {
        /*border-color: var(--sombra) !important;
        box-shadow: 0 1px 1px var(--sombra) inset, 0 0 8px rgba(196,196,196,0.6);*/
        /*border-color: var(--zc-secundario) !important;*/
        /*box-shadow: 0 1px 1px var(--zc-secundario) inset, 0 0 8px rgba(196,196,196,0.6);*/
        /*color: #495057;*/
  /*      background-color: #fff;*/
        /*border-color: #e293d3;*/
        border-color: var(--zc-terciario-translucido);
        outline: 0;
        /*box-shadow: 0 0 0 2px #e9aede;*/
        box-shadow: 0 0 0 2px var(--zc-terciario-translucido);
    }

label {
    font-family: var(--LetraGeneral);
}

button, .btn, a{
    outline: 0 none !important;
}

    button:active, button:focus, button.btn :active, button.btn :focus, a:active, a:focus, a.btn:focus, a.btn:active, .btn:active, .btn:focus{
        outline: 0 none !important;
        box-shadow: none !important;
    }
    .btn:active, .btn:focus {
        color: white;
    }
    .btn.filtro:active, .btn.filtro:focus {
        color: black;
        outline: 0 none !important;
        box-shadow: none !important;
    }
.table-hover > tbody > tr:hover > * {
    background-color: var(--zc-secundario-translucido);
    /*color: var(--azul500);*/
}
.link-user {
    text-decoration: none;
}

.link {
    text-decoration: none;
    transition: box-shadow 0.15s;
}

    .link:hover {
        box-shadow: 0 .5rem 1rem 0 rgba(0, 0, 0, .3) !important;
    }

.shadow-card {
    box-shadow: 0 .5rem 1rem 0 rgba(0, 0, 0, .15) !important;
}

.modal-content {
    border-color: var(--bs-border-color-translucent);
}
.modal-footer {
    border-top: none;
}


.add-card {  
   border-style: dashed !important;  
   border-width: 0.11rem;  
   border-color: var(--sombra);  
   background-color: var(--sombra-rgba);  
   background-image: url(/imagenes/plus.svg);  
   background-repeat: no-repeat;  
   background-position: center;  
   background-size: 4rem 4rem; /* Ajusta el tamaño de la imagen */  
   padding-right: 2rem;  
   padding-left: 2rem;  
   padding-top: 2rem !important;  
   padding-bottom: 2rem !important;  
   cursor: pointer;  
}

.fondo {
    height: auto;
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 0;
    margin-left: 0;
}

.img-home {
    width: 70%;
    height: 70%;
}

.img-zeus {
    width: 50%;
    height: 80%;
}
.titulo-graficos {
    font-size: 1.5rem !important;
    margin: 0 !important;
}

.input-boder-none {
    border: 0;
    outline: none;
    width: 100%;
}

    .input-boder-none:hover {
        outline: none;
        border-bottom: 0.18rem !important;
        border-style: solid !important;
        /*border-color: var(--azul) !important;*/
        background-size: 100% 1.8rem;
    }

    .input-boder-none:active, .input-boder-none:focus {
        outline: none;
        border-bottom: 0.18rem !important;
        border-style: solid !important;
        /*border-color: var(--azul) !important;*/
        background-size: 100% 1.8rem;
    }

.add-option {
    border: 0;
    outline: none;
}

    .add-option:hover {
        cursor: pointer;
    }

.form-floating > label {
/*    color: var(--azul200) !important;*/
    width: 100%;
}

.card, .progress-bar, .progress {
    border-radius: var(--bs-border-radius-xl);
}

.card-icon {
    width: 35%;
}

.card-imagen {
    width: 80%;
}



.card-header, .modal-header {
    position: relative;
/*    border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color);*/
   border-bottom: none;
    background-color: white;
/*    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);*/
    z-index: 2;
    border-radius: var(--bs-border-radius-xl) var(--bs-border-radius-xl) 0 0 !important;
}

.card .card-header {
    padding: 1.5rem;
}
.table {
    /*--bs-table-color: var(--color-letra);*/
}

    .table > tbody {
        vertical-align: middle;
    }

    .table > thead {
        font-size: 1.2rem;
    }
/* Base de Botón */
.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 2rem !important;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
    outline: none !important;
    text-decoration: none;
}

/* 2. TAMAÑOS: Aquí es donde diferenciamos Tabla vs Formulario */

/* Tamaño Estándar (Para formularios, modales, botones principales) */
.boton-md {
    padding: 0.6rem 1.5rem !important;
    font-size: 0.95rem;
    min-width: 120px; /* Para que los botones de formulario tengan un cuerpo sólido */
}

.boton-icono {
    padding: 0.6rem !important;
    font-size: 0.95rem;
    min-width: 120px; /* Para que los botones de formulario tengan un cuerpo sólido */
}

/* Tamaño Compacto (Exclusivo para tablas de datos) */
.boton-sm {
    padding: 0.2rem 0.7rem !important;
    font-size: 0.8rem;
    margin-right: 0.3rem;
}

/* --- BOTÓN PRIMARIO--- */
.primario {
    background-color: var(--zc-primario) !important;
    color: var(--zc-secundario) !important;
}

    .primario:hover, .primario:focus {
        background-color: var(--zc-primario-hover) !important;
        color: var(--zc-secundario) !important;
        box-shadow: 0 4px 10px rgba(152, 193, 217, 0.4) !important;
    }

/* --- BOTÓN SECUNDARIO --- */
/* Estilo Outline que se rellena al hacer hover */
.secundario {
    background-color: white !important;
    color: var(--zc-secundario) !important;
    border: 0.1rem solid var(--zc-secundario) !important;
}

    .secundario:hover, .secundario:focus {
        background-color: var(--zc-secundario) !important;
        color: white !important;
    }

/* --- BOTÓN TERCIARIO (Discreto / Gris) --- */
.terciario {
    background-color: transparent !important;
    color: var(--zc-gris-texto) !important;
    padding-left: 0.4rem !important;
    padding-right: 0.4rem !important;
}

    .terciario:hover {
        background-color: var(--zc-translucido) !important;
        color: var(--zc-secundario) !important;
    }

.poco-frecuente {
    padding-left: 0.4rem !important;
    padding-right: 0.4rem !important;
}

/* --- CERRAR / PELIGRO --- */
.cerrar {
    background-color: transparent !important;
    color: var(--zc-peligro) !important;
    border: 0.1rem solid var(--zc-peligro) !important;
}

    .cerrar:hover {
        background-color: var(--zc-peligro) !important;
        color: white !important;
    }

/* --- ICONOS / IMAGEN --- */
.imagen {
    background-color: transparent !important;
    color: var(--zc-secundario) !important;
    border: 0 !important;
    padding: 0.2rem !important;
    opacity: 0.8;
}

    .imagen:hover {
        opacity: 1;
        transform: scale(1.1);
    }

.boton-img {
    background-repeat: no-repeat;
    width: 1.3rem;
    height: 1.3rem;
    display: inline-block;
    position: relative;
    background-size: cover;
    top: 2px;
}

.margen-login {
    margin-top: 14rem;
}

.flex {
    justify-content: flex-start;
}

.invalid-feedback {
    color: var(--bs-form-invalid-color) !important;
}

.titulo-pregunta {
    border: 0;
    border-bottom: 0.13rem;
    border-style: solid;
    border-color: var(--zc-secundario-translucido50);
    margin-bottom: 0.5rem !important;
}

.chart-container {
    /*height: 13rem;*/
    height: 100%;
    width: 100%;
}
.mitad-pantalla {
    height: calc(50vh - 18rem);
}

.mitad-pantalla-contador {
    height: calc(50vh - 10rem);
}



.grafico-zoom {
    height: calc(100vh - 10.8rem);
}

/* por si tenías un max-width antiguo */
.input-fecha-fijo, .form-control {
    max-width: 100%;
}

/* evita el bug de Safari/iPad con flex/grid */
.min-w-0 {
    min-width: 0;
}

.login-container {
    background-image: url('/imagenes/torres alta tension2.png');
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.login-box {

    margin-left: 5rem;
    width: 100%;
}


.logo-esquina {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10;
    opacity: 0.8;
}

    .logo-esquina img {
        max-height: 120px;
        width: auto;
    }



.yearpicker-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.yearpicker {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    height:38px;
    padding: 6px 36px 6px 12px;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    background-color: #fff;
    font-size: 1rem;
    color: #212529;
    box-sizing: border-box;
    line-height: 1.5;
}

    .yearpicker:focus {
        border-color: var(--zc-secundario-translucido);
        outline: 0;
        box-shadow: 0 0 0 2px var(--zc-secundario-translucido);
    
    }

.calendar-icon {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 0.8rem;
}


.legend-dot {
    width: .7rem; 
    height: .7rem;
    border-radius: 50%;
    background: var(--dot);
    display: inline-block;
}


.icono-doc {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    background-color: var(--zc-seleccion);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .icono-doc i {
        font-size: 2.4rem;
        line-height: 1;
        color: var(--zc-primario);
    }



.estado-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 1.8rem;
    padding: 0.35rem 0.6rem;
    white-space: nowrap;
    font-weight: 500;
    line-height: 1;
    font-size: 0.85rem;
    margin-bottom: 0rem;
    text-transform: uppercase;
}
    .estado-badge::before {
        content: '';
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        flex: 0 0 auto;
        background-color: currentColor;
        display: inline-block;
    }

.estado-activo {
    background-color: var(--zc-success-bg);
    color: var(--zc-success-text);
    border: 1px solid var(--zc-success-border);
}

.estado-inactivo {
    background-color: var(--zc-danger-bg);
    color: var(--zc-danger-text);
    border: 1px solid var(--zc-danger-border);
}

.estado-rol {
    background-color: var(--zc-info-bg);
    color: var(--zc-info-text);
    border: 1px solid var(--zc-info-border);
}

.estado-pendiente {
    background-color: var(--zc-alert-bg);
    color: var(--zc-alert-text);
    border: 1px solid var(--zc-alert-border);
}

.bg-secundario {
    background-color: var(--zc-secundario) !important;
}


.alert-zc-success {
    background-color: var(--zc-success-bg);
    color: var(--zc-success-text);
    border: 1px solid var(--zc-success-border);
}

.alert-zc-danger {
    background-color: var(--zc-danger-bg);
    color: var(--zc-danger-text);
    border: 1px solid var(--zc-danger-border);
}

.alert-zc-info {
    background-color: var(--zc-info-bg);
    color: var(--zc-info-text);
    border: 1px solid var(--zc-info-border);
}



.tipo-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 0.5rem;
    padding: 0.35rem 0.6rem;
    white-space: nowrap;
    font-weight: 500;
    line-height: 1;
    font-size: 0.85rem;
    margin-bottom: 0rem;
    text-transform: uppercase;
}


.tipo-interno {
    background-color: rgba(123, 44, 191, 0.12);
    color: #6b21a8;
    border: 1px solid rgba(123, 44, 191, 0.18);
}

.tipo-externo {
    background-color: rgba(249, 115, 22, 0.12);
    color: #c2410c;
    border: 1px solid rgba(249, 115, 22, 0.18);
}




.dropdown-menu .dropdown-divider {
    border-top: 1px solid var(--zc-dropdown-divider);
    opacity: 1;
    margin: 0.4rem 0;
}

.sortable-header {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

    .sortable-header:hover {
        color: var(--zc-primario);
    }

    .sortable-header i {
        font-size: 0.9rem;
        opacity: 0.8;
    }




.permiso-key {
    color: var(--zc-primario);
    font-size: 0.82rem;
    letter-spacing: 0.02em;
}

.form-check-label {
    cursor: pointer;
}

.form-check-input {
    cursor: pointer;
}





.privacy-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.85rem 1rem;
    border: 1px solid #d8e2ea;
    border-radius: 0.75rem;
    background-color: #f8fafc;
    color: #2C3E50;
    font-size: 0.95rem;
}

    .privacy-info i {
        color: var(--zc-primario);
        font-size: 1.1rem;
    }

.privacy-link {
    border: none;
    background: none;
    padding: 0;
    color: #2C3E50;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

    .privacy-link:hover {
        color: var(--zc-primario-hover);
    }





/* imprimir */
@media print {
    .sidebar, .navbar, .no-print, footer, nav {
        display: none !important;
    }

    .main-content, .content, .body-wrapper {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .col-12.print-block-contador {
        width: 48% !important;
        display: inline-block !important;
        vertical-align: top;
        margin-bottom: 10mm;
        margin-right: 2%;
        page-break-inside: avoid;
        break-inside: avoid;
    }

        /* Si es el segundo elemento en la fila, quita el margen derecho */
    .col-12.print-block-contador:nth-of-type(2n) {
        margin-right: 0;
    }



    .print-block-contador {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        break-after: auto !important;
        overflow: visible !important;
        display: block !important;
    }

        .print-block-contador .card {
            page-break-inside: avoid !important;
            break-inside: avoid !important;
            break-after: auto !important;
        }

    .row {
        flex-wrap: wrap !important;
    }

    .col-xl-4, .col-lg-6, .col-md-12, .col-12 {
        float: none !important;
        display: block !important;
        width: 100% !important;
    }
    .print-block {
        page-break-inside: avoid;
        break-inside: avoid;
    }

        .print-block .card,
        .print-block .chart-container {
            margin-bottom: 10mm !important;
            page-break-inside: avoid;
            break-inside: avoid;
        }

        /* SOLO afecta row y col dentro de print-block */
        .print-block .row {
            display: block !important;
        }

        .print-block .col {
            display: block !important;
            width: 100% !important;
        }

    @page {
        margin: 10mm;
        size: A4 portrait;
    }

    body {
        background: white !important;
        color: black;
        font-size: 12pt;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .print-block .card {
       /* box-shadow: none !important;
        border-radius: 0 !important;*/
        overflow: visible !important;
        margin-bottom: 10mm !important;
        /* Quitar esto si causa salto excesivo */
        page-break-inside: auto !important;
        break-inside: auto !important;
    }

    .print-block .chart-container {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }

    .print-block canvas {
        width: 100% !important;
        height: auto !important;
        max-height: 250mm !important; /* evita que se pase de una hoja */
        display: block;
    }

    .print-block .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .form-control, .btn, .input-group, .filter-group, .toolbar, .pagination {
        display: none !important;
    }

   
}



@media screen {
    body.print-mode .main-content {
        width: 300px;
        margin: 0 auto;
    }
}

/* Ancho máximo de los inputs de fecha solo a partir de md (>=768px) */
@media (min-width: 768px) {
    .input-fecha-fijo {
        max-width: 220px;
        width: auto;
    }
}
@media (max-width: 768px) {
    .login-container {
        justify-content: center;
        padding: 1rem;
        padding-bottom: 6rem;
    }

    .login-box {
        margin-left: 0;
    }

    .logo-esquina {
        bottom: 5px;
        right: 5px;
    }

        .logo-esquina img {
            max-height: 80px;
        }
}