@charset "UTF-8";
/* ============================================================================
 * responsive-cms.css
 * Capa responsive del CMS Del Paso Tarifas.
 *
 * Se carga LA ULTIMA, despues de custom.css y pages.css. NO reordenar:
 * al ir al final gana todo empate de especificidad contra custom.css sin
 * necesitar !important. Solo se usa !important donde custom.css ya lo usa
 * (.d-flex, .fs-3rem, .sticky-top).
 *
 * !! BREAKPOINTS !! Este es un build RECOMPILADO de Limitless sobre
 * Bootstrap 3.3.5, NO Bootstrap estandar. Los 767/991/1199 de BS3 NO EXISTEN.
 *
 *   xs   <= 768px   sidebar display:none, .visible-xs-block activo,
 *                   col-sm-* APAGADO, app.js entra en modo movil (app.js:568)
 *   sm   >= 769px   sidebar display:table-cell 260px, col-sm-* activo,
 *                   .container 769px, .page-container display:table
 *   md   >= 1025px  col-md-* activo,  .container 1025px
 *   lg   >= 1200px  col-lg-* activo,  .container 1200px
 *
 * Consecuencia: un layout que solo usa col-lg-* NO TIENE regla de anchura
 * de 1199px hacia abajo.
 * Corolario: toda media query max-width debe ser 1199 / 1024 / 768 / 480.
 *
 * Primitivas que YA existen -- reutilizar, no reinventar
 * (components.css:16835, en estos mismos breakpoints):
 *   .datatable-scroll-wrap  overflow-x:auto siempre
 *   .datatable-scroll-sm    scroll <= 768
 *   .datatable-scroll       scroll <= 1024
 *   .datatable-scroll-lg    scroll <= 1199
 * Y components.css:17440-17534 ya trae todo el CSS de DataTables Responsive
 * (.dtr-*, tr.child, iconos + / -). No hace falta anadir ninguna hoja.
 *
 * CONVENCION: dentro de cada seccion, los bloques max-width van de MAYOR a
 * MENOR (1199 -> 1024 -> 768 -> 480) para que el mas estrecho gane los empates.
 * Los nombres de utilidades siguen el backport BS5 de custom.css
 * (.d-*, .w-*, .p-*, .fw-*).
 *
 * Cache-busting: res() no versiona. SUBIR el ?00N de default.blade.php en
 * cada deploy de este archivo.
 * ========================================================================== */


/* ============================================================================
 * L1 -- GLOBAL GUARDS
 * ========================================================================== */

/* Las imagenes y los embeds nunca deben forzar scroll horizontal. */
img,
embed,
object,
video,
iframe {
    max-width: 100%;
}

/* Palabras largas (nombres de grupo, emails) dentro de celdas estrechas. */
@media (max-width: 768px) {
    .page-title h1,
    .panel-title,
    .breadcrumb > li {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}


/* ============================================================================
 * L2 -- GRID MISUSE REPAIR
 * ========================================================================== */

/* --- .row.d-flex -----------------------------------------------------------
 * custom.css:98 es `.d-flex{display:flex!important}` SIN flex-wrap. Nueve
 * vistas usan `<div class="row d-flex">` cuyos unicos hijos son col-lg-*, que
 * por debajo de 1200px no tienen NINGUNA regla de anchura -> se quedan lado a
 * lado para siempre como items flex dimensionados por contenido.
 *
 * flex-wrap no basta: un item envuelto sin anchura sigue midiendose por su
 * contenido. Lo correcto es dejar de ser contenedor flex y volver al
 * float+clearfix de BS3, que si los apila a ancho completo.
 *
 * Afecta: setting/parameters/config_parameter.blade.php:10,
 *   setting/parameters/agency_assignment.blade.php:23 (suma 14/12),
 *   setting/parameters/group_assignment.blade.php:23 (suma 14/12),
 *   rate/assignment/stop_sales_date_group.blade.php:23,
 *   rate/assignment/stop_sales_agencies_groups.blade.php:23,
 *   rate/assignment/stop_sales_agencies.blade.php:23,
 *   rate/modification/modify.blade.php:11,
 *   rate/modification/modifypack.blade.php:37,
 *   layouts/footer.blade.php:3 (excepcion, ver abajo)
 * -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
    /* !important obligatorio: custom.css:98 lo usa. Cero efecto >=1200px. */
    .row.d-flex {
        display: block !important;
    }

    /* El footer SI tiene col-sm-4 (con anchura real de 769 a 1199), asi que
       ahi flex + wrap es lo correcto. */
    .footer .row.d-flex {
        display: flex !important;
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    /* col-sm-* apagado -> apilar. */
    .footer .row.d-flex {
        display: block !important;
    }
}

@media (min-width: 1200px) {
    /* Las filas que suman 14/12 desbordan HOY porque flex no envuelve.
       Solo puede mejorar un caso ya roto. */
    .row.d-flex {
        flex-wrap: wrap;
    }
}

/* --- clases grid sobre <th> / <td> -----------------------------------------
 * Bootstrap da a todo .col-* `position:relative; min-height:1px; padding:0 10px`
 * incondicionalmente, mas `float:left` (siempre en col-xs-*, en su breakpoint
 * el resto). Sobre una celda de tabla eso fuerza display:block + float y
 * DESTRUYE la fila, hoy, en escritorio.
 *
 * Se quita el dano de box model conservando los porcentajes de anchura, que
 * si son utiles como pista de columna. table-layout:auto normaliza que las
 * sumas sean 10/11/13/15 en vez de 12.
 *
 * Afecta: setting/parameters/agency_assignment.blade.php:33-40,
 *   setting/parameters/group_assignment.blade.php:33-37,
 *   setting/parameters/agency/agency_list.blade.php:15-18,
 *   setting/parameters/group/group_list.blade.php:15-18,
 *   user_cms/index.blade.php:15-19,
 *   setting/parameters/partials/_tables.blade.php:11-13
 * -------------------------------------------------------------------------- */
th[class*="col-xs-"],
th[class*="col-sm-"],
th[class*="col-md-"],
th[class*="col-lg-"],
td[class*="col-xs-"],
td[class*="col-sm-"],
td[class*="col-md-"],
td[class*="col-lg-"] {
    float: none !important;
    display: table-cell !important;
    position: static;
    min-height: 0;
    padding-left: 8px;
    padding-right: 8px;
}


/* ============================================================================
 * L3 -- CHROME . NAVBAR
 * ========================================================================== */

/* custom.css:41-49 da al brand `display:flex` + `width:100%`. A <=768px BS3
 * NO flota .navbar-brand (solo lo hace a >=769px), asi que con width:100% se
 * come toda la fila de .navbar-header y el <ul class="visible-xs-block"> de
 * los toggles (core.css:3117 float:right) cae a una segunda linea.
 * Ademas core.css:3111 pone `.navbar-header{min-width:260px}` SIN media query,
 * mas ancho que un movil de 375px menos padding.
 * -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .navbar-default .navbar-brand,
    .navbar-brand {
        width: auto;
        float: left;
        justify-content: flex-start;
        padding-left: 20px;
    }

    .navbar-header {
        min-width: 0;
        width: 100%;
    }

    .navbar-header .navbar-nav.visible-xs-block {
        float: right;
        margin-right: 5px;
    }

    .navbar-brand > img {
        height: 30px;
    }

    /* El menu de usuario desplegado a ancho completo, no una columna de 1px. */
    .navbar-collapse .navbar-right {
        margin-right: 0;
    }
}


