/* Body reset for full width */
body.page-template-default,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

:root{
  --ch-header-h: 120px;
  --ch-action-h: 110px;
  --ch-content-gap: 16px;
  --ch-fixed-gap: 12px;
}

.ch-wrap{
  max-width:420px;
  padding:16px;
  border:1px solid #ddd;
  border-radius:14px;
  margin: 0 auto;
  background-color: #fff;
}

/* Admin and worker view full width */
/* Base admin/kiosk layout: centered container */
.ch-wrap.ch-admin,
.ch-wrap.ch-kiosk{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;

  border: none;
  border-radius: 0;
  padding: 12px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .ch-wrap.ch-admin,
  .ch-wrap.ch-kiosk {
    padding: 8px;
    margin: 0px !important;
  }
  
  /* Reduce top padding on mobile for worker view */
  .ch-header-logo + .ch-wrap.ch-kiosk {
    padding-top: 55px !important;
  }
  
  .ch-fixed-header {
    left: 0;
    right: 0;
    width: 100%;
  }
}

/* Combined Fixed Header */
.ch-fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #ddd;
  z-index: 999;
  pointer-events: auto;
  margin-bottom: 4px;
}

.ch-top-notice{
  min-height:22px;
  padding:3px 12px;
  font-size:11px;
  line-height:1.35;
  text-align:center;
  color:#1f2937;
  background:linear-gradient(90deg, #e0f2fe 0%, #ecfeff 100%);
  border-bottom:1px solid #bae6fd;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ch-top-notice.ch-top-notice-update{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.ch-top-notice-text{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ch-top-notice-actions{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
}

.ch-top-notice-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid #93c5fd;
  background:#eff6ff;
  color:#1d4ed8;
  text-decoration:none;
  font-size:11px;
  font-weight:700;
}

.ch-top-notice-link:hover{
  background:#dbeafe;
}

.ch-top-notice-close{
  width:20px;
  height:20px;
  border:1px solid #cbd5e1;
  border-radius:999px;
  background:#fff;
  color:#475569;
  cursor:pointer;
  font-size:13px;
  line-height:1;
  padding:0;
}

.ch-top-notice-close:hover{
  background:#f1f5f9;
}

/* Logo Header */
.ch-header-logo {
  text-align: center;
  margin: 0;
  padding: 5px 0;
  background: #fff;
  display: flex !important;
  align-items: center;
  justify-content: center;
  visibility: visible !important;
  opacity: 1 !important;
}

.ch-header-logo img {
  max-width: 260px;
  max-height: 25px;
  height: auto;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Add padding to content for fixed header */
.ch-header-logo + .ch-wrap {
  padding-top: 70px;
}

.ch-btn{
  width:100%;
  padding:20px 16px;
  font-size:22px;
  font-weight:800;
  border-radius:16px;
  border:none;
  color:#fff;
  cursor:pointer;
  transition:background .2s ease, transform .05s ease;
}

.ch-btn:active{
  transform:scale(0.98);
}

.ch-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
}

.ch-btn-in{
  background:#1e8e3e;
}

.ch-btn-out{
  background:#c62828;
}

.ch-btn-primary{
  background:#1e8e3e;
  padding:12px 20px;
  font-size:14px;
  font-weight:600;
}

.ch-btn-primary:hover{
  background:#176e31;
}

/* FIX #10: Cancel/secondary buttons darker gray with white text */
.ch-btn-secondary{
  background:#4a4a4a !important;
  color:#fff !important;
  border:1px solid #3a3a3a !important;
  padding:12px 20px;
  font-size:14px;
  font-weight:600;
}

.ch-btn-secondary:hover{
  background:#3a3a3a !important;
  border-color:#2a2a2a !important;
}

.ch-btn-cancel {
  background: #4a4a4a !important;
  color: #fff !important;
  border: 1px solid #3a3a3a !important;
}

.ch-btn-cancel:hover {
  background: #3a3a3a !important;
  border-color: #2a2a2a !important;
}

.ch-btn-sm{
  padding:8px 16px;
  font-size:13px;
  font-weight:600;
  border-radius:8px;
  border:none;
  cursor:pointer;
  transition:all .2s ease;
}

.ch-btn-sm.ch-btn-primary{
  background:#1e8e3e;
  color:#fff;
  padding:8px 16px;
  font-size:13px;
}

.ch-btn-sm.ch-btn-primary:hover{
  background:#176e31;
}

.ch-btn-sm.ch-btn-secondary{
  background:#4a4a4a;
  color:#fff;
  border:1px solid #3a3a3a;
  padding:8px 16px;
  font-size:13px;
}

.ch-btn-sm.ch-btn-secondary:hover{
  background:#3a3a3a;
  border-color:#2a2a2a;
}

.ch-btn-icon{
  background:#fff;
  border:1px solid #ddd;
  border-radius:8px;
  padding:10px;
  width: 48px;
  height: 48px;
  cursor:pointer;
  transition:all .2s ease;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  flex-shrink: 0;
}

.ch-btn-icon:hover{
  background:#f5f5f5;
  border-color:#999;
}

.ch-btn-icon svg{
  stroke:#333;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.ch-btn-icon.ch-btn-danger {
  border-color: #ef4444 !important;  /* Modern red */
  background: #ef4444 !important;
}

.ch-btn-icon.ch-btn-danger:hover {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
}

.ch-btn-icon.ch-btn-danger svg {
  stroke: #fff !important;
}

.ch-btn-icon.ch-btn-danger:hover svg {
  stroke: #fff !important;
}

.ch-btn-icon.ch-btn-success {
  border-color: #10b981;  /* Modern green */
  background: #10b981;
}

.ch-btn-icon.ch-btn-success:hover {
  background: #059669;
  border-color: #059669;
}

.ch-btn-icon.ch-btn-success svg {
  stroke: #fff;
}

.ch-btn-icon.ch-btn-success:hover svg {
  stroke: #fff;
}

.ch-btn-icon.ch-btn-primary {
  border-color: #007bff;
  background: #fff;
}

.ch-btn-icon.ch-btn-primary:hover {
  background: #007bff;
  border-color: #007bff;
}

.ch-btn-icon.ch-btn-primary svg {
  stroke: #007bff;
}

.ch-btn-icon.ch-btn-primary:hover svg {
  stroke: #fff;
}

/* Secondary button style (grey background for edit actions) */
.ch-btn-icon.ch-btn-secondary {
  border-color: #6b7280;
  background: #6b7280;
}

.ch-btn-icon.ch-btn-secondary:hover {
  background: #4b5563;
  border-color: #4b5563;
}

.ch-btn-icon.ch-btn-secondary svg {
  stroke: #fff;
}

.ch-btn-icon.ch-btn-secondary:hover svg {
  stroke: #fff;
}

.ch-profile-avatar{
  width:80px;
  height:80px;
  border-radius:50%;
  background:#f5f5f5;
  border:2px solid #ddd;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:8px;
}

.ch-profile-avatar svg{
  stroke:#666;
}

.ch-profile-avatar-sm{
  width:50px;
  height:50px;
  border-radius:50%;
  background:#f5f5f5;
  border:2px solid #ddd;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:6px;
}

.ch-profile-avatar-sm svg{
  stroke:#666;
}

.ch-modal-compact .ch-modal-body{
  padding:12px 16px;
}

.ch-modal-compact .ch-modal-header{
  padding:12px 16px;
}

.ch-modal-compact .ch-input{
  padding:8px 10px;
  font-size:13px;
}

.ch-modal-compact .ch-label{
  font-size:12px;
  margin-top:6px;
  margin-bottom:4px;
}

