﻿/* =====================================================================
   KRONHOS E-COMMERCE - DARK TECH / OVERRIDES FINALES
   ---------------------------------------------------------------------
   Objetivo:
   - Mantener la paleta DARK real de Kronhos.
   - Corregir páginas históricas que todavía traen fondos claros inline.
   - Corregir ASPxGridView / editores DevExpress sin tocar otros temas.
   - Esta hoja se carga AL FINAL del <head> y SOLO actúa en dark-tech.
   ===================================================================== */

body.kr-ecommerce[data-ecommerce-theme="dark-tech"] {
    --kr-dark-page: #0F141A;
    --kr-dark-surface: #161D24;
    --kr-dark-surface-alt: #1C252E;
    --kr-dark-surface-muted: #222C36;
    --kr-dark-text: #D5DDE5;
    --kr-dark-heading: #F0F4F8;
    --kr-dark-muted: #A3AFBA;
    --kr-dark-border: #303B46;
    --kr-dark-border-control: #35414C;
    --kr-dark-hover: #1C3040;
    --kr-dark-selected: #203343;
    --kr-dark-selected-text: #F1F5F8;
    --kr-dark-accent: #67B5EA;
    --kr-dark-primary: #397FAF;
    --kr-dark-primary-hover: #245A7D;
    --kr-dark-input: #141B22;
    --kr-dark-input-text: #DDE5EC;

    background: var(--kr-dark-page) !important;
    color: var(--kr-dark-text) !important;
}

/* ---------------------------------------------------------------------
   1. BASE / TEXTO / PANELES HISTÓRICOS
   --------------------------------------------------------------------- */
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .divMaster,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .row,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .column1,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .column2,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .column3,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .contenedor,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .contenido,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .content {
    background-color: var(--kr-dark-page) !important;
    color: var(--kr-dark-text) !important;
}

body.kr-ecommerce[data-ecommerce-theme="dark-tech"] h1,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] h2,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] h3,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] h4,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] h5,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] h6,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .ttitulo,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .titulo,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .titulo1,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .titulo2,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .kr-category-title,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .kr-content-title {
    color: var(--kr-dark-heading) !important;
}

/* Muchos formularios viejos usan .border como panel blanco. */
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .border,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .cinc .border,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .panel,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .panel-body,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .well,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .card {
    background: var(--kr-dark-surface) !important;
    color: var(--kr-dark-text) !important;
    border-color: var(--kr-dark-border) !important;
    box-shadow: none !important;
}

body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .border *,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .cinc .border * {
    border-color: var(--kr-dark-border) !important;
}

body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .border label,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .border span,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .border p,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .border td,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .border th {
    color: var(--kr-dark-text) !important;
}

/* Neutraliza fondos claros escritos directamente en páginas antiguas. */
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] div[style*="background-color: white" i],
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] div[style*="background-color:white" i],
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] div[style*="background-color: whitesmoke" i],
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] div[style*="background-color:whitesmoke" i],
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] td[style*="background-color: white" i],
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] td[style*="background-color:white" i],
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] table[style*="background-color: white" i],
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] table[style*="background-color:white" i] {
    background-color: var(--kr-dark-surface) !important;
    color: var(--kr-dark-text) !important;
}

/* ---------------------------------------------------------------------
   2. LOGIN
   --------------------------------------------------------------------- */
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .cinc {
    color: var(--kr-dark-text) !important;
}

body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .cinc .border {
    padding: 18px !important;
    border: 1px solid var(--kr-dark-border) !important;
    border-radius: 10px !important;
}

body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .cinc input[type="text"],
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .cinc input[type="password"] {
    background: var(--kr-dark-input) !important;
    color: var(--kr-dark-input-text) !important;
    border: 1px solid var(--kr-dark-border-control) !important;
}

body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .cinc input[type="text"]:focus,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .cinc input[type="password"]:focus {
    border-color: var(--kr-dark-accent) !important;
    box-shadow: 0 0 0 3px rgba(103,181,234,.18) !important;
    outline: 0 !important;
}

body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .cinc input[type="checkbox"] + label,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .cinc label {
    color: var(--kr-dark-text) !important;
}

/* ---------------------------------------------------------------------
   3. BOTONES Y OPCIONES GENERALES
   --------------------------------------------------------------------- */
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] input[type="submit"],
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] input[type="button"],
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] button,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .btn,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .botonAdd,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .botonMe,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .botonMeB {
    background: var(--kr-dark-primary) !important;
    color: #FFFFFF !important;
    border-color: var(--kr-dark-primary) !important;
    box-shadow: none !important;
}

