/*CSS for the navbar from url(https://www.codingnepalweb.com/hover-animation-in-html-css/) with ChatGPT adjustments
/* Google Fonts Import Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  align-content: center;
}
/* Solo layout antiguo (navbar centrada). Con sidebar, body.layout-with-sidebar evita height:100vh
   (bugs WebKit con position:fixed en .modal-backdrop / .modal). Ver layout-shell.css */
body:not(.layout-with-sidebar) {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: #f6f6f6;
  padding-top: 70px;
}

/* Anula * { align-content: center } en la pila Bootstrap (modales, backdrop); aplica en todas las vistas */
.modal,
.modal-dialog,
.modal-content,
.modal-backdrop {
  align-content: normal;
}

/* Asegurar que el contenedor de la tabla no tenga restricciones de ancho */
.table-responsive {
  width: 100%;
}

/* Logo del menú */
.logo-img {
  height: 40px; /* Aumentar la altura del logo */
}

/* Fase 6.1: eliminado .custom-navbar (sin clase en plantillas; sidebar en layout-shell.css). */

.navbar-nav .nav-item {
  list-style: none;
  margin: 0 20px; /* Espaciado horizontal entre elementos */
}

.navbar-nav .nav-link {
  position: relative;
  color: white !important;
  font-size: 18px;
  font-weight: 500;
  padding: 6px 0;
  text-decoration: none;
  transition: color 0.3s ease;
}

/* Efecto hover de subrayado */
.navbar-nav .nav-link::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: #cc1212;
  border-radius: 12px;
  transition: width 0.4s var(--ui-ease-out, ease-out);
}

.navbar-nav .nav-link:hover::before {
  width: 100%;
}

/* Fase 6.1: eliminado .nav-item.upward (grep=0 en templates+JS). */
/* Fase 6.1: eliminado .navbar-toggler (grep=0; sidebar sustituyó navbar clásico). */

/* Ajuste para el botón "Maquinaria" */
.nav-item.dropdown .nav-link {
  position: relative; /* Necesario para animaciones con ::before */
  color: white; /* Mismo color que el resto del menú */
  font-size: 18px; /* Tamaño consistente */
  font-weight: 500; /* Peso consistente */
  padding: 6px 20px; /* Espaciado igual que otros enlaces */
  text-decoration: none; /* Sin subrayado */
  transition: color 0.3s ease; /* Suavidad al cambiar el color */
}

/* Subrayado animado para "Maquinaria" */
.nav-item.dropdown .nav-link::before {
  content: ''; /* Línea animada */
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: -5px; /* Inicialmente fuera del elemento */
  left: 0;
  background: #cc1212; /* Color del subrayado */
  border-radius: 12px;
  opacity: 0; /* Invisible por defecto */
  transition:
    bottom 0.4s var(--ui-ease-out, ease-out),
    opacity 0.4s var(--ui-ease-out, ease-out);
}

.nav-item.dropdown .nav-link:hover::before {
  bottom: 0; /* Aparece justo debajo del texto */
  opacity: 1; /* Hacer visible */
}

/* Hover adicional para el texto */
.nav-item.dropdown .nav-link:hover {
  color: #cc1212; /* Cambiar el color del texto al pasar el mouse */
}

/* Dropdown del navbar superior (Maquinaria, etc.): aspecto + posición en un solo bloque */
.dropdown-menu {
  background-color: #444444; /* Mismo fondo que el navbar */
  border: none;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  padding: 0;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.5rem;
  transform: none;
}

.dropdown-menu .dropdown-item {
  color: white; /* Mismo color que el resto del menú */
  font-size: 18px; /* Tamaño consistente */
  font-weight: 500; /* Peso consistente */
  padding: 6px 20px; /* Igual que los enlaces del navbar */
  text-decoration: none; /* Sin subrayado */
  transition: background-color 0.3s ease, color 0.3s ease; /* Transiciones suaves */
}

/* Hover para las opciones del dropdown */
.dropdown-menu .dropdown-item:hover {
  background-color: #cc1212; /* Color de hover consistente */
  color: white; /* Texto blanco al hacer hover */
}

/* Alineación específica del menú dropdown */
.nav-item.dropdown {
  position: relative; /* Asegura la posición relativa del contenedor */
}

/* Dropdown en hover (no menú usuario): oculto por defecto; visible al hover */
.nav-item.dropdown:not(.user-dropdown-no-hover) .dropdown-menu {
  opacity: 0;
  visibility: hidden;
}

.nav-item.dropdown:not(.user-dropdown-no-hover):hover .dropdown-menu {
  display: block;
  margin-top: 0;
  transition: opacity 0.2s ease-in-out;
  opacity: 1;
  visibility: visible;
}

/* Estilo base de la flecha (apuntando hacia arriba) */
.nav-item.dropdown > .nav-link::after {
  content: '▲';
  font-size: 0.7em;
  margin-left: 0.4em;
  color: white;
  transition: transform 0.3s ease;
  display: inline-block; /* Para asegurar que transform funcione correctamente */
}

/* Rotar flecha para menús normales en hover (excluyendo el menú de usuario) */
.nav-item.dropdown:not(.user-dropdown-no-hover):hover > .nav-link::after {
  transform: rotate(180deg); /* ▲ gira a ▼ */
}

/* Rotar flecha para el menú de usuario cuando está abierto (controlado por Bootstrap via click) */
.nav-item.dropdown.user-dropdown-no-hover > .nav-link[aria-expanded="true"]::after {
  transform: rotate(180deg); /* ▲ gira a ▼ */
}

/* Fase 6.1: eliminados .custom-button, .button-container (grep=0). */

/* Form Uiverse (alexruix): .form-box, .title, .subtitle, .input, .form-section retirados — grep=0. */
.form {
  position: relative;
  flex-direction: column;
  padding: 1px 24px 24px;
  gap: 5px;
  text-align: center;
}

/*Inputs box*/
.form-container {
  overflow: hidden;
  border-radius: 8px;
  background-color: #fff;
  margin: 1rem 0 .5rem;
  width: 100%;
}

/*Button
  Legacy: no invadir componentes del sistema visual `.ui-*` dentro de formularios.
*/
.form button:not([class^="ui-"]):not([class*=" ui-"]) {
  background-color: #cc1212;
  color: #fff;
  border: 0;
  border-radius: 24px;
  padding: 10px 16px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .3s ease;
}

/* Ajusta la altura de la progress bar */
.progress {
  height: 6px;
  border-radius: 3px;
}

.text-muted {
  color: #212529 !important;
}

/* Badges contorno: base común + color por tipo (tarjeta activo / ui_config `badge_class`) */
.badge-outline-fecha,
.badge-outline-itv,
.badge-outline-horas,
.badge-outline-coste {
  background-color: transparent;
  border: 1px solid;
  font-weight: 500;
  padding: 0.4em 0.55em;
  line-height: 1.25;
  vertical-align: middle;
}
.badge-outline-fecha {
  color: #212529;
  border-color: #212529;
}
.badge-outline-itv {
  color: #649f21;
  border-color: #649f21;
}
/* Km/horas/uso — sin estas reglas el span solo tenía `.badge` BS y casi no se veía */
.badge-outline-horas {
  color: #0d6efd;
  border-color: #0d6efd;
}
/* Importes / neumáticos */
.badge-outline-coste {
  color: #b45309;
  border-color: #d97706;
}

.badge-itv-vencida {
  background-color: #c51d34 !important; /* Fondo rojo claro */
  color: #fff !important; /* Texto negro */
  border: 1px solid #c51d34 !important; 
}

.badge-itv-hoy {
  background-color: transparent !important; 
  color: #da6027 !important; /* Texto negro */
  border: 1px solid #da6027 !important; 
}

.card-img-top {
  width: 100%; /* Asegura que el ancho sea igual al contenedor */
  height: 200px; /* Establece una altura fija */
  object-fit: cover; /* Ajusta la imagen sin deformarla */
}

/* Hover y cursor: ver .tarjeta-activo.ui-card en ui-system.css */

/* Producción · Contratos · Paso 0 (selector) simplificado: icono grande centrado */
.ui-select-card.ui-select-card--icon-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center !important;
  gap: 0.75rem;
}

.ui-select-card.ui-select-card--icon-center .ui-select-card__check {
  display: none;
}

.ui-select-card.ui-select-card--icon-center .ui-select-card__media {
  font-size: 2.25rem;
  line-height: 1;
  margin: 0;
}

.ui-select-card.ui-select-card--icon-center .ui-select-card__body {
  display: grid;
  gap: 0.25rem;
  justify-items: center;
}

.ui-select-card.ui-select-card--icon-center .ui-select-card__title {
  font-size: 1.05rem;
}



/* From Uiverse.io by AbanoubMagdy1 - Toggle Switch*/
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 8em; /* Aumentar tamaño para que el texto quepa */
  height: 2em;
}

/* Ocultar checkbox predeterminado */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Slider principal */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f5aeae;
  transition: .4s;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.5em; /* Espaciado interno para el texto */
  font-size: 0.8em;
  color: white;
  font-weight: bold;
  overflow: hidden;
}

/* Círculo deslizante */
.slider::before {
  content: "";
  position: absolute;
  height: 1.8em;
  width: 1.8em;
  border-radius: 50%;
  background-color: #DC3535;
  left: 0.3em;
  bottom: 0.3em;
  transition: .4s;
}

/* Texto para modo gráfico (default) */
.slider::after {
  content: "Ver listado";
  position: absolute;
  right: 1em;
  font-size: 0.9em;
  color: white;
  transition: .4s;
}

/* Cambios al estar activo */
input:checked + .slider {
  background-color: #9ed99c;
}

input:checked + .slider::before {
  transform: translateX(7.5em); /* Ajustar al tamaño del toggle */
  background-color: #379237;
}

input:checked + .slider::after {
  content: "Modo gráfico";
  left: 1em; /* Cambia la posición del texto */
  right: auto;
}


.modal-header:not(.ui-modal-header) {
  margin-bottom: 1px; /* Reduce espacio inferior */
}

.bi-pencil-square:hover,
.bi-paperclip:hover,
.bi-trash:hover {
  color: #cc1212;
}

/* Restaurar estilo base para el botón del acordeón (+ ancla para .badge-acordeon) */
.accordion-button {
  position: relative;
  background-color: #ffffff !important; /* Fondo blanco */
  color: #444444 !important; /* Texto oscuro */
  border: none !important; /* Sin bordes */
  box-shadow: none !important; /* Sin sombras adicionales */
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; /* Transiciones suaves */
}

/* Estilo cuando está abierto */
.accordion-button:not(.collapsed) {
  color: #444444 !important; /* Texto oscuro */
}


/* Flecha del acordeón */
.accordion-button::after {
  color: #444444 !important; /* Color de la flecha */
  transition: transform 0.2s ease-in-out; /* Suavidad en el giro */
}

/* Flecha al estar abierto */
.accordion-button:not(.collapsed)::after {
  transform: rotate(-180deg); /* Gira la flecha */
}

/* Estilo del contenedor del acordeón */
.accordion-item {
  border: 1px solid #ddd !important; /* Borde gris claro */
  border-radius: 0.25rem !important; /* Bordes ligeramente redondeados */
  margin-bottom: 0.5rem; /* Separación entre items */
}

