/* ══════════════════════════════════════════════════════
   ROCATRANS Fleet Command — Base Styles
   Reset · Body · Scrollbar · Utilities · Animations
══════════════════════════════════════════════════════ */

/* ────────────────────────────────
   RESET
──────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ────────────────────────────────
   HTML
──────────────────────────────── */
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-size: 100%;
}

/* ────────────────────────────────
   BODY
──────────────────────────────── */
body {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--bg-deep);
  overflow-x: hidden;
  min-height: 100vh;
}

/* ────────────────────────────────
   LINKS
──────────────────────────────── */
a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}

/* ────────────────────────────────
   BUTTONS
──────────────────────────────── */
button {
  font-family: var(--font-body);
  font-size: inherit;
  cursor: pointer;
  border: none;
  background: none;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ────────────────────────────────
   INPUTS & FORM ELEMENTS
──────────────────────────────── */
input,
select,
textarea {
  font-family: var(--font-body);
  font-size: inherit;
  outline: none;
  border: none;
  -webkit-appearance: none;
  appearance: none;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ────────────────────────────────
   MEDIA
──────────────────────────────── */
img,
svg,
video {
  display: block;
  max-width: 100%;
}

/* ────────────────────────────────
   LISTS
──────────────────────────────── */
ul,
ol {
  list-style: none;
}

/* ────────────────────────────────
   TABLE
──────────────────────────────── */
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

/* ────────────────────────────────
   SCROLLBAR — webkit
──────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--border-light);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--brand-400);
}

::-webkit-scrollbar-corner {
  background: var(--bg-primary);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-light) var(--bg-primary);
}

/* ────────────────────────────────
   SELECTION
──────────────────────────────── */
::selection {
  background-color: var(--accent-dim);
  color: var(--accent);
}

/* ────────────────────────────────
   FOCUS TRAP
──────────────────────────────── */
:focus:not(:focus-visible) {
  outline: none;
}

/* ══════════════════════════════
   UTILITY CLASSES
══════════════════════════════ */

/* Display */
.flex          { display: flex; }
.inline-flex   { display: inline-flex; }
.grid          { display: grid; }
.block         { display: block; }
.hidden        { display: none !important; }

/* Flex helpers */
.flex-center   { display: flex; align-items: center; }
.flex-between  { display: flex; align-items: center; justify-content: space-between; }
.flex-col      { display: flex; flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.flex-1        { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.justify-end   { justify-content: flex-end; }

/* Gap */
.gap-4  { gap: 4px; }
.gap-6  { gap: 6px; }
.gap-8  { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.gap-24 { gap: 24px; }

/* Spacing */
.mt-4  { margin-top: 4px; }
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-4  { margin-bottom: 4px; }
.mb-8  { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.ml-auto { margin-left: auto; }

/* Sizing */
.w-full  { width: 100%; }
.h-full  { height: 100%; }
.w-fit   { width: fit-content; }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }

/* Radius */
.rounded-xs { border-radius: var(--radius-xs); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded    { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* Text */
.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted); }
.text-accent    { color: var(--accent); }
.text-red       { color: var(--red); }
.text-orange    { color: var(--orange); }
.text-blue      { color: var(--blue); }
.text-purple    { color: var(--purple); }
.text-gold      { color: var(--gold); }

/* Font families */
.font-display { font-family: var(--font-display); }
.font-mono    { font-family: var(--font-mono); }
.font-body    { font-family: var(--font-body); }

/* Font weights */
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }

/* Text alignment */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* Text overflow */
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.uppercase { text-transform: uppercase; }
.lowercase  { text-transform: lowercase; }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }

/* Visually hidden (accesibilidad) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Cursor */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }

/* Opacity */
.opacity-0   { opacity: 0; }
.opacity-50  { opacity: 0.5; }
.opacity-75  { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* Pointer events */
.pointer-events-none { pointer-events: none; }


/* ══════════════════════════════
   ANIMATIONS
══════════════════════════════ */

@keyframes pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(0.85); }
}

@keyframes pulseBig {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(1.2); }
}

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

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

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(110%); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideOutRight {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(110%); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

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

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

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

@keyframes toastProgress {
  from { width: 100%; }
  to   { width: 0%; }
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 8px  rgba(0, 232, 184, 0.20); }
  50%       { box-shadow: 0 0 20px rgba(0, 232, 184, 0.45); }
}

/* ── Animación de entrada para secciones ── */
.section-inner {
  animation: fadeIn 0.28s ease both;
}