/* Órdenes de Laboratorio · cristal líquido. Aislado bajo .ord para no alterar otros módulos. */
.ord{--ord-ink:#10213d;--ord-muted:#667792;--ord-line:rgba(105,128,171,.2);--ord-blue:#2477f3;--ord-cyan:#19b8d5;--ord-violet:#7868ef;--ord-green:#1f9d73;--ord-amber:#d98b16;--ord-red:#d94f67;--ord-pink:#d9508f;--ord-teal:#0d9b79;color:var(--ord-ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif}
.ord *{box-sizing:border-box}

/* --- Modal shell --- */
.ord.modal-overlay{background:rgba(18,33,61,.32);backdrop-filter:blur(14px) saturate(120%);-webkit-backdrop-filter:blur(14px) saturate(120%)}
/* max-width/padding con !important: .modal-content global impone max-width:700px y padding:32px */
.ord .ord-panel{width:96vw!important;max-width:1340px!important;max-height:94vh!important;padding:0!important;overflow:hidden!important;display:flex;flex-direction:column;border-radius:30px;background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(244,249,255,.92));border:1px solid rgba(255,255,255,.95);box-shadow:0 30px 90px rgba(18,38,75,.3),inset 0 1px 0 #fff;animation:ordPanelIn .24s cubic-bezier(.2,.8,.2,1)}
@keyframes ordPanelIn{from{transform:translateY(10px) scale(.988);opacity:0}to{transform:none;opacity:1}}

.ord-head{position:relative;flex:none;padding:18px 28px;background:linear-gradient(135deg,#0f172a 0%,#1e2b47 55%,#1e293b 100%);overflow:hidden}
.ord-head::after{content:"";position:absolute;inset:auto -6% -140% 28%;height:220%;background:linear-gradient(102deg,transparent,rgba(255,255,255,.09),transparent);transform:rotate(-9deg);pointer-events:none}
.ord-head-row{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:16px}
.ord-kicker{display:flex;align-items:center;gap:8px;color:#5ec8ff;font-size:.65rem;font-weight:850;letter-spacing:.15em;text-transform:uppercase;margin-bottom:3px}
.ord-kicker::before{content:"";width:20px;height:1px;background:currentColor}
.ord-title{margin:0;display:flex;align-items:center;gap:10px;color:#fff;font-size:1.35rem;font-weight:850;letter-spacing:-.03em}
.ord-title .material-symbols-outlined{font-size:1.7rem;color:#5ec8ff}
.ord-head-actions{display:flex;gap:9px}
.ord-icon-btn{width:40px;height:40px;border-radius:13px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s,background .15s}
.ord-icon-btn:hover{background:rgba(255,255,255,.15);transform:translateY(-1px)}
.ord-icon-btn.danger{background:#f43f5e;border-color:transparent}
.ord-icon-btn.danger:hover{background:#e11d48}

.ord-body{flex:1;overflow-y:auto;padding:20px 28px;background:radial-gradient(circle at 10% 0,rgba(82,169,255,.08),transparent 30%),radial-gradient(circle at 92% 6%,rgba(139,113,255,.07),transparent 32%),#f5f8fc}

.ord-footer{flex:none;display:flex;justify-content:flex-end;gap:10px;padding:15px 28px;background:rgba(255,255,255,.92);border-top:1px solid rgba(105,130,172,.14);backdrop-filter:blur(14px)}

/* --- Cards / glass surfaces --- */
.ord-card{position:relative;background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(255,255,255,.6));border:1px solid rgba(255,255,255,.9);border-radius:20px;box-shadow:0 10px 30px rgba(54,82,130,.07),inset 0 1px 0 rgba(255,255,255,.9);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);padding:16px}
/* backdrop-filter crea contexto de apilamiento en cada .ord-card, así que un z-index alto
   dentro de una tarjeta no puede superar a las tarjetas que vienen después en el DOM.
   Estas capas elevan las tarjetas que contienen desplegables por encima de las siguientes. */
.ord-layer-2{z-index:30}
.ord-layer-1{z-index:20}
.ord-card + .ord-card{margin-top:14px}
.ord-card-title{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:820;text-transform:uppercase;letter-spacing:.03em;color:var(--ord-ink);margin-bottom:12px}
.ord-card-title .material-symbols-outlined{font-size:1.15rem}
.ord-grid-2{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:14px}
.ord-grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
@media(max-width:900px){.ord-grid-2{grid-template-columns:1fr}}

/* --- Inputs --- */
.ord input,.ord select,.ord textarea{width:100%;min-width:0;border:1.5px solid rgba(118,139,178,.25);border-radius:12px;background:rgba(255,255,255,.85);color:var(--ord-ink);padding:10px 12px;font:600 .84rem/1.35 Inter,-apple-system,sans-serif;transition:border-color .15s,box-shadow .15s,background .15s}
.ord input:hover,.ord select:hover,.ord textarea:hover{border-color:rgba(71,119,202,.4)}
.ord input:focus,.ord select:focus,.ord textarea:focus{outline:none;border-color:var(--ord-blue);box-shadow:0 0 0 3px rgba(36,119,243,.15)}
.ord textarea{resize:vertical;min-height:64px}
.ord label.ord-label{display:block;font-size:.65rem;font-weight:800;color:var(--ord-muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:5px}

/* --- Segmented control (tipo de orden) --- */
.ord-segmented{display:inline-flex;gap:4px;padding:4px;border-radius:14px;background:rgba(15,23,42,.06);border:1px solid rgba(15,23,42,.08)}
.ord-segmented button{border:0;background:transparent;padding:9px 18px;border-radius:11px;font:750 .8rem/1 Inter,-apple-system,sans-serif;color:var(--ord-muted);cursor:pointer;display:flex;align-items:center;gap:7px;transition:background .18s,color .18s,box-shadow .18s}
.ord-segmented button .material-symbols-outlined{font-size:1.1rem}
.ord-segmented button.active{background:#fff;color:var(--ord-blue);box-shadow:0 4px 14px rgba(36,119,243,.18)}

/* --- Tag picker (tipo de lente / tratamientos) --- */
.ord-tag-picker{position:relative}
.ord-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.ord-tags:empty{margin-bottom:0}
.ord-tag{display:inline-flex;align-items:center;gap:5px;padding:5px 6px 5px 11px;border-radius:999px;background:linear-gradient(135deg,rgba(36,119,243,.12),rgba(120,104,239,.12));color:#25498c;border:1px solid rgba(36,119,243,.22);font-size:.72rem;font-weight:750}
.ord-tag.from-inventory{background:linear-gradient(135deg,rgba(31,157,115,.13),rgba(13,155,121,.13));color:#0f6b4e;border-color:rgba(31,157,115,.25)}
.ord-tag button{border:0;background:rgba(255,255,255,.6);color:inherit;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;cursor:pointer;font-size:.85rem;line-height:1}
.ord-tag button:hover{background:#fff}
.ord-tag-input{width:100%}
.ord-tag-dropdown{display:none;position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:40;max-height:220px;overflow-y:auto;border-radius:14px;background:rgba(255,255,255,.98);border:1px solid rgba(105,128,171,.2);box-shadow:0 16px 40px rgba(18,38,75,.18);padding:6px}
.ord-tag-dropdown.open{display:block}
.ord-tag-option{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:10px;cursor:pointer;font-size:.78rem;font-weight:650;color:var(--ord-ink)}
.ord-tag-option:hover{background:#f1f6ff}
.ord-tag-option .tag-src{font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--ord-muted)}
.ord-tag-option.inventory .tag-src{color:#1f9d73}
.ord-tag-empty{padding:10px;font-size:.72rem;color:var(--ord-muted);text-align:center}

/* --- Status select / badges (8 estados) --- */
.ord-status-select{font-weight:800;color:#fff;background:#0f172a;text-align:center;border:none;border-radius:12px}
.ord-status-select option{color:#0f172a;background:#fff}
.ord-status{display:inline-flex;align-items:center;gap:6px;width:max-content;border-radius:999px;padding:6px 11px;font-size:.66rem;font-weight:820;background:var(--status-bg,#edf5ff);color:var(--status-color,#2569c7);border:1px solid color-mix(in srgb,var(--status-color,#2569c7) 18%,transparent)}
.ord-status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 16%,transparent)}
.ord-status.status-cotizado{--status-bg:#eef2ff;--status-color:#4338ca}
.ord-status.status-al-lab{--status-bg:#e0f2fe;--status-color:#0369a1}
.ord-status.status-en-optica{--status-bg:#fff7ed;--status-color:#c2410c}
.ord-status.status-control-cal{--status-bg:#f3e8ff;--status-color:#7e22ce}
.ord-status.status-aprobado{--status-bg:#ecfdf5;--status-color:#0f9d73}
.ord-status.status-no-aprobado{--status-bg:#fef2f2;--status-color:#dc2626}
.ord-status.status-entregado{--status-bg:#f0fdf4;--status-color:#16a34a}
.ord-status.status-garantia{--status-bg:#fdf2f8;--status-color:#be185d}

/* --- Status quick-picker grid (SweetAlert popup, no .ord ancestor) --- */
.ord-choice-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:6px}
.ord-choice-btn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;border-radius:15px;border:1.5px solid rgba(105,128,171,.18);background:rgba(255,255,255,.7);cursor:pointer;font-size:.68rem;font-weight:750;color:var(--ord-ink);transition:transform .15s,box-shadow .15s,border-color .15s}
.ord-choice-btn .material-symbols-outlined{font-size:1.3rem}
.ord-choice-btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(36,119,243,.15);border-color:rgba(36,119,243,.35)}
.ord-choice-btn.current-status{opacity:.5;cursor:default;transform:none;border-style:dashed}
.ord-choice-btn.choice-cotizado:hover{border-color:#4338ca;color:#4338ca;background:#eef2ff}
.ord-choice-btn.choice-al-lab:hover{border-color:#0369a1;color:#0369a1;background:#e0f2fe}
.ord-choice-btn.choice-en-optica:hover{border-color:#c2410c;color:#c2410c;background:#fff7ed}
.ord-choice-btn.choice-control-cal:hover{border-color:#7e22ce;color:#7e22ce;background:#f3e8ff}
.ord-choice-btn.choice-aprobado:hover{border-color:#0f9d73;color:#0f9d73;background:#ecfdf5}
.ord-choice-btn.choice-no-aprobado:hover{border-color:#dc2626;color:#dc2626;background:#fef2f2}
.ord-choice-btn.choice-entregado:hover{border-color:#16a34a;color:#16a34a;background:#f0fdf4}
.ord-choice-btn.choice-garantia:hover{border-color:#be185d;color:#be185d;background:#fdf2f8}
@media(max-width:640px){.ord-choice-grid{grid-template-columns:repeat(2,1fr)}}

/* --- Refracción (grids OD/OS + contacto) --- */
.ord-eye-card{background:rgba(248,250,252,.75);border:1px solid rgba(203,213,225,.6);border-radius:15px;padding:14px}
.ord-eye-tag{display:inline-block;padding:3px 8px;border-radius:6px;font-size:.68rem;font-weight:900;color:#fff}
.ord-eye-tag.od{background:#3b82f6}
.ord-eye-tag.os{background:#06b6d4}
.ord-eye-fields{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.ord-eye-fields.contact{grid-template-columns:repeat(3,1fr)}

@media(max-width:760px){
  .ord-grid-2{grid-template-columns:1fr}
  .ord-eye-fields{grid-template-columns:repeat(2,1fr)}
  .ord .ord-panel{border-radius:22px 22px 0 0}
}

/* --- Dark mode --- */
[data-theme="dark"] .ord{--ord-ink:#edf5ff;--ord-muted:#a5b4ca}
[data-theme="dark"] .ord .ord-panel{background:linear-gradient(145deg,rgba(24,39,62,.95),rgba(20,29,50,.9));border-color:rgba(255,255,255,.09)}
[data-theme="dark"] .ord .ord-body{background:#0f1524}
[data-theme="dark"] .ord .ord-footer{background:rgba(20,29,50,.92);border-color:rgba(255,255,255,.08)}
[data-theme="dark"] .ord .ord-card{background:linear-gradient(145deg,rgba(30,41,59,.8),rgba(24,33,50,.6));border-color:rgba(255,255,255,.08)}
[data-theme="dark"] .ord input,[data-theme="dark"] .ord select,[data-theme="dark"] .ord textarea{background:rgba(16,29,49,.8);color:#edf5ff;border-color:rgba(255,255,255,.12)}
[data-theme="dark"] .ord-eye-card{background:rgba(15,23,42,.6);border-color:rgba(255,255,255,.08)}
[data-theme="dark"] .ord-segmented{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1)}
[data-theme="dark"] .ord-segmented button.active{background:#1e293b;color:#7dd3fc}
[data-theme="dark"] .ord-tag-dropdown{background:rgba(20,29,50,.98);border-color:rgba(255,255,255,.1)}
[data-theme="dark"] .ord-tag-option:hover{background:rgba(255,255,255,.06)}