/*
Theme Name: Astra Child
Template: astra
Version: 1.0.0
*/

body {
    font-family: 'Inter', sans-serif;
    
}

aside details summary {
    cursor: pointer;
    background-color: #263551;
    color: #fff;
    padding: 10px 15px;
    margin-bottom: 5px;
    border-radius: 4px;
    font-weight: bold;
    transition: background-color 0.3s;
}

aside details summary:hover {
    background-color: #e1cf79;
}

aside details ul {
    padding-left: 0px;
    margin: 5px 0 15px;
}

aside details ul li {
    list-style: none;
    margin: 5px 0;
}

aside details ul li a {
    color: #0056b3;
    text-decoration: none;
}

aside details ul li a:hover {
    text-decoration: none;
}



aside details ul li a {
    display:block;
    background-color: #ffffff; /* Gris claro */
    padding: 8px 12px;
    border-radius: 4px;
    color: #5d5d5d; /* Azul */
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
}

aside details ul li a:hover {
    background-color: #d9c76f; /* Azul claro */
    color: #fff; /* Blanco */
}


aside details ul li {
    border-bottom: none; /* Elimina la línea debajo de los textos */
}




.mis-postulaciones-list { list-style: none; padding: 0; }
.mis-postulaciones-list li { margin-bottom: .5em; }
.btn-editar {
  background: #172032;
  color: #fff;
  padding: 4px 8px;
  border-radius: 3px;
  text-decoration: none;
  font-size: .9em;
}
.btn-editar:hover {
  background: #243553;
}


/* --- Estilos para la página "Mis Postulaciones" --- */

.mis-postulaciones-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.mis-postulaciones-title {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
    font-size: 2.5em;
    font-weight: 700;
    position: relative;
    padding-bottom: 10px;
}

.mis-postulaciones-title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background-color: #0073aa; /* Color primario de WordPress */
    border-radius: 2px;
}

.mis-limites-title {
    text-align: center;
    color: #b9b9b9;
    margin-bottom: 30px;
    font-size: 1.5em;
    font-weight: 700;
    position: relative;
    padding-bottom: 10px;
    padding-top: 20px;
}


/* --- Mensajes informativos --- */
.message-info {
    text-align: center;
    padding: 20px;
    background-color: #e6f7ff;
    border: 1px solid #91d5ff;
    color: #1890ff;
    border-radius: 5px;
    margin-bottom: 20px;
    font-size: 1.1em;
}

/* --- Lista de postulaciones --- */
.postulaciones-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Columnas responsivas */
    gap: 30px; /* Espacio entre las tarjetas */
    margin-top: 30px;
}

.postulacion-card {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.postulacion-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12);
}

.postulacion-thumbnail {
    width: 100%;
    height: 200px; /* Altura fija para la imagen */
    overflow: hidden;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.postulacion-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen cubra el área sin distorsionarse */
    display: block;
}

.postulacion-thumbnail .placeholder-image {
    width: 80%;
    height: auto;
    opacity: 0.6;
}

.postulacion-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Permite que el contenido ocupe el espacio restante */
}

.postulacion-title {
    font-size: 1.6em;
    margin-top: 0;
    margin-bottom: 10px;
    line-height: 1.3;
}

.postulacion-title a {
    color: #333;
    text-decoration: none;
    transition: color 0.2s ease;
}

.postulacion-title a:hover {
    color: #0073aa;
}

.postulacion-meta {
    font-size: 0.9em;
    color: #777;
    margin-bottom: 15px;
}

.postulacion-meta span {
    display: inline-block;
    margin-right: 10px;
}

.postulacion-excerpt {
    font-size: 1em;
    color: #555;
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1; /* Permite que el extracto ocupe espacio antes de las acciones */
}

.postulacion-actions {
    margin-top: auto; /* Empuja los botones hacia abajo */
    display: flex;
    gap: 10px; /* Espacio entre los botones */
}

.btn {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.2s ease, color 0.2s ease;
    text-align: center;
    flex-grow: 1; /* Distribuye el espacio entre los botones */
    max-width: 150px; /* Limita el ancho de los botones */
}

.btn-view {
    background-color: #0073aa; /* Color primario */
    color: #fff;
    border: 1px solid #0073aa;
}

.btn-view:hover {
    background-color: #005177;
    color: #fff;
}

.btn-edit {
    background-color: #f0f0f0;
    color: #555;
    border: 1px solid #ccc;
}

.btn-edit:hover {
    background-color: #e0e0e0;
    color: #333;
}

.postulaciones-summary {
    text-align: center;
    margin-top: 40px;
    font-size: 1.2em;
    color: #444;
    padding: 15px;
    background-color: #eaf7ed;
    border: 1px solid #c3e6cb;
    border-radius: 5px;
}

/* --- Media Queries para responsividad --- */
@media (max-width: 768px) {
    .mis-postulaciones-container {
        margin: 20px auto;
        padding: 15px;
    }

    .mis-postulaciones-title {
        font-size: 2em;
    }

    .postulaciones-list {
        grid-template-columns: 1fr; /* Una columna en pantallas pequeñas */
    }

    .postulacion-card {
        flex-direction: column; /* Apila imagen y contenido */
    }

    .postulacion-thumbnail {
        height: 250px;
    }

    .postulacion-actions {
        flex-direction: column; /* Botones apilados en móviles */
    }

    .btn {
        max-width: 100%; /* Botones de ancho completo */
    }
}

