/**
 * Ideva Dental — sidebar dashboard (Bootstrap 5 palette + layout propio)
 * Roboto + variables de marca; convive con AdminLTE vía márgenes en main-header/content/footer.
 */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");

:root {
  --sidebar-accent: #00a99d;
  --sidebar-text: rgb(73, 82, 107);
  --sidebar-logo-text: #212529;
  --sidebar-section: #adb5bd;
  --sidebar-page-bg: #f4f6f9;
  --sidebar-subline: rgba(0, 169, 157, 0.22);
  --sidebar-width: 256px;
  --sidebar-rail: 68px;
  --sidebar-transition: 0.25s ease;
  /* Altura de la barra superior; el bloque de marca del sidebar la iguala. */
  --sidebar-topbar-h: 4rem;
  --sidebar-accent-hover: #008f85;
}

body.ideva-dashboard {
  font-family: "Roboto", system-ui, sans-serif;
  background-color: var(--sidebar-page-bg);
}

/* ——— Sidebar shell ——— */
#ideva-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1037;
  width: var(--sidebar-width);
  height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "Roboto", system-ui, sans-serif;
  font-weight: 400;
  /* Degradado vertical de marca + sombra hacia la derecha (mismo diseño que
     AppSidebar.vue del piloto Inertia). */
  background: linear-gradient(
    180deg,
    rgba(0, 169, 157, 0.15) 0%,
    rgba(0, 169, 157, 0.05) 45%,
    #fbfbfb 100%
  );
  border-right: 0;
  box-shadow: 4px 0 12px -2px rgba(0, 0, 0, 0.1);
  transition: width var(--sidebar-transition);
  overflow: hidden;
  min-width: 0;
}

#ideva-sidebar .sidebar-nav-link,
#ideva-sidebar .sidebar-nav-toggle {
  font-weight: 400;
}

body.sidebar-collapsed #ideva-sidebar {
  width: var(--sidebar-rail);
}

@media (max-width: 991.98px) {
  #ideva-sidebar {
    width: var(--sidebar-width) !important;
    transform: translateX(-100%);
    transition: transform var(--sidebar-transition), width var(--sidebar-transition);
  }

  #ideva-sidebar.show {
    transform: translateX(0);
  }

  body.sidebar-collapsed:not(.ideva-ignore-mobile) #ideva-sidebar {
    width: var(--sidebar-width) !important;
  }
}

/* ——— Marca (logo centrado) ——— */
.sidebar-brand {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
}

.sidebar-brand-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  padding: 0;
  text-decoration: none;
  color: var(--sidebar-logo-text);
}

body.ideva-dashboard #ideva-sidebar .sidebar-brand-link {
  /* h-28 del piloto (AppSidebar.vue): calc(var(--spacing) * 28) con
     --spacing: 0.25rem (default de Tailwind v4, sin override acá) = 7rem.
     Va en el LINK interno, no en `.sidebar-brand` (que ya tiene su propio
     padding de 0.75rem, igual que el p-3 del SidebarHeader del piloto):
     si el alto fijo va en el contenedor con padding, el padding queda
     "adentro" del alto en vez de sumarse encima, y el bloque queda más
     bajo que en el dashboard. */
  height: 7rem;
}

.sidebar-brand-link:hover {
  opacity: 0.9;
}

.sidebar-brand-logo {
  /* 2.5rem = h-10 del piloto (AppSidebar.vue). */
  height: 2.5rem;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* En modo rail el wordmark no entra: se cambia por el isotipo. */
.sidebar-brand-isotipo {
  display: none;
  height: 1.75rem;
  width: auto;
  object-fit: contain;
}

body.sidebar-collapsed #ideva-sidebar .sidebar-brand-logo {
  display: none;
}

body.sidebar-collapsed #ideva-sidebar .sidebar-brand-isotipo {
  display: block;
}

@media (max-width: 991.98px) {
  /* El drawer móvil siempre va a ancho completo (ver #ideva-sidebar arriba):
     ahí el wordmark sí entra aunque el body quede `sidebar-collapsed`. */
  body.sidebar-collapsed #ideva-sidebar .sidebar-brand-logo {
    display: block;
  }

  body.sidebar-collapsed #ideva-sidebar .sidebar-brand-isotipo {
    display: none;
  }
}

/*
 * El bloque de usuario que vivía acá se movió al chip del navbar
 * (layouts/navigation.blade.php + .ideva-navbar-user* más abajo), igual que en
 * el piloto Inertia: el sidebar queda sólo con logo + navegación.
 */

/* ——— Navegación ——— */
.sidebar-nav {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 0.75rem 1rem;
  min-height: 0;
}

/* Scrollbar fina en color de marca (equivalente de la utilidad
   `.sidebar-scrollbar` que inertia.css define para el piloto; acá va en CSS
   plano porque este archivo NO pasa por Vite). */
.sidebar-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 169, 157, 0.4) transparent;
}

.sidebar-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.sidebar-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(0, 169, 157, 0.4);
  border-radius: 999px;
}

.sidebar-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: var(--sidebar-accent);
}

.sidebar-nav-group {
  min-width: 0;
}

.sidebar-section-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(73, 82, 107, 0.55);
  /* mb-1 px-2 del piloto. */
  padding: 0 0.5rem 0.25rem;
}

body.sidebar-collapsed #ideva-sidebar .sidebar-section-label {
  display: none;
}

.sidebar-nav-link,
.sidebar-nav-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  /* Medidas tomadas del piloto (AppSidebar.vue): gap-3 / px-3 py-2.5 /
     gap-1.5 entre ítems / rounded-xl / text-[0.925rem]. */
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  margin-bottom: 0.375rem;
  border: none;
  background: transparent;
  border-radius: 0.75rem;
  color: var(--sidebar-text) !important;
  text-decoration: none;
  font-size: 0.925rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.sidebar-nav-link i:first-child,
.sidebar-nav-toggle i:first-child {
  flex-shrink: 0;
  width: 1.25rem;
  text-align: center;
  font-size: 0.95rem;
}

#ideva-sidebar .nav-icon {
  width: 1.25rem;
  text-align: center;
  line-height: 1;
}

.sidebar-nav-link:not(.active):hover,
.sidebar-nav-toggle:not(.active):hover {
  background: rgba(255, 255, 255, 0.7) !important;
  color: var(--sidebar-logo-text) !important;
}

/* Ítem activo: píldora sólida en color de marca */
.sidebar-nav-link.active,
.sidebar-nav-toggle.active {
  background: var(--sidebar-accent) !important;
  color: #fff !important;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.sidebar-nav-link.active:hover,
.sidebar-nav-toggle.active:hover {
  background: var(--sidebar-accent-hover) !important;
}

.sidebar-nav-link.active i,
.sidebar-nav-toggle.active i {
  color: #fff !important;
}

.sidebar-toggle-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-chevron {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.72rem;
  color: #868e96;
  transition: transform var(--sidebar-transition), color 0.15s ease;
}

.sidebar-nav-toggle[aria-expanded="true"] .sidebar-chevron {
  transform: rotate(180deg);
  color: var(--sidebar-accent);
}

.sidebar-nav-toggle.active[aria-expanded="true"] .sidebar-chevron {
  color: #fff;
}

body.sidebar-collapsed #ideva-sidebar .sidebar-toggle-label,
body.sidebar-collapsed #ideva-sidebar .sidebar-chevron {
  display: none !important;
}

