/* ============================================================
   WTF PUBLICIDAD — Panel Interno
   components.css — Componentes reutilizables
   v1.0 | Sep 2026
   ============================================================ */

/* ─── BOTONES ─── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--r);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  transition: all var(--t-fast);
  white-space: nowrap;
  border: 1px solid transparent;
  line-height: 1;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Verde primario */
.btn-primary {
  background: var(--g);
  color: #000;
  border-color: var(--g);
  font-weight: 600;
}
.btn-primary:hover:not(:disabled) { background: var(--gd); border-color: var(--gd); }

/* Secundario (outline) */
.btn-secondary {
  background: transparent;
  color: var(--ts);
  border-color: var(--brh);
}
.btn-secondary:hover:not(:disabled) { background: var(--c2); color: var(--t); }

/* Azul */
.btn-blue {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}
.btn-blue:hover:not(:disabled) { background: #2a7ac8; }

/* Rojo / destructivo */
.btn-danger {
  background: transparent;
  color: var(--red);
  border-color: var(--redbr);
}
.btn-danger:hover:not(:disabled) { background: var(--redbg); }

/* Tamaños */
.btn-sm { padding: 4px 9px; font-size: 11px; }
.btn-lg { padding: 10px 20px; font-size: 13px; font-weight: 600; }
.btn-full { width: 100%; justify-content: center; }

/* ─── CARDS ─── */
.card {
  background: var(--c1);
  border: 1px solid var(--br);
  border-radius: var(--r2);
  padding: var(--sp-lg);
  margin-bottom: var(--sp-md);
}
.card-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--t);
  margin-bottom: var(--sp-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
  flex-wrap: wrap;
}
.card-subtitle {
  font-size: 11px;
  color: var(--ts);
  font-weight: 400;
  margin-left: var(--sp-sm);
}

/* Card sin padding (tablas flush) */
.card-flush {
  background: var(--c1);
  border: 1px solid var(--br);
  border-radius: var(--r2);
  overflow: hidden;
  margin-bottom: var(--sp-md);
}

/* ─── KPI CARD ─── */
.kpi-card {
  background: var(--c2);
  border: 1px solid var(--br);
  border-radius: var(--r);
  padding: var(--sp-md);
  position: relative;
  overflow: hidden;
}
/* Línea de color superior por variante */
.kpi-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
}
.kpi-card.green::before  { background: var(--g); }
.kpi-card.blue::before   { background: var(--blue); }
.kpi-card.red::before    { background: var(--red); }
.kpi-card.yellow::before { background: var(--yellowtxt); }
.kpi-card.neutral::before { background: var(--brh); }

.kpi-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ts);
  margin-bottom: 6px;
}
.kpi-value {
  font-size: 22px;
  font-weight: 600;
  color: var(--t);
  line-height: 1;
}
.kpi-value.green  { color: var(--g); }
.kpi-value.blue   { color: var(--bluetxt); }
.kpi-value.red    { color: var(--red); }
.kpi-value.yellow { color: var(--yellowtxt); }
.kpi-sub {
  font-size: 11px;
  color: var(--tm);
  margin-top: 4px;
}

/* ─── BADGES DE ESTADO ─── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
  line-height: 1.3;
}
.badge i { font-size: 11px; }

.badge-new     { background: var(--c2);      color: var(--ts);      border: 1px solid var(--br); }
.badge-prod    { background: var(--bluebg);  color: var(--bluetxt); }
.badge-val     { background: var(--purplebg); color: var(--purpletxt); }
.badge-done    { background: #1a2a14;        color: var(--g); }
.badge-pending { background: var(--yellowbg); color: var(--yellowtxt); }
.badge-urgent  { background: var(--redbg);   color: var(--red); }

/* Badges de rol */
.role-badge { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
.role-admin  { background: var(--gob);     color: var(--go); }
.role-ops    { background: var(--bluebdg); color: var(--bluetxt2); }
.role-dis    { background: #1a2a14;        color: var(--g); }
.role-free   { background: var(--yellowbg); color: var(--yellowtxt); }
.role-sales  { background: var(--purplebg); color: var(--purple); }

/* Badge de tipo de pieza */
.type-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 20px;
  background: var(--c2);
  color: var(--ts);
  border: 1px solid var(--br);
  white-space: nowrap;
}

/* Badge de fecha */
.date-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
  font-weight: 600;
}
.date-ok     { background: #1a2a14;        color: var(--g); }
.date-soon   { background: var(--yellowbg); color: var(--yellowtxt); }
.date-urgent { background: var(--redbg);   color: var(--red); }

/* Badge numérico genérico */
.count-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 20px;
}

