/* ===========================================
   Dashboard - Solo estilos que Bootstrap no cubre
   =========================================== */

/* Espaciado para navbar fixed */
.main-content {
  padding-top: 76px;
  min-height: 100vh;
}

/* Avatar circular con inicial */
.user-avatar-sm {
  width: 32px;
  height: 32px;
  min-width: 32px;
}

/* Tamaños específicos no disponibles en Bootstrap */
.icon-circle {
  width: 60px;
  height: 60px;
}

.icon-lg {
  font-size: 3rem;
}

.avatar-sm {
  width: 40px;
  height: 40px;
  min-width: 40px;
}

@media (max-width: 576px) {
  .main-content {
    padding-top: 66px;
  }
}

/* ===========================================
   Upload de imágenes en servicios
   =========================================== */

/* Área de carga con borde punteado */
.image-upload-label {
  border: 2px dashed #dee2e6;
  border-radius: 8px;
  transition: border-color 0.2s, background-color 0.2s;
}

.image-upload-label:hover {
  border-color: #0d6efd;
  background-color: #f0f4ff;
}

/* Thumbnail container */
.image-thumb {
  display: inline-block;
  flex-shrink: 0;
}

.image-thumb img {
  border-radius: 6px;
  display: block;
}

/* ===========================================
   Icon picker — selector emoji de servicios
   =========================================== */

.icon-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.icon-opt {
  width: 38px;
  height: 38px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
  cursor: pointer;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: border-color 0.12s, background 0.12s, transform 0.1s;
  line-height: 1;
}

.icon-opt:hover {
  border-color: #9ca3af;
  background: #f0f4ff;
  transform: scale(1.12);
}

.icon-opt.selected {
  border-color: #0d6efd;
  background: #e7f1ff;
  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.2);
}

/* ===========================================
   simple_calendar 3.x — estructura real:
   div.simple-calendar > div.calendar-heading + table.table.table-striped
   El <td> ya tiene clase "day" del gem — NO reusar ese nombre.
   =========================================== */

/* Ocultar navegación propia del gem (usamos la nuestra) */
.simple-calendar .calendar-heading {
  display: none;
}

/* Wrapper externo: solo asegurar que ocupe todo el ancho */
.simple-calendar {
  width: 100%;
}

/* La tabla interna: columnas iguales, sin rayas de Bootstrap */
.simple-calendar .table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin-bottom: 0;
}

/* Anular table-striped de Bootstrap (variables CSS) */
.simple-calendar .table-striped > tbody > tr > * {
  --bs-table-striped-bg: transparent;
  --bs-table-accent-bg: transparent;
  background-color: transparent;
}

/* Encabezados de días de la semana */
.simple-calendar .table thead th {
  background-color: #f8f9fa;
  text-align: center;
  padding: 10px 4px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6c757d;
  border-bottom: 2px solid #dee2e6;
  width: calc(100% / 7);
  border-right: 1px solid #dee2e6;
}

/* Cada celda de día: altura fija para llenar la pantalla sin scroll global.
   Si el día tiene muchas citas, la celda misma hace scroll. */
.simple-calendar .table td.day {
  vertical-align: top;
  padding: 0;
  border: 1px solid #e9ecef;
  width: calc(100% / 7);
  height: calc((100vh - 310px) / 6);
  overflow-y: auto;
}

/* Colores por estado del día */
.simple-calendar .table td.today {
  background-color: #e8f4fd !important;
}
.simple-calendar .table td.past {
  background-color: #fafafa;
}
.simple-calendar .table td.future {
  background-color: #fff;
}
.simple-calendar .table td.wday-0,
.simple-calendar .table td.wday-6 {
  background-color: #f8f9fa;
}
.simple-calendar .table td.prev-month,
.simple-calendar .table td.next-month {
  opacity: 0.45;
}

/* Número del día — clase sc-day-num para no chocar con .day del gem */
.sc-day-num {
  font-size: 0.8rem;
  font-weight: 600;
  color: #6c757d;
  display: block;
  padding: 5px 7px 3px;
  line-height: 1;
}