body.sidebar-collapsed #ideva-sidebar .sidebar-nav-link,
body.sidebar-collapsed #ideva-sidebar .sidebar-nav-toggle {
  justify-content: center;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

body.sidebar-collapsed #ideva-sidebar .sidebar-nav-link i,
body.sidebar-collapsed #ideva-sidebar .sidebar-nav-toggle i:first-child {
  margin: 0 !important;
}

/* Acordeón: en modo rail los collapse cerrados no ocupan */
body.sidebar-collapsed #ideva-sidebar .sidebar-submenu.ideva-collapse:not(.show) {
  display: none !important;
}

.sidebar-submenu {
  padding: 0.1rem 0 0.25rem 0.75rem;
  margin: 0 0.75rem 0.35rem;
  border-left: 1px solid var(--sidebar-subline);
}

/* Acordeón propio (no usa el JS de Bootstrap): la clase se llama
   "ideva-collapse" y no "collapse" a propósito — Tailwind v4 genera su
   propia utilidad ".collapse{visibility:collapse}" (para filas de tabla) a
   partir de cualquier literal "collapse" que encuentre al escanear los
   .blade.php, y esa utilidad terminaba ganándole a esta regla porque ninguna
   de las dos pisa la propiedad de la otra (display vs. visibility): el panel
   quedaba con display:block pero visibility:collapse, o sea invisible. */
#ideva-sidebar .ideva-collapse:not(.show) {
  display: none;
}

#ideva-sidebar .ideva-collapse.show {
  display: block;
}

.sidebar-submenu .sidebar-nav-link {
  font-size: 0.8125rem;
  padding: 0.4rem 0.6rem;
  margin-bottom: 0.2rem;
  border-radius: 0.5rem;
  gap: 0.6rem;
}

/* Hijo activo: fondo tenue + texto de marca (no la píldora sólida del padre) */
.sidebar-submenu .sidebar-nav-link.active {
  background: rgba(0, 169, 157, 0.15) !important;
  color: var(--sidebar-accent) !important;
  box-shadow: none;
}

.sidebar-submenu .sidebar-nav-link.active:hover {
  background: rgba(0, 169, 157, 0.22) !important;
}

.sidebar-submenu .sidebar-nav-link.active i {
  color: var(--sidebar-accent) !important;
}

/* ——— Layout principal (convive con AdminLTE) ——— */
body.ideva-dashboard .main-header,
body.ideva-dashboard .content-wrapper,
body.ideva-dashboard .main-footer {
  margin-left: var(--sidebar-width) !important;
  transition: margin-left var(--sidebar-transition);
}

@media (min-width: 992px) {
  body.ideva-dashboard.sidebar-collapsed .main-header,
  body.ideva-dashboard.sidebar-collapsed .content-wrapper,
  body.ideva-dashboard.sidebar-collapsed .main-footer {
    margin-left: var(--sidebar-rail) !important;
  }
}

@media (max-width: 991.98px) {
  body.ideva-dashboard .main-header,
  body.ideva-dashboard .content-wrapper,
  body.ideva-dashboard .main-footer {
    margin-left: 0 !important;
  }
}

/* ——— Footer ——— */
body.ideva-dashboard .main-footer.ideva-main-footer {
  background: #f8f9fa;
  border-top: 1px solid rgba(0, 169, 157, 0.2);
  color: var(--sidebar-text);
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 0.8125rem;
  line-height: 1.45;
  padding: 0.65rem 1rem;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04);
}

body.ideva-dashboard .ideva-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  max-width: 100%;
}

body.ideva-dashboard .ideva-footer-copy {
  flex: 1 1 auto;
  min-width: 0;
}

body.ideva-dashboard .ideva-footer-year {
  color: #6c757d;
  margin-right: 0.25rem;
}

body.ideva-dashboard .ideva-footer-link {
  color: var(--sidebar-accent);
  font-weight: 600;
  text-decoration: none;
  margin-right: 0.25rem;
}

body.ideva-dashboard .ideva-footer-link:hover {
  color: #008f85;
  text-decoration: underline;
}

body.ideva-dashboard .ideva-footer-dot {
  color: #adb5bd;
  margin: 0 0.35rem;
}

body.ideva-dashboard .ideva-footer-rights {
  color: #868e96;
  font-weight: 400;
}

body.ideva-dashboard .ideva-footer-meta {
  flex: 0 0 auto;
}

body.ideva-dashboard .ideva-footer-version {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #6c757d;
  padding: 0.2rem 0.55rem;
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 0.25rem;
}

@media (max-width: 575.98px) {
  body.ideva-dashboard .main-footer.ideva-main-footer {
    padding: 0.55rem 0.75rem;
    font-size: 0.75rem;
  }

  body.ideva-dashboard .ideva-footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  body.ideva-dashboard .ideva-footer-meta {
    width: 100%;
  }
}

/*
 * layout-footer-fixed: AdminLTE usa calc(3.5rem + 1px) de margin en .content-wrapper para el scroll.
 * El pie IDE (.ideva-main-footer) en una línea es más bajo que esa “ranura”; si la barra sticky usa 3.5rem
 * como bottom, queda un hueco visual entre botones y footer. La sticky se alinea a la altura real del pie.
 */
body.layout-footer-fixed.ideva-dashboard {
  /* Igual que AdminLTE: espacio al final del documento para no tapar el último bloque */
  --ideva-layout-footer-slot: calc(3.5rem + 1px);
  /*
   * Distancia desde el borde inferior del viewport hasta la barra sticky (pie IDE ~2.5–2.7rem una línea).
   * Debe ser ≥ altura real del footer fijo para no solaparse.
   */
  --ideva-anam-sticky-above-footer: calc(2.65rem + 0.12rem);
}

body.layout-footer-fixed.ideva-dashboard .wrapper > .content-wrapper {
  margin-bottom: var(--ideva-layout-footer-slot) !important;
}

body.layout-footer-fixed.ideva-dashboard
  .content-wrapper
  .ideva-anam-footer-bar {
  bottom: var(--ideva-anam-sticky-above-footer);
}

@media (max-width: 575.98px) {
  body.layout-footer-fixed.ideva-dashboard {
    /* Pie en columna (copyright + versión): más alto */
    --ideva-anam-sticky-above-footer: calc(3.9rem + 0.2rem);
  }
}

/* ——— Barra superior (mismo diseño que AppTopbar.vue) ——— */
/* El alto real del bloque del logo (padding de `.sidebar-brand` + los 7rem
   de `.sidebar-brand-link` de arriba = 8.5rem) NO se ata a
   --sidebar-topbar-h (4rem): en el dashboard el bloque del logo es más
   alto que el navbar a propósito, no están alineados. */

