/* ---------------------------------------------------------------------------
 * Compact Active Layers refresh (T2: inline heading, compact toolbar, 0-100%)
 *
 * Scoped to the two Active Layers containers (#tocCV for services, #tocCVFL for
 * imported vectors) so the tree, the scale bar and the drawing-tool slider keep
 * their current styles. Approved metrics: 330px panel, Roboto 12px, 22px minimum
 * collapsed heading (S18), 16px icons (S11), #00677F controls. The pale vector
 * card and the white legend surface stay untouched: only the controls are
 * monochrome.
 * ------------------------------------------------------------------------- */

/* --- Heading: chevron + checkbox + inline name/style/date, delete at right -- */

/* The 22px minimum is the collapsed row the user asked for; a wrapped name grows
 * the heading instead of being clipped. Everything is centred vertically. */
#tocCV .tocActiveHeader,
#tocCVFL .tocActiveHeader {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2px;
	min-height: 22px;
}

/* Block flow on purpose: the name, the optional style and the optional date stay
 * one word-like flow and still wrap on their own. The flow reserves a leading
 * control gutter so the chevron and the checkbox can be centred against the whole
 * heading instead of only the first line (S18), while the delete is centred by the
 * flex heading itself. */
#tocCV .tocActiveTitleFlow,
#tocCVFL .tocActiveTitleFlow {
	position: relative;
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	padding: 3px 0 3px 38px;
	font-size: 12px;
	line-height: 16px;
}

/* Leading controls: out of the inline flow, centred on the heading's midpoint for
 * both 22px single-line rows and grown multi-line rows. Click handlers, ids and
 * classes are unchanged. */
#tocCV .tocActiveToggle,
#tocCVFL .tocActiveToggle {
	position: absolute;
	top: 50%;
	left: 0;
	display: inline-flex;
	align-items: center;
	margin: 0;
	transform: translateY(-50%);
}

#tocCV .tocActiveChevron,
#tocCVFL .tocActiveChevron {
	display: block;
	width: 16px;
	height: 16px;
}

#tocCV .tocActiveCheck,
#tocCVFL .tocActiveCheck {
	position: absolute;
	top: 50%;
	left: 18px;
	width: 16px;
	height: 16px;
	margin: 0;
	transform: translateY(-50%);
}

/* The name stays in inline flow: 16px wrapped leading plus 3px block padding
 * keeps a single-line heading at 22px without spreading multi-line names. */
#tocCV .tocActiveTitle,
#tocCVFL .tocActiveTitle {
	display: inline;
	overflow-wrap: anywhere;
	vertical-align: baseline;
	cursor: pointer;
}

/* WMS style selector: one more inline word that wraps as a whole unit. */
#tocCV .tocActiveInlineControl,
#tocCVFL .tocActiveInlineControl {
	display: inline-block;
	width: auto;
	margin: 0 0 0 4px;
	vertical-align: middle;
	line-height: normal;
}

#tocCV .tocActiveStyleSelect,
#tocCVFL .tocActiveStyleSelect {
	display: inline-block;
	width: auto;
	max-width: 170px;
	height: 18px;
	margin: 0;
	padding: 0 2px;
	font-size: 12px !important;
	line-height: 16px;
	color: #00677F;
	background-color: #ffffff;
	border: 1px solid #00677F;
	border-radius: 3px;
	cursor: pointer;
}

#tocCV .tocActiveDate,
#tocCVFL .tocActiveDate {
	display: inline-block;
	vertical-align: middle;
}

#tocCV .tocActiveDelete,
#tocCVFL .tocActiveDelete {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	margin-left: 6px;
}

#tocCV .tocActiveDelete:hover,
#tocCVFL .tocActiveDelete:hover {
	cursor: pointer;
}

/* --- Hover surfaces on the icon hitboxes (S24) ----------------------------
 * The 16px glyphs keep their size: only the hitbox around them paints a subtle
 * background plus ring. box-shadow/background never affect layout, so no control
 * moves and no handler is added or replaced. */

