/* ============================================================
   planes.css — v7.19.7
   ------------------------------------------------------------
   Alinea la pagina Plan al lenguaje visual del modal de agenda
   (hl-modal), que quedo como referencia del sistema tras el
   refactor de 04.18 Auditoria Frontend.

   Escala medida en ese modal el 17-AGO-2026:
     titulo de seccion .... 17.6px / 600
     label ................ 11.52px / 500
     campo ................ 12.8px / 400 · alto 32 · radius 4
     boton de accion ...... 12.8px / 600 · alto 37 · radius 6
                            padding 8px 16px

   Azul primario de Horaly: #0d47a1 (el del navbar), NO el
   #0d6efd de fabrica de Bootstrap.

   SCOPED A ESTA PAGINA a proposito: no toca .btn global ni
   ningun HTML con JS inline. Cuando el patron se valide aca,
   se replica al resto del SaaS pagina por pagina.
   ============================================================ */

:root {
  --hl-blue: #0d47a1;
  --hl-blue-dark: #0a3a85;
  --hl-ink: #555;
  --hl-line: #ddd;
}

/* ---------- Botones: una sola forma para toda la pagina ----------
   v7.29.0 (`S3-13`): entran los dos de la card de canje. La lista es de
   selectores EXPLICITOS, asi que un boton nuevo que no se agregue aca sale
   con el default de fabrica y no con la forma de la pagina. Medido en
   pantalla el 01-SEP antes de este cambio: `#coupon-redeem-apply` daba
   48px de alto, padding 4px 8px, radio 10px, font 14px/400 y fondo
   #0d6efd — contra los 37px / 8px 16px / 6px / 12.8px / 600 / #0d47a1 de
   `#btn-automatic-payment`, que si estaba en la lista.

   ⚠️ HALLAZGO COLATERAL, NO ARREGLADO ACA: `#btn-choose-plan` y
   `#btn-contact-support` (los dos CTA que `A6-a` agrego a la caja en
   `v7.25.0`) tienen EXACTAMENTE la misma firma desalineada y tampoco
   estan en esta lista. Es preexistente y fuera del alcance de `S3-13`;
   se reporta para que sea una decision y no un descubrimiento. */
#btn-pay-subscription,
#btn-activate-plan,
#btn-automatic-payment,
#coupon-redeem-apply,
#coupon-redeem-clear,
#referral-card [data-referral="copy"],
.plan-card .btn,
.addon-buy-btn {
  min-height: 37px;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
}

/* El campo de la card de canje comparte la caja de su boton. v7.29.0 (`S3-13`)
   Sin esto `form-control-sm` lo deja en 31px contra los 37px del boton de al
   lado —medido en pantalla— y la fila queda con dos alturas. NO se toca el
   `padding`: el horizontal de un input es otra cosa que el de un boton, y
   `min-height` ya iguala la caja. Acompaña el salto tactil de la media
   query de abajo. */
#coupon-redeem-code,
#referral-card [data-referral="link"] {
  min-height: 37px;
  border-radius: 6px;
  font-size: 0.8rem;
}

/* El ancho del link de referido. v7.38.0 (`B`, sobre `S3-07`)
   Sale de aca y NO de un `style="max-width"` inline como tenia: el encargo de
   `S3-07` prohibia el literal y la card lo llevaba igual, sin declararlo. Es
   `max-width` y no `width` porque `form-control` es `width:100%` en Bootstrap y,
   dentro de un `d-flex flex-wrap`, sin tope el campo ocupa la fila entera y manda
   el boton "Copiar" a la linea siguiente. 320px cabe el link canonico
   `https://vet.horaly.app/r/XXXXXXXX` (35 caracteres) a 12.8px sin recortar;
   el de canje usa 220px inline para un codigo de 20, y ese inline NO se toca
   aca: es el vecino y el gate exige que quede byte a byte igual. */
#referral-card [data-referral="link"] {
  max-width: 320px;
}

/* Primarios. Incluye el .btn-primary que renderPlanActions() inyecta en el
   plan de upgrade: sin esto queda con el #0d6efd de fabrica de Bootstrap. */
