/* Paleta y tipografía base (global) */
:root {
  /* Paleta de colores refinada con nombres semánticos */
  --primary: #1f192f;      /* Color principal oscuro para textos y elementos clave */
  --secondary: #2d6073;    /* Color secundario para elementos de UI como cabeceras de modal */
  --accent: #65b8a6;       /* Color de acento para botones de éxito y enlaces */
  --highlight: #b5e8c3;    /* Tono suave para efectos hover y fondos sutiles */

  --bg-page: #f8f9fa;      /* Fondo de página neutro y limpio */
  --text: #2e2a38;         /* Texto principal (ligeramente más claro que el primario) */
  --muted: #7c7a86;        /* Texto atenuado para información secundaria */

  /* Tonos para encabezados de tabla */
  --thead-bg: #e8eff2;
  --thead-text: var(--primary);
}

html, body {
  font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bg-page);
}

/* Enlaces y tipografía */
a { color: var(--secondary); text-decoration: none; }
a:hover { color: var(--primary); text-decoration: underline; }
h1, h2, h3 { color: var(--primary); font-weight: 700; }
h4, h5, h6 { color: var(--primary); font-weight: 600; }
small, .text-muted { color: var(--muted) !important; }

/* Títulos refinados */
.title-page p {
    font-size: 1.6rem; /* Tamaño más grande para el título principal */
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0; /* Quitamos el margen del <p> para controlar el espaciado en el contenedor */
    padding-bottom: .75rem; /* Espacio entre el texto y el borde inferior */
    border-bottom: 1px solid #e0e7ea; /* Borde sutil y consistente */
    letter-spacing: -0.5px; /* Ajuste fino para mejor legibilidad */
}

/* Tarjetas */
.card { 
    border: none; /* Eliminamos el borde para un look más limpio */
    border-radius: 12px; /* Aumentamos ligeramente el redondeo */
    box-shadow: 0 4px 16px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.05); /* Sombra más suave y moderna */
    overflow: hidden; /* Asegura que el contenido respete los bordes */
    position: relative; /* Necesario para el pseudo-elemento de la barra de acento */
}
/* Barra de acento de color en la parte superior de la tarjeta */
.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px; /* Grosor de la barra */
    background-color: var(--secondary); /* Usamos el color secundario del tema */
}
.card-header {
    background-color: #f8f9fa; /* Fondo sólido, limpio y neutro */
    color: var(--primary);
    font-weight: 600;
    padding-top: .9rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid #e8edf0;
}
.card-body { 
    padding: 1.25rem; /* Espaciado interno consistente */
}
.card + .card { margin-top: 1.5rem; }

/* Controles de formulario */
.form-control,
.form-select,
.input-group-text {
    border-radius: 8px !important;
    border: 1px solid #d7e0e4;
    transition: border-color .2s ease, box-shadow .2s ease;
    background-color: #fff;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--secondary);
    box-shadow: 0 0 0 .2rem color-mix(in oklab, var(--secondary) 15%, transparent);
    background-color: #fff;
}
.input-group-text {
    background: #f1f6f7;
}
.form-control::placeholder {
    color: #9aa6ac;
}

.form-text { color: var(--muted); }
.form-label, label { 
    color: var(--primary); 
    font-weight: 600; 
    margin-bottom: .3rem;
}

