/* Consumo y plan: plan states, add-ons, WhatsApp usage and the notices bell.
   Builds on the billing base styles in account.css; theme tokens only (light/dark). */

/* Plan state (active / expiring / expired / first payment) */
.billing-state{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-md);background:var(--t-surface-3);color:var(--t-text-2);font-size:13.5px;line-height:1.5}
.billing-state strong{display:block;color:var(--t-text);font-size:14px}
.billing-state p{margin:2px 0 0}
.billing-state .billing-btn-icon{margin-top:2px}
.billing-state.is-warning{background:var(--t-warn-soft)}
.billing-state.is-warning strong,.billing-state.is-warning .billing-btn-icon{color:var(--t-warn)}
.billing-state.is-danger{background:var(--t-danger-soft)}
.billing-state.is-danger strong,.billing-state.is-danger .billing-btn-icon{color:var(--t-danger)}
.billing-state.is-info .billing-btn-icon{color:var(--t-accent-text)}
.billing-tag{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:var(--r-pill);background:var(--t-accent-soft);color:var(--t-accent-text);font-size:11px;font-weight:700;vertical-align:1px}

/* Add-ons */
.billing-addon-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:14px}
.billing-addon{display:grid;align-content:start;gap:10px;padding:18px;border:1px solid var(--t-line);border-radius:14px;background:var(--t-surface)}
.billing-addon-top{display:flex;align-items:center;gap:10px}
.billing-addon-top strong{font-size:15px}
.billing-addon>p{margin:0;font-size:13px;line-height:1.5;color:var(--t-muted)}
.billing-addon .billing-addon-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px;color:var(--t-muted);font-size:12.5px}
.billing-addon-price strong{font-size:20px;font-weight:800;color:var(--t-text);font-variant-numeric:tabular-nums}
.billing-addon .primary-button{min-height:44px;justify-self:stretch}
.billing-addon .billing-link{min-height:44px}
.billing-addon .billing-request{display:inline-flex;align-items:center;justify-content:center;min-height:44px;justify-self:stretch;text-decoration:none;text-align:center}
.billing-addon .billing-addon-setup{flex-basis:100%;font-size:12.5px}
.billing-addon>p.billing-addon-note{font-size:12.5px}
.billing-addon .billing-addon-why{font-size:12.5px;color:var(--t-warn);font-weight:600}
.billing-addon-active{list-style:none;margin:18px 0 0;padding:0;display:grid;border:1px solid var(--t-line);border-radius:var(--r-md)}
.billing-addon-active li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px}
.billing-addon-active li+li{border-top:1px solid var(--t-line)}
.billing-addon-active li>div{display:grid;min-width:0}
.billing-addon-active small{font-size:12.5px;color:var(--t-muted)}
.billing-addon-active .secondary-button{min-height:44px;flex:none}
.secondary-button.is-quiet{color:var(--t-text-2)}
.secondary-button.is-danger{color:var(--t-danger);border-color:color-mix(in srgb,var(--t-danger) 40%,var(--t-line))}

