button[data-id="closeTicket"] {
    display: none !important; /* Esto oculta el botón */
}
/* Ocultar el <span> con data-id="edit_close" */
span[data-id="edit_close"] {
    display: none !important; /* Esto oculta el <span> */
}
/* Ocultar el ícono SVG con el alt="More" */
svg.Icon__icon[alt="More"] {
    display: none !important; /* Esto oculta el ícono SVG */
}
/* Ocultar el <div> completo con la clase "DottedMenuPopup__displayInB" */
div.DottedMenuPopup__displayInB {
    display: none !important; /* Esto oculta el <div> y todo su contenido */
}
/* Ocultar el <li> con data-id="1002901000044995410_thread" */
li[data-id="1002901000044995410_thread"] {
    display: none !important; /* Esto oculta el <li> y todo su contenido */
}
/* Ocultar el <li> con data-id="1002901000044995410_comment" */
li[data-id="1002901000044995410_comment"] {
    display: none !important; /* Esto oculta el <li> y todo su contenido */
}

/* Ocultar todo el contenido del <ul> con la clase "ConversationForm__replay" */
ul.ConversationForm__replay {
    display: none !important; /* Esto oculta completamente el <ul> y su contenido */
}
/* Ocultar el <div> y todo su contenido */
div.TicketList__mobileFilter.TicketList__filter_channel {
    display: none !important; /* Esto oculta el <div> y todo su contenido */
}



/* /* /* Estilo base para los botones */
.Header__tabs__link,
.LoginDetail__profileLink,
.LoginDetail__logoutLink,
.CustomizeContainer__fontInc,
.CustomizeContainer__fontDec {
    position: relative;
    padding: 10px 20px;
    font-weight: bold;
    border-radius: 4px;
    outline: none;
    box-shadow: none;
    transition: transform 0.3s ease, font-size 0.3s ease;
}

/* Animación para el botón de Inicio */
.Header__tabs__link:hover {
    transform: scale(1.1); /* Aumenta ligeramente al pasar el cursor */
    color: #007bff; /* Cambia el color del texto (solo como ejemplo) */
}

/* Animación para el botón Mi área */
.LoginDetail__profileLink:hover {
    transform: rotate(5deg); /* Gira ligeramente al pasar el cursor */
    color: #28a745; /* Cambia el color del texto */
}

/* Animación para el botón Base de conocimientos */
.LoginDetail__logoutLink:hover {
    transform: scale(1.1) rotate(-5deg); /* Aumenta y rota el texto al pasar el cursor */
    color: #dc3545; /* Cambia el color del texto */
}

/* Animación para el botón Comunidad */
.CustomizeContainer__fontInc:hover {
    transform: translateY(-5px); /* Desplaza el botón hacia arriba */
    color: #ffc107; /* Cambia el color del texto */
}

/* Animación para el botón Cambiar tamaño de fuente */
.CustomizeContainer__fontDec:hover {
    transform: scale(1.2); /* Aumenta el tamaño del botón */
    color: #17a2b8; /* Cambia el color del texto */
}

/* Animación de agrandamiento y rebote al hacer clic */
.Header__tabs__link:active,
.LoginDetail__profileLink:active,
.LoginDetail__logoutLink:active,
.CustomizeContainer__fontInc:active,
.CustomizeContainer__fontDec:active {
    transform: scale(0.95); /* Comprime ligeramente el botón al hacer clic */
    animation: clickBounce 0.3s ease-out;
}

/* Efecto de rebote para todos los botones */
@keyframes clickBounce {
    0% {
        transform: scale(0.95); /* Inicia comprimido */
    }
    50% {
        transform: scale(1.1); /* Se expande un poco */
    }
    100% {
        transform: scale(1); /* Regresa a su tamaño original */
      
    }
}

/* Estilo base para el botón */
.Button__btnFont.Button__primary {
    position: relative;
    padding: 12px 20px;
    font-weight: bold;
    border-radius: 4px;
    outline: none; /* Elimina el contorno */
    box-shadow: none; /* Elimina sombras */
    transition: transform 0.2s ease, background-color 0.3s ease, color 0.3s ease;
}

/* Animación al pasar el mouse (hover) */
.Button__btnFont.Button__primary:hover {
    transform: scale(1.1); /* Agranda el botón ligeramente */
    background-color: #0056b3; /* Cambia el fondo de forma suave */
    color: #fff; /* Cambia el color del texto al hacer hover */
    cursor: pointer; /* Muestra el cursor de pointer */
}

