/* ---------- login ---------- */
.screen--login{ padding-top: 40px; max-width: 420px; margin:0 auto; }
.login-hero{ text-align:center; margin-bottom: 28px; }
.login-hero h1{ font-size:1.4rem; color: var(--azul-principal); }
.login-hero p{ color: var(--gris-medio); font-size:.85rem; margin: 0 auto; }
.role-select{ display:flex; flex-direction:column; gap:10px; }
.role-select__label{ font-size:.75rem; color:var(--gris-medio); margin-bottom:2px; }
.role-card{
  display:flex; flex-direction:row; align-items:center; gap:12px;
  background: var(--blanco); border:1.5px solid var(--gris-linea); border-radius: var(--radius);
  padding: 14px; cursor:pointer; transition: border-color .15s var(--ease-out-expo);
}
.role-card:has(input:checked){ border-color: var(--azul-secundario); background: var(--azul-claro); }
.role-card input{ accent-color: var(--azul-secundario); width:18px; height:18px; flex-shrink:0; }
.role-card__icon{ font-size:1.4rem; }
.role-card__text{ display:flex; flex-direction:column; }
.role-card__text small{ color: var(--gris-medio); font-size:.72rem; }
.login-footnote{ text-align:center; color: var(--gris-medio); font-size:.7rem; margin-top:18px; }

