/* ============================================================
   ECMOVAD · Capa de personalización visual — PRODUCCIÓN
   ------------------------------------------------------------
   Este archivo NO forma parte de la app original: se inyecta
   por encima desde el servidor. Todo lo que se escriba aquí
   modifica la apariencia sin tocar el código de la aplicación.
   Para revertir un cambio, basta con borrar su bloque.

   Ambiente: PRODUCCIÓN (app.ecmovad.com)
   Los cambios se prueban primero en pruebasapp.ecmovad.com.
   ============================================================ */

/* ------------------------------------------------------------
   1. Orden del menú lateral
   ------------------------------------------------------------
   El menú es un contenedor flexible, así que se puede reordenar
   sin modificar la lógica de la app. Orden deseado:
     1. Inicio (logo)
     2. Pacientes
     3. Grupos          <- antes iba de último
     4. Contacto        <- soporte, penúltimo
     5. Acerca de       <- al final
   ------------------------------------------------------------ */

[class*="sidebar_sectionUp"] > a[href="/dashboard"]          { order: 1; }
[class*="sidebar_sectionUp"] > a[href="/dashboard/patients"] { order: 2; }
[class*="sidebar_sectionUp"] > a[href="/dashboard/groups"]   { order: 3; }
[class*="sidebar_sectionUp"] > a[href="/dashboard/contact"]  { order: 4; }
[class*="sidebar_sectionUp"] > a[href="/dashboard/about"]    { order: 5; }

/* Mismo orden en el menú de la versión móvil */
[class*="sidebarMobile"] a[href="/dashboard"]          { order: 1; }
[class*="sidebarMobile"] a[href="/dashboard/patients"] { order: 2; }
[class*="sidebarMobile"] a[href="/dashboard/groups"]   { order: 3; }
[class*="sidebarMobile"] a[href="/dashboard/contact"]  { order: 4; }
[class*="sidebarMobile"] a[href="/dashboard/about"]    { order: 5; }


/* ------------------------------------------------------------
   2. Lista de pacientes: poder desplazarse
   ------------------------------------------------------------
   La lista crecía más alto que la pantalla y no tenía barra de
   desplazamiento propia, así que los últimos pacientes quedaban
   fuera de alcance. Se le pone un alto máximo y scroll propio.
   ------------------------------------------------------------ */