body.ideva-dashboard .main-header.navbar {
  position: sticky;
  top: 0;
  z-index: 1032;
  height: var(--sidebar-topbar-h);
  min-height: var(--sidebar-topbar-h);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1rem;
  background: #fff;
  border: 0 !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

@media (min-width: 768px) {
  body.ideva-dashboard .main-header.navbar {
    padding: 0 1.5rem;
  }
}

/* Buscador global: centrado y con tope de ancho, como en el piloto */
body.ideva-dashboard .main-header .ideva-navbar-search {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  min-width: 0;
}

body.ideva-dashboard .main-header .ideva-navbar-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Campana (decorativa: no hay endpoint de notificaciones todavía) */
body.ideva-dashboard .main-header .ideva-navbar-icon-btn {
  position: relative;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #6c757d;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

body.ideva-dashboard .main-header .ideva-navbar-icon-btn:hover,
body.ideva-dashboard .main-header .ideva-navbar-icon-btn:focus {
  background-color: rgba(0, 0, 0, 0.05);
  color: var(--sidebar-logo-text);
  outline: none;
}

body.ideva-dashboard .main-header .ideva-navbar-badge {
  position: absolute;
  top: -0.1rem;
  right: -0.1rem;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.2rem;
  border-radius: 999px;
  /* Rojo semántico de error (#dc3545 en Bootstrap/Blade), no el accent */
  background: #dc3545;
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1rem;
  text-align: center;
}

/* ——— Navbar: menú de usuario (avatar, nombre, rol, desplegable) ——— */
body.ideva-dashboard .main-header .ideva-navbar-user-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  padding: 0.25rem 0.4rem;
  max-width: 17rem;
  color: var(--sidebar-text) !important;
  text-decoration: none;
}

body.ideva-dashboard .main-header .ideva-navbar-user-toggle:hover,
body.ideva-dashboard .main-header .ideva-navbar-user-toggle:focus {
  color: var(--sidebar-logo-text) !important;
  background-color: rgba(0, 0, 0, 0.04);
  outline: none;
}

body.ideva-dashboard .main-header .ideva-navbar-user-toggle.dropdown-toggle::after {
  display: none;
}

body.ideva-dashboard .ideva-navbar-user-meta {
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  text-align: left;
  line-height: 1.15;
}

/* Iniciales del usuario, igual que el piloto Inertia (AppTopbar.vue): no hay
   foto de perfil real, siempre se muestra este avatar. */
body.ideva-dashboard .ideva-user-avatar {
  display: inline-flex;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--sidebar-accent);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-family: "Roboto", system-ui, sans-serif;
}

body.ideva-dashboard .ideva-navbar-user-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #343a40;
  line-height: 1.2;
  max-width: 11rem;
}

body.ideva-dashboard .ideva-navbar-user-role {
  font-size: 0.6875rem;
  font-weight: 400;
  color: #6c757d;
  line-height: 1.2;
  max-width: 11rem;
}

body.ideva-dashboard .ideva-navbar-user-chevron {
  font-size: 0.65rem;
  color: #adb5bd;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

body.ideva-dashboard .ideva-navbar-user.show .ideva-navbar-user-chevron {
  transform: rotate(-180deg);
}

body.ideva-dashboard .ideva-navbar-user-dropdown {
  min-width: 12rem;
  padding: 0.35rem 0;
  margin-top: 0.2rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0.35rem;
  font-family: "Roboto", system-ui, sans-serif;
}

body.ideva-dashboard .ideva-navbar-user-dropdown-header {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--sidebar-logo-text);
}

body.ideva-dashboard .ideva-navbar-user-item {
  font-size: 0.8125rem;
  padding: 0.45rem 1rem;
  color: var(--sidebar-text);
  display: flex;
  align-items: center;
  width: 100%;
}

body.ideva-dashboard .ideva-navbar-user-item:hover,
body.ideva-dashboard .ideva-navbar-user-item:focus {
  background-color: rgba(0, 169, 157, 0.08);
  color: var(--sidebar-logo-text);
}

/* Íconos planos (heredan el color del texto), igual que los lucide del
   piloto Inertia: no llevan tinte de acento. */
body.ideva-dashboard .ideva-navbar-user-item i {
  color: inherit;
  font-size: 1rem;
  flex-shrink: 0;
}

body.ideva-dashboard .ideva-navbar-user-logout:hover,
body.ideva-dashboard .ideva-navbar-user-logout:focus {
  background-color: rgba(220, 53, 69, 0.08) !important;
  color: #c82333 !important;
}

body.ideva-dashboard .ideva-navbar-user-logout:hover i,
body.ideva-dashboard .ideva-navbar-user-logout:focus i {
  color: #c82333 !important;
}

/* ——— Backdrop móvil ——— */
#sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1036;
  background: rgba(33, 37, 41, 0.45);
  opacity: 0;
  transition: opacity var(--sidebar-transition);
}

#sidebar-backdrop.show {
  display: block;
  opacity: 1;
}

@media (min-width: 992px) {
  #sidebar-backdrop {
    display: none !important;
  }
}

/*
 * ——— Botón circular de colapsar (isotipo) ———
 * Sigue siendo un <input type="checkbox"> (lo escucha public/js/ideva-sidebar.js
 * por su id); acá sólo cambia el aspecto: el círculo con el isotipo lo dibuja
 * .ideva-sidebar-toggle-visual.
 */
.ideva-sidebar-one-toggle {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
  position: relative;
  margin: 0;
}

/* Ocultamos el checkbox nativo */
.ideva-sidebar-toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}

.ideva-sidebar-toggle-visual {
  box-sizing: border-box;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  background: transparent url("../img/logos/isotipo-color.png") center / 1.25rem auto no-repeat;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.ideva-sidebar-one-toggle:hover .ideva-sidebar-toggle-visual {
  background-color: rgba(0, 169, 157, 0.1);
}

.ideva-sidebar-toggle-input:focus-visible + .ideva-sidebar-toggle-visual {
  outline: 2px solid var(--sidebar-accent);
  outline-offset: 2px;
}

/* ——— Buscador global del navbar (public/js/ideva-global-search.js) ——— */
.ideva-search {
  position: relative;
  width: 100%;
  max-width: 28rem;
  min-width: 0;
  font-family: "Roboto", system-ui, sans-serif;
}

.ideva-search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.875rem;
  color: #868e96;
  pointer-events: none;
}

.ideva-search-input {
  width: 100%;
  height: 2.25rem;
  padding: 0 4.5rem 0 2.25rem;
  border: 1px solid #e4e7ea;
  border-radius: 0.5rem;
  background: #fff;
  color: var(--sidebar-logo-text);
  font-size: 0.875rem;
  line-height: 1.2;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ideva-search-input::placeholder {
  color: #adb5bd;
}

.ideva-search-input:focus {
  border-color: var(--sidebar-accent);
  box-shadow: 0 0 0 0.2rem rgba(0, 169, 157, 0.2);
}

.ideva-search-kbd {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.1rem 0.35rem;
  border: 1px solid #e4e7ea;
  border-radius: 0.25rem;
  background: #f1f3f5;
  color: #868e96;
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.2;
  pointer-events: none;
}

.ideva-search-results {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 20;
  margin-top: 0.5rem;
  max-height: 70vh;
  overflow-y: auto;
  padding: 0.25rem;
  background: #fff;
  border: 1px solid #e4e7ea;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.ideva-search-msg {
  padding: 1rem 0.75rem;
  text-align: center;
  font-size: 0.75rem;
  color: #6c757d;
}

.ideva-search-msg--inline {
  padding: 0.5rem 0.75rem;
  text-align: left;
}

.ideva-search-spin {
  display: inline-block;
  animation: ideva-search-spin 1s linear infinite;
}

@keyframes ideva-search-spin {
  to {
    transform: rotate(360deg);
  }
}

.ideva-search-group + .ideva-search-group {
  margin-top: 0.35rem;
}

.ideva-search-group-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem 0.2rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #868e96;
}

.ideva-search-group-more {
  flex-shrink: 0;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.ideva-search-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  border-radius: 0.35rem;
  color: var(--sidebar-text);
  text-decoration: none !important;
}

.ideva-search-item.is-active,
.ideva-search-item:hover {
  background: rgba(0, 169, 157, 0.1);
  color: var(--sidebar-logo-text);
}

