*,::after,::before{box-sizing:border-box;margin:0;padding:0}:root{--purple-400:#a78bfa;--purple-500:#8b5cf6;--purple-800:#5b21b6;--purple-900:#4c1d95;--pink-400:#f472b6;--pink-500:#ec4899;--gray-200:#e5e7eb;--gray-300:#d1d5db;--gray-400:#9ca3af;--gray-500:#6b7280;--gray-700:#374151;--gray-800:#1f2937;--black-10:rgba(0, 0, 0, 0.1);--black-20:rgba(0, 0, 0, 0.2);--black-30:rgba(0, 0, 0, 0.3);--white-10:rgba(255, 255, 255, 0.1);--white-20:rgba(255, 255, 255, 0.2);--green-400:#4ade80;--green-500:#22c55e;--yellow-400:#facc15;--yellow-500:#eab308;--orange-400:#fb923c;--orange-500:#f97316;--red-400:#f87171;--red-500:#ef4444}html{scroll-behavior:smooth}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;line-height:1.5;color:#fff;background:linear-gradient(to bottom right,var(--purple-900),var(--purple-800),var(--pink-500));min-height:100vh;display:flex;flex-direction:column;padding-top: 0}a{color:inherit;text-decoration:none}ul{list-style-position:inside}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 1rem;}
.flex{display:flex;}
.flex-col{flex-direction:column;}
.view-toggle {
    margin-top: 1.5rem;
    margin-bottom: 2rem;
    gap: 16px;
}
.view-btn.active, .view-btn:focus {
    background: #fff;
    color: #1a0dab;
    border: 1.5px solid #1a0dab;
    box-shadow: 0 2px 8px 0 rgba(36,52,71,0.08);
}
.view-btn {
    background: linear-gradient(to right,var(--purple-500),var(--pink-500));
    color: #fff;
    border: none;
    outline: none;
    transition: all .2s;
}

.items-center{align-items:center;}
.justify-center{justify-content:center;}
.justify-between{justify-content:space-between;}
.gap-1{gap:.25rem;}
.gap-2{gap:.5rem;}
.gap-4{gap:1rem;}
.gap-6{gap:1.5rem;}
.gap-8{gap:2rem;}
.space-x-2>*+*{margin-left:.5rem;}
.space-x-4>*+*{margin-left:1rem;}
.space-x-6>*+*{margin-left:1.5rem;}
.space-y-2>*+*{margin-top:.5rem;}
.space-y-4>*+*{margin-top:1rem;}
.space-y-6>*+*{margin-top:1.5rem;}
.space-y-12>*+*{margin-top:3rem;}
.grid{display:grid;}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr));}
.w-full{width:100%;}
.max-w-xs{max-width:20rem;}
.max-w-2xl{max-width:42rem;}
.max-w-3xl{max-width:48rem;}
.max-w-4xl{max-width:56rem;}
.mx-auto{margin-left:auto;margin-right:auto;}
.mt-2{margin-top:.5rem;}
.mt-8{margin-top:2rem;}
.mb-2{margin-bottom:.5rem;}
.py-2{padding-top:.5rem;padding-bottom:.5rem;}
.py-4{padding-top:1rem;padding-bottom:1rem;}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem;}
.py-8{padding-top:2rem;padding-bottom:2rem;}
.px-2{padding-left:.5rem;padding-right:.5rem;}
.px-3{padding-left:.75rem;padding-right:.75rem;}
.px-4{padding-left:1rem;padding-right:1rem;}
.pt-6{padding-top:1.5rem;}
.pb-2{padding-bottom:.5rem;}
.pl-5{padding-left:1.25rem;}
.text-center{text-align:center;}
.flex-1{flex:1 1 0%;}
.text-sm{font-size:.875rem;}
.text-lg{font-size:1.125rem;}
.text-xl{font-size:1.25rem;}
.text-2xl{font-size:1.5rem;}
.text-3xl{font-size:1.875rem;}
.text-4xl{font-size:2.25rem;}
.font-medium{font-weight:500;}
.font-bold{font-weight:700;}
.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;}
.tracking-tight{letter-spacing:-.025em;}
.text-white{color:#fff;}
.text-gray-200{color:var(--gray-200);}
.text-gray-300{color:var(--gray-300);}
.text-gray-400{color:var(--gray-400);}
.text-gray-500{color:var(--gray-500);}
.text-pink-400{color:var(--pink-400);}
.text-green-400{color:var(--green-400);}
.text-green-500{color:var(--green-500);}
.text-yellow-400{color:var(--yellow-400);}
.text-yellow-500{color:var(--yellow-500);}
.text-orange-400{color:var(--orange-400);}
.text-orange-500{color:var(--orange-500);}
.text-red-400{color:var(--red-400);}
.text-red-500{color:var(--red-500);}
.bg-gradient-text{background:linear-gradient(to right,var(--purple-400),var(--pink-500));-webkit-background-clip:text;background-clip:text;color:transparent;}
.bg-gradient-button{background:linear-gradient(to right,var(--purple-500),var(--pink-500));}
.bg-black-10{background-color:var(--black-10);}
.bg-black-20{background-color:var(--black-20);}
.bg-black-30{background-color:var(--black-30);}
.bg-green-50{background-color:rgba(240,253,244,.9);}
.bg-yellow-50{background-color:rgba(254,252,232,.9);}
.bg-orange-50{background-color:rgba(255,247,237,.9);}
.bg-red-50{background-color:rgba(254,242,242,.9);}
.backdrop-blur-sm{backdrop-filter:blur(4px);}
.border{border-width:1px;border-style:solid;}
.border-t{border-top-width:1px;border-top-style:solid;}
.border-b{border-bottom-width:1px;border-bottom-style:solid;}
.border-white-10{border-color:var(--white-10);}
.border-white-20{border-color:var(--white-20);}
.rounded{border-radius:.25rem;}

.rounded-md{border-radius:.375rem;}
.rounded-full{border-radius:9999px;}
.card{background-color:var(--black-20);backdrop-filter:blur(4px);border:1px solid var(--white-10);border-radius:.5rem;overflow:hidden;}

/* Remover fundo da card no form do simulador */
section.bg-transparent {background:transparent!important;box-shadow:none!important;border:none!important;}

.card-header{padding:1.5rem 1.5rem .5rem 1.5rem}.card-content{padding:1.5rem}.card-footer{padding:1.5rem;border-top:1px solid var(--white-10)}.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:.375rem;font-weight:500;font-size:.875rem;padding:.5rem 1rem;cursor:pointer;transition:all .2s;border:none;color:#fff}.btn-primary{background:linear-gradient(to right,var(--purple-500),var(--pink-500))}.btn-primary:hover{opacity:.9}.btn-full{width:100%}.input{width:100%;padding:.5rem .75rem;background-color:var(--black-30);border:1px solid var(--white-20);border-radius:.375rem;color:#fff;font-size:.875rem;max-width:100%}
/* Placeholders */
input::placeholder {
    color: #9ca3af;
    opacity: 0.7;
    font-size: 0.9em;
}

input:focus::placeholder {
    color: transparent;
}
.input-group {
  margin-bottom: 0.5rem;
  gap: 0.5rem;
}.label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.5rem}.tooltip{position:relative;display:inline-block;cursor:help}.tooltip .tooltip-content{visibility:hidden;width:200px;background-color:var(--gray-800);color:#fff;text-align:center;border-radius:6px;padding:.5rem;position:absolute;z-index:1;bottom:125%;left:50%;margin-left:-100px;opacity:0;transition:opacity .3s;font-size:.75rem;border:1px solid var(--gray-700)}.tooltip:hover .tooltip-content{visibility:visible;opacity:1}.number-badge{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:9999px;background:linear-gradient(to right,var(--purple-500),var(--pink-500));color:#fff;font-weight:500}.list-disc{list-style-type:disc}.kgr-table{width:100%;border-collapse:collapse;border-radius:.5rem;overflow:hidden;margin:1rem 0;color:var(--gray-800)}.kgr-table th{background-color:rgba(255,255,255,.9);padding:.75rem 1rem;text-align:left;font-weight:600}.kgr-table td{padding:.75rem 1rem}.kgr-table tr:first-child td{background-color:rgba(240,253,244,.9)}.kgr-table tr:nth-child(2) td{background-color:rgba(240,253,244,.9)}.kgr-table tr:nth-child(3) td{background-color:rgba(254,252,232,.9)}.kgr-table tr:nth-child(4) td{background-color:rgba(255,247,237,.9)}.kgr-table tr:nth-child(5) td{background-color:rgba(254,242,242,.9)}.kgr-table tr:nth-child(6) td{background-color:rgba(254,242,242,.9)}.icon-check{color:var(--green-500)}.icon-circle{color:var(--yellow-500)}.icon-clock{color:var(--orange-500)}.icon-clock-red{color:var(--red-500)}.icon-x{color:var(--red-500)}footer,header{width:100%;border-color:var(--white-10);backdrop-filter:blur(4px);background-color:var(--black-10)}header{border-bottom-width:1px;border-bottom-style:solid}footer{border-top-width:1px;border-top-style:solid;margin-top:auto}main{flex:1;padding:2rem 1rem}@media (min-width:768px){.md\:text-2xl{font-size:1.5rem}.md\:text-5xl{font-size:3rem}.md\:flex-row{flex-direction:row}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:hidden{display:none}.md\:flex{display:flex}}@media (min-width:1024px){.lg\:text-6xl{font-size:3.75rem}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.hidden{display:none}.cursor-help{cursor:help}.transition-colors{transition-property:color,background-color,border-color;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}.hover\:text-pink-400:hover{color:var(--pink-400)}.hover\:opacity-90:hover{opacity:.9}
.tips-section {
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  padding: 2rem;
  margin: 3rem 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border-left: 4px solid var(--pink-500);
}

.tips-section .tips-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
  color: var(--purple-800);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.tips-section .tips-title:before {
  content: "💡";
  font-size: 1.5rem;
}

.tips-section .tips-text {
  font-size: 0.9375rem;
  color: var(--gray-700);
  line-height: 1.7;
  margin-bottom: 1rem;
  padding-left: 2.25rem;
}

.tips-section .tips-list {
  padding-left: 2.25rem;
  list-style-type: none;
}

.tips-section .tips-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
  line-height: 1.6;
}

