/* =========================================================
   RESET MÍNIMO + BASE ORIGINAL
   ========================================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: "Oswald", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    color: #212529;
    background: #f6f7fb;
    min-height: 100vh;
    /* evita scroll lateral de la página; el scroll horizontal vivirá dentro de la tabla */
    overflow-x: hidden !important;
}

/* ===== Layout: CLAVE para que el contenido (tablas) pueda encoger dentro del flex ===== */
.d-flex > main {
    min-width: 0;        /* <-- sin esto, el main no “encoge” y el scroll se rompe */
    overflow-x: clip;    /* evita “sangrados” visuales laterales */
    min-height: calc(100vh - 56px);
}

/* ===== Tablas base ===== */
table.table {
    background: #fff;
}

.table thead th {
    font-weight: 700;
    vertical-align: middle;
    border-bottom-width: 2px;
    white-space: nowrap; /* cabeceras compactas */
}

.table tbody td {
    vertical-align: middle;
}

.table td .btn {
    white-space: nowrap; /* acciones sin romper filas */
}

/* ===== DataTables: scroll horizontal fiable ===== */
.dataTables_wrapper .dataTables_scrollHead {
    overflow: hidden;
}

.dataTables_wrapper .dataTables_scrollHead table {
    margin: 0 !important;
}

.dataTables_wrapper .dataTables_scrollBody {
    overflow-x: auto !important; /* <- barra horizontal vive aquí */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* scroll suave en móviles */
}

.dataTables_wrapper .dataTables_scrollBody table {
    margin: 0 !important;
}

/* Borde/estética del contenedor de scroll (opcional) */
.dataTables_wrapper .dataTables_scroll {
    border: 1px solid #e9ecef;
    border-radius: .5rem;
    background: #fff;
}

/* Si usas clase .nowrap en tu <table>, no cortes celdas horizontalmente */
table.nowrap th,
table.nowrap td {
    white-space: nowrap;
}

/* (Opcional) sticky header cuando añadas .table-sticky al <table> */
.table-sticky thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
}

/* ===== Modales: cuando abres, que no se “rompa” el ancho de la tabla */
.modal.show .dataTables_wrapper .dataTables_scrollBody {
    width: 100% !important;
}

/* ===== Paginación propia (server-side) ===== */
.pagination .page-link {
    border-radius: .5rem;
}

.pagination .page-item + .page-item .page-link {
    margin-left: .35rem;
}

/* ===== Utilidades ===== */
.table-wrap {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: .75rem;
    padding: .5rem;
}

/* Tipografías fluidas para títulos (opcional) */
h1,
.h1 {
    font-size: clamp(1.25rem, 2.2vw + 1rem, 2rem);
}

h2,
.h2 {
    font-size: clamp(1.125rem, 1.8vw + .9rem, 1.6rem);
}

/* ===== Print (si exportas a PDF por html2canvas/jspdf) ===== */
@media print {
    body {
        background: #fff;
    }

    .navbar,
    .sidebar,
    .btn,
    .pagination,
    .alert {
        display: none !important;
    }

    main {
        padding: 0 !important;
    }

    .dataTables_wrapper .dataTables_scrollBody {
        overflow: visible !important;
    }
}

