/* =============================================================
   American Prana — Sistema de diseño (app.css)
   Reemplaza Bootstrap 3 + tema MVP Ready por CSS moderno y ligero.
   Sin framework. Capa de compatibilidad con Bootstrap 3 Y 4/5,
   componentes propios y utilidades. Fuente única de verdad.
   ============================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  --bg:        #eef1f6;
  --surface:   #ffffff;
  --surface-2: #f6f8fc;
  --surface-3: #eef2f8;
  --border:    #e4e9f2;
  --border-2:  #d5dcea;
  --ink:       #16213a;
  --muted:     #5f6d85;
  --faint:     #93a0b5;

  /* Barra superior: AZUL MARINO */
  --navy:      #14284d;
  --navy-2:    #0f2140;
  --navy-ink:  #c3d0e6;

  /* Menú lateral: slate profundo */
  --nav-bg:    #101c2e;
  --nav-bg-2:  #0b1522;
  --nav-ink:   #aeb9cc;
  --nav-hover: rgba(255,255,255,.06);
  --nav-active:#1b3350;
  --nav-label: #64748b;

  /* Semánticos */
  --blue:   #2563eb;  --blue-d:   #1d4ed8;  --blue-l:   #e8effe;
  --green:  #15a34a;  --green-d:  #15803d;  --green-l:  #e6f6ec;
  --red:    #dc2626;  --red-d:    #b91c1c;  --red-l:    #fdeaea;
  --amber:  #e0a125;  --amber-d:  #b7791f;  --amber-l:  #fbf0d8;  --amber-ink:#4a3608;
  --cyan:   #0e91b0;  --cyan-l:   #e0f3f8;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius:    12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(16,28,46,.05), 0 1px 3px rgba(16,28,46,.05);
  --shadow:    0 1px 2px rgba(16,28,46,.04), 0 6px 20px rgba(16,28,46,.07);
  --shadow-lg: 0 10px 40px rgba(16,28,46,.12);

  --sidebar-w: 250px;
  --nav-h: 64px;
}

/* ---------- 2. Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); font-size: 14px; line-height: 1.6;
  color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased;
}
a { color: var(--blue); text-decoration: none; transition: color .15s; }
a:hover { color: var(--blue-d); }
img { max-width: 100%; height: auto; }
hr { border: 0; border-top: 1px solid var(--border); margin: 22px 0; }
small { font-size: 85%; }
.num, .tabular { font-variant-numeric: tabular-nums; }

h1,h2,h3,h4,h5,h6 { margin: 0 0 .5em; font-weight: 650; line-height: 1.3; letter-spacing: -.2px; color: var(--ink); text-wrap: balance; }
h1 { font-size: 27px; } h2 { font-size: 22px; } h3 { font-size: 19px; }
h4 { font-size: 16px; } h5 { font-size: 14.5px; } h6 { font-size: 12.5px; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* ---------- 3. Barra superior (navy) ---------- */
#wrapper { min-height: 100vh; }
.navbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); z-index: 40;
  background: linear-gradient(180deg, var(--navy), var(--navy-2));
  border-bottom: 1px solid rgba(255,255,255,.07);
  display: flex; align-items: center; box-shadow: 0 1px 8px rgba(16,28,46,.12);
}
.navbar .container { display: flex; align-items: center; width: 100%; max-width: none; padding: 0 20px; }
.navbar-header { display: flex; align-items: center; gap: 10px; }
.navbar-brand { margin: 0 !important; padding: 0; display: flex; align-items: center; }
.navbar-brand .logo img { height: 36px; width: auto; display: block; }
.navbar-toggle { display: none; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); border-radius: 8px; padding: 8px 11px; cursor: pointer; color: #fff; font-size: 15px; }
.navbar-collapse { display: flex; align-items: center; flex: 1; }

.navbar-nav { display: flex; align-items: center; gap: 3px; list-style: none; margin: 0; padding: 0; }
.navbar-right { margin-left: auto; }
.navbar-nav > li > a { display: flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 8px; color: var(--navy-ink); font-size: 13.5px; font-weight: 500; }
.navbar-nav > li > a:hover { background: rgba(255,255,255,.09); color: #fff; }
.navbar-nav .btn-primary { color: #fff; box-shadow: 0 2px 8px rgba(37,99,235,.4); }
.navbar-profile-avatar { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; border: 1.5px solid rgba(255,255,255,.25); }
.navbar-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.14); border: 1.5px solid rgba(255,255,255,.28); color: #fff;
}
.navbar-avatar .fa { font-size: 14px; }
.navbar-profile > a:hover .navbar-avatar { background: rgba(255,255,255,.24); }
.dropdown-user-head { display: flex; flex-direction: column; gap: 1px; padding: 8px 12px 6px; }
.dropdown-user-head strong { font-size: 13.5px; }
.dropdown-user-head small { color: var(--muted); font-size: 11.5px; word-break: break-all; }
.nav-xs-item { display: none; }
.navbar-notification-icon { font-size: 16px; }
.navbar-nav .badge { margin-left: 3px; }
.navbar-divider { width: 1px; height: 26px; background: rgba(255,255,255,.14); margin: 0 6px; }
.navbar-nav .fa-caret-down { color: var(--navy-ink); font-size: 12px; }

