/* OSD en celular. Todo vive dentro de la consulta de medios: en escritorio
   (768px o más) esta hoja no pinta nada, salvo el botón y el fondo, que nacen
   ocultos. Cargada después del <style> de base.html. */

.tb-menu,
.sb-fondo {
    display: none;
}

/* Barra de acciones sobre lo seleccionado (pantallas de gestión). En escritorio
   no tiene caja: sus botones siguen en la barra de arriba como siempre. */
.osd-barra-seleccion {
    display: contents;
}
.osd-solo-barra {
    display: none;
}
/* Tarjetas de las pantallas de gestión: la barra de arriba y los rótulos de
   los botones solo existen en celular. */
.osd-tarjetas-barra,
.osd-solo-movil {
    display: none;
}

@media (max-width: 767.98px) {
    /* El menú fijo sale del flujo y vuelve como cajón. El colapsado de
       escritorio (body.sb-collapsed) no aplica aquí: son dos comportamientos. */
    #sidebar,
    body.sb-collapsed #sidebar {
        top: var(--tb-height);
        bottom: 0;
        width: min(17.5rem, 86vw);
        min-height: 0;
        height: auto;
        z-index: 1040;
        transform: translateX(-100%);
        transition: transform 0.22s ease;
    }
    body.sb-movil-abierto #sidebar {
        transform: translateX(0);
    }

    body.sb-collapsed .sb-brand {
        padding: 20px 18px 16px;
    }
    body.sb-collapsed .sb-brand a {
        justify-content: flex-start;
        padding: 0;
    }
    body.sb-collapsed .sb-brand span,
    body.sb-collapsed .sb-label,
    body.sb-collapsed .sb-chevron,
    body.sb-collapsed .sb-section-label {
        opacity: 1;
        width: auto;
        overflow: hidden;
        white-space: nowrap;
        padding: initial;
        margin: initial;
        display: revert;
    }
    body.sb-collapsed #sidebar .sb-link {
        justify-content: flex-start;
        padding: 10px 12px !important;
    }
    body.sb-collapsed #sidebar .sb-link[data-bs-toggle="collapse"] .sb-chevron {
        display: revert;
    }
    body.sb-collapsed #sidebar .sb-submenu .sb-link {
        justify-content: flex-start;
        padding: 8px 12px 8px 34px !important;
    }
    body.sb-collapsed #sidebar .sb-submenu .sb-submenu .sb-link {
        padding-left: 48px !important;
    }
    body.sb-collapsed #sidebar .sb-submenu::before {
        display: block;
    }
    body.sb-collapsed .sb-toggle i {
        transform: none;
    }
    /* El chevron de colapsar es de escritorio. En el celular abre el cajón el
       botón de la barra. */
    .sb-toggle {
        display: none;
    }

    .sb-fondo {
        display: none;
        position: fixed;
        top: var(--tb-height);
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0, 18, 32, 0.45);
        z-index: 1030;
    }
    body.sb-movil-abierto .sb-fondo {
        display: block;
    }

    #main-wrapper,
    body.sb-collapsed #main-wrapper {
        margin-left: 0;
        max-width: 100%;
    }
    #page-content {
        max-width: 100%;
    }

    /* Barra superior: el menú ya no ocupa ancho, así que las cuentas que
       restaban --sb-width sobran. Todo cabe en una línea. */
    #topbar {
        z-index: 1045;
        gap: 0.25rem;
        padding: 0 0.5rem;
    }
    .tb-menu {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 2.75rem;
        height: 2.75rem;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: var(--radius-sm);
        background: transparent;
        color: var(--text-muted);
        font-size: 1.5rem;
        line-height: 1;
        cursor: pointer;
    }
    .tb-menu:hover,
    .tb-menu:focus-visible {
        background: var(--orange-lt);
        color: var(--orange);
        outline: none;
    }
    .tb-search-wrap {
        padding: 0;
    }
    .tb-search-inner,
    .tb-search-inner:focus-within,
    body.sb-collapsed .tb-search-inner,
    body.sb-collapsed .tb-search-inner:focus-within {
        max-width: none;
        width: 100%;
        gap: 0.35rem;
    }
    #busqueda_rapida {
        min-width: 0;
        padding: 0 0.75rem !important;
    }
    .tb-faqs-btn {
        height: 2.75rem;
        padding: 0 0.65rem;
    }
    .tb-faqs-btn span {
        display: none !important;
    }
    .tb-actions {
        gap: 0.15rem;
    }
    .tb-btn {
        min-width: 2.75rem;
        height: 2.75rem;
        padding: 0 0.35rem;
    }
    #topbar .tb-user {
        height: 2.75rem;
        padding: 0 0.45rem 0 0.25rem;
        gap: 0;
    }
    #topbar .tb-user > span {
        display: none;
    }

    #ul_notificaciones.dropdown-menu,
    body.sb-collapsed #ul_notificaciones.dropdown-menu {
        width: min(40rem, calc(100vw - 1rem)) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 1rem) !important;
    }
    #ul_tareas.dropdown-menu,
    body.sb-collapsed #ul_tareas.dropdown-menu {
        max-width: calc(100vw - 1rem) !important;
    }

    /* iOS amplía la página si el campo enfocado mide menos de 16px.
       !important porque osd-lista-checks.css se carga en el cuerpo, después
       de esta hoja, y si no el buscador de las listas se queda en 13px. */
    #page-content .form-control,
    #page-content .form-select,
    #page-content textarea,
    #page-content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="reset"]),
    #busqueda_rapida,
    .osd-colf input,
    .osd-lch-buscar,
    .osd-lch-nativo,
    .select2-search__field {
        font-size: 16px !important;
    }

    /* Área de toque de los iconos de tabla y de las casillas de una fila. */
    #page-content table .td-icon,
    #page-content table .th_icon {
        width: auto;
        min-width: 2.75rem;
    }
    #page-content table .td-icon a,
    #page-content table .th_icon a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 2.75rem;
        min-height: 2.75rem;
    }
    /* La casilla dibujada a 44px se veía como un bloque naranja enorme (fichas y
       formularios de Agente, etc.): 22px, que se acierta bien con el dedo. */
    #page-content table input[type="checkbox"]:not([hidden]) {
        width: 1.375rem;
        height: 1.375rem;
        min-width: 1.375rem;
        min-height: 1.375rem;
    }

    /* Opciones de los desplegables propios: medían ~25px de alto, poco para
       el dedo. La lista crece para que sigan viéndose varias a la vez; si no
       cabe, el JS la recorta al sitio que deja la pantalla (o el teclado). */
    /* !important: el widget va dentro del .form-group de cada pantalla, y sus
       reglas de label (Listados: 2.5em) le ganaban. */
    .osd-lch .osd-lch-opcion {
        min-height: 2.75rem !important;
    }
    .osd-lch .osd-lch-lista {
        max-height: 16rem;
    }
    /* El embudo de columna mide 14x11px. Se agranda solo la zona que recibe
       el toque, no el botón: así el encabezado no se ensancha. */
    #page-content .osd-colf-btn {
        position: relative;
    }
    #page-content .osd-colf-btn::after {
        content: "";
        position: absolute;
        inset: -0.875rem -0.4rem;
    }

    /* Formularios y fichas (Nuevo / Modificar / Ver / Eliminar): son tablas de
       dos columnas con la etiqueta al 32%, que en celular partía las palabras
       letra a letra. Aquí cada fila es un bloque con la etiqueta encima del
       campo, a todo el ancho. Solo CSS: el HTML y sus id siguen iguales. */
    #page-content table.tabla-nuevo-modificar,
    #page-content table.tabla-ver,
    #page-content table.tabla-nuevo-modificar > tbody,
    #page-content table.tabla-ver > tbody,
    #page-content table.tabla-nuevo-modificar > tbody > tr,
    #page-content table.tabla-ver > tbody > tr {
        display: block;
        width: 100%;
        max-width: 100%;
    }
    #page-content table.tabla-nuevo-modificar > tbody > tr > th,
    #page-content table.tabla-nuevo-modificar > tbody > tr > td,
    #page-content table.tabla-ver > tbody > tr > th,
    #page-content table.tabla-ver > tbody > tr > td {
        display: block;
        width: 100% !important;
        /* Algunas pantallas topan la etiqueta (Cliente: 280px) y la franja
           se quedaba corta en celulares anchos. */
        max-width: none;
        white-space: normal !important;
        word-break: normal;
        overflow-wrap: break-word;
        border-width: 0 1px;
    }
    #page-content table.tabla-nuevo-modificar > tbody > tr > th,
    #page-content table.tabla-ver > tbody > tr > th {
        padding: 0.6rem 0.75rem 0.2rem;
        border-top-width: 1px;
        font-size: 0.8125rem;
    }
    #page-content table.tabla-nuevo-modificar > tbody > tr > td,
    #page-content table.tabla-ver > tbody > tr > td {
        padding: 0.2rem 0.75rem 0.6rem;
    }
    #page-content table.tabla-nuevo-modificar > tbody > tr:last-child > :last-child,
    #page-content table.tabla-ver > tbody > tr:last-child > :last-child {
        border-bottom-width: 1px;
    }
    /* La tercera celda es la de errores: vacía no ocupa sitio. */
    #page-content table.tabla-nuevo-modificar > tbody > tr > td:nth-child(3):not(:has(.errorlist)) {
        display: none;
    }
    #page-content table.tabla-nuevo-modificar > tbody > tr > td:nth-child(3) {
        padding-top: 0;
    }

    /* Paginación: el "Página X de Y" arriba en su propia línea y los botones
       repartidos en una sola fila debajo, en vez de saltar de línea sueltos. */
    #page-content #paginacion_osd {
        gap: 0.5rem;
    }
    #page-content #paginacion_osd strong {
        order: -1;
        flex: 1 0 100%;
        text-align: center;
        font-size: 0.85rem;
    }
    #page-content #paginacion_osd a {
        flex: 1 1 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 2.75rem;
        padding: 0 0.25rem;
        font-size: 0.85rem;
        white-space: nowrap;
    }

    /* En celular, Eliminar / Inactivar / Activar no se quedan arriba: salen en
       una barra fija abajo, y solo mientras haya algo marcado en la tabla. */
    #page-content .osd-barra-seleccion {
        display: none;
    }
    body:has(#frm_gestionar input[type="checkbox"]:checked) #page-content .osd-barra-seleccion {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        gap: 0.5rem;
        margin: 0;
        padding: 0.625rem 1rem calc(0.625rem + env(safe-area-inset-bottom));
        background: var(--surface);
        border-top: 1px solid var(--border);
        box-shadow: 0 -4px 12px rgba(0, 42, 75, 0.12);
    }
    #page-content .osd-barra-seleccion > .btn {
        flex: 1 1 0;
        justify-content: center;
        gap: 0.25rem;
        background: var(--surface);
    }
    #page-content .osd-barra-seleccion .osd-solo-barra {
        display: inline;
    }
    /* Que la barra no tape la última fila ni la paginación. */
    body:has(#frm_gestionar input[type="checkbox"]:checked) #page-content {
        padding-bottom: 5.5rem;
    }

    /* Tarjetas de gestión (Clientes, Agentes, Administradores): cada fila de
       la tabla es una ficha. Arriba la casilla, el nombre y "Inactivo" si lo
       está; debajo los datos con su rótulo; al pie los botones de la fila con
       su texto. Tocar la ficha abre la vista, como la fila en escritorio. Las
       celdas se marcan en la plantilla: tj-check, tj-titulo, tj-estado,
       tj-dato, tj-accion y tj-oculto. Encima va .osd-tarjetas-barra con el
       orden y "Seleccionar todos", que se pierden al ocultar los encabezados. */
    #page-content .osd-tarjetas-barra {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        margin-bottom: 0.5rem;
    }
    #page-content .osd-tarjetas-barra .osd-orden {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    #page-content .osd-tarjetas-barra .osd-orden label {
        flex: 0 0 auto;
        margin: 0;
        color: var(--text-muted);
        font-size: 0.85rem;
        font-weight: 600;
    }
    #page-content .osd-tarjetas-barra .osd-orden select {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 2.75rem;
    }
    #page-content .osd-tarjetas-barra .osd-orden-sentido {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.75rem;
        height: 2.75rem;
        padding: 0;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--surface);
        color: var(--text-main);
        font-size: 1.2rem;
    }
    #page-content .osd-tarjetas-barra .osd-orden-sentido:disabled {
        color: var(--text-muted);
        opacity: 0.5;
    }
    #page-content .osd-tarjetas-barra .osd-sel-todos {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        min-height: 2.75rem;
        margin: 0;
        /* La casilla queda en la misma vertical que las de las tarjetas. */
        padding: 0 0.9375rem;
        color: var(--text-main);
        font-size: 0.9rem;
        font-weight: 600;
        cursor: pointer;
    }
    #page-content .osd-sel-caja {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 1.375rem;
        height: 1.375rem;
        border: 2px solid #64748b;
        border-radius: 0.25rem;
        background: #fff;
        color: #fff;
        font-size: 1rem;
    }
    #page-content .osd-sel-caja i {
        visibility: hidden;
    }
    body:has(#select_all:checked) #page-content .osd-sel-caja {
        border-color: var(--orange);
        background: var(--orange);
    }
    body:has(#select_all:checked) #page-content .osd-sel-caja i {
        visibility: visible;
    }

    /* Los envoltorios de las tablas tienen borde y desplazamiento lateral:
       con tarjetas dentro quedaba caja dentro de caja. */
    #page-content .osd-tarjetas-wrap:has(table.osd-tarjetas) {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
    }
    #page-content table.osd-tarjetas {
        display: block;
        width: 100%;
        min-width: 0 !important;
        table-layout: auto;
        border: 0;
        background: transparent;
    }
    #page-content table.osd-tarjetas thead {
        display: none;
    }
    #page-content table.osd-tarjetas tbody {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    /* Sin !important en display: el filtro por columnas oculta filas con
       display:none en línea y tiene que poder ganar. */
    #page-content table.osd-tarjetas tbody tr,
    #page-content table.osd-tarjetas tbody tr:nth-child(even) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 0.5rem;
        row-gap: 0.15rem;
        padding: 0.35rem 0.75rem 0;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        overflow: hidden;
        cursor: pointer;
    }
    #page-content table.osd-tarjetas tbody tr:active {
        background: var(--orange-lt);
    }
    /* estilos.css da a toda celda min-height 30px y max-width 220px, y
       Bootstrap les pone borde y sombra de rayado. */
    #page-content table.osd-tarjetas tbody td {
        display: block;
        width: auto !important;
        min-width: 0;
        max-width: none;
        min-height: 0;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        text-align: left !important;
        font-size: 0.85rem;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }
    #page-content table.osd-tarjetas tbody td.tj-oculto,
    #page-content table.osd-tarjetas tbody td.tj-estado[data-activo="1"],
    #page-content table.osd-tarjetas tbody td.tj-dato:empty {
        display: none;
    }
    #page-content table.osd-tarjetas tbody td.tj-check {
        order: 0;
        flex: 0 0 2.75rem;
        align-self: flex-start;
        margin-left: -0.5rem;
    }
    #page-content table.osd-tarjetas tbody td.tj-check > label {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.75rem;
        min-height: 2.75rem;
        margin: 0;
        cursor: pointer;
    }
    #page-content table.osd-tarjetas tbody td.tj-titulo {
        order: 1;
        flex: 0 1 auto;
        /* Tope del ancho que deja la casilla: sin él un nombre largo mide su
           línea entera y salta debajo de la casilla en vez de partirse. */
        max-width: calc(100% - 2.75rem) !important;
        color: var(--text-main);
        font-size: 0.95rem;
        font-weight: 600;
    }
    /* Solo se marca lo inactivo: "Activo: Sí" en cada ficha es ruido. La
       celda conserva el Sí/No para el filtro por columnas. */
    #page-content table.osd-tarjetas tbody td.tj-estado {
        order: 2;
        margin-left: auto;
        font-size: 0 !important;
    }
    #page-content table.osd-tarjetas tbody td.tj-estado::before {
        content: "Inactivo";
        display: inline-block;
        padding: 0.15rem 0.6rem;
        border-radius: 999px;
        background: var(--bg-body);
        color: var(--text-muted);
        font-size: 0.75rem;
        font-weight: 600;
        white-space: nowrap;
    }
    #page-content table.osd-tarjetas tbody td.tj-dato {
        order: 3;
        flex: 1 0 100%;
        /* Alineado con el nombre: casilla (2.75rem) - su margen (0.5) + hueco (0.5). */
        padding: 0 0 0 2.75rem !important;
        color: var(--text-muted);
    }
    #page-content table.osd-tarjetas tbody td.tj-dato[data-label]::before {
        content: attr(data-label) ": ";
        font-weight: 600;
    }
    #page-content table.osd-tarjetas tbody td.tj-accion {
        order: 4;
        flex: 1 1 0;
        margin-top: 0.5rem;
        border-top: 1px solid var(--border) !important;
    }
    #page-content table.osd-tarjetas tbody td.tj-accion + td.tj-accion {
        border-left: 1px solid var(--border) !important;
    }
    #page-content table.osd-tarjetas tbody td.tj-accion a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        min-height: 2.75rem;
        color: var(--text-main) !important;
        font-size: 0.85rem;
        font-weight: 600;
        text-decoration: none;
    }
    #page-content table.osd-tarjetas tbody td.tj-accion a.tj-peligro {
        color: #c92a2a !important;
    }
    #page-content .osd-solo-movil {
        display: inline;
    }
}

@media print {
    .tb-menu,
    .sb-fondo {
        display: none !important;
    }
}