/* ================================================================
   ComercialIntra — Design System "PRO"
   Adaptación completa del sistema de diseño de tu Intranet Comercial
   (BENSAN & PEOPLE) aplicado sobre los componentes de Dolibarr.
   ================================================================ */

:root {
	--ci-bg:        #f4f6fb;
	--ci-surf:      #ffffff;
	--ci-surf2:     #f8f9fc;
	--ci-surf3:     #eef0f6;
	--ci-border:    rgba(15,23,42,.09);
	--ci-border2:   rgba(15,23,42,.15);

	--ci-gold:      #b8923c;
	--ci-gold2:     #d4a843;
	--ci-gold-bg:   rgba(184,146,60,.09);
	--ci-gold-glow: rgba(184,146,60,.22);

	--ci-blue:      #2563eb;
	--ci-blue-bg:   rgba(37,99,235,.08);
	--ci-green:     #059669;
	--ci-green-bg:  rgba(5,150,105,.08);
	--ci-yellow:    #d97706;
	--ci-yellow-bg: rgba(217,119,6,.09);
	--ci-red:       #dc2626;
	--ci-red-bg:    rgba(220,38,38,.08);
	--ci-purple:    #7c3aed;
	--ci-purple-bg: rgba(124,58,237,.08);

	--ci-text:      #0f172a;
	--ci-text2:     #475569;
	--ci-text3:     #94a3b8;

	--ci-r:         8px;
	--ci-rlg:       12px;
	--ci-rsm:       5px;
	--ci-ease:      .15s cubic-bezier(.4,0,.2,1);
	--ci-shadow:    0 1px 3px rgba(15,23,42,.06), 0 4px 16px rgba(15,23,42,.04);
	--ci-shadowlg:  0 4px 24px rgba(15,23,42,.10), 0 1px 4px rgba(15,23,42,.06);
	--ci-font:      -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
}

.comercialintra-app {
	font-family: var(--ci-font);
	color: var(--ci-text);
	animation: ciFadeIn .2s ease;
}
@keyframes ciFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ---------------------------------------------------------------
   Título de página con icono SVG propio
--------------------------------------------------------------- */
.comercialintra-app .ci-page-title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--ci-border);
}
.comercialintra-app .ci-page-title svg {
	color: var(--ci-gold);
	flex-shrink: 0;
	background: var(--ci-gold-bg);
	padding: 7px;
	border-radius: var(--ci-r);
	width: 34px;
	height: 34px;
	box-sizing: border-box;
}
.comercialintra-app .ci-page-title h1 {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--ci-text);
	margin: 0;
	letter-spacing: -.3px;
}

/* ---------------------------------------------------------------
   Tarjetas ("card") — envoltorio general de contenido
--------------------------------------------------------------- */
.comercialintra-app .ci-card {
	background: var(--ci-surf);
	border: 1px solid var(--ci-border);
	border-radius: var(--ci-rlg);
	box-shadow: var(--ci-shadow);
	overflow: hidden;
	margin-bottom: 18px;
}
.comercialintra-app .ci-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	border-bottom: 1px solid var(--ci-border);
	background: var(--ci-surf2);
}
.comercialintra-app .ci-card-header h3 {
	font-size: .88rem;
	font-weight: 700;
	color: var(--ci-text);
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	border: none;
	padding: 0;
}
.comercialintra-app .ci-card-body { padding: 18px; }

