:root{
    --marca:#6B4A3E; --acento:#E8B4B8; --fondo:#FFFFFF; --panel:#FAF5F3; --texto:#2A211E;
    --radio:14px; --gap:22px; --tipo:16px;
    --suave:#8A7A73; --linea:rgba(42,33,30,.10);
    --ok:#2E7D57; --alerta:#B4802A; --error:#B3372F;
    --sombra:0 1px 2px rgba(42,33,30,.05), 0 8px 24px rgba(42,33,30,.06);
    --fuente:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{margin:0;height:100%}
  body{background:var(--fondo);color:var(--texto);font:var(--tipo)/1.47 var(--fuente);
       font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
  button,input,select,textarea{font:inherit;color:inherit}
  button{cursor:pointer;border:none;background:none}
  .app{display:flex;flex-direction:column;min-height:100%}
  header{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;
    padding:12px 24px;background:color-mix(in srgb,var(--fondo) 78%,transparent);
    backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
    border-bottom:.5px solid var(--linea)}
  .mark{font-size:19px;font-weight:600;letter-spacing:-.022em;color:var(--marca)}
  .mark i{font-style:normal;font-weight:400;color:var(--suave);margin-left:7px;font-size:14px;letter-spacing:0}
  .seg{display:flex;gap:2px;margin-left:auto;background:var(--panel);padding:3px;border-radius:999px;flex-wrap:wrap}
  .seg button{font-size:13.5px;font-weight:500;padding:6px 13px;border-radius:999px;color:var(--suave);
    transition:background .18s ease,color .18s ease}
  .seg button.on{background:var(--fondo);color:var(--marca);box-shadow:0 1px 3px rgba(42,33,30,.12)}
  .seg button.done{color:var(--marca)}
  .icono{width:36px;height:36px;border-radius:999px;background:var(--panel);display:grid;place-items:center;font-size:16px;flex:none}
  #estadoGuardado{font-size:13px;color:var(--suave);display:flex;align-items:center;gap:7px;white-space:nowrap}
  #estadoGuardado b{font-weight:500}
  .punto{width:8px;height:8px;border-radius:999px;background:var(--suave);flex:none}
  .punto.ok{background:var(--ok)}.punto.err{background:var(--error)}.punto.va{background:var(--alerta)}
  main{flex:1;width:100%;max-width:1180px;margin:0 auto;padding:40px 24px 96px}
  h1{font-size:38px;line-height:1.08;letter-spacing:-.03em;font-weight:600;margin:0 0 10px}
  h2{font-size:21px;letter-spacing:-.02em;font-weight:600;margin:34px 0 14px}
  h3{font-size:15px;font-weight:600;margin:0 0 12px;letter-spacing:-.01em}
  p.sub{margin:0 0 28px;color:var(--suave);font-size:17px;max-width:62ch;line-height:1.45}
  .card{background:var(--fondo);border:.5px solid var(--linea);border-radius:calc(var(--radio) + 6px);
    padding:var(--gap);box-shadow:var(--sombra)}
  .card + .card{margin-top:16px}
  .panel{background:var(--panel);border-radius:calc(var(--radio) + 6px);padding:var(--gap)}
  .row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
  .btn{background:var(--marca);color:#fff;border-radius:999px;padding:12px 24px;font-size:16px;
    font-weight:500;letter-spacing:-.01em;transition:transform .12s ease,opacity .18s ease}
  .btn:hover{opacity:.9}.btn:active{transform:scale(.97)}
  .btn:disabled{opacity:.35;cursor:not-allowed;transform:none}
  .btn.sec{background:var(--panel);color:var(--marca)}
  .btn.acento{background:var(--acento);color:#3A2420}
  .btn.peligro{background:var(--error);color:#fff}
  .btn.chico{padding:8px 16px;font-size:14px}
  .btn:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
    outline:2.5px solid var(--acento);outline-offset:2px}
  label.f{display:block;font-size:13px;color:var(--suave);margin-bottom:6px;letter-spacing:-.005em}
  .fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
  input[type=text],input[type=number],input[type=search],select{width:100%;padding:12px 14px;
    border:.5px solid var(--linea);border-radius:var(--radio);background:var(--panel)}
  input.mal{border-color:var(--error);box-shadow:0 0 0 3px color-mix(in srgb,var(--error) 22%,transparent)}
  .errcampo{color:var(--error);font-size:13px;margin-top:6px}
  input[type=color]{width:100%;height:44px;border:.5px solid var(--linea);border-radius:var(--radio);background:var(--panel);padding:4px}
  input[type=range]{width:100%;accent-color:var(--marca)}
  .drop{border:1.5px dashed color-mix(in srgb,var(--acento) 80%,var(--marca));background:var(--panel);
    border-radius:calc(var(--radio) + 8px);padding:48px 22px;text-align:center;color:var(--suave)}
  .drop.hot{background:color-mix(in srgb,var(--acento) 22%,var(--fondo));border-color:var(--marca)}
  .thumbs{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
  .thumb{position:relative;width:124px}
  .thumb img{width:124px;height:124px;object-fit:cover;border-radius:var(--radio);display:block}
  .thumb select{margin-top:6px;font-size:13px;padding:7px 10px}
  .thumb .x{position:absolute;top:7px;right:7px;width:24px;height:24px;border-radius:999px;
    background:rgba(0,0,0,.55);color:#fff;font-size:13px;line-height:1}
  ul.comp{list-style:none;padding:0;margin:0;border-radius:calc(var(--radio) + 6px);overflow:hidden;border:.5px solid var(--linea)}
  ul.comp li{display:flex;align-items:center;gap:14px;padding:14px 18px;background:var(--fondo)}
  ul.comp li + li{border-top:.5px solid var(--linea)}
  ul.comp input[type=text]{flex:1;border:none;background:transparent;padding:4px 0}
  .sw{position:relative;width:50px;height:30px;flex:none}
  .sw input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:2}
  .sw span{position:absolute;inset:0;background:#E4DEDA;border-radius:999px;transition:background .2s ease}
  .sw span::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;background:#fff;
    border-radius:999px;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s ease}
  .sw input:checked + span{background:var(--marca)}
  .sw input:checked + span::after{transform:translateX(20px)}
  .aviso{background:color-mix(in srgb,var(--acento) 26%,var(--fondo));border-radius:calc(var(--radio) + 4px);
    padding:16px 20px;margin:18px 0;font-size:15px}
  .aviso.rojo{background:color-mix(in srgb,var(--error) 12%,var(--fondo));border:.5px solid color-mix(in srgb,var(--error) 40%,transparent)}
  .nota{background:var(--panel);border-radius:calc(var(--radio) + 4px);padding:16px 20px;margin:14px 0;font-size:15px}
  table{border-collapse:separate;border-spacing:0;width:100%;font-size:15px;background:var(--fondo);
    border:.5px solid var(--linea);border-radius:calc(var(--radio) + 6px);overflow:hidden}
  th,td{padding:12px 16px;text-align:left}
  th{background:var(--panel);font-size:13px;font-weight:600;color:var(--suave)}
  td{border-top:.5px solid var(--linea)}
  .editor{display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:start}
  #lienzo{background:var(--fondo);border:.5px solid var(--linea);border-radius:calc(var(--radio) + 6px);
    overflow:hidden;box-shadow:var(--sombra)}
  #canvas{display:block;width:100%;height:62vh;min-height:420px;touch-action:none;cursor:grab}
  #canvas.dragging{cursor:grabbing}
  .tools{display:flex;gap:6px;flex-wrap:wrap;padding:10px;border-bottom:.5px solid var(--linea);background:var(--panel)}
  .tools button{border-radius:999px;padding:7px 15px;font-size:13.5px;background:var(--fondo);color:var(--texto);
    box-shadow:0 1px 2px rgba(42,33,30,.06)}
  .tools button.on{background:var(--marca);color:#fff}
  .side{background:var(--fondo);border:.5px solid var(--linea);border-radius:calc(var(--radio) + 6px);
    padding:20px;position:sticky;top:76px;box-shadow:var(--sombra)}
  .side .fields{grid-template-columns:1fr 1fr;gap:12px}
  .lista{border-radius:var(--radio);overflow:hidden;border:.5px solid var(--linea);max-height:210px;overflow-y:auto}
  .lista div{padding:10px 14px;font-size:14px;cursor:pointer}
  .lista div + div{border-top:.5px solid var(--linea)}
  .lista div.on{background:color-mix(in srgb,var(--acento) 30%,var(--fondo));font-weight:500}
  .proy{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:20px}
  .tarjeta{background:var(--fondo);border:.5px solid var(--linea);border-radius:calc(var(--radio) + 6px);
    padding:18px;box-shadow:var(--sombra);display:flex;flex-direction:column;gap:10px}
  .tarjeta h4{margin:0;font-size:17px;letter-spacing:-.01em}
  .chip{display:inline-block;font-size:12px;padding:3px 10px;border-radius:999px;background:var(--panel);color:var(--suave)}
  .chip.ok{background:color-mix(in srgb,var(--ok) 16%,var(--fondo));color:var(--ok)}
  .chip.rev{background:color-mix(in srgb,var(--alerta) 18%,var(--fondo));color:var(--alerta)}
  .check{display:flex;gap:12px;align-items:flex-start;padding:13px 0}
  .check + .check{border-top:.5px solid var(--linea)}
  .check .ic{width:22px;height:22px;border-radius:999px;display:grid;place-items:center;color:#fff;font-size:13px;flex:none;margin-top:1px}
  .ic.ok{background:var(--ok)}.ic.aviso{background:var(--alerta)}.ic.error{background:var(--error)}
  .check b{font-weight:600;display:block;font-size:15px}
  .check span{color:var(--suave);font-size:14px}
  .hint{font-size:13.5px;color:var(--suave)}
  .spin{display:inline-block;width:14px;height:14px;border:2px solid var(--panel);border-top-color:var(--marca);
    border-radius:50%;animation:s .8s linear infinite;vertical-align:-2px;margin-right:9px}
  @keyframes s{to{transform:rotate(360deg)}}
  .sheet{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(30,22,20,.35);
    backdrop-filter:blur(6px);padding:20px}
  .sheet .box{background:var(--fondo);border-radius:26px;padding:26px;width:min(540px,100%);
    max-height:86vh;overflow:auto;box-shadow:0 24px 70px rgba(0,0,0,.28)}
  .paleta{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
  .paleta button{width:46px;height:46px;border-radius:999px;border:2px solid transparent;box-shadow:var(--sombra)}
  .paleta button.on{border-color:var(--texto)}
  .hojas{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-top:16px}
  .hoja{border:.5px solid var(--linea);border-radius:8px;overflow:hidden;background:#fff}
  .hoja svg{display:block;width:100%;height:auto;background:#fff}
  .hoja div{font-size:11.5px;padding:6px 8px;color:var(--suave);border-top:.5px solid var(--linea)}
  @media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
  @media(max-width:900px){
    .editor{grid-template-columns:1fr}.side{position:static}
    main{padding:28px 18px 80px}h1{font-size:30px}
    header{padding:10px 16px;flex-wrap:wrap}.seg{width:100%;margin-left:0;order:4;justify-content:space-between}
    #estadoGuardado{margin-left:auto}
  }

  .origen{font-size:12px;margin-top:6px;display:flex;gap:8px;align-items:center;color:var(--suave)}
  .origen.estimado{color:var(--alerta)}
  .origen.estimado span::before{content:"● "}
  .origen.pendiente{color:var(--error)}
  .origen.usuario span::before{content:"✓ "}
  .chip.mal{background:color-mix(in srgb,var(--error) 16%,var(--fondo));color:var(--error)}
  .semaforo{display:flex;gap:16px;align-items:center;padding:18px 22px;border-radius:calc(var(--radio) + 6px);
    border:.5px solid var(--linea);box-shadow:var(--sombra);margin:0 0 20px}
  .semaforo .luz{font-size:30px;line-height:1}
  .semaforo.verde{background:color-mix(in srgb,var(--ok) 10%,var(--fondo))}
  .semaforo.amarillo{background:color-mix(in srgb,var(--alerta) 14%,var(--fondo))}
  .semaforo.rojo{background:color-mix(in srgb,var(--error) 12%,var(--fondo))}
  footer{padding:20px 24px 40px;color:var(--suave);font-size:12.5px;text-align:center}

  /* Identidad del proyecto: miniatura de la foto de referencia en cada tarjeta */
  .cabecera-tarjeta{display:flex;align-items:center;gap:12px;margin-bottom:8px}
  .cabecera-tarjeta h4{margin:0;min-width:0;overflow-wrap:anywhere}
  .mini{width:52px;height:52px;flex:0 0 52px;border-radius:calc(var(--radio) * .6);
    object-fit:cover;background:var(--panel);border:1px solid var(--linea)}
  .mini.vacia{display:flex;align-items:center;justify-content:center;
    font-size:22px;font-weight:600;color:var(--marca);background:var(--panel)}
  /* Muestra viva de la tipografia en el panel de Apariencia */
  .muestra-fuente{margin-top:12px;padding:14px 16px;background:var(--panel);
    border-radius:calc(var(--radio) * .7);border:1px solid var(--linea)}