body.kr-ecommerce[data-ecommerce-theme="dark-tech"] input[type="submit"]:hover,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] input[type="button"]:hover,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] button:hover,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .btn:hover,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .botonAdd:hover,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .botonMe:hover,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .botonMeB:hover {
    background: var(--kr-dark-primary-hover) !important;
    border-color: var(--kr-dark-accent) !important;
}

/* Tarjetas de "Opciones generales": no usar bloques azul claro. */
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .cajainfcont {
    /*background: transparent !important;*/
    border-color: var(--kr-dark-border) !important;
}

body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .cajasinf,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .cajasinf > a,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .cajasinf > span {
    background: var(--kr-dark-surface-alt) !important;
    color: var(--kr-dark-heading) !important;
    border-color: var(--kr-dark-border) !important;
    box-shadow: none !important;
}

body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .cajasinf:hover,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .cajasinf:hover > a {
    background: var(--kr-dark-selected) !important;
    color: var(--kr-dark-selected-text) !important;
}

body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .txtcajasinf,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .cajasinf a {
    color: var(--kr-dark-heading) !important;
}

/* ---------------------------------------------------------------------
   4. DEVEXPRESS ASPxGRIDVIEW / EDITORES
   Corrige toolbar, buscador, filtros, cabecera, filas y área vacía blanca.
   --------------------------------------------------------------------- */
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxgvControl"],
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxgvTable"],
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxgvCSD"],
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxgvHSDC"],
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxgvVSDC"],
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxgvFSDC"],
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxgvGroupPanel"],
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxgvSearchPanel"],
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxgvStatusBar"],
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxgvFooter"],
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxgvPagerTopPanel"],
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxgvPagerBottomPanel"] {
    background: var(--kr-dark-surface) !important;
    background-image: none !important;
    color: var(--kr-dark-text) !important;
    border-color: var(--kr-dark-border) !important;
    box-shadow: none !important;
}

body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxgvHeader"],
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxgvHeader"] > td,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxgvGroupRow"],
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxgvGroupRow"] > td {
    background: var(--kr-dark-surface-alt) !important;
    background-image: none !important;
    color: var(--kr-dark-heading) !important;
    border-color: var(--kr-dark-border) !important;
    text-shadow: none !important;
}

body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxgvHeader"] a,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxgvHeader"] span {
    color: var(--kr-dark-heading) !important;
}

body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxgvDataRow"] > td,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxgvAltRow"] > td,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxgvFilterRow"] > td,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxgvEmptyDataRow"] > td,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxgvDetailRow"] > td,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxgvPreviewRow"] > td {
    background: var(--kr-dark-surface) !important;
    color: var(--kr-dark-text) !important;
    border-color: var(--kr-dark-border) !important;
}

body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxgvAltRow"] > td {
    background: var(--kr-dark-surface-alt) !important;
}

body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxgvDataRow"]:hover > td,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxgvAltRow"]:hover > td {
    background: var(--kr-dark-hover) !important;
    color: var(--kr-dark-heading) !important;
}

body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxgvSelectedRow"] > td,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxgvFocusedRow"] > td,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxgvFocusedRow"] [class*="dxgv"] {
    background: var(--kr-dark-selected) !important;
    color: var(--kr-dark-selected-text) !important;
    border-color: var(--kr-dark-border) !important;
}

body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxgv"] a {
    color: var(--kr-dark-accent) !important;
}

/* Editores DevExpress: search panel y fila de filtros. */
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxeTextBox"],
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxeButtonEdit"],
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxeMemo"],
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxeDropDownWindow"],
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxeListBox"] {
    background: var(--kr-dark-input) !important;
    background-image: none !important;
    color: var(--kr-dark-input-text) !important;
    border-color: var(--kr-dark-border-control) !important;
    box-shadow: none !important;
}

body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxeEditArea"],
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxeEditArea"] input,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxeTextBox"] input,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxeButtonEdit"] input {
    background: var(--kr-dark-input) !important;
    color: var(--kr-dark-input-text) !important;
}

/* Toolbar DevExpress (PDF / XLSX / CSV). */
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxmLite"],
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxm-main"],
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxm-horizontal"],
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxm-content"],
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxm-item"] {
    background: var(--kr-dark-surface) !important;
    background-image: none !important;
    color: var(--kr-dark-text) !important;
    border-color: var(--kr-dark-border) !important;
    box-shadow: none !important;
}

body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxm-item"]:hover,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxm-hovered"] {
    background: var(--kr-dark-hover) !important;
    color: var(--kr-dark-heading) !important;
}