/* ============================================================================
 * L4 -- CHROME . FOOTER
 * ========================================================================== */

/* EL BUG DE MAYOR IMPACTO DE LA APP.
 *
 * .footer es `position:absolute; bottom:30px` (components.css:1163) contra
 * .page-container (`position:relative`, components.css:1064), desplazado por
 * custom.css:64 `left:290px; right:30px`. Dentro lleva un <div class="container">
 * (footer.blade.php:2) que es un ancho DURO de 769/1025/1200px.
 *
 * A 1200px de viewport: la caja del footer mide ~880px y el container dentro
 * mide 1200px -> 320px de desborde horizontal en TODA pagina autenticada, a
 * TODO ancho de escritorio.
 *
 * Esta primera regla es la que carga el peso y arregla todos los anchos.
 *
 * El login ya esta bien: components.css:18381 `.login-container .footer
 * {left:0;right:0}` es 0,2,0 y gana a custom.css (0,1,0) independientemente
 * del orden de archivos. De ahi el :not(.login-container) en todo lo que
 * suba de 0,1,0.
 * -------------------------------------------------------------------------- */
body:not(.login-container) .footer > .container {
    width: auto;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

/* Los TRES estados reales de sidebar en escritorio (app.js:374 y :397 hacen
   toggle de body.sidebar-xs -> 56px y body.sidebar-main-hidden -> 0).
   custom.css:64 tiene el 290px cableado y se equivoca en los dos. */
@media (min-width: 769px) {
    body:not(.login-container) .footer {
        left: 280px;
        right: 20px;
    }

    body.sidebar-xs:not(.login-container) .footer {
        left: 76px;
    }

    body.sidebar-main-hidden:not(.login-container) .footer,
    body.sidebar-all-hidden:not(.login-container) .footer {
        left: 20px;
    }
}

/* <=768px la sidebar es display:none, no hay nada que esquivar. Y un footer
   de 3 filas creciendo hacia arriba desde bottom:30px solaparia el contenido:
   se abandona el posicionamiento absoluto.
   Las dos reglas van ACOPLADAS -- el padding-bottom:90px de custom.css:93
   solo existe para reservar sitio al footer absoluto. */
@media (max-width: 768px) {
    body:not(.login-container) .footer {
        position: static;
        left: auto;
        right: auto;
        bottom: auto;
        padding: 20px 0;
    }

    body:not(.login-container) .content {
        padding-bottom: 20px;
    }

    .footer .footer-copyright,
    .footer .img-footer {
        margin-bottom: 10px;
    }
}


/* ============================================================================
 * L5 -- FORMS & TOUCH TARGETS
 * ========================================================================== */

/* custom.css:421 es `.form-control{height:23px}`, global e incondicional. Las
 * rejillas densas de entrada de tarifas dependen de esos 23px en escritorio,
 * asi que NO se borra: se descopa por debajo de 1025px.
 * 23px es la mitad del minimo tactil de 44px y recorta los pickers nativos
 * de fecha/hora en iOS y Android.
 * -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .form-control,
    select.form-control,
    textarea.form-control {
        height: auto;
        min-height: 38px;
        line-height: 1.4;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    textarea.form-control {
        min-height: 80px;
    }

    /* Los pickers nativos necesitan altura real o el widget se recorta. */
    input[type="date"].form-control,
    input[type="time"].form-control,
    input[type="month"].form-control,
    input[type="datetime-local"].form-control {
        min-height: 44px;
    }

    /* select2 (common.js:18 hace $('select').select2() global).
       OJO: este tema estiliza `.select2-selection--single` DIRECTAMENTE, no usa
       el modificador `.select2-container--default` de select2 4.x -- verificado,
       esa clase no aparece ni una vez en components.css. Un selector con
       --default no casaria con nada.
       Base del tema (components.css:2591): height 36px, padding 7px 0. */
    .select2-selection--single {
        height: 38px;
        padding: 8px 0;
    }

    .input-group-addon {
        padding: 6px 10px;
    }

    /* Casillas de uniform: area tactil util. */
    .checker,
    .radio > label,
    .checkbox > label {
        min-height: 24px;
    }
}

