.anulada .x-grid-cell {
	background-color: #fc7676;
	color: #fff;
}

.produccion {
	background-color: #FF4D39 !important;
	color: rgb(255, 255, 255);
	font-weight: 400;
	padding-top: 0px;
}


.activo:before {
	color: #003c00;
}

.inactivo:before {
	color: #00a600;
}

.proceso .x-grid-cell {
	background-color: #a8a8a8;
	color: #fff;
}

.sinStock .x-grid-cell {
	background-color: #ffa1a1;
	color: #fff;
}

.sinStock .x-grid-cell table td {
	color: #fff !important;
	font-weight: bold;
}

.sinStock .x-grid-cell table strong {
	color: black !important;
	font-weight: normal !important;
}

.anuladaFact .x-grid-cell {
	background-color: #ffa1a1;
	color: #fff;
}

.anuladaFact .x-grid-cell table td {
	color: #fff !important;
	font-weight: bold;
}

.anuladaFact .x-grid-cell table strong {
	color: black !important;
	font-weight: normal !important;
}

.x-message-box-comprobante {
	background-image: url(../images/suspender.png) !important;
	color: #36c436;
}

.x-toolbar tspan {
	color: white;
	font-weight: bold;
}

.x-panel-default-framed {
	border: 0 !important;
}

.datos .x-form-field {
	height: 16px !important;
	font-size: 11.4px !important;
}

.estadofirma .x-form-field {
	background-color: #FD0000 !important;
	color: fff !important;
}

.estadofirmavalida .x-form-field {
	background-color: #34A836 !important;
	color: fff !important;
}

.estadofirmaporcaducarse .x-form-field {
	background-color: #F5802A !important;
	color: fff !important;
}

.inicio .x-btn-inner.x-btn-inner-center {
	font-size: 45px !important;
}

.reporteGrid .x-grid-cell {
	height: 10px !important;
	border-bottom-width: 1px;
}

.reporteGuiaRemision .x-grid-cell {
	height: 10px !important;
}

.modulos .x-btn-default-medium {
	background: #00de63;
}

.modulos .x-btn-default-medium:hover {
	background: #277219;
}

.modulos .x-btn-default-medium {
	border-color: #00de63;
}

.header a {
	background: none;
}

.actualizacionLabel {
	animation: blinker 1.5s linear infinite;
}

/*@
keyframes blinker { 50% {
	opacity: 0;
}

}*/
.panelSplitbutton .x-btn-split-right {
	background-image: url(../images/add-splitbutton.png) !important;
}

/* Opcional: simula el estilo de Bootstrap para el contenedor */
.col-lg-7 {
	width: 58.333333%;
	float: left;
	box-sizing: border-box;
}

/* Opcional: centra verticalmente el contenido */
.align-self-center {
	display: flex;
	align-items: center;
}

/* Estilo para el label del combobox */
.form-label {
	font-weight: bold;
	margin-bottom: 5px;
}

/* Opcional: estilos para el componente de documentos */
.campo_documentos {
	padding: 5px;
	background-color: #e9ecef;
	border: 1px solid #ced4da;
}

/* Opcional: estilos para el aviso de IVA */
.info_iva {
	font-style: italic;
	color: #6c757d;
}

/* Estilo para el panel tipo "card" */
.custom-card {
	background: #fff;
	border-radius: 6px;
	/* Sombra sutil para dar efecto de elevación */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	margin: 20px auto;
}

/* Título de la tarjeta */
.card-title {
	font-size: 18px;
	font-weight: bold;
	margin: 0;
	padding: 0;
}

/* Contenedor de la imagen (price-box) */
.price-box {
	margin: 20px 0;
}

/* Lista de precios */
.price-list {
	list-style: none;
	padding-left: 0;
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	color: #333;
}

.price-list li {
	margin-bottom: 10px;
	padding: 5px 0;
	/* Espacio para el ícono */
}

.price-list li i.icon-check {
	color: #17a2b8; /* Color del ícono de verificación */
	margin-right: 8px;
}

/* Estilo para la flecha dentro de la lista */
.price-list li .fa-arrow-right {
	font-size: 20px;
	color: #d2ad3d;
	margin: 0 5px;
}

/* Estilo opcional para el componente adicional */
.precio-plan {
	font-size: 16px;
	font-weight: 600;
}

.x-message-box-check {
	font: 44px/1 FontAwesome;
	color: #36c436;
}

.x-message-box-check:before {
	content: "\f058"
}

.x-message-box-check:before {
	background-position: left top;
	background-repeat: no-repeat;
}

/* color iconos fontawezome*/
.editar_color_icono:before {
	color: #0276cc;
	font-size: 20px;
}

.eliminar_color_icono:before {
	color: #ff4a4a;
	font-size: 20px;
}

.reporte_excel_color_icono:before {
	color: #005e17;
	font-size: 20px;
}

.nuevo_color_icono:before {
	color: #6eb558;
	font-size: 20px;
}

.enviar_xml_color_icono:before {
	color: #3dc9f1;
	font-size: 20px;
}

.tutorial_color_icono:before {
	color: #007bff;
	font-size: 20px;
}

.masivo_color_icono:before {
	color: #0056b3;
	font-size: 20px;
}

.botonmas:before {
	color: #86b258;
	font-size: 20px;
}

.botonwhatsapp:before {
	color: #4cca5b;
	font-size: 20px;
}

.botonpdf:before {
	color: #cc4b4c;
	font-size: 20px;
}

.imprimir_color_icono:before {
	color: #007bff;
	font-size: 20px;
}

.descargar_color_icono:before {
	color: #28a745;
	font-size: 20px;
}

.reenviar_email_color_icono:before {
	color: #007bff;
	font-size: 20px;
}

.reenviar_sri_color_icono:before {
	color: #0056b3;
	font-size: 20px;
}

.descargar_xml_color_icono:before {
	color: #28a745;
	font-size: 20px;
}

.anular_color_icono:before {
	color: #dc3545;
	font-size: 20px;
}

.busqueda_color_icono:before {
	color: #007bff;
	font-size: 20px;
}

.limpiar_busqueda_color_icono:before {
	color: #6c757d;
	font-size: 20px;
}

.x-grid-cell-inner {
	text-align: left !important;
}

.cancelar_color_icono:before {
	color: #e74c3c;
	font-size: 20px;
}

.btn-nueva-factura .x-btn-inner {
	font-size: 28px;
	font-weight: bold;
	
}

.btn-nueva-factura .x-btn-icon-el {
    margin-right: 8px; 
    margin-left: 0;
}

.btn-nueva-factura .fa {
	font-size: 24px;
	text-align: left !important;
}

