/* ==========================================================================
   Toyota-like UI — Audit Portal
   ========================================================================== */
:root{
  --brand: #EB0A1E;           /* Toyota red */
  --brand-600:#D10A1B;
  --bg:#F5F6FA;               /* page background */
  --text:#0F172A;             /* near-black */
  --muted:#6B7280;            /* secondary text */
  --line:#E5E7EB;             /* subtle border */
  --card:#FFFFFF;

  --ok:#16A34A;   --ok-100:#DCFCE7;
  --warn:#F59E0B; --warn-100:#FEF3C7;
  --bad:#EF4444;  --bad-100:#FEE2E2;

  --radius-xs:7px; --radius-sm:10px; --radius-md:14px;
  --shadow-1:0 2px 8px rgba(15,23,42,.06);
  --shadow-2:0 8px 24px rgba(15,23,42,.08);
  --font-ui:'Inter', system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

/* Global */
html,body{ background:var(--bg) !important; color:var(--text) !important; font-family:var(--font-ui); }
main.container{ max-width:1120px; margin-inline:auto; padding-inline:8px; }
h1,h2,h3{ color:var(--text)!important; line-height:1.2; margin:0 0 .5rem; }
h1{ font-weight:800; font-size:clamp(28px,3.6vw,36px); letter-spacing:.1px; }
h2{ font-weight:700; font-size:clamp(20px,2.6vw,26px); margin-top:24px; }
h3{ font-weight:700; font-size:18px; }
p,li,span,div,th,td,label{ color:var(--text)!important; }
a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }

body::before{ /* cinta superior roja, identidad */
  content:""; position:fixed; inset:0 auto auto 0; height:3px; width:100%; background:var(--brand); z-index:1;
}

/* Header row (h1 + métricas) */
.header{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin:12px 0 10px; }
.subtle{ color:var(--muted); }

/* Cards / sections */
.card,.infocard,.q-card,article,section{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius-md); box-shadow:var(--shadow-1);
}
.infocard{ padding:16px 18px; margin:14px 0 10px; }
.q-card{ padding:16px 18px; margin:18px 0; }

/* Info grid (audit header) */
.infogrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.infoitem{ font-size:14px; }
.infoitem b{ display:block; font-size:12px; color:#111827; letter-spacing:.04em; text-transform:uppercase; margin-bottom:3px; }
.state{ font-weight:800; }
.state.ok{ color:#065F46; }
.state.bad{ color:#991B1B; }

/* Score badges */
.score{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 12px; border-radius:999px; background:#F3F4F6;
  border:1px solid var(--line); color:#111827; font-weight:700;
}
.badge.ok{ background:var(--ok-100); border-color:#86EFAC; color:#065F46; }
.badge.warn{ background:var(--warn-100); border-color:#FCD34D; color:#78350F; }
.badge.bad{ background:var(--bad-100); border-color:#FCA5A5; color:#7F1D1D; }
.pill{
  display:inline-block; padding:4px 9px; border-radius:999px;
  background:#F3F4F6; border:1px solid var(--line); color:#111827; font-weight:800; font-size:12px;
}
.pill.acc{ background:#E7F0FF; border-color:#D4E3FF; }
.pill.est{ background:#FFE6F1; border-color:#FFD6EA; }

/* Question text */
.q-title{ font-weight:800; font-size:18px; margin:0 0 8px; }
.levels{ font-size:14px; color:#374151; margin:6px 0 14px; }
.levels b{ color:#0f172a; }

/* Photos grid */
.photos{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:16px; }
.photo{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:10px; box-shadow:var(--shadow-1);
}
.photo.neg{ background:#FFF7F7; border-color:var(--bad); box-shadow:0 0 0 2px rgba(239,68,68,.12) inset; }
.img{ width:100%; height:180px; object-fit:contain; border-radius:10px; background:#F8FAFC; cursor:zoom-in; }
.caption{ font-size:13px; margin:8px 0 6px; font-weight:700; }
.tags{ display:flex; gap:6px; flex-wrap:wrap; }
.tag{
  display:inline-block; border-radius:7px; padding:3px 8px; font-size:12px;
  border:1px solid var(--line); background:#F8FAFC; color:#111827; font-weight:700;
}
.tag.ok{ background:var(--ok-100); border-color:#86EFAC; color:#065F46; }
.tag.bad{ background:var(--bad-100); border-color:#FCA5A5; color:#7F1D1D; }

/* Lightbox */
.lightbox{
  position:fixed; inset:0; background:rgba(255,255,255,.88);
  display:none; align-items:center; justify-content:center; z-index:9999; padding:22px;
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width:95vw; max-height:90vh; border-radius:14px; box-shadow:var(--shadow-2); }
.lightbox .caption{ color:var(--text); text-align:center; margin-top:10px; font-size:14px; }
.lightbox .close{ position:absolute; top:16px; right:20px; font-size:28px; color:#111827; cursor:pointer; }

/* Charts */
figure{ height:330px; margin:12px 0 18px; }
figure > canvas{ width:100% !important; height:100% !important; }
.chart-card{ padding:14px; }

/* Toolbar (results.html) */
.toolbar{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:10px 0; }

/* Buttons */
button,.btn{
  appearance:none; border:1px solid transparent; border-radius:10px;
  padding:9px 14px; background:var(--brand); color:#fff; font-weight:800;
  box-shadow:var(--shadow-1); cursor:pointer; transition:transform .03s, box-shadow .2s, background .2s;
}
button:hover,.btn:hover{ background:var(--brand-600); box-shadow:var(--shadow-2); }
button:active,.btn:active{ transform:translateY(1px); }
.btn.ghost{ background:transparent; color:var(--brand); border-color:var(--brand); }
.btn.secondary{ background:#fff; color:var(--text); border-color:var(--line); }

/* Inputs / selects */
input,select,textarea{
  background:#fff; color:var(--text);
  border:1px solid var(--line); border-radius:10px; padding:9px 12px;
  box-shadow:inset 0 1px 0 rgba(15,23,42,.03);
}
input:focus,select:focus,textarea:focus{
  border-color:var(--brand); box-shadow:0 0 0 3px rgba(235,10,30,.14);
  outline:none;
}

/* Tables (results.html & index.html summaries) */
table{
  width:100%; border-collapse:separate; border-spacing:0; background:#fff;
  border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:var(--shadow-1);
  font-variant-numeric: tabular-nums;
}
thead th{
  background:#FAFAFA; color:#111827; text-align:left; font-weight:800;
  padding:10px 12px; border-bottom:1px solid var(--line);
}
tbody td{ padding:10px 12px; border-bottom:1px solid var(--line); }
tbody tr:nth-child(odd){ background:#FFFFFF; }
tbody tr:nth-child(even){ background:#FBFBFC; }
tbody tr:hover{ background:#F7F8FC; }

/* Small helpers */
.center{text-align:center;} .right{text-align:right;} .muted{color:var(--muted)!important;}
.nowrap{white-space:nowrap;}
.round{border-radius:12px;}
.hr{ height:1px; background:var(--line); margin:10px 0; }

/* Responsive tweaks */
@media (max-width:640px){
  figure{ height:260px; }
  .img{ height:150px; }
}

footer {
  text-align: center; /* Centra el logo en el faldón */
  padding: 20px 0;    /* Añade un poco de espacio arriba y abajo */
  margin-top: 40px;   /* Separa el faldón del contenido de arriba */
  border-top: 1px solid #e7e7e7; /* Línea sutil de separación */
}

footer img {
  width: 150px;       /* Ajusta el tamaño del logo como necesites */
  height: auto;       /* Mantiene la proporción del logo */
}