/* =========================================================================
  Hoja de estilos personalizada para portal institucional UDEMEX
  Desarrollador: [Tu nombre]
  Fecha: [Fecha de creación]
  Descripción:
    - Define estructura visual de encabezado, menú responsivo, cuerpo y pie.
    - Usa prefijo 'udemex-' para evitar conflictos con otras bibliotecas.
    - Estilos pensados para mantener una estructura modular y clara.
=========================================================================== */

/* ======= ESTILOS GENERALES ======= */
body {
  margin: 10;                       /* Elimina el margen por defecto del navegador */
  font-family: Arial, sans-serif; /* Fuente legible y ampliamente soportada */
}

/* ======= ENCABEZADO (HEADER) ======= */
.udemex-header {
  background-color: #56212f;      /* Color vino institucional */
  color: white;                   /* Texto blanco sobre fondo oscuro */
  padding: 10px 20px;             /* Espaciado interno: 10px vertical, 20px horizontal */
  position: fixed;                /* Fija el encabezado en la parte superior de la pantalla */
  top: 0;                         /* Se fija en la parte superior */
  width: 100%;                    /* Ocupa todo el ancho de la pantalla */
  z-index: 1000;                  /* Se asegura que esté por encima de otros elementos */
  display: flex;                  /* Usa flexbox para alinear elementos horizontalmente */
  justify-content: space-between;/* Espacio entre el logo y el botón de sesión */
  align-items: center;           /* Centra verticalmente los elementos del header */
  height: 60px;                  /* Altura fija del encabezado */
  box-sizing: border-box;        /* Incluye padding en el cálculo de altura */
}

/* Logo del encabezado */
.udemex-logo img {
  height: 40px;                   /* Altura fija para mantener proporción */
  margin-right: 10px;            /* Espacio entre imagen y texto */
}

/* Botón de sesión o perfil */
.udemex-user-btn {
  background-color: #d7c1a0;     /* Fondo beige claro */
  color: #56212f;                /* Texto en color vino */
  padding: 8px 12px;             /* Espaciado interno */
  text-decoration: none;         /* Elimina subrayado en enlace */
  border-radius: 5px;            /* Bordes redondeados para estética */
  font-weight: bold;             /* Texto en negrita */
}

/* ======= BANDAS DECORATIVAS ======= */
.udemex-band {
  height: 9px;                   /* Altura de las bandas decorativas */
  background-color: #56212f;    /* Banda superior en vino */
  width: 100%;                  /* Ancho completo */
}

.udemex-band:last-child {
  background-color: #d7c1a0;    /* Segunda banda inferior en beige */
}

/* ======= CONTENIDO PRINCIPAL ======= */
.udemex-main {
  padding: 10px 20px;           /* Espaciado interior del cuerpo */
 margin-top: 20px;             /* Empuja el contenido hacia abajo para no quedar detrás del header fijo */
}

/* ======= PIE DE PÁGINA (FOOTER) ======= */
.udemex-footer {
  background-color: #f4f4f4;    /* Fondo gris claro */
  text-align: center;           /* Centra el texto del footer */
  padding: 20px;                /* Espaciado interior amplio */
  font-size: 14px;              /* Tamaño de fuente del pie */
}

/* Segunda línea de pie (ej. avisos legales) */
.udemex-footer-legal {
  background-color: #eaeaea;    /* Un tono más claro que el pie principal */
  padding: 10px;                /* Espaciado interno */
}

/* ======= MENÚ DE NAVEGACIÓN ======= */
nav {
  position: relative;           /* Posición relativa para manejar submenús absolutos */
}

.udemex-nav-list {
  list-style: none;             /* Elimina viñetas de lista */
  margin: 0;                    /* Elimina margen externo */
  padding: 0;                   /* Elimina padding interno */
  display: flex;                /* Menú en línea (horizontal) */
  gap: 10px;                    /* Espacio entre elementos */
}

.udemex-nav-list li {
  position: relative;           /* Posición relativa para manejar submenús */
  
}

.udemex-nav-list li a {
  color: white;                 /* Texto blanco */
  padding: 10px 15px;           /* Espaciado interior de los enlaces */
  display: block;               /* Toda el área del padding es clickeable */
  text-decoration: none;        /* Sin subrayado */
 
  white-space: nowrap; /* Evita que el texto se divida en múltiples líneas */
}


.udemex-nav-list li a:hover {
  background-color: #6a2a3a;    /* Color más claro para efecto hover */
}

/* Submenú desplegable */
.udemex-nav-list li ul {
  display: none;                /* Oculto por defecto */
  position: absolute;           /* Posición absoluta respecto al padre */
  top: 100%;                    /* Debajo del menú padre */
  left: 0;                      /* Alineado a la izquierda */
  background-color: #56212f;    /* Fondo vino para el submenú */
}

.udemex-nav-list li:hover ul {
  display: block;               /* Se muestra al hacer hover sobre el ítem padre */
}

/* ======= BOTÓN HAMBURGUESA ======= */
#menu-toggle {
  display: none;                /* Oculto por defecto (checkbox invisible) */
}

.udemex-menu-icon {
  display: none;                /* Oculto en vista de escritorio */
  cursor: pointer;             /* Cursor de mano */
  font-size: 28px;             /* Tamaño del ícono hamburguesa */
  color: white;                /* Color blanco */
  padding: 10px;               /* Espaciado alrededor del ícono */
}

