/* Ainora UI v2 — account area: Consumo y plan, Equipo y accesos, Soporte, guías, confirmación y avisos.
   Colours: ainora-theme.css tokens only. */

/* ---------- Page structure ---------- */
#plan-view:not([hidden]),#settings-view:not([hidden]){display:grid;gap:24px;min-width:0;max-width:1120px}
/* Legacy placeholders replaced by the live billing and team views. */
#plan-view>.plan-layout,#plan-view>.view-note{display:none!important}
#settings-view.team-ready>:not(.team-card,.company-config){display:none!important}

/* ---------- Shared bits ---------- */
.billing-icon{flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--t-surface-3);color:var(--t-text-2)}
.billing-icon svg{width:20px;height:20px}
.billing-icon.is-accent{background:var(--t-accent-soft);color:var(--t-accent-text)}
.billing-icon.is-small{width:34px;height:34px;border-radius:10px}
.billing-icon.is-small svg{width:18px;height:18px}
.billing-btn-icon{flex:none;display:inline-grid;place-items:center;width:16px;height:16px}
.billing-btn-icon svg{width:16px;height:16px}
.billing-feedback:empty,.team-status:empty,.usage-status:empty,.support-status:empty{display:none}
.billing-feedback{font-size:13px;font-weight:600;color:var(--t-text-2)}
.billing-feedback[data-tone=success]{color:var(--t-ok)}.billing-feedback[data-tone=warning]{color:var(--t-warn)}

/* ---------- Consumo y plan ---------- */
.billing{display:grid;gap:24px;min-width:0}
.billing .card{padding:24px}
.billing-heading{font-size:var(--fs-lg);font-weight:700;margin:4px 0 12px}

/* Subscription summary */
.billing-summary{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,1fr);gap:0;padding:0!important;overflow:hidden}
.billing-summary-main{padding:26px 28px;display:grid;align-content:start;gap:14px;min-width:0}
.billing-summary-top{display:flex;align-items:flex-start;gap:14px}
.billing-summary-top>div{flex:1;min-width:0;display:grid;gap:4px}
.billing-summary-top .eyebrow{color:var(--t-muted)}
.billing-summary-top h2{font-size:var(--fs-2xl);font-weight:800}
.billing-status{margin-top:2px}
.billing-summary-note{color:var(--t-muted);font-size:13.5px;margin-top:-6px;padding-left:54px}
.billing-items{list-style:none;margin:6px 0 0;padding:0;display:grid;border:1px solid var(--t-line);border-radius:var(--r-md)}
.billing-items li{display:flex;align-items:center;gap:12px;padding:12px 14px}
.billing-items li+li{border-top:1px solid var(--t-line)}
.billing-items li>div{flex:1;min-width:0;display:grid}
.billing-items strong{font-size:14px;font-weight:700}
.billing-items small{font-size:12.5px;color:var(--t-muted)}
.billing-item-price{font-weight:700;font-size:13.5px;color:var(--t-text);white-space:nowrap;font-variant-numeric:tabular-nums}
.billing-summary-side{padding:26px 28px;display:grid;align-content:start;gap:14px;background:var(--t-surface-3);border-left:1px solid var(--t-line);min-width:0}
.billing-label{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t-muted)}
.billing-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px;margin-top:-8px}
.billing-price strong{font-size:34px;font-weight:800;letter-spacing:-.03em;color:var(--t-text);font-variant-numeric:tabular-nums}
.billing-price span{color:var(--t-muted);font-weight:600;font-size:13.5px}
.billing-dates{margin:0;display:grid;gap:8px;padding:12px 0;border-block:1px solid var(--t-line)}
.billing-dates div{display:flex;justify-content:space-between;gap:12px;font-size:13.5px}
.billing-dates dt{color:var(--t-muted)}
.billing-dates dd{margin:0;font-weight:700;color:var(--t-text);text-align:right}
.billing-actions{display:flex;flex-wrap:wrap;gap:10px}
.billing-actions .primary-button{flex:1 1 180px;min-height:44px}
.billing-actions .secondary-button{min-height:44px}
.billing-secure{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.5;color:var(--t-muted)}
.billing-secure .billing-btn-icon{margin-top:1px;color:var(--t-ok)}

