@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--navy:#0d1b2a;--ocean:#1b263b;--panel:#17283b;--panel2:#20364b;--white:#fff;--muted:#a9b8c6;--gold:#ffd166;--line:rgba(255,255,255,.10);--blue:#75b9d8}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--navy);color:var(--white);font-family:'DM Sans',Arial,sans-serif;min-height:100vh}button,input,select,textarea{font:inherit}.hero{height:310px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 110%,#294b62 0,#142d43 34%,#0a1725 75%);display:flex;align-items:center;justify-content:center;text-align:center;border-bottom:1px solid rgba(255,209,102,.25)}.hero:after{content:"";position:absolute;inset:auto -10% -70px;height:150px;background:linear-gradient(180deg,transparent,#081421);border-radius:50%}.hero-sky{position:absolute;inset:0;background-image:radial-gradient(#fff 0.7px,transparent .8px);background-size:49px 43px;opacity:.24}.lighthouse-art{position:absolute;inset:0;display:flex;justify-content:center;align-items:flex-end;opacity:.75}.lighthouse-art svg{width:min(660px,100%);height:100%;filter:drop-shadow(0 0 18px rgba(255,209,102,.15))}.hero-content{position:relative;z-index:2;padding:25px 16px 30px;text-shadow:0 2px 16px #07111c}.brand-mark{margin:0 auto 12px;width:39px;height:39px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;color:var(--gold);font-family:Manrope,sans-serif;font-size:13px;font-weight:800;letter-spacing:-1px;background:rgba(13,27,42,.7)}.eyebrow{font-size:10px;letter-spacing:2.5px;color:var(--gold);font-weight:700;margin:0 0 8px}.hero h1{font:800 clamp(28px,6vw,48px)/1.05 Manrope,sans-serif;letter-spacing:2px;margin:0}.hero h1 span{color:var(--gold)}.hero-subtitle{color:#d1dce5;font-size:13px;letter-spacing:.5px;margin:12px 0}.hero-rule{height:1px;width:90px;background:rgba(255,209,102,.55);margin:17px auto}.hero-rule span{display:block;width:20px;height:3px;background:var(--gold);margin:auto;transform:translateY(-1px)}
.container{max-width:1050px;margin:0 auto;padding:0 22px 30px}.main-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:18px 0 28px}.nav-btn{border:1px solid var(--line);border-radius:9px;background:#14263a;color:#c7d2dc;padding:13px 8px;font-weight:600;font-size:12px;cursor:pointer;transition:.2s}.nav-btn:hover,.nav-btn.active{background:var(--gold);color:#152437;border-color:var(--gold)}.view{display:none}.view.active{display:block;animation:appear .25s ease}@keyframes appear{from{opacity:.4;transform:translateY(5px)}to{opacity:1;transform:none}}.section-heading{display:flex;align-items:end;justify-content:space-between;margin:0 0 16px}.section-heading h2{font:700 26px Manrope,sans-serif;margin:0}.section-chip{font-size:9px;letter-spacing:1.4px;color:var(--gold);border:1px solid rgba(255,209,102,.35);border-radius:20px;padding:7px 10px}.panel{background:linear-gradient(145deg,#192d42,#142538);border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:0 12px 30px rgba(0,0,0,.12)}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px 18px}.form-grid label{display:flex;flex-direction:column;gap:7px;color:#dbe4eb;font-size:12px;font-weight:600}.form-grid input,.form-grid select,.form-grid textarea,.history-tools input,.history-tools select{width:100%;min-width:0;background:#0e1d2d;border:1px solid #31465a;border-radius:8px;padding:12px;color:#fff;outline:none;font-size:13px}.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus,.history-tools input:focus{border-color:var(--gold);box-shadow:0 0 0 2px rgba(255,209,102,.1)}input::placeholder,textarea::placeholder{color:#718395}.form-grid select{color:#dce5ec}.full{grid-column:1/-1}.form-grid textarea{resize:vertical}.photo-field input{padding:9px}.help{font-size:11px;color:var(--muted);font-weight:400}.photo-preview{max-width:190px;max-height:180px;object-fit:cover;border-radius:9px;border:1px solid var(--line);margin-top:5px}.hidden{display:none!important}.form-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}.button{border:0;border-radius:8px;padding:12px 16px;font-weight:700;font-size:12px;cursor:pointer}.button.primary{margin-left:auto;background:var(--gold);color:#142437}.button.primary span{font-size:17px;margin-left:8px}.button.secondary{background:#263e53;color:#eaf0f5;border:1px solid #3c566c}.button:hover{filter:brightness(1.08)}.history-tools{display:grid;grid-template-columns:1fr 190px;gap:10px;margin-bottom:17px}.capture-list{display:grid;gap:11px}.capture-item{display:grid;grid-template-columns:88px 1fr auto;gap:14px;align-items:center;background:#102135;border:1px solid var(--line);border-radius:10px;padding:10px}.capture-thumb{width:88px;height:82px;object-fit:cover;border-radius:7px;background:#263d50}.capture-thumb.placeholder{display:grid;place-items:center;color:var(--gold);font-size:25px}.capture-info h3{margin:0 0 5px;font:700 15px Manrope,sans-serif}.capture-info p{margin:3px 0;color:var(--muted);font-size:11px;line-height:1.45}.capture-weight{color:var(--gold);font-weight:700;font-size:14px;text-align:right;white-space:nowrap}.item-actions{display:flex;gap:6px;justify-content:flex-end;margin-top:8px}.small-btn{background:#263d51;border:1px solid var(--line);color:#e7edf2;border-radius:6px;padding:6px 8px;font-size:10px;cursor:pointer}.small-btn.delete{color:#ffb4a9}.empty-state{text-align:center;color:var(--muted);padding:34px 10px;font-size:13px}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.stat-card{background:linear-gradient(145deg,#1c344a,#14283c);border:1px solid var(--line);border-radius:13px;padding:20px}.stat-card span,.stat-detail span{font-size:11px;color:#b8c7d3}.stat-card strong{display:block;font:800 30px Manrope,sans-serif;margin:11px 0 3px;color:#fff}.stat-card small,.stat-detail small{font-size:10px;color:var(--muted)}.stat-card.featured{border-color:rgba(255,209,102,.4);background:linear-gradient(145deg,#354253,#1d3042)}.stat-card.featured strong{color:var(--gold)}.stats-grid.lower{margin-top:13px;grid-template-columns:repeat(3,1fr)}.stat-detail{padding:18px}.stat-detail strong{display:block;font:700 18px Manrope,sans-serif;margin:13px 0 4px;overflow-wrap:anywhere}.stats-note{margin-top:14px}footer{display:flex;justify-content:center;align-items:center;gap:9px;color:#8193a3;font-size:10px;letter-spacing:.7px;padding:38px 0 12px}.footer-mark{width:23px;height:23px;border:1px solid var(--gold);color:var(--gold);border-radius:50%;display:grid;place-items:center;font-size:8px;font-weight:800}.footer-dot{color:var(--gold)}.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,20px);background:#f5c95f;color:#142437;border-radius:8px;padding:12px 17px;font-size:12px;font-weight:700;opacity:0;pointer-events:none;transition:.25s;z-index:10;box-shadow:0 8px 25px #0005}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:650px){.hero{height:270px}.container{padding:0 14px 25px}.main-nav{grid-template-columns:repeat(2,1fr);padding:14px 0 22px}.nav-btn{padding:12px 5px}.panel{padding:16px}.form-grid{grid-template-columns:1fr;gap:13px}.full{grid-column:auto}.section-heading h2{font-size:23px}.stats-grid,.stats-grid.lower{grid-template-columns:1fr}.stat-card{padding:16px}.history-tools{grid-template-columns:1fr}.capture-item{grid-template-columns:68px 1fr;gap:10px}.capture-thumb{width:68px;height:72px}.capture-weight{grid-column:2;text-align:left}.item-actions{justify-content:flex-start}.form-actions .button.primary{width:100%;margin-left:0}.form-actions{align-items:flex-start}.section-chip{font-size:8px}}


/* Personalización visual */
:root{--page-radius:14px}
body{background:var(--user-main,var(--navy))}
.hero{background:radial-gradient(ellipse at 50% 110%,color-mix(in srgb,var(--user-card,var(--ocean)) 85%,#294b62) 0,var(--user-main,var(--navy)) 78%)}
.panel,.stat-card{background:linear-gradient(145deg,var(--user-card,var(--panel)),color-mix(in srgb,var(--user-card,var(--panel)) 75%,var(--user-main,var(--navy))))}
.nav-btn.active,.button.primary{background:var(--user-accent,var(--gold));border-color:var(--user-accent,var(--gold))}
.eyebrow,.section-chip,.brand-mark,.footer-mark,.footer-dot,.stat-card.featured strong{color:var(--user-accent,var(--gold))}
.section-chip,.brand-mark,.footer-mark{border-color:color-mix(in srgb,var(--user-accent,var(--gold)) 55%,transparent)}
.customize-panel h3{font:700 16px Manrope,sans-serif;margin:4px 0 7px}
.custom-help{font-size:12px;color:var(--muted);line-height:1.5;margin:0 0 14px}
.custom-upload{display:inline-flex;align-items:center;gap:9px;padding:11px 14px;background:#263e53;color:#fff;border:1px solid var(--line);border-radius:8px;font-size:12px;font-weight:700;cursor:pointer}
.custom-upload input{max-width:190px;font-size:11px}
.custom-preview-wrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.cover-preview{width:100%;max-height:190px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.custom-divider{height:1px;background:var(--line);margin:22px 0}
.theme-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:13px 0 18px}
.theme-preset{background:#102135;border:1px solid var(--line);border-radius:9px;padding:11px 7px;color:#fff;font-size:11px;cursor:pointer}
.theme-preset:focus,.theme-preset:hover{border-color:var(--user-accent,var(--gold))}
.swatches{display:flex;justify-content:center;margin-bottom:8px}
.swatches i{width:19px;height:19px;border-radius:50%;border:2px solid #fff2;margin-left:-3px}
.color-pickers{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.color-pickers label{font-size:11px;color:#dce5ec;display:flex;align-items:center;justify-content:space-between;gap:8px;background:#102135;padding:10px;border-radius:8px}
.color-pickers input{width:38px;height:30px;padding:2px;border:0;background:transparent;cursor:pointer}
.style-options{display:flex;gap:18px;flex-wrap:wrap;color:#dce5ec;font-size:12px}
.style-options label{display:flex;align-items:center;gap:7px}
.custom-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
body.style-recto .panel,body.style-recto .stat-card,body.style-recto .capture-item,body.style-recto .nav-btn,body.style-recto input,body.style-recto select,body.style-recto textarea,body.style-recto .button{border-radius:3px}
body.style-redondeado .panel,body.style-redondeado .stat-card{border-radius:14px}
body.cover-custom .hero{background-position:center;background-size:cover}
body.cover-custom .hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,15,26,.78),rgba(5,15,26,.36))}
body.cover-custom .lighthouse-art{display:none}
body.theme-light{--muted:#526273;color:#17283b}
body.theme-light .panel,body.theme-light .stat-card{color:#17283b}
body.theme-light .form-grid label,body.theme-light .stat-detail span,body.theme-light .style-options{color:#24384b}
body.theme-light .form-grid input,body.theme-light .form-grid select,body.theme-light .form-grid textarea,body.theme-light .history-tools input,body.theme-light .history-tools select{background:#fff;color:#17283b;border-color:#c5d0d9}
body.theme-light .capture-item,body.theme-light .theme-preset,body.theme-light .color-pickers label{background:#f2f5f7;color:#17283b}
body.theme-light .capture-info p,body.theme-light .stat-card small,body.theme-light .stat-detail small{color:#526273}
@media(max-width:650px){.theme-presets{grid-template-columns:repeat(2,1fr)}.color-pickers{grid-template-columns:1fr}.custom-upload{width:100%;justify-content:space-between}}

.logo-preview{width:76px;height:76px;object-fit:contain;border-radius:12px;background:#102135;padding:5px;border:1px solid var(--line)}.brand-mark.logo-custom{font-size:0;overflow:hidden;border:0;padding:0}.brand-mark.logo-custom img{width:100%;height:100%;object-fit:contain;border-radius:50%}

/* Portada oficial Seabasslog Pro */
.hero{height:auto;aspect-ratio:1648/1024;max-height:620px;min-height:210px;background:#071421}
.hero-banner{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.hero-sky,.lighthouse-art,.hero-content{display:none}
body.cover-custom .hero-banner{display:none}
body.cover-custom .hero{height:310px;aspect-ratio:auto;max-height:none}
body.cover-custom .hero-sky,body.cover-custom .lighthouse-art,body.cover-custom .hero-content{display:flex}
body.cover-custom .hero-sky{display:block}
body.cover-custom .hero-content{display:block}
@media(max-width:600px){
  .hero{min-height:0}
  body.cover-custom .hero{height:260px}
}