/* Estilo del contenido al expandir */
.accordion-collapse {
  background-color: #ffffff !important; /* Fondo blanco */
  padding: 1rem !important; /* Espaciado interno */
  border-top: 1px solid #ddd !important; /* Borde superior para separar */
}

.accordion-button .badge {
  font-size: 0.8rem; /* Tamaño reducido */
  font-weight: 500; /* Negrita ligera */
  padding: 0.4rem 0.6rem; /* Espaciado interno */
  border-radius: 0.25rem; /* Bordes redondeados */
  color: #ffffff; /* Texto blanco */
}

/* Dropzones visuales: .ui-dropzone / .ui-batch-dropzone en static/css/ui-system.css */

/**
 * Quitar archivo en preview Dropzone (paso 2 documentación del wizard activo, neumáticos, etc.).
 * Alineado a tokens `--ui-*` (ui-system.css): neutro por defecto, acento danger solo en hover.
 */
.btn-remove {
    box-sizing: border-box;
    background: var(--ui-surface, #fff);
    border: 1px solid var(--ui-border, #e5e7eb);
    color: var(--ui-text-muted, #6b7280);
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    min-width: 28px;
    min-height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.btn-remove:hover {
    color: var(--ui-danger, #dc2626);
    border-color: var(--ui-danger-chip-border, rgba(220, 38, 38, 0.28));
    background: var(--ui-danger-muted, rgba(220, 38, 38, 0.1));
}

/* Estilos para archivos existentes */
.preview-container.archivo-existente {
    background: #e8f5e8;
    border-color: #28a745;
    border-left: 4px solid #28a745;
}

.preview-container.archivo-existente .preview-filename {
    color: #155724;
    font-weight: 600;
}

.preview-container.archivo-existente .btn-remove {
    color: var(--ui-text-muted, #6b7280);
    background: var(--ui-surface, #fff);
    border: 1px solid var(--ui-border, #e5e7eb);
}

.preview-container.archivo-existente .btn-remove:hover {
    color: var(--ui-danger, #dc2626);
    border-color: var(--ui-danger-chip-border, rgba(220, 38, 38, 0.28));
    background: var(--ui-danger-muted, rgba(220, 38, 38, 0.1));
}

/* Centrado de líneas en preview (wizard / documentación) */
.preview-content .preview-filename .pf-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.badge.bg-danger,
.badge.bg-warning {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

/* Badge del acordeón pegado a la flecha (≈10px a la izquierda) */
.badge-acordeon {
  position: absolute;
  right: 2.25rem; /* espacio donde Bootstrap pinta la flecha del acordeón */
  margin-right: 15px; /* ~10px a la izquierda de la flecha */
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
}

/* Estilo para modal más grande que xl pero no fullscreen */
.modal-super-xl {
  max-width: 90vw; /* O el valor que prefieras */
  width: 90vw;
  margin: 1.75rem auto; /* Centrado y espaciado superior */
}


/* Estilos para la columna de observaciones */
.col-observaciones {
    max-width: 300px; /* Un ancho máximo generoso */
    min-width: 150px; /* Un ancho mínimo para que no se comprima demasiado */
    white-space: normal; /* Asegura que el texto se divida en líneas */
    word-wrap: break-word; /* Para navegadores antiguos */
    overflow-wrap: break-word; /* Estándar moderno para dividir palabras largas */
}

/* Estilo para añadir un icono de lupa a Tom-Select */
.ts-control {
    position: relative;
    padding-left: 2.5rem !important; /* Añadir espacio para el icono */
}

.ts-control::before {
    content: "\f002"; /* Código de la lupa de Font Awesome */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0.75rem;
    top: 62%;
    transform: translateY(-50%);
    color: #ced4da; /* Un color de icono sutil */
    pointer-events: none; /* Asegura que no interfiera con el clic */
}

/* Cambia el color del icono y el borde cuando el campo está activo */
.ts-control.focus {
    border-color: #cc1212 !important;
    box-shadow: 0 0 0 0.2rem rgba(204, 18, 18, 0.25) !important;
}

.ts-control.focus::before {
    color: #cc1212 !important; /* Color más vivo al enfocar */
}

/* Estilo para las opciones del desplegable de Tom-Select */
.ts-dropdown .option {
    font-size: 0.9rem; /* Texto un poco más pequeño */
    text-align: left !important; /* Asegurar alineación a la izquierda */
    padding: 8px 12px; /* Padding estándar para las opciones */
}

/* Aumentar la altura del desplegable de Tom-Select para mostrar más opciones */
.ts-dropdown .ts-dropdown-content {
    max-height: 300px !important;
}


.ts-wrapper .clear-button {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;           /* área clicable más grande */
  height: 28px;
  line-height: 28px;
  font-size: 1.75rem;    /* X más grande */
  color: #6c757d;
  opacity: 0.9;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ts-wrapper .clear-button:hover {
  color: #cc1212;
  opacity: 1;
}


/* Cursor en pasos del asistente de activos (class en ui/_stepper vía ui_stepper_item_extra_class). */
.wizard-step-link {
    cursor: pointer;
}

/* Teselas de selección del asistente: `.ui-wizard-pick` en `ui-system.css` (tokens `--ui-*`). */

/* Enmarcado de grupos de selección (Tipo, Estado, Sistema de movimiento) */
.wizard-group {
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 12px 16px;
  background-color: #ffffff;
}

.wizard-group .form-label {
  display: block;
  font-weight: 600;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #eee;
}

.wizard-group .ui-wizard-pick {
  margin-top: 6px;
}


/* Tom Select + Bootstrap form-floating (un bloque: layout + hueco clear_button a la derecha) */
.form-floating:has(.ts-wrapper) {
  position: relative;
}

.form-floating:has(.ts-wrapper) .ts-wrapper {
  width: 100%;
}

.form-floating:has(.ts-wrapper) .ts-control {
  min-height: calc(3.5rem + 2px) !important; /* altura estándar form-floating */
  padding-top: 1.25rem !important; /* espacio al label flotante */
  padding-bottom: 0.375rem !important;
  padding-right: 2.75rem !important; /* área clic TomSelect clear_button (.ts-wrapper .clear-button) */
  border-radius: 0.375rem !important; /* igual que .form-control */
  height: calc(3.5rem + 2px) !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important; /* evita crecer en altura */
}

/* Evitar saltos de línea en selección única y truncar texto largo */
.ts-wrapper.single .ts-control .item {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

/* Limitar altura interna si TomSelect intenta crecer con múltiples spans */
.ts-wrapper.single .ts-control {
  flex-wrap: nowrap !important;
}

/* Ajuste de padding del contenedor interno para mantener altura constante */
.ts-wrapper.single .ts-control > div,
.ts-wrapper.single .ts-control > .item {
  line-height: 1.2 !important;
}

.form-floating:has(.ts-wrapper) > label {
  position: absolute;
  top: 0.375rem;
  /* left: 0.75rem; */
  height: auto;
  padding: 0.5rem 0.75rem;
  pointer-events: none;
  transform-origin: 0 0;
  transition: opacity .1s ease-in-out, transform .1s ease-in-out;
  background: transparent;
}

/* Cuando hay valor o foco, flotar el label como Bootstrap */
.form-floating.is-focused > label,
.form-floating.is-filled > label {
  opacity: .65;
  transform: scale(.85) translateY(-.5rem) translateX(.15rem);
}

/* Ajustes visuales del dropdown para que conecte con el control */
.ts-dropdown {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

/* --- BS5 form-floating: elevar label cuando el campo está inválido --- */
/* Inputs y selects nativos */
.form-floating > .form-control.is-invalid ~ label,
.form-floating > .form-select.is-invalid ~ label,
.was-validated .form-floating > .form-control:invalid ~ label,
.was-validated .form-floating > .form-select:invalid ~ label {
  opacity: .65;
  transform: scale(.85) translateY(-.5rem) translateX(.15rem);
}

/* Tom Select: elevar label si el <select> original está inválido */
.form-floating:has(select.is-invalid) > label,
.was-validated .form-floating:has(select:invalid) > label {
  opacity: .65;
  transform: scale(.85) translateY(-.5rem) translateX(.15rem);
}

/* ===========================================
   ESTILOS PARA ACORDEONES DE MANTENIMIENTOS
   =========================================== */

/* Contenedor principal de la lista de mantenimientos */
.maintenance-list {
  padding: 0;
}

/* Item individual de mantenimiento */
.maintenance-item {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6 !important;
  transition:
    background-color var(--ui-motion-duration-md) var(--ui-ease-out, ease-out),
    border-color var(--ui-motion-duration-md) var(--ui-ease-out, ease-out),
    box-shadow var(--ui-motion-duration-md) var(--ui-ease-out, ease-out);
  position: relative;
  overflow: hidden;
}

/* Cabecera clickeable de cada ítem (detalle móvil / listados mantenimiento) */
.maintenance-header {
  transition: background-color var(--ui-motion-duration-md) var(--ui-ease-out, ease-out);
  border-bottom: 1px solid #dee2e6;
  padding-bottom: 0.5rem;
}

.maintenance-header:hover {
  background-color: #e9ecef;
}

/* Icono de flecha para indicar colapso */
.maintenance-chevron {
  transition: transform var(--ui-motion-duration-md) var(--ui-ease-out, ease-out);
  color: #6c757d;
  cursor: pointer;
  flex-shrink: 0;
}

.maintenance-header[aria-expanded="true"] .maintenance-chevron {
  transform: rotate(180deg);
}

/* Contenido colapsable */
.maintenance-details {
  border-top: 1px solid #dee2e6;
  background-color: #fff;
  margin-top: 0.75rem;
}

.maintenance-item:hover {
  background-color: #e9ecef;
  border-color: #adb5bd !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.maintenance-info {
  flex: 1;
}

.maintenance-date {
  font-size: 0.9rem;
  color: #0d6efd;
}

.maintenance-type {
  font-size: 0.85rem;
  color: #495057;
  font-weight: 500;
}

.maintenance-workshop {
  font-size: 0.8rem;
  color: #6c757d;
}

/* Fase 6.1: eliminado .maintenance-reference (grep=0). */

.maintenance-amount {
  font-size: 1rem;
  color: #198754;
  white-space: nowrap;
}

/* Sección de observaciones unificada */
.maintenance-observations {
  background-color: #fff;
  border: 1px solid #e9ecef;
  border-radius: 0.375rem;
  padding: 0.75rem;
  margin: 0.9rem 0 0 0;
  max-width: 100%;
}

.maintenance-observations strong {
  color: #495057;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.maintenance-observations p {
  color: #212529;
  font-size: 0.85rem;
  line-height: 1.4;
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Botón de factura dentro de observaciones */
.maintenance-observations .maintenance-invoice {
  margin-top: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.maintenance-observations .maintenance-invoice .btn {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  white-space: nowrap;
}

/* Sección de factura */
.maintenance-invoice {
  margin-top: 0.5rem;
}

.maintenance-invoice .btn {
  font-size: 0.8rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  transition:
    transform var(--ui-motion-duration-md) var(--ui-ease-out, ease-out),
    box-shadow var(--ui-motion-duration-md) var(--ui-ease-out, ease-out),
    background-color var(--ui-motion-duration-md) var(--ui-ease-out, ease-out),
    border-color var(--ui-motion-duration-md) var(--ui-ease-out, ease-out),
    color var(--ui-motion-duration-md) var(--ui-ease-out, ease-out);
}

.maintenance-invoice .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.maintenance-invoice .btn i {
  font-size: 0.75rem;
}

/* Responsive design para móviles */
@media (max-width: 768px) {
  .maintenance-header {
    flex-direction: column;
    align-items: flex-start !important;
    padding: 1rem !important;
  }
  
  .maintenance-info {
    margin-bottom: 0.5rem;
    width: 100%;
  }
  
  .maintenance-amount {
    align-self: flex-end;
    margin-top: 0.25rem;
  }
  
  .maintenance-item {
    margin-bottom: 0.75rem !important;
  }
  
  .maintenance-observations {
    padding: 0.5rem;
  }
  
  /* En móviles, el botón de factura va debajo del texto */
  .maintenance-observations .d-flex {
    flex-direction: column;
    align-items: flex-start !important;
  }
  
  .maintenance-observations .maintenance-invoice {
    margin-top: 0.5rem;
    margin-left: 0 !important;
    align-self: flex-end;
  }
  
  /* Ajustar el chevron en móviles */
  .maintenance-header .d-flex {
    width: 100%;
    justify-content: space-between;
  }
}

/* Estados especiales */
.maintenance-item:last-child {
  margin-bottom: 0 !important;
}

/* Iconos para diferentes tipos de mantenimiento */
.maintenance-type::before {
  content: "🔧 ";
  margin-right: 0.25rem;
}

/* Iconos específicos por tipo de sección */
[data-section="neumaticos"] .maintenance-type::before {
  content: "🛞 ";
}

[data-section="repostajes"] .maintenance-type::before {
  content: "⛽ ";
}

/* Estilos específicos para neumáticos */
.maintenance-item[data-type="neumatico"] {
  border-left: 4px solid #ffc107;
}

.maintenance-item[data-type="neumatico"] .maintenance-date {
  color: #ffc107;
}

/* Estilos específicos para repostajes */
.maintenance-item[data-type="repostaje"] {
  border-left: 4px solid #17a2b8;
}

.maintenance-item[data-type="repostaje"] .maintenance-date {
  color: #17a2b8;
}

/* Estilos específicos para mantenimientos */
.maintenance-item[data-type="mantenimiento"] {
  border-left: 4px solid #0d6efd;
}

.maintenance-item[data-type="mantenimiento"] .maintenance-date {
  color: #0d6efd;
}

/* Mejoras de accesibilidad */
.maintenance-item:focus-within {
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
}

.maintenance-invoice .btn:focus {
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* Sticky header para tablas Bootstrap table-striped */
.table-striped thead {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f8f9fa;
  box-shadow: 0 1px 0 0 #dee2e6;
}

/* Fase 6.1: eliminado .table-striped thead.table-dark (grep=0 en templates+JS). */

.table-striped thead th {
  background: inherit;
}

/* Badges estilo Stripe (listados admin / planificador; tablas → ui-system `.ui-table`) */
.stripe-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  border: 1px solid;
  transition:
    transform var(--ui-motion-duration-sm) var(--ui-ease-out, ease-out),
    box-shadow var(--ui-motion-duration-sm) var(--ui-ease-out, ease-out),
    border-color var(--ui-motion-duration-sm) var(--ui-ease-out, ease-out);
}

.stripe-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Badge con tamaño fijo para consistencia */
.stripe-badge--fixed {
  width: 170px;
  justify-content: center;
}

/* Badge pequeño para neumáticos */
.stripe-badge--small {
  padding: 2px 8px;
  font-size: 11px;
  min-width: 80px;
  width: auto;
}

/* Variantes de color para badges Stripe (planificador reutiliza info/success en estados scheduled/done) */
.stripe-badge--info,
.stripe-badge--estado-scheduled {
  background-color: #dbeafe;
  color: #1e40af;
  border-color: #93c5fd;
}

.stripe-badge--success,
.stripe-badge--estado-done {
  background-color: #dcfce7;
  color: #166534;
  border-color: #86efac;
}

/* Fase 6.1: eliminados stripe-badge--warning, --danger, --primary (grep=0). */

/* Secundario y estado planificador «cancelled»: misma paleta neutra */
.stripe-badge--secondary,
.stripe-badge--estado-cancelled {
  background-color: #f3f4f6;
  color: #374151;
  border-color: #d1d5db;
}

/* Alertas usuario: base compartida; «enabled» añade tick vía ::before */
.stripe-badge--alerts-enabled,
.stripe-badge--alerts-disabled {
  background-color: #f3f4f6;
  color: #6b7280;
  border-color: #d1d5db;
}

.stripe-badge--alerts-enabled {
  position: relative;
  padding-left: 24px;
}

.stripe-badge--alerts-enabled::before {
  content: "✓";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  color: #10b981;
  font-weight: bold;
  font-size: 10px;
}

/* Roles empleado, super-admin y dominios de taller: misma paleta */
.stripe-badge--rol-supervisor,
.stripe-badge--rol-maquinista,
.stripe-badge--rol-chofer,
.stripe-badge--rol-operario,
.stripe-badge--rol-mecanico,
.stripe-badge--rol-super-admin,
.stripe-badge--dominio-vehiculo,
.stripe-badge--dominio-maquina,
.stripe-badge--dominio-remolque,
.stripe-badge--dominio-implemento {
  background-color: #f0f9ff;
  color: #0c4a6e;
  border-color: #7dd3fc;
}

.stripe-badge--rol-admin {
  background-color: #fdf4ff;
  color: #86198f;
  border-color: #d8b4fe;
}

.stripe-badge--rol-usuario {
  background-color: #ecfdf5;
  color: #065f46;
  border-color: #6ee7b7;
}

/* Badges específicos para estados del planificador */
.stripe-badge--estado-pending {
  background-color: #fef3c7;
  color: #92400e;
  border-color: #fcd34d;
}

.stripe-badge--estado-in_progress {
  background-color: #dbeafe;
  color: #1e3a8a;
  border-color: #60a5fa;
}

/* Fase 6.1: eliminados stripe-badge--prioridad-{low,medium,high} (grep=0 en templates+JS). */

@media (max-width: 768px) {
  .stripe-badge {
    padding: 3px 8px;
    font-size: 11px;
  }
}

/* Compartido por #componentes-detalle y transiciones UI (tablas canónicas: `ui-system.css` `.ui-table`). */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== ESTILOS PARA COMPONENTES DE MANTENIMIENTO (#componentes-detalle) ===== */

/* Contenedor principal de componentes */
#componentes-detalle {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 12px;
  padding: 2rem;
  margin: 1rem 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  animation: fadeInUp var(--ui-motion-duration-lg) var(--ui-ease-out, ease-out);
}

/* Tarjetas de componentes */
#lista-componentes .card {
  transition:
    transform var(--ui-motion-duration-md) var(--ui-ease-out, ease-out),
    box-shadow var(--ui-motion-duration-md) var(--ui-ease-out, ease-out);
  border-radius: 12px;
  overflow: hidden;
  background: white;
}

#lista-componentes .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Headers de las tarjetas con gradientes */
#lista-componentes .card-header.bg-primary {
  background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%) !important;
}

#lista-componentes .card-header.bg-danger {
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
}

#lista-componentes .card-header.bg-info {
  background: linear-gradient(135deg, #0dcaf0 0%, #0aa2c0 100%) !important;
}

#lista-componentes .card-header.bg-secondary {
  background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%) !important;
}

/* Badges de contador */
#lista-componentes .badge {
  border-radius: 20px;
  font-weight: 600;
  padding: 0.5rem 0.75rem;
}

/* Items de componentes */
#lista-componentes .list-group-item {
  border: none;
  background: transparent;
  padding: 0.75rem 0;
  border-bottom: 1px solid #f1f3f4;
}

#lista-componentes .list-group-item:last-child {
  border-bottom: none;
}

/* Checkboxes personalizados */
#lista-componentes .form-check-input:checked {
  background-color: #28a745;
  border-color: #28a745;
}

#lista-componentes .form-check-input:checked:focus {
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

/* Estado vacío mejorado */
#lista-componentes .text-center.py-5 {
  background: white;
  border-radius: 12px;
  padding: 3rem 2rem !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Botón de volver mejorado */
#componentes-detalle .btn-outline-secondary {
  border-radius: 8px;
  font-weight: 500;
  transition:
    transform var(--ui-motion-duration-md) var(--ui-ease-out, ease-out),
    box-shadow var(--ui-motion-duration-md) var(--ui-ease-out, ease-out);
}

#componentes-detalle .btn-outline-secondary:hover {
  transform: translateX(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Responsive design */
@media (max-width: 768px) {
  #componentes-detalle {
    padding: 1rem;
    margin: 0.5rem 0;
  }
  
  #lista-componentes .col-md-6 {
    margin-bottom: 1rem;
  }
  
  #componentes-detalle .d-flex {
    flex-direction: column;
    align-items: flex-start !important;
  }
  
  #componentes-detalle .d-flex > div:last-child {
    margin-top: 1rem;
  }
}

/* ── Filtros colapsables: chevron animado ── */
.filtros-chevron {
  transition: transform var(--ui-motion-duration-lg) var(--ui-ease-out, ease-out);
}

/* Fase 6.1: selector método/origen → .ui-method-card en static/css/ui-system.css */

/* Badges IA junto a campos (sugerido vs no detectado) */
.badge-ia,
.badge-ia-warning {
  font-size: 0.6rem;
  vertical-align: middle;
  margin-left: 0.25rem;
}
.badge-ia {
  letter-spacing: 0.05em;
}

/* Borde de aviso para campos requeridos no detectados */
.border-warning {
  border-color: var(--bs-warning) !important;
}

/* Fase 6.1: eliminados .fq-card-* y .fq-filename (JS usa filas/badges; grep=0). */

/* ── Cola de facturas: icono de colapso ──────────────────────────────── */
.fq-collapse-icon {
  transition: transform var(--ui-motion-duration-md) var(--ui-ease-out, ease-out);
}

/* ── Cola de facturas: animaciones real-time ─────────────────────────── */

/* Pulso suave para filas en espera/procesando */
.fq-row-pending {
  animation: fqPulse 2s ease-in-out infinite;
}
@keyframes fqPulse {
  0%, 100% { background-color: transparent; }
  50%      { background-color: rgba(255, 193, 7, 0.06); }
}

/* Slide-in al insertar nuevas filas */
.fq-row-slidein {
  animation: fqSlideIn 0.4s ease-out;
}
@keyframes fqSlideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Highlight verde al pasar a "Lista" */
.fq-row-highlight {
  animation: fqHighlight 1.5s ease-out;
}
@keyframes fqHighlight {
  0%   { background-color: rgba(25, 135, 84, 0.18); }
  100% { background-color: transparent; }
}

/* Fade-out al eliminar una fila */
.fq-row-fadeout {
  animation: fqFadeOut 0.3s ease-out forwards;
}
@keyframes fqFadeOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(20px); }
}

