/* =========================================
   VARIABLES GLOBALES
   ========================================= */
:root {
  --header-height: 64px;
  --sidebar-width: 248px;
  --sidebar-width-collapsed: 64px;
  --border: #e2e8f0;
  --border-dark: #2b3233;
  --muted: #64748b;
  --text: #0f172a;
  /* Tema 'teal' (ver TEMAS DE COLOR más abajo). */
  --sidebar-bg: #191d1e;
  --sidebar-bg-rgb: 25, 29, 30;
  --sidebar-bg-2: #272d2e;
  --sidebar-text: rgba(255,255,255,0.72);
  --sidebar-hover-bg: rgba(255,255,255,0.07);
  --primary: #4fc5c1;
  --primary-rgb: 79, 197, 193;
  --primary-dark: #3aada9;
  --primary-text: #0d7a76;
  --primary-text-rgb: 13, 122, 118;
  --sidebar-active-bg: rgba(var(--primary-rgb), 0.18);
  --sidebar-active-text: var(--primary);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.10);

  /* Diseño de la barra superior: tres franjas diagonales y un brillo en la
     esquina, todo en blancos translúcidos para que funcione sobre cualquier
     color. Cada tema lo reutiliza y solo aporta su degradado (--nav-bg). */
  --nav-pattern:
    linear-gradient(112deg, transparent 52%, rgba(255,255,255,0.05) 52%, rgba(255,255,255,0.05) 63%, transparent 63%),
    linear-gradient(100deg, transparent 66%, rgba(255,255,255,0.07) 66%, rgba(255,255,255,0.07) 78%, transparent 78%),
    linear-gradient(148deg, transparent 74%, rgba(255,255,255,0.05) 74%, rgba(255,255,255,0.05) 88%, transparent 88%),
    radial-gradient(130% 260% at 92% -80%, rgba(255,255,255,0.12), transparent 60%);
  --nav-bg: var(--nav-pattern), linear-gradient(90deg, #0b3a40 0%, #145f66 60%, #157377 100%);
}

/* =========================================
   TEMAS DE COLOR (selector en la barra superior)
   =========================================
   Todos los temas siguen el mismo patrón: barra superior con el color del tema
   en degradado + el patrón diagonal compartido (--nav-pattern), y sidebar en un
   gris muy oscuro apenas teñido con el tono del tema. Antes solo esmeralda era
   bicolor y el resto pintaba la barra del mismo color que el sidebar.

   Los valores de :root son los del tema 'teal', que aplica cuando
   data-theme="teal". El tema por defecto es 'emerald' (bloque al final): se
   aplica tanto sin atributo (nada guardado todavía) como con data-theme="emerald".

   Al tocar un tema hay que actualizar también su swatch bicolor (.theme-swatch
   más abajo) y el sidebarBg de THEME_PRESETS en js/shared.js, que es el color
   que va al <meta name="theme-color"> del móvil. */
