/* ================================================================
   CUSTOM CSS - HOSTGLOBALMAC (DARK THEME REFORZADO)
   Colores: Fondo (#0d0e10) | Cajas (#2b3034) | Bordes (#3d444a)
   ================================================================ */

/* 1. LOS BLOQUES QUE DETECTASTE CON F12 */

/* El contenido de las pestañas (donde se ven los productos/detalles) */
div.tab-content {
    background-color: #2b3034 !important;
    border: 1px solid #3d444a !important;
    color: #ffffff !important;
    padding: 20px;
    border-radius: 0 0 8px 8px;
}

/* La barra lateral cuando está colapsada o en móvil */
div.sidebar.collapsed, 
.sidebar {
    background-color: #0d0e10 !important; /* Fondo oscuro para que no brille */
    border: none !important;
}

/* Encabezados generales que salían blancos */
header, .header-lined {
    background-color: transparent !important; /* Para que use el fondo de la web */
    border-bottom: 1px solid #3d444a !important;
    color: #ffffff !important;
}

/* Las columnas generales (div.col) */
div.col-md-9, div.col-md-3, div.col-sm-12, .col-12 {
    background-color: transparent !important; /* Evita que las columnas tengan fondo propio blanco */
}

/* 2. CONFIGURACIÓN GENERAL DEL CUERPO */
html, body {
    background-color: #0d0e10 !important;
    color: #ffffff !important;
}

#main-body {
    background-color: #0d0e10 !important;
}

/* 3. PANELES Y CAJAS (Color #2b3034) */
.panel, 
.panel-default, 
.list-group-item, 
.well, 
.thumbnail, 
.product-info, 
.login-container,
.client-area-home-block {
    background-color: #2b3034 !important;
    color: #ffffff !important;
    border: 1px solid #3d444a !important;
}

/* 4. TÍTULOS Y CABECERAS DE PANELES */
.panel-heading, 
#order-standard_cart .panel-heading,
.sidebar .panel-heading {
    background-color: #2b3034 !important;
    background-image: none !important;
    border-bottom: 1px solid #3d444a !important;
    color: #ffffff !important;
}

.panel-title {
    color: #ffffff !important;
}

/* 5. ARREGLO PARA EL CARRITO (Standard Cart) */
#order-standard_cart .products .product {
    background-color: #2b3034 !important;
    border: 1px solid #3d444a !important;
}

#order-standard_cart .categories-column .list-group .list-group-item {
    background-color: #1a1c1e !important;
}

/* 6. FORMULARIOS E INPUTS */
.form-control, select, textarea {
    background-color: #1a1c1e !important;
    color: #ffffff !important;
    border: 1px solid #3d444a !important;
}

/* 7. TEXTOS GLOBALES */
h1, h2, h3, h4, p, span, li, label, td, th {
    color: #ffffff !important;
}

/* Quitar sombras blancas que dan efecto de brillo */
* {
    box-shadow: none !important;
    text-shadow: none !important;
}
/* 6. BOTONES (AZUL SOBRE OSCURO) */
/* Selector para botones de orden */
a[id^="product"][id*="-order-button"], 
.btn-order-now, 
.btn-primary,
.btn-success {
    background-color: #0056b3 !important;
    color: #ffffff !important;
    border: none !important;
    text-shadow: none !important;
}
div.default-captcha, 
.captcha-container, 
#google-recaptcha-container {
    background-color: #2b3034 !important;
    padding: 15px;
    border-radius: 5px;
    border: 1px solid #3d444a !important;
    margin-bottom: 15px;
}

/* 2. Contenedor del Resumen de Compra (El panel lateral derecho) */
div.summary-container, 
#orderSummary, 
.order-summary {
    background-color: #2b3034 !important; /* Gris azulado */
    color: #ffffff !important;
    border: 1px solid #3d444a !important;
}

/* 3. Ajuste de textos dentro del resumen para que se vean */
div.summary-container .price, 
div.summary-container .subtotal, 
div.summary-container .total-due-today {
    color: #ffffff !important;
}

div.summary-container .panel-footer {
    background-color: #1a1c1e !important; /* Un poco más oscuro para el pie del resumen */
    border-top: 1px solid #3d444a !important;
}
/* --- AJUSTES: PROMO DE DOMINIOS Y PIES DE PANEL --- */

/* 1. Caja de promoción de dominios */
div.domain-promo-box, 
.domain-promo-box {
    background-color: #2b3034 !important;
    border: 1px solid #3d444a !important;
    color: #ffffff !important;
    margin-bottom: 20px;
}

