/* ============================================================================
   XtreamCast — Panel de clientes
   ----------------------------------------------------------------------------
   Capa de marca del panel, en modo oscuro:
   - Topbar en pildora flotante con efecto vidrio
   - Rail de navegacion por iconos (flyouts en hover, drawer en movil)
   - Contenido en columna central, minimalista

   Se carga al final de la cascada, despues de las hojas del tema base.

   Indice:
     01. Fuentes            08. Dashboard (saludo, tiles, paneles)
     02. Design tokens      09. Botones
     03. Base y layout      10. Formularios (+ editor tickets, adjuntos)
     04. Topbar pildora     11. Tablas y DataTables
     05. Sidenav rail       12. Etiquetas de estado
     06. Sidebars WHMCS     13. Alertas y badges
     07. Cards y paneles    14. Dropdowns, popovers, tooltips
     15. Modales            19. Paginas especificas y carrito
     16. Paginacion y tabs  20. Overlay y utilidades
     17. Footer             21. Responsive
     18. Login              22. Accesibilidad e impresion
   ============================================================================ */

/* ============================================================================
   01. FUENTES — mismas variable fonts self-hosted del sitio publico
   ============================================================================ */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('../fonts/outfit-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================================
   02. DESIGN TOKENS — identicos a global.css de xtreamcast.co
   ============================================================================ */

:root {
  --xc-background: #16181c;
  --xc-background-elevated: #1b1e23;
  --xc-surface: #21242a;
  --xc-surface-2: #262a31;
  --xc-surface-3: #2d313a;

  --xc-accent: #ff2b76;
  --xc-accent-hover: #ff3d83;
  --xc-accent-dark: #d91a5f;
  --xc-accent-soft: rgba(255, 43, 118, 0.12);
  --xc-accent-softer: rgba(255, 43, 118, 0.06);
  --xc-accent-border: rgba(255, 43, 118, 0.28);

  --xc-text: #ffffff;
  --xc-text-secondary: rgba(255, 255, 255, 0.72);
  --xc-text-muted: rgba(255, 255, 255, 0.55);
  --xc-text-subtle: rgba(255, 255, 255, 0.38);

  --xc-border: rgba(255, 255, 255, 0.08);
  --xc-border-strong: rgba(255, 255, 255, 0.14);
  --xc-border-light: rgba(255, 255, 255, 0.05);

  --xc-success: #2ecc71;
  --xc-success-soft: rgba(46, 204, 113, 0.12);
  --xc-success-border: rgba(46, 204, 113, 0.28);
  --xc-warning: #ffaa00;
  --xc-warning-soft: rgba(255, 170, 0, 0.12);
  --xc-warning-border: rgba(255, 170, 0, 0.28);
  --xc-danger: #ff4757;
  --xc-danger-soft: rgba(255, 71, 87, 0.1);
  --xc-danger-border: rgba(255, 71, 87, 0.25);
  --xc-danger-text: #ff8d8d;
  --xc-info: #4aa3ff;
  --xc-info-soft: rgba(74, 163, 255, 0.12);
  --xc-info-border: rgba(74, 163, 255, 0.28);
  --xc-focus-ring: #ef426f;

  --xc-font-display: 'Outfit', system-ui, -apple-system, sans-serif;
  --xc-font-body: 'Inter', system-ui, -apple-system, sans-serif;

  --xc-radius-sm: 0.375rem;
  --xc-radius-md: 0.5rem;
  --xc-radius-lg: 0.75rem;
  --xc-radius-xl: 1rem;
  --xc-radius-2xl: 1.25rem;
  --xc-radius-full: 999px;

  --xc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --xc-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.35);
  --xc-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
  --xc-shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.5);
  --xc-shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 24px rgba(0, 0, 0, 0.35);

  --xc-glass-bg: rgba(22, 24, 28, 0.55);
  --xc-glass-bg-strong: rgba(22, 24, 28, 0.92);
  --xc-glass-blur: saturate(160%) blur(32px);
  --xc-glass-blur-strong: saturate(180%) blur(64px);
  --xc-glass-border: 1px solid rgba(255, 255, 255, 0.08);

  --xc-gradient-hairline: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.14) 50%, transparent 100%);

  --xc-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --xc-transition-fast: 160ms var(--xc-ease-out);
  --xc-transition-base: 280ms var(--xc-ease-out);

  --xc-btn-primary-bg: #d91a5f;
  --xc-btn-primary-bg-hover: rgba(217, 26, 95, 0.68);
  --xc-btn-primary-bg-active: rgba(217, 26, 95, 0.55);
  --xc-btn-primary-border: rgba(255, 255, 255, 0.2);
  --xc-btn-primary-border-hover: rgba(255, 255, 255, 0.32);
  --xc-btn-primary-border-active: rgba(255, 255, 255, 0.14);
  --xc-btn-primary-blur: saturate(180%) blur(28px);
  --xc-btn-primary-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
  --xc-btn-primary-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.26);
  --xc-btn-primary-shadow-active: 0 2px 12px rgba(0, 0, 0, 0.2);

  /* Alturas del layout fijo */
  --xc-topbar-offset: 92px;

  /* Puentea las custom properties de Bootstrap 4 hacia la marca */
  --primary: #ff2b76;
  --secondary: #262a31;
  --success: #2ecc71;
  --info: #4aa3ff;
  --warning: #ffaa00;
  --danger: #ff4757;
  --light: #262a31;
  --dark: #16181c;
  --font-family-sans-serif: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ============================================================================
   03. BASE Y LAYOUT
   ============================================================================ */

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body,
body.primary-bg-color {
  background-color: var(--xc-background);
  color: var(--xc-text-secondary);
  font-family: var(--xc-font-body);
  font-size: 0.9375rem;
  line-height: 1.6;
  padding-top: var(--xc-topbar-offset); /* espacio del header pildora fijo */
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--xc-font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--xc-text);
}

a {
  color: var(--xc-accent);
  transition: color var(--xc-transition-fast);
}

a:hover {
  color: var(--xc-accent-hover);
  text-decoration: none;
}

strong, b {
  color: var(--xc-text);
  font-weight: 600;
}

hr {
  border-top-color: var(--xc-border);
}

.text-muted { color: var(--xc-text-muted) !important; }
.text-dark { color: var(--xc-text) !important; }
.text-primary { color: var(--xc-accent) !important; }
.text-success { color: var(--xc-success) !important; }
.text-danger { color: var(--xc-danger) !important; }
.text-warning { color: var(--xc-warning) !important; }
.text-info { color: var(--xc-info) !important; }
.bg-light { background-color: var(--xc-surface) !important; }
.bg-white { background-color: var(--xc-surface) !important; }

.border,
.border-top,
.border-right,
.border-bottom,
.border-left {
  border-color: var(--xc-border) !important;
}

::selection {
  background: rgba(255, 43, 118, 0.35);
  color: #ffffff;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--xc-background); }
::-webkit-scrollbar-thumb { background: var(--xc-surface-3); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: var(--xc-border-strong); }

:focus-visible {
  outline: 2px solid var(--xc-accent);
  outline-offset: 2px;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none; /* los inputs usan ring por box-shadow (seccion 10) */
}

/* Contenido en columna central, mas angosta que Bootstrap por defecto */
#main-body {
  padding: 0.5rem 0 3.5rem;
}

#main-body > .container {
  max-width: 1080px;
}

/* El dashboard es aun mas angosto, tipo app */
body.page-clientareahome #main-body > .container,
body.page-homepage #main-body > .container {
  max-width: 860px;
}

/* Breadcrumb: no aporta en el diseno minimalista */
.master-breadcrumb {
  display: none;
}

/* Offset del rail de navegacion en desktop (el rail es el unico menu,
   visible tambien para visitantes) */
@media (min-width: 992px) {
  .xc-main {
    margin-left: 92px;
  }
}

/* Ocultar secciones que no se usan (Anuncios, Descargas, Estado de la Red)
   en sidebars, paneles del home y cualquier menu dinamico de WHMCS */
[menuitemname="Announcements"],
[menuitemname="Downloads"],
[menuitemname="Network Status"],
[menuitemname="Server Status"],
div[menuitemname="Recent News"] {
  display: none !important;
}

/* Dashboard sin sidebar derecha (Su Informacion / Contactos / Accesos
   Directos no aportan): contenido a ancho completo centrado */
body.page-clientareahome .xc-page-sidebar {
  display: none;
}

body.page-clientareahome .primary-content {
  flex: 0 0 100%;
  max-width: 100%;
}

/* ============================================================================
   04. TOPBAR — pildora flotante glassmorphism (patron de xtreamcast.co)
   ============================================================================ */

/* El header ya NO es un contenedor: logo suelto en la esquina superior
   izquierda y acciones/cuenta en la derecha. Al hacer
   scroll aparece una franja glass de ancho completo para legibilidad. */
header.header,
.xc-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 400;
  padding: 14px 0;
  background-color: transparent;
  border: 0;
  pointer-events: none;
  transition: padding var(--xc-transition-base);
}

/* Franja glass solo con scroll (blur en el ::before para no romper el
   blur propio de los dropdowns hijos — truco del Header.astro del sitio) */
.xc-topbar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--xc-glass-bg);
  -webkit-backdrop-filter: var(--xc-glass-blur);
  backdrop-filter: var(--xc-glass-blur);
  border-bottom: 1px solid var(--xc-border-light);
  opacity: 0;
  transition: opacity var(--xc-transition-base);
  pointer-events: none;
}

.xc-topbar.scrolled {
  padding: 10px 0;
}

.xc-topbar.scrolled::before {
  opacity: 1;
}

.xc-topbar-inner {
  position: relative;
  width: 100%;
  padding: 0 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
}

.xc-brand .logo-img,
header.header .logo-img {
  height: 40px;
  width: auto;
  max-width: none;
  max-height: none;
  transition: height var(--xc-transition-base);
}

.xc-topbar.scrolled .xc-brand .logo-img {
  height: 34px;
}

.xc-topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Pildoras del topbar */
.xc-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.1rem;
  border-radius: var(--xc-radius-full);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color var(--xc-transition-fast), border-color var(--xc-transition-fast), color var(--xc-transition-fast);
}

.xc-pill-outline {
  border: 1px solid var(--xc-accent-border);
  color: var(--xc-text);
  background-color: transparent;
}

.xc-pill-outline:hover {
  background-color: var(--xc-accent-softer);
  border-color: var(--xc-accent);
  color: var(--xc-text);
}

.xc-pill-solid {
  background: var(--xc-btn-primary-bg);
  border: 1px solid var(--xc-btn-primary-border);
  color: #ffffff;
}

.xc-pill-solid:hover {
  background: var(--xc-btn-primary-bg-hover);
  border-color: var(--xc-btn-primary-border-hover);
  color: #ffffff;
}

/* Punto rojo animado (como "VER TV" de la referencia) */
.xc-dot {
  width: 6px;
  height: 6px;
  min-width: 6px;
  border-radius: 50%;
  background: var(--xc-accent);
  animation: xcDotBlink 1.6s ease-in-out infinite;
}

@keyframes xcDotBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* Botones de icono (carrito, notificaciones, hamburguesa) */
.xc-icon-btn {
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid transparent;
  color: var(--xc-text-secondary);
  font-size: 0.95rem;
  transition: background-color var(--xc-transition-fast), color var(--xc-transition-fast);
}

.xc-icon-btn:hover {
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--xc-text);
}

/* Contador: punto pequeno en la esquina, fuera del dibujo del icono */
.xc-icon-btn .badge {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-family: var(--xc-font-body);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  border-radius: var(--xc-radius-full);
  background-color: var(--xc-accent) !important;
  color: #ffffff;
}

/* Avatar con inicial */
.xc-avatar {
  width: 38px;
  height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--xc-accent-dark);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  font-family: var(--xc-font-display);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  transition: box-shadow var(--xc-transition-fast), transform var(--xc-transition-fast);
}

.xc-avatar:hover {
  color: #ffffff;
  box-shadow: 0 0 0 3px var(--xc-accent-soft);
}

.xc-account .dropdown-menu {
  margin-top: 10px;
  min-width: 230px;
}

/* Volver al admin (masquerade): version compacta dentro del topbar,
   neutralizando el fixed+rotate del tema base */
.xc-topbar .btn-return-to-admin {
  position: static !important;
  transform: none !important;
  top: auto !important;
  right: auto !important;
  padding: 0.4rem 0.9rem !important;
  border-radius: var(--xc-radius-full) !important;
  background-color: var(--xc-surface-3) !important;
  color: var(--xc-text-secondary) !important;
  font-size: 0.8rem !important;
}

.xc-topbar .btn-return-to-admin:hover {
  color: var(--xc-text) !important;
}

/* ============================================================================
   05. SIDENAV — rail de iconos en vidrio, flyouts en hover, drawer en movil
   ============================================================================ */

.xc-sidenav {
  position: fixed;
  left: 14px;
  top: var(--xc-topbar-offset);
  bottom: 20px;
  width: 64px;
  z-index: 380;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: var(--xc-glass-border);
  border-radius: 22px;
  box-shadow: var(--xc-shadow-lg);
}

.xc-sidenav::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(22, 24, 28, 0.6);
  -webkit-backdrop-filter: var(--xc-glass-blur);
  backdrop-filter: var(--xc-glass-blur);
  pointer-events: none;
}

.xc-sidenav-list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.xc-sidenav-item {
  position: relative;
  width: 44px;
}

.xc-sidenav-item > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--xc-text-muted);
  font-size: 1rem;
  transition: background-color var(--xc-transition-fast), color var(--xc-transition-fast);
}

.xc-sidenav-item > a:hover {
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--xc-text);
}

.xc-sidenav-item.active > a {
  color: var(--xc-accent);
  background-color: var(--xc-accent-softer);
}

.xc-sidenav-label {
  display: none;
}

/* Cabecera del drawer y caret del acordeon: solo existen en movil (el rail
   de desktop es de iconos y sus submenus se abren al hover) */
.xc-sidenav-head,
.xc-sidenav-caret {
  display: none;
}

/* Tooltip en desktop para los items SIN submenu: la etiqueta existente se
   muestra como chip flotante al hover (los items con flyout ya revelan su
   contenido, no necesitan tooltip) */
@media (min-width: 992px) {
  .xc-sidenav-item:not(.has-children) {
    position: relative;
  }

  .xc-sidenav-item:not(.has-children) .xc-sidenav-label {
    display: block;
    position: absolute;
    left: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    background-color: var(--xc-surface-2);
    border: 1px solid var(--xc-border-strong);
    border-radius: 10px;
    padding: 0.4rem 0.8rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--xc-text);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    transition: opacity 160ms var(--xc-ease-out), transform 160ms var(--xc-ease-out), visibility 160ms;
    z-index: 500;
  }

  .xc-sidenav-item:not(.has-children) > a:hover .xc-sidenav-label,
  .xc-sidenav-item:not(.has-children) > a:focus-visible .xc-sidenav-label {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
  }
}

/* Flyout con las opciones del item (labels visibles al hacer hover) */
.xc-sidenav-flyout {
  position: absolute;
  left: 56px;
  top: 0;
  min-width: 230px;
  list-style: none;
  margin: 0;
  padding: 0.5rem;
  background: var(--xc-glass-bg-strong);
  -webkit-backdrop-filter: var(--xc-glass-blur);
  backdrop-filter: var(--xc-glass-blur);
  border: var(--xc-glass-border);
  border-radius: var(--xc-radius-lg);
  box-shadow: var(--xc-shadow-xl);
  opacity: 0;
  visibility: hidden;
  transform: translateX(6px);
  transition: opacity var(--xc-transition-fast), visibility var(--xc-transition-fast), transform var(--xc-transition-fast);
  z-index: 410;
}

.xc-sidenav-item:hover .xc-sidenav-flyout,
.xc-sidenav-item:focus-within .xc-sidenav-flyout {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.xc-sidenav-flyout-title {
  padding: 0.4rem 0.85rem 0.3rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--xc-text-subtle);
}

.xc-sidenav-flyout-divider {
  height: 1px;
  margin: 0.35rem 0.5rem;
  background: var(--xc-border);
}

.xc-sidenav-flyout li a {
  display: block;
  padding: 0.55rem 0.85rem;
  border-radius: var(--xc-radius-md);
  color: var(--xc-text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color var(--xc-transition-fast), color var(--xc-transition-fast);
}

.xc-sidenav-flyout li a:hover {
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--xc-text);
}

.xc-sidenav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 440;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--xc-transition-base), visibility var(--xc-transition-base);
}

.xc-sidenav-backdrop.show {
  opacity: 1;
  visibility: visible;
}

/* ----------------------------------------------------------------------------
   Drawer movil: panel solido de tres zonas — cabecera fija (logo + cerrar),
   lista con scroll propio y acciones ancladas abajo. El scroll vive en la
   lista y NO en el panel: el fondo del rail es un ::before absoluto, que en un
   contenedor scrolleable solo cubre la primera pantalla (dejaba el menu medio
   transparente al bajar). En movil ese ::before se apaga y el fondo va sobre
   el propio panel.
   ---------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .xc-sidenav {
    left: 0;
    top: 0;
    bottom: 0;
    width: min(86vw, 320px);
    height: 100%;
    border: 0;
    border-right: 1px solid var(--xc-border);
    border-radius: 0;
    justify-content: flex-start;
    background: var(--xc-background-elevated);
    box-shadow: 0 0 48px rgba(0, 0, 0, 0.55);
    padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
    overflow: hidden;
    transform: translateX(-102%);
    transition: transform var(--xc-transition-base);
    z-index: 450;
  }

  .xc-sidenav::before {
    display: none;
  }

  .xc-sidenav.open {
    transform: none;
  }

  /* Cabecera: el topbar queda debajo del panel, asi que el drawer lleva su
     propio logo y su boton de cerrar */
  .xc-sidenav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex: 0 0 auto;
    padding: 0.85rem 0.75rem 0.85rem 1rem;
    border-bottom: 1px solid var(--xc-border);
  }

  .xc-sidenav-brand {
    display: inline-flex;
    align-items: center;
  }

  .xc-sidenav-brand img {
    height: 30px;
    width: auto;
  }

  .xc-sidenav-close {
    flex: 0 0 auto;
  }

  /* Unica zona con scroll; el rebote no se propaga a la pagina de atras */
  .xc-sidenav-list {
    flex: 1 1 auto;
    align-items: stretch;
    gap: 2px;
    padding: 0.6rem 0.6rem 1rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Acciones (soporte / sesion) ancladas abajo, separadas por una linea */
  .xc-sidenav-bottom {
    flex: 0 0 auto;
    overflow: visible;
    padding: 0.6rem;
    border-top: 1px solid var(--xc-border);
  }

  /* La fila es flex: enlace + caret; el submenu ocupa el ancho completo */
  .xc-sidenav-item {
    width: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  /* Altura minima (no fija): las etiquetas largas — "Tutoriales de
     Configuracion" — se desbordaban de la caja de 44px */
  .xc-sidenav-item > a {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 46px;
    justify-content: flex-start;
    gap: 12px;
    padding: 0.5rem 0.85rem;
    color: var(--xc-text-secondary);
  }

  .xc-sidenav-item > a:active {
    background-color: var(--xc-surface-2);
  }

  .xc-sidenav-icon {
    flex: 0 0 auto;
    font-size: 1.05rem;
  }

  .xc-sidenav-label {
    display: inline;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.35;
  }

  .xc-sidenav-caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 12px;
    color: var(--xc-text-muted);
    font-size: 0.8rem;
    transition: background-color var(--xc-transition-fast), color var(--xc-transition-fast);
  }

  .xc-sidenav-caret:active {
    background-color: var(--xc-surface-2);
    color: var(--xc-text);
  }

  .xc-sidenav-caret i {
    transition: transform var(--xc-transition-fast);
  }

  .xc-sidenav-item.open > .xc-sidenav-caret {
    color: var(--xc-text);
  }

  .xc-sidenav-item.open > .xc-sidenav-caret i {
    transform: rotate(180deg);
  }

  /* Submenu como acordeon: colapsado por defecto, con guia vertical para que
     se lea como subnivel y no como items de primer orden. La altura exacta la
     pone el JS (scrollHeight) al abrir. Sin soporte de transicion el submenu
     simplemente queda visible: nunca desaparece del menu. */
  .xc-sidenav-flyout {
    position: static;
    /* fila completa, pero encogible: con flex-shrink 0 el margen izquierdo
       empujaba el submenu fuera del panel por la derecha */
    flex: 1 1 100%;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
    border-left: 1px solid var(--xc-border);
    border-radius: 0;
    box-shadow: none;
    min-width: 0;
    margin: 0 0 0 1.65rem;
    /* Cerrado: sin padding vertical. Con box-sizing:border-box la caja nunca
       baja del padding+borde, asi que un padding fijo dejaba 8px de guia
       colgando bajo cada item plegado */
    padding: 0 0 0 0.5rem;
    max-height: 0;
    overflow: hidden;
    /* solo anima max-height: si el padding tambien transicionara, el
       scrollHeight que mide el JS al abrir se leeria sin el (aun en 0) y el
       submenu quedaria recortado abajo */
    transition: max-height var(--xc-transition-base);
  }

  .xc-sidenav-item.open > .xc-sidenav-flyout {
    padding-top: 0.15rem;
    padding-bottom: 0.35rem;
  }

  .xc-sidenav-flyout-title {
    display: none;
  }

  .xc-sidenav-flyout li a {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--xc-text-muted);
  }

  .xc-sidenav-flyout li a:active {
    background-color: var(--xc-surface-2);
    color: var(--xc-text);
  }

  .xc-sidenav-flyout li.active > a {
    color: var(--xc-accent);
  }

  .xc-sidenav-flyout-divider {
    margin: 0.3rem 0.75rem;
  }

  .xc-sidenav-backdrop {
    background: rgba(8, 9, 11, 0.66);
  }

  /* Con el drawer abierto la pagina de atras no se mueve (iOS ignora
     overflow:hidden en body; el JS conserva y restaura el scroll) */
  body.xc-nav-lock {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
  }
}

