/* ===================================================================
 * Ajustes de presentación
 *
 * Va después de mab.css y sólo pule lo que ya existe: espaciado, jerarquía
 * y agrupación. No cambia la estructura de ninguna pantalla ni mueve nada
 * de sitio, para no obligar a reaprender el programa.
 * =================================================================== */

/* --- Cabecera de página --------------------------------------------- */

.content-header h1 {
  font-size: 1.6rem;
  font-weight: 600;
  color: #2b3541;
}

/* El subtítulo explicativo, cuando la pantalla lo lleva. */
.content-header p {
  font-size: .875rem;
  margin-top: .15rem;
}

/* La cabecera derecha usaba un <h1> con tamaño forzado por estilo en
   línea, lo que dejaba el bloque de botones desalineado con el título. */
.breadcrumb {
  background: transparent;
  padding: .5rem 0;
  margin-bottom: 0;
  align-items: center;
}

.breadcrumb h1 {
  font-size: 1rem !important;
  font-weight: 500;
  margin: 0;
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* --- Tablas ---------------------------------------------------------- */

/* El encabezado era negro puro (#343a40) con letra de 15px. Se suaviza y
   se reduce para que la vista no compita con el contenido. */
table.dataTable tr th {
  font-size: .8125rem !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: .02em;
  background-color: #3d4954 !important;
  padding: .6rem .75rem !important;
}

table.dataTable td {
  font-size: .875rem !important;
  padding: .55rem .75rem !important;
  vertical-align: middle !important;
}

table.dataTable tbody tr:hover {
  background-color: #f4f6f9;
}

/* Nombres de obra largos: se permite que corten en lugar de estirar la
   tabla más allá del ancho de la pantalla. */
table.dataTable td:first-child {
  max-width: 32rem;
  white-space: normal;
  word-break: break-word;
}

/* --- Botones dentro de tablas ---------------------------------------- */

/*
 * DataTables calcula el ancho de cada columna a partir del contenido, y con
 * un botón de icono + texto lo estimaba por el icono solo: la columna
 * quedaba en 30 px y el texto se partía letra a letra, en vertical.
 *
 * Con nowrap el botón reclama el ancho que necesita y la columna se ajusta.
 */
table .btn,
table.dataTable .btn {
  white-space: nowrap;
  /*
   * inline-flex + min-width del contenido: obliga al botón a reclamar su
   * ancho intrínseco. Con inline-block a secas se quedaba en 30 px dentro de
   * la celda —el mismo botón fuera de la tabla medía 77— y el texto salía
   * partido letra a letra, en vertical.
   */
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-width: -moz-max-content;
  min-width: max-content;
}

/* Varios botones en la misma celda: que respiren y puedan bajar de línea
   en pantallas estrechas, en lugar de pegarse unos a otros. */
table.dataTable td .btn + .btn {
  margin-left: .25rem;
}

/* La columna de acciones no debe encogerse por debajo de su contenido. */
table.dataTable td:last-child {
  white-space: nowrap;
}

/* --- Botones de exportación de DataTables ---------------------------- */

/* Eran naranjas a media opacidad y con bordes redondeados de 10px, que no
   pegaban con el resto de la paleta. Se dejan discretos: son acciones
   secundarias. */
.dt-buttons .btn {
  margin-right: .35rem !important;
  border-radius: .25rem !important;
  background-color: #fff !important;
  border: 1px solid #ced4da !important;
  color: #495057 !important;
  font-size: .8125rem !important;
  padding: .25rem .6rem !important;
}

.dt-buttons .btn:hover {
  background-color: #f1f3f5 !important;
  border-color: #adb5bd !important;
}

/* --- Barra de informes ----------------------------------------------- */

/*
 * Los botones que generan PDF estaban sueltos con float:right, mezclados en
 * la misma línea que Guardar y Cancelar. Se agrupan en una barra propia,
 * separada de las acciones del formulario y capaz de partir en varias
 * líneas si no caben.
 */
.barra-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid #e9ecef;
}

.barra-acciones .separador {
  flex: 1 1 auto;
}