/* 2. Pies de página de los paneles (Panel Footer) */
/* Esto arregla el fondo de los botones de "Siguiente" o "Pagar" */
div.panel-footer, 
div.panel-footer.clearfix {
    background-color: #1a1c1e !important; /* Un poco más oscuro para dar contraste */
    border-top: 1px solid #3d444a !important;
    color: #ffffff !important;
}

/* 3. Asegurar que los botones dentro del footer se vean bien */
div.panel-footer .btn {
    margin-top: 5px;
    margin-bottom: 5px;
}
/* --- AJUSTES DE NAVEGACIÓN Y COLORES DE ÉNFASIS --- */

/* 1. Fondo del total y elementos destacados */
span.primary-bg-color, 
.primary-bg-color {
    background-color: #007bff !important; /* Azul para que resalte el precio/total */
    color: #ffffff !important;
}

/* 2. Barra lateral colapsada (Refuerzo) */
div.sidebar.collapsed {
    background-color: #0d0e10 !important;
    border: none !important;
}

/* 3. Ítems de listas o menús laterales */
div.item {
    background-color: #2b3034 !important;
    color: #ffffff !important;
    border-bottom: 1px solid #3d444a !important;
}

/* 4. Pestaña activa (La que estás viendo ahora) */
/* Esto quita el blanco de la pestaña seleccionada en el menú */
a.nav-link.active, 
.nav-tabs > li.active > a, 
.nav-tabs > li.active > a:hover, 
.nav-tabs > li.active > a:focus {
    background-color: #2b3034 !important; /* Gris azulado */
    color: #ffffff !important;
    border: 1px solid #3d444a !important;
    border-bottom-color: transparent !important; /* Para que encaje con el cuadro de abajo */
}

/* 5. Efecto Hover para que no se pierda el contraste */
a.nav-link:hover {
    background-color: #3d444a !important;
    color: #ffffff !important;
}
/* --- AJUSTES: SIDEBAR Y OPCIÓN DE MARKETING --- */

/* 1. Refuerzo total para la Sidebar colapsada y sus hijos */
div.sidebar.collapsed, 
div.sidebar.collapsed .list-group,
div.sidebar.collapsed .list-group-item {
    background-color: #0d0e10 !important; /* Fondo negro */
    border-color: #3d444a !important;
    color: #ffffff !important;
}

/* 2. Opción de Marketing (El cuadro de suscripción al boletín) */
div.marketing-email-option {
    background-color: #2b3034 !important; /* Gris azulado */
    border: 1px solid #3d444a !important;
    padding: 15px;
    border-radius: 4px;
    margin-top: 20px;
    color: #ffffff !important;
}

/* 3. Asegurar que el texto dentro de la opción de marketing sea blanco */
div.marketing-email-option label, 
div.marketing-email-option p,
div.marketing-email-option .bootstrap-switch-label {
    color: #ffffff !important;
}
/* --- AJUSTE: CUERPO DE TARJETAS Y PANELES --- */

/* 1. Fondo para el cuerpo de las tarjetas (Productos y detalles) */
div.panel-body, 
div.card-body, 
.panel-body-card-body {
    background-color: #2b3034 !important; /* Gris azulado */
    color: #ffffff !important;
    border-radius: 0 0 4px 4px; /* Redondeado suave abajo */
}

/* 2. Asegurar que los textos dentro del cuerpo sean legibles */
div.panel-body-card-body p, 
div.panel-body-card-body small,
div.panel-body-card-body .text-muted {
    color: #bdc3c7 !important; /* Un gris claro para textos secundarios */
}

/* 3. Si hay enlaces dentro del cuerpo */
div.panel-body-card-body a {
    color: #ffffff !important;
    text-decoration: underline;
}
/* --- AJUSTE: RECUADRO DE PRECIOS --- */

/* 1. Fondo de la caja del precio */
div.panel-price, 
.panel-price, 
.price-area {
    background-color: #1a1c1e !important; /* Un tono más oscuro para que el precio resalte */
    border: 1px solid #3d444a !important;
    color: #ffffff !important;
    padding: 10px;
    border-radius: 4px;
}

/* 2. Forzar color del texto del precio y la moneda (USD, EUR, etc.) */
div.panel-price span, 
div.panel-price b, 
.price-area .price {
    color: #ffffff !important;
}

