/* =============================================================================
   PRIOS · Portal do Cliente — Design System
   -----------------------------------------------------------------------------
   Stack: CSS moderno puro (custom properties, grid, flexbox, container queries
   onde possível). Zero dependências de framework.

   Estrutura:
     1. Reset & base
     2. Design tokens (CSS variables)
     3. Dark mode (auto + manual via data-theme)
     4. Tipografia
     5. Botões
     6. Inputs (floating label)
     7. Cards
     8. Pills / badges
     9. Layout auth (split-screen)
    10. Layout app (sidebar + main) -- aplicado a partir do Bloco 7
    11. Utilitários
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ============================================================================
   1. Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--text);
	background: var(--bg-app);
	min-height: 100vh;
	overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--cor-primaria); text-decoration: none; transition: color .15s; }
a:hover { color: var(--cor-secundaria); }
a.btn,
a.btn:hover,
a.btn:focus { color: inherit; text-decoration: none; }
a.btn-primary,
a.btn-primary:hover,
a.btn-primary:focus { color: var(--text-inverse); }
button { font: inherit; cursor: pointer; background: none; border: 0; }
input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 2px; border-radius: 4px; }

/* ============================================================================
   2. Design tokens — light mode default
   ========================================================================== */
:root {
	/* Cor primária (sobrescrita inline pelo branding do escritório) */
	--cor-primaria:   #059669;
	--cor-secundaria: #047857;
	--cor-primaria-rgb: 5, 150, 105;
	--cor-secundaria-rgb: 4, 120, 87;

	/* Neutros */
	--bg-app:         #f8fafc;   /* fundo da página */
	--bg-surface:     #ffffff;   /* cartões, modais */
	--bg-elev:        #ffffff;   /* sidebar */
	--bg-muted:       #f1f5f9;   /* inputs disabled, hover sutil */
	--bg-hover:       #f8fafc;

	--border:         #e2e8f0;
	--border-strong:  #cbd5e1;

	--text:           #0f172a;
	--text-muted:     #64748b;
	--text-subtle:    #94a3b8;
	--text-inverse:   #ffffff;

	/* Estados */
	--success:        #059669;
	--success-bg:     #d1fae5;
	--success-fg:     #065f46;
	--warning:        #d97706;
	--warning-bg:     #fef3c7;
	--warning-fg:     #92400e;
	--danger:         #dc2626;
	--danger-bg:      #fee2e2;
	--danger-fg:      #991b1b;
	--info:           #2563eb;
	--info-bg:        #dbeafe;
	--info-fg:        #1e40af;

	/* Tipografia */
	--font-size-xs:   .75rem;     /* 12px */
	--font-size-sm:   .875rem;    /* 14px */
	--font-size-base: 1rem;       /* 16px */
	--font-size-lg:   1.125rem;   /* 18px */
	--font-size-xl:   1.25rem;    /* 20px */
	--font-size-2xl:  1.5rem;     /* 24px */
	--font-size-3xl:  1.875rem;   /* 30px */
	--font-size-4xl:  2.25rem;    /* 36px */

	/* Espaçamentos (escala 4) */
	--space-1: .25rem;
	--space-2: .5rem;
	--space-3: .75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;

	/* Border radius */
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 14px;
	--radius-xl: 20px;
	--radius-2xl: 28px;
	--radius-full: 9999px;

	/* Sombras */
	--shadow-xs:  0 1px 2px rgba(15, 23, 42, .04);
	--shadow-sm:  0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04);
	--shadow-md:  0 4px 6px -1px rgba(15, 23, 42, .08), 0 2px 4px -1px rgba(15, 23, 42, .04);
	--shadow-lg:  0 10px 15px -3px rgba(15, 23, 42, .08), 0 4px 6px -2px rgba(15, 23, 42, .04);
	--shadow-xl:  0 20px 25px -5px rgba(15, 23, 42, .1), 0 10px 10px -5px rgba(15, 23, 42, .04);

	/* Transições */
	--transition-fast:   .12s ease;
	--transition-base:   .2s ease;
	--transition-slow:   .35s ease;

	/* Z-indexes */
	--z-sidebar:  20;
	--z-header:   30;
	--z-overlay: 100;
	--z-modal:   110;
	--z-toast:   200;
}

