/* ============================================================
   Nivel de combustible animado — Gestión Vehicular Pegsa
   Sin dependencias. Funciona en web y en la APK (offline).
   ============================================================ */

.nc {
  --nc-naranja: #E8772E;
  --nc-ambar: #D97706;
  --nc-rojo: #DC2626;
  --nc-gris-arco: #3F3F46;
  --nc-borde: #E2E4E9;
  position: relative;
  margin: 0;
  padding: 30px 18px 18px;
  border: 1px solid var(--nc-borde);
  border-radius: 14px;
  background: #FFFFFF;
  font-family: inherit;
}

.nc-titulo {
  position: absolute;
  top: -14px;
  left: 16px;
  padding: 5px 12px;
  border-radius: 6px;
  background: #2B2B2E;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
}

.nc-fichas {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

/* En celular: 3 arriba y 2 abajo */
@media (max-width: 640px) {
  .nc-fichas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
}

/* ---------- Ficha ---------- */
.nc-ficha {
  --nc-color: var(--nc-naranja);
  position: relative;
  height: 96px;
  border: 2px solid var(--nc-borde);
  border-radius: 10px;
  background: #FFFFFF;
  font: inherit;
  color: #374151;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: border-color .2s ease, background-color .2s ease, transform .15s ease;
}
.nc-ficha:hover { border-color: #F0A46A; transform: translateY(-1px); }
.nc-ficha:focus-visible { outline: 3px solid #F59E0B; outline-offset: 2px; }

.nc-ficha[data-alerta="roja"]  { --nc-color: var(--nc-rojo); }
.nc-ficha[data-alerta="ambar"] { --nc-color: var(--nc-ambar); }

.nc-etiqueta { font-size: 14px; font-weight: 500; }

.nc-medidor { width: 86px; height: 46px; overflow: visible; }
.nc-arco-base { fill: none; stroke: var(--nc-gris-arco); stroke-width: 5; stroke-linecap: round; }
.nc-arco-lleno {
  fill: none;
  stroke: var(--nc-color);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: var(--nc-pct) 100;
  opacity: 0;
}
.nc-aguja {
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(var(--nc-ang));
}
.nc-aguja path { stroke: var(--nc-naranja); stroke-width: 3.5; stroke-linecap: round; }
.nc-eje { fill: var(--nc-gris-arco); }

.nc-chulo {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--nc-color);
  color: #FFFFFF;
  display: none;
  align-items: center;
  justify-content: center;
}

/* ---------- Ficha seleccionada ---------- */
.nc-ficha[aria-pressed="true"] {
  border-color: var(--nc-naranja);
  background: #FFF4EB;
  color: #111827;
}
.nc-ficha[aria-pressed="true"] .nc-etiqueta { font-weight: 700; }
.nc-ficha[aria-pressed="true"] .nc-arco-base { stroke: #E5E7EB; }
.nc-ficha[aria-pressed="true"] .nc-arco-lleno { opacity: 1; }
.nc-ficha[aria-pressed="true"] .nc-aguja path { stroke: var(--nc-color); }
.nc-ficha[aria-pressed="true"] .nc-chulo { display: flex; }

/* ---------- Animaciones (se activan con la clase nc-animar) ---------- */
.nc-ficha.nc-animar { animation: nc-salto .55s cubic-bezier(.3, 1.4, .5, 1); }
.nc-ficha.nc-animar .nc-arco-lleno { animation: nc-llenar .9s cubic-bezier(.2, .8, .2, 1); }
.nc-ficha.nc-animar .nc-aguja { animation: nc-barrido .9s cubic-bezier(.3, .7, .4, 1); }
.nc-ficha.nc-animar[data-alerta="roja"] .nc-aguja { animation: nc-temblor 1s ease-in-out; }
.nc-ficha.nc-animar .nc-chulo { animation: nc-aparecer .45s cubic-bezier(.3, 1.6, .5, 1) .35s both; }

@keyframes nc-salto {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(232, 119, 46, .45); }
  35%  { transform: scale(1.05); }
  100% { transform: scale(1);    box-shadow: 0 0 0 14px rgba(232, 119, 46, 0); }
}
@keyframes nc-llenar { from { stroke-dasharray: 0 100; } }
@keyframes nc-barrido {
  0%   { transform: rotate(-90deg); }
  65%  { transform: rotate(calc(var(--nc-ang) + 10deg)); }
  85%  { transform: rotate(calc(var(--nc-ang) - 4deg)); }
  100% { transform: rotate(var(--nc-ang)); }
}
@keyframes nc-temblor {
  0%   { transform: rotate(-90deg); }
  20%  { transform: rotate(-66deg); }
  40%  { transform: rotate(-96deg); }
  60%  { transform: rotate(-78deg); }
  80%  { transform: rotate(-93deg); }
  100% { transform: rotate(-90deg); }
}
@keyframes nc-aparecer { from { transform: scale(0); } to { transform: scale(1); } }

/* ---------- Mensaje y error ---------- */
.nc-mensaje { margin: 16px 2px 0; font-size: 14px; color: #4B5563; }
.nc-mensaje strong { color: #C2410C; }
.nc-mensaje[data-alerta="roja"] strong  { color: #B91C1C; }
.nc-mensaje[data-alerta="ambar"] strong { color: #B45309; }

.nc.nc-error { border-color: #DC2626; }
.nc-error-texto { display: none; margin: 10px 2px 0; font-size: 13px; color: #B91C1C; font-weight: 600; }
.nc.nc-error .nc-error-texto { display: block; }

/* Respeta la opción "reducir movimiento" del equipo */
@media (prefers-reduced-motion: reduce) {
  .nc-ficha.nc-animar,
  .nc-ficha.nc-animar .nc-arco-lleno,
  .nc-ficha.nc-animar .nc-aguja,
  .nc-ficha.nc-animar .nc-chulo { animation: none; }
}