/* ========================================
   UNIFIED DESIGN SYSTEM
   ======================================== */

html, body { margin: 0; padding: 0; }

:root { --mobile-bottom-nav-height: 0px; }

body { background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 100%); min-height: 100vh; }

/* Unified Topbar */
.topbar {
  background: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  border-bottom: 3px solid var(--accent);
  width: 100%;
  box-sizing: border-box;
}

.topbar h1 {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  font-size: 1.25rem;
  font-weight: 600;
}

/* The §4.3 topbar live badge cluster (.topbar-badges) was a SECOND
   estado filter shown in #mobileHeader on top of the bottom-sheet
   drawer's own estado chips. Phase 4 of the mobile redesign collapses
   both into a single sticky chip bar (#estadoChipsBarMobile, same
   markup as the desktop #estadoChipsBar). The badge styles lived here. */

/* Unified Content Area */
.app-wrap {
  max-width: none;
  margin: 0 auto;
  padding: 12px 20px;
  box-sizing: border-box;
}

/* ======================================
   FILTER CARDS
   ====================================== */
.card {
  background: white;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  margin-bottom: 12px;
}

/* ======================================
   ORDERS TABLE — layout + cells
   ====================================== */
.app-table-wrap {
  background: white;
  border-radius: 8px;
  padding: 0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  overflow: visible;
  width: 100%;
  margin-top: 12px;
}

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