#btn-pay-subscription,
#btn-activate-plan,
#btn-automatic-payment,
#coupon-redeem-apply,
#referral-card [data-referral="copy"],
.plan-card .btn-primary {
  background-color: var(--hl-blue);
  border-color: var(--hl-blue);
}
#btn-pay-subscription:hover,
#btn-activate-plan:hover,
#btn-automatic-payment:hover,
#coupon-redeem-apply:hover,
#referral-card [data-referral="copy"]:hover,
.plan-card .btn-primary:hover {
  background-color: var(--hl-blue-dark);
  border-color: var(--hl-blue-dark);
}

/* Secundario de accion (Agregar add-ons) */
.addon-buy-btn {
  color: var(--hl-blue);
  border-color: var(--hl-blue);
}
.addon-buy-btn:hover {
  background-color: var(--hl-blue);
  border-color: var(--hl-blue);
  color: #fff;
}

/* Neutro (Cambiar plan, "Usar otro codigo"): mismo tratamiento que la barra
   de presupuestos */
#coupon-redeem-clear,
.plan-card .btn-outline-secondary {
  color: var(--hl-ink);
  border-color: var(--hl-line);
}
#coupon-redeem-clear:hover,
.plan-card .btn-outline-secondary:hover {
  color: var(--hl-blue);
  border-color: var(--hl-blue);
  background-color: transparent;
}

/* ---------- Tipografia: una sola escala ---------- */
.card-title {
  font-size: 1.1rem;   /* 17.6px, igual que el titulo del modal */
  font-weight: 600;
}
h6.fw-bold {
  font-size: 0.875rem; /* 14px: un escalon claro por debajo del titulo */
  font-weight: 600;
}

/* ---------- Area tactil ---------- */
/* 48px es el piso que el sistema ya usaba en touch (WCAG 2.5.8). */
@media (max-width: 767px) {
  #btn-pay-subscription,
  #btn-activate-plan,
  #btn-automatic-payment,
  #coupon-redeem-apply,
  #coupon-redeem-clear,
  #coupon-redeem-code,
  #referral-card [data-referral="copy"],
  #referral-card [data-referral="link"],
  .plan-card .btn,
  .addon-buy-btn {
    min-height: 48px;
  }
}

/* ---------- Hover: feedback claro sin deformar el boton ---------- */
#btn-pay-subscription,
#btn-activate-plan,
#btn-automatic-payment,
#coupon-redeem-apply,
#coupon-redeem-clear,
#referral-card [data-referral="copy"],
.plan-card .btn,
.addon-buy-btn {
  transition: background-color .15s ease, border-color .15s ease,
              color .15s ease, box-shadow .15s ease, transform .15s ease;
}

#btn-pay-subscription:hover,
#btn-activate-plan:hover,
#btn-automatic-payment:hover,
#coupon-redeem-apply:hover,
#coupon-redeem-clear:hover,
#referral-card [data-referral="copy"]:hover,
.plan-card .btn:hover,
.addon-buy-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(13, 71, 161, .22);
}

#btn-pay-subscription:active,
#btn-activate-plan:active,
#btn-automatic-payment:active,
#coupon-redeem-apply:active,
#coupon-redeem-clear:active,
#referral-card [data-referral="copy"]:active,
.plan-card .btn:active,
.addon-buy-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(13, 71, 161, .18);
}

/* ---------- Add-ons inhabiles: el gating por estado TIENE que verse ----------
   v7.25.0 (`A.1`). `initAddonCards()` deshabilita los cuatro botones cuando la cuenta
   no tiene un plan vigente, pero `.addon-buy-btn` de arriba fija `color` y
   `border-color` azules SIN pseudo-clase, asi que ganan sobre el `:disabled` de
   Bootstrap — que solo aporta `opacity:.65`. Medido en pantalla el 26-AGO: el boton
   bloqueado se leia practicamente igual que el sano.

   Un modo degradado indistinguible del normal no es un modo degradado; es el mismo
   defecto con otra cara. Por eso ademas de la nota de `#addons-blocked-note` la card
   entera se atenua con `.addon-card-off`, que pone el JS.

   `pointer-events: auto` es deliberado: revierte el `pointer-events:none` de Bootstrap
   para que el cursor `not-allowed` se vea al pasar por encima. El click lo sigue
   bloqueando el atributo `disabled`, que es la barrera real.

   ⚠️ EL COLOR SE PINTA DESDE `.addon-card-off`, NO DESDE `:disabled`, y es por una
   medicion, no por gusto. Con la regla escrita como `.addon-buy-btn:disabled` Chrome
   NO repintaba `color` ni `border-color` al deshabilitar el boton por script: quedaban
   azules. Y son EXACTAMENTE las dos propiedades que `.addon-buy-btn` lista en su
   `transition` — `cursor` y la `opacity` de la card, que no estan ahi, si aplicaban.
   Un clon del mismo nodo insertado al lado SI salia gris, o sea el CSS era correcto y
   lo que fallaba era la invalidacion de estilo ante el cambio de pseudo-clase.
   Medido el 26-AGO-2026 en Chrome, en carga limpia y reproducible.

   Cambiar una clase en un ANCESTRO invalida de forma fiable, asi que el eje pasa a ser
   `.addon-card-off` —que `initAddonCards()` ya pone en la card—. Las variantes con
   `:disabled` se CONSERVAN abajo como red: cubren el caso de un boton deshabilitado
   por otra via, y no dependen de que el repintado ocurra. */