@media (max-width: 768px) {
    /* Un font-size < 16px dispara el auto-zoom de iOS al enfocar el campo.
       16px es el suelo, no una preferencia. */
    .form-control,
    select.form-control,
    textarea.form-control {
        font-size: 16px;
    }

    /* El cuadro visible de select2 es un <span>, no un control de formulario:
       iOS no hace auto-zoom sobre el. El riesgo real esta en el buscador que
       abre el desplegable, que SI es un <input>. */
    .select2-search__field {
        font-size: 16px !important;
    }

    /* select2 fija un ancho en px al inicializar y no lo recalcula al
       redimensionar. */
    .select2-container {
        width: 100% !important;
    }

    /* CARVE-OUTS OBLIGATORIOS. common.js:615/630 select2-ifica el <select> de
       longitud de pagina de DataTables; al 100% arrasa el pie del grid. */
    .dataTables_length .select2-container,
    .datatable-footer .select2-container,
    .input-group > .select2-container {
        width: auto !important;
    }

    /* form-horizontal: la etiqueta encima, no en su propia columna. */
    .form-horizontal .control-label {
        text-align: left;
        padding-bottom: 4px;
    }
}


/* ============================================================================
 * L6 -- TABLES
 * ========================================================================== */

/* Solo poner overflow-x NO HACE NADA: `.table{width:100%}` de BS3 encoge la
 * tabla y aplasta las celdas, nunca desborda, asi que no hay nada que
 * scrollear. Hace falta overflow-x EN EL CONTENEDOR y min-width EN LA TABLA.
 *
 * Se resuelve sin tocar 23 blades usando :has(). Si un navegador no lo
 * soporta la regla se descarta entera -> comportamiento actual, nunca peor.
 *
 * Las tablas del macro Html::myDataTable no necesitan nada: common.js:432-447
 * ya les inyecta .datatable-scroll via sDom y responsive:true. Se excluyen
 * con :not(.dataTable) para no pelear con sus calculos de anchura
 * (autoWidth:false + bStateSave hacen que un bug de anchura se quede pegado
 * entre sesiones).
 *
 * Verificado seguro contra los riesgos clasicos de crear un contexto de
 * overflow: select2 usa dropdownParent = body (no se recorta), pickadate no
 * aparece en ninguna vista con tabla (solo notification/edit:36), y los
 * botones .sticky-top viven en una col-lg-1 HERMANA, no dentro de la tabla.
 * -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
    .content [class*="col-"]:has(> table.table:not(.dataTable)),
    .content .panel:has(> table.table:not(.dataTable)),
    .content .panel-body:has(> table.table:not(.dataTable)) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* .rate-collapse se excluye: cada una de esas tablas fija su propio
       min-width en el bloque MODULO del final del archivo, y a <=1024 pasan a
       CSS Grid, donde un min-width pelearia con el colapso. */
    .content [class*="col-"] > table.table:not(.dataTable):not(.rate-collapse),
    .content .panel > table.table:not(.dataTable):not(.rate-collapse),
    .content .panel-body > table.table:not(.dataTable):not(.rate-collapse) {
        min-width: 780px;
    }

    /* Las fracciones fijas de custom.css:400-408 pelean con el layout
       scrolleable. Tambien neutraliza el w_100_7 aplicado a 8 columnas de
       modifypack (= 114% de anchura). */
    .w_100_6,
    .w_100_7,
    .w_100_8 {
        width: auto;
    }

    /* Seis tablas de 6-7 columnas dentro de col-md-4 (~250px a 1025px):
       780px es demasiado, con 520 caben. */
    .content [class*="col-md-4"] > table.table:not(.dataTable),
    .content [class*="col-md-3"] > table.table:not(.dataTable) {
        min-width: 520px;
    }
}

