/* =====================================================================
   SVG EDITOR — SISTEMA DE DISEÑO
   Reescritura completa del CSS visual y del maquetado responsive.
   No se modificó ningún id/clase usado por el JS: solo se restylea.
   ===================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
	--bg:              #F4F4FA;   /* fondo general de la app */
	--bg-canvas:       #ECECF5;   /* fondo detrás de la hoja SVG */
	--surface:         #FFFFFF;   /* paneles, tarjetas */
	--surface-2:       #F8F8FC;   /* superficie secundaria (hover, filas) */
	--border:          #E3E3EE;
	--border-strong:   #D3D3E2;

	--text:            #1F2233;
	--text-muted:      #6B6E85;
	--text-inverse:    #FFFFFF;

	--accent:          #7C5CFF;   /* violeta, acento principal */
	--accent-hover:    #6A47FF;
	--accent-soft:     #EFEBFF;
	--accent-contrast: #FFFFFF;

	--success:         #1BA672;
	--danger:          #E5484D;

	--radius-sm:       6px;
	--radius:          10px;
	--radius-lg:       14px;

	--shadow-sm:       0 1px 2px rgba(20,20,40,.06);
	--shadow:          0 4px 14px rgba(20,20,45,.08);
	--shadow-lg:       0 12px 32px rgba(20,20,45,.16);

	--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--toolbar-h:        56px;
	--panel-w:          230px;
}

/* ---------- 2. RESET BÁSICO / APP SHELL ---------- */
*{ box-sizing: border-box; }

html, body{
	height: 100%;
	margin: 0;
	padding: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	font-size: 14px;
	-webkit-font-smoothing: antialiased;
	overflow: hidden; /* la app llena la pantalla; cada panel scrollea por su cuenta */
}

/* El body pasa a ser un layout vertical de altura completa:
   cabecera (toolbar) -> menu_y_tablero (contenido) -> repositorio (galería, cajón inferior) */
body{
	display: flex;
	flex-direction: column;
}

select, input, button{
	font-family: var(--font);
}

/* ---------- 3. CABECERA / TOOLBAR PRINCIPAL ---------- */
#cabecera{
	flex: 0 0 auto;
	width: auto;
	min-height: var(--toolbar-h);
	background: var(--surface);
	border-bottom: 1px solid var(--border);
	box-shadow: var(--shadow-sm);
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	z-index: 20;
}
#cabecera::-webkit-scrollbar{ height: 6px; }
#cabecera::-webkit-scrollbar-thumb{ background: var(--border-strong); border-radius: 4px; }

#cabecera select,
#cabecera input,
#cabecera button,
#cabecera .menu{
	flex: 0 0 auto;
}

#formas,
#menu_archivos{
	background: var(--surface);
	color: var(--text);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
	height: 38px;
	padding: 0 10px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s;
}
#formas{ min-width: 190px; }
#menu_archivos{ min-width: 120px; }
#formas:hover, #menu_archivos:hover{ border-color: var(--accent); }
#formas:focus, #menu_archivos:focus{
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
}

input.menu,
.menu,
input[type="button"].menu{
	background: var(--surface-2);
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	height: 38px;
	min-width: 64px;
	padding: 0 14px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s, border-color .15s, transform .05s;
}
.menu:hover{ background: var(--accent-soft); border-color: var(--accent); color: var(--accent-hover); }
.menu:active{ transform: translateY(1px); }

.txtmini{
	background: var(--surface-2);
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	height: 34px;
	padding: 0 8px;
	font-size: 12px;
}
a.txtmini{
	background: transparent;
	border: none;
	color: var(--text-muted);
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	padding: 0 4px;
}

#listado_ids{
	background: var(--surface);
	color: var(--text);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	width: 170px;
	max-width: 45vw;
	font-size: 11px;
	height: 38px;
}