/* Efecto cuando se hace clic */
.Button__btnFont.Button__primary:active {
    transform: scale(0.95); /* Hace que el botón se encoja ligeramente al hacer clic */
    animation: buttonClick 0.2s ease-out; /* Animación de rebote al hacer clic */
}

/* Animación de rebote */
@keyframes buttonClick {
    0% {
        transform: scale(0.95); /* Empieza comprimido */
    }
    50% {
        transform: scale(1.1); /* Expande ligeramente el botón */
    }
    100% {
        transform: scale(1); /* Regresa al tamaño original */
    }
}

/* Estilo base para el botón */
.Button__btnFont.Button__secondary {
    position: relative;
    padding: 12px 20px; /* Espaciado para mantener el diseño */
    font-weight: bold; /* Texto en negrita */
    border-radius: 4px; /* Bordes redondeados */
    outline: none; /* Eliminar contorno */
    box-shadow: none; /* Eliminar sombra */
    transition: transform 0.3s ease, background-color 0.3s ease; /* Transiciones suaves */
}

/* Animación al pasar el mouse (hover) */
.Button__btnFont.Button__secondary:hover {
    transform: scale(1.05); /* Agranda ligeramente el botón */
    background-color: #6c757d; /* Fondo gris oscuro al hacer hover */
    color: #fff; /* Cambia el color del texto */
    cursor: pointer; /* Muestra el cursor de pointer */
}

/* Efecto cuando se hace clic */
.Button__btnFont.Button__secondary:active {
    transform: scale(0.95); /* Hace que el botón se encoja ligeramente */
    animation: buttonClick 0.2s ease-out; /* Animación de rebote */
}

/* Animación de rebote */
@keyframes buttonClick {
    0% {
        transform: scale(0.95); /* Empieza comprimido */
    }
    50% {
        transform: scale(1.1); /* Se expande un poco */
    }
    100% {
        transform: scale(1); /* Regresa a su tamaño original */
    }
}

/* Estilo base para el botón */
.Button__btnFont.Button__footerBtn {
    position: relative;
    padding: 12px 24px; /* Espaciado adecuado para mantener la estética */
    font-weight: bold; /* Texto en negrita */
    border-radius: 8px; /* Bordes más redondeados para un toque moderno */
    outline: none; /* Elimina el contorno */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra sutil */
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease; /* Transición suave */
    color: #fff; /* Color de texto blanco */
    background-color: #007bff; /* Fondo azul (puedes cambiarlo según tu preferencia) */
}

/* Efecto de agrandamiento al pasar el cursor (hover) */
.Button__btnFont.Button__footerBtn:hover {
    transform: scale(1.1); /* Aumenta el tamaño del botón */
    background-color: #0056b3; /* Cambia el color de fondo */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Sombra más grande */
    cursor: pointer; /* Cambia el cursor para indicar interactividad */
}

/* Efecto de rebote al hacer clic (active) */
.Button__btnFont.Button__footerBtn:active {
    transform: scale(0.95); /* Comprime ligeramente el botón al hacer clic */
    animation: buttonClickBounce 0.3s ease-out; /* Animación de rebote */
}

/* Animación de rebote (hace que el botón se expanda y luego vuelva a su tamaño original) */
@keyframes buttonClickBounce {
    0% {
        transform: scale(0.95); /* Empieza comprimido */
    }
    50% {
        transform: scale(1.1); /* Se expande un poco */
    }
    100% {
        transform: scale(1); /* Vuelve a su tamaño original */
    }
}

/* Efecto de pulsación al pasar el mouse */
.Button__btnFont.Button__footerBtn:hover {
    animation: pulseEffect 1.5s infinite; /* Efecto de pulsación en loop */
}

/* Efecto de pulsación */
@keyframes pulseEffect {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
} /* ← ESTA llave cierra correctamente la animación */

/*Final Efectos de pulsación */

/* =========================================
🌫️ ENTEL SOFT GRAY STYLE — FORMULARIO PREMIUM
Versión completa y alineada, visual sobrio,
minimalista y simétrico.
========================================= */

/* 🔹 BASE GENERAL */
form {
  max-width: 980px !important;
  margin: 40px auto !important;
  background: #ffffff !important;
  padding: 46px 54px !important;
  border-radius: 16px !important;
  border: 1px solid #e7ebf0 !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.05) !important;
  font-family: "Inter", "Segoe UI", sans-serif !important;
  box-sizing: border-box !important;
}

