@charset "UTF-8";
/* =====================================================================
   hex-renamed  ·  orderform-custom.css
   ---------------------------------------------------------------------
   Capa de estilos del CARRITO (order form). Base: Standard Cart.

   POR QUE ESTE ARCHIVO EXISTE Y NO ESTA TODO EN custom.css
   -------------------------------------------------------------------
   En las paginas de cart.php el orden real de carga es:

     1. templates/hex-renamed/css/all.min.css        (head.tpl)
     2. templates/hex-renamed/css/theme.min.css      (head.tpl)
     3. templates/hex-renamed/css/custom.css         (head.tpl)   <- tema
     4. templates/orderforms/hex-renamed/css/all.min.css (common.tpl)
     5. ESTE ARCHIVO                                  (common.tpl)

   El paso 4 reinyecta ~275 reglas con el selector #order-standard_cart,
   que pisarian cualquier estilo de carrito escrito en el paso 3. Por eso
   la capa de carrito se carga al final, en este archivo.

   Se conserva el id #order-standard_cart en el markup a proposito: es el
   gancho que usan all.min.css y scripts.min.js del carrito base. Cambiarlo
   romperia el JS del proceso de pedido.

   Las variables (--bg, --accent, ...) se heredan de custom.css del tema.
   Se repiten aqui como respaldo por si el carrito se usara con otro tema.

   INDICE
     01. Respaldo de tokens
     02. Contenedor y layout del carrito
     03. Cabeceras y sub-headings
     04. Tabs de subcategorias        (RF-05.3, RF-05.4)
     05. Grid y cards de producto     (RF-05.5 - RF-05.13)
     06. Orderform: layout 70/30      (RF-06.1)
     07. Card resumen del producto    (RF-06.2)
     08. Cards seleccionables         (RF-06.3 - RF-06.9)
     09. Sidebar "Sumario de Pedido"  (RF-06.10 - RF-06.13)
     10. Addons, dominios y checkout
     11. Accesibilidad y responsive   (RF-06.14, RF-08)
   ===================================================================== */


/* =====================================================================
   01. RESPALDO DE TOKENS
   Si el theme hex-renamed esta activo estas variables ya existen; el
   bloque solo actua como valor por defecto.
   ===================================================================== */

/* IMPORTANTE: estos valores deben ir sincronizados con la seccion 01 de
   templates/hex-renamed/css/custom.css. Si cambias la paleta alli, copia
   los mismos valores aqui: como el bloque se aplica sobre
   #order-standard_cart, gana a las variables heredadas de :root y el
   carrito se quedaria con la paleta antigua. */
#order-standard_cart {
    --bg:                 #07070a;
    --bg-deep:            #000000;
    --bg-elevated:        #0e0e13;
    --bg-card:            #12121a;
    --bg-card-hover:      #181822;

    --text:               #ffffff;
    --text-secondary:     #cbd5e1;
    --text-tertiary:      #94a3b8;
    --text-muted:         #7c8aa0;
    --text-disabled:      #64748b;

    --accent:             #5b8def;
    --accent-soft:        #7ca4f2;
    --accent-strong:      #486fbd;
    --accent-hover:       #4b73c2;
    --accent-active:      #3c5c9e;
    --accent-tint:        rgba(91, 141, 239, 0.12);
    --accent-tint-strong: rgba(91, 141, 239, 0.22);
    --accent-border:      rgba(91, 141, 239, 0.35);
    --accent-2:           #7a6ff0;

    --success:            #34d399;
    --warning:            #fbbf24;
    --danger:             #f87171;
    --info:               #7ca4f2;

    --glass-bg:           rgba(255, 255, 255, 0.035);
    --glass-bg-strong:    rgba(255, 255, 255, 0.06);
    --glass-blur:         blur(16px);
    --glass-border:       1px solid rgba(255, 255, 255, 0.08);
    --glass-shadow:       0 1px 0 0 rgba(255, 255, 255, 0.04) inset,
                          0 18px 50px -28px rgba(0, 0, 0, 0.9);

    --hairline:           rgba(255, 255, 255, 0.08);
    --hairline-soft:      rgba(255, 255, 255, 0.05);
    --hairline-strong:    rgba(255, 255, 255, 0.14);

    --focus:              #bfd3ff;
    --focus-width:        3px;
    --focus-offset:       2px;

    --radius-sm:          8px;
    --radius:             12px;
    --radius-lg:          16px;
    --radius-pill:        999px;

    --tap-target:         44px;

    --t-fast:             120ms ease;
    --t:                  180ms ease;
}


/* =====================================================================
   02. CONTENEDOR Y LAYOUT DEL CARRITO
   ===================================================================== */

#order-standard_cart {
    color: var(--text-secondary);
    font-size: 0.9375rem;
}

#order-standard_cart a { color: var(--accent-soft); }
#order-standard_cart a:hover { color: var(--text); }

#order-standard_cart h1,
#order-standard_cart h2,
#order-standard_cart h3,
#order-standard_cart h4 { color: var(--text); }

#order-standard_cart p { color: var(--text-secondary); }

#order-standard_cart hr { border-top-color: var(--hairline); }

#order-standard_cart label,
#order-standard_cart .control-label {
    color: var(--text);
    font-weight: 600;
}

/* Controles de formulario dentro del carrito */
#order-standard_cart .form-control,
#order-standard_cart .custom-select,
#order-standard_cart select {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius);
    box-shadow: none;
    color: var(--text);
    min-height: var(--tap-target);
}

#order-standard_cart .form-control:focus,
#order-standard_cart .custom-select:focus {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: var(--accent);
    box-shadow: none;
    color: var(--text);
}

#order-standard_cart .form-control::placeholder { color: var(--text-tertiary); }

#order-standard_cart select option { background-color: var(--bg-elevated); color: var(--text); }

/* Sidebar de categorias (columna izquierda, paginas que la conservan) */
#order-standard_cart .cart-sidebar .panel,
#order-standard_cart .cart-sidebar .card,
#order-standard_cart .card-sidebar {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--glass-shadow);
}

#order-standard_cart .cart-sidebar .panel-heading,
#order-standard_cart .cart-sidebar .card-header {
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid var(--hairline);
    color: var(--text);
}

#order-standard_cart .cart-sidebar h3,
#order-standard_cart .cart-sidebar .panel-title { color: var(--text); }

/* Los items son pastillas, igual que en la barra lateral del area de
   clientes (custom.css § 08). Mismo componente, mismo aspecto en las dos
   mitades del sitio.

   Sin bordes: `style.css` del carrito ya quita los de arriba, izquierda y
   derecha y deja solo el de abajo, que era el separador. Al no haber
   borde en ninguno de los cuatro lados no queda ninguna linea que se
   pueda colar con el color del tema claro, que es lo que pasaba en el
   filtro de estado del area de clientes. */
#order-standard_cart .cart-sidebar .list-group {
    padding: 0.375rem;
}

#order-standard_cart .cart-sidebar .list-group-item {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    display: flex;
    margin-bottom: 2px;
    min-height: var(--tap-target);
    /* Recorta la barra de acento contra la esquina redondeada. */
    overflow: hidden;
    padding: 0.5rem 0.75rem;
    position: relative;
    transition: background-color var(--t-fast), color var(--t-fast);
}

#order-standard_cart .cart-sidebar .list-group-item:last-child { margin-bottom: 0; }

#order-standard_cart .cart-sidebar .list-group-item:hover,
#order-standard_cart .cart-sidebar .list-group-item:focus {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
    text-decoration: none;
}

#order-standard_cart .cart-sidebar .list-group-item.active,
#order-standard_cart .cart-sidebar .list-group-item.active:hover,
#order-standard_cart .cart-sidebar .list-group-item.active:focus {
    background: var(--accent-tint);
    border-color: transparent;
    color: var(--text);
    font-weight: 600;
}

/* Barra de acento en `::before` y no en `border-left`: asi no ocupa sitio
   en la caja y las etiquetas de todos los items quedan alineadas sin
   reservar 3px transparentes en los que no estan activos. */
#order-standard_cart .cart-sidebar .list-group-item.active::before {
    background: var(--accent);
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    top: 0;
    width: 3px;
}

/* La insignia al extremo derecho, y en el tinte de acento cuando el item
   esta seleccionado. */
#order-standard_cart .cart-sidebar .list-group-item .badge {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    margin-left: auto;
}

#order-standard_cart .cart-sidebar .list-group-item.active .badge {
    background: var(--accent-tint-strong);
    color: var(--accent-soft);
}

#order-standard_cart .cart-sidebar .list-group-item > i {
    color: var(--text-muted);
    flex: 0 0 auto;
    text-align: center;
    width: 1.25rem;
}

#order-standard_cart .cart-sidebar .list-group-item:hover > i,
#order-standard_cart .cart-sidebar .list-group-item.active > i { color: var(--accent-soft); }


/* ---------------------------------------------------------------------
   02.b Barra colapsada: categorias + selector de divisa
   ---------------------------------------------------------------------
   sidebar-categories-collapsed.tpl envuelve el selector de divisa en
   <div class="pull-right float-right"> sin ningun clear. Al ser un
   float suelto se escapaba del bloque y aparecia flotando a la derecha,
   encima del Sumario de Pedido.

   Aqui se neutraliza el float y se convierte el bloque en una fila
   flex: categorias a la izquierda, divisa a la derecha, y en movil una
   debajo de otra. Asi deja de depender del comportamiento del float.
   --------------------------------------------------------------------- */

#order-standard_cart .sidebar-collapsed {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

/* En >=1200px la barra lateral (.cart-sidebar) ya esta visible, asi que
   esta copia colapsada sobra: duplicaba "Categorias" y "Acciones" en
   mitad de la columna central.

   style.css del carrito base ya la ocultaba en una media query, pero
   este archivo se carga despues y la regla de arriba (sin media query)
   la resucitaba. Se vuelve a ocultar aqui de forma explicita. */
@media (min-width: 1200px) {
    #order-standard_cart .sidebar-collapsed { display: none; }
}

#order-standard_cart .sidebar-collapsed::after {
    clear: both;
    content: "";
    display: table;
}