/* Transición suave del badge de estado */
.fq-badge-estado {
  transition:
    background-color var(--ui-motion-duration-md) var(--ui-ease-out, ease-out),
    color var(--ui-motion-duration-md) var(--ui-ease-out, ease-out),
    border-color var(--ui-motion-duration-md) var(--ui-ease-out, ease-out),
    transform var(--ui-motion-duration-md) var(--ui-ease-out, ease-out),
    box-shadow var(--ui-motion-duration-md) var(--ui-ease-out, ease-out);
}

/*
 * Wizard obra / modal producción — estilo premium (6.1.d).
 * Clases retiradas con grep=0 en oleadas previas: .obra-premium-control--xl, .obra-btn-ghost,
 * .obra-form-section-card--summary, .obra-wizard-step-link, .obra-desc-details > summary { list-style },
 * .activo-wizard-root .obra-wizard-panels-card (marcado usa activo-wizard-panels-card).
 */
.obra-wizard-shell {
  background: #f7f8fa;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
/* Cabecera + stepper sobre fondo blanco (referencia tipo “sheet”); la X sigue en el chrome del modal host. */
.obra-wizard-top-sheet {
  background: #fff;
  padding: 1.25rem 1.5rem 1.35rem;
  border-bottom: 1px solid #eef0f3;
  flex-shrink: 0;
}
.obra-wizard-shell__content {
  padding: 1.5rem 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
/* Área desplazable: formulario; cabecera + stepper permanecen fijos arriba del modal. */
.obra-wizard-shell__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.obra-wizard-shell__footer {
  flex-shrink: 0;
  margin-top: auto;
}
.obra-wizard-hero {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1.25rem 1.25rem 1rem;
  background: linear-gradient(135deg, #eef4ff 0%, #f8fbff 100%);
}
.obra-wizard-hero--premium {
  display: block;
  padding: 0 0 1.1rem;
  background: transparent;
  border-bottom: 0;
}
.obra-wizard-hero__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0d6efd;
  color: #fff;
  font-size: 1.25rem;
  box-shadow: 0 10px 24px rgba(13, 110, 253, 0.18);
}
.obra-wizard-hero__eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0d6efd;
  margin-bottom: 0.2rem;
}
.obra-wizard-hero__title {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #111827;
}
.obra-wizard-hero--premium .obra-wizard-hero__title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}
/* Wizard obra: el título del hero usa todo el ancho de ``.obra-wizard-hero__body`` (sin capar). */
#obraWizardRoot .obra-wizard-hero__title {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.obra-wizard-hero__subtitle {
  color: #6b7280;
  max-width: 58ch;
  font-size: 0.9375rem;
  font-weight: 400;
}
.obra-wizard-content-card {
  background: #fff;
  border: 1px solid #eef0f3;
  border-radius: 18px;
  padding: 1.75rem 1.5rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.04);
  min-height: 220px;
}
/* Stepper horizontal: nav.ui-stepper + static/css/ui-system.css (Fase 2.4). */
/* Contenido por paso */
.obra-wizard-panel__inner {
  max-width: 720px;
}
.obra-premium-display {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #111827;
  margin: 0;
  line-height: 1.35;
}
@media (min-width: 576px) {
  .obra-premium-display {
    font-size: 1.35rem;
  }
}
.obra-premium-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0;
}
.obra-premium-control,
.obra-premium-input-group .form-control {
  min-height: 46px;
  border-radius: 10px;
  border-color: #e5e7eb;
  font-weight: 400;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Nombre y código interno: misma altura y tipografía */
.obra-premium-field-uniform {
  min-height: 48px;
  font-size: 1rem;
  line-height: 1.4;
  border-radius: 10px;
}
.obra-premium-control:focus,
.obra-premium-input-group .form-control:focus {
  border-color: rgba(59, 130, 246, 0.55);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.obra-premium-textarea {
  min-height: 120px;
  resize: vertical;
}
.obra-premium-input-group .input-group-text {
  background: #f9fafb;
  border-color: #e5e7eb;
  color: #6b7280;
  border-radius: 10px 0 0 10px;
}
.obra-premium-input-group .form-control {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.obra-autosave-hint {
  color: #6b7280;
  font-weight: 400;
  line-height: 1.45;
}
/* Descripción: mismo ancho que nombre/código; altura de fila alineada con .obra-premium-field-uniform */
.obra-desc-details > summary.obra-desc-tile {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 0 1rem;
  margin: 0;
  list-style: none;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  color: #4b5563;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-sizing: border-box;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.obra-desc-details > summary.obra-desc-tile:hover {
  background: #eceff2;
  color: #374151;
}
.obra-desc-details[open] > summary.obra-desc-tile {
  border-bottom: 1px solid #e5e7eb;
  border-radius: 10px 10px 0 0;
}
.obra-desc-details__body {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0.5rem;
}
.obra-desc-details > summary::-webkit-details-marker {
  display: none;
}
.obra-person-card {
  border: 1px solid #e8eaed;
  border-radius: 14px;
  padding: 1.25rem 1.25rem 1.35rem;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.obra-person-card:hover {
  border-color: #dce3ea;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}
.obra-person-card__head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1rem;
}
.obra-person-card__head--toolbar {
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.obra-premium-switch--toolbar {
  padding-left: 0;
  min-height: 1.5rem;
}
.obra-premium-switch--toolbar .form-check-input {
  margin-left: 0;
  cursor: pointer;
}
.obra-person-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(145deg, #3b82f6 0%, #2563eb 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.obra-person-card__title {
  font-weight: 600;
  font-size: 0.9375rem;
  color: #111827;
}
.obra-person-card .ts-wrapper.form-control,
.obra-person-card .ts-wrapper {
  min-height: 46px;
  border-radius: 10px;
}
.obra-link-create {
  font-size: 0.875rem;
  font-weight: 500;
  color: #3b82f6 !important;
}
.obra-link-create:hover {
  color: #2563eb !important;
}
.obra-premium-switch .form-check-input {
  width: 2.5rem;
  height: 1.35rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.obra-map-frame {
  height: 280px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  background: #eef2f7;
}
.obra-map-frame--step2 {
  height: min(320px, 42vh);
  min-height: 260px;
  border-radius: 12px;
}
.obra-map-frame .obra-map-canvas {
  width: 100%;
  height: 100%;
}
/* Paso 2 wizard obra: bloque ubicación tipo tarjeta con borde suave */
.obra-wizard-step2-card {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fafbfc;
  padding: 1.35rem 1.35rem 1.5rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.obra-wizard-step2-loc-icon {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #2563eb !important;
}
/* Fechas clave: cuadrícula 2×2 de mini-tarjetas */
.obra-wizard-date-mini-card {
  border: 1px solid #e8eaed;
  border-radius: 12px;
  background: #fff;
  padding: 1rem 1.1rem 1.15rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.obra-wizard-date-mini-card:focus-within {
  border-color: rgba(59, 130, 246, 0.45);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
.obra-wizard-date-mini-card__label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
  letter-spacing: -0.01em;
}
.obra-wizard-date-mini-card__field.input-group .form-control {
  min-height: 44px;
}
.obra-premium-helper {
  line-height: 1.45;
}
.obra-premium-map-fallback {
  border-radius: 14px;
}
/* Separadores alineados al sheet (resumen modal + pie premium comparten token de borde). */
.obra-premium-summary,
.obra-wizard-footer--premium {
  border-top-color: #eef0f3 !important;
}
.obra-wizard-footer--premium {
  background: #fff !important;
  padding-top: 1.25rem !important;
}
/* Botones wizard obra/cliente/presupuesto: `.ui-btn-primary` / `.ui-btn-secondary` / `.ui-btn-success` en ui-system.css (plan cierre gap). */
/* Entrada de paneles wizard: `.ui-wizard-step-body-enter` en `ui-system.css` (delight) */
@media (prefers-reduced-motion: reduce) {
  .obra-person-card,
  .obra-desc-details > summary.obra-desc-tile {
    transition: none !important;
  }

  #componentes-detalle {
    animation: none;
  }

  #lista-componentes .card {
    transition: none !important;
  }

  #lista-componentes .card:hover {
    transform: none;
  }

  #componentes-detalle .btn-outline-secondary:hover {
    transform: none;
  }

  .filtros-chevron,
  .fq-collapse-icon {
    transition: none !important;
  }

  .fq-row-pending,
  .fq-row-slidein,
  .fq-row-highlight,
  .fq-row-fadeout {
    animation: none !important;
  }

  .maintenance-item,
  .maintenance-header,
  .maintenance-chevron,
  .maintenance-invoice .btn {
    transition: none !important;
  }

  .maintenance-invoice .btn:hover {
    transform: none;
  }

  .stripe-badge {
    transition: none !important;
  }

  .stripe-badge:hover {
    transform: none;
  }

  .fq-badge-estado {
    transition: none !important;
  }

  .navbar-nav .nav-link::before,
  .nav-item.dropdown .nav-link::before {
    transition: none !important;
  }
}
.obra-step-heading__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0d6efd;
  margin-bottom: 0.2rem;
}
.obra-step-heading__title {
  margin: 0 0 0.25rem;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #111827;
}
.obra-step-heading__subtitle {
  color: #6b7280;
  max-width: 64ch;
}
/* Borde compartido wizard obra/cliente (6.1.f oleada 36). */
.obra-form-section-card,
.cliente-wizard-toggle-card {
  border: 1px solid #e5e7eb;
}
.obra-form-section-card {
  border-radius: 14px;
  padding: 1rem;
  background: #fff;
}
.obra-form-section-card__header {
  margin-bottom: 0.9rem;
}
.cliente-wizard-toggle-card {
  border-radius: 12px;
  background: #f8fafc;
  padding: 0.9rem 1rem;
}
.cliente-wizard-toggle-card .form-check-input {
  cursor: pointer;
}
.cliente-wizard-toggle-card .form-check-label {
  cursor: pointer;
  font-weight: 600;
}
.obra-wizard-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.88);
  border-radius: 0.375rem;
}
/* #modalProduccionHost (obra/cliente/presupuesto) y #assetModal: body gris; header canónico en blanco desde ui-system.css */
#modalProduccionHost .modal-body,
#assetModal .modal-body {
  background: #f7f8fa;
}
#modalProduccionHost .modal-body {
  min-height: 280px;
}
#modalProduccionHost .modal-header {
  border-bottom: 0;
  padding: 1rem 1.25rem 0.25rem;
}
#modalProduccionHost .modal-content,
#assetModal .modal-content {
  border: 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.08), 0 2px 8px rgba(15, 23, 42, 0.04);
}
/*
 * Wizard: cabecera interna (hero + stepper) y pie fijos; solo ``.obra-wizard-shell__scroll`` hace overflow-y.
 * ``.obra-wizard-root`` incluye #clienteWizardRoot además de #obraWizardRoot.
 */