.addon-card-off .addon-buy-btn,
.addon-buy-btn:disabled,
.addon-buy-btn[disabled] {
  /* `transition: none` PRIMERO y no como adorno: `.addon-buy-btn` transiciona `color` y
     `border-color`, y medido en Chrome el 26-AGO esas dos —y solo esas dos— NO se
     repintaban al bloquear el boton, mientras `cursor` y la `opacity` de la card, que
     no estan en la transition, si. Quitandola de la ecuacion el valor se aplica al
     instante y el estado inhabil se ve. Un boton bloqueado no tiene ningun estado del
     que salir suavemente: la transicion no aporta nada aca. */
  transition: none;
  color: var(--hl-ink);
  border-color: var(--hl-line);
  background-color: transparent;
  opacity: 1;
  cursor: not-allowed;
  pointer-events: auto;
}
.addon-card-off .addon-buy-btn:hover,
.addon-buy-btn:disabled:hover,
.addon-buy-btn[disabled]:hover {
  color: var(--hl-ink);
  border-color: var(--hl-line);
  background-color: transparent;
  transform: none;
  box-shadow: none;
}
.addon-card-off {
  opacity: .55;
}
.addon-card-off:hover {
  transform: none;
  box-shadow: none;
}

/* En touch el :hover queda pegado despues del tap: se desactiva. */
@media (hover: none) {
  #btn-pay-subscription:hover,
  #btn-activate-plan:hover,
  #btn-automatic-payment:hover,
  .plan-card .btn:hover,
  .addon-buy-btn:hover {
    transform: none;
    box-shadow: none;
  }
}

/* ============================================================
   Card de pago automatico — destacada a proposito.
   Objetivo comercial: cada clinica en pago automatico es una que
   no se cae por un pago olvidado. Se destaca DENTRO del sistema:
   el mismo #0d47a1 al 18%, no un color nuevo.
   ============================================================ */
#automatic-payment-section.hl-promo {
  background: #f6f9ff;
  border: 1px solid rgba(13, 71, 161, .18);
  box-shadow: 0 1px 4px rgba(13, 71, 161, .07);
}

#automatic-payment-section.hl-promo .card-title,
#automatic-payment-section.hl-promo .card-title i {
  color: var(--hl-blue);
}

/* El subtitulo es la propuesta de valor, no un estado: se lee entero.
   Va por CSS y no con <strong> porque oneclick-inscription.js lo asigna
   con textContent, y esa misma linea interpola datos del backend. */
#automatic-payment-section.hl-promo #automatic-payment-status {
  color: var(--hl-blue);
  font-weight: 600;
}

/* La nota de los $50 en blanco: se lee como aparte dentro de la card
   destacada, en vez de fundirse con el fondo azul. */
#automatic-payment-section.hl-promo .alert {
  background: #fff;
  border-color: rgba(13, 71, 161, .14);
}

/* TODO(v7.19.1): el badge deberia ser un <span class="badge"> en el HTML.
   Va por ::after para no tocar markup con JS inline; el contenido puesto
   por CSS no siempre lo anuncian los lectores de pantalla. */
#automatic-payment-section.hl-promo #automatic-payment-title::after {
  content: 'Recomendado';
  margin-left: 8px;
  background: var(--hl-blue);
  color: #fff;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 99px;
  vertical-align: middle;
}

