* { box-sizing: border-box; margin: 0; padding: 0; }

/* Dark theme (default) */
:root {
  --bg: #1a1a2e;
  --surface: #16213e;
  --card: #0f3460;
  --accent: #e94560;
  --accent-light: #ff6b81;
  --text: #f0f0f0;
  --text-muted: #b0b0c0;
  --success: #2ecc71;
  --border: #2a2a4a;
  --chip-adult: #2980b9;
  --chip-child: #d35400;
  --chip-text: #ffffff;
  --input-bg: #0d1b2a;
  --input-border: #2a2a4a;
  --table-header: #0f3460;
  --table-alt: #16213e;
  --total-bg: #0f3460;
  --grand-total-bg: #e94560;
  --grand-total-text: #ffffff;
  --suggestion-bg: #0f3460;
  --suggestion-hover: #16213e;
  --modal-overlay: rgba(0,0,0,0.6);
  --modal-bg: #16213e;
}

/* Light theme — WCAG AA contrast ratios verified */
[data-theme="light"] {
  --bg: #f5f5f7;
  --surface: #ffffff;
  --card: #e8edf2;
  --accent: #c0392b;
  --accent-light: #a93226;
  --text: #1a1a2e;
  --text-muted: #555566;
  --success: #1e8449;
  --border: #ccc;
  --chip-adult: #2471a3;
  --chip-child: #c0392b;
  --chip-text: #ffffff;
  --input-bg: #ffffff;
  --input-border: #aab;
  --table-header: #dce3ea;
  --table-alt: #f0f2f5;
  --total-bg: #d5dce4;
  --grand-total-bg: #c0392b;
  --grand-total-text: #ffffff;
  --suggestion-bg: #ffffff;
  --suggestion-hover: #eef1f5;
  --modal-overlay: rgba(0,0,0,0.35);
  --modal-bg: #ffffff;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  transition: background 0.2s, color 0.2s;
}

.container { max-width: 900px; margin: 0 auto; padding: 1rem; }

h1 { text-align: center; margin-bottom: 1.5rem; font-size: 1.5rem; }
h2 { font-size: 1.1rem; margin-bottom: 0.75rem; color: var(--accent-light); }

/* Login */
#login-view {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; min-height: 80dvh; gap: 1rem;
}
#login-view h1 { font-size: 2rem; }
#login-form {
  display: flex; flex-direction: column; gap: 0.75rem;
  background: var(--surface); padding: 2rem; border-radius: 12px;
  width: 100%; max-width: 320px; border: 1px solid var(--border);
}
#login-form input {
  padding: 0.75rem; border-radius: 8px; border: 1px solid var(--input-border);
  background: var(--input-bg); color: var(--text); font-size: 1rem;
}
#login-error { color: var(--accent); font-size: 0.85rem; display: none; }

button, .btn {
  padding: 0.6rem 1.2rem; border-radius: 8px; border: none;
  background: var(--accent); color: #fff; font-size: 0.95rem;
  cursor: pointer; font-weight: 600; transition: opacity 0.15s;
}
button:hover { opacity: 0.85; }
button.secondary { background: var(--card); color: var(--text); }
button.danger { background: #c0392b; color: #fff; }
button.small { padding: 0.3rem 0.7rem; font-size: 0.8rem; }
#info-btn { font-size: 1.2rem; line-height: 1; padding: 0.3rem 0.6rem; }

button.yo-voy {
  padding: 0.25rem 0.6rem; font-size: 0.75rem; border-radius: 6px;
  background: var(--success); color: #fff; white-space: nowrap;
}
button.yo-voy.active { background: var(--accent); }

/* Header */
.header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1.5rem; flex-wrap: wrap; gap: 0.5rem;
}
.header-right { display: flex; align-items: center; gap: 0.5rem; }
.header .user-info { font-size: 0.9rem; color: var(--text-muted); }

