/*
 * Billing pages of the client area: invoices, quotes, paying what is pending (masspay.tpl) and paying by card or bank
 * account (invoice-payment.tpl). Only what area.css does not have; same variables and palette.
 */

/* the number of the invoice or quote links to it, in ink as in the mockup */
.area-fila .que a { color: var(--tinta); text-decoration: none; }
.area-fila .que a:hover { color: var(--link-color); text-decoration: underline; }
.area-fila a:focus-visible, .area-paginas a:focus-visible, .area-seccion > h2 a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: .2em; }
.area-paginas a { color: var(--link-color); }

/* the label of each date: only for screen readers on the desktop (the header row says it), visible on the phone */
.area-etiqueta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- paying what is pending: the invoices and their lines, the totals and how to pay ---------- */
.area-conceptos { list-style: none; margin: 0; padding: 0; display: grid; gap: .55em; }
.area-conceptos li { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; color: var(--texto); font-size: .93em; line-height: 1.45; }
.area-conceptos .importe { color: var(--tinta); font-weight: bold; white-space: nowrap; }
.area-totales { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: .5em; font-size: .93em; }
.area-totales dt { color: var(--texto); }
.area-totales dd { margin: 0; padding-left: 1.5em; text-align: right; color: var(--tinta); font-weight: bold; white-space: nowrap; }
.area-totales .total { margin-top: .4em; padding-top: .7em; border-top: 1px solid var(--linea); font-size: 1.1em; color: var(--tinta); font-weight: bold; }
.area-totales dd.total { color: var(--dark-primary-color); font-size: 1.35em; line-height: 1.1; }
.area-pagar .area-boton { width: 100%; margin-top: 1.1em; }
.area-pagar .area-campo + .area-campo { margin-top: 1em; }
.area-pagar > .area-nota { margin-top: 1em; }

/* ---------- paying an invoice by card or bank account ---------- */
.area fieldset.area-campo { border: 0; margin: 0; padding: 0; min-width: 0; }
.area fieldset.area-campo > legend { padding: 0; margin-bottom: .4em; }
.area-conceptos + .area-totales { margin-top: 1.1em; padding-top: 1em; border-top: 1px solid var(--linea); }
/* one choice per line (saved cards, billing address) */
.area-radios { display: grid; gap: .5em; }
.area-radio { display: flex; align-items: flex-start; gap: .7em; padding: .75em 1em; border: 2px solid var(--linea); border-radius: .5em; cursor: pointer; line-height: 1.45; color: var(--tinta); }
.area-radio:has(input:checked) { border-color: var(--primary-color); background: var(--fondo); }
.area-radio:has(input:disabled) { cursor: default; color: var(--gris); }
/* a real radio (style.css gives every input appearance: none, a border, full width and a 2em margin) */
.area .area-radio input[type=radio] { flex: none; appearance: auto; -webkit-appearance: radio; width: 1.15em; height: 1.15em; padding: 0; border: 0; border-radius: 50%;
  box-shadow: none; margin: .15em 0 0; accent-color: var(--primary-color); }
.area-radio input:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.area-radio small { display: block; color: var(--gris); font-size: .85em; }
.area-radio i { color: var(--dark-primary-color); margin-right: .3em; }
/* a field with an error: red border and the message under it */
.area-campo .area-error { display: none; color: #b3261e; font-size: .85em; font-weight: bold; }
.area-campo.con-error .area-error { display: block; }
.area .area-campo.con-error :is(input, select) { border-color: #b3261e; }
.area input[type=number] { box-sizing: border-box; width: 100%; height: 48px; padding: 0 .9em; font: inherit; color: var(--tinta); border: 1px solid #6b8ca6; border-radius: .45em; background: #fff; }
/* errors from the form or the gateway: red notice (text #5c0b12 on #fdecee, 13:1) */
.area-aviso.rojo { background: #fdecee; border-left: 4px solid #d01c2a; color: #5c0b12; }
.area-aviso.rojo ul { margin: .3em 0 0; padding: 0; }
.area-aviso.rojo li { list-style: disc; margin-left: 1.2em; }
.area-aviso:empty { display: none; }
.area-pila > .area-aviso { margin-bottom: 0; }
/* WHMCS's payment scripts show and hide blocks with this class */
.area .w-hidden { display: none !important; }
.area-tarjeta iframe { display: block; width: 100%; min-height: 600px; border: 0; }
.area-seguro { display: flex; align-items: center; gap: .6em; margin: 1.2em 0 0; color: var(--gris); font-size: .85em; line-height: 1.5; }
.area-seguro i { color: #1d7a45; }

@media (max-width: 760px) {
  .area-etiqueta { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; color: var(--gris); }
}