/* ============================================================
   ChekaTec — main.css v2.0 — Responsivo completo
   ============================================================ */
:root {
  --blue-900:#0C2D5E; --blue-700:#1A4E96; --blue-500:#2D7DD2;
  --blue-400:#4A9AE8; --blue-200:#B8D9F8; --blue-100:#DDEEFF; --blue-50:#EEF6FF;
  --teal:#0EA5A0; --teal-lt:#E0F5F4;
  --white:#fff; --gray-900:#0F1923; --gray-700:#344054;
  --gray-500:#667085; --gray-300:#D0D5DD; --gray-100:#F2F4F7; --border:#E4EAF2;
  --red:#DC2626; --red-lt:#FEE2E2;
  --green:#16A34A; --green-lt:#DCFCE7;
  --amber:#D97706; --amber-lt:#FEF3C7;
  --shadow-sm:0 1px 3px rgba(0,0,0,.06);
  --shadow-md:0 4px 16px rgba(0,0,0,.08);
  --shadow-lg:0 12px 40px rgba(0,0,0,.12);
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:24px;
  --nav-h:64px;
}
*  { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body { font-family:'Plus Jakarta Sans',sans-serif; color:var(--gray-900); background:var(--gray-100); line-height:1.6; min-height:100vh }
a  { color:inherit; text-decoration:none }
img { max-width:100%; display:block }
button { font-family:inherit }

/* ── NAV ── */
.nav {
  position:sticky; top:0; z-index:200;
  background:rgba(255,255,255,.97); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  padding:0 32px; height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.logo { display:flex; align-items:center; gap:9px; flex-shrink:0 }
.logo-mark { width:34px; height:34px; background:var(--blue-500); border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#fff; font-family:'Sora',sans-serif; flex-shrink:0 }
.logo-text { font-family:'Sora',sans-serif; font-size:19px; font-weight:700; color:var(--blue-900) }
.logo-text span { color:var(--blue-500) }
.nav-links { display:flex; gap:20px }
.nav-links a { font-size:14px; font-weight:500; color:var(--gray-700); transition:color .15s; white-space:nowrap }
.nav-links a:hover { color:var(--blue-500) }
.nav-auth { display:flex; align-items:center; gap:8px; flex-shrink:0 }
.nav-btn-ghost { font-size:14px; font-weight:500; color:var(--gray-700); padding:7px 12px; border-radius:var(--r-sm); transition:background .15s; white-space:nowrap }
.nav-btn-ghost:hover { background:var(--gray-100) }
.nav-btn-outline { font-size:14px; font-weight:500; color:var(--blue-700); padding:7px 12px; border-radius:var(--r-sm); border:1.5px solid var(--blue-200); transition:all .15s; white-space:nowrap }
.nav-btn-outline:hover { border-color:var(--blue-400) }
.nav-btn { font-size:14px; font-weight:600; color:#fff; background:var(--blue-500); padding:8px 16px; border-radius:var(--r-sm); transition:background .15s; white-space:nowrap }
.nav-btn:hover { background:var(--blue-700) }

/* Hamburger menu mobile */
.nav-toggle { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:6px; border:none; background:transparent }
.nav-toggle span { display:block; width:22px; height:2px; background:var(--gray-700); border-radius:2px; transition:all .2s }
.nav-mobile { display:none; position:fixed; top:var(--nav-h); left:0; right:0; background:#fff; border-bottom:1px solid var(--border); padding:16px 20px; flex-direction:column; gap:4px; z-index:199; box-shadow:var(--shadow-md) }
.nav-mobile.open { display:flex }
.nav-mobile a { padding:10px 12px; border-radius:var(--r-sm); font-size:14px; font-weight:500; color:var(--gray-700); transition:background .15s }
.nav-mobile a:hover { background:var(--blue-50); color:var(--blue-700) }
.nav-mobile .divider-line { height:1px; background:var(--border); margin:6px 0 }

/* ── FLASH ── */
.flash { padding:12px 20px; font-size:14px; font-weight:500; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid transparent }
.flash-success { background:var(--green-lt); color:var(--green); border-color:#BBF7D0 }
.flash-error   { background:var(--red-lt);   color:var(--red);   border-color:#FECACA }
.flash-info    { background:var(--blue-100);  color:var(--blue-700); border-color:var(--blue-200) }
.flash-close   { cursor:pointer; font-size:18px; opacity:.5; margin-left:12px; flex-shrink:0 }
.flash-close:hover { opacity:1 }

/* ── CONTAINERS ── */
.container    { max-width:1100px; margin:0 auto; padding:0 20px }
.container-sm { max-width:520px;  margin:0 auto; padding:0 20px }
.container-md { max-width:760px;  margin:0 auto; padding:0 20px }

/* ── PAGE HERO ── */
.page-hero { background:linear-gradient(135deg,var(--blue-900) 0%,var(--blue-700) 100%); padding:44px 20px; color:#fff }
.page-hero h1 { font-family:'Sora',sans-serif; font-size:clamp(22px,4vw,36px); font-weight:700; margin-bottom:8px; letter-spacing:-.5px }
.page-hero p  { font-size:15px; color:rgba(255,255,255,.7); max-width:540px }

/* ── CARDS ── */
.card { background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); padding:22px; box-shadow:var(--shadow-sm) }
.card-title { font-size:15px; font-weight:700; color:var(--blue-900); margin-bottom:18px; padding-bottom:13px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px }

/* ── FORM ── */
.form-group { margin-bottom:16px }
.form-group label { display:block; font-size:12px; font-weight:600; color:var(--gray-700); margin-bottom:5px }
.form-group input,
.form-group select,
.form-group textarea {
  width:100%; padding:10px 13px;
  border:1.5px solid var(--border); border-radius:var(--r-sm);
  font-size:14px; font-family:inherit; color:var(--gray-900);
  background:#fff; transition:border-color .15s, box-shadow .15s;
  -webkit-appearance:none; appearance:none;
}
.form-group select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:36px }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { outline:none; border-color:var(--blue-400); box-shadow:0 0 0 3px rgba(45,125,210,.1) }
.form-group input::placeholder { color:var(--gray-300) }
.form-group textarea { resize:vertical; min-height:90px }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px }
.form-hint { font-size:11px; color:var(--gray-500); margin-top:4px }
.form-error-msg { font-size:12px; color:var(--red); margin-top:4px }

/* Chips seleccionables */
.chip-check { display:none }
.chip-label {
  display:inline-block; padding:7px 14px; border-radius:20px;
  border:1.5px solid var(--border); font-size:13px; cursor:pointer;
  color:var(--gray-500); background:#fff; transition:all .15s;
  user-select:none; margin:0; white-space:nowrap;
}
.chip-label:hover { border-color:var(--blue-400); color:var(--blue-500) }
.chip-check:checked + .chip-label { background:var(--blue-100); color:var(--blue-700); border-color:var(--blue-200); font-weight:600 }
.chips-label { font-size:12px; font-weight:600; color:var(--gray-700); margin-bottom:8px }
.chips-wrap  { display:flex; flex-wrap:wrap; gap:7px }

/* Upload zone */
.upload-zone { border:2px dashed var(--border); border-radius:var(--r-md); padding:24px 16px; text-align:center; cursor:pointer; transition:all .2s; background:var(--gray-100); position:relative }
.upload-zone:hover { border-color:var(--blue-400); background:var(--blue-50) }
.upload-zone input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100% }
.upload-zone .uz-icon { font-size:26px; margin-bottom:8px }
.upload-zone .uz-text { font-size:14px; color:var(--gray-500) }
.upload-zone .uz-sub  { font-size:11px; color:var(--gray-300); margin-top:3px }
.upload-preview { margin-top:10px }
.upload-preview img { width:72px; height:72px; object-fit:cover; border-radius:50%; border:2px solid var(--blue-200); margin:0 auto }

/* ── BUTTONS ── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:11px 20px; border-radius:var(--r-sm); font-size:14px; font-weight:600; font-family:inherit; cursor:pointer; border:none; transition:all .15s; text-decoration:none; white-space:nowrap }
.btn-primary  { background:var(--blue-500); color:#fff }
.btn-primary:hover  { background:var(--blue-700) }
.btn-secondary { background:#fff; color:var(--blue-700); border:1.5px solid var(--blue-200) }
.btn-secondary:hover { border-color:var(--blue-400) }
.btn-teal  { background:var(--teal); color:#fff }
.btn-teal:hover { opacity:.88 }
.btn-danger { background:var(--red); color:#fff }
.btn-block  { width:100% }
.btn-lg     { padding:13px 24px; font-size:15px }
.btn-sm     { padding:7px 13px; font-size:12px }

/* ── BADGES ── */
.badge        { display:inline-flex; align-items:center; font-size:11px; font-weight:600; padding:3px 9px; border-radius:20px }
.badge-blue   { background:var(--blue-100); color:var(--blue-700) }
.badge-teal   { background:var(--teal-lt);  color:var(--teal) }
.badge-gold   { background:#FEF3C7; color:#B45309 }
.badge-gray   { background:var(--gray-100); color:var(--gray-500) }
.badge-green  { background:var(--green-lt); color:var(--green) }
.badge-red    { background:var(--red-lt);   color:var(--red) }

/* ── TECH CARD ── */
.tech-card { background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); padding:18px; margin-bottom:12px; transition:box-shadow .18s, border-color .18s }
.tech-card:hover { box-shadow:var(--shadow-md); border-color:var(--blue-200) }
.tc-top { display:flex; gap:12px; align-items:flex-start }
.tc-av  { width:50px; height:50px; border-radius:50%; object-fit:cover; flex-shrink:0; background:var(--blue-100); display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; color:var(--blue-700) }
.tc-info { flex:1; min-width:0 }
.tc-name { font-size:16px; font-weight:700; color:var(--gray-900); margin-bottom:5px }
.tc-tags { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:6px }
.tc-comunas { font-size:12px; color:var(--gray-500); margin-bottom:8px }
.tc-rating  { display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.tc-nota    { font-size:20px; font-weight:700; color:var(--blue-900) }
.tc-stars   { color:#F59E0B; font-size:13px }
.tc-reviews { font-size:12px; color:var(--gray-500) }
.tc-actions { display:flex; flex-direction:column; gap:7px; flex-shrink:0; min-width:110px }
.tc-divider { height:1px; background:var(--border); margin:12px 0 }
.tc-about   { font-size:13px; color:var(--gray-500); line-height:1.65 }

/* ── STEPPER ── */
.stepper { display:flex; align-items:center; margin-bottom:24px; overflow-x:auto; padding-bottom:4px }
.step-item { display:flex; align-items:center; gap:7px; flex-shrink:0 }
.step-circle { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0; transition:all .3s }
.step-circle.done   { background:var(--teal);     color:#fff }
.step-circle.active { background:var(--blue-500); color:#fff }
.step-circle.pending{ background:#fff; color:var(--gray-300); border:2px solid var(--border) }
.step-label  { font-size:12px; color:var(--gray-500); white-space:nowrap; font-weight:500 }
.step-label.active { color:var(--blue-700); font-weight:600 }
.step-line   { flex:1; min-width:16px; height:2px; background:var(--border); margin:0 6px; transition:background .3s }
.step-line.done { background:var(--teal) }

/* ── MODAL ── */
.modal-backdrop {
  display:none; position:fixed; inset:0;
  background:rgba(10,22,40,.6); z-index:500;
  align-items:center; justify-content:center;
  backdrop-filter:blur(3px);
  padding:16px; /* espacio en móvil */
  overflow-y:auto;
}
.modal-backdrop.open { display:flex }
.modal {
  background:#fff; border-radius:var(--r-xl);
  padding:24px; width:100%; max-width:500px;
  box-shadow:0 24px 60px rgba(0,0,0,.18);
  max-height:calc(100vh - 32px);
  overflow-y:auto;
  position:relative;
  margin:auto; /* centrado vertical en overflow */
}
.modal-title { font-family:'Sora',sans-serif; font-size:17px; font-weight:700; color:var(--blue-900); margin-bottom:4px }
.modal-sub   { font-size:13px; color:var(--gray-500); margin-bottom:18px }

/* Botones de rating 1-7 */
.rating-btns { display:flex; gap:5px; flex-wrap:nowrap }
.rating-btn {
  flex:1; min-width:0;
  height:38px; border-radius:6px;
  border:1.5px solid var(--border);
  background:#fff; font-size:13px; font-weight:600;
  cursor:pointer; color:var(--gray-500);
  transition:all .12s; font-family:inherit;
  display:flex; align-items:center; justify-content:center;
}
.rating-btn:hover { border-color:var(--blue-400); color:var(--blue-500); background:var(--blue-50) }
.rating-btn.sel   { background:var(--blue-500); color:#fff; border-color:var(--blue-500) }

/* Sección categoría en modal */
.cat-section { margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--border) }
.cat-section:last-of-type { border-bottom:none; margin-bottom:0; padding-bottom:0 }
.cat-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:3px }
.cat-label  { font-size:13px; font-weight:600; color:var(--gray-900) }
.cat-nota   { font-size:13px; font-weight:700; color:var(--blue-500) }
.cat-hint   { font-size:11px; color:var(--gray-500); margin-bottom:7px }

/* Nota general box */
.nota-general-box {
  background:var(--blue-50); border:1px solid var(--blue-100);
  border-radius:var(--r-md); padding:11px 15px; margin:14px 0;
  display:flex; justify-content:space-between; align-items:center;
}
.nota-general-lbl { font-size:13px; font-weight:600; color:var(--blue-900) }
.nota-general-val { font-size:22px; font-weight:700; color:var(--blue-500) }

/* Barra de progreso notas */
.rating-bar { height:7px; background:var(--gray-100); border-radius:20px; overflow:hidden; margin-top:5px }
.rating-bar-fill { height:100%; border-radius:20px; transition:width .4s ease }

/* ── SIDEBAR LAYOUT ── */
.sidebar-layout { display:grid; grid-template-columns:1fr 280px; gap:20px; padding:24px 0 }
.sidebar { display:flex; flex-direction:column; gap:16px }
.ad-card { background:#fff; border:1.5px dashed var(--gray-300); border-radius:var(--r-lg); padding:14px; text-align:center; color:var(--gray-500); font-size:12px }
.ad-label { display:inline-block; background:var(--gray-100); padding:2px 8px; border-radius:4px; font-size:10px; border:1px solid var(--border); margin-bottom:6px }
.ad-placeholder { color:var(--gray-300); padding:20px 0; font-size:12px }

/* ── SEARCH BAR (hero) ── */
.search-bar { display:flex; gap:10px; flex-wrap:wrap }
.search-bar select { flex:1; min-width:150px; padding:11px 13px; border:1.5px solid rgba(255,255,255,.3); border-radius:var(--r-sm); background:rgba(255,255,255,.15); color:#fff; font-size:14px; font-family:inherit; cursor:pointer; -webkit-appearance:none; appearance:none }
.search-bar select option { background:var(--blue-900); color:#fff }
.search-bar select:focus { outline:none; border-color:#fff }

/* ── EMPTY STATE ── */
.empty-state { text-align:center; padding:52px 20px; background:#fff; border-radius:var(--r-lg); border:1px solid var(--border) }
.empty-icon  { font-size:44px; margin-bottom:14px }
.empty-title { font-size:16px; font-weight:700; color:var(--gray-900); margin-bottom:6px }
.empty-sub   { font-size:14px; color:var(--gray-500) }

/* ── PROFILE ── */
.profile-header { background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); padding:24px; display:flex; gap:18px; align-items:flex-start; margin-bottom:20px; flex-wrap:wrap }
.profile-photo  { width:84px; height:84px; border-radius:50%; object-fit:cover; border:3px solid var(--blue-200); flex-shrink:0 }

/* ── RESULTS HEADER ── */
.results-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; flex-wrap:wrap; gap:8px }
.results-count  { font-size:14px; color:var(--gray-500) }
.results-count strong { color:var(--gray-900) }

/* ── FOOTER ── */
.footer { background:var(--blue-900); padding:44px 20px 28px; margin-top:56px }
.footer-inner { max-width:1100px; margin:0 auto }
.footer-brand .logo-text { color:#fff; font-size:18px }
.footer-brand .logo-text span { color:var(--blue-400) }
.footer-brand p { font-size:13px; color:rgba(255,255,255,.4); margin-top:6px; max-width:260px }
.footer-links { display:flex; gap:20px; flex-wrap:wrap; margin:20px 0 16px }
.footer-links a { font-size:13px; color:rgba(255,255,255,.45); transition:color .15s }
.footer-links a:hover { color:var(--blue-400) }
.footer-copy { font-size:12px; color:rgba(255,255,255,.25); border-top:1px solid rgba(255,255,255,.08); padding-top:16px }

/* ── UTILIDADES ── */
.mt-1{margin-top:6px}.mt-2{margin-top:12px}.mt-3{margin-top:20px}.mt-4{margin-top:28px}
.mb-1{margin-bottom:6px}.mb-2{margin-bottom:12px}.mb-3{margin-bottom:20px}
.text-center{text-align:center}.text-right{text-align:right}
.text-sm{font-size:13px}.text-xs{font-size:11px}
.text-gray{color:var(--gray-500)}.text-blue{color:var(--blue-500)}.text-dark{color:var(--gray-900)}
.font-bold{font-weight:700}.font-semibold{font-weight:600}
.flex{display:flex}.flex-col{flex-direction:column}
.items-center{align-items:center}.items-start{align-items:flex-start}
.gap-2{gap:8px}.gap-3{gap:12px}.justify-between{justify-content:space-between}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.divider{height:1px;background:var(--border);margin:16px 0}
.section{padding:48px 0}
.w-full{width:100%}

/* ── ADMIN EXTRAS ── */
.nota-cat { display:inline-block; min-width:28px; text-align:center; font-weight:700; font-size:13px }
.nota-cat.alta  { color:var(--green) }
.nota-cat.media { color:var(--blue-500) }
.nota-cat.baja  { color:var(--amber) }

/* ============================================================
   RESPONSIVE — Mobile first
   ============================================================ */

/* Tablet y móvil grande: ≤ 900px */
@media (max-width:900px) {
  /* Nav */
  .nav { padding:0 16px }
  .nav-links { display:none }
  .nav-auth .nav-btn-ghost, .nav-auth .nav-btn-outline { display:none }
  .nav-toggle { display:flex }

  /* Layouts */
  .sidebar-layout { grid-template-columns:1fr }
  .sidebar { display:none } /* ocultar sidebar en móvil */
  .grid-2 { grid-template-columns:1fr }
  .form-row { grid-template-columns:1fr }

  /* Hero */
  .page-hero { padding:28px 16px }

  /* Containers */
  .container, .container-sm, .container-md { padding:0 16px }

  /* Cards */
  .card { padding:18px }

  /* Tech card actions — horizontal en móvil */
  .tc-actions { flex-direction:row; flex-wrap:wrap; min-width:auto }
  .tc-top { flex-wrap:wrap }

  /* Search bar */
  .search-bar { gap:8px }
  .search-bar select { min-width:100%; flex:none }
  .search-bar button  { width:100% }

  /* Stepper — scroll horizontal */
  .stepper { overflow-x:auto; padding-bottom:6px }
  .step-label { display:none } /* solo círculos en móvil */

  /* Footer */
  .footer { padding:32px 16px 20px }
  .footer-links { gap:14px }

  /* Profile */
  .profile-header { padding:18px }
  .profile-photo  { width:68px; height:68px }
}

/* Móvil pequeño: ≤ 600px */
@media (max-width:600px) {
  /* Nav */
  .nav { height:56px }
  :root { --nav-h:56px }
  .logo-text { font-size:16px }

  /* Modal — pantalla completa en móvil */
  .modal-backdrop { padding:0; align-items:flex-end }
  .modal {
    max-width:100%; width:100%;
    border-radius:var(--r-xl) var(--r-xl) 0 0;
    max-height:92vh;
    padding:20px 16px 28px; /* extra padding bottom para iPhone */
  }

  /* Rating buttons — más grandes en touch */
  .rating-btn { height:42px; font-size:14px }

  /* Botones */
  .btn-lg { padding:13px 18px; font-size:14px }
  .btn    { padding:10px 16px }

  /* Cards */
  .card { padding:16px; border-radius:var(--r-md) }

  /* Tech card */
  .tc-actions { width:100%; justify-content:flex-start }
  .tc-av { width:44px; height:44px; font-size:14px }
  .tc-name { font-size:15px }

  /* Chips — scroll horizontal en móvil */
  .chips-wrap { flex-wrap:wrap }

  /* Page hero */
  .page-hero h1 { font-size:20px }
  .page-hero p  { font-size:13px }

  /* Search */
  .search-bar { flex-direction:column }

  /* Stats row en index */
  .stats-row-mobile { grid-template-columns:1fr 1fr !important }

  /* Resultados header */
  .results-header { flex-direction:column; align-items:flex-start }

  /* Form full width */
  .form-row { grid-template-columns:1fr }

  /* Stepper simplificado */
  .step-line { min-width:10px }
}

/* Muy pequeño: ≤ 380px (iPhone SE etc) */
@media (max-width:380px) {
  .rating-btn { height:38px; font-size:12px }
  .nav { padding:0 12px }
  .card { padding:14px }
  .btn  { padding:9px 14px; font-size:13px }
}

/* Desktop grande: ≥ 1200px */
@media (min-width:1200px) {
  .container { padding:0 32px }
  .sidebar-layout { grid-template-columns:1fr 300px }
}