/* SOLO estos dos campos en 2 columnas */
#field_cf_canal,
#field_cf_lista_de_seleccion_1_1 {
    display: inline-block !important;
    vertical-align: top;
    width: 49% !important;   /* mitad cada uno */
    margin: 0 !important;
    clear: none !important;  /* evita que se vayan abajo */
    box-sizing: border-box;
}

/* Izquierda: canal */
#field_cf_canal {
    margin-right: 1% !important;  /* pequeño espacio entre ambos */
}

/* Derecha: lista */
#field_cf_lista_de_seleccion_1_1 {
    margin-right: 0 !important;
}
/* --- FILA DE 3 COLUMNAS CONFIGURABLES --- */

/* Ajusta estos porcentajes a tu gusto */
#field_cf_nombre_cliente   { width:  42% !important; }   /* Izquierda  */
#field_cf_tipo_documento   { width:  26% !important; }   /* Centro     */
#field_cf_numero_de_documento { width:  29% !important; } /* Derecha    */

/* Estilos base para que se alineen */
#field_cf_nombre_cliente,
#field_cf_tipo_documento,
#field_cf_numero_de_documento {
    display: inline-block !important;
    vertical-align: top;
    margin: 0 !important;
    box-sizing: border-box;
    clear: none !important;
}

/* Espaciado automático entre columnas */
#field_cf_nombre_cliente { margin-right: 1% !important; }
#field_cf_tipo_documento { margin-right: 1% !important; }
#field_cf_numero_de_documento { margin-right: 0 !important; }
}

/* ========================================================= */
/* 🔹 Fila completa: Entidad Bancaria | Tipo de Cuenta | N° Cuenta Interbancaria | N° Cuenta Bancaria */
/* ========================================================= */
/* ---- CONFIGURA AQUÍ LOS PORCENTAJES ---- */
/* (Ejemplo: 25% / 25% / 25% / 25%) */

#field_cf_banco                             { width: 32% !important; }
#field_cf_tipo_de_cuenta                    { width: 25% !important; }
#field_cf_numero_de_la_cuenta_interbancaria { width: 40% !important; }
#field_cf_nro_cuenta_cci                    { width: 40% !important; }

/* ---- ESTILOS BASE PARA UNA SOLA FILA ---- */
#field_cf_banco,
#field_cf_tipo_de_cuenta,
#field_cf_numero_de_la_cuenta_interbancaria,
#field_cf_nro_cuenta_cci {
    display: inline-block !important;
    vertical-align: top;
    box-sizing: border-box;
    margin: 0 !important;
    clear: none !important;
}

/* Margen opcional entre columnas */
#field_cf_banco                             { margin-right: 1% !important; }
#field_cf_tipo_de_cuenta                    { margin-right: 1% !important; }
#field_cf_numero_de_la_cuenta_interbancaria { margin-right: 1% !important; }
#field_cf_nro_cuenta_cci                    { margin-right: 0; }

/* Contenedor del campo - fijo totalmente */
#field_cf_banco {
    width: 32% !important;        /* tu porcentaje */
    min-width: 32% !important;
    max-width: 32% !important;
    display: inline-block !important;
    box-sizing: border-box;
}

/* El select interno queda bloqueado */
#field_cf_banco select {
    width: 100% !important;        /* ocupa solo su contenedor */
    min-width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;   /* evita que crezca */
    text-overflow: ellipsis !important;  /* agrega "..." si el texto es largo */
    white-space: nowrap !important;      /* evita salto de línea */
}

/* ---- TODOS EN UNA SOLA FILA ---- */
#field_cf_fecha_ingreso_de_orden,
#field_cf_n_de_orden,
#field_cf_monto_total {
    display: inline-block !important;
    vertical-align: top;
    box-sizing: border-box;
    clear: none !important;
    margin: 0 !important;
    padding-right: 12px !important;   /* separación entre columnas */
}

/* Última columna sin padding a la derecha */
#field_cf_monto_total {
    padding-right: 0 !important;
}

/* ---- PORCENTAJES MODIFICABLES (ajusta si quieres) ---- */
#field_cf_fecha_ingreso_de_orden { 
    width: 33% !important; 
    min-width: 33% !important; 
    max-width: 33% !important; 
}

