/* =====================================================================
   ARMOR brand layer (phase2-20261007)
   Restyle only: colors, typography, spacing, radius, responsive layout.
   It never hides elements (no display:none / visibility rules) so every
   button, link, form and control on the page keeps working as before.
   Scoped with html[data-armor-page] so it out-ranks Tailwind CDN utilities.
   Palette = armorsecurity.ai: navy #061528/#0A2540, cyan #4EE8FF,
   blue #1A7CFF, gold #D4AF6A.  Fonts: Montserrat (titles) + Inter (text).
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Montserrat:wght@600;700;800&display=swap');

html[data-armor-page] {
  --armor-navy-0: #040b17; --armor-navy: #061528; --armor-navy-2: #0a2540;
  --armor-card: #0b1d33; --armor-card-2: #0e2440; --armor-line: rgba(120, 180, 255, .12);
  --armor-cyan: #4ee8ff; --armor-blue: #1a7cff; --armor-blue-2: #0560e0; --armor-gold: #d4af6a;
  --armor-text: #eaf3ff; --armor-muted: #9db2cc; --armor-faint: #6b829e;
  --armor-radius: 14px;
  -webkit-text-size-adjust: 100%;
}
html[data-armor-page] body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; letter-spacing: -0.003em;
}
html[data-armor-page] h1, html[data-armor-page] h2, html[data-armor-page] h3 {
  font-family: 'Montserrat', 'Inter', system-ui, sans-serif; letter-spacing: -0.01em;
}
html[data-armor-page] ::selection { background: rgba(78, 232, 255, .28); color: #fff; }
html[data-armor-page] :focus-visible { outline: 2px solid var(--armor-cyan); outline-offset: 2px; }
html[data-armor-page] button, html[data-armor-page] a, html[data-armor-page] input,
html[data-armor-page] select, html[data-armor-page] textarea { transition: background-color .18s, border-color .18s, box-shadow .18s, color .18s, transform .18s; }
html[data-armor-page] img[src*="armor-logo"] { filter: drop-shadow(0 0 10px rgba(78, 232, 255, .35)); }

/* ---------- auth pages: /login /register ---------- */
html[data-armor-page="auth"] body {
  background: radial-gradient(1200px 600px at 85% -10%, rgba(26,124,255,.35), transparent 60%),
              radial-gradient(900px 500px at -10% 110%, rgba(78,232,255,.12), transparent 60%),
              linear-gradient(160deg, #061528 0%, #0a2540 55%, #062a63 100%) !important;
}
html[data-armor-page="auth"] body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(rgba(120,180,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(120,180,255,.06) 1px, transparent 1px);
  background-size: 56px 56px; mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 75%);
}
html[data-armor-page="auth"] body > * { position: relative; z-index: 1; }
html[data-armor-page="auth"] img[src*="armor-logo"] { width: 3.75rem; height: 4.25rem; }
html[data-armor-page="auth"] h1 { font-family: 'Montserrat', sans-serif; font-weight: 800; letter-spacing: .14em; }
html[data-armor-page="auth"] p.text-blue-200 { color: var(--armor-cyan) !important; opacity: .85; letter-spacing: .28em; }
html[data-armor-page="auth"] .bg-white {
  background: linear-gradient(180deg, rgba(14,36,64,.92), rgba(8,26,48,.92)) !important;
  border: 1px solid rgba(78,232,255,.16); border-radius: 20px !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05) !important;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
