/**
 * Mediaweb Chile - WHMCS Sleek Dark Brand Theme
 * Custom CSS Stylesheet (Child of Twenty-One Theme)
 * Design Identity: Deep Dark Corporate (#1D252D) + Primary Green (#26D07C) + Glassmorphism
 */

/* ==========================================================================
   1. Importación de Tipografía & Variables Globales
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

:root {
    --mw-green: #26D07C;
    --mw-green-hover: #1eb668;
    --mw-green-glow: rgba(38, 208, 124, 0.25);
    --mw-dark-bg: #12181F;
    --mw-dark-card: rgba(29, 37, 45, 0.8);
    --mw-dark-panel: #181F26;
    --mw-dark-border: rgba(255, 255, 255, 0.06);
    --mw-gray-text: #919D9D;
    --mw-light-text: #FFFFFF;
    --mw-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.35);
    --mw-radius: 12px;
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   2. Estilos del Cuerpo & Estructura Principal
   ========================================================================== */
body {
    font-family: 'Outfit', sans-serif !important;
    background-color: var(--mw-dark-bg) !important;
    color: var(--mw-light-text) !important;
    overflow-x: hidden;
}

/* Scrollbar Personalizado Premium */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: var(--mw-dark-bg);
}
::-webkit-scrollbar-thumb {
    background: #1D252D;
    border: 2px solid var(--mw-dark-bg);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--mw-green);
}

/* Links Generales */
a {
    color: var(--mw-green) !important;
    text-decoration: none !important;
    transition: var(--transition-smooth) !important;
}
a:hover {
    color: var(--mw-green-hover) !important;
    text-shadow: 0 0 10px var(--mw-green-glow) !important;
}

/* ==========================================================================
   3. Tipografía & Encabezados
   ========================================================================== */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--mw-light-text) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
}

h1::after, .h1::after {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    background: var(--mw-green);
    margin-top: 8px;
    border-radius: 2px;
}

/* ==========================================================================
   4. Glassmorphism para Tarjetas (Cards) e Interfaces
   ========================================================================== */
.card, .panel, .well, .thumbnail {
    background-color: var(--mw-dark-card) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid var(--mw-dark-border) !important;
    border-radius: var(--mw-radius) !important;
    box-shadow: var(--mw-shadow) !important;
    transition: var(--transition-smooth) !important;
    margin-bottom: 20px;
}

.card:hover {
    transform: translateY(-3px);
    border-color: rgba(38, 208, 124, 0.2) !important;
}

.card-header, .panel-heading {
    background-color: rgba(24, 31, 38, 0.9) !important;
    border-bottom: 1px solid var(--mw-dark-border) !important;
    color: var(--mw-green) !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    border-top-left-radius: var(--mw-radius) !important;
    border-top-right-radius: var(--mw-radius) !important;
    padding: 15px 20px !important;
}

.card-footer, .panel-footer {
    background-color: rgba(24, 31, 38, 0.5) !important;
    border-top: 1px solid var(--mw-dark-border) !important;
    border-bottom-left-radius: var(--mw-radius) !important;
    border-bottom-right-radius: var(--mw-radius) !important;
}

.card-body, .panel-body {
    padding: 20px !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* ==========================================================================
   5. Navegación Principal & Menús (Navbar & Sidebar)
   ========================================================================== */
/* Header Principal */
.navbar-light, .bg-light, .header-navbar {
    background-color: rgba(24, 31, 38, 0.85) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--mw-dark-border) !important;
}

.navbar-light .navbar-nav .nav-link {
    color: var(--mw-gray-text) !important;
    font-weight: 500 !important;
    padding: 10px 15px !important;
    border-radius: 6px;
    transition: var(--transition-smooth) !important;
}

.navbar-light .navbar-nav .nav-link:hover, 
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .show > .nav-link {
    color: var(--mw-green) !important;
    background-color: rgba(38, 208, 124, 0.08) !important;
}

/* Sidebar Navigation Groups */
.list-group-item {
    background-color: var(--mw-dark-panel) !important;
    color: var(--mw-light-text) !important;
    border: 1px solid var(--mw-dark-border) !important;
    padding: 12px 18px !important;
    font-weight: 500 !important;
    transition: var(--transition-smooth) !important;
}

.list-group-item:first-child {
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
}

.list-group-item:last-child {
    border-bottom-left-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}

