:root {
  --color-primario: #003366;
  --color-acento: #00d4b2;
  --color-fondo: #f5f5f5;
  --color-texto: #222;
  --color-blanco: #ffffff;
  --sombra-card: 0 2px 8px rgba(0, 0, 0, 0.06);
  --borde-radio: 8px;
}

body {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  background-color: var(--color-fondo);
  color: var(--color-texto);
}
.formulario-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.formulario-container h2 {
  margin-bottom: 1rem;
  font-size: 1.5rem;
  color: #333;
}

.formulario-container label {
  font-weight: bold;
  margin-top: 1rem;
}

.formulario-container input,
.formulario-container select,
.formulario-container textarea {
  width: 100%;
  max-width: 100%;
  padding: 10px;
  margin-top: 4px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
}

.formulario-clinico {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 2rem;
}

.formulario-clinico label {
  display: block;
  margin-bottom: 4px;
  font-weight: bold;
}

.formulario-clinico input,
.formulario-clinico select {
  width: 100%;
}

.card {
  background-color: var(--color-blanco);
  border-radius: var(--borde-radio);
  box-shadow: var(--sombra-card);
  padding: 20px;
  margin: 10px 0;
}

/* === Botones KodRx (base) === */
/* === Botones KodRx (base + variantes) =============================== */
button,
.btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 10px 16px;
  border-radius: 12px;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  text-decoration: none;         /* por si es <a class="btn"> */
  border: 1px solid #d0d7e2;     /* borde suave por defecto */
  background: #f7f9fc;           /* “ghost” por defecto */
  color: #0b1b2b;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
  transition: background .2s ease, box-shadow .2s ease, transform .04s ease;
  width: auto;                   /* evita botones 100% ancho */
  max-width: 100%;
}

button:hover,
.btn:hover { box-shadow: 0 2px 10px rgba(0,0,0,.06); }

button:active,
.btn:active { transform: translateY(1px); }

/* Accesibilidad */
button:focus-visible,
.btn:focus-visible {
  outline: 3px solid rgba(11,91,211,.3);
  outline-offset: 2px;
}

/* Variante: primary (azul KodRx) */
button.primary,
.btn.primary {
  background: #0b5bd3;
  border-color: #0b5bd3;
  color: #fff;
}
button.primary:hover,
.btn.primary:hover { box-shadow: 0 6px 16px rgba(11,91,211,.25); }