.ch-modal-compact .ch-modal-footer{
  padding:10px 16px;
}

.ch-profile-name{
  font-size:15px;
  font-weight:600;
  color:#333;
}

.ch-profile-email{
  font-size:13px;
  color:#666;
  margin-top:4px;
}

.ch-admin-header{
  position: relative;
  margin: 0;
  margin-bottom: 0;
  background: #fff;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Tools Sub Icon Bar */
.ch-tools-sub-bar {
  display: flex;
  align-items: center;
  justify-content: center !important;
  width: 100%;
  gap: 8px;
  padding: 8px 16px;
  background: #f8f9fa;
  border-top: 1px solid #e0e0e0;
}

.ch-tools-sub-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: #6c757d;
  transition: all 0.2s;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.ch-tools-sub-btn:hover {
  background: #fff;
  border-color: #dee2e6;
  color: #495057;
}

.ch-tools-sub-btn.active {
  background: #fff;
  border-color: #007bff;
  color: #007bff;
}

.ch-tools-sub-btn svg {
  flex-shrink: 0;
}

.ch-tools-sub-btn span {
  display: inline-block;
}

/* Flattened submenu views (show previous modal UIs as inline panels) */
.ch-subview-flat .ch-modal {
  position: static !important;
  display: block !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 0 16px 0 !important;
}

.ch-subview-flat .ch-modal-content,
.ch-subview-flat .ch-modal-card {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 12px !important;
}

.ch-subview-flat .ch-modal-close {
  display: none !important;
}

/* Config subviews: tighter spacing */
.ch-config-subview {
  margin-top: 8px !important;
  padding: 12px !important;
}

.ch-config-subview .ch-tools-section-head {
  margin-bottom: 10px !important;
}

/* Tools section header with action button */
.ch-tools-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.ch-tools-historial-filters{
  display:flex;
  align-items:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

.ch-tools-historial-filter-wrap{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
}

.ch-tools-historial-filters-panel{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  z-index:30;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:12px;
  min-width:330px;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}

.ch-tools-historial-filters-panel[hidden]{
  display:none !important;
}

.ch-tools-historial-filter-item{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.ch-tools-historial-filter-item label{
  font-size:13px;
  color:#666;
  line-height:1.2;
}

.ch-tools-historial-filter-item .ch-input{
  width:auto;
  min-width:180px;
  padding:8px 10px;
  font-size:13px;
}

.ch-btn-icon.ch-btn-eye{
  border-color:#6b7280 !important;
  background:#6b7280 !important;
}
.ch-btn-icon.ch-btn-eye:hover{
  background:#4b5563 !important;
  border-color:#4b5563 !important;
}
.ch-btn-icon.ch-btn-eye svg{
  stroke:#fff !important;
}

/* Worker tools cards */
.ch-tools-cards-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:14px;
  margin-bottom:20px;
}

.ch-tools-cards-empty{
  grid-column:1/-1;
  text-align:center;
  color:#999;
  padding:48px 20px;
}

.ch-tools-card{
  background:#fff;
  border:1px solid #e0e0e0;
  border-radius:10px;
  padding:18px;
  transition:box-shadow .2s ease, transform .2s ease;
  cursor:default;
}

.ch-tools-card-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.ch-tools-card-info{
  flex:1;
  min-width:0;
}

.ch-tools-card-name{
  font-size:18px;
  font-weight:600;
  color:#212529;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.ch-tools-card-qty-wrap{
  text-align:right;
}

.ch-tools-card-qty{
  font-size:32px;
  font-weight:700;
  color:#28a745;
  line-height:1;
}

/* Export modal layout helpers */
.ch-export-sub{
  font-size: 13px;
  color:#555;
  margin-bottom: 12px;
  line-height: 1.35;
}
.ch-export-actions{
  display:grid;
  gap:10px;
}

/* Keep toolbar nice on mobile */
@media (max-width: 768px){
  .ch-admin-header{ padding: 6px 0; }
  .ch-admin-actions{ padding: 8px 10px; border-radius: 12px; }
}

/* Admin and worker content padding for fixed header + sub bar */
.ch-fixed-header + .ch-wrap.ch-admin,
.ch-header-logo + .ch-wrap.ch-admin {
  padding-top: calc(var(--ch-header-h, 120px) + var(--ch-content-gap, 16px)) !important;
}

.ch-fixed-header.has-top-notice + .ch-wrap.ch-admin{
  padding-top: calc(var(--ch-header-h, 120px) + 24px + var(--ch-content-gap, 16px)) !important;
}

.ch-fixed-header + .ch-wrap.ch-kiosk,
.ch-header-logo + .ch-wrap.ch-kiosk {
  /* Header + fixed action strip + consistent gap */
  padding-top: calc(var(--ch-header-h, 120px) + var(--ch-action-h, 110px) + var(--ch-content-gap, 16px)) !important;
}

.ch-fixed-header.has-top-notice + .ch-wrap.ch-kiosk{
  padding-top: calc(var(--ch-header-h, 120px) + 24px + var(--ch-action-h, 110px) + var(--ch-content-gap, 16px)) !important;
}

.ch-fixed-header.has-top-notice + .ch-wrap .ch-btn-container-fixed{
  top: calc(var(--ch-header-h, 120px) + 24px + var(--ch-fixed-gap, 12px));
}

/* Fixed button container for worker view */
.ch-btn-container-fixed {
  position: fixed;
  top: calc(var(--ch-header-h, 120px) + var(--ch-fixed-gap, 12px));
  left: 0;
  right: 0;
  z-index: 998;
  padding: 16px;
  background: #fff;
  border-bottom: 1px solid #ddd;
}

.ch-btn-container-fixed + * {
  margin-top: 0;
}

/* FIX #9: Smaller icons on very small devices (iPhone SE) */
/* Mobile: Reduce gap slightly but keep icons readable */
@media (max-width: 400px) {
  .ch-admin-actions {
    gap: 6px;
    padding: 6px 0;
  }
  
  .ch-btn-icon {
    padding: 8px;
    width: 44px;
    height: 44px;
  }
  
  .ch-btn-icon svg {
    width: 22px;
    height: 22px;
  }
}

@media (max-width: 480px){
  .ch-tools-cards-grid{
    grid-template-columns:1fr;
    gap:10px;
  }

  .ch-tools-card{
    padding:14px;
    border-radius:10px;
  }

  .ch-tools-card-name{
    font-size:16px;
  }

  .ch-tools-card-qty{
    font-size:28px;
  }

  .ch-tools-cards-empty{
    padding:28px 16px;
  }

  .ch-tools-historial-filters{
    width:100%;
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
  }

  .ch-tools-historial-filters-panel{
    right:0;
    left:auto;
    min-width:min(92vw, 360px);
  }

  .ch-tools-historial-filter-item{
    width:100%;
  }

  .ch-tools-historial-filter-item .ch-input{
    width:100%;
    min-width:0;
    font-size:16px;
    padding:10px 12px;
  }
}

/* FIX #6: Mobile adjustments - keep header fixed */
@media (max-width: 767px) {
  /* Keep header fixed on mobile */
  .ch-fixed-header {
    position: fixed !important;
    top: 0 !important;
  }
  
  .ch-header-logo {
    position: sticky;
    top: 0;
    z-index: 1000;
  }
  
  .ch-fixed-header + .ch-wrap.ch-kiosk,
  .ch-header-logo + .ch-wrap.ch-kiosk {
    padding-top: calc(var(--ch-header-h, 120px) + var(--ch-action-h, 110px) + var(--ch-content-gap, 16px)) !important;
  }
  
  .ch-btn-container-fixed {
    position: fixed !important;
    top: calc(var(--ch-header-h, 120px) + var(--ch-fixed-gap, 12px)) !important;
    z-index: 999;
  }
  
  .ch-wrap.ch-kiosk {
    padding: 0 16px !important;
  }
  
  .ch-logs-section {
    margin-top: 0;
    padding-top: 10px;
  }
}

@media (max-width: 768px) {
  .ch-admin-header {
    padding: 8px;
  }
  
  .ch-admin-actions {
    gap: 6px;
  }
}

.ch-msg{
  margin-top:14px;
  padding:14px;
  border-radius:12px;
  border:1px solid transparent;
  font-size:16px;
  line-height:1.3;
  min-height:24px;
}

.ch-msg-ok{
  background:#eef7ee;
  border-color:#b8e0b8;
}

.ch-msg-err{
  background:#fff1f1;
  border-color:#f0b1b1;
}

.ch-logout{
  display:inline-block;
  padding:8px 14px;
  font-size:14px;
  color:#666;
  background:transparent;
  border:1px solid #ddd;
  border-radius:10px;
  text-decoration:none;
  transition:all .2s ease;
}

.ch-logout:hover{
  background:#f5f5f5;
  color:#333;
  border-color:#999;
}

.ch-kiosk{
  max-width:720px;
}

.ch-table-wrap{
  margin-top:16px;
  border:1px solid #ddd;
  border-radius:12px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

.ch-table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}

.ch-table thead th{
  background:#f7f7f7;
  padding:10px;
  text-align:left;
  border-bottom:1px solid #ddd;
  white-space:nowrap;
  font-weight:600;
  font-size:13px;
}

.ch-table td{
  padding:10px;
  border-bottom:1px solid #eee;
}

.ch-table tbody tr:last-child td{
  border-bottom:none;
}

/* Grey background for returned/force_returned items in historial */
.ch-table tbody tr.ch-row-returned td {
  background-color: #f3f4f6 !important;
}

/* FIX #3: Total row formatting */
.ch-table tfoot td{
  background:#f7f7f7;
  font-weight:600;
  border-top:2px solid #ddd;
}

.ch-table tfoot td:first-child {
  text-align: right;
  padding-right: 20px;
}

.ch-table tfoot td:last-child {
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  color: #1e8e3e;
}

/* Hide mobile project name on desktop */
.ch-mobile-project {
  display: none;
}

/* Hide inline project name on desktop */
.ch-mobile-project-inline {
  display: none;
}

/* Hide inline project in Trabajador cell on desktop - will be in separate column */
.ch-project-inline {
  display: none;
}

/* FIX #2: Worker logs table - always show project */
.ch-table-worker td[data-label="Proyecto"] {
  background: #f9f9f9;
  font-weight: 600;
  border-bottom: 1px solid #e0e0e0;
}

.ch-fix{
  margin-top:14px;
  padding:14px;
  border-radius:14px;
  border:1px solid #f0b1b1;
  background:#fff1f1;
}

.ch-fix-alert{
  font-size:14px;
  font-weight:700;
  color:#c62828;
  margin-bottom:8px;
  padding:8px;
  background:#ffebee;
  border-radius:8px;
  text-align:center;
}

.ch-fix-title{
  font-size:14px;
  font-weight:600;
  margin-bottom:6px;
}

.ch-fix-sub{
  font-size:13px;
  color:#555;
  margin-bottom:12px;
}

.ch-fix .ch-input{
  background:#fff !important;
}

.ch-fix select.ch-input option{
  padding:8px;
  white-space:normal;
  word-wrap:break-word;
}

.ch-label{
  display:block;
  margin:10px 0 6px;
  font-size:13px;
  font-weight:600;
  color:#222;
}

.ch-input{
  width:100%;
  padding:10px 12px;
  border:1px solid #ddd;
  border-radius:12px;
  font-size:14px;
  background:#fff;
}

.ch-input-help{
  margin:6px 0 0;
  font-size:12px;
  color:#666;
  line-height:1.4;
}

.ch-btn-fix{
  margin-top:12px;
  background:#111;
  color:#fff;
}

.ch-box{
  padding:16px;
  border-radius:12px;
  margin-bottom:16px;
}

.ch-box.ch-ok{
  background:#eef7ee;
  border:1px solid #b8e0b8;
}

.ch-box.ch-error{
  background:#fff1f1;
  border:1px solid #f0b1b1;
}

/* Filter Button */
.ch-filter-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  background:#fff;
  border:1px solid #ddd;
  border-radius:10px;
  font-size:14px;
  font-weight:600;
  color:#333;
  cursor:pointer;
  transition:all .2s ease;
}

.ch-filter-btn:hover{
  background:#f9f9f9;
  border-color:#999;
}

/* Logs Section Titles */
.ch-kiosk h3,
.ch-admin h3,
.ch-logs-section h3{
  font-size:14px;
  font-weight:500;
  color:#444;
  margin:12px 0 8px 0;
}

.ch-logs-section {
  overflow-y: auto;
  overflow-x: auto;
  max-height: calc(100vh - 200px);
  margin-top: 30px;
  padding-bottom: 80px;
  -webkit-overflow-scrolling: touch;
}

/* Hide Details button on desktop (only show on mobile) */
.ch-logs-section .ch-table td[data-label="Detalles"],
.ch-logs-section .ch-table th:last-child {
  display: none;
}

@media (max-width: 768px) {
  .ch-logs-section .ch-table td[data-label="Detalles"] {
    display: flex !important;
  }
}

.ch-filter-btn svg{
  flex-shrink:0;
}

/* Settings Button */
.ch-settings-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  background:#fff;
  border:1px solid #ddd;
  border-radius:10px;
  color:#666;
  cursor:pointer;
  transition:all .2s ease;
  padding:0;
}