.select-sm-text {
    font-size: 0.85rem;
}
.select-sm-text.form-select {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

/* =========================================================
   TEMA INSTITUCIONAL GLOBAL (OSINERGMIN STYLE)
   ========================================================= */

/* Paleta global */
:root {
    --primary-blue: #003d82;
    --secondary-blue: #0066cc;
    --light-blue: #e8f4ff;
    --accent-blue: #4a90e2;
    --success-green: #28a745;
    --warning-orange: #fd7e14;
    --danger-red: #dc3545;
    --gray-50: #f8f9fa;
    --gray-100: #e9ecef;
    --gray-200: #dee2e6;
    --gray-600: #6c757d;
    --text-dark: #2c3e50;
}

/* Flash messages mejoradas */
.alert-flash {
    border-left: 4px solid var(--secondary-blue);
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

/* =========================================================
   COMPONENTES GENERALES (ENCABEZADOS, BOTONES, PAGINACIÓN)
   ========================================================= */

/* Encabezados de páginas tipo módulo (Necesidades, Procedimientos, etc.) */
.page-header-proc {
    background: #ffffff;
    border-bottom: 3px solid var(--primary-blue);
    padding: 1.25rem 0 1rem 0;
    margin-bottom: 1.5rem;
}

.page-header-proc h3 {
    color: var(--primary-blue);
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.page-header-proc h3 i {
    font-size: 1.3rem;
    color: var(--primary-blue);
}

.page-header-subtitle {
    font-size: .85rem;
    color: var(--gray-600);
}

.page-header-subtitle span + span {
    margin-left: .75rem;
}

/* Botones azules principales */
.btn-add-general,
.btn-add-especifico {
    background: var(--secondary-blue);
    border-color: var(--secondary-blue);
    color: #ffffff;
    font-weight: 600;
    border-radius: 999px;
    padding-inline: 1.3rem;
}

.btn-add-general:hover,
.btn-add-especifico:hover {
    background: #0052a3;
    border-color: #0052a3;
    color: #ffffff;
}

/* Botón volver outline */
.btn-back-outline {
    border-radius: 999px;
    font-weight: 500;
}

/* Cards de filtros */
.filters-card {
    border: 1px solid var(--gray-100);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    margin-bottom: 1.5rem;
}

.filters-card .card-header {
    border-bottom: 1px solid var(--gray-100);
    font-weight: 700;
    color: var(--text-dark);
    background: #fbfbfb;
    font-size: .9rem;
}

.filters-card .card-header i {
    color: var(--primary-blue);
}

.filters-card label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.filters-card .form-control,
.filters-card .form-select {
    border-radius: 999px;
    border-color: var(--gray-200);
    font-size: .9rem;
    padding-inline: 1rem;
    background-color: #ffffff;
}

.filters-card .form-control:focus,
.filters-card .form-select:focus {
    border-color: var(--secondary-blue);
    box-shadow: 0 0 0 0.15rem rgba(0,102,204,0.25);
}

/* Botones de filtros */
.filters-card .btn-filter {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    color: #ffffff;
    font-weight: 600;
    padding-inline: 1.7rem;
    border-radius: 999px;
}

.filters-card .btn-filter:hover {
    background: #002c5e;
    border-color: #002c5e;
}

.filters-card .btn-clear {
    border-radius: 999px;
    font-size: .8rem;
    padding-inline: 1rem;
}

/* Cards de listado */
.list-card {
    border-radius: 12px;
    border: 1px solid var(--gray-100);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    overflow: hidden;
}

.list-card .card-header {
    background: var(--light-blue);
    border-bottom: 1px solid var(--gray-100);
    font-weight: 700;
    color: var(--primary-blue);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.list-card .card-header small {
    font-size: .8rem;
    color: var(--gray-600);
}

/* Tablas especializadas de módulos */
.table-proc {
    margin-bottom: 0;
    font-size: .9rem;
}

.table-proc thead {
    background: var(--primary-blue);
    color: #ffffff;
}

.table-proc thead th {
    border-bottom: none;
    font-weight: 600;
    white-space: nowrap;
}

.table-proc tbody tr:nth-child(even) {
    background: #fdfdfd;
}

.table-proc tbody tr:hover {
    background: #eef5ff;
}

.table-proc td,
.table-proc th {
    vertical-align: middle;
}

/* Botones pequeños de acción */
.actions-cell {
    white-space: nowrap;
}

.btn-action-sm {
    border-radius: 999px;
    font-size: .78rem;
    padding-inline: .7rem;
}

.btn-action-sm + .btn-action-sm {
    margin-left: .25rem;
}

/* Badges */
.badge-especificos {
    background: var(--secondary-blue);
    font-weight: 600;
    padding: .35rem .6rem;
    border-radius: 999px;
}

/* Paginación – override al básico de arriba */
.pagination .page-link {
    color: var(--primary-blue);
    font-weight: 500;
    border-radius: 999px;
    border-color: transparent;
}

.pagination .page-link:hover {
    background-color: var(--light-blue);
    border-color: transparent;
}

.pagination .page-item.active .page-link {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    color: #ffffff;
}

.pagination .page-item.disabled .page-link {
    color: var(--gray-600);
    background-color: #f8f9fa;
}

.pagination-summary {
    color: var(--gray-600);
    font-size: .85rem;
}

/* Contenedores de módulos concretos */
.procedimientos-container {
    max-width: 1200px;
}

/* =========================================================
   VISTA: NECESIDADES / ENTREGABLES (GESTIÓN DE NECESIDADES)
   ========================================================= */

/* Tarjetas superiores de información */
.info-cards-top .card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    border-left: 4px solid var(--secondary-blue);
}

.info-cards-top .card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    transform: translateY(-3px);
}

.info-cards-top .card-body strong {
    color: var(--primary-blue);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-cards-top .card-body p:last-child {
    color: var(--text-dark);
    font-weight: 500;
    font-size: 0.95rem;
}

/* Tarjetas de necesidad */
.needs-grid-custom {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.need-card-custom {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    border-left: 5px solid transparent;
}

.need-card-custom:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    transform: translateY(-2px);
}

.need-card-custom.estado-planificado {
    border-left-color: #ffc107;
}

.need-card-custom.estado-proceso {
    border-left-color: var(--secondary-blue);
}

.need-card-custom.estado-contratado {
    border-left-color: var(--success-green);
}

/* Header de tarjeta de necesidad */
.need-header-custom {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--gray-100);
    gap: 1rem;
}

.need-description-custom {
    flex: 1;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--text-dark);
    line-height: 1.5;
}

.need-badge-custom {
    padding: 0.5rem 1.25rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.badge-planificado {
    background: #fff3cd;
    color: #856404;
}

.badge-proceso {
    background: var(--light-blue);
    color: var(--primary-blue);
}

.badge-contratado {
    background: #d4edda;
    color: #155724;
}

/* Timeline visual de progreso */
.progress-timeline-custom {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    position: relative;
    background: var(--gray-50);
    padding: 1rem;
    border-radius: 10px;
}

.timeline-step-custom {
    flex: 1;
    text-align: center;
    position: relative;
}

.timeline-dot-custom {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 0 auto 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 3px solid var(--gray-100);
    color: var(--gray-600);
    font-weight: 700;
    position: relative;
    z-index: 2;
    transition: all 0.3s;
}

.timeline-dot-custom i {
    font-size: 1.2rem;
}

.timeline-dot-custom.active {
    background: var(--secondary-blue);
    color: white;
    border-color: var(--secondary-blue);
    box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.2);
    transform: scale(1.1);
}

.timeline-dot-custom.completed {
    background: var(--success-green);
    color: white;
    border-color: var(--success-green);
}

.timeline-label-custom {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 0.25rem;
}

.timeline-label-custom.active {
    color: var(--primary-blue);
}

.timeline-info-custom {
    font-size: 0.75rem;
    color: var(--gray-600);
    font-weight: 500;
}

.timeline-line-custom {
    position: absolute;
    top: 20px;
    left: 16.66%;
    right: 16.66%;
    height: 4px;
    background: var(--gray-100);
    z-index: 1;
}

/* Grid de información en necesidad */
.need-info-grid-custom {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.info-item-custom {
    background: var(--gray-50);
    padding: 0.9rem;
    border-radius: 8px;
    border-left: 3px solid var(--secondary-blue);
}

.info-label-custom {
    font-size: 0.7rem;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.4rem;
    font-weight: 700;
}

.info-value-custom {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-blue);
}

.info-value-custom small {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--gray-600);
    margin-top: 0.35rem;
}