/* ============================================================================
   3. Dark mode
   - Auto via prefers-color-scheme se data-theme não setado
   - Override manual: <html data-theme="light"> ou <html data-theme="dark">
   ========================================================================== */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg-app:        #0b1220;
		--bg-surface:    #111827;
		--bg-elev:       #0f172a;
		--bg-muted:      #1e293b;
		--bg-hover:      #1e293b;
		--border:        #1e293b;
		--border-strong: #334155;
		--text:          #f8fafc;
		--text-muted:    #94a3b8;
		--text-subtle:   #64748b;
		--shadow-xs:  0 1px 2px rgba(0,0,0,.4);
		--shadow-sm:  0 1px 2px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
		--shadow-md:  0 4px 6px -1px rgba(0,0,0,.5);
		--shadow-lg:  0 10px 15px -3px rgba(0,0,0,.5);
		--success-bg:  rgba(5,150,105,.18);
		--success-fg:  #6ee7b7;
		--warning-bg:  rgba(217,119,6,.18);
		--warning-fg:  #fcd34d;
		--danger-bg:   rgba(220,38,38,.18);
		--danger-fg:   #fca5a5;
		--info-bg:     rgba(37,99,235,.18);
		--info-fg:     #93c5fd;
	}
}
[data-theme="dark"] {
	--bg-app:        #0b1220;
	--bg-surface:    #111827;
	--bg-elev:       #0f172a;
	--bg-muted:      #1e293b;
	--bg-hover:      #1e293b;
	--border:        #1e293b;
	--border-strong: #334155;
	--text:          #f8fafc;
	--text-muted:    #94a3b8;
	--text-subtle:   #64748b;
	--shadow-xs:  0 1px 2px rgba(0,0,0,.4);
	--shadow-sm:  0 1px 2px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
	--shadow-md:  0 4px 6px -1px rgba(0,0,0,.5);
	--shadow-lg:  0 10px 15px -3px rgba(0,0,0,.5);
	--success-bg:  rgba(5,150,105,.18);
	--success-fg:  #6ee7b7;
	--warning-bg:  rgba(217,119,6,.18);
	--warning-fg:  #fcd34d;
	--danger-bg:   rgba(220,38,38,.18);
	--danger-fg:   #fca5a5;
	--info-bg:     rgba(37,99,235,.18);
	--info-fg:     #93c5fd;
}

/* ============================================================================
   4. Tipografia
   ========================================================================== */
