/* UniVet - Estilos Clínicos & Veterlink Theme */
:root {
  --teal-dark: #084c4a;
  --teal-primary: #0e6c68;
  --teal-light: #128682;
  --teal-hover: #169b96;
  --sidebar-w: 240px;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: #f3f5f8;
  color: #333333;
}

/* Fondo decorativo con patrón sutil de huellitas veterinarias en el sidebar */
.vet-sidebar {
  background-color: #0b635f;
  background-image: radial-gradient(#158079 1.5px, transparent 1.5px), radial-gradient(#158079 1.5px, #0b635f 1.5px);
  background-size: 36px 36px;
  background-position: 0 0, 18px 18px;
  transition: all 0.3s ease;
}

/* Estilo del menú lateral */
.sidebar-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  color: #e0f2f1;
  font-size: 0.92rem;
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background-color 0.2s, color 0.2s;
  cursor: pointer;
}

.sidebar-link:hover {
  background-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.sidebar-link.active {
  background-color: rgba(0, 0, 0, 0.2);
  color: #ffffff;
  border-left: 4px solid #48e5c2;
}

.sidebar-link .badge-action {
  opacity: 0.7;
  transition: opacity 0.2s;
}

.sidebar-link:hover .badge-action {
  opacity: 1;
}

/* Sidebar Colapsado (Modo Compacto) */
#sidebar.sidebar-collapsed {
  width: 4.5rem !important;
}

#sidebar.sidebar-collapsed .sidebar-text,
#sidebar.sidebar-collapsed .badge-action {
  display: none !important;
}

#sidebar.sidebar-collapsed #sidebarLogoRow {
  justify-content: center !important;
  padding: 12px 0 !important;
}

#sidebar.sidebar-collapsed #sidebarLogoRow > div {
  justify-content: center !important;
  gap: 0 !important;
}

#sidebar.sidebar-collapsed #sidebarUserRow {
  justify-content: center !important;
  padding: 8px 0 !important;
  gap: 0 !important;
}

#sidebar.sidebar-collapsed .sidebar-link {
  justify-content: center !important;
  padding: 11px 0 !important;
}

#sidebar.sidebar-collapsed .sidebar-link > div {
  gap: 0 !important;
  justify-content: center !important;
}

#sidebar.sidebar-collapsed .sidebar-link i {
  margin: 0 auto;
}

#sidebar.sidebar-collapsed #sidebarFooterActions {
  flex-direction: column !important;
  gap: 6px !important;
}

#sidebar.sidebar-collapsed #sidebarFooterActions button,
#sidebar.sidebar-collapsed #sidebarFooterActions label {
  padding: 6px 0 !important;
  width: 100% !important;
  justify-content: center !important;
}

#sidebar.sidebar-collapsed #sidebarFooterChile {
  justify-content: center !important;
}

/* Badges superiores inspirados exactamente en Veterlink */
.pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 9999px;
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  white-space: nowrap;
}

