@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)
     12. Barrido de fondos claros del carrito
         12.a Lista de articulos de cart.php?a=view
         12.b Caja del codigo de promocion
         12.c Resto de bloques del carrito
         12.d Botonera de cierre del sumario
     13. Dialogos de confirmacion
     14. Utilidades del carrito
     15. Movimiento (animaciones de entrada y microinteracciones)
   ===================================================================== */


/* =====================================================================
   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. */
/* Controles nativos en oscuro. Ver la nota larga en la seccion 01 de
   templates/hex-renamed/css/custom.css: sin esto, la lista que despliega
   un <select> la dibuja el sistema operativo en modo claro -- blanca con
   texto gris -- porque es una ventana fuera del DOM y no la alcanza
   ninguna regla de `option`.

   Se declara en los dos sitios a proposito: `:root` para el documento y
   `#order-standard_cart` porque el bloque de tokens de abajo tambien esta
   ahi, y asi el carrito no depende de que custom.css del theme se haya
   cargado (en la pagina del pedido puede no estarlo; ver la nota de
   arquitectura al principio del archivo). */
:root { color-scheme: dark; }

#order-standard_cart {
    color-scheme: dark;

    --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); }

/* `color-scheme` tambien EN el control. Lo heredado de :root deberia
   bastar, pero es la señal mas directa para el motor que dibuja la
   ventana del desplegable -- la que salia blanca -- y recupera los
   controles que alguna hoja de un modulo haya puesto en claro. */
#order-standard_cart select,
#order-standard_cart input,
#order-standard_cart textarea,
#order-standard_cart button { color-scheme: dark; }

/* 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
   ---------------------------------------------------------------------
   Esta barra sustituye a la lateral por debajo de 1200px.

   HISTORIA DE DOS ARREGLOS

   Primero: sidebar-categories-collapsed.tpl envolvia 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 encima del
   Sumario de Pedido. Se paso el bloque a una fila flex y se anulo el
   float.

   Y despues: esa fila flex seguia viendose mal en pantalla estrecha. Con
   `flex: 1 1 260px` en las tarjetas y `margin-left: auto` en la divisa,
   entre 576 y 1200px entraban dos tarjetas por fila y el desplegable de
   divisa se colaba en el hueco que sobraba, a media altura y sin
   cabecera que dijera de que era. La ruptura a una columna estaba en
   575.98px, demasiado abajo: justo en los anchos mas habituales de un
   movil en horizontal o una ventana estrecha, el desorden era el maximo.

   Ahora es una rejilla `auto-fit`: las celdas se reparten solas, todas
   con el mismo ancho minimo, y cuando no caben dos pasan a una sin
   necesidad de media query. El selector de divisa se convirtio en una
   tarjeta con cabecera igual que las demas (ver el .tpl), asi que ya no
   es un caso especial: es una celda mas.

   Al no haber float, las reglas que lo neutralizaban se han retirado.
   --------------------------------------------------------------------- */

#order-standard_cart .sidebar-collapsed {
    /* `start` y no `center`: las tarjetas pueden tener distinto alto si un
       titulo ocupa dos lineas, y centradas verticalmente los desplegables
       dejaban de estar alineados entre si. */
    align-items: start;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    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; }
}

/* Las celdas de la rejilla: mismo cristal que el resto de tarjetas del
   tema, para que la barra no parezca de otra pagina. Antes eran
   transparentes y sin borde, asi que las cabeceras «Categorias» /
   «Acciones» quedaban flotando sobre el fondo sin nada que las agrupara
   con su desplegable.

   `min-width: 0` es obligatorio: sin el, una celda de rejilla no baja del
   ancho de su contenido y el <select> con el nombre de categoria mas largo
   ensanchaba la fila hasta desbordar. */
#order-standard_cart .sidebar-collapsed > .panel,
#order-standard_cart .sidebar-collapsed > .card {
    background: var(--glass-bg);
    border: var(--glass-border);
    border-radius: var(--radius);
    box-shadow: none;
    margin: 0;
    min-width: 0;
    overflow: hidden;
}

#order-standard_cart .sidebar-collapsed .panel-heading,
#order-standard_cart .sidebar-collapsed .card-header {
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid var(--hairline);
    padding: 0.5rem 0.875rem;
}

#order-standard_cart .sidebar-collapsed .panel-title {
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin: 0;
    text-transform: uppercase;
}