.ideva-search-item > i {
  flex-shrink: 0;
  width: 1rem;
  margin-top: 0.15rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--sidebar-accent);
}

.ideva-search-item-body {
  min-width: 0;
  flex: 1 1 auto;
}

.ideva-search-item-title {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ideva-search-item-subtitle {
  display: block;
  font-size: 0.75rem;
  color: #868e96;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 575.98px) {
  .ideva-search-kbd {
    display: none;
  }

  .ideva-search-input {
    padding-right: 0.75rem;
  }
}

/* ——— Botón flotante de WhatsApp (layouts/whatsapp.blade.php) ——— */
.ideva-whatsapp-fab {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  /* Por debajo del drawer móvil del sidebar (1037) y su backdrop (1036) */
  z-index: 1030;
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #25d366;
  color: #fff !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ideva-whatsapp-fab:hover,
.ideva-whatsapp-fab:focus {
  color: #fff !important;
  text-decoration: none;
  transform: scale(1.05);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.18), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.ideva-whatsapp-fab svg {
  width: 1.75rem;
  height: 1.75rem;
}

/* ——— Tablas: mismo cuerpo de texto que el menú lateral (0.8125rem) ——— */
body.ideva-dashboard .content-wrapper .table {
  font-size: 0.8125rem;
  font-family: "Roboto", system-ui, sans-serif;
}

body.ideva-dashboard .content-wrapper .table thead th,
body.ideva-dashboard .content-wrapper .table tbody td {
  font-size: 0.8125rem;
  line-height: 1.35;
}

body.ideva-dashboard .content-wrapper .table .btn,
body.ideva-dashboard .content-wrapper .table .btn-sm {
  font-size: 0.8125rem;
}

body.ideva-dashboard .content-wrapper .table .form-control {
  font-size: 0.8125rem;
}

/* Vacío “sin productos” bajo la grilla de líneas (factura, presupuesto, cotización, notas) */
body.ideva-dashboard .content-wrapper #app .ideva-lines-table-empty,
body.ideva-dashboard .content-wrapper .ideva-lines-table-empty {
  font-size: 0.8125rem !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
  color: #6c757d !important;
}

/* ——— Listados: buscar / mostrar misma escala (#app sube especificidad vs AdminLTE) ——— */
body.ideva-dashboard #app .ideva-datatable-toolbar .form-control,
body.ideva-dashboard #app .ideva-datatable-toolbar select.custom-select,
body.ideva-dashboard #app .ideva-datatable-toolbar select.form-control,
body.ideva-dashboard .content-wrapper .ideva-datatable-toolbar .form-control,
body.ideva-dashboard .content-wrapper .ideva-datatable-toolbar select.custom-select,
body.ideva-dashboard .content-wrapper .ideva-datatable-toolbar select.form-control {
  font-size: 0.75rem !important;
  padding: 0.15rem 0.38rem !important;
  line-height: 1.2 !important;
  height: calc(1.32rem + 2px) !important;
  min-height: calc(1.32rem + 2px) !important;
  box-sizing: border-box !important;
}

/* Solo el input de texto: altura máxima fija (los <select> no llevan max-height) */
body.ideva-dashboard #app .ideva-datatable-toolbar input.ideva-datatable-search,
body.ideva-dashboard .content-wrapper .ideva-datatable-toolbar input.ideva-datatable-search {
  max-height: calc(1.32rem + 2px) !important;
  width: 100% !important;
  max-width: 12rem !important;
  flex: 0 1 auto;
}

body.ideva-dashboard .content-wrapper .ideva-datatable-toolbar select {
  width: 4.5rem !important;
  max-width: 4.5rem;
}

body.ideva-dashboard .content-wrapper .ideva-datatable-toolbar label {
  font-size: 0.75rem;
  font-weight: 400;
  margin-bottom: 0;
  vertical-align: middle;
}

body.ideva-dashboard .content-wrapper .ideva-datatable-empty,
body.ideva-dashboard .content-wrapper .ideva-datatable-summary {
  font-size: 0.75rem;
  line-height: 1.35;
}

body.ideva-dashboard .content-wrapper .ideva-datatable-empty {
  margin: 0.5rem 0 0.25rem;
}

body.ideva-dashboard .content-wrapper .ideva-datatable-pager .border {
  font-size: 0.75rem;
  padding: 0.22rem 0.55rem !important;
  line-height: 1.3;
}

/* ——— Formulario proveedor (Vue crear/editar): labels y mensajes al tono de form-control-sm ——— */
body.ideva-dashboard .content-wrapper .ideva-provider-form label:not(.form-label) {
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
}

body.ideva-dashboard .content-wrapper .ideva-provider-form .invalid-feedback,
body.ideva-dashboard .content-wrapper .ideva-provider-form .invalid-feedback p {
  font-size: 0.8125rem;
}

body.ideva-dashboard .content-wrapper .ideva-provider-form small.text-danger {
  font-size: 0.8125rem;
}

/* ——— Formularios: inputs/select nativos compactos en todo el contenido ——— */
body.ideva-dashboard .content-wrapper input.form-control:not(.form-control-lg):not([type="file"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.ideva-dashboard .content-wrapper select.form-control:not(.form-control-lg) {
  font-size: 0.875rem !important;
  padding: 0.25rem 0.5rem !important;
  height: calc(1.8125rem + 2px) !important;
  min-height: calc(1.8125rem + 2px) !important;
  line-height: 1.25 !important;
}

body.ideva-dashboard .content-wrapper textarea.form-control:not(.form-control-lg) {
  font-size: 0.875rem !important;
  padding: 0.35rem 0.5rem !important;
  line-height: 1.35 !important;
  min-height: 4.25rem;
}

body.ideva-dashboard .content-wrapper .ideva-select2-label-compact {
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
}

/*
 * Misma escala que Select2/inputs sm: los <label> sueltos heredan ~1rem y se ven “grandes”.
 * Solo hijo directo de .form-group (no afecta .custom-control-label dentro de wrappers).
 */
body.ideva-dashboard .content-wrapper .form-group > label {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  margin-bottom: 0.25rem !important;
  line-height: 1.3 !important;
}

/* date/number: el widget nativo suele ignorar altura; forzar perfil tipo form-control-sm */
body.ideva-dashboard .content-wrapper input.form-control[type="date"],
body.ideva-dashboard .content-wrapper input.form-control[type="datetime-local"],
body.ideva-dashboard .content-wrapper input.form-control[type="number"] {
  line-height: 1.25 !important;
  box-sizing: border-box !important;
}

/* ——— Select2 global (el dropdown se monta en body; color marca + opciones pequeñas) ——— */
body.ideva-dashboard .select2-container--default .select2-results__option,
body.ideva-dashboard .select2-container--bootstrap4 .select2-results__option {
  font-size: 0.8125rem !important;
  padding: 0.4rem 0.65rem !important;
  line-height: 1.35 !important;
}

body.ideva-dashboard .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
body.ideva-dashboard .select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected],
body.ideva-dashboard .select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: #00a99d !important;
  color: #fff !important;
}

body.ideva-dashboard .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable:hover,
body.ideva-dashboard .select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected]:hover,
body.ideva-dashboard .select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option--selectable:hover {
  background-color: #008f85 !important;
  color: #fff !important;
}

body.ideva-dashboard .select2-container--default .select2-results__option--selected,
body.ideva-dashboard .select2-container--bootstrap4 .select2-results__option[aria-selected="true"],
body.ideva-dashboard .select2-container--bootstrap4 .select2-results__option--selected {
  background-color: rgba(0, 169, 157, 0.14) !important;
  color: #212529 !important;
}

body.ideva-dashboard .select2-dropdown .select2-search__field {
  font-size: 0.8125rem !important;
  padding: 0.3rem 0.5rem !important;
  line-height: 1.35 !important;
}

body.ideva-dashboard .select2-container--default .select2-results__group,
body.ideva-dashboard .select2-container--bootstrap4 .select2-results__group {
  font-size: 0.75rem !important;
  padding: 0.35rem 0.65rem !important;
}

body.ideva-dashboard .select2-container--default.select2-container--open .select2-selection--single,
body.ideva-dashboard .select2-container--bootstrap4.select2-container--open .select2-selection--single {
  border-color: #00a99d !important;
}

body.ideva-dashboard .select2-container--default.select2-container--focus .select2-selection--single,
body.ideva-dashboard .select2-container--bootstrap4.select2-container--focus .select2-selection--single {
  border-color: #00a99d !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 169, 157, 0.2) !important;
}

body.ideva-dashboard .select2-container--default.select2-container--open {
  border-color: #00a99d !important;
}

body.ideva-dashboard .select2-container--bootstrap4.select2-container--open .select2-selection,
body.ideva-dashboard .select2-container--bootstrap4.select2-container--focus .select2-selection {
  border-color: #00a99d !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 169, 157, 0.2) !important;
}

/* ——— Contenido: títulos de página y botones más pequeños (alineado con tablas/toolbar) ——— */
body.ideva-dashboard .content-wrapper .content-header {
  padding: 0.65rem 0.5rem;
}

body.ideva-dashboard .content-wrapper .content-header h1 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}

