{"id":238,"date":"2025-07-22T05:20:03","date_gmt":"2025-07-22T05:20:03","guid":{"rendered":"https:\/\/petrolera.umsa.edu.bo\/?page_id=238"},"modified":"2026-03-22T19:51:23","modified_gmt":"2026-03-22T23:51:23","slug":"horarios","status":"publish","type":"page","link":"https:\/\/petrolera.umsa.edu.bo\/index.php\/horarios\/","title":{"rendered":"Horarios"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"238\" class=\"elementor elementor-238\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c5b38f5 e-flex e-con-boxed e-con e-parent\" data-id=\"c5b38f5\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-dfaeaf1 e-con-full e-flex e-con e-child\" data-id=\"dfaeaf1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-97c5014 elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"97c5014\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">HORARIOS PREGRADO<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-818f867 e-flex e-con-boxed e-con e-parent\" data-id=\"818f867\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6604103 elementor-widget elementor-widget-text-editor\" data-id=\"6604103\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong><span class=\"footer-highlight\">Nota:<\/span><\/strong> Este horario est\u00e1 sujeto a modificaciones seg\u00fan la direcci\u00f3n de carrera. Para informaci\u00f3n actualizada, consulte y verifique con el docente o la Secretar\u00eda de la Carrera de Ingenier\u00eda Petrolera.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c9915a3 elementor-widget elementor-widget-text-editor\" data-id=\"c9915a3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p style=\"text-align: center;\"><em>Horarios Correspondientes al Semestre II\/2025<\/em><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b1367bf elementor-widget elementor-widget-html\" data-id=\"b1367bf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"horario-wrap\">\r\n\r\n  <div class=\"barra-superior\">\r\n    <div class=\"selector-container\">\r\n      <label for=\"selectorSemestre\">Seleccionar Semestre:<\/label>\r\n      <select id=\"selectorSemestre\">\r\n        <option value=\"0\">Semestre 1<\/option>\r\n        <option value=\"1\">Semestre 2<\/option>\r\n        <option value=\"2\">Semestre 3<\/option>\r\n        <option value=\"3\">Semestre 4<\/option>\r\n        <option value=\"4\">Semestre 5<\/option>\r\n        <option value=\"5\">Semestre 6<\/option>\r\n        <option value=\"6\">Semestre 7<\/option>\r\n        <option value=\"7\">Semestre 8<\/option>\r\n        <option value=\"8\">Semestre 9<\/option>\r\n        <option value=\"9\">Semestre 10<\/option>\r\n      <\/select>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"tabla-container\">\r\n    <!-- \ud83d\udd04 INDICADOR DE CARGA SUPERPUESTO -->\r\n    <div class=\"loader-overlay\" id=\"loader\">\r\n      <div class=\"loader-content\">\r\n        <div class=\"spinner\"><\/div>\r\n        <p>Cargando horario...<\/p>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"tabla-scroll\">\r\n      <table id=\"horario\">\r\n        <thead><\/thead>\r\n        <tbody><\/tbody>\r\n      <\/table>\r\n    <\/div>\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n<style>\r\n.horario-wrap{\r\n  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;\r\n}\r\n\r\n\/* barra superior - ALINEADO A LA IZQUIERDA *\/\r\n.barra-superior{\r\n  display:flex;\r\n  justify-content:flex-start;\r\n  margin-bottom:18px;\r\n}\r\n\r\n\/* contenedor del selector *\/\r\n.selector-container{\r\n  display:flex;\r\n  flex-direction:column;\r\n  gap:6px;\r\n}\r\n\r\n\/* etiqueta *\/\r\n.selector-container label{\r\n  font-size:14px;\r\n  font-weight:600;\r\n  color:#334155;\r\n}\r\n\r\n\/* selector *\/\r\n#selectorSemestre{\r\n  width:180px;\r\n  padding:9px 12px;\r\n  border-radius:10px;\r\n  border:1px solid #cbd5e1;\r\n  font-weight:600;\r\n}\r\n\r\n\/* \ud83d\udce6 CONTENEDOR DE TABLA *\/\r\n.tabla-container{\r\n  position:relative;\r\n  min-height:400px;\r\n}\r\n\r\n\/* \ud83d\udd04 LOADER - OVERLAY SUPERPUESTO *\/\r\n.loader-overlay{\r\n  position:absolute;\r\n  top:0;\r\n  left:0;\r\n  right:0;\r\n  bottom:0;\r\n  background:rgba(255,255,255,0.85);\r\n  backdrop-filter:blur(3px);\r\n  display:none;\r\n  align-items:center;\r\n  justify-content:center;\r\n  z-index:100;\r\n  border-radius:10px;\r\n}\r\n\r\n.loader-overlay.activo{\r\n  display:flex;\r\n}\r\n\r\n.loader-content{\r\n  display:flex;\r\n  flex-direction:column;\r\n  align-items:center;\r\n  gap:15px;\r\n  padding:30px;\r\n  background:#ffffff;\r\n  border-radius:12px;\r\n  box-shadow:0 4px 20px rgba(0,0,0,0.1);\r\n}\r\n\r\n.spinner{\r\n  width:45px;\r\n  height:45px;\r\n  border:4px solid #e2e8f0;\r\n  border-top:4px solid #ffcc00;\r\n  border-radius:50%;\r\n  animation:girar 0.8s linear infinite;\r\n}\r\n\r\n@keyframes girar{\r\n  0%{transform:rotate(0deg);}\r\n  100%{transform:rotate(360deg);}\r\n}\r\n\r\n.loader-content p{\r\n  font-size:15px;\r\n  color:#64748b;\r\n  font-weight:500;\r\n  margin:0;\r\n}\r\n\r\n\/* contenedor *\/\r\n.tabla-scroll{\r\n  overflow-x:auto;\r\n  border-radius:10px;\r\n  background:#ffffff;\r\n}\r\n\r\n\/* tabla *\/\r\n#horario{\r\n  width:100%;\r\n  min-width:900px;\r\n  border-collapse:separate;\r\n  border-spacing:0;\r\n  table-layout:fixed;\r\n  border-radius:10px;\r\n  overflow:hidden;\r\n  background:#fbfbfb;\r\n}\r\n\r\n\/* barra d\u00edas *\/\r\n#horario th{\r\n  background:#ffcc00;\r\n  color:#000;\r\n  padding:13px 6px;\r\n  font-size:13px;\r\n  border:1px solid #e2e8f0;\r\n  font-weight:700;\r\n}\r\n\r\n\/* barra horas *\/\r\n#horario td:first-child{\r\n  width:105px;\r\n  white-space:nowrap;\r\n  background:#fdfdfd;\r\n  color:#0453c;\r\n  font-weight:700;\r\n}\r\n\r\n\/* celdas - ALTURA COMPRIMIDA *\/\r\n#horario td{\r\n  background:#fdfdfd;\r\n  padding:8px 8px;\r\n  text-align:center;\r\n  font-size:13px;\r\n  border:1px solid #ebebeb;\r\n  word-break:break-word;\r\n  transition:.18s;\r\n  line-height:1.3;\r\n}\r\n\r\n\/* materias - FORMATO MULTI-L\u00cdNEA *\/\r\n#horario td.materia{\r\n  font-weight:600;\r\n  color:#0f172a;\r\n  line-height:1.3;\r\n  vertical-align:middle;\r\n  white-space:normal;\r\n}\r\n\r\n\/* l\u00edneas de texto en materias *\/\r\n#horario td.materia .codigo{\r\n  display:block;\r\n  font-weight:700;\r\n  font-size:12px;\r\n  margin-bottom:1px;\r\n}\r\n\r\n#horario td.materia .nombre{\r\n  display:block;\r\n  font-size:11px;\r\n  font-weight:600;\r\n}\r\n\r\n#horario td.materia .docente{\r\n  display:block;\r\n  font-size:10px;\r\n  font-weight:500;\r\n  margin-top:1px;\r\n  opacity:0.85;\r\n}\r\n\r\n#horario td.materia .aula{\r\n  display:block;\r\n  font-size:10px;\r\n  font-weight:500;\r\n  opacity:0.85;\r\n}\r\n\r\n\/* \ud83d\udcf1 Ajustes para m\u00f3vil *\/\r\n@media (max-width: 768px) {\r\n  .selector-container label{\r\n    font-size:13px;\r\n  }\r\n  \r\n  .tabla-container{\r\n    min-height:350px;\r\n  }\r\n  \r\n  .loader-content{\r\n    padding:25px;\r\n  }\r\n  \r\n  .spinner{\r\n    width:40px;\r\n    height:40px;\r\n  }\r\n  \r\n  .loader-content p{\r\n    font-size:14px;\r\n  }\r\n  \r\n  #horario th {\r\n    font-size: 11px;\r\n    padding: 10px 4px;\r\n  }\r\n  \r\n  #horario td {\r\n    font-size: 10px;\r\n    padding: 6px 4px;\r\n    line-height:1.2;\r\n  }\r\n  \r\n  #horario td:first-child {\r\n    font-size: 10px;\r\n    width: 85px;\r\n  }\r\n  \r\n  #selectorSemestre {\r\n    font-size: 13px;\r\n  }\r\n  \r\n  #horario td.materia{\r\n    line-height:1.2;\r\n  }\r\n  \r\n  #horario td.materia .codigo{\r\n    font-size:10px;\r\n    margin-bottom:0px;\r\n  }\r\n  \r\n  #horario td.materia .nombre{\r\n    font-size:9px;\r\n  }\r\n  \r\n  #horario td.materia .docente,\r\n  #horario td.materia .aula{\r\n    font-size:8px;\r\n    margin-top:0px;\r\n  }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .selector-container label{\r\n    font-size:12px;\r\n  }\r\n  \r\n  .tabla-container{\r\n    min-height:300px;\r\n  }\r\n  \r\n  .loader-content{\r\n    padding:20px;\r\n  }\r\n  \r\n  .spinner{\r\n    width:35px;\r\n    height:35px;\r\n  }\r\n  \r\n  .loader-content p{\r\n    font-size:13px;\r\n  }\r\n  \r\n  #horario th {\r\n    font-size: 10px;\r\n    padding: 8px 3px;\r\n  }\r\n  \r\n  #horario td {\r\n    font-size: 9px;\r\n    padding: 5px 3px;\r\n    line-height:1.2;\r\n  }\r\n  \r\n  #horario td:first-child {\r\n    font-size: 9px;\r\n    width: 75px;\r\n  }\r\n  \r\n  #horario td.materia{\r\n    line-height:1.2;\r\n  }\r\n  \r\n  #horario td.materia .codigo{\r\n    font-size:9px;\r\n  }\r\n  \r\n  #horario td.materia .nombre{\r\n    font-size:8px;\r\n  }\r\n  \r\n  #horario td.materia .docente,\r\n  #horario td.materia .aula{\r\n    font-size:7px;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n\/\/ ===== URLs =====\r\nconst hojas = {\r\n  0:\"https:\/\/docs.google.com\/spreadsheets\/d\/e\/2PACX-1vTA0HJxz2l2uqtdlA5q8Jd2GdqstwC5rYAwEkOvEdHgY2OWj_jlDIu1Al8RrvLJRLSGo4JZqNt64hbu\/pub?gid=0&single=true&output=csv\",\r\n  1:\"https:\/\/docs.google.com\/spreadsheets\/d\/e\/2PACX-1vTA0HJxz2l2uqtdlA5q8Jd2GdqstwC5rYAwEkOvEdHgY2OWj_jlDIu1Al8RrvLJRLSGo4JZqNt64hbu\/pub?gid=959651549&single=true&output=csv\",\r\n  2:\"https:\/\/docs.google.com\/spreadsheets\/d\/e\/2PACX-1vTA0HJxz2l2uqtdlA5q8Jd2GdqstwC5rYAwEkOvEdHgY2OWj_jlDIu1Al8RrvLJRLSGo4JZqNt64hbu\/pub?gid=106615418&single=true&output=csv\",\r\n  3:\"https:\/\/docs.google.com\/spreadsheets\/d\/e\/2PACX-1vTA0HJxz2l2uqtdlA5q8Jd2GdqstwC5rYAwEkOvEdHgY2OWj_jlDIu1Al8RrvLJRLSGo4JZqNt64hbu\/pub?gid=2021698857&single=true&output=csv\",\r\n  4:\"https:\/\/docs.google.com\/spreadsheets\/d\/e\/2PACX-1vTA0HJxz2l2uqtdlA5q8Jd2GdqstwC5rYAwEkOvEdHgY2OWj_jlDIu1Al8RrvLJRLSGo4JZqNt64hbu\/pub?gid=163618645&single=true&output=csv\",\r\n  5:\"https:\/\/docs.google.com\/spreadsheets\/d\/e\/2PACX-1vTA0HJxz2l2uqtdlA5q8Jd2GdqstwC5rYAwEkOvEdHgY2OWj_jlDIu1Al8RrvLJRLSGo4JZqNt64hbu\/pub?gid=150855833&single=true&output=csv\",\r\n  6:\"https:\/\/docs.google.com\/spreadsheets\/d\/e\/2PACX-1vTA0HJxz2l2uqtdlA5q8Jd2GdqstwC5rYAwEkOvEdHgY2OWj_jlDIu1Al8RrvLJRLSGo4JZqNt64hbu\/pub?gid=1430351945&single=true&output=csv\",\r\n  7:\"https:\/\/docs.google.com\/spreadsheets\/d\/e\/2PACX-1vTA0HJxz2l2uqtdlA5q8Jd2GdqstwC5rYAwEkOvEdHgY2OWj_jlDIu1Al8RrvLJRLSGo4JZqNt64hbu\/pub?gid=709512992&single=true&output=csv\",\r\n  8:\"https:\/\/docs.google.com\/spreadsheets\/d\/e\/2PACX-1vTA0HJxz2l2uqtdlA5q8Jd2GdqstwC5rYAwEkOvEdHgY2OWj_jlDIu1Al8RrvLJRLSGo4JZqNt64hbu\/pub?gid=1982228003&single=true&output=csv\",\r\n  9:\"https:\/\/docs.google.com\/spreadsheets\/d\/e\/2PACX-1vTA0HJxz2l2uqtdlA5q8Jd2GdqstwC5rYAwEkOvEdHgY2OWj_jlDIu1Al8RrvLJRLSGo4JZqNt64hbu\/pub?gid=2117031145&single=true&output=csv\"\r\n};\r\n\r\n\/\/ \ud83c\udfa8 colores m\u00e1s claros y vibrantes\r\nconst mapaColores = {};\r\nconst paleta = [\r\n  \"#bfdbfe\", \/\/ azul claro\r\n  \"#bbf7d0\", \/\/ verde claro\r\n  \"#95b8a5\", \/\/ verde oscuro \r\n  \"#a99762\", \/\/ cafe claro\r\n  \"#ddd6fe\", \/\/ morado claro\r\n  \"#a5f3fc\", \/\/ cyan claro\r\n  \"#fecaca\", \/\/ rojo claro\r\n  \"#fde047\", \/\/ amarillo claro\r\n  \"#c7d2fe\", \/\/ \u00edndigo claro\r\n  \"#d9f99d\", \/\/ lima claro\r\n  \"#fcd34d\", \/\/ \u00e1mbar claro\r\n  \"#f9a8d4\"  \/\/ pink claro\r\n];\r\n\r\n\/\/ \ud83d\udd11 Funci\u00f3n para extraer c\u00f3digo de materia (ej: PET-230)\r\nfunction extraerCodigo(nombre){\r\n  const match = nombre.match(\/[A-Z]{3}-\\d{3}\/);\r\n  return match ? match[0] : nombre;\r\n}\r\n\r\nfunction colorMateria(nombre){\r\n  const codigo = extraerCodigo(nombre);\r\n  \r\n  if(!mapaColores[codigo]){\r\n    const i = Object.keys(mapaColores).length % paleta.length;\r\n    mapaColores[codigo] = paleta[i];\r\n  }\r\n  return mapaColores[codigo];\r\n}\r\n\r\n\/\/ \ud83d\udcdd Funci\u00f3n para parsear y formatear el texto de la materia\r\nfunction formatearMateria(texto){\r\n  \/\/ Detectar formato con saltos de l\u00ednea\r\n  const lineas = texto.split('\\n').map(l => l.trim()).filter(l => l);\r\n  \r\n  if(lineas.length >= 2){\r\n    \/\/ Tiene formato multi-l\u00ednea\r\n    const html = [];\r\n    \r\n    \/\/ Primera l\u00ednea suele ser el c\u00f3digo\r\n    if(lineas[0].match(\/[A-Z]{3}-\\d{3}\/)){\r\n      html.push(`<span class=\"codigo\">${lineas[0]}<\/span>`);\r\n    } else {\r\n      html.push(`<span class=\"nombre\">${lineas[0]}<\/span>`);\r\n    }\r\n    \r\n    \/\/ Resto de l\u00edneas\r\n    for(let i = 1; i < lineas.length; i++){\r\n      if(lineas[i].toLowerCase().includes('doc:') || lineas[i].toLowerCase().includes('ing ') || lineas[i].toLowerCase().includes('lic ') || lineas[i].toLowerCase().includes('dr ')){\r\n        html.push(`<span class=\"docente\">${lineas[i]}<\/span>`);\r\n      } else if(lineas[i].toLowerCase().includes('aula:')){\r\n        html.push(`<span class=\"aula\">${lineas[i]}<\/span>`);\r\n      } else {\r\n        \/\/ Si no tiene prefijo reconocido, tratarlo como nombre o info adicional\r\n        html.push(`<span class=\"nombre\">${lineas[i]}<\/span>`);\r\n      }\r\n    }\r\n    \r\n    return html.join('');\r\n  } else {\r\n    \/\/ Formato simple en una l\u00ednea\r\n    return `<span class=\"codigo\">${texto}<\/span>`;\r\n  }\r\n}\r\n\r\n\/\/ ===== parser =====\r\nfunction parseCSV(text){\r\n  const rows=[]; let row=[],cell=\"\",inside=false;\r\n  for(let c of text){\r\n    if(c=='\"') inside=!inside;\r\n    else if(c==\",\"&&!inside){row.push(cell);cell=\"\";}\r\n    else if(c==\"\\n\"&&!inside){row.push(cell);rows.push(row);row=[];cell=\"\";}\r\n    else cell+=c;\r\n  }\r\n  if(cell){row.push(cell);rows.push(row);}\r\n  return rows;\r\n}\r\n\r\n\/\/ \ud83d\udd04 Mostrar\/Ocultar loader\r\nfunction mostrarLoader(){\r\n  document.getElementById('loader').classList.add('activo');\r\n}\r\n\r\nfunction ocultarLoader(){\r\n  document.getElementById('loader').classList.remove('activo');\r\n}\r\n\r\n\/\/ ===== construir =====\r\nfunction construirTabla(data){\r\n  const thead=document.querySelector(\"#horario thead\");\r\n  const tbody=document.querySelector(\"#horario tbody\");\r\n  thead.innerHTML=\"\"; tbody.innerHTML=\"\";\r\n\r\n  const trH=document.createElement(\"tr\");\r\n  data[0].forEach(t=>{\r\n    const th=document.createElement(\"th\");\r\n    th.textContent=t;\r\n    trH.appendChild(th);\r\n  });\r\n  thead.appendChild(trH);\r\n\r\n  const cols=data[0].length;\r\n  const ocupadas=Array.from({length:data.length},()=>Array(cols).fill(false));\r\n\r\n  for(let i=1;i<data.length;i++){\r\n    const tr=document.createElement(\"tr\");\r\n\r\n    for(let j=0;j<cols;j++){\r\n      if(ocupadas[i][j]) continue;\r\n\r\n      const texto=data[i][j]||\"\";\r\n      const td=document.createElement(\"td\");\r\n\r\n      if(j===0){\r\n        td.textContent=texto;\r\n        tr.appendChild(td);\r\n        continue;\r\n      }\r\n\r\n      if(texto.trim()!==\"\"){\r\n        td.classList.add(\"materia\");\r\n        td.style.background = colorMateria(texto);\r\n\r\n        let span=1;\r\n        for(let k=i+1;k<data.length;k++){\r\n          if(data[k][j]===texto){\r\n            ocupadas[k][j]=true;\r\n            span++;\r\n          } else break;\r\n        }\r\n        if(span>1) td.rowSpan=span;\r\n        \r\n        \/\/ Usar innerHTML con el formato multi-l\u00ednea\r\n        td.innerHTML = formatearMateria(texto);\r\n        \r\n        tr.appendChild(td);\r\n      }else{\r\n        td.textContent=\"\";\r\n        tr.appendChild(td);\r\n      }\r\n    }\r\n    tbody.appendChild(tr);\r\n  }\r\n}\r\n\r\n\/\/ ===== cargar =====\r\nasync function cargarHorario(sem){\r\n  const url=hojas[sem];\r\n  if(!url) return;\r\n\r\n  \/\/ \ud83d\udd04 Mostrar loader\r\n  mostrarLoader();\r\n\r\n  try{\r\n    const res=await fetch(url);\r\n    const txt=await res.text();\r\n    const data=parseCSV(txt.trim());\r\n    construirTabla(data);\r\n  } catch(error){\r\n    console.error('Error al cargar horario:', error);\r\n  } finally{\r\n    \/\/ \u23f1\ufe0f Peque\u00f1o delay para que se vea el loader\r\n    setTimeout(ocultarLoader, 400);\r\n  }\r\n}\r\n\r\n\/\/ selector\r\ndocument.getElementById(\"selectorSemestre\")\r\n  .addEventListener(\"change\",function(){\r\n    cargarHorario(this.value);\r\n  });\r\n\r\n\/\/ inicial\r\ncargarHorario(\"0\");\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b4df410 e-flex e-con-boxed e-con e-parent\" data-id=\"b4df410\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d97d435 elementor-widget elementor-widget-html\" data-id=\"d97d435\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"es\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Secci\u00f3n de Navegaci\u00f3n<\/title>\r\n    <style>\r\n        .navigation-section {\r\n            width: 100%;\r\n            max-width: 1400px;\r\n            margin: 0 auto;\r\n            padding: 60px 20px;\r\n        }\r\n\r\n        .section-header {\r\n            text-align: center;\r\n            margin-bottom: 40px;\r\n        }\r\n\r\n        .section-header h2 {\r\n            color: #00453C;\r\n            font-size: 2.5rem;\r\n            font-weight: 700;\r\n            margin-bottom: 15px;\r\n            position: relative;\r\n            display: inline-block;\r\n        }\r\n\r\n        .section-header h2::after {\r\n            content: '';\r\n            position: absolute;\r\n            bottom: -12px;\r\n            left: 50%;\r\n            transform: translateX(-50%);\r\n            width: 100px;\r\n            height: 4px;\r\n            background: #ffcc00;\r\n            border-radius: 2px;\r\n        }\r\n\r\n        .section-header p {\r\n            color: #666;\r\n            font-size: 1.1rem;\r\n            margin-top: 25px;\r\n            line-height: 1.6;\r\n        }\r\n\r\n        .nav-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(4, 1fr);\r\n            gap: 20px;\r\n            width: 100%;\r\n        }\r\n\r\n        .nav-card {\r\n            position: relative;\r\n            background: white;\r\n            border-radius: 16px;\r\n            overflow: hidden;\r\n            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n            border: 3px solid transparent;\r\n            cursor: pointer;\r\n            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);\r\n            aspect-ratio: 1 \/ 1;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n        }\r\n\r\n        .nav-card::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: linear-gradient(135deg, #00453C 0%, #006b5a 100%);\r\n            z-index: 0;\r\n            transition: transform 0.4s ease;\r\n        }\r\n\r\n        .nav-card:hover::before {\r\n            transform: scale(1.08);\r\n        }\r\n\r\n        .nav-card:hover {\r\n            transform: translateY(-12px);\r\n            box-shadow: 0 20px 45px rgba(0, 69, 60, 0.35);\r\n            border-color: #ffcc00;\r\n        }\r\n\r\n        .nav-card-content {\r\n            position: relative;\r\n            z-index: 1;\r\n            padding: 7%;\r\n            text-align: center;\r\n            color: white;\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n            justify-content: space-between;\r\n            height: 100%;\r\n            width: 100%;\r\n        }\r\n\r\n        .nav-icon {\r\n            width: 16%;\r\n            height: 16%;\r\n            max-width: 60px;\r\n            max-height: 60px;\r\n            min-width: 35px;\r\n            min-height: 35px;\r\n            margin: 0 auto;\r\n            background: #ffcc00;\r\n            border-radius: 50%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            font-size: clamp(1rem, 4.5vw, 1.7rem);\r\n            transition: all 0.4s ease;\r\n            box-shadow: 0 6px 20px rgba(255, 204, 0, 0.35);\r\n            flex-shrink: 0;\r\n        }\r\n\r\n        .nav-card:hover .nav-icon {\r\n            transform: rotateY(360deg) scale(1.1);\r\n            background: #ffd633;\r\n            box-shadow: 0 10px 30px rgba(255, 204, 0, 0.55);\r\n        }\r\n\r\n        .nav-text-content {\r\n            flex-grow: 1;\r\n            display: flex;\r\n            flex-direction: column;\r\n            justify-content: center;\r\n            margin: 4% 0;\r\n            overflow: hidden;\r\n        }\r\n\r\n        .nav-card h3 {\r\n            font-size: clamp(0.7rem, 2.2vw, 0.95rem);\r\n            margin-bottom: 2%;\r\n            font-weight: 600;\r\n            color: white;\r\n            line-height: 1.15;\r\n        }\r\n\r\n        .nav-card p {\r\n            font-size: clamp(0.55rem, 1.5vw, 0.7rem);\r\n            color: rgba(255, 255, 255, 0.92);\r\n            line-height: 1.25;\r\n        }\r\n\r\n        .nav-btn {\r\n            display: inline-block;\r\n            padding: clamp(6px, 2.5%, 10px) clamp(14px, 5%, 22px);\r\n            background: #ffcc00;\r\n            color: #00453C;\r\n            text-decoration: none;\r\n            border-radius: 20px;\r\n            font-weight: 600;\r\n            font-size: clamp(0.6rem, 1.8vw, 0.8rem);\r\n            transition: all 0.3s ease;\r\n            border: 2px solid #ffcc00;\r\n            flex-shrink: 0;\r\n            white-space: nowrap;\r\n        }\r\n\r\n        .nav-btn:hover {\r\n            background: transparent;\r\n            color: #ffcc00;\r\n            transform: scale(1.05);\r\n        }\r\n\r\n        \/* Animaci\u00f3n de entrada *\/\r\n        @keyframes fadeInUp {\r\n            from {\r\n                opacity: 0;\r\n                transform: translateY(40px);\r\n            }\r\n            to {\r\n                opacity: 1;\r\n                transform: translateY(0);\r\n            }\r\n        }\r\n\r\n        .nav-card {\r\n            animation: fadeInUp 0.7s ease forwards;\r\n            opacity: 0;\r\n        }\r\n\r\n        .nav-card:nth-child(1) { animation-delay: 0.1s; }\r\n        .nav-card:nth-child(2) { animation-delay: 0.2s; }\r\n        .nav-card:nth-child(3) { animation-delay: 0.3s; }\r\n        .nav-card:nth-child(4) { animation-delay: 0.4s; }\r\n\r\n        \/* Tablet *\/\r\n        @media (max-width: 1024px) {\r\n            .nav-grid {\r\n                grid-template-columns: repeat(2, 1fr);\r\n                gap: 20px;\r\n            }\r\n        }\r\n\r\n        \/* Mobile - 2 columnas *\/\r\n        @media (max-width: 768px) {\r\n            .navigation-section {\r\n                padding: 30px 12px;\r\n            }\r\n\r\n            .section-header {\r\n                margin-bottom: 25px;\r\n            }\r\n\r\n            .section-header h2 {\r\n                font-size: 1.5rem;\r\n                margin-bottom: 10px;\r\n            }\r\n\r\n            .section-header h2::after {\r\n                width: 60px;\r\n                height: 3px;\r\n                bottom: -8px;\r\n            }\r\n\r\n            .section-header p {\r\n                font-size: 0.85rem;\r\n                margin-top: 15px;\r\n                line-height: 1.4;\r\n            }\r\n\r\n            .nav-grid {\r\n                grid-template-columns: repeat(2, 1fr);\r\n                gap: 12px;\r\n            }\r\n\r\n            .nav-card {\r\n                border-radius: 12px;\r\n                border-width: 2px;\r\n            }\r\n\r\n            .nav-card:hover {\r\n                transform: translateY(-6px);\r\n            }\r\n\r\n            .nav-card-content {\r\n                padding: 6%;\r\n            }\r\n        }\r\n\r\n        \/* Mobile muy peque\u00f1o *\/\r\n        @media (max-width: 480px) {\r\n            .navigation-section {\r\n                padding: 25px 10px;\r\n            }\r\n\r\n            .section-header h2 {\r\n                font-size: 1.3rem;\r\n            }\r\n\r\n            .section-header p {\r\n                font-size: 0.8rem;\r\n            }\r\n\r\n            .nav-grid {\r\n                gap: 10px;\r\n            }\r\n\r\n            .nav-card-content {\r\n                padding: 5%;\r\n            }\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <section class=\"navigation-section\">\r\n        <div class=\"section-header\">\r\n            <h2>Accesos R\u00e1pidos<\/h2>\r\n            <p>Encuentra toda la informaci\u00f3n acad\u00e9mica que necesitas<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"nav-grid\">\r\n            <div class=\"nav-card\">\r\n                <div class=\"nav-card-content\">\r\n                    <div class=\"nav-icon\">\ud83d\udc68\u200d\ud83c\udfeb<\/div>\r\n                    <div class=\"nav-text-content\">\r\n                        <h3>Docentes<\/h3>\r\n                        <p>Conoce a nuestro equipo docente, trayectoria y \u00e1reas de especializaci\u00f3n<\/p>\r\n                    <\/div>\r\n                    <a href=\"https:\/\/petrolera.umsa.edu.bo\/index.php\/docentes\" class=\"nav-btn\">Ver Docentes<\/a>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"nav-card\">\r\n                <div class=\"nav-card-content\">\r\n                    <div class=\"nav-icon\">\ud83d\udcda<\/div>\r\n                    <div class=\"nav-text-content\">\r\n                        <h3>Plan de Estudios Pregrado<\/h3>\r\n                        <p>Conoce la estructura curricular y malla acad\u00e9mica completa<\/p>\r\n                    <\/div>\r\n                    <a href=\"https:\/\/petrolera.umsa.edu.bo\/index.php\/plan-de-estudios\" class=\"nav-btn\">Explorar Plan<\/a>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"nav-card\">\r\n                <div class=\"nav-card-content\">\r\n                    <div class=\"nav-icon\">\ud83d\udcd6<\/div>\r\n                    <div class=\"nav-text-content\">\r\n                        <h3>Biblioteca<\/h3>\r\n                        <p>Accede al cat\u00e1logo digital y recursos bibliogr\u00e1ficos, Pr\u00e1cticas de Campo, Proyectos de Grado, Proyectos de Maestr\u00eda y mucho m\u00e1s en l\u00ednea<\/p>\r\n                    <\/div>\r\n                    <a href=\"https:\/\/petrolera.umsa.edu.bo\/index.php\/biblioteca\" class=\"nav-btn\">Ir a Biblioteca<\/a>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"nav-card\">\r\n                <div class=\"nav-card-content\">\r\n                    <div class=\"nav-icon\">\ud83d\udd2c<\/div>\r\n                    <div class=\"nav-text-content\">\r\n                        <h3>Instituto de Investigaciones en Ingenier\u00eda Petrolera<\/h3>\r\n                        <p>Proyectos,Revistas publicaciones y avances cient\u00edficos institucionales<\/p>\r\n                    <\/div>\r\n                    <a href=\"https:\/\/petrolera.umsa.edu.bo\/index.php\/inspet\" class=\"nav-btn\">Conocer M\u00e1s<\/a>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <script>\r\n        \/\/ Efecto parallax suave solo en desktop\r\n        if (window.innerWidth > 768) {\r\n            document.addEventListener('mousemove', (e) => {\r\n                const cards = document.querySelectorAll('.nav-card');\r\n                const x = e.clientX \/ window.innerWidth;\r\n                const y = e.clientY \/ window.innerHeight;\r\n                \r\n                cards.forEach((card, index) => {\r\n                    if (!card.matches(':hover')) {\r\n                        const speed = (index + 1) * 1.5;\r\n                        const xOffset = (x - 0.5) * speed;\r\n                        const yOffset = (y - 0.5) * speed;\r\n                        card.style.transform = `translate(${xOffset}px, ${yOffset}px)`;\r\n                    }\r\n                });\r\n            });\r\n        }\r\n    <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>HORARIOS PREGRADO Nota: Este horario est\u00e1 sujeto a modificaciones seg\u00fan la direcci\u00f3n de carrera. Para informaci\u00f3n actualizada, consulte y verifique [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-238","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/petrolera.umsa.edu.bo\/index.php\/wp-json\/wp\/v2\/pages\/238","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/petrolera.umsa.edu.bo\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/petrolera.umsa.edu.bo\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/petrolera.umsa.edu.bo\/index.php\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/petrolera.umsa.edu.bo\/index.php\/wp-json\/wp\/v2\/comments?post=238"}],"version-history":[{"count":291,"href":"https:\/\/petrolera.umsa.edu.bo\/index.php\/wp-json\/wp\/v2\/pages\/238\/revisions"}],"predecessor-version":[{"id":10200,"href":"https:\/\/petrolera.umsa.edu.bo\/index.php\/wp-json\/wp\/v2\/pages\/238\/revisions\/10200"}],"wp:attachment":[{"href":"https:\/\/petrolera.umsa.edu.bo\/index.php\/wp-json\/wp\/v2\/media?parent=238"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}