/* =====================================
   OPERATIONS MODULE
===================================== */

.operations-page {
  padding: 0 16px 24px;
}

/* =====================================
   TOPBAR
===================================== */

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

.operations-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.operations-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

/* =====================================
   LIST
===================================== */

.operations-services-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.operations-service-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* ← CAMBIO IMPORTANTE */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: 0.15s ease;
}

.operations-service-card:hover {
  background: #f9fafb;
}

.operations-service-card .services-switch {
  margin-top: 4px;
}

.service-card-title {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

.service-card-sub {
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
}

.service-card-status {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 20px;
  font-weight: 500;
}

.service-card-status.active {
  background: #dcfce7;
  color: #166534;
}

.service-card-status.inactive {
  background: #fee2e2;
  color: #991b1b;
}

/* =====================================
   FORM
===================================== */

.operations-form-section {
  margin-top: 20px;
}

.operations-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
}

.operations-switch-text {
  font-size: 14px;
  font-weight: 500;
}

/* =====================================
   EMPTY STATE
===================================== */

.operations-empty {
  padding: 24px;
  text-align: center;
  color: #9ca3af;
  font-size: 14px;
}

/* =========================
   WORK ORDER DISABLED CARD
========================= */
.card-disabled {
  opacity: 0.5;
  background: #f3f4f6;
}

.card-disabled:hover {
  transform: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  cursor: default;
}

.operations-filter-bar {
  position: fixed;
  bottom: 56px; /* altura del footer */
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  background: #2563eb;
  padding: 6px 4px;
  z-index: 20;
}

.filter-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: white;
  padding: 8px 0;
  font-size: 13px;
  cursor: pointer;
  opacity: 0.7;
}

.filter-btn.active {
  background: white;
  color: #2563eb;
  border-radius: 6px;
  opacity: 1;
}

.operations-services-list {
  padding-bottom: 90px;
}

/* =====================================
   PRODUCTS MODULE HEADER (BLUE)
===================================== */

.operations-module-header {
  background: #2563eb;
  padding: 16px;
  margin: -16px -16px 16px -16px;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}

.operations-module-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.operations-title-white {
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

/* HEADER ACTION BUTTONS */

.operations-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.products-tab-btn {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #ffffff;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.products-tab-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

.products-add-btn {
  background: #ffffff;
  border: none;
  color: #2563eb;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.products-add-btn:hover {
  background: #f3f4f6;
}

/* SEARCH INSIDE BLUE HEADER */

.operations-search-wrapper {
  margin-top: 14px;
}

.operations-search-input {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: none;
  font-size: 13px;
}

/* =========================
   FORM ROW (2 COLUMNS)
========================= */

.form-row {
  display: flex;
  gap: 12px;
}

.form-group.half {
  flex: 1;
}

/* =========================
   READONLY INPUT STYLE
========================= */

.readonly-input {
  background: #f3f4f6;
  cursor: not-allowed;
  pointer-events: none;
}

/* SEARCH FIX */
.operations-search-container {
  padding: 8px 8px 4px 8px;
}

.operations-search-container input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #dcdcdc;
  font-size: 14px;
  box-sizing: border-box;
}

/* ==============================
   PRODUCTS LIST TABLE (REFINED)
================================ */

/* HEADER */
.products-table-header {
  padding: 8px 8px;
  font-weight: 600;
  font-size: 13px;
  background: #f4f6f8;
  border-bottom: 1px solid #e2e2e2;
}

/* ROW */
.products-table-row {
  padding: 10px 8px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
}

/* reducir margen lateral global */
.operations-page {
  padding-left: 8px;
  padding-right: 8px;
}

/* PRICE ALIGN RIGHT */
.products-table-header div:nth-child(2),
.products-table-row div:nth-child(2) {
  text-align: right;
}

/* QTY SECTION */
.selected-products-section .products-table-row div:nth-child(2) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* ==============================
   PRODUCTS CATALOG TABLE
================================ */

.products-table-header {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1.6fr 1fr;
  align-items: center;
  column-gap: 14px;
}

.products-table-row {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1.6fr 1fr;
  align-items: center;
  column-gap: 14px;
}

/* QTY CENTER */
.products-table-header div:nth-child(3),
.products-table-row div:nth-child(3) {
  text-align: center;
}

/* SOLO CATALOGO */
.operations-page > .products-table-row div:nth-child(3),
.operations-page > .products-table-header div:nth-child(3) {
  text-align: center;
}

/* QTY CATALOGO */
.products-table-row div:nth-child(3) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* Quitar spinner del input number */
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.qty-input {
  width: 18px;
  text-align: center;
  border: none;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  pointer-events: none;
}

/* BOTONES QTY */
.qty-plus,
.qty-minus {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid #dcdcdc;
  background: #fff;
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
}

.qty-plus:hover,
.qty-minus:hover {
  background: #f2f2f2;
}

/* BOTÓN ADD */
.btn-add-product {
  padding: 6px 12px;
  border-radius: 6px;
  border: none;
  background: #2f6fed;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  min-width: 60px;
  text-align: center;
}

.btn-add-product:hover {
  background: #2559c4;
}

/* ==============================
   SELECTED SECTION
================================ */

.selected-products-section {
  margin-top: 24px;
  padding: 16px;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e6e6e6;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.selected-products-section h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 14px;
}

/* REMOVE BUTTON */
.btn-remove {
  border: none;
  background: transparent;
  color: #d33;
  font-size: 16px;
  cursor: pointer;
}

.btn-remove:hover {
  opacity: 0.7;
}

/* ==============================
   TOTALS PREVIEW
================================ */

.selected-products-section .operations-totals-section {
  margin-top: 18px;
  padding-top: 10px;
  border-top: 1px solid #e6e6e6;
}

.selected-products-section .totals-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 14px;
}