.list-group-item:hover {
    background-color: rgba(38, 208, 124, 0.1) !important;
    color: var(--mw-green) !important;
    padding-left: 22px !important;
}

.list-group-item.active {
    background-color: var(--mw-green) !important;
    color: #12181F !important;
    border-color: var(--mw-green) !important;
}

.list-group-item.active:hover {
    color: #12181F !important;
    background-color: var(--mw-green) !important;
}

/* Menús Desplegables (Dropdowns) */
.dropdown-menu {
    background-color: var(--mw-dark-panel) !important;
    border: 1px solid var(--mw-dark-border) !important;
    border-radius: 10px !important;
    box-shadow: var(--mw-shadow) !important;
    padding: 8px 0 !important;
}

.dropdown-item {
    color: var(--mw-light-text) !important;
    font-weight: 500 !important;
    padding: 8px 20px !important;
    transition: var(--transition-smooth) !important;
}

.dropdown-item:hover {
    background-color: var(--mw-green) !important;
    color: #12181F !important;
}

/* ==========================================================================
   6. Botones Premium (Glow & Micro-Animations)
   ========================================================================== */
.btn {
    border-radius: 8px !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    transition: var(--transition-smooth) !important;
}

/* Botón Primario (Verde Mediaweb) */
.btn-primary {
    background-color: var(--mw-green) !important;
    border-color: var(--mw-green) !important;
    color: #12181F !important;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--mw-green-hover) !important;
    border-color: var(--mw-green-hover) !important;
    color: #12181F !important;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 4px 15px rgba(38, 208, 124, 0.4) !important;
}

/* Botón Secundario / Outline */
.btn-secondary, .btn-default {
    background-color: transparent !important;
    border: 1.5px solid var(--mw-gray-text) !important;
    color: var(--mw-light-text) !important;
}

.btn-secondary:hover, .btn-default:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--mw-light-text) !important;
    transform: translateY(-2px);
}

/* Botones de Información / Éxito */
.btn-info, .btn-success {
    background-color: rgba(38, 208, 124, 0.15) !important;
    border: 1.5px solid var(--mw-green) !important;
    color: var(--mw-green) !important;
}

.btn-info:hover, .btn-success:hover {
    background-color: var(--mw-green) !important;
    color: #12181F !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(38, 208, 124, 0.25) !important;
}

/* ==========================================================================
   7. Elementos de Formulario (Inputs, Focus Rings)
   ========================================================================== */
.form-control, input, select, textarea {
    background-color: rgba(18, 24, 31, 0.8) !important;
    border: 1.5px solid var(--mw-dark-border) !important;
    color: var(--mw-light-text) !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    transition: var(--transition-smooth) !important;
}

.form-control:focus, input:focus, select:focus, textarea:focus {
    border-color: var(--mw-green) !important;
    box-shadow: 0 0 0 4px var(--mw-green-glow) !important;
    background-color: rgba(18, 24, 31, 0.95) !important;
    color: var(--mw-light-text) !important;
}

label {
    color: var(--mw-gray-text) !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
}

/* Checkboxes y Radios */
input[type="checkbox"], input[type="radio"] {
    accent-color: var(--mw-green) !important;
}

/* ==========================================================================
   8. Tablas & Listado de Servicios
   ========================================================================== */
.table {
    color: var(--mw-light-text) !important;
    border-collapse: separate !important;
    border-spacing: 0 8px !important;
    width: 100% !important;
}

.table th {
    background-color: rgba(24, 31, 38, 0.9) !important;
    color: var(--mw-green) !important;
    border: none !important;
    padding: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.05em !important;
}

.table td {
    background-color: rgba(29, 37, 45, 0.5) !important;
    border-top: 1px solid var(--mw-dark-border) !important;
    border-bottom: 1px solid var(--mw-dark-border) !important;
    padding: 16px 14px !important;
    vertical-align: middle !important;
}

.table tr {
    transition: var(--transition-smooth) !important;
}

.table tr:hover td {
    background-color: rgba(38, 208, 124, 0.04) !important;
    border-color: rgba(38, 208, 124, 0.2) !important;
}

/* Badges / Estados (Sleek Micro-Badges) */
.badge {
    padding: 6px 12px !important;
    border-radius: 20px !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
}

.badge-success, .status-active, .badge-active {
    background-color: rgba(38, 208, 124, 0.15) !important;
    color: var(--mw-green) !important;
    border: 1px solid var(--mw-green) !important;
}

