body{
  font-family: 'Open Sans', sans-serif !important;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 100vh;
}

/* TK-layout-pie-sidebar: el pie debe quedar siempre al final de la pagina
   (pegado al fondo del viewport si el contenido es corto, empujado tras el
   contenido si es largo) via el patron flex-column + margin-top:auto. */
footer {
  margin-top: auto;
}

/* TK-layout-pie-sidebar: Bootstrap define .container-fluid con
   margin-left/right:auto (centrado en flujo de bloque normal). Al pasar
   `body` a flex-column, un margen auto en el eje transversal (ancho) ABSORBE
   todo el espacio libre y GANA a align-items:stretch (comportamiento propio
   de flexbox) -- el resultado es que el contenedor del header se encoge a su
   contenido y queda centrado en vez de ocupar el 100% del ancho. Se anula
   aqui solo para el hijo DIRECTO de body (el wrapper del header). */
body > .container-fluid {
  margin-left: 0;
  margin-right: 0;
}

h2{
  font-size: 1.6em !important;
}

a{
  font-family: 'Open Sans', sans-serif !important;
  color: rgb(7, 6, 6);
  text-decoration: none;
}

.container a {
  color: #980046;
}

/* revisor Breadcrumb (feedback humano directo): el azul del breadcrumb
   "variaba" entre pantallas -- Bootstrap fija a{color:#337ab7} pero no
   a:visited, asi que el navegador aplicaba su propio morado/azul nativo de
   :visited en el enlace ya visitado (ej. "Mis Gastos" tras navegar ahi) y
   el azul normal en el resto. No es un bug de datos/tema, es el estado
   :visited del navegador sin normalizar -- se fija igual que el enlace
   normal para que no dependa del historial de navegacion. */
.breadcrumb-item:visited {
  color: #337ab7;
}

.nombre-header, 
.nombre-header * {
    color:#fff;
    text-decoration: none;
}
.nombre-header,
.nombre-header *:hover {
  color:#fff;
  text-decoration: none;
}

.main-navbar .navbar-nav>li>a {
  padding-bottom: 10px !important;
}

.badge{
    margin-top: 7px;
    margin-left: -10px;
    position: absolute !important;
    background-color: rgb(255, 128, 0) !important;
    font-size: 10px !important;
}
.primary-color{
    background-color: var(--theme-color-1) !important;
    color: #fff;
    text-decoration: none;
}

.padre {
   display: flex;
   align-items: center;
}

.btn{
  padding: 6px 10px !important;
}

/* TK-mejoras-mis-reservas: los botones icon-only (fa-search, fa-calendar,
   fa-list...) no centraban verticalmente el icono dentro del boton (el
   line-height del icono FontAwesome no coincide con la altura real del
   boton) -- flex lo centra siempre, tenga texto o solo icono. */
.btn.primario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px; /* misma altura que .form-control (Bootstrap 6px+6px padding + linea) --
                   con flex, sin altura explicita, el boton se encogia a 28px */
}

/* carousel */
.carousel-control {color:var(--theme-color-1)!important;}

.carousel-indicators .active{background-color:var(--theme-color-1)!important;}

.carousel-indicators li{border-color:var(--theme-color-1)!important;}

.carousel-caption{text-align:right!important;top:0px!important;width:95%!important;left:0px!important;right:0px!important;text-shadow:5px 5px 5px rgba(0,0,0,.6)!important;}

/* .item{height:350px!important;} */
/* carousel */

/* datetimepicker */
.datepicker-days{
  margin-top: 20px;
  margin-bottom: 20px;
}

.calendar table td.active{
  background-color: var(--theme-color-1) !important;
  border-radius: 0px !important;
}

.calendar table thead tr:first-child th {
  color: var(--theme-color-1);
  text-align: center;
}

.dow{
  background-color: #a0a0a0 !important;
  border-radius: 0px !important;
  color: #FFF !important;
  text-align: center;
}

.calendar table td.day {
  border: 1px solid #d8d8d8 !important;
}

.calendar table td.day {
  height: 40px !important;
  line-height: 50px !important;
  width: 30px !important;
  text-align: center;
}
/* datetimepicker */

