:root{
  --bg:#f2f5f8;
  --surface:#ffffff;
  --surface-soft:#f7f9fb;
  --line:#d6dee5;
  --text:#1f2937;
  --muted:#64748b;
  --primary:#005a87;
  --primary-dark:#003b5c;
  --primary-light:#e7f1f7;
  --accent:#f2b705;
  --accent-dark:#c99500;
  --success:#2f855a;
  --warning:#d97706;
  --danger:#c53030;
  --shadow:0 12px 30px rgba(0,59,92,.10);
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,Arial,Helvetica,sans-serif;color:var(--text);background:var(--bg)}
button,input{font:inherit}
button,a{transition:.18s ease}
a{color:var(--primary);text-decoration:none}
button{cursor:pointer}
.topbar,.game-header{
  height:72px;background:var(--surface);border-bottom:1px solid var(--line);
  display:flex;align-items:center;padding:0 24px;gap:26px;position:sticky;top:0;z-index:20
}
.brand{display:flex;align-items:center;gap:12px;min-width:235px}
.brand-mark{width:48px;height:48px;border-radius:12px;background:var(--primary);color:white;display:grid;place-items:center;font-weight:800;font-size:13px}
.brand strong,.brand span{display:block}.brand span{font-size:12px;color:var(--muted);margin-top:2px}
.topnav{display:flex;gap:8px;flex:1}.topnav a{padding:10px 14px;color:var(--muted);border-radius:10px;font-weight:600}.topnav a:hover,.topnav a.active{background:var(--primary-light);color:var(--primary)}
.user-chip{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#263640;color:#fff;font-weight:700}
.dashboard-shell{max-width:1440px;margin:0 auto;padding:28px}
.hero-card,.summary-hero{
  background:linear-gradient(125deg,var(--primary-dark),var(--primary));color:#fff;border-radius:24px;padding:38px;
  display:grid;grid-template-columns:1.4fr .8fr;gap:30px;box-shadow:var(--shadow)
}
.hero-card h1,.summary-hero h1{font-size:42px;margin:8px 0 12px}.hero-card p,.summary-hero p{max-width:760px;color:#dcebe8;line-height:1.6}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:800;color:var(--muted)}
.hero-card .eyebrow,.summary-hero .eyebrow{color:#d7eaf4}
.hero-actions{display:flex;gap:12px;margin-top:24px}
.btn{border:0;padding:12px 18px;border-radius:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.btn-primary{background:var(--accent);color:#2f261d}.btn-primary:hover{filter:brightness(.95)}
.btn-secondary{background:#eef2f5;color:var(--text);border:1px solid var(--line)}
.btn-small{padding:8px 12px;font-size:13px}
.hero-metrics{display:grid;gap:12px}.hero-metrics article{background:rgba(255,255,255,.11);padding:18px;border:1px solid rgba(255,255,255,.16);border-radius:14px}.hero-metrics span,.hero-metrics strong{display:block}.hero-metrics span{font-size:12px;color:#cce3df}.hero-metrics strong{font-size:20px;margin-top:5px}
.dashboard-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:22px;margin-top:22px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
.panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.panel-header h1,.panel-header h2{margin:3px 0 0}
.icon-btn{border:1px solid var(--line);background:var(--surface-soft);border-radius:9px;width:34px;height:34px;color:var(--muted)}
.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:14px 12px;border-bottom:1px solid var(--line);font-size:14px}th{font-size:12px;color:var(--muted);text-transform:uppercase}
.badge{padding:5px 9px;border-radius:999px;font-size:11px;font-weight:800}.badge.success{background:#e2f3ea;color:var(--success)}.badge.warning{background:#fff0dc;color:var(--warning)}.badge.danger{background:#fde5e5;color:var(--danger)}.badge.neutral{background:#edf0f2;color:#596570}
.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.quick-grid a,.quick-grid button{border:1px solid var(--line);background:var(--surface-soft);border-radius:12px;padding:18px;text-align:left;color:var(--text)}.quick-grid strong,.quick-grid span{display:block}.quick-grid span{font-size:12px;color:var(--muted);margin-top:6px}
.game-page{height:100vh;overflow:hidden;background:#dfe5e9}
.game-header{height:64px;padding:0 16px;gap:18px}.back-link{font-weight:700}.game-title{min-width:270px}.game-title strong,.game-title span{display:block}.game-title span{font-size:11px;color:var(--muted)}
.game-status{display:flex;gap:8px;margin-left:auto}.game-status>div{min-width:88px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-soft)}.game-status span,.game-status strong{display:block}.game-status span{font-size:10px;color:var(--muted);text-transform:uppercase}.game-status strong{font-size:13px;margin-top:3px}.nsc-box{background:var(--primary-light)!important;border-color:#bdd7e7!important}.nsc-box strong{font-size:20px!important;color:var(--primary)}
.status-dot:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#28a86e;margin-right:6px}
.workspace{height:calc(100vh - 142px);display:grid;grid-template-columns:250px minmax(480px,1fr) 320px;gap:10px;padding:10px}
.sidebar,.board-area{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);min-height:0}
.sidebar{display:flex;flex-direction:column;overflow:hidden}.sidebar-title{display:flex;justify-content:space-between;align-items:center;padding:14px;border-bottom:1px solid var(--line);font-weight:800}
.sidebar.collapsed{width:54px;min-width:54px}.sidebar.collapsed>*:not(.sidebar-title){display:none}.sidebar.collapsed .sidebar-title span{display:none}
.accordion{overflow:auto}.accordion-trigger{width:100%;border:0;background:#fff;padding:14px;display:flex;justify-content:space-between;font-weight:700;border-bottom:1px solid var(--line)}.accordion-trigger.active{color:var(--primary)}.accordion-content{display:none;padding:14px;background:var(--surface-soft);font-size:13px}.accordion-content.open{display:block}.accordion-content p{line-height:1.5;margin-top:0}
dl{margin:0}dl div{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed var(--line)}dt{color:var(--muted)}dd{margin:0;font-weight:700}.resource-list{list-style:none;padding:0;margin:0}.resource-list li{display:flex;justify-content:space-between;padding:8px 0}.doc-link{display:block;padding:6px 0}
.board-area{display:grid;grid-template-rows:auto 1fr auto;overflow:hidden}.board-toolbar{display:flex;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--line)}.tabs{display:flex;gap:6px}.tabs button{border:0;padding:8px 12px;border-radius:8px;background:transparent;color:var(--muted)}.tabs button.active{background:var(--primary-light);color:var(--primary);font-weight:800}.board-actions{display:flex;gap:8px}
.board-stage{overflow:auto;display:grid;place-items:center;padding:18px;background:linear-gradient(#eef4f1,#e5ece8)}
.hex-board{display:grid;grid-template-columns:repeat(6,72px);grid-auto-rows:63px;gap:0 4px;padding:20px}
.hex{width:72px;height:82px;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);background:#bdd8c0;border:0;display:grid;place-items:center;position:relative;color:#36553a;font-weight:800}
.hex:nth-child(12n+7),.hex:nth-child(12n+8),.hex:nth-child(12n+9),.hex:nth-child(12n+10),.hex:nth-child(12n+11),.hex:nth-child(12n+12){transform:translateX(38px)}
.hex:hover{filter:brightness(.96);scale:1.03;z-index:2}.hex.selected{background:#f7b36d}.hex.affected{background:#cf7d68}.hex .building{font-size:22px}.hex small{position:absolute;bottom:10px;font-size:10px}
.timeline{display:flex;align-items:center;gap:14px;padding:10px 14px;border-top:1px solid var(--line);overflow:auto}.timeline>span{font-size:12px;color:var(--muted);font-weight:800}.timeline-items{display:flex;gap:6px}.timeline button{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:white}.timeline button.done{background:var(--primary-light);color:var(--primary)}.timeline button.current{background:var(--accent);border-color:var(--accent);font-weight:800}
.sidebar-right{padding-bottom:8px}.context-card{margin:10px;padding:13px;border:1px solid var(--line);border-radius:12px;background:var(--surface-soft)}.context-card h3{margin:5px 0 8px}.context-card p{font-size:13px;line-height:1.45;color:#4d5a64}.event-data{display:grid;grid-template-columns:1fr 1fr;gap:8px}.event-data div{background:white;border:1px solid var(--line);padding:9px;border-radius:8px}.event-data span,.event-data strong{display:block}.event-data span{font-size:10px;color:var(--muted)}.event-data strong{font-size:13px;margin-top:3px}
.chat-card{display:flex;flex-direction:column;min-height:260px;flex:1}.chat-header{display:flex;justify-content:space-between}.online-dot{background:#e2f3ea;color:var(--success);border-radius:999px;padding:4px 8px;font-size:11px}.messages{overflow:auto;display:flex;flex-direction:column;gap:8px;flex:1;margin:8px 0}.message{background:white;border:1px solid var(--line);padding:8px;border-radius:9px}.message.me{background:var(--primary-light);margin-left:24px}.message strong{font-size:11px}.message p{margin:4px 0 0}.chat-form{display:flex;gap:6px}.chat-form input{min-width:0;flex:1;border:1px solid var(--line);border-radius:8px;padding:9px}.chat-form button{border:0;border-radius:8px;background:var(--primary);color:white;padding:8px 10px}
.action-bar{height:78px;background:var(--surface);border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:8px 16px;gap:15px}.action-group{display:flex;gap:8px}.action-card{min-width:120px;border:1px solid var(--line);background:var(--surface-soft);border-radius:10px;padding:9px;text-align:left}.action-card:hover{border-color:var(--primary)}.action-card span,.action-card strong{display:block}.action-card span{font-size:10px;color:var(--muted)}.round-result{display:flex;gap:8px}.round-result>div{min-width:130px;padding:8px 12px;background:#f7f9fa;border:1px solid var(--line);border-radius:10px}.round-result span,.round-result strong{display:block}.round-result span{font-size:10px;color:var(--muted)}.round-result strong{font-size:13px;margin-top:3px}
.toast{position:fixed;right:24px;bottom:24px;background:#1f2d35;color:#fff;padding:12px 16px;border-radius:10px;opacity:0;transform:translateY(15px);pointer-events:none;z-index:100}.toast.show{opacity:1;transform:translateY(0)}
.history-list{display:grid;gap:10px}.history-list article{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:14px;border:1px solid var(--line);border-radius:12px;padding:14px}.round-index{width:38px;height:38px;border-radius:50%;background:var(--primary-light);display:grid;place-items:center;font-weight:800;color:var(--primary)}.history-list p{margin:5px 0 0;color:var(--muted)}
.summary-hero{grid-template-columns:1fr auto;align-items:center}.score-ring{width:150px;height:150px;border:12px solid rgba(255,255,255,.25);border-top-color:var(--accent);border-radius:50%;display:grid;place-items:center}.score-ring strong{font-size:42px}.score-ring span{font-size:12px;color:#d9e7e5;margin-top:-35px}.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:20px 0}.metric-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px}.metric-card span,.metric-card strong{display:block}.metric-card span{color:var(--muted);font-size:12px}.metric-card strong{font-size:28px;margin-top:8px}.conclusion-list{line-height:1.8}
@media(max-width:1100px){.workspace{grid-template-columns:210px 1fr}.sidebar-right{display:none}.dashboard-grid{grid-template-columns:1fr}.summary-grid{grid-template-columns:1fr 1fr}.game-status>div:nth-child(2),.game-status>div:nth-child(3){display:none}}
@media(max-width:760px){.topnav{display:none}.dashboard-shell{padding:14px}.hero-card,.summary-hero{grid-template-columns:1fr;padding:24px}.hero-card h1,.summary-hero h1{font-size:30px}.workspace{grid-template-columns:1fr;padding:6px;height:calc(100vh - 132px)}.sidebar-left{display:none}.game-title{display:none}.game-status>div{min-width:70px}.hex-board{grid-template-columns:repeat(6,52px);grid-auto-rows:46px}.hex{width:52px;height:60px}.action-bar{height:68px}.round-result{display:none}.action-card{min-width:88px}.summary-grid{grid-template-columns:1fr}}

/* Identidad institucional UNAH */
.institutional-brand{min-width:360px}
.brand-logo{width:44px;height:54px;object-fit:contain}
.brand-copy strong{font-size:16px;color:var(--primary-dark)}
.brand-copy span{font-size:11px;max-width:260px;line-height:1.25}
.institutional-back{display:flex;align-items:center;gap:8px;color:var(--primary-dark)}
.institutional-back img{width:30px;height:38px;object-fit:contain}
.institutional-footer{
  max-width:1440px;margin:22px auto 0;padding:18px 28px;border-top:4px solid var(--accent);
  background:var(--primary-dark);color:#fff;display:flex;align-items:center;justify-content:space-between;
}
.institutional-footer strong,.institutional-footer span{display:block}
.institutional-footer span{font-size:12px;color:#d8e6ee;margin-top:4px}
.institutional-footer img{width:58px;height:58px;object-fit:contain}
.hero-card:after,.summary-hero:after{
  content:"";position:absolute;right:24px;bottom:18px;width:110px;height:110px;
  background:url("../assets/img/ingenieria-civil.png") center/contain no-repeat;
  opacity:.15;pointer-events:none
}
.hero-card,.summary-hero{position:relative;overflow:hidden}
.btn-primary{background:var(--accent);color:#2f261d}
.btn-primary:hover{background:var(--accent-dark);color:#fff}
.brand-mark{background:var(--primary)}
@media(max-width:760px){
  .institutional-brand{min-width:auto}
  .brand-copy span{display:none}
  .brand-logo{width:34px;height:42px}
  .institutional-footer{padding:14px 18px}
}

/* =========================================================
   Responsive v3
   ========================================================= */

img, svg, video, canvas {
  max-width: 100%;
}

.mobile-menu-button,
.mobile-game-toolbar,
.mobile-overlay {
  display: none;
}

/* Large desktops */
@media (min-width: 1600px) {
  .dashboard-shell,
  .institutional-footer {
    max-width: 1560px;
  }

  .workspace {
    grid-template-columns: 280px minmax(760px, 1fr) 360px;
  }

  .hex-board {
    transform: scale(1.08);
    transform-origin: center;
  }
}

/* Small laptops and tablets landscape */
@media (max-width: 1180px) {
  .institutional-brand {
    min-width: 280px;
  }

  .workspace {
    grid-template-columns: 220px minmax(520px, 1fr) 290px;
  }

  .game-status > div {
    min-width: 76px;
    padding: 7px 9px;
  }

  .round-result > div {
    min-width: 112px;
  }

  .hex-board {
    grid-template-columns: repeat(6, 62px);
    grid-auto-rows: 54px;
  }

  .hex {
    width: 62px;
    height: 72px;
  }

  .hex:nth-child(12n+7),
  .hex:nth-child(12n+8),
  .hex:nth-child(12n+9),
  .hex:nth-child(12n+10),
  .hex:nth-child(12n+11),
  .hex:nth-child(12n+12) {
    transform: translateX(33px);
  }
}

/* Tablets portrait */
@media (max-width: 920px) {
  body.dashboard-page {
    overflow-x: hidden;
  }

  .topbar {
    padding: 0 14px;
    gap: 12px;
  }

  .institutional-brand {
    min-width: 0;
    flex: 1;
  }

  .brand-copy span {
    display: none;
  }

  .topnav {
    position: fixed;
    top: 72px;
    left: 12px;
    right: 12px;
    display: none;
    flex-direction: column;
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow);
    z-index: 80;
  }

  .topnav.open {
    display: flex;
  }

  .mobile-menu-button {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-soft);
    color: var(--primary-dark);
    font-size: 20px;
  }

  .dashboard-shell {
    padding: 18px;
  }

  .hero-card,
  .summary-hero {
    grid-template-columns: 1fr;
    padding: 28px;
  }

  .hero-card h1,
  .summary-hero h1 {
    font-size: clamp(30px, 6vw, 40px);
  }

  .hero-metrics {
    grid-template-columns: repeat(3, 1fr);
  }

  .dashboard-grid,
  .summary-grid {
    grid-template-columns: 1fr;
  }

  .quick-grid {
    grid-template-columns: 1fr 1fr;
  }

  .institutional-footer {
    margin: 18px;
    border-radius: 12px;
  }

  /* Game screen becomes drawer-based */
  .game-page {
    height: auto;
    min-height: 100vh;
    overflow: auto;
  }

  .game-header {
    position: sticky;
    top: 0;
    z-index: 90;
    height: auto;
    min-height: 64px;
    flex-wrap: wrap;
    padding: 8px 12px;
  }

  .game-title {
    min-width: 0;
    flex: 1;
  }

  .game-status {
    width: 100%;
    order: 3;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }

  .game-status > div {
    display: block !important;
    min-width: 0;
  }

  .mobile-game-toolbar {
    position: sticky;
    top: 112px;
    z-index: 75;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 8px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
  }

  .mobile-game-toolbar button {
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface-soft);
    color: var(--primary-dark);
    padding: 9px 6px;
    font-size: 12px;
    font-weight: 700;
  }

  .workspace {
    display: block;
    height: auto;
    min-height: calc(100vh - 190px);
    padding: 8px;
  }

  .board-area {
    min-height: 660px;
    border-radius: 12px;
  }

  .mobile-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    width: min(88vw, 360px) !important;
    min-width: 0 !important;
    z-index: 110;
    border-radius: 0;
    transform: translateX(-110%);
    transition: transform .22s ease;
  }

  .sidebar-right.mobile-drawer {
    right: 0;
    left: auto;
    transform: translateX(110%);
  }

  .mobile-drawer.mobile-open {
    transform: translateX(0);
  }

  .mobile-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(15, 23, 42, .48);
  }

  .mobile-overlay.open {
    display: block;
  }

  .sidebar.collapsed {
    width: min(88vw, 360px);
  }

  .sidebar.collapsed > * {
    display: initial;
  }

  .sidebar.collapsed .sidebar-title {
    display: flex;
  }

  .sidebar.collapsed .sidebar-title span {
    display: inline;
  }

  .board-toolbar {
    flex-wrap: wrap;
    gap: 8px;
  }

  .board-stage {
    min-height: 520px;
    padding: 10px;
  }

  .hex-board {
    grid-template-columns: repeat(6, 58px);
    grid-auto-rows: 51px;
    padding: 14px;
  }

  .hex {
    width: 58px;
    height: 68px;
  }

  .hex:nth-child(12n+7),
  .hex:nth-child(12n+8),
  .hex:nth-child(12n+9),
  .hex:nth-child(12n+10),
  .hex:nth-child(12n+11),
  .hex:nth-child(12n+12) {
    transform: translateX(31px);
  }

  .action-bar {
    position: sticky;
    bottom: 0;
    z-index: 70;
    height: auto;
    align-items: stretch;
    padding: 8px;
  }

  .action-group {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .action-card {
    min-width: 0;
  }

  .round-result {
    display: none;
  }
}

/* Phones */
@media (max-width: 640px) {
  .topbar {
    height: 64px;
  }

  .brand-logo {
    width: 32px;
    height: 40px;
  }

  .brand-copy strong {
    font-size: 14px;
  }

  .user-chip {
    width: 34px;
    height: 34px;
    font-size: 12px;
  }

  .dashboard-shell {
    padding: 10px;
  }

  .hero-card,
  .summary-hero {
    border-radius: 16px;
    padding: 22px;
  }

  .hero-card h1,
  .summary-hero h1 {
    font-size: 29px;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .hero-metrics {
    grid-template-columns: 1fr;
  }

  .dashboard-grid {
    margin-top: 12px;
    gap: 12px;
  }

  .panel {
    padding: 15px;
    border-radius: 13px;
  }

  .quick-grid {
    grid-template-columns: 1fr;
  }

  .table-wrap table {
    min-width: 680px;
  }

  .summary-grid {
    gap: 10px;
  }

  .institutional-footer {
    margin: 12px 10px 0;
    padding: 14px;
    gap: 10px;
  }

  .institutional-footer img {
    width: 44px;
    height: 44px;
  }

  .game-header {
    min-height: 56px;
  }

  .institutional-back span,
  .game-title span {
    display: none;
  }

  .game-title strong {
    font-size: 13px;
  }

  .game-status {
    grid-template-columns: repeat(2, 1fr);
  }

  .game-status > div:nth-child(2),
  .game-status > div:nth-child(3) {
    display: none !important;
  }

  .mobile-game-toolbar {
    top: 104px;
  }

  .board-area {
    min-height: 590px;
  }

  .board-toolbar {
    padding: 8px;
  }

  .tabs button,
  .btn-small {
    padding: 7px 8px;
    font-size: 11px;
  }

  .board-stage {
    justify-content: start;
    overflow: auto;
    min-height: 450px;
  }

  .hex-board {
    min-width: 390px;
    grid-template-columns: repeat(6, 50px);
    grid-auto-rows: 44px;
    padding: 12px 8px 42px;
  }

  .hex {
    width: 50px;
    height: 58px;
    font-size: 11px;
  }

  .hex:nth-child(12n+7),
  .hex:nth-child(12n+8),
  .hex:nth-child(12n+9),
  .hex:nth-child(12n+10),
  .hex:nth-child(12n+11),
  .hex:nth-child(12n+12) {
    transform: translateX(27px);
  }

  .timeline {
    padding: 8px;
  }

  .timeline-items {
    min-width: max-content;
  }

  .action-card {
    padding: 8px 6px;
  }

  .action-card strong {
    font-size: 12px;
  }

  .chat-card {
    min-height: 360px;
  }
}

/* Very small phones */
@media (max-width: 390px) {
  .mobile-game-toolbar button {
    font-size: 10px;
  }

  .hex-board {
    min-width: 360px;
    grid-template-columns: repeat(6, 46px);
    grid-auto-rows: 40px;
  }

  .hex {
    width: 46px;
    height: 54px;
  }

  .hex:nth-child(12n+7),
  .hex:nth-child(12n+8),
  .hex:nth-child(12n+9),
  .hex:nth-child(12n+10),
  .hex:nth-child(12n+11),
  .hex:nth-child(12n+12) {
    transform: translateX(24px);
  }
}


/* =========================================================
   Tablero hexagonal visual v4
   ========================================================= */
.board-stage{position:relative;background:radial-gradient(circle at 50% 44%,rgba(255,255,255,.88),rgba(235,242,239,.78) 45%,rgba(221,232,228,.92) 100%),linear-gradient(135deg,#edf4f1,#e5ece8)}
.board-stage::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.28;background-image:linear-gradient(rgba(0,90,135,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(0,90,135,.035) 1px,transparent 1px);background-size:28px 28px}
.board-legend{position:absolute;top:14px;left:14px;z-index:5;display:flex;flex-wrap:wrap;gap:8px 14px;max-width:calc(100% - 28px);padding:9px 12px;border:1px solid rgba(0,59,92,.12);border-radius:10px;background:rgba(255,255,255,.88);box-shadow:0 5px 18px rgba(0,59,92,.08);backdrop-filter:blur(8px)}
.board-legend span{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:10px;font-weight:700}
.legend-swatch{width:13px;height:13px;display:inline-block;border:1px solid rgba(15,23,42,.14);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.legend-swatch.terrain-residential{background:#b9d4bc}.legend-swatch.terrain-institutional{background:#9fc7d8}.legend-swatch.terrain-risk{background:#dfc188}.legend-swatch.terrain-affected{background:#c77964}
.hex-board{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;width:max-content;min-width:560px;padding:80px 54px 48px;filter:drop-shadow(0 16px 22px rgba(52,72,61,.16))}
.hex-row{display:flex;margin-top:-17px}.hex-row:first-child{margin-top:0}.hex-row-offset{transform:translateX(42px)}
.hex-tile{--tile-base:#b9d4bc;--tile-light:#d8e8d9;--tile-dark:#8eb394;--tile-border:rgba(55,88,62,.48);position:relative;width:86px;height:76px;margin:0 -1px;padding:0;border:0;outline:none;background:transparent;isolation:isolate}
.hex-shell,.hex-surface{position:absolute;inset:0;display:grid;place-items:center;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.hex-shell{background:var(--tile-border);transform:scale(.985);filter:drop-shadow(0 5px 4px rgba(32,50,40,.17));transition:transform .18s ease,filter .18s ease,background .18s ease}
.hex-surface{inset:2px;overflow:hidden;color:#284631;background:radial-gradient(circle at 34% 25%,rgba(255,255,255,.62),transparent 30%),linear-gradient(145deg,var(--tile-light),var(--tile-base) 55%,var(--tile-dark))}
.hex-surface::before{content:"";position:absolute;inset:0;opacity:.26;background:repeating-linear-gradient(120deg,transparent 0,transparent 9px,rgba(255,255,255,.18) 10px,transparent 12px)}
.hex-surface::after{content:"";position:absolute;left:18%;right:18%;bottom:11%;height:16%;border-radius:50%;background:rgba(30,55,38,.11);filter:blur(4px)}
.hex-tile.terrain-institutional{--tile-base:#a9cddd;--tile-light:#d9ebf2;--tile-dark:#7faabc;--tile-border:rgba(31,88,115,.48)}
.hex-tile.terrain-risk{--tile-base:#ddc18d;--tile-light:#f0ddba;--tile-dark:#b9985e;--tile-border:rgba(117,83,38,.48)}
.hex-tile.terrain-affected{--tile-base:#ca8069;--tile-light:#e6a38d;--tile-dark:#9f5948;--tile-border:rgba(105,45,34,.58)}
.hex-tile.terrain-affected .hex-surface::before{opacity:.35;background:repeating-linear-gradient(135deg,rgba(104,44,33,.18) 0,rgba(104,44,33,.18) 5px,transparent 5px,transparent 12px)}
.hex-tile:hover{z-index:8}.hex-tile:hover .hex-shell{transform:scale(1.05) translateY(-2px);filter:drop-shadow(0 9px 8px rgba(18,45,37,.25))}
.hex-tile:focus-visible .hex-shell,.hex-tile.selected .hex-shell{background:var(--accent);transform:scale(1.08) translateY(-3px);filter:drop-shadow(0 10px 9px rgba(0,59,92,.26))}
.hex-tile.selected .hex-surface{inset:4px}
.hex-number{position:absolute;right:17px;bottom:12px;z-index:3;min-width:19px;height:19px;display:grid;place-items:center;padding:0 5px;border-radius:999px;color:#20352a;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.55);box-shadow:0 2px 6px rgba(31,49,39,.14);font-size:9px;font-weight:800}
.hex-building{position:relative;z-index:3;transform:translateY(-4px);font-size:25px;filter:drop-shadow(0 3px 2px rgba(30,48,38,.28))}
.hex-alert{position:absolute;top:10px;right:15px;z-index:4;width:18px;height:18px;display:grid;place-items:center;border-radius:50%;color:#fff;background:#9f2f2f;border:2px solid rgba(255,255,255,.75);box-shadow:0 3px 7px rgba(72,23,23,.30);font-size:10px;font-weight:900}
.hex-tile.impact-pulse .hex-shell{animation:hex-impact .8s ease}@keyframes hex-impact{0%{transform:scale(.98)}35%{transform:scale(1.13);background:#f2b705}100%{transform:scale(.985)}}
@media(max-width:1180px){.hex-board{min-width:500px;padding-inline:38px}.hex-tile{width:76px;height:68px}.hex-row{margin-top:-15px}.hex-row-offset{transform:translateX(37px)}.hex-building{font-size:22px}}
@media(max-width:920px){.board-stage{justify-content:center}.hex-board{min-width:500px;padding-top:78px}}
@media(max-width:640px){.board-legend{position:sticky;top:0;left:0;width:max-content;margin:8px}.hex-board{min-width:430px;padding:74px 28px 38px}.hex-tile{width:66px;height:58px}.hex-row{margin-top:-13px}.hex-row-offset{transform:translateX(32px)}.hex-building{font-size:18px}.hex-number{right:12px;bottom:9px;min-width:16px;height:16px;font-size:8px}.hex-alert{top:7px;right:11px;width:16px;height:16px}}
@media(max-width:390px){.hex-board{min-width:390px;padding-inline:18px}.hex-tile{width:60px;height:53px}.hex-row{margin-top:-12px}.hex-row-offset{transform:translateX(29px)}}


/* =========================================================
   Panal geométrico corregido v5
   Hexágonos flat-top: columnas alternas desplazadas.
   ========================================================= */

.board-stage {
  display: grid;
  place-items: center;
  overflow: auto;
}

.board-legend {
  top: 12px;
  left: 12px;
  gap: 7px 12px;
}

.board-legend span {
  white-space: nowrap;
}

.hex-board {
  --hex-width: 86px;
  --hex-height: 74px;
  --column-overlap: 22px;
  --column-offset: 37px;

  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: center;
  width: max-content;
  min-width: 0;
  padding: 78px 72px 62px;
  filter: drop-shadow(0 15px 20px rgba(42, 66, 51, .15));
}

.hex-column {
  display: flex;
  flex-direction: column;
  width: var(--hex-width);
  flex: 0 0 var(--hex-width);
  margin-left: calc(var(--column-overlap) * -1);
}

.hex-column:first-child {
  margin-left: 0;
}

.hex-column-offset {
  transform: translateY(var(--column-offset));
}

.hex-tile {
  width: var(--hex-width) !important;
  height: var(--hex-height) !important;
  flex: 0 0 var(--hex-height);
  margin: 0 !important;
}

/* Las reglas anteriores de filas ya no participan en el layout. */
.hex-row,
.hex-row-offset {
  display: contents !important;
  margin: 0 !important;
  transform: none !important;
}

.hex-shell,
.hex-surface {
  clip-path: polygon(
    25% 0,
    75% 0,
    100% 50%,
    75% 100%,
    25% 100%,
    0 50%
  );
}

.hex-shell {
  transform: scale(.99);
}

/* El borde dorado no debe alterar la posición del panal. */
.hex-tile:hover .hex-shell {
  transform: scale(1.045);
}

.hex-tile:focus-visible .hex-shell,
.hex-tile.selected .hex-shell {
  transform: scale(1.07);
}

@media (max-width: 1180px) {
  .hex-board {
    --hex-width: 78px;
    --hex-height: 68px;
    --column-overlap: 20px;
    --column-offset: 34px;
    padding-inline: 56px;
  }

  .hex-tile {
    width: var(--hex-width) !important;
    height: var(--hex-height) !important;
    flex-basis: var(--hex-height);
  }
}

@media (max-width: 920px) {
  .hex-board {
    min-width: max-content;
    padding-top: 78px;
  }
}

@media (max-width: 640px) {
  .hex-board {
    --hex-width: 68px;
    --hex-height: 59px;
    --column-overlap: 17px;
    --column-offset: 29.5px;
    min-width: max-content;
    padding: 70px 34px 52px;
  }

  .hex-tile {
    width: var(--hex-width) !important;
    height: var(--hex-height) !important;
    flex-basis: var(--hex-height);
  }
}

@media (max-width: 390px) {
  .hex-board {
    --hex-width: 62px;
    --hex-height: 54px;
    --column-overlap: 15.5px;
    --column-offset: 27px;
    padding-inline: 24px;
  }
}

/* =========================================================
   Paneles laterales colapsables v6
   ========================================================= */

@media (min-width: 921px) {
  .workspace {
    --left-panel-width: 250px;
    --right-panel-width: 320px;
    grid-template-columns:
      var(--left-panel-width)
      minmax(480px, 1fr)
      var(--right-panel-width);
    transition: grid-template-columns .28s ease;
  }

  .workspace.left-panel-collapsed {
    --left-panel-width: 54px;
  }

  .workspace.right-panel-collapsed {
    --right-panel-width: 54px;
  }

  .sidebar {
    min-width: 0;
    transition:
      width .28s ease,
      min-width .28s ease,
      transform .28s ease,
      box-shadow .28s ease;
  }

  .sidebar.desktop-collapsed {
    overflow: hidden;
    box-shadow: 0 8px 18px rgba(31, 48, 61, .06);
  }

  .sidebar.desktop-collapsed > *:not(.sidebar-title) {
    display: none;
  }

  .sidebar.desktop-collapsed .sidebar-title {
    height: 100%;
    min-height: 100%;
    padding: 10px 8px;
    border-bottom: 0;
    justify-content: center;
    align-items: flex-start;
  }

  .sidebar.desktop-collapsed .sidebar-title > span {
    display: none;
  }

  .sidebar.desktop-collapsed .sidebar-title .icon-btn {
    position: sticky;
    top: 10px;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-light);
    box-shadow: 0 3px 10px rgba(0, 59, 92, .10);
  }

  .sidebar-left.desktop-collapsed {
    transform: translateX(-2px);
    border-left-color: transparent;
  }

  .sidebar-right.desktop-collapsed {
    transform: translateX(2px);
    border-right-color: transparent;
  }

  .board-area {
    min-width: 0;
    transition: box-shadow .28s ease;
  }

  .workspace.left-panel-collapsed .board-area,
  .workspace.right-panel-collapsed .board-area {
    box-shadow: 0 12px 32px rgba(0, 59, 92, .12);
  }
}

/* Small laptops retain the same proportional behavior. */
@media (min-width: 921px) and (max-width: 1180px) {
  .workspace {
    --left-panel-width: 220px;
    --right-panel-width: 290px;
  }

  .workspace.left-panel-collapsed {
    --left-panel-width: 50px;
  }

  .workspace.right-panel-collapsed {
    --right-panel-width: 50px;
  }
}

/* Mobile drawers should ignore desktop-collapse rules. */
@media (max-width: 920px) {
  .sidebar.desktop-collapsed {
    transform: translateX(-110%);
  }

  .sidebar-right.desktop-collapsed {
    transform: translateX(110%);
  }

  .workspace.left-panel-collapsed,
  .workspace.right-panel-collapsed {
    display: block;
  }
}