/* Caja HLF — marca Horse Life Foundation. Móvil primero. */

@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; src: url("/static/fonts/Poppins-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; src: url("/static/fonts/Poppins-Medium.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; src: url("/static/fonts/Poppins-SemiBold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; src: url("/static/fonts/Poppins-Bold.ttf") format("truetype"); font-display: swap; }

:root {
  --salvia: #CAD8AA;
  --salvia-claro: #EEF3E2;
  --oliva: #455A22;
  --crema: #F7F4EC;
  --naranja: #E07A2F;
  --texto: #2B2B2B;
  --silencio: #6b6b62;
  --linea: #e2ddd0;
  --blanco: #ffffff;
  --rojo: #b3362b;
  --verde: #3f7a2f;
  --radio: 12px;
  --sombra: 0 1px 2px rgba(43, 43, 43, 0.06), 0 4px 14px rgba(69, 90, 34, 0.08);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Poppins", "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--texto);
  background: var(--crema);
}
a { color: var(--oliva); }
h1, h2, h3 { color: var(--oliva); font-weight: 600; line-height: 1.2; margin: 0 0 0.6rem; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.1rem; }
h3 { font-size: 1rem; margin-top: 1rem; }
p { margin: 0 0 0.75rem; }
code, pre { font-family: ui-monospace, Consolas, monospace; font-size: 0.85em; }
small { font-size: 0.85em; }

/* Cabecera */
.cabecera { background: var(--salvia); border-bottom: 1px solid #b9c99a; position: sticky; top: 0; z-index: 10; }
.cabecera-interior { max-width: 1100px; margin: 0 auto; padding: 0.5rem 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.marca { text-decoration: none; display: flex; align-items: center; gap: 0.6rem; line-height: 1.05; }
.marca-texto { display: flex; flex-direction: column; }
.marca-logo { height: 40px; width: auto; max-width: 100px; object-fit: contain; }
.login-logo { display: block; max-width: 170px; max-height: 140px; margin: 0.25rem auto 1.25rem; object-fit: contain; }
.marca-nombre { font-weight: 700; font-size: 1.25rem; color: var(--oliva); }
.marca-sub { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--oliva); opacity: 0.85; }
.nav { display: flex; gap: 0.25rem; overflow-x: auto; -webkit-overflow-scrolling: touch; flex: 1 1 100%; padding-bottom: 0.15rem; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
@media (max-width: 640px) {
  /* Pista de que la barra se desliza: se difumina por la derecha */
  .nav { mask-image: linear-gradient(to right, #000 88%, transparent); -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); padding-right: 2rem; }
}
.nav a, .nav .enlace { white-space: nowrap; padding: 0.4rem 0.7rem; border-radius: 999px; text-decoration: none; color: var(--oliva); font-weight: 500; font-size: 0.9rem; }
.nav a.activo { background: var(--oliva); color: var(--blanco); }
.nav a:hover { background: rgba(69, 90, 34, 0.12); }
.salir { margin-left: auto; }
.badge { display: inline-block; min-width: 1.4em; padding: 0 0.4em; border-radius: 999px; background: var(--naranja); color: var(--blanco); font-size: 0.75rem; font-weight: 600; text-align: center; line-height: 1.5; vertical-align: middle; }
.badge-grande { font-size: 1rem; vertical-align: 0.15em; }

/* Contenido */
.contenido { max-width: 1100px; margin: 0 auto; padding: 1rem; }
.pie { max-width: 1100px; margin: 1rem auto 2rem; padding: 0 1rem; color: var(--silencio); font-size: 0.8rem; }
.tarjeta { background: var(--blanco); border-radius: var(--radio); padding: 1rem; box-shadow: var(--sombra); margin-bottom: 1rem; }
.tarjeta-tabla { padding: 0.5rem 0.75rem 0.75rem; }
.tarjeta-aviso { border-left: 5px solid var(--naranja); }
.tarjeta-cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.tarjeta-cabecera h1, .tarjeta-cabecera h2 { margin: 0; }
.tarjeta-login { max-width: 420px; margin: 3rem auto; }
.silencioso { color: var(--silencio); }
.error { color: var(--rojo); font-weight: 500; background: #fbeae7; border-radius: 8px; padding: 0.5rem 0.75rem; }
.aviso-inline { color: var(--naranja); font-size: 0.8em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.obligatorio { color: var(--naranja); font-weight: 600; }
.flash { border-radius: 8px; padding: 0.6rem 0.9rem; margin-bottom: 0.75rem; font-weight: 500; }
.flash-ok { background: var(--salvia-claro); color: var(--oliva); border: 1px solid var(--salvia); }
.flash-error { background: #fbeae7; color: var(--rojo); border: 1px solid #efc4bc; }
.flash-aviso { background: #fdeede; color: #8a4512; border: 1px solid #f2c9a6; }

/* Saldo grande */
.saldo { background: var(--salvia); border-radius: var(--radio); padding: 1.25rem 1rem; text-align: center; margin-bottom: 1rem; box-shadow: var(--sombra); }
.saldo-etiqueta { color: var(--oliva); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; font-weight: 600; }
.saldo-cifra { color: var(--naranja); font-weight: 700; font-size: clamp(2.4rem, 10vw, 3.6rem); line-height: 1.1; }
.saldo-periodo { color: var(--oliva); margin-top: 0.25rem; font-size: 0.95rem; }
.fichas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; margin-bottom: 1rem; }
.ficha { background: var(--blanco); border-radius: var(--radio); padding: 0.7rem 0.9rem; box-shadow: var(--sombra); display: flex; flex-direction: column; text-decoration: none; color: var(--texto); }
.ficha-etiqueta { font-size: 0.75rem; color: var(--silencio); text-transform: uppercase; letter-spacing: 0.05em; }
.ficha-valor { font-size: 1.3rem; font-weight: 600; color: var(--oliva); }
.ficha-destacada { background: var(--salvia-claro); }
.ficha-destacada .ficha-valor { color: var(--naranja); }
.ficha-aviso .ficha-valor { color: var(--naranja); }
.dos-columnas { display: grid; grid-template-columns: 1fr; gap: 1rem; }

/* Barras */
.barras { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.barra-cabecera { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.95rem; }
.barra { height: 10px; background: var(--salvia-claro); border-radius: 999px; overflow: hidden; margin: 0.25rem 0 0.15rem; }
.barra-relleno { height: 100%; background: var(--naranja); border-radius: 999px; }
.barra-oliva { background: var(--oliva); }
.barra-pie { font-size: 0.8rem; }

/* Tablas */
.tabla { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.tabla th { background: var(--salvia); color: var(--oliva); text-align: left; font-weight: 600; padding: 0.55rem 0.6rem; font-size: 0.85rem; }
.tabla th:first-child { border-radius: 8px 0 0 8px; }
.tabla th:last-child { border-radius: 0 8px 8px 0; }
.tabla td { padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla .num { text-align: right; white-space: nowrap; }
.fila-enlace { cursor: pointer; }
.fila-enlace:hover td { background: var(--salvia-claro); }
.fila-ingreso td { background: #f3f7e9; }
.fila-rechazado td { color: var(--silencio); text-decoration: line-through; }
.fila-inactiva td { opacity: 0.6; }
.positivo { color: var(--verde); }
.negativo { color: var(--texto); }
.pie-tabla { margin: 0.5rem 0.6rem 0; font-size: 0.8rem; }
.estado { display: inline-block; padding: 0.05rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; vertical-align: middle; }
.estado-pending { background: #fdeede; color: #8a4512; }
.estado-confirmed { background: var(--salvia-claro); color: var(--oliva); }
.estado-rejected { background: #eee; color: var(--silencio); }
.mini { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; border: 1px solid var(--linea); }
.mini-grande { width: 96px; height: 96px; }
.foto { max-width: 100%; border-radius: 8px; border: 1px solid var(--linea); }
.json { background: var(--crema); border-radius: 8px; padding: 0.6rem; overflow-x: auto; max-height: 260px; }
.datos-mini { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.8rem; font-size: 0.85rem; margin: 1rem 0 0; }
.datos-mini dt { color: var(--silencio); }
.datos-mini dd { margin: 0; }
.lista-simple { padding-left: 1.2rem; }

/* Formularios */
.formulario { display: grid; gap: 0.8rem; }
.formulario label { display: grid; gap: 0.25rem; font-weight: 500; font-size: 0.9rem; }
.formulario label small { font-weight: 400; }
.formulario-linea { grid-template-columns: 1fr; align-items: end; }
.formulario-compacto { gap: 0.5rem; }
.rejilla-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.rejilla-campos label { font-size: 0.8rem; }
input[type="text"], input[type="password"], input[type="date"], input[type="tel"], input[type="number"], select, textarea {
  font: inherit; width: 100%; padding: 0.55rem 0.65rem; border: 1px solid #cfcabb; border-radius: 8px; background: var(--blanco); color: var(--texto);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--salvia); border-color: var(--oliva); }
input[type="checkbox"], input[type="radio"] { width: 1.15rem; height: 1.15rem; accent-color: var(--oliva); }
input:disabled, select:disabled { background: var(--crema); color: var(--silencio); }
.tipo-radio { border: 0; padding: 0; margin: 0; display: flex; gap: 1rem; }
.tipo-radio legend { font-weight: 500; font-size: 0.9rem; margin-bottom: 0.25rem; }
.tipo-radio label { display: inline-flex; align-items: center; gap: 0.4rem; }
.filtros { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; align-items: end; margin-bottom: 0.75rem; }
.filtros label { display: grid; gap: 0.2rem; font-size: 0.8rem; font-weight: 500; }
.botonera { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.boton { font: inherit; font-weight: 600; padding: 0.6rem 1.1rem; border-radius: 999px; border: 0; background: var(--naranja); color: var(--blanco); cursor: pointer; text-decoration: none; display: inline-block; }
.boton:hover { filter: brightness(0.95); }
.boton:disabled { opacity: 0.5; cursor: not-allowed; }
.boton-secundario { background: var(--salvia); color: var(--oliva); }
.boton-ok { background: var(--oliva); }
.boton-peligro { background: var(--rojo); }
.enlace { background: none; border: 0; padding: 0; font: inherit; color: var(--oliva); text-decoration: underline; cursor: pointer; }
.lista-tarjetas { display: grid; gap: 0.75rem; }
.tarjeta-pendiente { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
.pendiente-cabecera { display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; }
.pendiente-cabecera .enlace { margin-left: auto; }

/* Móvil: las tablas se apilan en fichas */
@media (max-width: 640px) {
  .tabla.apilada thead { display: none; }
  .tabla.apilada tr { display: block; border: 1px solid var(--linea); border-radius: 10px; margin: 0.5rem 0; padding: 0.35rem 0.5rem; background: var(--blanco); }
  .tabla.apilada .fila-ingreso { background: #f3f7e9; }
  .tabla.apilada td { display: flex; justify-content: space-between; gap: 0.75rem; border: 0; padding: 0.25rem 0; text-align: right; }
  .tabla.apilada td::before { content: attr(data-label); color: var(--silencio); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; text-align: left; flex: 0 0 38%; }
  .tabla.apilada td:empty, .tabla.apilada td[data-label=""]::before { display: none; }
  .tabla.apilada td.num { justify-content: space-between; }
  .tabla-edicion td { flex-direction: column; align-items: stretch; text-align: left; }
  .tabla-edicion td::before { flex: none; }
}

/* Escritorio */
@media (min-width: 641px) {
  .cabecera-interior { flex-wrap: nowrap; }
  .nav { flex: 1 1 auto; }
  .fichas { grid-template-columns: repeat(4, 1fr); }
  .formulario-linea { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .formulario-linea .ancho { grid-column: span 2; }
  .filtros { grid-template-columns: repeat(5, auto); }
  .tarjeta-pendiente { grid-template-columns: 110px 1fr; }
  .rejilla-campos { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .dos-columnas { grid-template-columns: 1fr 1fr; }
  .dos-columnas-detalle { grid-template-columns: 1fr 1.2fr; }
}