@media (max-width: 768px) {
    .content [class*="col-"] > table.table:not(.dataTable) > thead > tr > th,
    .content .panel > table.table:not(.dataTable) > thead > tr > th {
        white-space: nowrap;
    }

    .table.small-padding > tbody > tr > td {
        padding: 4px 6px;
    }

    /* width="100" / width="200px" cableados en el HTML de varias vistas. */
    .content table.table:not(.dataTable) > thead > tr > th[width],
    .content table.table:not(.dataTable) > tbody > tr > td[width] {
        width: auto;
    }
}


/* ============================================================================
 * L7 -- BUTTONS & STICKY
 * ========================================================================== */

/* custom.css:312 redefine `.btn-lg{padding:.75rem 1.75rem; font-size:1.5rem}`.
 * Nueve vistas meten un .btn.btn-lg "Guardar"/"Nueva" dentro de una col-lg-1.
 * A 1200px de viewport esa columna mide ~55px de caja de contenido y el texto
 * del boton solo ya mide ~100px: DESBORDA en el mismo breakpoint para el que
 * fue disenado. Por eso este bloque no va scopeado.
 *
 * Nota: .col-lg-1 NO casa con class="col-lg-10" -- los selectores de clase
 * son exactos.
 * -------------------------------------------------------------------------- */
.col-lg-1 .btn.btn-lg,
.col-lg-2 .btn.btn-lg {
    width: 100%;
    white-space: normal;
    font-size: 1.125rem;
    padding: 0.6rem 0.5rem;
}

@media (max-width: 1199px) {
    /* Aqui la columna ya es un bloque a ancho completo (L2): no sangrar el
       boton de lado a lado. */
    .col-lg-1 .btn.btn-lg,
    .col-lg-2 .btn.btn-lg {
        width: auto;
    }

    /* sticky sobre un bloque apilado a ancho completo no sirve de nada y
       puede solapar. custom.css:390-395 usa !important en top. */
    .sticky-top {
        position: static;
        top: auto !important;
    }

    /* custom.css:89 `.fs-3rem{font-size:3rem!important}` -> 0,2,0 gana. */
    .btn.fs-3rem {
        font-size: 1.5rem !important;
    }
}

@media (max-width: 768px) {
    .btn.fs-3rem {
        font-size: 1.125rem !important;
        padding: 0.6rem 0.75rem;
    }

    .btn.d-block {
        white-space: normal;
    }

    /* Barras de botones sin btn-group ni contenedor (edit.blade.php:128-154
       llega a 6 botones sueltos). */
    .panel-empty .btn,
    .heading-elements .btn {
        margin-bottom: 5px;
    }
}


/* ============================================================================
 * L8 -- MODALS
 * ========================================================================== */

/* BS3 ya da a .modal-dialog `margin:10px` en xs y anchura solo a >=769px, asi
 * que el grueso ya funciona. Lo que falta es contencion de scroll:
 * dashboard.blade.php:123-297 es un .modal-dialog pelado con nueve bloques
 * col-sm-4, cada uno con un btn-lg que lleva un <br> dentro.
 *
 * La primera regla es no-op por encima de 640px de viewport.
 * -------------------------------------------------------------------------- */
.modal-dialog:not(.modal-sm):not(.modal-lg) {
    max-width: calc(100vw - 40px);
}

