/*
 * Dabbleam - client area
 *
 * Everything is scoped to .client-area (the wrapper of the client area
 * pages) so the public pages are not affected. Uses the variables and the
 * look of style.css (blue gradient, .box cards, rounded fields).
 *
 * The last block gives a Dabbleam look to the Bootstrap-like classes that
 * provisioning modules print (e.g. the S3 panel: .card, .btn-*, .table,
 * .input-group, .badge...), since this theme does not load Bootstrap.
 */

/* ------------------------------------------------------------- layout */

.client-area {
    max-width: 1024px;
    margin: 2em auto 3em;
    padding: 0 1em;
    line-height: 1.5;
    color: #222;
}

.client-area h1 {
    max-width: none;
    font-size: 2.2em;
    font-weight: bold;
    text-align: center;
    margin: 0 0 .6em;
}

.client-area h2 { font-size: 1.4em; font-weight: bold; margin: 1em 0 .5em; }
.client-area h3 { font-size: 1.2em; font-weight: bold; margin: 1em 0 .4em; }
.client-area h4 { font-size: 1em; font-weight: bold; margin: .8em 0 .2em; }
.client-area p { margin: 0 0 .8em; }
.client-area small, .client-area .small { font-size: .85em; }
.client-area strong { font-weight: bold; }
.client-area code { font-family: Menlo, Consolas, monospace; font-size: .9em; background: #f2f6f8; padding: .1em .3em; border-radius: .25em; word-break: break-all; }
.client-area pre { white-space: pre-wrap; margin: 0 0 1em; }
.client-area pre code { background: none; padding: 0; }
.client-area hr { border: 0; border-top: 1px solid #e3e7ea; margin: 1.5em 0; }
.client-area ul, .client-area ol { margin: .5em 0 1em 1.5em; }
.client-area ul li { list-style: disc; margin-bottom: .3em; }
.client-area .text-muted { color: var(--light-text); }
.client-area .text-center { text-align: center; }
.client-area .text-right { text-align: right; }
.client-area .text-danger { color: #c62828; }
.client-area .text-nowrap { white-space: nowrap; }

/* ------------------------------------------------- secondary navigation */

.ca-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25em;
    margin: 0 0 1.5em;
    padding: 0;
    border-bottom: 2px solid #e3e7ea;
}
.ca-nav li { list-style: none !important; margin: 0 !important; }
.ca-nav a {
    display: block;
    padding: .55em 1em .45em;
    color: #444 !important;
    font-weight: bold;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}
.ca-nav a:hover { color: var(--primary-color) !important; }
.ca-nav a.active { color: var(--primary-color) !important; border-bottom-color: var(--primary-color); }
.ca-nav .ca-nav-user { margin-left: auto !important; color: var(--light-text); font-size: .9em; padding-right: .5em; }

/* --------------------------------------------------------------- cards */

.client-area .box { margin-bottom: 1.5em; background: #fff; }
.client-area .box h2 { font-size: 1.15em; margin: 0; padding: .45em 1em .3em; text-align: left; }
.client-area .box h2 .box-action { float: right; font-size: .8em; font-weight: normal; }
.client-area .box h2 .box-action a { color: #fff !important; text-decoration: underline; }
.client-area .box-footer { padding: .6em 1em; border-top: 1px solid #eef1f3; font-size: .9em; }

.ca-narrow { max-width: 480px; margin: 0 auto; }
.ca-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5em; align-items: start; }
.ca-grid > .box { margin-bottom: 0; }
@media only screen and (max-width: 760px) { .ca-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------- summary tiles */

.ca-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1em; margin-bottom: 1.5em; }
.ca-tile {
    display: block;
    padding: 1em;
    border-radius: .5em;
    box-shadow: 0 0 12px rgba(0,0,0,.15);
    border-bottom: 3px solid var(--primary-color);
    color: #222 !important;
    position: relative;
    transition: box-shadow .2s ease-out;
}
.ca-tile:hover { box-shadow: 0 0 18px var(--focus-ring); }
.ca-tile i { position: absolute; right: .8em; top: .8em; font-size: 1.6em; color: var(--primary-color); opacity: .8; }
.ca-tile .stat { font-size: 2em; font-weight: bold; line-height: 1.1; }
.ca-tile .title { color: var(--light-text); font-size: .9em; }
.ca-tile.warn { border-bottom-color: var(--alert-warning); }
.ca-tile.warn i { color: #c99a00; }
@media only screen and (max-width: 760px) { .ca-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* lists of links inside cards (home panels, actions) */
.ca-list { margin: 0 !important; padding: 0; }
.ca-list li { list-style: none !important; margin: 0 !important; border-top: 1px solid #eef1f3; }
.ca-list li:first-child { border-top: 0; }
.ca-list a, .ca-list span.item { display: flex; justify-content: space-between; gap: 1em; padding: .55em 1em; color: #222 !important; }
.ca-list a:hover { background: #f2fbff; color: var(--dark-primary-color) !important; }
.ca-list .badge { flex-shrink: 0; }

/* ----------------------------------------------------------------- forms */

.client-area label {
    display: block;
    font-size: 1em;
    font-weight: bold;
    margin: 0 0 .3em;
    line-height: 1.3;
}
.client-area label.inline { display: inline-flex; align-items: center; gap: .4em; font-weight: normal; }
/* phones, "Recordarme": a 44 px target; it grows up into the free space over it, so the button only moves 11 px */
@media (max-width: 760px) { .login-form label.inline { min-height: 44px; margin-top: -11.5px; } }
.client-area input[type="text"], .client-area input[type="email"], .client-area input[type="password"],
.client-area input[type="tel"], .client-area input[type="number"], .client-area input[type="date"],
.client-area select, .client-area textarea, .client-area .form-control {
    font-size: 1em;
    padding: .55em .7em;
    margin-bottom: 0;
    border-width: 2px;
    background: #fff;
    width: 100%;
}
.client-area select { background-image: linear-gradient(45deg, transparent 50%, #888 50%), linear-gradient(135deg, #888 50%, transparent 50%); background-position: calc(100% - 1.1em) 50%, calc(100% - .75em) 50%; background-size: .35em .35em; background-repeat: no-repeat; padding-right: 2em; }
/* The theme marks empty required fields red on load; here only after the user touched them. */
.client-area input:invalid, .client-area textarea:invalid, .client-area select:invalid {
    border-color: #ccc; box-shadow: none;
}
.client-area input:user-invalid, .client-area textarea:user-invalid, .client-area select:user-invalid {
    border-color: var(--alert-error); box-shadow: 0px 1px 4px rgba( 240, 35, 50, 0.5 );
}

.client-area input[type="checkbox"], .client-area input[type="radio"] {
    appearance: auto; width: auto; margin: 0; padding: 0; box-shadow: none !important;
}
/* input:focus takes the outline away and the line above the ring: the keyboard focus goes back as an outline */
.client-area input[type="checkbox"]:focus-visible, .client-area input[type="radio"]:focus-visible {
    outline: 3px solid var(--focus-ring); outline-offset: 2px;
}
.ca-field { margin-bottom: 1em; }
.ca-field .help { display: block; color: var(--light-text); font-size: .85em; margin-top: .25em; }
.ca-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.2em; }
.ca-fields .full { grid-column: 1 / -1; }
@media only screen and (max-width: 760px) { .ca-fields { grid-template-columns: 1fr; } }
.ca-field-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; }
.ca-field-row a { font-size: .85em; display: inline-block; padding: 3px 0; margin: -3px 0; } /* finger-sized on phones (2 lines + 6 px), same place */

/* password field with reveal button */
.ca-password { position: relative; }
.ca-password input { padding-right: 3em; }
.ca-password button {
    position: absolute; right: .3em; top: 50%; transform: translateY(-50%);
    background: none; border: 0; color: #888; cursor: pointer; padding: .4em .5em; font-size: 1em;
}
.ca-password button:hover { color: var(--primary-color); }

/* password strength meter */
.ca-pwstrength { height: .4em; background: #e3e7ea; border-radius: .2em; overflow: hidden; margin-top: .4em; }
.ca-pwstrength span { display: block; height: 100%; width: 0; background: var(--alert-error); transition: width .2s, background-color .2s; }
.ca-pwstrength-text { font-size: .85em; color: var(--light-text); margin-top: .2em; }

/* buttons: the theme .btn is a huge full-width block; here they are compact */
.client-area .btn, .client-area input[type="submit"], .client-area input[type="button"], .client-area button.btn {
    display: inline-block;
    width: auto;
    font-size: 1em;
    padding: .6em 1.3em .5em;
    margin: 0;
    border-radius: .5em;
    line-height: 1.2;
    vertical-align: middle;
}
.client-area .btn-block { display: block; width: 100%; text-align: center; }
.client-area .btn-m, .client-area .btn-lg { font-size: 1.15em; padding: .65em 1.5em .55em; }
.client-area .btn-sm { font-size: .85em; padding: .4em .9em .35em; }
.client-area .btn-xs { font-size: .75em; padding: .3em .7em .25em; }
.client-area .btn-default, .client-area .btn-secondary, .client-area .btn-outline-secondary, .client-area .btn-light {
    background: #fff !important; background-image: none !important; color: #333 !important; text-shadow: none;
    border: 2px solid #ccc; box-shadow: none !important;
}
.client-area .btn-default:hover, .client-area .btn-secondary:hover, .client-area .btn-outline-secondary:hover, .client-area .btn-light:hover {
    border-color: var(--primary-color); color: var(--dark-primary-color) !important;
}
.client-area .btn-danger { background: #e53935 !important; background-image: linear-gradient(to bottom, #ef5350, #d32f2f) !important; }
.client-area .btn-outline-danger { background: #fff !important; background-image: none !important; color: #c62828 !important; text-shadow: none; border: 2px solid #ef9a9a; box-shadow: none !important; }
.client-area .btn-outline-danger:hover { background: #ffebee !important; }
.client-area .btn-success { background: #2e7d32 !important; background-image: linear-gradient(to bottom, #43a047, #2e7d32) !important; }
.client-area .btn.disabled, .client-area .btn:disabled { opacity: .55; cursor: not-allowed; }
.ca-actions { display: flex; flex-wrap: wrap; gap: .6em; align-items: center; }
.ca-actions.center { justify-content: center; }
.ca-actions.end { justify-content: flex-end; }
.ca-actions.between { justify-content: space-between; }
.ca-actions.column { flex-direction: column; }

/* ---------------------------------------------------------------- alerts */

.client-area .alert {
    margin: 0 0 1em;
    padding: .7em 1em;
    border-radius: .4em;
    background: #f5f9fb;
    border-left: 4px solid var(--secondary-color);
}
.client-area .alert-error, .client-area .alert-danger { background: #fff4f4; border-left-color: var(--alert-error); }
.client-area .alert-success { background: #f3fff3; border-left-color: #4caf50; }
.client-area .alert-warning { background: #fffbea; border-left-color: var(--alert-warning); }
.client-area .alert-info { background: #f0faff; border-left-color: var(--primary-color); }
.client-area .alert h2 { font-size: 1.05em; margin: 0 0 .3em; }
.client-area .alert ul { margin-bottom: 0; }

/* ---------------------------------------------------------------- tables */

.client-area table, .client-area .table { width: 100%; border-collapse: collapse; margin: 0; }
.client-area th {
    text-align: left; font-weight: bold; font-size: .85em; color: #fff;
    background-image: var(--brand-gradient);
    padding: .5em .8em;
}
.client-area td { padding: .6em .8em; border-top: 1px solid #eef1f3; vertical-align: middle; }
.client-area tbody tr:nth-child(even) td { background: #fafcfd; }
.client-area .table-sm th, .client-area .table-sm td { padding: .4em .6em; }
.client-area tr.clickable { cursor: pointer; }
.client-area tr.clickable:hover td { background: #f2fbff; }
.client-area .table-responsive { overflow-x: auto; }
.ca-table-box { overflow: hidden; }

/* definition-like rows (product details) */
.ca-dl { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: .4em 1em; margin: 0; }
.ca-dl dt { font-weight: bold; color: #555; }
.ca-dl dd { margin: 0; word-break: break-word; }

/* ------------------------------------------------------- status badges */

.client-area .badge, .ca-status {
    display: inline-block;
    font-size: .78em;
    font-weight: bold;
    line-height: 1;
    padding: .35em .6em;
    border-radius: 1em;
    background: #eceff1;
    color: #455a64;
    white-space: nowrap;
}
.ca-status.status-active, .client-area .badge-success { background: #e8f5e9; color: #2e7d32; }
.ca-status.status-pending, .client-area .badge-warning { background: #fff8e1; color: #a66d00; }
.ca-status.status-suspended { background: #fff3e0; color: #e65100; }
.ca-status.status-terminated, .ca-status.status-cancelled, .ca-status.status-fraud, .client-area .badge-danger { background: #ffebee; color: #c62828; }
.ca-status.status-completed { background: #e3f2fd; color: #1565c0; }
.client-area .badge-secondary { background: #eceff1; color: #455a64; }
.client-area .badge-info, .client-area .badge-primary { background: #e1f5fe; color: #0277bd; }

/* status filter buttons */
.ca-filters { display: flex; flex-wrap: wrap; gap: .4em; margin-bottom: 1em; }
.ca-filters button {
    width: auto; margin: 0; font-size: .85em; padding: .35em .9em; border-radius: 1em; cursor: pointer;
    background: #fff; border: 2px solid #ddd; color: #444;
}
.ca-filters button.active { border-color: var(--primary-color); color: var(--dark-primary-color); background: #f0faff; }

/* ------------------------------------------- module output compatibility
   Bootstrap-like markup printed by provisioning modules (S3 panel...). */

.client-area .card { background: #fff; border-radius: .5em; box-shadow: 0 0 20px rgba(0,0,0,.18); border-bottom: 3px solid var(--primary-color); margin-bottom: 1.5em; overflow: hidden; }
.client-area .card-header {
    color: #fff; font-weight: bold; padding: .45em 1em .35em;
    background-image: var(--brand-gradient);
}
.client-area .card-header .btn { font-size: .8em; }
.client-area .card-header .badge { background: rgba(255,255,255,.25); color: #fff; }
.client-area .card-header code { background: rgba(255,255,255,.2); color: #fff; }
.client-area .card-body { padding: 1em; }
.client-area .row { display: flex; flex-wrap: wrap; margin: 0 -.6em; }
.client-area .row > [class^="col"], .client-area .row > [class*=" col"] { padding: 0 .6em; box-sizing: border-box; flex: 1 1 0; min-width: 0; }
.client-area .col-12 { flex: 0 0 100% !important; }
.client-area .col-md-3 { flex: 0 0 25% !important; }
.client-area .col-md-4 { flex: 0 0 33.333% !important; }
.client-area .col-md-6 { flex: 0 0 50% !important; }
@media only screen and (max-width: 760px) {
    .client-area .col-md-3, .client-area .col-md-4, .client-area .col-md-6 { flex: 0 0 100% !important; }
}
.client-area .d-flex { display: flex; }
.client-area .d-inline { display: inline; }
.client-area .d-inline-block { display: inline-block; }
.client-area .d-block { display: block; }
.client-area .justify-content-between { justify-content: space-between; }
.client-area .align-items-center { align-items: center; }
.client-area .flex-wrap { flex-wrap: wrap; }
.client-area .w-100 { width: 100%; }
.client-area .m-0 { margin: 0 !important; }
.client-area .mt-1 { margin-top: .25em !important; }
.client-area .mb-0 { margin-bottom: 0 !important; }
.client-area .mb-1 { margin-bottom: .25em !important; }
.client-area .mb-2 { margin-bottom: .5em !important; }
.client-area .mb-3 { margin-bottom: 1em !important; }
.client-area .mr-1 { margin-right: .25em !important; }
.client-area .mr-2 { margin-right: .5em !important; }
.client-area .p-2 { padding: .5em !important; }
.client-area .py-2 { padding-top: .5em !important; padding-bottom: .5em !important; }
.client-area .bg-light { background: #f5f8fa !important; }
.client-area .border { border: 1px solid #e3e7ea !important; border-radius: .4em; }
.client-area .form-inline { display: flex; flex-wrap: wrap; align-items: center; gap: .4em; }
.client-area .form-inline .form-control, .client-area .form-control-sm, .client-area .d-inline-block.form-control { width: auto; }
.client-area .form-control-sm { font-size: .9em; padding: .35em .6em; }
.client-area .form-text { display: block; color: var(--light-text); font-size: .85em; margin-top: .25em; }
.client-area .input-group { display: flex; align-items: stretch; width: 100%; }
.client-area .input-group > .form-control { flex: 1 1 auto; width: 1%; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.client-area .input-group-append { display: flex; }
.client-area .input-group-append .btn { border-radius: 0; margin-left: -2px; }
.client-area .input-group-append .btn:last-child { border-top-right-radius: .5em; border-bottom-right-radius: .5em; }
.client-area .input-group-sm .form-control, .client-area .input-group-sm .btn { font-size: .85em; padding: .35em .6em; }
.client-area details summary { cursor: pointer; list-style: none; }
.client-area details summary::-webkit-details-marker { display: none; }
.client-area .progress { background: #e3e7ea; border-radius: .3em; overflow: hidden; }
.client-area .progress-bar { height: 100%; }
.client-area .bg-success, .client-area .progress-bar-success { background: #43a047; }
.client-area .bg-warning, .client-area .progress-bar-warning { background: #ffb300; }
.client-area .bg-danger, .client-area .progress-bar-danger { background: #e53935; }
.client-area .bg-info, .client-area .progress-bar-info { background: var(--primary-color); }

/* ------------------------------------------------------------------ cart steps (orderforms/dabbleam) */
.client-area .ca-check { display: flex; gap: .6em; align-items: baseline; margin: .5em 0; font-weight: normal; cursor: pointer; }
.client-area .ca-check input { flex: none; }
.client-area .cart-checkout > div > .box { margin-bottom: 1.5em; }
.client-area .cart-checkout { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
@media only screen and (max-width: 760px) { .client-area .cart-checkout { grid-template-columns: 1fr; } }
.client-area .cart-total { font-size: 1.2em; text-align: center; margin: .3em 0 1em; }
.client-area .cart-total strong { color: var(--link-color); }
.client-area .domain-input { display: flex; gap: .5em; }
.client-area .domain-input > input { flex: 1 1 auto; }
.client-area .domain-input > select, .client-area .domain-input > input[name="tld"] { flex: 0 0 7em; width: 7em; }
.client-area .cart-domain .box h2 { font-size: 1.05em; }
.client-area [hidden] { display: none !important; }

/* Product custom field tickboxes in the cart (e.g. "Acepto las condiciones…"): the theme styles every input as a wide box */
#frmConfigureProduct .field-container input[type="checkbox"] {
    appearance: auto; width: auto; margin: 0 .5em 0 0; padding: 0; box-shadow: none; transform: scale(1.3); vertical-align: middle;
}
#frmConfigureProduct .field-help-text { display: block; font-size: .9em; margin-bottom: 1em; }
.client-area .ca-check .help { display: block; color: var(--light-text); font-size: .85em; margin-top: .2em; }
/* Yes/no option switches in the cart: keep the name and the price on one line */
#frmConfigureProduct .switch .pre, #frmConfigureProduct .switch .post { white-space: nowrap; }
/* Single-form pages (login, password reset, 2FA, confirmations…): centred box titles */
.client-area .ca-narrow .box > h2 { text-align: center; }

/* Cart domain step: tabs made of hidden radios + labels (no JS) */
.cart-domain .dt { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; pointer-events: none; }
.cart-domain .dominio-tabs { display: flex; border-bottom: 1px solid #e3e7ea; }
.cart-domain .dominio-tabs label { flex: 1 1 0; margin: 0; padding: .8em .5em .7em; font-size: .9em; font-weight: bold; text-align: center;
    color: var(--light-text); cursor: pointer; border-bottom: 3px solid transparent; line-height: 1.3; }
.cart-domain .dominio-tabs label:hover { color: var(--link-color); }
.cart-domain .dominio-tabs label i { display: block; font-size: 1.3em; margin-bottom: .3em; }
.cart-domain .dominio-panel { display: none; }
.cart-domain .dominio-panel p { margin-bottom: 1em; }
#dt-register:checked ~ .box-content .p-register, #dt-own:checked ~ .box-content .p-own, #dt-transfer:checked ~ .box-content .p-transfer,
#dt-incart:checked ~ .box-content .p-incart, #dt-sub:checked ~ .box-content .p-sub { display: block; }
#dt-register:checked ~ .dominio-tabs label[for="dt-register"], #dt-own:checked ~ .dominio-tabs label[for="dt-own"],
#dt-transfer:checked ~ .dominio-tabs label[for="dt-transfer"], #dt-incart:checked ~ .dominio-tabs label[for="dt-incart"],
#dt-sub:checked ~ .dominio-tabs label[for="dt-sub"] { color: var(--link-color); border-bottom-color: var(--primary-color); }
.cart-domain .dt:focus-visible ~ .dominio-tabs label { outline: none; }
#dt-register:focus-visible ~ .dominio-tabs label[for="dt-register"], #dt-own:focus-visible ~ .dominio-tabs label[for="dt-own"],
#dt-transfer:focus-visible ~ .dominio-tabs label[for="dt-transfer"] { box-shadow: inset 0 0 0 2px var(--focus-ring); }

/* Numbered lists in plain text pages (the theme's reset drops the numbers), e.g. /privacidad */
main ol.lista-numerada { margin: .6em 0 .6em 1.6em; }
main ol.lista-numerada > li { list-style: decimal; margin-bottom: .5em; }

/* Legal documents (conditions, annex, withdrawal form, EULA, holidays, domains, previous versions): the look of their
   PDFs. A big blue number per point and a thin rule between points; full-size text in the body colour (no fine print);
   links underlined, so they are not told apart by colour alone. */
article.condiciones { --tinta: #0b2a40; --texto: #24313d; --linea: #dfe9f2; --fondo-claro: #f3f9fe;
    max-width: 50em; margin: 2em auto 3em; padding: 0 1.25em; color: var(--texto); line-height: 1.6; }
article.condiciones h1 { font-size: 2.2em !important; line-height: 1.15; color: var(--tinta); }
article.condiciones h2 { color: var(--tinta); font-weight: bold; margin: 1.8em 0 .6em; }
article.condiciones h3 { font-size: 1.1em; font-weight: bold; color: var(--tinta); margin: 1.6em 0 .4em; }
article.condiciones p { margin: .6em 0; }
article.condiciones strong { font-weight: bold; }
article.condiciones a { text-decoration: underline; text-underline-offset: .15em; overflow-wrap: anywhere; }
/* a link that is (nearly) all its line, like "correo: support@dabbleam.com" (class from legal-build/build.py): finger-sized
   on phones (render gate, 44 px; 46 so rounding never leaves it short), whatever the font size. Vertical padding on an
   inline box grows its tap area without touching the line: it stays inline, so it wraps with its sentence as before */
article.condiciones a.condiciones-enlace-solo { padding: calc((46px - 1em) / 2) 0; }
article.condiciones code { font-family: inherit; overflow-wrap: anywhere; }
article.condiciones ul { margin: .5em 0 .5em 1.4em; }
article.condiciones ul > li { margin-bottom: .35em; }
article.condiciones ul > li::marker { color: var(--primary-color); }
article.condiciones ol:not(.condiciones-puntos) { margin: .6em 0 .6em 1.6em; }
article.condiciones ol:not(.condiciones-puntos) > li { list-style: decimal; margin-bottom: .6em; }
.condiciones-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1.6em; margin: 0 0 1.6em !important; }
.condiciones-acciones a { display: inline-flex; align-items: center; gap: .4em; min-height: 44px; }
.condiciones .condiciones-subtitulo { text-align: center; font-weight: bold; color: var(--link-color); margin-top: -.3em; }
.condiciones .condiciones-entradilla { font-size: 1.08em; }
.condiciones .condiciones-aviso { border-left: 4px solid var(--primary-color); background: var(--fondo-claro); padding: .8em 1em; margin: 1em 0 1.6em; }
.condiciones .version { margin-top: 2.5em; padding-top: 1em; border-top: 1px solid var(--linea); text-align: center; font-style: normal; }
.condiciones-bloque { margin-top: 2.2em; }
/* the theme's sections are centred flex columns pulled up 20vh (landing page anchors); here they are plain blocks */
article.condiciones section { display: block; padding-top: 0; margin-top: 0; }
article.condiciones section.condiciones-bloque { margin-top: 2.2em; }

/* the numbered points: number in its own column; the bold lead-in reads as the point's title */
article.condiciones ol.condiciones-puntos { list-style: none; margin: 1.6em 0; padding: 0; }
article.condiciones ol.condiciones-puntos > li { list-style: none; position: relative; margin: 0; padding: 1em 0 1em 3.6rem;
    border-top: 1px solid var(--linea); scroll-margin-top: 5em; }
.condiciones-num { font-weight: bold; font-size: 2rem; line-height: 1; color: var(--primary-color); font-variant-numeric: tabular-nums; }
ol.condiciones-puntos > li > .condiciones-num { position: absolute; left: 0; top: 1.48rem; } /* centred on the first line of the point */
/* a point whose title is not wrapped in a paragraph (the excerpt of /dominios): same spacing as the paragraph */
ol.condiciones-puntos > li > .condiciones-num + strong { display: block; margin: .6em 0; }
ol.condiciones-puntos > li > p:first-of-type > strong:first-child { color: var(--tinta); }
li:target, h2:target { background: linear-gradient(to right, var(--fondo-claro), transparent); }
/* EULA: numbered section headings */
article.condiciones h2.condiciones-seccion { display: flex; align-items: baseline; gap: .55em; font-size: 1.3em; font-weight: bold; text-align: left;
    margin: 1.6em 0 .5em; padding-top: .8em; border-top: 1px solid var(--linea); scroll-margin-top: 5em; }
h2.condiciones-seccion .condiciones-num { font-size: 1.5em; min-width: 1.3em; }

/* tables (subprocessors, EULA editions, holidays, domain prices); on a phone each row is a card */
table.condiciones-tabla { width: 100%; border-collapse: collapse; margin: 1em 0 1.4em; }
.condiciones-tabla th, .condiciones-tabla td { padding: .6em .75em; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; }
.condiciones-tabla thead th { background: var(--fondo-claro); color: var(--tinta); font-weight: bold; }
.condiciones-tabla tbody th { font-weight: bold; color: var(--tinta); }
.condiciones-tabla tr.cerrado td { font-weight: bold; }
@media only screen and (max-width: 640px) {
    .condiciones-tabla thead { position: absolute; left: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .condiciones-tabla, .condiciones-tabla tbody, .condiciones-tabla tr, .condiciones-tabla td, .condiciones-tabla tbody th { display: block; }
    .condiciones-tabla tr { border: 1px solid var(--linea); border-radius: .4em; padding: .4em .8em; margin-bottom: .7em; }
    .condiciones-tabla td, .condiciones-tabla tbody th { border: 0; padding: .25em 0; }
    .condiciones-tabla td[data-label]::before { content: attr(data-label) ": "; font-weight: bold; color: var(--tinta); }
    /* short tables (holidays, domain prices) keep their columns */
    .condiciones-tabla.corta thead { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
    .condiciones-tabla.corta { display: table; } .condiciones-tabla.corta tbody { display: table-row-group; }
    .condiciones-tabla.corta tr { display: table-row; border: 0; padding: 0; }
    .condiciones-tabla.corta { font-size: .9em; }
    .condiciones-tabla.corta th, .condiciones-tabla.corta td { display: table-cell; padding: .55em .3em; border-bottom: 1px solid var(--linea); }
    .condiciones-tabla.corta td[data-label]::before { content: none; }
}

/* withdrawal form: the official model in a frame, with real room to write */
.condiciones-modelo { border: 1px solid #b9c8d6; border-radius: .5em; padding: 1.2em 1.4em; margin: 2em 0; }
article.condiciones ul.condiciones-huecos { list-style: none; margin: 1em 0; padding: 0; }
article.condiciones ul.condiciones-huecos > li { list-style: none; margin: 0 0 1.3em; }
.condiciones-hueco { display: block; height: 2em; border-bottom: 1px solid #6b7785; }

/* EULA language selector (Spanish and English, both binding) */
.condiciones-idiomas { display: flex; flex-wrap: wrap; justify-content: center; gap: .6em 2em; margin: 0 0 1.8em; }
article.condiciones .condiciones-idiomas ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .4em; margin: 0; padding: 0; }
article.condiciones .condiciones-idiomas li { list-style: none; margin: 0; }
.condiciones-idiomas a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1em; border: 2px solid var(--link-color);
    border-radius: 2em; text-decoration: none !important; font-weight: bold; }
.condiciones-idiomas a[aria-current="page"] { background: var(--link-color); color: #fff; }

/* buttons (the client area's are not loaded for visitors) */
.condiciones-botones { display: flex; flex-wrap: wrap; gap: .6em; margin: 1.2em 0 !important; }
.condiciones-boton, .condiciones-boton-sec { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; box-sizing: border-box;
    padding: .6em 1.2em .55em; border-radius: .45em; font-weight: bold; text-decoration: none !important; }
a.condiciones-boton, a.condiciones-boton:visited, a.condiciones-boton:hover { background: var(--brand-gradient); color: #fff; }
a.condiciones-boton:hover { background: var(--secondary-color); }
a.condiciones-boton-sec { border: 2px solid var(--link-color); color: var(--link-color); }
a.condiciones-boton-sec:hover { background: var(--fondo-claro); }

@media only screen and (max-width: 640px) {
    article.condiciones { padding: 0 1em; }
    article.condiciones h1 { font-size: 1.75em !important; }
    article.condiciones ol.condiciones-puntos > li { padding-left: 2.6rem; }
    ol.condiciones-puntos > li > .condiciones-num { font-size: 1.6rem; top: 1.68rem; } /* smaller number, same centre */
    article.condiciones ul { margin-left: 1.1em; }
}

/* Client area: a heading inside a section (e.g. each provider on /area-cliente/subencargados), and room between cards */
.area .area-seccion > h3 { margin: 0 0 .8em; font-size: 1em; font-weight: bold; color: var(--tinta); }
/* only for cards stacked one under another: grids (summary figures, columns, stacks) already set their gap */
.area :not(.area-cifras, .area-pila, .area-dos, .area-datos, .area-uso) > .area-tarjeta + .area-tarjeta { margin-top: 1.4em; }

/* ---------- single-card access pages (login, password reset, 2FA, verify e-mail...: .ca-narrow) with the look of the
   client area card: white, .6em radius, the usual shadow, no blue title bar; 48 px fields; the button as .tienda-boton
   (Diseño, 02-11-2026). CSS only, the markup stays as it is. ---------- */
.client-area .ca-narrow .box { border-radius: .6em; border-bottom: 0; box-shadow: 0 2px 12px rgba(0, 60, 110, .14); }
.client-area .ca-narrow .box > h2 { background: none; color: #0b2a40; font-size: 1.3em; text-align: center; padding: 1.1em 1.5em 0; border-radius: .6em .6em 0 0; }
.client-area .ca-narrow .box-content { padding: 1em 1.5em 1.5em !important; }
.client-area .ca-narrow .box-footer { padding: 1em 1.5em; border-top: 1px solid #e3eef6; }
.client-area .ca-narrow :is(input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], select) { min-height: 48px; }
.client-area .ca-narrow .ca-password button { min-width: 44px; min-height: 44px; }
.client-area .ca-narrow .btn { width: auto; font-size: 1.1em; line-height: 1.2; padding: .75em 1.2em .7em; border-radius: .45em;
    text-shadow: 0 1px .4px rgba(0, 0, 0, .35); box-shadow: 0 2px 6px rgba(0, 60, 110, .25) !important; }
.client-area .ca-narrow .btn:hover { background: var(--secondary-color); box-shadow: 0 2px 6px rgba(0, 60, 110, .25) !important; }
.client-area .ca-narrow .btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }