/* ============================================================
   Hoja de estilo común · misma estructura en los dos sistemas
   Lo único que cambia entre clínicas es el color de acento.
   ============================================================ */
:root{
  --brand:#0d9488;
  --brand-50:#f0fdfa;
  --brand-100:#ccfbf1;
  --brand-700:#0f766e;
  --bg:#f7f8fa;
  --line:#e6e8ec;
  --ink:#111827;
  --muted:#6b7280;
  --r-card:14px;
  --r-btn:10px;
}
html body,html{background:#f7f8fa!important}
html body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
  color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
main{background:#f7f8fa!important}

/* --- Superficies: una sola forma de tarjeta --- */
main .bg-white:not(header):not([class*="border-b"]){
  border-radius:var(--r-card)!important;
  border:1px solid var(--line)!important;
  box-shadow:0 1px 2px rgba(16,24,40,.04)!important;
}
.rounded-2xl{border-radius:var(--r-card)!important}
.rounded-xl{border-radius:12px!important}

/* --- Botones --- */
button.rounded-lg, a.rounded-lg, .rounded-lg.bg-white{border-radius:var(--r-btn)!important}
button{font-weight:600}
button:disabled{opacity:.55;cursor:not-allowed}

/* --- Tablas --- */
table{border-collapse:separate;border-spacing:0}
thead th{font-size:11px!important;text-transform:uppercase;letter-spacing:.045em;
  color:var(--muted)!important;font-weight:700!important}
tbody tr{transition:background .12s ease}
tbody tr:hover{background:var(--brand-50)!important}
td,th{padding-top:12px!important;padding-bottom:12px!important}

/* --- Acento y foco --- */
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
::selection{background:var(--brand-100);color:var(--ink)}

/* --- Barra lateral --- */
aside{border-right:1px solid var(--line)!important;box-shadow:none!important}

html body{background:#f7f8fa!important;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif!important}

html body:not(#sin-uso){background:#f7f8fa!important}
main:not(#sin-uso){background:#f7f8fa!important}

/* barra lateral clara e igual en los dos */
aside[class]:not(#sin-uso){background:#fff!important;border-right:1px solid #e6e8ec!important;box-shadow:none!important}
aside[class] *{text-shadow:none!important}

/* texto secundario legible (antes quedaba casi invisible) */
main .text-gray-400,main .text-slate-400,main .text-gray-300{color:#6b7280!important}

aside img{border-radius:9999px!important;object-fit:cover!important;width:36px!important;height:36px!important;border:1px solid #e6e8ec!important}