/* 🔹 ETIQUETAS GLOBALES */
label.FormElement__formLabelvertical {
  font-weight: 600 !important;
  color: #1e293b !important;
  font-size: 14px !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* =========================================
🎨 CAMPOS DE TEXTO, FECHA Y LISTA
========================================= */
input.Input__formInput,
div.DropDown__dropdown,
div.DateWidget__date {
  border: 1px solid #d4dae2 !important;
  border-radius: 10px !important;
  height: 44px !important;
  padding: 8px 12px !important;
  background: #f9fafb !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease-in-out !important;
  font-size: 14px !important;
  color: #1e293b !important;
}

/* Hover */
input.Input__formInput:hover,
div.DropDown__dropdown:hover,
div.DateWidget__date:hover {
  border-color: #0078ff !important;
  background: #ffffff !important;
}

/* Focus */
input.Input__formInput:focus,
div.DropDown__dropdown:focus-within,
div.DateWidget__date:focus-within {
  outline: none !important;
  border-color: #0078ff !important;
  box-shadow: 0 0 0 3px rgba(0, 120, 255, 0.12) !important;
  background: #ffffff !important;
}

/* Placeholder */
input::placeholder {
  color: #9ca3af !important;
  opacity: 1 !important;
}

/* Sombra interna ligera */
.Input__formInput,
.DropDown__dropdown {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

/* =========================================
🧩 FILAS Y DISTRIBUCIÓN DE CAMPOS
========================================= */

/* Alineación general */
[class^="field_cf_"],
[id^="field_cf_"] {
  vertical-align: top !important;
  margin-bottom: 22px !important;
}

/* Canal | Punto de Venta | Socio */
#field_cf_canal_de_atencion,
#field_cf_punto_de_venta,
#field_cf_producto_venta {
  display: inline-block !important;
  width: 32.3% !important;
  margin-right: 1.5% !important;
}
#field_cf_producto_venta { margin-right: 0 !important; }

/* Nombres | Tipo Documento | N° Documento */
#field_cf_nombre_cliente,
#field_cf_tipo_documento,
#field_cf_numero_de_documento {
  display: inline-block !important;
  margin-right: 1.5% !important;
  vertical-align: top !important;
}
#field_cf_nombre_cliente { width: 45% !important; }
#field_cf_tipo_documento { width: 24% !important; }
#field_cf_numero_de_documento { width: 28% !important; margin-right: 0 !important; }

/* Operador Cedente | N° Teléfono */
#field_cf_operador_cedente,
#field_cf_n_de_telefono {
  display: inline-block !important;
  width: 48% !important;
  margin-right: 2% !important;
}
#field_cf_n_de_telefono { margin-right: 0 !important; }

/* Fecha Orden | N° Orden | Importe / Deuda */
#field_cf_fecha_ingreso_de_orden,
#field_cf_n_de_orden,
#field_cf_importe_de_rechazo {
  display: inline-block !important;
  vertical-align: top !important;
  margin-right: 1.5% !important;
}
#field_cf_fecha_ingreso_de_orden { width: 33% !important; }
#field_cf_n_de_orden { width: 30% !important; }
#field_cf_importe_de_rechazo { width: 33% !important; margin-right: 0 !important; }

/* =========================================
💰 BLOQUE DE PAGO
========================================= */

/* Entidad de Pago | N° de Operación */
#field_cf_lista_de_seleccion_1_3,
#field_cf_distrito_de_entrega {
  display: inline-block !important;
  width: 48% !important;
  margin-right: 2% !important;
}
#field_cf_distrito_de_entrega { margin-right: 0 !important; }

/* Especificar Entidad */
#field_cf_nro_de_orden2 {
  width: 100% !important;
  display: block !important;
}

/* Fecha Pago | Monto Total */
#field_cf_1er_intento_fecha_hora,
#field_cf_monto_pagado_en_voucher {
  display: inline-block !important;
  width: 48% !important;
  margin-top: 20px !important;
  margin-right: 2% !important;
}
#field_cf_monto_pagado_en_voucher { margin-right: 0 !important; }

