/* MODO-OSCURO (18 sep 2026): los colores de esta hoja son variables de css/tokens.css. La cabecera ya la enlaza;
   esta linea es la RED DE SEGURIDAD: si algun dia esta hoja se sirve con una cabecera que no enlaza tokens.css
   (una subida a medias, una pagina suelta), los colores siguen definidos. Tiene que ir la PRIMERA. */
@import url("tokens.css?v=20260919m");

/****************************************************************************/
/* General */
/****************************************************************************/

body, html {
    height: 100%;
    background-color: var(--fs-bg);
    font-family: 'Lato', sans-serif;
    letter-spacing: 0.5px;
}

a.disabled {
    pointer-events: none;
    cursor: default;
    color: var(--fs-text-disabled) !important;
}

img.main-header-logo {
    width: 100%;
}

.far {
    margin-left: 4px !important;
    font-size: 16px !important;
}

.fas {
    margin-left: 4px !important;
    font-size: 16px !important;
}

.alert-pad {
    padding-right: 0;
    padding-top: 20px;
}

.alert-info {
    border-radius: unset;
    background-color: var(--fs-notice-bg);
    border-color: var(--fs-notice-bg);
    color: var(--fs-brand-text);
    font-size: 14px !important;
}

.row.well {
    padding: 0;
    background-color: var(--fs-panel);
}

li.dropdown {
    display: block;
}

.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background-color: var(--fs-brand);
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: var(--fs-grey-fill-3);
}

nav.sidebar, .main {
    -webkit-transition: margin 200ms ease-out;
    -moz-transition: margin 200ms ease-out;
    -o-transition: margin 200ms ease-out;
    transition: margin 200ms ease-out;
}

.navbar-default {
    background-color: transparent;
    border-color: transparent;
}

    .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
        color: var(--fs-text-muted);
        background-color: transparent;
    }

    .navbar-default .navbar-nav > li {
        color: var(--fs-text-muted);
    }

        .navbar-default .navbar-nav > li > a:hover, nav.sidebar .navbar-nav > li.active {
            -webkit-box-shadow: -10px 0px 0px -8px var(--fs-brand-line);
            -moz-box-shadow: -10px 0px 0px -8px var(--fs-brand-line);
            box-shadow: -10px 0px 0px -8px var(--fs-brand-line);
            color: var(--fs-brand-text);
            height: 86px;
        }

    .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
        -webkit-box-shadow: -10px 0px 0px -8px var(--fs-brand-line);
        -moz-box-shadow: -10px 0px 0px -8px var(--fs-brand-line);
        box-shadow: -10px 0px 0px -8px var(--fs-brand-line);
        color: var(--fs-brand-text);
        font-weight: 900 !important;
    }

.navbar-nav li:hover a .menu-text {
    font-weight: 900 !important;
}

li.active a span p.menu-text {
    font-weight: 900;
}

nav.navbar.navbar-default.sidebar {
    margin-bottom: 0;
}

/*.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
    background-color: #e3000f !important;
}*/

.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
    background-color: transparent;
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    color: var(--fs-brand-text);
    border-bottom: 2px solid var(--fs-brand-line);
    border-radius: 0;
    margin-bottom: 0;
}

ul.nav.nav-pills.nav-fill.datalist-large-body-band-menu {
    webkit-box-shadow: 0px 1px 0px 0px var(--fs-grey-fill-3);
    -moz-box-shadow: 0px 1px 0px 0px var(--fs-grey-fill-3);
    box-shadow: 0px 1px 0px 0px var(--fs-grey-fill-3);
}

nav.sidebar a {
    padding-top: 30px;
}

.main {
    padding: 10px 10px 0 10px;
}

textarea#notes {
    resize: none;
}

@media (min-width: 765px) {

    .main {
        position: absolute;
        width: calc(100% - 40px);
        margin-left: 40px;
        float: right;
    }

    nav.sidebar:hover + .main {
        margin-left: 200px;
    }

    nav.sidebar.navbar.sidebar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand {
        margin-left: 0px;
    }

    nav.sidebar .navbar-brand, nav.sidebar .navbar-header {
        text-align: center;
        width: 100%;
        margin-left: 0px;
    }

    nav.sidebar a {
        padding-right: 13px;
    }

    /*nav.sidebar .navbar-nav > li:first-child{
      border-top: 1px #e5e5e5 solid;
    }

    nav.sidebar .navbar-nav > li {
        border-bottom: 1px #e5e5e5 solid;
    }*/

    nav.sidebar .navbar-nav .open .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        margin-top: 0;
        background-color: transparent;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    nav.sidebar .navbar-collapse, nav.sidebar .container-fluid {
        padding: 0;
    }

    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
        color: var(--fs-text-muted-2);
    }

    /*nav.sidebar{
      width: 200px;
      height: 100%;
      margin-left: -160px;
      float: left;
      margin-bottom: 0px;
    }*/

    nav.sidebar li {
        width: 100%;
    }

    nav.sidebar:hover {
        margin-left: 0px;
    }

    .forAnimate {
        opacity: 0;
    }
}

@media (min-width: 1330px) {

    .main {
        width: calc(100% - 200px);
        margin-left: 200px;
    }

    /* nav.sidebar{
      margin-left: 0px;
      float: left;
    }*/

    nav.sidebar .forAnimate {
        opacity: 1;
    }
}

nav.sidebar .navbar-nav .open .dropdown-menu > li > a:hover, nav.sidebar .navbar-nav .open .dropdown-menu > li > a:focus {
    color: var(--fs-text-faint);
    background-color: transparent;
}

nav:hover .forAnimate {
    opacity: 1;
}

section {
    padding-left: 15px;
}

.well {
    background-color: var(--fs-panel);
    /*margin-top: 10px;*/
    margin-bottom: 0;
    border-radius: 0;
}

.container {
    width: 100%;
    /*padding: 50px;*/

    /*padding-left: 120px;
    padding-right: 0;*/
}

@media (max-width: 768px) {
    .container {
        width: 80%;
        padding-left: 0;
        padding-right: 0;
    }
}

.btn-warning {
    background-color: var(--fs-purple);
    border: 1px solid var(--fs-purple-line);
    color: var(--fs-on-brand);
    border-radius: 2px;
}

.btn-warning:hover {
    background-color: var(--fs-panel);
    border: 1px solid var(--fs-purple-line);
    color: var(--fs-purple-text);
}

.btn-warning:active {
    background-color: var(--fs-panel);
    border: 1px solid var(--fs-purple-line);
    color: var(--fs-purple-text);
}

.btn-warning:focus {
    background-color: var(--fs-panel);
    border: 1px solid var(--fs-purple-line);
    color: var(--fs-purple-text);
}

.btn-info {
    background-color: var(--fs-cyan);
    border: 1px solid var(--fs-cyan);
    color: var(--fs-on-brand);
    border-radius: 2px;
}

.btn-info:hover {
    background-color: var(--fs-panel);
    border: 1px solid var(--fs-cyan);
    color: var(--fs-cyan);
}

.btn-info:active {
    background-color: var(--fs-panel);
    border: 1px solid var(--fs-cyan);
    color: var(--fs-cyan);
}

.btn-info:focus {
    background-color: var(--fs-panel);
    border: 1px solid var(--fs-cyan);
    color: var(--fs-cyan);
}


.btn-primary {
    background-color: var(--fs-brand);
    border: 1px solid var(--fs-brand-line);
    border-radius: 2px;
    color: var(--fs-on-brand);
    min-width: 130px;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    /* Sprint atras_contract_fix2 (20 may 2026): endurece el centrado del
       glifo a tolerancia 0.5px. height FIJA 38px (rango bootstrap legacy),
       line-height:1, padding-top = padding-bottom = (38-14-2)/2 = 11px
       (simetría píxel-exacta), white-space:nowrap. letter-spacing eliminado
       porque agrega 0.5px tras la última letra y desplazaba dx_glifo a
       +0.514 (fuera de tolerancia 0.5px). Paridad altura ATRÁS=MODIFICAR
       garantizada por compartir misma regla base. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    height: 38px;
    padding-top: 11px;
    padding-bottom: 11px;
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
    vertical-align: middle;
    white-space: nowrap;
    /*margin-left: unset !important;
    margin-right: unset !important;*/
}

    .btn-primary:hover {
        background-color: var(--fs-hover) !important;
        border: 1px solid var(--fs-brand-line);
        border-radius: 2px;
        color: var(--fs-brand-text);
        font-weight: 900;
    }

    .btn-primary:active {
        background-color: var(--fs-brand) !important;
        border: 1px solid var(--fs-brand-line);
        border-radius: 2px;
        color: var(--fs-on-brand);
        font-weight: 500;
    }

    .btn-primary:focus {
        background-color: var(--fs-brand) !important;
        border: 1px solid var(--fs-brand-line);
        border-radius: 2px;
        color: var(--fs-on-brand);
        font-weight: 500;
    }

    .btn-primary:disabled {
        background-color: var(--fs-hover) !important;
        border: 1px solid var(--fs-brand-line);
        border-radius: 2px;
        color: var(--fs-brand-text);
        font-weight: 500;
    }

    .btn-primary.disabled {
        background-color: var(--fs-hover) !important;
        border: 1px solid var(--fs-brand-line);
        border-radius: 2px;
        color: var(--fs-brand-text);
        font-weight: 500;
    }

