/* ── Reportes: Layout fijo dos columnas ──────────────────── */
.rep-layout {
  display: flex;
  align-items: flex-start;
  gap: 0;
  height: calc(100vh - 64px);
  overflow: hidden;
}

.rep-sidebar {
  width: 340px;
  min-width: 300px;
  max-width: 360px;
  flex-shrink: 0;
  height: 100%;
  overflow-y: auto;
  border-right: 1px solid var(--cead-gray);
  background: #fff;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rep-editor {
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--cead-bg);
}

/* Section titles inside sidebar */
.rep-section { margin-bottom: 0; }
.rep-section-title {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--cead-medium);
  margin-bottom: 8px;
}

/* Patient card in sidebar */
.rep-patient-card {
  background: var(--cead-bg);
  border: 1px solid var(--cead-gray);
  border-radius: 10px;
  padding: 12px 14px;
}
.rep-pat-name { font-weight: 700; font-size: .9rem; color: var(--cead-dark-text); }
.rep-pat-sub  { font-size: .76rem; color: var(--cead-text); margin-top: 2px; }

/* Field groups in sidebar */
.rep-field-group { display: flex; flex-direction: column; gap: 4px; }
.rep-label { font-size: .72rem; font-weight: 600; color: var(--cead-text); }
.rep-input, .rep-select, .rep-textarea {
  width: 100%;
  border: 1px solid var(--cead-gray);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: .82rem;
  font-family: inherit;
  color: var(--cead-dark-text);
  background: #fff;
  transition: border-color .15s;
  box-sizing: border-box;
}
.rep-input:focus, .rep-select:focus, .rep-textarea:focus {
  outline: none;
  border-color: var(--cead-medium);
}
.rep-textarea { resize: vertical; min-height: 70px; }
.rep-textarea-large { min-height: 130px; }
.rep-select   { cursor: pointer; }

/* ── Encabezado fijo del editor ───────────────────────────── */
.rep-editor-header {
  background: #fff;
  border: 1.5px solid var(--cead-gray);
  border-radius: 12px;
  padding: 16px 20px 14px;
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: 0 2px 12px rgba(13,45,94,.08);
  flex-shrink: 0;
}
.rep-editor-header-top {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 14px;
}
/* Tarjeta del paciente dentro del editor */
.rep-editor-pat {
  min-width: 200px;
  max-width: 220px;
  background: #eff6ff;
  border: 2px solid var(--cead-medium);
  border-radius: 10px;
  padding: 12px 14px;
  flex-shrink: 0;
}
.rep-editor-pat .rep-pat-name {
  font-size: 1rem;
  font-weight: 800;
  color: var(--cead-dark);
}
/* Metadatos del reporte (período, médico, especialidad) */
.rep-editor-meta { flex: 1; min-width: 0; }
.rep-meta-fields {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
}
/* Barra horizontal de acciones */
.rep-actions-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  border-top: 1px solid var(--cead-gray);
  padding-top: 12px;
}
.rep-actions-sep {
  width: 1px;
  height: 24px;
  background: var(--cead-gray);
  margin: 0 2px;
}
/* Botón principal de envío */
.rep-btn-lg {
  padding: 9px 18px !important;
  font-size: .88rem !important;
  background: linear-gradient(135deg, var(--cead-dark), #1a6bbd) !important;
  box-shadow: 0 3px 10px rgba(13,45,94,.25) !important;
}
.rep-btn-lg:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(13,45,94,.3) !important; }

/* Search results dropdown */
.rep-search-wrap { position: relative; }
.rep-search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: #fff;
  border: 1px solid var(--cead-gray);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(20,51,100,.12);
  z-index: 200;
  max-height: 240px;
  overflow-y: auto;
}
.rep-search-item {
  padding: 9px 12px;
  cursor: pointer;
  transition: background .1s;
}
.rep-search-item:hover { background: var(--cead-bg); }
.rep-si-name { font-weight: 600; font-size: .85rem; color: var(--cead-dark-text); }
.rep-si-sub  { font-size: .74rem; color: var(--cead-text); margin-top: 1px; }

/* Historial items */
.rep-historial-item {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--cead-gray);
  cursor: pointer;
  transition: background .15s;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .78rem;
}
.rep-historial-item:hover { background: var(--cead-bg); }
.rep-hi-periodo { font-size: .8rem; font-weight: 600; color: var(--cead-dark); }
.rep-hi-sub     { font-size: .72rem; color: var(--cead-text); }