/* Acciones en necesidad */
.need-actions-custom {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.action-btn-custom {
    flex: 1;
    min-width: 160px;
    padding: 0.75rem 1.25rem;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.action-btn-custom:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

.action-btn-custom i {
    font-size: 1.1rem;
}

/* Botones específicos en necesidad */
.btn-aprobar-custom {
    background: var(--success-green);
    color: white;
}
.btn-aprobar-custom:hover {
    background: #218838;
}

.btn-cambiar-proc-custom {
    background: var(--secondary-blue);
    color: white;
}
.btn-cambiar-proc-custom:hover {
    background: #0052a3;
}

.btn-editar-custom {
    background: var(--warning-orange);
    color: white;
}
.btn-editar-custom:hover {
    background: #e56b0c;
}

.btn-proceso-custom {
    background: var(--secondary-blue);
    color: white;
}
.btn-proceso-custom:hover {
    background: #0052a3;
}

.btn-contratado-custom {
    background: var(--success-green);
    color: white;
}
.btn-contratado-custom:hover {
    background: #218838;
}

.btn-revertir-custom {
    background: var(--gray-600);
    color: white;
}
.btn-revertir-custom:hover {
    background: #5a6268;
}

/* Sección de entregables mejorada */
.deliverables-section-custom {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    margin-top: 2rem;
    border-top: 4px solid var(--primary-blue);
}

.deliverables-title-custom {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--primary-blue);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.deliverables-title-custom i {
    font-size: 1.6rem;
}

.deliverables-actions-custom {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.deliverable-btn-custom {
    padding: 1.5rem;
    border-radius: 12px;
    border: 2px solid var(--gray-100);
    background: white;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.deliverable-btn-custom:hover {
    border-color: var(--secondary-blue);
    background: var(--light-blue);
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.deliverable-icon-custom {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    flex-shrink: 0;
}

.icon-edit-custom {
    background: #fff3cd;
    color: #856404;
}

.icon-add-custom {
    background: var(--light-blue);
    color: var(--primary-blue);
}

.icon-view-custom {
    background: #d4edda;
    color: #155724;
}

.deliverable-content-custom h4 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary-blue);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.deliverable-content-custom p {
    margin: 0.35rem 0 0 0;
    font-size: 0.85rem;
    color: var(--gray-600);
}

/* Estado vacío genérico */
.empty-state-custom {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--gray-600);
}

.empty-state-custom i {
    font-size: 4rem;
    opacity: 0.3;
    margin-bottom: 1rem;
    color: var(--primary-blue);
}

.empty-state-custom p {
    font-size: 1.1rem;
    font-weight: 500;
}

/* Responsive necesidades */
@media (max-width: 768px) {
    .need-header-custom {
        flex-direction: column;
        gap: 1rem;
    }

    .need-badge-custom {
        align-self: flex-start;
    }

    .need-actions-custom {
        flex-direction: column;
    }

    .action-btn-custom {
        width: 100%;
        min-width: auto;
    }

    .progress-timeline-custom {
        flex-direction: column;
        align-items: stretch;
    }

    .timeline-step-custom {
        display: flex;
        align-items: center;
        text-align: left;
        gap: 1rem;
    }

    .timeline-dot-custom {
        margin: 0;
    }

    .timeline-line-custom {
        display: none;
    }

    .page-header-proc .d-flex {
        flex-direction: column;
        align-items: flex-start;
        gap: .75rem;
    }

    .actions-cell {
        white-space: normal;
    }
}


/* =========================================================
   VISTA: ADMIN - PLANES DE ACCIÓN (views/admin/planes.hbs)
   ========================================================= */

/* Título y botón volver */
.container.mt-3 > h1.mb-4 {
  color: var(--primary-blue);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: .5rem;
  border-bottom: 3px solid var(--primary-blue);
  padding-bottom: .5rem;
  margin-bottom: 1.25rem;
}

.container.mt-3 > button.btn-secondary.mb-4 {
  border-radius: 999px;
  font-weight: 500;
  padding-inline: 1.1rem;
  border-color: var(--primary-blue);
  color: var(--primary-blue);
  background-color: #ffffff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.container.mt-3 > button.btn-secondary.mb-4:hover {
  background-color: var(--light-blue);
  border-color: var(--primary-blue);
  color: var(--primary-blue);
}

/* Sidebar de filtros (col izquierda) */
.container.mt-3 .col-12.col-md-3.mb-4.border.shadow.p-4 {
  border: 1px solid var(--gray-100) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
  border-radius: 12px;
  background: #ffffff;
}

.container.mt-3 .col-12.col-md-3.mb-4.border.shadow.p-4 .form-label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: .4px;
}

/* Selects de Gerencia / División / POIM */
#gerencia,
#division,
#poim {
  border-radius: 999px;
  border-color: var(--gray-200);
  font-size: .9rem;
  padding-inline: 1rem;
  background-color: #ffffff;
}

#gerencia:focus,
#division:focus,
#poim:focus {
  border-color: var(--secondary-blue);
  box-shadow: 0 0 0 0.15rem rgba(0,102,204,0.25);
}

/* Botón "Nuevo Plan" */
#add-plan-btn {
  border-radius: 999px;
  font-weight: 600;
  padding-block: .6rem;
  background: var(--success-green);
  border-color: var(--success-green);
}

#add-plan-btn:hover:enabled {
  background: #218838;
  border-color: #218838;
}

#add-plan-btn:disabled {
  opacity: .7;
  cursor: not-allowed;
}

/* Tabla de planes */
#planesTable {
  font-size: .9rem;
}

#planesTable thead {
  background: var(--primary-blue);
  color: #ffffff;
}

#planesTable thead th {
  border-bottom: none;
  font-weight: 600;
}

#planesTable tbody tr:nth-child(even) {
  background: #fdfdfd;
}

#planesTable tbody tr:hover {
  background: #eef5ff;
}

/* Columna de acciones más compacta */
#planesTable td:last-child {
  white-space: nowrap;
}

/* Responsive pequeño ajuste */
@media (max-width: 768px) {
  .container.mt-3 > h1.mb-4 {
    font-size: 1.2rem;
  }
}

/* =========================================================
   VISTA: ADMIN - PLANES DE ACCIÓN (mejorada)
   ========================================================= */

.planes-container {
  max-width: 1200px;
}

/* Título */
.planes-container > h1.mb-4 {
  color: var(--primary-blue);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: .6rem;
  border-bottom: 3px solid var(--primary-blue);
  padding-bottom: .6rem;
  margin-bottom: 1.5rem;
}

/* Botón Volver */
.planes-container > button.btn-secondary.mb-4 {
  border-radius: 999px;
  font-weight: 500;
  padding-inline: 1.2rem;
  border-color: var(--primary-blue);
  color: var(--primary-blue);
  background-color: #ffffff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.planes-container > button.btn-secondary.mb-4:hover {
  background-color: var(--light-blue);
  border-color: var(--primary-blue);
  color: var(--primary-blue);
}

/* ===== Sidebar: tarjeta filtros ===== */
.planes-sidebar-card {
  border: 1px solid var(--gray-100);
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  border-radius: 16px;
  background: #ffffff;
  padding: 1.75rem 1.75rem 1.5rem;
}

.planes-sidebar-card .form-label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: .45px;
}

/* Selects “pill” */
.planes-sidebar-card .form-select {
  border-radius: 999px;
  border-color: var(--gray-200);
  font-size: .9rem;
  padding-inline: 1.1rem;
  padding-top: .5rem;
  padding-bottom: .5rem;
  background-color: #fdfdfd;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}

.planes-sidebar-card .form-select:focus {
  border-color: var(--secondary-blue);
  box-shadow: 0 0 0 0.15rem rgba(0,102,204,0.25);
}

/* Botón Nuevo Plan grande y bonito */
#add-plan-btn {
  border-radius: 999px;
  font-weight: 600;
  padding-block: .7rem;
  font-size: .9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  background: var(--success-green);
  border-color: var(--success-green);
  margin-top: .75rem;
}

#add-plan-btn i {
  font-size: 1rem;
}

#add-plan-btn:hover:enabled {
  background: #218838;
  border-color: #218838;
}

#add-plan-btn:disabled {
  opacity: .75;
  cursor: not-allowed;
}

/* ===== Tabla de planes ===== */

.planes-container #planesTable {
  font-size: .9rem;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0,0,0,0.06);
}

.planes-container #planesTable thead {
  background: var(--primary-blue);
  color: #ffffff;
}

.planes-container #planesTable thead th {
  border-bottom: none;
  font-weight: 600;
}

.planes-container #planesTable tbody tr:nth-child(even) {
  background: #fdfdfd;
}

