/* =========================================================
   Sistema de Check-in — Alojamento
   Paleta: navy corporativo + âmbar (CTA) sobre fundo claro
   ========================================================= */

:root{
  --primary:#1E3A5F;
  --primary-dark:#142943;
  --primary-soft:#E7EDF5;
  --accent:#F2A93B;
  --accent-dark:#D6900F;
  --bg:#F5F7FA;
  --card:#FFFFFF;
  --ink:#1B2430;
  --ink-dim:#6B7686;
  --line:#E3E8EF;
  --success:#1E9E6B;
  --success-bg:#E9F8F1;
  --error:#D64545;
  --error-bg:#FDECEC;
  --warn:#B9770E;
  --warn-bg:#FDF3E1;
  --radius:16px;
  --radius-sm:10px;
  --shadow: 0 10px 30px -12px rgba(20,41,67,.18);
}

*{box-sizing:border-box;}
html,body{margin:0; padding:0;}
body{
  background:
    radial-gradient(1100px 480px at 50% -10%, var(--primary-soft), transparent 60%),
    var(--bg);
  color:var(--ink);
  font-family:'Inter', system-ui, sans-serif;
  min-height:100vh;
}
h1,h2{font-family:'Sora', sans-serif;}

.page{
  max-width:520px;
  margin:0 auto;
  padding:32px 20px 60px;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.topbar{display:flex; align-items:center; gap:14px; margin-bottom:28px;}
.logo-mark{
  width:46px; height:46px; border-radius:12px; flex-shrink:0;
  background:linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow);
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.logo-mark img{
  width:100%; height:100%; object-fit:contain;
}
.brand-copy .eyebrow{
  display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--primary); font-weight:700; margin-bottom:2px;
}
.brand-copy h1{margin:0; font-size:21px; font-weight:800; color:var(--ink);}

.container{flex:1; display:flex; flex-direction:column; gap:16px;}
.lede{color:var(--ink-dim); font-size:14.5px; line-height:1.5; margin:0 0 4px;}

.card{
  background:var(--card);
  border-radius:var(--radius);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  padding:22px;
  animation:riseIn .35s ease both;
}
@keyframes riseIn{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }

.search-card label{
  display:block; font-size:12.5px; font-weight:600; color:var(--ink-dim);
  margin-bottom:8px; text-transform:uppercase; letter-spacing:.05em;
}
.input-row{display:flex; gap:10px;}
.input-row input{
  flex:1; min-width:0;
  border:1.5px solid var(--line); border-radius:var(--radius-sm);
  padding:13px 14px; font-size:15px; font-family:inherit; color:var(--ink);
  background:#FCFDFE; transition:border-color .15s, box-shadow .15s;
}
.input-row input:focus{
  outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(30,58,95,.12);
}

.btn{
  border:none; border-radius:var(--radius-sm); cursor:pointer;
  font-family:inherit; font-weight:700; font-size:14.5px;
  padding:13px 20px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:transform .12s ease, filter .15s ease, opacity .15s ease;
}
.btn:active{transform:scale(.97);}
.btn:disabled{opacity:.6; cursor:not-allowed; transform:none;}
.btn-block{width:100%; margin-top:16px;}
.btn-primary{background:var(--primary); color:#fff;}
.btn-primary:hover:not(:disabled){filter:brightness(1.08);}
.btn-accent{background:var(--accent); color:#231400;}
.btn-accent:hover:not(:disabled){filter:brightness(1.05);}
.btn-ghost{background:var(--primary-soft); color:var(--primary);}
.btn-ghost:hover:not(:disabled){filter:brightness(.97);}

.btn.is-loading .btn-label{visibility:hidden;}
.btn.is-loading{position:relative;}
.btn.is-loading::after{
  content:''; position:absolute; width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.5); border-top-color:#fff;
  animation:spin .7s linear infinite;
}
.btn-ghost.is-loading::after{border:2px solid rgba(30,58,95,.3); border-top-color:var(--primary);}

.state{
  background:var(--card); border-radius:var(--radius); border:1px solid var(--line);
  box-shadow:var(--shadow); padding:26px 22px; text-align:center;
  animation:riseIn .35s ease both;
}
.state-loading{display:flex; flex-direction:column; align-items:center; gap:12px; color:var(--ink-dim); font-size:14px;}
.spinner{
  width:30px; height:30px; border-radius:50%;
  border:3px solid var(--line); border-top-color:var(--primary);
  animation:spin .8s linear infinite;
}
@keyframes spin{ to{transform:rotate(360deg);} }

.state-icon{
  width:52px; height:52px; border-radius:50%; margin:0 auto 12px;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; font-weight:800; font-family:'Sora', sans-serif;
}
.icon-error{background:var(--error-bg); color:var(--error);}
.icon-success{background:var(--success-bg); color:var(--success);}
.icon-warn{background:var(--warn-bg); color:var(--warn);}

.state-error p{color:var(--ink); font-size:14.5px; margin:0 0 4px;}
.state-warn p{color:var(--ink); font-size:15px; margin:0;}
.state-success h2{font-size:18px; margin:0 0 16px; color:var(--success);}

.card-eyebrow{
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
  color:var(--primary); margin-bottom:14px;
}
.employee-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:14px 16px;
  margin:0 0 4px; text-align:left;
}
.employee-grid dt{font-size:11px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.05em; margin-bottom:2px;}
.employee-grid dd{margin:0; font-size:14.5px; font-weight:600; color:var(--ink); word-break:break-word;}

