/* ============================================================================
   DIALOG — Componentes de diseño para el CONTENIDO de diálogos (bootstrap-dialog)
   ----------------------------------------------------------------------------
   El chrome del diálogo (cabecera azul, pie de Aceptar/Cancelar, modal-content,
   tooltips...) ya lo tokeniza css/softline-ui.css — ver _devel/design-system.md
   §17. Este archivo es su Fase 2, deliberadamente aplazada hasta ahora: los
   componentes que aparecen DENTRO del body que cada diálogo trae por AJAX
   (smarty/templates/modules/dialog/*.tpl) — barra de pestañas internas,
   filtros, cabecera-resumen tipo ficha, barra de acciones y panel de totales.

   El body de un diálogo lo inyecta bootstrap-dialog FUERA de #sl-app (al
   final de <body>), así que estas clases van SIN el ancla #sl-app — igual que
   .sl-btn / .sl-table / .sl-toolbar / .sl-meta-label / .sl-scroll en
   softline-ui.css, con los que este archivo se combina y a los que no
   duplica: reutilízalos donde ya baste (botón → .sl-btn, tabla → .sl-table,
   barra de acciones → .sl-toolbar).

   Se carga en TODAS las pantallas, directo y el último tras softline-ui.css /
   filtros-grid.css (smarty/templates/layout/head.tpl). No pasa por
   crunch-css-js.bat: editar este archivo tiene efecto con solo recargar
   (Ctrl+F5 si el navegador cachea).
   Doc: _devel/design-system.md §17
   ============================================================================ */

/* ——— Barra de pestañas internas de un diálogo ——————————————————————————
   Re-skin ESTÁTICO de un `nav nav-tabs` de Bootstrap 3 para usar como
   cabecera de un diálogo con varias vistas (p.ej. Partes/Adjudicaciones/
   Completo/Nota). El cambio de pestaña lo sigue resolviendo el plugin `tab`
   de Bootstrap vía data-toggle="tab" — esto NO es .sl-tabs-glide (ese lleva
   glider con JS propio, ver asunto.tpl.js); aquí solo cambia el aspecto. */
.sl-dialog-tabs-bar {
  background: var(--sl-blue);
  padding: 0 .5rem;
  border-radius: var(--sl-radius-lg) var(--sl-radius-lg) 0 0;
}
.sl-dialog-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sl-dialog-tabs > li { float: none; }
.sl-dialog-tabs > li > a {
  display: flex;
  align-items: center;
  gap: .375rem;
  padding: .625rem .875rem;
  font-size: .8125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .75);
  background: transparent;
  border: none;
  border-radius: 0;
}
.sl-dialog-tabs > li > a:hover,
.sl-dialog-tabs > li > a:focus {
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border: none;
}
.sl-dialog-tabs > li.active > a,
.sl-dialog-tabs > li.active > a:hover,
.sl-dialog-tabs > li.active > a:focus {
  color: var(--sl-blue);
  background: #fff;
  border: none;
  border-radius: var(--sl-radius-sm) var(--sl-radius-sm) 0 0;
}

/* ——— Barra de filtros de un diálogo ————————————————————————————————————
   Fila de campos de filtro (fechas, selects) dentro del body. Los campos
   siguen siendo .form-control normales — su borde/radio/foco ya los da el
   restyle global de §17, así que aquí solo se resuelve el layout. */
.sl-dialog-filterbar {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: .75rem;
  padding: .75rem 1rem;
  background: var(--sl-bg-soft);
  border-bottom: 1px solid var(--sl-border);
}
.sl-dialog-filterbar__field {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

/* ——— Cabecera-resumen de un diálogo ————————————————————————————————————
   Fila de datos de solo lectura (tipo ficha) bajo la barra de filtros:
   nombre/ID/estado/etc. Los pares label+valor son .sl-meta-label /
   .sl-meta-value (softline-ui.css) — aquí solo se resuelve el layout. */
.sl-dialog-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem 1.5rem;
  padding: .75rem 1rem;
  background: #fff;
  border-bottom: 1px solid var(--sl-border);
}
.sl-dialog-summary__field {
  display: flex;
  flex-direction: column;
  gap: .125rem;
  min-width: 0;
}
.sl-dialog-summary__field--grow { flex: 1 1 auto; }

/* ——— Barra de acciones embebida ————————————————————————————————————————
   Variante de .sl-toolbar (softline-ui.css) para cuando la barra de botones
   vive DENTRO de un .sl-dialog-summary__field (con su propia .sl-label
   encima) en vez de como franja de página independiente: sin fondo ni
   borde propios, esos ya los pone el contenedor padre. */
.sl-toolbar.sl-dialog-actions {
  background: none;
  border-bottom: none;
  padding: 0;
}

/* ——— Panel de totales ——————————————————————————————————————————————————
   Fila de cifras (saldo inicial, horas sumadas/restadas...) alineada a la
   derecha bajo una tabla de listado. Mismos tokens .sl-meta-label /
   .sl-meta-value que la cabecera-resumen, en columna y alineados a la
   derecha en vez de a la izquierda. */
.sl-dialog-totales {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  padding: .75rem 1rem;
}
.sl-dialog-totales__item {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .125rem;
  min-width: 5rem;
}
.sl-dialog-totales__item .sl-meta-label { text-align: right; }
.sl-dialog-totales__item .sl-meta-value { font-size: .9375rem; }
.sl-dialog-totales__item .sl-meta-value--danger { color: var(--sl-danger); }

/* ——— Tabla con scroll interno ——————————————————————————————————————————
   Envoltorio de una .sl-table cuando el diálogo necesita limitar su alto y
   quedarse con cabecera fija (position:sticky en el <thead>, sin tocar aquí).
   Combinar con .sl-scroll (softline-ui.css) para el estilo fino de la barra
   de scroll: class="sl-dialog-table-wrap sl-scroll". */
.sl-dialog-table-wrap { max-height: 66vh; }

/* ——— Diálogo "Crear parte de guardia" (dialog.guardias.parte.tpl) —————————
   Solo este diálogo: todo cuelga de .sl-dialog-guardia-parte (raíz del body).
   .label-header-sup es position:absolute (style.css) con offset para UNA línea;
   con 4 columnas estrechas el rótulo envolvía, caía encima del input y se comía
   los clicks (no se podía escribir la duración). Aquí pasa a flujo normal. */
.guardias-ui.sl-dialog-guardia-parte .form-group.webapp-thin label.label-header-sup {
  position: static;
  top: auto;
  display: block;
  margin: 0 0 .25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.guardias-ui.sl-dialog-guardia-parte .form-group.webapp-thin input.form-control {
  position: relative;
  height: 2rem;
  padding: 0 .5rem;
}