@media (max-width: 480px) {
    .mis-postulaciones-title {
        font-size: 1.8em;
    }

    .postulacion-content {
        padding: 15px;
    }

    .postulacion-title {
        font-size: 1.4em;
    }

    .btn {
        padding: 10px 15px;
        font-size: 0.9em;
    }
}





/* — Contenedor principal — */
.container-categorias {
  display: flex;
  gap: 2rem;
  background-color: #172032; /* azul oscuro */
  padding: 2rem;
}

/* — Sidebar de categorías — */
.sidebar-categorias {
  width: 25%;
}

/* — Grid de tarjetas más compacto — */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columnas */
  gap: 1.5rem;
  width: 100%;
  margin: 0 auto; /* centrar el grid si sobra espacio */
}

/* — Tarjeta — */
.card-post {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform .2s, box-shadow .2s;
  display: flex;
  flex-direction: column;
}
.card-post:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

/* — Imagen destacada con animación — */
.thumb-wrap {
  overflow: hidden;
  position: relative;
}
.thumb-wrap img {
  display: block;
  width: 100%;
  transition: transform .4s ease;
}
.card-post:hover .thumb-wrap img {
  transform: scale(1.08);
}

/* — Cuerpo de la tarjeta — */
.card-body {
  padding: 1.5rem;
  flex: 1;                /* para estirar */
  display: flex;
  flex-direction: column;
}
.card-title {
  font-size: 1.25rem;
  margin: 0 0 .5rem;
}
.card-date {
  font-size: .9rem;
  color: #666;
  margin-bottom: 1rem;
}
.card-excerpt {
  flex: 1;                /* ocupa espacio para empujar el botón abajo */
  color: #444;
  margin-bottom: 1.5rem;
}
.btn-vermas {
  background-color: #FFD700; /* dorado */
  color: #172032;            /* azul oscuro */
  padding: .6rem 1.2rem;
  border-radius: 4px;
  text-align: center;
  text-decoration: none;
  align-self: start;
}
.btn-vermas:hover {
  background-color: #e6c200;
}







/* — Vista de categoría individual — */

/* Limitar ancho de la imagen destacada */
.single .thumb-wrap img,
.category .thumb-wrap img {
  max-width: 600px;
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
  margin: 0 auto 0rem;
}

