/* certificados-app/assets/styles.css */
:root{
  --brand:#d93025;        /* rojo CTA ACOINPRE */
  --brand-dark:#b1241b;   /* hover */
  --ink:#111;
  --muted:#5b6870;
  --surface:#ffffff;
  --surface-2:#f7f7f9;
  --line:#e7e9ee;
  --link:#0b5ed7;         /* azul enlaces/botones secundarios */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,Arial,"Segoe UI"; background:var(--surface-2); color:var(--ink)}

/* Barra superior con logo */
.brandbar{
  position:sticky; top:0; z-index:10;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:14px;
  padding:10px 16px; box-shadow:0 4px 12px rgba(0,0,0,.04);
}
.brandbar .logo img{height:44px; display:block}
.brandbar .title{font-weight:700; letter-spacing:.2px}

/* Contenedor y tarjeta */
.container{max-width:1100px; margin:24px auto; padding:0 16px}
.card{background:var(--surface); border:1px solid var(--line);
  border-radius:14px; box-shadow:0 6px 18px rgba(0,0,0,.06); padding:20px}

/* Formulario */
form.inline{display:grid; grid-template-columns:1fr auto; gap:12px}
input[type="tel"],input[type="text"]{
  font-size:16px; padding:12px 14px; border:1px solid #cfd3d8; border-radius:10px; outline:none
}
input:focus{border-color:var(--link)}
.btn{display:inline-block; padding:12px 16px; border-radius:10px;
  text-decoration:none; font-weight:600; cursor:pointer;
  border:0; background:var(--link); color:#fff}
.btn:hover{opacity:.92}
.btn-brand{background:var(--brand)}
.btn-brand:hover{background:var(--brand-dark)}
.ghost{background:#eef2ff; color:#283b8f}
.muted{color:var(--muted); font-size:12px}

/* Tabla */
table{width:100%; border-collapse:collapse}
th,td{padding:12px 10px; text-align:left; border-bottom:1px solid #f0f2f4}
th{font-size:13px; color:#444; letter-spacing:.02em}
td{font-size:15px}
.badge{background:#e8f0fe;color:#174ea6;border-radius:999px;padding:8px 14px;font-weight:600}

/* Responsive */
@media (max-width:640px){
  form.inline{grid-template-columns:1fr}
}