/* ============================================================================
   06. SIDEBARS DE PAGINA (WHMCS) — van despues del contenido, discretos
   ============================================================================ */

.sidebar .card,
.card.card-sidebar {
  background-color: var(--xc-surface);
  border: 1px solid var(--xc-border);
  border-radius: var(--xc-radius-xl);
  overflow: hidden;
}

.sidebar .card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--xc-border);
}

.sidebar .card-title {
  color: var(--xc-text);
  font-family: var(--xc-font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.sidebar .card-minimise {
  color: var(--xc-text-subtle);
}

.sidebar .list-group-item {
  background-color: transparent;
  border-color: var(--xc-border-light);
  color: var(--xc-text-secondary);
  font-size: 0.9rem;
  transition: background-color var(--xc-transition-fast), color var(--xc-transition-fast);
}

.sidebar .list-group-item:hover {
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--xc-text);
}

.sidebar .list-group-item.active {
  background-color: var(--xc-accent-soft);
  border-left: 2px solid var(--xc-accent);
  color: var(--xc-text);
}

.sidebar .list-group-item.active .sidebar-menu-item-icon {
  color: var(--xc-accent);
}

.sidebar .sidebar-menu-item-icon {
  color: var(--xc-text-subtle);
}

.sidebar .list-group-item .badge {
  background-color: var(--xc-surface-3);
  color: var(--xc-text-secondary);
}

/* Chips de estado dentro de listas (tickets recientes, etc.):
   con margen para que no se monten sobre la fecha */
.sidebar .list-group-item .label.status,
.client-home-cards .list-group-item .label.status {
  display: inline-block;
  margin: 0.15rem 0.5rem 0.15rem 0;
  vertical-align: middle;
}

.sidebar .list-group-item small,
.client-home-cards .list-group-item small {
  vertical-align: middle;
}

/* ============================================================================
   07. CARDS Y PANELES
   ============================================================================ */

.card {
  background-color: var(--xc-surface);
  border: 1px solid var(--xc-border);
  border-radius: var(--xc-radius-xl);
  color: var(--xc-text-secondary);
}

.card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--xc-border);
}

.card-footer {
  background-color: rgba(0, 0, 0, 0.15);
  border-top: 1px solid var(--xc-border);
}

.card-title {
  color: var(--xc-text);
}

.primary-content > .card {
  box-shadow: var(--xc-shadow-card);
}

/* Hairline superior de marca en cards interactivas */
.client-home-cards .card,
.card-columns.home .card {
  position: relative;
  overflow: hidden;
}

.client-home-cards .card::before,
.card-columns.home .card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--xc-gradient-hairline);
  opacity: 0;
  transition: opacity var(--xc-transition-base);
  pointer-events: none;
}

.client-home-cards .card:hover::before,
.card-columns.home .card:hover::before {
  opacity: 1;
}

.card-columns.home .card {
  transition: background-color var(--xc-transition-base), border-color var(--xc-transition-base), transform var(--xc-transition-base);
}

.card-columns.home .card:hover {
  background-color: var(--xc-surface-2);
  border-color: var(--xc-border-strong);
  transform: translateY(-3px);
}

.client-home-cards .card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--xc-border);
}

.client-home-cards .list-group {
  border-top: 1px solid var(--xc-border) !important;
  border-bottom: 1px solid var(--xc-border) !important;
}

.client-home-cards .list-group .list-group-item {
  border-bottom: 1px solid var(--xc-border-light);
}

.client-home-cards small {
  color: var(--xc-text-muted);
}

/* Acentos de card, recoloreados a la paleta sobre fondo oscuro */
.card-accent-gold { border-top: 3px solid var(--xc-warning); }
.card-accent-green { border-top: 3px solid var(--xc-success); }
.card-accent-red { border-top: 3px solid var(--xc-danger); }
.card-accent-orange { border-top: 3px solid #ff6600; }
.card-accent-pink { border-top: 3px solid var(--xc-accent); }
.card-accent-purple { border-top: 3px solid #9b59b6; }
.card-accent-lime { border-top: 3px solid #8cbf26; }
.card-accent-magenta { border-top: 3px solid var(--xc-accent); }
.card-accent-teal { border-top: 3px solid #1abc9c; }
.card-accent-turquoise { border-top: 3px solid #1abc9c; }
.card-accent-emerald { border-top: 3px solid var(--xc-success); }
.card-accent-amethyst { border-top: 3px solid #9b59b6; }
.card-accent-wet-asphalt { border-top: 3px solid var(--xc-info); }
.card-accent-midnight-blue { border-top: 3px solid var(--xc-accent); }
.card-accent-sun-flower { border-top: 3px solid var(--xc-warning); }
.card-accent-pomegranate { border-top: 3px solid var(--xc-danger); }
.card-accent-silver { border-top: 3px solid var(--xc-border-strong); }
.card-accent-asbestos { border-top: 3px solid var(--xc-border-strong); }

.bg-color-gold { background-color: var(--xc-warning) !important; }
.bg-color-green { background-color: var(--xc-success) !important; }
.bg-color-red { background-color: var(--xc-danger) !important; }
.bg-color-blue { background-color: var(--xc-info) !important; }
.bg-color-pink,
.bg-color-magenta { background-color: var(--xc-accent) !important; }
.bg-color-midnight-blue { background-color: var(--xc-surface-3) !important; }

/* include panel.tpl (avisos de exito/error en facturas, etc.) */
.card .card-title.bg-success { background-color: var(--xc-success-soft) !important; color: var(--xc-success); }
.card .card-title.bg-danger { background-color: var(--xc-danger-soft) !important; color: var(--xc-danger-text); }
.card .card-title.bg-info { background-color: var(--xc-info-soft) !important; color: var(--xc-info); }
.card .card-title.bg-warning { background-color: var(--xc-warning-soft) !important; color: var(--xc-warning); }

/* ============================================================================
   08. DASHBOARD — saludo, accesos y paneles en columna central
   ============================================================================ */

.xc-page-head {
  text-align: center;
  margin: 1.25rem 0 2rem;
}

.xc-page-title {
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  letter-spacing: -0.03em;
  margin-bottom: 0.35rem;
}

.xc-page-subtitle {
  color: var(--xc-text-muted);
  margin: 0;
}

.xc-home-cta {
  margin: 2rem 0 1rem;
}

/* Tiles como tarjetas de acceso (icono + label + contador) */
.tiles {
  background: transparent;
}

.tiles .row.no-gutters {
  margin: -6px;
}

.tiles .row.no-gutters > [class*='col-'] {
  padding: 6px;
}

/* En el dashboard angosto quedan 2x2, como la referencia */
body.page-clientareahome .tiles .col-xl-3 {
  flex: 0 0 50%;
  max-width: 50%;
}

.tiles .tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background-color: var(--xc-surface);
  border: 1px solid var(--xc-border) !important;
  border-radius: var(--xc-radius-xl);
  text-decoration: none;
  transition: background-color var(--xc-transition-base), border-color var(--xc-transition-base), transform var(--xc-transition-base);
}

.tiles .tile i {
  position: static;
  order: 0;
  width: 40px;
  height: 40px;
  min-width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--xc-text-secondary);
  background-color: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  transition: color var(--xc-transition-base);
}

.tiles .tile .title {
  order: 1;
  flex: 1;
  margin: 0;
  color: var(--xc-text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.tiles .tile .stat {
  order: 2;
  margin: 0;
  font-family: var(--xc-font-display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--xc-text);
}

.tiles .tile .highlight {
  display: none;
}

.tiles .tile:hover {
  background-color: var(--xc-surface-2);
  border-color: var(--xc-border-strong) !important;
  transform: translateY(-2px);
  cursor: pointer;
}

.tiles .tile:hover i {
  font-size: 1rem;
  color: var(--xc-accent);
}

/* Paneles del home al MISMO ancho que las tiles (contenedor de 860px);
   "Mi Plan" destacado con borde y glow de acento */
.xc-home-panels {
  margin: 0 auto;
}

/* Subtitulo de seccion del dashboard, alineado a la izquierda */
.xc-section-title {
  font-family: var(--xc-font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--xc-text);
  text-align: left;
  margin: 0 0 0.9rem;
}

/* Paneles del home estilo tarjetas (mismo lenguaje que la grilla de planes):
   cada fila es una tarjeta suelta sobre el panel — cero lineas tipo tabla */
.xc-home-panels .list-group {
  display: block;
  border: 0 !important;
  padding: 1rem 1.25rem 0.35rem;
  /* theme.min capa las listas a 170px con scroll (y eximia solo a
     Servicios): todos los paneles muestran su contenido completo */
  max-height: none !important;
  overflow: visible !important;
}

.xc-home-panels .list-group .list-group-item {
  background-color: var(--xc-surface-2);
  border: 1px solid var(--xc-border) !important;
  border-radius: 14px !important;
  margin-bottom: 0.75rem;
  padding: 0.95rem 1.15rem;
  transition: background-color var(--xc-transition-fast), border-color var(--xc-transition-fast);
}

.xc-home-panels .list-group .list-group-item:hover {
  background-color: var(--xc-surface-3);
  border-color: var(--xc-border-strong) !important;
}

.xc-home-panels .card-footer {
  background-color: transparent;
  border-top: 0;
  padding: 0 1.5rem 1.1rem;
}

.xc-home-panels .card hr {
  display: none;
}

/* Chips de estado del dashboard: el !important blinda contra el fondo
   blanco heredado, pero consume el color por estado que definen las
   variables --xc-chip-* de la seccion 12 (gris neutro como fallback) */
.xc-home-panels .list-group-item .label {
  background-color: var(--xc-chip-bg, rgba(255, 255, 255, 0.08)) !important;
  color: var(--xc-chip-fg, var(--xc-text-secondary)) !important;
  border: 1px solid var(--xc-chip-border, transparent);
  border-radius: var(--xc-radius-full);
  padding: 0.28rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 600;
}

/* Botones de accion del encabezado (Mis Servicios / Abrir Ticket):
   pildora fantasma legible en vez de los rellenos naranja/azul */
.xc-home-panels .card-header .btn {
  background-color: rgba(255, 255, 255, 0.04) !important;
  background-image: none;
  border: 1px solid var(--xc-border-strong);
  color: var(--xc-text) !important;
  border-radius: var(--xc-radius-full);
  padding: 0.35rem 0.95rem;
  font-size: 0.8rem;
  font-weight: 600;
}

.xc-home-panels .card-header .btn:hover {
  background-color: var(--xc-accent-soft) !important;
  border-color: var(--xc-accent);
}

/* Botones dentro de las filas: mismo tamano y radio para todos */
.xc-home-panels .list-group-item .btn:not(.btn-link) {
  background-color: transparent;
  background-image: none;
  border: 1px solid var(--xc-border-strong);
  color: var(--xc-text);
  border-radius: var(--xc-radius-full);
  padding: 0.4rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
}

.xc-home-panels .list-group-item .btn:not(.btn-link):hover {
  background-color: var(--xc-accent-soft);
  border-color: var(--xc-accent);
  color: var(--xc-text);
}

/* Split-button (Ingresar a cPanel + caret): pildora por fuera, plano por dentro */
.xc-home-panels .btn-group > .btn:first-child:not(:only-child) {
  border-radius: var(--xc-radius-full) 0 0 var(--xc-radius-full) !important;
}

.xc-home-panels .btn-group > .btn:last-child:not(:only-child) {
  border-radius: 0 var(--xc-radius-full) var(--xc-radius-full) 0 !important;
  border-left: 0;
}

.xc-home-panels .btn-group > .btn:only-child {
  border-radius: var(--xc-radius-full) !important;
}

/* Caret del dropdown (Webmail): el .dropdown-menu es el ultimo hijo del
   grupo, asi que :last-child nunca lo alcanza — se fusiona explicito al
   boton principal (venia suelto, con borde y radio propios) */
.xc-home-panels .list-group-item .btn-group .btn.dropdown-toggle {
  border-radius: 0 var(--xc-radius-full) var(--xc-radius-full) 0 !important;
  border-left: 0 !important;
  margin-left: -1px;
}

.xc-home-panels .list-group-item .btn-group .btn-group {
  margin-left: -1px;
}

/* Sin anillo de foco tras el click con mouse (se conserva para teclado) */
.xc-home-panels .list-group-item .btn:focus:not(:focus-visible) {
  box-shadow: none;
}

.xc-home-panels .card {
  border-top-width: 1px; /* neutraliza los card-accent-* de 3px en el home */
}

/* (El destacado rosado de "Mi Plan" se retiro a pedido: todos los paneles
   comparten el mismo tratamiento) */

/* ----------------------------------------------------------------------------
   Dashboard en movil: las filas horizontales del escritorio no caben en 390px
   — el contador se comia la etiqueta de la tile, el nombre del servicio salia
   como "Streaming Vid..." y el boton del encabezado empujaba al titulo. Todo
   pasa a apilarse.
   ---------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  /* Tile como KPI: icono, numero y etiqueta en columna. Con `height: 100%`
     las dos de una misma fila quedan iguales aunque una etiqueta envuelva */
  .tiles .tile {
    height: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.9rem 0.85rem;
  }

  .tiles .tile i {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 10px;
    font-size: 0.9rem;
  }

  .tiles .tile .stat {
    order: 1;
    font-size: 1.5rem;
    line-height: 1;
  }

  .tiles .tile .title {
    order: 2;
    flex: none;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    line-height: 1.3;
  }

  /* Encabezado del panel: titulo y accion en la misma fila; si no caben, el
     boton baja completo en vez de partir el titulo en dos lineas */
  .xc-home-panels .card-header .card-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }

  /* el boton va primero en el DOM (asi flota a la derecha en escritorio):
     con flex hay que reordenarlo o queda ANTES del titulo */
  .xc-home-panels .card-header .card-title .float-right {
    float: none !important;
    order: 2;
    margin-left: auto;
  }

  .xc-home-panels .list-group {
    padding: 0.75rem 0.75rem 0.1rem;
  }

  .xc-home-panels .list-group .list-group-item {
    padding: 0.85rem 0.9rem;
  }

  /* Fila de servicio apilada: estado arriba, nombre completo (sin recortes)
     y acciones abajo a lo ancho */
  .xc-home-panels .div-service-item {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.6rem;
  }

  .xc-home-panels .div-service-status {
    order: 1;
    text-align: left;
  }

  /* theme.min fija el chip en 3rem para movil (`width: 3rem`, con la regla
     que lo libera dentro de su media de escritorio): "Activo" salia "A..." */
  .xc-home-panels .div-service-status .label {
    width: auto !important;
    overflow: visible;
    text-overflow: clip;
  }

  .xc-home-panels .div-service-name {
    order: 2;
    flex: 1 1 100%;
    margin: 0;
    gap: 0.15rem;
  }

  /* theme.min recorta con ellipsis (`white-space: nowrap`): en movil el
     nombre del plan y el dominio se leen completos, en varias lineas */
  .xc-home-panels .div-service-name > span {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
  }

  .xc-home-panels .div-service-buttons {
    order: 3;
    flex: 1 1 100%;
    display: flex;
    gap: 0.5rem;
    margin-left: 0;
  }

  .xc-home-panels .div-service-buttons .btn-group-primary {
    flex: 0 0 auto;
  }

  /* con la fila apilada el boton ocupa todo el ancho: se muestra su texto en
     vez del icono (i) suelto, que dejaba una pildora vacia */
  .xc-home-panels .div-service-buttons .btn-view-details {
    flex: 1 1 auto;
  }

  .xc-home-panels .div-service-buttons .btn-view-details i {
    display: none;
  }

  .xc-home-panels .div-service-buttons .btn-view-details span:not(.sr-only) {
    display: inline !important;
  }

  /* Fila de ticket (todo lo que no es una fila de servicio). El core arma su
     contenido con nodos sueltos y <br>: en un contenedor flex cada <br> se
     convierte en un item vacio y abria un hueco enorme entre el chip y la
     fecha. Vuelve al flujo normal y el chip se ancla a la derecha.
     `flow-root` crea el contexto de bloque que contiene ese flotado. */
  .xc-home-panels .list-group-item:not(:has(.div-service-item)) {
    display: flow-root;
    line-height: 1.5;
  }

  .xc-home-panels .list-group-item:not(:has(.div-service-item)) .label {
    float: right;
    margin: 0 0 0.35rem 0.6rem;
  }

  /* Saltos dobles del core: uno basta para separar la fecha del asunto */
  .xc-home-panels .list-group-item br + br {
    display: none;
  }

  .xc-home-panels .list-group-item small,
  .xc-home-panels .list-group-item .text-muted {
    font-size: 0.8rem;
  }

  /* Encabezado del panel: el titulo envuelve dentro de su caja y la accion se
     queda en la misma linea, a la derecha y sin partirse */
  .xc-home-panels .card-header .card-title {
    flex-wrap: nowrap;
  }

  .xc-home-panels .card-header .card-title .float-right {
    flex: 0 0 auto;
  }

  .xc-home-panels .card-header .btn {
    white-space: nowrap;
  }
}

/* Titulos de seccion de portada */
.primary-content h2.text-center {
  font-size: 1.75rem;
  letter-spacing: -0.03em;
}

/* ============================================================================
   09. BOTONES
   ============================================================================ */

.btn {
  font-family: var(--xc-font-body);
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: var(--xc-radius-full);
  transition: background-color 200ms var(--xc-ease-out), border-color 200ms var(--xc-ease-out), color 200ms var(--xc-ease-out), box-shadow 200ms var(--xc-ease-out), transform 160ms var(--xc-ease-out);
}

.btn:focus,
.btn.focus {
  box-shadow: 0 0 0 2px var(--xc-accent-softer);
}

.btn-primary {
  color: #ffffff;
  background-color: var(--xc-btn-primary-bg);
  background-image: none;
  border: 1px solid var(--xc-btn-primary-border);
  -webkit-backdrop-filter: var(--xc-btn-primary-blur);
  backdrop-filter: var(--xc-btn-primary-blur);
  box-shadow: var(--xc-btn-primary-shadow);
}

.btn-primary:hover:not(:disabled):not(.disabled) {
  color: #ffffff;
  background-color: transparent;
  background-image: none;
  background: var(--xc-btn-primary-bg-hover);
  border-color: var(--xc-btn-primary-border-hover);
  box-shadow: var(--xc-btn-primary-shadow-hover);
}

.btn-primary:focus,
.btn-primary.focus {
  color: #ffffff;
  background-color: var(--xc-btn-primary-bg);
  border-color: var(--xc-btn-primary-border-hover);
  box-shadow: 0 0 0 3px var(--xc-accent-soft);
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  color: #ffffff;
  background-color: transparent;
  background: var(--xc-btn-primary-bg-active);
  border-color: var(--xc-btn-primary-border-active);
  box-shadow: var(--xc-btn-primary-shadow-active);
  transform: scale(0.985);
}

.btn-primary:disabled,
.btn-primary.disabled {
  background: rgba(120, 120, 128, 0.35);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.55);
  box-shadow: none;
}

.btn-default,
.btn-secondary,
.btn-light {
  color: var(--xc-text);
  background-color: var(--xc-surface);
  border: 1px solid var(--xc-border);
}

.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-light:hover,
.btn-light:focus,
.btn-light:not(:disabled):not(.disabled):active {
  color: var(--xc-text);
  background-color: var(--xc-surface-2);
  border-color: var(--xc-border-strong);
}

.btn-default.disabled,
.btn-default:disabled,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus {
  color: var(--xc-text-subtle);
  background-color: var(--xc-surface) !important;
  border-color: var(--xc-border) !important;
}

.btn-outline-primary {
  color: var(--xc-text);
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--xc-border-strong);
}

.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active {
  color: #ffffff;
  background-color: var(--xc-accent-dark);
  border-color: transparent;
}

.btn-outline-primary:focus,
.btn-outline-primary.focus {
  box-shadow: 0 0 0 3px var(--xc-accent-soft);
}

.btn-success {
  color: #0c2b18;
  background-color: var(--xc-success);
  border-color: transparent;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:not(:disabled):not(.disabled):active {
  color: #0c2b18;
  background-color: #40d983;
  border-color: transparent;
}

.btn-danger {
  color: #ffffff;
  background-color: var(--xc-danger);
  border-color: transparent;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:not(:disabled):not(.disabled):active {
  color: #ffffff;
  background-color: #ff5d6b;
  border-color: transparent;
}

.btn-warning {
  color: #2b2000;
  background-color: var(--xc-warning);
  border-color: transparent;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:not(:disabled):not(.disabled):active {
  color: #2b2000;
  background-color: #ffb733;
  border-color: transparent;
}

.btn-info {
  color: #06213d;
  background-color: var(--xc-info);
  border-color: transparent;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:not(:disabled):not(.disabled):active {
  color: #06213d;
  background-color: #6cb4ff;
  border-color: transparent;
}

.btn-link {
  color: var(--xc-accent);
  font-weight: 500;
}

.btn-link:hover {
  color: var(--xc-accent-hover);
  text-decoration: none;
}

.input-group .btn {
  border-radius: var(--xc-radius-md);
}

.input-group > .input-group-append > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group > .input-group-prepend > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* ============================================================================
   10. FORMULARIOS
   ============================================================================ */

label,
.form-control-label,
.col-form-label {
  color: var(--xc-text-secondary);
  font-size: 0.85rem;
  font-weight: 500;
}

.form-control {
  color: var(--xc-text);
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid transparent;
  border-radius: var(--xc-radius-md);
  transition: box-shadow 0.2s linear, background-color 0.2s linear;
}

.form-control::placeholder {
  color: var(--xc-text-subtle);
}

.form-control:focus {
  color: var(--xc-text);
  background-color: rgba(0, 0, 0, 0.5);
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--xc-focus-ring);
}

.form-control:disabled,
.form-control[readonly] {
  background-color: rgba(0, 0, 0, 0.3);
  color: var(--xc-text-muted);
  opacity: 0.75;
}

select.form-control,
.custom-select {
  color: var(--xc-text);
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid transparent;
  border-radius: var(--xc-radius-md);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23999999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 16px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.custom-select:focus {
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--xc-focus-ring);
}

select.form-control option,
.custom-select option {
  background-color: var(--xc-surface);
  color: var(--xc-text);
}

textarea.form-control {
  line-height: 1.55;
}

.input-group-text {
  color: var(--xc-text-muted);
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid transparent;
  border-radius: var(--xc-radius-md);
}

/* Altura UNIFORME para todo el grupo (input + iconos + botones): sus alturas
   naturales difieren (el input quedaba mas bajo que los addons laterales),
   asi que se fija una sola altura explicita para las tres piezas */
.input-group > .form-control,
.input-group > .input-group-prepend > .input-group-text,
.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-prepend > .btn,
.input-group > .input-group-append > .btn {
  height: 46px;
}

.input-group > .input-group-prepend > .btn,
.input-group > .input-group-append > .btn,
.input-group > .input-group-prepend > .input-group-text,
.input-group > .input-group-append > .input-group-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* xc-field: patron definitivo para inputs con icono — el icono (y el boton
   de revelar) van en overlay ABSOLUTO sobre un unico input, como en el
   checkout y el registro: no hay piezas separadas que desalinear.
   Los !important neutralizan la logica de esquinas de .input-group de
   Bootstrap, que no aplica a overlays. */
.xc-field {
  position: relative;
  display: block;
}

.xc-field > .form-control {
  width: 100%;
  height: 46px;
  padding-left: 46px;
  border-radius: var(--xc-radius-md) !important;
}

.xc-field.xc-field-has-btn > .form-control {
  padding-right: 46px;
}

.xc-field .xc-field-icon {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--xc-text-subtle);
  pointer-events: none;
  z-index: 3;
}

.input-group.xc-field .xc-field-btn {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--xc-text-muted);
  border-radius: 0 var(--xc-radius-md) var(--xc-radius-md) 0 !important;
  z-index: 3;
}

.input-group.xc-field .xc-field-btn:hover,
.input-group.xc-field .xc-field-btn:focus,
.input-group.xc-field .xc-field-btn:active {
  background: transparent;
  color: var(--xc-accent);
  box-shadow: none;
}

.input-group .btn-reveal-pw {
  background-color: rgba(0, 0, 0, 0.5);
  color: var(--xc-text-muted);
  border: 1px solid transparent;
}

.input-group .btn-reveal-pw:hover,
.input-group .btn-reveal-pw:active {
  background-color: rgba(0, 0, 0, 0.5);
  color: var(--xc-accent);
  border-color: transparent;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--xc-accent);
}

/* Toggle de marca para checkboxes sueltos (Recordar Inicio de Sesion) */
.xc-remember {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0;
  cursor: pointer;
}

.xc-toggle-check {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 42px;
  width: 42px;
  height: 24px;
  margin: 0;
  border: none;
  border-radius: var(--xc-radius-full, 999px);
  background-color: rgba(255, 255, 255, 0.16);
  position: relative;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.xc-toggle-check::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #ffffff;
  transition: transform 200ms ease;
}

.xc-toggle-check:checked {
  background: linear-gradient(135deg, var(--xc-accent), var(--xc-accent-dark));
}

.xc-toggle-check:checked::after {
  transform: translateX(18px);
}

.xc-toggle-check:focus,
.xc-toggle-check:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Preferencias de email (clientarea.php?action=details): una fila por
   preferencia, texto a la izquierda e interruptor a la derecha */
.xc-pref-list {
  display: flex;
  flex-direction: column;
}

.xc-pref {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin: 0;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--xc-border-light);
  cursor: pointer;
}

.xc-pref:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.xc-pref-label {
  color: var(--xc-text-secondary);
  font-size: 0.9rem;
  font-weight: 400;
}

.xc-pref:hover .xc-pref-label {
  color: var(--xc-text);
}

/* ============================================================================
   10b. REGISTRO (register.php) — version corta estilo checkout
   ============================================================================ */

/* Con el id porque theme.min.css trae "#registration{margin:0}" (ID gana
   a clase y anulaba el margin auto: el form quedaba cargado a la izquierda) */
.xc-register,
#registration.xc-register {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 0 2rem;
}