.btn-default {
    background-color: var(--fs-panel);
    border: 1px solid var(--fs-brand-line);
    border-radius: 2px;
    color: var(--fs-brand-text);
    min-width: 130px;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
    /* Sprint atras_contract_fix2 (20 may 2026): endurece centrado glifo del
       botón ATRÁS a tolerancia 0.5px. height FIJA 38px (rango bootstrap
       legacy), line-height:1, padding-top = padding-bottom = 11px (simetría
       píxel-exacta). NO !important. Paridad altura visual con MODIFICAR
       garantizada (misma regla base aplicada a .btn-primary).
       Iteraciones previas:
         atras_v2 (20 may): h=42px + padding 13/13 -> bbox decía OK pero
           Aitor reportaba descentrado en Chrome real (perception subjetiva
           amplificada por wasted space top/bottom de 13px).
         atras_contract_fix2 (este sprint): h=38px reduce el padding
           visual a 11px, hace el botón más compacto y la cap-region
           proporcionalmente más cerca del centro. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    height: 38px;
    padding-top: 11px;
    padding-bottom: 11px;
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
    vertical-align: middle;
    white-space: nowrap;
    margin-left: unset !important;
    margin-right: unset !important;
}

/* Sprint revcontract_atras (20 may 2026): paridad <button> vs <a> en
   centrado del glifo. Antes el .btn-default/.btn-primary renderizaba con
   Δy_glifo ≈ 0 en <a> pero ≈ -0.26 en <button> por user-agent defaults
   (appearance: button + bevel nativo del navegador). Reset explícito de
   appearance + line-height (preservando los demás font props que vienen
   de .btn-default), y borrado de focus-inner de Firefox. Visible en
   review-new, review-list, agreement-new, agreement-list y todos los
   formularios con botón Atrás como <button type="button">. */
button.btn-default,
button.btn-primary,
input[type="submit"].btn-default,
input[type="submit"].btn-primary,
input[type="button"].btn-default,
input[type="button"].btn-primary {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    line-height: 1;
}

button.btn-default::-moz-focus-inner,
button.btn-primary::-moz-focus-inner {
    border: 0;
    padding: 0;
}

    .btn-default:hover {
        background-color: var(--fs-brand);
        border: 1px solid var(--fs-brand-line);
        border-radius: 2px;
        color: var(--fs-on-brand);
        font-weight: 500;
    }

    .btn-default:active {
        background-color: var(--fs-panel);
        border: 1px solid var(--fs-brand-line);
        border-radius: 2px;
        color: var(--fs-brand-text);
        font-weight: 900;
    }

    .btn-default:focus {
        background-color: var(--fs-panel);
        border: 1px solid var(--fs-brand-line);
        border-radius: 2px;
        color: var(--fs-brand-text);
        font-weight: 900;
    }

a.btn.btn-sm.btn-default {
    font-size: 12px;
    height: unset;
    width: unset;
    border: 1px solid var(--fs-brand-line);
    border-radius: 2px;
    color: var(--fs-brand-text);
    font-weight: 700;
}

    a.btn.btn-sm.btn-default:hover {
        background-color: var(--fs-brand);
        border: 1px solid var(--fs-brand-line);
        border-radius: 2px;
        color: var(--fs-on-brand);
        font-weight: 700;
    }

    ul.wysihtml5-toolbar a.btn.wysihtml5-command-active {
        color: var(--fs-brand-text);
        font-size: 12px;
        font-weight: 900;
        border-color: var(--fs-panel);
        -webkit-box-shadow: inset 0 2px 4px var(--fs-shadow-1), 0 1px 2px var(--fs-shadow-2);
        -moz-box-shadow: inset 0 2px 4px var(--fs-shadow-1),0 1px 2px var(--fs-shadow-2);
        box-shadow: inset 0 2px 4px var(--fs-shadow-1), 0 1px 2px var(--fs-shadow-2);
    }

    a.btn.btn-sm.btn-default:focus {
        background-color: var(--fs-brand);
        border: 1px solid var(--fs-brand-line);
        border-radius: 2px;
        color: var(--fs-on-brand);
        font-weight: 700;
    }

.fa {
    background: transparent;
}

/*.tab-pane {
    padding: 10px 0;
}*/

.file {
    visibility: hidden;
    position: absolute;
}

img[src="data:image/jpeg;base64,"] {
    display: none;
}

.icon-button {
    border: none;
}

/*.icon-button:hover {
    color: #e3000f;
}*/

.disabled {
    pointer-events: none;
    cursor: default;
}



.centered {
    margin: 10px auto;
    display: block;
}

.img-van {
    margin: 0 0 20px 0;
}

.collection-points {
    font-size: 32px !important;
}

.check-delivered {
    color: var(--fs-danger-text) !important;
}

.check-returned {
    color: var(--fs-ok-text) !important;
}


#map {
    height: 400px;
}

.input-lg {
    height: 70px !important;
}

button.browse.btn.btn-primary.input-lg {
    width: initial;
    height: 70px;
    padding: 0 20px 0 20px;
    margin: 0 -32px 0 0;
}

.input-group.col-xs-12.datasheet-body-band-image {
    padding: 20px 0 20px 0;
}

a.btn.btn-primary {
    color: var(--fs-on-brand);
    padding-top: 15px;
}

    a.btn.btn-primary:hover {
        color: var(--fs-brand-text);
    }

    a.btn.btn-primary:focus {
        color: var(--fs-brand-text);
    }

    a.btn.btn-primary:active {
        color: var(--fs-on-brand);
    }

    a.btn.btn-primary:visited {
        color: var(--fs-on-brand);
    }

/****************************************************************************/
/* Menú principal */
/****************************************************************************/

.main-menu {
	border-color: transparent;
	background: transparent;
	text-transform: uppercase;
	padding: 30px 0px;
	table-layout: fixed;
}

/*.main-menu > a:hover, a:active {
	color: #e3000f;
}*/

.menu-logo {
	padding: 0px;
}

.menu-icon {
    font-size: 16px;
    /*width: 25px;*/
}

/* Sprint SIDEBAR-FIX (5 may 2026): eliminado padding-top: 35% que
   descuadraba verticalmente la entrada CONFIGURACION respecto al resto
   del sidebar. Antes de INVOICE-RESTORE habia 8 entradas y el spacer
   final encajaba; ahora hay 9 (FACTURACION nueva) y el padding hacia
   ver Configuracion despegada del bloque. La regla quedaria a futuro
   solo si se desea separador final entre secciones distintas; por
   coherencia visual con Bootstrap 3 navbar-default se elimina. */
.menu-icon-config {
    /* sin padding-top forzado: hereda del .navbar-nav > li */
}

.menu-text {
    padding: 0 20px;
    font-family: 'Lato regular', sans-serif;
    font-size: 14px;
    font-style: normal;
    text-transform: uppercase;
    display: inline;
    font-weight: 500;
}

.sign-panel {
    margin-bottom: 5px;
}

.sign-panel input[type="text"]  {
    height: 45px;
    margin-bottom: -5px !important;
}

.sign-panel input[type="password"]  {
    height: 45px;
    margin-bottom: -5px !important;
}

.sign-panel-inside {
    height: 45px;
}

nav.sidebar .navbar-nav > li {
    border: none;
    height: 86px;
}

/* FICHA-CLIENTE pase 3 (21 sep 2026): LOS TEXTOS DE LA BARRA EN UNA SOLA COLUMNA. El texto va pegado a su icono y cada
   icono tiene su ancho, asi que cada entrada empezaba en un sitio (medido: del pixel 55 al 61). El icono ocupa ahora
   siempre el mismo hueco, centrado, y el texto la misma distancia detras, tambien «Configuracion» (entre 992 y 1200 px
   tenia otra separacion). Mismo sitio que antes, a 2 px. */
nav.sidebar .navbar-nav .menu-icon {
    white-space: nowrap;   /* el texto nunca baja de linea separado de su icono */
}

nav.sidebar .navbar-nav .menu-icon::before {
    display: inline-block;
    width: 22px;
    text-align: center;
}

nav.sidebar .navbar-nav .menu-text,
nav.sidebar .navbar-nav .menu-icon-config .menu-icon .menu-text {
    padding: 0 0 0 16px;
}

/* Entre 992 y 1200 px la barra es estrecha y «CONFIGURACION» no cabe detras de su icono (por eso tenia su propia
   separacion, mas corta): ahi la separacion corta es la de TODAS, y siguen en columna. */
@media (min-width: 992px) and (max-width: 1200px) {
    nav.sidebar .navbar-nav .menu-text,
    nav.sidebar .navbar-nav .menu-icon-config .menu-icon .menu-text {
        padding-left: 10px;
    }
}

/****************************************************************************/
/* Header band */
/****************************************************************************/

.main-header-band {
    padding: 0;
}

.main-header-band-user {
    position: absolute;
    /*bottom: 0;*/
    right: 0;
    padding-bottom: 20px;
}

.main-header-user {
    margin-right: 10px;
}

.main-header-band p {
    position: relative;
    margin-bottom: 0;
    float: right;
}

.main-header-band p span {
    font-size: 14px;
    color: var(--fs-brand-text);
    font-weight: 500;
}

.main-header-well-top-left {
    border-color: transparent;
    border-right-color: var(--fs-line);
}

.main-header-well-top-right {
    border-bottom-color: transparent;
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    padding-bottom: 21px;
}

.main-header-well-bottom-left {
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    padding-left: 0;
    padding-top: 0;
}

.main-header-well-bottom-right {
    border-bottom-color: transparent;
    border-right-color: transparent;
    background-color: var(--fs-band);
}

.main-header-logo {
    /*width: 100%;
    height: auto;*/

    width: 187px;
    height: 57px;

    /*padding-bottom: 11px;*/
}

.main-header-company {
    padding-left: 0;
    padding-top: 12px;
}

.main-header-company h2 {
    margin: 0;
    font-family: 'Lato regular', sans-serif;
    font-size: 22px;
    color: var(--fs-brand-text);
    font-style: normal;
    text-transform: uppercase;
    font-weight: 500;
}

.main-header-title {
    padding-left: 0;
    padding-top: 15px;
}

.main-header-title h4 {
    margin: 0;
    font-size: 18px;
    color: var(--fs-brand-text);
    font-style: normal;
    font-weight: 500;
}

/****************************************************************************/
/* Datasheet body band */
/****************************************************************************/

.datasheet-body-band {
    padding: 20px 20px;
}

.datasheet-body-band-row {
    margin: 0 -15px;
}

.datasheet-body-band-row h4 {
    font-size: 14px;
    font-weight: bold;
}

.datasheet-body-band h3 {
    margin: 20px;
}

.datasheet-body-band p {
    margin: 5px;
    font-size: 12px;
    line-height: 15px;
}

.datasheet-body-band p span {
    right: 0;
    font-weight: 900;
}

.datasheet-body-band hr {
    border-color: var(--fs-line-2);
    border-width: 1px;
}

.datasheet-body-band a {
    color: var(--fs-text-strong);
}

.datasheet-body-band a:hover {
   /* color: #e3000f;*/
    text-decoration: none;
}

.datasheet-body-band a:active, a:visited {
    text-decoration: none;
}

.datasheet-body-band label {
    margin: 5px;
    font-size: 12px;
    line-height: 14px;
    font-weight: normal;
}