/* ---------- 4. CONTENIDO: MENÚ / LIENZO / PANEL DERECHO ---------- */
#menu_y_tablero{
	flex: 1 1 auto;
	min-height: 0;              /* imprescindible para que los hijos puedan scrollear */
	display: flex;
	align-items: stretch;
	background: var(--bg-canvas);
}

/* Panel izquierdo: selector de herramienta / submenú de la forma activa */
#menu{
	flex: 0 0 var(--panel-w);
	width: var(--panel-w);
	max-width: var(--panel-w);
	background: var(--surface);
	border-right: 1px solid var(--border);
	overflow-y: auto;
	padding: 10px;
}

#submenu{
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Panel de propiedades oculto (usado como almacenamiento interno por el JS) */
#propiedades{ display: none; }

/* El SVG de trabajo: ocupa el espacio central, centrado, con aspecto de "hoja" */
#lienzo{
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 3/2;
	transform-origin: top left;
	background: var(--surface);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-lg);
	margin: auto;
}

/* Contenedor central que aloja el lienzo, con espacio y scroll propio para cuando se hace zoom */
#menu_y_tablero > svg#lienzo{
	flex: 1 1 auto;
	align-self: center;
	justify-self: center;
	margin: 20px;
	max-width: calc(100% - 40px);
}

#papel{
	filter: drop-shadow(0px 0px 40px rgba(20,20,45,.18));
}

/* Panel derecho: propiedades / controles de la herramienta activa */
#submenu_box2{
	flex: 0 0 var(--panel-w);
	width: var(--panel-w);
	max-width: var(--panel-w);
	background: var(--surface);
	border-left: 1px solid var(--border);
	overflow-y: auto;
	padding: 10px;
}

@media(max-width: 1000px){
	:root{ --panel-w: 100%; }
	#menu_y_tablero{
		flex-direction: column;
		overflow-y: auto;
	}
	#menu_y_tablero > svg#lienzo{
		order: 1;
		margin: 12px;
		max-width: calc(100% - 24px);
	}
	#menu{
		order: 2;
		flex: 0 0 auto;
		width: 100%;
		max-width: 100%;
		max-height: 40vh;
		border-right: none;
		border-top: 1px solid var(--border);
	}
	#submenu_box2{
		order: 3;
		flex: 0 0 auto;
		width: 100%;
		max-width: 100%;
		max-height: 40vh;
		border-left: none;
		border-top: 1px solid var(--border);
	}
}

/* ---------- 5. TARJETAS DE CONTROL (sliders, inputs de la herramienta) ---------- */
.controles{
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 8px 10px;
	font-size: 12px;
}

.titulos-controles{
	width: auto;
	min-width: 60px;
	background: transparent;
	color: var(--text-muted);
	font-size: 11px;
	font-weight: 600;
	border: 1px solid transparent;
	text-align: right;
	border-radius: var(--radius-sm);
}
.titulos-controles:focus{
	outline: none;
	border-color: var(--accent);
	background: var(--surface);
}

.disp_nodo{
	color: var(--text);
	border: none;
	background: transparent;
}

.icono_val_def{
	position: relative;
	top: -2px;
	left: 4px;
	opacity: .55;
	cursor: grab;
	transition: opacity .15s;
}
.icono_val_def:hover{ opacity: 1; }

.selector, .selectores{
	width: 100%;
	max-width: 190px;
	height: 32px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	font-size: 12px;
	margin: 4px 0;
	padding: 0 6px;
	background: var(--surface);
}
.selectores{ width: 44px; max-width: 44px; text-align: center; padding: 0; }

.boton{
	width: 100%;
	height: 34px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--text);
	font-weight: 600;
	cursor: pointer;
	transition: background .15s, border-color .15s;
}
.boton:hover{ background: var(--accent-soft); border-color: var(--accent); color: var(--accent-hover); }

/* ---------- 5.5 SELECCIÓN Y TIRADORES (los "cuadraditos" para redimensionar) ---------- */

