/*****************************************************************************************************************************************************************************/ /* */ /* Estilos para el Proyecto Python Tkinter */ /* */ /*****************************************************************************************************************************************************************************/ /* */ /* Autor: Magallanes López Carlos Gabriel */ /* Versión del Proyecto: 1.1 */ /* Correo: cgmagallanes23@gmail.com */ /* Ultima Modificación: 20/03/2026 */ /* */ /*****************************************************************************************************************************************************************************/ /* Selector Universal (Reset Básico) */ * {margin: 0; padding: 0; box-sizing: border-box;} /* Body */ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; background: linear-gradient(135deg, rgba(28,28,28,0.5), rgba(43,43,43,0.5)), url('../imgs/background.png') center/cover fixed; /* Imagen de Fondo, Centrada, Cubriendo toda el Área, Fija */ color: #c9d1d9; line-height: 1.6; min-height: 100vh; /* Asegura que el Body ocupe toda la Altura de la Ventana */ margin: 0; /* Elimina Márgenes del Body */ -webkit-font-smoothing: antialiased; /* Mejora la Apariencia de las Fuentes en WebKit */ -moz-osx-font-smoothing: grayscale; /* Mejora la Apariencia de las Fuentes en Firefox */ } /* Barra de Navegación */ nav { padding: 15px 0; position: sticky; /* Posición Sticky (se fija al hacer scroll) */ top: 0; /* Se fija en la parte superior */ z-index: 1000; /* Asegura que la barra esté por encima de otros elementos */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); background: #161616; border-bottom: 1px solid #3a3a3a; /* Borde Inferior para Separar la Barra del Contenido */ } /* Contenedor de Navegación */ .nav-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; /* Usamos Flexbox para organizar el contenido de la barra */ justify-content: space-between; /* Espacio entre el logo y el botón de volver */ align-items: center; flex-wrap: wrap; /* Permite que los elementos se ajusten en pantallas pequeñas */ gap: 10px; /* Espacio entre elementos en caso de que se ajusten */ padding: 10px 20px; } /* Logo de Navegación */ .nav-logo {font-size: clamp(1em, 2vw, 1.5em); font-weight: bold; color: #fff3b0; text-decoration: none;} /* Botón de Volver */ .back-btn { padding: 10px 20px; background: #21262d; color: #c9d1d9; text-decoration: none; border-radius: 8px; /* Bordes Redondeados para un Estilo Más Suave */ border: 1px solid #30363d; transition: all 0.3s ease; /* Transición para Efectos de Hover Suaves */ } /* Eventos de Hover para el Botón de Volver */ .back-btn:hover { background: #30363d; border-color: #ffd43b; transform: translateY(-2px); /* Efecto de Elevación al Hacer Hover */ } /* Contenedor Principal */ .container {max-width: 1200px; margin: 0 auto; padding: 40px 20px;} /* Encabezado del Proyecto */ .project-header { text-align: center; padding: 60px 20px; background: #161b22; border-radius: 15px; margin-bottom: 40px; /* Espacio Inferior para Separar del Resto del Contenido */ border: 1px solid #30363d; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); } /* Título del Proyecto*/ .project-header h1 {font-size: 3em; color: #fff3b0; margin-bottom: 20px;} /* Descripción del Proyecto */ .project-header p { font-size: 1.3em; color: #8b949e; margin-bottom: 30px;} /* Tags del Proyecto */ .project-tags { display: flex; /* Usamos Flexbox para organizar los tags */ justify-content: center; flex-wrap: wrap; /* Permite que los tags se ajusten en pantallas pequeñas */ gap: 10px; /* Espacio entre los tags */ margin-bottom: 30px; /* Espacio Inferior para Separar del Resto del Contenido */ } /* Estilo para cada Tag */ .tag { background: #21262d; color: #fff3b0; padding: 8px 16px; border-radius: 20px; font-size: 0.9em; border: 1px solid #30363d; } /* Enlaces del Proyecto */ .project-links { display: flex; /* Usamos Flexbox para organizar los enlaces */ justify-content: center; gap: 15px; /* Espacio entre los enlaces */ flex-wrap: wrap; /* Permite que los enlaces se ajusten en pantallas pequeñas */ } /* Estilo para cada Enlace */ .project-links a { padding: 12px 24px; background: #238636; color: white; text-decoration: none; border-radius: 8px; /* Bordes Redondeados para un Estilo Más Suave */ transition: all 0.3s ease; /* Transición para Efectos de Hover Suaves */ font-weight: bold; } /* Eventos de Hover para los Enlaces */ .project-links a:hover { background: #2ea043; transform: translateY(-2px); /* Efecto de Elevación al Hacer Hover */ } /* Estilo para Enlaces Secundarios */ .project-links a.secondary {background: #21262d; border: 1px solid #30363d; color: #c9d1d9;} /* Eventos de Hover para Enlaces Secundarios */ .project-links a.secondary:hover {background: #30363d; border-color: #ffd43b;} /* Secciones de Contenido */ .content-section { background: #161b22; padding: 40px; border-radius: 15px; /* Bordes Redondeados para un Estilo Más Suave */ margin-bottom: 30px; /* Espacio Inferior para Separar las Secciones entre Sí */ border: 1px solid #30363d; } /* Estilo para el Título de las Secciones */ .content-section h2 { color: #fff3b0; margin-bottom: 20px; font-size: 2em; border-bottom: 2px solid #30363d; padding-bottom: 10px; /* Espacio entre el Título y la Línea */ text-align: center; } /* Estilo para los Subtítulos dentro de las Secciones */ .content-section h3 {color: #fff3b0; margin-top: 25px; margin-bottom: 15px; font-size: 1.5em;} /* Estilo para los Párrafos dentro de las Secciones */ .content-section p {margin-bottom: 15px; line-height: 1.8; font-size: 1.1em;} /* Estilo para Listas dentro de las Secciones */ .content-section ul, .content-section ol {margin-left: 60px; margin-bottom: 20px;} /* Estilo para los Ítems de las Listas */ .content-section li { margin-bottom: 10px; line-height: 1.8;} /* Grid de Características */ .features-grid { display: grid; /* Organizar características en una cuadrícula */ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Ancho mínimo de 250px y se ajustará automáticamente */ gap: 20px; /* Espacio entre las tarjetas de características */ margin-top: 20px; } /* Tarjeta de Característica */ .feature-card { padding: 20px; border-radius: 10px; border: 1px solid #30363d; transition: all 0.3s ease; /* Transición para Efectos de Hover Suaves */ background: #2a2a2a; } /* Eventos de Hover para las Tarjetas de Características */ .feature-card:hover { transform: translateY(-3px); /* Efecto de Elevación al Hacer Hover */ border-color: #ffd43b; box-shadow: 0 5px 20px rgba(88, 166, 255, 0.2); } /* Estilo para el Título de cada Característica */ .feature-card h4 {color: #fff3b0; margin-bottom: 10px; font-size: 1.2em;} /* Screenshots */ .screenshots { display: grid; /* Organizar las capturas de pantalla en una cuadrícula */ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Ancho mínimo de 300px y se ajustará automáticamente */ gap: 20px; margin-top: 20px; } /* Tarjeta de Captura de Pantalla */ .screenshot { border-radius: 10px; border: 1px solid #30363d; overflow: hidden; /* Asegura que las imágenes no sobresalgan de la tarjeta */ background: #21262d; transition: transform 0.3s ease; /* Transición para Efectos de Hover Suaves */ display: flex; /* Usamos Flexbox para organizar la imagen y el texto dentro de la tarjeta */ flex-direction: column; /* Colocamos la imagen arriba y el texto abajo */ } /* Estilo para las Imágenes dentro de las Tarjetas de Captura de Pantalla */ .screenshot img { width: 100%; height: 250px; object-fit: cover; /* Imagen cubre toda el área asignada sin distorsionarse */ object-position: top; /* Parte superior de la imagen se muestre si es recortada */ display: block; /* Elimina el espacio debajo de la imagen */ flex-shrink: 0; /* Evita que imagen se reduzca de tamaño si texto es largo */ } /* Estilo para el Texto debajo de las Imágenes en las Tarjetas de Captura de Pantalla */ .screenshot p { padding: 15px; text-align: center; color: #8b949e; flex-grow: 1; /* Texto ocupa el espacio restante debajo de la imagen*/ display: flex; /* Usamos Flexbox para centrar el texto dentro del área asignada */ align-items: center; justify-content: center; } /* Eventos de Hover para las Tarjetas de Captura de Pantalla */ .screenshot:hover {transform: scale(1.02);} /* Código */ code { background: #21262d; padding: 2px 6px; border-radius: 4px; color: #f85149; font-family: 'Courier New', monospace; } /* Bloque de Código */ pre { background: #21262d; padding: 20px; border-radius: 8px; overflow-x: auto; /* Permite desplazamiento horizontal si código es muy largo */ margin: 20px 0; border: 1px solid #30363d; } /* Estilo para el Código dentro de los Bloques de Código */ pre code {background: none; padding: 0; color: #c9d1d9;} /* Pie de Página */ footer {text-align: center; padding: 30px; color: #8b949e; margin-top: 40px;} /* Animaciones de Fade In */ .content-section, .project-header { background: #1e1e1e; border: 1px solid #3a3a3a; opacity: 0; /* Inicialmente ocultos para el efecto de fade in */ transition: opacity 1.5s ease; /* Transición suave para el efecto de fade in */ } /* Sección visible y Encabezado visible */ .content-section.visible, .project-header.visible { opacity: 1; /* Opacidad completa cuando se vuelven visibles */ } /* Web Responsive */ @media (max-width: 768px) { /* Estilos para pantallas pequeñas (móviles y tablets) */ .project-header h1 {font-size: 2em;} /* Reduce el tamaño del título en pantallas pequeñas */ .project-header p {font-size: 1.1em;} /* Reduce el tamaño de la descripción en pantallas pequeñas */ .content-section {padding: 20px;} /* Reduce el padding de las secciones en pantallas pequeñas */ .features-grid { /* Cuadrícula de características */ grid-template-columns: 1fr; /* Cambia a una sola columna en pantallas pequeñas */ } .project-links { /* Enlaces del proyecto */ flex-direction: column; /* Cambia a una columna para los enlaces en pantallas pequeñas */ } } /*****************************************************************************************************************************************************************************/