/* Atlas Studio — fichas temáticas flotantes (js/modules/panels.js)
 * Ventanas dentro del tablero del mapa: se arrastran por la barra de título, se pliegan,
 * se redimensionan por la esquina y se reabren desde el lanzador de la esquina inferior
 * derecha. Por debajo de 760 px el tablero cambia a hojas inferiores con pestañas. */
:root {
  --pz-panel: #0b1b28;
  --pz-panel-2: #0f2434;
  --pz-aqua: var(--aqua, #49d6c5);
  --pz-gold: var(--gold, #f2b84b);
  --pz-line: var(--line, rgba(157, 190, 205, .14));
  --pz-line-2: var(--line-strong, rgba(157, 190, 205, .24));
  --pz-bar: 38px;
}

/* ------------------------------------------------------------------ */
/* Capa                                                                */
/* ------------------------------------------------------------------ */
.pz-layer {
  position: absolute; inset: 0; z-index: 40; pointer-events: none;
  font-family: "DM Sans", sans-serif; overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* Ventana                                                             */
/* ------------------------------------------------------------------ */
.pz-panel {
  position: absolute; top: 0; left: 0; display: flex; flex-direction: column;
  width: 336px; min-width: 250px; max-width: calc(100% - 24px);
  pointer-events: auto; overflow: hidden;
  border: 1px solid var(--pz-line-2); border-radius: 15px;
  background: linear-gradient(180deg, rgba(15, 36, 52, .97), rgba(11, 27, 40, .97));
  box-shadow: 0 18px 46px rgba(0, 4, 9, .5), 0 0 0 1px rgba(73, 214, 197, .05) inset;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: var(--ink, #eaf3f7);
  opacity: 0; transform: translate3d(0, 0, 0) scale(.97);
  transition: opacity .18s ease, box-shadow .2s ease, border-color .2s ease;
  will-change: transform;
  contain: layout paint;
}
.pz-panel.pz-in { opacity: 1; }
.pz-panel.pz-out { opacity: 0; transition: opacity .13s ease; }
.pz-panel.pz-focus { border-color: rgba(73, 214, 197, .38); box-shadow: 0 22px 56px rgba(0, 4, 9, .58), 0 0 0 1px rgba(73, 214, 197, .12) inset; }
.pz-panel.pz-dragging { transition: none; box-shadow: 0 30px 70px rgba(0, 4, 9, .65); }
.pz-panel.pz-dragging .pz-body { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .pz-panel { transition: none; } }

/* Barra de título */
.pz-bar {
  flex: none; display: flex; align-items: center; gap: 9px; height: var(--pz-bar); padding: 0 6px 0 10px;
  border-bottom: 1px solid var(--pz-line); cursor: grab; touch-action: none; user-select: none;
  background: linear-gradient(90deg, rgba(73, 214, 197, .1), rgba(242, 184, 75, .05) 70%, transparent);
}
.pz-panel.pz-dragging .pz-bar { cursor: grabbing; }
.pz-bar:focus-visible { outline: 2px solid var(--pz-aqua); outline-offset: -2px; }
.pz-ico { flex: none; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; color: #06201e;
  background: linear-gradient(135deg, var(--pz-aqua), var(--pz-gold)); }
.pz-ico svg { width: 13px; height: 13px; }
.pz-bar h3 { flex: 1 1 auto; min-width: 0; margin: 0; font: 800 12.5px Manrope, sans-serif; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .01em; }
.pz-act { flex: none; display: flex; gap: 2px; }
.pz-btn { width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 7px;
  background: none; color: var(--muted, #91a6b4); cursor: pointer; transition: .15s ease; }
.pz-btn svg { width: 15px; height: 15px; transition: transform .18s ease; }
.pz-btn:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.pz-btn:focus-visible { outline: 2px solid var(--pz-aqua); outline-offset: -2px; }

/* Cuerpo */
.pz-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 11px 12px 14px; font-size: 12.5px; line-height: 1.55; color: #c7d7de;
  scrollbar-width: thin; scrollbar-color: var(--pz-line-2) transparent;
}
.pz-body::-webkit-scrollbar { width: 8px; }
.pz-body::-webkit-scrollbar-thumb { background: var(--pz-line-2); border-radius: 8px; }
.pz-body:focus-visible { outline: 2px solid var(--pz-aqua); outline-offset: -3px; }
.pz-panel.pz-collapsed { height: var(--pz-bar) !important; }
.pz-panel.pz-collapsed .pz-body, .pz-panel.pz-collapsed .pz-grip { display: none; }

/* Esquina de redimensión */
.pz-grip { position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; cursor: nwse-resize; touch-action: none; }
.pz-grip::after { content: ""; position: absolute; right: 4px; bottom: 4px; width: 7px; height: 7px;
  border-right: 2px solid rgba(157, 190, 205, .42); border-bottom: 2px solid rgba(157, 190, 205, .42); border-radius: 0 0 3px 0; }

/* ------------------------------------------------------------------ */
/* Tipografía del contenido                                            */
/* ------------------------------------------------------------------ */
.pz-body p { margin: 0 0 8px; }
.pz-body b, .pz-body strong { color: #fff; font-weight: 700; }
.pz-body i { font-style: italic; color: #a8c0c9; }
.pz-lead { color: #d8e6ec; font-size: 13px; line-height: 1.55; }
.pz-body h4 { display: flex; align-items: center; gap: 6px; margin: 14px 0 7px;
  font: 800 10.5px Manrope, sans-serif; letter-spacing: .09em; text-transform: uppercase; color: var(--pz-gold); }
.pz-body h4 svg { width: 13px; height: 13px; color: var(--pz-aqua); }
.pz-body h4:first-child { margin-top: 2px; }
.pz-note { color: var(--muted, #91a6b4); font-size: 11.5px; line-height: 1.45; }
.pz-src { display: flex; gap: 6px; align-items: flex-start; margin: 12px 0 0 !important; padding-top: 9px;
  border-top: 1px solid var(--pz-line); color: var(--muted-2, #617887); font-size: 10.5px; line-height: 1.45; }
.pz-src svg { width: 12px; height: 12px; flex: none; margin-top: 2px; }

.pz-did { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 8px !important; padding: 9px 11px;
  border-radius: 10px; border: 1px solid rgba(242, 184, 75, .26); background: rgba(242, 184, 75, .07);
  color: #e7dcc4; font-size: 11.8px; line-height: 1.5; }
.pz-did svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--pz-gold); }
.pz-did b { color: var(--pz-gold); }
.pz-warn { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 !important; padding: 9px 11px;
  border-radius: 10px; border: 1px solid rgba(255, 123, 123, .24); background: rgba(255, 123, 123, .07);
  color: #e8d2d2; font-size: 11.8px; line-height: 1.5; }
.pz-warn svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--danger, #ff7b7b); }

/* Cifras grandes */
.pz-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
.pz-stats > div { display: grid; gap: 1px; padding: 7px 9px; border-radius: 10px; min-width: 0;
  background: rgba(73, 214, 197, .06); border: 1px solid rgba(73, 214, 197, .16); }
.pz-stats small { font: 700 9px Manrope, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: var(--muted, #91a6b4); }
.pz-stats b { font: 800 14px Manrope, sans-serif; color: #fff; overflow-wrap: anywhere; }
.pz-stats em { font-style: normal; font-size: 10px; color: var(--muted-2, #617887); line-height: 1.3; }

/* Filas de definición */
.pz-rows { margin: 0 0 10px; display: grid; gap: 5px; }
.pz-rows > div { padding: 7px 10px; border-radius: 9px; background: rgba(255, 255, 255, .035); border: 1px solid var(--pz-line); }
.pz-rows dt { font: 700 9.5px Manrope, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: var(--pz-aqua); }
.pz-rows dd { margin: 2px 0 0; color: #e2edf1; font-size: 12.3px; line-height: 1.45; overflow-wrap: anywhere; }
.pz-rows dd small { display: block; margin-top: 2px; color: var(--muted, #91a6b4); font-size: 11px; line-height: 1.4; }

/* Gráficos */
.pz-chart { margin: 0 0 11px; padding: 9px 10px 7px; border-radius: 11px;
  background: rgba(0, 0, 0, .2); border: 1px solid var(--pz-line); }
.pz-chart figcaption { margin-top: 5px; color: var(--muted, #91a6b4); font-size: 10.8px; line-height: 1.4; }
.pz-bars, .pz-profile { display: block; width: 100%; height: auto; }
.pz-bars .lbl { fill: #bdcfd7; font: 600 9.5px "DM Sans", sans-serif; }
.pz-bars .val { fill: #fff; font: 800 9.5px Manrope, sans-serif; }
.pz-bars .track { fill: rgba(255, 255, 255, .06); }
.pz-bars .bar { fill: rgba(73, 214, 197, .72); }
.pz-bars .self .bar { fill: var(--pz-gold); }
.pz-bars .self .lbl { fill: #fff; font-weight: 800; }
.pz-profile .prof { fill: none; stroke: var(--pz-aqua); stroke-width: 1.6; stroke-linejoin: round; }
.pz-profile .fill { fill: rgba(73, 214, 197, .14); stroke: none; }
.pz-profile .sea { stroke: rgba(120, 190, 235, .55); stroke-width: 1; stroke-dasharray: 3 3; }

/* Rampa de color / clases */
.pz-ramp { display: grid; gap: 4px; margin-bottom: 10px; }
.pz-ramp-row { display: grid; grid-template-columns: 14px minmax(0, auto) 1fr; align-items: baseline; gap: 8px;
  padding: 6px 9px; border-radius: 9px; background: rgba(255, 255, 255, .03); border: 1px solid var(--pz-line); }
.pz-swatch { width: 12px; height: 12px; border-radius: 4px; align-self: center; border: 1px solid rgba(0, 0, 0, .35); }
.pz-ramp-row b { font: 700 12px Manrope, sans-serif; color: #fff; white-space: nowrap; }
.pz-ramp-row small { color: var(--muted, #91a6b4); font-size: 11px; line-height: 1.4; }

/* Pisos térmicos */
.pz-floors { display: grid; gap: 5px; margin-bottom: 10px; }
.pz-floor { display: flex; gap: 9px; padding: 7px 10px; border-radius: 10px;
  background: rgba(255, 255, 255, .035); border: 1px solid var(--pz-line); }
.pz-floor .pz-swatch { margin-top: 3px; flex: none; }
.pz-floor b { display: block; font: 800 12.5px Manrope, sans-serif; color: #fff; }
.pz-floor i { display: block; font-style: normal; font-size: 11px; color: var(--pz-aqua); font-weight: 700; margin: 1px 0 2px; }
.pz-floor small { display: block; color: var(--muted, #91a6b4); font-size: 11px; line-height: 1.4; }

/* Tablas */
.pz-table-wrap { margin-bottom: 10px; border-radius: 10px; border: 1px solid var(--pz-line); overflow: hidden; }
.pz-table { width: 100%; border-collapse: collapse; font-size: 11.8px; }
.pz-table th { padding: 6px 9px; text-align: left; font: 700 9px Manrope, sans-serif; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted, #91a6b4); background: rgba(255, 255, 255, .04); }
.pz-table th + th, .pz-table td.num { text-align: right; }
.pz-table td { padding: 7px 9px; border-top: 1px solid var(--pz-line); color: #cddbe1; vertical-align: top; }
.pz-table td b { display: block; color: #fff; font-size: 12.2px; }
.pz-table td small { display: block; margin-top: 1px; color: var(--muted-2, #617887); font-size: 10.5px; line-height: 1.38; }
.pz-table td.num { color: #fff; font: 700 12px Manrope, sans-serif; white-space: nowrap; }
.pz-table td.num small { font-weight: 500; }
.pz-table tbody tr:hover { background: rgba(73, 214, 197, .05); }

/* Fichas de especies */
.pz-cards { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 5px; }
.pz-cards li { display: flex; gap: 9px; padding: 7px 10px; border-radius: 10px;
  background: rgba(255, 255, 255, .035); border: 1px solid var(--pz-line); }
.pz-dot { flex: none; width: 10px; height: 10px; margin-top: 4px; border-radius: 50%;
  background: var(--pz-aqua); box-shadow: 0 0 0 3px rgba(255, 255, 255, .05); }
.pz-cards b { color: #fff; font: 800 12.3px Manrope, sans-serif; }
.pz-cards i { font-size: 11px; color: #94b2ae; }
.pz-cards small { display: block; margin-top: 2px; color: var(--muted, #91a6b4); font-size: 11px; line-height: 1.42; }

/* Etiquetas de lo visible */
.pz-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px !important; }
.pz-tags span { padding: 3px 8px; border-radius: 99px; font: 700 10.5px Manrope, sans-serif; color: #06201e;
  background: rgba(73, 214, 197, .85); }

/* Selector segmentado (regiones de fauna) */
.pz-seg { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 10px; padding: 3px; border-radius: 10px;
  background: rgba(0, 0, 0, .22); border: 1px solid var(--pz-line); }
.pz-seg button { flex: 1 1 auto; min-width: 62px; padding: 5px 7px; border: 0; border-radius: 7px; cursor: pointer;
  background: none; color: var(--muted, #91a6b4); font: 700 10.5px Manrope, sans-serif; transition: .15s ease; }
.pz-seg button:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.pz-seg button.on { background: rgba(73, 214, 197, .9); color: #06201e; }
.pz-seg button:focus-visible { outline: 2px solid var(--pz-aqua); outline-offset: 1px; }

/* ------------------------------------------------------------------ */
/* Lanzador                                                            */
/* ------------------------------------------------------------------ */
.pz-dock {
  position: absolute; right: 12px; bottom: 12px; z-index: 44; display: flex; flex-direction: column;
  align-items: flex-end; gap: 6px; font-family: "DM Sans", sans-serif; pointer-events: none;
}
.pz-dock[hidden] { display: none; }
.pz-dock > * { pointer-events: auto; }
.pz-dock-toggle {
  order: 2; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px;
  border: 1px solid var(--pz-line-2); border-radius: 11px; cursor: pointer;
  background: rgba(11, 27, 40, .93); color: #dbe9ef; font: 700 12px Manrope, sans-serif;
  box-shadow: 0 10px 26px rgba(0, 4, 9, .45); backdrop-filter: blur(10px); transition: .18s ease;
}
.pz-dock-toggle svg { width: 15px; height: 15px; color: var(--pz-aqua); }
.pz-dock-toggle b { min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; display: grid; place-items: center;
  background: var(--pz-gold); color: #241703; font: 800 10px Manrope, sans-serif; }
.pz-dock-toggle:hover { border-color: rgba(73, 214, 197, .45); background: rgba(16, 38, 54, .96); color: #fff; }
.pz-dock-toggle:focus-visible { outline: 2px solid var(--pz-aqua); outline-offset: 2px; }
.pz-dock-list {
  order: 1; width: 236px; max-width: calc(100vw - 32px); padding: 6px; border-radius: 13px;
  border: 1px solid var(--pz-line-2); background: rgba(11, 27, 40, .97);
  box-shadow: 0 16px 40px rgba(0, 4, 9, .55); backdrop-filter: blur(12px);
  animation: pzDockIn .16s ease-out;
}
@keyframes pzDockIn { from { opacity: 0; transform: translateY(6px); } }
.pz-dock-list[hidden] { display: none; }
.pz-dock-head { display: flex; align-items: center; gap: 7px; margin: 2px 4px 6px; padding-bottom: 6px;
  border-bottom: 1px solid var(--pz-line); color: var(--muted, #91a6b4);
  font: 700 9.5px Manrope, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.pz-dock-head svg { width: 12px; height: 12px; color: var(--pz-gold); }
.pz-dock-list button { width: 100%; min-height: 34px; display: flex; align-items: center; gap: 9px; padding: 0 9px;
  border: 0; border-radius: 9px; background: none; color: #d2e2e8; cursor: pointer; text-align: left;
  font: 600 12px "DM Sans", sans-serif; transition: .14s ease; }
.pz-dock-list button svg { width: 15px; height: 15px; flex: none; color: var(--pz-aqua); }
.pz-dock-list button span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pz-dock-list button:hover { background: rgba(73, 214, 197, .11); color: #fff; }
.pz-dock-list button:focus-visible { outline: 2px solid var(--pz-aqua); outline-offset: -2px; }
.pz-dock-list button.on { background: rgba(73, 214, 197, .16); color: #fff; font-weight: 700; }
.pz-dock-list button.on svg:last-child { color: var(--pz-gold); width: 14px; height: 14px; }

/* ------------------------------------------------------------------ */
/* Modo hoja: tabletas y teléfonos (tablero < 760 px)                  */
/* ------------------------------------------------------------------ */
.pz-layer.pz-sheets .pz-panel {
  inset: auto 0 44px 0; width: auto !important; max-width: none; height: min(56%, 420px) !important;
  transform: none !important; border-radius: 16px 16px 0 0; border-bottom: 0; display: none;
}
.pz-layer.pz-sheets .pz-panel.pz-sheet-on { display: flex; animation: pzSheetUp .2s cubic-bezier(.2, .8, .2, 1); }
.pz-layer.pz-sheets .pz-panel.pz-collapsed { height: var(--pz-bar) !important; }
@keyframes pzSheetUp { from { transform: translateY(26px); opacity: 0; } }
.pz-layer.pz-sheets .pz-bar { cursor: default; height: 42px; }
.pz-layer.pz-sheets .pz-grip { display: none; }
.pz-layer.pz-sheets .pz-btn { width: 32px; height: 32px; }

.pz-tabs {
  position: absolute; inset: auto 0 0 0; z-index: 3; display: flex; gap: 4px; padding: 5px 6px;
  overflow-x: auto; scrollbar-width: none; pointer-events: auto;
  background: rgba(7, 19, 29, .96); border-top: 1px solid var(--pz-line);
  backdrop-filter: blur(10px);
}
.pz-tabs::-webkit-scrollbar { display: none; }
.pz-tabs[hidden] { display: none; }
.pz-tabs button { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px;
  border: 1px solid var(--pz-line); border-radius: 9px; background: rgba(255, 255, 255, .03);
  color: var(--muted, #91a6b4); font: 700 11.5px Manrope, sans-serif; cursor: pointer; white-space: nowrap; }
.pz-tabs button svg { width: 14px; height: 14px; }
.pz-tabs button.on { background: rgba(73, 214, 197, .9); border-color: transparent; color: #06201e; }
.pz-tabs button:focus-visible { outline: 2px solid var(--pz-aqua); outline-offset: 1px; }

/* En modo hoja el lanzador se acomoda al final de la barra de pestañas */
.pz-sheet-mode .pz-dock { bottom: 5px; right: 6px; }
.pz-sheet-mode .pz-dock-list { width: 214px; margin-bottom: 4px; }
.pz-layer.pz-sheets .pz-tabs { padding-right: 54px; }

/* Pantallas muy estrechas (360 px) */
@media (max-width: 420px) {
  .pz-stats { grid-template-columns: minmax(0, 1fr); }
  .pz-dock-toggle span { display: none; }
  .pz-dock-toggle { height: 36px; padding: 0 10px; }
  .pz-body { padding: 10px 11px 13px; }
  .pz-ramp-row { grid-template-columns: 14px 1fr; }
  .pz-ramp-row small { grid-column: 2; }
}

/* Impresión y exportación: las fichas no forman parte del mapa */
@media print { .pz-layer, .pz-dock { display: none !important; } }