.selected-products-section .totals-grand {
  font-weight: 700;
  font-size: 16px;
  padding-top: 10px;
  margin-top: 6px;
}

.totals-grand {
  font-weight: 700;
  border-top: 1px solid #ddd;
  padding-top: 8px;
  margin-top: 6px;
}

#btnConfirmAdd {
  margin-top: 16px;
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  font-weight: 600;
}

.selected-products-section .products-table-header,
.selected-products-section .products-table-row {
  display: grid;
  grid-template-columns: 2.2fr 1.2fr 1fr 0.6fr;
  align-items: center;
  column-gap: 12px;
}

.selected-products-section .products-table-header {
  padding: 8px 0;
  font-weight: 600;
  font-size: 13px;
  border-bottom: 1px solid #ececec;
}

.selected-products-section .products-table-row {
  padding: 10px 0;
  border-bottom: 1px solid #f4f4f4;
}

/* Asegurar que selected no afecte catálogo */
.selected-products-section .products-table-row {
  display: grid;
}

/* ==============================
   FIX SELECT PRODUCTS TOPBAR
================================ */

.operations-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Asegurar que left y right estén alineados */
.operations-left,
.operations-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Ajustar select en topbar */
.operations-right select {
  height: 34px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid #dcdcdc;
  font-size: 13px;
  background: #fff;
}

/* Asegurar altura consistente del botón */
.operations-right .global-btn-settings {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* =========================================
   WORK ORDER · PRODUCTS (ISOLATED)
========================================= */

.wo-products-section {
  margin-top: 20px;
}

.wo-products-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.wo-products-title {
  font-size: 18px;
  margin: 0;
}

.wo-btn-add {
  background: #2f6fed;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
}

.wo-btn-add:hover {
  background: #2559c4;
}

/* PRODUCT CARD STYLE (MOBILE FIRST) */
.wo-product-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wo-product-name {
  font-weight: 600;
  font-size: 14px;
}

.wo-product-line {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #555;
}

.wo-product-total {
  font-weight: 600;
  margin-top: 4px;
}

.wo-delete-btn {
  align-self: flex-end;
  border: none;
  background: transparent;
  color: #d33;
  font-size: 16px;
  cursor: pointer;
}

/* =========================================
   WORK ORDER · TOTALS
========================================= */

.wo-totals-section {
  margin-top: 18px;
  padding: 14px;
  background: #fafafa;
  border-radius: 12px;
  border: 1px solid #eee;
}

.wo-totals-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 14px;
}

.wo-grand-total {
  font-weight: 700;
  font-size: 16px;
  border-top: 1px solid #ddd;
  margin-top: 8px;
  padding-top: 10px;
}