#field_cf_n_de_orden { 
    width: 25% !important; 
    min-width: 25% !important; 
    max-width: 25% !important; 
}

#field_cf_monto_total { 
    width: 41% !important; 
    min-width: 41% !important; 
    max-width: 41% !important; 
}

/* ---- BLOQUEA QUE EL INPUT INTERNO CAMBIE EL ANCHO ---- */
#field_cf_fecha_ingreso_de_orden input,
#field_cf_n_de_orden input,
#field_cf_monto_total input {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
}

/* --- FILA EN 2 COLUMNAS --- */
#field_cf_fecha_orden_de_anulacion,
#field_cf_nro_orden_anulacion {
    display: inline-block !important;
    vertical-align: top;
    box-sizing: border-box;
    clear: none !important;
    margin: 0 !important;
}

/* ---- IZQUIERDA ---- */
#field_cf_fecha_orden_de_anulacion {
    width: 48% !important;
    min-width: 48% !important;
    max-width: 48% !important;
    margin-right: 2% !important;   /* ← AQUÍ VA LA SEPARACIÓN REAL */
}

/* ---- DERECHA ---- */
#field_cf_nro_orden_anulacion {
    width: 49% !important;
    min-width: 49% !important;
    max-width: 49% !important;
}

/* --- BLOQUEAR INPUT PARA QUE NO CAMBIE EL ANCHO --- */
#field_cf_fecha_orden_de_anulacion input,
#field_cf_nro_orden_anulacion input {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
}

#field_cf_n_ss_siebel_de_devolucion {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    clear: both !important;   /* fuerza que vaya a su propia fila */
    margin: 0 !important;
    padding: 0 !important;
}

/* Asegura que el input interno no se achique */
#field_cf_n_ss_siebel_de_devolucion input {
    width: 99% !important;
    min-width: 99% !important;
    max-width: 99% !important;
    box-sizing: border-box !important;
}

#field_subject {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    clear: both !important;   /* fuerza que vaya a su propia fila */
    margin: 0 !important;
    padding: 0 !important;
}

/* Asegura que el input interno no se achique */
#field_subject {
    width: 99% !important;
    min-width: 99% !important;
    max-width: 99% !important;
    box-sizing: border-box !important;
}

/* 🔥 Ocultar filtro "Todos los canales" en la lista de Tickets */
.TicketListLeftContainer1__filter_channel {
    display: none !important;
}

/* 🔥 Ocultar filtro "Todos los canales" en la lista de Tickets */
.TicketListLeftContainer1__filter_accounts {
    display: none !important;
}

/* ========================================================= */
/* 🎨 ESTILO ENTEL – FORMULARIO CORPORATIVO                  */
/* (No modifica columnas, solo estética visual)               */
/* ========================================================= */

/* ---------- Etiquetas ---------- */
[id^="field_cf_"] label,
#field_subject label {
    font-weight: 600 !important;
    font-size: 13px !important;
    color: #005BAC !important;        /* Azul Entel */
    margin-bottom: 4px !important;
    display: inline-block !important;
    letter-spacing: 0.2px !important;
}

[id^="field_cf_"] label .mandatory {
    color: #FF6D00 !important;        /* Naranja Entel */
}

/* ---------- Inputs y selects ---------- */
[id^="field_cf_"] input,
[id^="field_cf_"] select,
[id^="field_cf_"] textarea,
#field_subject input {
    background: #ffffff !important;
    border: 1.4px solid #CFD6E5 !important; /* Gris Entel */
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    height: 38px !important;
    font-family: "Inter", "Segoe UI", sans-serif !important;
    transition: all .18s ease !important;
    box-shadow: 0 0 0 transparent !important;
    outline: none !important;
}

/* Hover */
[id^="field_cf_"] input:hover,
[id^="field_cf_"] select:hover,
[id^="field_cf_"] textarea:hover {
    border-color: #7BB7FF !important;   /* Azul suave */
}