.form-control:focus {
    border-color: var(--fs-brand-line);
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.datasheet-body-band select option {
    color: var(--fs-text-faint);
}

.datasheet-body-band input  {
    height: 60px;
    border-radius: 2px;
    padding-top: 20px;
    padding-left: 18px;
    color: var(--fs-text-2);
    font-size: 14px;
    font-weight: 500;
}

.datasheet-body-band select {
    height: 60px;
    border-radius: 2px;
    padding-top: 20px;
    padding-left: 15px;
    color: var(--fs-text-2);
    font-size: 16px;
    font-weight: 500;
}

.datasheet-body-band input[type="number"]  {
    height: 60px;
    text-align: right;
    width: 100%;
    padding-left: 7px;
    /*border: 1px solid #969696;*/
}

.datasheet-body-band-image input[type="text"]  {
    height: 60px;
}

.datasheet-body-band input[type="time"]  {
    height: 60px;
    width: 100%;
    padding-left: 7px;
    border: 1px solid var(--fs-grey-fill);
}

input[onchange="validateHhMm(this);"] {
    padding-bottom: 10px;
}

input[type="time" i] {
    padding-top: 30px;
    /*background-color: #ffffff !important;*/
}

.datasheet-body-band-image span button {
    height: 50px;
}

.datasheet-body-band-btn {
    padding: 20px 0;
}

.datasheet-body-band-row-label {
    margin: 5px;
    font-size: 16px !important;
    line-height: 22px !important;
    padding: 10px 0;
}

@media (max-width: 768px) {
    .datasheet-body-band-row-label {
        font-size: 14px !important;
        line-height: 20px !important;
        padding: 10px 0;
    }
}

p.form-label-text {
    position: relative;
    top: 30px;
    left: 15px;
    color: var(--fs-text-faint);
    font-size: 12px;
    font-weight: 400;
}

p.form-label-text-left {
    position: relative;
    top: 30px;
    left: 6px;
    color: var(--fs-text-faint);
    font-size: 12px;
    font-weight: 400;
}

p.form-type-time.form-label-text {
    top: 25px;
    left: 5px;
}

.form-well, .form-well-simple-mod {
    border-radius: 5px;
    padding: 0 0 20px 0;
}

.form-pad-01 {
    margin-right: 10px;
    width: 49.17%;
}

.form-pad-02 {
    margin-left: 10px;
    width: 49.17%;
}

.form-group {
    margin: 0;
    padding-right: 15px;
    padding-left: 20px;
}

.form-group-pad-01 {
    padding-right: 20px;
}

.form-input-left {
    margin-left: -8px;
}

input#image {
    width: 400px;
    height: 150px;
    padding: 50px;
}

button.btn-form-group.btn.btn-default {
    float: right;
    margin-top: 20px;
    margin-right: 5px;
    margin-left: 20px;
}

.form-group-button {
    margin-top: 35px;
}

/* Particulares */

/*.datasheet-body-band-image-pane-photo {
    height: 340px;
}

.datasheet-body-band-image-pane-photonew {
    height: 560px;
}

.datasheet-body-band-image-pane-header {
    height: 660px;
}

.datasheet-body-band-image-pane-icon {
    height: 100px;
}*/


/****************************************************************************/
/* Dashboard body band */
/****************************************************************************/

.dashboard-body-band {
    padding: 20px 20px;
}

.dashboard-body-band h3 {
    /*margin: 20px;*/
}

.dashboard-body-band p {
    margin: 5px;
    font-size: 12px;
    line-height: 15px;
}

.dashboard-body-band p span {
    right: 0;
    font-weight: bold;
}

.dashboard-body-band hr {
    border-color: var(--fs-line-2);
    border-width: 1px;
}

.dashboard-body-band a {
    color: var(--fs-text-strong);
}

.dashboard-body-band a:hover {
    color: var(--fs-brand-text);
    text-decoration: none;
}

.dashboard-body-band a:active, a:visited {
    text-decoration: none;
}

.dashboard-body-band label {
    margin: 5px;
    font-size: 12px;
    line-height: 15px;
}

.dashboard-body-band select {
    height: 40px;
}

.dashboard-body-band select option {
    color: var(--fs-text);
}

.dashboard-body-band input[type="text"]  {
    height: 40px;
}

.dashboard-body-band input[type="number"]  {
    height: 40px;
    text-align: right;
}

.dashboard-body-band-image input[type="text"]  {
    height: 50px;
}

.dashboard-body-band-image span button {
    height: 50px;
}

.dashboard-body-band-image-pane {
    height: 340px;
}

.dashboard-body-band-image-panenew {
    height: 720px;
}

/****************************************************************************/
/* Dataview body band */
/****************************************************************************/

.dataview-body-band {
    padding: 20px 0;
}

.dataview-body-band h3 {
    margin: 20px;
}

.dataview-body-band p {
    font-size: 12px;
    line-height: 22px;
}

.dataview-body-band p span {
    right: 0;
    font-weight: bold;
}

.dataview-body-band hr {
    border-color: var(--fs-line-2);
    border-width: 1px;
}

.dataview-body-band-img1 {
    width: 900px;
    height: 300px;
    margin: auto;
}

.dataview-body-band-img2 {
    width: 400px;
    height: 566px;
    margin: auto;
}

.dataview-body-band-img3 {
    width: 1920px;
    height: 640px;
    margin: auto;
}

.dataview-body-band-img4 {
    width: 570px;
    height: 320px;
    margin: auto;
}

/****************************************************************************/
/* Datalist body band */
/****************************************************************************/

.datalist-body-band {
    padding: 20px 20px;
}

.datalist-body-band-header {
    height: 20px;
    margin-top: 20px;
}

.datalist-body-band h3 {
    margin: 20px;
}

.datalist-body-band h5 {
    margin: 20px;
    font-weight: bold;
}

.datalist-body-band p {
    font-size: 12px;
    margin: 2px 2px;
    line-height: 20px;
}

.datalist-body-band p span {
    right: 0;
    font-weight: bold;
}

.datalist-body-band hr {
    border-color: var(--fs-line-2);
    border-width: 1px;
}

.datalist-body-band a {
    color: var(--fs-text);
    margin: 2px 1px;
    font-size: 12px;
    line-height: 20px;
}

.datalist-body-band a:hover {
    color: var(--fs-brand-text);
    text-decoration: none;
}

.datalist-body-band a:active, a:visited {
    text-decoration: none;
}

.datalist-body-band button {
    margin: 25px;
}

.datalist-body-band-separator hr {
    border-top: 1px solid var(--fs-line-3) !important;
    margin: 2px 0;
}

.datalist-body-band-row {
    background: var(--fs-panel-2);
    border-radius: 10px;
}

@media (max-width: 768px) {
    .datalist-body-band-header {
        height: 80px;
        margin-top: 20px;
    }
    .datalist-body-band p {
        font-size: 10px;
        line-height: 16px;
    }
    .datalist-body-band a {
        font-size: 10px;
        line-height: 16px;
    }

    .datalist-body-band-actions {
        padding: 0;
    }
}
@media (min-width: 768px) and (max-width: 992px) {
    .datalist-body-band-header {
        height: 70px;
        margin-top: 20px;
    }
    .datalist-body-band p {
        font-size: 10px;
        line-height: 16px;
    }
    .datalist-body-band a {
        font-size: 10px;
        line-height: 16px;
    }
    .datalist-body-band-actions {
        padding: 0;
    }
}
@media (min-width: 992px) and (max-width: 1200px) {
    .datalist-body-band p {
        font-size: 12px;
        line-height: 20px;
    }
    .datalist-body-band a {
        font-size: 12px;
        line-height: 20px;
    }
    .datalist-body-band-actions {
        padding: 0;
    }
}
@media (min-width: 1200px) and (max-width: 1366px) {
    .datalist-body-band p {
        font-size: 13px;
        line-height: 21px;
    }
    .datalist-body-band a {
        font-size: 13px;
        line-height: 21px;
    }
    .datalist-body-band-actions {
        padding: 0;
    }
}
@media (min-width: 1366px) {
}

/****************************************************************************/
/* Datalist large body band */
/****************************************************************************/

.datalist-large-body-band {
    padding: 20px 20px;
}

.datalist-large-body-band-header {
    height: 20px;
    margin-top: 20px;
}

.datalist-large-body-band-header p {
    font-size: 14px;
}

.datalist-large-body-band-menu {
    /*height: 90px;
    padding-left: 15px;*/
    margin-bottom: 20px;
}

.datalist-large-body-band h3 {
    margin: 20px;
}

.datalist-large-body-band p {
    font-size: 12px;
    margin: 2px 2px;
    line-height: 20px;
    /*height: 66px;*/
}

.datalist-large-body-band p span {
    right: 0;
    font-weight: bold;
}

.datalist-large-body-band hr {
    border-color: var(--fs-line-2);
    border-width: 1px;
}

.datalist-large-body-band a {
    color: var(--fs-text);
    margin: 2px 1px;
    font-size: 12px;
    line-height: 20px;
}

/*.datalist-large-body-band button {
    color: #323232;
    margin: 2px 2px;
    font-size: 12px;
    line-height: 28px;
}*/

.datalist-large-body-band button {
    margin: 25px;
}

.datalist-large-body-band a:hover {
    color: var(--fs-brand-text);
    text-decoration: none;
}

.datalist-large-body-band a:active, a:visited {
    text-decoration: none;
}

.datalist-large-body-band-menu > li > a {
    font-size: 16px;
    color: var(--fs-text-faint-2);
    font-weight: 500;
}

.datalist-large-body-band-menu > li > a:hover, .datalist-large-body-band-menu > li > a:focus {
    text-decoration: none;
    background-color: transparent;
    font-size: 16px;
    color: var(--fs-brand-text);
    font-weight: 900;
    border-bottom: 2px solid var(--fs-brand-line);
    border-radius: 0;
    margin-bottom: 0;
}

.datalist-large-body-band-header-xs {
    padding-left: 0;
    padding-right: 0;
    font-size: 12px;
    margin-top: 20px;
}

.datalist-large-body-band-header-xs p span{
    font-size: 16px;
}

.datalist-large-body-band-header-xs hr{
    width: 100%;
    margin: 0;
    border: 1px solid var(--fs-grey-fill-3);
}

.datalist-large-body-band-header-height {
    height: 70px;
}

.datalist-large-body-band-header-height p {
    padding-top: 5px;
}

.datalist-large-body-band-row {
    padding: 15px 0 0 0;
    height: 50px;
    background: var(--fs-panel-2);
    border-radius: 10px;
}

.datalist-large-body-band-row p {
    font-size: 12px;
}

.datalist-large-body-band-separator hr {
    border-top: 1px solid var(--fs-line-3) !important;
    margin: 2px 0;
}

@media (max-width: 768px) {
    .datalist-large-body-band-header {
        /*height: 80px;*/
        margin-top: 20px;
    }

    .datalist-large-body-band p {
        font-size: 10px;
        line-height: 16px;
    }

    .datalist-large-body-band a {
        font-size: 10px;
        line-height: 16px;
    }

    .datalist-large-body-band-actions {
        padding: 0;
    }

    .datalist-large-body-band-separator hr {
        margin: 15px 0;
    }

    .datalist-large-body-band-row {
        background: none !important;
    }
}

