/* ==========================================================================
   TAROHOSTING — taro-theme.css (libreria de componentes reutilizables)
   AGENTE 5 del proyecto de unificacion de diseno landing <-> billing WHMCS.

   Carga: killa/includes/head.tpl, JUSTO ANTES de killa/css/custom.css
   (custom.css conserva la ultima palabra en la cascada).

   Contenido: botones, cards, badges/labels de estado, inputs/selects/
   checkboxes/radios, alertas, paginacion, tooltips/popovers, tabs/navs,
   list-groups, tablas genericas y overrides de huecos (colores viejos
   en duro). Dark-mode only. Bootstrap 4 compatible: se sobrescriben las
   clases de Bootstrap, sin namespace paralelo.

   Regla de convivencia: NO repite las reglas de las secciones AGENTE 3 /
   AGENTE 4 de custom.css (botón primario/ghost, form-control base, card
   base, sidebar, breadcrumb, DataTables...). Aqui viven los componentes
   que aquellas capas no cubrieron.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. TOKENS DE RESPALDO
   killa/css/custom.css ya define estas variables; se duplican aqui con los
   MISMOS valores para que esta hoja funcione si se carga aislada.
   -------------------------------------------------------------------------- */
:root {
    --taro-primary-300: #FF90FF;
    --taro-primary-400: #FF66FF;
    --taro-primary-500: #FF25FF;
    --taro-primary-600: #E013E0;
    --taro-primary-700: #CA1DCA;
    --taro-purple-500: #A855F7;
    --taro-purple-600: #9333EA;
    --taro-purple-700: #7E22CE;
    --taro-violet-glow: rgba(122, 0, 255, 0.25);

    --taro-bg: #0B0B12;
    --taro-bg-elevated: #12121A;
    --taro-surface: rgba(255, 255, 255, 0.05);
    --taro-surface-hover: rgba(255, 255, 255, 0.10);
    --taro-surface-active: rgba(255, 37, 255, 0.20);
    --taro-accent-tint: rgba(255, 37, 255, 0.10);
    --taro-header-bg: rgba(11, 11, 18, 0.70);
    --taro-glass-bg: linear-gradient(180deg, rgba(18, 18, 26, 0.6), rgba(18, 18, 26, 0.35));
    --taro-card-featured-bg: linear-gradient(to bottom right,
        rgba(255, 37, 255, 0.10), rgba(168, 85, 247, 0.05), rgba(255, 37, 255, 0.10));

    --taro-text: #FFFFFF;
    --taro-text-secondary: rgba(255, 255, 255, 0.80);
    --taro-text-tertiary: rgba(255, 255, 255, 0.70);
    --taro-text-muted: rgba(255, 255, 255, 0.60);
    --taro-text-faint: rgba(255, 255, 255, 0.50);
    --taro-text-placeholder: rgba(255, 255, 255, 0.40);
    --taro-text-accent: #FF25FF;
    --taro-text-accent-hover: #FF66FF;

    --taro-border: rgba(255, 255, 255, 0.10);
    --taro-border-subtle: rgba(255, 255, 255, 0.05);
    --taro-border-glass: rgba(255, 255, 255, 0.07);
    --taro-border-hover: rgba(255, 37, 255, 0.30);
    --taro-border-focus: rgba(255, 37, 255, 0.60);
    --taro-border-featured: rgba(255, 37, 255, 0.50);
    --taro-border-badge: rgba(255, 37, 255, 0.20);

    --taro-success: #22C55E;
    --taro-success-alt: #10B981;
    --taro-error: #EF4444;
    --taro-warning: #F59E0B;
    --taro-info: #3B82F6;

    --taro-gradient-cta: linear-gradient(to right, #FF25FF, #E013E0, #9333EA);
    --taro-gradient-cta-hover: linear-gradient(to right, #E013E0, #9333EA, #7E22CE);
    --taro-gradient-text: linear-gradient(90deg, #FF25FF 0%, #CA1DCA 55%, #AF19AF 100%);
    --taro-gradient-topbar: linear-gradient(to right, #FF25FF, #A855F7, #FF25FF);
    --taro-gradient-toggle: linear-gradient(to right, #FF25FF, #A855F7);
    --taro-gradient-success: linear-gradient(to right, #22C55E, #10B981);
    --taro-gradient-icon-box: linear-gradient(to bottom right, rgba(255,37,255,0.20), rgba(168,85,247,0.20));
    --taro-gradient-hero: radial-gradient(1200px 600px at 10% 0, rgba(255,37,255,0.2), transparent 60%),
                          radial-gradient(800px 400px at 90% 10%, rgba(122,0,255,0.25), transparent 70%);
    --taro-gradient-pill: linear-gradient(to right, rgba(255,37,255,0.18), rgba(122,0,255,0.18));

    --taro-font-sans: 'Poppins', ui-sans-serif, system-ui, sans-serif;
    --taro-font-weight-regular: 400;
    --taro-font-weight-medium: 500;
    --taro-font-weight-semibold: 600;
    --taro-font-weight-bold: 700;
    --taro-font-weight-extrabold: 800;

    --taro-container-max: 80rem;
    --taro-container-narrow: 56rem;
    --taro-section-pad-y: 5rem;
    --taro-header-height: 4rem;
    --taro-header-topbar: 4px;
    --taro-header-total: 68px;
    --taro-card-pad: 1.5rem;

    --taro-radius-sm: 0.375rem;
    --taro-radius-md: 0.5rem;
    --taro-radius-lg: 0.75rem;
    --taro-radius-xl: 1rem;
    --taro-radius-2xl: 1.5rem;
    --taro-radius-full: 9999px;

    --taro-shadow-glow: 0 0 0 3px rgba(255, 37, 255, 0.25), 0 10px 30px -10px rgba(255, 37, 255, 0.45);
    --taro-shadow-cta: 0 10px 15px -3px rgba(255, 37, 255, 0.30), 0 4px 6px -4px rgba(255, 37, 255, 0.30);
    --taro-shadow-cta-hover: 0 20px 25px -5px rgba(255, 37, 255, 0.40), 0 8px 10px -6px rgba(255, 37, 255, 0.40);
    --taro-shadow-card-hover: 0 10px 15px -3px rgba(255, 37, 255, 0.10), 0 4px 6px -4px rgba(255, 37, 255, 0.10);
    --taro-shadow-card-featured: 0 20px 25px -5px rgba(255, 37, 255, 0.20), 0 8px 10px -6px rgba(255, 37, 255, 0.20);
    --taro-shadow-glass-hover: 0 10px 40px rgba(255, 37, 255, 0.15);
    --taro-shadow-elevated: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);

    --taro-transition-fast: 150ms ease;
    --taro-transition: 300ms ease;
    --taro-ease-slide: cubic-bezier(0.23, 1, 0.32, 1);
    --taro-scale-hover: 1.05;
    --taro-scale-active: 0.95;
    --taro-blur-glass: 10px;
    --taro-blur-header: 24px;
}

/* --------------------------------------------------------------------------
   1. ACCESIBILIDAD: halo magenta visible en :focus-visible
   (teclado). Se usa outline para no pelear con los box-shadow !important
   de otras capas.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
.page-link:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.list-group-item-action:focus-visible,
.custom-control-input:focus-visible ~ .custom-control-label::before {
    outline: 2px solid rgba(255, 37, 255, 0.75) !important;
    outline-offset: 2px;
}
/* Halo tambien cuando el foco lo pone el navegador en controles custom */
.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 3px rgba(255, 37, 255, 0.25) !important;
}

/* --------------------------------------------------------------------------
   2. BOTONES
   El primario CTA (.btn-primary/.btn-success) y el ghost (.btn-orange) ya
   estan en custom.css (AGENTE 4): aqui NO se repiten. Se cubren base,
   variantes semanticas, terciario link, disabled y tamanos.
   -------------------------------------------------------------------------- */
.btn {
    font-family: var(--taro-font-sans);
    border-radius: var(--taro-radius-lg);
    font-weight: 600;
    transition: all var(--taro-transition);
}
.btn:active { transform: scale(var(--taro-scale-active)); }
.btn.disabled, .btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Peligro: tinte rojo -> solido al hover (dark friendly) */
.btn-danger {
    background: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid rgba(239, 68, 68, 0.40) !important;
    color: #FCA5A5 !important;
    border-radius: var(--taro-radius-lg) !important;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
    background: var(--taro-error) !important;
    border-color: var(--taro-error) !important;
    color: #fff !important;
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.30) !important;
}
/* Advertencia */
.btn-warning {
    background: rgba(245, 158, 11, 0.15) !important;
    border: 1px solid rgba(245, 158, 11, 0.40) !important;
    color: #FBBF24 !important;
    border-radius: var(--taro-radius-lg) !important;
}
.btn-warning:hover, .btn-warning:focus, .btn-warning:active {
    background: var(--taro-warning) !important;
    border-color: var(--taro-warning) !important;
    color: #0B0B12 !important;
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.30) !important;
}
/* Info (custom.css legacy la deja azul solido; armonizamos radio/hover) */
.btn-info:hover, .btn-info:focus {
    background: #2563EB !important;
    border-color: #2563EB !important;
    color: #fff !important;
}

/* Variantes outline de Bootstrap -> ghost oscuro coherente */
.btn-outline-primary, .btn-outline-secondary, .btn-outline-info,
.btn-outline-light, .btn-outline-dark {
    background: var(--taro-surface) !important;
    border: 1px solid var(--taro-border) !important;
    color: var(--taro-text-secondary) !important;
    border-radius: var(--taro-radius-lg) !important;
}
.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-info:hover,
.btn-outline-light:hover, .btn-outline-dark:hover {
    background: var(--taro-surface-active) !important;
    border-color: var(--taro-border-focus) !important;
    color: var(--taro-primary-400) !important;
}
.btn-outline-danger {
    background: transparent !important;
    border: 1px solid rgba(239, 68, 68, 0.40) !important;
    color: #FCA5A5 !important;
    border-radius: var(--taro-radius-lg) !important;
}
.btn-outline-danger:hover {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #fff !important;
}
.btn-outline-success {
    background: transparent !important;
    border: 1px solid rgba(34, 197, 94, 0.40) !important;
    color: #4ADE80 !important;
    border-radius: var(--taro-radius-lg) !important;
}
.btn-outline-success:hover {
    background: rgba(34, 197, 94, 0.15) !important;
    color: #fff !important;
}

/* Terciario: link de texto (patron "Iniciar sesion" de la landing) */
.btn-link {
    background: transparent !important;
    border: none !important;
    color: var(--taro-text-tertiary) !important;
    font-weight: 500;
    box-shadow: none !important;
    text-decoration: none !important;
}
.btn-link:hover, .btn-link:focus {
    color: #fff !important;
    text-decoration: none !important;
}

/* Botones claros de Bootstrap que romperian el dark */
.btn-light, .btn-white {
    background: var(--taro-surface-hover) !important;
    border: 1px solid var(--taro-border) !important;
    color: #fff !important;
    border-radius: var(--taro-radius-lg) !important;
}
.btn-light:hover, .btn-white:hover {
    background: rgba(255, 255, 255, 0.20) !important;
    color: #fff !important;
}

/* Tamanos */
.btn-sm, .btn-group-sm > .btn {
    padding: 6px 14px !important;
    font-size: 0.8125rem !important;
    border-radius: var(--taro-radius-md) !important;
}
.btn-lg, .btn-group-lg > .btn {
    padding: 14px 32px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    border-radius: var(--taro-radius-lg) !important;
}
.btn-block { display: block; width: 100%; }

/* --------------------------------------------------------------------------
   3. CARDS (complementos; la base .card ya esta tematizada)
   -------------------------------------------------------------------------- */
.card-title { color: #fff; font-weight: 700; }
.card-subtitle, .card-text small { color: var(--taro-text-muted); }
.card > .list-group { border-color: var(--taro-border); }

/* Card destacada reutilizable (spec "popular" de la landing) */
.card.taro-featured {
    background: var(--taro-card-featured-bg) !important;
    border: 2px solid var(--taro-border-featured) !important;
    box-shadow: var(--taro-shadow-card-featured) !important;
}

/* Caja de icono 48px de la landing (features, paneles) */
.taro-icon-box {
    width: 48px; height: 48px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--taro-radius-lg);
    background: var(--taro-gradient-icon-box);
    border: 1px solid var(--taro-border-hover);
    color: var(--taro-primary-400);
}

/* --------------------------------------------------------------------------
   4. BADGES (BS4) Y LABELS (BS3/WHMCS): pills tintadas por estado
   Colores del design system: exito #22C55E, error #EF4444,
   advertencia #F59E0B, info #3B82F6, acento #FF25FF.
   -------------------------------------------------------------------------- */
.badge, .label {
    display: inline-block;
    font-family: var(--taro-font-sans);
    font-weight: 600;
    font-size: 11px;
    line-height: 1.4;
    padding: 4px 12px;
    border-radius: var(--taro-radius-full);
    vertical-align: middle;
}
.badge-primary, .label-primary {
    background: var(--taro-accent-tint) !important;
    border: 1px solid var(--taro-border-hover) !important;
    color: var(--taro-primary-400) !important;
}
.badge-secondary, .badge-dark, .badge-light,
.label-default {
    background: var(--taro-surface-hover) !important;
    border: 1px solid var(--taro-border) !important;
    color: var(--taro-text-secondary) !important;
}
.badge-success, .label-success {
    background: rgba(34, 197, 94, 0.20) !important;
    border: 1px solid rgba(34, 197, 94, 0.40) !important;
    color: #4ADE80 !important;
}
.badge-danger, .label-danger {
    background: rgba(239, 68, 68, 0.20) !important;
    border: 1px solid rgba(239, 68, 68, 0.40) !important;
    color: #FCA5A5 !important;
}
.badge-warning, .label-warning {
    background: rgba(245, 158, 11, 0.20) !important;
    border: 1px solid rgba(245, 158, 11, 0.40) !important;
    color: #FBBF24 !important;
}
.badge-info, .label-info {
    background: rgba(59, 130, 246, 0.20) !important;
    border: 1px solid rgba(59, 130, 246, 0.40) !important;
    color: #93C5FD !important;
}

/* Estados de ticket WHMCS no cubiertos por las capas anteriores
   (statusClass: open/answered/customer-reply/on-hold/in-progress/closed) */
.status-customer-reply, .status-customerreply {
    background: rgba(59, 130, 246, 0.20) !important;
    border: 1px solid rgba(59, 130, 246, 0.40) !important;
    color: #93C5FD !important;
}
.status-on-hold, .status-onhold, .status-pending {
    background: rgba(245, 158, 11, 0.20) !important;
    border: 1px solid rgba(245, 158, 11, 0.40) !important;
    color: #FBBF24 !important;
}
.status-in-progress, .status-inprogress {
    background: var(--taro-accent-tint) !important;
    border: 1px solid var(--taro-border-hover) !important;
    color: var(--taro-primary-400) !important;
}
.status-closed, .status-cancelled, .status-expired, .status-terminated,
.status-fraud, .status-suspended {
    background: var(--taro-surface-hover) !important;
    border: 1px solid var(--taro-border) !important;
    color: var(--taro-text-muted) !important;
}
/* Estados con color dinamico del admin (style="background-color:...") */
.label.status, .label.status-custom {
    padding: 4px 12px;
    border-radius: var(--taro-radius-full) !important;
    color: #fff;
}

/* Pill de acento de la landing (badges hero) */
.taro-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px;
    border-radius: var(--taro-radius-full);
    background: var(--taro-accent-tint);
    border: 1px solid var(--taro-border-badge);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   5. FORMULARIOS (complementos: la base .form-control ya esta cubierta)
   -------------------------------------------------------------------------- */
.col-form-label, .form-check-label { color: var(--taro-text-secondary); }
.form-text, .form-text.text-muted, small.form-text {
    color: var(--taro-text-faint) !important;
}
legend { color: #fff; font-weight: 600; }
fieldset { border-color: var(--taro-border); }

textarea.form-control { min-height: 110px; resize: vertical; }

/* Flecha del .custom-select: la de Bootstrap es negra e invisible en dark */
.custom-select {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%23FF66FF' stroke-width='1.6' stroke-linecap='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 10px 6px !important;
    -webkit-appearance: none;
    appearance: none;
    padding-right: 34px !important;
}
/* Se excluye [name="currency"]: custom.css (AGENTE 4) le restaura la
   flecha nativa con appearance:auto y se duplicaria el indicador. */
select.form-control:not([multiple]):not([size]):not([name="currency"]) {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%23FF66FF' stroke-width='1.6' stroke-linecap='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 10px 6px !important;
    padding-right: 34px !important;
}

/* Checkboxes / radios nativos: acento magenta */
input[type="checkbox"], input[type="radio"] {
    accent-color: var(--taro-primary-500);
}
/* Custom radio marcado (el checkbox ya lo cubre custom.css) */
.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
    background: var(--taro-primary-500) !important;
    border-color: var(--taro-primary-500) !important;
}
.custom-control-input:disabled ~ .custom-control-label,
.form-check-input:disabled ~ .form-check-label {
    color: var(--taro-text-faint) !important;
}
/* Switch estilo landing */
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background: var(--taro-gradient-toggle) !important;
    border-color: transparent !important;
}
.custom-switch .custom-control-label::after { background: #fff !important; }

/* Validacion */
.form-control.is-invalid, .custom-select.is-invalid {
    border-color: rgba(239, 68, 68, 0.60) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
}
.form-control.is-valid, .custom-select.is-valid {
    border-color: rgba(34, 197, 94, 0.60) !important;
}
.invalid-feedback { color: #FCA5A5 !important; }
.valid-feedback { color: #4ADE80 !important; }

/* Input file */
.custom-file-input ~ .custom-file-label::after {
    background: var(--taro-surface-hover) !important;
    color: #fff !important;
    border-left: 1px solid var(--taro-border) !important;
}

/* Input group: texto del addon coherente */
.input-group-text { color: var(--taro-text-muted); }

/* --------------------------------------------------------------------------
   6. ALERTAS (base y variantes que custom.css no define)
   -------------------------------------------------------------------------- */
.alert {
    border-radius: var(--taro-radius-lg);
    font-family: var(--taro-font-sans);
    font-size: 0.9rem;
}
.alert .alert-heading { color: inherit; font-weight: 700; }
.alert .close { color: inherit !important; opacity: 0.7; text-shadow: none; }
.alert .close:hover { opacity: 1; }
.alert-primary, .alert-secondary, .alert-light, .alert-dark {
    background: var(--taro-surface) !important;
    border: 1px solid var(--taro-border) !important;
    color: var(--taro-text-secondary) !important;
    border-radius: var(--taro-radius-lg) !important;
}
.alert-primary { border-left: 3px solid var(--taro-primary-500) !important; }
.alert-success .alert-link { color: #4ADE80 !important; text-decoration: underline !important; }
.alert-danger .alert-link { color: #FCA5A5 !important; text-decoration: underline !important; }

/* --------------------------------------------------------------------------
   7. TABLAS GENERICAS (fuera de DataTables, p. ej. account-paymentmethods,
   viewinvoice, masspay, quotes)
   -------------------------------------------------------------------------- */
.table { font-family: var(--taro-font-sans); }
.table th { color: #fff; font-weight: 600; border-color: var(--taro-border) !important; }
.table td { border-color: var(--taro-border) !important; }
.table thead th {
    border-bottom: 1px solid var(--taro-border) !important;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--taro-text-muted) !important;
}
.table-striped tbody tr:nth-of-type(odd),
.table-striped > tr:nth-of-type(odd) {
    background: var(--taro-surface) !important;
}
.table-hover tbody tr:hover { background: var(--taro-surface-hover) !important; }
.table-bordered, .table-bordered td, .table-bordered th {
    border: 1px solid var(--taro-border) !important;
}
.table .thead-dark th, .table .thead-light th {
    background: var(--taro-bg-elevated) !important;
    color: #fff !important;
    border-color: var(--taro-border) !important;
}
.table-active, .table-active > td, .table-active > th {
    background: var(--taro-surface-active) !important;
}

/* --------------------------------------------------------------------------
   8. PAGINACION (complementa el estado activo/disabled de custom.css)
   -------------------------------------------------------------------------- */
.pagination { gap: 6px; }
.page-link {
    border-radius: var(--taro-radius-md) !important;
    font-family: var(--taro-font-sans);
    font-size: 0.875rem;
    transition: all var(--taro-transition-fast);
}
.page-link:hover {
    background: var(--taro-surface-active) !important;
    border-color: var(--taro-border-focus) !important;
    color: var(--taro-primary-400) !important;
}
.page-link:focus { box-shadow: 0 0 0 3px rgba(255, 37, 255, 0.25) !important; }
.page-item:first-child .page-link,
.page-item:last-child .page-link { border-radius: var(--taro-radius-md) !important; }

/* --------------------------------------------------------------------------
   9. TOOLTIPS Y POPOVERS (no cubiertos por ninguna capa anterior)
   -------------------------------------------------------------------------- */
.tooltip { font-family: var(--taro-font-sans); }
.tooltip .tooltip-inner {
    background: var(--taro-bg-elevated) !important;
    color: var(--taro-text-secondary) !important;
    border: 1px solid var(--taro-border) !important;
    border-radius: var(--taro-radius-md) !important;
    box-shadow: var(--taro-shadow-elevated);
    padding: 6px 12px;
    font-size: 0.8125rem;
}
.tooltip.bs-tooltip-top .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="top"] .arrow::before { border-top-color: var(--taro-bg-elevated) !important; }
.tooltip.bs-tooltip-bottom .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="bottom"] .arrow::before { border-bottom-color: var(--taro-bg-elevated) !important; }
.tooltip.bs-tooltip-left .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="left"] .arrow::before { border-left-color: var(--taro-bg-elevated) !important; }
.tooltip.bs-tooltip-right .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="right"] .arrow::before { border-right-color: var(--taro-bg-elevated) !important; }

.popover {
    background: var(--taro-bg-elevated) !important;
    border: 1px solid var(--taro-border) !important;
    border-radius: var(--taro-radius-lg) !important;
    box-shadow: var(--taro-shadow-elevated) !important;
    font-family: var(--taro-font-sans) !important;
}
.popover .popover-header {
    background: rgba(255, 255, 255, 0.03) !important;
    color: #fff !important;
    border-bottom: 1px solid var(--taro-border) !important;
    border-radius: var(--taro-radius-lg) var(--taro-radius-lg) 0 0 !important;
    font-weight: 600;
}
.popover .popover-body { color: var(--taro-text-tertiary) !important; }
.popover .arrow::before { border-color: transparent !important; }
.bs-popover-top .arrow::after,
.bs-popover-auto[x-placement^="top"] .arrow::after { border-top-color: var(--taro-bg-elevated) !important; }
.bs-popover-bottom .arrow::after,
.bs-popover-auto[x-placement^="bottom"] .arrow::after { border-bottom-color: var(--taro-bg-elevated) !important; }
.bs-popover-left .arrow::after,
.bs-popover-auto[x-placement^="left"] .arrow::after { border-left-color: var(--taro-bg-elevated) !important; }
.bs-popover-right .arrow::after,
.bs-popover-auto[x-placement^="right"] .arrow::after { border-right-color: var(--taro-bg-elevated) !important; }

/* --------------------------------------------------------------------------
   10. TABS / NAVS / LIST-GROUPS (complementos)
   -------------------------------------------------------------------------- */
.nav-link { font-family: var(--taro-font-sans); }
.nav-tabs .nav-link.disabled { color: var(--taro-text-faint) !important; }
.nav-pills .nav-link {
    color: var(--taro-text-tertiary);
    border-radius: var(--taro-radius-lg);
}
.nav-pills .nav-link:not(.active):hover {
    color: var(--taro-primary-400);
    background: var(--taro-accent-tint);
}
.tab-content { color: var(--taro-text-secondary); }

.list-group-item { font-family: var(--taro-font-sans); }
.list-group-item .badge { border-radius: var(--taro-radius-full) !important; }
.list-group-flush .list-group-item { border-bottom: 1px solid var(--taro-border) !important; }

/* --------------------------------------------------------------------------
   11. MISC REUTILIZABLE
   -------------------------------------------------------------------------- */
hr { border-top: 1px solid var(--taro-border) !important; }
code { color: var(--taro-primary-400); background: var(--taro-surface); padding: 2px 6px; border-radius: var(--taro-radius-sm); }
kbd { background: var(--taro-bg-elevated); border: 1px solid var(--taro-border); color: #fff; }
blockquote, .blockquote {
    border-left: 3px solid var(--taro-primary-500);
    padding-left: 1rem;
    color: var(--taro-text-tertiary);
}
.close { color: #fff; text-shadow: none; }

/* Utilidades de texto semantico de Bootstrap -> paleta del design system */
.text-success { color: #4ADE80 !important; }
.text-danger  { color: #FCA5A5 !important; }
.text-warning { color: #FBBF24 !important; }
.text-info    { color: #93C5FD !important; }

/* Fondos semanticos solidos de Bootstrap -> tintes dark */
.bg-success { background: rgba(34, 197, 94, 0.20) !important; }
.bg-danger  { background: rgba(239, 68, 68, 0.20) !important; }
.bg-warning { background: rgba(245, 158, 11, 0.20) !important; }
.bg-info    { background: rgba(59, 130, 246, 0.20) !important; }
.bg-primary { background: var(--taro-accent-tint) !important; }

/* Spinners / loaders */
.spinner-border, .spinner-grow { color: var(--taro-primary-500); }

/* Jumbotron / wells claros residuales */
.jumbotron, .well {
    background: var(--taro-surface) !important;
    border: 1px solid var(--taro-border) !important;
    border-radius: var(--taro-radius-xl) !important;
    color: var(--taro-text-secondary) !important;
}

/* --------------------------------------------------------------------------
   12. BARRIDO DE HUECOS (paginas sin cobertura de AGENTE 3/4)
   -------------------------------------------------------------------------- */

/* 12.1 Tickets (supportticketslist / viewticket): fila y prioridad */
.view-ticket .card-body p { color: var(--taro-text-secondary); }
.ticket-reply { border-color: var(--taro-border) !important; }

/* 12.2 Knowledgebase: iconos, votos y articulos */
.kb-article-item { border: 1px solid var(--taro-border) !important; border-radius: var(--taro-radius-lg); }
.kb-article-item:hover { border-color: var(--taro-border-hover) !important; }
.kb-category a { border-radius: var(--taro-radius-lg); }
.kbrating .btn { border-radius: var(--taro-radius-md) !important; }

/* 12.3 Downloads: iconos de fichero y descripciones */
.downloads .list-group-item i, .download-item i { color: var(--taro-primary-400); }

/* 12.4 Server status / contacto: iframes y paneles heredan el fondo dark
   (sin reglas extra necesarias; se deja constancia del barrido). */

/* 12.5 clientareacancelrequest.tpl: SweetAlert con colores viejos en duro
   (JS inline: gradiente #7c3aed->#9333ea, cancelButtonColor #9333ea,
   background #13132b). Se corrige por CSS sin tocar el JS. */
.swal2-popup .swal2-styled.swal2-cancel {
    background: var(--taro-surface-hover) !important;
    border: 1px solid var(--taro-border) !important;
    border-radius: var(--taro-radius-lg) !important;
    color: #fff !important;
    font-weight: 600 !important;
}
.swal2-popup .swal2-styled.swal2-cancel:hover {
    background: rgba(255, 255, 255, 0.20) !important;
}
/* Enlaces-boton inyectados en el HTML del swal con gradiente morado viejo */
.swal2-html-container a[style*="linear-gradient"] {
    background: var(--taro-gradient-cta) !important;
    border-radius: var(--taro-radius-lg) !important;
    box-shadow: var(--taro-shadow-cta) !important;
}

/* 12.6 supportticketslist.tpl: pills de estado con color dinamico
   (style="background-color:{$ticket.statusColor}") -> texto legible */
.label.status-custom { color: #fff !important; font-weight: 600; }

/* 12.7 Nota de barrido: homepage.tpl y productpage.tpl conservan morados
   #7c3aed/#5865F2 en cientos de estilos inline (pagina de marketing con
   diseno propio). Se deja documentado como pendiente: corregirlo por CSS
   generico romperia contadores, sliders y steps. No se anade override. */

/* --------------------------------------------------------------------------
   13. MOVIMIENTO REDUCIDO (paridad con la landing)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   FIN taro-theme.css (AGENTE 5)
   ========================================================================== */