/* Estilos generales para el contenedor */
        .project-container {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            padding: 20px;
            background-color: #f8f9fa;
            border-radius: 10px;
            max-width: 400px;
            margin: 20px auto;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        /* Estilos base para el estado del proyecto */
        .project-status {
            display: inline-block;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 600;
            letter-spacing: 0.3px;
            text-transform: uppercase;
            margin-right: 10px;
            transition: all 0.3s ease;
        }
        
        /* Variantes de estado */
        .status-active {
            background-color: #e7f7ef;
            color: #0d8b5e;
            border: 1px solid #a8e6bf;
        }
        
        .status-inactive {
            background-color: #f8f9fa;
            color: #6c757d;
            border: 1px solid #dee2e6;
        }
        
        .status-pending {
            background-color: #fff3cd;
            color: #856404;
            border: 1px solid #ffeaa7;
        }
        
        .status-completed {
            background-color: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }
        
        /* Efecto hover para estados */
        .project-status:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        
        /* Estilos para el enlace del proyecto */
        .project-link {
            display: inline-block;
            padding: 8px 16px;
            background-color: #4a6ee0;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
            letter-spacing: 0.2px;
        }
        
        .project-link:hover {
            background-color: #3a5bd0;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(74, 110, 224, 0.3);
        }
        
        .project-link:active {
            transform: translateY(0);
            box-shadow: 0 2px 4px rgba(74, 110, 224, 0.3);
        }
        
        /* Versión alternativa para el enlace (sin fondo) */
        .project-link.outline {
            background-color: transparent;
            color: #4a6ee0;
            border: 1px solid #4a6ee0;
        }
        
        .project-link.outline:hover {
            background-color: #4a6ee0;
            color: white;
        }
        
        /* Separador entre estado y enlace */
        .project-separator {
            display: inline-block;
            width: 1px;
            height: 20px;
            background-color: #dee2e6;
            margin: 0 15px;
            vertical-align: middle;
        }
        
        /* Estilos para el ejemplo en la página */
        .example-row {
            margin-bottom: 20px;
            padding: 15px;
            border-bottom: 1px dashed #dee2e6;
        }
        
        .example-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 10px;
            color: #333;
        }
        
        .code-block {
            background-color: #2d2d2d;
            color: #f8f8f2;
            padding: 15px;
            border-radius: 5px;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            margin-top: 15px;
            overflow-x: auto;
        }
        
        .code-comment {
            color: #6a9955;
        }
        
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }
        
        .instructions {
            background-color: #e9f7fe;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
            border-left: 4px solid #4a6ee0;
        }