/* Estilos generales para la aplicación de búsqueda de constancias
 * Versión mejorada y optimizada
 */

/* Reset y estilos base */
* {
    margin: 0; /* Elimina márgenes por defecto en todos los elementos */
    padding: 0; /* Elimina rellenos por defecto en todos los elementos */
    box-sizing: border-box; /* Hace que el padding y borde no aumenten el tamaño total */
    font-family: 'Segoe UI', sans-serif; /* Define la fuente predeterminada para todo el texto */
}

body {
    background: #f0f2f5; /* Fondo gris claro para el cuerpo de la página */
    min-height: 100vh; /* Altura mínima del 100% de la ventana */
    padding: 20px; /* Relleno de 20px en todos los lados del cuerpo */
}

.container {
    max-width: 800px; /* Ancho máximo de 800px para el contenedor principal */
    margin: 0 auto; /* Centra el contenedor horizontalmente */
    display: flex; /* Usa Flexbox para organizar los elementos hijos */
    flex-direction: column; /* Elementos hijos en columna */
    gap: 15px; /* Espacio de 15px entre los elementos hijos */
}

/* Componentes de la interfaz */
.search-box {
    display: flex; /* Flexbox para alinear los elementos hijos horizontalmente */
    align-items: center; /* Centra verticalmente los elementos hijos */
    gap: 10px; /* Espacio de 10px entre los elementos hijos */
    background: #2a5492 !important; /* Fondo naranja pastel oscuro, se aplica en ambos modos */
    padding: 20px; /* Relleno interno de 20px */
    border-radius: 10px; /* Bordes redondeados de 10px */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Sombra suave para dar profundidad */
}

input[type="text"], 
input[type="email"] {
    padding: 10px; /* Relleno interno de 10px para los campos de texto y email */
    border: 1px solid #ddd; /* Borde gris claro de 1px */
    border-radius: 5px; /* Bordes redondeados de 5px */
    font-size: 14px; /* Tamaño de fuente de 14px para el texto dentro de los inputs */
}

button {
    padding: 10px 20px; /* Relleno de 10px vertical y 20px horizontal */
    background: #007bff; /* Fondo azul para los botones */
    color: white; /* Texto blanco dentro de los botones */
    border: none; /* Sin borde */
    border-radius: 5px; /* Bordes redondeados de 5px */
    cursor: pointer; /* Cursor de puntero al pasar sobre el botón */
    font-size: 14px; /* Tamaño de fuente de 14px para el texto del botón */
    transition: background 0.3s; /* Transición suave de 0.3s para el cambio de fondo */
}

button:hover {
    background: #0069d9; /* Fondo azul más oscuro al pasar el ratón */
}

/* Estilo para el botón de actualizar */
button[aria-label="Actualizar página"] {
    padding: 10px; /* Relleno de 10px para el botón de actualizar */
    display: flex; /* Flexbox para centrar el contenido */
    align-items: center; /* Centra verticalmente el contenido */
    justify-content: center; /* Centra horizontalmente el contenido */
}

button[aria-label="Actualizar página"] svg {
    width: 16px; /* Ancho de 16px para el ícono SVG dentro del botón */
    height: 16px; /* Altura de 16px para el ícono SVG */
}

button[aria-label="Actualizar página"]:hover {
    background: #28a745; /* Fondo verde al pasar el ratón sobre el botón de actualizar */
}

/* Estilo para el botón de modo oscuro */
button[aria-label="Cambiar modo oscuro"] {
    padding: 10px; /* Relleno de 10px para el botón de modo oscuro */
    display: flex; /* Flexbox para centrar el contenido */
    align-items: center; /* Centra verticalmente el contenido */
    justify-content: center; /* Centra horizontalmente el contenido */
}

button[aria-label="Cambiar modo oscuro"] svg {
    width: 16px; /* Ancho de 16px para el ícono SVG dentro del botón */
    height: 16px; /* Altura de 16px para el ícono SVG */
}

button[aria-label="Cambiar modo oscuro"]:hover {
    background: #6c757d; /* Fondo gris al pasar el ratón sobre el botón de modo oscuro */
}

/* Estilos para el modo oscuro */
body.dark-mode {
    background: #1a1a1a; /* Fondo gris oscuro para el cuerpo en modo oscuro */
    color: #f0f0f0; /* Texto gris claro para el cuerpo en modo oscuro */
}

body.dark-mode #multipleFilesWarningModal .modal-content p {
    color: #ffffff; /* Texto blanco para el contenido del modal de advertencia en modo oscuro */
}

body.dark-mode .search-box,
body.dark-mode .results,
body.dark-mode .modal-container {
    background: #2a2a2a; /* El background de .search-box se anulará por la regla anterior con !important */
    color: #f0f0f0; /* Texto gris claro para estos elementos */
    box-shadow: 0 2px 5px rgba(0,0,0,0.3); /* Sombra más pronunciada en modo oscuro */
}

/* Título principal en modo oscuro */
body.dark-mode .title-message {
    color: #000000 !important; /* Texto negro puro para el título en modo oscuro */
}

body.dark-mode .title-message strong {
    color: #000000 !important; /* Texto negro puro para <strong> dentro del título en modo oscuro */
}

/* Leyendas de checkboxes en modo oscuro */
body.dark-mode .resend-label {
    color: #ffffff; /* Texto blanco para las etiquetas de reenvío */
}

/* Etiquetas de detalles en modo oscuro */
body.dark-mode .detail-label {
    color: #ffffff; /* Texto blanco para las etiquetas de detalles */
}

/* Encabezados en modo oscuro */
body.dark-mode h2,
body.dark-mode h3 {
    color: #ffffff; /* Texto blanco para los encabezados h2 y h3 */
}

body.dark-mode input[type="text"],
body.dark-mode input[type="email"] {
    background: #3a3a3a; /* Fondo gris medio para inputs en modo oscuro */
    color: #f0f0f0; /* Texto gris claro dentro de los inputs */
    border-color: #555; /* Borde gris oscuro para los inputs */
}

body.dark-mode .data-grid {
    background: #2a2a2a; /* Fondo gris oscuro para la grilla de datos */
}

