/* Mammoth e-CF: sitio estatico (landing, documentacion, paneles). Sigue la identidad del landing oficial de Mammoth: negro, rojo, blanco. */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500&family=JetBrains+Mono:wght@400;600&family=Montserrat:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: dark;
  --fondo: #0a0a0b;
  --superficie: #121214;
  --superficie-2: #1a1a1d;
  --borde: #2b2b30;
  --texto: #f4f4f5;
  --texto-2: #a6a6ae;
  --rojo: #d92b2b;
  --rojo-hover: #ee3a3a;
  --rojo-suave: rgba(217, 43, 43, .16);
  --ok: #52c98f; --ok-suave: rgba(82, 201, 143, .14);
  --aviso: #e8b44f; --aviso-suave: rgba(232, 180, 79, .14);
  --info: #9db4ff; --info-suave: rgba(157, 180, 255, .13);
  --error: #ff7a70;
  --radio: 12px;
  --f-texto: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mano: 'Caveat', cursive;
  --f-codigo: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 400 15.5px/1.65 var(--f-texto); }
img, svg { max-width: 100%; display: block; }
a { color: var(--texto); text-underline-offset: 3px; text-decoration-color: var(--rojo); }
a:hover { color: #fff; text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--rojo-hover); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { margin: 0 0 .5em; font-weight: 800; letter-spacing: -.01em; line-height: 1.08; text-transform: uppercase; }
h1 { font-size: clamp(2.2rem, 6vw, 4rem); }
h2 { font-size: clamp(1.4rem, 3.2vw, 2rem); }
h3 { font-size: 1.02rem; letter-spacing: 0; }
p { margin: 0 0 1em; max-width: 66ch; color: var(--texto-2); }
p strong, li strong { color: var(--texto); }
li { color: var(--texto-2); margin-bottom: .35em; }
code, pre, kbd { font-family: var(--f-codigo); font-size: .86em; }
:not(pre) > code { background: var(--superficie-2); border: 1px solid var(--borde); padding: .08em .4em; border-radius: 5px; color: var(--texto); }
.sobre { font-size: .72rem; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: var(--texto-2); margin: 0 0 14px; }
.mano { font-family: var(--f-mano); font-size: 1.5rem; color: var(--texto-2); transform: rotate(-5deg); display: inline-block; line-height: 1.1; }
.mano::after { content: ''; display: block; height: 3px; width: 64%; background: var(--rojo); border-radius: 3px; margin-top: 4px; transform: rotate(-4deg); }

.envoltura { width: min(100% - 32px, 1120px); margin-inline: auto; }
.angosto { width: min(100% - 32px, 760px); margin-inline: auto; }

/* ---------- Cabecera ---------- */
.cabecera { position: sticky; top: 0; z-index: 10; padding: 14px 0; background: linear-gradient(var(--fondo) 70%, transparent); }
.cabecera .barra { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 10px 20px; border: 1px solid var(--borde); border-radius: 16px; background: rgba(18, 18, 20, .88); backdrop-filter: blur(8px); }
.marca { color: var(--texto); text-decoration: none; display: inline-flex; align-items: center; gap: 12px; line-height: 1; }
.marca img { height: 30px; width: auto; }
.marca small { font-size: .66rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--rojo-hover); padding-left: 12px; border-left: 1px solid var(--borde); }
.nav { display: flex; gap: 2px 26px; flex-wrap: wrap; }
.nav a { color: var(--texto-2); text-decoration: none; padding: 8px 0 10px; font-size: .84rem; font-weight: 500; position: relative; }
.nav a:hover { color: var(--texto); }
.nav a[aria-current='page'] { color: var(--texto); }
.nav a[aria-current='page']::after { content: ''; position: absolute; left: 50%; bottom: 1px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--rojo); }