#tocCV .tocActiveToolbarRight > a,
#tocCV .tocActiveToolbarRight > span,
#tocCVFL .tocActiveToolbarRight > a,
#tocCVFL .tocActiveToolbarRight > span,
#tocCV .tocActiveDelete,
#tocCVFL .tocActiveDelete,
#tocCV .tocActiveToolbarLeft > img,
#tocCVFL .tocActiveToolbarLeft > img,
#tocCVBase .imgTocMLF,
#tocCVGrupo > .tituloTocCV #botonLimpiarCV {
	border-radius: 3px;
}

#tocCV .tocActiveToolbarRight > a:hover,
#tocCV .tocActiveToolbarRight > span:hover,
#tocCVFL .tocActiveToolbarRight > a:hover,
#tocCVFL .tocActiveToolbarRight > span:hover,
#tocCV .tocActiveDelete:hover,
#tocCVFL .tocActiveDelete:hover,
#tocCV .tocActiveToolbarLeft > img:hover,
#tocCVFL .tocActiveToolbarLeft > img:hover,
#tocCVBase .imgTocMLF:hover {
	background-color: rgba(0, 103, 127, 0.16);
	box-shadow: 0 0 0 1px rgba(0, 103, 127, 0.55);
}

/* Clear-all uses a dark hover ring on the approved light blue header. */
#tocCVGrupo > .tituloTocCV #botonLimpiarCV:hover {
	background-color: rgba(23, 59, 70, 0.10);
	box-shadow: 0 0 0 1px rgba(23, 59, 70, 0.45);
}

/* --- Lower toolbar: transparency left, available actions right ------------- */

#tocCV .tocActiveToolbar,
#tocCVFL .tocActiveToolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 4px 6px;
	font-size: 12px;
	color: #00677F;
}

#tocCV .tocActiveToolbarLeft,
#tocCVFL .tocActiveToolbarLeft {
	display: flex;
	align-items: center;
	gap: 3px;
	min-width: 0;
}

#tocCV .tocActiveToolbarRight,
#tocCVFL .tocActiveToolbarRight {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
}

#tocCV .tocActiveToolbarRight > *,
#tocCVFL .tocActiveToolbarRight > * {
	display: inline-flex;
	align-items: center;
}

#tocCV .tocActiveActionIcon,
#tocCVFL .tocActiveActionIcon {
	width: 16px;
	height: 16px;
	vertical-align: middle;
}

#tocCV .tocActiveOpacityIcon,
#tocCVFL .tocActiveOpacityIcon {
	width: 16px;
	height: 16px;
}

#tocCV .tocActiveOpacityValue,
#tocCVFL .tocActiveOpacityValue {
	font-size: 11px;
	line-height: 18px;
}

/* The scale is transparency: 0% (fully opaque) on the left and 100% (fully
 * transparent) on the right. The stored value keeps opacity = value/100, so the
 * numeric input and the tcapas parameter are untouched; only the direction is
 * reversed and the two end labels read as transparency. */
#tocCV .tocActiveOpacity,
#tocCVFL .tocActiveOpacity {
	width: 72px;
	margin: 0;
	direction: rtl;
}

#tocCV .tocActiveOpacity::-webkit-slider-runnable-track,
#tocCVFL .tocActiveOpacity::-webkit-slider-runnable-track {
	height: 4px;
	background: #b9d3d8;
	border: 1px solid #00677F;
	border-radius: 4px;
	box-shadow: none;
}

#tocCV .tocActiveOpacity::-webkit-slider-thumb,
#tocCVFL .tocActiveOpacity::-webkit-slider-thumb {
	width: 12px;
	height: 12px;
	margin-top: -5px;
	background: #00677F;
	border: 1px solid #ffffff;
	border-radius: 50%;
	box-shadow: 0 0 0 1px #00677F;
}

#tocCV .tocActiveOpacity::-moz-range-track,
#tocCVFL .tocActiveOpacity::-moz-range-track {
	height: 4px;
	background: #b9d3d8;
	border: 1px solid #00677F;
	border-radius: 4px;
	box-shadow: none;
}