h1, h2, h3, h4, h5, h6 { color: var(--text); line-height: 1.25; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }
.text-muted   { color: var(--text-muted); }
.text-subtle  { color: var(--text-subtle); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger  { color: var(--danger); }

/* ============================================================================
   5. Botões
   ========================================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	font-size: var(--font-size-sm);
	font-weight: 600;
	padding: .65rem 1.1rem;
	border-radius: var(--radius-lg);
	transition: transform var(--transition-fast), background var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
	white-space: nowrap;
	user-select: none;
	border: 1px solid transparent;
	min-height: 42px;
}
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn:disabled { opacity: .55; cursor: not-allowed; transform: none !important; }

.btn-primary {
	background: var(--cor-primaria);
	color: var(--text-inverse);
}
.btn-primary:hover:not(:disabled) { background: var(--cor-secundaria); box-shadow: 0 4px 14px rgba(var(--cor-primaria-rgb), .35); }

.btn-secondary {
	background: var(--bg-surface);
	color: var(--text);
	border-color: var(--border-strong);
}
.btn-secondary:hover:not(:disabled) { background: var(--bg-muted); }

.btn-ghost {
	background: transparent;
	color: var(--text-muted);
}
.btn-ghost:hover:not(:disabled) { background: var(--bg-muted); color: var(--text); }

.btn-danger {
	background: var(--danger);
	color: var(--text-inverse);
}
.btn-danger:hover:not(:disabled) { background: #b91c1c; }

.btn-block { width: 100%; }
.btn-lg { padding: .85rem 1.4rem; font-size: var(--font-size-base); min-height: 48px; }
.btn-sm { padding: .4rem .75rem; font-size: var(--font-size-xs); min-height: 32px; }

/* ============================================================================
   6. Inputs com floating label
   ========================================================================== */
.field {
	position: relative;
	margin-bottom: var(--space-4);
}
.field-control {
	position: relative;
}
.field-input {
	width: 100%;
	padding: 1.25rem 1rem .55rem 1rem;
	font-size: var(--font-size-base);
	background: var(--bg-surface);
	color: var(--text);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-md);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
	height: 56px;
}
.field-input:focus {
	outline: none;
	border-color: var(--cor-primaria);
	box-shadow: 0 0 0 3px rgba(var(--cor-primaria-rgb), .18);
}
.field-input::placeholder { color: transparent; }
.field-label {
	position: absolute;
	left: 1rem;
	top: 1.05rem;
	font-size: var(--font-size-base);
	color: var(--text-muted);
	pointer-events: none;
	transition: top var(--transition-fast), font-size var(--transition-fast), color var(--transition-fast);
	background: transparent;
	padding: 0 .25rem;
}
.field-input:focus ~ .field-label,
.field-input:not(:placeholder-shown) ~ .field-label {
	top: .35rem;
	font-size: var(--font-size-xs);
	color: var(--cor-primaria);
	font-weight: 500;
}
.field-help {
	font-size: var(--font-size-xs);
	color: var(--text-muted);
	margin-top: var(--space-2);
}
.field-error { color: var(--danger); }
.field-error .field-input { border-color: var(--danger); }
.field-error .field-help  { color: var(--danger); }

.field-toggle-pwd {
	position: absolute;
	right: .65rem;
	top: 50%;
	transform: translateY(-50%);
	padding: .35rem;
	color: var(--text-muted);
	cursor: pointer;
	border: none;
	background: transparent;
	line-height: 0;
	border-radius: var(--radius-sm);
}
.field-toggle-pwd:hover { color: var(--text); background: var(--bg-muted); }
.field-toggle-pwd svg { display: block; }

/* ============================================================================
   7. Cards
   ========================================================================== */
.card {
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-xs);
	overflow: hidden;
}
.card-padded { padding: var(--space-6); }
.card-header { padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border); }
.card-body   { padding: var(--space-6); }
.card-footer { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border); background: var(--bg-muted); font-size: var(--font-size-sm); }

/* ============================================================================
   8. Pills / badges
   ========================================================================== */
.pill {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-full);
	font-size: var(--font-size-xs);
	font-weight: 600;
	white-space: nowrap;
}
.pill-success { background: var(--success-bg); color: var(--success-fg); }
.pill-warning { background: var(--warning-bg); color: var(--warning-fg); }
.pill-danger  { background: var(--danger-bg);  color: var(--danger-fg); }
.pill-info    { background: var(--info-bg);    color: var(--info-fg); }
.pill-neutral { background: var(--bg-muted);   color: var(--text-muted); }
.pill svg { width: 14px; height: 14px; }

/* ============================================================================
   9. Layout auth (login, ativar, redefinir)
   ========================================================================== */