.xc-register .xc-checkout-head {
  margin: 0.25rem 0 1.5rem;
}

.xc-register .xc-checkout-head h1 {
  margin: 0;
  font-family: var(--xc-font-display);
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--xc-text);
}

.xc-register .xc-checkout-sub {
  margin: 0.35rem 0 0;
  color: var(--xc-text-muted);
  font-size: 0.92rem;
}

.xc-register .xc-step-card {
  background-color: var(--xc-surface);
  border: 1px solid var(--xc-border);
  border-radius: 18px;
  padding: 1.6rem 1.6rem 1.3rem;
  margin-bottom: 1.15rem;
}

.xc-register .xc-step-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.2rem;
}

.xc-register .xc-step-num {
  width: 30px;
  height: 30px;
  min-width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--xc-accent), var(--xc-accent-dark));
  color: #ffffff;
  font-family: var(--xc-font-display);
  font-size: 0.9rem;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(255, 43, 118, 0.3);
}

.xc-register .xc-step-title {
  font-family: var(--xc-font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--xc-text);
}

/* Neutraliza los estilos claros del tema base (#registration pinta los
   .field blancos de 36px): inputs dark de 46px con icono integrado */
#registration .field,
#registration .form-control {
  display: block;
  width: 100%;
  height: 46px;
  color: var(--xc-text);
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid transparent;
  border-radius: var(--xc-radius-md);
  font-size: 0.95rem;
  outline: 0;
}

#registration .field:focus,
#registration .form-control:focus {
  background: rgba(0, 0, 0, 0.5);
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--xc-focus-ring);
}

#registration .field::placeholder {
  color: var(--xc-text-subtle);
}

#registration select.field option {
  background-color: var(--xc-surface);
  color: var(--xc-text);
}

#registration .prepend-icon .field {
  padding-left: 46px;
}

#registration .prepend-icon .field-icon {
  width: 46px;
  height: 46px;
  line-height: 46px;
  color: var(--xc-text-subtle);
}

#registration .password-strength-meter .progress {
  background-color: rgba(0, 0, 0, 0.35);
  border-radius: var(--xc-radius-full);
  height: 6px;
  margin-bottom: 0.4rem;
}

#registration .password-strength-meter p {
  color: var(--xc-text-subtle);
  margin-bottom: 0;
}

#registration .xc-tos {
  color: var(--xc-text-secondary);
  cursor: pointer;
}

#registration .xc-tos .accepttos {
  width: 16px;
  height: 16px;
  accent-color: var(--xc-accent);
  vertical-align: -3px;
  margin-right: 0.35rem;
}

#registration .xc-checkout-actions {
  margin-top: 1.35rem;
}

#registration input[type="submit"] {
  display: block;
  width: 100%;
  padding: 0.85rem 1.5rem;
  font-size: 1.05rem;
}

.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--xc-accent);
  border-color: var(--xc-accent);
}

.custom-control-label::before {
  background-color: rgba(0, 0, 0, 0.5);
  border-color: var(--xc-border-strong);
}

.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 2px var(--xc-accent-softer);
}

/* Input de archivo (adjuntos de tickets): dark en vez del blanco por defecto */
.custom-file-label {
  color: var(--xc-text-muted);
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid transparent;
  border-radius: var(--xc-radius-md);
}

.custom-file-label::after {
  color: var(--xc-text);
  background-color: var(--xc-surface-3);
  border-left: 1px solid var(--xc-border);
}

/* Fila de adjunto (tickets): el campo de archivo y "Añadir mas" quedaban
   a distinta altura y pegados — input-group los une sin separacion y el
   radio pildora del tema los superponia. Aqui van como dos controles
   independientes, separados y de la MISMA altura. */
.attachment-group {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.attachment-group > .custom-file {
  flex: 1 1 240px;
  width: auto;
  height: 46px;
}

.attachment-group .custom-file-label {
  display: flex;
  align-items: center;
  height: 46px;
  padding: 0 1rem;
  overflow: hidden;
}

/* El pseudo-boton de Bootstrap trae "Browse" fijo en ingles desde el CSS
   (no hay clave de idioma): se reemplaza por un icono de clip, que no
   depende del idioma del cliente */
.attachment-group .custom-file-label::after {
  content: "\f0c6";
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 3rem;
  padding: 0;
  border-radius: 0 var(--xc-radius-md) var(--xc-radius-md) 0;
}

.attachment-group > .input-group-append {
  margin: 0;
}

.attachment-group .input-group-append > .btn {
  height: 46px;
  padding: 0 1.15rem;
  border-radius: var(--xc-radius-full);
  white-space: nowrap;
}

input[type="file"].form-control,
input[type="file"] {
  color: var(--xc-text-muted);
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--xc-danger);
  background-image: none;
}

.invalid-feedback {
  color: var(--xc-danger-text);
}

.form-control.is-valid,
.was-validated .form-control:valid {
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--xc-success-border);
  background-image: none;
}

@supports (-webkit-touch-callout: none) {
  input.form-control,
  textarea.form-control,
  select.form-control,
  .custom-select {
    font-size: 16px;
  }
}

.cf-turnstile {
  margin: 0.5rem 0 1rem;
}

.progress {
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: var(--xc-radius-full);
}

.progress-bar {
  background-color: var(--xc-accent);
}

.progress-bar.bg-success { background-color: var(--xc-success) !important; }
.progress-bar.bg-warning { background-color: var(--xc-warning) !important; }
.progress-bar.bg-danger { background-color: var(--xc-danger) !important; }

/* --- Editor de tickets (EasyMDE/SimpleMDE sobre CodeMirror): dark --- */
.editor-toolbar {
  background-color: var(--xc-background-elevated);
  border: 1px solid var(--xc-border);
  border-bottom: 0;
  border-radius: var(--xc-radius-md) var(--xc-radius-md) 0 0;
  opacity: 1;
}

.editor-toolbar a,
.editor-toolbar button {
  color: var(--xc-text-secondary) !important;
  border: 1px solid transparent;
}

.editor-toolbar a.active,
.editor-toolbar a:hover,
.editor-toolbar button.active,
.editor-toolbar button:hover {
  background-color: var(--xc-surface-2);
  border-color: var(--xc-border);
  color: var(--xc-text) !important;
}

.editor-toolbar i.separator {
  border-left: 1px solid var(--xc-border);
  border-right: 0;
}

.CodeMirror {
  background-color: rgba(0, 0, 0, 0.4);
  color: var(--xc-text);
  border: 1px solid var(--xc-border);
  border-radius: 0 0 var(--xc-radius-md) var(--xc-radius-md);
}

.CodeMirror-cursor {
  border-left: 1px solid var(--xc-text);
}

.CodeMirror-selected {
  background: rgba(255, 43, 118, 0.25) !important;
}

.CodeMirror-placeholder {
  color: var(--xc-text-subtle) !important;
}

.editor-statusbar {
  color: var(--xc-text-subtle);
}

.editor-preview,
.editor-preview-side {
  background-color: var(--xc-surface);
  color: var(--xc-text-secondary);
  border-color: var(--xc-border);
}

/* Editor markdown de WHMCS (bootstrap-markdown), el que usan tickets.
   theme.min.css pinta la caja de texto y la vista previa con
   `.md-editor > textarea.markdown-editor { background:#fff !important }`:
   mas especifico que un `.md-editor textarea`, por eso el area de
   escritura seguia saliendo BLANCA. Se replica el selector exacto. */
.md-editor > textarea.markdown-editor,
.md-editor > .md-preview {
  background-color: rgba(0, 0, 0, 0.4) !important;
  color: var(--xc-text) !important;
  border-top-color: var(--xc-border) !important;
  border-bottom-color: var(--xc-border) !important;
}

.md-editor > .btn-toolbar {
  background-color: var(--xc-background-elevated) !important;
}

.markdown-editor-status {
  color: var(--xc-text-subtle);
}

.md-editor {
  border-color: var(--xc-border) !important;
  background-color: rgba(0, 0, 0, 0.35);
}

.md-editor > .md-header,
.md-editor .md-footer {
  background-color: var(--xc-background-elevated) !important;
}

.md-editor textarea,
.md-editor .md-input {
  background-color: rgba(0, 0, 0, 0.35) !important;
  color: var(--xc-text) !important;
  border-color: var(--xc-border) !important;
}

.md-editor textarea:focus,
.md-editor .md-input:focus {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

.md-editor > .md-preview {
  background-color: var(--xc-surface) !important;
  border-color: var(--xc-border) !important;
  color: var(--xc-text-secondary);
}

.md-editor.active {
  border-color: var(--xc-accent-border) !important;
  box-shadow: 0 0 0 2px var(--xc-accent-softer) !important;
}

/* ============================================================================
   11. TABLAS Y DATATABLES
   ============================================================================ */

.table {
  color: var(--xc-text-secondary);
}

.table th,
.table td {
  border-top: 1px solid var(--xc-border-light);
  vertical-align: middle;
}

.table thead th {
  border-bottom: 1px solid var(--xc-border);
  color: var(--xc-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.table-hover tbody tr:hover,
.table.table-list tbody tr:hover {
  background-color: var(--xc-surface-2);
  color: var(--xc-text);
  cursor: pointer;
}

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

/* Filas de totales (masspay.tpl "Pagar varias facturas"): theme.min.css las
   pinta #efefef y el texto claro quedaba invisible sobre el bloque blanco */
tr.masspay-total td {
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--xc-text);
}

.table .thead-dark th,
.table .thead-light th {
  background-color: var(--xc-background-elevated);
  color: var(--xc-text-muted);
  border-color: var(--xc-border);
}

.table-bordered,
.table-bordered th,
.table-bordered td {
  border-color: var(--xc-border-light);
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  color: var(--xc-text);
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid transparent;
  border-radius: var(--xc-radius-md);
  padding: 0.35rem 0.75rem;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--xc-focus-ring);
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
  color: var(--xc-text-muted);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--xc-text-secondary) !important;
  border: 1px solid transparent;
  border-radius: var(--xc-radius-md);
  background: transparent;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  color: var(--xc-text) !important;
  background: var(--xc-surface-2);
  border-color: var(--xc-border);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  color: #ffffff !important;
  background: var(--xc-accent-dark);
  border-color: transparent;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: var(--xc-text-subtle) !important;
  background: transparent;
  border-color: transparent;
}

/* Botones dentro de tablas: compactos y SIEMPRE en una linea
   (una pildora con texto multilinea se deforma en globo) */
.table .btn {
  white-space: nowrap;
  padding: 0.3rem 0.9rem;
  font-size: 0.8125rem;
}

/* ============================================================================
   Listados del client area (facturas): encabezado con filtro discreto y
   tabla dentro de una tarjeta uniforme — mismo lenguaje del resto del tema
   ============================================================================ */

.xc-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0.25rem 0 1.1rem;
}

.xc-list-title {
  font-family: var(--xc-font-display);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--xc-text);
  margin: 0;
}

.xc-list-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.xc-overdue-chip {
  background-color: rgba(255, 71, 87, 0.12);
  border: 1px solid rgba(255, 71, 87, 0.3);
  color: #ff8d8d;
  border-radius: var(--xc-radius-full);
  padding: 0.35rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.xc-overdue-chip:hover {
  background-color: rgba(255, 71, 87, 0.2);
}

.xc-list-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 1.05rem;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}

.xc-filter-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--xc-border-strong);
  color: var(--xc-text);
  border-radius: var(--xc-radius-full) !important;
}

.xc-filter-btn:hover {
  background-color: var(--xc-accent-soft);
  border-color: var(--xc-accent);
  color: var(--xc-text);
}

.xc-filter-btn.filtering {
  border-color: var(--xc-accent);
  color: var(--xc-accent);
}

.xc-filter-menu {
  background-color: var(--xc-surface-2);
  border: 1px solid var(--xc-border-strong);
  border-radius: 14px;
  padding: 0.4rem;
  min-width: 11rem;
}

.xc-filter-menu .dropdown-item {
  color: var(--xc-text-secondary);
  border-radius: 10px;
  padding: 0.45rem 0.8rem;
  font-size: 0.9rem;
}

.xc-filter-menu .dropdown-item:hover {
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--xc-text);
}

.xc-filter-menu .dropdown-item.active {
  background-color: var(--xc-accent-soft);
  color: var(--xc-text);
}

/* Sin el contador "Viendo 1 a N de M entradas" ni el selector
   "Ver [10] Entradas" (ruido; la paginacion basta) */
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length {
  display: none !important;
}

/* Los listados NO viven en una tarjeta contenedora: cada fila es una
   tarjeta suelta sobre el fondo, igual que los paneles del home */
.primary-content .table-container {
  background-color: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

/* Encabezados de columna: etiquetas flotantes, sin caja */
.primary-content .table-list > thead > tr > th {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--xc-text-muted);
  vertical-align: middle;
  background-color: transparent !important;
  border: 0 !important;
  padding: 0 1.15rem;
}

/* Filas-tarjeta via border-spacing: conserva DataTables (orden,
   busqueda, filtros y responsive) sobre una tabla real */
.primary-content table.table-list {
  border-collapse: separate !important;
  border-spacing: 0 0.75rem;
  border: 0 !important;
}

.primary-content .table-list > tbody > tr > td {
  vertical-align: middle;
  padding: 0.95rem 1.15rem;
  background-color: var(--xc-surface-2);
  border-top: 1px solid var(--xc-border) !important;
  border-bottom: 1px solid var(--xc-border) !important;
  transition: background-color var(--xc-transition-fast), border-color var(--xc-transition-fast);
}

.primary-content .table-list > tbody > tr > td:first-child {
  border-left: 1px solid var(--xc-border) !important;
  border-radius: 14px 0 0 14px;
}

.primary-content .table-list > tbody > tr > td:last-child {
  border-right: 1px solid var(--xc-border) !important;
  border-radius: 0 14px 14px 0;
}

/* theme.min remataba la ultima fila con radio de 4px en la esquina
   izquierda (esquina exterior de la tabla-tarjeta antigua) y con mas
   especificidad; en filas-tarjeta la ultima fila es igual a todas */
.dataTables_wrapper table.table-list tr:last-child td:first-child {
  border-radius: 14px 0 0 14px;
}

.dataTables_wrapper table.table-list tr:last-child td:last-child {
  border-radius: 0 14px 14px 0;
}

/* Celda unica en la fila (p. ej. "Sin Resultados"/dataTables_empty):
   es first-child y last-child a la vez y las reglas de last-child de
   arriba pisaban el radius izquierdo; tarjeta redondeada en los 4
   vertices. Aplica a todos los listados (servicios, facturas, tickets,
   presupuestos, dominios...) */
.primary-content .table-list > tbody > tr > td:only-child,
.dataTables_wrapper table.table-list tr:last-child td:only-child {
  border-left: 1px solid var(--xc-border) !important;
  border-right: 1px solid var(--xc-border) !important;
  border-radius: 14px;
}

.primary-content .table-list > tbody > tr[onclick] {
  cursor: pointer;
}

/* Chips de estado uniformes en tablas */
.table-list .label.status {
  display: inline-block;
  border-radius: var(--xc-radius-full);
  padding: 0.3rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 600;
}

/* Acciones de fila: TODAS con el mismo radio pildora, alto y tipografia
   (Ver acento solido; Boleta SII/PDF pildora fantasma) */
.xc-table-action {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: var(--xc-radius-full) !important;
  padding: 0.4rem 0.95rem !important;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}

.xc-table-action.btn-default {
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--xc-border-strong);
  color: var(--xc-text);
}

.xc-table-action.btn-default:hover {
  background-color: var(--xc-accent-soft);
  border-color: var(--xc-accent);
  color: var(--xc-text);
}

table.dataTable > tbody > tr.child ul.dtr-details > li {
  border-bottom-color: var(--xc-border-light);
}

table.dataTable > tbody > tr.child span.dtr-title {
  color: var(--xc-text-muted);
}

/* table-list: theme.min.css pinta thead y celdas en blanco (#fff) con
   selectores mas especificos que los genericos .table th/td */
.dataTables_wrapper table.table-list {
  border: 0 !important;
}

table.table-list thead th {
  background-color: transparent !important;
  border: 0 !important;
  color: var(--xc-text-muted);
}

table.dataTable.no-footer {
  border-bottom: 0 !important;
}

.dataTables_wrapper table.table-list thead th.sorting_asc,
.dataTables_wrapper table.table-list thead th.sorting_desc {
  background-color: transparent;
  color: var(--xc-text);
}

.table-list > tbody > tr > td {
  color: var(--xc-text-secondary);
}

.table-list > tbody > tr:hover > td {
  background-color: var(--xc-surface-3);
  border-color: var(--xc-border-strong) !important;
  color: var(--xc-text);
}

