/* ============================================================================
   FAMAGO · Sistema de diseño compartido del Portal y sus módulos
   ----------------------------------------------------------------------------
   Una sola fuente de verdad para colores, tipografía y componentes.
   Todas las páginas (portal, admin y módulos) enlazan este archivo.
   Para cambiar un color en TODO el sistema, se cambia acá.
   ============================================================================ */

:root {
  /* Paleta de marca (azul del logo Famago) */
  --azul-osc: #1b2a7d;   /* azul marino del logo: headers, marca, títulos */
  --azul: #1a4d8f;       /* azul de acción: botones, links */
  --azul-suave: #eef3fb; /* fondos suaves de pills/chips */
  --gris-bg: #f4f6f9;    /* fondo general de páginas */
  --borde: #dde3ea;
  --verde: #1f9254;
  --rojo: #c0392b;
  --ambar: #a16207;
  --texto: #1f2a37;
  --texto-suave: #66707d;
  --blanco: #ffffff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: var(--gris-bg);
  color: var(--texto);
}

.hidden, .oculto { display: none !important; }

/* ---------- Marca ---------- */
.logo-famago {
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--azul-osc);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.logo-famago .chevron { color: var(--azul-osc); font-weight: 800; }
.topbar .logo-famago, .topbar .logo-famago .chevron,
.portal-header .logo-famago, .portal-header .logo-famago .chevron { color: #fff; }

/* ---------- Pantallas centradas (login / sin acceso) ---------- */
.center {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
/* Cajita de login / acceso (angosta y centrada). Antes se llamaba ".card",
   un nombre demasiado genérico que chocaba con las tarjetas de contenido de
   los módulos y los obligaba a anularlo a mano. Ahora tiene su propio nombre
   y ".card" queda libre para el contenido, a lo ancho, sin overrides. */
.auth-card {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 40px;
  width: 100%;
  max-width: 440px;
  text-align: center;
  box-shadow: 0 6px 24px rgba(15, 30, 80, 0.08);
}
.auth-card h1 { font-size: 21px; margin: 0 0 4px; color: var(--azul-osc); }
.auth-card .sub { color: var(--texto-suave); font-size: 14px; margin: 0 0 26px; }

/* ---------- Botones ---------- */
button { font-family: inherit; }
.btn-ms, .btn-pri, .btn-sec, .btn-danger {
  border: 0;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.btn-ms {
  width: 100%;
  background: var(--azul);
  color: #fff;
  padding: 14px 18px;
  font-size: 15px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}
.btn-ms:hover { background: var(--azul-osc); }
.btn-pri { background: var(--azul); color: #fff; }
.btn-pri:hover { background: var(--azul-osc); }
.btn-sec { background: #e8edf4; color: var(--texto); }
.btn-sec:hover { background: #d8e0eb; }
.btn-danger { background: transparent; color: var(--rojo); border: 1px solid #e5b6b0; }
.btn-danger:hover { background: #fbeeec; }
.btn-sm { padding: 6px 10px; font-size: 13px; }
svg.ms { width: 18px; height: 18px; }

/* ---------- Barra superior ---------- */
header.topbar, .portal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  min-height: 52px;   /* altura única del zócalo en TODO el sistema */
  background: var(--azul-osc);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 5;
}
.portal-header .title { font-weight: 700; }
.portal-header .who { font-size: 13px; color: #cdd6f0; display: flex; gap: 12px; align-items: center; }
.portal-header .btn-sec { background: rgba(255,255,255,.14); color: #fff; }
.portal-header .btn-sec:hover { background: rgba(255,255,255,.26); }

/* ---------- Tabs (admin) ---------- */
nav.portal-tabs { display: flex; gap: 6px; padding: 14px 24px 0; flex-wrap: wrap; }
nav.portal-tabs button {
  background: transparent;
  color: var(--texto-suave);
  border: 0;
  border-radius: 8px 8px 0 0;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
nav.portal-tabs button.on {
  background: var(--blanco);
  color: var(--azul-osc);
  border: 1px solid var(--borde);
  border-bottom: 0;
}

/* ---------- Contenido / paneles ---------- */
main.portal-main { padding: 20px 24px 60px; max-width: 1000px; margin: 0 auto; width: 100%; }
.panel {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 0 12px 12px 12px;
  padding: 20px;
}
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------- Formularios ---------- */
.panel input, .panel select, .modal input, .modal select {
  background: var(--blanco);
  border: 1px solid var(--borde);
  color: var(--texto);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 14px;
  font-family: inherit;
}
.panel input:focus, .panel select:focus, .modal input:focus, .modal select:focus {
  outline: 2px solid var(--azul);
  outline-offset: -1px;
}

/* ---------- Tablas ---------- */
.panel table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 14px; }
.panel th { text-align: left; color: var(--texto-suave); font-weight: 600; padding: 8px 10px; border-bottom: 2px solid var(--borde); }
.panel td { padding: 9px 10px; border-bottom: 1px solid #ebeff4; vertical-align: top; }

/* ---------- Pills / chips ---------- */
.pill {
  display: inline-block;
  background: var(--azul-suave);
  border: 1px solid #c9d8ef;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
  margin: 1px 2px;
  color: var(--azul);
}
.pill.sa { border-color: #e3c98a; background: #fdf6e3; color: var(--ambar); }
.pill.app { border-color: #c9d8ef; color: var(--azul); }
.pill.off { border-color: #e3c98a; background: #fdf6e3; color: var(--ambar); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}
.chip.on { border-color: var(--azul); background: var(--azul-suave); color: var(--azul-osc); }

/* ---------- Estados / textos ---------- */
.muted { color: var(--texto-suave); font-size: 13px; }
.ok-flash { color: var(--verde); font-size: 13px; }
.err { color: var(--rojo); font-size: 13px; margin-top: 14px; }

/* ---------- Modal ---------- */
.overlay {
  position: fixed; inset: 0;
  background: rgba(20, 30, 60, .45);
  display: flex; align-items: center; justify-content: center;
  z-index: 10; padding: 20px;
}
.modal {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 24px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow: auto;
}
.modal h2 { margin: 0 0 16px; font-size: 17px; color: var(--azul-osc); }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; color: var(--texto-suave); margin-bottom: 5px; }
.field input, .field select { width: 100%; }
.perm-box { border: 1px solid var(--borde); border-radius: 10px; padding: 12px; margin-bottom: 10px; background: #f8fafc; }
.perm-box .row { margin-bottom: 8px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.switch { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }

/* ---------- Landing: grilla de módulos ---------- */
.hello { font-size: 24px; font-weight: 700; margin: 12px 0 4px; color: var(--azul-osc); }
.hello-sub { color: var(--texto-suave); font-size: 14px; margin: 0 0 28px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.mod {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 24px;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform .12s, border-color .12s, box-shadow .12s;
  box-shadow: 0 2px 8px rgba(15, 30, 80, 0.05);
}
.mod:hover { transform: translateY(-3px); border-color: var(--azul); box-shadow: 0 6px 18px rgba(15, 30, 80, 0.1); }
.mod .icon { font-size: 30px; margin-bottom: 12px; }
.mod .name { font-size: 17px; font-weight: 700; margin-bottom: 6px; color: var(--azul-osc); }
.mod .rol { color: var(--texto-suave); font-size: 13px; }
.mod .alc { margin-top: 10px; }
.admin-link { margin-top: 36px; }
.admin-link a { color: var(--azul); text-decoration: none; font-size: 14px; font-weight: 600; }
.admin-link a:hover { text-decoration: underline; }
.empty { text-align: center; color: var(--texto-suave); padding: 60px 20px; }
.empty .big { font-size: 40px; margin-bottom: 14px; }