/* v7.19.5: iba con :not(.hl-promo), que tambien alcanza el instante previo a
   que responda el backend — o sea pintaba "Cargando método de pago..." en verde
   negrita, afirmando un estado que todavia no se sabia. Ahora exige .hl-ok. */
#automatic-payment-section.hl-ok #automatic-payment-status {
  color: #146c43;
  font-weight: 600;
}

/* El badge "Plan Activo" ocupa la misma columna que los botones de las otras
   cards, asi que necesita su misma caja o la fila queda desalineada. Misma
   altura, padding y radius que el boton de accion (§5.1 de HRL-VET/SPEC/009). */
/* v7.22.0 (S2-04): reapuntada de `.badge` a `.hl-badge`. `line-height` y
   `letter-spacing` son NUEVAS acá pero no cambian nada: las aportaba `.badge`
   —Bootstrap da `line-height:1`, el `.badge` de style.css da
   `letter-spacing:.1px`— y se perdian al quitar la clase. */
.plan-card .hl-badge {
  min-height: 37px;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .1px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 767px) {
  .plan-card .hl-badge {
    min-height: 48px;
  }
}

/* ============================================================
   Badge de estado del plan (#plan-status-badge). Es el unico
   indicador de que la cuenta esta caida: debe tener el peso de
   un boton, no el de una etiqueta.
   ============================================================ */
/* v7.22.0 (S2-04): reapuntada de `.badge` a `.hl-badge`. Ver la nota de
   `.plan-card .hl-badge` por que `line-height` y `letter-spacing` aparecen acá. */
#plan-status-badge .hl-badge {
  min-height: 30px;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .1px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ============================================================
   Encabezado del plan (#plan-name + #plan-price).
   Es lo primero que se lee en la pagina y hasta ahora tenia el
   peso de un subtitulo cualquiera. El monto es el dato que la
   clinica viene a buscar: se le da jerarquia propia.
   El .text-muted salio del HTML, no se peleo con !important
   (mismo criterio que la nota de los $50, D-2 de SPEC/009).
   ============================================================ */
#plan-name {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: #212529;
}

.card-title .bi-credit-card {
  color: var(--hl-blue);
}

#plan-price {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 2px;
}

#plan-price .hl-price-amount {
  font-size: 1rem;
  font-weight: 700;
  color: var(--hl-blue);
  letter-spacing: -0.2px;
}

#plan-price .hl-price-note {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--hl-ink);
}

/* ============================================================
   Caja de facturacion (#billing-info-container).
   Antes era un rectangulo gris igual en los cuatro estados de la
   suscripcion: activa, trial, vencida y sin pago. El estado del
   cobro es informacion critica —de el depende que la cuenta siga
   operando— asi que la caja lo dice con color, no solo con texto.
   Las tres clases las pone planes.js segun subscription_status.

   El .border salio del HTML: la utilidad de Bootstrap trae
   !important y ganaba por encima del id (D-2 de SPEC/009).
   ============================================================ */
#billing-info-container {
  border: 1px solid var(--hl-line);
  background: #fafafa;
  transition: background-color .15s ease, border-color .15s ease;
}

#billing-info-container #billing-label {
  color: var(--hl-ink);
  font-weight: 500;
}

#billing-info-container #next-billing-date {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.1px;
}

#billing-info-container .bi {
  font-size: 1rem;
}

/* Al dia: el mismo azul del sistema, en su version tranquila. */
#billing-info-container.hl-state-ok {
  background: #f6f9ff;
  border-color: rgba(13, 71, 161, .18);
}
#billing-info-container.hl-state-ok #billing-icon,
#billing-info-container.hl-state-ok #next-billing-date {
  color: var(--hl-blue);
}

/* Trial o sin suscripcion: pendiente, no roto. Ambar. */
#billing-info-container.hl-state-warn {
  background: #fffbf2;
  border-color: rgba(255, 193, 7, .40);
}
#billing-info-container.hl-state-warn #billing-icon,
#billing-info-container.hl-state-warn #next-billing-date {
  color: #9a6b00;
}

/* Vencida o pago pendiente: el unico estado que corta la operacion.
   Mismo rojo del badge de arriba para que se lean como una sola
   alerta y no como dos avisos distintos. */