/* colores */
.naranja{background-color:#df3e08 !important;}

.gris-claro{background-color:#ebebeb !important;}

.gris-oscuro{background-color:#818181 !important;}

.purpura{background-color:#4e1036 !important;}

.primario{background-color:var(--theme-color-1) !important;}

.blanco{background-color:#fff !important;}

.azul-medio{background-color:#238AE6 !important;}

.verde{background-color:#215e3f !important;}
/* colores */

/* Clases Auxiliares */
.twoLine{
    display: block;
    display: -webkit-box;
    /*height: 56px;*/
    font-size: 15px;
    line-height: 1.4;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fourLine{
    display: block;
    display: -webkit-box;
    font-size: 15px;
    line-height: 1.4;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.threeLine{
    display: block;
    display: -webkit-box;
    font-size: 15px;
    line-height: 1.4;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shor-text{
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.border-all{
  border: 1px solid #ccc;
  padding-top: 10px;
}

.border-top{
  border-top: 1px solid #ccc;
  padding-top: 10px;
}

.border-bottom{
  border-bottom: 1px solid #ccc;
}

.border-left{
  border-left: 2px solid #ccc;
  height: 88%
}

.border-right{
  border-right: 2px solid #ccc;
  height: 88%
}

.border-fix{
  position: absolute;
  top: 20px;
}

/* TK-96f2c804facf/TK-c4c0d223a4e4 (mismo patron ya aplicado en otras 2
   reglas): en temas PGE/ASA/FIS --theme-color-1 es el gris de FONDO
   #D3D3D3 (~1.5:1, WCAG AA fail como texto), no un color de marca legible.
   Fix de fondo (auditoria especializada 2026-08-06, hallazgo botón "Cerrar"
   e icono de cabecera de Informe Absentismo, tambien reproducido en
   "Actualizar" de Jornada): usar --theme-label-color (solo definida en esos
   temas, apunta a --theme-color-2/navy con contraste valido) con fallback a
   --theme-color-1 para no tocar temas que no la definen (COD ya usa un
   --theme-color-1 propio, oscuro, legible como texto -- sin cambio ahi). */
.t-primary{color: var(--theme-label-color, var(--theme-color-1)) !important;}

.t-mediungrey{color: #666666 !important;}

.t-darkgrey{color: #818181 !important;}

.t-naranja{color: #df3e08 !important;}

.t-blanco{color: #fff !important;}

.t-azul-medio{color:#238AE6 !important;}

.t-verde{color:#215e3f !important;}

.vertical{
  border-right: 1px solid #fff;
}

.top10{
  margin-top: 10px;
}

.top20{
  margin-top: 20px;
}

.top30{
  margin-top: 30px;
}

.top40{
  margin-top: 40px;
}

.bottom10{
  margin-bottom: 10px;
}

.bottom20{
  margin-bottom: 20px;
}

.bottom30{
  margin-bottom: 30px;
}

.bottom40{
  margin-bottom: 40px;
}

.bottom60{
  margin-bottom: 60px;
}

.left20{
  margin-left: 20px;
}

.right20{
  margin-right: 20px;
}

.left10{
  margin-left: 10px;
}

.left5{
  margin-left: 5px;
}

.right10{
  margin-right: 10px;
}

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

.col-5{
  width: 17% !important;
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  float: left;
  margin-right: 10px;
  margin-left: 10px;
}

.anchor a{
  color: #000;
  text-decoration: none;
}

.anchor a:hover{
  color: var(--theme-color-1);
  text-decoration: none;
}
/* Clases Auxiliares */

/* Header */
.navbar .nav li:hover{
    background-color: rgba(153, 54, 71, 0.7);
}

.navbar .nav a:hover{
    color: #fff !important;
}

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
  background-color: rgba(153, 54, 71, 0.7) !important;
 }

.navbar-default .navbar-nav>.open>a {
  color: #fff !important;
  background-color: rgba(153, 54, 71, 0.7) !important;
 }

 .navbar{
   border-radius: 0px !important;
 }

.bar i{
  color: #FFF;
  padding-top: 10px;
  padding-bottom: 10px;
}

.ic{
  height: 25px;
  width: 25px;
  display: inline-block;
  padding: 2px 4px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  color: #980046;
}

.ic_inf{
  background-color: #4e1036;
}

.ic_com{
  background-color: #df3e08;
}

.ic_emp{
  background-color: #534a8a;
}

.ic_eve{
  background-color: #215e3f;
}

.ic_dir{
  background-color: #4f8baa;
}

.ic_avi{
  background-color: #666666;
}

.ic_enc{
  background-color: #a18564;
}

.navbar-header{
  width: 100%
}

.navbar-header a{
  color: #000;
  padding-left: 15px;
  padding-right: 15px;
  margin-top: 15px;
  display: inline-block;
}

.navbar-header a:hover{
  text-decoration: none;
}
/* Header */

/* Footer */
footer a{
  color: #fff;
  padding-right: 10px;
  padding-left: 10px;
}

footer p{
  color: #fff;
}

footer a:hover{
  color: #000;
  text-decoration: none;
}
/* Footer */

/* Home */
.title{
  font-size: 28px;
  /*display: inline-block;*/
  /*position: absolute;*/
  padding-left: 5px;
  /*white-space: nowrap;*/
  /* text-transform: capitalize; */
}

.sub-title{
  font-size: 18px;
  display: inline-block;
  /* text-transform: capitalize; */
}

.icon-box{
  margin-left: -15px;
  height: 50px;
  width: 50px;
  padding-top: 10px;
  text-align: center;
  color: #fff;
}

.boton{
  border: none;
  width: 60px;
  border-radius: 8px !important;
  height: 30px;
  color: #fff !important;
}

.av{
  border-bottom: 2px solid #df3e08;
}

.av p{
  padding-top: 10px;
  padding-bottom: 10px;
}

.av a{
  color: #000;
}

.av a:hover{
  text-decoration: none !important;
  color: var(--theme-color-1) !important;
}

.av-alert{
  position: absolute;
  right: 10px;
  top: 60px;
}

.av-alert i{
  color: green;
}

.com{
  border-bottom: 3px solid #ebebeb !important;
  border-top: 1px solid #ebebeb !important;
  border-left: 1px solid #ebebeb !important;
  border-right: 1px solid #ebebeb !important;
  height: 92px;
}

.com p{
  padding-top: 10px;
  padding-bottom: 10px;
}

.com a{
  color: #000;
}

.com a:hover{
  text-decoration: none !important;
  color: var(--theme-color-1) !important;
}

.input-box{
  background-color: #ebebeb;
  height: 80px;
  padding-top: 15px;
}

.search-home{
    padding-top: 15px;
    padding-bottom: 15px;
}

.search-home input {
  width: 100%;
  height: 50px;
  /* border-radius: 25px; */
  border: none;
  font-size: 16px !important;
  padding-left: 10px !important;
}

.search-home input:focus {
  color: #000 !important;
  padding-left: 10px !important;
  font-size: 16px !important;
  outline: none !important;
}

.search-home button{
  height: 50px;
  width: 100%;
  background-color: var(--theme-color-1);
  color: #fff;
  border: none;
}

.search-home button:focus{
  border: none;
}

.search-home a{
  height: 50px;
  width: 100%;
  background-color: var(--theme-color-1);
  color: #fff;
  border: none;
  display: block;
  line-height: 50px;
  padding-left: 3px;
}

.search-home a:focus{
  border: none;
}

.ap-box{
  background-color: var(--theme-color-1);
  height: 165px;
  color: #fff;
  text-align: center;
  padding-top: 20px;
  margin-bottom: 20px;
}

.ap-box a{
  color: #fff !important;
}

.ap-box a:hover{
  color: var(--theme-color-1) !important;
}

.ap-box i:hover{
  color: var(--theme-color-1) !important;
}

.ap-box p{
  margin-top: 10px !important;
  font-weight: bold;
}

.ap-box:hover{
  background-color: #ebebeb;
  color: var(--theme-color-1);
}

.nov img{
  height: 185px;
  max-width: 100%;
}

.galeriaList img{
    max-height: 200px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.nov p{
  padding-top: 10px;
  padding-bottom: 4px;
}
/* Home */

/* login */
.login{
  text-align: center;
  color: #FFF;
  margin-top: 12%;
}

.login input{
  width: 75%;
  height: 25px;
  background: transparent !important;
  border: solid 1px #ebebeb;
  text-align: center;
  border-radius: 0px;
  margin-top: 15px;
}

.login input:focus {
  background: transparent !important;
  color: #FFF;
  outline: none;
}

.login input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #fff;
  opacity: 1; /* Firefox */
}

.login input:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #fff;
}

.login button{
  color: #FFF;
  width: 75%;
  margin-top: 15px;
  border-radius: 0px;
}

.login button:hover{
  color: #FFF;
  text-decoration: none;
}


.login-home{
  text-align: center;
  color: #fff;
  margin-top: 12%;
  height: 100%;
}

.login-home input{
  width: 75%;
  height: 25px;
  background: transparent !important;
  border: solid 1px #fff;
  text-align: center;
  border-radius: 0px;
  margin-top: 15px;
}

.login-home input:focus {
  background: transparent !important;
  color: #fff;
  outline: none;
}

.login-home input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #fff;
  opacity: 1; /* Firefox */
}

.login-home input:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #fff;
}

.login-home button{
  color: #fff;
  width: 75%;
  margin-top: 15px;
  border-radius: 0px;
  border-color: #fff;
  border: solid 1px;
}

.login-home button:hover{
  color: #fff;
  text-decoration: none;
}

.login-home a{
  color: #fff;
  width: 75%;
  border-radius: 0px;
  border-color: #fff;
  border: solid 1px;
}

.login-home a:hover{
  color: #fff;
  text-decoration: none;
}

.login-background{
  background-image: url('../img/login.jpg');
  height: 600px;
  background-repeat: no-repeat;
  background-size: cover;
}

.login-background-dark{
  background-color: rgba(0, 0, 0, 0.5);
  height: 600px;
}

.login-box{
  height: 80px;
  width: 80px;
  background-color: var(--theme-color-1);
  display: inline-block;
  color: #fff;
  padding-top: 15px;
}

.login-button a{
  color: #fff;
}

.login-button a:hover{
  color: #fff;
  text-decoration: none;
}
/* login */

/* reserva */
.reserva-banner{
  background-image: url('../img/reserva.png');
  height: 150px;
  background-repeat: no-repeat;
  background-size: cover;
}

.reserva-banner .banner-title {
  color: #fff;
  text-align: right;
  margin-top: 90px;
}

/* reserva */
.reserva img {
  max-width: 100%;
  height: auto !important;
}

/* Indormacion municipal */
.inf-banner {
  background-image: url('../img/inf.png');
  height: 180px;
  background-repeat: no-repeat;
  background-size: cover;
}

.inf-banner-div {
    height: 180px;
    background-repeat: no-repeat;
    background-size: cover;
}

.inf-banner .banner-title,
.inf-banner-div .banner-title {
  color: #fff;
  text-align: right;
  margin-top: 120px;
  text-shadow: 2px 2px 4px #000000;
  font-size: 36px;
}

.banner-title {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.normativa-box{
  border: 1px solid #ebebeb;
  padding: 20px;
  border-radius: 5px
}

.normativa-box:hover{
  background-color: #ebebeb;
}

.normativa-tipo {
  text-align: center;
  border: 1px solid var(--theme-color-1);
  padding: 3px;
  border-radius: 2px;
  color: var(--theme-color-1);
  text-transform: uppercase;
  width: fit-content;
  font-size: 11px;
  margin-top: 2px;
  margin-left: 2px;
  margin-right: 2px;
  margin-bottom: 15px;
  line-height: 26px;
}

.normativa-titulo a{
  font-size: 16px;
  font-weight: 700;
  color: #000;
}

.normativa-titulo a:hover{
  color: var(--theme-color-1);
}

.normativa-titulo p{
  font-size: 12px;
  color: #646464;
}

.normativa-fecha span{
  font-size: 12px;
  color: #646464;
}

.fichero a {
  color: #000;
}

.fichero a:hover {
  color: var(--theme-color-1);
}

.search{
  width: 100%;
  height: 30px;
  background-color: #f0f0f0;
  padding: 10px;
  border: 2px solid #ccc;
  border-radius: 0px !important;
}
/* Indormacion municipal */

table{
  width: 100% !important;
}

.dp tr{
  border-bottom: 1px solid #ccc;
  height: 30px;
}

.dp a{
  color: #000;
}

.dp a:hover{
  color: var(--theme-color-1);
  text-decoration: none;
}

#resultados{
  padding-right: 0px !important;
}

.home-modal{
  background-color: rgba(0, 0, 0, 0.7) !important;
  border-radius: 0px !important;
  margin-left: -10px !important;
}

.modal-dialog{
  width: 100% !important;
}

.modal-dialog.modal-lg {
  width: 900px !important;
}

.close{
  color: #fff !important;
  opacity: 1 !important;

}

.modal-dialog{
  top: 25%;
}

.modal-header {
  border-bottom: none !important;
}

.dp-home table{
  width: 90% !important;
}

.dp-home tr{
  border-bottom: 2px solid #fff;
  height: 30px;
  color: #fff;
}

.dp-home a{
  color: #fff;
}

.dp-home a:hover{
  color: var(--theme-color-1);
  text-decoration: none;
}

.agenda{
  height: 565px;
}

.agenda p{
  font-size: 12px;
}

/* .agenda img{
  margin-left: -14px;
  height: 80px;
} */

.agenda a{
  color: #000;
}

.agenda a:hover{
  color: var(--theme-color-1);
  text-decoration: none;
}

/* .agenda-resumen{
  height: 80px;
} */

.agenda-btn a{
  color: #FFF;
  width: 80%;
  border-radius: none;
}

.agenda-btn a:hover{
  color: var(--theme-color-1);
  background-color: #fff !important;
  text-decoration: none;
  border-radius: none;
}

.destacados{
  padding-top: 10px;
  height: 200px;
}

.destacados a{
  color: var(--theme-color-1);
}

.destacados a:hover{
  color: #000;
  text-decoration: none;
}

.destacados p{
  padding-top: 8px;
  font-size: 12px;
  font-weight: 600;
}

.destacados li{
  list-style: circle;
  margin-left: -25px;
  color: var(--theme-color-1);
}

.directorio h3{
  color: #000;
}

.principal{
  font-size: 22px;
  font-weight: 700;
  color: #000 !important;
}

.principal:hover{
  color: var(--theme-color-1) !important;
  text-decoration: none !important;
}

.principal-home{
  font-size: 15px;
  font-weight: 500;
  color: #000 !important;
}

.principal-home:hover{
  color: var(--theme-color-1) !important;
  text-decoration: none !important;
}

.gPolitico a{
    color: var(--theme-color-1);
    text-decoration: none;
}

.gPolitico a:hover{
    color: var(--theme-color-1);
}

.gPolitico i{
    color: var(--theme-color-1);
}

.box{
  display: inline-block;
  border: 1px solid #ebebeb;
  padding: 20px;
  border-radius: 5px
}

#espacios
{
  width: 40% !important;
}

.reserva i{
  color: var(--theme-color-1) !important;
}

.reserva span{
  color: var(--theme-color-1) !important;
  font-size: 15px;
}

.reserva label{
  /* TK-96f2c804facf: --theme-color-1 se reutiliza en algunos temas (ASA/PGE/FIS)
   como color de FONDO (list-backcolor/table-header-backcolor) con un gris muy
   claro (#D3D3D3) que casi no se ve como texto (WCAG AA fail, ~1.5:1). Usamos
   --theme-label-color (definida solo en esos temas, apuntando a un color con
   contraste valido) con fallback a --theme-color-1 para no tocar el aspecto de
   los temas que no lo definen (default/COD/AV). */
  color: var(--theme-label-color, var(--theme-color-1)) !important;
  margin-right: 10px;
  /*width: 100% !important;*/
}

.reserva p{
  font-size: 15px;
  font-weight: 500;
}

.reserva input{
  height: 30px;
  padding: 0px;
  border: 2px solid #ccc;
  border-radius: 0px !important;
  margin-right: 10px;
  width: 100%;
}

.btn-reserva{
  width: 90%;
  color: #fff;
  border-radius: 50px !important;
}



.ap-eye{
  display: inline-block;
  position: absolute;
  margin-left: -38px;
  margin-top: 8px;
}

.ap-search{
  display: inline-block;
  position: absolute;
  margin-top: 22px;
  margin-left: 20px;
}

.search-header{
  background-color: #ccc;
  padding: 15px;
  display: none;
  position: absolute;
  z-index: 1;
  right: 0%;
}

.search-header input{
  min-width: 270px;
  max-width: 300px;
  display: inline-block;
  height: 41px;
  padding: 10px;
  border: none;
  font-size: 15px;
}

.search-header a {
  padding-top: 0px !important;
  border-radius: 0px !important;
}

.search-header button {
  padding-top: 0px !important;
  border-radius: 0px !important;
}

.sub-titulo-encuesta{
    padding: 10px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    background: url(/img/ico_encuesta_sec.png) no-repeat 10px 10px #96004A;
    padding-left: 33px;
}

/* TK-layout-pie-sidebar: la fila sidebar+contenido pasa a flex para que
   ambas columnas tengan SIEMPRE la misma altura (el fondo gris del sidebar
   llega exactamente hasta donde empieza el pie, sin importar la altura real
   del contenido). */
.dashboard-body-row {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
}

.sidebar {
    bottom: 0;
    left: 0;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #f5f5f5;
    border-right: 1px solid #eee;
}

.sidebar a {
  display: block;
  width: 100%;
  padding-left: 30px;
  padding-bottom: 10px;
  padding-top: 10px;
  text-decoration: none;
  color: #777;
}

/* TK-sidebar-tamanos-uniformes: definida tambien aqui (compartida por todos
   los tenants) para no depender de que el bucket /css/{tenant}/style.css
   cargado la incluya (solo PGE la tenia). */
.sidebar a.sidebar-item-laboral-lg {
    font-size: 16px;
}

.sidebar a:hover {
  background-color: rgba(153, 54, 71, 0.7);
  color: #fff;
  text-decoration: none;
}

A.agendaEvento {
  color: #fff;
  background-color: var(--theme-color-1);
  height: 100%;
  width: 100%;
  display: block;
  font-weight: 700;
  padding-top: 5px;
}

A:hover.agendaEvento {
  background-color: rgba(153, 54, 71, 0.7);
  color: #fff;
  text-decoration: none;
}

td .day{
  padding: 0px !important;
}

td.day.selected_day,
td.day.selected_day a {
  background-color: rgb(128, 128, 128);
  color: #fff;
}

td.day.selected_day a:hover {
  background-color: rgba(153, 54, 71, 0.7);
  color: #fff;
  text-decoration: none;
}

.select2-container {
    background-color: #fff;
}

.select2{
  width: 100% !important;
}

.select2-container--default .select2-selection--multiple{
  min-height: 30px !important;
  border: 2px solid #ccc !important;
  border-radius: 0px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  margin-top: 2px !important;
}

.select2-container .select2-search--inline .select2-search__field {
  margin-top: 0px !important;
}

.letraMorada{color:var(--theme-color-1) !important;}

.ck-content {
    min-height: 117px;
}

.checkbox-alto input {
    font-size: 25px;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  float: left;
}

.checkbox-alto label {
  padding-left: 8px;
}

.form-horizontal {
    padding: 9px !important;
}

.menu li{
  list-style: none;
  padding-top: 10px;
}

.menu a {
  color: #000;
  font-size: 16px;
}

.nav-mobile{
  width: auto;
  position: absolute;
  background-color: rgb(255, 255, 255);
  float: left;
  padding-right: 30px;
  margin-left: -20px;
  height: auto;
  z-index: 100;
}

.sidebar-mobile{
  width: 100%;
  position: absolute;
  background-color: #f5f5f5;
  border-right: 1px solid #eee;
  float: left;
  padding-right: 30px;
  margin-left: 15px;
  height: auto;
  z-index: 1;
}

.sidebar-mobile a {
  display: block;
  width: 100%;
  padding-left: 30px;
  padding-bottom: 5px;
  padding-top: 5px;
  text-decoration: none;
  color: #777;
}

.menu .open>.dropdown-menu {
    display: contents;
    z-index: 1;
}

.collapsing {
  position: absolute !important;
}

.suscribe-caja {
    margin-left: -6px;
}
.suscribe-caja a {
    font-size: 22px;
}
.suscribe-caja span {
    font-size: 22px;
}

.loadFileXml {
  margin-top: 16px;
  border: solid 1px black;
  border-radius: 5px;
  height: 28px;
  width: 25% !important;
  padding-left: 5px;
  min-width: 170px;
}

/* TK-mejoras-mis-reservas: era 22px (casi el tamano del titulo, 28px) --
   un contador de total de registros debe leerse como superindice, no como
   texto de la misma jerarquia que el titulo. */
.badget-total-elements {
    font-size: 12px !important;
    vertical-align: super !important; /* sin !important, Bootstrap CDN (carga
                                          DESPUES de este fichero, ver notas de
                                          especificidad en design-rules-listados.md)
                                          ganaba con su vertical-align:baseline del
                                          .badge generico -- se veia como subindice
                                          en vez de superindice (feedback humano). */
    padding: 3px 7px !important;
    margin-left: 4px !important; /* .left20 (20px) pensado para el badge grande
                                     anterior (22px); ahora que es pequeno,
                                     20px de separacion del titulo es demasiado */
    margin-top: 0 !important; /* el .badge generico de esta hoja fuerza
                                  margin-top:7px (pensado para un punto de
                                  notificacion absoluto) -- al pasar este
                                  badge a position:static (ver abajo), ese
                                  7px lo empujaba hacia ABAJO en flujo normal,
                                  peleando con vertical-align:super y
                                  terminando por parecer un subindice en vez
                                  de superindice (feedback humano directo). */
    position: static !important; /* el .badge generico de Bootstrap de esta
                                     hoja fuerza position:absolute!important
                                     (pensado para un punto de notificacion,
                                     no para este badge de conteo) -- en las
                                     cabeceras "funcionaba por casualidad"
                                     (el ancestro posicionado mas cercano
                                     coincidia con un punto razonable); en un
                                     panel AJAX de Foro con otro ancestro
                                     posicionado se desbordaba fuera del
                                     viewport. Vuelve al flujo normal. */
}

.personal p{
  margin-top: 6px;
  margin-bottom: -5px;
  font-size: 12px;
}

.personal span{
  margin-top: -6px;
  margin-left: -70px;
}

IMG.personal-foto {
  max-width: 215px;
}

.paginado-points{
  float: left;
  padding-left: 10px;
  padding-right: 5px;
  padding-top: 13px;
}

.paginado-caja {
  float: left;
  margin-left: 20px;
  background-color: azure;

}
.paginado-caja .pagination {
  margin: 8px 5px 9px 0;
}
.paginado-caja .pagination li {
    float: left;
    font-size: 17px;
    margin: 8px 5px 9px 0;
    text-decoration: none;
    list-style-type: none;
}
.paginado-caja .pagination li a {
    color: #bd2d6f !important;
}

.dropdown-backdrop{
    display: none;
}

.buscador-reset {
    font-size: 33px;
    line-height: 41px;
}

.color-enlace {
  /* TK-c4c0d223a4e4: mismo problema que TK-96f2c804facf (.reserva label): en
     temas PGE/ASA/FIS --theme-color-1 es el gris de FONDO #D3D3D3 (~1.5:1,
     WCAG AA fail) reusado aqui como color de TEXTO en Directorio de Personal
     (telefono/e-mail/ficha usan esta clase). Usamos --theme-label-color
     (solo definida en esos temas, apunta a --theme-color-2 con contraste
     valido) con fallback a --theme-color-1 para no tocar temas que no lo
     definen (default/COD/AV, donde theme-color-1 ya tiene contraste OK). */
    color: var(--theme-label-color, var(--theme-color-1)) !important;
}

.filtro-orden-activo {
    text-decoration: underline !important;
}

.flex-container {
 /* We first create a flex layout context */
 display: flex;
 /* Then we define the flow direction
    and if we allow the items to wrap
  * Remember this is the same as:
  * flex-direction: row;
  * flex-wrap: wrap;
  */
 flex-flow: row wrap;
 /* Then we define how is distributed the remaining space */
 /* justify-content: space-around; */
 padding: 0;
 margin: 0;
 list-style: none;
}
.agenda-flex-item {
 padding: 15px;
 margin-top: 10px;
 color: white;
 text-align: center;
 border: 1px solid #ebebeb;
 margin-left: 19px;
 margin-right: 19px;
}
.agenda-flex-item a {
    color: black;
}

.reserva span.ck {
  color: gold !important;
}

.form-control[type=checkbox] {
  width: initial;
}

.block  {
  height: available;
}


p.imagen img {
  width: 100%;
}

#loading {
  align-items: center;
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-content: center;
  background: black;
  opacity: 0.30;
  z-index:999;
}

#loading img{
  width: 15vw;
  height: 15vw;
}

.show-formulario td:first-child{
  width: 25%;
}

form label.error {
  color: red!important;
}

.adjunto .row:first-child {
  padding-top: 10px;
}

#empleados.tab-pane.fade {
  overflow-x: auto;
}



#menu > nav > ul {
  position: relative;
  display: flex;
}

#menu > nav > ul > li:last-child{
  position: absolute;
  right: 0px;
}

.aplicaciones-content img {
  margin-top: 0.5em;margin-bottom: 0.5em;
  object-fit: contain;
  max-width: 100%;
}

.aplicaciones-content li {
  margin-bottom: 0.5em;
}

.aplicaciones-content ul {
  margin-top: 0.5em;
}


/************************************************/
/*             CHAT                             */
/************************************************/
.chat__container {
  display: flex;
  flex-direction: row;
  height: 500px;
}

.chat__container .wrapper_channels {
  width: 25%;
  height: 100%;
  padding: 20px;
}

.chat__container #channels {
  width: 100%;
  display: flex;
  align-items: stretch;
  height: 100%;
  background: white;
  border: 2px solid gray;
  flex-direction: column;
  overflow-y: scroll;
}

.chat__container .wrapper_chat {
  display: flex;
  flex-flow: row;
  width: 75%;
  flex-flow: wrap;
  padding: 20px;
}

.chat__container  #mensajes {
  width: 100%;
  height: calc(100% - 30px - 20px);
  background: white;
  border: 2px solid gray;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
}

.chat__container  #mensaje {
  width: 75%;
  height: 30px;
  margin-top: 20px;
}

.chat__container .wrapper_chat button {
  width: calc(25% - 20px);
  height: 30px;
  margin-top: 20px;
  margin-left: 20px;
}

.chat__container  .propio {
  background-color: #ececec;
  padding: 10px;
  border-radius: 10px;
  margin: 15px;
  max-width: 75%;
  min-width: 50%;
  align-self: flex-end;
}

.chat__container  p.txt {
  text-align: left;
}

.chat__container  p.fecha {
  text-align: right;
}


.chat__container  .no-propio {
  border: #858585 1px solid;
  padding: 10px;
  border-radius: 10px;
  margin: 15px;
  max-width: 75%;
  min-width: 50%;
  align-self: flex-start;
}


.chat__container  #channels p:nth-child(even) {
  background-color: #ececec;
  margin: 0px;
}


.chat__container  #channels p:nth-child(odd) {
  border: #858585 1px solid;
  margin: 0px;
}

.chat__container  #channels p > a {
  width: 100%;
  height: 100%;
  color: black;
  display: block;
  padding: 20px;
}

.chat__container #channels p > a:hover {
  cursor: pointer;
}

.chat__container .wrapper_chat button.modal-show {width: 3em}
.chat__container .wrapper_chat button.submit {width: 7em}
.chat__container .wrapper_chat input {width: calc(100% - 10em)}

.chat__container #banner{
  height: 110px;
  background: salmon;
  width: 100%;
  color: black;
  text-align: center;
}

.chat__container #banner .titulo{
  font-size: 20px;
  font-weight: 600
}



.chat__container #mensajes {
  width: 100%;
  height: calc(100% - 30px - 20px - 110px) !important;
}


.modal-header {
  background-color: var(--theme-color-1) !important;
}

div#mensaje_chat {
  display: flex;
}

div#mensaje_chat > div {
  width: 50%;
}

input#mensaje_chat_texto {
  padding-left: 10px;
  width: calc(100% - 10px);
}

input#chat_titulo
{
  padding-left: 10px;
  width: calc(100% - 10px);
}

form > #chat > div {
  margin-bottom: 20px;
}


#documentos__container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

#documentos__container a {
  display: flex;
  width: 100px;
  min-height: 100px;
  box-sizing: border-box;
  padding: 4px;
  border: 1px #ddd solid;
  flex-direction: column;
  align-items: center;
}

/* TK-38f300417b42: constrenir el ancho del nombre de carpeta/archivo al
   recuadro (100px) para que .twoLine (line-clamp:2 + ellipsis) pueda truncar
   en vez de desbordar horizontalmente y solapar el item contiguo. */
.documentos__item-nombre {
  width: 100%;
  word-break: break-word;
  text-align: center;
}

#documentos__path {
  margin-bottom: 20px;
}

#documentos__container a {
  margin: 5px;
}

div#usuario_plainPassword {
  display: flex;
  padding: 0;
}

div#usuario_plainPassword > div {
  width: 50%;
}

div#usuario_plainPassword > div input   {
  margin: 10px 0;
  padding: 10px;
  width: calc(100% - 20px);
}

div#usuario_plainPassword > div:last-child input   {
  width: calc(100%);
}

div#usuario_plainPassword {
  border: 0;
  background: #eee;
}

input[type="radio"] {
  width: inherit;
  height: inherit;
  margin: 10px !important;
}

div#busqueda_avanzada_buscarPor > label::after {
  font-size: 0
}

div#busqueda_avanzada_ordenar > label::after {
  font-size: 0
}

.chat__container .sin-leer {
  display: block;
  background: red;
  color: white;
  border-radius: 50%;
  width: 20px;
  text-align: center;
  float: right;
}

a[href$=chat] > .sin-leer {
  display: block;
  background: red;
  color: white;
  border-radius: 50%;
  width: 10px;
  text-align: center;
  font-size: 0.5em;
  position: absolute;
  top: 0;
  margin-left:15px;
}

.login-background-dark a,
.login-background-dark a:hover {
  color: white;
}

#reset_password {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px;
  min-height: calc(100vh - 243px);
}

div#usuario_plainPassword {
  display: flex;
  padding: 0;
}

div#usuario_plainPassword > div {
  width: 50%;
}

div#usuario_plainPassword > div input   {
  margin: 10px 0;
  padding: 10px;
  width: calc(100% - 20px);
}

div#usuario_plainPassword > div:last-child input   {
  width: calc(100%);
}

div#usuario_plainPassword {
  border: 0;
  background: #eee;
}

input[type="radio"] {
  width: inherit;
  height: inherit;
  margin: 10px !important;
}


.login-background-dark a,
.login-background-dark a:hover {
  color: white;
}

#reset_password {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px;
  min-height: calc(100vh - 243px);
}



#fichaje_popup_wrapper {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.75)!important;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;
  /* INTE2-777-bis-ui: footer (logo asata) se pintaba sobre el popup
     por orden de DOM. z-index alto fuerza el popup encima de todo. */
  z-index: 10000;
}


#fichaje_popup {
  display: flex;
  position: relative;
  background-color: white;
  width: 500px;
  height: 350px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#fichaje_popup > form {
 width: 100%;
}

#fichaje_popup > form > .botones {
  display: flex;
  flex-direction:  row;
  flex-wrap: wrap;
  justify-content: center;
}

#fichaje_popup > form > .botones > button {
  width: calc( 50% - 10px);
  margin: 5px!important;
}


