/* intranet.css — estilos compartidos para todas las páginas de intranet lospeumos.com */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Inter:wght@400;500;600&display=swap');

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',sans-serif;background:#f4f6f4;min-height:100vh;animation:lp-fadein .3s ease}
a{color:inherit;text-decoration:none}

/* ── Transición de entrada ── */
@keyframes lp-fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes lp-fadeout{from{opacity:1}to{opacity:0}}
body.leaving{animation:lp-fadeout .18s ease forwards}
@media(prefers-reduced-motion:reduce){body,body.leaving{animation:none}}

/* ── Header ── */
.lp-header{display:flex;align-items:center;justify-content:space-between;padding:.85rem 4%;background:#fff;border-bottom:1px solid #eee;border-left:3px solid #3f5b3f;position:sticky;top:0;z-index:100;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.lp-header .left{display:flex;align-items:center;gap:16px}
.lp-header a.back{display:flex;align-items:center;gap:5px;font-size:.82rem;color:#888;transition:color .15s}
.lp-header a.back:hover{color:#3f5b3f}
.lp-header .title{font-family:'DM Serif Display',Georgia,serif;font-size:1.15rem;color:#3f5b3f;font-weight:400;letter-spacing:-.01em}

/* ── User chip ── */
.lp-user{display:flex;align-items:center;gap:10px}
.lp-avatar{width:30px;height:30px;border-radius:50%;background:#e1f5ee;color:#0f6e56;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.lp-name{font-size:.82rem;color:#444;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp-logout{font-size:.78rem;color:#aaa;cursor:pointer;transition:color .15s;white-space:nowrap}
.lp-logout:hover{color:#3f5b3f}

/* ── Auth overlay ── */
#lp-auth-overlay{position:fixed;inset:0;background:#f4f6f4;display:flex;align-items:center;justify-content:center;z-index:9999;transition:opacity .2s}
#lp-auth-overlay.hidden{opacity:0;pointer-events:none}
.lp-spinner{width:36px;height:36px;border:3px solid #dde8dd;border-top-color:#3f5b3f;border-radius:50%;animation:lp-spin .7s linear infinite}
@keyframes lp-spin{to{transform:rotate(360deg)}}

/* ── Catalog ── */
.lp-catalog{padding:2rem 5% 3rem}
.lp-category{margin-bottom:2.5rem}
.lp-category-title{
  font-family:'DM Serif Display',Georgia,serif;
  font-size:1.05rem;
  color:#2d2a26;
  font-weight:400;
  margin-bottom:1rem;
  padding-bottom:.5rem;
  padding-left:.75rem;
  border-left:3px solid #3f5b3f;
  letter-spacing:0;
}
.lp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.1rem}

/* ── Tarjeta ── */
.lp-card{
  background:#fff;
  border-radius:10px;
  padding:1.4rem 1.2rem;
  cursor:pointer;
  box-shadow:0 1px 5px rgba(0,0,0,.05);
  border:1px solid #eee;
  border-left:3px solid transparent;
  transition:border-left-color .15s, box-shadow .15s, background .15s;
  display:block;
}
.lp-card:hover{
  border-left-color:#3f5b3f;
  background:#f7faf7;
  box-shadow:0 4px 14px rgba(63,91,63,.1);
}
.lp-card .material-icons{font-size:22px;color:#9ab89a;margin-bottom:.75rem;display:block}
.lp-card h3{font-size:.97rem;color:#2d2a26;margin-bottom:.3rem;font-weight:600;line-height:1.3}
.lp-card p{font-size:.78rem;color:#aaa;line-height:1.4}

/* ── Vacío ── */
.lp-empty{font-size:.85rem;color:#bbb;text-align:center;margin-top:4rem}

/* ── Responsive ── */
@media(max-width:600px){
  .lp-header{padding:.75rem 5%}
  .lp-name{display:none}
  .lp-catalog{padding:1.5rem 5% 2rem}
}