/* =========================================
💬 TEXTAREAS
========================================= */
textarea {
  border: 1px solid #d4dae2 !important;
  border-radius: 10px !important;
  background: #f9fafb !important;
  min-height: 90px !important;
  padding: 10px 14px !important;
  resize: vertical !important;
  line-height: 1.4 !important;
  font-size: 14px !important;
  transition: all 0.25s ease !important;
}
textarea:hover {
  border-color: #0078ff !important;
  background: #ffffff !important;
}
textarea:focus {
  border-color: #0078ff !important;
  box-shadow: 0 0 0 3px rgba(0, 120, 255, 0.12) !important;
  background: #ffffff !important;
}

/* =========================================
🧊 DROPDOWN — LIMPIO Y EQUILIBRADO
========================================= */
.DropDown__dropdown:focus-within,
.DropDown__dropdown[aria-expanded="true"] {
  background: #ffffff !important;
  border-color: #0078ff !important;
  box-shadow: 0 0 0 3px rgba(0, 120, 255, 0.15) !important;
}
.DropDown__selectedText {
  background: transparent !important;
  color: #1e293b !important;
}
.DropDown__listmenu {
  background: #ffffff !important;
  border: 1px solid #d4dae2 !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08) !important;
}
.DropDown__option:hover {
  background-color: #f0f7ff !important;
  color: #0078ff !important;
}

/* =========================================
⚖️ SIMETRÍA Y DETALLE VISUAL
========================================= */
input.Input__formInput,
div.DropDown__dropdown,
div.DateWidget__date {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.DropDown__arrowOpen svg {
  stroke-width: 2px !important;
  width: 14px !important;
  height: 14px !important;
  opacity: 0.8 !important;
  transition: transform 0.2s ease !important;
}
.DropDown__dropdown[aria-expanded="true"] .DropDown__arrowOpen svg {
  transform: rotate(180deg) !important;
}

/* =========================================
📱 RESPONSIVE
========================================= */
@media (max-width: 900px) {
  #field_cf_canal_de_atencion,
  #field_cf_punto_de_venta,
  #field_cf_producto_venta,
  #field_cf_nombre_cliente,
  #field_cf_tipo_documento,
  #field_cf_numero_de_documento,
  #field_cf_operador_cedente,
  #field_cf_n_de_telefono,
  #field_cf_fecha_ingreso_de_orden,
  #field_cf_n_de_orden,
  #field_cf_importe_de_rechazo,
  #field_cf_lista_de_seleccion_1_3,
  #field_cf_distrito_de_entrega,
  #field_cf_nro_de_orden2,
  #field_cf_1er_intento_fecha_hora,
  #field_cf_monto_pagado_en_voucher {
    display: block !important;
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 18px !important;
  }
}

/* =========================================
🧩 FIX UNIFICADO: Alinear y mostrar texto completo en dropdowns
Corrige altura, centrado y evita el recorte sin deformar el diseño
========================================= */
.DropDown__dropdown {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 42px !important;
  border-radius: 8px !important;
  background: #fafafa !important;
  border: 1px solid #d9d9d9 !important;
  padding: 0 10px !important;
  box-sizing: border-box !important;
}

/* Texto dentro del dropdown */
.DropDown__selectedText {
  flex: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 14px !important;
  color: #1e293b !important;
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  padding: 0 !important;
}

/* Si el texto está vacío (placeholder tipo --Ninguna--), usar tono gris */
.DropDown__selectedText:empty::before,
.DropDown__selectedText[title*="Ninguna"] {
  color: #9ca3af !important;
}

/* Flecha del dropdown */
.DropDown__arrowOpen {
  position: relative !important;
  right: 0 !important;
  margin-left: 6px !important;
  display: flex !important;
  align-items: center !important;
}

/* Hover y focus uniformes */
.DropDown__dropdown:hover {
  background: #ffffff !important;
  border-color: #0078ff !important;
}
.DropDown__dropdown:focus-within {
  background: #ffffff !important;
  border-color: #0078ff !important;
  box-shadow: 0 0 0 2px rgba(0, 120, 255, 0.1) !important;
}
/* Fin de Funsiones */

/* ===================================================
🎯 ENTEL FUTURE CLEAN v3 (Soft Colors Edition + Click Fix)
Estilo limpio, simétrico, profesional y clickeable
=================================================== */

/* ===== Fondo general ===== */
body,
#mainContainer,
.TicketListContainer__list,
.TicketList__widgetRight {
  background: #ffffff !important;
  font-family: "Inter", "Segoe UI", sans-serif !important;
  color: #1a1a1a !important;
}

