/* ── Medizin Portal — Estilos globales ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --primary:      #5B8DB8;
  --primary-dark: #3d6b91;
  --teal:         #3DBFBF;
  --coral:        #E8402A;
  --orange:       #F5A623;
  --gray-text:    #555555;
  --gray-light:   #f4f6f9;
  --gray-border:  #dde1e9;
  --white:        #ffffff;
  --shadow-sm:    0 1px 4px rgba(0,0,0,0.08);
  --shadow:       0 2px 12px rgba(0,0,0,0.10);
  --radius:       10px;
  --radius-sm:    6px;
  --nav-h:        58px;
  --text-heading: #333333;
  --text-muted:   #999999;
  --text-subtle:  #bbbbbb;
  --hover-row:    #fafbfc;

  --s-envio_pendiente:    #94A3B8;
  --s-enviado:            #5B8DB8;
  --s-pendiente_oc:       #F5A623;
  --s-por_agendar:        #06B6D4;
  --s-acuerdo_comercial:  #9B59B6;
  --s-realizado_sin_oc:   #EF4444;
  --s-por_facturar:       #F97316;
  --s-facturado:          #27AE60;
  --s-nulo:               #6B7280;
}

/* Páginas embedidas dentro del shell v2 (iframe del hub) — la navbar del
   portal no se renderiza, por lo que --nav-h debe ser 0. Esto reposiciona
   automáticamente cualquier elemento que use var(--nav-h) (toolbars fixed,
   paddings, calc(100vh - --nav-h), etc.). */
body.mz-embed { --nav-h: 0px; }

/* ── DARK THEME ── */
html[data-theme="dark"] {
  --primary:      #82C0E8;
  --primary-dark: #6BAED8;
  --teal:         #5EDEDE;
  --coral:        #F47060;
  --orange:       #F5C050;
  --gray-text:    #D5DAE2;
  --gray-light:   #0D1117;
  --gray-border:  #2D3648;
  --white:        #151B28;
  --shadow-sm:    0 1px 4px rgba(0,0,0,0.5);
  --shadow:       0 2px 12px rgba(0,0,0,0.6);
  --text-heading: #EEF0F4;
  --text-muted:   #8B95A5;
  --hover-row:    #1C2435;
  --text-subtle:  #7A8494;

  --s-envio_pendiente:    #8B95A5;
  --s-enviado:            #82C0E8;
  --s-pendiente_oc:       #F5C050;
  --s-por_agendar:        #5EDEDE;
  --s-acuerdo_comercial:  #C090E0;
  --s-realizado_sin_oc:   #F47060;
  --s-por_facturar:       #F5A050;
  --s-facturado:          #48E080;
  --s-nulo:               #8B95A5;
}