.boton_panel_nueva_factura_color_icono:before {
	color: rgb(255, 255, 255);
	font-size: 40px;
}

.cerrar_sesion_color_icono:before {
	color: #0000;
	font-size: 20px;
}

.guardar_color_icono:before {
	color: #28a745;
	font-size: 20px;
}


.activar_iva_color_icono:before {
	color: #00ff40;
	font-size: 20px;
}
.desactivar_iva_color_icono:before {
	color: #ff0000;
	font-size: 20px;
}

.restablecer_color_icono:before {
	color: #007BFF;
	font-size: 20px;
}

.login-button {
    background-color: transparent;
   /* border: 1px solid #ccc;*/
    border-radius: 3px;
  /*  padding: 3px 6px;*/
}

.login-button .x-btn-icon-el {
    color: #444;
    font-size: 15px;
}

.login-button .x-btn-arrow {
    color: #444; 
}

.login-button:hover {
    background-color: #f0f0f0;
}

.login_color_icono:before {
	color: #2c2c2c;
	font-size: 18px;
}



.activar_color_icono:before {
	color: #00ff40;
	font-size: 20px;
}
.desactivar_color_icono:before {
	color: #ff0000;
	font-size: 20px;
}


.agregar_producto_color_icono:before {
	color: #00ca00;
	font-size: 20px;
}

.generar_color_icono:before {
	color: #b05800;
	font-size: 20px;
}



.enviar_color_icono:before {
	color: #b05800;
	font-size: 20px;
}


.x-mask.splashscreens {
	background-color: #00de63;
	opacity: 1;
}

.x-mask-msg.splashscreens, .x-mask-msg.splashscreens div {
	font-size: 20px;
	padding: 150px 5px 5px 5px;
	border: none;
	background-color: transparent;
	background-position: 50% 50%;
}


.splash-content {
	text-align: center;
	font-family: "Segoe UI", sans-serif;
	color: white;
}


.splash-image {
	background-image: url('resources/images/logo.png'); /* ← tu imagen */
	background-repeat: no-repeat;
	background-size: 120px 120px; /* ajusta tamaño */
	background-position: center;
	width: 120px;
	height: 120px;
	margin: 0 auto 20px auto;
}

.splash-text {
	font-weight: bold;
	font-size: 22px;
	letter-spacing: 1px;
}



.input-compacto {
    height: 24px !important;
}
.input-compacto .x-form-text {
    font-size: 11px !important;
    height: 22px !important;
    line-height: 22px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    min-height: 22px !important;
}

/* =========================================================
   Servicios / Renovaciones - estilos nuevos de carrito
   ========================================================= */

/* Personalización de cabeceras de grillas en módulo de suscripciones */
.suscripcion-view .x-column-header {
    background-color: #7a8288 !important;
    background-image: none !important;
    border-color: #6c757d !important;
}

.suscripcion-view .x-column-header-over {
    background-color: #5a6268 !important; /* Gris oscuro al pasar el ratón */
    background-image: none !important;
}

.suscripcion-view .x-column-header-text {
    color: #ffffff !important;
    font-weight: bold !important;
}

/* Posicionamiento del botón del carrito */
.carrito-boton {
    position: relative !important;
    overflow: visible !important;
}

.carrito-boton * {
    overflow: visible !important;
}

/* Ocultar el badge por defecto o cuando no hay items */
.carrito-boton .x-btn-inner {
    display: none !important;
}

/* Mostrar y dar estilo de badge circular rojo cuando hay items */
.carrito-boton.con-items .x-btn-inner {
    display: flex !important;
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    background-color: #ff3b30 !important; /* Rojo brillante de notificación */
    color: #ffffff !important;
    border-radius: 50% !important;
    font-size: 10px !important;
    font-weight: bold !important;
    min-width: 17px !important;
    height: 17px !important;
    line-height: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
    border: 1px solid #ffffff !important; /* Borde blanco para resaltar */
    padding: 0 4px !important;
    box-sizing: border-box !important;
}

/* --- CHECKOUT Y REDISEÑO DE CARRITO --- */

/* Contenedor de Pasos (Breadcrumbs) */
.checkout-steps {
    display: flex;
    align-items: center;
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 14px;
    margin-bottom: 20px;
}

.step-active {
    font-weight: 700;
    color: #111111;
}

.step-inactive {
    font-weight: 500;
    color: #888888;
}

.step-clickable {
    font-weight: 500;
    color: #2563eb !important; /* Azul agradable para links */
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
}

.step-clickable:hover {
    color: #1d4ed8 !important;
    text-decoration: underline !important;
}

.step-separator {
    color: #cccccc;
    margin: 0 10px;
    font-size: 16px;
}

/* Tarjetas de items en el carrito */
.cart-item-card {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 16px 20px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.cart-item-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

/* Badge de rango de fechas (Desde - Hasta) en el carrito */
.cart-item-date-badge {
    background-color: #f0f9ff !important;
    border: 1px solid #bae6fd !important;
    border-radius: 6px !important;
    padding: 2px 8px !important;
    color: #0284c7 !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

/* Panel de Resumen Lateral (Sidebar) */
.order-summary-card {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
}

/* Combobox del ciclo de facturación en el carrito */
.cart-duration-combo .x-form-text {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    color: #334155 !important;
    font-weight: 500 !important;
    background-image: none !important;
}

/* Botón verde de checkout */
.green-checkout-btn {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    border: none !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    box-shadow: 0 4px 6px -1px rgba(22, 197, 94, 0.2) !important;
    transition: all 0.2s ease !important;
}

.green-checkout-btn:hover {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    box-shadow: 0 6px 12px -1px rgba(22, 197, 94, 0.3) !important;
    transform: translateY(-1px);
}

/* Tarjetas de servicios extras */
.extra-service-box {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 24px !important;
    text-align: center !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    display: inline-block !important;
}

.extra-service-box:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
}

/* ==========================================
   ESTILOS DE SUSCRIPCIONES (TRASLADADOS)
   ========================================== */

/* Grid Card container */
.suscripciones-grid-card {
    border: 1px solid #cbd5e1 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.02) !important;
    background-color: #ffffff !important;
    overflow: hidden !important;
}

.suscripciones-grid-card .x-grid-body {
    border: none !important;
}

.suscripciones-grid-card .x-panel-body {
    border: none !important;
}

/* Header styling */
.suscripcion-view .x-column-header {
    background-color: #f8fafc !important; /* Slate 50 */
    border-bottom: 1px solid #e2e8f0 !important; /* Slate 200 */
    border-top: none !important;
    border-right: none !important;
    border-left: none !important;
    padding: 14px 10px !important;
}

.suscripcion-view .x-column-header-over {
    background-color: #f1f5f9 !important; /* Slate 100 */
}

.suscripcion-view .x-column-header-text {
    color: #475569 !important; /* Slate 600 */
    font-weight: 600 !important;
    font-size: 12px !important;
    letter-spacing: 0.05em !important;
}

/* Grid cell styling */
.suscripcion-view .x-grid-cell {
    border-color: #f1f5f9 !important; /* Very soft light border */
    border-right: none !important;
    border-left: none !important;
    padding: 16px 10px !important; /* Airy modern padding */
    font-size: 13.5px !important;
    vertical-align: middle !important;
    color: #334155 !important; /* Slate 700 */
}

/* Remove blue focus outline on grid cells and rows */
.suscripcion-view .x-grid-cell:focus,
.suscripcion-view .x-grid-item:focus,
.suscripcion-view .x-grid-item-focused .x-grid-cell,
.suscripcion-view .x-grid-item-focused,
.suscripcion-view .x-grid-cell-inner:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: #f1f5f9 !important;
}

