/* =====================================================================
   CheckRounds — estilos base compartidos
   Paleta y tipografía de marca Yoba Systems (igual que Action Planning):
   navy #0E2A47 + teal #1FB8B0, tipografía Outfit.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap');

:root{
  --navy:#0E2A47; --navy-dark:#081A2E; --navy-mid:#123a5e;
  --teal:#1FB8B0; --teal-soft:#E5F8F6;
  --bg:#F4F6F8; --card:#ffffff; --ink:#0E2A47; --muted:#6b7a8d; --line:#E5E9EE;
  --amber:#F5A623; --amber-soft:#FDF3E1; --amber-ink:#b5570f;
  --danger:#E4572E; --danger-soft:#FDECE6;
  --ok:#0a7d6d;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg); color:var(--ink);
  font-family:'Outfit',system-ui,sans-serif;
  padding-bottom:32px; min-height:100vh;
}
h1,h2,h3{ font-family:'Outfit',sans-serif; margin:0; }
a{ color:var(--navy-mid); }
[hidden]{ display:none !important; }

/* ---------- Topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:30;
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-mid) 100%);
  color:#fff; padding:14px 18px;
}
.topbar-row{ display:flex; align-items:center; justify-content:space-between;
  max-width:1040px; margin:0 auto; gap:10px; flex-wrap:wrap; }
.brand{ display:flex; align-items:center; gap:9px; }
.brand .mark{ width:32px; height:32px; border-radius:9px; background:var(--teal);
  display:flex; align-items:center; justify-content:center; font-weight:800;
  color:#053b36; font-size:16px; flex-shrink:0; }
.brand .name{ font-weight:800; font-size:15px; line-height:1.1; }
.brand .sub{ font-size:11px; color:#a9c3da; font-weight:500; }
.topbar-controls{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.user-badge{ font-size:12px; font-weight:700; color:#c9d8e5;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  border-radius:10px; padding:7px 12px; }
.user-badge b{ color:#fff; }
.link-btn{ border:none; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  color:#c9d8e5; font-family:inherit; font-weight:700; font-size:12px;
  padding:7px 12px; border-radius:10px; cursor:pointer; }
.link-btn:hover{ color:#fff; }

/* Selector de idioma */
.lang-toggle{ display:flex; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18); border-radius:10px; padding:3px; gap:2px; }
.lang-toggle button{ border:none; background:none; color:#c9d8e5; font-family:inherit;
  font-weight:700; font-size:12px; padding:6px 10px; border-radius:8px; cursor:pointer; }