#order-standard_cart .sidebar-collapsed > .panel,
#order-standard_cart .sidebar-collapsed > .card {
    background: transparent;
    border: none;
    box-shadow: none;
    flex: 1 1 260px;
    margin: 0;
    min-width: 0;
}

/* El contenedor del selector de divisa: se anula el float. */
#order-standard_cart .sidebar-collapsed .pull-right,
#order-standard_cart .sidebar-collapsed .float-right {
    flex: 0 0 auto;
    float: none !important;
    margin-left: auto;
}

#order-standard_cart .sidebar-collapsed form { margin: 0; }

#order-standard_cart .sidebar-collapsed select,
#order-standard_cart .sidebar-collapsed .form-control {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius);
    color: var(--text);
    min-height: var(--tap-target);
    min-width: 110px;
    width: auto;
}

@media (max-width: 575.98px) {
    #order-standard_cart .sidebar-collapsed > .panel,
    #order-standard_cart .sidebar-collapsed > .card,
    #order-standard_cart .sidebar-collapsed .pull-right,
    #order-standard_cart .sidebar-collapsed .float-right {
        flex: 1 1 100%;
        margin-left: 0;
    }
    #order-standard_cart .sidebar-collapsed select { width: 100%; }
}


/* =====================================================================
   03. CABECERAS Y SUB-HEADINGS
   ===================================================================== */

#order-standard_cart .header-lined {
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 1.75rem;
    padding-bottom: 1rem;
}

/* .font-size-36 del tema base fija 36px a pelo; se sustituye por una
   escala fluida en la tipografia de titulares. */
#order-standard_cart .header-lined h1,
#order-standard_cart .header-lined h1.font-size-36 {
    color: var(--text);
    font-family: var(--font-display);
    font-size: clamp(1.625rem, 1.1rem + 1.8vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.15;
    margin: 0;
}

/* Titulo grande a dos lineas (RF-05.2) */
#order-standard_cart .hex-page-title {
    font-size: clamp(1.875rem, 1.2rem + 2.6vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.12;
    margin: 0;
}

#order-standard_cart .hex-page-title__line { display: block; }
#order-standard_cart .hex-page-title__accent { color: var(--accent-soft); }

#order-standard_cart .hex-page-subtitle {
    color: var(--text-tertiary);
    font-size: 1rem;
    margin: 0.75rem 0 0;
    max-width: 60ch;
}

/* ---------------------------------------------------------------------
   Sub-headings ("ELEGIR CUENTA", "DETALLES DE PAGO"...)
   ---------------------------------------------------------------------
   El carrito base los dibuja con un truco: el contenedor es un elemento
   de altura CERO con border-top (la linea), y el <span> lleva
   position:relative + top:-11px y fondo BLANCO para tapar el trozo de
   linea que queda detras del texto.

   Al pasar el fondo del span a transparente, esa linea dejaba de estar
   tapada y cruzaba el texto de lado a lado: se veia tachado.

   La solucion no es devolver un fondo solido -- volveria a recortar la
   linea -- sino desmontar el truco entero: anular las tres piezas
   (height:0, border-top y el desplazamiento del span) y quedarse con un
   titulo normal y una linea debajo.
   --------------------------------------------------------------------- */
#order-standard_cart .sub-heading,
#order-standard_cart .sub-heading-borderless {
    border-bottom: 1px solid var(--hairline);
    border-top: none;              /* la linea que cruzaba el texto */
    height: auto;                  /* el contenedor media 0 */
    margin: 2rem 0 1.25rem;
    text-align: left;
}

#order-standard_cart .sub-heading-borderless { border-bottom: none; }

#order-standard_cart .sub-heading span,
#order-standard_cart .sub-heading-borderless span {
    background: transparent !important;
    color: var(--text);
    display: block;                /* ocupaba solo el ancho del texto */
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 0 0 0.625rem;         /* sin los 17px laterales del truco */
    position: static;              /* anula el position:relative */
    text-transform: uppercase;
    top: auto;                     /* anula el top:-11px */
}

#order-standard_cart .sub-heading span i,
#order-standard_cart .sub-heading span small {
    font-family: var(--font-ui);
    letter-spacing: 0;
    text-transform: none;
}

#order-standard_cart .sub-heading span small {
    color: var(--text-muted);
    display: block;
    font-weight: 400;
    margin-top: 0.25rem;
}


/* =====================================================================
   04. TABS DE SUBCATEGORIAS                      (RF-05.3, RF-05.4)
   ---------------------------------------------------------------------
   Markup en includes/category-tabs.tpl. Cada tab es un enlace real, con
   icono + texto, area tactil de 44px y scroll horizontal en movil.
   ===================================================================== */

#order-standard_cart .hex-cat-tabs {
    border-bottom: 1px solid var(--hairline);
    display: flex;
    gap: 0.25rem;
    margin: 0 0 1.75rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

#order-standard_cart .hex-cat-tabs::-webkit-scrollbar { display: none; }

#order-standard_cart .hex-cat-tab {
    align-items: center;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-tertiary);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.875rem;
    font-weight: 600;
    gap: 0.5rem;
    letter-spacing: 0.01em;
    min-height: var(--tap-target);           /* RF-03.4 */
    padding: 0.625rem 1rem;
    text-decoration: none;
    transition: color var(--t-fast), border-color var(--t-fast);
    white-space: nowrap;
}

#order-standard_cart .hex-cat-tab:hover,
#order-standard_cart .hex-cat-tab:focus {
    border-bottom-color: var(--hairline-strong);
    color: var(--text);
    text-decoration: none;
}

/* RF-05.4: tab activo con subrayado de color de acento */
#order-standard_cart .hex-cat-tab.is-active,
#order-standard_cart .hex-cat-tab[aria-current="page"] {
    border-bottom-color: var(--accent);
    color: var(--text);
}

#order-standard_cart .hex-cat-tab__icon {
    font-size: 1rem;
    line-height: 1;
    opacity: 0.9;
}

#order-standard_cart .hex-cat-tab.is-active .hex-cat-tab__icon { color: var(--accent-soft); }

#order-standard_cart .hex-cat-tab__count {
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-pill);
    color: var(--text-secondary);
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.1em 0.45em;
}


/* =====================================================================
   05. GRID Y CARDS DE PRODUCTO                   (RF-05.5 - RF-05.13)
   ===================================================================== */

/* RF-05.5: 3 columnas desktop / 2 tablet / 1 movil */
#order-standard_cart .hex-product-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
}

@media (min-width: 576px)  { #order-standard_cart .hex-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { #order-standard_cart .hex-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

#order-standard_cart .hex-product-card {
    background: var(--bg-card);              /* RF-05.6 gris oscuro */
    border: 1px solid transparent;           /* RF-05.6 sin bordes marcados */
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow: hidden;
    padding: 1.375rem 1.375rem 1.25rem;
    position: relative;
    transition: background-color var(--t), border-color var(--t), transform var(--t);
}

#order-standard_cart .hex-product-card:hover {
    background: var(--bg-card-hover);
    border-color: var(--hairline-strong);
    transform: translateY(-2px);
}

/* RF-05.7: nombre del plan en bold, blanco */
#order-standard_cart .hex-product-card__name {
    color: var(--text);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin: 0;
}

/* RF-05.8: linea de disponibilidad en gris */
#order-standard_cart .hex-product-card__stock {
    align-items: center;
    color: var(--text-tertiary);
    display: flex;
    font-size: 0.8125rem;
    gap: 0.375rem;
    margin-top: 0.375rem;
}

/* RF-05.12: agotado. Es un chip en el flujo normal, no un badge flotante:
   asi no puede solaparse con el titulo cuando el nombre ocupa dos lineas. */
#order-standard_cart .hex-product-card__stock--out {
    /* align-self hace falta porque la card es un flex column: sin el, el
       chip se estiraria a todo el ancho aunque lleve width:auto. */
    align-self: flex-start;
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: var(--radius-pill);
    color: var(--warning);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 0.3em 0.75em;
    width: auto;
}

/* RF-05.9: categoria en gris mas pequeño */
#order-standard_cart .hex-product-card__category {
    color: var(--text-tertiary);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    margin-top: 0.5rem;
    text-transform: uppercase;
}

#order-standard_cart .hex-product-card__desc {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin: 0.75rem 0 0;
}

#order-standard_cart .hex-product-card__features {
    list-style: none;
    margin: 0.875rem 0 0;
    padding: 0;
}

#order-standard_cart .hex-product-card__features li {
    align-items: baseline;
    color: var(--text-secondary);
    display: flex;
    font-size: 0.8125rem;
    gap: 0.5rem;
    padding: 0.1875rem 0;
}

/* El tick de cada caracteristica, por mascara SVG. Con el glifo de Font
   Awesome dependia de acertar el nombre de la familia y, si no coincidia,
   las cards de producto se quedaban con la lista sin vinetas. */
#order-standard_cart .hex-product-card__features li::before {
    background-color: currentColor;
    color: var(--accent-soft);
    content: "";
    display: inline-block;
    flex: 0 0 auto;
    height: 0.8125em;
    -webkit-mask-image: var(--hex-icon-check);
    mask-image: var(--hex-icon-check);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    width: 0.8125em;
}

#order-standard_cart .hex-product-card__features .feature-value {
    color: var(--text);
    font-weight: 700;
}

/* Empuja precio y boton al pie de la card, para que todas las cards
   de una fila alineen sus CTA aunque tengan descripciones distintas. */
#order-standard_cart .hex-product-card__spacer { flex: 1 1 auto; min-height: 0.75rem; }

/* RF-05.10: simbolo pequeño + numero grande + periodo en linea */
#order-standard_cart .hex-product-card__price {
    align-items: baseline;
    color: var(--text);
    display: flex;
    flex-wrap: wrap;
    gap: 0.3125rem;
    margin-top: 1rem;
}

#order-standard_cart .hex-product-card__price-prefix {
    color: var(--text-tertiary);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    width: 100%;
}

#order-standard_cart .hex-product-card__price-symbol {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    font-weight: 600;
}