@media (min-width: 768px) and (max-width: 992px) {
    .datalist-large-body-band-header {
        height: 24px;
        margin-top: 20px;
    }

    .datalist-large-body-band p {
        font-size: 10px;
        line-height: 16px;
    }

    .datalist-large-body-band a {
        font-size: 10px;
        line-height: 16px;
    }

    .datalist-large-body-band-actions {
        padding: 0;
    }
    .datalist-large-body-band-separator hr {
        margin: 15px 0;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .datalist-large-body-band p {
        font-size: 11px;
        line-height: 19px;
    }

    .datalist-large-body-band a {
        font-size: 11px;
        line-height: 19px;
    }

    .datalist-large-body-band-actions {
        padding: 0;
    }
}

@media (min-width: 1200px) and (max-width: 1400px) {
    .datalist-large-body-band p {
        font-size: 11px;
        line-height: 19px;
    }

    .datalist-large-body-band a {
        font-size: 11px;
        line-height: 19px;
    }

    .datalist-large-body-band-actions {
        padding: 0;
    }
}

@media (min-width: 1400px) {
}

/****************************************************************************/
/* Datalist huge body band */
/****************************************************************************/

.datalist-huge-body-band {
    padding: 20px 20px;
}

.datalist-huge-body-band h3 {
    margin: 20px;
}

.datalist-huge-body-band p {
    font-size: 14px;
    margin: 2px 2px;
    line-height: 22px;
    height: 70px;
}

.datalist-huge-body-band img {
    margin-top: -15px;
}

.datalist-huge-body-band p span {
    right: 0;
    font-weight: bold;
}

.datalist-huge-body-band hr {
    border-color: var(--fs-line-2);
    border-width: 1px;
}

.datalist-huge-body-band a {
    color: var(--fs-text);
    margin: 2px 1px;
    font-size: 14px;
    line-height: 28px;
}

.datalist-huge-body-band a:hover {
    color: var(--fs-brand-text);
    text-decoration: none;
}

.datalist-huge-body-band a:active, a:visited {
    text-decoration: none;
}

/****************************************************************************/
/* List - Background color */
/****************************************************************************/

.background-list p {
    height: unset;
    color: var(--fs-on-brand);
}

.background-list a {
    color: var(--fs-on-brand);
}

.background-list-color-00 {
    background-color: var(--fs-panel);
    padding: 20px 0 20px 0;
    color: var(--fs-text-muted);
} 

.background-list-color-01 {
    background-color: var(--fs-grey-fill);
    padding: 20px 0 20px 0;
    color: var(--fs-on-brand);
}

.background-list-color-02 {
    background-color: var(--fs-grey-fill-2);
    padding: 20px 0 20px 0;
    color: var(--fs-on-brand);
}

.background-list-color-03 {
    background-color: var(--fs-brand);
    padding: 20px 0 20px 0;
    color: var(--fs-on-brand);
}

/****************************************************************************/
/* Bloque acciones 'manage-block-pages-01' */
/****************************************************************************/

.manage-block-pages-01 {
	margin: 0px 0px 0px -40px;
    text-align: center;
}

.manage-block-pages-01 li {
	font-size: 12px;
	line-height: 26px;
	margin: 0px 0px 20px 0px;
	padding: 0px 0px 0px 10px;
}

.manage-block-pages-01 li a {
	font-size: 12px !important;
    color: var(--fs-brand-text);
}

.manage-block-pages-01 li a:hover {
    color: var(--fs-brand-text);
}

.manage-block-pages-01 li.active>a {
    background: var(--fs-brand);
    border: transparent;
}

.manage-block-pages-01 li.active>a:hover {
    background: var(--fs-brand);
    border: transparent;
    text-decoration: none;
}

.manage-block-pages-01 li:hover {
	border-left: 2px solid var(--fs-brand-line);  
}

.manage-block-pages-01-paginator {
	margin: 20px 0px 0px 40px;
}

/* FICHA-CLIENTE pase 3 (21 sep 2026): en el movil la fila de paginas no cabia y sacaba la barra horizontal (Clientes
   115 px, Productos 55 px, medido a 375). Las paginas bajan en varias filas, sin salirse. */
@media (max-width: 767px) {
    ul.pagination.manage-block-pages-01-paginator {   /* esta hoja repite la regla de arriba mas abajo: aqui gana */
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
    }
    ul.pagination.manage-block-pages-01-paginator > li {
        display: inline-block;
    }
}

.manage-block-pages-01-header p a:hover {
    color: var(--fs-brand-text);
}

.manage-block-pages-01-paginator p a:hover {
    color: var(--fs-brand-text);
    text-decoration: none;
}

.pagination li a {
    font-size: 50%;
}

/****************************************************************************/
/* Bloque acciones 'manage-block-pages-01' */
/****************************************************************************/

.manage-block-pages-01 {
	margin: 0px 0px 0px -40px;
    text-align: center;
}

.manage-block-pages-01 li {
	font-size: 12px;
	line-height: 26px;
	margin: 0px 0px 20px 0px;
	padding: 0px 0px 0px 10px;
}

.manage-block-pages-01 li a {
	font-size: 14px !important;
    color: var(--fs-brand-text);
}

.manage-block-pages-01 li a:hover {
    color: var(--fs-brand-text);
}

.manage-block-pages-01 li.active>a {
    background: var(--fs-brand);
    border: transparent;
}

.manage-block-pages-01 li.active>a:hover {
    background: var(--fs-brand);
    border: transparent;
    text-decoration: none;
}

/*.manage-block-pages-01 li:hover {
	border-left: 2px solid #e3000f;  
}*/

.manage-block-pages-01-paginator {
	margin: 20px 0px 0px 40px;
}

/*.manage-block-pages-01-header p a:hover {
    color: #e3000f;
}*/

.manage-block-pages-01-paginator p a:hover {
    color: var(--fs-brand-text);
    text-decoration: none;
}

.pagination li a {
    font-size: 50%;
}

/****************************************************************************/
/* Carrusel de imágenes */
/****************************************************************************/

.carousel-indicators li {
    border-color: var(--fs-brand-line);
}

.carousel-indicators .active {
    border-color: var(--fs-brand-line);
    background-color: var(--fs-brand);
}

.carousel-images {
    margin-left: -15px;
}

.carousel-01 {
  margin-top: 50px;
  margin-bottom: 70px;
}

.carousel-01-images {
  position: relative;
  padding-top: 35px;
  padding-bottom: 20px;
}

.carousel-01-images p {
  position: absolute;
  bottom: 30px;
  left: 23%;
}

.carousel-01-indicators {
 bottom: -50px;
}

.carousel-01-indicators li {
  border: 1px solid var(--fs-ink-fill);
}

.carousel-01-indicators .active {
  background-color: var(--fs-ink-fill);
  border: 1px solid var(--fs-ink-fill);
}

@media (max-width: 768px) {
  .carousel-01-images p {
    left: 25%;
  }
}

@media (min-width: 768px) and (max-width: 992px) {
  .carousel-01-images p {
    left: 30%;
  }
}

@media (min-width: 992px) and (max-width: 1200px) {
  .carousel-01-images p {
    left: 35%;
  }
}

@media (min-width: 1200px) {
  .carousel-01-images p {
    left: 15%;
  }
}


/****************************************************************************/
/* Bloque de información 'form-signin' */
/****************************************************************************/

.form-signin-container {
	background:url(../img/bg-extinfer.jpg) no-repeat center center;
	background-size: cover;
	display: block;
	height: 650px;
	padding: 0 !important;
	margin: 0;
}

.form-signin {
    max-width: 440px;
    margin: 100px auto;
    background: var(--fs-panel);
    padding: 20px 30px 40px 30px;
    -ms-border-radius: 5px;
    border-radius: 5px;
}

.form-signin h1,h2,label {
    color: var(--fs-text-strong);
}

.form-signin h1 {
    font-size: 30px;
}

.form-signin h2 {
    font-size: 24px;
}

.form-signin .form-signin-heading,
.form-signin .checkbox {
    margin-bottom: 10px;
}

.form-signin .checkbox {
    font-weight: normal;
    color: var(--fs-on-brand);
}

.form-signin .form-control {
    position: relative;
    height: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
    font-size: 16px;
}

.form-signin .form-control:focus {
    z-index: 2;
}

.form-signin input[type="text"] {
    margin-bottom: 2px;
    -webkit-border-bottom-right-radius: 0;
    border-bottom-right-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    border-bottom-left-radius: 0;
    border-color: var(--fs-brand-line);
    margin-bottom: 5px;
}

.form-signin input[type="password"] {
    margin-bottom: 10px;
    -webkit-border-top-left-radius: 0;
    border-top-left-radius: 0;
    -webkit-border-top-right-radius: 0;
    border-top-right-radius: 0;
    border-color: var(--fs-brand-line);
    margin-bottom: 5px;
}

.form-signin button {
    background-color: var(--fs-brand);
    border-color: transparent;
    width: 100%;
}

.form-signin button:hover {
    background-color: var(--fs-select);
    border-color: transparent;
}

.form-signin a {
    color: var(--fs-brand-text);
    margin-bottom: 10px;
}

.form-signin a:hover {
    text-decoration: none;       
}

/****************************************************************************/
/* Bloque de error de página */
/****************************************************************************/

.error-page {
    float: left;
    position: relative;
    margin: 0px 0px 60px 0px;
}

.error-page-info {
    position: absolute;
    top: 6%;
    left: 40px;
    color: var(--fs-on-brand);
}

.error-page-info-boton {
    position: absolute;
    bottom: 6%;
    color: var(--fs-on-brand);
}

.error-page-info h1 {
    font-size: 48px;
    line-height: 56px;
}

.error-page-info h2 {
    font-size: 24px;
    line-height: 28px;
    padding: 15px 0px;
}

.error-page-info p {
    font-size: 20px;
    line-height: 26px;
}

.boton-interior-error-page {
    background: var(--fs-panel);
    color: var(--fs-brand-text);
    font-size: 24px;
    border: none;
    width: 200px;
    height: 60px;
    float: right;
    margin: 25px;
}

@media (max-width: 768px) {
    .error-page-info {
        top: 3%;
    }

    .error-page-info-boton {
        bottom: 3%;
    }

    .error-page-info h1 {
        font-size: 18px;
        line-height: 22px;
    }

    .error-page-info h2 {
        font-size: 0px;
    }

    .error-page-info p {
        font-size: 0px;
    }

    .boton-interior-error-page {
        font-size: 9px;
        width: 75px;
        height: 25px;
        margin: 7px;
    }
}

@media (min-width: 768px) and (max-width: 992px) {
    .error-page-info {
        top: 4%;
    }

    .error-page-info-boton {
        bottom: 4%;
    }

    .error-page-info h1 {
        font-size: 24px;
        line-height: 36px;
    }

    .error-page-info h2 {
        font-size: 12px;
        line-height: 18px;
        padding: 10px 0px;
    }

    .error-page-info p {
        font-size: 14px;
        line-height: 18px;
    }

    .boton-interior-error-page {
        font-size: 12px;
        width: 100px;
        height: 30px;
        margin: 10px;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .error-page-info {
        top: 5%;
    }

    .error-page-info-boton {
        bottom: 5%;
    }

    .error-page-info h1 {
        font-size: 36px;
        line-height: 42px;
    }

    .error-page-info h2 {
        font-size: 18px;
        line-height: 21px;
        padding: 12px 0px;
    }

    .error-page-info p {
        font-size: 16px;
        line-height: 20px;
    }

    .boton-interior-error-page {
        font-size: 18px;
        width: 150px;
        height: 45px;
        margin: 20px;
    }
}

@media (min-width: 1200px) {
    .error-page-info {
    }
}


/****************************************************************************/
/* Bloque de información 'visibility-check' */
/****************************************************************************/

.visibility-check {
    margin: 15px;
    padding-top: 15px;
}

.visibility-check label {
    font-size: 12px;
}

.visibility-check span {
    height: 60px;
}

.visibility-check input[type="checkbox"]  {
    display: none;
}

.visibility-checkinput[type="checkbox"] + label {
    font-size: 12px;
    color: var(--fs-text);
    font-weight: normal;
}

.visibility-check input[type="checkbox"] + label span  {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url(../img/check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}

input[type="checkbox"]:checked + label span {
    background:url(../img/check_radio_sheet.png) -19px top no-repeat;
}

.visibility-check input[type="radio"] {
    display: none;
}

.visibility-checkinput[type="radio"] + label {
    font-size: 12px;
    color: var(--fs-text);
    font-weight: normal;
}

.visibility-check input[type="radio"] + label span {
    display: inline-block;
    width: 19px;
    height: 19px;
    margin: -1px 4px 0 0;
    vertical-align: middle;
    background: url(../img/check_radio_sheet.png) -38px top no-repeat;
    cursor: pointer;
}

input[type="radio"]:checked + label span {
    background: url(../img/check_radio_sheet.png) -57px top no-repeat;
}


@media (max-width: 768px) {
    .visibility-check label {
        font-size: 10px;
    }
}

@media (min-width: 768px) and (max-width: 992px) {
    .visibility-check label {
        font-size: 10px;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .visibility-check label {
        font-size: 12px;
    }
}

@media (min-width: 1200px)  and (max-width: 1760px){
    .visibility-check label {
        font-size: 12px;
    }
}

/****************************************************************************/
/* Bloque de pie de página 'footer-full-04' */
/****************************************************************************/

.footer-full-04 {
    margin: 0px 0px -20px 0px;
}

.footer-full-04-logo {
	margin: 15px 0px;
}

.footer-full-04-address {
	font-size: 12px;
	line-height: 15px;
	margin: 15px 0px;
}

.footer-full-04-therms {
	font-size: 14px;
	line-height: 20px;
	padding: 67px 0px;
}

.footer-full-04-therms a {
    color: var(--fs-brand-text);
}

.footer-full-04-therms a:hover {
    text-decoration: none;
}

.footer-full-04-social-media {
	font-size: 14px;
	line-height: 15px;
	padding: 67px 0px;
    text-align: right;
}

.footer-full-04-social-media-icons {

}

.footer-full-04-social-media-icons li {
	list-style: none;
}

.footer-full-04-social-media a {
	color: var(--fs-on-brand);
	display: inline-block;
	font-size: 14px;
}

.footer-full-04-social-media a span {
	width: 26px;
	height: 26px;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    line-height: 26px;
}

.footer-full-04-copyright {
	font-size: 11px;
}


@media (max-width: 768px) {
	.footer-full-04-therms {
		font-size: 12px;
		line-height: 12px;
		padding: 27px 0px;
	}

	.footer-full-04-social-media {
		font-size: 12px;
		line-height: 12px;
		padding: 27px 0px; 
	}
}

@media (min-width: 768px) and (max-width: 992px) {
	.footer-full-04-therms {
		font-size: 14px;
		line-height: 15px;
		padding: 27px 0px;
	}

	.footer-full-04-social-media {
		font-size: 14px;
		line-height: 15px;
		padding: 27px 0px; 
	}
}

@media (min-width: 992px) and (max-width: 1200px) {

}

/* FICHA-CLIENTE pase 4 (22 sep 2026, Aitor): EL PIE, ABAJO DEL TODO Y COMPACTO. Si lo de la pagina no llena la pantalla,
   el pie se queda abajo igual y el espacio libre queda ENTRE el contenido y el pie (limpio: Aitor pondra ahi un fondo).
   Solo en las paginas que llevan el pie (el resto, igual que siempre). Un navegador sin :has() lo deja como antes. */
body:has(> footer.footer-full-04) {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100vh;
}
body:has(> footer.footer-full-04) > * {
    flex-shrink: 0;
}
body:has(> footer.footer-full-04) > footer.footer-full-04 {
    margin-top: auto;
    margin-bottom: 0;
}
footer.footer-full-04 {
    padding: 8px 0 6px 0;
}
footer.footer-full-04 .footer-full-04-logo {
    margin: 2px 0 4px 0;
}
footer.footer-full-04 .footer-full-04-logo img {
    height: 28px;
    width: auto;
}
footer.footer-full-04 .footer-full-04-address {
    margin: 0;
    font-size: 12px;
    line-height: 15px;
}
footer.footer-full-04 .footer-full-04-therms,
footer.footer-full-04 .footer-full-04-social-media {
    padding: 6px 0;
    font-size: 13px;
    line-height: 19px;
}
footer.footer-full-04 .footer-full-04-therms br + br {
    display: none;   /* entre «Condiciones del servicio» y «Términos» iba una linea en blanco */
}
footer.footer-full-04 .footer-full-04-social-media-icons {
    margin: 0 0 4px 0;
    padding: 0;
}
footer.footer-full-04 .footer-full-04-copyright {
    margin: 0;
}

/* FICHA-CLIENTE pase 4: la cabecera de las listas ya no repite el nombre de la seccion (partials/list_header.php); sin
   el titulo a la izquierda, los botones («Nuevo…», «Atrás») se quedan a la derecha, donde estaban. */
@media (min-width: 601px) {
    .list-header .list-header__actions {
        margin-left: auto;
    }
}

/* FICHA-CLIENTE pase 5 (22 sep 2026, Aitor): EN INICIO, EL RECUADRO DE LOS CUADROS LLEGA HASTA EL PIE. Si no llena la
   pantalla, el recuadro (y la banda que lo rodea) crece hasta quedar justo encima del pie, sin fondo vacio entre medias;
   los cuadros no se mueven ni cambian. Si no cabe, nada se estira: la pagina se desplaza como siempre. Solo en Inicio
   (oficina y portal: los dos llevan .fs-inicio-solo); el resto de pantallas siguen con el hueco entre el contenido y el
   pie (pase 4). Un navegador sin :has() lo deja como antes. */
body:has(> footer.footer-full-04) > .container:has(.fs-inicio-solo) {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}
body:has(> footer.footer-full-04) > .container:has(.fs-inicio-solo) > .row.well:has(> .fs-inicio-solo) {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}
body:has(> footer.footer-full-04) > .container .row.well > .fs-inicio-solo {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}
body:has(> footer.footer-full-04) > .container .row.well > .fs-inicio-solo > .form-well-simple-mod {
    flex: 1 0 auto;
}

/* FICHA-CLIENTE pase 5 (22 sep 2026, Aitor): EL PIE, UNA FRANJA CON SUS TRES PARTES ALINEADAS. En escritorio, en fila y
   a la misma altura: los datos de la empresa a la izquierda, los tres enlaces EN EL CENTRO DE LA PAGINA (la columna del
   medio va centrada de verdad: las de los lados miden lo mismo) y los iconos con el aviso de derechos a la derecha;
   cada parte centrada en alto. En tableta y movil, una debajo de otra y centradas. Solo cambia la colocacion: los
   textos, los enlaces, los iconos y los datos son los de siempre (functions.php, footerfull04, sin tocar). */
footer.footer-full-04 {
    padding: 7px 0;   /* el mismo aire arriba y abajo (el pase 4 tenia 8 y 6) */
}
footer.footer-full-04 .footer-full-04-therms {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 0;
    text-align: center;
}
footer.footer-full-04 .footer-full-04-therms br {
    display: none;
}
footer.footer-full-04 .footer-full-04-therms a {
    display: block;
}
footer.footer-full-04 .footer-full-04-social-media,
footer.footer-full-04 .footer-full-04-copyright {
    float: none !important;   /* anula el pull-right del marcado (float: right !important de Bootstrap) */
}
footer.footer-full-04 .footer-full-04-social-media-icons li {
    display: inline-block;
}
@media (min-width: 992px) {
    footer.footer-full-04 > .container {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        column-gap: 24px;
        align-items: stretch;
    }
    footer.footer-full-04 > .container::before,
    footer.footer-full-04 > .container::after {
        display: none;   /* el clearfix de Bootstrap ocuparia una celda */
    }
    footer.footer-full-04 > .container > [class*="col-"] {
        float: none;
        width: auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    footer.footer-full-04 > .container > .col-md-4 {
        align-items: flex-start;
    }
    footer.footer-full-04 > .container > .col-md-6 {
        align-items: center;
    }
    footer.footer-full-04 > .container > .col-md-2 {
        align-items: flex-end;
    }
    footer.footer-full-04 .footer-full-04-social-media {
        padding: 0;
        text-align: right;
    }
    footer.footer-full-04 .footer-full-04-copyright {
        text-align: right;
    }
}
@media (max-width: 991px) {
    footer.footer-full-04 > .container > [class*="col-"] {
        text-align: center;
    }
    footer.footer-full-04 .footer-full-04-logo img {
        margin: 0 auto;
    }
    footer.footer-full-04 .footer-full-04-social-media {
        padding: 2px 0 0 0;
        text-align: center;
    }
    footer.footer-full-04 .footer-full-04-copyright {
        text-align: center !important;   /* el marcado lleva text-right */
    }
}

@media (min-width: 1200px) {

}


/****************************************************************************/
/* Formulario de términos y condiciones */
/****************************************************************************/

.window-modal .modal-content {
	padding: 100px 0;
	min-height: 100%;
	border: 0;
	text-align: justify;
	-moz-background-clip: border-box;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

.window-modal .close-modal {
	position: absolute;
	top: 25px;
	right: 25px;
	width: 75px;
	height: 75px;
	background-color: transparent;
	cursor: pointer;
}

.window-modal .close-modal .lr {
	z-index: 1051;
	width: 1px;
	height: 75px;
	margin-left: 35px;
	background-color: var(--fs-ink-fill);
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}

.window-modal .close-modal .lr .rl {
	z-index: 1052;
	width: 1px;
	height: 75px;
	background-color: var(--fs-ink-fill);
	-webkit-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
}

.boton-cerrar {
	background: var(--fs-brand);
	color: var(--fs-on-brand);
	font-size: 18px;
	border: none;
	width: 150px;
	height: 45px;
	margin-top: 25px;
}


/****************************************************************************/
/* Cookies */
/****************************************************************************/

#overbox {
	position: fixed;
	bottom: 0px;
	left: 0px;
	width: 100%;
	z-index: 999999;
	display: block;
}

#infobox {
	margin: auto;
	padding: 15px;
	position: relative;
	top: 0px;
	width: 100%;
	text-align:center;
	background-color: var(--fs-brand);
	font-family: 'Lato'
}

#infobox p {
	line-height:28px;
	font-size:12px;
	text-align:center;
    color: var(--fs-on-brand);
}

#infobox p a {
	margin-right:5px;
	text-decoration: underline;
    color: var(--fs-select-text);
}


/****************************************************************************/
/* Login */
/****************************************************************************/

.log-form {
    background: var(--fs-panel);
    padding: 20px 30px 40px 30px;
    -ms-border-radius: 5px;
    border-radius: 5px;
    width: 400px;
}

.log-form h1 {
    color: var(--fs-text-strong);
    font-size: 26px;
}

.log-form h2 {
    color: var(--fs-text-strong);
    font-size: 22px;
}

.log-form label {
    color: var(--fs-text-strong);
}

/****************************************************************************/
/* Footer */
/****************************************************************************/

.node-treeview_json {
    color: var(--fs-text);
    font-size: 12px;
    line-height: 28px;
}

.node-selected {
    background-color: var(--fs-brand) !important;
}

.node-selected a {
    color: var(--fs-on-brand) !important;
}


/****************************************************************************/
/* Calendario */
/****************************************************************************/

.caleran-container, .caleran-container-mobile {
    font-family: 'Lato';
}

    .caleran-container.caleran-inline {
        width: 100% !important;
    }

.caleran-input {
    width: 100% !important;
}

.caleran-container .caleran-input, .caleran-container-mobile .caleran-input {
    border: none !important;
}

i.fa.fa-arrow-left {
    color: var(--fs-brand-text);
    font-size: 16px;
}

i.fa.fa-arrow-right {
    color: var(--fs-brand-text);
    font-size: 16px;
}

b.caleran-month-switch {
    color: var(--fs-brand-text);
    font-weight: 100;
}

    b.caleran-month-switch:hover {
        color: var(--fs-brand-text) !important;
        cursor: inherit !important;
    }

span.caleran-year-switch {
    color: var(--fs-brand-text);
}

    span.caleran-year-switch:hover {
        color: var(--fs-brand-text) !important;
        cursor: inherit !important;
    }

/* Modificación puntual background*/
.caleran-container .caleran-input .caleran-calendars .caleran-calendar .caleran-days-container .caleran-day.caleran-selected.caleran-disabled, .caleran-container .caleran-input .caleran-calendars .caleran-calendar .caleran-days-container .caleran-day.caleran-start.caleran-disabled, .caleran-container .caleran-input .caleran-calendars .caleran-calendar .caleran-days-container .caleran-day.caleran-end.caleran-disabled, .caleran-container-mobile .caleran-input .caleran-calendars .caleran-calendar .caleran-days-container .caleran-day.caleran-selected.caleran-disabled, .caleran-container-mobile .caleran-input .caleran-calendars .caleran-calendar .caleran-days-container .caleran-day.caleran-start.caleran-disabled, .caleran-container-mobile .caleran-input .caleran-calendars .caleran-calendar .caleran-days-container .caleran-day.caleran-end.caleran-disabled {
    background: var(--fs-panel) !important;
    border-radius: 0 !important;
    opacity: .3 !important;
}

.caleran-container .caleran-input .caleran-calendars .caleran-calendar .caleran-days-container .caleran-day.caleran-selected, .caleran-container .caleran-input .caleran-calendars .caleran-calendar .caleran-days-container .caleran-day.caleran-start, .caleran-container .caleran-input .caleran-calendars .caleran-calendar .caleran-days-container .caleran-day.caleran-end, .caleran-container-mobile .caleran-input .caleran-calendars .caleran-calendar .caleran-days-container .caleran-day.caleran-selected, .caleran-container-mobile .caleran-input .caleran-calendars .caleran-calendar .caleran-days-container .caleran-day.caleran-start, .caleran-container-mobile .caleran-input .caleran-calendars .caleran-calendar .caleran-days-container .caleran-day.caleran-end {
    background: var(--fs-select) !important;
    border-radius: 0 !important;
    text-align: right;
}

    .caleran-container .caleran-input .caleran-calendars .caleran-calendar .caleran-days-container .caleran-day.caleran-end:not(.caleran-hovered) span, .caleran-container-mobile .caleran-input .caleran-calendars .caleran-calendar .caleran-days-container .caleran-day.caleran-end:not(.caleran-hovered) span {
        background: var(--fs-brand) !important;
        border-radius: 0 !important;
    }

    .caleran-container .caleran-input .caleran-calendars .caleran-calendar .caleran-days-container .caleran-day.caleran-start:not(.caleran-hovered) span, .caleran-container-mobile .caleran-input .caleran-calendars .caleran-calendar .caleran-days-container .caleran-day.caleran-start:not(.caleran-hovered) span {
        background: var(--fs-brand) !important;
        border-radius: 0 !important;
    }

.caleran-container .caleran-input .caleran-calendars .caleran-calendar .caleran-days-container .caleran-day:hover:not(.caleran-hovered):not(.caleran-selected), .caleran-container-mobile .caleran-input .caleran-calendars .caleran-calendar .caleran-days-container .caleran-day:hover:not(.caleran-hovered):not(.caleran-selected) {
    background-color: var(--fs-select) !important;
    border-radius: 0px !important;
}

/*.caleran-container .caleran-input .caleran-calendars .caleran-calendar .caleran-days-container .caleran-day.caleran-hovered, .caleran-container-mobile .caleran-input .caleran-calendars .caleran-calendar .caleran-days-container .caleran-day.caleran-hovered{
	background-color:#fdf1d7 !important;
    border-radius:0px !important;
}*/


.caleran-container .caleran-input .caleran-calendars .caleran-calendar .caleran-days-container .caleran-day.caleran-hovered, .caleran-container-mobile .caleran-input .caleran-calendars .caleran-calendar .caleran-days-container .caleran-day.caleran-hovered {
    background: var(--fs-select);
    border-radius: 0px !important;
}


/* Modificaciones calendario */
.caleran-weekend {
    color: var(--fs-text-strong) !important;
}

/*.caleran-weekend.caleran-selected {
    color: white !important;
}*/

.caleran-not-in-month {
    color: transparent !important;
    pointer-events: none;
}

.caleran-day.caleran-hovered.caleran-disabled.caleran-not-in-month {
    background: transparent !important;
}

.caleran-day.caleran-selected.caleran-disabled.caleran-not-in-month {
    color: transparent !important;
}

.caleran-header {
    padding: 0 20px 0 20px !important;
}

.caleran-header-separator {
    color: var(--fs-select-text) !important;
}

.caleran-header-start-day {
    color: var(--fs-brand-text) !important;
    font-size: 28px !important;
    margin-top: 0 !important;
}

.caleran-header-start-date {
    color: var(--fs-brand-text) !important;
    font-size: 11px !important;
}

.caleran-header-start-weekday {
    color: var(--fs-brand-text) !important;
    font-size: 11px !important;
    margin-top: -4px !important;
}

.caleran-header-end-day {
    color: var(--fs-brand-text) !important;
    font-size: 28px !important;
    margin-top: 0 !important;
}

.caleran-header-end-date {
    color: var(--fs-brand-text) !important;
    font-size: 11px !important;
}

.caleran-header-end-weekday {
    color: var(--fs-brand-text) !important;
    font-size: 11px !important;
    margin-top: -4px !important;
}

.caleran-day, .caleran-disabled {
    border: 1px solid var(--fs-line-3) !important;
    margin-bottom: -1px !important;
    margin-left: -1px !important;
    /*padding: 3px 4px 14px 24px !important;
    font-size: 9px !important;*/
    overflow: unset !important;
}

    .caleran-day span, .caleran-disabled span {
        font-size: 9px !important;
    }

@media (min-width: 768px) {
    .caleran-day span, .caleran-disabled span {
        padding: 3px 4px 14px 24px !important;
    }
}

.caleran-start span, .caleran-end span {
    font-weight: 900 !important;
}

.caleran-selected {
    color: var(--fs-text-strong) !important;
}

.caleran-ms-month.current {
    background: var(--fs-brand) !important;
}

.caleran-ms-month:hover {
    background: var(--fs-select) !important;
}

.caleran-ys-year.current {
    background: var(--fs-brand) !important;
}

.caleran-ys-year:hover {
    background: var(--fs-select) !important;
}

.caleran-ys-year-prev, .caleran-ys-year-next {
    background: var(--fs-select) !important;
    color: var(--fs-brand-text) !important;
}

.caleran-not-in-month {
    /*border: 0px !important;*/
}

/*.caleran-start {
    background: #eea902 !important;
}

.caleran-end {
    background: #eea902 !important;
}*/

/****************************************************************************/
/* Ventana modal */
/****************************************************************************/

.modal-body {
    padding: 20px 15px;
}

.modal-dialog {
    margin: auto;
    display: block;
    margin-top: 15%;
}

form .btn-group.bootstrap-select button.dropdown-toggle.btn.btn-xs.btn-default {
    margin: 0;
    height: 70px;
}

.input[type="month"] {
    height: 70px;
    width: 100%;
    padding-left: 7px;
}

input[type="month" i] {
    padding-top: 30px;
    padding-inline-start: 15px;
    min-width: 270px;
    border: 1px solid var(--fs-brand-line);
}

.modal-footer .btn-default {
    margin: 0;
}

.modal-header .close {
    margin-right: 0;
}

/****************************************************************************/
/* Responsive */
/****************************************************************************/

@media (max-width: 768px) {
    .main-header-company h2, .main-header-title h4 {
        font-size: 12px;
    }
    .main-header-company, .main-header-title {
        padding: 5px 0 0 0;
    }
    .main-header-band-user {
        padding: 0 10px 10px 0;
    }
    .main-header-user {
        margin: 0;
        width: 30%;
        height: 30%;
    }
    .form-well, .form-well-simple-mod {
        height: 100%;
    }
    /* Sprint SIDEBAR-FIX: override neutralizado (regla raiz tampoco
       aplica padding-top desde mayo 2026). */
    .form-pad-01 {
        width: 100%;
    }
    .form-pad-02 {
        width: 100%;
        margin-left: 0;
        margin-top: 20px;
    }
    .form-input-left {
        margin-left: initial;
    }
    p.form-label-text-left {
        left: 14px;
    }
    input#image {
        width: 100%;
        padding: 50px 70px;
    } 
    div#bs-sidebar-navbar-collapse-1 {
        padding-left: 20px;
        margin-left: 5px;
        border: none;
    }
    .main-header-well-top-left {
        border-left-color: var(--fs-line);
        border-right-color: transparent;
    }
    .main-header-well-top-right {
        border-left-color: var(--fs-line);
    }
    .main-header-well-bottom-left {
        border-left-color: var(--fs-line);
    }
    .main-header-well-bottom-right {
        border-bottom-color: var(--fs-line);
        border-right-color: var(--fs-line);
    }
}
  