/* =========================================
   WORK ORDER PRODUCTS · LIST MODE
========================================= */

.wo-products-section {
  margin-top: 20px;
}

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

.wo-products-table-header,
.wo-products-row {
  display: grid;
  grid-template-columns: 2fr 0.8fr 1fr 1fr 1fr 0.5fr;
  column-gap: 8px;
  align-items: center;
  font-size: 13px;
}

.wo-products-table-header {
  font-weight: 600;
  padding: 6px 4px;
  border-bottom: 1px solid #e5e5e5;
  color: #555;
}

.wo-products-row {
  padding: 8px 4px;
  border-bottom: 1px solid #f0f0f0;
}

.wo-products-row div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* align numeric columns right */
.wo-products-row div:nth-child(n + 3),
.wo-products-table-header div:nth-child(n + 3) {
  text-align: right;
}

.wo-delete-btn {
  border: none;
  background: transparent;
  color: #d33;
  font-size: 15px;
  cursor: pointer;
}

/* =========================================
   OPERATIONS DASHBOARD CARDS
========================================= */

.operations-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  gap: 14px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.operations-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

.operations-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--color-primary, #2563eb);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.operations-card-icon i {
  font-size: 20px;
  color: #ffffff;
}

.operations-card-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: left;
}

.operations-card-content h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 4px 0;
}

.operations-card-content p {
  font-size: 13px;
  color: #666;
  margin: 0;
  line-height: 1.4;
}

/* EMPTY STATE */
.operations-empty {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 14px;
  color: #888;
  padding: 20px;
}

/* ==============================
   OPERATIONS MODULE SUBTITLE
================================ */

.operations-module-subtitle {
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  margin-top: 4px;
}

/* ==============================
   BACK BUTTON (BLUE HEADER)
================================ */

.operations-back-btn {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.operations-back-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ==============================
   SWITCH STYLE (iPhone style)
================================ */

.operations-readings-switch-row {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 4px;
}

.operations-switch {
  position: relative;
  width: 42px;
  height: 24px;
}

.operations-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.operations-switch-slider {
  position: absolute;
  inset: 0;
  background: #d1d5db;
  border-radius: 999px;
  transition: 0.2s;
}

.operations-switch-slider::before {
  content: '';
  position: absolute;
  height: 20px;
  width: 20px;
  left: 2px;
  top: 2px;
  background: white;
  border-radius: 50%;
  transition: 0.2s;
}

.operations-switch input:checked + .operations-switch-slider {
  background: var(--color-primary);
}

.operations-switch input:checked + .operations-switch-slider::before {
  transform: translateX(18px);
}

.operations-switch-text {
  font-size: 14px;
  font-weight: 500;
}

.operations-module-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.operations-module-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.operations-module-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.operations-module-actions button {
  background: #ffffff;
  color: #2563eb;
  border: none;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.operations-module-actions button:hover {
  background: #f3f4f6;
}

/* =========================================
   OPERATIONS · READINGS HEADER
========================================= */

.operations-readings-header {
  padding: 10px 10px 6px 10px; /* margen lateral 10px */
}

.operations-readings-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.operations-readings-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.operations-readings-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.operations-readings-back {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  padding: 4px;
  display: flex;
  align-items: center;
}

.operations-readings-back:hover {
  opacity: 0.7;
}

/* ACTION BUTTONS */

.operations-readings-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* SUBTITLE */

.operations-readings-subtitle {
  margin-top: 6px;
  font-size: 12px;
  color: #6b7280;
}

/* =====================================
   OPERATIONS · READINGS LIST
===================================== */

.operations-readings-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: 0.15s ease;
}

.operations-readings-card:hover {
  background: #f9fafb;
}

.operations-readings-card.is-inactive {
  opacity: 0.5;
}

.operations-readings-title {
  font-size: 14px;
  font-weight: 600;
}

.operations-readings-sub {
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
}

/* TOGGLE */
.operations-readings-toggle {
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: #d1d5db;
  position: relative;
  transition: 0.2s;
}

.operations-readings-toggle::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  top: 2px;
  left: 2px;
  transition: 0.2s;
}

.operations-readings-toggle.is-active {
  background: #22c55e;
}

.operations-readings-toggle.is-active::before {
  transform: translateX(18px);
}