/* ─── TABLA PRINCIPAL ─── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.data-table th {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ts);
  padding: 8px 10px;
  background: var(--c2);
  border-bottom: 1px solid var(--brh);
  text-align: left;
  white-space: nowrap;
}
.data-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--br);
  vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: rgba(255,255,255,0.015); }

/* Celda de nombre + subtítulo */
.cell-name {
  font-weight: 500;
  color: var(--t);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  display: block;
}
.cell-sub { font-size: 11px; color: var(--ts); }

/* ─── AVATAR DE DISEÑADOR ─── */
.dis-av {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 600;
  flex-shrink: 0;
}
.dis-av.planta    { background: #1a2a14;        color: var(--g); }
.dis-av.freelance { background: var(--bluebg);  color: var(--bluetxt); }

.dis-av-lg {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}

/* ─── AVATAR DE USUARIO ─── */
.user-av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}

/* ─── FORMULARIOS ─── */
.form-group { margin-bottom: var(--sp-sm); }

.form-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ts);
  margin-bottom: 5px;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 8px 11px;
  border: 1px solid var(--br);
  border-radius: var(--r);
  background: var(--c2);
  color: var(--t);
  font-size: 12px;
  font-family: var(--font);
  outline: none;
  transition: border-color var(--t-fast);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus { border-color: rgba(117,184,42,0.55); }

.form-input::placeholder,
.form-textarea::placeholder { color: var(--tm); }

.form-textarea {
  min-height: 65px;
  resize: vertical;
  line-height: 1.5;
}

/* ─── TOGGLE ─── */
.toggle {
  width: 34px;
  height: 18px;
  border-radius: 9px;
  background: var(--brh);
  position: relative;
  cursor: pointer;
  transition: background var(--t-base);
  flex-shrink: 0;
  display: inline-block;
  border: none;
}
.toggle.on { background: var(--g); }
.toggle::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--c2);
  transition: transform var(--t-base);
}
.toggle.on::after { transform: translateX(16px); }

/* Fila con toggle */
.toggle-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid var(--br);
  gap: var(--sp-sm);
}
.toggle-row:last-child { border-bottom: none; padding-bottom: 0; }
.toggle-row:first-child { padding-top: 0; }
.toggle-label { font-size: 12px; font-weight: 500; color: var(--t); margin-bottom: 2px; }
.toggle-sub   { font-size: 11px; color: var(--ts); line-height: 1.4; }

/* ─── CHECKBOX PERSONALIZADO ─── */
.perm-check {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid var(--brh);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--t-fast);
  flex-shrink: 0;
}
.perm-check.on { background: var(--g); border-color: var(--g); }
.perm-check.on i { color: #000; font-size: 10px; }

/* ─── CAJAS DE ALERTA ─── */
.alert {
  padding: 9px 13px;
  border-radius: 0 var(--r) var(--r) 0;
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: var(--sp-md);
}
.alert-info    { background: var(--c2);      border-left: 3px solid var(--brh); color: var(--ts); }
.alert-success { background: #1a2a14;        border-left: 3px solid var(--g);   color: #c8f5a0; }
.alert-warning { background: var(--yellowbg); border-left: 3px solid var(--yellowtxt); color: var(--yellowtxt); }
.alert-danger  { background: var(--redbg);   border-left: 3px solid var(--red); color: var(--redtxt); }

/* Info box con ícono */
.info-box {
  background: var(--c2);
  border: 1px solid var(--br);
  border-radius: var(--r);
  padding: 9px 13px;
  font-size: 12px;
  color: var(--ts);
  display: flex;
  align-items: flex-start;
  gap: 7px;
  line-height: 1.5;
  margin-bottom: var(--sp-md);
}
.info-box i { color: var(--g); font-size: 15px; flex-shrink: 0; margin-top: 1px; }

/* ─── BARRA DE PROGRESO ─── */
.progress-bar {
  height: 6px;
  background: var(--br);
  border-radius: 3px;
  overflow: hidden;
  width: 100%;
}
.progress-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--g);
  transition: width 0.3s ease;
}
.progress-fill.blue   { background: var(--blue); }
.progress-fill.red    { background: var(--red); }
.progress-fill.yellow { background: var(--yellowtxt); }

/* Barra pequeña (en tabla) */
.progress-sm {
  height: 3px;
  background: var(--br);
  border-radius: 2px;
  overflow: hidden;
  width: 60px;
}

