:root{
    --blue-950:#020b1a;
    --blue-900:#031633;
    --blue-850:#061f43;
    --blue-800:#082b5b;
    --blue-700:#0b3d7a;
    --gold:#d7a333;
    --gold-2:#f3c763;
    --gold-3:#9b6b18;
    --text:#06122b;
    --muted:#51627a;
    --line:#d8e0ee;
    --bg:#f3f6fb;
    --danger:#b42318;
    --success:#087443;
    --radius:18px;
    --shadow:0 18px 45px rgba(14,30,55,.16);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:linear-gradient(135deg,#f6f8fc,#e9eef7)}
a{color:#063c7d;text-decoration:none}a:hover{text-decoration:underline}
img{max-width:100%}
.page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:28px}.page-card{align-items:flex-start;padding-top:18px}
.panel{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:32px;width:100%;max-width:680px}.panel.login{max-width:460px}.panel h1{margin:0 0 18px;font-size:30px;line-height:1.15;color:#020a22}.panel p{color:var(--muted);line-height:1.45}.logo-text{text-align:center;letter-spacing:10px;color:var(--gold);font-weight:900;font-size:30px;margin-bottom:2px}.subtitle{text-align:center;font-size:34px;font-weight:900;line-height:1.08;margin:0 0 22px;color:#030b25}.login-help{text-align:center;color:#60708a;margin-bottom:24px;line-height:1.45}
.field{margin:0 0 14px}.field label{display:block;font-weight:800;margin-bottom:7px}.field input,.field select,.field textarea{width:100%;border:1px solid #cbd6e8;border-radius:12px;padding:13px 14px;font-size:16px;background:#fff;outline:none}.field textarea{min-height:100px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{border-color:#0b4d99;box-shadow:0 0 0 3px rgba(11,77,153,.12)}
.btn,button.btn{display:inline-flex;align-items:center;justify-content:center;border:0;background:#07356f;color:#fff;border-radius:12px;padding:13px 20px;font-weight:900;font-size:15px;cursor:pointer;box-shadow:0 8px 16px rgba(7,53,111,.16)}.btn:hover{background:#052a58;text-decoration:none}.btn.secondary{background:#fff;color:#07356f;border:1px solid #b9c8dd;box-shadow:none}.btn.danger{background:#b42318}.btn.small{padding:8px 12px;border-radius:9px;font-size:13px}.actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:18px}.btn.gold{background:linear-gradient(135deg,#bf8425,#f0c45c);color:#08152c}.btn.light{background:#fff;color:#07356f;border:1px solid #c9d5e8;box-shadow:none}
.alert{border-radius:11px;padding:12px 14px;margin:12px 0;line-height:1.35}.alert.error{background:#fff0ef;color:#b42318}.alert.ok{background:#eafaf1;color:#087443}.notice-text{font-size:13px;color:#536781;line-height:1.4;margin-top:16px}
.topbar{width:min(1120px,96vw);display:flex;align-items:center;justify-content:space-between;margin:0 auto 10px;padding-top:10px}.topbar strong{font-weight:900;color:#fff;background:#061f43;border-radius:12px;padding:10px 15px;letter-spacing:1px}.topbar .brand{font-weight:900;color:#fff;background:#061f43;border-radius:12px;padding:10px 15px;letter-spacing:1px}.topbar a{font-weight:800}.content{width:min(1120px,96vw);margin:0 auto;padding:24px 0}

/* ===== Carteirinha Kadima ID - layout corrigido ===== */
.card-wrap{width:100%;display:flex;flex-direction:column;align-items:center;gap:18px;margin:0 auto}.student-card{position:relative;width:min(96vw,1120px);max-width: 1099px;aspect-ratio:1.586/1;background:radial-gradient(circle at 24% 17%,rgba(14,68,132,.98) 0%,rgba(5,35,78,.98) 38%,#020d24 100%);border:1px solid rgba(255,255,255,.36);border-radius:28px;overflow:hidden;box-shadow:0 22px 48px rgba(0,0,0,.34),inset 0 0 0 1px rgba(255,255,255,.08);color:#fff;padding:0;isolation:isolate}.student-card:before{content:"";position:absolute;inset:0;background: linear-gradient(118deg,rgba(255,255,255,.07),transparent 30%,transparent 72%,rgba(255,255,255,.05)),radial-gradient(circle at 61% 20%,rgba(255,210,90,.34),transparent 3.2%),repeating-linear-gradient(135deg,rgba(255,255,255,.022) 0 1px,transparent 1px 11px);z-index:0}.student-card:after{content:"";position:absolute;right:-8%;top:35%;width:46%;height:46%;border-top:2px solid rgba(215,163,51,.72);border-bottom:1px solid rgba(215,163,51,.30);transform:rotate(-43deg);z-index:1;opacity:.9}.student-card .flag,.student-card .brand-logo,.student-card .divider,.student-card .title,.student-card .course,.student-card .ead,.student-card .photo,.student-card .info,.student-card .qr,.student-card .notice{z-index:2}.ck,.kadima,.card-logo{display:none!important}
.brand-logo{position:absolute;left:4.0%;top:5.0%;width:22.5%;height:25.5%;object-fit:contain;object-position:center;filter:drop-shadow(0 8px 9px rgba(0,0,0,.46));display:block}.divider{position:absolute;left:30%;top:6.5%;height:26%;width:1px;background:linear-gradient(to bottom,transparent,var(--gold),transparent)}.flag{position:absolute;right:3.4%;top:5.1%;width:8.8%;border:2px solid var(--gold);border-radius:8px;box-shadow:0 5px 10px rgba(0,0,0,.32)}
.title{position:absolute;left:33.5%;top:8.0%;right:14%;font-size:clamp(24px,3.15vw,46px);line-height:1;letter-spacing:.6px;font-weight:900;white-space:nowrap;overflow:hidden;text-shadow:0 2px 8px rgba(0,0,0,.38)}.title:after{content:"";display:block;margin-top:2.1%;width:82%;height:1px;background:linear-gradient(to right,var(--gold),rgba(255,255,255,.18),transparent)}.course{position:absolute;left:33.5%;top:21.3%;right:10%;font-size:clamp(18px,2.35vw,35px);line-height:1;font-weight:900;color:var(--gold-2);letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-shadow:0 2px 7px rgba(0,0,0,.35)}.ead{position:absolute;left:33.6%;top:29.0%;font-size:clamp(12px,1.55vw,24px);line-height:1;letter-spacing:2px;white-space:nowrap;color:#f7f9ff}
.photo{position:absolute;left:4.1%;top:34.0%;width:25.6%;height:50%;background:linear-gradient(145deg,#ffffff,#edf1f7);border:3px solid var(--gold);border-radius:20px;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#516070;text-align:center;padding:12px;font-weight:900;font-size:clamp(11px,1.22vw,18px);line-height:1.25;box-shadow:0 10px 18px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.68)}.photo img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}.photo-missing{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;height:100%;width:100%;padding:8px}.photo-missing strong{color:#14213b;font-size:clamp(13px,1.3vw,18px)}.photo-missing span{color:#5a6472;font-size:clamp(10px,1vw,14px)}
.info{position:absolute;left:33.5%;top:38%;width:43.5%}.row{display:grid;grid-template-columns:31% 69%;align-items:center;border-bottom:1px solid rgba(215,163,51,.58);padding:clamp(6px,.85vw,12px) 0;min-height:clamp(38px,4.7vw,62px)}.label{color:var(--gold-2);font-weight:900;font-size:clamp(11px,1.22vw,19px);line-height:1.05;text-transform:uppercase}.value{font-size:clamp(16px,1.95vw,31px);font-weight:900;text-shadow:0 2px 4px rgba(0,0,0,.34);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;color:#fff}.row:first-child .value{font-size:clamp(15px,1.72vw,27px)}
.qr{position:absolute;right:4.0%;bottom:10.0%;width:18%;aspect-ratio:1/1;background:#fff;border:3px solid var(--gold);border-radius:18px;padding:10px;box-shadow:0 12px 22px rgba(0,0,0,.32)}.qr img{width:100%;height:100%;object-fit:contain;display:block}.notice{position:absolute;left:6.0%;right:29%;bottom:3.2%;font-size:clamp(8px,.76vw,12px);line-height:1.22;color:#fff;opacity:.96}.notice:before{content:"!";display:inline-flex;align-items:center;justify-content:center;width:clamp(22px,2.7vw,33px);height:clamp(22px,2.7vw,33px);border:2px solid var(--gold);border-radius:50%;color:var(--gold-2);font-weight:900;margin-right:10px;float:left;font-size:clamp(14px,1.5vw,22px)}

/* Kadima VIP */
.vip-hero{background:linear-gradient(135deg,#061f43,#020b1a);color:#fff;border-radius:22px;padding:28px;box-shadow:var(--shadow);margin-bottom:22px;position:relative;overflow:hidden}.vip-hero:after{content:"";position:absolute;right:-10%;top:20%;width:45%;border-top:1px solid var(--gold);transform:rotate(-38deg)}.vip-hero h1{margin:0 0 5px;font-size:38px}.vip-hero strong{color:var(--gold-2)}.vip-hero p{color:#eef4ff;max-width:760px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}.partner-card{background:#fff;border-radius:18px;box-shadow:var(--shadow);overflow:hidden;border:1px solid #e4ebf5}.partner-card .thumb{aspect-ratio:1/1;background:#e9eef7;display:flex;align-items:center;justify-content:center}.partner-card .thumb img{width:100%;height:100%;object-fit:cover}.partner-card .body{padding:16px}.partner-card h3{margin:0 0 5px}.badge{display:inline-flex;background:#fff6dd;color:#8a5c00;border:1px solid #f2d28a;border-radius:999px;padding:5px 10px;font-weight:900;font-size:13px;margin:6px 0}.muted{color:var(--muted)}
/* Admin */
.admin-layout{display:grid;grid-template-columns:250px 1fr;min-height:100vh}.sidebar{background:#061f43;color:#fff;padding:22px;position:sticky;top:0;height:100vh}.sidebar h2{margin:0 0 22px;color:var(--gold-2)}.sidebar nav a{display:block;color:#fff;padding:11px 12px;border-radius:10px;margin-bottom:6px;font-weight:800}.sidebar nav a:hover,.sidebar nav a.active{background:rgba(255,255,255,.12);text-decoration:none}.admin-main{padding:26px}.admin-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}.admin-header h1{margin:0}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:18px}.stat{background:#fff;border-radius:16px;padding:18px;box-shadow:var(--shadow)}.stat strong{display:block;font-size:28px;color:#061f43}.table-wrap{background:#fff;border-radius:16px;box-shadow:var(--shadow);overflow:auto}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:13px 14px;border-bottom:1px solid #edf1f7;text-align:left;vertical-align:middle}.table th{background:#f7f9fc;font-size:13px;text-transform:uppercase;color:#536781}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.form-grid .full{grid-column:1/-1}
@media(max-width:900px){
    .admin-layout{grid-template-columns:1fr}
    .sidebar{position:relative;height:auto}
    .admin-main{padding:18px}
    .form-grid{grid-template-columns:1fr}
    .panel{padding:22px}
    .actions{justify-content:center}
    .logo-text{font-size:26px}
    .subtitle{font-size:30px}

    .student-card{
        width:min(98vw,720px);
        border-radius:20px;
        aspect-ratio:1.42/1;
    }
    .brand-logo{left:3.9%;top:5.4%;width:24%;height:26%}
    .divider{left:30.6%;top:6%;height:27%}
    .flag{right:3.2%;top:5.2%;width:9.5%;border-radius:6px}
    .title{left:33%;top:8.4%;right:5%;font-size:clamp(18px,4.4vw,32px);letter-spacing:.2px}
    .title:after{width:76%;margin-top:2.2%}
    .course{left:33%;top:20.4%;right:3%;font-size:clamp(13px,3.5vw,25px);letter-spacing:0}
    .ead{left:33%;top:27.3%;font-size:clamp(10px,2.45vw,18px);letter-spacing:1.1px}

    .photo{left:4.0%;top:34%;width:26.5%;height:47%;border-radius:15px;padding:7px}
    .photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
    .info{left:34.0%;top:35.2%;width:44.5%}
    .row{grid-template-columns:31% 69%;min-height:clamp(30px,6.2vw,48px);padding:3px 0}
    .label{font-size:clamp(8px,2.0vw,14px)}
    .value{font-size:clamp(11px,2.9vw,20px)}
    .row:first-child .value{font-size:clamp(10.5px,2.55vw,18px)}
    .qr{right:3.6%;bottom:13%;width:18.8%;padding:6px;border-radius:12px}
    .notice{left:5.5%;right:4.5%;bottom:2.8%;font-size:clamp(5.8px,1.22vw,9px);line-height:1.15;opacity:.95}
    .notice:before{width:clamp(16px,4vw,26px);height:clamp(16px,4vw,26px);font-size:clamp(10px,2.7vw,17px);margin-right:6px}
}

@media(max-width:560px){
    .page{padding:12px 6px 24px;align-items:flex-start;justify-content:flex-start;min-height:auto}
    .page-card{padding-top:8px}
    .topbar{width:98vw;margin:0 auto 8px;padding-top:8px}
    .topbar strong,.topbar .brand{padding:10px 14px;border-radius:10px;font-size:16px}
    .content{width:98vw;padding:12px 0}
    .student-card{
        width:98vw;
        aspect-ratio:1.26/1;
        border-radius:16px;
    }
    .student-card:after{right:-14%;top:35%;width:58%}
    .brand-logo{left:3.6%;top:5.0%;width:25.5%;height:27%}
    .divider{left:31%;top:6.2%;height:26%}
    .flag{right:3.4%;top:5.0%;width:10%;border-width:1.5px;border-radius:5px}

    .title{
        left:34%;top:7.5%;right:3%;
        font-size:clamp(16px,4.8vw,19px);
        line-height:1.05;letter-spacing:0;
        white-space:nowrap;overflow:visible;text-overflow:clip;
    }
    .title:after{display:block;width:68%;margin-top:3px}
    .course{
        left:34%;top:17.4%;right:2%;
        font-size:clamp(12px,3.65vw,15px);
        line-height:1;white-space:nowrap;overflow:visible;text-overflow:clip;
    }
    .ead{
        left:34%;top:23.7%;
        font-size:clamp(9.8px,2.85vw,12px);
        letter-spacing:.8px;
    }

    .photo{
        left:4.0%;top:32.2%;width:28%;height:48%;
        border-width:2px;border-radius:13px;padding:5px;
    }
    .photo img{object-fit:cover;object-position:center top}

    .info{left:34%;top:34%;width:62%}
    .row{grid-template-columns:27% 73%;min-height:30px;padding:2px 0;border-bottom-color:rgba(215,163,51,.52)}
    .label{font-size:8.2px;line-height:1.02;letter-spacing:0}
    .value{font-size:12.2px;line-height:1.05;white-space:nowrap;overflow:visible;text-overflow:clip}
    .row:first-child .value{font-size:11.2px;letter-spacing:-.25px;max-width:100%;overflow:visible;text-overflow:clip}

    /* Deixa espaço livre para o QR no canto inferior direito */
    .row:nth-child(3),.row:nth-child(4),.row:nth-child(5){width:72%}
    .row:nth-child(4) .label{font-size:7.5px}

    .qr{right:3.5%;bottom:15.0%;width:20.5%;padding:4px;border-width:2px;border-radius:10px}

    .notice{
        left:4%;right:4%;bottom:2.2%;
        font-size:5.7px;line-height:1.12;
        max-height:24px;overflow:hidden;
    }
    .notice:before{width:17px;height:17px;font-size:12px;margin-right:5px;border-width:1.4px}

    .actions{gap:12px;margin-top:20px;flex-direction:column;align-items:center}
    .actions .btn{width:min(270px,78vw);font-size:16px;padding:14px 18px;border-radius:12px}
}


/* ===== Ajuste final mobile: mais altura, título completo, nome sem vazar e aviso fora do cartão ===== */
.mobile-cie-notice{display:none}

@media(max-width:560px){
    .student-card{
        width:98vw;
        aspect-ratio:1.08/1; /* aumenta a altura no mobile */
        min-height:345px;
        border-radius:16px;
    }

    .brand-logo{
        left:3.4%;
        top:5.2%;
        width:26.5%;
        height:25.5%;
    }

    .divider{
        left:31.5%;
        top:6%;
        height:24%;
    }

    .flag{
        right: 3.4%;
        top:5.2%;
        width:8.5%;
    }

    .title{
        left:34%;
        top:7.2%;
        right:13%;
        font-size:clamp(15px,4.45vw,18px);
        line-height:1.02;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:clip;
        letter-spacing:-.2px;
    }

    .title:after{
        width:100%;
        margin-top:4px;
    }

    .course{
        left:34%;
        top:17.2%;
        right:3%;
        font-size:clamp(11px,3.25vw,14px);
        letter-spacing:-.15px;
        overflow:hidden;
        text-overflow:clip;
    }

    .ead{
        left:34%;
        top:23.1%;
        font-size:clamp(8.8px,2.55vw,11px);
        letter-spacing:.65px;
    }

    .photo{
        left:3.7%;
        top:31.5%;
        width:29.5%;
        height:52.0%;
        padding:0;
        border-width:2px;
        border-radius:13px;
    }

    .photo img{
        width:100%;
        height:100%;
        object-fit:cover;
        object-position:center center;
    }

    .info{
        left:35.0%;
        top:34.0%;
        width:61%;
    }

    .row{
        grid-template-columns:25% 75%;
        min-height:32px;
        padding:2px 0;
    }

    .label{
        font-size:7.6px;
        line-height:1.02;
    }

    .value{
        font-size:12.3px;
        line-height:1.05;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        max-width:100%;
    }

    .row:first-child .value{
        font-size:10.8px;
        letter-spacing:-.35px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    /* QR preservado, sem roubar tanto espaço dos dados */
    .qr{
        right:3.4%;
        bottom:16.5%;
        width:18.2%;
        padding:3px;
        border-width:2px;
        border-radius:9px;
    }

    /* CPF, nascimento e validade param antes do QR */
    .row:nth-child(3),
    .row:nth-child(4),
    .row:nth-child(5){
        width:72%;
    }

    .row:nth-child(4) .label{
        font-size:6.7px;
    }

    /* Retira o aviso de dentro da carteirinha no mobile */
    .student-card .notice{
        display:none;
    }

    .mobile-cie-notice{
        display:block;
        width:96vw;
        max-width:720px;
        margin:-6px auto 8px;
        padding:10px 12px;
        border-radius:12px;
        background:#fff;
        border:1px solid #d7e0ef;
        color:#41546f;
        font-size:11.5px;
        line-height:1.35;
        box-shadow:0 8px 18px rgba(14,30,55,.08);
    }

    .actions{
        margin-top:18px;
    }
}

/* ===== Polimento mobile 2: foto 3x4, dados alinhados e nome mais largo ===== */
@media(max-width:560px){
    .student-card{
        width: 100vw;
        aspect-ratio: 0/0;
        min-height: 300px;
    }

    .brand-logo{
        left: 4.4%;
        top: 5.2%;
        width: 26.5%;
        height: 30.5%;
    }

    .title{
        left:34%;
        top:7.1%;
        right:12.5%;
        font-size: clamp(14px,4.35vw,17px);
        line-height:1.02;
        letter-spacing:-.25px;
    }

    .course{
        left: 34%;
        top: 15.1%;
        right:2.5%;
        font-size:clamp(10.8px,3.22vw,13.8px);
        letter-spacing:-.2px;
    }

    .ead{
        left:34%;
        top: 21%;
        font-size:clamp(8.6px,2.5vw,10.8px);
        letter-spacing:.55px;
    }

    /* quadro mais fiel ao 3x4 e um pouco mais afastado da logo */
    .photo{
        left: 3.2%;
        top: 38.8%;
        width: 27.2%;
        height: 52.6%;
        padding:2px;
        border-width: 2px;
        border-radius:13px;
        background:#fff;
    }

    .photo img{
        width:100%;
        height:100%;
        object-fit:cover;
        object-position:center center;
        border-radius:9px;
    }

    .photo-missing{
        font-size:7.5px;
        line-height:1.15;
    }

    /* dados começam um pouco mais à esquerda e ganham largura */
    .info{
        left: 34%;
        top: 38%;
        width: 60%;
    }

    .row{
        grid-template-columns:24% 76%;
        min-height:31px;
        padding:2px 0;
    }

    .label{
        font-size:7.5px;
        line-height:1.02;
        letter-spacing:-.05px;
    }

    .value{
        font-size:12.0px;
        line-height:1.08;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        max-width:100%;
        min-width:0;
    }

    /* nome: começa mais à esquerda e aproveita melhor a linha */
    .row:first-child{
        grid-template-columns:20% 80%;
    }

    .row:first-child .value{
        font-size:10.3px;
        letter-spacing:-.45px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        max-width:100%;
    }

    /* linhas próximas ao QR: impedem que data e validade subam/entrem no título do campo */
    .row:nth-child(3),
    .row:nth-child(4),
    .row:nth-child(5){
        width:73%;
    }

    .row:nth-child(4),
    .row:nth-child(5){
        grid-template-columns:40% 60%;
        min-height:32px;
    }

    .row:nth-child(4) .label{
        font-size:6.9px;
        line-height:1.02;
    }

    .row:nth-child(4) .value,
    .row:nth-child(5) .value{
        font-size:11.8px;
        text-align:left;
    }

    .qr{
        right: 5.4%;
        bottom: 10%;
        width: 23.2%;
        padding: 3px;
        border-width:2px;
        border-radius: 5px;
    }

    .mobile-cie-notice{
        margin:8px auto 8px;
    }
}
