/* Dent-iOS Labs · Notificaciones y tarjetas de Pedidos */

/* Badges */
#nav-notifications{position:relative}
.labs-notification-badge{position:absolute;right:12px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:#dc2626;color:#fff;font-size:10px;font-weight:800;line-height:1}
.sidebar.collapsed .labs-notification-badge{right:5px;top:7px;transform:none}
.labs-mobile-notification-badge{margin-left:auto;display:flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#dc2626;color:#fff;font-size:10px;font-weight:800}
.labs-notification-badge.hidden,.labs-mobile-notification-badge.hidden{display:none!important}

/* Toasts */
#notification-toast-host{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:12000;width:min(440px,calc(100vw - 28px));display:flex;flex-direction:column;gap:10px;pointer-events:none}
.notification-toast{--notification-color:#0f766e;position:relative;display:flex;align-items:stretch;background:#fff;border:1px solid color-mix(in srgb,var(--notification-color) 28%,#dbe3ea);border-left:5px solid var(--notification-color);border-radius:14px;box-shadow:0 18px 48px rgba(15,31,45,.24);overflow:hidden;opacity:0;transform:translateY(-18px) scale(.98);transition:opacity .22s ease,transform .22s ease;pointer-events:auto}
.notification-toast.is-visible{opacity:1;transform:translateY(0) scale(1)}
.notification-toast.is-leaving{opacity:0;transform:translateY(-10px) scale(.98)}
.notification-toast-main{display:flex;gap:12px;align-items:center;flex:1;min-width:0;text-align:left;padding:13px 8px 14px 15px;background:none;border:0;cursor:pointer;font-family:inherit}
.notification-toast-icon{display:grid;place-items:center;width:38px;height:38px;flex:0 0 auto;border-radius:11px;background:color-mix(in srgb,var(--notification-color) 12%,#fff);font-size:19px}
.notification-toast-main span:last-child{display:flex;flex-direction:column;gap:3px;min-width:0}
.notification-toast-main strong{font-size:13px;color:var(--ink)}
.notification-toast-main small{font-size:12px;line-height:1.35;color:var(--ink2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.notification-toast-close{align-self:flex-start;width:32px;height:32px;margin:7px;border:0;background:none;border-radius:8px;color:var(--ink3);font-size:20px;cursor:pointer}
.notification-toast-close:hover{background:var(--surface)}
.notification-toast-progress{position:absolute;left:0;bottom:0;width:100%;height:3px;background:var(--notification-color);transform-origin:left;animation:labsNotificationToastTime 7.5s linear forwards}
.notification-toast-progress.is-paused{animation-play-state:paused}
@keyframes labsNotificationToastTime{to{transform:scaleX(0)}}

/* Página de notificaciones */
.notifications-page{max-width:1180px}
.notifications-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.notifications-toolbar-primary,.notifications-toolbar-actions{display:flex;align-items:center;gap:12px}
#notifications-summary{margin:0;color:var(--ink3);font-size:13px;white-space:nowrap}
.notifications-segmented{display:flex;gap:4px;padding:4px;background:var(--surface);border-radius:10px}
.notifications-segmented button{border:0;background:transparent;color:var(--ink2);font:600 12px inherit;padding:7px 12px;border-radius:7px;cursor:pointer}
.notifications-segmented button:hover,.notifications-segmented button.is-active{background:#fff;color:var(--teal);box-shadow:0 1px 3px rgba(15,35,28,.08)}
#notifications-type-filter{padding:8px 11px;border:1px solid var(--border);border-radius:9px;background:#fff;color:var(--ink2);font:500 12px inherit}
.notifications-list{display:flex;flex-direction:column;gap:10px}
.notification-card{--notification-color:#0f766e;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;background:#fff;border:1px solid var(--border);border-left:4px solid var(--notification-color);border-radius:13px;overflow:hidden;transition:box-shadow .15s,border-color .15s}
.notification-card:hover{box-shadow:0 8px 22px rgba(21,42,58,.09)}
.notification-card.is-read{border-left-color:#cbd5e1;opacity:.72}
.notification-main{display:flex;align-items:center;gap:13px;min-width:0;padding:14px 16px;background:none;border:0;text-align:left;cursor:pointer;font-family:inherit}
.notification-icon{display:grid;place-items:center;width:40px;height:40px;flex:0 0 auto;border-radius:11px;background:color-mix(in srgb,var(--notification-color) 10%,#fff);font-size:19px}
.notification-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:4px}
.notification-meta{display:flex;gap:12px;justify-content:space-between;align-items:center}
.notification-meta strong{font-size:13px;color:var(--ink)}
.notification-meta time{font-size:10.5px;color:var(--ink3);white-space:nowrap}
.notification-message{font-size:12.5px;color:var(--ink2);line-height:1.4}
.notification-count{display:grid;place-items:center;min-width:28px;height:24px;padding:0 8px;border-radius:99px;background:var(--notification-color);color:#fff;font-size:11px;font-weight:800}
.notification-read-action{border:0;border-left:1px solid var(--border);background:var(--surface);padding:0 15px;color:var(--teal);font:600 11.5px inherit;cursor:pointer;white-space:nowrap}
.notification-card.is-read .notification-read-action{color:var(--ink3);cursor:default}
.notifications-empty{display:flex;min-height:260px;align-items:center;justify-content:center;flex-direction:column;gap:7px;border:1px dashed var(--border);border-radius:14px;color:var(--ink3)}
.notifications-empty span{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#e9f7ef;color:#0e8c5e;font-size:24px}
.notifications-empty strong{font-size:14px;color:var(--ink2)}
.notifications-empty small{font-size:12px}

/* Resumen de estados: una fila en escritorio */
.labs-orders-stage-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:14px}
.labs-stage-summary{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:10px;min-width:0;padding:12px 13px;border:1px solid var(--border);border-radius:13px;background:#fff;text-align:left;cursor:pointer;font-family:inherit;transition:border-color .15s,box-shadow .15s,transform .15s}
.labs-stage-summary:hover{transform:translateY(-1px);box-shadow:0 7px 18px rgba(15,35,28,.08)}
.labs-stage-summary.is-selected{border-color:var(--teal);box-shadow:0 0 0 2px color-mix(in srgb,var(--teal) 14%,transparent)}
.labs-stage-summary-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#eaf5f9;color:#176b85}
.labs-stage-summary-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.labs-stage-summary>span:last-child{display:grid;grid-template-columns:1fr auto;align-items:end;gap:1px 6px;min-width:0}
.labs-stage-summary small{font-size:11px;font-weight:750;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.labs-stage-summary strong{grid-column:2;grid-row:1/3;font-size:25px;line-height:1;color:var(--ink)}
.labs-stage-summary em{font-style:normal;font-size:9.5px;color:var(--ink3)}
.labs-stage-summary.is-ordered .labs-stage-summary-icon{background:#f3f4f6;color:#64748b}
.labs-stage-summary.is-design .labs-stage-summary-icon{background:#dbeafe;color:#1d4ed8}
.labs-stage-summary.is-fabrication .labs-stage-summary-icon{background:#ede9fe;color:#6d28d9}
.labs-stage-summary.is-sent .labs-stage-summary-icon{background:#fef3c7;color:#b45309}
.labs-stage-summary.is-delivered .labs-stage-summary-icon{background:#dcfce7;color:#15803d}

/* Lista y card de Pedidos */
.labs-order-card-list{display:flex;flex-direction:column;gap:12px}
.labs-order-card{display:grid;grid-template-columns:minmax(150px,.85fr) minmax(230px,1.35fr) minmax(175px,.9fr) minmax(145px,.75fr) auto;background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:0 2px 8px rgba(15,35,28,.035)}
.labs-order-card:hover{box-shadow:0 8px 22px rgba(15,35,28,.08)}
.labs-order-card-header{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 18px;background:#eaf5f9;border-bottom:1px solid #cfe2ea;color:#203b4d}
.labs-order-card-header strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:750}
.labs-order-card-header span{flex:0 0 auto;font-size:11px;font-weight:800;letter-spacing:.035em;color:#176b85}
.labs-order-card-section{display:flex;min-width:0;flex-direction:column;justify-content:center;gap:8px;padding:14px 16px;border-right:1px solid var(--border)}
.labs-order-card-field{display:flex;min-width:0;flex-direction:column;gap:3px}
.labs-order-card-field>span{font-size:9.5px;font-weight:750;letter-spacing:.055em;text-transform:uppercase;color:var(--ink3)}
.labs-order-card-field b,.labs-order-card-field strong{font-size:12.5px;line-height:1.35;color:var(--ink);overflow-wrap:anywhere}
.labs-order-card-meta{font-size:10.5px;line-height:1.35;color:var(--ink3)}
.labs-order-card-price{font-size:15px!important;color:var(--teal)!important}
.labs-order-card-paid{font-size:15px!important;color:var(--green)!important}
.labs-order-card-balance{font-size:15px!important;color:var(--ink)!important}
.labs-order-card-field .is-late{color:#dc2626}
.labs-order-card-field .is-today{color:#b45309}
.labs-order-card-status{align-items:stretch}
.labs-card-stage-button{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 7px;width:100%;padding:0;border:0;background:none;text-align:left;cursor:pointer;font-family:inherit}
.labs-card-stage-button .stage-pill{grid-column:1;justify-self:start}
.labs-card-stage-button small{grid-column:1;font-size:10px;color:var(--teal)}
.labs-card-stage-button svg{grid-column:2;grid-row:1/3;width:17px;height:17px;fill:none;stroke:var(--ink3);stroke-width:2;transition:transform .18s}
.labs-card-stage-button.is-open svg{transform:rotate(180deg)}
.labs-order-card-extras{font-size:11px}
.labs-order-card-actions{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px}
.labs-card-open,.labs-card-pay,.labs-card-delete{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;border:1px solid var(--border);border-radius:9px;background:#fff;color:var(--teal);font:700 11px inherit;cursor:pointer}
.labs-card-open{padding:0 10px}
.labs-card-pay{padding:0 14px;background:var(--teal);border-color:var(--teal);color:#fff}
.labs-card-pay:hover:not(:disabled){filter:brightness(1.08)}
.labs-card-pay:disabled{opacity:.45;cursor:not-allowed}
.labs-card-delete{width:34px;color:#b91c1c}
.labs-card-open svg,.labs-card-delete svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.labs-card-open:hover{background:#eaf5f9;border-color:#b7d8e5}
.labs-card-delete:hover{background:#fef2f2;border-color:#fecaca}
.labs-order-card-flow{grid-column:1/-1;padding:16px 18px 18px;border-top:1px solid #cfe2ea;background:#fbfdfe}
.labs-order-card-flow-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.labs-order-card-flow-title strong{font-size:13px;color:var(--ink)}
.labs-order-card-flow-title span{font-size:10.5px;color:var(--ink3)}
.labs-order-card-flow .tl-wrap{margin:0}
.labs-card-flow-error{margin:0;color:#b91c1c;font-size:12px}

@media(max-width:1120px) and (min-width:769px){
  .labs-orders-stage-summary{grid-template-columns:repeat(5,minmax(125px,1fr));overflow-x:auto;padding-bottom:4px}
  .labs-order-card{grid-template-columns:minmax(150px,1fr) minmax(210px,1.3fr) minmax(170px,1fr) minmax(135px,.8fr)}
  .labs-order-card-actions{grid-column:1/-1;justify-content:flex-end;border-top:1px solid var(--border);padding:8px 12px}
}

@media(max-width:768px){
  #notification-toast-host{top:10px}
  .notification-toast-main{padding-left:12px}
  .notifications-page{padding-top:10px}
  .notifications-toolbar{align-items:stretch;flex-direction:column}
  .notifications-toolbar-primary{align-items:stretch;flex-direction:column;gap:8px}
  .notifications-toolbar-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
  .notifications-segmented{display:grid;grid-template-columns:repeat(3,1fr)}
  .notifications-segmented button{padding-inline:6px}
  #notifications-type-filter{width:100%}
  .notification-card{grid-template-columns:1fr}
  .notification-main{padding:12px;gap:10px}
  .notification-icon{width:36px;height:36px}
  .notification-meta{align-items:flex-start;flex-direction:column;gap:2px}
  .notification-count{margin-left:auto}
  .notification-read-action{border-left:0;border-top:1px solid var(--border);padding:9px 12px;text-align:right}

  .labs-orders-stage-summary{grid-template-columns:repeat(3,minmax(112px,1fr));overflow-x:auto;gap:8px;padding-bottom:5px;margin-bottom:10px}
  .labs-stage-summary{grid-template-columns:34px minmax(0,1fr);gap:7px;padding:9px}
  .labs-stage-summary-icon{width:34px;height:34px}
  .labs-stage-summary-icon svg{width:17px;height:17px}
  .labs-stage-summary strong{font-size:20px}
  .labs-stage-summary em{display:none}
  .labs-order-card{display:flex;flex-direction:column}
  .labs-order-card-header{padding:10px 13px}
  .labs-order-card-section{padding:11px 13px;border-right:0;border-bottom:1px solid var(--border)}
  .labs-order-card-identity,.labs-order-card-finance{display:grid;grid-template-columns:1fr 1fr;align-items:start}
  .labs-order-card-identity .labs-order-card-meta,.labs-order-card-finance .labs-order-card-meta{grid-column:1/-1}
  .labs-order-card-actions{justify-content:flex-end;padding:9px 12px}
  .labs-order-card-flow{padding:13px}
  .labs-order-card-flow-title{align-items:flex-start;flex-direction:column;gap:3px}
  .labs-order-card-flow .olab-flow-control-grid{grid-template-columns:1fr!important}
  .labs-order-card-flow .olab-flow-control>div:last-child{grid-template-columns:1fr!important}
}

@media(max-width:420px){
  .notifications-toolbar-actions{grid-template-columns:1fr}
  .labs-orders-stage-summary{grid-template-columns:repeat(2,minmax(118px,1fr))}
  .labs-order-card-identity,.labs-order-card-finance{grid-template-columns:1fr}
}


/* Estado circular: resumen visible; el flujo completo vive únicamente en la ficha OLAB. */
.labs-card-stage{--stage-color:#64748b;--stage-soft:#f1f5f9;display:grid;justify-items:center;gap:3px;width:100%;text-align:center;color:var(--stage-color)}
.labs-card-stage.is-stage-1{--stage-color:#2563eb;--stage-soft:#dbeafe}
.labs-card-stage.is-stage-2{--stage-color:#7c3aed;--stage-soft:#ede9fe}
.labs-card-stage.is-stage-3{--stage-color:#b45309;--stage-soft:#fef3c7}
.labs-card-stage.is-stage-4{--stage-color:#15803d;--stage-soft:#dcfce7}
.labs-card-stage-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--stage-color);color:#fff;box-shadow:0 0 0 4px var(--stage-soft)}
.labs-card-stage-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.labs-card-stage strong{margin-top:3px;font-size:11px;color:var(--stage-color)}
.labs-card-stage time{font-size:9px;color:var(--ink3)}
.labs-card-open{min-width:112px}
.labs-card-pay{min-width:78px}