/* Cabecera de Inicio. Conserva los IDs y estados que actualiza app.js. */
#appView .main > .topbar.home-header-modern {
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:18px; min-height:128px; padding:22px 24px!important;
  margin:0 0 20px; border:1px solid #2b4058!important; border-radius:16px;
  background:linear-gradient(100deg,#060c15f5 8%,#07101ad9 53%,#07101a73),url('assets/canchas-header-noche-20261026.webp') center 52%/cover no-repeat!important;
  box-shadow:inset 0 1px #d0e5ff0b,0 12px 30px #0003;
}
#appView .main > .topbar.home-header-modern::before {content:none!important}
#appView .main > .topbar.home-header-modern::after {
  content:''; position:absolute; inset:auto 20px 0; height:1px;
  background:linear-gradient(90deg,#609bc9a6,#7daed13d 55%,transparent); pointer-events:none;
}
#appView .home-header-modern .greeting {
  display:flex; align-items:center; gap:15px; flex:1 1 320px; min-width:0;
}
#appView .home-header-modern .home-header-mark {
  display:block; flex:0 0 66px; width:66px; height:74px; object-fit:contain;
  filter:drop-shadow(0 4px 8px #0007);
}
#appView .home-header-modern .home-greeting-copy {min-width:0}
#appView .home-header-modern .home-header-eyebrow {
  display:block; margin-bottom:7px; color:#91b7d8;
  font:700 10px/1.2 Inter,ui-sans-serif,sans-serif; letter-spacing:2px;
}
#appView .home-header-modern .greeting h1 {
  margin:0!important; color:#f1f6ff!important;
  font:700 clamp(26px,2.1vw,34px)/1.12 Rajdhani,Inter,ui-sans-serif,sans-serif!important;
  letter-spacing:-.35px!important; overflow-wrap:anywhere; text-wrap:balance;
}
#appView .home-header-modern .greeting p {
  display:flex; align-items:center; gap:7px; margin:9px 0 0;
  color:#a6b8cc!important; font-size:12px!important; line-height:1.4;
}
#appView .home-header-modern .greeting p::before {
  content:''; flex:0 0 13px; width:13px; height:13px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238cabce' stroke-width='1.7' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M7 3v4m10-4v4M3 11h18m-13 4h2m4 0h2'/%3E%3C/svg%3E") center/contain no-repeat;
}
#appView .home-header-modern .top-actions {
  display:grid; grid-template-columns:118px minmax(160px,1fr) 103px 91px;
  align-items:stretch; gap:6px; flex:0 1 560px; width:min(100%,560px); max-width:100%;
  padding:7px; border:1px solid #344b638c; border-radius:14px;
  background:linear-gradient(135deg,#0a1320f0,#080f19e8); box-shadow:0 6px 18px #0003;
}
#appView .home-header-modern :is(.top-operator,.court-operation-status,.clock,.notif) {
  box-sizing:border-box; order:0; min-width:0; min-height:48px; height:auto; margin:0;
  border:1px solid #30435a80; border-radius:9px; background:#101b2a9c;
  box-shadow:none; font-family:Inter,ui-sans-serif,system-ui,sans-serif;
}
#appView .home-header-modern .top-operator {display:flex; align-items:center; gap:8px; padding:7px 9px}
#appView .home-header-modern .top-operator-avatar {
  flex:0 0 30px; width:30px; height:30px; border:1px solid #7396bd80;
  background:linear-gradient(145deg,#385271,#1b2b40); box-shadow:inset 0 1px #d2e8ff1c;
  color:#eef5ff; font-size:12px;
}
#appView .home-header-modern .top-operator > span:last-child {min-width:0; gap:4px}
#appView .home-header-modern .top-operator small {color:#91a6be; font-size:9px}
#appView .home-header-modern .top-operator b {
  display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis;
  color:#eef4fc; font-size:12px; line-height:1.2;
}
#appView .home-header-modern .court-operation-status {
  display:flex; align-items:center; padding:8px 11px; text-align:left;
  color:#b6cbe2; font-size:11px; font-weight:600; line-height:1.45;
  white-space:normal; overflow-wrap:anywhere; transition:border-color .18s,background .18s;
  animation:none;
}
#appView .home-header-modern .court-operation-status.available {border-left:2px solid #789ccc}
#appView .home-header-modern .court-operation-status.mine {border-color:#53977b80; border-left:2px solid #8dd7b2; color:#b5e8ce; background:#132a259c}
#appView .home-header-modern .court-operation-status.busy {border-color:#a58a5680; border-left:2px solid #d7b67c; color:#eed4a6; background:#30281b9c}
#appView .home-header-modern .court-operation-status:hover {transform:none; border-color:#8baed3; background-color:#1b2b40}
#appView .home-header-modern .clock {
  display:grid; grid-template-columns:22px auto; align-content:center; align-items:center;
  column-gap:7px; row-gap:3px; padding:7px 10px;
}
#appView .home-header-modern .clock-ball {display:block; grid-row:span 2; width:22px; height:22px; filter:drop-shadow(0 2px 3px #0005)}
#appView .home-header-modern .clock-ball svg {display:block; width:100%; height:100%}
#appView .home-header-modern .clock-label {color:#91a6be; font-size:9px; line-height:1}
#appView .home-header-modern .clock b {color:#edf4ff; font-size:17px; line-height:1; letter-spacing:.3px; font-variant-numeric:tabular-nums}
#appView .home-header-modern .notif {
  position:relative; display:flex; justify-content:center; align-items:center; gap:7px;
  width:auto; padding:8px; border-color:#9d834746; color:#ead09b; cursor:pointer;
  font-size:11px; transition:background .18s,border-color .18s;
}
#appView .home-header-modern .notif-icon {display:flex; flex:0 0 17px; width:17px; height:19px; color:#ddba75}
#appView .home-header-modern .notif-icon svg {width:100%; height:100%}
#appView .home-header-modern .notif:hover {border-color:#c1a06a; background:#362d1f}
#appView .home-header-modern .notif .badge {
  right:-4px; top:-5px; min-width:19px; width:auto; height:19px; padding:0 4px;
  border:2px solid #101927; background:#e0b66d; color:#21190f; font-size:10px;
}
#appView .home-header-modern .notif.has-operational-alert {
  border-color:#d1a969; background:#3a2e1c; animation:homeHeaderAlertPulse 2.8s ease-in-out infinite;
}
#appView .home-header-modern .notif.attention-pulse {animation:homeHeaderAlertPulse 1.2s ease-in-out 4}
#appView .home-header-modern :is(.court-operation-status,.notif):focus-visible {outline:2px solid #a5c9f7; outline-offset:3px}
#appView .home-header-modern #visualBetaStatus {grid-column:1/-1; margin:0}
@keyframes homeHeaderAlertPulse {50% {box-shadow:inset 0 0 0 1px #edc37a55,0 0 12px #b48a3c26}}
@media(max-width:1100px) {
  #appView .main > .topbar.home-header-modern {gap:16px; padding:18px 20px!important}
  #appView .home-header-modern .greeting {flex-basis:300px}
  #appView .home-header-modern .top-actions {flex-grow:1; width:100%; max-width:none}
}
@media(max-width:620px) {
  #appView .main > .topbar.home-header-modern {min-height:0; gap:16px; padding:16px!important; border-radius:13px; background-position:68% center!important}
  #appView .home-header-modern .greeting {flex:1 1 100%; gap:12px}
  #appView .home-header-modern .home-header-mark {flex-basis:48px; width:48px; height:60px}
  #appView .home-header-modern .home-header-eyebrow {margin-bottom:6px; font-size:9px; letter-spacing:1.5px}
  #appView .home-header-modern .greeting h1 {font-size:27px!important; line-height:1.12!important}
  #appView .home-header-modern .greeting p {margin-top:7px; font-size:11px!important}
  #appView .home-header-modern .top-actions {grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; padding:6px; border-radius:11px}
  #appView .home-header-modern .top-operator {order:1}
  #appView .home-header-modern .clock {display:grid!important; order:2; grid-template-columns:22px auto; justify-content:start}
  #appView .home-header-modern .court-operation-status {order:3; justify-content:flex-start; font-size:11px}
  #appView .home-header-modern .notif {display:flex!important; order:4; font-size:12px}
}
@media(max-width:360px) {
  #appView .main > .topbar.home-header-modern {padding:13px!important}
  #appView .home-header-modern .home-header-mark {flex-basis:40px; width:40px; height:52px}
  #appView .home-header-modern .greeting {gap:9px}
  #appView .home-header-modern .greeting h1 {font-size:24px!important}
}
@media(prefers-reduced-motion:reduce) {
  #appView .home-header-modern :is(.notif,.court-operation-status) {animation:none!important; transition:none}
}