#tocCV .tocActiveOpacity::-moz-range-thumb,
#tocCVFL .tocActiveOpacity::-moz-range-thumb {
	width: 12px;
	height: 12px;
	background: #00677F;
	border: 1px solid #ffffff;
	border-radius: 50%;
	box-shadow: 0 0 0 1px #00677F;
}

/* --- Approved Penpot S4 surfaces -------------------------------------------
 * Colour-identity only: metrics, header height (20px) and control colours keep
 * their current values. The per-layer delete and every toolbar icon stay
 * #00677F, including clear-all on the light blue Active Layers header. */

/* Approved light blue (#8ABFCD) with dark text (#173B46): 5.95:1 contrast.
 * The primary "Capas" header keeps its existing stronger teal identity.
 * S21: the weight comes from the actual RobotoBold family, not from a synthetic
 * font-weight: 700 on top of the regular family. */
#tocCVGrupo > .tituloTocCV {
	background-color: #8ABFCD;
	color: #173B46;
	font-family: RobotoBold, Roboto, "Lucida Grande", "Lucida Sans", Arial, sans-serif;
	font-weight: normal;
}

/* Keep the shared trash SVG's original teal: 3.21:1 on the light header.
 * Do not recolour the asset, which is also used by per-layer controls. */
#tocCVGrupo > .tituloTocCV #botonLimpiarCV img {
	filter: none;
}

/* Service card surface approved in Penpot. */
#tocCV .nodoSortable {
	background-color: #EDF5F7;
}

/* External vector card surface and the user's sienna title. */
#tocCVFL .nodoSortableFL {
	background-color: #F4F2E7;
}

#tocCVFL .nodoSortableFL .tocActiveTitle {
	color: #663300;
}

/* --- Fixed header with a dedicated scroll body (S21) ----------------------
 * The 20px header stays outside the scrolling area, so it never moves and the
 * Active Layers scrollbar starts below it. #tocCVGrupo keeps the geometry the
 * jQuery splitter measures and drags (it is still the panel and still the parent
 * of #tocCVFL/#tocCV/#tocCVBase), and only the inner list scrolls. */

#tocCVGrupo {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

#tocCVGrupo > .tituloTocCV {
	flex: 0 0 auto;
}

/* min-height:0 is what allows this flex child to shrink so the splitter height and
 * the accordion switch keep deciding how much room the list has. */
#tocCVScroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
}

/* --- Base layer card ------------------------------------------------------
 * Lavender distinguishes the base from service/vector cards. Keep the existing
 * name and metadata handler; no sortable identity, checkbox or delete action. */

#tocCVBase {
	position: relative;
	box-sizing: border-box;
	min-height: 22px;
	margin: 0 2px 2px;
	padding: 2px 22px 2px 4px;
	line-height: 18px;
	background-color: #F0EDF7;
	color: #173B46;
	border-radius: 3px;
	overflow-wrap: anywhere;
}

#tocCVBase .imgTocMLF {
	position: absolute;
	top: 50%;
	right: 1px;
	display: flex;
	align-items: center;
	margin: 0;
	transform: translateY(-50%);
}

/* No reserved scrollbar gutter. The header reaches its own right edge; cards
 * and base metadata use the scroll body's edge, inside any actual scrollbar. */

#tocCVGrupo > .tituloTocCV {
	position: relative;
	overflow: hidden;
}

#tocCVGrupo > .tituloTocCV #botonLimpiarCV {
	position: absolute;
	top: 0;
	right: 3px;
	display: flex;
	align-items: center;
	height: 20px;
}

#tocCV .tocActiveDelete,
#tocCVFL .tocActiveDelete {
	margin-right: 1px;
}

#tocCV .tocActiveToolbarRight > *,
#tocCVFL .tocActiveToolbarRight > * {
	margin-right: 0;
}

#tocCV .tocActiveToolbarRight,
#tocCVFL .tocActiveToolbarRight {
	padding-right: 1px;
}

#tocCVGrupo #botonLimpiarCV img,
#tocCVBase .tocMetadataIcon {
	display: block;
}