/* ----------------------------------------------------------------------------
   Listados en movil: la fila-tarjeta se APILA
   ----------------------------------------------------------------------------
   Una tabla de 4-7 columnas no cabe en 390px y obligaba a scroll horizontal
   (DataTables recibe `responsive: true` en tablelist.tpl, pero la extension
   Responsive NO viene en el bundle del tema, asi que la opcion se ignora).
   Aqui cada fila pasa a ser una tarjeta vertical: titulo + chip de estado en
   la primera linea, el resto de las celdas como "etiqueta … valor" (la
   etiqueta sale del data-label que ponen los templates de listado) y las
   acciones a lo ancho al final. DataTables sigue intacto: solo cambia como se
   pinta, no la tabla ni su orden/busqueda/filtro.
   ---------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  /* Sin columnas no hay encabezados que mostrar (el orden por defecto de
     cada listado ya es el util, y el filtro vive en el encabezado de pagina) */
  .primary-content .table-list > thead {
    display: none;
  }

  /* DataTables fija un `width` inline en px calculado con la tabla aun en
     columnas: sin este override las tarjetas heredaban ese ancho y la pagina
     seguia con scroll horizontal */
  .primary-content table.table-list,
  .primary-content .table-list > tbody {
    display: block;
    border-spacing: 0;
    width: 100% !important;
    max-width: 100%;
  }

  .primary-content .table-list > tbody > tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.75rem;
    margin: 0 0 0.75rem;
    padding: 0.85rem 1rem;
    background-color: var(--xc-surface-2);
    border: 1px solid var(--xc-border);
    border-radius: 14px;
  }

  .primary-content .table-list > tbody > tr > td {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    flex: 1 1 100%;
    order: 3;
    padding: 0.3rem 0;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    text-align: left !important;
    word-break: break-word;
  }

  /* Sin etiqueta no hay contra que alinear: el valor queda a la izquierda (si
     no, un listado sin data-label — p. ej. columnas que no se etiquetaron —
     muestra su texto colgando a la derecha, "chueco") */
  .primary-content .table-list > tbody > tr > td:not([data-label]) {
    justify-content: flex-start;
  }

  /* La etiqueta empuja al valor a la derecha con `margin-right: auto` en vez
     de `space-between`: asi las celdas de varios nodos (precio + ciclo de
     facturacion) quedan juntas y no una en cada extremo */
  .primary-content .table-list > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 auto;
    margin-right: auto;
    color: var(--xc-text-muted);
    font-size: 0.78rem;
    font-weight: 500;
  }

  /* Los bordes/radios de la fila-tarjeta horizontal viven en reglas
     :first-child/:last-child/:only-child con !important, MAS especificas que
     el `border: 0` de arriba: hay que apagarlas una por una o dejan ticks
     verticales sueltos dentro de la tarjeta apilada */
  .primary-content .table-list > tbody > tr > td:first-child,
  .primary-content .table-list > tbody > tr > td:last-child,
  .primary-content .table-list > tbody > tr > td:only-child,
  .dataTables_wrapper table.table-list tr:last-child td:first-child,
  .dataTables_wrapper table.table-list tr:last-child td:last-child,
  .dataTables_wrapper table.table-list tr:last-child td:only-child {
    border: 0 !important;
    border-radius: 0 !important;
  }

  /* Primera celda = titulo de la tarjeta (nº de nota, servicio, asunto).
     Sus enlaces heredan el color: la fila entera ya es clickable, un bloque
     rosado de dos lineas competia con el chip de estado */
  .primary-content .table-list > tbody > tr > td:first-child {
    display: block;
    flex: 1 1 auto;
    order: 0;
    padding-top: 0;
    color: var(--xc-text);
    font-size: 0.95rem;
    font-weight: 600;
  }

  .primary-content .table-list > tbody > tr > td:first-child a {
    color: inherit;
  }

  .primary-content .table-list > tbody > tr > td:first-child .ticket-number {
    color: var(--xc-text-muted);
    font-weight: 500;
  }

  /* El chip de estado acompana al titulo en la misma linea */
  .primary-content .table-list > tbody > tr > td:has(> .label.status) {
    flex: 0 0 auto;
    order: 1;
    justify-content: flex-end;
    padding-top: 0;
  }

  /* Acciones al final y a lo ancho: se reparten la ultima linea */
  .primary-content .table-list > tbody > tr > td:has(.xc-table-action) {
    order: 9;
    flex: 1 1 40%;
    padding-top: 0.6rem;
  }

  .primary-content .table-list > tbody > tr > td:has(.xc-table-action) .xc-table-action,
  .primary-content .table-list > tbody > tr > td:has(.xc-table-action) form {
    width: 100%;
    justify-content: center;
  }

  /* "Sin Resultados" (dataTables_empty): celda unica centrada */
  .primary-content .table-list > tbody > tr > td:only-child {
    order: 0;
    justify-content: center;
    text-align: center !important;
    font-weight: 500;
  }

  /* El hover de escritorio pintaba la celda; en movil la tarjeta es el <tr> */
  .table-list > tbody > tr:hover > td {
    background-color: transparent !important;
  }

  .primary-content .table-list > tbody > tr:hover {
    background-color: var(--xc-surface-3);
    border-color: var(--xc-border-strong);
  }

  /* El buscador de DataTables trae un ancho fijo heredado y era el que
     provocaba el scroll horizontal de los listados (la tabla si cabia):
     ocupa el ancho disponible y nada mas */
  .dataTables_wrapper .dataTables_filter {
    float: none;
    width: 100%;
    text-align: left;
  }

  /* label en flex: con `width: 100%` sobre el input, el texto del label
     ("Search:", vacio en produccion pero no en todos los idiomas) lo empujaba
     fuera de la pantalla */
  .dataTables_wrapper .dataTables_filter label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    margin: 0;
  }

  .dataTables_wrapper .dataTables_filter input {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    margin-left: 0;
  }

  /* Filas de botones de formulario (guardar / cancelar / eliminar contacto):
     al envolver quedaban pegados entre si, sin aire vertical */
  .primary-content .form-group.text-center {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
  }

  .primary-content .form-group.text-center > .btn,
  .primary-content .form-group.text-center > input.btn,
  .primary-content .form-group.text-center > button {
    margin: 0;
  }

  /* Paginacion y contador: centrados y sin empujar el ancho */
  .dataTables_wrapper .dataTables_paginate {
    float: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 0.5rem;
  }

  .dataTables_wrapper .dataTables_info {
    float: none;
    text-align: center;
  }
}

/* Buscador de DataTables: lupa SVG clara sobre input oscuro */
.dataTables_wrapper .dataTables_filter label .form-control {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888f99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") rgba(0, 0, 0, 0.5) no-repeat 12px center;
  background-size: 16px 16px;
  padding: 7px 10px 7px 38px !important;
}

/* ============================================================================
   12. ETIQUETAS DE ESTADO — chips pildora con fondo suave
   ============================================================================ */

.label,
.label.status {
  display: inline-block;
  padding: 0.3em 0.85em;
  border-radius: var(--xc-radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}

.status-active,
.status-open,
.status-completed,
.status-paid,
.status-delivered,
.status-accepted,
.label-success {
  background-color: var(--xc-success-soft);
  border-color: var(--xc-success-border);
  color: var(--xc-success);
  --xc-chip-bg: var(--xc-success-soft);
  --xc-chip-border: var(--xc-success-border);
  --xc-chip-fg: var(--xc-success);
}

.status-suspended,
.status-terminated,
.status-fraud,
.status-unpaid,
.status-expired,
.status-transferred-away,
.status-lost,
.status-dead,
.label-danger {
  background-color: var(--xc-danger-soft);
  border-color: var(--xc-danger-border);
  color: var(--xc-danger-text);
  --xc-chip-bg: var(--xc-danger-soft);
  --xc-chip-border: var(--xc-danger-border);
  --xc-chip-fg: var(--xc-danger-text);
}

.status-answered,
.status-pending,
.status-pending-transfer,
.status-pending-registration,
.status-redemption,
.status-grace,
.status-onhold,
.status-payment-pending,
.status-collections,
.label-warning {
  background-color: var(--xc-warning-soft);
  border-color: var(--xc-warning-border);
  color: var(--xc-warning);
  --xc-chip-bg: var(--xc-warning-soft);
  --xc-chip-border: var(--xc-warning-border);
  --xc-chip-fg: var(--xc-warning);
}

.status-inprogress,
.status-customer-reply,
.label-info {
  background-color: var(--xc-info-soft);
  border-color: var(--xc-info-border);
  color: var(--xc-info);
  --xc-chip-bg: var(--xc-info-soft);
  --xc-chip-border: var(--xc-info-border);
  --xc-chip-fg: var(--xc-info);
}

.status-closed,
.status-cancelled,
.status-refunded,
.status-draft,
.label-default {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: var(--xc-border);
  color: var(--xc-text-muted);
}

/* ============================================================================
   13. ALERTAS Y BADGES
   ============================================================================ */

.alert {
  border-radius: var(--xc-radius-lg);
  border: 1px solid transparent;
}

.alert-success {
  background-color: var(--xc-success-soft);
  border-color: var(--xc-success-border);
  color: var(--xc-success);
}

.alert-danger {
  background-color: var(--xc-danger-soft);
  border-color: var(--xc-danger-border);
  color: var(--xc-danger-text);
}

.alert-warning {
  background-color: var(--xc-warning-soft);
  border-color: var(--xc-warning-border);
  color: var(--xc-warning);
}

.alert-info {
  background-color: var(--xc-info-soft);
  border-color: var(--xc-info-border);
  color: var(--xc-info);
}

.alert .alert-link,
/* Enlaces de texto dentro de una alerta. Los botones quedan fuera: el
   subrayado (y el color heredado) los deformaba */
.alert a:not(.btn) {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}

/* Alerta con accion al costado (p. ej. nota de cobro impaga + Pagar) */
.xc-alert-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Pildora que toma el color de la alerta que la contiene (ambar en
   warning, rojo en danger) sin quedar nunca texto sobre su mismo color */
.xc-alert-btn {
  padding: 0.35rem 1.05rem;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  background-color: transparent;
  border: 1px solid currentColor;
  color: inherit;
  text-decoration: none;
}

.xc-alert-btn:hover,
.xc-alert-btn:focus,
.xc-alert-btn:active {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: currentColor;
  color: inherit;
  text-decoration: none;
}

.alert .close {
  color: inherit;
  text-shadow: none;
}

.badge {
  border-radius: var(--xc-radius-full);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.badge-primary { background-color: var(--xc-accent); color: #ffffff; }
.badge-secondary { background-color: var(--xc-surface-3); color: var(--xc-text-secondary); }
.badge-success { background-color: var(--xc-success-soft); color: var(--xc-success); border: 1px solid var(--xc-success-border); }
.badge-danger { background-color: var(--xc-danger-soft); color: var(--xc-danger-text); border: 1px solid var(--xc-danger-border); }
.badge-warning { background-color: var(--xc-warning-soft); color: var(--xc-warning); border: 1px solid var(--xc-warning-border); }
.badge-info { background-color: var(--xc-accent); color: #ffffff; }
.badge-light { background-color: var(--xc-surface-3); color: var(--xc-text-secondary); }
.badge-dark { background-color: var(--xc-background-elevated); color: var(--xc-text-secondary); }

.network-issue-alert {
  background-color: var(--xc-warning-soft);
  border-color: var(--xc-warning-border);
  color: var(--xc-warning);
}

/* ============================================================================
   14. DROPDOWNS, POPOVERS Y TOOLTIPS — vidrio oscuro
   ============================================================================ */

.dropdown-menu {
  background-color: var(--xc-glass-bg-strong);
  -webkit-backdrop-filter: var(--xc-glass-blur);
  backdrop-filter: var(--xc-glass-blur);
  border: var(--xc-glass-border);
  border-radius: var(--xc-radius-lg);
  box-shadow: var(--xc-shadow-xl);
  padding: 0.5rem;
}

.dropdown-menu .dropdown-item {
  color: var(--xc-text-secondary);
  border-radius: var(--xc-radius-md);
  font-size: 0.875rem;
  transition: background-color var(--xc-transition-fast), color var(--xc-transition-fast);
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--xc-text);
}

.dropdown-menu .dropdown-item a {
  color: inherit;
}

.dropdown-divider {
  border-top-color: var(--xc-border);
}

.dropdown-header {
  color: var(--xc-text-subtle);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.popover {
  background-color: var(--xc-surface-2);
  border: 1px solid var(--xc-border-strong);
  border-radius: var(--xc-radius-lg);
  box-shadow: var(--xc-shadow-xl);
}

.popover-header {
  background-color: var(--xc-background-elevated);
  border-bottom: 1px solid var(--xc-border);
  color: var(--xc-text);
  border-top-left-radius: calc(var(--xc-radius-lg) - 1px);
  border-top-right-radius: calc(var(--xc-radius-lg) - 1px);
}

.popover-body {
  color: var(--xc-text-secondary);
}

.bs-popover-bottom .arrow::after,
.bs-popover-auto[x-placement^="bottom"] .arrow::after {
  border-bottom-color: var(--xc-surface-2);
}

.bs-popover-top .arrow::after,
.bs-popover-auto[x-placement^="top"] .arrow::after {
  border-top-color: var(--xc-surface-2);
}

.bs-popover-bottom .popover-header::before,
.bs-popover-auto[x-placement^="bottom"] .popover-header::before {
  border-bottom-color: var(--xc-background-elevated);
}

.popover-user-notifications .popover-body {
  padding: 0;
}

.popover-user-notifications ul li {
  border-bottom: 1px solid var(--xc-border-light);
}

.popover-user-notifications ul li a {
  color: var(--xc-text-secondary);
}

.popover-user-notifications ul li a:hover {
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--xc-text);
}

.tooltip .tooltip-inner {
  background-color: var(--xc-surface-3);
  color: var(--xc-text);
  border-radius: var(--xc-radius-md);
  font-family: var(--xc-font-body);
}

.bs-tooltip-top .arrow::before,
.bs-tooltip-auto[x-placement^="top"] .arrow::before { border-top-color: var(--xc-surface-3); }
.bs-tooltip-bottom .arrow::before,
.bs-tooltip-auto[x-placement^="bottom"] .arrow::before { border-bottom-color: var(--xc-surface-3); }
.bs-tooltip-left .arrow::before,
.bs-tooltip-auto[x-placement^="left"] .arrow::before { border-left-color: var(--xc-surface-3); }
.bs-tooltip-right .arrow::before,
.bs-tooltip-auto[x-placement^="right"] .arrow::before { border-right-color: var(--xc-surface-3); }

/* ============================================================================
   15. MODALES
   ============================================================================ */

/* Receta glass calcada de los modales de xtreamcast.co
   (ContactModal.module.css): overlay oscuro con blur 28px, tarjeta
   rgba(255,255,255,0.1) con blur 64px saturado, borde sutil, rim de luz
   superior y cierre en chip. Aplica a TODOS los modales BS4 del sitio. */

.modal-backdrop.show {
  background-color: rgba(0, 0, 0, 0.55);
  opacity: 1;
  -webkit-backdrop-filter: blur(28px);
  backdrop-filter: blur(28px);
}

.modal-content {
  background-color: var(--xc-surface);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--xc-radius-2xl);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 24px 60px rgba(0, 0, 0, 0.55);
  color: var(--xc-text-secondary);
  overflow: hidden;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .modal-content {
    background-color: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: saturate(180%) blur(64px);
    backdrop-filter: saturate(180%) blur(64px);
  }
}

.modal .modal-header {
  background-color: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.modal .modal-title {
  color: var(--xc-text);
  font-family: 'Outfit', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.modal .modal-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1rem 1.5rem;
}

.modal .modal-footer .btn {
  min-width: 100px;
}

/* Cierre en chip cuadrado (34px), como el closeButton del sitio */
.modal .close {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: var(--xc-radius-md);
  color: var(--xc-text);
  font-size: 1.1rem;
  text-shadow: none;
  opacity: 1;
  transition: background-color var(--xc-transition-fast);
}

.modal .close:hover {
  background-color: rgba(255, 255, 255, 0.18);
  color: var(--xc-text);
  opacity: 1;
}

/* Modales de confirmacion del carrito (eliminar articulo): el icono fa-3x
   gigante pasa a chip circular de acento y el contenido queda centrado */
.modal-remove-item .modal-body {
  text-align: center;
  padding: 2rem 2rem 1.25rem;
}

.modal-remove-item .modal-title {
  display: block;
  margin-top: 0.25rem;
}

.modal-remove-item .modal-title i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 0.85rem;
  border-radius: 50%;
  background-color: var(--xc-accent-soft);
  color: var(--xc-accent);
  font-size: 1.4rem;
}

.modal-remove-item .modal-title span {
  display: block;
}

.modal-localisation .modal-body {
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(255, 43, 118, 0.1) 0%, transparent 65%);
  border-radius: var(--xc-radius-2xl);
}

.modal-localisation .item-selector .item {
  padding: 6px;
  border: 1px solid var(--xc-border);
  border-radius: var(--xc-radius-md);
  color: var(--xc-text-secondary);
  transition: background-color var(--xc-transition-fast), border-color var(--xc-transition-fast), color var(--xc-transition-fast);
}

.modal-localisation .item-selector .item:hover {
  background-color: var(--xc-surface-2);
  border-color: var(--xc-border-strong);
  color: var(--xc-text);
}

.modal-localisation .item-selector .item.active {
  background-color: var(--xc-accent-soft);
  border-color: var(--xc-accent-border);
  color: var(--xc-text);
}

/* ── Modal de pago de facturas (xc-pay-*) ──────────────────────────────
   Paridad 1:1 con PaymentModal.tsx del panel XtreamCast: overlay oscuro
   con blur, tarjeta max-w-md sobre --xc-background, header con gradiente
   rosa/purpura, resumen de la factura, filas de pasarela con placa de
   logo #262b35 + radio de acento, tarjeta guardada destacada con badge
   verde, acordeon punteado "Agregar nuevo metodo" y boton Pagar Ahora.
   Markup en viewinvoice.tpl; datos via includes/hooks/
   xc_invoice_payment_modal.php. */

@keyframes xc-pay-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes xc-pay-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

body.xc-pay-lock {
  overflow: hidden;
}

.xc-pay-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background-color: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* .w-hidden (theme.css) no lleva !important y carga antes que esta hoja:
   sin esta regla, los display:flex de xc-pay-* lo pisarian en la cascada */
.xc-pay-overlay.w-hidden,
.xc-pay-open.w-hidden,
.xc-pay-submit-idle.w-hidden,
.xc-pay-submit-busy.w-hidden,
.xc-pay-delete.w-hidden {
  display: none;
}

.xc-pay-card {
  position: relative;
  width: 100%;
  max-width: 28rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  border: 1px solid rgba(55, 65, 81, 0.5);
  border-radius: var(--xc-radius-xl);
  background-color: var(--xc-background);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.55);
  animation: xc-pay-fade-in 0.3s ease-in-out;
  text-align: left;
}

/* Header con gradiente */
.xc-pay-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(55, 65, 81, 0.5);
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.08), rgba(168, 85, 247, 0.05));
}

.xc-pay-head-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.xc-pay-head-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--xc-radius-lg);
  background-color: var(--xc-accent);
  color: #ffffff;
}

.xc-pay-head-icon svg {
  width: 20px;
  height: 20px;
}

.xc-pay-head-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.xc-pay-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--xc-text);
  line-height: 1.4;
}

.xc-pay-subtitle {
  font-size: 0.75rem;
  color: #6b7280;
  line-height: 1.4;
}

.xc-pay-close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0.375rem;
  border: 0;
  border-radius: var(--xc-radius-md);
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  transition: color var(--xc-transition-fast), background-color var(--xc-transition-fast);
}

.xc-pay-close:hover {
  color: var(--xc-text);
  background-color: rgba(255, 255, 255, 0.1);
}

.xc-pay-close svg {
  width: 20px;
  height: 20px;
}

/* Cuerpo */
.xc-pay-body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.5rem;
}

/* Resumen de la factura */
.xc-pay-summary {
  padding: 1rem;
  border: 1px solid rgba(55, 65, 81, 0.3);
  border-radius: var(--xc-radius-lg);
  background-color: var(--xc-surface);
}

.xc-pay-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.xc-pay-summary-key {
  font-size: 0.75rem;
  color: #6b7280;
}

.xc-pay-summary-date {
  font-size: 0.875rem;
  color: #d1d5db;
}

.xc-pay-summary-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(55, 65, 81, 0.3);
}

.xc-pay-summary-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #9ca3af;
}

.xc-pay-summary-amount {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--xc-text);
}

/* Etiqueta de seleccion */
.xc-pay-select-label {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Filas de pasarela */
.xc-pay-methods {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.xc-pay-method {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  padding: 0.875rem;
  border: 2px solid rgba(55, 65, 81, 0.4);
  border-radius: var(--xc-radius-md);
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: border-color var(--xc-transition-fast), background-color var(--xc-transition-fast), box-shadow var(--xc-transition-fast);
}

.xc-pay-method:hover {
  border-color: rgba(75, 85, 99, 0.6);
  background-color: rgba(255, 255, 255, 0.02);
}

.xc-pay-method.is-selected {
  border-color: var(--xc-accent);
  background-color: var(--xc-accent-softer);
  box-shadow: 0 10px 15px -3px rgba(255, 43, 118, 0.05), 0 4px 6px -4px rgba(255, 43, 118, 0.05);
}

.xc-pay-method--saved {
  padding: 1rem;
}

/* Placa del logo */
.xc-pay-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 56px;
  height: 40px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--xc-radius-md);
  background-color: #262b35;
}

.xc-pay-plate img {
  height: 24px;
  width: auto;
  object-fit: contain;
}

.xc-pay-plate img.is-getnet {
  height: 20px;
}

.xc-pay-plate--brand {
  border-color: rgba(55, 65, 81, 0.3);
  background-color: rgba(255, 255, 255, 0.05);
}

.xc-pay-plate--brand img {
  height: 32px;
}

.xc-pay-icon-generic {
  width: 24px;
  height: 24px;
  color: #9ca3af;
}

/* Nombre + subtitulo */
.xc-pay-method-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.xc-pay-method-name-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.xc-pay-method-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--xc-text);
}

.xc-pay-method-sub {
  margin-top: 0.125rem;
  font-size: 0.75rem;
  color: #6b7280;
}

.xc-pay-method--saved .xc-pay-method-sub {
  color: #9ca3af;
}