/* Azul */
[data-theme="blue"] {
  --sidebar-bg: #181b21; --sidebar-bg-rgb: 24, 27, 33; --sidebar-bg-2: #262b33;
  --border-dark: #2a3038;
  --primary: #60a5fa; --primary-rgb: 96, 165, 250; --primary-dark: #2563eb;
  --primary-text: #1d4ed8; --primary-text-rgb: 29, 78, 216;
  --nav-bg: var(--nav-pattern), linear-gradient(90deg, #10314f 0%, #1a5183 60%, #1d6099 100%);
}
/* Morado */
[data-theme="purple"] {
  --sidebar-bg: #1d1922; --sidebar-bg-rgb: 29, 25, 34; --sidebar-bg-2: #2b2634;
  --border-dark: #302b39;
  --primary: #a78bfa; --primary-rgb: 167, 139, 250; --primary-dark: #7c3aed;
  --primary-text: #6d28d9; --primary-text-rgb: 109, 40, 217;
  --nav-bg: var(--nav-pattern), linear-gradient(90deg, #2a1f4d 0%, #43317f 60%, #5a41a8 100%);
}
/* Ámbar */
[data-theme="amber"] {
  --sidebar-bg: #201c17; --sidebar-bg-rgb: 32, 28, 23; --sidebar-bg-2: #2f2a23;
  --border-dark: #342f28;
  --primary: #fbbf24; --primary-rgb: 251, 191, 36; --primary-dark: #d97706;
  --primary-text: #92400e; --primary-text-rgb: 146, 64, 14;
  --nav-bg: var(--nav-pattern), linear-gradient(90deg, #4d3411 0%, #7d5518 60%, #9c6a1c 100%);
}
/* Rosa */
[data-theme="rose"] {
  --sidebar-bg: #201519; --sidebar-bg-rgb: 32, 21, 25; --sidebar-bg-2: #2f2027;
  --border-dark: #34242b;
  --primary: #fb7185; --primary-rgb: 251, 113, 133; --primary-dark: #e11d48;
  --primary-text: #be123c; --primary-text-rgb: 190, 18, 60;
  --nav-bg: var(--nav-pattern), linear-gradient(90deg, #4a1020 0%, #7d1c35 60%, #a8264a 100%);
}
/* Esmeralda (tema por defecto). El selector :root:not([data-theme]) cubre al
   usuario que nunca eligió color; el segundo, a quien eligió esmeralda. */
:root:not([data-theme]),
[data-theme="emerald"] {
  --sidebar-bg: #1b1b1f; --sidebar-bg-rgb: 27, 27, 31; --sidebar-bg-2: #2a2a30;
  --border-dark: #2b2b32;
  --primary: #34d399; --primary-rgb: 52, 211, 153; --primary-dark: #059669;
  --primary-text: #047857; --primary-text-rgb: 4, 120, 87;
  --nav-bg: var(--nav-pattern), linear-gradient(90deg, #0f4136 0%, #16604e 60%, #1c7a61 100%);
}

/* Reset propio (no dependemos del preflight del CDN de Tailwind): sin esto, el
   margen por defecto del body deja un borde blanco en los 4 lados del panel. */
html, body { margin: 0; padding: 0; }
html { overflow-x: clip; }

/* Iconos Lucide (ver js/shared.js#icon): por defecto se comportan como el emoji
   inline que reemplazan, heredando el tamaño de fuente del contenedor. Los
   contenedores de tamaño fijo (empty-state, avatares, etc.) traen su propio
   override junto a su clase. */
svg.lucide { width: 1em; height: 1em; stroke-width: 2; vertical-align: -0.125em; flex-shrink: 0; }
body {
  min-height: 100vh;
  background: #f8fafc;
  font-family: 'Work Sans', sans-serif;
  color: var(--sidebar-bg);
}
*, *::before, *::after { box-sizing: border-box; }

/* El [hidden] del UA (display:none sin !important) pierde contra cualquier regla
   de autor que fije display (.btn, .filter-count, estilos inline…). Esta regla
   garantiza que hidden SIEMPRE oculte, como hace el preflight de Tailwind. */
[hidden] { display: none !important; }

/* =========================================
   BARRA DE CARGA GLOBAL (top progress bar)
   ========================================= */
#vet-loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg, var(--primary), var(--primary-dark));
  background-size: 200% 100%;
  border-radius: 0 2px 2px 0;
  transition: opacity 0.15s ease;
}

#vet-loading-bar.lbar-active {
  opacity: 1;
  animation: lbar-grow 8s cubic-bezier(0.1, 0.05, 0, 1) forwards,
             lbar-shimmer 1.4s linear infinite;
}

#vet-loading-bar.lbar-complete {
  width: 100% !important;
  animation: lbar-shimmer 1.4s linear infinite;
  opacity: 0;
  transition: width 0.15s ease, opacity 0.35s ease 0.1s;
}

@keyframes lbar-grow {
  0%   { width: 0%; }
  40%  { width: 55%; }
  70%  { width: 75%; }
  90%  { width: 88%; }
  100% { width: 92%; }
}

@keyframes lbar-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* =========================================
   LAYOUT PRINCIPAL
   ========================================= */
.vet-layout {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  width: 100%;
  min-height: calc(100vh - var(--header-height));
  transition: grid-template-columns 0.28s ease;
}

.vet-layout.sidebar-collapsed {
  grid-template-columns: var(--sidebar-width-collapsed) 1fr;
}

/* =========================================
   SIDEBAR
   ========================================= */
/* Fija, no sticky: con sticky el borde inferior de .vet-layout la frena, asi
   que cualquier contenido que desborde y estire el alto scrolleable del
   documento la dejaba "corrida" hacia arriba, con un hueco blanco debajo al
   llegar al final de la pagina. Al ser fixed el ancho ya no lo da la pista del
   grid: hay que declararlo (ver .vet-sidebar.collapsed y el media query de
   tablet) y colocar el contenido en la 2a columna a mano (.vet-content). */
.vet-sidebar {
  background: var(--sidebar-bg);
  position: fixed;
  top: var(--header-height);
  left: 0;
  width: var(--sidebar-width);
  height: calc(100vh - var(--header-height));
  overflow: hidden;
  z-index: 10;
  display: flex;
  flex-direction: column;
  transition: width 0.28s ease;
  border-right: 1px solid var(--border-dark);
}

.vet-sidebar.collapsed { width: var(--sidebar-width-collapsed); }

.sidebar-scroll-area {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1.25rem 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}

.sidebar-scroll-area::-webkit-scrollbar { width: 4px; }
.sidebar-scroll-area::-webkit-scrollbar-track { background: transparent; }
.sidebar-scroll-area::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }

.sidebar-section {
  padding: 0 0.75rem;
  margin-bottom: 1.5rem;
}

.sidebar-label {
  display: block;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.35);
  padding: 0 0.5rem;
  margin-bottom: 0.4rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity 0.2s ease;
}