/* ===== Tarjeta de ticket ===== */
.TicketListItem__listItem {
  position: relative !important;
  background: #fff !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
  margin: 10px 0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
  border-left: 4px solid #e9ecef !important; /* neutro base */
  transition: box-shadow 0.2s ease !important;
  cursor: pointer !important;
  z-index: 1 !important;
}
.TicketListItem__listItem:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
}

/* ===== Columna derecha (avatar + estado) ===== */
.TicketListItem__ticketStausPart {
  min-width: 78px !important;
}
.TicketListItem__avatarStatus {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
}

/* ===== Avatar ===== */
.agent_avatar,
.AvatarText__avatarText,
.Avatar__avatarImg {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
}
.AvatarText__avatarText {
  background: #1677ff !important;
  color: #fff !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ===== Chip de estado ===== */
.TicketListItem__ticketStatus {
  display: inline-block !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  color: #fff !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ===== Tonos actualizados para estados ===== */

/* 🟢 Procedente — Verde neón */
.TicketListItem__ticketStatus.procedente,
.TicketListItem__ticketStatus[title="Procedente"] {
  background-color: rgba(0, 255, 0, 0.5) !important; /* Verde neón 50% */
  color: #046a04 !important;
}
.TicketListItem__listItem:has(.TicketListItem__ticketStatus.procedente),
.TicketListItem__listItem:has(.TicketListItem__ticketStatus[title="Procedente"]) {
  border-left-color: rgba(0, 255, 0, 0.5) !important;
}

/* 🔴 No Procede — Rojo brillante */
.TicketListItem__ticketStatus.no_procede,
.TicketListItem__ticketStatus.no-procede,
.TicketListItem__ticketStatus[title="No Procede"] {
  background-color: rgba(255, 0, 0, 0.5) !important; /* Rojo vivo 50% */
  color: #9c0b0b !important;
}
.TicketListItem__listItem:has(.TicketListItem__ticketStatus.no_procede),
.TicketListItem__listItem:has(.TicketListItem__ticketStatus.no-procede),
.TicketListItem__listItem:has(.TicketListItem__ticketStatus[title="No Procede"]) {
  border-left-color: rgba(255, 0, 0, 0.5) !important;
}

/* 🟠 En Revisión — Naranja encendido */
.TicketListItem__ticketStatus.revision,
.TicketListItem__ticketStatus[title="En Revisión"],
.TicketListItem__ticketStatus[title="Caso en Revision"],
.TicketListItem__ticketStatus[title="Pendiente"] {
  background-color: rgba(255, 102, 0, 0.5) !important; /* Naranja vivo 50% */
  color: #b14e00 !important;
}
.TicketListItem__listItem:has(.TicketListItem__ticketStatus.revision),
.TicketListItem__listItem:has(.TicketListItem__ticketStatus[title="En Revisión"]),
.TicketListItem__listItem:has(.TicketListItem__ticketStatus[title="Caso en Revision"]),
.TicketListItem__listItem:has(.TicketListItem__ticketStatus[title="Pendiente"]) {
  border-left-color: rgba(255, 102, 0, 0.5) !important;
}

/* ===== Título y subtítulo ===== */
.TicketListItem__ticketCardTitle {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
}
.TicketListItem__ticketId {
  color: #0078ff !important;
  font-weight: 600 !important;
}

/* ===== Subdetalles ===== */
.TicketListItem__ticketlistItem {
  margin-top: 4px !important;
}
.TicketListItem__ticketlistItem li {
  font-size: 13px !important;
  color: #5f6b7a !important;
  margin-right: 8px !important;
}

/* ===== Botón principal ===== */
.Button__primary {
  background: linear-gradient(90deg, #1677ff, #00a3ff) !important;
  border-radius: 10px !important;
  border: none !important;
  color: #fff !important;
  font-weight: 700 !important;
  padding: 10px 18px !important;
  box-shadow: 0 4px 10px rgba(0, 120, 255, 0.25) !important;
  transition: all 0.25s ease !important;
}
.Button__primary:hover {
  filter: brightness(1.05) !important;
  transform: scale(1.03);
}

/* ===== Panel lateral ===== */
.TicketList__widgetRight {
  background: #ffffff !important;
  border-radius: 12px !important;
  padding: 16px !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05) !important;
  border: 1px solid #f2f4f7 !important;
}

/* ===== Paginación ===== */
.Pagination__paginationUl li a {
  background: #fff !important;
  border-radius: 6px !important;
  border: 1px solid #eaeaea !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
  margin: 0 3px !important;
  color: #0078ff !important;
  font-weight: 500 !important;
  transition: all 0.2s ease-in-out !important;
}
.Pagination__paginationUl li a:hover {
  background: #0078ff !important;
  color: #fff !important;
  transform: scale(1.06);
}

/* ===== Brillo sutil (sin bloquear clics) ===== */
.TicketListItem__listItem::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(0, 120, 255, 0.03), transparent);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  z-index: 0;
  pointer-events: none; /* ✅ clics activos */
}
.TicketListItem__listItem:hover::before {
  opacity: 1;
}