#fichaje_popup > .hora {
  margin-bottom: 55px!important;
  font-size: 4em;
  font-weight: bold
}

#fichaje_popup .cerrar {
  display: flex;
  position: absolute;
  top: 0;
  right: 5px;
  font-weight: bold;
  cursor: pointer;
}

.fichar-wrapper {
  margin-top: 20px;
}

#fichaje_popup #edit_clock {
  background: transparent;
  color: black;
}

#fichaje_popup #edit_clock i {
  color: black;
}


#fichaje_pausa_popup_wrapper,
#fichaje_trabajo_popup_wrapper,
#fichaje_qr_popup_wrapper
{
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.75)!important;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}


#fichaje_pausa_popup,
#fichaje_trabajo_popup
{
  display: flex;
  position: relative;
  background-color: white;
  width: 500px;
  height: 350px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}


#fichaje_pausa_popup > form,
#fichaje_trabajo_popup > form {
  display: flex;
  flex-direction:  row;
  flex-wrap: wrap;
}

#fichaje_pausa_popup > form > div,
#fichaje_trabajo_popup > form > div
{
  width: calc( 50% - 10px);
  margin: 5px!important;
}

#fichaje_pausa_popup > form > .botones,
#fichaje_trabajo_popup > form > .botones
{
  width: calc( 100% - 10px);
  margin: 5px!important;
  display: flex;
  justify-content: center;
}

#fichaje_pausa_popup .texto-descriptivo,
#fichaje_trabajo_popup .texto-descriptivo
{
  font-weight: 800!important;
  margin-bottom: 30px;
}


#fichaje_pausa_popup > .hora,
#fichaje_trabajo_popup > .hora
{
  margin-bottom: 35px!important;
  font-size: 4em;
  font-weight: bold
}

#fichaje_pausa_popup .cerrar,
#fichaje_trabajo_popup .cerrar
{
  display: flex;
  position: absolute;
  top: 0;
  right: 5px;
  font-weight: bold;
  cursor: pointer;
}


