@charset "UTF-8";

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary:       #6C63FF;
    --primary-dark:  #5146D9;
    --primary-light: #EEF0FF;
    --accent:        #764ba2;
    --grad:          linear-gradient(135deg, #6C63FF 0%, #764ba2 100%);

    --text-main:     #1a1a2e;
    --text-muted:    #6b7280;
    --text-hint:     #9ca3af;

    --border:        #e5e7f0;
    --bg-input:      #f8f9ff;
    --bg-white:      #ffffff;

    --radius-sm:  8px;
    --radius-md:  12px;
    --radius-lg:  18px;
    --radius-xl:  28px;

    --shadow-card: 0 24px 60px rgba(108, 99, 255, 0.12), 0 4px 16px rgba(0,0,0,0.06);
    --shadow-btn:  0 8px 24px rgba(108, 99, 255, 0.35);

    --font: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
    --transition: 0.22s ease;

    /* SVG icons como data URI - sem warnings no Eclipse */
    --icon-user:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236C63FF' stroke-width='2'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/Svg%3E");
    --icon-email:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236C63FF' stroke-width='2'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
    --icon-lock:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236C63FF' stroke-width='2'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
    --icon-card:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236C63FF' stroke-width='2'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cline x1='2' y1='10' x2='22' y2='10'/%3E%3C/svg%3E");
    --icon-phone:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236C63FF' stroke-width='2'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.99 12a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.92 1h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 8.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
    --icon-cert:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236C63FF' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='7'/%3E%3Cpolyline points='8.21 13.89 7 23 12 20 17 23 15.79 13.88'/%3E%3C/svg%3E");
    --icon-eye:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    --icon-arrow:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
    --icon-check:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    --icon-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none' stroke='%236C63FF' stroke-width='1.5'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E");

    /* Icons para os cards de tipo */
    --icon-surdo:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpath d='M3 18v-6a9 9 0 0 1 18 0v6'/%3E%3Cpath d='M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z'/%3E%3C/svg%3E");
    --icon-surdo-sel:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%236C63FF' stroke-width='2'%3E%3Cpath d='M3 18v-6a9 9 0 0 1 18 0v6'/%3E%3Cpath d='M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z'/%3E%3C/svg%3E");
    --icon-interp:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
    --icon-interp-sel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%236C63FF' stroke-width='2'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
    --icon-adm:        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.07 4.93a10 10 0 0 1 0 14.14M4.93 4.93a10 10 0 0 0 0 14.14'/%3E%3C/svg%3E");
    --icon-adm-sel:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%236C63FF' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.07 4.93a10 10 0 0 1 0 14.14M4.93 4.93a10 10 0 0 0 0 14.14'/%3E%3C/svg%3E");
    --icon-brand:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}

body {
    font-family: var(--font);
    background: #f0f2ff;
    min-height: 100vh;
    color: var(--text-main);
}

/* ── Layout split ─────────────────────────── */
.page-bg {
    min-height: 100vh;
    display: flex;
}

/* ── Painel esquerdo ──────────────────────── */
.side-panel {
    width: 380px;
    flex-shrink: 0;
    background: var(--grad);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 40px;
}

.side-bg-shape {
    position: absolute;
    bottom: -80px;
    right: -80px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
    pointer-events: none;
}

.side-bg-shape::before {
    content: '';
    position: absolute;
    top: -60px;
    left: -100px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
}

.side-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-icon {
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.2);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    background-image: var(--icon-brand);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px;
}