/* Badge "Recomendado" (tarjeta guardada) */
.xc-pay-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  background-color: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  font-size: 10px;
  font-weight: 500;
}

.xc-pay-badge svg {
  width: 12px;
  height: 12px;
}

/* Radio de seleccion */
.xc-pay-radio {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 2px solid #4b5563;
  border-radius: 50%;
  transition: border-color var(--xc-transition-fast);
}

.xc-pay-method.is-selected .xc-pay-radio {
  border-color: var(--xc-accent);
}

.xc-pay-radio-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--xc-accent);
  opacity: 0;
  transition: opacity var(--xc-transition-fast);
}

.xc-pay-method.is-selected .xc-pay-radio-dot {
  opacity: 1;
}

/* Acordeon "Agregar nuevo metodo de pago" */
.xc-pay-add {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.875rem;
  border: 2px dashed rgba(55, 65, 81, 0.5);
  border-radius: var(--xc-radius-md);
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: border-color var(--xc-transition-fast), background-color var(--xc-transition-fast);
}

.xc-pay-add:hover {
  border-color: rgba(75, 85, 99, 0.7);
  background-color: rgba(255, 255, 255, 0.02);
}

.xc-pay-add-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--xc-radius-md);
  background-color: rgba(255, 255, 255, 0.05);
  color: #d1d5db;
}

.xc-pay-add-plate svg {
  width: 20px;
  height: 20px;
}

.xc-pay-add-label {
  flex: 1;
  font-size: 0.875rem;
  font-weight: 500;
  color: #e5e7eb;
}

.xc-pay-add-chevron {
  width: 16px;
  height: 16px;
  color: #9ca3af;
  transition: transform 0.3s ease;
}

.xc-pay-add.is-open .xc-pay-add-chevron {
  transform: rotate(180deg);
}

.xc-pay-collapse {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.3s ease-out, opacity 0.3s ease-out, margin-top 0.3s ease-out;
}

.xc-pay-collapse.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 0.625rem;
}

.xc-pay-collapse-inner {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  overflow: hidden;
}

/* Boton Pagar Ahora del modal */
.xc-pay-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.875rem;
  border: 0;
  border-radius: var(--xc-radius-lg);
  background-color: var(--xc-accent);
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  transition: box-shadow var(--xc-transition-fast), transform var(--xc-transition-fast), background-color var(--xc-transition-fast);
}

.xc-pay-submit:hover:not(:disabled) {
  box-shadow: 0 10px 15px -3px rgba(255, 43, 118, 0.2), 0 4px 6px -4px rgba(255, 43, 118, 0.2);
  transform: scale(1.01);
}

.xc-pay-submit:active:not(:disabled) {
  transform: scale(0.99);
}

.xc-pay-submit:disabled {
  background-color: #4b5563;
  opacity: 0.3;
  cursor: not-allowed;
}

/* Procesando: igual que el panel, el boton conserva el acento atenuado */
.xc-pay-submit.is-busy:disabled {
  background-color: var(--xc-accent);
}

.xc-pay-submit-idle,
.xc-pay-submit-busy {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.xc-pay-submit svg {
  width: 16px;
  height: 16px;
}

.xc-pay-spin {
  animation: xc-pay-spin 1s linear infinite;
}

/* Enlace discreto para eliminar la tarjeta guardada (conserva la accion
   del bloque nativo de la pasarela, que el modal deja oculto) */
.xc-pay-delete {
  align-self: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--xc-text-subtle);
  font-size: 0.75rem;
  text-decoration: underline;
  cursor: pointer;
  transition: color var(--xc-transition-fast);
}

.xc-pay-delete:hover {
  color: var(--xc-danger, #ff7f7f);
}

/* Disparador "Pagar Ahora" que reemplaza al bloque nativo en la factura */
.xc-pay-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  margin-top: 0.75rem;
  padding: 0.75rem 1.75rem;
  border: 0;
  border-radius: var(--xc-radius-lg);
  background-color: var(--xc-accent);
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--xc-transition-fast), box-shadow var(--xc-transition-fast), transform var(--xc-transition-fast);
}

.xc-pay-open:hover {
  background-color: var(--xc-accent-hover);
  box-shadow: 0 10px 15px -3px rgba(255, 43, 118, 0.2), 0 4px 6px -4px rgba(255, 43, 118, 0.2);
  transform: scale(1.01);
}

.xc-pay-open svg {
  width: 16px;
  height: 16px;
}

/* ============================================================================
   16. PAGINACION, TABS Y LISTAS
   ============================================================================ */

.pagination .page-link {
  color: var(--xc-text-secondary);
  background-color: var(--xc-surface);
  border-color: var(--xc-border);
}

.pagination .page-link:hover {
  color: var(--xc-text);
  background-color: var(--xc-surface-2);
  border-color: var(--xc-border-strong);
}

.pagination .page-item.active .page-link {
  color: #ffffff;
  background-color: var(--xc-accent-dark);
  border-color: var(--xc-accent-dark);
}

.pagination .page-item.disabled .page-link {
  color: var(--xc-text-subtle);
  background-color: var(--xc-surface);
  border-color: var(--xc-border-light);
}

.nav-tabs {
  border-bottom: 1px solid var(--xc-border);
}

.nav-tabs .nav-link {
  color: var(--xc-text-muted);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-weight: 500;
  transition: color var(--xc-transition-fast), border-color var(--xc-transition-fast);
}

.nav-tabs .nav-link:hover {
  color: var(--xc-text);
  border-color: transparent;
  border-bottom-color: var(--xc-border-strong);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--xc-text);
  background-color: transparent;
  border-color: transparent;
  border-bottom: 2px solid var(--xc-accent);
}

.nav-pills .nav-link {
  color: var(--xc-text-secondary);
  border-radius: var(--xc-radius-full);
}

.nav-pills .nav-link.active {
  background-color: var(--xc-accent-dark);
  color: #ffffff;
}

.list-group-item {
  background-color: var(--xc-surface);
  border-color: var(--xc-border-light);
  color: var(--xc-text-secondary);
}

.list-group-item-action:hover,
.list-group-item-action:focus {
  background-color: var(--xc-surface-2);
  color: var(--xc-text);
}

.list-group-item.active {
  background-color: var(--xc-accent-soft);
  border-color: var(--xc-accent-border);
  color: var(--xc-text);
}

/* ============================================================================
   17. FOOTER
   ============================================================================ */

footer.footer {
  margin: 0;
  padding: 28px 0 36px;
  background-color: var(--xc-background);
  border: 0; /* sin linea de separacion */
  color: var(--xc-text-muted);
  font-size: 0.9rem;
  text-align: center;
}

footer.footer .nav-link {
  color: var(--xc-text-muted);
  font-size: 0.9rem;
  transition: color var(--xc-transition-fast);
}

footer.footer .nav-link:hover {
  color: var(--xc-text);
}

footer.footer .btn {
  background-color: var(--xc-surface);
  border: 1px solid var(--xc-border);
  color: var(--xc-text-secondary);
  border-radius: var(--xc-radius-full);
  font-size: 0.8125rem;
  transition: background-color var(--xc-transition-fast), border-color var(--xc-transition-fast), color var(--xc-transition-fast);
}

footer.footer .btn:hover {
  background-color: var(--xc-surface-2);
  border-color: var(--xc-border-strong);
  color: var(--xc-text);
}

footer.footer .btn-icon {
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
}

footer.footer .copyright {
  color: var(--xc-text-subtle);
  font-size: 0.8125rem;
}

footer.footer .footer-brand-logo {
  height: 34px;
  width: auto;
  display: block;
  margin: 0 auto 1rem;
  opacity: 0.9;
}

footer.footer .footer-payment-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

footer.footer .footer-payment-icons img {
  height: 22px;
  width: auto;
  opacity: 0.55;
  filter: grayscale(100%) brightness(1.2);
  transition: opacity var(--xc-transition-base), filter var(--xc-transition-base);
}

footer.footer .footer-payment-icons img:hover {
  opacity: 1;
  filter: none;
}

/* Volver-al-admin flotante (variante para visitantes, viene del footer) */
.btn-return-to-admin,
.btn-return-to-admin:hover {
  background-color: var(--xc-surface-3) !important;
  color: var(--xc-text-secondary) !important;
}

/* ============================================================================
   18. LOGIN / REGISTRO / RECUPERAR CONTRASENA
   ============================================================================ */

body.page-login #main-body,
body.page-clientregister #main-body,
body.page-password-reset-container #main-body {
  background:
    radial-gradient(ellipse 55% 45% at 50% 0%, rgba(255, 43, 118, 0.09) 0%, transparent 65%);
}

.login-form .card,
.primary-content .card.mw-540 {
  border-radius: var(--xc-radius-2xl);
  box-shadow: var(--xc-shadow-card);
}

.login-form .card-footer a {
  color: var(--xc-accent);
}

.providerLinkingFeedback {
  color: var(--xc-text-secondary);
}

/* ============================================================================
   19. PAGINAS ESPECIFICAS Y CARRITO
   ============================================================================ */

.domain-search .input-group .form-control {
  background-color: rgba(0, 0, 0, 0.5);
}

.kb-article-content,
.article-content {
  color: var(--xc-text-secondary);
}

/* Base de conocimientos: sin sidebar derecha, contenido a ancho completo */
body.page-knowledgebase .xc-page-sidebar,
body.page-knowledgebasecat .xc-page-sidebar,
body.page-knowledgebasearticle .xc-page-sidebar {
  display: none;
}

body.page-knowledgebase .primary-content,
body.page-knowledgebasecat .primary-content,
body.page-knowledgebasearticle .primary-content {
  flex: 0 0 100%;
  max-width: 100%;
}

/* Cards de categoria con la misma altura (mb-4 = 1.5rem) */
.kb-category {
  height: calc(100% - 1.5rem);
}

.kb-category .card-body {
  display: block;
  height: 100%;
  color: var(--xc-text-secondary);
}

/* Bug de esquinas: el fondo hover de los hijos (a.card-body de la categoria
   y el ultimo kb-article-item de la lista) se salia del radio del card
   porque el card no recorta su contenido */
.kb-category,
body.page-knowledgebase .card,
body.page-knowledgebasecat .card,
body.page-knowledgebasearticle .card {
  overflow: hidden;
}

/* theme.min.css pinta el hover de KB casi blanco (#f5f5f5) */
.kb-category a:hover {
  background-color: var(--xc-surface-2);
}

.kb-article-item {
  color: var(--xc-text-secondary);
}

.kb-article-item:hover {
  background-color: var(--xc-surface-2);
  color: var(--xc-text);
}

.kb-article-item small {
  color: var(--xc-text-muted);
}

.text-black-50 {
  color: var(--xc-text-subtle) !important;
}

/* Anuncios (ocultos del menu, pero la pagina existe si llegan por URL) */
.announcements .announcement article {
  background-color: var(--xc-surface);
  border-left: 4px solid var(--xc-accent);
}

/* Boton "volver al admin" fuera de la vista (pedido explicito; para salir
   del masquerade queda logout del rail) */
.btn-return-to-admin {
  display: none !important;
}

/* --- Factura standalone (viewinvoice.tpl) ---
   Esta pagina trae su propio <head> y carga invoice.min.css, un bundle
   Bootstrap CLARO completo (body/card/table en blanco). custom.css se
   carga despues (ver includes/theme-css.tpl) y aqui se reviste en oscuro
   el documento entero. Sin topbar ni rail: es una vista de documento. */
body.page-viewinvoice {
  padding-top: 0;
  background-color: var(--xc-background);
  color: var(--xc-text-secondary);
}

.xc-invoice-nav {
  max-width: 850px;
  margin: 1.25rem auto 0;
  padding: 0 1rem;
}

.invoice-container {
  background-color: var(--xc-surface-2);
  border: 1px solid var(--xc-border);
  border-radius: 16px;
  color: var(--xc-text-secondary);
  padding: 3rem;
}

@media (max-width: 767.98px) {
  /* invoice.min.css le pone `margin: 15px` y `.container-fluid` un
     `width: 100%`: sumados desbordaban la pantalla 30px (la pagina salia con
     scroll horizontal). Con `width: auto` los margenes caben dentro */
  .invoice-container {
    width: auto;
    margin-left: 12px;
    margin-right: 12px;
    padding: 1.25rem;
  }
}

.page-viewinvoice h1,
.page-viewinvoice h2,
.page-viewinvoice h3,
.page-viewinvoice h4,
.page-viewinvoice strong,
.invoice-container .card-title {
  color: var(--xc-text);
}

.page-viewinvoice h3 {
  font-family: var(--xc-font-display);
  letter-spacing: -0.01em;
}

.page-viewinvoice hr {
  border-top-color: var(--xc-border);
}

.page-viewinvoice address,
.invoice-container .small-text {
  color: var(--xc-text-muted);
}

/* Estado de la factura: chip pildora con los colores del tema, en vez
   del texto gigante en rojo/verde planos de invoice.min.css */
.invoice-container .invoice-status {
  margin: 0 0 0.5rem;
}

.invoice-container .invoice-status span {
  display: inline-block;
  padding: 0.35em 1em;
  border-radius: var(--xc-radius-full);
  border: 1px solid transparent;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.invoice-container .invoice-status .paid {
  background-color: var(--xc-success-soft);
  border-color: var(--xc-success-border);
  color: var(--xc-success);
}

.invoice-container .invoice-status .unpaid,
.invoice-container .invoice-status .collections {
  background-color: var(--xc-danger-soft);
  border-color: var(--xc-danger-border);
  color: var(--xc-danger-text);
}

.invoice-container .invoice-status .refunded {
  background-color: var(--xc-info-soft);
  border-color: var(--xc-info-border);
  color: var(--xc-info);
}

.invoice-container .invoice-status .draft,
.invoice-container .invoice-status .cancelled {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: var(--xc-border);
  color: var(--xc-text-muted);
}

/* Tablas del documento (items y transacciones) */
.invoice-container .table,
.invoice-container .table td,
.invoice-container .table th {
  color: var(--xc-text-secondary);
  border-color: var(--xc-border-light);
}

.invoice-container .table thead td,
.invoice-container .table thead th {
  color: var(--xc-text-muted);
  border-bottom-color: var(--xc-border);
}

.invoice-container td.total-row {
  background-color: rgba(255, 255, 255, 0.03);
  color: var(--xc-text);
}

.invoice-container .card {
  background-color: transparent;
  border-color: var(--xc-border);
}

.invoice-container .card-header {
  background-color: rgba(255, 255, 255, 0.02);
  border-bottom-color: var(--xc-border);
}

.invoice-container .transactions-container {
  margin-top: 1.25rem;
}

/* Logo del documento: SVG blanco del tema en pantalla, logo del ajuste
   "Logo URL" al imprimir (ver viewinvoice.tpl). El selector repite
   .invoice-header porque invoice.min.css ya fija
   `.invoice-container .invoice-header img { max-width: 100% }` */
.invoice-container .invoice-header .xc-invoice-logo img {
  max-width: 230px;
  height: auto;
}

.xc-invoice-logo-print {
  display: none;
}

/* Formulario de cambio de pasarela: existe solo para que el modal de pago
   pueda cambiar de metodo antes de cobrar, nunca se muestra. `.w-hidden` no
   alcanza: invoice.min.css trae su propio bundle de Bootstrap y su
   `.form-inline { display: flex }` se carga despues de theme.min.css */
form[data-role="paymethod-switch"] {
  display: none !important;
}

/* ----------------------------------------------------------------------------
   Nota de cobro en movil
   ----------------------------------------------------------------------------
   La tabla de items reservaba un 20% fijo para el importe (los montos en CLP
   se partian en dos lineas) y la de transacciones metia cuatro columnas en
   390px, con los encabezados quebrados. Las acciones del pie, flotadas a la
   derecha, quedaban amontonadas en la esquina.
   ---------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .invoice-container .table td,
  .invoice-container .table th {
    padding: 0.6rem 0.5rem;
  }

  /* El importe manda sobre su ancho: se ajusta al contenido y no se parte */
  .invoice-container .table td[width],
  .invoice-container .table tbody td:last-child {
    width: 1%;
    white-space: nowrap;
  }

  .invoice-container td.total-row.text-right {
    text-align: right;
  }

  /* Transacciones: cada fila pasa a tarjeta "etiqueta … valor" */
  .invoice-container .xc-inv-transactions,
  .invoice-container .xc-inv-transactions tbody {
    display: block;
    width: 100%;
  }

  .invoice-container .xc-inv-transactions thead {
    display: none;
  }

  .invoice-container .xc-inv-transactions > tbody > tr {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
    padding: 0.7rem 0.9rem;
    background-color: var(--xc-surface-2);
    border: 1px solid var(--xc-border);
    border-radius: 12px;
  }

  .invoice-container .xc-inv-transactions > tbody > tr > td {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex: 1 1 100%;
    width: auto;
    padding: 0.22rem 0;
    border: 0 !important;
    text-align: left !important;
    white-space: normal;
    word-break: break-word;
  }

  .invoice-container .xc-inv-transactions > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 auto;
    margin-right: auto;
    color: var(--xc-text-muted);
  }

  /* Fila de balance (label con colspan) y "sin transacciones" (colspan 4) */
  .invoice-container .xc-inv-transactions > tbody > tr > td[colspan] {
    justify-content: center;
    text-align: center !important;
  }

  .invoice-container .xc-inv-transactions > tbody > tr > td[colspan="3"] {
    flex: 1 1 auto;
    justify-content: flex-start;
    text-align: left !important;
  }

  .invoice-container .xc-inv-transactions > tbody > tr > td[colspan="3"] + td {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* --------------------------------------------------------------------------
     Upgrade de opciones configurables (upgrade.php?type=configoptions)
     --------------------------------------------------------------------------
     Cuatro columnas (opcion / actual / flecha / nueva) con selects dentro: no
     caben en 390px y la pagina salia con scroll horizontal. Cada opcion pasa a
     tarjeta: nombre arriba, valor actual etiquetado y el selector a lo ancho.
     -------------------------------------------------------------------------- */
  .xc-upgrade-config,
  .xc-upgrade-config > tbody {
    display: block;
    width: 100%;
  }

  .xc-upgrade-config > thead,
  .xc-upgrade-config .xc-upg-arrow {
    display: none;
  }

  .xc-upgrade-config > tbody > tr {
    display: block;
    margin-bottom: 0.75rem;
    padding: 0.9rem 1rem;
    background-color: var(--xc-surface-2) !important;
    border: 1px solid var(--xc-border);
    border-radius: 14px;
  }

  .xc-upgrade-config > tbody > tr > td {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    width: auto;
    padding: 0.3rem 0;
    background-color: transparent !important;
    border: 0 !important;
  }

  .xc-upgrade-config > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 auto;
    margin-right: auto;
    color: var(--xc-text-muted);
    font-size: 0.78rem;
  }

  /* Nombre de la opcion: titulo de la tarjeta */
  .xc-upgrade-config > tbody > tr > td:first-child {
    display: block;
    padding-top: 0;
    color: var(--xc-text);
    font-weight: 600;
  }

  /* El selector de la opcion nueva ocupa su propia linea, completa */
  .xc-upgrade-config > tbody > tr > td:last-child {
    display: block;
  }

  .xc-upgrade-config > tbody > tr > td:last-child::before {
    display: block;
    margin-bottom: 0.3rem;
  }

  .xc-upgrade-config .form-group {
    margin-bottom: 0;
  }

  .xc-upgrade-config select.form-control,
  .xc-upgrade-config input.form-control {
    width: 100%;
    max-width: 100%;
  }

  /* Acciones del pie: sin float y repartidas a lo ancho */
  .xc-invoice-actions {
    float: none !important;
    display: flex;
    width: 100%;
    gap: 0.6rem;
    margin-top: 1.25rem;
  }

  .xc-invoice-actions .btn {
    flex: 1 1 50%;
    justify-content: center;
  }
}

/* Al imprimir vuelve a documento claro: tinta y legibilidad en papel */
@media print {
  body.page-viewinvoice {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
  }

  /* El SVG blanco desapareceria sobre el papel: se cambia por el logo del
     ajuste "Logo URL" (o el nombre de la empresa si no hay) */
  .xc-invoice-logo {
    display: none !important;
  }

  .xc-invoice-logo-print {
    display: block !important;
  }

  .invoice-container {
    background-color: #ffffff !important;
    border-color: #dddddd !important;
    color: #1a1a1a !important;
    padding: 0 !important;
  }

  .page-viewinvoice address,
  .invoice-container .small-text,
  .invoice-container .table,
  .invoice-container .table td,
  .invoice-container .table th {
    color: #1a1a1a !important;
  }

  .invoice-container td.total-row {
    background-color: #f4f4f4 !important;
  }

  .invoice-container .invoice-status span {
    border-color: #cccccc !important;
    color: #1a1a1a !important;
    background-color: transparent !important;
  }
}

/* El sidebar de Categorias/Acciones del carrito sobra: las categorias
   viven en el rail izquierdo (item Tienda) y Ver Carrito en el topbar */
#order-standard_cart .cart-sidebar,
#order-standard_cart .sidebar-collapsed {
  display: none !important;
}

#order-standard_cart .cart-body {
  flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
  margin-left: 0;
}

/* Sin linea bajo el titulo de la pagina del carrito */
#order-standard_cart .header-lined,
#order-standard_cart .header-lined h1,
#order-standard_cart .header-lined h2 {
  border-bottom: 0 !important;
}

/* Botones del resumen: proporciones consistentes y con respiro */
#order-standard_cart .btn-checkout {
  display: block;
  width: 100%;
  padding: 0.7rem 1.4rem;
  font-size: 0.9375rem;
  color: #ffffff;
  background: var(--xc-btn-primary-bg);
  background-image: none;
  border: 1px solid var(--xc-btn-primary-border);
  box-shadow: var(--xc-btn-primary-shadow);
}

