/* ==========================================================================
   Sandía · Medicina y Spa Veterinario — sistema de diseño sobre Bootstrap 5.3
   Tokens de marca + ajustes para uso con el pulgar en celular y tablet.
   ========================================================================== */

:root {
  /* --- Tokens de identidad ------------------------------------------------ */
  --sandia-rojo: #E53935;
  --sandia-rojo-claro: #EF4444;
  --sandia-rojo-oscuro: #C62828;
  --sandia-rosa-suave: #FFF1F2;
  --sandia-rosa-claro: #FFE4E6;
  --sandia-rosa-borde: #FECDD3;
  --sandia-rosa: #FDA4AF;
  --sandia-coral: #FB7185;
  --sandia-verde: #4CAF50;
  --sandia-verde-oscuro: #2E7D32;
  --sandia-crema: #FDF6EE;
  --sandia-beige: #F7D6B5;
  --sandia-menta: #4DB6AC;
  --sandia-menta-oscura: #26A69A;
  --sandia-tinta: #212121;
  --sandia-blanco: #FFFFFF;
  --sandia-ambar: #F59E0B;
  --sandia-gris: #6B7280;
  --sandia-gris-claro: #E8E4DE;

  --fuente-marca: 'Fredoka', 'Quicksand', 'Nunito', system-ui, sans-serif;
  --fuente-cuerpo: 'Nunito', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --alto-toque: 44px;
  --alto-barra-inferior: 64px;
  --radio-card: 1rem;

  /* --- Bootstrap: colores semánticos --------------------------------------
     primary = rojo Sandía (CTA), success = verde hoja (al día), info = menta
     (spa / estado activo), warning = ámbar (próximo a vencer), danger = rojo
     profundo (vencido / urgente). */
  --bs-primary: var(--sandia-rojo);
  --bs-primary-rgb: 229, 57, 53;
  --bs-primary-text-emphasis: #8E1B18;
  --bs-primary-bg-subtle: #FDECEB;
  --bs-primary-border-subtle: #F5B4B2;

  --bs-success: var(--sandia-verde);
  --bs-success-rgb: 76, 175, 80;
  --bs-success-text-emphasis: var(--sandia-verde-oscuro);
  --bs-success-bg-subtle: #E8F5E9;
  --bs-success-border-subtle: #A5D6A7;

  --bs-info: var(--sandia-menta-oscura);
  --bs-info-rgb: 38, 166, 154;
  --bs-info-text-emphasis: #00695C;
  --bs-info-bg-subtle: #E0F2F1;
  --bs-info-border-subtle: #80CBC4;

  --bs-warning: var(--sandia-ambar);
  --bs-warning-rgb: 245, 158, 11;
  --bs-warning-text-emphasis: #7C4A03;
  --bs-warning-bg-subtle: #FEF3C7;
  --bs-warning-border-subtle: #FCD98B;

  --bs-danger: var(--sandia-rojo-oscuro);
  --bs-danger-rgb: 198, 40, 40;
  --bs-danger-text-emphasis: #7F1D1D;
  --bs-danger-bg-subtle: #FBE4E4;
  --bs-danger-border-subtle: #EFA6A6;

  --bs-body-font-family: var(--fuente-cuerpo);
  --bs-body-color: var(--sandia-tinta);
  --bs-body-bg: var(--sandia-crema);
  --bs-secondary-color: var(--sandia-gris);
  --bs-border-color: var(--sandia-gris-claro);
  --bs-link-color: var(--sandia-rojo-oscuro);
  --bs-link-color-rgb: 198, 40, 40;
  --bs-link-hover-color: #8E1B18;
  --bs-link-hover-color-rgb: 142, 27, 24;
  --bs-focus-ring-color: rgba(229, 57, 53, 0.25);
  --bs-border-radius: 0.6rem;
  --bs-border-radius-lg: 0.85rem;
}

/* --- Botones ---------------------------------------------------------------- */
.btn-primary {
  --bs-btn-bg: var(--sandia-rojo);
  --bs-btn-border-color: var(--sandia-rojo);
  --bs-btn-hover-bg: var(--sandia-rojo-oscuro);
  --bs-btn-hover-border-color: var(--sandia-rojo-oscuro);
  --bs-btn-active-bg: #B71C1C;
  --bs-btn-active-border-color: #B71C1C;
  --bs-btn-disabled-bg: #F1A3A1;
  --bs-btn-disabled-border-color: #F1A3A1;
  --bs-btn-focus-shadow-rgb: 229, 57, 53;
}
.btn-outline-primary {
  --bs-btn-color: var(--sandia-rojo-oscuro);
  --bs-btn-border-color: var(--sandia-rojo);
  --bs-btn-hover-bg: var(--sandia-rojo);
  --bs-btn-hover-border-color: var(--sandia-rojo);
  --bs-btn-active-bg: var(--sandia-rojo-oscuro);
  --bs-btn-active-border-color: var(--sandia-rojo-oscuro);
  --bs-btn-focus-shadow-rgb: 229, 57, 53;
}
.btn-success {
  --bs-btn-bg: var(--sandia-verde);
  --bs-btn-border-color: var(--sandia-verde);
  --bs-btn-hover-bg: var(--sandia-verde-oscuro);
  --bs-btn-hover-border-color: var(--sandia-verde-oscuro);
  --bs-btn-active-bg: #1B5E20;
  --bs-btn-active-border-color: #1B5E20;
  --bs-btn-disabled-bg: #A5D6A7;
  --bs-btn-disabled-border-color: #A5D6A7;
  --bs-btn-focus-shadow-rgb: 76, 175, 80;
}
.btn-outline-success {
  --bs-btn-color: var(--sandia-verde-oscuro);
  --bs-btn-border-color: var(--sandia-verde);
  --bs-btn-hover-bg: var(--sandia-verde);
  --bs-btn-hover-border-color: var(--sandia-verde);
  --bs-btn-active-bg: var(--sandia-verde-oscuro);
  --bs-btn-active-border-color: var(--sandia-verde-oscuro);
  --bs-btn-focus-shadow-rgb: 76, 175, 80;
}
.btn-info {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--sandia-menta-oscura);
  --bs-btn-border-color: var(--sandia-menta-oscura);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #00897B;
  --bs-btn-hover-border-color: #00897B;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #00796B;
  --bs-btn-active-border-color: #00796B;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #80CBC4;
  --bs-btn-disabled-border-color: #80CBC4;
  --bs-btn-focus-shadow-rgb: 38, 166, 154;
}
.btn-outline-info {
  --bs-btn-color: #00796B;
  --bs-btn-border-color: var(--sandia-menta-oscura);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--sandia-menta-oscura);
  --bs-btn-hover-border-color: var(--sandia-menta-oscura);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #00796B;
  --bs-btn-active-border-color: #00796B;
  --bs-btn-focus-shadow-rgb: 38, 166, 154;
}
.btn-warning {
  --bs-btn-color: #3D2600;
  --bs-btn-bg: var(--sandia-ambar);
  --bs-btn-border-color: var(--sandia-ambar);
  --bs-btn-hover-color: #3D2600;
  --bs-btn-hover-bg: #D97706;
  --bs-btn-hover-border-color: #D97706;
  --bs-btn-active-color: #3D2600;
  --bs-btn-active-bg: #B45309;
  --bs-btn-active-border-color: #B45309;
  --bs-btn-focus-shadow-rgb: 245, 158, 11;
}
.btn-danger {
  --bs-btn-bg: var(--sandia-rojo-oscuro);
  --bs-btn-border-color: var(--sandia-rojo-oscuro);
  --bs-btn-hover-bg: #A31F1F;
  --bs-btn-hover-border-color: #A31F1F;
  --bs-btn-active-bg: #8E1B18;
  --bs-btn-active-border-color: #8E1B18;
  --bs-btn-disabled-bg: #E39A9A;
  --bs-btn-disabled-border-color: #E39A9A;
  --bs-btn-focus-shadow-rgb: 198, 40, 40;
}
.btn-outline-danger {
  --bs-btn-color: var(--sandia-rojo-oscuro);
  --bs-btn-border-color: var(--sandia-rojo-oscuro);
  --bs-btn-hover-bg: var(--sandia-rojo-oscuro);
  --bs-btn-hover-border-color: var(--sandia-rojo-oscuro);
  --bs-btn-active-bg: #A31F1F;
  --bs-btn-active-border-color: #A31F1F;
  --bs-btn-focus-shadow-rgb: 198, 40, 40;
}
.btn-outline-secondary {
  --bs-btn-color: #374151;
  --bs-btn-border-color: #C9C3BA;
  --bs-btn-hover-bg: #F1ECE5;
  --bs-btn-hover-color: #111827;
  --bs-btn-hover-border-color: #B9B2A8;
  --bs-btn-active-bg: #E8E4DE;
  --bs-btn-active-color: #111827;
  --bs-btn-active-border-color: #B9B2A8;
}

/* Tamaño de toque: botones y campos con alineación perfecta e inmunes a estiramientos */
.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  text-align: center !important;
  min-height: 38px;
  font-weight: 600;
  line-height: 1.2 !important;
  border-radius: var(--bs-border-radius);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none !important;
  gap: 0.35rem;
  flex-shrink: 0;
}
.btn-xs, a.btn-xs, button.btn-xs {
  min-height: 26px !important;
  height: 26px !important;
  padding: 0 0.65rem !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}
.btn-sm, a.btn-sm, button.btn-sm, input[type="submit"].btn-sm {
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 0.85rem !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}
.btn-lg, a.btn-lg, button.btn-lg {
  min-height: 48px !important;
  font-size: 1.05rem !important;
  padding: 0.6rem 1.5rem !important;
}

