<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ahmed's Activity Workbook - Corregido</title>
    <style>
        @page {
            size: A4 portrait;
            margin: 15mm;
        }
        body {
            font-family: 'Segoe UI', Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f9f9f9;
            color: #333;
        }
        .page {
            width: 180mm;
            height: 255mm;
            page-break-after: always;
            background: #ffffff;
            border: 2px solid #e0e0e0;
            border-radius: 12px;
            padding: 15mm;
            box-sizing: border-box;
            position: relative;
            margin: 10px auto;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        
        /* Encabezado y Pie de página */
        .header {
            border-bottom: 3px solid #4A90E2;
            padding-bottom: 8px;
            margin-bottom: 15px;
        }
        .header h1 {
            margin: 0;
            font-size: 22pt;
            color: #2C3E50;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .header p {
            margin: 5px 0 0 0;
            font-size: 12pt;
            color: #7F8C8D;
            font-weight: 600;
        }
        .footer {
            border-top: 2px solid #ECF0F1;
            padding-top: 8px;
            display: flex;
            justify-content: space-between;
            font-size: 10pt;
            color: #95A5A6;
            font-weight: bold;
        }

        /* Área de Contenido */
        .content {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        /* Estilos de Portada */
        .cover {
            text-align: center;
            justify-content: space-around;
        }
        .cover-title {
            font-size: 32pt;
            color: #2C3E50;
            font-weight: 900;
            margin-bottom: 10px;
        }
        .cover-subtitle {
            font-size: 14pt;
            color: #3498DB;
            font-weight: bold;
            word-spacing: 3px;
        }
        .name-box {
            border: 2px dashed #3498DB;
            padding: 15px 30px;
            border-radius: 8px;
            font-size: 16pt;
            width: 70%;
            margin: 20px auto;
        }

        /* Rejillas y Formas */
        .grid-3x3 {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 25px;
            width: 100%;
            justify-items: center;
            align-items: center;
        }
        .shape {
            display: inline-block;
            margin: 10px;
        }
        .circle {
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }
        .square {
            width: 50px;
            height: 50px;
        }
        .triangle {
            width: 0;
            height: 0;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
            border-bottom: 50px solid;
        }
        .star {
            font-size: 45pt;
            line-height: 50px;
        }
        
        /* Colores */
        .bg-pink { background-color: #FF6B81; border-color: #FF6B81; color: #FF6B81; }
        .bg-blue { background-color: #54A0FF; border-color: #54A0FF; color: #54A0FF; }
        .bg-yellow { background-color: #FECA57; border-color: #FECA57; color: #FECA57; }
        .bg-green { background-color: #1DD1A1; border-color: #1DD1A1; color: #1DD1A1; }
        .bg-purple { background-color: #5F27CD; border-color: #5F27CD; color: #5F27CD; }

        /* Filas de ejercicios */
        .row-item {
            display: flex;
            width: 100%;
            justify-content: space-around;
            align-items: center;
            margin: 12px 0;
            padding: 10px;
            border: 1px solid #F0F0F0;
            border-radius: 8px;
        }
        .option-btn {
            border: 2px solid #BDC3C7;
            padding: 8px 15px;
            border-radius: 6px;
            font-weight: bold;
            color: #7F8C8D;
        }

        /* Imprimir configuraciones */
        @media print {
            body { background: none; }
            .page { margin: 0; border: none; border-radius: 0; }
        }
    </style>
</head>
<body>

    <!-- PÁGINA 1: PORTADA -->
    <div class="page cover">
        <div>
            <div class="cover-title">AHMED'S<br>ACTIVITY WORKBOOK</div>
            <div class="cover-subtitle">Visual Attention &bull; Fine Motor &bull; Cognitive Skills &bull; Language</div>
        </div>
        <div class="name-box">
            <strong>Name:</strong> ________________________
        </div>
        <div style="font-size: 14pt; color: #27AE60; font-weight: bold;">
            Color &bull; Print &bull; Practice &bull; Celebrate
        </div>
        <div class="footer">
            <span>Ahmed's Learning Series</span>
            <span>Cover Page</span>
        </div>
    </div>

    <!-- PÁGINA 2: VISUAL ATTENTION 1 -->
    <div class="page">
        <div class="header">
            <h1>Visual Attention 1</h1>
            <p>Circle every STAR. Ignore the other shapes.</p>
        </div>
        <div class="content grid-3x3">
            <div class="star bg-pink">&#9733;</div>
            <div class="circle bg-blue"></div>
            <div class="star bg-yellow">&#9733;</div>
            <div class="square bg-green"></div>
            <div class="circle bg-purple"></div>
            <div class="star bg-pink">&#9733;</div>
            <div class="square bg-blue"></div>
            <div class="circle bg-yellow"></div>
            <div class="star bg-green">&#9733;</div>
        </div>
        <div class="footer">
            <span>Ahmed Visual Attention</span>
            <span>Page 1</span>
        </div>
    </div>

    <!-- PÁGINA 3: VISUAL ATTENTION 2 -->
    <div class="page">
        <div class="header">
            <h1>Visual Attention 2</h1>
            <p>Circle every TRIANGLE. Ignore the other shapes.</p>
        </div>
        <div class="content grid-3x3">
            <div class="triangle bg-yellow"></div>
            <div class="circle bg-pink"></div>
            <div class="square bg-green"></div>
            <div class="triangle bg-blue"></div>
            <div class="square bg-purple"></div>
            <div class="triangle bg-pink"></div>
            <div class="circle bg-green"></div>
            <div class="triangle bg-yellow"></div>
            <div class="square bg-blue"></div>
        </div>
        <div class="footer">
            <span>Ahmed Visual Attention</span>
            <span>Page 2</span>
        </div>
    </div>

    <!-- PÁGINA 4: VISUAL ATTENTION 3 -->
    <div class="page">
        <div class="header">
            <h1>Visual Attention 3</h1>
            <p>Circle the two pictures in each row that are exactly the same.</p>
        </div>
        <div class="content" style="width: 100%;">
            <div class="row-item">
                <div class="circle bg-blue"></div>
                <div class="square bg-red"></div>
                <div class="circle bg-blue"></div>
            </div>
            <div class="row-item">
                <div class="star bg-yellow">&#9733;</div>
                <div class="star bg-yellow">&#9733;</div>
                <div class="triangle bg-green"></div>
            </div>
            <div class="row-item">
                <div class="square bg-purple"></div>
                <div class="circle bg-pink"></div>
                <div class="square bg-purple"></div>
            </div>
        </div>
        <div class="footer">
            <span>Ahmed Visual Attention</span>
            <span>Page 3</span>
        </div>
    </div>

    <!-- PÁGINA 5: VISUAL ATTENTION 4 -->
    <div class="page">
        <div class="header">
            <h1>Visual Attention 4</h1>
            <p>In each row, circle the picture that is different.</p>
        </div>
        <div class="content" style="width: 100%;">
            <div class="row-item">
                <div class="circle bg-green"></div>
                <div class="circle bg-green"></div>
                <div class="square bg-green"></div>
            </div>
            <div class="row-item">
                <div class="star bg-pink">&#9733;</div>
                <div class="circle bg-pink"></div>
                <div class="star bg-pink">&#9733;</div>
            </div>
            <div class="row-item">
                <div class="triangle bg-blue"></div>
                <div class="triangle bg-blue"></div>
                <div class="circle bg-blue"></div>
            </div>
        </div>
        <div class="footer">
            <span>Ahmed Visual Attention</span>
            <span>Page 4</span>
        </div>
    </div>

    <!-- PÁGINA 6: VISUAL ATTENTION 5 -->
    <div class="page">
        <div class="header">
            <h1>Visual Attention 5</h1>
            <p>Circle all the PINK objects on the page.</p>
        </div>
        <div class="content grid-3x3">
            <div class="circle bg-pink"></div>
            <div class="square bg-blue"></div>
            <div class="triangle bg-green"></div>
            <div class="star bg-pink">&#9733;</div>
            <div class="circle bg-yellow"></div>
            <div class="square bg-purple"></div>
            <div class="triangle bg-pink"></div>
            <div class="square bg-green"></div>
            <div class="star bg-pink">&#9733;</div>
        </div>
        <div class="footer">
            <span>Ahmed Visual Attention</span>
            <span>Page 5</span>
        </div>
    </div>

    <!-- PÁGINA 7: FINE MOTOR 1 -->
    <div class="page">
        <div class="header">
            <h1>Fine Motor 1</h1>
            <p>Trace each path from the animal to its matching food.</p>
        </div>
        <div class="content" style="width: 100%;">
            <div class="row-item">
                <strong>DOG</strong>
                <span style="border-bottom: 2px dashed #95A5A6; width: 50%;"></span>
                <strong>BONE</strong>
            </div>
            <div class="row-item">
                <strong>CAT</strong>
                <span style="border-bottom: 2px dashed #95A5A6; width: 50%;"></span>
                <strong>FISH</strong>
            </div>
            <div class="row-item">
                <strong>RABBIT</strong>
                <span style="border-bottom: 2px dashed #95A5A6; width: 50%;"></span>
                <strong>CARROT</strong>
            </div>
            <div class="row-item">
                <strong>BIRD</strong>
                <span style="border-bottom: 2px dashed #95A5A6; width: 50%;"></span>
                <strong>SEEDS</strong>
            </div>
        </div>
        <div class="footer">
            <span>Ahmed Fine Motor</span>
            <span>Page 6</span>
        </div>
    </div>

    <!-- PÁGINA 8: COGNITIVE SKILLS 1 -->
    <div class="page">
        <div class="header">
            <h1>Cognitive Skills 1</h1>
            <p>Look at each pair. Circle SAME or DIFFERENT.</p>
        </div>
        <div class="content" style="width: 100%;">
            <div class="row-item">
                <div class="circle bg-blue"></div>
                <div class="circle bg-blue"></div>
                <div>
                    <span class="option-btn">SAME</span>
                    <span class="option-btn">DIFFERENT</span>
                </div>
            </div>
            <div class="row-item">
                <div class="square bg-red"></div>
                <div class="circle bg-yellow"></div>
                <div>
                    <span class="option-btn">SAME</span>
                    <span class="option-btn">DIFFERENT</span>
                </div>
            </div>
            <div class="row-item">
                <div class="star bg-green">&#9733;</div>
                <div class="star bg-green">&#9733;</div>
                <div>
                    <span class="option-btn">SAME</span>
                    <span class="option-btn">DIFFERENT</span>
                </div>
            </div>
        </div>
        <div class="footer">
            <span>Ahmed Cognitive Skills</span>
            <span>Page 7</span>
        </div>
    </div>

    <!-- PÁGINA 9: LANGUAGE SKILLS 1 -->
    <div class="page">
        <div class="header">
            <h1>Language Skills 1</h1>
            <p>Point to the person or picture that shows each action.</p>
        </div>
        <div class="content grid-3x3">
            <div style="text-align: center;">
                <div style="font-size: 30pt;">&#127837;</div>
                <strong>EATING</strong>
            </div>
            <div style="text-align: center;">
                <div style="font-size: 30pt;">&#128564;</div>
                <strong>SLEEPING</strong>
            </div>
            <div style="text-align: center;">
                <div style="font-size: 30pt;">&#127939;</div>
                <strong>RUNNING</strong>
            </div>
            <div style="text-align: center;">
                <div style="font-size: 30pt;">&#129532;</div>
                <strong>WASHING</strong>
            </div>
            <div style="text-align: center;">
                <div style="font-size: 30pt;">&#128214;</div>
                <strong>READING</strong>
            </div>
            <div style="text-align: center;">
                <div style="font-size: 30pt;">&#127926;</div>
                <strong>SINGING</strong>
            </div>
        </div>
        <div class="footer">
            <span>Ahmed Receptive / Expressive Language</span>
            <span>Page 8</span>
        </div>
    </div>

    <!-- PÁGINA 10: LANGUAGE SKILLS 2 -->
    <div class="page">
        <div class="header">
            <h1>Language Skills 2</h1>
            <p>Answer the questions below.</p>
        </div>
        <div class="content" style="width: 100%; text-align: left; align-items: flex-start;">
            <div style="margin: 20px 0; font-size: 14pt; width: 100%;">
                <p><strong>1. What do you like to play?</strong></p>
                <div style="border: 1px solid #CCC; padding: 10px; border-radius: 5px; width: 80%;">BALL / TOYS</div>
            </div>
            <div style="margin: 20px 0; font-size: 14pt; width: 100%;">
                <p><strong>2. What do you like to eat?</strong></p>
                <div style="border: 1px solid #CCC; padding: 10px; border-radius: 5px; width: 80%;">APPLE / PIZZA</div>
            </div>
            <div style="margin: 20px 0; font-size: 14pt; width: 100%;">
                <p><strong>3. How do you feel today?</strong></p>
                <div style="border: 1px solid #CCC; padding: 10px; border-radius: 5px; width: 80%;">HAPPY / SLEEPY</div>
            </div>
        </div>
        <div class="footer">
            <span>Ahmed Receptive / Expressive Language</span>
            <span>Page 9</span>
        </div>
    </div>

</body>
</html>