/* Editor cards */
.rep-card {
  background: #fff;
  border: 1px solid var(--cead-gray);
  border-radius: 12px;
  overflow: visible; /* Must be visible so dynamic table rows expand the card */
}
.rep-card-gold {
  background: #fffbf0;
  border-color: var(--cead-gold);
}
.rep-card-gold .rep-card-header { background: #fef9e7; border-bottom-color: var(--cead-gold); }
.rep-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--cead-gray);
  gap: 12px;
  background: var(--cead-bg);
  border-radius: 12px 12px 0 0; /* top corners follow the card's border-radius */
}
.rep-card > :last-child {
  border-radius: 0 0 12px 12px; /* bottom corners for last child */
}
.rep-card-header h3 {
  font-size: .9rem;
  font-weight: 700;
  color: var(--cead-dark);
  margin: 0;
}
.rep-card-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.rep-subsection { display: flex; flex-direction: column; gap: 4px; }

/* Antecedentes grid */
.rep-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 700px) {
  .rep-grid-2 { grid-template-columns: 1fr; }
}

/* Tables in editor */
.rep-table-wrap { overflow-x: auto; }
.rep-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
}
.rep-table th {
  background: var(--cead-bg);
  color: var(--cead-medium);
  font-weight: 700;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 8px 10px;
  border-bottom: 1px solid var(--cead-gray);
  text-align: left;
  white-space: nowrap;
}
.rep-table td {
  padding: 7px 8px;
  border-bottom: 1px solid #f0f3f8;
  vertical-align: middle;
}
.rep-table td input, .rep-table td select {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 4px 6px;
  font-size: .82rem;
  font-family: inherit;
  background: transparent;
  box-sizing: border-box;
}
.rep-table td input:focus, .rep-table td select:focus {
  outline: none;
  border-color: var(--cead-medium);
  background: #fff;
}
.rep-empty { color: var(--cead-text); font-size: .8rem; padding: 8px 0; text-align: center; font-style: italic; }
.rep-table-empty {
  padding: 20px;
  text-align: center;
  color: var(--cead-text);
  font-size: .82rem;
  font-style: italic;
}

/* Metas list */
.rep-metas-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.rep-meta-item {
  display: flex; align-items: center; gap: 8px;
  background: var(--cead-bg); border-radius: 8px; padding: 8px 10px;
  border: 1px solid var(--cead-gray);
}
.rep-meta-item input {
  flex: 1; border: none; background: transparent;
  font-size: .82rem; font-family: inherit; color: var(--cead-dark-text);
}
.rep-meta-item input:focus { outline: none; }
.rep-meta-remove,
.rep-meta-del {
  background: none; border: none; cursor: pointer;
  color: var(--cead-danger); font-size: 1rem; line-height: 1; padding: 0 2px;
  opacity: .6; transition: opacity .15s;
}
.rep-meta-remove:hover,
.rep-meta-del:hover { opacity: 1; }

/* Warning banner */
.rep-warn-banner {
  display: flex; align-items: flex-start; gap: 10px;
  background: #fffbeb; border: 1px solid #f59e0b; border-radius: 10px;
  padding: 12px 14px; font-size: .8rem; color: #92400e;
}
.rep-warn-banner svg { flex-shrink: 0; color: #f59e0b; margin-top: 1px; }

/* Nursing-lock banner */
/* ── STEPPER DE FLUJO DE REPORTES ── */
.rep-stepper {
  display: flex;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  padding: 14px 20px;
  margin-bottom: 16px;
  gap: 0;
  box-shadow: var(--shadow-sm);
}
.rep-step {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
  min-width: 0;
}
.rep-step-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--slate-200);
  color: var(--slate-500);
  font-size: .78rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition), color var(--transition);
}
.rep-step-label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: .75rem;
  font-weight: 700;
  color: var(--slate-400);
  line-height: 1.2;
  white-space: nowrap;
  transition: color var(--transition);
}
.rep-step-label small { font-size: .68rem; font-weight: 500; }
.rep-step-line {
  flex: 0 0 24px;
  height: 2px;
  background: var(--slate-200);
  transition: background var(--transition);
  margin: 0 4px;
}
/* Estados del stepper */
.rep-step.done .rep-step-circle { background: var(--cead-celeste); color: var(--white); }
.rep-step.done .rep-step-circle::after { content: '✓'; }
.rep-step.done .rep-step-circle { font-size: 0; }
.rep-step.done .rep-step-circle::after { font-size: .9rem; }
.rep-step.done .rep-step-label { color: var(--cead-dark); }
.rep-step.active .rep-step-circle { background: var(--cead-dark); color: var(--white); box-shadow: 0 0 0 3px rgba(26,50,114,.18); }
.rep-step.active .rep-step-label { color: var(--cead-dark); }
.rep-step.special .rep-step-circle { background: var(--cead-danger); color: var(--white); }
.rep-step-line.done { background: var(--cead-celeste); }
@media (max-width: 760px) {
  .rep-stepper { flex-direction: column; align-items: flex-start; gap: 8px; }
  .rep-step-line { width: 2px; height: 16px; flex: 0 0 16px; margin: 0 14px; }
}

