/*
 * Listados y formularios adaptados a movil.
 *
 * Tablas: con la clase .xq-tarjetas, en pantallas estrechas cada fila se
 * muestra como una tarjeta y cada celda con su titulo delante (el titulo lo
 * pone js/xequea-common.js a partir de la cabecera). Celdas especiales:
 *   .xq-principal  el dato principal (nombre), sin titulo y destacado
 *   .xq-acciones   los botones, alineados abajo
 */
/* style.css pone box-sizing: content-box a todos los input, y con eso los campos
   de Bootstrap (width: 100% + relleno + borde) se salen de su columna. */
.form-control, .form-select { box-sizing: border-box; }
/* Evita el desplazamiento lateral de unos pocos pixeles en movil. */
body { overflow-x: clip; }

@media (max-width: 767.98px) {
    table.xq-tarjetas thead { display: none; }
    table.xq-tarjetas, table.xq-tarjetas tbody, table.xq-tarjetas tr { display: block; width: 100%; }
    table.xq-tarjetas tr {
        background: #fff; border: 1px solid #e9ecef; border-radius: .6rem;
        margin: 0 0 .75rem; padding: .6rem .85rem; box-shadow: 0 1px 2px rgba(0,0,0,.04);
    }
    table.xq-tarjetas tbody tr:hover { background: #fff; }
    table.xq-tarjetas td, table.xq-tarjetas td.d-none {
        display: flex !important; justify-content: space-between; align-items: center; gap: 1rem;
        border: 0; padding: .2rem 0; text-align: right !important; min-height: 1.8rem;
    }
    table.xq-tarjetas td[data-label]::before {
        content: attr(data-label); font-weight: 600; color: #6c757d; text-align: left; flex: 0 0 auto;
    }
    table.xq-tarjetas td.xq-principal { font-size: 1.05rem; font-weight: 600; text-align: left !important; justify-content: flex-start; }
    table.xq-tarjetas td.xq-principal::before { display: none; }
    table.xq-tarjetas td.xq-acciones { justify-content: flex-end; border-top: 1px solid #f1f3f5; margin-top: .35rem; padding-top: .5rem; }
    table.xq-tarjetas td.xq-acciones::before { display: none; }
    table.xq-tarjetas td.xq-acciones .btn { min-width: 2.6rem; min-height: 2.4rem; }
    table.xq-tarjetas td.xq-vacia { display: block !important; text-align: center !important; }
    .xq-tabla-envoltorio { overflow: visible !important; }
    .xq-tabla-card { background: transparent !important; box-shadow: none !important; border: 0 !important; }

    /* Cabeceras de pagina: el titulo arriba y los botones debajo, a lo ancho */
    .xq-cabecera { flex-direction: column; align-items: stretch !important; gap: .75rem; }
    .xq-cabecera .xq-botones { display: grid !important; grid-template-columns: 1fr; gap: .5rem; }
    .xq-cabecera h2 { font-size: 1.45rem; }

    /* Formularios: campos a lo ancho y botones grandes */
    .xq-form .form-control, .xq-form .form-select, .xq-form .input-group { max-width: 100% !important; }
    .xq-form .xq-form-botones { display: grid !important; grid-template-columns: 1fr; gap: .5rem; }
    .xq-form .xq-form-botones .btn { width: 100%; }
    .modal-dialog { margin: .5rem; }

    /* Boton de acciones del listado de empleados en movil */
    td .d-md-none > .dropdown > .btn.dropdown-toggle, td .d-md-none .btn-group > .btn.dropdown-toggle {
        border-radius: .45rem !important; width: auto !important; height: auto !important;
        padding: .4rem .7rem !important; line-height: 1.2;
    }
}

/* Zonas que se actualizan sin recargar la pagina (xqRefrescar) */
[data-xq-zona] { transition: opacity .15s ease; }
.xq-cargando { opacity: .5; pointer-events: none; }
/* style.css da a todos los input relleno de 10px (content-box): las casillas,
   botones de opcion e interruptores salian enormes y pisaban su etiqueta. */
input[type="checkbox"], input[type="radio"] { padding: 0 !important; box-sizing: border-box !important; box-shadow: none; text-shadow: none; }

/* Ordenar tablas pulsando en el titulo de la columna (js/xequea-common.js) */
th.xq-ordenable { cursor: pointer; user-select: none; white-space: nowrap; }
th.xq-ordenable:hover { color: #b07c05; }
th.xq-ordenable:focus-visible { outline: 2px solid #F5B11B; outline-offset: -2px; }
th.xq-ordenable .xq-orden-ic { margin-left: .3rem; font-size: .72em; opacity: .4; vertical-align: .05em; }
th.xq-ordenable[aria-sort="ascending"] .xq-orden-ic, th.xq-ordenable[aria-sort="descending"] .xq-orden-ic { opacity: 1; color: #d99a06; }
.table-dark th.xq-ordenable:hover { color: #F5B11B; }