/* The inert slot holds the outgoing card's height for the 500ms fade. Only
 * its visual moves; following cards shift after finish/cancel, never underneath
 * a fixed overlay. Live controls/map state are removed immediately. */
.tocActiveExit {
	pointer-events: none;
}

.tocActiveExitVisual {
	width: 100%;
	height: 100%;
	pointer-events: none;
	box-sizing: border-box;
	padding: 3px 22px 3px 38px;
	overflow: hidden;
	font: 12px/16px Roboto, Arial, sans-serif;
	color: #00677F;
	border-left: 2px solid #3299B1;
	border-radius: 3px;
}


/* --- Splitter grip (S14) ---------------------------------------------------
 * The drag affordance is a centred horizontal line painted on the existing
 * handle. pointer-events:none keeps the native splitter target and therefore
 * every existing drag/resize measurement untouched. */

/* The handle follows the current panel width, not its initial desktop pixel
 * width. Keep its existing height/borders and the native drag target. */
#splitterTOC .hsplitter {
	right: 0;
	width: auto;
	overflow: hidden;
}

#splitterTOC .hsplitter::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 22px;
	height: 2px;
	border-radius: 1px;
	background-color: rgba(255, 255, 255, 0.9);
	transform: translate(-50%, -50%);
	pointer-events: none;
}

#splitterTOC .hsplitter:hover::after {
	background-color: #ffffff;
}

/* --- Hover and focus feedback (S16) ---------------------------------------
 * Subtle colour/shadow/opacity changes on the existing interactive controls.
 * No padding or size changes, no extra handlers, and the legend/map colours are
 * never filtered from here. */

#tocCV .nodoSortable > .tocActiveHeader:hover,
#tocCVFL .nodoSortableFL > .tocActiveHeader:hover {
	background-color: rgba(0, 103, 127, 0.06);
}

#tocCV .tocActiveCheck:hover,
#tocCVFL .tocActiveCheck:hover,
#tocCV .tocActiveCheck:focus-visible,
#tocCVFL .tocActiveCheck:focus-visible {
	outline: 2px solid rgba(0, 103, 127, 0.35);
	outline-offset: 1px;
}

#tocCV .tocActiveChevron:hover,
#tocCVFL .tocActiveChevron:hover {
	opacity: 0.7;
}

#tocCV .tocActiveDelete:hover img,
#tocCVFL .tocActiveDelete:hover img,
#tocCV .tocActiveToolbarRight a:hover img,
#tocCVFL .tocActiveToolbarRight a:hover img,
#tocCV .tocActiveToolbarRight span:hover img,
#tocCVFL .tocActiveToolbarRight span:hover img,
#tocCV .tocActiveToolbarLeft > img:hover,
#tocCVFL .tocActiveToolbarLeft > img:hover,
#tocCVBase .imgTocMLF:hover .tocMetadataIcon {
	filter: brightness(0.75);
}

#tocCVGrupo > .tituloTocCV #botonLimpiarCV:hover img {
	filter: brightness(0.75);
	opacity: 1;
}

#tocCV .tocActiveStyleSelect:hover,
#tocCVFL .tocActiveStyleSelect:hover {
	background-color: #EDF5F7;
}

#tocCV .tocActiveDate:hover,
#tocCVFL .tocActiveDate:hover {
	box-shadow: 0 0 0 1px #6999A3;
}

#tocCV .tocActiveOpacity:hover::-webkit-slider-thumb,
#tocCVFL .tocActiveOpacity:hover::-webkit-slider-thumb {
	box-shadow: 0 0 0 3px rgba(0, 103, 127, 0.25);
}

#tocCV .tocActiveOpacity:hover::-moz-range-thumb,
#tocCVFL .tocActiveOpacity:hover::-moz-range-thumb {
	box-shadow: 0 0 0 3px rgba(0, 103, 127, 0.25);
}

#tocCV input:focus-visible,
#tocCVFL input:focus-visible,
#tocCV select:focus-visible,
#tocCVFL select:focus-visible,
#tocCV a:focus-visible,
#tocCVFL a:focus-visible {
	outline: 2px solid rgba(0, 103, 127, 0.55);
	outline-offset: 1px;
}