/* ============================================
   Common Styles - Estilos Globais Responsivos
   S.I.N. Design System
   ============================================ */

/* Reset e configurações base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-secondary);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-primary);
    background-color: var(--color-bg-secondary);
    overflow-x: hidden;
}

/* ============================================
   Tipografia S.I.N.
   ============================================ */

h1, h2, h3, h4 {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
}

h5, h6 {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
}

h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }
h5 { font-size: var(--font-size-h5); }
h6 { font-size: var(--font-size-h6); }

p, li, td, th {
    font-family: var(--font-secondary);
    font-size: var(--font-size-body);
    line-height: var(--line-height-relaxed);
}

.subtitle {
    font-family: var(--font-primary);
    font-size: var(--font-size-subtitle);
    font-weight: var(--font-weight-regular);
}

.text-body {
    font-size: var(--font-size-body);
}

.text-body-2 {
    font-size: var(--font-size-body-2);
}

.text-small {
    font-size: var(--font-size-small);
}

/* Container responsivo */
.container-fluid {
    width: 100%;
    padding-right: var(--spacing-md);
    padding-left: var(--spacing-md);
    margin-right: auto;
    margin-left: auto;
}

/* Utilitários responsivos */
.d-flex {
    display: flex !important;
}

.align-items-center {
    align-items: center !important;
}

.justify-content-between {
    justify-content: space-between !important;
}

.gap-3 {
    gap: var(--spacing-md);
}

.mb-3 {
    margin-bottom: var(--spacing-md);
}

.text-center {
    text-align: center;
}

/* Links */
a {
    text-decoration: none;
    color: var(--sin-azul);
    transition: color var(--transition-fast);
}

a:hover {
    text-decoration: none;
    color: var(--sin-azul-hover);
}

/* Botões base */
button, .btn {
    cursor: pointer;
    border: none;
    outline: none;
    font-family: var(--font-secondary);
    transition: all var(--transition-normal);
}

button:focus, .btn:focus {
    outline: none;
}

/* Forms responsivos */
.form-control, .form-select {
    width: 100%;
    font-family: var(--font-secondary);
    font-size: var(--font-size-body);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.form-control:focus, .form-select:focus {
    border-color: var(--sin-vermelho);
    box-shadow: 0 0 0 3px var(--sin-vermelho-light);
    outline: none;
}

.form-label {
    font-family: var(--font-secondary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-xs);
}

/* ============================================
   Alertas S.I.N.
   ============================================ */

.alert {
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-md);
    border-radius: var(--radius-md);
    border: var(--border-width) solid transparent;
    font-family: var(--font-secondary);
    font-size: var(--font-size-body);
}

.alert-success {
    color: var(--sin-sucesso);
    background-color: var(--sin-sucesso-bg);
    border-color: var(--sin-sucesso);
}

.alert-danger {
    color: var(--sin-erro);
    background-color: var(--sin-erro-bg);
    border-color: var(--sin-erro);
}

.alert-warning {
    color: #996600;
    background-color: var(--sin-aviso-bg);
    border-color: var(--sin-aviso);
}

.alert-info {
    color: var(--sin-azul);
    background-color: var(--sin-azul-light);
    border-color: var(--sin-azul);
}

.alert-dismissible {
    padding-right: 3rem;
    position: relative;
}

.btn-close {
    position: absolute;
    top: 50%;
    right: var(--spacing-md);
    transform: translateY(-50%);
    background: transparent;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    opacity: 0.5;
    color: inherit;
    transition: opacity var(--transition-fast);
}

.btn-close:hover {
    opacity: 1;
}

/* ============================================
   Cores de Texto S.I.N.
   ============================================ */

.text-vermelho { color: var(--sin-vermelho) !important; }
.text-laranja { color: var(--sin-laranja) !important; }
.text-azul { color: var(--sin-azul) !important; }
.text-cinza { color: var(--sin-cinza-chumbo) !important; }
.text-sucesso { color: var(--sin-sucesso) !important; }
.text-aviso { color: var(--sin-aviso) !important; }
.text-erro { color: var(--sin-erro) !important; }

/* Backgrounds S.I.N. */
.bg-vermelho { background-color: var(--sin-vermelho) !important; }
.bg-laranja { background-color: var(--sin-laranja) !important; }
.bg-azul { background-color: var(--sin-azul) !important; }
.bg-cinza-claro { background-color: var(--sin-cinza-claro) !important; }
.bg-cinza-chumbo { background-color: var(--sin-cinza-chumbo) !important; }

/* ============================================
   Media Queries - Responsividade Mobile
   ============================================ */

/* Tablets e dispositivos médios */
@media (max-width: 768px) {
    html {
        font-size: 14px;
    }

    .container-fluid {
        padding-right: var(--spacing-sm);
        padding-left: var(--spacing-sm);
    }
}

/* Smartphones */
@media (max-width: 576px) {
    html {
        font-size: 13px;
    }

    .container-fluid {
        padding-right: var(--spacing-sm);
        padding-left: var(--spacing-sm);
    }
}

/* Landscape em mobile */
@media (max-width: 896px) and (orientation: landscape) {
    body {
        font-size: 12px;
    }
}

/* ============================================
   Utilitários de visibilidade
   ============================================ */

/* Esconder em mobile */
@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Mostrar apenas em mobile */
.show-mobile {
    display: none !important;
}

@media (max-width: 768px) {
    .show-mobile {
        display: block !important;
    }
}

/* ============================================
   Acessibilidade e Touch
   ============================================ */

/* Melhorar área de toque em dispositivos móveis */
@media (max-width: 768px) {
    button, .btn, a[role="button"] {
        min-height: 44px;
        min-width: 44px;
    }

    input, select, textarea {
        font-size: 16px; /* Previne zoom automático no iOS */
    }
}

/* Prevenir zoom duplo em iOS */
@media (max-width: 768px) {
    select, textarea, input[type="text"], input[type="password"],
    input[type="datetime"], input[type="datetime-local"],
    input[type="date"], input[type="month"], input[type="time"],
    input[type="week"], input[type="number"], input[type="email"],
    input[type="url"], input[type="search"], input[type="tel"] {
        font-size: 16px !important;
    }
}

/* Remove tap highlight em mobile */
* {
    -webkit-tap-highlight-color: transparent;
}