.suscripcion-view .x-grid-item-focused .x-grid-cell-inner {
    outline: none !important;
    box-shadow: none !important;
}

/* Center content for columns 2, 3, 4 (Fecha Caducidad, Estado, Acción) */
.suscripcion-view .x-grid-cell:nth-child(3) .x-grid-cell-inner,
.suscripcion-view .x-grid-cell:nth-child(4) .x-grid-cell-inner,
.suscripcion-view .x-grid-cell:nth-child(5) .x-grid-cell-inner {
    text-align: center !important;
}

/* Hover effect on rows */
.suscripcion-view .x-grid-item:hover {
    background-color: #f8fafc !important; /* Slate 50 */
    transition: background-color 0.15s ease;
}

/* Active row background (selected) */
.suscripcion-view .x-grid-item-selected {
    background-color: #f0fdf4 !important; /* Soft green */
}

/* Special cells (checkbox column) */
.suscripcion-view .x-grid-cell-special {
    background-color: transparent !important;
    border-right: none !important;
}

/* Style for "En el carrito" pill */
.cart-pill {
    background-color: #dcfce7 !important; /* Very soft green */
    color: #15803d !important; /* Dark green */
    padding: 6px 14px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    display: inline-block;
    text-align: center;
    border: 1px solid #bbf7d0 !important;
}

/* Style for "RENOVAR" button link */
.btn-renovar-link {
    color: #16a34a !important; /* Green */
    font-weight: 700 !important;
    text-decoration: none !important;
    font-size: 13px !important;
    display: inline-block;
    cursor: pointer;
    transition: color 0.15s ease;
}

.btn-renovar-link:hover {
    color: #15803d !important;
}

.btn-renovar-link:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Correct layout for checker/checkbox column cells in subscriptions grid */
.suscripcion-view .x-grid-cell-special {
    padding: 16px 0 !important;
    text-align: center !important;
    vertical-align: middle !important;
}

.suscripcion-view .x-grid-cell-special .x-grid-cell-inner {
    padding: 0 !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Button Renovar Seleccionados */
.btn-renovar-seleccionados {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
    transition: all 0.2s ease !important;
}

.btn-renovar-seleccionados:hover {
    background-color: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}

/* Payment row styles */
.payment-row-container {
    transition: all 0.2s ease-out !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background-color: #ffffff !important;
    padding: 18px 20px !important;
    margin-bottom: 16px !important;
    cursor: pointer !important;
}

.payment-row-container:hover {
    border-color: #93c5fd !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.04) !important;
    transform: translateY(-1px) !important;
}

.payment-row-active {
    border-color: #2563eb !important;
    background-color: #f8fafc !important;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.08) !important;
}


.payment-badge-default {
    background-color: #ecfdf5 !important;
    color: #059669 !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border: 1px solid #a7f3d0 !important;
    display: inline-block !important;
}

/* --- BOTÓN FLOTANTE DE CARRITO --- */
.suscripcion-view {
    position: relative !important;
}

.floating-cart-btn {
    position: absolute;
    bottom: 25px;
    right: 25px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    box-shadow: 0 10px 20px rgba(22, 163, 74, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 99999;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid #ffffff;
}

.floating-cart-btn:hover {
    transform: scale(1.1) translateY(-3px);
    box-shadow: 0 15px 25px rgba(22, 163, 74, 0.4);
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
}

.floating-cart-btn:active {
    transform: scale(0.95);
}

.floating-cart-btn i {
    color: #ffffff;
    font-size: 24px;
    transition: transform 0.3s ease;
}

.floating-cart-btn:hover i {
    transform: rotate(-10deg) scale(1.05);
}

/* Badge del botón flotante */
.floating-cart-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background-color: #ef4444;
    color: #ffffff;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
    min-width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    padding: 0 4px;
    box-sizing: border-box;
    font-family: 'Outfit', 'Inter', sans-serif;
    animation: popBadge 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popBadge {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

/* Animaciones del Carrito al añadir items */
@keyframes cartBounce {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.15) translateY(-8px); }
    50% { transform: scale(0.9) translateY(2px); }
    75% { transform: scale(1.05) translateY(-3px); }
}

.cart-bounce-anim {
    animation: cartBounce 0.5s ease-out !important;
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.4); }
}

.badge-pulse-anim {
    animation: badgePulse 0.4s ease-out !important;
}

/* --- BLOQUES DE SERVICIOS EXTRAS --- */

.extra-services-dataview {
    background-color: #f8fafc !important;
    padding: 20px !important;
}

.extra-services-grid-container {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    max-width: 100% !important;
    align-items: start !important;
}

.extra-service-card {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.02) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
}

.extra-service-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.03) !important;
    border-color: #cbd5e1 !important;
}

.extra-service-card.recarga-sin-cupo {
    border-color: #fecaca !important;
    background-color: #fffafa !important;
    opacity: 0.88 !important;
}

.extra-service-card.recarga-en-carrito {
    border-color: #bbf7d0 !important;
    background-color: #fbfefc !important;
}

.extra-service-card.servicio-activo {
    border-color: #bfdbfe !important;
    background-color: #f8fbff !important;
}

.extra-service-card.recarga-sin-cupo:hover {
    transform: none !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.02) !important;
}

.extra-service-card-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-bottom: 8px !important;
    line-height: 1.4 !important;
    font-family: 'Outfit', 'Inter', sans-serif !important;
}

.extra-service-card-desc {
    font-size: 12px !important;
    color: #64748b !important;
    margin-bottom: 14px !important;
    line-height: 1.5 !important;
    flex: 0 0 auto !important;
    font-family: 'Inter', sans-serif !important;
}