#order-standard_cart .hex-product-card__price-amount {
    color: var(--text);
    font-size: 1.875rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
}

#order-standard_cart .hex-product-card__price-period {
    color: var(--text-tertiary);
    font-size: 0.8125rem;
    font-weight: 600;
}

#order-standard_cart .hex-product-card__setup {
    color: var(--text-tertiary);
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* RF-05.11: boton de ancho completo, minimalista, en mayusculas */
#order-standard_cart .hex-product-card__cta {
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius);
    color: var(--text);
    display: flex;
    font-size: 0.8125rem;
    font-weight: 700;
    gap: 0.5rem;
    justify-content: center;
    letter-spacing: 0.08em;
    margin-top: 1.125rem;
    min-height: var(--tap-target);
    padding: 0.6875rem 1rem;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
    width: 100%;
}

#order-standard_cart .hex-product-card__cta:hover,
#order-standard_cart .hex-product-card__cta:focus {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
    color: #ffffff;
    text-decoration: none;
}

#order-standard_cart .hex-product-card__cta:active { transform: translateY(1px); }

/* RF-05.12: estado agotado */
#order-standard_cart .hex-product-card--out { opacity: 0.92; }

#order-standard_cart .hex-product-card--out:hover { transform: none; }

/* "SIN STOCK" no usa --text-disabled: aunque WCAG exime a los controles
   inactivos, aqui el texto comunica el estado real del producto, asi que
   se mantiene por encima de 4.5:1 (--text-tertiary da ~5:1 sobre la card).
   Que no sea pulsable se transmite por fondo, borde y cursor. */
#order-standard_cart .hex-product-card__cta.is-disabled,
#order-standard_cart .hex-product-card__cta[aria-disabled="true"] {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--hairline);
    color: var(--text-tertiary);
    cursor: not-allowed;
    pointer-events: none;
}

/* El badge flotante .hex-product-card__badge se retiro: se montaba encima
   del titulo con nombres largos. Su funcion la cumple ahora
   .hex-product-card__stock--out, dentro del flujo normal de la card. */

/* RF-05.13: icono/imagen del producto abajo a la izquierda */
#order-standard_cart .hex-product-card__foot {
    align-items: center;
    border-top: 1px solid var(--hairline-soft);
    display: flex;
    gap: 0.625rem;
    margin-top: 1.125rem;
    padding-top: 0.875rem;
}

#order-standard_cart .hex-product-card__media {
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-sm);
    color: var(--accent-soft);
    display: flex;
    flex: 0 0 auto;
    font-size: 1.0625rem;
    height: 36px;
    justify-content: center;
    overflow: hidden;
    width: 36px;
}

#order-standard_cart .hex-product-card__media img {
    height: 100%;
    object-fit: contain;
    width: 100%;
}

#order-standard_cart .hex-product-card__foot-label {
    color: var(--text-tertiary);
    font-size: 0.75rem;
    line-height: 1.3;
}


/* =====================================================================
   06. ORDERFORM: LAYOUT 70 / 30                          (RF-06.1)
   ===================================================================== */

/* products.tpl y configureproduct.tpl ya no llevan la columna lateral
   de categorias (se sustituye por tabs / por el sumario), asi que hay
   que anular el float:right + width:75% que all.min.css aplica a
   .cart-body pensando en que hubiera una .cart-sidebar al lado. */
#order-standard_cart.hex-cart--configure .cart-body,
#order-standard_cart.hex-cart--products .cart-body {
    float: none;
    padding: 0;
    width: 100%;
}

#order-standard_cart .hex-configure-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem;
    margin: 0;
}

/* El contenido usa flex-basis fija y crece para ocupar el hueco; el
   sidebar toma ~30%. No se reparte 70% + 30% en flex-basis porque
   70 + 30 + gap > 100% haria saltar el sidebar a la linea siguiente. */
#order-standard_cart .hex-configure-layout > .secondary-cart-body {
    flex: 1 1 380px;
    float: none;
    max-width: 100%;
    min-width: 0;
    padding: 0;
    width: auto;
}

#order-standard_cart .hex-configure-layout > .secondary-cart-sidebar {
    flex: 0 0 clamp(280px, 30%, 360px);
    float: none;
    margin: 0;
    min-width: 0;
    padding: 0;
    width: auto;
}

/* Sidebar sticky en desktop */
@media (min-width: 992px) {
    #order-standard_cart .hex-configure-layout > .secondary-cart-sidebar {
        align-self: flex-start;
        position: sticky;
        top: 1.25rem;
    }
}


/* =====================================================================
   07. CARD RESUMEN DEL PRODUCTO                          (RF-06.2)
   ===================================================================== */

#order-standard_cart .hex-product-hero {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--glass-shadow);
    margin-bottom: 1.75rem;
    padding: 1.375rem;
}

#order-standard_cart .hex-product-hero__head {
    align-items: center;
    display: flex;
    gap: 0.875rem;
}

#order-standard_cart .hex-product-hero__media {
    align-items: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    color: var(--accent-soft);
    display: flex;
    flex: 0 0 auto;
    font-size: 1.375rem;
    height: 52px;
    justify-content: center;
    overflow: hidden;
    width: 52px;
}

#order-standard_cart .hex-product-hero__media img {
    height: 100%;
    object-fit: contain;
    width: 100%;
}

#order-standard_cart .hex-product-hero__title {
    color: var(--text);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
}

#order-standard_cart .hex-product-hero__group {
    color: var(--text-tertiary);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    margin: 0.125rem 0 0;
    text-transform: uppercase;
}

#order-standard_cart .hex-product-hero__desc {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin: 0.875rem 0 0;
}

/* Lista de caracteristicas con iconos (RF-06.2) */
#order-standard_cart .hex-feature-list {
    display: grid;
    gap: 0.5rem 1rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
}

#order-standard_cart .hex-feature-list li {
    align-items: baseline;
    color: var(--text-secondary);
    display: flex;
    font-size: 0.8125rem;
    gap: 0.5rem;
}

#order-standard_cart .hex-feature-list li > i {
    color: var(--accent-soft);
    flex: 0 0 auto;
    font-size: 0.8125rem;
    width: 1rem;
}

#order-standard_cart .hex-feature-list .feature-value {
    color: var(--text);
    font-weight: 700;
}


/* =====================================================================
   08. CARDS SELECCIONABLES                       (RF-06.3 - RF-06.9)
   ---------------------------------------------------------------------
   Un mismo componente sirve para el ciclo de facturacion y para las
   opciones configurables. Estructura del markup:

     <label class="hex-choice">
       <input type="radio" class="hex-choice__input no-icheck" ...>
       <span class="hex-choice__box">
         <span class="hex-choice__dot"></span>         <- radio (arriba izq)
         <span class="hex-choice__text"> ... </span>   <- nombre + precio
         <span class="hex-choice__media"> ... </span>  <- icono/imagen DERECHA
       </span>
     </label>

   La clase .no-icheck evita que el plugin iCheck del carrito envuelva y
   oculte el input (ver js/scripts.js linea ~2575).
   ===================================================================== */

#order-standard_cart .hex-choice-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(0, 1fr);       /* RF-08.3: 1 col en movil */
    margin: 0 0 0.5rem;
}

@media (min-width: 768px) {
    #order-standard_cart .hex-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #order-standard_cart .hex-choice-grid--wide { grid-template-columns: minmax(0, 1fr); }
}

#order-standard_cart .hex-choice {
    cursor: pointer;
    display: block;
    font-weight: 400;
    margin: 0;
    position: relative;
}

/* El input real se mantiene en el DOM y accesible al lector de pantalla,
   pero visualmente lo sustituye .hex-choice__dot. */
#order-standard_cart .hex-choice__input {
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 1px;
}

#order-standard_cart .hex-choice__box {
    align-items: flex-start;
    background: var(--bg-card);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    display: flex;
    gap: 0.75rem;
    min-height: 68px;
    padding: 0.875rem 1rem;
    transition: background-color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}

#order-standard_cart .hex-choice:hover .hex-choice__box {
    background: var(--bg-card-hover);
    border-color: var(--hairline-strong);
}

/* RF-06.4: radio arriba a la izquierda */
#order-standard_cart .hex-choice__dot {
    background: transparent;
    border: 2px solid var(--text-tertiary);
    border-radius: 50%;
    flex: 0 0 auto;
    height: 18px;
    margin-top: 0.125rem;
    position: relative;
    transition: border-color var(--t-fast);
    width: 18px;
}

#order-standard_cart .hex-choice__dot::after {
    background: var(--accent);
    border-radius: 50%;
    content: "";
    height: 8px;
    left: 50%;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.4);
    transition: opacity var(--t-fast), transform var(--t-fast);
    width: 8px;
}

/* Variante checkbox (opciones de tipo "activar/desactivar") */
#order-standard_cart .hex-choice__dot--check { border-radius: var(--radius-sm); }
#order-standard_cart .hex-choice__dot--check::after {
    background: transparent;
    border: 2px solid var(--accent);
    border-radius: 1px;
    border-left: 0;
    border-top: 0;
    height: 9px;
    top: 45%;
    transform: translate(-50%, -55%) rotate(45deg) scale(0.5);
    width: 5px;
}

#order-standard_cart .hex-choice__text {
    flex: 1 1 auto;
    min-width: 0;
}

#order-standard_cart .hex-choice__name {
    color: var(--text);
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

#order-standard_cart .hex-choice__price {
    color: var(--text-secondary);
    display: block;
    font-size: 0.8125rem;
    margin-top: 0.1875rem;
}

#order-standard_cart .hex-choice__price strong {
    color: var(--text);
    font-weight: 700;
}

/* Texto opcional de ahorro (RF-06.4) */
#order-standard_cart .hex-choice__save {
    background: rgba(47, 208, 123, 0.14);
    border-radius: var(--radius-pill);
    color: var(--success);
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-top: 0.375rem;
    padding: 0.15em 0.55em;
}

