:root{
  --bg:#f7f7f8;
  --card:#ffffff;
  --accent:#1f8dd6;
  --muted:#666;
  --border:#e6e6e9;
  --danger:#d9534f;
}
*{box-sizing:border-box}
html,body,#app{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  background:var(--bg);
  color:#111;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}
main#app{
  width:100%;
  max-width:980px;
  background:var(--card);
  border-radius:10px;
  box-shadow:0 6px 18px rgba(16,24,40,0.08);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:420px;
}
header .title{font-weight:600;font-size:16px}
header .sub{font-size:12px;color:var(--muted);margin-top:4px}
.controls{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}
.file-label{
  background:#fff;
  border:1px solid var(--border);
  padding:10px 12px;
  border-radius:8px;
  cursor:pointer;
  font-size:14px;
}
.file-label input{display:none}
.actions{display:flex;gap:8px;margin-left:auto}
button{
  background:var(--accent);
  color:#fff;
  border:none;
  padding:10px 12px;
  border-radius:8px;
  font-size:14px;
  cursor:pointer;
}
button.secondary{background:#fff;color:var(--muted);border:1px solid var(--border)}
button:disabled{opacity:0.5;cursor:default}
.table-wrap{
  background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.95));
  border:1px solid var(--border);
  border-radius:8px;
  padding:8px;
  overflow:auto;
  flex:1;
  min-height:180px;
}
.placeholder{
  color:var(--muted);
  padding:24px;
  text-align:center;
}
table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}
th,td{
  padding:8px 10px;
  border-bottom:1px solid #f1f2f4;
  text-align:left;
}
th{
  position:sticky;
  top:0;
  background:#fff;
  z-index:2;
  font-weight:600;
  border-bottom:2px solid var(--border);
}
.row-actions{display:flex;gap:8px;justify-content:flex-end}
.small-btn{
  background:#eef6fb;
  color:var(--accent);
  border-radius:6px;
  padding:6px 8px;
  font-size:13px;
  border:none;
  cursor:pointer;
}

/* Farmacia input en controles */
.farmacia-wrap{
  display:flex;
  gap:8px;
  align-items:center;
  margin-left:8px;
}
.farmacia-wrap .farmacia-label{font-size:13px;color:var(--muted)}
#farmaciaInput{
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:8px;
  min-width:180px;
  font-size:14px;
}

/* Inline rows inside table result, with per-value copy button */
.inline-row{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:space-between;
  padding:6px 0;
}
.inline-row .text{
  flex:1;
  color:#111;
  font-size:14px;
  white-space:pre-wrap;
  word-break:break-word;
}
.copy-small{
  background:#f3fbf9;
  color:#0b8f52;
  border-radius:6px;
  padding:6px 8px;
  font-size:13px;
  border:none;
  cursor:pointer;
  margin-left:8px;
}

/* keep small-btn for other uses */
footer{font-size:12px;color:var(--muted);text-align:right}
@media (max-width:520px){
  main#app{padding:12px}
  .sub{display:none}
  .actions{width:100%;margin-left:0;justify-content:stretch}
  .actions button{flex:1}
  .farmacia-wrap{width:100%;margin-top:6px}
  #farmaciaInput{flex:1;min-width:0}
}

/* Carousel styles */
.carousel{
  display:flex;
  align-items:center;
  gap:12px;
  position:relative;
  padding:12px;
  width:100%;
}
.carousel .nav-btn{
  background:var(--card);
  border:1px solid var(--border);
  width:44px;
  height:44px;
  border-radius:8px;
  font-size:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:var(--accent);
}
.carousel .nav-btn:active{transform:translateY(1px)}
.card-wrap{flex:1;min-width:0}
.card{
  background:linear-gradient(180deg,#fff,#fbfdff);
  border:1px solid var(--border);
  padding:12px;
  border-radius:8px;
  box-shadow:0 4px 14px rgba(16,24,40,0.04);
  min-height:120px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.card-title{
  font-weight:700;
  margin-bottom:4px;
  font-size:14px;
  text-transform:none;
  color:#111;
}
.indicator{
  font-size:13px;
  color:var(--muted);
  margin-left:8px;
  min-width:56px;
  text-align:right;
}

/* Slightly tighter for mobile */
@media (max-width:520px){
  .carousel{gap:8px;padding:8px}
  .carousel .nav-btn{width:40px;height:40px}
  .card{padding:10px}
  .indicator{font-size:12px}
}