#billing-info-container.hl-state-danger {
  background: #fff5f5;
  border-color: rgba(220, 53, 69, .28);
  box-shadow: 0 1px 4px rgba(220, 53, 69, .06);
}
#billing-info-container.hl-state-danger #billing-icon,
#billing-info-container.hl-state-danger #next-billing-date {
  color: #b02a37;
}

/* ============================================================
   Estado Trial. Antes convivian dos amarillos distintos pegados:
   el alert-warning de fabrica (#fff3cd) y el ambar de la caja de
   facturacion. Y el badge iba en bg-warning + text-dark, con otro
   peso que bg-success y bg-danger, que son solidos.
   Aca queda una sola familia ambar con tres pesos: aviso (empuja),
   caja (informa), badge (rotula).
   ============================================================ */

/* El badge se rotula desde planes.js con esta clase y no con bg-warning:
   las utilidades de fondo y texto de Bootstrap traen !important y el color
   no se podia alinear desde aca (D-2 de SPEC/009). */
.hl-badge-trial {
  background-color: #9a6b00;
  color: #fff;
}

/* ============================================================
   v7.22.0 (S2-04) — familia hl-badge en esta pagina
   ============================================================
   Tacha `badge` de las ~30 clases de Bootstrap que 04.18 enumera para
   remover. La forma NO la aporta `.hl-badge` de style.css: esa es el badge
   de TABLA (su comentario lo dice) y es mas chica. La forma de esta pagina
   la dan las reglas de v7.19.5/v7.19.7, reapuntadas de `.badge` a
   `.hl-badge` mas arriba en este mismo archivo — mismos valores, mismo
   render, incluida la variante mobile de `.plan-card`.

   Medido, no deducido: delta visual cero en 11 badges x 13 propiedades. */

/* El badge de limite ampliado no lo alcanza ninguna de las reglas de arriba:
   su forma salia de Bootstrap directo, y por eso es la unica que NO es un
   reapuntado sino una transcripcion. `gap:normal` neutraliza el `gap:.2rem`
   que `.hl-badge` trae y que aca no corresponde. */
#plan-limits-container .hl-badge {
  display: inline-block;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .1px;
  padding: .35em .65em;
  border-radius: 6px;
  gap: normal;
}

/* Color, dos propiedades por clase, mismo eje que .hl-badge-trial: la clase
   se nombra por ESTADO y no por tono. `expired` y `past-due` comparten valor
   hoy y son dos clases igual — un trial que nunca pago y un plan pagado que
   vencio piden distinto remedio, y el dia que el tono diverja se edita un
   valor en vez de partir la clase en cuatro sitios. */