#modalProduccionHost.modal .modal-dialog-scrollable .modal-content,
#assetModal.modal .modal-dialog-scrollable .modal-content {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: min(92vh, 920px);
}
#modalProduccionHost.modal .modal-dialog-scrollable .modal-header,
#assetModal.modal .modal-dialog-scrollable .modal-header {
  flex-shrink: 0;
}
#modalProduccionHost.modal .modal-dialog-scrollable .modal-footer:not(.d-none) {
  flex-shrink: 0;
}
#modalProduccionHost .modal-dialog-scrollable .modal-body:has(.obra-wizard-root),
#assetModal .modal-dialog-scrollable .modal-body:has(.obra-wizard-root) {
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
  min-height: 0;
  flex: 1 1 auto;
}
#modalProduccionHost .modal-body:has(.obra-wizard-root) .obra-wizard-root,
#modalProduccionHost .modal-body:has(.obra-wizard-root) .obra-wizard-form,
#assetModal .modal-body:has(.obra-wizard-root) .obra-wizard-root,
#assetModal .modal-body:has(.obra-wizard-root) .obra-wizard-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}
/* Envoltorio inyectado (#contratoModalRoot, etc.): el body del host es flex; sin min-height:0
   el .obra-wizard-shell no cede altura a .obra-wizard-shell__scroll. */