@media (min-width: 768px) and (max-width: 992px) {
    .main-header-company h2, .main-header-title h4 {
        font-size: 14px;
    }
    .main-header-company, .main-header-title {
        padding: 5px 0 0 0;
    }
    .main-header-band-user {
        padding: 0 10px 10px 0;
    }
    .main-header-user {
        margin: 0;
        width: 30%;
        height: 30%;
    }
    .form-well, .form-well-simple-mod {
        height: 100%;
    }
    /* Sprint SIDEBAR-FIX: override neutralizado (regla raiz tampoco
       aplica padding-top desde mayo 2026). */
    .form-pad-01 {
        width: 100%;
    }
    .form-pad-02 {
        width: 100%;
        margin-left: 0;
        margin-top: 20px;
    }
    .form-input-left {
        margin-left: initial;
    }
    p.form-label-text-left {
        left: 14px;
    }
}
  
@media (min-width: 992px) and (max-width: 1200px) {
    .main-header-title {
        padding-left: 30px;
    }
    .main-header-well-top-left {
        padding-top: 3%;
    }
    .form-well {
        height: 100%;
    }
   .form-well-simple-mod {
        min-height: 600px;
    }
    /* Sprint SIDEBAR-FIX: override neutralizado (regla raiz tampoco
       aplica padding-top desde mayo 2026). */
    .menu-icon-config .menu-icon .menu-text {
        padding: 0 10px;
    }
    .menu-text {
        font-size: 10px;
    }
    .form-pad-01 {
        width: 100%;
    }
    .form-pad-02 {
        width: 100%;
        margin-left: 0;
        margin-top: 20px;
    }
    .datalist-large-body-band-menu > li > a {
        font-size: 14px;
    }
    .datalist-large-body-band-menu > li > a:hover, .datalist-large-body-band-menu > li > a:focus {
        font-size: 14px;
    }
}

