@charset "utf-8";
/* CSS Document */

.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.5); }
    .modal-content { background-color: white; margin: 10% auto; padding: 20px; /*width: 50%;*/ border-radius: 8px;  }
    .close { float: right; font-size: 28px; cursor: pointer; }
/* Contenedor para centrar la imagen circular */
.circular-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

/* Imagen circular de 150px */
.circular-img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid orange; /* Opcional, para darle borde */
}

/* Contenedor de la imagen */
.image-wrapper {
    position: relative; /* Necesario para posicionar el badge */
    display: inline-block; /* Ajusta el tamaño al contenido */
}

/* Badge "Presencial" */
.presencial-badge {
    position: absolute; /* Posicionamiento absoluto respecto al contenedor */
    top: 10px; /* Distancia desde la parte superior */
    right: 10px; /* Distancia desde la parte derecha */
    background-color: #f5a425; /* Fondo naranja */
    color: white; /* Color del texto */
    padding: 5px 10px; /* Espaciado interno */
    border-radius: 15px; /* Bordes redondeados */
    font-size: 12px; /* Tamaño del texto */
    display: flex;
    align-items: center;
    gap: 5px; /* Espacio entre el ícono y el texto */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Sombra suave */
}

/* Estilos para el ícono */
.presencial-badge i {
    font-size: 14px; /* Tamaño del ícono */
}