/* México Makers - UI simple, rápida, responsive (Light) */
:root{
  --bg:#ffffff;
  --card:#ffffff;
  --muted:#4b5563;
  --text:#0f172a;
  --accent:#1d9bf0;   /* azul sutil */
  --accent2:#ff4db8;  /* rosa sutil */
  --ok:#16a34a;
  --warn:#d97706;
  --bad:#dc2626;
  --border:rgba(15,23,42,.12);
  --shadow: 0 18px 50px rgba(15,23,42,.10);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% 8%, rgba(29,155,240,.12), transparent 60%),
    radial-gradient(900px 500px at 90% 18%, rgba(255,77,184,.10), transparent 60%),
    var(--bg);
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:18px}
.nav{
  display:flex; gap:12px; align-items:center; justify-content:space-between;
  padding:14px 18px; border:1px solid var(--border); background:rgba(255,255,255,.72);
  backdrop-filter: blur(10px); border-radius:16px;
  box-shadow: var(--shadow);
}
.brand{display:flex;align-items:center;gap:10px}
.logo{
  width:36px;height:36px;border-radius:12px;
  background-image: image-set(
    url('/public/logo-mexico-makers.webp') type('image/webp'),
    url('/public/logo-mexico-makers.jpg') type('image/jpeg')
  );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 12px 28px rgba(29,155,240,.18);
  cursor:pointer;
  user-select:none;
}
.logo.logo-lg{
  width:160px;
  height:80px;
  border-radius:14px;
  background-size: contain;
  background-color: #fff;
}
.brand-copy h1{
  margin:0;
  font-size:20px;
  line-height:1.1;
}
@media(max-width:760px){
  .logo.logo-lg{width:132px;height:66px}
  .brand-copy h1{font-size:16px}
}
.brand h1{font-size:14px;margin:0;letter-spacing:.2px}
.brand p{margin:0;font-size:12px;color:var(--muted)}
.navlinks{display:flex;gap:10px;flex-wrap:wrap}
.navlinks a{
  padding:8px 10px;border-radius:12px;border:1px solid rgba(15,23,42,.10);
  color:var(--text); background:rgba(255,255,255,.70)
}
.navlinks a.active{border-color:rgba(29,155,240,.35); background:rgba(29,155,240,.08)}
.grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:16px}
@media(min-width:900px){.grid{grid-template-columns:1.15fr .85fr}}
.card{
  border:1px solid var(--border); background:rgba(255,255,255,.78);
  border-radius:18px; padding:16px; box-shadow: var(--shadow);
}
.card h2{margin:0 0 10px 0;font-size:18px}
.muted{color:var(--muted);font-size:13px;line-height:1.4}
.row{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:700px){.row.cols2{grid-template-columns:1fr 1fr}}
label{display:block;font-size:12px;color:var(--muted);margin:6px 0}
input,select,textarea{
  width:100%; padding:12px 12px; border-radius:14px;
  background:rgba(255,255,255,.92); border:1px solid rgba(15,23,42,.14);
  color:var(--text); outline:none;
}
textarea{min-height:120px;resize:vertical}
input:focus,select:focus,textarea:focus{
  border-color:rgba(29,155,240,.55);
  box-shadow: 0 0 0 4px rgba(29,155,240,.12);
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 14px; border-radius:14px; border:1px solid rgba(29,155,240,.40);
  background: linear-gradient(135deg, rgba(29,155,240,.14), rgba(255,77,184,.10));
  color:var(--text); cursor:pointer; font-weight:700;
}
.btn:disabled{opacity:.55;cursor:not-allowed}
.badge{display:inline-flex;gap:6px;align-items:center;padding:6px 10px;border-radius:999px;border:1px solid var(--border); background:rgba(255,255,255,.75); font-size:12px}
.badge.ok{border-color:rgba(22,163,74,.35); background:rgba(22,163,74,.08)}
.badge.warn{border-color:rgba(217,119,6,.35); background:rgba(217,119,6,.08)}
.badge.bad{border-color:rgba(220,38,38,.35); background:rgba(220,38,38,.08)}
.hr{height:1px;background:var(--border);margin:12px 0}
.kv{display:grid;grid-template-columns:1fr;gap:8px}
@media(min-width:700px){.kv{grid-template-columns:1fr 1fr}}
.kv div{padding:10px;border-radius:14px;background:rgba(255,255,255,.86);border:1px solid rgba(15,23,42,.10)}
.kv b{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.toast{margin-top:10px;padding:12px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.86)}
.preview{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.filechip{display:flex;gap:8px;align-items:center;padding:8px 10px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.86);font-size:12px}
.filechip button{all:unset;cursor:pointer;color:var(--accent2);font-weight:900}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid rgba(15,23,42,.08);font-size:13px;vertical-align:top}
.table th{color:var(--muted);text-align:left;font-weight:700}
.pill{padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.86);border:1px solid var(--border);display:inline-block;font-size:12px}
.small{font-size:12px}
.footer{margin-top:16px;color:var(--muted);font-size:12px;text-align:center}
.kanban{display:grid;grid-template-columns:repeat(5,minmax(220px,1fr));gap:12px;overflow:auto;padding-bottom:6px}
.kanban-col{border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.6);padding:10px;min-height:180px}
.kanban-col h3{margin:0 0 8px 0;font-size:13px;color:var(--muted)}
.ticket-mini{padding:10px;border:1px solid var(--border);border-radius:12px;background:#fff;margin-bottom:8px}
.ticket-mini .top{display:flex;justify-content:space-between;gap:8px;align-items:center}
.ticket-mini[draggable="true"]{cursor:grab}
.ticket-mini.dragging{opacity:.55;transform:scale(.98)}
.kanban-col.drop-target{outline:2px dashed rgba(29,155,240,.55);outline-offset:2px}

/* UI v2 refinements */
:root{
  --radius-lg:18px;
  --radius-md:14px;
  --radius-sm:10px;
}
.container{max-width:1200px;padding:20px}
.nav{position:sticky;top:12px;z-index:20}
.navlinks a{transition:.2s ease; font-weight:600}
.navlinks a:hover{transform:translateY(-1px); box-shadow:0 8px 20px rgba(15,23,42,.08)}
.card{border-radius:var(--radius-lg); padding:18px}
.card h2{font-size:19px;letter-spacing:.2px}
.row{gap:12px}
label{font-weight:600;letter-spacing:.2px}
input,select,textarea{transition:.18s ease; border-radius:var(--radius-md)}
.btn{transition:.2s ease; border-radius:12px}
.btn:hover:not(:disabled){transform:translateY(-1px); box-shadow:0 12px 30px rgba(29,155,240,.2)}
.kv div,.toast,.filechip,.table tr{transition:.2s ease}
.toast{border-radius:14px}
.toast:hover{box-shadow:0 10px 24px rgba(15,23,42,.08)}
.small{opacity:.9}

/* stronger status semantics */
.badge{font-weight:700}
.badge.warn{color:#8a4b00}
.badge.ok{color:#0f6b34}
.badge.bad{color:#9f1d1d}

/* forms */
.preview{margin-top:12px}
.filechip{background:linear-gradient(180deg,#fff,rgba(248,250,252,.95));border-radius:var(--radius-sm)}

/* tables */
.table{border-spacing:0;width:100%;overflow:hidden;border-radius:12px;border:1px solid rgba(15,23,42,.08)}
.table thead{background:rgba(241,245,249,.7)}
.table th,.table td{padding:12px}
.table tbody tr:hover{background:rgba(29,155,240,.04)}

/* timeline style */
#timeline .toast{position:relative;padding-left:16px}
#timeline .toast:before{content:"";position:absolute;left:6px;top:14px;width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* responsive */
@media (max-width: 760px){
  .container{padding:10px}

  .nav{
    position:static;
    display:block;
    padding:12px;
  }

  .brand{
    width:100%;
    margin-bottom:10px;
    align-items:flex-start;
  }

  .brand h1{font-size:16px;line-height:1.2}
  .brand p{font-size:12px}

  .navlinks{
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }

  .navlinks a{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    min-height:44px;
    padding:10px 8px;
    white-space:normal;
    line-height:1.15;
  }

  .card{padding:12px}
  .card h2{font-size:17px}

  input,select,textarea,.btn{font-size:16px}

  .table{display:block;overflow:auto;white-space:nowrap}
  .grid{gap:10px}
}

/* UI v3 - wider, denser admin layout */
.container{
  max-width: min(96vw, 1720px);
  padding: 16px 18px;
}

@media(min-width:1200px){
  .card{padding:14px}
  .row{gap:10px}
  .table th,.table td{padding:9px}
  input,select,textarea{padding:10px 11px}
}

/* Better card density for report/dashboard-like screens */
.kv{gap:6px}
.kv div{padding:8px 10px}

/* Make side-by-side layout breathe on large monitors */
@media(min-width:1400px){
  .grid{grid-template-columns:1.2fr .8fr}
  .row.cols2{grid-template-columns:1fr 1fr}
}

/* Optional helper classes for future pages */
.row.cols3{grid-template-columns:1fr}
.row.cols4{grid-template-columns:1fr}
@media(min-width:900px){
  .row.cols3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .row.cols4{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* Reportes/Dashboard compact mode */
.sticky-filters{position:sticky;top:78px;z-index:10}
.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:1200px){
  .kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

h3{margin:0 0 8px 0}

.table.dense th,.table.dense td{padding:7px 8px;font-size:12px}

.pill-btn{
  border:1px solid var(--border);
  background:#fff;
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  cursor:pointer;
}
.pill-btn:hover{border-color:rgba(29,155,240,.5);background:rgba(29,155,240,.06)}

.cat-pill{font-weight:700}
.cat-extrusion{background:rgba(251,191,36,.16);border-color:rgba(217,119,6,.35)}
.cat-cama{background:rgba(59,130,246,.14);border-color:rgba(59,130,246,.35)}
.cat-boquilla{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.35)}
.cat-ams{background:rgba(16,185,129,.14);border-color:rgba(16,185,129,.35)}
.cat-firmware{background:rgba(139,92,246,.14);border-color:rgba(139,92,246,.35)}
.cat-other{background:rgba(107,114,128,.12);border-color:rgba(107,114,128,.35)}