/* Botones */
.btn-primary {
  background-color: var(--secondary);
  border-color: var(--secondary);
}
.btn-primary:hover { background-color: #244a59; border-color: #244a59; }
.btn-warning { background-color: var(--highlight); border-color: var(--highlight); color: #3b2f00; }
.btn-warning:hover { filter: brightness(.95); color: #2a2200; }
.btn:focus { box-shadow: 0 0 0 .2rem color-mix(in oklab, var(--secondary) 25%, transparent); }
.btn.disabled, .btn:disabled { opacity: .65; }

.btn-success {
  background-color: var(--accent);
  border-color: var(--accent);
}
.btn-success:hover { background-color: #0f3a3b; border-color: #0f3a3b; }

.btn-outline-secondary {
  color: var(--color3);
  border-color: #cfe0e3;
}
.btn-outline-secondary:hover { color: #fff; background: var(--accent); border-color: var(--accent); }

/* Estilo unificado para el botón de exportar a Excel */
#btnExcel {
    padding: .3rem .7rem; /* Aumentar padding para mejor área de click */
    font-size: 1.1rem;  /* Aumentar tamaño del ícono */
    color: var(--accent);
    background-color: transparent;
    border: 1px solid transparent;
    line-height: 1; /* Mejorar alineación vertical del ícono */
    transition: all .2s ease;
}
#btnExcel:hover {
    color: var(--primary);
    background-color: color-mix(in oklab, var(--accent) 15%, white);
    border-color: color-mix(in oklab, var(--accent) 30%, white);
}

/* Badges y ayudas */
.badge.bg-success { background-color: var(--secondary) !important; }


/* Áreas <pre> de vista previa */
pre {
  background: #ffffff;
  border: 1px solid #e8edf0;
  border-radius: 8px;
  padding: 12px;
}

/* Secciones de arrastre de archivo */
.file-drop {
  border: 2px dashed #cfd3d7;
  border-radius: 8px;
  padding: .75rem;
  background:#fff;
}
.file-pill {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.35rem .6rem; border-radius:999px;
  background: color-mix(in oklab, var(--secondary) 12%, white);
  color: var(--secondary);
  font-size:.875rem;
}

/* Tablas elegantes */
.table { 
    border-color: #e8edf0;
    border-collapse: separate; /* Necesario para border-radius y box-shadow */
    border-spacing: 0;
    width: 100%;
    border-radius: 10px; /* Bordes redondeados para la tabla */
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* Sombra sutil para efecto flotante */
}

.table-primary{
  background-color: transparent !important;
}

.table thead th { 
    background: var(--thead-bg, #e8eff2);
    color: var(--thead-text, var(--primary));
    border-bottom: 2px solid #d1dbe0; /* Borde inferior más pronunciado */
    font-weight: 700; /* Un poco más de peso */
    letter-spacing: .3px;
    text-align: left; /* Alineación consistente */
    padding: .75rem 1rem; /* Más espaciado */
}
.table thead th:first-child { border-top-left-radius: 10px; }
.table thead th:last-child {
    border-top-right-radius: 10px;
}

.table-hover tbody tr {
    transition: background-color .2s ease-out; /* Transición suave */
}
.table-hover tbody tr:hover { 
    background-color: color-mix(in oklab, var(--highlight) 25%, white); /* Color de hover sutil del tema */
}
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(242, 248, 248, 0.5); } /* Rayado de cebra muy sutil */
.table td, .table th { vertical-align: middle; padding: .65rem 1rem; border-top: 1px solid #e8edf0; }

/* Estilo para botones de acción dentro de las tablas */
.table-actions {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
}
.btn-action {
    background: transparent;
    border: none;
    color: color-mix(in oklab, var(--muted) 85%, black);
    padding: .3rem .6rem;
    border-radius: 6px;
    font-size: 1rem;
    line-height: 1;
    transition: all .2s ease;
    cursor: pointer;
}
.btn-action:hover {
    transform: scale(1.1);
}

/* Colores específicos para hover de acciones */
.btn-action[name="editPrograma"]:hover {
    color: var(--secondary);
    background-color: color-mix(in oklab, var(--secondary) 15%, white);
}
.btn-action[name*="modalConfirmar"]:hover {
    color: #e74a3b; /* Rojo de peligro */
    background-color: color-mix(in oklab, #e74a3b 15%, white);
}

/* Breadcrumbs y navegación secundaria */
.breadcrumb { background: transparent; margin-bottom: .5rem; }
.breadcrumb .breadcrumb-item { color: var(--muted); }
.breadcrumb .breadcrumb-item.active { color: var(--primary); font-weight: 600; }

/* Paginación */
.page-link { color: var(--accent); border-color: #e0e7ea; }
.page-link:hover { color: var(--secondary); background: #eef6f6; border-color: #d7e0e4; }
.page-item.active .page-link { background-color: var(--secondary); border-color: var(--secondary); }

/* Dropdowns y modales */
.dropdown-menu { border: 1px solid #e8edf0; border-radius: .5rem; box-shadow: 0 10px 30px rgba(0,0,0,.06); }
.modal-content { border: 1px solid #e8edf0; border-radius: .75rem; box-shadow: 0 16px 40px rgba(0,0,0,.12); }
.modal-header { border-bottom-color: #e8edf0; }
.modal-footer { border-top-color: #e8edf0; }

/* Topbar y Sidebar (sb-admin-2 overrides suaves) */
.topbar { border-bottom: 1px solid #e8edf0; }
.bg-gradient-primary { background: linear-gradient(180deg, var(--secondary), var(--primary)) !important; }
.sidebar .sidebar-brand { color: #eaf3f3; }
.sidebar .sidebar-heading { color: #cfe0e3; text-transform: uppercase; letter-spacing: .6px; }
.sidebar .nav-item .nav-link { color: #eaf3f3; }
.sidebar .nav-item.active .nav-link, .sidebar .nav-item .nav-link:hover { color: #ffffff; background: rgba(255,255,255,.08); border-radius: .5rem; }
/* Asegurar ancho completo del content-wrapper */
#wrapper #content-wrapper{ width: 100% !important; flex: 1 1 auto; }
#wrapper #content-wrapper #content{ width: 100%; }

/* Alerts */
.alert-primary { background: #e8f6f6; color: var(--color3); border-color: #d2ecec; }

/* Secciones y títulos de página */
.title-page { margin: .25rem 0 .75rem; }
.title-page p { margin: 0; }

/* Utilidades: Badges y etiquetas suaves */
.badge-soft { display:inline-block; padding:.25rem .5rem; border-radius:999px; font-weight:600; font-size:.78rem; }
.badge-soft-primary { color: var(--color2); background: color-mix(in oklab, var(--color2) 14%, white); border: 1px solid color-mix(in oklab, var(--color2) 24%, white); }
.badge-soft-secondary { color: var(--color4); background: color-mix(in oklab, var(--color4) 14%, white); border: 1px solid color-mix(in oklab, var(--color4) 24%, white); }
.badge-soft-accent { color: var(--color3); background: color-mix(in oklab, var(--color3) 16%, white); border: 1px solid color-mix(in oklab, var(--color3) 26%, white); }
.badge-soft-highlight { color: #5b4a10; background: color-mix(in oklab, var(--color5) 26%, white); border: 1px solid color-mix(in oklab, var(--color5) 36%, white); }
.badge-soft-muted { color: var(--muted); background: color-mix(in oklab, var(--muted) 10%, white); border: 1px solid color-mix(in oklab, var(--muted) 20%, white); }
 
.tag-highlight { 
    display:inline-flex; 
    align-items:center; 
    gap:.4rem; 
    padding:.3rem .6rem; 
    border-radius:6px; 
    color: color-mix(in oklab, var(--accent) 80%, black); 
    background: color-mix(in oklab, var(--accent) 18%, white); 
    border:1px solid color-mix(in oklab, var(--accent) 30%, white); 
    font-weight: 600;
    font-size: .8rem;
}
.tag-highlight .dot { width:.5rem; height:.5rem; border-radius:50%; background: var(--accent); }

/* Utilidades de layout cortas */
.ux-gap-xs { gap: .25rem; }
.ux-gap-sm { gap: .5rem; }
.ux-gap { gap: .75rem; }
.ux-gap-lg { gap: 1rem; }

/* Footer institucional */
.site-footer{
  width: 100%;
  background: var(--primary);
  color: #fff;
  padding: .5rem .75rem;
}
.site-footer .container{ max-width: 1140px; margin: 0 auto; }
.site-footer small{ font-size: .8125rem; letter-spacing: .2px; opacity: .95; }

/* Espaciado general de contenido (excluye navbar/topbar) */
#content > .container,
#content > .container-fluid { padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 768px){
  #content > .container,
  #content > .container-fluid { padding-left: 1.25rem; padding-right: 1.25rem; }
}
@media (min-width: 1200px){
  #content > .container,
  #content > .container-fluid { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* Alinear títulos con el contenido (mismo padding lateral que los containers)
   Considera títulos envueltos en un contenedor intermedio */
#content > .title-page,
#content .title-page { padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 768px){
  #content > .title-page,
  #content .title-page { padding-left: 1.25rem; padding-right: 1.25rem; }
}
@media (min-width: 1200px){
  #content > .title-page,
  #content .title-page { padding-left: 1.5rem; padding-right: 1.5rem; }
}
/* Asegurar contenedores fluidos a 100% (evitar estrechamientos accidentales) */
#content .container-fluid{ max-width: 100%; width: 100%; }

/* Separación vertical entre tarjetas */
.card { margin-bottom: 1rem; }

/* Normalizar contenedores mal combinados (container col-12) */
#content .container.col-12,
#content .container-fluid.col-12 { max-width: 100%; width: 100%; padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 768px){
  #content .container.col-12,
  #content .container-fluid.col-12 { padding-left: 1.25rem; padding-right: 1.25rem; }
}
@media (min-width: 1200px){
  #content .container.col-12,
  #content .container-fluid.col-12 { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* --- Animaciones --- */

/* Keyframes para la animación de aparición */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98); /* Aumentamos la distancia y añadimos un ligero escalado */
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Clase de utilidad para aplicar la animación a las tarjetas */
.animated-card {
  animation: fadeInUp 0.6s ease-out forwards; /* Aumentamos ligeramente la duración */
}

/* Clase de utilidad para animar las filas de la tabla */
.animated-row {
  opacity: 0; /* Comienza oculto */
  animation: fadeInUp 0.4s ease-out forwards;
}

/* Asegurar cards a ancho completo del contenedor inmediato */
#content .container > .card,
#content .container-fluid > .card,
#content .container.col-12 > .card,
#content .container-fluid.col-12 > .card { width: 100%; }