/* Tripuly — marca común a la web, el panel y la administración.
   Mar de noche, latón y papel de carta náutica. Todo color sale de aquí. */

:root {
  --mar-900: #0b1a24;
  --mar-800: #10283a;
  --mar-700: #16384f;
  --mar-500: #2a6f8f;
  --espuma: #e8f3f4;
  --laton: #e2a93b;
  --laton-claro: #f6d58e;
  --coral: #e0573f;
  --alga: #2f8a63;
  --cielo: #7cc4d8;

  --fondo: #f7f1e6;
  --fondo-2: #efe5d3;
  --superficie: #fffaf1;
  --texto: #1b2a33;
  --texto-suave: #5b6b73;
  --borde: #e2d6c2;
  --acento: #c9861a;
  --acento-texto: #1b1206;
  --peligro: #c2412b;
  --bien: #2a7d58;
  --aviso: #b7791f;
  --sombra: 0 1px 2px rgb(27 42 51 / .06), 0 8px 24px rgb(27 42 51 / .08);

  --radio: 14px;
  --radio-s: 9px;
  --letra: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --titular: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #0b1a24;
    --fondo-2: #10283a;
    --superficie: #132d40;
    --texto: #eef4f5;
    --texto-suave: #9fb4bd;
    --borde: #22465e;
    --acento: #e9b04a;
    --acento-texto: #1b1206;
    --peligro: #f07a63;
    --bien: #5cc795;
    --aviso: #f0b44d;
    --sombra: 0 1px 2px rgb(0 0 0 / .3), 0 10px 30px rgb(0 0 0 / .25);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fondo: #0b1a24;
  --fondo-2: #10283a;
  --superficie: #132d40;
  --texto: #eef4f5;
  --texto-suave: #9fb4bd;
  --borde: #22465e;
  --acento: #e9b04a;
  --acento-texto: #1b1206;
  --peligro: #f07a63;
  --bien: #5cc795;
  --aviso: #f0b44d;
  --sombra: 0 1px 2px rgb(0 0 0 / .3), 0 10px 30px rgb(0 0 0 / .25);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 16px/1.55 var(--letra);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--titular); line-height: 1.1; letter-spacing: -0.02em; margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; border-radius: 6px; }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .7em 1.2em; border-radius: 999px; border: 1px solid transparent;
  background: var(--acento); color: var(--acento-texto);
  font-weight: 650; text-decoration: none; cursor: pointer;
  transition: transform .12s ease, filter .12s ease, background .12s ease;
}
.boton:hover { filter: brightness(1.06); }
.boton:active { transform: translateY(1px); }
.boton[disabled] { opacity: .5; cursor: not-allowed; }
.boton.secundario { background: transparent; color: var(--texto); border-color: var(--borde); }
.boton.secundario:hover { background: var(--fondo-2); }
.boton.peligro { background: transparent; color: var(--peligro); border-color: currentColor; }
.boton.peque { padding: .45em .85em; font-size: .9rem; }

.chip {
  display: inline-flex; align-items: center; gap: .35em;
  padding: .15em .6em; border-radius: 999px; font-size: .78rem; font-weight: 600;
  background: var(--fondo-2); color: var(--texto-suave); white-space: nowrap;
}
.chip.bien { background: color-mix(in srgb, var(--bien) 16%, transparent); color: var(--bien); }
.chip.aviso { background: color-mix(in srgb, var(--aviso) 18%, transparent); color: var(--aviso); }
.chip.peligro { background: color-mix(in srgb, var(--peligro) 16%, transparent); color: var(--peligro); }

.tarjeta {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra);
}

.marca { display: inline-flex; align-items: center; gap: .55em; font-family: var(--titular); font-weight: 800; font-size: 1.25rem; text-decoration: none; letter-spacing: -0.02em; }
.marca svg { width: 30px; height: 30px; }

.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}