/* FIX-260624-012: estado Anulado en amarillo (diferenciar) */
.normativa-tipo--anulado { border-color: #f0ad4e; color: #8a6d3b; background-color: #fcf8e3; }

/* TK-b74ec10ca5fa (UC-5c): badge morado para vacaciones/solicitudes ANULADAS
   automaticamente por solapamiento con BAJA_IT (distinto del ANULADO manual/
   amarillo de arriba). Blanco sobre #9C27B0 = ratio de contraste ~6.3:1 (AA). */
.normativa-tipo--anulado-it { border-color: #9C27B0; color: #ffffff; background-color: #9C27B0; }

/* 7-ESTADO (TK-b5c95d218680): estado derivado "En Proceso" (Pendiente con >=1 fase ACEPTADA) */
.normativa-tipo--en-proceso { border-color: #337ab7; color: #23527c; background-color: #d9edf7; }

/* revisor Cruzado-Pills: Rechazado/Aceptado no tenian color propio, caian en
   el navy generico de .normativa-tipo, indistinguibles entre si en la misma
   pantalla (bug real). Paleta semantica unificada con el pill de Informe
   Absentismo (positivo=#4CAF50 verde, ya usado ahi para "validado"). Rojo
   para Rechazado: mismo tono que btn-danger (#d9534f) usado en botones
   Eliminar/Anular, consistente con "negativo/destructivo" en toda la app. */
.normativa-tipo--aceptado  { border-color: #4CAF50; color: #2e7d32; background-color: #e8f5e9; }
.normativa-tipo--rechazado { border-color: #d9534f; color: #a94442; background-color: #f2dede; }

/* TK-mejoras-mis-reservas: buscador de "Mis Reservas" -- el .form-group de
   Bootstrap mete un padding-left:15px que el resto de bloques de la pagina
   (cabecera, tabla) no tienen, desalineando el label "Buscar:" 15px a la
   derecha del resto del contenido. Scoped a esta pantalla (NO se toca
   .form-group global, usado en muchos formularios de edicion donde ese
   padding si hace falta). */
.form-group--buscar-reserva {
  /* Bootstrap .col-xs-9 carga DESPUES de este fichero (bootstrap.min.css via
     CDN, ver base.html.twig) y gana el empate de especificidad sin !important.
     padding-left:0 dejaba el input pegado al borde real de la tarjeta gris
     (el margen negativo del .row cancela exactamente el padding de la
     tarjeta) -- 8px da aire sin volver a los 15px originales, que
     desalineaban el label respecto a la cabecera/tabla. */
  padding-left: 8px !important;
}

/* TK-mejoras-mis-reservas: el boton de busqueda no tiene label encima (a
   diferencia del input, que si lo tiene) -- la clase generica .top20 (20px)
   no reproduce el desplazamiento real del input (25px = alto+margen del
   label "Buscar:"). Ajuste puntual para esta pantalla en vez de tocar
   .top20 (usada en muchos otros sitios con distinta necesidad). El gutter
   estandar de Bootstrap (15px) entre el input y el boton se ve excesivo
   para dos controles que forman una sola unidad de busqueda -- se acerca.
*/
.col--boton-buscar-reserva {
  margin-top: 25px;
  margin-left: -8px;
}

/* TK-mejoras-mis-reservas: tabla de "Mis Reservas" con ancho de columna
   fijado por cabecera en vez de por contenido (table-layout:auto barajaba
   el ancho segun la fila mas larga de cada carga). Columnas fijas
   (Importe/Estado/Acciones, contenido corto y acotado) dimensionadas a su
   necesidad real; columnas variables (Recurso/Descripcion, texto libre)
   truncadas en una linea con "..." + title con el texto completo (ver
   list_table.html.twig). */
.reserva-table {
  table-layout: fixed;
  width: 100%;
}
.reserva-table col.col-recurso     { width: 14%; }
.reserva-table col.col-horario     { width: 22%; } /* "dd/mm/aaaa HH:mm - dd/mm/aaaa HH:mm" en 1 linea */
.reserva-table col.col-importe     { width: 7%; }
.reserva-table col.col-descripcion { width: 39%; }
.reserva-table col.col-estado      { width: 9%; }
.reserva-table col.col-acciones    { width: 9%; }

.reserva-table td.truncado {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 0; /* obliga a respetar el ancho de la columna en table-layout:fixed */
}

/* Todas las celdas centradas verticalmente -- la fila puede crecer (varios
   horarios apilados con <br>) y el resto de celdas quedaba pegado arriba
   (vertical-align:top, que Bootstrap fija con el selector mas especifico
   .table>tbody>tr>td -- gana a .reserva-table td sin !important). */
.reserva-table td {
  vertical-align: middle !important;
}

/* Importe: dato numerico, centrado horizontal (no alineado a la izquierda
   como el texto libre de Recurso/Descripcion). */
.reserva-table td.celda-importe {
  text-align: center;
}

/* Horario: cada rango de fechas en una sola linea (varios horarios pueden
   apilarse con <br>, pero CADA UNO no debe partirse a media fecha). */
.reserva-table td.celda-horario {
  white-space: nowrap;
}

/* TK-mejoras-mensajeria: buscador de "Mi Mensajeria" -- mismo problema que
   TK-mejoras-mis-reservas, el .form-group de Bootstrap mete padding-left:15px
   que desalinea el label "Buscar:" respecto a cabecera/tabla. Scoped a esta
   pantalla (NO se toca .form-group global). */
.form-group--buscar-mensajeria {
  padding-left: 8px !important;
}

/* TK-mejoras-mensajeria: boton de busqueda sin label encima -- offset real
   del input es 25px (alto+margen del label "Buscar:"), no los 20px de
   .top20. Gutter estandar de Bootstrap (15px) entre input y boton se acerca
   a ~7px porque forman una sola unidad de busqueda. */
.col--boton-buscar-mensajeria {
  margin-top: 25px;
  margin-left: -8px;
}

/* TK-mejoras-mensajeria: tabla de "Mi Mensajeria" con ancho de columna
   fijado por cabecera en vez de por contenido. Fecha/Acciones (columnas
   fijas, contenido corto y acotado) dimensionadas a su necesidad real;
   Mensaje/Emisor/Destinatario (columnas variables, texto libre) truncadas
   en una linea con "..." + title con el texto completo (ver
   _block_list.html.twig). */
.mensajeria-table {
  table-layout: fixed;
  width: 100%;
}
.mensajeria-table col.col-mensaje      { width: 38%; }
.mensajeria-table col.col-emisor       { width: 18%; }
.mensajeria-table col.col-destinatario { width: 22%; }
.mensajeria-table col.col-fecha        { width: 14%; } /* "dd/mm/aaaa HH:mm" en 1 linea */
.mensajeria-table col.col-acciones     { width: 8%; }

.mensajeria-table td.truncado {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 0; /* obliga a respetar el ancho de la columna en table-layout:fixed */
}

/* Todas las celdas centradas verticalmente (Bootstrap fija
   vertical-align:top con el selector mas especifico .table>tbody>tr>td --
   gana a .mensajeria-table td sin !important). */
.mensajeria-table td {
  vertical-align: middle !important;
}

/* Fecha: formato fijo, no debe partirse a media fecha en dos lineas. */
.mensajeria-table td.celda-fecha {
  white-space: nowrap;
}

/* TK-mejoras-mis-jornadas: buscador de "Mis Jornadas" -- a diferencia de
   Reservas/Mensajeria (un unico input "Buscar:") esta pantalla filtra por
   RANGO DE FECHAS (Fecha desde/Fecha hasta + boton "Filtrar"), 3 columnas
   col-md-4 iguales en vez de input+boton pegados. Mismo problema de fondo
   que Reservas/Mensajeria: el .form-group de Bootstrap mete padding-left:15px
   que desalinea el label "Fecha:" del primer campo respecto a cabecera/tabla
   (los campos 2o y 3o no lo necesitan: su borde izquierdo es un gutter
   interno entre columnas, no el borde de la tarjeta). Scoped a esta pantalla. */
.form-group--buscar-jornada {
  padding-left: 8px !important;
}

/* TK-mejoras-mis-jornadas: los <input type="date"> heredan width:100% de
   Bootstrap .form-control y se estiran a todo el ancho de su columna
   (~460px) -- un selector de fecha "dd/mm/aaaa" no necesita mas de ~200px.
   Se limita el ancho SOLO de los inputs de fecha de este formulario (no
   .form-control global, usado en muchos otros formularios que si necesitan
   el 100%). */
#form-filtro input[type="date"] {
  max-width: 200px;
}

/* TK-mejoras-mis-jornadas: el boton "Filtrar" no tiene <label> encima (a
   diferencia de los dos campos de fecha, que si lo tienen -- el segundo con
   un label vacio solo para ocupar el mismo alto). offset real medido = 25px
   (igual que Reservas/Mensajeria), .top20 (20px) no lo reproduce. Al ser una
   columna propia (col-md-4), no un boton pegado a un input, NO hace falta
   compensar el gutter con margin-left negativo (si aplica en Reservas/
   Mensajeria porque alli input+boton forman una sola unidad visual). */
.col--boton-buscar-jornada {
  margin-top: 25px;
  margin-left: -8px; /* gutter Bootstrap entre columnas (15px) reducido a la mitad,
                         para que quede similar al espacio entre Fichar/QR (~13px) */
}

/* Homogeneidad §5.quinquies: el gap FechaInicio->FechaFin usaba el gutter
   Bootstrap sin tocar (30px = 15+15) mientras FechaFin->Filtrar ya estaba
   reducido a 22px (ver -8px arriba) -- se veia el doble de separado. Mismo
   ajuste aplicado aqui para que ambos gaps de la fila queden iguales (22px). */
.col--fechafin-jornada {
  margin-left: -8px;
}

/* TK-mejoras-mis-jornadas: cabecera de seccion con boton(es) a la derecha --
   fila .row normal (display:block, Bootstrap) donde la columna del titulo
   tiene "top20" (empuja 20px) pero la de los botones no -- los botones
   quedaban 8px mas arriba que el centro vertical del titulo. Se probo
   display:flex + align-items:center en la fila pero SOBRE-corregia (paso a
   +7.5px, sentido contrario) -- el icono grande "calendar_today" (md-36)
   dentro de la columna del titulo hace que el bounding box de esa columna
   no sea simetrico respecto al texto del titulo, asi que el centro
   geometrico de la columna NO coincide con el centro visual del texto.
   Se revierte a un ajuste directo medido empiricamente sobre la columna de
   los botones (mismo patron que el resto de offsets de esta pantalla). */
.header-row-centrado-jornada {
}
/* OJO: ya existia una regla ".fichar-wrapper{margin-top:20px}" mas arriba en
   este fichero (linea ~1901) -- el -8px medido originalmente YA incluia esos
   20px. El valor correcto no es "anadir 8px" sino 20+8=28px (sustituye la
   regla anterior por tener igual especificidad y venir despues en cascada). */
.fichar-wrapper {
  margin-top: 28px;
}

/* TK-mejoras-mis-jornadas: "Fichar"/"QR" llevan icono + texto -- un unico
   espacio de texto entre <i> y la palabra no se veia como separacion real
   dentro del boton flex (.btn.primario, display:inline-flex). margin-right
   en el icono da un hueco fiable independientemente del navegador. */
#fichar_button i,
#fichar_qr_button i {
  margin-right: 6px;
}

/* TK-mejoras-mis-jornadas: tabla de "Mis Jornadas" con ancho de columna
   fijado por cabecera en vez de por contenido. A diferencia de Reservas/
   Mensajeria, aqui NINGUNA columna es texto libre (Fecha Inicio/Fin, Total
   Horas/Pausas, Estado son valores cortos y acotados; Acciones son 2
   botones-icono) -- no hay columna "variable" que absorba el espacio
   sobrante de forma natural. Anchos calculados a partir del contenido real
   maximo (medido con canvas measureText: cabecera vs contenido, + margen) y
   luego escalados proporcionalmente hasta sumar 100% (manteniendo Acciones
   en su ancho real necesario, ~10%, y repartiendo el resto entre las demas
   segun su necesidad relativa) -- ver design-rules-listados.md para el
   razonamiento completo de este caso (tabla sin columnas variables). */
.jornada-table {
  table-layout: fixed;
  width: 100%;
}
.jornada-table col.col-fecha-inicio  { width: 19%; }
.jornada-table col.col-fecha-fin     { width: 17%; }
.jornada-table col.col-total-horas   { width: 19%; }
.jornada-table col.col-total-pausas  { width: 20%; }
.jornada-table col.col-estado        { width: 15%; }
.jornada-table col.col-acciones      { width: 10%; }

/* Todas las celdas centradas verticalmente (Bootstrap fija
   vertical-align:top con el selector mas especifico .table>tbody>tr>td --
   gana a .jornada-table td sin !important). */
.jornada-table td {
  vertical-align: middle !important;
}

/* Fecha Inicio/Fin: formato fijo "dd/mm/aaaa", no debe partirse en dos
   lineas (columna con margen de sobra a este ancho, pero nowrap defensivo
   por consistencia con Reservas/Mensajeria). */
.jornada-table td.celda-fecha {
  white-space: nowrap;
}

/* Total Horas/Total Pausas: dato numerico (duracion "Xd Xh Xm"), centrado
   horizontal igual que el Importe de Reservas (§4.7), y nowrap para que la
   duracion no se parta entre "0d" y "8h 0m". */
.jornada-table td.celda-horas,
.jornada-table th.celda-horas {
  text-align: center;
  white-space: nowrap;
}

/* TK-mejoras-mis-fichajes: tabla de "Mis Fichajes" (design-rules-listados.md
   §4.1/§4.2), mismo caso que Jornada (§5.ter.1) -- ninguna columna es texto
   libre/variable (ID/Latitud/Longitud son numericos cortos, Fecha-Hora
   Sistema/Usuario son fecha+hora de formato fijo, Tipo es una etiqueta corta,
   Acciones es 1 boton-icono), asi que no hay columna "principal" a la que dar
   proporcionalmente mas espacio. Anchos calculados a partir del contenido
   real maximo (cabecera vs dato, ~7px/caracter + margen) y escalados hasta
   sumar 100%. */
.fichaje-table {
  table-layout: fixed;
  width: 100%;
}
.fichaje-table col.col-id             { width: 8%; }
.fichaje-table col.col-latitud        { width: 13%; }
.fichaje-table col.col-longitud       { width: 13%; }
.fichaje-table col.col-fecha-sistema  { width: 21%; }
.fichaje-table col.col-fecha-usuario  { width: 21%; }
.fichaje-table col.col-tipo           { width: 14%; }
.fichaje-table col.col-acciones       { width: 10%; }

/* Todas las celdas centradas verticalmente (Bootstrap fija
   vertical-align:top con el selector mas especifico .table>tbody>tr>td --
   gana a .fichaje-table td sin !important). */
.fichaje-table td {
  vertical-align: middle !important;
}

/* Fecha-Hora Sistema/Usuario: formato fijo "dd/mm/aaaa HH:mm", no debe
   partirse entre la fecha y la hora. */
.fichaje-table td.celda-fecha {
  white-space: nowrap;
}

/* ID/Latitud/Longitud: datos numericos, centrados horizontalmente igual
   que el Importe de Reservas (§4.7). Aplicado tanto a th como a td. */
.fichaje-table td.celda-numero,
.fichaje-table th.celda-numero {
  text-align: center;
}

/* S1.2.9 UC-2 (TK-4e632b0de52b): tabla de temas del foro
   (dashboard/foro/_partials/tema_list.html.twig) -- mismo patron que
   reserva/mensajeria/jornada, ver design-rules-listados.md. "Titulo" es la
   unica columna de texto libre (variable, se lleva la mayor proporcion del
   ancho); Autor/Ultimo mensaje/Respuestas/Visitas son de contenido corto y
   acotado (fijas). Acciones necesita hueco real para hasta 3 botones-icono
   condicionales por fila (fijar/editar/eliminar). */
.foro-tema-table {
  table-layout: fixed;
  width: 100%;
}
.foro-tema-table col.col-titulo         { width: 32%; }
.foro-tema-table col.col-autor          { width: 16%; }
.foro-tema-table col.col-ultimo-mensaje { width: 14%; } /* "dd/mm/aaaa HH:mm" en 1 linea */
.foro-tema-table col.col-respuestas     { width: 8%; }
.foro-tema-table col.col-visitas        { width: 8%; }
/* 22% (no 16%): 3 botones-icono btn-xs + 2 gaps left10 (13.64px) necesitan
   ~147px de contenido -- 16% de una tabla ~960px (154px totales, ~138px de
   contenido tras padding) hacia el tercer boton a una segunda linea. Medido
   con getBoundingClientRect: boton 3 aparecia con top +36px respecto a los
   otros 2 (wrap real, no solo apretado). */
.foro-tema-table col.col-acciones       { width: 22%; }

/* "Nuevo tema" comparte fila con el buscador (>=768px) via flex
   align-items:center -- en movil (<768px) las columnas se apilan y
   necesita separacion vertical respecto al buscador de arriba. */
@media (max-width: 767px) {
  .foro-tema-nuevo-col {
    margin-top: 10px;
  }
}

/* design-rules-listados.md §3.4bis (9a revision humana): el input-group
   "pegado" con btn-default se sustituyo por el patron canonico de boton
   Buscar (btn primario + fa-lg + t-blanco + columna propia con 22px de
   gap, igual que Reservas/Mensajeria/Jornada) -- ver tema_list.html.twig.
   Esto de paso evita el bug de .form-inline .input-group{display:
   inline-table} (causa raiz real de un intento previo, documentado en el
   historial de este bloque): al no usar .form-inline/.input-group ya no
   aplica ese selector de Bootstrap en absoluto. */
.foro-tema-buscador-row {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
}
.foro-tema-buscador-input-col {
  flex: 1 1 200px !important;
  width: auto !important;
  padding-right: 0 !important; /* el gap real lo controla el margin-left del
                                   boton siguiente -- sin esto el padding de
                                   columna Bootstrap (15px) se sumaba encima */
}
.foro-tema-buscador-boton-col {
  flex: 0 0 auto !important;
  width: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 22px; /* §3.2, mismo gap canonico que Reservas/Mensajeria/Jornada */
}
.foro-tema-nuevo-col {
  flex: 0 0 auto !important;
  width: auto !important;
  padding-left: 0 !important;
  margin-left: 20px; /* gap deliberado entre controles distintos, mismo valor
                         usado para el selector de mes de Gastos */
}

.foro-tema-table td.truncado {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 0; /* obliga a respetar el ancho de columna en table-layout:fixed */
}

/* Todas las celdas centradas verticalmente (Bootstrap fija
   vertical-align:top con el selector mas especifico .table>tbody>tr>td --
   gana a .foro-tema-table td sin !important). */
.foro-tema-table td {
  vertical-align: middle !important;
}

/* Ultimo mensaje: formato fijo "dd/mm/aaaa HH:mm", no debe partirse en dos
   lineas. */
.foro-tema-table td.celda-fecha {
  white-space: nowrap;
}

/* Respuestas/Visitas: datos numericos, centrados (no alineados a la
   izquierda como el texto libre de Titulo/Autor). */
.foro-tema-table td.celda-numero,
.foro-tema-table th.celda-numero {
  text-align: center;
}

/* Acciones: hasta 3 botones-icono en fila -- red de seguridad ademas del
   ancho de columna (arriba), para que nunca se envuelvan a 2 lineas aunque
   el titulo/fecha de una fila concreta fuerce mas ancho de la cuenta. */
.foro-tema-table td.text-right {
  white-space: nowrap;
}

/* TK-mejoras-mis-gastos (design-rules-listados.md): buscador de "Mis
   Gastos" -- a diferencia de Reservas/Mensajeria (input+boton lupa pegados)
   esta pantalla filtra 100% en cliente sin boton de envio: un unico input
   con lupa+"limpiar" superpuestos, sin <label> (no hay .form-group). Mismo
   problema de fondo que las demas pantallas: la columna que envuelve el
   input hereda el padding-left:15px de Bootstrap, que desalinea el
   buscador respecto a cabecera/tabla -- mismo ajuste (8px) ya validado en
   Reservas/Mensajeria/Jornada, aplicado aqui a la columna en vez de a un
   .form-group. */
.gastos-buscador-col {
  padding-left: 8px !important;
}

/* 8a revision humana (feedback directo): interespaciado horizontal entre
   filtros debe ser uniforme, no aleatorio. El selector de mes vivia en una
   columna Bootstrap de fraccion fija (col-md-3, 289px) mucho mas ancha que
   su contenido real (btn-group, 144px) -- el sobrante de columna se leia
   como un hueco de 137px hasta el buscador, frente a los 13.64px
   homogeneos que ya tienen chips (left10) y botones de Acciones. A partir
   de tablet (>=768px, donde selector+buscador comparten fila) la columna
   se ajusta a su contenido (flex shrink-to-fit) con un gap FIJO y
   deliberado de 20px -- distinto del 13.64px de left10 a proposito (estos
   son controles de filtro DISTINTOS, no un par de botones-icono agrupados
   como cubre §5.quinquies), pero consistente cada vez que aparezca este
   patron, no un sobrante de grid a ojo. En movil (<768px) se mantiene el
   apilado normal de Bootstrap (col-xs-12), sin flex. */
@media (min-width: 768px) {
  .gastos-filtros .row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  .gastos-mes-selector-col {
    flex: 0 0 auto !important;
    width: auto !important; /* sin !important, Bootstrap CDN (carga DESPUES
                                de este fichero) gana con su .col-xs-12
                                {width:100%} y la columna vuelve a ocupar
                                todo el ancho -- mismo patron de bug que el
                                badge (ver design-rules-listados.md). */
    padding-right: 0 !important; /* el padding-right:15px heredado de columna
                                     Bootstrap se sumaba al margin-right de
                                     abajo (15+20+8 buscador = 43px, mas de lo
                                     pretendido) -- el gap final lo controla
                                     SOLO el margin-right explicito. */
    margin-right: 20px;
  }
}

/* Hueco a la derecha del input para los iconos superpuestos (antes sin
   padding-right, el texto largo podia meterse debajo de la lupa). Iconos
   centrados verticalmente con top:50%/transform en vez de un "top" fijo en
   px (fragil ante cambios de alto del input), manteniendo el mismo offset
   horizontal que ya tenia la version anterior. */
.gastos-buscador-input {
  padding-right: 55px;
}
.gastos-buscador-icono {
  position: absolute;
  right: 35px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  pointer-events: none;
}
.gastos-buscador-limpiar {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
}

/* TK-mejoras-mis-gastos: tabla de "Mis Gastos" con ancho de columna fijado
   por cabecera en vez de por contenido. Destino/Motivo son texto libre
   (variables, truncadas con "..." + title con el texto completo); Motivo
   se lleva la mayor proporcion del espacio sobrante por ser habitualmente
   el campo descriptivo mas largo. Fecha/Total/Acciones son contenido corto
   y acotado (fijas). */
.gasto-table {
  table-layout: fixed;
  width: 100%;
}
.gasto-table col.col-fecha    { width: 12%; } /* "dd/mm/aaaa" en 1 linea */
.gasto-table col.col-destino  { width: 20%; }
.gasto-table col.col-motivo   { width: 48%; } /* variable "principal": se lleva el sobrante liberado de Acciones */
.gasto-table col.col-total    { width: 10%; }
/* design-rules-listados.md §4.2/§5.quinquies.bis (hallazgo Gastos, feedback
   humano directo): Acciones es FIJA de verdad, presupuesto real de sus
   botones, no un % a ojo. Con Ver+Editar ya icono-solo (§5.octies, btn-sm):
   ancho_boton(~34px) x 2 + gap_left10(13.64px) x 1 + padding_celda(~16px)
   = ~97.64px, +2 caracteres de margen (~15px) = ~113px. Sobre un ancho de
   tabla comparable al de Reservas (~1158px, Acciones 9% con el mismo patron
   Ver+Editar icono-solo) esto ronda el 10% -- el 12% liberado (22% -> 10%)
   se reparte integro a Motivo (columna variable "principal", ver arriba). */
.gasto-table col.col-acciones { width: 10%; }

.gasto-table td.truncado {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 0; /* obliga a respetar el ancho de columna en table-layout:fixed */
}

/* Todas las celdas centradas verticalmente (Bootstrap fija
   vertical-align:top con el selector mas especifico .table>tbody>tr>td --
   gana a .gasto-table td sin !important). */
.gasto-table td {
  vertical-align: middle !important;
}

/* Fecha: formato fijo "dd/mm/aaaa", no debe partirse en dos lineas. */
.gasto-table td.celda-fecha {
  white-space: nowrap;
}

/* Total: dato numerico, centrado horizontal (no alineado a la izquierda
   como el texto libre de Destino/Motivo). */
.gasto-table td.celda-importe,
.gasto-table th.celda-importe {
  text-align: center;
}

/* §5.quinquies.bis: red de seguridad ademas del ancho de columna (arriba)
   -- Ver+Editar (2 botones-icono) nunca deben envolver a 2 lineas aunque
   otra columna robe espacio en el futuro. */
.gasto-table td.celda-acciones {
  white-space: nowrap;
  text-align: right;
}

/* TK-mejoras-mis-nominas (design-rules-listados.md): tabla de "Nominas" con
   ancho de columna fijado por cabecera en vez de por contenido. Caso
   §5.ter.1 (Jornadas): NINGUNA columna es texto libre/variable -- Nomina
   es un periodo de formato acotado (año + nombre de mes, ej. "2026 Enero")
   y Acciones es un unico boton-icono de descarga. Sin columna "principal"
   a la que darle el sobrante, se reparte proporcional a la necesidad real
   de cada una (igual criterio que Jornadas). Acciones con UN solo boton
   btn-sm (~34px) + padding_celda(~16px) + 2 caracteres de margen (~15px)
   ronda 65px -- sobre el ancho de tabla real (contenedor col-md-4, mas
   estrecho que Reservas/Gastos) un 20% da margen sin sobrar de mas; el
   80% restante es mas que suficiente para "2026 Enero" en una linea. */
.nominas-table {
  table-layout: fixed;
  width: 100%;
}
.nominas-table col.col-periodo  { width: 80%; }
.nominas-table col.col-acciones { width: 20%; }

/* Todas las celdas centradas verticalmente (Bootstrap fija
   vertical-align:top con el selector mas especifico .table>tbody>tr>td --
   gana a .nominas-table td sin !important). */
.nominas-table td {
  vertical-align: middle !important;
}

/* Periodo: formato acotado "AAAA <mes>", no debe partirse en dos lineas. */
.nominas-table td.celda-periodo {
  white-space: nowrap;
}

/* Acciones: un unico boton-icono, red de seguridad para que nunca envuelva
   a 2 lineas (mismo patron que reserva-table/gasto-table). */
.nominas-table td.celda-acciones {
  white-space: nowrap;
  text-align: right;
}

/* TK-mejoras-mis-eventos (design-rules-listados.md): buscador de
   "Mis Eventos" -- filtro de categoria (select) + buscador de texto en el
   MISMO panel gris-claro (§3.5). El select es el PRIMER campo de la fila
   (se alinea con cabecera/tabla, mismo problema que Reservas/Mensajeria: el
   .form-group de Bootstrap mete padding-left:15px sin compensar); el input
   de texto (2o campo) no lo necesita (§5.ter.3, ya confirmado en Jornadas). */
.form-group--buscar-eventos {
  padding-left: 8px !important;
}

/* Boton de busqueda sin label encima -- offset real del input es 25px
   (alto+margen del label "Buscar:"), no los 20px de .top20; el gutter
   estandar de Bootstrap (15px) entre el input de texto y el boton se acerca
   porque forman una sola unidad de busqueda (input+boton, no
   select+input). */
.col--boton-buscar-eventos {
  margin-top: 25px;
  margin-left: -8px;
}

/* revisor Espaciado (5a revision humana): la fila de filtro tiene 3 columnas
   (select "Filtrar por" -> input "Buscar" -> boton), pero solo se habia
   igualado el gap input->boton (22px, arriba). El gap select->input se
   quedaba en el gutter Bootstrap sin tocar (30px) -- mismo patron ya
   corregido en Jornada (FechaInicio->FechaFin->Boton). */
.col--input-buscar-eventos {
  margin-left: -8px;
}

/* TK-mejoras-mis-eventos: tabla compartida por 5 pantallas (Mis Eventos,
   Cursos, Encuestas, Ayudas Sociales, listado de categorias de eventos --
   ver cabecera de _dashboard_evento_tabla_listado.html.twig) con las MISMAS
   columnas -- clase generica de conjunto, no ligada a una sola pantalla
   (design-rules-listados.md, nota de ambito global-vs-scoped). Titulo es el
   texto libre "principal" (se lleva el mayor sobrante, como Descripcion en
   Reservas); Publicado por es texto libre secundario, tambien truncado;
   Fecha es de formato acotado (Desde/Hasta dd/mm/aaaa, no debe partirse);
   Categorias son chips que pueden envolver a 2 lineas -- NO se truncan con
   ellipsis (cortar un nombre de categoria a media palabra es peor que verlo
   en 2 lineas, a diferencia de un campo de texto libre continuo). */
.evento-table {
  table-layout: fixed;
  width: 100%;
}
.evento-table col.col-titulo     { width: 38%; }
.evento-table col.col-publicado  { width: 16%; }
.evento-table col.col-fecha      { width: 16%; } /* "Desde: dd/mm/aaaa" en 1 linea */
.evento-table col.col-categorias { width: 18%; }
/* Acciones es FIJA de verdad (§4.2/§5.quinquies.bis): Ver+ICS (2
   botones-icono btn-sm ~34px) + gap left10 (13.64px) + padding_celda
   (~16px) = ~97.64px, +2 caracteres de margen (~15px) = ~113px -- 12% de
   una tabla ~1100px (contenedor col-sm-9/col-md-10 con sidebar, mas
   estrecho que Reservas a ancho completo) da margen sin sobrar de mas. */
.evento-table col.col-acciones   { width: 12%; }

.evento-table td.truncado {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 0; /* obliga a respetar el ancho de columna en table-layout:fixed */
}

/* Todas las celdas centradas verticalmente (Bootstrap fija
   vertical-align:top con el selector mas especifico .table>tbody>tr>td --
   gana a .evento-table td sin !important). */
.evento-table td {
  vertical-align: middle !important;
}

/* Fecha: Desde/Hasta en dos lineas propias (un <div> por entrada), pero
   CADA entrada individual no debe partirse a media fecha. */
.evento-table td.celda-fecha {
  white-space: nowrap;
}

/* Acciones: red de seguridad ademas del ancho de columna (arriba) -- Ver+ICS
   nunca deben envolver a 2 lineas aunque otra columna robe espacio en el
   futuro (mismo patron que gasto-table/foro-tema-table). */
.evento-table td.celda-acciones {
  white-space: nowrap;
  text-align: right;
}

/* design-rules-listados.md: buscador de "Mis Solicitudes"
   (dashboard/solicitud_categoria/list.html.twig) -- mismo problema que
   TK-mejoras-mis-reservas/mensajeria: el .form-group de Bootstrap mete
   padding-left:15px que desalinea el label "Buscar:" respecto a
   cabecera/tabla. Scoped a esta pantalla (NO se toca .form-group global). */
.form-group--buscar-solicitud {
  padding-left: 8px !important;
}

/* El boton de busqueda no tiene label encima -- offset real del input es
   25px (alto+margen del label "Buscar:"), no los 20px de .top20. Gutter
   estandar de Bootstrap (15px) entre input y boton se acerca a ~7px porque
   forman una sola unidad de busqueda (mismo mecanismo que Reservas/
   Mensajeria/Jornada). */
.col--boton-buscar-solicitud {
  margin-top: 25px;
  margin-left: -8px;
}

/* design-rules-listados.md §4: tabla de "Mis Solicitudes" con ancho de
   columna fijado por cabecera en vez de por contenido. Titulo (tipo de
   solicitud, texto libre) es la unica columna variable -- se lleva la
   mayor proporcion del espacio sobrante; Fecha/Estado/Acciones son
   contenido corto y acotado (fijas).
   - Fecha: "dd/mm/aaaa HH:mm" en 1 linea, mismo presupuesto que
     foro-tema-table col.col-ultimo-mensaje (14%, mismo formato).
   - Estado: pill de _formulario_respuestas_estado.html.twig -- la etiqueta
     mas larga observada es "Pendiente de anulación"/"Pendiente de
     respuesta" (~23 caracteres, uppercase), necesita mas hueco que un
     estado corto tipo Reservas (9%).
   - Acciones: hasta 3 botones-icono condicionales por fila (Ver/Imprimir/
     Anular), mismo caso que foro-tema-table col.col-acciones (22%,
     justificado alli con la formula de §5.quinquies.bis para 3
     botones-icono + 2 gaps left10). */
.solicitud-table {
  table-layout: fixed;
  width: 100%;
}
.solicitud-table col.col-titulo   { width: 44%; }
.solicitud-table col.col-fecha    { width: 14%; }
.solicitud-table col.col-estado   { width: 20%; }
.solicitud-table col.col-acciones { width: 22%; }

.solicitud-table td.truncado {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 0; /* obliga a respetar el ancho de columna en table-layout:fixed */
}

/* Todas las celdas centradas verticalmente (Bootstrap fija
   vertical-align:top con el selector mas especifico .table>tbody>tr>td --
   gana a .solicitud-table td sin !important). */
.solicitud-table td {
  vertical-align: middle !important;
}

/* Fecha de solicitud: formato fijo "dd/mm/aaaa HH:mm", no debe partirse en
   dos lineas. */
.solicitud-table td.celda-fecha {
  white-space: nowrap;
}

/* Estado: pill de una sola linea (.normativa-tipo tiene width:fit-content
   pero no white-space:nowrap propio) -- con etiquetas largas como
   "Pendiente de anulación" y una columna a ancho fijo, sin esto el texto
   podria partirse en 2 lineas dentro del propio pill. */
.solicitud-table td.celda-estado {
  white-space: nowrap;
}

/* §5.quinquies.bis: red de seguridad ademas del ancho de columna (arriba)
   -- hasta 3 botones-icono (Ver/Imprimir/Anular) nunca deben envolver a 2
   lineas aunque otra columna robe espacio en el futuro. */
.solicitud-table td.celda-acciones {
  white-space: nowrap;
  text-align: right;
}

/* TK-mejoras-mis-avisos (design-rules-listados.md): buscador de "Mis avisos
   y notificaciones" -- mismo problema que Reservas/Mensajeria/Jornada/Gastos,
   el .form-group de Bootstrap mete padding-left:15px que desalinea el label
   "Buscar:" respecto a cabecera/tabla. Scoped a esta pantalla (NO se toca
   .form-group global). */
.form-group--buscar-avisos {
  padding-left: 8px !important;
}

/* TK-mejoras-mis-avisos: boton de busqueda sin label encima -- offset real
   del input es 25px (alto+margen del label "Buscar:"), no los 20px de
   .top20. Gutter estandar de Bootstrap (15px) entre input y boton se acerca
   a ~7px porque forman una sola unidad de busqueda (mismo patron que
   Reservas/Mensajeria/Jornada). */
.col--boton-buscar-avisos {
  margin-top: 25px;
  margin-left: -8px;
}

/* TK-mejoras-mis-avisos: tabla de "Mis avisos y notificaciones" con ancho de
   columna fijado por cabecera en vez de por contenido (table-layout:auto
   barajaba el ancho segun la fila mas larga de cada carga). "Avisos /
   Notificaciones" es la columna variable PRINCIPAL (texto libre, el
   asunto/nombre del aviso, puede ser una frase larga -- se lleva la mayor
   proporcion); "Emisor" es variable SECUNDARIA (nombre de organigrama o
   "Apellidos, Nombre", tambien truncado pero con menos presupuesto que el
   titulo). "Fecha publicacion aviso" es fija de formato fijo "dd/mm/aaaa
   HH:mm" (nowrap, no se trata como truncable). "Acciones" es fija de verdad
   (§4.2/§5.quinquies.bis): un unico boton-icono "Ver" (btn-sm ~34px) +
   padding_celda(~16px) + 2 caracteres de margen(~15px) ~= 65px, en linea con
   el 8-9% que ya usan Reservas/Mensajeria para el mismo caso de un unico
   boton. */
.avisos-table {
  table-layout: fixed;
  width: 100%;
}
.avisos-table col.col-titulo   { width: 56%; }
.avisos-table col.col-fecha    { width: 12%; } /* "dd/mm/aaaa HH:mm" en 1 linea */
.avisos-table col.col-emisor   { width: 24%; }
.avisos-table col.col-acciones { width: 8%; }

.avisos-table td.truncado {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 0; /* obliga a respetar el ancho de columna en table-layout:fixed */
}

/* Todas las celdas centradas verticalmente (Bootstrap fija
   vertical-align:top con el selector mas especifico .table>tbody>tr>td --
   gana a .avisos-table td sin !important). */
.avisos-table td {
  vertical-align: middle !important;
}

/* Fecha de publicacion: formato fijo "dd/mm/aaaa HH:mm", no debe partirse en
   dos lineas. */
.avisos-table td.celda-fecha {
  white-space: nowrap;
}

/* design-rules-listados.md: buscador de "Agenda Personal"
   (dashboard/agenda/index.html.twig, vista lista) -- mismo problema que
   Reservas/Mensajeria/Jornada/Eventos: el .form-group de Bootstrap mete
   padding-left:15px que desalinea el label "Buscar:" respecto a
   cabecera/tabla. Scoped a esta pantalla (NO se toca .form-group global). */
.form-group--buscar-agenda {
  padding-left: 8px !important;
}

/* El boton de busqueda no tiene label encima -- offset real del input es
   25px (alto+margen del label "Buscar:"), no los 20px de .top20. Gutter
   estandar de Bootstrap (15px) entre input y boton se acerca a ~7px porque
   forman una sola unidad de busqueda (mismo mecanismo que Reservas/
   Mensajeria/Jornada/Eventos). */
.col--boton-buscar-agenda {
  margin-top: 25px;
  margin-left: -8px;
}

/* design-rules-listados.md §4: tabla de "Agenda Personal" (vista lista) con
   ancho de columna fijado por cabecera en vez de por contenido. Titulo es el
   texto libre PRINCIPAL (se lleva la mayor proporcion del sobrante, como
   Descripcion en Reservas/Titulo en evento-table); Descripcion Corta y
   Ubicacion son texto libre SECUNDARIO, tambien truncados pero con menos
   presupuesto. Fecha es de formato fijo pero LARGO -- rango completo con
   hora y segundos "dd/mm/aaaa HH:mm:ss - dd/mm/aaaa HH:mm:ss" (~41
   caracteres) + icono, bastante mas ancho que el "Desde/Hasta dd/mm/aaaa" de
   evento-table (16%) -- no se trata como truncable (§4.2, formato fijo).
   Acciones es fija de verdad (§4.2/§5.quinquies.bis): Ver+ICS (2
   botones-icono btn-sm) + gap left10 (13.64px) + padding_celda, mismo
   presupuesto que evento-table (12%). */
.agenda-table {
  table-layout: fixed;
  width: 100%;
}
.agenda-table col.col-titulo      { width: 26%; }
.agenda-table col.col-fecha       { width: 28%; } /* rango con hora:min:seg en 1 linea */
.agenda-table col.col-descripcion { width: 18%; }
.agenda-table col.col-ubicacion   { width: 16%; }
.agenda-table col.col-acciones    { width: 12%; }

.agenda-table td.truncado {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 0; /* obliga a respetar el ancho de columna en table-layout:fixed */
}

/* Todas las celdas centradas verticalmente (Bootstrap fija
   vertical-align:top con el selector mas especifico .table>tbody>tr>td --
   gana a .agenda-table td sin !important). */
.agenda-table td {
  vertical-align: middle !important;
}

/* Fecha: rango completo con hora, no debe partirse en dos lineas. */
.agenda-table td.celda-fecha {
  white-space: nowrap;
}

/* Acciones: red de seguridad ademas del ancho de columna (arriba) -- Ver+ICS
   nunca deben envolver a 2 lineas aunque otra columna robe espacio en el
   futuro (mismo patron que evento-table/gasto-table). */
.agenda-table td.celda-acciones {
  white-space: nowrap;
  text-align: right;
}

/* design-rules-listados.md §3.5 / §5.ter.3: filtros de "Informe de
   Absentismo" (dashboard/informe/absentismo.html.twig) -- 5 campos
   (Periodicidad/Fecha inicio/Fecha fin/Trabajador/Tipo Ausencia) + boton
   Filtrar en una unica fila de columnas Bootstrap col-md-2, en vez del
   unico input+lupa de Reservas/Mensajeria. Igual que Jornada (§5.ter.3): el
   padding-left:8px de §3.1 SOLO en el primer campo (el que arranca alineado
   con cabecera/tabla); el resto de campos reduce el gutter Bootstrap (15px)
   con margin-left:-8px para que las 5 separaciones consecutivas de la fila
   midan lo mismo (§5.quinquies -- "revisa TODAS las separaciones, no solo
   la ultima"). */
.form-group--buscar-absentismo {
  padding-left: 8px !important;
}

.col--filtro-absentismo {
  margin-left: -8px;
}

/* El boton Filtrar no tiene <label> encima (a diferencia de los 5 campos,
   que si) -- offset real 25px (alto+margen de label), no los 20px de
   .top20 (mismo valor medido en Reservas/Mensajeria/Jornada). */
.col--boton-buscar-absentismo {
  margin-top: 25px;
  margin-left: -8px;
}

/* <input type="date"> hereda width:100% de Bootstrap .form-control y se
   estira a todo el ancho de su columna -- un selector de fecha corto no lo
   necesita. Scoped al panel de filtros de esta pantalla (no .form-control
   global). Mismo defensivo que Jornada (§5.quater.4). */
.informe-absentismo__filtros-panel input[type="date"] {
  max-width: 200px;
}

/* revisor Breadcrumb/Submenu (auditoria especializada 2026-08-06): la
   pestana activa solo se distinguia por font-weight (mismo color/fondo que
   las inactivas) -- diferenciacion demasiado debil. Anade el color de marca
   como borde inferior, igual que el resto de estados "activo" solido de la
   app (§5.decies). Selector real con efecto (single-dash, ver twig linea 54)
   distinto del BEM del <li> (double-dash, solo usado como hook). */
.informe-absentismo__pestanas .informe-absentismo__pestana-activo {
  border-bottom: 3px solid rgb(27, 46, 81);
}

/* waive_1_incidencia_informes_rrhh.txt (2026-08-08): pestana activa del
   submenu Informes RRHH debe verse SOLO con el borde inferior azul grueso,
   sin el borde gris top/left/right que Bootstrap CDN anade a .nav-tabs>
   li.active>a (border:1px solid #ddd). Se cubren aqui los 2 patrones BEM
   con hook propio que aun no tenian regla de color (Gastos/Contratacion
   usan el mismo patron single-dash que Absentismo, arriba). */
.informe-gastos__pestanas .informe-gastos__pestana-activo,
.informe-contratacion__pestanas .informe-contratacion__pestana-activo {
  border: none !important;
  border-bottom: 3px solid rgb(27, 46, 81) !important;
}

/* Informe Diario: mismo tratamiento que Informe Absentismo (arriba) --
   pantallas hermanas de la misma familia "Informes", deben verse coherentes
   entre si (§1.bis). Gotcha de especificidad identico: Bootstrap CDN define
   .nav-tabs>li>a{border:1px solid transparent} a (0,1,2), un selector de 1
   sola clase (0,1,0) pierde -- se encadena con la clase del <ul> padre. */
/* revisor (2026-08-06, verificado en vivo aplicando esto a "Informe de
   Fichaje"/pestana "Semana", que reutiliza LITERALMENTE estas clases): con
   getComputedStyle tras cache-bust, el borde salia SIEMPRE transparente
   (1px solid rgba(0,0,0,0)) pese a que la regla de arriba SI estaba en el
   CSS servido y el selector SI matcheaba el elemento -- el gotcha de §1.bis
   solo cubria `.nav-tabs>li>a` (0,1,2), pero el <li> de la pestana activa
   TAMBIEN lleva class="active" (mecanismo nativo Bootstrap, tal y como pide
   este mismo apartado), lo que activa la regla MAS especifica
   `.nav-tabs>li.active>a{border:1px solid #ddd;border-bottom-color:
   transparent}` (2 clases + 2 elementos = (0,2,2)) -- gana a nuestro
   selector de 2 clases (0,2,0). Mismo patron de fix ya usado en el resto de
   la hoja para ganarle a Bootstrap CDN: !important. Reproducido en vivo
   tambien en /dashboard/informe/dia (mismo bug preexistente, no introducido
   por esta ficha -- se corrige aqui porque el CSS es compartido, sin
   duplicar la regla). */
.informe-diario__nav-tabs .informe-diario__tab-activo {
  border: none !important;
  border-bottom: 3px solid rgb(27, 46, 81) !important;
}

/* revisor Botones/Filtros (auditoria especializada 2026-08-06): el submenu
   PDF/XLSX/CSV salia en 2 lineas (PDF+XLSX en la misma, CSV suelto debajo)
   porque <button> es inline-block por defecto -- se fuerza columna vertical,
   patron estandar de dropdown. */
#informe-absentismo-exportar-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border: 0;
  background: none;
}
#informe-absentismo-exportar-menu button:hover {
  background-color: #f5f5f5;
}

/* revisor (feedback humano directo 2026-08-06): boton "Cerrar" retirado --
   titulo y acciones deben quedar centrados VERTICALMENTE entre si (icono
   36px vs botones 34px de alto no se centran solos con top/bottom margin
   iguales, Bootstrap .row no es flex por defecto). */
.informe-absentismo__cabecera-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

/* Mismo patron ya establecido para Fichar/QR (#fichar_button i, linea
   ~2249): un unico espacio de texto entre <i> y la palabra no se ve como
   separacion real dentro de un boton .btn.primario -- margin-right en el
   icono da un hueco fiable independientemente del navegador. */
#informe-absentismo-bajas-it i,
#informe-absentismo-exportar i {
  margin-right: 6px;
}

