/* /flota/plato.php · plató en falso 3D. Reutiliza .fl-* (flota.css) y .mp-ctrl/.mp-btn/.mp-leyenda (mapa.css, copiadas aquí). */
.pl { max-width: 1240px; }
.fl-tabs { display: flex; gap: .4rem; margin-top: .9rem; }
.fl-tabs a { display: inline-flex; align-items: center; gap: .35rem; min-height: 40px; padding: 0 .9rem; border: 1px solid var(--c-line-2); border-radius: var(--r-sm); color: var(--c-text); text-decoration: none; font-weight: 600; }
.fl-tabs a.is-on { border-color: var(--c-red); background: var(--c-red-a); }
.fl-tabs a.is-lock { color: var(--c-muted); }
.pl-lock h2 { font-size: 1.3rem; }
.pl [hidden] { display: none !important; }

.pl-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1rem; align-items: start; }
@media (max-width: 980px) { .pl-grid { grid-template-columns: 1fr; } }

/* escena */
.pl-escena { position: relative; border: 1px solid var(--c-line-2); border-radius: var(--r); overflow: hidden; background: #05060A; }
.pl-escena::before { content: ""; position: absolute; left: 14px; top: -1px; width: 28px; height: 3px; background: var(--c-red); border-radius: 0 0 2px 2px; z-index: 1; }
#pl-svg { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 640; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
#pl-svg:active { cursor: grabbing; }
#pl-svg:focus-visible { outline: 2px solid var(--c-red); outline-offset: -2px; }
#pl-svg text { font-family: var(--f-mono); text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: #05060A; stroke-width: 4px; }
#pl-svg text.pl-izq { text-anchor: start; }
.pl-km { font-size: 12px; fill: #8C96A6; letter-spacing: .12em; }
.pl-nombre { font-size: 14px; font-weight: 700; fill: #E8ECF2; letter-spacing: .08em; text-transform: uppercase; }
.pl-sub { font-size: 11px; fill: #AEB6C2; letter-spacing: .05em; }
.pl-glifo { font-weight: 800; fill: #fff; }
.pl-num { font-size: 12px; fill: #9FD9D3; letter-spacing: .06em; }
.pl-rotulo { font: 800 34px/1 'Anton', Impact, 'Arial Black', var(--f-sans); fill: #fff; letter-spacing: .02em; text-transform: uppercase; stroke-width: 6px; }
.pl-rotulo tspan.r { fill: #FFC400; }
.pl-chapa { cursor: grab; }
.pl-chapa.is-npc { cursor: default; }
.pl-chapa.is-atacada .pl-rect { stroke: #FFC400; stroke-width: 3; }
.pl-golpe .pl-rect { animation: pl-golpe .5s steps(2) infinite; }
@keyframes pl-golpe { 50% { stroke: #E3262E; stroke-width: 4; } }
@media (prefers-reduced-motion: reduce) { .pl-golpe .pl-rect { animation: none; } }
.pl-sello { position: absolute; right: .7rem; bottom: .6rem; text-align: right; font: 700 .68rem/1.3 var(--f-mono); letter-spacing: .18em; color: #9FB0CC; border: 1px solid #3A4250; padding: .25rem .5rem; border-radius: 3px; background: rgba(5,6,10,.7); pointer-events: none; }
.pl-sello small { display: block; letter-spacing: .06em; font-weight: 400; text-transform: none; color: #7A8494; }

/* reproducir / compartir (debajo de la cámara, a la izquierda) */
.pl-play { position: absolute; left: .6rem; top: .6rem; display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; max-width: 60%; }
.pl-play .mp-btn[aria-pressed="true"] { border-color: #FFC400; color: #FFC400; }
.pl-share-out { font: 600 .72rem/1.3 var(--f-mono); color: #9FB0CC; background: rgba(5,6,10,.8); border: 1px solid #3A4250; border-radius: 3px; padding: .25rem .5rem; max-width: 100%; overflow-wrap: anywhere; }
.pl-share-out:empty { display: none; }
.pl-share-out a { color: #74D4F0; }
.pl-vidahp { font-size: 11px; }
@media (max-width: 640px) { .pl-play { position: static; max-width: none; padding: .5rem .5rem 0; } }

/* controles copiados de /mapa/mapa.css (para no depender de otra hoja) */
.mp-ctrl { position: absolute; right: .6rem; top: .6rem; display: flex; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }
.mp-btn { min-width: 44px; min-height: 44px; padding: 0 .7rem; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; background: rgba(22, 29, 40, .88); border: 1px solid var(--c-line-2); border-radius: var(--r-sm); color: var(--c-text); font: 600 1rem/1 var(--f-mono); cursor: pointer; }
.mp-btn:hover { border-color: var(--c-red); }
.mp-btn:focus-visible { outline: 2px solid var(--c-red); outline-offset: 2px; }
.mp-leyenda { position: absolute; left: .6rem; bottom: .5rem; display: flex; flex-wrap: wrap; gap: .25rem .8rem; margin: 0; padding: .4rem .6rem; list-style: none; background: rgba(5, 6, 10, .78); border: 1px solid var(--c-line); border-radius: var(--r-sm); font: 600 .66rem/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); }
.mp-leyenda li { display: flex; align-items: center; gap: .35rem; }
.mp-sw { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }
.mp-sw--nos { background: #A34DF0; } .mp-sw--amenaza { background: #E3262E; }
.mp-ln { width: 22px; height: 0; border-top: 3px solid #3DE0B0; display: inline-block; }
.pl-ln--cap { border-top: 3px dotted #74D4F0; }
.pl-ring { width: 14px; height: 14px; border-radius: 50%; border: 1px dashed #3DE0B0; display: inline-block; }
@media (max-width: 640px) {
  .mp-leyenda { position: static; border: 0; border-top: 1px solid var(--c-line); border-radius: 0; }
  .mp-ctrl { position: static; justify-content: space-between; padding: .5rem; border-top: 1px solid var(--c-line); }
  .mp-ctrl .mp-btn { flex: 1 1 0; } .mp-btn__t { display: none; }
  .pl-sello { position: static; text-align: left; margin: .4rem .6rem; display: inline-block; }
}

/* panel */
.pl-lado { display: grid; gap: 1rem; }
.pl-olas { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .7rem; }
.pl-ola { min-height: 40px; padding: 0 .8rem; border: 1px solid var(--c-line-2); border-radius: var(--r-sm); background: var(--c-bg-2); color: var(--c-text); font: 600 .85rem/1 var(--f-mono); cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; }
.pl-ola.is-on { border-color: #FFC400; }
.pl-ola .fl-sem { font-size: .6rem; }
.pl-atacada { flex-wrap: wrap; }
.pl-atacada .bx-seg__btn { font-family: var(--f-sans); }
.pl-veredicto { margin: 0; padding: .3rem 0; }
.pl-veredicto h3 { margin: 0 0 .3rem; font-size: 1.4rem; }
.pl-veredicto.is-verde h3 { color: var(--c-ok); } .pl-veredicto.is-ambar h3 { color: var(--c-warn); } .pl-veredicto.is-rojo h3 { color: var(--c-bad); }
.pl-pasos { margin: .5rem 0 0; padding-left: 1.2rem; display: grid; gap: .3rem; font-size: .9rem; }
.pl-vida { display: flex; align-items: center; gap: .5rem; margin: .4rem 0; font: 600 .78rem/1 var(--f-mono); }
.pl-vida__bar { flex: 1; height: 10px; border-radius: 5px; background: var(--c-bg-2); border: 1px solid var(--c-line-2); overflow: hidden; }
.pl-vida__bar i { display: block; height: 100%; background: var(--c-ok); }
.pl-vida.is-ambar .pl-vida__bar i { background: var(--c-warn); } .pl-vida.is-rojo .pl-vida__bar i { background: var(--c-bad); }
#pl-flota .fl-grupo__top { grid-template-columns: minmax(0, 1fr) auto; }
#pl-flota .fl-f--nom { grid-column: 1 / -1; }