/* ============================================================
   PrestApp — Custom CSS
   Dark neon micro-lending system
   ============================================================ */

:root {
  --neon-green:  #39ff14;
  --neon-red:    #ff1744;
  --neon-blue:   #00b0ff;
  --neon-yellow: #ffd600;
  --bg-dark:     #0d0d0d;
  --card-bg:     #1a1a2e;
}

/* ── BASE ── */
* {
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  overscroll-behavior-y: none;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-track {
  background: #111;
}
::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 2px;
}

/* ── TOUCH TARGETS ── */
a, button, [role="button"] {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

nav a, .nav-item {
  min-height: 40px;
}

/* ── STAT CARDS ── */
.stat-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.stat-card:active {
  transform: scale(0.97);
}

/* ── COLLECTION ROW ── */
.collection-row {
  user-select: none;
}

/* ── NEON GLOW HELPERS ── */
.glow-green {
  box-shadow: 0 0 16px rgba(57,255,20,0.3);
}
.glow-red {
  box-shadow: 0 0 16px rgba(255,23,68,0.3);
}
.glow-blue {
  box-shadow: 0 0 16px rgba(0,176,255,0.3);
}

/* ── SELECT STYLING ── */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 40px !important;
}

/* ── PRINT STYLES ── */
@media print {
  nav, header, .no-print { display: none !important; }
  body { background: white; color: black; }
  pre  { border: 1px solid #ccc; padding: 12px; }
}

/* ── PAGE TRANSITION ── */
main {
  animation: fadeIn 0.15s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── INPUT NUMBER ARROWS ── */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  opacity: 0;
}

/* ── FLATPICKR CALENDAR THEME ── */
.flatpickr-calendar {
  background: #1a1a2e;
  border: 1px solid #333;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
  border-radius: 12px;
}

.flatpickr-calendar.open {
  z-index: 1000;
}

.flatpickr-months {
  background: #1a1a2e;
}

.flatpickr-month {
  color: #fff;
  font-weight: 600;
}

.flatpickr-prev-month,
.flatpickr-next-month {
  color: #00b0ff;
  fill: #00b0ff;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
  color: #39ff14;
  fill: #39ff14;
}

.flatpickr-weekdays {
  background: #111;
  border-bottom: 1px solid #333;
}

.flatpickr-weekday {
  color: #888;
  font-size: 12px;
  font-weight: 600;
}

.flatpickr-days {
  padding: 8px 0;
}

.flatpickr-day {
  color: #aaa;
  font-size: 14px;
  border-radius: 6px;
  margin: 2px;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: #444;
}

.flatpickr-day:hover {
  background: #00b0ff;
  color: #fff;
  border-color: #00b0ff;
}

.flatpickr-day.today {
  border-color: #39ff14;
  background: rgba(57, 255, 20, 0.2);
  color: #39ff14;
}

.flatpickr-day.today:hover {
  background: #39ff14;
  color: #000;
  border-color: #39ff14;
}

.flatpickr-day.selected {
  background: #39ff14;
  color: #000;
  border-color: #39ff14;
  font-weight: 700;
}

.flatpickr-day.selected:hover {
  background: #39ff14;
  color: #000;
  border-color: #39ff14;
}

.flatpickr-time {
  border-top: 1px solid #333;
  text-align: center;
  padding: 8px 0;
}

.flatpickr-hour,
.flatpickr-minute {
  color: #fff;
  background: #0d0d0d;
  border: 1px solid #333;
}

.flatpickr-hour:hover,
.flatpickr-minute:hover {
  background: #222;
}

.numInputWrapper {
  flex: 1 0 40%;
}

.numInputWrapper > span {
  color: #00b0ff;
}

.numInputWrapper > span.arrowUp:hover,
.numInputWrapper > span.arrowDown:hover {
  color: #39ff14;
}

/* Hacer visible el icono del calendario */
.flatpickr-input::placeholder {
  color: #666;
}