/* ---------- portal del paciente ---------- */
.portal-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:12px; margin: 18px 0; }
.portal-tile{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background: var(--blanco); border:1.5px solid var(--gris-linea); border-radius: var(--radius);
  padding: 22px 12px; cursor:pointer; box-shadow: var(--shadow); min-height: 110px;
  font-size:.85rem; font-weight:600; color: var(--gris-oscuro); transition: border-color .15s var(--ease-out-expo);
}
.portal-tile:hover{ border-color: var(--azul-secundario); }
.portal-tile__icon{ font-size: 1.8rem; }
.document-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.document-row .card__ai-note{ margin: 2px 0 0; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:none; border-radius: var(--radius-sm); cursor:pointer; text-decoration:none;
  padding: 13px 18px; font-size: .95rem; font-weight:600; min-height:46px;
  transition: background-color .15s var(--ease-out-expo), opacity .15s;
}
.btn:disabled{ opacity: .6; cursor: not-allowed; }
.btn--block{ width:100%; margin-top: 14px; }
.btn--primary{ background: var(--azul-principal); color:#fff; }
.btn--primary:hover:not(:disabled){ background:#083a68; }
.btn--secondary{ background: var(--azul-claro); color: var(--azul-principal); }
.btn--danger{ background: var(--rojo); color:#fff; }
.btn--ghost{ background: transparent; color: var(--azul-secundario); border:1px solid var(--gris-borde); }
.btn--sm{ padding: 8px 12px; font-size:.8rem; min-height:auto; margin-top:0; }

/* ---------- screen head ---------- */
.screen{ display:block; }
.screen-head{ margin-bottom: 16px; }
.screen-head__sub{ color: var(--gris-medio); font-size:.82rem; }
.screen-head--back{ display:flex; align-items:flex-start; gap:10px; }
.link-back{
  background: var(--blanco); border:1px solid var(--gris-linea); border-radius:8px;
  width:34px; height:34px; flex-shrink:0; font-size:1.1rem; color: var(--gris-oscuro); cursor:pointer;
}

/* ---------- kpi grid ---------- */
.kpi-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap:10px; margin-bottom:20px; }
.kpi{ background: var(--blanco); border-radius: var(--radius); padding:14px; box-shadow: var(--shadow); }
.kpi__value{ font-size:1.5rem; font-weight:700; color: var(--azul-principal); }
.kpi__label{ font-size:.72rem; color: var(--gris-medio); }
.kpi--alert .kpi__value{ color: var(--rojo); }

/* ---------- loading skeletons ---------- */
@keyframes skeleton-pulse{ 0%, 100%{ opacity: .55; } 50%{ opacity: .9; } }
.kpi--skeleton, .case-item--skeleton{
  background: var(--gris-linea); box-shadow: none; border-left: none;
  animation: skeleton-pulse 1.3s ease-in-out infinite;
}
.kpi--skeleton{ min-height: 62px; }
.case-item--skeleton{ min-height: 56px; }
@media (prefers-reduced-motion: reduce){
  .kpi--skeleton, .case-item--skeleton{ animation: none; opacity: .7; }
}

/* ---------- section blocks ---------- */
.section-block{ margin-bottom: 22px; }
.section-block__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.section-block__head h3{ margin: 0; }
.section-block__stamp{ font-size:.72rem; color: var(--gris-medio); font-variant-numeric: tabular-nums; }
/* Encabezado de pantalla con una acción a la derecha (el panel técnico desde el dashboard). */
.screen-head--actions{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.screen-head--actions > div{ min-width: 0; }

/* ---------- panel técnico ---------- */
/* Filas en bloque y no una tabla: a 400 px una tabla de cuatro columnas obliga a hacer
   scroll horizontal, y esta pantalla se abre tanto en el móvil como en un proyector. */
.stack-table{ display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.stack-row{
  background: var(--blanco); border-radius: var(--radius-sm); padding:10px 12px;
  box-shadow: var(--shadow); display:flex; flex-direction:column; gap:2px;
}
.stack-row__head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.stack-row__head strong{ font-size:.86rem; color: var(--gris-oscuro); }
.stack-row__version{ font-size:.74rem; color: var(--gris-medio); font-variant-numeric: tabular-nums; }
.stack-row__license{ font-size:.74rem; color: var(--azul-principal); font-weight:600; }
.stack-row__role{ font-size:.72rem; color: var(--gris-medio); }

.audit-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.audit-row{
  background: var(--blanco); border-radius: var(--radius-sm); padding:10px 12px;
  box-shadow: var(--shadow); border-left:3px solid var(--azul-secundario);
  display:flex; flex-direction:column; gap:3px;
}
.audit-row__head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.audit-row__head strong{ font-size:.84rem; color: var(--gris-oscuro); }
.audit-row__head time{ font-size:.72rem; color: var(--gris-medio); font-variant-numeric: tabular-nums; flex-shrink:0; }
.audit-row__actor{ font-size:.76rem; color: var(--azul-principal); font-weight:600; }
.audit-row__detail{ font-size:.76rem; color: var(--gris-oscuro); overflow-wrap:anywhere; }
.audit-row__meta{ font-size:.7rem; color: var(--gris-medio); overflow-wrap:anywhere; }

/* ---------- case list ---------- */
.case-list{ display:flex; flex-direction:column; gap:10px; }
.case-item{
  background: var(--blanco); border-radius: var(--radius); padding:14px; box-shadow: var(--shadow);
  cursor:pointer; border-left: 4px solid var(--azul-secundario);
}
.case-item.is-alert{ border-left-color: var(--rojo); }
.case-item__top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; gap: 8px; }
.case-item__name{ font-weight:700; font-size:.92rem; }
.case-item__meta{ color: var(--gris-medio); font-size:.76rem; }

/* ---------- badges ---------- */
.badge{ display:inline-block; padding: 3px 9px; border-radius: 999px; font-size:.68rem; font-weight:700; background:var(--gris-linea); color: var(--gris-oscuro); }
.badge--role{ background: rgba(255,255,255,.18); color:#fff; font-weight:600; }
.badge--danger{ background: var(--rojo-claro); color: #D72B1E; } /* verificado 4.54:1, var(--rojo) da 4.44:1 */
.badge--success{ background: var(--verde-claro); color: var(--verde); }
.badge--info{ background: var(--azul-claro); color: var(--azul-principal); }
.badge--warning{ background: var(--naranja-claro); color: var(--naranja); } /* verificado 5.17:1 */

/* ---------- generic card ---------- */
.card{ background: var(--blanco); border-radius: var(--radius); padding:16px; box-shadow: var(--shadow); margin-bottom: 14px; }
.card--muted{ background: var(--azul-claro); box-shadow:none; }
/* var(--gris-medio) a 4.43:1 sobre azul-claro no alcanza el mínimo de 4.5:1
   para texto de cuerpo (WCAG AA). Verificado con la fórmula de contraste
   relativo; este tono puntual sí cumple (4.56:1) sin tocar el gris-medio
   general, que ya cumple de sobra sobre blanco y gris-claro. */
.card--muted .card__row span, .card--muted p{ color: #646e83; }
.card--ai{ border:1px dashed var(--azul-secundario); }
.card__ai-tag{ display:inline-block; background: var(--azul-secundario); color:#fff; font-size:.66rem; font-weight:700; padding:2px 8px; border-radius:999px; margin-bottom:8px; }
.card__ai-note{ color: var(--gris-medio); font-size:.72rem; margin:0; }
.card--rda{ border-left:4px solid var(--azul-principal); }
.card__row{ display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px solid #EEF1F4; font-size:.85rem; }
.card__row:last-child{ border-bottom:none; }
.card__row span{ color: var(--gris-medio); }
.card__row strong{ text-align:right; }
/* Para valores de texto libre largo (conducta clínica, motivo) — leer en varias
   líneas alineado a la derecha es incómodo; se apila como lista de descripción. */
.card__row--block{ flex-direction: column; gap: 4px; }
.card__row--block strong{ text-align:left; font-weight:600; }

/* ---------- alert banner ---------- */
.alert{ border-radius: var(--radius); padding:14px; margin-bottom:14px; }
.alert--danger{ background: var(--rojo-claro); border:1px solid #FDA29B; color: var(--rojo-oscuro); }
.alert--danger strong{ display:block; margin-bottom:2px; font-size:.9rem; }
.alert--danger p{ margin:0; font-size:.82rem; }

/* ---------- vitals grid ---------- */
.vitals-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap:8px; margin-top:8px; }
.vitals-grid div{ background: var(--gris-claro); border-radius: var(--radius-sm); padding:8px 10px; font-size:.78rem; }

/* ---------- forms ---------- */
.form{ display:flex; flex-direction:column; }
fieldset{ border:none; padding:0; margin:0 0 18px; }
legend{ font-size:.8rem; font-weight:700; color: var(--azul-principal); margin-bottom:8px; padding:0; }
label{ display:flex; flex-direction:column; gap:5px; font-size:.8rem; color: var(--gris-medio); margin-bottom:12px; }
.form-row{ display:flex; gap:10px; }
.form-row label{ flex:1; min-width: 0; }
input[type="text"], input[type="search"], input[type="password"], select, textarea{
  border:1.5px solid var(--gris-borde); border-radius: var(--radius-sm); padding: 12px 12px;
  color: var(--gris-oscuro); background:#fff; width: 100%;
}
input:disabled{ background: var(--gris-claro); color: var(--gris-medio); }
textarea{ resize: vertical; }
.checkbox-row{ display:flex; align-items:flex-start; gap:10px; font-size:.85rem; margin-bottom:14px; cursor:pointer; }
.checkbox-row input{ width:20px; height:20px; margin-top:2px; accent-color: var(--azul-secundario); flex-shrink:0; }
.checkbox-row--disabled{ opacity:.6; cursor:not-allowed; }
.checkbox-row--disabled input{ cursor:not-allowed; }
.consent-box p{ font-size:.85rem; }

/* ---------- autocompletado del padrón de gestantes ---------- */
/* La lista se posiciona sobre el resto del formulario (no lo empuja hacia abajo, que
   movería el campo bajo el cursor mientras se escribe) y usa la escala z semántica. */
.autocomplete{ position: relative; }
.autocomplete__list{
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: var(--z-dropdown);
  list-style: none; margin: 0; padding: 4px; max-height: 264px; overflow-y: auto;
  background: var(--blanco); border: 1.5px solid var(--gris-borde);
  border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(16,24,40,.14);
}
.autocomplete__option{
  display: flex; flex-direction: column; gap: 2px; padding: 9px 10px;
  border-radius: var(--radius-sm); cursor: pointer;
}
.autocomplete__option:hover,
.autocomplete__option.is-active{ background: var(--azul-claro); }
.autocomplete__name{ font-size: .88rem; font-weight: 600; color: var(--gris-oscuro); }
.autocomplete__meta{ font-size: .72rem; color: var(--gris-medio); }
.autocomplete__status:empty{ display: none; }
.autocomplete__status{ margin: 6px 0 0; }

/* Confirmación de que la identificación vino del padrón y no se tecleó: quien presenta
   —y quien audita— ve de dónde salió el dato. */
.picked-patient{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--azul-claro); border-left: 3px solid var(--azul-secundario);
  border-radius: var(--radius-sm); padding: 10px 12px; margin: 0 0 12px;
}
.picked-patient__text{ font-size: .76rem; color: var(--azul-principal); }

/* ---------- videollamada — patrón real (Meet abre en pestaña nueva) ---------- */
.microcopy{ font-size:.78rem; color: var(--gris-medio); background:var(--gris-claro); padding:10px 12px; border-radius: var(--radius-sm); }
.meet-chip{
  display:inline-flex; align-items:center; gap:6px; color: var(--azul-principal); font-weight:700;
}
.meet-session{
  margin-top:16px; background: var(--blanco); border:1.5px solid var(--gris-linea);
  border-radius: var(--radius); padding:16px; box-shadow: var(--shadow);
}
.meet-session__top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; font-size:.85rem; }
.meet-session__live{ color: var(--rojo); font-weight:700; }
.meet-session__timer{ font-variant-numeric: tabular-nums; color: var(--gris-medio); }
.meet-session__link{
  display:flex; align-items:center; gap:8px; background: var(--azul-claro); border-radius: var(--radius-sm);
  padding:10px 12px; margin-bottom:12px; font-size:.8rem; flex-wrap: wrap;
}
.meet-session__link code{ color: var(--gris-oscuro); font-family: ui-monospace, monospace; word-break: break-all; }
.meet-session__note{ font-size:.74rem; color: var(--gris-medio); margin: 10px 0 14px; }

/* ---------- confirm dialog ---------- */
.confirm-dialog{
  border:none; border-radius: var(--radius); padding:22px; box-shadow: 0 20px 40px rgba(16,24,40,.2);
  max-width: 380px; width: calc(100% - 40px); z-index: var(--z-modal);
}
.confirm-dialog::backdrop{ background: rgba(16,24,40,.45); }
.confirm-dialog h3{ margin-top:0; }
.confirm-dialog__actions{ display:flex; gap:10px; margin-top:18px; }
.confirm-dialog__actions .btn{ flex:1; margin-top:0; }

/* ---------- FHIR / code block ---------- */
.fhir-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.code-block{ background: var(--azul-noche); border-radius: var(--radius); overflow:hidden; margin-bottom:16px; }
.code-block__bar{ display:flex; justify-content:space-between; align-items:center; background: var(--azul-noche-2); color: var(--gris-borde); font-size:.72rem; padding:8px 12px; }
.code-block pre{ margin:0; padding:14px; color:#9CE0AE; font-size:.72rem; line-height:1.55; overflow-x:auto; white-space:pre; max-height:420px; }

/* ---------- send status / logs ---------- */
.send-status{ display:flex; align-items:center; gap:10px; background:var(--azul-claro); border-radius: var(--radius-sm); padding:12px; font-size:.82rem; color: var(--azul-principal); margin-top:12px; }
.spinner{ width:16px; height:16px; border:2px solid var(--azul-claro); border-top-color: var(--azul-principal); border-radius:50%; animation: spin .7s linear infinite; flex-shrink:0; }
@keyframes spin{ to{ transform: rotate(360deg); } }
.log-list{ list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:6px; }
.log-list li{ background: var(--blanco); border-radius: var(--radius-sm); padding:9px 12px; font-size:.76rem; box-shadow: var(--shadow); display:flex; gap:8px; }
.log-list li time{ color: var(--gris-medio); flex-shrink:0; font-variant-numeric: tabular-nums; }

/* ---------- toasts ---------- */
.toast-stack{
  position: fixed; bottom: calc(var(--bottomnav-h) + 16px); left: 16px; right: 16px;
  display:flex; flex-direction:column; gap:8px; z-index: var(--z-toast); pointer-events:none;
}
.toast{
  background: var(--gris-oscuro); color:#fff; padding: 12px 16px; border-radius: var(--radius-sm);
  font-size:.85rem; box-shadow: 0 8px 24px rgba(16,24,40,.25);
  opacity:0; transform: translateY(8px); transition: opacity .2s var(--ease-out-expo), transform .2s var(--ease-out-expo);
}
.toast.is-visible{ opacity:1; transform: translateY(0); }
.toast--error{ background: var(--rojo-oscuro); }
.toast--success{ background: var(--verde); }
.toast--info{ background: var(--azul-principal); }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- cola de teleexperticia, pool y disponibilidad ---------- */
.availability{
  background: var(--blanco); border-radius: var(--radius); padding:14px 16px; box-shadow: var(--shadow);
  margin-bottom:20px; border-left:4px solid var(--gris-borde);
}
.availability.is-on{ border-left-color: var(--verde); }
.availability__hint{ font-size:.78rem; color: var(--gris-medio); margin:6px 0 0; }

/* Interruptor accesible: un checkbox real con role="switch", transparente sobre su pista. */
.switch{
  position:relative; flex-direction:row; align-items:center; gap:12px; margin:0; cursor:pointer;
  color: var(--gris-oscuro); font-size:.92rem; font-weight:700;
}
.switch__input{
  position:absolute; left:0; top:50%; width:44px; height:24px; margin:0;
  transform: translateY(-50%); opacity:0; cursor:pointer;
}
.switch__track{
  position:relative; width:44px; height:24px; flex-shrink:0; border-radius:999px;
  background: var(--gris-borde); transition: background-color .15s var(--ease-out-expo);
}
.switch__track::after{
  content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
  background: var(--blanco); box-shadow: 0 1px 2px rgba(16,24,40,.25);
  transition: transform .15s var(--ease-out-expo);
}
.switch__input:checked + .switch__track{ background: var(--verde); }
.switch__input:checked + .switch__track::after{ transform: translateX(20px); }
.switch__input:focus-visible + .switch__track{ outline: 2px solid var(--azul-secundario); outline-offset: 2px; }
.switch__input:disabled + .switch__track{ opacity:.6; }

.queue-list{ display:flex; flex-direction:column; gap:10px; }
.queue-item{
  display:flex; flex-direction:column; gap:4px;
  background: var(--blanco); border-radius: var(--radius); padding:14px; box-shadow: var(--shadow);
  border-left:4px solid var(--azul-secundario);
}
.queue-item.is-urgent{ border-left-color: var(--rojo); }
/* El caso asignado a quien mira se distingue con un contorno, no solo con el color del borde. */
.queue-item.is-offered{ box-shadow: 0 0 0 2px var(--azul-secundario), var(--shadow); }
.queue-item__top{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.queue-item__pos{
  font-size:.76rem; font-weight:700; color: var(--azul-principal); background: var(--azul-claro);
  border-radius:999px; padding:2px 8px; font-variant-numeric: tabular-nums;
}
.queue-item__name{ flex:1; min-width:0; font-weight:700; font-size:.92rem; }
.queue-item__meta{ color: var(--gris-medio); font-size:.76rem; }
.queue-item__risk{ color: var(--gris-oscuro); font-size:.8rem; }
.queue-item__status{ color: var(--azul-principal); font-size:.78rem; font-weight:600; }
.queue-item__actions{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; margin-top:6px; }
.queue-item__actions .btn{ margin-top:0; min-height:38px; padding:8px 14px; font-size:.85rem; }

.pool-list{ display:flex; flex-direction:column; gap:8px; }
.pool-row{
  display:flex; align-items:center; gap:10px;
  background: var(--blanco); border-radius: var(--radius-sm); padding:10px 12px; box-shadow: var(--shadow);
}
.pool-row__dot{ width:10px; height:10px; flex-shrink:0; border-radius:50%; background: var(--gris-borde); }
.pool-row--disponible .pool-row__dot{ background: var(--verde); }
.pool-row--ocupado .pool-row__dot{ background: var(--naranja); }
.pool-row__who{ flex:1; min-width:0; display:flex; flex-direction:column; }
.pool-row__who strong{ font-size:.86rem; }
.pool-row__who span{ font-size:.74rem; color: var(--gris-medio); }

.action-row{ display:flex; gap:10px; }
.action-row .btn{ flex:1; }

/* ---------- notificaciones ---------- */
.notice-bell{ position:relative; }
.notice-bell__count{
  position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; padding:0 5px;
  border-radius:999px; background: var(--rojo); color:#fff;
  font-size:.66rem; font-weight:700; line-height:18px; text-align:center; font-variant-numeric: tabular-nums;
}
.notice-panel{
  position:fixed; top: calc(var(--header-h) + 6px); left:8px; right:8px; z-index: var(--z-dropdown);
  display:flex; flex-direction:column; max-height: min(70vh, 520px); overflow:hidden;
  background: var(--blanco); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(16,24,40,.2);
}
.notice-panel__head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px; border-bottom:1px solid var(--gris-linea);
}
.notice-panel__head h3{ margin:0; }
.notice-panel__permission{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 14px; background: var(--azul-claro); color: var(--azul-principal); font-size:.76rem;
}
.notice-panel__list{ overflow-y:auto; }
.notice-panel__empty{ margin:0; padding:18px 14px; color: var(--gris-medio); font-size:.82rem; }
.notice{
  position:relative; display:flex; flex-direction:column; gap:2px; width:100%;
  padding:10px 14px 10px 20px; border:none; border-bottom:1px solid #EEF1F4;
  background:none; color: var(--gris-oscuro); text-align:left; font:inherit; cursor:pointer;
}
.notice:hover{ background: var(--gris-claro); }
.notice.is-unread{ background: var(--azul-claro); }
.notice.is-unread::before{
  content:""; position:absolute; left:8px; top:16px; width:6px; height:6px; border-radius:50%;
  background: var(--azul-secundario);
}
.notice.is-urgent.is-unread::before{ background: var(--rojo); }
.notice__title{ font-size:.84rem; font-weight:700; }
.notice__body{ font-size:.78rem; }
.notice__time{ font-size:.7rem; color: var(--gris-medio); }
/* var(--gris-medio) no alcanza 4.5:1 sobre azul-claro (ver .card--muted). */
.notice.is-unread .notice__time{ color: #646e83; }

/* ---------- ingreso con usuario y contraseña ---------- */
.link-toggle{
  align-self:center; padding:6px 0; border:none; background:none; cursor:pointer;
  color: var(--azul-secundario); font-size:.8rem; font-weight:600;
}
.credentials-form{ margin-top:2px; }

@media (min-width: 600px){
  .screen--login{ padding-top: 60px; }
  .notice-panel{ left: auto; width: 380px; }
}
@media (min-width: 1024px){
  .screen--login{ max-width: 460px; padding-top: 90px; }
  .meet-session{ max-width:480px; }
  .toast-stack{ left: auto; right: 32px; bottom: 32px; max-width: 360px; }
  .notice-panel{ right: 24px; }
}