.brand-name {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.side-text h2 {
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 14px;
}

.side-text p {
    color: rgba(255,255,255,0.72);
    font-size: 15px;
    line-height: 1.65;
}

.side-dots {
    display: flex;
    gap: 8px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    display: inline-block;
    transition: var(--transition);
}

.dot.active {
    width: 24px;
    border-radius: 4px;
    background: #fff;
}

/* ── Painel direito ───────────────────────── */
.form-panel {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 24px 60px;
    background: #f4f5ff;
}

.voltar-link {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 22px;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 32px;
    padding-left: 20px;
    background-image: var(--icon-arrow);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 14px;
    transition: color var(--transition);
}

.voltar-link:hover {
    color: var(--primary);
}

.form-wrapper {
    width: 100%;
    max-width: 520px;
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    padding: 44px 48px;
    animation: fadeUp 0.5s ease-out both;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

.form-header {
    margin-bottom: 32px;
}

.form-header h1 {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 6px;
}

.form-header p {
    color: var(--text-muted);
    font-size: 15px;
}

/* ── Form elements ────────────────────────── */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.55px;
    margin-bottom: 8px;
}

.req {
    color: #e74c3c;
    font-weight: 700;
}

/* ── Input wrap com icone via background ──── */
.input-wrap {
    position: relative;
}

.input-wrap input[type="text"],
.input-wrap input[type="password"],
.input-wrap select {
    width: 100%;
    padding: 13px 14px 13px 42px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 15px;
    font-family: var(--font);
    color: var(--text-main);
    background-color: var(--bg-input);
    background-repeat: no-repeat;
    background-position: 13px center;
    background-size: 17px;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
    appearance: none;
    -webkit-appearance: none;
}

.input-wrap input:focus,
.input-wrap select:focus {
    border-color: var(--primary);
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(108, 99, 255, 0.1);
}

.input-wrap input:hover:not(:focus),
.input-wrap select:hover:not(:focus) {
    border-color: #c5c8e8;
}

/* Icones por campo */
.icon-nome input   { background-image: var(--icon-user); }
.icon-email input  { background-image: var(--icon-email); }
.icon-senha input  { background-image: var(--icon-lock); }
.icon-cpf input    { background-image: var(--icon-card); }
.icon-tel input    { background-image: var(--icon-phone); }
.icon-cert input   { background-image: var(--icon-cert); }

/* Select com seta */
.select-wrap select {
    background-image: var(--icon-select);
    background-position: right 12px center;
    background-size: 18px;
    padding-left: 14px;
    padding-right: 38px;
    cursor: pointer;
}

/* Botao olho senha */
.toggle-senha {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: var(--icon-eye) no-repeat center / 18px;
    border: none;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity var(--transition);
}

.toggle-senha:hover {
    opacity: 1;
}

/* ── Grid linha dupla ─────────────────────── */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* ── Divisor de secao ─────────────────────── */
.section-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-hint);
}

.section-divider::before,
.section-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* ── Cards tipo usuario ───────────────────── */
.tipo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.tipo-card {
    cursor: pointer;
}

.tipo-card input[type="radio"] {
    display: none;
}

.tipo-card-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-input);
    transition: all var(--transition);
    text-align: center;
}

.tipo-icon {
    width: 22px;
    height: 22px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.icon-surdo     { background-image: var(--icon-surdo); }
.icon-interprete { background-image: var(--icon-interp); }
.icon-admin     { background-image: var(--icon-adm); }

.tipo-card-inner span {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    transition: color var(--transition);
}

.tipo-card input:checked + .tipo-card-inner {
    border-color: var(--primary);
    background: var(--primary-light);
    box-shadow: 0 0 0 4px rgba(108, 99, 255, 0.08);
}

.tipo-card input:checked + .tipo-card-inner span {
    color: var(--primary);
}

.tipo-card input:checked + .tipo-card-inner .icon-surdo {
    background-image: var(--icon-surdo-sel);
}

.tipo-card input:checked + .tipo-card-inner .icon-interprete {
    background-image: var(--icon-interp-sel);
}

.tipo-card input:checked + .tipo-card-inner .icon-admin {
    background-image: var(--icon-adm-sel);
}

.tipo-card:hover .tipo-card-inner {
    border-color: #c5c8e8;
    background: #fff;
}

/* ── Campos condicionais ──────────────────── */
.conditional-field {
    animation: fadeUp 0.3s ease-out both;
}

/* ── Botao submit ─────────────────────────── */
.submit-btn {
    width: 100%;
    padding: 15px 15px 15px 40px;
    background: var(--grad);
    background-image: var(--grad), var(--icon-check);
    background-repeat: no-repeat, no-repeat;
    background-position: 0 0, 30px center;
    background-size: 100% 100%, 16px;
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 700;
    font-family: var(--font);
    cursor: pointer;
    letter-spacing: 0.3px;
    text-align: center;
    margin-top: 8px;
    transition: opacity var(--transition), transform var(--transition), box-shadow var(--transition);
    box-shadow: var(--shadow-btn);
}

.submit-btn:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(108, 99, 255, 0.4);
}

.submit-btn:active {
    transform: translateY(0);
    opacity: 1;
}

/* ── Link login ───────────────────────────── */
.login-link {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    color: var(--text-muted);
}

.login-link a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

.login-link a:hover {
    text-decoration: underline;
}

/* ── Responsividade ───────────────────────── */
@media (max-width: 860px) {
    .side-panel {
        display: none;
    }
    .form-panel {
        padding: 32px 16px 48px;
    }
    .form-wrapper {
        padding: 36px 28px;
        border-radius: var(--radius-lg);
    }
}

@media (max-width: 480px) {
    .form-row {
        grid-template-columns: 1fr;
    }
    .tipo-grid {
        grid-template-columns: 1fr;
    }
    .form-wrapper {
        padding: 28px 20px;
    }
}