@media (min-width: 1200px) {
    .form-well, .form-well-simple-mod {
        min-height: 600px;
    }
}

@media (min-width: 1200px) and (max-width: 1246px) {
    .main-header-band-user {
        padding: 0 20px 20px 0;
    }
}

@media (min-width: 1201px) and (max-width: 1338px) {
    .form-pad-01, .form-pad-02 {
        width: 100%;
    }
    .form-pad-02 {
        margin-top: 20px;
        margin-left: initial;
    }
}

@media (min-width: 1339px) and (max-width: 1584px) {
    .form-pad-01, .form-pad-02 {
        width: 49%;
    }
    button.btn-form-group.btn.btn-default {
        width: 100%;
        height: 100%;
    }
    .form-group-button {
        margin-top: 11%;
    }
    input#image {
        width: 100%;
        height: 100%;
    }
}

@media (min-width: 1263px) and (max-width: 1533px){
    .collection-points {
        font-size: 22px !important;
    }
}

@media (max-width: 1263px) {
    .collection-points {
        font-size: 14px !important;
    }
}


/****************************************************************************/
/* Hacks navegadores */
/****************************************************************************/

/*IE*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

    .menu-icon {
        width: auto;
    }

}

/****************************************************************************/
/* Legal */
/****************************************************************************/