/* Focus (click) */
[id^="field_cf_"] input:focus,
[id^="field_cf_"] select:focus,
[id^="field_cf_"] textarea:focus {
    border-color: #005BAC !important;   /* Azul Entel */
    box-shadow: 0 0 0 2px rgba(0,91,172,0.20) !important;
}

/* ---------- Select dropdown (Zoho / Select2 / autocomplete) ---------- */
.select2-dropdown,
.ui-autocomplete {
    background: #ffffff !important;
    border-radius: 8px !important;
    border: 1px solid #d0d7e2 !important;
    font-size: 13px !important;
    padding: 6px 0 !important;
    box-shadow: 0 6px 22px rgba(0,0,0,0.12) !important;
    min-width: unset !important;
    width: auto !important;
    max-width: 260px !important;
}

/* Cada opción */
.ui-autocomplete .ui-menu-item-wrapper {
    padding: 8px 12px !important;
    border-bottom: 1px solid #E7ECF3 !important;
}

.ui-autocomplete .ui-menu-item-wrapper:hover {
    background: #EAF4FF !important;      /* Azul clarito Entel */
    color: #003B77 !important;
}

/* ---------- Scrollbar elegante ---------- */
.select2-results__options::-webkit-scrollbar,
.ui-autocomplete::-webkit-scrollbar {
    width: 6px !important;
}

.select2-results__options::-webkit-scrollbar-thumb,
.ui-autocomplete::-webkit-scrollbar-thumb {
    background: #b8c4d9 !important;
    border-radius: 8px !important;
}

/* ---------- Alineación perfecta de columnas ---------- */
[id^="field_cf_"] {
    vertical-align: middle !important;
}

/* ---------- Estilo textarea ---------- */
[id^="field_cf_"] textarea,
#field_description textarea {
    min-height: 120px !important;
    line-height: 1.45 !important;
    resize: vertical !important;
    padding: 10px 12px !important;
}

/* ---------- Botones (si los hay) ---------- */
button,
.zcwf_button,
input[type="submit"] {
    background: #005BAC !important;     /* Azul Entel */
    color: #ffffff !important;
    font-size: 14px !important;
    padding: 10px 18px !important;
    border-radius: 6px !important;
    border: none !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    transition: 0.2s ease !important;
}

button:hover,
.zcwf_button:hover,
input[type="submit"]:hover {
    background: #004A92 !important;     /* Azul más intenso Entel */
}

/* ---------- Separación visual entre filas ---------- */
[id^="field_cf_"],
#field_subject {
    margin-bottom: 14px !important;
}

/* Centrar solo la fecha visible del DateWidget */
.DateWidget__date {
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
    display: flex !important;
}

/* SOLO en modo edición del ticket */
.edit_properties {
    display: flex !important;
    flex-direction: column !important;
}

/* ✅ Cada campo (Form__formEdit) ocupará el 50% del panel */
.edit_properties .Form__formEdit {
    max-width: 50% !important;
    width: 50% !important;
}

/* ✅ El control interno ocupa TODO el ancho del campo */
.edit_properties .Form__formEdit .Input__formInput,
.edit_properties .Form__formEdit .DropDown__main,
.edit_properties .Form__formEdit .DateWidget__date,
.edit_properties .Form__formEdit .Textarea__comment {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ORDEN NUEVO — como me lo pediste */
#field_cf_canal                         { order: 1;  }
#field_cf_lista_de_seleccion_1_1        { order: 2;  }
#field_cf_nombre_cliente                { order: 3;  }
#field_cf_tipo_documento                { order: 4;  }
#field_cf_numero_de_documento           { order: 5;  }
#field_cf_banco                         { order: 6;  }
#field_cf_tipo_de_cuenta                { order: 7;  }
#field_cf_numero_de_la_cuenta_interbancaria { order: 8; }
#field_cf_n_ss_siebel_de_devolucion     { order: 9;  }
#field_cf_fecha_ingreso_de_orden        { order: 10; }
#field_cf_n_de_orden                    { order: 11; }
#field_cf_monto_total                   { order: 12; }
#field_cf_fecha_orden_de_anulacion      { order: 13; }
#field_cf_nro_orden_anulacion           { order: 14; }
#field_cf_motivo_de_anulacion           { order: 15; }

/* Botones siempre al final */
.edit_properties > div:last-child {
    order: 999;
}

/* =============================================
   🔵 TODOS LOS CAMPOS AL 50% — SOLO EN EDITAR PROPIEDADES
   ============================================= */

.edit_properties #field_cf_canal,
.edit_properties #field_cf_lista_de_seleccion_1_1,
.edit_properties #field_cf_nombre_cliente,
.edit_properties #field_cf_tipo_documento,
.edit_properties #field_cf_numero_de_documento,
.edit_properties #field_cf_banco,
.edit_properties #field_cf_tipo_de_cuenta,
.edit_properties #field_cf_numero_de_la_cuenta_interbancaria,
.edit_properties #field_cf_n_ss_siebel_de_devolucion,
.edit_properties #field_cf_fecha_ingreso_de_orden,
.edit_properties #field_cf_n_de_orden,
.edit_properties #field_cf_monto_total,
.edit_properties #field_cf_fecha_orden_de_anulacion,
.edit_properties #field_cf_nro_orden_anulacion,
.edit_properties #field_cf_motivo_de_anulacion,
.edit_properties #field_subject {
    width: 90% !important;
    max-width: 90% !important;
    min-width: 90% !important;
    box-sizing: border-box !important;
}

