/* ===========================================================================
   CAJÓN LATERAL
   Los formularios de catálogo se abren en un panel deslizante: la lista no
   se pierde de vista y no hace falta una pantalla aparte por cada alta.
   =========================================================================== */

.cajon-velo{
	position: fixed;
	inset: 0;
	z-index: 100;
	background: rgba(3,6,14,.62);
	backdrop-filter: blur(4px);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--transicion), visibility var(--transicion);
}

.cajon{
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 101;
	width: min(560px, 100%);
	display: flex;
	flex-direction: column;
	border-left: 1px solid var(--linea);
	background:
		linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015) 30%, transparent),
		var(--fondo-2);
	box-shadow: -30px 0 90px rgba(0,0,0,.52);
	transform: translateX(100%);
	visibility: hidden;
	transition: transform var(--transicion-lenta), visibility var(--transicion-lenta);
}

html[data-tema="claro"] .cajon{
	background: linear-gradient(180deg, #ffffff, #f7f9fd);
	box-shadow: -24px 0 70px rgba(17,26,48,.16);
}

.cajon.esta-abierto{ transform: none; visibility: visible; }

/* El formulario es el que reparte la altura: sin esto crece más allá del
   alto de la pantalla y el pie con los botones queda fuera de alcance. */
.cajon > form,
.cajon > .cajon-forma{
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}
.cajon-velo.esta-abierto{ opacity: 1; visibility: visible; }

.cajon-cabeza{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 26px 18px;
	flex: 0 0 auto;
	border-bottom: 1px solid var(--linea);
}
.cajon-cabeza h2{ font-size: 19px; }
.cajon-cabeza p{ margin: 5px 0 0; font-size: 13px; }

.cajon-cuerpo{
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 22px 26px;
}

.cajon-pie{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	padding: 16px 26px;
	flex: 0 0 auto;
	border-top: 1px solid var(--linea);
	background: rgba(0,0,0,.16);
}
html[data-tema="claro"] .cajon-pie{ background: rgba(17,26,48,.025); }

/* --- Bloques dentro del formulario. --- */
.cajon-bloque{
	padding: 18px;
	margin-bottom: 18px;
	border: 1px solid var(--linea);
	border-radius: var(--radio-md);
	background: var(--superficie);
	box-shadow: var(--sombra-interior);
}
.cajon-bloque:last-child{ margin-bottom: 0; }
.cajon-bloque > .epigrafe{ display: block; margin-bottom: 14px; }

.pareja{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pareja .campo{ margin-bottom: 0; }
.terna{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.terna .campo{ margin-bottom: 0; }

/* --- Lista de casillas, para asignar sucursales. --- */
.casillero{
	display: grid;
	gap: 2px;
	max-height: 260px;
	overflow-y: auto;
	padding: 6px;
	border: 1px solid var(--linea);
	border-radius: var(--radio-sm);
	background: var(--superficie-honda);
}
.casillero label{
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 9px 11px;
	border-radius: var(--radio-xs);
	font-size: 13.5px;
	color: var(--texto-suave);
	cursor: pointer;
	transition: background var(--transicion), color var(--transicion);
}
.casillero label:hover{ background: var(--superficie-2); color: var(--texto); }
.casillero input{
	appearance: none;
	width: 18px; height: 18px;
	flex: 0 0 auto;
	margin: 0;
	border: 1px solid var(--linea-fuerte);
	border-radius: 5px;
	background: var(--superficie-honda);
	cursor: pointer;
	transition: all var(--transicion);
}
.casillero input:checked{
	border-color: transparent;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 5.5 2.6 2.6L9 3'/%3E%3C/svg%3E") center / 11px no-repeat,
		linear-gradient(135deg, var(--marca-1), var(--marca-2));
	box-shadow: 0 2px 8px rgba(var(--marca-1-rgb), .36);
}

/* --- Mapa de ubicación. Si no carga, los campos numéricos siguen mandando. --- */
.mapa{
	height: 230px;
	margin-bottom: 14px;
	border: 1px solid var(--linea);
	border-radius: var(--radio-sm);
	background: var(--superficie-honda);
	box-shadow: inset 0 2px 8px rgba(0,0,0,.26);
	overflow: hidden;
}
.mapa .leaflet-container{ height: 100%; background: transparent; font: inherit; }
.mapa-nota{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 20px;
	text-align: center;
	font-size: 12.5px;
	color: var(--texto-tenue);
}

/* Los mosaicos del mapa vienen en claro; en tema oscuro se adaptan para que
   no deslumbren junto al resto del panel. */
html:not([data-tema="claro"]) .mapa .leaflet-tile{
	filter: invert(1) hue-rotate(180deg) brightness(.86) contrast(.92) saturate(.75);
}
html:not([data-tema="claro"]) .mapa .leaflet-control-zoom a{
	background: var(--fondo-4);
	border-color: var(--linea);
	color: var(--texto);
}

/* --- Historial de versiones del área. --- */
.versiones{ display: grid; gap: 8px; }
.version{
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 13px;
	border: 1px solid var(--linea);
	border-radius: var(--radio-sm);
	background: var(--superficie);
	font-size: 12.5px;
	color: var(--texto-tenue);
}
.version b{ font-size: 12.5px; }
.version .pastilla{ margin-left: auto; }

@media (max-width: 620px){
	.pareja,.terna{ grid-template-columns: 1fr; }
	.cajon-cabeza,.cajon-cuerpo,.cajon-pie{ padding-left: 18px; padding-right: 18px; }
}

/* --- Rejilla de datos del detalle. --- */
.datos{
	display: grid;
	grid-template-columns: repeat(2, minmax(0,1fr));
	gap: 12px 16px;
}
.datos > div{ min-width: 0; }
.datos .ancho{ grid-column: 1 / -1; }
.datos span{
	display: block;
	font-size: 11.5px;
	color: var(--texto-tenue);
	margin-bottom: 2px;
}
.datos b{
	display: block;
	font-size: 13.5px;
	font-weight: 650;
	word-break: break-word;
}
.datos .huella{
	font-family: var(--fuente-num);
	font-size: 11.5px;
	font-weight: 500;
	color: var(--texto-suave);
	word-break: break-all;
}
.datos + .campo-ayuda{ margin-top: 14px; }

/* La selfie se sirve por una ruta autenticada, nunca desde las subidas. */
.evidencia-foto{
	width: 100%;
	max-height: 320px;
	object-fit: cover;
	margin-bottom: 14px;
	border: 1px solid var(--linea);
	border-radius: var(--radio-sm);
	background: var(--superficie-honda);
	box-shadow: var(--sombra-1);
}

@media (max-width: 620px){
	.datos{ grid-template-columns: minmax(0,1fr); }
}

/* --- Selector de días de la semana. --- */
.dia-casilla{
	position: absolute;
	width: 1px; height: 1px;
	opacity: 0;
	pointer-events: none;
}
.dia-pastilla{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 46px;
	border: 1px solid var(--linea);
	border-radius: var(--radio-sm);
	background: var(--superficie-honda);
	font-size: 14px;
	font-weight: 700;
	color: var(--texto-tenue);
	transition: all var(--transicion);
}
.dia-casilla:checked + .dia-pastilla{
	border-color: transparent;
	color: var(--texto-sobre-marca);
	background: linear-gradient(135deg, var(--marca-1), var(--marca-2));
	box-shadow: 0 4px 12px rgba(var(--marca-1-rgb), .34);
}
.dia-casilla:focus-visible + .dia-pastilla{
	outline: 2px solid rgba(var(--marca-1-rgb), .85);
	outline-offset: 2px;
}