/* Confirmation dialog (upgrade quote / removal) */
.billing-dialog{width:min(460px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:24px;border:1px solid var(--t-line);border-radius:var(--r-lg);background:var(--t-surface);color:var(--t-text);box-shadow:var(--sh-md)}
.billing-dialog::backdrop{background:rgb(10 14 30 / .45)}
.billing-dialog h2{font-size:var(--fs-xl);margin:0 0 14px}
.billing-quote{margin:0;display:grid;gap:8px}
.billing-quote div{display:flex;justify-content:space-between;gap:16px;font-size:14px}
.billing-quote dt{color:var(--t-muted)}
.billing-quote dd{margin:0;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.billing-quote .is-total{padding-top:10px;border-top:1px solid var(--t-line);font-size:16px}
.billing-quote .is-total dt{color:var(--t-text);font-weight:700}
.billing-dialog-note{margin:14px 0 0;font-size:13px;line-height:1.5;color:var(--t-muted)}
.billing-dialog .billing-feedback{margin-top:10px}
.billing-dialog .dialog-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:18px}
.billing-dialog .dialog-actions button{min-height:44px}

/* WhatsApp usage */
.billing-wa{grid-column:1/-1}
.billing-wa-empty{margin:0;font-size:14px;color:var(--t-muted)}
.billing-wa-split{margin:0;font-size:12.5px;color:var(--t-text-2)}
.billing-wa-source{margin:0;font-size:12px;color:var(--t-muted);line-height:1.5}
.billing-wa-meta{display:grid;gap:8px;padding:14px;border-radius:var(--r-md);background:var(--t-surface-3)}
.billing-wa-meta h4{margin:0;font-size:13px}
.billing-wa-figures{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.billing-wa-figures div{display:grid;gap:2px}
.billing-wa-figures dt{font-size:12px;color:var(--t-muted)}
.billing-wa-figures dd{margin:0;font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.billing-wa-cats{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:12.5px}
.billing-wa-cats li{display:flex;justify-content:space-between;gap:12px}
.billing-wa-cats li span:last-child{font-weight:700;font-variant-numeric:tabular-nums}
.billing-wa-how{font-size:13px;line-height:1.5;color:var(--t-text-2)}
.billing-wa-how summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:700;color:var(--t-accent-text)}
.billing-wa-how ul{margin:0;padding-left:18px;display:grid;gap:6px}

/* Notices bell (top bar) */
.notice-menu{position:relative}
.notice-bell{position:relative}
.notice-badge{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);background:var(--t-danger);color:#fff;font-size:11px;font-weight:800;line-height:18px;text-align:center;box-shadow:0 0 0 2px var(--t-canvas)}
.notice-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:40;width:min(380px,calc(100vw - 24px));max-height:min(70dvh,560px);display:flex;flex-direction:column;border:1px solid var(--t-line);border-radius:var(--r-lg);background:var(--t-surface);box-shadow:var(--sh-md);overflow:hidden}
.notice-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px 6px 16px;border-bottom:1px solid var(--t-line)}
.notice-head-actions{display:flex;align-items:center;gap:2px;min-width:0}
.notice-head h2{margin:0;font-size:15px}
.notice-all{min-height:44px;font-size:12.5px;font-weight:700;color:var(--t-accent-text)}
.notice-empty:empty{display:none}
.notice-empty{margin:0;padding:24px 16px;color:var(--t-muted);font-size:13.5px;text-align:center}
.notice-empty.is-error{padding:12px 16px;color:var(--t-danger);background:var(--t-danger-soft)}
.notice-list{list-style:none;margin:0;padding:0;overflow:auto}
.notice-list li+li{border-top:1px solid var(--t-line)}
.notice-row{display:flex;align-items:flex-start}
.notice-row:hover{background:var(--t-surface-3)}
.notice-row.is-unread{background:color-mix(in srgb,var(--t-accent-soft) 55%,transparent)}
.notice-row.is-unread:hover{background:var(--t-accent-soft)}
.notice-item{all:unset;box-sizing:border-box;display:flex;flex:1;gap:10px;min-width:0;padding:12px 4px 12px 16px;cursor:pointer;color:var(--t-text)}
.notice-item:focus-visible{outline:2px solid var(--t-accent);outline-offset:-2px}
/* "Eliminar" (×): on hover/focus with a mouse, always on touch screens */
.notice-remove{flex:none;display:grid;place-items:center;width:32px;height:32px;margin:8px 8px 0 0;padding:0;border:0;border-radius:var(--r-md);background:transparent;color:var(--t-muted);cursor:pointer;opacity:0;transition:opacity .15s,background-color .15s,color .15s}
.notice-row:hover .notice-remove,.notice-row:focus-within .notice-remove,.notice-remove:focus-visible{opacity:1}
.notice-remove:hover{background:var(--t-danger-soft);color:var(--t-danger)}
.notice-remove:focus-visible{outline:2px solid var(--t-accent);outline-offset:1px}
@media (hover:none){.notice-remove{opacity:1;width:44px;height:44px;margin:2px 2px 0 -6px}}
.notice-confirm{display:grid;gap:4px;padding:12px 16px;border-bottom:1px solid var(--t-line);background:var(--t-danger-soft)}
.notice-confirm[hidden]{display:none}
.notice-confirm strong{font-size:13.5px;color:var(--t-text)}
.notice-confirm p{margin:0;font-size:12.5px;line-height:1.45;color:var(--t-text-2)}
.notice-confirm-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}
.notice-confirm-actions button{min-height:36px;padding:0 14px;font-size:13px}
.notice-dot{flex:none;width:9px;height:9px;margin-top:6px;border-radius:50%;background:var(--t-line-strong)}
.notice-item.is-ok .notice-dot{background:var(--t-ok)}.notice-item.is-accent .notice-dot,.notice-item.is-info .notice-dot{background:var(--t-accent)}
.notice-item.is-warn .notice-dot{background:var(--t-warn)}.notice-item.is-danger .notice-dot{background:var(--t-danger)}
.notice-text{display:grid;gap:2px;min-width:0}
.notice-text strong{font-size:13.5px;line-height:1.35}
.notice-item:not(.is-unread) .notice-text strong{font-weight:600}
.notice-detail{font-size:12.5px;line-height:1.45;color:var(--t-text-2)}
.notice-time{font-size:11.5px;color:var(--t-muted)}
.notice-foot{all:unset;box-sizing:border-box;display:block;min-height:44px;padding:12px 16px;border-top:1px solid var(--t-line);text-align:center;font-size:13px;font-weight:700;color:var(--t-accent-text);cursor:pointer}
.notice-foot:hover{background:var(--t-surface-3)}
.notice-foot:focus-visible{outline:2px solid var(--t-accent);outline-offset:-2px}
/* "Avisos" view (notices-view.mjs): every notice by day, filters, Eliminar, Limpiar todo */
#notices-view{max-width:880px;min-width:0}
.notices-page{grid-template-columns:minmax(0,1fr);min-width:0}
.notices-page>*{min-width:0}
.notices-page{display:grid;gap:14px;padding:16px 0 8px}
.notices-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:0 16px}
.notices-filters{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.notices-chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 13px;border:1px solid var(--t-line);border-radius:var(--r-pill);background:var(--t-surface);color:var(--t-text-2);font:700 13px/1 var(--font);cursor:pointer}
.notices-chip:hover{border-color:var(--t-accent-line)}
.notices-chip[aria-pressed=true]{background:var(--t-accent-soft);border-color:transparent;color:var(--t-accent-text)}
.notices-chip:focus-visible{outline:2px solid var(--t-accent);outline-offset:2px}
.notices-count{min-width:20px;padding:2px 6px;border-radius:var(--r-pill);background:var(--t-surface-3);color:var(--t-muted);font-size:11.5px;text-align:center}
.notices-chip[aria-pressed=true] .notices-count{background:var(--t-surface);color:var(--t-accent-text)}
.notices-actions{display:flex;flex-wrap:wrap;gap:6px}
.notices-confirm{margin:0 16px;border:1px solid color-mix(in srgb,var(--t-danger) 30%,transparent);border-radius:var(--r-md)}
.notices-status:empty{display:none}
.notices-status{margin:0 16px}
.notices-status.is-empty{display:grid;justify-items:center;gap:6px;padding:40px 16px;text-align:center;color:var(--t-muted)}
.notices-status.is-empty strong{color:var(--t-text);font-size:15px}.notices-status.is-empty p{margin:0 0 6px;font-size:13.5px}
.notices-status.is-error{padding:10px 14px;border-radius:var(--r-md);background:var(--t-danger-soft);color:var(--t-danger);font-size:13.5px}
.notices-status.is-loading{display:grid;gap:10px}
.notices-skeleton{height:58px;border-radius:var(--r-md);background:linear-gradient(90deg,var(--t-surface-3),color-mix(in srgb,var(--t-surface-3) 40%,var(--t-surface)),var(--t-surface-3));background-size:200% 100%;animation:notices-shimmer 1.4s ease-in-out infinite}
@keyframes notices-shimmer{to{background-position:-200% 0}}
.notices-groups{display:grid;gap:6px}
.notices-group+.notices-group{margin-top:6px}
.notices-day{margin:0;padding:6px 16px;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--t-muted)}
.notices-list{overflow:visible;border-top:1px solid var(--t-line);border-bottom:1px solid var(--t-line)}
.notices-list .notice-item{padding:14px 6px 14px 18px}
.notices-list .notice-text strong{font-size:14px}.notices-list .notice-detail{font-size:13px}
.notices-list .notice-remove{opacity:1;width:40px;height:40px;margin:8px 10px 0 0}
.notices-more{justify-self:center;margin:4px 16px 8px}
@media (max-width:640px){
 .notice-panel{position:fixed;left:12px;right:12px;top:68px;width:auto}
 .notices-toolbar{flex-direction:column;flex-wrap:nowrap;align-items:stretch}
 .notices-filters{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:2px 16px;scrollbar-width:none}
 .notices-chip{flex:none}
 .notices-chip,.notices-actions button,.notices-more,.notice-confirm-actions button{min-height:44px}
 .notices-actions{justify-content:space-between}
 .notices-list .notice-remove{width:44px;height:44px;margin:4px 4px 0 -4px}
 .billing-addon-active li{flex-wrap:wrap}
 .billing-addon-active .secondary-button{flex:1 1 100%}
}
/* Compact WhatsApp line on Inicio (home-kpis.mjs) */
.home-stat .kpi-extra{display:block;margin-top:4px;font-size:12px;color:var(--t-muted)}
.home-stat .kpi-extra[data-level=warn]{color:var(--t-warn)}.home-stat .kpi-extra[data-level=full]{color:var(--t-danger)}
@media (prefers-reduced-motion:reduce){.notice-item,.notice-remove,.billing-addon{transition:none}.notices-skeleton{animation:none}}

/* The new plan cards replace the older AI/WhatsApp usage block of the channel panel */
.plan-automation .automation-usage{display:none}
/* Narrow phones (360px): let the subscription card shrink instead of pushing the page sideways */
.billing-summary-main,.billing-summary-side,.billing-summary-top,.billing-summary-top>div{min-width:0}
.billing-summary-top{flex-wrap:wrap}
@media (max-width:1100px){.billing-summary{grid-template-columns:minmax(0,1fr)}}
.ainora-billing h2,.ainora-billing h3,.ainora-billing strong{overflow-wrap:anywhere}
#plan-view,.ainora-billing{grid-template-columns:minmax(0,1fr)}
#plan-view>*,.ainora-billing>*{min-width:0}
/* "Duración de llamadas" on narrow phones */
#plan-view .usage-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
#plan-view .usage-filters input,#plan-view .usage-filters button{min-width:0;width:100%}
#plan-view .usage-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
#plan-view .usage-metrics>*{min-width:0}
@media (max-width:380px){.user-trigger .chip-text{display:none}}