body.dark-mode .data-grid-header {
    background: #3a3a3a; /* Fondo gris medio para el encabezado de la grilla */
}

body.dark-mode .data-grid-row:nth-child(even) {
    background: #333333; /* Fondo gris oscuro para filas pares de la grilla */
}

body.dark-mode .data-grid-row:hover {
    background: #444; /* Fondo gris más claro al pasar el ratón sobre las filas */
}

body.dark-mode .modal-header,
body.dark-mode .modal-footer {
    background: #333333; /* Fondo gris oscuro para el encabezado y pie del modal */
}

body.dark-mode .btn-cancel {
    background: #a52929; /* Fondo gris oscuro para el botón de cancelar */
}

body.dark-mode .btn-confirm {
    background: #0069d9; /* Fondo azul oscuro para el botón de confirmar */
    color: #ffffff; /* Texto blanco en el botón de confirmar */
}

body.dark-mode .status-message.info {
    background: #0d4b8c; /* Fondo azul oscuro para mensajes de información */
    color: #eaeef3; /* Texto claro */
}

body.dark-mode .status-message.success {
    background: #1a7741; /* Fondo verde oscuro para mensajes de éxito */
    color: #eaeef3; /* Texto claro */

}

body.dark-mode .status-message.error {
    background: #c76470; /* Fondo gris rosado para mensajes de error */
    color: #eaeef3; /* Texto claro */
}

body.dark-mode .status-message.warning {
    background: #c9135f; /* Fondo marrón oscuro para mensajes de advertencia */
}

/* Estilos específicos para estados de constancias y correos en modo oscuro */
body.dark-mode .data-item.invalid-email {
    background-color: #f7da3b; /* Fondo amarillo oscuro para correos inválidos */
    color: #fff; /* Texto blanco para correos inválidos */
}

body.dark-mode .data-item.not-sent {
    background-color: #8b160e; /* Fondo rojo oscuro para "Constancia No Enviada" */
    color: #fff; /* Texto blanco para constancias no enviadas */
}

body.dark-mode .data-item.sent {
    background-color: #085e18; /* Fondo verde oscuro para "Constancia Enviada" */
    color: #fff; /* Texto blanco para constancias enviadas */
}

body.dark-mode .data-item strong {
    color: #f0f0f0; /* Texto gris claro para <strong> dentro de ítems de datos */
}

/* Estados especiales para datos */
.data-item.invalid-email {
    background-color: #ffff99; /* Fondo amarillo claro para correos inválidos en modo claro */
}

.data-item.not-sent {
    background-color: #ffcccc; /* Fondo rojo claro para "Constancia No Enviada" en modo claro */
}

.data-item.sent {
    background-color: #ccffcc; /* Fondo verde claro para "Constancia Enviada" en modo claro */
}

/* Transición suave para cambio de modo */
body, .search-box, .results, input, .data-grid, .modal-container, .modal-header, .modal-footer, .status-message {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; /* Transición suave de 0.3s para fondo, color y borde */
}

/* Mensajes y notificaciones */
.title-message {
    flex: 1; /* Ocupa el espacio disponible en el contenedor flexible */
    text-align: center; /* Texto centrado */
    font-size: 18px; /* Tamaño de fuente de 18px */
    font-weight: normal; /* Texto no negrita */
    color: #000000 !important; /* Color negro, se aplica en ambos modos */
    padding-left: 10px; /* Relleno izquierdo de 10px */
}

.title-message strong {
    font-size: 18px; /* Tamaño de fuente de 18px para <strong> */
    font-weight: normal; /* Texto no negrita */
    display: block; /* Mostrado como bloque */
    color: #000000 !important; /* Color negro, se aplica en ambos modos */
}

.title-message br + * {
    font-size: 18px; /* Tamaño de fuente de 18px para elementos tras <br> */
    font-weight: normal; /* Texto no negrita */
    color: #000000 !important; /* Color negro, se aplica en ambos modos */
}

.error-message {
    display: flex; /* Flexbox para centrar el contenido */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    background: #ffcccc; /* Fondo rojo claro */
    color: #d8000c; /* Texto rojo oscuro */
    padding: 5px; /* Relleno de 5px */
    border-radius: 3px; /* Bordes redondeados de 3px */
    font-size: 12px; /* Tamaño de fuente de 12px */
    margin-top: 5px; /* Margen superior de 5px */
    width: 100%; /* Ancho completo */
}

.validation-errors {
    background-color: #f8d7da; /* Fondo rosado para errores de validación */
    color: #721c24; /* Texto marrón rojizo */
    border: 1px solid #f5c6cb; /* Borde rosado claro */
    border-radius: 5px; /* Bordes redondeados de 5px */
    padding: 10px 15px; /* Relleno de 10px vertical y 15px horizontal */
    margin-bottom: 15px; /* Margen inferior de 15px */
    width: 100%; /* Ancho completo */
}

.validation-errors ul {
    margin: 0; /* Sin margen para la lista */
    padding-left: 20px; /* Relleno izquierdo de 20px para la lista */
}

.validation-errors li {
    margin-bottom: 5px; /* Margen inferior de 5px para cada ítem de la lista */
}

/* Estilo para inputs con error de validación */
.input-error {
    border: 2px solid #dc3545 !important; /* Borde rojo de 2px con prioridad */
    background-color: #fff8f8; /* Fondo rosado claro */
}

.input-error:focus {
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); /* Sombra roja suave al enfocar */
    outline: none; /* Sin contorno al enfocar */
}

/* Estilo para botón deshabilitado */
.disabled-button {
    opacity: 0.65; /* Opacidad reducida para indicar deshabilitado */
    cursor: not-allowed; /* Cursor de "no permitido" */
    background-color: #6c757d !important; /* Fondo gris con prioridad */
    border-color: #6c757d !important; /* Borde gris con prioridad */
}

.info-message {
    color: #3498db; /* Texto azul para mensajes de información */
    font-size: 0.9rem; /* Tamaño de fuente de 0.9rem */
    margin-top: 5px; /* Margen superior de 5px */
    margin-bottom: 5px; /* Margen inferior de 5px */
    display: none; /* Oculto por defecto */
    align-items: center; /* Centra verticalmente si es flex */
}

