/* Estilos específicos del panel de administración */

/* Utilidad: cursor pointer para elementos interactivos en el admin */
.cursor-pointer {
    cursor: pointer;
}

/* Estilos para placeholders y preview en admin/servicios_cards.php */
.img-placeholder {
    width: 60px;
    height: 45px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    font-size: 12px;
}

.preview-container {
    position: relative;
    display: inline-block;
}

.card-preview {
    transition: transform 0.2s ease;
}

.card-preview:hover { transform: scale(1.05); }

/* Utilidades adicionales migradas desde HTML/JS inline */
.toggle-password-btn {
    position: absolute;
    top: 38px;
    right: 12px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}
.text-danger-small { color: #c0392b; }
.img-thumb { width: 60px; height: 45px; object-fit: cover; border-radius: 4px; display: inline-block; }
.img-thumb-small { width: 80px; height: 48px; object-fit: cover; border-radius: 4px; }
.inline-form { display: inline-block; }
.preview-hidden { display: none; }
.img-preview { max-width: 200px; max-height: 150px; }
.img-preview-large { max-width:100%; max-height:200px; object-fit:cover; border-radius:6px; }
/* .drag-handle se define completamente en estilos.css para drag & drop; aquí evitamos sobreescribirla. */
/* .drag-handle { display: none; }  -- eliminado por duplicidad */
.thumb-cell { width: 90px; }
/* Estilos movidos desde layout.php */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 220px;
    background: #212529;
    color: #fff;
    transform: translateX(-100%);
    transition: transform 0.3s;
    z-index: 1050;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08);
}
.sidebar.open {
    transform: translateX(0);
}
.sidebar .sidebar-header {
    padding: 1.2rem;
    font-size: 1.2rem;
    border-bottom: 1px solid #343a40;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sidebar .nav-link {
    color: #fff;
    padding: 0.8rem 1.2rem;
    display: block;
    border-bottom: 1px solid #343a40;
    text-decoration: none;
    transition: background 0.2s;
}
.sidebar .nav-link:hover {
    background: #343a40;
}
.sidebar .sidebar-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1rem;
    border-top: 1px solid #343a40;
    font-size: 0.95rem;
    color: #adb5bd;
}
.sidebar-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.2);
    z-index: 1049;
    display: none;
}
.sidebar-backdrop.open {
    display: block;
}
.sidebar-toggle {
    background: none;
    border: none;
    color: #212529;
    font-size: 2rem;
    margin-right: 1rem;
    cursor: pointer;
}
@media (max-width: 768px) {
    .sidebar {
        width: 80vw;
    }
}
.admin-header {
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    padding: 0.8rem 1.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.admin-footer {
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
    padding: 1rem;
    text-align: center;
    color: #6c757d;
    margin-top: 2rem;
}
.admin-content {
    margin-left: 0;
    transition: margin-left 0.3s;
}
@media (min-width: 768px) {
    .admin-content.sidebar-open {
        margin-left: 220px;
    }
}
/* Margen inferior para el input de búsqueda de DataTables */
.dataTables_filter input {
    margin-bottom: 0.5rem;
}
/* Estilos para botones de exportación (solo icono blanco) */
.dt-btn-icon i.fas {
    color: #fff;
    font-size: 1rem;
}
.dt-buttons-container .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 6px;
}

/* Botón elegante "Volver al panel" */
.btn-back-panel {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.9rem;
    border-radius: 8px;
    /* Allow Bootstrap btn-primary/background to show through */
    color: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    text-decoration: none;
    border: none;
}
.btn-back-panel i {
    color: #fff;
}

/* Forzar colores de Bootstrap en botones de exportación dentro del contenedor DataTables */
.dt-buttons-container .btn {
    color: #fff; /* iconos en blanco */
}
.dt-buttons-container .btn.btn-success {
    background-color: #198754; /* Bootstrap success */
    border-color: #198754;
}
.dt-buttons-container .btn.btn-success:hover,
.dt-buttons-container .btn.btn-success:focus {
    background-color: #157347;
    border-color: #146c43;
}
.dt-buttons-container .btn.btn-danger {
    background-color: #dc3545; /* Bootstrap danger */
    border-color: #dc3545;
}
.dt-buttons-container .btn.btn-danger:hover,
.dt-buttons-container .btn.btn-danger:focus {
    background-color: #bb2d3b;
    border-color: #b02a37;
}