.extra-service-card-meta {
    margin-bottom: 12px !important;
}

.extra-service-card-cycle {
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    display: inline-block !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-family: 'Outfit', 'Inter', sans-serif !important;
}

.extra-service-card-cycle.anual {
    background-color: #eff6ff !important;
    color: #1d4ed8 !important;
    border: 1px solid #bfdbfe !important;
}

.extra-service-card-cycle.mensual {
    background-color: #f0fdf4 !important;
    color: #15803d !important;
    border: 1px solid #bbf7d0 !important;
}

.extra-service-card-cycle.unico {
    background-color: #faf5ff !important;
    color: #7e22ce !important;
    border: 1px solid #e9d5ff !important;
}

.extra-service-recharge {
    border: 1px solid #c7d2fe !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
    border-radius: 8px !important;
    padding: 11px 12px !important;
    margin-bottom: 14px !important;
    font-family: 'Inter', sans-serif !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 1px 2px rgba(15,23,42,0.04) !important;
}

.extra-service-recharge-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
    color: #1e3a8a !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

.extra-service-recharge-row span {
    display: inline-flex !important;
    align-items: center !important;
    min-width: 0 !important;
}

.extra-service-recharge-row i {
    font-size: 12px !important;
    margin-right: 6px !important;
}

.extra-service-recharge-row strong {
    color: #1d4ed8 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    background-color: #eff6ff !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 999px !important;
    padding: 2px 8px !important;
    white-space: nowrap !important;
}

.extra-service-recharge-bar {
    height: 7px !important;
    border-radius: 999px !important;
    background-color: #e2e8f0 !important;
    overflow: hidden !important;
    margin: 9px 0 0 !important;
}

.extra-service-recharge-bar span {
    display: block !important;
    height: 100% !important;
    border-radius: inherit !important;
    background-color: #2563eb !important;
    transition: width 0.2s ease !important;
}

.extra-service-recharge-detail {
    color: #64748b !important;
    font-size: 10.5px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
}

.extra-service-recharge.alerta {
    border-color: #fde68a !important;
    background-color: #fffbeb !important;
}

.extra-service-recharge.alerta .extra-service-recharge-row {
    color: #92400e !important;
}

.extra-service-recharge.alerta .extra-service-recharge-bar span {
    background-color: #f59e0b !important;
}

.extra-service-recharge.sin-cupo {
    border-color: #fecaca !important;
    background-color: #fef2f2 !important;
}

.extra-service-recharge.sin-cupo .extra-service-recharge-row {
    color: #991b1b !important;
}

.extra-service-recharge.sin-cupo .extra-service-recharge-bar span {
    background-color: #dc2626 !important;
}

.extra-service-recharge.en-carrito {
    border-color: #bbf7d0 !important;
    background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%) !important;
}

.extra-service-recharge.en-carrito .extra-service-recharge-row {
    color: #166534 !important;
}

.extra-service-recharge.en-carrito .extra-service-recharge-row strong {
    color: #166534 !important;
    background-color: #dcfce7 !important;
    border-color: #bbf7d0 !important;
}

.extra-service-recharge.en-carrito .extra-service-recharge-bar span {
    background-color: #16a34a !important;
}

/* Badges Suscripción Padre vs Hijo */
.badge-plan-padre {
    background-color: #e0f2fe !important;
    color: #0369a1 !important;
    border: 1px solid #bae6fd !important;
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 10.5px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    letter-spacing: 0.3px;
}

.badge-plan-hijo {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 10.5px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    letter-spacing: 0.3px;
}

/* Botón Mejorar Plan */
.btn-mejorar-plan {
    background: #eff6ff !important;
    color: #2563eb !important;
    border: 1px solid #dbeafe !important;
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    font-family: "Outfit", "Inter", sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.05);
}

.btn-mejorar-plan:hover {
    background: #dbeafe !important;
    color: #1d4ed8 !important;
    border-color: #bfdbfe !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.12);
}

/* Modal Mejorar Plan */
.upgrade-modal-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 12px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.upgrade-modal-card:hover {
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.08);
}

.upgrade-modal-badge {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #dbeafe;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.btn-select-upgrade {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-select-upgrade:hover {
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
    transform: translateY(-1px);
}

/* Tarjeta Bancaria FinTech (Transferencia) */
.bank-card-fintech {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1.5px solid #d1fae5;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.05);
    margin-bottom: 15px;
    font-family: 'Outfit', 'Inter', sans-serif;
}

.bank-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 14px;
    margin-bottom: 16px;
}

.bank-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bank-logo-badge {
    width: 42px;
    height: 42px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bank-name {
    font-size: 16px;
    font-weight: 800;
    color: #064e3b;
    line-height: 1.2;
}

.bank-group {
    font-size: 12px;
    font-weight: 600;
    color: #059669;
}

.bank-account-type {
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
}

.bank-amount-badge {
    text-align: right;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    padding: 8px 16px;
    border-radius: 8px;
}

.bank-amount-label {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    color: #065f46;
    letter-spacing: 0.5px;
}

.bank-amount-value {
    display: block;
    font-size: 18px;
    font-weight: 800;
    color: #047857;
}

.bank-grid-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 16px;
}

.bank-detail-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 14px;
}

.bank-detail-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.bank-detail-value-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.bank-detail-value {
    font-size: 13.5px;
    font-weight: 700;
    color: #1e293b;
}

.bank-acc-num {
    letter-spacing: 0.5px;
    color: #0f766e;
}

.btn-copy-tag {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-copy-tag:hover {
    background: #e2e8f0;
    color: #0f172a;
    border-color: #94a3b8;
}

.btn-copy-tag.copied {
    background: #dcfce7;
    color: #15803d;
    border-color: #86efac;
}

.bank-whatsapp-box {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.btn-whatsapp-action {
    background: #16a34a;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 4px rgba(22, 163, 74, 0.2);
    transition: background 0.2s ease, transform 0.1s ease;
}

.btn-whatsapp-action:hover {
    background: #15803d;
    transform: translateY(-1px);
}

/* Desglose de Productos en Transferencia */
.transfer-breakdown-box {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 12px;
}

.transfer-breakdown-header {
    display: flex;
    justify-content: space-between;
    font-size: 11.5px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 8px;
    margin-bottom: 10px;
}

.transfer-breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
}

.transfer-breakdown-row:last-child {
    border-bottom: none;
}

.transfer-item-info {
    flex: 1;
}

.transfer-item-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #1e293b;
}

