/* =============================================== */
/* TRACKING OVERRIDES - Mejoras específicas sobre Bootstrap */
/* En tracking usamos los de bootstrap, acá creamos estilos nuevos o pisamos los de bottstrap */
/* =============================================== */

/* ---------------------------------------------- */
/* TÍTULOS DE PÁGINAS - Opción A: Fondo azul sutil */
/* ---------------------------------------------- */

/* Override para tabla de encabezado con título */
form table.table.table-bordered[align="left"] {
    background-color: #f8faff !important;
    border: 1px solid #d6e3f0 !important;
    margin-bottom: 5px !important;
    border-radius: 6px !important;
}

/* Override para el párrafo del título */
form table.table.table-bordered[align="left"] p {
    margin: 8px 0 !important;
    padding: 0 !important;
}

/* Override para el span del título */
form table.table.table-bordered[align="left"] span[style*="font-size: large"] {
    font-size: 20px !important;
    font-weight: bold !important;
    color: #2153AA !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

/* Override para celdas de la tabla de encabezado */
form table.table.table-bordered[align="left"] td {
    padding: 8px 12px !important;
    border: none !important;
    vertical-align: middle !important;
    background-color: transparent !important;
}

/* Override para iconos en la tabla de encabezado */
form table.table.table-bordered[align="left"] input[type="image"] {
    margin: 0 !important;
    padding: 4px !important;
    border-radius: 4px !important;
    transition: opacity 0.2s ease !important;
}

form table.table.table-bordered[align="left"] input[type="image"]:hover {
    opacity: 0.8 !important;
}

/* Reducir espacio entre tabla de título y tabla de datos */
form table.table.table-striped {
    margin-top: 0px !important; /* Eliminar margen superior */
    margin-bottom: 20px !important;
}

/* Si hay elementos entre las tablas, reducir su espacio */
form table.table.table-bordered + * + table.table.table-striped {
    margin-top: 0px !important;
}

/* ---------------------------------------------- */
/* MODAL USER MESSAGE - Solo para UserMessage.html */
/* ---------------------------------------------- */

.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.3s ease;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
}

.close-button:hover {
    color: #2153AA;
    background-color: #f0f0f0;
    border-radius: 50%;
}


/* Sobreescribimos Kendo autocomplete */
/* Fondo suave y fuente más chica para el menú del autocomplete */
.k-list-container, .k-list {
    background: #f4fbfa !important;   /* pastel celeste muy suave */
    font-size: 11px !important;
    border-radius: 8px !important;
    border: 1px solid #cce0f6 !important;
    box-shadow: 0 2px 10px #d0d7df50 !important;
    color: #233a4e !important;
}

/* Item individual */
.k-list-item-text {
    padding: 2px 6px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
}

/* Item seleccionado o con hover */
.k-list-optionlabel, .k-list-item.k-selected, .k-list-item.k-hover {
    background: #e5f6f6 !important;   /* un celeste-menta pastel */
    color: #0e3350 !important;
}

.k-list-item {
    min-height: 0 !important;
}

/* controla el ancho del widget completo */
.time-sm .k-timepicker { width: 80px; }
.time-sm .k-input-inner { min-width: 0; }    /* evita que el texto empuje al botón */




.form {
    font-family: verdana, arial, sans-serif;
    /*background: -webkit-gradient(linear, left bottom, left top, from(#bbd), to(#fff));*/
    text-align: left;
}
.form label {
    width: 100px;
    float: left;
}

.form input {
    float: left;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}

.form select {
    float: left;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}

.form textarea {
    float: left;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}

form .form-field {
    display: block;   /* si lo usabas en la otra */
    height: 25px;     /* o el valor que uses normalmente */
}

form .form-field .container {
    float: left;
    width: 210px;
}

form .form-field span {
    float: left;
    width: 200px;
}



/* --- Datepicker trigger: forzar visibilidad y posición pegado al input --- */

/* 1) Evitar que la celda lo recorte (muchos layouts lo ocultan así) */
form table.table td {
    overflow: visible !important;
}

/* 2) El input no debe empujar al trigger con floats heredados */
input.hasDatepicker {
    float: none !important;
}

/* 3) El trigger (sea <img> o <button>) debe quedar como inline-block al lado del input */
input.hasDatepicker + .ui-datepicker-trigger,
input[type="text"] + .ui-datepicker-trigger {
    display: inline-block !important;
    vertical-align: middle !important;
    margin-left: 4px !important;
    float: none !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 5 !important;
}

/* 4) Si el trigger es <img>, darle tamaño y evitar “shrink to 0” por reglas globales */
input.hasDatepicker + img.ui-datepicker-trigger,
input[type="text"] + img.ui-datepicker-trigger {
    width: 22px !important;
    height: 22px !important;
    max-width: none !important;
    max-height: none !important;
    border: 0 !important;
    background: none !important;
}

/* 5) Si el trigger es <button>, limpiarlo por si algún theme lo disimula */
input.hasDatepicker + button.ui-datepicker-trigger,
input[type="text"] + button.ui-datepicker-trigger {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}