/*
 * Client area, "Mi cuenta" pages: details, contacts, users, profile, password and security, received emails,
 * payment methods, and the standalone account screens (choose an account, verify the email, new backup code).
 * Extends area.css (Diseño, piezas/whmcs-area, 30-10-2026) with what those pages need and it does not have.
 * Every text colour here is 4.5:1 or more against its background.
 */

/* ---------- notices: green when something went well, red for errors (WHMCS flash messages, form errors) ---------- */
.area-aviso.verde { background: #eaf6ef; border-left: 4px solid #2e9d5b; color: #134d2c; }
.area-aviso.rojo { background: #fdeeed; border-left: 4px solid #d01c2a; color: #7a1414; }
.area-aviso ul { margin: .3em 0 0; padding-left: 1.2em; flex: 1 1 100%; }
.area .area-aviso ul > li { list-style: disc; margin: .15em 0 0; }
.area-aviso a { color: inherit; font-weight: bold; }
.area-aviso .area-boton-sec { margin-left: auto; }

/* ---------- forms ---------- */
/* a field the server rejected: red border and a short line under it */
.area .area-campo.con-error :is(input, select) { border-color: #d01c2a; }
.area-campo .error-campo { color: #b3261e; font-size: .82em; font-weight: bold; line-height: 1.4; }
.area-campo .error-campo:empty { display: none; }
/* a link-looking button next to a field ("Generar una por mí") */
.area-enlace { align-self: flex-start; min-height: 32px; padding: 0; border: 0; background: none; font: inherit; font-size: .88em; font-weight: bold; color: var(--link-color); text-decoration: underline; cursor: pointer; }
.area-enlace:hover { color: var(--secondary-color); }
.area-enlace:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: .2em; }
/* fields the client cannot change (WHMCS "uneditable" fields): grey, without the select arrow */
/* (.area-campo raises the specificity over area.css, which is linked after this file) */
.area .area-campo :is(input, select, textarea):disabled { background-color: #eef2f5; color: #4a5866; border-color: #b9c7d3; cursor: not-allowed; opacity: 1; -webkit-text-fill-color: #4a5866; }
.area .area-campo select:disabled { background-image: none; }
.area-campo .con-boton { display: flex; gap: .6em; }
.area-campo .con-boton input { flex: 1; min-width: 0; }
.area-campo .con-boton .area-boton-sec { flex: none; min-height: 48px; }
/* a group of choices with its own title (legend) */
.area fieldset.area-campo { border: 0; padding: 0; margin: 0; min-width: 0; }
.area fieldset.area-campo > legend { padding: 0; margin-bottom: .4em; }
/* switches in a list (email preferences, permissions) */
.area-interruptores { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1em 1.5em; }
.area-interruptores.uno { grid-template-columns: 1fr; }
.area-interruptor { position: relative; }
.area-seccion > .area-interruptor + .area-interruptor, .area-interruptores + .area-interruptor { margin-top: 1.1em; }
/* two choices in cards */
.area-opciones.dos { grid-template-columns: 1fr 1fr; }
.area-opcion { min-height: 48px; box-sizing: border-box; }
/* "Descartar" and friends inside the action bar, and the quiet delete link on its left */
.area-acciones-pie small { color: var(--texto); font-size: .85em; line-height: 1.45; }
/* grey on the light blue of the action bar: --gris gives 4.3:1, --texto 6.9:1 */
.area-acciones-pie .area-enlace-gris { min-height: 44px; color: var(--texto); }
.area .area-pie-lista { color: var(--texto); }
.area-acciones-pie .area-enlace-gris:hover { color: #b3261e; }
.area-enlace-gris:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: .2em; }

/* password strength: the four steps of area.css (n3 there), plus empty, weak, fair and very good */
.area-medidor b { min-width: 5.5em; }
.area-medidor.n0 b { color: var(--gris); font-weight: normal; }
.area-medidor.n1 i:nth-child(1) { background: #d01c2a; }
.area-medidor.n1 b { color: #b3261e; }
.area-medidor.n2 i:nth-child(-n+2) { background: #e0a100; }
.area-medidor.n2 b { color: #8a5a00; }
.area-medidor.n4 i:nth-child(-n+4) { background: #2e9d5b; }

/* sub-navigation between the account pages of one menu entry (password and security / access profile) */
.area-filtro a[aria-current="page"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.area-filtro.subnav a { min-height: 44px; box-sizing: border-box; }

/* ---------- lists ---------- */
/* contacts: name and email | action */
.area-lista.contactos .area-fila { grid-template-columns: minmax(0, 1fr) auto auto; }
/* users and invitations: email and last login | state | actions */
.area-lista.usuarios .area-fila { grid-template-columns: minmax(0, 1fr) auto minmax(14em, auto); }
/* received emails: date | subject | view */
.area-lista.correos .area-fila { grid-template-columns: 9em minmax(0, 1fr) auto; }
/* payment methods: name and description | state | actions */
.area-lista.pagos .area-fila { grid-template-columns: minmax(0, 1fr) auto minmax(14em, auto); }
.area-lista .accion { display: flex; flex-wrap: wrap; gap: .5em; justify-content: flex-end; align-items: center; }
.area-lista .accion form { display: contents; }
.area-lista .accion .area-boton, .area-lista .accion .area-boton-sec { padding: .5em 1em .45em; font-size: .9em; }
.area-fila .que .area-estado { margin-left: .4em; vertical-align: .1em; }
.area-lista:is(.contactos, .usuarios, .correos, .pagos) .que b, .area-cuentas .que b { overflow-wrap: anywhere; }
.area-fila.actual { background: var(--fondo); }
.area-fila.subtitulo { padding-top: .8em; padding-bottom: .6em; background: var(--fondo); }
.area-fila.subtitulo > * { font-size: .75em; letter-spacing: .12em; text-transform: uppercase; color: var(--texto); font-weight: bold; }
.area-fila .adjunto { color: var(--gris); font-size: .85em; white-space: nowrap; }
.area-mas { display: flex; justify-content: center; padding: 1em 1.5em; border-top: 1px solid var(--linea); }
.area-lista.vacia-dentro + .area-vacia { box-shadow: none; }
.area-pie-lista.solo { border-top: 0; }
/* the empty list: its title centred too (area.css's .area h2 aligns every h2 to the left) */
.area .area-vacia h2 { text-align: center; }

/* sections of one card stay apart even with hidden pieces between them (payment method form) */
.area-tarjeta > .area-seccion ~ .area-seccion { border-top: 1px solid var(--linea); }
.area-seccion > .area-mas-enlace { margin: .9em 0 0; }

/* what commits the client (how we charge): normal size and ink, never small or grey */
.area-compromete { margin: 0 0 1em; color: var(--tinta); line-height: 1.5; }
.area-opcion .compromete { display: block; margin-top: .2em; color: var(--tinta); font-size: .9em; line-height: 1.4; }
/* a status pill that leads somewhere (e.g. turn on two-step verification) */
a.area-estado { text-decoration: underline; }
a.area-estado:hover { text-decoration-thickness: 2px; }
a.area-estado:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* a short explanation at the foot of a card */
.area-nota-pie { margin: 0; padding: .9em 1.5em; border-top: 1px solid var(--linea); color: var(--gris); font-size: .85em; line-height: 1.5; }

/* ---------- two-step verification: the steps WHMCS sends, shown inside the card ---------- */
.area-2fa-pasos { margin-top: 1.2em; padding: 1.2em 1.3em; border: 1px solid var(--linea); border-radius: .5em; background: var(--fondo); color: var(--texto); line-height: 1.55; }
.area-2fa-pasos:focus { outline: none; }
.area-2fa-pasos p, .area-2fa-pasos h3, .area-2fa-pasos h4 { margin: 0 0 .9em; }
.area-2fa-pasos h3, .area-2fa-pasos h4 { font-size: 1em; color: var(--tinta); }
.area-2fa-pasos strong, .area-2fa-pasos b { color: var(--tinta); }
.area-2fa-pasos img { max-width: 100%; height: auto; }
.area-2fa-pasos [align="center"] { text-align: center; }
.area-2fa-pasos .twofa-module { display: flex; align-items: center; gap: 1em; padding: .9em 1em; margin-bottom: 1em; border: 2px solid var(--linea); border-radius: .6em; background: #fff; cursor: pointer; }
.area-2fa-pasos .twofa-module.active, .area-2fa-pasos .twofa-module:has(input:checked) { border-color: var(--primary-color); }
.area-2fa-pasos .twofa-module input { width: 1.2em; height: 1.2em; accent-color: var(--primary-color); }
.area-2fa-pasos .col-logo img { display: block; max-height: 2.4em; }
.area-2fa-pasos input[type=text], .area-2fa-pasos input[type=password], .area-2fa-pasos input:not([type]) { max-width: 18em; margin: 0 auto .9em !important; display: block; font-size: 1.15em !important; width: 100% !important; }
.area-2fa-pasos input[name=verifykey] { text-align: center; letter-spacing: .25em; }
.area-2fa-pasos :is(input[type=button], input[type=submit], button, .btn) { display: inline-flex; align-items: center; justify-content: center; width: auto; min-height: 44px; box-sizing: border-box; line-height: 1.2;
  padding: .6em 1.2em .55em; border-radius: .45em; border: 0; font: inherit; font-weight: bold; font-size: .95em; cursor: pointer; text-decoration: none;
  background: var(--brand-gradient); color: #fff; text-shadow: 0 1px .4px rgba(0,0,0,.35); box-shadow: 0 2px 6px rgba(0, 60, 110, .25); }
/* (same specificity as the rule above, and later; !important against style.css's white text on every .btn) */
.area-2fa-pasos :is(input, button, a):is(.btn-default, .btn-secondary, .btn-link) { background: #fff; color: var(--link-color) !important; border: 2px solid var(--link-color); text-shadow: none; box-shadow: none !important; }
.area-2fa-pasos :is(input, button, a):is(.btn-danger) { background: #d01c2a; text-shadow: none; }
.area-2fa-pasos :is(input[type=button], input[type=submit], button, .btn):focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.area-2fa-pasos :is(.admin-modal-error, .alert-danger, .alert-error) { padding: .8em 1em; margin: 0 0 1em; border-radius: .5em; background: #fdeeed; border-left: 4px solid #d01c2a; color: #7a1414; }
.area-2fa-pasos :is(.alert-success) { padding: .8em 1em; margin: 0 0 1em; border-radius: .5em; background: #eaf6ef; border-left: 4px solid #2e9d5b; color: #134d2c; }
.area-2fa-pasos :is(.alert-warning, .alert-info) { padding: .8em 1em; margin: 0 0 1em; border-radius: .5em; background: #fff8e6; border-left: 4px solid #e0a100; color: #4d3800; }
.area-2fa-pasos .cerrar { display: flex; justify-content: flex-end; margin-top: .4em; }
.area-2fa-pasos .cargando { margin: 0; color: var(--gris); }
/* a dialog with a form (a new billing address) */
.area-dialogo.ancho { width: min(720px, calc(100vw - 2em)); }
.area-dialogo .area-rejilla { margin-bottom: 1.4em; }
.area-dialogo .area-aviso p { margin: 0; }
/* a code to keep (backup code), easy to select */
/* (.area-sola / .area: over clientarea.css's code style) */
.area .area-codigo, .area-sola .area-codigo { display: block; margin: 0 auto 1em; padding: .7em 1em; max-width: 22em; border: 1px dashed var(--borde); border-radius: .5em; background: var(--fondo);
  font-family: Menlo, Consolas, monospace; font-size: 1.35em; letter-spacing: .12em; text-align: center; color: var(--tinta); word-break: break-all; user-select: all; }

/* ---------- choose an account (several clients for one login) ---------- */
.area-cuentas { list-style: none; margin: 0; padding: 0; }
.area .area-cuentas > li, .area-sola .area-cuentas > li { list-style: none; margin: 0; border-top: 1px solid var(--linea); }
.area-cuentas > li:first-child { border-top: 0; }
.area-cuentas button { display: flex; align-items: center; gap: .9em; width: 100%; box-sizing: border-box; min-height: 56px; padding: .9em 1.5em; border: 0; background: none;
  font: inherit; text-align: left; color: var(--tinta); cursor: pointer; }
.area-cuentas button:hover { background: var(--fondo); }
.area-cuentas button:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; }
.area-cuentas button:disabled { cursor: not-allowed; color: var(--texto); background: none; }
.area-cuentas .que { flex: 1; min-width: 0; }
.area-cuentas .que b { display: block; line-height: 1.35; }
.area-cuentas .que small { display: block; color: var(--gris); font-size: .85em; }
.area-cuentas .area-avatar { width: 2.4em; height: 2.4em; font-size: .9em; }

/* ---------- standalone screens (no side menu): a centred card, like the login ---------- */
.area-sola { --tinta: #0b2a40; --gris: #5f6b78; --texto: #4a5866; --linea: #e3eef6; --fondo: #f3f9fe; --borde: #b9c7d3; line-height: 1.5; color: var(--texto); padding: 2em 0 1em; }
.area-sola .i-cuenta { --icono: url('../img/cuenta.svg'); }
.area-sola .i-security { --icono: url('../img/security.svg'); }
.area-sola .i-correo { --icono: url('../img/correo.svg'); }
.area-sola .area-tarjeta { padding: 2.2em 1.8em 2em; text-align: center; }
.area-sola .area-tarjeta.lista { padding: 0; text-align: left; overflow: hidden; }
.area-sola .area-tarjeta.lista > .cabeza { padding: 1.8em 1.5em 1.2em; text-align: center; }
.area-sola .area-icono { margin: 0 auto 1.1em; width: 3.6em; height: 3.6em; }
.area-sola h1 { margin: 0 0 .5em; font-size: 1.5em; line-height: 1.3; color: var(--tinta); font-weight: bold; text-align: center; }
.area-sola p { margin: 0 auto 1.1em; max-width: 40ch; line-height: 1.55; }
.area-sola b, .area-sola strong { font-weight: bold; color: var(--tinta); }
.area-sola .botones { display: flex; flex-wrap: wrap; justify-content: center; gap: .6em; margin-top: 1.4em; }
.area-sola .botones form { display: contents; }
/* the card is narrow: the buttons go one under the other, the main one first (the cart's order) */
.area-sola .botones:has(> :nth-child(2)), .area-sola form.botones { flex-direction: column-reverse; align-items: center; }
.area-sola .quien { margin: 0 auto 1.3em; padding: 1em 1.2em; border-radius: .5em; background: var(--fondo); max-width: 26em; }
.area-sola .quien b { display: block; }
.area-sola .quien small { color: var(--gris); }
.area-sola .area-aviso { text-align: left; }
.area-sola .area-aviso p { margin: 0; max-width: none; }

/* ---------- phone ---------- */
@media (max-width: 760px) {
  .area-interruptores, .area-opciones.dos { grid-template-columns: 1fr; }
  .area-lista.contactos .area-fila, .area-lista.usuarios .area-fila, .area-lista.correos .area-fila, .area-lista.pagos .area-fila { grid-template-columns: minmax(0, 1fr) auto; gap: .5em 1em; padding: 1.1em 1.2em; }
  .area-lista.usuarios .area-fila .accion, .area-lista.pagos .area-fila .accion, .area-lista.contactos .area-fila .accion { grid-column: 1 / -1; justify-content: flex-start; }
  .area-lista.correos .area-fila .fecha { grid-column: 1 / -1; grid-row: 1; }
  .area-lista.correos .area-fila .que { grid-column: 1; }
  .area-lista .accion .area-boton, .area-lista .accion .area-boton-sec { flex: 1 1 auto; }
  .area-campo .con-boton { flex-direction: column; }
  .area-acciones-pie .area-enlace-gris { align-self: center; }
  .area-sola .area-tarjeta { padding: 1.8em 1.2em 1.6em; }
  /* the sub-navigation pills, one under the other and full width */
  .area-filtro.subnav { flex-direction: column; }
  .area-filtro.subnav a { display: flex; width: 100%; }
}