/**
 * MSOFT DEL CARIBE — capa corporativa sobre GastroPro
 *
 * El producto conserva su identidad (naranja, oscuro/claro); esto le pone la
 * firma de la empresa: el pie con lo que el sistema garantiza y un tema
 * claro con la paleta corporativa.
 * Mismo patrón que ExchangePro, cambiando el color del producto.
 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&display=swap');

:root {
  --msoft-green: #8DC63F;
  --msoft-green-dark: #72a832;
  --msoft-green-darker: #5a8520;
  --msoft-green-light: #eef8e0;
  --msoft-black: #1a1a1a;
  --msoft-gray: #666666;
  --msoft-gray-light: #999999;
  --msoft-border: #e5e5e5;
  --font-corp: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
}

/* —— Tema claro con la paleta de la empresa ——
   Con el guard :not([data-theme="dark"]): un :root a secas empata en
   especificidad con [data-theme="dark"] y, al cargarse después, se lo comería. */
:root:not([data-theme="dark"]) {
  --bg: #f7f7f7;
  --bg-elev: #ffffff;
  --bg-soft: #f0f0f0;
  --ink: var(--msoft-black);
  --muted: #666666;
  --line: var(--msoft-border);
  --shadow: 0 1px 2px rgba(26, 26, 26, .05), 0 4px 16px rgba(26, 26, 26, .05);
}

/* El sello de MSOFT vivía aquí, en el menú lateral. Se quitó porque no
   llevaba a ningún sitio: la marca de la casa está en el pie, que se ve
   siempre y ahí sí tiene sentido. */

/* —— Pie corporativo —— */
.msoft-footer {
  background: linear-gradient(180deg, #101010 0%, #1a1a1a 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding: 0.6rem 1rem;
  margin-top: auto;
  flex-shrink: 0;
}
.msoft-footer-inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr) auto;
  gap: 0.75rem 1.25rem;
  align-items: center;
  max-width: 1500px;
  margin: 0 auto;
}
.msoft-footer-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-family: var(--font-corp);
}
.msoft-footer-icon {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: rgba(141, 198, 63, 0.12);
  color: var(--msoft-green);
}
.msoft-footer-icon svg { width: 15px; height: 15px; }
.msoft-footer-item strong {
  display: block;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: #8a8a8a;
  margin-bottom: 0.15rem;
}
.msoft-footer-item p {
  margin: 0;
  font-size: 0.62rem;
  color: #d4d4d4;
  line-height: 1.3;
}