#order-standard_cart .btn-checkout:hover:not(:disabled):not(.disabled) {
  color: #ffffff;
  background: var(--xc-btn-primary-bg-hover);
  border-color: var(--xc-btn-primary-border-hover);
}

#order-standard_cart .order-summary .btn-continue-shopping {
  display: block;
  width: 100%;
  margin-top: 0.6rem;
  padding: 0.6rem 1.4rem;
  font-size: 0.875rem;
  color: var(--xc-text);
  background-color: var(--xc-surface-2);
  border: 1px solid var(--xc-border);
}

#order-standard_cart .order-summary .btn-continue-shopping:hover {
  background-color: var(--xc-surface-3);
  border-color: var(--xc-border-strong);
}

#order-standard_cart .card,
#order-standard_cart .product,
#order-standard_cart .products .product,
#order-standard_cart .view-cart-items,
#order-standard_cart .order-summary {
  background-color: var(--xc-surface);
  border-color: var(--xc-border);
  color: var(--xc-text-secondary);
}

#order-standard_cart .product header,
#order-standard_cart .view-cart-items thead th {
  background-color: var(--xc-background-elevated);
  color: var(--xc-text);
  border-color: var(--xc-border);
}

#order-standard_cart .product h3,
#order-standard_cart .product .product-title {
  color: var(--xc-text);
}

#order-standard_cart .summary-container,
#order-standard_cart .cart-body {
  color: var(--xc-text-secondary);
}

.intl-tel-input .country-list {
  background-color: var(--xc-surface-2);
  border-color: var(--xc-border-strong);
  color: var(--xc-text);
}

.intl-tel-input .country-list .country.highlight {
  background-color: var(--xc-surface-3);
}

.intl-tel-input .country-list .divider {
  border-bottom-color: var(--xc-border);
}

.intl-tel-input .selected-flag .iti-arrow {
  border-top-color: var(--xc-text-muted);
}

.intl-tel-input .selected-flag .iti-arrow.up {
  border-bottom-color: var(--xc-text-muted);
}

.bootstrap-switch {
  border-color: var(--xc-border-strong);
  background-color: rgba(0, 0, 0, 0.4);
}

.bootstrap-switch .bootstrap-switch-label {
  background-color: var(--xc-surface-3);
  color: var(--xc-text);
}

/* --- Detalle de servicio (clientareaproductdetails + modulo xtreamcast) ---
   Pagina en una columna (sin sidebar; ver xcNoSidebarPages en header.tpl):
   encabezado con chip de estado y acciones visibles, pestanas pildora,
   tarjetas de datos compactas y tiles de plan/estadisticas del modulo. */

.xc-svc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
  margin: 0.25rem 0 1.4rem;
}

.xc-svc-group {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--xc-text-muted);
  margin: 0 0 0.3rem;
}

.xc-svc-title {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  font-family: var(--xc-font-display);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--xc-text);
  margin: 0;
}

.xc-svc-domain {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 0.9rem;
  color: var(--xc-text-muted);
}

.xc-svc-domain:hover {
  color: var(--xc-accent);
  text-decoration: none;
}

/* Fila de acciones: pildoras fantasma; la destructiva en rojo al final */
.xc-svc-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.xc-svc-action {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 1.05rem;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--xc-border-strong);
  color: var(--xc-text);
}

.xc-svc-action:hover {
  background-color: var(--xc-accent-soft);
  border-color: var(--xc-accent);
  color: var(--xc-text);
  text-decoration: none;
}

/* Accion con pane abierto (p. ej. Cambiar Contrasena): mismo estado
   visual que una pestana pildora activa */
.xc-svc-action.active {
  background-color: var(--xc-accent-soft);
  border-color: var(--xc-accent-border);
  color: var(--xc-accent);
}

.xc-svc-action-danger {
  background-color: transparent;
  border-color: var(--xc-danger-border);
  color: var(--xc-danger-text);
}

.xc-svc-action-danger:hover {
  background-color: var(--xc-danger-soft);
  border-color: var(--xc-danger);
  color: var(--xc-danger-text);
}

/* Pestanas pildora: viven DENTRO de la fila de acciones, a su izquierda
   (como grupo, para que no se separen entre si al hacer wrap) */
.xc-svc-tabs {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.xc-svc-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 1.05rem;
  border-radius: var(--xc-radius-full);
  font-size: 0.85rem;
  font-weight: 600;
  /* 1.5 como .btn de Bootstrap: el body usa 1.6 y la pildora quedaba mas
     alta que los botones de accion de la misma fila */
  line-height: 1.5;
  color: var(--xc-text-secondary);
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--xc-border);
}

.xc-svc-tab:hover {
  color: var(--xc-text);
  border-color: var(--xc-border-strong);
  text-decoration: none;
}

.xc-svc-tab.active {
  color: var(--xc-accent);
  background-color: var(--xc-accent-soft);
  border-color: var(--xc-accent-border);
}

/* Grid de tarjetas de datos (clave → valor) */
.xc-svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 0.9rem;
  margin-bottom: 1.75rem;
}

.xc-svc-card {
  background-color: var(--xc-surface-2);
  border: 1px solid var(--xc-border);
  border-radius: 14px;
  padding: 1.05rem 1.15rem;
}

.xc-svc-card-wide {
  grid-column: 1 / -1;
}

.xc-svc-card-title {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--xc-text-muted);
  margin: 0 0 0.35rem;
}

/* Filas apiladas estilo Apple: etiqueta pequena arriba, valor abajo,
   TODO alineado a la izquierda. Una sola estructura para cada campo
   (nada de mezclar filas de una y dos lineas segun el largo del valor:
   ese zigzag era lo que se leia como desorden) */
.xc-svc-row {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--xc-border-light);
}

.xc-svc-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.xc-svc-row > span {
  display: block;
  font-size: 0.78rem;
  color: var(--xc-text-muted);
  margin-bottom: 0.18rem;
}

.xc-svc-row > strong {
  display: block;
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--xc-text);
  overflow-wrap: break-word;
}

.xc-svc-row.is-warning > strong {
  color: var(--xc-warning);
}

.xc-svc-card-foot {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.9rem;
}

.xc-svc-card-foot .btn {
  padding: 0.4rem 0.95rem;
  font-size: 0.82rem;
  font-weight: 600;
}

.xc-svc-lastupdate {
  margin: 0.75rem 0 0;
  font-size: 0.75rem;
  color: var(--xc-text-subtle);
}

/* Complementos: cabecera de la tarjeta (nombre + chip de estado) sobre
   las mismas filas clave-valor del resumen del servicio */
.xc-addon-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--xc-border);
}

.xc-addon-name {
  margin: 0;
  font-family: var(--xc-font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--xc-text);
}

/* Barra de uso slim (uso de recursos y tile de ancho de banda) */
.xc-usage-bar {
  width: 100%;
  height: 6px;
  border-radius: var(--xc-radius-full);
  background-color: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin-top: 0.45rem;
}

.xc-usage-fill {
  height: 100%;
  border-radius: var(--xc-radius-full);
  background-color: var(--xc-accent);
  transition: width var(--xc-transition-base);
}

.xc-usage-fill.is-warn { background-color: var(--xc-warning); }
.xc-usage-fill.is-over { background-color: var(--xc-danger); }

/* Salida del modulo xtreamcast: aviso, CTA de acceso, tiles y chips */
.xc-svc-module .xc-section-title {
  margin-top: 1.6rem;
}

.xc-svc-notice {
  background-color: var(--xc-warning-soft);
  border: 1px solid var(--xc-warning-border);
  color: var(--xc-warning);
  border-radius: var(--xc-radius-lg);
  padding: 0.75rem 1.1rem;
  font-size: 0.9rem;
  text-align: center;
  margin-bottom: 1rem;
}

.xc-svc-access {
  text-align: center;
  margin: 0.25rem 0 0.5rem;
}

.xc-svc-access-btn {
  padding: 0.7rem 2.2rem;
  font-size: 1rem;
}

/* Tiles compactos de plan/estadisticas: acento de color en el borde
   izquierdo (misma rotacion de colores que las tiles del dashboard) */
.xc-stat-grid {
  display: grid;
  /* auto-fit (no auto-fill): sin columnas vacias sobrantes — los tiles se
     estiran a todo el ancho, alineados con las tarjetas de arriba */
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 0.75rem;
}

.xc-stat {
  background-color: var(--xc-surface-2);
  border: 1px solid var(--xc-border);
  border-left-width: 3px;
  border-radius: 14px;
  padding: 0.85rem 1rem;
}

.xc-stat.is-blue { border-left-color: var(--xc-info); }
.xc-stat.is-green { border-left-color: var(--xc-success); }
.xc-stat.is-pink { border-left-color: var(--xc-accent); }
.xc-stat.is-purple { border-left-color: #8b5cf6; }

.xc-stat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}

.xc-stat-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--xc-text-muted);
}

.xc-stat-emoji {
  font-size: 0.95rem;
  opacity: 0.85;
}

.xc-stat-value {
  font-family: var(--xc-font-display);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--xc-text);
}

.xc-stat-foot {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.72rem;
  color: var(--xc-text-muted);
}

/* Chips de funciones incluidas */
.xc-flag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.xc-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.9rem;
  border-radius: var(--xc-radius-full);
  font-size: 0.8rem;
  font-weight: 600;
  background-color: var(--xc-success-soft);
  border: 1px solid var(--xc-success-border);
  color: var(--xc-success);
}

.xc-flag i {
  font-size: 0.7rem;
}

/* --- Columna centrada con tarjetas apiladas ---
   Patron compartido por las paginas de formulario/checkout del servicio
   (resumen de upgrade y solicitud de cancelacion), mismo lenguaje que el
   checkout del carrito: un paso por tarjeta, de arriba hacia abajo. */
.xc-page-col {
  max-width: 720px;
  margin: 0 auto;
}

.xc-panel {
  background-color: var(--xc-surface-2);
  border: 1px solid var(--xc-border);
  border-radius: 14px;
  padding: 1.15rem 1.25rem;
  margin-bottom: 0.9rem;
}

/* Titulo de tarjeta: etiqueta discreta, NO un h2 gigante */
.xc-panel-title {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--xc-text-muted);
  margin: 0 0 0.4rem;
}

.xc-upg-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--xc-border-light);
  font-size: 0.93rem;
}

.xc-upg-item-name {
  color: var(--xc-text);
}

.xc-upg-item-name i {
  margin: 0 0.3rem;
  font-size: 0.7rem;
  color: var(--xc-text-subtle);
}

.xc-upg-item-price {
  font-weight: 600;
  color: var(--xc-text);
  white-space: nowrap;
}

/* Totales: escalonados de menor a mayor peso, el total final destacado */
.xc-upg-totals {
  padding-top: 0.7rem;
}

.xc-upg-total {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.28rem 0;
  font-size: 0.88rem;
  color: var(--xc-text-muted);
}

.xc-upg-total.is-discount {
  color: var(--xc-success);
}

.xc-upg-total.is-grand {
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--xc-border);
  font-family: var(--xc-font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--xc-text);
}

/* Promocion: input + boton fantasma en la misma linea (sin input-group:
   Bootstrap le quita el radio a los extremos y rompe la pildora) */
.xc-upg-promo {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.xc-upg-promo .form-control {
  flex: 1 1 220px;
}

.xc-upg-promo-btn {
  padding: 0.45rem 1.15rem;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--xc-border-strong);
  color: var(--xc-text);
}

.xc-upg-promo-btn:hover {
  background-color: var(--xc-accent-soft);
  border-color: var(--xc-accent);
  color: var(--xc-text);
}

.xc-upg-promo-btn.is-remove {
  background-color: transparent;
  border-color: var(--xc-danger-border);
  color: var(--xc-danger-text);
}

.xc-upg-promo-btn.is-remove:hover {
  background-color: var(--xc-danger-soft);
  border-color: var(--xc-danger);
  color: var(--xc-danger-text);
}

.xc-upg-cta {
  display: block;
  width: 100%;
  margin-top: 0.9rem;
  padding: 0.7rem 1.5rem;
  font-size: 0.95rem;
}

/* Variante ancha de la columna: formularios con campos en grilla */
.xc-page-col-wide {
  max-width: 860px;
}

/* Encabezado de las paginas de formulario (abrir ticket) */
.xc-page-heading {
  margin: 0.25rem 0 1.2rem;
}

.xc-page-heading h1 {
  font-family: var(--xc-font-display);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--xc-text);
  margin: 0;
}

.xc-page-heading p {
  margin: 0.45rem 0 0;
  font-size: 0.9rem;
  color: var(--xc-text-muted);
}

/* Campos en grilla: se adaptan al ancho en vez de partirse en columnas
   fijas de Bootstrap (el nombre y el departamento se cortaban) */
.xc-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 0 1rem;
}

.xc-field-grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}

/* Acciones al pie de un formulario, alineadas al mismo eje que sus campos */
.xc-form-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 1.1rem;
}

.xc-form-actions .btn {
  padding: 0.5rem 1.35rem;
  font-size: 0.88rem;
}

/* Campo de contrasena nueva + generador, a la misma altura */
.xc-pw-row {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.xc-pw-row .form-control {
  flex: 1 1 220px;
}

.xc-pw-row .btn {
  white-space: nowrap;
  padding: 0 1.15rem;
  height: 46px;
}

/* --- Usuarios de la cuenta (account-user-management.tpl) ---
   Una fila-tarjeta por usuario/invitacion, en vez de tabla rayada */
.xc-user-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.xc-user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.95rem 1.15rem;
  background-color: var(--xc-surface-2);
  border: 1px solid var(--xc-border);
  border-radius: 14px;
}

.xc-user-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.xc-user-mail {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--xc-text);
  overflow-wrap: anywhere;
}

.xc-user-shield-off {
  color: var(--xc-text-subtle);
}

.xc-user-meta {
  font-size: 0.8rem;
  color: var(--xc-text-muted);
}

.xc-user-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0;
}

.xc-user-note {
  margin: 0 0 1.5rem;
  font-size: 0.78rem;
  color: var(--xc-text-subtle);
}

/* --- Eleccion de departamento (supportticketsubmit-stepone.tpl) ---
   Una fila por departamento, con su descripcion y chevron */
.xc-dept-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.xc-dept {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.15rem;
  background-color: var(--xc-surface-2);
  border: 1px solid var(--xc-border);
  border-radius: 14px;
  color: var(--xc-text);
  transition: border-color var(--xc-transition-fast), background-color var(--xc-transition-fast);
}

.xc-dept:hover {
  background-color: var(--xc-surface-3);
  border-color: var(--xc-accent-border);
  color: var(--xc-text);
  text-decoration: none;
}

.xc-dept-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1 1 auto;
}

.xc-dept-name {
  font-family: var(--xc-font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--xc-text);
}

.xc-dept-desc {
  font-size: 0.85rem;
  color: var(--xc-text-muted);
}

.xc-dept-arrow {
  font-size: 0.8rem;
  color: var(--xc-text-subtle);
  transition: color var(--xc-transition-fast), transform var(--xc-transition-fast);
}

.xc-dept:hover .xc-dept-arrow {
  color: var(--xc-accent);
  transform: translateX(2px);
}

/* --- Solicitud de cancelacion (clientareacancelrequest.tpl) ---
   Misma columna centrada que el resumen de upgrade */
.xc-cancel-retention {
  text-align: center;
  margin-bottom: 1.1rem;
}

.xc-cancel-retention h2 {
  font-family: var(--xc-font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--xc-text);
  margin: 0 0 0.35rem;
}

.xc-cancel-retention p {
  margin: 0 auto;
  max-width: 34rem;
  font-size: 0.9rem;
  color: var(--xc-text-muted);
}

/* Opciones de fecha efectiva como filas seleccionables (la decision
   importante de la pagina no debe esconderse en un <select>) */
.xc-cancel-opt {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  width: 100%;
  margin: 0 0 0.5rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--xc-border);
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: border-color var(--xc-transition-fast), background-color var(--xc-transition-fast);
}

.xc-cancel-opt:last-of-type {
  margin-bottom: 0;
}

.xc-cancel-opt:hover {
  border-color: var(--xc-border-strong);
}

.xc-cancel-opt:has(input:checked) {
  border-color: var(--xc-accent-border);
  background-color: var(--xc-accent-soft);
}

.xc-cancel-opt input[type="radio"] {
  margin-top: 0.2rem;
  accent-color: var(--xc-accent);
}

.xc-cancel-opt-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.xc-cancel-opt-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--xc-text);
}

.xc-cancel-opt-hint {
  font-size: 0.8rem;
  color: var(--xc-text-muted);
}

.xc-cancel-domain p {
  font-size: 0.88rem;
  color: var(--xc-text-secondary);
}

.xc-cancel-check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0;
  font-size: 0.88rem;
  color: var(--xc-text);
  cursor: pointer;
}

.xc-cancel-check input[type="checkbox"] {
  margin-top: 0.2rem;
  accent-color: var(--xc-accent);
}

/* Confirmar a la derecha, salir a la izquierda: la accion destructiva
   nunca es la primera que cae bajo el cursor */
.xc-cancel-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

/* --- Conversacion de un ticket (viewticket.tpl) ---
   Cada respuesta es una tarjeta con cabecera de autor; theme.min.css las
   traia con cabecera #f6f6f6 y adjuntos en gris claro. */
.xc-ticket-dept {
  margin: 0.4rem 0 0;
  font-size: 0.9rem;
  color: var(--xc-text-muted);
}

.view-ticket {
  background-color: transparent;
  border: 0;
  box-shadow: none;
}

.view-ticket > .card-body {
  padding: 0 !important;
  border-bottom: 0 !important;
  margin-bottom: 0.9rem;
}

.view-ticket > .card-body:last-child {
  margin-bottom: 0;
}

.ticket-reply {
  background-color: var(--xc-surface-2);
  border: 1px solid var(--xc-border);
  border-radius: 14px;
  overflow: hidden;
}

/* Las respuestas del equipo se distinguen por un filo de acento, no por
   un fondo distinto: la lectura del hilo queda pareja */
.ticket-reply.staff {
  border-left: 3px solid var(--xc-accent);
}

.view-ticket .posted-by {
  background-color: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--xc-border);
  color: var(--xc-text-muted);
  font-size: 0.82rem;
  padding: 0.7rem 1.15rem;
}

.view-ticket .posted-by .posted-by-name {
  color: var(--xc-text);
  font-weight: 600;
}

/* Chip de rol con el mismo lenguaje que los estados del resto del panel */
.view-ticket .requestor-badge {
  display: inline-block;
  padding: 0.25em 0.85em;
  border-radius: var(--xc-radius-full);
  border: 1px solid transparent;
  font-size: 0.72rem;
  font-weight: 600;
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--xc-text-muted);
}

.view-ticket .requestor-badge.requestor-type-client {
  background-color: var(--xc-success-soft);
  border-color: var(--xc-success-border);
  color: var(--xc-success);
}

.view-ticket .requestor-badge.requestor-type-staff,
.view-ticket .requestor-badge.requestor-type-admin,
.view-ticket .requestor-badge.requestor-type-operator {
  background-color: var(--xc-info-soft);
  border-color: var(--xc-info-border);
  color: var(--xc-info);
}

.view-ticket .message {
  color: var(--xc-text-secondary);
}

.view-ticket .message hr {
  border-top-color: var(--xc-border);
}

/* Bloques de codigo pegados en el hilo (logs, user agents, IPs) */
.view-ticket .markdown-content pre,
.view-ticket .markdown-content code {
  background-color: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--xc-border);
  border-radius: var(--xc-radius-md);
  color: var(--xc-text);
}

.view-ticket .markdown-content code {
  padding: 0.1rem 0.35rem;
}

.view-ticket .markdown-content pre {
  padding: 0.75rem 1rem;
}

.view-ticket .markdown-content pre code {
  background-color: transparent;
  border: 0;
  padding: 0;
}

.view-ticket .attachments {
  border-top: 1px dashed var(--xc-border);
  color: var(--xc-text-muted);
}

.view-ticket .attachment-list li span {
  border-color: var(--xc-border);
  border-radius: var(--xc-radius-md);
}

.view-ticket .attachment-list li figure {
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--xc-text-muted);
}

.view-ticket .attachment-list li a:hover span {
  border-color: var(--xc-accent);
}

/* Paneles del sidebar retirado (destinatarios CC) renderizados inline */
.xc-ticket-aside {
  margin-top: 1.1rem;
}

.xc-ticket-aside .input-group,
.xc-ticket-aside form {
  margin-bottom: 0;
}

@media (max-width: 575.98px) {
  .xc-svc-title {
    font-size: 1.35rem;
  }
}

/* ============================================================================
   20. OVERLAY Y UTILIDADES
   ============================================================================ */

#fullpage-overlay {
  background-color: rgba(13, 15, 18, 0.85);
  color: var(--xc-text);
}

#fullpage-overlay .msg {
  color: var(--xc-text-secondary);
}

.btn:hover,
.nav-link:hover {
  text-decoration: none;
}

/* ============================================================================
   21. RESPONSIVE
   ============================================================================ */

@media (max-width: 767.98px) {
  :root {
    --xc-topbar-offset: 78px;
  }

  #main-body {
    padding: 0.25rem 0 2.5rem;
  }

  .xc-topbar {
    padding: 10px 0;
  }

  .xc-topbar-inner {
    padding: 0 12px;
  }

  .xc-brand .logo-img,
  header.header .logo-img {
    height: 32px;
  }

  .xc-topbar.scrolled .xc-brand .logo-img {
    height: 30px;
  }

  .xc-page-head {
    margin: 0.75rem 0 1.5rem;
  }

  footer.footer {
    padding: 36px 0 44px;
  }
}