.badge-danger, .status-terminated, .badge-inactive {
    background-color: rgba(231, 76, 60, 0.15) !important;
    color: #e74c3c !important;
    border: 1px solid #e74c3c !important;
}

.badge-warning, .status-pending {
    background-color: rgba(241, 196, 15, 0.15) !important;
    color: #f1c40f !important;
    border: 1px solid #f1c40f !important;
}

/* ==========================================================================
   9. Alertas y Cuadros de Estado
   ========================================================================== */
.alert {
    border-radius: var(--mw-radius) !important;
    border: 1px solid transparent !important;
    padding: 15px 20px !important;
    font-weight: 500 !important;
}

.alert-success {
    background-color: rgba(38, 208, 124, 0.12) !important;
    border-color: rgba(38, 208, 124, 0.2) !important;
    color: var(--mw-green) !important;
}

.alert-info {
    background-color: rgba(52, 152, 219, 0.12) !important;
    border-color: rgba(52, 152, 219, 0.2) !important;
    color: #3498db !important;
}

.alert-danger {
    background-color: rgba(231, 76, 60, 0.12) !important;
    border-color: rgba(231, 76, 60, 0.2) !important;
    color: #e74c3c !important;
}

/* ==========================================================================
   10. Home Dashboard & Stats Tiles (Vibrant Widgets)
   ========================================================================== */
.tiles-container .tile {
    background: var(--mw-dark-card) !important;
    border: 1px solid var(--mw-dark-border) !important;
    border-radius: var(--mw-radius) !important;
    transition: var(--transition-smooth) !important;
}

.tiles-container .tile:hover {
    transform: translateY(-4px) scale(1.01) !important;
    border-color: var(--mw-green) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

.tiles-container .tile .icon {
    color: var(--mw-green) !important;
}

.tiles-container .tile .stat {
    font-weight: 700 !important;
    color: var(--mw-light-text) !important;
}

.tiles-container .tile .title {
    color: var(--mw-gray-text) !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
}

/* Reemplazar visualmente 'FACTURAS' por 'NOTAS DE VENTA' en cualquier card o bloque del home que enlace a invoices */
[href*="clientarea.php?action=invoices"] .title,
[href*="action=invoices"] .title,
[onclick*="action=invoices"] .title,
.tile:nth-child(4) .title {
    font-size: 0 !important;
}

[href*="clientarea.php?action=invoices"] .title::after,
[href*="action=invoices"] .title::after,
[onclick*="action=invoices"] .title::after,
.tile:nth-child(4) .title::after {
    content: "NOTAS DE VENTA" !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    color: var(--mw-gray-text) !important;
    display: block !important;
}

/* Banner de Bienvenida en Home */
.home-welcome-banner {
    background: linear-gradient(135deg, rgba(29, 37, 45, 0.95) 0%, rgba(18, 24, 31, 0.95) 100%) !important;
    border: 1px solid var(--mw-green) !important;
    border-radius: var(--mw-radius) !important;
    padding: 30px !important;
    position: relative;
    overflow: hidden;
}

.home-welcome-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, var(--mw-green-glow) 0%, transparent 70%);
    pointer-events: none;
}

/* ==========================================================================
   11. Footer del Área de Clientes (Estilo SII)
   ========================================================================== */
footer, .footer {
    background-color: #12181F !important;
    border-top: 1px solid var(--mw-dark-border) !important;
    padding: 40px 0 20px 0 !important;
    color: var(--mw-gray-text) !important;
}

footer h4, .footer h4 {
    color: var(--mw-green) !important;
    font-weight: 600 !important;
    margin-bottom: 20px !important;
}

footer a, .footer a {
    color: var(--mw-gray-text) !important;
}

footer a:hover, .footer a:hover {
    color: var(--mw-green) !important;
}

/* Línea Verde de Decoración al Final */
.footer-bottom-bar {
    height: 4px;
    background-color: var(--mw-green);
    width: 100%;
    margin-top: 20px;
}

/* ==========================================================================
   12. Correcciones de Usabilidad (Editor Markdown & Botones de Envío)
   ========================================================================== */

