/* Claudbar · Estilo Apple: tipografía del sistema, radios amplios, vidrio suave y sombras finas.
   Se carga el último. Solo cambia el aspecto; no toca el funcionamiento. */
:root {
  --ap-radius: 18px;
  --ap-radius-sm: 12px;
  --ap-line: rgba(255,255,255,.08);
  --ap-glass: rgba(28,28,34,.72);
  --ap-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 28px rgba(0,0,0,.28);
  --ap-accent: #8e7bf0;
}
html, body, button, input, select, textarea {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI Variable", "Segoe UI", Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}
h1, h2, h3, .opt-card > h2, .sv-section > h3, .opt-brand, .cb-opt-hero b {
  font-weight: 600 !important; letter-spacing: -0.02em !important;
}

/* Tarjetas y paneles: vidrio suave, radios amplios, sin bordes duros */
.opt-card, .opt-group, .sv-section .card, .card, .model-card, .feature-card, .agent-card, .pv-card, .cb-look, .live-overlay .live-img-frame img {
  border-radius: var(--ap-radius) !important;
}
.opt-card, .opt-group, .sv-section .card, .card {
  background: var(--ap-glass) !important;
  border: 1px solid var(--ap-line) !important;
  box-shadow: var(--ap-shadow) !important;
}
.opt-row + .opt-row, .check-row + .check-row { border-top-color: rgba(255,255,255,.06) !important; }

/* Botones: píldora, sin sombras de color; el morado solo en la acción principal */
button { transition: background-color .2s ease, transform .15s cubic-bezier(.2,.8,.2,1), opacity .2s ease; }
.btn-primary, .vs-ok, .sv-tab.active, .ns-opt[aria-selected="true"] { background: var(--ap-accent) !important; color: #fff !important; }
.btn-primary, .btn-ghost, .btn-danger, .vs-ok { border-radius: 999px !important; }
.btn-ghost { background: rgba(255,255,255,.06) !important; border: 0 !important; color: #f4f4f8 !important; }
.btn-ghost:hover { background: rgba(255,255,255,.12) !important; }

/* Campos y menús: vidrio y radios suaves */
input[type="text"], input[type="url"], input[type="password"], input[type="number"], textarea, select, .ns-btn {
  border-radius: var(--ap-radius-sm) !important;
  border: 1px solid var(--ap-line) !important;
  background: rgba(255,255,255,.04) !important;
}
.ns-list, .menu, #model-menu, .cb-acct-menu, .top-menu { border-radius: var(--ap-radius) !important; box-shadow: 0 18px 44px rgba(0,0,0,.42) !important; }

/* Interruptores: estilo iOS (ya los tenemos; aseguramos el radio y el tamaño) */
.check-row input[type="checkbox"] { border-radius: 999px !important; }

/* Live: el mismo lenguaje (tipografía y vidrio) */
.live-overlay { font-family: inherit; }
.live-caption { font-weight: 500; letter-spacing: -0.01em; }
.live-btn { box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.live-img-btn { border-radius: 999px !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

@media (prefers-reduced-motion: reduce) { button { transition: none !important; } }

/* Ajustes › Cuenta: filas limpias, contadores alineados y campos con su tamaño */
.opt-card .opt-row { align-items: center; }
.opt-card .opt-row .txt b { font-size: 14.5px !important; }
.opt-card .acct-stepper input, .opt-card .acct-form input, .opt-card form input { min-height: 40px; }
.opt-card form input::placeholder { font-size: 13px; }
.opt-card .opt-row small, .opt-card .txt small { line-height: 1.4; }
.opt-card .opt-row > span { font-size: 13px; color: #9b9bb0; }
.opt-card .acct-form input[type="password"], .opt-card .acct-form input[type="text"] { width: 100%; }

/* Sin rastros de estrellas fugaces detrás de la nube, los mensajes y las filas de ajustes (el cielo se queda) */
.cloud-bubble ~ .cb-meteors, .message .cb-meteors, .opt-card .cb-meteors { display: none !important; }
.cb-meteors i { will-change: auto; }
.message, .bubble, .cloud-bubble, .opt-card, .opt-group, .opt-row { position: relative; }
.opt-row::before, .opt-row::after, .message::before, .message::after, .cloud-bubble::after { background-image: none !important; }

/* Ajustes › Cuenta: contadores de uso (Mensajes, Imágenes, Créditos del agente) con su barra visible */
.acct-meter { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.acct-meter-top { display: flex !important; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14px !important; }
.acct-meter-top b { font-weight: 600; color: #ecebf5; }
.acct-meter-top small { font-size: 12.5px; color: #9b9bb0; white-space: nowrap; }
.acct-meter-bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.acct-meter-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #8e7bf0, #6fb6ff); transition: width .4s cubic-bezier(.16,1,.3,1); }
.acct-bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: 2px; }
.acct-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #8e7bf0, #6fb6ff); transition: width .4s cubic-bezier(.16,1,.3,1); }
.acct-bar[data-level="ok"] i { background: linear-gradient(90deg, #60a5fa, #38bdf8) !important; }
.acct-bar[data-level="mid"] i { background: #fbbf24 !important; }
.acct-bar[data-level="low"] i { background: #f87171 !important; }

/* Uso de la cuenta: cada medidor ocupa el ancho de la tarjeta y su barra se ve */
.opt-row.acct-usage { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 14px !important; padding: 18px 22px !important; }
.acct-usage .acct-meter { display: flex !important; flex-direction: column !important; width: 100% !important; gap: 8px !important; }
.acct-usage .acct-meter-top { display: flex !important; justify-content: space-between !important; align-items: baseline !important; width: 100% !important; text-align: left !important; }
.acct-usage .acct-bar { display: block !important; width: 100% !important; height: 8px !important; min-height: 8px !important; border-radius: 999px !important; background: rgba(255,255,255,.09) !important; overflow: hidden !important; margin: 0 !important; }
.acct-usage .acct-bar i { display: block !important; height: 100% !important; min-width: 2px; border-radius: 999px !important; }

/* Cabecera de la tarjeta de documento: título y formato separados y legibles */
.doc-card-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px 6px; }
.doc-card-head > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.doc-card-head b { font-size: 15px; font-weight: 600; line-height: 1.3; }
.doc-card-head small { font-size: 12.5px; color: #9b9bb0; }
.doc-card-ico { font-size: 22px; flex: none; }
.doc-card-acts { padding: 10px 16px 16px; gap: 8px; }

/* El título del documento siempre en su línea, con el formato debajo */
.doc-card .doc-card-head > div { display: block; }
.doc-card .doc-card-head b { display: block; }
.doc-card .doc-card-head small { display: block; margin-top: 2px; }

/* Logos de formato en tarjetas y botones de documento */
.doc-card-ico { width: 30px; height: 36px; display: inline-flex; flex: none; }
.doc-btn-logo { width: 15px; height: 18px; display: inline-flex; flex: none; vertical-align: -3px; margin-right: 2px; }
.doc-card-btn { display: inline-flex; align-items: center; gap: 6px; }