#order-standard_cart .sidebar-collapsed .panel-title > i { color: var(--accent-soft); }

#order-standard_cart .sidebar-collapsed .panel-body,
#order-standard_cart .sidebar-collapsed .card-body { padding: 0.625rem 0.875rem; }

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

/* Ancho completo dentro de su celda, en lugar del `width: auto` +
   `min-width: 110px` de antes: en una rejilla el ancho ya lo decide la
   celda, y `auto` dejaba el desplegable de divisa encogido a la izquierda
   con el resto de la tarjeta vacio a su derecha. */
#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-sm);
    color: var(--text);
    min-height: var(--tap-target);
    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;
}


/* ---------------------------------------------------------------------
   03.b Barra de divisa activa
   ---------------------------------------------------------------------
   Markup en includes/currency-notice.tpl. Va arriba del todo en el
   listado de la tienda y en la pagina de configuracion del producto.

   Es una pastilla, no una tarjeta: tiene que leerse como una etiqueta de
   contexto y no competir con el titular que va justo debajo. De ahi el
   radio de pildora, el fondo de cristal y el texto a 0.875rem.

   El <select> hereda `.form-control` del carrito base para no perder los
   estilos de estado, pero se le rehace el aspecto aqui: el base lo pinta
   cuadrado y claro, y dentro de una pastilla oscura desentonaba.
   --------------------------------------------------------------------- */

#order-standard_cart .hex-currency-bar {
    align-items: center;
    background: var(--glass-bg);
    border: var(--glass-border);
    border-radius: var(--radius-pill);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    justify-content: space-between;
    margin: 0 0 1.25rem;
    padding: 0.375rem 0.5rem 0.375rem 0.5rem;
}

#order-standard_cart .hex-currency-bar__main {
    align-items: center;
    display: flex;
    gap: 0.625rem;
    margin: 0;                     /* es un <p>: pierde el margen inferior */
    min-width: 0;
}

#order-standard_cart .hex-currency-bar__icon {
    align-items: center;
    background: var(--accent-tint);
    border-radius: 50%;
    color: var(--accent-soft);
    display: inline-flex;
    flex: 0 0 auto;
    height: 2rem;
    justify-content: center;
    width: 2rem;
}

#order-standard_cart .hex-currency-bar__text {
    color: var(--text-tertiary);
    font-size: 0.875rem;
    line-height: 1.35;
}

#order-standard_cart .hex-currency-bar__label { margin-right: 0.35em; }

#order-standard_cart .hex-currency-bar__value {
    color: var(--text);
    font-weight: 700;
    white-space: nowrap;           /* "CLP ($)" nunca parte en dos lineas */
}

#order-standard_cart .hex-currency-bar__code { letter-spacing: 0.04em; }

#order-standard_cart .hex-currency-bar__symbol {
    color: var(--text-tertiary);
    font-weight: 600;
    margin-left: 0.2em;
}

#order-standard_cart .hex-currency-bar__form {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    margin: 0;
    min-width: 0;
}

#order-standard_cart .hex-currency-bar__form-label {
    color: var(--text-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin: 0;
    text-transform: uppercase;
    white-space: nowrap;
}

#order-standard_cart .hex-currency-bar__select,
#order-standard_cart select.hex-currency-bar__select {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius-pill);
    box-shadow: none;
    color: var(--text);
    font-size: 0.875rem;
    font-weight: 600;
    height: auto;
    min-height: var(--tap-target);
    padding: 0 0.875rem;
    width: auto;
}

#order-standard_cart .hex-currency-bar__select:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: var(--accent-border);
}

#order-standard_cart .hex-currency-bar__submit {
    background: var(--accent);
    border: none;
    border-radius: var(--radius-pill);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    min-height: var(--tap-target);
    padding: 0 1rem;
}

#order-standard_cart .hex-currency-bar__note {
    align-items: center;
    color: var(--text-muted);
    display: inline-flex;
    font-size: 0.8125rem;
    gap: 0.375rem;
    padding-right: 0.75rem;
}

/* En movil la pastilla se rompe en dos filas; con el radio de pildora esa
   segunda fila quedaba con las esquinas comidas y el desplegable pegado
   al borde curvo. Se pasa a esquinas normales y el formulario ocupa toda
   la fila. */
