/* Estilos CSS para ContratoMultiClienteMultiPuntoRefactored */

.customDateInput {
    border: 1px solid transparent !important;
    border-radius: 4px;
    padding: 4px 8px;
    background: transparent;
    outline: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.customDateInput:focus {
    border: 1px solid #dee2e6 !important;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25) !important;
    outline: none;
    cursor: text;
}

.customDateInput:hover {
    border: 1px solid #dee2e6 !important;
}

.customDateInput::-webkit-calendar-picker-indicator {
    width: 8px;
    height: 8px;
    cursor: pointer;
}

.invisibleInput {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

.invisibleInput:focus {
    border: 1px solid #dee2e6 !important;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25) !important;
    cursor: text !important;
}

.invisibleInput:hover {
    cursor: pointer !important;
}

.rbtInputMain {
    border: 1px solid #e3e6f0 !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.rbtInputMain:focus {
    border-color: #80bdff !important;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25) !important;
    cursor: text !important;
}

.rbtInputMain:hover {
    cursor: pointer !important;
}

/* Mejorar visualización de Typeahead en tablas */
.rbtMenu {
    z-index: 9999 !important;
    max-height: 250px !important;
    overflow-y: auto !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    background: white !important;
    position: absolute !important;
}

/* Contenedor de tabla con más altura para mostrar dropdowns */
.cupsTableContainer {
    min-height: 200px !important;
    position: relative !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding-bottom: 200px !important;
}

/* Hacer que table-responsive maneje solo el scroll horizontal */
.tableResponsive {
    overflow-x: auto !important;
    overflow-y: visible !important;
    min-height: 150px !important;
    white-space: nowrap !important;
}

/* Asegurar que las filas de la tabla tengan espacio suficiente */
.table tbody tr {
    position: relative !important;
}

/* Hacer que la tabla tenga scroll horizontal suave */
.cupsTableContainer::-webkit-scrollbar {
    height: 12px !important;
}

.cupsTableContainer::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
    border-radius: 6px !important;
}

.cupsTableContainer::-webkit-scrollbar-thumb {
    background: #c1c1c1 !important;
    border-radius: 6px !important;
}

.cupsTableContainer::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8 !important;
}

/* Asegurar que el contenido de las celdas no se rompa */
.table td, .table th {
    white-space: nowrap !important;
    vertical-align: middle !important;
}

/* Contenedor principal de la card sin scroll vertical */
.cardBody {
    overflow-y: visible !important;
}

/* Estilos para los elementos del dropdown */
.rbtMenuItem {
    padding: 8px 12px !important;
    font-size: 13px !important;
    border-bottom: 1px solid #f8f9fa !important;
    cursor: pointer !important;
}

.rbtMenuItem:hover {
    background-color: #f8f9fa !important;
    cursor: pointer !important;
}

.rbtMenuItem:last-child {
    border-bottom: none !important;
}

/* Cursor pointer para elementos editables de la tabla */
.form-select.invisibleInput:hover,
.customDateInput:hover,
.rbtInputMain:hover,
.btn:hover {
    cursor: pointer !important;
}

/* Cursor pointer para selects y inputs sin foco */
.form-select.invisibleInput,
.rbtInputMain {
    cursor: pointer !important;
}

/* Cursor text cuando el input está enfocado */
.form-select.invisibleInput:focus,
.rbtInputMain:focus {
    cursor: text !important;
}

/* Cursor pointer para items de dropdown */
.rbtMenuItem {
    cursor: pointer !important;
}