.btn {
    border-radius: 15px;
}
body
{
    font-family:"Segoe UI", Arial, sans-serif;
}

.form-control {
    border-radius: 15px;
}
.r-grid > .panel > .panel-heading {
    background-color: #41292F;

}
.panel-title{
    background-color: white;
    border-color:white;
}
.r-left .r-menu {
    font-family: "Segoe UI", Arial, sans-serif;
}
.panel-heading{
    background-color: white !important;
    border-color:white;
}
h2{
    color: #952b46;
}
body.function-login {
    background-image: url('/Documentos/images/clipart/photo/login.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.r-pretty-login-page > .r-sideimage {
    display: none !important;
}

.r-pretty-login-page {
    background: transparent !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    min-height: 100vh !important;
    padding-left: 80px !important;
}

.r-pretty-login-page > .r-controls {
    background: rgba(255, 255, 255, 0.92) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2) !important;
    padding: 40px !important;
    max-width: 380px !important;
    width: 100% !important;
}

.btn-primary {
    background-color: #972d46 !important;
    border-color: #972d46 !important;
}

.btn-primary:hover {
    background-color: #701b31 !important;
    border-color: #701b31 !important;
}

.btn-link {
    color: #972d46 !important;
}
/*=========================== */

th {
    background-color: #972D46;
    color: white;
}

/* ===================================================== */
/* BOTONES DE ACCIÓN (Editar, Ver registro, etc.) */
/* ===================================================== */


/* ===================================================== */
/* BOTONES - ABSOLUTAMENTE TODOS                         */
/* ===================================================== */

a.btn, button.btn,
a.badge,
a.btn-default, button.btn-default,
a.btn-primary, button.btn-primary,
a.btn-success, button.btn-success,
a.btn-danger, button.btn-danger,
a.btn-warning, button.btn-warning,
a.btn-info, button.btn-info,
a.btn[disabled], button.btn[disabled],
a.btn.disabled, button.btn.disabled,
fieldset[disabled] a.btn,
fieldset[disabled] button.btn {
    background-image: none !important;
    background-color: #952b46 !important;
    color: #ffffff !important;
    border-color: #952b46 !important;
    border-bottom-color: #952b46 !important;
    border-radius: 15px !important;
    opacity: 1 !important;
    transition: all 0.2s ease-in-out;
}

a.btn:hover, button.btn:hover,
a.btn:focus, button.btn:focus,
a.btn:active, button.btn:active {
    background-image: none !important;
    background-color: #F2BBCB !important;
    color: #ffffff !important;
    border-color: #F2BBCB !important;
    border-bottom-color: #F2BBCB !important;
}
.panel-primary > .panel-heading {
    background-image: none !important;
    background-color: #F2BBCB !important;
    border-color: #F2BBCB !important;
    color: #ffffff !important;
}
.navbar-form #ctlSearchFor1,
[data-itemid="simple_search"] .form-control {
    background-color: #ffffff !important;
    color: #333333 !important;
    border-color: #cccccc !important;
}
.navbar-form #ctlSearchFor1::placeholder,
[data-itemid="simple_search"] .form-control::placeholder {
    color: #333333 !important;
    opacity: 1 !important;
}
/* ===================================================== */
/* MENÚ LATERAL (.r-menu) */
/* ===================================================== */

.r-menu a {
    transition: all 0.2s ease-in-out;
    border-radius: 15px;
    background-color: transparent !important;
    color: #333333 !important;
}

/* Hover y click */
.r-menu li > a:hover,
.r-menu li > a:focus {
    background-color: #F2BBCB !important;
    color: #ffffff !important;
}

/* Item activo (módulo donde estás actualmente) */
.r-menu li.active > a,
.r-menu li > a[aria-expanded="true"] {
    background-color: #952b46 !important;
    color: #ffffff !important;
}

/* Iconos en hover */
.r-menu li > a:hover .r-menu-title,
.r-menu li > a:hover .menu-icon,
.r-menu li > a:hover .fa,
.r-menu li > a:hover .glyphicon {
    color: #ffffff !important;
}

/* Iconos en activo */
.r-menu li.active > a .r-menu-title,
.r-menu li.active > a .menu-icon,
.r-menu li.active > a .fa,
.r-menu li.active > a .glyphicon {
    color: #ffffff !important;
}


/* ===================================================== */
/* MENÚ SUPERIOR (#form_supertop_1) */
/* ===================================================== */

#form_supertop_1 a,
#form_supertop_1 .btn {
    transition: all 0.2s ease-in-out;
    border-radius: 15px;
}

