/* ============================================================
   app.css — Reset, variáveis globais e tipografia
   Sistema Hospitalar · Ambiente de Automação
   ============================================================ */

/* ── Variáveis ── */
:root {
    /* Cores primárias — alinhadas com o padrão corporativo */
    --color-primary:        #084CA1;
    --color-primary-light:  #2a6aad;
    --color-primary-dark:   #063a7e;

    /* Cores de destaque (teal corporativo) */
    --color-accent:         #59C4D1;
    --color-accent-hover:   #17a2b8;
    --color-accent-dark:    #138496;

    /* Sidebar */
    --color-sidebar-bg:     #2c3340;
    --color-sidebar-bg2:    #353b45;
    --color-sidebar-text:   #b8bec8;
    --color-sidebar-active: rgba(89,196,209,.12);
    --color-sidebar-border: rgba(255,255,255,.07);

    /* Neutros */
    --color-bg:             #f0f4f8;
    --color-surface:        #ffffff;
    --color-border:         #e2e8f0;
    --color-border-light:   #f1f5f9;

    /* Texto */
    --color-text:           #1e293b;
    --color-text-muted:     #64748b;
    --color-text-light:     #94a3b8;

    /* Status */
    --color-success-bg:     #f0fdf4;
    --color-success-border: #bbf7d0;
    --color-success-text:   #166534;

    --color-error-bg:       #fff5f5;
    --color-error-border:   #fca5a5;
    --color-error-text:     #991b1b;

    --color-warning-bg:     #fffbeb;
    --color-warning-border: #fde68a;
    --color-warning-text:   #92400e;

    --color-info-bg:        #eff6ff;
    --color-info-border:    #bfdbfe;
    --color-info-text:      #1d4ed8;

    /* Tipografia — Roboto (padrão corporativo) */
    --font-family:          'Roboto', Arial, Helvetica, sans-serif;
    --font-size-xs:         11px;
    --font-size-sm:         12.5px;
    --font-size-base:       13.5px;
    --font-size-md:         15px;
    --font-size-lg:         18px;
    --font-size-xl:         22px;
    --font-size-2xl:        26px;

    /* Espaçamentos */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;

    /* Bordas */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   14px;
    --radius-xl:   18px;
    --radius-full: 999px;

    /* Sombras */
    --shadow-sm:  0 1px 4px rgba(0,0,0,.06);
    --shadow-md:  0 4px 14px rgba(0,0,0,.08);
    --shadow-lg:  0 10px 30px rgba(0,0,0,.12);
    --shadow-xl:  0 20px 50px rgba(0,0,0,.18);

    /* Transições */
    --transition: .18s ease;
    --transition-fast: .12s ease;
}

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

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.5;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button, input, select, textarea {
    font-family: var(--font-family);
}

/* ── Utilitários ── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}