@import "./tokens.css";

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
  }

  body {
    font-family: var(--font-sans);
    background: var(--color-background);
    color: var(--color-foreground);
    font-size: 15px;       /* iOS-default body size */
    line-height: 1.47059;  /* Apple HIG default body leading */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "ss01", "cv11";
    margin: 0;
    min-height: 100dvh;
    letter-spacing: -0.005em;
  }

  h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-primary);
    letter-spacing: -0.022em;     /* Apple display tracking */
    margin: 0;
  }

  h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.028em; }
  h2 { font-size: 24px; letter-spacing: -0.024em; }
  h3 { font-size: 20px; letter-spacing: -0.02em; }
  h4 { font-size: 17px; letter-spacing: -0.014em; }

  p { margin: 0; }

  a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
  }
  a:hover { color: var(--color-accent-hover); }

  button {
    font-family: inherit;
    cursor: pointer;
  }

  /* Focus rings — visible, accent-colored halo */
  :focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-accent-tint-strong);
    border-radius: var(--radius);
    transition: box-shadow var(--duration-fast) var(--ease-out);
  }
  :focus:not(:focus-visible) { outline: none; }

  .tabular-nums { font-variant-numeric: tabular-nums; }

  /* Scrollbar polish (webkit) */
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: var(--gray-4);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--gray-3); background-clip: padding-box; border: 2px solid transparent; }

  /* Selection */
  ::selection {
    background: var(--color-accent-tint-strong);
    color: var(--color-primary);
  }
}

