/* Vanguardia CRM — negro y rojo, igual que el sitio. */

.vgc-crm {
	--vgc-negro: #101014;
	--vgc-rojo: #c1121f;
	--vgc-linea: #e4e4e8;
	--vgc-tenue: #6b6b76;
	--vgc-fondo: #f7f7f8;
	font-family: inherit;
	color: var(--vgc-negro);
	max-width: 100%;
}

.vgc-crm *, .vgc-crm *::before, .vgc-crm *::after { box-sizing: border-box; }
.vgc-crm button { font: inherit; cursor: pointer; }
.vgc-tenue { color: var(--vgc-tenue); font-size: .82em; }
.vgc-rojo { color: var(--vgc-rojo); font-weight: 600; }

/* Mensajes -------------------------------------------------------- */
.vgc-mensaje { padding: 12px 16px; border-radius: 8px; margin: 0 0 16px; font-size: .95em; }
.vgc-bueno { background: #ecf7ee; border: 1px solid #bfe3c6; color: #1c5a2a; }
.vgc-malo  { background: #fdecec; border: 1px solid #f3bcbc; color: #8d1b1b; }
.vgc-aviso { background: #fff6e0; border: 1px solid #f0d79a; color: #7a5600;
	padding: 8px 12px; border-radius: 6px; font-size: .88em; margin: 0 0 14px; }

/* Tarjetas de resumen --------------------------------------------- */
.vgc-tarjetas { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 20px; }
.vgc-tarjeta {
	flex: 1 1 110px; min-width: 100px; padding: 12px 14px; border-radius: 10px;
	background: var(--vgc-fondo); border: 1px solid var(--vgc-linea);
	text-decoration: none; color: var(--vgc-negro); transition: .15s;
}
.vgc-tarjeta:hover { border-color: var(--vgc-negro); }
.vgc-tarjeta strong { display: block; font-size: 1.6em; line-height: 1.1; }
.vgc-tarjeta span { font-size: .78em; color: var(--vgc-tenue); text-transform: uppercase; letter-spacing: .04em; }
.vgc-tarjeta.vgc-activa { background: var(--vgc-negro); border-color: var(--vgc-negro); }
.vgc-tarjeta.vgc-activa strong, .vgc-tarjeta.vgc-activa span { color: #fff; }
.vgc-tarjeta-alerta strong { color: var(--vgc-rojo); }
.vgc-tarjeta-alerta.vgc-activa strong { color: #fff; }

/* Cajas plegables -------------------------------------------------- */
.vgc-caja { border: 1px solid var(--vgc-linea); border-radius: 10px; margin: 0 0 14px; background: #fff; }
.vgc-caja > summary { padding: 12px 16px; cursor: pointer; font-weight: 600; list-style: none; }
.vgc-caja > summary::-webkit-details-marker { display: none; }
.vgc-caja > summary::before { content: "＋ "; color: var(--vgc-rojo); }
.vgc-caja[open] > summary::before { content: "− "; }
.vgc-caja > *:not(summary) { padding: 0 16px 16px; }

.vgc-subir { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.vgc-subir label { display: flex; flex-direction: column; gap: 4px; font-size: .85em; }
.vgc-subir label span { color: var(--vgc-tenue); }
.vgc-subir p { flex: 1 1 100%; margin: 4px 0 0; }

.vgc-lotes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.vgc-lote { display: inline-flex; align-items: center; gap: 6px; background: var(--vgc-fondo);
	border: 1px solid var(--vgc-linea); border-radius: 999px; padding: 3px 6px 3px 12px; font-size: .8em; }
.vgc-lote a { color: var(--vgc-negro); text-decoration: none; }
.vgc-borrar-lote { border: 0; background: none; color: var(--vgc-tenue); font-size: 1.1em; line-height: 1; padding: 0 4px; }
.vgc-borrar-lote:hover { color: var(--vgc-rojo); }

.vgc-equipo { width: 100%; border-collapse: collapse; font-size: .88em; }
.vgc-equipo th, .vgc-equipo td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--vgc-linea); }
.vgc-equipo th { font-size: .78em; text-transform: uppercase; letter-spacing: .04em; color: var(--vgc-tenue); }

/* Filtros ---------------------------------------------------------- */
.vgc-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.vgc-filtros input, .vgc-filtros select, .vgc-subir input, .vgc-subir select {
	padding: 8px 10px; border: 1px solid var(--vgc-linea); border-radius: 6px;
	background: #fff; font-size: .9em; max-width: 100%;
}
.vgc-filtros input[type="search"] { flex: 1 1 220px; min-width: 160px; }

.vgc-masivo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
	background: var(--vgc-negro); color: #fff; padding: 10px 14px; border-radius: 8px; margin: 0 0 12px; }
.vgc-masivo select { padding: 7px 10px; border-radius: 6px; border: 0; font-size: .9em; }
.vgc-cuantos { font-size: .88em; margin-right: auto; }

.vgc-conteo { font-size: .85em; color: var(--vgc-tenue); margin: 0 0 8px; }

/* Botones ---------------------------------------------------------- */
.vgc-btn { display: inline-block; padding: 9px 16px; border-radius: 6px; border: 1px solid var(--vgc-negro);
	background: var(--vgc-negro); color: #fff; text-decoration: none; font-size: .88em; line-height: 1.2; }
.vgc-btn:hover { opacity: .88; color: #fff; }
.vgc-btn-rojo { background: var(--vgc-rojo); border-color: var(--vgc-rojo); }
.vgc-btn-wa { background: #1faa53; border-color: #1faa53; }
.vgc-btn-suave { background: #fff; color: var(--vgc-negro); border-color: var(--vgc-linea); }
.vgc-btn-suave:hover { color: var(--vgc-negro); border-color: var(--vgc-negro); }
.vgc-btn-plano { background: none; border-color: transparent; color: var(--vgc-tenue); }
.vgc-btn-plano:hover { color: var(--vgc-negro); }
.vgc-btn-mini { padding: 4px 10px; font-size: .78em; border-radius: 5px;
	background: #fff; color: var(--vgc-negro); border: 1px solid var(--vgc-linea); }
.vgc-btn-mini:hover { border-color: var(--vgc-negro); }

/* El botón principal de una sección. Uno solo por pantalla: si hay dos,
   ninguno destaca y el asesor no sabe por dónde empezar. */
.vgc-crm .vgc-btn-accion {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 14px 24px; border-radius: 12px; border: 0;
	background: linear-gradient(180deg, #d4202d 0%, var(--vgc-rojo) 55%, #a50e1a 100%);
	color: #fff; text-decoration: none;
	font-size: .95em; font-weight: 600; letter-spacing: .01em; line-height: 1.2;
	box-shadow: 0 1px 2px rgba(16, 16, 20, .18), 0 8px 20px -6px rgba(193, 18, 31, .5),
		inset 0 1px 0 rgba(255, 255, 255, .22);
	transition: transform .16s ease, box-shadow .16s ease;
}
.vgc-crm .vgc-btn-accion:hover {
	color: #fff; opacity: 1; transform: translateY(-2px);
	box-shadow: 0 2px 4px rgba(16, 16, 20, .2), 0 14px 26px -8px rgba(193, 18, 31, .55),
		inset 0 1px 0 rgba(255, 255, 255, .26);
}
.vgc-crm .vgc-btn-accion:active { transform: translateY(0); }
.vgc-crm .vgc-btn-accion:focus-visible { outline: 3px solid rgba(193, 18, 31, .35); outline-offset: 3px; }
.vgc-crm .vgc-btn-accion .vgc-flecha { transition: transform .16s ease; font-size: 1.1em; }
.vgc-crm .vgc-btn-accion:hover .vgc-flecha { transform: translateX(3px); }

/* La caja donde vive ese botón: distinta al resto, para que se vea primero. */
.vgc-crm .vgc-destacado {
	display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
	padding: 20px 22px; border-radius: 12px; margin: 0 0 16px;
	background: linear-gradient(135deg, #fff 0%, #fdf4f4 100%);
	border: 1px solid #f0dcdc;
}
.vgc-crm .vgc-destacado p { margin: 0; flex: 1 1 260px; min-width: 240px; }

@media (max-width: 640px) {
	.vgc-crm .vgc-destacado { padding: 16px; gap: 12px; }
	.vgc-crm .vgc-btn-accion { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
	.vgc-crm .vgc-btn-accion,
	.vgc-crm .vgc-btn-accion .vgc-flecha { transition: none; }
	.vgc-crm .vgc-btn-accion:hover { transform: none; }
}

/* Tabla ------------------------------------------------------------ */
.vgc-tabla-envoltura { overflow-x: auto; border: 1px solid var(--vgc-linea); border-radius: 10px; background: #fff; }
.vgc-tabla { width: 100%; border-collapse: collapse; font-size: .9em; min-width: 760px; }
.vgc-tabla thead th { background: var(--vgc-negro); color: #fff; text-align: left;
	padding: 10px 12px; font-size: .74em; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.vgc-tabla td { padding: 10px 12px; border-bottom: 1px solid var(--vgc-linea); vertical-align: top; }
.vgc-tabla tbody tr:hover { background: #fafafb; }
.vgc-fila.vgc-vence { box-shadow: inset 3px 0 0 var(--vgc-rojo); }
.vgc-c-marca { width: 34px; }
.vgc-vacio { text-align: center; padding: 36px 16px; color: var(--vgc-tenue); }

.vgc-abrir { background: none; border: 0; padding: 0; text-align: left; font-weight: 600;
	color: var(--vgc-negro); text-decoration: underline; text-decoration-color: var(--vgc-linea); text-underline-offset: 3px; }
.vgc-abrir:hover { text-decoration-color: var(--vgc-rojo); }
.vgc-sub, .vgc-c-quien .vgc-tenue, .vgc-c-fecha .vgc-tenue, .vgc-c-estado .vgc-tenue { display: block; font-size: .82em; color: var(--vgc-tenue); }
.vgc-alerta { display: block; font-size: .76em; color: #8a6d00; background: #fff6e0;
	border-radius: 4px; padding: 1px 6px; margin: 3px 0; max-width: max-content; }
.vgc-tel, .vgc-mail { display: block; color: var(--vgc-negro); text-decoration: none; font-size: .92em; }
.vgc-tel:hover, .vgc-mail:hover { color: var(--vgc-rojo); }
.vgc-mail { font-size: .8em; color: var(--vgc-tenue); word-break: break-all; }
.vgc-wa { display: inline-block; font-size: .78em; padding: 4px 10px; border-radius: 5px;
	background: #1faa53; color: #fff; text-decoration: none; margin-right: 4px; }
.vgc-wa:hover { opacity: .88; color: #fff; }
.vgc-cuando { display: block; font-size: .78em; color: var(--vgc-tenue); }

.vgc-pastilla { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .74em;
	font-weight: 600; text-transform: uppercase; letter-spacing: .03em; background: #eee; color: #333; }
.vgc-e-nuevo       { background: #e6efff; color: #1b4b9c; }
.vgc-e-revisar     { background: #fff1d6; color: #8a5b00; }
.vgc-e-llamado     { background: #ede7fb; color: #4b2a9c; }
.vgc-e-no_contesta { background: #f1f1f3; color: #55555f; }
.vgc-e-agendado    { background: #dff3ff; color: #0b5a80; }
.vgc-e-captado     { background: #dff5e4; color: #14622a; }
.vgc-e-descartado  { background: #f6f6f7; color: #8a8a92; }

.vgc-paginas { display: flex; flex-wrap: wrap; gap: 5px; margin: 14px 0; }
.vgc-paginas a { padding: 6px 11px; border: 1px solid var(--vgc-linea); border-radius: 6px;
	text-decoration: none; color: var(--vgc-negro); font-size: .85em; }
.vgc-paginas a.vgc-activa { background: var(--vgc-negro); color: #fff; border-color: var(--vgc-negro); }

/* Ficha lateral ---------------------------------------------------- */
.vgc-panel-lateral { position: fixed; inset: 0; z-index: 99999; }
.vgc-panel-fondo { position: absolute; inset: 0; background: rgba(16,16,20,.55); }
.vgc-panel-caja { position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 100%);
	background: #fff; overflow-y: auto; padding: 22px; box-shadow: -8px 0 30px rgba(0,0,0,.2); }

.vgc-ficha-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.vgc-ficha-cab h3 { margin: 0 0 2px; font-size: 1.25em; line-height: 1.25; }
.vgc-ficha-cab p { margin: 0; }
.vgc-cerrar { border: 0; background: none; font-size: 1.8em; line-height: 1; color: var(--vgc-tenue); padding: 0 4px; }
.vgc-cerrar:hover { color: var(--vgc-rojo); }

.vgc-ficha-datos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 16px 0; }
.vgc-ficha-datos > div { background: var(--vgc-fondo); border-radius: 8px; padding: 9px 12px; }
.vgc-ficha-datos span { display: block; font-size: .72em; text-transform: uppercase;
	letter-spacing: .04em; color: var(--vgc-tenue); }
.vgc-ficha-datos strong { font-size: .95em; }

.vgc-ficha-contacto { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 16px; }

.vgc-hermanos { background: #fffaf0; border: 1px solid #f0e0bc; border-radius: 8px;
	padding: 10px 14px; margin: 0 0 16px; font-size: .85em; }
.vgc-hermanos ul { margin: 6px 0 0; padding-left: 18px; }
.vgc-hermanos li.vgc-actual { font-weight: 600; }

.vgc-form { border-top: 1px solid var(--vgc-linea); padding-top: 16px; }
.vgc-form-linea { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 10px; }
.vgc-form-linea label { flex: 1 1 180px; }
.vgc-form label, .vgc-bloque { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.vgc-form label span { font-size: .78em; text-transform: uppercase; letter-spacing: .04em; color: var(--vgc-tenue); }
.vgc-form input, .vgc-form select, .vgc-form textarea {
	padding: 9px 11px; border: 1px solid var(--vgc-linea); border-radius: 6px;
	font: inherit; font-size: .92em; width: 100%; background: #fff; color: var(--vgc-negro);
}
.vgc-form textarea { resize: vertical; }
.vgc-form-pie { display: flex; align-items: center; gap: 12px; }
.vgc-estado-guardado { font-size: .85em; color: #1c5a2a; }

.vgc-bitacora { margin-top: 24px; border-top: 1px solid var(--vgc-linea); padding-top: 16px; }
.vgc-bitacora h4 { margin: 0 0 10px; font-size: .8em; text-transform: uppercase; letter-spacing: .05em; color: var(--vgc-tenue); }
.vgc-bitacora ol { list-style: none; margin: 0; padding: 0; }
.vgc-bitacora li { border-left: 2px solid var(--vgc-linea); padding: 0 0 14px 14px; position: relative; }
.vgc-bitacora li::before { content: ""; position: absolute; left: -5px; top: 5px;
	width: 8px; height: 8px; border-radius: 50%; background: var(--vgc-rojo); }
.vgc-bit-cab { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .88em; }
.vgc-bitacora p { margin: 4px 0 0; font-size: .9em; }

/* Tostada ---------------------------------------------------------- */
.vgc-tostada { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
	background: var(--vgc-negro); color: #fff; padding: 11px 20px; border-radius: 8px;
	font-size: .9em; z-index: 100000; box-shadow: 0 6px 22px rgba(0,0,0,.28); max-width: 90vw; }
.vgc-tostada.vgc-malo { background: var(--vgc-rojo); }

/* Móvil ------------------------------------------------------------ */
@media (max-width: 700px) {
	.vgc-tarjeta { flex: 1 1 calc(33.333% - 7px); min-width: 0; padding: 10px; }
	.vgc-tarjeta strong { font-size: 1.3em; }
	.vgc-tarjeta span { font-size: .68em; }
	.vgc-filtros input, .vgc-filtros select { flex: 1 1 100%; }
	.vgc-panel-caja { padding: 16px; width: 100%; }
	.vgc-ficha-datos { grid-template-columns: 1fr 1fr; }
	.vgc-form-linea label { flex: 1 1 100%; }
	/* Los formularios de alta se llenan en el celular, parado en la casa del
	   cliente: una columna, campos grandes y nada de zoom involuntario en
	   iPhone (Safari hace zoom si la letra baja de 16px). */
	.vgc-nuevo label { flex: 1 1 100%; }
	.vgc-nuevo input, .vgc-nuevo select, .vgc-nuevo textarea,
	.vgc-form input, .vgc-form select, .vgc-form textarea { font-size: 16px; padding: 11px 12px; }
	.vgc-nuevo .vgc-check { flex: 1 1 100%; }
	.vgc-btn { padding: 11px 16px; }
}

/* La insignia de sesión (abajo a la derecha) no debe tapar contenido ------ */
.vgc-crm { padding-bottom: 64px; }
.vgc-panel-caja { padding-bottom: 96px; }
body.vgc-ficha-abierta #vg-acceso { display: none !important; }

/* Recordatorio para el calendario ---------------------------------------- */
.vgc-recordatorio {
	display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
	background: #f3f7ff; border: 1px solid #cfe0ff; border-radius: 8px;
	padding: 12px 14px; margin: 16px 0 0;
}
.vgc-recordatorio strong { display: block; font-size: .78em; text-transform: uppercase;
	letter-spacing: .04em; color: #1b4b9c; }
.vgc-recordatorio span { font-size: .9em; }
.vgc-recordatorio .vgc-btn { white-space: nowrap; }

.vgc-calendario { display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
	justify-content: space-between; background: #fff; border: 1px solid var(--vgc-linea);
	border-radius: 10px; padding: 11px 14px; margin: 0 0 14px; font-size: .9em; }
.vgc-calendario strong { color: #14622a; }
.vgc-agendado { font-size: .88em; font-weight: 600; color: #14622a; white-space: nowrap; }

/* Requerimientos de clientes -------------------------------------------- */
.vgc-c-nuevo      { background: #e6efff; color: #1b4b9c; }
.vgc-c-buscando   { background: #ede7fb; color: #4b2a9c; }
.vgc-c-mostrando  { background: #dff3ff; color: #0b5a80; }
.vgc-c-ofertando  { background: #fff1d6; color: #8a5b00; }
.vgc-c-cerrado    { background: #dff5e4; color: #14622a; }
.vgc-c-descartado { background: #f6f6f7; color: #8a8a92; }

.vgc-abrir-req { background: none; border: 0; padding: 0; text-align: left; font-weight: 600;
	color: var(--vgc-negro); text-decoration: underline; text-decoration-color: var(--vgc-linea);
	text-underline-offset: 3px; font: inherit; font-weight: 600; cursor: pointer; }
.vgc-abrir-req:hover { text-decoration-color: var(--vgc-rojo); }

.vgc-calce { border: 1px solid #bfe3c6; background: #ecf7ee; color: #14622a;
	border-radius: 999px; padding: 3px 11px; font-size: .78em; font-weight: 700; text-decoration: none; }
.vgc-calce:hover { background: #dff5e4; }

.vgc-busca { background: var(--vgc-fondo); border-radius: 8px; padding: 11px 14px; margin: 14px 0; }
.vgc-busca strong { display: block; font-size: .72em; text-transform: uppercase;
	letter-spacing: .04em; color: var(--vgc-tenue); margin-bottom: 3px; }
.vgc-busca span { display: block; font-size: .93em; }

.vgc-calces { border-top: 1px solid var(--vgc-linea); padding-top: 14px; margin-top: 4px; }
.vgc-calces h4 { margin: 0 0 8px; font-size: .8em; text-transform: uppercase;
	letter-spacing: .05em; color: var(--vgc-tenue); }
.vgc-calces ul { list-style: none; margin: 0; padding: 0; }
.vgc-calces li { border-left: 2px solid #bfe3c6; padding: 4px 0 10px 12px; font-size: .9em; }
.vgc-calces li .vgc-tenue { display: block; }

.vgc-nuevo .vgc-form-linea { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.vgc-nuevo label { display: flex; flex-direction: column; gap: 4px; flex: 1 1 170px; }
.vgc-nuevo label > span { font-size: .78em; text-transform: uppercase; letter-spacing: .04em; color: var(--vgc-tenue); }
.vgc-nuevo input, .vgc-nuevo select, .vgc-nuevo textarea {
	padding: 9px 11px; border: 1px solid var(--vgc-linea); border-radius: 6px;
	font: inherit; font-size: .92em; width: 100%; background: #fff; }
.vgc-nuevo textarea { resize: vertical; }
.vgc-nuevo > p { margin: 8px 0 0; }

.vgc-grupo { border: 1px solid var(--vgc-linea); border-radius: 8px; padding: 10px 14px; margin: 0 0 12px; }
.vgc-grupo legend { font-size: .78em; text-transform: uppercase; letter-spacing: .04em;
	color: var(--vgc-tenue); padding: 0 6px; }
.vgc-check { display: inline-flex !important; flex-direction: row !important; align-items: center;
	gap: 6px; margin: 3px 14px 3px 0; font-size: .9em; flex: 0 0 auto !important; }
.vgc-check input { width: auto; }
.vgc-otras { flex: 1 1 200px; margin-top: 6px; }

.vgc-c-calces { white-space: nowrap; }

/* Etapas de la gestión comercial ---------------------------------------- */
.vgc-t-llamado, .vgc-t-derivacion { background: #e6efff; color: #1b4b9c; }
.vgc-t-visita, .vgc-t-seguimiento { background: #ede7fb; color: #4b2a9c; }
.vgc-t-orden, .vgc-t-publicacion  { background: #dff3ff; color: #0b5a80; }
.vgc-t-reserva                    { background: #fff1d6; color: #8a5b00; }
.vgc-t-redaccion, .vgc-t-promesa,
.vgc-t-estudio, .vgc-t-escritura,
.vgc-t-conservador                { background: #e8f0e0; color: #3d5c1e; }
.vgc-t-facturacion                { background: #dff5e4; color: #14622a; }
.vgc-t-caido                      { background: #f6f6f7; color: #8a8a92; }
.vgc-t-administracion { background: #e0f0ee; color: #14554d; }