/* =========================================================
   Mejoras responsivas (tablet y móvil) — carga después de
   sb-admin-2 para poder sobrescribir. Solo afecta pantallas
   chicas / dispositivos táctiles; el desktop queda igual.
   ========================================================= */

/* Scroll horizontal suave en tablas anchas (DataTables, etc.) */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

/* ---------- Móvil (teléfono) ---------- */
@media (max-width: 767.98px) {
    /* Aprovechar el ancho: menos padding lateral */
    .container-fluid {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* Tablas más compactas para que quepa más */
    .table {
        font-size: 0.85rem;
    }
    .table td,
    .table th {
        padding: 0.4rem 0.35rem;
    }

    /* Controles de DataTables apilados y centrados (no se salen) */
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        text-align: center !important;
        float: none !important;
        width: 100%;
        margin-top: 0.5rem;
    }
    .dataTables_wrapper .dataTables_filter label {
        width: 100%;
    }
    .dataTables_wrapper .dataTables_filter input {
        width: 100%;
        margin-left: 0;
        margin-top: 0.25rem;
    }

    /* Botones de acción en tablas: fila pareja y separada (no apilados).
       Como hay <form> y <a> mezclados, los mostramos como botones sueltos
       redondeados con un pequeño espacio entre ellos. Si no caben, el
       contenedor .table-responsive hace scroll horizontal. */
    td .btn-group {
        display: inline-flex;
        flex-wrap: nowrap;
        gap: 0.3rem;
        vertical-align: middle;
    }
    td .btn-group > form {
        display: inline-flex;
        margin: 0;
    }
    td .btn-group > .btn,
    td .btn-group > form > .btn {
        border-radius: 0.35rem !important;
    }

    /* Encabezados un poco más chicos */
    h1.h3 {
        font-size: 1.25rem;
    }

    /* Breadcrumb más compacto */
    .breadcrumb {
        font-size: 0.85rem;
    }
}

/* =========================================================
   Sidebar: riel de íconos delgado al COLAPSAR (desktop/tablet)
   SB Admin 2 deja la sidebar colapsada en ~104px con texto bajo
   el ícono (se ve ancha). Esto la hace un riel de ~70px solo-íconos,
   con los submenús en flyout al pasar el mouse.
   Solo aplica en >=768px; en móvil se respeta el comportamiento original.
   ========================================================= */
@media (min-width: 768px) {
    .sidebar.toggled {
        width: 70px !important;
        overflow: visible;
    }

    /* Ocultar todo el texto: deja solo los íconos */
    .sidebar.toggled .nav-item .nav-link span,
    .sidebar.toggled .sidebar-brand-text,
    .sidebar.toggled .sidebar-heading {
        display: none !important;
    }

    /* Ícono centrado y cómodo */
    .sidebar.toggled .nav-item .nav-link {
        width: 70px;
        text-align: center;
        padding: 0.8rem 0;
    }
    .sidebar.toggled .nav-item .nav-link i {
        font-size: 1.15rem;
        margin-right: 0;
    }

    /* Marca: solo el logo/ícono centrado */
    .sidebar.toggled .sidebar-brand {
        padding: 1rem 0;
    }
    .sidebar.toggled .sidebar-brand img {
        margin: 0 !important;
    }

    /* Divisores acordes al ancho angosto */
    .sidebar.toggled .sidebar-divider {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }

    /* Submenús (flyout) alineados al borde del riel */
    .sidebar.toggled .nav-item .collapse,
    .sidebar.toggled .nav-item .collapsing {
        left: 70px;
    }
}

/* =========================================================
   Ojito de "mostrar contraseña" DENTRO del input (sutil)
   ========================================================= */
.password-wrap {
    position: relative;
}
.password-wrap .toggle-password {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
    border: 0;
    background: transparent;
    color: #b7b9cc;
    cursor: pointer;
    z-index: 5;
}
.password-wrap .toggle-password:hover {
    color: #4e73df;
}
/* Deja espacio a la derecha para que el texto no quede bajo el ícono */
.password-wrap input.form-control {
    padding-right: 2.5rem;
}

/* ---------- Dispositivos táctiles (tablet/móvil) ---------- */
@media (pointer: coarse) {
    /* Targets cómodos para el dedo */
    .btn,
    .form-control,
    .form-select,
    .custom-select {
        min-height: 42px;
    }
    .btn-icon {
        min-width: 42px;
    }
    /* Checkboxes/radios un poco más grandes (roles, permisos) */
    .form-check-input {
        width: 1.15rem;
        height: 1.15rem;
    }
}