/* =========================================================
   Soporte360 — Design tokens & shared styles
   ========================================================= */
:root{
  /* Paleta de marca — extraída en píxeles exactos de src/logo_api_sistems.png:
     verde #01E598, navy #001C44, blanco #FFFFFF (ver 05-decisiones-de-producto.md). */
  --s360-dark:        #001C44;
  --s360-dark-2:      #002253;
  --s360-dark-hover:  #002963;
  --s360-border-dark: #003581;

  --s360-green:       #01E598;
  --s360-green-600:   #01BC7D;
  --s360-green-700:   #019462;
  --s360-green-soft:  #C9F3E5;
  --s360-green-text:  #004D33;

  --s360-yellow-soft: #FFF4D6;
  --s360-yellow-text: #9A6B00;

  --s360-gray-soft:   #EEF0F2;
  --s360-gray-text:   #6B7280;

  --s360-blue-soft:   #E3EEFF;
  --s360-blue-text:   #1D4ED8;

  --s360-bg:          #F7F8FA;
  --s360-card:        #FFFFFF;
  --s360-border:      #E9EAEE;
  --s360-text:        #16181C;
  --s360-muted:       #7A7F87;

  --s360-radius-sm:   8px;
  --s360-radius:      14px;
  --s360-radius-lg:   18px;
  --s360-sidebar-w:   232px;

  --s360-shadow: 0 1px 2px rgba(16,17,20,.04), 0 8px 24px rgba(16,17,20,.04);
}

*{ box-sizing:border-box; }

body{
  background:var(--s360-bg);
  color:var(--s360-text);
  font-family:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size:.925rem;
  -webkit-font-smoothing:antialiased;
}

a{ text-decoration:none; color:inherit; }
button{ font-family:inherit; }

/* ---------------- Layout shell ---------------- */
.s360-shell{
  display:flex;
  min-height:100vh;
}

/* ---------------- Sidebar ---------------- */
.s360-sidebar{
  width:var(--s360-sidebar-w);
  flex-shrink:0;
  background:var(--s360-dark);
  color:#e6e7ea;
  display:flex;
  flex-direction:column;
  padding:20px 14px;
  position:sticky;
  top:0;
  height:100vh;
}

.s360-brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 8px 22px;
  font-weight:700;
  font-size:1.05rem;
  color:#fff;
}
.s360-brand .s360-logo-dot{
  width:30px; height:30px;
  border-radius:9px;
  object-fit:cover;
  flex-shrink:0;
}
.s360-brand .s360-brand-lines{
  display:flex;
  flex-direction:column;
  line-height:1.15;
}
.s360-brand .s360-brand-company{
  font-size:.65rem;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--s360-gray-text);
}

.s360-nav{
  list-style:none;
  padding:0; margin:0;
  display:flex;
  flex-direction:column;
  gap:2px;
  flex:1;
}
.s360-nav .s360-nav-link{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:10px;
  color:#c7c9ce;
  font-weight:500;
  font-size:.9rem;
  transition:background .15s ease, color .15s ease;
}
.s360-nav .s360-nav-link i{ font-size:1rem; width:18px; text-align:center; }
.s360-nav .s360-nav-link:hover{
  background:var(--s360-dark-hover);
  color:#fff;
}
.s360-nav .s360-nav-link.active{
  background:var(--s360-green);
  color:var(--s360-dark);
  font-weight:700;
}

.s360-sidebar-footer{
  border-top:1px solid var(--s360-border-dark);
  padding-top:10px;
  margin-top:10px;
}
.s360-logout{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:10px;
  color:#c7c9ce;
  font-weight:500;
  font-size:.9rem;
  background:transparent;
  border:none;
  width:100%;
  text-align:left;
}
.s360-logout:hover{ background:var(--s360-dark-hover); color:#fff; }

/* ---------------- Main column ---------------- */
.s360-main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
}

