@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

:root{
--forest:#174d3d;--forest-2:#236e57;--forest-3:#0f392d;--cream:#fff8ed;
--paper:#fff;--coral:#d66a45;--gold:#e0a93b;--ink:#17352d;--muted:#708078;
--line:rgba(23,77,61,.12);--success:#24845f;--danger:#c54f35;--warning:#9b6a12;
--shadow:0 24px 70px rgba(23,53,45,.13);--radius:28px
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"DM Sans",system-ui,sans-serif;color:var(--ink);background:var(--cream)}
button,input{font:inherit}
button{cursor:pointer}
h1,h2,h3,strong{font-family:"Manrope",system-ui,sans-serif}
.eyebrow{text-transform:uppercase;letter-spacing:.13em;font-size:.72rem;font-weight:800;color:var(--coral)}
.muted{color:var(--muted)}
.brand{display:flex;align-items:center;gap:12px}
.brand strong{display:block}.brand small{display:block;color:var(--muted)}
.brand-mark{width:46px;height:46px;display:grid;place-items:center;border-radius:16px;color:#fff;font-weight:900;background:linear-gradient(145deg,var(--forest),var(--forest-2));box-shadow:0 12px 25px rgba(23,77,61,.2)}
.brand-light{color:#fff}.brand-light small{color:rgba(255,255,255,.65)}.brand-mark-light{background:rgba(255,255,255,.14);box-shadow:none}
.guest-body{min-height:100vh}
.login-page{min-height:100vh;display:grid;grid-template-columns:1.08fr .92fr}
.login-showcase{position:relative;overflow:hidden;padding:46px;background:linear-gradient(140deg,var(--forest-3),var(--forest-2));color:#fff}
.login-showcase:before,.login-showcase:after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.06)}
.login-showcase:before{width:420px;height:420px;right:-160px;top:-140px}.login-showcase:after{width:320px;height:320px;left:-130px;bottom:-120px}
.showcase-inner{position:relative;z-index:1;min-height:calc(100vh - 92px);display:flex;flex-direction:column;justify-content:space-between}
.showcase-copy{max-width:680px;margin:auto 0}
.showcase-pill{display:inline-flex;padding:9px 14px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.08);font-weight:700}
.showcase-copy h1{margin:22px 0 18px;font-size:clamp(3rem,6vw,6.3rem);line-height:.95;letter-spacing:-.055em}
.showcase-copy p{max-width:600px;margin:0;color:rgba(255,255,255,.76);font-size:1.18rem;line-height:1.7}
.showcase-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.showcase-stats article{padding:18px;border:1px solid rgba(255,255,255,.1);border-radius:20px;background:rgba(255,255,255,.07)}
.showcase-stats strong{display:block;font-size:1.45rem}.showcase-stats span{color:rgba(255,255,255,.65);font-size:.9rem}
.login-panel{display:grid;place-items:center;padding:34px;background:radial-gradient(circle at 70% 15%,rgba(224,169,59,.18),transparent 25%),var(--cream)}
.login-card{width:min(100%,520px);padding:clamp(28px,5vw,52px);border:1px solid var(--line);border-radius:34px;background:rgba(255,255,255,.94);box-shadow:var(--shadow)}
.mobile-brand{display:none}
.login-card h2{margin:10px 0 6px;font-size:clamp(2.2rem,5vw,3.4rem);letter-spacing:-.04em}
.login-form{display:grid;gap:19px;margin-top:30px}
.field{display:grid;gap:8px}.field>span{font-weight:700}
.field-control{display:flex;align-items:center;min-height:58px;border:1.5px solid var(--line);border-radius:18px;background:#fff;transition:.2s}
.field-control:focus-within{border-color:var(--forest-2);box-shadow:0 0 0 4px rgba(35,110,87,.1)}
.field-icon{padding-left:17px;color:var(--forest-2)}
.field-control input{width:100%;border:0;outline:0;padding:0 14px;background:transparent;color:var(--ink)}
.password-toggle{border:0;background:transparent;padding:0 16px;color:var(--forest);font-weight:800}
.field-error{min-height:17px;color:var(--danger)}
.primary-button{min-height:58px;border:0;border-radius:18px;color:#fff;font-weight:800;background:linear-gradient(135deg,var(--forest),var(--forest-2));box-shadow:0 15px 30px rgba(23,77,61,.2)}
.primary-button:disabled{opacity:.72;cursor:wait}
.spinner{display:inline-block;width:18px;height:18px;margin-left:8px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.login-message{min-height:22px;padding:0}.login-message.error,.login-message.success{padding:13px 15px;border-radius:14px}.login-message.error{color:#8a2e18;background:#fff0eb}.login-message.success{color:#176247;background:#eaf8f1}
.security-note{display:flex;gap:12px;margin-top:24px;padding:16px;border-radius:16px;background:#f5f8f6;color:var(--muted);font-size:.92rem}.security-note p{margin:0}
.flash{margin-bottom:16px;padding:14px 16px;border-radius:15px}.flash-success{color:#176247;background:#eaf8f1}.flash-warning{color:#81580d;background:#fff3dc}.flash-error{color:#8a2e18;background:#fff0eb}.flash-info{background:#eef5ff;color:#335d88}
.app-body{min-height:100vh;background:#f7f4ed}
.app-shell{display:grid;grid-template-columns:280px minmax(0,1fr);min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:24px 18px;background:#fff;border-right:1px solid var(--line);z-index:30}
.nav-list{display:grid;gap:7px;margin-top:38px}.nav-item{width:100%;display:flex;align-items:center;gap:12px;min-height:48px;padding:0 14px;border:0;border-radius:15px;background:transparent;color:var(--ink);text-decoration:none;text-align:left}
.nav-item:hover,.nav-item.active{background:#edf6f2;color:var(--forest);font-weight:800}.nav-item em{margin-left:auto;font-size:.67rem;color:var(--muted);font-style:normal}.nav-item.disabled{opacity:.62;cursor:not-allowed}
.logout-form{margin-top:auto}.logout-button{width:100%;min-height:48px;border:1px solid var(--line);border-radius:15px;background:#fff;color:var(--danger);font-weight:800}
.app-main{min-width:0}.topbar{height:84px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;background:rgba(247,244,237,.88);backdrop-filter:blur(16px);position:sticky;top:0;z-index:20;border-bottom:1px solid rgba(23,77,61,.06)}
.topbar-title{font-size:1.15rem}.user-chip{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:16px;background:#fff;border:1px solid var(--line)}
.avatar{width:38px;height:38px;display:grid;place-items:center;border-radius:13px;color:#fff;font-weight:900;background:linear-gradient(145deg,var(--coral),#e9885f)}
.user-chip-text strong,.user-chip-text small{display:block}.user-chip-text small{color:var(--muted)}
.content-area{padding:30px;max-width:1500px;margin:0 auto}
.dashboard-hero{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;padding:clamp(28px,5vw,52px);border-radius:32px;color:#fff;background:linear-gradient(135deg,var(--forest),var(--forest-2));box-shadow:0 24px 60px rgba(23,77,61,.2)}
.dashboard-hero .eyebrow{color:#b7e9d4}.dashboard-hero h1{margin:10px 0 12px;font-size:clamp(2.3rem,5vw,4.8rem);letter-spacing:-.05em}.dashboard-hero p{max-width:700px;margin:0;color:rgba(255,255,255,.75);line-height:1.7}
.role-card{min-width:220px;padding:20px;border:1px solid rgba(255,255,255,.14);border-radius:22px;background:rgba(255,255,255,.1)}.role-card span,.role-card strong,.role-card small{display:block}.role-card strong{margin:7px 0;font-size:1.35rem}.role-card small{color:rgba(255,255,255,.7)}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:34px 0 16px}.section-heading h2{margin:6px 0 0;font-size:2rem}.status-badge{padding:9px 13px;border-radius:999px;color:var(--forest);background:#e5f3ed;font-weight:800;font-size:.82rem}
.module-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.module-card{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:start;padding:22px;border:1px solid var(--line);border-radius:24px;background:#fff;box-shadow:0 12px 34px rgba(23,53,45,.06)}
.module-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:16px;color:#fff;font-weight:900;background:linear-gradient(145deg,var(--coral),#e88a63)}.module-card h3{margin:8px 0 5px}.module-card p{margin:0;color:var(--muted);line-height:1.55}.module-tag{font-size:.72rem;color:var(--forest);font-weight:800}.module-arrow{color:var(--muted)}.disabled-card{opacity:.86}
.coming-banner{display:flex;align-items:center;gap:16px;margin-top:22px;padding:22px;border:1px solid rgba(224,169,59,.2);border-radius:24px;background:#fff1d8}.coming-banner p{margin:5px 0 0;color:var(--muted)}.coming-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:16px;background:#ffe2aa;color:#9b6a12;font-size:1.3rem}
.mobile-nav{display:none}.mobile-only{display:none}.icon-button{border:0;background:transparent;font-size:1.4rem}
.validation-body{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 10% 10%,rgba(224,169,59,.2),transparent 28%),var(--cream)}
.validation-card{width:min(100%,650px);padding:52px;border-radius:32px;background:#fff;text-align:center;box-shadow:var(--shadow)}.validation-mark{width:72px;height:72px;display:grid;place-items:center;margin:0 auto 20px;border-radius:24px;color:#fff;font-size:2rem;background:var(--success)}.validation-card h1{font-size:clamp(2rem,5vw,3.6rem)}.validation-card p{color:var(--muted);line-height:1.7}.primary-link{display:inline-flex;align-items:center;justify-content:center;min-height:52px;margin-top:20px;padding:0 20px;border-radius:16px;color:#fff;text-decoration:none;font-weight:800;background:var(--forest)}
@media(max-width:1000px){.login-page{grid-template-columns:1fr}.login-showcase{display:none}.mobile-brand{display:flex;align-items:center;gap:12px;margin-bottom:34px}.module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;left:0;transform:translateX(-105%);transition:.25s;width:min(86vw,310px);box-shadow:var(--shadow)}.sidebar.open{transform:translateX(0)}.mobile-only{display:inline-flex}.mobile-nav{position:fixed;left:12px;right:12px;bottom:12px;z-index:25;display:grid;grid-template-columns:repeat(2,1fr);padding:8px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.94);backdrop-filter:blur(16px);box-shadow:0 14px 40px rgba(23,53,45,.14)}.mobile-nav-item{display:grid;place-items:center;gap:3px;min-height:50px;border:0;border-radius:14px;background:transparent;color:var(--muted);text-decoration:none}.mobile-nav-item.active{color:#fff;background:var(--forest)}.content-area{padding-bottom:95px}}
@media(max-width:700px){.login-panel{padding:18px}.login-card{padding:26px 21px;border-radius:26px}.topbar{padding:0 16px}.user-chip-text{display:none}.content-area{padding:18px}.dashboard-hero{grid-template-columns:1fr}.role-card{min-width:0}.module-grid{grid-template-columns:1fr}.section-heading{align-items:flex-start;flex-direction:column}.showcase-stats{grid-template-columns:1fr}}

/* ==========================================================================
   SPRINT 5 — HOTFIX GLOBAL MOBILE NAV 2026-08-10
   Unifica la navegación inferior móvil en una sola fila compacta.
   No modifica rutas, permisos, JavaScript ni comportamiento funcional.
   ========================================================================== */
@media (max-width: 1000px) {
  .mobile-nav {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 950 !important;

    width: auto !important;
    height: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;

    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-template-rows: 1fr !important;
    align-items: stretch !important;
    gap: 4px !important;

    margin: 0 !important;
    padding: 6px !important;
    overflow: hidden !important;

    border: 1px solid var(--line) !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.96) !important;
    backdrop-filter: blur(16px);
    box-shadow: 0 14px 40px rgba(23,53,45,.16) !important;
    box-sizing: border-box !important;
  }

  .mobile-nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 56px !important;
    min-height: 56px !important;

    margin: 0 !important;
    padding: 6px 3px !important;
    overflow: hidden !important;

    border: 0;
    border-radius: 13px !important;
    background: transparent;
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  .mobile-nav-item.active {
    color: #fff !important;
    background: var(--forest) !important;
  }

  .mobile-nav-item span {
    display: block !important;
    font-size: 16px !important;
    line-height: 1 !important;
  }

  .mobile-nav-item small {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
  }

  /* Reserva inferior global para que la barra nunca cubra el contenido. */
  .content-area {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (max-width: 380px) {
  .mobile-nav {
    left: 6px !important;
    right: 6px !important;
    gap: 2px !important;
  }

  .mobile-nav-item {
    padding-inline: 2px !important;
  }

  .mobile-nav-item small {
    font-size: 9px !important;
  }
}

/* ==========================================================================
   SPRINT 5 — HOTFIX MOBILE SIDEBAR SCROLL / LOGOUT 2026-08-10
   Permite llegar hasta Cerrar sesión y evita que mobile-nav cubra el sidebar.
   ========================================================================== */
@media (max-width: 1000px) {
  .sidebar {
    top: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;

    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 1200 !important;
  }

  .sidebar.open {
    transform: translateX(0) !important;
  }

  /* El listado puede crecer sin expulsar el botón de salida. */
  .sidebar .nav-list {
    flex: 0 0 auto;
  }

  /* En móvil no dependemos de margin-top:auto, porque un menú largo
     necesita que el logout forme parte del flujo desplazable. */
  .sidebar .logout-form {
    margin-top: 18px !important;
    flex: 0 0 auto;
    padding-bottom: 8px;
  }

  .sidebar .logout-button {
    position: relative;
    z-index: 1;
  }

  /* Mientras el sidebar está abierto queda visualmente por encima
     de la navegación inferior global. */
  .mobile-nav {
    z-index: 950 !important;
  }
}

@media (max-width: 700px) {
  .sidebar {
    width: min(86vw, 310px) !important;
    padding-top: 20px !important;
  }
}