/* ==========================================================================
   Tema institucional — Sistema PQRSF
   Capa de estilo cargada DESPUES de sb-admin-2.min.css / Bootstrap.
   No reemplaza esos archivos: los sobreescribe visualmente.
   ========================================================================== */

:root {
    --azul-oscuro:    #0B3D5C;
    --azul-principal: #185FA5;
    --azul-principal-hover: #144E88;
    --celeste:        #2E86C1;
    --celeste-bg:     #E6F1FB;
    --verde:          #1E8449;
    --verde-hover:    #186938;
    --verde-bg:       #E8F6EE;
    --amarillo:       #C77700;
    --amarillo-bg:    #FFF4E0;
    --rojo:           #C0392B;
    --rojo-hover:     #A5301F;
    --rojo-bg:        #FBEAEA;
    --gris-azulado:   #6B7C93;
    --gris-borde:     #DCE4EE;
    --tabla-borde:    #E9EEF5;
    --tabla-borde-fila: #C7D4E3;
    --tabla-header-bg: #CFE3F7;
    --fondo-app:      #F4F7FB;
    --radio-borde:    12px;
    --radio-borde-sm: 8px;
    --sombra-suave:   0 2px 10px rgba(11,61,92,0.06);
    --sombra-media:   0 6px 20px rgba(11,61,92,0.10);
}

/* ---------- Tipografia ---------- */

body {
    font-family: 'Poppins', 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    background-color: var(--fondo-app);
    color: #3a3b45;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Poppins', 'Nunito', sans-serif;
    font-weight: 700;
    color: var(--azul-oscuro);
}

.text-gray-800 { color: var(--azul-oscuro) !important; }
.text-gray-600 { color: var(--gris-azulado) !important; }
.text-primary  { color: var(--azul-principal) !important; }
.text-success  { color: var(--verde) !important; }
.text-danger   { color: var(--rojo) !important; }
.text-warning  { color: var(--amarillo) !important; }
.text-info     { color: var(--celeste) !important; }

a { color: var(--azul-principal); }
a:hover { color: var(--azul-principal-hover); }

/* Etiquetas pequenas tipo "campo" en mayusculas */
.sidebar-heading,
.card-header h6,
.collapse-header,
label {
    letter-spacing: 0.03em;
}

/* ---------- Fondo general ---------- */

#content-wrapper {
    background-color: var(--fondo-app);
}

/* ---------- Tarjetas ---------- */

.card {
    border: none;
    border-radius: var(--radio-borde);
    box-shadow: var(--sombra-suave);
}

.card-header {
    background-color: #fff;
    border-bottom: 1px solid var(--gris-borde);
    border-top-left-radius: var(--radio-borde) !important;
    border-top-right-radius: var(--radio-borde) !important;
}

.card-header h6,
.card-header .m-0 {
    color: var(--azul-oscuro) !important;
    font-weight: 600;
}

.card.shadow,
.card.shadow-lg {
    box-shadow: var(--sombra-suave) !important;
}

/* Icono circular de tarjeta tipo indicador */
.icon-circle {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--celeste-bg);
    color: var(--azul-principal);
    font-size: 1.1rem;
}
.icon-circle.icon-circle-success { background-color: var(--verde-bg); color: var(--verde); }
.icon-circle.icon-circle-warning { background-color: var(--amarillo-bg); color: var(--amarillo); }
.icon-circle.icon-circle-danger  { background-color: var(--rojo-bg); color: var(--rojo); }

/* ---------- Sidebar ---------- */

.sidebar {
    background: linear-gradient(180deg, var(--azul-oscuro) 0%, var(--azul-principal) 100%) !important;
}

.sidebar .sidebar-brand {
    color: #fff;
    font-weight: 700;
    padding: 1.3rem 1rem;
}

.sidebar .sidebar-brand-icon img {
    border-radius: var(--radio-borde-sm);
    padding: 4px;
}

.sidebar hr.sidebar-divider {
    border-top: 1px solid rgba(255,255,255,0.12);
    margin: 0.5rem 1rem;
}

