/* =============================================
   Taxi Turístico Boca del Soco — styles.css
   ============================================= */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  background: #111;
  color: #fff;
  min-height: 100vh;
}

#app {
  padding: 14px;
  max-width: 1200px;
  margin: 0 auto;
}

/* ── Utilidades ─────────────────────────────── */
.mb8  { margin-bottom: 8px; }
.mb10 { margin-bottom: 10px; }
.mb12 { margin-bottom: 12px; }
.spacer { flex: 1; }
.align-end { display: flex; align-items: flex-end; }
.green { color: #4ade80; }
.red   { color: #f87171; }
.blue  { color: #60a5fa; }
.amber { color: #fbbf24; }

.empty-msg { font-size: 12px; color: #555; }
.info-msg  { font-size: 12px; color: #888; margin-bottom: 10px; }

/* ── Topbar ─────────────────────────────────── */
.topbar {
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.topbar-title { font-size: 15px; font-weight: 500; }
.topbar-sub   { font-size: 11px; color: #888; }

.topbar-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* ── Botones ─────────────────────────────────── */
.btn {
  padding: 6px 12px;
  border-radius: 7px;
  border: 1px solid #444;
  background: #222;
  color: #ddd;
  cursor: pointer;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}

.btn:hover { background: #2a2a2a; border-color: #666; }

.btn-light { background: #fff; color: #111; border-color: #fff; font-weight: 500; }
.btn-light:hover { background: #e5e5e5; }

.btn-red   { background: #2a1010; color: #f87171; border-color: #7f1d1d; }
.btn-red:hover { background: #3a1515; }

.btn-green { background: #0a2010; color: #4ade80; border-color: #14532d; }
.btn-green:hover { background: #0f2d18; }

.btn-blue  { background: #0a1a2a; color: #60a5fa; border-color: #1e3a5f; }
.btn-blue:hover { background: #0f2235; }

.btn-amber { background: #2a1a00; color: #fbbf24; border-color: #854d0e; }
.btn-amber:hover { background: #3a2500; }

/* ── Métricas ────────────────────────────────── */
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.metric {
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 10px 12px;
}

.metric-label { font-size: 10px; color: #888; margin-bottom: 3px; }
.metric-val   { font-size: 18px; font-weight: 500; }

/* ── Barra de meta mensual ───────────────────── */
.meta-progress-card { padding: 10px 16px !important; }

.meta-progress-header,
.meta-progress-footer {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

.meta-progress-header { margin-bottom: 4px; color: #888; }
.meta-progress-footer { color: #666; margin-top: 3px; font-size: 11px; }

.meta-pct { color: #fbbf24; font-weight: 500; }

.progress-bar-bg {
  background: #222;
  border-radius: 20px;
  height: 10px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  border-radius: 20px;
  background: #4ade80;
  transition: width 0.3s ease;
}

/* ── Tabs ────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 5px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.tab {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid #333;
  background: #1a1a1a;
  color: #888;
  cursor: pointer;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tab.active {
  background: #fff;
  color: #111;
  border-color: #fff;
  font-weight: 500;
}

/* ── Cards ───────────────────────────────────── */
.card {
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
}

.modal-card { border-color: #888; }

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}

.card-title { font-size: 14px; font-weight: 500; }

/* ── Panel overlay (sección interna) ─────────── */
.panel-overlay {
  background: #111;
  border-radius: 10px;
  padding: 12px;
  border: 1px solid #333;
  margin-bottom: 12px;
}

.panel-title {
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* ── Grids de formulario ─────────────────────── */
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }

.field-label { font-size: 11px; color: #888; margin-bottom: 3px; display: block; }

/* ── Inputs y selects ────────────────────────── */
input[type="text"],
input[type="number"],
input[type="file"],
select,
textarea {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #444;
  border-radius: 6px;
  background: #222;
  color: #fff;
  font-size: 12px;
}

input::placeholder,
textarea::placeholder { color: #555; }

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: #888;
}

select option { background: #222; color: #fff; }

textarea {
  resize: vertical;
  min-height: 56px;
}

/* ── Tabla ───────────────────────────────────── */
.table-wrap { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: fixed;
}

th {
  background: #222;
  color: #888;
  font-weight: 500;
  text-align: left;
  padding: 7px 10px;
  border-bottom: 1px solid #333;
  font-size: 11px;
}

td {
  padding: 7px 10px;
  border-bottom: 1px solid #222;
  color: #ddd;
  vertical-align: middle;
}

tr:last-child td { border-bottom: none; }

tr.clickable:hover td {
  background: #222;
  cursor: pointer;
}

/* ── Badges ──────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 500;
}

.badge-ok      { background: #0a2010; color: #4ade80; }
.badge-debe    { background: #2a1010; color: #f87171; }
.badge-parcial { background: #2a1a00; color: #fbbf24; }
.badge-nc      { background: #222;    color: #888; }

/* ── Fila de historial ───────────────────────── */
.hist-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid #222;
  font-size: 12px;
  gap: 8px;
  flex-wrap: wrap;
}

.hist-row:last-child { border-bottom: none; }

.hist-row-meta  { font-size: 11px; color: #666; }
.hist-row-right { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.hist-summary {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-top: 4px;
}

/* ── Separador ───────────────────────────────── */
.sep { height: 1px; background: #333; margin: 10px 0; }

/* ── Fila de ganancias ───────────────────────── */
.ganancia-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid #222;
  font-size: 12px;
}

.ganancia-row:last-child { border-bottom: none; }

.ganancia-row-right { text-align: right; }

/* ── Notificaciones ──────────────────────────── */
#notificaciones { margin-bottom: 12px; }

.notif-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #2a1010;
  border: 1px solid #7f1d1d;
  margin-bottom: 6px;
  font-size: 12px;
}

.notif-amber {
  background: #2a1a00;
  border-color: #854d0e;
}

/* ── Búsqueda ────────────────────────────────── */
.search-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.search-row input  { flex: 1; max-width: 300px; }
.search-row select { max-width: 160px; }

/* ── Formulario de movimientos de caja ───────── */
.mov-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.mov-desc  { flex: 1; min-width: 130px; }
.mov-monto { max-width: 130px; }
.mov-tipo  { max-width: 120px; }

/* ── Fila de acciones ────────────────────────── */
.row-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* ── Fila config objetivo ────────────────────── */
.obj-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

/* ── Output IA ───────────────────────────────── */
.ai-output {
  background: #0a1a0a;
  border: 1px solid #14532d;
  border-radius: 8px;
  padding: 12px;
  font-size: 12px;
  color: #a7f3d0;
  line-height: 1.6;
  white-space: pre-wrap;
  min-height: 50px;
}

/* ── Reporte card ────────────────────────────── */
.reporte-card {
  background: #111;
  border: 1px solid #444;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.reporte-card-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.reporte-card-title { font-size: 13px; font-weight: 500; }
.reporte-card-sub   { font-size: 11px; color: #888; }
.reporte-card-btns  { display: flex; gap: 6px; }

/* ── Backup info box ─────────────────────────── */
.backup-info-box {
  background: #222;
  border: 1px solid #444;
  border-radius: 6px;
  padding: 8px;
  font-size: 12px;
  color: #aaa;
  margin: 8px 0;
}

/* ── Spinner ─────────────────────────────────── */
.spin {
  display: inline-block;
  animation: spin 1s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Celdas con botones ──────────────────────── */
.td-actions {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
}

/* ── Responsive básico ───────────────────────── */
@media (max-width: 600px) {
  .row2 { grid-template-columns: 1fr; }
  .row3 { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
}