/* ESTADISTICAS-KM (29-sep-2026, D4 de Aitor): este selector se escapaba (".legal-info table, th, td" = la tabla del aviso legal Y
   TODAS las celdas de la web) y ponia un borde oscuro a todas las celdas. El BORDE se queda solo en el aviso legal; el relleno, la
   letra y la alineacion los han tenido siempre todas las celdas y se dejan igual, para que no cambie nada mas en ninguna pantalla. */
.legal-info table, .legal-info th, .legal-info td {
    border: 1px solid var(--fs-ink-fill);
}
.legal-info table, th, td {
    padding: 4px;
    font-size: 12px;
    text-align: left;
}


/****************************************************************************/
/* Particulares */
/****************************************************************************/

#customerSelected {
    font-size: 14px;
    font-weight: bold;
    margin-top: 30px;
}

#customerSelected span {
    color: var(--fs-brand-text);
}

.fa-plus-circle {
    margin: 30px;
    font-size: 24px;
    line-height: 32px;
}

.fa-plus-circle span {
    font-family: 'Lato ', sans-serif;
    margin-left: 10px;
    font-size: 18px;
    line-height: 32px;
    font-weight: normal;
}


.modal-dialog.inventory {
    margin-top: 5%;
    width: 900px;
}

@media (max-width: 768px) {
    /* WEB-MOVIL-ARREGLOS (27-sep-2026), A2: en un movil la ventana ocupa el ancho de la pantalla con 10 px de margen
       (antes, 450 px fijos: en cualquier movil de menos de 450 px se salia y su boton de guardar quedaba cortado). */
    .modal-dialog.inventory {
        width: auto;
        margin: 10px;
    }

    #customerSelected {
        font-size: 12px;
    }
}

@media (min-width: 768px) and (max-width: 992px) {
    .modal-dialog.inventory {
        width: 750px;
    }

    #customerSelected {
        font-size: 12px;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    #customerSelected {
        font-size: 12px;
    }
}
/* Sprint ACT-LAYOUT-COLUMNS (4 may 2026) — colapsa el layout 2-columnas
   floats de .form-pad-01/.form-pad-02 SOLO EN PANTALLA. Las familias del
   acta quedan apiladas a 100% ancho, eliminando los huecos grises por
   filas desbalanceadas (familia corta vs larga en la misma fila). El PDF
   entregado al cliente NO se ve afectado (TCPDF en review-print.php
   genera el PDF programaticamente y no usa este CSS). El flujo
   window.print() del navegador mantiene las 49.17% originales (no esta
   sobrescrito en @media print). */
