/* =========================================================
   ZELO / SouZelo — components.css
   Cards, formulários, botões, tabelas e componentes reutilizáveis
========================================================= */

.gi-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.gi-card-header{
  padding: 18px 18px 12px;
  border-bottom: 1px solid var(--border);
}

.gi-card-header h1{
  font-size: 20px;
  letter-spacing: -0.2px;
}

.gi-muted{
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
}

.gi-form{
  padding: 14px 18px 18px;
  display: grid;
  gap: 10px;
}

.gi-label{
  font-size: 13px;
  font-weight: 600;
  color: rgba(15,23,42,0.85);
}

body.theme-dark .gi-label{
  color: rgba(255,255,255,0.82);
}

.gi-input{
  width: 100%;
  padding: 12px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text);
  outline: none;
  font-size: 16px;
}

/* Exceção para checklist - input deve ocupar célula grid */
.ws-checklist-edit-item-main .gi-input,
.ws-checklist-item-input.gi-input{
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Desabilitar resize em textareas globalmente */
textarea.gi-input{
  resize: none !important;
}

.gi-input:focus{
  border-color: rgba(22,163,74,0.55);
  box-shadow: 0 0 0 3px rgba(22,163,74,0.18);
}

select.gi-input{
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(15,23,42,0.55) 50%),
    linear-gradient(135deg, rgba(15,23,42,0.55) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(1em + 4px),
    calc(100% - 13px) calc(1em + 4px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

body.theme-dark select.gi-input{
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.55) 50%),
    linear-gradient(135deg, rgba(255,255,255,0.55) 50%, transparent 50%);
}

.gi-alert{
  margin: 14px 18px 0;
  padding: 12px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  font-size: 14px;
}

.gi-alert-danger,
.gi-alert-error{
  border-color: rgba(239,68,68,0.35);
  background: var(--danger-bg);
  color: var(--text);
}

.gi-alert-success{
  border-color: rgba(34,197,94,0.35);
  background: var(--success-bg);
  color: var(--text);
}

.gi-btn{
  appearance: none;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  padding: 12px 14px;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.gi-btn-block{ width: 100%; }

.gi-btn-primary{
  background: var(--brand);
  border-color: rgba(0,0,0,0.06);
  color: #fff;
}

.gi-btn-primary:hover{ background: var(--brand-600); }

.gi-btn-secondary{
  background: rgba(15,23,42,0.06);
  border-color: rgba(15,23,42,0.18);
  color: #0f172a;
}

body.theme-dark .gi-btn-secondary{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.92);
}

.gi-btn-sm{
  padding: 10px 12px;
  font-size: 14px;
  border-radius: 12px;
}

.gi-link{
  display: inline-block;
  margin-top: 8px;
  font-size: 14px;
  color: rgba(15,23,42,0.75);
  text-decoration: none;
}

.gi-link:hover{ text-decoration: underline; }
.gi-link-center{ width: 100%; text-align: center; }

.gi-actions{
  padding: 14px 18px 18px;
  display: grid;
  gap: 10px;
}

.gi-actions-stack{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.gi-panel{
  margin: 14px 18px 0;
  padding: 12px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: rgba(15,23,42,0.03);
}

body.theme-dark .gi-panel{
  background: rgba(255,255,255,0.06);
}

.gi-kv{
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px dashed rgba(15,23,42,0.14);
}

body.theme-dark .gi-kv{
  border-bottom-color: rgba(255,255,255,0.12);
}

.gi-kv:last-child{ border-bottom: 0; }
.gi-k{ font-size: 13px; color: var(--muted); }
.gi-v{ font-size: 14px; font-weight: 650; }

.gi-hero{ padding: 14px 18px 4px; }
.gi-hero h2{
  font-size: 18px;
  letter-spacing: -0.2px;
  margin-bottom: 6px;
}

.gi-divider{
  height: 1px;
  background: var(--border);
  margin: 10px 18px;
}

.gi-grid-2{
  display: grid;
  gap: 14px;
}

@media (min-width: 900px){
  .gi-grid-2{
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.gi-list{ padding: 6px 0 14px; }
.gi-list-item{
  padding: 12px 18px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--border);
}
.gi-list-item:first-child{ border-top: 0; }
.gi-list-title{ font-weight: 800; }
.gi-list-actions{ display:flex; align-items:center; gap:8px; }

.gi-pill{
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  background: rgba(15,23,42,0.06);
  border: 1px solid rgba(15,23,42,0.14);
  color: rgba(15,23,42,0.78);
  margin-left: 8px;
}

body.theme-dark .gi-pill{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.82);
}

.gi-pill-success{
  background: rgba(34,197,94,0.16);
  border: 1px solid rgba(34,197,94,0.30);
  color: rgba(15,23,42,0.86);
}
body.theme-dark .gi-pill-success{ color: rgba(255,255,255,0.90); }

.gi-pill-danger{
  background: rgba(239,68,68,0.10);
  border: 1px solid rgba(239,68,68,0.18);
  color: rgba(15,23,42,0.86);
}
body.theme-dark .gi-pill-danger{ color: rgba(255,255,255,0.90); }

.gi-pill-muted{
  background: rgba(15,23,42,0.04);
  border: 1px solid rgba(15,23,42,0.14);
  color: rgba(15,23,42,0.72);
}
body.theme-dark .gi-pill-muted{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.80);
}

.gi-pill-info{
  background: rgba(59,130,246,.10);
  border: 1px solid rgba(59,130,246,.18);
}

.gi-pill-warning{
  background: rgba(245,158,11,.10);
  border: 1px solid rgba(245,158,11,.18);
}

.gi-pill-oh{
  background: rgba(14,116,144,.10);
  border: 1px solid rgba(14,116,144,.18);
}

.gi-perm-grid{
  display: grid;
  gap: 10px;
}

@media (min-width: 900px){
  .gi-perm-grid{
    grid-template-columns: 1fr 1fr;
  }
}

.gi-perm-item{
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  padding: 12px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: rgba(15,23,42,0.02);
}

body.theme-dark .gi-perm-item{
  background: rgba(255,255,255,0.06);
}

.gi-perm-item input[type="checkbox"]{
  margin-top: 3px;
  width: 18px;
  height: 18px;
}

.gi-perm-key{
  font-weight: 800;
  font-size: 13px;
}

.gi-user-menu{
  position: relative;
  max-width: 100%;
}

.gi-user-menu > summary{
  list-style: none;
  cursor: pointer;
  max-width: 100%;
}

.gi-user-menu > summary::-webkit-details-marker{ display: none; }

.gi-user-dropdown{
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 240px;
  max-width: min(92vw, 320px);
  padding: 10px;
  z-index: 50;
}

.gi-user-dropdown .gi-muted{ margin: 0 0 10px; }

.gi-table-wrap{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--border);
}

