/* =========================================================================
   AsesorMG · Sistema de diseño
   Paleta corporativa Sistemas Digitales MG (naranja #d07600).
   Fuente única de verdad: se encola en front y en admin.
   ========================================================================= */

:root {
	/* Marca */
	--amg-primary:      #d07600;
	--amg-primary-600:  #b56500;
	--amg-primary-700:  #984f00;
	--amg-primary-300:  #e9a23f;
	--amg-primary-100:  #f9e6c8;
	--amg-primary-50:   #fdf6ec;

	/* Semánticos */
	--amg-red:     #dc2626;  /* impuestos / pagos a Hacienda */
	--amg-red-50:  #fef2f2;
	--amg-green:   #16a34a;  /* cobros / ingresos */
	--amg-green-50:#f0fdf4;
	--amg-blue:    #2563eb;  /* informativo */
	--amg-blue-50: #eff6ff;
	--amg-amber:   #d97706;

	/* Neutros */
	--amg-ink:      #1c1917;
	--amg-text:     #44403c;
	--amg-muted:    #78716c;
	--amg-border:   #e7e5e4;
	--amg-border-2: #d6d3d1;
	--amg-bg:       #f7f6f4;
	--amg-surface:  #ffffff;
	--amg-surface-2:#faf9f7;

	/* Forma */
	--amg-radius:    12px;
	--amg-radius-sm: 8px;
	--amg-radius-lg: 18px;
	--amg-shadow:    0 1px 2px rgba(28,25,23,.06), 0 4px 16px rgba(28,25,23,.05);
	--amg-shadow-lg: 0 8px 30px rgba(28,25,23,.10);

	--amg-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ---- Reset suave dentro de contenedores AsesorMG ---- */
.amg-app, .amg-admin {
	font-family: var(--amg-font);
	color: var(--amg-text);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
.amg-app *, .amg-admin * { box-sizing: border-box; }

/* ============================ Tipografía ============================ */
.amg-h1 { font-size: 1.6rem; font-weight: 700; color: var(--amg-ink); margin: 0 0 .25rem; letter-spacing: -.01em; }
.amg-h2 { font-size: 1.2rem; font-weight: 650; color: var(--amg-ink); margin: 0 0 .5rem; }
.amg-sub { color: var(--amg-muted); font-size: .9rem; margin: 0; }

/* ============================ Botones ============================ */
.amg-btn {
	display: inline-flex; align-items: center; gap: .45rem;
	font-family: var(--amg-font); font-size: .875rem; font-weight: 600;
	padding: .55rem .95rem; border-radius: var(--amg-radius-sm);
	border: 1px solid transparent; cursor: pointer; text-decoration: none;
	transition: all .15s ease; line-height: 1; white-space: nowrap;
}
.amg-btn:focus-visible { outline: 2px solid var(--amg-primary-300); outline-offset: 2px; }
.amg-btn-primary {
	background: linear-gradient(135deg, var(--amg-primary) 0%, var(--amg-primary-600) 100%);
	color: #fff; box-shadow: 0 1px 2px rgba(152,79,0,.25);
}
.amg-btn-primary:hover { background: linear-gradient(135deg, var(--amg-primary-600) 0%, var(--amg-primary-700) 100%); color:#fff; transform: translateY(-1px); }
.amg-btn-ghost { background: var(--amg-surface); color: var(--amg-text); border-color: var(--amg-border-2); }
.amg-btn-ghost:hover { background: var(--amg-surface-2); border-color: var(--amg-primary-300); color: var(--amg-primary-700); }
.amg-btn-danger { background: var(--amg-red); color:#fff; }
.amg-btn-danger:hover { background:#b91c1c; color:#fff; }
.amg-btn-sm { padding: .35rem .6rem; font-size: .8rem; }
.amg-btn[disabled] { opacity:.5; cursor:not-allowed; transform:none; }

/* ============================ Cards ============================ */
.amg-card {
	background: var(--amg-surface); border: 1px solid var(--amg-border);
	border-radius: var(--amg-radius); box-shadow: var(--amg-shadow);
	padding: 1.25rem;
}
.amg-card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom: 1rem; }

/* ============================ KPIs ============================ */
.amg-kpis { display:grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: 1rem; }
.amg-kpi {
	background: var(--amg-surface); border:1px solid var(--amg-border);
	border-radius: var(--amg-radius); padding: 1.1rem 1.25rem; position:relative; overflow:hidden;
	box-shadow: var(--amg-shadow);
}
.amg-kpi::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background: var(--amg-primary); }
.amg-kpi.is-red::before   { background: var(--amg-red); }
.amg-kpi.is-green::before { background: var(--amg-green); }
.amg-kpi.is-blue::before  { background: var(--amg-blue); }
.amg-kpi .amg-kpi-label { font-size:.78rem; font-weight:600; color: var(--amg-muted); text-transform:uppercase; letter-spacing:.04em; }
.amg-kpi .amg-kpi-value { font-size:1.8rem; font-weight:750; color: var(--amg-ink); margin-top:.25rem; letter-spacing:-.02em; }
.amg-kpi .amg-kpi-foot  { font-size:.8rem; color: var(--amg-muted); margin-top:.2rem; }

/* ============================ Badges ============================ */
.amg-badge {
	display:inline-flex; align-items:center; gap:.3rem;
	font-size:.74rem; font-weight:650; padding:.22rem .55rem; border-radius:999px;
	background: var(--amg-primary-50); color: var(--amg-primary-700); border:1px solid var(--amg-primary-100);
}
.amg-badge.is-success { background: var(--amg-green-50); color:#15803d; border-color:#bbf7d0; }
.amg-badge.is-danger  { background: var(--amg-red-50); color:#b91c1c; border-color:#fecaca; }
.amg-badge.is-warning { background:#fffbeb; color:#b45309; border-color:#fde68a; }
.amg-badge.is-muted   { background:#f5f5f4; color: var(--amg-muted); border-color: var(--amg-border); }
.amg-badge .dot { width:6px; height:6px; border-radius:50%; background: currentColor; }

/* ============================ Tablas ============================ */
.amg-table-wrap { background: var(--amg-surface); border:1px solid var(--amg-border); border-radius: var(--amg-radius); overflow:hidden; box-shadow: var(--amg-shadow); }
.amg-table { width:100%; border-collapse: collapse; font-size:.875rem; }
.amg-table thead th {
	text-align:left; font-weight:650; color: var(--amg-muted); background: var(--amg-surface-2);
	padding:.7rem 1rem; border-bottom:1px solid var(--amg-border); font-size:.78rem; text-transform:uppercase; letter-spacing:.03em;
}
.amg-table tbody td { padding:.8rem 1rem; border-bottom:1px solid var(--amg-border); color: var(--amg-text); vertical-align:middle; }
.amg-table tbody tr:last-child td { border-bottom:none; }
.amg-table tbody tr:hover { background: var(--amg-primary-50); }
.amg-table .amg-strong { font-weight:650; color: var(--amg-ink); }

/* ============================ Formularios ============================ */
.amg-field { margin-bottom: 1rem; }
.amg-label { display:block; font-size:.82rem; font-weight:600; color: var(--amg-text); margin-bottom:.35rem; }
.amg-input, .amg-select, .amg-textarea {
	width:100%; font-family: var(--amg-font); font-size:.9rem; color: var(--amg-ink);
	padding:.6rem .75rem; border:1px solid var(--amg-border-2); border-radius: var(--amg-radius-sm);
	background: var(--amg-surface); transition: border-color .15s, box-shadow .15s;
}
.amg-input:focus, .amg-select:focus, .amg-textarea:focus {
	outline:none; border-color: var(--amg-primary); box-shadow: 0 0 0 3px var(--amg-primary-100);
}
.amg-grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* Filtros "Todos" 50/50 en la misma línea (preferencia de listados) */
.amg-filtros-50 { display:grid; grid-template-columns: 1fr 1fr; gap:.75rem; margin-bottom:1rem; }

/* ============================ Layout de plataforma ============================ */
.amg-topbar {
	display:flex; align-items:center; justify-content:space-between;
	background: var(--amg-surface); border-bottom:1px solid var(--amg-border);
	padding:.75rem 1.25rem; position:sticky; top:0; z-index:30;
}
.amg-brand { display:flex; align-items:center; gap:.6rem; font-weight:750; color: var(--amg-ink); font-size:1.05rem; }
.amg-brand .amg-logo { width:30px; height:30px; border-radius:8px; background: linear-gradient(135deg, var(--amg-primary), var(--amg-primary-600)); display:grid; place-items:center; color:#fff; font-weight:800; }

.amg-shell { display:grid; grid-template-columns: 248px 1fr; min-height: calc(100vh - 60px); }
.amg-sidebar { background: var(--amg-surface); border-right:1px solid var(--amg-border); padding:1rem .75rem; }
.amg-nav-item { display:flex; align-items:center; gap:.6rem; padding:.6rem .75rem; border-radius: var(--amg-radius-sm); color: var(--amg-text); text-decoration:none; font-size:.9rem; font-weight:550; margin-bottom:.15rem; }
.amg-nav-item:hover { background: var(--amg-primary-50); color: var(--amg-primary-700); }
.amg-nav-item.is-active { background: var(--amg-primary); color:#fff; box-shadow:0 1px 2px rgba(152,79,0,.3); }
.amg-content { padding: 1.5rem; max-width: 1280px; }

/* ============================ Utilidades ============================ */
.amg-flex { display:flex; align-items:center; }
.amg-gap { gap:.75rem; }
.amg-between { justify-content:space-between; }
.amg-mt { margin-top:1rem; } .amg-mb { margin-bottom:1rem; }
.amg-muted-txt { color: var(--amg-muted); }
.amg-empty { text-align:center; padding:2.5rem 1rem; color: var(--amg-muted); }
.amg-empty svg { opacity:.4; margin-bottom:.5rem; }

@media (max-width: 900px) {
	.amg-shell { grid-template-columns: 1fr; }
	.amg-sidebar { display:none; }
	.amg-grid-2, .amg-filtros-50 { grid-template-columns: 1fr; }
}