/* 3. Ajuste para el texto pequeño (ej. "Mensual", "Anual") */
div.panel-price small, 
.price-area .cycle {
    color: #bdc3c7 !important; /* Gris claro para que no brille tanto como el precio */
}

/* --- AJUSTE: VENTANAS EMERGENTES (MODALES) --- */

/* 1. Fondo del cuerpo del modal */
div.modal-body {
    background-color: #2b3034 !important; /* Gris azulado */
    color: #ffffff !important;
}

/* 2. También necesitamos oscurecer el encabezado y el pie del modal */
.modal-header, .modal-footer {
    background-color: #1a1c1e !important; /* Más oscuro para dar contraste */
    border-color: #3d444a !important;
    color: #ffffff !important;
}

/* 3. El botón de cerrar (la X) */
.modal-header .close {
    color: #ffffff !important;
    opacity: 0.8;
}

/* 4. El contenedor principal del modal (por si queda algún borde blanco) */
.modal-content {
    background-color: #2b3034 !important;
    border: 1px solid #3d444a !important;
}
/* --- AJUSTE: CUENTA ACTIVA / SELECCIONADA --- */

/* 1. Fondo de la cuenta activa en el menú o lista */
div.account.active, 
.account.active {
    background-color: #1a1c1e !important; /* Un negro suave para resaltar sobre el gris azulado */
    border-left: 3px solid #007bff !important; /* Una barrita azul lateral para indicar selección */
    color: #ffffff !important;
}

/* 2. Asegurar que los textos dentro de la cuenta activa no se pierdan */
div.account.active .details, 
div.account.active .name, 
div.account.active .email {
    color: #ffffff !important;
}

/* 3. Si hay un icono dentro de la cuenta activa */
div.account.active i {
    color: #007bff !important; /* El icono en azul para que resalte */
}
/* --- AJUSTE: SEPARADORES DE CUENTA --- */

/* 1. Cambiar el color del borde inferior de las cuentas */
div.account.border-bottom {
    border-bottom: 1px solid #3d444a !important; /* Gris oscuro en lugar de blanco */
    background-color: transparent !important;
}

/* 2. Asegurar que al pasar el mouse (hover) no se ponga blanco */
div.account.border-bottom:hover {
    background-color: #1a1c1e !important;
    transition: background 0.3s ease;
}

/* 3. Limpiar cualquier sombra o brillo que traiga por defecto */
div.account {
    box-shadow: none !important;
    color: #ffffff !important;
}
/* --- AJUSTE: CONTENEDOR DE CUENTA (BASE) --- */

/* 1. Fondo base para todas las cajas de cuenta */
div.account {
    background-color: #2b3034 !important; /* Gris azulado */
    color: #ffffff !important;
    padding: 10px;
    border: 1px solid #3d444a !important; /* Borde sutil */
    transition: all 0.2s ease-in-out;
}

/* 2. Efecto al pasar el ratón (Hover) para que se sienta interactivo */
div.account:hover {
    background-color: #353b41 !important; /* Un gris un pelín más claro al tocarlo */
    cursor: pointer;
}

/* 3. Asegurar que los textos internos (nombre, email) sean blancos */
div.account .name, 
div.account .email, 
div.account i {
    color: #ffffff !important;
}
/* --- AJUSTE: ALERTAS DE ERROR DE VALIDACIÓN --- */

/* 1. Contenedor de errores del producto (ID específico) */
div#containerProductValidationeErrors.alert.alert-danger {
    background-color: #4d0000 !important; /* Rojo muy oscuro tipo vino */
    border: 1px solid #ff4d4d !important; /* Borde rojo brillante para que llame la atención */
    color: #ffffff !important; /* Texto blanco puro para máxima lectura */
    padding: 15px;
    margin-top: 15px;
    margin-bottom: 15px;
}

/* 2. Asegurar que los iconos o enlaces dentro del error sean visibles */
div#containerProductValidationeErrors.alert-danger i, 
div#containerProductValidationeErrors.alert-danger b, 
div#containerProductValidationeErrors.alert-danger strong {
    color: #ffcccc !important; /* Un rosa muy clarito para resaltar palabras clave */
}

/* 3. Ajuste general para cualquier alerta oculta que se muestre (w-hidden) */
.w-hidden {
    /* No tocamos el display, solo nos aseguramos que cuando se muestre sea oscura */
    background-color: #4d0000 !important;
}

/* --- AJUSTE: TABLA DE FACTURAS Y CONTROLES (DATATABLES) --- */