.barra-acciones .etiqueta-grupo {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #6c757d;
  margin-right: .25rem;
}

/* --- Estado vacío ---------------------------------------------------- */

.sin-datos {
  text-align: center;
  color: #6c757d;
  padding: 2.5rem 1rem;
}

.sin-datos i {
  font-size: 2rem;
  opacity: .35;
  display: block;
  margin-bottom: .5rem;
}

/* --- Migas de navegación entre niveles -------------------------------- */

/* La línea de "Volver a obras · Obra: X" del desglose en dos niveles. */
#listadoinspecciones > .mb-3 {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  padding: .6rem .85rem;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: .3rem;
  margin-bottom: 1rem !important;
}

#obra_elegida {
  color: #2b3541;
}

/* --- Formularios ------------------------------------------------------ */

/* mab.css fuerza 15px de margen inferior a todo input y select del
   formulario, lo que separa demasiado las filas de evaluación. Dentro de
   las tablas se recupera un espaciado normal. */
table form input,
table input.form-control,
table select.form-control {
  margin-bottom: 0 !important;
}

/* La tabla de evaluación por subsegmentos es densa: se compacta un poco
   para que quepan más filas sin desplazar. */
#detalles .form-control,
#footer .form-control {
  height: calc(1.5em + .5rem + 2px);
  padding: .25rem .5rem;
  font-size: .875rem;
}

#detalles_head th {
  font-size: .75rem;
  font-weight: 600;
  background-color: #3d4954;
  color: #fff;
  vertical-align: middle;
  padding: .5rem .4rem;
}

/* --- Pantalla de configuración ---------------------------------------- */

#panel_config .card-title {
  font-size: 1rem;
  font-weight: 600;
}

#panel_config .text-muted {
  font-size: .8125rem;
}

#tbl_columnas input[type="text"] {
  font-weight: 500;
}

#tbl_columnas small {
  font-size: .7rem;
  font-family: monospace;
}

/*
 * Componente excluido en ese tramo, en la rejilla de cumplimiento. Ocupa las
 * dos columnas del componente (evaluación y observación) y lleva sus valores
 * en campos ocultos, para que se envíen y no desalineen las filas. Antes era
 * un select de una sola opción, tan estrecho que sólo se leía "E:".
 */
td.celda-excluida {
  background-color: #eceff1;
  color: #5f6b75;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-align: center;
  vertical-align: middle;
  cursor: default;
}

/*
 * Ayuda contextual: el "?" junto a un rótulo. El texto sale al pasar el
 * ratón, al llegar con el tabulador o al tocarlo en una pantalla táctil.
 * Lo pintan ayuda() en PHP (vistas/recursos.php) y en JavaScript (ui.js).
 */
.ayuda {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  margin-left: .3rem;
  border-radius: 50%;
  background-color: #17a2b8;
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: middle;
  cursor: help;
  user-select: none;
}

.ayuda:hover,
.ayuda:focus {
  background-color: #0f6674;
  outline: none;
  box-shadow: 0 0 0 .15rem rgba(23, 162, 184, .35);
}

.tooltip-inner {
  max-width: 320px;
  text-align: left;
  /* Cada línea de la ayuda en su renglón. */
  white-space: pre-line;
}

/*
 * mab.css (heredado) deja a la vista el checkbox nativo de los de Bootstrap
 * (.custom-control-input), encima del que dibuja Bootstrap: se veían dos
 * casillas superpuestas, como en el diálogo de exclusiones.
 */
.custom-control-input {
  opacity: 0 !important;
  z-index: -1 !important;
}

/*
 * Las tablas anchas (Obras tiene diez columnas) se desplazan dentro de su
 * recuadro en vez de ensanchar la página entera.
 */
.dataTables_wrapper {
  overflow-x: auto;
}

/*
 * Iniciales del usuario en el menú lateral. Antes era su foto de Google:
 * desde que se quitó ese acceso, la foto salía rota o vacía.
 */
.avatar-iniciales {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background-color: #e85d2a;
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .03em;
}

.tooltip.show {
  opacity: .95;
}