.planes-container #planesTable tbody tr:hover {
  background: #eef5ff;
}

/* Columna acciones: botones redondos con solo ícono */
.planes-container #planesTable td:last-child {
  white-space: nowrap;
  text-align: center;
}

.planes-container #planesTable .btn-warning,
.planes-container #planesTable .btn-danger {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  color: #ffffff;
}

.planes-container #planesTable .btn-warning i,
.planes-container #planesTable .btn-danger i {
  font-size: 1rem;
}

.planes-container #planesTable .btn-warning {
  background-color: #f0ad4e;
}

.planes-container #planesTable .btn-warning:hover {
  background-color: #ec971f;
}

.planes-container #planesTable .btn-danger {
  background-color: #d9534f;
}

.planes-container #planesTable .btn-danger:hover {
  background-color: #c9302c;
}

/* Ajuste responsivo */
@media (max-width: 768px) {
  .planes-container > h1.mb-4 {
    font-size: 1.3rem;
  }

  .planes-sidebar-card {
    margin-bottom: 1.25rem;
  }
}
/* Override encabezado tabla planes para que siga el estilo "Listado" */
.planes-container #planesTable thead {
  background: var(--light-blue);      /* mismo celeste del listado */
  color: var(--text-dark);            /* texto oscuro */
}

.planes-container #planesTable thead th {
  border-bottom: 1px solid var(--gray-100);
  font-weight: 700;
}
/* ===== Encabezado tabla de Planes: azul institucional ===== */
.planes-thead-blue {
    background: #dce9f9;        /* azul suave elegante */
    color: #0a3d62;             /* azul texto fuerte y legible */
}

.planes-thead-blue th {
    padding: 0.75rem;
    font-weight: 700;
    border-bottom: 1px solid #c8d7ea;
    white-space: nowrap;
}


/* =========================================================
   VISTA: ADMIN - ACCIONES
   ========================================================= */

.acciones-container {
  max-width: 1200px;
}

/* Título */
.acciones-container > h1.mb-3 {
  color: var(--primary-blue);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: .6rem;
  border-bottom: 3px solid var(--primary-blue);
  padding-bottom: .6rem;
  margin-bottom: 1.25rem;
}

/* Botón Volver */
.acciones-container > button.btn-secondary.mb-2 {
  border-radius: 999px;
  font-weight: 500;
  padding-inline: 1.2rem;
  border-color: var(--primary-blue);
  color: var(--primary-blue);
  background-color: #ffffff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.acciones-container > button.btn-secondary.mb-2:hover {
  background-color: var(--light-blue);
  border-color: var(--primary-blue);
  color: var(--primary-blue);
}

/* Botón "Tipos de Acción" */
.btn-tipos-accion {
  border-radius: 999px;
  font-weight: 500;
  padding-inline: 1.2rem;
  margin-left: .5rem;
  background: var(--secondary-blue);
  border-color: var(--secondary-blue);
  color: #ffffff;
}

.btn-tipos-accion:hover {
  background: #0052a3;
  border-color: #0052a3;
}

/* Sidebar filtros */
.acciones-sidebar-card {
  border: 1px solid var(--gray-100);
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  border-radius: 16px;
  background: #ffffff;
  padding: 1.5rem 1.75rem 1.4rem;
}

.acciones-sidebar-card .form-label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: .45px;
}

/* Selects e input de búsqueda en sidebar */
.acciones-sidebar-card .form-select,
.acciones-sidebar-card .form-control {
  border-radius: 999px;
  border-color: var(--gray-200);
  font-size: .9rem;
  padding-inline: 1.1rem;
  padding-top: .45rem;
  padding-bottom: .45rem;
  background-color: #fdfdfd;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}

.acciones-sidebar-card .form-select:focus,
.acciones-sidebar-card .form-control:focus {
  border-color: var(--secondary-blue);
  box-shadow: 0 0 0 0.15rem rgba(0,102,204,0.25);
}

/* Botón "Nueva Acción" */
#add-accion-btn {
  border-radius: 999px;
  font-weight: 600;
  padding-block: .7rem;
  font-size: .9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  background: var(--success-green);
  border-color: var(--success-green);
  margin-top: .5rem;
}

#add-accion-btn:hover:enabled {
  background: #218838;
  border-color: #218838;
}

#add-accion-btn:disabled {
  opacity: .75;
  cursor: not-allowed;
}

/* Tabla de Acciones */
#accionesTable {
  font-size: .85rem;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0,0,0,0.06);
}

/* Encabezado azul estilo institucional */
.acciones-thead-blue {
  background: #dce9f9;      /* azul suave */
  color: #0a3d62;           /* texto azul fuerte */
}

.acciones-thead-blue th {
  padding: 0.75rem;
  font-weight: 700;
  border-bottom: 1px solid #c8d7ea;
  white-space: nowrap;
}

/* Filas */
#accionesTable tbody tr:nth-child(even) {
  background: #fdfdfd;
}

#accionesTable tbody tr:hover {
  background: #eef5ff;
}

/* Botones de acciones en la última columna */
#accionesTable td:last-child {
  white-space: nowrap;
}

#accionesTable .btn-outline-primary,
#accionesTable .btn-outline-danger {
  border-radius: 999px;
  padding: .25rem .55rem;
  font-size: .8rem;
}

/* Ajuste responsive */
@media (max-width: 768px) {
  .acciones-container > h1.mb-3 {
    font-size: 1.25rem;
  }

  .acciones-sidebar-card {
    margin-bottom: 1.25rem;
  }
}

/* Grupo de botones en la tabla de Acciones */
.acciones-btn-group {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* Pill buttons para las acciones de la tabla */
#accionesTable .btn-outline-primary,
#accionesTable .btn-outline-secondary,
#accionesTable .btn-outline-danger {
  border-radius: 999px;
  padding: 0.25rem 0.55rem;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

/* Iconos un pelín más pequeños para que no se vean toscos */
#accionesTable .btn-outline-primary i,
#accionesTable .btn-outline-secondary i,
#accionesTable .btn-outline-danger i {
  font-size: 0.95rem;
}


:root {
  --gov-primary: #003d82;
  --gov-secondary: #34495e;
  --gov-accent: #0b63ce;
  --gov-header-bg: #e9f3ff; /* celeste de los encabezados de listado */
}

/* ===== CABECERA PRINCIPAL (igual a Procedimientos Operativos) ===== */
.page-header {
  background: #ffffff;
  border-bottom: 3px solid var(--gov-primary);
  padding: 1.5rem 0;
  margin-bottom: 1.75rem;
}