.pill-purple { background-color: #5c2777; }
.pill-darkgreen { background-color: #206737; }
.pill-orange { background-color: #c47917; }
.pill-olive { background-color: #5b6928; }
.pill-darkgray { background-color: #49423c; }
.pill-blue { background-color: #38759b; }

/* Badges con dropdowns interactivos */
.pill-dropdown-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 12px;
  border-radius: 9999px;
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.pill-dropdown-badge select {
  background-color: #ffffff;
  color: #222222;
  font-weight: 700;
  font-size: 0.76rem;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid transparent;
  outline: none;
  cursor: pointer;
}

.pill-dropdown-brown { background-color: #bd731d; }
.pill-dropdown-wine { background-color: #92131f; }
.pill-dropdown-green { background-color: #296035; }
.pill-dropdown-earth { background-color: #9c7c42; }
.pill-dropdown-alive { background-color: #15803d; }
.pill-dropdown-deceased { background-color: #334155; }

/* Badges de estado de citas de peluqueria */
.grooming-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}
.grooming-status-agendado {
  background-color: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}
.grooming-status-en-proceso {
  background-color: #dbeafe;
  color: #1e40af;
  border: 1px solid #bfdbfe;
}
.grooming-status-finalizado {
  background-color: #d1fae5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}
.grooming-status-cancelado {
  background-color: #f3f4f6;
  color: #4b5563;
  border: 1px solid #e5e7eb;
}

/* Badges de tipo de archivo de laboratorio */
.file-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.file-badge-pdf {
  background-color: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}
.file-badge-img {
  background-color: #e0f2fe;
  color: #0369a1;
  border: 1px solid #bae6fd;
}
.file-badge-doc {
  background-color: #f3f4f6;
  color: #374151;
  border: 1px solid #e5e7eb;
}

/* Pestañas de la Ficha Clínica */
.tab-btn {
  padding: 10px 18px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #555555;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border: 1px solid transparent;
  border-bottom: none;
  background-color: #e5e9ec;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  bottom: -1px;
}

.tab-btn:hover {
  background-color: #dce3e7;
  color: #111111;
}

.tab-btn.active {
  background-color: #ffffff;
  color: #0b635f;
  border-color: #d1d5db #d1d5db transparent #d1d5db;
  border-top: 3px solid #0b635f;
}

/* Tabla clínica */
.table-vet {
  width: 100%;
  border-collapse: collapse;
}

.table-vet th {
  background-color: #f7f9fa;
  color: #4b5563;
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: capitalize;
  padding: 12px 14px;
  border-bottom: 2px solid #e5e7eb;
  border-right: 1px solid #edf0f2;
}

.table-vet td {
  padding: 12px 14px;
  font-size: 0.85rem;
  color: #374151;
  border-bottom: 1px solid #edf0f2;
  border-right: 1px solid #f3f4f6;
  vertical-align: middle;
}

.table-vet tbody tr:hover {
  background-color: #f8fafc;
}

/* Badge de tipo de visita */
.badge-visit-type {
  background-color: #3b8b54;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-block;
}

.badge-doctor {
  background-color: #3b8b54;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  display: inline-block;
}

/* Scrollbar personalizado */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: #0b635f;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #084c4a;
}

/* ================= ESTILOS DE RECETA MÉDICA IMPRIMIBLE ================= */
.prescription-sheet {
  background: #ffffff;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 36px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  font-family: inherit;
  color: #1f2937;
}

.prescription-rx-symbol {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.2rem;
  font-weight: 700;
  color: #0b635f;
  line-height: 1;
}

/* ================= PANTALLA DE LOGIN Y AUTENTICACIÓN ================= */
#loginOverlay {
  background: radial-gradient(circle at 50% 30%, #0f2c2b 0%, #051414 100%);
}

.login-card {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.config-tab-btn {
  padding: 8px 16px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #4b5563;
  border-radius: 8px;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.config-tab-btn:hover {
  background-color: #f3f4f6;
  color: #111827;
}

.config-tab-btn.active {
  background-color: #0b635f;
  color: #ffffff;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

/* Reglas de Impresión @media print */
@media print {
  body {
    background-color: #ffffff !important;
    color: #000000 !important;
    overflow: visible !important;
    height: auto !important;
  }

  /* Ocultar toda la interfaz de la app y modales de acceso */
  #sidebar,
  header,
  #patientActiveSection,
  #emptyClinicState,
  #newVisitModal,
  #newPatientModal,
  #newClinicModal,
  #newUserModal,
  #loginOverlay,
  .no-print {
    display: none !important;
  }

  /* Mostrar exclusivamente el documento activo para imprimir (receta, comprobante o carnet/ficha) */
  #prescriptionModal:not(.hidden),
  #paymentReceiptModal:not(.hidden),
  #patientExportModal:not(.hidden) {
    display: block !important;
    position: static !important;
    background: transparent !important;
    padding: 0 !important;
    backdrop-filter: none !important;
  }

  .prescription-sheet {
    box-shadow: none !important;
    border: 1px solid #9ca3af !important;
    max-width: 100% !important;
    padding: 20px 24px !important;
    page-break-inside: avoid;
  }
}