/* ---------------------------------------------------------------
   Stat cards — cuadros de KPI (usados en Ranking / Ventas)
--------------------------------------------------------------- */
.comercialintra-app .ci-grid-stats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 14px;
	margin-bottom: 22px;
}
.comercialintra-app .ci-stat-card {
	background: var(--ci-surf);
	border: 1px solid var(--ci-border);
	border-radius: var(--ci-rlg);
	padding: 16px 18px;
	box-shadow: var(--ci-shadow);
	position: relative;
	overflow: hidden;
}
.comercialintra-app .ci-stat-card::after {
	content: '';
	position: absolute; top: 0; left: 0; right: 0; height: 3px;
	background: var(--ci-gold);
	border-radius: var(--ci-rlg) var(--ci-rlg) 0 0;
}
.comercialintra-app .ci-stat-card.ci-sc-blue::after { background: var(--ci-blue); }
.comercialintra-app .ci-stat-card.ci-sc-green::after { background: var(--ci-green); }
.comercialintra-app .ci-stat-card.ci-sc-purple::after { background: var(--ci-purple); }
.comercialintra-app .ci-sc-label {
	font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .8px;
	color: var(--ci-text3); margin-bottom: 8px; display: flex; align-items: center; gap: 5px;
}
.comercialintra-app .ci-sc-value {
	font-size: 1.85rem; font-weight: 800; color: var(--ci-text); letter-spacing: -.5px; line-height: 1;
}
.comercialintra-app .ci-stat-card.ci-sc-blue .ci-sc-value { color: var(--ci-blue); }
.comercialintra-app .ci-stat-card.ci-sc-green .ci-sc-value { color: var(--ci-green); }
.comercialintra-app .ci-stat-card.ci-sc-purple .ci-sc-value { color: var(--ci-purple); }
.comercialintra-app .ci-sc-sub {
	font-size: .72rem; color: var(--ci-text3); margin-top: 6px;
}

/* ---------------------------------------------------------------
   Tablas de listado (estilo card)
--------------------------------------------------------------- */
.comercialintra-app table.noborder,
.comercialintra-app table.border {
	background: var(--ci-surf);
	border: 1px solid var(--ci-border) !important;
	border-radius: var(--ci-rlg);
	box-shadow: var(--ci-shadow);
	overflow: hidden;
	border-collapse: separate !important;
	border-spacing: 0;
}
.comercialintra-app table.noborder tr.liste_titre td,
.comercialintra-app table.border tr:first-child td.titlefield {
	background: var(--ci-surf2) !important;
	color: var(--ci-text2);
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .6px;
	border-bottom: 1px solid var(--ci-border) !important;
	padding-top: 10px !important;
	padding-bottom: 10px !important;
}
.comercialintra-app table td { padding: 9px 12px; font-size: .86rem; }
.comercialintra-app table tr.oddeven { transition: background var(--ci-ease); }
.comercialintra-app table tr.oddeven:hover { background: var(--ci-gold-bg) !important; }

/* ---------------------------------------------------------------
   Botones
--------------------------------------------------------------- */
.comercialintra-app a.butAction,
.comercialintra-app input[type="submit"].button {
	background: linear-gradient(135deg, #c9a84c 0%, #e4c97a 50%, #a67c30 100%) !important;
	color: #1a1000 !important;
	border: none !important;
	border-radius: var(--ci-r) !important;
	font-weight: 700 !important;
	font-size: .82rem !important;
	padding: 8px 16px !important;
	box-shadow: 0 1px 4px rgba(201,168,76,.35);
	transition: all var(--ci-ease);
	letter-spacing: .2px;
}
.comercialintra-app a.butAction:hover,
.comercialintra-app input[type="submit"].button:hover {
	opacity: .92;
	box-shadow: 0 4px 14px rgba(201,168,76,.45);
	transform: translateY(-1px);
}
.comercialintra-app a.butActionDelete {
	background: var(--ci-red) !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--ci-r) !important;
	font-weight: 700 !important;
	font-size: .82rem !important;
	padding: 8px 16px !important;
	transition: all var(--ci-ease);
}
.comercialintra-app a.butActionDelete:hover { opacity: .88; transform: translateY(-1px); }

/* ---------------------------------------------------------------
   Inputs
--------------------------------------------------------------- */
.comercialintra-app input[type="text"],
.comercialintra-app input[type="email"],
.comercialintra-app input[type="number"],
.comercialintra-app input[type="password"],
.comercialintra-app input[type="color"],
.comercialintra-app select,
.comercialintra-app textarea {
	border: 1px solid var(--ci-border2) !important;
	border-radius: var(--ci-r) !important;
	padding: 8px 11px !important;
	font-size: .85rem;
	transition: all var(--ci-ease);
	background: var(--ci-surf);
}
.comercialintra-app input:focus,
.comercialintra-app select:focus,
.comercialintra-app textarea:focus {
	border-color: var(--ci-gold) !important;
	outline: none;
	box-shadow: 0 0 0 3px var(--ci-gold-bg);
}
.comercialintra-app label { font-size: .85rem; }