.status-message {
    margin: 10px 0;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 14px;
    text-align: center;
    min-height: 44px; /* Altura fija para evitar saltos en la interfaz */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s, color 0.3s;
    border: 1px solid #e0e0e0;
    background-color: #f9f9f9;
}

.status-message.success {
    display: block; /* Visible como bloque */
    background-color: #d4edda; /* Fondo verde claro para éxito */
    color: #155724; /* Texto verde oscuro */
    border: 1px solid #c3e6cb; /* Borde verde claro */
}

.status-message.error {
    display: block; /* Visible como bloque */
    background-color: #f8d7da; /* Fondo rosado para error */
    color: #721c24; /* Texto marrón rojizo */
    border: 1px solid #f5c6cb; /* Borde rosado claro */
}

.status-message.info {
    display: block; /* Visible como bloque */
    background-color: #cce5ff; /* Fondo azul claro para información */
    color: #004085; /* Texto azul oscuro */
    border: 1px solid #b8daff; /* Borde azul claro */
}

.message {
    text-align: center; /* Texto centrado */
    padding: 20px; /* Relleno de 20px */
    color: #666; /* Texto gris */
    display: none; /* Oculto por defecto */
}

/* Barra de progreso */
progress {
    height: 5px; /* Altura de 5px para la barra de progreso */
    border-radius: 5px; /* Bordes redondeados de 5px */
    background: #ddd; /* Fondo gris claro */
    width: 100%; /* Ancho completo */
}

progress::-webkit-progress-value {
    background: #0de906; /* Fondo verde brillante para el valor en Webkit */
    border-radius: 5px; /* Bordes redondeados */
}

progress::-moz-progress-bar {
    background: #007bff; /* Fondo azul para el valor en Mozilla */
    border-radius: 5px; /* Bordes redondeados */
}

/* Estilos para constancias reenviadas */
.resent-certificate {
    background-color: #dce6dc; /* Fondo verde claro para constancias reenviadas */
    padding: 5px; /* Relleno de 5px */
    border-radius: 4px; /* Bordes redondeados de 4px */
    margin-bottom: 5px; /* Margen inferior de 5px */
    border-left: 3px solid #4caf50; /* Borde izquierdo verde de 3px */
}

/* Estilo para los títulos de formaciones */
.formacion-title {
    font-size: 18px; /* Tamaño de fuente de 18px */
    font-weight: 600; /* Peso de fuente 600 (seminegrita) */
    color: #333; /* Color gris oscuro para el texto */
}

body.dark-mode .formacion-title {
    color: #ffffff; /* Texto blanco en modo oscuro */
}

.resent-badge {
    display: inline-block; /* Mostrado como bloque en línea */
    margin-left: 10px; /* Margen izquierdo de 10px */
    color: #2e7d32; /* Texto verde oscuro */
    font-size: 0.9em; /* Tamaño de fuente relativo de 0.9em */
    font-weight: bold; /* Texto en negrita */
    background-color: #c8e6c9; /* Fondo verde claro */
    padding: 2px 8px; /* Relleno de 2px vertical y 8px horizontal */
    border-radius: 12px; /* Bordes redondeados de 12px */
}

/* Resultados y visualización de datos */
.results {
    background: white; /* Fondo blanco para los resultados */
    padding: 15px; /* Relleno de 15px */
    border-radius: 10px; /* Bordes redondeados de 10px */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Sombra suave */
    display: none; /* Oculto por defecto */
}

.results.show {
    display: block; /* Visible como bloque cuando tiene la clase .show */
}

.data-grid {
    display: flex; /* Flexbox para organizar los elementos */
    flex-direction: column; /* Elementos en columna */
    gap: 15px; /* Espacio de 15px entre elementos hijos */
}

.result-block {
    border-bottom: 1px solid #eee; /* Borde inferior gris claro */
    padding-bottom: 10px; /* Relleno inferior de 10px */
}

.result-block:last-child {
    border-bottom: none; /* Sin borde inferior para el último bloque */
}

.result-header {
    display: flex; /* Flexbox para alinear elementos */
    justify-content: space-between; /* Espacio entre elementos */
    align-items: center; /* Centra verticalmente */
    margin-bottom: 8px; /* Margen inferior de 8px */
}

.result-header h3 {
    font-size: 16px; /* Tamaño de fuente de 16px para h3 */
    color: #007bff; /* Texto azul */
}

.resend-label {
    display: flex; /* Flexbox para alinear elementos */
    align-items: center; /* Centra verticalmente */
    gap: 5px; /* Espacio de 5px entre elementos */
    font-size: 14px; /* Tamaño de fuente de 14px */
    color: #333; /* Texto gris oscuro */
}

.resend-checkbox {
    cursor: pointer; /* Cursor de puntero para el checkbox */
}

/* Estilos para casillas deshabilitadas */
.resend-checkbox:disabled {
    opacity: 0.5; /* Transparencia del 50% para casillas deshabilitadas */
    cursor: not-allowed; /* Cursor de prohibido para casillas deshabilitadas */
}

.resend-label:has(.resend-checkbox:disabled) {
    opacity: 0.6; /* Transparencia del 60% para etiquetas con casillas deshabilitadas */
    color: #666; /* Color gris para las etiquetas deshabilitadas */
    cursor: not-allowed; /* Cursor de prohibido para etiquetas deshabilitadas */
}

/* Modo oscuro para casillas deshabilitadas */
body.dark-mode .resend-label:has(.resend-checkbox:disabled) {
    color: #999; /* Color gris más claro en modo oscuro */
}

.data-item {
    display: flex; /* Flexbox para alinear elementos */
    align-items: center; /* Centra verticalmente */
    gap: 5px; /* Espacio de 5px entre elementos */
    font-size: 14px; /* Tamaño de fuente de 14px */
    padding: 2px 0; /* Relleno vertical de 2px */
}

.data-item strong {
    color: #333; /* Texto gris oscuro para <strong> */
    min-width: 120px; /* Ancho mínimo de 120px */
    font-size: 13px; /* Tamaño de fuente de 13px */
}

