/* ============================================================
   VETZOO - Sistema de diseño v3 (rediseño Claude Design)
   Tipografía: Bricolage Grotesque (títulos) + Instrument Sans.
   Paleta: verde bosque + crema cálido + acento ámbar.
   ============================================================ */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/bricolage.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('../fonts/instrument.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-display: swap;
}

:root {
  /* Marca */
  --green: #0e5349;
  --green-dark: #0a3a34;
  --amber: #d5853a;
  --amber-2: #e7a45c;
  --amber-text: #b76e29;

  /* Tema claro */
  --bg: #f6f4ef;
  --surface: #ffffff;
  --text: #17211f;
  --muted: #5c6663;
  --muted-2: #8a938f;
  --line: #e7e3da;
  --line-2: #ece8df;
  --thead-bg: #faf8f3;
  --row-hover: #faf9f5;
  --group-bg: #f3f6f4;
  --chart-grid: #eee9df;
  --donut-track: #f0ece2;

  --green-soft: #e3efec;
  --amber-soft: #f7ede0;
  --ok: #2f7d4f;
  --ok-soft: #e3efe6;
  --blue: #3663a6;
  --blue-soft: #e6eef7;
  --purple: #6b4c8a;
  --purple-soft: #f0ecf6;
  --slate: #46707f;
  --slate-soft: #eef2f5;
  --pink: #b0517a;
  --pink-soft: #f7e8ee;
  --red: #a8402a;
  --red-soft: #f7e3dc;

  --sk1: #ece8dd;
  --sk2: #f6f3ec;

  --shadow-card: 0 1px 2px rgba(23,33,31,.04);
  --shadow-pop: 0 16px 32px -18px rgba(23,33,31,.32);
  --shadow-modal: 0 24px 60px -20px rgba(23,33,31,.45);

  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Instrument Sans', system-ui, sans-serif;
}

[data-theme="dark"] {
  --bg: #0d1615;
  --surface: #16211f;
  --text: #e8efec;
  --muted: #9db0ab;
  --muted-2: #7d8f8a;
  --line: #263230;
  --line-2: #22302d;
  --thead-bg: #1a2724;
  --row-hover: #1b2825;
  --group-bg: #182623;
  --chart-grid: #223330;
  --donut-track: #1f2d2a;

  --green-soft: #16403a;
  --amber-soft: #3a2c18;
  --amber-text: #e0a468;
  --ok-soft: #16382b;
  --ok: #5cba85;
  --blue-soft: #1b2a3d;
  --blue: #7ba3dd;
  --purple-soft: #2a2138;
  --purple: #a98cd0;
  --slate-soft: #1c2b30;
  --slate: #8ab0be;
  --pink-soft: #38202b;
  --pink: #d886ab;
  --red-soft: #3a221b;
  --red: #dd8a70;

  --sk1: #1d2b28;
  --sk2: #253531;

  --shadow-card: 0 1px 2px rgba(0,0,0,.3);
  --shadow-pop: 0 16px 32px -18px rgba(0,0,0,.6);
  --shadow-modal: 0 24px 60px -20px rgba(0,0,0,.7);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

body {
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  transition: background .25s ease, color .25s ease;
}

.hidden { display: none !important; }
button { font-family: inherit; }
::placeholder { color: var(--muted-2); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d9d3c6; border-radius: 6px; border: 3px solid transparent; background-clip: content-box; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2c3b38; background-clip: content-box; }

/* Animaciones del diseño */
@keyframes vzUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes vzPop { 0% { opacity: 0; transform: scale(.86); } 60% { transform: scale(1.03); } 100% { opacity: 1; transform: scale(1); } }
@keyframes vzPulse { 0% { box-shadow: 0 0 0 0 rgba(213,133,58,.55); } 70% { box-shadow: 0 0 0 7px rgba(213,133,58,0); } 100% { box-shadow: 0 0 0 0 rgba(213,133,58,0); } }
@keyframes vzDraw { to { stroke-dashoffset: 0; } }
@keyframes vzFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes vzFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ================= LOGIN (split screen) ================= */
#login-view { display: flex; min-height: 100vh; background: var(--bg); }

.login-side {
  flex: 1; position: relative; overflow: hidden; min-width: 0;
  background: url('/img/login-bg.png') center/cover no-repeat, linear-gradient(155deg, var(--green) 0%, var(--green-dark) 100%);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 52px 56px; color: #fff;
}
/* Velo oscuro para que el texto y el logo sean legibles sobre la ilustración */
.login-side-overlay {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(160deg, rgba(8,32,28,.55) 0%, rgba(8,32,28,.30) 40%, rgba(8,32,28,.78) 100%);
}
.login-side > *:not(.login-side-overlay) { position: relative; z-index: 1; }
/* Placa blanca detrás del logo: el logo es oscuro y sobre la
   ilustración del bosque se perdía. */
/* El PNG del logo ya trae su propio aire alrededor, así que la placa
   lleva poco padding: si no, el logo se ve pequeño y flotando dentro
   de un marco demasiado grande. */
.brand-logo-plate {
  background: #fff; border-radius: 16px;
  padding: 6px 10px; display: inline-flex;
  box-shadow: 0 14px 34px -12px rgba(0,0,0,.55);
}
.brand-logo-img {
  height: 140px; width: auto; max-width: 100%; display: block;
}

@media (max-width: 760px) {
  .brand-logo-plate { padding: 5px 8px; border-radius: 13px; }
  .brand-logo-img { height: 96px; }
}
/* Nombre de marca en grande, sobre el titular */
.login-wordmark {
  font-family: var(--font-display); font-weight: 800;
  font-size: 68px; line-height: 1; letter-spacing: -.035em;
  margin-bottom: 14px; color: #fff;
  text-shadow: 0 4px 22px rgba(0,0,0,.45);
}
.login-headline {
  position: relative; max-width: 440px;
  font-family: var(--font-display); font-weight: 700; font-size: 40px;
  line-height: 1.08; letter-spacing: -.025em; margin-bottom: 16px;
}
.login-side p { margin: 0; font-size: 16px; line-height: 1.55; color: rgba(255,255,255,.72); max-width: 440px; position: relative; }
.login-deco {
  position: relative; margin-top: 28px; border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.16); height: 200px; max-width: 440px;
  box-shadow: 0 24px 48px -22px rgba(0,0,0,.55);
  background: radial-gradient(circle at 80% 20%, rgba(231,164,92,.35), transparent 55%), linear-gradient(135deg, #12665a, #0a3a34);
  display: grid; place-items: center; color: rgba(255,255,255,.25);
  animation: vzFloat 6s ease-in-out infinite;
}
.login-side .foot { position: relative; font-size: 13px; color: rgba(255,255,255,.5); }

.login-panel {
  width: min(48%, 560px); display: flex; align-items: center; justify-content: center; padding: 40px;
}
.login-card { width: 100%; max-width: 380px; animation: vzUp .55s cubic-bezier(.2,.7,.3,1) both; }

.brand { display: flex; align-items: center; gap: 13px; }
.brand-mark {
  width: 46px; height: 46px; border-radius: 13px; flex: none;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: -.02em; }
.brand-icon-img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }

.login-title { font-family: var(--font-display); font-weight: 700; font-size: 28px; letter-spacing: -.02em; margin-bottom: 6px; }
.login-sub { margin: 0 0 30px; color: var(--muted); font-size: 15px; }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.input-icon {
  display: flex; align-items: center; gap: 10px; background: var(--surface);
  border: 1.5px solid var(--line); border-radius: 12px; padding: 0 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.input-icon:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.input-icon svg { flex: none; color: var(--muted-2); }
.input-icon input {
  border: none; background: transparent; padding: 13px 0; font-size: 15px;
  color: var(--text); width: 100%; font-family: inherit; outline: none;
}

.field input.plain, .field select, .field textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--line);
  border-radius: 12px; font-size: 15px; background: var(--surface); color: var(--text);
  transition: border-color .2s ease, box-shadow .2s ease; font-family: inherit;
}
.field select { cursor: pointer; }
.field input.plain:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft);
}
.field textarea { resize: vertical; min-height: 64px; }

.btn-block {
  width: 100%; border: none; cursor: pointer; background: var(--green); color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  padding: 15px; border-radius: 12px; transition: background .2s ease, transform .05s;
  box-shadow: 0 8px 20px -8px rgba(14,83,73,.55);
}
.btn-block:hover { background: var(--green-dark); }
.btn-block:active { transform: translateY(1px); }
.btn-block:disabled { opacity: .6; cursor: not-allowed; }

.login-hint {
  margin-top: 22px; background: var(--green-soft); border: 1px solid var(--line-2);
  border-radius: 12px; padding: 14px 16px;
}
.login-hint .hint-title {
  font-size: 12px; font-weight: 700; color: var(--green); margin-bottom: 7px;
  letter-spacing: .02em; text-transform: uppercase;
}
[data-theme="dark"] .login-hint .hint-title { color: #7cc4b6; }
.login-hint .hint-row { font-size: 13px; color: var(--text); margin-bottom: 5px; }
.login-hint code {
  font-family: ui-monospace, Menlo, monospace; background: var(--surface);
  border: 1px solid var(--line-2); border-radius: 6px; padding: 2px 7px; font-size: 12px;
}

.alert {
  margin-bottom: 16px; padding: 11px 14px; border-radius: 12px;
  font-size: 13.5px; background: var(--red-soft); color: var(--red);
  border: 1px solid color-mix(in srgb, var(--red) 25%, transparent);
}

/* ================= APP LAYOUT ================= */
#app-view { display: flex; min-height: 100vh; background: var(--bg); }

/* Sidebar FIJO con scroll propio.
   Antes era `position: sticky; height: 100vh`, y eso causaba dos
   fallos al hacer scroll en escritorio:
     1. Si la página era más alta que la ventana, el sidebar dejaba
        de cubrir por debajo de esos 100vh y asomaba el fondo blanco.
     2. Si el menú tenía más opciones que el alto disponible, las de
        abajo quedaban cortadas sin forma de alcanzarlas.
   Fijándolo a la ventana con su propio overflow-y, siempre cubre
   todo el alto y el menú se desplaza por dentro si hace falta. */
.sidebar {
  width: 252px; flex: none; color: #fff;
  background:
    radial-gradient(circle at 85% 6%, rgba(217,138,61,.20), transparent 42%),
    radial-gradient(circle at 15% 102%, rgba(255,255,255,.07), transparent 46%),
    linear-gradient(185deg, #0e5349 0%, #093732 100%);
  display: flex; flex-direction: column; padding: 22px 16px;
  position: fixed; top: 0; left: 0; z-index: 20;
  height: 100vh; height: 100dvh;      /* dvh: respeta la barra del navegador móvil */
  overflow-y: auto; overscroll-behavior: contain;
}
/* Barra de scroll discreta dentro del menú */
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.18); border-radius: 5px;
}
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.3); }

/* El contenido se corre para dejarle su espacio al sidebar fijo. */
.main { margin-left: 252px; }
.sidebar .brand { padding: 6px 8px 22px; }
.sidebar .brand-name { font-weight: 800; font-size: 22px; letter-spacing: -.03em; line-height: 1; }
.sidebar .brand-sub { font-size: 11px; color: rgba(255,255,255,.55); margin-top: 3px; letter-spacing: .02em; }
.sidebar .brand-mark { background: #fff; width: 44px; height: 44px; padding: 3px; box-shadow: 0 2px 8px rgba(0,0,0,.25); }

.cta-appt {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-bottom: 20px; border: none; cursor: pointer;
  background: linear-gradient(145deg, #e7a45c, #d5853a); color: #3a2410;
  font-family: var(--font-display); font-weight: 700; font-size: 14.5px;
  padding: 12px; border-radius: 12px; transition: filter .2s ease;
  box-shadow: 0 8px 18px -8px rgba(213,133,58,.7);
}
.cta-appt:hover { filter: brightness(1.06); }

.menu-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .16em;
  color: rgba(255,255,255,.4); padding: 0 10px 9px;
}
.nav { display: flex; flex-direction: column; gap: 4px; }
.nav-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 13px; border: none; cursor: pointer; border-radius: 11px;
  font-family: var(--font-body); font-weight: 600; font-size: 14.5px;
  text-align: left; background: transparent; color: rgba(255,255,255,.7);
  transition: background .15s, color .15s;
}
.nav-item:hover { background: rgba(255,255,255,.09); color: #fff; }
.nav-item.active { background: rgba(255,255,255,.14); color: #fff; box-shadow: inset 3px 0 0 #e7a45c; }
.nav-item svg { flex: none; }
.sidebar-foot {
  margin-top: auto; padding: 14px 10px 4px;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: 11.5px; color: rgba(255,255,255,.5);
}

/* ================= MAIN / HEADER ================= */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 5;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-2);
  padding: 16px 34px; display: flex; align-items: center; justify-content: space-between;
}
.topbar h1 { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -.02em; }

