/* Fierro7 - página de administración (escritorio primero, usable en móvil) */
[x-cloak] { display: none !important; }
body { background: var(--fondo); }
.adm { min-height: 100vh; }

.adm-barra { display: flex; align-items: center; gap: 16px; padding: 12px 24px; background: var(--tarjeta); border-bottom: 1px solid var(--borde); }
.adm-marca { display: flex; align-items: flex-end; gap: 8px; }
.adm-marca small { font-size: 13px; font-weight: 700; color: var(--suave); }
.adm-yo { margin-left: auto; color: var(--suave); font-size: 14px; }
.adm-mini { min-height: 40px !important; height: 40px; padding: 0 14px !important; font-size: 14px !important; width: auto !important; }

.adm-vacio { max-width: 420px; margin: 80px auto; padding: 0 16px; display: flex; flex-direction: column; gap: 12px; text-align: center; }

.adm-cuerpo { max-width: 1280px; margin: 0 auto; padding: 20px 24px 40px; display: flex; flex-direction: column; gap: 16px; }

.adm-cifras { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.adm-cifras div { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px; padding: 12px; }
.adm-cifras b { display: block; font-size: 26px; }
.adm-cifras span { font-size: 13px; color: var(--suave); }

.adm-herramientas { display: flex; gap: 12px; align-items: center; }
.adm-herramientas .segmentado { width: 280px; flex: none; }
.adm-herramientas input, .adm-herramientas select { max-width: 360px; height: 48px; font-size: 15px; }

.adm-zona { display: flex; gap: 16px; align-items: flex-start; }
.adm-tabla-caja { flex: 1; min-width: 0; overflow-x: auto; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 14px; }
.adm-tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.adm-tabla th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); padding: 10px 12px; border-bottom: 1px solid var(--borde); white-space: nowrap; }
.adm-tabla td { padding: 10px 12px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.adm-tabla tbody tr:last-child td { border-bottom: none; }
.adm-tabla tbody tr { cursor: pointer; }
.adm-tabla tbody tr.sin-clic { cursor: default; }
.adm-tabla tbody tr:hover { background: #F6F8FB; }
.adm-tabla tr.sel { background: var(--azul-claro) !important; }
.adm-tabla tr.apagado td { color: var(--suave); }
.adm-tabla .n { text-align: right; font-variant-numeric: tabular-nums; }
.adm-tabla .d { text-align: right; }
.adm-tabla .boton.enlace { min-height: 0; padding: 4px 8px; }
.adm-nombre { font-weight: 700; }
.adm-sub { font-size: 13px; color: var(--suave); }

.adm-ficha { width: 360px; flex: none; position: sticky; top: 16px; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 14px; padding: 16px; }
.adm-ficha-cab { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.adm-ficha-cab .boton { width: auto; min-height: 0; padding: 4px 8px; }
.adm-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.adm-ficha textarea { font: inherit; font-size: 15px; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--borde-fuerte); width: 100%; box-sizing: border-box; }
.adm-check { display: flex; align-items: center; gap: 10px; font-weight: 600; min-height: 40px; }
.adm-check input { width: 20px; height: 20px; }

.etiqueta-mini { font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 6px; margin-left: 6px; background: #E3E8EF; color: var(--suave); vertical-align: middle; }
.etiqueta-mini.premium { background: var(--azul); color: #FFFFFF; }
.etiqueta-mini.bloq { background: var(--rojo-claro); color: var(--rojo); }

/* Móvil: cifras en 2 filas, ficha debajo a todo el ancho, columnas secundarias ocultas */
@media (max-width: 820px) {
  .adm-barra { padding: 10px 16px; }
  .adm-yo { display: none; }
  .adm-barra .adm-mini { margin-left: auto; }
  .adm-cuerpo { padding: 12px 12px 32px; }
  .adm-cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .adm-cifras b { font-size: 20px; }
  .adm-herramientas { flex-direction: column; align-items: stretch; }
  .adm-herramientas .segmentado { width: auto; }
  .adm-herramientas input, .adm-herramientas select { max-width: none; }
  .adm-zona { flex-direction: column-reverse; align-items: stretch; }
  .adm-ficha { width: auto; position: static; align-self: stretch; }
  .adm-usuarios th:nth-child(5), .adm-usuarios td:nth-child(5),
  .adm-usuarios th:nth-child(6), .adm-usuarios td:nth-child(6),
  .adm-partidas th:nth-child(3), .adm-partidas td:nth-child(3),
  .adm-partidas th:nth-child(5), .adm-partidas td:nth-child(5) { display: none; }
}
.adm-tabla .adm-acciones { display: flex; justify-content: flex-end; gap: 2px; flex-wrap: wrap; }
.boton.enlace.peligro { color: var(--rojo); }
.adm-herramientas .segmentado { width: 380px; }

/* ---------- Mapas ---------- */
.mp { display: flex; gap: 16px; align-items: stretch; height: calc(100vh - 150px); min-height: 520px; }
.mp-panel { width: 320px; flex: none; overflow-y: auto; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.mp-enlaces { display: flex; gap: 14px; font-size: 14px; font-weight: 600; }
.mp-enlaces a { color: var(--azul); }
.mp-bloque { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--borde); }
.mp-bloque summary { font-weight: 700; cursor: pointer; }
details.mp-bloque[open] { gap: 10px; }
.mp-herr button { font-size: 13px; padding: 0 4px; }
.mp-indicacion { margin: 0; font-weight: 600; color: var(--azul-oscuro); }
.mp-hoyos { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; }
.mp-hoyo { position: relative; height: 30px; border: 1.5px solid var(--borde-fuerte); border-radius: 8px; background: var(--tarjeta); font-weight: 700; font-size: 13px; cursor: pointer; padding: 0; }
.mp-hoyo.con-green { background: #2E9E5B; border-color: #2E9E5B; color: #FFFFFF; }
.mp-hoyo.actual { outline: 3px solid var(--azul); outline-offset: 1px; }
.mp-hoyo i { position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mp-fuente { margin-top: auto; font-size: 12px; color: var(--suave); }
.boton.peligro { color: var(--rojo); border-color: var(--rojo); }

.mp-marco { position: relative; flex: 1; min-width: 0; }
.mp-visor { position: absolute; inset: 0; overflow: auto; background: #1B2330; border-radius: 14px; }
.mp-visor .adm-vacio { color: #FFFFFF; }
.mp-lienzo { position: relative; }
.mp-lienzo img { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; }
.mp-lienzo svg { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
.mp-lienzo.herr-revisar svg { cursor: default; }
.mp-lienzo:not(.herr-revisar) .el { pointer-events: none; }
.mp-lienzo.herr-revisar .el { cursor: pointer; }
.el { fill-opacity: .18; }
.el.pend { stroke-dasharray: 6 4; fill-opacity: .08; }
.el.sel { stroke: #FFFFFF !important; fill-opacity: .4; }
.el-green { stroke: #FFE14D; fill: #FFE14D; }
.el-bunker { stroke: #FF4D4D; fill: #FF4D4D; }
.el-agua { stroke: #3DD5FF; fill: #3DD5FF; }
.el-tee { stroke: #FFFFFF; fill: #E040FB; fill-opacity: 1; }
.et { fill: #FFFFFF; font-weight: 800; paint-order: stroke; stroke: #000000; stroke-width: 3px; pointer-events: none; font-family: Inter, sans-serif; }
.mp-zoom { position: absolute; bottom: 12px; right: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.mp-zoom button { width: 40px; height: 40px; border-radius: 10px; border: none; background: var(--tarjeta); font-size: 22px; font-weight: 700; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.mp-cargando { position: absolute; left: 12px; bottom: 12px; padding: 8px 12px; border-radius: 10px; background: var(--tarjeta); font-weight: 700; z-index: 2; }

@media (max-width: 820px) {
  .adm-herramientas .segmentado { width: auto; }
  .mp { flex-direction: column; height: auto; }
  .mp-panel { width: auto; }
  .mp-marco { height: 70vh; flex: none; }
}
.vt { fill: #FFFFFF; stroke: #1B2330; cursor: grab; touch-action: none; }
.vt:active { cursor: grabbing; }
.borrador { fill: none; stroke: #FFFFFF; stroke-dasharray: 5 4; pointer-events: none; }
.borrador-p { fill: #FFFFFF; pointer-events: none; }