/* ============================================================
   MUNDO BEBÉ — Sistema de gestión
   Sistema de diseño compartido
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Mulish:wght@400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');

:root{
  --cream:        #FBF5F1;
  --surface:      #FFFFFF;
  --surface-soft: #FCF8F6;
  --ink:          #40312F;
  --ink-soft:     #6E5C58;
  --muted:        #9A8683;
  --line:         #ECDFDA;
  --line-soft:    #F3E9E5;

  --rose:         #C97B8A;
  --rose-deep:    #A85266;
  --rose-pale:    #F6DEE2;
  --rose-wash:    #FBF0F1;

  --blue:         #4E9CBD;
  --blue-deep:    #336F8A;
  --blue-pale:    #DCEFF4;
  --blue-wash:    #EFF8FA;

  --sage:         #7E9678;
  --sage-deep:    #5D7357;
  --sage-pale:    #E4EBDF;

  --gold:         #C79A57;
  --gold-pale:    #F3E6CD;

  --danger:       #B5555B;
  --danger-pale:  #F6E1E1;

  --shadow-sm:    0 1px 2px rgba(64,49,47,.06), 0 1px 1px rgba(64,49,47,.04);
  --shadow-md:    0 6px 20px rgba(64,49,47,.08), 0 2px 6px rgba(64,49,47,.05);
  --shadow-lg:    0 16px 40px rgba(64,49,47,.12), 0 4px 12px rgba(64,49,47,.06);

  --radius-sm:    10px;
  --radius-md:    16px;
  --radius-lg:    24px;

  --font-display: 'Fraunces', 'Iowan Old Style', serif;
  --font-body:    'Mulish', -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'DM Mono', 'SFMono-Regular', monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--cream);
  color:var(--ink);
  font-size:17px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font-family:inherit; }
input,select,textarea{ font-family:inherit; font-size:inherit; }

::selection{ background:var(--rose-pale); color:var(--rose-deep); }

.bg-atmos{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(680px 420px at 92% -6%, var(--blue-wash) 0%, transparent 60%),
    radial-gradient(620px 460px at -8% 8%, var(--rose-wash) 0%, transparent 55%),
    var(--cream);
}

.app-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px;
  padding:16px 32px;
  background:rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:40;
}
.brand{
  display:flex; align-items:center; gap:12px;
  text-decoration:none;
}
.brand-mark{ width:40px; height:40px; flex:none; }
.brand-word{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:500;
  font-size:26px;
  color:var(--rose-deep);
  letter-spacing:.2px;
  line-height:1;
}
.brand-tag{
  display:block;
  font-family:var(--font-body);
  font-style:normal;
  font-size:11px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:700;
  margin-top:3px;
}

nav.main-nav{
  display:flex; align-items:center; gap:4px;
  background:var(--surface-soft);
  border:1px solid var(--line);
  padding:4px; border-radius:999px;
}
nav.main-nav a{
  display:flex; align-items:center; gap:8px;
  text-decoration:none;
  font-weight:700;
  font-size:14.5px;
  color:var(--ink-soft);
  padding:10px 18px;
  border-radius:999px;
  transition:background .15s ease, color .15s ease;
  white-space:nowrap;
}
nav.main-nav a svg{ width:17px; height:17px; flex:none; }
nav.main-nav a:hover{ background:var(--rose-wash); color:var(--rose-deep); }
nav.main-nav a.active{ background:var(--rose); color:#fff; box-shadow:var(--shadow-sm); }

.header-actions{ display:flex; align-items:center; gap:14px; }
.user-chip{
  display:flex; align-items:center; gap:10px;
  font-size:14px; font-weight:700; color:var(--ink-soft);
}
.user-avatar{
  width:36px; height:36px; border-radius:50%;
  background:var(--blue-pale); color:var(--blue-deep);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:600; font-size:16px;
}
.logout-link{
  font-size:13.5px; font-weight:700; color:var(--muted);
  text-decoration:none; border-bottom:1px dashed var(--line);
  padding-bottom:1px;
}
.logout-link:hover{ color:var(--rose-deep); border-color:var(--rose-deep); }

.page{
  max-width:1180px;
  margin:0 auto;
  padding:40px 32px 100px;
}
.page-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
  margin-bottom:28px;
}
.eyebrow{
  font-size:12.5px; font-weight:800; letter-spacing:1.8px; text-transform:uppercase;
  color:var(--rose); margin:0 0 10px;
  display:flex; align-items:center; gap:9px;
}
.eyebrow .swirl{ width:30px; height:10px; }
h1.page-title{
  font-family:var(--font-display); font-weight:500; font-style:italic;
  font-size:38px; color:var(--ink); margin:0 0 6px; letter-spacing:.2px;
}
.page-sub{ color:var(--ink-soft); font-size:16px; margin:0; max-width:52ch; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border:none; cursor:pointer;
  font-weight:800; font-size:15px;
  padding:13px 22px;
  border-radius:999px;
  min-height:48px;
  transition:transform .08s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn svg{ width:18px; height:18px; flex:none; }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--rose); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--rose-deep); }
.btn-secondary{ background:var(--surface); color:var(--ink); border:1.5px solid var(--line); }
.btn-secondary:hover{ border-color:var(--rose); color:var(--rose-deep); }
.btn-blue{ background:var(--blue); color:#fff; box-shadow:var(--shadow-sm); }
.btn-blue:hover{ background:var(--blue-deep); }
.btn-ghost{ background:transparent; color:var(--ink-soft); }
.btn-ghost:hover{ background:var(--surface-soft); color:var(--ink); }
.btn-danger{ background:var(--danger-pale); color:var(--danger); }
.btn-danger:hover{ background:var(--danger); color:#fff; }
.btn-sm{ padding:9px 15px; font-size:13.5px; min-height:38px; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }

.icon-btn{
  width:40px; height:40px; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1.5px solid var(--line); background:var(--surface); cursor:pointer;
  color:var(--ink-soft); transition:all .15s ease;
}
.icon-btn svg{ width:18px; height:18px; }
.icon-btn:hover{ border-color:var(--rose); color:var(--rose-deep); background:var(--rose-wash); }
.icon-btn.danger:hover{ border-color:var(--danger); color:var(--danger); background:var(--danger-pale); }

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
}
.card-pad{ padding:28px; }
.card-head{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-bottom:18px;
}
.card-title{ font-family:var(--font-display); font-weight:600; font-size:19px; margin:0; }
.card-title .muted{ font-family:var(--font-body); font-weight:600; font-size:13px; color:var(--muted); }

.kpi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:26px; }
.kpi-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:22px 22px 20px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
}
.kpi-label{ font-size:12.5px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--muted); }
.kpi-value{ font-family:var(--font-display); font-size:32px; font-weight:600; margin:8px 0 4px; color:var(--ink); }
.kpi-delta{ font-size:13px; font-weight:700; display:flex; align-items:center; gap:5px; }
.kpi-delta.up{ color:var(--sage-deep); }
.kpi-delta.down{ color:var(--danger); }
.kpi-icon{
  position:absolute; top:20px; right:20px; width:38px; height:38px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
}
.kpi-icon svg{ width:19px; height:19px; }
.kpi-icon.rose{ background:var(--rose-wash); color:var(--rose-deep); }
.kpi-icon.blue{ background:var(--blue-wash); color:var(--blue-deep); }
.kpi-icon.sage{ background:var(--sage-pale); color:var(--sage-deep); }
.kpi-icon.gold{ background:var(--gold-pale); color:#96742E; }

.grid-2{ display:grid; grid-template-columns:1.4fr 1fr; gap:20px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }

table{ width:100%; border-collapse:collapse; }
thead th{
  text-align:left; font-size:12px; font-weight:800; letter-spacing:.9px; text-transform:uppercase;
  color:var(--muted); padding:16px 16px 16px; border-bottom:1.5px solid var(--line);
  background:var(--surface-soft); white-space:nowrap;
}
thead th:first-child{ border-top-left-radius:var(--radius-md); padding-left:22px; }
thead th:last-child{ border-top-right-radius:var(--radius-md); padding-right:22px; }
tbody td{ padding:16px; border-bottom:1px solid var(--line-soft); font-size:15px; vertical-align:middle; }
tbody td:first-child{ padding-left:22px; }
tbody td:last-child{ padding-right:22px; }
tbody tr:last-child td{ border-bottom:none; }
tbody tr:hover{ background:var(--surface-soft); }
.table-wrap{ overflow-x:auto; border-radius:var(--radius-md); }
td.num, th.num{ text-align:right; font-variant-numeric:tabular-nums; }

.tag{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:800; padding:5px 12px; border-radius:999px;
}
.tag-rose{ background:var(--rose-wash); color:var(--rose-deep); }
.tag-blue{ background:var(--blue-wash); color:var(--blue-deep); }
.tag-sage{ background:var(--sage-pale); color:var(--sage-deep); }
.tag-gold{ background:var(--gold-pale); color:#96742E; }
.tag-danger{ background:var(--danger-pale); color:var(--danger); }
.tag-muted{ background:var(--line-soft); color:var(--ink-soft); }

.stock-dot{ width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:7px; }

.field{ margin-bottom:18px; }
.field label{
  display:block; font-size:13.5px; font-weight:800; color:var(--ink-soft);
  margin-bottom:8px; letter-spacing:.2px;
}
.field .hint{ font-size:12.5px; color:var(--muted); font-weight:600; margin-top:6px; }
input[type=text], input[type=number], input[type=search], input[type=date], input[type=password], input[type=time], select, textarea{
  width:100%; padding:13px 15px; border-radius:12px; border:1.6px solid var(--line);
  background:var(--surface); color:var(--ink); font-size:15.5px; outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus{
  border-color:var(--rose); box-shadow:0 0 0 4px var(--rose-wash);
}
select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%239A8683' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:40px; }
.row-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.row-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.input-prefix{ position:relative; }
.input-prefix span{
  position:absolute; left:15px; top:50%; transform:translateY(-50%);
  color:var(--muted); font-weight:700; pointer-events:none;
}
.input-prefix input{ padding-left:32px; }

.search-bar{
  display:flex; align-items:center; gap:10px;
  background:var(--surface); border:1.6px solid var(--line); border-radius:14px;
  padding:0 16px; flex:1;
}
.search-bar svg{ width:19px; height:19px; color:var(--muted); flex:none; }
.search-bar input{ border:none; padding:13px 0; background:transparent; }
.search-bar input:focus{ box-shadow:none; }

.modal-backdrop{
  position:fixed; inset:0; background:rgba(64,45,42,.38);
  backdrop-filter:blur(2px);
  display:none; align-items:center; justify-content:center; z-index:100; padding:20px;
}
.modal-backdrop.open{ display:flex; }
.modal{
  background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  width:100%; max-width:560px; max-height:90vh; overflow-y:auto;
  padding:30px 32px 28px;
}
.modal-wide{ max-width:760px; }
.modal-head{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:22px; }
.modal-title{ font-family:var(--font-display); font-style:italic; font-weight:500; font-size:24px; margin:0; }
.modal-close{
  width:34px; height:34px; border-radius:50%; border:none; background:var(--surface-soft);
  color:var(--ink-soft); cursor:pointer; display:flex; align-items:center; justify-content:center;
  flex:none;
}
.modal-close:hover{ background:var(--rose-wash); color:var(--rose-deep); }
.modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:8px; }

.toast{
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:#fff; padding:15px 24px; border-radius:14px;
  font-weight:700; font-size:14.5px; box-shadow:var(--shadow-lg);
  display:flex; align-items:center; gap:10px;
  opacity:0; pointer-events:none; transition:all .25s ease; z-index:200;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast svg{ width:18px; height:18px; color:#9FD8A9; flex:none; }
.toast.error svg{ color:#F0A0A6; }

.menu-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.menu-tile{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:28px; text-decoration:none; color:var(--ink); box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; gap:14px; transition:all .18s ease; position:relative; overflow:hidden;
}
.menu-tile:hover{ box-shadow:var(--shadow-lg); transform:translateY(-3px); border-color:transparent; }
.menu-tile-icon{
  width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center;
}
.menu-tile-icon svg{ width:26px; height:26px; }
.menu-tile h3{ font-family:var(--font-display); font-weight:600; font-size:21px; margin:0; }
.menu-tile p{ margin:0; color:var(--ink-soft); font-size:14.5px; line-height:1.5; }
.menu-tile .arrow{ margin-top:auto; display:flex; align-items:center; gap:6px; font-weight:800; font-size:13.5px; color:var(--rose-deep); }
.menu-tile .arrow svg{ width:15px; height:15px; }

.flex{ display:flex; }
.flex-between{ display:flex; align-items:center; justify-content:space-between; }
.flex-gap{ display:flex; align-items:center; gap:10px; }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.empty-state{
  text-align:center; padding:60px 20px; color:var(--muted);
}
.empty-state svg{ width:52px; height:52px; margin-bottom:14px; opacity:.6; }
.empty-state p{ font-weight:700; font-size:15.5px; margin:0 0 4px; color:var(--ink-soft); }
.empty-state span{ font-size:13.5px; }

.bars{ display:flex; align-items:flex-end; gap:10px; height:160px; }
.bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:8px; }
.bar-col .bar{ width:100%; border-radius:8px 8px 4px 4px; min-height:4px; transition:height .5s ease; }
.bar-col .bar-label{ font-size:11.5px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }
.bar-col .bar-value{ font-size:11.5px; font-weight:700; color:var(--ink-soft); }

.bottom-nav{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:rgba(255,255,255,.94);
  backdrop-filter: blur(14px);
  border-top:1px solid var(--line);
  box-shadow:0 -6px 20px rgba(64,49,47,.06);
  padding:6px 6px calc(6px + env(safe-area-inset-bottom));
}
.bottom-nav-inner{
  display:flex; align-items:center; justify-content:space-around;
  max-width:520px; margin:0 auto;
}
.bn-item{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; flex:1; text-decoration:none; color:var(--muted);
  padding:7px 4px 6px; border-radius:14px; position:relative;
  transition:color .15s ease;
}
.bn-item svg{ width:23px; height:23px; stroke-width:2; transition:transform .15s ease; }
.bn-item span{ font-size:10.5px; font-weight:800; letter-spacing:.2px; }
.bn-item.active{ color:var(--rose-deep); }
.bn-item.active svg{ stroke-width:2.4; transform:translateY(-1px); }
.bn-item.active::before{
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:22px; height:3px; border-radius:0 0 4px 4px; background:var(--rose);
}
.bn-item:active{ color:var(--rose-deep); }

@media (max-width:980px){
  .kpi-grid{ grid-template-columns:repeat(2,1fr); }
  .grid-2{ grid-template-columns:1fr; }
  .grid-3{ grid-template-columns:1fr; }
  .menu-grid{ grid-template-columns:1fr; }
  nav.main-nav{ display:none; }
  .bottom-nav{ display:block; }
  .page{ padding-bottom:104px; }
}

@media (max-width:640px){
  .kpi-grid{ grid-template-columns:1fr; }
  .row-2, .row-3{ grid-template-columns:1fr; }
  .page{ padding:28px 18px 104px; }
  .app-header{ padding:14px 18px; }
}

@media print{
  body *{ visibility:hidden; }
  #ticket, #ticket *{ visibility:visible; }
  #ticket{
    position:absolute; top:0; left:0; width:80mm;
    font-family:var(--font-mono); color:#000;
  }
  @page{ size:80mm auto; margin:2mm; }
}