.top-actions { display: flex; align-items: center; gap: 12px; }
.icon-square {
  position: relative; width: 40px; height: 40px; border-radius: 11px;
  border: 1px solid var(--line); background: var(--surface); cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--muted);
  transition: background .15s ease;
}
.icon-square:hover { background: var(--thead-bg); }
.notif-dot {
  position: absolute; top: 8px; right: 9px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--amber); border: 1.5px solid var(--surface);
  animation: vzPulse 2.2s ease-out infinite;
}
.user-meta { text-align: right; padding-left: 6px; }
.user-name { font-weight: 700; font-size: 14px; line-height: 1.15; }
.user-role {
  display: inline-block; margin-top: 3px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .05em; color: var(--green); background: var(--green-soft);
  padding: 2px 8px; border-radius: 999px;
}
[data-theme="dark"] .user-role { color: #7cc4b6; }
.avatar {
  width: 42px; height: 42px; border-radius: 12px;
  background: linear-gradient(145deg, #e29a4a, #c9772d); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
}
.logout-btn {
  border: 1px solid var(--line); background: var(--surface); cursor: pointer;
  font-weight: 600; font-size: 14px; color: var(--muted);
  padding: 10px 16px; border-radius: 11px; transition: background .15s ease;
}
.logout-btn:hover { background: var(--thead-bg); }

.content { flex: 1; padding: 30px 34px 48px; max-width: 1400px; width: 100%; }

/* ================= HERO (Inicio) ================= */
.hero {
  position: relative; overflow: hidden; border-radius: 22px;
  background:
    radial-gradient(circle at 92% -20%, rgba(231,164,92,.28), transparent 45%),
    linear-gradient(135deg, #0e5349 0%, #093732 100%);
  padding: 30px 32px; margin-bottom: 22px; color: #fff;
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
  animation: vzUp .55s cubic-bezier(.2,.7,.3,1) both;
}
.hero .paw-bg { position: absolute; right: -30px; bottom: -70px; color: rgba(255,255,255,.05); animation: vzFloat 6s ease-in-out infinite; }
.hero-date { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.55); margin-bottom: 8px; }
.hero-title { font-family: var(--font-display); font-weight: 800; font-size: 32px; letter-spacing: -.03em; line-height: 1.05; }
.hero p { margin: 9px 0 0; color: rgba(255,255,255,.75); font-size: 15px; position: relative; }
.hero p b { color: #f2c288; font-weight: 700; }
.hero-info { position: relative; min-width: 0; }
.hero-actions { position: relative; display: flex; gap: 10px; flex-wrap: wrap; }
.hero-btn-light {
  display: flex; align-items: center; gap: 7px; border: none; cursor: pointer;
  background: #fff; color: var(--green); font-family: var(--font-display);
  font-weight: 700; font-size: 14px; padding: 11px 16px; border-radius: 11px;
  transition: background .15s ease;
}
.hero-btn-light:hover { background: #f0ece2; }
.hero-btn-ghost {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
  color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 14px;
  padding: 11px 16px; border-radius: 11px; transition: background .15s ease;
}
.hero-btn-ghost:hover { background: rgba(255,255,255,.2); }

/* ================= STAT CARDS ================= */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 22px; }
.card {
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 16px;
  padding: 22px 22px 20px; box-shadow: var(--shadow-card);
  animation: vzUp .5s cubic-bezier(.2,.7,.3,1) both;
  transition: transform .18s ease, box-shadow .18s ease, background .25s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); }
.card:nth-child(1) { animation-delay: .06s; }
.card:nth-child(2) { animation-delay: .12s; }
.card:nth-child(3) { animation-delay: .18s; }
.card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.card-ico {
  width: 46px; height: 46px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
}
.card-ico.green { background: var(--green-soft); color: var(--green); }
.card-ico.amber { background: var(--amber-soft); color: var(--amber-text); }
[data-theme="dark"] .card-ico.green { color: #7cc4b6; }
.card-pill {
  font-size: 12px; font-weight: 700; color: var(--ok); background: var(--ok-soft);
  padding: 4px 9px; border-radius: 999px;
}
.card-value { font-family: var(--font-display); font-weight: 700; font-size: 38px; line-height: 1; letter-spacing: -.02em; }
.card-label { color: var(--muted); font-size: 14px; margin-top: 7px; }

.card.highlight {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, #0e5349, #0a3a34);
  border-color: #0a3a34; box-shadow: 0 12px 24px -14px rgba(14,83,73,.6);
}
.card.highlight:hover { box-shadow: 0 20px 36px -16px rgba(14,83,73,.7); }
.card.highlight::before {
  content: ''; position: absolute; right: -24px; top: -30px;
  width: 130px; height: 130px; border-radius: 50%; background: rgba(231,164,92,.16);
}
.card.highlight .card-ico { background: rgba(255,255,255,.14); color: #fff; position: relative; }
.card.highlight .card-pill { color: #3a2410; background: #f2c288; position: relative; }
.card.highlight .card-value { color: #fff; position: relative; }
.card.highlight .card-label { color: rgba(255,255,255,.72); position: relative; }

/* ================= PANELES / GRÁFICAS ================= */
.charts { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; }
.panel {
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 16px;
  padding: 22px 24px; box-shadow: var(--shadow-card); min-width: 0;
  animation: vzUp .5s cubic-bezier(.2,.7,.3,1) both;
  transition: background .25s ease;
}
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.panel-title { font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.panel-sub { font-size: 12.5px; color: var(--muted-2); font-weight: 600; }
.panel-link {
  border: none; background: none; cursor: pointer; font-weight: 700; font-size: 13px;
  color: var(--green); display: flex; align-items: center; gap: 5px; font-family: var(--font-body);
}
.panel-link:hover { color: var(--green-dark); }
[data-theme="dark"] .panel-link { color: #7cc4b6; }

.donut-flex { display: flex; align-items: center; gap: 8px; }
.donut-legend { display: flex; flex-direction: column; gap: 11px; flex: 1; }
.legend-row { display: flex; align-items: center; gap: 9px; }
.legend-dot { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.legend-label { font-size: 13.5px; color: var(--text); flex: 1; }
.legend-pct { font-family: var(--font-display); font-weight: 700; font-size: 14px; }

.upcoming { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.up-row { display: flex; align-items: center; gap: 16px; padding: 12px 8px; border-radius: 12px; transition: background .15s ease; }
.up-row:hover { background: var(--row-hover); }
.up-time { display: flex; align-items: center; gap: 9px; width: 78px; flex: none; }
.up-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.up-hour { font-family: var(--font-display); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.up-chip { width: 38px; height: 38px; flex: none; border-radius: 11px; display: flex; align-items: center; justify-content: center; }
.up-main { flex: 1; min-width: 0; }
.up-pet { font-weight: 700; font-size: 14.5px; }
.up-client { font-size: 13px; color: var(--muted-2); }
.up-type { font-size: 13px; color: var(--muted); font-weight: 600; }

/* ================= SECCIONES ================= */
.section-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; gap: 20px; flex-wrap: wrap; }
.section-id { display: flex; align-items: center; gap: 14px; }
.section-ico { width: 44px; height: 44px; flex: none; border-radius: 13px; display: flex; align-items: center; justify-content: center; }
.section-ico.blue { background: var(--blue-soft); color: var(--blue); }
.section-ico.amber { background: var(--amber-soft); color: var(--amber-text); }
.section-ico.purple { background: var(--purple-soft); color: var(--purple); }
.section-ico.green { background: var(--green-soft); color: var(--green); }
[data-theme="dark"] .section-ico.green { color: #7cc4b6; }
.section-title { font-family: var(--font-display); font-weight: 700; font-size: 28px; letter-spacing: -.025em; }
.section-sub { margin: 5px 0 0; color: var(--muted); font-size: 15px; }

.btn-primary {
  flex: none; display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer;
  background: var(--green); color: #fff; font-family: var(--font-display);
  font-weight: 600; font-size: 14.5px; padding: 11px 17px; border-radius: 12px;
  transition: background .2s ease; box-shadow: 0 8px 18px -8px rgba(14,83,73,.5);
}
.btn-primary:hover { background: var(--green-dark); }

/* Buscador */
.search-bar {
  display: flex; align-items: center; gap: 10px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px; padding: 0 15px;
  margin-bottom: 18px; max-width: 440px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.search-bar:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.search-bar svg { flex: none; color: var(--muted-2); }
.search-bar input {
  border: none; background: transparent; padding: 12px 0; font-size: 14.5px;
  width: 100%; font-family: inherit; color: var(--text); outline: none;
}

/* Chips de filtro */
.chips { display: flex; gap: 9px; margin-bottom: 18px; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--line); cursor: pointer; font-weight: 600; font-size: 13.5px;
  padding: 8px 15px; border-radius: 999px; transition: all .15s;
  background: var(--surface); color: var(--text);
}
.chip:hover { border-color: var(--green); color: var(--green); }
[data-theme="dark"] .chip:hover { color: #7cc4b6; }
.chip.active { background: var(--green); border-color: var(--green); color: #fff; }

/* ================= TABLAS ================= */
.table-wrap {
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 16px;
  box-shadow: var(--shadow-card); transition: background .25s ease;
  /* `overflow: hidden` recortaba bien las esquinas, pero cortaba las
     columnas de la derecha sin dejar desplazarse: en pantallas de
     1366-1536px la columna de ACCIONES quedaba fuera de alcance.
     Con overflow-x: auto la tabla se desplaza y las esquinas siguen
     recortadas (overflow-y: hidden mantiene el redondeo). */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
/* Barra de desplazamiento discreta, para que se note que hay más */
.table-wrap::-webkit-scrollbar { height: 9px; }
.table-wrap::-webkit-scrollbar-track { background: transparent; }
.table-wrap::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--muted-2) 40%, transparent);
  border-radius: 5px;
}
.table-wrap::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--muted) 60%, transparent);
}
table { width: 100%; border-collapse: collapse; }
thead th {
  background: var(--thead-bg); text-align: left; padding: 14px 22px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  color: var(--muted-2); text-transform: uppercase;
  border-bottom: 1px solid var(--line-2);
}
tbody td { padding: 15px 22px; font-size: 14px; border-bottom: 1px solid var(--line-2); color: var(--text); }
tbody tr { transition: background .15s ease; animation: vzUp .42s ease both; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--row-hover); }
.cell-strong { font-weight: 700; font-size: 14.5px; }
.cell-muted { color: var(--muted); }
.cell-mono { font-variant-numeric: tabular-nums; }

.name-cell { display: flex; align-items: center; gap: 12px; min-width: 0; }
.name-cell .nm { font-weight: 700; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.name-cell .sb { font-size: 12.5px; color: var(--muted-2); }

.av-chip {
  width: 38px; height: 38px; flex: none; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
}
.av-0 { background: var(--green-soft); color: var(--green); }
.av-1 { background: var(--amber-soft); color: var(--amber-text); }
.av-2 { background: var(--slate-soft); color: var(--slate); }
.av-3 { background: var(--purple-soft); color: var(--purple); }
.av-4 { background: var(--pink-soft); color: var(--pink); }
[data-theme="dark"] .av-0 { color: #7cc4b6; }

.group-row td {
  display: flex; align-items: center; gap: 9px; padding: 12px 22px;
  background: var(--group-bg); color: var(--green);
  font-weight: 700; font-size: 13.5px; border-bottom: 1px solid var(--line-2);
}
[data-theme="dark"] .group-row td { color: #7cc4b6; }
.group-row:hover { background: transparent !important; }

.row-actions { display: flex; gap: 8px; justify-content: flex-end; }
.icon-btn {
  width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--surface); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s ease;
}
.icon-btn.edit { color: var(--amber-text); }
.icon-btn.edit:hover { background: var(--amber-soft); border-color: color-mix(in srgb, var(--amber-text) 30%, transparent); }
.icon-btn.del { color: var(--pink); }
.icon-btn.del:hover { background: var(--pink-soft); border-color: color-mix(in srgb, var(--pink) 30%, transparent); }
.icon-btn.wa { color: #25D366; }
.icon-btn.wa:hover { background: color-mix(in srgb, #25D366 14%, transparent); border-color: color-mix(in srgb, #25D366 40%, transparent); }

/* Menú flotante para elegir el tipo de aviso de WhatsApp */
.wa-menu {
  position: absolute; z-index: 1200; min-width: 220px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 6px;
  box-shadow: 0 12px 34px rgba(0,0,0,.16);
  animation: waMenuIn .12s ease;
}
@keyframes waMenuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.wa-menu-item {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border: none; background: transparent; cursor: pointer;
  border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--text);
  text-align: left; transition: background .12s ease;
}
.wa-menu-item:hover { background: color-mix(in srgb, #25D366 12%, transparent); }
.wa-menu-item svg { color: #25D366; flex-shrink: 0; }

/* Pills (badges) */
.pill {
  display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px;
  font-weight: 600; font-size: 12.5px;
}
.sp-domestico { background: var(--ok-soft); color: var(--ok); }
.sp-exotico { background: var(--amber-soft); color: var(--amber-text); }
.sp-salvaje { background: var(--red-soft); color: var(--red); }
.sp-otro { background: var(--slate-soft); color: var(--slate); }
.sx-macho { background: var(--blue-soft); color: var(--blue); }
.sx-hembra { background: var(--pink-soft); color: var(--pink); }
.sx-desconocido { background: var(--slate-soft); color: var(--slate); }
.st-pendiente { background: var(--amber-soft); color: var(--amber-text); }
.st-confirmada { background: var(--blue-soft); color: var(--blue); }
.st-completada { background: var(--ok-soft); color: var(--ok); }
.st-cancelada { background: var(--red-soft); color: var(--red); }
.tp-clinica { background: var(--green-soft); color: var(--green); }
[data-theme="dark"] .tp-clinica { color: #7cc4b6; }
.tp-domicilio { background: var(--purple-soft); color: var(--purple); }

/* Empty state */
.empty { padding: 52px 30px; text-align: center; }
.empty .empty-ico {
  width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 16px;
  background: var(--slate-soft); color: var(--slate);
  display: flex; align-items: center; justify-content: center;
}
.empty h3 { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--text); }
.empty p { margin: 8px auto 20px; color: var(--muted-2); font-size: 14px; max-width: 400px; }

/* Skeletons */
.skeleton {
  display: inline-block; border-radius: 7px; color: transparent !important; user-select: none;
  background: linear-gradient(90deg, var(--sk1) 25%, var(--sk2) 50%, var(--sk1) 75%);
  background-size: 200% 100%; animation: shimmer 1.3s ease-in-out infinite;
}
.sk-line { height: 14px; }
.sk-value { height: 38px; width: 70px; }

/* Hosp mini stats */
.mini-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 760px; }
.mini-card { background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; padding: 18px 20px; }
.mini-value { font-family: var(--font-display); font-weight: 700; font-size: 30px; }
.mini-label { color: var(--muted); font-size: 13.5px; margin-top: 4px; }
.hosp-empty { margin-top: 22px; background: var(--surface); border: 1px dashed var(--line); border-radius: 16px; max-width: 760px; }

/* ================= MODALES ================= */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(10, 25, 22, .45);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: grid; place-items: center; padding: 24px; z-index: 300;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal {
  background: var(--surface); border-radius: 18px; box-shadow: var(--shadow-modal);
  width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto;
  border: 1px solid var(--line-2);
  transform: translateY(16px) scale(.98);
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.modal-overlay.open .modal { transform: translateY(0) scale(1); }
.modal-head { padding: 22px 24px 0; display: flex; align-items: flex-start; justify-content: space-between; }
.modal-head h3 { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -.02em; }
.modal-head p { font-size: 13px; color: var(--muted); margin-top: 3px; }
.modal-close {
  border: none; background: none; font-size: 22px; color: var(--muted);
  cursor: pointer; line-height: 1; padding: 4px 8px; border-radius: 8px; transition: all .15s ease;
}
.modal-close:hover { color: var(--text); background: var(--thead-bg); }
.modal-body { padding: 20px 24px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.req { color: var(--red); }
.modal-foot {
  padding: 16px 24px 22px; display: flex; gap: 12px; justify-content: flex-end;
  border-top: 1px solid var(--line-2); margin-top: 4px;
}
.btn-ghost {
  background: var(--surface); color: var(--muted); border: 1px solid var(--line);
  padding: 11px 20px; border-radius: 12px; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: all .15s ease;
}
.btn-ghost:hover { background: var(--thead-bg); color: var(--text); }
.btn-save {
  background: var(--green); color: #fff; border: none;
  padding: 11px 24px; border-radius: 12px; font-size: 14.5px;
  font-family: var(--font-display); font-weight: 600; cursor: pointer; transition: background .2s ease;
}
.btn-save:hover { background: var(--green-dark); }
.btn-save:disabled { opacity: .6; cursor: not-allowed; }

.btn-spinner {
  width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff; border-radius: 50%; display: inline-block;
  animation: spin .6s linear infinite; margin-right: 8px; vertical-align: -2px;
}
.loading-cell { padding: 40px; text-align: center; color: var(--muted); font-size: 14px; }
.no-results td { padding: 40px; text-align: center; color: var(--muted); font-size: 14px; }

/* ================= TOASTS ================= */
.toast-stack {
  position: fixed; top: 20px; right: 20px; z-index: 200;
  display: flex; flex-direction: column; gap: 10px; max-width: 340px;
}
.toast {
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: 13px; box-shadow: var(--shadow-modal); padding: 14px 16px 16px;
  display: flex; align-items: center; gap: 12px; font-size: 14px;
  position: relative; overflow: hidden;
  animation: toast-in .3s cubic-bezier(.2,.8,.2,1);
}
.toast.out { animation: toast-out .25s ease forwards; }
.toast .t-ico { flex-shrink: 0; display: grid; place-items: center; }
.toast .t-ico svg { width: 22px; height: 22px; }
.toast.ok .t-ico { color: var(--ok); }
.toast.err .t-ico { color: var(--red); }
.toast .t-msg { flex: 1; color: var(--text); }
.toast-progress { position: absolute; bottom: 0; left: 0; height: 3px; width: 100%; transform-origin: left; animation: toast-progress 3.2s linear forwards; }
.toast.ok .toast-progress { background: var(--ok); }
.toast.err .toast-progress { background: var(--red); }
@keyframes toast-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes toast-in { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(30px); } }

/* ================= RESPONSIVE ================= */
@media (max-width: 980px) {
  .login-side { display: none; }
  .login-panel { width: 100%; }
  .charts { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
}
/* ============================================================
   RESPONSIVE — el panel se usa en computadora, tablet y celular.
   ============================================================ */

/* Botón hamburguesa: solo existe en pantallas chicas. */
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none; margin-right: 4px;
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--surface); color: var(--text); cursor: pointer;
  transition: background .15s ease;
}
.nav-toggle:active { background: var(--line-2); }

/* Velo oscuro detrás del menú deslizable. */
.nav-backdrop {
  display: none; position: fixed; inset: 0; z-index: 108;
  background: rgba(8, 24, 21, .5);
  opacity: 0; transition: opacity .22s ease;
}
.nav-backdrop.show { opacity: 1; }

.logout-ico { display: none; }

/* ---------- TABLET (hasta 1024px) ----------
   El sidebar se estrecha para devolverle ancho al contenido. */
@media (max-width: 1024px) and (min-width: 761px) {
  .sidebar { width: 210px; padding: 18px 12px; }
  .main { margin-left: 210px; }
  .brand-name { font-size: 19px; }
  .nav-item { padding: 10px 12px; font-size: 14px; }
  .content { padding: 22px; }
  .topbar { padding: 14px 22px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- CELULAR (hasta 760px) ---------- */
@media (max-width: 760px) {
  /* El sidebar no desaparece: se convierte en un panel deslizable.
     Ocultarlo sin más dejaba al usuario sin forma de navegar. */
  .sidebar {
    position: fixed; top: 0; left: 0; z-index: 110;
    /* dvh evita que la barra del navegador móvil corte el menú */
    height: 100vh; height: 100dvh;
    width: 270px; max-width: 82vw;
    transform: translateX(-100%);
    transition: transform .26s cubic-bezier(.3,.8,.3,1);
    box-shadow: 0 0 40px rgba(0,0,0,.4);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    /* El fondo se repite aquí a propósito: el de la versión de
       escritorio usa porcentajes pensados para 252px de ancho y, al
       cambiar de tamaño en el teléfono, el degradado se deformaba y
       dejaba una franja vertical sobre el contenido. Uno plano y
       vertical se ve igual sea cual sea el ancho. */
    background: linear-gradient(180deg, #0e5349 0%, #0b453d 55%, #093732 100%);
    background-attachment: local;
  }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0; }        /* el menú flota encima, no reserva espacio */
  .nav-toggle { display: flex; }
  .nav-backdrop.show { display: block; }

  .content { padding: 16px 14px 90px; }

  /* Barra superior compacta: antes "Cerrar sesión" se salía de la
     pantalla y el título se encimaba con los controles. */
  .topbar { padding: 10px 14px; gap: 8px; }
  .topbar h1 { font-size: 19px; flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .top-actions { gap: 7px; flex: none; }
  .user-meta { display: none; }          /* el nombre ya está en el menú */
  .logout-btn { padding: 9px; min-width: 40px; justify-content: center; }
  .logout-text { display: none; }
  .logout-ico { display: block; }
  .icon-square { width: 38px; height: 38px; }

  .form-grid { grid-template-columns: 1fr; }
  .mini-cards, .cards, .charts { grid-template-columns: 1fr; }

  /* (las tablas-tarjeta se definen abajo, hasta 1024px) */
  .placeholder-tabla-movil { display: none; }

  /* Modales a pantalla casi completa */
  .modal-overlay { padding: 12px; align-items: flex-end; }
  .modal { max-height: 88vh; }

  /* Encabezados de sección apilados */
  .section-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .section-head .btn-primary { width: 100%; justify-content: center; }

  /* Widget de chat, más chico para no tapar botones */
  .ai-fab { width: 52px; height: 52px; right: 14px; bottom: 14px; }
}

/* ---------- TABLAS COMO TARJETAS (hasta 1024px) ----------
   Una tabla de 5-6 columnas no cabe ni en un teléfono ni en una
   tablet en vertical: las últimas columnas (normalmente las de
   ACCIONES) quedan fuera de la pantalla y el usuario ni las ve.
   Cada fila se convierte en una tarjeta apilada; la etiqueta de
   cada dato sale del <th> correspondiente vía data-label. */
@media (max-width: 1024px) {
  .table-wrap { overflow: visible; border: none; background: transparent; }
  .table-wrap table, table { min-width: 0; width: 100%; border-collapse: separate; border-spacing: 0; }
  .table-wrap thead, table thead { display: none; }
  .table-wrap tbody tr, table tbody tr {
    display: block; background: var(--surface);
    border: 1px solid var(--line); border-radius: 14px;
    padding: 13px 15px; margin-bottom: 11px;
  }
  .table-wrap tbody td, table tbody td {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 6px 0; border: none; text-align: right;
  }
  .table-wrap tbody td::before, table tbody td::before {
    content: attr(data-label);
    font-size: 11.5px; font-weight: 700; color: var(--muted-2);
    text-transform: uppercase; letter-spacing: .05em;
    text-align: left; flex: none;
  }
  /* La primera celda (el nombre) encabeza la tarjeta, sin etiqueta. */
  .table-wrap tbody td:first-child, table tbody td:first-child {
    justify-content: flex-start; text-align: left;
    padding-bottom: 10px; margin-bottom: 6px;
    border-bottom: 1px solid var(--line-2);
  }
  .table-wrap tbody td:first-child::before,
  table tbody td:first-child::before { content: none; }
  .row-actions { justify-content: flex-end; }
  .icon-btn { width: 40px; height: 40px; }
  .loading-cell { display: block !important; text-align: center !important; }
  .loading-cell::before { content: none !important; }
  /* El "MXN" del campo de dinero se salía del recuadro */
  .cash-money-input { flex-wrap: wrap; }
  .cash-money-input .cur { margin-left: auto; }
}

/* Pantallas muy angostas */
@media (max-width: 380px) {
  .content { padding: 12px 10px 90px; }
  .topbar h1 { font-size: 17px; }
}

/* ============================================================
   V4 — LOGIN / LANDING con mural de animales
   ============================================================ */

/* Mural: capas CSS que simulan un fresco de fauna.
   Sin imágenes externas: gradientes + siluetas SVG inline. */
.login-side {
  background:
    radial-gradient(ellipse 60% 40% at 20% 15%, rgba(231,164,92,.14), transparent 60%),
    radial-gradient(ellipse 50% 45% at 85% 75%, rgba(125,211,192,.10), transparent 60%),
    linear-gradient(155deg, #0e5349 0%, #0a3a34 55%, #072a26 100%);
}
.mural {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}
/* Textura de "pared" para el efecto mural */
.mural::before {
  content: ''; position: absolute; inset: 0; opacity: .5;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 2px, transparent 2px 60px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.04) 0 2px, transparent 2px 60px);
}
.mural-band {
  position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
}
.mural-band.top { top: 30%; }
.mural-band.bottom { bottom: 26%; }
.mural-label {
  position: absolute; font-size: 10px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.22);
}
.mural-label.dom { left: 56px; top: calc(30% + 12px); }
.mural-label.exo { right: 56px; bottom: calc(26% + 12px); }

/* Siluetas de animales: domésticos arriba, exóticos abajo */
.mural-figure {
  position: absolute; color: rgba(255,255,255,.07);
  animation: vzFloat 9s ease-in-out infinite;
}
.mural-figure.warm { color: rgba(231,164,92,.10); }
.mural-figure.cool { color: rgba(125,211,192,.09); }
.mural-figure:nth-child(3) { animation-delay: 0s; }
.mural-figure:nth-child(4) { animation-delay: 1.2s; }
.mural-figure:nth-child(5) { animation-delay: 2.4s; }
.mural-figure:nth-child(6) { animation-delay: .6s; }
.mural-figure:nth-child(7) { animation-delay: 1.8s; }
.mural-figure:nth-child(8) { animation-delay: 3s; }

.login-side .brand, .login-side .login-copy, .login-side .foot { position: relative; z-index: 2; }
.login-copy { max-width: 460px; }

/* Marca: tucán (neutral, no atado al nombre "Vetzoo") */
.brand-mark.toucan {
  background: linear-gradient(145deg, rgba(255,255,255,.20), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.16);
}

/* Panel derecho con scroll (contiene registro + footer).
   IMPORTANTE: justify-content debe ser flex-start, no center.
   Con `center`, si el contenido es más alto que la pantalla (p. ej.
   el formulario de registrar clínica), la parte de arriba se corta
   y el scroll no la alcanza. */
.login-panel {
  overflow-y: auto; max-height: 100vh;
  flex-direction: column; justify-content: flex-start;
  scrollbar-width: thin;
}
.login-card { padding: 32px 0; margin: auto 0; }

/* Barra de scroll visible para que se note que hay más contenido */
.login-panel::-webkit-scrollbar { width: 10px; }
.login-panel::-webkit-scrollbar-track { background: transparent; }
.login-panel::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--muted-2) 45%, transparent);
  border-radius: 6px; border: 2px solid var(--bg);
}
.login-panel::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--muted) 65%, transparent);
}

/* Respetar saltos de línea en los subtítulos de askModal */
#ask-subtitle { white-space: pre-line; }

/* Pestañas: Iniciar sesión / Registrar clínica / Soy empleado */
.auth-tabs {
  display: flex; gap: 4px; background: var(--thead-bg);
  border: 1px solid var(--line); border-radius: 12px; padding: 4px; margin-bottom: 24px;
}
.auth-tab {
  flex: 1; border: none; background: transparent; cursor: pointer;
  padding: 9px 8px; border-radius: 9px; font-size: 12.5px; font-weight: 600;
  color: var(--muted); transition: all .18s ease; font-family: var(--font-body);
}
.auth-tab:hover { color: var(--text); }
.auth-tab.active {
  background: var(--surface); color: var(--green);
  box-shadow: var(--shadow-card); font-weight: 700;
}
[data-theme="dark"] .auth-tab.active { color: #7cc4b6; }

/* Divisor "o continúa con" */
.divider {
  display: flex; align-items: center; gap: 12px; margin: 22px 0 16px;
  color: var(--muted-2); font-size: 12px;
}
.divider::before, .divider::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}

/* Botones sociales */
.social-row { display: flex; gap: 10px; }
.social-btn {
  flex: 1; height: 44px; border: 1px solid var(--line); background: var(--surface);
  border-radius: 11px; cursor: pointer; display: flex; align-items: center;
  justify-content: center; color: var(--muted); transition: all .18s ease;
}
.social-btn:hover {
  transform: translateY(-2px); box-shadow: var(--shadow-card);
  border-color: var(--green); color: var(--green);
}
[data-theme="dark"] .social-btn:hover { color: #7cc4b6; }

/* Footer legal */
.legal-footer {
  margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--muted-2); line-height: 1.7;
}
.legal-links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 10px; }
.legal-links a { color: var(--muted); text-decoration: none; font-weight: 600; transition: color .15s; }
.legal-links a:hover { color: var(--green); }
[data-theme="dark"] .legal-links a:hover { color: #7cc4b6; }
.legal-copy { color: var(--muted-2); }

/* Toggle de tema en el login (esquina) */
.login-theme {
  position: absolute; top: 20px; right: 24px; z-index: 3;
}

/* ============================================================
   V4 — DROPDOWN DE NOTIFICACIONES
   ============================================================ */
.dropdown {
  position: absolute; top: calc(100% + 10px); right: 0; width: 340px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 16px;
  box-shadow: var(--shadow-modal); z-index: 60; overflow: hidden;
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.dropdown.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.dropdown-head {
  padding: 14px 16px; border-bottom: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--thead-bg);
}
.dropdown-head h4 { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; }
.dropdown-mark {
  border: none; background: none; cursor: pointer; font-size: 12px;
  font-weight: 700; color: var(--green); font-family: var(--font-body);
}
[data-theme="dark"] .dropdown-mark { color: #7cc4b6; }
.dropdown-body { max-height: 380px; overflow-y: auto; }
.notif-item {
  display: flex; gap: 12px; padding: 13px 16px;
  border-bottom: 1px solid var(--line-2); cursor: pointer;
  transition: background .15s ease;
}
.notif-item:hover { background: var(--row-hover); }
.notif-item:last-child { border-bottom: none; }
.notif-item.unread { background: color-mix(in srgb, var(--green) 5%, var(--surface)); }
.notif-ico {
  width: 34px; height: 34px; flex: none; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.notif-ico.info     { background: var(--slate-soft); color: var(--slate); }
.notif-ico.cita     { background: var(--purple-soft); color: var(--purple); }
.notif-ico.hospital { background: var(--green-soft); color: var(--green); }
.notif-ico.alerta   { background: var(--red-soft); color: var(--red); }
[data-theme="dark"] .notif-ico.hospital { color: #7cc4b6; }
.notif-body { flex: 1; min-width: 0; }
.notif-title { font-weight: 700; font-size: 13.5px; margin-bottom: 2px; }
.notif-text { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.notif-time { font-size: 11px; color: var(--muted-2); margin-top: 3px; }
.dropdown-empty { padding: 36px 20px; text-align: center; color: var(--muted-2); font-size: 13.5px; }

/* ---- Notificaciones en celular ----
   El dropdown medía 340px fijos anclado al borde derecho: en una
   pantalla de 390px el texto se cortaba fuera de la vista. Aquí se
   convierte en un panel de ancho completo bajo la barra superior.
   IMPORTANTE: este bloque va DESPUÉS de la regla base de .dropdown;
   si se pone antes, la base lo sobrescribe por orden de cascada. */
@media (max-width: 760px) {
  .dropdown {
    position: fixed; top: 60px; right: 10px; left: 10px;
    width: auto; max-width: none; z-index: 120;
  }
  .dropdown-body { max-height: 60vh; }
  .dropdown-head { padding: 14px 16px; }
  .notif-item { padding: 14px 16px; }
  .notif-item .n-title, .notif-item .n-msg { white-space: normal; word-break: break-word; }
}

.notif-badge {
  position: absolute; top: 5px; right: 6px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 999px; background: var(--amber);
  color: #3a2410; font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--surface);
}

/* ============================================================
   V4 — CALENDARIO (CSS Grid nativo, sin librerías)
   ============================================================ */
.cal-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 16px; flex-wrap: wrap;
}
.cal-nav { display: flex; align-items: center; gap: 10px; }
.cal-title {
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  min-width: 190px; text-transform: capitalize;
}
.cal-arrow {
  width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--surface); cursor: pointer; display: flex;
  align-items: center; justify-content: center; color: var(--muted);
  transition: all .15s ease;
}
.cal-arrow:hover { background: var(--thead-bg); color: var(--text); }

/* Alternador Mes / Semana / Lista */
.view-switch {
  display: flex; background: var(--thead-bg); border: 1px solid var(--line);
  border-radius: 11px; padding: 3px; gap: 3px;
}
.view-switch button {
  border: none; background: transparent; cursor: pointer;
  padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 600;
  color: var(--muted); transition: all .15s ease; font-family: var(--font-body);
}
.view-switch button.active {
  background: var(--surface); color: var(--green); box-shadow: var(--shadow-card); font-weight: 700;
}
[data-theme="dark"] .view-switch button.active { color: #7cc4b6; }

.cal-wrap {
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: 16px; box-shadow: var(--shadow-card); overflow: hidden;
}
.cal-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr);
  background: var(--thead-bg); border-bottom: 1px solid var(--line-2);
}
.cal-weekdays div {
  padding: 12px 8px; text-align: center; font-size: 11.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2);
}
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-cell {
  min-height: 116px; padding: 8px; border-right: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2); display: flex; flex-direction: column;
  gap: 4px; transition: background .15s ease; cursor: pointer;
}
.cal-cell:nth-child(7n) { border-right: none; }
.cal-cell:hover { background: var(--row-hover); }
.cal-cell.other-month { background: color-mix(in srgb, var(--thead-bg) 55%, transparent); }
.cal-cell.other-month .cal-daynum { color: var(--muted-2); opacity: .5; }
.cal-daynum {
  font-family: var(--font-display); font-weight: 700; font-size: 13.5px;
  width: 26px; height: 26px; display: flex; align-items: center;
  justify-content: center; border-radius: 8px; flex: none;
}
.cal-cell.today .cal-daynum { background: var(--green); color: #fff; }

.cal-event {
  font-size: 11.5px; padding: 4px 7px; border-radius: 7px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 600; border-left: 3px solid; transition: transform .12s ease;
}
.cal-event:hover { transform: translateX(2px); }
.cal-event.ev-pendiente  { background: var(--amber-soft); color: var(--amber-text); border-color: var(--amber); }
.cal-event.ev-confirmada { background: var(--blue-soft); color: var(--blue); border-color: var(--blue); }
.cal-event.ev-completada { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); }
.cal-event.ev-cancelada  { background: var(--red-soft); color: var(--red); border-color: var(--red); text-decoration: line-through; }
.cal-more { font-size: 11px; color: var(--muted-2); font-weight: 600; padding-left: 4px; }

/* Vista semanal: una columna por día, más alta */
.cal-grid.week .cal-cell { min-height: 320px; }

/* Aviso de sincronización con Google (estructura lista) */
.sync-note {
  display: flex; align-items: center; gap: 10px; margin-top: 14px;
  padding: 12px 16px; background: var(--surface); border: 1px dashed var(--line);
  border-radius: 12px; font-size: 12.5px; color: var(--muted);
}
.sync-note svg { flex: none; color: var(--muted-2); }
.sync-btn {
  margin-left: auto; border: 1px solid var(--line); background: var(--thead-bg);
  color: var(--muted); padding: 6px 12px; border-radius: 8px;
  font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s;
}
.sync-btn:hover { border-color: var(--green); color: var(--green); }
[data-theme="dark"] .sync-btn:hover { color: #7cc4b6; }

/* ============================================================
   V4 — HOSPITALIZACIÓN (tarjetas de pacientes + bitácora)
   ============================================================ */
.hosp-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px; margin-top: 20px;
}
.hosp-card {
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 16px;
  box-shadow: var(--shadow-card); overflow: hidden; position: relative;
  animation: vzUp .45s cubic-bezier(.2,.7,.3,1) both;
  transition: transform .18s ease, box-shadow .18s ease;
}
.hosp-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); }
.hosp-card::before {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px;
  background: var(--st-color, var(--green));
}
.hosp-card.st-critico         { --st-color: var(--red); }
.hosp-card.st-en_observacion  { --st-color: var(--amber); }
.hosp-card.st-ingresado       { --st-color: var(--blue); }
.hosp-card.st-alta_medica     { --st-color: var(--ok); }

.hosp-head { padding: 18px 18px 14px; display: flex; gap: 12px; align-items: flex-start; }
.hosp-pet { flex: 1; min-width: 0; }
.hosp-pet-name { font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.hosp-owner { font-size: 12.5px; color: var(--muted-2); margin-top: 2px; }
.hosp-cage {
  font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; font-weight: 700;
  background: var(--thead-bg); border: 1px solid var(--line);
  padding: 3px 9px; border-radius: 7px; color: var(--muted); flex: none;
}
.hosp-meta { padding: 0 18px 14px; }
.hosp-reason { font-size: 13px; color: var(--muted); line-height: 1.5; }
.hosp-since { font-size: 11.5px; color: var(--muted-2); margin-top: 6px; }

.hosp-tasks {
  border-top: 1px solid var(--line-2); background: var(--thead-bg);
  padding: 12px 18px; display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--muted); font-weight: 600;
}
.task-count {
  background: var(--amber-soft); color: var(--amber-text);
  padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
}
.task-count.zero { background: var(--ok-soft); color: var(--ok); }

.hosp-actions {
  display: flex; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line-2);
}
.hosp-btn {
  flex: 1; border: 1px solid var(--line); background: var(--surface);
  padding: 8px 10px; border-radius: 9px; font-size: 12.5px; font-weight: 600;
  color: var(--muted); cursor: pointer; transition: all .15s ease;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.hosp-btn:hover { border-color: var(--green); color: var(--green); background: var(--green-soft); }
[data-theme="dark"] .hosp-btn:hover { color: #7cc4b6; }
.hosp-btn.danger:hover { border-color: var(--red); color: var(--red); background: var(--red-soft); }

/* Bitácora horaria (dentro del modal de detalle) */
.timeline { display: flex; flex-direction: column; }
.tl-item {
  display: flex; gap: 14px; padding: 12px 0;
  border-bottom: 1px solid var(--line-2);
}
.tl-item:last-child { border-bottom: none; }
.tl-time {
  width: 56px; flex: none; font-family: var(--font-display); font-weight: 700;
  font-size: 14px; font-variant-numeric: tabular-nums; padding-top: 2px;
}
.tl-dot {
  width: 12px; height: 12px; border-radius: 50%; flex: none; margin-top: 5px;
  border: 2px solid var(--surface); box-shadow: 0 0 0 2px var(--line);
}
.tl-dot.programado   { background: var(--amber); }
.tl-dot.administrado { background: var(--ok); }
.tl-dot.omitido      { background: var(--muted-2); }
.tl-main { flex: 1; min-width: 0; }
.tl-task { font-weight: 700; font-size: 14px; }
.tl-task.done { text-decoration: line-through; color: var(--muted-2); }
.tl-detail { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.tl-actions { display: flex; gap: 6px; flex: none; align-items: flex-start; }
.tl-btn {
  border: 1px solid var(--line); background: var(--surface); cursor: pointer;
  width: 30px; height: 30px; border-radius: 8px; display: flex;
  align-items: center; justify-content: center; transition: all .15s ease;
}
.tl-btn.ok:hover   { border-color: var(--ok); color: var(--ok); background: var(--ok-soft); }
.tl-btn.skip:hover { border-color: var(--muted); color: var(--muted); background: var(--thead-bg); }

/* ============================================================
   V4 — ASISTENTE IA (botón flotante + panel lateral)
   ============================================================ */
.ai-fab {
  position: fixed; bottom: 24px; right: 24px; z-index: 90;
  width: 56px; height: 56px; border-radius: 18px; border: none; cursor: pointer;
  background: linear-gradient(145deg, #e7a45c, #d5853a); color: #3a2410;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 28px -10px rgba(213,133,58,.8);
  transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease;
}
.ai-fab:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 18px 36px -12px rgba(213,133,58,.9); }
.ai-fab .fab-close { display: none; }
.ai-fab.open .fab-open { display: none; }
.ai-fab.open .fab-close { display: block; }

.ai-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 400px; max-width: 92vw;
  background: var(--surface); border-left: 1px solid var(--line-2);
  box-shadow: var(--shadow-modal); z-index: 95;
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.ai-panel.open { transform: translateX(0); }
.ai-head {
  padding: 20px 22px; border-bottom: 1px solid var(--line-2);
  display: flex; align-items: center; gap: 12px; background: var(--thead-bg);
}
.ai-avatar {
  width: 42px; height: 42px; border-radius: 13px; flex: none;
  background: linear-gradient(145deg, #e7a45c, #d5853a); color: #3a2410;
  display: flex; align-items: center; justify-content: center;
}
.ai-name { font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.ai-status { font-size: 12px; color: var(--muted-2); display: flex; align-items: center; gap: 5px; }
.ai-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); animation: vzPulse 2.2s ease-out infinite; }
.ai-close {
  margin-left: auto; border: none; background: none; cursor: pointer;
  color: var(--muted); font-size: 22px; padding: 4px 8px; border-radius: 8px;
}
.ai-close:hover { background: var(--line-2); color: var(--text); }

.ai-body { flex: 1; overflow-y: auto; padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.ai-msg { display: flex; gap: 10px; animation: vzUp .3s ease both; }
.ai-msg .bubble {
  padding: 12px 15px; border-radius: 14px; font-size: 13.5px; line-height: 1.55;
  max-width: 88%;
}
.ai-msg.bot .bubble { background: var(--thead-bg); border: 1px solid var(--line-2); border-top-left-radius: 4px; }
.ai-msg.user { justify-content: flex-end; }
.ai-msg.user .bubble { background: var(--green); color: #fff; border-top-right-radius: 4px; }

.ai-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.ai-chip {
  border: 1px solid var(--line); background: var(--surface); cursor: pointer;
  padding: 7px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  color: var(--muted); transition: all .15s ease;
}
.ai-chip:hover { border-color: var(--amber); color: var(--amber-text); background: var(--amber-soft); }

.ai-foot { padding: 16px 22px 20px; border-top: 1px solid var(--line-2); }
.ai-input-row {
  display: flex; align-items: center; gap: 10px; background: var(--input-bg);
  border: 1.5px solid var(--line); border-radius: 14px; padding: 4px 4px 4px 16px;
  transition: border-color .2s ease;
}
.ai-input-row:focus-within { border-color: var(--amber); }
.ai-input-row input {
  flex: 1; border: none; background: transparent; outline: none;
  padding: 11px 0; font-size: 14px; color: var(--text); font-family: inherit;
}
.ai-send {
  width: 38px; height: 38px; flex: none; border-radius: 11px; border: none;
  background: var(--green); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background .15s;
}
.ai-send:hover { background: var(--green-dark); }
.ai-preview-note {
  margin-top: 10px; font-size: 11.5px; color: var(--muted-2); text-align: center;
}

/* ============================================================
   V4 — FACTURACIÓN / SUCURSALES / EQUIPO
   ============================================================ */
.plan-card {
  background: linear-gradient(150deg, #0e5349, #0a3a34); color: #fff;
  border-radius: 18px; padding: 26px 28px; position: relative; overflow: hidden;
  margin-bottom: 22px;
}
.plan-card::before {
  content: ''; position: absolute; right: -30px; top: -40px;
  width: 180px; height: 180px; border-radius: 50%; background: rgba(231,164,92,.16);
}
.plan-label {
  position: relative; font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.6);
}
.plan-name {
  position: relative; font-family: var(--font-display); font-weight: 800;
  font-size: 32px; letter-spacing: -.02em; margin-top: 6px;
}
.plan-price { position: relative; font-size: 15px; color: rgba(255,255,255,.75); margin-top: 4px; }
.plan-price b { color: #f2c288; font-size: 22px; font-family: var(--font-display); }

.usage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.usage-card {
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: 14px; padding: 18px 20px;
}
.usage-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.usage-label { font-size: 13px; color: var(--muted); font-weight: 600; }
.usage-nums { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.usage-nums .max { color: var(--muted-2); font-weight: 400; }
.usage-bar { height: 7px; border-radius: 999px; background: var(--line-2); overflow: hidden; }
.usage-fill {
  height: 100%; border-radius: 999px; background: var(--green);
  transition: width .6s cubic-bezier(.2,.8,.2,1);
}
.usage-fill.warn { background: var(--amber); }
.usage-fill.full { background: var(--red); }

.invite-code {
  display: flex; align-items: center; gap: 12px;
  background: var(--green-soft); border: 1px dashed var(--green);
  border-radius: 12px; padding: 14px 16px; margin-top: 14px;
}
.invite-code code {
  font-family: ui-monospace, Menlo, monospace; font-size: 18px; font-weight: 700;
  color: var(--green); letter-spacing: .05em; flex: 1;
}
[data-theme="dark"] .invite-code code { color: #7cc4b6; }
.copy-btn {
  border: 1px solid var(--green); background: var(--surface); color: var(--green);
  padding: 7px 14px; border-radius: 9px; font-size: 12.5px; font-weight: 700;
  cursor: pointer; transition: all .15s;
}
.copy-btn:hover { background: var(--green); color: #fff; }

.nav-divider {
  height: 1px; background: rgba(255,255,255,.1); margin: 10px 10px 8px;
}
.nav-item .nav-tag {
  margin-left: auto; font-size: 9.5px; font-weight: 800; letter-spacing: .06em;
  background: rgba(231,164,92,.22); color: #f0bd7f;
  padding: 2px 6px; border-radius: 5px;
}

@media (max-width: 980px) {
  .ai-panel { width: 100%; }
  .cal-cell { min-height: 84px; }
  .cal-event { font-size: 10px; }
}

/* ============================================================
   V5 — EXPEDIENTE CLÍNICO / CONSULTAS
   ============================================================ */

/* --- Slide-over: el formulario de consulta entra por la derecha,
   ocupa buena parte de la pantalla y no "flota" como un modal chico.
   El veterinario tiene el paciente enfrente: necesita espacio. --- */
.slideover-overlay {
  position: fixed; inset: 0; background: rgba(10, 25, 22, .45);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  z-index: 110; opacity: 0; pointer-events: none;
  transition: opacity .22s ease;
}
.slideover-overlay.open { opacity: 1; pointer-events: auto; }

.slideover {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 760px; max-width: 96vw;
  background: var(--bg); border-left: 1px solid var(--line-2);
  box-shadow: var(--shadow-modal); z-index: 115;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.2,.8,.2,1);
}
.slideover.open { transform: translateX(0); }

/* Cabecera: identifica al paciente de un vistazo */
.so-head {
  padding: 20px 26px; background: var(--surface);
  border-bottom: 1px solid var(--line-2);
  display: flex; align-items: center; gap: 14px; flex: none;
}
.so-patient { flex: 1; min-width: 0; }
.so-title {
  font-family: var(--font-display); font-weight: 700; font-size: 19px;
  letter-spacing: -.02em; display: flex; align-items: center; gap: 10px;
}
.so-sub { font-size: 13px; color: var(--muted-2); margin-top: 3px; }
.so-close {
  border: 1px solid var(--line); background: var(--surface); cursor: pointer;
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); transition: all .15s ease;
}
.so-close:hover { background: var(--thead-bg); color: var(--text); }

.so-body { flex: 1; overflow-y: auto; padding: 22px 26px 30px; }
.so-foot {
  padding: 16px 26px; background: var(--surface);
  border-top: 1px solid var(--line-2); flex: none;
  display: flex; gap: 12px; justify-content: flex-end; align-items: center;
}
.so-foot .spacer { flex: 1; }

/* Aviso: esta consulta viene de una cita agendada */
.so-linked {
  display: flex; align-items: center; gap: 9px;
  background: var(--green-soft); border: 1px solid color-mix(in srgb, var(--green) 22%, transparent);
  color: var(--green); border-radius: 11px; padding: 11px 14px;
  font-size: 13px; font-weight: 600; margin-bottom: 18px;
}
[data-theme="dark"] .so-linked { color: #7cc4b6; }
.so-linked svg { flex: none; }

/* --- Bloques de la ficha médica --- */
.med-block {
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: 16px; padding: 20px 22px; margin-bottom: 16px;
  box-shadow: var(--shadow-card);
}
.med-block-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
}
.med-block-ico {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.med-block-ico.vitals { background: var(--red-soft); color: var(--red); }
.med-block-ico.anam   { background: var(--blue-soft); color: var(--blue); }
.med-block-ico.diag   { background: var(--green-soft); color: var(--green); }
.med-block-ico.notes  { background: var(--amber-soft); color: var(--amber-text); }
[data-theme="dark"] .med-block-ico.diag { color: #7cc4b6; }
.med-block-title { font-family: var(--font-display); font-weight: 700; font-size: 15.5px; }
.med-block-hint { font-size: 12px; color: var(--muted-2); margin-left: auto; }

/* Signos vitales: inputs cortos en grid, con unidad visible */
.vitals-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.vital {
  background: var(--input-bg); border: 1.5px solid var(--line);
  border-radius: 12px; padding: 10px 12px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.vital:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.vital label {
  display: block; font-size: 11px; font-weight: 700; color: var(--muted-2);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px;
}
.vital-input { display: flex; align-items: baseline; gap: 5px; }
.vital-input input {
  border: none; background: transparent; outline: none; width: 100%;
  font-family: var(--font-display); font-weight: 700; font-size: 20px;
  color: var(--text); padding: 0;
  -moz-appearance: textfield;
}
.vital-input input::-webkit-outer-spin-button,
.vital-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vital-unit { font-size: 12px; color: var(--muted-2); font-weight: 600; flex: none; }

/* Rango normal de referencia bajo cada constante */
.vital-ref { font-size: 10.5px; color: var(--muted-2); margin-top: 4px; }
.vital.out-of-range { border-color: var(--amber); }
.vital.out-of-range .vital-ref { color: var(--amber-text); font-weight: 700; }

.med-field { margin-bottom: 0; }
.med-field + .med-field { margin-top: 14px; }
.med-field label {
  display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 7px;
}
.med-field textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--line);
  border-radius: 12px; font-size: 14.5px; line-height: 1.55;
  background: var(--input-bg); color: var(--text);
  font-family: inherit; resize: vertical; min-height: 84px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.med-field textarea:focus {
  outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft);
}
/* El diagnóstico es el campo protagonista */
.med-field.primary textarea {
  min-height: 110px; font-size: 15px;
  border-color: color-mix(in srgb, var(--green) 30%, var(--line));
  background: color-mix(in srgb, var(--green) 3%, var(--input-bg));
}

/* Interruptor de visita a domicilio */
.switch-row {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  font-size: 13.5px; font-weight: 600; color: var(--muted);
}
.switch-row input {
  width: 17px; height: 17px; accent-color: var(--green); cursor: pointer;
}

/* --- Tabla / listado de consultas --- */
.consult-dx {
  max-width: 340px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--muted);
}
.vitals-inline {
  display: flex; gap: 10px; font-size: 12px; color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}
.vitals-inline span { display: flex; align-items: center; gap: 3px; white-space: nowrap; }
.vitals-inline b { color: var(--text); font-weight: 700; }

/* Botón "Iniciar consulta" en la lista de citas: destacado, es LA acción */
.icon-btn.consult {
  width: auto; padding: 0 12px; gap: 6px; font-size: 12.5px; font-weight: 700;
  background: var(--green); border-color: var(--green); color: #fff;
}
.icon-btn.consult:hover {
  background: var(--green-dark); border-color: var(--green-dark);
  box-shadow: 0 6px 14px -6px rgba(14,83,73,.6);
}
.icon-btn.consult.done {
  background: var(--ok-soft); border-color: transparent; color: var(--ok);
  cursor: default;
}
.icon-btn.consult.done:hover { box-shadow: none; }

/* --- Expediente del paciente (historial) --- */
.record-head {
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: 16px; padding: 20px 22px; margin-bottom: 18px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.record-pet { flex: 1; min-width: 200px; }
.record-name { font-family: var(--font-display); font-weight: 700; font-size: 20px; }
.record-owner { font-size: 13px; color: var(--muted-2); margin-top: 3px; }
.record-tags { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; }

.timeline-med { position: relative; padding-left: 26px; }
.timeline-med::before {
  content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px;
  width: 2px; background: var(--line);
}
.tm-item { position: relative; margin-bottom: 16px; }
.tm-item::before {
  content: ''; position: absolute; left: -23px; top: 20px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--green); border: 2px solid var(--surface);
  box-shadow: 0 0 0 2px var(--line);
}
.tm-card {
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: 14px; padding: 16px 18px; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.tm-card:hover { transform: translateX(3px); box-shadow: var(--shadow-pop); }
.tm-date {
  font-size: 12px; font-weight: 700; color: var(--green);
  text-transform: capitalize; margin-bottom: 6px;
}
[data-theme="dark"] .tm-date { color: #7cc4b6; }
.tm-reason { font-weight: 700; font-size: 14.5px; margin-bottom: 4px; }
.tm-dx { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.tm-meta {
  display: flex; gap: 12px; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--line-2); font-size: 12px; color: var(--muted-2);
  flex-wrap: wrap;
}

@media (max-width: 760px) {
  .slideover { width: 100%; }
  .vitals-grid { grid-template-columns: repeat(2, 1fr); }
  .so-body { padding: 16px; }
}

/* ============================================================
   V6 — RECETAS ELECTRÓNICAS
   ============================================================ */

/* Resumen heredado de la consulta: contexto sin tener que reescribirlo */
.rx-summary {
  background: linear-gradient(150deg, #0e5349, #0a3a34);
  color: #fff; border-radius: 14px; padding: 18px 20px;
  margin-bottom: 20px; position: relative; overflow: hidden;
}
.rx-summary::before {
  content: ''; position: absolute; right: -20px; top: -30px;
  width: 120px; height: 120px; border-radius: 50%;
  background: rgba(231,164,92,.14);
}
.rx-sum-top {
  display: flex; align-items: center; gap: 12px; position: relative;
  margin-bottom: 12px;
}
.rx-sum-pet {
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  letter-spacing: -.02em; flex: 1; min-width: 0;
}
.rx-sum-owner { font-size: 12.5px; color: rgba(255,255,255,.65); margin-top: 2px; }
.rx-folio {
  font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; font-weight: 700;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2);
  padding: 5px 11px; border-radius: 8px; flex: none; letter-spacing: .04em;
}
.rx-sum-dx {
  position: relative; font-size: 13.5px; line-height: 1.55;
  color: rgba(255,255,255,.85); padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.14);
}
.rx-sum-dx b { color: #f2c288; font-weight: 700; display: block; font-size: 11px;
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }

/* Formulario para añadir un medicamento */
.rx-add {
  background: var(--thead-bg); border: 1px solid var(--line-2);
  border-radius: 14px; padding: 16px 18px; margin-bottom: 18px;
}
.rx-add-title {
  font-size: 13px; font-weight: 700; margin-bottom: 13px;
  display: flex; align-items: center; gap: 8px;
}
.rx-add-title svg { color: var(--green); }
[data-theme="dark"] .rx-add-title svg { color: #7cc4b6; }

.rx-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1.2fr 1fr; gap: 12px;
}
.rx-grid .field { margin-bottom: 0; }
.rx-grid label {
  font-size: 11.5px; font-weight: 700; color: var(--muted-2);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 5px;
}
.rx-grid input {
  padding: 10px 12px; font-size: 14px; border-radius: 10px;
}
.btn-add-med {
  width: 100%; margin-top: 12px; border: 1px dashed var(--green);
  background: var(--surface); color: var(--green);
  padding: 10px; border-radius: 10px; font-size: 13.5px; font-weight: 700;
  cursor: pointer; transition: all .18s ease;
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.btn-add-med:hover { background: var(--green); color: #fff; border-style: solid; }
[data-theme="dark"] .btn-add-med { color: #7cc4b6; }
[data-theme="dark"] .btn-add-med:hover { color: #fff; }

/* Lista temporal de medicamentos añadidos */
.rx-list { display: flex; flex-direction: column; gap: 10px; }
.rx-med {
  background: var(--surface); border: 1px solid var(--line-2);
  border-left: 3px solid var(--green);
  border-radius: 12px; padding: 13px 15px;
  display: flex; align-items: flex-start; gap: 12px;
  animation: vzUp .3s cubic-bezier(.2,.7,.3,1) both;
}
.rx-med-num {
  width: 24px; height: 24px; flex: none; border-radius: 7px;
  background: var(--green-soft); color: var(--green);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
}
[data-theme="dark"] .rx-med-num { color: #7cc4b6; }
.rx-med-body { flex: 1; min-width: 0; }
.rx-med-name { font-weight: 700; font-size: 14.5px; }
.rx-med-detail {
  font-size: 12.5px; color: var(--muted); margin-top: 4px;
  display: flex; gap: 12px; flex-wrap: wrap;
}
.rx-med-detail span { display: flex; align-items: center; gap: 4px; }
.rx-med-detail b { color: var(--text); font-weight: 600; }
.rx-med-note {
  font-size: 12px; color: var(--amber-text); margin-top: 5px;
  background: var(--amber-soft); padding: 4px 8px; border-radius: 6px;
  display: inline-block;
}
.rx-med-del {
  width: 30px; height: 30px; flex: none; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--pink); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s ease;
}
.rx-med-del:hover { background: var(--pink-soft); border-color: var(--pink); }

.rx-empty {
  padding: 30px 20px; text-align: center; color: var(--muted-2);
  font-size: 13.5px; border: 1px dashed var(--line);
  border-radius: 12px; background: var(--surface);
}
.rx-empty .rx-icon { font-size: 28px; margin-bottom: 8px; opacity: .5; }

/* Botón "Emitir receta" en la tabla de consultas */
.icon-btn.rx {
  width: auto; padding: 0 12px; gap: 6px; font-size: 12.5px; font-weight: 700;
  background: var(--amber-soft); border-color: transparent; color: var(--amber-text);
}
.icon-btn.rx:hover {
  background: var(--amber); color: #3a2410;
  box-shadow: 0 6px 14px -6px rgba(213,133,58,.7);
}
.icon-btn.rx.has {
  background: var(--ok-soft); color: var(--ok);
}
.icon-btn.rx.has:hover { background: var(--ok); color: #fff; box-shadow: none; }

/* Sección de recetas emitidas */
.rx-badge-folio {
  font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; font-weight: 700;
  background: var(--green-soft); color: var(--green);
  padding: 3px 9px; border-radius: 7px; letter-spacing: .03em;
}
[data-theme="dark"] .rx-badge-folio { color: #7cc4b6; }

.rx-meds-cell {
  font-size: 13px; color: var(--muted);
  max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Recetas dentro del expediente del paciente */
.rx-record-item {
  padding: 12px 0; border-bottom: 1px solid var(--line-2);
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  transition: background .15s ease;
}
.rx-record-item:hover { background: var(--row-hover); }
.rx-record-item:last-child { border-bottom: none; }
.rx-record-main { flex: 1; min-width: 0; }
.rx-record-meds { font-size: 13.5px; font-weight: 600; }
.rx-record-date { font-size: 12px; color: var(--muted-2); margin-top: 3px; }

@media (max-width: 760px) {
  .rx-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   V7 — FACTURACIÓN
   ============================================================ */

/* Tarjetas de resumen de ingresos */
.fin-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px; margin-bottom: 22px;
}
.fin-card {
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: 16px; padding: 20px 22px; box-shadow: var(--shadow-card);
  position: relative; overflow: hidden;
}
.fin-card::before {
  content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%;
  background: var(--fin-color, var(--green));
}
.fin-card.paid    { --fin-color: var(--ok); }
.fin-card.pending { --fin-color: var(--amber); }
.fin-card.count   { --fin-color: var(--slate); }

.fin-label {
  font-size: 12px; font-weight: 700; color: var(--muted-2);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px;
}
.fin-value {
  font-family: var(--font-display); font-weight: 700; font-size: 28px;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.fin-value .cur { font-size: 16px; color: var(--muted-2); font-weight: 600; }
.fin-sub { font-size: 12.5px; color: var(--muted); margin-top: 5px; }

/* Selector de cliente con sus datos fiscales debajo */
.fx-client-box {
  background: var(--thead-bg); border: 1px solid var(--line-2);
  border-radius: 12px; padding: 14px 16px; margin-top: 10px;
  animation: vzUp .25s ease both;
}
.fx-client-box.empty {
  color: var(--muted-2); font-size: 13px; text-align: center; padding: 16px;
}
.fx-fiscal { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fx-fiscal.full { grid-template-columns: 1fr; }
.fx-fiscal-item label {
  display: block; font-size: 10.5px; font-weight: 700; color: var(--muted-2);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 3px;
}
.fx-fiscal-item div {
  font-size: 13.5px; color: var(--text); font-weight: 600;
  word-break: break-word;
}
.fx-fiscal-item .missing {
  color: var(--amber-text); font-weight: 600; font-style: italic;
}

/* Alta de concepto */
.fx-add {
  background: var(--thead-bg); border: 1px solid var(--line-2);
  border-radius: 14px; padding: 16px 18px; margin-bottom: 18px;
}
.fx-add-title {
  font-size: 13px; font-weight: 700; margin-bottom: 13px;
  display: flex; align-items: center; gap: 8px;
}
.fx-add-title svg { color: var(--green); }
[data-theme="dark"] .fx-add-title svg { color: #7cc4b6; }

.fx-grid { display: grid; grid-template-columns: 2.4fr .8fr 1fr; gap: 12px; }
.fx-grid .field { margin-bottom: 0; }
.fx-grid label {
  font-size: 11.5px; font-weight: 700; color: var(--muted-2);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 5px;
}
.fx-grid input { padding: 10px 12px; font-size: 14px; border-radius: 10px; }
.fx-grid input[type="number"] {
  font-variant-numeric: tabular-nums; text-align: right;
  font-family: var(--font-display); font-weight: 600;
}
/* Prefijo $ en el campo de precio */
.fx-money { position: relative; }
.fx-money input { padding-left: 24px; text-align: right; }
.fx-money::before {
  content: '$'; position: absolute; left: 11px; bottom: 11px;
  color: var(--muted-2); font-size: 14px; font-weight: 600; pointer-events: none;
}

/* Tabla de conceptos con totales */
.fx-table {
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: 14px; overflow: hidden;
}
.fx-thead {
  display: grid; grid-template-columns: 1fr 70px 110px 120px 40px;
  gap: 8px; padding: 11px 16px; background: var(--thead-bg);
  border-bottom: 1px solid var(--line-2);
  font-size: 10.5px; font-weight: 700; color: var(--muted-2);
  text-transform: uppercase; letter-spacing: .05em;
}
.fx-thead .num { text-align: right; }

.fx-row {
  display: grid; grid-template-columns: 1fr 70px 110px 120px 40px;
  gap: 8px; padding: 13px 16px; align-items: center;
  border-bottom: 1px solid var(--line-2);
  animation: vzUp .3s cubic-bezier(.2,.7,.3,1) both;
  transition: background .15s ease;
}
.fx-row:hover { background: var(--row-hover); }
.fx-desc { font-weight: 600; font-size: 14px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; }
.fx-num {
  text-align: right; font-variant-numeric: tabular-nums;
  font-size: 14px; color: var(--muted);
}
.fx-num.total {
  font-family: var(--font-display); font-weight: 700;
  color: var(--text); font-size: 14.5px;
}
.fx-del {
  width: 28px; height: 28px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--pink); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s ease;
}
.fx-del:hover { background: var(--pink-soft); border-color: var(--pink); }

.fx-empty {
  padding: 32px 20px; text-align: center;
  color: var(--muted-2); font-size: 13.5px;
}

/* Desglose de totales */
.fx-totals {
  padding: 16px 16px 18px; background: var(--thead-bg);
  border-top: 1px solid var(--line-2);
  display: flex; flex-direction: column; align-items: flex-end; gap: 7px;
}
.fx-total-row {
  display: flex; align-items: baseline; gap: 20px;
  font-size: 14px; min-width: 240px; justify-content: space-between;
}
.fx-total-row .lbl { color: var(--muted); font-weight: 600; }
.fx-total-row .val {
  font-variant-numeric: tabular-nums; font-weight: 600;
  min-width: 110px; text-align: right;
}
.fx-total-row.grand {
  padding-top: 9px; margin-top: 3px;
  border-top: 2px solid var(--green); width: 100%;
  min-width: 240px;
}
.fx-total-row.grand .lbl {
  font-family: var(--font-display); font-weight: 700;
  font-size: 15px; color: var(--text);
}
.fx-total-row.grand .val {
  font-family: var(--font-display); font-weight: 800;
  font-size: 22px; color: var(--green); letter-spacing: -.02em;
}
[data-theme="dark"] .fx-total-row.grand .val { color: #7cc4b6; }

/* Pills de estado y método de pago */
.pm-efectivo      { background: var(--ok-soft); color: var(--ok); }
.pm-tarjeta       { background: var(--blue-soft); color: var(--blue); }
.pm-transferencia { background: var(--purple-soft); color: var(--purple); }
.inv-pagada       { background: var(--ok-soft); color: var(--ok); }
.inv-pendiente    { background: var(--amber-soft); color: var(--amber-text); }
.inv-cancelada    { background: var(--red-soft); color: var(--red); }

.money-cell {
  font-family: var(--font-display); font-weight: 700;
  font-variant-numeric: tabular-nums; text-align: right;
}
.money-cell .cur { font-size: 11.5px; color: var(--muted-2); font-weight: 500; }

.fx-badge-folio {
  font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; font-weight: 700;
  background: var(--slate-soft); color: var(--slate);
  padding: 3px 9px; border-radius: 7px; letter-spacing: .03em;
}

/* Aviso CFDI */
.cfdi-note {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--amber-soft); border: 1px solid color-mix(in srgb, var(--amber) 30%, transparent);
  border-radius: 12px; padding: 12px 15px; margin-top: 16px;
  font-size: 12.5px; color: var(--amber-text); line-height: 1.5;
}
.cfdi-note svg { flex: none; margin-top: 1px; }

@media (max-width: 760px) {
  .fx-grid { grid-template-columns: 1fr; }
  .fx-thead, .fx-row { grid-template-columns: 1fr 60px 90px 36px; }
  .fx-thead .h-unit, .fx-row .c-unit { display: none; }
}


/* ============================================================
   V9 — AUTENTICACIÓN AVANZADA (panel del personal)
   ============================================================ */

/* Botón "Continuar con Google" */
.oauth-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 11px;
  padding: 13px; margin-bottom: 14px;
  border: 1.5px solid var(--line); background: var(--surface);
  border-radius: 12px; cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: 14.5px;
  color: var(--text);
  transition: all .18s ease;
}
.oauth-btn:hover {
  background: var(--thead-bg); border-color: var(--muted-2);
  transform: translateY(-1px); box-shadow: var(--shadow-sm);
}
.oauth-btn:active { transform: translateY(0); }
.oauth-btn svg { flex: none; }

/* Divisor "o" */
.auth-or {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0; font-size: 12px; color: var(--muted-2);
}
.auth-or::before, .auth-or::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}

/* Enlace "¿Olvidaste tu contraseña?" */
.forgot-link {
  display: block; width: 100%; text-align: right;
  border: none; background: none; cursor: pointer;
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  color: var(--green); padding: 2px 0 0;
  transition: color .15s ease;
}
.forgot-link:hover { text-decoration: underline; }
[data-theme="dark"] .forgot-link { color: #7cc4b6; }

/* Aviso de éxito (verde) */
.auth-success {
  display: flex; gap: 11px; align-items: flex-start;
  background: var(--ok-soft); color: var(--ok);
  border: 1px solid color-mix(in srgb, var(--ok) 25%, transparent);
  border-radius: var(--radius-sm); padding: 14px 16px;
  font-size: 13.5px; line-height: 1.55; margin-bottom: 16px;
}
.auth-success svg { flex: none; margin-top: 1px; }

/* Banner de correo sin verificar (dentro del panel) */
.verify-banner {
  display: flex; align-items: center; gap: 12px;
  background: var(--amber-soft);
  border: 1px solid color-mix(in srgb, var(--amber) 30%, transparent);
  border-radius: var(--radius); padding: 13px 16px;
  margin-bottom: 20px;
  font-size: 13.5px; color: var(--amber-text);
  animation: vzUp .4s ease both;
}
.verify-banner svg { flex: none; }
.verify-banner .msg { flex: 1; min-width: 0; line-height: 1.5; }
.verify-banner button {
  flex: none; border: 1px solid var(--amber);
  background: var(--surface); color: var(--amber-text);
  padding: 7px 14px; border-radius: 9px;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 700;
  cursor: pointer; transition: all .16s ease;
}
.verify-banner button:hover { background: var(--amber); color: #fff; }
.verify-banner button:disabled { opacity: .6; cursor: default; }

/* ============================================================
   V10 — INVENTARIO / FARMACIA
   ============================================================ */

/* Tarjetas de resumen del stock */
.inv-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px; margin-bottom: 22px;
}
.inv-card {
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: 16px; padding: 18px 20px; box-shadow: var(--shadow-card);
  position: relative; overflow: hidden;
}
.inv-card::before {
  content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%;
  background: var(--ic, var(--green));
}
.inv-card.ok    { --ic: var(--ok); }
.inv-card.low   { --ic: var(--amber); }
.inv-card.out   { --ic: var(--red); }
.inv-card.value { --ic: var(--slate); }

.inv-card-top {
  display: flex; align-items: center; gap: 9px; margin-bottom: 10px;
}
.inv-card-ico {
  width: 32px; height: 32px; flex: none; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.inv-card.ok    .inv-card-ico { background: var(--ok-soft);    color: var(--ok); }
.inv-card.low   .inv-card-ico { background: var(--amber-soft); color: var(--amber-text); }
.inv-card.out   .inv-card-ico { background: var(--red-soft);   color: var(--red); }
.inv-card.value .inv-card-ico { background: var(--slate-soft); color: var(--slate); }

.inv-card-label {
  font-size: 12px; font-weight: 700; color: var(--muted-2);
  text-transform: uppercase; letter-spacing: .05em;
}
.inv-card-value {
  font-family: var(--font-display); font-weight: 700; font-size: 26px;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.inv-card-sub { font-size: 12.5px; color: var(--muted); margin-top: 4px; }

/* Fila con alerta de stock */
tbody tr.row-low  { background: color-mix(in srgb, var(--amber) 5%, transparent); }
tbody tr.row-low:hover { background: color-mix(in srgb, var(--amber) 9%, transparent); }
tbody tr.row-out  { background: color-mix(in srgb, var(--red) 6%, transparent); }
tbody tr.row-out:hover { background: color-mix(in srgb, var(--red) 10%, transparent); }

/* Indicador de stock: número + barra */
.stock-cell { display: flex; align-items: center; gap: 10px; }
.stock-num {
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  font-variant-numeric: tabular-nums; min-width: 44px; text-align: right;
}
.stock-num small { font-size: 11px; font-weight: 500; color: var(--muted-2); }
.stock-bar {
  flex: 1; max-width: 70px; height: 5px; border-radius: 999px;
  background: var(--line-2); overflow: hidden;
}
.stock-fill {
  height: 100%; border-radius: 999px; background: var(--ok);
  transition: width .5s cubic-bezier(.2,.8,.2,1);
}
.stock-fill.low { background: var(--amber); }
.stock-fill.out { background: var(--red); }

/* Categorías */
.cat-medicamento { background: var(--blue-soft);  color: var(--blue); }
.cat-alimento    { background: var(--amber-soft); color: var(--amber-text); }
.cat-insumo      { background: var(--slate-soft); color: var(--slate); }

/* Badges de alerta */
.pill.stock-low { background: var(--amber-soft); color: var(--amber-text); }
.pill.stock-out { background: var(--red-soft);   color: var(--red); }
.pill.stock-ok  { background: var(--ok-soft);    color: var(--ok); }
.pill.expiring  { background: var(--amber-soft); color: var(--amber-text); }
.pill.expired   { background: var(--red-soft);   color: var(--red); }

/* Botones de movimiento rápido (+ / −) */
.mov-group { display: flex; gap: 4px; }
.mov-btn {
  width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-weight: 700; transition: all .15s ease;
}
.mov-btn.in  { color: var(--ok); }
.mov-btn.in:hover  { background: var(--ok-soft);  border-color: var(--ok); }
.mov-btn.out { color: var(--red); }
.mov-btn.out:hover { background: var(--red-soft); border-color: var(--red); }

/* Filtros por categoría */
.inv-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }

/* ============================================================
   V10 — CHAT DEL ASISTENTE (estilo ChatGPT / iMessage)
   ============================================================ */

/* El panel reemplaza al antiguo .ai-panel */
.ai-panel {
  width: 420px;
}
.ai-head {
  padding: 18px 20px;
  display: flex; align-items: center; gap: 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--line-2);
}
.ai-avatar {
  width: 40px; height: 40px; flex: none; border-radius: 13px;
  background: linear-gradient(145deg, #e7a45c, #d5853a);
  color: #3a2410;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px -6px rgba(213,133,58,.6);
}
.ai-status {
  font-size: 12px; color: var(--muted-2);
  display: flex; align-items: center; gap: 5px; margin-top: 2px;
}
.ai-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted-2);
}
.ai-dot.live { background: var(--ok); animation: vzPulse 2.2s ease-out infinite; }
.ai-dot.local { background: var(--amber); }

/* Cuerpo del chat */
.ai-body {
  flex: 1; overflow-y: auto;
  padding: 22px 20px;
  display: flex; flex-direction: column; gap: 16px;
  background: var(--bg);
  scroll-behavior: smooth;
}

/* Mensajes */
.ai-msg { display: flex; gap: 10px; align-items: flex-start; max-width: 100%; }
.ai-msg.user { flex-direction: row-reverse; }

.ai-msg-av {
  width: 30px; height: 30px; flex: none; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.ai-msg.bot .ai-msg-av {
  background: var(--amber-soft); color: var(--amber-text);
}
.ai-msg.user .ai-msg-av {
  background: var(--green-soft); color: var(--green);
}
[data-theme="dark"] .ai-msg.user .ai-msg-av { color: #7cc4b6; }

.bubble {
  padding: 12px 15px; border-radius: 16px;
  font-size: 14px; line-height: 1.6;
  max-width: 300px; word-wrap: break-word;
  animation: aiPop .32s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes aiPop {
  from { opacity: 0; transform: translateY(6px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.ai-msg.bot .bubble {
  background: var(--surface); border: 1px solid var(--line-2);
  border-top-left-radius: 5px;
  box-shadow: var(--shadow-card);
}
.ai-msg.user .bubble {
  background: var(--green); color: #fff;
  border-top-right-radius: 5px;
}

/* Formato dentro de las burbujas */
.bubble strong { font-weight: 700; }
.bubble em {
  font-style: normal; font-size: 12px; color: var(--muted-2);
  display: block; margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--line-2);
}
.ai-msg.user .bubble em { color: rgba(255,255,255,.7); border-color: rgba(255,255,255,.2); }
.bubble ul { margin: 8px 0 0; padding-left: 4px; list-style: none; }
.bubble li {
  padding: 4px 0 4px 14px; position: relative;
}
.bubble li::before {
  content: '•'; position: absolute; left: 0;
  color: var(--amber); font-weight: 700;
}
.bubble code {
  font-family: ui-monospace, Menlo, monospace; font-size: 12.5px;
  background: var(--thead-bg); padding: 2px 6px; border-radius: 5px;
}

/* Indicador "escribiendo…" */
.ai-typing {
  display: flex; align-items: center; gap: 5px;
  padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: 16px; border-top-left-radius: 5px;
  box-shadow: var(--shadow-card);
  width: fit-content;
}
.ai-typing span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--muted-2);
  animation: aiBounce 1.3s ease-in-out infinite;
}
.ai-typing span:nth-child(2) { animation-delay: .18s; }
.ai-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes aiBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30% { transform: translateY(-5px); opacity: 1; }
}

/* Sugerencias */
.ai-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-left: 40px;
}
.ai-chip {
  border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); cursor: pointer;
  padding: 9px 13px; border-radius: 12px;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 600;
  text-align: left; line-height: 1.4;
  transition: all .18s cubic-bezier(.2,.8,.2,1);
  box-shadow: var(--shadow-card);
}
.ai-chip:hover {
  border-color: var(--amber); color: var(--amber-text);
  background: var(--amber-soft); transform: translateY(-1px);
}

/* Pie con el input */
.ai-foot {
  padding: 14px 18px 18px;
  border-top: 1px solid var(--line-2);
  background: var(--surface);
}
.ai-input-row {
  display: flex; align-items: flex-end; gap: 9px;
  background: var(--input-bg);
  border: 1.5px solid var(--line);
  border-radius: 16px; padding: 5px 5px 5px 16px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.ai-input-row:focus-within {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 14%, transparent);
}
.ai-input-row textarea {
  flex: 1; border: none; background: transparent; outline: none;
  padding: 10px 0; font-size: 14px; line-height: 1.5;
  color: var(--text); font-family: inherit;
  resize: none; max-height: 110px; min-height: 22px;
}
.ai-input-row textarea::placeholder { color: var(--muted-2); }
.ai-send {
  width: 36px; height: 36px; flex: none; border-radius: 12px;
  border: none; background: var(--green); color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .16s cubic-bezier(.2,.8,.2,1);
}
.ai-send:hover { background: var(--green-dark); }
.ai-send:active { transform: scale(.9); }
.ai-send:disabled { opacity: .4; cursor: not-allowed; }

.ai-note {
  margin-top: 9px; font-size: 11px; color: var(--muted-2);
  text-align: center; line-height: 1.5;
}
.ai-note b { color: var(--muted); }

/* Aviso de modo local */
.ai-mode-banner {
  display: flex; align-items: flex-start; gap: 9px;
  background: var(--amber-soft);
  border-radius: 12px; padding: 11px 13px;
  font-size: 12px; line-height: 1.5; color: var(--amber-text);
  margin-bottom: 4px;
}
.ai-mode-banner svg { flex: none; margin-top: 1px; }

/* ============================================================
   CAJA / CORTE DEL DÍA
   ============================================================ */
.cash-loading { padding: 40px; text-align: center; color: var(--muted); }

.cash-panel { animation: fadeIn .2s ease; }

/* --- Estado cerrado --- */
.cash-closed {
  max-width: 480px; margin: 20px auto; text-align: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; padding: 34px 30px;
}
.cash-closed-ico { color: var(--muted-2); margin-bottom: 8px; }
.cash-closed h3 { font-size: 20px; margin: 6px 0; color: var(--text); }
.cash-closed p { color: var(--muted); font-size: 14px; margin-bottom: 22px; }
.cash-open-form { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.cash-open-form label { font-size: 13px; font-weight: 700; color: var(--text); }
.cash-money-input {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: 11px; padding: 10px 14px;
  background: var(--surface); font-size: 20px; font-weight: 700;
}
.cash-money-input:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.cash-money-input input { border: none; outline: none; flex: 1; font-size: 20px; font-weight: 700; background: transparent; color: var(--text); }
.cash-money-input .cur { font-size: 12px; color: var(--muted-2); font-weight: 600; }
.cash-open-form input[type="text"] {
  border: 1px solid var(--line); border-radius: 11px; padding: 11px 14px;
  font-size: 14px; background: var(--surface); color: var(--text); outline: none;
}
.cash-open-form input[type="text"]:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }

/* --- Estado abierto --- */
.cash-status-bar {
  display: flex; align-items: center; gap: 11px;
  background: var(--green-soft); border: 1px solid color-mix(in srgb, var(--green) 22%, transparent);
  border-radius: 13px; padding: 13px 16px; margin-bottom: 18px;
}
.cash-status-bar b { color: var(--green); }
.cash-since { color: var(--muted); font-size: 13px; margin-left: 6px; }
.cash-status-bar > div:nth-child(2) { flex: 1; }
.cash-live-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent);
  animation: cashPulse 1.8s infinite;
}
@keyframes cashPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); }
  70% { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.cash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.cash-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 13px; padding: 15px 17px;
}
.cash-card.income { border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: color-mix(in srgb, var(--ok) 7%, var(--surface)); }
.cash-card-label { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-bottom: 5px; }
.cash-card-value { font-size: 22px; font-weight: 800; color: var(--text); font-family: var(--font-display, inherit); }
.cash-card-note { font-size: 11px; color: var(--muted-2); margin-top: 3px; font-style: italic; }

.cash-expected {
  background: var(--surface); border: 2px solid var(--green);
  border-radius: 14px; padding: 16px 19px; margin-bottom: 18px;
}
.cash-expected-row { display: flex; justify-content: space-between; align-items: baseline; }
.cash-expected-row span { font-size: 14px; font-weight: 600; color: var(--text); }
.cash-expected-row b { font-size: 26px; font-weight: 800; color: var(--green); font-family: var(--font-display, inherit); }
.cash-expected-detail { font-size: 12px; color: var(--muted); margin-top: 7px; }

.cash-movements { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 6px 4px; }
.cash-mov-head { display: flex; justify-content: space-between; align-items: center; padding: 11px 15px; border-bottom: 1px solid var(--line-2); }
.cash-mov-head b { font-size: 14px; color: var(--text); }
.cash-mov-add {
  background: transparent; border: 1px solid var(--green); color: var(--green);
  border-radius: 9px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: all .15s ease;
}
.cash-mov-add:hover { background: var(--green); color: #fff; }
.cash-mov-row { display: flex; align-items: center; gap: 12px; padding: 10px 15px; border-bottom: 1px solid var(--line-2); }
.cash-mov-row:last-child { border-bottom: none; }
.cash-mov-kind { font-weight: 700; font-size: 14px; min-width: 100px; }
.cash-mov-kind.in { color: var(--ok); }
.cash-mov-kind.out { color: var(--red); }
.cash-mov-concept { flex: 1; font-size: 14px; color: var(--text); }
.cash-mov-by { font-size: 12px; color: var(--muted-2); }
.cash-mov-empty { padding: 18px 15px; text-align: center; color: var(--muted-2); font-size: 13px; }

/* Descuadre en el historial */
.diff-ok { color: var(--ok); font-weight: 700; }
.diff-over { color: var(--amber-text); font-weight: 700; }
.diff-short { color: var(--red); font-weight: 700; }

/* ============================================================
   askModal — inputs del diálogo genérico
   ============================================================ */
.ask-input-wrap {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: 11px;
  padding: 0 14px; background: var(--surface);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ask-input-wrap:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.ask-input-wrap.ask-money { font-weight: 700; }
.ask-prefix { color: var(--muted-2); font-weight: 700; font-size: 16px; }
.ask-input-wrap .ask-input {
  border: none; outline: none; background: transparent; flex: 1;
  padding: 11px 0; font-size: 14.5px; color: var(--text); font-family: inherit;
}
.ask-input-wrap.ask-money .ask-input { font-size: 18px; font-weight: 700; }
select.ask-input {
  width: 100%; border: 1px solid var(--line); border-radius: 11px;
  padding: 11px 14px; font-size: 14.5px; background: var(--surface);
  color: var(--text); cursor: pointer; outline: none; font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
select.ask-input:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }

/* Botón de acción destructiva/atención en modales */
.btn-danger { background: var(--red) !important; }
.btn-danger:hover { background: color-mix(in srgb, var(--red) 82%, #000) !important; }

/* Separador y nota en el menú de WhatsApp */
.wa-menu-sep { height: 1px; background: var(--line-2); margin: 5px 6px; }
.wa-menu-note { padding: 8px 11px; font-size: 12px; color: var(--muted-2); font-style: italic; }
.wa-menu-item small { color: var(--muted-2); font-size: 11.5px; font-weight: 500; }

/* ============================================================
   SALA DE ESPERA DEL DÍA
   ============================================================ */
.wr-counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.wr-count-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 16px 18px; text-align: center;
}
.wr-count-card.esperando { border-color: color-mix(in srgb, var(--amber-text) 35%, transparent); }
.wr-count-card.consulta  { border-color: color-mix(in srgb, var(--purple) 40%, transparent); }
.wr-count-card.atendido  { border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.wr-count-n { font-size: 30px; font-weight: 800; color: var(--text); font-family: var(--font-display, inherit); line-height: 1; }
.wr-count-l { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-top: 5px; }

/* Citas pendientes de llegar */
.wr-pending-box {
  background: color-mix(in srgb, var(--amber-text) 6%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--amber-text) 28%, transparent);
  border-radius: 13px; padding: 12px 15px; margin-bottom: 16px;
}
.wr-pending-head { font-size: 13px; font-weight: 700; color: var(--amber-text); margin-bottom: 9px; }
.wr-pending-list { display: flex; flex-direction: column; gap: 6px; }
.wr-pending-item { display: flex; align-items: center; gap: 12px; padding: 6px 2px; }
.wr-pending-time { font-family: var(--font-mono, monospace); font-size: 13px; font-weight: 700; color: var(--text); min-width: 46px; }
.wr-pending-name { flex: 1; font-size: 14px; color: var(--text); }
.wr-checkin-btn {
  background: var(--amber-text); color: #fff; border: none; cursor: pointer;
  border-radius: 8px; padding: 6px 13px; font-size: 12.5px; font-weight: 700;
  transition: filter .15s ease;
}
.wr-checkin-btn:hover { filter: brightness(1.08); }

/* Cola principal */
.wr-list { display: flex; flex-direction: column; gap: 11px; }
.wr-card {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--line-2); border-radius: 13px; padding: 14px 17px;
  transition: box-shadow .15s ease;
}
.wr-card:hover { box-shadow: 0 4px 16px -8px rgba(0,0,0,.18); }
.wr-card.esperando   { border-left-color: var(--amber-text); }
.wr-card.en_consulta { border-left-color: var(--purple); }
.wr-card.atendido    { border-left-color: var(--ok); opacity: .72; }
.wr-card.urgent { border-left-color: var(--red); background: color-mix(in srgb, var(--red) 4%, var(--surface)); }
.wr-card-main { display: flex; align-items: center; gap: 13px; flex: 1; min-width: 0; }
.wr-card-info { min-width: 0; }
.wr-card-name { font-size: 15.5px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wr-card-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.wr-card-meta { font-size: 12px; color: var(--muted-2); margin-top: 3px; }
.wr-urgent-tag { font-size: 10.5px; font-weight: 700; color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); padding: 2px 7px; border-radius: 6px; }
.wr-walkin-tag { font-size: 10.5px; font-weight: 600; color: var(--muted-2); background: var(--line-2); padding: 2px 7px; border-radius: 6px; }
.wr-card-right { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }
.wr-pill { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; }
.wr-pill.esperando { background: color-mix(in srgb, var(--amber-text) 15%, transparent); color: var(--amber-text); }
.wr-pill.consulta  { background: var(--purple-soft); color: var(--purple); }
.wr-pill.atendido  { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.wr-actions { display: flex; gap: 7px; }
.wr-act { border: 1px solid var(--line); background: var(--surface); cursor: pointer; border-radius: 9px; padding: 7px 13px; font-size: 12.5px; font-weight: 600; color: var(--text); transition: all .15s ease; }
.wr-act.primary { background: var(--green); color: #fff; border-color: var(--green); }
.wr-act.primary:hover { filter: brightness(1.08); }
.wr-act.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.wr-act.ok:hover { background: var(--ok); color: #fff; }
.wr-act.ghost { color: var(--muted); }
.wr-act.ghost:hover { background: var(--line-2); }

/* ============================================================
   CONSULTA — constantes adicionales y razonamiento clínico
   ============================================================ */
.extra-vitals { margin-top: 14px; }
.extra-vital-row {
  display: grid; grid-template-columns: 1.4fr 1fr .7fr 34px;
  gap: 8px; align-items: center; margin-bottom: 8px;
}
.extra-vital-row input {
  border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 12px; font-size: 13.5px; font-family: inherit;
  background: var(--surface); color: var(--text); outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
  min-width: 0;
}
.extra-vital-row input:focus {
  border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft);
}
.ev-del {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--muted-2); transition: all .15s ease;
}
.ev-del:hover { color: var(--pink); border-color: color-mix(in srgb, var(--pink) 40%, transparent); }

.add-vital-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent; border: 1px dashed var(--line);
  color: var(--green); border-radius: 10px; padding: 9px 15px;
  font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: all .15s ease;
}
.add-vital-btn:hover { border-color: var(--green); background: var(--green-soft); }

/* Bloque plegable de razonamiento clínico */
.dx-details { width: 100%; }
.dx-summary {
  cursor: pointer; list-style: none; user-select: none;
  margin-bottom: 0 !important;
}
.dx-summary::-webkit-details-marker { display: none; }
.dx-chevron { margin-left: auto; color: var(--muted-2); transition: transform .2s ease; flex: none; }
.dx-details[open] .dx-chevron { transform: rotate(180deg); }
.dx-body { margin-top: 16px; display: grid; gap: 14px; }
.med-block-ico.dx { background: var(--amber-soft); color: var(--amber-text); }

@media (max-width: 760px) {
  .extra-vital-row { grid-template-columns: 1fr 1fr 34px; }
  .extra-vital-row .ev-unit { grid-column: 1 / 3; }
}

/* Motivo escrito a mano en recetas sin consulta previa */
.rx-dx-field { margin-top: 12px; }
.rx-dx-field label {
  display: block; font-size: 12px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px;
}
.rx-dx-field input {
  width: 100%; border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 13px; font-size: 14px; font-family: inherit;
  background: var(--surface); color: var(--text); outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.rx-dx-field input:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }

/* ============================================================
   ADJUNTOS DEL EXPEDIENTE
   ============================================================ */
.att-add-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent; border: 1px solid var(--line);
  color: var(--green); border-radius: 9px; padding: 7px 13px;
  font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: all .15s ease;
}
.att-add-btn:hover { background: var(--green-soft); border-color: var(--green); }

.att-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 11px; }
.att-loading, .att-empty {
  grid-column: 1 / -1; padding: 22px; text-align: center;
  color: var(--muted-2); font-size: 13.5px; line-height: 1.5;
  border: 1px dashed var(--line); border-radius: 12px;
}
.att-card {
  display: flex; align-items: center; gap: 11px; position: relative;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px; transition: border-color .15s ease;
}
.att-card:hover { border-color: color-mix(in srgb, var(--green) 30%, transparent); }
.att-thumb {
  width: 52px; height: 52px; flex: none; border-radius: 9px; overflow: hidden;
  display: grid; place-items: center; background: var(--line-2);
  color: var(--muted); text-decoration: none;
  border: none; padding: 0; cursor: pointer; transition: filter .15s ease;
}
.att-thumb:hover { filter: brightness(.94); }
.att-thumb img { width: 100%; height: 100%; object-fit: cover; }
.att-thumb.pdf { background: color-mix(in srgb, var(--pink) 12%, transparent); color: var(--pink); }
.att-actions { display: flex; align-items: center; gap: 2px; flex: none; }
.att-download {
  width: 26px; height: 26px; flex: none; border-radius: 7px; cursor: pointer;
  border: none; background: transparent; color: var(--muted-2);
  display: grid; place-items: center; transition: all .15s ease;
}
.att-download:hover { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); }
.att-info { flex: 1; min-width: 0; }
.att-name {
  font-size: 13.5px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.att-meta { font-size: 11.5px; color: var(--muted-2); margin-top: 2px; }
.att-desc {
  font-size: 12px; color: var(--muted); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.att-del {
  width: 26px; height: 26px; flex: none; border-radius: 7px; cursor: pointer;
  border: none; background: transparent; color: var(--muted-2);
  display: grid; place-items: center; transition: all .15s ease;
}
.att-del:hover { background: var(--pink-soft); color: var(--pink); }

/* ---- Paciente fallecido ---- */
.pill.pet-finado {
  background: color-mix(in srgb, var(--muted) 16%, transparent);
  color: var(--muted); font-weight: 700;
}
.pet-deceased-btn {
  margin-top: 10px; background: transparent; cursor: pointer;
  border: 1px solid var(--line); border-radius: 9px; padding: 6px 12px;
  font-size: 12px; font-weight: 600; color: var(--muted); font-family: inherit;
  transition: all .15s ease; white-space: nowrap;
}
.pet-deceased-btn:hover { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.pet-deceased-btn.undo { color: var(--green); }
.pet-deceased-btn.undo:hover { border-color: var(--green); background: var(--green-soft); color: var(--green); }

.pet-finado-bar {
  background: color-mix(in srgb, var(--muted) 8%, var(--surface));
  border: 1px solid var(--line); border-left: 3px solid var(--muted);
  border-radius: 10px; padding: 11px 15px; margin-bottom: 16px;
  font-size: 13px; color: var(--muted);
}
.pet-finado-bar span { display: block; font-style: italic; margin-top: 3px; color: var(--muted-2); }

/* Estética */
.groom-price {
  font-size: 12.5px; font-weight: 700; color: var(--green);
  background: var(--green-soft); padding: 2px 9px; border-radius: 20px;
}
.groom-obs {
  font-size: 12.5px; color: var(--amber-text); margin-top: 5px;
  background: var(--amber-soft); padding: 5px 10px; border-radius: 8px;
  display: inline-block;
}
.wr-card.en_consulta { border-left-color: var(--purple); }

/* ============================================================
   TABLAS EN PANTALLAS MEDIANAS (portátiles de 1280–1600px)
   
   El padding de 22px por lado se come mucho ancho: en una tabla de
   7 columnas son más de 300px solo de espaciado, y eso empujaba la
   columna de acciones fuera de la vista. Aquí se ajusta para que la
   tabla quepa sin necesidad de desplazarse.
   ============================================================ */
@media (min-width: 1025px) and (max-width: 1600px) {
  thead th { padding: 13px 14px; }
  tbody td { padding: 13px 14px; font-size: 13.5px; }
  .av-chip { width: 34px; height: 34px; font-size: 13px; }
  .name-cell { gap: 9px; }
  .name-cell .nm { font-size: 13.5px; }
  .row-actions { gap: 5px; }
  .icon-btn { width: 31px; height: 31px; }
  /* El diagnóstico suele ser el texto más largo: se limita para que
     no empuje al resto de columnas fuera de la pantalla. */
  .cell-clamp, .consult-dx { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (min-width: 1601px) {
  .cell-clamp { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ============================================================
   REPORTE DE CAJA — de dónde salió el dinero del día
   ============================================================ */
.cash-report { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.cash-report-col {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 13px; padding: 15px 17px;
}
.cash-report-title {
  font-size: 11.5px; font-weight: 700; color: var(--muted-2);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 11px;
}
.cash-rep-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 6px 0; font-size: 13.5px; color: var(--muted);
}
.cash-rep-row b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.cash-rep-row small { color: var(--muted-2); font-size: 11.5px; }
.cash-rep-row.total {
  border-top: 1px solid var(--line-2); margin-top: 5px; padding-top: 9px;
}
.cash-rep-row.total span { font-weight: 700; color: var(--text); }
.cash-rep-row.total b { color: var(--green); font-size: 16px; }
.cash-rep-empty { font-size: 12.5px; color: var(--muted-2); font-style: italic; padding: 6px 0; }

/* Cobros del día */
.sale-folio {
  font-family: ui-monospace, monospace; font-size: 11.5px;
  color: var(--muted-2); min-width: 74px;
}
.cash-mov-concept small { display: block; font-size: 11.5px; color: var(--muted-2); }
.sale-method {
  font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 20px;
  background: var(--line-2); color: var(--muted);
}
.sale-method.efectivo { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.sale-method.tarjeta  { background: var(--blue-soft); color: var(--blue); }
.sale-amount { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 84px; text-align: right; }

/* Estética: por cobrar */
.groom-counts { grid-template-columns: repeat(4, 1fr); }
.wr-count-card.por-cobrar {
  border-color: color-mix(in srgb, var(--amber-text) 45%, transparent);
  background: color-mix(in srgb, var(--amber-text) 7%, var(--surface));
}
.wr-count-card.por-cobrar .wr-count-n { color: var(--amber-text); }

/* ============================================================
   EXPEDIENTES
   ============================================================ */
.exp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 11px; }
.exp-card {
  display: flex; align-items: center; gap: 13px; text-align: left;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 14px 16px; cursor: pointer;
  font-family: inherit; transition: all .16s ease; width: 100%;
}
.exp-card:hover {
  border-color: var(--green); transform: translateY(-2px);
  box-shadow: 0 10px 26px -18px rgba(10,40,35,.5);
}
.exp-card.finado { opacity: .62; }
.exp-info { flex: 1; min-width: 0; }
.exp-name {
  font-weight: 700; font-size: 15.5px; color: var(--text);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.exp-owner { font-size: 13px; color: var(--muted); margin-top: 1px; }
.exp-meta { font-size: 12px; color: var(--muted-2); margin-top: 2px; }
.exp-arrow { color: var(--muted-2); flex: none; }
.exp-card:hover .exp-arrow { color: var(--green); }

@media (max-width: 760px) {
  .cash-report { grid-template-columns: 1fr; }
  .groom-counts { grid-template-columns: repeat(2, 1fr); }
  .exp-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SOPORTE (lado de la clínica)
   ============================================================ */
.tk-list { display: grid; gap: 10px; }
.tk-card {
  display: flex; align-items: center; gap: 14px; text-align: left; width: 100%;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--line); border-radius: 14px;
  padding: 15px 18px; cursor: pointer; font-family: inherit;
  transition: all .16s ease;
}
.tk-card:hover { border-color: var(--green); transform: translateY(-1px); }
.tk-card.abierto     { border-left-color: var(--amber-text); }
.tk-card.en_proceso  { border-left-color: var(--blue); }
.tk-card.esperando   { border-left-color: var(--purple); }
.tk-card.resuelto,
.tk-card.cerrado     { border-left-color: var(--ok); opacity: .72; }
.tk-card.unread { background: color-mix(in srgb, var(--green) 4%, var(--surface)); }
.tk-card-main { flex: 1; min-width: 0; }
.tk-card-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 4px; }
.tk-folio {
  font-family: ui-monospace, monospace; font-size: 11.5px;
  color: var(--muted-2); font-weight: 700;
}
.tk-status {
  font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 20px;
  letter-spacing: .02em;
}
.tk-status.abierto    { background: var(--amber-soft); color: var(--amber-text); }
.tk-status.en_proceso { background: var(--blue-soft); color: var(--blue); }
.tk-status.esperando  { background: var(--purple-soft); color: var(--purple); }
.tk-status.resuelto,
.tk-status.cerrado    { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.tk-prio {
  font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 20px;
  background: color-mix(in srgb, var(--red) 13%, transparent); color: var(--red);
}
.tk-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.tk-subject { font-size: 15px; font-weight: 700; color: var(--text); }
.tk-meta { font-size: 12.5px; color: var(--muted-2); margin-top: 2px; }

/* Detalle y conversación */
.tk-detail {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 20px 22px;
}
.tk-detail-head { padding-bottom: 15px; border-bottom: 1px solid var(--line-2); margin-bottom: 18px; }
.tk-detail-subject {
  font-family: var(--font-display); font-weight: 700; font-size: 20px;
  color: var(--text); margin: 4px 0 3px;
}
.tk-thread { display: grid; gap: 12px; margin-bottom: 18px; }
.tk-msg { border-radius: 13px; padding: 13px 16px; max-width: 86%; }
.tk-msg.clinica { background: var(--line-2); }
.tk-msg.soporte {
  background: var(--green-soft); margin-left: auto;
  border: 1px solid color-mix(in srgb, var(--green) 20%, transparent);
}
.tk-msg-head {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 5px;
  font-size: 12px; color: var(--muted-2);
}
.tk-msg-head b { font-size: 13px; color: var(--text); }
.tk-msg-body { font-size: 14px; color: var(--text); white-space: pre-line; line-height: 1.55; }

.tk-files {
  border-top: 1px solid var(--line-2); padding-top: 13px; margin-bottom: 16px;
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.tk-files b { font-size: 12.5px; color: var(--muted); }
.tk-files a { font-size: 13px; color: var(--green); }

.tk-closed {
  background: color-mix(in srgb, var(--ok) 8%, transparent);
  border-left: 3px solid var(--ok); border-radius: 9px;
  padding: 11px 15px; margin-bottom: 16px;
  font-size: 13px; color: var(--muted);
}

.tk-reply { border-top: 1px solid var(--line-2); padding-top: 16px; }
.tk-reply textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 11px;
  padding: 12px 14px; font-family: inherit; font-size: 14px; resize: vertical;
  background: var(--surface); color: var(--text); outline: none;
}
.tk-reply textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.tk-reply-actions { display: flex; gap: 9px; justify-content: flex-end; margin-top: 11px; }

@media (max-width: 760px) {
  .tk-msg { max-width: 100%; }
  .tk-reply-actions { flex-direction: column-reverse; }
  .tk-reply-actions button { width: 100%; }
}

/* Citas de estética en la agenda compartida */
.pill.tp-estetica { background: var(--purple-soft); color: var(--purple); }
.cal-event.estetica { border-left-color: var(--purple); }

/* ============================================================
   MEDICINA PREVENTIVA
   ============================================================ */
.prev-list { display: grid; gap: 9px; }
.prev-item {
  display: flex; align-items: center; gap: 13px;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--line); border-radius: 12px; padding: 12px 15px;
}
.prev-item.pronto  { border-left-color: var(--amber-text); background: color-mix(in srgb, var(--amber-text) 5%, var(--surface)); }
.prev-item.vencido { border-left-color: var(--red); background: color-mix(in srgb, var(--red) 5%, var(--surface)); }
.prev-kind {
  font-size: 10.5px; font-weight: 700; padding: 4px 10px; border-radius: 20px;
  flex: none; letter-spacing: .02em;
}
.prev-kind.vacuna         { background: var(--blue-soft); color: var(--blue); }
.prev-kind.desparasitante { background: var(--green-soft); color: var(--green); }
.prev-kind.otro           { background: var(--line-2); color: var(--muted); }
.prev-info { flex: 1; min-width: 0; }
.prev-name { font-size: 14.5px; font-weight: 700; color: var(--text); }
.prev-meta { font-size: 12px; color: var(--muted-2); margin-top: 2px; }
.prev-due { text-align: right; flex: none; font-size: 13px; }
.prev-due-label {
  display: block; font-size: 10.5px; color: var(--muted-2);
  text-transform: uppercase; letter-spacing: .05em;
}
.prev-due b { color: var(--text); }
.prev-item.vencido .prev-due b { color: var(--red); }
.prev-item.pronto  .prev-due b { color: var(--amber-text); }

/* Estética a domicilio */
.groom-home {
  font-size: 12.5px; color: var(--amber-text); margin-top: 5px;
  background: var(--amber-soft); padding: 4px 10px; border-radius: 8px;
  display: inline-block;
}

@media (max-width: 760px) {
  .prev-item { flex-wrap: wrap; }
  .prev-due { text-align: left; width: 100%; margin-top: 4px; }
}