/* waive_1_incidencia_informes_rrhh.txt (2026-08-08): mismo patron de arriba
   (#informe-absentismo-exportar i) aplicado a Gastos/Contratacion -- ambos
   botones Exportar usan el mismo icono fa-download+texto sin separacion. */
#informe-gastos-exportar i,
.informe-contratacion__acciones .fa-download {
  margin-right: 6px;
}

/* feedback humano directo (2026-08-06), bug real de maquetacion: ".acciones"
   y el wrapper del panel de filtros son ".col-xs-12" (Bootstrap 3 =
   float:left) anidados DIRECTAMENTE dentro de otro ".col-xs-12", sin un
   ".row" intermedio que los limpie (clearfix). El siguiente bloque en el
   flujo normal (tabla/alerts/KPI, ninguno floateado) no baja debajo de esos
   floats -- se "exprime" en el hueco sobrante de la MISMA linea. Una tabla
   SIEMPRE crea su propio bloque de formato (CSS2.1 9.4.1) que no puede
   solaparse con floats: sin hueco libre, quedaba con ancho 0 y desplazada
   fuera del viewport -- invisible, aunque el DOM y los datos eran
   correctos (verificado: getBoundingClientRect devolvia width:0,
   left:~1415px en un viewport de 1430px). Mismo riesgo aplica a los 3
   estados de alerta y al bloque KPI si vienen justo despues de los floats. */
.informe-absentismo .table-responsive,
.informe-absentismo .informe-absentismo-sin-datos,
.informe-absentismo .informe-absentismo-error,
.informe-absentismo .informe-absentismo-aviso-truncado,
.informe-absentismo__kpi {
  clear: both;
}

/* design-rules-listados.md §4: tabla "Informe de Absentismo" -- 11 columnas
   fijas (RN-UC6-03), sin columna de Acciones ni paginacion (solo exportar
   global, fuera de la tabla). Trabajador/Tramite son texto libre VARIABLE
   (nombre de trabajador / tramite pueden variar de longitud) -> truncados
   con ellipsis + title. Periodo/Tipo Ausencia/Estado/Incidencias son cortos
   y acotados -> FIJOS, sin truncar. Fecha Inicio/Fin son de formato fijo
   corto (dd/mm/aaaa) -> nowrap. Dias/Horas/Visitas(IT) son numericos ->
   centrados (celda-numero, mismo patron que fichaje-table/foro-tema-table). */
.informe-absentismo-tabla {
  table-layout: fixed;
  width: 100%;
}
/* revisor (feedback humano directo 2026-08-06): FECHA INICIO+FECHA FIN
   fusionadas en "FECHAS" (fecha unica o rango "ini – fin", peor caso
   "dd/mm/aaaa – dd/mm/aaaa" ~23 caracteres) y DIAS+HORAS fusionadas en
   "DURACION" ("1.0d 0.0h" ~9 caracteres) -- 11 columnas pasan a 9,
   redistribuido liberando el espacio de las 2 columnas fusionadas
   (18%->16% fechas, 10%->9% duracion, el resto del hueco sobrante 3% se
   reparte en trabajador/tramite que ya iban ajustados). Reemplaza la
   distribucion previa de 11 columnas (8+15+10+9+9+5+5+15+8+10+6=100),
   verificar con Canvas measureText tras aplicar (mismo metodo que la
   redistribucion anterior de INCIDENCIAS/VISITAS). Suma: 8+17+11+16+9+15+8+10+6=100. */
/* revisor (feedback humano directo 2026-08-06): cabecera "TIPO AUSENCIA"->
   "TIPO" -- el limite real de la columna lo pone el CONTENIDO
   ("INJUSTIFICADA", 95.5px medido) no la cabecera acortada (32.7px), asi
   que la ganancia es modesta: 11%->9%, los 2% cedidos a trabajador (17%->19%). */
.informe-absentismo-tabla col.col-periodo       { width: 8%; }
.informe-absentismo-tabla col.col-trabajador    { width: 19%; }
.informe-absentismo-tabla col.col-tipo-ausencia { width: 9%; } /* "INJUSTIFICADA" (13 caracteres, 95.5px) */
.informe-absentismo-tabla col.col-fechas        { width: 16%; } /* peor caso "dd/mm/aaaa – dd/mm/aaaa" */
.informe-absentismo-tabla col.col-duracion      { width: 9%; } /* "1.0d 0.0h" */
.informe-absentismo-tabla col.col-tramite       { width: 15%; }
.informe-absentismo-tabla col.col-estado        { width: 8%; }
.informe-absentismo-tabla col.col-incidencias   { width: 10%; }
.informe-absentismo-tabla col.col-visitas       { width: 6%; }

.informe-absentismo-tabla td.truncado {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 0; /* obliga a respetar el ancho de columna en table-layout:fixed */
}

/* Todas las celdas centradas verticalmente (Bootstrap fija
   vertical-align:top con el selector mas especifico .table>tbody>tr>td --
   gana a .informe-absentismo-tabla td sin !important). */
.informe-absentismo-tabla td {
  vertical-align: middle !important;
}

/* Fechas fusionadas (fecha unica o rango "ini – fin"): a diferencia de la
   fecha unica de antes, el rango SI puede necesitar partirse en 2 lineas
   dentro de la columna sin desbordar a la vecina (mismo riesgo que rompio
   INCIDENCIAS/VISITAS) -- sin nowrap, deliberado. */
.informe-absentismo-tabla td.celda-fechas-rango {
  white-space: normal;
}