.ch-settings-btn:hover{
  background:#f9f9f9;
  border-color:#999;
  color:#333;
  transform:rotate(45deg);
}

.ch-settings-btn svg{
  flex-shrink:0;
  transition:transform .3s ease;
}

/* Modal */
/* ========================================
   UNIFIED MODAL SYSTEM
   ======================================== */

.ch-modal{
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.6);
  z-index:9999;
  align-items:flex-start;
  justify-content:center;
  overflow-y:auto;
  padding:20px 0;
}

/* Ensure Help modal overlays other modals */
#ch_help_modal{ z-index:10050; }


.ch-modal-content{
  background:#fff;
  border-radius:12px;
  width:95%;
  max-width:600px;
  margin:80px auto 40px;
  box-shadow:0 10px 40px rgba(0,0,0,0.3);
  animation:ch-modal-in .2s ease;
  display:flex;
  flex-direction:column;
  max-height:calc(100vh - 120px);
}

.ch-modal-large {
  max-width:1000px;
}

/* Tablet optimization */
@media (max-width: 1024px) {
  .ch-modal-large {
    max-width: 95%;
  }
}

/* Mobile optimization */
@media (max-width: 768px) {
  .ch-modal-content,
  .ch-modal-large {
    width: 98%;
    max-width: 100%;
    margin: 10px auto;
    max-height: calc(100vh - 20px);
    border-radius: 8px;
  }
  
  .ch-modal-header {
    padding: 16px !important;
  }
  
  .ch-modal-body {
    padding: 16px !important;
  }
  
  .ch-modal-footer {
    padding: 12px 16px !important;
  }
}