/* Reglas más específicas para anular estilos de Buttons/DataTables que aplican degradados */
.dt-buttons-container button.btn,
.dt-buttons-container a.btn {
    background-image: none !important;
    background-repeat: none !important;
    background-size: auto !important;
    color: #fff !important;
    border: 1px solid transparent !important;
}
.dt-buttons-container button.btn.btn-success,
.dt-buttons-container a.btn.btn-success {
    background-color: #198754 !important;
    border-color: #198754 !important;
}
.dt-buttons-container button.btn.btn-success:hover,
.dt-buttons-container a.btn.btn-success:hover {
    background-color: #157347 !important;
    border-color: #146c43 !important;
}
.dt-buttons-container button.btn.btn-danger,
.dt-buttons-container a.btn.btn-danger {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
}
.dt-buttons-container button.btn.btn-danger:hover,
.dt-buttons-container a.btn.btn-danger:hover {
    background-color: #bb2d3b !important;
    border-color: #b02a37 !important;
}
.dt-buttons-container button.btn .fas,
.dt-buttons-container a.btn .fas {
    color: #fff !important;
}

/* Reglas de alta especificidad para anular estilos de DataTables Buttons */
/* Aplica a botones generados por Buttons: .dt-button, .buttons-excel, .buttons-pdf */
button.dt-button, a.dt-button, .dt-button {
    background-image: none !important;
    background-repeat: none !important;
    background-size: auto !important;
    box-shadow: none !important;
    border-radius: 6px !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
}

/* Excel (buttons-excel / buttons-html5) */
button.dt-button.buttons-excel, a.dt-button.buttons-excel,
button.dt-button.buttons-excel.btn, a.dt-button.buttons-excel.btn {
    background-color: #198754 !important;
    border-color: #198754 !important;
    color: #fff !important;
}
button.dt-button.buttons-excel:hover, a.dt-button.buttons-excel:hover {
    background-color: #157347 !important;
    border-color: #146c43 !important;
}

/* PDF */
button.dt-button.buttons-pdf, a.dt-button.buttons-pdf,
button.dt-button.buttons-pdf.btn, a.dt-button.buttons-pdf.btn {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #fff !important;
}
button.dt-button.buttons-pdf:hover, a.dt-button.buttons-pdf:hover {
    background-color: #bb2d3b !important;
    border-color: #b02a37 !important;
}

/* Asegurar que los iconos dentro de los dt-button sean blancos */
button.dt-button .fas, a.dt-button .fas, .dt-button .fas {
    color: #fff !important;
    font-size: 1rem !important;
}

/* Dashboard: iconos de módulos y buscador plegable (sin salto de layout) */
.module-icon { line-height:1; font-size:4rem; width:100%; }
.module-search-wrapper { position:relative; display:flex; align-items:center; }
/* Mantener el botón en el flujo (evita reflow); ocultar visualmente al abrir */
.module-search-toggle { transition:opacity .25s ease; }
.module-search-wrapper.search-open .module-search-toggle { opacity:0; pointer-events:none; }
/* El contenedor expandido se superpone de forma absoluta para no empujar contenido */
.module-search-expanded { position:absolute; top:0; right:0; width:420px; max-width:80vw; opacity:0; pointer-events:none; transform:scaleX(.6) translateY(-2px); transform-origin:right center; transition:opacity .25s ease, transform .25s ease; }
.module-search-expanded.show { opacity:1; pointer-events:auto; transform:scaleX(1) translateY(0); }
.module-search-expanded .input-group { box-shadow:0 0 0 .15rem rgba(13,110,253,.15); }
@media (max-width:600px){
    .module-search-expanded { width:100vw; left:auto; right:0; }
}

/* ===== Select Empresa (Certificados) ===== */
.select-empresa-wrapper { position: relative; margin-bottom:.5rem; }
.select-empresa-wrapper .icono-select-empresa { position:absolute; top:7px; left:10px; color:#0d6efd; pointer-events:none; font-size:1rem; }
.select-empresa-wrapper .select2-container .select2-selection--single { border:2px solid #0d6efd; box-shadow:0 0 0 .15rem rgba(13,110,253,.15); padding-left:34px; height:44px; display:flex; align-items:center; }
.select-empresa-wrapper .select2-selection__rendered { font-weight:500; }
.select-empresa-wrapper .select2-container .select2-selection--single:hover { border-color:#084298; }
.select-empresa-wrapper .select2-dropdown { border:2px solid #0d6efd; }
.select-empresa-wrapper .select2-results__option { font-size:.875rem; }
.select-empresa-wrapper .select2-results__option--highlighted { background:#0d6efd; color:#fff; }