/* RF-06.7 / RF-06.8: icono o imagen SIEMPRE a la derecha de la card */
#order-standard_cart .hex-choice__media {
    align-items: center;
    align-self: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-sm);
    color: var(--text-tertiary);
    display: flex;
    flex: 0 0 auto;
    font-size: 1.125rem;
    height: 40px;
    justify-content: center;
    margin-left: auto;               /* la empuja al extremo derecho */
    overflow: hidden;
    transition: color var(--t-fast), border-color var(--t-fast);
    width: 40px;
}

#order-standard_cart .hex-choice__media img {
    display: block;
    height: 100%;
    object-fit: contain;
    width: 100%;
}

/* RF-06.5: card seleccionada con borde de acento y fondo resaltado */
#order-standard_cart .hex-choice__input:checked + .hex-choice__box {
    background: var(--accent-tint);
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
}

#order-standard_cart .hex-choice__input:checked + .hex-choice__box .hex-choice__dot {
    border-color: var(--accent);
}

#order-standard_cart .hex-choice__input:checked + .hex-choice__box .hex-choice__dot::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

#order-standard_cart .hex-choice__input:checked + .hex-choice__box .hex-choice__dot--check::after {
    opacity: 1;
    transform: translate(-50%, -55%) rotate(45deg) scale(1);
}

#order-standard_cart .hex-choice__input:checked + .hex-choice__box .hex-choice__media {
    border-color: var(--accent-border);
    color: var(--accent-soft);
}

/* Foco por teclado: el anillo se dibuja sobre la card completa. */
#order-standard_cart .hex-choice__input:focus-visible + .hex-choice__box {
    outline: var(--focus-width) solid var(--focus);
    outline-offset: var(--focus-offset);
}

@supports not selector(:focus-visible) {
    #order-standard_cart .hex-choice__input:focus + .hex-choice__box {
        outline: var(--focus-width) solid var(--focus);
        outline-offset: var(--focus-offset);
    }
}

#order-standard_cart .hex-choice__input:disabled + .hex-choice__box {
    cursor: not-allowed;
    opacity: 0.55;
}

/* Grupo de opciones: etiqueta del grupo en mayusculas (LOCATION, RAM...) */
#order-standard_cart .hex-option-group { margin-bottom: 1.5rem; }

#order-standard_cart .hex-option-group__label {
    align-items: center;
    color: var(--text);
    display: flex;
    font-size: 0.75rem;
    font-weight: 700;
    gap: 0.5rem;
    letter-spacing: 0.12em;
    margin-bottom: 0.625rem;
    text-transform: uppercase;
}

#order-standard_cart .hex-option-group__label i { color: var(--accent-soft); }

/* Opciones de cantidad (slider / numero) */
#order-standard_cart .hex-option-group .irs { margin-top: 0.5rem; }
#order-standard_cart .form-control-qty { display: inline-block; max-width: 120px; }
#order-standard_cart .form-control-static-inline {
    color: var(--text-secondary);
    display: inline-block;
    margin-left: 0.5rem;
}


/* =====================================================================
   09. SIDEBAR "SUMARIO DE PEDIDO"               (RF-06.10 - RF-06.13)
   ---------------------------------------------------------------------
   RF-06.10 pide alto contraste: se usa glass mas opaco sobre un fondo
   solido, de modo que el texto blanco mantiene >15:1 aunque debajo pase
   contenido claro.
   ===================================================================== */

#order-standard_cart .order-summary,
#order-standard_cart .hex-summary {
    background: rgba(14, 14, 19, 0.94);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    color: var(--text-secondary);
    padding: 1.25rem;
    position: relative;
}

#order-standard_cart .order-summary h2,
#order-standard_cart .hex-summary__title {
    border-bottom: 1px solid var(--hairline);
    color: var(--text);
    font-size: 1.0625rem !important;
    font-weight: 700;
    letter-spacing: 0.01em;
    margin: 0 0 1rem;
    padding-bottom: 0.75rem;
    text-align: left;
}

/* all.min.css del carrito pinta este contenedor de #f8f8f8: hay que
   devolverlo a transparente o el sumario queda como una caja blanca
   con texto claro encima. */
#order-standard_cart .summary-container {
    background: transparent;
    border: none;
    padding: 0;
}

/* RF-06.11: precios alineados a la derecha */
#order-standard_cart .order-summary .clearfix,
#order-standard_cart .order-summary .summary-totals .clearfix {
    align-items: baseline;
    display: flex;
    font-size: 0.8125rem;
    gap: 0.75rem;
    justify-content: space-between;
    padding: 0.3125rem 0;
}

#order-standard_cart .order-summary .clearfix .pull-left,
#order-standard_cart .order-summary .clearfix .float-left {
    color: var(--text-secondary);
    float: none !important;
    min-width: 0;
    overflow-wrap: anywhere;
}

#order-standard_cart .order-summary .clearfix .pull-right,
#order-standard_cart .order-summary .clearfix .float-right {
    color: var(--text);
    float: none !important;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

#order-standard_cart .order-summary .product-name {
    color: var(--text);
    display: block;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3;
}

#order-standard_cart .order-summary .product-group {
    color: var(--text-tertiary);
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
}

/* RF-06.12: total recurrente, instalacion e importe final */
#order-standard_cart .order-summary .summary-totals {
    border-top: 1px solid var(--hairline);
    margin-top: 0.875rem;
    padding-top: 0.75rem;
}

#order-standard_cart .order-summary .total-due-today,
#order-standard_cart .order-summary .total-due-today-padded {
    align-items: baseline;
    background: var(--accent-tint);
    border: 1px solid var(--accent-border);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    margin-top: 1rem;
    padding: 0.875rem 1rem;
    text-align: left;
}

#order-standard_cart .order-summary .total-due-today .amt {
    color: var(--text);
    display: block;
    font-size: 1.75rem;         /* importe final mas grande */
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    order: 2;
}

#order-standard_cart .order-summary .total-due-today span:not(.amt) {
    color: var(--text-secondary);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    order: 1;
    text-transform: uppercase;
}

#order-standard_cart .order-summary .recurring-totals,
#order-standard_cart .order-summary .recurring-charges,
#order-standard_cart .order-summary .bordered-totals {
    border-top: 1px solid var(--hairline);
    color: var(--text-tertiary);
    font-size: 0.75rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
}

#order-standard_cart .order-summary .loader {
    background: rgba(14, 14, 19, 0.7);
    border-radius: var(--radius-lg);
    color: var(--accent-soft);
    inset: 0;
    align-items: center;
    display: flex;
    justify-content: center;
    position: absolute;
    z-index: 3;
}

#order-standard_cart .order-summary i.fa-trash,
#order-standard_cart .order-summary i.fa-trash-alt { color: var(--text-tertiary); }
#order-standard_cart .order-summary a:hover i.fa-trash,
#order-standard_cart .order-summary a:hover i.fa-trash-alt { color: var(--danger); }

/* RF-06.13: CTA "Continuar" de ancho completo */
#order-standard_cart .hex-summary-cta {
    margin-top: 1rem;
}

#order-standard_cart .hex-summary-cta .btn,
#order-standard_cart #btnCompleteProductConfig {
    align-items: center;
    background: var(--accent-strong);
    border: 1px solid var(--accent-strong);
    border-radius: var(--radius);
    box-shadow: none;
    color: #ffffff;
    display: flex;
    font-size: 0.9375rem;
    font-weight: 700;
    gap: 0.5rem;
    justify-content: center;
    letter-spacing: 0.02em;
    min-height: 52px;
    padding: 0.875rem 1.25rem;
    text-shadow: none;
    width: 100%;
}

#order-standard_cart .hex-summary-cta .btn:hover,
#order-standard_cart #btnCompleteProductConfig:hover,
#order-standard_cart .hex-summary-cta .btn:focus,
#order-standard_cart #btnCompleteProductConfig:focus {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #ffffff;
}

#order-standard_cart .hex-summary-cta .btn:active,
#order-standard_cart #btnCompleteProductConfig:active { transform: translateY(1px); }

#order-standard_cart .hex-summary-note {
    color: var(--text-tertiary);
    font-size: 0.75rem;
    margin-top: 0.75rem;
    text-align: center;
}


/* =====================================================================
   10. ADDONS, DOMINIOS Y CHECKOUT
   ===================================================================== */

/* ---------------------------------------------------------------------
   10.0 Desglose del pedido en el checkout
   ---------------------------------------------------------------------
   El markup lo pinta checkout.tpl. Es la misma informacion que el
   "Sumario de Pedido" del carrito, pero en horizontal (concepto a la
   izquierda, precio a la derecha) porque aqui ocupa el ancho completo
   de la columna en lugar de una barra lateral estrecha.
   --------------------------------------------------------------------- */

#order-standard_cart .hex-checkout-summary {
    background: rgba(14, 14, 19, 0.94);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    color: var(--text-secondary);
    margin: 0 0 1.5rem;
    padding: 1.25rem;
}

#order-standard_cart .hex-checkout-summary-head {
    align-items: baseline;
    border-bottom: 1px solid var(--hairline);
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    padding-bottom: 0.75rem;
}

#order-standard_cart .hex-checkout-summary-head h2 {
    color: var(--text);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    margin: 0;
}

#order-standard_cart .hex-checkout-summary-edit {
    color: var(--accent-soft);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

#order-standard_cart .hex-checkout-summary-edit:hover,
#order-standard_cart .hex-checkout-summary-edit:focus {
    color: var(--text);
    text-decoration: underline;
}

#order-standard_cart .hex-checkout-item {
    align-items: flex-start;
    border-bottom: 1px solid var(--hairline-soft);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 0.75rem 0;
}

#order-standard_cart .hex-checkout-item:last-child { border-bottom: none; }

#order-standard_cart .hex-checkout-item-child { padding-left: 1rem; }

#order-standard_cart .hex-checkout-item-main {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

#order-standard_cart .hex-checkout-item-title {
    color: var(--text);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
}

#order-standard_cart .hex-checkout-item-meta {
    color: var(--text-tertiary);
    font-size: 0.8125rem;
    line-height: 1.35;
}

#order-standard_cart .hex-checkout-item-options {
    color: var(--text-tertiary);
    font-size: 0.75rem;
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0;
}