body.ideva-dashboard .content-wrapper .content-header .breadcrumb {
  font-size: 0.75rem;
  line-height: 1.35;
  margin-bottom: 0;
  padding: 0;
}

body.ideva-dashboard .content-wrapper .card > .card-header {
  padding: 0.45rem 0.85rem;
  font-size: 0.8125rem;
}

body.ideva-dashboard .content-wrapper .card .card-title {
  font-size: 0.9375rem;
  margin-bottom: 0;
}

/* Botones en el área de contenido (no navbar/sidebar: están fuera de .content-wrapper) */
body.ideva-dashboard .content-wrapper .btn:not(.btn-lg):not(.btn-app):not(.navbar-btn) {
  font-size: 0.8125rem;
  padding: 0.26rem 0.6rem;
  line-height: 1.35;
  border-radius: 0.2rem;
}

body.ideva-dashboard .content-wrapper .btn-sm {
  font-size: 0.75rem;
  padding: 0.2rem 0.45rem;
  line-height: 1.3;
}

body.ideva-dashboard .content-wrapper .btn-group-sm > .btn {
  font-size: 0.75rem;
  padding: 0.2rem 0.45rem;
}

/* ——— Dashboard (resumen) ——— */
body.ideva-dashboard .content-wrapper .ideva-dash-month {
  font-size: 0.8125rem;
  line-height: 1.4;
}

body.ideva-dashboard .content-wrapper .ideva-dash-stat {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  min-height: 5.5rem;
  padding: 0.85rem 1rem;
  background: #fff;
  border: 1px solid rgba(0, 169, 157, 0.22);
  border-radius: 0.35rem;
  box-shadow: 0 1px 2px rgba(33, 37, 41, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.ideva-dashboard .content-wrapper a.ideva-dash-stat--link {
  color: inherit;
  text-decoration: none !important;
}

body.ideva-dashboard .content-wrapper a.ideva-dash-stat--link:hover {
  border-color: var(--sidebar-accent);
  box-shadow: 0 2px 8px rgba(0, 169, 157, 0.12);
}

body.ideva-dashboard .content-wrapper .ideva-dash-stat__icon {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.3rem;
  background: rgba(0, 169, 157, 0.1);
  color: var(--sidebar-accent);
  font-size: 1.25rem;
}

body.ideva-dashboard .content-wrapper .ideva-dash-stat__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

body.ideva-dashboard .content-wrapper .ideva-dash-stat__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #6c757d;
  line-height: 1.2;
}

body.ideva-dashboard .content-wrapper .ideva-dash-stat__value {
  font-size: 1.35rem;
  font-weight: 700;
  color: #212529;
  line-height: 1.2;
  margin-top: 0.15rem;
}

body.ideva-dashboard .content-wrapper .ideva-dash-stat__hint {
  font-size: 0.75rem;
  color: #868e96;
  margin-top: 0.2rem;
  line-height: 1.3;
}

body.ideva-dashboard .content-wrapper .card-ideva-dash {
  border-color: rgba(0, 169, 157, 0.2);
}

body.ideva-dashboard .content-wrapper .ideva-dash-card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #343a40;
}

body.ideva-dashboard .content-wrapper .ideva-dash-quick .btn-block {
  white-space: normal;
}

/* ——— Historial clínico ——— */
body.ideva-dashboard .content-wrapper .ideva-hc-card {
  border-color: rgba(0, 169, 157, 0.18);
  border-radius: 0.4rem;
  box-shadow: 0 1px 3px rgba(33, 37, 41, 0.05);
}

body.ideva-dashboard .content-wrapper .ideva-hc-card--workspace .card-header {
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

body.ideva-dashboard .content-wrapper .ideva-hc-patient-header--divider {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

body.ideva-dashboard .content-wrapper .ideva-hc-avatar {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: rgba(0, 169, 157, 0.12);
  color: var(--sidebar-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

body.ideva-dashboard .content-wrapper .ideva-hc-patient-name {
  font-weight: 600;
  color: #212529;
}

body.ideva-dashboard .content-wrapper .ideva-hc-patient-name-row {
  gap: 0.25rem 0.35rem;
}

body.ideva-dashboard .content-wrapper .ideva-hc-patient-name-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  flex: 1 1 auto;
  max-width: 100%;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  line-height: 1.3;
  border-radius: 0.25rem;
  transition: color 0.15s ease;
}

body.ideva-dashboard .content-wrapper .ideva-hc-patient-edit-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-left: 0.15rem;
  border-radius: 0.3rem;
  color: var(--sidebar-accent);
  font-size: 1.1rem;
  line-height: 1;
  text-decoration: none !important;
  transition: background 0.15s ease, color 0.15s ease;
}

body.ideva-dashboard .content-wrapper .ideva-hc-patient-edit-icon:hover {
  background: rgba(0, 169, 157, 0.12);
  color: #00897f;
}

body.ideva-dashboard .content-wrapper .ideva-hc-patient-edit-icon:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 169, 157, 0.35);
}

body.ideva-dashboard .content-wrapper .ideva-hc-patient-name-toggle:hover .ideva-hc-patient-name,
body.ideva-dashboard .content-wrapper .ideva-hc-patient-name-toggle:focus .ideva-hc-patient-name {
  color: var(--sidebar-accent);
}

body.ideva-dashboard .content-wrapper .ideva-hc-patient-name-toggle:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 169, 157, 0.35);
}

body.ideva-dashboard .content-wrapper .ideva-hc-patient-name-toggle .ideva-hc-patient-name {
  min-width: 0;
  transition: color 0.15s ease;
}

body.ideva-dashboard .content-wrapper .ideva-hc-patient-chevron {
  flex-shrink: 0;
  font-size: 0.95rem;
  color: var(--sidebar-accent);
  transition: transform 0.22s ease;
}