@media screen {
    .form-pad-01,
    .form-pad-02 {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

/* Sprint ACT-OBSERVATIONS+WHITESPACE (4 may 2026):
   - Oculta el placeholder vacio "extraFamily" del acta en pantalla.
     En el layout 2-columnas original cubria el hueco de fila impar; con
     1-columna actual (sprint ACT-LAYOUT-COLUMNS) crea un cuadro blanco
     vertical innecesario.
   - Reduce gap entre familias eliminando margin-bottom acumulado en
     .form-pad-01 contiguos.
   No se aplica en @media print: TCPDF programatico no usa este CSS,
   pero por simetria con sprints anteriores lo restringimos a screen. */
@media screen {
    .act-extra-placeholder {
        display: none !important;
    }
    .form-pad-01 + .form-pad-01 {
        margin-top: 12px !important;
    }
}

/* Sprint ACT-WHITESPACE-FINAL (4 may 2026):
   Anula altura forzada residual en wrapper de seccion del acta.
   - .form-well, .form-well-simple-mod tenian min-height:600px y height:100%
     en breakpoints >=768/1200px. Subsecciones con poco contenido (ej.
     4E, 7.2B, 7.2E, 7.3B, 7.7B con 5-9 items) quedaban con 400+ px
     vacios al final.
   - .form-well padding-bottom 20px (de form-well) + 19px (de bootstrap .well)
     suman ~39px vertical residual. Mantenemos 12px que da aire pero no hueco.
   Cambios SOLO en @media screen. PDF (TCPDF programatico) no afectado. */
@media screen {
    .form-well,
    .form-well-simple-mod {
        min-height: auto !important;
        height: auto !important;
    }
    .form-pad-01.form-well,
    .form-pad-02.form-well {
        padding-bottom: 12px !important;
    }
}

/* Sprint INVOICE-RESTORE (5 may 2026):
   Sidebar descuadre vertical en vistas con tablas anchas (invoice-list,
   invoice-view). Causa raiz: bootstrap row con float-based columns; al
   crecer el contenido derecho mas que el sidebar (col-md-2), si el row no
   tiene clearfix robusto, el siguiente row puede solaparse. Ademas si el
   contenido derecho hace overflow horizontal, descuadra layout entero.
   Fix defensivo SOLO en @media screen, no afecta PDF. */
@media screen and (min-width: 768px) {
    .row.well > .main-header-well-bottom-left {
        min-height: 100%;
    }
    .row.well > .main-header-well-bottom-right {
        overflow-x: auto;
    }
    .row.well::after {
        content: "";
        display: table;
        clear: both;
    }
    .row.well > .main-header-well-bottom-right table.table {
        max-width: 100%;
        overflow-x: auto;
        display: block;
    }
}


/* === Sprint ui_polish (24 may 2026): floating labels =====================
   Eleva p.form-label-text cuando el input/textarea/select tiene contenido
   o esta enfocado. Soluciona el solapamiento label-contenido en formularios
   ya guardados (agreement-update, certificate-update, etc).

   Estrategia: :has() de CSS4 — el repo monta <p.form-label-text> ANTES de
   <input>, no se puede usar el ~ combinator (sibling siguiente). :has()
   permite estilar el ancestro `.form-group` cuando contiene un campo en
   ese estado.

   Categoria A (sin placeholder util) ajustada en este sprint anyadiendo
   placeholder=" " a los textareas relevantes. Categoria B (con placeholder
   funcional) NO se toca: el placeholder visible cuando esta vacio mantiene
   :placeholder-shown=true y el label permanece en posicion baja (sin
   solapar porque hay placeholder ahi); cuando se llena, el label sube.
   Categoria C (sin wrapper .form-group) no aplica.
   ======================================================================== */
.form-group:has(input:focus) > p.form-label-text,
.form-group:has(input:not(:placeholder-shown)) > p.form-label-text,
.form-group:has(textarea:focus) > p.form-label-text,
.form-group:has(textarea:not(:placeholder-shown)) > p.form-label-text,
.form-group:has(select:focus) > p.form-label-text,
.form-group:has(select) > p.form-label-text {
    top: 4px;
    left: 17px;
    font-size: 10px;
    color: var(--fs-text-muted-2);
    font-weight: 500;
    transition: top 0.15s ease, font-size 0.15s ease, color 0.15s ease;
}

/* === WEB-MOVIL-ARREGLOS (27-sep-2026) =====================================
   A1: el recuadro de firma de acta, portal, albaran y aprobacion (js/firma_lienzo.js). Por dentro sigue midiendo
   500 x 500 (la imagen que se guarda no cambia); aqui solo se decide lo que se ve: el ancho que haya, como mucho 500 px,
   cuadrado, y en un movil girado no mas alto que la pantalla. Papel blanco en los dos temas, como la firma del presupuesto.
   ======================================================================== */
canvas.fs-firma-lienzo {
    display: block;
    width: 100%;
    max-width: 500px;
    max-width: min(500px, 85vh);
    height: auto;
    aspect-ratio: 1 / 1;
    background-color: var(--fs-paper);
    border: 1px solid var(--fs-ink-fill);
    touch-action: none;
    cursor: crosshair;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* === WEB-MOVIL-ARREGLOS, bloque 2 (27-sep-2026): la web en movil, tableta y Safari ======================
   Todo aqui, en la hoja comun: asi no se toca ninguna pantalla (varias las tienen otras tareas). Colores, siempre de
   css/tokens.css. Los PDF no usan esta hoja.
   ======================================================================== */

/* A5 — El menu lateral entre 768 y 991 px (tableta y iPad en vertical, movil girado): como en el movil, detras del boton
   de las tres rayas y con «Inicio» a la vista, en vez de una columna estrecha con los nombres cortados (o de la lista
   entera encima de la pantalla). El contenido ocupa todo el ancho. */
@media (min-width: 768px) and (max-width: 991px) {
    .main-header-well-bottom-left.col-sm-2,
    .main-header-well-bottom-right.col-sm-10 {
        width: 100%;
    }
    nav.sidebar .navbar-header {
        float: none;
    }
    nav.sidebar .navbar-toggle {
        display: block;
    }
    nav.sidebar .navbar-brand.fs-barra-inicio {
        display: block !important;
        width: auto;
        text-align: left;
    }
    nav.sidebar .navbar-collapse.collapse {
        display: none !important;
    }
    nav.sidebar .navbar-collapse.collapse.in {
        display: block !important;
    }
    nav.sidebar .navbar-nav {
        float: none !important;
        margin: 7.5px -15px;
    }
    nav.sidebar .navbar-nav > li {
        float: none;
    }
    div#bs-sidebar-navbar-collapse-1 {
        padding-left: 20px;
        margin-left: 5px;
        border: none;
    }
}

/* A13 — La cabecera en el movil: el titulo de la seccion no se mete debajo de la foto del usuario; si no cabe, baja a
   otra linea. */
@media (max-width: 767px) {
    .main-header-company {
        width: calc(100% - 100px);
    }
    .main-header-company h2 {
        white-space: normal;
        overflow-wrap: break-word;
        line-height: 1.3;
    }
}

/* Las listas (clientes, actas, albaranes, productos...): por debajo de 992 px cada fila apila sus datos, y con la altura
   fija de 50 px se montaban sobre la fila siguiente y no se leian. La fila crece con lo que lleva. */
@media (max-width: 991px) {
    .datalist-large-body-band-row {
        clear: both;
        height: auto;
        min-height: 50px;
        padding-bottom: 10px;
        margin-bottom: 8px;
    }
    .datalist-large-body-band-header {
        height: auto;
    }
    .datalist-large-body-band-header::after,
    .datalist-large-body-band-row::after {
        content: "";
        display: table;
        clear: both;
    }
}

/* El buscador de las listas en el movil: con la cabecera en columna (600 px o menos), su «320 px» de base se aplicaba a la
   ALTURA y el buscador salia como un recuadro de 320 px de alto. Ahora, una linea a todo lo ancho. */
@media (max-width: 600px) {
    .list-header .list-header__search {
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
        margin: 0;
    }
}

/* A3 — Las tablas que no caben en el movil (o en una ventana a media pantalla): se desplazan dentro de su caja y la pagina
   no se mueve de lado. Lo mismo que ya hacia la hoja a partir de 768 px (INVOICE-RESTORE), ahora en todos los tamanos. */
@media screen and (max-width: 767px) {
    .row.well > .main-header-well-bottom-right table.table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* A6 — Solo Safari (iPhone e iPad): un desplegable con un texto largo empujaba la pagina de lado sin verse. Su caja lo
   recorta a lo ancho (en los demas navegadores no cambia nada: el desplegable ya cabia). */
.form-group:has(> select) {
    overflow-x: clip;
}

/* A7 — Subir una foto: el campo de fichero, que es invisible, media 335 px y empujaba la pagina en un movil de 360. */
input.file {
    width: 1px;
    max-width: 1px;
}

/* A10 — El aviso de cookies: franja mas baja y «Cerrar» como un boton grande. El texto no cambia. */
#infobox {
    padding: 6px 12px;
}
#infobox p {
    margin: 0;
    line-height: 18px;
}
#infobox p a[onclick] {
    display: inline-flex;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 88px;
    margin: 2px 0 2px 12px;
    padding: 0 18px;
    border: 2px solid var(--fs-on-brand);
    border-radius: 4px;
    color: var(--fs-on-brand);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}
#infobox p a[onclick]:hover,
#infobox p a[onclick]:focus {
    background-color: var(--fs-on-brand);
    color: var(--fs-brand);
}
@media (max-width: 767px) {
    #infobox p {
        font-size: 11px;
        line-height: 15px;
    }
}
/* Mientras el aviso esta a la vista, la pagina deja sitio debajo para que no tape lo ultimo (el boton de guardar, el
   pie): se puede bajar hasta verlo entero. Al pulsar «Cerrar» el aviso se oculta y el hueco desaparece. */
body:has(#overbox:not([style*="none"])) {
    padding-bottom: 64px;
}
@media (max-width: 767px) {
    body:has(#overbox:not([style*="none"])) {
        padding-bottom: 120px;
    }
}

/* A12 y A4 — Con el dedo (pantallas tactiles): letra de 16 px en los campos (si es menor, Safari amplia la pagina al tocar
   uno) y zona pulsable de al menos 44 x 44 px en los iconos y enlaces de las listas, sin cambiar su dibujo. */
@media (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="range"]),
    select,
    textarea {
        font-size: 16px !important;   /* por encima de lo que diga cada pantalla: con menos, Safari amplia al tocar */
    }
    a[class*="fa-"],
    a[class*="glyphicon-"],
    button:not(.btn):has(> .fas:only-child),
    button:not(.btn):has(> .far:only-child),
    button:not(.btn):has(> .fa:only-child),
    a:not(.btn):has(> .fas:only-child),
    a:not(.btn):has(> .far:only-child),
    a:not(.btn):has(> .fa:only-child),
    a:not(.btn):has(> .glyphicon:only-child) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }
    .footer-full-04-therms a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
    #infobox p a:not([onclick]) {
        display: inline-flex;
        align-items: center;
        vertical-align: middle;
        min-height: 28px;
    }
    td a:not(.btn):not([class*="fa-"]),
    .datalist-large-body-band a:not(.btn):not([class*="fa-"]),
    .datalist-body-band-row a:not(.btn):not([class*="fa-"]),
    a.exp-dim,
    a.exp-emplink {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
        min-width: 24px;
    }
}

/* A11 — La ayuda al mantener pulsado (js/ayuda_toque.js): el mismo aspecto que la de Rutas (.rt-tip). */
.fs-ayuda-toque {
    position: absolute;
    z-index: 1080;
    max-width: 280px;
    padding: 7px 10px;
    border-radius: 6px;
    background: var(--fs-ink-fill);
    color: var(--fs-bg);
    font-size: 13px;
    line-height: 1.4;
    box-shadow: 0 4px 14px var(--fs-shadow-2);
    pointer-events: none;
    opacity: 0;
    transition: opacity .1s;
    overflow-wrap: anywhere;
}
.fs-ayuda-toque--on {
    opacity: 1;
}
@media (pointer: coarse) {
    [title],
    [data-original-title] {
        -webkit-touch-callout: none;
    }
}

/* A9 — Cantidades, importes y porcentajes: al menos 80 px de ancho, que se puedan escribir con el dedo (presupuesto, albaran
   desde presupuesto, lineas del gasto y el periodo de la ficha del empleado). */
.budget-block__timesinput,
.bdn-qty,
.ef-period select,
.exp-l-amount,
.exp-l-rate,
.exp-l-vat {
    min-width: 80px !important;   /* por encima del «min-width: 0» de las hojas de cada modulo */
}

/* Deposito de combustible en el movil: el boton «Entrada: factura del proveedor» no partia su texto y sacaba el recuadro
   7 px por la derecha. Ahora el texto baja de linea si no cabe. */
.ft-page .ft-actions .ft-box {
    max-width: 100%;
}
.ft-page .ft-actions .ft-box > summary.btn {
    max-width: 100%;
    white-space: normal;
}

/* Con el dedo en una tableta girada (992 px o mas), las listas siguen en columnas y la de acciones mide unos 80 px: los
   iconos van uno al lado del otro con zona de 25 x 44 px (sin salirse de su columna) y la fila crece lo que haga falta
   (con los 50 px fijos de antes, los iconos de mas quedaban tapados por la fila siguiente). */
@media (pointer: coarse) and (min-width: 992px) {
    .datalist-large-body-band-row {
        clear: both;
        height: auto;
        min-height: 50px;
    }
    .datalist-large-body-band-row::after {
        content: "";
        display: table;
        clear: both;
    }
    .datalist-large-body-band-row > div:has(> a[class*="fa-"]),
    .datalist-large-body-band-row > div:has(> form > button) {
        padding-left: 0;
        padding-right: 0;
    }
    .datalist-large-body-band-row a[class*="fa-"],
    .datalist-large-body-band-row button:not(.btn):has(> .fas:only-child),
    .datalist-large-body-band-row button:not(.btn):has(> .far:only-child) {
        min-width: 25px;
        margin-left: 2px !important;
        margin-right: 0 !important;
    }
}

/* Con el dedo, tambien: los botones mas pequenos de Bootstrap (32 px de alto como poco) y las casillas de las lineas del
   albaran que sale de un presupuesto (24 px). */
@media (pointer: coarse) {
    .btn-xs {
        min-height: 32px;
    }
    .bdn-page .bdn-lines input.bdn-include {
        width: 24px !important;
        height: 24px !important;
    }
}

/* Las pestanas de arriba (Datos, Actas, Albaranes...) son enlaces de Bootstrap: ya tienen su tamano; no se tocan. Y la
   casilla de los iconos de una fila de lista (que lleva 24 px de alto escritos en la pantalla) crece con ellos. */
@media (pointer: coarse) {
    .nav > li > a {
        display: block;
    }
    .datalist-large-body-band-row > div:has(> a[class*="fa-"]),
    .datalist-large-body-band-row > div:has(> form > button) {
        height: auto !important;
    }
}

/* El nombre del empleado en la lista de nominas: 24 px de alto como poco tambien con raton (en una ventana de 960 px la
   tabla se ensancha y el enlace quedaba de 12 px). */
a.exp-emplink {
    display: inline-block;
    padding: 6px 0;
}