@media (max-width: 1024px) {
    .modal-body {
        max-height: calc(100vh - 180px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal-body .btn-lg {
        white-space: normal;
    }
}

@media (max-width: 768px) {
    .modal-dialog {
        margin: 10px;
    }

    .modal-body .col-sm-4 + .col-sm-4 {
        margin-top: 15px;
    }

    .modal-footer .btn {
        margin-bottom: 5px;
    }
}


/* ============================================================================
 * L9 -- LOGIN
 * ========================================================================== */

/* components.css:18342 ya pone width:100% a <=480px. Esto solo recupera los
 * 60px que se come el padding:30px de custom.css:332.
 * -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .login-container .page-container .login-form,
    .login-container .page-container .registration-form {
        padding: 20px;
    }

    #loginLogo {
        max-width: 220px;
    }
}


/* ============================================================================
 * L10 -- PRINT
 * ========================================================================== */

@media print {
    .navbar,
    .sidebar,
    .footer,
    .breadcrumb-line,
    .heading-elements,
    .sticky-top,
    .rate-toggle-cell {
        display: none !important;
    }

    .content {
        padding: 0 !important;
    }

    .panel {
        border: 0;
        box-shadow: none;
    }

    /* En papel se quiere la tabla completa, sin colapsos. */
    table.rate-modify > tbody > tr > td.rate-secondary {
        display: table-cell !important;
    }
}


/* ============================================================================
 * L11 -- DEBUG (se entrega COMENTADO, nunca desplegar activo)
 * ========================================================================== */

/* Descomentar en local para cazar desbordes horizontales.
 *
 * NO "arreglar" un desborde con html,body{overflow-x:hidden}: mata
 * position:sticky en TODOS los descendientes, incluidos los .sticky-top de
 * los botones Guardar.
 *
 * * { outline: 1px solid rgba(255, 0, 0, .2) !important; }
 */




/* ============================================================================
 * MODULO -- filas desplegables (+ / -)
 *
 * Usado por dos pantallas:
 *   .rate-modify  -> /rates-modification/{id}   (11-13 columnas)
 *                    fijas: EUR/Dia 4-7, GRUPO, Nombre, 7 dias EUR/Semana
 *   .rate-assign  -> /rates-assignment/...      (8 columnas)
 *                    fijas: Orden, Fecha, Cod Tarifa, EUR Base
 *
 * La mecanica comun vive en .rate-collapse; cada tabla solo aporta su
 * grid-template-columns y su colocacion explicita a <=768px.
 *
 * Tecnica: CSS Grid sobre el <tr>, con CERO manipulacion del DOM.
 *
 * Ningun <td> sale nunca de su <tr>: lo unico que cambia es `display`.
 * Por tanto:
 *   - existe EXACTAMENTE UNA copia de cada <input>, siempre;
 *   - el payload del POST es identico POR CONSTRUCCION, no por argumento.
 *     En rate-modify eso es critico: store() empareja diez arrays paralelos
 *     POR INDICE, y un <td> desprendido o un input duplicado corromperia los
 *     precios de todos los grupos en silencio. En rate-assign los campos son
 *     unicos por fila (rate_p0-{id}, day7-{id}, rate_{id}) y su JS los busca
 *     por nombre, nunca por posicion, asi que ahi el margen es aun mayor;
 *   - a >=1025px NINGUNA regla de este bloque aplica -> escritorio identico;
 *   - `input.parent().parent()` (td -> tr) del JS de rate-modify sigue
 *     funcionando, igual que fila.find("td.day8") y fila.find("td span").
 *
 * ORDEN DEL DOM vs ORDEN VISUAL -- la trampa de este modulo.
 * Cuando una celda fija tiene que bajar a una linea propia a <=768px pero va
 * ANTES de otra celda fija en el DOM, ponerle solo `grid-column: 1/-1` hace
 * que la colocacion automatica empuje a la siguiente a una tercera linea
 * (sintoma: un input aparece como caja vacia suelta). Por eso a <=768px las
 * celdas fijas llevan colocacion EXPLICITA (grid-row + grid-column).
 * Le pasa a .rate-modify con "Nombre", que va antes de "7 dias".
 * ========================================================================== */

.rate-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
}

.rate-toolbar .rate-toolbar-spacer {
    flex: 1 1 auto;
}

/* El control + / - solo tiene sentido cuando hay algo colapsado. */
@media (min-width: 1025px) {
    td.rate-toggle-cell,
    th.rate-toggle-cell,
    .rate-toolbar {
        display: none;
    }
}

/* Boton +/- dibujado con texto plano, no con fuente de iconos: icomoon puede
   no haber cargado todavia y entonces se ve un glifo basura ("["). */
.rate-toggle {
    display: inline-block;
    width: 22px;
    height: 22px;
    line-height: 20px;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    font-family: Arial, Helvetica, sans-serif;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
    background: var(--color-corporativo);
    border-radius: 3px;
}

.rate-toggle:hover,
.rate-toggle:focus,
.rate-toggle:active {
    text-decoration: none;
    color: #fff;
    opacity: .75;
}

.rate-toggle:before {
    content: '\2212';                       /* - : fila desplegada */
}

tr:not(.expanded) > td > .rate-toggle:before {
    content: '+';                           /* + : fila contraida */
}

/* La fecha en dos lineas de .rate-assign solo se usa a <=768px (ver el final
   del archivo); por defecto manda el <input> de una linea. */
.rate-date-text {
    display: none;
}


/* --- 1025-1199px: todavia tabla, pero ya no cabe -> scroll horizontal ------
 * El bloque L6 excluye .rate-collapse de su min-width genérico de 780px
 * porque cada una de estas dos tablas necesita el suyo.
 * -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
    .content .panel > table.table.rate-modify {
        min-width: 1100px;                  /* 11-13 columnas de inputs */
    }

    .content [class*="col-"] > table.table.rate-assign {
        min-width: 900px;                   /* 8 columnas, selects + input-group */
    }
}