/* Usage meters */
.billing-meters{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:20px}
.billing-meter{display:grid;align-content:start;gap:14px}
.billing-meter-head{display:flex;align-items:center;gap:12px}
.billing-meter-head>div{flex:1;min-width:0;display:grid}
.billing-meter-head h3{font-size:15px}
.billing-meter-head small{font-size:12.5px;color:var(--t-muted)}
.billing-meter-figure{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;color:var(--t-muted);font-weight:600;font-size:14px}
.billing-meter-figure strong{font-size:30px;font-weight:800;letter-spacing:-.03em;color:var(--t-text);font-variant-numeric:tabular-nums}
.billing-bar{height:10px;display:block}
.billing-meter.is-warn .billing-bar::-webkit-progress-value{background:var(--t-warn)}
.billing-meter.is-warn .billing-bar::-moz-progress-bar{background:var(--t-warn)}
.billing-meter.is-full .billing-bar::-webkit-progress-value{background:var(--t-danger)}
.billing-meter.is-full .billing-bar::-moz-progress-bar{background:var(--t-danger)}
.billing-meter-legend{display:flex;justify-content:space-between;gap:12px;margin-top:-6px;font-size:12.5px;color:var(--t-muted);font-variant-numeric:tabular-nums}
.billing-alert{display:grid;gap:6px;padding:12px 14px;border-radius:var(--r-md);background:var(--t-warn-soft);color:var(--t-warn);font-size:13px;font-weight:600;line-height:1.5}
.billing-meter.is-full .billing-alert{background:var(--t-danger-soft);color:var(--t-danger)}
.billing-link{justify-self:start;display:inline-flex;align-items:center;gap:6px;min-height:32px;color:inherit;font-weight:800;text-decoration:underline;text-underline-offset:3px}
.billing-link::after{content:'↗';text-decoration:none}
.billing-foot{font-size:12.5px;color:var(--t-muted);line-height:1.5;padding-top:12px;border-top:1px solid var(--t-line)}

/* Packs */
.billing-section-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px}
.billing-section-head h3{font-size:var(--fs-lg)}
.billing-section-head p{color:var(--t-muted);font-size:13.5px;margin-top:3px;max-width:70ch}
.billing-pack-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.billing-pack{position:relative;display:block;cursor:pointer}
.billing-pack input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.billing-pack-body{display:grid;gap:2px;height:100%;padding:16px;border:1px solid var(--t-line);border-radius:14px;background:var(--t-surface);transition:border-color .15s var(--ease),box-shadow .15s var(--ease),background-color .15s}
.billing-pack:hover .billing-pack-body{border-color:var(--t-line-strong)}
.billing-pack input:checked+.billing-pack-body{border-color:var(--t-accent);background:var(--t-accent-soft);box-shadow:0 0 0 1px var(--t-accent)}
.billing-pack input:focus-visible+.billing-pack-body{outline:2px solid var(--t-accent);outline-offset:2px}
.billing-pack input:disabled+.billing-pack-body{opacity:.55;cursor:not-allowed}
.billing-pack-tag{justify-self:start;margin-bottom:8px;padding:2px 8px;border-radius:var(--r-pill);background:var(--t-surface-3);color:var(--t-muted);font-size:11px;font-weight:700}
.billing-pack input:checked+.billing-pack-body .billing-pack-tag{background:var(--t-surface);color:var(--t-accent-text)}
.billing-pack-body strong{font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--t-text);font-variant-numeric:tabular-nums}
.billing-pack-unit{font-size:13px;color:var(--t-muted)}
.billing-pack-price{margin-top:10px;font-weight:700;font-size:14px;color:var(--t-text);font-variant-numeric:tabular-nums}
.billing-pack-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 20px;margin-top:18px}
.billing-pack-foot .primary-button{min-height:44px}
.billing-packs .billing-feedback{margin-top:10px}

/* Packs + notices side by side when both exist */
.billing-row{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr);gap:20px;align-items:start}
.billing-row>:only-child{grid-column:1/-1}
@media (max-width:1180px){.billing-row{grid-template-columns:1fr}}
.billing-row>:not(:only-child) .billing-pack-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1180px){.billing-row .billing-pack-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}
/* Notices timeline */
.billing-notices h3{font-size:var(--fs-lg);margin-bottom:14px}
.billing-timeline{list-style:none;margin:0;padding:0;display:grid}
.billing-timeline li{position:relative;display:flex;gap:14px;padding:0 0 18px}
.billing-timeline li:last-child{padding-bottom:0}
.billing-timeline li:not(:last-child)::before{content:'';position:absolute;left:5px;top:16px;bottom:0;width:1px;background:var(--t-line)}
.billing-dot{flex:none;width:11px;height:11px;margin-top:5px;border-radius:50%;background:var(--t-muted);box-shadow:0 0 0 4px var(--t-surface-3)}
.billing-timeline .is-ok .billing-dot{background:var(--t-ok);box-shadow:0 0 0 4px var(--t-ok-soft)}
.billing-timeline .is-accent .billing-dot{background:var(--t-accent);box-shadow:0 0 0 4px var(--t-accent-soft)}
.billing-timeline .is-warn .billing-dot{background:var(--t-warn);box-shadow:0 0 0 4px var(--t-warn-soft)}
.billing-timeline .is-danger .billing-dot{background:var(--t-danger);box-shadow:0 0 0 4px var(--t-danger-soft)}
.billing-timeline li>div{display:grid;gap:1px;min-width:0}
.billing-timeline strong{font-size:14px;font-weight:700}
.billing-timeline small{font-size:12.5px;color:var(--t-muted)}