.page-title {
  color: var(--gov-primary);
  font-size: 1.75rem;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.page-subtitle {
  color: #6c757d;
  margin-top: 0.25rem;
  font-size: 0.95rem;
}

/* ===== CARD GENÉRICA ===== */
.gov-card {
  border: 1px solid #dde6f1;
  border-radius: 0.75rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
  background: #ffffff;
}

/* ===== HEADER DE FILTROS ===== */
.gov-filter-header {
  background: #f7fafe;
  border-bottom: 1px solid #dde6f1;
  color: var(--gov-secondary);
  font-weight: 600;
}

.gov-filter-header i {
  color: var(--gov-primary);
}

/* Labels e inputs de filtros */
.gov-filter-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6c757d;
  margin-bottom: 0.3rem;
}

.gov-filter-input.form-select,
.gov-filter-input.form-control {
  border-radius: 999px;
  border: 1px solid #d0d9e8;
  font-size: 0.9rem;
  padding: 0.45rem 0.9rem;
}

.gov-filter-input.form-select:focus,
.gov-filter-input.form-control:focus {
  border-color: var(--gov-accent);
  box-shadow: 0 0 0 0.16rem rgba(11, 99, 206, 0.18);
}

/* ===== BOTONES ===== */
.gov-btn-primary {
  background: var(--gov-primary);
  border-color: var(--gov-primary);
  font-weight: 600;
  border-radius: 999px;
  padding-inline: 1.5rem;
}

.gov-btn-primary:hover {
  background: #002b5c;
  border-color: #002b5c;
}

.gov-btn-secondary {
  border-radius: 999px;
  font-size: 0.85rem;
}

/* ===== ENCABEZADO AZUL "LISTADO" ===== */
.gov-list-header {
  background: var(--gov-header-bg);
  color: var(--gov-primary);
  font-weight: 600;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid #d0e4ff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.gov-list-header i {
  color: var(--gov-primary);
}

/* ===== TABLA DE NECESIDADES ===== */
.needs-table {
  margin-bottom: 0;
}

.thead-gov th {
  background: var(--gov-primary);
  color: #ffffff;
  border-bottom: 2px solid #002b5c;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.needs-table tbody tr:hover {
  background-color: #f5f9ff;
}

/* Celda descripción */
.needs-desc-cell {
  max-width: 520px;
  white-space: normal;
}

.needs-id {
  font-weight: 600;
  color: var(--gov-secondary);
  margin-right: 0.25rem;
}

.needs-desc {
  display: inline-block;
  margin-right: 0.5rem;
}

.needs-badge-estado {
  font-size: 0.7rem;
  text-transform: uppercase;
}

/* scroll horizontal de la tabla si es necesario */
.my-scrollable-table {
  overflow-x: auto;
}

/* ===== PAGINACIÓN ===== */
.gov-pagination .page-link {
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-size: 0.85rem;
}

.gov-pagination .page-item.active .page-link {
  background: var(--gov-primary);
  border-color: var(--gov-primary);
}

.gov-pagination .page-item.disabled .page-link {
  color: #a0a9b8;
}

/* Responsive pequeño ajuste */
@media (max-width: 768px) {
  .page-header {
    padding: 1rem 0;
  }
  .page-title {
    font-size: 1.4rem;
  }
}

/* ===== Requerimientos: lista de necesidades para requerimientos ===== */

.necesidades-req-container .page-title i {
  font-size: 1.4rem;
}

.necesidades-req-container .gov-card {
  margin-bottom: 1.5rem;
}

.needs-req-table tbody td {
  font-size: 0.9rem;
}

/* Botón grande de reporte */
.gov-report-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 600;
  border-radius: 999px;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

.gov-report-btn i {
  font-size: 1.2rem;
}
/* ===== Necesidades para contratos (vista contratos) ===== */

.necesidades-contratos-container .page-title i {
  font-size: 1.4rem;
}

.necesidades-contratos-container .gov-card {
  margin-bottom: 1.5rem;
}

.needs-contratos-table tbody td {
  font-size: 0.9rem;
}
/* ===== Metas Físicas ===== */

.metas-container .page-title i {
  font-size: 1.4rem;
}

.metas-container .gov-card {
  border-radius: 6px;
}

.metas-table tbody td {
  font-size: 0.9rem;
}

.metas-table td select,
.metas-table td input {
  font-size: 0.85rem;
}

.metas-table button {
  padding: 4px 8px;
}

.gov-list-header {
  background: var(--gov-primary);
  color: white;
  font-weight: 600;
  padding: 0.75rem 1rem;
}

.gov-filter-label {
  font-weight: 500;
  color: #334;
  font-size: 0.9rem;
}


/* ===== Metas Físicas - Index ===== */

.metas-index-container .page-title i {
  font-size: 1.4rem;
}

.metas-index-container .gov-card {
  border-radius: 6px;
}

.metas-index-container .gov-card + .gov-card {
  margin-top: 1rem;
}

.meta-detail-card .form-control {
  font-size: 0.9rem;
}

.meta-detail-card .gov-filter-label {
  font-size: 0.85rem;
}

.meta-detail-card .card-footer {
  background-color: #f8f9fb;
}

/* ===== Ajustes específicos para el listado de necesidades (especialista) ===== */

.necesidades-container .necesidades-list-card .gov-list-header {
  /* Azul clarito tipo barra de "Listado" de procedimientos */
  background: #eaf4ff;
  border-bottom: 1px solid #d0e3ff;
  color: #004b8d;
  font-weight: 600;
}

/* Encabezado de la tabla dentro del listado de necesidades */
.necesidades-container .needs-table thead.thead-gov {
  background: #004b8d;
  color: #fff;
}

.necesidades-container .needs-table thead.thead-gov th {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid #003b70;
}

/* Cuerpo de la tabla: un poco más compacto pero legible */
.necesidades-container .needs-table tbody td {
  font-size: 0.85rem;
  vertical-align: middle;
}

/* Columna de descripción de la necesidad: que envuelva texto normal */
.necesidades-container .needs-desc-cell {
  white-space: normal;       /* permite salto de línea */
  line-height: 1.3;
}

.necesidades-container .needs-id {
  font-weight: 700;
  margin-right: 0.25rem;
}

.necesidades-container .needs-desc {
  font-weight: 500;
}

/* Badge de estado dentro de la descripción */
.necesidades-container .needs-badge-estado {
  font-size: 0.7rem;
  margin-left: 0.35rem;
  vertical-align: middle;
}

/* Contenedor scrollable: que no se “coma” la tabla, solo scroll horizontal si es necesario */
.necesidades-container .my-scrollable-table {
  overflow-x: auto;
  overflow-y: hidden;
}

.necesidades-container .my-scrollable-table table {
  min-width: 1100px;   /* evita que se aplaste demasiado en pantallas grandes */
}

/* Botones de acciones más delicados */
.necesidades-container td.text-nowrap .btn {
  font-size: 0.75rem;
  padding: 0.25rem 0.45rem;
  border-radius: 999px;
}
/* ===== Usuarios: layout general ===== */

