/* ── Pendiente de cobro en la ficha de la clienta ───────────────────────────
   Una venta del POS puede quedar cobrada en parte. Sin este aviso, el dinero
   que falta no aparece por ninguna parte y se olvida. */
.cs-billing-pending {
	background: #FFFBEB;
	border: 1px solid #FDE68A;
	border-left: 4px solid #D97706;
	border-radius: 8px;
	padding: 14px 18px;
	margin: 0 0 18px;
}
.cs-billing-pending-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 13px;
	color: #92400E;
	font-weight: 600;
}
.cs-billing-pending-head strong { font-size: 19px; }
.cs-billing-pending-list {
	list-style: none;
	margin: 10px 0 0;
	padding: 10px 0 0;
	border-top: 1px solid #FDE68A;
	font-size: 12.5px;
}
.cs-billing-pending-list li {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 3px 0;
	color: #78350F;
}
.cs-billing-pending-detail { flex: 1; color: #A16207; }

/* ── Barras de reparto por edad ─────────────────────────────────────────────
   Seis valores en barras horizontales: se leen de un vistazo, se imprimen
   bien y no dependen de que cargue ninguna librería de gráficos. */
.cs-agebars { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.cs-agebar { display: flex; align-items: center; gap: 12px; }
.cs-agebar-label {
	flex: 0 0 58px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--cs-ink);
	font-variant-numeric: tabular-nums;
}
.cs-agebar-track {
	flex: 1;
	height: 22px;
	background: var(--cs-surface-2, #f3f4f6);
	border-radius: 5px;
	overflow: hidden;
}
.cs-agebar-fill {
	display: block;
	height: 100%;
	background: var(--cs-primary, #A9165E);
	border-radius: 5px;
	transition: width .3s ease;
}
.cs-agebar-value {
	flex: 0 0 76px;
	text-align: right;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}
.cs-agebar-value small { color: var(--cs-muted); margin-left: 5px; font-size: 11.5px; }

/* Nota metodológica del cierre trimestral.
   Sin ella, dos personas leen el mismo número de formas distintas. */
.cs-quarterly-note { background: var(--cs-surface-2, #f9fafb); font-size: 12.5px; }
.cs-quarterly-note p { margin: 0 0 8px; color: var(--cs-ink); }
.cs-quarterly-note ul { margin: 0; padding-left: 18px; color: var(--cs-muted); line-height: 1.7; }

/* ── Mapa de ocupación: día × hora ──────────────────────────────────────────
   La intensidad va por opacidad sobre el color de marca. Un solo tono se lee
   mejor que una escala de colores distintos, donde hay que consultar la
   leyenda para saber si el verde es más o menos que el naranja. */
.cs-heat-wrap { overflow-x: auto; margin-top: 10px; }
.cs-heat { border-collapse: collapse; font-size: 11.5px; width: 100%; }
.cs-heat th {
	font-weight: 600;
	color: var(--cs-muted);
	padding: 4px 6px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.cs-heat tbody th { text-align: left; padding-right: 10px; color: var(--cs-ink); }
.cs-heat td { padding: 0; }
.cs-heat td span {
	display: block;
	min-width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	background: var(--cs-primary, #A9165E);
	color: #fff;
	border-radius: 3px;
	margin: 1px;
	font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════════════
 *  DIAGNÓSTICO DE RENDIMIENTO
 *
 *  Las barras usan color solo como refuerzo, nunca como único dato: cada una
 *  lleva su cifra al lado. Quien no distinga bien los colores lee lo mismo.
 * ═══════════════════════════════════════════════════════════════════════════ */

.cs-perf { display: flex; flex-direction: column; gap: 18px; }

.cs-perf-resumen { padding: 22px 26px; }
.cs-perf-resumen h2 { margin: 0 0 6px; font-size: 19px; }
.cs-perf-resumen p { margin: 0; font-size: 14px; color: var(--cs-muted); }
.cs-perf-resumen.todo-bien { background: #ECFDF5; border-left: 4px solid #059669; }
.cs-perf-resumen.todo-bien h2 { color: #065F46; }
.cs-perf-resumen.hay-avisos { background: #FFFBEB; border-left: 4px solid #D97706; }
.cs-perf-resumen.hay-avisos h2 { color: #92400E; }

.cs-perf-alerta { border-left: 4px solid #D97706; }

/* ── Barras ── */
.cs-perf-bars,
.cs-perf-tablas { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }

.cs-perf-bar { display: flex; align-items: center; gap: 12px; }
.cs-perf-bar .lbl {
	flex: 0 0 170px;
	font-size: 13px;
	color: var(--cs-ink);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cs-perf-bar .track {
	flex: 1;
	height: 20px;
	background: var(--cs-surface-2, #f3f4f6);
	border-radius: 5px;
	overflow: hidden;
}
.cs-perf-bar .fill { display: block; height: 100%; border-radius: 5px; transition: width .3s ease; }
.cs-perf-bar .fill.bien    { background: var(--cs-primary, #A9165E); }
.cs-perf-bar .fill.regular { background: #D97706; }
.cs-perf-bar .fill.mal     { background: #DC2626; }
.cs-perf-bar .val {
	flex: 0 0 96px;
	text-align: right;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	color: var(--cs-ink);
}
.cs-perf-bar .val.mal     { color: #DC2626; font-weight: 600; }
.cs-perf-bar .val.regular { color: #B45309; }
.cs-perf-bar .val small { display: block; color: var(--cs-muted); font-size: 11px; }

/* ── Cifras sueltas ── */
.cs-perf-grid { display: flex; gap: 32px; flex-wrap: wrap; }
.cs-perf-kpi { margin-top: 10px; }
.cs-perf-kpi .n { display: block; font-size: 26px; font-weight: 700; color: var(--cs-primary, #A9165E); line-height: 1.1; }
.cs-perf-kpi .n.mal  { color: #DC2626; }
.cs-perf-kpi .n.bien { color: #059669; }
.cs-perf-kpi .l { font-size: 12.5px; color: var(--cs-muted); }

/* ── Listas de detalle ── */
.cs-perf-idx { list-style: none; margin: 12px 0 0; padding: 0; font-size: 13px; }
.cs-perf-idx li {
	display: flex; justify-content: space-between; gap: 12px;
	padding: 6px 0; border-bottom: 1px solid var(--cs-border);
}
.cs-perf-idx li:last-child { border-bottom: 0; }
.cs-perf-idx code {
	background: #FDF2F8; color: var(--cs-primary, #A9165E);
	padding: 2px 7px; border-radius: 4px; font-size: 12px;
}
.cs-perf-idx span { color: var(--cs-muted); font-variant-numeric: tabular-nums; }

/* ── Acciones y consejos ── */
.cs-perf-accion {
	margin-top: 16px; padding-top: 14px;
	border-top: 1px solid var(--cs-border);
	display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
}
.cs-perf-accion p { margin: 0; flex: 1; min-width: 240px; font-size: 13px; color: var(--cs-muted); }

.cs-perf-consejo {
	margin-top: 14px; padding: 14px 18px;
	background: #EFF6FF; border-left: 4px solid #2563EB; border-radius: 8px;
	font-size: 13px; line-height: 1.7; color: #1E3A8A;
}
.cs-perf-consejo strong { display: block; margin-bottom: 5px; }
.cs-perf-consejo p { margin: 0 0 6px; }
.cs-perf-consejo code {
	display: inline-block; background: #fff; padding: 5px 10px;
	border-radius: 5px; font-size: 12px; color: #1E3A8A;
}

.cs-perf-entorno { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 10px; font-size: 13px; color: var(--cs-muted); }
.cs-perf-entorno strong { color: var(--cs-ink); }
.cs-perf-entorno .avisa { color: #B45309; font-weight: 600; }

@media (max-width: 700px) {
	.cs-perf-bar { flex-wrap: wrap; }
	.cs-perf-bar .lbl { flex-basis: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 *  LA CUENTA DE LA CITA
 *
 *  Productos extra y cobro repartido. La jerarquía va de arriba abajo como se
 *  lee una cuenta de restaurante: los conceptos, el total, lo ya pagado y lo
 *  que queda.
 * ═══════════════════════════════════════════════════════════════════════════ */

.cs-bill {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px dashed var(--cs-border);
}

.cs-bill-tit {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--cs-muted);
	margin-bottom: 6px;
}

.cs-bill-linea {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
	font-size: 13.5px;
	border-bottom: 1px solid var(--cs-surface-2, #f7f4f5);
}
.cs-bill-linea .n { flex: 1; color: var(--cs-ink); }
.cs-bill-linea .i { font-variant-numeric: tabular-nums; color: var(--cs-ink); }
.cs-bill-linea .x {
	background: none; border: 0; cursor: pointer;
	color: var(--cs-muted); font-size: 17px; line-height: 1; padding: 0 4px;
}
.cs-bill-linea .x:hover { color: #dc2626; }

.cs-bill-add {
	display: grid;
	grid-template-columns: 1fr 88px 66px auto;
	gap: 6px;
	margin: 10px 0;
}
.cs-bill-add input { font-size: 13px; padding: 7px 10px; }
.cs-bill-add button { font-size: 13px; padding: 7px 14px; }

.cs-bill-link {
	background: none; border: 0; cursor: pointer;
	color: var(--cs-primary, #A9165E);
	font-size: 13px; padding: 4px 0; font-family: inherit;
}
.cs-bill-link:hover { text-decoration: underline; }

/* ── El resumen ── */
.cs-bill-cuenta {
	margin-top: 12px;
	padding: 12px 14px;
	background: var(--cs-surface-2, #f9fafb);
	border-radius: 9px;
	font-size: 13.5px;
}
.cs-bill-cuenta .fila {
	display: flex; justify-content: space-between; gap: 12px;
	padding: 4px 0;
	font-variant-numeric: tabular-nums;
}
.cs-bill-cuenta .fila.total {
	font-size: 16px; font-weight: 700; color: var(--cs-ink);
	padding-top: 8px; margin-top: 4px;
	border-top: 1px solid var(--cs-border);
}
.cs-bill-cuenta .fila.pago { color: var(--cs-muted); font-size: 12.5px; }
.cs-bill-cuenta .fila .bono { color: #7c3aed; }
.cs-bill-cuenta .fila.pendiente {
	font-weight: 700; color: var(--cs-primary, #A9165E); font-size: 15px;
	padding-top: 8px; margin-top: 4px;
	border-top: 1px solid var(--cs-border);
}
.cs-bill-cuenta .fila.saldada { color: #15803d; font-weight: 600; justify-content: center; padding-top: 8px; }

/* ── Cobrar ── */
.cs-bill-cobrar {
	display: grid;
	grid-template-columns: 100px 1fr auto;
	gap: 6px;
	margin-top: 10px;
}
.cs-bill-cobrar input,
.cs-bill-cobrar select { font-size: 13px; padding: 8px 10px; }
.cs-bill-cobrar button { font-size: 13px; padding: 8px 16px; }

.cs-bill-error { margin: 8px 0 0; font-size: 12.5px; color: #b91c1c; }

@media (max-width: 640px) {
	.cs-bill-add { grid-template-columns: 1fr 1fr; }
	.cs-bill-cobrar { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 *  INFORMES · CIFRAS PRINCIPALES
 *
 *  Estas tarjetas se apilaban una debajo de otra, cada una ocupando todo el
 *  ancho: cuatro cifras llenaban la pantalla y había que bajar para ver el
 *  primer gráfico.
 *
 *  En rejilla caben las cuatro de un vistazo, que es lo que se quiere de un
 *  panel: ver el estado sin desplazarse.
 * ═══════════════════════════════════════════════════════════════════════════ */

.cs-report-kpis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 14px;
	margin-bottom: 20px;
}

.cs-report-kpis > * { margin: 0 !important; }

/* La tarjeta de cifra */
.cs-kpi-card {
	background: #fff;
	border: 1px solid var(--cs-border, #eee7eb);
	border-radius: 12px;
	padding: 18px 20px;
	transition: border-color .15s, box-shadow .15s;
}
.cs-kpi-card:hover {
	border-color: #e3cdd8;
	box-shadow: 0 4px 14px rgba(169, 22, 94, .07);
}
.cs-kpi-label {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cs-muted, #8a7480);
	margin-bottom: 8px;
	display: block;
}
.cs-kpi-value {
	/* Con !important porque Tailwind trae su propio tamaño en la misma
	   etiqueta. Es de los pocos sitios donde está justificado: la alternativa
	   sería quitar las clases de Tailwind y arriesgarse a romper el resto. */
	font-size: 26px !important;
	font-weight: 700 !important;
	line-height: 1.1;
	color: var(--cs-ink, #2a1620);
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
	display: block;
}
.cs-kpi-value.primary { color: var(--cs-primary, #A9165E); }
.cs-kpi-value.success { color: #059669; }
.cs-kpi-value.warning { color: #D97706; }
.cs-kpi-value.danger  { color: #DC2626; }
.cs-kpi-hint {
	font-size: 12px;
	color: var(--cs-muted, #8a7480);
	margin-top: 6px;
	display: block;
	line-height: 1.45;
}

/* ── Tarjetas de gráfico y tabla ── */
.cs-report-card {
	background: #fff;
	border: 1px solid var(--cs-border, #eee7eb);
	border-radius: 12px;
	padding: 20px 22px;
	margin-bottom: 18px;
}
.cs-report-card > h3 {
	margin: 0 0 4px;
	font-size: 15.5px;
	font-weight: 600;
	color: var(--cs-ink, #2a1620);
}
.cs-report-card .sub {
	font-size: 12.5px;
	color: var(--cs-muted, #8a7480);
	margin: 0 0 14px;
}

/* ── Tablas de informe ── */
.cs-report-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cs-report-table thead th {
	background: var(--cs-primary, #A9165E);
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-align: left;
	padding: 10px 14px;
}
.cs-report-table thead th:first-child { border-radius: 7px 0 0 0; }
.cs-report-table thead th:last-child  { border-radius: 0 7px 0 0; }
.cs-report-table tbody td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--cs-border, #f0e9ec);
	font-variant-numeric: tabular-nums;
}
.cs-report-table tbody tr:nth-child(even) { background: #FDF7FA; }
.cs-report-table tbody td:first-child { font-weight: 600; color: var(--cs-ink, #2a1620); }

/* ── Buscador de productos del inventario ──────────────────────────────────
   El precio y el stock se ven antes de elegir: así no hay que abrir el
   inventario en otra pestaña para saber si queda mercancía. */
.cs-bill-buscar { position: relative; }

.cs-bill-sug {
	position: absolute;
	z-index: 50;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid var(--cs-border, #e5e0e3);
	border-radius: 9px;
	box-shadow: 0 10px 28px rgba(42, 22, 32, .14);
	list-style: none;
	margin: 0;
	padding: 4px;
	max-height: 220px;
	overflow-y: auto;
}
.cs-bill-sug li {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 8px 10px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 13px;
}
.cs-bill-sug li:hover { background: #FDF2F8; }
.cs-bill-sug .n { flex: 1; color: var(--cs-ink, #2a1620); }
.cs-bill-sug .p { font-weight: 600; color: var(--cs-primary, #A9165E); font-variant-numeric: tabular-nums; }
.cs-bill-sug .s { font-size: 11.5px; color: var(--cs-muted, #8a7480); }
.cs-bill-sug .s.agotado { color: #dc2626; font-weight: 600; }

/* Línea de diagnóstico de la cuenta. Solo la ven los administradores y se
   retirará cuando esto quede estable. */
.cs-bill-debug {
	margin: 8px 0 0;
	font-family: ui-monospace, Menlo, monospace;
	font-size: 11px;
	color: var(--cs-muted, #8a7480);
	background: var(--cs-surface-2, #f9fafb);
	padding: 5px 9px;
	border-radius: 5px;
}

/* Aviso de tratamiento oculto en la web. */
.cs-oculto-aviso {
	margin: 4px 0 0 24px;
	padding: 8px 12px;
	background: #FFFBEB;
	border-left: 3px solid #D97706;
	border-radius: 6px;
	font-size: 12px;
	line-height: 1.55;
	color: #92400E;
}

/* ── Importar tratamientos ──────────────────────────────────────────────── */
.cs-imp { display: flex; flex-direction: column; gap: 18px; }

.cs-imp-resultado { padding: 20px 24px; }
.cs-imp-resultado h2 { margin: 0 0 14px; font-size: 17px; }
.cs-imp-resultado.hecho  { background: #ECFDF5; border-left: 4px solid #059669; }
.cs-imp-resultado.hecho h2 { color: #065F46; }
.cs-imp-resultado.ensayo { background: #EFF6FF; border-left: 4px solid #2563EB; }
.cs-imp-resultado.ensayo h2 { color: #1E40AF; }

.cs-imp-cifras { display: flex; gap: 32px; flex-wrap: wrap; }
.cs-imp-cifras .n { display: block; font-size: 26px; font-weight: 700; color: var(--cs-ink, #2a1620); line-height: 1.1; }
.cs-imp-cifras .l { font-size: 12px; color: var(--cs-muted, #8a7480); }

.cs-imp-errores {
	margin: 14px 0 0; padding: 12px 16px 12px 32px;
	background: #FEF2F2; border-radius: 8px;
	font-size: 13px; color: #991B1B;
}

.cs-imp-detalle { margin-top: 14px; }
.cs-imp-detalle summary { cursor: pointer; font-size: 13px; color: var(--cs-primary, #A9165E); }

.cs-imp-tabla { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 10px; }
.cs-imp-tabla td { padding: 7px 10px; border-bottom: 1px solid var(--cs-border, #f0e9ec); vertical-align: top; }
.cs-imp-tabla td.a { color: var(--cs-muted, #8a7480); font-size: 12px; white-space: nowrap; }
.cs-imp-tabla td.p { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs-imp-cols td:first-child { white-space: nowrap; width: 1%; }
.cs-imp-cols code {
	background: #FDF2F8; color: var(--cs-primary, #A9165E);
	padding: 2px 7px; border-radius: 4px; font-size: 12px;
}

.cs-imp-subir {
	margin: 14px 0;
	padding: 20px;
	border: 2px dashed var(--cs-border, #e5e0e3);
	border-radius: 10px;
	text-align: center;
}
.cs-imp-botones { display: flex; gap: 10px; flex-wrap: wrap; }

/* Bloque de «terminar» del importador: gris y discreto, para que no compita
   con la acción principal de la pantalla. */
.cs-imp-cerrar { background: var(--cs-surface-2, #f9fafb); }
.cs-imp-cerrar p { margin: 0 0 12px; font-size: 13px; line-height: 1.6; color: var(--cs-muted, #8a7480); }
.cs-imp-cerrar strong { color: var(--cs-ink, #2a1620); }

/* Pasos del importador y protocolos sin enlazar. */
.cs-imp-pasos { margin: 12px 0; padding-left: 22px; font-size: 13.5px; line-height: 1.75; color: var(--cs-muted, #8a7480); }
.cs-imp-pasos strong { color: var(--cs-ink, #2a1620); }
.cs-imp-huerfanos {
	margin-top: 14px; padding: 12px 16px;
	background: #FFFBEB; border-left: 3px solid #D97706; border-radius: 8px;
	font-size: 13px; color: #92400E;
}
.cs-imp-huerfanos p { margin: 0 0 8px; line-height: 1.6; }
.cs-imp-huerfanos ul { margin: 0; padding-left: 20px; }