/* EXTRACT: Piacere f6d99049 UI tokens/navigation. No production bindings. */
:root{
    /* ---- Ivory & Ink — paleta Clínica Piacere ---- */
    --ink:#14181F; --ink-2:#1D2430; --ink-line:rgba(214,190,140,0.18);
    --bg:#EAF5F7; --bg-2:#DCEBEF;
    --card:#FFFFFF; --card-tint:#FCFAF4;
    --border:#E6DCC7; --border-soft:#EFE7D6;
    --text:#221C14; --text-secondary:#7C7264; --text-faint:#A79C8A;

    --accent:#1F6E8C; --accent-bg:#D9EEF5; --accent-border:#8FC7DE; --accent-deep:#134A5F;
    --coral:#C1553A; --coral-bg:#F5E1D6; --coral-border:#E0AF98; --coral-deep:#8B2E1A;
    --amber:#8C5A17; --amber-bg:#F7EAD2; --amber-border:#E0C486;
    --sage:#3C6E5B; --sage-bg:#E1EEE7; --sage-border:#A9CBBB;
    --gray-bg:#EFE9DC;

    --shadow-xs:0 1px 2px rgba(34,28,20,0.06);
    --shadow-sm:0 2px 6px rgba(34,28,20,0.07), 0 1px 2px rgba(34,28,20,0.06);
    --shadow-md:0 10px 24px -8px rgba(34,28,20,0.20), 0 2px 8px rgba(34,28,20,0.08);
    --shadow-lg:0 24px 48px -12px rgba(20,24,31,0.35), 0 4px 12px rgba(34,28,20,0.10);
    --shadow-ink:0 20px 60px -12px rgba(0,0,0,0.55);

    --font-display:'Fraunces', Georgia, serif;
    --font-body:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  }
  .navCardGrid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(122px, 1fr)); gap:10px;
    width:100%; position:relative; z-index:1;
  }
  .navCard{
    --tiltX:0deg; --tiltY:0deg;
    position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
    min-height:74px; padding:10px 8px; border-radius:12px;
    background:linear-gradient(165deg, rgba(31,110,140,0.34), rgba(19,22,29,0.94) 68%);
    border:1px solid rgba(255,255,255,0.20); color:#F3F7F8;
    font-family:var(--font-body); font-size:11.5px; font-weight:600; letter-spacing:0.01em;
    cursor:pointer; text-align:center; overflow:hidden;
    box-shadow:
      0 1.5px 0 rgba(255,255,255,0.28) inset,
      0 -1.5px 0 rgba(0,0,0,0.55) inset,
      0 -9px 14px -10px rgba(0,0,0,0.6) inset,
      0 10px 18px -10px rgba(0,0,0,0.8),
      0 2px 3px -1px rgba(0,0,0,0.55);
    transform:perspective(700px) rotateX(var(--tiltX)) rotateY(var(--tiltY)) translateZ(0);
    transition:transform 200ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms ease, border-color 220ms ease;
    -webkit-tap-highlight-color:transparent;
  }
  /* El botón genérico del sistema le pone a TODOS los botones un brillo blanco encima (::after,
     pensado para botones de fondo claro) — en estas tarjetas oscuras se monta sobre el texto y
     el ícono (mismo z-index, pero se pinta después) y lava el contraste, sobre todo en hover.
     Se desactiva solo aquí — el resto de botones del sistema no se toca. */
  .navCard::after{ content:none; }
  .navCard:hover{ background:linear-gradient(165deg, rgba(31,110,140,0.40), rgba(19,22,29,0.96) 68%) !important; }
  .navCard::before, .navCard::after, .navCard .cornerBR, .navCard .cornerBL{
    content:''; position:absolute; width:9px; height:9px; opacity:0; transition:opacity 220ms ease;
    border-color:#5FE3F0; pointer-events:none;
  }
  .navCard::before{ top:5px; left:5px; border-top:1.5px solid; border-left:1.5px solid; }
  .navCard::after{ top:5px; right:5px; border-top:1.5px solid; border-right:1.5px solid; }
  .navCard .cornerBR{ bottom:5px; right:5px; border-bottom:1.5px solid #5FE3F0; border-right:1.5px solid #5FE3F0; }
  .navCard .cornerBL{ bottom:5px; left:5px; border-bottom:1.5px solid #5FE3F0; border-left:1.5px solid #5FE3F0; }
  .navCard:hover::before, .navCard:hover::after, .navCard:hover .cornerBR, .navCard:hover .cornerBL,
  .navCard:focus-visible::before, .navCard:focus-visible::after, .navCard:focus-visible .cornerBR, .navCard:focus-visible .cornerBL{ opacity:0.85; }
  .navCardIcoWrap{
    width:32px; height:32px; border-radius:9px; position:relative; display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08);
    transition:box-shadow 220ms ease, background 220ms ease, border-color 220ms ease;
  }
  .navCardIcoWrap::before{
    content:''; position:absolute; inset:-3px; border-radius:12px;
    background:conic-gradient(from 0deg, transparent, #5FE3F0 12%, transparent 24%, transparent 100%);
    opacity:0; transition:opacity 220ms ease; animation:navCardSpin 2.6s linear infinite; animation-play-state:paused;
  }
  .navCard:hover .navCardIcoWrap::before, .navCard:focus-visible .navCardIcoWrap::before{ opacity:0.55; animation-play-state:running; }
  @keyframes navCardSpin{ to{ transform:rotate(360deg); } }
  .navCard svg{ width:16px; height:16px; stroke:#F3F7F8; stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round; position:relative; z-index:1; transition:stroke 220ms ease, transform 220ms ease, filter 220ms ease; }
  .navCard .navCardLbl{ line-height:1.2; max-width:100%; position:relative; z-index:1; }
  .navCard:hover, .navCard:focus-visible{
    transform:perspective(700px) rotateX(var(--tiltX)) rotateY(var(--tiltY)) translateY(-4px) scale(1.025);
    border-color:rgba(95,227,240,0.5);
    box-shadow:
      0 1.5px 0 rgba(255,255,255,0.32) inset,
      0 -1.5px 0 rgba(0,0,0,0.55) inset,
      0 -9px 14px -10px rgba(0,0,0,0.6) inset,
      0 18px 28px -14px rgba(0,0,0,0.85),
      0 0 0 1px rgba(95,227,240,0.2),
      0 0 20px -6px rgba(95,227,240,0.4);
  }
  .navCard:hover .navCardIcoWrap, .navCard:focus-visible .navCardIcoWrap{ background:rgba(95,227,240,0.08); border-color:rgba(95,227,240,0.35); }
  .navCard:hover svg, .navCard:focus-visible svg{ transform:scale(1.08); filter:drop-shadow(0 0 5px rgba(95,227,240,0.5)); }
  .navCard:active{ transform:perspective(700px) scale(0.98); }
  .navCard:focus-visible{ outline:2px solid #5FE3F0; outline-offset:2px; }
  /* Módulo actualmente abierto — la clase se agrega/quita por JS al navegar */
  .navCard.navCardActive{
    border-color:rgba(95,227,240,0.55); background:linear-gradient(165deg, rgba(95,227,240,0.14), #12161D 68%);
    box-shadow:0 1px 0 rgba(255,255,255,0.08) inset, 0 0 0 1px rgba(95,227,240,0.3), 0 0 22px -8px rgba(95,227,240,0.4);
  }
  .navCard.navCardActive::before, .navCard.navCardActive::after, .navCard.navCardActive .cornerBR, .navCard.navCardActive .cornerBL{ opacity:0.7; }
  .navCard.navCardActive .navCardIcoWrap{ background:rgba(95,227,240,0.16); border-color:rgba(95,227,240,0.45); }
  .navCard.navCardActive svg{ stroke:#CFF7FC; }
  /* Tono dorado — igual función que el .piaGold anterior (Notificaciones/Planilla/Asistente) */
  .navCard.navCardGold{ background:linear-gradient(165deg, rgba(217,184,124,0.20), rgba(19,22,29,0.94) 68%); border-color:rgba(217,184,124,0.32); }
  .navCard.navCardGold .navCardIcoWrap{ background:rgba(217,184,124,0.09); }
  .navCard.navCardGold .navCardIcoWrap::before{ background:conic-gradient(from 0deg, transparent, #D9B87C 12%, transparent 24%, transparent 100%); }
  .navCard.navCardGold:hover, .navCard.navCardGold:focus-visible{ border-color:rgba(217,184,124,0.5); box-shadow:0 1px 0 rgba(255,255,255,0.08) inset, 0 -10px 16px -12px rgba(0,0,0,0.6) inset, 0 16px 26px -14px rgba(0,0,0,0.75), 0 0 0 1px rgba(217,184,124,0.2), 0 0 20px -6px rgba(217,184,124,0.4); }
  .navCard.navCardGold:hover svg, .navCard.navCardGold:focus-visible svg{ filter:drop-shadow(0 0 5px rgba(217,184,124,0.6)); }
  .navCard.navCardGold::before, .navCard.navCardGold::after, .navCard.navCardGold .cornerBR, .navCard.navCardGold .cornerBL{ border-color:#D9B87C; }
  /* Tono cálido — mismo lugar que el gradiente coral que ya tenía "Gasto rápido" */
  .navCard.navCardWarm{ background:linear-gradient(165deg, rgba(193,85,58,0.20), #12161D 68%); border-color:rgba(224,175,152,0.3); }
  .navCard.navCardWarm .navCardIcoWrap{ background:rgba(193,85,58,0.12); }
  .navCardBadge{
    position:absolute; top:6px; right:8px; z-index:2; background:#E0503A; color:#fff; font-size:10px; font-weight:700;
    min-width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; padding:0 3px;
    box-shadow:0 0 0 2px #12161D, 0 0 8px -1px rgba(224,80,58,0.8);
  }
  @media (prefers-reduced-motion: reduce){
    .navCard, .navCardIcoWrap::before{ transition:none; animation:none; }
    .navCard:hover, .navCard:focus-visible{ transform:none; }
  }
  @media (max-width:768px){
    .navCardGrid{ grid-template-columns:repeat(2, 1fr); gap:8px; }
    .navCard{ min-height:66px; }
  }


/* V2 bindings: same visual language, scoped to existing functional controls. */
:root{--navy:var(--ink);--muted:var(--text-secondary);--line:var(--border-soft);font-family:var(--font-body);color:var(--text);background:var(--bg)}
body{background:radial-gradient(1200px 500px at 15% -10%,rgba(162,121,61,.08),transparent 60%),var(--bg);color:var(--text);line-height:1.45;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.01em;color:var(--text)}
button,input,select,textarea{font-family:inherit;font-size:14px;border-radius:9px;border:1px solid var(--border);background:var(--card);color:var(--text);transition:border-color 140ms ease,box-shadow 140ms ease,background 140ms ease}
button{padding:9px 11px;box-shadow:0 2px 0 rgba(34,28,20,.16),var(--shadow-sm);font-weight:600;transition:transform 140ms ease,box-shadow 140ms ease,background 140ms ease}
button:hover{background:var(--gray-bg);transform:translateY(-1.5px);box-shadow:0 4px 0 rgba(34,28,20,.18),var(--shadow-md)}button:active{transform:translateY(2px) scale(.96)}button:disabled{transform:none;box-shadow:none}
input:focus,select:focus,textarea:focus{border-color:var(--accent-border);box-shadow:0 0 0 3px rgba(162,121,61,.16)}
.primary{background:var(--accent-bg);border:1px solid var(--accent-border);color:var(--accent-deep)}.primary:hover{background:#c6e4ef}.text-button{color:var(--accent-deep)}
.clinical-workspace .shell{display:block;max-width:1800px;margin:auto;padding:24px 20px}.clinical-workspace .brand-panel{padding:22px 26px;border:1px solid var(--ink-line);border-radius:20px;background:linear-gradient(145deg,var(--ink-2),var(--ink));box-shadow:var(--shadow-ink)}
.clinical-workspace .brand{font-family:var(--font-display);color:#fff8ea;font-size:25px;letter-spacing:2px}.clinical-workspace .brand-symbol{background:var(--accent-deep);color:white;box-shadow:0 0 22px rgba(63,169,196,.3)}
.clinical-workspace .clinical-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin:20px 0 0}.clinical-workspace .clinical-nav a{font-size:11.5px;padding:10px 8px;line-height:1.2}.clinical-workspace .brand-footer{display:none}
.clinical-workspace main{padding:18px 0 0}.clinical-workspace .content{max-width:none;padding:18px 0;margin:0}.clinical-workspace .topbar{font-size:12px;padding:0 4px}.clinical-workspace h2{font-size:28px;margin:10px 0}.clinical-workspace #account-label{font-size:12px;margin:0 0 18px}.clinical-workspace .step-label{display:none}
.clinical-workspace .clinical-panel,#work-queue{background:var(--card);border:1px solid var(--border-soft);border-radius:16px;padding:22px;box-shadow:var(--shadow-sm);margin:0}
.clinical-workspace input,.clinical-workspace select{min-height:40px;padding:9px 11px}.clinical-workspace label{font-size:12px;color:var(--text-secondary);margin:12px 0 6px}.clinical-workspace .primary{min-height:42px;padding:10px 14px;margin-top:18px}.clinical-workspace form{max-width:760px}.clinical-workspace form:has(fieldset){max-width:none}
.clinic-card,.chart-section,.work-card,.inventory-card,.balance-card{background:var(--card);border-color:var(--border-soft);box-shadow:var(--shadow-xs);border-radius:16px}.chart-section{padding:20px 22px;margin:14px 0}.chart-section h3{font-size:21px}.inventory-card.stock-low,.allergy-alert{background:var(--coral-bg);border-color:var(--coral-border)}
.patient-hero{background:var(--card);color:var(--text);border:1px solid var(--border-soft);box-shadow:var(--shadow-sm);padding:22px;margin-top:18px}.patient-hero h2{color:var(--accent-deep)}.patient-hero .eyebrow{color:var(--text-secondary)}.patient-hero p{font-size:12px;color:var(--text-secondary)}.patient-hero button{color:var(--accent-deep);font-size:12px;box-shadow:none;background:var(--accent-bg);padding:6px 10px;margin-top:8px}
.patient-avatar{width:100px;height:100px;min-width:100px;border-radius:50%;border:4px solid white;background:var(--gray-bg);color:var(--accent-deep);font-family:var(--font-display);box-shadow:0 10px 28px -12px rgba(20,24,31,.35),0 0 0 1px var(--border-soft)}
.patient-quick{background:linear-gradient(160deg,#fff,var(--card-tint));border:1px solid var(--border-soft);border-radius:16px;padding:18px}.patient-quick small{color:var(--text-secondary)}.financial-section{background:var(--card-tint)}
#payments-panel .inventory-card{border-left:2px dashed var(--border);padding-left:20px}#payments-panel .inventory-card p:first-of-type{color:var(--accent-deep);border:1.5px solid var(--accent-border);background:var(--accent-bg);padding:5px 10px;border-radius:8px;font-family:var(--font-display);font-size:18px}
.module-hidden{display:none!important}.pia-enter{animation:piaFadeUp 240ms ease both}@keyframes piaFadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes piaBotonRebote{0%{transform:scale(1)}35%{transform:scale(.90)}60%{transform:scale(1.07)}80%{transform:scale(.97)}100%{transform:scale(1)}}button.piaRebote{animation:piaBotonRebote 380ms cubic-bezier(.34,1.56,.64,1)}
#workspace-home{padding:24px;border:1px solid var(--border-soft);border-radius:16px;background:var(--card);box-shadow:var(--shadow-sm)}.clinic-context{background:var(--card-tint);border:1px solid var(--border-soft);border-radius:12px;padding:12px 16px;margin-bottom:18px}.clinic-context summary{color:var(--text-secondary);font-size:12px}.clinic-context #clinic-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}.clinic-context .clinic-card{margin:0}.clinical-workspace .development-note{font-size:11px}.clinical-workspace .main-footer{padding-top:20px}
@media(max-width:768px){.clinical-workspace .shell{padding:10px}.clinical-workspace .brand-panel{padding:16px}.clinical-workspace .clinical-nav{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.clinical-workspace .navCard{min-height:65px}.clinical-workspace .content{padding:12px 0}.clinical-workspace .clinical-panel,#work-queue{padding:15px}.patient-avatar{min-width:66px;width:66px;height:66px}.patient-hero{gap:12px;padding:16px}.patient-quick{grid-template-columns:1fr}.clinical-workspace h2{font-size:24px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

[hidden]{display:none!important}

/* Module navigation only inside the authenticated workspace. */
body:not(.clinical-workspace) .clinical-nav{display:none!important}