.usuarios-container .usuarios-header-actions button {
  min-width: 160px;
}

/* Tabla de usuarios con estilo institucional similar a otros listados */

.usuarios-container .usuarios-table thead.thead-gov {
  background: #004b8d;      /* azul institucional */
  color: #fff;
}

.usuarios-container .usuarios-table thead.thead-gov th {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid #003b70;
}

.usuarios-container .usuarios-table tbody td {
  font-size: 0.85rem;
  vertical-align: middle;
}

/* Contenedor de tabla scrollable en pantallas pequeñas */
.usuarios-container .my-scrollable-table {
  overflow-x: auto;
}

/* Botones de acciones más finos / compactos */
.usuarios-container .usuarios-table td.text-nowrap .btn {
  font-size: 0.75rem;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
}
/* ======== LISTADO DE USUARIOS – ESTILO IGUAL AL EJEMPLO ======== */

/* Barra superior de la card: "Listado" */
.usuarios-list-card .gov-list-header {
  background: #E9F3FF !important; /* azul muy claro */
  color: #003F82 !important;       /* azul institucional */
  font-weight: 600;
  border-bottom: 1px solid #cdddf0;
}

/* Encabezado de la tabla (azul sólido) */
.usuarios-table thead.thead-gov {
  background: #003F82 !important;
  color: #ffffff !important;
}

.usuarios-table thead.thead-gov th {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: none;
}

/* Cuerpo de la tabla */
.usuarios-table tbody td {
  font-size: 0.85rem;
  padding: 6px 10px;
}

/* Scroll suave sin romper diseño */
.usuarios-container .my-scrollable-table {
  overflow-x: auto;
  padding: 0;
}

/* Botones */
.usuarios-table td .btn {
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.75rem;
}


/* ===== ADMIN GERENCIAS / DIVISIONES ===== */

.admin-gediv-container .gov-card {
  border-radius: 6px;
}

/* Tablas de esta pantalla (un pelín compactas) */
.admin-gediv-table tbody td {
  font-size: 0.86rem;
  vertical-align: middle;
}

/* Nombre de gerencia clickeable (parece link) */
.nombre-clickeable-gerencia {
  cursor: pointer;
  color: #004b8d;
  font-weight: 600;
}

.nombre-clickeable-gerencia:hover {
  text-decoration: underline;
}

/* Formularios de alta al pie de cada card */
.admin-gediv-form .input-group > .form-control {
  font-size: 0.9rem;
}

.admin-gediv-form .btn {
  border-radius: 0 999px 999px 0;
}

/* Scroll horizontal suave en pantallas pequeñas */
.admin-gediv-container .my-scrollable-table {
  overflow-x: auto;
  overflow-y: hidden;
}

.admin-gediv-container .my-scrollable-table table {
  min-width: 420px;
}

/* Helper text de divisiones */
#divisiones-helper {
  margin-top: 0.5rem;
}
/* HEADER DE LISTADOS — Azul translúcido estilo GOV */
/* Para todas las cards que tengan gov-list-header */
.gov-list-header {
  background: rgba(0, 91, 156, 0.12) !important;

  color: #003565 !important;
  font-weight: 600;
  padding: 0.75rem 1rem;
}


/* ===========================
   Reporte 2 – Gráficos
   =========================== */

.reporte2-container .page-header {
  margin-bottom: 1.5rem;
}

/* Header de los gráficos: usa el mismo azul translúcido que los listados */
.gov-chart-header {
  font-weight: 600;
}

/* Contenedor responsive de los charts */
.chart-wrap {
  position: relative;
  width: 100%;
  height: 420px;
}

@media (max-width: 1200px) {
  .chart-wrap { height: 380px; }
}

@media (max-width: 992px) {
  .chart-wrap { height: 340px; }
}

@media (max-width: 768px) {
  .chart-wrap { height: 300px; }
}

@media (max-width: 576px) {
  .chart-wrap { height: 260px; }
}


/* ===========================
   Necesidades planificadas
   =========================== */

.necesidades-planificadas-container .page-header {
  margin-bottom: 1.5rem;
}

.necesidades-planificadas-container .page-title i {
  vertical-align: middle;
}

/* DataTables con descripciones largas */
.js-dt {
  table-layout: fixed;
}

.js-dt th,
.js-dt td {
  white-space: normal !important;   /* permite salto de línea */
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Columna de descripción más ancha y controlada */
.js-dt .col-desc {
  width: 480px;
  min-width: 420px;
  max-width: 600px;
}

@media (max-width: 992px) {
  .js-dt .col-desc {
    width: 360px;
    min-width: 320px;
  }
}

@media (max-width: 768px) {
  .js-dt .col-desc {
    width: 260px;
    min-width: 240px;
  }
}

/* Tipografía un poco más compacta solo para esta tabla */
#needsPlanTable tbody td {
  font-size: 0.85rem;
  line-height: 1.2rem;
}

#needsPlanTable thead th {
  font-size: 0.9rem;
}
/* ===========================
   Necesidades en proceso
   =========================== */

.necesidades-proceso-container .page-header {
  margin-bottom: 1.5rem;
}

.necesidades-proceso-container .page-title i {
  vertical-align: middle;
}

/* Tipografía compacta para tabla de necesidades en proceso */
#needsProcTable tbody td {
  font-size: 0.85rem;
  line-height: 1.2rem;
}

#needsProcTable thead th {
  font-size: 0.9rem;
}

/* ===========================
   Necesidades en ejecución
   =========================== */

.necesidades-ejec-container .page-header {
  margin-bottom: 1.5rem;
}

.necesidades-ejec-container .page-title i {
  vertical-align: middle;
}

/* Tipografía ligeramente más compacta para la tabla de ejecución */
#needsExecTable tbody td {
  font-size: 0.85rem;
  line-height: 1.2rem;
}

#needsExecTable thead th {
  font-size: 0.9rem;
}


/* ===============================
   Reporte POI (Plan → Acción → Unidades)
   =============================== */

.poi-report-container .page-header {
  margin-bottom: 1.5rem;
}

.poi-report-container .page-title i {
  vertical-align: middle;
}

.poi-table-wrapper {
  max-height: 70vh;      /* limita un poco la altura para no romper la página */
  overflow: auto;
}

/* Tabla más compacta y legible */
.poi-table thead th {
  font-size: 0.82rem;
  white-space: nowrap;
}

.poi-table tbody td {
  font-size: 0.8rem;
  vertical-align: middle;
}

/* Celdas de plan y acción: texto algo más marcado y con wrap controlado */
.poi-plan-cell,
.poi-accion-cell {
  font-weight: 500;
  font-size: 0.82rem;
  white-space: normal;
  word-wrap: break-word;
}

/* Celda financiera: alineada y con ligero énfasis */
.poi-fin-cell {
  white-space: nowrap;
}