@media (max-width: 575.98px) {
    #order-standard_cart .hex-currency-bar {
        border-radius: var(--radius);
        padding: 0.75rem;
    }

    #order-standard_cart .hex-currency-bar__form { width: 100%; }

    #order-standard_cart .hex-currency-bar__select,
    #order-standard_cart select.hex-currency-bar__select {
        flex: 1 1 auto;
        width: 100%;
    }
}


/* =====================================================================
   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;
}

/* Ya en el carrito: en productos con control de stock solo se admite 1
   unidad por pedido, asi que la card no vuelve a ofrecer "Ordenar ahora"
   sobre una unidad que el propio usuario ya tiene apartada. A diferencia de
   SIN STOCK esto SI es pulsable — lleva al carrito —, de ahi que conserve el
   estado hover en lugar de heredar el tratamiento de .is-disabled. Las
   reglas van despues del :hover base, con el que empatan en especificidad. */
#order-standard_cart .hex-product-card__cta--in-cart {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--hairline);
    color: var(--text-tertiary);
}

#order-standard_cart .hex-product-card__cta--in-cart:hover,
#order-standard_cart .hex-product-card__cta--in-cart:focus {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--hairline-strong);
    color: var(--text);
}

/* 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.

   ---------------------------------------------------------------------
   SEGUNDA PASADA: DE FILAS A TARJETAS Y ADIOS A LA REJILLA DE BOOTSTRAP

   Lo de arriba arreglaba el color, pero la maqueta seguia siendo la del
   Standard Cart: cada articulo es un `.row` de Bootstrap con columnas
   fijas `col-sm-7` / `col-sm-4` / `col-sm-1` (o `col-sm-5` + `col-sm-2`
   cuando hay selector de cantidad).

   Esas columnas son porcentajes duros y se comportan mal aqui:

     - el precio vive en un 33% fijo, asi que en la columna de contenido
       del carrito (que ya es un 65% de la pagina) se queda enorme y
       vacio mientras el nombre del producto y sus opciones se apelotonan;
     - por debajo de 576px `col-sm-*` se convierte en 100% y cada
       articulo pasa a ocupar cuatro lineas a sangre, sin jerarquia: el
       precio queda a la izquierda debajo del nombre y el boton de quitar
       en una linea propia;
     - la `.row` mete margenes negativos de 15px que se salen del padding
       de la tarjeta.

   Se sustituye por flex SIN TOCAR EL MARKUP. Es a proposito: los
   articulos se pintan en SIETE bucles distintos en viewcart.tpl
   (productos, addons de producto, addons sueltos, dominios, tres tipos
   de renovacion y mejoras) y todos repiten la misma rejilla. Neutralizar
   las columnas desde CSS lo arregla en los siete de una vez y no puede
   romper ninguno: si mañana WHMCS añade un tipo de articulo mas, entra
   por el mismo sitio.

   Y cada articulo pasa a ser una tarjeta suelta en lugar de una fila de
   una lista enmarcada: es lo que pedia el encargo (mas moderno) y ademas
   resuelve solo el problema de movil, porque una tarjeta con flex-wrap
   se reordena sin que haya que decirle nada.
   --------------------------------------------------------------------- */

/* La cabecera de columnas solo tiene sentido cuando los articulos son
   filas alineadas. Ahora son tarjetas, asi que se retira: los datos van
   etiquetados dentro de cada una. Se mantiene para lectores de pantalla
   por si algun modulo la referencia. */
#order-standard_cart .view-cart-items-header {
    clip: rect(0 0 0 0);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

#order-standard_cart .view-cart-items {
    background: transparent;
    border: none;                               /* el base ponia 2px azul */
    border-radius: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-bottom: 1.25rem;
}

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

#order-standard_cart .view-cart-items .item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--hairline-strong);
}

/* --- Neutralizacion de la rejilla de Bootstrap ----------------------
   Ver la nota larga de arriba. `.row` deja de ser rejilla y pasa a ser
   una fila flex que se envuelve; las columnas pierden su ancho fijo y
   se reparten por contenido.
   -------------------------------------------------------------------- */
#order-standard_cart .view-cart-items .item > .row {
    align-items: center;
    column-gap: 1rem;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    row-gap: 0.625rem;
}

#order-standard_cart .view-cart-items .item > .row > [class*="col-"] {
    flex: 0 0 auto;
    max-width: none;
    min-width: 0;
    padding: 0;
    width: auto;
}