/* ==========================================
   RANGE TRACK
========================================== */
.reading-range-track {
  position: relative;
  height: 12px;
  border-radius: 6px;
  background: #e5e7eb;
  margin-bottom: 12px;
}

/* ==========================================
   SEGMENTS
========================================== */
.reading-range-segment {
  position: absolute;
  height: 100%;
  top: 0;
  border-radius: 6px;
  z-index: 1;
}

/* NO bloquear eventos aquí */

/* ==========================================
   HANDLES
========================================== */
/* ==========================================
   RANGE HANDLE CLEAN VERSION
========================================== */

.range-handle {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: grab;
  z-index: 50;
  font-size: 24px;
  background: none;
  width: auto;
  height: auto;
  box-shadow: none;
  user-select: none;
}

.range-handle:active {
  cursor: grabbing;
}

/* Icon color agua */
.range-handle.low i {
  color: #0891b2; /* Cyan agua */
}

.range-handle.high i {
  color: #0284c7; /* Azul más profundo */
}

/* Evitar selección de texto durante drag */
.range-handle,
.reading-range-track {
  user-select: none;
}

/* ==========================================
   FIX FINAL DRAG ISSUE
========================================== */

/* El track debe tener ancho real */
.reading-range-track {
  position: relative;
  width: 100%;
  height: 12px;
}

/* Los segmentos no deben bloquear eventos */
.reading-range-segment {
  pointer-events: none;
}

/* Evitar que padres oculten interacción */
.form-group {
  overflow: visible !important;
}

/* ==========================================
   STATES PROPORTIONAL
========================================== */
.reading-range-states {
  display: flex;
  margin-top: 16px;
}

.range-state {
  text-align: center;
  font-size: 13px;
}

.range-state .state-label {
  font-weight: 600;
  margin-bottom: 4px;
}

.range-handle i {
  pointer-events: none;
}

/* Colores dinámicos se siguen aplicando en render */

.range-handle.low i {
  color: darkblue; /* Cyan agua */
}

.range-handle.high i {
  color: darkblue;
}

.service-disabled {
  opacity: 0.5;
  pointer-events: auto;
}

/* =====================================
   SERVICES FORM
===================================== */

/* Inline row (Price + Duration) */
.services-inline-row {
  display: flex;
  gap: 16px;
}

.services-inline-row .form-group {
  flex: 1;
}

/* Description mejor bloque visual */
.services-description-group textarea {
  min-height: 90px;
  resize: vertical;
}

/* Checklist header */
.services-checklist-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.services-checklist-header h3 {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

/* Checklist disabled state */
.services-checklist-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.services-checklist-disabled-msg {
  font-size: 12px;
  color: #991b1b;
  margin-bottom: 10px;
}

/* Checklist card inactive */
.system-settings-reading-card.inactive-item {
  opacity: 0.5;
}

/* Inline expanded container */
.services-checklist-expanded {
  margin-top: 12px;
}

/* Smooth transition */
.system-settings-reading-card {
  transition: all 0.15s ease;
}

/* Expanded form style override */
.services-inline-form {
  background: #f3f4f6;
  padding: 16px;
  border-radius: 10px;
  margin-top: 10px;
}

/* Buttons alignment inside inline form */
.services-inline-form .range-form-actions {
  margin-top: 15px;
  display: flex;
  gap: 8px;
}

/* Uniform label height */
.services-inline-row .form-group label {
  display: block;
  min-height: 34px;
}

/* Inputs uniform height */
.services-inline-row input {
  height: 38px;
}

.services-description-group textarea {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 14px;
  background: #ffffff;
  min-height: 90px;
  resize: vertical;
}

/* ==============================
   FIELD HELP
============================== */

.field-label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.field-help {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #e5e7eb;
  color: #374151;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}

.field-help.active {
  background: #d1d5db;
}

.field-help-tooltip {
  position: absolute;
  top: 26px;
  left: 0;
  width: 230px;
  background: #111827;
  color: #ffffff;
  font-size: 12px;
  padding: 8px;
  border-radius: 6px;
  display: none;
  z-index: 100;
}

.field-help.active .field-help-tooltip {
  display: block;
}

/* Inline frecuencia interval */
.inline-interval-row {
  display: flex;
  gap: 16px;
}

.inline-interval-row .form-group {
  flex: 1;
}