@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root {
  --asfalto: #15171a;
  --panel: #1f2226;
  --panel-alto: #26292e;
  --borde: #33373d;
  --rojo: #e8412c;
  --amarillo: #f4b400;
  --texto: #f2f1ee;
  --texto-tenue: #9aa0a6;
  --exito: #3fb56d;
  --error: #ef5350;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--asfalto);
  color: var(--texto);
  line-height: 1.5;
}

h1, h2, h3, label, .titular {
  font-family: 'Oswald', 'Inter', system-ui, sans-serif;
}

/* Franja tipo bandera a cuadros, sutil, arriba de la pagina */
.franja-cuadros {
  height: 10px;
  width: 100%;
  background-image:
    linear-gradient(45deg, var(--texto) 25%, transparent 25%),
    linear-gradient(-45deg, var(--texto) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--texto) 75%),
    linear-gradient(-45deg, transparent 75%, var(--texto) 75%);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px, 7px -7px, -7px 0px;
  opacity: 0.9;
}

.contenedor {
  max-width: 640px;
  margin: 0 auto;
  padding: 32px 20px 80px;
}

.encabezado {
  margin-bottom: 28px;
}

.encabezado .marca {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--amarillo);
  margin: 0 0 4px;
  font-weight: 600;
}

.encabezado h1 {
  font-size: 34px;
  font-weight: 700;
  margin: 0 0 6px;
  line-height: 1.1;
}

.encabezado p {
  color: var(--texto-tenue);
  margin: 0;
  font-size: 15px;
}

.tarjeta {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 24px;
  margin-bottom: 20px;
}

.tarjeta h2 {
  font-size: 15px;
  text-transform: none;
  color: var(--amarillo);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--borde);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.grid.tres { grid-template-columns: 1fr 1fr 1fr; }

.campo { margin-bottom: 16px; }
.campo.ancho { grid-column: 1 / -1; }

.campo label {
  display: block;
  font-size: 13px;
  color: var(--texto-tenue);
  margin-bottom: 6px;
  font-weight: 500;
}

.campo input,
.campo select {
  width: 100%;
  padding: 11px 12px;
  background: var(--panel-alto);
  border: 1px solid var(--borde);
  border-radius: 6px;
  color: var(--texto);
  font-size: 15px;
  font-family: inherit;
}

.campo input:focus,
.campo select:focus {
  outline: none;
  border-color: var(--rojo);
}

.campo input[readonly] {
  color: var(--texto-tenue);
}

.aviso-recurrente {
  display: none;
  background: rgba(63, 181, 109, 0.12);
  border: 1px solid rgba(63, 181, 109, 0.4);
  color: var(--exito);
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13.5px;
  margin-bottom: 16px;
}

.aviso-recurrente.visible { display: block; }

/* Acordeon legal */
.acordeon-item { border: 1px solid var(--borde); border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
.acordeon-boton {
  width: 100%;
  text-align: left;
  background: var(--panel-alto);
  border: none;
  color: var(--texto);
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Oswald', sans-serif;
}
.acordeon-boton .flecha { transition: transform 0.2s ease; color: var(--texto-tenue); }
.acordeon-boton.abierto .flecha { transform: rotate(180deg); }
.acordeon-cuerpo {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
  background: var(--panel);
}
.acordeon-cuerpo .interior {
  padding: 14px 16px;
  font-size: 13px;
  color: var(--texto-tenue);
  max-height: 220px;
  overflow-y: auto;
}

/* Firma */
.firma-caja {
  border: 1px dashed var(--borde);
  border-radius: 8px;
  background: #fff;
  touch-action: none;
}
#lienzo-firma { display: block; width: 100%; height: 200px; cursor: crosshair; }
.firma-acciones { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.firma-acciones .estado { font-size: 12.5px; color: var(--texto-tenue); }
.btn-limpiar {
  background: transparent;
  border: 1px solid var(--borde);
  color: var(--texto-tenue);
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}
.btn-limpiar:hover { border-color: var(--rojo); color: var(--rojo); }

.check-linea {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--texto-tenue);
  margin: 18px 0;
}
.check-linea input { margin-top: 3px; width: 16px; height: 16px; flex-shrink: 0; }

.btn-enviar {
  width: 100%;
  padding: 15px;
  background: var(--rojo);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: 'Oswald', sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s ease;
}
.btn-enviar:hover { background: #d13620; }
.btn-enviar:disabled { background: var(--borde); color: var(--texto-tenue); cursor: not-allowed; }

.mensaje {
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 14px;
  margin-top: 16px;
  display: none;
}
.mensaje.visible { display: block; }
.mensaje.exito { background: rgba(63, 181, 109, 0.12); border: 1px solid rgba(63, 181, 109, 0.4); color: var(--exito); }
.mensaje.error { background: rgba(239, 83, 80, 0.12); border: 1px solid rgba(239, 83, 80, 0.4); color: var(--error); }

.enlace-admin {
  display: block;
  text-align: center;
  color: var(--texto-tenue);
  font-size: 12.5px;
  margin-top: 24px;
  text-decoration: none;
}
.enlace-admin:hover { color: var(--amarillo); }

@media (max-width: 560px) {
  .grid, .grid.tres { grid-template-columns: 1fr; }
  .encabezado h1 { font-size: 27px; }
}