.transfer-item-subtitle {
    font-size: 11.5px;
    color: #64748b;
    margin-top: 2px;
}

.transfer-item-prices {
    text-align: right;
}

.transfer-item-total {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}

.transfer-item-sub {
    font-size: 11px;
    color: #94a3b8;
}

.extra-service-card-price {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin-bottom: 16px !important;
    display: flex !important;
    align-items: baseline !important;
    font-family: 'Outfit', 'Inter', sans-serif !important;
}

.extra-service-card-price .price-currency {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    margin-right: 2px !important;
}

/* --- PRICE TOOLTIP --- */
.price-tooltip-wrapper {
    position: relative !important;
    cursor: default !important;
}

.price-tooltip {
    position: absolute !important;
    bottom: calc(100% + 10px) !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(6px) !important;
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    width: 200px !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25) !important;
    z-index: 9999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease !important;
    pointer-events: none !important;
    font-family: 'Inter', sans-serif !important;
}

.price-tooltip-wrapper:hover .price-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
}

.price-tooltip-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #cbd5e1 !important;
    padding: 3px 0 !important;
}

.price-tooltip-row.price-tooltip-total {
    font-weight: 700 !important;
    font-size: 13px !important;
    color: #ffffff !important;
}

.price-tooltip-divider {
    height: 1px !important;
    background-color: #334155 !important;
    margin: 6px 0 !important;
}

.price-tooltip-arrow {
    position: absolute !important;
    bottom: -6px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 7px solid transparent !important;
    border-right: 7px solid transparent !important;
    border-top: 7px solid #1e293b !important;
}

.btn-agregar-extra-card {
    background-color: #2563eb !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    font-family: 'Outfit', 'Inter', sans-serif !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
}

.btn-agregar-extra-card:hover {
    background-color: #1d4ed8 !important;
}

.btn-agregar-extra-card.disabled,
.btn-agregar-extra-card:disabled {
    background-color: #cbd5e1 !important;
    color: #64748b !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

.btn-agregar-extra-card.disabled:hover,
.btn-agregar-extra-card:disabled:hover {
    background-color: #cbd5e1 !important;
}

.btn-agregar-extra-card.added,
.btn-agregar-extra-card.added:disabled {
    background-color: #dcfce7 !important;
    color: #166534 !important;
    border: 1px solid #bbf7d0 !important;
    cursor: default !important;
    box-shadow: none !important;
}

.btn-agregar-extra-card.added:hover,
.btn-agregar-extra-card.added:disabled:hover {
    background-color: #dcfce7 !important;
    color: #166534 !important;
}

.btn-agregar-extra-card.active-service,
.btn-agregar-extra-card.active-service:disabled {
    background-color: #eff6ff !important;
    color: #1d4ed8 !important;
    border: 1px solid #bfdbfe !important;
    cursor: default !important;
    box-shadow: none !important;
}

.btn-agregar-extra-card.active-service:hover,
.btn-agregar-extra-card.active-service:disabled:hover {
    background-color: #eff6ff !important;
    color: #1d4ed8 !important;
}

.btn-agregar-extra-card i {
    margin-right: 6px !important;
    font-size: 14px !important;
}

.extra-service-cart-actions {
    display: flex !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
}

.extra-service-cart-actions .btn-agregar-extra-card {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.btn-quitar-extra-card {
    width: 42px !important;
    min-width: 42px !important;
    border: 1px solid #fecaca !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
    color: #dc2626 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
}

.btn-quitar-extra-card:hover {
    background-color: #fef2f2 !important;
    border-color: #fca5a5 !important;
    color: #b91c1c !important;
}

.btn-quitar-extra-card i {
    margin: 0 !important;
    pointer-events: none !important;
}

.btn-ir-al-sitio-card {
    background-color: #ffffff !important;
    color: #2563eb !important;
    border: 1px solid #bfdbfe !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    font-family: 'Outfit', 'Inter', sans-serif !important;
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.05) !important;
}

.btn-ir-al-sitio-card:hover {
    background-color: #eff6ff !important;
    border-color: #3b82f6 !important;
    color: #1d4ed8 !important;
}

.btn-ir-al-sitio-card i {
    transition: transform 0.2s ease-in-out !important;
    font-size: 14px !important;
}

.btn-ir-al-sitio-card:hover i {
    transform: translateX(4px) !important;
}

/* Responsividad para pantallas medianas y pequeñas */
@media (max-width: 1024px) {
    .extra-services-grid-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 640px) {
    .extra-services-grid-container {
        grid-template-columns: 1fr !important;
    }
}

/* --- PREMIUM CHECKOUT STYLING --- */

/* Top bar buttons */
.btn-checkout-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2) !important;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}

.btn-checkout-primary:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    box-shadow: 0 6px 12px -1px rgba(37, 99, 235, 0.3) !important;
    transform: translateY(-1px);
}

