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;
}

/* TK-988e18aad0be: avatar con iniciales de color en el dropdown de usuario
   (sustituye el icono generico fa-user); .ic ya da tamano/centrado, aqui
   solo se anade forma circular + tipografia de iniciales. */
.avatar-iniciales{
  border-radius: 50%;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  padding: 0;
  line-height: 25px;
}

.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).
   TK-e6c572bce0ea (2026-08-17): "flex: 1" es shorthand de flex-grow:1
   flex-shrink:1 flex-basis:0%. Con flex-shrink:1 (y flex-basis:0, que hace
   que el tamaño de partida del item sea 0 en vez de su contenido), body
   (flex-column) puede ENCOGER esta fila por debajo de la altura real de su
   contenido cuando el contenido (calendario + lista de fechas/categorias en
   movil/tablet, con el flex-wrap de #body-view-monthly apilando secciones)
   no cabe en el espacio de viewport restante -- el min-height:auto
   automatico de flexbox no lo evita de forma fiable en este anidamiento de
   2 niveles de flex (body > .row > .col-sm-9.col-md-10). El resultado es
   el mismo bug: el contenido se pinta mas alto que la caja y el pie
   (siguiente hermano) queda superpuesto sobre la cola del contenido.
   "flex: 1 0 auto" (grow:1, shrink:0, basis:auto) es el patron correcto de
   pie-siempre-al-fondo: la fila SIGUE creciendo para llenar el hueco
   sobrante cuando el contenido es corto (grow:1), pero NUNCA encoge por
   debajo de la altura natural de su contenido (shrink:0, basis:auto). */
.dashboard-body-row {
    display: flex;
    flex-wrap: wrap;
    flex: 1 0 auto;
}

/* TK-24c6d98c5f38: rediseño visual "marca Arcadia" -- sidebar de la
   intranet de empleado. Fondo blanco + items tipo pill que resaltan en azul
   Arcadia (--arcadia-primary, definido en base_guide.css) en hover/activo,
   en vez del gris de fondo + vino de hover anterior. El icono <i> hereda el
   color via currentColor (FontAwesome), no hace falta reglas aparte. */
.sidebar {
    bottom: 0;
    left: 0;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #fff;
    border-right: 1px solid #eef0f4;
    padding-top: 12px;
}

.sidebar a {
  display: block;
  width: calc(100% - 24px);
  margin: 2px 12px;
  padding-left: 18px;
  padding-right: 12px;
  padding-bottom: 10px;
  padding-top: 10px;
  text-decoration: none;
  color: #5a6472;
  border-radius: 8px;
  transition: background-color .15s ease, color .15s ease;
}

/* 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: var(--arcadia-primary-soft, rgba(59, 125, 232, 0.1));
  color: var(--arcadia-primary, #3b7de8);
  text-decoration: none;
}

/* TK-24c6d98c5f38: item activo (clase "letraMorada", marcada por ruta
   actual en _sidebar_menu.html.twig) -- antes solo cambiaba el color del
   texto al color-1 del tenant; ahora es un pill azul Arcadia solido,
   consistente con el resto del rediseño. Mas especifico que ".letraMorada"
   (regla generica mas abajo en este fichero) para no tocar otros usos
   futuros de esa clase fuera del sidebar. */
.sidebar a.letraMorada {
  background-color: var(--arcadia-primary, #3b7de8);
  color: #fff !important;
  font-weight: 600;
}

/* TK-2a9607849c9a: bloque "usuario activo" (avatar+nombre+rol) + "Cerrar
   sesion" reubicado al pie del sidebar (dashboard/partials/sidebar.html.twig)
   desde el dropdown del topbar. .sidebar no tiene position fijo (crece con
   el contenido dentro de #sidebar-web/.dashboard-body-row, ver comentario
   TK-24c6d98c5f38 mas arriba) -- este bloque simplemente sigue en flujo
   normal DESPUES del menu, sin overlay ni position:absolute, así que nunca
   puede solaparse con los items del menu aunque este sea largo. */
.sidebar-usuario-footer {
    margin-top: 12px;
    padding: 14px 12px;
    border-top: 1px solid #eef0f4;
}

.sidebar-usuario-footer__info {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.sidebar-usuario-footer__texto {
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sidebar-usuario-footer__nombre {
    font-weight: 600;
    color: #2b3140;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-usuario-footer__rol {
    font-size: 12px;
    color: #5a6472;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-usuario-footer__logout {
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: none;
}

.sidebar-usuario-footer__logout:hover {
    color: #fff;
    text-decoration: none;
}

/* TK-2a9607849c9a: consolida el topbar a una fila SOLO en paginas que
   realmente tienen sidebar (logout+dropdown de usuario reubicados a su pie,
   regla de arriba). ":has(#sidebar-web)" -- no un flag pasado desde el
   controller -- porque partials/header.html.twig es un partial COMPARTIDO:
   se incluye tanto desde base.html.twig (~40 plantillas sin sidebar, deben
   seguir mostrando logout arriba tal cual) como desde ~80 plantillas CON
   sidebar, de las cuales solo 13 pasan por base_dashboard.html.twig y las
   67 restantes (incluida la propia /dashboard) incluyen
   "dashboard/partials/sidebar.html.twig" directamente en su propio bloque
   body -- un flag habria que threadearlo por los ~80 controllers/plantillas
   para cubrir todos los casos. La presencia de #sidebar-web en el DOM ya es
   la fuente de verdad UNICA y siempre correcta de "esta pagina tiene
   sidebar" (es literalmente el mismo criterio que cada plantilla usa hoy
   para decidir si se incluye o no), asi que reutilizarla via :has() evita
   duplicar esa decision y cubre automaticamente cualquier plantilla nueva
   que incluya el sidebar, sin tocar controllers. Soporte :has() (Chrome/
   Edge/Firefox/Safari, todos con soporte estable desde 2023) verificado
   adecuado para este proyecto en 2026. */
body:has(#sidebar-web) .header-logout-btn,
body:has(#sidebar-web) .header-user-dropdown {
    display: none;
}

/* TK-24c6d98c5f38: botones primarios de la ZONA EMPLEADO (dashboard) pasan
   al azul Arcadia en vez del azul generico de Bootstrap (.btn-primary) o
   del color-1 por tenant (.primario) -- scoped a .dashboard-body-row
   (contenedor comun a templates/dashboard/index.html.twig y
   base_dashboard.html.twig, ver TK-74eb1769e822 hija "Layout base") para NO
   repintar los botones del sitio publico/backoffice, que siguen con su
   marca de tenant. */
.dashboard-body-row .btn-primary,
.dashboard-body-row .btn.primario,
.dashboard-body-row .primario {
    background-color: var(--arcadia-primary, #3b7de8) !important;
    border-color: var(--arcadia-primary, #3b7de8) !important;
    color: #fff !important;
}

.dashboard-body-row .btn-primary:hover,
.dashboard-body-row .btn.primario:hover,
.dashboard-body-row .primario:hover {
    background-color: var(--arcadia-primary-hover, #2f66c3) !important;
    border-color: var(--arcadia-primary-hover, #2f66c3) !important;
}

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;
}

/* CHAT - responsive: .chat__container era flex-row FIJO (25%/75%, height:500px)
   sin ninguna media query -> en 375-991px el 25% de wrapper_channels dejaba
   ~46-190px reales (menos padding) para los nombres de canal, ilegibles.
   Se apila en columna y se dan alturas explicitas para que sigan resolviendo
   los % / calc() ya existentes en #channels y #mensajes. */
@media (max-width: 991px) {
  .chat__container {
    flex-direction: column;
    height: auto;
  }

  .chat__container .wrapper_channels {
    width: 100%;
    height: 220px;
    padding: 10px;
  }

  .chat__container .wrapper_chat {
    width: 100%;
    height: 480px;
    padding: 10px;
  }

  .chat__container #channels p > a {
    padding: 12px 15px;
    font-size: 14px;
  }
}


.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;
}

/* TK-3a8140c7a074: #edit_clock ya tenia background:transparent y
   color:black, pero #edit_date NUNCA recibio el mismo tratamiento --
   se quedaba con el fondo gris nativo del <button> sin variante real de
   Bootstrap (btn-outline-secondary es clase BS4/5, no existe en BS 3.3.7,
   la unica version cargada via CDN en este proyecto) y con el gris #333
   por defecto en vez de negro. Confirmado por pixel: fondo #EFEFEF en
   #edit_date vs blanco/transparente en #edit_clock, e icono #333 vs #000.
   Ese fondo gris es la "caja gris" que se solapaba con el texto de la
   fecha, reportada en produccion/movil (Safari, Chrome, Firefox, no
   arregla con hard-refresh). Misma regla para AMBOS botones -> paridad
   visual real, no cosmetica de un solo lado. */
#fichaje_popup #edit_date,
#fichaje_popup #edit_clock {
  background: transparent;
  color: black;
}

#fichaje_popup #edit_date i,
#fichaje_popup #edit_clock i {
  color: black;
}

/* TK-3a8140c7a074: #date_wrapper/#clock_wrapper (fichaje_popup.html.twig)
   usan clases Bootstrap 4/5 (align-items-center, justify-content-center)
   que NO EXISTEN en Bootstrap 3.3.7 ni en ningun CSS local de este
   proyecto -- son no-op. Sin align-items-center, el flex container usa
   por defecto align-items:stretch: el boton #edit_date/#edit_clock se
   ESTIRA para ocupar toda la altura de su fila, que depende del texto
   hermano (h5#date_display, normal, ~24-30px vs div#clock que hereda
   font-size:4em de "#fichaje_popup > .hora" de arriba al no tener regla
   propia, ~80px). Resultado medido por pixel: el glyph del lapiz mide
   IGUAL (21x21px) en ambos botones, pero la CAJA del boton se estira de
   forma desigual -> el reportador ve "los dos lapices con tamano
   distinto". Centrar en vez de estirar deja ambos botones con su tamano
   natural y consistente. */
#fichaje_popup #date_wrapper,
#fichaje_popup #clock_wrapper {
  align-items: center;
}


#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-283f20120453 (RA6.23 §4.4): resultado MIXTO de validacion parcial
   (aprobado parcialmente, RRHH rechazo dias sueltos dentro del rango) --
   naranja Material, distinto del amarillo de --anulado y del verde de
   --aceptado, para que se distinga a simple vista en el mismo listado. */
.normativa-tipo--mixto { border-color: #FF9800; color: #e65100; background-color: #fff3e0; }

/* [2.13-UC10-1]: estado DESISTIDA -- solicitud eliminada por el empleado antes
   de que ningún validador la evaluara. Gris-azulado neutro, distinto del
   amarillo de ANULADO (ya evaluada parcialmente) y del rojo de RECHAZADO. */
.normativa-tipo--desistida { border-color: #607D8B; color: #37474F; background-color: #ECEFF1; }

/* 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 */
}

/* Hallazgo revisión dev3 2026-08-12: el buscador de Organigrama reutilizaba
   los nombres de clase del patrón §3.1/3.2/3.3 (design-rules-listados.md)
   pero las reglas nunca se escribieron -- el botón de lupa quedaba sin el
   offset vertical que compensa el <label> del input, desalineado respecto
   al input. Mismo patrón que .col--boton-buscar-reserva. */
.form-group--buscar-organigrama {
  padding-left: 8px !important;
}
.col--boton-buscar-organigrama {
  margin-top: 25px;
  margin-left: -8px;
}

/* Árbol Organigrama (dashboard): la lista de miembros por nivel usa <li>
   con viñeta nativa del navegador; con contenido multilínea (cargo en
   negrita + nombre en línea propia) la viñeta se alineaba con el CENTRO
   del bloque en vez de con la PRIMERA línea de texto (hallazgo revisión
   dev3 2026-08-12). list-style-position:outside + line-height normal en
   el <li> no bastaba porque el contenido son varios <div> en bloque; se
   sustituye la viñeta nativa por un marcador propio alineado arriba. */
.lista-miembros-organigrama {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.fila-miembro-organigrama {
  position: relative;
  padding-left: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 10px;
}
.fila-miembro-organigrama::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  line-height: 1.4;
}

/* 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 {
}

/* TK-e3c888b91299 (Figma, decision de Jorge: adoptar tal cual): subtitulo
   descriptivo bajo el titulo de pagina "Mis Jornadas" (breadcrumb activo),
   mismo patron tipografico que ".mis-datos__page-subtitulo"
   (public/css/mis_datos.css) -- subtitulo equivalente ya anadido en la
   pagina "Mis datos" dentro de este mismo rediseno Arcadia. */
.jornada__page-subtitulo {
  display: block;
  font-size: 14px;
  color: #6b7488;
  margin: 2px 0 16px;
}

/* TK-3722c03ac36c: subtitulo descriptivo bajo el titulo "Calendario
   Mensual"/"Calendario Anual" del tab "Calendario" (calendar/view_monthly.html.twig
   y calendar/view_annual.html.twig, ambos bajo el mismo tab-shell
   calendar/_tabs_calendario_laboral.html.twig -- ver toggle Mes/Ano en
   calendar/_subtoggle_periodo.html.twig). Mismo patron tipografico que
   ".jornada__page-subtitulo"/".mis-datos__page-subtitulo" (rediseno Arcadia,
   subtitulo bajo cada H1/titulo de seccion en toda la intranet). */
.calendario__page-subtitulo {
  display: block;
  font-size: 14px;
  color: #6b7488;
  margin: 2px 0 16px;
}
/* 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).

   TK-b3af242af737 (2026-09-16, "datos montados/superpuestos" en movil):
   CAUSA RAIZ real -- MISMO bug ya diagnosticado y corregido en .gasto-table
   (TK-7bdd9da9d58d, ver comentario mas abajo): width:100% sin min-width
   fuerza a table-layout:fixed a repartir SIEMPRE el ancho real del
   .table-responsive en movil (~343-380px), nunca los ~1100px para los que
   estan pensados los % de columna. Como AQUI ninguna columna es texto
   libre/truncable (fechas/duraciones/badge Estado), las columnas nowrap se
   quedan mas estrechas que su contenido y este se desborda VISUALMENTE
   sobre la columna siguiente (verificado en lamp 390px: "Acciones" cortado
   en el borde, contenido pintado fuera de su celda) en vez de activar el
   scroll horizontal de .table-responsive (que ya existe en list.html.twig
   pero nunca se activaba). min-width calculado igual que .gasto-table: la
   columna mas restrictiva es Estado (15%, badge "ABIERTO"/"CERRADO"/"ERROR"
   ~87px minimo) -> 87/0.15=~580px, +margen -> 620px. */
.jornada-table {
  table-layout: fixed;
  width: 100%;
  min-width: 620px;
}
.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-6d4e78d9c73e (2026-09-17): boton "Editar" readquiere fondo -- la
   excepcion TK-6654feb11557 (btn-link plano) queda SUPERSEDIDA por la
   adopcion "tal cual Figma" del tratamiento PASTEL/SUAVE
   (design-rules-listados.md §5.decies). Azul de marca = --arcadia-primary
   (#3b7de8, MISMO valor que .dashboard-body-row .btn.primario, TK-24c6d98c5f38
   arriba), NO el solido de antes: fondo = tinte 85% hacia blanco, icono =
   sombra 20% hacia negro del mismo azul (mas saturado, legible sobre el
   fondo pastel). Mismos hex derivados que en .solicitud-table (misma
   metodologia, mismo bloqueo de acceso al prototipo Figma Make documentado
   ahi -- ver ese comentario). Esquinas 8px, sin llegar a pildora
   (§5.nonies). Clase dedicada (no ".primario", que fuerza solido
   !important via TK-24c6d98c5f38) para no pelear cascada/especificidad. */
.jornada-table td.celda-acciones .btn-accion-editar-pastel {
  background-color: #E2ECFC !important;
  border-color: #E2ECFC !important;
  color: #2F64BA !important;
  border-radius: 8px;
}
.jornada-table td.celda-acciones .btn-accion-editar-pastel:hover {
  background-color: #CFE0FA !important;
  border-color: #CFE0FA !important;
  color: #23508F !important;
  text-decoration: none;
}

/* 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%.

   TK-b3af242af737 (2026-09-16, "datos montados/superpuestos" en movil):
   CAUSA RAIZ real -- MISMO bug ya diagnosticado y corregido en .gasto-table
   (TK-7bdd9da9d58d) y ahora tambien en .jornada-table (arriba): width:100%
   sin min-width fuerza a table-layout:fixed a repartir SIEMPRE el ancho real
   de .table-responsive en movil (~343-380px). Verificado en lamp 390px:
   cabeceras y celdas de Fecha-Hora Sistema/Usuario quedaban literalmente
   superpuestas ("Fecha-Hora SisFecha-Hora Us...", "29/04/2026 05:3229/04/2026
   07:32"), el bug exacto reportado por el cliente. min-width calculado igual
   que en .jornada-table: la columna mas restrictiva son Fecha-Hora
   Sistema/Usuario (21%, cabecera "Fecha-Hora Sistema" ~19 caracteres, ~156px
   minimo en una linea) -> 156/0.21=~743px, +margen -> 700px.

   RONDA 2 (evidencia rechazada, mismo dia): el min-width de arriba NO
   resolvia Latitud/Longitud -- verificado en release4 con datos reales
   (entidad 45): la fuente es navigator.geolocation.coords (double JS), que
   guarda hasta 13-14 decimales ("-5.8313299734539", scrollWidth 128px vs
   clientWidth 91px de la celda al 13%). Un float crudo es longitud
   PRACTICAMENTE ilimitada -- ningun min-width por si solo la acota de forma
   fiable. Fix real iba en dos partes: (a) list.html.twig ahora redondea
   latitud/longitud a 6 decimales al pintar (ver comentario alli, precision
   de sobra para auditoria de fichaje, GPS movil real es ~3-5m) -- acota el
   string a un maximo predecible de 11 caracteres (signo + hasta 3 enteros +
   punto + 6 decimales); (b) con esa cota, se resube el min-width global a
   800px y se da mas % a latitud/longitud (13->15/16) quitandoselo a
   Tipo/Fecha-Hora (14->12, 21->19 x2) que tenian margen de sobra. */
.fichaje-table {
  table-layout: fixed;
  width: 100%;
  min-width: 800px;
}
.fichaje-table col.col-id             { width: 8%; }
.fichaje-table col.col-latitud        { width: 15%; }
.fichaje-table col.col-longitud       { width: 16%; }
.fichaje-table col.col-fecha-sistema  { width: 19%; }
.fichaje-table col.col-fecha-usuario  { width: 19%; }
.fichaje-table col.col-tipo           { width: 12%; }
.fichaje-table col.col-acciones       { width: 11%; }

/* 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).

   TK-7bdd9da9d58d (2026-08-17, "tabla no entra en pantalla" 375-600px):
   CAUSA RAIZ real -- width:100% sin min-width fuerza a table-layout:fixed a
   repartir SIEMPRE el 100% del contenedor real (.table-responsive, que en
   movil mide ~343px dentro del viewport de 375px), nunca el ancho ~1100px
   para el que estan pensados los % de columna (ver comentario arriba). El
   12% de Fecha ("dd/mm/aaaa", white-space:nowrap) se queda en ~41px y el
   10% de Acciones (boton-icono ~34px) en ~34.5px -- mas estrechos que su
   propio contenido, que SE SOLAPA visualmente sobre la columna siguiente en
   vez de truncarse (verificado en pantalla: fecha superpuesta con Motivo,
   boton Editar cortado en el borde). El wrapper ".table-responsive" YA
   existe en list.html.twig (scroll horizontal Bootstrap nativo) pero NUNCA
   se activa porque la tabla jamas supera el ancho de su contenedor. min-width
   fuerza a la tabla a mantener un ancho legible minimo -- por debajo de eso
   el .table-responsive pasa a scrollear en vez de aplastar las columnas
   (mismo patron ya usado para "no entra en pantalla" en el resto de la app,
   ver .table-responsive de dashboard/informe/*). 680px = suficiente para que
   los 5 minimos (Fecha ~82px/12%, Acciones ~68px/10%) alojen su contenido
   fijo sin solape, verificado con getBoundingClientRect (Fase 4). */
.gasto-table {
  table-layout: fixed;
  width: 100%;
  min-width: 680px;
}
.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. TK-7b6bc35b1d14: nowrap por si solo NO basta en
   table-layout:fixed -- sin overflow:hidden el texto que no cabe en el
   ancho de columna (col-fecha 14%, se reduce a pocos px en viewports
   375-992px, ver repro con contenedor 345px) se desborda VISUALMENTE
   fuera de la celda y queda pintado encima de Estado/Acciones (superpuesto
   e ilegible, bug reportado). Mismo patron ya usado en .truncado (arriba)
   para col-titulo -- aqui faltaba aplicarlo. */
.solicitud-table td.celda-fecha {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 0; /* obliga a respetar el ancho de columna en table-layout:fixed, igual que td.truncado */
}
/* TK-7b6bc35b1d14 (seguimiento evidenciador 20260817): el selector de arriba
   solo cubria las celdas de DATOS (td.celda-fecha). La cabecera reutiliza la
   MISMA clase en un <th> (<th class="celda-fecha">Fecha de solicitud</th>,
   ver _list_table.html.twig) y el td-only selector no la alcanzaba -- asi
   que el bug original (overlap sobre Estado/Acciones) seguia reproduciendose
   en la fila de cabecera, verificado en release4 real a 375px (scrollWidth
   133px vs clientWidth 48px). "Estado"/"Acciones" en el header ya caben sin
   truncar (6/8 caracteres) -- solo celda-fecha necesita el mismo patron. */
.solicitud-table th.celda-fecha {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 0;
}

/* 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.
   TK-7b6bc35b1d14: mismo bug que celda-fecha -- la celda no clipa, asi que
   el pill se desborda sobre Acciones en viewports estrechos. overflow:hidden
   va en la celda (contiene el desborde) y el ellipsis se aplica al PILL
   (.normativa-tipo) en si, no al td, porque el td no tiene texto propio
   (es un <span> hijo) y el ellipsis del td no se pinta sobre contenido de
   un hijo inline-block -- sin esto el pill se recortaria en seco sin "...". */
.solicitud-table td.celda-estado {
  white-space: nowrap;
  overflow: hidden;
}
.solicitud-table td.celda-estado .normativa-tipo {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
}

/* §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-6730b2a5b3ae: el 3er icono (Anular X / reloj "ya solicitada") es
   condicional por fila -- cuando la fila no lo tiene, el template ahora
   pinta un placeholder con la MISMA caja (clases btn btn-sm) en vez de
   pintar nada, para que text-align:right (arriba) no desplace Ver/Imprimir
   y las 3 columnas de iconos (verde/blanco/rojo) queden alineadas entre
   filas. El placeholder reserva el espacio pero no debe verse ni ser
   interactivo -- visibility:hidden (no display:none, que colapsaria el
   hueco) consigue ambas cosas. El icono "reloj" (anulacion ya solicitada)
   ahora tambien usa btn+btn-sm (antes era un span suelto sin esa caja,
   con un ancho distinto al de Ver/Imprimir/Anular que igualmente
   descuadraba esa fila) -- gris en vez de rojo/verde, sin cursor de
   accion porque no es clicable. */
.solicitud-table td.celda-acciones .accion-placeholder {
  visibility: hidden;
}
.solicitud-table td.celda-acciones .accion-anulacion-pendiente {
  cursor: default;
}

/* TK-6d4e78d9c73e: botones de Acciones (Ver/Imprimir/Anular) pasan de
   solido saturado + icono blanco a relleno PASTEL/SUAVE del MISMO color
   semantico con icono en tono mas saturado (design-rules-listados.md
   §5.decies, actualizacion "tal cual Figma Make" 2026-09-17). El mapeo de
   color por semantica NO cambia (verde=Ver, gris=Imprimir sin semantica
   clara, rojo=Anular) -- solo el tratamiento de relleno. Esquinas mas
   redondeadas (8px, mismo radio que las tarjetas KPI modernizadas) pero
   SIN llegar a pildora (§5.nonies sigue vigente).

   Colores derivados SISTEMATICAMENTE de los mismos valores base que ya usa
   la app (bootstrap .btn-success #5cb85c, .btn-danger #d9534f, gris de
   .btn-default): fondo = tinte 85% hacia blanco, icono = sombra 20% hacia
   negro del mismo tono (mas saturado que el bg, legible sobre el). NO son
   los hex exactos del prototipo Figma Make -- el enlace
   (https://www.figma.com/make/7kN7P4Gn7XAXHaAYlihIar/Modernizar-intranet-de-empleado)
   es inaccesible en navegador headless (bloqueado en la pantalla de carga
   nativa de Figma, sin credenciales sancionadas; mismo bloqueo verificado
   independientemente en el padre TK-ed1ff2ae411c y reconfirmado aqui). Si
   se obtiene acceso real al prototipo, comparar pixel a pixel contra estos
   valores y ajustar. Scoped a .solicitud-table (Ausencias/Vacaciones/
   Asuntos Propios/Horas Permiso, todas comparten esta plantilla) -- el
   resto de listados (Reservas/Mensajeria/Gastos/Foro) sigue con el
   tratamiento solido previo, fuera de alcance de este ticket. */
.solicitud-table td.celda-acciones .btn {
  border-radius: 8px;
}
.solicitud-table td.celda-acciones .btn-success {
  background-color: #E7F4E7 !important;
  border-color: #E7F4E7 !important;
  color: #3F9142 !important;
}
.solicitud-table td.celda-acciones .btn-success:hover {
  background-color: #D5EED6 !important;
  border-color: #D5EED6 !important;
  color: #337536 !important;
}
.solicitud-table td.celda-acciones .btn-default {
  background-color: #EEF0F2 !important;
  border-color: #EEF0F2 !important;
  color: #5A6472 !important;
}
.solicitud-table td.celda-acciones .btn-default:hover {
  background-color: #E2E5E9 !important;
  border-color: #E2E5E9 !important;
  color: #3E4650 !important;
}
.solicitud-table td.celda-acciones .btn-danger {
  background-color: #F9E5E5 !important;
  border-color: #F9E5E5 !important;
  color: #B23A36 !important;
}
.solicitud-table td.celda-acciones .btn-danger:hover {
  background-color: #F3D2D2 !important;
  border-color: #F3D2D2 !important;
  color: #8F2E2B !important;
}

/* 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;
}

/* TK-21b521d2d8ad (2026-08-28, "contenido centrado / hueco blanco al
   inicio, tabla no entra en 600px"): a diferencia de TODAS sus tablas
   hermanas (.informe-absentismo-tabla, .informe-diario-tabla,
   .informe-fichaje-tabla, .informe-fichaje-detallado-tabla), esta tabla
   NUNCA tuvo table-layout:fixed ni %width por columna -- verificado con
   grep, cero reglas propias. Sin table-layout:fixed el navegador calcula
   el ancho preferido por CONTENIDO (auto-layout), ignorando el
   "table{width:100%!important}" global (linea ~892) en cuanto el
   contenido lo supera -- la tabla se pinta mas ancha que su contenedor
   (verificado en pantalla a 600px: scrollbar horizontal, columna IMPORTE
   fuera de vista). Mismo patron estructural ya diagnosticado y corregido
   en TK-7bdd9da9d58d (ver comentario mas abajo, ~linea 4531): el
   contenedor flex ".col-xs-12.col-md-10" hereda ese min-content ancho
   como "automatic minimum size" y puede crecer mas alla del viewport.
   5 columnas, mismo reparto que .informe-fichaje-detallado-tabla
   (trabajador variable + fecha/tipo cortos y fijos + titulo variable +
   importe numerico corto). */
.informe-gastos-tabla {
  table-layout: fixed;
  width: 100%;
}
.informe-gastos-tabla col.col-trabajador { width: 19%; }
.informe-gastos-tabla col.col-fecha      { width: 15%; } /* fila.fecha SIN formatear, "2026-01-22" (10 caracteres, sin punto de corte) */
.informe-gastos-tabla col.col-tipo       { width: 19%; } /* peor caso "ALIMENTACION"/"KILOMETRAJE" (12/11 caracteres, ~88px) */
.informe-gastos-tabla col.col-titulo     { width: 33%; }
.informe-gastos-tabla col.col-importe    { width: 14%; } /* cabecera "IMPORTE" (7 mayusculas en negrita, mas ancho que un numero) */

.informe-gastos-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 */
}

/* FECHA/TIPO: formato corto y fijo (fecha "dd/mm/aaaa", tipo = enum de
   InformeGastosController) -- una sola linea, nunca se parte. Sin esto
   "ALIMENTACION"/"KILOMETRAJE" (una sola palabra, sin punto de corte) se
   desborda de su celda y se superpone visualmente con TITULO en
   table-layout:fixed (verificado en pantalla a 600px). */
.informe-gastos-tabla td.celda-fecha,
.informe-gastos-tabla td.celda-tipo {
  white-space: nowrap;
}

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

/* IMPORTE es numerico -> centrado, mismo patron que el resto de tablas
   .informe-*-tabla (celda-numero). */
.informe-gastos-tabla td.celda-numero,
.informe-gastos-tabla th.celda-numero {
  text-align: center;
}

/* 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;
}

/* TK-1c60ceb5742a: la regla ".img-responsive" de arriba (pensada para
   imagenes de carousel/thumbnail/noticia) matchea TAMBIEN el logo de
   cabecera (partials/header.html.twig linea 5: <img class="img-responsive">),
   que no tiene ninguna otra clase que lo distinga. Al forzar width:50%!important
   sobre una columna estrecha (.col-xs-5.col-md-3), el logo queda MUCHO mas
   pequeno que su diseno (max-height:60px inline -> renderiza a ~47px de alto
   en 1366px, ~19px de alto en movil 375px, en vez de los 60px previstos) y
   con margen inferior de 20px que no le corresponde. Se restaura el
   comportamiento previsto (ancho automatico segun el max-height:60px inline,
   sin el margen de carousel) SOLO para el logo de cabecera, sin tocar la
   regla generica de arriba (usada por carousel/thumbnail/noticia en otras
   pantallas). Verificado en produccion (esarcadia.es) y lamp: mismo defecto
   en ambos, no es una regresion reciente. */
.primario.bar img.img-responsive {
    width: auto!important;
    margin: 5px 0!important;
}

.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,
.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.
   TK-24c6d98c5f38: ".sidebar a:hover" se quito de este selector combinado --
   vivia aqui, DESPUES en cascada del bloque real junto a ".sidebar" mas
   arriba en este mismo fichero, y lo pisaba silenciosamente (rgb(27,46,81,.5)
   navy en vez del azul Arcadia nuevo). */
.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 {
    height: 100%;
}

/* TK-e6c572bce0ea (2026-08-17): esta regla tenia height:100% (no min-height)
   para .col-sm-9.col-md-10. .dashboard-body-row (padre, flex:1) crece para
   llenar el hueco vertical que quede hasta ~100vh; en movil/tablet el
   contenido real (calendario + lista de fechas/categorias, que se apilan
   por el flex-wrap de #body-view-monthly) puede ser MAS ALTO que ese hueco.
   height:100% fijaba la caja del contenido a ese hueco (mas corto que el
   contenido real) y, sin overflow declarado, el sobrante se pintaba fuera
   de la caja justo donde el pie (siguiente hermano en el flex-column de
   body, posicionado segun la altura de LAYOUT de la caja, no la visual) se
   renderiza -- el pie quedaba superpuesto sobre la cola del contenido
   (bug reportado: "el footer se superpone con la lista de fechas/
   categorías"). min-height:100% conserva el proposito original (que el
   fondo de la columna llegue hasta el pie cuando el contenido es corto)
   sin recortar la caja cuando el contenido real es mas alto. */
body > .row > .col-sm-9.col-md-10 {
    min-height: 100%;
}

/* TK-7bdd9da9d58d (2026-08-17): sin esto, el min-width:680px anadido a
   .gasto-table (ver arriba) no arregla nada -- SOLO desplaza el bug un nivel
   arriba. Motivo: ".col-sm-12.col-md-10" es un FLEX ITEM de
   ".dashboard-body-row" (display:flex); un flex item con overflow:visible
   (el default) tiene un "automatic minimum size" = min-content de TODO su
   contenido, incluido el nuevo min-width de la tabla -- el ITEM crece a
   >=680px en vez de quedarse en el ancho del viewport, y ".table-responsive"
   (dentro de el) deja de necesitar scroll propio porque YA no esta acotado
   (scrollWidth~=clientWidth, verificado con getBoundingClientRect: la propia
   columna se desborda del body, que la recorta con overflow-x:hidden en vez
   de dejarla scrollear). min-width:0 anula ese minimo automatico -- la
   columna vuelve a poder encogerse al ancho real del viewport, y ENTONCES
   ".table-responsive" (que si tiene overflow-x:auto declarado) es quien
   scrollea. Mismo selector estructural que la regla de arriba
   (".col-sm-9.col-md-10" hermana, misma posicion body>.row>col-X): aqui se
   cubre la variante ".col-sm-12.col-md-10" que usa Gastos (list/nuevo/editar). */
body > .row > .col-sm-12.col-md-10 {
    min-width: 0;
}

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 */
}

/* TK-e6c572bce0ea (2026-08-17): #sidebar-web lleva "hidden-xs hidden-sm"
   (Bootstrap) -- en el rango sm (768-991px) el sidebar NO se pinta, pero el
   contenido conservaba "col-sm-9" (75% de ancho fijo por el grid de
   Bootstrap), dejando un 25% de hueco en blanco a la derecha porque nada lo
   reclama (las columnas de Bootstrap tienen flex-grow:0 por defecto, no
   crecen para ocupar el espacio libre del row aunque el row sea flex). Con
   el sidebar oculto el contenido debe ocupar TODO el ancho disponible hasta
   que el sidebar reaparezca en md (>=992px). */
@media (min-width: 768px) and (max-width: 991px) {
    body > .row > .col-sm-9.col-md-10 {
        width: 100%;
    }
}

/** 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). */

/* TK-e00c9f27c856: design-rules-listados.md SS4 aplicado a Organigrama
   (dashboard/organigrama/list.html.twig, tabla "organigrama-table"). Era la
   UNICA tabla de listado de toda la app sin este bloque -- sin
   table-layout:fixed las columnas crecian con el contenido (auto layout) y,
   combinado con el contenedor reducido a 75% en tablet (ver comentario
   TK-e00c9f27c856 en el propio .twig), el texto de Nombre/Cargo se
   desbordaba del contenedor en vez de truncarse con "...". Nombre/Cargo son
   columnas VARIABLES (SS4.2, texto libre truncado SS4.3); Contacto es FIJA
   (telefono corto, nowrap igual que celda-telefono/celda-horario SS4.4);
   Acciones tiene 1 solo boton btn-sm ("Ver ficha") -- mismo caso que
   avisos-table (tambien 1 boton), mismo 8%. */
.organigrama-table {
  table-layout: fixed;
  width: 100%;
}
.organigrama-table col.col-nombre   { width: 44%; }
.organigrama-table col.col-cargo    { width: 35%; }
.organigrama-table col.col-contacto { width: 13%; }
.organigrama-table col.col-acciones { width: 8%; }

.organigrama-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 .organigrama-table td sin !important). */
.organigrama-table td {
  vertical-align: middle !important;
}

/* Telefono: no debe partirse a media cifra. */
.organigrama-table td.celda-horario {
  white-space: nowrap;
}

/* ==================================================================
   TK-b6a95e9a6ffc: restyle tab "Ausencias" (Mis Ausencias, marca
   Arcadia). Scope SOLO ".ausencias-tab-restyle" -- clase que
   list.html.twig anade condicionada a solicitud_categoria.alias==
   'ausencias' (templates/dashboard/solicitud_categoria/list.html.twig).
   Este CSS NO debe afectar al resto de categorias de solicitud
   (mensajeria, eventos, etc.) que comparten el mismo template/tabla.
   ================================================================== */

/* Contador "Mis ausencias N": el .badge generico (linea ~69 de este
   fichero) fuerza naranja !important (pensado para notificaciones del
   header) -- aqui se recolorea a azul Arcadia solo para Ausencias. */
.ausencias-tab-restyle .badget-total-elements {
    background-color: var(--arcadia-primary, #3b7de8) !important;
}

/* Boton "+ Nueva solicitud": separacion entre el icono "+" y el texto
   (ya hereda azul Arcadia de ".dashboard-body-row .btn.primario",
   TK-24c6d98c5f38 -- aqui solo maquetacion icono+texto). */
.ausencias-tab-restyle .btn-nueva-solicitud-ausencias .fa-plus {
    margin-right: 6px;
}

/* TK-0cec707ebe6f: boton de busqueda de Ausencias, patron Figma -- icono
   lupa integrado DENTRO del input (en vez del boton icono-solo en columna
   propia, #3.4bis Caso A, que mantienen el resto de categorias de
   solicitud que comparten este mismo template). Sigue siendo un submit
   real: <button> transparente superpuesto con position:absolute, NO
   decorativo (ese es el Caso B de Gastos, .gastos-buscador-icono, que
   lleva pointer-events:none porque ahi el filtro es en vivo sin recarga). */
.ausencias-tab-restyle .ausencias-buscador-input-wrap {
    position: relative;
}
.ausencias-tab-restyle .ausencias-buscador-input-wrap .form-control {
    padding-right: 34px; /* hueco para el icono superpuesto, texto no queda debajo */
}
.ausencias-tab-restyle .ausencias-buscador-icono-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    padding: 0;
    line-height: 1;
    cursor: pointer;
}

/* Badges de Estado con color real (verde ACEPTADO, rojo Rechazado...):
   bug preexistente -- una regla posterior en este mismo fichero
   (".normativa-tipo { color: var(--theme-tags); border: 1px solid
   var(--theme-tags); }", bloque TK-pge-asa-fis-align) pisa los colores
   de estado porque tiene la MISMA especificidad (una sola clase) que
   ".normativa-tipo--aceptado/--rechazado/..." y carga despues en el
   fichero. Se soluciona AQUI solo para Ausencias con selectores de
   mayor especificidad (2 clases) -- NO se toca la regla global, que
   sigue rigiendo igual que antes para el resto de categorias de
   solicitud que comparten ".normativa-tipo". */
/* TK-aaccf4b37a5d: relleno SOLIDO en vez de outline (fondo claro + borde de
   color), pedido transversal Inicio/Fichajes/Calendario. background-color
   pasa a ser el color de estado (antes solo vivia en border-color), texto
   blanco para contraste -- mismo patron que ya usaba --anulado-it (unico
   caso solido preexistente en este bloque, ahora generalizado al resto). */
.ausencias-tab-restyle .normativa-tipo--aceptado {
    border-color: #4CAF50;
    background-color: #4CAF50;
    color: #ffffff;
}
.ausencias-tab-restyle .normativa-tipo--rechazado {
    border-color: #d9534f;
    background-color: #d9534f;
    color: #ffffff;
}
/* TK-283f20120453: mismo motivo que el resto de este bloque -- sin este
   override de 2 clases, la regla ".normativa-tipo { color: var(--theme-tags);
   ... }" (TK-pge-asa-fis-align, misma especificidad, carga despues) pisaria
   el color naranja de --mixto en la pantalla real de Ausencias. */
.ausencias-tab-restyle .normativa-tipo--mixto {
    border-color: #FF9800;
    background-color: #FF9800;
    color: #ffffff;
}
.ausencias-tab-restyle .normativa-tipo--anulado {
    border-color: #f0ad4e;
    background-color: #f0ad4e;
    color: #333333;
}
.ausencias-tab-restyle .normativa-tipo--anulado-it {
    border-color: #9C27B0;
    color: #ffffff;
    background-color: #9C27B0;
}
.ausencias-tab-restyle .normativa-tipo--en-proceso {
    border-color: #337ab7;
    background-color: #337ab7;
    color: #ffffff;
}
.ausencias-tab-restyle .normativa-tipo--desistida {
    border-color: #607D8B;
    background-color: #607D8B;
    color: #ffffff;
}

/* TK-a1e3c8926c79: Figma pide las 4 cabeceras de la tabla de Ausencias
   (Tipo de ausencia/Fecha de solicitud/Estado/Acciones) en MAYUSCULAS.
   Se aplica via text-transform (no se hornea texto en mayusculas en las
   cadenas de traduccion -- Estado/Acciones se reutilizan en el resto de
   categorias de solicitud que comparten este mismo template/tabla) y
   scoped a ".ausencias-tab-restyle" para no afectar a esas categorias. */
.ausencias-tab-restyle .solicitud-table th {
    text-transform: uppercase;
}

/* ==================================================================
   TK-d83023b977f4: restyle pantalla "Mis Jornadas" (Fichajes), marca
   Arcadia.
   ================================================================== */

/* Contador "Mis Jornadas Xh Ym": el .badge generico (linea ~69 de este
   fichero) fuerza naranja !important (pensado para notificaciones del
   header) -- igual que TK-b6a95e9a6ffc hizo para Ausencias, se
   recolorea a azul Arcadia SOLO aqui. Scope a ".header-row-centrado-jornada"
   (clase unica de la cabecera de esta pantalla, dashboard/jornada/list.html.twig)
   para no tocar el badge de notificaciones ni el de otros listados
   (Reservas, Mis Fichajes...) que comparten ".badget-total-elements". */
.header-row-centrado-jornada .badget-total-elements {
    background-color: var(--arcadia-primary, #3b7de8) !important;
}

/* Badges de Estado (columna "Estado" de la tabla de Jornadas):
   ABIERTO verde, CERRADO gris -- pedido explicito del Figma. "otro"
   (p.ej. ERROR, estado no contemplado en el mockup) queda en ambar
   neutro de aviso en vez de sin color, para no perder la señal visual
   de una jornada anomala.
   TK-aaccf4b37a5d: relleno SOLIDO en vez de outline -- este badge se
   pinta tanto en Fichajes (dashboard/jornada/list.html.twig) como en
   Inicio (dashboard.html.twig incluye dashboard/jornada/_block_list.html.twig,
   mismo bloque "Mis Jornadas"), por eso un solo cambio cubre las dos
   pantallas del pedido transversal. background-color pasa a ser el color
   de estado (antes solo vivia en border-color, con un tinte claro de
   fondo); texto blanco salvo "otro" (ambar claro) que mantiene texto
   oscuro por legibilidad, mismo criterio que .estado-badge.estado-pendiente
   (linea ~3415 de este fichero) para el mismo tono de ambar. */
.jornada-badge-estado {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    border: 1px solid transparent;
}
.jornada-badge-estado--abierto {
    background-color: #4CAF50;
    color: #ffffff;
    border-color: #4CAF50;
}
.jornada-badge-estado--cerrado {
    background-color: #90A4AE;
    color: #ffffff;
    border-color: #90A4AE;
}
.jornada-badge-estado--otro {
    background-color: #f0ad4e;
    color: #333333;
    border-color: #f0ad4e;
}