@import url("https://fonts.googleapis.com/css2?family=Rye&family=Roboto:wght@400;500;700;800&display=swap");
:root{font-family:Roboto,system-ui,-apple-system,Segoe UI,sans-serif;background:#0b0804;color:#fff7df;--gold:#ffc21a;--gold2:#ff9f0a;--orange:#e56b12;--brown:#3a1d08;--brown2:#5a2a08;--cream:#fff4d2;--line:rgba(255,194,26,.24);--panel:rgba(35,17,5,.92)}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% -10%,rgba(255,170,20,.20),transparent 38%),linear-gradient(135deg,#0a0703,#1b0d04 48%,#090704);color:var(--cream)}body:before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px);background-size:100% 4px;opacity:.25;mix-blend-mode:screen}
header{position:sticky;top:0;z-index:10;background:linear-gradient(90deg,#160a03,#2a1204 48%,#160a03);border-bottom:2px solid var(--gold);padding:8px 22px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 5px 22px rgba(0,0,0,.5)}.brand{display:flex;align-items:center;gap:12px}.brand img{width:72px;height:52px;object-fit:contain;filter:drop-shadow(0 0 7px rgba(255,173,0,.35))}.brand b{font-family:Rye,Georgia,serif;color:var(--gold);font-size:22px;letter-spacing:1px;text-shadow:2px 2px #3a1303}.brand span{color:#fff1c5;margin-left:5px}.head-actions{display:flex;gap:10px;align-items:center}.tabs{display:flex;gap:8px;flex-wrap:wrap;padding:12px 22px;background:rgba(18,8,3,.97);border-bottom:1px solid var(--line)}.tabs button{background:#291506;border:1px solid #74400d;color:#ffeec2;padding:10px 14px;border-radius:10px;cursor:pointer;transition:.18s}.tabs button:hover{border-color:var(--gold);transform:translateY(-1px)}.tabs button.active{background:linear-gradient(135deg,var(--gold),var(--orange));color:#2b1002;border-color:#ffd94f;font-weight:800;box-shadow:0 0 18px rgba(255,174,0,.25)}.tabs button:disabled{opacity:.4}main{max-width:1500px;margin:auto;padding:22px}.card{background:linear-gradient(145deg,rgba(45,22,6,.95),rgba(21,10,3,.96));border:1px solid #70400f;border-radius:18px;padding:20px;margin-bottom:18px;box-shadow:inset 0 1px rgba(255,218,100,.08),0 12px 30px rgba(0,0,0,.25)}.card h1,.card h2{color:#fff5d8;text-shadow:1px 2px #180803}.card h1{font-family:Rye,Georgia,serif;color:var(--gold);letter-spacing:.5px}.hidden{display:none!important}.row{display:flex;justify-content:space-between;align-items:center;gap:12px}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:15px 0}.cards .card{margin:0;text-align:center;background:linear-gradient(145deg,#4a2206,#1d0d03)}.cards small{color:#ffd66b;font-weight:800;letter-spacing:1px}.cards strong{display:block;font-size:30px;margin-top:6px;color:#fff}.grid2{display:grid;grid-template-columns:2fr 1fr;gap:20px}table{width:100%;border-collapse:collapse;margin-top:14px}th,td{padding:11px 9px;border-bottom:1px solid rgba(255,194,26,.16);text-align:left;vertical-align:middle}th{color:#ffc94d;font-size:13px;text-transform:uppercase}tbody tr:hover{background:rgba(255,170,20,.06)}button{border:1px solid #74400d;border-radius:9px;padding:8px 11px;background:linear-gradient(135deg,#5b2a08,#321604);color:#fff3d0;cursor:pointer;font-weight:600;transition:.16s}button:hover{border-color:var(--gold);box-shadow:0 0 10px rgba(255,180,0,.16)}button.ok,.gold-button{background:linear-gradient(135deg,var(--gold),var(--orange));border-color:#ffd75c;color:#2b1002;font-weight:800}button.danger{background:linear-gradient(135deg,#8d2d0f,#581305);border-color:#c95422}.secondary{background:#38200b}a{color:#ffd04b}.form{display:flex;gap:9px;flex-wrap:wrap;margin:14px 0}.form input,.form select,.login-form input{background:#120903;color:#fff8e4;border:1px solid #77430f;border-radius:9px;padding:9px}.form input:focus,.form select:focus,.login-form input:focus{outline:2px solid rgba(255,194,26,.25);border-color:var(--gold)}.hint,.muted{color:#c9ad74}.commission-box{display:flex;gap:10px;flex-wrap:wrap;padding:12px;background:#180a02;border:1px solid #61360b;border-radius:10px}.commission-box span{padding:6px 9px;border:1px solid #7a470d;border-radius:8px;color:#ffd66b}.perm-grid{display:grid;grid-template-columns:repeat(3,minmax(160px,1fr));gap:8px;width:100%;padding:10px 0}.audit{max-height:280px;overflow:auto;font-size:13px;line-height:1.7;color:#d8bd83}.schedule-line{padding:9px;border-bottom:1px solid rgba(255,194,26,.15)}.quick{display:flex;gap:10px;flex-wrap:wrap}code{color:#ffd76b;word-break:break-all}
#ingredientRows tr.ingredient-red{background:rgba(220,38,38,.16)}#ingredientRows tr.ingredient-red td{border-bottom-color:rgba(248,113,113,.35)}#ingredientRows tr.ingredient-orange{background:rgba(245,158,11,.14)}#ingredientRows tr.ingredient-orange td{border-bottom-color:rgba(251,191,36,.30)}#ingredientRows tr.ingredient-green{background:rgba(22,163,74,.12)}#ingredientRows tr.ingredient-green td{border-bottom-color:rgba(74,222,128,.25)}
.login-page{display:grid;place-items:center;padding:30px;background:radial-gradient(circle at 50% 18%,rgba(255,184,28,.22),transparent 34%),linear-gradient(135deg,#0a0602,#2a1204,#0a0602)}.login-wrap{width:min(480px,94vw)}.login-card{text-align:center;padding:30px 30px 26px;background:linear-gradient(145deg,rgba(58,27,6,.98),rgba(20,9,2,.98));border:2px solid #a86412;border-radius:24px;box-shadow:0 0 55px rgba(255,164,0,.14),0 25px 50px rgba(0,0,0,.5)}.login-logo{width:290px;max-width:90%;height:170px;object-fit:contain;filter:drop-shadow(0 0 12px rgba(255,173,0,.3))}.brand-title{font-family:Rye,Georgia,serif;color:var(--gold);font-size:28px;text-shadow:2px 2px #351103}.brand-sub{color:#ffe6a2;margin:4px 0 22px}.login-form{display:grid;gap:13px;text-align:left}.login-form label{color:#ffd76b;font-weight:700}.login-form input{width:100%;margin-top:6px;padding:12px}.gold-button{padding:12px;font-size:15px}.login-error{min-height:20px;color:#ff9b70}.restart-note{margin:0 0 16px;padding:11px;border-radius:10px;background:rgba(255,170,0,.12);border:1px solid #a86412;color:#ffe2a0}
@media(max-width:900px){.cards{grid-template-columns:repeat(2,1fr)}.grid2{grid-template-columns:1fr}.perm-grid{grid-template-columns:1fr 1fr}table{display:block;overflow:auto;white-space:nowrap}}@media(max-width:600px){.cards{grid-template-columns:1fr}.perm-grid{grid-template-columns:1fr}header{align-items:flex-start;gap:10px;flex-direction:column}.brand img{width:60px;height:44px}}
.bonus-panel{margin:16px 0;padding:15px;border:1px solid #7a470d;border-radius:14px;background:linear-gradient(145deg,rgba(42,19,4,.9),rgba(19,8,2,.9))}.bonus-panel h2{margin:0 0 4px;color:#ffd45b}.bonus-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:12px}.bonus-item{padding:12px;border:1px solid rgba(255,194,26,.25);border-radius:11px;background:rgba(255,160,10,.06);display:flex;flex-direction:column;gap:5px}.bonus-item b{color:#ffd45b}.bonus-item span{font-size:12px;color:#fff1c5}.bonus-item small{color:#cdb27a;line-height:1.4}.hint{color:#ffd98a}

.bonus-title{display:flex;justify-content:space-between;align-items:center;gap:8px}.mini-btn{padding:5px 8px;font-size:12px;background:linear-gradient(135deg,#6b3508,#3b1a04)}

.contract-form-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:20px;margin:15px 0 24px}.contract-create-panel{background:linear-gradient(145deg,rgba(66,31,6,.9),rgba(19,8,2,.96));border:1px solid #9a5c12;border-radius:16px;padding:18px}.contract-form{display:grid;grid-template-columns:1fr 1fr}.contract-form textarea{grid-column:1/-1;width:100%;background:#120903;color:#fff8e4;border:1px solid #77430f;border-radius:9px;padding:12px;resize:vertical}.contract-form .signature-label{grid-column:1/-1;color:#ffd76b;font-weight:800}.signature-canvas,#sig{width:100%;max-width:100%;height:190px;background:#fff9e9;border:2px dashed #c38318;border-radius:12px;touch-action:none;display:block}.rank-cards{display:grid;gap:10px}.rank-cards>div{padding:13px;border:1px solid rgba(255,194,26,.22);border-radius:12px;background:rgba(255,165,0,.06)}.rank-cards b{display:block;color:#ffd04b;font-family:Rye,Georgia,serif}.rank-cards span{display:block;margin-top:4px;color:#ead39d;font-size:13px}.contract-source-box{margin-top:14px;padding:15px;border:1px solid #70400f;border-radius:13px;background:#180a02;color:#f2dbad}.contract-source-box b{color:#ffc21a}.contract-paper{max-width:1050px;margin:30px auto;background:linear-gradient(145deg,#fff3cf,#f1dca8);color:#2c1608;border:4px solid #7b4311;border-radius:20px;padding:34px;box-shadow:0 25px 70px rgba(0,0,0,.45)}.contract-page{background:radial-gradient(circle at 50% -10%,rgba(255,183,0,.22),transparent 36%),linear-gradient(135deg,#120a03,#3a1a06,#0c0703)}.contract-header{position:relative!important;top:auto!important;display:flex;align-items:center;gap:15px;padding:12px 20px;background:linear-gradient(90deg,#160a03,#321604,#160a03);border-bottom:2px solid var(--gold)}.contract-header img{width:90px;height:58px;object-fit:contain}.contract-header b{font-family:Rye,Georgia,serif;color:var(--gold);font-size:22px}.contract-header span{color:#fff1c5}.contract-ribbon{display:inline-block;background:#2e1507;color:#ffd24b;border:1px solid #a76415;padding:8px 14px;border-radius:999px;font-weight:800}.contract-paper h1{font-family:Rye,Georgia,serif;color:#5a2a08;font-size:34px;border-bottom:3px solid #a96715;padding-bottom:12px}.contract-meta{background:rgba(255,194,26,.18);padding:12px;border:1px solid #b8781b;border-radius:10px}.contract-body{line-height:1.55;font-size:15px}.contract-body p{margin:7px 0}.bullet{color:#a85b0d;font-weight:900;margin-right:5px}.contract-benefit-note{margin:20px 0;padding:15px;border-radius:12px;background:#3a1d08;color:#fff1cf;border-left:6px solid var(--gold)}.signature-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}.signature-box{background:#fff8e4;border:2px solid #a76415;border-radius:14px;padding:16px;min-height:250px}.signature-box h3{margin-top:0;color:#5b2a08}.saved-signature{max-width:100%;height:130px;object-fit:contain;background:#fff}.signature-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}.contract-message{margin-top:18px;padding:14px;border-radius:10px;background:#2f1607;color:#ffe7ae}.contract-message small{word-break:break-all;color:#d6bd86}@media(max-width:900px){.contract-form-grid,.signature-grid{grid-template-columns:1fr}.contract-form{grid-template-columns:1fr}.contract-form textarea,.contract-form .signature-label{grid-column:auto}.contract-paper{margin:15px;padding:20px}.contract-paper h1{font-size:26px}}

/* Firmas digitales manuscritas */
.generated-signature-row{display:flex;gap:10px;align-items:center;margin:10px 0;flex-wrap:wrap}.signature-name-input{flex:1;min-width:220px;padding:11px 13px;border:2px solid #a76415;border-radius:10px;background:#fffdf4;color:#2b1607;font-size:16px}.signature-generated{background:linear-gradient(180deg,#fffdf7,#fff7df);border:2px dashed #b8781b;border-radius:12px;display:block;width:100%;max-width:700px;height:auto;min-height:120px;touch-action:none}.signature-generated + .signature-actions{margin-top:10px}

/* Pestañas internas Yellow Jack */
.yj-subnav{display:flex;gap:9px;flex-wrap:wrap;margin:18px 0 22px;padding:10px;border:1px solid var(--line);border-radius:14px;background:rgba(0,0,0,.25)}
.yj-subnav button{background:rgba(75,37,7,.5);color:#f6dca4;border:1px solid rgba(255,194,26,.22);border-radius:10px;padding:11px 16px;cursor:pointer;font-weight:700;transition:.15s}
.yj-subnav button:hover{border-color:var(--gold);color:white}
.yj-subnav button.active{background:linear-gradient(135deg,#a75b09,#653007);border-color:var(--gold);color:#fff;box-shadow:0 2px 14px rgba(255,194,26,.12)}
.yj-subpanel.hidden{display:none!important}
.yj-subpanel{min-width:0;animation:yjFade .18s ease}
@keyframes yjFade{from{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:650px){.yj-subnav button{flex:1 1 145px}}

/* Ajustes de legibilidad, navegación y formularios */
.yj-subnav{position:relative;align-items:center;gap:10px;overflow:visible}
.yj-subnav button{font-size:14px;line-height:1.4;white-space:normal;min-height:43px}
.yj-subnav .yj-subback{background:#201309;color:#ffd477;border:1px solid #795018;margin-right:6px}
.yj-subnav .yj-subback:disabled{opacity:.4;cursor:not-allowed}
.yj-subpanel{overflow-x:auto;padding:2px 0 12px}
.yj-subpanel>table{min-width:650px}
.tab input:not([type=checkbox]):not([type=radio]):not([type=file]),.tab select,.tab textarea{background:#1c1009;color:#fff4d8;border:1px solid #91601d;border-radius:9px;padding:10px 12px;max-width:100%;font:inherit}
.tab input::placeholder,.tab textarea::placeholder{color:#d3b884;opacity:.9}
.tab input:focus,.tab select:focus,.tab textarea:focus{outline:2px solid #d59a2c;outline-offset:1px}
.tab .row{flex-wrap:wrap;gap:12px}
.tab th{white-space:nowrap;color:#ffd15a}
.tab td{line-height:1.45}
@media(max-width:700px){.yj-subnav{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr))}.yj-subnav button{width:100%}}

/* Corrección global de controles y contraste en todas las secciones */
.tab input,.tab select,.tab textarea,.tab option,.tab input[type=date],.tab input[type=time],.tab input[type=number],.tab input[type=search]{background-color:#211208!important;color:#fff2d0!important;border:1px solid #98611d!important;border-radius:9px;accent-color:#ffbd2e;color-scheme:dark}
.tab input::placeholder,.tab textarea::placeholder{color:#d5b986!important;opacity:1}
.tab select option{background:#211208!important;color:#fff2d0!important}
.tab input[type=file]::file-selector-button{background:#663607;color:#fff1ca;border:1px solid #a16c21;border-radius:7px;padding:7px 12px}
.tab button,.yj-subnav button{font-family:inherit}
.yj-subnav{position:sticky;top:70px;z-index:5;background:#211106;border-color:#99631e}
.yj-subpanel{overflow-x:auto}
.yj-subpanel table{min-width:600px}
@media(max-width:800px){.yj-subnav{position:relative;top:auto}}

/* Reparación de emergencia del login */
body.center {
  min-height: 100vh;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 24px;
  background: #160c06;
}

body.center .login {
  width: min(440px, 100%) !important;
  max-width: 440px !important;
  margin: auto !important;
  padding: 30px !important;
}

body.center .login img,
body.center .login svg {
  display: block !important;
  max-width: 180px !important;
  max-height: 180px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 auto 20px !important;
}

body.center .login input {
  display: block !important;
  width: 100% !important;
  margin: 10px 0 !important;
}

body.center .login button {
  display: block !important;
  width: 100% !important;
  margin-top: 16px !important;
}

/* YELLOW JACK - Reparación del login */
body.login-page {
  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #160c06;
  color: #fff0d6;
}

.login-wrap {
  width: 100%;
  max-width: 440px;
  margin: auto;
}

.login-card {
  width: 100%;
  padding: 32px;
  border: 1px solid #825015;
  border-radius: 18px;
  background: #271408;
  box-shadow: 0 18px 60px rgba(0,0,0,.5);
  text-align: center;
}

.login-logo {
  display: block;
  width: 160px;
  max-width: 100%;
  height: 160px;
  object-fit: contain;
  margin: 0 auto 16px;
}

.brand-title {
  font-size: 26px;
  font-weight: 800;
  color: #ffb51b;
}

.brand-sub {
  margin-top: 6px;
  color: #d6b48a;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
  text-align: left;
}

.login-form label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-weight: 600;
}

.login-form input {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 12px;
  border: 1px solid #80501d;
  border-radius: 8px;
  background: #170d08;
  color: white;
}

.login-form button {
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: 9px;
  background: #f5a813;
  color: #201005;
  font-weight: 800;
  cursor: pointer;
}

.login-error {
  color: #ff7777;
}

.restart-note {
  margin-top: 16px;
  padding: 12px;
  border-radius: 8px;
  background: #543516;
}

.hidden {
  display: none !important;
}

@media(max-width:480px) {
  .login-card { padding: 22px; }
  .login-logo { width: 130px; height: 130px; }
}