#modalProduccionHost .ui-modal-body [data-contrato-modal-root],
#modalProduccionHost .ui-modal-body > [data-contrato-modal-root] {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}
#modalProduccionHost .ui-modal-body [data-contrato-modal-root] .obra-wizard-root {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#modalProduccionHost .ui-modal-body [data-contrato-modal-root] .obra-wizard-form {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#modalProduccionHost .ui-modal-body [data-contrato-modal-root] .obra-wizard-shell {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}
/*
 * Wizard contrato (solo pasos 1+): ``setDialogSize('contractWizard')``; paso 0 y panel PDF usan ``wizard``.
 * Márgenes similares a la vertical: ~95 % del viewport, tope 1280px. Alto hasta 95 vh.
 */
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard {
  max-width: min(95vw, 1280px) !important;
  width: min(95vw, 1280px) !important;
  max-height: 95vh;
  margin: 2.5vh auto;
}

/* Paso "Partidas" del contrato: ocupar ~90% del viewport (sin tope 1280px). */
#modalProduccionHost
  .modal-dialog.ui-modal-dialog--contract-wizard.ui-modal-dialog--contract-wizard-partidas {
  /* dvw: viewport dinámico (mejor con zoom / barras / mobile). Gutter: evitar rozar bordes. */
  max-width: min(90dvw, calc(100dvw - 2.5rem)) !important;
  width: min(90dvw, calc(100dvw - 2.5rem)) !important;
}

#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard .modal-content.ui-modal-chrome {
  max-height: 95vh;
  min-height: min(88vh, 900px);
}
/*
 * El shell genérico limita ``.obra-wizard-panel__inner`` a 720px (lectura en modales estrechos).
 * En el wizard de contrato (ancho ~1280px) eso deja un “muelle” vacío a la derecha; se usa todo el cuerpo scrollable.
 */
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-modal-root] {
  width: 100%;
  max-width: none;
}
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard .obra-wizard-panel__inner {
  max-width: none;
  width: 100%;
  box-sizing: border-box;
}
/* Más aire entre borde del modal y contenido (wizard contrato). */
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard .obra-wizard-shell__content {
  padding: 2rem 2.25rem 1.25rem;
}
/* Wizard contrato: tablas a ancho útil; columnas internas con min-w-0 para no “perder” espacio a la derecha. */
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel] .contrato-wizard-paso2-inner,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel] .contrato-wizard-paso3-inner {
  min-width: 0;
  width: 100%;
}
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard .contrato-wizard-jefe-obra {
  min-width: 0;
}
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard .contrato-wizard-table-bleed {
  max-width: 100%;
}
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard .contrato-wizard-table-bleed .ui-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Contrato (paso Partidas): edición inline sin "cajitas" permanentes. */
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard .mq-inline-edit {
  position: relative;
  min-width: 0;
}
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard .mq-inline-edit__display {
  display: none;
}
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard .mq-inline-edit__control {
  display: block;
  width: 100%;
}
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard .mq-inline-edit--display-mode .mq-inline-edit__display {
  display: block;
  width: 100%;
  min-height: 1.6rem;
  padding: 0.125rem 0.25rem;
  border-radius: 0.5rem;
  color: var(--bs-body-color, #212529);
  cursor: text;
  user-select: text;
}
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard .mq-inline-edit--display-mode .mq-inline-edit__display:hover {
  background: rgba(13, 110, 253, 0.06);
}
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard .mq-inline-edit--display-mode:not(.is-editing) .mq-inline-edit__control {
  display: none;
}
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard .mq-inline-edit--display-mode.is-editing .mq-inline-edit__display {
  display: none;
}
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard .mq-inline-edit--display-mode.is-editing .mq-inline-edit__control {
  display: block;
}
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard .mq-inline-edit:not(.is-editing) .mq-inline-edit__control {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard .mq-inline-edit:not(.is-editing) .mq-inline-edit__control[readonly] {
  cursor: text;
}
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard .mq-inline-edit--num .mq-inline-edit__display {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard .mq-inline-edit--select .mq-inline-edit__display {
  text-align: left;
}
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard .mq-inline-edit--num .mq-inline-edit__control {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard textarea.mq-inline-edit__control {
  resize: vertical;
}
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard textarea.mq-inline-edit__control[rows="1"] {
  resize: none;
}

/* Descripción completa partidas: estilos base en ``ui-system.css`` (``.contrato-partida-desc-row``). */
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard .contrato-partida-desc-row .ui-disclosure__body {
  padding-top: 0.75rem;
}

/*
 * Tabla y resumen inline del paso Partidas en modal host:
 * - Wizard contrato: data-contrato-step-panel="6".
 * - Modal partidas solo-obra: data-contrato-step-panel="5".
 * Las reglas duplican el mismo aspecto en ambos paneles.
 */
/* Tabla Partidas: headers sin elipsis (wrap si hace falta). */
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="5"] .ui-table__th-inner > span,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="6"] .ui-table__th-inner > span {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* Alineación: texto a la izquierda en "Referencia" + "Resumen"; números alineados a la derecha. */
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="5"] .ui-table__th-inner,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="6"] .ui-table__th-inner {
  justify-content: flex-start;
  text-align: left;
}
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="5"] .ui-table__td,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="6"] .ui-table__td {
  text-align: left;
}
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="5"] tbody tr[data-partida-row="main"] td:nth-child(1),
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="6"] tbody tr[data-partida-row="main"] td:nth-child(1),
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="5"] tbody tr[data-partida-row="main"] td:nth-child(4),
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="6"] tbody tr[data-partida-row="main"] td:nth-child(4) {
  text-align: center;
}
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="5"] tbody tr[data-partida-row="main"] td:nth-child(5),
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="6"] tbody tr[data-partida-row="main"] td:nth-child(5),
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="5"] tbody tr[data-partida-row="main"] td:nth-child(6),
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="6"] tbody tr[data-partida-row="main"] td:nth-child(6),
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="5"] tbody tr[data-partida-row="main"] td:nth-child(7),
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="6"] tbody tr[data-partida-row="main"] td:nth-child(7) {
  text-align: center;
}
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="5"] thead th:nth-child(1) .ui-table__th-inner,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="6"] thead th:nth-child(1) .ui-table__th-inner,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="5"] thead th:nth-child(4) .ui-table__th-inner,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="6"] thead th:nth-child(4) .ui-table__th-inner {
  justify-content: center;
  text-align: center;
}

#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="5"] thead th:nth-child(5) .ui-table__th-inner,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="6"] thead th:nth-child(5) .ui-table__th-inner,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="5"] thead th:nth-child(6) .ui-table__th-inner,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="6"] thead th:nth-child(6) .ui-table__th-inner,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="5"] thead th:nth-child(7) .ui-table__th-inner,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="6"] thead th:nth-child(7) .ui-table__th-inner {
  justify-content: center;
  text-align: center;
}

/* Ajuste: inputs numéricos (medición/precio) alineados con el header. */
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="5"] .mq-inline-edit--num .mq-inline-edit__control,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="6"] .mq-inline-edit--num .mq-inline-edit__control,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="5"] .mq-inline-edit--eur .mq-inline-edit__control,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="6"] .mq-inline-edit--eur .mq-inline-edit__control {
  text-align: center;
}

/* Unidad: el inline-edit (display/select) debe centrarse de verdad, no solo el <td>. */
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="5"] tbody tr[data-partida-row="main"] td:nth-child(4) .mq-inline-edit__display,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="6"] tbody tr[data-partida-row="main"] td:nth-child(4) .mq-inline-edit__display,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="5"] tbody tr[data-partida-row="main"] td:nth-child(4) .mq-inline-edit__control,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="6"] tbody tr[data-partida-row="main"] td:nth-child(4) .mq-inline-edit__control {
  text-align: center;
}

/* Resumen: permitir multilinea y usar todo el ancho disponible. */
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="5"] td.contrato-partidas-col-resumen .mq-inline-edit__display--wrap,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="6"] td.contrato-partidas-col-resumen .mq-inline-edit__display--wrap {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* Icon tile (como en la referencia) para el título del paso. */
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="5"] .contrato-partidas-icon-tile,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="6"] .contrato-partidas-icon-tile {
  width: 42px;
  height: 42px;
  border-radius: var(--ui-radius-lg, 12px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--ui-primary) 10%, var(--ui-surface, #fff));
  border: 1px solid var(--ui-border-subtle, #e5e7eb);
  color: var(--ui-primary);
  box-shadow: var(--ui-shadow-xs, 0 1px 2px rgba(15, 23, 42, 0.04));
}
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="5"] .contrato-partidas-icon-tile i,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="6"] .contrato-partidas-icon-tile i {
  font-size: 1rem;
}

/* Header Partidas: sin texto de ayuda, ajustar respiración del bloque. */
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="5"] .contrato-partidas-head,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="6"] .contrato-partidas-head {
  margin-bottom: 0.85rem;
}

/* Link «Ver descripción completa» y resumen: ver ``ui-system.css`` (``.contrato-partidas-toggle-link``). */

/* Más aire entre el header y la tabla, y dentro del bloque tabla. */
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="5"] .contrato-partidas-table-card,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="6"] .contrato-partidas-table-card {
  padding-top: 0.4rem;
}

/* CTA inferior (Partidas + Formas de pago + Retenciones + Penalizaciones): icono encuadrado + texto primary. */
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="6"] .contrato-add-partida-btn,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="5"] .contrato-add-partida-btn,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="4"] .contrato-add-partida-btn,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="3"] .contrato-add-partida-btn,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="2"] .contrato-add-partida-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  color: var(--ui-text-muted, #6b7280);
}
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="6"] .contrato-add-partida-btn__icon,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="5"] .contrato-add-partida-btn__icon,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="4"] .contrato-add-partida-btn__icon,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="3"] .contrato-add-partida-btn__icon,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="2"] .contrato-add-partida-btn__icon {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ui-primary, #2563eb);
  background: var(--ui-surface, #fff);
  color: var(--ui-primary, #2563eb);
}
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="6"] .contrato-add-partida-btn__text,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="5"] .contrato-add-partida-btn__text,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="4"] .contrato-add-partida-btn__text,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="3"] .contrato-add-partida-btn__text,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="2"] .contrato-add-partida-btn__text {
  font-weight: 400;
  color: var(--ui-primary, #2563eb);
}

/* Filas de la tabla Partidas: un poco más altas (más padding vertical). */
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="5"] tbody tr[data-partida-row="main"] .ui-table__td,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="6"] tbody tr[data-partida-row="main"] .ui-table__td {
  padding-top: 0.95rem;
  padding-bottom: 0.95rem;
}

/* Resumen del contrato: lista tipo “factura” (no chips). */
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="5"] .contrato-resumen-list,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="6"] .contrato-resumen-list {
  border: 1px solid var(--ui-border-subtle, #e5e7eb);
  border-radius: var(--ui-radius-lg, 14px);
  background: var(--ui-surface, #fff);
  overflow: hidden;
}
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="5"] .contrato-resumen-row,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="6"] .contrato-resumen-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0.9rem;
  border-top: 1px solid var(--ui-border-subtle, #e5e7eb);
}
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="5"] .contrato-resumen-row:first-child,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="6"] .contrato-resumen-row:first-child {
  border-top: 0;
}
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="5"] .contrato-resumen-row dt,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="6"] .contrato-resumen-row dt {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ui-text-secondary, #6b7280);
  font-weight: 500;
}
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="5"] .contrato-resumen-row dd,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="6"] .contrato-resumen-row dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--ui-text, #111827);
  white-space: nowrap;
}

