/* Berial Systems — Support Hub theme.
   Tokens y componentes importados del design system de claude.ai/design
   (proyecto "Redesign scope discussion", Support Hub.dc.html). */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --color-primary:#5F7C65;
  --color-bg:#F7F4ED;
  --color-cta:#2F6A4E;--color-cta-hover:#265c42;
  --color-accent:#C9824A;
  --color-surface:#FFFFFF;--color-border:#D8D1C2;--color-border-subtle:#E8E4DB;--color-divider:#E0DDD5;
  --color-success:#2F6A4E;--color-warning:#a06030;--color-error:#B04040;
  --fg-1:#171A16;--fg-2:#4A5B4D;--fg-3:#7A8C7C;--fg-4:#A8A99E;
  --bg-2:#F0EDE5;--bg-3:#E8E4DB;--bg-dark:#0F1411;
  --paper:#FDFBF4;
  --font-display:'Manrope',system-ui,sans-serif;--font-body:'Inter',system-ui,sans-serif;
  --radius-sm:4px;--radius-md:6px;--radius-lg:8px;--radius-pill:999px;
}

*{box-sizing:border-box}
body{margin:0;background:var(--color-bg);color:var(--fg-1);font-family:var(--font-body);font-size:14px;line-height:1.5}
a{color:var(--color-cta);text-decoration:none}
a:hover{color:var(--color-cta-hover)}

.bh-shell{min-height:100vh;background:var(--color-bg)}
.bh-container{max-width:1200px;margin:0 auto;padding:32px 24px 100px}

/* Nav */
.bh-nav{position:sticky;top:0;z-index:10;background:var(--color-surface);border-bottom:1px solid var(--color-divider)}
.bh-nav-inner{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:64px;gap:24px;flex-wrap:wrap}
.bh-nav-left{display:flex;align-items:center;gap:40px}
.bh-nav-links{display:flex;align-items:center;gap:26px}
.bh-nav-link{cursor:pointer;font-size:14px;font-weight:400;color:var(--fg-2);text-decoration:none}
.bh-nav-link:hover{color:var(--fg-1)}
.bh-nav-link.is-active{font-weight:600;color:var(--color-cta)}
.bh-nav-right{display:flex;align-items:center;gap:18px}
.bh-nav-user{font-size:13px;color:var(--fg-2)}

/* Logo */
.bh-logo{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none;text-decoration:none}
.bh-logo svg{flex-shrink:0;display:block}
.bh-logo-word{font-family:var(--font-display);font-size:17px;font-weight:400;color:#1C2019;letter-spacing:-0.01em;line-height:1}
.bh-logo-sys{font-family:var(--font-body);font-size:9px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:#5F7C65;line-height:1;margin-left:4px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-body);
  font-size:14px;line-height:20px;font-weight:600;padding:11px 22px;border-radius:var(--radius-md);
  border:1.5px solid transparent;cursor:pointer;text-decoration:none;background:none;
  transition:background 200ms ease-out,color 200ms ease-out,border-color 200ms ease-out}
.btn-primary{background:var(--color-cta);border-color:var(--color-cta);color:#fff}
.btn-primary:hover{background:var(--color-cta-hover);border-color:var(--color-cta-hover)}
.btn-secondary{background:transparent;border-color:var(--color-cta);color:var(--color-cta)}
.btn-secondary:hover{background:rgba(47,106,78,0.07)}
.btn-ghost{background:transparent;border-color:var(--color-border);color:var(--fg-2)}
.btn-ghost:hover{background:var(--bg-3)}
.btn:disabled,.btn.is-disabled{background:transparent!important;color:var(--fg-4)!important;border-color:var(--color-border)!important;cursor:not-allowed}
.btn-sm{padding:6px 14px;font-size:12px;line-height:18px}

/* Cards */
.card{background:var(--paper);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg)}
.card-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--color-divider);gap:12px;flex-wrap:wrap}
.card-header h2{font-family:var(--font-display);font-size:17px;font-weight:500;color:var(--fg-1);margin:0}
.card-body{padding:24px}
.card-list-row{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--color-divider);flex-wrap:wrap}
.card-list-row:last-child{border-bottom:none}
.card-empty{padding:36px 20px;text-align:center;font-size:13px;color:var(--fg-4);margin:0}

/* Page heading */
.bh-page-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:32px}
.bh-page-head h1{font-family:var(--font-display);font-size:32px;font-weight:400;color:var(--fg-1);margin:0}
.bh-back-link{display:inline-block;margin-bottom:16px;font-size:13px;color:var(--color-cta);font-weight:500}

/* Stat cards */
.bh-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin-bottom:32px}
.bh-stat-card{background:var(--paper);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);padding:20px}
.bh-stat-card p:first-child{font-size:13px;color:var(--fg-3);margin:0 0 6px}
.bh-stat-value{font-family:var(--font-display);font-size:32px;font-weight:500;margin:0;color:var(--fg-1)}
.bh-stat-value.is-open{color:var(--color-warning)}
.bh-stat-value.is-progress{color:var(--color-primary)}
.bh-stat-value.is-closed{color:var(--color-cta)}

