/* v2/marcas.css — subrayados del visor de expedientes (NQN y RN).
 * Va junto con v2/marcas.js. Los dos visores lo cargan con <link>.
 * Los cuatro colores son los únicos que acepta el server (marcas.pm): si se
 * agrega uno, va en los tres lados (acá, marcas.js y marcas.pm).
 */

:root{
	--ejm-a:#ffe680; --ejm-a-fuerte:#eab308;
	--ejm-v:#bbf0b3; --ejm-v-fuerte:#22a03f;
	--ejm-c:#bfe0fb; --ejm-c-fuerte:#2b8fd6;
	--ejm-r:#ffc2c8; --ejm-r-fuerte:#e0495b;
}

/* --- el texto de la providencia ---------------------------------------- */
.provtexto{margin:0}
.provtexto p{margin:0 0 .75rem 0}
.provtexto p:last-child{margin-bottom:0}

mark.ejm{color:inherit;background:var(--ejm-a);border-radius:2px;
	padding:.05em 0;box-decoration-break:clone;-webkit-box-decoration-break:clone;
	cursor:pointer}
mark.ejm-a{background:var(--ejm-a)}
mark.ejm-v{background:var(--ejm-v)}
mark.ejm-c{background:var(--ejm-c)}
mark.ejm-r{background:var(--ejm-r)}
mark.ejm-flash{animation:ejmFlash 1.4s ease-out}
@keyframes ejmFlash{
	0%,55%{box-shadow:0 0 0 3px rgba(0,0,0,.35)}
	100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}
}

/* --- barrita flotante --------------------------------------------------- */
.ejm-pop{position:fixed;z-index:50;display:flex;gap:.25rem;align-items:center;
	padding:.3rem;background:#fff;border:1px solid #bbb;border-radius:6px;
	box-shadow:0 4px 14px rgba(0,0,0,.22)}
.ejm-pop[hidden]{display:none}
.ejm-pop button{width:26px;height:26px;padding:0;border:1px solid rgba(0,0,0,.25);
	border-radius:4px;cursor:pointer;font:inherit;font-size:13px;line-height:1;
	background:#fff;color:#333}
.ejm-pop button:hover{outline:2px solid #444;outline-offset:1px}
.ejm-pop button[data-c="a"]{background:var(--ejm-a)}
.ejm-pop button[data-c="v"]{background:var(--ejm-v)}
.ejm-pop button[data-c="c"]{background:var(--ejm-c)}
.ejm-pop button[data-c="r"]{background:var(--ejm-r)}
.ejm-pop .ejm-quitar{width:auto;padding:0 .45rem;color:#a00;border-color:#ddd}
.ejm-pop .ejm-sep{width:1px;height:20px;background:#ddd;flex:0 0 auto}

/* En pantalla chica sólo crecen los botones (el dedo no es el mouse). La
   POSICIÓN la calcula ubicarPop() y siempre queda pegada a la selección: el
   borde de abajo del iframe está fuera de la pantalla mientras el navegador
   muestra su barra de direcciones, así que anclar la barrita ahí la escondía
   hasta que el usuario scrolleaba. */
@media (max-width: 520px){
	.ejm-pop{padding:.4rem;gap:.35rem}
	.ejm-pop button{width:38px;height:38px;font-size:15px}
	.ejm-pop .ejm-quitar{width:auto;padding:0 .8rem}
}

/* --- puntitos en el listado --------------------------------------------- */
.mov .ejm-dots{flex:0 0 auto;display:inline-flex;align-items:center;gap:2px;
	margin-left:.25rem;font-size:10px;font-weight:700;color:#fff}
.mov .ejm-dot{display:inline-block;width:8px;height:8px;border-radius:50%;
	border:1px solid rgba(255,255,255,.55)}
.mov .ejm-dot-a{background:var(--ejm-a-fuerte)}
.mov .ejm-dot-v{background:var(--ejm-v-fuerte)}
.mov .ejm-dot-c{background:var(--ejm-c-fuerte)}
.mov .ejm-dot-r{background:var(--ejm-r-fuerte)}
.mov .ejm-n{margin-left:1px;opacity:.9}
/* Señal que no depende del color, igual que el resto del listado: la barra de
   una actuación marcada lleva una franja clara a la izquierda. */
.mov.conmarcas .bar{box-shadow:inset 3px 0 0 0 #fff}

/* --- botón "sólo marcadas" ---------------------------------------------- */
.ejm-solo{flex:0 0 auto;padding:.3rem .5rem;font:inherit;font-size:11px;
	color:#666;background:#fff;border:1px solid #ccc;border-radius:3px;cursor:pointer;
	white-space:nowrap}
.ejm-solo:hover{border-color:#999}
.ejm-solo.on{color:#7a5b00;background:#fff8e1;border-color:var(--ejm-a-fuerte)}

/* --- panel de resumen ---------------------------------------------------- */
.ejm-resumen{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;
	background:rgba(0,0,0,.35)}
.ejm-resumen[hidden]{display:none}
.ejm-caja{margin:auto;width:min(720px,94vw);max-height:88vh;display:flex;
	flex-direction:column;background:#fff;border-radius:8px;overflow:hidden;
	box-shadow:0 10px 40px rgba(0,0,0,.3)}
.ejm-caja header{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;
	border-bottom:1px solid #ddd;background:#fafafa}
.ejm-caja header b{flex:1;font-size:13px}
.ejm-caja header button{padding:.25rem .55rem;font:inherit;font-size:13px;color:#666;
	background:#fff;border:1px solid #ccc;border-radius:4px;cursor:pointer}
.ejm-chips{display:flex;flex-wrap:wrap;gap:.3rem;padding:.45rem .75rem;
	border-bottom:1px solid #eee}
.ejm-chip{display:inline-flex;align-items:center;gap:.3rem;padding:.15rem .5rem;
	font-size:11px;color:#333;background:#fff;border:1px solid #ccc;border-radius:12px;
	cursor:pointer}
.ejm-chip.off{opacity:.4}
.ejm-chip i{width:9px;height:9px;border-radius:50%;display:inline-block}
.ejm-lista{flex:1;overflow-y:auto;padding:.35rem .5rem .75rem .5rem}
.ejm-grupo{margin-top:.5rem;padding:.2rem .35rem;font-size:11px;font-weight:700;
	color:#fff;background:#222;border-radius:3px;
	display:flex;gap:.5rem;justify-content:space-between}
.ejm-grupo span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ejm-item{display:flex;gap:.45rem;padding:.4rem .35rem;border-bottom:1px solid #f0f0f0;
	cursor:pointer;font-size:13px;line-height:1.45}
.ejm-item:hover{background:#f7f7f7}
.ejm-item i{flex:0 0 auto;width:4px;border-radius:2px;margin:.15rem 0}
.ejm-item-a i{background:var(--ejm-a-fuerte)}
.ejm-item-v i{background:var(--ejm-v-fuerte)}
.ejm-item-c i{background:var(--ejm-c-fuerte)}
.ejm-item-r i{background:var(--ejm-r-fuerte)}
.ejm-item q{quotes:none;color:#333}
.ejm-item.perdida q{color:#999;font-style:italic}
.ejm-vacio{padding:1.2rem .75rem;color:#888;font-style:italic;text-align:center}

/* --- aviso de "no se pudo guardar" -------------------------------------- */
.ejm-toast{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:70;
	max-width:90vw;padding:.45rem .8rem;font-size:12px;color:#fff;background:#b23b3b;
	border-radius:4px;box-shadow:0 3px 12px rgba(0,0,0,.3)}
.ejm-toast[hidden]{display:none}