:root{
  --bg:#FAF8F2;
  --panel:#F3F1E7;
  --accent:#1F7A68;
  --accent-hover:#185f51;
  --accent-pink:#D45A93;
  --text:#2E2E2B;
  --text-secondary:#6E6A63;
  --border:#D8D2C5;
  --hover-bg:#EAE7DC;
}
*{box-sizing:border-box;touch-action:manipulation}body{font-family:Inter,system-ui,Arial,sans-serif;background:var(--bg);color:var(--text);margin:0;padding:16px}
.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.layout{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.panel{background:var(--panel);padding:12px;border-radius:8px;box-shadow:0 6px 18px rgba(16,24,40,.04)}
.items{display:flex;flex-direction:column;gap:8px}
.item{display:flex;justify-content:space-between;align-items:center;padding:8px;border-radius:6px;border:1px solid var(--border)}
input,textarea,select{width:100%;padding:8px;border-radius:6px;border:1px solid var(--border);background:#FAF8F2;color:var(--text)}
button{background:var(--accent);color:#fff;border:0;padding:8px 10px;border-radius:8px;cursor:pointer}
.row{display:flex;gap:8px;align-items:center}
.auth{max-width:420px;margin:48px auto;padding:16px;background:var(--panel);border-radius:8px}
.hidden{display:none}
.small{background:#e0eeeb;color:#1F7A68;padding:6px 8px;border-radius:6px;text-decoration:none}
.error{color:#bf1e2e}

/* Drag & drop styles */
.item.drag-over{outline:2px dashed rgba(31,122,104,0.6);}
.item.dragging{opacity:0.5}

/* Navigation */
.nav{background:var(--bg);border-bottom:1px solid var(--border);margin-bottom:16px;position:sticky;top:0;z-index:999}
.nav-container{max-width:1400px;margin:0 auto;padding:0 16px}
.nav-header{display:flex;justify-content:space-between;align-items:center;padding:12px 0}
.nav .brand{font-weight:700;color:var(--accent);text-decoration:none;font-size:1.2rem}
.nav-toggle{display:none;flex-direction:column;gap:4px;background:transparent;border:none;cursor:pointer;padding:8px}
.nav-toggle span{display:block;width:24px;height:3px;background:var(--text);border-radius:2px;transition:all 0.3s}
.nav-toggle.active span:nth-child(1){transform:rotate(45deg) translate(6px, 6px)}
.nav-toggle.active span:nth-child(2){opacity:0}
.nav-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(6px, -6px)}
.nav-menu{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px}
.nav-links{display:flex;gap:4px}
.nav-links a{color:var(--text);text-decoration:none;padding:8px 14px;border-radius:6px;transition:all 0.2s;font-size:0.95rem}
.nav-links a:hover{background:var(--hover-bg)}
.nav-links a.active{background:var(--accent);color:#ffffff;font-weight:600}
.nav-user{display:flex;align-items:center;gap:12px}
.nav-user .user-name{color:var(--text-secondary);font-size:0.9rem}
.nav-user a{color:var(--accent);text-decoration:none;padding:6px 12px;border-radius:6px;transition:all 0.2s}
.nav-user a:hover{background:var(--hover-bg)}

/* Language Dropdown */
.lang-dropdown{position:relative;margin-right:8px}
.lang-dropdown-toggle{display:flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--border);border-radius:6px;background:var(--panel);cursor:pointer;font-size:0.9rem;color:var(--text-secondary);transition:all 0.2s}
.lang-dropdown-toggle:hover{border-color:var(--accent);background:var(--hover-bg)}
.lang-dropdown-toggle .lang-flag{font-size:1.1rem}
.lang-dropdown-toggle .lang-code{font-weight:600}
.lang-dropdown-toggle .lang-arrow{font-size:0.7rem;color:#666;transition:transform 0.2s}
.lang-dropdown.open .lang-dropdown-toggle .lang-arrow{transform:rotate(180deg)}
.lang-dropdown-menu{display:none;position:absolute;top:calc(100% + 4px);right:0;background:var(--panel);border:1px solid var(--border);border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.08);min-width:140px;z-index:1002;overflow:hidden}
.lang-dropdown.open .lang-dropdown-menu{display:block}
.lang-option{display:flex;align-items:center;gap:8px;padding:10px 14px;color:var(--text);text-decoration:none;transition:background 0.2s;font-size:0.9rem}
.lang-option:hover{background:var(--hover-bg)}
.lang-option.active{background:#e0eeeb;color:var(--accent);font-weight:600}
.lang-option .lang-flag{font-size:1.1rem}

/* Nav Dropdown */
.nav-dropdown{position:relative}
.nav-dropdown-toggle{color:var(--text);text-decoration:none;padding:8px 14px;border-radius:6px;transition:all 0.2s;font-size:0.95rem;cursor:pointer;display:inline-block}
.nav-dropdown-toggle:hover{background:var(--hover-bg)}
.nav-dropdown-toggle.active{background:var(--accent);color:#ffffff;font-weight:600}
.nav-dropdown-menu{display:none;position:absolute;top:100%;left:0;background:var(--panel);border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,0.1);min-width:160px;z-index:1001;padding:4px 0;border:1px solid var(--border)}
.nav-dropdown-menu a{display:block;padding:10px 16px;color:var(--text);text-decoration:none;transition:background 0.2s}
.nav-dropdown-menu a:hover{background:var(--hover-bg)}
.nav-dropdown:hover .nav-dropdown-menu{display:block}

/* Mobile Navigation */
@media (max-width: 768px) {
  .nav-toggle{display:flex}
  .nav-menu{display:none;flex-direction:column;gap:0;padding:0;position:absolute;top:100%;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--border);box-shadow:0 4px 6px rgba(0,0,0,0.06);z-index:1000}
  .nav-menu.active{display:flex}
  .nav-links{flex-direction:column;width:100%;gap:0}
  .nav-links a{padding:14px 16px;border-radius:0;border-bottom:1px solid var(--border);font-size:1rem}
  .nav-links a.active{border-left:4px solid var(--accent);background:var(--hover-bg);color:var(--text);font-weight:600}
  .nav-user{flex-direction:column;width:100%;gap:0;padding:8px 0;border-top:2px solid var(--border)}
  .nav-user .user-name{padding:12px 16px;width:100%;font-size:0.9rem;background:var(--hover-bg)}
  .nav-user a{width:100%;text-align:left;padding:12px 16px;border-radius:0}
  /* Mobile language dropdown */
  .lang-dropdown{width:100%;margin:0;padding:0}
  .lang-dropdown-toggle{width:100%;justify-content:center;padding:12px 16px;border:none;border-radius:0;border-bottom:1px solid var(--border)}
  .lang-dropdown-menu{position:static;border:none;border-radius:0;box-shadow:none;background:var(--hover-bg)}
  .lang-option{padding:12px 16px;justify-content:center}
  /* Mobile dropdown */
  .nav-dropdown{width:100%}
  .nav-dropdown-toggle{display:block;padding:14px 16px;border-radius:0;border-bottom:1px solid var(--border);font-size:1rem;width:100%}
  .nav-dropdown-toggle.active{border-left:4px solid var(--accent);background:var(--hover-bg);color:var(--text)}
  .nav-dropdown-menu{position:static;box-shadow:none;border-radius:0;background:var(--hover-bg);padding:0;border:none}
  .nav-dropdown-menu a{padding:12px 16px 12px 32px;border-bottom:1px solid var(--border)}
  .nav-dropdown:hover .nav-dropdown-menu{display:none}
  .nav-dropdown.open .nav-dropdown-menu{display:block}
}

/* Tooltip for saveAndOrder */
.tooltip{position:absolute;left:50%;transform:translateX(-50%);top:40px;background:#111;color:#fff;padding:6px 8px;border-radius:6px;font-size:12px;white-space:nowrap;display:none}
.row div:hover .tooltip{display:block}

/* Modal styles */
.modal{position:fixed;inset:0;background:rgba(2,6,23,0.5);display:flex;align-items:center;justify-content:center;z-index:1200}
.modal.hidden{display:none}
.modal-content{background:var(--panel);padding:18px;border-radius:10px;width:90%;max-width:600px !important;max-height:80vh;overflow:auto;position:relative;box-sizing:border-box;border:1px solid var(--border)}
.modal-content *{box-sizing:border-box;touch-action:manipulation}
.modal-close{position:absolute;right:12px;top:10px;background:transparent;border:0;font-size:20px;cursor:pointer}
.modal-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}

/* Modal responsive para móvil */

/* Kanban mobile horizontal scroll styles */
@media (max-width: 768px) {
  .kanban-board {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    width: 100%;
    box-sizing: border-box;
    padding-bottom: 16px;
    gap: 16px;
    scroll-snap-type: x mandatory;
  }
  .kanban-column {
    min-width: 60vw;
    max-width: 65vw;
    flex: 0 0 auto;
    scroll-snap-align: start;
    margin-right: 32px;
  }
  .kanban-board::-webkit-scrollbar {
    display: none;
  }
  .kanban-board {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}
@media (max-width: 768px) {
  .modal-content{width:95% !important;max-width:100% !important;padding:1.5rem;margin:1rem auto}
}

/* Mobile layout - single column */
@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr;
  }

  /* Hide aside panel on mobile - use mobile cart modal instead */
  .layout > aside.panel {
    display: none;
  }

  /* Show mobile cart button on mobile */
  .mobile-cart-btn {
    display: flex !important;
    align-items: center;
    gap: 0.25rem;
  }
}

/* Mobile keyboard-friendly search layout */
@media (max-width: 768px) {
  body {
    padding: 8px;
  }

  /* Make search panel full height when keyboard is open */
  .panel:has(#searchResults) {
    min-height: auto;
    display: flex;
    flex-direction: column;
  }

  .panel:has(#searchResults) h2 {
    flex-shrink: 0;
    margin-bottom: 8px;
    font-size: 1.2rem;
  }

  .panel:has(#searchResults) .row {
    flex-shrink: 0;
  }

  /* Search results should fill available space and scroll */
  #searchResults {
    flex: 1;
    overflow-y: auto;
    max-height: 60vh;
    -webkit-overflow-scrolling: touch;
  }

  /* Compact search input styling */
  #search {
    padding: 10px 12px !important;
    font-size: 16px !important; /* Prevents iOS zoom on focus */
  }

  #categorySelect {
    padding: 10px 8px !important;
    font-size: 16px !important;
  }

  /* Compact search result items */
  #searchResults .item {
    padding: 10px !important;
    margin-bottom: 6px;
  }
}

/* Mobile cart modal styles */
.mobile-cart-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 2000;
  align-items: flex-end;
  justify-content: center;
}
.mobile-cart-modal.active {
  display: flex;
}
.mobile-cart-content {
  background: var(--panel);
  width: 100%;
  max-height: 85vh;
  border-radius: 16px 16px 0 0;
  padding: 1.5rem;
  overflow-y: auto;
  animation: slideUp 0.3s ease-out;
}
@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.mobile-cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}
.mobile-cart-close {
  background: var(--hover-bg);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cart-count {
  background: #dc3545;
  color: white;
  font-size: 0.75rem;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}

/* Prevent iOS Safari from zooming on input focus (requires ≥16px font-size) */
@media (max-width: 768px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}