/* Fila de acciones */
.action-row {
    display: flex; /* Flexbox para alinear elementos */
    align-items: center; /* Centra verticalmente */
    gap: 10px; /* Espacio de 10px entre elementos */
    width: 100%; /* Ancho completo */
    margin-bottom: 15px; /* Margen inferior de 15px */
    justify-content: space-between; /* Espacio entre elementos */
}

/* Estilos para grupos de entrada */
.input-group {
    display: flex; /* Flexbox para organizar inputs */
    gap: 10px; /* Espacio de 10px entre elementos */
    flex: 1; /* Ocupa el espacio disponible */
    flex-wrap: wrap; /* Permite ajuste de línea en pantallas pequeñas */
}

.input-group input {
    flex: 1; /* Ocupa el espacio disponible dentro del grupo */
    min-width: 200px; /* Ancho mínimo de 200px */
}

/* Estilos para grupos de botones */
.button-group {
    display: flex; /* Flexbox para organizar botones */
    gap: 10px; /* Espacio de 10px entre botones */
    justify-content: flex-end; /* Alinea botones a la derecha */
    flex-wrap: wrap; /* Permite ajuste de línea en pantallas pequeñas */
}

/* Estilo para el botón de limpiar */
#clearButton {
    background-color: #af4d62; /* Fondo rojo rosado para el botón de limpiar */
}

#clearButton:hover {
    background-color: #5a6268; /* Fondo gris oscuro al pasar el ratón */
}

body.dark-mode #clearButton {
    background-color: #a11010; /* Fondo gris oscuro en modo oscuro */
}

body.dark-mode #clearButton:hover {
    background-color: #b94349; /* Fondo gris más oscuro al pasar el ratón en modo oscuro */
}

.action-row input[type="email"],
.action-row input[type="text"] {
    padding: 10px; /* Relleno de 10px para inputs en la fila de acciones */
    border: 1px solid #ddd; /* Borde gris claro */
    border-radius: 5px; /* Bordes redondeados de 5px */
    font-size: 14px; /* Tamaño de fuente de 14px */
}

#emailInput {
    flex: 3; /* Proporción relativa de 3 para el campo de correo */
}

#nameInput {
    flex: 4; /* Proporción relativa de 4 para el campo de nombre */
}

#cueInput {
    flex: 1; /* Proporción relativa de 1 para el campo de CUE */
}

#resendButton {
    flex: 2; /* Proporción relativa de 2 para el botón de reenvío */
    background: #28a745; /* Fondo verde para el botón de reenvío */
}

#resendButton:hover {
    background: #218838; /* Fondo verde oscuro al pasar el ratón */
}

/* Modal de confirmación */
.modal-overlay {
    position: fixed; /* Posición fija para cubrir toda la pantalla */
    top: 0; /* Desde la parte superior */
    left: 0; /* Desde la izquierda */
    width: 100%; /* Ancho completo */
    height: 100%; /* Altura completa */
    background-color: rgba(0, 0, 0, 0.5); /* Fondo gris semitransparente */
    display: flex; /* Flexbox para centrar el modal */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    z-index: 1000; /* Z-index alto para estar por encima de otros elementos */
    display: none; /* Oculto por defecto */
}

.modal-container {
    background-color: white; /* Fondo blanco para el contenedor del modal */
    border-radius: 8px; /* Bordes redondeados de 8px */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra para dar profundidad */
    width: 90%; /* Ancho del 90% de la pantalla */
    max-width: 600px; /* Ancho máximo de 600px */
    max-height: 85vh; /* Altura máxima del 85% de la ventana */
    overflow-y: auto; /* Scroll vertical si el contenido excede */
    padding: 16px; /* Relleno de 16px */
    display: flex; /* Flexbox para organizar el contenido */
    flex-direction: column; /* Contenido en columna */
    font-family: Arial, sans-serif; /* Fuente Arial para el texto del modal */
    color: #000000; /* Texto negro */
}

.modal-header {
    display: flex; /* Flexbox para alinear elementos */
    justify-content: space-between; /* Espacio entre elementos */
    align-items: center; /* Centra verticalmente */
    margin-bottom: 12px; /* Margen inferior de 12px */
    border-bottom: 1px solid #eee; /* Borde inferior gris claro */
    padding-bottom: 8px; /* Relleno inferior de 8px */
}

.modal-header h2 {
    margin: 0; /* Sin margen para el título */
    color: #000000; /* Texto negro */
    font-size: 1.1rem; /* Tamaño de fuente de 1.1rem */
    font-weight: 600; /* Peso de fuente 600 (seminegrita) */
}

.modal-content {
    flex-grow: 1; /* Crece para ocupar el espacio disponible */
    margin-bottom: 12px; /* Margen inferior de 12px */
    font-size: 0.9rem; /* Tamaño de fuente de 0.9rem */
    color: #000000; /* Texto negro */
}

.modal-content p {
    margin-top: 0; /* Sin margen superior */
    margin-bottom: 10px; /* Margen inferior de 10px */
    font-size: 0.9rem; /* Tamaño de fuente de 0.9rem */
    color: #000000; /* Texto negro */
}

.certificate-item {
    border-bottom: 1px solid #eee; /* Borde inferior gris claro */
    padding: 8px 0; /* Relleno vertical de 8px */
    margin-bottom: 8px; /* Margen inferior de 8px */
}

.certificate-item:last-child {
    border-bottom: none; /* Sin borde inferior para el último ítem */
}

.certificate-item h3 {
    margin: 0 0 8px 0; /* Márgenes: 0 arriba, 8px abajo */
    color: #000000; /* Texto negro */
    font-size: 0.95rem; /* Tamaño de fuente de 0.95rem */
    font-weight: 600; /* Peso de fuente 600 (seminegrita) */
}

.certificate-details {
    display: flex; /* Flexbox para organizar detalles */
    flex-direction: column; /* Detalles en columna */
    gap: 6px; /* Espacio de 6px entre detalles */
}

.detail-item {
    width: 100%; /* Ancho completo */
    margin-bottom: 4px; /* Margen inferior de 4px */
    font-size: 0.9rem; /* Tamaño de fuente de 0.9rem */
    line-height: 1.4; /* Altura de línea de 1.4 */
}