#order-standard_cart .hex-checkout-item-options li { line-height: 1.45; }

#order-standard_cart .hex-checkout-item-options li::before {
    content: "\203A";        /* › : misma marca que usa el carrito base */
    margin-right: 0.375rem;
    opacity: 0.7;
}

/* --- Acciones de cada linea (Editar / Quitar) ------------------------
   Van debajo del concepto, no en la columna del precio, para que no
   compitan con el importe ni desplacen la cifra al aparecer. */
#order-standard_cart .hex-checkout-item-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 0.75rem;
    margin-top: 0.5rem;
}

#order-standard_cart .hex-item-action {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-tertiary);
    cursor: pointer;
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: 600;
    gap: 0.3125rem;
    line-height: 1;
    margin: 0;
    /* Compensa el padding para que el texto quede alineado con el resto
       de la linea y el area pulsable siga siendo comoda. */
    margin-left: -0.5rem;
    min-height: 32px;
    padding: 0.4375rem 0.5rem;
    text-decoration: none;
    transition: background-color var(--t-fast), color var(--t-fast);
}

#order-standard_cart .hex-checkout-item-actions > * + * { margin-left: 0; }

#order-standard_cart .hex-item-action:hover,
#order-standard_cart .hex-item-action:focus-visible {
    background: rgba(255, 255, 255, 0.07);
    color: var(--text);
    text-decoration: none;
}

#order-standard_cart .hex-item-action i { font-size: 0.8125rem; }

#order-standard_cart .hex-item-action--remove:hover,
#order-standard_cart .hex-item-action--remove:focus-visible {
    background: rgba(255, 107, 107, 0.12);
    color: var(--danger);
}

#order-standard_cart .hex-checkout-item-price {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    text-align: right;
}

#order-standard_cart .hex-checkout-item-price .amount {
    color: var(--text);
    font-size: 0.9375rem;
    font-weight: 700;
    white-space: nowrap;
}

#order-standard_cart .hex-checkout-item-price .cycle {
    color: var(--text-tertiary);
    font-size: 0.75rem;
}

/* --- Codigo de promocion dentro del desglose -------------------------
   Markup en checkout.tpl. Mismo lenguaje que la caja del carrito
   (§ 12.b): campo con icono a la izquierda y boton de acento al lado. */
#order-standard_cart .hex-checkout-promo {
    border-top: 1px solid var(--hairline-soft);
    padding-top: 0.875rem;
}

#order-standard_cart .hex-checkout-promo-form {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

#order-standard_cart .hex-checkout-promo-form .form-group {
    flex: 1 1 220px;
    margin-bottom: 0;
    min-width: 0;
}

#order-standard_cart .hex-checkout-promo-form .btn {
    align-items: center;
    background: var(--accent-strong);
    border-color: var(--accent-strong);
    color: #ffffff;
    display: inline-flex;
    flex: 0 0 auto;
    justify-content: center;
    min-height: var(--tap-target);
    padding: 0 1.25rem;
    white-space: nowrap;
}

#order-standard_cart .hex-checkout-promo-form .btn:hover,
#order-standard_cart .hex-checkout-promo-form .btn:focus {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #ffffff;
}

/* Cupon ya aplicado */
#order-standard_cart .hex-checkout-promo-applied {
    align-items: center;
    background: rgba(47, 208, 123, 0.12);
    border: 1px solid var(--success);
    border-radius: var(--radius);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    padding: 0.75rem 1rem;
}

#order-standard_cart .hex-checkout-promo-code {
    align-items: center;
    color: var(--text);
    display: inline-flex;
    font-weight: 700;
    gap: 0.4375rem;
    letter-spacing: 0.02em;
}

#order-standard_cart .hex-checkout-promo-code i { color: var(--success); }

#order-standard_cart .hex-checkout-promo-desc {
    color: var(--text-secondary);
    flex: 1 1 auto;
    font-size: 0.8125rem;
    min-width: 0;
}

#order-standard_cart .hex-checkout-promo-remove {
    color: var(--text-tertiary);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

#order-standard_cart .hex-checkout-promo-remove:hover { color: var(--danger); }

@media (max-width: 575.98px) {
    #order-standard_cart .hex-checkout-promo-form .form-group,
    #order-standard_cart .hex-checkout-promo-form .btn { flex: 1 1 100%; }
}

#order-standard_cart .hex-checkout-totals {
    border-top: 1px solid var(--hairline);
    margin-top: 0.5rem;
    padding-top: 0.75rem;
}

#order-standard_cart .hex-checkout-total-row {
    display: flex;
    font-size: 0.8125rem;
    gap: 0.75rem;
    justify-content: space-between;
    padding: 0.25rem 0;
}

#order-standard_cart .hex-checkout-total-discount { color: var(--success); }

#order-standard_cart .hex-checkout-total-final {
    border-top: 1px solid var(--hairline);
    color: var(--text);
    font-size: 1.0625rem;
    font-weight: 700;
    margin-top: 0.5rem;
    padding-top: 0.75rem;
}

@media (max-width: 575.98px) {
    #order-standard_cart .hex-checkout-item {
        flex-direction: column;
        gap: 0.375rem;
    }
    /* Dedos, no raton: se agranda el area pulsable de Editar / Quitar. */
    #order-standard_cart .hex-item-action {
        min-height: 40px;
        padding: 0.5rem 0.75rem;
    }
    #order-standard_cart .hex-checkout-item-price {
        align-items: baseline;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.25rem 0.5rem;
        text-align: left;
    }
}

/* ---------------------------------------------------------------------
   10.a Selector de cuenta del checkout ("ELEGIR CUENTA")
   ---------------------------------------------------------------------
   El carrito base pinta estos bloques de #f6f6f6, y de #fff el activo,
   con texto gris oscuro encima. Sobre fondo oscuro quedaban como dos
   recuadros blancos y el texto era ilegible (1:1 en el nombre).

   Se convierten en cards seleccionables, con el mismo lenguaje que las
   del ciclo de facturacion: borde de acento y fondo tintado al elegir.
   --------------------------------------------------------------------- */

#order-standard_cart .account-select-container {
    border-right: none;          /* el base ponia 1px solid #eee */
    display: grid;
    gap: 0.625rem;
    margin: 0 0 1.5rem;
}

#order-standard_cart .account-select-container > div { padding: 0; }

#order-standard_cart .account-select-container div.account,
#order-standard_cart .account-select-container div.account.active,
#order-standard_cart .account-select-container div.account.border-bottom {
    background: var(--bg-card);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    color: var(--text-secondary);
    padding: 0;
    transition: background-color var(--t-fast), border-color var(--t-fast);
}

#order-standard_cart .account-select-container div.account:hover {
    background: var(--bg-card-hover);
    border-color: var(--hairline-strong);
}

#order-standard_cart .account-select-container div.account.active {
    background: var(--accent-tint);
    border-color: var(--accent);
}

/* El <label> ocupa toda la card: se puede pulsar en cualquier punto. */
#order-standard_cart .account-select-container div.account > label.radio-inline {
    align-items: flex-start;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    font-weight: 400;
    gap: 0.625rem;
    margin: 0;
    min-height: var(--tap-target);
    padding: 0.875rem 1rem;
    width: 100%;
}

#order-standard_cart .account-select-container input.account-select {
    accent-color: var(--accent);
    flex: 0 0 auto;
    height: 1.05rem;
    margin: 0.125rem 0 0;
    width: 1.05rem;
}

#order-standard_cart .account-select-container .address { display: block; }

#order-standard_cart .account-select-container .address strong {
    color: var(--text);
    font-size: 0.9375rem;
    font-weight: 600;
}

#order-standard_cart .account-select-container .address .small,
#order-standard_cart .account-select-container .address small {
    color: var(--text-tertiary);
    display: block;
    font-size: 0.8125rem;
    line-height: 1.5;
    margin-top: 0.25rem;
}

/* Los chips de divisa / estado dentro de la card. */
#order-standard_cart .account-select-container .label {
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-pill);
    color: var(--text-secondary);
    font-size: 0.6875rem;
    font-weight: 700;
    margin-left: 0.375rem;
    padding: 0.2em 0.6em;
}

#order-standard_cart .account-select-container .label-info {
    background: var(--accent-tint-strong);
    color: var(--accent-soft);
}

#order-standard_cart .account-select-container div.account.disabled,
#order-standard_cart .account-select-container input.account-select:disabled + .address {
    opacity: 0.55;
}

/* ---------------------------------------------------------------------
   10.b Campos del checkout con icono a la izquierda (.prepend-icon)
   ---------------------------------------------------------------------
   .field trae del base "border: 1px solid #DDD; color: #626262".
   --------------------------------------------------------------------- */

#order-standard_cart .field,
#order-standard_cart input.field,
#order-standard_cart textarea.field {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius);
    color: var(--text);
    min-height: var(--tap-target);
    width: 100%;
}

#order-standard_cart .field:focus {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: var(--accent);
    color: var(--text);
    outline: none;
}

#order-standard_cart .field::placeholder { color: var(--text-tertiary); }

#order-standard_cart .prepend-icon .field-icon {
    color: var(--text-muted);
    pointer-events: none;
}

#order-standard_cart .prepend-icon .field-icon i { color: var(--text-muted); }

#order-standard_cart .prepend-icon .field:focus ~ .field-icon i,
#order-standard_cart .prepend-icon:focus-within .field-icon i { color: var(--accent-soft); }

/* ---------------------------------------------------------------------
   10.c Metodos de pago y casillas del checkout
   --------------------------------------------------------------------- */

#order-standard_cart .radio-inline,
#order-standard_cart .checkbox-inline {
    align-items: center;
    color: var(--text-secondary);
    display: inline-flex;
    font-weight: 400;
    gap: 0.4375rem;
    margin: 0 0.75rem 0.5rem 0;
    min-height: var(--tap-target);
}

#order-standard_cart .radio-inline input,
#order-standard_cart .checkbox-inline input { accent-color: var(--accent); }

#order-standard_cart .payment-methods:checked + span,
#order-standard_cart .radio-inline input:checked ~ * { color: var(--text); }