/* Variante: ghost (claro) */
button.ghost,
.btn.ghost {
  background: #eef2ff;
  border-color: #dbe3ff;
  color: #0b1b2b;
}
button.ghost:hover,
.btn.ghost:hover { background: #e6ebff; }

/* Tamaños opcionales */
.btn-sm { padding: 8px 12px; border-radius: 10px; }
.btn-lg { padding: 12px 18px; border-radius: 14px; }

/* Si algún layout necesita ancho completo, úsalo explícitamente */
.btn-block { display: flex; width: 100%; }


.site-header {
  background-color: #003366;
  padding: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-container {
  display: flex;
  flex-direction: column; /* 👈 Este es el cambio clave */
  align-items: center;
  text-align: center;
  gap: 0.5rem;
}

.logo-img {
  height: 220px;
}

.tagline {
  font-size: 1.2rem;
  font-weight: 600;
  color: #d1d5db;
}




main {
  padding: 20px;
}

header h1 {
  font-size: 20px;
  margin: 0;
}

.form-login {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 320px;
  margin: 20px auto;
  text-align: left;
}

.form-login input {
  padding: 10px;
  font-size: 16px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

.form-login button {
  margin-top: 10px;
}

.volver {
  margin: 20px auto;
  display: block;
  max-width: 200px;
  text-align: center;
  color: var(--color-primario);
  font-weight: bold;
  text-decoration: none;
  font-size: 16px;
}

/* Acordeón general */
details.lab-card {
  border: 1px solid #ccc;
  border-radius: var(--borde-radio);
  margin: 12px 0;
  background-color: var(--color-blanco);
  padding: 0;
  overflow: hidden;
  box-shadow: var(--sombra-card);
  transition: all 0.3s ease;
}

details.lab-card summary {
  background-color: #f0f0f0;
  padding: 12px 20px;
  cursor: pointer;
  font-weight: bold;
  font-size: 16px;
  list-style: none;
  position: relative;
}

details.lab-card summary::marker,
details.lab-card summary::-webkit-details-marker {
  display: none;
}

details.lab-card summary::after {
  content: "▶";
  position: absolute;
  right: 20px;
  transition: transform 0.2s ease;
}

details.lab-card[open] summary::after {
  transform: rotate(90deg);
}

details.lab-card div {
  padding: 15px 20px;
  border-top: 1px solid #ddd;
  font-size: 14px;
  line-height: 1.6;
}
@media (max-width: 768px) {
  main {
    padding: 20px;
  }
}



/* Ajuste en pantallas pequeñas */
@media (max-width: 600px) {
  .barcode-container canvas {
    max-width: 90%;
    height: auto;
  }
}

.sugerencias {
  position: absolute;
  background: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  max-height: 150px;
  overflow-y: auto;
  width: 100%;
  z-index: 999;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  margin-top: 2px;
}

.sugerencia {
  padding: 8px 10px;
  cursor: pointer;
  font-size: 0.9rem;
}

.sugerencia:hover {
  background-color: #f0f0f0;
}

.datos-horizontales {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
/* Historial agrupado */
/* Agrupadores del historial (colapsables por día) */
.hist-group { margin: 14px 0 18px; }
.hist-group__h {
  margin: 8px 0 10px; font-weight: 800; font-size: 14px;
  color: #374151; text-transform: capitalize;
  display:flex; align-items:center; gap:8px; cursor: pointer; user-select: none;
}
.hg-dot { width:10px; height:10px; border-radius:999px; background:#a5b4fc; display:inline-block; }
.hg-count { color:#6b7280; font-weight:600; }
.hg-caret { margin-left:auto; transition: transform .2s ease; }
.hist-group.collapsed .hist-group__body { display:none; }
.hist-group.collapsed .hg-caret { transform: rotate(-90deg); }

.acordeon{ border:1px solid #d9dee8; background:#fff; border-radius:12px; margin:10px 0; overflow:hidden; }
  .acordeon-header{
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; padding:12px 14px; cursor:pointer; font-weight:700;
    background:#1e40af; color:#fff;  /* azul header */
  }
  .acordeon-body{ padding:12px 14px; background:#fff; color:#111827; display:none; }
  .acordeon.open .acordeon-body{ display:block; }
  .pill{ display:inline-block; padding:4px 8px; border-radius:999px; border:1px solid #d9dee8; margin:2px 6px 2px 0; font-size:12px; }
  .muted{ color:#6b7280; }
/* ===== KodRx Verificador — UI polish ===== */
:root{
  --fg:#111827; --muted:#6b7280; --brand:#0b5bd3; --ok:#065f46; --border:#e5e7eb; --panel:#f8fafc;
  --radius:14px; --shadow:0 10px 25px rgba(0,0,0,.08);
}
.kx-wrap{max-width:900px;margin:24px auto;padding:0 14px;}
.kx-title{
  font-size:clamp(22px,3.5vw,34px); line-height:1.2; font-weight:800; color:var(--fg); margin:6px 0 14px;
}
.kx-card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px; overflow:hidden;
}
.kx-head{
  display:flex; align-items:center; gap:10px; margin-bottom:6px;
}
.kx-head .dot{
  width:10px;height:10px;border-radius:999px;background:var(--brand); opacity:.9; flex:0 0 auto;
}
.kx-pair{font-size:14px; color:#374151; display:flex; gap:6px; margin:2px 0;}
.kx-pair b{min-width:160px; color:#111827;}
.kx-sub{font-size:13px;color:var(--muted);}

.kx-section-title{
  font-size:18px;font-weight:800;margin:14px 0 8px;color:#111827;
}
.kx-list{border-top:1px dashed var(--border);}
.kx-item{
  display:block; padding:10px 4px; border-bottom:1px dashed var(--border);
}
.kx-item input{transform:translateY(1px) scale(1.05); margin-right:8px;}
.kx-item b{color:#111827}
.kx-surtido-info{color:var(--ok); font-size:12.5px; margin-left:26px; margin-top:4px;}

.kx-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px;}
.kx-btn{
  appearance:none; border:1px solid var(--border); background:#fff; color:#111827;
  padding:10px 16px; border-radius:12px; font-weight:700; cursor:pointer; transition:.15s ease;
}
.kx-btn:hover{box-shadow:0 4px 14px rgba(0,0,0,.06)}
.kx-btn--brand{background:var(--brand); color:#fff; border-color:transparent}
.kx-btn--ghost{background:#fff}
.kx-msg{margin-top:8px; font-size:13px; color:var(--muted);}

/* video block */
.kx-video{border-radius:12px; overflow:hidden; background:var(--panel); border:1px solid var(--border);}

/* mobile niceties */
@media (max-width:600px){
  .kx-pair b{min-width:120px}
  .kx-btn{flex:1}
}