/* Tabs */
.tabs {
  display: flex; gap: 0.25rem; margin-bottom: 1rem;
}
.tab-btn {
  flex: 1; background: var(--surface); border-radius: 8px 8px 0 0;
  padding: 0.6rem; font-size: 0.95rem; color: var(--text);
  border: 1px solid var(--border); border-bottom: none;
}
.tab-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Meal rows */
.meal-row {
  background: var(--surface); border-radius: 10px; margin-bottom: 0.5rem;
  overflow: hidden; border: 1px solid var(--border);
}
.meal-row-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.75rem 1rem; cursor: pointer; user-select: none;
  transition: background 0.15s;
}
.meal-row-header:hover { background: var(--card); }
.meal-row-header .meal-label { font-weight: 600; font-size: 0.95rem; }
.meal-row-header .meal-label::before {
  content: '▸ '; font-size: 0.8rem; color: var(--text-muted);
}
.meal-row.expanded .meal-row-header .meal-label::before {
  content: '▾ ';
}
.meal-row-header .meal-counts {
  display: flex; gap: 0.75rem; align-items: center; font-size: 0.85rem;
}
.meal-row-header .count-adult { color: var(--chip-adult); font-weight: 600; }
.meal-row-header .count-child { color: var(--chip-child); font-weight: 600; }

.meal-row-body {
  display: none; padding: 0 1rem 1rem;
}
.meal-row.expanded .meal-row-body { display: block; }

.guest-section { margin-bottom: 0.75rem; }
.guest-section-label {
  font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.4rem;
  text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600;
}

/* Chips */
.chips-container {
  display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center;
}
.chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.35rem 0.6rem; border-radius: 20px;
  font-size: 0.85rem; font-weight: 500;
  min-height: 36px; color: var(--chip-text);
}
.chip.adulto { background: var(--chip-adult); }
.chip.nino { background: var(--chip-child); }
.chip.adulto_invitado { background: transparent; border: 2px dashed var(--chip-adult); color: var(--chip-adult); }
.chip.nino_invitado { background: transparent; border: 2px dashed var(--chip-child); color: var(--chip-child); }
.chip.adulto_invitado .chip-x, .chip.nino_invitado .chip-x { color: inherit; }
.inv-check-wrap {
  display: inline-flex; align-items: center; gap: 0.2rem;
  font-size: 0.75rem; color: var(--text-muted); white-space: nowrap;
  user-select: none; cursor: pointer;
}
.inv-check-wrap input { margin: 0; cursor: pointer; }
.chip .chip-x {
  display: none; cursor: pointer; font-size: 1rem;
  line-height: 1; padding: 0 0.15rem; border-radius: 50%;
  margin-left: 0.1rem;
}
.chip:hover .chip-x,
.chip:active .chip-x { display: inline; }

/* Autocomplete input */
.guest-input-wrap {
  position: relative; display: inline-flex; flex: 1; min-width: 140px;
}
.guest-input {
  width: 100%; padding: 0.4rem 0.6rem; border-radius: 8px;
  border: 1px solid var(--input-border); background: var(--input-bg);
  color: var(--text); font-size: 0.85rem;
}
.guest-input::placeholder { color: var(--text-muted); }
.suggestions {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  background: var(--suggestion-bg); border: 1px solid var(--border);
  border-radius: 0 0 8px 8px; max-height: 160px; overflow-y: auto;
  z-index: 10;
}
.suggestions.visible { display: block; }
.suggestion-item {
  padding: 0.5rem 0.6rem; cursor: pointer; font-size: 0.85rem;
  display: flex; justify-content: space-between; color: var(--text);
}
.suggestion-item:hover { background: var(--suggestion-hover); }
.suggestion-item .sug-type {
  font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase;
}

/* Modal */
.modal {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: var(--modal-overlay); z-index: 100;
  display: flex; align-items: center; justify-content: center;
}
.modal-content {
  background: var(--modal-bg); border-radius: 12px; padding: 1.5rem;
  max-width: 400px; width: 90%; max-height: 80vh; overflow-y: auto;
  border: 1px solid var(--border);
}
.modal-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1rem;
}
.modal-header button { font-size: 1.2rem; }
.summary-meal {
  padding: 0.4rem 0; font-size: 0.9rem; border-bottom: 1px solid var(--border);
}
.summary-meal:last-child { border-bottom: none; }

