/* VERSÃO DO ARQUIVO: 1.3.1 - Adiciona titulo com versão do arquivo */
:root{
--ts-bg-card:var(--white);
--ts-text-primary:var(--dark-gray);
--ts-text-secondary:var(--medium-gray);
--ts-border-color:var(--light-gray);
--ts-bg-light:var(--off-white);
--ts-bg-gradient-start:var(--off-white);
--ts-bg-gradient-end:var(--light-gray);
--ts-btn-primary-start:var(--primary-green);
--ts-btn-primary-end:var(--primary-blue);
--ts-btn-primary-hover-start:var(--dark-green);
--ts-btn-primary-hover-end:var(--dark-blue);
--ts-btn-secondary-start:var(--medium-gray);
--ts-btn-secondary-end:#495057;
--ts-btn-secondary-hover-start:#495057;
--ts-btn-secondary-hover-end:var(--dark-gray);
--ts-input-bg:var(--white);
--ts-input-bg-hover:var(--off-white);
--ts-result-success-bg-1:#d4edda;
--ts-result-success-bg-2:#c3e6cb;
--ts-result-success-color:#155724;
--ts-result-error-bg-1:#f8d7da;
--ts-result-error-bg-2:#f5c6cb;
--ts-result-error-color:#721c24;
--ts-radio-accent:var(--primary-green);
--ts-radio-checked-bg-1:#f0f8f5;
--ts-radio-checked-bg-2:#e8f5e8;
--ts-shadow-light:rgba(0,0,0,0.1);
--ts-shadow-medium:rgba(0,0,0,0.15);
}
[data-theme="dark"]{
--ts-bg-card:var(--white);
--ts-text-primary:var(--dark-gray);
--ts-text-secondary:var(--medium-gray);
--ts-border-color:var(--light-gray);
--ts-bg-light:var(--off-white);
--ts-bg-gradient-start:var(--off-white);
--ts-bg-gradient-end:var(--light-gray);
--ts-btn-primary-start:var(--primary-green);
--ts-btn-primary-end:var(--primary-blue);
--ts-btn-primary-hover-start:var(--dark-green);
--ts-btn-primary-hover-end:var(--dark-blue);
--ts-btn-secondary-start:var(--medium-gray);
--ts-btn-secondary-end:#495057;
--ts-btn-secondary-hover-start:#495057;
--ts-btn-secondary-hover-end:var(--dark-gray);
--ts-input-bg:#2d2d2d;
--ts-input-bg-hover:#3a3a3a;
--ts-result-success-bg-1:#1e5c3e;
--ts-result-success-bg-2:#1a4d33;
--ts-result-success-color:#a3e4b8;
--ts-result-error-bg-1:#5c2a2a;
--ts-result-error-bg-2:#4a1f1f;
--ts-result-error-color:#f5a5a5;
--ts-radio-accent:var(--primary-green);
--ts-radio-checked-bg-1:#0d4a1e;
--ts-radio-checked-bg-2:#0a3a18;
--ts-shadow-light:rgba(0,0,0,0.3);
--ts-shadow-medium:rgba(0,0,0,0.4);
}
.conversor-timestamp-container{background:var(--color-bg-card);border-radius:1rem;box-shadow:0 0.5rem 1rem var(--ts-shadow-medium);padding:2rem;margin:1.5rem auto;max-width:700px;transition:all 0.3s ease;overflow:hidden;position:relative;border:2px solid transparent;}
.conversor-timestamp-container:hover{box-shadow:0 8px 25px var(--ts-shadow-light);transform:translateY(-2px);}
.timestamp-atual{font-family:'Courier New',monospace;text-align:center;margin-bottom:2rem;font-size:1.2rem;color:var(--ts-text-primary);background:linear-gradient(135deg,var(--ts-bg-gradient-start),var(--ts-bg-gradient-end));padding:1.5rem;border-radius:0.75rem;border:1px solid var(--ts-border-color);font-weight:600;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:1rem;}
.copiar-timestamp-atual{background:linear-gradient(135deg,var(--ts-btn-secondary-start),var(--ts-btn-secondary-end));color:#fff;border:none;padding:0.5rem;border-radius:0.375rem;cursor:pointer;transition:all 0.3s ease;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(108,117,125,0.3);flex-shrink:0;}
.copiar-timestamp-atual:hover{background:linear-gradient(135deg,var(--ts-btn-secondary-hover-start),var(--ts-btn-secondary-hover-end));transform:translateY(-1px);box-shadow:0 3px 12px rgba(108,117,125,0.4);}
.copiar-timestamp-atual:active{transform:translateY(0);}
.conversor-timestamp-selecao{display:flex;gap:1.5rem;margin-bottom:2rem;justify-content:center;align-items:center;background:linear-gradient(135deg,var(--ts-bg-gradient-start),var(--ts-bg-gradient-end));padding:1.5rem;border-radius:0.75rem;border:1px solid var(--ts-border-color);}
.conversor-timestamp-selecao label{display:flex;align-items:center;gap:0.75rem;font-weight:600;color:var(--ts-text-primary);cursor:pointer;padding:0.875rem 1.5rem;border-radius:0.5rem;transition:all 0.3s ease;border:2px solid transparent;background:var(--color-bg-card);box-shadow:0 2px 8px var(--ts-shadow-light);position:relative;overflow:hidden;min-width:180px;justify-content:center;font-size:0.95rem;}
.conversor-timestamp-selecao label:hover{transform:translateY(-2px);box-shadow:0 4px 15px var(--ts-shadow-medium);background:var(--ts-bg-light);}
.conversor-timestamp-selecao input[type="radio"]{accent-color:var(--ts-radio-accent);width:18px;height:18px;margin:0;}
.conversor-timestamp-selecao input[type="radio"]:checked+span{color:var(--ts-radio-accent);font-weight:700;}
.conversor-timestamp-selecao label:has(input:checked){border-color:var(--ts-radio-accent);background:linear-gradient(135deg,var(--ts-radio-checked-bg-1),var(--ts-radio-checked-bg-2));box-shadow:0 4px 20px rgba(0,166,81,0.2);}
.conversor-timestamp-opcoes{margin-bottom:2rem;padding:1.5rem;background:linear-gradient(135deg,var(--ts-bg-gradient-start),var(--ts-bg-gradient-end));border-radius:0.75rem;border:1px solid var(--ts-border-color);}
.conversor-timestamp-opcoes label{display:flex;align-items:center;gap:0.75rem;font-weight:600;color:var(--ts-text-primary);margin-bottom:1rem;font-size:0.95rem;}
.conversor-timestamp-opcoes-fuso{display:flex;gap:1rem;align-items:flex-end;}
.conversor-timestamp-opcoes-fuso .fuso-select-wrapper{flex:1;}
.conversor-timestamp-opcoes select{width:100%;padding:0.875rem 1rem;font-size:1rem;border:2px solid var(--ts-border-color);border-radius:0.5rem;background-color:var(--ts-input-bg);color:var(--ts-text-primary);transition:all 0.3s ease;font-family:inherit;font-weight:500;margin-bottom:1rem;}
.conversor-timestamp-opcoes select:focus{outline:none;border-color:var(--ts-btn-primary-start);box-shadow:0 0 0 3px rgba(0,166,81,0.1);transform:translateY(-1px);background-color:var(--ts-input-bg-hover);}
.conversor-timestamp-opcoes select:hover{border-color:var(--ts-btn-primary-end);background-color:var(--ts-input-bg-hover);}
#fusoHorarioBotao{background:linear-gradient(135deg,var(--ts-btn-secondary-start),var(--ts-btn-secondary-end));color:#fff;border:none;padding:0.875rem 1.25rem;border-radius:0.5rem;font-weight:600;cursor:pointer;transition:all 0.3s ease;font-size:0.9rem;box-shadow:0 2px 8px rgba(108,117,125,0.3);white-space:nowrap;height:fit-content;margin-bottom:1rem;}
#fusoHorarioBotao:hover{background:linear-gradient(135deg,var(--ts-btn-secondary-hover-start),var(--ts-btn-secondary-hover-end));transform:translateY(-2px);box-shadow:0 4px 15px rgba(108,117,125,0.4);}
.conversor-timestamp-form-row{display:flex;gap:1rem;margin-bottom:0.5rem;}
.conversor-timestamp-form-group{margin-bottom:0.5rem;flex:1;}
.conversor-timestamp-form-group label{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem;font-weight:600;color:var(--ts-text-primary);font-size:0.95rem;}
.conversor-timestamp-input{width:100%;padding:1rem 1.25rem;font-size:1.1rem;border:2px solid var(--ts-border-color);border-radius:0.5rem;background-color:var(--ts-input-bg);color:var(--ts-text-primary);transition:all 0.3s ease;font-family:inherit;box-sizing:border-box;font-weight:500;margin-bottom:1rem;}
.conversor-timestamp-input:focus{outline:none;border-color:var(--ts-btn-primary-start);box-shadow:0 0 0 3px rgba(0,166,81,0.1);transform:translateY(-1px);background-color:var(--ts-input-bg-hover);}
.conversor-timestamp-input:hover{border-color:var(--ts-btn-primary-end);background-color:var(--ts-input-bg-hover);}
.conversor-timestamp-input::placeholder{color:var(--ts-text-secondary);font-weight:400;}
.conversor-timestamp-botao{background:linear-gradient(135deg,var(--ts-btn-primary-start),var(--ts-btn-primary-end));color:#fff;border:none;padding:1.25rem 2rem;font-size:1.1rem;font-weight:600;border-radius:0.5rem;cursor:pointer;transition:all 0.3s ease;width:100%;display:flex;align-items:center;justify-content:center;gap:0.75rem;box-shadow:0 4px 15px rgba(0,166,81,0.3);margin-top:1rem;}
.conversor-timestamp-botao:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,166,81,0.4);background:linear-gradient(135deg,var(--ts-btn-primary-hover-start),var(--ts-btn-primary-hover-end));}
.conversor-timestamp-botao:active{transform:translateY(0);}
.conversor-timestamp-resultado{background:linear-gradient(135deg,var(--ts-bg-gradient-start),var(--ts-bg-gradient-end));padding:1.5rem;border-radius:0.75rem;margin-top:1.5rem;border-left:4px solid var(--ts-btn-primary-start);font-size:1rem;line-height:1.6;color:var(--ts-text-primary);min-height:60px;opacity:0;transform:translateY(20px);transition:all 0.5s ease;display:none;position:relative;}
.conversor-timestamp-resultado.show{opacity:1;transform:translateY(0);display:block;animation:resultFadeIn 0.6s ease-out;}
@keyframes resultFadeIn{from{opacity:0;transform:translateY(30px) scale(0.95);}to{opacity:1;transform:translateY(0) scale(1);}}
.conversor-timestamp-resultado.success{background:linear-gradient(135deg,var(--ts-result-success-bg-1),var(--ts-result-success-bg-2));border-left-color:#28a745;color:var(--ts-result-success-color);}
.conversor-timestamp-resultado.error{background:linear-gradient(135deg,var(--ts-result-error-bg-1),var(--ts-result-error-bg-2));border-left-color:#dc3545;color:var(--ts-result-error-color);}
.resultado-content{display:flex;flex-direction:column;gap:1rem;}
.resultado-valor{font-size:1.25rem;font-weight:700;color:var(--ts-btn-primary-start);background:rgba(255,255,255,0.6);padding:1rem;border-radius:0.5rem;text-align:center;word-break:break-all;font-family:'Courier New',monospace;}
[data-theme="dark"] .resultado-valor{background:rgba(0,0,0,0.3);}
.resultado-botao{background:linear-gradient(135deg,var(--ts-btn-secondary-start),var(--ts-btn-secondary-end));color:#fff;border:none;padding:0.75rem 1.5rem;border-radius:0.5rem;font-weight:600;cursor:pointer;transition:all 0.3s ease;display:flex;align-items:center;justify-content:center;gap:0.5rem;font-size:0.9rem;box-shadow:0 2px 8px rgba(108,117,125,0.3);margin-top:1rem;}
.resultado-botao:hover{background:linear-gradient(135deg,var(--ts-btn-secondary-hover-start),var(--ts-btn-secondary-hover-end));transform:translateY(-2px);box-shadow:0 4px 15px rgba(108,117,125,0.4);}
.resultado-botao:active{transform:translateY(0);}
/* Responsividade */
@media (max-width:768px){
.conversor-timestamp-container{margin:1rem;padding:1.5rem;max-width:none;}
.timestamp-atual{font-size:1rem;padding:1.25rem;flex-direction:row;gap:0.75rem;}
.conversor-timestamp-selecao{flex-direction:column;gap:1rem;padding:1.25rem;}
.conversor-timestamp-form-row{gap:0.75rem;}
.conversor-timestamp-selecao label{width:100%;min-width:auto;padding:1rem;font-size:0.9rem;}
.conversor-timestamp-opcoes{padding:1.25rem;}
.conversor-timestamp-opcoes-fuso{flex-direction:column;gap:0.5rem;}
.conversor-timestamp-opcoes-fuso .fuso-select-wrapper{width:100%;}
#fusoHorarioBotao{width:100%;margin-bottom:0;}
.conversor-timestamp-input{padding:0.875rem 1rem;font-size:1rem;}
.conversor-timestamp-botao{padding:1rem 1.5rem;font-size:1rem;}
.conversor-timestamp-resultado{padding:1.25rem;font-size:0.95rem;}
.resultado-valor{font-size:1.1rem;}
}
@media (max-width:480px){
.conversor-timestamp-container{margin:0.5rem;padding:1rem;}
.timestamp-atual{font-size:0.9rem;padding:1rem;}
.conversor-timestamp-selecao{gap:0.75rem;padding:1rem;}
.conversor-timestamp-selecao label{padding:0.875rem;font-size:0.85rem;}
.conversor-timestamp-opcoes{padding:1rem;}
.conversor-timestamp-input{padding:0.75rem;font-size:0.95rem;}
.conversor-timestamp-botao{padding:0.875rem 1rem;font-size:0.95rem;}
.conversor-timestamp-resultado{padding:1rem;font-size:0.9rem;}
.resultado-valor{font-size:1rem;padding:0.875rem;}
}
/* Animações de entrada */
.conversor-timestamp-container>*{animation:slideInFromBottom 0.5s ease-out;}
@keyframes slideInFromBottom{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
/* Estados de loading */
.conversor-timestamp-botao.loading{pointer-events:none;opacity:0.7;}
.conversor-timestamp-botao.loading::before{animation:spin 1s linear infinite;}
@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
/* Ajustes de acessibilidade */
@media (prefers-reduced-motion:reduce){
.conversor-timestamp-container,
.conversor-timestamp-container>*,
.conversor-timestamp-resultado,
.conversor-timestamp-botao:hover,
.conversor-timestamp-input:focus{animation:none;transform:none;transition:none;}
}