/* Estilos SENA institucional */
:root {
  --sena-green: #008C45; /* legado, por si se usa en algún lugar */
  --sena-dark: #111111; /* más profundo */
  --sena-light: #F5F2EB; /* beige claro para fondo */
  --sena-accent: #f3640b; /* naranja principal */
  --sena-accent-dark: #ec7c39; /* naranja más oscuro */
  --sena-accent-soft: #FFF2E9; /* beige-naranja muy claro */
}

body {
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
  background-color: var(--sena-light);
  color: var(--sena-dark);
}

/* Header y navegación con naranja institucional */
.sena-header {
  background: radial-gradient(120% 80% at 0% 0%, #9a3f12 0%, var(--sena-accent-dark) 40%, var(--sena-accent) 100%);
  color: #fff;
  animation: headerSlide .5s ease-out both;
}
.sena-logo { width: 48px; height: 48px; }
.sena-navbar { background: linear-gradient(180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.08) 100%); }
.sena-navbar .nav-link { position: relative; text-decoration: none !important; color: #fff; font-weight: 700; }
.sena-navbar .nav-link::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -6px; height: 3px;
  background: linear-gradient(90deg, rgba(255,255,255,.9), rgba(255,255,255,1));
  box-shadow: 0 0 8px rgba(255,255,255,.85), 0 0 14px rgba(255,255,255,.55);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s ease;
}
.sena-navbar .nav-link:hover::after, .sena-navbar .nav-link.active::after { transform: scaleX(1); }
.sena-navbar .nav-link:hover, .sena-navbar .nav-link.active { opacity: 1; }

/* Títulos de tarjetas en naranja y negrilla */
.info-tile h5 { color: var(--sena-accent); font-weight: 800; letter-spacing: .2px; }

/* Tarjetas informativas con brillo fosforescente al hover */
.info-tile {
  position: relative;
  overflow: hidden;
}
.info-tile::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(900px 240px at var(--mx, -20%) var(--my, -20%), rgba(243,100,11,.28), transparent 55%);
  opacity: 0; transition: opacity .25s ease;
}
.info-tile:hover::before { opacity: 1; }
/* Sheen diagonal */
.info-tile::after {
  content: "";
  position: absolute; top: -100%; left: -50%; width: 60%; height: 300%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.25) 50%, transparent 100%);
  transform: rotate(15deg);
  transition: transform .8s ease;
}
.info-tile:hover::after {
  transform: translateX(220%) rotate(15deg);
}
/* Glow en borde al hover */
.info-tile:hover { box-shadow: 0 12px 28px rgba(243,100,11,.32), 0 3px 12px rgba(0,0,0,.08); border-color: rgba(243,100,11,.55); transform: translateY(-3px); }