.btn-checkout-secondary {
    background-color: #ffffff !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.05) !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.btn-checkout-secondary .x-btn-inner,
.btn-checkout-secondary .x-btn-icon-el {
    color: #2563eb !important;
    font-weight: 700 !important;
    transition: color 0.2s ease !important;
}

.btn-checkout-secondary:hover {
    background-color: #eff6ff !important;
    border-color: #3b82f6 !important;
}

.btn-checkout-secondary:hover .x-btn-inner,
.btn-checkout-secondary:hover .x-btn-icon-el {
    color: #1d4ed8 !important;
}

/* Modern fieldset for Datos de Facturación */
.x-fieldset {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important;
}

.x-fieldset-header-text {
    font-family: 'Outfit', 'Inter', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    background-color: #ffffff !important;
    padding: 0 8px !important;
}

/* Beautiful read-only duration badges (pills) in checkout */
.cart-duration-combo.x-form-readonly .x-form-text {
    background-color: #f1f5f9 !important; /* Soft slate/blue background */
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
    text-align: center !important;
    font-weight: 600 !important;
    border-radius: 9999px !important; /* Rounded pill style! */
    padding: 6px 12px !important;
    box-shadow: none !important;
    cursor: default !important;
}

/* Displayfield styles for premium billing details alignment */
.x-form-display-field {
    color: #1e293b !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    font-family: 'Inter', sans-serif !important;
    padding-top: 3px !important;
}

.x-form-item-label-text {
    font-family: 'Outfit', 'Inter', sans-serif !important;
    color: #64748b !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
}

/* Remove outer rectangle border around read-only duration badges */
.cart-duration-combo.x-form-readonly,
.cart-duration-combo.x-form-readonly .x-form-trigger-wrap,
.cart-duration-combo.x-form-readonly .x-form-trigger-wrap-default {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* --- PREMIUM SEARCH AND FILTER TOOLBAR STYLING --- */

/* Toolbar Container */
.filter-toolbar {
    background-color: #ffffff !important;
    background-image: none !important;
    border: none !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 12px 20px !important;
}

/* Label styling */
.filter-combo .x-form-item-label-text,
.filter-search .x-form-item-label-text {
    font-family: 'Outfit', 'Inter', sans-serif !important;
    color: #64748b !important;
    font-weight: 700 !important;
    font-size: 11.5px !important;
    letter-spacing: 0.03em !important;
}

/* Wrapper / Input border styling */
.filter-combo .x-form-trigger-wrap,
.filter-search .x-form-trigger-wrap,
.filter-combo .x-form-trigger-wrap-default,
.filter-search .x-form-trigger-wrap-default {
    border: 1px solid #cbd5e1 !important;
    background-color: #f8fafc !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    height: 36px !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.2s ease !important;
}

/* Focus states */
.filter-combo.x-form-focus .x-form-trigger-wrap,
.filter-search.x-form-focus .x-form-trigger-wrap,
.filter-combo.x-form-focus .x-form-trigger-wrap-default,
.filter-search.x-form-focus .x-form-trigger-wrap-default {
    border-color: #3b82f6 !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
}

/* Inner input text */
.filter-combo .x-form-text,
.filter-search .x-form-text {
    background: transparent !important;
    border: none !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    color: #1e293b !important;
    padding: 6px 12px !important;
    height: 34px !important;
}

/* Dropdown trigger icon */
.filter-combo .x-form-trigger {
    background: transparent !important;
    color: #64748b !important;
    border: none !important;
    width: 28px !important;
    cursor: pointer !important;
}

/* Clear filters button style */
.btn-filter-clear {
    background-color: #ffffff !important;
    background-image: none !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    height: 36px !important;
    width: 36px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.btn-filter-clear .x-btn-icon-el {
    color: #64748b !important;
    font-size: 14px !important;
    line-height: 24px !important;
    transition: color 0.2s ease !important;
}

.btn-filter-clear:hover {
    background-color: #f1f5f9 !important;
    border-color: #94a3b8 !important;
}

.btn-filter-clear:hover .x-btn-icon-el {
    color: #0f172a !important;
}

/* --- PREMIUM STEPPER STYLING --- */

.checkout-stepper {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 340px !important;
    margin: 0 auto 15px 0 !important;
    padding: 5px 0 !important;
    box-sizing: border-box !important;
}

.step-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    position: relative !important;
    z-index: 2 !important;
}

.step-item.clickable {
    cursor: pointer !important;
}

.step-icon {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Outfit', 'Inter', sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    border: 2px solid #cbd5e1 !important;
    background-color: #ffffff !important;
    color: #94a3b8 !important;
    transition: all 0.3s ease !important;
}

.step-label {
    margin-top: 4px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    transition: all 0.3s ease !important;
}

/* Connecting Line */
.step-line {
    flex: 1 !important;
    height: 2px !important;
    background-color: #cbd5e1 !important;
    margin: 0 10px 14px 10px !important;
    position: relative !important;
    z-index: 1 !important;
    transition: all 0.3s ease !important;
}

/* Active State */
.step-item.step-active .step-icon {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15) !important;
}

.step-item.step-active .step-label {
    color: #0f172a !important;
    font-weight: 700 !important;
}

/* Completed State */
.step-item.step-completed .step-icon {
    background-color: #eff6ff !important;
    border-color: #3b82f6 !important;
    color: #2563eb !important;
}

.step-item.step-completed .step-label {
    color: #475569 !important;
}

.step-item.step-completed.clickable:hover .step-icon {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
    transform: scale(1.05) !important;
}

/* Active Line (between completed/active steps) */
.step-line.line-active {
    background-color: #3b82f6 !important;
}

/* --- CARD FADE-IN TRANSITION --- */
@keyframes fadeInCard {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.card-fade-in {
    animation: fadeInCard 0.35s ease-out !important;
}

/* --- TARJETAS GUARDADAS Y ESTADOS --- */
.saved-card-row {
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 15px 20px !important;
    margin-bottom: 12px !important;
    align-items: center !important;
    background-color: #f8fafc !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
}

.saved-card-row:hover {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
}

.saved-card-active {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 10px -1px rgba(0, 0, 0, 0.05) !important;
}

.saved-card-disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    background-color: #f1f5f9 !important;
}

.saved-card-disabled:hover {
    box-shadow: none !important;
    border-color: #e2e8f0 !important;
    background-color: #f1f5f9 !important;
}

.saved-card-title {
    font-weight: 700 !important;
    color: #0f172a !important;
    font-size: 13.5px !important;
}

.saved-card-subtitle {
    color: #64748b !important;
    font-size: 11.5px !important;
    margin-top: 3px !important;
}

.status-badge-active {
    color: #16a34a !important;
    font-size: 11px !important;
    font-weight: bold !important;
    background-color: #f0fdf4 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
}

.status-badge-inactive {
    color: #dc2626 !important;
    font-size: 11px !important;
    font-weight: bold !important;
    background-color: #fef2f2 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
}

.card-delete-icon {
    color: #94a3b8 !important;
    font-size: 15px !important;
    cursor: pointer !important;
    padding: 6px !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

.card-delete-icon:hover {
    color: #ef4444 !important;
    background-color: #fef2f2 !important;
    transform: scale(1.1) !important;
}

/* --- CATEGORY FILTER RADIO BUTTONS --- */
.filter-radio-group .x-form-item-label {
    font-weight: 700 !important;
    color: #475569 !important;
    font-size: 13.5px !important;
    align-self: center !important;
}

.filter-radio-group .x-form-cb-label {
    color: #475569 !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

.filter-radio-group .x-form-cb-wrap,
.filter-radio-group .x-form-cb {
    white-space: nowrap !important;
}

/* --- DEFAULT CARD BADGE & LINK --- */
.badge-predeterminada {
    display: inline-block !important;
    background-color: #dcfce7 !important;
    color: #15803d !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    padding: 4px 12px !important;
    border-radius: 9999px !important;
    border: 1px solid #bbf7d0 !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
}

.link-usar-esta {
    color: #475569 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    padding: 6px 14px !important;
    border-radius: 9999px !important;
    border: 1px solid #cbd5e1 !important;
    background-color: #ffffff !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

.link-usar-esta:hover {
    background-color: #eff6ff !important;
    color: #2563eb !important;
    border-color: #bfdbfe !important;
    text-decoration: none !important;
}

/* --- STATUS DOTS & BADGES --- */
.status-pill {
    display: inline-flex !important;
    align-items: center !important;
    padding: 3px 8px !important;
    border-radius: 9999px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    gap: 6px !important;
    line-height: 1 !important;
}

.status-pill-active {
    background-color: #f0fdf4 !important;
    color: #16a34a !important;
    border: 1px solid #bbf7d0 !important;
}

.status-pill-review {
    background-color: #fffbeb !important;
    color: #d97706 !important;
    border: 1px solid #fde68a !important;
}

.status-pill-rejected {
    background-color: #fef2f2 !important;
    color: #dc2626 !important;
    border: 1px solid #fecaca !important;
}

.status-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    display: inline-block !important;
}

.status-dot-active {
    background-color: #22c55e !important;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
    animation: pulse-green 2s infinite;
}

.status-dot-review {
    background-color: #f59e0b !important;
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
    animation: pulse-amber 2s infinite;
}

.status-dot-rejected {
    background-color: #ef4444 !important;
}

@keyframes pulse-green {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 4px rgba(34, 197, 94, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

@keyframes pulse-amber {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 4px rgba(245, 158, 11, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
    }
}

.refresh-cards-icon:hover {
    color: #2563eb !important;
}

/* --- MEJORA DE PLAN MODAL & CART BUTTONS --- */
.btn-mejorar-plan-cart {
    background-color: #2563eb !important;
    border-color: #1d4ed8 !important;
    border-radius: 20px !important;
    padding: 3px 12px !important;
}

.btn-mejorar-plan-cart .x-btn-inner,
.btn-mejorar-plan-cart .x-btn-inner-center {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 12px !important;
}

.btn-mejorar-plan-cart .x-btn-icon-el {
    color: #ffffff !important;
}

.btn-cancelar-mejora-cart {
    background: #fff7f7 !important;
    border: 1px solid #fecaca !important;
    border-radius: 999px !important;
    box-shadow: 0 1px 2px rgba(239, 68, 68, 0.08) !important;
    padding: 2px 12px !important;
    transition: all 0.15s ease !important;
}

.btn-cancelar-mejora-cart .x-btn-inner,
.btn-cancelar-mejora-cart .x-btn-inner-center {
    color: #b91c1c !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    line-height: 18px !important;
}

.btn-cancelar-mejora-cart .x-btn-icon-el {
    color: #ef4444 !important;
    font-size: 12px !important;
    line-height: 18px !important;
    margin-right: 5px !important;
}

.btn-cancelar-mejora-cart:hover {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
    box-shadow: 0 3px 8px rgba(239, 68, 68, 0.16) !important;
    transform: translateY(-1px);
}

.btn-cancelar-mejora-cart .x-btn-button,
.btn-cancelar-mejora-cart .x-btn-wrap,
.btn-cancelar-mejora-cart .x-btn-inner-default-small {
    background: transparent !important;
    border: 0 !important;
}

.btn-modal-cerrar {
    background-color: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
}

.btn-modal-cerrar .x-btn-inner,
.btn-modal-cerrar .x-btn-inner-center {
    color: #334155 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}

.btn-select-upgrade {
    background-color: #059669 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: 0 2px 4px rgba(5, 150, 105, 0.2) !important;
}

.btn-select-upgrade:hover {
    background-color: #047857 !important;
}

.btn-select-upgrade .x-btn-inner,
.btn-select-upgrade .x-btn-inner-center,
.btn-select-upgrade .x-btn-icon-el {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.cart-price-block {
    min-width: 116px;
    text-align: right;
    line-height: 1.25;
}

.cart-price-total {
    color: #0f172a;
    font-size: 18px;
    font-weight: 800;
    white-space: nowrap;
}

.cart-price-detail {
    color: #2563eb;
    font-size: 11.5px;
    font-weight: 700;
    margin-top: 3px;
    white-space: nowrap;
}

.cart-price-tax {
    color: #64748b;
    font-size: 11px;
    font-weight: 500;
    margin-top: 2px;
    white-space: nowrap;
}

.cart-extra-user-meta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #2563eb;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: 6px;
    padding: 3px 9px;
    font-size: 11.5px;
    font-weight: 700;
    margin-top: 6px;
    white-space: nowrap;
}

.cart-extra-user-meta i {
    color: #2563eb;
    font-size: 11px;
}

.cart-extra-user-dot {
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: #93c5fd;
    display: inline-block;
}

/* =========================================================
   Mis Pedidos - historial y detalle
   ========================================================= */

.mipedido-page .x-panel-body-default {
    color: #0f172a;
}

.mipedido-header {
    background: #ffffff;
    border: 1px solid #dbe5ef;
    border-radius: 8px;
    padding: 14px 16px;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
}

.mipedido-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mipedido-title-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #e8f1ff;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.mipedido-title-wrap h2 {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
}

.mipedido-title-wrap p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 12.5px;
    font-weight: 600;
}

.mipedido-refresh-btn {
    background: #2563eb !important;
    border: 1px solid #1d4ed8 !important;
    border-radius: 7px !important;
    padding: 7px 15px !important;
    box-shadow: 0 5px 12px rgba(37, 99, 235, 0.22) !important;
}

.mipedido-refresh-btn .x-btn-inner,
.mipedido-refresh-btn .x-btn-icon-el {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.mipedido-tabs > .x-tab-bar {
    background: transparent !important;
}

.mipedido-tabs .x-tab {
    border-radius: 7px 7px 0 0 !important;
    border-color: #dbe5ef !important;
    background: #e7edf4 !important;
    padding: 7px 14px !important;
}

.mipedido-tabs .x-tab-active {
    background: #ffffff !important;
    border-bottom-color: #ffffff !important;
}

.mipedido-tabs .x-tab-inner {
    color: #334155 !important;
    font-weight: 700 !important;
    font-size: 13px !important;
}

.mipedido-grid {
    border: 1px solid #dbe5ef !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

.mipedido-grid .x-grid-header-ct {
    background: #f8fafc !important;
    border-bottom: 1px solid #dbe5ef !important;
}

.mipedido-grid .x-column-header {
    background: #f8fafc !important;
    border-color: #dbe5ef !important;
}

.mipedido-grid .x-column-header-text {
    color: #475569 !important;
    font-weight: 800 !important;
    font-size: 12.5px !important;
}

.mipedido-grid .x-grid-item {
    background: #ffffff;
}

.mipedido-grid .x-grid-item-alt {
    background: #f8fafc;
}

.mipedido-grid .x-grid-item-over {
    background: #eef6ff !important;
}

.mipedido-grid .x-grid-cell-inner {
    padding: 11px 10px !important;
}

.mipedido-order-number {
    color: #0f172a;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.mipedido-order-origin {
    color: #7b8da6;
    font-size: 11px;
    font-weight: 700;
    margin-top: 4px;
    text-transform: uppercase;
    white-space: nowrap;
}

.mipedido-date-cell {
    color: #334155;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.mipedido-date-cell i {
    color: #64748b;
}

.mipedido-money-cell {
    color: #0f172a;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}

.mipedido-money-cell.muted {
    color: #475569;
}

.mipedido-status {
    min-width: 94px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 999px;
    padding: 6px 14px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.mipedido-status.paid {
    background: #10b981;
}

.mipedido-status.pending {
    background: #f59e0b;
}

.mipedido-status.review {
    background: #2563eb;
}

.mipedido-grid .x-action-col-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 7px;
    color: #64748b !important;
    line-height: 28px !important;
    text-align: center;
}

.mipedido-grid .x-action-col-icon:hover {
    background: #e8f1ff;
    color: #2563eb !important;
}

.detalle-pedido-window .x-window-body {
    background: #eef3f8 !important;
}

.detalle-pedido-summary {
    background: #ffffff;
    border: 1px solid #dbe5ef;
    border-radius: 8px;
    padding: 14px;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
}

.detalle-summary-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5edf5;
}

.detalle-summary-left {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.detalle-summary-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #e8f1ff;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex: 0 0 auto;
}

.detalle-summary-number {
    color: #0f172a;
    font-size: 17px;
    font-weight: 850;
    line-height: 1.2;
    white-space: nowrap;
}

.detalle-summary-meta {
    color: #64748b;
    font-size: 12.5px;
    font-weight: 650;
    margin-top: 4px;
    white-space: nowrap;
}

.detalle-summary-status {
    flex: 0 0 auto;
}

.detalle-summary-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 10px;
    padding-top: 12px;
}

.detalle-summary-kpi {
    border: 1px solid #e5edf5;
    border-radius: 7px;
    background: #f8fafc;
    padding: 10px 12px;
    min-height: 54px;
}

.detalle-summary-kpi span {
    display: block;
    color: #64748b;
    font-size: 11.5px;
    font-weight: 750;
    margin-bottom: 5px;
}

.detalle-summary-kpi strong {
    display: block;
    color: #0f172a;
    font-size: 15px;
    font-weight: 850;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detalle-comprobante-box {
    display: flex;
    align-items: center;
    gap: 11px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    margin-top: 12px;
    padding: 11px 12px;
}

.detalle-comprobante-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #2563eb;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.detalle-comprobante-text strong {
    display: block;
    color: #0f172a;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.2;
}

.detalle-comprobante-text span {
    display: block;
    color: #475569;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.35;
    margin-top: 4px;
}

.detalle-comprobante-text p {
    color: #475569;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.35;
    margin: 4px 0 0 0;
}

.detalle-pedido-grid {
    border: 1px solid #dbe5ef !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

.detalle-pedido-grid .x-grid-header-ct,
.detalle-pedido-grid .x-column-header {
    background: #f8fafc !important;
    border-color: #dbe5ef !important;
}

.detalle-pedido-grid .x-column-header-text {
    color: #475569 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.detalle-pedido-grid .x-grid-cell-inner {
    padding: 10px 9px !important;
}

.detalle-product-cell {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.detalle-product-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: #edf5ff;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.detalle-product-text {
    color: #0f172a;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
}

.detalle-origin-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 94px;
    border-radius: 999px;
    padding: 4px 9px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 850;
    white-space: nowrap;
}

.detalle-origin-badge.renew {
    background: #2563eb;
}

.detalle-origin-badge.single {
    background: #d97706;
}

.detalle-origin-badge.subscription {
    background: #059669;
}

.detalle-origin-badge.upgrade {
    background: #7c3aed;
}

.detalle-origin-badge.card {
    background: #334155;
}

.detalle-origin-badge.default {
    background: #64748b;
}

.detalle-qty-badge {
    display: inline-flex;
    min-width: 30px;
    height: 26px;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: #eef2f7;
    color: #334155;
    font-size: 12px;
    font-weight: 850;
}

.detalle-money {
    color: #0f172a;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.detalle-money.muted {
    color: #64748b;
}

.detalle-money.total {
    color: #059669;
    font-size: 14px;
    font-weight: 900;
}

.subir-comprobante-window .x-window-body {
    background: #eef3f8 !important;
}

.comprobante-help-card {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    background: #ffffff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    color: #1e40af;
    margin-bottom: 12px;
    padding: 13px 14px;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04);
}

.comprobante-help-card strong,
.comprobante-file-note strong {
    display: block;
    color: #0f172a;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.2;
}

.comprobante-help-card span,
.comprobante-file-note span {
    display: block;
    color: #475569;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
    margin-top: 4px;
}

.comprobante-help-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: #e8f1ff;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.comprobante-file-note {
    display: flex;
    align-items: center;
    gap: 11px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    margin-bottom: 12px;
    padding: 12px 14px;
}

.comprobante-file-note > i {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #ecfdf5;
    color: #059669;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex: 0 0 auto;
}

.comprobante-fields-card {
    background: #ffffff;
    border: 1px solid #dbe5ef;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04);
}

.comprobante-form-field .x-form-text {
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
    height: 34px !important;
    line-height: 34px !important;
    padding: 6px 10px !important;
}

.comprobante-form-field .x-form-text:focus {
    border-color: #2563eb !important;
}

.comprobante-form-field .x-form-empty-field {
    color: #94a3b8 !important;
    font-weight: 600 !important;
}

.comprobante-file-btn {
    background: #2563eb !important;
    border-color: #1d4ed8 !important;
}

.comprobante-file-btn .x-btn-inner,
.comprobante-file-btn .x-btn-icon-el {
    color: #ffffff !important;
    font-weight: 750 !important;
}

.btn-comprobante-guardar {
    background: #16a34a !important;
    border-color: #15803d !important;
}

.btn-comprobante-guardar .x-btn-inner,
.btn-comprobante-guardar .x-btn-icon-el {
    color: #ffffff !important;
    font-weight: 750 !important;
}

.pedido-alerta-comprobante {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #334155;
    line-height: 1.35;
}

.pedido-alerta-comprobante > i {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #eff6ff;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.pedido-alerta-comprobante strong {
    display: block;
    color: #0f172a;
    font-size: 13px;
    font-weight: 850;
}

.pedido-alerta-comprobante span,
.pedido-alerta-comprobante p {
    display: block;
    color: #475569;
    font-size: 12.5px;
    font-weight: 650;
    margin: 5px 0 0;
}