/* Ajuste responsive para pantallas pequeñas */
@media (max-width: 768px) {
  .poi-table-wrapper {
    max-height: none;
  }

  .poi-table thead th,
  .poi-table tbody td {
    font-size: 0.75rem;
  }
}


/* ===========================
   Realizar Pago / Entregables
   =========================== */

.pagos-container .page-header {
  margin-bottom: 1.5rem;
}

.pagos-container .page-title i {
  vertical-align: middle;
}

/* Card de detalle de necesidad */
.pagos-container .gov-card .text-muted.fw-semibold {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Tabla de entregables */
.entregables-table {
  max-width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
}

.entregables-table thead th {
  background: rgba(44, 62, 80, 0.9); /* coherente con .table-dark/gov */
  color: #fff;
  text-align: center;
  font-size: 0.85rem;
  vertical-align: middle;
}

.entregables-table tbody td {
  vertical-align: middle;
  font-size: 0.85rem;
}

.entregables-table tbody tr:hover {
  background-color: #f1f7ff;
}

.entregables-table td input.form-control-sm {
  min-width: 110px;
}

/* Botones de acciones dentro de la tabla */
.entregables-table .btn-sm i {
  font-size: 0.9rem;
}

/* Charts en pago */
.pagos-container .chart-wrap {
  position: relative;
  width: 100%;
  height: 380px;
}

.pagos-container .chart-wrap.chart-wrap-sm {
  height: 320px;
}

@media (max-width: 992px) {
  .pagos-container .chart-wrap {
    height: 320px;
  }
  .pagos-container .chart-wrap.chart-wrap-sm {
    height: 260px;
  }
}

@media (max-width: 768px) {
  .pagos-container .chart-wrap {
    height: 280px;
  }
  .pagos-container .chart-wrap.chart-wrap-sm {
    height: 230px;
  }
}
    /* ===========================
   POIM - Lista
   =========================== */

.poim-list-container .page-header {
  padding: 1rem 0 0.75rem 0;
  border-bottom: 1px solid var(--gov-border);
}

.poim-list-container .page-title {
  color: var(--gov-primary);
  font-weight: 600;
}

.poim-list-container .page-subtitle {
  font-size: 0.9rem;
  color: #6c757d;
}

/* Pill "POIM" */
.poim-pill {
  background: rgba(52, 152, 219, 0.12);
  color: var(--gov-accent);
  border: 1px solid rgba(52, 152, 219, 0.4);
  font-weight: 600;
  font-size: 0.8rem;
}

/* Tabla */
#poimAdminTable thead.thead-gov th {
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

/* Badge de año */
.poim-year-badge {
  background: rgba(44, 62, 80, 0.06);
  color: var(--gov-primary);
  border: 1px solid rgba(44, 62, 80, 0.16);
  font-weight: 600;
  padding: 0.35rem 0.6rem;
  font-size: 0.8rem;
}

/* Filas */
.poim-list-card .table tbody tr:hover {
  background-color: #f5f9ff;
}

/* Empty state */
.empty-state-card {
  border-radius: 0.5rem;
}
.empty-state-card .display-6 {
  font-size: 2.4rem;
}

/* Encabezados de columnas de requerimientos */
.thead-gov th {
  background: rgba(44, 62, 80, 0.06);
  color: var(--gov-primary);
  border-bottom: 2px solid var(--gov-border);
}

.req-col-num {
  font-weight: 600;
  font-size: 0.8rem;
}

.req-col-label {
  font-size: 0.7rem;
  color: #6c757d;
}
/* Card de filtros arriba (misma línea que el resto del sistema) */
.division-filters-card .gov-filter-header {
  background: rgba(52, 152, 219, 0.08);
  border-bottom: 1px solid var(--gov-border);
}

.gov-filter-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gov-primary);
}

.gov-filter-input {
  font-size: 0.9rem;
}
/* ====== REQUERIMIENTOS ====== */

.req-page .req-top-bar {
  gap: 0.75rem;
}

.req-page .req-title {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--gov-primary);
}

.req-page .req-subtitle {
  font-size: 0.9rem;
  color: #6c757d;
}

/* Card detalle necesidad */
.req-detail-card .card-header {
  background: #f8fafc;
  border-bottom: 1px solid var(--gov-border);
}

.req-label {
  display: inline-block;
  font-weight: 600;
  color: var(--gov-primary);
  margin-right: 0.25rem;
}

.req-value {
  color: #34495e;
}

/* Badge de estado */
.req-state-badge {
  font-size: 0.75rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.req-state-pac {
  background: rgba(52, 152, 219, 0.1);
  color: #2980b9;
  border: 1px solid rgba(52, 152, 219, 0.4);
}

.req-state-proc {
  background: rgba(46, 204, 113, 0.08);
  color: #27ae60;
  border: 1px solid rgba(46, 204, 113, 0.45);
}

/* Cards de cada requerimiento */
.req-item-card {
  border-radius: 6px;
}

.req-item-card .card-header {
  background: #f9fbff;
  border-bottom: 1px solid var(--gov-border);
}

.req-item-title {
  font-size: 1rem;
  font-weight: 600;
}

/* Botón editar */
.req-edit-btn {
  font-size: 0.8rem;
  border-radius: 999px;
  padding-inline: 0.9rem;
}

/* Grupos de campos */
.req-field-group .form-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gov-primary);
}

.req-input {
  font-size: 0.85rem;
  padding: 0.35rem 0.55rem;
}

/* Estilo especial para inputs deshabilitados (se ve “ficha” y no campo duro) */
.req-input[disabled] {
  background-color: #f8f9fb;
  border-style: dashed;
  border-color: #d0d7e2;
  color: #6c757d;
}

/* Botón guardar */
.req-save-btn {
  padding-inline: 1.6rem;
  border-radius: 999px;
  font-weight: 500;
}
.page-header {
  background: white;
  border-bottom: 3px solid var(--gov-primary);
  padding: 1.5rem 0;
  margin-bottom: 2rem;
}

.page-title {
  color: var(--gov-primary);
  font-size: 1.75rem;
  font-weight: 600;
  margin: 0;
}

.page-subtitle {
  color: #6c757d;
  margin: 0.25rem 0 0 0;
  font-size: 0.95rem;
}
/* Página de objetos */
.objetos-page .page-title {
  font-size: 1.6rem;
}

/* Tarjetas de resumen (plan, acción, tipo) */
.mini-info-card {
  background: #ffffff;
  border: 1px solid var(--gov-border);
  border-radius: 6px;
  padding: 0.75rem 0.9rem;
  height: 100%;
}

.mini-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6c757d;
}

.mini-value {
  font-size: 0.95rem;
  color: #2c3e50;
}

/* Botón secundario institucional (volver) */
.btn-gov-secondary {
  border-radius: 999px;
  font-size: 0.9rem;
  padding-inline: 1rem;
}

