/*
 * v22 · Módulo Compras y la campana de avisos.
 */

/* --- La campana con su lista --- */
.avisos{position:relative}
.avisos>summary{list-style:none;cursor:pointer}
.avisos>summary::-webkit-details-marker{display:none}
.avisos-panel{
	position:absolute;top:calc(100% + 10px);right:0;z-index:60;
	width:min(360px,calc(100vw - 32px));max-height:min(70vh,520px);overflow-y:auto;
	border:1px solid var(--line);border-radius:14px;background:var(--surface,#fff);
	box-shadow:0 22px 60px rgba(6,38,92,.18);
}
.avisos-cabecera{
	display:flex;justify-content:space-between;align-items:baseline;gap:10px;
	padding:13px 16px;border-bottom:1px solid var(--line);
}
.avisos-cabecera b{color:var(--ink);font-size:13.5px}
.avisos-cabecera small{color:var(--muted);font-size:11px}
.avisos-vacio{margin:0;padding:18px 16px;color:var(--muted);font-size:12.5px}
.avisos-panel ul{margin:0;padding:0;list-style:none}
.avisos-panel li{border-bottom:1px solid var(--line)}
.avisos-panel li:last-child{border-bottom:0}
.avisos-panel a{
	display:flex;align-items:flex-start;gap:11px;padding:12px 16px;
	color:inherit;text-decoration:none;
}
.avisos-panel a:hover{background:var(--soft,#f4f8f9)}
.avisos-panel b{display:block;color:var(--ink);font-size:12.5px;line-height:1.35}
.avisos-panel small{display:block;margin-top:2px;color:var(--muted);font-size:11px}
.avisos-icono{
	flex:0 0 auto;display:grid;place-items:center;width:32px;height:32px;border-radius:9px;
	background:var(--soft,#f4f8f9);color:var(--muted);
}
.avisos-icono svg{width:17px;height:17px}
.avisos-panel li.ambar .avisos-icono{background:#fff5df;color:#946318}
.avisos-panel li.azul .avisos-icono{background:#eef6fc;color:#0a5f9e}
.avisos-panel li.verde .avisos-icono{background:#e9f6ee;color:#18684a}
.avisos-panel li.rojo .avisos-icono{background:#fdf1f0;color:#b3261e}

/* --- Compras --- */
.compras-tabs{margin-bottom:16px}
.compra-card>header small{text-transform:none}
.compra-pasos{
	display:grid;grid-template-columns:repeat(5,1fr);gap:7px;
	margin:0;padding:13px 14px;list-style:none;border-bottom:1px solid var(--line);
}
.compra-pasos li{
	padding:8px 10px;border-radius:9px;background:var(--soft,#f4f8f9);
	border-top:3px solid var(--line);
}
.compra-pasos li b{display:block;color:var(--muted);font-size:11px;font-weight:800}
.compra-pasos li small{display:block;margin-top:2px;color:var(--muted);font-size:10px}
.compra-pasos li.hecho{border-top-color:#5eb589;background:#e9f6ee}
.compra-pasos li.hecho b{color:#18684a}
.compra-pasos li.hecho small{color:#2d7a5a}
.compra-pasos li.ahora{border-top-color:var(--blue,#087db8);background:#eef6fc}
.compra-pasos li.ahora b{color:#0a5f9e}
.compra-pasos li.ahora small{color:#3f7ea6}
.compra-espera{margin:9px 0 0;color:var(--muted);font-size:11.5px;font-style:italic}
.compra-form{margin-top:11px}
.request-status.purchased{background:#eef6fc;color:#0a5f9e}
.request-status.received{background:#e9f6ee;color:#18684a}
.request-status.delivered{background:rgba(109,129,139,.14);color:var(--muted,#6d818b)}

@media(max-width:860px){
	.compra-pasos{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
	.compra-pasos{grid-template-columns:1fr}
	.avisos-panel{position:fixed;top:68px;right:12px;left:12px;width:auto}
}

/* El formulario de la compra: etiqueta arriba y campo ancho, que es como se
   llena desde el teléfono en la ferretería. */
.receipt-form.compra-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:end}
.compra-form>b{grid-column:1/-1;color:var(--ink);font-size:12.5px}
.receipt-form.compra-form label{display:grid;grid-template-columns:1fr;gap:4px;align-items:start;color:var(--muted);font-size:11px;font-weight:750}
.receipt-form.compra-form input{width:100%;padding:9px 10px;border:1px solid #cbd9df;border-radius:8px;font-size:12.5px}
.compra-form button{grid-column:1/-1;justify-self:start;padding:10px 18px}
.compra-form .receipt-note{grid-column:1/-1}
@media(max-width:760px){.compra-form{grid-template-columns:1fr}}

/* --- Activar los avisos del teléfono, dentro de la campana --- */
.avisos-telefono{
	padding:13px 16px;border-top:1px solid var(--line);background:var(--soft,#f4f8f9);
	border-radius:0 0 13px 13px;
}
.avisos-telefono b{display:block;color:var(--ink);font-size:12.5px}
.avisos-telefono p{margin:4px 0 0;color:var(--muted);font-size:11.5px;line-height:1.45}
.avisos-telefono-botones{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.avisos-telefono button{
	padding:8px 13px;border:1px solid var(--blue,#087db8);border-radius:8px;
	background:var(--blue,#087db8);color:#fff;font-size:11.5px;font-weight:800;cursor:pointer;
}
.avisos-telefono button[data-push-probar],
.avisos-telefono button[data-push-apagar]{
	background:transparent;border-color:var(--line);color:var(--muted);
}
.avisos-telefono button[data-push-probar]:hover,
.avisos-telefono button[data-push-apagar]:hover{border-color:var(--blue,#087db8);color:var(--blue,#087db8)}
.avisos-telefono button[disabled]{opacity:.6;cursor:progress}

/* --- La aplicación de Compras: misma casa, otra puerta --- */
.company-title .marca-app{color:var(--muted);font-weight:600}
.sidebar .volver-a-nexo{opacity:.85}
.sidebar .volver-a-nexo:hover{opacity:1}
#cfg-app-compras input[readonly]{
	width:100%;padding:11px;border:1px solid #cbd9df;border-radius:9px;
	background:var(--surface,#fff);font-size:12.5px;color:var(--ink);cursor:text;
}