/* Duracion fusionada ("1.0d 0.0h"): una sola linea, formato corto y fijo. */
.informe-absentismo-tabla td.celda-duracion {
  white-space: nowrap;
}

/* Dias/Horas/Visitas (IT): datos numericos, centrados horizontalmente (no
   alineados a la izquierda como el texto libre de Trabajador/Tramite). */
.informe-absentismo-tabla td.celda-numero,
.informe-absentismo-tabla th.celda-numero {
  text-align: center;
}

/* revisor Cruzado-Pills: el pill de estado por fila llevaba `class="badge
   estado-badge estado-X"` + color inline -- el `.badge` GENERICO de esta
   hoja (linea ~58, pensado para un contador-notificacion flotante, NO para
   esto) fuerza `background-color:rgb(255,128,0)!important; position:
   absolute!important`, y un `style=""` inline SIEMPRE pierde contra
   cualquier !important -- "validado" salia naranja en vez de verde pese a
   que el HTML pedia el color correcto. Se quita la clase `.badge` (ya no
   la necesita, este pill tiene su propio bloque completo) y se define
   color POR ESTADO con !important propio (unico que puede ganar). */
.estado-badge {
  position: static !important;
  margin: 0 !important;
  display: inline-block;
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 11px;
  color: #fff;
  vertical-align: middle;
}
.estado-badge.estado-validado    { background-color: #4CAF50 !important; }
.estado-badge.estado-pendiente   { background-color: #FFC107 !important; color: #333; }
.estado-badge.estado-it_en_curso { background-color: #2196F3 !important; }
.estado-badge.estado-anulado     { background-color: #9E9E9E !important; }

/* design-rules-listados.md §2/§2.quater + §5.quaterdecies.6: cabecera de
   seccion "Informe Diario" (dashboard/informe/dia.html.twig), mismo patron
   ya aplicado en el hermano dashboard/informe/absentismo.html.twig (linea
   ~2972) -- titulo (icono 36px) y boton Exportar (34px) no se centran solo
   con margenes top/bottom iguales dentro de un Bootstrap .row (no es flex
   por defecto). */
.informe-diario__cabecera-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

/* §5.quaterdecies.7: icono+texto dentro de un boton .btn.primario/flex
   necesita margin-right explicito -- un unico espacio de texto entre el
   icono y la palabra no se percibe como separacion real. Mismo patron ya
   usado en #informe-absentismo-exportar i / #fichar_button i. */
#informe-exportar-btn .glyphicon {
  margin-right: 6px;
}

/* feedback humano directo 2026-08-06: fila de filtros SIN ninguna label
   (a diferencia de Absentismo/Fichaje) y gap CON columnas Bootstrap
   col-md-* -- aunque midieran igual en numero, el ancho de columna
   reservado es mas ancho que el contenido real (select/input estrechos),
   generando huecos irregulares (mismo bug ya resuelto en Gastos, selector
   de mes). Fix robusto: flexbox con gap FIJO en vez de fracciones de grid
   -- cada campo ocupa solo su contenido real (flex:0 0 auto), sin
   necesidad del truco margin-left:-8px que usan Absentismo/Fichaje (ese
   truco solo compensa el gutter de 15px de Bootstrap, no el problema de
   fondo del ancho de columna).
   BUG ENCONTRADO 2026-08-06 (feedback humano directo, "el padding no
   existe"): ".informe-diario__filtros-panel" sigue siendo ".col-xs-12"
   (15px de padding Bootstrap) -- en Absentismo ese padding se CANCELA con
   el truco ".row{margin:-15px}" + ".col-xs-12{padding:15px}", dejando neto
   8px hasta el label (verificado: 266.33-258.33=8px). Al quitar el ".row"
   aqui para pasar a flex, ese padding de 15px del panel deja de cancelarse
   y se SUMA a mi propio padding-left:8px -> 23px reales (verificado:
   281.33-258.33=23px), no los 8px esperados. Fix: margin:0 -15px en la
   fila flex para cancelar el padding del panel igual que hacia el .row,
   dejando el mismo neto de 8px que en Absentismo/Semana. */
.informe-diario__filtros-row {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 22px;
  margin: 0 -15px;
  /* QA 2026-08-07: al panel de filtros le faltaba padding vertical --
     Absentismo lo obtiene gratis del wrapper ".row top20" (20px) que aqui
     no existe (flexbox directo, sin ese wrapper). Mismo neto arriba/abajo. */
  padding-top: 20px;
  padding-bottom: 20px;
}
.informe-diario__filtros-row .form-group {
  margin-bottom: 0;
}
.form-group--buscar-diario {
  padding-left: 8px;
}
.informe-diario__fecha-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.informe-diario__input-fecha {
  max-width: 150px;
}
.informe-diario__select-empleado {
  max-width: 200px;
}

/* Mismo riesgo de maquetacion ya documentado y corregido en Informe
   Absentismo (linea ~2987): ".informe-diario__cabecera-row"/"filtros-panel"
   son ".col-xs-12" (float:left) anidados sin ".row" que los limpie -- el
   siguiente bloque en el flujo normal (tabla/alerts) puede "exprimirse" en
   el hueco sobrante de la misma linea flotante en vez de bajar a su propia
   linea. Defensivo identico, scoped a esta pantalla. */
.informe-diario .table-responsive,
.informe-diario .informe-diario-sin-datos,
.informe-diario .informe-diario-error,
.informe-diario__barra-ampliada,
.informe-diario__paginacion {
  clear: both;
}

/* waive_1_incidencia_informes_rrhh.txt (2026-08-08): el panel KPI (.kpi-panel,
   partial compartido) no tiene margin-bottom propio -- queda pegado a la
   tabla/alert que va justo debajo. Separacion scoped SOLO a Dia (no se toca
   .kpi-panel global, mismo criterio ya aplicado en Empleado). */
.informe-diario .table-responsive,
.informe-diario .informe-diario-sin-datos {
  margin-top: 20px;
}

/* design-rules-listados.md §4: tabla "Informe Diario" -- 5 columnas fijas
   (RN-UC2-08, TRABAJADOR/H. EMPRESA/H. DESCANSO/ESTADO/AUSENCIA, SIN fila
   de totales -- ver RN-UC2-08 en el twig, no anadir tfoot). Trabajador es
   texto libre VARIABLE (nombre puede variar de longitud) -> truncado con
   ellipsis + title. H. EMPRESA/H. DESCANSO son numericos -> centrados
   (celda-numero, mismo patron que .informe-absentismo-tabla). Ausencia es
   texto libre que puede venir vacio ("—") o formateado ("Medico (2h)") --
   se deja envolver en varias lineas, sin truncar.
   TK-e38e4a115010: 6a columna ADITIVA INCIDENCIA (chip, igual que
   .informe-absentismo-tabla col.col-incidencias -- 10%). Ausencia cede el
   10% (30%->20%) para hacer sitio, sigue siendo con diferencia la mas
   ancha de las variables. Suma 25+15+15+15+20+10=100. */
.informe-diario-tabla {
  table-layout: fixed;
  width: 100%;
}
.informe-diario-tabla col.col-trabajador  { width: 25%; }
.informe-diario-tabla col.col-h-empresa   { width: 15%; }
.informe-diario-tabla col.col-h-descanso  { width: 15%; }
.informe-diario-tabla col.col-estado      { width: 15%; }
.informe-diario-tabla col.col-ausencia    { width: 20%; }
.informe-diario-tabla col.col-incidencia  { width: 10%; }

.informe-diario-tabla td.truncado {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 0; /* obliga a respetar el ancho de columna en table-layout:fixed */
}

/* Bootstrap fija vertical-align:top con el selector mas especifico
   .table>tbody>tr>td -- gana a .informe-diario-tabla td sin !important. */
.informe-diario-tabla td {
  vertical-align: middle !important;
}

.informe-diario-tabla td.celda-numero,
.informe-diario-tabla th.celda-numero {
  text-align: center;
}

/* design-rules-listados.md §4: sub-panel "Bajas IT" (dashboard/informe/
   bajas_it.html.twig), popup AJAX embebido dentro de Informe de Absentismo
   (RM-Sec11-D) -- mismas reglas de tabla que la tabla principal, con su
   propia clase scoped (§5.sexies: contenedor propio, no reutiliza
   .informe-absentismo-tabla). Trabajador es texto libre VARIABLE ->
   truncado. Fecha/Dia Inicio Baja/Dia Final Baja son de formato fijo corto
   -> nowrap. Visitas es una sub-lista de visitas medicas (RN-UC6-13, puede
   tener varias entradas "fecha — descripcion") -> se le da el mayor
   presupuesto de ancho, sin truncar (el contenido debe verse completo, no
   es un texto libre recortable). */
.informe-bajas-it-tabla {
  table-layout: fixed;
  width: 100%;
}
.informe-bajas-it-tabla col.col-fecha            { width: 14%; }
.informe-bajas-it-tabla col.col-trabajador       { width: 22%; }
.informe-bajas-it-tabla col.col-dia-inicio-baja  { width: 16%; }
.informe-bajas-it-tabla col.col-visitas          { width: 32%; }
.informe-bajas-it-tabla col.col-dia-final-baja   { width: 16%; }

.informe-bajas-it-tabla td.truncado {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 0; /* obliga a respetar el ancho de columna en table-layout:fixed */
}

/* Todas las celdas centradas verticalmente (Bootstrap fija
   vertical-align:top con el selector mas especifico .table>tbody>tr>td --
   gana a .informe-bajas-it-tabla td sin !important). */
.informe-bajas-it-tabla td {
  vertical-align: middle !important;
}

/* Fecha / Dia Inicio Baja / Dia Final Baja: formato fijo "dd/mm/aaaa", no
   deben partirse en dos lineas. */
.informe-bajas-it-tabla td.celda-fecha {
  white-space: nowrap;
}

/* design-rules-listados.md aplicado a /empleados ("Empleados", tambien
   consumido por /directorio-de-personal y el tab "Empleados" de la busqueda
   general -- partial COMPARTIDO templates/empleados/_tabla_empleado_detalle.html.twig).
   Ancho de columna fijado por cabecera (§4.1/§4.2): Nombre/Cargo/E-mail son
   texto libre variable (truncado 1 linea + title, §4.3); Telefono es fijo
   corto (2 numeros como mucho, nowrap); Ubicacion es contenido enriquecido
   multi-linea (nombre+direccion+correo del centro en <div> separados) y NO
   se trunca a 1 linea -- truncar ahi rompe la lectura de un bloque de 3
   lineas, no es texto libre simple; Acciones es fija (Ver+Editar, 2
   botones-icono btn-sm + gap left10 = 13.64px + padding celda, §5.quinquies.bis). */
.empleados-table {
  table-layout: fixed;
  width: 100%;
}
.empleados-table col.col-nombre    { width: 20%; }
.empleados-table col.col-cargo     { width: 16%; }
.empleados-table col.col-telefono  { width: 13%; }
.empleados-table col.col-email     { width: 19%; }
.empleados-table col.col-ubicacion { width: 22%; }
.empleados-table col.col-acciones  { width: 10%; }

.empleados-table td.truncado {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 0; /* obliga a respetar el ancho de columna en table-layout:fixed */
}

/* Todas las celdas centradas verticalmente (Bootstrap fija
   vertical-align:top con el selector mas especifico .table>tbody>tr>td --
   gana a .empleados-table td sin !important). */
.empleados-table td {
  vertical-align: middle !important;
}

/* Telefono: hasta 2 numeros (telefono + extension) en la misma celda, no
   deben partirse a media cifra. */
.empleados-table td.celda-telefono {
  white-space: nowrap;
}

/* Acciones: red de seguridad ademas del ancho de columna (arriba) -- Ver
   Ficha+Editar nunca deben envolver a 2 lineas aunque otra columna robe
   espacio en el futuro (mismo patron que reserva-table/agenda-table). */
.empleados-table td.celda-acciones {
  white-space: nowrap;
  text-align: right;
}

/* revisor Cruzado-Tabla + Cruzado-Acciones: esta tabla queda anidada dentro
   de un wrapper `.ckeditor-content-style` (pensado para tablas pegadas
   desde CKEditor en contenido rico, no para listados de datos) -- eso
   activa por accidente 2 reglas ajenas:
   1) `.ckeditor-content-style table th` (base_guide.css) pinta la cabecera
      con fondo gris claro + texto blanco (colores invertidos respecto al
      resto de tablas de la app: fondo transparente + texto rgb(51,51,51)).
   2) `.container a { color: var(--theme-color-2) }` (mas especifico que
      `.btn-success{color:#fff}` de Bootstrap por ser clase+elemento) pinta
      el icono del boton "Ver Ficha" en navy en vez de blanco.
   Blindaje scoped en vez de tocar el wrapper compartido (mas seguro). */
.empleados-table th {
  background-color: transparent !important;
  color: rgb(51, 51, 51) !important;
  font-weight: 700 !important;
}
.empleados-table a.btn-success,
.empleados-table a.btn-success i {
  color: #fff !important;
}

/* design-rules-listados.md §3.1 aplicado a /directorio ("Directorio de
   Personal"): el .form-group del selector de organigrama y del buscador de
   texto (partials/_buscador_empleados.html.twig, COMPARTIDO tambien con
   Home y Empleados) mete padding-left:15px que desalinea el label respecto
   a cabecera/tabla. Scoped al wrapper propio de ESTA pantalla
   (.buscador-directorio-personal, en directorioDePersonal/list.html.twig) --
   NO se toca .form-group global ni el partial compartido, que tambien
   renderiza en Home (fuera de alcance). */
.buscador-directorio-personal .form-group {
  padding-left: 8px !important;
}

/* design-rules-listados.md aplicado a "Informe de Fichaje" (pestana "Semana",
   templates/dashboard/informe/fichaje.html.twig, 2026-08-06): pantalla sin
   NADA del esqueleto general (§0) -- reestructurada de cero siguiendo el
   patron ya aplicado a las 2 hermanas (Informe Absentismo/Diario). El
   submenu de pestanas reutiliza LITERALMENTE las clases
   .informe-diario__nav-tabs/__tab-activo (ya definidas arriba, linea
   ~2948) -- no se duplican aqui. */

/* §5.bis.1/§5.duodecies: los cards gris-claro de cabecera/filtros usan
   columnas Bootstrap (float) sin .row que las limpie antes del siguiente
   bloque en flujo normal (tabla/alerts) -- mismo riesgo real ya detectado
   en Informe Absentismo (tabla con width:0 por no limpiar floats). */
.informe-fichaje .table-responsive,
.informe-fichaje .informe-fichaje-error,
.informe-fichaje .informe-aviso-truncado,
.informe-fichaje .informe-fichaje-sin-datos {
  clear: both;
}

/* waive_1_incidencia_informes_rrhh.txt (2026-08-08): nav.breadcrumb (componente
   Bootstrap, partial dashboard/partials/miga_pan.html.twig, compartido por
   TODA la app) trae padding-left:15px propio -- dentro de un .col-xs-12 (que
   YA aporta sus 15px de gutter), el contenido del breadcrumb queda 15px MAS
   a la derecha que sus hermanos (pestanas/cards gris-claro) de la MISMA
   columna, verificado en Absentismo (breadcrumbLeft=273px vs
   tabsLeft/cabeceraLeft=258px). Scoped a las 8 pantallas de Informes RRHH
   (no se toca .breadcrumb global -- es un componente muy compartido en el
   resto de la app, fuera de alcance de este waive). */
.informe-fichaje .col-xs-12.top20 > nav.breadcrumb,
.informe-fichaje-detallado .col-xs-12.top20 > nav.breadcrumb,
.informe-diario .col-xs-12.top20 > nav.breadcrumb,
.informe-semanal .col-xs-12.top20 > nav.breadcrumb,
.informe-empleado .col-xs-12.top20 > nav.breadcrumb,
.informe-absentismo .col-xs-12.top20 > nav.breadcrumb,
.informe-gastos .col-xs-12.top20 > nav.breadcrumb,
.informe-contratacion .col-xs-12.top20 > nav.breadcrumb {
  padding-left: 0;
}

/* CAUSA RAIZ REAL (verificado en pantalla, no era .breadcrumb): el wrapper
   ".col-xs-12.top20" del propio miga_pan.html.twig es OTRO Bootstrap
   col-xs-12 (15px padding) anidado DENTRO de ".informe-X" (que YA es un
   col-xs-12/.container-fluid con sus propios 15px) SIN ".row" que reparta
   el gutter entre ambos -- los 15px se ACUMULAN, desplazando el breadcrumb
   15px mas a la derecha que sus hermanos (pestanas/cards) que NO llevan
   ese wrapper extra. Mismo patron de bug "col-xs-12 anidado sin .row" ya
   visto y corregido varias veces hoy en este mismo modulo. Quitar el
   padding-left redundante del wrapper (no de .breadcrumb) alinea el
   breadcrumb con el resto del contenedor. */
.informe-fichaje > .col-xs-12.top20,
.informe-fichaje-detallado > .col-xs-12.top20,
.informe-diario > .col-xs-12.top20,
.informe-semanal > .col-xs-12.top20,
.informe-empleado > .col-xs-12.top20,
.informe-absentismo > .col-xs-12.top20,
.informe-gastos > .col-xs-12.top20,
.informe-contratacion > .col-xs-12.top20 {
  padding-left: 0;
  padding-right: 0;
}

/* waive_1_incidencia_informes_rrhh.txt (2026-08-08, ronda 3 -- CORREGIDO):
   el intento anterior (desplazar el CONTENEDOR completo .informe-X) estaba
   mal enfocado y no tocaba lo que hacia falta -- verificado por agente
   independiente: el gap real que faltaba es el padding INTERNO de la
   propia barra gris ".breadcrumb" (puesto a 0 en la ronda 1 para arreglar
   el desalineado vs pestanas), no la posicion del bloque respecto al
   sidebar. Fix directo y simple: padding-left en el propio breadcrumb. */
.informe-fichaje .col-xs-12.top20 > nav.breadcrumb,
.informe-fichaje-detallado .col-xs-12.top20 > nav.breadcrumb,
.informe-diario .col-xs-12.top20 > nav.breadcrumb,
.informe-semanal .col-xs-12.top20 > nav.breadcrumb,
.informe-empleado .col-xs-12.top20 > nav.breadcrumb,
.informe-absentismo .col-xs-12.top20 > nav.breadcrumb,
.informe-gastos .col-xs-12.top20 > nav.breadcrumb,
.informe-contratacion .col-xs-12.top20 > nav.breadcrumb {
  padding-left: 15px !important;
}

/* §3.5/§5.ter.3: filtros (Desde/Hasta/Empleado/Estado/Filtrar) en fila
   unica. ACTUALIZADO 2026-08-06 (feedback humano directo): el reparto
   anterior por columnas Bootstrap col-md-2/2/3/3/2 dejaba huecos
   irregulares -- cada columna reserva un ancho fijo mas ancho que su
   contenido real, y al variar el numero de columnas (2 vs 3) el hueco
   sobrante tambien variaba (mismo bug ya resuelto en Gastos, selector de
   mes: ver .gastos-mes-selector-col). Fix robusto: flexbox con gap FIJO,
   cada campo ocupa solo su contenido real -- el truco margin-left:-8px de
   .col--filtro-fichaje ya NO hace falta (solo compensaba el gutter de
   Bootstrap, no el problema de fondo del ancho de columna).
   BUG ENCONTRADO 2026-08-06 (feedback humano directo, "el padding no
   existe"): mismo motivo que Informe Diario (ver comentario alli) --
   ".informe-fichaje__filtros-panel" sigue siendo ".col-xs-12" (15px de
   padding Bootstrap) que antes cancelaba el ".row" (ya retirado al pasar a
   flex), sumandose a mi propio padding-left:8px -> 23px reales en vez de
   los 8px esperados (mismo neto que Absentismo). Fix: margin:0 -15px en
   la fila flex. */
.informe-fichaje__filtros-row {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 22px;
  margin: 0 -15px;
  /* QA 2026-08-07: mismo hallazgo que Informe Diario (ver comentario alli)
     -- padding vertical que Absentismo obtiene gratis del wrapper
     ".row top20", inexistente aqui (flexbox directo). */
  padding-top: 20px;
  padding-bottom: 20px;
}
.informe-fichaje__filtros-row .form-group {
  margin-bottom: 0;
}
.form-group--buscar-fichaje {
  padding-left: 8px;
}

/* <input type="date"> hereda width:100% de Bootstrap .form-control y se
   estira a todo el ancho de su columna -- scoped al panel de filtros de
   esta pantalla (no .form-control global). */
.informe-fichaje__filtros-panel input[type="date"] {
  max-width: 200px;
}
.informe-fichaje__select-empleado,
.informe-fichaje__select-estado {
  max-width: 200px;
}

/* §4: tabla "Informe de Fichaje" -- 8 columnas fijas (RN-UC1-14), CON fila
   TOTAL POR FECHA (subtotal) y tfoot TOTAL GLOBAL (unica fuente de ese dato,
   sin bloque resumen/KPI aparte -- §5.quaterdecies punto 3). Trabajador es
   texto libre VARIABLE -> truncado con ellipsis + title. Fecha/Modificado
   son de formato fijo (fecha corta / fecha+hora) -> nowrap. Horas Empresa/
   Horas Descanso son numericas -> centradas (celda-numero, mismo patron que
   fichaje-table/informe-absentismo-tabla). */
.informe-fichaje-tabla {
  table-layout: fixed;
  width: 100%;
}
.informe-fichaje-tabla col.col-fecha          { width: 9%; }
.informe-fichaje-tabla col.col-trabajador     { width: 17%; }
.informe-fichaje-tabla col.col-horas-empresa  { width: 10%; }
.informe-fichaje-tabla col.col-horas-descanso { width: 10%; }
.informe-fichaje-tabla col.col-estado         { width: 9%; }
.informe-fichaje-tabla col.col-modificado     { width: 16%; } /* "2026-07-26 14:30:00" */
.informe-fichaje-tabla col.col-ausencia       { width: 16%; }
.informe-fichaje-tabla col.col-total          { width: 13%; }

.informe-fichaje-tabla td.truncado {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 0; /* obliga a respetar el ancho de columna en table-layout:fixed */
}

/* Todas las celdas centradas verticalmente (Bootstrap fija
   vertical-align:top con el selector mas especifico .table>tbody>tr>td --
   gana a .informe-fichaje-tabla td sin !important). */
.informe-fichaje-tabla td {
  vertical-align: middle !important;
}

/* Fecha / Modificado: formato fijo, no deben partirse en dos lineas. */
.informe-fichaje-tabla td.celda-fecha {
  white-space: nowrap;
}

/* Horas Empresa/Horas Descanso: datos numericos, centrados horizontalmente
   (no alineados a la izquierda como el texto libre de Trabajador). */
.informe-fichaje-tabla td.celda-numero,
.informe-fichaje-tabla th.celda-numero {
  text-align: center;
}

/* NOTA: §3.2/§3.3 (gap boton buscar) y §3.4bis (clase "btn primario" en el
   boton submit) NO se aplican aqui a proposito -- este widget "search-home"
   (compartido con Home) ya tiene su propio boton solido de 50px via
   ".search-home button" con mas especificidad que ".btn.primario"
   (2 clases > 1 clase+elemento); forzar la clase "btn primario" encogeria
   el boton a 34px (regla global sin !important), una regresion visual real
   no verificable en esta pasada (cache:clear bloqueado, sin verificacion en
   vivo). Ver comentario en _buscador_empleados.html.twig. */

/* design-rules-listados.md §1.bis: dashboard/informe/fichaje_detallado.html.twig
   ("Empleado" del grupo Informes RRHH) -- pestana activa con borde inferior
   navy, mismo tratamiento que las 2 hermanas ya corregidas
   (.informe-diario__tab-activo / .informe-absentismo__pestana-activo).
   Gotcha de especificidad NUEVO (no documentado aun en el MD, encontrado
   verificando en vivo con getComputedStyle/matches() sobre document.styleSheets):
   el <li> de esta pestana lleva class="active" (Bootstrap nativo, patron
   copiado de dia.html.twig) -- eso activa OTRA regla de Bootstrap CDN mas
   especifica que la ya documentada ".nav-tabs>li>a" (0,1,2):
   ".nav-tabs>li.active>a" tiene especificidad (0,2,2) (2 clases + 2 tipos),
   que GANA a un selector de solo 2 clases (0,2,0) como
   ".pestanas .tab-activo" -- pinta border-color:#ddd #ddd transparent
   (border-bottom transparente) machacando el navy. Absentismo no sufre esto
   porque su <li> activo usa un modificador BEM propio en vez de la clase
   "active" de Bootstrap. Aqui hace falta !important para ganar sin
   depender del orden de carga. */
.informe-fichaje-detallado__pestanas .informe-fichaje-detallado__tab-activo {
  border: none !important;
  border-bottom: 3px solid rgb(27, 46, 81) !important;
}

/* waive_1_incidencia_informes_rrhh.txt (2026-08-08): Semanal/Empleado usaban
   el mismo hook BEM (<li class="active"> nativo Bootstrap + clase propia en
   el <a>) que Fichaje-Detallado/Dia arriba, pero sin regla de color propia
   -- se quedaban solo con el borde gris de Bootstrap, sin el azul. */
.informe-semanal__nav-tabs .informe-semanal__tab-activo,
.informe-empleado__nav-tabs .informe-empleado__tab-activo {
  border: none !important;
  border-bottom: 3px solid rgb(27, 46, 81) !important;
}

/* waive_1_incidencia_informes_rrhh.txt (2026-08-08): el bloque "Semana" del
   filtro (label + navegacion </>) es el primer .form-group de la fila y
   queda pegado al borde izquierdo del panel gris-claro -- separacion visual
   consistente con el resto de paneles de filtro (padding lateral ya
   presente en otras pantallas hermanas). */
.informe-semanal__filtro-semana {
  margin-left: 15px;
}

/* §5.quaterdecies.6: titulo (icono 36px) dentro de la cabecera de seccion
   no se centra solo con margenes top/bottom iguales en un Bootstrap .row
   (no es flex por defecto). Mismo patron scoped ya usado en
   .informe-absentismo__cabecera-row / .informe-diario__cabecera-row --
   aqui solo hay titulo (sin acciones), pero se mantiene el mismo mecanismo
   por consistencia con el resto de la familia "Informes" y por si en el
   futuro se anade una accion general. */
.informe-fichaje-detallado__cabecera-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

/* Mismo riesgo de maquetacion ya documentado y corregido en Informe
   Absentismo/Informe Diario: ".informe-fichaje-detallado__pestanas"/
   cabecera-card son ".col-xs-12" (float:left) anidados sin ".row" que los
   limpie -- el siguiente bloque en el flujo normal (tabla/alerts) puede
   "exprimirse" en el hueco sobrante de la misma linea flotante en vez de
   bajar a su propia linea. Defensivo identico, scoped a esta pantalla. */
.informe-fichaje-detallado .table-responsive,
.informe-fichaje-detallado .informe-fichaje-detallado-sin-datos,
.informe-fichaje-detallado .informe-fichaje-error,
.informe-fichaje-detallado .informe-aviso-truncado {
  clear: both;
}

/* waive_1_incidencia_informes_rrhh.txt (2026-08-08, ronda 4): MISMO bug
   exacto ya documentado/corregido en Absentismo/Diario/Fichaje/Fichaje
   Detallado/Gastos/Contratacion (ver notas arriba) pero nunca se aplico a
   Informe Empleado -- el panel de filtros (.informe-empleado__filtros-panel,
   ".col-xs-12" float:left) no tenia clearer antes de la tabla, que quedaba
   con width:0 (verificado en pantalla real: .table-responsive rect =
   {width:0, left:1386} en viewport 1430px) -- datos correctos en el DOM
   (31 filas) pero invisible en pantalla. Reportado por el usuario ("no lo
   veo en Edge tampoco", no era un fallo de la herramienta de captura). */
.informe-empleado .table-responsive,
.informe-empleado .informe-empleado-sin-datos,
.informe-empleado-calendario__mes-nav,
.informe-empleado-calendario {
  clear: both;
}

/* waive_1_incidencia_informes_rrhh.txt (2026-08-09, ronda 5 hotfix): grid
   calendario individual pegado al pie de pagina (sin separacion, reportado
   por el usuario) -- el grid no tenia margen inferior propio (a diferencia
   del panel de filtros, que usa la utilidad ".bottom30" existente). */
.informe-empleado-calendario {
  margin-bottom: 30px;
}

/* UC-7 (mismo bug ya documentado/corregido en Informe Absentismo/Diario/
   Fichaje/Fichaje Detallado, ver nota arriba en .informe-absentismo):
   la cabecera y el panel de filtros de gastos.html.twig son ".col-xs-12"
   (float:left) anidados sin ".row" que los limpie -- verificado en .41 con
   datos reales (2026-08-07): la tabla con 13 filas SI llegaba al DOM
   (getBoundingClientRect confirmaba rowCount:13) pero quedaba con width:0
   y left:~1400px en un viewport de 1430px -- invisible pese a datos
   correctos, mismo sintoma exacto ya diagnosticado en las 4 pantallas
   hermanas. */
.informe-gastos .table-responsive,
.informe-gastos .informe-gastos-sin-datos,
.informe-gastos .informe-gastos-error,
.informe-gastos .informe-gastos-aviso-truncado,
.informe-gastos__resumen {
  clear: both;
}

/* UC-5 (mismo bug exacto ya documentado arriba para Gastos/Absentismo/
   Diario/Fichaje/Fichaje Detallado): contratacion.html.twig tiene el mismo
   patron de ".col-xs-12" (float:left) sin ".row" que los limpie antes de
   ".table-responsive" -- verificado en .41 con datos reales (2026-08-07):
   50 filas SI llegaban al DOM (getBoundingClientRect confirmaba
   rowCount:50) pero la tabla quedaba con width:0 y left:~1400px en un
   viewport de 1430px -- invisible pese a datos correctos. */
.informe-contratacion .table-responsive,
.informe-contratacion .informe-contratacion-sin-datos,
.informe-contratacion .informe-contratacion-error,
.informe-contratacion__resumen {
  clear: both;
}

/* PROBLEMA-1 (feedback humano 2026-08-07): ".col--filtro-contratacion"/
   ".col--boton-buscar-contratacion" (contratacion.html.twig) nunca
   tuvieron entrada propia en style.css -- a diferencia de
   ".col--filtro-absentismo"/".col--boton-buscar-absentismo" (linea ~2925)
   -- el boton Buscar quedaba sin el azul estandar (heredaba solo ".btn
   primario" pero sin el offset que lo alinea con los inputs, leia como
   "descolgado") y sin el margin-top:25px que compensa no tener <label>
   encima. Mismos valores exactos que Absentismo (25px = alto+margen de
   label; -8px = mismo ajuste de gutter). A diferencia de Absentismo, aqui
   los 4 campos comparten la MISMA clase ".col--filtro-contratacion" (no
   hay una clase distinta para el primer campo en el twig) -- se compensa
   por posicion (:first-child) para que el primero conserve el
   padding-left:8px de la fila y el resto reduzca el gutter en -8px. */
.informe-contratacion__filtros-panel .col--filtro-contratacion {
  margin-left: -8px;
}
.informe-contratacion__filtros-panel .row > .col--filtro-contratacion:first-child {
  padding-left: 8px !important;
  margin-left: 0;
}
.informe-contratacion__filtros-panel .col--boton-buscar-contratacion {
  margin-top: 25px;
  margin-left: -8px;
}

/* Mismo bug exacto en gastos.html.twig (".col--filtro-gastos"/
   ".col--boton-buscar-gastos" tampoco tenian CSS propio). */
.informe-gastos__filtros-panel .col--filtro-gastos {
  margin-left: -8px;
}
.informe-gastos__filtros-panel .row > .col--filtro-gastos:first-child {
  padding-left: 8px !important;
  margin-left: 0;
}
.informe-gastos__filtros-panel .col--boton-buscar-gastos {
  margin-top: 25px;
  margin-left: -8px;
}

/* PROBLEMA-3/4 (feedback humano 2026-08-07): empleado.html.twig (Informe
   por Empleado, UC-4) tenia los 5 campos del panel de filtros (Mes/
   Trabajador/Grupo/checkbox/boton Buscar) apilados en columna, uno por
   linea (sin grid Bootstrap ni ".row" envolvente) -- ni compacto en 1 fila
   ni con el padding superior/inferior del bloque gris-claro (ese padding
   lo da SIEMPRE el ".row.top20" interior + el margin-bottom por defecto de
   ".form-group" de Bootstrap, NUNCA el propio ".gris-claro", que solo pone
   background-color). Mismo bug exacto y misma solucion ya aplicada en
   Contratacion/Gastos arriba (".col--filtro-*"/".col--boton-buscar-*" sin
   CSS propio). */
/* waive_1_incidencia_informes_rrhh.txt (2026-08-08): .kpi-panel (partial
   compartido, dashboard/fichaje/_kpi_panel.html.twig) no tiene margin-bottom
   propio -- queda pegado al panel de filtros que va justo debajo. Separacion
   scoped SOLO a Empleado (no se toca .kpi-panel global para no afectar a
   Dia/Fichaje, que no reportaron este problema). */
.informe-empleado__filtros-panel {
  margin-top: 20px;
}

/* waive_1_incidencia_informes_rrhh.txt (2026-08-08): toggle Lista/Calendario
   reubicado en la cabecera junto al boton Exportar (antes en su propia fila
   .nav-pills, bloque suelto) -- ambos deben quedar en la MISMA linea dentro
   de ".informe-empleado__acciones" (text-right): inline-block + vertical-align
   para que se comporten como botones de accion consecutivos, no bloques
   apilados. */
.informe-empleado__acciones {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}
/* waive_1_incidencia_informes_rrhh.txt (2026-08-08): toggle Lista/Calendario
   pasa de .nav-pills (Bootstrap) a <a class="btn ..."> planos, mismo alto y
   forma que el boton Exportar de al lado -- solo hace falta el gap entre
   los 2 botones del toggle (el gap:10px de .informe-empleado__acciones ya
   separa el toggle del boton Exportar). */
.informe-empleado__toggle-vista {
  display: inline-flex;
  gap: 6px;
}

.informe-empleado__filtros-panel .col--filtro-empleado {
  margin-left: -8px;
}
.informe-empleado__filtros-panel .row > .col--filtro-empleado:first-child {
  padding-left: 8px !important;
  margin-left: 0;
}
.informe-empleado__filtros-panel .col--boton-buscar-empleado {
  margin-top: 25px;
  margin-left: -8px;
}

/* FIX-260807 (feedback usuario): checkbox "Ver solo dias con fichaje"
   desalineado respecto a Mes/Trabajador/Grupo. Los otros 3 campos tienen un
   <label> PROPIO encima del <input>/<select> (empuja el control hacia
   abajo); el checkbox usa el patron Bootstrap ".checkbox" (el <label> ENVUELVE
   al input, sin label separada encima), asi que su <input> arranca mas
   arriba que los hermanos pese a compartir la misma fila ".row". Medido con
   getBoundingClientRect(): input Mes/Trabajador/Grupo top=513px vs checkbox
   top=502px (11px de diferencia) con el margin-top:10px que trae Bootstrap
   por defecto en ".checkbox" -- 10+11=21px iguala el top real. */
.informe-empleado__filtros-panel .informe-empleado__filtro-ver-solo-fichaje.checkbox {
  margin-top: 21px;
}

/* design-rules-listados.md §4: tabla "Informe de Fichaje Detallado" -- 6
   columnas fijas (RN-UC1-09), sin columna de Acciones ni paginacion.
   TRABAJADOR es la unica columna de texto libre VARIABLE (el nombre puede
   variar de longitud) -> truncada con ellipsis+title. FECHA/TIPO/
   HORA EMPRESA/HORA TRABAJADOR/HORA SISTEMA son de formato corto y
   acotado -> FIJAS, con nowrap para que no se partan a media fecha/hora. */
.informe-fichaje-detallado-tabla {
  table-layout: fixed;
  width: 100%;
}
.informe-fichaje-detallado-tabla col.col-fecha           { width: 12%; } /* "2026-07-01" */
.informe-fichaje-detallado-tabla col.col-trabajador       { width: 30%; } /* unica columna variable */
.informe-fichaje-detallado-tabla col.col-tipo             { width: 14%; }
.informe-fichaje-detallado-tabla col.col-hora-empresa     { width: 15%; } /* cabecera "HORA EMPRESA" */
.informe-fichaje-detallado-tabla col.col-hora-trabajador  { width: 15%; } /* cabecera "HORA TRABAJADOR" */
.informe-fichaje-detallado-tabla col.col-hora-sistema     { width: 14%; } /* "08:00:05" */

.informe-fichaje-detallado-tabla td.truncado {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 0; /* obliga a respetar el ancho de columna en table-layout:fixed */
}

/* Todas las celdas centradas verticalmente (Bootstrap fija
   vertical-align:top con el selector mas especifico .table>tbody>tr>td --
   gana a .informe-fichaje-detallado-tabla td sin !important). */
.informe-fichaje-detallado-tabla td {
  vertical-align: middle !important;
}

/* FECHA/TIPO/HORA EMPRESA/HORA TRABAJADOR/HORA SISTEMA: formato corto y
   fijo (fecha, tipo de evento, hora con posible marcador
   cursiva+superindice RN-UC1-11) -- una sola linea, nunca se parte. */
.informe-fichaje-detallado-tabla td.celda-fecha,
.informe-fichaje-detallado-tabla td.celda-tipo,
.informe-fichaje-detallado-tabla td.celda-hora {
  white-space: nowrap;
}


/* TK-49347d1f2255 ([UC-1] Frontend: Panel KPI agregado al pie de
   resultados). Componente compartido `dashboard/fichaje/_kpi_panel.html.twig`
   (contrato BEM fijado por TK-3314bf474fcd): .kpi-panel > .kpi-panel__title +
   .kpi-panel__grid > .kpi-item.kpi-item--<color> > .kpi-item__icon +
   .kpi-item__label + .kpi-item__value. 6 colores fijos (RN-UC1-07), mismo
   hex que KpiService::COLORES / InformeEmpleadoController::KPI_COLORES.
   Nunca existia hoja de estilos para este componente aunque el partial y
   sus dos consumidores (UC-1 fichaje.html.twig, UC-4 empleado.html.twig)
   ya estaban deployados -- gap detectado en auditoria 07-ago-2026: el panel
   renderizaba datos correctos pero sin color visual (clase BEM sin regla
   CSS que la cubriera). */
.kpi-panel {
  margin-top: 24px;
  clear: both;
}

.kpi-panel__title {
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 600;
}

.kpi-panel__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.kpi-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 160px;
  padding: 10px 14px;
  border-radius: 4px;
  border-left: 4px solid transparent;
  background-color: #f5f5f5;
}

.kpi-item__icon {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: #9E9E9E;
}

.kpi-item__label {
  font-weight: 600;
  margin-right: 4px;
  white-space: nowrap;
}

.kpi-item__value {
  white-space: nowrap;
}

.kpi-item--blue   { border-left-color: #2196F3; }
.kpi-item--blue .kpi-item__icon   { background-color: #2196F3; }
.kpi-item--green  { border-left-color: #4CAF50; }
.kpi-item--green .kpi-item__icon  { background-color: #4CAF50; }
.kpi-item--purple { border-left-color: #9C27B0; }
.kpi-item--purple .kpi-item__icon { background-color: #9C27B0; }
.kpi-item--orange { border-left-color: #FF9800; }
.kpi-item--orange .kpi-item__icon { background-color: #FF9800; }
.kpi-item--yellow { border-left-color: #FFC107; }
.kpi-item--yellow .kpi-item__icon { background-color: #FFC107; }
.kpi-item--gray   { border-left-color: #9E9E9E; }
.kpi-item--gray .kpi-item__icon   { background-color: #9E9E9E; }

/* ==========================================================================
   .formulario__* -- patron canonico de FORMULARIO (editar/crear registro).
   Fuente: docs/plantillas-canonicas/plantilla-formulario-canonico.html
   (prototipo aprobado 2026-08-07) + plantilla-formulario-canonico.md (16
   hallazgos). Portado tal cual del prototipo standalone, sin reinventar
   valores. Usar el DOM completo (campos sueltos incluidos, no solo
   subdetalle/botonera) al migrar una pantalla -- Reservas 2026-08-07
   confirmo que mezclar el patron nuevo con clases viejas (form-group/row/
   col-md-*) da formato inconsistente entre campos del mismo formulario.
   ========================================================================== */
.formulario__cuerpo {
  padding: 4px 2px;
  clear: both; /* el pill de estado (.col-xs-12, Bootstrap float:left) que
    puede precederle no siempre se limpia -- sin esto la 1a fila se
    comprimia a ancho 0 (envuelta junto al float, feedback humano). */
}
.formulario__seccion-titulo {
  font-size: 13px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #888;
  margin: 24px 0 12px;
  padding-top: 16px;
  border-top: 1px dashed #e0e0e0;
}
.formulario__seccion-titulo:first-child { border-top: none; padding-top: 0; margin-top: 0; }

/* Campos sueltos (Hallazgo #1/#13 resueltos): label SIEMPRE encima del
   widget (excepcion: checkbox, label al lado) y widget SIEMPRE con la
   clase equivalente a form-control, sin excepcion -- Reservas tenia varios
   campos sin ninguna clase (formato distinto entre campos del mismo
   formulario, feedback humano directo 2026-08-07). */
.formulario__fila {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 16px;
}
.formulario__campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 220px;
  min-width: 220px;
}
.formulario__campo--full { flex-basis: 100%; }
.formulario__label {
  font-size: 13px;
  font-weight: 600;
  color: #555;
}
.formulario__label--opcional::after {
  content: " (opcional)";
  font-weight: normal;
  color: #999;
  font-size: 11px;
}
.formulario__input,
.formulario__select,
.formulario__textarea {
  height: 34px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0 10px;
  font-size: 13px;
  width: 100%;
  font-family: inherit;
}
.formulario__textarea { height: auto; min-height: 80px; padding: 8px 10px; resize: vertical; }
.formulario__input--fecha { max-width: 180px; }
.formulario__input:disabled,
.formulario__select:disabled,
.formulario__textarea:disabled {
  background-color: #eee;
  color: #777;
}
/* Checkbox: label AL LADO (no encima) -- unica excepcion al patron label-encima */
.formulario__checkbox-campo { display: flex; flex-direction: row; align-items: center; gap: 8px; flex: 0 0 auto; }
.formulario__checkbox { width: 16px; height: 16px; }
.formulario__checkbox-label { font-size: 13px; color: #555; font-weight: normal; }
/* Noticias / Publicar: aviso de negocio -- "esto SI publica de verdad"
   (conserva el color/peso que llevaba inline en el label envolvente
   antiguo de _form.html.twig, ver docs/plantillas-canonicas). */
.formulario__checkbox-label--aviso { color: #980046 !important; font-weight: 700 !important; }

.formulario__error {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #a94442;
  background: #f2dede;
  border: 1px solid #ebccd1;
  border-radius: 3px;
  padding: 4px 8px;
  margin-top: 2px;
}

/* ---- Subdetalle / coleccion N-items (Hallazgo #3: boton "+Anadir" SIEMPRE
   icono+texto; Hallazgo #4: boton eliminar SIEMPRE con title accesibilidad) ---- */
.formulario__coleccion-cabecera {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.formulario__coleccion-titulo { font-size: 13px; font-weight: 600; color: #555; }
.formulario__coleccion-anadir {
  display: inline-flex; align-items: center;
  height: 30px; padding: 0 12px;
  border-radius: 4px; border: none;
  background: var(--theme-label-color, var(--theme-color-1));
  color: #fff; font-size: 12px; cursor: pointer;
}
.formulario__coleccion-anadir i { margin-right: 6px; }
/* Tabla real (no flex-cards): una fila con un campo condicional (p.ej.
   Kilometraje en Gastos, que anade Recorrido+Kilometros) desestabilizaba
   el ancho del resto de filas en el patron flex anterior -- en una tabla
   las columnas son fijas para TODAS las filas, tenga o no cada fila
   contenido en esa columna (feedback humano directo, migracion Gastos
   2026-08-07). */
.formulario__coleccion-tabla-wrap {
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  overflow-x: auto;
}
.formulario__coleccion-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
/* mismo estilo real que .listado__tabla thead th -- cabecera de tabla es
   el mismo componente visual en listado y en formulario, sin fondo propio
   (Bootstrap 3.3.7 por defecto). */
.formulario__coleccion-tabla thead th {
  background: transparent;
  color: #333;
  text-align: left;
  padding: 12px;
  font-weight: bold;
  font-size: 13px;
  border-bottom: 2px solid #ddd;
  vertical-align: bottom;
}
.formulario__coleccion-tabla thead th label {
  margin: 0;
  font-weight: bold;
  font-size: 13px;
}
.formulario__coleccion-tabla tbody td {
  padding: 12px;
  vertical-align: top;
  border-bottom: 1px solid #e0e0e0;
}
.formulario__coleccion-tabla tbody tr:last-child td { border-bottom: none; }
.formulario__coleccion-tabla tbody tr:nth-child(odd) { background: #fafafa; }
.formulario__coleccion-tabla .formulario__coleccion-col--acciones {
  width: 44px;
  text-align: center;
}
/* Columnas condicionales (p.ej. Recorrido/Kilometros en Gastos): la columna
   (cabecera incluida) esta SIEMPRE presente -- solo se oculta el contenido
   de la celda por fila suelta (visibility:hidden, no display:none, para no
   descuadrar el resto de columnas de la tabla). Ver .item-gasto-kilometraje-col
   en el JS del formulario especifico. */
.formulario__coleccion-eliminar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 3px; border: none;
  background: #d9534f; color: #fff; cursor: pointer;
}

/* ---- Botonera (Hallazgo #8/#9: Cancelar en contorno, Guardar en solido --
   distincion visual deliberada, no ambos con el mismo color) ---- */
.formulario__botonera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 28px;
  margin-bottom: 20px;
  padding-top: 16px;
  border-top: 1px solid #e0e0e0;
}
.formulario__boton {
  display: inline-flex; align-items: center; justify-content: center;
  height: 38px; padding: 0 22px;
  border-radius: 4px; border: none;
  font-size: 14px; cursor: pointer;
  background: var(--theme-label-color, var(--theme-color-1));
  color: #fff;
}
.formulario__boton--cancelar {
  background: #fff;
  color: var(--theme-label-color, var(--theme-color-1));
  border: 1px solid var(--theme-label-color, var(--theme-color-1));
}

/* Reserva: pill de estado a la derecha del titulo de cabecera, centrado
   verticalmente (feedback humano 2026-08-07, antes vivia duplicado encima
   del form). Scoped a esta pantalla via .reserva-cabecera-row. */
.reserva-cabecera-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Solicitud/Ausencias show: mismo espiritu que .reserva-cabecera-row --
   titulo a la izquierda, bloque derecho (fecha "Solicitado el" + pill de
   estado) alineado verticalmente con el titulo (feedback humano 2026-08-07).
   A diferencia de Reserva, aqui SI hay fecha ademas del pill, por eso el
   bloque derecho es una columna (fecha arriba, pill debajo) en vez de un
   pill suelto. Scoped a dashboard/solicitud_categoria/show.html.twig via
   .solicitud-show-cabecera-row. */
.solicitud-show-cabecera-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.solicitud-show-cabecera-derecha {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

/* Fechas seleccionadas (dashboard/solicitud_categoria/partials/
   _show_calendar_field.html.twig): fila flex alineada a la derecha, cada
   fecha con ancho ajustado a su propio contenido (antes bloque a ancho
   completo, uno debajo de otro -- feedback humano 2026-08-07). Reemplaza
   las reglas .selected-dates-grid/.selected-date-item que vivian inline en
   el <style> del partial (ver comentario alli). Estilo "chip" en linea con
   el patron ya establecido de .normativa-tipo (border-radius + padding +
   fondo claro). */
.selected-dates-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.selected-date-item {
  display: inline-flex;
  width: auto;
  background: #fff;
  padding: 10px 14px;
  border-radius: 6px;
  text-align: left;
  font-weight: 500;
  color: #333;
  border-left: 3px solid #4CAF50;
}

/* calendar-widget__time-*: selector de hora inline del calendario de
   Solicitud/Ausencias -- sin CSS propia hasta ahora (solo defaults del
   navegador), quedaba amontonado sin aire (feedback humano 2026-08-07). */
.calendar-widget__time-selectors {
  padding: 16px;
  margin-top: 12px;
  background: #fafafa;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}
.calendar-widget__time-header {
  margin-bottom: 12px;
}
.calendar-widget__time-inputs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 20px;
}
.calendar-widget__time-input-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.calendar-widget__time-actions {
  display: flex;
  gap: 10px;
  margin-left: auto;
}

/* ===== TK-pge-asa-fis-align (2026-08-10): contenido promovido desde
   public/css/PGE/style.css (override de tenant PGE, cargaba DESPUES de este
   fichero via <link> separado -- misma especificidad, ganaba por orden de
   carga). Se centraliza aqui porque PGE/ASA/FIS comparten la misma marca
   Arcadia y no hay motivo real para 3 copias de estos fixes; el override de
   tenant queda para particularidades futuras reales (branding distinto). ===== */
.login-background {
    background-image: inherit!important;
}


.inf-banner {
    background-image: inherit!important;
    background-color: darkgray;
    height: 80px;
}

.inf-banner .banner-title, .inf-banner-div .banner-title {
    margin-top: 10px;
}

.carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img[alt=logo]  {
    float: left;
    width: 50%!important;
    margin: 0 20px 20px 0;
}

.noticia {
    text-align: justify;
}

.normativa-tipo {
    color: var(--theme-tags);
    border: 1px solid var(--theme-tags);
}

.carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 280px;
}

.login-background {
    height: calc(100vh - 293px);
}

.login-background-dark {
    height: calc(100vh - 293px);
}

.navbar .nav li:hover,
.sidebar a:hover,
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus
{
    background-color: rgb(27, 46, 81, 0.5);
}

/* TK-e2b81ea6b03b: menu lateral laboral (Mis Datos/Ausencias/Calendario/Resumen anual) - texto mayor */
.sidebar a.sidebar-item-laboral-lg {
    font-size: 16px;
}
.login  input {
    color: black!important;
    background-color: white!important;
}

.login  input::placeholder {
    color: darkgray;
    background-color: white!important;
}

.login input:focus {
    color: white!important;
}

.login button, .login button:hover {
    color: white;
}

footer p {
    color: #595959;
}

.primario {
    background-color: #1b2e51!important;
}

.primario.bar {
    background-color: #d3d3d3!important;
}

footer .primario {
    background-color: #d3d3d3!important;
}

.container a {
    color: var(--theme-color-2);
}

.btn-link i {
    display: inline-block;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    padding: 5px;
    border-radius: 50%;
}

.search-home.button-box button {
    background-color: #1b2e51;
}

.destacados.gris-claro li,
.destacados.gris-claro a
{
    color: black;
}

#zona_privada {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

#zona_privada .item {
    width: calc(50% - 30px);
    height: 50vh;
    margin: 10px;;
    overflow-y: hidden;
    overflow-x: hidden;
}

#zona_privada {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

#zona_privada .item table td:last-child {
    display: flex;
    justify-content: center;
}

#zona_privada .item table td:last-child a {
    margin: 2px;
}


#zona_privada .btn-toolbar[role=toolbar]{
    display: flex;
    justify-content: center;
}

#zona_privada h2 {
    border-bottom: 3px solid #1b2e51;
    margin-bottom: 20px;
    color: #1b2e51;
}

.person .row > div {
    display: flex;
    justify-content: flex-end;
}

html, body, body > .row, body > .row > #sidebar-web, body > .row >.col-sm-9.col-md-10{
    height: 100%;
}

body > .row {
    height: auto !important; /* Fuerza la altura a ajustarse al contenido, sobrescribiendo otras reglas */
    max-height: none !important; /* Asegura que no haya una altura máxima que limite el crecimiento */
}

/** PAGINATION **/
/* TK-pge-asa-fis-align: !important necesario -- bootstrap.min.css (CDN) se
   carga DESPUES del CSS propio en base.html.twig y su .pagination{display:
   inline-block} gana el empate de especificidad/orden sin esto (mismo
   patron ya usado en el resto del fichero para el mismo problema). */
.pagination {
    display: inline-flex !important;
    gap: 0.25rem; /* Espacio entre botones */
}

.pagination .pagination-button {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid #ccc;
    text-decoration: none;
    color: #333;
    background-color: #f5f5f5;
    cursor: pointer;
}

.pagination .pagination-button:hover {
    background-color: #e6e6e6;
}

.pagination .is-active {
    background-color: #333;
    color: #fff;
    pointer-events: none;
}

.pagination .disabled {
    opacity: 0.5;
    pointer-events: none;
}

.pagination .pagination-dots {
    padding: 6px 12px;
    color: #999;
}

.pagination .icon-left::before {
    content: "<";
}

.pagination .icon-right::before {
    content: ">";
}

.pagination .page-number {
    font-weight: bold;
}

/* TK-pge-asa-fis-align: bloque .normativa-tipo--{anulado,anulado-it,en-proceso,
   aceptado,rechazado} ya definido arriba (era un override de tenant PGE
   duplicado a proposito para ganar por orden de carga en un <link> aparte;
   al fusionar en un unico fichero el duplicado deja de hacer falta). */