/* Bloque principal (nombre + grupo + dominio + opciones): es el que
   crece. El `240px` es la base a partir de la cual se envuelve, no un
   ancho: con `min-width: 0` de arriba puede encogerse por debajo.

   Se hace columna flex tambien por dentro para poder REORDENAR sus
   piezas sin tocar el .tpl: el markup emite el nombre primero y el grupo
   («MINECRAFT», «COMPLEMENTO»...) despues, y se quiere al reves -- el
   grupo como etiqueta encima del nombre. Eso es `order: -1` en
   `.item-group`, mas abajo, y `order` solo funciona sobre items flex. */
#order-standard_cart .view-cart-items .item > .row > .col-sm-7,
#order-standard_cart .view-cart-items .item > .row > .col-sm-5 {
    display: flex;
    flex: 1 1 240px;
    flex-direction: column;
    gap: 0.125rem;
}

/* El precio se pega a la derecha ocupando lo que necesite. */
#order-standard_cart .view-cart-items .item .item-price {
    flex: 0 0 auto;
    margin-left: auto;
    text-align: right;
}

#order-standard_cart .view-cart-items .item .item-qty {
    align-items: center;
    display: flex;
    gap: 0.375rem;
}

#order-standard_cart .view-cart-items .item .item-qty .form-control {
    min-height: 38px;
    padding: 0.25rem 0.5rem;
    width: 4.5rem;
}

/* --- Tipografia de la tarjeta -------------------------------------- */

/* 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 {
    align-items: baseline;
    color: var(--text);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.9375rem;
    font-weight: 600;
    gap: 0.5rem;
    line-height: 1.35;
}

/* «Editar» y «Quitar» dentro del titulo: enlaces discretos, no botones
   que compitan con el nombre del producto. */
#order-standard_cart .view-cart-items .item-title .btn {
    font-size: 0.75rem;
    font-weight: 500;
    min-height: 0;
    padding: 0;
}

/* El grupo pasa a ser la linea de arriba, tipo etiqueta: da contexto
   («MINECRAFT») sin robarle peso al nombre. */
#order-standard_cart .view-cart-items .item-group {
    color: var(--text-tertiary);
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    order: -1;
    text-transform: uppercase;
}

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

/* Las opciones configurables (`&raquo; CPU: 2 vCPU`) son una lista, no
   un parrafo: se separan del titulo y se atenuan. */
#order-standard_cart .view-cart-items .item small {
    color: var(--text-tertiary);
    display: block;
    font-size: 0.75rem;
    line-height: 1.6;
    margin-top: 0.375rem;
}

#order-standard_cart .view-cart-items .item-price {
    color: var(--text);
    font-size: 1.0625rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
}

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

/* Boton de quitar: circulo fantasma que se tiñe de rojo al apuntarlo.
   Antes era una «x» suelta de 12px, dificil de acertar en movil. */
#order-standard_cart .view-cart-items .btn-remove-from-cart {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    color: var(--text-tertiary);
    display: inline-flex;
    gap: 0.375rem;
    justify-content: center;
    min-height: 34px;
    min-width: 34px;
    padding: 0 0.5rem;
    text-decoration: none;
    transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

#order-standard_cart .view-cart-items .btn-remove-from-cart:hover,
#order-standard_cart .view-cart-items .btn-remove-from-cart:focus {
    background: var(--danger-tint, rgba(248, 113, 113, 0.12));
    border-color: rgba(248, 113, 113, 0.35);
    color: var(--danger);
}

/* Credito por mejora: fila secundaria dentro de la misma tarjeta. */
#order-standard_cart .view-cart-items .row-upgrade-credit {
    border-top: 1px dashed var(--hairline);
    margin-top: 0.75rem;
    padding-top: 0.75rem;
}

#order-standard_cart .view-cart-items .upgrade-calc-msg {
    color: var(--text-tertiary);
    font-size: 0.75rem;
}

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