/* ============================================================================
   22. ACCESIBILIDAD E IMPRESION
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  body,
  body.primary-bg-color {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
    padding-top: 0 !important;
  }

  .card,
  .table,
  .primary-content {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
    border-color: #dddddd !important;
    box-shadow: none !important;
  }

  h1, h2, h3, h4, h5, h6,
  .card-title,
  .table th,
  .table td {
    color: #1a1a1a !important;
  }

  header.header,
  .xc-topbar,
  .xc-sidenav,
  .xc-sidenav-backdrop,
  footer.footer,
  .master-breadcrumb,
  .sidebar,
  .btn {
    display: none !important;
  }

  body.is-logged .xc-main {
    margin-left: 0 !important;
  }
}

/* ============================================================================
   23. SKIN COMPLETO DEL CARRITO (orderform xtreamcast_cart)
   ----------------------------------------------------------------------------
   Vive aqui (y no en el css del orderform hijo) porque common.tpl de
   standard_cart carga los assets del orderform SIN cache-buster propio y el
   servidor los sirve con max-age=1 anio: cualquier cambio quedaria pegado
   en la cache de los navegadores. Este archivo si se versiona
   (xcThemeVersion en includes/head.tpl) y carga en todas las paginas del
   carrito via el head del tema.
   ============================================================================ */

/* ============================================================================
   XtreamCast Cart — skin del order form (hijo de standard_cart)
   ----------------------------------------------------------------------------
   Calca la estetica del checkout de xtreamcast.co (islas React, dark-only):
   inputs translucidos radius 12px con glow rosa al foco, cards de producto
   radius 16px con hover elevado, resumen de orden como panel oscuro y
   botones pildora glassmorphism.

   Se carga automaticamente despues de all.min.css del padre via
   {assetExists file="custom.css"} en standard_cart/common.tpl.

   Es autosuficiente: define sus propios tokens para funcionar tambien si el
   tema del client area activo no es "xtreamcast".
   ============================================================================ */

:root {
  --xcc-background: #16181c;
  --xcc-background-elevated: #1b1e23;
  --xcc-surface: #21242a;
  --xcc-surface-2: #262a31;
  --xcc-surface-3: #2d313a;
  --xcc-accent: #ff2b76;
  --xcc-accent-dark: #d91a5f;
  --xcc-accent-soft: rgba(255, 43, 118, 0.12);
  --xcc-accent-softer: rgba(255, 43, 118, 0.06);
  --xcc-accent-border: rgba(255, 43, 118, 0.28);
  --xcc-text: #ffffff;
  --xcc-text-secondary: rgba(255, 255, 255, 0.72);
  --xcc-text-muted: rgba(255, 255, 255, 0.55);
  --xcc-text-subtle: rgba(255, 255, 255, 0.38);
  --xcc-border: rgba(255, 255, 255, 0.08);
  --xcc-border-strong: rgba(255, 255, 255, 0.14);
  --xcc-border-light: rgba(255, 255, 255, 0.05);
  --xcc-success: #2ecc71;
  --xcc-success-soft: rgba(46, 204, 113, 0.12);
  --xcc-success-border: rgba(46, 204, 113, 0.28);
  --xcc-warning: #ffaa00;
  --xcc-warning-soft: rgba(255, 170, 0, 0.12);
  --xcc-danger: #ff4757;
  --xcc-danger-soft: rgba(255, 71, 87, 0.1);
  --xcc-danger-border: rgba(255, 71, 87, 0.25);
  --xcc-danger-text: #ff8d8d;
  --xcc-info: #4aa3ff;
  --xcc-radius-md: 0.5rem;
  --xcc-radius-input: 12px;
  --xcc-radius-card: 1rem;
  --xcc-radius-full: 999px;
  --xcc-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --xcc-transition-fast: 160ms var(--xcc-ease-out);
  --xcc-transition-base: 280ms var(--xcc-ease-out);
  --xcc-shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 24px rgba(0, 0, 0, 0.35);
  --xcc-shadow-btn: 0 4px 24px rgba(0, 0, 0, 0.18);
  --xcc-shadow-btn-hover: 0 8px 32px rgba(0, 0, 0, 0.26);
}

/* ============================================================================
   BASE DEL CARRITO
   ============================================================================ */

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

#order-standard_cart .header-lined h1,
#order-standard_cart .header-lined h2,
#order-standard_cart h1,
#order-standard_cart h2 {
  color: var(--xcc-text);
  letter-spacing: -0.025em;
}

#order-standard_cart .header-lined {
  border-bottom: 1px solid var(--xcc-border);
}

#order-standard_cart .info-text-sm {
  color: var(--xcc-text-muted);
}

/* Encabezados de seccion con linea */
#order-standard_cart .sub-heading span,
#order-standard_cart .sub-heading-borderless span {
  background-color: var(--xcc-background);
  color: var(--xcc-text);
  font-weight: 600;
}

#order-standard_cart .sub-heading {
  border-bottom-color: var(--xcc-border);
}

/* ============================================================================
   SIDEBAR DE CATEGORIAS
   ============================================================================ */

#order-standard_cart .cart-sidebar .list-group-item {
  background-color: var(--xcc-surface);
  border-color: var(--xcc-border-light);
  color: var(--xcc-text-secondary);
  transition: background-color var(--xcc-transition-fast), color var(--xcc-transition-fast);
}

#order-standard_cart .cart-sidebar .list-group-item:hover {
  background-color: var(--xcc-surface-2);
  color: var(--xcc-text);
}

#order-standard_cart .cart-sidebar .list-group-item.active {
  background-color: var(--xcc-accent-soft);
  border-left: 2px solid var(--xcc-accent);
  color: var(--xcc-text);
}

#order-standard_cart .sidebar-collapsed,
#order-standard_cart .sidebar-collapsed h3 {
  background-color: var(--xcc-surface);
  color: var(--xcc-text);
  border-color: var(--xcc-border);
}

/* ============================================================================
   TARJETAS DE PRODUCTO
   ============================================================================ */

#order-standard_cart .products .product {
  background-color: var(--xcc-surface);
  border: 1px solid var(--xcc-border);
  border-radius: var(--xcc-radius-card);
  overflow: hidden;
  transition: background-color var(--xcc-transition-base), border-color var(--xcc-transition-base), transform var(--xcc-transition-base);
}

#order-standard_cart .products .product:hover {
  background-color: var(--xcc-surface-2);
  border-color: var(--xcc-border-strong);
  transform: translateY(-3px);
}

#order-standard_cart .products .product header {
  background-color: var(--xcc-background-elevated);
  border-bottom: 1px solid var(--xcc-border);
  color: var(--xcc-text);
}

#order-standard_cart .products .product header span {
  color: var(--xcc-text);
  font-family: 'Outfit', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

#order-standard_cart .products .product header .qty {
  background-color: var(--xcc-accent-soft);
  color: var(--xcc-accent);
  border-radius: var(--xcc-radius-full);
}

#order-standard_cart .products .product div.product-desc,
#order-standard_cart .products .product div.product-desc-full-width {
  color: var(--xcc-text-muted);
}

#order-standard_cart .products .product span.feature-value {
  color: var(--xcc-text);
  font-weight: 600;
}

#order-standard_cart .products .product div.product-pricing span.price {
  color: var(--xcc-accent);
  font-family: 'Outfit', 'Inter', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
}

#order-standard_cart .products .product footer {
  background-color: transparent;
  border-top: 1px solid var(--xcc-border-light);
}

#order-standard_cart .product-info {
  background-color: var(--xcc-surface);
  border: 1px solid var(--xcc-border);
  border-radius: var(--xcc-radius-card);
}

#order-standard_cart .product-info .product-title {
  color: var(--xcc-text);
  font-family: 'Outfit', 'Inter', system-ui, sans-serif;
  font-weight: 700;
}

/* ============================================================================
   PANELES DE ADDONS
   ============================================================================ */

#order-standard_cart .panel-addon {
  background-color: var(--xcc-surface);
  border: 1px solid var(--xcc-border);
  border-radius: var(--xcc-radius-card);
  transition: border-color var(--xcc-transition-base), background-color var(--xcc-transition-base);
}

#order-standard_cart .panel-addon:hover {
  border-color: var(--xcc-border-strong);
  background-color: var(--xcc-surface-2);
}

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

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

#order-standard_cart .panel-addon .panel-add {
  background-color: rgba(255, 255, 255, 0.03);
  border-top: 1px solid var(--xcc-border);
  color: var(--xcc-text-secondary);
}

#order-standard_cart .panel-addon-selected {
  border-color: var(--xcc-success-border);
  background-color: var(--xcc-success-soft);
}

#order-standard_cart .panel-addon-selected .panel-add {
  background-color: var(--xcc-success);
  color: #0c2b18;
  border-top-color: transparent;
}

/* ============================================================================
   FORMULARIOS — receta exacta del checkout del sitio
   ============================================================================ */

#order-standard_cart .form-control,
#order-standard_cart textarea.field,
#order-standard_cart .prepend-icon .field {
  color: var(--xcc-text);
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--xcc-radius-input);
  box-shadow: none;
  transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

#order-standard_cart .form-control::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

#order-standard_cart .form-control:focus,
#order-standard_cart textarea.field:focus {
  border-color: var(--xcc-accent);
  background-color: rgba(255, 43, 118, 0.05);
  box-shadow: 0 0 0 3px rgba(255, 43, 118, 0.1);
  color: var(--xcc-text);
}

#order-standard_cart .form-control[readonly] {
  background-color: rgba(255, 255, 255, 0.03);
  color: var(--xcc-text-muted);
}

#order-standard_cart select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23999999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 16px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 2.25rem;
}

#order-standard_cart select.form-control option,
#order-standard_cart .products .product select option {
  background-color: var(--xcc-surface);
  color: var(--xcc-text);
}

#order-standard_cart label {
  color: var(--xcc-text-secondary);
  font-weight: 500;
}

#order-standard_cart .field-help-text {
  color: var(--xcc-text-subtle);
}

#order-standard_cart .field-error-msg,
#order-standard_cart .checkout-error-feedback {
  color: var(--xcc-danger-text);
}

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

input[type="checkbox"],
input[type="radio"] {
  accent-color: #ff2b76;
}

/* ============================================================================
   DOMINIOS (buscador, sugerencias, precios TLD)
   ============================================================================ */

#order-standard_cart .domain-selection-options .option {
  background-color: var(--xcc-surface);
  border: 1px solid var(--xcc-border);
  border-radius: var(--xcc-radius-md);
  color: var(--xcc-text-secondary);
  transition: border-color var(--xcc-transition-fast), background-color var(--xcc-transition-fast);
}

#order-standard_cart .domain-selection-options .option:hover {
  background-color: var(--xcc-surface-2);
  border-color: var(--xcc-border-strong);
}

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

#order-standard_cart .domains-row {
  border-bottom: 1px solid var(--xcc-border-light);
}

#order-standard_cart .domain-checker-available,
.domain-checker-available {
  color: var(--xcc-success);
}

#order-standard_cart .domain-checker-invalid,
.domain-checker-invalid {
  color: var(--xcc-danger-text);
}

#order-standard_cart .transfer-eligible {
  color: var(--xcc-success);
}

#order-standard_cart .transfer-not-eligible {
  color: var(--xcc-danger-text);
}

.domain-checker-bg {
  background: radial-gradient(ellipse 60% 55% at 50% 0%, rgba(255, 43, 118, 0.1) 0%, transparent 65%), var(--xcc-background-elevated);
  border: 1px solid var(--xcc-border);
  border-radius: var(--xcc-radius-card);
}

.domain-pricing .tld-row {
  border-bottom: 1px solid var(--xcc-border-light);
  color: var(--xcc-text-secondary);
}

.domain-pricing .tld-row.highlighted {
  background-color: var(--xcc-accent-softer);
}

.domain-pricing .tld-pricing-header {
  color: var(--xcc-text-muted);
}

.spotlight-tld {
  background-color: var(--xcc-surface);
  border: 1px solid var(--xcc-border);
  border-radius: var(--xcc-radius-md);
  color: var(--xcc-text);
}

.suggested-domains .card-header {
  background-color: var(--xcc-background-elevated);
  border-bottom: 1px solid var(--xcc-border);
  color: var(--xcc-text);
}

/* ============================================================================
   VER CARRITO (viewcart.tpl)
   ============================================================================ */

#order-standard_cart .view-cart-items-header {
  background-color: var(--xcc-background-elevated);
  border: 1px solid var(--xcc-border);
  border-bottom: 0;
  border-radius: var(--xcc-radius-card) var(--xcc-radius-card) 0 0;
  color: var(--xcc-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

#order-standard_cart .view-cart-items {
  background-color: var(--xcc-surface);
  border: 1px solid var(--xcc-border);
  border-radius: 0 0 var(--xcc-radius-card) var(--xcc-radius-card);
}

#order-standard_cart .view-cart-items .item {
  border-bottom: 1px solid var(--xcc-border-light);
}

#order-standard_cart .view-cart-items .item-title {
  color: var(--xcc-text);
  font-weight: 600;
}

#order-standard_cart .view-cart-items .item-group,
#order-standard_cart .view-cart-items .item-domain {
  color: var(--xcc-text-muted);
}

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

#order-standard_cart .view-cart-items .item-price .cycle {
  color: var(--xcc-text-muted);
}

#order-standard_cart .btn-remove-from-cart {
  color: var(--xcc-text-subtle);
  transition: color var(--xcc-transition-fast);
}

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

#order-standard_cart .view-cart-tabs {
  background-color: var(--xcc-surface);
  border: 1px solid var(--xcc-border);
  border-radius: var(--xcc-radius-card);
  overflow: hidden;
}

#order-standard_cart .view-cart-tabs .nav-tabs {
  background-color: var(--xcc-background-elevated);
  border-bottom: 1px solid var(--xcc-border);
}

#order-standard_cart .view-cart-tabs .nav-tabs a {
  color: var(--xcc-text-muted);
}

#order-standard_cart .view-cart-tabs .nav-tabs a[aria-expanded="true"],
#order-standard_cart .view-cart-tabs .nav-tabs .active a {
  background-color: var(--xcc-surface);
  color: var(--xcc-text);
  border-color: transparent;
}

#order-standard_cart .view-cart-tabs .tab-content {
  background-color: var(--xcc-surface);
  color: var(--xcc-text-secondary);
}

#order-standard_cart .view-cart-promotion-code {
  color: var(--xcc-text-secondary);
}

#order-standard_cart .view-cart-empty,
#order-standard_cart .empty-cart {
  color: var(--xcc-text-muted);
}

/* ============================================================================
   RESUMEN DE ORDEN
   ============================================================================ */

#order-standard_cart .order-summary {
  background-color: var(--xcc-surface);
  border: 1px solid var(--xcc-border);
  border-radius: var(--xcc-radius-card);
  box-shadow: var(--xcc-shadow-card);
  color: var(--xcc-text-secondary);
  position: relative;
  overflow: hidden;
}

/* Hairline superior distintivo de la marca */
#order-standard_cart .order-summary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--xcc-accent), transparent);
  pointer-events: none;
}

#order-standard_cart .order-summary h2 {
  color: var(--xcc-text);
  font-family: 'Outfit', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  background-color: transparent;
  border-bottom: 1px solid var(--xcc-border);
}

#order-standard_cart .summary-container {
  background-color: transparent;
  color: var(--xcc-text-secondary);
}

#order-standard_cart .order-summary .product-name {
  color: var(--xcc-text);
}

#order-standard_cart .order-summary .product-group {
  color: var(--xcc-text-muted);
}

#order-standard_cart .order-summary .summary-totals,
#order-standard_cart .order-summary .bordered-totals {
  border-color: var(--xcc-border);
}

/* El bundle del carrito le pone borde arriba Y abajo a .summary-totals; el de
   abajo quedaba pegado al borde superior de .total-due-today y se veian DOS
   lineas sobre el total. El separador del total lo pone .total-due-today. */
#order-standard_cart .order-summary .summary-totals {
  border-bottom: 0;
}

#order-standard_cart .order-summary .subtotal {
  color: var(--xcc-text-secondary);
}

#order-standard_cart .order-summary .recurring-totals,
#order-standard_cart .order-summary .recurring-charges {
  color: var(--xcc-text-muted);
}

#order-standard_cart .order-summary .total-due-today span {
  color: var(--xcc-text-muted);
}

#order-standard_cart .order-summary .total-due-today .amt {
  color: var(--xcc-accent);
  font-family: 'Outfit', 'Inter', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
}

#order-standard_cart .panel-taxes {
  color: var(--xcc-text-muted);
}

/* ============================================================================
   CHECKOUT
   ============================================================================ */

#order-standard_cart .cc-input-container {
  background-color: var(--xcc-surface);
  border: 1px solid var(--xcc-border);
  border-radius: var(--xcc-radius-card);
  color: var(--xcc-text-secondary);
}

#order-standard_cart .cc-input-container .paymethod-info {
  color: var(--xcc-text-muted);
}

#order-standard_cart .apply-credit-container {
  background-color: var(--xcc-surface);
  border: 1px solid var(--xcc-border);
  border-radius: var(--xcc-radius-card);
}

#order-standard_cart .checkout-security-msg {
  color: var(--xcc-text-muted);
  border-color: var(--xcc-border);
}

#order-standard_cart .checkout-security-msg i {
  color: var(--xcc-success);
}

#order-standard_cart .order-confirmation {
  color: var(--xcc-text-secondary);
}

#order-standard_cart .order-confirmation span {
  color: var(--xcc-text);
}

#order-standard_cart .view-cart-gateway-checkout {
  background-color: var(--xcc-surface);
  border: 1px solid var(--xcc-border);
  border-radius: var(--xcc-radius-card);
}

#order-standard_cart .express-checkout-buttons .separator {
  color: var(--xcc-text-subtle);
}

#order-standard_cart .express-checkout-buttons .separator::before,
#order-standard_cart .express-checkout-buttons .separator::after {
  border-color: var(--xcc-border);
}

/* ============================================================================
   BOTONES — pildora glassmorphism de la marca
   ============================================================================ */

#order-standard_cart .btn {
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: var(--xcc-radius-full);
  transition: background-color 200ms var(--xcc-ease-out), border-color 200ms var(--xcc-ease-out), color 200ms var(--xcc-ease-out), box-shadow 200ms var(--xcc-ease-out), transform 160ms var(--xcc-ease-out);
}

#order-standard_cart .btn-primary,
#order-standard_cart .btn-checkout {
  color: #ffffff;
  background: #d91a5f;
  background-image: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  backdrop-filter: saturate(180%) blur(28px);
  box-shadow: var(--xcc-shadow-btn);
}

#order-standard_cart .btn-primary:hover:not(:disabled):not(.disabled),
#order-standard_cart .btn-checkout:hover:not(:disabled):not(.disabled) {
  color: #ffffff;
  background: rgba(217, 26, 95, 0.68);
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow: var(--xcc-shadow-btn-hover);
}

#order-standard_cart .btn-primary:not(:disabled):not(.disabled):active,
#order-standard_cart .btn-checkout:not(:disabled):not(.disabled):active {
  color: #ffffff;
  background: rgba(217, 26, 95, 0.55);
  border-color: rgba(255, 255, 255, 0.14);
  transform: scale(0.985);
}

#order-standard_cart .btn-primary:disabled,
#order-standard_cart .btn-primary.disabled,
#order-standard_cart .btn-checkout:disabled {
  background: rgba(120, 120, 128, 0.35);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.55);
  box-shadow: none;
}

#order-standard_cart .btn-default,
#order-standard_cart .btn-secondary,
#order-standard_cart .order-summary .btn-continue-shopping {
  color: var(--xcc-text);
  background-color: var(--xcc-surface-2);
  border: 1px solid var(--xcc-border);
}

#order-standard_cart .btn-default:hover,
#order-standard_cart .btn-secondary:hover,
#order-standard_cart .order-summary .btn-continue-shopping:hover {
  color: var(--xcc-text);
  background-color: var(--xcc-surface-3);
  border-color: var(--xcc-border-strong);
}

#order-standard_cart .btn-success {
  color: #0c2b18;
  background-color: var(--xcc-success);
  border-color: transparent;
}

#order-standard_cart .btn-success:hover {
  color: #0c2b18;
  background-color: #40d983;
}

#order-standard_cart .btn-link {
  color: var(--xcc-accent);
}

#order-standard_cart .btn-link:hover {
  color: #ff3d83;
  text-decoration: none;
}

/* En input-groups las esquinas internas siguen rectas */
#order-standard_cart .input-group .btn {
  border-radius: var(--xcc-radius-input);
}

#order-standard_cart .input-group > .input-group-append > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

#order-standard_cart .input-group > .input-group-prepend > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Los modales del carrito usan la receta glass global (seccion 15 del tema);
   no llevan overrides propios para mantener un unico diseno de modal. */

/* ============================================================================
   BARRIDO DE FONDOS CLAROS RESTANTES DE style.css (checkout legible)
   ============================================================================ */

#order-standard_cart .products .product header span {
  background: transparent;
}

#order-standard_cart .panel-addon .panel-price {
  background-color: transparent;
  color: var(--xcc-text);
}

#order-standard_cart .transfer-not-eligible {
  background-color: var(--xcc-danger-soft);
}

#order-standard_cart .view-cart-items .item {
  background-color: transparent;
}

#order-standard_cart .view-cart-items .item:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.02);
}

#order-standard_cart .view-cart-promotion-code {
  background-color: transparent;
}

#order-standard_cart .empty-cart {
  background-color: transparent;
}

#order-standard_cart .order-confirmation {
  background-color: var(--xcc-surface);
  color: var(--xcc-text-secondary);
}

.domain-checker-container .input-group-box {
  background-color: var(--xcc-surface);
  border-color: var(--xcc-border);
}

.domain-pricing .tld-row.highlighted {
  background: var(--xcc-accent-softer);
}

