/* ===========================================================================
   Voxy UI · capa de identidad (colores + botones + componentes)
   Re-skinea las clases Bootstrap3 / INSPINIA que ya usan las vistas.
   Incluir después de bundle('site') para que gane por orden.
   =========================================================================== */

:root {
	--vx-indigo: #5B4AE8;
	--vx-indigo-700: #3D2EC4;
	--vx-indigo-900: #1a1740;
	--vx-indigo-tint: #eee9ff;
	--vx-mint: #A8F0E0;
	--vx-ink: #1f2d3d;
	--vx-muted: #6b7280;
	--vx-surface: #ffffff;
	--vx-s1: #f7f6ff;
	--vx-border: #e6e3f7;
	--vx-border-strong: #d6d2ee;
	--vx-radius: 8px;
	--vx-green: #1a9c74;
	--vx-green-bg: #e3f6ef;
	--vx-amber: #a9791a;
	--vx-amber-bg: #fff3d6;
	--vx-red: #c0394e;
	--vx-red-bg: #fdeaed;
}

/* ---------------- Botones ---------------- */
.btn {
	border-radius: var(--vx-radius);
	font-weight: 600;
	border: 1px solid transparent;
	background-image: none;
	text-shadow: none;
	box-shadow: none;
	transition: background-color .15s, border-color .15s, color .15s;
	padding: 7px 15px;
}
.btn:focus, .btn:active:focus { outline: none; box-shadow: 0 0 0 3px rgba(91, 74, 232, .18); }
.btn-xs { padding: 3px 9px; border-radius: 6px; }
.btn-sm, .btn-small { padding: 5px 12px; }
.btn-lg { padding: 11px 22px; }