/* ---------------------------------------------------------------
   Cabeceras de sección
--------------------------------------------------------------- */
.comercialintra-app h3 {
	font-size: .95rem;
	font-weight: 700;
	color: var(--ci-text);
	margin: 22px 0 12px 0;
	padding-bottom: 9px;
	border-bottom: 1px solid var(--ci-border);
	display: flex;
	align-items: center;
	gap: 7px;
}

/* ---------------------------------------------------------------
   Badges de estado / código
--------------------------------------------------------------- */
.comercialintra-app .badge-status4 {
	background: var(--ci-green-bg);
	color: var(--ci-green);
	padding: 3px 10px;
	border-radius: 20px;
	font-size: .72rem;
	font-weight: 700;
}
.comercialintra-app .ci-code-badge {
	display: inline-block;
	background: var(--ci-surf3);
	color: var(--ci-text2);
	font-family: 'SF Mono', 'Consolas', monospace;
	font-size: .74rem;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: var(--ci-rsm);
	letter-spacing: .5px;
}
.comercialintra-app .ci-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: .72rem;
	font-weight: 700;
}
.comercialintra-app .ci-badge-gold  { background: var(--ci-gold-bg); color: var(--ci-gold); }
.comercialintra-app .ci-badge-green { background: var(--ci-green-bg); color: var(--ci-green); }
.comercialintra-app .ci-badge-red   { background: var(--ci-red-bg); color: var(--ci-red); }
.comercialintra-app .ci-badge-blue  { background: var(--ci-blue-bg); color: var(--ci-blue); }
.comercialintra-app .ci-badge-grey  { background: var(--ci-surf3); color: var(--ci-text3); }