/* ---------------------------------------------------------------------
   10.d Lista de metodos de pago
   ---------------------------------------------------------------------
   Markup en checkout.tpl + includes/paymethod-media.tpl. Cada fila es un
   <label class="hex-paymethod"> con el radio, el nombre y el logo.

   POR QUE SE REESTILIZA EL ENVOLTORIO DE iCHECK Y NO EL RADIO NATIVO
   El JS del carrito engancha la seleccion de pasarela al evento
   `ifChecked`, propio de iCheck, y ademas llama a .iCheck('check') al
   aplicar saldo. Si a estos radios se les pusiera .no-icheck (como a las
   cards de opciones configurables) elegir una pasarela dejaria de
   mostrar los campos de tarjeta. Asi que iCheck se queda, y lo que se
   hace es apagar su sprite (blue.png) y dibujar el circulo con CSS.

   El estado seleccionado se detecta de dos formas para que la lista se
   vea bien tanto con iCheck (.checked en el envoltorio) como sin el
   (:checked en el input), por si el plugin no llega a inicializarse.
   --------------------------------------------------------------------- */

#order-standard_cart .hex-paymethods {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#order-standard_cart .hex-paymethod {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-weight: 400;
    gap: 0.875rem;
    margin: 0;
    min-height: 60px;
    padding: 0.75rem 1.125rem;
    transition: background-color var(--t-fast);
}

#order-standard_cart .hex-paymethod + .hex-paymethod {
    border-top: 1px solid var(--hairline-soft);
}

#order-standard_cart .hex-paymethod:hover {
    background-color: rgba(255, 255, 255, 0.04);
}

/* Fila seleccionada.
   En un navegador sin :has() el tinte no se aplica, pero el circulo del
   radio si (se pinta con .checked / :checked directamente), asi que la
   seleccion se sigue viendo. */
#order-standard_cart .hex-paymethod:has(input:checked),
#order-standard_cart .hex-paymethod:has(.iradio_square-blue.checked) {
    background-color: var(--accent-tint);
}

#order-standard_cart .hex-paymethod__name {
    color: var(--text-secondary);
    flex: 1 1 auto;
    font-size: 0.9375rem;
    font-weight: 600;
    min-width: 0;
}

#order-standard_cart .hex-paymethod:has(input:checked) .hex-paymethod__name,
#order-standard_cart .hex-paymethod:has(.iradio_square-blue.checked) .hex-paymethod__name {
    color: var(--text);
}

/* --- El circulo del radio -------------------------------------------
   Sirve para los dos casos: el envoltorio que crea iCheck y el input
   nativo si iCheck no se aplicara. */
#order-standard_cart .hex-paymethod .iradio_square-blue,
#order-standard_cart .hex-paymethod > input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    background: none !important;      /* apaga el sprite blue.png */
    background-image: none !important;
    border: 2px solid var(--hairline-strong);
    border-radius: 50%;
    box-shadow: none;
    flex: 0 0 auto;
    height: 20px;
    margin: 0 !important;
    padding: 0;
    position: relative;
    transition: border-color var(--t-fast);
    width: 20px;
}

#order-standard_cart .hex-paymethod:hover .iradio_square-blue,
#order-standard_cart .hex-paymethod:hover > input[type="radio"] {
    border-color: var(--text-tertiary);
}

#order-standard_cart .hex-paymethod .iradio_square-blue.checked,
#order-standard_cart .hex-paymethod > input[type="radio"]:checked {
    border-color: var(--accent);
}

#order-standard_cart .hex-paymethod .iradio_square-blue.checked::after,
#order-standard_cart .hex-paymethod > input[type="radio"]:checked::after {
    background: var(--accent);
    border-radius: 50%;
    content: "";
    inset: 3px;
    position: absolute;
}

/* iCheck esconde el input real dentro del envoltorio con estilos en
   linea; basta con asegurarse de que no ocupe sitio. */
#order-standard_cart .hex-paymethod .iradio_square-blue > input[type="radio"] {
    border: 0;
    height: 100%;
    width: 100%;
}

/* --- Logo o icono a la derecha --------------------------------------- */
#order-standard_cart .hex-paymethod__media {
    align-items: center;
    color: var(--text-tertiary);
    display: flex;
    flex: 0 0 auto;
    font-size: 1.375rem;
    justify-content: flex-end;
    min-width: 44px;
}

#order-standard_cart .hex-paymethod__media img {
    display: block;
    max-height: 28px;
    max-width: 120px;
    object-fit: contain;
    width: auto;
}

#order-standard_cart .hex-paymethod:has(input:checked) .hex-paymethod__media,
#order-standard_cart .hex-paymethod:has(.iradio_square-blue.checked) .hex-paymethod__media {
    color: var(--accent-soft);
}

/* El foco por teclado recae en el input real, que iCheck deja invisible;
   se lleva el aro a la fila entera para que se vea al tabular.

   Se usa :has(:focus-visible) y no :focus-within a proposito: con
   :focus-within el aro tambien aparecia al elegir con el raton, que es
   justo lo que :focus-visible evita. */
#order-standard_cart .hex-paymethod:has(:focus-visible) {
    outline: var(--focus-width) solid var(--focus);
    outline-offset: calc(-1 * var(--focus-width));
}

@media (max-width: 575.98px) {
    #order-standard_cart .hex-paymethod {
        gap: 0.625rem;
        padding: 0.75rem 0.875rem;
    }
    #order-standard_cart .hex-paymethod__media img { max-width: 84px; }
}

#order-standard_cart .cc-input-container,
#order-standard_cart .new-card-container {
    background: var(--bg-card);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    margin-top: 1rem;
    padding: 1.125rem;
}

#order-standard_cart .paymethod-info { color: var(--text-secondary); }

#order-standard_cart .panel-addon,
#order-standard_cart .addon-products .panel {
    background: var(--bg-card);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    box-shadow: none;
    color: var(--text-secondary);
    transition: border-color var(--t-fast), background-color var(--t-fast);
}

#order-standard_cart .panel-addon:hover { border-color: var(--hairline-strong); }

#order-standard_cart .panel-addon-selected {
    background: var(--accent-tint);
    border-color: var(--accent);
}

#order-standard_cart .panel-addon .panel-body,
#order-standard_cart .panel-addon .card-body { color: var(--text-secondary); }

#order-standard_cart .panel-addon label { color: var(--text); }

#order-standard_cart .panel-addon .panel-price {
    color: var(--text);
    font-weight: 700;
}

#order-standard_cart .panel-addon .panel-add {
    background: rgba(255, 255, 255, 0.05);
    border-top: 1px solid var(--hairline);
    color: var(--text-secondary);
    min-height: var(--tap-target);
}

#order-standard_cart .panel-addon-selected .panel-add {
    background: var(--accent-tint-strong);
    color: var(--text);
}

/* Buscador y resultados de dominio */
#order-standard_cart .domain-selection-options .panel,
#order-standard_cart .domain-checker-result,
#order-standard_cart .domain-lookup-result {
    background: var(--bg-card);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    color: var(--text-secondary);
}

#order-standard_cart .domain-checker-available { border-left: 3px solid var(--success); }
#order-standard_cart .domain-checker-unavailable { border-left: 3px solid var(--danger); }

/* Tablas del carrito (viewcart, checkout) */
#order-standard_cart .table,
#order-standard_cart table { color: var(--text-secondary); }

#order-standard_cart .table thead th {
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid var(--hairline);
    border-top: none;
    color: var(--text);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

#order-standard_cart .table td,
#order-standard_cart .table th { border-top: 1px solid var(--hairline-soft); }

#order-standard_cart .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.025);
}

/* Alertas del carrito */
#order-standard_cart .alert {
    background: var(--bg-elevated);
    border: 1px solid var(--hairline);
    border-left-width: 3px;
    border-radius: var(--radius);
    color: var(--text-secondary);
}

#order-standard_cart .alert-success { background: rgba(47, 208, 123, 0.12); border-left-color: var(--success); color: var(--text); }
#order-standard_cart .alert-info    { background: rgba(91, 200, 255, 0.12); border-left-color: var(--info);    color: var(--text); }
#order-standard_cart .alert-warning { background: rgba(255, 184, 77, 0.12); border-left-color: var(--warning); color: var(--text); }
#order-standard_cart .alert-danger  { background: rgba(255, 107, 107, 0.12); border-left-color: var(--danger); color: var(--text); }

#order-standard_cart .alert i { margin-right: 0.375rem; }
#order-standard_cart .alert-warning i { color: var(--warning); }
#order-standard_cart .alert-danger i  { color: var(--danger); }
#order-standard_cart .alert-info i    { color: var(--info); }

/* Icono automatico de la alerta ------------------------------------
   Mismo tratamiento que en custom.css § 10: mascara SVG en lugar del
   glifo de Font Awesome. El glifo dependia de acertar el nombre de la
   familia ("Font Awesome 5 Pro" / "5 Free" / "6 Pro"), y cuando no
   coincidia la alerta se quedaba sin icono — el caso del aviso de
   promocion aplicada en el carrito.

   Se repiten aqui, con el id delante, porque este archivo es el que
   manda en las paginas del carrito (ver README § 4). Las variables
   --hex-icon-* las define templates/hex-renamed/css/hex-icons.css. */
#order-standard_cart .alert::before {
    background-color: currentColor;
    content: "";
    display: inline-block;
    height: 1.125em;
    margin-right: 0.5rem;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    vertical-align: -0.2em;
    width: 1.125em;
}

#order-standard_cart .alert-success::before {
    color: var(--success);
    -webkit-mask-image: var(--hex-icon-success);
    mask-image: var(--hex-icon-success);
}
#order-standard_cart .alert-info::before {
    color: var(--info);
    -webkit-mask-image: var(--hex-icon-info);
    mask-image: var(--hex-icon-info);
}
#order-standard_cart .alert-warning::before {
    color: var(--warning);
    -webkit-mask-image: var(--hex-icon-warning);
    mask-image: var(--hex-icon-warning);
}
#order-standard_cart .alert-danger::before {
    color: var(--danger);
    -webkit-mask-image: var(--hex-icon-danger);
    mask-image: var(--hex-icon-danger);
}