/* ── NURSING BANNER MEJORADO ── */
.rep-nursing-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(90deg, #eff6ff, #e0f2fe);
  border: 1.5px solid #93c5fd;
  border-left: 5px solid #3b82f6;
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.rep-nursing-icon { font-size: 1.4rem; flex-shrink: 0; }
.rep-nursing-text { flex: 1; min-width: 180px; }
.rep-nursing-text strong { display: block; font-size: .88rem; color: #1e40af; margin-bottom: 2px; }
.rep-nursing-text span { font-size: .78rem; color: #1e3a8a; line-height: 1.4; }
.rep-enviar-medico-btn {
  padding: 8px 16px;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: var(--radius);
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition);
}
.rep-enviar-medico-btn:hover { background: #1d4ed8; }

/* Alert panel */
.rep-alert-panel {
  background: #fff3cd;
  border: 1px solid #f59e0b;
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 8px;
}
.rep-alert-header {
  display: flex; align-items: center; gap: 6px;
  font-size: .78rem; font-weight: 700; color: #b45309;
  margin-bottom: 10px;
}
.rep-alert-item {
  background: #fff;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.rep-alert-item-escalado {
  border-color: var(--cead-danger);
  background: #fff5f5;
}
.rep-alert-info { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.rep-alert-nombre { font-weight: 700; font-size: .85rem; color: var(--cead-dark-text); }
.rep-alert-sub { font-size: .75rem; color: var(--cead-text); }
.rep-alert-badge {
  display: inline-block; padding: 2px 8px; border-radius: 20px;
  font-size: .68rem; font-weight: 700; margin-bottom: 8px;
}
.rep-alert-badge-info    { background: #dbeafe; color: #1e40af; }
.rep-alert-badge-warn    { background: #fef3c7; color: #92400e; }
.rep-alert-badge-danger  { background: #fee2e2; color: #b91c1c; }
.rep-alert-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.rep-quality-banner {
  background: #fee2e2; border: 1px solid var(--cead-danger);
  border-radius: 8px; padding: 10px 12px; margin-top: 8px;
  font-size: .8rem; color: #b91c1c; font-weight: 600;
}

.rep-help-text { font-size: .76rem; color: var(--cead-text); font-style: italic; margin-bottom: 2px; }

/* Badge states for historial */
.badge-pendiente-envio { background: #fef3c7; color: #b45309; border: 1px solid #fde68a; }
.badge-escalado        { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }

/* Responsive: single column on small screens */
@media (max-width: 860px) {
  .rep-layout { flex-direction: column; height: auto; overflow: visible; }
  .rep-sidebar {
    width: 100%; max-width: 100%; min-width: 0;
    height: auto; border-right: none;
    border-bottom: 1px solid var(--cead-gray);
  }
  .rep-editor { height: auto; }
}

/* Preview overlay */
.rep-preview-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: #dde4ef;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.rep-preview-toolbar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 24px;
  background: var(--cead-dark);
  flex-shrink: 0;
}
.rep-preview-toolbar .btn-outline {
  color: var(--white); border-color: rgba(255,255,255,.4); background: transparent;
}
.rep-preview-toolbar .btn-outline:hover { background: rgba(255,255,255,.1); }
.rep-preview-scroll {
  flex: 1; overflow-y: auto; padding: 28px 24px;
}

/* ── Documento A4 ─────────────────────────────────────────── */
.rep-doc {
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto;
  background: var(--white);
  box-shadow: var(--shadow-lg);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 11pt;
  color: #1a1a1a;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.rdoc-header {
  background: var(--cead-dark);
  padding: 22px 32px 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.rdoc-logo-line { font-size: 1.4rem; font-weight: 800; color: var(--white); letter-spacing: -.01em; }
.rdoc-logo-sub  { font-size: .68rem; color: var(--cead-celeste-soft); letter-spacing: .07em; text-transform: uppercase; margin-top: 2px; }
.rdoc-title-block { text-align: right; }
.rdoc-title    { font-size: .95rem; font-weight: 700; color: var(--white); }
.rdoc-subtitle { font-size: .68rem; color: rgba(255,255,255,.7); margin-top: 3px; }
.rdoc-confidential {
  background: var(--cead-medium);
  padding: 6px 32px;
  font-size: .69rem;
  color: rgba(255,255,255,.85);
  letter-spacing: .04em;
}
.rdoc-body { padding: 20px 32px; flex: 1; }
.rdoc-section { margin-bottom: 18px; }
.rdoc-section-title {
  background: var(--cead-dark);
  color: var(--white);
  font-size: .73rem; font-weight: 700;
  padding: 5px 12px;
  border-radius: 4px 4px 0 0;
  letter-spacing: .05em; text-transform: uppercase;
}
.rdoc-section-body {
  border: 1px solid #dde4ef;
  border-top: none;
  border-radius: 0 0 4px 4px;
  padding: 12px 14px;
  font-size: 9.5pt;
}
.rdoc-patient-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.rdoc-field { display: flex; flex-direction: column; gap: 2px; }
.rdoc-field-label { font-size: 7.5pt; font-weight: 700; color: #666; text-transform: uppercase; letter-spacing: .04em; }
.rdoc-field-value { font-size: 9.5pt; color: #10233F; font-weight: 500; }
.rdoc-about-text  { font-size: 9pt; color: #444; line-height: 1.65; font-style: italic; }
.rdoc-table { width: 100%; border-collapse: collapse; font-size: 8.5pt; }
.rdoc-table th { background: var(--cead-medium); color: var(--white); padding: 5px 9px; text-align: left; font-size: 7.5pt; text-transform: uppercase; letter-spacing: .03em; }
.rdoc-table td { padding: 5px 9px; border-bottom: 1px solid #eef1f6; }
.rdoc-table tr:last-child td { border-bottom: none; }
.rdoc-table tr:nth-child(even) td { background: #f7f9fb; }
.rdoc-antec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rdoc-antec-block { background: #f7f9fb; border-radius: 4px; padding: 9px 11px; }
.rdoc-antec-label { font-size: 7.5pt; font-weight: 700; color: var(--cead-medium); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.rdoc-antec-text  { font-size: 9pt; color: #333; white-space: pre-wrap; line-height: 1.5; }
.rdoc-recom-block {
  background: #fffdf4;
  border: 1.5px solid var(--cead-gold);
  border-radius: 5px;
  padding: 14px 16px;
}
.rdoc-recom-saludo { font-size: 9.5pt; font-style: italic; color: #333; margin-bottom: 9px; }
.rdoc-recom-body   { font-size: 9pt; color: #222; line-height: 1.7; white-space: pre-wrap; }
.rdoc-recom-firma  { margin-top: 18px; border-top: 1px solid #e5c87a; padding-top: 10px; }
.rdoc-firma-name { font-weight: 700; font-size: 9.5pt; color: var(--cead-dark); }
.rdoc-firma-esp  { font-size: 8.5pt; color: #666; }
.rdoc-puntos-bar-track { height: 11px; background: #dde4ef; border-radius: 6px; overflow: hidden; margin: 7px 0; }
.rdoc-puntos-bar-fill  { height: 100%; background: linear-gradient(90deg, var(--cead-celeste), var(--cead-medium)); border-radius: 6px; }
.rdoc-puntos-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.rdoc-pts-stat     { text-align: center; background: #f7f9fb; border-radius: 5px; padding: 9px 6px; border: 1px solid #eef1f6; }
.rdoc-pts-stat-val { font-size: 1rem; font-weight: 800; color: var(--cead-dark); }
.rdoc-pts-stat-key { font-size: 7.5pt; color: #666; margin-top: 2px; }
.rdoc-beneficios-list { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.rdoc-beneficios-list li::before { content: "✓  "; color: var(--cead-success); font-weight: 700; }
.rdoc-beneficios-list li { font-size: 9pt; color: #333; }
.rdoc-badge { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 7.5pt; font-weight: 700; }
.rdoc-estado-borrador   { background: #fef9c3; color: #92400e; }
.rdoc-estado-finalizado { background: #dbeafe; color: #1e40af; }
.rdoc-estado-entregado  { background: #dcfce7; color: #166534; }
.rdoc-footer {
  background: var(--cead-dark);
  padding: 14px 32px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 6px;
  margin-top: auto;
}
.rdoc-footer-brand { color: rgba(255,255,255,.9); font-size: 7.5pt; font-weight: 700; line-height: 1.5; }
.rdoc-footer-meta  { color: rgba(255,255,255,.6); font-size: 7pt; text-align: right; line-height: 1.5; }

/* ── Print styles ─────────────────────────────────────────── */
@media print {
  body > *         { display: none !important; }
  .rep-preview-overlay { display: flex !important; position: static !important; background: white !important; }
  .rep-preview-toolbar { display: none !important; }
  .rep-preview-scroll  { overflow: visible !important; padding: 0 !important; }
  .rep-doc { box-shadow: none !important; border-radius: 0 !important; width: 100% !important; min-height: 0 !important; }
  @page { margin: 0; size: A4 portrait; }
}