/* Dashboard */
.dashboard-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem;
}
.dashboard-table {
  width: 100%; border-collapse: collapse;
}
.dashboard-table th, .dashboard-table td {
  border: 1px solid var(--border); padding: 0.6rem 0.75rem;
  text-align: center; font-size: 0.9rem;
}
.dashboard-table th {
  background: var(--table-header); font-weight: 600; white-space: nowrap;
}
.dashboard-table td.label-col {
  text-align: left; font-weight: 600; white-space: nowrap;
  background: var(--table-alt);
}
.dashboard-table .count-cell {
  cursor: pointer; user-select: none; position: relative;
  transition: background 0.15s;
}
.dashboard-table .count-cell:hover { background: var(--card); }
.dashboard-table .count-cell.adult-cell { color: var(--chip-adult); }
.dashboard-table .count-cell.child-cell { color: var(--chip-child); }
.dashboard-table .count-cell .cell-count {
  font-size: 1.1rem; font-weight: 700;
}
.dashboard-table .names-detail {
  display: none; font-size: 0.8rem; color: var(--text-muted);
  font-weight: 400; margin-top: 0.3rem; text-align: left;
  line-height: 1.4;
}
.dashboard-table .count-cell.expanded .names-detail { display: block; }
.dashboard-table .total-row td {
  background: var(--total-bg); font-weight: 700; font-size: 1rem;
}
.dashboard-table .total-row td.label-col {
  background: var(--total-bg);
}
.dashboard-table .grand-total-row td {
  background: var(--grand-total-bg); color: var(--grand-total-text);
  font-weight: 700; font-size: 1.05rem;
}

/* Desktop: keep pointer cursor on meal headers */
@media (min-width: 769px) {
  .meal-row-header { cursor: pointer; }
}

/* Admin */
#admin-section {
  margin-top: 2rem; border-top: 1px solid var(--border);
  padding-top: 1.5rem;
}
.admin-form {
  display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap;
}
.admin-form input {
  padding: 0.5rem; border-radius: 8px; border: 1px solid var(--input-border);
  background: var(--input-bg); color: var(--text); font-size: 0.9rem;
  flex: 1; min-width: 120px;
}
.user-list { list-style: none; }
.user-list li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.5rem 0.75rem; background: var(--surface); margin-bottom: 0.25rem;
  border-radius: 6px; font-size: 0.9rem; border: 1px solid var(--border);
}
.user-list li .admin-badge {
  font-size: 0.7rem; background: var(--accent); color: #fff;
  padding: 0.15rem 0.4rem; border-radius: 4px; margin-left: 0.5rem;
}

@media (max-width: 600px) {
  .container { padding: 0.5rem; }
  h1 { font-size: 1.2rem; }
  .header { flex-direction: column; align-items: stretch; }
  .header-right { justify-content: flex-end; }
  .dashboard-table th, .dashboard-table td { padding: 0.4rem; font-size: 0.8rem; }
}

/* Print styles */
@media print {
  body { background: #fff !important; color: #000 !important; }
  #login-view, .header, .tabs, #tab-apuntarse, #admin-section,
  #my-summary-modal, .dashboard-header button, #print-btn { display: none !important; }

  #app-view { display: block !important; }
  #tab-resumen { display: block !important; }
  .container { max-width: 100%; padding: 0; }

  .dashboard-header h2 { color: #000 !important; }
  .dashboard-table { border: 2px solid #000; }
  .dashboard-table th, .dashboard-table td {
    border: 1px solid #666; color: #000 !important; background: #fff !important;
  }
  .dashboard-table th { background: #eee !important; }
  .dashboard-table .total-row td { background: #ddd !important; }
  .dashboard-table .grand-total-row td { background: #bbb !important; color: #000 !important; }
  .dashboard-table .count-cell.adult-cell { color: #1a5276 !important; }
  .dashboard-table .count-cell.child-cell { color: #922b21 !important; }
  .dashboard-table .names-detail { display: block !important; color: #333 !important; }

  @page { margin: 1.5cm; }
}