/* 1. Fondo de la tabla de facturas */
table#tableinvoicesList, 
table.dataTable {
    background-color: #2b3034 !important;
    color: #ffffff !important;
    border: 1px solid #3d444a !important;
}

/* 2. Encabezados de la tabla (Gris más oscuro para contraste) */
table#tableinvoicesList thead th, 
table.dataTable thead th {
    background-color: #1a1c1e !important;
    color: #ffffff !important;
    border-bottom: 2px solid #3d444a !important;
}

/* 3. Celdas de la tabla */
table#tableinvoicesList td {
    background-color: #2b3034 !important;
    color: #ffffff !important;
    border-top: 1px solid #3d444a !important;
}

/* 4. Controles de la tabla (Selector de cantidad "Show X entries") */
div#tableinvoicesList_length, 
.dataTables_length, 
.dataTables_filter, 
.dataTables_info {
    color: #ffffff !important; /* Texto de "Show 10 entries" en blanco */
    margin-bottom: 10px;
    margin-top: 10px;
}

/* 5. El selector (dropdown) y el buscador (input) de la tabla */
.dataTables_length select, 
.dataTables_filter input {
    background-color: #1a1c1e !important;
    color: #ffffff !important;
    border: 1px solid #4e565d !important;
    padding: 5px;
    border-radius: 4px;
}

/* 6. Paginación (Botones de Siguiente/Anterior) */
.dataTables_paginate .paginate_button {
    background-color: #1a1c1e !important;
    color: #ffffff !important;
    border: 1px solid #3d444a !important;
}

.dataTables_paginate .paginate_button.current {
    background-color: #007bff !important; /* Azul para la página actual */
    color: #ffffff !important;
}
/* --- AJUSTE: MOSAICOS / TILES DE RESUMEN --- */

/* 1. Fondo del mosaico (Tile) */
div.col-sm-3.col-xl-6.tile, 
.tile {
    background-color: #2b3034 !important; /* Gris azulado para que combine con el resto */
    border: 1px solid #3d444a !important;
    border-radius: 8px;
    margin-bottom: 20px;
    color: #ffffff !important;
    transition: transform 0.2s ease;
}

/* 2. Efecto al pasar el mouse (para que se sienta como un botón) */
div.col-sm-3.col-xl-6.tile:hover {
    background-color: #353b41 !important;
    transform: translateY(-3px); /* Pequeño levante visual */
}

/* 3. Ajuste de los iconos dentro del mosaico */
.tile .icon {
    background-color: rgba(255, 255, 255, 0.05) !important; /* Fondo sutil para el icono */
    border-radius: 50%;
    color: #007bff !important; /* Icono en azul para resaltar */
}

/* 4. Títulos y números grandes dentro del tile */
.tile .stat, .tile .title, .tile .number {
    color: #ffffff !important;
}
/* --- AJUSTE: PANEL DE ESTADÍSTICAS CPANEL --- */

/* 1. Fondo principal de la tarjeta de métricas */
div#cPanelMetricStatsPanel.panel.panel-default, 
div#cPanelMetricStatsPanel.card {
    background-color: #2b3034 !important;
    border: 1px solid #3d444a !important;
    color: #ffffff !important;
}

/* 2. Encabezado del panel de métricas */
div#cPanelMetricStatsPanel .panel-heading, 
div#cPanelMetricStatsPanel .card-header {
    background-color: #1a1c1e !important;
    color: #ffffff !important;
    border-bottom: 1px solid #3d444a !important;
}

/* 3. Barras de progreso y etiquetas */
div#cPanelMetricStatsPanel .usage-stats label {
    color: #ffffff !important;
}

/* 4. Asegurar que los valores (ej. "500MB / 1GB") sean visibles */
div#cPanelMetricStatsPanel .usage-stats .stat-value {
    color: #bdc3c7 !important;
}

/* 5. Fondo de las barras de progreso (el camino vacío) */
div#cPanelMetricStatsPanel .progress {
    background-color: #1a1c1e !important;
    border: 1px solid #3d444a !important;
}
/* --- AJUSTE: CELDAS INTERNAS DE MÉTRICAS CPANEL --- */

/* 1. Forzar fondo oscuro en encabezados y celdas del panel de cPanel */
#cPanelMetricStatsPanel table th, 
#cPanelMetricStatsPanel table td {
    background-color: #2b3034 !important; /* Gris azulado */
    color: #ffffff !important;
    border-color: #3d444a !important; /* Bordes sutiles */
}