.btn-primary { background: var(--vx-indigo); color: #fff; border-color: var(--vx-indigo); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active,
.open > .dropdown-toggle.btn-primary { background: var(--vx-indigo-700); color: #fff; border-color: var(--vx-indigo-700); }
/* estado disabled: INSPINIA lo pinta verde (#1dc5a3) con selectores de alta
   especificidad; replicamos su lista completa en índigo. */
.btn-primary.disabled,
.btn-primary.disabled:hover,
.btn-primary.disabled:focus,
.btn-primary.disabled:active,
.btn-primary.disabled.active,
.btn-primary[disabled],
.btn-primary[disabled]:hover,
.btn-primary[disabled]:focus,
.btn-primary[disabled]:active,
.btn-primary.active[disabled],
fieldset[disabled] .btn-primary,
fieldset[disabled] .btn-primary:hover,
fieldset[disabled] .btn-primary:focus,
fieldset[disabled] .btn-primary:active,
fieldset[disabled] .btn-primary.active {
	background-color: var(--vx-indigo);
	border-color: var(--vx-indigo);
	color: #fff;
	opacity: .45;
}

.btn-default { background: var(--vx-surface); color: var(--vx-ink); border-color: var(--vx-border-strong); }
.btn-default:hover, .btn-default:focus { background: var(--vx-s1); border-color: var(--vx-indigo); color: var(--vx-indigo); }

.btn-success { background: var(--vx-green); color: #fff; }
.btn-success:hover, .btn-success:focus { background: #158460; color: #fff; }

.btn-warning { background: #e0a020; color: #fff; }
.btn-warning:hover, .btn-warning:focus { background: #c98c14; color: #fff; }

.btn-danger { background: #d9455e; color: #fff; }
.btn-danger:hover, .btn-danger:focus { background: #c0394e; color: #fff; }

.btn-info { background: var(--vx-indigo-tint); color: var(--vx-indigo); }
.btn-info:hover, .btn-info:focus { background: #e2dbff; color: var(--vx-indigo-700); }

.btn-link { color: var(--vx-indigo); }
.btn.disabled, .btn[disabled] { opacity: .5; }

/* ---------------- Cards (ibox / panel) ---------------- */
.ibox, .panel {
	background: var(--vx-surface);
	border: 1px solid var(--vx-border);
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(26, 23, 64, .04);
	margin-bottom: 20px;
}
.ibox-title, .panel-heading {
	background: var(--vx-surface);
	border-color: var(--vx-border);
	border-radius: 12px 12px 0 0;
	padding: 14px 18px;
	color: var(--vx-ink);
}
.ibox-title h5, .panel-heading h5, .panel-title { font-size: 14px; font-weight: 600; color: var(--vx-ink); }
.ibox-content, .panel-body { border-color: var(--vx-border); padding: 18px; }
.ibox-footer { background: var(--vx-s1); border-color: var(--vx-border); border-radius: 0 0 12px 12px; padding: 12px 18px; }

/* Neutraliza los headings de color de Bootstrap/INSPINIA (el verde de panel-primary, etc.) */
.panel-primary, .panel-success, .panel-info, .panel-warning, .panel-danger { border-color: var(--vx-border); }
.panel-primary > .panel-heading,
.panel-success > .panel-heading,
.panel-info > .panel-heading,
.panel-warning > .panel-heading,
.panel-danger > .panel-heading {
	background: var(--vx-surface);
	border-color: var(--vx-border);
	color: var(--vx-ink);
}
.panel-primary > .panel-heading h4, .panel-primary > .panel-heading h5,
.panel-success > .panel-heading h4, .panel-success > .panel-heading h5,
.panel-info > .panel-heading h4,    .panel-info > .panel-heading h5,
.panel-warning > .panel-heading h4, .panel-warning > .panel-heading h5,
.panel-danger > .panel-heading h4,  .panel-danger > .panel-heading h5 { color: var(--vx-ink); }
/* acento sutil de marca: el ícono de la cabecera en índigo */
.panel-heading h4 > i, .panel-heading h5 > i, .ibox-title h5 > i { color: var(--vx-indigo); }

/* ---------------- Tablas ---------------- */
.table { color: var(--vx-ink); }
.table > thead > tr > th {
	border-bottom: 1px solid var(--vx-border);
	border-top: 0;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .4px;
	color: #9aa0ab;
	padding: 10px 14px;
	vertical-align: middle;
}
.table > tbody > tr > td {
	border-top: 1px solid #f1f0f8;
	padding: 10px 14px;
	vertical-align: middle;
	font-size: 13px;
}
.table-bordered, .table-bordered > thead > tr > th, .table-bordered > tbody > tr > td { border-color: #f1f0f8; }
.table-hover > tbody > tr:hover { background: var(--vx-s1); }
.table a { color: var(--vx-indigo); }
.minitabla { font-size: 13px; }

/* ---------------- Formularios ---------------- */
.form-control {
	border: 1px solid var(--vx-border-strong);
	border-radius: var(--vx-radius);
	box-shadow: none;
	color: var(--vx-ink);
	height: auto;
	padding: 8px 12px;
}
.form-control:focus { border-color: var(--vx-indigo); box-shadow: 0 0 0 3px rgba(91, 74, 232, .15); }
.control-label { color: #374151; font-weight: 600; }
.input-group-addon { background: var(--vx-s1); border-color: var(--vx-border-strong); border-radius: var(--vx-radius); }

/* ---------------- Badges / labels ---------------- */
.label, .badge {
	font-weight: 600;
	font-size: 11px;
	border-radius: 999px;
	padding: 3px 9px;
}
.label-primary, .badge-primary { background: var(--vx-indigo-tint); color: var(--vx-indigo); }
.label-success, .badge-success { background: var(--vx-green-bg); color: var(--vx-green); }
.label-warning, .badge-warning { background: var(--vx-amber-bg); color: var(--vx-amber); }
.label-danger, .badge-danger { background: var(--vx-red-bg); color: var(--vx-red); }
.label-info, .badge-info { background: #e6f6f1; color: #0f8f8f; }
.label-default, .badge-default { background: #eef0f4; color: #667085; }

/* ---------------- Pills de estado PQR (colores por estado) ---------------- */
.vx-estado {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	border-radius: 999px;
	padding: 3px 10px;
	white-space: nowrap;
	background: #eef0f4;
	color: #667085;
}
.vx-estado--atencion_cliente { background: var(--vx-indigo-tint); color: var(--vx-indigo); }
.vx-estado--abierto,
.vx-estado--gestionado,
.vx-estado--en_aprobacion,
.vx-estado--instalacion,
.vx-estado--sin_diagnostico,
.vx-estado--verificado { background: var(--vx-green-bg); color: var(--vx-green); }
.vx-estado--cierre_propuesto { background: var(--vx-amber-bg); color: var(--vx-amber); }
/* cerrado = finalizado: gris pizarra (antes teal, se confundía con 'abierto' verde) */
.vx-estado--cerrado { background: #eef0f4; color: #5b6472; }
.vx-estado--anulado,
.vx-estado--rechazado { background: var(--vx-red-bg); color: var(--vx-red); }

/* ---------------- Detalles finos ---------------- */
a { color: var(--vx-indigo); }
a:hover, a:focus { color: var(--vx-indigo-700); }
.text-primary { color: var(--vx-indigo) !important; }
.text-navy { color: var(--vx-indigo) !important; }
.nav-tabs > li.active > a { border-top: 2px solid var(--vx-indigo); color: var(--vx-indigo); }
/* enlaces e items no-activos (incluye los <span> de "…" y prev/next) en indigo */
.pagination > li > a,
.pagination > li > span { color: var(--vx-indigo); }
/* item activo: fondo indigo Y texto blanco (antes solo se ponía el fondo, y el
   número quedaba oscuro sobre indigo, ilegible). El activo es un <span>. */
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
	color: #fff;
	background-color: var(--vx-indigo);
	border-color: var(--vx-indigo);
}
/* deshabilitados (prev/next sin destino) atenuados, no negros */
.pagination > .disabled > span,
.pagination > .disabled > a { color: #b9c0c9; }