/* ─── MINIATURAS DE ARCHIVO ─── */
.files-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-sm);
  margin-bottom: var(--sp-sm);
}

.file-thumb {
  border: 1px solid var(--br);
  border-radius: var(--r);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--t-fast);
  background: var(--c2);
}
.file-thumb:hover { border-color: var(--brh); }

.file-thumb-img {
  height: 75px;
  overflow: hidden;
  background: #000;
}
.file-thumb-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.2s ease;
}
.file-thumb:hover .file-thumb-img img { transform: scale(1.05); }

.file-thumb-footer {
  padding: 5px 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.file-thumb-name {
  font-size: 10px;
  font-weight: 500;
  color: var(--t);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.file-thumb-dl {
  color: var(--ts);
  font-size: 13px;
  flex-shrink: 0;
  cursor: pointer;
  transition: color var(--t-fast);
  background: none;
  border: none;
  padding: 0;
  line-height: 1;
}
.file-thumb-dl:hover { color: var(--g); }

/* ─── FILA DE CLIENTE EN LISTA ─── */
.client-row {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: 9px 0;
  border-bottom: 1px solid var(--br);
  font-size: 12px;
}
.client-row:last-child { border-bottom: none; padding-bottom: 0; }

/* Badge de plan */
.plan-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px; }
.plan-bas   { background: var(--c2);      color: var(--ts); border: 1px solid var(--br); }
.plan-int   { background: var(--bluebg);  color: var(--bluetxt); }
.plan-pre   { background: #1a2a14;        color: var(--g); }

/* ─── FILA DE USUARIO ─── */
.user-row {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: 8px 0;
  border-bottom: 1px solid var(--br);
  font-size: 12px;
}
.user-row:last-child { border-bottom: none; padding-bottom: 0; }
.user-name { font-weight: 500; color: var(--t); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-meta { font-size: 11px; color: var(--ts); }

/* ─── TARJETA DE DISEÑADOR ─── */
.designer-card {
  background: var(--c1);
  border: 1px solid var(--br);
  border-radius: var(--r2);
  padding: var(--sp-md);
  margin-bottom: var(--sp-sm);
}
.designer-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: var(--sp-sm);
}
.designer-stat {
  background: var(--c2);
  border-radius: var(--r);
  padding: 7px 9px;
  text-align: center;
}
.designer-stat-val { font-size: 17px; font-weight: 600; color: var(--t); }
.designer-stat-lbl { font-size: 11px; color: var(--ts); margin-top: 1px; }

/* ─── FILA MINI (dentro de cards) ─── */
.mini-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--br);
  font-size: 12px;
  gap: 6px;
}
.mini-row:last-child { border-bottom: none; padding-bottom: 0; }
.mini-row-name { color: var(--t); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }

/* ─── PACK OPTION ─── */
.pack-opt {
  border: 1px solid var(--br);
  border-radius: var(--r);
  padding: var(--sp-md);
  cursor: pointer;
  transition: all var(--t-fast);
  background: var(--c1);
}
.pack-opt:hover { border-color: var(--brh); }
.pack-opt.selected { border: 2px solid var(--g); }
.pack-opt-name  { font-size: 13px; font-weight: 500; color: var(--t); margin-bottom: 3px; }
.pack-opt-price { font-size: 12px; color: var(--g); font-weight: 600; margin-bottom: 3px; }
.pack-opt-desc  { font-size: 11px; color: var(--ts); }

/* ─── NOTIFICACIÓN ITEM ─── */
.notif-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-sm);
  padding: var(--sp-sm) 0 var(--sp-sm) var(--sp-md);
  border-bottom: 1px solid var(--br);
  position: relative;
}
.notif-item:last-child { border-bottom: none; padding-bottom: 0; }
.notif-item.unread::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--g);
  border-radius: 0 2px 2px 0;
}

.notif-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.notif-icon.green  { background: #1a2a14;        color: var(--g); }
.notif-icon.blue   { background: var(--bluebg);  color: var(--bluetxt); }
.notif-icon.yellow { background: var(--yellowbg); color: var(--yellowtxt); }
.notif-icon.red    { background: var(--redbg);   color: var(--red); }
.notif-icon.purple { background: var(--purplebg); color: var(--purple); }
.notif-icon.gray   { background: var(--c2);      color: var(--ts); border: 1px solid var(--br); }

.notif-body    { flex: 1; min-width: 0; }
.notif-title   { font-size: 12px; font-weight: 500; color: var(--t); margin-bottom: 2px; line-height: 1.4; }
.notif-sub     { font-size: 11px; color: var(--ts); line-height: 1.4; }
.notif-date    { font-size: 10px; color: var(--tm); margin-top: 3px; }
.notif-unread-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--g); flex-shrink: 0; margin-top: 5px; }