.detail-label {
    font-weight: 600; /* Peso de fuente 600 (seminegrita) */
    color: #000000; /* Texto negro */
    display: inline-block; /* Mostrado como bloque en línea */
    min-width: 120px; /* Ancho mínimo de 120px */
}

.recipient-info h3 {
    font-size: 0.95rem; /* Tamaño de fuente de 0.95rem */
    margin: 12px 0 8px 0; /* Márgenes: 12px arriba, 8px abajo */
    color: #000000; /* Texto negro */
}

.modal-footer {
    display: flex; /* Flexbox para alinear botones */
    justify-content: flex-end; /* Alinea botones a la derecha */
    gap: 10px; /* Espacio de 10px entre botones */
    border-top: 1px solid #eee; /* Borde superior gris claro */
    padding-top: 12px; /* Relleno superior de 12px */
}

/* Estilos para la lista de formaciones en el modal */
.formaciones-container {
    margin: 15px 0; /* Márgenes verticales de 15px */
}

.formaciones-title {
    font-weight: 600; /* Peso de fuente 600 (seminegrita) */
    margin-bottom: 10px; /* Margen inferior de 10px */
    color: #000000; /* Texto negro */
    font-size: 1rem; /* Tamaño de fuente de 1rem */
}

.formaciones-list {
    list-style-type: none; /* Sin viñetas en la lista */
    padding-left: 10px; /* Relleno izquierdo de 10px */
}

.formaciones-list li {
    font-size: 1.1rem; /* Tamaño de fuente de 1.1rem */
    margin-bottom: 8px; /* Margen inferior de 8px */
    padding: 5px 0; /* Relleno vertical de 5px */
    color: #000000; /* Texto negro */
}

.dni-info {
    margin-bottom: 15px; /* Margen inferior de 15px */
    font-size: 1rem; /* Tamaño de fuente de 1rem */
    color: #000000; /* Texto negro */
}

.btn-confirm {
    background-color: #4CAF50; /* Fondo verde para el botón de confirmar */
    color: white; /* Texto blanco */
    border: none; /* Sin borde */
    padding: 6px 14px; /* Relleno de 6px vertical y 14px horizontal */
    border-radius: 4px; /* Bordes redondeados de 4px */
    cursor: pointer; /* Cursor de puntero */
    font-weight: 600; /* Peso de fuente 600 (seminegrita) */
    font-size: 0.9rem; /* Tamaño de fuente de 0.9rem */
}

.btn-cancel {
    background-color: #f44336; /* Fondo rojo para el botón de cancelar */
    color: white; /* Texto blanco */
    border: none; /* Sin borde */
    padding: 6px 14px; /* Relleno de 6px vertical y 14px horizontal */
    border-radius: 4px; /* Bordes redondeados de 4px */
    cursor: pointer; /* Cursor de puntero */
    font-weight: 600; /* Peso de fuente 600 (seminegrita) */
    font-size: 0.9rem; /* Tamaño de fuente de 0.9rem */
}

.btn-confirm:hover {
    background-color: #45a049; /* Fondo verde oscuro al pasar el ratón */
}

.btn-cancel:hover {
    background-color: #d32f2f; /* Fondo rojo oscuro al pasar el ratón */
}

/* Estilos específicos para el modal en modo oscuro */
body.dark-mode .modal-content,
body.dark-mode .modal-header,
body.dark-mode .modal-footer,
body.dark-mode .certificate-details,
body.dark-mode .recipient-info,
body.dark-mode .certificate-item,
body.dark-mode .certificate-item span,
body.dark-mode .detail-item,
body.dark-mode #certificatesList,
body.dark-mode #confirmEmail,
body.dark-mode #confirmName,
body.dark-mode #confirmCUE,
body.dark-mode .dni-info,
body.dark-mode .dni-info strong,
body.dark-mode .formaciones-title,
body.dark-mode .formaciones-title strong,
body.dark-mode .formaciones-list,
body.dark-mode .formaciones-list li {
    color: #ffffff; /* Texto blanco para todos estos elementos en modo oscuro */
}

/* Asegurar que los elementos específicos del modal tengan color blanco */
body.dark-mode .dni-info {
    color: #ffffff; /* Texto blanco para la información de DNI */
}

body.dark-mode .formaciones-title {
    color: #ffffff; /* Texto blanco para el título de formaciones */
}

body.dark-mode .formaciones-list li {
    color: #ffffff; /* Texto blanco para los ítems de la lista de formaciones */
}

body.dark-mode .modal-header h2 {
    color: #ffffff; /* Texto blanco para el título h2 del encabezado */
    font-weight: bold; /* Texto en negrita */
}

body.dark-mode .recipient-info h3 {
    color: #ffffff; /* Texto blanco para el título h3 de información de destinatario */
    font-weight: bold; /* Texto en negrita */
}

body.dark-mode .certificate-item {
    border-color: #444; /* Borde gris oscuro para ítems de constancia */
}

/* Asegurar que los botones del modal tengan buen contraste */
body.dark-mode .btn-cancel {
    background: #8a3333; /* Fondo gris oscuro para el botón de cancelar */
    color: #ffffff; /* Texto blanco */
}

body.dark-mode .btn-confirm {
    background: #1d884a; /* Fondo azul oscuro para el botón de confirmar */
    color: #fffefe; /* Texto blanco */
}

/* Estilos para registros modificados */
.registro-modificado {
    border-left: 4px solid #9c27b0 !important; /* Borde izquierdo púrpura con prioridad */
    background-color: rgba(156, 39, 176, 0.05); /* Fondo púrpura claro semitransparente */
}

.modificado-badge {
    background-color: #9c27b0; /* Fondo púrpura para la insignia */
    color: white; /* Texto blanco */
    font-size: 12px; /* Tamaño de fuente de 12px */
    padding: 2px 8px; /* Relleno de 2px vertical y 8px horizontal */
    border-radius: 4px; /* Bordes redondeados de 4px */
    margin-left: 10px; /* Margen izquierdo de 10px */
    display: inline-block; /* Mostrado como bloque en línea */
    vertical-align: middle; /* Alineado verticalmente al medio */
}