/* --- Boton «Vaciar carro» -------------------------------------------
   Salia como un bloque azul solido flotando encima de la ultima tarjeta.
   No era un fallo de este tema: es el diseño original del Standard Cart,
   que lo dibuja como una PESTAÑA colgando del borde inferior de la lista.

       #order-standard_cart .empty-cart {
           text-align: right;
           margin: -20px 20px 0 0;        <- lo sube 20px, sobre la lista
       }
       #order-standard_cart .empty-cart .btn {
           background-color: #058;        <- el azul
           color: #fff;
           border-radius: 0 0 4px 4px;    <- esquinas SOLO abajo
       }

   Tenia sentido con el markup de origen: `.view-cart-items` era una caja
   enmarcada con un borde inferior azul de 2px, y el boton encajaba en el
   como una lengüeta del mismo color. Al pasar los articulos a tarjetas
   sueltas (§ 12.a) ese marco desaparecio, asi que la lengüeta se quedo
   suelta -- un rectangulo azul de esquinas raras, solapando la tarjeta
   de arriba por los -20px y empujado a 20px del borde derecho.

   La version anterior de esta regla solo cambiaba `color` y
   `padding-left`, que era el arreglo de contraste de entonces; no tocaba
   ni el fondo, ni el radio, ni el margen negativo. Aqui se anulan los
   cuatro y el boton pasa a lo que es: una accion destructiva secundaria,
   discreta, alineada a la derecha y en rojo solo al apuntarla.
   -------------------------------------------------------------------- */
#order-standard_cart .empty-cart {
    display: flex;
    justify-content: flex-end;
    line-height: normal;
    margin: 0 0 1.25rem;        /* el base: -20px 20px 0 0 */
}

#order-standard_cart .empty-cart .btn {
    align-items: center;
    background-color: transparent;   /* el base: #058 */
    border: 1px solid transparent;
    border-radius: var(--radius);    /* el base: 0 0 4px 4px */
    color: var(--text-tertiary);
    display: inline-flex;
    font-size: 0.8125rem;
    font-weight: 600;
    gap: 0.5rem;
    justify-content: center;
    min-height: 36px;
    padding: 0 0.75rem;
    text-decoration: none;
    transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

#order-standard_cart .empty-cart .btn:hover,
#order-standard_cart .empty-cart .btn:focus {
    background-color: var(--danger-tint, rgba(248, 113, 113, 0.12));
    border-color: rgba(248, 113, 113, 0.35);
    color: var(--danger);
    text-decoration: none;
}

#order-standard_cart .empty-cart .btn i { font-size: 0.9375em; }

/* --- Movil ----------------------------------------------------------
   Con flex-wrap la tarjeta ya se reordena sola; aqui solo se ajusta el
   detalle. El precio deja de estar a la derecha del nombre y pasa a una
   linea propia separada por un filete, que es mas legible en 375px que
   dos bloques comprimidos uno al lado del otro.
   -------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    #order-standard_cart .view-cart-items .item { padding: 0.875rem; }

    #order-standard_cart .view-cart-items .item .item-price {
        border-top: 1px solid var(--hairline-soft);
        margin-left: 0;
        padding-top: 0.625rem;
        text-align: left;
        width: 100%;
    }

    #order-standard_cart .view-cart-items .item .item-price .cycle,
    #order-standard_cart .view-cart-items .item .item-price .renewal {
        display: inline-block;
        margin-left: 0.5rem;
    }

    /* Los articulos de renovacion y de mejora traen su boton de quitar en
       un `col-sm-1` SIN `d-none`, asi que en movil se ve (a diferencia de
       productos y dominios, que ocultan la columna y repiten el boton
       dentro del titulo). Se alinea a la derecha para que no quede
       colgando debajo del precio, pegado al borde izquierdo. */
    #order-standard_cart .view-cart-items .item > .row > .col-sm-1 {
        margin-left: auto;
    }
}

/* ---------------------------------------------------------------------
   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);
}


/* ---------------------------------------------------------------------
   12.d Botonera de cierre del sumario  (cart.php?a=view)
   ---------------------------------------------------------------------
   «Finalizar compra» y «Seguir comprando», al pie del panel de sumario.

   EL BOTON DE «SEGUIR COMPRANDO»

   Se veia mal por una razon muy concreta y facil de pasar por alto: el
   CSS base del carrito lo pinta por nombre, con un color literal:

       #order-standard_cart .order-summary .btn-continue-shopping {
           color: #222;
           font-size: 0.9em;
       }

   Ese `#222` es casi negro. El panel de sumario de este tema es
   `rgba(14, 14, 19, 0.94)`, o sea tambien casi negro: contraste ~1.3:1.
   El boton estaba ahi, ocupaba su sitio y se podia pulsar, pero no se
   leia -- de ahi el «se ve mal por alguna razon».

   No bastaba con quitarle `btn-link` en la plantilla (que tambien se
   hizo, ver viewcart.tpl): el color viene de esa regla, no de `btn-link`,
   y solo se puede pisar desde este archivo, que se carga despues.

   De paso los dos botones pasan a una columna a ancho completo. Antes
   era `<div class="text-right">` con un `<br />` en medio, que los
   dejaba de anchos distintos pegados al borde derecho.
   --------------------------------------------------------------------- */

