/* ===============================
   Exchange rate board (Datatec + Spreads)
   =============================== */

/* -------------------------------
   Botón de sincronización del board
   (refresca Datatec + tabla de spreads bajo demanda)
   ------------------------------- */
.erb-sync {
   display: flex;
}

.erb-sync__btn {
   flex: 1 1 auto;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 0.45rem;
   padding: 0.5rem 0.9rem;
   border: 1px solid #1d63ff;
   border-radius: 12px;
   background: #ffffff;
   color: #1d63ff;
   font-size: 0.85rem;
   font-weight: 600;
   line-height: 1;
   cursor: pointer;
   transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.erb-sync__btn:hover:not(:disabled) {
   background: #1d63ff;
   color: #ffffff;
   box-shadow: 0 6px 16px rgba(29, 99, 255, 0.25);
}

.erb-sync__btn:disabled {
   cursor: default;
   opacity: 0.9;
}

.erb-sync__icon {
   font-size: 0.9rem;
}

/* Por defecto solo se ve el icono "rotate"; ok/err ocultos */
.erb-sync__icon--ok,
.erb-sync__icon--err {
   display: none;
}

/* Cargando: gira el icono rotate */
.erb-sync__btn.is-loading .erb-sync__icon--default {
   animation: erb-sync-spin 0.8s linear infinite;
}

/* Éxito: oculta rotate, muestra check en verde */
.erb-sync__btn.is-success {
   border-color: #16a34a;
   color: #16a34a;
}

.erb-sync__btn.is-success .erb-sync__icon--default {
   display: none;
}

.erb-sync__btn.is-success .erb-sync__icon--ok {
   display: inline-block;
}

/* Error: oculta rotate, muestra alerta en rojo */
.erb-sync__btn.is-error {
   border-color: #dc2626;
   color: #dc2626;
}

.erb-sync__btn.is-error .erb-sync__icon--default {
   display: none;
}

.erb-sync__btn.is-error .erb-sync__icon--err {
   display: inline-block;
}

@keyframes erb-sync-spin {
   from {
      transform: rotate(0deg);
   }
   to {
      transform: rotate(360deg);
   }
}

.table-scrollable {
   max-height: 640px;
   overflow-y: auto;
   overflow-x: auto;
   position: relative;
   scrollbar-width: thin;
   scrollbar-color: rgba(28, 99, 254, 0.25) transparent;
}

.table-scrollable::-webkit-scrollbar {
   width: 8px;
   height: 8px;
}

.table-scrollable::-webkit-scrollbar-track {
   background: transparent;
}

.table-scrollable::-webkit-scrollbar-thumb {
   background-color: rgba(28, 99, 254, 0.25);
   border-radius: 999px;
   border: 2px solid transparent;
}

.table-scrollable::-webkit-scrollbar-thumb:hover {
   background-color: rgba(28, 99, 254, 0.4);
}

.table-scrollable thead th {
   position: sticky !important;
   top: 0 !important;
   z-index: 10 !important;
   background-color: #002546 !important;
   color: #ffffff;
}

#fx-spread-table th {
   font-size: 0.75rem;
   padding: 0.5rem 0.2rem !important;
   text-align: center;
}

#fx-spread-table td {
   font-size: 0.8rem;
   padding: 0.4rem 0.2rem !important;
}

.fx-spread-cell {
   cursor: pointer;
   text-align: center;
   font-weight: 500;
   transition: all 0.2s ease;
   position: relative;
}

