/**
 * dbwithdrawal — override Agatha v2 — escape-hatch CSS mínimo.
 *
 * Solo lo que las utilities tw: NO pueden hacer:
 * (1) línea conectora del stepper (::before positional)
 * (2) apilado responsive de tablas en móvil (data-label)
 * (3) @keyframes del spinner de botón
 * (4) pseudo-elementos del separador "o" (::before / ::after)
 * (5) bullet ::before del timeline
 * (6) rotación del icono del acordeón en estado expandido
 * (7) dimensiones del panel del modal de plazo vencido
 *
 * Colores, tipografía, espaciado y layout → utilidades tw: en los TPL.
 *
 * @author    DevBlinders <programacion@blindersgroup.com>
 * @copyright 2026 Blinders Group
 * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0
 */

/* ==========================================================================
   (1) STEPPER — línea conectora entre círculos
   ========================================================================== */

.db-withdrawal__progress-track::before {
  content: '';
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  right: 1.5rem;
  height: 1px;
  background-color: var(--color-n-30, #D0D5DD);
  z-index: 0;
}

/* ==========================================================================
   (2) TABLAS RESPONSIVAS — apilado en móvil con data-label
   ========================================================================== */

/* Portal tabla (status-list) */
.db-withdrawal__portal-table thead {
  display: none;
}

.db-withdrawal__portal-table td {
  display: block;
  padding: 0.4rem 0.6rem;
  text-align: left;
  border: none;
  position: relative;
  padding-left: 50%;
}

.db-withdrawal__portal-table td::before {
  content: attr(data-label);
  position: absolute;
  left: 0.6rem;
  font-weight: 600;
  color: var(--color-n-60, #475467);
  white-space: nowrap;
}

.db-withdrawal__portal-row {
  display: block;
  border: 1px solid var(--color-n-20, #EAECF0);
  border-radius: 4px;
  margin-bottom: 0.75rem;
  padding: 0.5rem 0;
  background-color: #fff;
}

.db-withdrawal__portal-action {
  display: block;
  padding: 0.5rem 0.6rem !important;
  text-align: left;
}

.db-withdrawal__portal-action::before {
  display: none !important;
}

@media (min-width: 640px) {
  .db-withdrawal__portal-table thead {
    display: table-header-group;
  }

  .db-withdrawal__portal-table td {
    display: table-cell;
    padding: 0.65rem 0.75rem;
    padding-left: 0.75rem;
    border: 1px solid var(--color-n-20, #EAECF0);
    vertical-align: middle;
  }

  .db-withdrawal__portal-table td::before {
    display: none;
  }

  .db-withdrawal__portal-row {
    display: table-row;
    border: none;
    border-radius: 0;
    margin-bottom: 0;
    padding: 0;
  }

  .db-withdrawal__portal-action {
    display: table-cell;
    padding: 0.65rem 0.75rem !important;
    text-align: center;
    white-space: nowrap;
  }
}

/* ==========================================================================
   (3) SPINNER — animación de botón en procesando (usado por front.js)
   ========================================================================== */

.db-withdrawal__btn-spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: db-w-spin 0.6s linear infinite;
  margin-right: 0.4em;
  vertical-align: middle;
}

@keyframes db-w-spin {
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   (7) TOTAL PARCIAL — visibilidad toggled por front.js (clase .is-visible)
   ========================================================================== */

.db-withdrawal__partial-total {
  display: none;
}

.db-withdrawal__partial-total.is-visible {
  display: flex;
}

/* ==========================================================================
   (4) SEPARADOR "o" — líneas laterales via pseudo-elementos
   ========================================================================== */

.db-withdrawal__separator::before,
.db-withdrawal__separator::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--color-n-20, #EAECF0);
}

/* ==========================================================================
   (5) TIMELINE — bullet circular via ::before
   ========================================================================== */

.db-withdrawal__timeline-item::before {
  content: '';
  position: absolute;
  left: calc(-1rem - 5px);
  top: 1rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-f-green-strong, #458057);
  border: 2px solid #fff;
}

/* ==========================================================================
   (6) ACORDEÓN — rotación del icono "+" cuando está expandido
   ========================================================================== */

.db-withdrawal__exempt-toggle[aria-expanded="true"] .db-withdrawal__exempt-toggle-icon {
  transform: rotate(45deg);
}

.db-withdrawal__exempt-toggle-icon {
  display: inline-block;
  transition: transform 0.2s ease;
}

/* ==========================================================================
   ENLACE DE FOOTER (gancho visual del hook hookDisplayFooter)
   ========================================================================== */

.db-withdrawal__footer-col {
  padding-top: 0.5rem;
}

.footer-container .db-withdrawal__footer-col a {
  color: #7a7a7a;
  text-decoration: none;
}

.footer-container .db-withdrawal__footer-col a:hover {
  color: #24b9d7;
}

/* ==========================================================================
   BOTÓN DE PEDIDO (historial y ficha de pedido — hooks externos)
   ========================================================================== */

.db-withdrawal__order-button-wrapper {
  margin-top: 0.75rem;
}

.db-withdrawal__deadline {
  color: var(--color-n-60, #475467);
  margin-bottom: 0.5rem;
}

.db-withdrawal__deadline strong {
  color: var(--color-n-80, #1D2939);
}

.db-withdrawal__order-ineligible {
  margin-top: 0.5rem;
}

.db-withdrawal__order-exempt-notice {
  color: var(--color-n-60, #475467);
  font-style: italic;
  display: block;
  margin-bottom: 0.4rem;
}

/* Tiles de "Mi cuenta" en temas NO-Agatha (displayCustomerAccount). Reutilizan la
 * caja de tarjeta del tema host (.link-item); aquí solo se dimensiona el icono SVG
 * y se agrupan título + descripción para que cuadren en cualquier layout del host. */
.db-withdrawal__account-icon {
  width: 1.9rem;
  height: auto;
  flex: 0 0 auto;
  color: var(--color-primary-70, #008997);
}
.db-withdrawal__account-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.db-withdrawal__account-title {
  font-weight: 600;
}
.db-withdrawal__account-desc {
  font-size: 0.875em;
  opacity: 0.85;
}

/* ==========================================================================
   (7) MODAL DE PLAZO VENCIDO — dimensiones del panel
   El DS de Agatha no compila utilidades tw-max-w-*, y los valores arbitrarios
   (tw-w-[560px]) tampoco entran en el bundle porque el build de Tailwind del
   tema no escanea los TPL de los modulos. El ancho va aqui, que es justo lo
   que este fichero existe para resolver.
   ========================================================================== */

.db-withdrawal__modal-panel {
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}