/* Enable horizontal scroll for tables on mobile */
@media (max-width: 768px) {
  .ch-tools-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Worker possessions modal - better mobile layout */
  #ch_tools_worker_possessions_modal .ch-modal-card {
    margin: 5px;
  }
  
  #ch_tools_worker_possessions_modal .ch-table {
    font-size: 13px;
  }
  
  #ch_tools_worker_possessions_modal .ch-table th,
  #ch_tools_worker_possessions_modal .ch-table td {
    padding: 8px 6px;
    white-space: nowrap;
  }
  
  /* Ensure action buttons are touch-friendly */
  #ch_tools_worker_possessions_modal .ch-btn-icon {
    min-width: 44px;
    min-height: 44px;
  }

  .ch-tools-table {
    min-width: 600px;
  }

  /* Larger touch targets for mobile */
  .ch-btn-icon {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* Signature canvas mobile optimization */
  #ch_tools_assign_signature_canvas,
  #ch_tools_confirm_return_signature_canvas,
  #ch_tools_force_return_signature_canvas {
    max-width: 100% !important;
    height: 150px !important;
  }
}

/* Stack modal footer buttons vertically on very small screens */
@media (max-width: 400px) {
  .ch-modal-footer {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .ch-modal-footer button {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 !important;
  }
}

/* Worker possessions table: ensure action column is visible */
#ch_tools_worker_possessions_table th:nth-child(1),
#ch_tools_worker_possessions_table td:nth-child(1) {
  width: 30%;
}
#ch_tools_worker_possessions_table th:nth-child(2),
#ch_tools_worker_possessions_table td:nth-child(2) {
  width: 20%;
}
#ch_tools_worker_possessions_table th:nth-child(3),
#ch_tools_worker_possessions_table td:nth-child(3) {
  width: 25%;
}
#ch_tools_worker_possessions_table th:nth-child(4),
#ch_tools_worker_possessions_table td:nth-child(4) {
  width: 25%;
  min-width: 60px;
  white-space: nowrap;
}

/* Assign tools modal: keep qty controls visible */
#ch_tools_assign_table td:nth-child(3),
#ch_tools_assign_table th:nth-child(3){
  min-width:220px;
}

/* Darker "Borrar firma" button (Assign tools) */
#ch_tools_assign_sign_clear{
  background:#e0e0e0;
  color:#222;
  border:1px solid #cfcfcf;
}
#ch_tools_assign_sign_clear:hover{
  background:#d0d0d0;
}

@keyframes ch-modal-in{
  from{
    opacity:0;
    transform:scale(0.95);
  }
  to{
    opacity:1;
    transform:scale(1);
  }
}

/* Modal Header - Fixed at top */
.ch-modal-header{
  padding:20px 24px;
  border-bottom:1px solid #e0e0e0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-shrink:0;
  background:#fff;
  border-radius:12px 12px 0 0;
}

.ch-modal-header-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.ch-btn-icon-help{
  padding:6px;
  border-radius:8px;
}

.ch-btn-icon-help svg{
  width:18px;
  height:18px;
}

.ch-btn-icon-help:hover{
  background:#f5f5f5;
  border-color:#1e8e3e;
}

.ch-modal-header h3{
  margin:0;
  font-size:20px;
  font-weight:600;
  color:#333;
}

/* FIX #10: Modal close button gray */
.ch-modal-close{
  background:#666;
  color:#fff;
  border:none;
  border-radius:8px;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  padding:4px 10px;
  width:auto;
  height:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 0.2s;
}

.ch-modal-close:hover{
  background:#555;
}

/* Modal Body - Scrollable */
.ch-modal-body{
  padding:24px;
  overflow-y:auto;
  flex:1;
  -webkit-overflow-scrolling:touch;
}

/* Top action button spacing */
.ch-modal-body > .ch-btn:first-child {
  margin-bottom:16px;
}

/* Modal Footer - Fixed at bottom */
.ch-modal-footer{
  padding:16px 24px;
  border-top:1px solid #e0e0e0;
  background:#f9f9f9;
  flex-shrink:0;
  border-radius:0 0 12px 12px;
}

.ch-modal-footer .ch-btn{
  width:100%;
  background:#1e8e3e;
}

/* Modal Tables - Desktop */
.ch-modal .ch-table {
  width:100%;
  border-collapse:collapse;
  font-size:14px;
  margin-top:16px;
}

.ch-modal .ch-table thead {
  background:#f5f5f5;
  border-bottom:2px solid #ddd;
}

.ch-modal .ch-table th {
  padding:12px 12px;
  text-align:left;
  font-weight:600;
  font-size:12px;
  color:#666;
  text-transform:uppercase;
  letter-spacing:0.5px;
}

.ch-modal .ch-table td {
  padding:14px 12px;
  text-align:left;
  border-bottom:1px solid #f0f0f0;
  vertical-align:middle;
}

.ch-modal .ch-table tbody tr:hover {
  background:#f9f9f9;
}

.ch-modal .ch-table td:last-child {
  text-align:center;
  width:100px;
}

/* Modal Table Buttons */
.ch-modal .ch-btn-link {
  display:inline-block;
  padding:6px 14px;
  background:#fff;
  border:1px solid #1e8e3e;
  border-radius:6px;
  color:#1e8e3e;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  transition:all 0.2s;
  text-decoration:none;
}

.ch-modal .ch-btn-link:hover {
  background:#1e8e3e;
  color:#fff;
}