.fx-spread-cell:hover {
   opacity: 0.85;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.fx-spread-cell .copy-icon {
   opacity: 0;
   margin-left: 4px;
   font-size: 0.75rem;
   transition: opacity 0.2s;
}

.fx-spread-cell:hover .copy-icon {
   opacity: 0.6;
}

.fx-spread-cell .copy-icon:hover {
   opacity: 1 !important;
}

.fx-spread-cell.locked {
   background-color: #e9ecef !important;
   color: #6c757d !important;
   cursor: not-allowed;
}

.fx-spread-cell.recommended {
   background-color: #cfe6ff !important;
   color: #06325e !important;
}

.fx-spread-cell.massive {
   background-color: #a8e0a0 !important;
   color: #0b3d12 !important;
}

.fx-spread-cell.user-selected {
   background-color: #1d63ff !important;
   color: #ffffff !important;
}

.fx-spread-cell.user-selected.copy-icon {
   color: #ffffff !important;
}

.datatec-card {
   border: 1px solid #e2e8f0;
   border-radius: 18px;
   padding: 1rem;
   background: #ffffff;
   box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
}

.datatec-card__title {
   font-size: 1rem;
   font-weight: 600;
   color: #101828;
   margin-bottom: 0.75rem;
}

.datatec-card__row {
   display: flex;
   justify-content: space-between;
   gap: 0.75rem;
   align-items: center;
}

.datatec-card__label {
   font-size: 0.85rem;
   letter-spacing: 0.02em;
   color: #6b7280;
   margin-bottom: 0.35rem;
}

.datatec-card__timestamp {
   font-size: 0.725rem;
   color: #9ca3af;
   margin-bottom: 0;
   white-space: normal;
   word-break: break-word;
}

.datatec-card__value {
   font-size: 1rem;
   font-weight: 800;
   text-align: right;
   line-height: 1;
   font-variant-numeric: tabular-nums;
}

.datatec-card__value--bid {
   color: #1d63ff;
}

.datatec-card__value--ask {
   color: #475467;
}

.datatec-card__divider {
   height: 1px;
   background: linear-gradient(
      90deg,
      rgba(226, 232, 240, 0),
      rgba(226, 232, 240, 1),
      rgba(226, 232, 240, 0)
   );
   margin: 0.85rem 0;
}

@media (max-width: 576px) {
   .datatec-card__row {
      flex-direction: column;
      gap: 0.75rem;
   }

   .datatec-card__value {
      text-align: left;
   }
}

@media (min-width: 992px) and (max-width: 1199px) {
   .datatec-card__row {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5rem;
   }

   .datatec-card__value {
      text-align: left;
   }
}

/* -------------------------------
   Recomendado + Masivo en la misma celda: fondo partido (igual que Tipo de Cambio),
   para que ambos estados sigan siendo visibles a la vez.
   ------------------------------- */
.fx-spread-cell.recommended.massive {
   background: linear-gradient(90deg, #cfe6ff 50%, #a8e0a0 50%) !important;
   color: #06325e !important;
}

/* -------------------------------
   Mesa FX: board embebido (sin columna Bootstrap ni tarjeta Datatec propia)
   y modo configuración (Rates:Operate). Sin data-config-mode nada de esto aplica.
   ------------------------------- */
.erb--embedded .erb-card {
   display: flex;
   flex-direction: column;
   min-height: 0;
}

.erb-head {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   margin-bottom: 0.6rem;
}

.erb-head__title {
   font-size: 0.95rem;
   font-weight: 700;
   color: var(--ops-heading, #002546);
}

.erb-sync__btn--icon {
   flex: 0 0 auto;
   width: 30px;
   height: 30px;
   padding: 0;
   border-radius: 10px;
}

.erb--embedded .table-scrollable {
   max-height: 460px;
}

/* Cuadro de estado del modo configuración */
.erb-config {
   border: 1px solid var(--ops-border, #e4ecf1);
   border-radius: 12px;
   padding: 0.6rem 0.75rem;
   margin-bottom: 0.6rem;
   background: var(--ops-surface, #f9fbfd);
   transition: background 0.18s ease, border-color 0.18s ease;
}

.erb-config--active {
   background: #fff4c2;
   border-color: #e0ae00;
}

.erb-config--readonly {
   background: #eef0f4;
}

.erb-config__head {
   display: flex;
   align-items: center;
   gap: 0.5rem;
}

.erb-config__icon {
   color: var(--ops-heading, #002546);
   font-size: 0.85rem;
}

.erb-config__title {
   font-weight: 700;
   font-size: 0.8rem;
   color: var(--ops-heading, #002546);
}

.erb-config__text {
   font-size: 0.72rem;
   color: #5b7384;
   margin-top: 0.3rem;
   line-height: 1.35;
}

.erb-config__tools {
   display: flex;
   flex-wrap: wrap;
   align-items: end;
   gap: 0.5rem 0.75rem;
   margin-top: 0.6rem;
   padding-top: 0.6rem;
   border-top: 1px dashed #e0ae00;
}

.erb-config__field {
   display: flex;
   flex-direction: column;
   gap: 0.2rem;
   font-size: 0.68rem;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: #6b7585;
}

.erb-config__field input {
   width: 96px;
   font-weight: 700;
}

.erb-config__dirty {
   font-size: 0.7rem;
   font-weight: 700;
   color: #b45309;
}

.erb-config__dirty .fa-circle {
   font-size: 0.45rem;
   vertical-align: middle;
   margin-right: 0.2rem;
}

.erb-config__actions {
   display: flex;
   gap: 0.4rem;
   margin-left: auto;
}

.erb-btn-save {
   background: var(--ops-heading, #002546);
   color: #fff;
   border: 1px solid var(--ops-heading, #002546);
   font-weight: 600;
}

.erb-btn-save:hover:not(:disabled) {
   background: #1b4d7a;
   color: #fff;
}

.erb-btn-save.is-loading .fa-floppy-disk {
   animation: erb-sync-spin 0.8s linear infinite;
}

/* Interruptor */
.erb-switch {
   margin-left: auto;
   width: 38px;
   height: 20px;
   border-radius: 999px;
   border: none;
   padding: 2px;
   background: #c2c8d2;
   display: flex;
   justify-content: flex-start;
   cursor: pointer;
   transition: background 0.18s ease;
}

.erb-switch[aria-checked="true"] {
   background: var(--ops-heading, #002546);
   justify-content: flex-end;
}

.erb-switch__knob {
   width: 16px;
   height: 16px;
   border-radius: 999px;
   background: #fff;
   display: block;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Filas con contorno punteado mientras el modo está activo */
.erb--config-active .fx-spread-cell {
   outline: 1px dashed #e0ae00;
   outline-offset: -1px;
   cursor: context-menu;
}

.erb--config-active .fx-spread-cell.locked {
   cursor: context-menu;
}

/* Menú contextual */
.erb-context-menu {
   position: fixed;
   z-index: 1090;
   min-width: 220px;
   background: #fff;
   border: 1px solid var(--ops-border, #e4ecf1);
   border-radius: 12px;
   box-shadow: 0 12px 32px rgba(13, 34, 58, 0.18);
   overflow: hidden;
   padding: 0.25rem 0;
}

.erb-context-menu__title {
   font-size: 0.68rem;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: #6b7585;
   padding: 0.45rem 0.85rem 0.25rem;
}

.erb-context-menu__item {
   width: 100%;
   display: flex;
   align-items: center;
   gap: 0.6rem;
   padding: 0.5rem 0.85rem;
   border: none;
   background: transparent;
   font-size: 0.8rem;
   font-weight: 600;
   color: var(--ops-heading, #002546);
   text-align: left;
   cursor: pointer;
}

.erb-context-menu__item:hover:not(:disabled) {
   background: var(--ops-surface, #f9fbfd);
}

.erb-context-menu__item:disabled {
   opacity: 0.45;
   cursor: not-allowed;
}

.erb-swatch {
   width: 14px;
   height: 14px;
   border-radius: 4px;
   display: inline-block;
   border: 1px solid #c2c8d2;
}

.erb-swatch--locked {
   background: #e9ecef;
   border-color: #6c757d;
}

.erb-swatch--recommended {
   background: #cfe6ff;
   border-color: #0d6efd;
}

.erb-swatch--massive {
   background: #a8e0a0;
   border-color: #198754;
}

/* -------------------------------
   Hoja inferior (pantallas táctiles): mismo menú de .erb-context-menu, presentado
   como bottom sheet en vez de popover posicionado en el cursor. Ver isTouchLayout()
   en exchange-rate-board.js.
   ------------------------------- */
.erb-sheet-backdrop {
   position: fixed;
   inset: 0;
   background: rgba(15, 23, 42, 0.45);
   z-index: 1089;
}

.erb-context-menu--sheet {
   left: 0 !important;
   right: 0;
   bottom: 0;
   top: auto !important;
   width: 100%;
   min-width: 0;
   border-radius: 16px 16px 0 0;
   padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
   box-shadow: 0 -12px 32px rgba(13, 34, 58, 0.25);
   animation: erb-sheet-up 0.18s ease-out;
}

.erb-context-menu--sheet::before {
   content: "";
   display: block;
   width: 36px;
   height: 4px;
   border-radius: 999px;
   background: #c2c8d2;
   margin: 0.5rem auto 0.4rem;
}

.erb-context-menu--sheet .erb-context-menu__title {
   text-align: center;
   padding-top: 0;
}

.erb-context-menu--sheet .erb-context-menu__item {
   padding: 0.85rem 1.1rem;
   font-size: 0.95rem;
}

@keyframes erb-sheet-up {
   from {
      transform: translateY(100%);
   }
   to {
      transform: translateY(0);
   }
}