/* Sin tipo no hay mascara: evitaria un cuadrado relleno. */
#order-standard_cart .alert:not(.alert-success):not(.alert-info):not(.alert-warning):not(.alert-danger)::before {
    display: none;
}

/* Y si la plantilla ya pone su propio <i>, no duplicamos. */
#order-standard_cart .alert:has(> i:first-child)::before { content: none; }

#order-standard_cart .info-text-sm { font-size: 0.8125rem; }

/* Botones genericos del carrito */
#order-standard_cart .btn {
    background-image: none;
    border-radius: var(--radius);
    box-shadow: none;
    font-weight: 600;
    min-height: var(--tap-target);
    text-shadow: none;
}

#order-standard_cart .btn-primary,
#order-standard_cart .btn-success {
    background-color: var(--accent-strong);
    border-color: var(--accent-strong);
    color: #ffffff;
}

#order-standard_cart .btn-primary:hover,
#order-standard_cart .btn-success:hover,
#order-standard_cart .btn-primary:focus,
#order-standard_cart .btn-success:focus {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #ffffff;
}

#order-standard_cart .btn-default,
#order-standard_cart .btn-secondary {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--hairline-strong);
    color: var(--text);
}

#order-standard_cart .btn-default:hover,
#order-standard_cart .btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.11);
    border-color: rgba(255, 255, 255, 0.28);
    color: var(--text);
}

/* iCheck (sigue en uso para addons y opciones de dominio) */
#order-standard_cart .icheckbox_square-blue,
#order-standard_cart .iradio_square-blue { filter: brightness(1.35); }


/* =====================================================================
   11. ACCESIBILIDAD Y RESPONSIVE                (RF-06.14, RF-08)
   ===================================================================== */

#order-standard_cart :focus:not(:focus-visible) { outline: none; }

#order-standard_cart a:focus-visible,
#order-standard_cart button:focus-visible,
#order-standard_cart .btn:focus-visible,
#order-standard_cart input:focus-visible,
#order-standard_cart select:focus-visible,
#order-standard_cart textarea:focus-visible,
#order-standard_cart .hex-cat-tab:focus-visible,
#order-standard_cart .hex-product-card__cta:focus-visible {
    outline: var(--focus-width, 3px) solid var(--focus, #bfd3ff);
    outline-offset: var(--focus-offset, 2px);
    border-radius: var(--radius-sm);
}

/* RF-06.14 / RF-08.4: en movil el sumario pasa debajo del contenido.
   El orden del DOM ya lo coloca despues, asi que basta con anular el
   sticky y devolverle el ancho completo. */
@media (max-width: 991.98px) {
    #order-standard_cart .hex-configure-layout { gap: 1.25rem; }

    #order-standard_cart .hex-configure-layout > .secondary-cart-body,
    #order-standard_cart .hex-configure-layout > .secondary-cart-sidebar {
        flex: 1 1 100%;
        max-width: 100%;
        position: static;
        width: 100%;
    }

    /* Se anula tambien la regla del all.min.css base que fija 300px. */
    #order-standard_cart .secondary-cart-sidebar {
        float: none;
        margin: 0;
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    #order-standard_cart .hex-product-hero { padding: 1.125rem; }
    #order-standard_cart .order-summary,
    #order-standard_cart .hex-summary { padding: 1.125rem; }

    /* RF-08.5: se ajustan tamaños reales, sin escalados forzados. */
    #order-standard_cart .order-summary .total-due-today .amt { font-size: 1.5rem; }
    #order-standard_cart .hex-product-card { padding: 1.125rem; }
    #order-standard_cart .hex-product-card__price-amount { font-size: 1.625rem; }
}

@media (prefers-reduced-motion: reduce) {
    #order-standard_cart .hex-product-card:hover { transform: none; }
    #order-standard_cart *,
    #order-standard_cart *::before,
    #order-standard_cart *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

@media (prefers-contrast: more) {
    #order-standard_cart {
        --hairline:        rgba(255, 255, 255, 0.28);
        --hairline-soft:   rgba(255, 255, 255, 0.20);
        --text-secondary:  #d4dae3;
    }
    #order-standard_cart .hex-choice__box { border-color: rgba(255, 255, 255, 0.30); }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    #order-standard_cart .hex-product-hero,
    #order-standard_cart .order-summary,
    #order-standard_cart .cart-sidebar .panel,
    #order-standard_cart .cart-sidebar .card { background: rgba(18, 18, 26, 0.98); }
}


/* =====================================================================
   12. BARRIDO DE FONDOS CLAROS DEL CARRITO
   ---------------------------------------------------------------------
   Complementa la seccion 16.b de custom.css. Aqui van solo las piezas
   del order form que seguian heredando fondo claro.

   Recuerda: `bg-white` y `bg-light` son utilidades !important de
   Bootstrap y NO se pueden pisar desde CSS; hay que quitarlas del .tpl.
   Ya se hizo en domainregister.tpl (tabla de precios de TLD).
   ===================================================================== */

/* Paneles genericos que no son de la barra lateral ni de addons. */
#order-standard_cart .panel:not(.panel-addon),
#order-standard_cart .panel-default:not(.panel-addon) {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    color: var(--text-secondary);
}

#order-standard_cart .panel-heading:not(.card-header),
#order-standard_cart .panel-footer {
    background: transparent;
    border-color: var(--hairline);
    color: var(--text);
}

/* Tabla de precios de TLD (antes `bg-white` en la plantilla). */
#order-standard_cart .hex-tld-pricing {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--hairline-soft);
    border-radius: var(--radius);
    overflow: hidden;
}

#order-standard_cart .hex-tld-pricing .tld-pricing-header,
#order-standard_cart .hex-tld-pricing .tld-pricing-header div {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
}

#order-standard_cart .hex-tld-pricing .tld-row:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

/* ---------------------------------------------------------------------
   12.a Lista de articulos de cart.php?a=view
   ---------------------------------------------------------------------
   Esta era la pieza mas visible que seguia en "vanilla". El CSS base la
   pinta asi:

     .view-cart-items-header  -> background #058 (azul) + texto blanco
     .view-cart-items         -> border-bottom 2px solid #058
     .view-cart-items .item   -> background #fff
     .item:nth-child(even)    -> background #eee
     .item-domain             -> color #056

   Es decir: cabecera azul, filas blancas alternando gris y una raya azul
   debajo. Sobre el tema oscuro chirriaba y ademas el texto se perdia.

   Se rehace con el mismo lenguaje que el desglose del checkout
   (.hex-checkout-item): cabecera translucida en mayusculas, filas
   separadas por filetes y sin cebra.
   --------------------------------------------------------------------- */

#order-standard_cart .view-cart-items-header {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--hairline);
    border-bottom: none;
    border-radius: var(--radius) var(--radius) 0 0;
    color: var(--text-secondary);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 0.75rem 1rem;
    text-transform: uppercase;
}

#order-standard_cart .view-cart-items {
    border: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);   /* el base ponia 2px azul */
    border-radius: 0 0 var(--radius) var(--radius);
    margin-bottom: 1.5rem;
}

#order-standard_cart .view-cart-items .item,
#order-standard_cart .view-cart-items .item:nth-child(even) {
    background: transparent;                    /* el base alternaba #fff/#eee */
    border-top: 1px solid var(--hairline-soft);
    color: var(--text-secondary);
    font-size: 0.875rem;
    padding: 0.875rem 1rem;
}

#order-standard_cart .view-cart-items .item:first-child { border-top: none; }

/* El base los escala con em sobre un font-size de 0.8em, lo que daba
   titulos enormes y desproporcionados respecto al resto del carrito. */
#order-standard_cart .view-cart-items .item-title {
    color: var(--text);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
}

#order-standard_cart .view-cart-items .item-group {
    color: var(--text-tertiary);
    font-size: 0.8125rem;
}

#order-standard_cart .view-cart-items .item-domain {
    color: var(--accent-soft);                  /* el base: #056 */
    font-size: 0.8125rem;
}

#order-standard_cart .view-cart-items .item small { color: var(--text-tertiary); }

#order-standard_cart .view-cart-items .item-price {
    color: var(--text);
    font-weight: 700;
    text-align: right;
}

#order-standard_cart .view-cart-items .item-price .cycle,
#order-standard_cart .view-cart-items .item-price .renewal {
    color: var(--text-tertiary);
    font-weight: 400;
    font-size: 0.75rem;
}

#order-standard_cart .view-cart-items .btn-remove-from-cart {
    color: var(--text-tertiary);
    text-decoration: none;
}

#order-standard_cart .view-cart-items .btn-remove-from-cart:hover {
    color: var(--danger);
}

/* Fila de "El carrito esta vacio". */
#order-standard_cart .view-cart-items .empty-cart,
#order-standard_cart .view-cart-items > .text-center {
    color: var(--text-tertiary);
    padding: 2rem 1rem;
}

/* ---------------------------------------------------------------------
   12.b Caja del codigo de promocion
   ---------------------------------------------------------------------
   El CSS base la deja como una pestaña y un panel gris claro:

     .view-cart-tabs .tab-content        -> background #f8f8f8
     .view-cart-tabs .nav-tabs a[activa] -> background #f8f8f8, bordes #dee2e6

   Sobre fondo negro era el recuadro blanco de la captura, con el boton
   "Validar codigo" en blanco sobre blanco (invisible).

   Se convierte en una tarjeta del tema: pestañas con subrayado de acento
   y panel oscuro. El formulario pasa a una fila (campo + boton) en vez
   de un boton a todo lo ancho debajo del campo.
   --------------------------------------------------------------------- */

#order-standard_cart .view-cart-tabs { margin: 0 0 1.5rem; }

#order-standard_cart .view-cart-tabs .nav-tabs {
    border-bottom: 1px solid var(--hairline);
    font-size: 0.8125rem;
    gap: 0.25rem;
    padding-left: 0;                            /* el base sangraba 20px */
}

