/* /js/styles.css
   Custom shared styles for the application.
   Complements Tailwind CSS with specific component styles.
   RELEVANT FILES: index.html, precios.html */

html {
  color-scheme: light dark;
}

body {
  font-family: 'Inter', sans-serif;
  /* Base background and text colors are now handled by Tailwind's dark/light mode classes on the body tag */
}

/* Dark mode overrides to force class-based toggling when using the Tailwind CDN build */
.dark body { background-color: #111827; color: #e5e7eb; }
.dark .dark\:bg-gray-900 { background-color: #111827; }
.dark .dark\:bg-gray-800 { background-color: #1f2937; }
.dark .dark\:bg-gray-700 { background-color: #374151; }
.dark .dark\:bg-gray-600 { background-color: #4b5563; }
.dark .dark\:bg-green-700 { background-color: #15803d; }
.dark .dark\:bg-green-600 { background-color: #16a34a; }
.dark .dark\:bg-green-500 { background-color: #22c55e; }
.dark .dark\:bg-blue-600 { background-color: #2563eb; }
.dark .dark\:bg-blue-500 { background-color: #3b82f6; }
.dark .dark\:bg-red-600 { background-color: #dc2626; }
.dark .dark\:bg-red-500 { background-color: #ef4444; }
.dark .dark\:bg-amber-700 { background-color: #b45309; }
.dark .dark\:bg-amber-600 { background-color: #d97706; }
.dark .dark\:bg-amber-500 { background-color: #f59e0b; }
.dark .dark\:bg-yellow-700 { background-color: #a16207; }
.dark .dark\:bg-yellow-600 { background-color: #ca8a04; }
.dark .dark\:bg-yellow-500 { background-color: #eab308; }
.dark .dark\:border-gray-600 { border-color: #4b5563; }
.dark .dark\:border-gray-500 { border-color: #6b7280; }
.dark .dark\:text-gray-100 { color: #f3f4f6; }
.dark .dark\:text-gray-200 { color: #e5e7eb; }
.dark .dark\:text-gray-300 { color: #d1d5db; }
.dark .dark\:text-gray-400 { color: #9ca3af; }
.dark .dark\:text-green-200 { color: #bbf7d0; }
.dark .dark\:text-green-100 { color: #dcfce7; }
.dark .dark\:text-amber-400 { color: #fbbf24; }
.dark .dark\:text-amber-200 { color: #fde68a; }
.dark .dark\:text-amber-100 { color: #fef3c7; }
.dark .dark\:text-white { color: #ffffff; }
.dark .dark\:hover\:bg-gray-700:hover { background-color: #374151; }
.dark .dark\:hover\:bg-gray-600:hover { background-color: #4b5563; }
.dark .dark\:hover\:bg-yellow-600:hover { background-color: #ca8a04; }
.dark .dark\:hover\:bg-yellow-500:hover { background-color: #eab308; }
.dark .dark\:hover\:bg-green-500:hover { background-color: #22c55e; }
.dark .dark\:hover\:bg-red-500:hover { background-color: #ef4444; }
.dark .dark\:hover\:bg-blue-500:hover { background-color: #3b82f6; }
.dark .dark\:hover\:bg-amber-500:hover { background-color: #f59e0b; }
.dark .dark\:hover\:text-gray-200:hover { color: #e5e7eb; }
.dark .dark\:placeholder-gray-400::placeholder { color: #9ca3af; }
.dark .dark\:focus\:ring-gray-700:focus { --tw-ring-color: rgb(55 65 81 / 0.5); }

.card { transition: transform .2s ease, box-shadow .2s ease, border-color .3s ease; }
.card:hover { transform: translateY(-3px); box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05); }
.badge { font-size:.7rem; padding:.2rem .5rem; border-radius:9999px; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }
.collapse-wrap { overflow: hidden; transition: max-height 300ms ease; }
.collapse-wrap.collapsed { max-height: 0 !important; }
.modal { transition: opacity .2s ease, transform .2s ease; }
.modal.hidden { opacity: 0; transform: scale(.95); pointer-events: none; }
.modal-content { transition: transform .2s ease; }
.modal.hidden .modal-content { transform: translateY(1rem); }

/* Clases para el modal de propinas */
  .tip-option-btn {
    background-color: #374151; /* bg-gray-700 */
    color: #f3f4f6; /* text-gray-100 */
    font-weight: 600;
    padding: 0.75rem 0;
    border-radius: 0.5rem;
    text-align: center;
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  .tip-option-btn:hover {
    background-color: #4b5563; /* bg-gray-600 */
  }
  .tip-option-btn.selected {
    background-color: #f59e0b; /* bg-yellow-500 */
    color: #ffffff; /* text-white */
    border: 2px solid #d97706; /* ring-2 ring-yellow-600 */
  }

@media print {
  body * { visibility: hidden; }
  #print-area, #print-area * { visibility: visible; }
  #print-area {
    position: absolute; left: 0; top: 0; width: 100%;
    font-family: 'Courier New', Courier, monospace; font-size: 10pt;
    padding: 8px 0;
  }
  h1, h2, h3, p { margin: 0; }
  h2 { font-size: 10pt; font-weight: 700; margin: 4px 0; }
  .receipt-brand { text-align: center; margin-bottom: 8px; }
  .receipt-brand-logo {
    width: 48px; height: 48px; object-fit: contain;
    display: block; margin: 0 auto 4px;
  }
  .receipt-brand-name { font-size: 14pt; letter-spacing: 1px; }
  .receipt-brand-tagline {
    font-size: 8pt; text-transform: uppercase; letter-spacing: 1px;
  }
  .receipt-meta {
    margin: 6px 0;
    font-size: 9pt;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .receipt-meta-row {
    display: flex;
    justify-content: space-between;
  }
  .receipt-meta-label {
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
  }
  .receipt-table { width: 100%; border-collapse: collapse; margin-top: 4px; }
  .receipt-table colgroup col:first-child { width: 18%; }
  .receipt-table colgroup col:nth-child(2) { width: 52%; }
  .receipt-table colgroup col:last-child { width: 30%; }
  .receipt-table th, .receipt-table td { padding: 4px 2px; }
  .receipt-table th {
    font-size: 8pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    text-align: left;
    border-bottom: 1px solid #000;
  }
  .receipt-table td.qty { text-align: left; }
  .receipt-table td.item { text-align: left; }
  .receipt-table td.price { text-align: right; }
  .receipt-table tbody tr + tr td { border-top: 1px dotted #9ca3af; }
  .receipt-table .receipt-empty {
    text-align: center;
    font-style: italic;
    padding: 8px 0;
  }
  .receipt-summary {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 10pt;
  }
  .receipt-summary-row {
    display: flex;
    justify-content: space-between;
  }
  .receipt-summary-row.total {
    font-weight: 700;
    border-top: 1px solid #000;
    margin-top: 4px;
    padding-top: 4px;
  }
  .text-right { text-align: right; }
  hr { border: 0; border-top: 1px dashed black; margin: 6px 0; }
}