.tips-section .tips-list li:before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--pink-500);
}

.resultados-analise {
  margin-top: 2rem;
  padding: 1.5rem;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: .5rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Garantir texto branco nos resultados */
#results-table td {
  color: white !important;
}

/* Estilo para cabeçalhos da tabela */
#results-table th {
  color: white;
}

/* Estilo para linhas alternadas da tabela */
#results-table {
  background-color: transparent;
}

#results-table tr:nth-child(odd) {
  background-color: var(--gray-700);
}

#results-table tr:nth-child(even) {
  background-color: var(--gray-800);
}

#results-table tr:hover {
  background-color: var(--gray-600);
}

.tool-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.8rem;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: #f3f4f6;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    text-decoration: none;
}

.tool-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #f9a8d4;
    transform: translateY(-1px);
}

.tool-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.5);
}

.tool-btn i {
    font-size: 0.9rem;
    margin-right: 0.3rem;
}

@media (max-width: 768px) {
    .tool-btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
    }
}

/* Calculator Results Cards */
.result-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.result-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
}

.result-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #f3f4f6;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.result-value {
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(90deg, #ec4899, #8b5cf6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin: 0.5rem 0;
}

.result-description {
    font-size: 0.9rem;
    color: #d1d5db;
    line-height: 1.5;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .result-card {
        padding: 1.25rem;
    }
    
    .result-value {
        font-size: 1.75rem;
    }
}