.simple-calendar .table td.today .sc-day-num {
  color: #0d6efd;
  font-weight: 700;
}

/* Contenedor de eventos dentro del día */
.sc-day-content {
  padding: 2px 4px 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Píldora de evento */
.sc-event {
  font-size: 0.72rem;
  line-height: 1.25;
  cursor: pointer;
  transition: opacity 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 4px;
}

.sc-event:hover {
  opacity: 0.82;
}

@media (max-width: 768px) {
  .simple-calendar .table td.day {
    height: calc((100vh - 280px) / 6);
    padding: 0;
  }
  .sc-day-num {
    font-size: 0.68rem;
    padding: 3px 4px 2px;
  }
  .sc-event {
    font-size: 0.6rem;
  }
  .simple-calendar .table thead th {
    font-size: 0.65rem;
    padding: 6px 2px;
  }
}

/* ===========================================
   Odontograma interactivo
   =========================================== */

.odonto-wrapper {
  font-family: inherit;
}

/* ── Barra de condiciones ── */
.odonto-cond-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 7px;
  border: 1.5px solid #e5e7eb;
  border-radius: 20px;
  background: white;
  font-size: 0.78rem;
  color: #374151;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}
.odonto-cond-btn:hover {
  border-color: #9ca3af;
}
.odonto-cond-btn.odonto-active {
  border-color: #374151;
  box-shadow: 0 0 0 2px rgba(55,65,81,0.18);
  background: #f9fafb;
  font-weight: 600;
}
.odonto-cond-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.odonto-cond-label {
  line-height: 1;
}

/* ── Chart principal ── */
.odonto-chart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  padding: 8px 0;
}

.odonto-arch-label {
  font-size: 0.72rem;
  color: #6b7280;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 0;
  width: 100%;
  text-align: center;
}

/* ── Filas de dientes ── */
.odonto-row {
  display: flex;
  align-items: flex-end;
  gap: 0;
}
.odonto-row-child {
  align-items: flex-end;
}

.odonto-half {
  display: flex;
  gap: 0;
}

/* ── Línea media ── */
.odonto-midline {
  width: 3px;
  background: #374151;
  align-self: stretch;
  flex-shrink: 0;
  margin: 0 2px;
}
.odonto-midline-child {
  background: #9ca3af;
  width: 2px;
}

/* ── Separador superior/inferior ── */
.odonto-separator {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 3px 0;
  font-size: 0.68rem;
  color: #9ca3af;
  font-weight: 600;
}
.odonto-sep-line {
  flex: 1;
  height: 1px;
  background: #d1d5db;
}

/* ── Wrap individual de cada diente ── */
.odonto-tooth-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  margin: 0 1px;
}

