/* Paleta */
:root{
    --red:#B92117;
    --mustard:#D4AC0D;
    --orange:#D35400;
    --white:#FFFFFF;
    --text:#1f2937;
    --muted:#6b7280;
    --bg:#f8fafc;
    --card:#ffffff;
    --shadow:0 10px 25px rgba(0,0,0,.08);
    --radius:16px;
  }
  
  /* Base */
  *{ box-sizing:border-box }
  html,body{ height:100% }
  body{
    margin:0;
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    color:var(--text);
    background:linear-gradient(135deg, #fff 0%, var(--bg) 100%);
  }
  .wrap{ max-width:1100px; margin:0 auto; padding:0 16px }
  
  /* ===== Topbar ===== */
  .topbar{
    position:sticky; top:0; z-index:100;
    background:linear-gradient(90deg, var(--red), var(--orange));
    color:var(--white); box-shadow:var(--shadow);
  }
  .topbar-inner{ display:flex; align-items:center; gap:12px; padding:12px 0 }
  .brand{ display:flex; align-items:center; gap:10px; font-size:18px }
  .logo{ font-size:22px }
  
  /* Acciones / botones */
  .actions{ display:flex; align-items:center; gap:10px; margin-left:auto }
  .actions form{ margin:0 }
  .btn{
    border:1px solid #e5e7eb; background:#fff; color:var(--text);
    padding:9px 14px; border-radius:10px; cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease, background-color .12s ease, border-color .12s ease;
  }
  .btn:hover{ transform:translateY(-1px); box-shadow:0 16px 30px rgba(0,0,0,.12) }
  .btn.ghost{
    background:transparent; color:var(--white);
    border:1px solid rgba(255,255,255,.6);
    border-radius:999px; padding:8px 12px;
  }
  .btn.ghost:hover{ background:rgba(255,255,255,.15) }
  .btn.primary{ background:linear-gradient(90deg, var(--red), var(--orange)); color:#fff; border-color:transparent }
  .btn.danger{ background:#fff5f5; color:#b91c1c; border-color:#fecaca }
  
  /* Hamburguesa (móvil) */
  .menu-toggle{ display:none }
  
  /* ===== Cards ===== */
  .card{
    background:var(--card); border-radius:var(--radius);
    border:1px solid #eef2f7; box-shadow:var(--shadow);
    margin:18px 0; overflow:hidden;
  }
  .card-head{ padding:12px 16px; border-bottom:1px solid #eef2f7 }
  .card-head h3{ margin:0; font-size:16px }
  .card-head.row{ display:flex; align-items:center; justify-content:space-between }
  
  /* ===== Form ===== */
  .form-grid{
    padding:14px 16px;
    display:grid; grid-template-columns:repeat(2,1fr); gap:12px;
  }
  .form-grid .full{ grid-column:1 / -1 }
  .field{ display:flex; flex-direction:column; gap:6px }
  .field span{ font-size:12px; color:var(--muted) }
  
  input[type="text"], input[type="search"], input[type="number"], select, textarea{
    width:100%; padding:10px 12px; border:1px solid #e5e7eb; border-radius:10px;
    background:#fff; color:var(--text); outline:none;
    transition:border-color .15s ease, box-shadow .15s ease;
  }
  input:focus, select:focus, textarea:focus{
    border-color:var(--orange);
    box-shadow:0 0 0 3px rgba(211,84,0,.12);
  }
  .field-note{ color:#6b7280; font-size:12px; }
  
  /* Uploader */
  .uploader{ grid-column:1 / -1; display:flex; gap:14px; align-items:center; padding:6px 0 }
  .thumb{
    width:84px; height:84px; border-radius:14px; background:#f3f4f6; color:#6b7280;
    display:grid; place-items:center; overflow:hidden; border:1px solid #e5e7eb; box-shadow:var(--shadow);
  }
  .thumb img{ width:100%; height:100%; object-fit:cover; display:block }
  
  /* Pills / chips */
  .pill{
    padding:6px 10px; border-radius:999px; background:#fff; border:1px solid #e5e7eb;
    color:var(--muted); font-weight:700; box-shadow:var(--shadow);
  }
  
  /* ===== Toolbar / filtros ===== */
  .toolbar{ width:100%; display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:space-between }
  .filters{ display:flex; gap:12px; align-items:center; flex-wrap:wrap }
  .chk{ display:flex; gap:6px; align-items:center; color:var(--muted) }
  .price{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
  .price .sep{ color:#cbd5e1 }
  .search{ display:flex; gap:8px; align-items:center }
  
  /* ===== Tabla ===== */
  .table-wrap{ width:100%; overflow:auto }
  .table{ width:100%; border-collapse:collapse; font-size:14px }
  .table thead th{
    position:sticky; top:0; background:#f8fafc; color:#111827;
    text-align:left; padding:10px; border-bottom:1px solid #e5e7eb; z-index:1;
  }
  .table tbody td{
    padding:10px; border-bottom:1px solid #eef2f7; vertical-align:middle;
  }
  .table tbody tr:hover{ background:#fafafa }
  .table .acciones{ display:flex; gap:8px; flex-wrap:wrap }
  
  /* Previews en tabla */
  .table img{ max-width:120px; border-radius:10px; border:1px solid #e5e7eb }
  
  /* Toast (si lo usas) */
  .toast{
    position:fixed; right:16px; bottom:16px; min-width:220px; max-width:320px;
    background:var(--card); color:var(--text); border:1px solid #e5e7eb;
    box-shadow:var(--shadow); border-radius:12px; padding:10px 12px;
    opacity:0; transform:translateY(10px); pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
  }
  .toast.show{ opacity:1; transform:translateY(0); pointer-events:auto }
  .toast.ok{ border-left:3px solid #10b981 }
  .toast.err{ border-left:3px solid #ef4444 }
  
  /* ===== Responsive ===== */
  @media (max-width:960px){
    .actions{ flex-wrap:wrap; gap:8px }
  }
  @media (max-width:720px){
    .menu-toggle{
      display:inline-flex; align-items:center; gap:8px;
      margin-left:auto; color:var(--white);
      text-decoration:none; border:1px solid rgba(255,255,255,.6);
      padding:8px 12px; border-radius:999px; background:transparent; cursor:pointer;
    }
    .topbar .actions{
      position:absolute; left:12px; right:12px; top: calc(60px + 8px);
      display:none; flex-direction:column; gap:8px;
      background:linear-gradient(90deg, var(--red), var(--orange));
      border:1px solid rgba(255,255,255,.25);
      border-radius:12px; padding:10px; box-shadow:var(--shadow);
    }
    .topbar .actions.show{ display:flex }
    .topbar .actions .btn{ width:100%; text-align:left; padding:10px 12px }
    .topbar .actions form{ width:100% }
    .topbar .actions .btn.danger{ text-align:center }
  
    .form-grid{ grid-template-columns:1fr }
    .table thead th:nth-child(2){ min-width:200px }
    .table thead th:nth-child(5){ min-width:200px }
  }
  
  /* ===== Tabla apilada (mobile) sin scroll ===== */
  @media (max-width: 640px){
    .table-wrap{ overflow: visible; }
  
    /* ocultar encabezados manteniendo accesibilidad */
    .table thead{
      position:absolute; width:1px; height:1px; margin:-1px;
      border:0; padding:0; overflow:hidden;
      clip: rect(0 0 0 0); clip-path: inset(50%);
      white-space: nowrap;
    }
  
    /* convertir en bloques */
    .table, .table tbody, .table tr, .table td{ display:block; width:100%; }
  
    /* cada fila como card */
    .table tr{
      margin:12px 0;
      border:1px solid #eef2f7;
      border-radius:12px;
      background:#fff;
      box-shadow: var(--shadow);
    }
  
    /* cada celda = etiqueta + contenido en dos columnas */
    .table tbody td{
      border:0;
      border-bottom:1px solid #eef2f7;
      padding:10px 12px;
      display:grid;
      grid-template-columns: minmax(110px, 40%) 1fr; /* etiqueta | valor */
      gap:8px; align-items:center;
    }
    .table tbody td:last-child{ border-bottom:0; }
  
    /* etiqueta tomada del atributo data-label */
    .table td::before{
      content: attr(data-label);
      font-weight:700;
      color: var(--muted);
    }
  
    .table .acciones{ justify-content:flex-start }
    .table .acciones .btn{ padding:8px 10px }
    .table img{ max-width:88px; border-radius:10px; border:1px solid #e5e7eb }
  }
  
  /* Ocultar ID en móvil (opcional) */
  @media (max-width:640px){
    .table td[data-label="#"]{ display:none; }
  }
  

  /* ===== Fix: formulario no se corta en móvil ===== */
.form-grid .field,
.form-grid .field * {
  min-width: 0;            /* evita que los inputs “empujen” la grilla */
}

input[type="text"],
input[type="search"],
input[type="number"],
select,
textarea {
  width: 100%;
  max-width: 100%;         /* nunca excedas el contenedor */
  min-width: 0;            /* clave para grid */
}

/* Uploader que se envuelve en móvil */
@media (max-width: 720px){
  .uploader{
    flex-wrap: wrap;       /* que baje a la siguiente línea si no cabe */
  }
  .thumb{
    flex: 0 0 72px;        /* un poco más compacto */
    width: 72px; height: 72px;
  }
  .up-ctrls{
    flex: 1 1 220px;       /* que pueda reducirse sin empujar */
    min-width: 0;
  }
}

/* Extra: por si algo genera scroll horizontal */
.wrap{
  overflow-x: hidden;
}

/* Botón Volver en encabezado */
.card-head.row { gap: 10px; }
.btn.back{
  display:inline-flex; align-items:center; gap:8px;
}