/* Total del contrato (en grande) + retenciones aparte. */
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="5"] .contrato-resumen-total,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="6"] .contrato-resumen-total {
  border: 1px solid var(--ui-border-subtle, #e5e7eb);
  border-radius: var(--ui-radius-lg, 14px);
  background: color-mix(in srgb, var(--ui-primary) 6%, var(--ui-surface, #fff));
  padding: 0.9rem 1rem;
}
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="5"] .contrato-resumen-total__label,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="6"] .contrato-resumen-total__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ui-text-secondary, #6b7280);
}
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="5"] .contrato-resumen-total__value,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="6"] .contrato-resumen-total__value {
  margin-top: 0.15rem;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ui-text, #111827);
}

#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="5"] .contrato-resumen-retenciones,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="6"] .contrato-resumen-retenciones {
  border: 1px dashed var(--ui-border-subtle, #e5e7eb);
  border-radius: var(--ui-radius-lg, 14px);
  background: var(--ui-surface-muted, #f3f4f6);
  padding: 0.75rem 0.9rem;
}
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="5"] .contrato-resumen-retenciones__label,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="6"] .contrato-resumen-retenciones__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ui-text-secondary, #6b7280);
}
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="5"] .contrato-resumen-retenciones__value,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="6"] .contrato-resumen-retenciones__value {
  margin-top: 0.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Paso Partidas: panel resumen (derecha). */
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="5"] aside[aria-label="Resumen del contrato"],
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="6"] aside[aria-label="Resumen del contrato"] {
  position: sticky;
  top: 0.75rem;
}

/* Paso Partidas: resumen inline (horizontal) entre título y tabla. */
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="5"] .contrato-partidas-inline-summary,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="6"] .contrato-partidas-inline-summary {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: 1fr;
  align-items: stretch;
}
@media (min-width: 992px) {
  #modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="5"] .contrato-partidas-inline-summary,
  #modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="6"] .contrato-partidas-inline-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="5"] .contrato-partidas-inline-summary__item,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="6"] .contrato-partidas-inline-summary__item {
  border: 1px solid var(--ui-border-subtle, #e5e7eb);
  border-radius: var(--ui-radius-lg, 14px);
  background: var(--ui-surface, #fff);
  padding: 0.95rem 1.05rem;
  min-width: 0;
}
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="5"] .contrato-partidas-inline-summary__item--total,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="6"] .contrato-partidas-inline-summary__item--total {
  background: var(--ui-surface, #fff);
  border-color: var(--ui-border-subtle, #e5e7eb);
}
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="5"] .contrato-partidas-inline-summary__label,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="6"] .contrato-partidas-inline-summary__label {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--ui-text-secondary, #6b7280);
}
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="5"] .contrato-partidas-inline-summary__value,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="6"] .contrato-partidas-inline-summary__value {
  margin-top: 0.15rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ui-text, #111827);
  overflow-wrap: anywhere;
  font-size: 1.25rem;
}

/*
 * Consolidado de partidas en ficha obra (pestaña Partidas y bloque resumen): misma rejilla y tipografía
 * que el paso Partidas del wizard (Total del contrato / label + importe grande).
 */
#panel-partidas .contrato-partidas-inline-summary,
.obra-detalle-dashboard-root .contrato-partidas-inline-summary {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: 1fr;
  align-items: stretch;
}
@media (min-width: 992px) {
  #panel-partidas .contrato-partidas-inline-summary,
  .obra-detalle-dashboard-root .contrato-partidas-inline-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
#panel-partidas .contrato-partidas-inline-summary__item,
.obra-detalle-dashboard-root .contrato-partidas-inline-summary__item {
  border: 1px solid var(--ui-border-subtle, #e5e7eb);
  border-radius: var(--ui-radius-lg, 14px);
  background: var(--ui-surface, #fff);
  padding: 0.95rem 1.05rem;
  min-width: 0;
}
#panel-partidas .contrato-partidas-inline-summary__item--total,
.obra-detalle-dashboard-root .contrato-partidas-inline-summary__item--total {
  background: var(--ui-surface, #fff);
  border-color: var(--ui-border-subtle, #e5e7eb);
}
#panel-partidas .contrato-partidas-inline-summary__label,
.obra-detalle-dashboard-root .contrato-partidas-inline-summary__label {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--ui-text-secondary, #6b7280);
}
/* Aviso retenciones (mezcla de bases): icono + tooltip, sin subrayado de enlace. */
#panel-partidas .obra-partidas-retenciones-disclaimer-tip,
.obra-detalle-dashboard-root .obra-partidas-retenciones-disclaimer-tip {
  line-height: 1;
  text-decoration: none !important;
  min-width: 1.1rem;
  min-height: 1.1rem;
  font-size: 0.95rem;
}
#panel-partidas .obra-partidas-retenciones-disclaimer-tip:focus-visible,
.obra-detalle-dashboard-root .obra-partidas-retenciones-disclaimer-tip:focus-visible {
  outline: 2px solid var(--bs-warning, #f59e0b);
  outline-offset: 2px;
  border-radius: 0.2rem;
}
#panel-partidas .contrato-partidas-inline-summary__value,
.obra-detalle-dashboard-root .contrato-partidas-inline-summary__value {
  margin-top: 0.15rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ui-text, #111827);
  overflow-wrap: anywhere;
  font-size: 1.25rem;
}
#panel-partidas .contrato-partidas-table-card .ui-table-container,
.obra-detalle-dashboard-root .contrato-partidas-table-card .ui-table-container {
  padding: 0.5rem 0.75rem 0.75rem;
}

/* Más aire en la tarjeta de la tabla */
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="5"] .contrato-partidas-table-card .ui-table-container,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="6"] .contrato-partidas-table-card .ui-table-container {
  padding: 0.5rem 0.75rem 0.75rem;
}

/* Modal contrato: evitar overflow horizontal fantasma (Bootstrap rows con gutters/negative margins). */
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard .contrato-wizard-paso2-inner {
  overflow-x: clip;
  overflow-y: clip;
}

/* Evitar layout shift cuando aparece/desaparece el scrollbar vertical del shell del wizard. */
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard .obra-wizard-shell__scroll {
  scrollbar-gutter: stable;
}

/* Contrato (paso 0 / panel PDF) usa tamaño `wizard` (720px). Reservar gutter para evitar “salto” lateral. */
#modalProduccionHost
  .modal-dialog.ui-modal-dialog--wizard
  [data-contrato-modal-root]
  .obra-wizard-shell__scroll {
  scrollbar-gutter: stable;
}

/*
 * Paso 1 contrato: los ``activo-wizard-type-row`` llevan ``width: 100%`` (selector activo).
 * Solo aquí forzamos 3 columnas en una fila; el aspecto del botón sigue siendo el nativo.
 */
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard .contrato-sociedad-segmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  width: 100%;
}
#modalProduccionHost
  .modal-dialog.ui-modal-dialog--contract-wizard
  .activo-wizard-root
  .wizard-step-content
  .contrato-sociedad-segmented
  .ui-wizard-pick.activo-wizard-type-row {
  /* Rellenar cada columna del grid (3×1fr); sin esto queda hueco a la derecha. */
  width: 100% !important;
  min-width: 0;
}
@media (max-width: 576px) {
  #modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard .contrato-sociedad-segmented {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .obra-wizard-hero {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .obra-wizard-shell__content {
    padding: 1rem 1rem 0.75rem;
  }
  .obra-wizard-content-card {
    padding: 1rem;
    border-radius: 14px;
  }
}

/* Modal alta presupuesto (paso catálogo): listado con scroll sin desbordar el host */
.presupuesto-nuevo-catalogo-scroll {
  max-height: min(50vh, 360px);
  overflow-y: auto;
}

/*
 * Wizard activo (modal y página): tarjetas tipo (`.ui-wizard-pick.activo-wizard-type-row`)
 * y pills estado (`.ui-wizard-pick.activo-wizard-pill--segment`) — colores semánticos abajo.
 */
.activo-wizard-root .wizard-group.activo-wizard-section {
  border: none;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.activo-wizard-type-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
}
/* Selector tipo máquina: 2 columnas, botones horizontales icono + etiqueta */
.activo-wizard-type-grid--cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  max-width: 100%;
}
@media (max-width: 380px) {
  .activo-wizard-type-grid--cols-2 {
    grid-template-columns: 1fr;
  }
}
.activo-wizard-root .obra-wizard-panel__inner .obra-premium-display {
  text-align: left;
}

.activo-wizard-root .wizard-step-content .ui-wizard-pick.activo-wizard-type-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  width: 100% !important;
  min-height: 0 !important;
  border-radius: 12px !important;
  border: 1px solid #e5e7eb !important;
  background-color: #fff !important;
  color: #111827 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.activo-wizard-root .wizard-step-content .ui-wizard-pick.activo-wizard-type-row:hover {
  border-color: #93c5fd !important;
  background-color: #fff !important;
}
.activo-wizard-root .wizard-step-content .ui-wizard-pick.activo-wizard-type-row.active {
  border-color: #3b82f6 !important;
  background-color: rgba(59, 130, 246, 0.06) !important;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.25) !important;
}
.activo-wizard-root .wizard-step-content .ui-wizard-pick.activo-wizard-type-row:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}
/* Icono o mini-ilustración a la izquierda (misma caja ~44px) */
.activo-wizard-type-row__lead {
  flex: 0 0 72px;
  width: 72px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.activo-wizard-type-row__illu {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: transparent;
}
.activo-wizard-type-row__illu-img {
  width: 65px;
  height: auto;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center;
}
.activo-wizard-type-row__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4b5563;
}
.activo-wizard-type-row__icon-el {
  font-size: 1.35rem;
  line-height: 1;
}
.activo-wizard-type-row__icon .material-icons.activo-wizard-type-row__icon-el {
  font-size: 28px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.activo-wizard-type-row__text {
  flex: 1 1 auto;
  font-size: 0.98rem;
  font-weight: 500;
  color: #111827;
  text-align: left;
  line-height: 1.2;
}
.activo-wizard-root .wizard-step-content .ui-wizard-pick.activo-wizard-type-row.active .activo-wizard-type-row__text {
  color: #1d4ed8 !important;
  font-weight: 500;
}
.activo-wizard-type-row__check {
  display: none;
  flex-shrink: 0;
  color: #198754;
  font-size: 0.95rem;
}
.activo-wizard-type-row.active .activo-wizard-type-row__check {
  display: inline-flex;
}

/* Estado: segmentos rectangulares (radio obra), no píldora 999px */
.activo-wizard-estado-segmented {
  width: 100%;
  max-width: 100%;
}
.activo-wizard-root .wizard-step-content .ui-wizard-pick.activo-wizard-pill--segment {
  margin: 0 !important;
  border-radius: 10px !important;
  padding: 0.55rem 1rem !important;
  min-height: 48px !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  line-height: 1.2 !important;
  border: 1px solid #e5e7eb !important;
  background-color: #fff !important;
  color: #374151 !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 calc(33.333% - 0.5rem) !important;
  min-width: min(168px, 100%) !important;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease !important;
}
.activo-wizard-root .wizard-step-content .ui-wizard-pick.activo-wizard-pill--segment:hover {
  background-color: #f9fafb !important;
  border-color: #d1d5db !important;
  color: #111827 !important;
}
.activo-wizard-root .wizard-step-content .ui-wizard-pick.activo-wizard-pill--segment.active[data-value="Activa"],
.activo-wizard-root .wizard-step-content .ui-wizard-pick.activo-wizard-pill--segment.active[data-value="Activo"] {
  background-color: #198754 !important;
  border-color: #198754 !important;
  color: #fff !important;
}
.activo-wizard-root .wizard-step-content .ui-wizard-pick.activo-wizard-pill--segment.active[data-value="1"] {
  background-color: #198754 !important;
  border-color: #198754 !important;
  color: #fff !important;
}
/* Seleccionado: mismo patrón que Activa (fondo sólido + texto blanco), color propio */
.activo-wizard-root .wizard-step-content .ui-wizard-pick.activo-wizard-pill--segment.active[data-value="En reparación"] {
  background-color: #d97706 !important;
  border-color: #d97706 !important;
  color: #fff !important;
}
.activo-wizard-root .wizard-step-content .ui-wizard-pick.activo-wizard-pill--segment.active[data-value="Baja"] {
  background-color: #6b7280 !important;
  border-color: #6b7280 !important;
  color: #fff !important;
}
.activo-wizard-root .wizard-step-content .ui-wizard-pick.activo-wizard-pill--segment.active[data-value="0"] {
  background-color: #6b7280 !important;
  border-color: #6b7280 !important;
  color: #fff !important;
}

.activo-wizard-root .wizard-step-content .ui-wizard-pick.activo-wizard-pill--segment.active:hover {
  filter: brightness(0.96) !important;
}

@media (prefers-reduced-motion: reduce) {
  .activo-wizard-root .wizard-step-content .ui-wizard-pick.activo-wizard-pill--segment {
    transition: none !important;
  }
}

/* Contrato wizard — «¿Tiene retenciones?» Sí/No: ancho al contenido (no barra completa). */
.activo-wizard-root .wizard-step-content .contrato-retenciones-yesno.activo-wizard-estado-segmented {
  width: fit-content;
  max-width: 100%;
  align-self: flex-start;
}
.activo-wizard-root .wizard-step-content .contrato-retenciones-yesno .ui-wizard-pick.activo-wizard-pill--segment {
  flex: 0 0 auto !important;
  min-width: 0 !important;
}
/**
 * Retenciones Sí/No: «No» usa el mismo data-value="0" que otros wizards (p. ej. Baja),
 * donde el gris es semántico. Aquí «No hay retenciones» es una respuesta válida, no un
 * estado de error: mismo verde que «Sí» para evitar que parezca desactivado o dudoso.
 */
.activo-wizard-root
  .wizard-step-content
  .contrato-retenciones-yesno
  .ui-wizard-pick.activo-wizard-pill--segment.active[data-value="0"] {
  background-color: #198754 !important;
  border-color: #198754 !important;
  color: #fff !important;
}

/* Pie fijo paso 1: alineado con padding del shell */
.activo-wizard-root .activo-wizard-footer-host {
  flex-shrink: 0;
}
/* Fase 6.1: eliminado bloque .obras-cc-* y @keyframes obras-cc-shimmer (grep=0 en templates+JS). */

/* Catálogo partidas: diálogo de confirmación por encima del modal host de producción (~1055) */
#maqCatalogoConfirmModal {
  z-index: 1090;
}
body.modal-open:has(#maqCatalogoConfirmModal.show) .modal-backdrop:last-of-type {
  z-index: 1085;
}

