:root{
  --navy:#0F1E38;
  --navy-soft:#16294a;
  --teal:#12A9C7;
  --pink:#E31C79;
  --yellow:#F5A623;
  --paper:#FFFFFF;
  --paper-soft:#F6F5F1;
  --ink:#12203A;
  --ink-dim:#5B6B85;
  --line:#E4E2DC;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--navy);
  background-image:
    radial-gradient(circle at 92% 6%, rgba(227,28,121,0.35), transparent 40%),
    radial-gradient(circle at 4% 90%, rgba(18,169,199,0.25), transparent 45%);
  background-attachment:fixed;
  color:var(--ink);
  font-family:'Manrope',sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  padding-bottom:60px;
}

/* ---------- TOPBAR (páginas internas, no la portada del cotizador) ---------- */
.topbar{
  max-width:480px;
  margin:0 auto;
  padding:16px 16px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.topbar .who{
  font-family:'Baloo 2',sans-serif;
  color:#EDEDED;
  font-size:13px;
}
.topbar .who b{ color:var(--teal); }
.topbar nav{ display:flex; gap:6px; flex-wrap:wrap; }
.topbar nav a{
  font-size:11.5px;
  font-weight:700;
  letter-spacing:0.3px;
  color:#C7CEDE;
  text-decoration:none;
  padding:6px 10px;
  border-radius:20px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.1);
}
.topbar nav a:hover{ background:rgba(255,255,255,0.16); }
.topbar nav a.salir{ color:var(--pink); }

/* ---------- HEADER (compacto, para páginas internas) ---------- */
.mini-header{
  text-align:center;
  padding:22px 20px 8px;
}
.mini-header h1{
  font-family:'Baloo 2',sans-serif;
  font-weight:800;
  font-size:26px;
  color:#EDEDED;
  margin:0 0 2px;
}
.mini-header p{
  color:#B9C2D6;
  font-size:12px;
  letter-spacing:0.3px;
  margin:0;
}

/* ---------- CARD SHELL ---------- */
.shell{
  max-width:480px;
  margin:0 auto;
  padding:0 16px;
}
.card{
  background:var(--paper);
  border-radius:22px;
  padding:22px 20px;
  margin-bottom:16px;
  box-shadow:0 20px 40px -20px rgba(0,0,0,0.5);
}
.card h2{
  font-family:'Baloo 2',sans-serif;
  font-size:15px;
  margin:0 0 14px;
  color:var(--navy);
  display:flex; align-items:center; gap:8px;
}

label{
  display:block;
  font-size:11.5px;
  font-weight:700;
  color:var(--ink-dim);
  text-transform:uppercase;
  letter-spacing:0.6px;
  margin-bottom:6px;
}
input[type=text], input[type=number], input[type=password], select{
  width:100%;
  padding:12px 13px;
  border-radius:12px;
  border:1.5px solid var(--line);
  background:var(--paper-soft);
  font-family:'Manrope',sans-serif;
  font-size:15px;
  color:var(--ink);
  outline:none;
  transition:border-color .15s;
  -webkit-appearance:none;
}
input:focus, select:focus{ border-color:var(--teal); background:#fff; }
.field{ margin-bottom:14px; }
.input-group{ position:relative; display:flex; align-items:center; }
.input-group .input-icon{ position:absolute; left:12px; color:var(--ink-dim); pointer-events:none; }
.input-group input{ padding-left:38px; }
.pass-field-wrap{ position:relative; }
.pass-field-wrap input{ padding-right:40px; }
.eye-btn{ position:absolute; right:6px; top:50%; transform:translateY(-50%); background:none; border:none; padding:6px; cursor:pointer; color:var(--ink-dim); display:flex; }
.eye-btn:hover{ color:var(--ink); }
.caps-warning{ color:#b45309; font-size:12px; margin:6px 0 0; }
.checkbox-row{ display:flex; flex-direction:row; align-items:center; gap:8px; margin:4px 0 0; font-size:13px; color:var(--ink-dim); cursor:pointer; }
.checkbox-row input{ width:auto; accent-color:var(--teal); }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

.btn{
  width:100%;
  border:none;
  border-radius:14px;
  padding:14px;
  font-family:'Baloo 2',sans-serif;
  font-weight:700;
  font-size:15px;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.btn-add{ background:var(--navy); color:#fff; }
.btn-add:active{ transform:scale(0.98); }
.btn-secondary{ background:var(--paper-soft); color:var(--navy); border:1.5px solid var(--line); }
.btn-danger{ background:#7f1d1d; color:#fecaca; }
.btn:disabled{ opacity:0.6; cursor:default; }

.actions{ display:flex; gap:10px; margin-top:14px; }

.error{ background:#7f1d1d; color:#fecaca; padding:10px 12px; border-radius:10px; font-size:13px; margin-bottom:12px; }
.ok{ background:#14532d; color:#bbf7d0; padding:10px 12px; border-radius:10px; font-size:13px; margin-bottom:12px; }

.empty-state{ text-align:center; color:var(--ink-dim); font-size:13px; padding:20px 0; }

table.list-table{ width:100%; border-collapse:collapse; font-size:13px; }
table.list-table th{
  text-align:left; font-size:9.5px; letter-spacing:0.5px; text-transform:uppercase;
  color:var(--ink-dim); padding-bottom:8px; border-bottom:1.5px solid var(--navy);
}
table.list-table td{ padding:10px 0; border-bottom:1px solid var(--line); color:var(--navy); vertical-align:top; }
table.list-table td.num, table.list-table th.num{ text-align:right; }
.pill{
  display:inline-block; font-size:9.5px; font-weight:700; letter-spacing:0.3px;
  padding:2px 8px; border-radius:20px; background:rgba(18,169,199,0.12); color:var(--teal);
}
.pill.admin{ background:rgba(245,166,35,0.15); color:#B87200; }
.del-link{ background:none; border:none; color:var(--pink); font-size:12px; font-weight:700; cursor:pointer; padding:2px 4px; }

/* ---------- Precios: filas dinámicas (papeles especiales / anillado) ----------
   Pedido de Franco 08/09/2026. ---------- */
.fila-extra{ display:flex; gap:8px; align-items:center; margin-bottom:10px; }
.fila-extra input{ margin-bottom:0; }
.fila-extra .extra-nombre{ flex:2; }
.fila-extra .extra-hasta{ flex:1; }
.fila-extra .extra-precio{ flex:1; }
.fila-extra .btn-borrar-extra{
  flex-shrink:0; background:none; border:none; color:var(--pink);
  font-size:19px; cursor:pointer; padding:4px 6px; line-height:1;
}
.extra-lbl{ font-size:9.5px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:0.4px; margin-bottom:3px; display:block; }

/* ---------- LOGIN ---------- */
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:16px; }
.login-card{ width:100%; max-width:340px; }
.login-card .mark{
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:16px; margin:0 auto 14px;
  background:linear-gradient(135deg, var(--teal), var(--pink));
  box-shadow:0 12px 28px -8px rgba(227,28,121,0.55);
}
.login-card .mark svg{ width:30px; height:30px; }
.login-card h1{
  font-family:'Baloo 2',sans-serif; font-weight:800; font-size:26px; text-align:center;
  color:var(--navy); margin:0 0 2px;
}
.login-card p.sub{ text-align:center; color:var(--ink-dim); font-size:13px; margin:0 0 20px; }