/* 🔹 Asegurar que los inputs ocupen todo el ancho del recuadro */
.edit_properties #field_cf_canal input,
.edit_properties #field_cf_lista_de_seleccion_1_1 input,
.edit_properties #field_cf_nombre_cliente input,
.edit_properties #field_cf_tipo_documento input,
.edit_properties #field_cf_numero_de_documento input,
.edit_properties #field_cf_banco input,
.edit_properties #field_cf_tipo_de_cuenta input,
.edit_properties #field_cf_numero_de_la_cuenta_interbancaria input,
.edit_properties #field_cf_n_ss_siebel_de_devolucion input,
.edit_properties #field_cf_fecha_ingreso_de_orden input,
.edit_properties #field_cf_n_de_orden input,
.edit_properties #field_cf_monto_total input,
.edit_properties #field_cf_fecha_orden_de_anulacion input,
.edit_properties #field_cf_nro_orden_anulacion input,
.edit_properties #field_cf_motivo_de_anulacion textarea,
.edit_properties #field_subject input,
.edit_properties #field_subject textarea,
.edit_properties .DropDown__main,
.edit_properties .DateWidget__posRel {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* 🔴 OCULTAR el botón Editar en todos los estados excepto "Subsanar Devolucion" */
.TicketDetailRightContainer2__edit {
    display: none !important;
}

/* 🟢 MOSTRAR el botón Editar SOLO cuando el estado es "Subsanar Devolucion" */
body:has(.ticket_status .subsanar_devolucion)
    .TicketDetailRightContainer2__edit {
    display: inline-flex !important;
}

/* Ocultar el botón "Cerrar Ticket" */
div[data-id="clost_ticket"] {
    display: none !important;
}

/* Ocultar botón "Responder" */
span[data-id="newReply"] {
    display: none !important;
}

/* 1️⃣ Ocultar Comentario SIEMPRE */
span[data-id="newComment"] {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* 2️⃣ Mostrar SOLO si el ticket está en "Subsanar Devolucion" */
body:has(.subsanar_devolucion) span[data-id="newComment"] {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* 3️⃣ Mantener espacio original para que no se mueva nada */
span[data-id="newComment"] {
    display: inline-flex !important;
    align-items: center !important;
}

/* Ocultar botón "Eliminar" dentro de los comentarios */
div[data-id^="ticket_comment_delete_"] {
    display: none !important;
}

/* Ocultar botón "Responder" dentro de las respuestas del hilo */
div.Post__reply[data-id^="reply_"] {
    display: none !important;
}


/* 🔹 Ocultar SIEMPRE las opciones Editar / Eliminar del menú de comentarios */
.DottedMenu__children {
    display: none !important;
}

/* 🔹 MOSTRARLAS SOLO si el ticket está en estado "Subsanar Devolucion" */
body:has(.subsanar_devolucion) .DottedMenu__children {
    display: block !important;
}