/* ─── CHIP DE DESTINO (en reglas de notificaciones) ─── */
.dest-chip {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
  display: inline-block;
  margin: 2px 2px 2px 0;
}
.dest-cliente { background: #1a2a14;        color: var(--g); }
.dest-diseno  { background: var(--bluebg);  color: var(--bluetxt); }
.dest-wtf     { background: var(--purplebg); color: var(--purple); }
.dest-ventas  { background: var(--yellowbg); color: var(--yellowtxt); }
.dest-ops     { background: var(--yellowbg); color: var(--yellowtxt); }

/* Canal chip */
.canal-chip {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 20px;
  border: 1px solid var(--br);
  color: var(--ts);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 2px 2px 0 0;
}

/* ─── REGLA DE NOTIFICACIÓN ─── */
.rule-card {
  background: var(--c1);
  border: 1px solid var(--br);
  border-radius: var(--r2);
  padding: var(--sp-md);
  margin-bottom: var(--sp-sm);
  display: flex;
  align-items: flex-start;
  gap: var(--sp-md);
}
.rule-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.rule-body     { flex: 1; min-width: 0; }
.rule-title    { font-size: 12px; font-weight: 500; color: var(--t); margin-bottom: 3px; }
.rule-sub      { font-size: 11px; color: var(--ts); margin-bottom: 6px; line-height: 1.5; }

/* ─── CATÁLOGO — TARJETA DE PIEZA ─── */
.piece-card {
  background: var(--c1);
  border: 1px solid var(--br);
  border-radius: var(--r2);
  padding: var(--sp-md);
  transition: border-color var(--t-fast);
}
.piece-card:hover { border-color: var(--brh); }

.piece-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r);
  background: #1a2a14;
  color: var(--g);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  margin-bottom: var(--sp-sm);
  flex-shrink: 0;
}
.piece-name     { font-size: 13px; font-weight: 500; color: var(--t); margin-bottom: 2px; }
.piece-credits  { font-size: 11px; color: var(--g); font-weight: 600; margin-bottom: 4px; }
.piece-desc     { font-size: 11px; color: var(--ts); line-height: 1.5; }

/* ─── BARRAS DE REPORTE ─── */
.bar-row {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  margin-bottom: 7px;
  font-size: 12px;
}
.bar-label  { width: 70px; color: var(--ts); font-size: 11px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-bg     { flex: 1; height: 6px; background: var(--br); border-radius: 3px; overflow: hidden; }
.bar-fill   { height: 100%; border-radius: 3px; }
.bar-val    { font-size: 11px; color: var(--t); font-weight: 500; min-width: 30px; text-align: right; }

/* ─── FILA MRR ─── */
.mrr-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid var(--br);
  font-size: 12px;
  gap: 6px;
}
.mrr-row:last-child { border-bottom: none; padding-bottom: 0; }
.mrr-name { color: var(--t); font-weight: 500; min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrr-plan { font-size: 11px; color: var(--ts); }
.mrr-val  { color: var(--g); font-weight: 600; flex-shrink: 0; }

/* ─── SPINNER ─── */
.spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(0,0,0,0.2);
  border-top-color: #000;
  border-radius: 50%;
  animation: spin 0.55s linear infinite;
  vertical-align: middle;
  margin-right: 5px;
}

/* ─── SEPARADOR DE SECCIÓN LIGERO ─── */
.section-sep {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--tm);
  margin: var(--sp-md) 0 var(--sp-sm);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--br);
  display: block;
}
.section-sep:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }

/* ─── SELECTOR DE GIRO CON BUSCADOR (assets/js/giros.js) ─── */
.wtf-giro-caja { display: flex; flex-direction: column; gap: 4px; }
.wtf-giro-caja .wtf-giro-busca { margin: 0; }
.wtf-giro-caja .wtf-giro-sel.abierto { height: auto; padding: 4px; }
.wtf-giro-caja .wtf-giro-sel optgroup { font-weight: 700; color: var(--ts); }
.wtf-giro-caja .wtf-giro-sel option { color: var(--t); font-weight: 400; padding: 2px 4px; }
.wtf-giro-estado { font-size: 10px; color: var(--ts); min-height: 0; }
.wtf-giro-estado:empty { display: none; }