@media (max-width: 1024px) {

    /* --- contenedor: se anula el scroll, aqui se colapsa ------------------- */

    .content .panel > table.table.rate-collapse,
    .content [class*="col-"] > table.table.rate-collapse {
        min-width: 0;
    }

    .content .panel:has(> table.table.rate-collapse),
    .content [class*="col-"]:has(> table.table.rate-collapse) {
        overflow-x: visible;
    }

    table.rate-collapse,
    table.rate-collapse > thead,
    table.rate-collapse > tbody {
        display: block;
        width: 100%;
    }

    /* --- cabecera --------------------------------------------------------- */

    /* Se ocultan todos los <th>. En .rate-modify sobreviven los cuatro que
       llevan los Recalcular/Bloquear, convertidos en chips de UNA linea.
       Esos checkboxes (#check1..4 / #bloq1..4) NO tienen atributo name, no se
       serializan nunca, y el JS solo los lee por id -> siguen operativos.
       En .rate-assign no hay ninguno, asi que el <thead> queda a altura 0
       (de ahi el padding:0 por defecto). */
    table.rate-collapse > thead > tr {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        padding: 0;
    }

    table.rate-collapse > thead > tr > th {
        display: none;
    }

    table.rate-modify > thead > tr {
        padding: 6px;
    }

    table.rate-collapse > thead > tr > th.th-recalc {
        display: flex;
        flex: 1 1 calc(50% - 2px);
        align-items: center;
        gap: 8px;
        border: 0;
        border-radius: 3px;
        padding: 4px 8px;
        font-size: 11px;
        font-weight: 400;
        line-height: 1.2;
        white-space: nowrap;
    }

    /* La etiqueta del periodo primero y flexible; las casillas detras. */
    table.rate-collapse > thead > tr > th.th-recalc > .col-md-12 {
        order: -1;
        flex: 1 1 auto;
        width: auto;
        padding: 0;
        text-align: left;
        font-weight: 500;
    }

    table.rate-collapse > thead > tr > th.th-recalc > .col-md-12 br {
        display: none;                      /* "8 a 14 dias / EUR/Dia" en una linea */
    }

    table.rate-collapse > thead > tr > th.th-recalc .form-check {
        flex: 0 0 auto;
        margin: 0;
    }

    table.rate-collapse > thead > tr > th.th-recalc .form-check-label {
        font-weight: 400;
        margin: 0 0 0 2px;
    }

    /* --- fila principal --------------------------------------------------- */

    /* A este ancho el orden del DOM coincide con el orden visual en las dos
       tablas, asi que la colocacion automatica es correcta. */
    table.rate-collapse > tbody > tr {
        display: grid;
        align-items: center;
        border-bottom: 2px solid #ddd;
    }

    /* toggle + EUR/Dia 4-7, GRUPO, Nombre, 7 dias EUR/Semana */
    table.rate-modify > tbody > tr {
        grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 2fr) minmax(0, 1.2fr);
    }

    /* toggle + Orden, Fecha, Cod Tarifa, EUR Base */
    table.rate-assign > tbody > tr {
        grid-template-columns: 34px 38px minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
    }

    table.rate-collapse > tbody > tr > td {
        display: block;
        border-top: 0;
    }

    table.rate-collapse > tbody > tr > td.rate-toggle-cell {
        padding: 4px;
        text-align: center;
    }

    /* --- zebra y resaltado ------------------------------------------------
       custom.css:411 pinta el fondo POR CELDA. En grid las celdas no cubren
       toda la fila y el resultado son bandas grises a parches. Se neutraliza a
       nivel de celda y se pinta el <tr>.
       ESPECIFICIDAD: custom.css:411 es
         tbody tr:nth-child(even) td:not(.bg-danger):not(.bg-warning):not(.bg-orange-400)
       = (0,4,3). Estos selectores replican la cadena de :not() y anaden
       .rate-collapse -> (0,5,3), que gana, y conservan la intencion original
       de no pisar las celdas marcadas en rojo.
       El `background` shorthand SIN !important no pisa el
       `background-color: ... !important` de .bg-corporate (custom.css:8), asi
       que la celda azul de "Orden" en rate-assign conserva su color. */
    table.rate-collapse > tbody > tr:nth-child(even) > td:not(.bg-danger):not(.bg-warning):not(.bg-orange-400),
    table.rate-collapse > tbody > tr.expanded > td:not(.bg-danger):not(.bg-warning):not(.bg-orange-400) {
        background: transparent;
    }

    table.rate-collapse > tbody > tr:nth-child(even) {
        background: #f7f7f7;
    }

    table.rate-collapse > tbody > tr.expanded {
        background: #eaf1f9;
    }

    /* --- celdas secundarias (las que despliega el +) ----------------------- */

    table.rate-collapse > tbody > tr > td.rate-secondary {
        display: none;
    }

    table.rate-collapse > tbody > tr.expanded > td.rate-secondary {
        display: flex;
        grid-column: 1 / -1;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 5px 12px 5px 34px;
        border-top: 1px solid #e0e6ee;
    }

    table.rate-collapse > tbody > tr.expanded > td.rate-secondary:before {
        content: attr(data-label);
        font-size: 11px;
        font-weight: 500;
        text-transform: uppercase;
        color: #777;
        line-height: 1.2;
        text-align: left;
        flex: 1 1 auto;
    }

    table.rate-collapse > tbody > tr.expanded > td.rate-secondary > .form-control {
        flex: 0 0 110px;
        width: 110px;
    }

    /* rate-assign envuelve sus inputs en .input-group (display:table en BS3)
       junto al addon "EUR". */
    table.rate-collapse > tbody > tr.expanded > td.rate-secondary > .input-group {
        flex: 0 0 130px;
        width: 130px;
    }
}


