/* ==========================================================================
   GrupoMTM — Tema compartido (login, registro, instalación y panel)
   Va DESPUÉS de styles.css y sidebar-vertical.css; requiere base.css.
   Unifica: tipografía, rojo de marca, azulejo y logos con el Home.
   ========================================================================== */

:root {
  --red: var(--mtm-red);
  --red-dark: var(--mtm-red-deep);
  --danger: var(--mtm-red);
  --font-ui: var(--mtm-font-body);
  --bg: var(--mtm-paper);
  --line: rgba(17, 17, 17, 0.14);
}

body {
  font-family: var(--mtm-font-body);
  isolation: isolate;
}

/* ---------- Azulejo de fondo (marca de agua fija en todo el sitio) ---------- */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: var(--mtm-azulejo);
  background-size: var(--mtm-azulejo-size);
  background-repeat: repeat;
  opacity: 0.07;
  pointer-events: none;
}

/* ---------- Títulos: Jost liviano, como el Home ---------- */

.topbar h1,
.topbar-title,
.section-heading h2,
.install-panel h1,
.inventory-dashboard h1,
.inventory-dashboard h2 {
  font-family: var(--mtm-font-body);
  font-weight: 300;
  text-transform: none;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.topbar h1 { font-size: clamp(2.4rem, 4.6vw, 4.6rem); }

.eyebrow {
  font-family: var(--mtm-font-body);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mtm-red);
}

input, select, textarea,
.field span {
  font-family: var(--mtm-font-body);
}

/* ---------- Botones ---------- */

.button {
  font-family: var(--mtm-font-body);
  font-weight: 400;
  letter-spacing: 0.16em;
  border-color: var(--mtm-red);
  background: var(--mtm-red);
}

.button:hover {
  border-color: var(--mtm-red-deep);
  background: var(--mtm-red-deep);
}

.button.secondary {
  border-color: var(--mtm-red);
  color: var(--mtm-red);
  background: transparent;
}

.button.secondary:hover {
  color: #fff;
  background: var(--mtm-red);
}

input:focus, select:focus, textarea:focus {
  border-color: var(--mtm-red);
  outline: 3px solid rgba(176, 20, 36, 0.12);
}

/* ---------- Login / Registro / Instalación ---------- */

.install-page {
  background: transparent;
}

.auth-page {
  background: var(--mtm-paper);
}

.auth-page::before {
  /* el azulejo se ve entero detrás del formulario */
  z-index: 0;
  inset: 0;
  background: var(--mtm-azulejo) repeat;
  background-size: var(--mtm-azulejo-size);
  opacity: 0.16;
}

.auth-screen {
  background: transparent;
}

.panel.auth-panel {
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: 0 24px 70px rgba(120, 10, 24, 0.14);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding: clamp(28px, 5vw, 48px);
}

.auth-panel form { flex-direction: column; flex-wrap: nowrap; gap: 18px; }
.auth-panel form .field { width: 100%; }
.auth-panel .eyebrow { margin: 0 0 14px; }
.auth-panel h1 { margin: 0 0 24px; }

/* marco fino interior, igual que la tarjeta de cookies */
.auth-panel::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(120, 10, 24, 0.22);
  border-radius: 10px;
  pointer-events: none;
}

.auth-logo {
  width: 110px;
  height: auto;
}

.auth-panel h1 {
  font-family: var(--mtm-font-script);
  font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: 0;
  text-align: center;
  color: var(--mtm-red-deep);
}

.auth-panel .eyebrow { text-align: center; }

/* Cortina de entrada: papel + azulejo, logo rojo */
.auth-intro {
  background:
    linear-gradient(rgba(243, 241, 234, 0.9), rgba(243, 241, 234, 0.9)),
    var(--mtm-azulejo) center / var(--mtm-azulejo-size) repeat;
  background-color: var(--mtm-paper);
}

.auth-intro img { filter: none; }

.auth-loading__bar { background: rgba(120, 10, 24, 0.14); box-shadow: none; }
.auth-loading__fill { background: var(--mtm-red); box-shadow: none; }
.auth-loading__label { font-family: var(--mtm-font-body); font-weight: 400; color: rgba(17, 17, 17, 0.6); }
.auth-loading__pct { font-family: var(--mtm-font-body); font-weight: 400; color: var(--mtm-red-deep); }

/* ---------- Panel (index.php) ---------- */

body { background: var(--mtm-paper) !important; }
.app-shell { background: transparent !important; }

.panel {
  background: rgba(255, 255, 255, 0.9);
  border-color: var(--line);
}

.topbar-logo { width: 64px; height: auto; }

/* Sidebar vertical */
.vertical-sidebar nav {
  background: #e8e3da;
  border-right: 1px solid var(--line);
}

.sidebar__link.active {
  background: var(--mtm-red);
  color: #fff;
}

.sidebar__link.active,
.sidebar__link.active .text,
.sidebar__link.active:hover { color: #fff; }

.sidebar__link.active .icon svg { fill: #fff; }

.sidebar__link:hover,
.sidebar__group-summary:hover { color: var(--mtm-red); }

.sidebar__divider { border-top-color: var(--line); }

.grupomtm-logo { object-fit: contain; }

/* Franja de azulejo al pie del sidebar */
.vertical-sidebar nav { position: relative; overflow: hidden; }

.vertical-sidebar nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;
  background: var(--mtm-azulejo) repeat-x center / auto 100%;
  opacity: 0.9;
  pointer-events: none;
}