/* PR 6.2: vista previa importación PDF — resaltado coherente con tokens ui-system */
.contrato-step-zero-intro,
.contrato-import-intro,
.contrato-import-preview-panel {
  gap: 1rem;
}

.contrato-step-zero-intro__head,
.contrato-import-intro__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.contrato-step-zero-intro__icon,
.contrato-import-intro__icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--ui-primary) 10%, var(--ui-surface));
  color: var(--ui-primary);
  box-shadow: 0 10px 26px rgba(59, 130, 246, 0.12);
  flex-shrink: 0;
}

.contrato-step-zero-intro__icon i,
.contrato-import-intro__icon i {
  font-size: 1rem;
}

.contrato-step-zero-intro__meta {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.contrato-step-zero-intro__obra {
  padding: 0.9rem 1rem;
  border-radius: var(--ui-radius-md);
  border: 1px solid var(--ui-border-subtle);
  background: var(--ui-surface-muted);
}

.contrato-step-zero-intro__list {
  padding-left: 1rem;
  color: var(--ui-text-secondary);
}

.contrato-step-zero-intro__list li + li {
  margin-top: 0.45rem;
}

.contrato-import-preview-panel__head {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Solo el badge indica revisión pendiente; la fila no se tiñe (mejor legibilidad). */

.contrato-import-preview .contrato-import-preview-col-est {
  width: 8.75rem;
  min-width: 8.75rem;
  vertical-align: middle;
}

/* Contratos: vacío en vista previa import (tokens superficie / texto secundario) */
.contrato-import-preview-empty {
  padding: 0.65rem 0.85rem;
  border-radius: var(--ui-radius-md, 0.375rem);
  background: var(--ui-surface-muted);
  color: var(--ui-text-muted);
  font-size: 0.875rem;
}

.contrato-import-preview__actions {
  margin-top: 0.25rem;
}

/* Análisis PDF: feedback visible (spinner + barra indeterminada) */
.contrato-import-analyzing {
  border: 1px solid var(--ui-border-subtle);
  background: linear-gradient(
    135deg,
    var(--ui-surface-muted) 0%,
    color-mix(in srgb, var(--ui-primary) 6%, var(--ui-surface)) 100%
  );
  padding: 1rem 1.1rem;
  border-radius: var(--ui-radius-md);
  animation: contrato-import-analyzing-enter 0.35s var(--ui-ease-out, ease-out);
}

.contrato-import-analyzing .contrato-import-analyzing__spinner {
  color: var(--ui-primary);
}

.contrato-import-analyzing__substatus {
  transition: opacity var(--ui-motion-duration-sm, 150ms) var(--ui-ease-out, ease-out);
  opacity: 1;
}

.contrato-import-analyzing__substatus.is-fading {
  opacity: 0;
}

.contrato-import-analyzing__progress {
  height: 5px;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--ui-primary) 12%, transparent);
  overflow: hidden;
}

.contrato-import-analyzing__progress .progress-bar {
  opacity: 0.85;
}

@keyframes contrato-import-analyzing-enter {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .contrato-import-analyzing {
    animation: none;
  }

  .contrato-import-analyzing__substatus {
    transition: none;
  }
}

/* Import PDF: scroll interno solo antes de la vista previa; con stepper el modal absorbe el scroll vertical */
.import-contrato-scroll-body {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.import-contrato-scroll-body.import-contrato-scroll-body--preview {
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  padding-bottom: 1rem;
}

.import-contrato-preview-root {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
}

.import-contrato-preview-wizard .ui-table-wrapper {
  overflow-x: auto;
  max-width: 100%;
}

.contrato-import-preview-fuente {
  font-style: italic;
  color: var(--ui-text-secondary);
}

/* Vista previa import: el stepper necesita aire respecto al bloque de alertas superior
   y respecto a las tablas inferiores para no quedar "pegado". */
.import-contrato-preview-wizard .ui-stepper.js-import-preview-stepper {
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding-block: 0.25rem;
}

.contrato-import-preview-disclosure {
  margin-bottom: 0.5rem;
}

/* Vista previa import: celdas con texto largo (descripción de partida, valores
   de cabecera o observaciones). Conservamos el texto completo y permitimos que
   la fila crezca en alto; el scroll lo absorbe el modal. */
.contrato-import-preview-cell-wrap {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  vertical-align: top;
  min-width: 18rem;
}

.contrato-import-preview-col-concepto {
  width: 42%;
  white-space: normal;
  word-break: break-word;
  vertical-align: top;
  padding-left: 1.1rem;
}

.contrato-import-preview-missing {
  font-size: 0.95em;
}

/* Vista previa import: modal a pantalla completa — el chrome puede crecer más allá del tope 90vh/880px */
.modal-dialog.modal-fullscreen .modal-content.ui-modal-chrome {
  max-height: none;
  height: 100%;
  border-radius: 0;
}

/* Import PDF a pantalla completa: el fragmento ocupa el alto útil del cuerpo del modal */
#modalProduccionHost .modal-dialog.modal-fullscreen .ui-modal-body .contrato-import-fragment {
  flex: 1 1 auto;
  min-height: 0;
}

/* Vista previa import: modal amplio con marco visible (no fullscreen) */
#modalProduccionHost .modal-dialog.ui-modal-dialog--import-preview.modal-xl {
  max-width: min(96vw, 1320px);
  width: min(96vw, 1320px);
}

#modalProduccionHost .modal-dialog.ui-modal-dialog--import-preview .modal-content.ui-modal-chrome {
  height: min(92vh, 920px);
  max-height: min(92vh, 920px);
}

/* Modal detalle contrato: ``<summary>`` sin estilos inline */
.contrato-detalle-fuente-summary {
  cursor: pointer;
  text-underline-offset: 0.15rem;
}

.contrato-detalle-fuente-summary:hover {
  color: var(--ui-text);
}

/* ── Producción · Contratos · Modal "Lectura" (ojo) ───────────────────────── */
[data-contrato-detalle-modal="1"].contrato-detalle-modal {
  max-width: 920px;
  margin-inline: auto;
}

[data-contrato-detalle-modal="1"] .contrato-detalle-hero {
  padding-top: 0.15rem;
}