/* ===================================================
🩶 BOTÓN "DESCARTAR" - ESTILO ENTEL CLEAN GREY
=================================================== */
button[data-id="ticket_cancel"],
.Button__secondary[data-id="ticket_cancel"] {
  background: #f5f5f5 !important;
  color: #333 !important;
  border: 1px solid #dcdcdc !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 10px 20px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.25s ease-in-out !important;
  cursor: pointer !important;
}
button[data-id="ticket_cancel"]:hover {
  background: #e8e8e8 !important;
  border-color: #c8c8c8 !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1) !important;
  transform: translateY(-1px);
}
button[data-id="ticket_cancel"]:active {
  background: #e0e0e0 !important;
  transform: scale(0.98);
}

/* ===================================================
🌿 ESTILO FINAL - ESTADO DE TICKET (ZOHO DESK)
=================================================== */

/* 🔹 Base del contenedor */
.InfoContainer__closed {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 18px !important;
  border-radius: 18px !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  letter-spacing: 0.3px !important;
  text-transform: capitalize !important;
  color: #222 !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.25s ease-in-out !important;
  min-width: 115px !important;
  text-align: center !important;
}

/* 🟢 Procedente */
.InfoContainer__closed.procedente,
.InfoContainer__closed[title="Procedente"] {
  background: rgba(0, 255, 0, 0.5) !important;
  color: #046a04 !important;
  border: 1px solid rgba(0, 255, 0, 0.4) !important;
}

/* 🔴 No Procede */
.InfoContainer__closed.no_procede,
.InfoContainer__closed[title="No Procede"] {
  background: rgba(255, 0, 0, 0.5) !important;
  color: #9c0b0b !important;
  border: 1px solid rgba(255, 0, 0, 0.4) !important;
}

/* 🟠 En Revisión */
.InfoContainer__closed.revision,
.InfoContainer__closed[title="En Revisión"],
.InfoContainer__closed[title="Pendiente"] {
  background: rgba(255, 102, 0, 0.5) !important;
  color: #b14e00 !important;
  border: 1px solid rgba(255, 102, 0, 0.4) !important;
}

/* ✨ Efecto hover delicado */
.InfoContainer__closed:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.07) !important;
}

/* ===== Chip de estado (solo texto plano, sin fondo) ===== */
.TicketListItem__ticketStatus {
  display: inline-block !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: capitalize !important;
  color: inherit !important;
  line-height: 1.2 !important;
}

/* 🟢 Procedente — texto verde */
.TicketListItem__ticketStatus.procedente,
.TicketListItem__ticketStatus[title="Procedente"] {
  color: #00b300 !important;
}

/* 🔴 No Procede — texto rojo */
.TicketListItem__ticketStatus.no_procede,
.TicketListItem__ticketStatus.no-procede,
.TicketListItem__ticketStatus[title="No Procede"] {
  color: #d62828 !important;
}

/* 🟠 En Revisión — texto naranja */
.TicketListItem__ticketStatus.revision,
.TicketListItem__ticketStatus[title="En Revisión"],
.TicketListItem__ticketStatus[title="Caso en Revision"],
.TicketListItem__ticketStatus[title="Pendiente"] {
  color: #ff7b00 !important;
}
/* ===== CORRECCIÓN FINAL =====
   Quita cualquier fondo o resaltado de los estados
   y deja solo el color del texto
============================================== */