.msoft-footer-brands {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.msoft-brand-block {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.msoft-brand-block .brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--accent-grad);
  color: #1a1a1a;
  flex: 0 0 auto;
}
.msoft-brand-block img { flex: 0 0 auto; height: 32px; width: auto; }
.msoft-brand-text {
  display: grid;
  gap: 0.05rem;
  font-family: var(--font-corp);
}
.msoft-brand-text strong {
  font-size: 0.86rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.msoft-brand-text strong span { color: var(--accent-ink); }
.msoft-brand-text .msoft-corp {
  font-size: 0.74rem;
  letter-spacing: 0.02em;
}
.msoft-brand-text > span {
  font-size: 0.6rem;
  color: #9a9a9a;
  line-height: 1.2;
}
.msoft-footer-divider {
  width: 1px;
  height: 34px;
  background: rgba(255, 255, 255, 0.12);
}

/* El pie vive dentro del contenido, que es más estrecho que la ventana cuando
   el menú está desplegado: manda el ancho del contenedor, no el del monitor. */
.msoft-footer { container-type: inline-size; }

.msoft-footer-inner { grid-template-columns: 1fr auto; }
.msoft-footer-item:nth-child(n + 2) { display: none; }

@container (min-width: 780px) {
  .msoft-footer-inner { grid-template-columns: repeat(2, 1fr) auto; }
  .msoft-footer-item:nth-child(-n + 2) { display: flex; }
}
@container (min-width: 1080px) {
  .msoft-footer-inner { grid-template-columns: repeat(3, 1fr) auto; }
  .msoft-footer-item:nth-child(-n + 3) { display: flex; }
}
@container (min-width: 1460px) {
  .msoft-footer-inner { grid-template-columns: repeat(5, 1fr) auto; }
  /* Mismo peso que la regla que las oculta: una consulta de contenedor no
     añade especificidad, así que el selector tiene que empatar. */
  .msoft-footer-item:nth-child(-n + 5) { display: flex; }
}

/* Sin soporte de container queries, se reparte por ventana */
@supports not (container-type: inline-size) {
  .msoft-footer-item { display: flex; }
  .msoft-footer-inner { grid-template-columns: repeat(3, 1fr) auto; }
  @media (min-width: 1700px) {
    .msoft-footer-inner { grid-template-columns: repeat(5, 1fr) auto; }
  }
}

.msoft-corp { white-space: nowrap; }

/* —— El pie se reserva su sitio —— */
.app-shell { min-height: 100vh; }
.gp-content-wrap {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.gp-content-wrap .app-main { flex: 1; }
.ayb-login-wrap { display: flex; flex-direction: column; }

/* —— Marca del lateral con el tono corporativo —— */
.gp-brand-text em {
  font-family: var(--font-corp);
  letter-spacing: 0.01em;
}

/* ——————————————————————————————————————————————————————
   Tema claro: el lateral también es claro
   Es el patrón de ExchangePro — en modo claro la aplicación
   es clara entera, con la marca sosteniendo el color.
   —————————————————————————————————————————————————————— */
:root:not([data-theme="dark"]) .gp-sidebar {
  background: #ffffff;
  color: var(--msoft-gray);
  border-right: 1px solid var(--msoft-border);
}
:root:not([data-theme="dark"]) .gp-brand {
  border-bottom: 1px solid var(--msoft-border);
}
:root:not([data-theme="dark"]) .gp-brand-text strong { color: var(--msoft-black); }
:root:not([data-theme="dark"]) .gp-brand-text em { color: var(--msoft-gray-light); }

:root:not([data-theme="dark"]) .gp-nav-section { color: var(--msoft-gray-light); }
:root:not([data-theme="dark"]) .gp-nav-btn { color: #4a4a4a; }
:root:not([data-theme="dark"]) .gp-nav-btn:hover {
  background: var(--bg-soft);
  color: var(--msoft-black);
}
:root:not([data-theme="dark"]) .gp-nav-btn.active {
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-left-color: var(--accent);
}
:root:not([data-theme="dark"]) .gp-nav-btn.active svg { color: var(--accent-ink); }

:root:not([data-theme="dark"]) .gp-user-card {
  background: var(--bg-soft);
  border-top: 1px solid var(--msoft-border);
}
:root:not([data-theme="dark"]) .gp-user-card-info strong { color: var(--msoft-black); }
:root:not([data-theme="dark"]) .gp-user-card-info span,
:root:not([data-theme="dark"]) .gp-user-card-info em { color: var(--msoft-gray); }

:root:not([data-theme="dark"]) .topbar {
  background: #ffffff;
  border-bottom: 1px solid var(--msoft-border);
}

/* ——————————————————————————————————————————————————————
   El pie siempre a la vista
   La pantalla se reparte: barra arriba, pie abajo y el
   contenido desplazándose en medio. Así la firma no queda
   al final de un documento que hay que recorrer.
   —————————————————————————————————————————————————————— */
html, body { height: 100%; }

.app-shell {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}
.gp-content-wrap {
  height: 100vh;
  height: 100dvh;
  min-width: 0;
  overflow: hidden;
}
.gp-content-wrap .app-main {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.msoft-footer { flex: 0 0 auto; }

/* El punto de venta ya vive dentro del área que scrollea */
.pos-layout { height: 100%; }

/* La pantalla de entrada, igual: el pie abajo sin recorrer nada */
.ayb-login-wrap {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
.ayb-login-inner {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* Pantallas bajas: el pie se queda con las marcas y suelta el resto */
@media (max-height: 700px) {
  .msoft-footer { padding: 0.4rem 1rem; }
  .msoft-footer-item { display: none !important; }
  .msoft-footer-inner { grid-template-columns: 1fr; justify-items: center; }
}

/* ——————————————————————————————————————————————————————
   Pie: acabado como el de ExchangePro
   Iconos en recuadro, textos que se leen de un vistazo y
   las dos marcas con el peso que les toca.
   —————————————————————————————————————————————————————— */
.msoft-footer {
  background: linear-gradient(180deg, #0b0b0b 0%, #151515 100%);
  padding: 0.75rem 1.25rem;
}
.msoft-footer-inner { gap: 0.75rem 1.5rem; }

.msoft-footer-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid rgba(141, 198, 63, 0.35);
}
.msoft-footer-icon svg { width: 16px; height: 16px; }

.msoft-footer-item { gap: 0.6rem; align-items: center; }
.msoft-footer-item strong {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: #9a9a9a;
  margin-bottom: 0.2rem;
}
.msoft-footer-item p {
  font-size: 0.68rem;
  color: #e4e4e4;
  line-height: 1.35;
}

.msoft-footer-brands { gap: 1.1rem; }
.msoft-brand-block { gap: 0.6rem; }
.msoft-brand-block .brand-mark { width: 38px; height: 38px; border-radius: 10px; }
.msoft-brand-block img { height: 38px; }
.msoft-brand-text strong { font-size: 1rem; }
.msoft-brand-text .msoft-corp { font-size: 0.82rem; }
.msoft-brand-text > span {
  font-size: 0.64rem;
  color: #a6a6a6;
  max-width: 11rem;
}
.msoft-footer-divider { height: 40px; }


/* El nombre del producto manda en el bloque de marca, como en el modelo */
.msoft-brand-text strong { font-size: 1.1rem; }
.msoft-brand-text .msoft-corp { font-size: 0.84rem; }

/* ——————————————————————————————————————————————————————
   Barra superior al patrón ExchangePro
   Dónde estoy · qué hora es · qué pide atención · quién soy
   —————————————————————————————————————————————————————— */
.gp-migas {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  font-family: var(--font-corp);
  font-size: 0.82rem;
  overflow: hidden;
}
.gp-miga-tenant { color: var(--accent-ink); font-weight: 600; white-space: nowrap; }
.gp-miga-sucursal { color: var(--muted); white-space: nowrap; }
.gp-miga-sep { color: var(--line); }
.gp-migas strong {
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 900px) {
  .gp-miga-tenant, .gp-miga-sucursal, .gp-miga-sep { display: none; }
}

.gp-reloj {
  display: grid;
  gap: 0.05rem;
  text-align: right;
  font-family: var(--font-corp);
  line-height: 1.15;
  margin-right: 0.15rem;
}
.gp-reloj strong { font-size: 0.86rem; font-weight: 700; }
.gp-reloj .muted { font-size: 0.68rem; text-transform: capitalize; }
@media (max-width: 1100px) { .gp-reloj { display: none; } }

/* —— Campana —— */
.gp-avisos-wrap { position: relative; }
.gp-campana { position: relative; }
.gp-campana-num {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 17px;
  height: 17px;
  padding: 0 0.22rem;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  border: 2px solid var(--bg-elev);
}
.gp-avisos-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  width: min(22rem, 90vw);
  z-index: 70;
  padding: 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-elev);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}
.gp-avisos-head {
  margin: 0 0.25rem 0.4rem;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}

/* Ficha de quien está dentro, con su correo debajo */
.gp-user-pill-text small {
  max-width: 13rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

/* ——————————————————————————————————————————————————————
   Tema claro: el acento es el verde de la casa
   El verde es la marca de MSOFT y manda en la interfaz clara,
   igual que en ExchangePro. El naranja sigue siendo el color
   de GastroPro en el tema oscuro.
   —————————————————————————————————————————————————————— */
:root:not([data-theme="dark"]) {
  /* Sobre blanco hace falta el verde medio para que el texto se lea */
  --accent: #72a832;
  --accent-soft: #eef8e0;
  --accent-ink: #4d7a1c;
  --accent-grad: linear-gradient(135deg, #8DC63F, #a8d86a);
  --panel-glow: rgba(141, 198, 63, 0.12);
  --success-btn: #5a8520;
}

/* El «Pro» de la marca acompaña al acento del tema */
:root:not([data-theme="dark"]) .gp-brand-text span,
:root:not([data-theme="dark"]) .msoft-brand-text strong span { color: var(--accent-ink); }

/* ——————————————————————————————————————————————————————
   Los estados de mesa no siguen a la marca
   Si «ocupada» tomara el acento, en claro habría dos verdes —
   libre y ocupada — y el salón dejaría de leerse de un vistazo.
   —————————————————————————————————————————————————————— */
:root { --estado-ocupada: #e06b16; --estado-ocupada-ink: #9a4508; }
[data-theme="dark"] { --estado-ocupada: #ff8a2a; --estado-ocupada-ink: #ffb45c; }

.plano-mesa.OCCUPIED {
  border-color: var(--estado-ocupada);
  background: color-mix(in srgb, var(--estado-ocupada) 10%, var(--bg-elev));
}
.plano-mesa.OCCUPIED .plano-mesa-total { color: var(--estado-ocupada-ink); }
.dot.occupied { background: var(--estado-ocupada); }
.plano-mesa.active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* Las cabeceras de módulo llevaban un crema anaranjado; en claro el tinte
   viene del verde, como el resto de la interfaz. */
:root:not([data-theme="dark"]) .module-hero,
:root:not([data-theme="dark"]) .analytics-hero {
  background:
    radial-gradient(700px 180px at 85% -30%, color-mix(in srgb, var(--accent) 18%, transparent), transparent),
    linear-gradient(135deg, #f4faec, #ffffff);
}

/* El icono de la marca en el lateral también sigue al acento del tema */
:root:not([data-theme="dark"]) .gp-brand .brand-mark {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

/* ——————————————————————————————————————————————————————
   Marca del lateral con el mismo peso que en ExchangePro
   El nombre manda y el descriptor se dobla en dos líneas en
   vez de cortarse a media palabra.
   —————————————————————————————————————————————————————— */
.gp-brand { align-items: flex-start; gap: 0.7rem; }
.gp-brand-text { white-space: normal; }
.gp-brand-text strong {
  font-size: 1.25rem;
  line-height: 1.1;
  white-space: nowrap;
}
.gp-brand-text em {
  font-size: 0.68rem;
  line-height: 1.3;
  white-space: normal;
  margin-top: 0.15rem;
}
.gp-brand .brand-mark { margin-top: 0.15rem; }

/* ——————————————————————————————————————————————————————
   La marca del lateral, la misma que la del pie
   Eran dos: un cuadrado redondeado con el icono tintado
   arriba y un círculo verde lleno abajo. Es la misma marca,
   así que se ve igual en los dos sitios.
   —————————————————————————————————————————————————————— */
.gp-brand .brand-mark,
:root:not([data-theme="dark"]) .gp-brand .brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--accent-grad);
  color: #16210f;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
.gp-brand .brand-mark svg { width: 21px; height: 21px; }

/* Con el menú recogido la marca manda sola: centrada y sin el texto */
.app-shell.sidebar-collapsed .gp-brand { justify-content: center; padding-left: 0; padding-right: 0; }
.app-shell.sidebar-collapsed .gp-brand .brand-mark { margin-top: 0; }

/* ——————————————————————————————————————————————————————
   La entrada no se desplaza a los lados, pero sí hacia abajo
   El halo del panel se sale 80 px por la derecha y saca una
   barra horizontal con su franja muerta. Se recorta sólo a lo
   ancho: con «overflow: hidden» a secas, una tarjeta más alta
   que la pantalla —el asistente de registro en el paso del
   plan— quedaba cortada y sin forma de bajar.
   —————————————————————————————————————————————————————— */
.ayb-login-panel,
.ayb-login-hero {
  overflow-x: hidden;
  overflow-y: auto;
}

/* Centrado con márgenes automáticos y no con align-items: centrando
   de la otra forma, lo que no cabe se corta por arriba y no se puede
   alcanzar ni desplazándose. */
.ayb-login-panel,
.ayb-login-hero { align-items: start; }
.ayb-login-panel-inner,
.ayb-login-hero-content { margin-block: auto; }
.ayb-login-inner { overflow-x: hidden; }
.ayb-login-wrap { overflow-x: hidden; max-width: 100%; }
body { overflow-x: hidden; }

/* El pie de la entrada llena el ancho, como el resto de la pantalla */
#view-auth .msoft-footer-inner { max-width: none; }

/* ——————————————————————————————————————————————————————
   Los dos sellos, con la misma forma
   El de MSOFT venía de un JPEG con el fondo blanco pegado: por eso
   se veía como un recorte cuadrado sobre el pie oscuro. Ahora va el
   PNG con alfa dentro de una píldora sin borde, y el de GastroPro
   se redondea igual para que los dos hagan pareja.
   —————————————————————————————————————————————————————— */
.msoft-brand-block .brand-mark {
  border: 0;
  border-radius: 999px;
}
.msoft-brand-block img {
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  padding: 0.2rem 0.45rem;
  object-fit: contain;
}