@media (max-width: 768px) {

    /* ===== .rate-modify ==================================================
     * Cuatro columnas: toggle + EUR/Dia + GRUPO + 7 dias. "Nombre" baja a su
     * propia linea. COLOCACION EXPLICITA obligatoria -- ver la nota de la
     * cabecera: Nombre va antes de dia7 en el DOM y sin esto el input de
     * 7 dias cae a una tercera linea como caja vacia.
     * nth-child es identico en los tres tipos de tarifa:
     * 1=toggle 2=dia4 3=GRUPO 4=Nombre 5=dia7.
     * ==================================================================== */
    table.rate-modify > tbody > tr {
        grid-template-columns: 32px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
        row-gap: 0;
        padding-bottom: 4px;
    }

    table.rate-modify > tbody > tr > td.rate-toggle-cell {
        grid-column: 1;
        grid-row: 1;
    }

    table.rate-modify > tbody > tr > td:nth-child(2) {          /* EUR/Dia 4-7 */
        grid-column: 2;
        grid-row: 1;
    }

    table.rate-modify > tbody > tr > td:nth-child(3) {          /* GRUPO */
        grid-column: 3;
        grid-row: 1;
    }

    table.rate-modify > tbody > tr > td:nth-child(5) {          /* 7 dias EUR/Semana */
        grid-column: 4;
        grid-row: 1;
    }

    table.rate-modify > tbody > tr > td.rate-name {             /* Nombre */
        grid-column: 1 / -1;
        grid-row: 2;
        padding: 0 8px 2px 32px;
        font-size: 11px;
        line-height: 1.3;
        color: #777;
        text-align: left !important;        /* .text-center de custom.css usa !important */
    }

    /* ===== .rate-assign ==================================================
     * Cuatro columnas: toggle + Orden + Fecha + EUR Base. "Cod Tarifa" (un
     * select ancho) baja a la linea 2.
     * COLOCACION EXPLICITA obligatoria -- mismo caso que "Nombre" en
     * .rate-modify: Cod Tarifa va ANTES de EUR Base en el DOM
     * (1=toggle 2=Orden 3=Fecha 4=Tarifa 5=EUR Base), asi que sin esto la
     * colocacion automatica expulsaria el input de EUR Base a una tercera
     * linea como caja vacia suelta.
     * ==================================================================== */
    table.rate-assign > tbody > tr {
        grid-template-columns: 32px 30px minmax(0, 1fr) minmax(0, 1fr);
        row-gap: 0;
        padding-bottom: 4px;
    }

    table.rate-assign > tbody > tr > td.rate-toggle-cell {
        grid-column: 1;
        grid-row: 1;
    }

    table.rate-assign > tbody > tr > td:nth-child(2) {          /* Orden */
        grid-column: 2;
        grid-row: 1;
    }

    table.rate-assign > tbody > tr > td:nth-child(3) {          /* Fecha */
        grid-column: 3;
        grid-row: 1;
    }

    table.rate-assign > tbody > tr > td:nth-child(5) {          /* EUR Base */
        grid-column: 4;
        grid-row: 1;
    }

    table.rate-assign > tbody > tr > td:nth-child(4) {          /* Cod Tarifa */
        grid-column: 2 / -1;
        grid-row: 2;
        padding-top: 2px;
    }

    /* ===== comun a las dos =============================================== */

    /* Etiquetas de columna sobre cada valor: sin <thead> visible, "0.71 EUR / A"
       no se entiende. data-label lo pone el blade. */
    table.rate-collapse > tbody > tr > td[data-label]:not(.rate-secondary):before {
        content: attr(data-label);
        display: block;
        font-size: 9px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: .02em;
        color: #aaa;
        line-height: 1.2;
        margin-bottom: 1px;
    }

    table.rate-collapse > tbody > tr > td[data-label]:not(.rate-secondary) {
        padding: 4px 6px 2px;
    }

    /* Un periodo por linea, pero compacto (una sola linea de alto). */
    table.rate-collapse > thead > tr > th.th-recalc {
        flex: 1 1 100%;
        font-size: 10px;
        padding: 3px 8px;
    }

    table.rate-collapse > tbody > tr.expanded > td.rate-secondary {
        padding-left: 32px;
    }

    table.rate-collapse > tbody > tr.expanded > td.rate-secondary > .form-control {
        flex: 0 0 90px;
        width: 90px;
    }

    table.rate-collapse > tbody > tr.expanded > td.rate-secondary > .input-group {
        flex: 0 0 110px;
        width: 110px;
    }

    /* ===== .rate-assign : todo texto plano salvo el desplegable ===========
     * En esta pantalla el UNICO campo que el usuario edita es el <select>
     * name="rate_{id}" (Cod Tarifa). Todo lo demas es readonly o disabled y
     * existe solo para mostrar el resultado del calculo.
     *
     * Confirmado en RateAssignmentController@store(): solo lee row_id[],
     * rate_{id} y percentpN/fixpN. p0..p3 se RECALCULAN en servidor desde
     * rate->p1, y day7-{id} / rate_pN-{id} no se leen nunca.
     *
     * Pero NO se convierten a texto en el blade: el JS de la vista los escribe
     * con .val() al cambiar el select (updateDataDateRangeNew), asi que siguen
     * siendo <input> y solo se les quita el aspecto de campo. Al no tocar el
     * DOM, el payload sigue siendo identico.
     *
     * El <select> no lleva readonly ni disabled, asi que ninguno de estos
     * selectores lo alcanza: sigue siendo un control de verdad.
     * ==================================================================== */
    table.rate-assign .form-control[readonly],
    table.rate-assign .form-control[disabled],
    table.rate-assign input.disabled {
        border: 0;
        background: transparent;
        box-shadow: none;
        height: auto;
        min-height: 0;
        padding: 0;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.3;
        color: #333;
        cursor: default;
        pointer-events: none;       /* sin foco -> ni teclado ni auto-zoom de iOS */
    }

    /* .input-group es display:table en BS3, con el addon "EUR" como table-cell.
       Se aplana para que "70.00 EUR" se lea como una sola linea de texto. */
    table.rate-assign .input-group {
        display: block;
        width: auto;
        white-space: nowrap;
    }

    table.rate-assign .input-group > .form-control {
        display: inline-block;
        width: 4.5em;               /* los <input> no se ajustan al contenido */
        text-align: right !important;   /* .text-center de custom.css usa !important */
    }

    table.rate-assign .input-group-addon {
        display: inline;
        width: auto;
        border: 0;
        background: transparent;
        padding: 0 0 0 2px;
        font-size: 13px;
        color: #777;
    }

    /* Ya no hay caja que rellenar: el valor se pega a su etiqueta.
       Misma especificidad que la regla .rate-collapse de arriba (0,4,4) pero
       posterior en el archivo -> gana. */
    table.rate-assign > tbody > tr.expanded > td.rate-secondary > .input-group {
        flex: 0 0 auto;
        width: auto;
    }

    /* --- Fecha: "01-05-2027 a 31-05-2027" no cabe en una linea -------------
     * Un <input> es monolinea por definicion, no hay CSS que lo parta: se
     * oculta y se muestra la version en dos <span> que trae el blade. Ninguno
     * de los dos tiene atributo name, asi que esto no afecta al POST.
     * -------------------------------------------------------------------- */
    table.rate-assign .rate-date-input {
        display: none;
    }

    table.rate-assign .rate-date-text {
        display: block;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.35;
        color: #333;
        text-align: left;
    }

    table.rate-assign .rate-date-text > span {
        display: block;
        white-space: nowrap;
    }

    table.rate-assign .rate-date-text > span + span {
        color: #777;                /* "a 31-05-2027" en segundo plano */
    }

    /* --- ficha compacta ----------------------------------------------------
     * Con la fecha en dos lineas y la etiqueta de cada valor encima, la fila
     * crecia demasiado y el select se comia el ancho entero.
     * -------------------------------------------------------------------- */
    table.rate-assign > tbody > tr {
        padding: 6px 8px 8px;
        row-gap: 2px;
    }

    /* Etiquetas mas discretas y pegadas a su valor. */
    table.rate-assign > tbody > tr > td[data-label]:not(.rate-secondary):before {
        font-size: 8px;
        letter-spacing: .04em;
        color: #b0b0b0;
    }

    /* Orden: pastilla cuadrada, no una columna de color. */
    table.rate-assign > tbody > tr > td:nth-child(2) {
        border-radius: 3px;
        padding: 2px 0 !important;
        font-size: 12px;
        line-height: 20px;
        align-self: center;
    }

    /* EUR Base alineado a la derecha, con su etiqueta encima. */
    table.rate-assign > tbody > tr > td:nth-child(5),
    table.rate-assign > tbody > tr > td:nth-child(5):before {
        text-align: right;
    }

    table.rate-assign > tbody > tr > td:nth-child(5) .input-group {
        text-align: right;
    }

    /* Cod Tarifa: etiqueta EN LINEA y select del tamano de su contenido
       (un codigo de tarifa son 5 cifras), no a ancho completo. */
    table.rate-assign > tbody > tr > td:nth-child(4) {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    table.rate-assign > tbody > tr > td:nth-child(4):before {
        display: inline-block;
        flex: 0 0 auto;
        margin-bottom: 0;
    }

    /* !important obligatorio: L5 pone .select2-container{width:100%!important}
       para los selects largos de formulario. Aqui sobra. */
    table.rate-assign > tbody > tr > td:nth-child(4) .select2-container,
    table.rate-assign > tbody > tr > td:nth-child(4) select.form-control {
        width: 130px !important;
        max-width: 100%;
        flex: 0 1 130px;
    }

    /* Caja mas baja y ajustada. Sin `--default`: el tema estiliza
       .select2-selection--single directo (components.css:2591).
       El cuadro visible es un <span>, no un control, asi que bajar de 16px aqui
       no dispara el auto-zoom de iOS; el buscador del desplegable si lo lleva. */
    table.rate-assign .select2-selection--single {
        height: 32px;
        padding: 5px 0;
    }

    table.rate-assign .select2-selection--single .select2-selection__rendered {
        padding-left: 8px;
        padding-right: 26px;        /* hueco de la flecha */
        font-size: 14px;
        font-weight: 500;
    }

    table.rate-assign .select2-selection--single .select2-selection__arrow:after {
        right: 8px;
        font-size: 14px;
    }
}