/* ── Número del diente ── */
.odonto-num {
  font-size: 0.6rem;
  color: #6b7280;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ── SVG del diente ── */
.tooth-svg {
  display: block;
  flex-shrink: 0;
}
.odonto-editable .tooth-svg .tf:hover {
  fill-opacity: 0.5 !important;
}

/* ── Fila de dientes dentro del half ── */
.odonto-teeth-row {
  display: flex;
  gap: 0;
}

/* ── Leyenda ── */
.odonto-legend {
  border-top: 1px solid #e5e7eb;
  padding-top: 10px;
}

/* ── Leyenda de caras ── */
.odonto-face-legend {
  border-bottom: 1px dashed #e5e7eb;
  padding-bottom: 6px;
}

@media (max-width: 640px) {
  .odonto-chart {
    min-width: 500px;
  }
  .odonto-num {
    font-size: 0.5rem;
  }
}

/* ===========================================
   Utilidades: visibilidad en pantalla vs impresión
   =========================================== */

/* En pantalla: .print-only oculto, .no-print visible (comportamiento por defecto) */
.print-only {
  display: none !important;
}

/* ===========================================
   @media print — Expediente clínico compacto
   =========================================== */

@media print {
  /* Configuración de página A4 */
  @page {
    size: A4 portrait;
    margin: 12mm 15mm 15mm 15mm;
  }

  /* Resetear color y fondo del body */
  body {
    background: white !important;
    color: #000 !important;
    font-size: 10pt !important;
  }

  /* Quitar padding del navbar fixed */
  .main-content {
    padding-top: 0 !important;
    min-height: unset !important;
  }

  /* Ocultar todo lo que no se imprime */
  .no-print,
  #main-navbar,
  nav.navbar,
  .navbar {
    display: none !important;
  }

  /* Mostrar encabezado de impresión */
  .print-only {
    display: block !important;
  }

  /* ── Cards: sin sombras, sin bordes redondeados, compactas ── */
  .card {
    border: 1px solid #ccc !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-bottom: 6pt !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .card-header {
    padding: 4pt 8pt !important;
    background: #f0f0f0 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .card-header h6 {
    font-size: 9pt !important;
    margin-bottom: 0 !important;
  }

  .card-body {
    padding: 6pt 8pt !important;
  }

  .card-body p,
  .card-body span,
  .card-body div {
    font-size: 9pt !important;
  }

  /* ── Reducir font-size general ── */
  h4, h5, h6 { font-size: 10pt !important; }
  .small, small { font-size: 8pt !important; }
  .fs-5 { font-size: 10pt !important; }
  .fs-6 { font-size: 9pt !important; }

  /* ── Badges compactos ── */
  .badge {
    font-size: 8pt !important;
    padding: 2pt 5pt !important;
    border-radius: 3pt !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* ── Quitar colores de fondo de filas y columnas ── */
  .bg-light {
    background-color: #f0f0f0 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .bg-primary, .bg-success, .bg-danger, .bg-warning,
  .bg-primary.bg-opacity-10, .bg-success.bg-opacity-10 {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* ── Layout de columnas ── */
  .row { margin: 0 !important; }
  .col-md-4, .col-md-6 { padding: 2pt 4pt !important; }

  /* ── Compactar internos del expediente ── */
  .mb-3, .mb-4 { margin-bottom: 4pt !important; }
  .mt-4, .mt-3 { margin-top: 4pt !important; }
  .pt-3, .pb-4 { padding-top: 4pt !important; padding-bottom: 4pt !important; }
  .p-3 { padding: 4pt !important; }
  .p-4 { padding: 6pt 8pt !important; }
  .g-4 { --bs-gutter-y: 4pt; --bs-gutter-x: 8pt; }
  .py-3 { padding-top: 4pt !important; padding-bottom: 4pt !important; }
  .py-4 { padding-top: 6pt !important; padding-bottom: 6pt !important; }
  .gap-4 { gap: 4pt !important; }

  /* ── Firma: compactar ── */
  .border-top { border-top: 1px solid #ccc !important; }
  .border-start { border-left: 2px solid #0d6efd !important; }

  /* ── Alerta inferior ── */
  .alert {
    padding: 4pt 8pt !important;
    font-size: 8pt !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
  }

  /* ── Odontograma: compactar ── */
  .odonto-chart {
    padding: 4pt 0 !important;
    gap: 1px !important;
  }
  .odonto-cond-btn {
    font-size: 7pt !important;
    padding: 2pt 6pt !important;
  }
  .odonto-num {
    font-size: 5.5pt !important;
  }
  .odonto-legend {
    font-size: 8pt !important;
  }

  /* ── Ocultar botones de acción en notas de evolución ── */
  .btn { display: none !important; }

  /* ── Notas de evolución: compactas ── */
  .border-bottom { border-bottom: 1px solid #ddd !important; }
  .ps-2 { padding-left: 4pt !important; }
  .border-3 { border-left-width: 2px !important; }

  /* ── print-header siempre visible ── */
  .print-header {
    margin-bottom: 6pt;
  }
  .print-header h5 {
    font-size: 11pt !important;
  }

  /* ── container ── */
  .container-fluid {
    padding: 0 !important;
  }
}