:root{
      --bg:#0f172a;      /* slate-900 */
      --panel:#4e68a1;   /* gray-900 */
      --muted:#94a3b8;   /* slate-400 */
      --text:#e5e7eb;    /* gray-200 */
      --accent:#06b6d4;  /* cyan-500 */
      --accent-2:#076661;/* amber-500 */
      --ok:#0ea1b4;      /* green-500 */
      --danger:#054b3c;  /* red-500 */
      --border:#1f2937;  /* gray-800 */
    }

    @font-face {
        font-family: "vissto";
        src: url(assets/ChettaVissto.ttf) format("truetype");
    }
    *{
        box-sizing:border-box
    }

    html,body{
        height:100%
    }

    body{
        margin:0;
        background:linear-gradient(180deg,var(--bg),#0b1225);
        color:var(--text);
        font:14px/1.5 system-ui,-apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial
    }
    
    h2,h3{
        margin:0 0 .5rem;
        font-family: "vissto", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
    }

    h1{
        font-size:clamp(1.2rem,2.5vw,1.8rem);
        font-family: "vissto", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
        display: flex;
        text-align: center;
        justify-content: center;
        flex-direction: column;
        align-items: center ;
    }

    h2{
        font-size:1rem;
        color:var(--muted);
        font-weight:600;
    }

    label{
        display:block;
        font-weight:600;
        margin:0 0 .25rem;
    }

    input,select,textarea{
        width:100%;
        padding:.65rem .75rem;
        background:#06113870;
        border:1px solid var(--border);
        border-radius:.6rem;
        color:var(--text);
    }

    input[type=number]{
        text-align:right;
    }

    input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{
        appearance:none;
        margin:0;
    }

    textarea{
        min-height:80px;
        resize:vertical;
    }

    .app{
        max-width:1100px;
        margin:0 auto;
        padding:24px;
    }

    .toolbar{
        display:flex;
        gap:12px;
        flex-wrap:wrap;
        align-items:center;
        align-items: center;
        justify-content: center;
        flex-direction: row;        
    }

    .card{
        background: var(--panel);
        border:1px solid var(--border);
        border-radius:16px;
        padding:16px;
    }

    .card-res{
        background: var(--panel);
        border:1px solid var(--border);
        border-radius:16px;
        padding:16px;
    }

    .card-res h2{
        display:flex;
        justify-content:center; 
        font-size:1.2rem;
        margin-bottom:16px;
        font-family: "vissto", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
    }

    .grid{
        display:grid;
        gap:12px;
    }

    .grid.cols-2{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .grid.cols-3{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .grid.cols-4{
        grid-template-columns:repeat(4,minmax(0,1fr));
    }

    .btn{
        cursor:pointer;
        border:1px solid var(--border);
        background:#202f5f;
        color:var(--text);
        padding:.65rem .9rem;
        border-radius:.6rem;
        font-weight:600;
    }

    .btn:hover{
        background:#0c1326;
    }

    .btn.primary{
        background:linear-gradient(180deg,#033b49,#0ea5b7);
        border-color:#0e7490;
    }

    .btn.primary:hover{
        filter:brightness(1.05);
    }

    .btn.warn{
        background:linear-gradient(180deg,#034f55,#03262b);
        border-color:#03262b;
    }

    .btn.ok{
        background:linear-gradient(180deg,#078177,#025049);
        border-color:#025049;
    }

    .btn.ghost{
        background:linear-gradient(180deg,#4e8b86,#3b5a57);
        border-color:#244744;
    }

    .chip{
        display:inline-flex;
        align-items:center;
        gap:8px;
        padding:.35rem .6rem;
        background:#101c4271;
        border:1px solid var(--border);
        border-radius:999px;
        font-size:.85rem;
        color:var(--muted);
    }

    .week{
        border:1px dashed #263248;
        border-radius:14px;
        padding:12px;
    }

    .week > .head{
        display:flex;
        justify-content:space-between;
        align-items:center;
        margin-bottom:8px;
    }

    .week-actions{
        display:flex;
        gap:8px;
    }

    .lesson{
        border:1px solid var(--border);
        border-radius:12px;
        padding:12px;
        background:#0b1020;
    }

    .lesson h3{
        font-size:.95rem;
        color:#cbd5e1;
    }
    
    .split{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:12px;
    }

    .muted{
        color:var(--muted);
    }

    .sr-only{
        position:absolute;
        width:1px;
        height:1px;
        padding:0;
        margin:-1px;
        overflow:hidden;
        clip:rect(0,0,0,0);
        white-space:nowrap;
        border:0;
    }

    /* Print styles */
    @media print{
      body{
        background:white;
        color:black;
    }
      .card, .week, .lesson{
        background:white;
        border-color:#ccc;
    }
      .toolbar, .no-print{
        display:none !important;
    }
      .app{
        max-width:unset;
        padding:0;
    }
      .page{
        page-break-inside:avoid;
        break-inside:avoid;
    }
      .week{
        margin-bottom:12px;
    }
      textarea,input,select{
        border:1px solid #bbb;
    }
    }

    /* Estilos para expandir/recolher aulas */
    .lesson.collapsed {
        padding: 8px 12px;
    }

    .lesson.collapsed h3::after {
        content: ' (recolhida)';
        font-size: 0.8em;
        color: #64748b;
        font-weight: normal;
    }

    .lesson h3 {
        cursor: pointer !important;
        user-select: none;
        transition: color 0.2s ease;
    }

    .lesson h3:hover {
        color: #3b82f6;
    }

    .lesson h3::before {
        content: '▼ ';
        font-size: 0.8em;
        color: #64748b;
        transition: transform 0.2s ease;
    }

    .lesson.collapsed h3::before {
        content: '▶ ';
        transform: rotate(0deg);
    }

    /* Estilos para os textareas das aulas */
    .lesson textarea {
        resize: vertical;
        min-height: 60px;
    }

    .lesson .objetivos {
        width: 100%;
        min-height: 80px;
    }

    /* Estilo especial para conteúdo da aula quando recolhida */
    .lesson.collapsed .conteudoAula {
        width: 100%;
        font-weight: 500;
        background: rgba(59, 130, 246, 0.05);
        border: 1px solid rgba(59, 130, 246, 0.2);
    }

    /* RESPONSIVIDADE TOTAL - MOBILE FIRST */
    
    /* Extra Small devices (portrait phones, menos de 576px) */
    @media (max-width: 575.98px) {
        .app {
            max-width: 100%;
            padding: 12px 8px;
            margin: 0;
        }

        /* Toolbar responsivo */
        .toolbar {
            flex-direction: column;
            gap: 8px;
            padding: 0;
        }

        .toolbar .btn {
            width: 100%;
            text-align: center;
            padding: 12px 16px;
            font-size: 1rem;
        }

        /* Grid responsivo - sempre 1 coluna em mobile */
        .grid.cols-2,
        .grid.cols-3,
        .grid.cols-4 {
            grid-template-columns: 1fr !important;
            display: grid !important;
        }

        /* Cards responsivos */
        .card,
        .card-res {
            padding: 12px;
            border-radius: 12px;
            margin-bottom: 12px;
        }

        /* Semanas responsivas */
        .week {
            padding: 8px;
            margin-bottom: 16px;
        }

        .week > .head {
            flex-direction: column;
            gap: 8px;
            align-items: stretch;
        }

        .week-actions {
            flex-direction: column;
            gap: 6px;
        }

        .week-actions .btn {
            width: 100%;
        }

        /* Aulas responsivas */
        .lesson {
            padding: 8px;
            margin-bottom: 12px;
        }

        .lesson h3 {
            font-size: 0.9rem;
            line-height: 1.4;
        }

        /* Formulários responsivos */
        input,
        select,
        textarea {
            padding: 12px 10px;
            font-size: 16px; /* Evita zoom no iOS */
            border-radius: 8px;
        }

        textarea {
            min-height: 60px;
        }

        /* Split layout vira coluna única */
        .split {
            grid-template-columns: 1fr;
        }

        /* Títulos menores */
        h1 {
            font-size: 1.5rem;
            line-height: 1.2;
            margin-bottom: 16px;
        }

        h2 {
            font-size: 1.2rem;
            line-height: 1.3;
        }

        h3 {
            font-size: 1rem;
        }

        /* Chips menores */
        .chip {
            font-size: 0.75rem;
            padding: 0.25rem 0.5rem;
        }
    }

    /* Small devices (landscape phones, 576px and up) */
    @media (min-width: 576px) and (max-width: 767.98px) {
        .app {
            max-width: 540px;
            padding: 16px;
        }

        .toolbar {
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
        }

        .toolbar .btn {
            flex: 0 1 calc(50% - 6px);
            min-width: 120px;
        }

        /* Grid - máximo 2 colunas */
        .grid.cols-3,
        .grid.cols-4 {
            grid-template-columns: repeat(2, 1fr) !important;
            display: grid !important;
        }

        .week > .head {
            flex-direction: row;
            justify-content: space-between;
        }

        .week-actions {
            flex-direction: row;
        }
    }

    /* Medium devices (tablets, 768px and up) */
    @media (min-width: 768px) and (max-width: 991.98px) {
        .app {
            max-width: 720px;
            padding: 20px;
        }

        .toolbar .btn {
            flex: 0 1 auto;
            min-width: 140px;
        }

        /* Grid - máximo 3 colunas */
        .grid.cols-4 {
            grid-template-columns: repeat(3, 1fr) !important;
            display: grid !important;
        }

        /* Formulários com melhor espaçamento */
        input,
        select,
        textarea {
            padding: 10px 12px;
        }
    }

    /* Large devices (desktops, 992px and up) */
    @media (min-width: 992px) and (max-width: 1199.98px) {
        .app {
            max-width: 960px;
            padding: 24px;
        }

        /* Mantém layouts originais mas com melhor espaçamento */
        .grid.cols-4 {
            display: grid !important;
            grid-template-columns: repeat(4, 1fr) !important;
        }
    }

    /* Extra large devices (large desktops, 1200px and up) */
    @media (min-width: 1200px) {
        .app {
            max-width: 1140px;
        }

        /* Layout otimizado para telas grandes */
        .toolbar {
            justify-content: flex-start;
        }

        .card,
        .card-res {
            padding: 20px;
        }

        .week {
            padding: 16px;
        }

        .lesson {
            padding: 16px;
        }
    }

    /* Orientação landscape em mobile */
    @media (max-width: 767.98px) and (orientation: landscape) {
        .toolbar .btn {
            flex: 0 1 calc(25% - 6px);
            min-width: 100px;
            padding: 8px 12px;
            font-size: 0.9rem;
        }

        .grid.cols-2 {
            grid-template-columns: repeat(2, 1fr) !important;
        }

        .app {
            padding: 8px 12px;
        }
    }

    /* Melhorias de touch para dispositivos móveis */
    @media (max-width: 991.98px) {
        /* Aumenta área de toque */
        .btn {
            min-height: 44px;
            padding: 12px 16px;
        }

        .lesson h3 {
            min-height: 44px;
            display: flex;
            align-items: center;
            padding: 8px 0;
        }

        /* Melhora legibilidade */
        body {
            line-height: 1.6;
        }

        /* Otimiza espaçamento */
        .grid {
            gap: 8px;
        }

        .week {
            margin-bottom: 12px;
        }

        .lesson {
            margin-bottom: 8px;
        }
    }

    /* Print responsivo */
    @media print {
        .app {
            max-width: none !important;
            padding: 0 !important;
        }

        .grid.cols-2,
        .grid.cols-3,
        .grid.cols-4 {
            display: grid !important;
        }

        /* Força layouts adequados para impressão */
        .grid.cols-3,
        .grid.cols-4 {
            grid-template-columns: repeat(2, 1fr) !important;
        }
    }

    /* Estados de foco aprimorados para acessibilidade */
    @media (prefers-reduced-motion: no-preference) {
        input:focus,
        select:focus,
        textarea:focus,
        .btn:focus {
            transition: all 0.2s ease;
            outline: 2px solid #3b82f6;
            outline-offset: 2px;
        }
    }

    /* Modo escuro responsivo (se o sistema preferir) */
    @media (prefers-color-scheme: dark) {
        :root {
            --panel: #0f172a99;
            --border: #334155;
        }
    }

    /* Otimizações finais para mobile */
    @media (max-width: 767.98px) {
        /* Previne zoom horizontal indesejado */
        html {
            overflow-x: hidden;
        }

        /* Melhora performance de scroll */
        body {
            -webkit-overflow-scrolling: touch;
        }

        /* Otimiza seleção de texto */
        input, textarea {
            -webkit-appearance: none;
            appearance: none;
            -webkit-border-radius: 8px;
            border-radius: 8px;
        }

        /* Remove outline padrão e adiciona um melhor */
        input:focus,
        select:focus,
        textarea:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        /* Melhora experiência de toque */
        .btn,
        .lesson h3,
        button {
            -webkit-tap-highlight-color: rgba(59, 130, 246, 0.2);
        }
    }

    /* Correção para Safari iOS */
    @supports (-webkit-touch-callout: none) {
        input[type="text"],
        input[type="number"],
        textarea,
        select {
            -webkit-appearance: none;
            appearance: none;
            border-radius: 8px;
        }
    }

    /* Melhoria para dispositivos com hover limitado (touch) */
    @media (hover: none) and (pointer: coarse) {
        .btn:hover {
            background: #202f5f; /* Remove efeito hover em touch */
        }
        
        .btn.primary:hover {
            filter: none; /* Remove efeito hover em touch */
        }
        
        .lesson h3:hover {
            color: inherit; /* Remove efeito hover em touch */
        }
    }