@layer components {

  /* ============================ Buttons ============================ */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    padding: 0 16px;
    border-radius: var(--radius-lg);
    font-weight: 500;
    font-size: 15px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-primary);
    letter-spacing: -0.005em;
    transition: background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-spring),
                box-shadow var(--duration-fast) var(--ease-out);
    user-select: none;
    white-space: nowrap;
    touch-action: manipulation;
  }
  .btn svg { width: 18px; height: 18px; flex: none; }
  .btn:active:not(:disabled) { transform: scale(0.96); }
  .btn:disabled { opacity: 0.4; cursor: not-allowed; }

  .btn-primary {
    background: var(--color-accent);
    color: var(--color-on-accent);
    box-shadow: 0 1px 1px rgba(0,0,0,0.05);
  }
  .btn-primary:hover:not(:disabled) { background: var(--color-accent-hover); }
  .btn-primary:active:not(:disabled) { background: var(--color-accent-active); }

  .btn-secondary {
    background: var(--color-surface);
    color: var(--color-primary);
    border-color: var(--color-border);
  }
  .btn-secondary:hover:not(:disabled) {
    background: var(--color-surface-secondary);
    border-color: var(--color-border-strong);
  }

  /* iOS-style tinted button */
  .btn-tinted {
    background: var(--color-accent-tint);
    color: var(--color-accent);
  }
  .btn-tinted:hover:not(:disabled) { background: var(--color-accent-tint-strong); }

  .btn-ghost {
    background: transparent;
    color: var(--color-primary);
  }
  .btn-ghost:hover:not(:disabled) { background: var(--color-surface-secondary); }

  .btn-destructive {
    background: var(--color-destructive);
    color: #FFFFFF;
  }
  .btn-destructive:hover:not(:disabled) { background: #B91C1C; }

  .btn-destructive-tinted {
    background: var(--color-destructive-tint);
    color: var(--color-destructive);
  }
  .btn-destructive-tinted:hover:not(:disabled) {
    background: rgba(220, 38, 38, 0.18);
  }

  .btn-sm { height: 32px; padding: 0 10px; font-size: 13px; border-radius: var(--radius); }
  .btn-sm svg { width: 16px; height: 16px; }
  .btn-lg { height: 48px; padding: 0 20px; font-size: 16px; border-radius: var(--radius-lg); }
  .btn-icon { width: 40px; padding: 0; }
  .btn-icon.btn-sm { width: 32px; }

  /* ============================ Inputs ============================ */
  .input,
  .textarea,
  .select {
    width: 100%;
    height: 44px;            /* 44pt min Apple HIG touch target */
    padding: 0 12px;
    background: var(--color-surface-secondary);
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 16px;         /* 16px avoids iOS auto-zoom-on-focus */
    color: var(--color-foreground);
    transition: background var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
    letter-spacing: -0.005em;
  }
  @media (min-width: 768px) {
    .input, .textarea, .select { height: 40px; font-size: 15px; }
  }
  .textarea {
    height: auto;
    min-height: 96px;
    padding: 10px 12px;
    line-height: 1.5;
    resize: vertical;
  }
  .input::placeholder,
  .textarea::placeholder {
    color: var(--color-muted-foreground);
  }
  .input:focus,
  .textarea:focus,
  .select:focus {
    outline: none;
    background: var(--color-surface);
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-tint);
  }
  .input[aria-invalid="true"],
  .textarea[aria-invalid="true"] {
    border-color: var(--color-destructive);
    box-shadow: 0 0 0 3px var(--color-destructive-tint);
  }

  .select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    padding-right: 36px;
  }

  /* Checkbox / Radio polish */
  input[type="checkbox"], input[type="radio"] {
    width: 18px; height: 18px;
    accent-color: var(--color-accent);
    cursor: pointer;
  }

  .label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-secondary);
    margin-bottom: 6px;
    letter-spacing: -0.005em;
  }

  .helper {
    font-size: 12px;
    color: var(--color-muted-foreground);
    margin-top: 6px;
  }

  .error {
    font-size: 12px;
    color: var(--color-destructive);
    margin-top: 6px;
    font-weight: 500;
  }

  /* ============================ Card ============================ */
  .card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
  }

  /* ============================ Badge ============================ */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
    background: var(--color-muted);
    color: var(--color-secondary);
    letter-spacing: 0.01em;
    text-transform: uppercase;
  }
  .badge-success     { background: var(--color-success-tint); color: var(--color-success); }
  .badge-warning     { background: var(--color-warning-tint); color: var(--color-warning); }
  .badge-destructive { background: var(--color-destructive-tint); color: var(--color-destructive); }
  .badge-accent      { background: var(--color-accent-tint); color: var(--color-accent); }

  /* ============================ Segmented control (iOS) ============================ */
  .segmented {
    display: inline-flex;
    padding: 2px;
    background: var(--color-surface-secondary);
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
  }
  .segmented > button {
    height: 32px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-secondary);
    background: transparent;
    border: none;
    border-radius: 6px;
    transition: all var(--duration-fast) var(--ease-spring);
    cursor: pointer;
  }
  .segmented > button[aria-selected="true"],
  .segmented > button.active {
    background: var(--color-surface);
    color: var(--color-primary);
    box-shadow: var(--shadow-sm);
  }
  .segmented > button:hover:not([aria-selected="true"]):not(.active) {
    color: var(--color-primary);
  }

  /* ============================ Layout shells ============================ */
  .app-shell {
    display: flex;
    min-height: 100dvh;
  }
  @media (min-width: 768px) {
    .app-main {
      margin-left: var(--side-rail-width);
      flex: 1;
    }
  }
  @media (max-width: 767.98px) {
    .app-main {
      /* tab-bar (60px) + safe-area + buffer extra para que el último elemento
       * del scroll no quede pegado / tapado por la nav inferior */
      padding-bottom: calc(var(--tab-bar-height) + var(--safe-area-bottom) + 48px);
      flex: 1;
    }
    /* Cuando hay action bar flotante (selección odontograma o similar), todavía
     * más buffer */
    body.has-floating-action .app-main {
      padding-bottom: calc(var(--tab-bar-height) + var(--safe-area-bottom) + 96px);
    }
  }

  /* ─── Focus mode (odontograma) ──────────────────────────────────────
   * En viewports menores a desktop (< 1024px), ocultar side rail y bottom
   * tab bar para que el odontograma tenga el ancho completo. La navegación
   * se hace por el hamburger ☰ Secciones del header de la vista enfocada.
   * En desktop real (>= 1024px) mantiene el side rail porque hay espacio.
   */
  @media (max-width: 1023.98px) {
    body.odonto-focus .app-side-rail { display: none !important; }
    body.odonto-focus .app-main { margin-left: 0 !important; }
    body.odonto-focus #tab-bar { display: none !important; }
    body.odonto-focus header.md\:hidden { display: none !important; }
    body.odonto-focus .app-main { padding-top: 0 !important; padding-bottom: 16px !important; }
    body.odonto-focus .app-main > .md\:hidden:first-child { display: none !important; }
  }

  /* ============================ Patient detail v3 · viewport-locked ============================
   * Layout: app rail (existing fixed) + identity bar (top, full width) + body grid
   *   (bento sidebar + content scroll).
   *
   * Desktop (≥768px): body locked to 100dvh, overflow hidden. ONLY the content area scrolls.
   * App rail, identity bar, bento sidebar — all fixed. User-chip always visible at rail's bottom.
   *
   * Mobile (<768px): traditional natural scroll (body scrolls). Bento hidden, hamburger reveals
   * grouped bottom sheet. Identity stays compact at top, scrolls with page.
   *
   * Odontograma focus mode is independent — uses :not(.odonto-focus) to preserve existing behavior.
   *
   * Triggered by body.patient-detail (added by patients.renderDetail, removed on route change).
   */

  /* ─── Desktop body lock ─────────────────────────────────────────────── */
  @media (min-width: 768px) {
    body.patient-detail:not(.odonto-focus) {
      overflow: hidden;
      height: 100dvh;
    }
    body.patient-detail:not(.odonto-focus) .app-shell { height: 100dvh; overflow: hidden; }
    body.patient-detail:not(.odonto-focus) .app-main {
      height: 100dvh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      padding: 0;
    }
    body.patient-detail:not(.odonto-focus) #view {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      min-height: 0;
      padding: 0;
    }
  }

  /* ─── Patient shell wrapper ─────────────────────────────────────────── */
  .patient-shell-v2 {
    display: flex;
    flex-direction: column;
  }
  @media (min-width: 768px) {
    .patient-shell-v2 {
      flex: 1;
      height: 100%;
      overflow: hidden;
      min-height: 0;
    }
  }

  /* Crumb (above identity bar) */
  .patient-crumb {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-muted-foreground);
    padding: 12px 18px 0;
    text-decoration: none;
    transition: color 150ms ease-out;
    width: max-content;
  }
  .patient-crumb:hover { color: var(--color-primary); }
  .patient-crumb svg { opacity: 0.7; }

  /* ─── Identity bar (top, full width, fixed in flex column) ──────────── */
  .patient-identity-bar {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 14px 16px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    overflow: hidden;
    flex: none;
    margin: 10px 16px 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  }
  .patient-identity-bar::before {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 200px; height: 200px;
    background: radial-gradient(circle at 30% 30%, rgba(3, 105, 161, 0.10), transparent 65%);
    pointer-events: none;
  }
  @media (min-width: 768px) {
    .patient-identity-bar {
      padding: 16px 22px;
      gap: 22px;
      border-radius: 16px;
      margin: 14px 18px 0;
    }
  }

  .pid-avatar {
    width: 46px; height: 46px;
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(3, 105, 161, 0.16), rgba(3, 105, 161, 0.04));
    color: var(--color-accent);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 17px;
    border: 1px solid rgba(3, 105, 161, 0.20);
    flex: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
    letter-spacing: 0.01em;
  }
  @media (min-width: 768px) {
    .pid-avatar { width: 56px; height: 56px; border-radius: 15px; font-size: 21px; }
  }

  .pid-info { min-width: 0; position: relative; }
  .pid-name-row {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 4px;
  }
  .pid-name {
    font-size: 18px; font-weight: 800;
    letter-spacing: -0.022em;
    line-height: 1.15;
    color: var(--color-primary);
    margin: 0;
    overflow-wrap: anywhere;
  }
  @media (min-width: 768px) {
    .pid-name { font-size: 22px; letter-spacing: -0.025em; }
  }
  .pid-sub { font-size: 12.5px; color: var(--color-muted-foreground); }
  .pid-pill {
    background: var(--color-accent-tint);
    color: var(--color-accent);
    font-size: 9.5px; font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
  }

  /* Identifiers row: hidden mobile (use Ficha tab), visible desktop */
  .pid-ids { display: none; }
  @media (min-width: 768px) {
    .pid-ids {
      display: flex; flex-wrap: wrap;
      gap: 4px 16px;
      font-size: 13px;
      color: var(--color-secondary);
    }
    .pid-id {
      display: inline-flex; align-items: center; gap: 6px;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.003em;
    }
    .pid-id svg { opacity: 0.5; flex: none; }
  }

  .pid-right {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  /* Stats hidden under 1024px, visible on wide desktop */
  .pid-stats { display: none; }
  @media (min-width: 1024px) {
    .pid-stats { display: flex; gap: 8px; }
    .pid-stat {
      background: var(--color-background);
      border: 1px solid var(--color-border);
      border-radius: 10px;
      padding: 7px 11px;
      min-width: 104px;
    }
    .pid-stat-lbl {
      font-size: 9.5px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.09em;
      color: var(--color-muted-foreground);
      margin-bottom: 2px;
    }
    .pid-stat-val { font-size: 13px; font-weight: 700; color: var(--color-primary); }
    .pid-stat-val.muted { color: var(--color-muted-foreground); font-weight: 500; }
  }

  .pid-actions { display: flex; gap: 6px; }
  /* button.X specificity overrides Tailwind preflight button reset */
  button.pid-act {
    height: 34px;
    padding: 0 11px !important;
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 9px;
    margin: 0 !important;
    color: var(--color-secondary);
    font-size: 12.5px; font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    font-family: inherit;
    transition: all 150ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  @media (min-width: 768px) {
    button.pid-act { height: 36px; padding: 0 12px; font-size: 13px; }
  }
  button.pid-act:hover {
    background: var(--color-background);
    border-color: rgba(15, 23, 42, 0.14);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px -3px rgba(15, 23, 42, 0.08);
  }
  button.pid-act:focus-visible {
    outline: 2px solid var(--color-ring);
    outline-offset: 2px;
  }
  button.pid-act.icon { width: 34px; padding: 0; }
  @media (min-width: 768px) {
    button.pid-act.icon { width: 36px; }
  }
  button.pid-act.danger { color: var(--color-destructive); }
  button.pid-act.danger:hover {
    background: rgba(220, 38, 38, 0.05);
    border-color: rgba(220, 38, 38, 0.22);
  }
  button.pid-act .lbl-text { display: none; }
  @media (min-width: 480px) {
    button.pid-act .lbl-text { display: inline; }
  }

  /* ─── Mobile section selector ───────────────────────────────────────
   * Refined: surface card with accent left-bar indicator + tinted icon.
   * Uses button.X specificity to override Tailwind preflight reset which
   * sets button { padding:0; border:0; background:transparent; margin:0 }
   * with higher cascade priority than the @layer components order suggests.
   */
  /* !important on the 4 props that Tailwind Play CDN resets via UNLAYERED
   * preflight (background/padding/border/margin on bare `button`).
   * Unlayered rules beat ANY @layer rules regardless of specificity.
   */
  button.patient-mobile-hamburger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 8px 16px 0 !important;
    padding: 10px 12px 10px 14px !important;
    background: var(--color-surface) !important;
    color: var(--color-primary);
    border-radius: 12px;
    border: 1px solid var(--color-border) !important;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    touch-action: manipulation;
    width: calc(100% - 32px);
    transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
    position: relative;
  }
  button.patient-mobile-hamburger::before {
    /* Accent left-bar — signals "current section" without screaming */
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: var(--color-accent);
    border-radius: 0 3px 3px 0;
  }
  button.patient-mobile-hamburger:hover,
  button.patient-mobile-hamburger:active {
    border-color: rgba(3, 105, 161, 0.30);
    box-shadow: 0 4px 12px -4px rgba(3, 105, 161, 0.15);
  }
  button.patient-mobile-hamburger:focus-visible {
    outline: 2px solid var(--color-ring);
    outline-offset: 2px;
  }
  @media (min-width: 768px) {
    button.patient-mobile-hamburger { display: none; }
  }
  .pmh-left { display: flex; align-items: center; gap: 11px; min-width: 0; }
  .pmh-ic {
    width: 32px; height: 32px;
    border-radius: 9px;
    background: var(--color-accent-tint);
    color: var(--color-accent);
    display: flex; align-items: center; justify-content: center;
    flex: none;
  }
  .pmh-ic svg { stroke: currentColor; }
  .pmh-meta { text-align: left; min-width: 0; }
  .pmh-meta-lbl {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: var(--color-muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.09em;
    margin-bottom: 1px;
  }
  .pmh-meta-name {
    display: block;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-primary);
    letter-spacing: -0.012em;
  }
  .pmh-chevron {
    flex: none;
    color: var(--color-muted-foreground);
    margin-left: 8px;
  }

  /* ─── Body grid: bento sidebar + content ────────────────────────────── */
  .patient-body-grid {
    display: grid;
    grid-template-columns: 1fr;
    padding: 10px 16px 16px;
  }
  @media (min-width: 768px) {
    .patient-body-grid {
      grid-template-columns: 280px minmax(0, 1fr);
      gap: 16px;
      padding: 12px 18px 16px;
      flex: 1;
      overflow: hidden;
      min-height: 0;
    }
  }

  /* Bento sidebar — desktop only */
  .patient-bento-sidebar { display: none; }
  @media (min-width: 768px) {
    .patient-bento-sidebar {
      display: flex;
      flex-direction: column;
      gap: 10px;
      overflow-y: auto;
      overflow-x: hidden;
      scrollbar-width: thin;
      scrollbar-color: var(--color-border) transparent;
      padding-right: 4px;
    }
    .patient-bento-sidebar::-webkit-scrollbar { width: 5px; }
    .patient-bento-sidebar::-webkit-scrollbar-thumb {
      background: var(--color-border);
      border-radius: 3px;
    }
  }

  .pbento {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 13px;
    padding: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  }
  .pbento-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px 7px;
    border-bottom: 1px dashed var(--color-border);
    margin-bottom: 5px;
  }
  .pbento-title {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 10.5px; font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }
  .pbento-dot { width: 8px; height: 8px; border-radius: 50%; }
  /* Group themes — RGB triplet for opacity composition */
  .pbento[data-group="identidad"]  { --g: 100, 116, 139; }
  .pbento[data-group="clinico"]    { --g: 3, 105, 161; }
  .pbento[data-group="comercial"]  { --g: 5, 150, 105; }
  .pbento[data-group="documentos"] { --g: 217, 119, 6; }
  .pbento .pbento-title { color: rgb(var(--g, 100, 116, 139)); }
  .pbento .pbento-dot   { background: rgb(var(--g, 100, 116, 139)); }

  .pbento-count {
    font-size: 10px; font-weight: 600;
    color: var(--color-muted-foreground);
    background: var(--color-background);
    padding: 2px 7px;
    border-radius: 999px;
  }

  .pbento-items { display: flex; flex-direction: column; gap: 2px; }
  button.pbento-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px !important;
    border: 2px solid transparent !important;
    background: transparent !important;
    border-radius: 9px;
    color: var(--color-secondary);
    font-size: 13.5px; font-weight: 500;
    text-align: left;
    cursor: pointer;
    width: 100%;
    font-family: inherit;
    transition: all 160ms cubic-bezier(0.32, 0.72, 0, 1);
    letter-spacing: -0.005em;
  }
  button.pbento-item:hover {
    background: rgba(15, 23, 42, 0.04);
    color: var(--color-primary);
  }
  button.pbento-item:focus-visible {
    outline: 2px solid var(--color-ring);
    outline-offset: 2px;
  }
  .pbento-ic {
    width: 26px; height: 26px;
    border-radius: 7px;
    background: rgba(var(--g, 100, 116, 139), 0.10);
    color: rgb(var(--g, 100, 116, 139));
    display: flex; align-items: center; justify-content: center;
    flex: none;
    transition: all 160ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  .pbento-lbl { flex: 1; }

  /* Active state — OUTLINED, not filled */
  button.pbento-item[aria-selected="true"] {
    background: rgba(3, 105, 161, 0.05);
    border-color: var(--color-accent);
    color: var(--color-accent);
    font-weight: 700;
    box-shadow: 0 0 0 3px rgba(3, 105, 161, 0.08);
  }
  button.pbento-item[aria-selected="true"] .pbento-ic {
    background: var(--color-accent-tint);
    color: var(--color-accent);
  }

  /* Content scroll area */
  .patient-content-scroll {
    min-width: 0;
    padding: 0;
  }
  @media (min-width: 768px) {
    .patient-content-scroll {
      overflow-y: auto;
      overflow-x: hidden;
      min-height: 0;
      padding: 0 6px 8px 4px;
      scrollbar-width: thin;
      scrollbar-color: var(--color-border) transparent;
    }
    .patient-content-scroll::-webkit-scrollbar { width: 8px; }
    .patient-content-scroll::-webkit-scrollbar-thumb {
      background: var(--color-border);
      border-radius: 4px;
    }
    .patient-content-scroll::-webkit-scrollbar-thumb:hover {
      background: var(--color-muted-foreground);
    }
  }

  /* ============================ Patient avatar (reusable circle) ============================
   * Used in patient list rows + identity bar.
   * Photo takes precedence; initials fallback uses accent gradient + white text.
   * Size controlled by inline width/height + font-size at the call site.
   *
   * Markup:
   *   <div class="patient-avatar" data-storage-path="...">JV</div>
   *   When data-storage-path is set, JS will hydrate background-image.
   */
  .patient-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    border-radius: 50%;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #FFFFFF;
    background:
      linear-gradient(135deg, #0369A1 0%, #0284C7 100%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      0 1px 3px rgba(3, 105, 161, 0.18);
    overflow: hidden;
    user-select: none;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-transform: uppercase;
    line-height: 1;
  }
  /* When a photo is loaded, the text is hidden via opacity (keeps initials in DOM for a11y) */
  .patient-avatar.has-photo {
    color: transparent;
    background-image: var(--avatar-url);
    background-color: var(--color-muted);
  }
  /* Editable variant — hover overlay with camera icon */
  .patient-avatar.editable {
    cursor: pointer;
    position: relative;
    transition: transform 180ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  .patient-avatar.editable:hover {
    transform: scale(1.03);
  }
  .patient-avatar.editable::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
      rgba(15, 23, 42, 0.55)
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/><circle cx='12' cy='13' r='4'/></svg>")
      center / 40% no-repeat;
    opacity: 0;
    transition: opacity 180ms ease-out;
  }
  .patient-avatar.editable:hover::after {
    opacity: 1;
  }
  .patient-avatar.editable:focus-visible {
    outline: 2px solid var(--color-ring);
    outline-offset: 2px;
  }

  /* ============================ Patient files (Archivos tab) ============================ */
  .pf-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border);
    transition: background 150ms ease-out;
  }
  .pf-row:last-child { border-bottom: 0; }
  .pf-row:hover { background: var(--color-background); }
  .pf-thumb {
    width: 44px; height: 44px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex: none;
  }
  .pf-meta { flex: 1; min-width: 0; }
  .pf-name {
    font-size: 14px; font-weight: 600;
    color: var(--color-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 3px;
  }
  .pf-sub {
    display: flex; flex-wrap: wrap; gap: 4px 10px;
    font-size: 12px;
    color: var(--color-muted-foreground);
    align-items: center;
  }
  .pf-cat {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 4px;
  }
  .pf-cap {
    color: var(--color-secondary);
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-style: italic;
  }
  .pf-actions {
    display: flex;
    gap: 4px;
    flex: none;
  }

  /* ============================ Toast ============================ */
  .toast {
    position: fixed;
    top: calc(16px + var(--safe-area-top));
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-toast);
    background: rgba(15, 23, 42, 0.92);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    color: var(--color-on-primary);
    padding: 12px 18px;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-lg);
    font-size: 14px;
    font-weight: 500;
    max-width: calc(100vw - 32px);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    animation: toast-in var(--duration-slow) var(--ease-spring);
  }
  .toast svg { width: 16px; height: 16px; flex: none; }
  .toast-success { background: var(--color-success); }
  .toast-error   { background: var(--color-destructive); }

  @keyframes toast-in {
    from { transform: translateX(-50%) translateY(-16px); opacity: 0; }
    to   { transform: translateX(-50%) translateY(0); opacity: 1; }
  }

  /* ============================ Scrim / Modal / Sheet ============================ */
  .scrim {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: var(--z-overlay);
    animation: fade-in var(--duration) var(--ease-out);
  }
  .modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    z-index: var(--z-modal);
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100dvh - 64px);
    overflow: auto;
    animation: modal-in var(--duration-slow) var(--ease-spring);
  }
  .sheet {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--color-surface);
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    box-shadow: var(--shadow-xl);
    z-index: var(--z-modal);
    max-height: 92dvh;
    overflow: auto;
    padding-bottom: var(--safe-area-bottom);
    animation: sheet-in var(--duration-slow) var(--ease-spring);
  }
  .sheet::before {
    content: '';
    display: block;
    width: 36px; height: 5px;
    background: var(--gray-4);
    border-radius: 9999px;
    margin: 8px auto 0;
  }
  @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes modal-in {
    from { opacity: 0; transform: translate(-50%, -48%) scale(0.96); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  }
  @keyframes sheet-in {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }

  /* ============================ Skeleton ============================ */
  .skeleton {
    background: linear-gradient(90deg, var(--color-surface-secondary) 0%, #FAFBFC 50%, var(--color-surface-secondary) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.4s linear infinite;
    border-radius: var(--radius);
  }
  @keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  /* ============================ Brand ============================ */
  .brand-mark {
    font-family: var(--font-sans);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--color-primary);
  }

  /* ============================ List row ============================ */
  .list-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-divider);
    transition: background var(--duration-fast) var(--ease-out);
    cursor: pointer;
  }
  .list-row:last-child { border-bottom: none; }
  .list-row:hover { background: var(--color-surface-secondary); }
  .list-row:active { background: var(--color-muted); }

  /* ============================ Sidebar nav item ============================ */
  .nav-item {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 12px;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-secondary);
    transition: background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
    letter-spacing: -0.005em;
  }
  .nav-item svg { width: 20px; height: 20px; flex: none; }
  .nav-item:hover { background: var(--color-surface-secondary); color: var(--color-primary); }
  .nav-item.active {
    background: var(--color-accent-tint);
    color: var(--color-accent);
    font-weight: 600;
  }
  .nav-item.active svg { color: var(--color-accent); }

  /* ============================ Tab nav — FOLDER TABS ============================
     Like the tabs of a manila folder. Each tab has rounded top corners only.
     Active tab fills with accent BLUE and "pops up", connecting visually to the
     content card below. Inactive tabs sit recessed in muted gray. */
  .tab-nav,
  .tabnav-noscrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .tab-nav::-webkit-scrollbar,
  .tabnav-noscrollbar::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .tab-nav {
    display: flex; gap: 4px;
    padding: 6px 4px 0;
    background: transparent;
    border-bottom: 2px solid var(--color-accent);
    overflow-x: auto;
    overflow-y: hidden;
    align-items: flex-end;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 0 !important;
  }

  .tab-nav > button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 16px;
    height: 36px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--color-muted-foreground);
    background: var(--color-surface-secondary);
    border: 1px solid var(--color-border);
    border-bottom: none;
    border-radius: 10px 10px 0 0;          /* rounded TOP corners only */
    margin-bottom: -2px;                    /* overlap the parent border-bottom */
    transition: all var(--duration) var(--ease-spring);
    white-space: nowrap;
    cursor: pointer;
    letter-spacing: -0.005em;
    flex: none;
    position: relative;
    bottom: 0;
  }
  .tab-nav > button svg {
    width: 15px; height: 15px;
    flex: none;
    opacity: 0.7;
    transition: all var(--duration) var(--ease-spring);
  }

  .tab-nav > button:hover:not(.active) {
    color: var(--color-primary);
    background: var(--color-surface);
    bottom: 2px;
  }
  .tab-nav > button:hover:not(.active) svg { opacity: 1; }
  .tab-nav > button:active:not(.active) { transform: translateY(1px); }

  .tab-nav > button.active {
    background: var(--color-accent);
    color: var(--color-on-accent);
    border-color: var(--color-accent);
    font-weight: 600;
    height: 40px;
    padding: 0 20px;
    font-size: 13px;
    bottom: 0;
    box-shadow: 0 -4px 12px rgba(3, 105, 161, 0.18),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
    z-index: 2;
  }
  .tab-nav > button.active svg {
    opacity: 1;
    color: var(--color-on-accent);
  }

  /* ============================ Avatar ============================ */
  .avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border-radius: var(--radius-full);
    background: var(--color-accent-tint);
    color: var(--color-accent);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    flex: none;
  }
  .avatar-lg { width: 48px; height: 48px; font-size: 16px; }

  /* ============================ Empty state ============================ */
  .empty-state {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 64px 24px;
    text-align: center;
  }
  .empty-state-icon {
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-full);
    background: var(--color-surface-secondary);
    color: var(--color-muted-foreground);
    margin-bottom: 16px;
  }
  .empty-state-icon svg { width: 28px; height: 28px; }
  .empty-state h2 {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 6px;
  }
  .empty-state p {
    color: var(--color-muted-foreground);
    font-size: 14px;
    max-width: 320px;
    margin-bottom: 20px;
  }

  /* ============================ Table polish ============================ */
  .table-clean {
    width: 100%;
    font-size: 14px;
  }
  .table-clean thead {
    background: var(--color-surface-secondary);
  }
  .table-clean thead th {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-muted-foreground);
    text-align: left;
    padding: 10px 16px;
  }
  .table-clean tbody td {
    padding: 12px 16px;
    border-top: 1px solid var(--color-divider);
  }
  .table-clean tbody tr {
    transition: background var(--duration-fast) var(--ease-out);
  }
  .table-clean tbody tr:hover {
    background: var(--color-surface-secondary);
    cursor: pointer;
  }
}

@layer utilities {
  .container-app {
    max-width: var(--content-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
  }
  @media (min-width: 768px) {
    .container-app { padding-left: 32px; padding-right: 32px; }
  }
}