body.ideva-dashboard .content-wrapper .ideva-hc-patient-name-toggle[aria-expanded="true"] .ideva-hc-patient-chevron {
  transform: rotate(180deg);
}

body.ideva-dashboard .content-wrapper .ideva-hc-toggle-hint {
  line-height: 1.35;
}

body.ideva-dashboard .content-wrapper .ideva-hc-patient-details-inner {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

body.ideva-dashboard .content-wrapper .ideva-hc-tabs-header {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

body.ideva-dashboard .content-wrapper .ideva-hc-main-tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: none;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

body.ideva-dashboard .content-wrapper .ideva-hc-main-tabs .nav-item {
  flex-shrink: 0;
}

body.ideva-dashboard .content-wrapper .ideva-hc-main-tabs .nav-link {
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0.25rem 0.25rem 0 0;
  color: #6c757d;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.7rem 1rem;
  margin-bottom: -1px;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

body.ideva-dashboard .content-wrapper .ideva-hc-main-tabs .nav-link:hover {
  color: #343a40;
  background: rgba(0, 169, 157, 0.06);
}

body.ideva-dashboard .content-wrapper .ideva-hc-main-tabs .nav-link.active {
  color: var(--sidebar-accent);
  border-bottom-color: var(--sidebar-accent);
  background: transparent;
  font-weight: 600;
}

body.ideva-dashboard .content-wrapper .ideva-hc-workspace-body {
  padding-top: 1rem;
}

body.ideva-dashboard .content-wrapper .ideva-hc-submenu {
  margin-top: 0;
}

body.ideva-dashboard .content-wrapper .ideva-hc-subtabs-toolbar {
  background: #f1f3f5;
  border-radius: 0.35rem;
  padding: 0.35rem;
  margin-bottom: 1rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

body.ideva-dashboard .content-wrapper .ideva-hc-subtabs {
  display: flex;
  flex-wrap: nowrap;
  border-bottom: none;
}

body.ideva-dashboard .content-wrapper .ideva-hc-subtabs .nav-item {
  flex-shrink: 0;
}

body.ideva-dashboard .content-wrapper .ideva-hc-subtabs .nav-link {
  border: none;
  border-radius: 0.3rem;
  color: #495057;
  font-size: 0.8125rem;
  padding: 0.4rem 0.75rem;
  line-height: 1.3;
  margin-right: 0.2rem;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

body.ideva-dashboard .content-wrapper .ideva-hc-subtabs .nav-link:hover {
  background: rgba(255, 255, 255, 0.75);
  color: #212529;
}

body.ideva-dashboard .content-wrapper .ideva-hc-subtabs .nav-link.active {
  background: #fff;
  color: var(--sidebar-accent);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(33, 37, 41, 0.08);
}

body.ideva-dashboard .content-wrapper .ideva-hc-subtab-panels {
  min-height: 4rem;
}

body.ideva-dashboard .content-wrapper .ideva-hc-section-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #343a40;
}

body.ideva-dashboard .content-wrapper .ideva-hc-table-shell {
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 0.35rem;
  padding: 0.5rem;
  background: #fafbfc;
}

body.ideva-dashboard .content-wrapper .ideva-hc-kv__group-title {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sidebar-accent);
  margin-bottom: 0.65rem;
}

body.ideva-dashboard .content-wrapper .ideva-hc-kv__list {
  margin: 0;
}

body.ideva-dashboard .content-wrapper .ideva-hc-kv__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

body.ideva-dashboard .content-wrapper .ideva-hc-kv__row:last-child {
  border-bottom: none;
}

body.ideva-dashboard .content-wrapper .ideva-hc-kv__row dt {
  flex: 0 0 8.5rem;
  max-width: 40%;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: #868e96;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.35;
}

body.ideva-dashboard .content-wrapper .ideva-hc-kv__row dd {
  flex: 1 1 12rem;
  margin: 0;
  font-size: 0.8125rem;
  color: #212529;
  line-height: 1.45;
  min-width: 0;
  word-break: break-word;
}

body.ideva-dashboard .content-wrapper .ideva-hc-empty {
  background: #f8f9fa;
  border: 1px dashed rgba(0, 169, 157, 0.25);
  border-radius: 0.35rem;
}

body.ideva-dashboard .content-wrapper .ideva-hc-empty__icon {
  display: block;
  font-size: 2rem;
  color: rgba(0, 169, 157, 0.45);
  margin-bottom: 0.5rem;
}

body.ideva-dashboard .content-wrapper .ideva-hc-empty__text {
  font-size: 0.8125rem;
  color: #6c757d;
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.45;
}

@media (max-width: 575.98px) {
  body.ideva-dashboard .content-wrapper .ideva-hc-patient-actions {
    width: 100%;
  }

  body.ideva-dashboard .content-wrapper .ideva-hc-patient-actions .btn {
    flex: 1 1 auto;
    text-align: center;
  }
}

/* ——— Formulario anamnesis (crear) / marco HIS ——— */
body.ideva-dashboard .content-wrapper .ideva-anam-page-card {
  border-radius: 0.35rem;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 0.12rem 0.45rem rgba(33, 37, 41, 0.08) !important;
}

/* Tablas de listado HIS (plantillas, etc.) */
body.ideva-dashboard .content-wrapper table.ideva-anam-his-table thead th {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6c757d;
  background: #f1f3f5;
  border-top: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.ideva-dashboard .content-wrapper table.ideva-anam-his-table tbody td {
  font-size: 0.875rem;
  vertical-align: middle;
}

body.ideva-dashboard .content-wrapper .ideva-anam-toolbar {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background: linear-gradient(180deg, #f8f9fa 0%, #fff 100%);
}

body.ideva-dashboard .content-wrapper .ideva-anam-toolbar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1rem 1.25rem;
}

body.ideva-dashboard .content-wrapper .ideva-anam-patient-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  min-width: 0;
  flex: 1 1 12rem;
}

body.ideva-dashboard .content-wrapper .ideva-anam-patient-label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #868e96;
}

body.ideva-dashboard .content-wrapper .ideva-anam-patient-name {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.65rem;
  font-size: 1rem;
  font-weight: 600;
  color: #212529;
  min-width: 0;
}

body.ideva-dashboard .content-wrapper .ideva-anam-patient-ico {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  line-height: 1;
}

body.ideva-dashboard .content-wrapper .ideva-anam-patient-ico i {
  font-size: 1.75rem;
  line-height: 1;
  color: var(--sidebar-accent);
  vertical-align: middle;
}

body.ideva-dashboard .content-wrapper .ideva-anam-patient-name-text {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.4;
  word-break: break-word;
  hyphens: auto;
}

body.ideva-dashboard .content-wrapper .ideva-anam-toolbar-btn {
  flex-shrink: 0;
}

@media (max-width: 575.98px) {
  body.ideva-dashboard .content-wrapper .ideva-anam-toolbar-inner {
    flex-direction: column;
    align-items: stretch;
  }

  body.ideva-dashboard .content-wrapper .ideva-anam-toolbar-btn {
    width: 100%;
    text-align: center;
  }
}

body.ideva-dashboard .content-wrapper .ideva-anam-page-body {
  padding-top: 1.25rem;
  padding-bottom: 1.5rem;
}

body.ideva-dashboard .content-wrapper .ideva-anam-form .ideva-anam-section {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0.3rem;
  overflow: hidden;
  box-shadow: none;
}

body.ideva-dashboard .content-wrapper .ideva-anam-form .ideva-anam-section .card-body {
  background: #fff;
}

body.ideva-dashboard .content-wrapper .ideva-anam-section-header {
  background: #f8f9fa;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  padding-left: 1rem;
  padding-right: 1rem;
}

body.ideva-dashboard .content-wrapper .ideva-anam-section-header-inner {
  font-size: 0.875rem;
  font-weight: 600;
  color: #343a40;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

body.ideva-dashboard .content-wrapper .ideva-anam-section-header-inner i {
  color: var(--sidebar-accent);
  font-size: 1rem;
}

body.ideva-dashboard .content-wrapper .ideva-anam-form .ideva-anam-label {
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  margin-bottom: 0.35rem;
}

body.ideva-dashboard .content-wrapper .ideva-anam-related-title {
  font-weight: 600;
  color: #495057;
}

body.ideva-dashboard .content-wrapper .ideva-anam-alert {
  font-size: 0.875rem;
  border-radius: 0.35rem;
}

body.ideva-dashboard .content-wrapper .ideva-anam-footer-bar {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0.3rem;
  background: #fff;
  position: sticky;
  bottom: 0.75rem;
  /*
   * Por encima de Select2 (.select2 { z-index: 100 } en loading.css) para que al hacer scroll
   * los botones no queden tapados por los desplegables. Por debajo del pie fijo global (1032)
   * y del dropdown de Select2 (1051) para no cubrir el listado abierto.
   */
  z-index: 1020;
  box-shadow: 0 2px 8px rgba(33, 37, 41, 0.06);
}

body.ideva-dashboard .content-wrapper .ideva-anam-footer-bar .card-body {
  background: #fff;
}

/* Barra de acciones: ocupa todo el ancho del card (evita hueco a la derecha en escritorio) */
body.ideva-dashboard
  .content-wrapper
  .ideva-anam-footer-bar
  .ideva-anam-footer-bar__actions {
  box-sizing: border-box;
}

/* Móvil: ancho completo y columna estable */
@media (max-width: 767.98px) {
  body.ideva-dashboard
    .content-wrapper
    .ideva-anam-footer-bar
    .ideva-anam-footer-bar__actions
    .btn {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  body.ideva-dashboard
    .content-wrapper
    .ideva-anam-footer-bar
    .ideva-anam-footer-bar__actions
    .btn.ml-md-auto {
    margin-left: 0 !important;
  }
}

/* ——— Modal confirmación (eliminar en tablas index) ——— */
body.ideva-dashboard .ideva-confirm-modal.modal {
  z-index: 2060;
  overflow-y: auto;
}

body.ideva-dashboard .ideva-confirm-modal .ideva-confirm-modal__backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-color: rgba(33, 37, 41, 0.52);
}

body.ideva-dashboard .ideva-confirm-modal .modal-dialog.ideva-confirm-modal__dialog {
  position: relative;
  z-index: 1;
  max-width: 22rem;
  margin: 1.75rem auto;
}

body.ideva-dashboard .ideva-confirm-modal .ideva-confirm-modal__panel {
  border: none;
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 2rem rgba(33, 37, 41, 0.18);
  overflow: hidden;
}

body.ideva-dashboard .ideva-confirm-modal .ideva-confirm-modal__close {
  position: absolute;
  top: 0.65rem;
  right: 0.85rem;
  z-index: 2;
  padding: 0.35rem;
  margin: 0;
  font-size: 1.35rem;
  line-height: 1;
  color: #adb5bd;
  opacity: 1;
  text-shadow: none;
}

body.ideva-dashboard .ideva-confirm-modal .ideva-confirm-modal__close:hover {
  color: #495057;
}

body.ideva-dashboard .ideva-confirm-modal .ideva-confirm-modal__body {
  padding: 1.75rem 1.5rem 0.5rem;
}

body.ideva-dashboard .ideva-confirm-modal .ideva-confirm-modal__icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto;
  border-radius: 50%;
  background: rgba(220, 53, 69, 0.12);
}

body.ideva-dashboard .ideva-confirm-modal .ideva-confirm-modal__icon {
  font-size: 1.65rem;
  line-height: 1;
  color: #dc3545;
}

body.ideva-dashboard .ideva-confirm-modal .ideva-confirm-modal__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #212529;
  line-height: 1.35;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

body.ideva-dashboard .ideva-confirm-modal .ideva-confirm-modal__message {
  font-size: 0.875rem;
  line-height: 1.45;
}

body.ideva-dashboard .ideva-confirm-modal .ideva-confirm-modal__footer {
  padding: 1rem 1.25rem 1.35rem;
  justify-content: center;
}

body.ideva-dashboard .ideva-confirm-modal .ideva-confirm-modal__footer .btn + .btn {
  margin-left: 0.5rem;
}

body.ideva-dashboard .ideva-confirm-modal .ideva-confirm-modal__btn {
  min-width: 7.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.4rem 1rem;
  border-radius: 0.3rem;
}

body.ideva-dashboard .ideva-confirm-modal .ideva-confirm-modal__btn--cancel {
  border-color: #ced4da;
  color: #495057;
}

body.ideva-dashboard .ideva-confirm-modal .ideva-confirm-modal__btn--cancel:hover {
  background: #f8f9fa;
  border-color: #adb5bd;
  color: #212529;
}

body.ideva-dashboard .ideva-confirm-modal .ideva-confirm-modal__btn--confirm.btn-danger {
  box-shadow: 0 1px 2px rgba(220, 53, 69, 0.35);
}

body.ideva-dashboard .ideva-confirm-modal .ideva-confirm-modal__btn--confirm.btn-danger:hover {
  box-shadow: 0 2px 6px rgba(220, 53, 69, 0.4);
}

/**
 * Cuadro de logo clickeable (formularios de Empresa: crear/editar), estilo
 * "avatar con insignia de cámara" (GitHub/Facebook): marco cuadrado con sombra +
 * insignia circular superpuesta en la esquina, que se oscurece al pasar el mouse.
 * Envuelve un <input type="file"> oculto en un <label> — clic en cualquier parte
 * abre el selector de archivo nativo, sin JS necesario para eso; el JS de cada
 * página solo se usa para la vista previa inmediata (FileReader).
 */
.ideva-logo-upload {
  position: relative;
  display: inline-block;
  width: 110px;
  height: 110px;
  flex: 0 0 110px;
  cursor: pointer;
}

.ideva-logo-upload__frame {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: #eef0f2;
  border: 1px solid #e4e7ea;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.15s ease;
}

.ideva-logo-upload:hover .ideva-logo-upload__frame,
.ideva-logo-upload:focus-within .ideva-logo-upload__frame {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

/* Overlay oscuro + ícono de cámara centrado al pasar el mouse (patrón GitHub).
   El ícono es un <i class="bi bi-camera-fill"> real en el HTML (no CSS content
   con un codepoint inventado) — mismo patrón de íconos que el resto del proyecto. */
.ideva-logo-upload__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #fff;
  background: rgba(0, 0, 0, 0);
  opacity: 0;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

.ideva-logo-upload:hover .ideva-logo-upload__overlay,
.ideva-logo-upload:focus-within .ideva-logo-upload__overlay {
  background: rgba(0, 0, 0, 0.45);
  opacity: 1;
}

.ideva-logo-upload img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ideva-logo-upload .ideva-logo-upload__icon {
  font-size: 2rem;
  line-height: 1;
  color: #adb5bd;
}

/* Insignia circular fija en la esquina (patrón Facebook): visible siempre, no
   solo al hover — asegura que la acción sea descubrible también en táctil. */
.ideva-logo-upload__badge {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--sidebar-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.ideva-logo-upload:hover .ideva-logo-upload__badge,
.ideva-logo-upload:focus-within .ideva-logo-upload__badge {
  background: #008f85;
  transform: scale(1.08);
}

.ideva-logo-upload input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}

/* Foco de teclado visible para los botones de icono "text-secondary" (editar/
   eliminar/etc. en tablas de Empresas, Bodegas, Resoluciones...): al no llevar
   una variante de color (.btn-primary, .btn-outline-*), Bootstrap 4 no les
   aplica ningún anillo de foco propio — quedan sin ninguna indicación visible
   al navegar con teclado. Mismo estilo de halo ya usado en
   .ideva-hc-patient-edit-icon:focus más arriba en este archivo. */
.btn.text-secondary:focus,
.btn.text-secondary.focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 169, 157, 0.35);
}

/* ============================================================
   Modo oscuro del shell (sidebar + navbar + fondo general)
   ============================================================
   Alcance deliberadamente acotado: SOLO el "chrome" fuera de
   .content-wrapper (sidebar, navbar, buscador global, menú de
   usuario, footer). El contenido de las 189 vistas Blade (cards,
   tablas, forms de AdminLTE/Bootstrap4) NO tiene modo oscuro —
   portar eso es un tema oscuro completo para AdminLTE/Bootstrap4/
   Select2/SweetAlert2, fuera de alcance acá.

   Se activa con la clase `ideva-dark` en <html> (ver
   public/js/ideva-sidebar.js → initTheme, persistida en
   localStorage 'ideva-theme') aplicada tempranamente en
   layouts/app.blade.php para evitar flash claro→oscuro en cada
   navegación (acá no hay SPA que lo evite solo).

   Todo prefijado con "html.ideva-dark body.ideva-dashboard" para
   igualar o superar la especificidad de la regla clara equivalente
   sin depender del orden en el archivo. */
html.ideva-dark {
  --sidebar-text: #c3c9d4;
  --sidebar-logo-text: #f4f6f8;
  --sidebar-page-bg: #14171a;

  /* Superficies propias del oscuro (dropdown, buscador, footer): no
     existen en modo claro, solo se referencian acá. */
  --ideva-dark-surface: #1c2024;
  --ideva-dark-border: rgba(255, 255, 255, 0.1);
  --ideva-dark-muted: #9098a3;
}

/* ——— Sidebar ——— */
html.ideva-dark body.ideva-dashboard #ideva-sidebar {
  background: linear-gradient(
    180deg,
    rgba(0, 169, 157, 0.16) 0%,
    rgba(0, 169, 157, 0.04) 45%,
    #101317 100%
  );
  box-shadow: 4px 0 12px -2px rgba(0, 0, 0, 0.4);
}