/* Badges (status / priority) */
.badge{display:inline-flex;align-items:center;font-size:11px;font-weight:500;padding:4px 10px;border-radius:var(--radius-sm);white-space:nowrap}
.badge-status-open{background:rgba(201,130,74,0.12);color:#a06030}
.badge-status-in_progress{background:rgba(95,124,101,0.10);color:#5F7C65}
.badge-status-closed{background:rgba(47,106,78,0.10);color:#2F6A4E}
.badge-priority-low{background:#E8E4DB;color:#4A5B4D}
.badge-priority-medium{background:rgba(95,124,101,0.10);color:#5F7C65}
.badge-priority-high{background:rgba(201,130,74,0.12);color:#a06030}
.badge-priority-critical{background:rgba(176,64,64,0.12);color:#B04040}
.dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;display:inline-block}
.dot-active{background:var(--color-success)}
.dot-inactive{background:var(--bg-3)}

/* Status select rendered as pill */
.status-select{font-size:11px;font-weight:500;padding:4px 24px 4px 10px;border-radius:var(--radius-pill);border:none;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%234A5B4D' d='M3 4.5l3 3 3-3z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 6px center;background-size:10px}
.status-select.status-open{background-color:rgba(201,130,74,0.12);color:#a06030}
.status-select.status-in_progress{background-color:rgba(95,124,101,0.10);color:#5F7C65}
.status-select.status-closed{background-color:rgba(47,106,78,0.10);color:#2F6A4E}

/* Inputs */
.field{margin-bottom:16px}
.field label{font-size:12px;font-weight:500;color:var(--fg-2);margin-bottom:5px;display:block}
.input,input[type=text].input,input[type=email].input,input[type=password].input,select.input,textarea.input{
  width:100%;font-family:var(--font-body);font-size:13px;padding:10px 14px;border-radius:var(--radius-md);
  border:1.5px solid var(--color-border);background:var(--color-surface);color:var(--fg-1);outline:none}
.input:focus{border-color:var(--color-primary)}
textarea.input{resize:vertical;min-height:90px}
.field-error{margin-top:4px;font-size:12px;color:var(--color-error)}
.field-help{margin-top:4px;font-size:12px;color:var(--fg-2)}

/* Filter bar */
.bh-filterbar{background:var(--paper);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);padding:16px 20px;margin-bottom:24px}
.bh-filterbar-row{display:flex;flex-wrap:wrap;gap:12px}
.bh-filterbar-row input.input,.bh-filterbar-row select.input{width:auto}
.bh-filterbar-row input[type=text]{flex:1;min-width:220px}
.bh-filterbar-row select{min-width:160px;flex:0 0 auto}

/* Table */
.bh-table-wrap{background:var(--paper);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);overflow:auto}
table.bh-table{width:100%;border-collapse:collapse}
.bh-table thead{background:var(--bg-2)}
.bh-table th{text-align:left;padding:12px 20px;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:0.06em;color:var(--fg-3);white-space:nowrap}
.bh-table th.is-right{text-align:right}
.bh-table td{padding:14px 20px;font-size:13px;color:var(--fg-2)}
.bh-table tr{border-top:1px solid var(--color-divider)}
.bh-table tr:first-child{border-top:none}
.bh-table td.is-right{text-align:right;white-space:nowrap}
.bh-table-subject{font-size:14px;font-weight:500;color:var(--fg-1);max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bh-table-sub{font-size:11px;color:var(--fg-4);margin-top:2px}
.bh-avatar{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--bg-3);color:var(--fg-2);font-size:9px;font-weight:600;flex-shrink:0;margin-right:6px}

/* Grid layouts */
.bh-grid-dashboard{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:24px}
.bh-grid-detail{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:24px}
.bh-stack{display:flex;flex-direction:column;gap:24px}
.bh-source-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}

@media (max-width: 720px){
  .bh-grid-dashboard,.bh-grid-detail{grid-template-columns:1fr}
}

/* Ticket detail */
.bh-detail-meta{margin-top:24px;padding-top:20px;border-top:1px solid var(--color-divider);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.bh-detail-meta dt{font-size:11px;color:var(--fg-4);margin:0 0 3px}
.bh-detail-meta dd{font-size:13px;font-weight:500;color:var(--fg-1);margin:0}

/* Code / webhook */
code.bh-code{display:block;background:var(--bg-3);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);padding:10px 14px;font-size:13px;color:var(--fg-1);font-family:monospace;overflow-x:auto}
pre.bh-pre{background:#171A16;border-radius:var(--radius-md);padding:14px 16px;font-size:12px;color:#8EA894;overflow-x:auto;margin:0;font-family:monospace;line-height:1.6}

/* Messages */
.bh-messages{margin-bottom:16px;display:flex;flex-direction:column;gap:8px}
.bh-message{border-radius:var(--radius-md);padding:12px 16px;font-size:13px}
.bh-message.is-error{background:rgba(176,64,64,0.10);color:#B04040}
.bh-message.is-success{background:rgba(47,106,78,0.10);color:#2F6A4E}
.bh-message.is-info{background:rgba(95,124,101,0.10);color:#4A5B4D}

/* Login */
.bh-login-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.bh-login-box{width:100%;max-width:380px}
.bh-login-logo{display:flex;justify-content:center;margin-bottom:28px}
.bh-login-card{background:var(--paper);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);padding:36px}
.bh-login-actions{display:flex;justify-content:center;margin-top:8px}