#order-standard_cart .hex-cart-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* Primario: mismo lenguaje que el CTA del orderform (§ 09). El markup
   trae `btn-success`, que en este tema ya es el azul de acento. */
#order-standard_cart .hex-cart-actions .btn-checkout {
    align-items: center;
    border-radius: var(--radius);
    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;   /* el base pedia 15px 34px */
    width: 100%;
}

#order-standard_cart .hex-cart-actions .btn-checkout i {
    transition: transform var(--t-fast);
}

#order-standard_cart .hex-cart-actions .btn-checkout:hover i {
    transform: translateX(3px);
}

/* Carrito vacio: el enlace lleva `.disabled`, que en un <a> no impide el
   click por si solo. `pointer-events` lo remata. */
#order-standard_cart .hex-cart-actions .btn-checkout.disabled {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--hairline);
    color: var(--text-disabled);
    cursor: not-allowed;
    pointer-events: none;
}

/* Secundario: fantasma con borde fino. El `color` va con !important
   porque la regla del CSS base (`#order-standard_cart .order-summary
   .btn-continue-shopping`) es un id + dos clases y gana a esta, que es
   un id + una clase. Es el unico sitio del archivo donde hace falta. */
#order-standard_cart .hex-cart-actions .btn-continue-shopping,
#order-standard_cart .order-summary .btn-continue-shopping {
    align-items: center;
    background: transparent;
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius);
    color: var(--text-secondary) !important;
    display: flex;
    font-size: 0.8125rem;
    font-weight: 600;
    gap: 0.5rem;
    justify-content: center;
    min-height: var(--tap-target);
    padding: 0.5rem 1rem;
    text-decoration: none;
    transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
    width: 100%;
}

#order-standard_cart .hex-cart-actions .btn-continue-shopping:hover,
#order-standard_cart .order-summary .btn-continue-shopping:hover,
#order-standard_cart .hex-cart-actions .btn-continue-shopping:focus,
#order-standard_cart .order-summary .btn-continue-shopping:focus {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.26);
    color: var(--text) !important;
    text-decoration: none;
}

#order-standard_cart .hex-cart-actions .btn-continue-shopping i {
    font-size: 0.75em;
    transition: transform var(--t-fast);
}

#order-standard_cart .hex-cart-actions .btn-continue-shopping:hover i {
    transform: translateX(-3px);
}

/* Separador de los botones de pago express. El texto ya viene con los
   guiones puestos desde la plantilla («- O -»), asi que aqui solo se
   centra y se atenua; no se le añaden filetes con ::before/::after
   porque quedarian dos rayas ademas de los dos guiones. */
#order-standard_cart .express-checkout-buttons .separator {
    color: var(--text-tertiary);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin: 0.875rem 0;
    text-align: center;
}


/* =====================================================================
   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);
}


/* =====================================================================
   14. UTILIDADES DEL CARRITO
   ===================================================================== */

/* Campo de formulario que no se pide al cliente pero que sigue en el DOM.
   ---------------------------------------------------------------------
   La usa checkout.tpl sobre la COLUMNA del campo, nunca sobre el input.

   Por que no se borra el input directamente: StatesDropdown.js sustituye
   #state por un <select> segun el pais, y CartTotalUpdater.js recalcula
   los impuestos leyendo pais/estado/CP. Si esos campos desaparecen del
   HTML el JS se queda sin sus ganchos; ocultos siguen funcionando.

   `!important` porque ese mismo JS llama a .show() sobre algunos bloques
   al cambiar de pais, y .show() escribe un style inline.

   Duplicada a proposito en templates/hex-renamed/css/custom.css § 17: el
   theme y el order form se despliegan por separado (ver la nota de
   arquitectura al principio de este archivo). */
.hex-field-hidden { display: none !important; }