.lang-toggle button.active{ background:var(--teal); color:#053b36; }

/* Banner poka-yoke del Master (qué empresa se está viendo) */
.pokayoke{ background:var(--amber-soft); color:var(--amber-ink);
  border-bottom:2px solid var(--amber); font-weight:700; font-size:12.5px;
  text-align:center; padding:8px 14px; position:sticky; top:60px; z-index:29; }
.pokayoke select{ font-family:inherit; font-weight:700; font-size:12.5px;
  border:1.5px solid var(--amber); border-radius:8px; padding:3px 8px;
  background:#fff; color:var(--amber-ink); margin-left:6px; }

/* ---------- Layout ---------- */
main{ max-width:1040px; margin:0 auto; padding:20px 16px 0; }

.tab-nav{ display:flex; gap:6px; background:#EAEDF1; padding:4px; border-radius:12px;
  margin-bottom:20px; overflow-x:auto; }
.tab-btn{ flex:1; white-space:nowrap; border:none; background:none; padding:9px 14px;
  border-radius:9px; font-family:inherit; font-weight:700; font-size:13px;
  color:var(--muted); cursor:pointer; }
.tab-btn.active{ background:#fff; color:var(--navy); box-shadow:0 1px 3px rgba(14,42,71,.12); }

.section-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.section-head h2{ font-size:15px; font-weight:700; }
.section-head .count{ font-size:12px; color:var(--muted); font-weight:600; }

.card{ background:var(--card); border-radius:16px; border:1px solid var(--line);
  padding:16px; margin-bottom:14px; }
.hint{ font-size:12px; color:var(--muted); line-height:1.6; margin:0 0 12px; }
.empty{ font-size:12.5px; color:var(--muted); padding:10px 0; }

/* ---------- Botones ---------- */
.btn{ border:none; border-radius:10px; padding:11px 18px; font-family:inherit;
  font-weight:700; font-size:13.5px; cursor:pointer; background:var(--navy); color:#fff; }
.btn:hover{ background:var(--navy-mid); }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn.teal{ background:var(--teal); color:#053b36; }
.btn.block{ width:100%; }
.btn-sm{ border:none; border-radius:9px; padding:9px 14px; font-family:inherit;
  font-weight:700; font-size:12.5px; cursor:pointer; background:var(--navy);
  color:#fff; white-space:nowrap; }
.btn-sm:hover{ background:var(--navy-mid); }
.btn-sm.teal{ background:var(--teal); color:#053b36; }
.btn-icon{ background:none; border:none; color:var(--danger); cursor:pointer;
  padding:6px 8px; font-size:15px; }

/* ---------- Formularios ---------- */
label.field{ display:block; margin-bottom:12px; }
.field-label{ font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase;
  letter-spacing:.03em; display:block; margin-bottom:5px; }
input, select{ font-family:inherit; font-size:13.5px; }
.inp{ width:100%; border:1.5px solid var(--line); border-radius:9px; padding:10px 11px;
  background:#fafcfd; font-family:inherit; font-size:13.5px; color:var(--ink); }
.inp:focus{ outline:none; border-color:var(--teal); background:#fff; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:560px){ .field-row{ grid-template-columns:1fr; } }
.new-form{ display:grid; grid-template-columns:2fr 2fr auto; gap:8px; }
@media (max-width:640px){ .new-form{ grid-template-columns:1fr; } }

/* ---------- Badges / chips ---------- */
.badge{ font-size:10.5px; font-weight:800; padding:3px 9px; border-radius:999px;
  white-space:nowrap; flex-shrink:0; }
.badge.ok{ background:var(--teal-soft); color:var(--ok); }
.badge.pending{ background:var(--amber-soft); color:var(--amber-ink); }
.badge.tipo-set{ background:#EEF3F7; color:var(--navy); }
.badge.tipo-unset{ background:var(--amber-soft); color:var(--amber-ink); }
.badge.off{ background:#F1F1F1; color:#777; }

.chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ background:#EEF3F7; border:1px solid var(--line); color:var(--navy);
  font-size:12.5px; font-weight:600; padding:6px 12px; border-radius:999px;
  display:flex; align-items:center; gap:6px; }
.chip button{ border:none; background:none; color:var(--muted); cursor:pointer;
  font-size:13px; line-height:1; padding:0; }
.add-chip-form{ display:flex; gap:8px; margin-top:12px; }
.add-chip-form input{ flex:1; }

.role-badge{ font-size:10.5px; font-weight:800; text-transform:uppercase;
  letter-spacing:.02em; padding:4px 10px; border-radius:999px; flex-shrink:0; }
.role-badge.master{ background:#2c1a4d; color:#c9a8ff; }
.role-badge.it{ background:#0E2A47; color:#9dc4e8; }
.role-badge.director{ background:#1a3a5c; color:#8fe9e3; }
.role-badge.calidad{ background:var(--teal-soft); color:var(--ok); }
.role-badge.supervisor{ background:#EEF3F7; color:var(--navy); }
.role-badge.auditor{ background:var(--amber-soft); color:var(--amber-ink); }
.role-badge.operador{ background:#F1F1F1; color:#555; }

/* ---------- Filas de lista ---------- */
.row{ display:flex; align-items:center; gap:12px; padding:13px 0; border-top:1px solid var(--line); }
.row:first-child{ border-top:none; }
.row-info{ flex:1; min-width:0; }
.row-title{ font-weight:700; font-size:14px; }
.row-meta{ font-size:11.5px; color:var(--muted); margin-top:2px; }
.avatar{ width:36px; height:36px; border-radius:50%; background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800;
  font-size:13px; flex-shrink:0; }

.store-check-list{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.store-check{ display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
  background:#F7F9FA; border:1.5px solid var(--line); border-radius:999px; padding:5px 10px; }

/* ---------- Toast ---------- */
.toast{ position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  background:var(--navy-dark); color:#fff; padding:12px 22px; border-radius:12px;
  font-size:13.5px; font-weight:600; opacity:0; transition:opacity .25s;
  pointer-events:none; z-index:60; max-width:90vw; text-align:center; }
.toast.show{ opacity:1; }
.toast.err{ background:var(--danger); }

/* ---------- Login ---------- */
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.login-card{ background:#fff; border-radius:20px; border:1px solid var(--line);
  padding:32px 28px; width:100%; max-width:380px; box-shadow:0 8px 40px rgba(14,42,71,.10); }
.login-brand{ display:flex; align-items:center; gap:10px; margin-bottom:22px; }
.login-brand .mark{ width:40px; height:40px; border-radius:11px; background:var(--teal);
  display:flex; align-items:center; justify-content:center; font-weight:800;
  color:#053b36; font-size:20px; }
.login-brand .name{ font-weight:800; font-size:19px; }
.login-brand .sub{ font-size:11.5px; color:var(--muted); }
.msg{ font-size:12.5px; font-weight:600; padding:9px 11px; border-radius:9px; margin-bottom:12px; }
.msg.err{ background:var(--danger-soft); color:var(--danger); }
.msg.info{ background:var(--teal-soft); color:var(--ok); }
.login-alt{ text-align:center; margin-top:14px; }
.login-alt button{ border:none; background:none; color:var(--navy-mid); font-family:inherit;
  font-weight:700; font-size:12.5px; cursor:pointer; text-decoration:underline; }

/* ---------- Placeholder de fase pendiente ---------- */
.phase-stub{ max-width:560px; margin:60px auto; text-align:center; padding:0 20px; }
.phase-stub .mark{ width:56px; height:56px; border-radius:16px; background:var(--teal-soft);
  color:var(--ok); display:flex; align-items:center; justify-content:center;
  font-size:26px; margin:0 auto 16px; }
.phase-stub h2{ font-size:19px; margin-bottom:8px; }
.phase-stub p{ color:var(--muted); font-size:13.5px; line-height:1.6; }