/* Tabla estilizada con header naranja */
.sena-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(180deg, var(--sena-accent) 0%, var(--sena-accent-dark) 100%);
  color: #fff;
  font-weight: 600;
  vertical-align: middle;
}
.sena-table thead th .table-sort { color: #fff; text-decoration: none; border: 0; background: transparent; display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; }
.sena-table thead th .table-sort:hover { filter: brightness(1.1); }
.sena-table thead th .table-sort .bi { opacity: .9; }
.sena-table thead th .table-sort.active { text-decoration: none; }
.sena-table tbody tr:hover { background: rgba(0,0,0,.03); }
.sena-table tbody tr:nth-child(odd) { background: #ffffff; }
.sena-table tbody tr:nth-child(even) { background: #f8f7f4; }
.sena-table { border-radius: .5rem; overflow: hidden; }

/* Footer en tono oscuro neutro ligado a la paleta */
.sena-footer { background: #0f0f0f; }
.footer-title { font-weight: 700; }
.footer-sub { font-weight: 600; }
.footer-links a { color: #d6d6d6; text-decoration: none; }
.footer-links a:hover { color: #ffffff; text-decoration: underline; }

/* Badges institucionales */
.sena-badge {
  background: linear-gradient(180deg, var(--sena-accent) 0%, var(--sena-accent-dark) 100%);
  color: #fff;
  border: 1px solid rgba(0,0,0,.1);
}

/* Hero logo */
.hero-logo {
  max-width: 320px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.2));
  animation: fadeInUp .35s ease-out both;
}

/* Controles de búsqueda en header para integrarlos al tema */
.sena-search input[type="search"] {
  background: var(--sena-accent-soft);
  border-color: var(--sena-accent-dark);
  color: var(--sena-dark);
}
.sena-search input[type="search"]::placeholder { color: #8b8b8b; }
.sena-search .btn-outline-light {
  color: #fff;
  border-color: rgba(255,255,255,.6);
}
.sena-search .btn-outline-light:hover { background: rgba(255,255,255,.15); }

/* Botones: sustituir esquema azul por naranja/negro/beige sin tocar las clases en HTML */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--sena-accent);
  --bs-btn-border-color: var(--sena-accent);
  --bs-btn-hover-bg: var(--sena-accent-dark);
  --bs-btn-hover-border-color: var(--sena-accent-dark);
  --bs-btn-active-bg: var(--sena-accent-dark);
  --bs-btn-active-border-color: var(--sena-accent-dark);
  --bs-btn-disabled-bg: #f0ad8e;
  --bs-btn-disabled-border-color: #f0ad8e;
}

.btn-outline-primary {
  --bs-btn-color: var(--sena-accent-dark);
  --bs-btn-border-color: var(--sena-accent-dark);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--sena-accent-dark);
  --bs-btn-hover-border-color: var(--sena-accent-dark);
  --bs-btn-active-bg: var(--sena-accent-dark);
  --bs-btn-active-border-color: var(--sena-accent-dark);
}

/* Variantes útiles acorde a paleta */
.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #2b2b2b;
  --bs-btn-border-color: #2b2b2b;
  --bs-btn-hover-bg: #000;
  --bs-btn-hover-border-color: #000;
}

.btn-light {
  --bs-btn-color: var(--sena-dark);
  --bs-btn-bg: #ffffff;
  --bs-btn-border-color: #e5e5e5;
  --bs-btn-hover-color: var(--sena-dark);
  --bs-btn-hover-bg: #f7f7f7;
  --bs-btn-hover-border-color: #dcdcdc;
}

/* Borde de secciones destacadas */
.section-accent-top { border-top: 4px solid var(--sena-accent); }

/* Tablas con borde/acento en naranja */
.table-hover > tbody > tr:hover > * { background-color: rgba(232, 109, 31, 0.06); }

/* Inputs y labels para coherencia cromática */
.form-control, .form-select {
  border-color: #d4d0c7; /* beige-gris suave */
  transition: box-shadow .2s ease, border-color .2s ease;
}
.form-control:focus, .form-select:focus {
  border-color: var(--sena-accent);
  box-shadow: 0 0 0 .2rem rgba(232,109,31,.25);
}
.form-control.is-valid, .form-select.is-valid {
  border-color: #198754;
  box-shadow: 0 0 0 .2rem rgba(25,135,84,.2);
}
.form-control.is-invalid, .form-select.is-invalid {
  border-color: #dc3545;
  box-shadow: 0 0 0 .2rem rgba(220,53,69,.2);
}

/* Toasts y alertas estilizadas a la paleta */
.toast.sena-toast { border-left: 4px solid var(--sena-accent); }
.alert-sena { background: var(--sena-accent-soft); border: 1px solid var(--sena-accent-dark); color: var(--sena-dark); }

/* Encabezado de sección con sutil ‘underline’ animado */
.section-title { position: relative; display: inline-block; }
.section-title::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; background: linear-gradient(90deg, var(--sena-accent), var(--sena-accent-dark)); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.section-title:hover::after { transform: scaleX(1); }

/* Campos del buscador (select + input) cohesionados */
.sena-search .form-select.form-select-sm { background-color: var(--sena-accent-soft); border-color: var(--sena-accent-dark); color: var(--sena-dark); }
.sena-search .form-select.form-select-sm:focus { border-color: var(--sena-accent); box-shadow: 0 0 0 .2rem rgba(232,109,31,.25); }

/* Utilidades de espaciado/acento */
.bg-accent-soft { background: var(--sena-accent-soft); }
.text-accent { color: var(--sena-accent); }
.border-accent { border-color: var(--sena-accent) !important; }

/* Animaciones suaves */
@keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes subtlePulse { 0% { transform: scale(1); } 50% { transform: scale(1.02); } 100% { transform: scale(1); } }
@keyframes headerSlide {
  from { transform: translateY(-8px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.fade-in-up { animation: fadeInUp .45s ease-out both; }
.pulse-on-hover:hover { animation: subtlePulse .8s ease-in-out 1; }

/* Botones con micro-animaciones y esquema cromático */
.btn { transition: transform .08s ease, box-shadow .15s ease; }
.btn:active { transform: translateY(1px); }
.btn-primary {
  box-shadow: 0 2px 8px rgba(204,94,28,.35);
  background-image: linear-gradient(180deg, var(--sena-accent) 0%, var(--sena-accent-dark) 100%);
  border: none;
}
.btn-primary:hover {
  box-shadow: 0 4px 12px rgba(204,94,28,.45);
  filter: brightness(1.06);
}
.btn-outline-primary {
  box-shadow: 0 1px 6px rgba(204,94,28,.25);
  background: linear-gradient(180deg, rgba(236,124,57,.08), rgba(236,124,57,.16));
}

/* Formularios bonitos: estilo tipo floating-label sin cambiar HTML */
.form-label { color: #4a4a4a; font-weight: 600; }
.form-control, .form-select { background: #fff; }
.form-control, .form-select {
  border-radius: .5rem;
  padding: .6rem .75rem;
}
.form-control + .text-danger.small { margin-top: .25rem; }

/* Simular floating label: levantar etiqueta al enfocar/llenar */
.form-label + .form-control:focus,
.form-label + .form-control:not(:placeholder-shown),
.form-label + select.form-select:focus {
  border-color: var(--sena-accent);
}
.form-label { position: relative; display: inline-block; }
.form-label::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 24px; height: 3px; background: linear-gradient(90deg, var(--sena-accent), var(--sena-accent-dark)); opacity: .0; transition: opacity .25s ease, width .25s ease; }
.form-label:focus-within::after { opacity: 1; width: 48px; }

/* Agrupaciones con fondo suave */
.form-group-soft {
  background: var(--sena-accent-soft);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: .9rem;
  padding: 1.1rem;
}

/* Mensajes de error/success más elegantes */
.alert-sena-error {
  background: #fdecec;
  border: 1px solid #f2c2c2;
  color: #842029;
  border-radius: .6rem;
}
.alert-sena-success {
  background: #eaf7f0;
  border: 1px solid #bfe7cf;
  color: #0f5132;
  border-radius: .6rem;
}

/* Nuevos estilos propuestos */
.form-card { background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:1.1rem; padding:1.6rem 1.4rem; box-shadow:0 10px 30px rgba(0,0,0,.08); position:relative; overflow:hidden; }
.form-card::before { content:""; position:absolute; inset:0; background:linear-gradient(140deg, rgba(243,100,11,.08), transparent 60%); opacity:.7; pointer-events:none; }
.icon-input .input-group-text { font-size:.9rem; }
.icon-input .form-control { border-left:0; }
.icon-input .input-group-text { border-right:0; }
.icon-input .form-control:focus { border-left:0; }
.loading-overlay { position:absolute; inset:0; background:rgba(0,0,0,.45); display:flex; flex-direction:column; justify-content:center; align-items:center; z-index:10; backdrop-filter:blur(3px); }
.loading-overlay .spinner-border { width:2.8rem; height:2.8rem; }
.form-card form.submitting .loading-overlay { display:flex !important; }

/* Carrusel pro: mismo alto/ancho y animación elegante */
.carousel-photo { height: 320px; object-fit: cover; }
.carousel-item { transition: transform .6s ease, opacity .6s ease; }
.carousel-item.active { opacity: 1; }
.carousel-item:not(.active) { opacity: .3; }