#order-standard_cart .view-cart-tabs .nav-tabs .nav-link {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--text-tertiary);
    font-weight: 600;
    letter-spacing: 0.02em;
    min-height: var(--tap-target);
    padding: 0.625rem 0.875rem;
    text-transform: uppercase;
}

#order-standard_cart .view-cart-tabs .nav-tabs .nav-link:hover {
    color: var(--text);
}

/* El markup marca la pestaña activa con aria-selected, no solo con
   .active; se cubren las dos formas. */
#order-standard_cart .view-cart-tabs .nav-tabs .nav-link.active,
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected="true"],
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-expanded="true"] {
    background-color: transparent;
    border-color: transparent transparent var(--accent);
    color: var(--text);
}

#order-standard_cart .view-cart-tabs .tab-content {
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--hairline);
    border-radius: 0 0 var(--radius) var(--radius);
    border-top: none;
    padding: 1.125rem;
}

/* Campo + boton en una sola fila. El markup es
   <form><div class="form-group prepend-icon">…</div><button …></form> */
#order-standard_cart .view-cart-tabs .promo form {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

#order-standard_cart .view-cart-tabs .promo .form-group {
    flex: 1 1 220px;
    margin-bottom: 0;
    min-width: 0;
}

/* El boton viene con .btn-block (width:100%): dentro del flex se ajusta
   a su contenido y deja de ocupar una linea entera. */
#order-standard_cart .view-cart-tabs .promo .btn,
#order-standard_cart .view-cart-tabs .promo .btn-block {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: var(--tap-target);
    padding: 0 1.25rem;
    white-space: nowrap;
    width: auto;
}

#order-standard_cart .view-cart-tabs .promo .btn:hover,
#order-standard_cart .view-cart-tabs .promo .btn:focus {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #ffffff;
}

@media (max-width: 575.98px) {
    /* En movil si conviene el boton a todo lo ancho. */
    #order-standard_cart .view-cart-tabs .promo .form-group,
    #order-standard_cart .view-cart-tabs .promo .btn { flex: 1 1 100%; }
}

/* Codigo ya aplicado: el base lo pinta blanco con borde punteado #ccc.
   Pasa a chip de exito, que es lo que comunica. */
#order-standard_cart .view-cart-promotion-code {
    /* Este archivo no define --success-tint; se usa el mismo literal que
       las alertas de exito de la seccion 11. */
    background: rgba(47, 208, 123, 0.12);
    border: 1px solid var(--success);
    border-radius: var(--radius);
    color: var(--text);
    font-weight: 600;
    margin-bottom: 0.75rem;
    padding: 0.75rem 1rem;
    text-align: center;
}

/* ---------------------------------------------------------------------
   12.c Resto de bloques del carrito que seguian claros
   ---------------------------------------------------------------------
   Salidos del mismo barrido automatico. Se agrupan por pagina.
   --------------------------------------------------------------------- */

/* Opciones de dominio (registrar / transferir / usar el mio) */
#order-standard_cart .domain-selection-options .option {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    color: var(--text-secondary);
}

#order-standard_cart .domain-selection-options .option-selected {
    background: var(--accent-tint);
    border-color: var(--accent);
    color: var(--text);
}

#order-standard_cart .transfer-not-eligible,
#order-standard_cart .product-info,
#order-standard_cart .default-captcha {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    color: var(--text-secondary);
}

/* Aviso de saldo disponible en el checkout */
#order-standard_cart .apply-credit-container {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    color: var(--text-secondary);
    padding: 1rem 1.125rem;
}

#order-standard_cart .order-summary .subtotal { border-color: var(--hairline); }

#order-standard_cart .addon-promo-container { border-color: var(--hairline); }

/* Renovaciones de servicios y dominios */
.domain-renewals,
.service-renewals,
.domain-renewals .domain-renewal,
.service-renewals .service-renewal,
.addon-renewals > div {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--hairline) !important;   /* el base fija #ccc */
    border-radius: var(--radius);
    color: var(--text-secondary);
}

/* Buscador de dominios y sugerencias */
.domain-checker-container .input-group-box,
.spotlight-tlds,
.spotlight-tld,
.suggested-domains .domain-lookup-suggestions-message,
.suggested-domains .domain-lookup-suggestions-loader,
.domain-promo-box {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--hairline);
    color: var(--text-secondary);
}

.spotlight-tld .invalid,
.spotlight-tld .unavailable {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--hairline);
    color: var(--text-tertiary);
}

.domain-pricing .tld-pricing-header .col-sm-2,
.domain-pricing .tld-pricing-header .col-xs-4 {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
}

/* Complementos (addons.tpl). Esta pagina conserva el markup vanilla
   (.products .product), que el CSS base pinta blanco con borde #ddd y
   cabecera #f8f8f8 con texto #333. Se alinea con las cards del tema. */
#order-standard_cart .products .product {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    color: var(--text-secondary);
    overflow: hidden;
    padding: 0 0 1rem;
    transition: border-color var(--t-fast);
}

#order-standard_cart .products .product:hover { border-color: var(--hairline-strong); }

#order-standard_cart .products .product header {
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid var(--hairline);
    border-radius: 0;
    margin: 0;
    padding: 0.875rem 1.125rem;
}

#order-standard_cart .products .product header span {
    color: var(--text);
    font-size: 1rem;
    font-weight: 700;
}

#order-standard_cart .products .product header .qty { color: var(--text-tertiary); }

#order-standard_cart .products .product .product-desc {
    color: var(--text-secondary);
    font-size: 0.875rem;
    padding: 1rem 1.125rem 0;
}

#order-standard_cart .products .product footer {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: space-between;
    padding: 0 1.125rem;
}

#order-standard_cart .products .product .product-pricing {
    color: var(--text);
    font-weight: 700;
}

#order-standard_cart .products .product .product-pricing .price { color: var(--text); }

/* Casilla de "busqueda avanzada" del buscador de dominios */
#order-standard_cart .domain-checker-advanced input[type="checkbox"] {
    accent-color: var(--accent);
    background: rgba(255, 255, 255, 0.08);
}

/* Recomendaciones de productos (modal y bloque inferior) */
.product-recommendations .product-recommendation {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    color: var(--text-secondary);
}

.product-recommendations .product-recommendation .body {
    background: transparent;
    color: var(--text-secondary);
}


/* =====================================================================
   13. DIALOGOS DE CONFIRMACION DEL CARRITO
   ---------------------------------------------------------------------
   Son #modalRemoveItem ("¿quitar este articulo?") y #modalEmptyCart
   ("¿vaciar el carrito?"). El markup viene de WHMCS y no se toca.

   Tres cosas los dejaban con mal aspecto:

   1. theme.min.css declara `.modal .modal-dialog { max-width: 700px }`.
      Son dos clases (0,2,0), asi que gana al `.modal-dialog` de
      Bootstrap con `max-width: 500px` y el dialogo se estiraba a 700px
      aunque solo tenga que preguntar "¿seguro?". En una ventana de
      ~730px quedaba pegado a los dos bordes.

   2. all.min.css del carrito le mete `padding-bottom: 45px` al pie, que
      deja un hueco enorme bajo los botones.

   3. El titulo mete un icono a 3x junto al texto en el mismo <h4>, sin
      separacion, asi que se leia como un churro.

   Los selectores no dependen de #order-standard_cart a proposito: en
   viewcart.tpl el modal cuelga de dentro y en checkout.tpl tambien, pero
   asi siguen funcionando si algun dia se mueven fuera.
   ===================================================================== */

.modal.modal-remove-item .modal-dialog {
    margin: 1.75rem auto;
    max-width: 420px;
}

.modal.modal-remove-item .modal-body {
    padding: 1.75rem 1.5rem 1.25rem;
    text-align: center;
}

/* El boton de cerrar iba en un .float-right dentro del cuerpo: se saca a
   la esquina para que no empuje el titulo. */
.modal.modal-remove-item .modal-body > .float-right {
    float: none !important;
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
    z-index: 1;
}

.modal.modal-remove-item .modal-content { position: relative; }

.modal.modal-remove-item .modal-title {
    align-items: center;
    display: flex;
    flex-direction: column;
    font-size: 1.125rem;
    font-weight: 700;
    gap: 0.875rem;
    justify-content: center;
}

/* El icono, en su circulo, con el color del tipo de accion.
   El id delante es obligatorio: all.min.css del carrito lo pinta con
   `#order-standard_cart .modal-title i { display: block; padding-top: 25px }`
   (1,1,1). Sin el id, ese display:block gana, el flex no se aplica y el
   glifo se queda pegado arriba a la izquierda dentro del circulo. */
#order-standard_cart .modal.modal-remove-item .modal-title i,
.modal.modal-remove-item .modal-title i {
    align-items: center;
    background: rgba(255, 107, 107, 0.12);
    border-radius: 50%;
    color: var(--danger);
    display: inline-flex;
    font-size: 1.5rem !important;   /* el markup trae fa-3x */
    height: 56px;
    justify-content: center;
    line-height: 1;
    padding: 0;                     /* el base metia 25px arriba */
    width: 56px;
}

/* El id va delante SOLO en esta regla: el hueco de 45px lo pinta
   `#order-standard_cart .modal-remove-item .modal-footer` (1,2,0), y sin
   el id no hay forma de ganarle. Se deja tambien la version sin id por
   si el modal acaba fuera de ese contenedor. */
#order-standard_cart .modal.modal-remove-item .modal-footer,
.modal.modal-remove-item .modal-footer {
    border-top: 1px solid var(--hairline);
    gap: 0.5rem;
    padding: 1rem 1.5rem;            /* el base dejaba 45px abajo */
}

.modal.modal-remove-item .modal-footer .btn {
    flex: 1 1 0;
    min-height: var(--tap-target);
}


/* =====================================================================
   IMPRESION
   ===================================================================== */

@media print {
    #order-standard_cart,
    #order-standard_cart .order-summary,
    #order-standard_cart .hex-product-card {
        background: #ffffff !important;
        box-shadow: none !important;
        color: #000000 !important;
    }
    #order-standard_cart .hex-summary-cta,
    #order-standard_cart .hex-cat-tabs { display: none !important; }
}