/* Marco punteado que envuelve el objeto seleccionado (arrastrable: mueve el objeto) */
#cuadrado_selector{
	fill: transparent;
	stroke: var(--accent);
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke; /* el borde se ve igual de nítido sin importar el zoom */
}
#path_selector{
	fill: none;
	stroke: var(--accent);
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
	pointer-events: none;
}
#circulo_selector{
	fill: none;
	stroke: var(--accent);
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
	pointer-events: none;
}

/* Marco de selección por arrastre (clic y arrastre sobre el fondo vacío) */
#marquee_selector{
	fill: var(--accent-soft);
	fill-opacity: 0.5;
	stroke: var(--accent);
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
	pointer-events: none;
}

/* Los 4 tiradores de las esquinas para estirar/achicar el objeto (también para texto,
   ya que usan el mismo mecanismo genérico basado en getBBox()) */
.resize_marcas{
	fill: #FFFFFF;
	stroke: var(--accent);
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
	rx: 20%;
	transition: fill .1s;
}
.resize_marcas:hover{
	fill: var(--accent);
}
/* Cursor de redimensionado según la esquina: 1=sup-izq, 4=inf-der (diagonal \) · 2=inf-izq, 3=sup-der (diagonal /) */
#resize\ 1, #resize\ 4{ cursor: nwse-resize; }
#resize\ 2, #resize\ 3{ cursor: nesw-resize; }

/* Tiradores de nodo (edición de curvas/trazos punto por punto) */
.tirador_nodo{
	stroke: var(--accent);
	vector-effect: non-scaling-stroke;
	cursor: pointer;
	transition: fill .1s;
}

/* ---------- 6. SECCIONES COLAPSABLES ---------- */
.collapsible, .collapsable{
	background: var(--surface-2);
	color: var(--text);
	cursor: pointer;
	padding: 10px 12px;
	width: 100%;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	text-align: left;
	outline: none;
	font-size: 13px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 8px;
}
.collapsible::after, .collapsable::after{
	content: "▾";
	color: var(--text-muted);
	font-size: 11px;
	transition: transform .15s;
}
.active.collapsible::after, .active.collapsable::after{ transform: rotate(-90deg); }

.active, .collapsible:hover, .collapsable:hover{
	background: var(--accent-soft);
	border-color: var(--accent);
}

.content{
	display: none;
	background: var(--surface);
	border: 1px solid var(--border);
	border-top: none;
	border-radius: 0 0 var(--radius-sm) var(--radius-sm);
	padding: 8px;
}
.contentDisp{
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 10px;
	margin-top: 8px;
}
.contentZoom{
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 10px;
}

.cabecera_opciones{
	width: 100%;
	background: var(--text);
	border: none;
	border-radius: var(--radius-sm);
	color: var(--text-inverse);
	font-weight: 700;
	font-size: 12px;
	padding: 8px 10px;
	margin-bottom: 6px;
}

/* ---------- 7. SELECT DE IMÁGENES PERSONALIZADO ---------- */
.imgselect-container{
	width: 100%;
	font-weight: 600;
	margin: 6px 0;
}
.imgselect-selected{
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	padding: 8px 10px;
	cursor: pointer;
	background: var(--surface);
	color: var(--text);
}
.imgselect-selected:hover{ border-color: var(--accent); }
.imgselect-options{
	display: none;
	width: 100%;
	border: 1px solid var(--border);
	background: var(--surface);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow);
	z-index: 1000;
	max-height: 220px;
	overflow-y: auto;
	margin-top: 4px;
}
.imgselect-option{
	padding: 6px 8px;
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}
.imgselect-option img{
	width: 120px;
	height: 48px;
	object-fit: contain;
	border-radius: var(--radius-sm);
	background: var(--surface-2);
}
.imgselect-option:hover{ background: var(--accent-soft); }