.sidebar-nav {
  list-style: none;
  display: grid;
  gap: 0.1rem;
  padding: 0;
  margin: 0;
}

.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  color: var(--sidebar-text);
  font-weight: 500;
  transition: background 0.18s ease, color 0.18s ease;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}

.sidebar-nav a:hover {
  background: var(--sidebar-hover-bg);
  color: rgba(255,255,255,0.95);
}

.sidebar-nav a.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
  font-weight: 600;
}

.sidebar-nav a.active .nav-icon svg { stroke: var(--sidebar-active-text); }

.sidebar-nav .nav-icon {
  width: 20px;
  min-width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-nav .nav-text {
  overflow: hidden;
  transition: opacity 0.2s ease, width 0.2s ease;
  white-space: nowrap;
}

.nav-tooltip { display: none; }

/* Footer con botón colapsar */
.sidebar-footer {
  padding: 0.75rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.btn-collapse-sidebar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.5rem;
  border: none;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.45);
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.2s ease, color 0.2s ease, transform 0.3s ease;
}

.btn-collapse-sidebar:hover {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.8);
}

/* =========================================
   SIDEBAR COLAPSADO
   ========================================= */
.vet-sidebar.collapsed .sidebar-label {
  opacity: 0;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.vet-sidebar.collapsed .sidebar-nav a {
  justify-content: center;
  padding: 0.6rem;
}

.vet-sidebar.collapsed .nav-text {
  opacity: 0;
  width: 0;
  overflow: hidden;
}

.vet-sidebar.collapsed .btn-collapse-sidebar {
  transform: rotate(180deg);
}

.vet-sidebar.collapsed .sidebar-nav a:hover .nav-tooltip {
  display: block;
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--text);
  color: #fff;
  padding: 0.3rem 0.8rem;
  border-radius: 6px;
  font-size: 0.78rem;
  white-space: nowrap;
  z-index: 200;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* =========================================
   CONTENIDO PRINCIPAL
   ========================================= */
.vet-content {
  grid-column: 2;
  min-width: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 2rem clamp(1.25rem, 3vw, 2.5rem) 3rem;
  background: #f8fafc;
}

/* =========================================
   TOP NAV
   ========================================= */
.vet-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nav-bg, rgba(var(--sidebar-bg-rgb), 0.97));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  height: var(--header-height);
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.vet-nav-inner {
  width: 100%;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.vet-brand {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  flex-shrink: 0;
}

.vet-brand img { height: 34px; width: auto; }

.vet-brand-label {
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1;
}

.vet-brand-label .brand-title {
  font-size: 0.92rem;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.92);
  text-transform: uppercase;
}