/* ---------------- Topbar ---------------- */
.s360-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 28px;
  background:var(--s360-bg);
  position:sticky;
  top:0;
  z-index:10;
}
.s360-search{
  position:relative;
  max-width:340px;
  width:100%;
}
.s360-search input{
  width:100%;
  padding:9px 14px 9px 36px;
  border-radius:10px;
  border:1px solid var(--s360-border);
  background:#fff;
  font-size:.85rem;
  outline:none;
}
.s360-search input:focus{ border-color:var(--s360-green-600); box-shadow:0 0 0 3px rgba(1,229,152,.25); }
.s360-search i{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  color:var(--s360-muted); font-size:.85rem;
}

.s360-top-actions{ display:flex; align-items:center; gap:16px; }
.s360-icon-btn{
  width:38px; height:38px;
  border-radius:10px;
  border:1px solid var(--s360-border);
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  color:var(--s360-text);
  position:relative;
}
.s360-icon-btn .s360-dot{
  position:absolute; top:8px; right:8px;
  width:7px; height:7px; border-radius:50%;
  background:var(--s360-green-700);
  border:2px solid #fff;
}

.s360-user{
  display:flex; align-items:center; gap:10px;
}
.s360-avatar{
  width:38px; height:38px;
  border-radius:50%;
  background:var(--s360-green-soft);
  color:var(--s360-green-text);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.8rem;
}
.s360-user-meta{ line-height:1.15; }
.s360-user-meta .name{ font-weight:600; font-size:.85rem; }
.s360-user-meta .role{ font-size:.75rem; color:var(--s360-muted); }

/* ---------------- Content ---------------- */
.s360-content{ padding:6px 28px 40px; flex:1; }

.s360-page-title{ font-size:1.4rem; font-weight:700; margin-bottom:2px; }
.s360-page-sub{ color:var(--s360-muted); font-size:.875rem; margin-bottom:22px; }

/* ---------------- Cards ---------------- */
.s360-card{
  background:var(--s360-card);
  border:1px solid var(--s360-border);
  border-radius:var(--s360-radius);
  box-shadow:var(--s360-shadow);
}
.s360-card-body{ padding:20px; }

/* KPI cards on dashboard */
.s360-kpi{ padding:20px; }
.s360-kpi-icon{
  width:38px; height:38px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:14px; font-size:1rem;
}
.s360-kpi-icon.green{ background:var(--s360-green-soft); color:var(--s360-green-text); }
.s360-kpi-icon.yellow{ background:var(--s360-yellow-soft); color:var(--s360-yellow-text); }
.s360-kpi-icon.gray{ background:var(--s360-gray-soft); color:var(--s360-gray-text); }
.s360-kpi-icon.blue{ background:var(--s360-blue-soft); color:var(--s360-blue-text); }
.s360-kpi-label{ color:var(--s360-muted); font-size:.8rem; margin-bottom:6px; }
.s360-kpi-value{ font-size:1.6rem; font-weight:700; margin-bottom:14px; }
.s360-kpi-link{ font-size:.8rem; font-weight:600; color:var(--s360-text); }
.s360-kpi-link i{ font-size:.7rem; margin-left:3px; transition:transform .15s; }
.s360-kpi-link:hover i{ transform:translateX(3px); }

/* Section titles */
.s360-section-title{ font-weight:700; font-size:.95rem; margin-bottom:14px; }

/* Activity / list rows */
.s360-activity-row{
  display:flex; gap:12px; padding:10px 0;
  border-bottom:1px solid var(--s360-border);
}
.s360-activity-row:last-child{ border-bottom:none; }
.s360-activity-icon{
  width:32px; height:32px; border-radius:8px;
  background:var(--s360-gray-soft);
  display:flex; align-items:center; justify-content:center;
  color:var(--s360-text); flex-shrink:0; font-size:.8rem;
}
.s360-activity-text{ font-size:.83rem; font-weight:600; }
.s360-activity-sub{ font-size:.77rem; color:var(--s360-muted); }
.s360-activity-time{ font-size:.72rem; color:var(--s360-muted); white-space:nowrap; }