.domain-pricing .tld-pricing-header,
.domain-pricing .tld-pricing-header .tld-column,
.domain-pricing .tld-pricing-header .col-sm-4 {
  background-color: var(--xcc-background-elevated);
  color: var(--xcc-text-muted);
  border-color: var(--xcc-border);
}

.domain-bulk-domain-well {
  background-color: var(--xcc-surface);
  border-color: var(--xcc-border);
}

/* ============================================================================
   CHECKOUT MAS COMPACTO (menos scroll)
   ============================================================================ */

#order-standard_cart .sub-heading {
  margin: 1.35rem 0 0.9rem;
}

#order-standard_cart .form-group,
#order-standard_cart .field-container {
  margin-bottom: 0.75rem;
}

#order-standard_cart .checkout-security-msg {
  margin-top: 1rem;
  padding: 0.6rem 0;
}

/* ============================================================================
   CHECKOUT POR PASOS (override checkout.tpl del orderform xtreamcast_cart)
   ============================================================================ */

/* Columna unica centrada, sin sidebar de categorias */
#order-standard_cart .xc-checkout {
  max-width: 720px;
  margin: 0 auto;
  padding: 0.25rem 0 2rem;
}

#order-standard_cart .xc-checkout-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
  margin: 0.25rem 0 1.5rem;
}

#order-standard_cart .xc-checkout-head h1 {
  margin: 0;
  font-family: 'Outfit', 'Inter', system-ui, sans-serif;
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

#order-standard_cart .xc-checkout-sub {
  margin: 0.35rem 0 0;
  color: var(--xcc-text-muted);
  font-size: 0.92rem;
}

/* Toggle registrar / ya tienes cuenta: pildoras fantasma de marca */
#order-standard_cart .xc-checkout-switch {
  padding-bottom: 0.35rem;
}

#order-standard_cart .xc-checkout-switch .btn {
  color: var(--xcc-text);
  background-color: transparent;
  background-image: none;
  border: 1px solid var(--xcc-accent-border);
  border-radius: var(--xcc-radius-full);
  padding: 0.5rem 1.2rem;
  font-size: 0.875rem;
  font-weight: 600;
}

#order-standard_cart .xc-checkout-switch .btn:hover {
  background-color: var(--xcc-accent-soft);
  border-color: var(--xcc-accent);
  color: var(--xcc-text);
}

/* Tarjetas de paso */
#order-standard_cart .xc-step-card {
  background-color: var(--xcc-surface);
  border: 1px solid var(--xcc-border);
  border-radius: 18px;
  padding: 1.6rem 1.6rem 1.3rem;
  margin-bottom: 1.15rem;
}

#order-standard_cart .xc-step-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.2rem;
}

#order-standard_cart .xc-step-num {
  width: 30px;
  height: 30px;
  min-width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--xcc-accent), var(--xcc-accent-dark));
  color: #ffffff;
  font-family: 'Outfit', 'Inter', system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(255, 43, 118, 0.3);
}

#order-standard_cart .xc-step-title {
  font-family: 'Outfit', 'Inter', system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--xcc-text);
}

/* Selector de cuenta (checkout con sesion iniciada): el tema base lo
   pintaba como panel blanco con texto invisible — tarjetas oscuras */
#order-standard_cart .account-select-container {
  border-right: 0;
}

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

#order-standard_cart .account-select-container div.account {
  background: var(--xcc-background-elevated);
  border: 1px solid var(--xcc-border) !important;
  border-radius: 14px;
  padding: 0;
  margin-bottom: 0.85rem;
  transition: background-color 200ms ease, border-color 200ms ease;
}

#order-standard_cart .account-select-container div.account:hover {
  border-color: var(--xcc-border-strong) !important;
}

#order-standard_cart .account-select-container div.account.active,
#order-standard_cart .account-select-container div.account.active:hover {
  background: var(--xcc-accent-softer);
  border-color: var(--xcc-accent-border) !important;
}

#order-standard_cart .account-select-container .radio-inline {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  width: 100%;
  margin: 0;
  padding: 1rem 1.15rem;
  cursor: pointer;
  color: var(--xcc-text-secondary);
}

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

#order-standard_cart .account-select-container .address .small {
  color: var(--xcc-text-muted);
}

/* Chips de moneda / cuenta cerrada dentro de la tarjeta */
#order-standard_cart .account-select-container .label {
  display: inline-block;
  border-radius: 999px;
  padding: 0.18rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 600;
  vertical-align: middle;
  border: 0;
}

#order-standard_cart .account-select-container .label-info {
  background-color: rgba(74, 163, 255, 0.14);
  color: var(--xcc-info);
}

#order-standard_cart .account-select-container .label-default {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--xcc-text-muted);
}

/* iCheck del selector: sprite azul girado al rosado de la marca (no hay
   opt-out posible: el cambio de cuenta escucha el evento ifChecked) */
#order-standard_cart .account-select-container [class*="iradio"],
#order-standard_cart .account-select-container [class*="icheckbox"] {
  filter: hue-rotate(135deg) saturate(1.35);
  flex-shrink: 0;
  margin-top: 0.15rem;
}

/* Dentro de las tarjetas de paso los inputs van sobre superficie */
#order-standard_cart .xc-step-card .form-control,
#order-standard_cart .xc-step-card textarea.field {
  background-color: rgba(0, 0, 0, 0.35);
}

/* Medidor de seguridad de la contrasena en oscuro */
#order-standard_cart .password-strength-meter .progress {
  background-color: rgba(0, 0, 0, 0.35);
  border-radius: var(--xcc-radius-full);
  height: 6px;
  margin-bottom: 0.4rem;
}

#order-standard_cart .password-strength-meter p {
  color: var(--xcc-text-subtle);
  margin-bottom: 0;
}

/* El total vive dentro del boton Pagar ahora (span #totalCartPrice) */
#order-standard_cart #btnCompleteOrder #totalCartPrice {
  font-family: 'Outfit', 'Inter', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-left: 0.3rem;
}

/* Login de cliente existente dentro del checkout */
#order-standard_cart #btnExistingLogin {
  color: #ffffff;
  background: var(--xcc-accent-dark);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.55rem 1.8rem;
}

#order-standard_cart #btnExistingLogin:hover {
  background: rgba(217, 26, 95, 0.68);
}

/* Notas del pedido (opcional) discretas */
#order-standard_cart .xc-order-notes {
  margin-top: 1rem;
}

/* TOS + boton de pago */
#order-standard_cart .xc-checkout-actions {
  margin-top: 1.35rem;
}

#order-standard_cart #accepttos {
  width: 16px;
  height: 16px;
  accent-color: var(--xcc-accent);
  vertical-align: -3px;
}

#order-standard_cart .xc-checkout-actions a {
  color: var(--xcc-accent);
}

#order-standard_cart #btnCompleteOrder {
  display: block;
  width: 100%;
  padding: 0.85rem 1.5rem;
  font-size: 1.05rem;
}

@media (max-width: 575.98px) {
  #order-standard_cart .xc-checkout-head {
    align-items: flex-start;
    flex-direction: column;
  }

  #order-standard_cart .xc-step-card {
    padding: 1.2rem 1.1rem 1rem;
  }
}

/* ============================================================================
   CARRO DE COMPRA Y CONFIGURACION (viewcart / configureproduct del hijo)
   ============================================================================ */

#order-standard_cart .xc-cart {
  padding: 0.25rem 0 2rem;
}

/* Items del carrito: pulido */
#order-standard_cart .view-cart-items .item-title .btn-link {
  color: var(--xcc-accent);
  font-weight: 600;
}

#order-standard_cart .view-cart-items .item-qty input {
  max-width: 90px;
  margin: 0 auto;
}

#order-standard_cart .view-cart-items .item-qty .btn {
  display: block;
  margin: 0.35rem auto 0;
  color: var(--xcc-text-muted);
  background-color: transparent;
  border: 1px solid var(--xcc-border);
  font-size: 0.72rem;
  padding: 0.15rem 0.7rem;
}

#order-standard_cart .view-cart-items .item-qty .btn:hover {
  color: var(--xcc-text);
  border-color: var(--xcc-border-strong);
}

/* Tarjeta de codigo de promocion (reemplaza las tabs del padre) */
#order-standard_cart .xc-promo-card {
  background-color: var(--xcc-surface);
  border: 1px solid var(--xcc-border);
  border-radius: 18px;
  padding: 1.3rem 1.4rem 1.2rem;
  margin-top: 1.15rem;
}

#order-standard_cart .xc-promo-card .xc-step-head {
  margin-bottom: 0.9rem;
}

#order-standard_cart .xc-promo-form {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

#order-standard_cart .xc-promo-form .form-group {
  flex: 1;
  margin-bottom: 0;
}

#order-standard_cart .xc-promo-form .btn {
  white-space: nowrap;
  padding: 0.5rem 1.2rem;
}

#order-standard_cart .xc-promo-card .form-control {
  background-color: rgba(0, 0, 0, 0.35);
}

/* Resumen: total protagonista, sin contenedor */
#order-standard_cart .order-summary .total-due-today {
  border-top: 1px solid var(--xcc-border);
  margin-top: 0.75rem;
  padding: 1rem 0 0.5rem;
  text-align: right;
}

#order-standard_cart .order-summary .total-due-today .amt {
  display: block;
  font-size: 1.7rem;
  line-height: 1.2;
}

#order-standard_cart .order-summary .total-due-today span:not(.amt) {
  display: block;
  font-size: 0.82rem;
  color: var(--xcc-text-muted);
}

/* Acciones del resumen: botones full-width y parejos */
#order-standard_cart .xc-summary-actions {
  margin-top: 1.1rem;
}

#order-standard_cart .xc-summary-actions .btn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  text-align: center;
}

#order-standard_cart .xc-summary-actions .btn + .btn {
  margin-top: 0.6rem;
}

#order-standard_cart .xc-summary-actions .btn-checkout.disabled {
  background: rgba(120, 120, 128, 0.35);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.55);
  box-shadow: none;
  pointer-events: none;
}

#order-standard_cart .xc-summary-actions .btn-continue-shopping {
  color: var(--xcc-text-secondary);
  background-color: transparent;
  border: 1px solid var(--xcc-border);
}

#order-standard_cart .xc-summary-actions .btn-continue-shopping:hover {
  color: var(--xcc-text);
  background-color: var(--xcc-surface-2);
  border-color: var(--xcc-border-strong);
}

/* Layout carrito: columnas flex (en vez de floats) para poder fijar el
   resumen con position:sticky. Con float:none en #scrollingPanelContainer el
   sticky por JS del padre (repositionScrollingSidebar, que animaba
   margin-top y quedaba DEBAJO del topbar fijo) se autodesactiva. */
#order-standard_cart .xc-cart-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

#order-standard_cart .xc-cart-layout > .secondary-cart-body,
#order-standard_cart .xc-cart-layout > .secondary-cart-sidebar {
  float: none;
}

#order-standard_cart .xc-cart-layout > .secondary-cart-sidebar {
  position: sticky;
  top: 96px; /* despeja el topbar fijo del tema */
}

/* Ciclo de facturacion: tarjetas seleccionables (estilo xtreamcast.co) */
#order-standard_cart .xc-cycle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

@media (max-width: 575.98px) {
  #order-standard_cart .xc-cycle-grid {
    grid-template-columns: 1fr;
  }
}

#order-standard_cart .xc-cycle-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  position: relative;
  background-color: var(--xcc-surface-2);
  border: 1px solid var(--xcc-border);
  border-radius: 14px;
  padding: 1rem 1.15rem;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--xcc-transition-fast), background-color var(--xcc-transition-fast);
}

#order-standard_cart .xc-cycle-card:hover {
  border-color: var(--xcc-border-strong);
  background-color: var(--xcc-surface-3);
}

#order-standard_cart .xc-cycle-card.active {
  border-color: rgba(255, 255, 255, 0.85);
}

#order-standard_cart .xc-cycle-card.active::after {
  content: '';
  position: absolute;
  top: 14px;
  right: 14px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--xcc-success);
  box-shadow: 0 0 8px rgba(46, 204, 113, 0.6);
}

#order-standard_cart .xc-cycle-card:focus,
#order-standard_cart .xc-cycle-card:focus-visible {
  outline: none;
  box-shadow: none;
}

#order-standard_cart .xc-cycle-name {
  font-family: 'Outfit', 'Inter', system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--xcc-text);
}

/* ============================================================================
   PLANES DE LA TIENDA (products.tpl del hijo) — calcados de Pricing.astro
   ----------------------------------------------------------------------------
   Alturas iguales: grilla con align-items stretch, tarjeta flex column y
   features con flex:1 (el CTA queda alineado abajo en todas las tarjetas).
   Los selectores llevan .products para ganarle a las reglas legacy
   ".products .product" de la seccion Tarjetas de Producto.
   ============================================================================ */

#order-standard_cart .xc-plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 430px));
  justify-content: center;
  gap: 1.25rem;
  align-items: stretch;
}

#order-standard_cart .products .xc-plan-card {
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: var(--xcc-surface);
  border: 1px solid var(--xcc-border);
  border-radius: 20px;
  padding: 2rem 1.75rem 1.75rem;
  overflow: hidden;
  margin-bottom: 0;
}

#order-standard_cart .products .xc-plan-card:hover {
  background-color: var(--xcc-surface-2);
  border-color: var(--xcc-border-strong);
  transform: translateY(-3px);
}

#order-standard_cart .xc-plan-name {
  font-family: 'Outfit', 'Inter', system-ui, sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--xcc-text);
  margin-bottom: 1.1rem;
}

#order-standard_cart .xc-plan-qty {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.15rem 0.6rem;
  border-radius: var(--xcc-radius-full);
  background-color: var(--xcc-accent-soft);
  color: var(--xcc-accent);
  font-size: 0.72rem;
  font-weight: 600;
  vertical-align: middle;
}

#order-standard_cart .xc-plan-pricing {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-bottom: 1.35rem;
}

#order-standard_cart .xc-plan-from {
  font-size: 0.8rem;
  color: var(--xcc-text-muted);
}

#order-standard_cart .xc-plan-price {
  font-family: 'Outfit', 'Inter', system-ui, sans-serif;
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--xcc-accent);
}

#order-standard_cart .xc-plan-cycle {
  font-size: 0.85rem;
  color: var(--xcc-text-muted);
}

#order-standard_cart .xc-plan-setup {
  font-size: 0.8rem;
  color: var(--xcc-text-subtle);
}

#order-standard_cart .xc-plan-features {
  flex: 1;
  border-top: 1px solid var(--xcc-border-light);
  padding-top: 1.1rem;
  margin-bottom: 1.5rem;
  color: var(--xcc-text-secondary);
  font-size: 0.9375rem;
  line-height: 1.9;
}

#order-standard_cart .xc-plan-features ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#order-standard_cart .xc-plan-features li {
  padding: 0.1rem 0;
}

#order-standard_cart .xc-plan-features .feature-value {
  color: var(--xcc-text);
  font-weight: 600;
}

#order-standard_cart .products .xc-plan-cta {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.85rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #ffffff;
  background: var(--xcc-accent-dark);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--xcc-radius-full);
  box-shadow: var(--xcc-shadow-btn);
}

#order-standard_cart .products .xc-plan-cta:hover {
  color: #ffffff;
  background: rgba(217, 26, 95, 0.68);
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow: var(--xcc-shadow-btn-hover);
}

/* Opciones configurables: tarjetas con icono + descripcion + toggle/select
   (calcadas del checkout de xtreamcast.co) */
#order-standard_cart .xc-opt-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

@media (max-width: 767.98px) {
  #order-standard_cart .xc-opt-grid {
    grid-template-columns: 1fr;
  }
}

#order-standard_cart .xc-opt-card {
  display: flex;
  flex-direction: column;
  background-color: var(--xcc-surface-2);
  border: 1px solid var(--xcc-border);
  border-radius: 14px;
  padding: 1.1rem 1.15rem 1rem;
}

#order-standard_cart .xc-opt-head {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  margin-bottom: 1rem;
}

#order-standard_cart .xc-opt-icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--xcc-text);
  font-size: 0.9rem;
}

#order-standard_cart .xc-opt-title {
  display: block;
  font-family: 'Outfit', 'Inter', system-ui, sans-serif;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--xcc-text);
}

#order-standard_cart .xc-opt-desc {
  display: block;
  color: var(--xcc-text-muted);
  font-size: 0.82rem;
  line-height: 1.45;
  margin-top: 0.15rem;
}

#order-standard_cart .xc-opt-body {
  margin-top: auto;
  border-top: 1px solid var(--xcc-border-light);
  padding-top: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

#order-standard_cart .xc-opt-body select.form-control {
  flex: 1;
  width: 100%;
}

#order-standard_cart .xc-opt-body .form-group {
  margin-bottom: 0;
}

#order-standard_cart .xc-opt-price {
  font-family: 'Outfit', 'Inter', system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--xcc-text);
}

#order-standard_cart .xc-opt-radios label {
  display: block;
  margin-bottom: 0.25rem;
}

/* Complementos (addons): tarjeta horizontal a lo ancho — icono/titulo/
   descripcion a la izquierda, precio + switch a la derecha */
#order-standard_cart .xc-addons-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

#order-standard_cart .xc-opt-card.xc-addon-card {
  flex-direction: row;
  align-items: center;
  gap: 1.5rem;
}

#order-standard_cart .xc-addon-card .xc-opt-head {
  flex: 1;
  align-items: center;
  margin-bottom: 0;
}

#order-standard_cart .xc-addon-card .xc-opt-body {
  flex: 0 0 auto;
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
  gap: 1rem;
}

@media (max-width: 575.98px) {
  #order-standard_cart .xc-opt-card.xc-addon-card {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  #order-standard_cart .xc-addon-card .xc-opt-head {
    align-items: flex-start;
    margin-bottom: 1rem;
  }

  #order-standard_cart .xc-addon-card .xc-opt-body {
    border-top: 1px solid var(--xcc-border-light);
    padding-top: 0.85rem;
  }
}

/* Complementos seleccionados: acento sutil en la tarjeta */
#order-standard_cart .xc-addon-card.on {
  border-color: var(--xcc-accent-border);
  background-color: var(--xcc-accent-softer);
}

/* Switch on/off de marca */
#order-standard_cart .xc-switch {
  flex: 0 0 46px;
  width: 46px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: var(--xcc-radius-full);
  background-color: rgba(255, 255, 255, 0.16);
  position: relative;
  cursor: pointer;
  transition: background-color 200ms var(--xcc-ease-out);
}

#order-standard_cart .xc-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #ffffff;
  transition: transform 200ms var(--xcc-ease-out);
}

#order-standard_cart .xc-switch.on {
  background: linear-gradient(135deg, var(--xcc-accent), var(--xcc-accent-dark));
}

#order-standard_cart .xc-switch.on::after {
  transform: translateX(20px);
}

/* Sin anillo de focus al hacer click (pedido explicito); el estado ya es
   visible por el knob/punto del control */
#order-standard_cart .xc-switch:focus,
#order-standard_cart .xc-switch:focus-visible {
  outline: none;
  box-shadow: none;
}


/* ============================================================================
   ERRORES Y AVISOS
   ============================================================================ */

.error-heading {
  color: var(--xcc-text);
}

#order-standard_cart .alert-success {
  background-color: var(--xcc-success-soft);
  border-color: var(--xcc-success-border);
  color: var(--xcc-success);
}

#order-standard_cart .alert-danger {
  background-color: var(--xcc-danger-soft);
  border-color: var(--xcc-danger-border);
  color: var(--xcc-danger-text);
}

#order-standard_cart .alert-warning {
  background-color: var(--xcc-warning-soft);
  border-color: rgba(255, 170, 0, 0.28);
  color: var(--xcc-warning);
}

#order-standard_cart .alert-info {
  background-color: rgba(74, 163, 255, 0.12);
  border-color: rgba(74, 163, 255, 0.28);
  color: var(--xcc-info);
}

/* ============================================================================
   CARRITO EN MOVIL
   ----------------------------------------------------------------------------
   Con la columna lateral apilada, el resumen del pedido quedaba pegado al
   bloque del codigo promocional; y la fila del item se leia en zigzag
   (titulo a la izquierda, caja de cantidad centrada, precio a la derecha).
   ============================================================================ */

@media (max-width: 767.98px) {
  #order-standard_cart .secondary-cart-sidebar {
    margin-top: 1.5rem;
  }

  /* El bloque promocional cierra la columna de items: separa del ultimo item */
  #order-standard_cart .view-cart-tabs,
  #order-standard_cart .tab-content {
    margin-bottom: 0.25rem;
  }

  /* Item: descripcion arriba a lo ancho; cantidad (izquierda) y precio
     (derecha) comparten la linea de cierre */
  #order-standard_cart .view-cart-items .item > .row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
  }

  #order-standard_cart .view-cart-items .item > .row > div:first-child {
    flex: 1 1 100%;
  }

  /* las col-sm-* de Bootstrap traen `width: 100%` fuera de su breakpoint: sin
     `width: auto` cantidad y precio nunca comparten linea */
  #order-standard_cart .view-cart-items .item-qty,
  #order-standard_cart .view-cart-items .item-price {
    width: auto;
    max-width: none;
  }

  #order-standard_cart .view-cart-items .item-qty {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.9rem;
    text-align: left;
  }

  /* en escritorio la caja va centrada (`margin: 0 auto`): aqui ancla a la
     izquierda, junto a su boton de actualizar */
  #order-standard_cart .view-cart-items .item-qty input {
    margin: 0;
    max-width: 72px;
  }

  #order-standard_cart .view-cart-items .item-qty .btn {
    display: inline-block;
    margin: 0;
  }

  #order-standard_cart .view-cart-items .item-price {
    flex: 1 1 auto;
    margin-top: 0.9rem;
    text-align: right;
  }
}