:root{
    --naranja:#F66014; --naranja-osc:#D14E0C; --verde:#6FAB25; --verde-osc:#578A1B;
    --fondo:#FAFAF8; --superficie:#FFFFFF; --tinta:#1C1B19; --linea:#E7E4DF; --muted:#8A8782; --err:#D64545;
    --sombra:rgba(20,18,15,.05);
  }
  [data-theme="dark"]{
    --fondo:#131211; --superficie:#1C1B19; --tinta:#F2F0EC; --linea:rgba(255,255,255,.10); --muted:#9C9992;
    --naranja:#FF7A35; --naranja-osc:#FF9257; --verde:#8BC34A; --verde-osc:#9ED664;
    --sombra:rgba(0,0,0,.35);
  }
  *{box-sizing:border-box;}
  body{ margin:0; font-family:-apple-system,'Segoe UI',Helvetica,Arial,sans-serif; background:var(--fondo); color:var(--tinta); -webkit-font-smoothing:antialiased; }
  .app{ display:flex; min-height:100vh; }

  .sidebar{ width:222px; background:var(--superficie); border-right:1px solid var(--linea); padding:20px 12px; flex-shrink:0; display:flex; flex-direction:column; }
  .sidebar-version{ margin-top:auto; padding:14px 8px 4px; font-size:10px; color:var(--muted); border-top:1px solid var(--linea); }
  .theme-toggle{ display:flex; align-items:center; gap:9px; padding:9px 12px; margin:10px 2px 2px; border-radius:8px; cursor:pointer; color:var(--muted); font-size:12.5px; background:transparent; border:1px solid var(--linea); width:calc(100% - 4px); }
  .theme-toggle:hover{ border-color:var(--naranja); color:var(--naranja); }
  .theme-toggle-mobile{ position:fixed; top:14px; right:14px; z-index:70; width:38px; height:38px; border-radius:50%; background:var(--superficie); border:1px solid var(--linea); color:var(--tinta); display:none; align-items:center; justify-content:center; box-shadow:0 2px 6px var(--sombra); }
  .brand{ display:flex; align-items:center; gap:10px; padding:2px 6px 18px; border-bottom:1px solid var(--linea); margin-bottom:10px; }
  .brand-mark{ width:32px; height:32px; object-fit:contain; flex-shrink:0; }
  .brand h1{ font-size:14.5px; margin:0; line-height:1.25; font-weight:700; letter-spacing:-.01em; }
  .brand span{ font-size:10.5px; color:var(--muted); }
  .nav-item{ display:flex; align-items:center; gap:10px; padding:10px 12px; cursor:pointer; font-size:13.5px; border-radius:8px; margin-bottom:2px; color:var(--muted); border-left:3px solid transparent; font-weight:500; }
  .nav-item:hover{ background:rgba(246,96,20,.06); color:var(--tinta); }
  .nav-item.active{ background:rgba(246,96,20,.08); color:var(--naranja-osc); font-weight:700; border-left:3px solid var(--naranja); }
  .nav-icon{ width:17px; height:17px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; opacity:.9; }
  .nav-item.active .nav-icon{ opacity:1; }

  .main{ flex:1; padding:28px 32px 60px; max-width:960px; margin:0 auto; width:100%; }
  .topbar{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; gap:10px; flex-wrap:wrap; }
  .topbar h2{ margin:0 0 2px; font-size:22px; font-weight:700; letter-spacing:-.015em; }
  .eyebrow{ color:var(--verde-osc); font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
  .actions{ display:flex; gap:8px; flex-wrap:wrap; }

  .btn{ background:var(--naranja); color:#fff; border:1px solid var(--naranja); padding:9px 16px; border-radius:8px; font-size:13.5px; cursor:pointer; font-weight:600; }
  .btn:hover{ background:var(--naranja-osc); border-color:var(--naranja-osc); }
  .btn.secondary{ background:var(--superficie); color:var(--tinta); border:1px solid var(--linea); }
  .btn.secondary:hover{ border-color:var(--naranja); color:var(--naranja-osc); }
  .btn.ghost{ background:transparent; color:var(--muted); border:1px solid transparent; }
  .btn.ghost:hover{ background:var(--linea); color:var(--tinta); }
  .btn.danger{ background:var(--superficie); color:var(--err); border:1px solid var(--linea); }
  .btn.danger:hover{ border-color:var(--err); background:rgba(214,69,69,.06); }
  .btn.small{ padding:6px 11px; font-size:12px; border-radius:7px; }
  .btn:disabled{ opacity:.4; cursor:not-allowed; }

  .card{ background:var(--superficie); border:1px solid var(--linea); border-radius:12px; padding:20px 22px; margin-bottom:16px; box-shadow:0 1px 2px var(--sombra); }
  .card h3{ margin:0 0 14px; font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; font-weight:700; }
  .banner{ background:rgba(111,171,37,.08); border-left:3px solid var(--verde); border-radius:8px; padding:12px 16px; margin-bottom:16px; font-size:13px; color:var(--tinta); }

  table{ width:100%; border-collapse:collapse; }
  th,td{ text-align:left; padding:9px 6px; border-bottom:1px solid var(--linea); font-size:13.5px; }
  th{ font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; }
  tr:last-child td{ border-bottom:none; }
  td.num, th.num{ text-align:right; font-variant-numeric:tabular-nums; }

  input, select, textarea{ font-family:inherit; font-size:13.5px; padding:8px 10px; border:1px solid var(--linea); border-radius:7px; background:var(--superficie); color:var(--tinta); }
  input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--naranja); box-shadow:0 0 0 3px rgba(246,96,20,.12); }
  .field{ display:flex; flex-direction:column; gap:5px; }
  .field label{ font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
  .form-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
  .form-row .field{ flex:1; min-width:130px; }

  .ing-row{ display:grid; grid-template-columns:1.5fr .8fr .5fr auto; gap:8px; align-items:center; padding:7px 0; border-bottom:1px solid var(--linea); }
  .ing-row:last-child{ border-bottom:none; }
  .step-row{ display:flex; gap:8px; align-items:flex-start; margin-bottom:8px; }
  .step-row textarea{ flex:1; min-height:44px; resize:vertical; }
  .step-num{ width:21px; height:21px; border-radius:50%; background:var(--verde); color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:6px; }

  .muted{ color:var(--muted); font-size:12.5px; }
  .empty{ text-align:center; padding:44px 20px; color:var(--muted); }
  .empty .btn{ margin-top:12px; }

  .recipe-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; }
  .recipe-card{ background:var(--superficie); border:1px solid var(--linea); border-radius:10px; padding:15px 17px; cursor:pointer; transition:border-color .12s; }
  .recipe-card:hover{ border-color:var(--naranja); }
  .recipe-card .code{ font-size:10.5px; color:var(--naranja); font-weight:700; letter-spacing:.02em; }
  .recipe-card .name{ font-size:14.5px; font-weight:700; margin:4px 0 6px; }
  .recipe-card .meta{ font-size:12px; color:var(--muted); }

  .search-box{ width:100%; padding:10px 13px; margin-bottom:14px; }

  .kpi-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:4px; }
  .kpi{ background:var(--fondo); border:1px solid var(--linea); border-radius:10px; padding:11px 15px; min-width:112px; }
  .kpi .v{ font-size:17px; font-weight:700; color:var(--naranja-osc); font-variant-numeric:tabular-nums; }
  .kpi .l{ font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; margin-top:2px; }

  .scale-row{ display:flex; align-items:center; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
  .scale-chip{ padding:5px 12px; border:1px solid var(--linea); border-radius:20px; font-size:12.5px; cursor:pointer; background:var(--superficie); color:var(--tinta); }
  .scale-chip.active{ background:var(--naranja); color:#fff; border-color:var(--naranja); font-weight:600; }

  .steps-list{ padding-left:20px; margin:0; }
  .steps-list li{ margin-bottom:8px; line-height:1.5; }

  .toast{ position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--tinta); color:var(--fondo); padding:10px 18px; border-radius:10px; font-size:13px; opacity:0; pointer-events:none; transition:opacity .2s; z-index:50; display:flex; align-items:center; gap:7px; }
  .toast.success{ background:var(--verde-osc); color:#fff; }
  .toast.error{ background:var(--err); color:#fff; }
  .toast .toast-icon{ display:inline-flex; }
  .toast.show{ opacity:1; }

  .modal-overlay{ position:fixed; inset:0; background:rgba(20,18,15,.4); display:flex; align-items:center; justify-content:center; z-index:80; padding:20px; }
  .modal-overlay.hidden{ display:none; }
  .modal-box{ background:var(--superficie); border:1px solid var(--linea); border-radius:14px; padding:22px 24px; width:100%; max-width:460px; max-height:90vh; overflow-y:auto; box-shadow:0 12px 40px rgba(20,18,15,.18); }
  .modal-box h3{ margin:0 0 16px; font-size:15px; color:var(--tinta); }
  .modal-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }
  .modal-box .field{ margin-bottom:12px; }
  .modal-box .field input, .modal-box .field select{ width:100%; }

  .book-cover{ text-align:center; padding:60px 20px 30px; }
  .book-cover img{ width:76px; height:76px; margin-bottom:16px; }
  .book-cover h1{ color:var(--tinta); font-size:27px; margin:0 0 6px; font-weight:800; letter-spacing:-.02em; }
  .book-cover p{ color:var(--muted); font-size:13px; }
  .book-index-table td, .book-index-table th{ font-size:13px; }
  .book-recipe{ margin-bottom:10px; }
  .book-recipe h3{ color:var(--tinta); font-size:18px; text-transform:none; letter-spacing:normal; font-weight:800; }
  .book-recipe h3 .muted{ font-size:13px; font-weight:500; text-transform:none; letter-spacing:normal; }
  .book-banner{ background:var(--superficie); border-left:3px solid var(--naranja); border-radius:6px; padding:12px 16px; margin-bottom:14px; }
  .book-banner .eyebrow2{ color:var(--naranja); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
  @media print{ .book-page-break{ break-before:page; page-break-before:always; } }
  @media screen{ .book-page-break{ border-top:1px dashed var(--linea); margin-top:26px; padding-top:26px; } }

  @media print{
    .sidebar, .no-print, .search-box{ display:none !important; }
    .main{ padding:0; max-width:none; margin:0; }
    .app{ display:block; }
    .card{ border:none; padding:0; box-shadow:none; }
    body{ background:#fff; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  }

  @media (max-width:760px){
    .app{ flex-direction:column; }
    .sidebar{ width:100%; position:fixed; left:0; bottom:0; z-index:60; display:flex; flex-direction:row; align-items:stretch; justify-content:space-around; padding:8px 8px calc(8px + env(safe-area-inset-bottom)) 8px; overflow-x:auto; box-shadow:0 -2px 10px rgba(20,18,15,.08); border-top:1px solid var(--linea); border-right:none; }
    .sidebar-version{ display:none; } .brand{ display:none; } .theme-toggle{ display:none; } .theme-toggle-mobile{ display:flex; }
    .nav-item{ flex-direction:column; justify-content:center; gap:4px; white-space:nowrap; margin-bottom:0; padding:8px 10px; border-radius:10px; font-size:10.5px; flex:1; min-width:0; text-align:center; border-left:none; }
    .nav-item.active{ background:rgba(246,96,20,.1); border-left:none; }
    .main{ padding:18px 16px 30px; padding-bottom:calc(78px + env(safe-area-inset-bottom)); }
    .ing-row{ grid-template-columns:1fr 1fr; }
  }