/* CONTENEDOR PRINCIPAL DE EXPERIENCIA */
.experiencia-lista {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  width: 100%;
  max-width: 800px;
}

/* Cada item (li) */
.experiencia-lista li {
  margin-bottom: 1.2rem;
  width: 100%;
}

/* details = contenedor clickeable */
.experiencia-lista details {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* summary = encabezado del item */
.experiencia-lista summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; /* para que no crezca horizontal */
  padding: 20px;
  background-color: #f0f4ff;
  border-left: 4px solid #007BFF;
  border-radius: 6px;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}

/* Elimina el marcador del summary */
.experiencia-lista summary::-webkit-details-marker {
  display: none;
}

/* Flecha que gira */
.experiencia-lista summary::after {
  content: '▸';
  font-size: 12px;
  margin-left: 8px;
  transition: transform 0.2s ease;
}
.experiencia-lista details[open] summary::after {
  transform: rotate(90deg);
}

/* Efecto visual al pasar el mouse */
.experiencia-lista summary:hover {
  background-color: #e6eeff;
  transform: translateY(2px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Contenedor del lado izquierdo del summary */
.summary-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}

/* Logo de la empresa */
.logo {
  width: 50px;
  height: 50px;
  object-fit: contain;
  border-radius: 4px;
}

/* Texto: Puesto y empresa */
.puesto {
  font-weight: 600;
  font-size: 18px;
  display: block;
  margin-bottom: 2px;
}

.empresa {
  font-size: 14px;
  color: #555;
  display: block;
}

/* Contenedor derecho: Fecha + antigüedad */
.fecha-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  padding-left: 12px;
  min-width: max-content;
}

.fecha {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 4px;
  white-space: nowrap;
}

.antiguedad {
  font-size: 13px;
  color: #666;
  white-space: nowrap;
}

.antiguedad_sinjs {
  font-size: 13px;
  color: #666;
  white-space: nowrap;
}

/* Detalle del item desplegable */
.detalle {
  width: 95%;
  margin: 6px auto 0;
  padding: 14px 20px;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-left: 4px solid #007BFF;
  border-radius: 0 6px 6px 6px;
  line-height: 1.5;
  box-sizing: border-box;
  word-break: break-word;
  overflow-wrap: break-word;
}

.detalle p {
  margin: 6px 0;
  font-size: 14px;
  color: #333;
}

/* Evita que el ítem salte hacia arriba al hacer clic */
.experiencia-lista details {
  position: relative;
  margin-top: 0;
  margin-bottom: 1.2rem;
  scroll-margin-top: 20px; /* mejora el comportamiento al abrir */
  transition: all 0.3s ease;
}

/* Fuerza altura mínima del summary para evitar colapsos visuales */
.experiencia-lista summary {
  min-height: 80px;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Hace que el contenido general fluya suave cuando se expande */
.marcoContenido {
  scroll-behavior: smooth;
  position: relative;
}


.logo-stack {
  display: flex;
  flex-direction: column;
  gap: 6px; /* espacio entre imágenes */
}




/* Cuadro informativo pequeño y discreto */
.item-estatico.chico {
  background-color: #f4f4f4;              /* gris claro neutro */
  border-left: 4px solid #cccccc;         /* gris medio */
  border-radius: 6px;
  padding: 8px 12px;                      /* menos padding */
  margin: 0 auto 0.75rem auto;            /* centrado y menor separación inferior */

  display: flex;
  justify-content: center;                /* centrado horizontal del contenido */
  align-items: center;                    /* centrado vertical */
  text-align: center;

  width: 35%;                             /* más estrecho */
  max-width: 420px;
  min-width: 240px;

  font-size: 7px;                      /* texto más discreto */
  color: #555;                            /* texto gris oscuro */

  box-sizing: border-box;
  box-shadow: none;                       /* sin sombra para no resaltar */
}

/* Texto de puesto */
.item-estatico.chico .puesto {
  font-size: 9px; 
  font-weight: 500;
  color: #444;
  line-height: 1.2;
}

/* (Opcional) Si decides incluir logo, lo puedes reducir aún más */
.item-estatico.chico .logo {
  width: 25px;
  height: 25px;
  margin-right: 10px;
  opacity: 0.7;
}




/* Estilo general del contenido de detalle */
.educacion .detalle {
  font-size: 13px;
  line-height: 1.5;
  color: #333;
}

/* Lista de logros y materias */
.educacion .detalle ul {
  padding-left: 1.2rem;
  margin-top: 0.2rem;
  margin-bottom: 1rem;
  list-style-type: disc;
}

/* Diseño en columnas para materias */
.educacion .materias {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: -0.2rem;
}

.educacion .materias ul {
  flex: 1;
  padding-left: 1.2rem;
  margin: 0;
  list-style-type: disc;
}

.educacion .materias li {
  margin-bottom: 4px;
}

.publicacion {
  margin-top: 12px;
  margin-bottom: 8px;
}

.publicacion p {
  margin: 0;
  font-size: 14px;
}

.contenido-publicacion {
  margin-left: 18px;
  font-size: 13px;
  color: #333;
}


.materias {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.materias ul {
  list-style-type: disc;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.4;
  margin: 0;
}

.materias li {
  margin-bottom: 4px;
}








.lista-proyectos-custom {
  list-style: none;
  padding-left: 20px;
  margin-top: 10px;
}

.lista-proyectos-custom li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
}

.lista-proyectos-custom li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: #336B87;
  font-size: 16px;
  font-weight: bold;
}

.lista-proyectos-custom a {
  text-decoration: none;
  color: #003B46;
}

/* Espaciador entre imagen y lista */
.espaciador {
  margin-top: 20px;
}

.categoria {
  margin-bottom: 15px;
}

.categoria-btn {
  background-color: transparent;
  border: none;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  color: #003B46;
  padding: 5px 0;
  text-align: left;
  width: 100%;
}

.lista-proyectos-custom {
  list-style: none;
  padding-left: 20px;
  margin-top: 8px;
}

.lista-proyectos-custom li {
  margin-bottom: 6px;
  position: relative;
  padding-left: 20px;
}

.lista-proyectos-custom li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: #336B87;
}

.lista-proyectos-custom a {
  text-decoration: none;
  color: #003B46;
}

.oculto {
  display: none;
}