/* =====================================================================
   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; }
}


/* =====================================================================
   15. MOVIMIENTO DEL CARRITO
   ---------------------------------------------------------------------
   Gemela de la seccion 18 de templates/hex-renamed/css/custom.css. Se
   repite aqui, y no se importa, por la misma razon de siempre: el order
   form se carga con su propia cascada y este archivo tiene que valer por
   si solo (ver la nota de arquitectura al principio).

   Mismas tres reglas: nada por encima de 10px ni de 320ms, solo se
   animan `opacity` y `transform`, y todo lleva `animation-fill-mode:
   both` para que el estado final sea el visible aunque la animacion no
   llegue a correr.

   La preferencia de movimiento reducido ya esta cubierta por el bloque
   `prefers-reduced-motion` de la seccion 11, que fija
   `animation-duration: 0.01ms !important` para todo `#order-standard_cart`.
   ===================================================================== */

@keyframes hexCartRise {
    from { opacity: 0; transform: translate3d(0, 10px, 0); }
    to   { opacity: 1; transform: none; }
}

@keyframes hexCartFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes hexCartPop {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: none; }
}

/* --- Entrada de las piezas grandes --------------------------------- */
#order-standard_cart .cart-body > .header-lined,
#order-standard_cart .order-summary,
#order-standard_cart .view-cart-tabs,
#order-standard_cart .hex-product-hero {
    animation: hexCartRise 300ms ease-out both;
}

/* El sumario entra un pelo despues que la lista: se lee como
   consecuencia de ella, no como otro bloque mas. */
#order-standard_cart .order-summary { animation-delay: 60ms; }

/* --- Articulos del carrito -----------------------------------------
   Escalonado corto. El tope son seis: a partir de ahi el retardo
   acumulado se percibe como que la pagina va lenta. */
#order-standard_cart .view-cart-items .item {
    animation: hexCartRise 260ms ease-out both;
}

#order-standard_cart .view-cart-items .item:nth-child(1) { animation-delay: 0ms; }
#order-standard_cart .view-cart-items .item:nth-child(2) { animation-delay: 40ms; }
#order-standard_cart .view-cart-items .item:nth-child(3) { animation-delay: 80ms; }
#order-standard_cart .view-cart-items .item:nth-child(4) { animation-delay: 120ms; }
#order-standard_cart .view-cart-items .item:nth-child(5) { animation-delay: 160ms; }
#order-standard_cart .view-cart-items .item:nth-child(n+6) { animation-delay: 200ms; }

/* --- Cards del catalogo de productos -------------------------------- */
#order-standard_cart .hex-product-card {
    animation: hexCartRise 280ms ease-out both;
}

#order-standard_cart .hex-product-card:nth-child(1) { animation-delay: 30ms; }
#order-standard_cart .hex-product-card:nth-child(2) { animation-delay: 70ms; }
#order-standard_cart .hex-product-card:nth-child(3) { animation-delay: 110ms; }
#order-standard_cart .hex-product-card:nth-child(4) { animation-delay: 150ms; }
#order-standard_cart .hex-product-card:nth-child(n+5) { animation-delay: 190ms; }

/* --- Avisos y mensajes ---------------------------------------------- */
#order-standard_cart .alert,
#order-standard_cart .view-cart-promotion-code {
    animation: hexCartPop 220ms ease-out both;
}

/* --- Microinteracciones --------------------------------------------
   Los grupos de opciones del configurador y los metodos de pago ya
   tienen `transition` de color en sus secciones; aqui solo se añade el
   desplazamiento minimo que da sensacion de respuesta al puntero. */
#order-standard_cart .hex-choice,
#order-standard_cart .list-group-item {
    transition: background-color var(--t-fast), border-color var(--t-fast),
                color var(--t-fast), transform var(--t-fast);
}

#order-standard_cart .hex-choice:hover { transform: translateY(-1px); }

/* El sumario se recalcula por AJAX: cuando termina, el contenido nuevo
   aparece con una atenuacion corta en lugar de saltar. El id lo escribe
   el JS del carrito al ocultar el loader. */
#order-standard_cart #orderSummary .summary-container {
    animation: hexCartFade 200ms ease-out both;
}

/* --- Excepcion -----------------------------------------------------
   Los dos dialogos de confirmacion (#modalRemoveItem, #modalEmptyCart)
   ya traen la transicion de Bootstrap; encadenar dos da un rebote. */
.modal #order-standard_cart .item,
.modal .alert { animation: none; }