table thead {
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

/* Sticky header: each th sticks below the dynamic filter card height.
   --filter-card-h is set by ordenes-index.js via ResizeObserver.
   Fallback 128px covers the brief window before JS runs. */
table thead th {
  position: sticky;
  top: var(--filter-card-h, 128px);
  z-index: 10;
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

table th {
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 16px;
  color: var(--text);
  vertical-align: middle;
  border-bottom: 2px solid var(--line);
}

table td {
  padding: 10px 14px;
  vertical-align: middle;
  font-size: 16px;
}

table tbody tr { transition: background 0.15s; border-bottom: 1px solid var(--line); }

table tbody tr:hover { background: #f0f9ff; }

/* Zebra stripe by order pair (rows 1+2 = white, rows 3+4 = tinted)
   Each order occupies 2 rows: filaOrden + filaDetalle */
table tbody tr:nth-child(4n+3),
table tbody tr:nth-child(4n+4) { background: #f8fafc; }
table tbody tr:nth-child(4n+3):hover,
table tbody tr:nth-child(4n+4):hover { background: #f0f9ff; }

/* ======================================
   BUTTONS (page-local overrides on top of ceco-ui .btn)
   ====================================== */
.btn {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  transition: var(--transition);
}

.input-compact { min-width: 240px; }

.compact-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.compact-filters input { min-width: 140px; }

.compact-filters select {
  min-width: 160px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #fff;
  font-size: 13px;
}

.filtros-row {
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.filtros-inline {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.filter-select {
  min-width: 180px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #fff;
  font-size: 13px;
}

.filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  user-select: none;
}

.filter-toggle .toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.filter-toggle .toggle-slider {
  width: 34px;
  height: 20px;
  background: var(--line);
  border-radius: 999px;
  position: relative;
  transition: var(--transition);
}

.filter-toggle .toggle-slider::after {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: var(--transition);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.filter-toggle .toggle-input:checked + .toggle-slider { background: var(--accent); }

.filter-toggle .toggle-input:checked + .toggle-slider::after { transform: translateX(14px); }

.filter-toggle .toggle-label { white-space: nowrap; }

.topbar-menu { position: relative; }

.topbar-menu .overflow-menu-dropdown {
  right: 0;
  left: auto;
  min-width: 220px;
}

.mini-menu .overflow-menu-dropdown {
  right: 0;
  left: auto;
  min-width: 200px;
}

.header-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.header-line .cliente-nombre {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resumen-compacto {
  display: flex;
  align-items: center;
  gap: 8px;
}

.resumen-menu-wrap { position: relative; }

.resumen-btn { font-weight: 600; }

.fotos-taller-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #e0f2fe;
  color: #075985;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid #bae6fd;
  vertical-align: middle;
}

.fotos-taller-badge.mobile { margin-left: 0; margin-top: 2px; }

.nota-tecnica-indicador {
  margin-left: 5px;
  font-size: 11px;
  vertical-align: middle;
  cursor: help;
  opacity: 0.85;
}

.resumen-menu { min-width: 240px; padding: 10px 12px; }

.resumen-total {
  font-weight: 700;
  margin-bottom: 8px;
  cursor: pointer;
}

.resumen-badges {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

/* ======================================
   MOBILE EQUIPOS DRAWER
   ====================================== */
.equipos-empty {
  padding: 16px;
  border: 2px dashed #d1d5db;
  border-radius: var(--radius-lg);
  text-align: center;
  color: #9ca3af;
}

.equipos-empty-icon { font-size: 32px; margin-bottom: 8px; }

.equipos-empty-text { font-weight: 600; }

.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.equipo-card {
  border: 2px solid #e5e7eb;
  border-radius: var(--radius-lg);
  padding: 14px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: box-shadow 0.2s;
}

.equipo-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.15); }

.equipo-card--no-disponible { border-color: #fecaca; }

.equipo-card--ok { border-color: #86efac; }

.equipo-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 6px;
}

.equipo-card-info { flex: 1; }

.equipo-card-serial {
  font-weight: 800;
  font-size: 16px;
  color: #111827;
  margin-bottom: 2px;
}

.equipo-card-model {
  font-size: 13px;
  color: #6b7280;
  font-weight: 500;
}

.equipo-card-model-value { color: #374151; }

.equipo-status-badge {
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.equipo-status-badge--warn { background: #fecaca; color: #991b1b; }

.equipo-status-badge--ok { background: #86efac; color: #065f46; }

.equipo-obs {
  color: #6b7280;
  font-size: 13px;
  margin-top: 8px;
  line-height: 1.4;
}

.equipo-obs--empty { color: #d1d5db; font-style: italic; }

.equipo-obs-more {
  padding: 6px 10px;
  margin-top: 8px;
  font-size: 12px;
}

.equipo-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.equipo-card-action {
  flex: 1;
  min-height: 44px;
  font-weight: 600;
}

.equipo-card-view { min-height: 44px; padding: 0 14px; }

.trabajo-card { margin-top: 12px; border-radius: var(--radius-lg); }

.trabajo-card--ok {
  font-size: 13px;
  color: #065f46;
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border: 2px solid #86efac;
  padding: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.trabajo-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.trabajo-icon { font-size: 16px; }

.trabajo-title { color: #047857; }

.trabajo-text { line-height: 1.4; }

.trabajo-card--warn {
  font-size: 12px;
  color: #991b1b;
  padding: 10px;
  background: #fff1f2;
  border: 1px dashed #fecaca;
  border-radius: 8px;
  text-align: center;
  font-style: italic;
}

.trabajo-card--empty {
  font-size: 12px;
  color: #9ca3af;
  padding: 10px;
  background: #f9fafb;
  border-radius: 8px;
  text-align: center;
  font-style: italic;
}

/* ======================================
   TOASTS
   ====================================== */
/* Toast styling lives in ceco-ui.css. Post-R4, Toast.js maps the legacy
   ok|bad|warn|'' type vocabulary to .toast-success / .toast-error /
   .toast-warning / .toast-info variant classes (DS App Kit). */

/* Notas técnicas modal CSS moved to ceco-ui.css (bucket 1, 2026-05-19). */

.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  margin-right: 6px;
}

body.hide-fecha-entrega .col-fecha-entrega,
body.hide-fecha-entrega .fecha-entrega { display: none !important; }

/* ========================================
   PAGE-SPECIFIC STYLES
   ======================================== */

/* ======================================
   ENTREGA MODAL
   Class extraction of inline styles that accreted while iterating
   on the entrega flow. ORDENES_INDEX_IMPROVEMENTS.md QW9.
   ====================================== */
.modal-entrega { max-width: 480px; }

.modal-entrega__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
}
.modal-entrega__title { margin: 0; font-size: 16px; }
.modal-entrega__close { flex-shrink: 0; }

/* Yellow warning alert containing the no-recibido checkbox + reasons. */
.modal-entrega__alert {
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  margin-bottom: 18px;
}
.modal-entrega__alert--no-id {
  background: transparent;
  border: 0;
  padding: 0;
  margin-bottom: 14px;
}

/* Big tap-target checkbox row used twice (no-recibido, sin-id). */
.modal-entrega__cb-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  cursor: pointer;
}
.modal-entrega__cb-row + .modal-entrega__sub { margin-top: 12px; }
.modal-entrega__cb-input {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
}
.modal-entrega__cb-input--warn  { accent-color: #d97706; }
.modal-entrega__cb-input--brand { accent-color: var(--accent); }
.modal-entrega__cb-label {
  cursor: pointer;
  line-height: 1.4;
  margin: 0;
}
.modal-entrega__cb-label--warn {
  font-weight: 600;
  color: #92400e;
  font-size: 14px;
}
.modal-entrega__cb-label--regular { font-size: 13px; }

/* Variant: checkbox row that sits BELOW the box it refers to
   (sin-id under the foto-ID upload, no-recibido under the normal
   delivery block). Adds spacing + a faint top divider so it reads
   as an alternative action, not as a leading question. */
.modal-entrega__cb-row--below {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}

/* Labels for fields inside the modal. */
.modal-entrega__label { font-size: 13px; font-weight: 600; }
.modal-entrega__label--muted {
  color: var(--muted);
  font-weight: 500;
  display: block;
  margin-bottom: 6px;
}
.modal-entrega__label--warn {
  color: #92400e;
  font-weight: 600;
  font-size: 13px;
}

/* Inputs/textareas inside the no-recibido alert. */
.modal-entrega__warn-input { border-color: #fde68a; font-size: 14px; }

.modal-entrega__field--tight { margin-bottom: 10px; }
.modal-entrega__field--med   { margin-bottom: 14px; }

.modal-entrega__sub { margin-top: 12px; }
.modal-entrega__hint { font-weight: 400; }

.modal-entrega__file {
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
}
.modal-entrega__preview { margin-top: 8px; }

.modal-entrega__nombre { font-size: 15px; }
.modal-entrega__motivo-id { font-size: 14px; }

.modal-entrega__sig-wrap { margin-bottom: 4px; }
.modal-entrega__canvas {
  width: 100%;
  height: 200px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  display: block;
  touch-action: none;
  cursor: crosshair;
}
.modal-entrega__clear-btn {
  margin-top: 6px;
  font-size: 12px;
  padding: 4px 10px;
}

/* Resumen compacto de la orden (equipos + totales) que se muestra
   arriba del modal de entrega. Apunta a ser legible en mobile
   sin ocupar mucha altura. */
.modal-entrega__resumen {
  background: var(--surface-2, #f8fafc);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 13px;
  line-height: 1.4;
}
.modal-entrega__resumen-totales {
  font-size: 13px;
  color: var(--text);
  margin-bottom: 6px;
}
.modal-entrega__resumen-totales b { color: var(--accent, #2563eb); }
.modal-entrega__resumen-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 180px;
  overflow-y: auto;
  border-top: 1px dashed var(--line);
  padding-top: 6px;
}
.modal-entrega__resumen-list li {
  padding: 3px 0;
  font-size: 12.5px;
  color: var(--text);
  border-bottom: 1px dotted var(--line);
  word-break: break-word;
}
.modal-entrega__resumen-list li:last-child { border-bottom: 0; }
.modal-entrega__resumen-list .re-num    { color: var(--muted); margin-right: 4px; }
.modal-entrega__resumen-list .re-serial { font-weight: 600; font-family: var(--font-mono, ui-monospace, monospace); }
.modal-entrega__resumen-list .re-mod    { color: var(--muted); font-size: 11.5px; margin-left: 4px; }
.modal-entrega__resumen-list .re-acc    { color: #1d4ed8; font-size: 11.5px; margin-left: 4px; }
.modal-entrega__resumen-list .re-acc--none { color: var(--muted); font-style: italic; }
.modal-entrega__resumen-list .re-empty  { color: var(--muted); font-style: italic; }

/* Leyenda específica para órdenes tipo ENTRADA (intake). */
.modal-entrega__legenda-entrada {
  background: #fef3c7;
  border: 1px solid #fde68a;
  color: #78350f;
  border-radius: var(--radius-lg);
  padding: 10px 12px;
  margin-top: 6px;
  margin-bottom: 12px;
  font-size: 12.5px;
  line-height: 1.45;
}

/* Required asterisk: red for normal fields, amber for ones nested
   inside the warning alert. */
.req      { color: var(--bad); }
.req--warn { color: #b45309; }

/* ======================================
   FILTER PRESETS — saved filter combinations
   The Presets dropdown lives next to the Avanzado toggle in the
   filter toolbar. ORDENES_INDEX_IMPROVEMENTS.md §5.2.
   ====================================== */
#presetsMenu { min-width: 240px; }
.preset-item {
  display: flex !important;
  align-items: center;
  gap: 6px;
  padding-right: 4px !important;
}
.preset-item--empty {
  color: var(--fg-3);
  font-style: italic;
  font-size: 13px;
  cursor: default;
}
.preset-load {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  min-width: 0;
}
.preset-load .preset-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.preset-load i { width: 14px; height: 14px; flex: 0 0 auto; }
.preset-delete {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  padding: 4px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--fg-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.preset-delete:hover { background: #fee2e2; color: var(--status-critical); }
.preset-delete i { width: 12px; height: 12px; }

/* ======================================
   TIMELINE — audit log in expanded row
   Vertical timeline derived from fecha_* timestamps on the order
   doc, rendered inside the expanded row between the resumen and
   the equipos table. ORDENES_INDEX_IMPROVEMENTS.md §5.7.
   ====================================== */
.timeline-orden {
  margin: var(--sp-3) 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--border-subtle);
  border-radius: var(--radius-md);
}
.timeline-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--sp-3);
  font-size: 13px;
  color: var(--fg-2);
}
.timeline-header .icon i { width: 16px; height: 16px; }

.timeline-entries {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  padding-left: 6px;
}
/* Vertical connector line behind the dots */
.timeline-entries::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: var(--border-default);
  border-radius: 1px;
}

.timeline-entry {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  z-index: 1;
}
.timeline-dot {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--border-default);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-3);
}
.timeline-dot i { width: 12px; height: 12px; }

.timeline-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.timeline-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-1);
}
.timeline-meta {
  font-size: 12px;
  color: var(--fg-3);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.timeline-by { font-style: italic; }

/* Per-state dot colors — pick up the same semantic palette as
   the .estado-pill so the timeline feels consistent. */
.timeline-entry--asignado    .timeline-dot { border-color: var(--status-warning); color: var(--status-warning); }
.timeline-entry--completado  .timeline-dot { border-color: var(--accent);          color: var(--accent); }
.timeline-entry--entregado   .timeline-dot { border-color: var(--status-online);  color: var(--status-online); }
.timeline-entry--no-recibido .timeline-dot { border-color: var(--status-warning); color: var(--status-warning); }
.timeline-entry--eliminado   .timeline-dot { border-color: var(--status-critical);color: var(--status-critical); }

/* ======================================
   SKELETON LOADER
   Rendered into #ordersTable + #ordersCards during initial load
   so the page has content-shaped placeholders instead of a bare
   spinner. ORDENES_INDEX_IMPROVEMENTS.md QW11.
   ====================================== */
@keyframes skel-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skel {
  display: inline-block;
  height: 12px;
  border-radius: var(--radius-xs);
  background: linear-gradient(
    90deg,
    var(--border-subtle) 0%,
    var(--border-default) 50%,
    var(--border-subtle) 100%
  );
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s linear infinite;
  vertical-align: middle;
}
.skel--xs   { width: 48px; }
.skel--sm   { width: 84px; }
.skel--md   { width: 140px; }
.skel--num  { width: 64px; }
.skel--pill { width: 80px; height: 18px; border-radius: var(--radius-pill); }

.skeleton-row td { padding: 12px 8px; }
.skeleton-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
}
.skeleton-card .row {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}

/* Respect prefers-reduced-motion — disable shimmer animation. */
@media (prefers-reduced-motion: reduce) {
  .skel { animation: none; }
}

/* ======================================
   EMPTY STATE
   Rendered into both #ordersTable (as a colspan cell) and
   #ordersCards so the message survives the responsive layout
   swap. ORDENES_INDEX_IMPROVEMENTS.md QW15.
   ====================================== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-12) var(--sp-6);
  text-align: center;
  color: var(--fg-3);
}
.empty-state__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--border-subtle);
  color: var(--fg-4);
}
.empty-state__icon svg { width: 28px; height: 28px; }
.empty-state__msg {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--fg-2);
}
.empty-state__sub {
  margin: 0;
  font-size: 13px;
  color: var(--fg-3);
}
.empty-state__cta { margin-top: var(--sp-2); }
.empty-state__cell {
  padding: 0 !important;
  background: transparent;
  border: 0;
}

/* ======================================
   ESTADO BADGE + TIPO CHIP
   ====================================== */
/* Left-border status accent — td:first-child to work with border-collapse.
   The .estado-pill rules previously here were retired by R2 (chip migration);
   per-order state badges now use .chip-estado.chip-{state} from ceco-ui.css. */
tr[data-estado="POR ASIGNAR"] td:first-child  { border-left: 4px solid #ef4444; }
tr[data-estado="RECIBIDO EN MOSTRADOR"] td:first-child { border-left: 4px solid #0EA5E9; }
tr[data-estado="ASIGNADO"] td:first-child      { border-left: 4px solid #f59e0b; }
tr[data-estado*="COMPLETADO"] td:first-child   { border-left: 4px solid var(--accent); }
tr[data-estado*="ENTREGADO"] td:first-child    { border-left: 4px solid #22c55e; }

/* Tipo de servicio chip */
.tipo-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}
.tipo-chip--reparacion    { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.tipo-chip--programacion  { background: #eef2ff; color: #3730a3; border-color: #c7d2fe; }
.tipo-chip--mantenimiento { background: #f0fdfa; color: #0f766e; border-color: #99f6e4; }
.tipo-chip--venta         { background: #faf5ff; color: #7c3aed; border-color: #e9d5ff; }

/* ======================================
   EQUIPMENT TABLE (inside expanded row)
   ====================================== */
/* Enhanced equipment table styling */
.celda-modelo-editando {
  background: var(--accent-soft) !important;
  padding: 8px !important;
  border-radius: 8px;
  transition: var(--transition);
}

.celda-editable {
  transition: var(--transition);
  padding: 4px;
  border-radius: 6px;
  position: relative;
}

.celda-editable:hover { background: var(--accent-soft-hov); box-shadow: 0 0 0 2px rgba(0, 145, 215,0.1); }

.lapiz { opacity: 0; transition: opacity 0.2s ease; }

.celda-editable:hover .lapiz { opacity: 1; }

.lapiz:hover { transform: scale(1.1); }

.lapiz svg path { transition: fill 0.2s ease; }

.lapiz:hover svg path { fill: var(--accent); }

/* Equipment table improvements */
.filaDetalle table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  box-shadow: var(--shadow);
  border-radius: var(--radius-lg);
  overflow: hidden;
  table-layout: fixed;
}

.filaDetalle table thead { background: linear-gradient(135deg, #f8fafc, #f1f5f9); }

.filaDetalle table thead th {
  padding: 10px 8px;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text);
  border-bottom: 2px solid var(--line);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Primary columns (Serie, Modelo, Intervención) - more prominent */
.filaDetalle table thead th:nth-child(1),
.filaDetalle table thead th:nth-child(2),
.filaDetalle table thead th:nth-child(9) {
  font-weight: 700;
  font-size: 13px;
  color: #1f2937;
}

/* Accessory columns - lighter weight */
.filaDetalle table thead th:nth-child(3),
.filaDetalle table thead th:nth-child(4),
.filaDetalle table thead th:nth-child(5),
.filaDetalle table thead th:nth-child(6),
.filaDetalle table thead th:nth-child(7) {
  font-weight: 500;
  font-size: 10px;
  color: #6b7280;
}

.filaDetalle table tbody tr { transition: var(--transition); }

.filaDetalle table tbody tr:hover {
  background: linear-gradient(90deg, #f0f9ff 0%, #e0f2fe 50%, #f0f9ff 100%);
  transform: scale(1.005);
  box-shadow: 0 2px 8px rgba(0, 145, 215,0.1);
}

.filaDetalle table tbody td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
  font-size: 13px;
}

/* Primary columns - more prominent */
.filaDetalle table tbody td:nth-child(1),
.filaDetalle table tbody td:nth-child(2) {
  font-weight: 600;
  color: #111827;
  font-size: 14px;
}

/* Accessory columns - lighter */
.filaDetalle table tbody td:nth-child(3),
.filaDetalle table tbody td:nth-child(4),
.filaDetalle table tbody td:nth-child(5),
.filaDetalle table tbody td:nth-child(6),
.filaDetalle table tbody td:nth-child(7) {
  font-size: 16px;
  text-align: center;
  opacity: 0.7;
}

/* Observaciones column */
.filaDetalle table tbody td:nth-child(8) {
  font-size: 12px;
  color: #6b7280;
  font-style: italic;
}

/* Column widths for equipment table (10 cols: +Intervención +Acciones) */
.filaDetalle table thead th:nth-child(1),
.filaDetalle table tbody td:nth-child(1) { width: 15%; min-width: 100px; } /* Serie */

.filaDetalle table thead th:nth-child(2),
.filaDetalle table tbody td:nth-child(2) { width: 15%; min-width: 100px; } /* Modelo */

/* Accesorios */
.filaDetalle table thead th:nth-child(4),
.filaDetalle table tbody td:nth-child(4) { text-align: center; }

/* Observaciones */
.filaDetalle table thead th:nth-child(5),
.filaDetalle table tbody td:nth-child(5) { text-align: left; }

/* Intervención */
.filaDetalle table thead th:nth-child(3),
.filaDetalle table tbody td:nth-child(3) { text-align: left; }

/* Acciones (🗑️) */
.filaDetalle table thead th:nth-child(6),
.filaDetalle table tbody td:nth-child(6) { text-align: center; }

/* .btn-agregar-equipo / .boton-eliminar-equipo — removed. No element
   in the current ordenes/index render uses these classes; only a
   defensive querySelectorAll(".btn-agregar-equipo") in
   aplicarRestriccionesPorRol still references the selector and is
   harmless when empty. */

/* Warning icon for orders without equipment */
.warn-icon {
  color: #d97706;
  font-size: 16px;
  margin-left: 6px;
  font-weight: bold;
  cursor: help;
  display: inline-block;
  animation: pulse-opacity 2s infinite;
}

@keyframes pulse-opacity {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* tr.activo styling lives in the §J-O "MEJORAS VISUALES" block below
   (uses !important + box-shadow). The duplicate that used to be here
   was clobbered by the cascade. */

.flecha {
  display: inline-block;
  transition: transform 0.2s ease;
  vertical-align: middle;
}

tr.activo .flecha { color: var(--accent); transform: rotate(90deg); }

/* Advanced-filter toggle chevron */
.icon-avanzado {
  display: inline-block;
  transition: transform 0.2s ease;
  vertical-align: middle;
}
.icon-avanzado.open { transform: rotate(180deg); }

/* Main table layout */
.orders-table {
  width: 100%;
  table-layout: fixed;
  border-radius: 8px;
}

.orders-table tbody tr { position: relative; z-index: 0; }

.orders-table tbody tr.menu-open { z-index: 10; }

.orders-table th,
.orders-table td {
  white-space: nowrap;
  padding: 10px 8px;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* First column (Order ID) - wider to accommodate warning icon */
#ordersTable th:nth-child(1),
#ordersTable td:nth-child(1) {
  min-width: 220px;
  white-space: nowrap;
  overflow: visible;
}

/* Limit only client name column */
#ordersTable td:nth-child(2) {
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: help;
}

/* Cliente cell flex structure */
.cliente-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.cliente-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  text-align: center;
  font-size: 12px;
  opacity: 0.8;
}

.cliente-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.orders-table td.acciones,
.orders-table th.acciones {
  text-align: right;
  overflow: visible;
  position: relative;
  /* Needs to outrank mobile drawer headers (z-index 1000) so the
     overflow-menu dropdown spawned inside is visible. Stays below
     toasts (9999) and modals (10000+). */
  z-index: 1100;
}

.orders-table th.acciones,
.orders-table td.acciones {
  display: table-cell; /* No convertir th/td en flex — rompe la tabla */
}

/* Wrapper for actions cell: main button + overflow menu */
.acciones-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: nowrap;
  position: relative;
  z-index: 1100; /* see comment on .orders-table th.acciones above */
}

/* Flujo action buttons — compact outline, no fill */
.btn-flujo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 4px;
  border: 1.5px solid;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, box-shadow 0.15s;
  position: relative;
  overflow: hidden;
}
.btn-flujo:hover { box-shadow: 0 1px 4px rgba(0,0,0,0.10); }
.btn-flujo--asignar   { color: var(--accent-press); border-color: var(--accent-line); }
.btn-flujo--asignar:hover   { background: var(--accent-soft); }
.btn-flujo--recibir   { color: #075985; border-color: #bae6fd; }
.btn-flujo--recibir:hover   { background: #f0f9ff; }
.btn-flujo--completar { color: #065f46; border-color: #6ee7b7; }
.btn-flujo--completar:hover { background: #ecfdf5; }
.btn-flujo--entregar  { color: #5b21b6; border-color: #c4b5fd; }
.btn-flujo--entregar:hover  { background: #f5f3ff; }
.btn-flujo--ver-entrega { color: #1e40af; border-color: #bfdbfe; }
.btn-flujo--ver-entrega:hover { background: #eff6ff; }
.btn-flujo--ver-recepcion { color: #075985; border-color: #bae6fd; }
.btn-flujo--ver-recepcion:hover { background: #f0f9ff; }
.btn-flujo .lucide    { width: 14px; height: 14px; vertical-align: -2px; color: inherit; }

/* Botón ⋯ es secundario (ghost) */
.acciones-wrap > .overflow-menu { opacity: 0.7; }

.acciones-wrap > .overflow-menu:hover { opacity: 1; }

/* Quick actions on hover — ORDENES_INDEX_IMPROVEMENTS.md §5.5.
   Actions are muted by default so they stop competing with the rest
   of the row content, then jump to full opacity when the user hovers
   (or focuses within) the row. Touch devices keep full opacity since
   they have no hover state. */
.orders-table tbody tr[data-orden-row] .acciones-wrap {
  opacity: 0.45;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.orders-table tbody tr[data-orden-row]:hover .acciones-wrap,
.orders-table tbody tr[data-orden-row]:focus-within .acciones-wrap,
.orders-table tbody tr[data-orden-row].activo .acciones-wrap { opacity: 1; }
@media (hover: none) {
  .orders-table tbody tr[data-orden-row] .acciones-wrap { opacity: 1; }
}

/* .btn-wrap legacy wrapper rules removed — current render uses
   .acciones-wrap (see §5.5 hover-opacity block above). `.flujo` td
   class no longer exists in render.js either. */

.acciones .btn {
  white-space: nowrap;
  font-size: 12px;
  padding: 6px 8px;
  min-width: auto;
  border-radius: 8px;
}

.acciones .btn span { font-size: 16px !important; }

/* @keyframes spin → defined in ceco-ui.css */

/* @keyframes fadeOut / slideInRight removed — only used by the dead
   .toast--show / .toast--hide BEM variants. ceco-ui.css ships its own
   slideInRight for the canonical .toast rule. */

@keyframes modalSlideIn {
  from { opacity: 0; transform: scale(0.95) translateY(-20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Pulse animation for important buttons */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 145, 215, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(0, 145, 215, 0); }
}

.btn-primary:not(:disabled):hover { animation: pulse 1.5s infinite; }

/* ========================================
   MOBILE LAYOUT IMPROVEMENTS
   ======================================== */

/* Hide cards list by default (desktop) */
.cards-list { display: none; }

@media (max-width: 768px) {
  :root { --mobile-bottom-nav-height: 64px; }
  /* Hide the desktop orders table on mobile. The markup uses
     .app-table-wrap (the DS class); .table-wrap is kept for legacy
     code paths still on the older class name. */
  .app-table-wrap,
  .table-wrap { display: none !important; }

  /* Show cards on mobile */
  .cards-list { display: block; padding: 0; }

  /* Mobile card styling — accent rail color is set per estado below
     so the card matches the row's left border in the desktop table
     (red / amber / blue / green). */
  .card-contrato {
    background: white;
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-left: 4px solid var(--border-default);
    transition: var(--transition);
  }
  .card-contrato[data-estado="POR ASIGNAR"]             { border-left-color: #ef4444; }
  .card-contrato[data-estado="RECIBIDO EN MOSTRADOR"]   { border-left-color: #0EA5E9; }
  .card-contrato[data-estado="ASIGNADO"]                { border-left-color: #f59e0b; }
  .card-contrato[data-estado*="COMPLETADO"]             { border-left-color: var(--accent); }
  .card-contrato[data-estado*="ENTREGADO"]              { border-left-color: #22c55e; }

  .card-contrato:active { transform: scale(0.98); box-shadow: 0 1px 4px rgba(0,0,0,0.15); }
  
  .card-contrato .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }
  
  .card-contrato .row:last-child { margin-bottom: 0; }
  
  /* .card-contrato .t1/.t2/.estado removed — current mobile cards
     use the cliente-primero BEM hierarchy (.card-contrato__cliente
     anchor + chip in tier1; __ord/__tipo/__tecnico in tier2; date +
     foto badge in tier3). Skeleton cards still use bare .row inside
     .card-contrato; that rule above stays. */
  .card-contrato .row:first-child {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .card-contrato .acciones {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    align-items: stretch;
    flex-wrap: nowrap;
  }

  /* Equipos + flujo (Asignar/Completar/Entregar) share the .acciones
     row with the 44px ··· overflow trigger. On 320–360px viewports
     three children at flex:1 each leave ~95px per button — `.btn` has
     overflow:hidden for the ripple, so any spillover from a wider
     padding clipped the "Equipos" label. Keep paddings tight and let
     flex children shrink (min-width:0) so the label never gets cut. */
  .card-contrato .acciones .btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    justify-content: center;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    padding: 0 10px;
    white-space: nowrap;
  }

  .card-contrato .acciones .btn-flujo {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    padding: 0 10px;
    gap: 6px;
    font-size: 14px;
    border-radius: 8px;
    justify-content: center;
    white-space: nowrap;
  }
  .card-contrato .acciones .btn-flujo .lucide {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }
  .card-contrato .acciones .btn .lucide { flex-shrink: 0; }

  /* Overflow ··· trigger (botonesGestion) — fixed-width icon button
     sized for touch. Override the desktop opacity:0.7 mute since on
     mobile this is the only access path to Fotos/Notas/Imprimir/
     Editar/Eliminar (no quick-buttons for those anymore). */
  .card-contrato .acciones .overflow-menu {
    flex: 0 0 44px;
    opacity: 1;
  }
  .card-contrato .acciones .overflow-menu-btn {
    width: 100%;
    min-height: 44px;
    font-size: 22px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
    padding: 0;
  }
  
  /* Sticky toolbar on mobile */
  .topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
  }
  
  .topbar h1 {
    font-size: 1.25rem;
    width: 100%;
    margin-bottom: 4px;
  }
  
  .topbar > div {
    margin-left: 0 !important;
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
  }
  
  .topbar .btn {
    flex: 1;
    min-width: auto;
    font-size: 12px;
    padding: 8px 10px;
    min-height: 44px;
  }
  
  /* Filter card mobile improvements */
  .card { padding: 12px; }
  
  .toolbar { flex-direction: column; gap: 12px; }
  
  .toolbar .left,
  .toolbar .right {
    width: 100%;
    flex-direction: column;
    gap: 8px;
  }
  
  .toolbar input,
  .toolbar select {
    width: 100% !important;
    min-height: 44px;
    font-size: 16px;
    padding: 12px;
    box-sizing: border-box;
  }
  
  .toolbar .btn {
    width: 100%;
    min-height: 44px;
    font-size: 14px;
    padding: 12px;
    justify-content: center;
  }
  
  .toolbar.mt-8 { margin-top: 12px; }
  
  /* Mobile summary badges */
  .resumen {
    font-size: 13px;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-start;
  }
  
  .resumen .badge {
    font-size: 12px;
    padding: 4px 8px;
    cursor: pointer;
    transition: var(--transition);
  }
  
  .resumen .badge:hover { transform: translateY(-2px); box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
  
  .resumen .badge:active { transform: translateY(0); }
  
  .resumen .badge.active { box-shadow: 0 0 0 3px rgba(0, 145, 215, 0.3); font-weight: 700; }
  
  /* App wrap mobile spacing */
  .app-wrap { padding: 8px 12px; }
  
  /* Bottom button full width */
  #btnCargarMas {
    width: 100%;
    min-height: 48px;
    font-size: 16px;
    padding: 14px;
    margin-top: 16px;
  }
  
  /* Modal improvements on mobile */
  .modal {
    width: 90% !important;
    max-width: 90% !important;
    margin: 20px;
  }
  
  /* Form fields in modals */
  .modal select,
  .modal input { min-height: 44px !important; font-size: 16px !important; }
  
  .modal .btn {
    min-height: 44px !important;
    font-size: 14px !important;
    padding: 12px 20px !important;
  }
  
  /* Hide desktop topbar and desktop filter card on mobile */
  .topbar--desktop      { display: none; }
  .filters-card--desktop { display: none; }

  /* Add space so content isn't hidden behind bottom nav */
  body { padding-bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom) + 16px); }
  .app-wrap { padding-bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom) + 16px); }
  
  /* Mobile header */
  #mobileHeader {
    display: block;
    position: sticky;
    top: 0;
    z-index: 998; /* under drawer (1000) but above content */
    background: white;
    border-bottom: 1px solid var(--line);
    padding: 12px 12px 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    margin: -8px -12px 12px; /* match app-wrap padding so it spans full width */
  }

  .mh-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .mh-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
  }

  .mh-sub {
    margin-top: 8px;
    font-size: 12px;
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
  }

  /* Bottom nav — auto-fit to however many .mnav-item children exist
     (currently 3: Órdenes / Nueva / Filtros). The old repeat(5, 1fr)
     left two empty columns pulling everything to the left. */
  #mobileBottomNav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: var(--mobile-bottom-nav-height);
    padding-bottom: env(safe-area-inset-bottom);
    background: white;
    border-top: 1px solid var(--line);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    z-index: 1000;
    box-sizing: border-box;
  }
  
  /* Desactivar sticky en m\u00f3vil para evitar problemas */
  .orden-header-compacto { position: relative; top: auto; }
  
  .equipos-table thead { position: relative; top: auto; }
  
  /* Ocultar popover en m\u00f3vil (se usar\u00e1 modal si es necesario) */
  .accesorios-popover { display: none !important; }

  .mnav-item {
    border: 0;
    background: transparent;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    height: 100%;
    min-height: 44px;
    cursor: pointer;
    transition: var(--transition);
  }
  .mnav-item:active { background: #f3f4f6; }
  .mnav-ico { font-size: 16px; line-height: 1; }
  .mnav-label { font-size: 11px; color: var(--muted); }
  .mnav-primary { font-weight: 700; }
  .mnav-primary .mnav-ico { font-size: 20px; }
  .mnav-primary .mnav-label { color: var(--accent); font-weight: 700; }

  /* Drawer backdrop */
  .mbackdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }

  /* Drawer panel */
  .mdrawer {
    width: 100%;
    max-width: 720px;
    background: white;
    border-radius: 16px 16px 0 0;
    padding: 14px;
    max-height: 85vh;
    overflow: auto;
  }
  .mdrawer-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
  }
  .mdrawer-title { font-size: 16px; font-weight: 800; }
  .mdrawer-actions { display: flex; gap: 8px; }

  .mdrawer-section { margin-top: 12px; }
  .mlabel { display:block; font-size: 13px; font-weight: 700; margin-bottom: 6px; color: var(--text); }

  .mcheck {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    margin-top: 8px;
  }

  .mcheck input { width: 16px; height: 16px; }

  .minput {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    font-size: 15px;
    box-sizing: border-box;
  }
  .mrow { display: flex; gap: 10px; margin-top: 10px; align-items: center; }
  .mfull { width: 100%; min-height: 44px; }

  .msort { min-width: 56px; min-height: 44px; flex-shrink: 0; }

  /* Chips */
  .mchips { display: flex; flex-wrap: wrap; gap: 8px; }
  .mchip {
    border: 1px solid var(--line);
    background: white;
    border-radius: 999px;
    padding: 10px 12px;
    min-height: 44px;
    font-size: 13px;
    cursor: pointer;
    transition: var(--transition);
  }
  .mchip:active { transform: scale(0.95); }
  .mchip.active {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: 0 0 0 2px rgba(0, 145, 215,.15);
    font-weight: 800;
    color: var(--accent);
  }

  /* Drawer menu */
  .mmenu { display: grid; gap: 8px; }
  .mmenu-item {
    width: 100%;
    text-align: left;
    padding: 12px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    background: white;
    min-height: 44px;
    cursor: pointer;
    transition: var(--transition);
    font-size: 14px;
  }
  .mmenu-item:active { transform: scale(0.98); background: #f9fafb; }
  .mmenu-item.danger {
    border-color: var(--bad);
    color: var(--bad);
    font-weight: 800;
  }
}

/* Desktop summary badges - clickable */
.resumen .badge {
  cursor: pointer;
  transition: var(--transition);
  user-select: none;
}

.resumen .badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  filter: brightness(1.05);
}

.resumen .badge:active { transform: translateY(0); }

.resumen .badge.active {
  box-shadow: 0 0 0 3px rgba(0, 145, 215, 0.4);
  font-weight: 800;
  border: 2px solid var(--accent);
}

/* Overflow-menu CSS moved to ceco-ui.css (bucket 1, 2026-05-19). The
   .show alias for .open + .btn/.disabled/.highlighted/:active modifiers
   live there now, so taller/cotizaciones can reuse the same primitive. */

/* Text-modal CSS moved to ceco-ui.css (bucket 1, 2026-05-19). The
   showTextModal API in ordenes-equipos.js still works unchanged. */

/* Desktop: hide mobile nav/drawer */
/* ========================================
   PHASE 7: UTILITY CLASSES
   Extracted from inline styles
   ======================================== */

/* Topbar utilities */
.topbar-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
}

.topbar-actions {
  margin-left: auto;
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Modal utilities */
.modal-md { max-width: 500px; }

.modal-lg {
  max-width: 720px;
  width: 92%;
  margin: 12px;
  border-radius: 16px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.modal-header-mobile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.modal-title { margin: 0; font-size: 20px; }

.modal-title-mobile { font-weight: 800; font-size: 16px; }

.modal-subtitle {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.modal-footer {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.modal-footer-mobile {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

/* Form utilities */
.form-label {
  font-weight: 500;
  margin-bottom: 8px;
  display: block;
}

.form-label-bold { font-weight: 600; }

.form-select-full {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  font-size: 14px;
  transition: var(--transition);
}

.form-hint {
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
}

.textarea-full {
  width: 100%;
  min-height: 160px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  font-size: 15px;
  box-sizing: border-box;
}

/* Button utilities */
.btn-close-modal { font-size: 20px; padding: 4px 8px; }

.btn-icon-sm { font-size: 16px; }

.btn-full { flex: 1; min-height: 44px; }

.btn-danger-alt { background: var(--bad); border-color: var(--bad); }

/* Text utilities */
.text-label { font-size: 14px; color: #374151; }

/* Display utilities */
.d-none { display: none; }

.d-flex { display: flex; }

.d-grid { display: grid; }

/* Layout utilities */
.gap-10 { gap: 10px; }

.max-h-70 { max-height: 70vh; overflow: auto; }

/* Hide initially */
.hidden { display: none !important; }
/* ========================================
   MEJORAS VISUALES: ÓRDENES EXPANDIDAS
   ======================================== */

/* Modo foco - Orden expandida destacada */
tr.activo {
  background: #f0f9ff !important;
  box-shadow: 0 0 0 3px rgba(0, 145, 215, 0.15);
  position: relative;
  z-index: 10;
}

tr.activo:hover { background: #f0f9ff !important; }

/* Wrapper de orden expandida con separación clara */
.orden-expandida-wrapper {
  background: #f8fafc !important;
  padding: 0 !important;
  overflow: visible !important;
  position: relative;
  z-index: 20;
}

.orden-expandida-card {
  background: white;
  margin: 16px;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  border: 2px solid var(--accent);
  overflow: visible;
  position: relative;
  z-index: 21;
}

/* Header compacto con info de orden */
.orden-header-compacto {
  background: linear-gradient(135deg, var(--accent-soft-hov) 0%, var(--accent-soft-strong) 100%);
  padding: 12px 16px;
  border-bottom: 2px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  /* Sticky header para mantener contexto */
  position: sticky;
  top: 0;
  z-index: 30;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  overflow: visible;
}

.header-col-izq,
.header-col-centro,
.header-col-der {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.header-col-izq {
  flex: 1 1 auto;
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.header-col-der {
  flex: 0 0 auto;
  gap: 8px;
  overflow: visible;
}

.header-col-der.hidden { display: none; }

.hint-text-inline {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

.btn-header-action {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--accent-line);
  border-radius: 6px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  transition: var(--transition);
}

.btn-header-action:hover {
  background: white;
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 145, 215, 0.2);
}

/* Botones compactos para equipos en header */
.btn-header-compact {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--accent-line);
  border-radius: 6px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 15px;
  transition: var(--transition);
  padding: 0;
}

.btn-header-compact:hover {
  background: white;
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 145, 215, 0.2);
}

.btn-header-compact.primary {
  background: var(--accent);
  border-color: var(--accent-hover);
  color: white;
}

.btn-header-compact.primary:hover { background: var(--accent-hover); border-color: var(--navy); }

/* Progreso de intervenciones inline en header — pill compacta y
   neutra. El conteo X/N se lee solo; el estado (todos hechos vs
   ninguno) queda implícito en los números y se reserva color para
   las acciones reales. */
.progreso-intervenciones-inline {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  background: #f1f5f9;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--line, #e2e8f0);
  color: var(--text);
}

.progreso-intervenciones-inline .icon { font-size: 12px; opacity: 0.5; }
.progreso-intervenciones-inline .icon i { width: 12px; height: 12px; }

/* Los modificadores se mantienen pero todos comparten el mismo
   look neutro. No reintroducir fondos coloreados aquí. */
.progreso-intervenciones-inline.completo,
.progreso-intervenciones-inline.parcial,
.progreso-intervenciones-inline.vacio {
  background: #f1f5f9;
  border-color: var(--line, #e2e8f0);
  color: var(--text);
}

.progreso-intervenciones-inline.contexto-historico { opacity: 0.7; }

.orden-info-resumen {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--navy);
}

.orden-numero {
  font-size: 16px;
  color: var(--navy);
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
}

.separador { color: var(--accent-line); font-weight: 300; }

.cliente-nombre, .tecnico-nombre { color: var(--navy); }

/* Barra de acciones de equipos - OCULTA (movida al header) */
.equipos-actions-bar { display: none; }

/* Tabla de equipos - Menor densidad */
.equipos-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
}

.equipos-table thead {
  background: #f8fafc;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
/* Override the GLOBAL `table thead th { position: sticky; top:
   var(--filter-card-h, 128px) }` (ordenes-index.css line 105).
   That global rule pins every <th> of every table to top: 128px
   of its scroll ancestor — designed for the outer orders-table
   thead to sit below the filter card. But it also matches the
   th cells of the equipos table nested in the expand row, where
   the scroll ancestor is the short .equipos-container — so the
   "sticky at top: 128px" pinned the th cells BELOW the tbody
   (and on long lists, they got hidden behind the outer thead's
   own sticky cells). Render the equipos thead in normal flow
   instead. */
.equipos-table thead th {
  position: static;
  top: auto;
  z-index: auto;
  box-shadow: none;
  background: #f8fafc;
}

.equipos-table th {
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  border-bottom: 2px solid var(--line);
}

.equipos-table tbody tr { border-bottom: 1px solid var(--line); transition: background 0.15s; }

.equipos-table tbody tr:first-child { border-top: 2px solid transparent; }

.equipos-table tbody tr:hover { background: #f8fafc; }

.equipos-table td {
  padding: 6px 10px;
  vertical-align: middle;
  font-size: 13px;
  line-height: 1.4;
}

/* Columnas con anchos específicos */
.col-serie { width: 18%; }
.col-modelo { width: 20%; }
.col-intervencion { width: 28%; }
.col-accesorios { width: 20%; }
.col-observaciones { width: 10%; max-width: 120px; }
.col-acciones { width: 6%; text-align: center; }

/* Truncar observaciones a 1 línea + tipografía de "nota":
   itálico, color atenuado, peso normal — lectura clara como
   anotación accesoria al resto de la fila. */
.col-observaciones .valor {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  font-style: italic;
  font-weight: 400;
  color: var(--muted, #64748b);
}

/* Información primaria destacada */
.valor-primario {
  font-weight: 600;
  color: #1e293b;
  font-size: 15px;
}

/* Intervención como señal crítica */
.intervencion-badge { display: inline-block; }

.intervencion-stack {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
}

.intervencion-content {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}

.intervencion-text {
  font-size: 12px;
  color: var(--text);
  max-width: 220px;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}

/* Intervención botones — look de pill-button limpio: fondo suave,
   borde definido, label + icono + chevron para dejar claro que es
   clickeable. El chevron aparece atenuado y se realza en hover. */
.btn-intervencion {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: var(--transition);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  background: #fff;
  color: var(--text);
  border: 1px solid var(--line);
}
.btn-intervencion:hover {
  background: var(--surface-2, #f8fafc);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  border-color: #94a3b8;
}
.btn-intervencion:active { transform: translateY(0.5px); }
.btn-intervencion .icon { display: inline-flex; }
.btn-intervencion .icon i { width: 14px; height: 14px; }
.btn-intervencion .label { font-weight: 600; }
.btn-intervencion .chev { display: inline-flex; margin-left: 2px; opacity: 0.55; }
.btn-intervencion .chev i { width: 14px; height: 14px; }
.btn-intervencion:hover .chev { opacity: 1; }

/* Variantes por estado — color de borde + tinta. Fondo se mantiene
   blanco/suave para que el botón se lea como botón y no como badge. */
.intervencion-badge.no-disponible .btn-intervencion {
  color: #991b1b;
  border-color: #fca5a5;
  background: #fef2f2;
}
.intervencion-badge.no-disponible .btn-intervencion:hover {
  background: #fee2e2;
  border-color: #ef4444;
}

.intervencion-badge.activa .btn-intervencion {
  color: #065f46;
  border-color: #6ee7b7;
  background: #ecfdf5;
}
.intervencion-badge.activa .btn-intervencion:hover {
  background: #d1fae5;
  border-color: #10b981;
}

.intervencion-badge.vacia .btn-intervencion {
  color: var(--muted);
  border-color: var(--line);
  background: #f8fafc;
}

.intervencion-ctrl {
  margin-top: 6px;
  padding: 8px;
  border-radius: 8px;
  border: 1px dashed #fecaca;
  background: #fff1f2;
  max-width: 240px;
}

.intervencion-ctrl-modal { max-width: 100%; margin-top: 10px; }

.intervencion-no-disponible {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 11px;
  color: #991b1b;
  font-weight: 600;
  line-height: 1.3;
}

.motivo-no-disponible {
  margin-top: 6px;
  width: 100%;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid #fecaca;
  font-size: 11px;
  background: #fff;
}

.equipo-row.no-disponible {
  background: linear-gradient(90deg, rgba(254, 226, 226, 0.7) 0%, rgba(255, 255, 255, 0.8) 60%);
}

/* Accesorios con menor peso visual */

/* Leyenda de accesorios (solo desktop) */
/* Popover de leyenda de accesorios */
.accesorios-popover {
  background: white;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin: 0 16px 12px;
  animation: slideDown 0.2s ease-out;
}

/* Cuando está oculto, no debe ocupar espacio */
.accesorios-popover[style*="display: none"],
.accesorios-popover[style*="display:none"] {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* @keyframes slideDown → defined in ceco-ui.css (same definition) */

.popover-content { padding: 0; }

.popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid var(--line);
  border-radius: 8px 8px 0 0;
  font-size: 14px;
  color: var(--navy);
}

/* Nuevo header de leyenda con todo integrado */
.popover-header-leyenda {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 16px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 8px;
  font-size: 12px;
}

.leyenda-titulo {
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
}

.leyenda-items-inline {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

.separador-leyenda {
  color: #cbd5e1;
  font-weight: 300;
  margin: 0 4px;
}

.estado-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}

.estado-inline .indicador {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  flex-shrink: 0;
}

.estado-inline .indicador.incluido { background: #dcfce7; border: 2px solid #22c55e; }

.estado-inline .indicador.no-incluido {
  background: transparent;
  border: 2px solid var(--line);
  opacity: 0.35;
}

.popover-close {
  background: transparent;
  border: none;
  font-size: 24px;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: var(--transition);
}

.popover-close:hover { background: var(--line); color: var(--navy); }

.popover-body { padding: 12px 16px; }

.leyenda-items {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f1f5f9;
}

.leyenda-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #475569;
  font-size: 12px;
  font-weight: 500;
}

.leyenda-item .icono { font-size: 16px; }

.leyenda-estados {
  display: flex;
  flex-direction: row;
  gap: 16px;
  flex-wrap: wrap;
}

.estado-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}

.estado-info .indicador {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  flex-shrink: 0;
}

.estado-info .indicador.incluido {
  background: #dcfce7;
  border: 2px solid #22c55e;
  box-shadow: 0 1px 2px rgba(34, 197, 94, 0.1);
}

.estado-info .indicador.no-incluido {
  background: transparent;
  border: 2px solid var(--line);
  opacity: 0.35;
}

.estado-info .texto { font-weight: 500; }

.accesorios-group {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
}

.accesorio-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  transition: var(--transition);
  font-size: 14px;
}

.accesorio-item.activo {
  background: #dcfce7;
  border: 2px solid #22c55e;
  opacity: 1;
  box-shadow: 0 1px 2px rgba(34, 197, 94, 0.1);
}

.accesorio-item.activo .icono { filter: grayscale(0); opacity: 1; }

.accesorio-item.inactivo {
  background: transparent;
  border: 2px solid var(--line);
  opacity: 0.35;
}

.accesorio-item.inactivo .icono { filter: grayscale(1); opacity: 0.4; }

/* Variante chip de texto (BAT/CLIP/CARG/FNT/ANT). Misma semántica
   activo/inactivo que .accesorio-item pero forma de pill compacta
   con label legible — alinea con la nomenclatura del resumen de
   entrega y de las notas de entrega. */
.accesorios-group--chips { gap: 4px; }

.accesorio-item--chip {
  width: auto;
  min-width: 30px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  line-height: 1;
  box-sizing: border-box;
}
.accesorio-item--chip.activo {
  background: #1d4ed8;
  color: #fff;
  border: 1px solid #1d4ed8;
  opacity: 1;
  box-shadow: none;
}
.accesorio-item--chip.inactivo {
  background: transparent;
  color: var(--muted, #94a3b8);
  border: 1px dashed var(--line, #cbd5e1);
  opacity: 0.85;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(148, 163, 184, 0.7);
}
.accesorio-item--mini { min-width: 0; padding: 0 6px; }

/* AB) Modo edición de accesorios */
.accesorio-item.editable {
  cursor: pointer !important;
  transition: var(--transition);
  position: relative;
}

.accesorio-item.editable::after {
  content: '✏️';
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 10px;
  background: white;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.accesorio-item.editable:hover {
  transform: scale(1.15);
  box-shadow: 0 2px 8px rgba(0, 145, 215, 0.3);
  z-index: 10;
}

.accesorio-item.editable.activo:hover { border-color: var(--accent-hover); background: var(--accent-soft-strong); }

.accesorio-item.editable.inactivo:hover {
  border-color: #94a3b8;
  background: var(--line);
  opacity: 0.7;
}

/* Acciones destructivas con menor peso visual */
.btn-eliminar-equipo {
  background: transparent;
  border: 1px solid transparent;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: var(--transition);
  font-size: 18px;
  color: #94a3b8;
  opacity: 0.5;
}

.btn-eliminar-equipo:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #dc2626;
  opacity: 1;
  transform: scale(1.1);
}

/* Contenedor de equipos */
.equipos-container {
  background: white;
  overflow-y: auto;
  max-height: calc(100vh - 200px);
  position: relative; /* ✅ ayuda a z-index/sticky dentro del panel */
}

/* ========================================
   MEJORAS ADICIONALES: PROGRESO, FEEDBACK, COMPLETITUD
   ======================================== */

/* Barra de acciones de ORDEN */
.orden-actions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 20px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-left: 3px solid var(--muted);
}

.orden-actions-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.orden-actions-label strong {
  color: #475569;
  font-size: 13px;
  font-weight: 600;
}

.label-hint {
  font-size: 10px;
  color: var(--muted);
  font-weight: 500;
}

.orden-actions-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hint-text {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
}

/* Progreso de intervenciones */
.equipos-header-group {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.progreso-intervenciones {
  display: flex;
  align-items: center;
  gap: 6px;
  background: white;
  padding: 6px 10px;
  border-radius: 6px;
  border: 2px solid var(--line);
  transition: all 0.3s;
}

.progreso-intervenciones .icon { font-size: 14px; }

.progreso-text { font-size: 12px; color: var(--muted); }

.progreso-valor { color: #1e293b; font-weight: 700; }

.progreso-bar {
  width: 60px;
  height: 5px;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
}

.progreso-fill {
  height: 100%;
  background: linear-gradient(90deg, #94a3b8 0%, var(--muted) 100%);
  transition: width 0.4s ease, background 0.3s;
  border-radius: 3px;
}

/* Estados del progreso */
.progreso-intervenciones.completo { border-color: #10b981; background: #d1fae5; }

.progreso-intervenciones.completo .progreso-fill {
  background: linear-gradient(90deg, #10b981 0%, #059669 100%);
}

.progreso-intervenciones.completo .progreso-text { color: #065f46; }

.progreso-intervenciones.parcial { border-color: #f59e0b; background: #fef3c7; }

.progreso-intervenciones.parcial .progreso-fill {
  background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%);
}

.progreso-intervenciones.parcial .progreso-text { color: #92400e; }

.progreso-intervenciones.vacio { border-color: var(--line); background: #f8fafc; }

/* Pendiente — amber pill-button, consistente con el resto. */
.intervencion-badge.pendiente .btn-intervencion {
  background: #fffbeb;
  color: #b45309;
  border-color: #fcd34d;
}
.intervencion-badge.pendiente .btn-intervencion:hover {
  background: #fef3c7;
  border-color: #f59e0b;
}

@keyframes pulse-warning {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.3); }
  50% { box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.1); }
}

/* Accesorios - Completitud visual */
.accesorios-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.accesorios-wrapper.incompleto { position: relative; }

.accesorios-wrapper.incompleto::before {
  content: '⚠️';
  position: absolute;
  left: -24px;
  font-size: 14px;
  animation: pulse-warning 2s infinite;
}

.completitud-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  min-width: 36px;
}

.accesorios-wrapper.completo .completitud-badge {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #10b981;
}
/* .incompleto .completitud-badge is set further down (amber) — the
   red palette that used to live here was always being overridden. */

/* Feedback visual inmediato */
@keyframes highlight-success {
  0% { background: #d1fae5; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
  50% { background: #a7f3d0; box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { background: transparent; }
}

@keyframes highlight-update {
  0% { background: var(--accent-soft-hov); box-shadow: 0 0 0 0 rgba(0, 145, 215, 0.6); }
  50% { background: var(--accent-soft-strong); box-shadow: 0 0 0 6px rgba(0, 145, 215, 0); }
  100% { background: transparent; }
}

.equipo-row.feedback-success { animation: highlight-success 1.2s ease; }

.equipo-row.feedback-update { animation: highlight-update 1.2s ease; }

/* Reglas para mobile */
@media (max-width: 768px) {
  /* Orden expandida más compacta */
  .orden-expandida-card { margin: 8px; }
  
  .orden-header-compacto { padding: 10px 12px; }
  
  .orden-info-resumen { font-size: 12px; gap: 8px; }
  
  /* Acciones apiladas */
  .orden-actions-bar,
  .equipos-actions-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .equipos-header-group {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .progreso-intervenciones { justify-content: space-between; }
  
  .orden-actions-group,
  .equipos-actions-group { flex-direction: column; width: 100%; }
  
  .orden-actions-group button,
  .equipos-actions-group button { width: 100%; justify-content: center; }
  
  /* Tabla de equipos - Priorizar info primaria */
  .equipos-table { display: block; overflow-x: auto; }
  
  .equipos-table thead { display: none; }
  
  .equipos-table tbody { display: block; }
  
  .equipos-table tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-bottom: 12px;
    background: white;
  }
  
  .equipos-table td { display: block; padding: 0; }
  
  /* Prioridad: Serie, Modelo, Intervención */
  .col-serie { grid-column: 1 / 2; }
  
  .col-serie::before {
    content: 'Serie';
    display: block;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
  }
  
  .col-modelo { grid-column: 2 / 3; }
  
  .col-modelo::before {
    content: 'Modelo';
    display: block;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
  }
  
  .col-intervencion { grid-column: 1 / -1; }
  
  .col-intervencion::before {
    content: 'Intervención';
    display: block;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
  }
  
  /* Accesorios y Observaciones colapsados por defecto */
  .col-accesorios,
  .col-observaciones { display: none; }
  
  .col-accesorios.expanded,
  .col-observaciones.expanded { display: block; grid-column: 1 / -1; }
  
  .col-accesorios.expanded::before {
    content: 'Accesorios';
    display: block;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
  }
  
  .col-observaciones.expanded::before {
    content: 'Observaciones';
    display: block;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
  }
  
  .col-acciones {
    grid-column: 1 / -1;
    text-align: center;
    padding-top: 12px;
    border-top: 1px solid var(--line);
  }
  
  /* Accesorios wrapper más compacto en mobile */
  .accesorios-wrapper.incompleto::before { left: -20px; font-size: 12px; }
  
  .accesorio-item {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
  /* La variante chip mantiene su forma de pill incluso en mobile. */
  .accesorio-item.accesorio-item--chip {
    width: auto;
    height: 20px;
    font-size: 10.5px;
  }

  /* Hide the desktop estado chip bar on mobile. The mobile version
     (#estadoChipsBarMobile) lives inside #mobileHeader. */
  #estadoChipsBar { display: none; }

  /* Mobile chip bar: bleed to header edges + horizontal scroll so all
     5 chips fit on narrow screens without wrapping. */
  #estadoChipsBarMobile {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
    margin: 8px -12px 0;
    padding: 2px 12px 6px;
    border-bottom: 0;
    scroll-snap-type: x proximity;
  }
  #estadoChipsBarMobile::-webkit-scrollbar { display: none; }
  #estadoChipsBarMobile .estado-chip {
    scroll-snap-align: start;
    flex-shrink: 0;
    height: 32px;
  }
}

/* ========================================
   CONTEXTO Y CONSISTENCIA VISUAL
   ======================================== */

/* Badge de contradicción */
.contradiccion-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}

.contradiccion-badge.advertencia {
  background: white;
  border: 2px solid #fbbf24;
  color: #d97706;
  box-shadow: 0 0 0 0 rgba(251, 191, 36, 0);
  animation: pulse-warning 2s infinite;
}

.contradiccion-badge .badge-icon { font-size: 11px; opacity: 0.7; }

/* Contexto adaptativo: histórico = neutro, activo = amber. */
.intervencion-badge.pendiente.historico .btn-intervencion {
  background: #f8fafc;
  color: var(--muted);
  border-color: #cbd5e1;
}
.intervencion-badge.pendiente.historico .btn-intervencion:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

.intervencion-badge.pendiente.activo .btn-intervencion {
  background: #fffbeb;
  color: #b45309;
  border-color: #fcd34d;
}
.intervencion-badge.pendiente.activo .btn-intervencion:hover {
  background: #fef3c7;
  border-color: #f59e0b;
}

/* Contexto visual en filas de equipos */
.equipo-row.contexto-historico { opacity: 0.85; }

.equipo-row.contexto-activo { opacity: 1; }

/* Orden cerrada - Reducir peso visual */
.orden-expandida-card.orden-cerrada { border-color: #94a3b8; }

.orden-expandida-card.orden-cerrada .orden-header-compacto {
  background: linear-gradient(135deg, #f1f5f9 0%, var(--line) 100%);
  border-bottom-color: #94a3b8;
}

.orden-expandida-card.orden-cerrada .orden-info-resumen { color: #475569; }

/* Contexto en progreso de intervenciones */
.progreso-intervenciones.contexto-historico { opacity: 0.75; border-color: #cbd5e1; }

.progreso-intervenciones.contexto-activo { opacity: 1; }

/* Resumen operativo */
.resumen-operativo {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-top: 2px solid #cbd5e1;
  padding: 10px 16px;
}

.resumen-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  color: #475569;
  font-size: 13px;
  font-weight: 700;
}

.resumen-header .icon { font-size: 14px; }

.resumen-contenido {
  display: flex;
  gap: 10px;
  align-items: center;
}

.resumen-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: white;
  border-radius: 6px;
  border: 2px solid var(--line);
  white-space: nowrap;
}

.resumen-item .label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}

.resumen-item .valor {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
}

/* Estados en resumen */
.resumen-item.completo { border-color: #10b981; background: #d1fae5; }

.resumen-item.completo .valor { color: #065f46; }

.resumen-item.incompleto { border-color: #f59e0b; background: #fef3c7; }

.resumen-item.incompleto .valor { color: #92400e; }

/* Accesorios - gradación de estados.
   Note: the original block here re-declared .completo / .incompleto
   .completitud-badge with the same values (completo) or amber
   (incompleto). The .incompleto one was clobbering the red default
   above; we keep the amber override here because that's the
   shipped behavior. */
.completitud-badge { transition: var(--transition); }

.accesorios-wrapper.incompleto .completitud-badge {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fbbf24;
}

/* Warning más suave para casi completo (4/5) */
.accesorios-wrapper.incompleto::before { animation: pulse-warning-soft 3s infinite; }

@keyframes pulse-warning-soft {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.8; }
}

/* Estados intermedios con colores graduales */
.accesorios-wrapper[data-count="4"] .completitud-badge { background: #fef3c7; color: #92400e; }

.accesorios-wrapper[data-count="3"] .completitud-badge,
.accesorios-wrapper[data-count="2"] .completitud-badge {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #f87171;
}

.accesorios-wrapper[data-count="1"] .completitud-badge,
.accesorios-wrapper[data-count="0"] .completitud-badge {
  background: #fecaca;
  color: #7f1d1d;
  border: 1px solid #dc2626;
}

/* ──────────────────────────────────────────────────────────────────
   Typography hierarchy on order rows — ORDENES_INDEX_IMPROVEMENTS §4.4
   Three visual tiers per row instead of an 8-column flat scan:
     Tier 1 (heaviest): Orden ID + Cliente + Estado
     Tier 2 (muted):    Técnico + Tipo + Fechas
     Tier 3 (right):    Actions (already de-emphasized via §5.5 hover-opacity)
   Targets the desktop table by td position so the existing render.js
   markup doesn't need new class names. Mobile cards have their own
   hierarchy via inline styles in renderizarOrdenYEquipos.
   ────────────────────────────────────────────────────────────────── */
.orders-table tbody td { font-weight: 500; color: var(--fg-2); }
/* Tier 1: Orden number (col 1), Cliente (col 2) */
.orders-table tbody td:nth-child(1),
.orders-table tbody td:nth-child(2) {
  font-weight: 600;
  color: var(--fg-1);
  font-size: 14px;
}
/* Cliente needs a tiny boost over the order-id col so the name reads
   as the primary scan anchor; ID stays bold but slightly tighter. */
.orders-table tbody td:nth-child(1) { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.orders-table tbody td:nth-child(2) .cliente-text { font-weight: 600; }
/* Tier 2 (muted): Técnico (3), Tipo (4), Fechas (6, 7) */
.orders-table tbody td:nth-child(3),
.orders-table tbody td:nth-child(4),
.orders-table tbody td:nth-child(6),
.orders-table tbody td:nth-child(7) {
  color: var(--fg-3);
  font-weight: 400;
  font-size: 13px;
}
/* Date columns: tabular-nums so the day numbers line up vertically. */
.orders-table tbody td:nth-child(6),
.orders-table tbody td:nth-child(7) { font-variant-numeric: tabular-nums; }
/* Header row: a touch heavier than body, slightly smaller. */
.orders-table thead th {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* Estado pill column (5) keeps its own internal weight (pill is bold) —
   no override needed beyond the base. */

/* ──────────────────────────────────────────────────────────────────
   Mobile card hierarchy — pairs with the desktop tier system above.
   Tier 1: orden + cliente + estado pill (top-right).
   Tier 2: tipo · técnico (muted).
   Tier 3: timestamps (most muted).
   ────────────────────────────────────────────────────────────────── */
/* Cliente-primero hierarchy (see ui_kits/app-mobile design note v3):
   Tier 1  client (anchor, bold, clamp 2 lines) + estado chip top-right
   Tier 2  #orden · tipo · técnico              — one muted meta line
   Tier 3  Inicio date                          + foto badge */
.card-contrato__tier1 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.card-contrato__cliente {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  font-size: 15px;
  color: var(--fg-1);
  line-height: 1.3;
  /* Clamp long client names to 2 lines so the chip never gets pushed away */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-contrato__tier1 .chip-estado {
  flex-shrink: 0;
  margin-top: 1px;
}
.card-contrato__tier2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--fg-3);
}
.card-contrato__ord {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-2);
}
.card-contrato__tipo,
.card-contrato__tecnico { font-weight: 500; }
.card-contrato__sep { color: var(--fg-4); }
.card-contrato__tier3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--fg-4);
  font-variant-numeric: tabular-nums;
}

/* Per-orden intervención progress (aggregate of per-equipo
   trabajo_tecnico + intervencion_no_disponible). Lets a tech scan
   how many equipos still need work without expanding the order.
   Grey 0/m · amber partial · green m/m. */
.card-contrato__progreso {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-3);
  white-space: nowrap;
}
.card-contrato__progreso::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fg-4);
  flex-shrink: 0;
}
.card-contrato__progreso--progress         { color: #92400e; }
.card-contrato__progreso--progress::before { background: #f59e0b; }
.card-contrato__progreso--done             { color: #065f46; }
.card-contrato__progreso--done::before     { background: #22c55e; }
.card-contrato__editar { flex: 2; }

/* ──────────────────────────────────────────────────────────────────
   §4.2 Card-style row view — desktop opt-in via body class
   ──────────────────────────────────────────────────────────────────
   Default for desktop ≥769px. Keeps the existing <table> markup so
   screen readers and the existing event-delegation continue to work,
   but flips each <tr> into a 3-area grid: heading row (ID + Cliente +
   Estado pill), meta row (Tipo · Técnico · Entrega muted), actions
   row right-aligned. Toggle in topbar persists in localStorage. */
.view-toggle {
  display: inline-flex;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md, 6px);
  overflow: hidden;
  background: #fff;
}
.view-toggle__btn {
  border: 0;
  background: transparent;
  padding: 6px 10px;
  cursor: pointer;
  color: var(--fg-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast, 120ms) var(--ease-out, ease);
}
.view-toggle__btn:hover { background: var(--accent-soft); color: var(--fg-1); }
.view-toggle__btn[aria-pressed="true"] { background: var(--accent); color: #fff; }
.view-toggle__btn .lucide { width: 16px; height: 16px; }

/* Cards view (default) — only above mobile breakpoint; mobile keeps
   its own #ordersCards layout. */
@media (min-width: 769px) {
  body.orders-view--cards .orders-table {
    display: block;
    table-layout: auto;
    border: 0;
  }
  body.orders-view--cards .orders-table colgroup { display: none; }
  body.orders-view--cards .orders-table thead     { display: none; }
  body.orders-view--cards .orders-table tbody     { display: flex; flex-direction: column; gap: 10px; }

  /* The "data row" — flip from table-row to a 3-col, 3-row grid. */
  body.orders-view--cards .orders-table tbody tr[data-orden-row] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    align-items: center;
    column-gap: 14px;
    row-gap: 4px;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid var(--border-default);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color var(--dur-fast, 120ms) var(--ease-out, ease),
                box-shadow  var(--dur-fast, 120ms) var(--ease-out, ease);
  }
  body.orders-view--cards .orders-table tbody tr[data-orden-row]:hover,
  body.orders-view--cards .orders-table tbody tr[data-orden-row]:focus-within {
    border-color: var(--accent);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }
  body.orders-view--cards .orders-table tbody tr[data-orden-row].activo {
    border-color: var(--accent);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 0;
  }

  /* Reset td defaults — no per-cell borders, no truncation. */
  body.orders-view--cards .orders-table tbody tr[data-orden-row] td {
    display: block;
    padding: 0;
    border: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    background: transparent;
  }

  /* Row 1: ID (col 1) | Cliente (col 2) | Estado pill (col 3) */
  body.orders-view--cards tr[data-orden-row] td:nth-child(1) {
    grid-row: 1; grid-column: 1;
    font-weight: 700;
    font-size: 14px;
    color: var(--fg-1);
    min-width: 0;
  }
  body.orders-view--cards tr[data-orden-row] td:nth-child(2) {
    grid-row: 1; grid-column: 2;
    font-weight: 600;
    font-size: 14px;
    color: var(--fg-1);
    min-width: 0;
  }
  body.orders-view--cards tr[data-orden-row] td:nth-child(2) .cliente-cell { min-width: 0; }
  body.orders-view--cards tr[data-orden-row] td:nth-child(2) .cliente-text {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.orders-view--cards tr[data-orden-row] td:nth-child(5) {
    grid-row: 1; grid-column: 3;
    justify-self: end;
  }

  /* Row 2: Tipo (full muted line) */
  body.orders-view--cards tr[data-orden-row] td:nth-child(4) {
    grid-row: 2; grid-column: 1 / span 2;
    font-size: 13px;
    color: var(--fg-3);
    font-weight: 400;
  }
  body.orders-view--cards tr[data-orden-row] td:nth-child(4) .tipo-chip {
    background: transparent;
    border: 0;
    padding: 0;
    color: inherit;
    font-weight: inherit;
    font-size: inherit;
  }

  /* Row 3: Técnico (left) · Entrega (middle), muted */
  body.orders-view--cards tr[data-orden-row] td:nth-child(3) {
    grid-row: 3; grid-column: 1;
    font-size: 13px;
    color: var(--fg-3);
    font-weight: 500;
  }
  body.orders-view--cards tr[data-orden-row] td:nth-child(3):not(:empty)::before {
    content: 'Técnico: ';
    color: var(--fg-4);
    font-weight: 400;
  }
  body.orders-view--cards tr[data-orden-row] td:nth-child(7) {
    grid-row: 3; grid-column: 2;
    font-size: 13px;
    color: var(--fg-3);
    font-variant-numeric: tabular-nums;
  }
  body.orders-view--cards tr[data-orden-row] td:nth-child(7):not(:empty)::before {
    content: 'Entrega: ';
    color: var(--fg-4);
    font-weight: 400;
  }
  /* Hide fecha creación in cards view — not in §4.2 spec. */
  body.orders-view--cards tr[data-orden-row] td:nth-child(6) { display: none; }

  /* Actions: rightmost col, spans all 3 rows */
  body.orders-view--cards tr[data-orden-row] td:nth-child(8) {
    grid-row: 1 / span 3;
    grid-column: 3;
    justify-self: end;
    align-self: end;
    margin-top: 8px;
  }
  body.orders-view--cards tr[data-orden-row] td:nth-child(8) .acciones-wrap {
    justify-content: flex-end;
  }

  /* Detail row (filaDetalle / expanded equipos) — display as a
     contiguous panel attached under the active card. */
  body.orders-view--cards .orders-table tr.filaDetalle {
    display: block;
    background: #fff;
    border: 1px solid var(--accent);
    border-top: 0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    margin-top: -10px;
  }
  body.orders-view--cards .orders-table tr.filaDetalle > td { display: block; padding: 0; }

  /* Hide mobile-only chrome on desktop. */
  #mobileHeader        { display: none !important; }
  #mobileBottomNav     { display: none !important; }
  #mobileDrawerBackdrop { display: none !important; }
}

/* ──────────────────────────────────────────────────────────────────
   §4.3 Estado chip bar — primary filter scan at the top of the page.
   Replaces the dropdown #filtroEstado as the primary filter affordance.
   Chips reuse the estado-pill palette (POR ASIGNAR critical-red,
   ASIGNADO warning-amber, COMPLETADO brand-blue, ENTREGADO online-green)
   so the active filter visually matches the rows it surfaces.
   ────────────────────────────────────────────────────────────────── */
.estado-chips-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}
.estado-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--radius-pill, 999px);
  border: 1px solid var(--border-default);
  background: #fff;
  color: var(--fg-2);
  font: 500 13px/1 var(--font-body, "Inter", system-ui, sans-serif);
  cursor: pointer;
  transition: background var(--dur-fast, 120ms) var(--ease-out, ease),
              border-color var(--dur-fast, 120ms) var(--ease-out, ease),
              color var(--dur-fast, 120ms) var(--ease-out, ease),
              transform var(--dur-fast, 120ms) var(--ease-out, ease);
  white-space: nowrap;
  user-select: none;
}
.estado-chip:hover { background: var(--accent-soft); border-color: var(--accent); }
.estado-chip:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus, 0 0 0 3px rgba(0, 145, 215, 0.30));
}
.estado-chip .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.estado-chip__count {
  margin-left: 4px;
  padding: 0 6px;
  height: 18px;
  min-width: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--radius-pill, 999px);
  background: rgba(0, 0, 0, 0.06);
  color: inherit;
  font-variant-numeric: tabular-nums;
}

/* Per-estado palette — active state fills with the matching status
   color so chip + estado-pill in the rows below visually correspond. */
.estado-chip--por-asignar .dot { background: var(--status-critical); }
.estado-chip--recibido    .dot { background: #0EA5E9; }
.estado-chip--asignado    .dot { background: var(--status-warning); }
.estado-chip--completado  .dot { background: var(--accent); }
.estado-chip--entregado   .dot { background: var(--status-online); }

.estado-chip.active {
  font-weight: 600;
  color: var(--fg-1);
  border-width: 1.5px;
}
.estado-chip--all.active {
  background: var(--fg-1);
  color: #fff;
  border-color: var(--fg-1);
}
.estado-chip--all.active .estado-chip__count { background: rgba(255, 255, 255, 0.20); color: #fff; }
.estado-chip--por-asignar.active {
  background: #FAE3E3;
  border-color: var(--status-critical);
  color: #8A1F1F;
}
.estado-chip--recibido.active {
  background: #E0F2FE;
  border-color: #0EA5E9;
  color: #075985;
}
.estado-chip--asignado.active {
  background: #FAF1DB;
  border-color: var(--status-warning);
  color: #7A5510;
}
.estado-chip--completado.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-press);
}
.estado-chip--entregado.active {
  background: #E6F4ED;
  border-color: var(--status-online);
  color: #0F6E47;
}

/* Hide-the-old-select hook */
.filter-field--hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ===== MEJORAS DE FILTROS ===== */

/* Sticky filters card */
.filters-card-sticky {
  position: sticky;
  top: 0;
  z-index: 100;
  margin-bottom: 16px;
}

/* Filtros avanzados colapsable */
.filtros-avanzados {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  margin-top: 12px;
  transition: all 0.3s ease;
}

/* .filtros-avanzados.collapsed + .resumen-chips removed — toggle code
   uses inline style.display; .resumen-chips never appeared in markup. */

/* ============================================================
   Fotos por equipo — usado en #modalTrabajoEquipo
   ============================================================ */
.equipo-fotos-section {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fafc;
}

.equipo-fotos-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.equipo-fotos-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: #1e293b;
  font-size: 14px;
}

.equipo-fotos-title i { width: 16px; height: 16px; }

.equipo-fotos-count {
  background: #e0e7ff;
  color: #3730a3;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 12px;
  font-weight: 700;
}

.equipo-fotos-add { min-height: 38px; padding: 6px 12px; }

.equipo-fotos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}

.equipo-fotos-empty {
  grid-column: 1 / -1;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  padding: 14px 6px;
  background: #fff;
  border: 1px dashed var(--line);
  border-radius: 10px;
}

.equipo-foto-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: #e2e8f0;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}

.equipo-foto-thumb:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(15,23,42,0.12);
}

.equipo-foto-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.equipo-fotos-status {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
  min-height: 16px;
}

.equipo-fotos-status--error { color: var(--bad, #b91c1c); }

.hidden-input { display: none; }

/* Photo viewer overlay */
.equipo-foto-viewer {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.92);
  z-index: 1600;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  gap: 10px;
}

.equipo-foto-viewer.hidden { display: none; }

.equipo-foto-viewer__close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255,255,255,0.92);
  border: none;
  border-radius: 999px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #0f172a;
}

.equipo-foto-viewer__img {
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 8px;
  background: #000;
}

.equipo-foto-viewer__meta {
  color: #e2e8f0;
  font-size: 12px;
  text-align: center;
}

.equipo-foto-viewer__delete {
  background: #dc2626;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 16px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.equipo-foto-viewer__delete.hidden { display: none; }

/* Badge: count of fotos on equipo card (mobile) */
.equipo-fotos-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #eef2ff;
  color: #3730a3;
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
}

.equipo-fotos-badge i { width: 12px; height: 12px; }