/* Tabla de objetos: letra un poco más compacta */
.objetos-table tbody td {
  font-size: 0.88rem;
}

/* Celda de acciones: espaciado fino entre botones */
.objetos-actions-cell .btn {
  font-size: 0.8rem;
  padding: 0.25rem 0.55rem;
}

/* Badge "Aprobado" más delicado */
.bg-success-subtle {
  background-color: rgba(46, 204, 113, 0.08) !important;
}
:root {
  --gov-primary: #004a8f;
  --gov-primary-light: #e8f2fc;
  --gov-border: #dce4ec;
}

/* Encabezado superior */
.page-header {
  background: var(--gov-primary-light);
  border: 1px solid var(--gov-border);
  border-left: 4px solid var(--gov-primary);
  border-radius: 6px;
  padding: 1rem 1.25rem;
}

.page-title {
  color: var(--gov-primary);
  font-weight: 700;
  font-size: 1.5rem;
}

.page-subtitle {
  color: #6c757d;
  font-size: 0.92rem;
}

.btn-header-compact {
  font-size: 0.9rem;
  padding: 0.4rem 0.9rem;
}

/* Título por año */
.poi-year-title {
  font-weight: 600;
  border-bottom: 2px solid var(--gov-border);
  padding-bottom: 0.25rem;
}

/* Tarjeta de plan */
.plan-card {
  border-radius: 8px;
}

.plan-card-header {
  background: #ffffff;
  border-bottom: 1px solid var(--gov-border);
  font-weight: 600;
}

/* Acción y necesidad */
.accion-card {
  border-radius: 8px;
}

.need-card {
  border-radius: 8px;
}

.need-card-header {
  background: var(--gov-primary-light);
  border-bottom: 1px solid var(--gov-border);
}

/* Puntito separador "•" */
.separator-dot {
  color: #adb5bd;
  font-size: 0.8rem;
}

/* Tarjetas por estado */
.state-card {
  border-radius: 8px;
}

.state-card-header {
  background: #ffffff;
}

/* Ligero matiz de fondo según estado (opcional) */
.state-card-pac {
  background: #f5fbff;
}

.state-card-proceso {
  background: #f8f9fb;
}

.state-card-contratado {
  background: #f4fff7;
}

/* Tablas de estados más compactas */
.state-table th,
.state-table td {
  font-size: 0.8rem;
  white-space: nowrap;
}

/* Tablas dentro del modal de metas */
.modal .table-sm th,
.modal .table-sm td {
  font-size: 0.85rem;
}

/* Responsivo: que no se vea tan apretado en móvil */
@media (max-width: 768px) {
  .page-header {
    padding: 0.9rem 0.9rem;
  }
  .page-title {
    font-size: 1.3rem;
  }
}
/* ================================
   ✨ ESTILO GLOBAL DE MODALES
   ================================ */

/* Fondo externo */
.modal-backdrop.show {
  background-color: rgba(0, 40, 70, 0.45) !important;
  backdrop-filter: blur(2px);
}

/* Contenedor principal */
.modal-content {
  border-radius: 12px !important;
  border: 1px solid rgba(0, 112, 168, 0.25) !important;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.22) !important;
  overflow: hidden;
}

/* Encabezado */
.modal-header {
  background: rgba(0, 112, 168, 0.12) !important;
  border-bottom: 2px solid rgba(0, 112, 168, 0.35) !important;
  padding: 1rem 1.25rem !important;
}

.modal-title {
  font-weight: 600 !important;
  color: #004a7c !important;
  font-size: 1.15rem !important;
}

/* Botón de cerrar */
.modal-header .btn-close {
  filter: brightness(0.3);
  transition: 0.2s;
}
.modal-header .btn-close:hover {
  filter: brightness(0) !important;
}

/* Cuerpo */
.modal-body {
  padding: 1.25rem !important;
  background: #ffffff !important;
  color: #333;
}

/* Inputs dentro del modal */
.modal-body input,
.modal-body select,
.modal-body textarea {
  border-radius: 6px !important;
  border: 1px solid rgba(0, 112, 168, 0.35) !important;
  padding: 0.45rem 0.6rem !important;
}

.modal-body input:focus,
.modal-body select:focus,
.modal-body textarea:focus {
  border-color: #0070a8 !important;
  box-shadow: 0 0 0 0.18rem rgba(0, 112, 168, 0.28) !important;
}

/* Footer */
.modal-footer {
  border-top: 2px solid rgba(0, 112, 168, 0.2) !important;
  padding: 0.8rem 1.25rem !important;
}

/* Botones estándar */
.modal-footer .btn-primary,
.modal-footer .btn-success,
.modal-footer .btn-warning,
.modal-footer .btn-danger,
.modal-footer .btn-secondary {
  border-radius: 6px !important;
  padding: 0.45rem 1.2rem !important;
  font-weight: 600;
}

/* Botón principal institucional */
.modal-footer .btn-primary {
  background-color: #0070a8 !important;
  border-color: #0070a8 !important;
}

.modal-footer .btn-primary:hover {
  background-color: #005f8c !important;
}

/* Botón cancelar */
.modal-footer .btn-secondary {
  background-color: rgba(0, 0, 0, 0.13) !important;
  border: none !important;
  color: #333 !important;
}

.modal-footer .btn-secondary:hover {
  background-color: rgba(0, 0, 0, 0.22) !important;
}

/* Modal-lg y scroll mejorado */
.modal-dialog.modal-lg {
  max-width: 850px !important;
}

.modal-dialog-scrollable .modal-content {
  max-height: 88vh !important;
}
/* ===== Encabezado de tablas de procedimientos (thead-gov) ===== */

.table-proc thead.thead-gov {
  background-color: #004a7c;          /* azul institucional */
}

.table-proc thead.thead-gov tr th {
  background-color: #004a7c !important;
  color: #ffffff !important;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.82rem;
  border-color: #004a7c !important;
  padding: 0.6rem 0.75rem;
}

/* Bordes redondeados en las esquinas superiores */
.table-proc thead.thead-gov tr:first-child th:first-child {
  border-top-left-radius: 8px;
}
.table-proc thead.thead-gov tr:first-child th:last-child {
  border-top-right-radius: 8px;
}

/* Quitar línea de separación fea entre thead y tbody */
.table-proc {
  border-collapse: separate;
  border-spacing: 0;
}
.table-proc tbody tr:first-child td {
  border-top: none;
}

  table thead.thead-gov th,
  .dataTables_scrollHead thead.thead-gov th {
    background-color: #004a7c;       /* azul oscuro institucional */
    color: #ffffff;
    border-color: #00365b;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    padding: 0.6rem 0.75rem;
    vertical-align: middle;
  }

  /* Opcional: filas del body un poco más limpias */
  table thead.thead-gov + tbody tr td {
    font-size: 0.9rem;
  }