/* =========================
   GIS VIVIENDA DIGNA - UI BASE
   Paleta corporativa aplicada (Azul #132B4E / Naranja #EF7A21)
   ========================= */

/* VARIABLES */
:root {
  --color-brand-blue: #132B4E;
  --color-brand-blue-dark: #0f223d;
  --color-brand-orange: #EF7A21;
  --color-brand-orange-hover: #ff8c3e;
  --color-bg: #f5f7fa;
  --color-bg-alt: #ffffff;
  --color-surface: #ffffff;
  --color-border: #d9e0e7;
  --color-border-strong: #b5c0cc;
  --color-text: #132B4E;
  --color-text-soft: #4a5a68;
  --color-accent: var(--color-brand-blue);
  --color-accent-hover: var(--color-brand-blue-dark);
  --color-accent-muted: #e3e8ef;
  --color-danger: #c62828;
  --color-warning: #ed8a19;
  --color-success: #2e7d32;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 2px 4px rgba(0,0,0,.08);
  --transition: 0.18s cubic-bezier(.4,.0,.2,1);
  --font-sans: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  --sidebar-width: 360px;
  --header-height: 74px;
}

html[data-theme="dark"] {
  --color-bg: #0f1824;
  --color-bg-alt: #162334;
  --color-surface: #1e2e43;
  --color-border: #25384f;
  --color-border-strong: #34526d;
  --color-text: #f2f6f9;
  --color-text-soft: #b9c8d2;
  --color-accent: #3f5f85;
  --color-accent-hover: #2f4865;
  --color-accent-muted: #233347;
}

/* RESET BÁSICO */
* { box-sizing: border-box; }
body, h1, h2, h3, h4, h5, p, ul, ol, figure { margin:0; padding:0; }
body { font-family: var(--font-sans); background: var(--color-bg); color: var(--color-text); -webkit-font-smoothing: antialiased; }
img { max-width:100%; display:block; }
button { font-family: inherit; cursor:pointer; }

/* CABECERA / NAVBAR */
.app-header { position:sticky; top:0; z-index:50; height:var(--header-height); display:flex; align-items:center; gap:2.2rem; padding:0 1.75rem; background:var(--color-brand-blue); border-bottom:4px solid var(--color-brand-orange); box-shadow:0 3px 6px -2px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.05) inset; }
.brand { display:flex; align-items:center; gap:.7rem; }
.logo-img { display:block; object-fit:contain; width:56px; height:56px; border-radius:10px; box-shadow:0 2px 4px rgba(0,0,0,.25); padding:0; }
.app-title { font-size:1.2rem; font-weight:700; letter-spacing:.6px; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.3); }