/* Estilo del contenedor de contenido */
.single .entry-content,
.category .entry-content {
  max-width: 800px;
  margin: 2rem auto;
  background: #fff;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Formato de los campos extra que muestras */
.single .entry-content p {
  margin-bottom: 1rem;
  line-height: 1.5;
}
.single .entry-content time,
.single .entry-content .contacto,
.single .entry-content .url {
  display: block;
  font-size: .9rem;
  color: #666;
  margin-bottom: .5rem;
}


/* cada tarjeta ocupa todo su “fracción” y se centra */
.card-post {
  max-width: 280px;
  margin: 0 auto;
  /* Limitar altura */
  height: 90%; /* El contenido se ajusta según el tamaño */
  min-height: 100px; /* Esto es opcional, para mantener un mínimo de altura */
}

/* — Estilo del título de categoría — */
.category-title {
  font-size: 2rem;
  text-align: left;
  margin: 1rem 0;
  color: #e2c26d;   /* dorado */
}

@media (max-width: 768px) {
  .grid-cards {
    grid-template-columns: repeat(2, 1fr); /* Dos tarjetas por fila en pantallas pequeñas */
  }

  /* Para ocultar el menú en pantallas pequeñas */
  .sidebar-categorias {
    display: none; /* Esto oculta el menú en pantallas pequeñas */
  }
}

@media (max-width: 800px) {
  .grid-cards {
    grid-template-columns: 1fr; /* Una tarjeta por fila en pantallas muy pequeñas */
  }
}

@media (max-width: 768px) {
  .sidebar-categorias {
    display: none; /* Esto oculta el menú en pantallas pequeñas */
  }
}


.post-image {
  max-width: 100%; /* Limita la imagen para que no sea más grande que su contenedor */
  height: auto; /* Mantiene la relación de aspecto */
  margin-bottom: 20px; /* Espaciado abajo para separar la imagen del texto */
  border-radius: 8px; /* Opcional, agrega bordes redondeados */
}

.single-post .post-image img {
  width: 100%; /* La imagen ocupará todo el ancho disponible */
  height: auto; /* Mantiene la proporción de la imagen */
  object-fit: cover; /* Opcional, recorta la imagen si es más grande */
}











/* --- Estilos para Publicación Individual (single.php) --- */

/* Contenedor principal de la publicación */
.single-post-content {
    background-color: #ffffff; /* Fondo blanco */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Sombra suave para profundidad */
    padding: 2.5rem; /* Espaciado interno generoso en todos los lados */
    margin: 3rem auto; /* Centra el contenedor y le da margen vertical */
    max-width: 900px; /* Limita el ancho máximo para una mejor lectura */
    overflow: hidden; /* Asegura que la sombra y el borde no se corten */
}

/* Encabezado del Post (título) */
.single-post-content .entry-header {
    margin-bottom: 2rem; /* Espacio debajo del encabezado */
    text-align: center; /* Centra el título */
}

.single-post-content .entry-title {
    font-size: 2.8rem; /* Tamaño de fuente grande para el título */
    color: #263551; /* Color azul oscuro */
    line-height: 1.2;
    margin: 0; /* Elimina márgenes por defecto del h1 */
}

/* Contenedor de la imagen destacada */
.single-post-content .post-thumbnail {
    margin: 2rem 0; /* Margen vertical para separar de título y contenido */
    text-align: center; /* Centra la imagen */
}

/* Imagen destacada en la publicación individual */
.single-post-content .featured-image-single {
    display: block; /* Elimina espacio extra debajo de la imagen */
    max-width: 100%; /* Asegura que la imagen no se desborde */
    height: auto; /* Mantiene la proporción */
    border-radius: 6px; /* Bordes ligeramente redondeados */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Sombra suave para la imagen */
}

/* Contenido principal del Post */
.single-post-content .entry-content {
    font-size: 1.15rem; /* Tamaño de fuente cómodo para lectura */
    line-height: 1.75; /* Altura de línea para facilitar la lectura */
    color: #333333; /* Color de texto oscuro */
    margin-top: 2rem; /* Espacio superior para separar de la imagen/título */
    margin-bottom: 2rem; /* Espacio inferior */
}

.single-post-content .entry-content p {
    margin-bottom: 1em; /* Espacio entre párrafos */
}

.single-post-content .entry-content ul,
.single-post-content .entry-content ol {
    margin-left: 1.5rem; /* Indentación para listas */
    margin-bottom: 1.5rem;
}

.single-post-content .entry-content li {
    margin-bottom: 0.5em; /* Espacio entre elementos de lista */
}

.single-post-content .entry-content h2,
.single-post-content .entry-content h3,
.single-post-content .entry-content h4 {
    color: #263551; /* Color de los subtítulos */
    margin-top: 2.5rem; /* Espacio superior antes de los subtítulos */
    margin-bottom: 1rem;
    line-height: 1.3;
}

/* Estilos para el pie de página del post (si añades meta) */
.single-post-content .entry-footer {
    border-top: 1px solid #eeeeee;
    padding-top: 1.5rem;
    margin-top: 2.5rem;
    font-size: 0.9rem;
    color: #666;
    text-align: center;
}

/* --- Adaptación Responsiva --- */

@media (max-width: 992px) {
    .single-post-content {
        padding: 2rem;
        margin: 2rem auto;
        max-width: 760px; /* Ajuste para pantallas medianas */
    }

    .single-post-content .entry-title {
        font-size: 2.4rem;
    }

    .single-post-content .entry-content {
        font-size: 1.1rem;
    }
}

@media (max-width: 768px) {
    .single-post-content {
        padding: 1.5rem;
        margin: 1.5rem auto;
        border-radius: 6px;
    }

    .single-post-content .entry-title {
        font-size: 2rem;
    }

    .single-post-content .post-thumbnail {
        margin: 1.5rem 0;
    }

    .single-post-content .entry-content {
        font-size: 1rem;
        line-height: 1.6;
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .single-post-content .entry-content h2,
    .single-post-content .entry-content h3,
    .single-post-content .entry-content h4 {
        margin-top: 2rem;
    }
}

@media (max-width: 480px) {
    .single-post-content {
        padding: 1rem;
        margin: 1rem auto;
        box-shadow: none; /* Elimina sombra en móviles muy pequeños */
        border-radius: 0; /* Elimina bordes redondeados */
    }

    .single-post-content .entry-title {
        font-size: 1.75rem;
        margin-bottom: 1rem;
    }

    .single-post-content .post-thumbnail {
        margin: 1rem 0;
    }

    .single-post-content .entry-content {
        font-size: 0.95rem;
        line-height: 1.5;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .single-post-content .entry-content h2,
    .single-post-content .entry-content h3,
    .single-post-content .entry-content h4 {
        font-size: 1.25rem;
        margin-top: 1.5rem;
    }
}

/* Ajusta el contenedor del área de contenido para apilar sus elementos verticalmente */
.content-area {
    display: flex;
    flex-direction: column;
}

/* Fuerza que la sección de tarjetas de post ocupe todo el ancho */
.grid-cards {
    width: 100%;
}

/* Ajusta los botones de paginación para que ocupen todo el ancho y se centren */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 30px;
    clear: both; /* Asegura que el contenedor de paginación aparezca debajo de cualquier elemento flotante */
}

/* Estilos de los botones para que no se hereden del grid */
.pagination .page-numbers {
    padding: 8px 12px;
    margin: 0 5px;
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    color: #333;
    text-decoration: none;
}

.pagination .page-numbers.current {
    background-color: #ffda69;
    color: white;
    font-weight: bold;
}