.vet-brand-label .brand-sub {
  font-size: 0.68rem;
  color: var(--primary);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.vet-nav-user {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nav-vet-info {
  text-align: right;
  line-height: 1.3;
}

.nav-vet-name {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
}

.nav-vet-role {
  font-size: 0.72rem;
  color: var(--primary);
  font-weight: 500;
}

.vet-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(var(--primary-rgb),0.25);
  border: 2px solid rgba(var(--primary-rgb),0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary);
  flex-shrink: 0;
  overflow: hidden;
}

.vet-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.btn-logout {
  padding: 0.375rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(239,68,68,0.35);
  background: rgba(239,68,68,0.08);
  color: #fca5a5;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.btn-logout:hover {
  background: rgba(239,68,68,0.18);
  color: #f87171;
}

/* =========================================
   SELECTOR DE COLOR (theme picker)
   ========================================= */
/* Selector de región/comuna homologado (components/geo-picker.js) */
.geo-picker { display: flex; flex-direction: column; gap: 0.6rem; }
.geo-picker select { width: 100%; }
.geo-picker-region[hidden] { display: none; }
.geo-picker-label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #475569;
}

.theme-picker { position: relative; }

.theme-picker-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
  flex-shrink: 0;
}

.theme-picker-btn:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
}

.theme-picker-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  display: none;
  gap: 0.5rem;
  padding: 0.6rem;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
}

.theme-picker-menu.open { display: flex; }

.theme-swatch {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: var(--swatch);
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--border);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

/* Bicolor: cada círculo anticipa el tema completo —color de la barra superior
   arriba-izquierda, gris del sidebar abajo-derecha—. El preset deja --swatch
   como hex plano porque el anillo de seleccionado es un box-shadow. */