html[data-theme="dark"] .badge-enviado            { background: #1A2C44; color: #82C0E8; }
html[data-theme="dark"] .badge-pendiente_oc       { background: #2E2510; color: #F5C050; }
html[data-theme="dark"] .badge-acuerdo_comercial  { background: #28183C; color: #C090E0; }
html[data-theme="dark"] .badge-facturado          { background: #102E1C; color: #48E080; }
html[data-theme="dark"] .badge-realizado_sin_oc   { background: #1C242E; color: #9AABB8; }
html[data-theme="dark"] .badge-por_agendar        { background: #103040; color: #5EDEDE; }
html[data-theme="dark"] .badge-por_facturar       { background: #2E1810; color: #F5A050; }
html[data-theme="dark"] .badge-nulo               { background: #1C242E; color: #8B95A5; }
html[data-theme="dark"] .badge-envio_pendiente    { background: #1C242E; color: #94A3B8; }
html[data-theme="dark"] .modal-overlay            { background: rgba(0,0,0,0.7); }
html[data-theme="dark"] select option             { background: var(--white); color: var(--gray-text); }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--gray-text);
  background: var(--gray-light);
  min-height: 100vh;
  transition: background .2s, color .2s;
}

/* ── Navbar ── */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: var(--nav-h);
  background: var(--white);
  border-bottom: 1px solid var(--gray-border);
  box-shadow: var(--shadow-sm);
  display: flex; align-items: center;
  padding: 0 24px; gap: 16px;
  transition: background .2s;
}
.navbar .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.navbar .logo img { height: 40px; max-width: 180px; object-fit: contain; }

/* ── Logo theme-aware (muestra la versión apropiada según el tema) ── */
.theme-logo-dark  { display: none; }
.theme-logo-light { display: inline-block; }
html[data-theme="dark"] .theme-logo-light { display: none; }
html[data-theme="dark"] .theme-logo-dark  { display: inline-block; }
.navbar .logo-text { font-size: 13px; font-weight: 600; color: var(--primary-dark); line-height: 1.3; }
.navbar .logo-text span { display: block; font-size: 10px; font-weight: 400; color: var(--text-muted); }
.navbar nav { display: flex; gap: 4px; margin-left: 16px; }
.navbar nav a {
  padding: 6px 12px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 500; color: var(--gray-text);
  text-decoration: none; transition: background .15s, color .15s;
}
.navbar nav a:hover, .navbar nav a.active {
  background: var(--gray-light); color: var(--primary);
}
/* Módulos "Próximamente" en la navbar (placeholders no clickeables) */
.navbar nav .locked {
  padding: 6px 12px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 500;
  color: var(--text-muted);
  opacity: 0.55; cursor: not-allowed;
  user-select: none;
}
.navbar nav .locked:hover { background: transparent; }

/* Botón "Formulario de Sugerencias" — compacto, 2 líneas, en el lado derecho */
.navbar .user-area .btn-sugerencias {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 8px; border-radius: var(--radius-sm);
  border: 1px solid var(--gray-border);
  font-size: 10px; line-height: 1.15; font-weight: 600;
  color: var(--primary-dark);
  text-decoration: none; text-align: center;
  transition: all .15s;
  white-space: normal; max-width: 110px;
}
.navbar .user-area .btn-sugerencias:hover {
  background: var(--primary); color: #fff; border-color: var(--primary);
}

/* Marquee informativo (centro de la navbar) */
.navbar-marquee {
  flex: 1; overflow: hidden; min-width: 200px;
  margin: 0 20px; position: relative;
  mask-image: linear-gradient(to right, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
}
.marquee-track {
  display: inline-flex; gap: 80px;
  white-space: nowrap;
  animation: marquee-scroll 25s linear infinite;
  will-change: transform;
  padding-left: 100%;
}
.marquee-item {
  font-size: 12px; color: var(--text-muted);
  font-weight: 500; letter-spacing: .3px;
}
@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
.navbar-marquee:hover .marquee-track { animation-play-state: paused; }

/* Botón Admin en user-area */
.navbar .user-area .btn-admin {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--gray-border);
  font-size: 11px; font-weight: 600;
  color: var(--primary-dark);
  text-decoration: none;
  transition: all .15s;
}
.navbar .user-area .btn-admin:hover,
.navbar .user-area .btn-admin.active {
  background: var(--primary); color: #fff; border-color: var(--primary);
}
.navbar .user-area {
  display: flex; align-items: center; gap: 10px; margin-left: auto;
}
.navbar .user-area img {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid var(--primary); object-fit: cover;
}
.navbar .user-area .user-info { text-align: right; }
.navbar .user-area .user-name { font-size: 12px; font-weight: 600; color: var(--text-heading); }
.navbar .user-area .user-role {
  font-size: 10px; color: var(--text-muted);
  text-transform: capitalize;
}
.navbar .btn-logout {
  padding: 5px 10px; border-radius: var(--radius-sm);
  background: none; border: 1px solid var(--gray-border);
  font-size: 11px; color: var(--text-muted); cursor: pointer;
  text-decoration: none; transition: all .15s;
}
.navbar .btn-logout:hover { border-color: var(--coral); color: var(--coral); }

.theme-toggle {
  background: none; border: 1px solid var(--gray-border);
  border-radius: var(--radius-sm); padding: 4px 8px;
  font-size: 16px; cursor: pointer; line-height: 1;
  transition: border-color .15s;
}
.theme-toggle:hover { border-color: var(--primary); }

/* ── Page body ── */
.page { padding-top: var(--nav-h); min-height: 100vh; }
.container { max-width: 1200px; margin: 0 auto; padding: 32px 24px; }

/* ── Cards ── */
.card {
  background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); border: 1px solid var(--gray-border);
  padding: 24px; transition: background .2s;
}

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--radius-sm);
  font-family: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer; border: none; transition: all .15s; text-decoration: none;
}
.btn-primary  { background: var(--primary); color: #fff; }
.btn-primary:hover  { background: var(--primary-dark); }
.btn-teal     { background: var(--teal); color: #fff; }
.btn-teal:hover     { opacity: .88; }
.btn-coral    { background: var(--coral); color: #fff; }
.btn-coral:hover    { opacity: .88; }
.btn-ghost    { background: none; color: var(--gray-text); border: 1px solid var(--gray-border); }
.btn-ghost:hover    { background: var(--gray-light); }
.btn-sm { padding: 5px 10px; font-size: 11px; }

/* ── Badges de estado ── */
.badge {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.badge-enviado            { background: #EBF2FA; color: var(--s-enviado); }
.badge-pendiente_oc       { background: #FEF3E2; color: var(--s-pendiente_oc); }
.badge-acuerdo_comercial  { background: #F4EEF9; color: var(--s-acuerdo_comercial); }
.badge-facturado          { background: #E8F8EF; color: var(--s-facturado); }
.badge-realizado_sin_oc   { background: #FEE2E2; color: #B91C1C; }
.badge-por_agendar        { background: #ECFEFF; color: #0E7490; }
.badge-por_facturar       { background: #FFF5EB; color: #9A4D0A; }
.badge-nulo               { background: #F1F5F9; color: #94A3B8; }
.badge-envio_pendiente    { background: #F1F5F9; color: #475569; }

/* ── Tabla ── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  background: var(--gray-light); padding: 10px 12px;
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .5px;
  border-bottom: 2px solid var(--gray-border); text-align: left;
}
tbody td { padding: 12px; border-bottom: 1px solid var(--gray-border); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--hover-row); }

/* ── Forms ── */
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; }
.form-group input, .form-group select, .form-group textarea {
  padding: 8px 11px; border: 1px solid var(--gray-border);
  border-radius: var(--radius-sm); font-family: inherit; font-size: 13px;
  color: var(--gray-text); background: var(--white);
  transition: border-color .15s, box-shadow .15s; outline: none;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px rgba(91,141,184,.12);
}

/* ── Toast ── */
.toast {
  position: fixed; bottom: 20px; right: 20px; z-index: 9999;
  padding: 12px 18px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 500; color: #fff;
  box-shadow: var(--shadow); display: flex; align-items: center; gap: 8px;
  opacity: 0; transform: translateY(8px); transition: all .25s;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-success { background: #27AE60; }
.toast-error   { background: var(--coral); }
.toast-info    { background: var(--primary); }

/* ── Filters bar ── */
.filters {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  margin-bottom: 20px;
}
.filters .form-group { min-width: 160px; }

/* ── Page header ── */
.page-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px; flex-wrap: wrap; gap: 12px;
}
.page-header h1 { font-size: 20px; font-weight: 700; color: var(--text-heading); }
.page-header p  { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

/* ── Modal ── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  z-index: 500; display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal {
  background: var(--white); border-radius: var(--radius);
  box-shadow: 0 8px 40px rgba(0,0,0,0.18);
  padding: 28px; width: 100%; max-width: 480px;
  transform: scale(.96); transition: transform .2s, background .2s;
}
.modal-overlay.open .modal { transform: scale(1); }
.modal h2 { font-size: 16px; font-weight: 700; margin-bottom: 18px; color: var(--text-heading); }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }

/* ── Navbar mobile: hamburger + sheet off-canvas ───────────────────────
   En desktop la nav es horizontal. En ≤900px se oculta y aparece un
   botón ≡ que despliega un sheet lateral derecho con los mismos links
   apilados verticalmente. El sheet usa la MISMA <nav>...</nav>, solo
   cambia la presentación vía CSS + clase .open. */
.navbar-burger {
  display: none;
  background: none; border: 1px solid var(--gray-border);
  border-radius: var(--radius-sm); padding: 6px 10px;
  font-size: 18px; line-height: 1; cursor: pointer;
  color: var(--text-heading); margin-left: 6px;
}
.navbar-burger:hover { border-color: var(--primary); color: var(--primary); }

.navbar-sheet-backdrop {
  display: none; position: fixed; inset: var(--nav-h) 0 0 0;
  background: rgba(0,0,0,.4); z-index: 195;
}
.navbar-sheet-backdrop.open { display: block; }

@media (max-width: 900px) {
  .navbar { padding: 0 14px; gap: 8px; }
  .navbar .logo img { height: 32px; max-width: 130px; }
  .navbar .logo-text { display: none; }
  .navbar .user-area .user-info { display: none; }
  .navbar-marquee { display: none; }
  .navbar .user-area .btn-admin { display: none; } /* va al sheet en mobile (TODO) */
  .navbar nav {
    position: fixed; top: var(--nav-h); right: -280px; bottom: 0;
    width: 260px; flex-direction: column; gap: 4px;
    background: var(--white); box-shadow: -4px 0 16px rgba(0,0,0,.15);
    padding: 16px 12px; margin-left: 0; flex: none; z-index: 200;
    transition: right .22s ease; overflow-y: auto;
    border-left: 1px solid var(--gray-border);
  }
  .navbar nav.open { right: 0; }
  .navbar nav a {
    padding: 10px 14px; font-size: 14px; border-radius: var(--radius-sm);
  }
  .navbar-burger { display: inline-flex; }
}
@media (max-width: 480px) {
  .navbar .user-area .btn-logout { padding: 4px 8px; font-size: 10px; }
}

/* ── Responsive general ── */
@media (max-width: 768px) {
  .container { padding: 20px 14px; }
  .filters .form-group { min-width: 140px; }
}

/* ── Kanban Board ── */
.kanban-board {
  display: flex; flex-wrap: nowrap; overflow: hidden;
  gap: 8px; align-items: flex-start; padding-bottom: 20px;
}
.kanban-column {
  flex: 1 1 0; min-width: 0;
  background: #f1f5f9; border-radius: var(--radius);
  border: 1px solid var(--gray-border);
  display: flex; flex-direction: column;
  max-height: calc(100vh - 180px);
}
html[data-theme="dark"] .kanban-column { background: #1C2435; }
html[data-theme="dark"] .kanban-column-header { background: #151B28; }
html[data-theme="dark"] .kanban-column-count { background: #2D3648; color: #D5DAE2; }
html[data-theme="dark"] .kanban-card { background: #0D1117; border-color: #2D3648; }

.kanban-column-header {
  padding: 10px 12px; border-bottom: 1px solid var(--gray-border);
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 600; color: var(--text-heading); font-size: 12px;
  background: #f8fafc; border-radius: var(--radius) var(--radius) 0 0;
}
.kanban-column-count {
  background: #e2e8f0; color: #475569; padding: 2px 8px;
  border-radius: 12px; font-size: 11px; font-weight: 700;
}
.kanban-column-body {
  padding: 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px;
  flex: 1; min-height: 100px;
}
.kanban-card {
  background: var(--white); border-radius: var(--radius-sm);
  padding: 10px; border: 1px solid var(--gray-border);
  box-shadow: var(--shadow-sm); cursor: pointer; transition: all .15s;
  display: flex; flex-direction: column; gap: 4px;
}
.kanban-card:hover {
  transform: translateY(-2px); box-shadow: var(--shadow);
  border-color: var(--primary);
}
.kanban-card-header {
  display: flex; justify-content: space-between; align-items: flex-start;
}
.kanban-card-num {
  font-family: 'JetBrains Mono', 'Consolas', monospace; font-weight: 700; font-size: 11px;
  color: var(--primary-dark);
}
.kanban-card-date {
  font-size: 9px; color: var(--text-muted);
}
.kanban-card-title {
  font-size: 11px; color: var(--text-heading); font-weight: 500;
  line-height: 1.3;
}
.kanban-card-footer {
  display: flex; justify-content: space-between; align-items: center; margin-top: 4px;
  flex-wrap: wrap; gap: 4px;
}
.kanban-card-items {
  font-size: 10px; color: var(--text-muted);
}