.main-nav ul { list-style:none; display:flex; gap:.65rem; }
.main-nav .nav-btn { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); padding:.7rem 1rem; border-radius:var(--radius-md); font-size:.85rem; color:#fff; font-weight:600; letter-spacing:.4px; backdrop-filter: blur(2px); transition:var(--transition); position:relative; }
.main-nav .nav-btn:hover { background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.28); }
.main-nav .nav-btn[aria-current="true"] { background:var(--color-brand-orange); border-color:var(--color-brand-orange); color:#fff; box-shadow:0 2px 4px rgba(0,0,0,.3); }
.main-nav .nav-btn[aria-current="true"]::after { content:""; position:absolute; left:10%; right:10%; bottom:-8px; height:4px; background:linear-gradient(90deg,var(--color-brand-orange),#f89245); border-bottom-left-radius:2px; border-bottom-right-radius:2px; }

.header-actions { margin-left:auto; display:flex; gap:.65rem; }
.action-btn { background:var(--color-brand-orange); color:#fff; border:1px solid var(--color-brand-orange); padding:.65rem 1rem; font-size:.72rem; border-radius:var(--radius-md); letter-spacing:.6px; font-weight:600; box-shadow:0 2px 4px rgba(0,0,0,.25); transition:var(--transition); }
.action-btn:hover { background:var(--color-brand-orange-hover); border-color:var(--color-brand-orange-hover); }

/* LAYOUT PRINCIPAL */
.layout { display:flex; height: calc(100vh - var(--header-height)); width:100%; overflow:hidden; }
.sidebar-left { width:var(--sidebar-width); background:var(--color-bg-alt); border-right:1px solid var(--color-border); display:flex; flex-direction:column; overflow:auto; }
.map-section { flex:1; position:relative; background:#dce3ea; }

/* SIDEBAR PANELS */
.panel-group { padding:1rem 1rem 2rem; display:flex; flex-direction:column; gap:1rem; }
.panel { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); display:flex; flex-direction:column; }
.panel-title { font-size:.9rem; font-weight:600; padding:.85rem 1rem; border-bottom:1px solid var(--color-border); background:linear-gradient(var(--color-bg-alt), var(--color-surface)); border-top-left-radius:var(--radius-md); border-top-right-radius:var(--radius-md); }
.panel-content { padding:.85rem 1rem 1rem; display:flex; flex-direction:column; gap:.85rem; }
.placeholder { font-size:.75rem; color:var(--color-text-soft); line-height:1.4; }

/* NUEVOS BLOQUES PLEGABLES */
.collapsible-group { padding:1rem 1rem 2rem; display:flex; flex-direction:column; gap:.9rem; }
.collapsible { border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface); box-shadow:var(--shadow-sm); overflow:hidden; }
.collapsible + .collapsible { margin-top:0; }
.collapsible-toggle { all:unset; display:flex; align-items:center; gap:.6rem; width:100%; cursor:pointer; padding:.75rem .95rem; background:linear-gradient(var(--color-bg-alt), var(--color-surface)); border-bottom:1px solid var(--color-border); position:relative; }
.collapsible-toggle:focus-visible { outline:2px solid var(--color-brand-orange); outline-offset:2px; }
.collapsible-title { font-size:.8rem; font-weight:600; letter-spacing:.5px; color:var(--color-text); }
.collapsible-toggle .chevron { width:12px; height:12px; display:inline-block; position:relative; }
.collapsible-toggle .chevron::before, .collapsible-toggle .chevron::after { content:""; position:absolute; inset:0; background:transparent; }
.collapsible-toggle .chevron::before { content:""; width:6px; height:6px; border:2px solid var(--color-brand-blue); border-left:0; border-top:0; position:absolute; top:2px; left:2px; transform:rotate(45deg); transition:transform var(--transition); }
.collapsible-toggle[aria-expanded="true"] .chevron::before { transform:rotate(135deg) translate(-2px, -2px); }
.collapsible-content { padding:.85rem .95rem 1rem; display:flex; flex-direction:column; gap:.85rem; animation:fadeSlide .25s ease; }
.collapsible-content[hidden] { display:none; }
@keyframes fadeSlide { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }

/* LISTAS DE CAPAS */
.layers-categories { display:flex; flex-direction:column; gap:.7rem; }
.layer-category { border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-bg-alt); }
.layer-cat-toggle { all:unset; display:flex; align-items:center; width:100%; padding:.55rem .6rem; cursor:pointer; font-size:.65rem; font-weight:600; letter-spacing:.5px; color:var(--color-text-soft); position:relative; }
.layer-cat-toggle:focus-visible { outline:2px solid var(--color-brand-orange); outline-offset:1px; }
.layer-cat-toggle::before { content:""; width:8px; height:8px; border:2px solid var(--color-brand-blue); border-left:0; border-top:0; transform:rotate(45deg); position:absolute; right:.75rem; top:50%; margin-top:-6px; transition:transform var(--transition); }
.layer-cat-toggle[aria-expanded="true"]::before { transform:rotate(135deg); }
.layer-list { list-style:none; margin:0; padding:.4rem .75rem .65rem; display:flex; flex-direction:column; gap:.35rem; border-top:1px solid var(--color-border); background:var(--color-surface); }
.layer-list li { font-size:.6rem; color:var(--color-text-soft); display:flex; }
.layer-list input { margin-right:.4rem; }

/* ESTADOS OSCURO PARA PLEGABLES */
html[data-theme="dark"] .collapsible-toggle { background:linear-gradient(var(--color-bg-alt), var(--color-surface)); }
html[data-theme="dark"] .collapsible, html[data-theme="dark"] .layer-category { background:var(--color-surface); }
html[data-theme="dark"] .layer-list { background:var(--color-bg-alt); }

/* BREADCRUMB */
.breadcrumb { list-style:none; display:flex; flex-wrap:wrap; gap:.35rem; }
.crumb { background:var(--color-accent-muted); border:1px solid var(--color-border); padding:.35rem .6rem; font-size:.65rem; border-radius:var(--radius-sm); color:var(--color-text-soft); min-width:54px; transition:var(--transition); }
.crumb:not([disabled]):hover { background:var(--color-accent); color:#fff; border-color:var(--color-accent); }
.crumb[disabled] { opacity:.45; cursor:not-allowed; }

/* FORM ELEMENTS */
.form-label { font-size:.65rem; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--color-text-soft); margin-bottom:.15rem; }
.form-control { width:100%; padding:.55rem .6rem; border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-bg-alt); font-size:.75rem; color:var(--color-text); transition:var(--transition); }
.form-control:focus { outline:2px solid var(--color-accent); outline-offset:1px; }
.help-text { font-size:.6rem; color:var(--color-text-soft); margin-top:.2rem; }

/* BUTTON STYLES (GENERALES) */
.primary-btn { background:var(--color-brand-orange); color:#fff; border:1px solid var(--color-brand-orange); padding:.6rem .95rem; font-size:.7rem; border-radius:var(--radius-sm); font-weight:600; letter-spacing:.55px; box-shadow:0 2px 4px rgba(0,0,0,.15); }
.primary-btn:hover { background:var(--color-brand-orange-hover); }
.secondary-btn { background:#fff; color:var(--color-brand-blue); border:1px solid var(--color-brand-blue); padding:.55rem .9rem; font-size:.7rem; border-radius:var(--radius-sm); font-weight:600; }
.secondary-btn:hover { background:var(--color-accent-muted); }
.ghost-btn { background:transparent; border:1px dashed var(--color-border); color:var(--color-text-soft); padding:.5rem .8rem; font-size:.65rem; border-radius:var(--radius-sm); }
.ghost-btn:hover:not([disabled]) { border-color:var(--color-accent); color:var(--color-accent); }
.tool-btn { background:#ffffff; border:1px solid var(--color-border); padding:.45rem .7rem; font-size:.65rem; border-radius:var(--radius-sm); color:var(--color-brand-blue); transition:var(--transition); box-shadow:var(--shadow-sm); font-weight:600; }
.tool-btn:hover { background:var(--color-brand-blue); color:#fff; border-color:var(--color-brand-blue); }
.tool-btn[aria-pressed="true"] { background:var(--color-brand-orange); color:#fff; border-color:var(--color-brand-orange); }
.full-width { width:100%; }

/* BOTÓN DE INFORMACIÓN */
.info-btn {
  width:48px;
  height:48px;
  border-radius:50%;
  background:linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%);
  border:2px solid var(--color-brand-blue);
  box-shadow:0 4px 12px rgba(0,0,0,.15), 0 1px 0 rgba(255,255,255,.5) inset;
  cursor:pointer;
  transition:all .25s cubic-bezier(.4,0,.2,1);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.info-btn:hover {
  transform:scale(1.05);
  box-shadow:0 6px 16px rgba(0,0,0,.2), 0 1px 0 rgba(255,255,255,.5) inset;
  background:linear-gradient(135deg, #ffffff 0%, #e8e8e8 100%);
}
.info-btn:active {
  transform:scale(.95);
}
.info-btn.active,
.info-btn[aria-pressed="true"] {
  background:linear-gradient(135deg, var(--color-brand-orange) 0%, #ff8c3e 100%);
  border-color:var(--color-brand-orange);
  box-shadow:0 4px 12px rgba(239,122,33,.4), 0 1px 0 rgba(255,255,255,.3) inset;
}
.info-icon {
  font-size:1.5rem;
  font-weight:700;
  font-style:italic;
  color:var(--color-brand-blue);
  font-family:Georgia, serif;
}
.info-btn.active .info-icon,
.info-btn[aria-pressed="true"] .info-icon {
  color:#ffffff;
}
html[data-theme="dark"] .info-btn {
  background:linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-alt) 100%);
  border-color:var(--color-brand-orange);
}
html[data-theme="dark"] .info-btn:hover {
  background:linear-gradient(135deg, var(--color-bg-alt) 0%, var(--color-surface) 100%);
}
html[data-theme="dark"] .info-icon {
  color:var(--color-brand-orange);
}

/* BOTONES DE REGIÓN - ESTILO ATRACTIVO */
.region-buttons { display:flex; flex-direction:column; gap:.75rem; }
.region-btn { 
  position:relative;
  background:linear-gradient(135deg, var(--color-brand-blue) 0%, #1a3a5c 100%);
  color:#fff;
  border:1px solid rgba(255,255,255,.15);
  padding:.85rem 1.2rem;
  font-size:.8rem;
  border-radius:var(--radius-lg);
  font-weight:700;
  letter-spacing:.8px;
  box-shadow:0 3px 8px rgba(19,43,78,.25), 0 1px 0 rgba(255,255,255,.1) inset;
  transition:all .25s cubic-bezier(.4,0,.2,1);
  text-align:left;
  overflow:hidden;
  text-transform:uppercase;
}
.region-btn::before {
  content:"📍";
  position:absolute;
  right:1rem;
  top:50%;
  transform:translateY(-50%);
  font-size:1.1rem;
  opacity:.4;
  transition:all .25s ease;
}
.region-btn:hover {
  background:linear-gradient(135deg, #1a3a5c 0%, var(--color-brand-blue) 100%);
  border-color:rgba(255,255,255,.25);
  box-shadow:0 5px 15px rgba(19,43,78,.4), 0 1px 0 rgba(255,255,255,.15) inset;
  transform:translateY(-2px);
}
.region-btn:hover::before {
  opacity:.7;
  transform:translateY(-50%) scale(1.15);
}
.region-btn:active {
  transform:translateY(0);
  box-shadow:0 2px 5px rgba(19,43,78,.3);
}
.region-btn.active {
  background:linear-gradient(135deg, var(--color-brand-orange) 0%, #ff8c3e 100%);
  border-color:rgba(255,255,255,.3);
  box-shadow:0 4px 12px rgba(239,122,33,.4), 0 1px 0 rgba(255,255,255,.2) inset;
}
.region-btn.active::before {
  content:"📍";
  opacity:1;
  animation:ping 1.5s ease-in-out infinite;
}
@keyframes ping {
  0%, 100% { transform:translateY(-50%) scale(1); opacity:1; }
  50% { transform:translateY(-50%) scale(1.2); opacity:.6; }
}

/* Estilos específicos por región */
.region-btn[data-region="espana"] { background:linear-gradient(135deg, #132B4E 0%, #1a3a5c 100%); }
.region-btn[data-region="andalucia"] { background:linear-gradient(135deg, #0e7c4c 0%, #11a365 100%); }
.region-btn[data-region="sevilla"] { background:linear-gradient(135deg, #c62828 0%, #e53935 100%); }
.region-btn[data-region="malaga"] { background:linear-gradient(135deg, #6a1b9a 0%, #8e24aa 100%); }
.region-btn[data-region="canarias"] { background:linear-gradient(135deg, #0277bd 0%, #0288d1 100%); }

.region-btn[data-region="espana"]:hover { background:linear-gradient(135deg, #1a3a5c 0%, #132B4E 100%); }
.region-btn[data-region="andalucia"]:hover { background:linear-gradient(135deg, #11a365 0%, #0e7c4c 100%); }
.region-btn[data-region="sevilla"]:hover { background:linear-gradient(135deg, #e53935 0%, #c62828 100%); }
.region-btn[data-region="malaga"]:hover { background:linear-gradient(135deg, #8e24aa 0%, #6a1b9a 100%); }
.region-btn[data-region="canarias"]:hover { background:linear-gradient(135deg, #0288d1 0%, #0277bd 100%); }

html[data-theme="dark"] .region-btn {
  box-shadow:0 3px 8px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.05) inset;
}
html[data-theme="dark"] .region-btn:hover {
  box-shadow:0 5px 15px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.08) inset;
}
html[data-theme="dark"] .region-btn.active {
  box-shadow:0 4px 12px rgba(239,122,33,.6), 0 1px 0 rgba(255,255,255,.15) inset;
}

.region-info {
  margin-top:.5rem;
  padding:.7rem;
  background:var(--color-bg-alt);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  min-height:3rem;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* FILTERS BLOCKS */
.filter-groups { display:flex; flex-direction:column; gap:.8rem; }
.filter-block { border:1px solid var(--color-border); padding:.6rem .7rem .7rem; border-radius:var(--radius-sm); background:var(--color-bg-alt); }
.filter-block legend { padding:0 .35rem; font-size:.65rem; font-weight:600; letter-spacing:.5px; color:var(--color-text-soft); text-transform:uppercase; }
.range-placeholder, .complex-placeholder { background:var(--color-surface); border:1px dashed var(--color-border); padding:.7rem; font-size:.6rem; text-align:center; color:var(--color-text-soft); border-radius:var(--radius-xs); }
.filter-actions { display:flex; justify-content:flex-end; gap:.5rem; }

/* MAPA */
.map-container { position:absolute; inset:0; z-index:0; }
.leaflet-pane, .leaflet-tile, .leaflet-marker-icon, .leaflet-popup, .leaflet-shadow-pane { image-rendering: optimizeQuality; }

.map-overlay { position:absolute; z-index:10; display:flex; flex-direction:column; gap:.5rem; }
.map-overlay.top-left { top:.75rem; left:.75rem; }
.map-overlay.top-right { top:.75rem; right:.75rem; }
.map-overlay.bottom-right { bottom:.75rem; right:.75rem; }
.map-overlay.bottom-left { bottom:.75rem; left:.75rem; }
.map-toolbar { display:flex; gap:.4rem; background:var(--color-surface); padding:.5rem .55rem; border:1px solid var(--color-border); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); }
.legend-panel, .charts-panel { background:var(--color-surface); border:1px solid var(--color-border); padding:.75rem .85rem .9rem; border-radius:var(--radius-md); box-shadow:var(--shadow-md); min-width:200px; }
.legend-title, .charts-title { font-size:.7rem; font-weight:600; letter-spacing:.5px; margin-bottom:.6rem; color:var(--color-text-soft); text-transform:uppercase; }
.legend-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.35rem; font-size:.65rem; }
.swatch { width:14px; height:14px; border-radius:3px; display:inline-block; margin-right:.35rem; border:1px solid rgba(0,0,0,.15); vertical-align:middle; }
.swatch-a { background:#132B4E; }
.swatch-b { background:#EF7A21; }
.swatch-c { background:#56a5d8; }
.charts-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px,1fr)); gap:.5rem; }
.chart-box, .table-box { background:var(--color-bg-alt); border:1px solid var(--color-border); padding:.6rem; font-size:.6rem; border-radius:var(--radius-sm); text-align:center; color:var(--color-text-soft); }

/* FOOTER */
.app-footer { background:var(--color-surface); border-top:1px solid var(--color-border); padding:.6rem 1rem; text-align:center; font-size:.6rem; color:var(--color-text-soft); }

/* INDICADOR DE CARGA */
.map-loading-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  background: rgba(19, 43, 78, 0.92);
  backdrop-filter: blur(4px);
  padding: 1.2rem 1.8rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.map-loading-indicator .spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: #EF7A21;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* UTILIDADES */
.subsection-title { font-size:.7rem; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:var(--color-text-soft); margin-top:.2rem; }
.hidden { display:none !important; }
.flex { display:flex; }

/* RESPONSIVE */
@media (max-width: 1100px) {
  :root { --sidebar-width: 320px; }
}
@media (max-width: 900px) {
  .layout { flex-direction:column; }
  .sidebar-left { width:100%; height:320px; order:2; }
  .map-section { order:1; height:calc(100vh - var(--header-height) - 320px); }
}
@media (max-width: 640px) {
  .app-header { gap:1rem; }
  .main-nav ul { gap:.25rem; }
  .main-nav .nav-btn { padding:.55rem .7rem; font-size:.65rem; }
  .header-actions { gap:.35rem; }
  .action-btn { padding:.5rem .7rem; font-size:.65rem; }
  .sidebar-left { height:380px; }
  .map-section { height:calc(100vh - var(--header-height) - 380px); }
}

/* MODAL INTRO */
.modal-overlay { position:fixed; inset:0; background:rgba(10,18,28,.68); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:2rem 1.25rem; z-index:200; }
.modal-dialog { width:100%; max-width:760px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:14px; box-shadow:0 8px 22px -6px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.18); display:flex; flex-direction:column; max-height:calc(100vh - 4rem); }
.modal-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.25rem .75rem; border-bottom:1px solid var(--color-border); }
.modal-brand { display:flex; align-items:center; gap:.75rem; }
.modal-logo { width:52px; height:52px; object-fit:contain; border-radius:10px; box-shadow:0 2px 4px rgba(0,0,0,.25); background:transparent; }
.modal-title { font-size:1.25rem; font-weight:700; letter-spacing:.5px; color:var(--color-brand-blue); }
.modal-hero { display:flex; flex-direction:column; align-items:center; text-align:center; gap:.75rem; margin-top:.5rem; margin-bottom:.5rem; }
.modal-logo-large { width:140px; height:140px; object-fit:contain; filter:drop-shadow(0 4px 8px rgba(0,0,0,.25)); }
.modal-project-name { font-size:1.6rem; font-weight:700; letter-spacing:.8px; color:var(--color-brand-blue); margin:0; }
.modal-tagline { font-size:.85rem; color:var(--color-text-soft); margin:0; }
.simple-team { align-items:flex-start; }
.simple-team .team-list { list-style:disc; padding-left:1.1rem; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.modal-close-btn { background:transparent; border:1px solid transparent; color:var(--color-text-soft); font-size:1rem; line-height:1; padding:.35rem .55rem; border-radius:8px; transition:var(--transition); }
.modal-close-btn:hover, .modal-close-btn:focus { background:var(--color-accent-muted); color:var(--color-brand-blue); outline:none; }
.modal-content { padding:1rem 1.25rem 0; overflow-y:auto; display:flex; flex-direction:column; gap:1.1rem; }
.modal-lead { font-size:.9rem; line-height:1.5; color:var(--color-text-soft); }
.modal-section { display:flex; flex-direction:column; gap:.5rem; }
.modal-section-title { font-size:.75rem; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--color-text-soft); }
.modal-list { margin:0; padding-left:1.1rem; display:flex; flex-direction:column; gap:.35rem; font-size:.7rem; line-height:1.35; }
.modal-list.small { font-size:.6rem; }
.team-list { list-style:disc; }
.modal-details { background:var(--color-bg-alt); border:1px solid var(--color-border); padding:.6rem .75rem .75rem; border-radius:10px; font-size:.65rem; }
.modal-details summary { cursor:pointer; font-weight:600; margin-bottom:.4rem; }
.modal-footer { margin-top:1rem; padding:.9rem 1.25rem 1.25rem; display:flex; gap:.6rem; justify-content:flex-end; border-top:1px solid var(--color-border); background:linear-gradient(var(--color-surface), var(--color-bg-alt)); border-bottom-left-radius:14px; border-bottom-right-radius:14px; }
.modal-overlay[hidden] { display:none !important; }

@media (max-width: 600px) {
  .modal-dialog { max-width:100%; }
  .modal-title { font-size:1.05rem; }
  .modal-logo { width:46px; height:46px; }
  .modal-content { padding:0.85rem 1rem 0; }
  .modal-footer { padding:.8rem 1rem 1rem; }
}