.theme-swatch[data-theme="emerald"] {
  background: linear-gradient(135deg, #1a7259 0 50%, #1b1b1f 50% 100%);
}
.theme-swatch[data-theme="teal"] {
  background: linear-gradient(135deg, #145f66 0 50%, #191d1e 50% 100%);
}
.theme-swatch[data-theme="blue"] {
  background: linear-gradient(135deg, #1a5183 0 50%, #181b21 50% 100%);
}
.theme-swatch[data-theme="purple"] {
  background: linear-gradient(135deg, #43317f 0 50%, #1d1922 50% 100%);
}
.theme-swatch[data-theme="amber"] {
  background: linear-gradient(135deg, #7d5518 0 50%, #201c17 50% 100%);
}
.theme-swatch[data-theme="rose"] {
  background: linear-gradient(135deg, #7d1c35 0 50%, #201519 50% 100%);
}

.theme-swatch:hover { transform: scale(1.08); }

.theme-swatch[aria-checked="true"] {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--swatch);
}

.theme-swatch[aria-checked="true"]::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6);
}

.theme-swatch[aria-checked="true"]::before {
  content: '\2713';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
  z-index: 1;
}

/* Sidebar toggle (mobile) */
.sidebar-toggle {
  display: none;
  border: none;
  background: transparent;
  font-size: 1.5rem;
  cursor: pointer;
  color: rgba(255,255,255,0.8);
  padding: 0.25rem;
  margin-right: 0.5rem;
}

.sidebar-overlay { display: none; }

/* =========================================
   TIPOGRAFÍA DE PÁGINAS
   ========================================= */
.page-header {
  margin-bottom: 2rem;
}

.page-header--with-action {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Varias acciones a la derecha del encabezado (p. ej. el toggle de vista junto
   al botón principal en Citas). Envuelven juntas en pantallas angostas. */
.page-header-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.page-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 0.25rem 0;
}

.page-subtitle {
  color: var(--muted);
  font-size: 0.925rem;
  margin: 0;
}

/* =========================================
   CARDS COMPARTIDAS
   ========================================= */
.card {
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.card-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.card-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.card-body { padding: 1.5rem; }

/* =========================================
   BADGES DE ESTADO
   ========================================= */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.badge-pending  { background: #fef3c7; color: #92400e; }
.badge-confirmed { background: #dbeafe; color: #1e40af; }
/* Atendida: el paciente vino, falta la ficha clínica. Teal para que se lea como un
   paso previo a completada (verde), no como un estado de error. */
.badge-attended { background: rgba(var(--primary-rgb),0.15); color: var(--primary-text); }
.badge-completed { background: #d1fae5; color: #065f46; }
/* Sin cerrar: la puso el sistema, no consta qué pasó. Gris con borde para que se
   distinga de "no asistió" y no parezca un estado resuelto. */
.badge-unclosed { background: #f8fafc; color: #64748b; border: 1px dashed #cbd5e1; }
.badge-cancelled { background: #fee2e2; color: #991b1b; }
.badge-noshow   { background: #f1f5f9; color: #475569; }
.badge-active   { background: #d1fae5; color: #065f46; }
.badge-inactive { background: #f1f5f9; color: #475569; }
.badge-primary  { background: rgba(var(--primary-rgb),0.12); color: var(--primary-text); }
.badge-manual   { background: #fef3c7; color: #92400e; }

/* =========================================
   BOTONES
   ========================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.125rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.18s ease;
  white-space: nowrap;
  text-decoration: none;
}

/* =========================================
   TOAST NOTIFICATIONS
   ========================================= */
#vet-toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 99998;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  pointer-events: none;
  max-width: 360px;
  width: calc(100vw - 3rem);
}

.vet-toast {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.8rem 1rem;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 500;
  pointer-events: all;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.08);
  border: 1px solid transparent;
  transform: translateX(110%);
  opacity: 0;
  transition: transform 0.32s cubic-bezier(0.16,1,0.3,1), opacity 0.32s ease;
  word-break: break-word;
}

.vet-toast.vet-toast-show  { transform: translateX(0); opacity: 1; }
.vet-toast.vet-toast-hide  { transform: translateX(110%); opacity: 0; }

.vet-toast-success { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.vet-toast-error   { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.vet-toast-warning { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.vet-toast-info    { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }

.vet-toast-icon { flex-shrink: 0; display: flex; align-items: center; }
.vet-toast-msg  { flex: 1; line-height: 1.4; }
.vet-toast-close {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.75rem;
  color: currentColor;
  opacity: 0.5;
  padding: 0.1rem;
  line-height: 1;
  transition: opacity 0.15s ease;
}
.vet-toast-close:hover { opacity: 1; }

/* =========================================
   SKELETON LOADERS
   ========================================= */
@keyframes skeleton-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.skeleton {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
  display: block;
}

.skeleton-text  { height: 0.875rem; border-radius: 4px; }
.skeleton-title { height: 1.75rem; border-radius: 6px; }
.skeleton-stat  { height: 2.2rem; border-radius: 8px; }
.skeleton-avatar { border-radius: 50%; }
.skeleton-card  {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
}

/* =========================================
   NAV BADGE (reseñas pendientes)
   ========================================= */
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  margin-left: 0.3rem;
  vertical-align: middle;
}

/*
 * Aviso de configuración pendiente en el menú (clínica sin publicar, agenda sin
 * configurar). Es ámbar y sin número para no confundirlo con .nav-badge, que
 * cuenta cosas que llegaron (citas, reseñas); esto es algo que falta hacer.
 */
.nav-todo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f59e0b;
  margin-left: 0.4rem;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Con el menú plegado el texto desaparece y el punto se iría con él: se ancla a
   la esquina del icono para que el aviso siga siendo visible. */
.vet-sidebar.collapsed .sidebar-nav a { position: relative; }
.vet-sidebar.collapsed .nav-todo {
  position: absolute;
  top: 8px;
  right: 10px;
  margin: 0;
}

/* =========================================
   EMPTY STATES
   ========================================= */
.empty-state {
  text-align: center;
  padding: 3.5rem 2rem;
}

.empty-state-icon {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background: #f1f5f9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin-bottom: 1.25rem;
}

.empty-state-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 0.5rem 0;
}

.empty-state-desc {
  font-size: 0.875rem;
  color: #64748b;
  margin: 0 0 1.5rem 0;
  line-height: 1.6;
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
}

/* =========================================
   SERVICE TYPE ICONS / BADGES
   ========================================= */
.service-icon-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  font-weight: 500;
}

.service-icon-badge.in-person   { color: #0d7a76; }
.service-icon-badge.home-visit  { color: #7c3aed; }
.service-icon-badge.telemedicine { color: #1d4ed8; }

.btn-primary {
  background: var(--primary);
  color: #fff;
}
.btn-primary:hover { background: var(--primary-dark); }

.btn-secondary {
  background: #fff;
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-secondary:hover { background: #f8fafc; border-color: #cbd5e1; }

.btn-danger {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}
.btn-danger:hover { background: #fecaca; }

.btn-sm { padding: 0.3rem 0.75rem; font-size: 0.8rem; }

/* =========================================
   STATUS MESSAGE
   ========================================= */
.status-msg {
  display: none;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid transparent;
}
.status-msg.show { display: block; }
.status-msg.success { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.status-msg.error   { background: #fef2f2; color: #991b1b; border-color: #fecaca; }

/* =========================================
   FOOTER
   ========================================= */
.content-footer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--muted);
  font-size: 0.78rem;
}

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 768px) {
  .vet-layout { display: block; }
  .vet-layout.sidebar-collapsed { grid-template-columns: 1fr; }

  .vet-sidebar {
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: var(--sidebar-width);
    height: calc(100vh - var(--header-height));
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
    z-index: 100;
    box-shadow: 4px 0 32px rgba(0,0,0,0.25);
  }

  .vet-sidebar.collapsed { width: var(--sidebar-width); }
  .vet-sidebar.collapsed .sidebar-label { opacity: 1; height: auto; margin-bottom: 0.4rem; padding: 0 0.5rem; }
  .vet-sidebar.collapsed .sidebar-nav a { justify-content: flex-start; padding: 0.6rem 0.75rem; }
  .vet-sidebar.collapsed .nav-text { opacity: 1; width: auto; }
  .vet-sidebar.open { transform: translateX(0); }

  .sidebar-footer { display: none; }
  .sidebar-toggle { display: block; }
  .vet-content { padding: 1.5rem 1rem 2rem; }

  .sidebar-overlay {
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: 100%;
    height: calc(100vh - var(--header-height));
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(2px);
    z-index: 90;
  }
  .sidebar-overlay.open { display: block; }

  .nav-vet-info { display: none; }
}

/* =========================================
   RESPONSIVE — TABLET (769px–1024px)
   ========================================= */
@media (max-width: 1024px) and (min-width: 769px) {
  /* Colapsar sidebar automáticamente para dar más espacio al contenido */
  .vet-layout { grid-template-columns: var(--sidebar-width-collapsed) 1fr; }
  .vet-sidebar { width: var(--sidebar-width-collapsed); }
  .vet-sidebar .sidebar-label { opacity: 0; height: 0; margin: 0; padding: 0; overflow: hidden; }
  .vet-sidebar .sidebar-nav a { justify-content: center; padding: 0.6rem; }
  .vet-sidebar .nav-text { opacity: 0; width: 0; overflow: hidden; }
  .vet-sidebar .sidebar-footer { display: none; }
  /* Reducir nav para que no se desborde entre 769–900px */
  .vet-brand-label .brand-sub { display: none; }
  .btn-logout { font-size: 0.7rem; padding: 0.3rem 0.65rem; }
}

/* =========================================
   RESPONSIVE — PEQUEÑO MÓVIL (max 480px)
   ========================================= */
@media (max-width: 480px) {
  .page-title { font-size: 1.25rem; }
  .page-subtitle { font-size: 0.82rem; }
  .page-header { margin-bottom: 1.25rem; }
}

/* =========================================
   COMPONENTE COMPARTIDO: HISTORIAL MEDICO
   (usado por history-modal.js en citas y sala de espera)
   ========================================= */
.btn-view-history {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  margin-top: 1.5rem;
  padding: 0.7rem 1.25rem;
  background: transparent;
  border: 2px solid var(--primary);
  border-radius: 12px;
  color: var(--primary-text);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.btn-view-history:hover {
  background: rgba(var(--primary-rgb),0.10);
}

/* Modal apilado (z-index mayor que el de detalle) */
.modal-overlay--stacked {
  z-index: 600;
}

/* =========================================
   HISTORIAL MÉDICO — modal con timeline
   ========================================= */

/* Cabecera de mascota dentro del modal de historial */
.mhm-pet-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.25rem 0 1rem;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 1rem;
}
.mhm-pet-icon { font-size: 2rem; }
.mhm-pet-info { flex: 1; }
.mhm-pet-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}
.mhm-pet-meta { font-size: 0.8rem; color: #64748b; margin: 0; }
.mhm-count-badge {
  font-size: 0.72rem;
  font-weight: 600;
  background: #f1f5f9;
  color: #64748b;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* Skeleton loading */
.med-history-loading {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.mh-skel {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: mh-shimmer 1.4s infinite;
  border-radius: 8px;
  height: 14px;
}
.mh-skel--lg { width: 90%; height: 16px; }
.mh-skel--md { width: 70%; }
.mh-skel--sm { width: 50%; }
@keyframes mh-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.mhm-empty {
  text-align: center;
  color: #94a3b8;
  font-size: 0.88rem;
  padding: 2rem 0;
}

/* Timeline */
.mhm-timeline {
  display: flex;
  flex-direction: column;
  padding: 0.25rem 0;
}
.mhm-item {
  display: flex;
  gap: 1rem;
  min-height: 80px;
}
.mhm-item--last { min-height: auto; }

/* Marcador: punto + línea vertical */
.mhm-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 28px;
}
.mhm-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.08);
}
.mhm-dot.type-checkup     { background: linear-gradient(135deg, #10b981, #14b8a6); }
.mhm-dot.type-vaccination { background: linear-gradient(135deg, #4fc5c1, #0891b2); }
.mhm-dot.type-surgery     { background: linear-gradient(135deg, #06b6d4, #3b82f6); }
.mhm-dot.type-emergency   { background: linear-gradient(135deg, #ef4444, #f97316); }
.mhm-dot.type-followup    { background: linear-gradient(135deg, #8b5cf6, #6366f1); }
.mhm-dot.type-other       { background: linear-gradient(135deg, #6b7280, #9ca3af); }

.mhm-line {
  flex: 1;
  width: 2px;
  background: #e2e8f0;
  min-height: 16px;
  margin: 4px 0;
}

/* Card del registro */
.mhm-card {
  flex: 1;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 1rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.mhm-item--last .mhm-card { margin-bottom: 0.5rem; }

.mhm-card-header {
  padding: 0.65rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}
/* Header tinted backgrounds by type */
.mhm-card-header.type-checkup     { background: linear-gradient(135deg, rgba(16,185,129,0.10), rgba(20,184,166,0.06)); }
.mhm-card-header.type-vaccination { background: linear-gradient(135deg, rgba(79,197,193,0.12), rgba(8,145,178,0.06)); }
.mhm-card-header.type-surgery     { background: linear-gradient(135deg, rgba(6,182,212,0.10), rgba(59,130,246,0.06)); }
.mhm-card-header.type-emergency   { background: linear-gradient(135deg, rgba(239,68,68,0.10), rgba(249,115,22,0.06)); }
.mhm-card-header.type-followup    { background: linear-gradient(135deg, rgba(139,92,246,0.10), rgba(99,102,241,0.06)); }
.mhm-card-header.type-other       { background: #f8fafc; }

.mhm-type-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: #0f172a;
}
.mhm-date {
  font-size: 0.75rem;
  color: #64748b;
}

.mhm-card-body {
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mhm-field { display: flex; flex-direction: column; gap: 0.15rem; }
.mhm-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
}
.mhm-value {
  font-size: 0.84rem;
  color: #334155;
  margin: 0;
  line-height: 1.45;
}
.mhm-italic { font-style: italic; }

/* Chips: medicamentos y vacunas */
.mhm-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.15rem; }
.mhm-chip {
  font-size: 0.72rem;
  font-weight: 600;
  background: rgba(var(--primary-rgb),0.12);
  color: var(--primary-text);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
}
.mhm-chip--vaccine {
  background: rgba(16,185,129,0.10);
  color: #059669;
}

/* Signos vitales */
.mhm-vitals {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 0.6rem 0.85rem;
}
.mhm-vital {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.mhm-vital-icon { font-size: 1rem; }
.mhm-vital-label {
  display: block;
  font-size: 0.65rem;
  color: #94a3b8;
  font-weight: 600;
  text-transform: uppercase;
}
.mhm-vital-val {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: #0f172a;
}

/* Próximo control */
.mhm-next-visit {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(16,185,129,0.08);
  border: 1px solid rgba(16,185,129,0.20);
  border-radius: 10px;
  padding: 0.5rem 0.85rem;
}
.mhm-next-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #059669;
}
.mhm-next-date {
  display: block;
  font-size: 0.83rem;
  font-weight: 600;
  color: #065f46;
}

/* Veterinario */
.mhm-vet {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed #e2e8f0;
  font-size: 0.78rem;
  color: #64748b;
}
.mhm-vet-info { display: flex; flex-direction: column; }
.mhm-vet-name { font-weight: 600; color: #334155; font-size: 0.82rem; }
.mhm-vet-meta { font-size: 0.72rem; color: #94a3b8; }


/* =========================================
   UTILIDADES COMPARTIDAS (shared.js)
   ========================================= */

/* Foco visible consistente para navegación por teclado */
:focus-visible {
  outline: 2px solid var(--primary, #4fc5c1);
  outline-offset: 2px;
}

/* Tablas con scroll horizontal: sombras indicadoras (attachScrollShadows) */
.table-scroll {
  overflow-x: auto;
  transition: box-shadow 0.2s ease;
}
.table-scroll.shadow-left {
  box-shadow: inset 14px 0 12px -12px rgba(15, 23, 42, 0.22);
}
.table-scroll.shadow-right {
  box-shadow: inset -14px 0 12px -12px rgba(15, 23, 42, 0.22);
}
.table-scroll.shadow-left.shadow-right {
  box-shadow:
    inset 14px 0 12px -12px rgba(15, 23, 42, 0.22),
    inset -14px 0 12px -12px rgba(15, 23, 42, 0.22);
}

/* Validación de formularios (attachValidation) */
.field-invalid,
input.field-invalid,
textarea.field-invalid,
select.field-invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.08) !important;
}
.field-error {
  display: block;
  font-size: 0.72rem;
  color: #dc2626;
  margin-top: 0.3rem;
}

/* Marcador de campo obligatorio y hints de formulario */
.req-mark { color: #ef4444; }
.form-hint {
  display: block;
  font-size: 0.72rem;
  color: #94a3b8;
  margin-top: 0.25rem;
}

/* =========================================
   CAMPOS DE FORMULARIO
   =========================================
   Estaban definidos por duplicado en perfil.css y clinica.css. Viven aquí para
   que cualquier página del panel los tenga sin volver a copiarlos; esas dos hojas
   mantienen sus copias (idénticas) y siguen ganando por orden de carga. */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

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

.form-group { display: flex; flex-direction: column; gap: 0.35rem; }
.form-group.full-width { grid-column: 1 / -1; }

.form-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #374151;
}

.form-input, .form-textarea, .form-select {
  padding: 0.6rem 0.875rem;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  font-size: 0.875rem;
  font-family: 'Work Sans', sans-serif;
  color: var(--text);
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  background: #fff;
  width: 100%;
}

.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb),0.1);
}

.form-textarea { min-height: 100px; resize: vertical; }

/* =========================================
   MODALES (base)
   =========================================
   S.openModal/closeModal/bindModal viven en shared.js, que carga toda página del
   panel, pero estas reglas solo existían en citas.css: un modal abierto desde
   Perfil o Mi Clínica salía sin estilos. citas.css conserva sus copias y sigue
   ganando por orden de carga. */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.modal-overlay.open { opacity: 1; visibility: visible; }

.modal-box {
  background: #fff;
  border-radius: 20px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0,0,0,0.18);
  transform: scale(0.96) translateY(8px);
  transition: transform 0.25s cubic-bezier(0.16,1,0.3,1);
}

.modal-overlay.open .modal-box { transform: scale(1) translateY(0); }

.modal-box--sm { max-width: 440px; }
.modal-box--md { max-width: 480px; }
.modal-box--lg { max-width: 760px; }

.modal-header {
  padding: 1.5rem;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.modal-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: #f1f5f9;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: background 0.15s ease;
}

.modal-close:hover { background: #e2e8f0; color: var(--text); }

.modal-body { padding: 1.5rem; }

/* Botón terciario: acciones que no compiten con la principal ("Ahora no"). */
.btn-ghost {
  background: transparent;
  color: var(--muted);
  border: none;
}
.btn-ghost:hover { background: #f1f5f9; color: var(--text); }

/* Fila de botones al pie de un modal */
.modal-btn-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.25rem;
}
.btn-grow { flex: 1; }

/* Equivalente textual de un gráfico para lectores de pantalla. Un <canvas> es
   opaco para ellos, así que la tabla que acompaña a cada gráfico no es un extra:
   es la única vía de acceso al dato. La usan el dashboard y la ficha de
   internación, por eso vive aquí y no en panel.css. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}