.hl-badge-active    { background-color: #198754; color: #fff; }
.hl-badge-expired   { background-color: #dc3545; color: #fff; }
.hl-badge-past-due  { background-color: #dc3545; color: #fff; }
.hl-badge-inactive  { background-color: #6c757d; color: #fff; }
.hl-badge-scheduled { background-color: #ffc107; color: #212529; }
.hl-badge-uplift    { background-color: #198754; color: #fff; }

/* El aviso ya no repite la fecha —esa vive en la caja de abajo—: lleva la
   cuenta regresiva y el motivo para actuar. Por eso pesa mas que la caja. */
/* ---------- Familia de avisos: reemplaza .alert de Bootstrap ----------
   Mismo rol, pero con la caja del sistema (radius 6, 0.8rem) y una barra
   izquierda que dice la severidad sin ocupar toda la fila de color.

   .hl-trial-alert es el tono warn con nombre propio, porque su markup vive
   fijo en planes.html. #plan-alert recibe el tono desde planes.js segun los
   dias que falten para el cobro.

   Los .alert-* de fabrica no se podian retonar desde aca: sus variables
   --bs-alert-* se resuelven dentro de .alert y el color de fondo va con
   !important. Se cambia la clase en el origen (D-2 de SPEC/009). */
.hl-notice,
.hl-trial-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  margin-bottom: 12px;
  border: 1px solid;
  border-left-width: 3px;
  border-radius: 6px;
  font-size: 0.8rem;
  line-height: 1.35;
}

.hl-notice .bi,
.hl-trial-alert .bi {
  font-size: 1rem;
  flex-shrink: 0;
}

.hl-notice strong,
.hl-trial-alert strong {
  font-weight: 700;
}

/* Pendiente, no roto. */
.hl-notice-warn,
.hl-trial-alert {
  background: #fff8e8;
  border-color: rgba(217, 158, 0, .35);
  border-left-color: #d99e00;
  color: #7a5500;
}
.hl-notice-warn .bi,
.hl-trial-alert .bi { color: #9a6b00; }
.hl-notice-warn strong,
.hl-trial-alert strong { color: #6b4a00; }

/* Informativo: el azul del sistema, no el #0d6efd de fabrica. */
.hl-notice-info {
  background: #f6f9ff;
  border-color: rgba(13, 71, 161, .20);
  border-left-color: var(--hl-blue);
  color: #33475f;
}
.hl-notice-info .bi { color: var(--hl-blue); }
.hl-notice-info strong { color: var(--hl-blue-dark); }

/* Corta la operacion. Mismo rojo que el badge y que la caja de facturacion,
   para que los tres se lean como una sola alerta. */
.hl-notice-danger {
  background: #fff5f5;
  border-color: rgba(220, 53, 69, .28);
  border-left-color: #b02a37;
  color: #8a2029;
}
.hl-notice-danger .bi { color: #b02a37; }
.hl-notice-danger strong { color: #8a2029; }

/* Cumplido. Verde EXCLUSIVO del eje de pago automatico: el mismo #146c43 de
   #automatic-payment-section.hl-ok, para que la card y su aviso se lean como
   una sola confirmacion. En el resto de la pagina el verde no significa nada,
   y por eso aca puede significar una sola cosa (v7.19.5). v7.21.0 */
.hl-notice-ok {
  background: #f2f9f5;
  border-color: rgba(20, 108, 67, .25);
  border-left-color: #146c43;
  color: #14603a;
}
.hl-notice-ok .bi { color: #146c43; }
.hl-notice-ok strong { color: #0f4a2d; }

/* ---------- Barras de limite del plan ----------
   Iban en .bg-primary (#0d6efd de fabrica, no el #0d47a1 de Horaly) y en
   .bg-warning al llegar al tope, que era un cuarto amarillo en una pagina
   que ya tenia una familia ambar. Las clases se cambiaron en planes.js
   porque las utilidades de fondo traen !important. */
#plan-limits-container .progress {
  background-color: #eceff4;
  border-radius: 99px;
}

#plan-limits-container .hl-bar {
  background-color: var(--hl-blue);
}

/* Tope alcanzado: mismo ambar del aviso de trial, no el #ffc107 de fabrica. */
#plan-limits-container .hl-bar-full {
  background-color: #d99e00;
}

/* ---------- Segunda linea de la caja de facturacion ----------
   Arriba va el dato duro en negrita; aca va lo que ese dato significa para la
   clinica, en peso normal. Separarlos es lo que evita frases como
   "Vencido — renueva tu plan", donde un estado y una instruccion peleaban por
   la misma negrita y el corte en minuscula se leia como salida de maquina.
   Se alinea bajo el texto, no bajo el icono: 16px de icono + 8px de gap. */
#billing-note {
  margin-left: 24px;
  font-size: 0.78rem;
  line-height: 1.4;
  max-width: 52ch;
}

#billing-info-container.hl-state-ok #billing-note { color: #33475f; }
#billing-info-container.hl-state-warn #billing-note { color: #7a5500; }
#billing-info-container.hl-state-danger #billing-note { color: #8a2029; }

@media (max-width: 767px) {
  #billing-note { margin-left: 0; }
}

/* ============================================================
   Cards de plan. Estas cuatro reglas vivian en un <style> inline
   dentro de planes.html, con #0d6efd —el azul de fabrica de
   Bootstrap— escrito a mano y con !important. O sea: el borde del
   plan marcado, que es justo lo que la pagina quiere destacar,
   se pintaba en un azul que no es el de Horaly y que planes.css
   no podia corregir. Se movieron aca y se retonaron.

   El !important se queda: pelea contra la utilidad .border-primary
   de Bootstrap, que tambien lo trae.
   ============================================================ */
.plan-card,
.addon-card {
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease,
              transform .2s ease, box-shadow .2s ease;
}

.plan-card:hover,
.addon-card:hover {
  border-color: var(--hl-blue) !important;
  background-color: #f6f9ff;
}

.addon-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(13, 71, 161, .15);
}

/* El plan que la clinica tiene hoy. Es el unico destaque de la lista:
   borde azul lleno y fondo tenue, un escalon mas fuerte que el hover. */
.plan-card.border-primary {
  border-color: var(--hl-blue) !important;
  background-color: #eef4ff;
}

/* Secundario dentro de la card: mismo azul, sin relleno. La jerarquia
   entre "tu plan" y "los otros" se hace con solido vs outline. */
.plan-card .btn-outline-primary {
  color: var(--hl-blue);
  border-color: var(--hl-blue);
}
.plan-card .btn-outline-primary:hover {
  background-color: var(--hl-blue);
  border-color: var(--hl-blue);
  color: #fff;
}

/* ============================================================
   Pago automatico — el estado sano tambien se destaca.
   Antes la card solo resaltaba cuando faltaba activar; una vez
   activa volvia a ser una card cualquiera. Pero que una clinica
   tenga pago automatico es el mejor estado posible de esta
   pagina: merece verse asi, no desaparecer.

   El verde vive SOLO en este eje. En las cards de plan se saco a
   proposito (ahi la jerarquia es solido vs outline del mismo
   azul), justamente para que aca pueda significar una sola cosa:
   "el cobro esta resuelto".
   ============================================================ */

/* --- Falta activar: la accion deseada se lleva el verde solido --- */
#automatic-payment-section.hl-promo #btn-automatic-payment {
  background-color: #198754;
  border-color: #198754;
}
#automatic-payment-section.hl-promo #btn-automatic-payment:hover {
  background-color: #146c43;
  border-color: #146c43;
}
#automatic-payment-section.hl-promo #btn-automatic-payment:hover {
  box-shadow: 0 3px 10px rgba(25, 135, 84, .28);
}

/* --- Ya activo: la card entera pasa a verde tenue --- */
#automatic-payment-section.hl-ok {
  background: #f3faf6;
  border: 1px solid rgba(25, 135, 84, .28);
  box-shadow: 0 1px 4px rgba(25, 135, 84, .08);
}

#automatic-payment-section.hl-ok .card-title,
#automatic-payment-section.hl-ok .card-title i {
  color: #146c43;
}

/* Ya activo el boton es "Cambiar tarjeta": accion secundaria. No debe
   competir con el estado — el protagonista aca es el verde de la card. */
#automatic-payment-section.hl-ok #btn-automatic-payment {
  background-color: transparent;
  border-color: rgba(25, 135, 84, .45);
  color: #146c43;
}
#automatic-payment-section.hl-ok #btn-automatic-payment:hover {
  background-color: #198754;
  border-color: #198754;
  color: #fff;
  box-shadow: 0 3px 10px rgba(25, 135, 84, .28);
}