#form_supertop_1 a:hover {
    background-color: #F2BBCB !important;
    color: #ffffff !important;
}

#form_supertop_1 .btn:hover,
#form_supertop_1 .dropdown-toggle:hover {
    background-color: #F2BBCB !important;
    color: #ffffff !important;
}

#form_supertop_1 .dropdown-menu > li > a:hover {
    background-color: #F2BBCB !important;
    color: #ffffff !important;
}

#form_supertop_1 a:hover .glyphicon,
#form_supertop_1 a:hover .fa,
#form_supertop_1 .btn:hover .glyphicon {
    color: #ffffff !important;
}



/* ===== MODERNIZAR LA TABLA ===== */

.rnr-gridtable td,
.rnr-gridtable th {
    font-size: 13px !important;
    padding: 8px 10px !important;
    vertical-align: middle !important;
}

.rnr-gridtable thead tr {
    background-color: #972d46 !important;
    color: white !important;
}

.rnr-gridtable thead th {
    color: white !important;
    border-color: #7a1f33 !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

.rnr-gridtable tbody tr:hover {
    background-color: #fdf0f3 !important;
}

td[data-field="nombre_proyecto"],
th[data-field="nombre_proyecto"] {
    min-width: 450px !important;
    width: auto !important;
    max-width: none !important;
    white-space: normal !important;
    padding: 15px 10px !important;
    vertical-align: middle !important;
    line-height: 1.4 !important;
}

td[data-field="objeto"] span {
    display: block !important;
    max-width: 200px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

[data-itemtype="grid_edit"] .btn,
[data-itemtype="grid_view"] .btn {
    padding: 4px 8px !important;
    font-size: 12px !important;
}

[data-logo-cell] {
    flex-grow: 0 !important;
}

[data-logo-cell] img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 5px !important;
}
.navbar,
.navbar-default,
.navbar-nav {
    background: #952b46 !important;
    border-color: #952b46 !important;
    
}

/* ══════════════════════════════════════
   CONTENEDOR PRINCIPAL (GRID)
   ══════════════════════════════════════ */
.panel-body.controlsBlock {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px 20px !important;
    align-items: start !important;
    padding: 16px 20px !important;
    border: 1.5px solid #972D46 !important;
   border-radius: 15px !important;
}

/* Distribución de Filas (Mantengo tu estructura) */
#filter_13_codigo_documento { grid-column: 1 !important; grid-row: 1 !important; }
#filter_16_estado           { grid-column: 2 !important; grid-row: 1 !important; }
#filter_18_tipo_documento   { grid-column: 3 !important; grid-row: 1 !important; }
#filter_17_vigencia         { grid-column: 4 !important; grid-row: 1 !important; }

#filter_19_nombre_proceso   { grid-column: 1 / span 2 !important; grid-row: 2 !important; }
#filter_20_nivel_proceso    { grid-column: 3 !important; grid-row: 2 !important; }
#filter_21_codigo_proceso   { grid-column: 4 !important; grid-row: 2 !important; }

#filter_14_fecha_obsoleto   { grid-column: 1 / span 2 !important; grid-row: 3 !important; }
#filter_15_fecha_aprobado   { grid-column: 3 / span 2 !important; grid-row: 3 !important; }

/* ===== Pestaña Activos y Obsoletos (ambas) ===== */
/* Primera fila */
[id^="filter_"][id$="_codigo_documento"] { grid-column: 1 !important; grid-row: 1 !important; }
[id^="filter_"][id$="_estado"]           { grid-column: 2 !important; grid-row: 1 !important; }
[id^="filter_"][id$="_tipo_documento"]   { grid-column: 3 !important; grid-row: 1 !important; }
[id^="filter_"][id$="_vigencia"]         { grid-column: 4 !important; grid-row: 1 !important; }

/* Segunda fila */
[id^="filter_"][id$="_nombre_proceso"]   { grid-column: 1 / span 2 !important; grid-row: 2 !important; }
[id^="filter_"][id$="_nivel_proceso"]    { grid-column: 3 !important; grid-row: 2 !important; }
[id^="filter_"][id$="_codigo_proceso"]   { grid-column: 4 !important; grid-row: 2 !important; }

/* Tercera fila */
[id^="filter_"][id$="_fecha_obsoleto"]   { grid-column: 1 / span 2 !important; grid-row: 3 !important; }
[id^="filter_"][id$="_fecha_aprobado"]   { grid-column: 3 / span 2 !important; grid-row: 3 !important; }
/* ══════════════════════════════════════
   ESTILOS DE INPUTS Y LABELS
   ══════════════════════════════════════ */
.panel-body.controlsBlock .form-group label {
    color: #6C3240 !important;
    font-weight: 700 !important;
    display: block !important;
    margin-bottom: 5px !important;
    border-radius: 15px !important;
}

/* Todos los controles de formulario */
.panel-body.controlsBlock .form-control {
    border: 1.5px solid #972D46 !important;
    height: 34px !important;
    box-shadow: none !important;
    border-radius: 15px !important;
}

/* ══════════════════════════════════════
   CORRECCIÓN: INPUT GROUP (FECHAS)
   ══════════════════════════════════════ */
/* Forzamos que el grupo no se rompa */
.panel-body.controlsBlock .input-group {
    display: flex !important;
    flex-wrap: nowrap !important; /* Evita que el icono se vaya abajo */
    width: 100% !important;
    margin-bottom: 5px !important;
}

/* El input dentro del grupo de fecha */
.panel-body.controlsBlock .input-group .form-control {
    border-radius: 15px 0 0 15px !important;
    border-right: none !important;
    flex: 1 1 auto !important; /* Que crezca para ocupar el espacio */
    width: 1% !important; /* Truco de Bootstrap para alineación */
    min-width: 0 !important;
}

/* El cuadro del icono del calendario */
.panel-body.controlsBlock .input-group-addon {
    background-color: #fff !important;
    border: 1.5px solid #972D46 !important;
    border-left: none !important;
    border-radius: 0 15px 15px 0 !important;
    width: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    flex-shrink: 0 !important; /* Evita que el botón se aplaste */
}

.panel-body.controlsBlock .input-group-addon .glyphicon {
    color: #972D46 !important;
}

/* Ajuste de enfoque */
.panel-body.controlsBlock .form-control:focus {
    border-color: #6C3240 !important;
    outline: none !important;
}
.panel-body.controlsBlock .form-group .r-search-field {
    margin-bottom: 8px !important; 
}

/* ══════════════════════════════════════
   ESTILOS PARA EL CALENDARIO (DATEPICKER)
   ══════════════════════════════════════ */

/* Hover sobre los días (Números) */
.datepicker table tr td.day:hover,
.datepicker table tr td.day.focused {
    background-color: #972D46 !important; /* Fondo Vinotinto */
    color: #fff !important;               /* Texto Blanco */
    border-radius: 4px !important;
}

/* El día seleccionado (Active) */
.datepicker table tr td.active, 
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled, 
.datepicker table tr td.active.disabled:hover {
    background-color: #972D46 !important;
    background-image: none !important;    /* Quita degradados de Bootstrap */
    color: #fff !important;
    text-shadow: none !important;
}

/* El día de hoy (Today) */
.datepicker table tr td.today {
    border-bottom-color: #972D46 !important;
}

.datepicker table tr td.today:hover {
    background-color: #e2c0c8 !important; /* Un vinotinto muy claro para el hoy al pasar el mouse */
    color: #000 !important;
}

/* Iconos de flechas y botones de limpiar/hoy al pie del calendario */
.datepicker .datepicker-switch:hover, 
.datepicker .prev:hover, 
.datepicker .next:hover, 
.datepicker tfoot tr th:hover {
    background-color: #f5f5f5 !important;
    color: #972D46 !important;
}

/* ══════════════════════════════════════
   ESTILO PARA PESTAÑAS (TABS)
   ══════════════════════════════════════ */

/* 1. PESTAÑA INACTIVA (El color base que ves en azul) */
.nav-tabs > li > a {
    background-color: #F2BBCB !important; /* El rosado claro que pediste */
    color: #972D46 !important;           /* Texto en vinotinto para que se lea bien */
    border: 1px solid #e2aab9 !important; /* Un borde sutil apenas más oscuro que el rosa */
    border-bottom: none !important;
    transition: all 0.3s ease;
}

/* 2. PESTAÑA ACTIVA (Donde estás parado) */
.nav-tabs > li.active > a, 
.nav-tabs > li.active > a:hover, 
.nav-tabs > li.active > a:focus {
    color: #ffffff !important;           /* Texto blanco */
    background-color: #972D46 !important; /* Fondo Vinotinto */
    border: 1px solid #972D46 !important;
    border-bottom-color: transparent !important;
}

/* 3. EFECTO HOVER (Cuando pasas el mouse sobre la inactiva) */
.nav-tabs > li > a:hover {
    background-color: #e2aab9 !important; /* Un rosa un poquito más fuerte al pasar el mouse */
    color: #6C3240 !important;
    border-color: #e2aab9 !important;
}