/*
 * modern.css — capa visual "ui2" para el refresh del front de pagina.mx.
 *
 * TODO esta hoja esta scoped bajo `body.ui2`. Una pagina "migra" al look nuevo
 * activando esa clase de body via project_header(array('body' => array('ui2'))).
 * Las paginas que no la activan quedan intactas: cero regresiones globales.
 *
 * Se apila DESPUES del bundle de MDB (ver assets.php), asi que sobreescribe sin
 * !important salvo donde MDB usa reglas muy especificas.
 */

/* Tipografia definitiva: cuerpo Figtree (humanista, legible en tablas) + titulos
 * Plus Jakarta Sans (con personalidad, en MAYUSCULAS). Solo cargan/aplican bajo
 * .ui2. Ver docs/ui2-design-system.md para el racional y las alternativas probadas. */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

/* ---- Tokens ---------------------------------------------------------- */
.ui2 {
    --pmx-bg:        #f4f6f9;
    --pmx-surface:   #ffffff;
    --pmx-border:    #e7eaf0;
    --pmx-ink:       #2b3445;
    --pmx-ink-soft:  #66707f;
    --pmx-ink-faint: #97a0ad;
    --pmx-brand:     #2bbbad;   /* teal de marca (MDB) */
    /* "glass tornasol" para acciones de NAVEGACION secundaria (Ver pedido,
     * botones de tarjeta). Iridiscente translucido, distinto tono al teal. */
    --pmx-glass:     linear-gradient(120deg, rgba(124, 140, 248, .16), rgba(34, 201, 224, .16), rgba(56, 211, 155, .16));
    --pmx-glass-bd:  rgba(120, 140, 220, .32);
    --pmx-radius:    14px;
    --pmx-shadow:    0 1px 2px rgba(20, 30, 50, .04), 0 10px 30px -18px rgba(20, 30, 50, .25);
    --pmx-font:      'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --pmx-font-head: 'Plus Jakarta Sans', var(--pmx-font);
}

/* Fuente base de todo lo que vive en una pagina ui2 (incluye navbar/footer) */
body.ui2,
body.ui2 .navbar,
body.ui2 .side-nav,
body.ui2 .page-footer { font-family: var(--pmx-font); }

/* Titulos con la display font */
.ui2 h1, .ui2 h2, .ui2 h3,
.ui2 .page-head__title { font-family: var(--pmx-font-head); letter-spacing: -.01em; }

/*
 * Fondo con transiciones suaves en vez de cortes secos:
 *  - arriba nace BLANCO (igual que el navbar) y se disuelve al gris del contenido
 *  - un glow teal de marca sangra desde la esquina superior izquierda
 *  - abajo el gris se desvanece a BLANCO, donde arranca el footer
 * El navbar (fixed) y el footer son #fff; asi el chrome y el contenido se funden.
 */
body.ui2 {
    background-color: var(--pmx-bg);
    background-image:
        radial-gradient(1100px 320px at 8% -120px, rgba(43, 187, 173, .12), rgba(43, 187, 173, 0) 70%),
        linear-gradient(180deg, #ffffff, rgba(255, 255, 255, 0));
    background-repeat: no-repeat, no-repeat;
    background-position: top center, top center;
    background-size: 100% 360px, 100% 300px;
    background-attachment: scroll;
}

/*
 * El footer es position:absolute, asi que el degradado inferior NO puede vivir
 * en el body (no coincide con donde arranca el footer). Va en el propio footer:
 * su borde superior nace con el gris del contenido y se funde a blanco.
 */
/*
 * FOOTER. El tema lo pone en position:absolute + una reserva de altura en
 * `body{padding-bottom:372/542/840px}` por breakpoint. Problema: en movil el
 * footer real (~899px, columnas apiladas) es MAS ALTO que su reserva (840px), asi
 * que se encima ~60px sobre la ultima card y le come el borde inferior.
 *
 * En ui2 lo resolvemos de raiz, sin depender de la altura del footer: lo pasamos
 * a flujo normal (static) y quitamos la reserva (padding-bottom:0) para que no
 * quede espacio muerto. El body no tiene padding lateral, asi que el footer
 * static ya queda full-bleed sin trucos.
 */
body.ui2 { padding-bottom: 0 !important; }
body.ui2 .page-footer {
    position: static;
    background-color: var(--pmx-surface);
    background-image: linear-gradient(180deg, var(--pmx-bg), rgba(244, 246, 249, 0) 180px);
    border-top: 1px solid var(--pmx-border);
}

/* ---- Ancho de pagina: mata los margenes muertos del .container ------- */
.ui2 .page-wrap {
    max-width: 1360px;
    margin: 0 auto;
    padding: 1.75rem 1.5rem 3.5rem;
}

/* Alinea la barra gris de breadcrumbs con el nuevo ancho y la despega
 * del menu superior fijo (queja: "breadcrumbs pegadisimos al menu") */
.ui2 #breadcrumbs { padding-top: 1.15rem; padding-bottom: .1rem; background: transparent; }
/* Fuerza el mismo cuadro que .page-wrap (mismo max-width y padding) para que el
 * breadcrumb quede alineado al titulo. El !important vence el max-width
 * responsive que el bundle de MDB pone sobre .container. */
.ui2 #breadcrumbs .container {
    max-width: 1360px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}
.ui2 #breadcrumbs .breadcrumb {
    margin-bottom: 0;
    padding: 0;
    background: transparent;
    font-size: .82rem;
}
.ui2 #breadcrumbs .breadcrumb-item,
.ui2 #breadcrumbs .breadcrumb-item a { color: var(--pmx-ink-faint); }
.ui2 #breadcrumbs .breadcrumb-item a:hover { color: var(--pmx-brand); }
.ui2 #breadcrumbs .breadcrumb-item.active { color: var(--pmx-ink-soft); font-weight: 500; }
.ui2 #breadcrumbs .breadcrumb-item + .breadcrumb-item::before { color: var(--pmx-ink-faint); opacity: .6; }
.ui2 #breadcrumbs .breadcrumb-item .fa-home { color: var(--pmx-brand); }

/* ---- Encabezado de pagina: titulo + CTA en la misma linea ------------ */
.ui2 .page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.ui2 .page-head__title {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--pmx-ink);
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: .02em;   /* uppercase pide tracking positivo, no negativo */
}
.ui2 .page-head__count {
    display: inline-block;
    margin-left: .4rem;
    padding: .1rem .55rem;
    font-size: .95rem;
    font-weight: 600;
    color: var(--pmx-ink-soft);
    background: #eef1f6;
    border-radius: 999px;
    vertical-align: middle;
}
.ui2 .page-head__sub {
    margin: .4rem 0 0;
    color: var(--pmx-ink-soft);
    font-size: .95rem;
}
.ui2 .page-head__actions { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: .6rem; }
.ui2 .page-head__actions .btn { margin: 0; }

/* ---- Tarjeta base ---------------------------------------------------- */
.ui2 .u-card {
    background: var(--pmx-surface);
    border: 1px solid var(--pmx-border);
    border-radius: var(--pmx-radius);
    box-shadow: var(--pmx-shadow);
}

/* ---- Barra de filtros: una sola fila, boton "Filtrar" incluido ------- */
.ui2 .filter-card { padding: 1.1rem 1.25rem .35rem; margin-bottom: 1.5rem; }
.ui2 .filter-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0 1.15rem;
}
.ui2 .filter-field       { flex: 1 1 170px; min-width: 0; }
.ui2 .filter-field--date { flex: 0 1 150px; }
/* Compacta el margen vertical propio del md-form dentro de la barra */
.ui2 .filter-card .md-form,
.ui2 .data-card__head .md-form { margin-top: .9rem; margin-bottom: 1.1rem; }
.ui2 .filter-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.1rem;   /* iguala el bottom del md-form para alinear el boton */
}
.ui2 .filter-actions .btn { margin: 0; }
/* "Filtrar" es una accion utilitaria, no comercial: va en slate oscuro y NO en
 * teal, para reservar el teal a los CTAs que venden (Contratar/Pagar). */
.ui2 .filter-actions .btn-filter {
    background: var(--pmx-ink) !important;
    color: #fff !important;
    border: 0;
}
.ui2 .filter-actions .btn-filter:hover,
.ui2 .filter-actions .btn-filter:focus {
    background: #222a38 !important;
    color: #fff !important;
}
/* El "Quitar" es btn-flat de MDB: transparente y sin color -> invisible sobre
 * la tarjeta blanca. Lo volvemos un boton ghost legible. */
.ui2 .filter-actions .btn-flat {
    color: var(--pmx-ink-soft) !important;   /* vence .btn{color:#fff!important} de MDB */
    background: transparent;
    box-shadow: none;
    border: 1px solid var(--pmx-border);
}
.ui2 .filter-actions .btn-flat:hover,
.ui2 .filter-actions .btn-flat:focus {
    background: #eef1f6;
    color: var(--pmx-ink) !important;
}

/* Buscador pegado como cabecera de la tarjeta de datos (mismo layout que
 * .filter-card, pero dentro de la misma .data-card, arriba de la tabla, en vez
 * de ser una tarjeta suelta con hueco). */
.ui2 .data-card__head {
    padding: 1.1rem 1.25rem .35rem;
    border-bottom: 1px solid var(--pmx-border);
}

/* ---- Tarjeta de datos + tabla ---------------------------------------- */
/* Las reglas de tabla se comparten entre listados ui2 (pedidos, sitios web…):
 * cada selector lista .orders-table Y .websites-table. Agregar un listado nuevo
 * = sumar su clase a estas listas, sin duplicar el bloque. */
.ui2 .data-card { overflow: hidden; }
.ui2 .orders-table,
.ui2 .websites-table,
.ui2 .domains-table,
.ui2 .emails-table,
.ui2 .cpanels-table { margin: 0; color: var(--pmx-ink); }
/* El tema del bundle centra TODAS las celdas (.table th,.table td{text-align:
 * center}). Lo pasamos a izquierda para que luzca ordenado; numeros y acciones
 * van a la derecha (mas abajo, .col-amount / .col-actions). */
