/* ==========================================================
   CARCONTROL · Estilo tipo app móvil
   Paleta: tablero nocturno de vehículo
   ========================================================== */
:root {
  --fondo:    #0E1B2C;
  --tarjeta:  #16283F;
  --tarjeta2: #1D3350;
  --linea:    #24405F;
  --texto:    #E8EDF4;
  --tenue:    #8FA3BB;
  --ambar:    #F2B441;   /* acento: aguja del tacómetro */
  --verde:    #3DD68C;   /* ganancia */
  --rojo:     #FF6B6B;   /* gasto / alerta */
  --azul:     #5AA7F0;
  --radio:    16px;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { font-size: 16px; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--fondo);
  color: var(--texto);
  min-height: 100dvh;
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
}

/* ---------- Barra superior ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(14, 27, 44, .92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linea);
  padding-top: env(safe-area-inset-top);
}
.topbar-inner {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; max-width: 640px; margin: 0 auto;
}
.logo { font-size: 1.05rem; letter-spacing: .14em; color: var(--tenue); font-weight: 400; }
.logo b { color: var(--ambar); font-weight: 800; }
.logout { color: var(--tenue); text-decoration: none; font-size: .85rem; padding: 8px 12px; border: 1px solid var(--linea); border-radius: 10px; }

/* ---------- Contenido ---------- */
.contenido { max-width: 640px; margin: 0 auto; padding: 18px 16px 30px; }

h1.pagina { font-size: 1.35rem; font-weight: 700; margin-bottom: 4px; }
p.sub { color: var(--tenue); font-size: .9rem; margin-bottom: 18px; }

