:root {
  --azul: #0b3d91;
  --azul-osc: #092d6b;
  --azul-claro: #eef2fb;
  --verde: #0d7a3f;
  --morado: #6d28d9;
  --ambar: #7a4d0d;
  --celeste: #0e7490;
  --rosa: #be185d;
  --indigo: #4338ca;
  --naranja: #b45309;
  --rojo-tarjeta: #b91c1c;
  --texto: #1a1a2e;
  --texto-suave: #5a5f73;
  --borde: #e1e4ee;
  --fondo: #f4f6fb;
  --rojo-bg: #fdecea;
  --rojo: #b3261e;
  --radio: 10px;
}

* { box-sizing: border-box; }

/* Edge/IE agregan un icono nativo de "mostrar contraseña" dentro de los
   inputs type=password; lo desactivamos para que la clave nunca se muestre
   en texto plano (relevante al grabar pantalla/video). */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.25rem 3rem;
  color: var(--texto);
  background: #fff;
}

.top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--borde);
  margin-bottom: 1.75rem;
}

.top-nav a.marca {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--azul);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.05rem;
}

.top-nav a.marca .logo {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--azul);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.top-nav a.volver {
  color: var(--azul);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
}
.top-nav a.volver:hover { text-decoration: underline; }

h1 { font-size: 1.5rem; margin: 0 0 0.35rem; }
h2 { font-size: 1.2rem; margin: 0 0 0.35rem; }
p.subtitulo { color: var(--texto-suave); margin-top: 0; margin-bottom: 1.75rem; }

/* ---- Tarjetas del landing ---- */
.grid-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 1rem;
}