.ui2 .orders-table thead th,
.ui2 .websites-table thead th,
.ui2 .domains-table thead th,
.ui2 .emails-table thead th,
.ui2 .cpanels-table thead th {
    border-top: 0;
    border-bottom: 1px solid var(--pmx-border);
    padding: 1rem 1.1rem;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--pmx-ink-faint);
    white-space: nowrap;
    text-align: left;
}
.ui2 .orders-table tbody td,
.ui2 .websites-table tbody td,
.ui2 .domains-table tbody td,
.ui2 .emails-table tbody td,
.ui2 .cpanels-table tbody td {
    padding: .95rem 1.1rem;
    vertical-align: middle;
    border-top: 1px solid var(--pmx-border);
    text-align: left;
}
.ui2 .orders-table tbody tr:first-child td,
.ui2 .websites-table tbody tr:first-child td,
.ui2 .domains-table tbody tr:first-child td,
.ui2 .emails-table tbody tr:first-child td,
.ui2 .cpanels-table tbody tr:first-child td { border-top: 0; }
.ui2 .orders-table tbody tr:hover,
.ui2 .websites-table tbody tr:hover,
.ui2 .domains-table tbody tr:hover,
.ui2 .emails-table tbody tr:hover,
.ui2 .cpanels-table tbody tr:hover { background: #f7f9fc; }
.ui2 .orders-table .col-order  { font-weight: 600; white-space: nowrap; }
/* Pill con el numero de items del pedido (solo cuando hay 2+) */
.ui2 .orders-table .col-order .items-count {
    display: inline-block;
    margin-left: .4rem;
    min-width: 1.4rem;
    padding: .05rem .42rem;
    font-size: .7rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    color: var(--pmx-ink-soft);
    background: #eef1f6;
    border-radius: 999px;
    vertical-align: middle;
    cursor: default;
}
.ui2 .orders-table .col-amount { font-weight: 600; white-space: nowrap; text-align: right; }
.ui2 .orders-table .col-actions,
.ui2 .websites-table .col-actions,
.ui2 .domains-table .col-actions,
.ui2 .emails-table .col-actions,
.ui2 .cpanels-table .col-actions { text-align: right; white-space: nowrap; }
.ui2 .orders-table .col-actions .btn,
.ui2 .websites-table .col-actions .btn,
.ui2 .domains-table .col-actions .btn,
.ui2 .emails-table .col-actions .btn { margin: .15rem 0 .15rem .35rem; }
/* "Ver pedido": accion secundaria con un toque "glass tornasol" translucido
 * (iridiscente suave). Distinto tono al teal primario -> no compite. El color de
 * texto va con !important porque MDB pone .btn{color:#fff!important}. */
.ui2 .btn-ghost,
.ui2 .related-cards .card-block .btn {
    color: var(--pmx-ink) !important;
    background: var(--pmx-glass) !important;   /* !important vence el btn-primary de los paneles */
    border: 1px solid var(--pmx-glass-bd) !important;
    box-shadow: none !important;
    font-weight: 600;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: transform .14s ease, box-shadow .14s ease, filter .14s ease, border-color .14s ease;
}
.ui2 .btn-ghost:hover,
.ui2 .btn-ghost:focus,
.ui2 .related-cards .card-block .btn:hover,
.ui2 .related-cards .card-block .btn:focus {
    color: var(--pmx-ink) !important;
    transform: translateY(-1px);
    filter: saturate(1.18) brightness(1.02);
    border-color: rgba(120, 140, 220, .5) !important;
    box-shadow: 0 6px 16px -6px rgba(90, 120, 210, .45) !important;
}
/* flecha AL INICIO en "Ver pedido" (homologado icono-primero con los CTAs) */
.ui2 .btn-ghost .fa-angle-right { color: var(--pmx-ink-soft); margin-right: .15rem; }

/* Estado como "pill": estiliza el <span class="text-*"> que ya devuelven
 * order_status() / order_item_status(). Los helpers no se tocan; aqui solo les
 * damos forma de etiqueta. `.col-status` es reusable (tabla y resumen de detalle). */
.ui2 .col-status span {
    display: inline-flex;
    align-items: center;
    gap: .3em;
    padding: .32em .7em;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}
.ui2 .col-status .text-success { color: #1b7a68 !important; background: rgba(43, 187, 173, .15); }
.ui2 .col-status .text-info    { color: #2f6f8f !important; background: rgba(49, 112, 143, .12); }
.ui2 .col-status .text-warning { color: #9a6a00 !important; background: rgba(240, 173, 78, .18); }
.ui2 .col-status .text-danger  { color: #b23b39 !important; background: rgba(217, 83, 79, .14); }
.ui2 .col-status .text-default { color: var(--pmx-ink-soft) !important; background: #eef1f6; }

/* Resumen: primer item visible + "ver N mas" que despliega el resto (native
 * <details>, sin JS). La fila queda compacta por defecto. */
.ui2 .orders-table .col-summary,
.ui2 .websites-table .col-summary { max-width: 340px; }
.ui2 .summary-first { color: var(--pmx-ink); }
.ui2 .summary-more { margin-top: .2rem; }
.ui2 .summary-more > summary {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    cursor: pointer;
    list-style: none;
    color: var(--pmx-brand);
    font-size: .8rem;
    font-weight: 500;
    -webkit-user-select: none;
    user-select: none;
}
.ui2 .summary-more > summary::-webkit-details-marker { display: none; }
/* Triangulo CSS puro que rota al abrir */
.ui2 .summary-more > summary::before {
    content: "";
    display: inline-block;
    width: 0; height: 0;
    border-left: 5px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform .15s ease;
}
.ui2 .summary-more[open] > summary::before { transform: rotate(90deg); }
.ui2 .summary-more[open] > summary { margin-bottom: .4rem; }
.ui2 .summary-more ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .85rem;
    color: var(--pmx-ink-soft);
}
.ui2 .summary-more li { padding: .12rem 0; }
.ui2 .summary-more li::before {
    content: "•";
    color: var(--pmx-ink-faint);
    margin-right: .45rem;
}

/* Estado vacio */
.ui2 .table-empty {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--pmx-ink-soft);
}

/* Pie de la tarjeta (paginacion) */
.ui2 .data-card__foot {
    padding: 1rem;
    border-top: 1px solid var(--pmx-border);
}
.ui2 .data-card__foot .pagination { justify-content: center; margin: 0; }

/* ---- Bloque "gestiona tu cuenta" (los ex-paneles laterales) ---------- */
.ui2 .related { margin-top: 2.25rem; }
.ui2 .related__title {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--pmx-ink-faint);
    margin: 0 0 1rem;
}
/* Neutraliza los margenes negativos del .row (el .page-wrap no es .container y
 * el bleed de -15px desbordaba en movil) y reparte gutter propio. */
.ui2 .related-cards { margin-left: 0; margin-right: 0; }
/* Columnas como flex para que las tarjetas estiren a la misma altura por fila.
 * min-width:0 evita que el flex item se niegue a encoger y desborde horizontal. */
.ui2 .related-cards > [class*="col-"] { display: flex; min-width: 0; padding-left: .5rem; padding-right: .5rem; margin-bottom: 1rem; }
.ui2 .related-cards .card {
    width: 100%;
    height: 100%;
    min-width: 0;
    margin-bottom: 0;   /* el gap vertical lo da el margin-bottom de la columna */
    display: flex;
    flex-direction: column;
    border: 1px solid var(--pmx-border);
    border-radius: var(--pmx-radius);
    box-shadow: none;
}
.ui2 .related-cards .card-header {
    background: transparent;
    border-bottom: 1px solid var(--pmx-border);
    font-weight: 600;
    color: var(--pmx-ink);
}
/* El cuerpo crece; el texto empuja y el boton queda pegado abajo -> alineados */
.ui2 .related-cards .card-block {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.ui2 .related-cards p {
    font-size: .88rem;
    color: var(--pmx-ink-soft);
    flex: 1 1 auto;
}
/* margin-top:auto pega el boton abajo; los lados a 0 matan el margin:6px de MDB
 * (con btn-block de ancho 100% ese margen lateral desbordaba la tarjeta) */
.ui2 .related-cards .card-block .btn { margin: auto 0 0 !important; }

/* Movil (<576px): apilado en bloque puro. Sin flex ni margenes negativos del
 * .row -> el ancho es 100% del contenedor y NO puede desbordar horizontal. */
@media (max-width: 575.98px) {
    .ui2 .related-cards { display: block; margin-left: 0; margin-right: 0; }
    .ui2 .related-cards > [class*="col-"] {
        display: block;
        width: 100%;
        max-width: 100%;
        flex: none;
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 1rem;
    }
    .ui2 .related-cards .card { height: auto; }
    /* En 1-up no hay filas de igual altura, asi que NO necesitamos el flex que
     * ancla el boton abajo (con texto corto colapsaba el espacio inferior y el
     * boton quedaba pegado al borde). Flujo normal -> padding uniforme abajo. */
    .ui2 .related-cards .card-block { display: block; }
    .ui2 .related-cards .card-block .btn { margin: 0 !important; }
}

/* ---- Botones flotantes (WhatsApp / telefono) ------------------------- *
 * Reestilo de .float-whatsapp/.float-phone que emite project_whatsapp_chat().
 * SCOPED a .ui2: solo las paginas migradas tienen el flotante nuevo; las demas
 * conservan el circulo del bundle. Rectangulares, esquinas casi rectas, finos,
 * con CTA de texto inyectado via ::after (sin tocar el markup de la lib). Los
 * !important vencen .float-*{width:60px;border-radius:50px} del bundle MDB. */
.ui2 .float-whatsapp,
.ui2 .float-phone {
    position: fixed;
    right: 22px;
    display: flex !important;
    align-items: center;
    gap: .5rem;
    width: auto !important;
    height: auto !important;
    padding: .6rem .95rem;
    border-radius: 3px !important;
    font-size: 18px;
    line-height: 1;
    color: #fff !important;
    text-decoration: none;
    box-shadow: 0 8px 22px -8px rgba(20, 30, 50, .42);
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
    z-index: 1000;
}
.ui2 .float-whatsapp { background: #25d366 !important; bottom: 22px; }
.ui2 .float-phone    { background: var(--pmx-brand) !important; bottom: 74px; }
.ui2 .float-whatsapp:hover,
.ui2 .float-phone:hover {
    transform: translateY(-2px);
    box-shadow: 0 13px 28px -8px rgba(20, 30, 50, .52);
    filter: brightness(1.03);
}
/* CTA de texto */
.ui2 .float-whatsapp::after { content: "WhatsApp"; }
.ui2 .float-phone::after    { content: "Ll\00E1manos"; }
.ui2 .float-whatsapp::after,
.ui2 .float-phone::after {
    font-family: var(--pmx-font);
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .01em;
}
/* El markup del bundle pone margin-top:16px al icono; con flex sobra */
.ui2 .whatsapp-float,
.ui2 .phone-float { margin-top: 0 !important; }

/* ---- Detalle de pedido (order.php) ----------------------------------- */
/* Etiqueta de seccion reutilizable (mayusculas tracked, tenue) */
.ui2 .section-label {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--pmx-ink-faint);
    margin: 0 0 1rem;
}
/* Divisor hairline junto a los títulos de sección del DASHBOARD (mismo gesto que
   .svc-group-label): el título y una línea que llena el resto de la fila, para dar ritmo.
   Acotado a .dashboard a propósito: .section-label lo comparten otras páginas
   (payments, etc.) donde no lo queremos. */
.ui2 .dashboard .section-label { display: flex; align-items: center; gap: .7rem; }
.ui2 .dashboard .section-label::after {
    content: ""; flex: 1; height: 1px; background: var(--pmx-border);
}
.ui2 .detail-section { margin-bottom: 2rem; }

/* payments.php: separa el titulo de una seccion (section-label) del data-card
 * anterior. El primer section-label sigue al page-head (no a un data-card), asi
 * que no se ve afectado. */
.ui2 .payments-page .data-card + .section-label { margin-top: 2rem; }

/* payments.php: tira de indicadores (KPIs) bajo el encabezado. */
.ui2 .pmx-kpis {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.ui2 .pmx-kpi {
    flex: 1 1 0;
    min-width: 180px;
    padding: 1.1rem 1.25rem;
}
.ui2 .pmx-kpi__label {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--pmx-ink-faint);
    margin: 0 0 .4rem;
}
.ui2 .pmx-kpi__value {
    font-family: var(--pmx-font-head);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--pmx-ink);
}
.ui2 .pmx-kpi__sub {
    font-size: .8rem;
    color: var(--pmx-ink-soft);
    margin: .25rem 0 0;
}
/* En movil se apilan (mismo criterio que las related-cards). */
@media (max-width: 575px) {
    .ui2 .pmx-kpis { display: block; }
    .ui2 .pmx-kpi { margin-bottom: .75rem; }
}

/* ---- payment_methods.php: wallet de metodos/tarjetas (u-card en grid) ---- */
.ui2 .pm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 2.5rem;
}
.ui2 .pm-card {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    padding: 1.25rem 1.35rem;
}
/* El principal se resalta con el teal de marca (borde interior, sin mover layout) */
.ui2 .pm-card--default { box-shadow: inset 0 0 0 2px var(--pmx-brand), var(--pmx-shadow); }
.ui2 .pm-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.ui2 .pm-card__brand { font-size: 2.1rem; line-height: 1; color: var(--pmx-ink-soft); }
.ui2 .pm-card__body { display: flex; flex-direction: column; gap: .15rem; }
.ui2 .pm-card__number {
    font-family: var(--pmx-font-head);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--pmx-ink);
}
.ui2 .pm-card__name { color: var(--pmx-ink); font-weight: 600; font-size: .95rem; }
.ui2 .pm-card__sub  { color: var(--pmx-ink-soft); font-size: .82rem; }
/* Botones anclados abajo; ocupan el ancho disponible en la tarjeta */
.ui2 .pm-card__foot {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
}
.ui2 .pm-card__foot .btn { margin: 0; }
/* Etiqueta "Principal": pill teal (marca), reservada para el metodo por defecto */
.ui2 .pm-card__badge {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    padding: .32em .8em;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    color: #1b7a68;
    background: rgba(43, 187, 173, .15);
    cursor: default;
}
@media (max-width: 575px) {
    .ui2 .pm-grid { grid-template-columns: 1fr; }
}

/* ---- wallet.php: saldo (hero) + añadir fondos + movimientos --------------- */
.ui2 .wallet-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 1rem;
    margin-bottom: 2rem;
}
.ui2 .wallet-balance { padding: 1.5rem 1.6rem; display: flex; flex-direction: column; justify-content: center; }
.ui2 .wallet-balance__label {
    margin: 0 0 .35rem;
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--pmx-ink-faint);
}
.ui2 .wallet-balance__amount {
    font-family: var(--pmx-font-head);
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.05;
    color: var(--pmx-ink);
}
.ui2 .wallet-balance__amount.is-positive { color: #1b7a68; }   /* teal oscuro cuando hay saldo */
.ui2 .wallet-balance__hint { margin: .5rem 0 0; font-size: .82rem; color: var(--pmx-ink-soft); }
.ui2 .wallet-add { padding: 1.35rem 1.5rem; }
.ui2 .wallet-add .section-label { margin-bottom: .5rem; }
.ui2 .wallet-add__desc { font-size: .85rem; color: var(--pmx-ink-soft); margin-bottom: 1rem; }
.ui2 .wallet-add .btn-default { margin: 0; }
/* Importe del movimiento: abono en teal, cargo en tinta normal */
.ui2 .wallet-mov__amount { color: var(--pmx-ink); }
.ui2 .wallet-mov__amount.is-credit { color: #1b7a68; }
/* Mini-resumen: el "total abonado" en teal (reusa la tira .pmx-kpis) */
.ui2 .wallet-summary .pmx-kpi__value.is-credit { color: #1b7a68; }
/* Estado vacío de movimientos (con CTA a "Añadir fondos") */
.ui2 .wallet-empty { padding: 2.5rem 1.5rem; text-align: center; }
.ui2 .wallet-empty__icon { font-size: 2rem; color: var(--pmx-ink-faint); margin-bottom: .75rem; }
.ui2 .wallet-empty__text { color: var(--pmx-ink-soft); margin-bottom: 1.1rem; }
.ui2 .wallet-empty .btn { margin: 0; }
@media (max-width: 767px) {
    .ui2 .wallet-top { grid-template-columns: 1fr; }
}

/* Resumen key-value dentro de una u-card */
.ui2 .detail-list { overflow: hidden; }
.ui2 .detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1.25rem;
    border-top: 1px solid var(--pmx-border);
}
.ui2 .detail-row:first-child { border-top: 0; }
.ui2 .detail-label { color: var(--pmx-ink-soft); font-size: .92rem; }
.ui2 .detail-value { color: var(--pmx-ink); font-weight: 500; text-align: right; margin: 0; }
.ui2 .detail-value--strong { font-weight: 700; font-size: 1.05rem; }

/* "Cancelar pedido": accion destructiva secundaria (ghost con tinte rojo) */
.ui2 .btn-cancel {
    color: #b23b39 !important;
    background: transparent;
    box-shadow: none;
    border: 1px solid rgba(217, 83, 79, .32);
    font-weight: 600;
}
.ui2 .btn-cancel:hover,
.ui2 .btn-cancel:focus {
    background: rgba(217, 83, 79, .08);
    border-color: rgba(217, 83, 79, .5);
    color: #a5302e !important;
}

/* Embed de la factura PDF */
.ui2 .invoice-embed {
    width: 100%;
    height: 520px;
    border: 1px solid var(--pmx-border);
    border-radius: var(--pmx-radius);
    margin-top: 1rem;
    background: #f4f6f9;
}
.ui2 .invoice-actions { display: flex; flex-wrap: wrap; gap: .6rem; }

/* Nota/parrafo dentro de una card de detalle (factura, etc.) */
.ui2 .detail-note {
    margin: 0 0 1rem;
    color: var(--pmx-ink-soft);
    font-size: .92rem;
    line-height: 1.5;
}
.ui2 .detail-note:last-child { margin-bottom: 0; }
.ui2 .detail-note.text-muted { color: var(--pmx-ink-faint); }
.ui2 .detail-note .col-status { margin-right: .4rem; }

/* Bloque de ayuda al pie del detalle */
.ui2 .order-help {
    margin-top: 1.25rem;
    text-align: center;
    color: var(--pmx-ink-soft);
    font-size: .92rem;
}
.ui2 .order-help a { color: var(--pmx-brand); font-weight: 600; }
.ui2 .order-help a:hover { text-decoration: underline; }

/* ---- Dashboard / cockpit (dashboard.php) ----------------------------- */
/* Saludo */
.ui2 .dash-hero { margin-bottom: 1.5rem; }
.ui2 .dash-hero__title {
    font-family: var(--pmx-font-head);
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--pmx-ink);
    margin: 0;
    letter-spacing: -.01em;
}
.ui2 .dash-hero__sub { margin: .35rem 0 0; color: var(--pmx-ink-soft); font-size: .98rem; }

/* Banner/aviso */
.ui2 .dash-banner { display: block; margin-bottom: 1.5rem; }
.ui2 .dash-banner img {
    display: block; width: 100%; height: auto;
    border-radius: var(--pmx-radius);
    box-shadow: var(--pmx-shadow);
}

/* Alertas accionables */
.ui2 .dash-alerts { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 2rem; }
.ui2 .dash-alert {
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .7rem 1.05rem;
    border-radius: 12px;
    font-size: .92rem; font-weight: 600;
    border: 1px solid transparent;
    transition: transform .14s ease, box-shadow .14s ease;
}
.ui2 .dash-alert:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(20,30,50,.35); }
.ui2 .dash-alert i { font-size: 1.05rem; }
.ui2 .dash-alert strong { font-weight: 800; }
.ui2 .dash-alert--warning { color: #9a6a00; background: rgba(240,173,78,.15); border-color: rgba(240,173,78,.35); }
.ui2 .dash-alert--danger  { color: #b23b39; background: rgba(217,83,79,.12);  border-color: rgba(217,83,79,.32); }

/* Widgets (2 columnas que se apilan) */
.ui2 .dash-widgets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: .5rem;
}
.ui2 .dash-widget { margin-bottom: 1.5rem; }
.ui2 .dash-widget__body { overflow: hidden; }
.ui2 .dash-widget__foot { padding: .25rem 1.25rem 1rem; }

/* Lista de próximos vencimientos */
.ui2 .expiry-list { list-style: none; margin: 0; padding: 0; }
.ui2 .expiry-item {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .85rem 1.25rem;
    border-top: 1px solid var(--pmx-border);
}
.ui2 .expiry-item:first-child { border-top: 0; }
.ui2 .expiry-name { font-weight: 600; color: var(--pmx-ink); word-break: break-all; }
.ui2 .expiry-days { font-size: .85rem; color: var(--pmx-ink-soft); white-space: nowrap; }
.ui2 .expiry-days.is-urgent { color: #b23b39; font-weight: 600; }

/* Dona "estado de dominios" (conic-gradient, sin JS) */
/* ---- Estatus de cliente (VIP) + Salud de la cuenta (dashboard.php) ----------
 * Dos tarjetas arriba: pertenencia/orgullo (retiene) + acción (protege). v1 solo
 * reconocimiento; el Platino reusa el gradiente tornasol de marca como "premio". */
.ui2 .dash-status { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; margin-bottom: 1.25rem; }
@media (max-width: 767px) { .ui2 .dash-status { grid-template-columns: 1fr; } }

.ui2 .vip-card { display: flex; gap: .9rem; padding: 1rem 1.1rem; position: relative; overflow: hidden; }
.ui2 .vip-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--tier-grad); }
.ui2 .vip-card__badge {
    flex: 0 0 auto; width: 54px; height: 54px; border-radius: 14px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .08rem;
    background: var(--tier-grad); color: #fff; box-shadow: 0 6px 14px -7px var(--tier-shadow);
}
.ui2 .vip-card__badge i { font-size: 1.2rem; }
.ui2 .vip-card__badge span { font-size: .46rem; font-weight: 800; letter-spacing: .08em; }
.ui2 .vip-card__body { min-width: 0; flex: 1; }
.ui2 .vip-card__eyebrow { text-transform: uppercase; letter-spacing: .06em; font-size: .65rem; font-weight: 700; color: var(--pmx-ink-faint); margin: 0 0 .15rem; }
.ui2 .vip-card__tier { font-family: var(--pmx-font-head); font-size: 1.2rem; font-weight: 800; color: var(--pmx-ink); margin: 0; }
.ui2 .vip-card__since { font-size: .8rem; color: var(--pmx-ink-soft); margin: .1rem 0 .45rem; }
.ui2 .vip-card__since i { color: #e0607e; }
.ui2 .vip-progress { margin: .25rem 0 .4rem; }
.ui2 .vip-progress__bar { height: 6px; border-radius: 99px; background: var(--pmx-bg); overflow: hidden; }
.ui2 .vip-progress__bar span { display: block; height: 100%; border-radius: 99px; background: var(--tier-grad); }
.ui2 .vip-progress__label { font-size: .75rem; color: var(--pmx-ink-soft); margin: .3rem 0 0; }
.ui2 .vip-progress__label--max { color: #9a6a00; font-weight: 600; }
.ui2 .vip-card__teaser { font-size: .75rem; color: var(--pmx-ink-faint); margin: .4rem 0 0; }
.ui2 .vip-card__teaser i { color: var(--pmx-brand); }
.ui2 .vip-card__link { display: inline-block; font-size: .75rem; font-weight: 600; color: var(--pmx-brand); text-decoration: none; margin-top: .35rem; }
.ui2 .vip-card__link:hover { text-decoration: underline; }
/* Gloss: reflejo diagonal que barre la tarjeta. Ocurre (1) al cargar, (2) en loop cada ~6 s
   —el keyframe barre en el primer 18% y deja el resto en reposo fuera de cuadro— y (3) en hover
   con un barrido inmediato. overflow:hidden de .vip-card lo recorta. */
.ui2 .vip-card::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 55%;
    background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, .85) 50%, transparent 80%);
    transform: skewX(-18deg); pointer-events: none;
    animation: vipGloss 6s ease-in-out .4s infinite;
}
.ui2 .vip-card:hover::after { animation: vipGlossHover .8s ease-in-out 1; }
@keyframes vipGloss {
    0%   { left: -60%; }
    18%  { left: 130%; }
    100% { left: 130%; }
}
@keyframes vipGlossHover { from { left: -60%; } to { left: 130%; } }
@media (prefers-reduced-motion: reduce) {
    .ui2 .vip-card::after,
    .ui2 .vip-card:hover::after { display: none; }
}
.ui2 .vip-card--bronze   { --tier-grad: linear-gradient(135deg, #c88a4a, #8a5a2b); --tier-shadow: rgba(160,100,40,.5); }
.ui2 .vip-card--silver   { --tier-grad: linear-gradient(135deg, #cbd4dc, #8b97a3); --tier-shadow: rgba(120,140,160,.5); }
.ui2 .vip-card--gold     { --tier-grad: linear-gradient(135deg, #e6c04d, #c79a1e); --tier-shadow: rgba(200,160,30,.5); }
.ui2 .vip-card--platinum { --tier-grad: linear-gradient(135deg, #8ad0ff, #a79bf5 45%, #7be0c4); --tier-shadow: rgba(120,140,240,.55); }

.ui2 .health-card { display: flex; gap: 1rem; align-items: center; padding: 1rem 1.1rem; }
.ui2 .health-gauge {
    --track: var(--pmx-bg); flex: 0 0 auto; width: 84px; height: 84px; border-radius: 50%; position: relative;
    background: conic-gradient(var(--gauge) calc(var(--v) * 1%), var(--track) 0);
}
.ui2 .health-gauge::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--pmx-surface); }
/* Centro: numero centrado en el anillo (align-items:center, no baseline, para que no
   se traslape con la circunferencia); el "%" va chico arriba como superindice. */
.ui2 .health-gauge__center { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; line-height: 1; }
.ui2 .health-gauge__num { font-family: var(--pmx-font-head); font-size: 1.4rem; font-weight: 800; color: var(--pmx-ink); line-height: 1; }
.ui2 .health-gauge__pct { font-size: .7rem; font-weight: 700; color: var(--pmx-ink-faint); align-self: center; transform: translateY(-.35em); margin-left: 1px; }
.ui2 .health-gauge--ok      { --gauge: #1fb6a6; }
.ui2 .health-gauge--warning { --gauge: #e6a11e; }
.ui2 .health-gauge--danger  { --gauge: #d9534f; }
.ui2 .health-card__body { flex: 1; min-width: 0; }
.ui2 .health-list { list-style: none; margin: .35rem 0 0; padding: 0; }
.ui2 .health-list__item { display: flex; align-items: center; gap: .5rem; padding: .18rem 0; font-size: .82rem; }
.ui2 .health-list__item i { color: #d9534f; font-size: .92rem; flex: 0 0 auto; }
.ui2 .health-list__item.is-ok i { color: #1fb6a6; }
.ui2 .health-list__label { color: var(--pmx-ink); }
.ui2 .health-list__nudge { margin-left: auto; font-size: .78rem; font-weight: 600; color: var(--pmx-brand); text-decoration: none; white-space: nowrap; }
.ui2 .health-list__nudge:hover { text-decoration: underline; }

/* ---- Página de niveles (membership.php) ---- */
.ui2 .membership-current { margin-bottom: 1.5rem; }
.ui2 .membership-tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.25rem; }
@media (max-width: 900px) { .ui2 .membership-tiers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ui2 .membership-tiers { grid-template-columns: 1fr; } }
.ui2 .tier-card { position: relative; padding: 1.15rem 1.2rem; display: flex; flex-direction: column; overflow: hidden; }
.ui2 .tier-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--tier-grad); }
.ui2 .tier-card--bronze   { --tier-grad: linear-gradient(135deg, #c88a4a, #8a5a2b); --tier-shadow: rgba(160,100,40,.5); }
.ui2 .tier-card--silver   { --tier-grad: linear-gradient(135deg, #cbd4dc, #8b97a3); --tier-shadow: rgba(120,140,160,.5); }
.ui2 .tier-card--gold     { --tier-grad: linear-gradient(135deg, #e6c04d, #c79a1e); --tier-shadow: rgba(200,160,30,.5); }
.ui2 .tier-card--platinum { --tier-grad: linear-gradient(135deg, #8ad0ff, #a79bf5 45%, #7be0c4); --tier-shadow: rgba(120,140,240,.55); }
.ui2 .tier-card__head { display: flex; align-items: center; gap: .7rem; margin-bottom: .55rem; }
.ui2 .tier-card__badge { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--tier-grad); color: #fff; font-size: 1.1rem; box-shadow: 0 6px 14px -7px var(--tier-shadow); }
.ui2 .tier-card__name { font-family: var(--pmx-font-head); font-size: 1.05rem; font-weight: 800; color: var(--pmx-ink); margin: 0; }
.ui2 .tier-card__flag { display: inline-block; font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: .1rem .45rem; border-radius: 99px; margin-top: .2rem; }
.ui2 .tier-card__flag--current { background: rgba(43,187,173,.16); color: #1b7a68; }
.ui2 .tier-card__flag--done { background: var(--pmx-bg); color: var(--pmx-ink-soft); }
.ui2 .tier-card__blurb { font-size: .82rem; color: var(--pmx-ink-soft); margin: 0 0 .7rem; }
.ui2 .tier-card__benefits { list-style: none; margin: auto 0 0; padding: 0; }
.ui2 .tier-card__benefits li { display: flex; gap: .45rem; align-items: flex-start; font-size: .82rem; color: var(--pmx-ink); padding: .18rem 0; }
.ui2 .tier-card__benefits i { color: var(--pmx-brand); font-size: .78rem; margin-top: .2rem; flex: 0 0 auto; }
.ui2 .tier-card.is-locked { opacity: .8; }
.ui2 .tier-card.is-current { box-shadow: 0 0 0 2px rgba(43,187,173,.55), 0 14px 30px -16px rgba(20,30,50,.4); }
.ui2 .membership-foot { display: flex; align-items: center; gap: .5rem; color: var(--pmx-ink-soft); font-size: .9rem; background: var(--pmx-surface); border: 1px dashed var(--pmx-border); border-radius: var(--pmx-radius); padding: .9rem 1.1rem; }
.ui2 .membership-foot i { color: var(--pmx-brand); }

.ui2 .donut-card { display: flex; align-items: center; gap: 1.5rem; padding: 1.5rem; flex-wrap: wrap; }
.ui2 .donut {
    --online: #1fb6a6; --expiring: #e6a11e; --expired: #d9534f; --external: #9aa3b2;
    position: relative; flex: 0 0 auto;
    width: 150px; height: 150px; border-radius: 50%;
    background: conic-gradient(
        var(--online)   0         var(--a1),
        var(--expiring) var(--a1) var(--a2),
        var(--expired)  var(--a2) var(--a3),
        var(--external) var(--a3) 100%);
}
.ui2 .donut::after {
    content: ""; position: absolute; inset: 20px;
    background: var(--pmx-surface); border-radius: 50%;
}
.ui2 .donut__center {
    position: absolute; inset: 0; z-index: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ui2 .donut__num { font-family: var(--pmx-font-head); font-size: 1.9rem; font-weight: 800; color: var(--pmx-ink); line-height: 1; }
.ui2 .donut__label { font-size: .78rem; color: var(--pmx-ink-faint); text-transform: uppercase; letter-spacing: .04em; }
.ui2 .donut-legend { list-style: none; margin: 0; padding: 0; }
.ui2 .donut-legend li { display: flex; align-items: center; gap: .5rem; padding: .28rem 0; color: var(--pmx-ink-soft); font-size: .92rem; }
.ui2 .donut-legend b { margin-left: auto; color: var(--pmx-ink); font-weight: 700; }
.ui2 .donut-legend .dot { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.ui2 .donut-legend .dot--online   { background: #1fb6a6; }
.ui2 .donut-legend .dot--expiring { background: #e6a11e; }
.ui2 .donut-legend .dot--expired  { background: #d9534f; }
.ui2 .donut-legend .dot--external { background: #9aa3b2; }
.ui2 .donut-legend li a { display: flex; align-items: center; gap: .5rem; flex: 1; color: inherit; text-decoration: none; }
.ui2 .donut-legend li a:hover { color: var(--pmx-brand); }

/* Tarjetas de servicio (KPI + acción) */
/* Sub-encabezado de cada bloque de accesos ("Tus servicios" / "Explora más"):
   subordinado al section-label, con un divisor que llena la fila. */
.ui2 .svc-group-label {
    display: flex; align-items: center; gap: .6rem;
    font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
    color: var(--pmx-ink-soft); margin: .2rem 0 .8rem;
}
.ui2 .svc-group-label::after { content: ""; flex: 1; height: 1px; background: var(--pmx-border); }
.ui2 .svc-grid + .svc-group-label { margin-top: 1.6rem; }  /* separa el 2do bloque del 1ro */
.ui2 .svc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1rem;
}
.ui2 .svc-card {
    display: flex; flex-direction: column;
    padding: 1.1rem 1.15rem 1.15rem;
    transition: transform .14s ease, box-shadow .14s ease;
}
.ui2 .svc-card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -14px rgba(20,30,50,.4); }
.ui2 .svc-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .35rem; }
.ui2 .svc-card__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 11px;
    background: rgba(43,187,173,.12); color: var(--pmx-brand); font-size: 1.15rem;
}
.ui2 .svc-card__num { font-family: var(--pmx-font-head); font-size: 1.8rem; font-weight: 800; color: var(--pmx-ink); line-height: 1; }
.ui2 .svc-card--empty .svc-card__num { color: var(--pmx-ink-faint); }
.ui2 .svc-card__name { font-weight: 600; color: var(--pmx-ink); margin-bottom: .9rem; }
.ui2 .svc-card__btn { margin-top: auto !important; align-self: flex-start; }

/* Aviso informativo (HTML, reemplaza la imagen) */
.ui2 .dash-notice {
    display: flex; gap: .9rem; align-items: flex-start;
    margin: 0 0 1.5rem;
    padding: 1rem 1.25rem;
    background: rgba(49, 112, 143, .08);   /* azul informativo (no teal/success) */
    border: 1px solid rgba(49, 112, 143, .25);
    border-radius: var(--pmx-radius);
}
.ui2 .dash-notice > i { color: #2f6f8f; font-size: 1.25rem; margin-top: .1rem; }
.ui2 .dash-notice__body strong { color: var(--pmx-ink); }
.ui2 .dash-notice__body p { margin: .2rem 0 0; color: var(--pmx-ink-soft); font-size: .92rem; }

/* Recursos de hosting (medidores async de cPanel) */
.ui2 .cpanel-usage { padding: 1.25rem; }
.ui2 .cpanel-usage__loading,
.ui2 .cpanel-usage__empty { color: var(--pmx-ink-soft); font-size: .92rem; }
.ui2 .cpanel-meter { margin-bottom: 1rem; }
.ui2 .cpanel-meter:last-child { margin-bottom: 0; }
.ui2 .cpanel-meter__top { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .4rem; }
.ui2 .cpanel-meter__name { font-weight: 600; color: var(--pmx-ink); word-break: break-all; }
.ui2 .cpanel-meter__val { color: var(--pmx-ink-soft); font-size: .85rem; white-space: nowrap; }
.ui2 .cpanel-meter__bar { height: 9px; border-radius: 999px; background: #eef1f6; overflow: hidden; }
.ui2 .cpanel-meter__bar > span { display: block; height: 100%; border-radius: 999px; transition: width .4s ease; }
.ui2 .cpanel-meter__bar > span.is-ok      { background: #1fb6a6; }
.ui2 .cpanel-meter__bar > span.is-warning { background: #e6a11e; }
.ui2 .cpanel-meter__bar > span.is-danger  { background: #d9534f; }

/* Resumen agregado (cuando hay muchas cuentas) */
.ui2 .cpanel-summary { margin-bottom: 1.25rem; }
.ui2 .cpanel-summary__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.ui2 .cpanel-summary__num { font-family: var(--pmx-font-head); font-size: 1.5rem; font-weight: 800; color: var(--pmx-ink); }
.ui2 .cpanel-summary__num small { font-family: var(--pmx-font); font-size: .9rem; font-weight: 500; color: var(--pmx-ink-soft); }
.ui2 .cpanel-summary__pct { font-family: var(--pmx-font-head); font-size: 1.5rem; font-weight: 800; color: var(--pmx-brand); }
.ui2 .cpanel-meter__bar--big { height: 14px; }
.ui2 .cpanel-summary__meta { margin-top: .5rem; font-size: .85rem; color: var(--pmx-ink-faint); }
.ui2 .cpanel-top__label { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--pmx-ink-faint); margin-bottom: .6rem; }
.ui2 .cpanel-usage__all { margin-top: 1rem; }

/* ---- Listado de hosting (cpanels.php) -------------------------------- */
/* Separacion entre cuentas: cada renglon lleva mas aire vertical para que de un vistazo se vea que
 * medidores pertenecen a que cPanel; adentro, los medidores van compactos (mas junto = mas facil de
 * leer como un bloque). */
.ui2 .cpanels-table tbody td { padding-top: 2rem; padding-bottom: 2rem; }
.ui2 .hosting-usage .cpanel-meter { margin-bottom: .55rem; }
.ui2 .hosting-usage .cpanel-meter:last-child { margin-bottom: 0; }

/* Columna cuenta: dominio como enlace fuerte + plan y addons en lineas tenues. */
.ui2 .cpanels-table .col-url { white-space: normal; }
.ui2 .cpanels-table .cpanel-domain { color: var(--pmx-ink); font-weight: 600; word-break: break-all; }
.ui2 .cpanels-table .cpanel-domain:hover,
.ui2 .cpanels-table .cpanel-domain:focus { color: var(--pmx-brand); }
.ui2 .cpanels-table .plan-name { display: block; margin-top: .15rem; font-size: .85rem; color: var(--pmx-ink-soft); }
.ui2 .cpanels-table .hosting-addons { display: block; margin-top: .2rem; font-size: .8rem; color: var(--pmx-ink-faint); }

/* Columna uso: da aire a los medidores para que no se aplasten. */
.ui2 .cpanels-table .col-usage { min-width: 220px; }
.ui2 .hosting-usage__loading { color: var(--pmx-ink-faint); font-size: .9rem; }
.ui2 .hosting-usage__na { color: var(--pmx-ink-faint); }

/* Aviso "casi lleno": empuja el addon sin alarmar (ambar suave + CTA de marca). */
.ui2 .hosting-usage__callout {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .25rem .5rem;
    margin-top: .8rem;
    padding: .55rem .7rem;
    font-size: .82rem;
    line-height: 1.45;
    color: #7d5600;
    background: rgba(240, 173, 78, .14);
    border: 1px solid rgba(240, 173, 78, .35);
    border-radius: var(--pmx-radius);
}
.ui2 .hosting-usage__callout > .fa-exclamation-triangle { color: #d99a1e; }
.ui2 .hosting-usage__addlink { font-weight: 600; color: var(--pmx-brand); white-space: nowrap; }
.ui2 .hosting-usage__addlink:hover,
.ui2 .hosting-usage__addlink:focus { text-decoration: underline; }

/* Columna expiracion: fecha + auto-renov (mismo lenguaje que domains-table). */
.ui2 .cpanels-table .col-expire { white-space: nowrap; }
.ui2 .cpanels-table .expire-date { display: block; color: var(--pmx-ink); }
.ui2 .cpanels-table .autorenew { margin-top: .2rem; font-size: .8rem; }
.ui2 .cpanels-table .autorenew i { margin-right: .25rem; }
.ui2 .cpanels-table .autorenew--on  { color: #1b7a68; }
.ui2 .cpanels-table .autorenew--off { color: #a98436; }
/* Es un enlace a "servicios" (donde se activa/administra la auto-renov): subraya al hover para que
 * se lea clickeable, sin perder su color de estado. Antes era texto muerto ("y ahora que hago?"). */
.ui2 .cpanels-table a.autorenew { text-decoration: none; cursor: pointer; }
.ui2 .cpanels-table a.autorenew:hover,
.ui2 .cpanels-table a.autorenew:focus { text-decoration: underline; }

/* Acciones: alineadas a la derecha, espacio uniforme y wrap en pantallas chicas. */
.ui2 .cpanels-table .row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; }
.ui2 .cpanels-table .row-actions .btn { margin: 0; }

/* Fila con problema (no ACTIVE / dominio sin resolver): tinte de alerta muy sutil. */
.ui2 .cpanels-table .cpanel-row--problem td { background: rgba(217, 83, 79, .04); }

/* "Contactar soporte" tambien en el listado de hosting (mismo patron ambar). */
.ui2 .cpanels-table .col-actions .btn-support {
    color: #9a6a00 !important;   /* vence .btn{color:#fff!important} de MDB */
    background: rgba(240, 173, 78, .14);
    box-shadow: none;
    border: 1px solid rgba(240, 173, 78, .35);
    font-weight: 600;
}
.ui2 .cpanels-table .col-actions .btn-support:hover,
.ui2 .cpanels-table .col-actions .btn-support:focus {
    background: rgba(240, 173, 78, .24);
    color: #7d5600 !important;
}

/* ---- Modal de mejoras de hosting (customize.php): 4 sliders + total en vivo ---- */
.ui2.cpanel-upgrade { padding: 1.25rem 1.5rem 1.5rem; }
.ui2 .cpanel-upgrade__sub { color: var(--pmx-ink-soft); font-size: .9rem; margin: -.25rem 0 1.25rem; }
.ui2 .up-slider { margin-bottom: 1.5rem; }
.ui2 .up-slider__top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .35rem; }
.ui2 .up-slider__label { font-weight: 600; color: var(--pmx-ink); }
.ui2 .up-slider__label i { color: var(--pmx-brand); margin-right: .4rem; }
.ui2 .up-slider__val { color: var(--pmx-ink-soft); font-size: .9rem; white-space: nowrap; }
.ui2 .up-slider__val b { font-size: 1.15rem; color: var(--pmx-brand); }
.ui2 .up-slider__range {
    width: 100%; -webkit-appearance: none; appearance: none;
    height: 6px; border-radius: 999px; background: #e6ebf2; outline: none; margin: .35rem 0;
}
.ui2 .up-slider__range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%;
    background: var(--pmx-brand); cursor: pointer; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.ui2 .up-slider__range::-moz-range-thumb {
    width: 20px; height: 20px; border-radius: 50%; border: 3px solid #fff;
    background: var(--pmx-brand); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
/* MDB auto-mejora los input[type=range] e inyecta un "thumb" flotante (pin azul con el valor) que se
   encima arriba del modal al arrastrar. No lo queremos: el valor ya se ve en .up-slider__val y el thumb
   nativo ya está estilizado. Se oculta el pin de MDB (y su wrapper .range-field no debe afectar el layout). */
.ui2 .up-slider .thumb { display: none !important; }
.ui2 .up-slider .range-field { margin: 0; padding: 0; }
.ui2 .up-slider__scale { display: flex; justify-content: space-between; font-size: .74rem; color: var(--pmx-ink-faint); margin-top: .2rem; }
.ui2 .cpanel-upgrade__foot {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    margin-top: 1.6rem; padding-top: 1.25rem; border-top: 1px solid var(--pmx-border);
}
.ui2 .cpanel-upgrade__total { display: flex; flex-direction: column; }
.ui2 .cpanel-upgrade__total-label { font-size: .78rem; color: var(--pmx-ink-soft); text-transform: uppercase; letter-spacing: .03em; }
.ui2 .cpanel-upgrade__total-num { font-family: var(--pmx-font-head); font-size: 1.7rem; font-weight: 800; color: var(--pmx-ink); }
.ui2 .cpanel-upgrade__total-note { font-size: .76rem; color: var(--pmx-ink-faint); max-width: 340px; }
/* El .btn-boost por defecto es blanco (pensado para ir SOBRE el gradiente del widget). Dentro del modal
 * (fondo blanco) se perdía; aquí lo pintamos con el verde de marca + texto blanco para que sea el CTA claro. */
.ui2 .cpanel-upgrade__foot .btn-boost { background: var(--pmx-brand) !important; color: #fff !important; }
.ui2 .cpanel-upgrade__foot .btn-boost:hover,
.ui2 .cpanel-upgrade__foot .btn-boost:focus { background: #1f9d91 !important; color: #fff !important; }
.ui2 .cpanel-upgrade__foot .btn-boost[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }

/* Vencimientos unificados: icono de tipo + tipo + chip de días */
.ui2 .expiry-svc {
    flex: 0 0 auto; width: 30px; height: 30px; margin-right: .7rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px; background: rgba(43,187,173,.12); color: var(--pmx-brand); font-size: .85rem;
}
.ui2 .expiry-name { flex: 1 1 auto; min-width: 0; }
.ui2 .expiry-type { display: block; font-size: .74rem; font-weight: 400; color: var(--pmx-ink-faint); }
.ui2 .expiry-days {
    flex: 0 0 auto; white-space: nowrap;
    font-size: .76rem; font-weight: 600; color: var(--pmx-ink-soft);
    background: #eef1f6; padding: .2rem .55rem; border-radius: 999px;
}
.ui2 .expiry-days.is-urgent { color: #b23b39; background: rgba(217,83,79,.12); }

/* Gráfica de inversión mensual (barras, una serie) */
.ui2 .spend-card { padding: 1.25rem; }
.ui2 .spend-total { margin-bottom: 1rem; }
.ui2 .spend-total__num { font-family: var(--pmx-font-head); font-size: 1.6rem; font-weight: 800; color: var(--pmx-ink); }
.ui2 .spend-total__label { display: block; margin-top: .1rem; color: var(--pmx-ink-soft); font-size: .85rem; }
.ui2 .spend-chart { display: flex; align-items: flex-end; gap: .5rem; height: 140px; }
.ui2 .spend-bar { flex: 1 1 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.ui2 .spend-bar__fill { width: 70%; max-width: 36px; min-height: 2px; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, #2bbbad, #1b9e8e); }
.ui2 .spend-bar__label { margin-top: .45rem; font-size: .72rem; color: var(--pmx-ink-faint); text-transform: uppercase; }

/* Actividad reciente */
.ui2 .activity-list { list-style: none; margin: 0; padding: 0; }
.ui2 .activity-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1.25rem; border-top: 1px solid var(--pmx-border); }
.ui2 .activity-item:first-child { border-top: 0; }
.ui2 .activity-main { display: flex; flex-direction: column; text-decoration: none; }
.ui2 .activity-id { font-weight: 600; color: var(--pmx-ink); }
.ui2 .activity-date { font-size: .8rem; color: var(--pmx-ink-faint); }
.ui2 .activity-right { display: flex; align-items: center; gap: .7rem; }
.ui2 .activity-amount { font-weight: 600; color: var(--pmx-ink); white-space: nowrap; }

/* Nota de correo (almacenamiento contratado) */
.ui2 .dash-mailnote { display: flex; align-items: center; gap: .6rem; margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--pmx-border); color: var(--pmx-ink-soft); font-size: .9rem; }
.ui2 .dash-mailnote:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.ui2 .dash-mailnote i { color: var(--pmx-brand); }

/* ---- Listado de sitios web (websites.php) ---------------------------- */

/* Aviso reusable (info): usado por el "tambien tienes sitios clasicos". Barra
 * suave con icono + texto + accion (glass), no un alert chillon de Bootstrap. */
.ui2 .u-notice {
    display: flex;
    align-items: center;
    gap: .9rem;
    flex-wrap: wrap;
    padding: .95rem 1.25rem;
    margin-bottom: 1.5rem;
    background: rgba(49, 112, 143, .07);
    border: 1px solid rgba(49, 112, 143, .18);
    border-radius: var(--pmx-radius);
    color: var(--pmx-ink);
    font-size: .92rem;
    line-height: 1.5;
}
.ui2 .u-notice > .fa { color: #2f6f8f; font-size: 1.05rem; }
.ui2 .u-notice__text { flex: 1 1 240px; min-width: 0; }
.ui2 .u-notice .btn { margin: 0; flex: 0 0 auto; }

/* Campo de busqueda: ocupa el ancho disponible en la barra de filtros */
.ui2 .filter-field--grow { flex: 1 1 320px; }

/* Texto tenue (guion de "sin dominios", etiqueta "Gratis" del auto-renew) */
.ui2 .websites-table .text-faint,
.ui2 .domains-table .text-faint { color: var(--pmx-ink-faint); }

/* Columna URL: el dominio del sitio/dominio como enlace fuerte */
.ui2 .websites-table .col-url,
.ui2 .domains-table .col-url { white-space: nowrap; }
.ui2 .websites-table .col-url a,
.ui2 .domains-table .col-url a { color: var(--pmx-ink); font-weight: 600; }
.ui2 .websites-table .col-url a:hover,
.ui2 .domains-table .col-url a:hover { color: var(--pmx-brand); }

/* Columna plan: nombre del plan + linea tenue con la fecha de expiracion.
 * Si ya expiro, la fecha se tine de rojo suave para llamar a renovar. */
.ui2 .websites-table .col-plan .plan-name { display: block; color: var(--pmx-ink); }
.ui2 .websites-table .col-plan .plan-expire {
    display: block;
    margin-top: .15rem;
    font-size: .8rem;
    color: var(--pmx-ink-faint);
}
.ui2 .websites-table .col-plan .plan-expire--expired { color: #b23b39; }

/* Columna de auto-renovacion (switch de MDB en la lista de transferidos):
 * lo dejamos con el color de marca en vez del azul default. */
.ui2 .websites-table .switch { margin: 0; }
.ui2 .websites-table .switch label input[type=checkbox]:checked + .lever {
    background-color: rgba(43, 187, 173, .5);
}
.ui2 .websites-table .switch label input[type=checkbox]:checked + .lever:after {
    background-color: var(--pmx-brand);
}

/* "Contactar soporte" para un sitio/dominio inhabilitado: ghost con tinte de
 * alerta, reusa el patron de .btn-cancel (accion sensible, no comercial). */
.ui2 .websites-table .col-actions .btn-support,
.ui2 .domains-table .col-actions .btn-support {
    color: #9a6a00 !important;   /* vence .btn{color:#fff!important} de MDB */
    background: rgba(240, 173, 78, .14);
    box-shadow: none;
    border: 1px solid rgba(240, 173, 78, .35);
    font-weight: 600;
}
.ui2 .websites-table .col-actions .btn-support:hover,
.ui2 .websites-table .col-actions .btn-support:focus,
.ui2 .domains-table .col-actions .btn-support:hover,
.ui2 .domains-table .col-actions .btn-support:focus {
    background: rgba(240, 173, 78, .24);
    color: #7d5600 !important;
}

/* ---- Listado de dominios (domains.php) ------------------------------- */
/* Etiquetas junto al nombre del dominio: "Externo" y "En venta". Chips suaves,
 * no badges chillones; van en su propia linea bajo el enlace. */
.ui2 .domains-table .col-tag {
    display: inline-block;
    margin-top: .3rem;
    margin-right: .35rem;
    padding: .1rem .5rem;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--pmx-ink-soft);
    background: #eef1f6;
    border-radius: 999px;
    white-space: nowrap;
}
.ui2 .domains-table .col-tag i { margin-right: .2rem; }
.ui2 .domains-table .col-tag--sale { color: #2f6f8f; background: rgba(49, 112, 143, .12); }

/* Columna de expiracion: cuenta regresiva (primario, coloreado) + fecha exacta
   (secundario tenue) + auto-renov. "Faltan X" pesa mas que la fecha a proposito. */
.ui2 .domains-table .col-expire { white-space: nowrap; }
/* Cuenta regresiva: 3 niveles -> rojo < 1 mes, ambar 1-2 meses, verde > 2 meses
   (misma paleta que los pills de estado, para coherencia). Texto + color, nunca
   color solo (accesibilidad). */
.ui2 .domains-table .countdown {
    display: block;
    font-weight: 600;
    font-size: .9rem;
    white-space: normal;
    max-width: 260px;
}
.ui2 .domains-table .countdown--danger  { color: #b23b39; }
.ui2 .domains-table .countdown--warning { color: #9a6a00; }
.ui2 .domains-table .countdown--ok      { color: #1b7a68; }
/* Fecha exacta: linea bajo el conteo, en tinta principal (dato de referencia
   real, no ruido). La jerarquia la da el conteo por color + negrita, NO por
   apagar la fecha. */
.ui2 .domains-table .expire-date {
    display: block;
    margin-top: .15rem;
    font-size: .85rem;
    color: var(--pmx-ink);
}
.ui2 .domains-table .expire-note {
    display: block;
    margin-top: .2rem;
    font-size: .78rem;
    color: var(--pmx-ink-faint);
    white-space: normal;
    max-width: 260px;
}
/* Auto-renovacion (solo lectura): verde suave si esta activa, ambar tenue si no
 * (el default del sistema es OFF, mucha gente no lo sabe -> nudge sin alarmar). */
.ui2 .domains-table .autorenew i { margin-right: .25rem; }
.ui2 .domains-table .autorenew--on  { color: #1b7a68; }
.ui2 .domains-table .autorenew--off { color: #a98436; }
/* Es un enlace a "servicios" (donde se activa/administra la auto-renovacion):
   subraya al hover para que se lea clickeable, sin perder su color de estado. */
.ui2 .domains-table a.autorenew { text-decoration: none; cursor: pointer; }
.ui2 .domains-table a.autorenew:hover,
.ui2 .domains-table a.autorenew:focus { text-decoration: underline; }

/* KPIs del listado: reusan .pmx-kpi pero son enlaces que aplican el filtro de
   estado de la tabla. Valor coloreado por acento; anillo cuando ese filtro esta
   activo, para que se vea cual esta seleccionado. */
.ui2 .domains-kpis .kpi-filter {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform .12s ease, box-shadow .12s ease;
}
.ui2 .domains-kpis .kpi-filter:hover { transform: translateY(-2px); box-shadow: 0 8px 22px -12px rgba(20, 30, 60, .4); }

/* Filtro activo: "glass tornasolado" -> marco iridiscente ANIMADO + interior de vidrio +
   halo de color, para que se vea cual esta seleccionado de forma vistosa. Reusa la paleta
   glass del design system (indigo/cyan/verde, misma que --pmx-glass) para no meter tonos
   ajenos. El marco de 2px se pinta con la tecnica de doble background: capa padding-box
   (interior casi blanco, legible) + capa border-box (gradiente que solo asoma en el borde);
   la animacion desplaza la capa del borde para el efecto tornasol. Ver docs/ui2-design-system.md. */
.ui2 .domains-kpis .kpi-filter.is-active {
    border: 2px solid transparent;
    background:
        linear-gradient(160deg, #ffffff, #f6f8ff 58%, #eefcff) padding-box,
        linear-gradient(115deg,
            rgba(124, 140, 248, .95), rgba(34, 201, 224, .95),
            rgba(56, 211, 155, .95),  rgba(124, 140, 248, .95)) border-box;
    background-size: 100% 100%, 300% 100%;
    animation: kpiIridescent 7s ease infinite;
    box-shadow:
        0 14px 34px -14px rgba(80, 120, 230, .5),
        0 4px 14px -6px rgba(34, 201, 224, .4);
}
.ui2 .domains-kpis .kpi-filter.is-active:hover {
    transform: translateY(-2px);
    box-shadow:
        0 18px 40px -14px rgba(80, 120, 230, .58),
        0 5px 16px -6px rgba(34, 201, 224, .5);
}
@keyframes kpiIridescent {
    0%   { background-position: 0% 50%, 0% 50%; }
    50%  { background-position: 0% 50%, 100% 50%; }
    100% { background-position: 0% 50%, 0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
    .ui2 .domains-kpis .kpi-filter.is-active { animation: none; }
}
.ui2 .domains-kpis .kpi-filter--ok      .pmx-kpi__value { color: #1b7a68; }
.ui2 .domains-kpis .kpi-filter--warning .pmx-kpi__value { color: #9a6a00; }
.ui2 .domains-kpis .kpi-filter--danger  .pmx-kpi__value { color: #b23b39; }

/* Estado vacio (sin dominios o sin coincidencias de busqueda): centrado, con
 * icono, mensaje y CTA. Reusable si otro listado lo necesita. */
.ui2 .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 2.75rem 1.5rem;
    text-align: center;
}
.ui2 .empty-state__icon { font-size: 2rem; color: var(--pmx-ink-faint); margin-bottom: .25rem; }
.ui2 .empty-state__title { margin: 0; font-weight: 600; color: var(--pmx-ink); }
.ui2 .empty-state__sub { margin: 0; color: var(--pmx-ink-soft); font-size: .92rem; max-width: 420px; }
.ui2 .empty-state .btn { margin-top: .6rem; }

/* ---- Listado de cuentas de correo (emails.php) ----------------------- */

/* Banner superior (aviso-webmail): responsivo y con el radio de la casa */
.ui2 .emails-banner { display: block; max-width: 100%; height: auto; border-radius: var(--pmx-radius); margin-bottom: 1.5rem; }

/* Celda de correo: nombre arriba, direccion (enlace) debajo */
.ui2 .emails-table .col-email { min-width: 220px; }
.ui2 .emails-table .col-email .email-name { color: var(--pmx-ink); font-weight: 600; }
/* .email-addr no va scoped a .col-email: tambien lo usa la columna destino
 * (.col-target) del listado de alias, que reusa esta misma tabla. */
.ui2 .emails-table .email-addr { display: inline-block; color: var(--pmx-ink-soft); }
.ui2 .emails-table .email-addr:hover { color: var(--pmx-brand); }
.ui2 .emails-table .col-email .email-unused { color: var(--pmx-ink-faint); font-style: italic; }
/* Columna destino del alias */
.ui2 .emails-table .col-target { color: var(--pmx-ink-soft); }
/* Indicador de respuesta automatica activa (icono ambar chico) */
.ui2 .emails-table .autores-flag { color: #9a6a00; margin-left: .35rem; }

/* Plan / producto de correo */
.ui2 .emails-table .col-plan { color: var(--pmx-ink-soft); white-space: nowrap; }

/* Expiracion */
.ui2 .emails-table .col-expire { white-space: nowrap; color: var(--pmx-ink-soft); }

/* Espacio en disco: la barra que inyecta /ajax/email_stats.php (<progress>) +
 * la linea "X MB de Y MB". Se estiliza el <progress> nativo como barra fina. */
.ui2 .emails-table .col-disk { min-width: 150px; color: var(--pmx-ink-soft); font-size: .85rem; }
.ui2 .emails-table .col-disk progress {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border: 0;
    border-radius: 999px;
    background: #eef1f6;
    overflow: hidden;
}
.ui2 .emails-table .col-disk progress::-webkit-progress-bar { background: #eef1f6; border-radius: 999px; }
.ui2 .emails-table .col-disk progress::-webkit-progress-value { background: var(--pmx-brand); border-radius: 999px; }
.ui2 .emails-table .col-disk progress::-moz-progress-bar { background: var(--pmx-brand); border-radius: 999px; }
.ui2 .emails-table .col-disk progress.progress-warning::-webkit-progress-value { background: #f0ad4e; }
.ui2 .emails-table .col-disk progress.progress-danger::-webkit-progress-value  { background: #d9534f; }
.ui2 .emails-table .col-disk .fa-spin { color: var(--pmx-ink-faint); }

/* Dropdown "Más": el toggle va como ghost; el menu con el look de la casa */
.ui2 .emails-table .btn-group { display: inline-block; }
.ui2 .emails-table .dropdown-menu {
    border: 1px solid var(--pmx-border);
    border-radius: 12px;
    box-shadow: var(--pmx-shadow);
    padding: .35rem;
}
.ui2 .emails-table .dropdown-menu .dropdown-item {
    border-radius: 8px;
    padding: .5rem .75rem;
    font-size: .88rem;
    color: var(--pmx-ink);
}
.ui2 .emails-table .dropdown-menu .dropdown-item:hover,
.ui2 .emails-table .dropdown-menu .dropdown-item:focus { background: #f2f5fa; color: var(--pmx-ink); }
.ui2 .emails-table .dropdown-menu .dropdown-item .fa { color: var(--pmx-ink-faint); margin-right: .5rem; }

/* ---- Modal ui2 (esqueleto nuevo #ui2-modal) -------------------------- *
 * Cascaron propio (html/ui2/modal.php) para NO tocar el #generic-modal
 * compartido. El JS de carga remota (project/modal.js) es generico a .modal,
 * asi que el contenido de los modales (html/email/*.php) se reusa TAL CUAL;
 * aqui solo se re-viste el shell. Todo scoped a `.ui2-modal`: no afecta a
 * ningun otro modal del sitio. */
.ui2-modal .modal-content {
    border: 1px solid var(--pmx-border);
    border-radius: var(--pmx-radius);
    box-shadow: 0 24px 64px -24px rgba(20, 30, 50, .45);
    overflow: hidden;
    font-family: var(--pmx-font);
    color: var(--pmx-ink);
}
.ui2-modal .modal-header {
    align-items: center;
    padding: 1.1rem 1.35rem;
    border-bottom: 1px solid var(--pmx-border);
    background: var(--pmx-surface);
}
.ui2-modal .modal-title {
    margin: 0;
    font-family: var(--pmx-font-head);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--pmx-ink);
    text-transform: uppercase;
    letter-spacing: .02em;
}
.ui2-modal .modal-header .close {
    padding: .25rem .5rem;
    margin: 0;
    color: var(--pmx-ink-faint);
    opacity: 1;
    text-shadow: none;
    font-weight: 400;
    transition: color .14s ease;
}
.ui2-modal .modal-header .close:hover,
.ui2-modal .modal-header .close:focus { color: var(--pmx-ink); opacity: 1; }
.ui2-modal .modal-body { padding: 1.35rem; }
/* Alerts dentro del modal -> look suave tipo u-notice (sin caja chillona) */
.ui2-modal .modal-body .alert {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    border-radius: 12px;
    border: 1px solid var(--pmx-border);
    box-shadow: none;
    font-size: .92rem;
    line-height: 1.5;
}
.ui2-modal .modal-body .alert-info    { background: rgba(49, 112, 143, .07); border-color: rgba(49, 112, 143, .18); color: var(--pmx-ink); }
.ui2-modal .modal-body .alert-info .fa    { color: #2f6f8f; }
.ui2-modal .modal-body .alert-danger  { background: rgba(217, 83, 79, .08); border-color: rgba(217, 83, 79, .28); color: #a5302e; }
.ui2-modal .modal-body .alert-danger .fa  { color: #b23b39; }
/* El label flotante de md-form y el select de MDB ya funcionan tal cual dentro
 * del modal; solo se compacta un poco el espaciado vertical. */
.ui2-modal .modal-body .md-form { margin-top: 1.1rem; margin-bottom: 1.4rem; }
/* Botones full-width: mata el margin:6px lateral de MDB que en btn-block
 * desborda el cuerpo del modal. El color lo dan las clases del sistema
 * (btn-default = teal, btn-danger = rojo destructivo). */
.ui2-modal .modal-body .btn-block { margin-left: 0; margin-right: 0; }
/* Spinner de carga inicial del esqueleto */
.ui2-modal .loading-generic { color: var(--pmx-brand); padding: 2.5rem 0; }

/* ---- Tooltip de ayuda (CSS puro, sin JS) ----------------------------- */
/* Reemplaza los tooltips de Bootstrap/MDB en los iconos "?". El plugin JS
 * (data-toggle="tooltip") inicializa pero no dispara el globo dentro de los
 * modales cargados por AJAX, asi que se ve como si estuviera roto. Esto no
 * depende de JS ni de Popper: se muestra con :hover / :focus.
 * Uso: <span class="help-tip" tabindex="0" data-tip="texto"><i class="fa fa-question-circle"></i></span> */
.ui2 .help-tip {
    position: relative;
    display: inline-flex;
    color: var(--pmx-ink-faint);
    cursor: help;
    outline: none;
}
.ui2 .help-tip:hover,
.ui2 .help-tip:focus { color: var(--pmx-brand); }
.ui2 .help-tip::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 220px;
    padding: .45rem .65rem;
    background: var(--pmx-ink);
    color: #fff;
    font-size: .78rem;
    line-height: 1.35;
    text-align: center;
    white-space: normal;
    border-radius: .35rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s ease;
    z-index: 1080;          /* por encima del modal (1050) */
    pointer-events: none;
}
.ui2 .help-tip:hover::after,
.ui2 .help-tip:focus::after {
    opacity: 1;
    visibility: visible;
}

/* ---- Tooltips dentro de tablas: fix de desfase al scrollear ----------
 * Popper (v1, en el bundle de MDB) calcula mal la posicion del tooltip cuando el
 * trigger vive dentro de un scroll-parent, y `.table-responsive` trae
 * `overflow-x:auto`. Al scrollear la pagina, el tooltip se va hacia abajo ~scrollY
 * (peor mientras mas bajas, hasta salirse). Ningun option de Bootstrap
 * (container/boundary) lo corrige; el detonante es el overflow del wrapper.
 * En DESKTOP estas tablas ya caben en el ancho, asi que le quitamos el overflow y
 * el tooltip se ancla bien. En MOVIL se conserva el scroll horizontal (ahi es
 * touch, no hay hover). Verificado en domains midiendo dy(icono, tooltip): 859 -> -44.
 * Acotado por .*-page a proposito (isma): en tablas mas anchas quitar el overflow
 * en un desktop angosto las recortaria (.data-card tiene overflow:hidden). Las de
 * 5 columnas (domains, clasicos, websites) caben desde 769px.
 * emails NO entra aqui: tiene 6 columnas y medido necesita ~1290-1330px, mas que
 * el contenedor tope (~1312px por el max-width:1360 de la pagina), asi que nunca
 * cabe sin recortar la columna de Acciones. Se queda con su scroll horizontal. */
@media (min-width: 769px) {
    .ui2 .domains-page .table-responsive,
    .ui2 .classic-websites-page .table-responsive,
    .ui2 .websites-page .table-responsive { overflow: visible; }
}

/* ==== Hosting: widget de upsell "Impulsa tu hosting" ==================
 * Reemplaza los banners de imagen (avisocpanel.jpeg + CPANEL_ADDONS_BANNER.png)
 * de hosting.php por un widget HTML: gradiente de marca (teal -> indigo de la
 * paleta glass), los 3 addons con su precio unitario, y un CTA que baja a las
 * cuentas (donde vive el boton "Mejorar" por cuenta). */
.ui2 .hosting-boost {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem 2rem;
    padding: 1.6rem 1.9rem;
    margin-bottom: 1.5rem;
    border-radius: var(--pmx-radius);
    color: #fff;
    background: linear-gradient(120deg, #2bbbad 0%, #23a79c 38%, #4b74d6 100%);
    box-shadow: 0 14px 34px -16px rgba(43, 116, 214, .55);
}
.ui2 .hosting-boost__main { flex: 1 1 340px; min-width: 0; }
.ui2 .hosting-boost__eyebrow {
    margin: 0 0 .35rem;
    font-family: var(--pmx-font-head);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .92;
}
.ui2 .hosting-boost__title {
    margin: 0 0 .3rem;
    font-family: var(--pmx-font-head);
    font-size: 1.35rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
}
.ui2 .hosting-boost__sub {
    margin: 0 0 1rem;
    font-size: .95rem;
    opacity: .9;
}
/* 4 addons en rejilla 2x2 (balanceada: no queda 3+1). Cada uno es una mini-tarjeta con
 * beneficio (copy de venta) + precio, no solo una etiqueta con el número. */
.ui2 .hosting-boost__addons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ui2 .hosting-boost__addons li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .7rem .85rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, .14);
}
.ui2 .hosting-boost__addons li > i {
    font-size: 1.1rem;
    opacity: .95;
    margin-top: .1rem;
    flex: 0 0 1.2rem;
    text-align: center;
}
.ui2 .hosting-boost__addon-body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.ui2 .hosting-boost__addon-name { font-weight: 700; font-size: .92rem; }
.ui2 .hosting-boost__addon-benefit { font-size: .8rem; opacity: .88; line-height: 1.3; }
.ui2 .hosting-boost__addon-price { font-weight: 700; font-size: .82rem; opacity: .96; margin-top: .15rem; }
@media (max-width: 560px) {
    .ui2 .hosting-boost__addons { grid-template-columns: 1fr; }
}
.ui2 .hosting-boost__cta { flex: 0 0 auto; }

/* CTA del widget: solido blanco sobre el gradiente (contraste alto), con lift.
 * Vence el `.btn { color:#fff !important }` de MDB para que el texto se vea. */
.ui2 .btn-boost {
    background: #fff !important;
    color: #1f7a72 !important;
    font-weight: 700;
    box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .4);
    transition: transform .15s ease, box-shadow .15s ease;
}
.ui2 .btn-boost:hover,
.ui2 .btn-boost:focus {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -8px rgba(0, 0, 0, .45);
    color: #175d57 !important;
}

/* "Ahh, es aquí": al picar el CTA del widget, los botones "Mejorar" de cada cuenta parpadean con un
 * halo de marca para guiar la mirada. La clase .pmx-glow la agrega/quita el JS de hosting.php. */
@keyframes pmx-glow-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(43, 187, 173, .55); }
    70%  { box-shadow: 0 0 0 12px rgba(43, 187, 173, 0); }
    100% { box-shadow: 0 0 0 0 rgba(43, 187, 173, 0); }
}
.ui2 .js-upgrade-btn.pmx-glow {
    animation: pmx-glow-pulse 1.1s ease-out 3;
    border-color: var(--pmx-brand) !important;
    /* Nota: NO tocar `color` aquí — cambiaba el texto a teal y se perdía contra el fondo del botón. */
}

/* ====================================================================== */
/* Listado de cupones y promociones (promos.php)                          */
/* Concepto "muro de ofertas": cada cupon es un TICKET (muesca + perfora-  */
/* cion en CSS) y el destacado usa el "glass tornasol" animado de la casa. */
/* Datos derivados en PHP de la tabla coupons (discount_type/discount_data */
/* -> badge; date_stop -> urgencia; used/limit -> prueba social/escasez).  */
/* ====================================================================== */

/* KPI con valor en teal de marca (mejor beneficio) */
.ui2 .promos-page .pmx-kpi__value--brand { color: var(--pmx-brand); }

/* ---- Cuenta regresiva (3 niveles, misma paleta que domains) ---------- */
.ui2 .promos-page .countdown {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-weight: 600;
    font-size: .88rem;
}
.ui2 .promos-page .countdown--danger  { color: #b23b39; }
.ui2 .promos-page .countdown--warning { color: #9a6a00; }
.ui2 .promos-page .countdown--ok       { color: #1b7a68; }
.ui2 .promos-page .countdown__date { color: var(--pmx-ink-faint); font-weight: 400; font-size: .82rem; }

/* Prueba social (N clientes ya lo usaron) */
.ui2 .promos-page .promo-social {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .84rem;
    color: var(--pmx-ink-soft);
}
.ui2 .promos-page .promo-social i { color: var(--pmx-ink-faint); }

/* ---- CTA "Aplicar cupon": teal (accion comercial). Vence el margin de MDB. */
.ui2 .promos-page .promo-apply { margin: 0; }
.ui2 .promos-page .promo-apply .fa { margin-right: .3rem; }

/* ---- Destacado: borde "glass tornasol" animado (reusa kpiIridescent) --- */
.ui2 .promos-page .promo-featured {
    position: relative;
    border-radius: 20px;
    padding: 2px;
    margin-bottom: 1.75rem;
    overflow: hidden;
    border: 2px solid transparent;
    background:
        linear-gradient(160deg, var(--pmx-surface), #f7f9fc) padding-box,
        linear-gradient(115deg,
            rgba(124, 140, 248, .95), rgba(34, 201, 224, .95),
            rgba(56, 211, 155, .95),  rgba(124, 140, 248, .95)) border-box;
    background-size: 100% 100%, 300% 100%;
    animation: kpiIridescent 7s ease infinite;
    box-shadow: 0 22px 50px -22px rgba(80, 120, 230, .5), 0 6px 20px -8px rgba(34, 201, 224, .4);
}
@media (prefers-reduced-motion: reduce) {
    .ui2 .promos-page .promo-featured { animation: none; }
}
.ui2 .promos-page .promo-featured__inner {
    border-radius: 18px;
    background: var(--pmx-surface);
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    overflow: hidden;
}
.ui2 .promos-page .promo-featured__main {
    padding: 1.9rem 2rem;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    align-items: flex-start;
}
.ui2 .promos-page .promo-featured__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--pmx-font-head);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pmx-brand);
    background: #f7f9fc;
    border: 1px solid var(--pmx-border);
    padding: .35rem .75rem;
    border-radius: 999px;
}
.ui2 .promos-page .promo-featured__title {
    margin: 0;
    font-size: 1.65rem;
    line-height: 1.15;
    color: var(--pmx-ink);
}
.ui2 .promos-page .promo-featured__desc { margin: 0; color: var(--pmx-ink-soft); font-size: .95rem; line-height: 1.55; }
.ui2 .promos-page .promo-featured__desc p { margin: 0; }
.ui2 .promos-page .promo-featured__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.15rem;
    margin: .2rem 0 .4rem;
}
.ui2 .promos-page .promo-featured__side {
    background:
        radial-gradient(120% 120% at 100% 0%, rgba(34, 201, 224, .14), transparent 55%),
        radial-gradient(120% 120% at 0% 100%, rgba(56, 211, 155, .14), transparent 55%),
        #f7f9fc;
    border-left: 1px dashed var(--pmx-border);
    padding: 1.9rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
}
.ui2 .promos-page .promo-featured__disc {
    font-family: var(--pmx-font-head);
    font-weight: 800;
    font-size: 2.4rem;
    line-height: 1;
    color: var(--pmx-ink);
}
.ui2 .promos-page .promo-featured__disc span {
    display: block;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pmx-brand);
    margin-top: .4rem;
}
.ui2 .promos-page .promo-featured__code {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: var(--pmx-surface);
    border: 1px dashed var(--pmx-brand);
    border-radius: 12px;
    padding: .6rem .85rem;
}

/* ---- Chips de filtro por categoria ----------------------------------- */
.ui2 .promos-page .promo-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-bottom: 1.35rem;
}
.ui2 .promos-page .promo-chip {
    border: 1px solid var(--pmx-border);
    background: var(--pmx-surface);
    color: var(--pmx-ink-soft);
    border-radius: 999px;
    padding: .5rem 1rem;
    font-family: var(--pmx-font);
    font-weight: 600;
    font-size: .84rem;
    cursor: pointer;
    transition: all .16s ease;
}
.ui2 .promos-page .promo-chip:hover { border-color: var(--pmx-brand); color: var(--pmx-ink); }
.ui2 .promos-page .promo-chip.is-active { background: var(--pmx-ink); color: #fff; border-color: var(--pmx-ink); }
.ui2 .promos-page .promo-chip .n { font-size: .74rem; opacity: .7; margin-left: .25rem; }

/* ---- Grid de tickets ------------------------------------------------- */
.ui2 .promos-page .promo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
}

/* ---- Ticket: muesca lateral + perforacion punteada ------------------- */
.ui2 .promos-page .ticket {
    position: relative;
    background: var(--pmx-surface);
    border: 1px solid var(--pmx-border);
    border-radius: var(--pmx-radius);
    box-shadow: var(--pmx-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .22s ease, box-shadow .22s ease;
}
.ui2 .promos-page .ticket:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 10px rgba(20, 30, 60, .08), 0 28px 50px -26px rgba(30, 45, 90, .45);
}
.ui2 .promos-page .ticket__body { padding: 1.25rem 1.25rem .9rem; display: flex; flex-direction: column; gap: .75rem; flex: 1; }

/* Badge de descuento (esquina) */
.ui2 .promos-page .disc {
    align-self: flex-start;
    font-family: var(--pmx-font-head);
    font-weight: 800;
    font-size: 1.2rem;
    line-height: 1;
    color: #fff;
    padding: .55rem .8rem;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--pmx-brand), #1f9e92);
    box-shadow: 0 8px 18px -8px rgba(31, 158, 146, .75);
}
.ui2 .promos-page .disc--free {
    background: linear-gradient(135deg, #f0663b, #d8461f);
    box-shadow: 0 8px 18px -8px rgba(216, 70, 31, .7);
}
.ui2 .promos-page .disc small {
    display: block;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .9;
    margin-top: .2rem;
}

.ui2 .promos-page .ticket__cat {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pmx-ink-faint);
}
.ui2 .promos-page .ticket__title { margin: 0; font-size: 1.05rem; line-height: 1.3; color: var(--pmx-ink); }
.ui2 .promos-page .ticket__desc { margin: 0; color: var(--pmx-ink-soft); font-size: .88rem; line-height: 1.5; }
.ui2 .promos-page .ticket__desc p { margin: 0; }
.ui2 .promos-page .ticket__meta { display: flex; flex-direction: column; gap: .55rem; margin-top: auto; padding-top: .35rem; }

/* Escasez (barra de canjeados, cuando hay limit) */
.ui2 .promos-page .scarce { font-size: .8rem; color: var(--pmx-ink-soft); }
.ui2 .promos-page .scarce__bar { height: 6px; border-radius: 99px; background: var(--pmx-border); margin-top: .35rem; overflow: hidden; }
.ui2 .promos-page .scarce__fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--pmx-brand), #22c9e0); }

/* Stub del ticket: la perforacion + codigo */
.ui2 .promos-page .ticket__stub {
    position: relative;
    border-top: 2px dashed var(--pmx-border);
    background: #f7f9fc;
    padding: .8rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
}
.ui2 .promos-page .ticket__stub::before,
.ui2 .promos-page .ticket__stub::after {
    content: "";
    position: absolute;
    top: -11px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--pmx-bg);
    border: 1px solid var(--pmx-border);
}
.ui2 .promos-page .ticket__stub::before { left: -12px; }
.ui2 .promos-page .ticket__stub::after  { right: -12px; }

/* Codigo del cupon + boton copiar (reusado por el destacado y los tickets) */
.ui2 .promos-page .promo-code { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.ui2 .promos-page .promo-code__label { font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pmx-ink-faint); }
.ui2 .promos-page .promo-code__value {
    font-family: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .03em;
    color: var(--pmx-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ui2 .promos-page .promo-featured__code .promo-code__value { flex: 1; }
.ui2 .promos-page .promo-copy {
    flex: none;
    width: 34px;
    height: 34px;
    border: 1px solid var(--pmx-border);
    background: var(--pmx-surface);
    color: var(--pmx-ink-soft);
    border-radius: 9px;
    cursor: pointer;
    transition: all .16s ease;
}
.ui2 .promos-page .promo-copy:hover { color: var(--pmx-brand); border-color: var(--pmx-brand); }
.ui2 .promos-page .promo-copy.is-done { background: #1b7a68; border-color: #1b7a68; color: #fff; }

/* CTA anclado al pie del ticket, a ancho completo */
.ui2 .promos-page .ticket__cta { padding: 0 1.25rem 1.15rem; }
.ui2 .promos-page .ticket__cta .promo-apply { width: 100%; }

/* Toast de "copiado" */
.ui2 .promos-page .toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%) translateY(20px);
    background: var(--pmx-ink);
    color: #fff;
    padding: .7rem 1.25rem;
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(20, 30, 60, .08), 0 28px 50px -26px rgba(30, 45, 90, .45);
    opacity: 0;
    pointer-events: none;
    transition: all .24s ease;
    z-index: 1080;
}
.ui2 .promos-page .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- Responsive ------------------------------------------------------ */
@media (max-width: 768px) {
    .ui2 .page-wrap { padding: 1.25rem 1rem 3rem; }
    .ui2 .page-head { align-items: stretch; }
    .ui2 .page-head__actions .btn { width: 100%; }
    .ui2 .filter-actions { width: 100%; }
    .ui2 .filter-actions .btn:first-child { flex: 1 1 auto; }
    .ui2 .hosting-boost__cta { flex: 1 1 100%; }
    .ui2 .hosting-boost__cta .btn { width: 100%; }
    .ui2 .promos-page .promo-featured__inner { grid-template-columns: 1fr; }
    .ui2 .promos-page .promo-featured__side { border-left: none; border-top: 1px dashed var(--pmx-border); }
}