/* ---------- 8. GALERÍA / REPOSITORIO (cajón inferior) ---------- */
#repositorio{
	flex: 0 0 auto;
	width: 100%;
	background: var(--surface);
	border-top: 1px solid var(--border);
	box-shadow: 0 -4px 14px rgba(20,20,45,.06);
	overflow: hidden;
}
#persianaGaleria, #persianaUp, #persianaDown, #persianaClose{
	cursor: pointer;
	padding: 6px;
	opacity: .6;
	transition: opacity .15s;
}
#persianaGaleria{ cursor: ns-resize; }
#persianaUp:hover, #persianaDown:hover, #persianaClose:hover{ opacity: 1; }

#galeria{
	width: 100%;
	height: 100%;
	background: var(--surface);
	overflow-y: auto;
	padding: 6px 10px;
}
#galeria .row{
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}
.diapositiva{
	padding: 8px;
	margin: 0;
	width: 84px;
	height: 84px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--border);
	background: var(--surface-2);
	border-radius: var(--radius-sm);
	transition: border-color .15s, transform .1s;
}
.diapositiva:hover{ border-color: var(--accent); transform: translateY(-1px); }

/* ---------- 9. GUÍAS Y MARCADORES SOBRE EL SVG (sin cambios de comportamiento) ---------- */
.class_guia_h, .marcadores{
	stroke: var(--accent);
	stroke-dasharray: 500,1000;
	fill: none;
	stroke-width: 100;
}
.class_guia_vb, .class_guia_hb{
	stroke: transparent;
	stroke-dasharray: none;
	stroke-width: 600;
}
.class_guia_vb{ cursor: e-resize; }
.class_guia_hb{ cursor: n-resize; }
.resize_marcas{ fill: var(--accent); stroke-width: 0; }

/* ---------- 10. FORMULARIOS MODALES (papel, caja, almanaque, etc.) ---------- */
.form_menu, .form_menu_alma{
	padding: 20px;
	padding-top: 45px;
	font-size: 14px;
	background: var(--surface);
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	text-align: center;
}

.inpText{
	width: 80%;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	font-size: 22px;
	font-weight: 700;
	margin: 10px;
	padding: 8px;
	text-align: center;
}
.tiqueta, .labels{
	font-size: 12px;
	font-weight: 700;
	color: var(--text-muted);
}

.boton, .botApAlma{
	width: 100%;
	max-width: 200px;
}
.botApAlma{
	height: 38px;
	border: none;
	background: var(--accent);
	color: var(--text-inverse);
	font-weight: 700;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: background .15s;
}
.botApAlma:hover{ background: var(--accent-hover); }

.sl_alma{ width: 100%; max-width: 200px; height: 32px; }

.butDescPDF {
    width: 145px;
    height: 52px;
    cursor: pointer;
    border: none;
    font-weight: 700;
    font-size: 12px;
    text-decoration: none;
    border-radius: var(--radius);
    background-image: url(pago-pdfymp.svg);
    background-size: 130px 46px;
    background-position: 8px center;
    background-color: var(--success);
    background-repeat: no-repeat;
    color: var(--text-inverse);
    box-shadow: var(--shadow-sm);
    margin-bottom: 10px;
}
#botonesdescarga{ margin: 0 auto; text-align: center; }

#feriadosTxt{
	width: 100%;
	max-width: 180px;
	font-size: 12px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	padding: 6px;
}

/* ---------- 11. VARIOS ---------- */
svg{ border: none; }

#selector{
	height: auto;
	font-size: 14px;
	font-weight: 700;
	margin: 8px;
}

.form-range{ width: 110px; }

/* Barras de scroll finas y consistentes en toda la app */
#menu::-webkit-scrollbar,
#submenu_box2::-webkit-scrollbar,
#galeria::-webkit-scrollbar{
	width: 8px;
}
#menu::-webkit-scrollbar-thumb,
#submenu_box2::-webkit-scrollbar-thumb,
#galeria::-webkit-scrollbar-thumb{
	background: var(--border-strong);
	border-radius: 4px;
}