/* Service mini card (dashboard) */
.s360-service-row{
  display:flex; align-items:center; justify-content:between; gap:10px;
  padding:12px 0; border-bottom:1px solid var(--s360-border);
}
.s360-service-row:last-child{ border-bottom:none; }
.s360-service-name{ font-weight:600; font-size:.85rem; }
.s360-service-sub{ font-size:.75rem; color:var(--s360-muted); }

/* Badges / status pills */
.s360-badge{
  display:inline-flex; align-items:center;
  padding:4px 10px;
  border-radius:100px;
  font-size:.72rem;
  font-weight:700;
  white-space:nowrap;
}
.s360-badge-green{ background:var(--s360-green-soft); color:var(--s360-green-text); }
.s360-badge-yellow{ background:var(--s360-yellow-soft); color:var(--s360-yellow-text); }
.s360-badge-gray{ background:var(--s360-gray-soft); color:var(--s360-gray-text); }
.s360-badge-red{ background:#FDE8E8; color:#B42318; }

/* Buttons */
.btn-s360{
  background:var(--s360-green);
  border:1px solid var(--s360-green);
  color:var(--s360-dark);
  font-weight:700;
  border-radius:10px;
  padding:9px 16px;
  font-size:.85rem;
}
.btn-s360:hover{ background:var(--s360-green-600); border-color:var(--s360-green-600); color:var(--s360-dark); }
.btn-s360-outline{
  background:#fff;
  border:1px solid var(--s360-border);
  color:var(--s360-text);
  font-weight:600;
  border-radius:10px;
  padding:9px 16px;
  font-size:.85rem;
}
.btn-s360-outline:hover{ background:var(--s360-gray-soft); }
.btn-s360-outline.active{
  background:var(--s360-green);
  border-color:var(--s360-green);
  color:var(--s360-dark);
}

/* Tables */
.s360-table{ width:100%; border-collapse:collapse; }
.s360-table thead th{
  text-align:left;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--s360-muted);
  font-weight:700;
  padding:10px 14px;
  border-bottom:1px solid var(--s360-border);
}
.s360-table tbody td{
  padding:14px;
  font-size:.85rem;
  border-bottom:1px solid var(--s360-border);
  vertical-align:middle;
}
.s360-table tbody tr:last-child td{ border-bottom:none; }
.s360-table tbody tr{ transition:background .12s; cursor:pointer; }
.s360-table tbody tr:hover{ background:var(--s360-bg); }
.s360-table .id-cell{ font-weight:700; color:var(--s360-muted); }
.s360-table .chev{ color:var(--s360-muted); text-align:right; }

/* Tabs (filters) */
.s360-tabs{ display:flex; gap:8px; flex-wrap:wrap; }

/* Service icon block */
.s360-service-icon{
  width:44px; height:44px; border-radius:10px;
  background:var(--s360-green-soft); color:var(--s360-green-text);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem;
}

/* Chat / ticket detail */
.s360-chat-msg{ display:flex; gap:12px; margin-bottom:22px; }
.s360-chat-avatar{
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.75rem; flex-shrink:0;
}
.s360-chat-avatar.user{ background:var(--s360-gray-soft); color:var(--s360-text); }
.s360-chat-avatar.agent{ background:var(--s360-green-soft); color:var(--s360-green-text); }
.s360-chat-bubble{
  background:var(--s360-bg);
  border:1px solid var(--s360-border);
  border-radius:12px;
  padding:12px 14px;
  font-size:.85rem;
}
.s360-chat-name{ font-weight:700; font-size:.85rem; }
.s360-chat-time{ font-size:.72rem; color:var(--s360-muted); }

.s360-detail-row{
  display:flex; justify-content:space-between;
  padding:10px 0; border-bottom:1px solid var(--s360-border);
  font-size:.82rem;
}
.s360-detail-row:last-child{ border-bottom:none; }
.s360-detail-row .label{ color:var(--s360-muted); }
.s360-detail-row .value{ font-weight:600; text-align:right; }