body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxm"] a,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxm"] span {
    color: var(--kr-dark-text) !important;
}

/* Paginador DevExpress. */
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxpLite"] {
    background: transparent !important;
    color: var(--kr-dark-text) !important;
}

body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxpLite"] a,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxpLite"] span {
    color: var(--kr-dark-text) !important;
}

body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="dxpLite"] [class*="dxpCurrentPageNumber"] {
    background: var(--kr-dark-primary) !important;
    color: #FFFFFF !important;
    border-color: var(--kr-dark-primary) !important;
}

/* ---------------------------------------------------------------------
   5. GRIDVIEW CLÁSICO / TABLAS AUXILIARES
   --------------------------------------------------------------------- */
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .gridview,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .gridview tbody,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .gridview tr,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .gridview td {
    background: var(--kr-dark-surface) !important;
    color: var(--kr-dark-text) !important;
    border-color: var(--kr-dark-border) !important;
}

body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .gridview th {
    background: var(--kr-dark-surface-alt) !important;
    color: var(--kr-dark-heading) !important;
    border-color: var(--kr-dark-border) !important;
}

body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .gridview tr:hover td {
    background: var(--kr-dark-hover) !important;
}

/* ---------------------------------------------------------------------
   6. DETALLE DE PEDIDO / BLOQUES DE DATOS
   --------------------------------------------------------------------- */
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .DatosEntregaCab,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .DatosEntregaCue,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="DatosEntrega"],
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="datosEntrega"],
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="datosfact" i],
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [class*="notas" i] {
    color: var(--kr-dark-text) !important;
}

/* Si una tarjeta de datos llega con fondo claro inline, oscurecer también texto interno. */
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] div[style*="background-color: white" i] *,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] div[style*="background-color:white" i] *,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] div[style*="background-color: whitesmoke" i] *,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] div[style*="background-color:whitesmoke" i] * {
    color: var(--kr-dark-text) !important;
    border-color: var(--kr-dark-border) !important;
}

/* ---------------------------------------------------------------------
   7. AUTOCOMPLETE DEL BUSCADOR
   Más específico que los estilos históricos de Cats.Master.
   --------------------------------------------------------------------- */
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .completionList,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] div.completionList {
    background: var(--kr-dark-surface) !important;
    color: var(--kr-dark-text) !important;
    border: 1px solid var(--kr-dark-border-control) !important;
}

body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .completionList .listItem,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .completionList .itemHighlighted,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .completionList > div,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .completionList > li {
    background: var(--kr-dark-surface) !important;
    color: var(--kr-dark-text) !important;
    border-color: var(--kr-dark-border) !important;
}

body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .completionList .itemHighlighted,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .completionList > div:hover,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .completionList > li:hover {
    background: var(--kr-dark-selected) !important;
    color: var(--kr-dark-selected-text) !important;
}

body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .completionList * {
    border-color: var(--kr-dark-border) !important;
}

/* ---------------------------------------------------------------------
   8. LOADER / FOOTER
   --------------------------------------------------------------------- */
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .loader-wrapper,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .loader,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .loader-inner {
    background: var(--kr-dark-page) !important;
    border-color: var(--kr-dark-page) !important;
}

body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .pieDir {
    background: var(--kr-dark-surface-alt) !important;
    color: var(--kr-dark-muted) !important;
    border-color: var(--kr-dark-border) !important;
}

/* Mantener separación vertical del catálogo. */
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .pr_contenedor,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .kr-product-card {
    margin-bottom: 18px !important;
}

/* Pager clásico centrado. */
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .kr-pager-wrap {
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ---------------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------------- */
@media (max-width: 760px) {
    body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .cinc .border {
        padding: 14px !important;
    }
}

/* =====================================================================
   9. PAGINAS CLIENTE: CMenuCliente.aspx / CDetalles.aspx
   Ajustes específicos Dark Tech. No afectan otros temas.
   ===================================================================== */

/* ---------- CMenuCliente.aspx ---------- */
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .kr-client-menu-page {
    padding: 6px 0 26px;
    color: var(--kr-dark-text) !important;
}

body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .kr-client-menu-page .kr-client-menu-title {
    clear: both;
    margin: 0 0 16px !important;
    padding: 12px 0 8px !important;
    line-height: 1.25 !important;
    color: var(--kr-dark-heading) !important;
    border-bottom: 1px solid var(--kr-dark-border) !important;
}

body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .kr-client-menu-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 14px;
    margin: 0 auto 26px;
    padding: 0 12px;
}

body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .kr-client-menu-action {
    display: flex !important;
    flex: 0 1 280px;
    min-width: 240px;
    max-width: 320px;
}

