*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial, Helvetica, sans-serif;
}

body{
  background:#f3f2f2;
  color:#541301;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  background:rgba(255,255,255,.55);
  pointer-events:none;
  z-index:-1;
}

.app{
  width:calc(100vw - 24px);
  max-width:none;
  min-height:calc(100vh - 24px);
  margin:12px auto;
  background:rgba(255,255,255,.94);
  border:6px solid #541301;
  border-radius:28px;
  overflow:hidden;
  display:flex;
  box-shadow:0 25px 60px rgba(84,19,1,.22);
  backdrop-filter:blur(3px);
}

.sidebar{
  width:230px;
  background:rgba(246,246,246,.96);
  border-right:1px solid #e5e5e5;
  padding:28px 22px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.sidebar-toggle-control{
  position:fixed;
  left:232px;
  top:24px;
  z-index:80;
  width:42px;
  height:42px;
  border:3px solid var(--cs-dark, #232521);
  border-radius:999px;
  background:var(--yellow, #FFD21F);
  color:var(--cs-dark, #232521);
  box-shadow:4px 4px 0 var(--cs-dark, #232521);
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size:30px;
  font-weight:900;
  line-height:1;
  transition:all .15s ease;
}

.sidebar-toggle-control:hover{
  transform:translate(-2px,-2px) rotate(-1deg);
  box-shadow:6px 6px 0 var(--cs-dark, #232521);
}

.sidebar-toggle-control:active{
  transform:translate(2px,2px);
  box-shadow:1px 1px 0 var(--cs-dark, #232521);
}

html.sidebar-collapsed .sidebar,
body.sidebar-collapsed .sidebar{
  width:0;
  min-width:0;
  overflow:hidden;
  padding-left:0;
  padding-right:0;
  transform:translateX(-110%);
  border-right:0;
}

html.sidebar-collapsed .sidebar-toggle-control,
body.sidebar-collapsed .sidebar-toggle-control{
  left:18px;
}

.sidebar-main,
.sidebar-bottom{
  display:flex;
  flex-direction:column;
}

.sidebar-bottom{
  gap:18px;
}

.settings-link{
  color:#541301;
  background:white;
  text-decoration:none;
  font-size:15px;
  padding:12px;
  border-radius:12px;
  font-weight:800;
  box-shadow:4px 4px 0 #d6d6c0;
}

.owner-mobile-preview-control{
  align-items:center;
  background:#fff7e8;
  border:2px solid rgba(84,19,1,.22);
  border-radius:14px;
  color:#541301;
  cursor:pointer;
  display:grid;
  gap:8px;
  grid-template-columns:minmax(0,1fr) auto;
  padding:10px 11px;
  position:relative;
  user-select:none;
}

.owner-mobile-preview-copy{
  align-items:center;
  display:flex;
  gap:8px;
  min-width:0;
}

.owner-mobile-preview-copy>b{
  align-items:center;
  background:#FFD21F;
  border:2px solid #232521;
  border-radius:7px;
  color:#232521;
  display:flex;
  flex:0 0 28px;
  font-size:21px;
  height:32px;
  justify-content:center;
  line-height:1;
}

.owner-mobile-preview-copy>span{
  display:grid;
  gap:2px;
  min-width:0;
}

.owner-mobile-preview-copy strong{
  font-size:12px;
  line-height:1.1;
}

.owner-mobile-preview-copy small{
  color:#777;
  font-size:9px;
  font-weight:800;
  white-space:nowrap;
}

.owner-mobile-preview-control input{
  height:1px;
  opacity:0;
  position:absolute;
  width:1px;
}

.owner-mobile-preview-control>i{
  background:#c9c9bd;
  border:2px solid #232521;
  border-radius:999px;
  display:block;
  height:24px;
  position:relative;
  transition:background .15s ease;
  width:43px;
}

.owner-mobile-preview-control>i::after{
  background:#fff;
  border:2px solid #232521;
  border-radius:50%;
  content:"";
  height:16px;
  left:2px;
  position:absolute;
  top:2px;
  transition:transform .15s ease;
  width:16px;
}

.owner-mobile-preview-control input:checked+i{
  background:#7CFF9B;
}

.owner-mobile-preview-control input:checked+i::after{
  transform:translateX(19px);
}

.owner-mobile-preview-control:focus-within{
  outline:3px solid rgba(221,64,2,.28);
  outline-offset:2px;
}

.app.owner-mobile-preview-active>:not(.sidebar):not(.mobile-preview-workspace):not(.sidebar-toggle-control){
  display:none !important;
}

.mobile-preview-workspace{
  align-items:center;
  background-color:#e9e9e3;
  background-image:
    linear-gradient(rgba(84,19,1,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(84,19,1,.055) 1px, transparent 1px);
  background-size:20px 20px;
  display:flex;
  flex:1;
  flex-direction:column;
  gap:12px;
  justify-content:center;
  min-height:calc(100vh - 24px);
  min-width:0;
  overflow:auto;
  padding:18px;
}

.mobile-preview-toolbar{
  align-items:center;
  background:#232521;
  border:3px solid #232521;
  border-radius:13px;
  color:#fff;
  display:flex;
  font-size:12px;
  gap:20px;
  justify-content:space-between;
  padding:8px 13px;
  width:min(390px, 100%);
}

.mobile-preview-toolbar span{
  align-items:center;
  display:flex;
  font-weight:900;
  gap:7px;
}

.mobile-preview-toolbar b{
  color:#FFD21F;
  font-size:20px;
}

.mobile-preview-toolbar strong{
  color:#D6D6C0;
  font-size:11px;
}

.mobile-preview-device{
  background:#232521;
  border:5px solid #232521;
  border-radius:26px;
  box-shadow:10px 12px 0 rgba(84,19,1,.22);
  height:min(844px, calc(100vh - 110px));
  overflow:hidden;
  padding:5px;
  width:400px;
}

.mobile-preview-device iframe{
  background:#fff;
  border:0;
  border-radius:17px;
  display:block;
  height:100%;
  width:390px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:800;
}

.account-button{
  width:100%;
  border:2px solid rgba(84,19,1,.18);
  background:#fff;
  color:#541301;
  border-radius:12px;
  padding:10px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:10px;
  text-align:left;
}
.account-button:hover{
  background:#fff7e8;
  border-color:#541301;
}
.account-button-avatar,
.account-avatar{
  flex:0 0 auto;
  width:36px;
  height:36px;
  border-radius:50%;
  background:#541301;
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:900;
  font-size:13px;
}
.account-button-text{
  min-width:0;
  display:grid;
  gap:1px;
}
.account-button-text strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
}
.account-button-text small{
  color:#777;
  font-size:12px;
  font-weight:800;
}

.logo{
  width:36px;
  height:36px;
  border:2px solid #D6D6C0;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
}

.brand-logo{
  width:56px;
  height:56px;
  object-fit:contain;
  border-radius:14px;
}

.menu{
  display:flex;
  flex-direction:column;
  gap:18px;
  margin-top:50px;
}

.menu a{
  color:#777;
  text-decoration:none;
  font-size:15px;
  padding:12px;
  border-radius:12px;
}

.menu a:hover,
.menu a.active{
  color:#541301;
  background:white;
  font-weight:700;
  box-shadow:4px 4px 0 #d6d6c0;
}

.menu .submenu{
  display:none;
  gap:8px;
  margin:-8px 0 4px 22px;
  padding:0 0 0 16px;
}

.menu .submenu.active{
  display:grid;
}

.menu .submenu a{
  background:transparent;
  border-radius:8px;
  box-shadow:none;
  color:#666;
  font-size:13px;
  font-weight:700;
  padding:7px 10px;
}

.menu .submenu a:hover,
.menu .submenu .active-sub{
  background:transparent;
  box-shadow:none;
  color:#541301;
  font-weight:900;
}

.sidebar-footer{
  color:#999;
  font-size:13px;
}

.content{
  flex:1;
  min-width:0;
  padding:24px clamp(22px, 2.5vw, 44px);
}

.topbar{
  height:60px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  border-bottom:1px solid #eee;
}

.topbar > :first-child{
  margin-right:auto;
}

.topbar p{
  font-size:14px;
  color:#555;
}

.notification-center{position:relative;z-index:120;}
.topbar .notification-bell{
  align-items:center;
  background:#fff7e8;
  border:2px solid #541301;
  border-radius:50%;
  color:#541301;
  cursor:pointer;
  display:flex;
  font-size:18px;
  height:40px;
  justify-content:center;
  padding:0;
  position:relative;
  width:40px;
}
.notification-bell b{
  align-items:center;
  background:#e63b2e;
  border:2px solid #fff;
  border-radius:999px;
  color:#fff;
  display:flex;
  font-size:9px;
  height:20px;
  justify-content:center;
  min-width:20px;
  padding:0 4px;
  position:absolute;
  right:-8px;
  top:-8px;
}
.notification-panel{
  background:#fff9e8;
  border:3px solid var(--cs-dark, #232521);
  border-radius:20px;
  box-shadow:6px 6px 0 var(--cs-dark, #232521);
  max-height:520px;
  overflow:hidden;
  position:absolute;
  right:0;
  top:48px;
  width:min(440px,calc(100vw - 32px));
}
.notification-panel header{
  align-items:center;
  background:var(--yellow, #ffd21f);
  border-bottom:3px solid var(--cs-dark, #232521);
  display:flex;
  gap:10px;
  justify-content:space-between;
  padding:13px 15px;
}
.notification-panel header strong{font-size:16px;}
.notification-panel header button{
  background:#fff;
  border:2px solid var(--cs-dark, #232521);
  border-radius:999px;
  color:var(--cs-dark, #232521);
  cursor:pointer;
  font-size:10px;
  font-weight:800;
  padding:6px 9px;
}
.notification-list{
  display:grid;
  gap:11px;
  max-height:430px;
  overflow:auto;
  padding:13px;
}
.topbar .notification-item,
.global-notification-toast{
  --notification-card:#ece8e3;
  --notification-ink:var(--cs-dark, #232521);
  align-items:center;
  background:var(--notification-card);
  border:2px solid var(--cs-dark, #232521);
  border-radius:17px;
  box-shadow:3px 3px 0 var(--cs-dark, #232521);
  color:var(--notification-ink);
  display:grid;
  grid-template-columns:minmax(0,1fr) 36px;
  overflow:hidden;
  position:relative;
  transition:opacity .2s ease,transform .2s ease,box-shadow .15s ease;
  width:100%;
}
.topbar .notification-item:hover,
.global-notification-toast:hover{box-shadow:5px 5px 0 var(--cs-dark, #232521);transform:translate(-1px,-1px);}
.topbar .notification-item-main,
.global-notification-main{
  align-items:center;
  background:transparent;
  border:0;
  color:inherit;
  cursor:pointer;
  display:grid;
  gap:11px;
  grid-template-columns:48px minmax(0,1fr);
  min-width:0;
  padding:10px 7px 10px 10px;
  text-align:left;
  width:100%;
}
.notification-icon{
  align-items:center;
  align-self:start;
  background:rgba(255,255,255,.72);
  border:2px solid currentColor;
  border-radius:13px;
  display:flex;
  font-size:25px;
  font-weight:900;
  height:48px;
  justify-content:center;
  line-height:1;
  width:48px;
}
.notification-copy{display:grid;gap:3px;min-width:0;}
.notification-copy strong{color:inherit;font-size:14px;line-height:1.18;}
.notification-copy > span{color:inherit;font-size:11px;line-height:1.35;opacity:.78;}
.notification-copy small{color:inherit;font-size:9px;font-weight:700;opacity:.58;}
.topbar .notification-dismiss,
.global-notification-toast .notification-dismiss{
  align-items:center;
  align-self:start;
  background:transparent;
  border:0;
  border-radius:10px;
  color:inherit;
  cursor:pointer;
  display:flex;
  font-size:28px;
  font-weight:400;
  height:34px;
  justify-content:center;
  line-height:1;
  margin:8px 7px 0 0;
  opacity:.55;
  padding:0;
  width:34px;
}
.topbar .notification-dismiss:hover,
.global-notification-toast .notification-dismiss:hover{background:rgba(255,255,255,.55);opacity:1;}
.notification-item.is-leaving,
.global-notification-toast.is-leaving{opacity:0;transform:translateX(24px) rotate(1deg);}
.notification-empty{color:#777;padding:24px;text-align:center;}
.global-notification-stack{
  bottom:22px;
  display:flex;
  flex-direction:column;
  gap:13px;
  max-width:420px;
  position:fixed;
  right:22px;
  width:calc(100vw - 44px);
  z-index:30000;
}
.global-notification-toast{animation:notification-arrive .28s ease both;box-shadow:5px 5px 0 var(--cs-dark, #232521);}
.global-notification-toast:nth-child(even){transform:rotate(-.35deg);}
.global-notification-toast:nth-child(odd){transform:rotate(.25deg);}
@keyframes notification-arrive{
  from{opacity:0;transform:translateX(35px) rotate(1deg);}
  to{opacity:1;}
}
.topbar .notification-item[data-notification-tone="neutral"],
.global-notification-toast[data-notification-tone="neutral"]{--notification-card:#e8e7e4;}
.topbar .notification-item[data-notification-tone="warning"],
.global-notification-toast[data-notification-tone="warning"]{--notification-card:#ffe8bd;}
.topbar .notification-item[data-notification-tone="success"],
.global-notification-toast[data-notification-tone="success"]{--notification-card:#dff5eb;}
.topbar .notification-item[data-notification-tone="error"],
.global-notification-toast[data-notification-tone="error"]{--notification-card:#f9deda;}
.topbar .notification-item[data-production-state="Pendiente"],
.global-notification-toast[data-production-state="Pendiente"]{--notification-card:var(--yellow, #ffd21f);}
.topbar .notification-item[data-production-state="Diseno"],
.global-notification-toast[data-production-state="Diseno"]{--notification-card:var(--pink, #ff8fd8);}
.topbar .notification-item[data-production-state="Confirmacion"],
.global-notification-toast[data-production-state="Confirmacion"]{--notification-card:var(--confirmation-green, #a8e6cf);}
.topbar .notification-item[data-production-state="Produccion"],
.global-notification-toast[data-production-state="Produccion"]{--notification-card:#c8abf5;}
.topbar .notification-item[data-production-state="Tarima"],
.global-notification-toast[data-production-state="Tarima"]{--notification-card:#9a603d;--notification-ink:var(--white, #fff);}
.topbar .notification-item[data-production-state="Enviado"],
.global-notification-toast[data-production-state="Enviado"]{--notification-card:var(--blue, #75a7ff);}
.topbar .notification-item[data-production-state="Finalizado"],
.global-notification-toast[data-production-state="Finalizado"]{--notification-card:var(--green, #7cff9b);}

@media (max-width:600px){
  .global-notification-stack{bottom:14px;right:14px;width:calc(100vw - 28px);}
  .notification-panel{position:fixed;right:14px;top:72px;width:calc(100vw - 28px);}
}

.dashboard-top-title{
  align-items:center;
  display:flex;
  gap:10px;
}

.topbar .dashboard-privacy-toggle{
  align-items:center;
  background:#fff;
  border:2px solid #541301;
  border-radius:999px;
  color:#541301;
  cursor:pointer;
  display:inline-flex;
  height:38px;
  justify-content:center;
  padding:0;
  width:38px;
}

.topbar .dashboard-privacy-toggle:hover{
  background:#fff7e8;
  box-shadow:3px 3px 0 #541301;
  transform:translate(-1px, -1px);
}

.topbar .dashboard-privacy-toggle.is-hidden{
  background:#541301;
  color:#fff;
}

.privacy-eye-icon{
  border:3px solid currentColor;
  border-radius:50% / 62%;
  display:block;
  height:16px;
  position:relative;
  width:24px;
}

.privacy-eye-icon::after{
  background:currentColor;
  border-radius:50%;
  content:"";
  height:7px;
  left:50%;
  position:absolute;
  top:50%;
  transform:translate(-50%, -50%);
  width:7px;
}

.privacy-eye-slash{
  background:currentColor;
  border-radius:999px;
  box-shadow:0 0 0 2px #fff;
  display:none;
  height:3px;
  left:50%;
  position:absolute;
  top:50%;
  transform:translate(-50%, -50%) rotate(-35deg);
  width:30px;
}

.dashboard-privacy-toggle.is-hidden .privacy-eye-slash{
  display:block;
  box-shadow:0 0 0 2px #541301;
}

.dashboard-privacy-toggle.is-hidden .privacy-eye-icon::after{
  opacity:.35;
}

.topbar button{
  background:#541301;
  color:white;
  border:none;
  padding:14px 22px;
  border-radius:8px;
  font-weight:700;
  cursor:pointer;
}

.hero{
  display:grid;
  grid-template-columns:1fr 330px;
  gap:30px;
  padding:50px 0;
  align-items:center;
}

.simple-hero,
.dashboard-hero{
  padding-bottom:28px;
}

.hero h1{
  font-size:46px;
  margin-bottom:14px;
}

.hero p{
  color:#666;
  font-size:17px;
  max-width:570px;
  line-height:1.6;
}

.actions,
.cotizador-buttons,
.concentradora-buttons{
  display:flex;
  gap:14px;
  margin-top:24px;
  flex-wrap:wrap;
}

.actions a{
  text-decoration:none;
  padding:15px 24px;
  border-radius:10px;
  font-weight:800;
}

.btn-primary{
  background:#541301;
  color:white;
}

.btn-secondary{
  background:white;
  color:#541301;
  border:1px solid #D6D6C0;
  text-decoration:none;
  padding:12px 18px;
  border-radius:10px;
  font-weight:800;
}

.summary-card{
  padding:34px;
  border-radius:16px;
}

.summary-card.dark{
  background:#541301;
  color:white;
  box-shadow:8px 8px 0 #d6d6c0;
}

.summary-card span{
  color:#d6d6c0;
  font-size:14px;
}

.summary-card h2{
  font-size:42px;
  margin:16px 0;
}

.summary-card p{
  color:#eee;
}

.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

.card{
  min-height:190px;
  border:1px solid #eee;
  border-radius:16px;
  padding:28px;
  text-decoration:none;
  color:#541301;
  background:white;
  transition:.3s;
}

.card:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 40px rgba(84,19,1,.18);
}

.card span{
  color:#999;
  font-weight:800;
}

.card h3{
  margin:18px 0 10px;
  font-size:24px;
}

.card p{
  color:#666;
  line-height:1.5;
}

.subnav-cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
  margin-top:10px;
}

.subnav-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  text-decoration:none;
  color:#541301;
  background:white;
  border:4px solid #541301;
  border-radius:22px;
  padding:28px;
  box-shadow:8px 8px 0 #d6d6c0;
}
.subnav-card[type="button"]{
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.subnav-card[type="button"]:hover{
  transform:translate(-1px, -1px);
}

.subnav-card strong{font-size:24px;}
.subnav-card span{color:#777;}
.subnav-card.disabled{opacity:.65;cursor:not-allowed;}

.users-admin-page{
  display:grid;
  gap:18px;
}
.users-message{
  min-height:0;
  border-radius:8px;
  padding:0;
  font-weight:600;
}
.users-message.success,
.users-message.error{
  padding:12px 14px;
  border:1px solid;
}
.users-message.success{
  background:#edf7ee;
  border-color:#b7dfbd;
  color:#137333;
}
.users-message.error{
  background:#fceeee;
  border-color:#f4c7c3;
  color:#b3261e;
}
.users-summary-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
}
.users-summary-card{
  min-height:104px;
  border:1px solid #dde3ea;
  border-radius:8px;
  background:#fff;
  padding:18px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.users-summary-card.primary{
  background:#1a73e8;
  border-color:#1a73e8;
  color:#fff;
}
.users-summary-card span{
  color:inherit;
  font-size:14px;
}
.users-summary-card strong{
  font-size:34px;
  line-height:1;
  font-weight:700;
}
.users-toolbar{
  min-height:52px;
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid #dde3ea;
  border-radius:8px;
  background:#fff;
  padding:10px 14px;
}
.users-add-button{
  width:38px;
  height:38px;
  border-radius:50%;
  border:0;
  background:#1a73e8;
  color:#fff;
  font-size:28px;
  line-height:1;
  cursor:pointer;
}
.users-filter-icon{
  width:34px;
  height:34px;
  border:0;
  background:transparent;
  color:#5f6368;
  font-size:21px;
  cursor:pointer;
}
.users-create-panel.hidden{
  display:none;
}
.users-table-card{
  overflow:hidden;
}
.users-admin-table{
  overflow:auto;
}
.users-console-table{
  width:100%;
  min-width:880px;
  border-collapse:collapse;
  font-size:13px;
}
.users-console-table th{
  text-align:left;
  color:#5f6368;
  font-weight:600;
  padding:13px 12px;
  border-bottom:1px solid #e8eaed;
  white-space:nowrap;
}
.users-console-table td{
  padding:12px;
  border-bottom:1px solid #eef1f4;
  vertical-align:middle;
  color:#202124;
}
.users-console-table tr:hover{
  background:#f8fbff;
}
.users-console-table input,
.users-console-table select{
  width:100%;
  border:1px solid transparent;
  border-radius:6px;
  background:transparent;
  padding:6px 4px;
  font:inherit;
}
.users-console-table input:focus,
.users-console-table select:focus{
  outline:0;
  border-color:#c6dafc;
  background:#fff;
}
.user-cell{
  min-width:260px;
  display:flex;
  align-items:center;
  gap:12px;
}
.user-cell span:last-child{
  display:grid;
  gap:2px;
  width:100%;
}
.user-cell strong,
.users-console-table td strong{
  display:block;
  font-weight:700;
}
.user-cell small,
.users-console-table td small{
  display:block;
  color:#5f6368;
  font-size:12px;
  margin-top:2px;
}
.user-cell input:first-child{
  font-weight:600;
}
.user-cell input:last-child{
  color:#5f6368;
  font-size:12px;
}
.user-avatar{
  width:36px;
  height:36px;
  border-radius:50%;
  background:#e8f0fe;
  color:#1967d2;
  display:grid;
  place-items:center;
  font-weight:700;
  flex:0 0 auto;
}
.users-row-actions{
  min-width:230px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.users-toggle{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}
.users-toggle input{
  width:auto;
}
.user-live-status{
  display:block;
  margin-top:4px;
  color:#5f6368;
  font-size:11px;
  font-weight:600;
}
.user-live-status::before{
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  margin-right:5px;
  border-radius:50%;
  background:#9aa0a6;
  vertical-align:middle;
}
.user-live-status.is-online{
  color:#137333;
}
.user-live-status.is-online::before{
  background:#1e8e3e;
}
.password-mask{
  display:block;
  color:#5f6368;
  letter-spacing:1px;
  margin-top:4px;
}
.text-action{
  border:0;
  background:transparent;
  color:#1a73e8;
  padding:0;
  cursor:pointer;
  font:inherit;
  font-weight:600;
}
.text-action:disabled{
  color:#9aa0a6;
  cursor:not-allowed;
}
.danger-action{
  color:#b3261e;
  border-color:#f4c7c3;
}
.users-edit-modal .settings-form-grid{
  align-items:start;
}


@media(max-width:900px){
  .app{
    width:100%;
    margin:0;
    border-radius:0;
    border:none;
    flex-direction:column;
  }

  .sidebar{
    width:100%;
  }

  .hero{
    grid-template-columns:1fr;
  }

  .cards,
  .subnav-cards{
    grid-template-columns:1fr;
  }
  .users-summary-grid{
    grid-template-columns:1fr;
  }
}

.cotizador-tabs,
.concentradora-tabs{
  gap:12px;
}

.cotizador-tab{
  border:3px solid #541301;
  border-radius:12px;
  padding:15px 22px;
  font-weight:900;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#FFF7E8;
  color:#541301;
  box-shadow:3px 3px 0 #541301;
  transition:.15s;
}

.cotizador-tab:hover{
  transform:translate(2px,2px);
  box-shadow:1px 1px 0 #541301;
}

.cotizador-tab.active{
  background:#541301;
  color:#fff;
}

.dashboard-extra-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  margin-top:28px;
}

.mini-dashboard-card,
.settings-card{
  background:rgba(255,255,255,.96);
  border:4px solid #541301;
  border-radius:22px;
  box-shadow:8px 8px 0 #d6d6c0;
  padding:24px;
}

.mini-dashboard-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-bottom:14px;
}

.mini-dashboard-head a{
  color:#541301;
  font-weight:900;
}

.kpis.three{
  grid-template-columns:repeat(3,1fr);
  margin:16px 0;
}

.settings-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px;
}

.settings-card h2{margin-bottom:8px;}
.settings-card p{color:#666;margin-bottom:18px;line-height:1.45;}
.settings-actions,.settings-row,.settings-form{display:grid;gap:10px;}
.settings-actions{grid-template-columns:1fr auto;}
.settings-row{grid-template-columns:1fr auto;margin-bottom:8px;}
.settings-card input{
  border:2px solid #d6d6c0;
  border-radius:12px;
  padding:12px;
  font-weight:800;
}
.settings-row button{
  border:2px solid #541301;
  border-radius:10px;
  background:#fff7e8;
  color:#541301;
  font-weight:900;
  padding:8px 12px;
  cursor:pointer;
}
.role-list{display:flex;gap:10px;flex-wrap:wrap;}
.role-list span{background:#fff7e8;border:2px solid #541301;border-radius:999px;padding:10px 14px;font-weight:900;}
.finance-cards{margin-top:24px;}
.resources-kpis{
  display:grid;
  grid-template-columns:repeat(5, minmax(150px, 1fr));
  gap:18px;
  margin:22px 0 28px;
}
.resources-kpi{
  min-height:126px;
}
.resources-kpi:last-child{
  background:var(--yellow, #fff7e8);
}
.resources-forms{
  align-items:start;
}
.resources-forms .mini-dashboard-card{
  height:100%;
}
.resources-detail-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:2px;
}
.resources-detail-grid .simple-row{
  min-width:900px;
}
.resource-card-selector{
  margin-bottom:24px;
}
.resource-card-filters{
  display:grid;
  grid-template-columns:repeat(4, minmax(150px, 1fr));
  gap:12px;
  margin:16px 0;
}
.resource-card-filters label{
  color:var(--cs-dark, #541301);
  display:grid;
  font-size:13px;
  font-weight:900;
  gap:7px;
}
.resource-card-filters .full{
  grid-column:1/-1;
}
.resource-card-result-row{
  align-items:center;
  display:flex;
  justify-content:space-between;
  margin:8px 0 14px;
}
.resource-card-result-row span{
  color:var(--cs-dark, #541301);
  font-weight:900;
}
.resource-card-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(220px, 1fr));
  gap:14px;
}
.resource-account-card{
  background:var(--white, #fff);
  border:3px solid var(--cs-dark, #541301);
  border-radius:18px;
  box-shadow:4px 4px 0 var(--cs-dark, #541301);
  cursor:pointer;
  display:grid;
  gap:14px;
  min-height:210px;
  overflow:hidden;
  padding:16px;
  position:relative;
  transition:.18s ease;
}
.resource-account-card:hover,
.resource-account-card.selected{
  box-shadow:7px 7px 0 var(--cs-dark, #541301);
  transform:translate(-2px, -2px);
}
.resource-account-card.selected{
  background:var(--yellow, #ffd21f);
}
.resource-account-color{
  background:var(--account-color, #541301);
  border:2px solid var(--cs-dark, #541301);
  border-radius:999px;
  height:14px;
  width:64px;
}
.resource-account-head{
  align-items:flex-start;
  display:flex;
  gap:10px;
  justify-content:space-between;
}
.resource-account-head strong{
  color:var(--cs-dark, #541301);
  display:block;
  font-size:18px;
  line-height:1.15;
}
.resource-account-head span,
.resource-account-foot small{
  color:#66554d;
  font-size:12px;
  font-weight:900;
}
.resource-account-head b{
  background:var(--cream, #fff7e8);
  border:2px solid var(--cs-dark, #541301);
  border-radius:999px;
  color:var(--cs-dark, #541301);
  flex:0 0 auto;
  font-size:11px;
  padding:5px 8px;
}
.resource-account-meta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.resource-account-meta span{
  background:var(--cream, #fff7e8);
  border:2px solid var(--cs-dark, #541301);
  border-radius:12px;
  color:#66554d;
  display:grid;
  font-size:11px;
  font-weight:900;
  gap:3px;
  padding:8px;
}
.resource-account-meta strong{
  color:var(--cs-dark, #541301);
  font-size:13px;
}
.resource-account-foot{
  align-items:center;
  display:flex;
  gap:10px;
  justify-content:space-between;
  margin-top:auto;
}
.resource-account-foot button{
  min-width:92px;
}
.resource-card-more{
  justify-content:center;
}
.the-bag-sync-card{
  align-items:center;
  background:var(--cream, #fff7e8);
  border:3px solid var(--cs-dark, #541301);
  border-radius:18px;
  box-shadow:5px 5px 0 var(--cs-dark, #541301);
  display:flex;
  gap:18px;
  justify-content:space-between;
  margin:10px 0 22px;
  padding:16px;
}
.the-bag-sync-card h2{
  margin-bottom:4px;
}
.the-bag-kpis .the-bag-kpi{
  min-height:118px;
}
.the-bag-kpis{
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
}
.the-bag-kpis .the-bag-kpi.balance{
  background:var(--yellow, #ffd21f);
}
.the-bag-detail-grid .simple-row{
  min-width:980px;
}
.the-bag-forms{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}
.the-bag-forms .mini-dashboard-card{
  height:100%;
}

@media(max-width:1000px){
  .dashboard-extra-grid,.settings-grid{grid-template-columns:1fr;}
  .the-bag-forms{grid-template-columns:1fr;}
  .kpis.three{grid-template-columns:1fr;}
  .resources-kpis{grid-template-columns:repeat(2, minmax(150px, 1fr));}
  .resource-card-filters{grid-template-columns:repeat(2, minmax(150px, 1fr));}
  .resource-card-grid{grid-template-columns:repeat(2, minmax(220px, 1fr));}
}

@media(max-width:700px){
  .resources-kpis{grid-template-columns:1fr;}
  .resource-card-filters,
  .resource-card-grid{grid-template-columns:1fr;}
  .the-bag-sync-card{align-items:stretch;flex-direction:column;}
  .acabado-material-option{
    grid-template-columns:28px minmax(0, 1fr);
  }
  .acabado-material-price{
    grid-column:2;
    justify-self:start;
  }
}

/* Dashboard editable estilo métricas */
.editable-dashboard{
  margin:8px 0 36px;
  padding:26px;
  background:#f6f7f9;
  border-radius:24px;
  border:1px solid #eceff3;
}
.editable-dashboard-top{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center;
  margin-bottom:18px;
}
.editable-dashboard-top h2{
  color:#1f2937;
  font-size:24px;
  margin:0 0 6px;
}
.editable-dashboard-top p{
  color:#6b7280;
  font-size:14px;
}
.dash-controls{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
}
.dash-controls select{
  height:42px;
  border:1px solid #d8dee8;
  border-radius:10px;
  padding:0 14px;
  color:#1f2937;
  background:#fff;
  font-weight:700;
}
.dash-controls input[type="date"]{
  height:42px;
  border:1px solid #d8dee8;
  border-radius:10px;
  padding:0 12px;
  color:#1f2937;
  background:#fff;
  font-weight:700;
}
.dash-controls input[type="date"]:disabled{
  background:#eef1f5;
  color:#8993a1;
}
.dash-compare-toggle{
  height:42px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:1px solid #d8dee8;
  border-radius:10px;
  padding:0 12px;
  color:#1f2937;
  background:#fff;
  font-weight:800;
  white-space:nowrap;
}
.dash-compare-toggle input{
  width:16px;
  height:16px;
}
.summary-metrics,
.custom-metrics{
  display:grid;
  grid-template-columns:repeat(3, minmax(190px, 1fr));
  gap:18px;
}
.custom-metrics{
  grid-template-columns:repeat(3, minmax(210px, 1fr));
}
.custom-title{
  margin-top:34px;
}
.metric-card{
  background:#fff;
  border:1px solid #edf0f5;
  border-radius:14px;
  padding:18px;
  min-height:174px;
  box-shadow:0 6px 16px rgba(17,24,39,.08);
  position:relative;
  overflow:hidden;
}
.metric-card.highlight{
  background:#fff4f2;
}
.metric-head{
  display:flex;
  align-items:center;
  gap:8px;
  color:#53657d;
  font-weight:800;
  font-size:14px;
}
.metric-icon{
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:7px;
  background:#eef2ff;
}
.metric-trend{
  font-size:12px;
  font-weight:900;
  margin-left:4px;
  white-space:nowrap;
}
.metric-trend.up{color:#25a96b;}
.metric-trend.down{color:#d93025;}
.metric-value{
  color:#20242b;
  font-size:32px;
  font-weight:500;
  margin:22px 0 12px;
}
.metric-chart{
  width:100%;
  height:58px;
  display:block;
}
.metric-actions{
  position:absolute;
  top:10px;
  right:10px;
  display:none;
  gap:6px;
}
.metric-card.editing .metric-actions,
.edit-mode .metric-actions{
  display:flex;
}
.metric-actions button{
  border:0;
  border-radius:8px;
  background:#f1f5f9;
  padding:6px 8px;
  cursor:pointer;
  color:#1f2937;
  font-weight:800;
}
.metric-card input{
  width:100%;
  border:1px solid #d8dee8;
  border-radius:8px;
  padding:8px;
  margin-top:8px;
}
.metric-card .edit-panel{
  display:none;
  margin-top:10px;
  gap:8px;
}
.edit-mode .metric-card .edit-panel{
  display:grid;
}
@media(max-width:980px){
  .summary-metrics,.custom-metrics{grid-template-columns:1fr;}
  .editable-dashboard-top{align-items:flex-start; flex-direction:column;}
}

.main-dashboard .sortable-metrics{
  grid-template-columns:repeat(3, minmax(220px, 1fr));
}
.dashboard-config-note{
  background:#fff7e8;
  border:1px solid #d6d6c0;
  border-radius:10px;
  color:#541301;
  font-weight:800;
  margin-bottom:18px;
  padding:12px 14px;
}
.edit-only{
  display:none;
}
.edit-mode .edit-only{
  display:block;
}
.main-metric.blue .metric-icon{background:#2d8cff;}
.main-metric.green .metric-icon{background:#25a96b;}
.main-metric.teal .metric-icon{background:#35e0a5;}
.main-metric.purple .metric-icon{background:#7c3aed;}
.main-metric.red .metric-icon{background:#d93025;}
.main-metric.amber .metric-icon{background:#f4a51c;}
.hidden{
  display:none !important;
}
.finance-form h3,
.b2b-table h2{
  margin-bottom:18px;
}
.finance-table-head{
  align-items:start;
  display:flex;
  gap:18px;
  justify-content:space-between;
  margin-bottom:18px;
}
.finance-table-head h2{
  margin-bottom:0;
}
.finance-total-card{
  background:var(--yellow, #fff7e8);
  border:3px solid var(--cs-dark, #541301);
  border-radius:18px;
  box-shadow:4px 4px 0 var(--cs-dark, #541301);
  color:var(--cs-dark, #541301);
  min-width:190px;
  padding:14px 18px;
  text-align:right;
}
.finance-total-card span{
  display:block;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
}
.finance-total-card strong{
  display:block;
  font-size:24px;
  font-weight:900;
  line-height:1.15;
  margin-top:4px;
}
.advanced-toolbar{
  align-items:end;
  display:grid;
  grid-template-columns:repeat(4, minmax(140px, 1fr));
}
.finance-filter-bar{
  justify-content:flex-start;
  margin:18px 0;
}
.finance-filter-bar .b2b-field{
  flex:1 1 160px;
  min-width:150px;
}
.finance-filter-bar .finance-search-field{
  flex-basis:260px;
}
.finance-filter-bar input,
.finance-filter-bar select{
  width:100%;
}
.finance-filter-bar .btn-light{
  align-self:end;
  min-height:42px;
}
.finance-dash-panel .finance-table-head p{
  margin-top:4px;
}
.finance-dash-kpis{
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  margin-bottom:0;
}
.finance-dash-kpi{
  min-height:118px;
}
.finance-dash-kpi.balance{
  background:var(--yellow, #ffd21f);
}
.finance-dash-kpi small{
  color:#66554d;
  display:block;
  font-size:12px;
  font-weight:900;
  margin-top:8px;
  overflow-wrap:anywhere;
}
.finance-dash-grid{
  align-items:stretch;
}
.finance-dash-grid .mini-dashboard-head{
  margin-bottom:10px;
}
.simple-table{
  overflow:auto;
}
#stock-viniles .b2b-actions{
  margin:16px 0 24px;
}
#stock-viniles.b2b-table{
  max-width:100%;
  overflow:hidden;
}
#stock-viniles #tablaViniles{
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:12px;
  scrollbar-color:#541301 #fff7e8;
  scrollbar-gutter:stable;
}
#stock-viniles #tablaViniles .simple-row{
  align-items:start;
  font-size:12px;
  gap:10px;
  grid-template-columns:150px 130px 120px 160px 130px 105px 110px 130px 115px 130px 230px 110px 290px !important;
  min-width:2010px;
  padding:12px;
  width:max-content;
}
#stock-viniles #tablaViniles .simple-row > span{
  display:block;
  line-height:1.25;
  min-width:0;
  overflow-wrap:anywhere;
}
#stock-viniles #tablaViniles .simple-head{
  border-radius:14px 14px 0 0;
  position:sticky;
  top:0;
  z-index:1;
}
#stock-viniles #tablaViniles .simple-head > span{
  align-self:center;
}
#stock-viniles #tablaViniles .row-actions{
  align-items:flex-start;
  display:flex;
  flex-wrap:nowrap;
  gap:8px;
  min-width:0;
}
#stock-viniles #tablaViniles .row-actions button{
  flex:0 0 auto;
  min-height:36px;
  padding:8px 12px;
  white-space:nowrap;
}
#stock-tintas.b2b-table{
  max-width:100%;
  overflow:hidden;
}
#stock-tintas #tablaTintas{
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:12px;
  scrollbar-color:#541301 #fff7e8;
  scrollbar-gutter:stable;
}
#stock-tintas #tablaTintas .simple-row{
  align-items:start;
  font-size:12px;
  gap:10px;
  grid-template-columns:150px 130px 120px 130px 120px 150px 150px 90px 130px 150px 135px 230px 110px 290px !important;
  min-width:2210px;
  padding:12px;
  width:max-content;
}
#stock-tintas #tablaTintas .simple-row > span{
  display:block;
  line-height:1.25;
  min-width:0;
  overflow-wrap:anywhere;
}
#stock-tintas #tablaTintas .simple-head{
  border-radius:14px 14px 0 0;
  position:sticky;
  top:0;
  z-index:1;
}
#stock-tintas #tablaTintas .simple-head > span{
  align-self:center;
}
#stock-tintas #tablaTintas .row-actions{
  align-items:flex-start;
  display:flex;
  flex-wrap:nowrap;
  gap:8px;
  min-width:0;
}
#stock-tintas #tablaTintas .row-actions button{
  flex:0 0 auto;
  min-height:36px;
  padding:8px 12px;
  white-space:nowrap;
}
.stock-summary-grid,
.tinta-summary-grid{
  display:grid;
  gap:10px;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  margin:18px 0 6px;
}
.stock-summary-card,
.tinta-summary-card{
  background:#fff7e8;
  border:2px solid #541301;
  border-radius:12px;
  box-shadow:3px 3px 0 #d6d6c0;
  display:grid;
  gap:10px;
  padding:12px;
}
.stock-summary-head,
.tinta-summary-head{
  align-items:center;
  display:flex;
  gap:8px;
  justify-content:space-between;
}
.stock-summary-head span,
.stock-summary-foot span,
.tinta-summary-head span,
.tinta-summary-foot span{
  color:#777;
  display:block;
  font-size:12px;
  font-weight:900;
}
.stock-summary-head strong,
.tinta-summary-head strong{
  color:#541301;
  display:block;
  font-size:16px;
  margin-top:1px;
}
.stock-summary-head small,
.tinta-summary-head small{
  color:#777;
  display:block;
  font-size:11px;
  font-weight:800;
  margin-top:2px;
}
.stock-summary-head b,
.tinta-summary-head b{
  background:#541301;
  border-radius:999px;
  color:#fff;
  flex:0 0 auto;
  font-size:10px;
  padding:5px 8px;
}
.stock-summary-card[data-status="Bajo"] .stock-summary-head b,
.tinta-summary-card[data-status="Bajo"] .tinta-summary-head b{
  background:#b56a00;
}
.stock-summary-card[data-status="Agotado"] .stock-summary-head b,
.tinta-summary-card[data-status="Agotado"] .tinta-summary-head b{
  background:#8f1d12;
}
.stock-summary-amount,
.tinta-summary-amount{
  background:#fff;
  border:1px solid #d6d6c0;
  border-radius:10px;
  display:grid;
  gap:2px;
  min-height:52px;
  padding:9px 10px;
}
.stock-summary-amount span,
.tinta-summary-amount span{
  color:#777;
  font-size:11px;
  font-weight:900;
}
.stock-summary-amount strong,
.tinta-summary-amount strong{
  color:#541301;
  font-size:20px;
  line-height:1.1;
  overflow-wrap:anywhere;
}
.stock-summary-foot,
.tinta-summary-foot{
  align-items:center;
  display:flex;
  gap:8px;
  justify-content:space-between;
}
.stock-summary-foot button,
.tinta-summary-foot button{
  background:#fff;
  border:2px solid #541301;
  border-radius:999px;
  color:#541301;
  cursor:pointer;
  font-size:12px;
  font-weight:900;
  padding:7px 10px;
}
.stock-subtitle{
  color:#541301;
  font-size:18px;
  margin:22px 0 12px;
}
.stock-section-table{
  margin-bottom:24px;
}
.simple-row{
  display:grid;
  grid-template-columns:repeat(6, minmax(120px, 1fr));
  gap:12px;
  align-items:center;
  border-bottom:1px solid rgba(84,19,1,.14);
  padding:12px 14px;
  min-width:760px;
}
.simple-head{
  background:#b7e4c7;
  border-radius:12px 12px 0 0;
  color:#541301;
  font-weight:900;
}
.simple-row button,
.row-actions button{
  border:0;
  border-radius:8px;
  background:#541301;
  color:#fff;
  cursor:pointer;
  font-weight:800;
  padding:8px 10px;
}
.row-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  min-width:180px;
}
@media(max-width:1100px){
  .main-dashboard .sortable-metrics,
  .advanced-toolbar{
    grid-template-columns:1fr;
  }
  .finance-table-head{
    align-items:stretch;
    flex-direction:column;
  }
  .finance-total-card{
    text-align:left;
    width:100%;
  }
}

/* Dash page overrides */
.dash-page{
  background:#f7f8fa;
  color:#20242b;
  padding:0;
}
.dash-topbar{
  height:auto;
  min-height:76px;
  padding:15px 26px;
  background:#fff;
  border-bottom:1px solid #eef1f5;
}
.dash-title-filter{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.dash-title-filter h1{
  font-size:24px;
  font-weight:800;
  color:#1f2937;
}
.dash-title-filter select{
  height:42px;
  border:1px solid #d8dee8;
  border-radius:8px;
  padding:0 14px;
  color:#1f2937;
  background:#fff;
  font-weight:700;
}
.dash-icon-actions,
.section-actions{
  display:flex;
  align-items:center;
  gap:10px;
  color:#7d8797;
  font-size:12px;
  font-weight:800;
}
.icon-btn{
  min-width:42px;
  height:42px;
  border:1px solid #d8dee8;
  border-radius:8px;
  background:#fff;
  color:#7d8797;
  cursor:pointer;
  font-weight:900;
}
.icon-btn.primary{
  color:#2f6df6;
  border-color:#7aa2ff;
  background:#f7fbff;
}
.text-action{
  border:0;
  background:transparent;
  color:#2f6df6;
  font-weight:900;
  cursor:pointer;
}
.dash-board{
  margin:0;
  border:0;
  border-radius:0;
  min-height:calc(100vh - 76px);
  padding:32px;
}
.summary-metrics,
.custom-metrics{
  gap:22px;
}
.metric-section-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  margin:4px 0 24px;
}
.section-title{
  display:flex;
  align-items:center;
  gap:12px;
}
.section-title h2{
  color:#24272d;
  font-size:26px;
  line-height:1;
}
.section-icon{
  color:#7d8797;
  font-size:13px;
  font-weight:900;
}
.dash-board .custom-title{
  margin-top:90px;
}
.dash-board .metric-card{
  border-radius:8px;
  min-height:228px;
  box-shadow:0 6px 18px rgba(17,24,39,.08);
}
.dash-board .metric-card.highlight{
  background:#fff3f3;
}
.dash-board .metric-icon{
  width:22px;
  height:22px;
  flex:0 0 22px;
  border-radius:50%;
  background:conic-gradient(#2f6df6 0 20%, #35e0a5 20% 40%, #f4c542 40% 60%, #d93025 60% 80%, #7c3aed 80% 100%);
  color:transparent;
  font-size:0;
}
.dash-board .metric-trend{
  white-space:nowrap;
}
.dash-board .metric-value{
  font-size:34px;
  margin:28px 0 22px;
}
.dash-board .metric-chart{
  height:78px;
}
.dash-board .metric-card input,
.dash-board .metric-card select{
  width:100%;
  border:1px solid #d8dee8;
  border-radius:8px;
  padding:8px;
  margin-top:8px;
  background:#fff;
}
.dash-board.edit-mode .metric-card{
  min-height:380px;
}
@media(max-width:980px){
  .metric-section-head,
  .dash-topbar{align-items:flex-start; flex-direction:column;}
  .dash-board{padding:24px;}
}

/* Produccion */
.production-tabs{
  margin-bottom:22px;
}
.production-kpis{
  display:grid;
  grid-template-columns:repeat(4, minmax(150px, 1fr));
  gap:14px;
  margin:10px 0 24px;
}
.production-kpi{
  background:#fff;
  border:1px solid #eee;
  border-radius:12px;
  padding:16px;
  box-shadow:0 8px 20px rgba(84,19,1,.08);
}
.production-kpi span{
  color:#666;
  display:block;
  font-size:12px;
  font-weight:800;
}
.production-kpi strong{
  color:#541301;
  display:block;
  font-size:24px;
  margin-top:8px;
}
.production-main-card{
  cursor:pointer;
}
.production-state-flow{
  display:grid;
  grid-template-columns:repeat(3, minmax(180px, 1fr));
  gap:18px;
}
.state-flow-card{
  background:#fff;
  border:1px solid #eee;
  border-radius:14px;
  box-shadow:0 8px 20px rgba(84,19,1,.08);
  color:#541301;
  cursor:pointer;
  display:grid;
  gap:10px;
  min-height:146px;
  padding:20px;
  text-align:left;
  transition:.18s;
}
.state-flow-card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 34px rgba(84,19,1,.14);
}
.state-flow-card span{
  color:#999;
  font-size:13px;
  font-weight:900;
}
.state-flow-card strong{
  font-size:24px;
}
.state-flow-card b{
  color:#541301;
  display:block;
  font-size:52px;
  line-height:1;
}
.state-flow-card em{
  color:#666;
  font-style:normal;
  font-weight:800;
}
.control-orders-flow .state-flow-card{
  min-height:180px;
}
.production-card-metrics{
  display:grid;
  gap:8px;
  margin-top:16px;
}
.production-card-metrics div{
  align-items:center;
  background:#fff7e8;
  border:1px solid #d6d6c0;
  border-radius:10px;
  display:flex;
  justify-content:space-between;
  padding:9px 10px;
}
.production-card-metrics span{
  color:#666;
}
.production-card-metrics strong{
  color:#541301;
}
.kanban-board{
  display:grid;
  grid-template-columns:repeat(7, minmax(170px, 1fr));
  gap:14px;
  margin-top:24px;
  overflow:auto;
  padding-bottom:8px;
}
.kanban-column{
  background:#fff;
  border:1px solid #eee;
  border-radius:14px;
  min-height:420px;
  padding:14px;
}
.kanban-column h3{
  color:#541301;
  font-size:16px;
  margin-bottom:12px;
}
.kanban-drop{
  display:grid;
  gap:10px;
  min-height:340px;
}
.kanban-card{
  background:#fff7e8;
  border:2px solid #d6d6c0;
  border-radius:12px;
  cursor:grab;
  display:grid;
  gap:6px;
  padding:12px;
}
.kanban-card strong{
  color:#541301;
}
.kanban-card span,
.kanban-card small{
  color:#666;
}
.workflow-card{
  background:#fff;
  border:1px solid #eee;
  border-radius:14px;
  box-shadow:0 8px 20px rgba(84,19,1,.08);
  margin-top:14px;
  padding:18px;
}
.workflow-card h3{
  margin-bottom:14px;
}
.quality-list{
  display:grid;
  gap:14px;
}
.checklist{
  display:grid;
  gap:10px;
}
.checklist label{
  background:#fff7e8;
  border:1px solid #d6d6c0;
  border-radius:10px;
  color:#541301;
  font-weight:800;
  padding:10px;
}
.inline-input{
  border:1px solid #d6d6c0;
  border-radius:8px;
  padding:8px;
  width:100%;
}
.content{
  min-width:0;
}
.production-view.b2b-table{
  max-width:100%;
  overflow:hidden;
}
.production-page #view-estado-lista{
  margin-left:-10px;
  min-height:690px;
  padding:28px;
  width:calc(100% + 20px);
}
.production-page #view-estado-lista .control-orders-grid-wrap{
  min-height:560px;
}
.production-view .simple-table{
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:10px;
  scrollbar-color:#541301 #fff7e8;
}
.production-view .simple-row{
  font-size:12px;
  gap:8px;
  min-width:100%;
  padding:10px;
  width:max-content;
}
.production-view .simple-row span{
  display:block;
  min-width:0;
  overflow-wrap:anywhere;
  width:100%;
}
.production-view .simple-row span small{
  color:#777;
  display:block;
  font-size:11px;
  font-weight:800;
  margin-top:4px;
}
.control-order-row{
  cursor:pointer;
}
.control-order-row:hover{
  background:#fff7e8;
}
.state-list-toolbar{
  align-items:center;
  display:flex;
  justify-content:flex-start;
  margin:-6px 0 14px;
}
.state-view-toggle{
  align-items:center;
  background:#fff7e8;
  border:2px solid #541301;
  border-radius:14px;
  display:inline-flex;
  gap:6px;
  padding:5px;
}
.state-view-toggle .btn-dark,
.state-view-toggle .btn-light{
  border-radius:10px;
  min-height:38px;
  padding:8px 12px;
}
.control-orders-grid-wrap{
  min-height:514px;
  overflow-x:visible !important;
  overflow-y:auto !important;
}
.control-orders-grid{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
}
.control-order-card{
  background:#fff;
  border:2px solid #541301;
  border-radius:14px;
  box-shadow:3px 3px 0 rgba(84, 19, 1, .18);
  color:#541301;
  cursor:pointer;
  display:grid;
  gap:9px;
  min-height:0;
  padding:13px;
  transition:.15s;
}
.control-order-card:hover{
  background:#fff7e8;
  box-shadow:4px 4px 0 #541301;
  transform:translate(-1px,-1px);
}
.control-order-card:focus-visible{
  outline:3px solid #ffd21f;
  outline-offset:3px;
}
.control-order-card-head{
  align-items:center;
  display:flex;
  gap:10px;
  justify-content:space-between;
}
.control-order-card-head span,
.control-order-card-meta span{
  color:#777;
  display:block;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
}
.control-order-card-head strong{
  color:#541301;
  display:block;
  font-size:15px;
  line-height:1.3;
  margin-top:3px;
}
.control-order-card-main{
  display:grid;
  gap:4px;
}
.control-order-card-main p{
  color:#541301;
  display:-webkit-box;
  font-size:12px;
  font-weight:800;
  line-height:1.35;
  min-height:32px;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.control-order-card-meta{
  color:#777;
  display:flex;
  font-size:11px;
  font-weight:800;
  gap:8px;
  justify-content:space-between;
}
.control-order-card-foot{
  align-items:center;
  border-top:1px solid #d6d6c0;
  display:flex;
  gap:8px;
  justify-content:space-between;
  padding-top:8px;
}
.control-order-card-foot small{
  color:#777;
  font-size:10px;
  font-weight:800;
}
.control-order-card-foot strong{
  color:#541301;
  font-size:11px;
}
.production-view .simple-head span{
  white-space:normal;
}
.production-view .inline-input{
  box-sizing:border-box;
  min-width:92px;
  max-width:100%;
  padding:7px;
}
.production-view .simple-row input,
.production-view .simple-row select{
  box-sizing:border-box;
  font-size:12px;
  min-width:0;
  width:100%;
}
.detail-title-row{
  align-items:center;
  display:flex;
  justify-content:space-between;
  gap:18px;
  margin-bottom:20px;
}
.detail-actions{
  align-items:center;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}
.btn-danger{
  align-items:center;
  background:#8f1d12;
  border:3px solid #541301;
  border-radius:14px;
  color:#fff;
  cursor:pointer;
  display:inline-flex;
  font-weight:900;
  justify-content:center;
  padding:13px 18px;
}
.production-detail-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(240px, 1fr));
  gap:18px;
}
.detail-section{
  background:#fff;
  border:1px solid #eee;
  border-radius:14px;
  box-shadow:0 8px 20px rgba(84,19,1,.08);
  padding:18px;
}
.detail-section h3{
  margin-bottom:12px;
}
.detail-section h4{
  color:#541301;
  font-size:13px;
  margin:12px 0 8px;
}
.detail-section label{
  color:#541301;
  display:grid;
  font-size:13px;
  font-weight:900;
  gap:7px;
  margin-bottom:12px;
}
.detail-section input,
.detail-section select,
.detail-section textarea{
  border:1px solid #d6d6c0;
  border-radius:10px;
  padding:10px;
  width:100%;
}
.detail-section textarea{
  min-height:90px;
  resize:vertical;
}
.file-stack{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.file-chip{
  background:#fff7e8;
  border:1px solid #d6d6c0;
  border-radius:999px;
  color:#541301;
  display:inline-flex;
  font-size:12px;
  font-weight:900;
  margin:2px;
  max-width:150px;
  overflow-wrap:anywhere;
  padding:6px 9px;
}
.file-chip small{
  color:#777;
  display:block;
  font-size:10px;
  margin-top:2px;
  width:100%;
}
.file-upload-btn{
  background:#fff;
  border:2px solid #541301;
  border-radius:12px;
  color:#541301;
  cursor:pointer;
  display:grid;
  gap:2px;
  min-height:46px;
  padding:8px 10px;
  text-align:left;
}
.file-upload-btn input{
  display:none;
}
.file-upload-btn span{
  font-size:13px;
  font-weight:900;
  line-height:1.1;
}
.file-upload-btn small{
  color:#777;
  font-size:11px;
  font-weight:800;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.production-upload-box{
  background:#fff7e8;
  border:2px dashed #541301;
  border-radius:16px;
  display:grid;
  gap:10px;
  margin:10px 0 14px;
  padding:12px;
}
.production-upload-box h4{
  margin:0;
}
.production-upload-results{
  display:grid;
  gap:8px;
  margin:8px 0 14px;
}
.production-upload-results h4{margin:0;}
.production-upload-results-head{
  align-items:center;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:space-between;
}
.production-download-all{
  display:inline-flex;
  font-size:11px;
  justify-content:center;
  text-decoration:none;
}
.design-linked-card .design-card-mockups{
  border-top:2px dashed rgba(84,19,1,.28);
  display:grid;
  gap:8px;
  margin-top:4px;
  padding-top:10px;
}
.design-linked-card .design-card-mockups .production-upload-results-head{
  display:flex;
}
.design-linked-card .design-card-mockups .file-stack{
  display:flex;
  justify-content:flex-start;
}
.design-linked-card .design-card-mockups .production-asset-tile{
  display:grid;
  grid-template-columns:auto minmax(100px,1fr) auto auto;
  justify-content:initial;
}
.production-upload-controls{
  align-items:stretch;
  display:grid;
  gap:10px;
  grid-template-columns:repeat(3, minmax(0, 1fr));
}
.production-folder-upload-controls{
  grid-template-columns:minmax(0, 2fr) minmax(160px, 1fr);
}
.production-upload-controls .btn-dark{
  width:100%;
}
.production-file-chip{
  background:#fff;
  border-color:#541301;
  gap:5px;
  max-width:220px;
}
.production-asset-tile{
  background:#fff;
  border:2px solid #541301;
  border-radius:14px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  min-width:210px;
  overflow:hidden;
  position:relative;
}
.production-asset-tile .production-folder-card{
  border:0;
  border-radius:0;
  box-shadow:none;
}
.production-asset-delete{
  align-self:start;
  background:#ffe1dc;
  border:2px solid #541301;
  border-radius:50%;
  color:#8a1d1d;
  cursor:pointer;
  font-size:18px;
  font-weight:950;
  height:30px;
  line-height:24px;
  margin:8px;
  padding:0;
  width:30px;
}
.production-asset-delete:hover{background:#ffb9ad;}
.production-mockup-tile{
  align-items:center;
  gap:8px;
  grid-template-columns:auto minmax(100px,1fr) auto auto;
  padding:8px;
}
.production-mockup-icon{
  align-items:center;
  background:#ffd166;
  border:2px solid #541301;
  border-radius:8px;
  display:flex;
  font-size:24px;
  height:42px;
  justify-content:center;
  width:42px;
}
.design-card-mockups .production-mockup-tile:nth-child(8n + 1){background:#fff1a8;}
.design-card-mockups .production-mockup-tile:nth-child(8n + 1) .production-mockup-icon{background:#ffd21f;}
.design-card-mockups .production-mockup-tile:nth-child(8n + 2){background:#dff6dd;}
.design-card-mockups .production-mockup-tile:nth-child(8n + 2) .production-mockup-icon{background:#9be28f;}
.design-card-mockups .production-mockup-tile:nth-child(8n + 3){background:#dceeff;}
.design-card-mockups .production-mockup-tile:nth-child(8n + 3) .production-mockup-icon{background:#8bc8ff;}
.design-card-mockups .production-mockup-tile:nth-child(8n + 4){background:#ffe0ea;}
.design-card-mockups .production-mockup-tile:nth-child(8n + 4) .production-mockup-icon{background:#ff9bbb;}
.design-card-mockups .production-mockup-tile:nth-child(8n + 5){background:#eadfff;}
.design-card-mockups .production-mockup-tile:nth-child(8n + 5) .production-mockup-icon{background:#bda0f4;}
.design-card-mockups .production-mockup-tile:nth-child(8n + 6){background:#ffe5c4;}
.design-card-mockups .production-mockup-tile:nth-child(8n + 6) .production-mockup-icon{background:#ffb866;}
.design-card-mockups .production-mockup-tile:nth-child(8n + 7){background:#d9f5f0;}
.design-card-mockups .production-mockup-tile:nth-child(8n + 7) .production-mockup-icon{background:#78d8c7;}
.design-card-mockups .production-mockup-tile:nth-child(8n){background:#ece9e6;}
.design-card-mockups .production-mockup-tile:nth-child(8n) .production-mockup-icon{background:#c9c0ba;}
.production-asset-name{
  display:grid;
  font-size:12px;
  font-weight:900;
  overflow-wrap:anywhere;
}
.production-asset-name small{color:#777;font-size:10px;}
.production-folder-card{
  background:#fff;
  border:2px solid #541301;
  border-radius:14px;
  box-shadow:3px 3px 0 rgba(84, 19, 1, .18);
  color:#541301;
  cursor:pointer;
  display:flex;
  flex:1 1 100%;
  gap:12px;
  min-height:86px;
  padding:0;
  text-align:left;
  width:100%;
}
.production-folder-card:hover{
  transform:translateY(-1px);
}
.production-folder-icon{
  align-self:center;
  background:#ffd166;
  border:2px solid #541301;
  border-radius:4px 6px 6px 6px;
  box-shadow:2px 2px 0 #541301;
  display:block;
  height:42px;
  margin-left:12px;
  position:relative;
  width:56px;
}
.production-folder-icon::before{
  background:#ffd166;
  border:2px solid #541301;
  border-bottom:0;
  border-radius:4px 4px 0 0;
  content:"";
  height:12px;
  left:4px;
  position:absolute;
  top:-13px;
  width:26px;
}
.production-folder-meta{
  align-self:center;
  display:grid;
  gap:3px;
  padding:12px 12px 12px 0;
}
.production-folder-meta small{
  color:#777;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
}
.production-folder-meta strong{
  color:#541301;
  font-size:16px;
}
.production-folder-meta em{
  color:#777;
  font-size:12px;
  font-style:normal;
  font-weight:800;
}
.production-folder-modal{
  max-width:760px;
}
.production-folder-modal-files{
  display:grid;
  gap:10px;
}
.production-folder-file{
  background:#fff7e8;
  border:1px solid #d6d6c0;
  border-radius:12px;
  display:grid;
  gap:10px;
  padding:12px;
}
.production-folder-file-head{
  align-items:center;
  display:flex;
  gap:12px;
  justify-content:space-between;
}
.production-folder-file-head strong{
  color:#541301;
  display:block;
}
.production-folder-file-head small{
  color:#777;
  display:block;
  font-size:11px;
  font-weight:800;
  margin-top:2px;
}
.production-folder-file label{
  color:#541301;
  display:grid;
  font-size:12px;
  font-weight:900;
  gap:5px;
}
.production-folder-file input{
  border:1px solid #d6d6c0;
  border-radius:8px;
  padding:8px;
}
.production-folder-file-actions{
  justify-content:flex-end;
}
.approval-note{
  background:#fff7e8;
  border:1px solid #d6d6c0;
  border-radius:12px;
  color:#541301;
  margin-bottom:12px;
  padding:12px;
}
.approval-note strong{
  display:block;
  margin-bottom:6px;
}
.approval-note p{
  color:#666;
  line-height:1.35;
}
.design-linked-list{
  display:grid;
  gap:10px;
}
.design-linked-card{
  background:#fff7e8;
  border:1px solid #d6d6c0;
  border-radius:12px;
  display:grid;
  gap:8px;
  padding:12px;
}
.design-linked-card strong{
  color:#541301;
  font-size:15px;
}
.design-linked-card div{
  align-items:center;
  display:flex;
  justify-content:space-between;
  gap:12px;
}
.design-linked-card span{
  color:#777;
  font-size:12px;
  font-weight:900;
}
.design-linked-card b{
  color:#541301;
  font-size:13px;
  text-align:right;
}
.production-design-card{
  border:2px solid rgba(84,19,1,.18);
  gap:12px;
}
.production-design-card div{
  align-items:initial;
  display:initial;
  justify-content:initial;
}
.production-design-head,
.production-design-file-row{
  align-items:center !important;
  display:flex !important;
  gap:12px !important;
  justify-content:space-between !important;
}
.production-design-head small{
  color:#777;
  display:block;
  font-size:12px;
  font-weight:800;
  margin-top:3px;
}
.production-design-download{
  flex:0 0 auto;
}
.production-design-file-row{
  background:#fff;
  border:1px solid #d6d6c0;
  border-radius:10px;
  padding:9px 10px;
}
.production-design-file-row b{
  overflow-wrap:anywhere;
}
.production-design-grid{
  display:grid !important;
  gap:8px !important;
  grid-template-columns:repeat(2, minmax(0, 1fr));
}
.production-design-grid div,
.shopify-attribute-list div{
  align-items:center !important;
  background:#fff;
  border:1px solid rgba(214,214,192,.75);
  border-radius:10px;
  display:flex !important;
  gap:10px !important;
  justify-content:space-between !important;
  min-height:38px;
  padding:8px 10px;
}
.production-design-grid b,
.shopify-attribute-list b{
  overflow-wrap:anywhere;
}
.shopify-attribute-list{
  display:grid;
  gap:8px;
}
.shopify-attribute-list > strong{
  font-size:13px;
}
.shipping-section{
  grid-column:1/-1;
}
.shipping-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(180px, 1fr));
  gap:12px;
}
.shipping-grid label{
  margin-bottom:0;
}
.guide-upload{
  max-width:260px;
}
.production-view .advanced-toolbar{
  grid-template-columns:repeat(4, minmax(130px, 1fr));
}
.production-view .table-toolbar{
  max-width:100%;
}
@media(max-width:1100px){
  .production-kpis{
    grid-template-columns:repeat(2, 1fr);
  }
  .production-state-flow,
  .production-detail-grid{
    grid-template-columns:1fr 1fr;
  }
  .shipping-grid{
    grid-template-columns:repeat(2, minmax(160px, 1fr));
  }
  .production-view .advanced-toolbar{
    grid-template-columns:repeat(2, minmax(150px, 1fr));
  }
}
@media(max-width:700px){
  .production-kpis{
    grid-template-columns:1fr;
  }
  .production-state-flow,
  .production-detail-grid{
    grid-template-columns:1fr;
  }
  .shipping-grid{
    grid-template-columns:1fr;
  }
  .production-view .advanced-toolbar{
    grid-template-columns:1fr;
  }
  .production-design-head,
  .production-design-file-row{
    align-items:stretch !important;
    flex-direction:column;
  }
  .production-design-grid{
    grid-template-columns:1fr;
  }
}

/* Clientes */
.client-summary-card h2{
  margin-bottom:14px;
}
.client-metrics{
  display:grid;
  gap:10px;
  margin:16px 0;
}
.client-metrics div{
  align-items:center;
  background:#fff7e8;
  border:1px solid #d6d6c0;
  border-radius:10px;
  display:flex;
  justify-content:space-between;
  padding:11px 12px;
}
.client-metrics span{
  color:#666;
  font-weight:800;
}
.client-metrics strong{
  color:#541301;
  font-size:20px;
}
.client-form{
  max-width:980px;
}
.client-form h3{
  border-top:1px solid rgba(84,19,1,.14);
  margin:22px 0 14px;
  padding-top:18px;
}
.client-form h3:first-of-type{
  border-top:0;
  margin-top:0;
  padding-top:0;
}
.check-field{
  align-items:center;
  background:#fff7e8;
  border:2px solid #d6d6c0;
  border-radius:12px;
  color:#541301;
  display:flex;
  font-weight:900;
  gap:8px;
  padding:12px;
}
.link-button{
  background:transparent;
  border:0;
  color:#541301;
  cursor:pointer;
  font-weight:900;
  padding:0;
  text-align:left;
}
.profile-header{
  align-items:center;
  display:flex;
  justify-content:space-between;
  gap:18px;
  margin-bottom:22px;
}
.profile-line{
  align-items:flex-start;
  border-bottom:1px solid rgba(84,19,1,.12);
  display:flex;
  gap:14px;
  justify-content:space-between;
  padding:10px 0;
}
.profile-line span{
  color:#777;
  font-weight:800;
}
.profile-line strong{
  color:#541301;
  text-align:right;
}
.production-page .profile-line.production-vendor-b2b,
.production-page .profile-line.production-vendor-shopify{
  border:0;
  padding:9px 10px;
}
.production-page .profile-line.production-vendor-b2b{
  background:linear-gradient(90deg, transparent 0%, rgba(226,196,103,.82) 16%, rgba(226,196,103,.82) 84%, transparent 100%);
}
.production-page .profile-line.production-vendor-shopify{
  background:linear-gradient(90deg, transparent 0%, rgba(149,191,71,.9) 16%, rgba(149,191,71,.9) 84%, transparent 100%);
}
.production-page .profile-line.production-vendor-b2b span,
.production-page .profile-line.production-vendor-shopify span{
  color:var(--cs-dark);
}
.text-action{
  background:transparent;
  border:0;
  color:#541301;
  cursor:pointer;
  font-size:12px;
  font-weight:900;
  padding:0;
  text-decoration:underline;
}
.inline-download{
  margin-left:6px;
}
.file-chip{
  align-items:center;
  gap:7px;
  max-width:260px;
}
.client-file-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:12px;
  margin:12px 0 22px;
}
.client-file-card{
  background:#fff7e8;
  border:1px solid #d6d6c0;
  border-radius:12px;
  display:grid;
  gap:6px;
  padding:12px;
}

#tablaClientes{
  max-height:min(68vh, 760px);
  padding:0;
}

.clients-focused-list{
  min-width:980px;
}

.clients-focused-head,
.client-focused-row{
  align-items:center;
  display:grid;
  grid-template-columns:minmax(260px, 1.45fr) minmax(220px, 1.1fr) minmax(150px, .72fr) minmax(150px, .78fr) minmax(120px, .58fr);
  gap:14px;
}

.clients-focused-head{
  background:#541301;
  color:#fff;
  font-size:12px;
  font-weight:900;
  letter-spacing:0;
  padding:13px 18px 13px 54px;
  position:sticky;
  text-transform:uppercase;
  top:0;
  z-index:4;
}

.client-focused-row{
  background:#fff;
  border-bottom:1px solid rgba(84,19,1,.14);
  min-height:82px;
  padding:12px 18px 12px 14px;
  position:relative;
  transition:background .15s ease;
}

.client-focused-row:nth-child(odd){
  background:#fffaf0;
}

.client-focused-row:hover{
  background:#fff1cf;
}

.client-select-cell{
  left:16px;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
}

.client-focused-row > div:not(.client-select-cell){
  min-width:0;
}

.client-name-button{
  background:transparent;
  border:0;
  color:#541301;
  cursor:pointer;
  display:block;
  font-size:15px;
  font-weight:900;
  letter-spacing:0;
  line-height:1.2;
  overflow:hidden;
  padding:0;
  text-align:left;
  text-overflow:ellipsis;
  white-space:nowrap;
  width:100%;
}

.client-name-button:hover{
  text-decoration:underline;
}

.client-row-sub,
.client-contact-cell span,
.client-money-cell span,
.client-activity-cell span{
  color:#6f6259;
  display:block;
  font-size:12px;
  font-weight:800;
  margin-top:4px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.client-tag-line{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:7px;
  max-height:24px;
  overflow:hidden;
}

.client-tag-line span{
  background:#e9f6dc;
  border:1px solid rgba(84,19,1,.16);
  border-radius:999px;
  color:#541301;
  font-size:11px;
  font-weight:900;
  padding:3px 7px;
}

.client-contact-cell strong,
.client-activity-cell strong{
  color:#2f2b28;
  display:block;
  font-size:13px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.client-money-cell strong{
  color:#0f6b3e;
  display:block;
  font-size:16px;
  font-weight:900;
  white-space:nowrap;
}

.client-status-cell{
  align-items:flex-start;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.client-status-pill{
  border:2px solid #541301;
  border-radius:999px;
  color:#541301;
  display:inline-flex;
  font-size:12px;
  font-weight:900;
  justify-content:center;
  min-width:78px;
  padding:5px 9px;
}

.client-status-pill.active{
  background:#b7e4c7;
}

.client-status-pill.inactive{
  background:#f3d0c8;
}

.client-row-edit{
  font-size:12px;
  padding:7px 10px;
}
.clients-pagination{
  align-items:center;
  background:#fff7e8;
  border-top:3px solid #541301;
  bottom:0;
  color:#541301;
  display:flex;
  gap:16px;
  justify-content:space-between;
  min-width:980px;
  padding:12px 16px;
  position:sticky;
  z-index:4;
}
.clients-pagination > div{
  align-items:center;
  display:flex;
  gap:10px;
}
.clients-pagination span,
.clients-pagination strong{
  font-size:12px;
  font-weight:900;
}
.clients-pagination button{
  padding:7px 11px;
}
.clients-pagination button:disabled{
  cursor:not-allowed;
  opacity:.45;
}
.client-file-card strong{
  color:#541301;
}
.client-file-card span,
.client-file-card small{
  color:#666;
  font-weight:800;
}
.settings-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:18px 0 22px;
}
.settings-tabs.compact-tabs{
  margin-top:0;
  background:#f3f3ee;
  border:1px solid #deded3;
  border-radius:12px;
  display:inline-flex;
  gap:4px;
  padding:4px;
}
.settings-tabs.compact-tabs .btn-dark,
.settings-tabs.compact-tabs .btn-light{
  background:transparent;
  border:1px solid transparent;
  border-radius:9px;
  box-shadow:none;
  color:#666;
  font-size:12px;
  min-height:0;
  padding:7px 11px;
}
.settings-tabs.compact-tabs .btn-dark{
  background:#fff;
  border-color:#d6d6c0;
  color:#541301;
}
.settings-card.wide-card{
  margin-bottom:22px;
  max-width:none;
}
.settings-form-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(180px, 1fr));
  gap:14px;
}
.settings-form-grid label{
  color:#541301;
  display:grid;
  font-size:13px;
  font-weight:900;
  gap:7px;
}
.settings-form-grid .full{
  grid-column:1/-1;
}
.finance-import-modal{
  max-width:920px;
}
.finance-import-help{
  display:grid;
  gap:12px;
  margin-bottom:14px;
}
.finance-import-sample{
  border:2px solid #541301;
  border-radius:12px;
  max-width:100%;
  overflow:auto;
}
.finance-import-sample .simple-row{
  min-width:900px;
}
.finance-import-upload{
  background:#fff7e8;
  border:1px solid #d6d6c0;
  border-radius:12px;
  display:grid;
  gap:8px;
  padding:12px;
}
.finance-import-upload label{
  color:#541301;
  display:grid;
  font-size:13px;
  font-weight:900;
  gap:7px;
}
.finance-import-upload .is-error{
  color:#8f1d12;
  font-weight:900;
}
.finance-expense-catalog-modal{max-width:1000px;width:min(95vw,1000px)}
.finance-expense-catalog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:18px}
.finance-expense-catalog-group{border:1px solid #e2d9d5;border-radius:14px;padding:14px;min-width:0}
.finance-expense-catalog-group h3{color:#541301;margin:0 0 10px}
.finance-expense-catalog-list{display:grid;gap:8px;max-height:280px;overflow:auto}
.finance-expense-catalog-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px}
.finance-expense-catalog-row input{border:1px solid #d8cfcc;border-radius:9px;font:inherit;min-width:0;padding:9px}
.finance-expense-catalog-row span{color:#76645f;font-size:11px;white-space:nowrap}
@media(max-width:760px){.finance-expense-catalog-grid{grid-template-columns:1fr}.finance-expense-catalog-row{grid-template-columns:minmax(0,1fr) auto}.finance-expense-catalog-row span{grid-column:1/-1;grid-row:2}}
.acabado-material-field{
  display:grid;
  gap:8px;
}
.acabado-material-field > span{
  color:#541301;
  font-size:13px;
  font-weight:900;
}
.acabado-material-options{
  display:grid;
  gap:8px;
  max-height:300px;
  overflow:auto;
  padding:2px 4px 2px 0;
}
.acabado-material-option{
  align-items:center;
  background:#fff;
  border:2px solid #d6d6c0;
  border-radius:12px;
  cursor:pointer;
  display:grid;
  gap:10px;
  grid-template-columns:28px minmax(0, 1fr) auto;
  padding:10px;
  transition:.16s ease;
}
.acabado-material-option:hover,
.acabado-material-option.is-selected{
  border-color:#541301;
  box-shadow:3px 3px 0 #d6d6c0;
}
.acabado-material-option.is-selected{
  background:#fff7e8;
}
.acabado-material-option input{
  opacity:0;
  pointer-events:none;
  position:absolute;
}
.acabado-material-check{
  align-items:center;
  background:#fff;
  border:2px solid #541301;
  border-radius:8px;
  display:flex;
  height:26px;
  justify-content:center;
  position:relative;
  width:26px;
}
.acabado-material-check::after{
  border:solid #541301;
  border-width:0 3px 3px 0;
  content:"";
  height:12px;
  opacity:0;
  transform:rotate(45deg) scale(.65);
  transition:.14s ease;
  width:6px;
}
.acabado-material-option.is-selected .acabado-material-check{
  background:#ffd21f;
}
.acabado-material-option.is-selected .acabado-material-check::after{
  opacity:1;
  transform:rotate(45deg) scale(1);
}
.acabado-material-copy{
  display:grid;
  gap:2px;
  min-width:0;
}
.acabado-material-copy strong{
  color:#541301;
  font-size:14px;
  line-height:1.2;
  overflow-wrap:anywhere;
}
.acabado-material-copy small,
.acabado-material-price{
  color:#66554d;
  font-size:12px;
  font-weight:900;
}
.acabado-material-price{
  background:#fff7e8;
  border:2px solid #d6d6c0;
  border-radius:999px;
  padding:6px 8px;
  white-space:nowrap;
}
.settings-form-grid textarea{
  border:2px solid #d6d6c0;
  border-radius:12px;
  min-height:82px;
  padding:12px;
  resize:vertical;
}
.settings-actions-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(140px, 1fr));
  gap:10px;
}
.settings-actions-grid select{
  border:2px solid #d6d6c0;
  border-radius:12px;
  padding:12px;
}
.settings-table{
  overflow:auto;
}
.settings-table .simple-row{
  min-width:760px;
}
.meter-tier-section{
  padding:16px;
  border-bottom:2px solid rgba(84,19,1,.16);
}
.meter-tier-section:last-child{
  border-bottom:0;
}
.compact-title-row{
  margin-bottom:12px;
}
.backup-status-success{
  background:#b7e4c7;
  border:3px solid #541301;
  border-radius:14px;
  color:#541301;
  margin-top:16px;
}
.backup-status-error{
  background:#fff0f0;
  border:3px solid #541301;
  border-radius:14px;
  color:#541301;
  margin-top:16px;
}
.backup-status-loading{
  background:#fff7e8;
  border:3px dashed #541301;
  border-radius:14px;
  color:#541301;
  margin-top:16px;
}
.detail-panel{
  background:#fff7e8;
  border:1px solid #d6d6c0;
  border-radius:14px;
  margin-top:18px;
  padding:16px;
}
.section-title-row{
  align-items:flex-start;
  display:flex;
  gap:18px;
  justify-content:space-between;
  margin-bottom:16px;
}
.section-title-row p{
  margin-bottom:0;
}
.settings-modal{
  bottom:0;
  left:0;
  position:fixed;
  right:0;
  top:0;
  z-index:50;
}
.settings-modal-backdrop{
  background:rgba(0,0,0,.42);
  bottom:0;
  left:0;
  position:absolute;
  right:0;
  top:0;
}
.settings-modal-card{
  background:#fff;
  border:3px solid #541301;
  border-radius:18px;
  box-shadow:10px 10px 0 rgba(84,19,1,.18);
  left:50%;
  max-height:86vh;
  max-width:760px;
  overflow:auto;
  padding:22px;
  position:absolute;
  top:50%;
  transform:translate(-50%, -50%);
  width:min(92vw, 760px);
}
.settings-modal-header{
  align-items:center;
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
}
.settings-modal-header button{
  background:transparent;
  border:0;
  color:#666;
  cursor:pointer;
  font-weight:900;
}
.modal-form{
  margin-bottom:18px;
}
.settings-modal-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}
.account-modal-card{
  max-width:520px;
}
.account-profile{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px;
  border:1px solid rgba(84,19,1,.14);
  border-radius:12px;
  background:#fff7e8;
  margin-bottom:14px;
}
.account-profile .account-avatar{
  width:46px;
  height:46px;
  font-size:15px;
}
.account-profile strong{
  display:block;
  color:#541301;
  font-size:18px;
}
.account-profile small{
  color:#666;
  font-weight:700;
}
.account-info-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:14px;
}
.account-info-grid div,
.account-permissions{
  border:1px solid #eadfd5;
  border-radius:10px;
  padding:12px;
  background:#fff;
}
.account-info-grid span,
.account-permissions span{
  display:block;
  color:#777;
  font-size:12px;
  font-weight:900;
  margin-bottom:5px;
}
.account-info-grid strong{
  color:#541301;
  font-size:13px;
  overflow-wrap:anywhere;
}
.account-permissions p{
  margin:0;
  color:#333;
  font-size:13px;
  line-height:1.45;
  overflow-wrap:anywhere;
}
.stock-modal-table{
  border:1px solid #eadfd5;
  border-radius:14px;
  margin:4px 0 18px;
  overflow:hidden;
}
.stock-modal-table-head{
  align-items:center;
  background:#fff7e8;
  display:flex;
  gap:12px;
  justify-content:space-between;
  padding:12px 14px;
}
.stock-modal-table-head h3{
  color:#541301;
  font-size:15px;
  margin:0;
}
.stock-modal-table-head span{
  color:#777;
  font-size:12px;
  font-weight:900;
}
.stock-modal-table-scroll{
  max-height:230px;
  overflow:auto;
}
.stock-modal-row{
  align-items:center;
  border-top:1px solid rgba(84,19,1,.12);
  display:grid;
  gap:10px;
  grid-template-columns:repeat(10, minmax(110px, 1fr));
  min-width:1160px;
  padding:10px 14px;
}
.stock-modal-row span{
  color:#333;
  font-size:12px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.stock-modal-head{
  background:#f6f7f2;
  border-top:0;
  color:#541301;
  font-weight:900;
  position:sticky;
  top:0;
  z-index:1;
}
.dash-card-popup{
  bottom:0;
  left:0;
  position:fixed;
  right:0;
  top:0;
  z-index:60;
}
.dash-card-popup-backdrop{
  background:rgba(0,0,0,.28);
  bottom:0;
  left:0;
  position:absolute;
  right:0;
  top:0;
}
.dash-card-popup-panel{
  background:#fff;
  border:2px solid #d6d6c0;
  border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.2);
  left:50%;
  max-width:420px;
  padding:18px;
  position:absolute;
  top:50%;
  transform:translate(-50%, -50%);
  width:min(92vw, 420px);
}
.dash-card-popup-head{
  align-items:flex-start;
  display:flex;
  gap:12px;
  justify-content:space-between;
  margin-bottom:14px;
}
.dash-card-popup-head h3{
  color:#541301;
  font-size:20px;
  margin-bottom:4px;
}
.dash-card-popup-head p{
  color:#777;
  font-size:13px;
}
.dash-card-popup-head button{
  background:transparent;
  border:0;
  color:#777;
  cursor:pointer;
  font-weight:900;
}
.dash-card-options{
  display:grid;
  gap:8px;
  max-height:360px;
  overflow:auto;
}
.dash-card-option{
  align-items:center;
  background:#fafaf7;
  border:1px solid #e2e2d8;
  border-radius:10px;
  cursor:pointer;
  display:grid;
  gap:3px 10px;
  grid-template-columns:16px 1fr;
  padding:10px 12px;
  text-align:left;
}
.dash-card-option:hover{
  background:#fff7e8;
  border-color:#d6d6c0;
}
.dash-card-option strong{
  color:#541301;
  font-size:14px;
}
.dash-card-option small{
  color:#777;
  font-size:12px;
  grid-column:2;
}
.stock-kpis,
.analysis-kpis{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:14px;
  margin:22px 0;
}
.stock-state{
  background:#fff7e8;
  border:1px solid #d6d6c0;
  border-radius:999px;
  color:#541301;
  display:inline-flex;
  font-size:12px;
  padding:6px 9px;
}
.clickable-row{
  cursor:pointer;
}
.clickable-row:hover{
  background:#fff7e8;
}
.analysis-content{
  background:#f7f8fa;
}
.analysis-header{
  align-items:flex-end;
  display:flex;
  gap:22px;
  justify-content:space-between;
  padding:28px 0 10px;
}
.analysis-header h1{
  color:#1f2937;
  font-size:40px;
  margin-bottom:8px;
}
.analysis-header p{
  color:#64748b;
  max-width:760px;
}
.analysis-controls{
  align-items:end;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}
.analysis-controls label{
  color:#64748b;
  display:grid;
  font-size:12px;
  font-weight:800;
  gap:5px;
}
.analysis-controls input,
.analysis-controls select,
.analysis-main-chart select{
  background:#fff;
  border:1px solid #d7dde8;
  border-radius:8px;
  color:#1f2937;
  padding:9px 10px;
}
.analysis-controls span{
  color:#64748b;
  font-size:12px;
  font-weight:800;
}
.analysis-kpi,
.analysis-card{
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:8px;
  box-shadow:0 10px 24px rgba(15,23,42,.06);
}
.analysis-kpi{
  padding:18px;
}
.analysis-kpi span{
  color:#64748b;
  font-size:13px;
  font-weight:800;
}
.analysis-kpi strong{
  color:#111827;
  display:block;
  font-size:28px;
  margin-top:8px;
}
.analysis-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.8fr) minmax(280px, .8fr);
  gap:18px;
  margin-bottom:18px;
}
.analysis-grid.two{
  grid-template-columns:1fr 1fr;
}
.analysis-grid.three{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}
.analysis-card{
  padding:18px;
  overflow:hidden;
}
.analysis-card h2{
  color:#1f2937;
  font-size:18px;
  margin-bottom:14px;
}
.analysis-breakdown{
  display:grid;
  gap:10px;
}
.analysis-breakdown div{
  align-items:center;
  border-bottom:1px solid #eef2f7;
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:8px 0;
}
.analysis-breakdown span{
  color:#64748b;
  font-weight:800;
}
.analysis-breakdown strong,
.analysis-big{
  color:#111827;
  font-size:20px;
}
.analysis-big{
  display:block;
  font-size:34px;
  margin-bottom:12px;
}
.funnel{
  align-items:center;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.funnel-step{
  align-items:center;
  background:#e8f1ff;
  border:1px solid #cfe0ff;
  border-radius:10px;
  color:#1f2937;
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:10px;
  min-width:220px;
  padding:12px 14px;
}
.funnel-step small{
  color:#2d8cff;
  font-weight:900;
}
@media(max-width:1100px){
  .analysis-header,
  .analysis-grid,
  .analysis-grid.two,
  .analysis-grid.three{
    grid-template-columns:1fr;
  }
  .analysis-header{
    align-items:stretch;
    flex-direction:column;
  }
  .analysis-controls{
    justify-content:flex-start;
  }
}

/* Cali Sticker Playful Dashboard System */
:root{
  --cs-orange:#DD4002;
  --cs-brown:#541301;
  --cs-beige:#D6D6C0;
  --cs-dark:#232521;
  --pink:#FF8FD8;
  --hot-pink:#FF4FC3;
  --yellow:#FFD21F;
  --cream:#FFF9E8;
  --blue:#75A7FF;
  --green:#7CFF9B;
  --confirmation-green:#A8E6CF;
  --black:#232521;
  --white:#FFFFFF;
  --sticker-border:3px solid var(--cs-dark);
  --sticker-border-heavy:4px solid var(--cs-dark);
  --sticker-shadow:4px 4px 0 var(--cs-dark);
  --sticker-shadow-lg:6px 6px 0 var(--cs-dark);
  --sticker-radius:18px;
  --sticker-pill:999px;
  --sticker-transition:all .15s ease;
  --table-scroll-max-height:min(62vh, 560px);
  --table-scroll-max-height-mobile:min(54vh, 430px);
}

body,
.playful-ui{
  background-color:var(--cream);
  background-image:
    linear-gradient(rgba(35,37,33,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35,37,33,.055) 1px, transparent 1px),
    radial-gradient(circle at 14px 14px, rgba(255,79,195,.14) 2px, transparent 2px);
  background-size:28px 28px, 28px 28px, 56px 56px;
  color:var(--cs-dark);
}

body::before{
  background:transparent;
}

.app{
  background:rgba(255,249,232,.96);
  border:var(--sticker-border-heavy);
  border-radius:24px;
  box-shadow:var(--sticker-shadow-lg);
}

.sidebar{
  background:var(--cs-beige);
  border-right:var(--sticker-border-heavy);
}

.brand{
  color:var(--cs-dark);
  font-weight:900;
}

.brand::after{
  content:"✦";
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  background:var(--yellow);
  border:2px solid var(--cs-dark);
  border-radius:999px;
  box-shadow:2px 2px 0 var(--cs-dark);
  transform:rotate(8deg);
}

.brand-logo{
  background:var(--white);
  border:3px solid var(--cs-dark);
  border-radius:16px;
  box-shadow:3px 3px 0 var(--cs-dark);
}

.menu{
  gap:12px;
}

.menu a,
.settings-link{
  background:var(--white);
  border:2px solid var(--cs-dark);
  border-radius:999px;
  box-shadow:3px 3px 0 var(--cs-dark);
  color:var(--cs-dark);
  font-weight:900;
  transition:var(--sticker-transition);
}

.menu a::before{
  content:"✿";
  margin-right:8px;
}

.menu a[href*="cotizador"]::before,
.menu a[href*="cotizaciones"]::before{content:"🏷";}
.menu a[href*="carrito"]::before{content:"🛒";}
.menu a[href*="produccion"]::before{content:"⚡";}
.menu a[href*="clientes"]::before{content:"♡";}
.menu a[href*="stock"]::before{content:"▣";}
.menu a[href*="analisis"]::before,
.menu a[href*="dash"]::before,
.menu a[href="../index.html"]::before{content:"★";}
.menu a[href*="configuracion"]::before,
.settings-link::before{content:"⚙"; margin-right:8px;}

.menu a:hover,
.settings-link:hover{
  background:var(--yellow);
  color:var(--cs-dark);
  transform:translate(-2px,-2px) rotate(-1deg);
  box-shadow:5px 5px 0 var(--cs-dark);
}

.menu a.active,
.menu a.active-sub{
  background:var(--cs-orange);
  color:var(--white);
}

.menu .submenu{
  border-left:3px solid var(--cs-dark);
  margin-left:18px;
}

.menu .submenu a{
  border-radius:999px;
  border:2px solid var(--cs-dark);
  box-shadow:2px 2px 0 var(--cs-dark);
}

.topbar{
  border-bottom:3px dashed var(--cs-dark);
}

.topbar p,
h1,h2,h3,
.section-title h2,
.dash-title-filter h1,
.analysis-header h1{
  color:var(--cs-dark);
  font-weight:900;
  letter-spacing:.02em;
}

.hero,
.simple-hero,
.dashboard-hero,
.analysis-header{
  background:var(--white);
  border:var(--sticker-border-heavy);
  border-radius:24px;
  box-shadow:var(--sticker-shadow-lg);
  margin:22px 0;
  padding:28px;
  position:relative;
}

.hero::after,
.simple-hero::after,
.dashboard-hero::after,
.analysis-header::after{
  content:"";
  position:absolute;
  right:18px;
  top:18px;
  width:46px;
  height:46px;
  background:var(--pink);
  border:3px solid var(--cs-dark);
  border-radius:52% 48% 46% 54%;
  box-shadow:3px 3px 0 var(--cs-dark);
  transform:rotate(12deg);
}

.hero h1{
  font-size:clamp(34px, 5vw, 56px);
  text-transform:uppercase;
}

.hero p,
.card p,
.muted,
.dashboard-config-note,
.analysis-header p{
  color:var(--cs-dark);
  font-weight:800;
}

.btn-primary,
.btn-secondary,
.btn-pink,
.btn-dark,
.btn-light,
.btn-danger,
.actions a,
.cotizador-tab,
.concentradora-tabs button,
.production-tab,
.simple-row button,
.row-actions button,
.settings-row button,
.pieza-line button,
.b2b-line button,
.mini-btn,
.users-add-button,
.icon-btn,
.login-submit{
  align-items:center;
  border:var(--sticker-border);
  border-radius:var(--sticker-pill);
  box-shadow:var(--sticker-shadow);
  cursor:pointer;
  display:inline-flex;
  font-weight:900;
  justify-content:center;
  min-height:42px;
  padding:10px 16px;
  text-decoration:none;
  transition:var(--sticker-transition);
}

.btn-primary,
.btn-dark.active,
.actions .btn-primary{
  background:var(--cs-orange);
  color:var(--white);
}

.btn-secondary,
.btn-light,
.actions .btn-secondary,
.cotizador-tab,
.mini-btn{
  background:var(--yellow);
  color:var(--cs-dark);
}

.btn-pink{
  background:var(--pink);
  color:var(--cs-dark);
}

.btn-dark,
.simple-row button,
.row-actions button{
  background:var(--cs-dark);
  color:var(--white);
}

.btn-danger,
.danger-action{
  background:var(--cs-brown);
  color:var(--white);
}

button:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-pink:hover,
.btn-dark:hover,
.btn-light:hover,
.btn-danger:hover,
.actions a:hover,
.cotizador-tab:hover,
.simple-row button:hover,
.row-actions button:hover,
.icon-btn:hover,
.text-action:hover{
  transform:translate(-2px,-2px) rotate(-1deg);
  box-shadow:var(--sticker-shadow-lg);
}

button:active,
.btn-primary:active,
.btn-secondary:active,
.btn-pink:active,
.btn-dark:active,
.btn-light:active,
.btn-danger:active,
.actions a:active,
.cotizador-tab:active,
.simple-row button:active,
.row-actions button:active,
.icon-btn:active{
  transform:translate(2px,2px);
  box-shadow:1px 1px 0 var(--cs-dark);
}

button:focus-visible,
a:focus-visible,
input:focus,
select:focus,
textarea:focus{
  outline:4px solid var(--pink);
  outline-offset:3px;
}

.card,
.panel,
.widget,
.kpi-card,
.summary-card,
.mini-dashboard-card,
.settings-card,
.b2b-card,
.b2b-table,
.b2b-dashboard,
.metric-card,
.analysis-card,
.analysis-kpi,
.users-summary-card,
.users-toolbar,
.users-table-card,
.chart-card,
.detail-section,
.workflow-card,
.kanban-column,
.production-kpi,
.state-flow-card,
.stock-state,
.client-file-card,
.dash-card-popup-panel,
.settings-modal-card,
.login-panel{
  background:var(--white);
  border:var(--sticker-border);
  border-radius:var(--sticker-radius);
  box-shadow:5px 5px 0 var(--cs-dark);
  color:var(--cs-dark);
  position:relative;
}

.card::after,
.metric-card::after,
.mini-dashboard-card::after,
.settings-card::after,
.b2b-card::after,
.production-kpi::after,
.analysis-kpi::after{
  content:"";
  position:absolute;
  right:14px;
  top:14px;
  width:18px;
  height:18px;
  background:var(--yellow);
  border:2px solid var(--cs-dark);
  border-radius:999px;
}

.card-pink{background:var(--pink);}
.card-yellow{background:var(--yellow);}
.card-orange{background:var(--cs-orange); color:var(--white);}
.card-cream{background:var(--cream);}

.card:hover,
.subnav-card:hover,
.metric-card:hover,
.production-kpi:hover,
.state-flow-card:hover,
.kanban-card:hover{
  transform:translate(-2px,-2px) rotate(-1deg);
  box-shadow:7px 7px 0 var(--cs-dark);
}

.summary-card.dark,
.big-kpi{
  background:var(--cs-dark);
  border:var(--sticker-border);
  border-radius:24px;
  box-shadow:5px 5px 0 var(--cs-dark);
  color:var(--white);
}

.summary-metrics,
.custom-metrics,
.stock-kpis,
.analysis-kpis,
.production-kpis{
  gap:18px;
}

.metric-card:nth-child(odd),
.production-kpi:nth-child(odd),
.analysis-kpi:nth-child(odd){
  transform:rotate(-1deg);
}

.metric-card:nth-child(even),
.production-kpi:nth-child(even),
.analysis-kpi:nth-child(even){
  transform:rotate(1deg);
}

.metric-value,
.production-kpi strong,
.analysis-kpi strong,
.big-kpi strong,
.kpi strong{
  color:var(--cs-dark);
  font-weight:900;
}

.big-kpi strong,
.summary-card.dark h2{
  color:var(--white);
}

.simple-table,
.users-console-table,
.settings-table,
.stock-modal-table{
  background:var(--white);
  border:var(--sticker-border);
  border-radius:18px;
  overflow:auto;
}

.simple-table,
.b2b-list,
.settings-table,
.users-console-table,
.stock-modal-table-scroll{
  max-height:var(--table-scroll-max-height);
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-color:var(--cs-dark) var(--cream);
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}

#stock-viniles #tablaViniles,
#stock-tintas #tablaTintas,
.production-view .simple-table,
.shopify-table-card .simple-table{
  max-height:var(--table-scroll-max-height);
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}

.simple-table .simple-head,
.settings-table .simple-head,
.b2b-list .b2b-row.header,
.stock-modal-table-scroll .stock-modal-head,
.users-console-table thead th{
  position:sticky;
  top:0;
  z-index:5;
}

.simple-table .simple-head,
.settings-table .simple-head,
.b2b-list .b2b-row.header,
.stock-modal-table-scroll .stock-modal-head{
  box-shadow:0 3px 0 var(--cs-dark);
}

.stock-modal-table-scroll{
  max-height:min(40vh, 300px);
}

.simple-head,
.users-console-table th,
.stock-modal-head,
.b2b-row.header{
  background:var(--cs-dark);
  color:var(--white);
  font-weight:900;
  text-transform:uppercase;
}

.simple-row,
.b2b-row,
.users-console-table td,
.stock-modal-row{
  border-bottom:2px solid var(--cs-dark);
}

.simple-row:not(.simple-head):hover,
.b2b-row:not(.header):hover,
.users-console-table tr:hover,
.clickable-row:hover{
  background:rgba(255,210,31,.32);
}

input,
select,
textarea,
.inline-input,
.b2b-field input,
.b2b-field select,
.b2b-field textarea,
.settings-card input,
.settings-form-grid textarea,
.dash-controls select,
.dash-controls input[type="date"],
.analysis-controls input,
.analysis-controls select,
.analysis-main-chart select,
.detail-section input,
.detail-section select,
.detail-section textarea{
  background:var(--white);
  border:3px solid var(--cs-dark);
  border-radius:14px;
  color:var(--cs-dark);
  font-weight:800;
  min-height:42px;
  transition:var(--sticker-transition);
}

select{
  appearance:auto;
}

label,
.b2b-field label,
.settings-form-grid label,
.analysis-controls label,
.detail-section label{
  color:var(--cs-dark);
  font-weight:900;
}

input[type="checkbox"],
input[type="radio"]{
  accent-color:var(--yellow);
  min-height:auto;
  width:18px;
  height:18px;
}

.settings-modal-backdrop,
.dash-card-popup-backdrop{
  background:rgba(35,37,33,.48);
}

.settings-modal-card,
.dash-card-popup-panel{
  background:var(--cream);
  border:var(--sticker-border-heavy);
  border-radius:24px;
  box-shadow:8px 8px 0 var(--cs-dark);
}

.settings-modal-header button,
.dash-card-popup-head button{
  background:var(--hot-pink);
  border:3px solid var(--cs-dark);
  border-radius:999px;
  color:var(--cs-dark);
  width:38px;
  height:38px;
}

.text-action,
.link-button{
  background:var(--pink);
  border:2px solid var(--cs-dark);
  border-radius:999px;
  box-shadow:2px 2px 0 var(--cs-dark);
  color:var(--cs-dark);
  display:inline-flex;
  font-weight:900;
  padding:5px 9px;
  text-decoration:none;
}

.stock-state,
.file-chip,
.role-list span,
.production-status-badge,
.badge,
.status-badge{
  background:var(--yellow);
  border:2px solid var(--cs-dark);
  border-radius:999px;
  box-shadow:2px 2px 0 var(--cs-dark);
  color:var(--cs-dark);
  display:inline-flex;
  font-size:12px;
  font-weight:900;
  padding:6px 10px;
}

.production-status-badge[data-state="Produccion"],
.production-status-badge[data-state="Diseno"]{
  background:var(--pink);
}

.production-status-badge[data-state="Confirmacion"],
.production-status-badge[data-state="Comprobacion"]{
  background:var(--confirmation-green);
}

.production-status-badge[data-state="Finalizado"],
.status-completado,
.badge-success{
  background:var(--green);
}

.production-status-badge[data-state="Cancelado"],
.status-cancelado{
  background:var(--cs-dark);
  color:var(--white);
}

.status-error,
.badge-error{
  background:var(--hot-pink);
}

.status-urgente{
  background:var(--cs-orange);
  color:var(--white);
}

.control-orders-bulk-toolbar{
  align-items:center;
  background:var(--cream);
  border:2px solid var(--cs-dark);
  border-radius:16px;
  box-shadow:4px 4px 0 var(--cs-dark);
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:14px;
  padding:12px;
}
.control-orders-bulk-toolbar select{
  background:var(--white);
  border:2px solid var(--cs-dark);
  border-radius:12px;
  color:var(--cs-dark);
  min-height:38px;
  padding:8px 10px;
}
.control-orders-bulk-hint{
  color:var(--cs-dark);
  font-size:12px;
  font-weight:900;
}
.control-orders-selection-toggle{
  margin-left:auto;
}
.control-orders-select-all{
  align-items:center;
  color:var(--cs-dark);
  display:inline-flex;
  font-weight:900;
  gap:8px;
}
.control-order-select{
  cursor:pointer;
  width:18px;
  height:18px;
}
.control-order-card-select{
  align-items:center;
  color:var(--cs-dark);
  display:flex;
  font-size:12px;
  font-weight:900;
  gap:8px;
  justify-content:flex-end;
}

.dashboard-config-note,
.approval-note,
.detail-panel,
.auto-box,
.check-field,
.client-metrics div,
.production-card-metrics div,
.analysis-breakdown div,
.funnel-step{
  background:var(--cream);
  border:2px solid var(--cs-dark);
  border-radius:16px;
  color:var(--cs-dark);
}

.production-tabs,
.settings-tabs,
.table-toolbar,
.month-filter,
.advanced-toolbar,
.analysis-controls,
.dash-controls{
  align-items:end;
  background:var(--white);
  border:var(--sticker-border);
  border-radius:20px;
  box-shadow:4px 4px 0 var(--cs-dark);
  padding:12px;
}

.production-tabs .btn-dark,
.settings-tabs .btn-dark{
  background:var(--cs-orange);
  color:var(--white);
}

.production-kpis{
  grid-template-columns:repeat(4, minmax(150px, 1fr));
}

.production-kpi{
  min-height:126px;
  padding:18px;
}

.production-kpi span::before{
  content:"★ ";
  color:var(--hot-pink);
}

.production-state-flow{
  gap:20px;
}

.state-flow-card{
  background:var(--white);
  min-height:164px;
  overflow:hidden;
}

.state-flow-card::after{
  content:"⚡";
  position:absolute;
  right:14px;
  top:10px;
  font-size:28px;
}

.b2b-code-production{
  align-items:center;
  display:inline-flex;
  gap:8px;
}
.b2b-production-state-square{
  background:var(--white);
  border:2px solid var(--cs-dark);
  border-radius:5px;
  box-shadow:2px 2px 0 var(--cs-dark);
  display:inline-block;
  flex:0 0 18px;
  height:18px;
  width:18px;
}
.state-flow-card[data-state="Pendiente"],
.b2b-production-state-square[data-state="Pendiente"]{background:var(--yellow);}
.state-flow-card[data-state="Produccion"],
.state-flow-card[data-state="Diseno"],
.b2b-production-state-square[data-state="Produccion"],
.b2b-production-state-square[data-state="Diseno"]{background:var(--pink);}
.state-flow-card[data-state="Confirmacion"],
.state-flow-card[data-state="Comprobacion"],
.b2b-production-state-square[data-state="Confirmacion"]{background:var(--confirmation-green);}
.state-flow-card[data-state="Tarima"],
.b2b-production-state-square[data-state="Tarima"]{background:var(--cs-brown);color:var(--white);}
.state-flow-card[data-state="Tarima"] span,
.state-flow-card[data-state="Tarima"] strong,
.state-flow-card[data-state="Tarima"] b,
.state-flow-card[data-state="Tarima"] em{color:var(--white);}
.state-flow-card[data-state="Enviado"],
.b2b-production-state-square[data-state="Enviado"]{background:var(--blue);color:var(--cs-dark);}
.state-flow-card[data-state="Enviado"] span,
.state-flow-card[data-state="Enviado"] strong,
.state-flow-card[data-state="Enviado"] b,
.state-flow-card[data-state="Enviado"] em{color:var(--cs-dark);}
.state-flow-card[data-state="Finalizado"],
.b2b-production-state-square[data-state="Finalizado"]{background:var(--green);}

.production-status-badge[data-state="Tarima"]{background:var(--cs-brown);color:var(--white);}
.production-status-badge[data-state="Enviado"]{background:var(--blue);color:var(--cs-dark);}

.kanban-board{
  background:var(--cs-beige);
  border:var(--sticker-border);
  border-radius:22px;
  box-shadow:var(--sticker-shadow);
  padding:14px;
}

.kanban-column h3{
  background:var(--cs-dark);
  border-radius:999px;
  color:var(--white);
  padding:10px 12px;
}

.kanban-card{
  background:var(--cream);
  border:2px solid var(--cs-dark);
  border-radius:16px;
  box-shadow:3px 3px 0 var(--cs-dark);
}

.detail-title-row,
.profile-header,
.section-title-row,
.mini-dashboard-head,
.dashboard-title-row{
  background:var(--cream);
  border:2px dashed var(--cs-dark);
  border-radius:18px;
  padding:12px;
}

.empty-cart{
  background:var(--cream);
  border:var(--sticker-border);
  border-radius:18px;
  box-shadow:var(--sticker-shadow);
  color:var(--cs-dark);
}

.auth-page .login-brand h1{
  color:var(--cs-dark);
  font-weight:900;
  text-transform:uppercase;
}

@media(max-width:1100px){
  .production-kpis,
  .stock-kpis,
  .analysis-kpis{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media(max-width:700px){
  .app{
    border-left:0;
    border-right:0;
    border-radius:0;
    box-shadow:none;
  }

  .content{
    padding:18px;
  }

  .production-kpis,
  .stock-kpis,
  .analysis-kpis,
  .summary-metrics,
  .custom-metrics,
  .cards,
  .subnav-cards,
  .dashboard-extra-grid,
  .settings-grid{
    grid-template-columns:1fr;
  }

  .production-tabs,
  .settings-tabs,
  .actions,
  .cotizador-buttons,
  .concentradora-buttons{
    align-items:stretch;
    flex-direction:column;
  }

  .production-tabs button,
  .settings-tabs button,
  .actions a{
    width:100%;
  }
}
@media(max-width:800px){
  .settings-form-grid,
  .settings-actions-grid{
    grid-template-columns:1fr;
  }
  .section-title-row{
    align-items:stretch;
    flex-direction:column;
  }
}

/* Mobile shell for Cali Soft M1. Desktop styles stay untouched above this line. */
@media(max-width:860px){
  .owner-mobile-preview-control,
  .mobile-preview-workspace{
    display:none !important;
  }

  html,
  body{
    max-width:100%;
    overflow-x:hidden;
  }

  body{
    background-attachment:scroll;
  }

  .app{
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    display:block !important;
    margin:0 !important;
    min-height:100vh !important;
    overflow:visible !important;
    width:100% !important;
  }

  .sidebar,
  html.sidebar-collapsed .sidebar,
  body.sidebar-collapsed .sidebar{
    background:rgba(255,255,255,.98) !important;
    border-bottom:3px solid var(--cs-dark, #541301) !important;
    border-right:0 !important;
    box-shadow:0 8px 20px rgba(35,37,33,.12) !important;
    display:block !important;
    min-width:0 !important;
    overflow:visible !important;
    padding:10px 12px 12px !important;
    position:sticky !important;
    top:0 !important;
    transform:none !important;
    width:100% !important;
    z-index:60 !important;
  }

  .sidebar-toggle-control{
    display:none !important;
  }

  .sidebar-main,
  .sidebar-bottom{
    display:block !important;
  }

  .brand{
    gap:9px !important;
    min-width:0;
  }

  .brand-logo{
    border-radius:10px !important;
    height:40px !important;
    width:40px !important;
  }

  .brand span{
    font-size:16px;
    line-height:1.1;
  }

  .menu{
    display:flex !important;
    flex-direction:row !important;
    gap:8px !important;
    margin:10px -12px 0 !important;
    overflow-x:auto !important;
    padding:0 12px 4px !important;
    scrollbar-width:thin;
    white-space:nowrap;
    -webkit-overflow-scrolling:touch;
  }

  .menu a{
    align-items:center;
    border:2px solid rgba(35,37,33,.12);
    display:inline-flex;
    flex:0 0 auto;
    font-size:13px !important;
    min-height:38px;
    padding:8px 11px !important;
  }

  .menu a:hover,
  .menu a.active{
    box-shadow:2px 2px 0 var(--cs-dark, #541301) !important;
  }

  .menu .submenu,
  .menu .submenu.active{
    display:none !important;
  }

  .sidebar-bottom{
    align-items:center;
    display:flex !important;
    flex-direction:row !important;
    gap:8px !important;
    margin-top:10px;
  }

  .account-button{
    flex:1 1 auto;
    min-width:0;
    padding:8px !important;
  }

  .account-button-avatar,
  .account-avatar{
    height:32px;
    width:32px;
  }

  .settings-link{
    flex:0 0 auto;
    font-size:12px !important;
    padding:9px 10px !important;
    white-space:nowrap;
  }

  .sidebar-footer{
    display:none !important;
  }

  .content{
    min-width:0 !important;
    padding:16px !important;
    width:100% !important;
  }

  .topbar{
    align-items:flex-start !important;
    flex-wrap:wrap !important;
    gap:10px !important;
    height:auto !important;
    min-height:52px;
    padding-bottom:12px;
  }

  .topbar p{
    font-size:13px !important;
  }

  .topbar .btn-secondary,
  .topbar button:not(.dashboard-privacy-toggle):not(.notification-bell):not(.notification-item-main):not(.notification-dismiss){
    min-height:40px;
    padding:9px 12px !important;
  }

  .hero{
    gap:16px !important;
    grid-template-columns:1fr !important;
    padding:24px 0 !important;
  }

  .hero h1,
  .analysis-header h1,
  .page-title h1,
  .cart-header h1{
    font-size:clamp(28px, 9vw, 36px) !important;
    line-height:1.05 !important;
  }

  .hero p{
    font-size:15px !important;
    line-height:1.45 !important;
  }

  .summary-card,
  .big-kpi{
    padding:20px !important;
  }

  .summary-card h2,
  .big-kpi strong,
  .total,
  .summary-total h3,
  .analysis-big{
    font-size:clamp(28px, 9vw, 38px) !important;
    line-height:1.1 !important;
    overflow-wrap:anywhere;
  }

  .actions,
  .cotizador-buttons,
  .concentradora-buttons,
  .production-tabs,
  .settings-tabs,
  .b2b-actions,
  .form-actions,
  .detail-actions,
  .settings-modal-actions{
    align-items:stretch !important;
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
  }

  .actions a,
  .cotizador-buttons a,
  .cotizador-buttons button,
  .concentradora-buttons a,
  .concentradora-buttons button,
  .production-tabs button,
  .settings-tabs button,
  .b2b-actions button,
  .b2b-actions a,
  .form-actions button,
  .form-actions a,
  .detail-actions button,
  .settings-modal-actions button,
  .btn-primary,
  .btn-secondary,
  .btn-dark,
  .btn-light{
    justify-content:center !important;
    text-align:center !important;
    width:100%;
  }

  .cards,
  .subnav-cards,
  .dashboard-extra-grid,
  .settings-grid,
  .summary-metrics,
  .custom-metrics,
  .resources-kpis,
  .resources-forms,
  .resources-detail-grid,
  .resource-card-grid,
  .production-kpis,
  .production-state-flow,
  .production-detail-grid,
  .stock-kpis,
  .analysis-kpis,
  .analysis-grid,
  .analysis-grid.two,
  .analysis-grid.three,
  .settings-actions-grid,
  .settings-form-grid,
  .account-info-grid,
  .b2b-grid,
  .auto-box,
  .kpis,
  .dashboard-grid,
  .shopify-layout{
    grid-template-columns:1fr !important;
  }

  .card,
  .summary-card,
  .settings-card,
  .mini-dashboard-card,
  .b2b-card,
  .b2b-table,
  .b2b-dashboard,
  .chart-card,
  .analysis-card,
  .analysis-kpi,
  .production-kpi,
  .detail-section,
  .resource-account-card{
    border-radius:16px !important;
    max-width:100%;
    padding:16px !important;
  }

  .editable-dashboard-top,
  .section-title-row,
  .detail-title-row,
  .profile-header,
  .dashboard-title-row,
  .analysis-header,
  .stock-modal-table-head,
  .finance-table-head,
  .mini-dashboard-head{
    align-items:stretch !important;
    flex-direction:column !important;
    gap:12px !important;
  }

  .dash-controls,
  .finance-filter-bar,
  .analysis-controls,
  .table-toolbar,
  .advanced-toolbar,
  .month-filter,
  .resource-card-filters,
  .production-view .advanced-toolbar{
    display:grid !important;
    grid-template-columns:1fr !important;
    justify-content:stretch !important;
    width:100% !important;
  }

  .production-upload-controls{
    grid-template-columns:1fr !important;
  }

  .dash-controls input,
  .dash-controls select,
  .finance-filter-bar input,
  .finance-filter-bar select,
  .analysis-controls input,
  .analysis-controls select,
  .table-toolbar input,
  .table-toolbar select,
  .advanced-toolbar input,
  .advanced-toolbar select,
  .month-filter input,
  .month-filter select,
  .resource-card-filters input,
  .resource-card-filters select,
  .b2b-field input,
  .b2b-field select,
  .b2b-field textarea,
  .settings-card input,
  .settings-card select,
  .settings-card textarea,
  .detail-section input,
  .detail-section select,
  .detail-section textarea{
    font-size:16px !important;
    min-height:44px !important;
    width:100% !important;
  }

  .finance-total-card{
    min-width:0 !important;
    text-align:left !important;
    width:100% !important;
  }

  .simple-table,
  .b2b-list,
  .stock-section-table,
  .settings-table,
  .stock-modal-table-scroll{
    max-width:100%;
    max-height:var(--table-scroll-max-height-mobile);
    overflow-x:auto !important;
    overflow-y:auto !important;
    padding-bottom:8px;
    -webkit-overflow-scrolling:touch;
  }

  .simple-row,
  .stock-modal-row{
    min-width:max-content !important;
    width:max-content !important;
  }

  .simple-row span,
  .stock-modal-row span,
  .b2b-row span{
    overflow-wrap:anywhere;
  }

  .stock-modal-table-scroll{
    max-height:min(38vh, 280px);
  }

  .simple-head,
  .stock-modal-head,
  .b2b-row.header{
    position:sticky;
    top:0;
    z-index:2;
  }

  .b2b-row{
    min-width:920px !important;
  }

  .kanban-board{
    grid-auto-flow:column;
    grid-auto-columns:minmax(250px, 82vw);
    grid-template-columns:none !important;
    overflow-x:auto !important;
    padding-bottom:12px;
    -webkit-overflow-scrolling:touch;
  }

  .kanban-column{
    min-height:320px !important;
  }

  .settings-modal-card{
    border-radius:18px !important;
    max-height:calc(100dvh - 24px) !important;
    overflow:auto !important;
    padding:16px !important;
    width:calc(100vw - 24px) !important;
  }

  .settings-modal-backdrop{
    padding:12px !important;
  }

  .dashboard-privacy-toggle{
    flex:0 0 auto;
  }
}

@media(max-width:480px){
  .content{
    padding:12px !important;
  }

  .brand span{
    max-width:190px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .menu a{
    font-size:12px !important;
    min-height:36px;
    padding:7px 10px !important;
  }

  .card,
  .summary-card,
  .settings-card,
  .mini-dashboard-card,
  .b2b-card,
  .b2b-table,
  .analysis-card,
  .production-kpi,
  .detail-section{
    padding:14px !important;
  }

  .login-panel{
    border-radius:18px !important;
    padding:20px !important;
    width:calc(100vw - 24px) !important;
  }
}

/* Dashboard mobile refinement */
@media(max-width:860px){
  .main-dashboard{
    margin-top:10px !important;
  }

  .dashboard-hero{
    margin:14px 0 !important;
    padding:18px !important;
  }

  .dashboard-hero .actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    margin-top:16px !important;
  }

  .dashboard-hero .actions a{
    min-height:40px !important;
    padding:10px 12px !important;
  }

  .dashboard-hero .summary-card{
    display:grid;
    gap:4px;
    padding:14px !important;
  }

  .dashboard-hero .summary-card h2{
    font-size:clamp(24px, 8vw, 32px) !important;
    margin:2px 0 !important;
  }

  .dashboard-hero .summary-card p{
    font-size:12px !important;
  }

  .editable-dashboard{
    border-radius:18px !important;
    margin:10px 0 24px !important;
    padding:14px !important;
  }

  .editable-dashboard-top{
    margin-bottom:12px !important;
  }

  .editable-dashboard-top h2{
    font-size:20px !important;
    margin-bottom:3px !important;
  }

  .editable-dashboard-top p{
    display:none !important;
  }

  .main-dashboard .dash-controls{
    display:grid !important;
    gap:8px !important;
    grid-template-columns:1fr 1fr !important;
    padding:10px !important;
  }

  .main-dashboard .dash-controls select,
  .main-dashboard .dash-controls input[type="date"],
  .main-dashboard .dash-compare-toggle{
    border-radius:12px !important;
    font-size:12px !important;
    font-weight:900 !important;
    height:38px !important;
    min-height:38px !important;
    padding:0 9px !important;
  }

  .main-dashboard .dash-compare-toggle{
    justify-content:flex-start !important;
  }

  .main-dashboard #dashRange{
    grid-column:span 2;
  }

  .main-dashboard #dashSellerFilter,
  .main-dashboard #dashChannelFilter,
  .main-dashboard #dashStatusFilter{
    grid-column:span 2;
  }

  .main-dashboard #btnEditarMainDash,
  .main-dashboard #btnAgregarMainMetrica,
  .main-dashboard #btnResetMainDash{
    border-radius:12px !important;
    font-size:12px !important;
    min-height:36px !important;
    padding:8px 10px !important;
    width:100% !important;
  }

  .main-dashboard #btnEditarMainDash{
    grid-column:1;
  }

  .main-dashboard #btnAgregarMainMetrica{
    grid-column:2;
  }

  .main-dashboard #btnResetMainDash{
    grid-column:span 2;
  }

  .main-dashboard .sortable-metrics,
  .summary-metrics{
    display:grid !important;
    gap:10px !important;
    grid-template-columns:1fr 1fr !important;
  }

  .main-dashboard .metric-card{
    border-radius:14px !important;
    min-height:78px !important;
    padding:8px !important;
    transform:none !important;
  }

  .main-dashboard .metric-card::after{
    height:10px !important;
    right:7px !important;
    top:7px !important;
    width:10px !important;
  }

  .main-dashboard .metric-head{
    align-items:flex-start !important;
    display:grid !important;
    gap:3px !important;
    grid-template-columns:12px 1fr !important;
    padding-right:6px;
  }

  .main-dashboard .metric-icon{
    height:12px !important;
    width:12px !important;
  }

  .main-dashboard .metric-head > span:not(.metric-icon):not(.metric-trend){
    font-size:10px !important;
    line-height:1.1 !important;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .main-dashboard .metric-trend{
    display:none !important;
    font-size:10px !important;
    grid-column:1 / -1;
    line-height:1.15 !important;
    margin-left:0 !important;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .main-dashboard .metric-value{
    font-size:clamp(16px, 5.5vw, 20px) !important;
    line-height:1.05 !important;
    margin:8px 0 0 !important;
    overflow-wrap:anywhere;
  }

  .main-dashboard .metric-chart{
    display:none !important;
    height:0 !important;
  }

  .main-dashboard .metric-actions{
    flex-direction:column;
    gap:5px !important;
  }

  .main-dashboard .metric-actions button{
    font-size:10px !important;
    padding:5px 6px !important;
  }

  .main-dashboard.edit-mode .metric-card{
    min-height:160px !important;
  }
}

@media(max-width:430px){
  .main-dashboard .dash-controls{
    grid-template-columns:1fr 1fr !important;
  }

  .main-dashboard #dashRange,
  .main-dashboard #dashSellerFilter,
  .main-dashboard #dashChannelFilter,
  .main-dashboard #dashStatusFilter,
  .main-dashboard #btnResetMainDash{
    grid-column:span 2 !important;
  }

  .main-dashboard #btnEditarMainDash,
  .main-dashboard #btnAgregarMainMetrica{
    grid-column:auto !important;
  }

  .main-dashboard .sortable-metrics,
  .summary-metrics{
    grid-template-columns:1fr 1fr !important;
  }

  .main-dashboard .metric-card{
    min-height:76px !important;
    padding:8px !important;
  }

  .main-dashboard .metric-value{
    font-size:clamp(15px, 5.8vw, 19px) !important;
  }
}

@media(max-width:360px){
  .main-dashboard .dash-controls{
    grid-template-columns:1fr !important;
  }

  .main-dashboard #dashRange,
  .main-dashboard #dashSellerFilter,
  .main-dashboard #dashChannelFilter,
  .main-dashboard #dashStatusFilter,
  .main-dashboard #btnResetMainDash,
  .main-dashboard #btnEditarMainDash,
  .main-dashboard #btnAgregarMainMetrica{
    grid-column:1 !important;
  }

  .main-dashboard .sortable-metrics,
  .summary-metrics{
    grid-template-columns:1fr 1fr !important;
  }
}

@media(max-width:860px){
  .main-dashboard .dash-controls{
    align-items:center !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:8px !important;
    justify-content:flex-start !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    padding:8px !important;
    scrollbar-width:thin;
    -webkit-overflow-scrolling:touch;
  }

  .main-dashboard .dash-controls select,
  .main-dashboard .dash-controls input[type="date"],
  .main-dashboard .dash-compare-toggle,
  .main-dashboard .dash-controls button{
    flex:0 0 auto !important;
    height:36px !important;
    min-height:36px !important;
    white-space:nowrap !important;
    width:auto !important;
  }

  .main-dashboard #dashRange{
    width:148px !important;
  }

  .main-dashboard #dashStartDate,
  .main-dashboard #dashEndDate{
    width:132px !important;
  }

  .main-dashboard .dash-compare-toggle{
    width:106px !important;
  }

  .main-dashboard #dashSellerFilter,
  .main-dashboard #dashChannelFilter,
  .main-dashboard #dashStatusFilter{
    width:178px !important;
  }

  .main-dashboard #btnEditarMainDash,
  .main-dashboard #btnAgregarMainMetrica,
  .main-dashboard #btnResetMainDash{
    min-width:86px !important;
    width:auto !important;
  }
}

/* Unified filter bars for dashboards and tables */
:is(.dash-controls,.finance-filter-bar,.table-toolbar,.advanced-toolbar,.month-filter,.analysis-controls,.resource-card-filters){
  align-items:end;
  background:var(--white, #fff);
  border:3px solid var(--cs-dark, #541301);
  border-radius:18px;
  box-shadow:4px 4px 0 var(--cs-dark, #541301);
  display:grid;
  gap:12px;
  grid-template-columns:repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  justify-content:stretch;
  margin:16px 0;
  max-width:100%;
  overflow:visible;
  padding:14px;
  width:100%;
}

:is(.dash-controls,.finance-filter-bar,.table-toolbar,.advanced-toolbar,.month-filter,.analysis-controls,.resource-card-filters) .b2b-field,
:is(.dash-controls,.finance-filter-bar,.table-toolbar,.advanced-toolbar,.month-filter,.analysis-controls,.resource-card-filters) > label{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:0;
  min-width:0;
  width:100%;
}

:is(.dash-controls,.finance-filter-bar,.table-toolbar,.advanced-toolbar,.month-filter,.analysis-controls,.resource-card-filters) label{
  color:var(--cs-dark, #541301);
  font-size:12px;
  font-weight:900;
  line-height:1.2;
}

:is(.dash-controls,.finance-filter-bar,.table-toolbar,.advanced-toolbar,.month-filter,.analysis-controls,.resource-card-filters) input:not([type="checkbox"]):not([type="radio"]),
:is(.dash-controls,.finance-filter-bar,.table-toolbar,.advanced-toolbar,.month-filter,.analysis-controls,.resource-card-filters) select,
:is(.dash-controls,.finance-filter-bar,.table-toolbar,.advanced-toolbar,.month-filter,.analysis-controls,.resource-card-filters) textarea{
  background:var(--white, #fff);
  border:3px solid var(--cs-dark, #541301);
  border-radius:14px;
  color:var(--cs-dark, #541301);
  font-size:14px;
  font-weight:800;
  height:44px;
  line-height:1.2;
  margin:0;
  max-width:100%;
  min-height:44px;
  min-width:0;
  padding:10px 12px;
  width:100%;
}

:is(.dash-controls,.finance-filter-bar,.table-toolbar,.advanced-toolbar,.month-filter,.analysis-controls,.resource-card-filters) button,
:is(.dash-controls,.finance-filter-bar,.table-toolbar,.advanced-toolbar,.month-filter,.analysis-controls,.resource-card-filters) .btn-dark,
:is(.dash-controls,.finance-filter-bar,.table-toolbar,.advanced-toolbar,.month-filter,.analysis-controls,.resource-card-filters) .btn-light,
:is(.dash-controls,.finance-filter-bar,.table-toolbar,.advanced-toolbar,.month-filter,.analysis-controls,.resource-card-filters) .btn-primary,
:is(.dash-controls,.finance-filter-bar,.table-toolbar,.advanced-toolbar,.month-filter,.analysis-controls,.resource-card-filters) .btn-secondary{
  align-self:end;
  display:inline-flex;
  justify-content:center;
  margin:0;
  min-height:44px;
  min-width:0;
  padding:10px 14px;
  white-space:nowrap;
  width:100%;
}

.dash-compare-toggle{
  align-items:center !important;
  background:var(--white, #fff);
  border:3px solid var(--cs-dark, #541301);
  border-radius:14px;
  color:var(--cs-dark, #541301);
  display:flex !important;
  flex-direction:row !important;
  gap:8px !important;
  justify-content:center;
  min-height:44px;
  padding:10px 12px;
}

.dash-compare-toggle input{
  flex:0 0 auto;
  height:18px !important;
  margin:0;
  min-height:18px !important;
  width:18px !important;
}

.analysis-controls > span,
#analisisUpdate{
  align-items:center;
  background:var(--cream, #fff7e8);
  border:2px solid var(--cs-dark, #541301);
  border-radius:14px;
  color:var(--cs-dark, #541301);
  display:flex;
  font-size:12px;
  font-weight:900;
  justify-content:center;
  min-height:44px;
  padding:10px 12px;
  text-align:center;
}

@media(min-width:980px){
  .finance-filter-bar .finance-search-field,
  .table-toolbar .finance-search-field{
    grid-column:span 2;
  }

  .main-dashboard .dash-controls{
    grid-template-columns:repeat(auto-fit, minmax(145px, 1fr));
  }
}

@media(max-width:860px){
  :is(.dash-controls,.finance-filter-bar,.table-toolbar,.advanced-toolbar,.month-filter,.analysis-controls,.resource-card-filters),
  .main-dashboard .dash-controls{
    align-items:end !important;
    display:grid !important;
    gap:10px !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    justify-content:stretch !important;
    overflow:visible !important;
    padding:10px !important;
    width:100% !important;
  }

  .main-dashboard #dashRange,
  .main-dashboard #dashStartDate,
  .main-dashboard #dashEndDate,
  .main-dashboard #dashSellerFilter,
  .main-dashboard #dashChannelFilter,
  .main-dashboard #dashStatusFilter,
  .main-dashboard #btnEditarMainDash,
  .main-dashboard #btnAgregarMainMetrica,
  .main-dashboard #btnResetMainDash,
  .main-dashboard .dash-compare-toggle{
    grid-column:auto !important;
    min-width:0 !important;
    width:100% !important;
  }

  :is(.dash-controls,.finance-filter-bar,.table-toolbar,.advanced-toolbar,.month-filter,.analysis-controls,.resource-card-filters) button,
  :is(.dash-controls,.finance-filter-bar,.table-toolbar,.advanced-toolbar,.month-filter,.analysis-controls,.resource-card-filters) .btn-dark,
  :is(.dash-controls,.finance-filter-bar,.table-toolbar,.advanced-toolbar,.month-filter,.analysis-controls,.resource-card-filters) .btn-light,
  :is(.dash-controls,.finance-filter-bar,.table-toolbar,.advanced-toolbar,.month-filter,.analysis-controls,.resource-card-filters) .btn-primary,
  :is(.dash-controls,.finance-filter-bar,.table-toolbar,.advanced-toolbar,.month-filter,.analysis-controls,.resource-card-filters) .btn-secondary{
    font-size:12px !important;
    min-height:42px !important;
    padding:9px 10px !important;
    width:100% !important;
  }
}

@media(max-width:520px){
  :is(.dash-controls,.finance-filter-bar,.table-toolbar,.advanced-toolbar,.month-filter,.analysis-controls,.resource-card-filters),
  .main-dashboard .dash-controls{
    grid-template-columns:1fr !important;
  }
}

/* Dashboard card value containment */
.metric-card,
.summary-card,
.production-kpi,
.resources-kpi,
.finance-dash-kpi,
.analysis-kpi,
.kpi,
.big-kpi,
.finance-total-card,
.stock-summary-card,
.tinta-summary-card,
.users-summary-card{
  container-type:inline-size;
  min-width:0;
  overflow:hidden;
}

.metric-head,
.metric-head > span,
.metric-trend,
.production-kpi span,
.production-kpi small,
.resources-kpi span,
.resources-kpi small,
.finance-dash-kpi span,
.finance-dash-kpi small{
  min-width:0;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
}

.metric-head{
  align-items:flex-start;
}

.metric-value,
.summary-card h2,
.production-kpi strong,
.resources-kpi strong,
.finance-dash-kpi strong,
.analysis-kpi strong,
.kpi strong,
.big-kpi strong,
.finance-total-card strong,
.stock-summary-amount strong,
.tinta-summary-amount strong,
.users-summary-card strong{
  display:block;
  max-width:100%;
  min-width:0;
  overflow-wrap:anywhere;
  white-space:normal;
  word-break:break-word;
  font-variant-numeric:tabular-nums;
  letter-spacing:0;
}

.metric-value{
  font-size:clamp(18px, 14cqw, 32px);
  line-height:1.05;
}

.summary-card h2,
.big-kpi strong{
  font-size:clamp(24px, 13cqw, 42px);
  line-height:1.06;
}

.production-kpi strong,
.resources-kpi strong,
.finance-dash-kpi strong,
.analysis-kpi strong,
.kpi strong,
.finance-total-card strong,
.stock-summary-amount strong,
.tinta-summary-amount strong,
.users-summary-card strong{
  font-size:clamp(18px, 12cqw, 32px);
  line-height:1.05;
}

.main-dashboard .summary-metrics,
.main-dashboard .sortable-metrics,
.finance-dash-kpis,
.resources-kpis,
.production-kpis,
.analysis-kpis,
.stock-summary-grid,
.tinta-summary-grid{
  grid-template-columns:repeat(auto-fit, minmax(min(180px, 100%), 1fr));
}

@media(max-width:860px){
  .main-dashboard .summary-metrics,
  .main-dashboard .sortable-metrics{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }

  .main-dashboard .metric-card{
    min-width:0 !important;
  }

  .main-dashboard .metric-value,
  .metric-value{
    font-size:clamp(15px, 13cqw, 22px) !important;
    line-height:1.05 !important;
    margin-top:7px !important;
  }

  .summary-card h2,
  .big-kpi strong,
  .production-kpi strong,
  .resources-kpi strong,
  .finance-dash-kpi strong,
  .analysis-kpi strong,
  .kpi strong,
  .finance-total-card strong{
    font-size:clamp(16px, 13cqw, 28px) !important;
  }
}

.finance-table-head .finance-total-card{
  flex:0 1 clamp(220px, 28vw, 360px);
  min-width:min(220px, 100%);
  max-width:100%;
}

.finance-dash-total-card{
  align-content:center;
  display:grid;
  gap:4px;
  min-height:86px;
  padding:16px 20px;
  text-align:left;
}

.finance-dash-total-card span{
  line-height:1;
}

.finance-dash-total-card strong{
  font-size:clamp(22px, 11cqw, 34px) !important;
  line-height:1.05;
  margin-top:0;
}

@media(max-width:860px){
  .finance-table-head .finance-total-card,
  .finance-dash-total-card{
    flex-basis:auto;
    min-width:0;
    width:100%;
  }
}

/* Main dashboard keeps its compact original layout. */
.main-dashboard .dash-controls{
  align-items:center !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  display:flex !important;
  flex-wrap:wrap !important;
  gap:12px !important;
  justify-content:flex-end !important;
  margin:0 !important;
  max-width:none !important;
  overflow:visible !important;
  padding:0 !important;
  width:auto !important;
}

.main-dashboard .dash-controls select,
.main-dashboard .dash-controls input[type="date"]{
  background:#fff !important;
  border:1px solid #d8dee8 !important;
  border-radius:10px !important;
  color:#1f2937 !important;
  font-size:14px !important;
  font-weight:700 !important;
  height:42px !important;
  line-height:normal !important;
  min-height:42px !important;
  min-width:0 !important;
  padding:0 14px !important;
  width:auto !important;
}

.main-dashboard .dash-controls input[type="date"]{
  padding:0 12px !important;
}

.main-dashboard .dash-compare-toggle{
  align-items:center !important;
  background:#fff !important;
  border:1px solid #d8dee8 !important;
  border-radius:10px !important;
  color:#1f2937 !important;
  display:inline-flex !important;
  flex-direction:row !important;
  font-weight:800 !important;
  gap:7px !important;
  height:42px !important;
  justify-content:flex-start !important;
  min-height:42px !important;
  padding:0 12px !important;
  white-space:nowrap !important;
  width:auto !important;
}

.main-dashboard .dash-compare-toggle input{
  height:16px !important;
  min-height:16px !important;
  width:16px !important;
}

.main-dashboard .dash-controls button{
  align-self:center !important;
  margin:0 !important;
  min-height:auto !important;
  width:auto !important;
}

.dashboard-hero .summary-card,
.main-dashboard .metric-card{
  container-type:normal !important;
}

.dashboard-hero .summary-card h2{
  font-size:42px !important;
  line-height:normal !important;
  margin:16px 0 !important;
}

.main-dashboard .summary-metrics,
.main-dashboard .sortable-metrics{
  grid-template-columns:repeat(3, minmax(220px, 1fr)) !important;
}

.main-dashboard .metric-card{
  min-height:174px !important;
  padding:18px !important;
}

.main-dashboard .metric-value{
  font-size:32px !important;
  line-height:normal !important;
  margin:22px 0 12px !important;
  overflow-wrap:anywhere;
}

@media(max-width:860px){
  .dashboard-hero .summary-card h2{
    font-size:clamp(24px, 8vw, 32px) !important;
    line-height:1.1 !important;
    margin:2px 0 !important;
  }

  .main-dashboard .dash-controls{
    align-items:center !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:8px !important;
    justify-content:flex-start !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    padding:8px !important;
    scrollbar-width:thin;
    -webkit-overflow-scrolling:touch;
  }

  .main-dashboard .dash-controls select,
  .main-dashboard .dash-controls input[type="date"],
  .main-dashboard .dash-compare-toggle,
  .main-dashboard .dash-controls button{
    flex:0 0 auto !important;
    height:36px !important;
    min-height:36px !important;
    white-space:nowrap !important;
    width:auto !important;
  }

  .main-dashboard #dashRange{
    width:148px !important;
  }

  .main-dashboard #dashStartDate,
  .main-dashboard #dashEndDate{
    width:132px !important;
  }

  .main-dashboard .dash-compare-toggle{
    width:106px !important;
  }

  .main-dashboard #dashSellerFilter,
  .main-dashboard #dashChannelFilter,
  .main-dashboard #dashStatusFilter{
    width:178px !important;
  }

  .main-dashboard #btnEditarMainDash,
  .main-dashboard #btnAgregarMainMetrica,
  .main-dashboard #btnResetMainDash{
    min-width:86px !important;
    width:auto !important;
  }

  .main-dashboard .summary-metrics,
  .main-dashboard .sortable-metrics{
    display:grid !important;
    gap:10px !important;
    grid-template-columns:1fr 1fr !important;
  }

  .main-dashboard .metric-card{
    min-height:78px !important;
    padding:8px !important;
  }

  .main-dashboard .metric-value{
    font-size:clamp(16px, 5.5vw, 20px) !important;
    line-height:1.05 !important;
    margin:8px 0 0 !important;
  }
}

@media(max-width:430px){
  .main-dashboard .summary-metrics,
  .main-dashboard .sortable-metrics{
    grid-template-columns:1fr 1fr !important;
  }

  .main-dashboard .metric-value{
    font-size:clamp(15px, 5.8vw, 19px) !important;
  }
}

/* Responsive total amount in the CaliSoft dashboard hero. */
.dashboard-hero .summary-card{
  container-type:inline-size !important;
  min-width:0 !important;
  overflow:hidden !important;
}

.dashboard-hero #homeVentasPrincipal{
  display:block;
  font-size:42px !important;
  font-variant-numeric:tabular-nums;
  line-height:1.04 !important;
  max-width:100%;
  overflow-wrap:anywhere;
  text-wrap:balance;
  white-space:normal;
  word-break:break-word;
}

.dashboard-hero #homeVentasPrincipal[data-fit="medium"]{
  font-size:36px !important;
}

.dashboard-hero #homeVentasPrincipal[data-fit="large"]{
  font-size:30px !important;
}

.dashboard-hero #homeVentasPrincipal[data-fit="xlarge"]{
  font-size:24px !important;
}

@media(max-width:860px){
  .dashboard-hero #homeVentasPrincipal{
    font-size:32px !important;
  }

  .dashboard-hero #homeVentasPrincipal[data-fit="medium"]{
    font-size:28px !important;
  }

  .dashboard-hero #homeVentasPrincipal[data-fit="large"]{
    font-size:24px !important;
  }

  .dashboard-hero #homeVentasPrincipal[data-fit="xlarge"]{
    font-size:20px !important;
  }
}
.production-owner-title{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:12px;background:#fff7e8;border:1px solid #ead6b7;}
.production-owner-title span{font-size:.78rem;color:#6f6258;text-transform:uppercase;letter-spacing:.04em;}
.production-owner-title strong{font-size:1.15rem;color:#541301;}

/* Produccion compacta en telefono */
@media(max-width:860px){
  .production-page #view-estado-lista{
    margin-left:0;
    min-height:0;
    width:100%;
  }

  .production-page .simple-hero p{
    display:none !important;
  }

  .production-page #productionKpis{
    display:none !important;
  }

  .production-page .menu a[href$="index.html"]{
    display:none !important;
  }

  html[data-user-role="externo"] .production-page .menu a[href$="index.html"]{
    display:flex !important;
  }

  html[data-user-role="externo"] .topbar a[href$="index.html"]{
    display:none !important;
  }

  .production-page .topbar a[href$="index.html"]{
    display:none !important;
  }

  .production-page .production-kpis,
  .production-page .production-state-flow{
    gap:8px !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    margin:8px 0 14px !important;
  }

  .production-page .production-kpi{
    min-height:72px !important;
    padding:9px 10px !important;
  }

  .production-page .production-kpi span{
    font-size:10px !important;
    line-height:1.15 !important;
  }

  .production-page .production-kpi strong{
    font-size:22px !important;
    line-height:1 !important;
    margin-top:5px !important;
  }

  .production-page .state-flow-card,
  .production-page .control-orders-flow .state-flow-card{
    gap:4px !important;
    min-height:96px !important;
    padding:9px 10px !important;
  }

  .production-page .state-flow-card::after{
    font-size:17px !important;
    right:7px !important;
    top:5px !important;
  }

  .production-page .state-flow-card span{
    font-size:9px !important;
  }

  .production-page .state-flow-card strong{
    font-size:15px !important;
    line-height:1.05 !important;
  }

  .production-page .state-flow-card b{
    font-size:30px !important;
  }

  .production-page .state-flow-card em{
    font-size:10px !important;
  }

  .production-page .control-orders-grid{
    gap:8px !important;
  }

  .production-page .control-order-card{
    gap:7px !important;
    min-height:0 !important;
    padding:10px !important;
  }

  .production-page .control-order-card-head strong,
  .production-page .control-order-card-main b{
    font-size:14px !important;
  }

  .production-page .control-order-card-main p,
  .production-page .control-order-card-main small{
    font-size:11px !important;
  }

  .production-page .control-order-card-meta{
    gap:5px !important;
  }

  .production-page .control-order-card-meta span{
    font-size:8px !important;
  }

  .production-page .control-order-card-foot{
    padding-top:6px !important;
  }

  /* Detalle de orden compacto para aprovechar mejor la pantalla del telefono. */
  .production-page #view-detalle{
    padding:10px !important;
  }

  .production-page #view-detalle .detail-title-row{
    gap:6px !important;
    margin-bottom:10px !important;
  }

  .production-page #view-detalle .detail-title-row h2{
    font-size:18px !important;
    line-height:1.05 !important;
  }

  .production-page #view-detalle .detail-title-row p{
    font-size:10px !important;
    line-height:1.2 !important;
    margin-top:3px !important;
  }

  .production-page #view-detalle .production-detail-grid{
    gap:8px !important;
  }

  .production-page #view-detalle .detail-section{
    border-radius:10px !important;
    padding:10px !important;
  }

  .production-page #view-detalle .detail-section h3{
    font-size:14px !important;
    line-height:1.1 !important;
    margin-bottom:7px !important;
  }

  .production-page #view-detalle .detail-section h4{
    font-size:11px !important;
    margin:8px 0 5px !important;
  }

  .production-page #view-detalle .profile-line{
    gap:8px !important;
    min-height:0 !important;
    padding:5px 0 !important;
  }

  .production-page #view-detalle .profile-line span,
  .production-page #view-detalle .profile-line strong{
    font-size:10px !important;
    line-height:1.2 !important;
  }

  .production-page #view-detalle .detail-section label{
    font-size:10px !important;
    gap:4px !important;
    margin-bottom:7px !important;
  }

  .production-page #view-detalle .detail-section input,
  .production-page #view-detalle .detail-section select,
  .production-page #view-detalle .detail-section textarea{
    border-radius:8px !important;
    font-size:11px !important;
    min-height:34px !important;
    padding:6px 8px !important;
  }

  .production-page #view-detalle .detail-section textarea{
    min-height:58px !important;
  }

  .production-page #view-detalle .production-owner-title,
  .production-page #view-detalle .approval-note,
  .production-page #view-detalle .production-upload-box,
  .production-page #view-detalle .design-linked-card{
    border-radius:9px !important;
    gap:5px !important;
    margin-bottom:7px !important;
    padding:7px 8px !important;
  }

  .production-page #view-detalle .production-owner-title span,
  .production-page #view-detalle .approval-note p,
  .production-page #view-detalle .design-linked-card span,
  .production-page #view-detalle .production-design-head small{
    font-size:9px !important;
    line-height:1.2 !important;
  }

  .production-page #view-detalle .production-owner-title strong,
  .production-page #view-detalle .approval-note strong,
  .production-page #view-detalle .design-linked-card strong,
  .production-page #view-detalle .design-linked-card b{
    font-size:11px !important;
    line-height:1.2 !important;
  }

  .production-page #view-detalle .production-design-grid{
    gap:5px !important;
  }

  .production-page #view-detalle .production-design-grid div,
  .production-page #view-detalle .production-design-file-row{
    border-radius:7px !important;
    min-height:30px !important;
    padding:5px 7px !important;
  }

  .production-page #view-detalle .file-stack,
  .production-page #view-detalle .design-linked-list,
  .production-page #view-detalle .production-upload-controls{
    gap:5px !important;
  }

  .production-page #view-detalle .file-chip{
    font-size:9px !important;
    padding:4px 6px !important;
  }

  .production-page #view-detalle .file-upload-btn{
    border-width:1px !important;
    min-height:38px !important;
    padding:6px 8px !important;
  }

  .production-page #view-detalle .file-upload-btn span{
    font-size:10px !important;
  }

  .production-page #view-detalle .file-upload-btn small{
    font-size:8px !important;
  }

  .production-page #view-detalle .b2b-actions{
    display:grid !important;
    gap:6px !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    margin-top:8px !important;
  }

  .production-page #view-detalle .b2b-actions button,
  .production-page #view-detalle .b2b-actions a{
    font-size:10px !important;
    min-height:34px !important;
    padding:6px 8px !important;
    width:100% !important;
  }
}

.quotation-editor-title{margin-bottom:18px;}
.quotation-editor-title p{margin-top:6px;}
.quotation-editor-grid{
  display:grid;
  gap:18px;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.quotation-editor-wide,
.quotation-editor-actions,
.quotation-editor-status{grid-column:1/-1;}
.quotation-editor-grid textarea{
  border:2px solid #d6d6c0;
  border-radius:12px;
  font:inherit;
  font-weight:700;
  padding:12px;
  resize:vertical;
  width:100%;
}
.quotation-editor-actions{
  display:flex;
  gap:12px;
  justify-content:flex-end;
}
.quotation-editor-status{
  color:#541301;
  font-size:13px;
  font-weight:900;
  min-height:20px;
}
@media(max-width:860px){
  .quotation-editor-grid{grid-template-columns:1fr;}
  .quotation-editor-actions{flex-direction:column;}
  .quotation-editor-actions button{width:100%;}
}

/* Carga inicial del Dashboard */
.dashboard-data-region{
  min-height:calc(100vh - 92px);
  position:relative;
}
.dashboard-loading-screen{
  align-items:center;
  background:rgba(255,247,232,.98);
  display:flex;
  inset:0;
  justify-content:center;
  opacity:1;
  padding:24px;
  position:absolute;
  transition:opacity .3s ease,visibility .3s ease;
  visibility:visible;
  z-index:40;
}
.dashboard-loading-screen.is-leaving{
  opacity:0;
  pointer-events:none;
  visibility:hidden;
}
.dashboard-loading-card{
  align-items:center;
  color:#541301;
  display:flex;
  flex-direction:column;
  text-align:center;
}
.dashboard-loading-mark{
  height:126px;
  margin-bottom:20px;
  position:relative;
  width:126px;
}
.dashboard-loading-mark img{
  background:#fff;
  border:4px solid #541301;
  border-radius:50%;
  box-shadow:5px 5px 0 #541301;
  height:82px;
  left:22px;
  object-fit:contain;
  padding:8px;
  position:absolute;
  top:22px;
  width:82px;
  z-index:2;
}
.dashboard-loading-ring{
  border:5px solid transparent;
  border-radius:50%;
  inset:4px;
  position:absolute;
}
.dashboard-loading-ring.ring-one{
  animation:dashboard-loader-spin 1.15s linear infinite;
  border-left-color:#ff7a00;
  border-right-color:#ff7a00;
}
.dashboard-loading-ring.ring-two{
  animation:dashboard-loader-spin-reverse 1.7s linear infinite;
  border-bottom-color:#ffd21f;
  border-top-color:#ffd21f;
  inset:13px;
}
.dashboard-loading-card strong{
  font-size:22px;
  font-weight:900;
}
.dashboard-loading-card p{
  color:#756963;
  font-size:13px;
  font-weight:800;
  margin-top:7px;
}
.dashboard-loading-dots{
  display:flex;
  gap:7px;
  margin-top:18px;
}
.dashboard-loading-dots i{
  animation:dashboard-loader-bounce .9s ease-in-out infinite;
  background:#541301;
  border-radius:50%;
  height:9px;
  width:9px;
}
.dashboard-loading-dots i:nth-child(2){animation-delay:.14s;background:#ff7a00}
.dashboard-loading-dots i:nth-child(3){animation-delay:.28s;background:#ffd21f}
@keyframes dashboard-loader-spin{to{transform:rotate(360deg)}}
@keyframes dashboard-loader-spin-reverse{to{transform:rotate(-360deg)}}
@keyframes dashboard-loader-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media(prefers-reduced-motion:reduce){
  .dashboard-loading-ring,.dashboard-loading-dots i{animation-duration:2.5s}
}

/* Fondo personalizado del encabezado principal del Dashboard. */
.dashboard-hero{
  background-image:
    linear-gradient(90deg,rgba(255,247,232,.94) 0%,rgba(255,247,232,.84) 43%,rgba(255,247,232,.28) 70%,rgba(255,247,232,.12) 100%),
    url("../../IMG/dashboard-hero-stickers.png");
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  isolation:isolate;
  overflow:hidden;
}
.dashboard-hero>div{
  position:relative;
  z-index:1;
}
.dashboard-hero .summary-card.dark{
  background:rgba(84,19,1,.94);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
.dashboard-hero .summary-card.dark p{
  color:#fff7e8;
  opacity:.92;
}
@media(max-width:860px){
  .dashboard-hero{
    background-image:
      linear-gradient(rgba(255,247,232,.86),rgba(255,247,232,.76)),
      url("../../IMG/dashboard-hero-stickers.png");
    background-position:center;
  }
}

/* Bienvenida exclusiva al iniciar sesion */
body.special-welcome-open{overflow:hidden!important}
.special-account-welcome{
  align-items:center;
  background:rgba(20,15,12,.94);
  display:flex;
  inset:0;
  justify-content:center;
  opacity:1;
  padding:18px;
  position:fixed;
  transition:opacity .25s ease;
  z-index:30000;
}
.special-account-welcome.is-leaving{opacity:0;pointer-events:none}
.special-account-welcome-card{
  align-items:center;
  display:flex;
  flex-direction:column;
  gap:16px;
  max-height:96vh;
  max-width:min(94vw,620px);
}
.special-account-welcome-card img{
  background:#fff;
  border:5px solid #541301;
  border-radius:20px;
  box-shadow:8px 8px 0 #ffd21f;
  display:block;
  max-height:calc(96vh - 76px);
  max-width:100%;
  object-fit:contain;
}
.special-account-welcome-card button{
  background:#ffd21f;
  border:3px solid #541301;
  border-radius:999px;
  box-shadow:4px 4px 0 #541301;
  color:#541301;
  cursor:pointer;
  font-size:15px;
  font-weight:900;
  min-height:46px;
  padding:10px 24px;
}
.special-account-welcome-card button:hover{
  box-shadow:6px 6px 0 #541301;
  transform:translate(-2px,-2px) rotate(-1deg);
}
@media(max-width:520px){
  .special-account-welcome{padding:12px}
  .special-account-welcome-card img{border-radius:14px;box-shadow:5px 5px 0 #ffd21f}
}

/* Distinct stage colors for the production screen. */
.production-page .state-flow-card[data-state="Produccion"],
.production-page .production-status-badge[data-state="Produccion"] {
  background:#C8ABF5;
  color:var(--cs-dark);
}
.production-page .state-flow-card[data-state="Tarima"],
.production-page .production-status-badge[data-state="Tarima"] {
  background:#9A603D;
  color:var(--white);
}

.production-page .simple-hero::after {
  content:none;
  display:none;
}
.production-dashboard-return {
  align-items:center;
  background:var(--pink);
  border:3px solid var(--cs-dark);
  border-radius:52% 48% 46% 54%;
  box-shadow:3px 3px 0 var(--cs-dark);
  color:var(--cs-dark);
  cursor:pointer;
  display:flex;
  font-size:28px;
  font-weight:900;
  height:46px;
  justify-content:center;
  line-height:1;
  padding:0 0 3px;
  position:absolute;
  right:18px;
  top:18px;
  transform:rotate(12deg);
  transition:transform .15s ease, box-shadow .15s ease;
  width:46px;
  z-index:2;
}
.production-dashboard-return:hover,
.production-dashboard-return:focus-visible {
  box-shadow:5px 5px 0 var(--cs-dark);
  outline:none;
  transform:translate(-2px,-2px) rotate(4deg);
}
.production-dashboard-return:active {
  box-shadow:1px 1px 0 var(--cs-dark);
  transform:translate(2px,2px) rotate(12deg);
}

.production-page .state-flow-card::after {
  content:none;
  display:none;
}
.production-page .state-flow-card strong {
  font-size:28px;
  line-height:1.15;
}
@media(max-width:860px) {
  .production-page .state-flow-card strong {
    font-size:18px !important;
    line-height:1.15 !important;
  }
}

.control-order-card-main p.production-card-materials{
  display:block;
  overflow:visible;
  overflow-wrap:anywhere;
  -webkit-line-clamp:unset;
}

.production-page .production-status-badge.production-status-dot{
  display:inline-block;
  width:14px;
  height:14px;
  min-width:14px;
  padding:0;
  border:0;
  border-radius:50%;
  box-shadow:none;
  flex:0 0 14px;
}