html.ideva-dark body.ideva-dashboard .sidebar-section-label {
  color: rgba(255, 255, 255, 0.45);
}

html.ideva-dark body.ideva-dashboard .sidebar-nav-link:not(.active):hover,
html.ideva-dark body.ideva-dashboard .sidebar-nav-toggle:not(.active):hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

html.ideva-dark body.ideva-dashboard .sidebar-chevron {
  color: #7b8494;
}

/* Igual que el botón de mostrar/ocultar menú del piloto Inertia (AppTopbar.vue):
   en oscuro queda con fondo de marca permanente, no solo al hover. */
html.ideva-dark body.ideva-dashboard .ideva-sidebar-toggle-visual {
  background-color: var(--sidebar-accent);
  background-image: url("../img/logos/isotipo-sincolor.png");
}

html.ideva-dark body.ideva-dashboard .ideva-sidebar-one-toggle:hover .ideva-sidebar-toggle-visual {
  background-color: var(--sidebar-accent-hover);
}

/* ——— Navbar ——— */
html.ideva-dark body.ideva-dashboard .main-header.navbar {
  background: var(--ideva-dark-surface);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.35), 0 2px 4px -2px rgba(0, 0, 0, 0.35);
}

html.ideva-dark body.ideva-dashboard .main-header .ideva-navbar-icon-btn {
  color: var(--ideva-dark-muted);
}