.TicketListItem__ticketStatus,
.TicketListItem__ticketStatus.procedente,
.TicketListItem__ticketStatus.no_procede,
.TicketListItem__ticketStatus.no-procede,
.TicketListItem__ticketStatus.revision,
.TicketListItem__ticketStatus[title="Procedente"],
.TicketListItem__ticketStatus[title="No Procede"],
.TicketListItem__ticketStatus[title="En Revisión"],
.TicketListItem__ticketStatus[title="Pendiente"],
.TicketListItem__ticketStatus[title="Caso en Revision"] {
  background: none !important;        /* 💥 elimina fondo */
  background-color: transparent !important; /* 💥 asegura transparencia */
  border: none !important;            /* sin bordes */
  box-shadow: none !important;        /* sin sombra */
  text-shadow: none !important;       /* sin brillo */
  padding: 0 !important;              /* elimina relleno */
  margin: 0 !important;
  display: inline !important;         /* texto plano */
  font-weight: 700 !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  border-radius: 0 !important;
  text-transform: capitalize !important;
}

/* 🎨 Colores de texto planos */
.TicketListItem__ticketStatus.procedente,
.TicketListItem__ticketStatus[title="Procedente"] {
  color: #00a82d !important; /* verde natural */
}

.TicketListItem__ticketStatus.no_procede,
.TicketListItem__ticketStatus.no-procede,
.TicketListItem__ticketStatus[title="No Procede"] {
  color: #e22e2e !important; /* rojo coral */
}

.TicketListItem__ticketStatus.revision,
.TicketListItem__ticketStatus[title="En Revisión"],
.TicketListItem__ticketStatus[title="Caso en Revision"],
.TicketListItem__ticketStatus[title="Pendiente"] {
  color: #ff7a00 !important; /* naranja cálido */
}

