/*
 * Client area, domains and plan change: what css/area.css does not have yet (clientareadomain*.tpl,
 * bulkdomainmanagement.tpl, upgrade*.tpl). Same language as area.css (Diseño, piezas/whmcs-area, 30-10-2026);
 * every colour pair is at 4.5:1 or more.
 */

/* ---------- no tenemos letra pequeña (guía de estilo, sección 7): lo que cuesta o limita va en tinta y a tamaño normal ---------- */
.area-condicion { margin: 1.2em 0 0; color: var(--tinta); line-height: 1.55; }
.area-condicion.centrada { text-align: center; }
.area-seccion > .area-condicion:first-child { margin-top: 0; }
.area-fila .que .condicion { display: block; margin-top: .15em; color: var(--tinta); line-height: 1.4; }
.area-fila .importe .condicion { display: block; font-weight: normal; color: var(--tinta); }

/* ---------- avisos: verde (hecho) y rojo (error), junto a los ámbar y azul de area.css ---------- */
.area-aviso.verde { background: #e6f4ec; border-left: 4px solid #2e9d5b; color: #14532d; }
.area-aviso.rojo { background: #fdecea; border-left: 4px solid #d01c2a; color: #7a1414; }
.area-aviso a { color: inherit; font-weight: bold; }
.area-seccion > .area-aviso:last-child { margin-bottom: 0; }

/* ---------- lista de dominios: casilla | dominio | alta | caduca | renovación | estado | acción ---------- */
.area-lista.dominios .area-fila { grid-template-columns: minmax(0, 2.2fr) 1fr 1fr 1fr 8.5em 7.5em; }
.area-lista.dominios.con-marca .area-fila { grid-template-columns: 2em minmax(0, 2.2fr) 1fr 1fr 1fr 8.5em 7.5em; }
.area-fila .marca { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -10px; cursor: pointer; }
/* the theme's reset gives every input appearance:none (a tick or a dot would not show): native boxes and dots back */
.area :is(.marca, .area-radio) input { appearance: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none !important; }
.area-fila .marca input { width: 1.25em; height: 1.25em; margin: 0; accent-color: var(--primary-color); cursor: pointer; }
.area-fila .marca input:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
/* acciones masivas: arriba de la lista, se encienden al marcar un dominio */
.area-masivo { display: flex; flex-wrap: wrap; align-items: center; gap: .6em 1em; padding: 1em 1.5em; border-bottom: 1px solid var(--linea); background: var(--fondo); border-radius: .6em .6em 0 0; }
.area-masivo p { margin: 0; color: var(--texto); font-size: .9em; flex: 1 1 14em; }
.area-masivo p b { color: var(--tinta); }
.area-masivo .botones { display: flex; flex-wrap: wrap; gap: .5em; }
.area-masivo .area-boton-sec { font-size: .85em; padding: calc(.5em + 1px) .9em calc(.45em - 1px); } /* see .area-boton */
.area :is(.area-boton, .area-boton-sec):disabled { opacity: .5; cursor: default; }
.area .area-boton-sec:disabled:hover { background: #fff; }

/* ---------- ficha de un dominio ---------- */
.area-ns { list-style: none; margin: 0; padding: 0; display: grid; gap: .45em; }
.area-ns:empty { display: none; }
.area-ns li { padding: .55em .9em; border-radius: .45em; background: var(--fondo); color: var(--tinta); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; overflow-wrap: anywhere; }
.area-en-linea { display: inline; margin: 0; }
/* grey links and the "Cambiarlos" of a heading: small to the eye, 44 px tall to the finger */
.area-datos dd .area-en-linea .area-enlace-gris { font-size: .8em; font-weight: normal; }
.area :is(.area-datos, .area-complemento) .area-enlace-gris { display: inline-flex; align-items: center; min-height: 44px; margin: -.5em 0; }
.area-seccion > h2 a[href^="#"] { display: inline-flex; align-items: center; min-height: 44px; margin: -.7em 0; }
.area-complemento form { display: flex; align-items: center; gap: .8em; margin: 0; }
.area-pila-corta { gap: .8em; }
.area-acciones button { width: 100%; }
/* secciones con formulario (servidores de nombres, liberar): se abren con su ancla #tab... */
.area-desplegable:not(:target) { display: none; }
.area-desplegable:target { scroll-margin-top: 1.5em; }
.area-desplegable:focus { outline: none; box-shadow: 0 0 0 3px var(--focus-ring), 0 2px 12px rgba(0, 60, 110, .14); }
fieldset.area-opciones { border: 0; margin: 0 0 1.2em; padding: 0; min-width: 0; }
.area-opciones.dos { grid-template-columns: repeat(2, 1fr); }
.area input:disabled, .area select:disabled { background: #f5f7f9; color: var(--texto); }
.area-modulo .moduleoutput { color: var(--texto); }

/* página de un solo resultado o confirmación: el código EPP, la nota bajo la tarjeta y el enlace de vuelta */
.area-codigo { display: flex; flex-wrap: wrap; align-items: center; gap: .8em; margin: 0 0 1em; }
.area-codigo code { font-size: 1.3em; padding: .45em .8em; border-radius: .45em; background: var(--fondo); color: var(--tinta); letter-spacing: .05em; overflow-wrap: anywhere; }
.area-volver { margin: 1.2em 0 0; font-size: .93em; }
.area-vacia .area-volver { margin-top: 1em; }
p.area-seccion.nota-tarjeta { margin: 0; color: var(--texto); font-size: .93em; line-height: 1.55; border-bottom: 1px solid var(--linea); }
.area-errores { margin: .4em 0 0 1.2em; padding: 0; }
.area .area-errores li { list-style: disc; }
.area-panel > .area-radio:first-child { margin-top: .2em; }
.area-dialogo .area-radio { font-weight: normal; color: #24313d; }
.area-dialogo-campo { margin: .9em 0 1.3em; }

/* ---------- formularios en filas (DNS, reenvío de correo): campos en columnas, cada fila una ficha en el móvil ---------- */
.area-registros { list-style: none; margin: 0; padding: 0; }
.area-registro { display: grid; gap: .6em 1em; align-items: end; padding: 1em 1.5em; border-top: 1px solid var(--linea); }
.area-registro:first-child { border-top: 0; }
.area-registro.nuevo { background: var(--fondo); }
.area-registro .area-campo > :is(label, .etiqueta) { font-size: .8em; font-weight: normal; color: var(--gris); }
.area-registro.nuevo .area-campo > :is(label, .etiqueta) { color: var(--texto); } /* grey on the light blue would be 4.3:1 */
.area-registro .area-campo > .fijo { display: flex; align-items: center; height: 48px; color: var(--texto); font-size: .95em; }
.area-registros.dns .area-registro { grid-template-columns: minmax(0, 1fr) 11em minmax(0, 2fr) 6.5em; }
.area-registros.correo .area-registro { grid-template-columns: minmax(0, 1.5fr) auto minmax(0, 1fr); }
.area-registro .titulo { grid-column: 1 / -1; margin: 0; font-size: .85em; font-weight: bold; color: var(--tinta); }
.area-campo .sufijo { display: flex; align-items: stretch; }
.area-campo .sufijo input { border-radius: .45em 0 0 .45em; min-width: 0; }
.area-campo .sufijo span { display: flex; align-items: center; padding: 0 .9em; border: 1px solid #6b8ca6; border-left: 0; border-radius: 0 .45em .45em 0; background: var(--fondo); color: var(--texto); white-space: nowrap; }
.area-campo .sufijo input { flex: 1 1 5em; }

/* ---------- pestañas (contactos del dominio): botones con role=tab ---------- */
.area-pestanas { display: flex; flex-wrap: wrap; gap: .4em; margin: 0 0 1.2em; padding: 0; border-bottom: 1px solid var(--linea); }
.area-pestanas button { font: inherit; font-size: .93em; font-weight: bold; color: var(--texto); background: none; border: 0; border-bottom: 3px solid transparent;
  padding: .6em .9em .5em; min-height: 44px; cursor: pointer; margin-bottom: -1px; }
.area-pestanas button:hover { color: var(--tinta); }
.area-pestanas button[aria-selected="true"] { color: var(--dark-primary-color); border-bottom-color: var(--primary-color); }
.area-pestanas button:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; border-radius: .3em; }
.area-radio { display: flex; align-items: flex-start; gap: .6em; cursor: pointer; color: var(--tinta); font-weight: bold; font-size: .95em; }
.area-radio input { width: 1.2em; height: 1.2em; margin: .15em 0 0; accent-color: var(--primary-color); flex: none; }
.area-radio input:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.area-radio + .area-campo, .area-radio + .area-rejilla { margin: .7em 0 1.2em 1.8em; }
.area-lista-simple { list-style: none; margin: 0 0 1.2em; padding: 0; display: flex; flex-wrap: wrap; gap: .5em; }
.area-lista-simple li { padding: .4em .9em; border-radius: 2em; background: var(--fondo); color: var(--tinta); font-size: .9em; font-weight: bold; }

/* ---------- cambiar de plan: las tarjetas de la tienda (store.css) dentro del área ---------- */
.area-planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(15em, 1fr)); gap: 1.5em; align-items: stretch; margin-top: .4em; }
.area-plan { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: .6em; box-shadow: 0 2px 12px rgba(0, 60, 110, .14); }
.area-plan h3 { margin: 0; padding: .8em 1em .7em; border-radius: .6em .6em 0 0; background: var(--brand-gradient); color: #fff; font-size: 1.2em; text-align: center; }
.area-plan .para { margin: 1em 1.2em 0; text-align: center; color: var(--gris); font-size: .9em; line-height: 1.45; }
.area-plan .precio { margin: .9em 0 .1em; text-align: center; }
.area-plan .precio b { font-size: 2.3em; line-height: 1.1; color: var(--dark-primary-color); }
.area-plan .precio .desde { display: block; color: var(--tinta); } /* "desde" and the cycle are part of the price: ink, normal size */
.area-plan .ciclo { margin: 0; text-align: center; color: var(--tinta); }
.area-plan ul { list-style: none; margin: 1.2em 1.2em 0; padding: 0; } /* the commitment of a plan is one of these lines: normal size */
.area-plan li { display: flex; justify-content: space-between; gap: 1em; padding: .55em 0; border-top: 1px solid var(--linea); }
.area-plan li span { color: var(--gris); }
.area-plan li b { color: var(--tinta); text-align: right; }
.area-plan li a { color: inherit; }
.area-plan form { margin-top: auto; padding: 1.3em 1.2em 1.3em; display: grid; gap: .7em; }
.area-plan form .area-boton { width: 100%; font-size: 1.05em; min-height: 48px; }
.area-plan .area-campo > label { font-size: .82em; font-weight: normal; color: var(--gris); }
.area-plan .actual { position: absolute; top: -.85em; left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--tinta); color: #fff;
  font-size: .75em; font-weight: bold; letter-spacing: .12em; text-transform: uppercase; padding: .45em .9em .2em; border-radius: 1em; } /* capitals: Objectivity draws them .1em high (see .area-avatar) */
.area-plan-actual { display: flex; align-items: center; gap: 1em; flex-wrap: wrap; padding: 1.1em 1.5em; margin-bottom: 1.6em; }
.area-plan-actual .que { flex: 1 1 14em; }
.area-plan-actual b { display: block; color: var(--tinta); }
.area-plan-actual small { display: block; color: var(--gris); font-size: .85em; margin-top: .15em; }

/* ---------- resumen del cambio de plan: concepto | importe, y los totales ---------- */
.area-resumen { list-style: none; margin: 0; padding: 0; }
.area-resumen li { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; padding: .8em 0; border-top: 1px solid var(--linea); color: var(--tinta); }
.area-resumen li:first-child { border-top: 0; }
.area-resumen li b, .area-resumen .importe { color: var(--tinta); white-space: nowrap; }
.area-resumen li.total { font-size: 1.15em; font-weight: bold; color: var(--tinta); border-top: 2px solid var(--linea); }
.area-resumen li.total .importe { color: var(--dark-primary-color); font-size: 1.2em; }
.area-cupon { display: flex; gap: .6em; }
.area-cupon input { flex: 1; min-width: 0; }

@media (max-width: 760px) {
  .area-lista.dominios .area-fila, .area-lista.dominios.con-marca .area-fila { grid-template-columns: minmax(0, 1fr) auto; gap: .5em 1em; padding: 1.1em 1.2em; }
  .area-lista.dominios.con-marca .area-fila { position: relative; padding-left: 3.4em; }
  .area-lista.dominios.con-marca .area-fila .marca { position: absolute; left: .4em; top: .75em; margin: 0; }
  .area-masivo { padding: 1em 1.2em; }
  .area-opciones.dos { grid-template-columns: 1fr; }
  .area-registros.dns .area-registro, .area-registros.correo .area-registro { grid-template-columns: 1fr; padding: 1em 1.2em; }
  .area-registros.correo .area-registro .fijo { height: auto; }
  .area-registro .sin-prioridad { display: none; }
  .area-campo .sufijo span { white-space: normal; overflow-wrap: anywhere; max-width: 60%; padding: .3em .7em; }
  .area-cupon { flex-direction: column; }
  .area-cupon input { flex: none; }
  .area-plan-actual { padding: 1em 1.2em; }
}