/* ---------- Botones y formularios ---------- */
.boton { display: inline-flex; align-items: center; gap: 14px; font: 600 .9rem var(--f-texto); padding: 10px 12px 10px 26px; border-radius: 999px; border: 1.5px solid var(--rojo); background: var(--rojo); color: #fff; text-decoration: none; cursor: pointer; transition: background .15s; }
.boton:hover { background: var(--rojo-hover); border-color: var(--rojo-hover); color: #fff; }
.boton.secundario { background: transparent; border-color: var(--borde); color: var(--texto); }
.boton.secundario:hover { border-color: var(--texto-2); background: var(--superficie); }
.boton.peligro { background: transparent; border-color: var(--rojo); color: var(--error); }
.boton.peligro:hover { background: var(--rojo-suave); }
.boton.chico { padding: 7px 16px; font-size: .8rem; }
.boton[disabled] { opacity: .45; cursor: not-allowed; }
/* Flecha de los botones: icono grueso dentro de un circulo (como en el landing oficial). El texto del span se oculta; el dibujo es una mascara. */
.flecha { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 2px solid currentColor; font-size: 0; line-height: 0; display: inline-block; }
.flecha::after { content: ''; position: absolute; inset: 0; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 56% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 56% no-repeat; }
.boton.chico .flecha { width: 24px; height: 24px; border-width: 1.8px; }
label { display: block; font-weight: 600; font-size: .8rem; margin-bottom: 6px; letter-spacing: .02em; }
input, select, textarea { width: 100%; font: inherit; font-size: .92rem; padding: 11px 14px; border: 1.5px solid var(--borde); border-radius: 10px; background: var(--superficie); color: var(--texto); }
input::file-selector-button { font: inherit; margin-right: 12px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--borde); background: var(--superficie-2); color: var(--texto); cursor: pointer; }
input:focus, select:focus, textarea:focus { border-color: var(--rojo); outline: none; box-shadow: 0 0 0 3px var(--rojo-suave); }
.ayuda { color: var(--texto-2); font-size: .8rem; margin-top: 5px; }
.campo { margin-bottom: 16px; }
.fila { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* ---------- Tarjetas ---------- */
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: 16px; padding: 22px 24px; }
.tarjeta h3 { margin-bottom: .4em; }
.tarjeta p:last-child { margin-bottom: 0; }
.rejilla { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.dato { font-size: 2rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.dato-etiqueta { font-size: .78rem; color: var(--texto-2); margin-top: 6px; }

/* ---------- Codigo ---------- */
pre { margin: 0 0 1.2em; background: #060607; color: #dcdce0; padding: 18px 20px; border: 1px solid var(--borde); border-radius: var(--radio); overflow-x: auto; line-height: 1.6; font-size: .82rem; }
pre .c { color: #6f6f78; } pre .k { color: var(--info); } pre .v { color: var(--ok); } pre .r { color: var(--error); } pre .n { color: var(--aviso); }
.codigo-titulo { font: 600 .72rem var(--f-codigo); color: var(--texto-2); margin: 0 0 8px; letter-spacing: .06em; }

/* ---------- Estados ---------- */
.etiqueta { display: inline-block; font: 600 .72rem var(--f-texto); padding: 3px 11px; border-radius: 999px; white-space: nowrap; letter-spacing: .02em; }
.e-aceptado { background: var(--ok-suave); color: var(--ok); }
.e-aceptado_condicional { background: var(--aviso-suave); color: var(--aviso); }
.e-rechazado, .e-error { background: var(--rojo-suave); color: var(--error); }
.e-pendiente, .e-enviando, .e-enviado { background: var(--info-suave); color: var(--info); }
.e-neutro { background: var(--superficie-2); color: var(--texto-2); }

/* ---------- Tablas ---------- */
.tabla-caja { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
table { border-collapse: collapse; width: 100%; font-size: .87rem; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--borde); vertical-align: top; color: var(--texto); }
th { font-weight: 600; color: var(--texto-2); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; background: var(--superficie-2); }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.mono { font-family: var(--f-codigo); font-size: .84em; }
td.vacio { color: var(--texto-2); text-align: center; padding: 28px; }

/* ---------- Avisos ---------- */
.aviso { border: 1px solid var(--borde); border-left: 4px solid var(--info); background: var(--superficie); padding: 14px 18px; border-radius: 4px var(--radio) var(--radio) 4px; margin: 0 0 1.2em; max-width: 72ch; }
.aviso.alerta { border-left-color: var(--rojo); background: var(--rojo-suave); }
.aviso.ok { border-left-color: var(--ok); background: var(--ok-suave); }
.aviso.nota { border-left-color: var(--aviso); background: var(--aviso-suave); }
.aviso p { color: var(--texto); }
.aviso p:last-child { margin-bottom: 0; }

/* ---------- Pie ---------- */
.pie { border-top: 1px solid var(--borde); margin-top: 88px; padding: 28px 0 44px; color: var(--texto-2); font-size: .82rem; }
.pie .envoltura { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---------- Documentacion ---------- */
.doc { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 56px; padding-top: 32px; }
.doc aside { position: sticky; top: 96px; align-self: start; font-size: .85rem; }
.doc aside a { display: block; padding: 6px 0 6px 14px; color: var(--texto-2); text-decoration: none; border-left: 2px solid var(--borde); }
.doc aside a:hover { color: var(--texto); border-left-color: var(--rojo); }
.doc section { margin-bottom: 60px; scroll-margin-top: 96px; }
.doc h2 { margin-bottom: .7em; }
.doc ol.pasos { padding-left: 1.3em; }
@media (max-width: 820px) { .doc { grid-template-columns: 1fr; gap: 0; } .doc aside { position: static; margin-bottom: 28px; display: flex; flex-wrap: wrap; gap: 4px 18px; } .doc aside a { border-left: 0; padding-left: 0; } }

/* ---------- Pestanas del panel ---------- */
.pestanas { display: flex; gap: 6px; flex-wrap: wrap; margin: 28px 0 24px; padding-bottom: 14px; border-bottom: 1px solid var(--borde); }
.pestanas button { font: 600 .82rem var(--f-texto); padding: 9px 18px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--texto-2); cursor: pointer; }
.pestanas button:hover { color: var(--texto); }
.pestanas button[aria-selected='true'] { background: var(--rojo-suave); border-color: var(--rojo); color: var(--texto); }

/* ---------- Portada ---------- */
.heroe { position: relative; overflow: hidden; padding: 56px 0 72px; }
.sol { position: absolute; right: -6%; top: -4%; width: min(62vw, 640px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #e43a3a 0%, #b72323 55%, #7c1515 100%); filter: saturate(1.05); opacity: .95; z-index: 0; }
.sol.chico { width: 150px; right: 2%; top: 62%; opacity: .7; }
.heroe .envoltura { position: relative; z-index: 1; display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.heroe .vidrio { background: rgba(10, 10, 11, .86); border: 1px solid #3a3a40; border-radius: 16px; padding: 18px 18px 6px; backdrop-filter: blur(6px); box-shadow: 0 30px 80px rgba(0, 0, 0, .55); position: relative; }
.heroe .vidrio pre { background: transparent; border: 0; padding: 4px 4px 12px; margin: 0; font-size: .78rem; white-space: pre-wrap; word-break: break-word; }
.sello-aceptado { position: absolute; right: 22px; bottom: 26px; border: 3px solid var(--ok); color: var(--ok); font: 800 1.2rem var(--f-texto); letter-spacing: .12em; padding: 4px 16px; border-radius: 6px; transform: rotate(-4deg); background: rgba(10, 10, 11, .6); }
.cifras { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 36px; }
.cifras > div { padding-right: 28px; border-right: 1px solid var(--borde); }
.cifras > div:last-child { border-right: 0; }
.bloques { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
@media (max-width: 860px) { .heroe .envoltura { grid-template-columns: 1fr; } .sol { width: 120vw; right: -40%; top: 18%; opacity: .55; } }
@media (prefers-reduced-motion: no-preference) { .sello-aceptado { animation: sellar .5s .6s cubic-bezier(.2, .9, .3, 1.3) both; } }
@keyframes sellar { from { opacity: 0; transform: rotate(-4deg) scale(1.6); } to { opacity: 1; transform: rotate(-4deg) scale(1); } }
[hidden] { display: none !important; }