body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .kr-client-menu-action > a.botonMe {
    display: flex !important;
    width: 100%;
    color: var(--kr-dark-heading) !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 600;
}

body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .kr-client-menu-page .botonMeB {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    min-height: 118px;
    height: auto !important;
    margin: 0 !important;
    padding: 18px 16px !important;
    box-sizing: border-box;
    background: var(--kr-dark-surface) !important;
    color: var(--kr-dark-heading) !important;
    border: 1px solid var(--kr-dark-border) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .kr-client-menu-page .botonMeB:hover {
    background: var(--kr-dark-hover) !important;
    color: var(--kr-dark-heading) !important;
    border-color: var(--kr-dark-selected-accent, var(--kr-dark-accent)) !important;
    box-shadow: inset 3px 0 0 var(--kr-dark-accent) !important;
    opacity: 1 !important;
}

body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .kr-client-menu-page .botonMeB [class^="icon-"],
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .kr-client-menu-page .botonMeB [class*=" icon-"] {
    margin-bottom: 9px;
    color: var(--kr-dark-accent) !important;
}

/* ASPxButton Administrador: quitar fondo blanco/skin heredado. */
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [id$="btShowModal"],
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [id$="btShowModal"] table,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [id$="btShowModal"] td,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [id$="btShowModal"] div {
    background: var(--kr-dark-surface) !important;
    background-image: none !important;
    color: var(--kr-dark-heading) !important;
    border-color: var(--kr-dark-border) !important;
    box-shadow: none !important;
}

body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [id$="btShowModal"]:hover,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [id$="btShowModal"]:hover table,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] [id$="btShowModal"]:hover td {
    background: var(--kr-dark-hover) !important;
    border-color: var(--kr-dark-accent) !important;
}

/* ---------- CDetalles.aspx ---------- */
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .kr-order-detail-page {
    padding: 0 18px 28px;
    box-sizing: border-box;
    color: var(--kr-dark-text) !important;
}

body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .kr-order-detail-title {
    color: var(--kr-dark-heading) !important;
    border-bottom: 1px solid var(--kr-dark-border) !important;
    padding-bottom: 10px !important;
}

body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .kr-order-summary {
    padding: 22px 0 18px !important;
    color: var(--kr-dark-heading) !important;
}

body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .kr-order-info {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 22px;
    margin: 0 0 22px;
}

body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .kr-order-info .c1,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .kr-order-info .c2,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .kr-order-card {
    float: none !important;
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 20px !important;
    box-sizing: border-box;
    background: var(--kr-dark-surface) !important;
    color: var(--kr-dark-text) !important;
    border: 1px solid var(--kr-dark-border) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .kr-order-card .tit2,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .kr-order-card p,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .kr-order-card span,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .kr-order-card label {
    color: var(--kr-dark-text) !important;
}

body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .kr-order-card .tit2 {
    margin: 0 0 12px !important;
    color: var(--kr-dark-heading) !important;
    font-weight: 600 !important;
}

body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .kr-order-products {
    margin-top: 8px;
}

body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .kr-order-products-title {
    margin: 0 0 10px !important;
    padding: 10px 0 !important;
    color: var(--kr-dark-heading) !important;
    border-bottom: 1px solid var(--kr-dark-border) !important;
}

/* El grid de detalle debe ocupar la superficie oscura completa. */
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .kr-order-products [class*="dxgvControl"],
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .kr-order-products [class*="dxgvTable"],
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .kr-order-products [class*="dxgvCSD"],
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .kr-order-products [class*="dxgvFooter"] {
    background: var(--kr-dark-surface) !important;
    color: var(--kr-dark-text) !important;
    border-color: var(--kr-dark-border) !important;
}

@media (max-width: 760px) {
    body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .kr-client-menu-actions {
        display: grid;
        grid-template-columns: 1fr;
        padding: 0;
    }

    body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .kr-client-menu-action {
        min-width: 0;
        max-width: none;
    }

    body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .kr-order-detail-page {
        padding-left: 10px;
        padding-right: 10px;
    }

    body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .kr-order-info {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}


/* FASE 5: contraste final de contenido historico en Dark Tech */
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .kr-product-meta,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .precio_c > div > div,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .kr-add-row,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .pieDir,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .pieDir *,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .cajainfcont,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .cajainfcont * {
    opacity: 1 !important;
}

body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .precio_c > div > div,
body.kr-ecommerce[data-ecommerce-theme="dark-tech"] .kr-product-meta {
    color: var(--kr-ecom-muted) !important;
}
