/* ─── HtMarkerShapes — Marcadores SVG para plano de zona ─────────────────
   Cada marcador es un div con un SVG inline posicionado sobre el mapa.
   ──────────────────────────────────────────────────────────────────────── */

.ht-map-marker-shape {
    position: absolute;
    pointer-events: all;
    cursor: grab;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
    transition: filter 0.2s, transform 0.2s;
    user-select: none;
    -webkit-user-select: none;
    outline: none;
}

/* ── Seleccionado: escalar el SVG interno sin afectar al wrapper/rotacion ── */
.ht-table-marker.is-selected > svg {
    transform: scale(1.12);
}
.ht-table-marker.is-selected {
    filter: drop-shadow(0 2px 5px rgba(26, 115, 232, 0.4));
    z-index: 10;
}

.ht-map-marker-shape svg {
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.ht-map-marker-shape:hover {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
    z-index: 10;
}

.ht-map-marker-shape:active {
    cursor: grabbing;
}

/* ── Estado de drag ────────────────────────────────────────────────────── */
.ht-map-marker-shape--dragging {
    cursor: grabbing !important;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2)) !important;
    z-index: 100 !important;
    transition: none !important;
}

/* ── Handle de rotacion ────────────────────────────────────────────────── */
/* ── Handle de rotacion (esquina superior izquierda, dentro del elemento) ── */
.ht-map-marker-shape__rotate-handle {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #4a90d9;
    cursor: grab;
    pointer-events: all;
    z-index: 20;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    display: none;
}

.ht-map-marker-shape__rotate-handle:hover {
    background: #4a90d9;
    border-color: #2b6cb0;
}

.ht-map-marker-shape__rotate-handle:active {
    cursor: grabbing;
}

/* Mostrar handles al hover o seleccion (editor) */
.ht-floor-map-editor .ht-map-marker-shape:hover .ht-map-marker-shape__rotate-handle,
.ht-floor-map-editor .ht-map-marker-shape.is-selected .ht-map-marker-shape__rotate-handle,
.ht-floor-map-editor .ht-map-decor-shape:hover .ht-map-marker-shape__rotate-handle,
.ht-floor-map-editor .ht-map-decor-shape.is-selected .ht-map-marker-shape__rotate-handle {
    display: block;
}

/* Linea de conexion (oculta — no necesaria con handles internos) */
.ht-map-marker-shape__rotate-line {
    display: none !important;
}

/* ── Handle de resize (esquina inferior derecha, dentro del elemento) ── */
.ht-map-marker-shape__resize-handle {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 14px;
    height: 14px;
    border-radius: 2px;
    background: #fff;
    border: 2px solid #10b981;
    cursor: nwse-resize;
    pointer-events: all;
    z-index: 20;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    display: none;
}

.ht-map-marker-shape__resize-handle:hover {
    background: #10b981;
    border-color: #059669;
}

.ht-floor-map-editor .ht-map-marker-shape:hover .ht-map-marker-shape__resize-handle,
.ht-floor-map-editor .ht-map-marker-shape.is-selected .ht-map-marker-shape__resize-handle,
.ht-floor-map-editor .ht-map-decor-shape:hover .ht-map-marker-shape__resize-handle,
.ht-floor-map-editor .ht-map-decor-shape.is-selected .ht-map-marker-shape__resize-handle {
    display: block;
}

/* ── Tooltip ───────────────────────────────────────────────────────────── */
.ht-map-marker-shape__tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 30;
}

.ht-map-marker-shape:hover .ht-map-marker-shape__tooltip {
    opacity: 1;
}

/* ── Angulo tooltip durante rotacion ───────────────────────────────────── */
.ht-map-marker-shape__angle-badge {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: #4a90d9;
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    z-index: 30;
}

/* ─── Selector de forma (grid en modal) ────────────────────────────────── */
.ht-shape-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
}

.ht-shape-picker__item {
    width: 52px;
    height: 52px;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    background: #fff;
    transition: border-color 0.15s, background 0.15s;
}

.ht-shape-picker__item:hover {
    border-color: #4a90d9;
    background: #f0f7ff;
}

.ht-shape-picker__item--active {
    border-color: #4a90d9;
    background: #e3f2fd;
    box-shadow: 0 0 0 2px rgba(74, 144, 217, 0.3);
}

.ht-shape-picker__item svg {
    width: 100%;
    height: 100%;
}