.gi-table{
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

.gi-table th,
.gi-table td{
  text-align: left;
  padding: 12px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  font-size: 14px;
}

.gi-table th{
  font-size: 12px;
  letter-spacing: .2px;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(15,23,42,0.02);
}

body.theme-dark .gi-table th{
  background: rgba(255,255,255,0.06);
}

.gi-table tr:hover td{ background: rgba(15,23,42,0.02); }
body.theme-dark .gi-table tr:hover td{ background: rgba(255,255,255,0.04); }

.gi-title{ font-weight: 800; letter-spacing: -0.2px; }
.gi-sub{ margin-top: 4px; font-size: 13px; color: var(--muted); }

.gi-form-row,
.gi-form-row-3{
  padding: 14px 18px 18px;
  display: grid;
  gap: 10px;
}

@media (min-width: 900px){
  .gi-form-row{
    grid-template-columns: 1fr auto;
    align-items: end;
  }

  .gi-form-row-3{
    grid-template-columns: 1fr auto auto;
    align-items: end;
  }
}

.gi-inline{
  display: inline-flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.gi-inline-form{ display:inline-flex; }

.gi-checkline,
.gi-checkline-wrap{
  display:flex;
  gap:10px;
}

.gi-checkline{
  align-items:center;
  margin-top:10px;
}

.gi-checkline input[type="checkbox"]{
  width:18px;
  height:18px;
}

.gi-checkline .gi-muted{
  margin-top:0;
  font-weight:800;
}

.gi-checkline-wrap{ align-items:flex-end; }

.gi-card > .gi-panel:last-child{ margin-bottom: 18px; }
.gi-card > .gi-actions:last-child{ padding-bottom: 18px; }
.gi-card > .gi-muted:last-child{ margin-bottom: 18px; }

.gi-picker{ position: relative; }

.gi-picker-list{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  overflow: hidden;
  max-height: 280px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.gi-picker-item{
  padding: 12px 12px;
  border-top: 1px solid var(--border);
  cursor: pointer;
}
.gi-picker-item:first-child{ border-top: 0; }
.gi-picker-item:hover{ background: rgba(15,23,42,0.04); }
body.theme-dark .gi-picker-item:hover{ background: rgba(255,255,255,0.06); }

.gi-picker-title{
  font-weight: 900;
  font-size: 14px;
  display:flex;
  align-items:center;
  gap:8px;
}

.gi-picker-sub{
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.gi-picker-empty{
  padding: 12px 12px;
  color: var(--muted);
  font-size: 13px;
}

.gi-textarea-lg{
  resize: vertical;
  min-height: 140px;
  max-width: 100%;
}

.gi-textarea-code{
  min-height: 220px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  white-space: pre;
}

.oh-summary-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.oh-summary-label{
  font-size:13px;
  color:var(--muted, #64748b);
  margin-bottom:6px;
}

.oh-summary-value{
  font-size:24px;
  font-weight:700;
  line-height:1.1;
}

.oh-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.oh-list-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.oh-list-main{
  min-width:0;
  flex:1 1 auto;
}

.oh-list-title{
  font-weight:700;
  word-break:break-word;
}

.oh-list-badges{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:8px;
}

.oh-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.oh-meta-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.oh-meta-item{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.appt-card-oh{
  border-color:rgba(14,116,144,.22);
}

@media (max-width: 720px){
  .oh-summary-grid,
  .oh-meta-grid{
    grid-template-columns:1fr;
  }

  .oh-list-head{
    flex-direction:column;
    align-items:flex-start;
  }

  .oh-list-badges,
  .gi-inline-form,
  .gi-inline-form .gi-btn{
    width:100%;
  }

  .gi-checkline-wrap{
    align-items:flex-start;
  }
}
/* =========================================================
   OCCUPATIONAL HEALTH / LISTAGEM + FILTRO REUTILIZÁVEL
========================================================= */

.gi-container-fluid{
  max-width:100% !important;
  width:100%;
  padding:24px 30px !important;
}

.oh-filter-card{
  margin-bottom:24px;
}

.oh-filter-field{
  min-width:0;
}

.oh-data-table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.oh-entity-main{
  font-weight:700;
  color:#2d3748;
}

.oh-entity-sub{
  font-size:11px;
  color:var(--muted);
}

.oh-entity-meta{
  font-size:12px;
}

.oh-row-actions{
  display:flex;
  gap:6px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
}

.oh-mobile-list{
  padding:12px;
}

.oh-mobile-card{
  margin:0;
}

.oh-mobile-list .oh-mobile-card + .oh-mobile-card{
  margin-top:12px;
}

.oh-mobile-card-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}

.oh-mobile-card-main{
  min-width:0;
}

.oh-mobile-card-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  align-items:stretch;
}

.oh-mobile-card-actions .gi-btn,
.oh-mobile-card-actions form{
  width:100%;
}

.oh-mobile-card-actions form .gi-btn{
  width:100%;
}

@media (min-width: 992px){
  .oh-mobile-list{
    display:none;
  }

  .oh-data-table{
    display:table;
    width:100%;
    border-collapse:collapse;
    margin-top:10px;
  }

  .oh-data-table th{
    background:#f8f9fa;
    padding:14px 12px;
    border-bottom:2px solid #edf2f7;
    font-weight:600;
    color:#4a5568;
    text-align:center;
    white-space:nowrap;
  }

  .oh-data-table th.is-main{
    text-align:left;
  }

  .oh-data-table td{
    padding:14px 12px;
    border-bottom:1px solid #edf2f7;
    vertical-align:middle;
    text-align:center;
  }

  .oh-data-table td.is-main{
    text-align:left;
  }

  .oh-data-table .is-actions{
    white-space:nowrap;
  }

  .oh-data-table tr:nth-child(even){
    background-color:#fafafa;
  }

  .oh-data-table tr:hover{
    background:#f1f5f9;
  }

  .oh-filter-form{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    align-items:flex-end;
  }

  .oh-filter-form > .oh-filter-field{
    flex:1;
    min-width:150px;
  }

  .oh-filter-actions{
    flex:initial;
    display:flex;
    gap:8px;
    padding-bottom:2px;
    flex-wrap:wrap;
  }

  .oh-filter-actions .gi-btn{
    height:38px;
    padding:0 20px;
    font-weight:600;
    border-radius:8px;
  }
}

@media (max-width: 991px){
  .oh-desktop-table{
    display:none;
  }
}
.oh-filter-field-grow{
  flex:1.5 !important;
}

.oh-cell-title{
  font-size:13px;
  font-weight:600;
  color:#2d3748;
}

.oh-cell-meta{
  font-size:11px;
  color:#4a5568;
}
/* =========================================================
   OH FORM LAYOUT COMPONENTS
========================================================= */

.oh-section-card{
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.oh-section-card-header{
  padding: 16px 20px 12px;
  border-bottom: 1px solid rgba(15,23,42,0.07);
}

.oh-section-card-header h2{
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.oh-section-card-header p{
  font-size: 12px;
  color: #94a3b8;
  margin: 3px 0 0;
}

.oh-section-card-body{
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.oh-field{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.oh-field .gi-input{
  width: 100%;
  box-sizing: border-box;
}

.oh-required{
  color: #e11d48;
}

.oh-checkline-reset{
  margin: 0;
}

.oh-notes-textarea{
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
}

.oh-field-spacer{
  visibility: hidden;
}

@media (max-width: 1023px){
  .oh-form-page{
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .oh-form-footer{
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .oh-fields-grid-2,
  .oh-fields-grid-3,
  .oh-fields-grid-4,
  .oh-fields-street-row,
  .oh-fields-nco,
  .oh-fields-cut,
  .oh-contato-row,
  .oh-obs-row{
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
}

@media (min-width: 1024px){
  .oh-fields-grid-2{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
  }

  .oh-fields-grid-3{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px 20px;
  }

  .oh-fields-grid-4{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 14px 20px;
  }

  .oh-fields-street-row{
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 14px 20px;
  }

  .oh-fields-nco{
    display: grid;
    grid-template-columns: 120px 1fr 1fr;
    gap: 14px 20px;
  }

  .oh-fields-cut{
    display: grid;
    grid-template-columns: 1fr 80px 1fr;
    gap: 14px 20px;
  }

  .oh-field-full{
    grid-column: 1 / -1;
  }

  .oh-contato-row{
    display: grid;
    grid-template-columns: 1fr 1fr 220px;
    gap: 14px 20px;
    align-items: start;
  }

  .oh-obs-row{
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 20px;
    align-items: start;
  }

  .oh-status-box,
  .oh-obs-status{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid rgba(15,23,42,0.08);
    height: fit-content;
    align-self: start;
    margin-top: 22px;
  }

  .oh-status-box-title,
  .oh-obs-status-title{
    font-size: 12px;
    font-weight: 700;
    color: #334155;
  }
}
/* =========================================================
   OH FORM LAYOUT COMPONENTS — EXTENSÕES
========================================================= */

.oh-fields-crm-row{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

@media (min-width: 1024px){
  .oh-fields-crm-row{
    display: grid;
    grid-template-columns: 1fr 80px 1fr;
    gap: 14px 20px;
  }
}
/* =========================================================
   OH FORM LAYOUT COMPONENTS — EXTENSÕES
========================================================= */

/* Corrige input[type=date], time e datetime-local no Safari/iOS */
input[type="date"].gi-input,
input[type="date"].oh-date-input,
input[type="time"].gi-input,
input[type="time"].oh-date-input{
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding-right: 8px;
  -webkit-appearance: none;
  appearance: none;
}

.oh-g2,
.oh-g3,
.oh-g4,
.oh-fields-crm-row,
.oh-vinculo-row1,
.oh-vinculo-row2{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.oh-card-divider{
  height: 1px;
  background: rgba(15,23,42,0.07);
  margin: 4px 0;
}

.oh-status-box-inline-top{
  margin-top: 4px;
}

@media (max-width: 1023px){
  .oh-g2,
  .oh-g3,
  .oh-g4,
  .oh-fields-crm-row,
  .oh-vinculo-row1,
  .oh-vinculo-row2{
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
}

@media (min-width: 1024px){
  .oh-g2{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
  }

  .oh-g3{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px 20px;
  }

  .oh-g4{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 14px 20px;
  }

  .oh-fields-crm-row{
    display: grid;
    grid-template-columns: 1fr 80px 1fr;
    gap: 14px 20px;
  }

  .oh-vinculo-row1{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 14px 20px;
  }

  .oh-vinculo-row2{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 220px;
    gap: 14px 20px;
    align-items: end;
  }

  .oh-date-input{
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-right: 8px !important;
    -webkit-appearance: none;
    appearance: none;
  }
}
/* =========================================================
   OH FORM LAYOUT COMPONENTS — EMPLOYMENT
========================================================= */

.oh-periodo-row{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

@media (min-width: 1024px){
  .oh-periodo-row{
    display: grid;
    grid-template-columns: 1fr 1fr 220px;
    gap: 14px 20px;
    align-items: end;
  }
}
/* =========================================================
   OH FORM / MODAL COMPONENTS — ENCOUNTER
========================================================= */

input[type="time"].gi-input,
input[type="time"].oh-date-input,
input[type="datetime-local"].gi-input,
input[type="datetime-local"].oh-date-input{
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding-right: 8px;
  -webkit-appearance: none;
  appearance: none;
}

.oh-inline-check{
  display: flex;
  align-items: center;
  gap: 10px;
}

.oh-inline-row{
  display: flex;
  gap: 10px;
  align-items: center;
}

.oh-toggle-block.is-hidden{
  display: none;
}

.oh-block-gap{
  margin-bottom: 18px;
}

.oh-help-space{
  margin-bottom: 10px;
}

.oh-help-space-sm{
  margin-bottom: 8px;
}

.oh-list-row-space{
  margin-bottom: 10px;
}

.oh-mini-card{
  padding: 12px;
  margin-bottom: 12px;
}

.oh-agent-line{
  display: flex;
  align-items: center;
  gap: 10px;
}

.oh-agent-line.has-margin{
  margin-bottom: 10px;
}

.oh-risk-group{
  padding-left: 28px;
}

.oh-risk-check{
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.oh-risk-detail{
  display: block;
  line-height: 1.4;
}

.oh-no-risk-msg{
  padding-left: 28px;
}

.oh-docs-modal{
  width: min(980px, calc(100vw - 24px));
  max-width: 980px;
  border: 0;
  border-radius: 14px;
  padding: 0;
}

.oh-docs-modal::backdrop{
  background: rgba(15, 23, 42, 0.48);
}

@media (max-width: 640px){
  .oh-inline-row{
    flex-direction: column;
    align-items: stretch;
  }
}
/* =========================================================
   OH FORM LAYOUT COMPONENTS — DOCUMENT PAYLOAD
========================================================= */

.oh-payload-textarea{
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: 180px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
}
/* =========================================================
   PADRÃO: CARD DE FILTRO COM PAINEL COLAPSÁVEL
   Usado em barber_customers, barber_cuts e futuras páginas
   com o mesmo padrão de layout.
========================================================= */

/* ── Cabeçalho do card de filtro: título + botão ── */
.gi-filter-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.gi-filter-header-text{
  min-width: 0;
}

/* ── Painel colapsável ── */
.gi-panel-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.gi-btn-panel-close{
  flex-shrink: 0;
  min-width: 40px;
  height: 40px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
}

/* ── Grid interno do formulário do painel ── */
.gi-panel-form{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.gi-panel-field{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Campo que ocupa linha inteira no grid */
.gi-panel-field-full{
  grid-column: 1 / -1;
}

/* Hint sutil abaixo de campos */
.gi-panel-field-hint{
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--muted);
}

/* Ações do painel (submit + cancelar) */
.gi-panel-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 4px;
  grid-column: 1 / -1;
}

/* ── Destaque de linha em edição ── */
.gi-table-row-editing td{
  background: rgba(22, 163, 74, 0.06);
}

.gi-table-row-editing td:first-child{
  border-left: 3px solid var(--brand);
}

.gi-mobile-card-editing{
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.18);
}

/* ── Rodapé de total na tabela ── */
.gi-table-total td{
  padding: 12px;
  background: rgba(15,23,42,0.03);
  border-top: 2px solid var(--border);
  border-bottom: none;
  font-size: 14px;
}

/* ── Mobile: meta alinhada à direita (ex: valor + hora) ── */
.gi-mobile-meta{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

.gi-mobile-meta-value{
  font-size: 15px;
  color: var(--text);
}

/* ── Mobile: rodapé de card (pills, notas) ── */
.gi-mobile-card-footer{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 2px;
}

/* ── Mobile: linha de total abaixo dos cards ── */
.gi-mobile-total{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 12px;
  margin-top: 8px;
  background: rgba(15,23,42,0.03);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 14px;
}

.gi-mobile-total strong{
  font-size: 15px;
}

/* ── Dropdown picker teleportado ── */
/* Criado via JS e anexado ao <body>, nunca cortado por overflow */
.gi-picker-teleport{
  position: absolute;
  z-index: 9999;
  max-height: 320px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
}

/* ── Responsivo do painel form ── */
@media (min-width: 1024px){
  .gi-panel-form{
    column-gap: 20px;
    row-gap: 16px;
  }
}


/* =========================================================
   APPOINTMENTS FORM
========================================================= */

.appt-form-shell{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.appt-form-hero{
  overflow:hidden;
}

.appt-form-hero-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}

.appt-form-hero-copy{
  min-width:0;
}

.appt-form-hero-copy h1{
  font-size:22px;
  letter-spacing:-0.3px;
}

.appt-form-hero-badges{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}

/* ── Grid principal: mobile = coluna única ── */
.appt-form-main-grid{
  display:grid;
  gap:18px;
  align-items:start;
}

.appt-form-main,
.appt-form-side{
  min-width:0;
}

/* ── Coluna lateral: empilha Resumo + Notificações sem sticky ── */
.appt-form-side{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.appt-form-side > .appt-form-section{
  margin:0;
  flex-shrink:0;
}

.appt-form-section{
  overflow:visible;
}

/* ── Chips de preview do item agendável ── */
.appt-form-inline-summary{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}

.appt-summary-chip{
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(15,23,42,0.03);
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

body.theme-dark .appt-summary-chip{
  background:rgba(255,255,255,0.06);
}

.appt-summary-chip-label{
  font-size:12px;
  color:var(--muted);
  font-weight:700;
}

.appt-summary-chip strong{
  font-size:14px;
  line-height:1.35;
  word-break:break-word;
}

/* ── Grid 2 colunas: Contato + Unidade ── */
.appt-form-grid-2{
  display:grid;
  gap:14px;
}

/* ── Grid 3 colunas (legado, mantido para compatibilidade) ── */
.appt-form-grid-3{
  display:grid;
  gap:14px;
}

/* ── Linha do profissional (dependente da unidade) ── */
.appt-form-professional-row{
  margin-top:4px;
}

.appt-form-professional-dependent{
  border-radius:var(--r-md);
  border:1px solid transparent;
  padding:14px;
  transition:background .18s ease, border-color .18s ease;
  margin-left:-14px;
  margin-right:-14px;
}

.appt-form-professional-dependent.is-pending{
  background:rgba(15,23,42,0.025);
  border-color:rgba(15,23,42,0.08);
}

body.theme-dark .appt-form-professional-dependent.is-pending{
  background:rgba(255,255,255,0.04);
  border-color:rgba(255,255,255,0.08);
}

.appt-form-professional-dependent.is-pending .gi-input{
  opacity:.48;
  cursor:default;
  color:var(--muted);
}

/* ── Badge "2º passo" no label do profissional ── */
.appt-form-step-badge{
  display:inline-flex;
  align-items:center;
  padding:1px 7px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  background:rgba(22,163,74,0.12);
  border:1px solid rgba(22,163,74,0.22);
  color:var(--brand-700);
  margin-left:6px;
  vertical-align:middle;
  letter-spacing:.02em;
}

body.theme-dark .appt-form-step-badge{
  background:rgba(22,163,74,0.18);
  border-color:rgba(22,163,74,0.30);
  color:rgba(34,197,94,0.92);
}

.appt-form-hint{
  margin-top:6px;
  font-size:12px;
  color:var(--muted);
}

.appt-form-notes{
  min-height:140px;
}

/* ── Resumo: pares chave/valor ── */
.appt-side-kv{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:10px 0;
  border-bottom:1px solid var(--border);
}

.appt-side-kv:first-child{
  padding-top:0;
}

.appt-side-kv:last-child{
  border-bottom:0;
  padding-bottom:0;
}

.appt-side-k{
  font-size:12px;
  font-weight:700;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.04em;
}

.appt-side-v{
  font-size:14px;
  line-height:1.4;
  word-break:break-word;
}

/* ── Caixa de dica verde (Notificações) ── */
.appt-form-note-box{
  border:1px solid rgba(22,163,74,0.16);
  background:rgba(22,163,74,0.08);
  border-radius:12px;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.appt-form-note-box strong{
  font-size:13px;
}

.appt-form-note-box p{
  font-size:13px;
  color:var(--text);
}

.appt-form-footer{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  align-items:center;
  flex-wrap:wrap;
}

.appt-form-footer .gi-btn{
  min-width:180px;
}

/* ── Desktop: 2 colunas, lateral direita fixa em largura ── */
@media (min-width: 1100px){
  .appt-form-main-grid{
    grid-template-columns:minmax(0, 1.8fr) minmax(300px, .95fr);
    align-items:start;
  }

  /* Coluna lateral: não acompanha scroll, os cards apenas empilham */
  .appt-form-side{
    position:sticky;
    top:18px;
    max-height:calc(100vh - var(--topbar-h, 57px) - 36px);
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-width:thin;
    scrollbar-color:rgba(15,23,42,0.14) transparent;
    padding-right:2px;
  }

  body.theme-dark .appt-form-side{
    scrollbar-color:rgba(255,255,255,0.12) transparent;
  }

  .appt-form-side::-webkit-scrollbar{ width:4px; }
  .appt-form-side::-webkit-scrollbar-track{ background:transparent; }
  .appt-form-side::-webkit-scrollbar-thumb{ background:rgba(15,23,42,0.14); border-radius:4px; }

  .appt-form-grid-2{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .appt-form-grid-3{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1099px){
  .appt-form-grid-2,
  .appt-form-grid-3,
  .appt-form-inline-summary{
    grid-template-columns:1fr;
  }
}

@media (max-width: 720px){
  .appt-form-hero-head{
    flex-direction:column;
  }

  .appt-form-hero-badges{
    justify-content:flex-start;
  }

  .appt-form-footer{
    flex-direction:column-reverse;
  }

  .appt-form-footer .gi-btn{
    width:100%;
    min-width:0;
  }

  .appt-form-professional-dependent{
    margin-left:0;
    margin-right:0;
  }
}

/* =========================================================
   SHARED DASHBOARDS — métricas e ações
========================================================= */

.oh-dash-header{
  margin-bottom:20px;
}

.oh-dash-header h1{
  font-size:22px;
  font-weight:700;
  color:#0f172a;
  margin:0 0 4px;
}

.oh-dash-header p{
  font-size:13px;
  color:#94a3b8;
  margin:0;
}

.oh-metric-card{
  background:#fff;
  border:1px solid rgba(15,23,42,0.10);
  border-radius:10px;
  padding:18px 20px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.oh-metric-label{
  font-size:12px;
  font-weight:600;
  color:#94a3b8;
  text-transform:uppercase;
  letter-spacing:0.06em;
}

.oh-metric-value{
  font-size:32px;
  font-weight:800;
  color:#0f172a;
  line-height:1;
}

.oh-metric-sub{
  font-size:12px;
  color:#94a3b8;
  margin-top:2px;
}

.oh-metric-card.oh-metric-alert .oh-metric-value{ color:#d97706; }
.oh-metric-card.oh-metric-today .oh-metric-value{ color:#0ea5e9; }
.oh-metric-card.oh-metric-success .oh-metric-value{ color:#16a34a; }

.oh-action-card{
  background:#fff;
  border:1px solid rgba(15,23,42,0.10);
  border-radius:10px;
  overflow:hidden;
}

.oh-action-card-header{
  padding:14px 18px 10px;
  border-bottom:1px solid rgba(15,23,42,0.07);
}

.oh-action-card-header h2{
  font-size:13px;
  font-weight:700;
  color:#0f172a;
  margin:0;
  text-transform:uppercase;
  letter-spacing:0.06em;
}

.oh-action-card-header p{
  font-size:12px;
  color:#94a3b8;
  margin:3px 0 0;
}

.oh-action-list{ padding:8px 0; }

.oh-action-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 18px;
  text-decoration:none;
  color:#334155;
  font-size:14px;
  font-weight:500;
  transition:background 0.12s;
  border-bottom:1px solid rgba(15,23,42,0.05);
}

.oh-action-item:last-child{ border-bottom:none; }
.oh-action-item:hover{ background:#f8fafc; color:#0f172a; }
.oh-action-item-arrow{ font-size:16px; color:#cbd5e1; }

.oh-action-item-badge{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  background:#f1f5f9;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  color:#64748b;
}

.oh-action-item-badge.oh-badge-alert{ background:#fef3c7; color:#d97706; }

@media (max-width: 1023px){
  .oh-metrics-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .oh-dash-body{ display:flex; flex-direction:column; gap:14px; margin-top:16px; }
  .oh-metric-value{ font-size:26px; }
}

@media (min-width: 1024px){
  .oh-metrics-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
  .oh-dash-body{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; margin-top:20px; }
}

/* =========================================================
   APPOINTMENTS FORM — disponibilidade reutilizável
========================================================= */

.appt-availability-box{
  border: 1px dashed rgba(148,163,184,.45);
  border-radius: 16px;
  padding: 14px 16px;
  background: rgba(15,23,42,.02);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.theme-dark .appt-availability-box{ background: rgba(255,255,255,.03); }
.appt-availability-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.appt-availability-badge{ display:inline-flex; align-items:center; border-radius:999px; padding:4px 10px; font-size:12px; font-weight:700; background:rgba(59,130,246,.12); color:var(--text); }
.appt-availability-note{ margin:0; color:var(--muted); font-size:13px; line-height:1.5; }
.appt-slot-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.appt-slot-btn{ border:1px solid rgba(148,163,184,.4); background:var(--card, #fff); border-radius:12px; padding:10px 8px; font:inherit; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform .14s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease; }
.appt-slot-btn:hover{ transform:translateY(-1px); }
.appt-slot-btn.is-selected{ border-color:rgba(59,130,246,.85); box-shadow:0 0 0 2px rgba(59,130,246,.15); }
.appt-slot-empty{ grid-column:1 / -1; padding:12px; border-radius:12px; background:rgba(148,163,184,.08); color:var(--muted); font-size:13px; }
@media (max-width: 640px){ .appt-slot-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }

/* =========================================================
   BARBER CRUD SHARED — customers / services / combos / plans
========================================================= */

@media (max-width: 1023px){
  :is(.page-barber-customers, .page-barber-services, .page-barber-combos, .page-barber-plans) .gi-container-fluid{
    padding:16px 14px 32px !important;
  }
}
@media (min-width: 1024px){
  :is(.page-barber-customers, .page-barber-services, .page-barber-combos, .page-barber-plans) .gi-container-fluid{
    max-width:100% !important;
    width:100% !important;
    padding:24px 32px !important;
    box-sizing:border-box;
  }
}
.page-barber-customers .gi-table-row.gi-table-row-editing td,
.page-barber-services .bs-table-row.gi-table-row-editing td,
.page-barber-combos .bc-table-row.gi-table-row-editing td,
.page-barber-plans .bp-table-row.gi-table-row-editing td{ background:rgba(22,163,74,0.06); }
.page-barber-customers .gi-table-row.gi-table-row-editing td:first-child,
.page-barber-services .bs-table-row.gi-table-row-editing td:first-child,
.page-barber-combos .bc-table-row.gi-table-row-editing td:first-child,
.page-barber-plans .bp-table-row.gi-table-row-editing td:first-child{ border-left:3px solid var(--brand); }
.page-barber-customers .gi-mobile-card.gi-mobile-card-editing,
.page-barber-services .bs-mobile-card.gi-table-row-editing,
.page-barber-combos .bc-mobile-card.gi-table-row-editing,
.page-barber-plans .bp-mobile-card.gi-table-row-editing{ border-color:var(--brand); box-shadow:0 0 0 2px rgba(22,163,74,0.18); }
.page-barber-services .oh-mobile-card-actions,
.page-barber-combos .oh-mobile-card-actions,
.page-barber-plans .oh-mobile-card-actions{ grid-template-columns:1fr; }


/* =========================================================
   COMPONENTES REUTILIZÁVEIS EXTRAÍDOS (Refatoração 2024)
   Sistema de Grid, Chips, Botões e Estados
========================================================= */

/* ── Sistema de Grid Flexível ── */
.gi-row{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}

.gi-col{
  min-width: 0;
  flex: 1 1 240px;
}

.gi-col-actions{
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  justify-content: flex-start;
}

@media (min-width: 900px){
  .gi-col-actions{
    width: auto;
    justify-content: flex-end;
  }
}

/* ── Sistema de Chips e Tags ── */
.gi-filter-chips{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0 14px;
}

.gi-chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.18);
  background: rgba(15,23,42,0.06);
  color: #0f172a;
  text-decoration: none;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .2px;
  box-shadow: 0 6px 16px rgba(15,23,42,0.08);
  transition: transform .06s ease, box-shadow .12s ease;
}

.gi-chip:active{
  transform: translateY(1px);
  box-shadow: 0 3px 10px rgba(15,23,42,0.08);
}

.gi-chip.is-active{
  border-color: rgba(22,163,74,0.55);
  background: rgba(22,163,74,0.14);
  color: #14532d;
}

body.theme-dark .gi-chip{
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.92);
}

body.theme-dark .gi-chip.is-active{
  border-color: rgba(22,163,74,0.65);
  background: rgba(22,163,74,0.20);
  color: rgba(34,197,94,0.95);
}

/* ── Variantes de Botões ── */
.gi-btn-danger-strong{
  background: #ef4444;
  border-color: #ef4444;
  color: #fff;
}

.gi-btn-danger-strong:hover{
  background: #dc2626;
  border-color: #dc2626;
}

.gi-btn-danger-strong:active{
  background: #b91c1c;
  border-color: #b91c1c;
}

/* ── Estados de Card ── */
.gi-card-active{
  border: 2px solid var(--brand);
  box-shadow: 0 10px 26px rgba(22,163,74,0.18);
  position: relative;
  transform: translateY(-1px);
}

.gi-card-editing{
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(22,163,74,0.18);
}

/* ── Sistema de Metadados ── */
.gi-meta-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.gi-meta-item{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.gi-meta-item strong{
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (min-width: 768px){
  .gi-meta-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── Estado Vazio ── */
.gi-empty{
  padding: 24px 18px;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
}

/* ── Wrapper Genérico ── */
.gi-wrap{
  padding: 16px;
}

/* ── Container de Filtros ── */
.gi-filters{
  margin-top: 12px;
}

/* ── Container de Ações ── */
.gi-actions-wrap{
  margin-top: 12px;
}

/* ── Campo de Formulário ── */
.gi-field{
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* ── Cabeçalho de Card com Stack ── */
.gi-card-header-stack{
  margin-bottom: 10px;
}

/* ── Label Oculto (acessibilidade) ── */
.gi-label-hidden{
  visibility: hidden;
}

/* ── Formulário Inline ── */
.gi-form-inline{
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}


/* =========================================================
   COMPONENTES DE APPOINTMENTS (Calendário e Visualizações)
========================================================= */

/* ── Toggle de Visualização ── */
.appt-view-toggle{
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}

.appt-view-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  color: var(--text);
  background: transparent;
  border: none;
  border-right: 1px solid var(--border);
  transition: background .15s;
  white-space: nowrap;
}

.appt-view-btn:last-child{
  border-right: none;
}

.appt-view-btn.is-active{
  background: var(--brand);
  color: #fff;
}

.appt-view-btn svg{
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* ── Cards de Appointments ── */
.appt-cards{
  display: grid;
  gap: 16px;
  margin-top: 16px;
}

.appt-card-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.appt-meta-item{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.appt-meta-item strong{
  overflow-wrap: anywhere;
  word-break: break-word;
}

.appt-list-empty-card{
  margin-top: 16px;
}

/* ── Checks de Appointments ── */
.appt-checks{
  display: flex;
  flex-direction: column;
  gap: 10px;
}


/* =========================================================
   COMPONENTES DE SAÚDE OCUPACIONAL (OH)
   Sistema de filtros, tabelas, cards e formulários
========================================================= */

/* ── Filtros OH ── */
.oh-filter-card{
  margin-bottom: 24px;
}

.oh-filter-field{
  min-width: 0;
}

.oh-filter-field-grow{
  flex: 2 !important;
}

.oh-filter-form{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

.oh-filter-form > .oh-filter-field{
  flex: 1;
  min-width: 130px;
}

.oh-filter-actions{
  flex: initial;
  display: flex;
  gap: 8px;
  padding-bottom: 2px;
}

.oh-filter-actions .gi-btn{
  height: 38px;
  padding: 0 15px;
  font-weight: 600;
  border-radius: 8px;
  white-space: nowrap;
}

@media (max-width: 991px){
  .oh-filter-actions{
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 15px;
  }
}

/* ── Tabelas OH ── */
.oh-data-table-wrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.oh-data-table{
  display: table;
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.oh-data-table th{
  background: #f8f9fa;
  padding: 14px 12px;
  border-bottom: 2px solid #edf2f7;
  font-weight: 600;
  color: #4a5568;
  text-align: center;
}

.oh-data-table th.is-main{
  text-align: left;
}

.oh-data-table td{
  padding: 14px 12px;
  border-bottom: 1px solid #edf2f7;
  vertical-align: middle;
  text-align: center;
}

.oh-data-table td.is-main{
  text-align: left;
}

.oh-data-table tr:nth-child(even){
  background-color: #fafafa;
}

.oh-data-table tr:hover{
  background: #f1f5f9;
}

@media (max-width: 991px){
  .oh-desktop-table{
    display: none;
  }
}

/* ── Entidades OH (células de tabela) ── */
.oh-entity-main{
  font-weight: 700;
  color: #2d3748;
}

.oh-entity-sub{
  font-size: 11px;
  color: #64748b;
}

.oh-entity-meta{
  font-size: 12px;
  color: #4a5568;
}

.oh-cell-title{
  font-weight: 600;
  color: #2d3748;
}

.oh-cell-meta{
  font-size: 11px;
  color: #4a5568;
}

.oh-row-actions{
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* ── Listagem Mobile OH ── */
.oh-list{
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 992px){
  .oh-list{
    display: none;
  }
}

.oh-list-card{
  background: #fff;
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 10px;
  overflow: hidden;
}

.oh-list-card-body{
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.oh-list-card-title{
  font-weight: 700;
  font-size: 15px;
  color: #0f172a;
  line-height: 1.3;
}

.oh-list-card-worker{
  font-size: 13px;
  color: #64748b;
}

.oh-list-card-meta{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.oh-list-card-meta-item{
  font-size: 12px;
  color: #94a3b8;
}

.oh-list-card-meta-sep{
  font-size: 12px;
  color: #cbd5e1;
}

.oh-list-card-footer{
  padding: 10px 16px;
  border-top: 1px solid rgba(15,23,42,0.07);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.oh-list-card-footer.oh-footer-3col{
  grid-template-columns: 1fr 1fr 1fr;
}

.oh-list-card-footer .gi-btn{
  width: 100%;
  justify-content: center;
  text-align: center;
}

/* ── Pills OH ── */
.oh-mobile-pill{
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.oh-mobile-pill-success{
  background: #dcfce7;
  color: #166534;
}

.oh-mobile-pill-draft{
  background: #f1f5f9;
  color: #64748b;
}

.oh-mobile-pill-canceled{
  background: #fee2e2;
  color: #991b1b;
}

/* ── Dashboard OH ── */
.oh-dash-header{
  margin-bottom: 20px;
}

.oh-dash-header h1{
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 4px;
}

.oh-dash-header p{
  font-size: 13px;
  color: #94a3b8;
  margin: 0;
}

.oh-metric-card{
  background: #fff;
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 10px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.oh-metric-label{
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.oh-metric-value{
  font-size: 32px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1;
}

.oh-metric-sub{
  font-size: 12px;
  color: #94a3b8;
  margin-top: 2px;
}

.oh-metric-card.oh-metric-alert .oh-metric-value{
  color: #d97706;
}

.oh-metric-card.oh-metric-today .oh-metric-value{
  color: #0ea5e9;
}

.oh-metric-card.oh-metric-success .oh-metric-value{
  color: #16a34a;
}

.oh-action-card{
  background: #fff;
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 10px;
  overflow: hidden;
}

.oh-action-card-header{
  padding: 14px 18px 10px;
  border-bottom: 1px solid rgba(15,23,42,0.07);
}

.oh-action-card-header h2{
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.oh-action-card-header p{
  font-size: 12px;
  color: #94a3b8;
  margin: 3px 0 0;
}

/* ── Preview Dialog OH ── */
.oh-preview-dialog{
  border: none;
  border-radius: 12px;
  padding: 0;
  width: 90vw;
  max-width: 1000px;
  max-height: 90vh;
  overflow: hidden;
}

.oh-preview-dialog::backdrop{
  background: rgba(15,23,42,0.58);
}

.oh-preview-shell{
  display: flex;
  flex-direction: column;
  height: 90vh;
  background: #fff;
}

.oh-preview-head{
  padding: 16px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.oh-preview-title{
  margin: 0;
  font-size: 16px;
  line-height: 1.35;
  word-break: break-word;
}

.oh-preview-actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.oh-preview-body{
  flex: 1;
  background: #525659;
  overflow: auto;
  position: relative;
  padding: 0;
  min-height: 0;
}

.oh-preview-frame{
  width: 100%;
  height: 100%;
  border: none;
  background: #fff;
}

.oh-preview-image-wrap{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  min-height: 100%;
}

.oh-preview-image{
  max-width: 100%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

@media (max-width: 640px){
  .oh-preview-dialog{
    width: calc(100vw - 12px);
  }

  .oh-preview-shell{
    min-height: 90vh;
    max-height: 94vh;
  }

  .oh-preview-head{
    flex-direction: column;
    align-items: stretch;
  }

  .oh-preview-actions{
    width: 100%;
  }
}


/* =========================================================
   COMPONENTES DE ORÇAMENTOS (ORC)
   Dashboard, KPIs, Sidebar e Funil
========================================================= */

/* ── Dashboard Orçamentos ── */
.orc-dash-hero-actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.orc-dash-kpis{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.orc-dash-kpis-money{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.orc-kpi-card{
  padding: 16px 18px;
}

.orc-kpi-label{
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
}

.orc-kpi-value{
  font-size: 28px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--text);
}

.orc-kpi-value.is-money{
  font-size: 24px;
}

.orc-dash-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.orc-dash-list{
  display: flex;
  flex-direction: column;
}

.orc-dash-list-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
}

.orc-dash-list-row.is-block{
  align-items: flex-start;
}

.orc-dash-list-main{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.orc-dash-list-main.is-block{
  flex: 1 1 auto;
}

.orc-dash-list-main strong{
  color: var(--text);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.orc-dash-list-main span{
  font-size: 13px;
  color: var(--muted);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.orc-dash-list-side{
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--text);
  text-align: right;
}

.orc-dash-list-actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}

.orc-dash-card-footer{
  padding: 14px 18px 18px;
}

.orc-dash-shortcuts{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 18px 18px;
}

@media (max-width: 1279px){
  .orc-dash-kpis{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .orc-dash-kpis-money{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px){
  .orc-dash-kpis,
  .orc-dash-kpis-money,
  .orc-dash-grid{
    grid-template-columns: 1fr;
  }

  .orc-dash-hero-actions,
  .orc-dash-list-actions,
  .orc-dash-shortcuts{
    width: 100%;
  }

  .orc-dash-hero-actions .gi-btn,
  .orc-dash-list-actions .gi-btn,
  .orc-dash-shortcuts .gi-btn{
    width: 100%;
  }

  .orc-dash-list-row{
    flex-direction: column;
    align-items: flex-start;
  }

  .orc-dash-list-side{
    text-align: left;
  }
}

/* ── Sidebar Orçamentos ── */
.orc-sidebar-group{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.orc-sidebar-group-toggle{
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 11px 12px;
  border-radius: 14px;
  background: transparent;
  border: 1px solid transparent;
  color: #0f172a;
  font-size: 14px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.orc-sidebar-group-toggle:hover{
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.06);
}

.orc-sidebar-group-toggle.is-active{
  background: rgba(37, 99, 235, 0.10);
  border-color: rgba(37, 99, 235, 0.18);
  color: #1d4ed8;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.08);
}

.orc-sidebar-group-arrow{
  margin-left: auto;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  transition: transform 0.2s ease;
}

.orc-sidebar-group-toggle[aria-expanded="true"] .orc-sidebar-group-arrow{
  transform: rotate(180deg);
}

.orc-sidebar-sub{
  display: none;
  flex-direction: column;
  gap: 2px;
  padding-left: 14px;
}

.orc-sidebar-sub.is-open{
  display: flex;
}

.orc-sidebar-sub .gi-sidebar-link{
  font-size: 13.5px;
  min-height: 40px;
  padding: 9px 12px;
}

/* ── Ações de Página Orçamentos ── */
.orc-page-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 0 16px;
}

@media (max-width: 767px){
  .orc-page-actions{
    flex-direction: column;
  }

  .orc-page-actions .gi-btn{
    width: 100%;
  }
}

/* =========================================================
   COMPONENTES DE WHATSAPP/MENSAGERIA (WA)
   Wizard, Connect, QR, Templates, Campaigns
========================================================= */

/* ── WhatsApp Manual Wizard ── */
.wa-manual-wizard{
  margin: 16px 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--shadow);
}

.wa-manual-wizard-head h2{
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.2px;
}

.wa-manual-wizard-head p{
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.wa-manual-wizard-track{
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.wa-manual-step{
  position: relative;
  min-width: 0;
}

.wa-manual-step-link{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(15,23,42,0.03);
  color: var(--text);
  text-decoration: none;
}

.wa-manual-step-dot{
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border-radius: 999px;
  border: 2px solid rgba(15,23,42,0.28);
  background: transparent;
  box-sizing: border-box;
}

.wa-manual-step-text{
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wa-manual-step.is-done .wa-manual-step-link{
  border-color: rgba(22,163,74,0.30);
  background: rgba(22,163,74,0.10);
}

.wa-manual-step.is-done .wa-manual-step-dot{
  border-color: var(--brand);
  background: var(--brand);
}

.wa-manual-step.is-current .wa-manual-step-link{
  border-color: rgba(59,130,246,0.35);
  background: rgba(59,130,246,0.10);
  box-shadow: 0 8px 20px rgba(59,130,246,0.10);
}

.wa-manual-step.is-current .wa-manual-step-dot{
  border-color: #2563eb;
  background: #2563eb;
}

@media (min-width: 900px){
  .wa-manual-wizard-track{
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
  }

  .wa-manual-step{
    padding-right: 18px;
  }

  .wa-manual-step:not(:last-child)::after{
    content: "";
    position: absolute;
    top: 21px;
    left: calc(100% - 9px);
    width: 18px;
    height: 2px;
    background: rgba(15,23,42,0.14);
  }

  .wa-manual-step.is-done::after{
    background: rgba(22,163,74,0.45);
  }
}

/* ── WhatsApp Connect Components ── */
.wa-connect-grid,
.wa-connect-status,
.wa-connect-tip{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wa-connect-status-wrap{
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}

.wa-connect-status-pill{
  min-width: 140px;
  justify-content: center;
  text-transform: capitalize;
}

.wa-connect-meta{
  display: grid;
  gap: 14px;
}

.wa-connect-kv{
  text-align: center;
}

.wa-connect-kv .gi-k,
.wa-connect-kv .gi-v{
  width: 100%;
  text-align: center;
}

.wa-connect-kv .gi-v{
  font-weight: 700;
}

.wa-connect-status,
.wa-connect-tip{
  margin-top: 6px;
  text-align: center;
}

@media (min-width: 900px){
  .wa-connect-meta{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
    margin-bottom: 14px;
  }

  .wa-connect-kv{
    min-height: 78px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
  }

  .wa-connect-kv .gi-k{
    margin-bottom: 8px;
  }

  .wa-connect-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
    flex-direction: row;
  }

  .wa-connect-grid .gi-btn{
    width: 100%;
  }
}

/* ── WhatsApp QR Components ── */
.wa-qr-wrap{
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: center;
  flex-direction: column;
}

.wa-qr-box{
  width: min(420px, 92vw);
  max-width: 100%;
  margin: 6px auto 0;
  padding: 14px;
  border-radius: 18px;
  background: #fff;
  box-sizing: border-box;
}

.wa-qr-box img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}

.wa-qr-box.is-empty{
  background: transparent;
  padding: 0;
}

.wa-qr-actions{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}

@media (min-width: 900px){
  .wa-qr-actions{
    align-items: center;
  }

  .wa-qr-actions .gi-btn{
    width: min(420px, 100%);
  }
}

/* ── WhatsApp Template Components ── */
.wa-template-actions{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wa-templates-help,
.wa-template-badges{
  margin-top: 6px;
}

.wa-placeholder-panel{
  margin: 10px 0 12px;
  font-size: 13px;
}

.wa-placeholder-list{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.wa-message-only-vertical{
  resize: vertical;
  min-height: 220px;
  max-width: 100%;
}

.wa-message-help{
  margin-top: 6px;
}

/* ── WhatsApp Campaign Components ── */
.wa-campaign-pagination,
.wa-campaign-detail-actions,
.wa-campaign-filters-row{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wa-campaign-pagination{
  justify-content: space-between;
}

.wa-campaign-filters-row{
  gap: 14px;
}

.wa-campaign-link{
  text-decoration: none;
}

.wa-campaign-row-meta,
.wa-campaign-item-meta,
.wa-campaign-inline,
.wa-campaign-error{
  margin-top: 6px;
}

.wa-campaign-inline{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.wa-campaign-inline form,
.wa-campaign-detail-actions form{
  margin: 0;
}

.wa-campaign-summary-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.wa-campaign-summary-item{
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(15,23,42,0.02);
}

.wa-campaign-summary-item .gi-label{
  margin: 0;
}

.wa-campaign-error-cell{
  max-width: 320px;
  word-break: break-word;
}

.wa-campaign-empty-cell{
  text-align: center;
  color: var(--muted);
}

@media (min-width: 900px){
  .wa-campaign-pagination,
  .wa-campaign-detail-actions,
  .wa-campaign-inline{
    flex-direction: row;
    align-items: center;
  }
}

@media (min-width: 1024px){
  .wa-campaign-summary-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .wa-campaign-summary-item-wide{
    grid-column: span 2;
  }

  .wa-campaign-detail-actions{
    margin-top: 16px;
    justify-content: flex-start;
  }

  .wa-campaign-detail-actions form{
    width: auto;
  }

  .wa-campaign-detail-actions .gi-btn{
    min-width: 220px;
  }
}

/* ── WhatsApp General Components ── */
.wa-config-actions,
.wa-contacts-actions,
.wa-alert-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.wa-summary-text,
.wa-inline-actions{
  margin-top: 6px;
}

.wa-inline-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.wa-checkbox-item{
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.wa-checkbox-item .gi-input{
  width: 20px;
  height: 20px;
  margin-top: 4px;
  flex: 0 0 20px;
}

.wa-send-inline-actions{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: center;
}

.wa-send-inline-actions .gi-btn,
.wa-send-inline-actions .gi-muted{
  justify-self: start;
}

.wa-send-contacts-list{
  display: grid;
  gap: 12px;
  padding-top: 4px;
}

.wa-send-contacts-list .gi-list-item{
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px;
  background: var(--card);
}

.wa-send-contacts-list .wa-checkbox-item{
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  justify-content: start;
  gap: 12px;
}

.wa-send-contacts-list .wa-checkbox-item .gi-input{
  margin: 0;
  align-self: center;
}

.wa-send-contacts-list .gi-list-main{
  min-width: 0;
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
}

.wa-send-contacts-list .gi-list-title{
  width: 100%;
  text-align: left;
}

.wa-send-contacts-list .gi-muted{
  width: 100%;
  text-align: left;
  line-height: 1.45;
  word-break: break-word;
}

@media (min-width: 900px){
  .wa-alert-actions{
    flex-direction: row;
    align-items: center;
  }

  .wa-send-inline-actions{
    grid-template-columns: auto auto 1fr;
    gap: 12px;
  }

  .wa-send-inline-actions .gi-muted{
    justify-self: end;
    text-align: right;
  }

  .wa-send-contacts-list{
    gap: 10px;
  }

  .wa-send-contacts-list .wa-checkbox-item{
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
  }
}

/* =========================================================
   COMPONENTES DE ORÇAMENTOS FUNIL (ORC-FUNIL)
   Board Kanban, Colunas, Cards, Modais
========================================================= */

/* ── Board Wrap e Board ── */
.orc-funil-board-wrap{
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow-x: scroll;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 16px;
  scrollbar-width: auto;
  scrollbar-color: rgba(15, 23, 42, 0.35) rgba(15, 23, 42, 0.08);
}

.orc-funil-board-wrap::-webkit-scrollbar{
  height: 10px;
  display: block;
}

.orc-funil-board-wrap::-webkit-scrollbar-track{
  background: rgba(15, 23, 42, 0.08);
  border-radius: 8px;
}

.orc-funil-board-wrap::-webkit-scrollbar-thumb{
  background: rgba(15, 23, 42, 0.35);
  border-radius: 8px;
  border: 2px solid rgba(15, 23, 42, 0.08);
}

.orc-funil-board-wrap::-webkit-scrollbar-thumb:hover{
  background: rgba(15, 23, 42, 0.50);
}

.orc-funil-board{
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  padding: 18px;
  align-items: flex-start;
  scroll-snap-type: x proximity;
  width: max-content;
  min-width: 100%;
  min-height: 100%;
  box-sizing: border-box;
}

/* ── Colunas do Funil ── */
.orc-funil-column{
  flex: 0 0 288px;
  width: 288px;
  min-width: 288px;
  max-width: 288px;
  scroll-snap-align: start;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 12px;
  background: #fff;
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 280px);
  min-height: 320px;
}

.orc-funil-column-head{
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
  min-width: 0;
}

.orc-funil-column-head h2{
  font-size: 14px;
  margin: 0;
  color: #0f172a;
  font-weight: 700;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.orc-stage-dot{
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 10px;
}

.orc-col-subtotal{
  padding: 6px 14px 8px;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  flex-shrink: 0;
}

.orc-funil-column-body{
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 160px;
  position: relative;
  transition: background 0.12s ease;
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 23, 42, 0.12) transparent;
}

.orc-funil-column-body::-webkit-scrollbar{
  width: 6px;
}

.orc-funil-column-body::-webkit-scrollbar-track{
  background: transparent;
}

.orc-funil-column-body::-webkit-scrollbar-thumb{
  background: rgba(15, 23, 42, 0.15);
  border-radius: 999px;
}

.orc-funil-column-body.is-drag-over{
  background: rgba(22, 163, 74, 0.04);
  outline: 2px dashed rgba(22, 163, 74, 0.24);
  outline-offset: -6px;
  border-radius: 12px;
}

.orc-funil-empty-state{
  border: 1px dashed rgba(148, 163, 184, 0.45);
  border-radius: 12px;
  padding: 16px;
  color: #64748b;
  background: rgba(15, 23, 42, 0.02);
  font-size: 13px;
  text-align: center;
}

/* ── Cards do Funil ── */
.orc-funil-card{
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 12px;
  background: #fff;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
  flex-shrink: 0;
  min-height: 148px;
  max-height: 300px;
  overflow: hidden;
  min-width: 0;
}

.orc-funil-card[draggable="true"]{
  cursor: grab;
}

.orc-funil-card[draggable="true"]:active{
  cursor: grabbing;
}

.orc-funil-card.is-dragging{
  opacity: 0.72;
  transform: rotate(1deg);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16);
  border-color: rgba(22, 163, 74, 0.45);
}

.orc-funil-card-head{
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  min-width: 0;
}

.orc-funil-card-title-row{
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

.orc-funil-id-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 20px;
  padding: 0 6px;
  border-radius: 6px;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.16);
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
  white-space: nowrap;
}

.orc-funil-id-badge-lg{
  min-width: 36px;
  height: 24px;
  font-size: 13px;
  padding: 0 8px;
}

.orc-funil-card-title{
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.orc-funil-edit-btn{
  flex-shrink: 0;
  margin-left: auto;
  min-width: 30px;
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.orc-funil-edit-btn svg{
  display: block;
}

.orc-funil-card-meta{
  display: grid;
  gap: 4px;
  font-size: 12px;
  color: #475569;
  flex-shrink: 0;
  min-width: 0;
}

.orc-funil-card-meta strong{
  color: #334155;
  font-weight: 600;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.orc-funil-card-desc{
  font-size: 13px;
  line-height: 1.5;
  color: #334155;
  overflow-wrap: anywhere;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Rodapé do Card - Indicadores ── */
.orc-funil-card-actions{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding-top: 2px;
  flex-shrink: 0;
  margin-top: auto;
  flex-wrap: wrap;
}

.orc-funil-card-indicators{
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

.orc-funil-indicator{
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: #f8fafc;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: default;
}

.orc-funil-indicator svg{
  display: block;
  flex-shrink: 0;
}

.orc-funil-indicator-count{
  font-variant-numeric: tabular-nums;
}

.orc-funil-indicator-progress{
  color: #6d28d9;
  border-color: rgba(109, 40, 217, 0.22);
  background: rgba(109, 40, 217, 0.05);
}

.orc-funil-indicator-activity{
  color: #16a34a;
  border-color: rgba(22, 163, 74, 0.22);
  background: rgba(22, 163, 74, 0.05);
}

.orc-funil-indicator-date{
  color: #0369a1;
  border-color: rgba(3, 105, 161, 0.22);
  background: rgba(3, 105, 161, 0.05);
}

.orc-funil-indicator-danger{
  color: #b91c1c;
  border-color: rgba(185, 28, 28, 0.22);
  background: rgba(185, 28, 28, 0.05);
}

.orc-funil-indicator-proposals{
  color: #b45309;
  border-color: rgba(180, 83, 9, 0.22);
  background: rgba(180, 83, 9, 0.05);
}

.orc-funil-placeholder{
  height: 60px;
  border: 2px dashed rgba(99, 102, 241, 0.4);
  border-radius: 10px;
  background: rgba(99, 102, 241, 0.05);
  flex-shrink: 0;
}

/* ── Modais do Funil ── */
.orc-funil-modal{
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 16px;
  padding: 0;
  background: #fff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18), 0 8px 24px rgba(15, 23, 42, 0.10);
  overflow: hidden;
  z-index: 9000;
}

.orc-funil-modal[open]{
  display: flex;
  flex-direction: column;
}

.orc-funil-modal:not([open]){
  display: none;
}

.orc-funil-modal::backdrop{
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.orc-funil-modal-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  flex-shrink: 0;
  background: #fff;
}

.orc-funil-modal-head h3{
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 4px;
  line-height: 1.3;
}

.orc-funil-modal-head p{
  font-size: 13px;
  color: #94a3b8;
  margin: 0;
  line-height: 1.4;
}

.orc-funil-modal-title-row{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.orc-funil-modal-title-row h3{
  margin: 0;
}

.orc-funil-modal-body{
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 23, 42, 0.14) transparent;
}

.orc-funil-modal-body::-webkit-scrollbar{
  width: 5px;
}

.orc-funil-modal-body::-webkit-scrollbar-track{
  background: transparent;
}

.orc-funil-modal-body::-webkit-scrollbar-thumb{
  background: rgba(15, 23, 42, 0.14);
  border-radius: 4px;
}

.orc-funil-modal-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  align-items: end;
}

.orc-funil-modal-span{
  grid-column: 1 / -1;
}

.orc-funil-modal-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 4px;
}

/* ── Seções do Modal ── */
.orc-funil-modal-section{
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 12px;
  background: #fafbfd;
  overflow: hidden;
  grid-column: 1 / -1;
}

.orc-funil-modal-section-head{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  background: rgba(15, 23, 42, 0.03);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.orc-funil-modal-section-head-text{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.orc-funil-modal-section-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.orc-funil-modal-section-dot-contato  { background: #3b82f6; }
.orc-funil-modal-section-dot-op       { background: #8b5cf6; }
.orc-funil-modal-section-dot-proposta { background: #f59e0b; }
.orc-funil-modal-section-dot-perda    { background: #ef4444; }

.orc-funil-collapsible-head{
  user-select: none;
  cursor: pointer;
}

.orc-funil-collapsible-head:hover{
  background: rgba(0, 0, 0, 0.02);
  border-radius: 8px;
}

.orc-funil-modal-section-head h3{
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  line-height: 1.3;
}

.orc-funil-modal-section-head p{
  font-size: 12px;
  color: #94a3b8;
  margin: 0;
  line-height: 1.3;
}

.orc-funil-modal-section-body{
  padding: 14px 16px 16px;
}

.orc-funil-modal-section-body .orc-funil-modal-grid{
  gap: 12px 14px;
}

.orc-funil-collapsible-head-text{
  flex: 1;
}

.orc-funil-collapsible-badge{
  font-size: 11px;
  margin-left: 6px;
}

.orc-funil-collapsible-chevron{
  flex-shrink: 0;
  transition: transform 0.2s;
}

.orc-funil-collapsible-chevron.is-open{
  transform: rotate(180deg);
}

.orc-funil-modal-actions-row{
  margin-top: 16px;
}

.orc-funil-items-section-head{
  padding: 0 0 12px;
  border: 0;
}

/* ── Propostas no Modal ── */
.orc-funil-propostas-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px 16px;
}

.orc-funil-propostas-empty{
  padding: 8px 0;
}

.orc-funil-proposta-row{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.orc-funil-proposta-row.is-active-proposta{
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.02);
}

.orc-funil-proposta-row-info{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.orc-funil-proposta-num{
  font-weight: 700;
  font-size: 13px;
  color: #0f172a;
}

.orc-funil-proposta-title{
  font-size: 13px;
  color: #475569;
  flex: 1;
  min-width: 0;
}

.orc-funil-proposta-pill{
  font-size: 11px;
}

.orc-funil-proposta-row-meta{
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: #64748b;
}

.orc-funil-proposta-row-actions{
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.orc-funil-select-proposal-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.orc-funil-select-proposal-item{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.orc-funil-select-proposal-item:hover{
  border-color: #cbd5e1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.orc-funil-select-proposal-item.is-active-proposta{
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.02);
}

.orc-funil-select-proposal-radio{
  margin-top: 2px;
  flex-shrink: 0;
}

.orc-funil-select-proposal-info{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
}

/* ── Modal de Preview de Proposta ── */
.orc-funil-proposta-preview-dialog{
  padding: 0;
  border: none;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.22);
  width: min(900px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: auto;
}

.orc-funil-proposta-preview-dialog:not([open]){
  display: none;
}

.orc-funil-proposta-preview-dialog::backdrop{
  background: rgba(15, 23, 42, 0.48);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.orc-funil-proposta-preview-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.1);
  background: #fff;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.orc-funil-proposta-preview-title{
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #0f172a);
  min-width: 0;
  flex: 1 1 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.orc-funil-proposta-preview-actions{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* ── Banner de Oportunidade Vinculada ── */
.orc-op-banner{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(37, 99, 235, 0.06);
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 10px;
  margin: 0 0 16px;
  font-size: 13px;
}

.orc-op-banner-label   { font-weight: 700; color: #1d4ed8; }
.orc-op-banner-title   { font-weight: 600; color: #0f172a; }
.orc-op-banner-sep     { color: #94a3b8; }
.orc-op-banner-contato { color: #475569; }

/* ── Responsividade do Funil ── */
@media (max-width: 767px){
  .orc-funil-column{
    flex: 0 0 calc(100vw - 52px);
    width: calc(100vw - 52px);
    min-width: calc(100vw - 52px);
    max-width: calc(100vw - 52px);
    max-height: calc(100dvh - 320px);
  }
}

/* =========================================================
   COMPONENTES DE WORKSPACE KANBAN (WS-KANBAN)
   Board Kanban, Colunas, Cards, Indicadores
========================================================= */

/* ── Toolbar ── */
.ws-kanban-toolbar{
  padding: 0 18px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.ws-kanban-toolbar-actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Board Wrap e Board ── */
.ws-kanban-board-wrap{
  position: relative;
  overflow: hidden;
}

.ws-kanban-scroll-hint{
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  z-index: 10;
  pointer-events: none;
  opacity: 1;
  transition: opacity .35s ease;
}

.ws-kanban-scroll-hint.is-hidden{
  opacity: 0;
}

.ws-kanban-scroll-hint-inner{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(22,163,74,0.92);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(22,163,74,0.30);
  white-space: nowrap;
  animation: ws-hint-pulse 2.4s ease-in-out infinite;
}

@keyframes ws-hint-pulse{
  0%, 100% { transform: translateX(0);   opacity: 1;    }
  50%       { transform: translateX(5px); opacity: 0.80; }
}

.ws-kanban-board{
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 16px !important;
  padding: 18px;
  overflow-x: auto !important;
  overflow-y: visible;
  align-items: flex-start;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(15,23,42,0.18) transparent;
}

.ws-kanban-board::-webkit-scrollbar{
  height: 6px;
}

.ws-kanban-board::-webkit-scrollbar-track{
  background: transparent;
}

.ws-kanban-board::-webkit-scrollbar-thumb{
  background: rgba(15,23,42,0.20);
  border-radius: 4px;
}

/* ── Colunas do Kanban ── */
.ws-kanban-column{
  flex: 0 0 288px !important;
  min-width: 288px !important;
  max-width: 288px !important;
  scroll-snap-align: start;
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 12px;
  background: #fff;
  display: flex !important;
  flex-direction: column !important;
  max-height: calc(100vh - 280px);
  min-height: 320px;
}

.ws-kanban-column-head{
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(15,23,42,0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
}

.ws-kanban-column-head h2{
  font-size: 14px;
  margin: 0;
  color: #0f172a;
}

.ws-kanban-column-body{
  flex: 1 1 auto;
  overflow-y: auto !important;
  overflow-x: hidden;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 160px;
  position: relative;
  transition: background .12s ease, outline-color .12s ease;
  scrollbar-width: thin;
  scrollbar-color: rgba(15,23,42,0.12) transparent;
}

.ws-kanban-column-body::-webkit-scrollbar{
  width: 4px;
}

.ws-kanban-column-body::-webkit-scrollbar-track{
  background: transparent;
}

.ws-kanban-column-body::-webkit-scrollbar-thumb{
  background: rgba(15,23,42,0.15);
  border-radius: 4px;
}

.ws-kanban-column-body.is-drag-over{
  background: rgba(22,163,74,0.04);
  outline: 2px dashed rgba(22,163,74,0.24);
  outline-offset: -6px;
  border-radius: 12px;
}

/* ── Cards do Kanban ── */
.ws-kanban-card{
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 12px;
  background: #fff;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 6px 18px rgba(15,23,42,0.05);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, opacity .12s ease;
  flex-shrink: 0;
  min-height: 148px;
  max-height: 300px;
  overflow: hidden;
}

.ws-kanban-card[draggable="true"]{
  cursor: grab;
}

.ws-kanban-card[draggable="true"]:active{
  cursor: grabbing;
}

.ws-kanban-card.is-dragging{
  opacity: .72;
  transform: rotate(1deg);
  box-shadow: 0 16px 34px rgba(15,23,42,0.16);
  border-color: rgba(22,163,74,0.45);
}

.ws-kanban-card-head{
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

.ws-kanban-card-title-row{
  display: flex;
  align-items: flex-start;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}

.ws-kanban-card-title{
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ws-kanban-card-title-clamped{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ws-kanban-card-meta{
  display: grid;
  gap: 4px;
  font-size: 12px;
  color: #475569;
  flex-shrink: 0;
}

.ws-kanban-card-desc{
  font-size: 13px;
  line-height: 1.5;
  color: #334155;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ws-kanban-card-desc-clamped{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Ações e Indicadores do Card ── */
.ws-kanban-card-actions{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding-top: 2px;
  flex-shrink: 0;
  margin-top: auto;
  flex-wrap: wrap;
}

.ws-kanban-card-indicators{
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

.ws-kc-indicator{
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.35);
  background: #f8fafc;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: default;
}

.ws-kc-indicator svg{
  display: block;
  flex-shrink: 0;
}

.ws-kc-indicator-count{
  font-variant-numeric: tabular-nums;
}

.ws-kc-indicator-files{
  color: #0369a1;
  border-color: rgba(3,105,161,0.22);
  background: rgba(3,105,161,0.05);
}

.ws-kc-indicator-updates{
  color: #6d28d9;
  border-color: rgba(109,40,217,0.22);
  background: rgba(109,40,217,0.05);
}

.ws-kc-indicator-checklist{
  color: #16a34a;
  border-color: rgba(22,163,74,0.22);
  background: rgba(22,163,74,0.05);
}

/* ── Botões ── */
.ws-kc-edit-btn{
  flex-shrink: 0;
  margin-left: auto;
  min-width: 30px;
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.ws-kc-edit-btn svg{
  display: block;
}

.ws-icon-btn-edit{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  width: 34px;
  height: 34px;
  padding: 0;
  line-height: 1;
  border-radius: 10px;
}

.ws-icon-btn-edit svg{
  display: block;
  width: 15px;
  height: 15px;
}

/* ── Outros ── */
.ws-kanban-drag-pill{
  flex-shrink: 0;
}

.ws-inline-form{
  display: inline-flex;
}

.ws-empty-state{
  border: 1px dashed rgba(148,163,184,.45);
  border-radius: 12px;
  padding: 16px;
  color: #64748b;
  background: rgba(15,23,42,.02);
  font-size: 14px;
}

.ws-empty-state-kanban{
  width: 100%;
}

/* ── Checklist no Modal ── */
.ws-modal-checklist-add-form{
  margin-bottom: 14px;
}

.ws-modal-checklist-add-row{
  display: flex;
  gap: 8px;
  align-items: center;
}

.ws-modal-checklist-add-row .gi-input{
  flex: 1 1 auto;
  min-width: 0;
}

.ws-modal-checklists-list{
  display: grid;
  gap: 16px;
}

.ws-kanban-checklist-inline{
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 12px;
  background: #fafafa;
  overflow: hidden;
  display: grid;
  gap: 0;
}

.ws-kanban-checklist-inline-header{
  padding: 10px 14px 6px;
  border-bottom: 1px solid rgba(15,23,42,0.06);
}

.ws-kanban-checklist-inline .ws-modal-checklist-add-form{
  padding: 10px 14px 0;
  margin-bottom: 0;
}

.ws-kanban-checklist-inline .ws-modal-checklists-list{
  padding: 0 14px 10px;
}

/* ── Responsividade ── */
@media (min-width: 1024px) and (max-width: 1279px){
  .ws-kanban-column{
    flex: 0 0 260px;
    min-width: 260px;
    max-width: 260px;
  }
}

@media (min-width: 768px) and (max-width: 1023px){
  .ws-kanban-column{
    flex: 0 0 248px;
    min-width: 248px;
    max-width: 248px;
  }
}

/* ── Mobile (< 768px) ── */
@media (max-width: 767px){
  /* Board: padding menor, colunas quase full-width */
  .ws-kanban-board{
    padding: 10px !important;
    gap: 10px !important;
  }

  .ws-kanban-column{
    flex: 0 0 calc(100vw - 48px) !important;
    min-width: calc(100vw - 48px) !important;
    max-width: calc(100vw - 48px) !important;
    max-height: calc(100vh - 300px);
  }

  /* Cards: altura máxima maior, mais espaço para ler */
  .ws-kanban-card{
    max-height: none;
    min-height: auto;
  }

  /* Botão de editar: área de toque maior */
  .ws-kc-edit-btn{
    min-width: 36px !important;
    width: 36px !important;
    height: 36px !important;
  }

  /* Indicadores: um pouco maiores */
  .ws-kc-indicator{
    padding: 4px 8px;
    font-size: 12px;
  }

  /* Toolbar: empilhar em mobile */
  .ws-kanban-toolbar{
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .ws-kanban-toolbar-actions{
    flex-wrap: wrap;
    gap: 6px;
  }

  .ws-kanban-toolbar-actions .gi-btn{
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* =========================================================
   COMPONENTES DE WORKSPACE ESTRUTURAS (WS-STRUCTURE)
   Editor, Preview, Builder, Phases, Nodes, Links
========================================================= */

/* ── Shell e Layout ── */
.ws-structure-shell{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 18px;
  align-items: start;
}

.ws-structure-editor-card,
.ws-structure-preview-card{
  width: 100%;
}

.ws-structure-editor-body,
.ws-structure-preview-body{
  padding: 16px;
  display: grid;
  gap: 16px;
}

/* ── Toolbar ── */
.ws-structure-toolbar{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── Sections ── */
.ws-structure-section{
  display: grid;
  gap: 12px;
}

.ws-structure-section h3{
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
}

.ws-structure-section-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── Grids ── */
.ws-structure-grid-2,
.ws-structure-grid-3{
  display: grid;
  gap: 12px;
}

.ws-structure-grid-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ws-structure-grid-3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ── JSON Editor ── */
.ws-structure-json{
  min-height: 320px;
}

.ws-structure-json-help{
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.45;
}

/* ── Builder ── */
.ws-builder-list{
  display: grid;
  gap: 12px;
}

.ws-builder-card{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 14px;
  padding: 14px;
  background: rgba(15,23,42,.02);
  display: grid;
  gap: 12px;
}

.ws-builder-card-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── Preview Root ── */
.ws-preview-root{
  display: grid;
  gap: 16px;
}

.ws-preview-section{
  display: grid;
  gap: 12px;
}

.ws-preview-section-head{
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ── Preview Project Card ── */
.ws-preview-project-card{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  padding: 16px;
  background: linear-gradient(180deg, rgba(22,163,74,.08) 0%, rgba(22,163,74,.03) 100%);
}

.ws-preview-project-title{
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.25;
}

.ws-preview-project-summary{
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.55;
  color: #475569;
}

/* ── Preview Phases ── */
.ws-preview-phases{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.ws-preview-phase-card{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 14px;
  padding: 14px;
  background: #fff;
  display: grid;
  gap: 8px;
}

.ws-preview-phase-card.is-planned{
  border-color: rgba(59,130,246,.22);
}

.ws-preview-phase-card.is-progress{
  border-color: rgba(245,158,11,.28);
  background: rgba(245,158,11,.05);
}

.ws-preview-phase-card.is-done{
  border-color: rgba(34,197,94,.28);
  background: rgba(34,197,94,.06);
}

.ws-preview-phase-title{
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
}

.ws-preview-phase-meta{
  font-size: 12px;
  color: #64748b;
}

.ws-preview-phase-desc{
  font-size: 13px;
  line-height: 1.5;
  color: #475569;
}

/* ── Preview Flow ── */
.ws-preview-flow{
  display: grid;
  gap: 12px;
  overflow-x: auto;
}

.ws-preview-flow-col{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 14px;
  padding: 12px;
  background: rgba(15,23,42,.02);
  display: grid;
  gap: 12px;
  min-width: 0;
}

.ws-preview-flow-col-head{
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ── Preview Node ── */
.ws-preview-node-card{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 14px;
  padding: 12px;
  background: #fff;
  display: grid;
  gap: 10px;
  box-shadow: 0 6px 18px rgba(15,23,42,.05);
}

.ws-preview-node-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.ws-preview-node-title{
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.35;
}

.ws-preview-node-meta{
  display: grid;
  gap: 4px;
  font-size: 12px;
  color: #64748b;
}

.ws-preview-node-desc{
  font-size: 13px;
  line-height: 1.5;
  color: #475569;
}

.ws-preview-node-links{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  color: #475569;
}

/* ── Link Chips ── */
.ws-link-chip{
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(59,130,246,.08);
  border: 1px solid rgba(59,130,246,.14);
  color: #1e3a8a;
}

.ws-link-chip.is-empty{
  background: rgba(15,23,42,.04);
  border-color: rgba(15,23,42,.10);
  color: #64748b;
}

/* ── Preview Links ── */
.ws-preview-links-list{
  display: grid;
  gap: 8px;
}

.ws-preview-link-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 12px;
  padding: 10px 12px;
  background: #fff;
  font-size: 13px;
  color: #334155;
}

/* ── Responsividade ── */
@media (max-width: 1279px){
  .ws-structure-shell{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px){
  .ws-structure-grid-2,
  .ws-structure-grid-3,
  .ws-preview-link-row{
    grid-template-columns: 1fr;
  }

  .ws-structure-toolbar{
    display: grid;
    grid-template-columns: 1fr;
  }

  .ws-structure-toolbar .gi-btn{
    width: 100%;
  }

  .ws-structure-json{
    min-height: 260px;
  }
}

/* =========================================================
   COMPONENTES DE WORKSPACE FILE VIEWER (WS-FILE-VIEWER)
   Modal de visualização de arquivos (PDF, imagens, vídeos, áudio)
========================================================= */

/*
   IMPORTANTE: nunca use display:flex/grid diretamente no <dialog>.
   O browser usa display:none internamente para ocultar o dialog.
   Usamos um wrapper interno para o layout.
*/
.ws-file-viewer-modal{
  width: min(1200px, calc(100vw - 24px));
  max-width: 1200px;
  height: min(92dvh, 980px);
  max-height: 92dvh;
  border: 0;
  border-radius: 18px;
  padding: 0;
  background: transparent;
  color: var(--text, #0f172a);
}

.ws-file-viewer-modal::backdrop{
  background: rgba(15,23,42,0.62);
}

.ws-file-viewer-inner{
  display: grid;
  grid-template-rows: auto minmax(0,1fr) auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: var(--card, #fff);
  border: 1px solid var(--border, rgba(15,23,42,0.12));
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(15,23,42,0.22);
  overflow: hidden;
}

.ws-file-viewer-head,
.ws-file-viewer-foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  flex-wrap: wrap;
  background: var(--card, #fff);
}

.ws-file-viewer-head{
  border-bottom: 1px solid var(--border, rgba(15,23,42,0.08));
}

.ws-file-viewer-foot{
  border-top: 1px solid var(--border, rgba(15,23,42,0.08));
}

.ws-file-viewer-title{
  min-width: 0;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
  word-break: break-word;
}

.ws-file-viewer-body{
  min-height: 0;
  padding: 16px;
  overflow: auto;
  display: grid;
  place-items: center;
  background: rgba(15,23,42,0.03);
}

.ws-file-viewer-body.is-pdf{
  padding: 0;
  overflow: hidden;
  place-items: stretch;
  background: rgba(15,23,42,0.06);
}

.ws-file-viewer-img,
.ws-file-viewer-video{
  display: block;
  width: auto;
  max-width: 100%;
  max-height: calc(92dvh - 170px);
  object-fit: contain;
  margin: 0 auto;
}

.ws-file-viewer-video{
  border-radius: 4px;
  background: #000;
}

.ws-file-viewer-frame{
  display: block;
  width: 100%;
  min-height: 420px;
  height: calc(92dvh - 170px);
  border: 0;
  background: #fff;
}

.ws-file-viewer-frame-pdf{
  min-height: 560px;
}

.ws-file-viewer-audio-wrap{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  width: min(100%, 720px);
}

.ws-file-viewer-audio{
  width: 100%;
  max-width: 480px;
}

.ws-file-viewer-unsupported{
  width: min(100%, 720px);
  text-align: center;
  display: grid;
  gap: 10px;
  padding: 40px 24px;
  color: #475569;
}

.ws-file-viewer-unsupported-icon{
  font-size: 40px;
  line-height: 1;
}

/* ── Responsividade ── */
@media (max-width: 767px){
  .ws-file-viewer-modal{
    width: calc(100vw - 12px);
    max-width: calc(100vw - 12px) !important;
    height: calc(96dvh - 8px);
    max-height: calc(96dvh - 8px);
    border-radius: 14px;
    margin: 4px auto;
  }

  .ws-file-viewer-inner{
    border-radius: 14px;
    grid-template-rows: auto minmax(0,1fr) auto;
  }

  /* Header: nome em cima, botões abaixo */
  .ws-file-viewer-head{
    flex-direction: column;
    align-items: stretch;
    padding: 10px 12px;
    gap: 8px;
  }

  .ws-file-viewer-title{
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
  }

  /* Botões do header: lado a lado, mesma largura */
  .ws-file-viewer-head .ws-file-preview-actions{
    display: flex;
    gap: 8px;
    width: 100%;
  }

  .ws-file-viewer-head .ws-file-preview-actions .gi-btn,
  .ws-file-viewer-head .gi-btn{
    flex: 1 1 0%;
    min-width: 0;
    width: auto;
    text-align: center;
  }

  /* Footer: botões lado a lado, mesmo tamanho */
  .ws-file-viewer-foot{
    flex-direction: row;
    padding: 10px 12px;
    gap: 8px;
    align-items: stretch;
  }

  .ws-file-viewer-foot .gi-btn{
    flex: 1 1 0%;
    min-width: 0;
    width: auto;
    height: auto;
    white-space: normal;
    text-align: center;
    line-height: 1.3;
    padding: 10px 8px;
  }

  .ws-file-viewer-body{
    padding: 8px;
  }

  .ws-file-viewer-frame,
  .ws-file-viewer-frame-pdf{
    min-height: unset;
    height: calc(96dvh - 180px);
    width: 100%;
  }

  .ws-file-viewer-img,
  .ws-file-viewer-video{
    max-height: calc(96dvh - 180px);
    max-width: 100%;
  }
}

/* =========================================================
   WORKSPACE — ACTIVITY & FILES COMPONENTS
   Componentes reutilizáveis para atividades, arquivos e dashboard
========================================================= */

/* ─────────────────────────────────────────────────────────
   ACTIVITY ID BADGES
───────────────────────────────────────────────────────── */
.ws-activity-id-badge{
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(37,99,235,0.10);
  border: 1px solid rgba(37,99,235,0.18);
  color: #1e3a8a;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .03em;
  white-space: nowrap;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.ws-activity-id-badge-lg{
  font-size: 13px;
  padding: 3px 10px;
}

.ws-activity-id-badge-sm{
  font-size: 10px;
  padding: 1px 6px;
}

/* ─────────────────────────────────────────────────────────
   FILE UPLOAD & PASTE ZONE
───────────────────────────────────────────────────────── */
.ws-file-input-hidden{
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  pointer-events: none;
}

.ws-files-paste-zone{
  margin: 0 18px 14px;
  border: 2px dashed rgba(22,163,74,0.35);
  border-radius: 14px;
  padding: 20px 16px;
  background: rgba(22,163,74,0.03);
  cursor: pointer;
  transition: border-color .18s, background .18s;
  outline: none;
}

.ws-files-paste-zone:hover,
.ws-files-paste-zone:focus{
  border-color: rgba(22,163,74,0.60);
  background: rgba(22,163,74,0.06);
}

.ws-files-paste-zone.is-drag-over{
  border-color: #16a34a;
  background: rgba(22,163,74,0.10);
}

.ws-files-paste-zone-compact{
  margin: 12px 16px 10px;
  padding: 12px 14px;
}

.ws-files-paste-zone-inner{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  text-align: center;
}

.ws-files-paste-icon{
  font-size: 22px;
  flex-shrink: 0;
}

.ws-files-paste-zone-compact .ws-files-paste-icon{
  font-size: 18px;
}

.ws-files-paste-text{
  font-size: 14px;
  color: #475569;
  line-height: 1.45;
}

.ws-files-paste-zone-compact .ws-files-paste-text{
  font-size: 13px;
}

.ws-files-paste-label-link{
  color: #16a34a;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Upload feedback ── */
.ws-files-feedback{
  margin: 0 18px 10px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
}

.ws-files-feedback-ok{
  background: rgba(34,197,94,0.12);
  border: 1px solid rgba(34,197,94,0.28);
  color: #15803d;
}

.ws-files-feedback-error{
  background: rgba(239,68,68,0.10);
  border: 1px solid rgba(239,68,68,0.28);
  color: #b91c1c;
}

.ws-files-upload-btn{
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────
   FILE GRID & CARDS
───────────────────────────────────────────────────────── */
.ws-files-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  padding: 0 18px 18px;
}

.ws-files-grid-compact{
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  padding: 0 14px 14px;
}

.ws-files-empty{
  grid-column: 1 / -1;
}

.ws-file-card{
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(15,23,42,0.06);
  transition: box-shadow .18s, border-color .18s;
}

.ws-file-card:hover{
  box-shadow: 0 8px 22px rgba(15,23,42,0.12);
  border-color: rgba(22,163,74,0.28);
}

.ws-file-card-sm{
  border-radius: 10px;
}

.ws-file-card-preview{
  height: 100px;
  background: rgba(15,23,42,0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(15,23,42,0.07);
}

.ws-file-card-sm .ws-file-card-preview{
  height: 72px;
}

.ws-file-card-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ws-file-card-icon{
  font-size: 36px;
  line-height: 1;
}

.ws-file-card-sm .ws-file-card-icon{
  font-size: 28px;
}

.ws-file-card-body{
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
}

.ws-file-card-name{
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}

.ws-file-card-meta{
  font-size: 11px;
  color: #64748b;
  line-height: 1.35;
}

.ws-file-card-actions{
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
  justify-content: center;
}

/* ─────────────────────────────────────────────────────────
   ACTIVITY PANELS (EXPANDABLE)
───────────────────────────────────────────────────────── */
.ws-project-row-has-acts{
  cursor: default;
}

.ws-expand-chevron{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 6px;
  background: rgba(15,23,42,0.06);
  color: var(--muted);
  margin-top: 2px;
  transition: transform 0.2s ease, background 0.15s ease;
  flex-shrink: 0;
}

.ws-project-row.is-expanded .ws-expand-chevron{
  transform: rotate(180deg);
  background: rgba(37,99,235,0.10);
  color: #1d4ed8;
}

.ws-acts-btn-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(15,23,42,0.12);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  margin-left: 4px;
}

.ws-project-row.is-expanded .ws-acts-btn-badge{
  background: rgba(37,99,235,0.15);
  color: #1d4ed8;
}

.ws-acts-panel-row > td{
  padding: 0 !important;
  border-top: none !important;
}

.ws-acts-panel-cell{
  padding: 0 !important;
}

.ws-acts-panel{
  padding: 16px 20px 20px;
  background: rgba(37,99,235,0.03);
  border-top: 2px solid rgba(37,99,235,0.12);
  border-bottom: 1px solid var(--border);
}

.ws-acts-panel-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.ws-acts-panel-title-wrap{
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--muted);
}

.ws-acts-panel-title-wrap svg{
  flex-shrink: 0;
  opacity: 0.7;
}

.ws-acts-panel-title-wrap strong{
  color: var(--text);
}

.ws-acts-panel-btns{
  display: flex;
  align-items: center;
  gap: 8px;
}

.ws-acts-inner-table{
  font-size: 13px;
  background: var(--card);
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--border);
}

.ws-acts-inner-table th{
  font-size: 11px;
  padding: 8px 10px;
  background: rgba(15,23,42,0.04);
}

.ws-acts-inner-table td{
  padding: 8px 10px;
}

.ws-acts-inner-table tbody tr:hover{
  background: rgba(37,99,235,0.04);
}

.ws-acts-empty-msg{
  font-size: 13px;
  padding: 8px 0;
}

.ws-mob-acts-panel{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ws-mob-acts-panel[hidden]{
  display: none !important;
}

.ws-mob-acts-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ws-mob-acts-title{
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ws-mob-act-item{
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ws-mob-act-top{
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ws-mob-act-item .gi-title{
  font-size: 13px;
}

.ws-mob-act-item .gi-sub{
  font-size: 12px;
}

.ws-mob-act-item .gi-btn{
  align-self: flex-start;
  margin-top: 4px;
}

/* ─────────────────────────────────────────────────────────
   DASHBOARD COMPONENTS
───────────────────────────────────────────────────────── */
.ws-dash-header{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.ws-dash-header h1{
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--text);
}

.ws-dash-header p{
  font-size: 14px;
  color: var(--muted);
  margin-top: 3px;
}

.ws-dash-header-actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ws-dash-metrics{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.ws-metric-card{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--text);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ws-metric-card-link:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(2,6,23,0.10);
}

.ws-metric-card-alert{
  border: 1.5px solid rgba(239,68,68,0.30);
  background: rgba(239,68,68,0.04);
}

.ws-metric-card-muted{
  cursor: default;
}

.ws-metric-icon{
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ws-metric-icon svg{
  width: 20px;
  height: 20px;
}

.ws-metric-icon-blue   { background: rgba(37,99,235,0.12);  color: #2563eb; }
.ws-metric-icon-orange { background: rgba(234,88,12,0.12);  color: #ea580c; }
.ws-metric-icon-red    { background: rgba(239,68,68,0.12);  color: #ef4444; }
.ws-metric-icon-purple { background: rgba(124,58,237,0.12); color: #7c3aed; }
.ws-metric-icon-green  { background: rgba(22,163,74,0.12);  color: #16a34a; }
.ws-metric-icon-teal   { background: rgba(13,148,136,0.12); color: #0d9488; }

.ws-metric-body{
  min-width: 0;
}

.ws-metric-value{
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--text);
  letter-spacing: -0.5px;
}

.ws-metric-label{
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.3;
}

.ws-dash-nav-grid{
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 20px;
}

.ws-nav-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 12px 8px 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--text);
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  text-align: center;
}

.ws-nav-card:hover{
  transform: translateY(-2px);
  background: rgba(37,99,235,0.04);
  border-color: rgba(37,99,235,0.18);
  box-shadow: 0 4px 12px rgba(37,99,235,0.08);
}

.ws-nav-card-icon{
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ws-nav-card-icon svg{
  width: 18px;
  height: 18px;
}

.ws-nav-icon-blue   { background: rgba(37,99,235,0.10);  color: #2563eb; }
.ws-nav-icon-indigo { background: rgba(79,70,229,0.10);  color: #4f46e5; }
.ws-nav-icon-orange { background: rgba(234,88,12,0.10);  color: #ea580c; }
.ws-nav-icon-teal   { background: rgba(13,148,136,0.10); color: #0d9488; }
.ws-nav-icon-purple { background: rgba(124,58,237,0.10); color: #7c3aed; }
.ws-nav-icon-green  { background: rgba(22,163,74,0.10);  color: #16a34a; }
.ws-nav-icon-gray   { background: rgba(15,23,42,0.08);   color: #475569; }
.ws-nav-icon-pink   { background: rgba(219,39,119,0.10); color: #db2777; }
.ws-nav-icon-slate  { background: rgba(71,85,105,0.10);  color: #475569; }

.ws-nav-card-label{
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.2;
}

.ws-dash-main-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.ws-dash-panel{
  overflow: hidden;
}

.ws-dash-panel .gi-card-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 18px 14px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--border);
}

.ws-dash-panel .gi-card-header h2{
  font-size: 15px;
  font-weight: 700;
}

.ws-dash-panel .gi-card-header .gi-muted{
  margin-top: 3px;
}

.ws-dash-panel .gi-card-header .gi-btn{
  flex-shrink: 0;
}

.ws-dash-empty{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  flex-wrap: wrap;
}

.ws-dash-empty p{
  flex: 1 1 auto;
  font-size: 13px;
  margin: 0;
}

.ws-dash-projects-list,
.ws-dash-act-list,
.ws-dash-reminder-list,
.ws-dash-notes-list{
  padding: 0 18px 14px;
}

.ws-dash-project-item{
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ws-dash-project-item:last-child{
  border-bottom: none;
  padding-bottom: 0;
}

.ws-dash-project-top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.ws-dash-project-name{
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  line-height: 1.3;
}

.ws-dash-project-name:hover{
  color: #2563eb;
  text-decoration: underline;
}

.ws-dash-project-info{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.ws-dash-project-meta{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ws-dash-due{
  font-size: 12px;
}

.ws-due-overdue{
  color: #ef4444 !important;
  font-weight: 600;
}

.ws-due-today{
  color: #ea580c !important;
  font-weight: 600;
}

.ws-due-soon{
  color: #d97706 !important;
  font-weight: 600;
}

.ws-dash-act-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  transition: background 0.12s ease, border-color 0.12s ease;
  border-radius: 8px;
}

.ws-dash-act-item:hover{
  background: rgba(37,99,235,0.04);
}

.ws-dash-act-item:last-child{
  border-bottom: none;
}

.ws-dash-act-left{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}

.ws-act-prio-dot{
  flex-shrink: 0;
  margin-top: 3px;
  font-size: 11px !important;
  padding: 2px 6px !important;
}

.ws-dash-act-info{
  min-width: 0;
  flex: 1 1 auto;
}

.ws-dash-act-info .gi-title{
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-dash-act-info .gi-sub{
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-dash-act-due{
  font-size: 12px;
  color: var(--muted);
  flex-shrink: 0;
  white-space: nowrap;
  text-align: right;
}

.ws-dash-reminder-item{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.ws-dash-reminder-item:last-child{
  border-bottom: none;
}

.ws-dash-reminder-dot{
  width: 8px;
  height: 8px;
  min-width: 8px;
  border-radius: 50%;
  background: #7c3aed;
  margin-top: 5px;
  flex-shrink: 0;
}

.ws-dash-reminder-info{
  min-width: 0;
  flex: 1 1 auto;
}

.ws-dash-reminder-info .gi-title{
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.ws-dash-reminder-info .gi-sub{
  font-size: 12px;
  margin-top: 2px;
  line-height: 1.45;
  word-break: break-word;
}

.ws-dash-note-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  transition: background 0.12s ease;
  border-radius: 8px;
}

.ws-dash-note-item:hover{
  background: rgba(37,99,235,0.04);
}

.ws-dash-note-item:last-child{
  border-bottom: none;
}

.ws-dash-note-info{
  min-width: 0;
  flex: 1 1 auto;
}

.ws-dash-note-info .gi-title{
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  line-height: 1.35;
}

.ws-dash-note-info .gi-sub{
  font-size: 12px;
  margin-top: 2px;
  line-height: 1.45;
}

.ws-dash-note-arrow{
  color: var(--muted);
  font-size: 14px;
  flex-shrink: 0;
  opacity: 0.5;
}

/* ── Responsivo ── */
@media (max-width: 980px){
  .ws-dash-metrics{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ws-dash-nav-grid{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .ws-dash-main-grid{
    grid-template-columns: 1fr;
  }

  .ws-dash-panel .gi-card-header{
    padding: 16px 16px 13px;
  }

  .ws-dash-projects-list,
  .ws-dash-act-list,
  .ws-dash-reminder-list,
  .ws-dash-notes-list{
    padding: 0 16px 12px;
  }

  .ws-dash-empty{
    padding: 16px;
  }
}

@media (max-width: 767px){
  .ws-files-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0 14px 14px;
    gap: 10px;
  }

  .ws-files-grid-compact{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ws-files-paste-zone{
    margin: 0 14px 12px;
    padding: 16px 12px;
  }

  .ws-files-feedback{
    margin: 0 14px 10px;
  }

  .ws-file-card-actions{
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: nowrap;
  }

  .ws-file-card-actions .ws-btn-danger{
    grid-column: unset;
  }
}

@media (max-width: 600px){
  .ws-dash-metrics{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ws-dash-nav-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ws-dash-header{
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .ws-metric-value{
    font-size: 24px;
  }

  .ws-dash-panel .gi-card-header{
    flex-direction: column;
    align-items: flex-start;
  }

  .ws-dash-project-top,
  .ws-dash-act-item,
  .ws-dash-note-item{
    flex-direction: column;
    align-items: flex-start;
  }

  .ws-dash-project-meta,
  .ws-dash-act-due,
  .ws-dash-note-arrow{
    justify-content: flex-start;
    text-align: left;
  }

  .ws-dash-act-info .gi-title,
  .ws-dash-act-info .gi-sub{
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }

  .ws-dash-projects-list,
  .ws-dash-act-list,
  .ws-dash-reminder-list,
  .ws-dash-notes-list{
    padding: 0 14px 12px;
  }

  .ws-dash-panel .gi-card-header,
  .ws-dash-empty{
    padding-left: 14px;
    padding-right: 14px;
  }
}

@media (max-width: 480px){
  .ws-files-grid,
  .ws-files-grid-compact{
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   WORKSPACE — REMINDERS CALENDAR COMPONENTS
   Componentes reutilizáveis para calendário de lembretes
========================================================= */

/* ── Topbar & View Toggle ── */
.ws-reminders-topbar{
  padding: 0 18px 18px;
}

.ws-reminders-topbar-main{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.ws-reminders-period{
  font-size:14px;
  font-weight:700;
  color:#334155;
}

.ws-reminders-view-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px;
  border:1px solid rgba(15,23,42,0.10);
  border-radius:12px;
  background:rgba(15,23,42,0.03);
}

.ws-reminders-view-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:72px;
  height:38px;
  padding:0 12px;
  border-radius:10px;
  text-decoration:none;
  color:#334155;
  font-size:14px;
  font-weight:600;
  transition:background .14s ease, color .14s ease, box-shadow .14s ease;
}

.ws-reminders-view-btn.is-active{
  background:#fff;
  color:#0f172a;
  box-shadow:0 6px 18px rgba(15,23,42,0.08);
}

/* ── Calendar Card ── */
.ws-reminders-calendar-card{
  margin-top:18px;
  overflow:hidden;
}

.ws-reminders-calendar-head{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding:18px 18px 12px;
  border-bottom:1px solid rgba(15,23,42,0.08);
}

.ws-reminders-calendar-title{
  flex:1 1 auto;
  min-width:0;
  font-size:18px;
  font-weight:800;
  color:#0f172a;
}

.ws-reminders-nav-btn,
.ws-reminders-today-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border:1px solid rgba(15,23,42,0.12);
  background:#fff;
  color:#0f172a;
  border-radius:12px;
  min-width:42px;
  height:42px;
  padding:0 14px;
  font-weight:700;
}

.ws-reminders-nav-btn{
  font-size:22px;
  line-height:1;
}

.ws-reminders-calendar-body{
  padding:16px;
}

/* ── Month Grid View ── */
.ws-reminders-month-grid{
  display:grid;
  grid-template-columns:repeat(7, minmax(0, 1fr));
  gap:10px;
}

.ws-reminders-dow{
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#64748b;
  padding:0 6px 6px;
}

.ws-reminders-day{
  min-height:138px;
  border:1px solid rgba(15,23,42,0.08);
  border-radius:14px;
  background:#fff;
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
  transition:border-color .14s ease, box-shadow .14s ease, background .14s ease;
  min-width:0;
}

.ws-reminders-day.has-items{
  cursor:pointer;
}

.ws-reminders-day.has-items:hover{
  border-color:rgba(22,163,74,0.28);
  box-shadow:0 10px 24px rgba(15,23,42,0.06);
}

.ws-reminders-day.is-other-month{
  background:rgba(15,23,42,0.025);
  opacity:.72;
}

.ws-reminders-day.is-today{
  border-color:rgba(37,99,235,0.24);
  box-shadow:0 0 0 2px rgba(37,99,235,0.08);
}

.ws-reminders-day.is-holiday{
  border-color: rgba(220,38,38,0.22);
  background: linear-gradient(180deg, rgba(239,68,68,0.04) 0%, #fff 100%);
}

.ws-reminders-day-num{
  font-size:14px;
  font-weight:800;
  color:#0f172a;
}

.ws-reminders-holiday-badge{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  padding:3px 7px;
  border-radius:999px;
  background:rgba(239,68,68,0.10);
  border:1px solid rgba(239,68,68,0.20);
  color:#b91c1c;
  font-size:11px;
  font-weight:700;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ws-reminders-event{
  display:grid;
  gap:2px;
  padding:7px 8px;
  border-radius:10px;
  font-size:12px;
  line-height:1.35;
  min-width:0;
  overflow:hidden;
  border:1px solid transparent;
}

.ws-reminders-event-time{
  font-weight:800;
  color:#0f172a;
}

.ws-reminders-event-label{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.ws-reminders-event.s-scheduled{
  background:rgba(245,158,11,0.10);
  border-color:rgba(245,158,11,0.22);
}

.ws-reminders-event.s-sent{
  background:rgba(34,197,94,0.10);
  border-color:rgba(34,197,94,0.22);
}

.ws-reminders-event.s-dismissed{
  background:rgba(59,130,246,0.10);
  border-color:rgba(59,130,246,0.22);
}

.ws-reminders-event.s-cancelled{
  background:rgba(239,68,68,0.10);
  border-color:rgba(239,68,68,0.22);
}

.ws-reminders-event.s-done{
  background:rgba(34,197,94,0.10);
  border-color:rgba(34,197,94,0.45);
}

/* ── Dia com lembrete concluído (vista Mês) ── */
.ws-reminders-day.has-done{
  border-color:rgba(34,197,94,0.50);
  box-shadow:0 0 0 1px rgba(34,197,94,0.20);
}

.ws-reminders-day.has-done:hover{
  border-color:rgba(34,197,94,0.70);
  box-shadow:0 10px 24px rgba(34,197,94,0.12);
}

.ws-reminders-day.is-today.has-done{
  border-color:rgba(34,197,94,0.70);
  box-shadow:0 0 0 2px rgba(34,197,94,0.20);
}

.ws-reminders-more{
  font-size:12px;
  font-weight:700;
  color:#64748b;
}

/* ── Week Grid View ── */
.ws-reminders-week-grid{
  display:grid;
  grid-template-columns:repeat(7, minmax(0, 1fr));
  gap:12px;
}

.ws-reminders-week-col{
  min-width:0;
  border:1px solid rgba(15,23,42,0.08);
  border-radius:16px;
  background:#fff;
  overflow:hidden;
}

.ws-reminders-week-col.is-today{
  border-color:rgba(37,99,235,0.24);
  box-shadow:0 0 0 2px rgba(37,99,235,0.08);
}

.ws-reminders-week-col.is-holiday{
  border-color: rgba(220,38,38,0.22);
}

.ws-reminders-week-col-head{
  padding:12px;
  border-bottom:1px solid rgba(15,23,42,0.08);
  background:rgba(15,23,42,0.02);
  display:grid;
  gap:4px;
}

.ws-reminders-week-col-dow{
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  color:#64748b;
}

.ws-reminders-week-col-date{
  font-size:16px;
  font-weight:800;
  color:#0f172a;
}

.ws-reminders-week-col-holiday{
  font-size:11px;
  font-weight:700;
  color:#b91c1c;
  line-height:1.35;
}

.ws-reminders-week-col-body{
  padding:12px;
  display:grid;
  gap:10px;
}

.ws-reminders-week-card{
  border:1px solid rgba(15,23,42,0.08);
  border-radius:12px;
  padding:10px;
  display:grid;
  gap:6px;
  cursor:pointer;
  transition:border-color .14s ease, box-shadow .14s ease;
}

.ws-reminders-week-card:hover{
  border-color:rgba(22,163,74,0.26);
  box-shadow:0 8px 18px rgba(15,23,42,0.06);
}

.ws-reminders-week-card.s-scheduled{
  background:rgba(245,158,11,0.06);
}

.ws-reminders-week-card.s-sent{
  background:rgba(34,197,94,0.06);
}

.ws-reminders-week-card.s-dismissed{
  background:rgba(59,130,246,0.06);
}

.ws-reminders-week-card.s-cancelled{
  background:rgba(239,68,68,0.06);
}

.ws-reminders-week-card.s-done{
  background:rgba(34,197,94,0.08);
  border-color:rgba(34,197,94,0.35);
}

.ws-reminders-week-card-time{
  font-size:12px;
  font-weight:800;
  color:#0f172a;
}

.ws-reminders-week-card-title{
  font-size:13px;
  font-weight:700;
  color:#0f172a;
  line-height:1.4;
}

.ws-reminders-week-card-meta{
  font-size:12px;
  color:#64748b;
  line-height:1.4;
}

/* ── Day View ── */
.ws-reminders-day-view{
  display:grid;
  gap:14px;
}

.ws-reminders-day-view-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.ws-reminders-day-view-title{
  display:grid;
  gap:3px;
}

.ws-reminders-day-view-title strong{
  font-size:18px;
  line-height:1.2;
  color:#0f172a;
}

.ws-reminders-day-view-title span{
  font-size:13px;
  color:#64748b;
}

.ws-reminders-day-view-title em{
  font-style:normal;
  font-size:12px;
  font-weight:700;
  color:#b91c1c;
}

.ws-reminders-day-list{
  display:grid;
  gap:12px;
}

.ws-reminders-day-card{
  border:1px solid rgba(15,23,42,0.08);
  border-radius:16px;
  background:#fff;
  padding:14px;
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:14px;
  align-items:flex-start;
  cursor:pointer;
  transition:border-color .14s ease, box-shadow .14s ease;
}

.ws-reminders-day-card:hover{
  border-color:rgba(22,163,74,0.26);
  box-shadow:0 8px 18px rgba(15,23,42,0.06);
}

.ws-reminders-day-card.s-scheduled{
  background:rgba(245,158,11,0.04);
}

.ws-reminders-day-card.s-sent{
  background:rgba(34,197,94,0.04);
}

.ws-reminders-day-card.s-dismissed{
  background:rgba(59,130,246,0.04);
}

.ws-reminders-day-card.s-cancelled{
  background:rgba(239,68,68,0.04);
}

.ws-reminders-day-card-main{
  min-width:0;
  display:grid;
  gap:8px;
}

.ws-reminders-day-card-title{
  font-size:15px;
  font-weight:800;
  color:#0f172a;
  line-height:1.4;
}

.ws-reminders-day-card-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  font-size:13px;
  color:#64748b;
}

.ws-reminders-day-card-desc{
  font-size:13px;
  color:#334155;
  line-height:1.55;
  word-break:break-word;
}

.ws-reminders-day-card-side{
  display:grid;
  gap:8px;
  justify-items:end;
}

.ws-reminders-empty-state{
  min-height:90px;
}

/* ── Legend ── */
.ws-reminders-legend{
  padding:0 16px 16px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.ws-reminders-legend-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:#475569;
}

.ws-reminders-legend-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  display:inline-block;
}

.ws-reminders-legend-dot.is-scheduled{ background:#f59e0b; }
.ws-reminders-legend-dot.is-sent{ background:#22c55e; }
.ws-reminders-legend-dot.is-dismissed{ background:#3b82f6; }
.ws-reminders-legend-dot.is-cancelled{ background:#ef4444; }

/* ── Detail Sidebar ── */
.ws-reminders-backdrop{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,0.52);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
  z-index:160;
}

.ws-reminders-backdrop.is-open{
  opacity:1;
  pointer-events:auto;
}

.ws-reminders-detail{
  position:fixed;
  top:0;
  right:0;
  width:min(560px, calc(100vw - 16px));
  height:100dvh;
  height:100svh;
  height:100vh;
  background:#fff;
  box-shadow:-18px 0 42px rgba(15,23,42,0.18);
  transform:translateX(104%);
  transition:transform .2s ease;
  z-index:170;
  display:flex;
  flex-direction:column;
}

.ws-reminders-detail.is-open{
  transform:translateX(0);
}

.ws-reminders-detail-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:18px;
  border-bottom:1px solid rgba(15,23,42,0.08);
}

.ws-reminders-detail-title{
  font-size:18px;
  font-weight:800;
  color:#0f172a;
}

.ws-reminders-detail-close{
  width:40px;
  height:40px;
  border:1px solid rgba(15,23,42,0.10);
  border-radius:12px;
  background:#fff;
  color:#0f172a;
  font-size:24px;
  line-height:1;
  cursor:pointer;
}

.ws-reminders-detail-body{
  padding:18px;
  overflow:auto;
  display:grid;
  gap:16px;
}

.ws-reminders-detail-block{
  display:grid;
  gap:10px;
}

.ws-reminders-detail-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.ws-reminders-detail-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

.ws-reminders-detail-item{
  display:grid;
  gap:6px;
}

.ws-reminders-detail-item strong{
  font-size:12px;
  font-weight:800;
  color:#64748b;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.ws-reminders-detail-item span{
  font-size:14px;
  color:#0f172a;
  line-height:1.45;
}

.ws-reminders-detail-item-full{
  grid-column:1 / -1;
}

.ws-reminders-detail-text{
  font-size:14px;
  line-height:1.65;
  color:#334155;
  white-space:pre-wrap;
  word-break:break-word;
}

.ws-reminders-detail-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

.ws-reminders-detail-list-card{
  border:1px solid rgba(15,23,42,0.08);
  border-radius:14px;
  padding:12px;
  display:grid;
  gap:10px;
  cursor:pointer;
  transition:border-color .14s ease, box-shadow .14s ease;
}

.ws-reminders-detail-list-card:hover{
  border-color:rgba(22,163,74,0.26);
  box-shadow:0 8px 18px rgba(15,23,42,0.06);
}

.ws-reminders-detail-list-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.ws-reminders-detail-list-title{
  font-size:14px;
  font-weight:800;
  color:#0f172a;
}

.ws-reminders-detail-list-time{
  font-size:12px;
  color:#64748b;
  white-space:nowrap;
}

.ws-reminders-detail-list-meta{
  display:grid;
  gap:6px;
  font-size:13px;
  color:#475569;
}

/* ── Responsivo ── */
@media (max-width: 1279px){
  .ws-reminders-week-grid{
    grid-template-columns:repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 991px){
  .ws-reminders-month-grid{
    gap:8px;
  }

  .ws-reminders-day{
    min-height:120px;
    padding:8px;
  }

  .ws-reminders-week-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .ws-reminders-detail-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 767px){
  .ws-reminders-topbar{
    padding:0 14px 14px;
  }

  .ws-reminders-topbar-main{
    display:grid;
    grid-template-columns:1fr;
  }

  .ws-reminders-view-toggle{
    width:100%;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
  }

  .ws-reminders-view-btn{
    min-width:0;
    width:100%;
  }

  .ws-reminders-calendar-head{
    padding:14px 14px 10px;
  }

  .ws-reminders-calendar-body{
    padding:12px;
  }

  .ws-reminders-month-grid{
    grid-template-columns:1fr;
  }

  .ws-reminders-dow{
    display:none;
  }

  .ws-reminders-day{
    min-height:auto;
  }

  .ws-reminders-week-grid{
    grid-template-columns:1fr;
  }

  .ws-reminders-day-card{
    grid-template-columns:1fr;
  }

  .ws-reminders-day-card-side{
    justify-items:start;
  }

  .ws-reminders-legend{
    padding:0 12px 14px;
  }

  .ws-reminders-detail{
    width:100vw;
    max-width:none;
  }

  .ws-reminders-detail-list-head{
    flex-direction:column;
    align-items:flex-start;
  }

  .ws-reminders-detail-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .ws-reminders-detail-actions .gi-btn{
    width:100%;
  }

  .ws-reminders-holiday-badge{
    white-space:normal;
    border-radius:10px;
  }
}