html[data-armor-page="auth"] .bg-white h2 { color: #fff !important; font-weight: 700; }
html[data-armor-page="auth"] .text-gray-800, html[data-armor-page="auth"] .text-gray-700 { color: var(--armor-text) !important; }
html[data-armor-page="auth"] .text-gray-500, html[data-armor-page="auth"] .text-gray-600 { color: var(--armor-muted) !important; }
html[data-armor-page="auth"] label { font-weight: 600 !important; letter-spacing: .01em; }
html[data-armor-page="auth"] input, html[data-armor-page="auth"] select, html[data-armor-page="auth"] textarea {
  background: rgba(4,11,23,.55) !important; color: #fff !important;
  border: 1px solid rgba(120,180,255,.22) !important; border-radius: 12px !important;
}
html[data-armor-page="auth"] input::placeholder { color: #6b829e !important; }
html[data-armor-page="auth"] input:focus, html[data-armor-page="auth"] select:focus {
  border-color: var(--armor-cyan) !important; box-shadow: 0 0 0 3px rgba(78,232,255,.18) !important; outline: none;
}
html[data-armor-page="auth"] select option { background: #0b1d33; color: #fff; }
html[data-armor-page="auth"] button[type="submit"], html[data-armor-page="auth"] .bg-blue-600 {
  background: linear-gradient(90deg, #4ee8ff 0%, #2bb8cc 100%) !important; color: #041427 !important;
  font-weight: 700 !important; letter-spacing: .02em; border-radius: 12px !important;
  box-shadow: 0 10px 28px rgba(78,232,255,.25);
}
html[data-armor-page="auth"] button[type="submit"]:hover { transform: translateY(-1px); box-shadow: 0 14px 34px rgba(78,232,255,.35); }
html[data-armor-page="auth"] .text-blue-600 { color: var(--armor-cyan) !important; }
html[data-armor-page="auth"] .bg-red-50 { background: rgba(244,63,94,.12) !important; border-color: rgba(244,63,94,.35) !important; color: #fda4af !important; }
html[data-armor-page="auth"] .bg-green-50 { background: rgba(52,211,153,.12) !important; border-color: rgba(52,211,153,.35) !important; color: #6ee7b7 !important; }
html[data-armor-page="auth"] a.text-blue-200 { color: var(--armor-muted) !important; }
html[data-armor-page="auth"] a.text-blue-200:hover { color: #fff !important; }
@media (max-width: 480px) {
  html[data-armor-page="auth"] .bg-white { padding: 1.5rem !important; border-radius: 18px !important; }
  html[data-armor-page="auth"] input, html[data-armor-page="auth"] select { font-size: 16px !important; } /* no iOS zoom */
}

/* ---------- portals (super admin / admin / presidente / residente) ---------- */
html[data-armor-portal] body { background-color: var(--armor-navy) !important; color: var(--armor-text); }
html[data-armor-portal] main { background:
  radial-gradient(900px 420px at 100% 0%, rgba(26,124,255,.10), transparent 60%), transparent; }
/* sidebars */
html[data-armor-portal] aside, html[data-armor-portal] .sidebar-bg, html[data-armor-portal] .sidebar-dark {
  background: linear-gradient(180deg, #0a2540 0%, #061528 100%) !important;
  border-right: 1px solid var(--armor-line) !important;
}
html[data-armor-portal] .sidebar-item { border-radius: 10px; margin: 2px 10px; padding-left: 14px !important; }
html[data-armor-portal] .sidebar-item:hover { background: rgba(78,232,255,.07) !important; }
html[data-armor-portal] .sidebar-item.active, html[data-armor-portal] .sidebar-item-active {
  background: linear-gradient(90deg, rgba(78,232,255,.16), rgba(26,124,255,.06)) !important;
  border-left: 0 !important; box-shadow: inset 3px 0 0 var(--armor-cyan); color: #fff !important;
}
/* cards & surfaces */
html[data-armor-portal] .card-dark, html[data-armor-portal] .stat-card,
html[data-armor-portal] .bg-slate-800.rounded-xl, html[data-armor-portal] .bg-gray-800.rounded-xl,
html[data-armor-portal] .bg-slate-800.rounded-lg, html[data-armor-portal] .bg-gray-800.rounded-lg,
html[data-armor-portal] .rounded-xl.bg-white {
  background: linear-gradient(180deg, rgba(14,36,64,.85), rgba(11,29,51,.85)) !important;
  border-color: var(--armor-line) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.25) !important;
}
html[data-armor-portal] .card-dark, html[data-armor-portal] .stat-card { border: 1px solid var(--armor-line) !important; border-radius: var(--armor-radius) !important; }
html[data-armor-portal] .stat-card:hover, html[data-armor-portal] .card-dark:hover { border-color: rgba(78,232,255,.28) !important; }
html[data-armor-portal] .gradient-header, html[data-armor-portal] header {
  background: rgba(6,21,40,.88) !important; border-bottom: 1px solid var(--armor-line) !important;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
html[data-armor-portal] header h1, html[data-armor-portal] header h2 { font-family: 'Montserrat', sans-serif; font-weight: 700; letter-spacing: .01em; }
/* typography rhythm */
html[data-armor-portal] .text-2xl, html[data-armor-portal] .text-3xl, html[data-armor-portal] .text-5xl { font-family: 'Montserrat', 'Inter', sans-serif; letter-spacing: -.01em; }
html[data-armor-portal] .table-header, html[data-armor-portal] thead th {
  text-transform: uppercase; letter-spacing: .08em; font-size: 11px !important; color: var(--armor-muted) !important;
}
html[data-armor-portal] tbody tr:hover, html[data-armor-portal] .table-row:hover { background: rgba(78,232,255,.04) !important; }
/* buttons */
html[data-armor-portal] button.bg-blue-600, html[data-armor-portal] a.bg-blue-600,
html[data-armor-portal] button.bg-cyan-600, html[data-armor-portal] a.bg-cyan-600,
html[data-armor-portal] button.bg-blue-500, html[data-armor-portal] a.bg-blue-500 {
  background: linear-gradient(90deg, #1a7cff, #0560e0) !important; color: #fff !important;
  box-shadow: 0 6px 18px rgba(26,124,255,.28);
}
html[data-armor-portal] button.bg-blue-600:hover, html[data-armor-portal] button.bg-cyan-600:hover { filter: brightness(1.08); transform: translateY(-1px); }
/* form controls */
html[data-armor-portal] input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
html[data-armor-portal] select, html[data-armor-portal] textarea {
  background-color: rgba(4,11,23,.55) !important; color: var(--armor-text) !important;
  border: 1px solid rgba(120,180,255,.20) !important; border-radius: 10px !important;
}
html[data-armor-portal] input::placeholder, html[data-armor-portal] textarea::placeholder { color: var(--armor-faint) !important; }
html[data-armor-portal] input:focus, html[data-armor-portal] select:focus, html[data-armor-portal] textarea:focus {
  border-color: var(--armor-cyan) !important; box-shadow: 0 0 0 3px rgba(78,232,255,.15) !important; outline: none !important;
}
html[data-armor-portal] select option { background: #0b1d33; color: #fff; }
/* accent recolor: blue/cyan text → brand cyan */
html[data-armor-portal] .text-cyan-400, html[data-armor-portal] .text-blue-400 { color: var(--armor-cyan) !important; }
/* modals */
html[data-armor-portal] .modal-backdrop, html[data-armor-portal] .armor-modal-overlay { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
html[data-armor-portal] .armor-modal, html[data-armor-portal] .armor-wizard-card { border: 1px solid var(--armor-line); border-radius: 18px !important; }
/* scrollbars */
html[data-armor-portal] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-armor-portal] ::-webkit-scrollbar-thumb { background: #1c3b5e; border-radius: 8px; border: 2px solid #061528; }
html[data-armor-portal] ::-webkit-scrollbar-track { background: transparent; }

/* super admin: sidebar stacks on phones/tablets instead of squeezing the content */
@media (max-width: 1023px) {
  html[data-armor-portal="super_admin"] body > .flex.min-h-screen { flex-direction: column; }
  html[data-armor-portal="super_admin"] aside.sidebar-bg { width: 100% !important; border-right: 0 !important; border-bottom: 1px solid var(--armor-line) !important; }
  html[data-armor-portal="super_admin"] aside.sidebar-bg > div:first-child { padding: 14px 16px !important; }
  html[data-armor-portal="super_admin"] aside.sidebar-bg nav { display: flex; flex-direction: row; overflow-x: auto; padding: 6px 8px !important; gap: 4px; -webkit-overflow-scrolling: touch; }
  html[data-armor-portal="super_admin"] aside.sidebar-bg nav .sidebar-item { white-space: nowrap; margin: 0 !important; padding: 10px 14px !important; flex: 0 0 auto; }
  html[data-armor-portal="super_admin"] aside.sidebar-bg > div:last-child { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px !important; }
  html[data-armor-portal="super_admin"] aside.sidebar-bg > div:last-child #userInfo { margin: 0 !important; }
  html[data-armor-portal="super_admin"] aside.sidebar-bg > div:last-child button { width: auto !important; }
  html[data-armor-portal="super_admin"] main { padding: 16px !important; }
}
/* general mobile polish for portals */
@media (max-width: 640px) {
  html[data-armor-portal] main { padding-left: 14px !important; padding-right: 14px !important; }
  html[data-armor-portal] header h1 { font-size: 1rem !important; line-height: 1.25; }
  html[data-armor-portal] .text-5xl { font-size: 2.25rem !important; }
  html[data-armor-portal] input, html[data-armor-portal] select, html[data-armor-portal] textarea { font-size: 16px !important; }
}

/* ---------- presidente portal (was a light theme): brand dark layer ---------- */
html[data-armor-portal="presidente"] body, html[data-armor-portal="presidente"] .bg-gray-50, html[data-armor-portal="presidente"] .bg-gray-100 { background-color: var(--armor-navy) !important; }
html[data-armor-portal="presidente"] .bg-white { background-color: var(--armor-card) !important; border-color: var(--armor-line) !important; }
html[data-armor-portal="presidente"] header.bg-white { background: rgba(6,21,40,.9) !important; }
html[data-armor-portal="presidente"] .text-gray-900, html[data-armor-portal="presidente"] .text-gray-800, html[data-armor-portal="presidente"] .text-gray-700 { color: var(--armor-text) !important; }
html[data-armor-portal="presidente"] .text-gray-600, html[data-armor-portal="presidente"] .text-gray-500 { color: var(--armor-muted) !important; }
html[data-armor-portal="presidente"] .text-gray-400 { color: var(--armor-faint) !important; }
html[data-armor-portal="presidente"] .border-gray-200, html[data-armor-portal="presidente"] .border-gray-100, html[data-armor-portal="presidente"] .border-gray-300, html[data-armor-portal="presidente"] .border { border-color: var(--armor-line) !important; }
html[data-armor-portal="presidente"] .stat-card { padding: 16px 18px; }
html[data-armor-portal="presidente"] .tab-btn { color: var(--armor-muted) !important; border-radius: 10px !important; }
html[data-armor-portal="presidente"] .tab-btn:hover { color: #fff !important; background: rgba(78,232,255,.07) !important; }
html[data-armor-portal="presidente"] .tab-btn.active { background: linear-gradient(90deg, #1a7cff, #0560e0) !important; color: #fff !important; box-shadow: 0 6px 18px rgba(26,124,255,.28); }
html[data-armor-portal="presidente"] .access-row { border-color: var(--armor-line) !important; }
html[data-armor-portal="presidente"] .btn-green { background: rgba(52,211,153,.14) !important; color: #6ee7b7 !important; }
html[data-armor-portal="presidente"] .btn-red { background: rgba(244,63,94,.14) !important; color: #fda4af !important; }
html[data-armor-portal="presidente"] .btn-blue { background: rgba(26,124,255,.16) !important; color: #93c5fd !important; }
html[data-armor-portal="presidente"] .bg-green-100 { background: rgba(52,211,153,.14) !important; }
html[data-armor-portal="presidente"] .bg-amber-100 { background: rgba(245,181,68,.14) !important; }
html[data-armor-portal="presidente"] .bg-red-100 { background: rgba(244,63,94,.14) !important; }
html[data-armor-portal="presidente"] .text-green-700, html[data-armor-portal="presidente"] .text-green-600 { color: #6ee7b7 !important; }
html[data-armor-portal="presidente"] .text-amber-700, html[data-armor-portal="presidente"] .text-amber-600 { color: #fcd34d !important; }
html[data-armor-portal="presidente"] .text-red-700, html[data-armor-portal="presidente"] .text-red-600 { color: #fda4af !important; }
html[data-armor-portal="presidente"] .text-armor-600 { color: var(--armor-cyan) !important; }
html[data-armor-portal="presidente"] #loginScreen { background: linear-gradient(160deg, #061528 0%, #0a2540 55%, #062a63 100%) !important; }
html[data-armor-portal="presidente"] #loginScreen .bg-white { border: 1px solid rgba(78,232,255,.16) !important; border-radius: 20px !important; }

/* ---------- landing (light touch, it is already on-brand) ---------- */
html[data-armor-page="landing"] #nav img[src*="armor-logo"] { filter: drop-shadow(0 0 12px rgba(78,232,255,.45)); }
html[data-armor-page="landing"] section { scroll-margin-top: 80px; }
@media (max-width: 640px) {
  html[data-armor-page="landing"] h1 { letter-spacing: -0.02em; line-height: 1.05; }
  html[data-armor-page="landing"] section { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
}