.ht-shape-picker__group-label {
    width: 100%;
    font-size: 11px;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
    margin-bottom: 2px;
    padding-left: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MARCADORES DE MESA — Estados via CSS classes
   Los SVG usan clases: .ht-table-surface, .ht-chair-back, .ht-chair-seat,
   .ht-bench, .ht-bench-back, .ht-table-number
   ═══════════════════════════════════════════════════════════════════════════ */

.ht-table-marker {
    overflow: visible;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Transiciones suaves para cambios de estado */
.ht-table-surface,
.ht-chair-seat,
.ht-chair-back,
.ht-bench,
.ht-bench-back,
.ht-table-number {
    transition: all 0.3s ease;
}

/* ── Estructura base (tema claro: fondo claro → mesas oscuras, texto claro) ── */
.ht-table-marker .ht-table-surface { fill: #0f172a; stroke: none; }
.ht-table-marker .ht-chair-seat    { fill: #0f172a; stroke: none; }
.ht-table-marker .ht-bench         { fill: #0f172a; stroke: none; }
.ht-table-marker .ht-bench-back    { fill: #0f172a; stroke: none; }
.ht-table-marker .ht-bed-frame     { fill: none; stroke: #0f172a; stroke-width: 2; }
.ht-table-marker .ht-bed-surface   { fill: #0f172a; }
.ht-table-marker .ht-bed-pillow    { fill: #ffffff; opacity: 0.35; }
.ht-table-marker .ht-bed-divider   { stroke: currentColor; opacity: 0.15; }
.ht-table-marker .ht-parasol-ring  { stroke: #ffffff; opacity: 0.4; }
.ht-table-marker .ht-bed-label     { font-family: 'Inter', system-ui, sans-serif; font-weight: 800; fill: #ffffff; letter-spacing: 0.5px; }
.ht-table-marker .ht-table-number  { font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 13px; fill: #e2e2e5; }
.ht-table-marker .ht-sofa-label    { font-family: 'Inter', system-ui, sans-serif; font-weight: 500; font-size: 11px; fill: #0f172a; letter-spacing: 0.05em; }

/* ── ESTADO: LIBRE (is-available) — Esmeralda ────────────────────────── */
.ht-table-marker.is-available { filter: drop-shadow(0 1px 3px rgba(16, 185, 129, 0.3)); }
.ht-table-marker.is-available .ht-table-surface { fill: #10b981; }
.ht-table-marker.is-available .ht-chair-seat    { fill: #10b981; }
.ht-table-marker.is-available .ht-bench-back    { fill: #10b981; }
.ht-table-marker.is-available .ht-bench         { fill: #10b981; }
.ht-table-marker.is-available .ht-bed-frame     { stroke: #10b981; }
.ht-table-marker.is-available .ht-bed-surface   { fill: #10b981; }
.ht-table-marker.is-available .ht-bed-label     { fill: #ffffff; }
.ht-table-marker.is-available .ht-sofa-label    { fill: #10b981; }

/* ── ESTADO: OCUPADA (is-occupied) — Gris apagado ────────────────────── */
.ht-map-marker-shape.is-occupied { pointer-events: none !important; cursor: default !important; }
.ht-table-marker.is-occupied { opacity: 0.45; filter: grayscale(100%) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.08)); pointer-events: none; }
.ht-table-marker.is-occupied .ht-table-surface  { fill: #94a3b8; }
.ht-table-marker.is-occupied .ht-chair-seat     { fill: #94a3b8; }
.ht-table-marker.is-occupied .ht-bench-back     { fill: #94a3b8; }
.ht-table-marker.is-occupied .ht-bench          { fill: #94a3b8; }
.ht-table-marker.is-occupied .ht-bed-frame      { stroke: #94a3b8; }
.ht-table-marker.is-occupied .ht-bed-surface    { fill: #94a3b8; }
.ht-table-marker.is-occupied .ht-bed-label      { fill: #ffffff; }
.ht-table-marker.is-occupied .ht-table-number   { fill: #cbd5e1; }
.ht-table-marker.is-occupied .ht-sofa-label     { fill: #64748b; }

/* ── ESTADO: SELECCIONADA (is-selected) — Azul ───────────────────────── */
.ht-table-marker.is-selected .ht-table-surface  { fill: #1e88e5; }
.ht-table-marker.is-selected .ht-chair-seat     { fill: #0f172a; }
.ht-table-marker.is-selected .ht-bench-back     { fill: #0f172a; }
.ht-table-marker.is-selected .ht-bench          { fill: #0f172a; }
.ht-table-marker.is-selected .ht-bed-frame      { stroke: #0f172a; }
.ht-table-marker.is-selected .ht-bed-surface    { fill: #0f172a; }
.ht-table-marker.is-selected .ht-bed-label      { fill: #ffffff; }
.ht-table-marker.is-selected .ht-sofa-label     { fill: #ffffff; }

/* ── ESTADO: PARCIALMENTE OCUPADA (is-partially) — Ambar ─────────────── */
.ht-table-marker.is-partially { filter: drop-shadow(0 1px 3px rgba(245, 158, 11, 0.35)); }
.ht-table-marker.is-partially .ht-table-surface { fill: #f59e0b; }
.ht-table-marker.is-partially .ht-chair-seat    { fill: #f59e0b; }
.ht-table-marker.is-partially .ht-bench-back    { fill: #f59e0b; }
.ht-table-marker.is-partially .ht-bench         { fill: #f59e0b; }
.ht-table-marker.is-partially .ht-bed-frame     { stroke: #f59e0b; }
.ht-table-marker.is-partially .ht-bed-surface   { fill: #f59e0b; }
.ht-table-marker.is-partially .ht-bed-label     { fill: #ffffff; }
.ht-table-marker.is-partially .ht-sofa-label    { fill: #f59e0b; }

/* ═══════════════════════════════════════════════════════════════════════════
   TEMA OSCURO — Fondo oscuro del mapa → shapes claros (invertidos)
   Clase .ht-map-theme-dark en el contenedor del mapa o en __world
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Base oscura: fondo oscuro → mesas claras, texto negro ────────────── */
.ht-map-theme-dark .ht-table-marker .ht-table-surface { fill: #e2e2e5; stroke: none; }
.ht-map-theme-dark .ht-table-marker .ht-chair-seat    { fill: #e2e2e5; }
.ht-map-theme-dark .ht-table-marker .ht-bench-back    { fill: #e2e2e5; }
.ht-map-theme-dark .ht-table-marker .ht-bench         { fill: #e2e2e5; }
.ht-map-theme-dark .ht-table-marker .ht-bed-frame     { stroke: #e2e2e5; }
.ht-map-theme-dark .ht-table-marker .ht-bed-surface   { fill: #e2e2e5; }
.ht-map-theme-dark .ht-table-marker .ht-bed-pillow    { fill: #1a1c1e; }
.ht-map-theme-dark .ht-table-marker .ht-bed-divider   { stroke: currentColor; opacity: 0.2; }
.ht-map-theme-dark .ht-table-marker .ht-parasol-ring  { stroke: #1a1c1e; opacity: 0.4; }
.ht-map-theme-dark .ht-table-marker .ht-bed-label     { fill: #1a1c1e; }
.ht-map-theme-dark .ht-table-marker .ht-table-number  { fill: #1a1c1e; }
.ht-map-theme-dark .ht-table-marker .ht-sofa-label    { fill: #e2e2e5; }

/* ── Estados sobre tema oscuro ───────────────────────────────────────── */
.ht-map-theme-dark .ht-table-marker.is-available .ht-table-surface { fill: #81c995; }
.ht-map-theme-dark .ht-table-marker.is-available .ht-chair-seat    { fill: #81c995; }
.ht-map-theme-dark .ht-table-marker.is-available .ht-bench-back    { fill: #81c995; }
.ht-map-theme-dark .ht-table-marker.is-available .ht-bench         { fill: #81c995; }
.ht-map-theme-dark .ht-table-marker.is-available .ht-bed-frame     { stroke: #81c995; }
.ht-map-theme-dark .ht-table-marker.is-available .ht-bed-surface   { fill: #81c995; }
.ht-map-theme-dark .ht-table-marker.is-available .ht-bed-label     { fill: #1a1c1e; }
.ht-map-theme-dark .ht-table-marker.is-available .ht-sofa-label    { fill: #81c995; }

.ht-map-theme-dark .ht-table-marker.is-occupied .ht-table-surface  { fill: #42474e; }
.ht-map-theme-dark .ht-table-marker.is-occupied .ht-chair-seat     { fill: #42474e; }
.ht-map-theme-dark .ht-table-marker.is-occupied .ht-bench-back     { fill: #42474e; }
.ht-map-theme-dark .ht-table-marker.is-occupied .ht-bench          { fill: #42474e; }
.ht-map-theme-dark .ht-table-marker.is-occupied .ht-bed-frame      { stroke: #42474e; }
.ht-map-theme-dark .ht-table-marker.is-occupied .ht-bed-surface    { fill: #42474e; }
.ht-map-theme-dark .ht-table-marker.is-occupied .ht-bed-label      { fill: #1a1c1e; }
.ht-map-theme-dark .ht-table-marker.is-occupied .ht-table-number   { fill: #6c7583; }
.ht-map-theme-dark .ht-table-marker.is-occupied .ht-sofa-label     { fill: #6c7583; }

.ht-map-theme-dark .ht-table-marker.is-selected .ht-table-surface  { fill: #8ab4f8; }
.ht-map-theme-dark .ht-table-marker.is-selected .ht-chair-seat     { fill: #8ab4f8; }
.ht-map-theme-dark .ht-table-marker.is-selected .ht-bench-back     { fill: #8ab4f8; }
.ht-map-theme-dark .ht-table-marker.is-selected .ht-bench          { fill: #8ab4f8; }
.ht-map-theme-dark .ht-table-marker.is-selected .ht-bed-frame      { stroke: #8ab4f8; }
.ht-map-theme-dark .ht-table-marker.is-selected .ht-bed-surface    { fill: #8ab4f8; }
.ht-map-theme-dark .ht-table-marker.is-selected .ht-bed-label      { fill: #1a1c1e; }
.ht-map-theme-dark .ht-table-marker.is-selected .ht-table-number   { fill: #1a1c1e; }
.ht-map-theme-dark .ht-table-marker.is-selected .ht-sofa-label     { fill: #8ab4f8; }

.ht-map-theme-dark .ht-table-marker.is-partially .ht-table-surface { fill: #fbd28b; }
.ht-map-theme-dark .ht-table-marker.is-partially .ht-chair-seat    { fill: #fbd28b; }
.ht-map-theme-dark .ht-table-marker.is-partially .ht-bench-back    { fill: #fbd28b; }
.ht-map-theme-dark .ht-table-marker.is-partially .ht-bench         { fill: #fbd28b; }
.ht-map-theme-dark .ht-table-marker.is-partially .ht-bed-frame     { stroke: #fbd28b; }
.ht-map-theme-dark .ht-table-marker.is-partially .ht-bed-surface   { fill: #fbd28b; }
.ht-map-theme-dark .ht-table-marker.is-partially .ht-bed-label     { fill: #1a1c1e; }
.ht-map-theme-dark .ht-table-marker.is-partially .ht-sofa-label    { fill: #fbd28b; }

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT TEMPLATES — Plantillas de fondo del plano
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tema claro (fondo claro → estructura oscura) ────────────────────── */
.ht-layout-wall       { stroke: #334155; }
.ht-layout-wall-solid { fill: #334155; }
.ht-layout-wall-thin  { stroke: #64748b; }
.ht-layout-wall-thin-solid { fill: #94a3b8; }
.ht-layout-floor      { fill: #ffffff; }
.ht-layout-floor-alt  { fill: #f1f5f9; }
.ht-layout-glass      { stroke: #3b82f6; }
.ht-layout-entrance   { stroke: #10b981; }
.ht-layout-label      { fill: #64748b; font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 28px; letter-spacing: 0.15em; }
.ht-layout-pool       { fill: #4db8d9; stroke: #9ca3af; stroke-width: 4; }
.ht-layout-pool-wave  { stroke: #3b82f6; }
.ht-layout-sand       { fill: #FFF3E0; }
.ht-layout-sand-wet   { fill: #F5E6D3; }
.ht-layout-sea        { fill: #0077a3; }
.ht-layout-sea-wave   { stroke: #4dd0e1; opacity: 0.4; }
.ht-layout-shore      { stroke: #ffffff; opacity: 0.4; }
.ht-layout-wood       { fill: #8B5E3C; }
.ht-layout-wood-edge  { stroke: #5C3A1E; }
.ht-layout-vegetation { fill: #3a5c42; stroke: #81c995; stroke-width: 3; opacity: 0.85; }
/* ── Text labels ─────────────────────────────────────────────────────── */
.ht-text-label        { fill: #0f172a; font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 0.1em; }
.ht-map-theme-dark .ht-text-label { fill: #e2e2e5; }

.ht-pool-water        { fill: #3b9fc2; stroke: #0f172a; stroke-width: 2; }
.ht-pool-detail       { stroke: #ffffff; fill: none; opacity: 0.25; }
.ht-pool-step         { fill: #ffffff; opacity: 0.12; }

/* ── Tema oscuro (fondo oscuro → estructura clara) ───────────────────── */
.ht-map-theme-dark .ht-layout-wall       { stroke: #c4c6d0; }
.ht-map-theme-dark .ht-layout-wall-solid { fill: #c4c6d0; }
.ht-map-theme-dark .ht-layout-wall-thin  { stroke: #6b7280; }
.ht-map-theme-dark .ht-layout-wall-thin-solid { fill: #6b7280; }
.ht-map-theme-dark .ht-layout-floor      { fill: #23282d; }
.ht-map-theme-dark .ht-layout-floor-alt  { fill: #1c2024; }
.ht-map-theme-dark .ht-layout-glass      { stroke: #8ab4f8; }
.ht-map-theme-dark .ht-layout-entrance   { stroke: #81c995; }
.ht-map-theme-dark .ht-layout-label      { fill: #6b7280; }
.ht-map-theme-dark .ht-layout-pool       { fill: #0077a3; stroke: #4a5568; }
.ht-map-theme-dark .ht-layout-pool-wave  { stroke: #8ab4f8; }
.ht-map-theme-dark .ht-layout-sand       { fill: #8B7355; }
.ht-map-theme-dark .ht-layout-sand-wet   { fill: #6B5940; }
.ht-map-theme-dark .ht-layout-sea        { fill: #0e6a8a; }
.ht-map-theme-dark .ht-layout-sea-wave   { stroke: #4dd0e1; opacity: 0.3; }
.ht-map-theme-dark .ht-layout-shore      { stroke: #4dd0e1; opacity: 0.3; }
.ht-map-theme-dark .ht-layout-wood       { fill: #4a2c17; }
.ht-map-theme-dark .ht-layout-wood-edge  { stroke: #2b1409; }
.ht-map-theme-dark .ht-layout-vegetation { fill: #2a4430; stroke: #4a7a55; }
.ht-map-theme-dark .ht-pool-water        { fill: #0e6a8a; stroke: #e2e2e5; }
.ht-map-theme-dark .ht-pool-detail       { stroke: #ffffff; opacity: 0.2; }
.ht-map-theme-dark .ht-pool-step         { fill: #ffffff; opacity: 0.1; }

/* ═══════════════════════════════════════════════════════════════════════════
   MAP PIN — Marcador clasico de mapa (para categorias/zonas)
   Colores alineados con el resto de marcadores del sistema
   ═══════════════════════════════════════════════════════════════════════════ */
.ht-table-marker .ht-pin-shadow     { fill: rgba(0,0,0,0.25); filter: blur(1px); }
.ht-table-marker .ht-pin-body       { fill: #94a3b8; stroke: #64748b; stroke-width: 1.2; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3)); }
.ht-table-marker .ht-pin-dot        { fill: #ffffff; opacity: 0.9; }
.ht-table-marker .ht-pin-label      { fill: #ffffff; paint-order: stroke; stroke: rgba(0,0,0,0.5); stroke-width: 5px; stroke-linejoin: round; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

/* Pin — estados (mismos colores que mesas/hamacas) */
.ht-table-marker.is-available .ht-pin-body  { fill: #10b981; stroke: #059669; }
.ht-table-marker.is-occupied .ht-pin-body   { fill: #94a3b8; stroke: #64748b; opacity: 0.5; }
.ht-table-marker.is-partially .ht-pin-body  { fill: #f59e0b; stroke: #d97706; }
.ht-table-marker.is-selected .ht-pin-body   { fill: #3b82f6; stroke: #2563eb; }

/* Pin — sombra sutil segun estado */
.ht-table-marker.is-available .ht-pin-body  { filter: drop-shadow(0 2px 4px rgba(16, 185, 129, 0.4)); }
.ht-table-marker.is-partially .ht-pin-body  { filter: drop-shadow(0 2px 4px rgba(245, 158, 11, 0.4)); }

/* Pin — tema oscuro */
.ht-map-theme-dark .ht-table-marker .ht-pin-body       { fill: #64748b; stroke: #475569; }
.ht-map-theme-dark .ht-table-marker .ht-pin-label      { fill: #ffffff; stroke: rgba(0,0,0,0.8); }
.ht-map-theme-dark .ht-table-marker.is-available .ht-pin-body  { fill: #34d399; stroke: #10b981; }
.ht-map-theme-dark .ht-table-marker.is-occupied .ht-pin-body   { fill: #64748b; stroke: #475569; }
.ht-map-theme-dark .ht-table-marker.is-partially .ht-pin-body  { fill: #fbbf24; stroke: #f59e0b; }