html.ideva-dark body.ideva-dashboard .main-header .ideva-navbar-icon-btn:hover,
html.ideva-dark body.ideva-dashboard .main-header .ideva-navbar-icon-btn:focus {
  background-color: rgba(255, 255, 255, 0.08);
}

html.ideva-dark body.ideva-dashboard .main-header .ideva-navbar-user-toggle:hover,
html.ideva-dark body.ideva-dashboard .main-header .ideva-navbar-user-toggle:focus {
  background-color: rgba(255, 255, 255, 0.08);
}

html.ideva-dark body.ideva-dashboard .ideva-navbar-user-dropdown {
  background-color: var(--ideva-dark-surface);
  border-color: var(--ideva-dark-border);
}

html.ideva-dark body.ideva-dashboard .ideva-navbar-user-dropdown .dropdown-divider {
  border-top-color: var(--ideva-dark-border);
}

/* ——— Buscador global ——— */
html.ideva-dark body.ideva-dashboard .ideva-search-icon,
html.ideva-dark body.ideva-dashboard .ideva-search-msg,
html.ideva-dark body.ideva-dashboard .ideva-search-group-label,
html.ideva-dark body.ideva-dashboard .ideva-search-item-subtitle {
  color: var(--ideva-dark-muted);
}

html.ideva-dark body.ideva-dashboard .ideva-search-input {
  background: var(--ideva-dark-surface);
  border-color: var(--ideva-dark-border);
}

html.ideva-dark body.ideva-dashboard .ideva-search-input::placeholder {
  color: var(--ideva-dark-muted);
}

html.ideva-dark body.ideva-dashboard .ideva-search-kbd {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--ideva-dark-border);
  color: var(--ideva-dark-muted);
}

html.ideva-dark body.ideva-dashboard .ideva-search-results {
  background: var(--ideva-dark-surface);
  border-color: var(--ideva-dark-border);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
}

/* ——— Footer ——— */
html.ideva-dark body.ideva-dashboard .main-footer.ideva-main-footer {
  background: var(--ideva-dark-surface);
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}

html.ideva-dark body.ideva-dashboard .ideva-footer-year,
html.ideva-dark body.ideva-dashboard .ideva-footer-rights {
  color: var(--ideva-dark-muted);
}

html.ideva-dark body.ideva-dashboard .ideva-footer-version {
  color: var(--ideva-dark-muted);
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--ideva-dark-border);
}

/* ——— Compat Bootstrap 4 .collapse vs utilidad Tailwind .collapse ——— */
/* Tailwind v4 (resources/css/app.css) genera la utilidad de visibilidad
   `.collapse { visibility: collapse }`, que choca de nombre con la clase
   `.collapse` del plugin Collapse de Bootstrap 4 (acordeones legacy, ej.
   role_permissions/edit.blade.php). Bootstrap sí pone display:block al
   abrir (por eso el panel "se abre"), pero visibility:collapse de Tailwind
   sigue aplicando y deja el contenido invisible aunque siga en el DOM.
   .collapse.show tiene mayor especificidad que el .collapse plano de
   Tailwind, así que esta regla gana sin importar el orden de carga de los
   CSS. */
.collapse.show {
  visibility: visible;
}