/* 2. Quitar fondos rayados (striped) si los tiene */
#cPanelMetricStatsPanel .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #1a1c1e !important; /* Un tono más oscuro para las filas impares */
}

/* 3. Ajuste para los iconos de cPanel dentro de las celdas */
#cPanelMetricStatsPanel table td i {
    color: #007bff !important; /* Iconos en azul */
}

/* 4. Si hay algún enlace dentro de las celdas */
#cPanelMetricStatsPanel table td a {
    color: #ffffff !important;
    text-decoration: underline;
}
/* --- AJUSTE: TABLAS DE DOMINIOS Y ETIQUETAS --- */

/* 1. Forzar celdas oscuras en TODAS las tablas (th y td) */
/* Esto elimina cualquier residuo blanco en facturas, dominios o servicios */
table.table th, 
table.table td,
.table-list th, 
.table-list td {
    background-color: #2b3034 !important;
    color: #ffffff !important;
    border-color: #3d444a !important;
}

/* 2. Control de cantidad de la tabla de dominios (Show X entries) */
div#tableDomainList_length, 
.dataTables_length, 
.dataTables_filter {
    color: #ffffff !important;
    padding: 10px 0;
}

/* 3. Estilo para el selector (dropdown) de la tabla de dominios */
div#tableDomainList_length select {
    background-color: #1a1c1e !important;
    color: #ffffff !important;
    border: 1px solid #4e565d !important;
    padding: 4px;
    border-radius: 4px;
}

/* 4. ETIQUETAS (Labels) - Para que no se vean negras sobre fondo oscuro */
label {
    color: #ffffff !important;
    font-weight: 500;
}

/* 5. Ajuste para los "Labels" de estado (ej: Activo, Pendiente) */
/* Si el label está dentro de un botón o es un badge, mantenemos el texto blanco */
.label, .badge {
    color: #ffffff !important;
}
/* --- AJUSTE: ESTADOS Y TABLA DE SERVICIOS --- */

/* 1. Etiqueta de Estado "Activo" (Status Active) */
/* Le damos un verde esmeralda oscuro que resalte pero sea elegante */
span.label.status.status-active, 
.label-success, 
.badge-success {
    background-color: #28a745 !important; /* Verde sólido */
    color: #ffffff !important;           /* Texto blanco puro */
    padding: 3px 10px;
    border-radius: 4px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.85em;
}

/* 2. Control de cantidad de la tabla de servicios (Show X entries) */
div#tableServicesList_length, 
.dataTables_length {
    color: #ffffff !important;
    margin-bottom: 15px;
}

/* 3. El selector (dropdown) de la tabla de servicios */
div#tableServicesList_length select {
    background-color: #1a1c1e !important;
    color: #ffffff !important;
    border: 1px solid #4e565d !important;
    padding: 4px;
    border-radius: 4px;
}

/* 4. Refuerzo para todas las etiquetas (labels) de la página */
label {
    color: #ffffff !important;
}
/* --- AJUSTE: BUSCADOR DE DOMINIOS Y COLUMNAS --- */

/* 1. Fondo para las columnas de TLDs y cuadrículas */
div.col-md-4, 
div.col-xs-4, 
.col-4 {
    background-color: transparent !important; /* Dejamos que mande el fondo del padre */
    color: #ffffff !important;
}

/* 2. Fila de dominio resaltado (Cuando el dominio está disponible) */
div.row.no-gutters.tld-row.filtered-row-highlighted {
    background-color: #1a1c1e !important; /* Negro azulado profundo */
    border: 2px solid #007bff !important;  /* Borde azul para que resalte con elegancia */
    border-radius: 8px;
    margin-bottom: 10px !important;
}

/* 3. Filas de TLDs normales (las que no están resaltadas) */
div.row.no-gutters.tld-row {
    background-color: #2b3034 !important;
    border-bottom: 1px solid #3d444a !important;
    color: #ffffff !important;
}