.tarjeta {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.5rem;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 2px rgba(16, 24, 60, 0.04);
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.tarjeta:hover {
  border-color: var(--azul);
  box-shadow: 0 8px 20px rgba(11, 61, 145, 0.12);
  transform: translateY(-2px);
}

.tarjeta .icono {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  background: var(--azul-claro);
}

.tarjeta.tarjeta-verde .icono { background: #e5f4ec; }
.tarjeta.tarjeta-morada .icono { background: #f1ebfd; }
.tarjeta.tarjeta-ambar .icono { background: #fdf1e0; }
.tarjeta.tarjeta-celeste .icono { background: #e0f2f7; }
.tarjeta.tarjeta-rosa .icono { background: #fce4ef; }
.tarjeta.tarjeta-indigo .icono { background: #e8e7fb; }
.tarjeta.tarjeta-naranja .icono { background: #fdedd7; }
.tarjeta.tarjeta-rojo .icono { background: #fbe2e2; }

.tarjeta h2 { color: var(--texto); }
.tarjeta p { color: var(--texto-suave); font-size: 0.9rem; margin: 0; }

.tarjeta .accion {
  margin-top: auto;
  font-weight: 600;
  color: var(--azul);
  font-size: 0.9rem;
}
.tarjeta.tarjeta-verde .accion { color: var(--verde); }
.tarjeta.tarjeta-morada .accion { color: var(--morado); }
.tarjeta.tarjeta-ambar .accion { color: var(--ambar); }
.tarjeta.tarjeta-celeste .accion { color: var(--celeste); }
.tarjeta.tarjeta-rosa .accion { color: var(--rosa); }
.tarjeta.tarjeta-indigo .accion { color: var(--indigo); }
.tarjeta.tarjeta-naranja .accion { color: var(--naranja); }
.tarjeta.tarjeta-rojo .accion { color: var(--rojo-tarjeta); }

/* ---- Formularios ---- */
form.panel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.85rem;
  align-items: end;
  background: var(--fondo);
  padding: 1.25rem;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
}
form.panel .full { grid-column: 1 / -1; }

label { display: block; font-size: 0.85rem; margin-bottom: 0.3rem; color: #444; font-weight: 500; }
input, select {
  width: 100%;
  padding: 0.5rem 0.6rem;
  box-sizing: border-box;
  border: 1px solid var(--borde);
  border-radius: 6px;
  font-size: 0.95rem;
  background: #fff;
}
input:focus, select:focus { outline: 2px solid var(--azul); outline-offset: 1px; }

button {
  padding: 0.65rem 1.1rem;
  background: var(--azul);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
}
button:hover { background: var(--azul-osc); }
button:disabled { background: #7a8ba8; cursor: wait; }

form.panel button[type="submit"] { grid-column: 1 / -1; }

.btn-verde { background: var(--verde); }
.btn-verde:hover { background: #095c30; }
.btn-ambar { background: var(--ambar); }
.btn-ambar:hover { background: #5e3b09; }

/* .btn-verde/.btn-ambar tambien se usan sobre <a> (botones de descarga), no
   solo sobre <button> - sin esto, un <a> solo heredaba el background-color
   de arriba y quedaba como texto subrayado con un resaltado de color atras,
   no como un boton de verdad. */
a.btn-verde,
a.btn-ambar {
  display: inline-flex;
  align-items: center;
  padding: 0.65rem 1.15rem;
  color: #fff;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.2;
  box-shadow: 0 1px 2px rgba(16, 24, 60, 0.08);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
a.btn-verde:hover,
a.btn-ambar:hover {
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(16, 24, 60, 0.16);
  transform: translateY(-1px);
}
a.btn-verde:active,
a.btn-ambar:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(16, 24, 60, 0.08); }

/* ---- Tablas ---- */
table {
  border-collapse: collapse;
  width: 100%;
  margin-top: 1.5rem;
  font-size: 0.85rem;
}
th, td { border: 1px solid var(--borde); padding: 0.5rem 0.6rem; text-align: left; }
th { background: var(--azul); color: white; }
tr:nth-child(even) { background: #f7f8fc; }

/* ---- Mensajes ---- */
.error {
  background: var(--rojo-bg);
  color: var(--rojo);
  padding: 0.85rem 1rem;
  border-radius: var(--radio);
  margin-top: 1.25rem;
  border: 1px solid #f6cdc9;
}
.aviso {
  font-size: 0.8rem;
  color: var(--texto-suave);
  margin-top: 0.5rem;
}
.aviso-limite { margin-top: -1rem; margin-bottom: 1.25rem; }
.aviso-limite-bajo { color: var(--ambar); font-weight: 600; }
.aviso-limite-agotado { color: var(--rojo); font-weight: 600; }
.aviso-limite-libre { color: var(--azul); font-weight: 600; }
.limite-wrap { margin-top: -1rem; margin-bottom: 1.25rem; }
.limite-wrap .aviso-limite { margin-top: 0; margin-bottom: 0.35rem; }
.barra-limite {
  height: 8px;
  border-radius: 999px;
  background: var(--azul-claro);
  overflow: hidden;
}
.barra-limite-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--verde);
  transition: width 0.3s ease;
}
.barra-limite-bajo .barra-limite-fill { background: var(--ambar); }
.barra-limite-agotado .barra-limite-fill { background: var(--rojo); }
.barra-limite-libre .barra-limite-fill { background: var(--azul); }
.ok {
  background: #e5f4ec;
  color: var(--verde);
  padding: 0.85rem 1rem;
  border-radius: var(--radio);
  margin-top: 1.25rem;
  border: 1px solid #bfe6cf;
}

a.descarga { color: var(--azul); text-decoration: none; font-weight: 600; }
a.descarga:hover { text-decoration: underline; }

/* Mismo link ".descarga", pero DENTRO de una celda de tabla (acciones por
   fila: XML/RIDE/Ver) se ve mas profesional como una pildora compacta que
   como texto subrayado suelto - fuera de tablas (prosa, "Volver al...")
   sigue siendo un link normal, sin tocar eso. */
td a.descarga {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border: 1px solid var(--azul);
  border-radius: 999px;
  background: var(--azul-claro);
  font-size: 0.78rem;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
td a.descarga:hover {
  background: var(--azul);
  color: #fff;
  text-decoration: none;
}
td span[title] {
  color: var(--texto-suave);
  font-size: 0.85rem;
}

a.btn {
  display: inline-block;
  padding: 0.65rem 1.1rem;
  background: var(--azul);
  color: #fff;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
}
a.btn:hover { background: var(--azul-osc); }

#avisoEspera {
  display: none;
  grid-column: 1 / -1;
  font-size: 0.85rem;
  color: #92400e;
  background: #fff7e6;
  border: 1px solid #f2c14e;
  padding: 0.55rem 0.8rem;
  border-radius: 6px;
}
.barra-carga {
  height: 4px;
  border-radius: 999px;
  background: #f2c14e55;
  overflow: hidden;
  margin-top: 0.5rem;
}
.barra-carga-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--verde);
  transition: width 0.4s ease;
}

.acciones-resultado {
  margin-bottom: 0.85rem;
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
}

.card-resultado {
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1rem 1.25rem;
  margin-top: 1rem;
}
.card-resultado dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1rem;
  margin: 0;
}
.card-resultado dt { color: var(--texto-suave); font-size: 0.85rem; }
.card-resultado dd { margin: 0; font-weight: 600; font-size: 0.9rem; }

.badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}
.badge-autorizado { background: #e5f4ec; color: var(--verde); }
.badge-otro { background: #fdecea; color: var(--rojo); }

/* ---- Decodificador Base64 ---- */
.b64-tool {
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}
.b64-tool h2 { margin-top: 0; }
.b64-tool p.hint { color: var(--texto-suave); font-size: 0.85rem; margin: 0 0 0.85rem; }
.b64-tool code {
  background: var(--azul-claro);
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
  font-size: 0.85em;
}
.b64-tool form { margin: 0; }

textarea {
  width: 100%;
  padding: 0.5rem 0.6rem;
  box-sizing: border-box;
  border: 1px solid var(--borde);
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
  background: #fff;
  resize: vertical;
}
textarea:focus { outline: 2px solid var(--azul); outline-offset: 1px; }
textarea.mono {
  font-family: ui-monospace, "Cascadia Code", Consolas, "SF Mono", Menlo, monospace;
  font-size: 0.82rem;
  line-height: 1.5;
}

.b64-acciones { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.85rem; }

.btn-secundario {
  background: #fff;
  color: var(--azul);
  border: 1px solid var(--azul);
}
.btn-secundario:hover { background: var(--azul-claro); }

.b64-resultado { margin-top: 1.25rem; }
.b64-resultado > label { font-weight: 600; }
.b64-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90px;
  padding: 1rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: #fff;
}
.b64-preview img { max-width: 100%; height: auto; border-radius: 6px; }
.b64-preview-nota { color: var(--texto-suave); font-size: 0.9rem; text-align: center; }
.b64-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1rem;
  margin: 0.85rem 0 0;
  font-size: 0.85rem;
}
.b64-meta dt { color: var(--texto-suave); }
.b64-meta dd { margin: 0; font-weight: 600; }
.b64-mime { font-weight: 400; color: var(--texto-suave); }

@media (max-width: 720px) {
  form.panel { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  form.panel { grid-template-columns: 1fr; }
}