/* OBRAX · calculadora (aplicación) */
.app{background:#f3f2ef}

/* Cabecera de la app */
.app-head{position:sticky;top:0;z-index:60;background:#111;color:#fff;border-bottom:1px solid #222}
.app-head .wrap{display:flex;align-items:center;gap:28px;height:60px}
.app-head .brand img{height:20px;width:auto}
.app-nav{display:flex;gap:4px;margin-right:auto}
.app-nav a{color:rgba(255,255,255,.7);text-decoration:none;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:8px 12px;border-radius:6px}
.app-nav a:hover{color:#fff;background:#1d1d1d}
.app-nav a[aria-current=page]{color:#fff;box-shadow:inset 0 -2px 0 var(--orange);border-radius:0}
.app-head .user{display:flex;align-items:center;gap:10px}
.app-head .user span#user-email{color:rgba(255,255,255,.7);font-size:.8rem;max-width:28vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.avatar{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--orange);color:#fff;font-weight:800;font-size:.8rem;flex:none}
.btn-sm{min-height:34px;padding:0 12px;font-size:.72rem;border-color:#3a3a3a;color:#fff}
.btn-sm:hover{background:#fff;color:#111;border-color:#fff}
@media (max-width:640px){
  .app-head .wrap{gap:12px}
  .app-head .user span#user-email{display:none}
  .app-nav a{padding:8px 8px;font-size:.72rem}
}

/* Banda de título */
.app-band{background:#111 radial-gradient(1200px 300px at 85% 0%,rgba(255,98,0,.22),transparent 60%);color:#fff;padding:28px 0 64px}
.app-band .app-title{padding:0 var(--gut);display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px}
.app-band h1{font-size:clamp(1.9rem,4.4vw,3rem);margin-top:10px}
.app-band .modo{background:#1b1b1b;border-color:#3a3a3a}
.app-band .modo button{color:rgba(255,255,255,.75)}
.app-band .modo button[aria-checked=true]{color:#fff}
.app-band .modo[data-modo=completo] .modo-knob{background:#fff}
.app-band .modo[data-modo=completo] button[data-modo=completo]{color:#111}
.app main>.wrap,.app #app-view>.wrap{margin-top:-40px;position:relative}

/* Paneles */
.app .panel{border:1px solid #e7e4df;box-shadow:0 1px 2px rgba(0,0,0,.04),0 6px 20px rgba(0,0,0,.05)}
.app .panel-title h2{display:flex;align-items:center}
.app .verdict{box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 30px rgba(0,0,0,.07)}
.app .sim-wrap,.app .table-wrap{box-shadow:0 1px 2px rgba(0,0,0,.04),0 6px 20px rgba(0,0,0,.05)}
.app .empty{min-height:420px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M32 0H0v32' fill='none' stroke='%23f0ede8'/%3E%3C/svg%3E")}
.app .layout{padding-bottom:56px}
.app .form-col{top:76px}
.app .disclaimer{border-top:1px solid #e2dfda;padding:20px 0 40px;margin-top:0}

/* Formularios: mejor en pantallas táctiles */
@media (max-width:640px){
  .app-band{padding:20px 0 56px}
  .app .panel{padding:16px;border-radius:14px}
  .row{gap:10px}
  .ctrl input,.ctrl select{height:48px;font-size:16px}
  .kpi b{font-size:1.1rem}
  .verdict{padding:16px}
  .verdict h2{font-size:1.35rem}
  .reco{flex-direction:column;align-items:stretch}
  .reco .btn{width:100%}
  .sim-wrap{padding:10px}
  .list-head{flex-direction:column;align-items:flex-start}
}
@media (max-width:360px){.row{grid-template-columns:1fr}.modo{min-width:0}}

/* Acceso: dividido con imagen */
.app .login{display:grid;place-items:stretch;grid-template-columns:1.1fr 1fr;min-height:calc(100vh - 60px);padding:0}
.login-art{position:relative;overflow:hidden;background:#111;isolation:isolate}
.login-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.login-art::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(10,10,10,.9),rgba(10,10,10,.15) 60%)}
.login-art-txt{position:absolute;left:clamp(24px,5vw,56px);right:clamp(24px,5vw,56px);bottom:clamp(24px,5vw,56px);color:#fff}
.login-art-txt p{font-size:clamp(1.1rem,2vw,1.5rem);font-stretch:112%;font-weight:700;line-height:1.25;margin:12px 0 0;max-width:26ch}
.app .login-card{align-self:center;justify-self:center;width:100%;max-width:420px;border:0;background:transparent;padding:40px clamp(20px,5vw,48px)}
.app .login-card h1{font-size:2rem}
@media (max-width:860px){
  .app .login{grid-template-columns:1fr;min-height:0}
  .login-art{height:220px}
  .login-art-txt p{font-size:1.05rem}
  .app .login-card{padding:28px var(--gut) 48px}
}
@media (max-width:420px){.app-nav a[aria-current]{display:none}.app-head .brand img{height:16px}.app-head .wrap{gap:8px}}