.sidebar .sidebar-heading {
    color: rgba(255,255,255,0.55);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.sidebar .nav-item {
    margin: 2px 0.75rem;
}

.sidebar .nav-item .nav-link,
.sidebar .nav-item .nav-link span {
    color: rgba(255,255,255,0.92);
}

.sidebar .nav-item .nav-link {
    border-radius: var(--radio-borde-sm);
    padding: 0.75rem 1rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar .nav-item .nav-link:hover {
    background-color: rgba(255,255,255,0.12);
}

.sidebar .nav-item.active .nav-link,
.sidebar .nav-item .nav-link[aria-expanded="true"] {
    background-color: rgba(255,255,255,0.16);
}

.sidebar .nav-item .nav-link i {
    color: rgba(255,255,255,0.85);
}

/* Submenu desplegado: tarjeta blanca, texto azul */
.sidebar .collapse-inner,
.sidebar .collapsing .collapse-inner {
    border-radius: var(--radio-borde-sm);
    box-shadow: var(--sombra-media);
    padding: 0.5rem 0;
}

.sidebar .collapse-inner .collapse-header {
    color: var(--gris-azulado);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0.4rem 1rem;
}

.sidebar .collapse-inner .collapse-item {
    color: #3a3b45;
    border-radius: var(--radio-borde-sm);
    margin: 0 0.5rem;
    padding: 0.55rem 0.85rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar .collapse-inner .collapse-item:hover {
    background-color: var(--celeste-bg);
    color: var(--azul-principal);
}

.sidebar .collapse-inner .collapse-item.active {
    background-color: var(--celeste-bg);
    color: var(--azul-principal);
    font-weight: 600;
}

/* ---------- Topbar ---------- */

.topbar {
    background-color: #fff !important;
    box-shadow: var(--sombra-suave) !important;
    min-height: 4.375rem;
}

.topbar .topbar-title {
    color: var(--azul-oscuro);
    font-weight: 700;
    font-size: 1.05rem;
    margin: 0;
    margin-right: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar .topbar-divider {
    border-right: 1px solid var(--gris-borde);
}

.topbar .img-profile {
    border: 2px solid var(--celeste-bg);
}

.topbar .sesion {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--verde) !important;
}

/* ---------- Botones ---------- */

.btn {
    border-radius: var(--radio-borde-sm);
    font-weight: 600;
    padding: 0.5rem 1.15rem;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.btn-primary {
    background-color: var(--azul-principal);
    border-color: var(--azul-principal);
    box-shadow: 0 2px 6px rgba(24,95,165,0.25);
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--azul-principal-hover);
    border-color: var(--azul-principal-hover);
}

.btn-success {
    background-color: var(--verde);
    border-color: var(--verde);
    box-shadow: 0 2px 6px rgba(30,132,73,0.25);
}
.btn-success:hover,
.btn-success:focus {
    background-color: var(--verde-hover);
    border-color: var(--verde-hover);
}

.btn-danger {
    background-color: var(--rojo);
    border-color: var(--rojo);
    box-shadow: 0 2px 6px rgba(192,57,43,0.2);
}
.btn-danger:hover,
.btn-danger:focus {
    background-color: var(--rojo-hover);
    border-color: var(--rojo-hover);
}

.btn-outline-primary {
    color: var(--azul-principal);
    border-color: var(--azul-principal);
    background-color: #fff;
}
.btn-outline-primary:hover {
    background-color: var(--celeste-bg);
    color: var(--azul-principal-hover);
    border-color: var(--azul-principal);
}

.btn-secondary,
.btn-light {
    background-color: #fff;
    border-color: var(--gris-borde);
    color: var(--gris-azulado);
}
.btn-secondary:hover,
.btn-light:hover {
    background-color: var(--fondo-app);
    color: var(--azul-oscuro);
}

.btn-warning {
    background-color: var(--amarillo-bg);
    border-color: var(--amarillo-bg);
    color: var(--amarillo);
}
.btn-warning:hover {
    background-color: #FFE9BF;
    color: var(--amarillo);
}

/* Boton de accion pequeno tipo "chip" ya existente (.btn-add-estado) hereda paleta nueva */
.btn-add-estado {
    background: var(--celeste-bg) !important;
    color: var(--azul-principal) !important;
}
.btn-add-estado:hover { background: #d3e7f9 !important; }

/* ---------- Botones de accion en tabla (.btn-tbl ya existentes) ---------- */

.btn-tbl-edit { color: var(--azul-principal) !important; }
.btn-tbl-edit:hover { background: var(--celeste-bg) !important; border-color: var(--azul-principal) !important; }
.btn-tbl-del { color: var(--rojo) !important; }
.btn-tbl-del:hover { background: var(--rojo-bg) !important; border-color: var(--rojo) !important; }

/* ---------- Tablas / DataTables ---------- */

.table-responsive {
    border-radius: var(--radio-borde);
}

table.dataTable thead th,
table.table thead th {
    background-color: var(--tabla-header-bg) !important;
    color: var(--azul-oscuro);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    border: 1px solid var(--tabla-borde) !important;
    border-top: none !important;
}

table.dataTable tbody td,
table.table tbody td {
    vertical-align: middle;
    font-size: 0.85rem;
    border: 1px solid var(--tabla-borde) !important;
    border-top: none !important;
    border-bottom: 1px solid var(--tabla-borde-fila) !important;
}

table.dataTable tbody tr:hover td,
table.table tbody tr:hover td {
    background-color: var(--fondo-app);
}

table.dataTable,
table.table {
    border-collapse: collapse !important;
}

table.dataTable.table-bordered,
table.table.table-bordered {
    border: 1px solid var(--tabla-borde) !important;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio-borde-sm);
    padding: 0.3rem 0.6rem;
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    outline: none;
    border-color: var(--azul-principal);
    box-shadow: 0 0 0 3px var(--celeste-bg);
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    color: var(--gris-azulado);
    font-size: 0.82rem;
}

.dataTables_wrapper .paginate_button {
    border-radius: var(--radio-borde-sm) !important;
    margin: 0 2px;
}

.dataTables_wrapper .paginate_button.current,
.dataTables_wrapper .paginate_button.current:hover {
    background: var(--azul-principal) !important;
    border-color: var(--azul-principal) !important;
    color: #fff !important;
}

.dataTables_wrapper .paginate_button:hover:not(.current) {
    background: var(--celeste-bg) !important;
    border-color: var(--celeste-bg) !important;
    color: var(--azul-principal) !important;
}

/* Filas de riesgo/estado: version tinte-claro en vez de color solido */
.green-row  { background-color: var(--verde-bg) !important; color: var(--verde) !important; }
.yellow-row { background-color: var(--amarillo-bg) !important; color: var(--amarillo) !important; }
.red-row    { background-color: var(--rojo-bg) !important; color: var(--rojo) !important; }
.violet-row { background-color: #F1EEFB !important; color: #6C4CC4 !important; }

/* ---------- Badges / estados tipo capsula ---------- */

.badge {
    border-radius: 20px;
    font-weight: 600;
    padding: 0.35em 0.85em;
    font-size: 0.72rem;
}

/* Estados especificos del modulo de quejas (ya existian, se re-tematizan) */
.badge-recepcion     { background: var(--celeste-bg); color: var(--azul-principal); }
.badge-lider         { background: #EEEDFE; color: #534AB7; }
.badge-proceso       { background: var(--amarillo-bg); color: var(--amarillo); }
.badge-felicitacion  { background: var(--verde-bg); color: var(--verde); }
.badge-cerrado       { background: var(--celeste-bg); color: var(--celeste); }

/* Set generico reutilizable en cualquier modulo */
.badge-activo,
.badge-finalizado    { background: var(--verde-bg); color: var(--verde); }
.badge-pendiente     { background: var(--amarillo-bg); color: var(--amarillo); }
.badge-rechazado     { background: var(--rojo-bg); color: var(--rojo); }
.badge-en-proceso    { background: var(--celeste-bg); color: var(--azul-principal); }
.badge-inactivo      { background: #EDEFF3; color: var(--gris-azulado); }

/* Variantes estandar de Bootstrap, re-tematizadas para que todo badge de la app use la misma paleta pastel */
.badge-primary   { background: var(--celeste-bg) !important; color: var(--azul-principal) !important; }
.badge-secondary { background: #EDEFF3 !important; color: var(--gris-azulado) !important; }
.badge-success   { background: var(--verde-bg) !important; color: var(--verde) !important; }
.badge-danger    { background: var(--rojo-bg) !important; color: var(--rojo) !important; }
.badge-warning   { background: var(--amarillo-bg) !important; color: var(--amarillo) !important; }
.badge-info      { background: var(--celeste-bg) !important; color: var(--celeste) !important; }
.badge-light     { background: #EDEFF3 !important; color: var(--gris-azulado) !important; }
.badge-dark      { background: var(--azul-oscuro) !important; color: #fff !important; }

/* Chip de alerta suelto (dias transcurridos, etc.) reutiliza los tonos de .green-row/.yellow-row/.red-row/.violet-row */
.chip-alerta {
    display: inline-block;
    padding: 0.3em 0.85em;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    margin-bottom: 0.6rem;
}

/* ---------- Tarjeta de servicio/lider (columna "Servicios" de la tabla de quejas) ---------- */

.servicio-card {
    text-align: left;
    background: var(--celeste-bg);
    border: 1px solid #CFE4F7;
    border-radius: var(--radio-borde-sm);
    padding: 0.65rem 0.8rem;
    margin-bottom: 0.6rem;
}

.servicio-card-servicio {
    color: var(--azul-oscuro);
    font-weight: 700;
    font-size: 0.82rem;
}

.servicio-card-lider {
    color: var(--azul-principal);
    font-weight: 600;
    font-size: 0.76rem;
    margin-top: 0.15rem;
}

.servicio-card-lider i {
    margin-right: 0.3rem;
}

.servicio-card-meta {
    color: var(--gris-azulado);
    font-size: 0.72rem;
    margin-top: 0.3rem;
}

.servicio-card-meta strong {
    color: #3a3b45;
    font-weight: 600;
}

.servicio-card-actions {
    margin-top: 0.5rem;
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.servicio-card-actions:empty {
    display: none;
}

.servicio-card-status {
    margin-top: 0.5rem;
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.servicio-card-status:empty {
    display: none;
    margin-top: 0;
}

/* ---------- Encabezado de pagina: titulo + accion principal en una sola linea ---------- */

.page-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.page-header-row h1,
.page-header-row .h3 {
    margin-bottom: 0;
}

/* ---------- Grupo de botones de la columna "Acciones" en tablas ---------- */

.acciones-stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
    min-width: 148px;
}

.acciones-stack .btn {
    width: 100%;
    border-radius: var(--radio-borde-sm);
    font-size: 0.74rem;
    font-weight: 600;
    padding: 0.4rem 0.7rem;
    box-shadow: none;
    white-space: nowrap;
}

/* ---------- Formularios ---------- */

label {
    color: var(--azul-oscuro);
    font-weight: 600;
    font-size: 0.82rem;
    margin-bottom: 0.4rem;
}

.form-control,
.form-control-user,
select.form-control,
.bootstrap-select .dropdown-toggle,
.select2-container--default .select2-selection--single {
    border: 1px solid var(--gris-borde) !important;
    border-radius: var(--radio-borde-sm) !important;
    background-color: #fff;
}

.form-control:focus,
.form-control-user:focus,
select.form-control:focus {
    border-color: var(--azul-principal) !important;
    box-shadow: 0 0 0 3px var(--celeste-bg) !important;
}

.invalid-feedback,
.text-danger.small {
    color: var(--rojo) !important;
}

.form-text,
small.form-text {
    color: var(--gris-azulado);
}

.form-group {
    margin-bottom: 1.15rem;
}

/* ---------- Modales ---------- */

.modal-content {
    border: none;
    border-radius: var(--radio-borde);
    box-shadow: var(--sombra-media);
}

.modal-header {
    border-bottom: 1px solid var(--gris-borde);
    border-top-left-radius: var(--radio-borde);
    border-top-right-radius: var(--radio-borde);
}

.modal-header .modal-title {
    color: var(--azul-oscuro);
    font-weight: 700;
}

.modal-footer {
    border-top: 1px solid var(--gris-borde);
}

.modal-hdr-icon {
    background: var(--celeste-bg) !important;
    color: var(--azul-principal) !important;
}

/* ---------- Scroll to top / varios ---------- */

.scroll-to-top {
    background-color: var(--azul-principal);
}
.scroll-to-top:hover {
    background-color: var(--azul-principal-hover);
}

.dropdown-menu {
    border: none;
    border-radius: var(--radio-borde-sm);
    box-shadow: var(--sombra-media);
}

.dropdown-item:active,
.dropdown-item:hover {
    background-color: var(--celeste-bg);
    color: var(--azul-principal);
}

hr {
    border-top-color: var(--gris-borde);
}

/* ---------- Login / auth ---------- */

.login-card {
    border: none;
    border-radius: var(--radio-borde);
    box-shadow: var(--sombra-media);
    overflow: hidden;
}