/* Calculator Container */
.calculator-container {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 1rem;
    padding: 2rem;
    margin: 2rem auto;
    max-width: 800px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Form Styles */
#calculator-form {
    display: grid;
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-weight: 500;
    color: #e5e7eb;
}

.form-group input {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: white;
    transition: all 0.3s ease;
}

.form-group input:focus {
    outline: none;
    border-color: rgba(236, 72, 153, 0.5);
    box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.2);
}

.calculate-btn {
    background: linear-gradient(90deg, #ec4899, #8b5cf6);
    color: white;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1rem;
}

.calculate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.2);
}

/* Results Container */
.results-container {
    display: grid;
    gap: 1.5rem;
    margin-top: 2rem;
    opacity: 1;
    transition: opacity 0.3s ease;
}

@media (max-width: 768px) {
    .calculator-container {
        padding: 1.5rem;
    }
    
    #calculator-form {
        gap: 1rem;
    }
}

/* Form Layout */
.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

/* Acessibilidade */
.help-text {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #9ca3af;
}

input:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

button:focus {
    outline: 2px solid #10b981;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3);
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Documentação - Ajustado para padrão da calculadora */
.documentation-container {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.doc-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.doc-card:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.doc-card h3 {
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.doc-card ul, .doc-card ol {
    padding-left: 1.25rem;
    color: #e5e7eb;
}

.doc-card li {
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.doc-card strong {
    color: #3b82f6;
}

/* Header Transparente */
header {
    background: transparent !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}

/* Manter estilo dos elementos internos */
.header-content {
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Menu Mobile */
header {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Menu Desktop - DEVE aparecer em telas grandes */
@media (min-width: 768px) {
    nav.md\:flex {
        display: flex !important;
    }
    #mobile-menu-button, #mobile-menu {
        display: none !important;
    }
}

/* Menu Mobile - DEVE aparecer em telas pequenas */
@media (max-width: 767px) {
    #mobile-menu-button {
        display: block !important;
    }
    nav.md\:flex {
        display: none !important;
    }
}

/* Botão Hamburguer */
#mobile-menu-button {
    cursor: pointer;
    transition: transform 0.2s;
}

#mobile-menu-button:hover {
    transform: scale(1.1);
}

/* Itens do Menu */
.tool-btn, .tool-btn-mobile {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    transition: all 0.2s;
}

.tool-btn:hover, .tool-btn-mobile:hover {
    background: rgba(255, 255, 255, 0.1);
}

.tool-btn-mobile {
    width: 100%;
}

.header-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.header-tools::-webkit-scrollbar {
  display: none;
}

.tool-btn {
  white-space: nowrap;
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
}

/* Ajustes dinâmicos para o menu */
@media (max-width: 1280px) {
  .tool-btn {
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
  }
  .tool-btn i {
    margin-right: 0.3rem;
  }
}

@media (max-width: 1024px) {
  .tool-btn {
    padding: 0.35rem 0.7rem;
    font-size: 0.82rem;
  }
}

@media (max-width: 768px) {
  .tool-btn {
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
  }
  .header-tools {
    gap: 0.4rem;
  }
}

/* Estilos para a calculadora com tema roxo */
.purple-card {
    background-color: #6b21a8;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.purple-card h3 {
    color: white;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    text-align: center;
}

.purple-input {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    color: white;
    transition: all 0.3s ease;
}

.purple-input:focus {
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
    outline: none;
}

.purple-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* Cor preta para opções do dropdown ao passar o mouse */
option:hover,
option:focus,
option:active,
select.purple-input option {
    color: #000;
}

.purple-label {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.25rem;
    display: block;
}

.purple-help {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0.25rem;
}

.purple-result {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1.5rem;
    text-align: center;
}

.purple-result-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
}

.purple-btn {
    background: linear-gradient(90deg, #9333ea, #ec4899);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    margin-top: 1rem;
}

.purple-btn:hover {
    background: linear-gradient(90deg, #a855f7, #f472b6);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}