.corrected-name {
    background-color: rgba(156, 39, 176, 0.1); /* Fondo púrpura semitransparente */
    padding: 5px; /* Relleno de 5px */
    border-radius: 4px; /* Bordes redondeados de 4px */
}

.corrected-name-badge {
    color: #9c27b0; /* Texto púrpura */
    font-weight: 500; /* Peso de fuente 500 (medio) */
    margin-left: 10px; /* Margen izquierdo de 10px */
    font-style: italic; /* Texto en cursiva */
}

.corrected-name-badge strong {
    font-weight: 700; /* Peso de fuente 700 (negrita) para <strong> */
}

/* Estilo para CUE inválido */
.cue-invalid {
    background-color: #ffdddd; /* Fondo rojo claro para CUE inválido */
    border-left: 3px solid #ff5555; /* Borde izquierdo rojo */
    padding-left: 10px; /* Relleno izquierdo de 10px */
}

/* Mensaje de invalidez para CUEs */
.invalid-message {
    font-size: 0.9em; /* Tamaño de fuente relativo de 0.9em */
    color: #e74c3c; /* Texto rojo */
    font-style: italic; /* Texto en cursiva */
    margin-left: 5px; /* Margen izquierdo de 5px */
}

/* Estilo para Constancia No Enviada */
.condition-not-sent {
    border-left: 3px solid #ff5555; /* Borde izquierdo rojo */
    padding-left: 10px; /* Relleno izquierdo de 10px */
}

/* Estilo para correo inválido */
.email-invalid {
    border-left: 3px solid #ffcc00; /* Borde izquierdo amarillo */
    padding-left: 10px; /* Relleno izquierdo de 10px */
}

/* Modo oscuro para CUE inválido */
body.dark-mode .cue-invalid {
    background-color: #552222; /* Fondo rojo oscuro en modo oscuro */
    border-left: 3px solid #ff5555; /* Borde izquierdo rojo */
}

/* Modo oscuro para mensaje de invalidez */
body.dark-mode .invalid-message {
    color: #ff6b6b; /* Texto rojo claro en modo oscuro */
}

/* Modo oscuro para Constancia No Enviada */
body.dark-mode .condition-not-sent {
    border-left: 3px solid #ff5555; /* Borde izquierdo rojo */
}

/* Modo oscuro para correo inválido */
body.dark-mode .email-invalid {
    border-left: 3px solid #ffcc00; /* Borde izquierdo amarillo */
}

/* Estilos para la sección de reenvíos en modo oscuro */
body.dark-mode .reenvio-data-container {
    background-color: #2d3748; /* Fondo azul grisáceo */
    border-left: 3px solid #4299e1; /* Borde izquierdo azul */
    color: #ffffff !important; /* Texto blanco con prioridad */
}

body.dark-mode .reenvio-data-container * {
    color: #ffffff !important; /* Texto blanco para todos los hijos con prioridad */
}

body.dark-mode .reenvio-title strong {
    color: #63b3ed !important; /* Texto azul claro para <strong> en el título */
}

body.dark-mode .fecha-reenvio {
    color: #cbd5e0 !important; /* Texto gris claro para la fecha */
}

body.dark-mode .reenvio-data-container .sent {
    background-color: #276749; /* Fondo verde oscuro para estado enviado */
    color: #ffffff !important; /* Texto blanco con prioridad */
}

body.dark-mode .reenvio-data-container .sent strong {
    color: #ffffff !important; /* Texto blanco para <strong> en estado enviado */
}

body.dark-mode .resent-badge {
    background-color: #2b6cb0; /* Fondo azul para la insignia */
    color: #ffffff !important; /* Texto blanco con prioridad */
}

/* Responsive */
@media (max-width: 600px) {
    .search-box {
        flex-direction: column; /* Cambia a columna en pantallas pequeñas */
        align-items: stretch; /* Elementos estirados al ancho completo */
    }
    
    .title-message {
        text-align: center; /* Texto centrado */
        padding-left: 0; /* Sin relleno izquierdo */
        margin-top: 10px; /* Margen superior de 10px */
        font-size: 16px; /* Tamaño de fuente de 16px */
    }
    
    .title-message strong {
        font-size: 16px; /* Tamaño de fuente de 16px para <strong> */
    }
    
    .title-message br + * {
        font-size: 16px; /* Tamaño de fuente de 16px para elementos tras <br> */
    }
    
    .action-row {
        flex-direction: column; /* Cambia a columna en pantallas pequeñas */
    }
    
    #emailInput,
    #nameInput,
    #cueInput,
    #resendButton {
        width: 100%; /* Ancho completo */
        flex: none; /* Sin proporción flexible */
        margin-bottom: 5px; /* Margen inferior de 5px */
    }
    
    .data-item {
        flex-direction: column; /* Cambia a columna en pantallas pequeñas */
        align-items: flex-start; /* Alinea a la izquierda */
    }
    
    .result-header {
        flex-direction: column; /* Cambia a columna en pantallas pequeñas */
        align-items: flex-start; /* Alinea a la izquierda */
        gap: 5px; /* Espacio de 5px entre elementos */
    }
    
    .invalid-message {
        margin-left: 0; /* Sin margen izquierdo */
        display: block; /* Visible como bloque */
        margin-top: 3px; /* Margen superior de 3px */
    }
}

body.dark-mode .data-item strong {
    color: #f0f0f0; /* Texto gris claro para <strong> en ítems en modo oscuro */
}

.invalid-message {
    margin-left: 20px; /* Margen izquierdo de 20px (fuera de media query) */
    font-style: italic; /* Texto en cursiva */
    white-space: nowrap; /* Sin ajuste de línea */
}

/* Estilos para el botón de rectificar nombre */
.btn-rectify {
    background-color: #ff9800;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 0.8em;
    cursor: pointer;
    margin-left: 10px;
    transition: background-color 0.3s;
}

.btn-rectify:hover {
    background-color: #e68a00;
}

/* Estilos para el modal de edición de nombre */
.name-edit-modal {
    max-width: 500px;
}

.name-edit-modal .input-group {
    margin: 20px 0;
}

.name-edit-modal input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

.name-edit-modal p {
    color: #333; /* Color oscuro para modo claro */
}