/* Asegurar visibilidad de todos los botones de envío y primarios */
input[type="submit"], button[type="submit"], button.btn-primary, .btn-primary {
    background-color: var(--mw-green) !important;
    border-color: var(--mw-green) !important;
    color: #12181F !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}

input[type="submit"]:hover, button[type="submit"]:hover, button.btn-primary:hover, .btn-primary:hover {
    background-color: var(--mw-green-hover) !important;
    border-color: var(--mw-green-hover) !important;
    color: #12181F !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 4px 15px rgba(38, 208, 124, 0.4) !important;
}

/* Corrección Completa del Editor de Texto (Estilo Papel Claro con Letras Negras e Iconos Visibles) */
html body .markdown-editor-wrapper .editor-toolbar,
html body .editor-toolbar {
    background-color: #F8FAFC !important;
    background: #F8FAFC !important;
    border: 1.5px solid #CBD5E1 !important;
    border-bottom: none !important;
    border-radius: var(--mw-radius) var(--mw-radius) 0 0 !important;
    padding: 8px 12px !important;
}

/* Botones del Toolbar */
html body .markdown-editor-wrapper .editor-toolbar a,
html body .markdown-editor-wrapper .editor-toolbar button,
html body .editor-toolbar a,
html body .editor-toolbar button {
    color: #1E293B !important;
    background-color: transparent !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    margin: 2px !important;
    width: 34px !important;
    height: 34px !important;
    line-height: 32px !important;
    text-align: center !important;
    display: inline-block !important;
    padding: 0 !important;
    transition: var(--transition-smooth) !important;
    opacity: 0.9 !important;
}

html body .markdown-editor-wrapper .editor-toolbar a:hover,
html body .markdown-editor-wrapper .editor-toolbar button:hover,
html body .editor-toolbar a:hover,
html body .editor-toolbar button:hover {
    color: var(--mw-green) !important;
    background-color: rgba(38, 208, 124, 0.1) !important;
    border-color: rgba(38, 208, 124, 0.2) !important;
    opacity: 1 !important;
    transform: none !important;
    box-shadow: none !important;
}

html body .markdown-editor-wrapper .editor-toolbar a.active,
html body .markdown-editor-wrapper .editor-toolbar button.active,
html body .editor-toolbar a.active,
html body .editor-toolbar button.active {
    color: #FFFFFF !important;
    background-color: var(--mw-green) !important;
    border-color: var(--mw-green) !important;
    opacity: 1 !important;
}

/* Iconos de FontAwesome dentro de la barra */
html body .editor-toolbar a i, html body .editor-toolbar button i, html body .editor-toolbar a::before, html body .editor-toolbar button::before {
    color: inherit !important;
    font-size: 14px !important;
}

/* Caja de Texto del Editor SimpleMDE y sus capas internas */
html body .markdown-editor-wrapper .CodeMirror,
html body .markdown-editor-wrapper .CodeMirror-scroll,
html body .markdown-editor-wrapper .CodeMirror-sizer,
html body .markdown-editor-wrapper .CodeMirror-lines,
html body .markdown-editor-wrapper .CodeMirror-code,
html body .markdown-editor-wrapper .CodeMirror-measure,
html body .markdown-editor-wrapper .CodeMirror-cursor,
html body .CodeMirror,
html body .CodeMirror-scroll,
html body .CodeMirror-sizer,
html body .CodeMirror-lines,
html body .CodeMirror-code {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    color: #12181F !important;
    border-color: #CBD5E1 !important;
}

html body .CodeMirror {
    border: 1.5px solid #CBD5E1 !important;
    border-radius: 0 0 var(--mw-radius) var(--mw-radius) !important;
    font-family: inherit !important;
}

/* Contenedor del Editor Markdown */
html body .markdown-editor {
    background-color: transparent !important;
    background: transparent !important;
}

/* Previsualización Activa */
html body .editor-preview, html body .editor-preview-side {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    color: #1E293B !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: var(--mw-radius) !important;
}

/* Cursor de Texto en el Editor */
html body .CodeMirror-cursor {
    border-left: 2px solid #000000 !important;
}

/* Selección de Texto en el Editor */
html body .CodeMirror-selected {
    background-color: #E2E8F0 !important;
}

/* ==========================================================================
   13. Correcciones para Editor Bootstrap-Markdown (.md-editor)
   ========================================================================== */

/* Contenedor del Editor Bootstrap-Markdown */
html body .md-editor {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    border: 1.5px solid #CBD5E1 !important;
    border-radius: var(--mw-radius) !important;
}

/* Encabezado / Barra de Herramientas del Editor */
html body .md-editor .md-header {
    background-color: #F8FAFC !important;
    background: #F8FAFC !important;
    border-bottom: 1.5px solid #CBD5E1 !important;
    padding: 8px 12px !important;
    border-radius: var(--mw-radius) var(--mw-radius) 0 0 !important;
}

/* Área de Texto (Textarea) de Entrada */
html body .md-editor textarea,
html body .md-editor .md-input,
html body .md-editor textarea.md-input {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    color: #12181F !important; /* Texto negro oscuro para total visibilidad */
    border: none !important;
    box-shadow: none !important;
    font-family: inherit !important;
    padding: 15px !important;
    border-radius: 0 0 var(--mw-radius) var(--mw-radius) !important;
}

/* Forzar que el placeholder sea gris oscuro */
html body .md-editor textarea::placeholder,
html body .md-editor .md-input::placeholder {
    color: #64748B !important;
    opacity: 0.8 !important;
}

/* Previsualización del Editor */
html body .md-editor .md-preview {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    color: #12181F !important;
    padding: 15px !important;
    border-top: 1.5px solid #CBD5E1 !important;
}

/* Botones del Toolbar (.btn-default inside .md-header) */
html body .md-editor .md-header .btn-toolbar .btn-group .btn,
html body .md-editor .md-header .btn,
html body .md-editor .md-header .btn-default {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    color: #1E293B !important; /* Iconos negros oscuros */
    padding: 6px 12px !important;
    border-radius: 6px !important;
    margin: 2px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    opacity: 0.9 !important;
    transition: var(--transition-smooth) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Hover de los Botones del Toolbar */
html body .md-editor .md-header .btn-toolbar .btn-group .btn:hover,
html body .md-editor .md-header .btn:hover,
html body .md-editor .md-header .btn-default:hover {
    color: var(--mw-green) !important; /* Cambia a verde en hover */
    background-color: rgba(38, 208, 124, 0.1) !important;
    border-color: rgba(38, 208, 124, 0.2) !important;
    opacity: 1 !important;
}

/* Botón Activo / Presionado en el Toolbar */
html body .md-editor .md-header .btn-toolbar .btn-group .btn.active,
html body .md-editor .md-header .btn.active,
html body .md-editor .md-header .btn-default.active {
    color: #FFFFFF !important;
    background-color: var(--mw-green) !important;
    border-color: var(--mw-green) !important;
    opacity: 1 !important;
}

/* Asegurar que los iconos FA o Glyphicons dentro de los botones sean oscuros */
html body .md-editor .md-header .btn i,
html body .md-editor .md-header .btn span {
    color: inherit !important;
}

/* ==========================================================================
   14. Corrección Global de Contraste para Encabezados, Títulos y Textos en Tarjetas (Cards/Panels)
   ========================================================================== */

/* Forzar que todos los títulos de tarjetas, cabeceras y paneles tengan texto blanco/gris claro de excelente contraste */
html body .card-header,
html body .card-title,
html body .panel-heading,
html body .panel-title,
html body .well h1, html body .well h2, html body .well h3, html body .well h4, html body .well h5, html body .well h6,
html body .card h1, html body .card h2, html body .card h3, html body .card h4, html body .card h5, html body .card h6,
html body .panel h1, html body .panel h2, html body .panel h3, html body .panel h4, html body .panel h5, html body .panel h6 {
    color: #FFFFFF !important;
}

/* Forzar que todos los textos planos, spans, párrafos y etiquetas dentro de las tarjetas oscuras sean blancos o gris claro */
html body .card p, html body .card span, html body .card label, html body .card div:not(.tab-content):not(.tab-pane):not(.product-status),
html body .panel p, html body .panel span, html body .panel label, html body .panel div:not(.tab-content):not(.tab-pane):not(.product-status),
html body .well p, html body .well span, html body .well label, html body .well div:not(.tab-content):not(.tab-pane):not(.product-status) {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Forzar que los textos secundarios o muted tengan una opacidad suave clara en fondos oscuros */
html body .card .text-muted,
html body .panel .text-muted,
html body .well .text-muted,
html body .card span.text-muted,
html body .panel span.text-muted,
html body .well span.text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ==========================================================================
   15. Corrección de Contraste para Páginas de la Zona de Cliente (Downloads, Password, etc.)
   ========================================================================== */

/* Forzar que todos los títulos, subtítulos, alertas y textos principales de la página de cliente sean blancos/gris claro */
html body .main-content h1, html body .main-content h2, html body .main-content h3, html body .main-content h4, html body .main-content h5, html body .main-content h6,
html body .main-content p, html body .main-content span, html body .main-content label, html body .main-content div:not(.tab-content):not(.tab-pane):not(.product-status),
html body #main-body h1, html body #main-body h2, html body #main-body h3, html body #main-body h4, html body #main-body h5, html body #main-body h6,
html body #main-body p, html body #main-body span, html body #main-body label, html body #main-body div:not(.tab-content):not(.tab-pane):not(.product-status),
html body .clientarea h1, html body .clientarea h2, html body .clientarea h3, html body .clientarea h4, html body .clientarea h5, html body .clientarea h6,
html body .clientarea p, html body .clientarea span, html body .clientarea label, html body .clientarea div:not(.tab-content):not(.tab-pane):not(.product-status) {
    color: #FFFFFF !important;
}

/* Forzar que los textos secundarios o muted en la página de cliente tengan una opacidad clara de excelente contraste */
html body .main-content .text-muted,
html body #main-body .text-muted,
html body .clientarea .text-muted,
html body .main-content span.text-muted,
html body #main-body span.text-muted,
html body .clientarea span.text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Asegurar que las alertas en el cuerpo principal tengan textos completamente legibles y claros */
html body .alert,
html body .alert p,
html body .alert span,
html body .alert div {
    color: #FFFFFF !important;
}

/* ==========================================================================
   16. Correcciones para Títulos y Textos en Detalles de Producto (Lado Derecho - Fondo Oscuro)
   ========================================================================== */

/* Forzar que todos los títulos, textos y elementos informativos dentro de las tarjetas de producto sean blancos/gris claro */
html body .product-details h1, html body .product-details h2, html body .product-details h3, html body .product-details h4, html body .product-details h5, html body .product-details h6,
html body .product-details p, html body .product-details span, html body .product-details div,
html body .product-info h1, html body .product-info h2, html body .product-info h3, html body .product-info h4, html body .product-info h5, html body .product-info h6,
html body .product-info p, html body .product-info span, html body .product-info div {
    color: #FFFFFF !important;
}

/* Permitir que los textos secundarios o muted tengan una opacidad suave para mantener jerarquía visual */
html body .product-details .text-muted,
html body .product-info .text-muted,
html body .product-details span.text-muted,
html body .product-info span.text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ==========================================================================
   17. Correcciones para Zonas con Fondo Claro (Pestañas Tab-Pane y Bloque Izquierdo Product-Status)
   ========================================================================== */

/* Forzar que todos los selects, inputs y textareas dentro de las pestañas tengan fondo blanco y texto negro */
html body .tab-content select,
html body .tab-content input,
html body .tab-content textarea,
html body .tab-content .form-control,
html body .tab-pane select,
html body .tab-pane input,
html body .tab-pane textarea,
html body .tab-pane .form-control {
    color: #12181F !important;
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    border: 1.5px solid #CBD5E1 !important;
    border-radius: 6px !important;
    height: auto !important;
    padding: 8px 12px !important;
    opacity: 1 !important;
}

/* Forzar color de texto oscuro para las opciones dentro de cualquier select */
html body select option,
html body .tab-content select option,
html body .tab-pane select option {
    color: #12181F !important;
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
}

/* Forzar que todos los contenedores de pestañas (tab-content y tab-pane) en el área de cliente tengan fondo oscuro */
html body .tab-content,
html body .tab-pane,
html body .tab-content .tab-pane,
html body .tab-content > .tab-pane,
html body .tab-content .card,
html body .tab-content .panel,
html body .tab-content .well {
    background-color: var(--mw-dark-card) !important;
    background: var(--mw-dark-card) !important;
    border: 1.5px solid var(--mw-dark-border) !important;
    border-radius: var(--mw-radius) !important;
}

/* Forzar que todos los textos, títulos, labels y divs dentro de las pestañas de cPanel o servicios sean blancos de altísimo contraste */
html body .tab-content *,
html body .tab-pane *,
html body .tab-content div,
html body .tab-content span,
html body .tab-content p,
html body .tab-content label,
html body .tab-content td,
html body .tab-content th,
html body .tab-pane div,
html body .tab-pane span,
html body .tab-pane p,
html body .tab-pane label,
html body .tab-pane td,
html body .tab-pane th {
    color: #FFFFFF !important;
}

/* Las etiquetas de formulario o textos secundarios dentro de las pestañas en un tono gris claro elegante */
html body .tab-content label,
html body .tab-content .control-label,
html body .tab-content th,
html body .tab-pane label,
html body .tab-pane .control-label,
html body .tab-pane th {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Restaurar los enlaces de acción principales a nuestro verde vibrante corporativo */
html body .tab-content a,
html body .tab-pane a,
html body .tab-content a *,
html body .tab-pane a * {
    color: var(--mw-green) !important;
}

/* Estilo para los botones dentro de las pestañas */
html body .tab-content .btn,
html body .tab-pane .btn,
html body .tab-content button,
html body .tab-pane button {
    background-color: transparent !important;
    border: 1.5px solid var(--mw-dark-border) !important;
    color: #FFFFFF !important;
    border-radius: var(--mw-radius) !important;
}

html body .tab-content .btn:hover,
html body .tab-pane .btn:hover,
html body .tab-content button:hover,
html body .tab-pane button:hover {
    background-color: var(--mw-dark-border) !important;
    color: #FFFFFF !important;
}

/* Pestañas de navegación superiores (nav-tabs) */
html body .nav-tabs .nav-link.active,
html body .nav-tabs .nav-item.show .nav-link {
    color: var(--mw-green) !important;
    background-color: var(--mw-dark-card) !important;
    border-color: var(--mw-dark-border) var(--mw-dark-border) var(--mw-dark-card) !important;
}

html body .nav-tabs .nav-link {
    color: rgba(255, 255, 255, 0.6) !important;
    border-color: transparent !important;
}

html body .nav-tabs .nav-link:hover {
    color: #FFFFFF !important;
    border-color: transparent !important;
}

html body .nav-tabs {
    border-bottom: 1.5px solid var(--mw-dark-border) !important;
}

/* Forzar que el cuadro de estado del producto (product-status) sea un hermoso panel oscuro con excelente contraste */
html body .product-status,
html body .product-status.product-status-active,
html body .product-status.product-status-completed,
html body .product-status.product-status-pending,
html body .product-status.product-status-suspended,
html body .product-status.product-status-terminated {
    background-color: var(--mw-dark-card) !important;
    background: var(--mw-dark-card) !important;
    border: 1.5px solid var(--mw-dark-border) !important;
    border-radius: var(--mw-radius) !important;
    padding: 24px 15px !important;
    color: #FFFFFF !important;
}

/* Forzar que todos los títulos, subtítulos y textos del cuadro de estado del producto sean blancos y legibles */
html body .product-status h1,
html body .product-status h2,
html body .product-status h3,
html body .product-status h4,
html body .product-status h5,
html body .product-status h6,
html body .product-status p,
html body .product-status span,
html body .product-status div {
    color: #FFFFFF !important;
}

/* Subtítulo del producto en gris claro elegante */
html body .product-status h4,
html body .product-status h4 *,
html body .product-status .text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* El círculo del icono del servicio en verde corporativo vibrante para un look impecable */
html body .product-status .product-icon .fa-circle {
    color: var(--mw-green) !important;
}

/* El icono interno del servicio (disco duro, servidor, etc.) en blanco brillante */
html body .product-status .product-icon .fa-stack-1x {
    color: #FFFFFF !important;
}

/* Forzar que todos los mosaicos (tiles) de la página de inicio tengan fondo oscuro y texto blanco de altísimo contraste */
html body .tile,
html body a.tile,
html body .tiles .tile {
    background-color: var(--mw-dark-card) !important;
    background: var(--mw-dark-card) !important;
    border: 1.5px solid var(--mw-dark-border) !important;
    border-radius: var(--mw-radius) !important;
}

/* Forzar que todos los números, textos e iconos dentro de los mosaicos sean blancos/gris claro */
html body .tile *,
html body a.tile *,
html body .tiles .tile * {
    color: #FFFFFF !important;
}

/* El número o contador principal en un blanco brillante */
html body .tile .stat,
html body a.tile .stat,
html body .tiles .tile .stat {
    color: #FFFFFF !important;
    font-weight: 700 !important;
}

/* Las etiquetas o títulos secundarios en gris claro suave */
html body .tile .title,
html body a.tile .title,
html body .tiles .tile .title,
html body .tile .title::after,
html body a.tile .title::after,
html body .tiles .tile .title::after {
    color: rgba(255, 255, 255, 0.7) !important;
}