/* 4. Centrado de texto y precios en la búsqueda */
div.col-xs-4.text-center {
    color: #ffffff !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 5. Ajuste para los precios dentro de estas filas */
.tld-row .price {
    color: #2ecc71 !important; /* Un verde vibrante para el precio del dominio */
    font-weight: bold;
}
/* --- AJUSTE: COLUMNAS DE TABLA DE DOMINIOS Y TLDS --- */

/* 1. Unificar fondo y texto para las mini-columnas */
div.col-xs-4, 
div.col-4, 
.col-xs-4.col-4 {
    background-color: #2b3034 !important; /* Gris azulado base */
    color: #ffffff !important;           /* Texto blanco */
    border: none !important;             /* Quitamos bordes internos que ensucien */
}

/* 2. Ajuste específico para cuando están dentro de una fila de TLD */
.tld-row div.col-xs-4 {
    padding: 15px 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95em;
}

/* 3. Evitar que el texto se ponga negro si hay herencia de Bootstrap */
div.col-xs-4.col-4 span, 
div.col-xs-4.col-4 strong {
    color: #ffffff !important;
}
/* --- AJUSTE: EDITOR DE TICKETS Y ÁREAS DE TEXTO --- */

/* 1. Barra de herramientas del editor (Negrita, Itálica, Enlaces, etc.) */
div.md-header.btn-toolbar {
    background-color: #1a1c1e !important; /* Negro profundo */
    border: 1px solid #3d444a !important;
    border-bottom: none; /* Para que se una con el cuadro de texto */
    padding: 8px;
    border-radius: 4px 4px 0 0;
}

/* 2. Botones dentro de la barra de herramientas */
div.md-header.btn-toolbar .btn {
    background-color: #2b3034 !important;
    color: #ffffff !important;
    border: 1px solid #4e565d !important;
}

div.md-header.btn-toolbar .btn:hover {
    background-color: #3d444a !important;
}

/* 3. El área de texto (Donde el cliente escribe) */
textarea#inputMessage.form-control.markdown-editor.md-input {
    background-color: #0d0e10 !important; /* Fondo negro puro para mejor contraste */
    color: #ffffff !important;           /* Texto blanco */
    border: 1px solid #3d444a !important;
    border-radius: 0 0 4px 4px;
    padding: 15px;
    line-height: 1.6;
}

/* 4. El texto pequeño (Small Font) debajo de los campos */
div.small-font, 
small, 
.small-font {
    color: #bdc3c7 !important; /* Gris claro suave */
    font-size: 0.85em;
}

/* 5. Asegurar que el foco del textarea no brille en blanco */
textarea#inputMessage:focus {
    background-color: #0d0e10 !important;
    border-color: #007bff !important; /* Borde azul al escribir */
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
}
/* --- AJUSTE: TEXTOS Y SECCIÓN DE MARKETING --- */

/* 1. Contenedor de suscripción de Marketing */
div.marketing-email-optin {
    background-color: #1a1c1e !important; /* Fondo oscuro distinguido */
    border: 1px solid #3d444a !important;
    padding: 20px;
    border-radius: 8px;
    margin: 20px 0;
}

/* 2. Títulos H4 (Suelen ser los títulos de secciones o modales) */
h4, .h4 {
    color: #ffffff !important;
    font-weight: 600;
    margin-bottom: 15px;
}

/* 3. Párrafos generales (p) */
/* Aplicamos un blanco ligeramente grisáceo para que no canse la vista */
p {
    color: #bdc3c7 !important; 
    line-height: 1.6;
}

/* 4. Asegurar que dentro de la sección marketing todo sea blanco */
div.marketing-email-optin p, 
div.marketing-email-optin label {
    color: #ffffff !important;
}

/* 5. Si hay enlaces dentro de los párrafos */
p a {
    color: #007bff !important;
    text-decoration: none;
}

p a:hover {
    text-decoration: underline;
}
/* --- AJUSTE: RENOVACIÓN DE DOMINIOS --- */

/* 1. Contenedor principal de la fila de renovación */
div.domain-renewal {
    background-color: #1a1c1e !important; /* Fondo oscuro profundo */
    border: 1px solid #3d444a !important;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 10px;
    color: #ffffff !important;
}

/* 2. Si la fila tiene un estado de "urgencia" o resaltado */
div.domain-renewal:hover {
    background-color: #2b3034 !important;
    border-color: #007bff !important; /* Brillo azul sutil al pasar el mouse */
}

/* 3. Ajuste para los textos internos (Nombre del dominio y fecha) */
div.domain-renewal .domain-name, 
div.domain-renewal .expiry-date {
    color: #ffffff !important;
    font-weight: bold;
}

/* 4. El precio dentro de la renovación */
div.domain-renewal .price {
    color: #2ecc71 !important; /* Verde para el precio */
}

/* 5. Si hay un checkbox o botón de selección */
div.domain-renewal .checkbox-container {
    background-color: transparent !important;
}