.validation-error {
    color: #dc3545;
    margin-top: 10px;
    font-size: 14px;
    background-color: rgba(220, 53, 69, 0.1);
    padding: 8px;
    border-radius: 4px;
    border-left: 3px solid #dc3545;
}

/* Estilos para modo oscuro */
.dark-mode .btn-rectify {
    background-color: #ff9800;
    color: #333;
}

.dark-mode .btn-rectify:hover {
    background-color: #ffa726;
}

.dark-mode .name-edit-modal input {
    background-color: #444;
    color: #fff;
    border-color: #555;
}

.dark-mode .name-edit-modal p {
    color: #fff; /* Color blanco para modo oscuro */
}

.dark-mode .validation-error {
    background-color: rgba(220, 53, 69, 0.2);
    color: #f8d7da;
}

/* Asegurar que todos los elementos de texto del modal de edición de nombre tengan el color correcto en modo oscuro */
.dark-mode .name-edit-modal .modal-header h2,
.dark-mode .name-edit-modal .modal-content,
.dark-mode .name-edit-modal .modal-footer {
    color: #fff; /* Color blanco para el texto en modo oscuro */
}

.dark-mode .name-edit-modal #nameEditError {
    color: #f8d7da; /* Color más claro para los errores en modo oscuro */
}

/* Estilo para la nota informativa en el modal de edición de nombre */
.info-note {
    font-style: italic;
    font-size: 0.9em;
    color: #000000; /* Texto negro para la nota */
    margin-top: 10px;
    padding: 10px;
    background-color: #f8f9fa; /* Fondo gris muy claro */
    border-left: 4px solid #17a2b8; /* Borde izquierdo cian para resaltar */
}

/* Estilo para la nota informativa en modo oscuro */
.dark-mode .info-note {
    color: #000000 !important; /* Texto negro para la nota en modo oscuro */
    background-color: #dde1e6;
    border-left-color: #17a2b8;
}

/* En el modo oscuro, el texto dentro del contenido del modal de caché debe ser blanco */
body.dark-mode #clearCacheConfirmModal .modal-content p {
    color: #ffffff;
}

.status-message.default {
    background: #e0e0e0; /* Un gris neutro */
    color: #333;
}

body.dark-mode .status-message.default {
    color: #aaa;
    background-color: #333;
    border-color: #444;
}

/* Estilo para el botón de desarrollo (limpiar storage) */
.dev-only-button {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ff6b6b;
    color: white;
    position: relative;
}

.dev-only-button:hover {
    background-color: #ff4757;
}

.dev-only-button::before {
    content: "DEV";
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 8px;
    background-color: #000;
    color: #fff;
    padding: 2px 4px;
    border-radius: 4px;
    font-weight: bold;
}

body.dark-mode .dev-only-button {
    background-color: #d63031;
}

body.dark-mode .dev-only-button:hover {
    background-color: #ff4d4d;
}

.dark-mode #main-title p {
    color: #ffffff;
}

/* =====================================================
   ESTILOS PARA SISTEMA OTP
   ===================================================== */

/* Contenedores principales OTP */
.otp-login-container,
.otp-verify-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

/* Tarjetas OTP */
.otp-login-card,
.otp-verify-card {
    background: white;
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    padding: 40px;
    width: 90%;
    max-width: 450px;
    text-align: center;
    animation: slideIn 0.3s ease-out;
}

/* Animación de entrada */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Encabezados OTP */
.otp-header h1 {
    color: #333;
    font-size: 1.8rem;
    margin-bottom: 10px;
    font-weight: 600;
}

.otp-header p {
    color: #666;
    font-size: 1rem;
    margin-bottom: 20px;
}

/* Leyenda de declaración jurada */
.legal-notice {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 8px;
    padding: 15px;
    margin-top: 15px;
    margin-bottom: 20px;
    border-left: 4px solid #f39c12;
}

.legal-notice p {
    color: #856404 !important;
    font-size: 13px;
    font-weight: 600;
    margin: 0;
    text-align: center;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.otp-dni-display {
    background: #f8f9fa;
    padding: 10px;
    border-radius: 8px;
    margin: 15px 0;
    font-weight: 600;
    color: #495057;
}

/* Formularios OTP */
.otp-form {
    margin-top: 30px;
}

.otp-input-group {
    margin-bottom: 25px;
    text-align: left;
}

.otp-input-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}

.otp-input-group input[type="text"] {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.3s ease;
    text-align: center;
    font-weight: 600;
}

.otp-input-group input[type="text"]:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Pantalla de código OTP */
.otp-code-display {
    margin-bottom: 30px;
}

.otp-code-display label {
    display: block;
    margin-bottom: 15px;
    font-weight: 600;
    color: #333;
    text-align: center;
}

.otp-code-box {
    background: #f8f9fa;
    border: 2px solid #28a745;
    border-radius: 10px;
    padding: 20px;
    font-size: 2rem;
    font-weight: bold;
    color: #28a745;
    letter-spacing: 8px;
    margin-bottom: 15px;
    font-family: 'Courier New', monospace;
}

.otp-countdown {
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 15px;
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: 5px;
    border: 1px solid #dee2e6;
    transition: all 0.3s ease;
}

.otp-instruction {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 20px;
}

/* Campos de entrada de dígitos OTP */
.otp-code-inputs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
}

.otp-digit-input {
    width: 50px !important;
    height: 50px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.otp-digit-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
    transform: scale(1.05);
}

/* Botones OTP */
.otp-login-card button,
.otp-verify-card button {
    width: 100%;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 10px;
}

#verifyDniButton,
#verifyOtpButton {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

#verifyDniButton:hover,
#verifyOtpButton:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

#verifyDniButton:disabled,
#verifyOtpButton:disabled {
    background: #6c757d;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-secondary {
    background: #6c757d !important;
    color: white !important;
}

.btn-secondary:hover {
    background: #5a6268 !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(108, 117, 125, 0.4);
}

.otp-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Botón del instructivo */
.btn-instructivo {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    border: none;
    padding: 12px 20px;
    margin-top: 15px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    width: 100%;
}

