/* velara-flows on the Velara DS v1.5 Apps Kit. Only uses --v-* tokens; never defines one.
   The sign-in card is VPULSE's (styles/vpulse.css, its spec 0008), itself V-Budget Web's. */
.app > .contenido { min-width: 0; display: flex; flex-direction: column; }
main { gap: calc(18rem/16); }
.phead .sub { margin: calc(8rem/16) 0 0; font-size: calc(13rem/16); color: var(--v-text-tertiary); letter-spacing: .02em; max-width: 72ch; }
.phead .r { align-self: flex-start; }
.chip, .chip-env, .tag { font-family: var(--v-font-sans); line-height: 1; }
.chip, .tag { letter-spacing: normal; text-transform: none; }
.top form { margin: 0; display: contents; }
.top .ibtn.salir { color: #F5A39B; }
.top .ibtn svg, .ab svg { width: calc(14rem/16); height: calc(14rem/16); }
.page-title svg { width: calc(22rem/16); height: calc(22rem/16); }
.side .foot img { height: calc(12rem/16); opacity: .5; }

/* Tables inside the kit's grid shell */
.gscroll table { width: 100%; border-collapse: collapse; }
.gscroll th { text-align: left; font: 400 var(--grid-th-fs) var(--v-font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--v-text-tertiary); padding: var(--grid-pad); border-bottom: 1px solid var(--v-border); white-space: nowrap; }
.gscroll td { font-size: var(--grid-fs); padding: var(--grid-pad); border-bottom: 1px solid var(--v-border); vertical-align: top; color: var(--v-text-secondary); }
.gscroll tbody tr:last-child td { border-bottom: 0; }
.gscroll tbody tr:hover td { background: var(--v-surface-hover); }
.gscroll td a { color: var(--v-accent-text); }
.gscroll td.when { font-family: var(--v-font-figures); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Run detail */
.ficha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: calc(14rem/16); align-items: start; }
@container main (max-width: 56rem) { .ficha { grid-template-columns: 1fr; } }
.ficha .card { overflow: hidden; }
dl.kv-lista { margin: 0; padding: calc(14rem/16) calc(16rem/16); display: grid; grid-template-columns: max-content 1fr; gap: calc(8rem/16) calc(16rem/16); font-size: calc(12.5rem/16); }
dl.kv-lista dt { color: var(--v-text-tertiary); }
dl.kv-lista dd { margin: 0; overflow-wrap: anywhere; color: var(--v-text-primary); }
.pre { margin: 0; padding: calc(14rem/16) calc(16rem/16); white-space: pre-wrap; overflow-wrap: anywhere; font: 300 calc(12.5rem/16)/1.6 var(--v-font-sans); color: var(--v-text-secondary); }
.pre a { color: var(--v-accent-text); }
.aviso { padding: calc(10rem/16) calc(14rem/16); border-radius: calc(10rem/16); font-size: calc(12.5rem/16); border: 1px solid color-mix(in srgb, var(--v-neg-strong) 40%, transparent); color: var(--v-neg-strong-text); }

/* Sign-in, 403 and consent: the house's centred card */
.login { min-height: 100vh; display: grid; place-items: center; padding: calc(24rem/16); box-sizing: border-box; }
.login-card { width: min(100%, calc(400rem/16)); display: grid; gap: calc(14rem/16); padding: calc(28rem/16); background: var(--v-surface); border: 1px solid var(--v-border); border-radius: calc(16rem/16); box-sizing: border-box; }
.login-card p { margin: 0; }
.login-card .wordmark { font-family: var(--v-font-serif); font-size: calc(23rem/16); letter-spacing: .02em; color: var(--v-text-primary); }
.login-card .muted { color: var(--v-text-tertiary); font-size: calc(13rem/16); letter-spacing: .04em; line-height: 1.5; }
.login-card .muted b, .login-card .muted strong { color: var(--v-text-secondary); font-weight: 500; }
.login-card .error { font-size: calc(13rem/16); color: var(--v-red); }
.login-card .otra { border-top: 1px solid var(--v-border); padding-top: calc(12rem/16); display: grid; gap: calc(8rem/16); }
.login-card .btn, .login-card .cta { width: 100%; box-sizing: border-box; }
.login-card form { display: grid; gap: calc(8rem/16); margin: 0; }
.login-card label { font-size: calc(11rem/16); letter-spacing: .1em; text-transform: uppercase; color: var(--v-text-tertiary); }
.login-card .fin { max-width: none; box-sizing: border-box; }
.login-card ul { margin: 0; padding: 0 0 0 calc(18rem/16); display: grid; gap: calc(6rem/16); font-size: calc(13rem/16); color: var(--v-text-secondary); line-height: 1.5; }
.login-card .acciones { display: grid; grid-template-columns: 1fr 1fr; gap: calc(8rem/16); }
.chip-env.dev { color: var(--v-yellow); }
.login-card .btn svg { width: calc(14rem/16); height: calc(14rem/16); }
.login-card .eyebrow + .otra, .login-card .error + .otra { border-top: 0; padding-top: 0; }