/* ===================================================
🟠 BOTÓN “AGREGAR TICKET” - FORZADO Y FUNCIONAL
Color naranja moderno tipo Entel UI
=================================================== */
a[data-id="addticket"] button,
button[data-id="addticket"],
.Button__primary[data-id="addticket"],
.Button__btnFont[data-id="addticket"] {
  background: linear-gradient(90deg, #ff8800, #ff6a00) !important; /* gradiente naranja moderno */
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 10px 22px !important;
  box-shadow: 0 4px 10px rgba(255, 106, 0, 0.25) !important;
  transition: all 0.25s ease-in-out !important;
  cursor: pointer !important;
  text-shadow: none !important;
  outline: none !important;
  display: inline-block !important;
}

/* Hover: brillo suave */
a[data-id="addticket"] button:hover,
button[data-id="addticket"]:hover {
  background: linear-gradient(90deg, #ff9a2b, #ff7a00) !important;
  box-shadow: 0 6px 12px rgba(255, 120, 0, 0.35) !important;
  transform: translateY(-1px);
}

/* Active: efecto click */
a[data-id="addticket"] button:active,
button[data-id="addticket"]:active {
  background: linear-gradient(90deg, #ff6f00, #ff5e00) !important;
  transform: scale(0.97);
  box-shadow: 0 2px 6px rgba(255, 120, 0, 0.25) !important;
}

/* Asegura que los estilos de Zoho no lo sobrescriban */
a[data-id="addticket"] button::before,
button[data-id="addticket"]::before {
  content: none !important;
}

/* ===================================================
🟠 BOTÓN “ENVÍE UN TICKET” - FOOTER ENTEL CLEAN
Versión elegante y anaranjada coherente con Agregar Ticket
=================================================== */
a[data-id="footer_newticket"] button,
button[data-id="footer_newticket"],
.Button__footerBtn[data-id="footer_newticket"],
.Footer__footerBtn button {
  background: linear-gradient(90deg, #ff8800, #ff6a00) !important; /* gradiente naranja moderno */
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 10px 22px !important;
  box-shadow: 0 4px 10px rgba(255, 106, 0, 0.25) !important;
  transition: all 0.25s ease-in-out !important;
  cursor: pointer !important;
  text-shadow: none !important;
  outline: none !important;
  display: inline-block !important;
}

/* Hover: brillo leve tipo glow */
a[data-id="footer_newticket"] button:hover,
button[data-id="footer_newticket"]:hover,
.Footer__footerBtn button:hover {
  background: linear-gradient(90deg, #ff9a2b, #ff7a00) !important;
  box-shadow: 0 6px 12px rgba(255, 120, 0, 0.35) !important;
  transform: translateY(-1px);
}

/* Active: efecto de presión */
a[data-id="footer_newticket"] button:active,
button[data-id="footer_newticket"]:active,
.Footer__footerBtn button:active {
  background: linear-gradient(90deg, #ff6f00, #ff5e00) !important;
  transform: scale(0.97);
  box-shadow: 0 2px 6px rgba(255, 120, 0, 0.25) !important;
}

/* Remueve cualquier sombra o fondo heredado de Zoho */
.Footer__footerBtn button::before {
  content: none !important;
}

/* ===================================================
🟠 BOTÓN “ENVIAR” - ESTILO ENTEL CLEAN NARANJA
Consistente con los botones Agregar Ticket y Envíe un Ticket
=================================================== */

button[data-id="ticket_save"],
.Button__primary[data-id="ticket_save"],
.Button__btnFont[data-id="ticket_save"],
.Button__buttonCommon[data-id="ticket_save"] {
  background: linear-gradient(90deg, #ff8800, #ff6a00) !important; /* gradiente Entel */
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 10px 22px !important;
  box-shadow: 0 4px 10px rgba(255, 106, 0, 0.25) !important;
  transition: all 0.25s ease-in-out !important;
  cursor: pointer !important;
  text-shadow: none !important;
  outline: none !important;
}

/* Hover: brillo leve y elevación */
button[data-id="ticket_save"]:hover {
  background: linear-gradient(90deg, #ff9a2b, #ff7a00) !important;
  box-shadow: 0 6px 12px rgba(255, 120, 0, 0.35) !important;
  transform: translateY(-1px);
}

/* Active: efecto presión */
button[data-id="ticket_save"]:active {
  background: linear-gradient(90deg, #ff6f00, #ff5e00) !important;
  transform: scale(0.97);
  box-shadow: 0 2px 6px rgba(255, 120, 0, 0.25) !important;
}

/* Evitar interferencias del sistema de Zoho */
button[data-id="ticket_save"]::before {
  content: none !important;
}

/* ===================================================
🩶 BOTÓN “CAMBIAR CONTRASEÑA” - ESTILO ENTEL CLEAN GREY
Diseño simétrico, elegante y coherente con los botones principales
=================================================== */

button.Button__secondary,
.Button__btnFont.Button__secondary,
.Button__secondary.commonStyle__zt3buttonSecondaryBg {
  background: linear-gradient(90deg, #f1f1f1, #e0e0e0) !important; /* gradiente gris sutil */
  color: #333 !important; /* texto gris oscuro */
  border: 1px solid #d0d0d0 !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 10px 22px !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.25s ease-in-out !important;
  cursor: pointer !important;
  outline: none !important;
  text-shadow: none !important;
}

/* Hover: gris más claro + elevación */
button.Button__secondary:hover {
  background: linear-gradient(90deg, #f6f6f6, #e8e8e8) !important;
  border-color: #c2c2c2 !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-1px);
}

/* Active: efecto de presión */
button.Button__secondary:active {
  background: linear-gradient(90deg, #dcdcdc, #cfcfcf) !important;
  transform: scale(0.98);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
}

/* Elimina estilos antiguos o resaltados no deseados */
button.Button__secondary::before {
  content: none !important;
}

/* ===================================================
🟠 BOTÓN “EDITAR PERFIL” - ESTILO ENTEL CLEAN NARANJA
Diseño consistente con los botones Enviar y Agregar Ticket
=================================================== */

button.Button__primary,
.Button__btnFont.Button__primary,
.Button__primary.commonStyle__zt3buttonPrimaryBg {
  background: linear-gradient(90deg, #ff8800, #ff6a00) !important; /* gradiente naranja Entel */
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 10px 22px !important;
  box-shadow: 0 4px 10px rgba(255, 106, 0, 0.25) !important;
  transition: all 0.25s ease-in-out !important;
  cursor: pointer !important;
  text-shadow: none !important;
  outline: none !important;
}

/* Hover: brillo leve + elevación */
button.Button__primary:hover {
  background: linear-gradient(90deg, #ff9a2b, #ff7a00) !important;
  box-shadow: 0 6px 12px rgba(255, 120, 0, 0.35) !important;
  transform: translateY(-1px);
}

/* Active: efecto de presión */
button.Button__primary:active {
  background: linear-gradient(90deg, #ff6f00, #ff5e00) !important;
  transform: scale(0.97);
  box-shadow: 0 2px 6px rgba(255, 120, 0, 0.25) !important;
}

/* Remueve efectos previos de Zoho */
button.Button__primary::before {
  content: none !important;
}

/* 🔒 Ocultar el ítem "SOLICITUDES GENERALES DE DEVOLUCION" del filtro de cuentas */
div[data-id="1002901000072883834_account_filter_item"] {
    display: none !important;
}