/* ============================================================================
   PANEL — estilos compartidos del área de administración
   Midpoint Solutions HUB

   Este archivo lo usan todas las pantallas del panel. Antes cada una traía su
   copia del menú; cuando había que cambiar algo (agregar un link, arreglar el
   celular) había que hacerlo cuatro veces. Ahora se hace aquí una vez.

   La regla de oro del diseño en dos tamaños:
     - En COMPUTADORA el menú vive fijo a la izquierda, siempre visible.
     - En CELULAR el menú se esconde y aparece una barra arriba con el botón de
       las tres rayitas. Al tocarlo, el menú entra deslizándose por encima.
   No es la misma pantalla encogida: es otra forma de acomodar lo mismo.

   Lo que vale para TODAS las pantallas (que nada se salga, que todo se pueda
   tocar con el dedo, que las tablas se deslicen) no vive aquí: vive en
   base.css, y se jala desde la primera línea. Así una pantalla del panel solo
   necesita pedir panel.css y ya trae las dos cosas.
   ============================================================================ */

@import url("base.css");

:root { --acento: #111111; }

body {
  font-family: "Poppins", -apple-system, "Segoe UI", Arial, sans-serif;
  background: #ffffff;
  color: #111111;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

/* --------------------------------------------------------------------------
   ESTRUCTURA
   -------------------------------------------------------------------------- */
.layout { display: flex; min-height: 100vh; }

/* EL CONTENIDO VA CENTRADO ⟨27/8⟩

   Antes era `flex: 1` a secas, o sea: ocupa TODO lo que haya. En un monitor
   ancho eso deja los renglones de la bitácora midiendo 1600px y el ojo tiene
   que barrer de lado a lado para leer una sola línea. Y al replegar el menú
   empeoraba: el contenido crecía 236px de golpe y quedaba cargado a la
   izquierda, con medio monitor en blanco del otro lado.

   Un tope de ancho más márgenes automáticos resuelve las dos cosas: la columna
   deja de estirarse y se acomoda sola en el espacio que haya, con o sin menú.

   1180px no es un número bonito: es lo más ancho que puede medir la tabla de
   la bitácora sin partirse, que es la pantalla más ancha del panel. */
.contenido {
  flex: 1;
  min-width: 0;              /* sin esto, una tabla ancha empuja el layout */
  width: 100%;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  padding: 36px 32px 64px;
}
.contenido-angosto { max-width: 760px; }
.contenido-medio   { max-width: 940px; }

/* --------------------------------------------------------------------------
   BARRA SUPERIOR — solo aparece en celular
   -------------------------------------------------------------------------- */
.barra-movil {
  display: none;
  position: sticky;
  top: 0;
  z-index: 40;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  padding-top: calc(10px + env(safe-area-inset-top));
  background: #ffffff;
  border-bottom: 1.5px solid #e5e5e5;
}
.barra-movil-titulo {
  font-size: 0.95rem; font-weight: 700; flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* El botón de las tres rayitas. 44px de lado: es el mínimo que un dedo
   acierta sin fallar. */
.btn-menu {
  width: 44px; height: 44px; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: none; border: 1.5px solid #e5e5e5; border-radius: 8px; cursor: pointer; padding: 0;
}
.btn-menu span { display: block; width: 20px; height: 2px; background: #111111; border-radius: 2px; transition: transform 0.18s ease, opacity 0.18s ease; }
.btn-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.btn-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.btn-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   MENÚ
   -------------------------------------------------------------------------- */
.menu {
  width: 236px; flex-shrink: 0;
  background: #fafafa;
  border-right: 1.5px solid #e5e5e5;
  padding: 22px 0;
  display: flex; flex-direction: column;
}

.menu-cabeza { display: flex; align-items: center; justify-content: space-between; padding: 0 18px 4px; gap: 8px; }
.menu-marca { font-size: 0.72rem; font-weight: 700; color: #8a8a8a; text-transform: uppercase; letter-spacing: 0.08em; }
.menu-tag { padding: 0 18px 18px; font-size: 0.7rem; color: #a3a3a3; }

/* Botón para replegar el menú en computadora */
.btn-replegar {
  display: none;
  background: none; border: none; cursor: pointer; padding: 4px 6px;
  font-size: 1.05rem; line-height: 1; color: #8a8a8a; border-radius: 6px;
}
.btn-replegar:hover { background: #ececec; color: #111111; }

.menu-yo {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid #ececec; border-bottom: 1px solid #ececec;
  margin-bottom: 10px;
  text-decoration: none; color: inherit;
}
.menu-yo:hover { background: #f0f0f0; }
.menu-yo-foto {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  background: var(--acento); color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.9rem;
}
.menu-yo-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.menu-yo-txt { min-width: 0; }
.menu-yo-nombre { font-size: 0.85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-yo-rol { font-size: 0.7rem; color: #8a8a8a; text-transform: capitalize; }

/* --------------------------------------------------------------------------
   COMPARTIR LA PÁGINA PÚBLICA

   Va pegado a la tarjeta de presentación, porque es lo mismo: tu identidad
   hacia afuera. El botón cambia de color un momento al copiar — sin ese aviso
   nadie sabe si el clic sirvió, y termina picándole tres veces.
   -------------------------------------------------------------------------- */
.menu-compartir { padding: 4px 14px 12px; border-bottom: 1px solid #ececec; margin-bottom: 10px; }

.menu-compartir-btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 9px 10px;
  margin-bottom: 6px;
  background: #ffffff;
  border: 1.5px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.79rem;
  font-weight: 600;
  color: #333333;
  text-align: left;
  line-height: 1.3;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.menu-compartir-btn:hover { background: #f4f4f4; border-color: #c8c8c8; }
.menu-compartir-btn.secundario { font-weight: 500; color: #6f6f6f; }

/* Al copiar: el botón se pone del color del área por un momento. */
.menu-compartir-btn.listo {
  background: var(--acento);
  border-color: var(--acento);
  color: #ffffff;
}
.menu-compartir-btn.falla {
  background: #fdeeee; border-color: #f5c6c6; color: #9b2c2c;
}

.menu-compartir-icono { font-size: 0.95rem; flex-shrink: 0; line-height: 1; }
.menu-compartir-nota { font-size: 0.68rem; color: #a3a3a3; line-height: 1.4; padding: 2px 2px 0; }

.menu-grupo { padding: 10px 18px 4px; font-size: 0.66rem; font-weight: 700; color: #a3a3a3; text-transform: uppercase; letter-spacing: 0.08em; }

.menu nav a {
  display: block; padding: 10px 18px; font-size: 0.87rem; color: #333333;
  text-decoration: none; border-left: 3px solid transparent;
}
/* ⟨3/9⟩ El renglón del menú se desliza 3px al pasar el cursor: es la señal
   de "esto se pica", en el mismo idioma que los botones (base.css §13). */
.menu nav a { transition: background-color 0.15s ease, transform 0.15s ease, color 0.15s ease; }
.menu nav a:hover { background: #f0f0f0; transform: translateX(3px); }
.menu nav a:active { transform: translateX(3px) scale(0.98); }
.menu nav a.activo { background: #ffffff; border-left-color: var(--acento); color: #111111; font-weight: 600; }

.menu-pie {
  margin-top: auto; padding: 16px 18px 0; border-top: 1px solid #ececec;
  display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
}
/* El subrayado ahora lo pone base.css con `text-decoration`, así que el borde
   inferior que lo imitaba sale sobrando: dos subrayados uno encima del otro. */
.menu-pie-sitio { display: inline-block; padding: 6px 2px; }
/* "Cerrar sesión" es de los que hay que encontrar rápido, sobre todo en una
   computadora compartida. #8a8a8a daba 3.55:1 sobre el fondo del menú: por
   debajo del mínimo. #333333 da 12.6:1. */
.menu-pie button {
  background: none; border: none; padding: 6px 2px; cursor: pointer;
  font-family: inherit; font-size: 0.9rem; font-weight: 700; color: #333333;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  text-decoration-color: #b8b8b8;
}
.menu-pie button:focus-visible {
  outline: 3px solid #111111; outline-offset: 3px; border-radius: 3px;
}
.menu-pie button:hover { color: #111111; }

/* Fondo oscuro detrás del menú abierto en celular */
/* El botón para traer de vuelta el menú replegado solo existe en computadora.
   Se apaga aquí de entrada; el bloque de escritorio lo enciende cuando toca. */
.btn-traer { display: none; }

.velo {
  display: none;
  position: fixed; inset: 0; z-index: 45;
  background: rgba(0, 0, 0, 0.4);
}
.velo.visible { display: block; }

/* --------------------------------------------------------------------------
   AVISO DE CONFIGURACIÓN PENDIENTE
   Se usa cuando a la base de datos le falta un paso: es preferible decirlo
   arriba y con nombre, que dejar que la persona lo descubra al fallar.
   -------------------------------------------------------------------------- */
.aviso-config {
  border: 1.5px solid #f0dca0; background: #fff8e6; color: #6b5a20;
  border-radius: 10px; padding: 14px 16px; margin-bottom: 20px;
  font-size: 0.85rem; line-height: 1.6;
}
.aviso-config strong { color: #4a3f16; }
.aviso-config code {
  background: #fdf3d4; border: 1px solid #eadcae; border-radius: 4px;
  padding: 1px 5px; font-size: 0.92em; word-break: break-all;
}

/* --------------------------------------------------------------------------
   TABLAS QUE NO CABEN
   En celular una tabla ancha rompe la pantalla y obliga a mover TODA la página
   de lado. Metida en su propio marco, se desliza sola y el resto queda quieto.
   -------------------------------------------------------------------------- */
.tabla-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabla-scroll table { min-width: 460px; }

/* --------------------------------------------------------------------------
   CELULAR
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .barra-movil { display: flex; }

  .layout { display: block; }

  .menu {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 50;
    width: 268px; max-width: 84vw;
    border-right: 1.5px solid #e5e5e5;
    padding-top: calc(22px + env(safe-area-inset-top));
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    overflow-y: auto;
  }
  .menu.abierto { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,0.22); }

  .contenido {
    padding: 22px 16px calc(48px + env(safe-area-inset-bottom));
    max-width: 100%;
  }

  /* Un poco más chico todo, para que quepa sin apretarse */
  h1 { font-size: 1.3rem; }
  .btn-replegar { display: none !important; }
}

/* --------------------------------------------------------------------------
   COMPUTADORA
   -------------------------------------------------------------------------- */
@media (min-width: 861px) {
  .btn-replegar { display: block; }
  .menu.replegado { display: none; }

  /* Cuando el menú está replegado aparece un botón flotante para traerlo de
     vuelta; si no, no habría manera de recuperarlo. */
  .btn-traer { display: none; }
  .layout.sin-menu .btn-traer {
    display: flex; position: fixed; top: 16px; left: 16px; z-index: 40;
    width: 44px; height: 44px; align-items: center; justify-content: center;
    flex-direction: column; gap: 5px;
    background: #ffffff; border: 1.5px solid #e5e5e5; border-radius: 8px; cursor: pointer;
  }
  .layout.sin-menu .btn-traer span { display: block; width: 20px; height: 2px; background: #111111; border-radius: 2px; }
  /* CON EL MENÚ REPLEGADO, EL RELLENO VA DE LOS DOS LADOS ⟨27/8⟩

     Aquí decía `padding-left: 76px` a secas, para hacerle lugar al botón
     flotante que trae el menú de vuelta. Con el contenido pegado a la
     izquierda eso no se notaba; con el contenido centrado sí: 76px de un solo
     lado empujan la columna 38px a la derecha y todo queda descuadrado.

     Arriba de 1260px la columna ya se centra tan adentro que el botón no le
     estorba, así que el relleno vuelve a los 32px normales. Por debajo, se le
     hace lugar al botón de los DOS lados, para que la columna no se mueva. */
  .layout.sin-menu .contenido { padding-left: 32px; padding-right: 32px; }
}

@media (min-width: 861px) and (max-width: 1259px) {
  .layout.sin-menu .contenido { padding-left: 76px; padding-right: 76px; }
}

/* Quien prefiere que nada se mueva, no ve animaciones. */
@media (prefers-reduced-motion: reduce) {
  .menu, .btn-menu span { transition: none; }
}