/* Mobile Responsive Table */
@media screen and (max-width: 768px) {
  /* ===== MOBILE MODAL SYSTEM ===== */
  .ch-modal {
    padding:0;
    align-items:stretch;
  }
  
  .ch-modal-content {
    width:100%;
    max-width:100%;
    margin:0;
    border-radius:0;
    max-height:100vh;
    min-height:100vh;
  }
  
  .ch-modal-header {
    padding:16px 20px;
    position:sticky;
    top:0;
    z-index:10;
    border-radius:0;
  }
  
  .ch-modal-header h3 {
    font-size:18px;
  }
  
  .ch-modal-body {
    padding:16px 20px 100px 20px;
  }
  
  /* Compact modals (filters, settings, profile) need less padding */
  .ch-modal-compact .ch-modal-body {
    padding:16px 20px 16px 20px;
  }
  
  .ch-modal-footer {
    padding:12px 20px;
    position:sticky;
    bottom:0;
    z-index:10;
    border-radius:0;
  }
  
  /* Mobile Table - Card Layout */
  .ch-modal .ch-table {
    display:block;
    font-size:13px;
    margin-top:0;
  }
  
  .ch-modal .ch-table thead {
    display:none;
  }
  
  .ch-modal .ch-table tbody {
    display:block;
  }
  
  .ch-modal .ch-table tr {
    display:block;
    margin-bottom:12px;
    border:1px solid #ddd;
    border-radius:8px;
    padding:12px;
    background:#fff;
  }
  
  .ch-modal .ch-table td {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:8px 0;
    border:none;
    text-align:right;
  }
  
  .ch-modal .ch-table td::before {
    content:attr(data-label);
    font-weight:600;
    color:#666;
    text-align:left;
    padding-right:16px;
    font-size:12px;
  }
  
  .ch-modal .ch-table td:last-child {
    justify-content:flex-end;
    text-align:right;
    width:100%;
  }
  
  .ch-modal .ch-table tbody tr:hover {
    background:#fff;
  }

  /* Worker tools history: keep compact one-line rows on mobile */
  #ch_tools_modal #ch_my_tools_table {
    display: table;
    width: 100%;
    min-width: 520px;
    margin-top: 0;
  }

  #ch_tools_modal #ch_my_tools_table thead {
    display: table-header-group;
  }

  #ch_tools_modal #ch_my_tools_table tbody {
    display: table-row-group;
  }

  #ch_tools_modal #ch_my_tools_table tr {
    display: table-row;
    margin: 0;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
  }

  #ch_tools_modal #ch_my_tools_table td,
  #ch_tools_modal #ch_my_tools_table th {
    display: table-cell;
    white-space: nowrap;
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
  }

  #ch_tools_modal #ch_my_tools_table td::before {
    content: none;
  }

  #ch_tools_modal .ch-table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Admin modal: "Herramientas de [trabajador]" mobile card layout */
  #ch_tools_worker_possessions_modal #ch_tools_worker_possessions_table {
    display: block !important;
    width: 100% !important;
    margin-top: 0 !important;
  }

  #ch_tools_worker_possessions_modal #ch_tools_worker_possessions_table thead {
    display: none !important;
  }

  #ch_tools_worker_possessions_modal #ch_tools_worker_possessions_table tbody {
    display: block !important;
  }

  #ch_tools_worker_possessions_modal #ch_tools_worker_possessions_table tr {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px 8px !important;
    margin-bottom: 12px !important;
    border: 1px solid #ddd !important;
    border-radius: 12px !important;
    padding: 12px !important;
    background: #fff !important;
  }

  #ch_tools_worker_possessions_modal #ch_tools_worker_possessions_table td {
    display: block !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    white-space: normal !important;
  }

  #ch_tools_worker_possessions_modal #ch_tools_worker_possessions_table td::before {
    content: none !important;
  }

  #ch_tools_worker_possessions_modal #ch_tools_worker_possessions_table td:nth-child(1) {
    order: 1 !important;
    flex: 1 1 auto !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #111 !important;
    line-height: 1.2 !important;
    text-align: left !important;
  }

  #ch_tools_worker_possessions_modal #ch_tools_worker_possessions_table td:nth-child(2) {
    order: 2 !important;
    flex: 0 0 auto !important;
    font-size: 34px !important;
    font-weight: 700 !important;
    color: #dc3545 !important;
    line-height: 1 !important;
    text-align: right !important;
    margin-left: auto !important;
  }

  #ch_tools_worker_possessions_modal #ch_tools_worker_possessions_table td:nth-child(3) {
    order: 3 !important;
    flex: 1 1 auto !important;
    font-size: 14px !important;
    color: #666 !important;
    text-align: left !important;
  }

  #ch_tools_worker_possessions_modal #ch_tools_worker_possessions_table td:nth-child(4) {
    order: 4 !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
    text-align: right !important;
  }

  #ch_tools_worker_possessions_modal .ch-tools-worker-actions{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:8px !important;
    flex-wrap:nowrap !important;
  }

  #ch_tools_worker_possessions_modal #ch_tools_worker_possessions_table td:nth-child(4) .ch-btn-icon {
    display:inline-flex !important;
    width: 44px !important;
    height: 44px !important;
    max-width:44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding:0 !important;
    flex:0 0 44px !important;
  }

  /* Admin modal: "Asignar Herramientas" mobile card layout */
  #ch_tools_assign_modal #ch_tools_assign_table {
    display: block !important;
    width: 100% !important;
    margin-top: 0 !important;
  }

  #ch_tools_assign_modal #ch_tools_assign_table thead {
    display: none !important;
  }

  #ch_tools_assign_modal #ch_tools_assign_table tbody {
    display: block !important;
  }

  #ch_tools_assign_modal #ch_tools_assign_table tr {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px 8px !important;
    margin-bottom: 12px !important;
    border: 1px solid #ddd !important;
    border-radius: 12px !important;
    padding: 12px !important;
    background: #fff !important;
  }

  #ch_tools_assign_modal #ch_tools_assign_table td {
    display: block !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    white-space: normal !important;
  }

  #ch_tools_assign_modal #ch_tools_assign_table td::before {
    content: none !important;
  }

  #ch_tools_assign_modal #ch_tools_assign_table td:nth-child(1) {
    order: 1 !important;
    flex: 1 1 auto !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #111 !important;
    line-height: 1.2 !important;
    text-align: left !important;
  }

  #ch_tools_assign_modal #ch_tools_assign_table td:nth-child(2) {
    order: 2 !important;
    flex: 0 0 auto !important;
    font-size: 34px !important;
    font-weight: 700 !important;
    color: #dc3545 !important;
    line-height: 1 !important;
    text-align: right !important;
    margin-left: auto !important;
  }

  #ch_tools_assign_modal #ch_tools_assign_table td:nth-child(3) {
    order: 3 !important;
    flex: 1 0 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 8px !important;
  }

  #ch_tools_assign_modal #ch_tools_assign_table td:nth-child(3) .ch-qty-btn {
    width: 40px !important;
    height: 40px !important;
  }

  #ch_tools_assign_modal #ch_tools_assign_table td:nth-child(3) input[type="number"] {
    width: 110px !important;
    min-width: 110px !important;
    max-width: 110px !important;
    text-align: center !important;
    font-size: 22px !important;
    padding: 8px 10px !important;
  }
  
  /* ===== END MOBILE MODAL SYSTEM ===== */

  /* Show project name inline on mobile */
  .ch-mobile-project {
    display: inline !important;
  }
  
  /* Show inline project in admin table on mobile */
  .ch-mobile-project-inline {
    display: inline !important;
    color: #666;
    font-size: 12px;
    font-weight: 400;
    margin-left: 6px;
  }

  .ch-wrap{
    max-width:100% !important;
    padding:8px !important;
    margin: 0 !important;
    border:none !important;
    border-radius:0 !important;
  }

  .ch-kiosk{
    max-width:100%;
  }

  .ch-btn{
    font-size:18px;
    padding:16px 12px;
  }

  .ch-table-wrap{
    border:none;
    border-radius:0;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Main logs table - hide thead */
  .ch-logs-section .ch-table thead{
    display:none;
  }
  
  /* Main logs table - flex cards */
  .ch-logs-section .ch-table tbody tr{
    display:flex;
    flex-wrap:wrap;
    margin-bottom:12px;
    border:1px solid #ddd;
    border-radius:8px;
    overflow:hidden;
    position: relative;
  }

  .ch-logs-section .ch-table tbody tr:last-child{
    margin-bottom:0;
  }
  
  /* ADMIN VIEW ONLY: Show Trabajador cell (with inline project), hide separate Proyecto cell */
  .ch-logs-section .ch-table:not(.ch-table-worker) td[data-label="Trabajador"] {
    width: 100% !important;
    padding: 8px 12px !important;
    background: #f9f9f9 !important;
    border-bottom: 1px solid #e0e0e0 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    order: -2;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  
  /* Show inline project on mobile - right aligned - ADMIN VIEW ONLY */
  .ch-logs-section .ch-table:not(.ch-table-worker) td[data-label="Trabajador"] .ch-project-inline {
    display: inline !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #666 !important;
    white-space: nowrap;
  }
  
  /* HIDE separate project column in admin view - it's shown inline in Trabajador cell */
  .ch-logs-section .ch-table:not(.ch-table-worker) td[data-label="Proyecto"] {
    display: none !important;
  }
  
  .ch-logs-section .ch-table:not(.ch-table-worker) td[data-label="Trabajador"]::before {
    display: none !important;
  }
  
  /* FIX #2: Worker table - simple project display on mobile */
  .ch-table-worker tbody tr::before {
    display: none !important;
  }
  
  /* First entry needs extra top space in worker view to not be hidden under header */
  .ch-table-worker tbody tr:first-child {
    margin-top: 12px;
  }
  
  .ch-table-worker td[data-label="Proyecto"] {
    width: 100% !important;
    order: -1;
    display: flex !important;
    background: #f9f9f9 !important;
    border-bottom: 1px solid #e0e0e0 !important;
    font-weight: 600 !important;
    justify-content: flex-start !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
  }
  
  .ch-table-worker td[data-label="Proyecto"]::before {
    display: none !important;
  }
  
  /* Worker table: 5 columns on mobile (Fecha, Entrada, Salida, Total, Detalles) */
  .ch-table-worker td {
    display: flex;
  }
  
  /* Worker table: add header row with 5 labels (last one empty for eye icon) */
  .ch-table-worker tbody tr::before {
    content: 'FECHA        ENTRADA        SALIDA        TOTAL          ';
    width: 100%;
    order: -1;
    display: block;
    background: #f0f0f0;
    border-bottom: 1px solid #ddd;
    padding: 6px 0;
    font-size: 10px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    text-align: justify;
    text-align-last: justify;
    box-sizing: border-box;
    padding-left: 4%;
    padding-right: 4%;
  }
  
  /* Worker table: 5 columns layout */
  .ch-table-worker td[data-label="Fecha"],
  .ch-table-worker td[data-label="Entrada"],
  .ch-table-worker td[data-label="Salida"],
  .ch-table-worker td[data-label="Total"],
  .ch-table-worker td[data-label="Detalles"] {
    display: inline-flex !important;
    width: 20% !important;
    flex: 0 0 20% !important;
    padding: 12px 4px !important;
    border-bottom: none !important;
    border-right: 1px solid #f0f0f0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
  
  .ch-table-worker td[data-label="Total"] {
    font-weight: 700 !important;
  }
  
  .ch-table-worker td[data-label="Detalles"] {
    border-right: none !important;
  }
  
  /* Hide labels for worker compact row */
  .ch-table-worker td[data-label="Fecha"]::before,
  .ch-table-worker td[data-label="Entrada"]::before,
  .ch-table-worker td[data-label="Salida"]::before,
  .ch-table-worker td[data-label="Total"]::before,
  .ch-table-worker td[data-label="Detalles"]::before {
    display: none !important;
  }
  
  /* Header row with 5 labels - only for ADMIN logs table, NOT worker table */
  .ch-logs-section .ch-table:not(.ch-table-worker) tbody tr::before {
    content: 'FECHA          ENTRADA          SALIDA          TOTAL       ';
    width: 100%;
    order: -1;
    display: block;
    background: #f0f0f0;
    border-bottom: 1px solid #ddd;
    padding: 6px 0;
    font-size: 10px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    text-align: justify;
    text-align-last: justify;
    box-sizing: border-box;
    padding-left: 8%;
    padding-right: 8%;
  }

  .ch-logs-section .ch-table td{
    display:flex;
    justify-content:space-between;
    padding:10px 12px;
    border-bottom:1px solid #f0f0f0;
    text-align:right;
    width: 100%;
    box-sizing: border-box;
  }
  
  /* Compact row with 5 columns - all on one line */
  .ch-logs-section .ch-table td[data-label="Fecha"],
  .ch-logs-section .ch-table td[data-label="Entrada"],
  .ch-logs-section .ch-table td[data-label="Salida"],
  .ch-logs-section .ch-table td[data-label="Total"],
  .ch-logs-section .ch-table td[data-label="Detalles"] {
    display: inline-flex !important;
    width: 20% !important;
    flex: 0 0 20% !important;
    padding: 12px 4px !important;
    border-bottom: none !important;
    border-right: 1px solid #f0f0f0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
  
  .ch-logs-section .ch-table td[data-label="Total"] {
    font-weight: 700 !important;
    font-size: 14px !important;
  }
  
  .ch-logs-section .ch-table td[data-label="Detalles"] {
    border-right: none !important;
  }
  
  /* Hide labels for compact row */
  .ch-logs-section .ch-table td[data-label="Fecha"]::before,
  .ch-logs-section .ch-table td[data-label="Entrada"]::before,
  .ch-logs-section .ch-table td[data-label="Salida"]::before,
  .ch-logs-section .ch-table td[data-label="Total"]::before,
  .ch-logs-section .ch-table td[data-label="Detalles"]::before {
    display: none !important;
  }
  
  /* Hide Pausas and Horas trabajadas columns on mobile */
  .ch-logs-section .ch-table td[data-label="Pausas"],
  .ch-logs-section .ch-table td[data-label="Horas"],
  .ch-logs-section .ch-table td[data-label="Horas trabajadas"] {
    display: none !important;
  }
  
  /* Hide admin-only columns on mobile */
  .ch-logs-section .ch-table td[data-label="Salida real"],
  .ch-logs-section .ch-table td[data-label="Motivo salida tardía"],
  .ch-logs-section .ch-table td[data-label="GPS"],
  .ch-logs-section .ch-table td[data-label="Hash"] {
    display: none !important;
  }

  .ch-logs-section .ch-table td:last-child{
    border-bottom:none;
  }

  .ch-logs-section .ch-table td::before{
    content:attr(data-label);
    font-weight:700;
    text-align:left;
    flex:1;
  }

  .ch-logs-section .ch-table td strong{
    display:inline;
  }

  /* FIX #3: Mobile total row formatting */
  .ch-logs-section .ch-table tfoot{
    display:block;
    margin-top:12px;
  }

  .ch-logs-section .ch-table tfoot tr{
    display:flex;
    flex-wrap: wrap;
    justify-content:space-between;
    background:#f7f7f7;
    padding:12px;
    border-radius:8px;
    border:1px solid #ddd;
  }

  .ch-logs-section .ch-table tfoot td{
    display:inline;
    padding:0;
    border:none;
  }

  .ch-logs-section .ch-table tfoot td:first-child{
    flex: 1 0 70%;
    text-align: right;
    padding-right: 10px;
  }
  
  .ch-logs-section .ch-table tfoot td:last-child {
    flex: 1 0 30%;
    text-align: right;
  }

  .ch-filter-btn{
    font-size:13px;
    padding:8px 12px;
  }

  .ch-settings-btn{
    width:38px;
    height:38px;
  }

  .ch-logout{
    font-size:13px;
    padding:6px 12px;
  }

  .ch-modal{
    padding:0;
  }

  .ch-modal-content{
    max-width:100%;
    max-height:100vh;
    border-radius:0;
  }

  .ch-modal-compact .ch-modal-body{
    padding:10px 12px;
  }

  .ch-modal-compact .ch-modal-header{
    padding:10px 12px;
  }

  .ch-modal-compact .ch-input{
    padding:7px 9px;
    font-size:13px;
  }

  .ch-modal-compact .ch-label{
    font-size:11px;
    margin-top:5px;
    margin-bottom:3px;
  }

  .ch-modal-compact .ch-modal-footer{
    padding:8px 12px;
  }

  .ch-profile-avatar-sm{
    width:45px;
    height:45px;
  }

  .ch-profile-avatar-sm svg{
    width:24px;
    height:24px;
  }

  .ch-btn-sm{
    padding:7px 12px;
    font-size:12px;
  }
}

/* Tablet */
@media screen and (min-width: 641px) and (max-width: 768px) {
  .ch-table{
    font-size:13px;
  }

  .ch-table td,
  .ch-table th{
    padding:8px;
  }
}

/*Login Custom */
/* Ensure .ch-header-logo in login view has enough spacing */
.ch-wrap .ch-header-logo {
  margin-bottom: 30px; /* space below the logo */
  text-align: center;
}

/* Logo image sizing for login view: responsive and clear */
.ch-wrap .ch-header-logo img {
  max-width: 220px; /* slightly smaller than admin/worker views */
  height: auto;
  display: inline-block;
  vertical-align: middle;
}

/* Style error message in login form with some padding and font styling */
.ch-wrap .ch-msg-err {
  font-weight: 700;
  font-size: 16px;
  padding: 12px 16px;
  border-radius: 12px;
  margin-bottom: 20px;
}

/* Inputs inside login form */
.ch-wrap form p {
  margin-bottom: 18px;
}

.ch-wrap label strong {
  font-weight: 600;
  color: #222;
}

/* Input fields */
.ch-wrap input.ch-input {
  font-size: 15px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #ddd;
  transition: border-color 0.3s ease;
}

.ch-wrap input.ch-input:focus {
  border-color: #1e8e3e;
  outline: none;
}

/* Login button overrides for consistent size */
.ch-wrap button.ch-btn {
  font-size: 20px;
  padding: 16px 0;
  border-radius: 14px;
}

/* Responsive tweaks for small screens */
@media (max-width: 480px) {
  .ch-wrap {
    padding: 12px !important;
    margin: 20px 10px !important;
    max-width: 100% !important;
    border-radius: 12px !important;
    box-sizing: border-box;
  }

  .ch-wrap .ch-header-logo img {
    max-width: 160px;
    margin-bottom: 24px;
  }

  .ch-wrap button.ch-btn {
    font-size: 18px;
    padding: 14px 0;
  }
}

/* --------------------------------------------------
   Help system
--------------------------------------------------- */
.ch-help-search{margin-bottom:12px;}
.ch-help-search-hint{font-size:12px;color:#666;margin-top:6px;}
.ch-help-section{border:1px solid #eee;border-radius:10px;margin:10px 0;overflow:hidden;background:#fff;}
.ch-help-q{width:100%;text-align:left;padding:12px 14px;border:0;background:#fff;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:8px;}
.ch-help-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 18px;color:#555;}
.ch-help-q:hover{background:#fafafa;}
.ch-help-a{padding:0 14px 14px;color:#222;}
.ch-help-a ol,.ch-help-a ul{margin:10px 0 0 18px;}
.ch-help-note{margin-top:10px;padding:10px;border-radius:10px;background:#f6f8ff;border:1px solid #e6ebff;font-size:12px;color:#2b3a67;}
.ch-help-empty{padding:14px;color:#777;font-size:13px;border:1px dashed #ddd;border-radius:10px;}

/* =========================================
   ADMIN TOOLBAR — FINAL OVERRIDE (PASTE LAST)
   Fixes: centered toolbar + "line in middle"
   ========================================= */

/* The header row that contains the toolbar */
.ch-admin-header{
  position: relative !important;
  margin: 0 !important;
  padding: 8px 0 !important;

  display: flex !important;
  justify-content: center !important;   /* ✅ CENTER */
  align-items: center !important;

  background: transparent !important;   /* ✅ no white strip */
  border: 0 !important;                 /* ✅ remove any border-top line */
  box-shadow: none !important;
}

/* The toolbar "pill" */
.ch-admin-actions{
  display: inline-flex !important;      /* ✅ shrink to content (no full width line) */
  width: auto !important;
  max-width: calc(100vw - 16px) !important;

  gap: 8px !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;

  padding: 10px 14px !important;
  margin: 0 auto !important;

  background: #fff !important;
  border: 1px solid #e6e6e6 !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.06) !important;
}

/* Ensure icon buttons don't stretch or cause wrapping weirdness */
.ch-admin-actions .ch-btn-icon{
  flex: 0 0 auto !important;
}

.ch-admin-actions .ch-btn-icon.is-active{
  background:#eef2f7 !important;
  border-color:#cbd5e1 !important;
}

.ch-worker-actions .ch-worker-current-view{
  cursor:default;
}

.ch-role-badge{
  margin-top:8px;
  text-align:center;
  font-size:12px;
  font-weight:600;
  color:#475569;
}

.ch-role-badge.is-tools-admin{
  color:#0f766e;
}

/* Mobile fine-tuning */
@media (max-width: 768px){
  .ch-admin-header{
    padding: 6px 0 !important;
  }
  .ch-admin-actions{
    padding: 6px 8px !important;  /* Reduced from 8px 10px */
    border-radius: 12px !important;
    gap: 4px !important;  /* Reduced from 6px */
  }
  
  /* Reduce logs section top margin on mobile */
  .ch-logs-section {
    margin-top: 10px;
  }
  
  .ch-logs-section h3 {
    margin-top: 0;
    margin-bottom: 12px;
  }
}

/* Tiny phones - fit all icons in one row */
@media (max-width: 400px){
  .ch-admin-actions{
    padding: 4px 6px !important;  /* Even tighter */
    gap: 3px !important;  /* Minimal gap */
  }
  .ch-btn-icon{
    width: 36px !important;  /* Smaller from 40px */
    height: 36px !important;
    padding: 6px !important;
  }
  .ch-btn-icon svg{
    width: 20px !important;  /* Smaller from 22px */
    height: 20px !important;
  }
}

/* v5+ Tools inventory: allow older markup class name */
.ch-modal-card{ 
  background:#fff;
  border-radius:12px;
  width:95%;
  max-width:500px;
  margin:80px auto 40px;
  box-shadow:0 10px 40px rgba(0,0,0,0.3);
  animation:ch-modal-in .2s ease;
  display:flex;
  flex-direction:column;
  max-height:calc(100vh - 120px);
}

.ch-sign-wrap{ width:100%; }

/* ── Labeled toolbar buttons (Añadir / Asignar) ── */
.ch-btn-icon-label{
  width: auto !important;
  padding: 10px 16px !important;
  gap: 8px;
  border-radius: 10px !important;
  height: 48px;
}
.ch-btn-icon-label svg{
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.ch-btn-icon-label span{
  font-size: 14px;
  font-weight: 600;
  color: #333;
  white-space: nowrap;
}
.ch-btn-icon-label--add{
  background: #fff !important;
  border-color: #ddd !important;
}
.ch-btn-icon-label--add svg{ stroke: #333; }
.ch-btn-icon-label--add span{ color: #111; }
.ch-btn-icon-label--add:hover{
  background: #f0faf3 !important;
  border-color: #1e8e3e !important;
}
.ch-btn-icon-label--add:hover svg{ stroke: #1e8e3e; }
.ch-btn-icon-label--add:hover span{ color: #1e8e3e; }
.ch-btn-icon-label--assign{
  background: #fff !important;
  border-color: #ddd !important;
}
.ch-btn-icon-label--assign svg{ stroke: #333; }
.ch-btn-icon-label--assign span{ color: #111; }
.ch-btn-icon-label--assign:hover{
  background: #f0faf3 !important;
  border-color: #1e8e3e !important;
}
.ch-btn-icon-label--assign:hover svg{ stroke: #1e8e3e; }
.ch-btn-icon-label--assign:hover span{ color: #1e8e3e; }
@media (max-width: 400px){
  .ch-btn-icon-label{
    padding: 9px 12px !important;
    gap: 6px !important;
  }
  .ch-btn-icon-label span{
    font-size: 13px;
  }
}

/* ── Inventory pencil button ── */
.ch-btn-icon-small{
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
  flex-shrink: 0;
}
.ch-btn-icon-small:hover{
  background: #e8f5e9;
  border-color: #66bb6a;
}
.ch-btn-icon-small svg{
  stroke: #555;
  width: 18px;
  height: 18px;
}

.ch-btn-icon-small.ch-btn-danger{
  background: #dc3545 !important;
  border-color: #dc3545 !important;
}

.ch-btn-icon-small.ch-btn-danger:hover{
  background: #bb2d3b !important;
  border-color: #bb2d3b !important;
}

.ch-btn-icon-small.ch-btn-danger svg{
  stroke: #fff !important;
}

.ch-btn-icon-small.ch-btn-secondary{
  background: #6b7280 !important;
  border-color: #6b7280 !important;
}

.ch-btn-icon-small.ch-btn-secondary:hover{
  background: #4b5563 !important;
  border-color: #4b5563 !important;
}

.ch-btn-icon-small.ch-btn-secondary svg{
  stroke: #fff !important;
}

.ch-btn-icon-small.ch-btn-success{
  background: #10b981 !important;
  border-color: #10b981 !important;
}

.ch-btn-icon-small.ch-btn-success:hover{
  background: #059669 !important;
  border-color: #059669 !important;
}

.ch-btn-icon-small.ch-btn-success svg{
  stroke: #fff !important;
}

/* ── CRUD modal inputs — comfortable tap size ── */
.ch-tools-crud-input{
  font-size: 16px !important;
  padding: 14px 16px !important;
  border-radius: 12px !important;
  border: 1px solid #ddd;
  width: 100%;
  min-width: 280px;
  box-sizing: border-box;
  background: #fff;
  transition: border-color .2s ease;
}
select.ch-tools-crud-input{
  min-width: 0; /* Selects always full width */
  cursor: pointer;
}
.ch-tools-crud-input:focus{
  border-color: #1e8e3e;
  outline: none;
  box-shadow: 0 0 0 3px rgba(30,142,62,.15);
}
input[type="number"].ch-tools-crud-input{
  -moz-appearance: textfield;
  max-width: 140px;
}

/* ── Quantity inputs inside the Assign Tools table must stay narrow ── */
#ch_tools_assign_table input[type="number"].ch-tools-crud-input{
  width: 72px !important;
  min-width: 0 !important;
  max-width: 72px !important;
  padding: 10px 10px !important;
}
input[type="number"].ch-tools-crud-input::-webkit-inner-spin-button,
input[type="number"].ch-tools-crud-input::-webkit-outer-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
@media (max-width: 480px){
  .ch-tools-crud-input{
    min-width: 0;
  }
  input[type="number"].ch-tools-crud-input{
    max-width: none;
  }
  /* Larger selects and inputs in tools modals on mobile */
  #ch_tools_assign_worker.ch-input,
  #ch_tools_assign_table input[type="number"] {
    font-size: 16px !important;
    padding: 14px 12px !important;
    min-height: 48px;
  }
  /* Taller signature canvas on mobile */
  #ch_tools_assign_sign_canvas {
    height: 180px !important;
  }
}

/* ── Settings modal rows + toggles ── */
.ch-settings-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid #eee;
}
.ch-settings-row:last-child{
  border-bottom: none;
}
.ch-settings-row-text{
  flex: 1;
  min-width: 0;
}
.ch-settings-label{
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #222;
  margin-bottom: 3px;
}
.ch-settings-desc{
  display: block;
  font-size: 12px;
  color: #777;
  line-height: 1.4;
}
.ch-toggle{
  position: relative;
  width: 48px;
  height: 28px;
  flex-shrink: 0;
  cursor: pointer;
}
.ch-toggle input{
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.ch-toggle-track{
  position: absolute;
  inset: 0;
  background: #ccc;
  border-radius: 28px;
  transition: background .2s ease;
}
.ch-toggle-track::after{
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: left .2s ease;
}
.ch-toggle input:checked + .ch-toggle-track{
  background: #1e8e3e;
}
.ch-toggle input:checked + .ch-toggle-track::after{
  left: 23px;
}
.ch-toggle input:focus + .ch-toggle-track{
  box-shadow: 0 0 0 3px rgba(30,142,62,.2);
}

/* ── Admin table hash cell — click to copy ── */
.ch-admin-hash{
  font-family: monospace;
  font-size: 11.5px;
  color: #555;
  cursor: pointer;
  user-select: none;
}
.ch-admin-hash:hover{
  background: #e8f5e9;
  color: #1e8e3e;
}


/* Tools assign modal: keep qty controls compact */
#ch_tools_assign_modal .ch-modal-card{max-width:980px;}
#ch_tools_assign_table{table-layout:fixed;}
#ch_tools_assign_table th:nth-child(3), #ch_tools_assign_table td:nth-child(3){width:160px;}
#ch_tools_assign_table input.ch-tools-crud-input, #ch_tools_assign_table input[data-tool]{width:48px !important; max-width:48px; min-width:48px; padding:6px 6px; }
#ch_tools_assign_table .ch-qty-btn{width:32px !important; height:32px !important;}
#ch_epi_assign_table input.ch-tools-crud-input, #ch_epi_assign_table input[data-epi]{width:48px !important; max-width:48px; min-width:48px; padding:6px 6px !important; text-align:center !important;}
#ch_epi_assign_table .ch-qty-btn-epi{width:32px !important; height:32px !important;}

/* ===== Final UI consistency overrides ===== */
.ch-fixed-header .ch-tools-sub-bar{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  width:100% !important;
  margin:0 auto !important;
}

.ch-tools-historial-filter-wrap .ch-btn-filter{
  border-color:#d1d5db !important;
  background:#f9fafb !important;
}

.ch-tools-historial-filter-wrap .ch-btn-filter:hover{
  border-color:#9ca3af !important;
  background:#f3f4f6 !important;
}

.ch-tools-historial-filter-wrap .ch-btn-filter svg{
  stroke:#4b5563 !important;
}

/* Keep worker sections flush to the top */
.ch-workerarea{
  margin-top:0 !important;
}

.ch-btn-icon.ch-btn-eye{
  border-color:#d1d5db !important;
  background:#f3f4f6 !important;
}

.ch-btn-icon.ch-btn-eye:hover{
  border-color:#9ca3af !important;
  background:#e5e7eb !important;
}

.ch-btn-icon.ch-btn-eye svg{
  stroke:#4b5563 !important;
}

.ch-profile-footer-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
}

.ch-table-pager{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  margin-top:12px;
  padding:6px;
  border:1px solid #e5e7eb;
  background:linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-radius:999px;
  box-shadow:0 6px 16px rgba(15, 23, 42, 0.06);
}

.ch-table-pager-info{
  font-size:12px;
  color:#0f172a;
  min-width:108px;
  text-align:center;
  font-weight:600;
  letter-spacing:.2px;
  background:#eef2ff;
  border:1px solid #c7d2fe;
  border-radius:999px;
  padding:6px 10px;
}

.ch-table-pager-btn{
  border:1px solid #dbe4f0;
  background:#ffffff;
  color:#1e293b;
  border-radius:999px;
  min-width:34px;
  height:34px;
  padding:0 10px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  transition:all .16s ease;
  box-shadow:0 1px 3px rgba(15, 23, 42, 0.08);
}

.ch-table-pager-btn:hover{
  background:#f8fafc;
  border-color:#94a3b8;
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(15, 23, 42, 0.12);
}

.ch-table-pager-btn:active{
  transform:translateY(0);
  box-shadow:0 2px 6px rgba(15, 23, 42, 0.1);
}

.ch-table-pager-btn:disabled{
  opacity:.5;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
  background:#f8fafc;
  border-color:#e5e7eb;
}