/* ---------- 4. Menú lateral ---------- */
.sidebar {
  position: fixed; top: var(--nav-h); left: 0; bottom: 0; width: var(--sidebar-w); z-index: 30;
  background: linear-gradient(180deg, var(--nav-bg), var(--nav-bg-2));
  color: var(--nav-ink); overflow-y: auto; padding: 12px 12px 30px;
}
.sidebar-bg, .sidebar-trigger { display: none; }
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 8px; }
.sidebar-menu, .sidebar-menu ul { list-style: none; margin: 0; padding: 0; }
.sidebar-header { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.3px; color: var(--nav-label); padding: 18px 12px 7px; font-weight: 700; }
.sidebar-menu li a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; margin: 1px 0; border-radius: 8px; color: var(--nav-ink); font-size: 13.5px; font-weight: 500; transition: background .15s, color .15s; }
.sidebar-menu li a:hover { background: var(--nav-hover); color: #fff; }
.sidebar-menu li a.active, .sidebar-menu li.active > a { background: var(--nav-active); color: #fff; box-shadow: inset 3px 0 0 var(--blue); }
.sidebar-menu li a .fa { width: 18px; text-align: center; color: #7c8aa3; font-size: 14px; flex: none; }
.sidebar-menu li a:hover .fa, .sidebar-menu li a.active .fa { color: #6ea0ff; }
.sidebar-menu .divider { height: 1px; background: rgba(255,255,255,.07); margin: 10px 6px; }
.sidebar-company-status, .sidebar-menu .label { margin-left: auto; }

/* ---------- 5. Contenido ---------- */
.content-page { margin-left: var(--sidebar-w); padding-top: var(--nav-h); }
.content { padding: 30px 0 50px; }
.content-page .container { max-width: 1240px; margin: 0 auto; padding: 0 30px; }

/* ---------- 6. Rejilla (Bootstrap 3/4) ---------- */
.container { width: 100%; margin: 0 auto; padding: 0 15px; }
.container-fluid { width: 100%; padding: 0 15px; }
.row { display: flex; flex-wrap: wrap; margin: 0 -12px; }
.row > [class*="col-"] { padding: 0 12px; }
[class*="col-"] { width: 100%; }
.col-xs-1{width:8.333%}.col-xs-2{width:16.667%}.col-xs-3{width:25%}.col-xs-4{width:33.333%}
.col-xs-5{width:41.667%}.col-xs-6{width:50%}.col-xs-7{width:58.333%}.col-xs-8{width:66.667%}
.col-xs-9{width:75%}.col-xs-10{width:83.333%}.col-xs-11{width:91.667%}.col-xs-12{width:100%}
@media (min-width:768px){
  .col-sm-1{width:8.333%}.col-sm-2{width:16.667%}.col-sm-3{width:25%}.col-sm-4{width:33.333%}
  .col-sm-5{width:41.667%}.col-sm-6{width:50%}.col-sm-7{width:58.333%}.col-sm-8{width:66.667%}
  .col-sm-9{width:75%}.col-sm-10{width:83.333%}.col-sm-11{width:91.667%}.col-sm-12{width:100%}
}
@media (min-width:992px){
  .col-md-1{width:8.333%}.col-md-2{width:16.667%}.col-md-3{width:25%}.col-md-4{width:33.333%}
  .col-md-5{width:41.667%}.col-md-6{width:50%}.col-md-7{width:58.333%}.col-md-8{width:66.667%}
  .col-md-9{width:75%}.col-md-10{width:83.333%}.col-md-11{width:91.667%}.col-md-12{width:100%}
}
@media (min-width:1200px){
  .col-lg-1{width:8.333%}.col-lg-2{width:16.667%}.col-lg-3{width:25%}.col-lg-4{width:33.333%}
  .col-lg-5{width:41.667%}.col-lg-6{width:50%}.col-lg-8{width:66.667%}.col-lg-9{width:75%}.col-lg-12{width:100%}
}

/* ---------- 7. Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.2;
  padding: 10px 17px; border: 1px solid transparent; border-radius: 9px;
  cursor: pointer; text-align: center; transition: filter .15s, box-shadow .15s, transform .05s;
  white-space: nowrap; -webkit-appearance: none;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 2px 6px rgba(37,99,235,.28); }
.btn-success { background: var(--green); color: #fff; box-shadow: 0 2px 6px rgba(21,163,74,.26); }
.btn-danger  { background: var(--red); color: #fff; box-shadow: 0 2px 6px rgba(220,38,38,.24); }
.btn-warning { background: var(--amber); color: var(--amber-ink); box-shadow: 0 2px 6px rgba(224,161,37,.28); }
.btn-info    { background: var(--cyan); color: #fff; }
.btn-secondary, .btn-default { background: #fff; color: var(--ink); border-color: var(--border-2); box-shadow: var(--shadow-sm); }
.btn-secondary:hover, .btn-default:hover { background: var(--surface-2); filter: none; }
.btn-link { background: transparent; color: var(--blue); border: 0; box-shadow: none; }
.btn-outline-primary { background: #fff; color: var(--blue); border-color: #b9ccfb; box-shadow: none; }
.btn-xs { padding: 4px 10px; font-size: 12px; border-radius: 6px; }
.btn-sm { padding: 7px 13px; font-size: 12.5px; }
.btn-lg { padding: 13px 22px; font-size: 15px; border-radius: 10px; }
.btn-block { display: flex; width: 100%; }
.btn[disabled], .btn:disabled { opacity: .55; cursor: not-allowed; filter: none; }

/* ---------- 8. Formularios ---------- */
.form-group { margin-bottom: 18px; }
label, .control-label { display: inline-block; font-size: 12.5px; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.form-control {
  display: block; width: 100%; font-family: inherit; font-size: 14px; color: var(--ink);
  padding: 11px 13px; background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: 9px; transition: border-color .15s, box-shadow .15s, background .15s;
}
.form-control:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-l); background: #fff; }
.form-control::placeholder { color: var(--faint); }
textarea.form-control { min-height: 96px; resize: vertical; }
select.form-control { cursor: pointer; }
.input-group { display: flex; }
.input-group .form-control { border-radius: 0; }
.input-group .form-control:first-child { border-radius: 9px 0 0 9px; }
.input-group .form-control:last-child { border-radius: 0 9px 9px 0; }
.input-group-addon { display: flex; align-items: center; padding: 0 13px; background: var(--surface-3); border: 1px solid var(--border-2); color: var(--muted); font-size: 13px; }
.input-group-addon:first-child { border-radius: 9px 0 0 9px; border-right: 0; }
.input-group-addon:last-child { border-radius: 0 9px 9px 0; border-left: 0; }

/* ---------- 9. Tarjetas: portlet (BS3) + card (BS4/5) ---------- */
.portlet, .panel, .card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); margin-bottom: 24px;
}
.portlet-boxed { overflow: visible; }
.portlet-header, .panel-heading, .card-header {
  padding: 17px 24px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-weight: 650; font-size: 15px; background: transparent;
}
.portlet-header h1,.portlet-header h2,.portlet-header h3,.portlet-header h4,
.panel-heading h1,.panel-heading h2,.panel-heading h3,.panel-heading h4,
.card-header h1,.card-header h2,.card-header h3,.card-header h4 { margin: 0; font-size: 15px; }
.portlet-body, .panel-body, .card-body { padding: 24px; }
.card-title { font-size: 17px; font-weight: 650; margin: 0 0 4px; }
.card-subtitle { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; }
.card-footer { padding: 16px 24px; border-top: 1px solid var(--border); background: var(--surface-2); }
/* acentos de color en tarjetas KPI */
.border-primary { border-color: transparent !important; box-shadow: inset 4px 0 0 var(--blue), var(--shadow-sm); }
.border-success { border-color: transparent !important; box-shadow: inset 4px 0 0 var(--green), var(--shadow-sm); }
.border-danger  { border-color: transparent !important; box-shadow: inset 4px 0 0 var(--red), var(--shadow-sm); }
.border-warning { border-color: transparent !important; box-shadow: inset 4px 0 0 var(--amber), var(--shadow-sm); }
.border-info    { border-color: transparent !important; box-shadow: inset 4px 0 0 var(--cyan), var(--shadow-sm); }
.border-primary .card-title,.border-success .card-title,.border-danger .card-title { font-size: 30px; font-weight: 750; letter-spacing: -1px; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow { box-shadow: var(--shadow) !important; }

/* ---------- 10. list-group (BS4/5) ---------- */
.list-group { list-style: none; margin: 0 0 16px; padding: 0; border-radius: var(--radius-sm); overflow: hidden; }
.list-group-item { padding: 13px 16px; border: 1px solid var(--border); border-bottom-width: 0; background: var(--surface); font-size: 13.5px; }
.list-group-item:first-child { border-top-left-radius: var(--radius-sm); border-top-right-radius: var(--radius-sm); }
.list-group-item:last-child { border-bottom-width: 1px; border-bottom-left-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); }
.list-group-item:hover { background: var(--surface-2); }
.list-group-flush { border-radius: 0; }
.list-group-flush .list-group-item { border-left: 0; border-right: 0; }
.list-group-flush .list-group-item:first-child { border-top: 0; }

/* ---------- 11. Tablas ---------- */
.table-responsive { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { text-align: left; padding: 13px 16px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); font-weight: 700; background: var(--surface-2); white-space: nowrap; border-bottom: 1px solid var(--border); }
.table td { padding: 14px 16px; border-top: 1px solid var(--border); vertical-align: middle; }
.table thead tr:first-child th { border-top: 0; }
.table-striped tbody tr:nth-child(odd) td { background: var(--surface-2); }
.table-hover tbody tr { transition: background .12s; }
.table-hover tbody tr:hover td, .table-hover tbody tr:hover th { background: var(--blue-l); }
/* tabla dentro de un contenedor con scroll: sin doble borde */
.table-responsive > .table { margin: 0; }
.table-responsive.card, .card.table-responsive { box-shadow: var(--shadow-sm); }
.m-0 { margin: 0 !important; }

/* ---------- 12. Labels, badges, alerts ---------- */
.label, .badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 100px; line-height: 1.5; white-space: nowrap; }
.label-success,.badge-success { color: var(--green-d); background: var(--green-l); }
.label-danger, .badge-danger { color: var(--red-d); background: var(--red-l); }
.label-warning,.badge-warning { color: var(--amber-d); background: var(--amber-l); }
.label-info,   .badge-info { color: var(--blue-d); background: var(--blue-l); }
.label-default,.badge-secondary { color: var(--muted); background: var(--surface-3); }
.badge-primary { color: #fff; background: var(--blue); }

.alert { padding: 14px 16px; border-radius: 10px; border: 1px solid transparent; margin-bottom: 16px; font-size: 13.5px; }
.alert-success { background: var(--green-l); border-color: #bfe6cc; color: var(--green-d); }
.alert-danger  { background: var(--red-l); border-color: #f4c2c2; color: var(--red-d); }
.alert-warning { background: var(--amber-l); border-color: #ecd9a8; color: var(--amber-d); }
.alert-info    { background: var(--blue-l); border-color: #cdddfd; color: var(--blue-d); }

/* ---------- 13. Dropdowns (navbar) ---------- */
.dropdown { position: relative; }
.dropdown-menu {
  position: absolute; top: calc(100% + 10px); right: 0; min-width: 260px; z-index: 60;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-lg); padding: 6px; list-style: none; margin: 0; color: var(--ink);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .15s, transform .15s, visibility .15s;
}
.dropdown.open > .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-menu > li > a, .dropdown-menu a.notification { display: block; padding: 10px 12px; border-radius: 8px; color: var(--ink); font-size: 13.5px; }
.dropdown-menu > li > a:hover, .dropdown-menu a.notification:hover { background: var(--surface-2); }
.dropdown-menu > li > a .fa { color: var(--muted); }
.dropdown-menu .divider { height: 1px; background: var(--border); margin: 6px 4px; }
.dropdown-header { padding: 9px 12px; font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--faint); font-weight: 700; }
.notification-title { display: block; font-weight: 600; font-size: 13px; }
.notification-description { display: block; color: var(--muted); font-size: 12px; }
.notification-time { display: block; color: var(--faint); font-size: 11px; margin-top: 2px; }
.notification-link { display: block; text-align: center; padding: 10px; font-size: 12.5px; font-weight: 600; color: var(--blue); border-top: 1px solid var(--border); margin: 6px -6px -6px; }
.notification-empty-title { font-size: 14px; margin: 8px 12px 4px; }
.notification-empty-text { color: var(--muted); font-size: 12.5px; padding: 0 12px 8px; }

/* ---------- 14. account-status-cta (avisos del panel) ---------- */
.account-status-cta {
  display: block; text-decoration: none; border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; background: var(--surface);
  transition: box-shadow .15s, transform .1s;
}
.account-status-cta:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.account-status-cta__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.account-status-cta__left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.account-status-cta__icon { width: 44px; height: 44px; border-radius: 11px; flex: none; display: grid; place-items: center; font-size: 19px; }
.account-status-cta__title { font-weight: 700; font-size: 14.5px; letter-spacing: .2px; }
.account-status-cta__meta { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.account-status-cta__badge { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; padding: 8px 14px; border-radius: 100px; white-space: nowrap; }
/* variantes */
.account-status-cta--danger { background: linear-gradient(180deg,#fff,#fdf3f3); border-color: #f6d4d4; }
.account-status-cta--danger .account-status-cta__icon { background: var(--red-l); color: var(--red); }
.account-status-cta--danger .account-status-cta__title { color: var(--red-d); }
.account-status-cta--danger .account-status-cta__badge { background: var(--red); color: #fff; }
.account-status-cta--ok { background: linear-gradient(180deg,#fff,#f2fbf5); border-color: #c7ead4; }
.account-status-cta--ok .account-status-cta__icon { background: var(--green-l); color: var(--green); }
.account-status-cta--ok .account-status-cta__title { color: var(--green-d); }
.account-status-cta--ok .account-status-cta__badge { background: var(--green); color: #fff; }
.account-status-cta--empty { background: linear-gradient(180deg,#fff,#f1f6ff); border-color: #cfe0fb; }
.account-status-cta--empty .account-status-cta__icon { background: var(--blue-l); color: var(--blue); }
.account-status-cta--empty .account-status-cta__title { color: var(--blue-d); }
.account-status-cta--empty .account-status-cta__badge { background: var(--blue); color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .account-status-cta--pulse .account-status-cta__icon { animation: ap-pulse 2s ease-in-out infinite; }
  @keyframes ap-pulse { 0%,100%{ box-shadow: 0 0 0 0 rgba(220,38,38,.35);} 50%{ box-shadow: 0 0 0 8px rgba(220,38,38,0);} }
}
.compliance-notice { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; font-size: 12.5px; color: var(--muted); }
.compliance-notice p { margin-bottom: 10px; }
.compliance-notice strong { color: var(--ink); }

/* ---------- 15. Utilidades: display / flex (BS4/5) ---------- */
.d-none{display:none!important}.d-block{display:block!important}.d-inline{display:inline!important}
.d-inline-block{display:inline-block!important}.d-flex{display:flex!important}.d-inline-flex{display:inline-flex!important}
.flex-row{flex-direction:row!important}.flex-column{flex-direction:column!important}
.flex-wrap{flex-wrap:wrap!important}.flex-fill{flex:1 1 auto!important}.flex-grow-1{flex-grow:1!important}
.justify-content-start{justify-content:flex-start!important}.justify-content-end{justify-content:flex-end!important}
.justify-content-center{justify-content:center!important}.justify-content-between{justify-content:space-between!important}
.align-items-start{align-items:flex-start!important}.align-items-center{align-items:center!important}
.align-items-end{align-items:flex-end!important}.align-items-stretch{align-items:stretch!important}
.h-100{height:100%!important}.w-100{width:100%!important}.text-nowrap{white-space:nowrap!important}

/* Utilidades: texto */
.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-justify{text-align:justify}
.text-muted{color:var(--muted)}.text-secondary{color:var(--muted)}
.text-primary{color:var(--blue)}.text-success{color:var(--green)}.text-danger{color:var(--red)}
.text-warning{color:var(--amber-d)}.text-info{color:var(--cyan)}.text-white{color:#fff}
.pull-left,.float-left{float:left}.pull-right,.float-right{float:right}
.clearfix::after{content:"";display:table;clear:both}
.semibold,.text-semibold,.text-semi-bold{font-weight:600}.text-bold,.font-weight-bold{font-weight:700}
.size-12{font-size:12px}.size-14{font-size:14px}.size-16{font-size:16px}.size-18{font-size:18px}.size-20{font-size:20px}.size-24{font-size:24px}

/* Utilidades: espaciado (escala BS4/5: 0..5) */
.m-0{margin:0!important}.m-1{margin:.25rem!important}.m-2{margin:.5rem!important}.m-3{margin:1rem!important}.m-4{margin:1.5rem!important}.m-5{margin:3rem!important}.m-auto{margin:auto!important}
.mt-0{margin-top:0!important}.mt-1{margin-top:.25rem!important}.mt-2{margin-top:.5rem!important}.mt-3{margin-top:1rem!important}.mt-4{margin-top:1.5rem!important}.mt-5{margin-top:3rem!important}.mt-auto{margin-top:auto!important}
.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:.25rem!important}.mb-2{margin-bottom:.5rem!important}.mb-3{margin-bottom:1rem!important}.mb-4{margin-bottom:1.5rem!important}.mb-5{margin-bottom:3rem!important}
.ml-0{margin-left:0!important}.ml-1{margin-left:.25rem!important}.ml-2{margin-left:.5rem!important}.ml-3{margin-left:1rem!important}.ml-auto{margin-left:auto!important}
.mr-0{margin-right:0!important}.mr-1{margin-right:.25rem!important}.mr-2{margin-right:.5rem!important}.mr-3{margin-right:1rem!important}.mr-auto{margin-right:auto!important}
.p-0{padding:0!important}.p-1{padding:.25rem!important}.p-2{padding:.5rem!important}.p-3{padding:1rem!important}.p-4{padding:1.5rem!important}.p-5{padding:3rem!important}
.pt-3{padding-top:1rem!important}.pb-3{padding-bottom:1rem!important}.px-3{padding-left:1rem!important;padding-right:1rem!important}.py-3{padding-top:1rem!important;padding-bottom:1rem!important}

/* Responsivo visible/hidden (BS3) */
@media (max-width:767px){ .hidden-xs{display:none!important} }
@media (min-width:768px) and (max-width:991px){ .hidden-sm{display:none!important} }
@media (min-width:992px) and (max-width:1199px){ .hidden-md{display:none!important} }
@media (min-width:1200px){ .hidden-lg{display:none!important} }
.visible-xs,.visible-xs-inline{display:none}
@media (max-width:767px){ .visible-xs{display:block} .visible-xs-inline{display:inline} }
@media (max-width:767px){
  .navbar-nav > li.navbar-notification { display: none; }
  .nav-xs-item { display: block; }
  .nav-xs-item.divider { display: block; }
  .navbar-profile .dropdown-menu { position: fixed; top: calc(var(--nav-h) + 6px); right: 10px; left: 10px; min-width: 0; }
}

/* ---------- 16. Listas de iconos (MVP compat) ---------- */
.icons-list { list-style: none; padding: 0; margin: 0; }
.icons-list li { display: flex; align-items: center; gap: 10px; padding: 7px 0; color: var(--muted); font-size: 13.5px; }
.icons-list li .fa { color: var(--blue); width: 18px; text-align: center; flex: none; }

/* ---------- 17. Responsivo del shell ---------- */
@media (max-width: 991px) {
  .sidebar { transform: translateX(-100%); transition: transform .25s ease; box-shadow: 0 0 40px rgba(0,0,0,.35); }
  body.sidebar-open .sidebar { transform: translateX(0); }
  body.sidebar-open::after { content:""; position: fixed; inset: var(--nav-h) 0 0 0; background: rgba(10,18,32,.45); z-index: 25; }
  .content-page { margin-left: 0; }
  .navbar-toggle { display: inline-flex; margin-right: 10px; }
  .navbar-divider { display: none; }
  .navbar .container { padding: 0 12px; }
  .navbar-nav { gap: 2px; }
  .content-page .container { padding: 0 16px; }
}
@media (max-width: 991px) and (min-width: 1px) {
  .navbar-collapse { gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* =============================================================
   18. Componentes del tema (reimplementados en estilo moderno)
   ============================================================= */

/* --- Botones robustos: los variantes de color se ven bien AUNQUE
       falte la clase base .btn (varias páginas usan "btn-success btn-block") --- */
.btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-default, .btn-outline-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.2;
  padding: 10px 17px; border: 1px solid transparent; border-radius: 9px;
  cursor: pointer; text-align: center; text-decoration: none; transition: filter .15s;
}

/* --- Pestañas (tabs) --- */
.nav { list-style: none; }
.nav-tabs { display: flex; flex-wrap: wrap; gap: 2px; list-style: none; margin: 0 0 22px; padding: 0; border-bottom: 2px solid var(--border); }
.nav-tabs > li > a { display: block; padding: 10px 18px; font-size: 13.5px; font-weight: 600; color: var(--muted); border-radius: 8px 8px 0 0; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.nav-tabs > li > a:hover { color: var(--ink); background: var(--surface-2); }
.nav-tabs > li.active > a, .nav-tabs > li > a.active { color: var(--blue); border-bottom-color: var(--blue); }
.nav-pills { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 20px; }
.nav-pills > li > a { display: block; padding: 8px 16px; border-radius: 100px; font-size: 13px; font-weight: 600; color: var(--muted); }
.nav-pills > li.active > a { background: var(--blue); color: #fff; }
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* --- Media object --- */
.media { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.media-left, .media-right { flex: none; }
.media-body { flex: 1; min-width: 0; }
.media-heading { margin: 0 0 4px; font-size: 15px; font-weight: 650; }
.media-object { border-radius: 10px; }

/* --- Thumbnails / galería --- */
.thumbnail { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 8px; box-shadow: var(--shadow-sm); margin-bottom: 20px; }
.thumbnail img { border-radius: 8px; width: 100%; display: block; }
.thumbnail .caption { padding: 12px 8px 6px; }
.thumbnail-view { position: relative; overflow: hidden; border-radius: 12px; }
.thumbnail-view img { width: 100%; display: block; transition: transform .35s; }
.thumbnail-view:hover img { transform: scale(1.05); }
.thumbnail-view-hover { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(16,28,46,.5); color: #fff; opacity: 0; transition: opacity .2s; font-size: 20px; text-decoration: none; }
.thumbnail-view:hover .thumbnail-view-hover { opacity: 1; }
.thumbnail-footer { padding: 12px; border-top: 1px solid var(--border); }

/* --- Feature blocks --- */
.feature-sm { text-align: center; padding: 20px 18px; }
.feature-sm-icon { font-size: 34px; color: var(--blue); margin-bottom: 12px; display: inline-block; }
.feature-sm-label { font-size: 16px; font-weight: 650; margin: 0 0 8px; }
.feature-sm-content { color: var(--muted); font-size: 13.5px; }

/* --- icon-stat (widgets de estadística) --- */
.icon-stat { display: block; padding: 18px 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-sm); margin-bottom: 16px; }
.icon-stat .row { align-items: center; margin: 0 -8px; }
.icon-stat .row > [class*="col-"] { padding: 0 8px; }
.icon-stat-label { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
.icon-stat-value { display: block; font-size: 21px; font-weight: 700; letter-spacing: -.3px; margin-top: 3px; }
.icon-stat-visual { width: 46px; height: 46px; border-radius: 12px; display: inline-grid; place-items: center; font-size: 20px; color: #fff; background: var(--blue); }
.icon-stat-visual.bg-default, .icon-stat-visual.bg-secondary { background: var(--surface-3); color: var(--muted); }
.icon-stat-visual.bg-primary  { background: var(--blue); color: #fff; }
.icon-stat-visual.bg-success  { background: var(--green); color: #fff; }
.icon-stat-visual.bg-danger   { background: var(--red); color: #fff; }
.icon-stat-visual.bg-warning  { background: var(--amber); color: #fff; }
.icon-stat-footer { font-size: 11.5px; color: var(--faint); margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 6px; }

/* --- Social icons --- */
.social-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); margin: 2px; transition: background .15s, color .15s; }
.social-icon:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.social-icon-sm { width: 32px; height: 32px; font-size: 13px; }
.social-icon-transparent { background: transparent; border-color: transparent; }

/* --- Avatares, títulos, hero, headings --- */
.user-avatar { border-radius: 50%; object-fit: cover; }
.portlet-title { font-size: 18px; font-weight: 700; margin: 0 0 6px; }
.heading-block { margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.heading-block h1, .heading-block h2, .heading-block h3 { margin: 0; }
.page-hero { padding: 6px 0 22px; }
.page-hero h1 { font-size: 27px; }

/* --- Formularios: campos requeridos --- */
.control-label.required::after, label.required::after { content: " *"; color: var(--red); font-weight: 700; }
.required-badge { display: inline-block; font-size: 10px; font-weight: 700; color: var(--red-d); background: var(--red-l); padding: 1px 7px; border-radius: 100px; margin-left: 6px; text-transform: uppercase; letter-spacing: .4px; }

/* --- Iconos en línea y utilidades extra --- */
.icon-li { margin-left: 6px; color: var(--blue); }
.small-muted { font-size: 12.5px; color: var(--muted); }
.block { display: block; }
.nomargin { margin: 0 !important; }
.margin-bottom-60 { margin-bottom: 60px; }
.service-section { margin-top: 8px; }

/* --- Estado vacío (reutilizable en páginas "aún no tienes X") --- */
.empty-state { text-align: center; padding: 44px 24px; }
.empty-state-icon { width: 74px; height: 74px; border-radius: 20px; background: var(--blue-l); color: var(--blue); display: grid; place-items: center; font-size: 30px; margin: 0 auto 18px; }
.empty-state h2, .empty-state h3 { font-size: 19px; margin: 0 0 8px; }
.empty-state p { max-width: 500px; margin: 0 auto 22px; color: var(--muted); font-size: 14px; }
.empty-state--warning .empty-state-icon { background: var(--amber-l); color: var(--amber-d); }

/* =============================================================
   19. Página de configuración: layout con pestañas laterales
   ============================================================= */
.layout { display: flex; flex-wrap: wrap; margin: 0 -12px; }
.layout > [class*="col-"] { padding: 0 12px; }
.nav-layout-sidebar-skip { display: none; }
.nav-layout-sidebar, .nav-stacked { display: flex; flex-direction: column; gap: 4px; list-style: none; padding: 0; margin: 0; }
.nav-layout-sidebar > li > a, .nav-stacked > li > a { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 9px; color: var(--muted); font-weight: 600; font-size: 13.5px; }
.nav-layout-sidebar > li > a:hover, .nav-stacked > li > a:hover { background: var(--surface-2); color: var(--ink); }
.nav-layout-sidebar > li.active > a, .nav-stacked > li.active > a { background: var(--blue); color: #fff; }
.nav-layout-sidebar > li > a .fa, .nav-stacked > li > a .fa { width: 16px; text-align: center; }
.nav-layout-sidebar > li.active > a .fa, .nav-stacked > li.active > a .fa { color: #fff; }
.layout-sidebar { margin-bottom: 16px; }

/* --- Formularios horizontales --- */
.form-horizontal .form-group { display: flex; flex-wrap: wrap; align-items: center; margin: 0 -12px 18px; }
.form-horizontal .form-group > [class*="col-"] { padding: 0 12px; }
.form-horizontal .control-label { margin-bottom: 0; }
@media (min-width: 992px) { .form-horizontal .control-label { text-align: right; } }
@media (max-width: 991px) { .form-horizontal .form-group { display: block; } .form-horizontal .control-label { margin-bottom: 7px; } }
.col-md-push-3 { margin-left: 0; }
@media (min-width: 992px) { .col-md-push-3 { margin-left: 25%; } }

/* --- Checkboxes / radios --- */
.checkbox, .radio { margin: 8px 0; }
.checkbox label, .radio label { display: flex; align-items: center; gap: 9px; font-weight: 500; color: var(--ink); cursor: pointer; margin: 0; }
.checkbox input, .radio input { width: 16px; height: 16px; accent-color: var(--blue); }

/* --- Encabezado de página + breadcrumb --- */
.page-header { margin: 0 0 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.page-title { margin: 0 0 8px; }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; padding: 0; margin: 0; font-size: 12.5px; color: var(--faint); }
.breadcrumb > li + li::before { content: "/"; margin-right: 8px; color: var(--faint); }
.breadcrumb .active { color: var(--muted); }

/* --- list-group como lista de estadísticas --- */
.list-group-item { display: flow-root; }
.list-group-item-heading { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.5px; }
.list-group-item-text { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.list-group-item > .pull-right { margin: 0 0 0 12px; font-size: 18px; }
.list-group-item > h3.pull-right { line-height: 1; }

/* --- Alineación de iconos junto a texto (evita descuadres) --- */
.icons-list .icon-li { margin-left: 0; }
h1 .icon-li, h2 .icon-li, h3 .icon-li, h4 .icon-li { font-size: .8em; vertical-align: baseline; }

/* =============================================================
   20. Validación de formularios + toasts (reemplaza Parsley/toastr)
   ============================================================= */
.form-control.ap-invalid, .ap-invalid { border-color: var(--red) !important; box-shadow: 0 0 0 3px var(--red-l) !important; }
.ap-error-msg { color: var(--red-d); font-size: 12px; font-weight: 600; margin-top: 6px; display: flex; align-items: center; gap: 5px; }
.ap-error-msg::before { content: "\26A0"; font-size: 11px; }

.ap-toast-wrap { position: fixed; top: calc(var(--nav-h) + 14px); right: 20px; z-index: 90; display: flex; flex-direction: column; gap: 10px; max-width: 340px; }
.ap-toast { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--blue); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 13px 16px; font-size: 13.5px; color: var(--ink); display: flex; align-items: flex-start; gap: 10px; transition: opacity .25s; }
.ap-toast__icon { flex: none; font-weight: 700; }
.ap-toast--error { border-left-color: var(--red); } .ap-toast--error .ap-toast__icon { color: var(--red); }
.ap-toast--success { border-left-color: var(--green); } .ap-toast--success .ap-toast__icon { color: var(--green); }
.ap-toast--warning { border-left-color: var(--amber); } .ap-toast--warning .ap-toast__icon { color: var(--amber-d); }
.ap-toast--info .ap-toast__icon { color: var(--blue); }
@media (prefers-reduced-motion: no-preference) { .ap-toast { animation: ap-toast-in .2s ease; } @keyframes ap-toast-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } } }

/* =============================================================
   21. fieldset reset + Wizard multi-paso (formularios)
   ============================================================= */
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.margin-top-30 { margin-top: 30px; }
.input-group-append { display: flex; }
.input-group-append .btn { border-radius: 0 9px 9px 0; }
.input-group .form-control:first-child { border-radius: 9px 0 0 9px; }

.wizard-progress { display: flex; align-items: flex-start; margin: 4px 0 30px; padding: 0; list-style: none; }
.wizard-progress li { flex: 1; text-align: center; position: relative; color: var(--faint); font-size: 12px; font-weight: 600; }
.wizard-progress li::before { content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 2px; background: var(--border); z-index: 0; }
.wizard-progress li:first-child::before { display: none; }
.wizard-progress .ws-num { position: relative; z-index: 1; width: 32px; height: 32px; margin: 0 auto 8px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border); display: grid; place-items: center; font-weight: 700; color: var(--faint); transition: all .2s; }
.wizard-progress li.active { color: var(--ink); }
.wizard-progress li.active .ws-num { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 0 0 4px var(--blue-l); }
.wizard-progress li.done .ws-num { background: var(--green); border-color: var(--green); color: #fff; }
.wizard-progress li.done::before, .wizard-progress li.active::before { background: var(--blue); }

.wizard-step { display: none; }
.wizard-step.active { display: block; }
@media (prefers-reduced-motion: no-preference) { .wizard-step.active { animation: ap-fade-in .25s ease; } @keyframes ap-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } }
.wizard-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--border); }
.wizard-step > h4.step-heading { font-size: 17px; margin: 0 0 4px; }
.wizard-step > .step-hint { color: var(--muted); font-size: 13.5px; margin: 0 0 20px; }

.partner { border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px 4px; margin-bottom: 14px; background: var(--surface-2); }
.partner > h5 { margin: 0 0 14px; display: flex; align-items: center; justify-content: space-between; }

.wizard-review .rv-group { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 18px; margin-bottom: 14px; }
.wizard-review .rv-group > h5 { margin: 14px 0 8px; color: var(--blue); font-size: 14px; }
.wizard-review .rv-row { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; font-size: 13.5px; border-bottom: 1px dashed var(--border); }
.wizard-review .rv-row:last-child { border-bottom: 0; }
.wizard-review .rv-label { color: var(--muted); flex: none; }
.wizard-review .rv-val { font-weight: 600; text-align: right; word-break: break-word; }

.doc-upload { margin-bottom: 16px; padding: 16px 18px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.doc-upload > label { font-weight: 650; display: block; margin-bottom: 8px; }
.doc-upload .doc-input { margin-bottom: 4px; }
.doc-upload .doc-input:disabled { opacity: .5; cursor: not-allowed; }
input[type=file].form-control { padding: 8px 12px; height: auto; line-height: 1.5; cursor: pointer; }
input[type=file].form-control::file-selector-button { font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 12px; margin-right: 12px; border: 1px solid var(--border-2); border-radius: 7px; background: #fff; color: var(--ink); cursor: pointer; }

/* =============================================================
   22. Módulo "Mi Negocio" (contabilidad / CRM)
   ============================================================= */
.acc-head { margin-bottom: 22px; }
.acc-head-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.acc-llc-picker { display: flex; align-items: center; }
.acc-tabs { margin-bottom: 0; }
.acc-tabs > li > a { background: var(--surface); border: 1px solid var(--border); }
.acc-tabs > li.active > a { background: var(--blue); border-color: var(--blue); }

.grid-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kpi { padding: 16px 18px 15px; display: flex; flex-direction: column; gap: 2px; }
.kpi .k-label { font-size: 11px; text-transform: uppercase; letter-spacing: .9px; color: var(--muted); font-weight: 650; }
.kpi .k-val { font-size: 21px; font-weight: 750; letter-spacing: -.4px; margin-top: 4px; }
.kpi .k-foot { font-size: 12px; color: var(--faint); margin-top: 2px; }
.k-accent { height: 3px; border-radius: 12px 12px 0 0; }
.grid-kpi .card { margin-bottom: 0; }

.cols { display: grid; grid-template-columns: 1.65fr 1fr; gap: 20px; align-items: start; margin-bottom: 22px; }
.cols > *, .grid-kpi > *, .llc-grid > * { min-width: 0; } /* evita que textos nowrap inflen las tarjetas (overflow móvil) */
.panel-head { padding: 15px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.panel-head h3 { margin: 0; font-size: 14.5px; font-weight: 650; }
.panel-head .link { color: var(--blue); font-size: 12.5px; font-weight: 600; }
.rv-row-mini { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 13px; border-bottom: 1px dashed var(--border); }
.rv-row-mini:last-of-type { border-bottom: 0; }
.rv-row-mini span { color: var(--muted); }

@media (max-width: 991px) {
  .grid-kpi { grid-template-columns: repeat(2, 1fr); }
  .cols { grid-template-columns: 1fr; }
}

/* =============================================================
   23. Dashboard (index): tarjetas por empresa, feed y upsell
   ============================================================= */
.llc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.llc-grid .card { margin-bottom: 0; display: flex; flex-direction: column; }
.llc-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--border); }
.health-bar { height: 8px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.health-bar > div { height: 100%; border-radius: 99px; transition: width .3s; }
.llc-dates { margin: 12px 0 4px; }
.llc-date-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--border); font-size: 12.5px; }
.llc-date-row:last-child { border-bottom: 0; }
.llc-fin { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 6px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; }
.llc-fin > div { display: flex; flex-direction: column; gap: 1px; font-size: 13px; }
.llc-fin .small-muted { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; }
.llc-card-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 18px 16px; margin-top: auto; }

.feed-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--border); }
.feed-row:last-child { border-bottom: 0; }
.feed-row > .fa { flex: none; font-size: 15px; }
.feed-row > div { flex: 1; }

.upsell-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 14px 16px 16px; }
.upsell-tile { display: flex; flex-direction: column; gap: 2px; padding: 13px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--ink); transition: border-color .15s, background .15s, transform .1s; }
.upsell-tile:hover { background: #fff; border-color: var(--blue); color: var(--ink); transform: translateY(-1px); }
.upsell-tile .fa { color: var(--blue); font-size: 17px; margin-bottom: 4px; }
.upsell-tile span { font-weight: 650; font-size: 13px; }
.upsell-tile small { color: var(--muted); font-size: 11.5px; }

@media (max-width: 991px) {
  .llc-grid { grid-template-columns: 1fr; }
  .upsell-grid { grid-template-columns: 1fr 1fr; }
}

/* =============================================================
   24. Páginas de autenticación (login / signup) — compartido
   ============================================================= */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }
.auth-brand {
  background: linear-gradient(160deg, var(--navy), var(--nav-bg-2));
  color: #fff; padding: 48px 52px; display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.auth-brand::after { content: ""; position: absolute; right: -120px; bottom: -120px; width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(37,99,235,.35), transparent 70%); }
.auth-brand__logo img { height: 40px; }
.auth-brand__title { color: #fff; font-size: 30px; font-weight: 750; line-height: 1.2; letter-spacing: -.6px; margin: 0 0 12px; max-width: 15ch; }
.auth-brand__sub { color: var(--navy-ink); font-size: 15px; max-width: 42ch; line-height: 1.6; }
.auth-points { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 14px; position: relative; z-index: 1; }
.auth-points li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: #e6ecf6; }
.auth-points .fa { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,255,255,.1); color: #7fb0ff; flex: none; }
.auth-brand__foot { color: #7c8aa3; font-size: 12.5px; position: relative; z-index: 1; }

.auth-form-wrap { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.auth-card { width: 100%; max-width: 400px; }
.auth-card--wide { max-width: 460px; }
.auth-card h1 { font-size: 23px; margin: 0 0 4px; }
.auth-card .lead { color: var(--muted); font-size: 14px; margin: 0 0 26px; }
.auth-card label { font-size: 12.5px; font-weight: 600; margin-bottom: 6px; display: block; }
.auth-input { position: relative; margin-bottom: 16px; }
.auth-input .fa { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--faint); font-size: 14px; }
.auth-input .form-control { padding-left: 38px; }
.auth-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; font-size: 13px; }
.auth-row label { font-weight: 500; margin: 0; display: flex; align-items: center; gap: 7px; color: var(--muted); }
.auth-sep { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: 12px; margin: 22px 0; }
.auth-sep::before, .auth-sep::after { content: ""; height: 1px; background: var(--border); flex: 1; }
.auth-google { display: flex; align-items: center; justify-content: center; gap: 10px; background: #fff; color: var(--ink); border: 1.5px solid var(--border); font-weight: 700; }
.auth-google:hover { background: #f8fafc; border-color: var(--blue); color: var(--ink); }
.auth-google svg { flex: 0 0 auto; }
.auth-foot { text-align: center; color: var(--muted); font-size: 13px; margin-top: 22px; }
.auth-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 860px) { .auth { grid-template-columns: 1fr; } .auth-brand { display: none; } .auth-2col { grid-template-columns: 1fr; } }

/* =============================================================
   25. Soporte (tickets)
   ============================================================= */
.ticket-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 20px; border-bottom: 1px solid var(--border); color: var(--ink); transition: background .12s; }
.ticket-row:last-child { border-bottom: 0; }
.ticket-row:hover { background: var(--surface-2); color: var(--ink); }
.ticket-subj { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ticket-thread { display: flex; flex-direction: column; gap: 12px; }
.tmsg { border: 1px solid var(--border); border-radius: 12px; padding: 12px 15px; max-width: 82%; }
.tmsg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.tmsg-who { font-weight: 650; font-size: 12.5px; }
.tmsg-body { font-size: 14px; color: var(--ink); line-height: 1.55; }
.tmsg--client { background: var(--surface); align-self: flex-end; border-color: var(--border-2); }
.tmsg--agent  { background: var(--blue-l); align-self: flex-start; border-color: #cdddfd; }
.tmsg--agent .tmsg-who { color: var(--blue-d); }
.tmsg--system { background: var(--surface-2); align-self: center; max-width: 100%; text-align: center; }
.tmsg--system .tmsg-body { font-size: 12.5px; color: var(--muted); }

.support-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); margin-bottom: 10px; }
.support-strip:hover { background: var(--surface-2); }

/* --- Utilidades y componentes menores --- */
.img-responsive { max-width: 100%; height: auto; display: block; }
.pointer { cursor: pointer; }
.nopadding { padding: 0 !important; }
.size-30 { font-size: 30px; }
.minor-hint { font-size: 12px; color: var(--faint); }
.thumbnail-view-hover-lg { font-size: 26px; }
.btn-group { display: inline-flex; }
.btn-group > .btn, .btn-group > [class*="btn-"] { border-radius: 0; }
.btn-group > *:first-child { border-radius: 9px 0 0 9px; }
.btn-group > *:last-child { border-radius: 0 9px 9px 0; }
.close { background: none; border: 0; font-size: 22px; line-height: 1; color: var(--faint); cursor: pointer; opacity: .7; padding: 0 4px; }
.close:hover { opacity: 1; color: var(--ink); }
.step-title { font-size: 15px; font-weight: 650; }
/* Iconos sociales por marca (mapeados a FontAwesome) */
.icon-facebook::before { font-family: FontAwesome; content: "\f09a"; }
.icon-twitter::before  { font-family: FontAwesome; content: "\f099"; }
.icon-linkedin::before { font-family: FontAwesome; content: "\f0e1"; }


/* ============================================================
   26. MODAL LIGERO REUTILIZABLE (.ap-modal)
   ============================================================ */
.ap-modal{
  position:fixed; inset:0; z-index:1080;
  display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(15,23,42,.55);
  animation:apFade .12s ease-out;
}
@keyframes apFade{from{opacity:0}to{opacity:1}}
.ap-modal__box{
  background:#fff; width:100%; max-width:520px; border-radius:14px;
  box-shadow:0 24px 60px -12px rgba(15,23,42,.4); overflow:hidden;
  animation:apPop .14s ease-out;
}
@keyframes apPop{from{transform:translateY(8px);opacity:.6}to{transform:none;opacity:1}}
.ap-modal__head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 20px; border-bottom:1px solid var(--line,#e5e7eb);
}
.ap-modal__close{
  background:none; border:none; font-size:24px; line-height:1; cursor:pointer;
  color:var(--muted); padding:0 4px;
}
.ap-modal__close:hover{ color:var(--red,#dc2626); }
.ap-modal__foot{
  display:flex; align-items:center; justify-content:flex-end; gap:10px;
  padding:14px 20px; border-top:1px solid var(--line,#e5e7eb); background:var(--bg-soft,#f8fafc);
}
@media (prefers-reduced-motion:reduce){ .ap-modal,.ap-modal__box{animation:none} }

/* ============================================================
   27. ADJUNTOS DE TICKETS (selector + chips en el hilo)
   ============================================================ */
.tattach-drop{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:18px 16px; border:2px dashed var(--line,#dbe2ec); border-radius:12px;
  background:var(--bg-soft,#f8fafc); cursor:pointer; text-align:center;
  transition:border-color .15s, background .15s; font-weight:400;
}
.tattach-drop:hover, .tattach-drop.is-drag{ border-color:var(--blue,#2563eb); background:#eef4ff; }
.tattach-drop i{ font-size:22px; color:var(--blue,#2563eb); }
.tattach-drop--compact{ flex-direction:row; justify-content:flex-start; gap:10px; padding:10px 14px; text-align:left; }
.tattach-drop--compact i{ font-size:16px; }
.tattach-drop__list{ font-size:12.5px; color:var(--green-d,#15803d); font-weight:600; word-break:break-word; }

.tattach-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.tattach{
  display:inline-flex; align-items:center; gap:8px; max-width:100%;
  padding:6px 10px; border:1px solid var(--line,#e2e8f0); border-radius:10px;
  background:#fff; color:var(--ink,#16213a); font-size:12.5px; text-decoration:none;
  transition:border-color .15s, box-shadow .15s;
}
.tattach:hover{ border-color:var(--blue,#2563eb); box-shadow:0 2px 8px rgba(37,99,235,.12); text-decoration:none; }
.tattach--img{ flex-direction:column; align-items:flex-start; padding:6px; }
.tattach--img img{ max-width:180px; max-height:120px; border-radius:7px; display:block; object-fit:cover; }
.tattach--file i{ color:var(--red,#dc2626); font-size:16px; }
.tattach-name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px; }
.tattach-name small{ color:var(--muted,#64748b); }
/* En mensajes del agente (fondo azul) los chips resaltan en blanco */
.tmsg--agent .tattach{ background:rgba(255,255,255,.95); }

/* ============================================================
   28. BOTÓN FLOTANTE DE SOPORTE (salvavidas, esquina inf. izq.)
   ============================================================ */
.ap-fab{
  position:fixed; right:18px; bottom:18px; z-index:1060;
  display:inline-flex; align-items:center; gap:0;
  height:58px; min-width:58px; padding:0 16px; border-radius:999px;
  background:linear-gradient(160deg, var(--blue,#2563eb), var(--blue-d,#1d4ed8));
  color:#fff; text-decoration:none;
  border:2px solid rgba(255,255,255,.85);
  box-shadow:0 8px 24px rgba(29,78,216,.45), 0 2px 6px rgba(15,23,42,.25);
  transition:transform .15s ease, box-shadow .15s ease, gap .18s ease;
}
.ap-fab:hover, .ap-fab:focus-visible{
  color:#fff; transform:translateY(-2px) scale(1.03); gap:9px;
  box-shadow:0 12px 30px rgba(29,78,216,.55), 0 3px 8px rgba(15,23,42,.3);
}
.ap-fab:focus-visible{ outline:3px solid rgba(37,99,235,.45); outline-offset:2px; }
.ap-fab .fa-life-ring{ font-size:25px; line-height:1; }
.ap-fab__label{
  max-width:0; overflow:hidden; white-space:nowrap;
  font-weight:700; font-size:14.5px; letter-spacing:.2px;
  transition:max-width .18s ease;
}
.ap-fab:hover .ap-fab__label, .ap-fab:focus-visible .ap-fab__label{ max-width:90px; }
/* Anillo de pulso para llamar la atención (sutil, cada ciclo) */
.ap-fab__ring{
  position:absolute; inset:-2px; border-radius:999px; pointer-events:none;
  border:2px solid rgba(37,99,235,.7);
}
@media (prefers-reduced-motion: no-preference){
  .ap-fab__ring{ animation:apFabPulse 2.8s ease-out infinite; }
  @keyframes apFabPulse{
    0%   { transform:scale(1);    opacity:.8; }
    55%  { transform:scale(1.45); opacity:0; }
    100% { transform:scale(1.45); opacity:0; }
  }
}
.ap-fab__badge{
  position:absolute; top:-5px; right:-5px;
  min-width:22px; height:22px; padding:0 6px; border-radius:999px;
  background:var(--red,#dc2626); color:#fff; border:2px solid #fff;
  font-size:11.5px; font-weight:800; line-height:18px; text-align:center;
}
@media (max-width:991px){
  .ap-fab{
    right:14px; bottom:calc(14px + env(safe-area-inset-bottom, 0px));
    height:54px; min-width:54px; padding:0 14px;
  }
  .ap-fab .fa-life-ring{ font-size:23px; }
  .ap-fab:hover .ap-fab__label{ max-width:0; } /* en móvil queda como círculo puro */
}

/* chips de archivos elegidos en el selector (acumulativo, con quitar) */
.tattach-drop__list{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:4px; }
.tattach-pick{
  display:inline-flex; align-items:center; gap:6px;
  background:#fff; border:1px solid var(--line,#dbe2ec); border-radius:999px;
  padding:3px 6px 3px 11px; font-size:12px; color:var(--ink,#16213a); font-weight:600;
}
.tattach-pick__x{
  border:0; background:var(--surface-3,#eef2f7); color:var(--muted,#64748b);
  width:18px; height:18px; border-radius:50%; line-height:1; font-size:13px; cursor:pointer; padding:0;
}
.tattach-pick__x:hover{ background:var(--red,#dc2626); color:#fff; }

/* =============================================================
   Móvil: filtros de panel y botones largos (2026-07-08)
   ============================================================= */
@media (max-width: 640px) {
  .panel-head { flex-wrap: wrap; row-gap: 8px; }
  .panel-head .btn-group { display: flex; flex-wrap: wrap; gap: 6px; }
  .panel-head .btn-group > .btn { border-radius: 8px !important; }
  .service-section .btn { white-space: normal; max-width: 100%; }
  .table-responsive { -webkit-overflow-scrolling: touch; }
}

/* =============================================================
   Etiqueta "Nuevo" del menú lateral (2026-08-04)
   ============================================================= */
.ap-badge-new {
  margin-left: auto; flex: none;
  font-size: 9.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  color: #fff; background: var(--blue); padding: 2px 7px; border-radius: 100px; line-height: 1.6;
}