/* ---------- Tarjetas ---------- */
.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 18px;
  margin-bottom: 14px;
}
.tarjeta h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--tenue); margin-bottom: 12px; font-weight: 600; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.kpi { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); padding: 16px 14px; }
.kpi .etiqueta { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tenue); margin-bottom: 6px; }
.kpi .valor { font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.kpi .valor.verde { color: var(--verde); }
.kpi .valor.rojo { color: var(--rojo); }
.kpi .valor.ambar { color: var(--ambar); }
.kpi .detalle { font-size: .75rem; color: var(--tenue); margin-top: 4px; }

/* ---------- Alerta de aceite ---------- */
.alerta {
  display: flex; gap: 12px; align-items: center;
  background: linear-gradient(135deg, #3A2410, #2A1B0C);
  border: 1px solid #7A5320;
  color: #FFD98A;
  border-radius: var(--radio);
  padding: 14px 16px; margin-bottom: 14px;
  font-size: .92rem; line-height: 1.4;
}
.alerta.critica { background: linear-gradient(135deg, #3A1414, #2A0E0E); border-color: #8A3030; color: #FFB3B3; }
.alerta svg { flex: 0 0 26px; }

/* ---------- Medidor (gauge) de aceite ---------- */
.gauge-envoltura { display: flex; gap: 16px; align-items: center; }
.gauge-envoltura svg { flex: 0 0 auto; }
.gauge-texto { font-size: .85rem; color: var(--tenue); line-height: 1.6; }
.gauge-texto b { color: var(--texto); font-variant-numeric: tabular-nums; }

/* ---------- Formularios ---------- */
label { display: block; font-size: .8rem; color: var(--tenue); margin: 14px 0 6px; font-weight: 600; }
input, select, textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  background: var(--fondo);
  border: 1px solid var(--linea);
  border-radius: 12px;
  color: var(--texto);
  font-size: 1.05rem;
  padding: 14px;
  outline: none;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}
/* Vuelve a mostrar la flecha del desplegable (select) */
select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238FA3BB' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}
input:focus, select:focus, textarea:focus { border-color: var(--ambar); }
textarea { min-height: 80px; resize: vertical; }
input[type="file"] { padding: 10px; font-size: .9rem; }
/* Los campos de fecha en iPhone no deben desbordar */
input[type="date"] { min-height: 50px; }
input[type="date"]::-webkit-date-and-time-value { text-align: left; }

.fila2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fila2 > div { min-width: 0; }

.calculado {
  background: var(--tarjeta2); border: 1px dashed var(--linea);
  border-radius: 12px; padding: 12px 14px; margin-top: 14px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: .9rem; color: var(--tenue);
}
.calculado b { color: var(--ambar); font-size: 1.15rem; font-variant-numeric: tabular-nums; }

/* ---------- Botones ---------- */
.boton {
  display: block; width: 100%;
  background: var(--ambar); color: #1A1205;
  border: none; border-radius: 14px;
  font-size: 1.1rem; font-weight: 800;
  padding: 17px; margin-top: 20px;
  cursor: pointer; text-align: center; text-decoration: none;
  transition: transform .06s ease;
}
.boton:active { transform: scale(.98); }
.boton.secundario { background: var(--tarjeta2); color: var(--texto); border: 1px solid var(--linea); font-weight: 600; }

.mensaje-ok { background: #10331F; border: 1px solid #1E5C38; color: #8AE6B4; border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; font-size: .92rem; }
.mensaje-error { background: #331010; border: 1px solid #5C1E1E; color: #E68A8A; border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; font-size: .92rem; }

/* ---------- Tablas / historial ---------- */
.registro {
  background: var(--tarjeta); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 14px 16px; margin-bottom: 10px;
}
.registro .cabeza { display: flex; justify-content: space-between; margin-bottom: 8px; }
.registro .fecha { font-weight: 700; font-size: .95rem; }
.registro .monto { font-weight: 800; font-variant-numeric: tabular-nums; }
.registro .monto.verde { color: var(--verde); }
.registro .monto.rojo { color: var(--rojo); }
.registro .detalles { font-size: .82rem; color: var(--tenue); line-height: 1.6; }
.registro .detalles b { color: var(--texto); }
.registro img.recibo { max-width: 100%; border-radius: 10px; margin-top: 10px; border: 1px solid var(--linea); }
.etiqueta-categoria {
  display: inline-block; font-size: .72rem; font-weight: 700;
  background: var(--tarjeta2); border: 1px solid var(--linea);
  border-radius: 20px; padding: 3px 10px; color: var(--azul); margin-bottom: 6px;
}

.vacio { text-align: center; color: var(--tenue); padding: 40px 20px; font-size: .92rem; }

/* ---------- Resumen de reportes ---------- */
.resumen-linea { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--linea); font-size: .95rem; }
.resumen-linea:last-child { border-bottom: none; }
.resumen-linea span:first-child { color: var(--tenue); }
.resumen-linea b { font-variant-numeric: tabular-nums; }
.resumen-final { background: var(--tarjeta2); border-radius: 12px; padding: 16px; margin-top: 12px; text-align: center; }
.resumen-final .etiqueta { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--tenue); }
.resumen-final .valor { font-size: 1.9rem; font-weight: 800; margin-top: 4px; font-variant-numeric: tabular-nums; }

.indicador { display: flex; align-items: center; gap: 14px; padding: 12px 0; }
.indicador .icono { flex: 0 0 44px; height: 44px; border-radius: 12px; background: var(--tarjeta2); display: flex; align-items: center; justify-content: center; }
.indicador .txt { font-size: .9rem; line-height: 1.5; color: var(--tenue); }
.indicador .txt b { color: var(--texto); font-size: 1.05rem; }

canvas { max-width: 100%; }

/* ---------- Barra de navegación inferior ---------- */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  display: flex;
  background: rgba(14, 27, 44, .96);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--linea);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 0 8px; text-decoration: none; color: var(--tenue); font-size: .68rem;
}
.tab svg { width: 24px; height: 24px; }
.tab.activo { color: var(--ambar); }

/* ---------- Login ---------- */
.login-envoltura { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-caja { width: 100%; max-width: 380px; }
.login-logo { text-align: center; margin-bottom: 30px; }
.login-logo .marca { font-size: 1.6rem; letter-spacing: .18em; color: var(--tenue); }
.login-logo .marca b { color: var(--ambar); font-weight: 800; }
.login-logo p { color: var(--tenue); font-size: .85rem; margin-top: 8px; }

@media (min-width: 700px) {
  .grid2 { grid-template-columns: repeat(4, 1fr); }
}