.btn-instructivo:hover {
    background: linear-gradient(135deg, #218838 0%, #1ab394 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
}

/* Modo oscuro para el botón del instructivo */
body.dark-mode .btn-instructivo {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
}

body.dark-mode .btn-instructivo:hover {
    background: linear-gradient(135deg, #218838 0%, #1ab394 100%);
}

/* Mensajes OTP */
.otp-message {
    padding: 12px 15px;
    border-radius: 8px;
    margin-top: 20px;
    font-weight: 500;
    text-align: center;
}

.otp-message-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.otp-message-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f1b0b7;
}

.otp-message-info {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #b6d4db;
}

/* Estilos para modo oscuro - Sistema OTP */
body.dark-mode .otp-login-card,
body.dark-mode .otp-verify-card {
    background: #2a2a2a;
    color: #f0f0f0;
}

body.dark-mode .otp-header h1 {
    color: #f0f0f0;
}

body.dark-mode .otp-header p {
    color: #ccc;
}

/* Leyenda de declaración jurada - Modo oscuro */
body.dark-mode .legal-notice {
    background: #3a3a3a;
    border: 1px solid #555;
    border-left: 4px solid #f39c12;
}

body.dark-mode .legal-notice p {
    color: #f8d7da !important;
}

body.dark-mode .otp-dni-display {
    background: #3a3a3a;
    color: #f0f0f0;
}

body.dark-mode .otp-input-group label {
    color: #f0f0f0;
}

body.dark-mode .otp-input-group input[type="text"] {
    background: #3a3a3a;
    border-color: #555;
    color: #f0f0f0;
}

body.dark-mode .otp-input-group input[type="text"]:focus {
    border-color: #667eea;
}

body.dark-mode .otp-code-display label {
    color: #f0f0f0;
}

body.dark-mode .otp-code-box {
    background: #3a3a3a;
    border-color: #28a745;
    color: #28a745;
}

body.dark-mode .otp-countdown {
    background: #3a3a3a;
    border-color: #555;
    color: #ffffff;
}

body.dark-mode .otp-instruction {
    color: #ccc;
}

body.dark-mode .otp-digit-input {
    background: #3a3a3a;
    border-color: #555;
    color: #f0f0f0;
}

body.dark-mode .otp-digit-input:focus {
    border-color: #667eea;
}

body.dark-mode .otp-message-success {
    background: #1a7741;
    color: #eaeef3;
    border-color: #28a745;
}

body.dark-mode .otp-message-error {
    background: #c76470;
    color: #eaeef3;
    border-color: #dc3545;
}

body.dark-mode .otp-message-info {
    background: #0d4b8c;
    color: #eaeef3;
    border-color: #17a2b8;
}

/* Responsive para OTP */
@media (max-width: 600px) {
    .otp-login-card,
    .otp-verify-card {
        padding: 30px 20px;
        margin: 20px;
    }
    
    .otp-header h1 {
        font-size: 1.5rem;
    }
    
    .otp-code-box {
        font-size: 1.5rem;
        letter-spacing: 4px;
        padding: 15px;
    }
    
    .otp-countdown {
        font-size: 0.9rem;
        padding: 6px 10px;
    }
    
    .otp-digit-input {
        width: 40px !important;
        height: 40px;
        font-size: 1.2rem;
    }
    
    .otp-code-inputs {
        gap: 8px;
    }
}

/* Estilos para el temporizador de sesión */
.session-timer {
    background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
    color: white;
    padding: 15px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
    border: 2px solid #ff5252;
    animation: timerPulse 2s infinite;
}

.timer-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
    font-size: 16px;
}

.timer-icon {
    font-size: 20px;
    animation: timerShake 1s infinite;
}

.timer-countdown {
    font-family: 'Courier New', monospace;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.timer-warning {
    font-size: 14px;
    opacity: 0.9;
}

/* Animaciones para el temporizador */
@keyframes timerPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 6px 16px rgba(255, 107, 107, 0.5);
    }
}

@keyframes timerShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}

/* Estilos para cuando quedan menos de 2 minutos */
.session-timer.critical {
    background: linear-gradient(135deg, #ff3030, #ff6060);
    animation: timerCritical 1s infinite;
}

@keyframes timerCritical {
    0%, 100% {
        background: linear-gradient(135deg, #ff3030, #ff6060);
    }
    50% {
        background: linear-gradient(135deg, #ff0000, #ff4040);
    }
}

/* Modo oscuro para el temporizador */
body.dark-mode .session-timer {
    background: linear-gradient(135deg, #cc3333, #dd5555);
    border-color: #aa2222;
    box-shadow: 0 4px 12px rgba(204, 51, 51, 0.4);
}

body.dark-mode .session-timer.critical {
    background: linear-gradient(135deg, #aa1111, #cc3333);
}

/* Responsive para el temporizador */
@media (max-width: 600px) {
    .session-timer {
        padding: 12px 16px;
        margin-bottom: 15px;
    }
    
    .timer-content {
        font-size: 14px;
        gap: 6px;
    }
    
    .timer-countdown {
        font-size: 18px;
    }
    
    .timer-warning {
        font-size: 12px;
    }
}

/* Estilos específicos para el modal de envío por correo */
.email-warning {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 8px;
    padding: 15px;
    margin: 20px 0;
}

.email-warning p {
    margin: 5px 0;
    color: #856404;
    font-size: 14px;
}

.email-warning strong {
    color: #721c24;
}

#emailCertificatesList {
    margin: 20px 0;
}

#emailCertificatesList h3 {
    color: #333;
    margin-bottom: 10px;
    font-size: 16px;
}

#emailCertificatesList ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#emailCertificatesList li {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 5px;
    padding: 10px;
    margin: 5px 0;
    font-size: 14px;
    color: #495057;
}

/* Estilos para modo oscuro del modal de correo */
body.dark-mode .email-warning {
    background: #3d2f00;
    border-color: #6c5ce7;
}

body.dark-mode .email-warning p {
    color: #fdcb6e;
}

body.dark-mode .email-warning strong {
    color: #fab1a0;
}

body.dark-mode #emailCertificatesList h3 {
    color: #f0f0f0;
}

body.dark-mode #emailCertificatesList li {
    background: #3a3a3a;
    border-color: #555;
    color: #e0e0e0;
}