/* Loading / error */
.billing-loading{display:grid;gap:14px}
.billing-skeleton{display:block;height:14px;border-radius:8px;background:linear-gradient(90deg,var(--t-surface-3),var(--t-line),var(--t-surface-3));background-size:200% 100%;animation:account-shimmer 1.4s linear infinite}
.billing-skeleton:first-of-type{height:22px}
@keyframes account-shimmer{to{background-position:-200% 0}}
.billing-error{display:grid;gap:14px;justify-items:start}

/* Recorded call duration (usage-view) */
.usage-recorded{display:grid;gap:16px;padding:24px}
.usage-head h2{font-size:var(--fs-lg);font-weight:700}
.usage-head p{color:var(--t-muted);font-size:13.5px;margin-top:3px}
.usage-filters{display:grid;grid-template-columns:repeat(2,minmax(150px,200px)) 1fr;gap:12px;align-items:end}
.usage-filters .field>span{font-size:12.5px}
.usage-filter-actions{display:flex;gap:10px;flex-wrap:wrap}
.usage-filter-actions button{min-height:42px}
.usage-status{font-size:13px;color:var(--t-muted)}
.usage-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--t-line);border-radius:var(--r-md);overflow:hidden}
.usage-metric{display:grid;gap:4px;padding:16px 18px;min-width:0}
.usage-metric+.usage-metric{border-left:1px solid var(--t-line)}
.usage-metric span{font-size:12.5px;color:var(--t-muted);font-weight:600}
.usage-metric strong{font-size:24px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.usage-notes{margin:0;padding:0 0 0 18px;display:grid;gap:4px;font-size:12.5px;color:var(--t-muted)}

/* ---------- Equipo y accesos ---------- */
.team-card{display:grid;gap:24px;min-width:0}
.team-card>.card{padding:24px}
.team-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:18px}
.team-head h2{font-size:var(--fs-xl)}
.team-head .help-text{margin-top:4px;max-width:60ch}
.team-seats{flex:none;display:grid;justify-items:end;gap:4px;text-align:right}
.team-seats strong{font-size:20px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.team-seats span{font-size:12.5px;color:var(--t-muted)}
.team-seats.is-full span{color:var(--t-warn);font-weight:600}
.team-seat-meter{display:flex;gap:4px}
.team-seat-meter i{width:18px;height:6px;border-radius:999px;background:var(--t-surface-3);border:1px solid var(--t-line)}
.team-seat-meter i.on{background:var(--t-accent);border-color:var(--t-accent)}
.team-seats.is-full .team-seat-meter i.on{background:var(--t-warn);border-color:var(--t-warn)}
.team-list{list-style:none;margin:0;padding:0;border:1px solid var(--t-line);border-radius:var(--r-md)}
.team-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:14px 16px}
.team-row+.team-row{border-top:1px solid var(--t-line)}
.team-row.is-disabled .team-avatar,.team-row.is-disabled .team-who{opacity:.6}
.team-avatar{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--t-accent-soft);color:var(--t-accent-text);font-weight:800;font-size:13px}
.team-who{display:grid;min-width:0}
.team-name{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;min-width:0}
.team-you{padding:1px 7px;border-radius:6px;background:var(--t-surface-3);color:var(--t-muted);font-size:11px;font-weight:700}
.team-who small{font-size:12.5px;color:var(--t-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.team-pills{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.team-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.team-actions button{min-height:36px;padding:0 12px;font-size:13px}
.team-actions:empty{display:none}
.team-status{margin-top:14px;font-size:13px;font-weight:600;color:var(--t-text-2)}
.team-invite-head{margin-bottom:16px}
.team-invite-head .help-text{margin-top:3px}
.team-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(160px,.8fr) auto;gap:12px;align-items:end}
.team-form .primary-button{min-height:42px}
.team-full{margin-bottom:16px;padding:12px 14px;border-radius:var(--r-md);background:var(--t-warn-soft);color:var(--t-warn);font-size:13.5px;font-weight:600}
.team-full a{color:inherit;font-weight:800;text-underline-offset:3px}
.team-roles{margin:18px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.team-roles div{padding:12px 14px;border-radius:var(--r-md);background:var(--t-surface-3)}
.team-roles dt{font-weight:700;font-size:13px}
.team-roles dd{margin:2px 0 0;font-size:12.5px;color:var(--t-muted);line-height:1.5}
.team-message{display:grid;gap:6px}

@media (min-width:901px){
 .team-list{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto}
 .team-row{grid-column:1/-1;grid-template-columns:subgrid}
 .team-pills{justify-content:flex-start}
}
/* ---------- Soporte ---------- */
dialog.support-dialog{width:min(640px,calc(100vw - 32px));max-width:none;max-height:min(760px,calc(100dvh - 48px));padding:0;display:none;flex-direction:column;overflow:hidden}
dialog.support-dialog[open]{display:flex}
.support-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:22px 24px 16px;border-bottom:1px solid var(--t-line)}
.support-head h2{margin:0;font-size:var(--fs-xl)}
.support-sub{font-size:13px;margin-top:2px}
.support-close{flex:none;width:40px;height:40px}
.support-status{margin:14px 24px 0;padding:10px 12px;border-radius:var(--r-md);background:var(--t-surface-3);color:var(--t-text-2)!important;font-size:13px;font-weight:600}
.support-body{flex:1;overflow-y:auto;padding:18px 24px 24px;display:grid;align-content:start;gap:14px}
.support-intro{font-size:13.5px}
.support-toolbar{display:flex;flex-wrap:wrap;gap:8px}
.support-toolbar:empty{display:none}
.support-toolbar button{min-height:40px}
.support-paging{justify-content:flex-end}
.support-list{display:grid;gap:10px}
.support-ticket{display:grid;gap:6px;width:100%;padding:14px 16px;text-align:left;border:1px solid var(--t-line);border-radius:14px;background:var(--t-surface);color:var(--t-text);cursor:pointer;font:inherit;transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.support-ticket:hover{border-color:var(--t-accent-line);box-shadow:var(--sh-sm)}
.support-ticket-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.support-ticket-head strong,.support-ticket-head h3{font-size:14.5px;font-weight:700;min-width:0}
.support-ticket-head h3{font-size:var(--fs-lg)}
.support-preview{font-size:13px;color:var(--t-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.support-ticket-foot{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--t-muted)}
.support-empty{display:grid;gap:4px;padding:28px 20px;text-align:center;border:1px dashed var(--t-line-strong);border-radius:14px}
.support-empty p{font-size:13px}
.support-back{justify-self:start;padding:0 10px;margin-left:-10px}
.support-title{font-size:var(--fs-lg)}
.support-hint{font-size:13px;margin-top:-6px}
.support-meta{font-size:12.5px;margin-top:4px}
.support-detail-head{padding-bottom:14px;border-bottom:1px solid var(--t-line)}
.support-thread{display:grid;gap:12px}
.support-message{max-width:88%;padding:12px 14px;border-radius:14px;background:var(--t-surface-3)}
.support-message p{color:var(--t-text);font-size:13.5px;white-space:pre-wrap;overflow-wrap:anywhere}
.support-message-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:4px}
.support-message-head strong{font-size:12.5px}
.support-message-head small{font-size:11.5px;color:var(--t-muted)}
.support-customer{justify-self:end;border-bottom-right-radius:6px;background:var(--t-accent-soft)}
.support-customer .support-message-head strong{color:var(--t-accent-text)}
.support-team{justify-self:start;border-bottom-left-radius:6px;border:1px solid var(--t-line);background:var(--t-surface)}
.support-message .badge{margin-top:8px}
.support-form{display:grid;gap:14px}
.support-form .primary-button{justify-self:end;min-height:44px}
.support-reply{padding-top:14px;border-top:1px solid var(--t-line)}

/* ---------- Confirmación compartida ---------- */
dialog.ainora-confirm{width:min(440px,calc(100vw - 32px));padding:28px 28px 24px}
dialog.ainora-confirm h2{font-size:var(--fs-xl);padding-right:36px}
dialog.ainora-confirm p{font-size:14px;line-height:1.55}
dialog.ainora-confirm .section-save{margin-top:24px}
dialog.ainora-confirm .section-save button{min-height:44px}
dialog.ainora-confirm .dialog-close{position:absolute;top:16px;right:16px;width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:10px;background:transparent;color:var(--t-muted);font-size:22px;line-height:1;cursor:pointer}
dialog.ainora-confirm .dialog-close:hover{background:var(--t-surface-3);color:var(--t-text)}

/* ---------- Avisos (toast) ---------- */
.toast{align-items:center;min-width:300px;padding:14px 14px 14px 16px;border-radius:14px}
.toast>div{flex:1;min-width:0}
.toast strong{display:block;font-size:14px}
.toast .icon-button{width:36px;height:36px;border:0;background:transparent;font-size:20px}
.toast-icon{width:30px;height:30px;font-weight:800;font-size:14px}
.toast[data-tone=error] .toast-icon{background:var(--t-danger-soft);color:var(--t-danger)}
.toast[data-tone=warning] .toast-icon{background:var(--t-warn-soft);color:var(--t-warn)}
.toast[data-tone=info] .toast-icon{background:var(--t-accent-soft);color:var(--t-accent-text)}
@media (prefers-reduced-motion:no-preference){.toast:not([hidden]){animation:account-rise .22s var(--ease)}}
@keyframes account-rise{from{opacity:0;transform:translateY(8px)}}

/* ---------- Guías ---------- */
.portal-guide-replay{min-height:40px;font-size:13px;flex:none}
.portal-guide-replay svg{width:18px;height:18px}
.portal-guide-veil{position:fixed;inset:0;z-index:9998;overflow:hidden;pointer-events:auto}
.portal-guide-spotlight{position:absolute;border:2px solid var(--t-accent);box-shadow:0 0 0 9999px rgba(var(--t-shadow-color),.55),0 0 0 6px var(--t-accent-soft);pointer-events:none;transition:all .2s var(--ease)}
.portal-guide{position:fixed;right:24px;bottom:24px;z-index:9999;width:min(380px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;display:grid;gap:10px;padding:22px;background:var(--t-surface);color:var(--t-text);border:1px solid var(--t-line);border-radius:var(--r-lg);box-shadow:var(--sh-md)}
.portal-guide-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.portal-guide-head small{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t-accent-text)}
.portal-guide-dots{display:flex;gap:5px}
.portal-guide-dots i{width:6px;height:6px;border-radius:999px;background:var(--t-line-strong);transition:width .2s var(--ease)}
.portal-guide-dots i.done{background:color-mix(in srgb,var(--t-accent) 40%,transparent)}
.portal-guide-dots i.on{width:18px;background:var(--t-accent)}
.portal-guide h3{font-size:17px;font-weight:800}
.portal-guide>p{font-size:13.5px;line-height:1.6;color:var(--t-text-2)}
.portal-guide-demo{display:grid;gap:8px;padding:12px;border-radius:var(--r-md);background:var(--t-surface-3)}
.portal-guide-demo p{font-size:13px;font-weight:700;color:var(--t-text)}
.portal-guide-demo small{font-size:12px;color:var(--t-muted)}
.portal-guide-demo .secondary-button{justify-self:start}
.portal-guide-actions{display:flex;align-items:center;gap:8px;margin-top:6px;padding-top:14px;border-top:1px solid var(--t-line)}
.portal-guide-skip{margin-right:auto;margin-left:-10px;color:var(--t-muted)}
.portal-guide-actions button{min-height:40px}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
 .team-form{grid-template-columns:1fr 1fr}
 .team-form .primary-button{justify-self:start}
}
@media (max-width:900px){
 .billing-summary{grid-template-columns:1fr}
 .billing-summary-side{border-left:0;border-top:1px solid var(--t-line)}
 .usage-filters{grid-template-columns:1fr 1fr}
 .usage-filter-actions{grid-column:1/-1}
 .usage-metrics{grid-template-columns:1fr 1fr}
 .usage-metric:nth-child(3){border-left:0}
 .usage-metric:nth-child(n+3){border-top:1px solid var(--t-line)}
 .team-row{grid-template-columns:auto minmax(0,1fr) auto}
 .team-actions{grid-column:2/-1;justify-content:flex-start}
}
@media (max-width:700px){
 #plan-view:not([hidden]),#settings-view:not([hidden]),.billing,.team-card{gap:16px}
 .billing .card,.team-card>.card,.usage-recorded{padding:18px}
 .billing-summary-main,.billing-summary-side{padding:20px 18px}
 .billing-summary-top{flex-wrap:wrap}
 .billing-summary-top .billing-icon{display:none}
 .billing-summary-top h2{font-size:var(--fs-xl)}
 .billing-summary-note{padding-left:0}
 .billing-items li{flex-wrap:wrap;padding:12px}
 .billing-price strong{font-size:30px}
 .billing-actions>*{flex:1 1 100%}
 .billing-meter-figure strong{font-size:26px}
 .billing-link{min-height:44px}
 .billing-pack-grid{grid-template-columns:1fr 1fr;gap:10px}
 .billing-pack-body{padding:14px}
 .billing-pack-body strong{font-size:21px}
 .billing-pack-foot .primary-button{width:100%}
 .usage-filters{grid-template-columns:1fr 1fr}
 .usage-filter-actions button{flex:1;min-height:44px}
 .usage-filters input{min-height:44px}
 .team-head{flex-direction:column;gap:12px}
 .team-seats{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;text-align:left}
 .team-seats span:last-child{flex-basis:100%}
 .team-who small{white-space:normal}
 .team-row{grid-template-columns:auto minmax(0,1fr);gap:10px 12px;padding:14px}
 .team-pills{grid-column:2;justify-content:flex-start}
 .team-actions{grid-column:1/-1}
 .team-actions button{flex:1 1 auto;min-height:44px}
 .team-form{grid-template-columns:1fr}
 .team-form input,.team-form .select-trigger{min-height:44px}
 .team-form .primary-button{width:100%;min-height:44px}
 .team-roles{grid-template-columns:1fr}
 dialog.support-dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0}
 .support-head{padding:calc(16px + env(safe-area-inset-top,0px)) 16px 12px}
 .support-body{padding:16px 16px calc(24px + env(safe-area-inset-bottom,0px))}
 .support-status{margin:12px 16px 0}
 .support-close,.support-toolbar button,.support-back{min-height:44px}
 .support-close{width:44px;height:44px}
 .support-toolbar button{flex:1 1 auto}
 .support-message{max-width:94%}
 .support-form .primary-button{width:100%}
 .portal-guide{padding:18px}
 .portal-guide-actions button{min-height:44px}
 dialog.ainora-confirm{padding:24px 20px 20px}
 dialog.ainora-confirm .section-save button{flex:1}
 .toast{min-width:0}
}

/* ---------- Empresa y contacto (commerce-view.mjs) and its logo for the payment page ---------- */
.company-config{display:grid;gap:18px;padding:24px;min-width:0}
.company-config-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.company-config-head h2{font-size:var(--fs-xl)}
.company-config-head p{margin-top:4px;color:var(--t-muted)}
.company-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px 24px;margin:0}
.company-summary dt{font-size:12.5px;color:var(--t-muted)}
.company-summary dd{margin:2px 0 0;color:var(--t-text);overflow-wrap:anywhere}
.company-logo{display:flex;align-items:center;gap:16px;padding:16px;border:1px solid var(--t-line);border-radius:var(--r-md);background:var(--t-surface-3);min-width:0}
/* Neutral light tile in both themes so transparent and dark logos stay readable. */
.company-logo-preview{flex:none;width:72px;height:72px;display:grid;place-items:center;border-radius:16px;border:1px solid var(--t-line);background:#fff;overflow:hidden}
.company-logo-preview[data-empty="true"]{background:var(--t-accent-soft);border-color:transparent}
.company-logo-preview img{width:100%;height:100%;object-fit:contain;padding:6px}
.company-logo-initials{font-weight:800;font-size:22px;letter-spacing:.02em;color:var(--t-accent-soft-text)}
.company-logo-body{display:grid;gap:4px;min-width:0}
.company-logo-title{color:var(--t-text)}
.company-logo-hint{margin:0;font-size:13px;color:var(--t-muted)}
.company-logo-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.company-logo-actions:empty{display:none}
.company-logo-status{margin:2px 0 0;font-size:13px;color:var(--t-text-2)}
.company-logo-status[data-tone="ok"]{color:var(--t-ok)}
.company-logo-status[data-tone="error"]{color:var(--t-danger)}
@media (max-width:600px){
 .company-config{padding:18px}
 .company-config-head{flex-direction:column;gap:12px}
 .company-logo{align-items:flex-start}
 .company-logo-actions .secondary-button{min-height:44px}
}