.auth {
	min-height: 100vh;
	display: grid;
	grid-template-columns: 45% 55%;
}
.auth-hero {
	background: linear-gradient(135deg, var(--cor-primaria), var(--cor-secundaria));
	color: #fff;
	padding: var(--space-12) var(--space-10);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	overflow: hidden;
}
.auth-hero::before {
	content: '';
	position: absolute;
	top: 30%;
	right: -8%;
	width: 70%;
	height: 70%;
	background: radial-gradient(circle, rgba(255,255,255,.15), transparent 70%);
	pointer-events: none;
}
.auth-brand {
	font-size: var(--font-size-2xl);
	font-weight: 700;
	letter-spacing: -.02em;
	text-align: center;
	margin-top: var(--space-8);
	width: 100%;
}
.auth-brand-logo {
	display: block;
	width: min(92%, 380px);
	max-width: 380px;
	max-height: 120px;
	height: auto;
	margin: 0 auto;
	object-fit: contain;
	object-position: center;
}
.auth-brand-tag {
	font-size: var(--font-size-xs);
	letter-spacing: .2em;
	opacity: .8;
	text-transform: uppercase;
	margin-bottom: var(--space-2);
}
.auth-hero-content {
	text-align: center;
	max-width: 360px;
	margin: 0 auto;
}
.auth-hero-content h1 {
	color: #fff;
	font-size: var(--font-size-3xl);
	margin-bottom: var(--space-3);
}
.auth-hero-content p { color: rgba(255,255,255,.85); font-size: var(--font-size-base); line-height: 1.6; }
.auth-hero-footer {
	font-size: var(--font-size-xs);
	color: rgba(255,255,255,.7);
	text-align: center;
}

.auth-panel {
	background: var(--bg-surface);
	padding: var(--space-12) var(--space-10);
	display: flex;
	align-items: center;
	justify-content: center;
}
.auth-form {
	width: 100%;
	max-width: 380px;
}
.auth-form h2 {
	font-size: var(--font-size-2xl);
	margin-bottom: var(--space-2);
	text-align: center;
}
.auth-form .auth-subtitle {
	color: var(--text-muted);
	text-align: center;
	margin-bottom: var(--space-8);
	font-size: var(--font-size-sm);
}

.auth-footer-text {
	text-align: center;
	margin-top: var(--space-6);
	font-size: var(--font-size-sm);
	color: var(--text-muted);
}
.auth-footer-text a { color: var(--cor-primaria); font-weight: 500; }

/* Responsive: empilha em mobile */
@media (max-width: 860px) {
	.auth { grid-template-columns: 1fr; min-height: auto; }
	.auth-hero {
		padding: var(--space-8) var(--space-6);
		min-height: 240px;
	}
	.auth-hero-content { max-width: 100%; }
	.auth-hero-content h1 { font-size: var(--font-size-2xl); }
	.auth-panel { padding: var(--space-8) var(--space-5); }
}

/* ============================================================================
   10. Alert
   ========================================================================== */
.alert {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
	border: 1px solid var(--border);
	font-size: var(--font-size-sm);
	margin-bottom: var(--space-4);
}
.alert-success { background: var(--success-bg); color: var(--success-fg); border-color: transparent; }
.alert-warning { background: var(--warning-bg); color: var(--warning-fg); border-color: transparent; }
.alert-danger  { background: var(--danger-bg);  color: var(--danger-fg);  border-color: transparent; }
.alert-info    { background: var(--info-bg);    color: var(--info-fg);    border-color: transparent; }
.alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }

/* ============================================================================
   11. Utilitários
   ========================================================================== */
.center { text-align: center; }
.mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-8); }
.mb-1 { margin-bottom: var(--space-1); } .mb-2 { margin-bottom: var(--space-2); } .mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); } .mb-6 { margin-bottom: var(--space-6); } .mb-8 { margin-bottom: var(--space-8); }
.gap-2 { gap: var(--space-2); } .gap-4 { gap: var(--space-4); }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.w-full { width: 100%; }
.hidden { display: none !important; }

/* Skeleton loader */
.skel {
	background: linear-gradient(90deg, var(--bg-muted) 25%, var(--border) 50%, var(--bg-muted) 75%);
	background-size: 200% 100%;
	animation: skel-shimmer 1.5s infinite linear;
	border-radius: var(--radius-sm);
	height: 1em;
}
@keyframes skel-shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================================
   12. Layout app — fallback mínimo (sidebar + main)
   Garante menu lateral mesmo se portal-app.css não carregar.
   ========================================================================== */
.app-shell {
	display: flex;
	align-items: stretch;
	width: 100%;
	min-height: 100vh;
}
.app-sidebar {
	flex: 0 0 260px;
	width: 260px;
	display: flex;
	flex-direction: column;
	background: var(--bg-elev);
	border-right: 1px solid var(--border);
}
.app-main {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
}
.app-nav { list-style: none; }