/* ---------------------------------------------------------------
   Ranking: fila con medalla + barra de progreso
--------------------------------------------------------------- */
.comercialintra-app .ci-rank-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--ci-border);
}
.comercialintra-app .ci-rank-row:last-child { border-bottom: none; }
.comercialintra-app .ci-rank-medal {
	display: flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; border-radius: 50%;
	font-size: 1rem; font-weight: 800; flex-shrink: 0;
}
.comercialintra-app .ci-rank-1 { background: rgba(212,175,55,.18); color: #d4af37; }
.comercialintra-app .ci-rank-2 { background: rgba(185,192,201,.25); color: #8b93a1; }
.comercialintra-app .ci-rank-3 { background: rgba(201,130,74,.20); color: #c9824a; }
.comercialintra-app .ci-rank-other { background: var(--ci-surf3); color: var(--ci-text3); font-size: .78rem; }
.comercialintra-app .ci-rank-info { flex: 1; min-width: 0; }
.comercialintra-app .ci-rank-name { font-weight: 700; font-size: .88rem; color: var(--ci-text); }
.comercialintra-app .ci-rank-meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.comercialintra-app .ci-rank-points { text-align: right; flex-shrink: 0; }
.comercialintra-app .ci-rank-points-value {
	display: flex; align-items: center; gap: 4px; justify-content: flex-end;
	color: var(--ci-gold); font-weight: 800; font-size: 1.1rem;
}
.comercialintra-app .ci-rank-points-label { font-size: .68rem; color: var(--ci-text3); }
.comercialintra-app .ci-progress-track {
	height: 6px; border-radius: 99px; background: var(--ci-surf3); overflow: hidden; margin-top: 8px;
}
.comercialintra-app .ci-progress-fill {
	height: 100%; border-radius: 99px;
	background: linear-gradient(90deg, var(--ci-gold), var(--ci-gold2));
	transition: width .4s ease;
}

/* ---------------------------------------------------------------
   Selector de Stands (chips)
--------------------------------------------------------------- */
.comercialintra-app .ci-stands-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.comercialintra-app .ci-stand-chip {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 7px 14px; border: 1px solid var(--ci-border2); border-radius: 20px;
	font-size: .82rem; cursor: pointer; background: var(--ci-surf2);
	transition: all var(--ci-ease);
}
.comercialintra-app .ci-stand-chip:has(input:checked) {
	background: var(--ci-gold-bg); border-color: var(--ci-gold); color: var(--ci-gold); font-weight: 700;
}
.comercialintra-app .ci-stand-chip input { accent-color: var(--ci-gold); }

/* ---------------------------------------------------------------
   Avatares circulares (iniciales)
--------------------------------------------------------------- */
.comercialintra-app .ci-avatar {
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border-radius: 50%;
	background: var(--ci-gold-bg); color: var(--ci-gold);
	font-size: .74rem; font-weight: 800; flex-shrink: 0;
	margin-right: 8px; vertical-align: middle;
}

/* ---------------------------------------------------------------
   Cajas de aviso/info
--------------------------------------------------------------- */
.comercialintra-app div.warning {
	background: var(--ci-yellow-bg) !important;
	border: 1px solid rgba(217,119,6,.25) !important;
	border-radius: var(--ci-r);
	color: #92400e !important;
	padding: 12px 14px !important;
}
.comercialintra-app div.info {
	background: var(--ci-blue-bg) !important;
	border: 1px solid rgba(37,99,235,.2) !important;
	border-radius: var(--ci-r);
	color: var(--ci-blue) !important;
	padding: 12px 14px !important;
}

/* ---------------------------------------------------------------
   Buscador "pro" + pastillas de filtro rápido
--------------------------------------------------------------- */
.comercialintra-app .ci-search-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}
.comercialintra-app .ci-search-input {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--ci-surf);
	border: 1px solid var(--ci-border2);
	border-radius: 999px;
	padding: 9px 16px;
	flex: 1 1 260px;
	max-width: 380px;
	box-shadow: var(--ci-shadow);
	transition: all var(--ci-ease);
}
.comercialintra-app .ci-search-input:focus-within {
	border-color: var(--ci-gold);
	box-shadow: 0 0 0 3px var(--ci-gold-bg);
}
.comercialintra-app .ci-search-input svg { color: var(--ci-text3); flex-shrink: 0; }
.comercialintra-app .ci-search-input input {
	border: none !important;
	outline: none;
	background: transparent;
	font-size: .86rem;
	width: 100%;
	padding: 0 !important;
	box-shadow: none !important;
}
.comercialintra-app .ci-search-pills {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}
.comercialintra-app .ci-pill {
	border: 1px solid var(--ci-border2);
	background: var(--ci-surf);
	color: var(--ci-text2);
	padding: 7px 14px;
	border-radius: 999px;
	font-size: .78rem;
	font-weight: 600;
	cursor: pointer;
	transition: all var(--ci-ease);
}
.comercialintra-app .ci-pill:hover { background: var(--ci-surf2); }
.comercialintra-app .ci-pill.active {
	background: var(--ci-gold);
	border-color: var(--ci-gold);
	color: #1a1000;
}

/* ---------------------------------------------------------------
   Muro de notas/comentarios (por venta)
--------------------------------------------------------------- */
.comercialintra-app .ci-notas-lista { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.comercialintra-app .ci-nota {
	background: var(--ci-surf2);
	border: 1px solid var(--ci-border);
	border-radius: var(--ci-r);
	padding: 10px 14px;
}
.comercialintra-app .ci-nota-cab {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 5px;
	font-size: .76rem;
}
.comercialintra-app .ci-nota-autor { font-weight: 700; color: var(--ci-text); }
.comercialintra-app .ci-nota-fecha { color: var(--ci-text3); flex: 1; }
.comercialintra-app .ci-nota-borrar {
	color: var(--ci-text3);
	transition: color var(--ci-ease);
	display: inline-flex;
	align-items: center;
}
.comercialintra-app .ci-nota-borrar:hover { color: var(--ci-red); }
.comercialintra-app .ci-nota-texto { font-size: .86rem; color: var(--ci-text2); white-space: pre-wrap; }
.comercialintra-app .ci-nota-form { display: flex; gap: 10px; align-items: flex-start; }
.comercialintra-app .ci-nota-form textarea { flex: 1; }

/* ---------------------------------------------------------------
   tabsAction: separación uniforme entre botones de acción
--------------------------------------------------------------- */
.comercialintra-app .tabsAction { display: flex; gap: 10px; margin-bottom: 16px; }