/* ======= RESPONSIVE (PANTALLAS PEQUEÑAS) ======= */
@media (max-width: 992px) {
  .udemex-header {
    flex-wrap: wrap;           /* Permite que los elementos salten de línea */
    height: auto;              /* Ajusta altura automáticamente */
  }

  .udemex-menu-icon {
    display: block;            /* Mostrar ícono hamburguesa */
  }

  .udemex-nav-list {
    display: none;             /* Ocultar menú horizontal */
    flex-direction: column;    /* Menú vertical */
    background-color: #56212f;/* Fondo vino */
    position: fixed;           /* Menú fijo en la pantalla */
    top: 60px;                 /* Justo debajo del header */
    left: 0;                   /* Desde el borde izquierdo */
    width: 100%;               /* Ocupa todo el ancho del dispositivo */
    z-index: 1000;             /* Encima del contenido */
  }

  .udemex-nav-list li {
    text-align: center;        /* Centrar texto en menú móvil */
  }

  #menu-toggle:checked ~ .udemex-nav-list {
    display: flex;             /* Mostrar el menú al activar el checkbox */
  }

  .udemex-user-btn {
    display: none;             /* Ocultar botón de sesión en móvil */
  }
}

/* ======= OPTIMIZACIÓN PARA TELÉFONOS MUY PEQUEÑOS ======= */
@media (max-width: 500px) {
  .udemex-menu-icon {
    font-size: 34px;           /* Aumenta el tamaño del ícono hamburguesa */
    padding: 12px 16px;        /* Mayor área clickeable */
  }

  .udemex-nav-list {
    width: 100%;               /* Asegura que el menú cubra todo el ancho */
    left: 0;                   /* Alineado a la izquierda */
  }
}

/* Botón de envío */
.botonclass  {
    margin-top: 20px;
    background-color: #800020; /* Color vino */
    color: white;              /* Texto blanco */
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
}

/* Efecto hover para botón de envío */
.botonclass:hover {
    background-color: #a52a2a; /* Vino más claro al pasar el cursor */
} 

.inputclass {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
.inputclass2 {
    width: 49%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
} 



  /* Estilo general para todas las tablas */
  table {
    width: 100%;             /* Tabla ocupa todo el ancho del contenedor */
    border-collapse: collapse; /* Quita espacio entre bordes de celdas */
    margin-top: 20px;        /* Espacio superior para separar de otros elementos */
  }

  /* Estilo para el encabezado de la tabla */
  table thead {
    background-color: #56212f; /* Fondo vino oscuro */
    color: #fff;               /* Texto blanco para contraste */
  }

  /* Estilo para todas las celdas de encabezado y cuerpo */
  table th, table td {
    border: 1px solid #ccc;  /* Bordes grises claros en todas las celdas */
    padding: 10px;           /* Espaciado interno para comodidad visual */
    text-align: left;        /* Texto alineado a la izquierda */
  }

  /* Estilo para filas pares (even) para alternar color */
  table tr:nth-child(even) {
    background-color: #d7c1a0; /* Fondo beige claro para mejor lectura */
  }
 
 /* Estilo base para la tabla */
table {
  width: 100%;
  border-collapse: collapse;
}

table th, table td {
  border: 1px solid #ddd;
  padding: 8px; 
}

 

/* Estilo responsivo: cambia la tabla a formato vertical en pantallas pequeñas */
@media screen and (max-width: 600px) {
  table {
    display: block;
    width: 100%;
  }

  table thead {
    display: none;
  }

  table tbody tr {
    display: block;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    padding: 10px;
    
  }

  table tbody td {
    display: block; 
    padding-left: 10%;
    position: relative;
  }

  table tbody td::before {
    content: attr(data-label);
    position: absolute;
    left: 10px;
    font-weight: bold;
  }
}

 
 
 
  /* Estilo para las pestañas */
  .tabs {
    display: flex;
    cursor: pointer;
    margin-bottom: 20px;
    border-radius: 8px; /* Bordes redondeados para un diseño más suave */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra ligera para darle profundidad */
}

.tab {
    padding: 12px 25px;
    border: 1px solid #d7c1a0; /* Bordes de color suave acorde al esquema */
    border-radius: 8px 8px 0 0; /* Bordes redondeados en la parte superior */
    background-color: #d7c1a0; /* Fondo con el color solicitado */
    margin-right: 10px;
    font-size: 16px;
    text-align: center;
    transition: all 0.3s ease-in-out; /* Transición suave */
}

.tab:hover {
    background-color: #c29f7b; /* Color más oscuro al pasar el mouse */
    transform: translateY(-2px); /* Leve elevación al pasar el mouse */
}

.tab.active {
    background-color: #56212f; /* Fondo oscuro cuando está activo */
    color: white; /* Texto blanco para el estado activo */
    font-weight: bold;
    box-shadow: 0 2px 10px rgba(86, 33, 47, 0.5); /* Sombra sutil para el efecto activo */
}

.tab-content {
    display: none;
    padding: 20px;
    border: 1px solid #d7c1a0; /* Bordes acordes al color de la pestaña */
    border-radius: 0 0 8px 8px; /* Bordes redondeados en la parte inferior */
    background-color: #f9f9f9;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Sombra ligera en el contenido */
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease; /* Animación para mostrar el contenido */
}   



 .pregunta {
        margin: 25px auto; /* Separación entre preguntas y centrado horizontal */
        padding: 15px; /* Espaciado interno */
        border-top: 4px solid #8a2036; /* Línea superior con color vino */
        background-color: #fff; /* Fondo blanco */
        border-radius: 8px; /* Bordes redondeados */
        max-width: 700px; /* Ancho máximo de cada pregunta */
    }