@import url("https://rsms.me/inter/inter.css");

:root {
  --tblr-font-sans-serif: Inter, system-ui, -apple-system, sans-serif;
  --tc-blue: #0874df;
  --tc-blue-dark: #0759b8;
  --tc-cyan: #08a6a6;
  --tc-green: #27b85a;
  --tc-lime: #67cc42;
  --tc-orange: #ff9f00;
  --tc-red: #f33148;
  --tc-purple: #8049dd;
  --tc-yellow: #ffbd00;
  --tc-border: #e4e9f0;
  --tc-muted: #667085;
}

.brand-symbol { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:#fff; color:#066fd1; font-weight:800; }
.brand-text { color:#fff; font-weight:800; letter-spacing:.03em; }
.brand-text small { font-size:.65rem; opacity:.72; }

.tc-dashboard-page { padding-top: .75rem; }
.tc-dashboard-page .card { border: 1px solid var(--tc-border); box-shadow: 0 2px 8px rgba(31, 41, 55, .055); overflow: hidden; }
.tc-dashboard-page .card:hover { box-shadow: 0 5px 15px rgba(31, 41, 55, .08); }

/* Indicadores principales */
.tc-kpi-main .card-body { padding: 1.15rem 1.2rem .75rem; }
.tc-kpi-layout { display:flex; align-items:center; gap:1rem; min-height:78px; }
.tc-kpi-content { min-width:0; flex:1; }
.tc-kpi-label { color:#27364a; font-size:.72rem; line-height:1.25; text-transform:uppercase; font-weight:700; letter-spacing:.01em; white-space:nowrap; }
.tc-kpi-label i { font-size:.72rem; color:#617089; margin-left:.25rem; }
.tc-kpi-value { margin-top:.2rem; color:#152238; font-size:1.65rem; line-height:1.1; font-weight:800; letter-spacing:-.035em; white-space:nowrap; }
.tc-kpi-money { font-size:1.55rem; }
.tc-kpi-description { color:var(--tc-muted); font-size:.76rem; margin-top:.35rem; }
.tc-kpi-footer { border-top:1px solid #edf0f4; margin-top:.7rem; padding-top:.65rem; text-align:center; font-size:.72rem; }
.tc-kpi-footer i { font-size:.65rem; }

.tc-icon-box { width:48px; height:48px; border-radius:8px; color:#fff; display:grid; place-items:center; flex:0 0 48px; box-shadow:0 5px 12px rgba(20, 30, 55, .16); }
.tc-icon-box i { font-size:1.45rem; }
.tc-icon-blue { background:linear-gradient(145deg,#2c8cf2,#075ecc); }
.tc-icon-green { background:linear-gradient(145deg,#59d63e,#20aa1f); }
.tc-icon-cyan { background:linear-gradient(145deg,#14bbb6,#00948f); }
.tc-icon-orange { background:linear-gradient(145deg,#ffad16,#f17c00); }
.tc-icon-red { background:linear-gradient(145deg,#ff5363,#e71e38); }
.tc-icon-purple { background:linear-gradient(145deg,#9d67ec,#7334d4); }
.tc-icon-whatsapp { background:linear-gradient(145deg,#24d367,#00a83a); }
.tc-icon-yellow { background:linear-gradient(145deg,#ffc928,#efa900); }

/* Indicadores operativos */
.tc-mini-card .card-body { padding: .85rem .85rem .7rem; text-align:center; }
.tc-mini-head { min-height:44px; display:flex; align-items:flex-start; gap:.65rem; text-align:left; color:#26364d; font-size:.68rem; line-height:1.45; text-transform:uppercase; font-weight:700; }
.tc-mini-icon { width:34px; height:34px; border-radius:8px; color:#fff; display:grid; place-items:center; flex:0 0 34px; box-shadow:0 4px 9px rgba(31,41,55,.12); }
.tc-mini-icon i { font-size:1rem; }
.tc-mini-value { color:#132138; font-size:1.7rem; line-height:1.1; font-weight:800; margin:.6rem 0 .35rem; }
.tc-mini-caption { color:var(--tc-muted); font-size:.73rem; }

/* Cabeceras */
.tc-card-header { min-height:40px; color:#fff; border:0; padding:.65rem .85rem; }
.tc-card-header .card-title { margin:0; color:#fff; font-weight:700; font-size:.76rem; text-transform:uppercase; }
.tc-card-header .card-title i { font-size:.72rem; opacity:.95; }
.tc-header-primary { background:linear-gradient(135deg,#0879e8,#0762c5); }
.tc-header-success { background:linear-gradient(135deg,#29bd67,#1daa52); }
.tc-header-cyan { background:linear-gradient(135deg,#0faaa7,#07918f); }
.tc-header-lime { background:linear-gradient(135deg,#71d54e,#59bf35); }
.tc-header-orange { background:linear-gradient(135deg,#ffab00,#f79500); }
.tc-header-danger { background:linear-gradient(135deg,#f64055,#ed203a); }
.tc-header-purple { background:linear-gradient(135deg,#8f5bdd,#6b39b7); }
.tc-header-whatsapp { background:linear-gradient(135deg,#25d366,#128c7e); }
.tc-header-dark { background:linear-gradient(135deg,#495057,#343a40); }
.tc-header-warning { background:linear-gradient(135deg,#f59f00,#d97706); }

/* Paneles */
.tc-panel-card .card-body { min-height:200px; padding:1rem; position:relative; display:flex; flex-direction:column; }
.tc-network-overview { display:flex; gap:.85rem; align-items:center; flex:1; }
.tc-donut { width:106px; height:106px; flex:0 0 106px; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--donut-color) calc(var(--value) * 1%), #ffbf00 0 calc((var(--value) + 1.2) * 1%), #ef3340 0); position:relative; }
.tc-donut::after { content:""; position:absolute; inset:13px; background:#fff; border-radius:50%; }
.tc-donut > div { position:relative; z-index:1; text-align:center; }
.tc-donut strong { display:block; font-size:1.35rem; line-height:1.05; color:#17243a; }
.tc-donut small { display:block; color:#657086; font-size:.62rem; margin-top:.15rem; }
.tc-status-list { flex:1; min-width:0; }
.tc-status-list > div { display:flex; justify-content:space-between; gap:.45rem; align-items:center; padding:.42rem 0; font-size:.67rem; }
.tc-status-list span { color:#465269; white-space:nowrap; }
.tc-status-list strong { color:#2d384b; font-size:.66rem; white-space:nowrap; }
.tc-dot { width:8px; height:8px; display:inline-block; border-radius:50%; margin-right:.35rem; }

.tc-info-layout { display:flex; gap:.85rem; align-items:center; flex:1; }
.tc-round-icon { width:72px; height:72px; flex:0 0 72px; border-radius:50%; display:grid; place-items:center; }
.tc-round-icon i { font-size:1.65rem; }
.tc-round-cyan { background:#dff7f7; color:#058d8b; }
.tc-round-green { background:#e6f8df; color:#27a92f; }
.tc-round-orange { background:#fff0d9; color:#f58b00; }
.tc-round-money { background:#e1f7e8; color:#2aae58; }
.tc-round-red { background:#fde1e5; color:#e62e45; }
.tc-round-blue { background:#dff0fb; color:#0b86c8; }
.tc-info-list { flex:1; min-width:0; }
.tc-info-list > div { display:flex; justify-content:space-between; align-items:center; gap:.6rem; padding:.34rem 0; font-size:.68rem; }
.tc-info-list span { color:#556176; }
.tc-info-list strong { color:#29354a; font-size:.67rem; text-align:right; white-space:nowrap; }
.tc-card-link { margin-top:auto; padding-top:.85rem; color:#006ad6; text-decoration:none; text-align:right; font-size:.72rem; font-weight:500; }
.tc-card-link:hover { color:#004ea3; text-decoration:underline; }
.tc-card-link i { margin-left:.25rem; font-size:.65rem; }

/* Finanzas */
.tc-finance-top { display:flex; align-items:center; gap:.9rem; }
.tc-finance-value { color:#16243b; font-size:1.45rem; line-height:1.15; font-weight:800; letter-spacing:-.025em; white-space:nowrap; }
.tc-finance-top small { color:#697489; font-size:.72rem; }
.tc-sparkline { width:100%; height:56px; margin-top:.6rem; overflow:visible; }
.tc-sparkline polyline { fill:none; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }
.tc-spark-green polyline { stroke:#20b45a; }
.tc-spark-red polyline { stroke:#f12d43; }
.tc-panel-note { margin-top:auto; padding-top:.35rem; text-align:center; color:#556176; font-size:.7rem; }
.tc-progress { height:8px; margin-top:1rem; background:#e9edf2; }
.tc-progress-value { color:#27354b; text-align:right; font-size:.69rem; font-weight:700; margin-top:.28rem; }
.tc-pending-body .tc-card-link { padding-top:2rem; }

@media (max-width: 1199.98px) {
  .tc-kpi-label { white-space:normal; }
  .tc-network-overview { align-items:flex-start; }
}

@media (max-width: 767.98px) {
  .tc-dashboard-page { padding-top:.35rem; }
  .tc-kpi-main .card-body { padding:1rem; }
  .tc-kpi-layout { gap:.75rem; }
  .tc-kpi-value { font-size:1.45rem; }
  .tc-mini-card .card-body { padding:.75rem .65rem; }
  .tc-network-overview, .tc-info-layout { align-items:center; }
}

@media (max-width: 575.98px) {
  .tc-icon-box { width:42px; height:42px; flex-basis:42px; }
  .tc-icon-box i { font-size:1.2rem; }
  .tc-kpi-label { font-size:.66rem; }
  .tc-kpi-value, .tc-kpi-money { font-size:1.35rem; }
  .tc-mini-head { font-size:.62rem; gap:.45rem; }
  .tc-mini-value { font-size:1.45rem; }
  .tc-network-overview { flex-direction:column; }
  .tc-status-list { width:100%; }
}

@media (max-width: 991.98px) { .navbar-vertical .navbar-brand { flex:1; } }