[data-contrato-detalle-modal="1"] .contrato-detalle-hero__value {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

[data-contrato-detalle-modal="1"] .contrato-detalle-kv {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 0.9rem;
  margin: 0;
}

[data-contrato-detalle-modal="1"] .contrato-detalle-kv__item {
  min-width: 0;
}

[data-contrato-detalle-modal="1"] .contrato-detalle-kv dt {
  margin-bottom: 0.1rem;
}

[data-contrato-detalle-modal="1"] .contrato-detalle-kv dd {
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

[data-contrato-detalle-modal="1"] .contrato-detalle-partida {
  padding: 0.95rem 1rem;
  border-color: var(--ui-border-subtle, #e5e7eb);
}

[data-contrato-detalle-modal="1"] .contrato-detalle-partida__resumen {
  font-weight: 700;
  line-height: 1.25;
}

[data-contrato-detalle-modal="1"] .contrato-detalle-partida__desc {
  margin-top: 0.45rem;
  color: var(--ui-text-secondary, #6b7280);
  font-size: 0.92rem;
  line-height: 1.35;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

[data-contrato-detalle-modal="1"] .contrato-detalle-partida__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem 0.75rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--ui-border-subtle, #e5e7eb);
}

[data-contrato-detalle-modal="1"] .contrato-detalle-partida__cell {
  min-width: 0;
}

[data-contrato-detalle-modal="1"] .contrato-detalle-partida__cell .fw-semibold {
  font-variant-numeric: tabular-nums;
}

[data-contrato-detalle-modal="1"] .contrato-detalle-linea {
  padding: 0.85rem 0.95rem;
}

@media (min-width: 576px) {
  [data-contrato-detalle-modal="1"] .contrato-detalle-hero__value {
    font-size: 1.75rem;
  }
}

@media (min-width: 768px) {
  [data-contrato-detalle-modal="1"] .contrato-detalle-partida__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Objetivo táctil mínimo en quitar fila (modal edición) */
.contrato-modal-del-row {
  min-width: 2.75rem;
  min-height: 2.25rem;
  align-items: center;
  justify-content: center;
}

.contrato-field-confidence--ok {
  border-color: rgba(5, 150, 105, 0.45);
  box-shadow: inset 0 0 0 1px rgba(5, 150, 105, 0.16);
}

.contrato-field-confidence--review {
  border-color: rgba(249, 115, 22, 0.45);
  box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.12);
}

.contrato-field-confidence--missing {
  border-color: rgba(220, 38, 38, 0.32);
  box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.08);
}

.contrato-field-confidence-indicator,
.contrato-row-confidence-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: fit-content;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
}

.contrato-field-confidence-indicator {
  margin-top: 0.45rem;
}

.contrato-field-confidence-wrap-inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.contrato-field-confidence-wrap-inline .contrato-field-confidence-indicator {
  margin-top: 0;
}

.contrato-field-confidence-indicator--icon-only {
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 0.95rem;
  gap: 0;
}

.contrato-field-confidence-indicator--icon-only span {
  display: none;
}

.contrato-row-confidence-badge {
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: rgba(15, 23, 42, 0.04);
}

.contrato-field-confidence-indicator--ok,
.contrato-row-confidence-badge--ok {
  color: #047857;
  border-color: rgba(5, 150, 105, 0.24);
  background: rgba(5, 150, 105, 0.08);
}

.contrato-field-confidence-indicator--review,
.contrato-row-confidence-badge--review {
  color: #c2410c;
  border-color: rgba(249, 115, 22, 0.24);
  background: rgba(249, 115, 22, 0.1);
}

.contrato-field-confidence-indicator--missing,
.contrato-row-confidence-badge--missing {
  color: #b91c1c;
  border-color: rgba(220, 38, 38, 0.2);
  background: rgba(220, 38, 38, 0.08);
}

.contrato-total-warning {
  color: var(--ui-warning-text);
}

/* Cuando el warning se aplica a un texto (p. ej. resumen %), no queremos caja/tinte. */
#contratoFormasPagoSummary.contrato-total-warning {
  background: transparent;
  border-color: transparent;
}

/* Listado de formas de pago (paso 2): grid 2 columnas en viewports amplios. */
.contrato-formas-pago-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  min-width: 0;
  width: 100%;
  /* Evita que una tarjeta al expandir <details> estire la altura de la pareja en la misma fila del grid. */
  align-items: start;
}

@media (min-width: 768px) {
  .contrato-formas-pago-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.contrato-formas-pago-grid > .contrato-forma-pago-row {
  min-width: 0;
}

/* Listado de retenciones (paso 3): mismo layout que formas de pago. */
.contrato-retenciones-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  min-width: 0;
  width: 100%;
  align-items: start;
}

@media (min-width: 768px) {
  .contrato-retenciones-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.contrato-retenciones-grid > .contrato-retencion-row {
  min-width: 0;
}

#contratoPenalizacionesPlazoList > .contrato-penalizacion-row,
#contratoPenalizacionesDocList > .contrato-penalizacion-row {
  min-width: 0;
}

.contrato-forma-pago-row {
  container-type: inline-size;
  container-name: contrato-forma-pago;
  /* Más legible que ``--ui-border-subtle`` (antes anulaba el borde de ``ui-card--flat``). */
  border-color: color-mix(in srgb, var(--ui-border, #e5e7eb) 68%, var(--ui-text, #0f172a) 20%);
}

/* Fila método / porcentaje / plazo: 3 columnas cuando cabe en el ancho de la tarjeta. */
.contrato-forma-pago-row__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
}

.contrato-forma-pago-row__cell {
  min-width: 0;
}

@container contrato-forma-pago (min-width: 20rem) {
  .contrato-forma-pago-row__cols {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(5.25rem, 7rem)
      minmax(6.5rem, 9rem);
    align-items: start;
  }
}

.contrato-forma-pago-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.contrato-retencion-row {
  container-type: inline-size;
  container-name: contrato-retencion;
  border-color: color-mix(in srgb, var(--ui-border, #e5e7eb) 68%, var(--ui-text, #0f172a) 20%);
}

.contrato-penalizacion-row {
  container-type: inline-size;
  container-name: contrato-penalizacion;
  border-color: color-mix(in srgb, var(--ui-border, #e5e7eb) 68%, var(--ui-text, #0f172a) 20%);
}

.contrato-contacto-row {
  container-type: inline-size;
  container-name: contrato-contacto;
  border-color: color-mix(in srgb, var(--ui-border, #e5e7eb) 68%, var(--ui-text, #0f172a) 20%);
}

.contrato-contacto-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.contrato-contacto-row__title-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--ui-primary) 10%, var(--ui-surface, #fff));
  border: 1px solid var(--ui-border, #e5e7eb);
  color: var(--ui-primary, #2563eb);
  box-shadow: var(--ui-shadow-xs, 0 1px 2px rgba(15, 23, 42, 0.04));
}

.contrato-contacto-row__title-icon i {
  font-size: 0.95rem;
}

.contrato-retencion-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.contrato-penalizacion-row__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

/* Misma rejilla responsive que hitos de retención: dos columnas → una en contenedor estrecho. */
.contrato-penalizacion-row__pct-plazo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
}

.contrato-penalizacion-row__cell {
  min-width: 0;
}

@container contrato-penalizacion (max-width: 17.5rem) {
  .contrato-penalizacion-row__pct-plazo {
    grid-template-columns: minmax(0, 1fr);
  }
}

.contrato-penalizacion-clausulado-textarea {
  min-height: 9rem;
  resize: vertical;
  line-height: 1.45;
}

/* Icono en cabecera de hito / penalización (misma familia que tiles del wizard). */
.contrato-retencion-row__title-icon,
.contrato-penalizacion-row__title-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--ui-primary) 10%, var(--ui-surface, #fff));
  border: 1px solid var(--ui-border, #e5e7eb);
  color: var(--ui-primary, #2563eb);
  box-shadow: var(--ui-shadow-xs, 0 1px 2px rgba(15, 23, 42, 0.04));
}

.contrato-retencion-row__title-icon i,
.contrato-penalizacion-row__title-icon i {
  font-size: 0.95rem;
}

.contrato-retencion-row__hito {
  width: 100%;
  min-width: 0;
}

/* Fila 2: porcentaje (sobre retención retenida) + plazo en dos columnas. */
.contrato-retencion-row__pct-plazo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
}

.contrato-retencion-row__cell {
  min-width: 0;
}

@container contrato-retencion (max-width: 17.5rem) {
  .contrato-retencion-row__pct-plazo {
    grid-template-columns: minmax(0, 1fr);
  }
}

.contrato-retencion-clausulado-textarea {
  min-height: 9rem;
  resize: vertical;
  line-height: 1.45;
}

.contrato-forma-pago-metodo-wrap {
  position: relative;
}

.contrato-forma-pago-metodo-icon {
  position: absolute;
  left: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--ui-primary) 10%, var(--ui-surface, #fff));
  border: 1px solid var(--ui-border-subtle, #eef0f3);
  color: var(--ui-primary, #2563eb);
  pointer-events: none;
  z-index: 2;
}

.contrato-forma-pago-metodo-icon i {
  font-size: 0.95rem;
}

.contrato-forma-pago-metodo-select {
  padding-left: 3.15rem;
}

/* Texto del clausulado: área ampliable al desplegar (misma familia que retención/penalización). */
.contrato-forma-pago-clausulado-textarea {
  min-height: 10rem;
  resize: vertical;
  line-height: 1.45;
}

/* Pasos 1–4, 6 (penalizaciones / contactos): icon tile en cabeceras (coherente con Partidas). */
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="1"] .contrato-step-icon-tile,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="2"] .contrato-step-icon-tile,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="3"] .contrato-step-icon-tile,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="4"] .contrato-step-icon-tile,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="5"] .contrato-step-icon-tile,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="6"] .contrato-step-icon-tile,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="7"] .contrato-step-icon-tile,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="8"] .contrato-step-icon-tile {
  width: 42px;
  height: 42px;
  border-radius: var(--ui-radius-lg, 12px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--ui-primary) 10%, var(--ui-surface, #fff));
  border: 1px solid var(--ui-border-subtle, #e5e7eb);
  color: var(--ui-primary);
  box-shadow: var(--ui-shadow-xs, 0 1px 2px rgba(15, 23, 42, 0.04));
}

#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="1"] .contrato-step-icon-tile i,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="2"] .contrato-step-icon-tile i,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="3"] .contrato-step-icon-tile i,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="4"] .contrato-step-icon-tile i,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="5"] .contrato-step-icon-tile i,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="6"] .contrato-step-icon-tile i,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="7"] .contrato-step-icon-tile i,
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="8"] .contrato-step-icon-tile i {
  font-size: 1rem;
}

/* Paso 1: separación clara entre campos generales y bloque de sociedad interna firmante. */
#modalProduccionHost .modal-dialog.ui-modal-dialog--contract-wizard [data-contrato-step-panel="1"] .contrato-wizard-paso1-sociedad {
  margin-top: 2rem;
  padding-top: 2rem;
}

.contrato-partida-disclosure .ui-disclosure__body {
    padding-top: 0.75rem;
}

/* Nombre operativo obra (paso 8 alta combinada): área ampliable sin ``style`` inline en controles ``.ui-*``. */
.obra-alta-nombre-textarea.ui-control {
    min-height: 5.5rem;
    resize: vertical;
}

@media (max-width: 767.98px) {
  .contrato-step-zero-intro__meta {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .contrato-step-zero-intro__icon,
  .contrato-import-intro__icon {
    transition:
      transform var(--ui-motion-duration-md) var(--ui-ease-out),
      box-shadow var(--ui-motion-duration-md) var(--ui-ease-out),
      background-color var(--ui-motion-duration-md) var(--ui-ease-out);
  }

  .contrato-step-zero-intro:hover .contrato-step-zero-intro__icon,
  .contrato-import-intro:hover .contrato-import-intro__icon {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(59, 130, 246, 0.16);
  }
}

/* --- Fleetboard: dashboard visual en pestaña detalle (modal activos) --- */
.fleetboard-panel-root--dashboard .fleetboard-dash-section__head {
  background: color-mix(in srgb, var(--ui-primary) 4%, var(--ui-surface, #fff));
}

.fleetboard-panel-root--dashboard .fleetboard-dash-section__icon {
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1rem;
  flex-shrink: 0;
}

.fleetboard-panel-root--dashboard .fleetboard-metric-tile {
  min-width: 7.5rem;
  max-width: 14rem;
}

.fleetboard-panel-root--dashboard .fleetboard-metric-tile__icon {
  line-height: 1;
}

.fleetboard-panel-root--dashboard .fleetboard-liquid-tile__icon {
  font-size: 1.75rem;
  line-height: 1;
}

.fleetboard-panel-root--dashboard .fleetboard-next-maint {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--ui-primary) 8%, var(--ui-surface, #fff)) 0%,
    var(--ui-surface, #fff) 55%
  );
}