/* La nota de los $50 en blanco, igual que en el estado promo: se lee como
   aparte y no se funde con el fondo de la card. */
#automatic-payment-section.hl-ok .alert {
  background: #fff;
  border-color: rgba(25, 135, 84, .18);
}

/* TODO(v7.20.0): igual que 'Recomendado', esto deberia ser un <span class="badge">
   en el HTML. Va por ::after para no tocar markup que oneclick-inscription.js
   reescribe; el contenido puesto por CSS no siempre lo anuncian los lectores. */
#automatic-payment-section.hl-ok #automatic-payment-title::after {
  content: 'Activo';
  margin-left: 8px;
  background: #198754;
  color: #fff;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 99px;
  vertical-align: middle;
}

/* ============================================================
   Modales de la pagina (upgrade, downgrade, cancelar).
   El cascaron ya era hl-modal desde v7.0.11, pero los botones del
   pie seguian siendo Bootstrap crudo: btn-secondary #6c757d,
   btn-primary #0d6efd, btn-warning #ffc107. Tres colores que no
   usa nada mas en Horaly, en el momento en que la clinica decide
   cambiar de plan.

   La referencia es #newBookingModal en agenda.css:610 — el pie de
   modal usa una variante MAS SUTIL que el boton de accion de
   pagina: 26px y radio 5, no 37px y radio 6. Esa variante no esta
   documentada en SPEC/009 §5.1; es un vacio del spec, no una
   contradiccion.
   ============================================================ */
