/* Foto Meier — editor en el navegador */
body.foto { height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; background: #0c0c0f; user-select: none; -webkit-user-select: none; }
body.foto input, body.foto textarea, body.foto select { user-select: text; -webkit-user-select: text; }
#foto-app { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* ---------- Barra ---------- */
.f-barra { height: 50px; flex: none; display: flex; align-items: center; gap: 6px; padding-inline: 10px; background: var(--panel); border-bottom: 1px solid var(--linea); }
.f-barra .logo img { width: 26px; height: 26px; }
.f-nombre { background: transparent; border: 1px solid transparent; color: var(--texto); font: inherit; font-weight: 550; font-size: 14px; padding: 5px 8px; border-radius: 8px; width: 200px; min-width: 80px; }
.f-nombre:hover { border-color: var(--linea-2); }
.f-nombre:focus { outline: none; border-color: var(--acento); background: var(--panel-2); }
.f-sucio { width: 7px; height: 7px; border-radius: 50%; background: var(--ambar); flex: none; }
.f-menus { display: flex; gap: 1px; }
.f-menu { position: relative; }
.f-menu > button { background: none; border: none; color: var(--texto-2); font: inherit; font-size: 13.5px; padding: 6px 10px; border-radius: 7px; cursor: pointer; }
.f-menu > button:hover, .f-menu.abierto > button { background: rgba(255,255,255,.07); color: var(--texto); }
.f-lista { position: absolute; top: calc(100% + 4px); inset-inline-start: 0; min-width: 230px; background: var(--panel-2); border: 1px solid var(--linea-2); border-radius: 10px; padding: 5px; z-index: 60; box-shadow: 0 16px 40px rgba(0,0,0,.5); }
.f-lista button { display: flex; width: 100%; justify-content: space-between; gap: 18px; text-align: start; background: none; border: none; color: var(--texto); font: inherit; font-size: 13.5px; padding: 7px 10px; border-radius: 7px; cursor: pointer; }
.f-lista button:hover:not(:disabled) { background: rgba(142,107,255,.18); }
.f-lista button:disabled { opacity: .4; cursor: default; }
.f-lista button kbd { font-size: 11px; color: var(--gris); background: none; border: none; font-family: var(--f-mono); direction: ltr; }
.f-lista hr { border: none; border-top: 1px solid var(--linea); margin: 4px 2px; }
.f-espacio { flex: 1; }
.f-estado { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--gris); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--linea); white-space: nowrap; }
.f-estado .punto { width: 7px; height: 7px; border-radius: 50%; background: var(--gris-2); }
.f-estado.vivo .punto { background: var(--verde); box-shadow: 0 0 8px rgba(63,224,184,.6); }
.f-estado.ocupado .punto { background: var(--acento); box-shadow: 0 0 8px rgba(142,107,255,.7); }
.f-zoom { display: flex; align-items: center; gap: 2px; }
.f-zoom button { background: none; border: 1px solid transparent; color: var(--texto-2); width: 28px; height: 28px; border-radius: 7px; cursor: pointer; font-size: 15px; }
.f-zoom button:hover { background: rgba(255,255,255,.07); }
.f-zoom span { font-family: var(--f-mono); font-size: 12px; min-width: 46px; text-align: center; color: var(--texto-2); direction: ltr; }
.boton-iris { background: linear-gradient(135deg, #6C48E6, #8E6BFF 55%, #B89CFF); color: #fff; border: none; }
@media (max-width: 900px) { .f-nombre { width: 110px; } .f-estado .txt, .f-zoom { display: none; } }
/* Teléfono: la barra pasa a dos renglones y los menús van abajo */
@media (max-width: 640px) {
  .f-barra { height: auto; flex-wrap: wrap; row-gap: 2px; padding-block: 6px; }
  .f-nombre { flex: 1 1 0; width: auto; }
  .f-espacio { display: none; }
  .f-menus { order: 10; width: 100%; flex-wrap: wrap; }
  .f-menu > button { padding: 6px 9px; }
  .f-lista { min-width: 210px; max-width: calc(100vw - 20px); }
}

/* ---------- Cuerpo ---------- */
.f-cuerpo { flex: 1; display: flex; min-height: 0; }
.f-herr { width: 48px; flex: none; background: var(--panel); border-inline-end: 1px solid var(--linea); display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 0; }
.f-herr button { width: 36px; height: 36px; display: grid; place-items: center; background: none; border: 1px solid transparent; border-radius: 9px; color: var(--texto-2); cursor: pointer; }
.f-herr button:hover { background: rgba(255,255,255,.06); color: var(--texto); }
.f-herr button[aria-pressed="true"] { background: rgba(142,107,255,.2); border-color: rgba(142,107,255,.45); color: #fff; }
.f-herr svg { width: 19px; height: 19px; }
.f-herr .sep { width: 24px; height: 1px; background: var(--linea); margin: 5px 0; }
.f-colores { position: relative; width: 36px; height: 40px; margin-top: 4px; }
.f-colores input { position: absolute; width: 24px; height: 24px; padding: 0; border: 2px solid var(--panel-3); border-radius: 6px; cursor: pointer; background: none; }
.f-colores input::-webkit-color-swatch-wrapper { padding: 0; }
.f-colores input::-webkit-color-swatch { border: none; border-radius: 4px; }
.f-colores .c1 { top: 0; inset-inline-start: 2px; z-index: 2; }
.f-colores .c2 { top: 12px; inset-inline-start: 12px; }

.f-escena { flex: 1; position: relative; overflow: hidden; background:
  radial-gradient(circle at 50% 40%, rgba(108,72,230,.08), transparent 60%), #0c0c0f; touch-action: none; }
.f-mundo { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.f-mundo canvas { display: block; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 20px 60px rgba(0,0,0,.6);
  background-color: #fff; background-image: linear-gradient(45deg, #ddd 25%, transparent 25%), linear-gradient(-45deg, #ddd 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ddd 75%), linear-gradient(-45deg, transparent 75%, #ddd 75%);
  background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0; image-rendering: auto; }
.f-sel { position: absolute; inset: 0; pointer-events: none; overflow: visible; width: 100%; height: 100%; }
.f-sel .marco { fill: none; stroke: #8E6BFF; stroke-width: 1.5; }
.f-sel .asa { fill: #fff; stroke: #6C48E6; stroke-width: 1.5; pointer-events: all; }
.f-sel .giro { fill: #8E6BFF; stroke: #fff; stroke-width: 1.5; pointer-events: all; cursor: grab; }
.f-sel .recorte { fill: rgba(0,0,0,.45); }
.f-sel .recorte-marco { fill: none; stroke: #fff; stroke-width: 1.5; stroke-dasharray: 6 4; }
.f-vacio { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--gris); pointer-events: none; }
.f-soltar { position: absolute; inset: 12px; border: 2px dashed var(--acento); border-radius: 16px; background: rgba(142,107,255,.08); display: grid; place-items: center; font-size: 16px; color: #fff; pointer-events: none; z-index: 5; }
.f-texto-edicion { position: absolute; z-index: 6; background: rgba(17,17,21,.94); border: 1px solid var(--acento); color: var(--texto); border-radius: 8px; padding: 8px; font: inherit; min-width: 220px; min-height: 70px; resize: both; }

.f-panel { width: 300px; flex: none; background: var(--panel); border-inline-start: 1px solid var(--linea); display: flex; flex-direction: column; min-height: 0; }
.f-panel-scroll { flex: 1; overflow-y: auto; min-height: 0; }
.f-sec { border-bottom: 1px solid var(--linea); padding: 12px 14px; }
.f-sec > h4 { font-size: 11.5px; font-family: var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gris); font-weight: 500; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
.f-sec > h4 button { background: none; border: none; color: var(--gris); cursor: pointer; font: inherit; font-size: 11px; text-transform: none; letter-spacing: 0; }
.f-sec > h4 button:hover { color: var(--texto); }
.f-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.f-campos .ancho2 { grid-column: span 2; }
.f-campo { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--gris); }
.f-campo .entrada { min-height: 32px; padding: 5px 8px; font-size: 13px; border-radius: 8px; }
.f-campo input[type=color] { width: 100%; height: 32px; padding: 2px; border-radius: 8px; border: 1px solid var(--linea-2); background: var(--panel-2); cursor: pointer; }
.f-deslizador { display: grid; grid-template-columns: 86px 1fr 40px; align-items: center; gap: 8px; font-size: 12px; color: var(--texto-2); margin-bottom: 6px; }
.f-deslizador input[type=range] { width: 100%; accent-color: var(--acento); }
.f-deslizador output { font-family: var(--f-mono); font-size: 11.5px; text-align: end; color: var(--gris); direction: ltr; }
.f-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.f-chip { background: var(--panel-2); border: 1px solid var(--linea-2); color: var(--texto-2); border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer; font: inherit; font-size: 12px; }
.f-chip:hover { color: #fff; border-color: var(--acento); }
.f-chip.activo { background: rgba(142,107,255,.2); border-color: var(--acento); color: #fff; }

.f-capas { display: flex; flex-direction: column; gap: 3px; }
.f-capa { display: grid; grid-template-columns: 22px 34px 1fr auto; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; }
.f-capa:hover { background: rgba(255,255,255,.04); }
.f-capa.sel { background: rgba(142,107,255,.15); border-color: rgba(142,107,255,.4); }
.f-capa .mini { width: 34px; height: 26px; border-radius: 4px; background: #fff linear-gradient(45deg,#ddd 25%,transparent 25%,transparent 75%,#ddd 75%) 0 0/8px 8px; object-fit: contain; border: 1px solid var(--linea); }
.f-capa .nom { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-capa .nom input { width: 100%; font: inherit; background: var(--panel-2); border: 1px solid var(--acento); color: var(--texto); border-radius: 5px; padding: 1px 4px; }
.f-capa button { background: none; border: none; color: var(--gris); cursor: pointer; padding: 3px; border-radius: 5px; display: grid; place-items: center; }
.f-capa button:hover { color: #fff; background: rgba(255,255,255,.08); }
.f-capa svg { width: 15px; height: 15px; }
.f-capas-acciones { display: flex; gap: 4px; margin-top: 8px; }
.f-capas-acciones button { flex: 1; }
.f-panel-tabs { display: none; }
@media (max-width: 860px) {
  .f-cuerpo { position: relative; }
  .f-panel { position: absolute; z-index: 40; inset-block: 0 0; inset-inline-end: 0; transform: translateX(100%); transition: transform .2s; width: min(320px, 88vw); }
  html[dir="rtl"] .f-panel { transform: translateX(-100%); }
  .f-panel.abierto { transform: none !important; }
  .f-panel-tabs { display: inline-flex; }
}

/* ---------- Iris ---------- */
.iris { position: fixed; inset: 0; z-index: 70; background: #09090c; display: flex; flex-direction: column; }
.iris-barra { height: 52px; flex: none; display: flex; align-items: center; gap: 10px; padding-inline: 14px; border-bottom: 1px solid var(--linea); background: var(--panel); }
.iris-barra h2 { font-size: 16px; display: flex; align-items: center; gap: 10px; }
.iris-iris { width: 22px; height: 22px; }
.iris-cuerpo { flex: 1; display: flex; min-height: 0; }
.iris-paleta { width: 220px; flex: none; border-inline-end: 1px solid var(--linea); background: var(--panel); overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.iris-paleta h4 { font-size: 11px; font-family: var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gris); margin: 10px 0 4px; font-weight: 500; }
.iris-paleta button { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: start; background: var(--panel-2); border: 1px solid var(--linea); color: var(--texto); border-radius: 9px; padding: 8px 10px; font: inherit; font-size: 13px; cursor: pointer; }
.iris-paleta button:hover { border-color: var(--acento); }
.iris-paleta button small { color: var(--gris); font-family: var(--f-mono); font-size: 11px; direction: ltr; }
.iris-lienzo { flex: 1; position: relative; overflow: hidden; touch-action: none;
  background: linear-gradient(var(--reticula) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, var(--reticula) 1px, transparent 1px) 0 0 / 24px 24px, #09090c; }
.iris-mundo { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.iris-cables { position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none; }
.iris-cables path { fill: none; stroke: #8E6BFF; stroke-width: 2.2; opacity: .85; }
.iris-cables path.tmp { stroke-dasharray: 6 5; opacity: .6; }
.iris-cables path.cable { pointer-events: stroke; cursor: pointer; }
.iris-cables path.cable:hover { stroke: var(--rojo-2); }
.nodo { position: absolute; width: 260px; background: var(--panel); border: 1px solid var(--linea-2); border-radius: 14px; box-shadow: 0 14px 40px rgba(0,0,0,.45); direction: ltr; }
html[dir="rtl"] .nodo .nodo-cuerpo, html[dir="rtl"] .nodo .nodo-cabeza { direction: rtl; }
.nodo.sel { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento), 0 14px 40px rgba(0,0,0,.45); }
.nodo-cabeza { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--linea); cursor: grab; font-size: 13px; font-weight: 600; }
.nodo-cabeza .tipo { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.nodo-cabeza .costo { margin-inline-start: auto; font-family: var(--f-mono); font-size: 11px; color: var(--gris); font-weight: 400; direction: ltr; }
.nodo-cabeza button { background: none; border: none; color: var(--gris); cursor: pointer; font-size: 14px; padding: 0 2px; }
.nodo-cuerpo { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.nodo-cuerpo textarea.entrada { min-height: 70px; font-size: 13px; }
.nodo-cuerpo .entrada { min-height: 32px; font-size: 13px; padding: 5px 8px; }
.nodo-vista { border-radius: 9px; overflow: hidden; background: #000 linear-gradient(45deg,#1b1b22 25%,transparent 25%,transparent 75%,#1b1b22 75%) 0 0/14px 14px; border: 1px solid var(--linea); min-height: 60px; display: grid; place-items: center; color: var(--gris); font-size: 12px; }
.nodo-vista img, .nodo-vista video { width: 100%; height: auto; display: block; max-height: 220px; object-fit: contain; }
.nodo-vista audio { width: 100%; }
.puerto { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--panel-3); border: 2px solid #8E6BFF; cursor: crosshair; }
.puerto.entrada-p { left: -8px; }
.puerto.salida-p { right: -8px; }
.puerto-etq { position: absolute; font-size: 10.5px; color: var(--gris); font-family: var(--f-mono); white-space: nowrap; }
.puerto-etq.izq { left: 12px; }
.puerto-etq.der { right: 12px; }
.iris-pie { position: absolute; inset-block-end: 14px; inset-inline-start: 14px; display: flex; gap: 8px; z-index: 5; }
.iris-aviso { margin: 10px 14px 0; }
@media (max-width: 760px) { .iris-paleta { position: absolute; z-index: 10; inset-block: 52px 0; width: 200px; transform: translateX(-100%); transition: transform .2s; } .iris-paleta.abierto { transform: none; } }