.footer{text-align:center; color:var(--ink-dim); font-size:12px; margin-top:auto; padding-top:36px;}

@media (max-width:480px){
  .page{padding:22px 16px 40px;}
  .input-row{flex-direction:column;}
  .employee-grid{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important;}
}

.section-label{
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  color:var(--ink-dim); margin:20px 0 10px;
}
.employee-grid-compact{grid-template-columns:1fr 1fr; margin-bottom:4px;}

.lodging-list{display:flex; flex-direction:column; gap:10px; margin-bottom:6px;}
.lodging-form{width:100%;}
.lodging-option{
  display:flex; align-items:center; gap:12px;
  border:1.5px solid var(--line); border-radius:var(--radius-sm);
  padding:14px 16px; cursor:pointer; background:#FCFDFE;
  transition:border-color .15s, box-shadow .15s, opacity .15s;
}
.lodging-option:hover{border-color:var(--primary);}
.lodging-option.selected{
  border-color:var(--primary); box-shadow:0 0 0 3px rgba(30,58,95,.12); background:var(--primary-soft);
}
.lodging-option.disabled{
  opacity:.5; cursor:not-allowed; background:#F3F4F6;
}
.lodging-radio{
  width:18px; height:18px; border-radius:50%; border:2px solid var(--line);
  flex-shrink:0; position:relative;
}
.lodging-option.selected .lodging-radio{border-color:var(--primary);}
.lodging-option.selected .lodging-radio::after{
  content:''; position:absolute; inset:3px; border-radius:50%; background:var(--primary);
}
.lodging-info{flex:1; min-width:0;}
.lodging-name{font-weight:700; font-size:14.5px; color:var(--ink);}
.lodging-address{font-size:12.5px; color:var(--ink-dim); margin-top:2px;}
.lodging-beds{
  font-size:12px; font-weight:700; padding:4px 10px; border-radius:20px; white-space:nowrap; flex-shrink:0;
}
.lodging-beds.available{background:var(--success-bg); color:var(--success);}
.lodging-beds.full{background:var(--error-bg); color:var(--error);}
.lodging-option.readonly{cursor:default;}
.lodging-option.readonly:hover{border-color:var(--line);}
.selector-button{width:100%; text-align:left;}
.lodging-empty{color:var(--ink-dim); font-size:13.5px; text-align:center; padding:16px;}
.confirmation-modal{display:none; position:fixed; inset:0; z-index:20; align-items:center; justify-content:center; padding:20px;}
.confirmation-modal.is-open{display:flex;}
.confirmation-backdrop{position:absolute; inset:0; background:rgba(20,41,67,.32); backdrop-filter:blur(2px);}
.confirmation-dialog{position:relative; width:min(100%, 420px); padding:26px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 18px 55px -20px rgba(20,41,67,.45); animation:modalIn .18s ease both;}
@keyframes modalIn{from{opacity:0; transform:translateY(6px) scale(.98);}to{opacity:1; transform:none;}}
.confirmation-icon{width:38px; height:38px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; border-radius:50%; background:var(--primary-soft); color:var(--primary); font:700 18px 'Sora', sans-serif;}
.confirmation-dialog h2{margin:0 0 8px; font-size:20px; color:var(--ink);}
.confirmation-dialog p{margin:0 0 12px; color:var(--ink-dim); font-size:13.5px;}
.confirmation-lodging{display:flex; flex-direction:column; gap:3px; padding:12px 14px; margin-bottom:20px; border:1px solid var(--line); border-radius:var(--radius-sm); background:#FCFDFE;}
.confirmation-lodging strong{font-size:14px; color:var(--ink);}
.confirmation-lodging span{font-size:12.5px; color:var(--ink-dim);}
.confirmation-actions{display:flex; justify-content:flex-end; gap:8px;}

.admin-page{max-width:1180px; padding-left:32px; padding-right:32px;}
.admin-nav{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:7px; margin:0 0 28px; background:rgba(255,255,255,.78); border:1px solid var(--line); border-radius:14px; box-shadow:0 6px 20px -14px rgba(20,41,67,.35);}
.admin-nav-links,.admin-nav-tools{display:flex; align-items:center; gap:4px;}
.admin-nav-link,.admin-nav-public,.admin-nav-logout{display:inline-flex; align-items:center; justify-content:center; min-height:34px; padding:7px 12px; border:0; border-radius:8px; color:var(--ink-dim); background:transparent; font:600 12px 'Inter', sans-serif; text-decoration:none; white-space:nowrap; cursor:pointer; transition:background .15s ease, color .15s ease;}
.admin-nav-link:hover,.admin-nav-public:hover{color:var(--primary); background:var(--primary-soft);}
.admin-nav-link.active{color:var(--primary); background:var(--primary-soft); box-shadow:inset 0 -2px 0 var(--accent);}
.admin-nav-public{font-weight:500;}
.admin-nav-logout{color:var(--error); font-weight:700;}
.admin-nav-logout:hover{background:var(--error-bg);}
.admin-stats{display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:10px;}
.stat-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow); padding:15px 14px;}
.stat-card span{display:block; color:var(--ink-dim); font-size:10.5px; line-height:1.3; text-transform:uppercase; letter-spacing:.04em;}
.stat-card strong{display:block; color:var(--primary); font-family:'Sora', sans-serif; font-size:24px; margin-top:8px;}
.admin-toolbar{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px;}
.login-page{max-width:520px;}
.login-container{justify-content:center;}
.login-card{max-width:480px; width:100%; margin:0 auto;}
.password-card{width:100%; max-width:560px; margin:0 auto;}
.login-title{font-family:'Sora', sans-serif; font-size:20px; margin:0 0 7px; color:var(--ink);}
.login-description{margin:0 0 20px; color:var(--ink-dim); font-size:13.5px; line-height:1.5;}
.remember-field{display:flex; align-items:center; gap:8px; color:var(--ink-dim); font-size:13px; cursor:pointer;}
.remember-field input{accent-color:var(--primary);}
.admin-toolbar h1{margin:0; font-size:21px; color:var(--ink);}
.admin-toolbar p{margin:4px 0 0; color:var(--ink-dim); font-size:13px;}
.admin-actions{display:flex; gap:8px; flex-shrink:0;}
.admin-table-wrap{overflow-x:auto; margin:0 -2px;}
.admin-table{width:100%; border-collapse:collapse; min-width:680px; text-align:left;}
.admin-table th{padding:12px 14px; color:var(--ink-dim); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; border-bottom:1px solid var(--line);}
.admin-table td{padding:15px 14px; font-size:13.5px; border-bottom:1px solid var(--line); vertical-align:middle;}
.admin-table tbody tr:last-child td{border-bottom:0;}
.admin-table tbody tr:hover{background:#FAFBFD;}
.admin-table .table-title{font-weight:700; color:var(--ink);}
.admin-table .table-muted{font-size:12px; color:var(--ink-dim);}
.table-actions{display:flex; gap:7px; align-items:center;}
.btn-small{padding:8px 11px; font-size:12px;}
.btn-danger{background:var(--error); color:#fff;}
.btn-danger:hover:not(:disabled){filter:brightness(1.08);}
.admin-form{display:flex; flex-direction:column; gap:16px;}
.form-field label{display:block; margin-bottom:7px; color:var(--ink-dim); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;}
.form-field input{width:100%; border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:13px 14px; font:inherit; font-size:14px; color:var(--ink); background:#FCFDFE;}
.form-field input:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(30,58,95,.12);}
.form-error{margin:0; color:var(--error); font-size:13px;}
.admin-empty{padding:28px 16px; text-align:center; color:var(--ink-dim); font-size:14px;}
.flash{padding:13px 16px; border-radius:var(--radius-sm); font-size:13.5px; border:1px solid;}
.flash-success{color:var(--success); background:var(--success-bg); border-color:#B8E8D2;}
.flash-error{color:var(--error); background:var(--error-bg); border-color:#F2BABA;}

@media (max-width:600px){
  .admin-stats{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .admin-toolbar{align-items:flex-start; flex-direction:column;}
  .admin-actions{width:100%;}
  .admin-actions .btn{flex:1;}
  .admin-page .card{padding:18px 16px;}
}

@media (min-width:601px) and (max-width:1000px){
  .admin-page{padding-left:24px; padding-right:24px;}
  .admin-stats{grid-template-columns:repeat(3, minmax(0, 1fr));}
}

@media (max-width:600px){
  .admin-page{padding-left:16px; padding-right:16px;}
  .admin-nav{align-items:stretch; flex-direction:column; gap:5px; padding:6px; margin-bottom:22px;}
  .admin-nav-links{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));}
  .admin-nav-tools{justify-content:space-between; border-top:1px solid var(--line); padding-top:5px;}
  .admin-nav-link,.admin-nav-public,.admin-nav-logout{padding-left:6px; padding-right:6px; font-size:11px;}
  .admin-actions{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
  .admin-actions form{display:contents;}
  .admin-actions .btn{width:100%; min-width:0; padding-left:10px; padding-right:10px;}
  .admin-table{min-width:680px;}
  .admin-table-wrap{margin-right:-2px; padding-bottom:2px;}
  .confirmation-dialog{padding:22px 18px;}
  .confirmation-actions{display:grid; grid-template-columns:1fr 1fr;}
  .confirmation-actions .btn{width:100%; padding-left:10px; padding-right:10px;}
}