.hl-modal-footer .btn {
  height: 26px;
  min-height: 26px;
  padding: 0 0.45rem;
  font-size: 0.77rem;
  font-weight: 600;
  border-radius: 5px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}

.hl-modal-footer .btn i {
  font-size: 0.8rem;
}

/* Neutro (Cancelar): SPEC/009 §5.1, rol 3. Blanco, borde #ddd, texto #555;
   en hover borde y texto pasan al azul y el fondo no se mueve. */
.hl-modal-footer .btn-secondary {
  background-color: #fff;
  border-color: var(--hl-line);
  color: var(--hl-ink);
}
.hl-modal-footer .btn-secondary:hover {
  background-color: #fff;
  border-color: var(--hl-blue);
  color: var(--hl-blue);
}

/* Confirmar upgrade: primario. */
.hl-modal-footer .btn-primary {
  background-color: var(--hl-blue);
  border-color: var(--hl-blue);
}
.hl-modal-footer .btn-primary:hover {
  background-color: var(--hl-blue-dark);
  border-color: var(--hl-blue-dark);
}

/* Confirmar downgrade: el ambar de la pagina, no el #ffc107 de fabrica.
   Con texto blanco: #ffc107 con texto negro no alcanza contraste a 12.3px. */
.hl-modal-footer .btn-warning {
  background-color: #d99e00;
  border-color: #d99e00;
  color: #fff;
}
.hl-modal-footer .btn-warning:hover {
  background-color: #b98600;
  border-color: #b98600;
  color: #fff;
}

/* Cancelar suscripcion: el mismo rojo del badge y de la caja vencida. */
.hl-modal-footer .btn-danger {
  background-color: #b02a37;
  border-color: #b02a37;
}
.hl-modal-footer .btn-danger:hover {
  background-color: #8a2029;
  border-color: #8a2029;
}

/* Area tactil: agenda.css deja el pie en 26px tambien en movil, por debajo
   del piso de 48px (WCAG 2.5.8) que SPEC/009 §5.1 declara no negociable para
   el boton de accion. Aca se sube a 40px. Es una divergencia deliberada y
   declarada: la correccion deberia aplicarse tambien a #newBookingModal. */
@media (max-width: 767px) {
  .hl-modal-footer .btn {
    height: 40px;
    min-height: 40px;
    padding: 0 0.9rem;
    font-size: 0.8rem;
  }
}

/* ---------- Cuerpo de los modales de cambio de plan ---------- */
#upgradeModalBody .table,
#downgradeModalBody .table {
  font-size: 0.9rem;      /* 14.4px — el cuerpo del modal hereda 16px del body,
                             asi que 12.8px se leia como letra chica dentro de
                             una caja grande. La escala de 0.8rem es para la
                             pagina, no para el interior de un modal. */
  margin-bottom: 0.75rem;
}

#upgradeModalBody .table td,
#downgradeModalBody .table td {
  padding: 7px 8px;
  vertical-align: middle;
  border-color: #eceff4;
}

#upgradeModalBody .table td.text-muted,
#downgradeModalBody .table td.text-muted {
  color: var(--hl-ink) !important;   /* .text-muted trae !important */
  font-weight: 500;
}

/* Fila del total: era .table-active (gris de fabrica). Se lee como cierre
   de la cuenta, en el azul del sistema. */
#upgradeModalBody .table tr.table-active td,
#downgradeModalBody .table tr.table-active td {
  --bs-table-accent-bg: transparent;
  background-color: #f6f9ff;
  color: var(--hl-blue-dark);
  border-top: 1px solid rgba(13, 71, 161, .18);
}

/* El credito por dias no usados es plata a favor de la clinica: verde, la
   misma lectura que el pago automatico resuelto. */
#upgradeModalBody .text-success {
  color: #146c43 !important;
  font-weight: 600;
}

#upgradeModalBody p.text-muted,
#downgradeModalBody p.text-muted {
  color: var(--hl-ink) !important;
  font-size: 0.82rem;
  line-height: 1.45;
}

/* El parentesis aclaratorio dentro de una celda: un escalon abajo del dato,
   no dos. Sin esto .small lo dejaba en 12.6px contra los 14.4px de la fila. */
#upgradeModalBody .table .small,
#downgradeModalBody .table .small {
  font-size: 0.8rem;
  color: var(--hl-ink) !important;
}