[class*="info-list_sectionInfoList"] {
  max-height: calc(100vh - 265px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
}

/* Barra de desplazamiento discreta, acorde al diseño */
[class*="info-list_sectionInfoList"]::-webkit-scrollbar        { width: 8px; }
[class*="info-list_sectionInfoList"]::-webkit-scrollbar-track  { background: transparent; }
[class*="info-list_sectionInfoList"]::-webkit-scrollbar-thumb  {
  background: #c6cae2;
  border-radius: 8px;
}
[class*="info-list_sectionInfoList"]::-webkit-scrollbar-thumb:hover { background: #a2acc8; }
[class*="info-list_sectionInfoList"] { scrollbar-width: thin; scrollbar-color: #c6cae2 transparent; }


/* ------------------------------------------------------------
   3. Numeración consecutiva de pacientes
   ------------------------------------------------------------
   El número lo calcula el navegador según la POSICIÓN en la
   lista, no es un dato guardado. Por eso, si se elimina el
   paciente 7, el que era 8 pasa a ser 7 automáticamente.
   El usuario sigue poniéndole el nombre que quiera.
   ------------------------------------------------------------ */

[class*="info-list_sectionInfoList"] { counter-reset: paciente; }

[class*="info-list_sectionInfoList"] > li::before {
  counter-increment: paciente;
  content: counter(paciente);
  align-self: center;
  flex: 0 0 auto;
  min-width: 20px;
  height: 20px;
  line-height: 20px;
  margin-right: -6px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: #2b3f6c;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(43, 63, 108, 0.18);
  border-radius: 6px;
}


/* ------------------------------------------------------------
   4. Panel de pacientes plegable (sobre todo en el celular)
   ------------------------------------------------------------
   En pantalla pequeña la lista ocupaba todo y había que bajar
   mucho para llegar a las herramientas. El título "Pacientes"
   funciona como interruptor: al tocarlo pliega o despliega.
   La capa de comportamiento pone las clases y, en el celular,
   arranca plegado.
   ------------------------------------------------------------ */

.ecmovad-panel-pacientes [class*="card-menu_title"] {
  cursor: pointer;
  user-select: none;
  align-items: center;
}

/* --- Estado POR DEFECTO según el tamaño de pantalla --- */

/* Celular: plegado, salvo que el usuario lo abra */
@media (max-width: 768px) {
  .ecmovad-panel-pacientes:not([data-ecmovad-estado="abierto"]) > *:not([class*="card-menu_title"]) {
    display: none;
  }
  .ecmovad-panel-pacientes:not([data-ecmovad-estado="abierto"]) [class*="card-menu_title"] > h2::after {
    content: " \25B8";        /* ▸ plegado */
  }
  /* La lista no necesita tanto alto en pantalla pequeña */
  [class*="info-list_sectionInfoList"] { max-height: 55vh; }
}

/* --- Aviso "Selecciona un paciente" y hueco vacío (solo celular) --- */
@media (max-width: 768px) {

  /* La app deja un esqueleto de carga esperando a que se elija una
     herramienta; en el celular solo produce un hueco grande y empuja
     las herramientas fuera de la pantalla. Se oculta: cuando hay
     contenido real, este aparece igual en su lugar. */
  .ant-skeleton {
    display: none;
  }

  /* Aviso discreto pero visible, justo debajo del panel de pacientes.
     Desaparece al elegir un paciente y también al abrir la lista
     (ahí ya no hace falta y estorbaría). Al tocarlo se abre la lista. */
  body[data-ecmovad-paciente="ninguno"]
  .ecmovad-panel-pacientes:not([data-ecmovad-estado="abierto"])::after {
    content: "Selecciona un paciente";
    display: block;
    margin: 14px 2px 2px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(1, 106, 254, 0.06);
    border: 1px dashed rgba(1, 106, 254, 0.35);
    color: #016afe;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.2px;
    cursor: pointer;
  }

  /* Un respiro parejo entre el panel y la sección de herramientas */
  .ecmovad-panel-pacientes {
    margin-bottom: 20px;
  }
}


/* ------------------------------------------------------------
   Pantallas estrechas: que la fila del paciente quepa completa
   ------------------------------------------------------------
   Cada fila necesitaba más ancho del disponible en teléfonos
   pequeños (o con el zoom del navegador subido), y los botones
   de compartir/editar quedaban cortados. Se ajustan las medidas
   para que todo entre sin recortes.
   ------------------------------------------------------------ */
@media (max-width: 430px) {

  [class*="info-list_sectionInfoList"] > li {
    gap: 8px;
    padding: 8px;
  }

  /* Ícono de la persona, más compacto */
  [class*="info-list_sectionInfoList"] > li > [class*="info-list_icon"] {
    min-width: 30px;
    width: 30px;
    flex: 0 0 30px;
  }

  /* Botones de acción, más compactos */
  [class*="info-list_buttonsContainer"] {
    gap: 6px;
    flex: 0 0 auto;
  }
  [class*="info-list_buttonsContainer"] > button {
    width: 34px;
    min-width: 34px;
    padding: 6px;
  }

  /* El nombre ocupa el espacio que sobra, sin empujar a los demás */
  [class*="info-list_card"] {
    min-width: 0;
    flex: 1 1 auto;
    overflow-wrap: anywhere;
  }

  /* La insignia del número, un poco más ajustada */
  [class*="info-list_sectionInfoList"] > li::before {
    min-width: 18px;
    margin-right: -4px;
    font-size: 10px;
  }
}

/* Computador: desplegado, salvo que el usuario lo cierre */
.ecmovad-panel-pacientes[data-ecmovad-estado="cerrado"] > *:not([class*="card-menu_title"]) {
  display: none;
}

/* Flecha indicadora: por defecto "desplegado" */
.ecmovad-panel-pacientes [class*="card-menu_title"] > h2::after {
  content: " \25BE";          /* ▾ desplegado */
  font-size: 0.7em;
  opacity: 0.55;
  margin-left: 6px;
}
.ecmovad-panel-pacientes[data-ecmovad-estado="cerrado"] [class*="card-menu_title"] > h2::after {
  content: " \25B8";          /* ▸ plegado */
}
.ecmovad-panel-pacientes[data-ecmovad-estado="abierto"] [class*="card-menu_title"] > h2::after {
  content: " \25BE";          /* ▾ desplegado */
}


/* ------------------------------------------------------------
   Avisos emergentes: equis más visible y texto más legible
   ------------------------------------------------------------
   Algunos avisos traen información importante (por ejemplo, a
   quién se invitó y hasta cuándo vale la invitación). Se hace
   la equis de cerrar más grande y se da algo de aire al texto.
   ------------------------------------------------------------ */

.Toastify__close-button {
  opacity: 0.85;
  align-self: center;
  padding: 4px;
}
.Toastify__close-button:hover {
  opacity: 1;
}
.Toastify__close-button > svg {
  width: 18px;
  height: 18px;
}
.Toastify__toast {
  min-height: auto;
  padding: 12px 14px;
}
.Toastify__toast-body {
  line-height: 1.45;
}