:root{
  --bg: #FEF3B9;
  --card: #ffffff;
  --text: #1B1B1B;

  /* Paleta inicial (ajustable a la corporativa ASORAPA) */
  --brand: #00C901;     /* verde ASORAPA */
  --brand2: #1B1B1B;    /* negro ( para header/texto */
  --accent: #F9D82A;    /* dorado/amarillo */
  --danger: #EA1B33;    /* rojo contorno */
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: var(--text);
}

header{
  background: var(--brand2);
  color: #fff;
  border-bottom: 4px solid var(—accent);
}

.header-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 16px;
  display:flex;
  align-items:center;
  gap:14px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:#fff;
}

.brand img{
  height:46px;
  width:auto;
  border-radius:6px;
  background:#fff;
  padding:2px;
}

.brand .title{
  font-weight:800;
  letter-spacing:0.5px;
  line-height:1.1;
}
.brand .subtitle{
  font-size:12px;
  opacity:0.9;
}

nav{
  margin-left:auto;
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

nav a{
  color:#fff;
  text-decoration:none;
  font-weight:700;
  opacity:0.95;
}
nav a:hover{ opacity:1; text-decoration:underline; }

.box{
  background: var(--card);
  padding: 20px;
  max-width: 1100px;
  margin: 18px auto;
  border-radius: 10px;
}

button{
  background: var(--brand);
  color:#111;
  border:0;
  border-radius:8px;
  padding:10px 14px;
  font-weight:800;
  cursor:pointer;
}
button:hover{ filter: brightness(1.05); }

.ok{ color: var(--brand); font-weight:800; }
.warn{ color: var(--danger); font-weight:800; }