/* Ayuda / FAQ */
.s360-faq-cat{
  display:block;
  padding:9px 12px;
  border-radius:9px;
  font-size:.85rem;
  font-weight:600;
  color:var(--s360-text);
  margin-bottom:2px;
}
.s360-faq-cat:hover{ background:var(--s360-gray-soft); }
.s360-faq-cat.active{ background:var(--s360-green-soft); color:var(--s360-green-text); }

.accordion-item{ border:1px solid var(--s360-border) !important; border-radius:12px !important; margin-bottom:10px; overflow:hidden; }
.accordion-button{ font-size:.87rem; font-weight:600; }
.accordion-button:not(.collapsed){ background:var(--s360-green-soft); color:var(--s360-green-text); box-shadow:none; }
.accordion-button:focus{ box-shadow:none; }

/* Notifications */
.s360-notif-item{
  display:flex; gap:14px;
  padding:16px;
  border-bottom:1px solid var(--s360-border);
}
.s360-notif-item:last-child{ border-bottom:none; }
.s360-notif-item.unread{ background:var(--s360-green-soft-bg,#FBFFFC); }
.s360-notif-icon{
  width:36px; height:36px; border-radius:9px;
  background:var(--s360-gray-soft);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.s360-notif-title{ font-weight:700; font-size:.85rem; }
.s360-notif-sub{ font-size:.8rem; color:var(--s360-muted); }
.s360-notif-time{ font-size:.72rem; color:var(--s360-muted); white-space:nowrap; }
.s360-unread-dot{ width:8px; height:8px; border-radius:50%; background:var(--s360-green-700); flex-shrink:0; margin-top:6px; }

/* Forms (Mi cuenta) */
.s360-label{ font-size:.8rem; font-weight:600; margin-bottom:6px; display:block; }
.form-control.s360-input, .form-select.s360-input{
  border-radius:10px;
  border:1px solid var(--s360-border);
  padding:10px 12px;
  font-size:.85rem;
}
.form-control.s360-input:focus, .form-select.s360-input:focus{
  border-color:var(--s360-green-600);
  box-shadow:0 0 0 3px rgba(1,229,152,.25);
}
.s360-static-value{
  border-radius:10px;
  border:1px solid var(--s360-border);
  background:var(--s360-bg-soft, #f4f6f5);
  padding:10px 12px;
  font-size:.85rem;
  font-weight:600;
  color:var(--s360-text);
}
.s360-hint{ font-size:.78rem; }

/* Pills tabs for Mi cuenta */
.s360-pill-tabs{ display:flex; gap:6px; border-bottom:1px solid var(--s360-border); margin-bottom:22px; }
.s360-pill-tab{
  padding:10px 4px; margin-right:22px;
  font-size:.85rem; font-weight:600; color:var(--s360-muted);
  border-bottom:2px solid transparent;
}
.s360-pill-tab.active{ color:var(--s360-text); border-color:var(--s360-green); }

/* Toggle switch */
.form-check-input:checked{ background-color:var(--s360-green-700); border-color:var(--s360-green-700); }

/* Toast */
.s360-toast{
  position:fixed; bottom:24px; right:24px;
  background:var(--s360-text); color:#fff;
  padding:12px 18px; border-radius:10px;
  font-size:.85rem; font-weight:600;
  box-shadow:0 8px 24px rgba(0,0,0,.2);
  opacity:0; transform:translateY(8px);
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  z-index:2000;
  display:flex; align-items:center; gap:10px;
}
.s360-toast.show{ opacity:1; transform:translateY(0); }
.s360-toast i{ color:var(--s360-green); }

/* Responsive */
@media (max-width: 991.98px){
  .s360-sidebar{
    position:fixed; left:0; top:0; z-index:1050;
    transform:translateX(-100%);
    transition:transform .2s ease;
  }
  .s360-sidebar.open{ transform:translateX(0); }
  .s360-content{ padding:6px 16px 40px; }
  .s360-topbar{ padding:14px 16px; }
  .s360-search{ display:none; }
  .s360-mobile-toggle{ display:inline-flex !important; }
}
.s360-mobile-toggle{ display:none; }
.s360-backdrop{
  display:none;
  position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:1040;
}
.s360-backdrop.show{ display:block; }