/* Botones con estilo Rosa y Coral Sandía (Detalles de marca) */
.btn-sandia-rosa {
  background-color: #FFF1F2 !important;
  color: #BE123C !important;
  border: 1.5px solid #FECDD3 !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px rgba(225, 29, 72, 0.08);
}
.btn-sandia-rosa:hover {
  background-color: #FFE4E6 !important;
  color: #9F1239 !important;
  border-color: #FDA4AF !important;
  transform: translateY(-1px);
}
.btn-sandia-coral {
  background: linear-gradient(135deg, #E53935 0%, #FB7185 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px rgba(229, 57, 53, 0.28) !important;
}
.btn-sandia-coral:hover {
  background: linear-gradient(135deg, #D32F2F 0%, #F43F5E 100%) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(229, 57, 53, 0.35) !important;
}

/* Clases de apoyo con detalles rosados del logo de Sandía */
.bg-sandia-rosa-suave { background-color: #FFF1F2 !important; }
.bg-sandia-rosa-claro { background-color: #FFE4E6 !important; }
.bg-sandia-rosa-gradiente { background: linear-gradient(135deg, #FFF1F2 0%, #FFE4E6 100%) !important; }
.bg-sandia-card-hero { background: linear-gradient(135deg, #FFFFFF 0%, #FFF5F6 50%, #FFF0F3 100%) !important; }
.border-sandia-rosa { border-color: #FECDD3 !important; }
.border-sandia-rosa-fuerte { border-color: #FDA4AF !important; }
.text-sandia-rosa { color: #BE123C !important; }
.badge-sandia-rosa {
  background-color: #FFE4E6 !important;
  color: #BE123C !important;
  border: 1px solid #FECDD3 !important;
  font-weight: 700 !important;
}
.card-header-sandia {
  background: linear-gradient(135deg, #FFF1F2 0%, #FFF8F8 100%) !important;
  border-bottom: 1.5px solid #FECDD3 !important;
}

.form-control, .form-select { min-height: 40px; border-radius: var(--bs-border-radius); }
.form-control-sm, .form-select-sm { min-height: 32px; }
.form-control:focus, .form-select:focus {
  border-color: var(--sandia-rojo-claro);
  box-shadow: 0 0 0 0.25rem rgba(229, 57, 53, 0.2);
}
.form-check-input { width: 1.25em; height: 1.25em; margin-top: 0.15em; }
.form-check-input:checked { background-color: var(--sandia-verde); border-color: var(--sandia-verde); }
.form-check-input:focus { border-color: var(--sandia-verde); box-shadow: 0 0 0 0.25rem rgba(76, 175, 80, 0.25); }
.form-switch .form-check-input { width: 2.6em; height: 1.4em; margin-top: 0.05em; }
.form-label { font-weight: 700; }

/* --- Componentes ------------------------------------------------------------ */
.nav-pills { --bs-nav-pills-link-active-bg: var(--sandia-rojo); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--sandia-rojo); --bs-dropdown-border-radius: var(--bs-border-radius-lg); }
.list-group { --bs-list-group-active-bg: var(--sandia-rojo); --bs-list-group-active-border-color: var(--sandia-rojo); }
.pagination { --bs-pagination-active-bg: var(--sandia-rojo); --bs-pagination-active-border-color: var(--sandia-rojo); --bs-pagination-color: var(--sandia-rojo-oscuro); }
.progress-bar { background-color: var(--sandia-rojo); }
.accordion { --bs-accordion-active-bg: var(--bs-primary-bg-subtle); --bs-accordion-active-color: var(--bs-primary-text-emphasis); --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(229, 57, 53, 0.25); }
.badge { font-weight: 700; letter-spacing: 0.01em; }

.card {
  --bs-card-border-radius: var(--radio-card);
  --bs-card-inner-border-radius: calc(var(--radio-card) - 1px);
  --bs-card-border-color: var(--sandia-gris-claro);
  --bs-card-cap-bg: transparent;
  box-shadow: 0 1px 2px rgba(33, 33, 33, 0.04), 0 4px 14px rgba(33, 33, 33, 0.05);
}
.card-header { font-weight: 800; }
.table { --bs-table-hover-bg: #FDF1E7; }
.table thead th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sandia-gris); font-weight: 800; }

/* --- Botones con volumen, relieve y destellos Sandía ------------------------- */
.btn-sandia {
  background: linear-gradient(135deg, #f43f5e 0%, #e11d48 50%, #be123c 100%);
  color: #ffffff !important;
  border: 1px solid rgba(190, 18, 60, 0.4);
  box-shadow: 0 4px 14px -2px rgba(225, 29, 72, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  font-weight: 700;
  border-radius: 0.75rem;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  position: relative;
  overflow: hidden;
}
.btn-sandia::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 50%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: rotate(25deg);
  transition: all 0.55s ease;
  pointer-events: none;
}
.btn-sandia:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 18px -2px rgba(225, 29, 72, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  color: #ffffff;
}
.btn-sandia:hover::after {
  left: 130%;
}
.btn-sandia:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(225, 29, 72, 0.35);
}

.btn-sandia-verde {
  background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
  color: #ffffff !important;
  border: 1px solid rgba(4, 120, 87, 0.4);
  box-shadow: 0 4px 14px -2px rgba(16, 185, 129, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  font-weight: 700;
  border-radius: 0.75rem;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  position: relative;
  overflow: hidden;
}
.btn-sandia-verde::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 50%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: rotate(25deg);
  transition: all 0.55s ease;
  pointer-events: none;
}
.btn-sandia-verde:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 18px -2px rgba(16, 185, 129, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  color: #ffffff;
}
.btn-sandia-verde:hover::after {
  left: 130%;
}
.btn-sandia-verde:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35);
}

/* Botón de acción en tarjeta de paciente (Ver Ficha Médica) */
.btn-tarjeta-accion {
  background: #fff1f2;
  color: #e11d48 !important;
  border: 1.5px solid #fecdd3;
  border-radius: 9999px;
  font-weight: 700;
  padding: 0.35rem 0.9rem;
  font-size: 0.82rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  box-shadow: 0 1px 4px rgba(225, 29, 72, 0.08);
  transition: all 0.18s ease;
  text-decoration: none;
}
.btn-tarjeta-accion i {
  transition: transform 0.18s ease;
}
.btn-tarjeta-accion:hover {
  background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
  color: #ffffff !important;
  border-color: #e11d48;
  box-shadow: 0 4px 12px rgba(225, 29, 72, 0.32);
  transform: translateY(-1px);
}
.btn-tarjeta-accion:hover i {
  transform: translateX(3px);
  color: #ffffff;
}

/* Tarjeta de Paciente */
.tarjeta-paciente {
  background: #ffffff;
  border-radius: 1rem;
  border: 1.5px solid #f1f5f9;
  border-top: 3.5px solid #f43f5e;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.tarjeta-paciente:hover {
  transform: translateY(-3px);
  border-color: #fecdd3;
  border-top-color: #e11d48;
  box-shadow: 0 10px 24px -4px rgba(225, 29, 72, 0.14);
}

/* --- Marca ------------------------------------------------------------------ */
.marca { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: inherit; }
.marca__logo { width: 40px; height: 40px; flex: 0 0 auto; }
.marca__texto { display: flex; flex-direction: column; line-height: 1; }
.marca__nombre {
  font-family: var(--fuente-marca);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  color: var(--sandia-rojo);
}
.marca__subtitulo {
  font-family: var(--fuente-cuerpo);
  font-weight: 800;
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--sandia-verde-oscuro);
  margin-top: 0.25rem;
}
.marca--grande .marca__logo { width: 96px; height: 96px; }
.marca--grande .marca__nombre { font-size: 2.6rem; }
.marca--grande .marca__subtitulo { font-size: 0.75rem; }

/* --- Marca en la barra superior (Centrada y con mayor presencia) ------------ */
.marca--navbar {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
  transition: transform 0.18s ease, filter 0.18s ease;
}
.marca--navbar:hover {
  transform: scale(1.03);
  filter: drop-shadow(0 2px 8px rgba(229, 57, 53, 0.18));
}
.marca--navbar .marca__logo {
  width: 48px;
  height: 48px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
}
.marca--navbar .marca__nombre {
  font-size: 1.85rem;
  letter-spacing: 0.03em;
  line-height: 0.95;
}
.marca--navbar .marca__subtitulo {
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  margin-top: 0.22rem;
  font-weight: 800;
}

@media (max-width: 576px) {
  .marca--navbar {
    gap: 0.5rem;
  }
  .marca--navbar .marca__logo {
    width: 40px;
    height: 40px;
  }
  .marca--navbar .marca__nombre {
    font-size: 1.55rem;
  }
  .marca--navbar .marca__subtitulo {
    font-size: 0.55rem;
    letter-spacing: 0.15em;
  }
}

h1, h2, h3, .h1, .h2, .h3 { font-family: var(--fuente-cuerpo); font-weight: 800; letter-spacing: -0.01em; }
.titulo-pagina { font-size: 1.5rem; margin: 0; }
@media (min-width: 768px) { .titulo-pagina { font-size: 1.85rem; } }

/* --- Barra superior --------------------------------------------------------- */
.barra-superior {
  background: var(--sandia-blanco);
  border-bottom: 3.5px solid var(--sandia-rojo);
  box-shadow: 0 2px 14px rgba(33, 33, 33, 0.07);
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}
.barra-superior__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
}
.barra-superior__izq {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.barra-superior__centro {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.barra-superior__der {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.btn-icono-menu {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--alto-toque); height: var(--alto-toque); flex: 0 0 auto;
  border: 1px solid var(--sandia-gris-claro); border-radius: var(--bs-border-radius);
  background: var(--sandia-blanco); color: var(--sandia-tinta); font-size: 1.4rem;
}
.btn-icono-menu:hover, .btn-icono-menu:focus { background: var(--sandia-crema); color: var(--sandia-rojo); }

/* --- Menú lateral (offcanvas) ------------------------------------------------ */
.menu-lateral { width: 280px; max-width: 85vw; }
.menu-lateral .offcanvas-header { border-bottom: 1px solid var(--sandia-gris-claro); padding: 1rem 1.1rem; }
.menu-lateral__lista { list-style: none; margin: 0; padding: 0.5rem; }
.menu-lateral__enlace {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.75rem 0.9rem; margin: 0.1rem 0; border-radius: var(--bs-border-radius);
  color: var(--sandia-tinta); text-decoration: none; font-weight: 700; font-size: 0.98rem;
  min-height: var(--alto-toque);
}
.menu-lateral__enlace i { font-size: 1.2rem; width: 1.3rem; text-align: center; color: var(--sandia-gris); flex: 0 0 auto; }
.menu-lateral__enlace:hover { background: var(--sandia-crema); }
.menu-lateral__enlace.active { color: var(--sandia-rojo); background: var(--bs-primary-bg-subtle); }
.menu-lateral__enlace.active i { color: var(--sandia-rojo); }
.avatar-usuario {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--sandia-verde); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.95rem;
}

/* --- Barra inferior para celular (navegación con el pulgar) ---------------- */
.barra-inferior {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
  height: calc(var(--alto-barra-inferior) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--sandia-blanco);
  border-top: 1px solid var(--sandia-gris-claro);
  box-shadow: 0 -2px 10px rgba(33, 33, 33, 0.06);
  display: flex; justify-content: space-around; align-items: stretch;
}
.barra-inferior__item {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--sandia-gris); text-decoration: none; font-size: 0.68rem; font-weight: 700;
  padding: 6px 2px;
}
.barra-inferior__item i { font-size: 1.35rem; line-height: 1; }
.barra-inferior__item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.barra-inferior__item.active { color: var(--sandia-rojo); }
.barra-inferior__item:active { background: var(--sandia-crema); }
body.con-barra-inferior { padding-bottom: calc(var(--alto-barra-inferior) + env(safe-area-inset-bottom) + 0.5rem); }
@media (min-width: 768px) {
  .barra-inferior { display: none; }
  body.con-barra-inferior { padding-bottom: 0; }
}

/* --- Página principal ------------------------------------------------------- */
.contenido-principal { padding: 1rem 0 2rem; }
@media (min-width: 768px) { .contenido-principal { padding: 1.5rem 0 3rem; } }

.tarjeta-modulo {
  display: flex; align-items: center; gap: 1.1rem;
  padding: 1.15rem 1.25rem; min-height: 90px;
  background: var(--sandia-blanco); border: 1px solid rgba(232, 228, 222, 0.85); border-radius: var(--radio-card);
  color: var(--sandia-tinta); text-decoration: none;
  box-shadow: 0 2px 6px rgba(33, 33, 33, 0.03), 0 10px 24px -6px rgba(33, 33, 33, 0.06);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative; overflow: hidden;
}
.tarjeta-modulo::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: transparent; transition: background 0.2s ease, width 0.2s ease;
}
.tarjeta-modulo:hover, .tarjeta-modulo:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px -6px rgba(229, 57, 53, 0.18), 0 4px 12px rgba(0, 0, 0, 0.04);
  border-color: rgba(229, 57, 53, 0.35);
  color: var(--sandia-tinta);
}
.tarjeta-modulo:hover::before {
  background: var(--sandia-rojo);
}
.tarjeta-modulo:hover .tarjeta-modulo__icono {
  transform: scale(1.08) rotate(3deg);
  box-shadow: 0 6px 16px rgba(229, 57, 53, 0.22);
}
.tarjeta-modulo:hover .tarjeta-modulo__flecha {
  transform: translateX(4px);
  color: var(--sandia-rojo) !important;
}
.tarjeta-modulo__icono {
  width: 52px; height: 52px; flex: 0 0 auto; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #FDECEB 0%, #FEE2E2 100%);
  color: var(--sandia-rojo); font-size: 1.55rem;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.tarjeta-modulo__titulo { font-weight: 800; font-size: 1.05rem; line-height: 1.25; margin-bottom: 2px; }
.tarjeta-modulo__descripcion { font-size: 0.83rem; color: var(--sandia-gris); line-height: 1.35; }
.tarjeta-modulo__flecha { transition: transform 0.2s ease, color 0.2s ease; font-size: 1.15rem; }

/* Variantes de color por módulo en el dashboard */
.tarjeta-modulo[data-modulo="historias"] .tarjeta-modulo__icono { background: linear-gradient(135deg, #E0F2FE 0%, #BAE6FD 100%); color: #0284C7; }
.tarjeta-modulo[data-modulo="historias"]:hover::before { background: #0284C7; }
.tarjeta-modulo[data-modulo="mascotas"] .tarjeta-modulo__icono { background: linear-gradient(135deg, #FCE7F3 0%, #FBCFE8 100%); color: #DB2777; }
.tarjeta-modulo[data-modulo="mascotas"]:hover::before { background: #DB2777; }
.tarjeta-modulo[data-modulo="spa"] .tarjeta-modulo__icono { background: linear-gradient(135deg, #E0F2F1 0%, #B2DFDB 100%); color: #00897B; }
.tarjeta-modulo[data-modulo="spa"]:hover::before { background: #00897B; }
.tarjeta-modulo[data-modulo="pos"] .tarjeta-modulo__icono { background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%); color: #D97706; }
.tarjeta-modulo[data-modulo="pos"]:hover::before { background: #D97706; }
.tarjeta-modulo[data-modulo="caja"] .tarjeta-modulo__icono { background: linear-gradient(135deg, #DCFCE7 0%, #BBF7D0 100%); color: #16A34A; }
.tarjeta-modulo[data-modulo="caja"]:hover::before { background: #16A34A; }
.tarjeta-modulo[data-modulo="inventario"] .tarjeta-modulo__icono { background: linear-gradient(135deg, #EDE9FE 0%, #DDD6FE 100%); color: #7C3AED; }
.tarjeta-modulo[data-modulo="inventario"]:hover::before { background: #7C3AED; }
.tarjeta-modulo[data-modulo="agenda"] .tarjeta-modulo__icono { background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%); color: #DC2626; }
.tarjeta-modulo[data-modulo="agenda"]:hover::before { background: #DC2626; }
.tarjeta-modulo[data-modulo="reportes"] .tarjeta-modulo__icono { background: linear-gradient(135deg, #CCFBF1 0%, #99F6E4 100%); color: #0D9488; }
.tarjeta-modulo[data-modulo="reportes"]:hover::before { background: #0D9488; }

/* Saludo / Hero dinámico */
.saludo {
  background: linear-gradient(135deg, #FFFFFF 0%, #FDF6EE 55%, #FEE2E2 100%);
  border: 1px solid rgba(232, 228, 222, 0.85); border-radius: var(--radio-card);
  padding: 1.5rem 1.6rem;
  box-shadow: 0 4px 20px rgba(33, 33, 33, 0.05);
  position: relative; overflow: hidden;
}
.saludo::after {
  content: "🍉";
  position: absolute; right: 1.5rem; bottom: -0.8rem;
  font-size: 6.5rem; opacity: 0.10; pointer-events: none;
  transform: rotate(-15deg);
}
.saludo__fecha { color: var(--sandia-verde-oscuro); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; }

/* Métricas en vivo (KPI pills / mini-cards) */
.tarjeta-metrica {
  background: var(--sandia-blanco);
  border: 1px solid var(--sandia-gris-claro);
  border-radius: var(--radio-card);
  padding: 1rem 1.15rem;
  display: flex; align-items: center; gap: 1rem;
  box-shadow: 0 2px 8px rgba(33, 33, 33, 0.04);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  text-decoration: none; color: var(--sandia-tinta);
}
.tarjeta-metrica:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(33, 33, 33, 0.08);
  color: var(--sandia-tinta);
}
.tarjeta-metrica__icono {
  width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; flex: 0 0 auto;
}
.tarjeta-metrica__valor { font-size: 1.35rem; font-weight: 800; line-height: 1.1; font-family: var(--fuente-cuerpo); }
.tarjeta-metrica__label { font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sandia-gris); }

/* Accesos rápidos interactivos */
.boton-accion-rapida {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.6rem 1.1rem; border-radius: 999px;
  background: var(--sandia-blanco); border: 1.5px solid var(--sandia-gris-claro);
  color: var(--sandia-tinta); font-weight: 700; font-size: 0.88rem;
  text-decoration: none; transition: all 0.18s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.boton-accion-rapida:hover {
  background: var(--sandia-crema);
  border-color: var(--sandia-rojo);
  color: var(--sandia-rojo);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(229, 57, 53, 0.15);
}
.boton-accion-rapida i { font-size: 1.05rem; }

/* Buscador de módulos en el inicio */
.buscador-modulos {
  background: var(--sandia-blanco);
  border: 1.5px solid var(--sandia-gris-claro);
  border-radius: 999px;
  padding: 0.55rem 1.15rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.buscador-modulos:focus-within {
  border-color: var(--sandia-rojo);
  box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.15);
}
.buscador-modulos input {
  border: none; outline: none; background: transparent;
  font-size: 0.92rem; font-weight: 600; width: 100%;
}
.buscador-modulos input::placeholder { color: var(--sandia-gris); font-weight: 500; }

/* --- Login ------------------------------------------------------------------ */
body.pagina-login { background: var(--sandia-crema) radial-gradient(circle at 20% 10%, rgba(77, 182, 172, 0.12), transparent 40%), radial-gradient(circle at 80% 90%, rgba(229, 57, 53, 0.10), transparent 40%); }
.tarjeta-login { max-width: 420px; margin: 0 auto; }
.tarjeta-login .card-body { padding: 2rem 1.5rem; }
@media (min-width: 576px) { .tarjeta-login .card-body { padding: 2.5rem 2.25rem; } }

/* --- Utilidades de estado (color + texto, nunca solo color) ---------------- */
.estado { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 700; font-size: 0.8rem; padding: 0.3em 0.65em; border-radius: 999px; }
.estado--ok { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.estado--alerta { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.estado--urgente { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); }
.estado--info { background: var(--bs-info-bg-subtle); color: var(--bs-info-text-emphasis); }
.estado--neutro { background: #EFEBE5; color: #4B5563; }


/* --- Avatares de usuario con gradientes de color (6 paletas rotativas) ----- */
.usuario-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1rem; flex-shrink: 0;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.usuario-avatar--sm { width: 36px; height: 36px; font-size: 0.88rem; }
.usuario-avatar--inactivo { background: #E8E4DE !important; color: #9CA3AF !important; filter: grayscale(1); box-shadow: none !important; }
.usuario-avatar--0 { background: linear-gradient(135deg, #E53935, #FB7185); color: #fff; box-shadow: 0 2px 8px rgba(229,57,53,0.3); }
.usuario-avatar--1 { background: linear-gradient(135deg, #26A69A, #4DB6AC); color: #fff; box-shadow: 0 2px 8px rgba(38,166,154,0.3); }
.usuario-avatar--2 { background: linear-gradient(135deg, #7C3AED, #A78BFA); color: #fff; box-shadow: 0 2px 8px rgba(124,58,237,0.3); }
.usuario-avatar--3 { background: linear-gradient(135deg, #D97706, #FCD34D); color: #92400E; box-shadow: 0 2px 8px rgba(217,119,6,0.3); }
.usuario-avatar--4 { background: linear-gradient(135deg, #0284C7, #38BDF8); color: #fff; box-shadow: 0 2px 8px rgba(2,132,199,0.3); }
.usuario-avatar--5 { background: linear-gradient(135deg, #16A34A, #4ADE80); color: #fff; box-shadow: 0 2px 8px rgba(22,163,74,0.3); }

/* --- Badges de rol con color unico por tipo --------------------------------- */
.rol-badge {
  display: inline-flex; align-items: center;
  font-size: 0.78rem; font-weight: 700;
  padding: 0.28em 0.75em; border-radius: 999px;
  white-space: nowrap; letter-spacing: 0.01em;
}
.rol-badge--admin { background: #FDECEB; color: #C62828; border: 1px solid #F5B4B2; }
.rol-badge--veterinario   { background: #E0F2FE; color: #0369A1; border: 1px solid #BAE6FD; }
.rol-badge--groomer       { background: #E0F2F1; color: #00695C; border: 1px solid #80CBC4; }
.rol-badge--cajero        { background: #FEF3C7; color: #92400E; border: 1px solid #FDE68A; }
.rol-badge--recepcion     { background: #EDE9FE; color: #5B21B6; border: 1px solid #C4B5FD; }
.rol-badge--inventario    { background: #F0FDF4; color: #166534; border: 1px solid #BBF7D0; }
.rol-badge--auxiliar      { background: #FCE7F3; color: #9D174D; border: 1px solid #FBCFE8; }

/* --- Tarjeta de usuario (mobile) ------------------------------------------- */
.usuario-card {
  background: var(--sandia-blanco);
  border: 1.5px solid var(--sandia-gris-claro);
  border-radius: var(--radio-card);
  border-left: 4px solid var(--sandia-rojo);
  padding: 1rem;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.usuario-card:hover {
  box-shadow: 0 6px 20px rgba(229, 57, 53, 0.1);
  transform: translateY(-2px);
}

/* --- Tabla de usuarios (desktop) ------------------------------------------- */
.usuarios-tabla tbody tr.usuario-fila { transition: background 0.15s ease; }
.usuarios-tabla tbody tr.usuario-fila:hover .usuario-avatar { transform: scale(1.1); }
.usuarios-tabla tbody tr.usuario-fila--inactivo { opacity: 0.65; }
.usuarios-tabla tbody tr.usuario-fila--inactivo td:first-child { border-left: 3px solid #9CA3AF; }

.texto-marca { font-family: var(--fuente-marca); }
.fila-lista { background: var(--sandia-blanco); border: 1px solid var(--sandia-gris-claro); border-radius: var(--radio-card); padding: 0.9rem 1rem; }
.acciones-fijas { position: sticky; bottom: calc(var(--alto-barra-inferior) + env(safe-area-inset-bottom)); background: var(--sandia-crema); padding: 0.75rem 0; z-index: 5; }
@media (min-width: 768px) { .acciones-fijas { position: static; padding: 0; } }
.alert { border-radius: var(--bs-border-radius-lg); font-weight: 600; }
.pagina-error { text-align: center; padding: 3rem 1rem; }
.pagina-error__codigo { font-family: var(--fuente-marca); font-size: 5rem; font-weight: 700; color: var(--sandia-rojo); line-height: 1; }

/* --- Fase 2: tutores y mascotas ------------------------------------------- */
.avatar-usuario--grande { width: 64px; height: 64px; font-size: 1.5rem; }
.avatar-mascota {
  border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  border: 2px solid var(--sandia-blanco); box-shadow: 0 0 0 2px var(--sandia-beige);
  background: var(--sandia-crema);
}
.avatar-mascota--vacio { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.avatar-mascota--grande { box-shadow: 0 0 0 3px var(--sandia-rojo); }
.min-w-0 { min-width: 0; }

.lista-datos { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; }
.lista-datos dt { color: var(--sandia-gris); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; padding-top: 0.15rem; }
.lista-datos dd { margin: 0; word-break: break-word; }

.grafica-peso svg { width: 100%; height: auto; display: block; }
.grafica-peso__vacia { text-align: center; color: var(--sandia-gris); padding: 2rem 1rem; }
.grafica-peso__rejilla { stroke: var(--sandia-gris-claro); stroke-width: 1; }
.grafica-peso__eje { fill: var(--sandia-gris); font-size: 12px; font-family: var(--fuente-cuerpo); }
.grafica-peso__linea { fill: none; stroke: var(--sandia-rojo); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.grafica-peso__area { fill: rgba(229, 57, 53, 0.10); }
.grafica-peso__punto { fill: var(--sandia-blanco); stroke: var(--sandia-rojo); stroke-width: 3; }
.grafica-peso__valor { fill: var(--sandia-tinta); font-size: 12px; font-weight: 700; font-family: var(--fuente-cuerpo); }

.linea-tiempo { list-style: none; margin: 0; padding: 0; position: relative; }
.linea-tiempo::before { content: ""; position: absolute; left: 19px; top: 8px; bottom: 8px; width: 2px; background: var(--sandia-gris-claro); }
.linea-tiempo__evento { display: flex; gap: 0.9rem; align-items: flex-start; padding: 0.5rem 0; position: relative; }
.linea-tiempo__icono {
  width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem;
  border: 2px solid var(--sandia-blanco); box-shadow: 0 0 0 1px var(--sandia-gris-claro);
}
.linea-tiempo__contenido { flex: 1 1 auto; min-width: 0; padding-top: 0.45rem; }
.cabecera-mascota .titulo-pagina { overflow-wrap: anywhere; }

/* ==========================================================================
   Rediseño Historias Clínicas (Directorio & Ficha Médica)
   ========================================================================== */

/* Hero Banner Historias */
.hero-historias {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border-radius: 1.25rem;
  color: #ffffff;
  padding: 1.75rem;
  box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.25);
  position: relative;
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.hero-historias::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -10%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(229, 57, 53, 0.25) 0%, transparent 70%);
  pointer-events: none;
}
.hero-historias__kpis {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.hero-historias__kpi {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.85rem;
  padding: 0.6rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.hero-historias__kpi-icono {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}
.hero-historias__kpi-valor {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
}
.hero-historias__kpi-label {
  font-size: 0.72rem;
  color: #94a3b8;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Barra de Filtro y Búsqueda Interactiva */
.caja-busqueda-historias {
  background: #ffffff;
  border-radius: 1.15rem;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}
.filtro-especie-pills {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.filtro-especie-btn {
  border: 1.5px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  border-radius: 9999px;
  padding: 0.35rem 0.9rem;
  font-size: 0.83rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.filtro-especie-btn:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #1e293b;
}
.filtro-especie-btn.activo {
  background: var(--sandia-rojo);
  border-color: var(--sandia-rojo);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(229, 57, 53, 0.3);
}

/* Tarjeta de Paciente Rediseñada v2 */
.tarjeta-paciente-v2 {
  background: #ffffff;
  border-radius: 1.15rem;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.tarjeta-paciente-v2:hover {
  transform: translateY(-4px);
  border-color: #fecdd3;
  box-shadow: 0 12px 28px -4px rgba(225, 29, 72, 0.15);
}
.tarjeta-paciente-v2__header {
  padding: 1.1rem 1.1rem 0.75rem;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  border-bottom: 1px dashed #e2e8f0;
  position: relative;
}
.tarjeta-paciente-v2__header[data-especie="canino"] {
  background: linear-gradient(180deg, #fff7ed 0%, #ffffff 100%);
}
.tarjeta-paciente-v2__header[data-especie="felino"] {
  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
}
.tarjeta-paciente-v2__tutor-box {
  background: #f8fafc;
  border-radius: 0.75rem;
  border: 1px solid #f1f5f9;
  padding: 0.7rem 0.85rem;
  margin: 0.75rem 1.1rem;
}
.tarjeta-paciente-v2__footer {
  margin-top: auto;
  padding: 0.85rem 1.1rem 1.1rem;
  border-top: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

/* Botón de WhatsApp pequeño */
.btn-whatsapp-sm {
  background: #dcfce7;
  color: #15803d !important;
  border: 1px solid #bbf7d0;
  border-radius: 9999px;
  padding: 0.2rem 0.65rem;
  font-size: 0.76rem;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: all 0.15s ease;
}
.btn-whatsapp-sm:hover {
  background: #22c55e;
  color: #ffffff !important;
  border-color: #22c55e;
  box-shadow: 0 3px 10px rgba(34, 197, 94, 0.3);
}

/* Ficha Médica Unificada - Hero & Timeline */
.ficha-hero-card {
  background: linear-gradient(135deg, #ffffff 0%, #fdf6ee 100%);
  border-radius: 1.25rem;
  border: 1.5px solid #f7d6b5;
  box-shadow: 0 6px 24px rgba(33, 33, 33, 0.05);
  overflow: hidden;
}
.ficha-hero-header {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  color: #ffffff;
  padding: 1.5rem;
}
.ficha-acciones-bar {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 1rem 1.25rem;
  background: #ffffff;
  border-top: 1px solid #f1f5f9;
}

/* Timeline SOAP */
.timeline-soap-item {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 1.5rem;
}
.timeline-soap-item::before {
  content: "";
  position: absolute;
  left: 0.6rem;
  top: 1.75rem;
  bottom: -1.5rem;
  width: 2px;
  background: #e2e8f0;
}
.timeline-soap-item:last-child::before {
  display: none;
}
.timeline-soap-badge {
  position: absolute;
  left: 0;
  top: 0.2rem;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--sandia-rojo);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  box-shadow: 0 0 0 4px #ffffff;
}

/* Vitales Strip */
.vitales-strip {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.6rem 0;
}
.vital-pill {
  background: #f1f5f9;
  border-radius: 0.5rem;
  padding: 0.25rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #334155;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.vital-pill i {
  color: var(--sandia-rojo);
}

.soap-seccion {
  border-left: 3px solid #cbd5e1;
  padding-left: 0.75rem;
  margin-bottom: 0.6rem;
}
.soap-seccion--s { border-color: #3b82f6; }
.soap-seccion--o { border-color: #10b981; }
.soap-seccion--a { border-color: #f59e0b; }
.soap-seccion--p { border-color: #ef4444; }

/* ==========================================================================
   AGENDA MÉDICA V2 - TARJETAS Y CRONOGRAMA
   ========================================================================== */
.tarjeta-cita-v2 {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  position: relative;
  overflow: hidden;
}
.tarjeta-cita-v2::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4.5px;
  background: #cbd5e1;
}
.tarjeta-cita-v2[data-estado="programada"]::before { background: #3b82f6; }
.tarjeta-cita-v2[data-estado="confirmada"]::before { background: #06b6d4; }
.tarjeta-cita-v2[data-estado="en_atencion"]::before { background: #e53935; }
.tarjeta-cita-v2[data-estado="cumplida"]::before { background: #10b981; }
.tarjeta-cita-v2[data-estado="cancelada"]::before { background: #94a3b8; }
.tarjeta-cita-v2[data-estado="no_asistio"]::before { background: #f59e0b; }

.tarjeta-cita-v2:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -4px rgba(0,0,0,0.08);
  border-color: #cbd5e1;
}

@keyframes pulsoAtencion {
  0% { box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.4); }
  70% { box-shadow: 0 0 0 6px rgba(229, 57, 53, 0); }
  100% { box-shadow: 0 0 0 0 rgba(229, 57, 53, 0); }
}
.badge-en-atencion {
  background-color: #fee2e2;
  color: #991b1b;
  border: 1px solid #f87171;
  animation: pulsoAtencion 2s infinite;
  font-weight: 800;
}

.kpi-agenda-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 0.9rem;
  padding: 0.75rem 1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}

/* --- Utilidades de Interacción y Tarjetas Sandía --- */
.transition-all {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-shadow:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04) !important;
  border-color: #FCD98B !important;
}
}
.tarjeta-paciente-v2__header[data-especie="felino"] {
  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
}
.tarjeta-paciente-v2__tutor-box {
  background: #f8fafc;
  border-radius: 0.75rem;
  border: 1px solid #f1f5f9;
  padding: 0.7rem 0.85rem;
  margin: 0.75rem 1.1rem;
}
.tarjeta-paciente-v2__footer {
  margin-top: auto;
  padding: 0.85rem 1.1rem 1.1rem;
  border-top: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

/* Botón de WhatsApp pequeño */
.btn-whatsapp-sm {
  background: #dcfce7;
  color: #15803d !important;
  border: 1px solid #bbf7d0;
  border-radius: 9999px;
  padding: 0.2rem 0.65rem;
  font-size: 0.76rem;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: all 0.15s ease;
}
.btn-whatsapp-sm:hover {
  background: #22c55e;
  color: #ffffff !important;
  border-color: #22c55e;
  box-shadow: 0 3px 10px rgba(34, 197, 94, 0.3);
}

/* Ficha Médica Unificada - Hero & Timeline */
.ficha-hero-card {
  background: linear-gradient(135deg, #ffffff 0%, #fdf6ee 100%);
  border-radius: 1.25rem;
  border: 1.5px solid #f7d6b5;
  box-shadow: 0 6px 24px rgba(33, 33, 33, 0.05);
  overflow: hidden;
}
.ficha-hero-header {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  color: #ffffff;
  padding: 1.5rem;
}
.ficha-acciones-bar {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 1rem 1.25rem;
  background: #ffffff;
  border-top: 1px solid #f1f5f9;
}

/* Timeline SOAP */
.timeline-soap-item {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 1.5rem;
}
.timeline-soap-item::before {
  content: "";
  position: absolute;
  left: 0.6rem;
  top: 1.75rem;
  bottom: -1.5rem;
  width: 2px;
  background: #e2e8f0;
}
.timeline-soap-item:last-child::before {
  display: none;
}
.timeline-soap-badge {
  position: absolute;
  left: 0;
  top: 0.2rem;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--sandia-rojo);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  box-shadow: 0 0 0 4px #ffffff;
}

/* Vitales Strip */
.vitales-strip {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.6rem 0;
}
.vital-pill {
  background: #f1f5f9;
  border-radius: 0.5rem;
  padding: 0.25rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #334155;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.vital-pill i {
  color: var(--sandia-rojo);
}

.soap-seccion {
  border-left: 3px solid #cbd5e1;
  padding-left: 0.75rem;
  margin-bottom: 0.6rem;
}
.soap-seccion--s { border-color: #3b82f6; }
.soap-seccion--o { border-color: #10b981; }
.soap-seccion--a { border-color: #f59e0b; }
.soap-seccion--p { border-color: #ef4444; }

/* ==========================================================================
   AGENDA MÉDICA V2 - TARJETAS Y CRONOGRAMA
   ========================================================================== */
.tarjeta-cita-v2 {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  position: relative;
  overflow: hidden;
}
.tarjeta-cita-v2::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4.5px;
  background: #cbd5e1;
}
.tarjeta-cita-v2[data-estado="programada"]::before { background: #3b82f6; }
.tarjeta-cita-v2[data-estado="confirmada"]::before { background: #06b6d4; }
.tarjeta-cita-v2[data-estado="en_atencion"]::before { background: #e53935; }
.tarjeta-cita-v2[data-estado="cumplida"]::before { background: #10b981; }
.tarjeta-cita-v2[data-estado="cancelada"]::before { background: #94a3b8; }
.tarjeta-cita-v2[data-estado="no_asistio"]::before { background: #f59e0b; }

.tarjeta-cita-v2:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -4px rgba(0,0,0,0.08);
  border-color: #cbd5e1;
}

@keyframes pulsoAtencion {
  0% { box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.4); }
  70% { box-shadow: 0 0 0 6px rgba(229, 57, 53, 0); }
  100% { box-shadow: 0 0 0 0 rgba(229, 57, 53, 0); }
}
.badge-en-atencion {
  background-color: #fee2e2;
  color: #991b1b;
  border: 1px solid #f87171;
  animation: pulsoAtencion 2s infinite;
  font-weight: 800;
}

.kpi-agenda-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 0.9rem;
  padding: 0.75rem 1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}

/* --- Utilidades de Interacción y Tarjetas Sandía --- */
.transition-all {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-shadow:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04) !important;
  border-color: #FCD98B !important;
}

.hover-primary:hover {
  color: var(--sandia-rojo) !important;
}

.shadow-xs {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* --- Fondos y Bordes Temáticos Sandía (Detalles Rosados y Crema) --- */
.card-sandia-hero {
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF5F5 40%, #FDF6EE 100%) !important;
  border: 1px solid var(--sandia-rosa-borde) !important;
}

.card-sandia-rosa {
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF8F8 100%) !important;
  border: 1px solid var(--sandia-rosa-borde) !important;
}

.badge-sandia-rosa {
  background-color: var(--sandia-rosa-suave) !important;
  color: #BE123C !important;
  border: 1px solid var(--sandia-rosa-borde) !important;
}

.btn-xs {
  min-height: 28px !important;
  height: 28px !important;
  padding: 0.2rem 0.65rem !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}


/* ==========================================================================
   Config cards (pagina de Configuracion del sistema)
   ========================================================================== */
.config-card {
  background: var(--sandia-blanco);
  border: 1.5px solid var(--sandia-gris-claro);
  border-radius: var(--radio-card);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(33,33,33,0.04), 0 8px 24px rgba(33,33,33,0.04);
  transition: box-shadow 0.2s ease;
}
.config-card:hover {
  box-shadow: 0 4px 20px rgba(33,33,33,0.07), 0 12px 32px rgba(33,33,33,0.05);
}
.config-card__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  border-bottom: 1.5px solid var(--sandia-gris-claro);
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF8F8 100%);
}
.config-card__icono {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.config-card__titulo {
  font-weight: 800; font-size: 1rem; line-height: 1.2;
  color: var(--sandia-tinta);
}
.config-card__subtitulo {
  font-size: 0.76rem; font-weight: 600;
  color: var(--sandia-gris); margin-top: 1px;
}
.config-card__body {
  padding: 1.25rem 1.4rem;
}
.config-campo {
  padding-bottom: 0.1rem;
}
.config-campo + .config-campo {
  padding-top: 0.1rem;
  border-top: 1px dashed var(--sandia-gris-claro);
  margin-top: 0.25rem;
}
.config-campo .form-label {
  color: var(--sandia-tinta);
  font-size: 0.88rem;
}
.config-campo .form-control,
.config-campo .form-select {
  background: var(--sandia-crema);
  border-color: var(--sandia-gris-claro);
  font-size: 0.92rem;
}
.config-campo .form-control:focus,
.config-campo .form-select:focus {
  background: #ffffff;
}
/* Switch dentro de config se ve limpio */
.config-campo .form-switch {
  padding-left: 0;
  display: flex; align-items: center; gap: 0.75rem;
  background: var(--sandia-crema);
  border-radius: var(--bs-border-radius);
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--sandia-gris-claro);
}
.config-campo .form-switch .form-check-input {
  margin: 0; flex-shrink: 0; order: -1;
}
.config-campo .form-switch .form-check-label {
  font-weight: 700; font-size: 0.9rem; cursor: pointer;
}
.config-campo .form-switch .form-text {
  margin-left: auto; font-size: 0.75rem;
}

/* Razas - Catalogo moderno */
.raza-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  border: 1px solid var(--sandia-gris-claro) !important;
}
.raza-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px -4px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(229, 57, 53, 0.3) !important;
}
.raza-avatar {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--sandia-crema);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--sandia-gris-claro);
}
.indicador-dot {
  width: 7px; height: 7px; border-radius: 50%; display: inline-block;
}
.fs-7 { font-size: 0.76rem !important; }

/* Seguridad & Cambiar Contraseña */
.password-toggle-btn {
  background: transparent;
  border-left: none;
  color: var(--sandia-gris);
  cursor: pointer;
  transition: color 0.15s ease;
}
.password-toggle-btn:hover {
  color: var(--sandia-rojo);
}
.seguridad-tip-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.85rem;
  color: var(--sandia-tinta);
  margin-bottom: 0.6rem;
}
.seguridad-tip-item:last-child {
  margin-bottom: 0;
}
.seguridad-tip-icono {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.72rem;
  margin-top: 1px;
}
.requisito-check {
  font-size: 0.8rem;
  transition: color 0.15s ease;
}
.requisito-check.cumplido {
  color: var(--sandia-verde-oscuro) !important;
  font-weight: 700;
}
.requisito-check.cumplido i {
  color: var(--sandia-verde) !important;
}

/* --- Menú lateral moderno (offcanvas) -------------------------------- */
.menu-lateral {
  width: 320px !important;
  max-width: 88vw !important;
  background: #FFFFFF !important;
  border-right: 1.5px solid var(--sandia-gris-claro) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12) !important;
}
.menu-lateral .offcanvas-header {
  padding: 1.1rem 1.3rem;
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF5F5 100%);
  border-bottom: 1.5px solid #FECDD3 !important;
}
.menu-perfil-card {
  background: linear-gradient(135deg, #FFF8F8 0%, #FDF2F2 100%);
  border: 1px solid #FECDD3;
  border-radius: 16px;
  padding: 0.9rem 1rem;
  margin: 0.8rem 0.9rem 0.5rem 0.9rem;
}
.menu-lateral__seccion-titulo {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9CA3AF;
  padding: 0.75rem 1.1rem 0.25rem 1.1rem;
  margin-top: 0.35rem;
}
.menu-lateral__lista {
  list-style: none;
  margin: 0;
  padding: 0.35rem 0.7rem;
}
.menu-lateral__enlace {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  margin: 0.18rem 0;
  border-radius: 12px;
  color: var(--sandia-tinta);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.92rem;
  transition: all 0.18s ease;
  position: relative;
}
.menu-lateral__enlace:hover {
  background: #FDF2F2;
  color: var(--sandia-rojo);
  transform: translateX(3px);
}
.menu-lateral__enlace.active {
  background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%) !important;
  color: #BE123C !important;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(229, 57, 53, 0.15);
}
.menu-lateral__enlace.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15%;
  bottom: 15%;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--sandia-rojo);
}
.menu-lateral__icono {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.05rem;
  transition: transform 0.18s ease;
}
.menu-lateral__enlace:hover .menu-lateral__icono {
  transform: scale(1.1);
}
.menu-lateral__flecha {
  font-size: 0.75rem;
  color: #D1D5DB;
  transition: transform 0.18s ease, color 0.18s ease;
}
.menu-lateral__enlace:hover .menu-lateral__flecha {
  color: var(--sandia-rojo);
  transform: translateX(2px);
}
.menu-lateral__enlace.active .menu-lateral__flecha {
  color: #BE123C;
}

/* Iconos temáticos por módulo */
.menu-lateral__icono--inicio { background: #FEE2E2; color: #DC2626; }
.menu-lateral__icono--historias { background: #E0F2FE; color: #0284C7; }
.menu-lateral__icono--mascotas { background: #FCE7F3; color: #DB2777; }
.menu-lateral__icono--tutores { background: #E0E7FF; color: #4F46E5; }
.menu-lateral__icono--agenda { background: #FEE2E2; color: #DC2626; }
.menu-lateral__icono--spa { background: #E0F2F1; color: #00897B; }
.menu-lateral__icono--pos { background: #FEF3C7; color: #D97706; }
.menu-lateral__icono--caja { background: #DCFCE7; color: #16A34A; }
.menu-lateral__icono--inventario { background: #EDE9FE; color: #7C3AED; }
.menu-lateral__icono--reportes { background: #CCFBF1; color: #0D9488; }
.menu-lateral__icono--gastos { background: #FFEDD5; color: #EA580C; }
.menu-lateral__icono--cuentas_por_pagar { background: #F1F5F9; color: #475569; }
.menu-lateral__icono--proveedores { background: #E0F2FE; color: #0284C7; }
.menu-lateral__icono--usuarios { background: #F3E8FF; color: #9333EA; }
.menu-lateral__icono--configuracion { background: #F4F4F5; color: #52525B; }
.menu-lateral__icono--razas { background: #FFE4E6; color: #E11D48; }
.menu-lateral__icono--mi_cuenta { background: #FEF3C7; color: #B45309; }

/* --- Spa & Grooming: Galería Antes & Después e Historial Visual --- */
.foto-spa-card {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--sandia-gris-claro);
  background: var(--sandia-blanco);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.foto-spa-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.foto-spa-img-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #F8FAFC;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.foto-spa-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
  cursor: pointer;
}
.foto-spa-img-wrapper:hover .foto-spa-img {
  transform: scale(1.04);
}
.foto-spa-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  color: var(--sandia-gris);
  text-align: center;
  background: #FAFAFA;
  width: 100%;
  height: 100%;
}
.foto-badge-antes {
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  color: #92400E;
  font-weight: 800;
  border: 1px solid #FCD34D;
}
.foto-badge-despues {
  background: linear-gradient(135deg, #DCFCE7 0%, #BBF7D0 100%);
  color: #166534;
  font-weight: 800;
  border: 1px solid #86EFAC;
}
.historial-spa-item {
  border: 1px solid var(--sandia-gris-claro);
  border-radius: 14px;
  padding: 0.9rem;
  background: #FFFFFF;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.historial-spa-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  border-color: rgba(229, 57, 53, 0.25);
}
.historial-spa-mini {
  width: 68px;
  height: 68px;
  border-radius: 10px;
  object-fit: cover;
  border: 1.5px solid var(--sandia-gris-claro);
  cursor: pointer;
  transition: transform 0.18s ease;
}
.historial-spa-mini:hover {
  transform: scale(1.06);
}

/* ==========================================================================
   CONSULTA MÉDICA SOAP & EXAMEN POR SISTEMAS
   ========================================================================== */
.soap-section-card {
  border: 1px solid var(--sandia-gris-claro);
  border-radius: 16px;
  overflow: hidden;
  background: #FFFFFF;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
  margin-bottom: 1.5rem;
  transition: box-shadow 0.2s ease;
}
.soap-section-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
}
.soap-section-header {
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--sandia-gris-claro);
}
.soap-badge-s {
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
  color: #1E40AF;
  border: 1px solid #BFDBFE;
}
.soap-badge-o {
  background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
  color: #065F46;
  border: 1px solid #A7F3D0;
}
.soap-badge-a {
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  color: #92400E;
  border: 1px solid #FCD34D;
}
.soap-badge-p {
  background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%);
  color: #991B1B;
  border: 1px solid #FCA5A5;
}

.vital-metric-card {
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  border-radius: 12px;
  padding: 0.85rem;
  transition: all 0.2s ease;
  position: relative;
}
.vital-metric-card:focus-within {
  background: #FFFFFF;
  border-color: var(--sandia-primario);
  box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.15);
}
.vital-metric-label {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
  color: #64748B;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}
.vital-metric-input {
  font-size: 1.15rem;
  font-weight: 700;
  color: #0F172A;
  background: transparent;
  border: none;
  width: 100%;
  padding: 0;
}
.vital-metric-input:focus {
  outline: none;
  box-shadow: none;
}
.vital-metric-unit {
  font-size: 0.8rem;
  font-weight: 600;
  color: #94A3B8;
  position: absolute;
  right: 0.85rem;
  bottom: 0.85rem;
}

/* SISTEMAS DE EVALUACIÓN */
.sistemas-progress-container {
  background: #F1F5F9;
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
  position: relative;
}
.sistemas-progress-bar {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #F59E0B 0%, #10B981 100%);
  transition: width 0.35s ease;
}

.sistema-card-item {
  border: 1.5px solid #E2E8F0;
  border-radius: 14px;
  padding: 0.9rem;
  background: #FFFFFF;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  user-select: none;
}
.sistema-card-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  border-color: #CBD5E1;
}
.sistema-card-item.is-active {
  border-color: var(--sandia-primario) !important;
  box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.2) !important;
  background: #FFFBFB;
}
.sistema-card-item.is-pending {
  border-style: dashed;
  border-color: #CBD5E1;
  background: #FAFAFA;
}
.sistema-card-item.is-pending.shake-error {
  border-color: #EF4444 !important;
  background: #FEF2F2 !important;
  animation: shakeAnimation 0.4s ease-in-out;
}
.sistema-card-item.is-normal {
  border-color: #86EFAC;
  background: #F0FDF4;
}
.sistema-card-item.is-anormal {
  border-color: #FCA5A5;
  background: #FEF2F2;
}

.sistema-icon-box {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.sistema-inspector-panel {
  background: #F8FAFC;
  border: 1.5px solid #CBD5E1;
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.chip-sugerencia {
  font-size: 0.78rem;
  padding: 0.3rem 0.65rem;
  border-radius: 20px;
  background: #E2E8F0;
  color: #334155;
  border: 1px solid #CBD5E1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: all 0.15s ease;
  user-select: none;
}
.chip-sugerencia:hover {
  background: #0284C7;
  color: #FFFFFF;
  border-color: #0284C7;
  transform: translateY(-1px);
}

@keyframes shakeAnimation {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.prescription-paper {
  background: #FFFFFF;
  border: 2px solid #E2E8F0;
  border-radius: 14px;
  padding: 1.25rem;
  background-image: radial-gradient(#E2E8F0 1px, transparent 1px);
  background-size: 20px 20px;
}

/* ==========================================================================
   DESGLOSE EN VIVO / BUSCADOR UNIVERSAL AUTOCOMPLETE
   ========================================================================== */
.desglose-busqueda-flotante {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 1060;
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.14);
  animation: desgloseSlideDown 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes desgloseSlideDown {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.desglose-header {
  padding: 0.65rem 0.95rem;
  background: #F8FAFC;
  border-bottom: 1px solid #E2E8F0;
}

.desglose-list {
  max-height: 380px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.desglose-item {
  transition: background 0.15s ease, transform 0.1s ease;
  cursor: pointer;
}

.desglose-item:hover {
  background: #FFF1F2;
}

.desglose-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #F1F5F9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  border: 1px solid #E2E8F0;
}

.desglose-highlight {
  background: #FEF08A;
  color: #854D0E;
  font-weight: 800;
  padding: 0 2px;
  border-radius: 3px;
}

.desglose-footer {
  padding: 0.5rem 0.95rem;
  background: #F8FAFC;
  border-top: 1px solid #E2E8F0;
}

/* --- Menu Desplegable de Usuario (Barra Superior) -------------------------- */
.btn-perfil-topbar {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.25rem 0.65rem 0.25rem 0.35rem;
  border-radius: 50px;
  background: transparent;
  border: 1px solid transparent;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none !important;
  color: inherit !important;
}
.btn-perfil-topbar:hover,
.btn-perfil-topbar[aria-expanded="true"] {
  background: #FFF1F2;
  border-color: #FECDD3;
}
.btn-perfil-topbar::after {
  display: none !important;
}
.btn-perfil-topbar .perfil-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #E53935 0%, #FB7185 100%);
  color: #ffffff;
  font-weight: 800;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(229, 57, 53, 0.28);
  flex-shrink: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-perfil-topbar:hover .perfil-avatar {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(229, 57, 53, 0.35);
}
.btn-perfil-topbar .perfil-chevron {
  color: #94A3B8;
  font-size: 0.78rem;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
}
.btn-perfil-topbar[aria-expanded="true"] .perfil-chevron {
  transform: rotate(180deg);
  color: #E53935;
}

.dropdown-menu-usuario {
  min-width: 275px;
  padding: 0.6rem;
  border-radius: 18px;
  border: 1px solid #FFE4E6 !important;
  background: #ffffff;
  box-shadow: 0 16px 38px -6px rgba(229, 57, 53, 0.14), 0 8px 18px -4px rgba(0, 0, 0, 0.06) !important;
  margin-top: 10px !important;
  transform-origin: top right;
  animation: dropdownPop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dropdownPop {
  0% {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.dropdown-usuario-header {
  background: linear-gradient(145deg, #FFF5F5 0%, #FEF2F2 100%);
  border: 1px solid #FEE2E2;
  border-radius: 13px;
  padding: 0.85rem;
  margin-bottom: 0.45rem;
}

.dropdown-usuario-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.85rem;
  border-radius: 11px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #334155;
  text-decoration: none;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  transition: all 0.15s ease;
  cursor: pointer;
}
.dropdown-usuario-item:hover {
  background: #F8FAFC;
  color: #0F172A;
  transform: translateX(3px);
}
.dropdown-usuario-item.item-peligro {
  color: #E53935;
}
.dropdown-usuario-item.item-peligro:hover {
  background: #FEF2F2;
  color: #DC2626;
  transform: translateX(3px);
}

.dropdown-item-icono {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.dropdown-item-icono--config {
  background: #F1F5F9;
  color: #475569;
}
.dropdown-usuario-item:hover .dropdown-item-icono--config {
  background: #E2E8F0;
  color: #0F172A;
}
.dropdown-item-icono--logout {
  background: #FEE2E2;
  color: #E53935;
}
.dropdown-usuario-item.item-peligro:hover .dropdown-item-icono--logout {
  background: #FECDD3;
  color: #DC2626;
}

/* --- Pestañas Modernas de Ficha Médica y Vistas Clínicas -------------------- */
.ficha-tabs-header {
  background: #F8FAFC;
  border-bottom: 1.5px solid #E2E8F0;
  padding: 0.65rem 0.85rem;
}

.ficha-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ficha-tab-btn {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #475569 !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  padding: 0.42rem 0.85rem !important;
  border-radius: 50px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  white-space: nowrap !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer;
  text-decoration: none !important;
}

.ficha-tab-btn i {
  font-size: 0.92rem;
  color: #64748B;
  transition: color 0.18s ease;
}

.ficha-tab-btn:hover {
  background: #FFF1F2 !important;
  border-color: #FECDD3 !important;
  color: #E53935 !important;
  transform: translateY(-1px);
}

.ficha-tab-btn:hover i {
  color: #E53935;
}

.ficha-tab-btn.active {
  background: linear-gradient(135deg, #E53935 0%, #E11D48 100%) !important;
  color: #FFFFFF !important;
  border-color: #E53935 !important;
  box-shadow: 0 3px 10px rgba(229, 57, 53, 0.28) !important;
  transform: translateY(-1px);
}

.ficha-tab-btn.active i {
  color: #FFFFFF !important;
}

.ficha-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 0.4rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  background: #E2E8F0;
  color: #475569;
  transition: all 0.18s ease;
  line-height: 1;
}

.ficha-tab-btn:hover .ficha-tab-badge {
  background: #FFE4E6;
  color: #E53935;
}

.ficha-tab-btn.active .ficha-tab-badge {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
}

/* ==========================================================================
   Botones de Acción Clínica Modernos (Ficha Médica)
   ========================================================================== */
.btn-accion-clinica {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.65rem !important;
  padding: 0.45rem 0.75rem !important;
  border-radius: 0.85rem !important;
  font-weight: 700 !important;
  font-size: 0.83rem !important;
  text-decoration: none !important;
  border: 1.5px solid transparent !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  width: 100%;
  text-align: left;
}

.btn-accion-clinica:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.07);
}

.btn-accion-clinica:active {
  transform: translateY(0);
}

.btn-accion-clinica__icono {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.btn-accion-clinica:hover .btn-accion-clinica__icono {
  transform: scale(1.1);
}

.btn-accion-clinica__texto {
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-accion-clinica__flecha {
  margin-left: auto;
  font-size: 0.78rem;
  opacity: 0.4;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.btn-accion-clinica:hover .btn-accion-clinica__flecha {
  transform: translateX(3px);
  opacity: 0.85;
}

/* 1. Primario (Nueva Consulta SOAP) */
.btn-accion-clinica--soap {
  background: linear-gradient(135deg, #f43f5e 0%, #e11d48 50%, #be123c 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(190, 18, 60, 0.4) !important;
  box-shadow: 0 4px 14px -2px rgba(225, 29, 72, 0.35) !important;
  padding: 0.65rem 0.85rem !important;
}
.btn-accion-clinica--soap .btn-accion-clinica__icono {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}
.btn-accion-clinica--soap .btn-accion-clinica__flecha {
  color: #ffffff;
  opacity: 0.7;
}
.btn-accion-clinica--soap:hover {
  box-shadow: 0 8px 20px -2px rgba(225, 29, 72, 0.45) !important;
  color: #ffffff !important;
}

/* 2. Vacuna (Verde Esmeralda) */
.btn-accion-clinica--vacuna {
  background: #f0fdf4 !important;
  border-color: #bbf7d0 !important;
  color: #15803d !important;
}
.btn-accion-clinica--vacuna .btn-accion-clinica__icono {
  background: #dcfce7;
  color: #16a34a;
}
.btn-accion-clinica--vacuna:hover {
  background: #dcfce7 !important;
  border-color: #86efac !important;
  color: #14532d !important;
}

/* 3. Desparasitar (Cian / Turquesa) */
.btn-accion-clinica--desparasitacion {
  background: #ecfeff !important;
  border-color: #a5f3fc !important;
  color: #0e7490 !important;
}
.btn-accion-clinica--desparasitacion .btn-accion-clinica__icono {
  background: #cffafe;
  color: #0891b2;
}
.btn-accion-clinica--desparasitacion:hover {
  background: #cffafe !important;
  border-color: #67e8f9 !important;
  color: #155e75 !important;
}

/* 4. Hospitalizar (Coral / Carmín) */
.btn-accion-clinica--hospital {
  background: #fff1f2 !important;
  border-color: #fecdd3 !important;
  color: #be123c !important;
}
.btn-accion-clinica--hospital .btn-accion-clinica__icono {
  background: #ffe4e6;
  color: #e11d48;
}
.btn-accion-clinica--hospital:hover {
  background: #ffe4e6 !important;
  border-color: #fda4af !important;
  color: #9f1239 !important;
}

/* 5. Cirugía (Slate / Índigo quirúrgico) */
.btn-accion-clinica--cirugia {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}
.btn-accion-clinica--cirugia .btn-accion-clinica__icono {
  background: #e2e8f0;
  color: #1e293b;
}
.btn-accion-clinica--cirugia:hover {
  background: #e2e8f0 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

/* 6. Consentimiento (Violeta / Púrpura médico legal) */
.btn-accion-clinica--consentimiento {
  background: #faf5ff !important;
  border-color: #e9d5ff !important;
  color: #7e22ce !important;
}
.btn-accion-clinica--consentimiento .btn-accion-clinica__icono {
  background: #f3e8ff;
  color: #9333ea;
}
.btn-accion-clinica--consentimiento:hover {
  background: #f3e8ff !important;
  border-color: #d8b4fe !important;
  color: #581c87 !important;
}

/* 7. Certificado de Salud (Ámbar / Oro oficial) */
.btn-accion-clinica--certificado {
  background: #fffbeb !important;
  border-color: #fde68a !important;
  color: #b45309 !important;
}
.btn-accion-clinica--certificado .btn-accion-clinica__icono {
  background: #fef3c7;
  color: #d97706;
}
.btn-accion-clinica--certificado:hover {
  background: #fef3c7 !important;
  border-color: #fcd34d !important;
  color: #92400e !important;
}

/* 8. Ayuda Diagnóstica (Azul Royal) */
.btn-accion-clinica--diagnostica {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #1d4ed8 !important;
}
.btn-accion-clinica--diagnostica .btn-accion-clinica__icono {
  background: #dbeafe;
  color: #2563eb;
}
.btn-accion-clinica--diagnostica:hover,
.btn-accion-clinica--diagnostica.show {
  background: #dbeafe !important;
  border-color: #93c5fd !important;
  color: #1e40af !important;
}

/* ==========================================================================
   Tarjetas de Resumen de Eventos (Perfil Mascota) con Destellos Rosados
   ========================================================================== */
.tarjeta-resumen-evento {
  background: linear-gradient(145deg, #FFFFFF 0%, #FFF8F9 55%, #FFF0F3 100%) !important;
  border: 1.5px solid #FECDD3 !important;
  border-radius: 1.15rem !important;
  padding: 1.1rem 1.15rem !important;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(225, 29, 72, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Efecto Destello / Shimmer Rosado */
.tarjeta-resumen-evento::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -70%;
  width: 60%;
  height: 200%;
  background: linear-gradient(
    90deg, 
    transparent, 
    rgba(255, 255, 255, 0.65), 
    rgba(254, 205, 211, 0.45), 
    transparent
  );
  transform: rotate(25deg);
  transition: all 0.65s ease;
  pointer-events: none;
}

/* Resplandor superior derecho con brillo rosa */
.tarjeta-resumen-evento::after {
  content: '';
  position: absolute;
  top: -20px;
  right: -20px;
  width: 75px;
  height: 75px;
  background: radial-gradient(circle, rgba(244, 63, 94, 0.16) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  transition: all 0.3s ease;
}

.tarjeta-resumen-evento:hover {
  transform: translateY(-3px);
  border-color: #FDA4AF !important;
  box-shadow: 0 10px 24px -4px rgba(225, 29, 72, 0.16), 0 4px 8px rgba(0, 0, 0, 0.03) !important;
}

.tarjeta-resumen-evento:hover::before {
  left: 140%;
}

.tarjeta-resumen-evento:hover::after {
  transform: scale(1.4);
  background: radial-gradient(circle, rgba(244, 63, 94, 0.28) 0%, transparent 70%);
}

.tarjeta-resumen-evento__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.65rem;
}

.tarjeta-resumen-evento__icono-circulo {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  background: #FFF1F2;
  border: 1px solid #FECDD3;
  box-shadow: 0 2px 6px rgba(225, 29, 72, 0.08);
  transition: transform 0.2s ease;
}

.tarjeta-resumen-evento:hover .tarjeta-resumen-evento__icono-circulo {
  transform: scale(1.1) rotate(4deg);
}

.tarjeta-resumen-evento__titulo {
  font-weight: 800;
  font-size: 0.88rem;
  color: #1E293B;
  margin-bottom: 0.25rem;
  line-height: 1.25;
}

.tarjeta-resumen-evento__meta {
  font-size: 0.76rem;
  color: #64748B;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.2rem;
}

.tarjeta-resumen-evento__link {
  margin-top: auto;
  padding-top: 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
.btn-accion-clinica--hospital {
  background: #fff1f2 !important;
  border-color: #fecdd3 !important;
  color: #be123c !important;
}
.btn-accion-clinica--hospital .btn-accion-clinica__icono {
  background: #ffe4e6;
  color: #e11d48;
}
.btn-accion-clinica--hospital:hover {
  background: #ffe4e6 !important;
  border-color: #fda4af !important;
  color: #9f1239 !important;
}

/* 5. Cirugía (Slate / Índigo quirúrgico) */
.btn-accion-clinica--cirugia {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}
.btn-accion-clinica--cirugia .btn-accion-clinica__icono {
  background: #e2e8f0;
  color: #1e293b;
}
.btn-accion-clinica--cirugia:hover {
  background: #e2e8f0 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

/* 6. Consentimiento (Violeta / Púrpura médico legal) */
.btn-accion-clinica--consentimiento {
  background: #faf5ff !important;
  border-color: #e9d5ff !important;
  color: #7e22ce !important;
}
.btn-accion-clinica--consentimiento .btn-accion-clinica__icono {
  background: #f3e8ff;
  color: #9333ea;
}
.btn-accion-clinica--consentimiento:hover {
  background: #f3e8ff !important;
  border-color: #d8b4fe !important;
  color: #581c87 !important;
}

/* 7. Certificado de Salud (Ámbar / Oro oficial) */
.btn-accion-clinica--certificado {
  background: #fffbeb !important;
  border-color: #fde68a !important;
  color: #b45309 !important;
}
.btn-accion-clinica--certificado .btn-accion-clinica__icono {
  background: #fef3c7;
  color: #d97706;
}
.btn-accion-clinica--certificado:hover {
  background: #fef3c7 !important;
  border-color: #fcd34d !important;
  color: #92400e !important;
}

/* 8. Remisión Clínica (Cian / Celeste Clínico) */
.btn-accion-clinica--remision {
  background: #f0f9ff !important;
  border-color: #bae6fd !important;
  color: #0369a1 !important;
}
.btn-accion-clinica--remision .btn-accion-clinica__icono {
  background: #e0f2fe;
  color: #0284c7;
}
.btn-accion-clinica--remision:hover {
  background: #e0f2fe !important;
  border-color: #7dd3fc !important;
  color: #075985 !important;
}

/* 9. Ayuda Diagnóstica (Azul Royal) */
.btn-accion-clinica--diagnostica {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #1d4ed8 !important;
}
.btn-accion-clinica--diagnostica .btn-accion-clinica__icono {
  background: #dbeafe;
  color: #2563eb;
}
.btn-accion-clinica--diagnostica:hover,
.btn-accion-clinica--diagnostica.show {
  background: #dbeafe !important;
  border-color: #93c5fd !important;
  color: #1e40af !important;
}

/* ==========================================================================
   Tarjetas de Resumen de Eventos (Perfil Mascota) con Destellos Rosados
   ========================================================================== */
.tarjeta-resumen-evento {
  background: linear-gradient(145deg, #FFFFFF 0%, #FFF8F9 55%, #FFF0F3 100%) !important;
  border: 1.5px solid #FECDD3 !important;
  border-radius: 1.15rem !important;
  padding: 1.1rem 1.15rem !important;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(225, 29, 72, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Efecto Destello / Shimmer Rosado */
.tarjeta-resumen-evento::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -70%;
  width: 60%;
  height: 200%;
  background: linear-gradient(
    90deg, 
    transparent, 
    rgba(255, 255, 255, 0.65), 
    rgba(254, 205, 211, 0.45), 
    transparent
  );
  transform: rotate(25deg);
  transition: all 0.65s ease;
  pointer-events: none;
}

/* Resplandor superior derecho con brillo rosa */
.tarjeta-resumen-evento::after {
  content: '';
  position: absolute;
  top: -20px;
  right: -20px;
  width: 75px;
  height: 75px;
  background: radial-gradient(circle, rgba(244, 63, 94, 0.16) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  transition: all 0.3s ease;
}

.tarjeta-resumen-evento:hover {
  transform: translateY(-3px);
  border-color: #FDA4AF !important;
  box-shadow: 0 10px 24px -4px rgba(225, 29, 72, 0.16), 0 4px 8px rgba(0, 0, 0, 0.03) !important;
}

.tarjeta-resumen-evento:hover::before {
  left: 140%;
}

.tarjeta-resumen-evento:hover::after {
  transform: scale(1.4);
  background: radial-gradient(circle, rgba(244, 63, 94, 0.28) 0%, transparent 70%);
}

.tarjeta-resumen-evento__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.65rem;
}

.tarjeta-resumen-evento__icono-circulo {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  background: #FFF1F2;
  border: 1px solid #FECDD3;
  box-shadow: 0 2px 6px rgba(225, 29, 72, 0.08);
  transition: transform 0.2s ease;
}

.tarjeta-resumen-evento:hover .tarjeta-resumen-evento__icono-circulo {
  transform: scale(1.1) rotate(4deg);
}

.tarjeta-resumen-evento__titulo {
  font-weight: 800;
  font-size: 0.88rem;
  color: #1E293B;
  margin-bottom: 0.25rem;
  line-height: 1.25;
}

.tarjeta-resumen-evento__meta {
  font-size: 0.76rem;
  color: #64748B;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.2rem;
}

.tarjeta-resumen-evento__link {
  margin-top: auto;
  padding-top: 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: all 0.18s ease;
}

.tarjeta-resumen-evento__link i {
  transition: transform 0.18s ease;
}

.tarjeta-resumen-evento:hover .tarjeta-resumen-evento__link i {
  transform: translateX(3px);
}

/* ==========================================================================
   Banner Hero Perfil Mascota + Tutor (Luminous Sandía & Rose Glow)
   ========================================================================== */
.perfil-mascota-hero {
  background: linear-gradient(145deg, #FFFFFF 0%, #FFF8FA 45%, #FFF0F4 100%) !important;
  border: 1.5px solid #FECDD3 !important;
  border-radius: 1.35rem !important;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(225, 29, 72, 0.07), 0 2px 8px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.3s ease;
}

/* Efecto destello luminoso */
.perfil-mascota-hero::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -30px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(254, 205, 211, 0.45) 0%, rgba(255, 241, 242, 0.2) 50%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.perfil-mascota-hero::after {
  content: '';
  position: absolute;
  bottom: -60px;
  left: 20px;
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(244, 63, 94, 0.08) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}

.perfil-mascota-avatar-wrapper {
  position: relative;
  display: inline-block;
  padding: 4px;
  background: linear-gradient(135deg, #FDA4AF 0%, #E11D48 60%, #BE123C 100%);
  border-radius: 50%;
  box-shadow: 0 10px 25px rgba(225, 29, 72, 0.25), 0 0 0 2px rgba(255, 255, 255, 0.8);
  transition: transform 0.25s ease;
}

.perfil-mascota-avatar-wrapper:hover {
  transform: scale(1.04);
}

.perfil-mascota-avatar-wrapper img, 
.perfil-mascota-avatar-wrapper .avatar-placeholder {
  border: 3px solid #FFFFFF !important;
}

.perfil-mascota-nombre {
  font-family: var(--fuente-marca, 'Fredoka', 'Nunito', sans-serif);
  font-size: 2.2rem;
  font-weight: 800;
  color: #0F172A !important;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.perfil-badge-chip {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  color: #1E293B !important;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 0.35rem 0.8rem;
  border-radius: 50rem;
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  transition: all 0.2s ease;
}

.perfil-badge-chip:hover {
  background: #FFF8F9 !important;
  border-color: #FDA4AF !important;
  transform: translateY(-1px);
  color: #E11D48 !important;
}

.perfil-badge-chip--highlight {
  background: #FFF1F2 !important;
  border-color: #FECDD3 !important;
  color: #BE123C !important;
  font-weight: 700;
}

.perfil-badge-chip--green {
  background: #ECFDF5 !important;
  border-color: #A7F3D0 !important;
  color: #059669 !important;
  font-weight: 700;
}

/* Tarjeta de Tutor Flotante */
.perfil-tutor-card {
  background: #FFFFFF !important;
  border: 1.5px solid #FFE4E6 !important;
  border-radius: 1.15rem;
  padding: 1rem 1.2rem;
  box-shadow: 0 8px 24px rgba(225, 29, 72, 0.06), 0 2px 6px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.perfil-tutor-card:hover {
  border-color: #FDA4AF !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(225, 29, 72, 0.12) !important;
}

.perfil-tutor-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #FFF1F2;
  color: #E11D48;
  font-weight: 800;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #FECDD3;
  flex-shrink: 0;
}

.perfil-tutor-label {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #E11D48;
  margin-bottom: 0.15rem;
  line-height: 1.1;
}

.perfil-tutor-nombre {
  font-weight: 700;
  font-size: 0.95rem;
  color: #0F172A;
  text-decoration: none;
  line-height: 1.2;
  transition: color 0.15s ease;
}

.perfil-tutor-nombre:hover {
  color: #E11D48;
}

/* Botones de Contacto Rápido Compactos */
.btn-contacto-tutor {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  text-decoration: none;
  transition: all 0.18s ease;
  flex-shrink: 0;
}

.btn-contacto-tutor--tel {
  background: #F1F5F9;
  color: #475569;
  border: 1px solid #E2E8F0;
}

.btn-contacto-tutor--tel:hover {
  background: #E2E8F0;
  color: #0F172A;
  transform: scale(1.1);
}

.btn-contacto-tutor--wsp {
  background: #DCFCE7;
  color: #15803D;
  border: 1px solid #BBF7D0;
}

.btn-contacto-tutor--wsp:hover {
  background: #22C55E;
  color: #FFFFFF;
  border-color: #22C55E;
  transform: scale(1.1);
}

/* ==========================================================================
   Tarjetas Laterales Sandía (Ficha Técnica, Control de Peso, Acciones)
   ========================================================================== */
.tarjeta-lateral-sandia {
  background: #FFFFFF !important;
  border: 1.5px solid #FECDD3 !important;
  border-radius: 1.15rem !important;
  box-shadow: 0 4px 16px rgba(225, 29, 72, 0.05), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.22s ease !important;
  overflow: hidden;
}

.tarjeta-lateral-sandia:hover {
  border-color: #FDA4AF !important;
  box-shadow: 0 8px 24px rgba(225, 29, 72, 0.1), 0 2px 6px rgba(0, 0, 0, 0.03) !important;
}

.tarjeta-lateral-sandia__header {
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF9FA 60%, #FFF1F2 100%) !important;
  border-bottom: 1px solid #FFE4E6 !important;
  padding: 0.95rem 1.2rem !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tarjeta-lateral-sandia__titulo {
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #1E293B;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.tarjeta-lateral-sandia__icono-badge {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: #FFF1F2;
  color: #E11D48;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #FECDD3;
}

.ficha-dato-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0;
  border-bottom: 1px dashed #F1F5F9;
  font-size: 0.85rem;
}

.ficha-dato-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ficha-dato-item__label {
  color: #64748B;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.ficha-dato-item__valor {
  color: #0F172A;
  font-weight: 700;
  text-align: right;
}

button.btn-accion-lateral,
a.btn-accion-lateral,
.btn-accion-lateral {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.7rem 1rem !important;
  background: #FFFFFF !important;
  border: 1.5px solid #F1F5F9 !important;
  border-radius: 0.9rem !important;
  color: #1E293B !important;
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

button.btn-accion-lateral:hover,
a.btn-accion-lateral:hover,
.btn-accion-lateral:hover {
  background: #FFF8F9 !important;
  border-color: #FECDD3 !important;
  color: #E11D48 !important;
  transform: translateX(3px);
  box-shadow: 0 4px 14px rgba(225, 29, 72, 0.1) !important;
}

.btn-accion-lateral__icono {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  background: #F8FAFC;
  color: #64748B;
  border: 1px solid #E2E8F0;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

button.btn-accion-lateral:hover .btn-accion-lateral__icono,
a.btn-accion-lateral:hover .btn-accion-lateral__icono,
.btn-accion-lateral:hover .btn-accion-lateral__icono {
  background: #FFF1F2;
  color: #E11D48;
  border-color: #FECDD3;
  transform: scale(1.08);
}

/* ==========================================================================
   AUDITORÍA & SISTEMA RESPONSIVE / PWA 360° (Móvil, Tablet, Desktop, Standalone)
   ========================================================================== */

/* 1. SOPORTE DE SAFE AREAS PARA PWA Y NOTCH / HOME INDICATOR (iOS & Android) */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* Ajuste de barra superior con safe area */
.barra-superior {
  padding-top: max(0.35rem, env(safe-area-inset-top, 0px)) !important;
  padding-left: max(0.75rem, env(safe-area-inset-left, 0px)) !important;
  padding-right: max(0.75rem, env(safe-area-inset-right, 0px)) !important;
}

/* Ajuste de barra inferior PWA con safe area */
.barra-inferior {
  padding-bottom: max(0.4rem, env(safe-area-inset-bottom, 0px)) !important;
  height: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  padding-left: max(0.5rem, env(safe-area-inset-left, 0px)) !important;
  padding-right: max(0.5rem, env(safe-area-inset-right, 0px)) !important;
}

/* Contenido principal con holgura para que la barra inferior nunca tape nada */
body.con-barra-inferior {
  padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
}

.contenido-principal {
  padding-left: max(1rem, env(safe-area-inset-left, 0px)) !important;
  padding-right: max(1rem, env(safe-area-inset-right, 0px)) !important;
}

/* 2. PREVENCIÓN DE AUTO-ZOOM MOLESTO EN IOS (Inputs >= 16px en Móvil) */
@media (max-width: 768px) {
  input.form-control,
  select.form-select,
  textarea.form-control,
  .form-control,
  .form-select,
  .input-group text,
  .input-group input {
    font-size: 16px !important; /* Estándar Apple: previene el zoom automático al hacer tap */
  }
}

/* 3. TAP TARGETS ERGONÓMICOS (Mínimo 44x44px en Dispositivos Táctiles) */
@media (pointer: coarse), (max-width: 768px) {
  .btn-icono-menu,
  .barra-inferior__item,
  .btn-contacto-tutor,
  .btn-perfil-topbar,
  .dropdown-usuario-item,
  .menu-lateral__enlace,
  .pagination .page-link {
    min-height: 44px !important;
    min-width: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .btn-sm, a.btn-sm, button.btn-sm {
    min-height: 38px !important;
    padding-left: 0.9rem !important;
    padding-right: 0.9rem !important;
  }
}

/* 4. PESTAÑAS Y TABS CLÍNICAS CON SCROLL HORIZONTAL FLUIDO */
.nav-tabs,
.nav-pills,
.pestañas-clinicas,
.tabs-scroll-mobile {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important;
  padding-bottom: 4px !important;
}

.nav-tabs::-webkit-scrollbar,
.nav-pills::-webkit-scrollbar,
.pestañas-clinicas::-webkit-scrollbar,
.tabs-scroll-mobile::-webkit-scrollbar {
  display: none !important; /* Chrome / Safari */
}

.nav-tabs .nav-link,
.nav-pills .nav-link {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* 5. MODALES RESPONSIVOS (Bottom Sheet en Móvil / Full Screen Amigable) */
@media (max-width: 576px) {
  .modal.fade .modal-dialog {
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    min-height: 100% !important;
    display: flex !important;
    align-items: flex-end !important;
  }

  .modal-dialog-centered {
    min-height: 100% !important;
    margin: 0 !important;
  }

  .modal-content {
    border-radius: 1.5rem 1.5rem 0 0 !important;
    border-bottom: none !important;
    max-height: 90vh !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.25) !important;
  }

  .modal-header {
    border-radius: 1.5rem 1.5rem 0 0 !important;
    padding: 1.1rem 1.25rem !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1055 !important;
  }

  .modal-body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 1.25rem !important;
  }

  .modal-footer {
    position: sticky !important;
    bottom: 0 !important;
    background: #FFFFFF !important;
    z-index: 1055 !important;
    padding: 0.85rem 1.25rem !important;
    padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px)) !important;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05) !important;
  }
}

/* 6. TABLAS CLÍNICAS Y DE REGISTRO RESPONSIVAS */
.table-responsive {
  border-radius: 0.85rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #CBD5E1 #F1F5F9;
}

.table-responsive::-webkit-scrollbar {
  height: 6px;
}
.table-responsive::-webkit-scrollbar-track {
  background: #F1F5F9;
  border-radius: 10px;
}
.table-responsive::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 10px;
}
.table-responsive::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

/* 7. PREVENCIÓN DE DESBORDES HORIZONTALES */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Utilidad para elementos que requieren ajuste en pantallas diminutas (<380px) */
@media (max-width: 380px) {
  .perfil-mascota-nombre {
    font-size: 1.75rem !important;
  }
  .perfil-badge-chip {
    font-size: 0.75rem !important;
    padding: 0.25rem 0.6rem !important;
  }
}