html {
  scroll-behavior: smooth;
}

/* MAIN WRAPPER – FULL WIDTH */
.cleaning-table-wrapper {
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: 30px auto;
  padding: 0;
  background: rgba(255,255,255,0.22);
  border-radius: 18px;
  backdrop-filter: blur(15px) saturate(180%);
  -webkit-backdrop-filter: blur(15px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.35);
  overflow: hidden;
}

/* CLOSED STATE */
.cleaning-table-wrapper.collapsed {
  display: none;
}

/* CLOSE BUTTON */
.cleaning-table-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .15s;
  z-index: 10;
}

.cleaning-table-close:hover {
  transform: scale(1.18);
  background: rgba(255,255,255,0.75);
}

/*zindex*/
/* Section headers ONLY when visible (.show) */
.cleaning-master-table tr.section-header{
    position: relative;
    z-index: 10;       /* above watermark */
}

/* And the title cell inside the visible header */
.cleaning-master-table tr.section-header td {
    position: relative;
    z-index: 11;       /* keeps text above everything */
}



/* COVER IMAGE */
.cleaning-table-cover {
  width: 100%;
  height: clamp(220px, 32vw, 380px);
  overflow: hidden;
  position: relative;
}

.cleaning-table-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ============================================================
   WATERMARK — FIXED VERSION (NO MÁS HEADER INVISIBLE)
   ============================================================ */

/* TABLE BASE */
.cleaning-master-table {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  border-collapse: collapse;
  background: rgba(255,255,255,0.75);
  table-layout: fixed;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
}

/* WATERMARK ONLY ON TBODY (so header stays clean) */
.cleaning-master-table tbody {
  position: relative;
}

.cleaning-master-table tbody::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/logo/logomelida.png");
  background-repeat: repeat-y;
  background-size: auto 600px;    /* NO estira la imagen */
  background-position: center top;
  opacity: 0.05;                   /* 5% watermark */
  pointer-events: none;
  z-index: 0;
}

/* CONTENT ABOVE WATERMARK */

/******** HEADER *******/

.cleaning-master-table thead th {
  background: linear-gradient(135deg, #003b57, #0072a8);
  color: #fff;
  font-weight: 800;
  padding: 9px 6px;
  font-size: 12px;
  text-align: center;
  border-bottom: 2px solid rgba(0,0,0,0.25);
}

.cleaning-master-table thead th:first-child {
  text-align: left;
  padding-left: 12px;
}

/******** CELLS *******/

.cleaning-master-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  transition: background .15s;
  vertical-align: middle;
}

.cleaning-master-table .service-col {
  white-space: normal;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  color: #2b2b2b;
}

/******** ICONS *******/

.cleaning-master-table i.fa-check {
  font-size: 16px;
  color: #14c775;
}

.cleaning-master-table i.fa-xmark {
  font-size: 16px;
  color: #ff5252;
}

/* Alineación perfecta de las columnas con checks y X */
.cleaning-master-table td:not(.service-col) {
    text-align: center !important;      /* centra horizontal */
    vertical-align: middle !important;  /* centra vertical */
}

/* Asegurar que los íconos estén en el centro visual exacto */
.cleaning-master-table i.fa-check,
.cleaning-master-table i.fa-xmark {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
}

/******** SECTION HEADERS *******/

.cleaning-master-table tr.section-header td {
  background: rgba(0, 47, 70, 0.87);
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  text-transform: uppercase;
  text-align: center;
  padding: 14px 10px;
  border-bottom: 2px solid rgba(0,0,0,0.35);

  background-image: url("melidas-cleaning/public/assets/images/logo-watermark.png");
  background-repeat: no-repeat;
  background-position: right 26px center;
  background-size: 95px;

  pointer-events: none;
}

/******** HOVER EFFECTS *******/

.cleaning-master-table tbody tr:not(.section-header):hover td {
  background: rgba(0,143,190,0.08);
}

.cleaning-master-table tbody tr:not(.section-header) td:hover {
  background: rgba(0,143,190,0.15) !important;
}

.cleaning-master-table tbody tr:not(.section-header) td:hover i {
  transform: scale(1.22);
}

/******** SHOW/HIDE ANIMATION *******/

.cleaning-master-table tr[data-section] {
  display: none !important;
}

.cleaning-master-table tr[data-section].show {
  display: table-row !important;
  animation: fadeRow .22s ease-out;
}

@keyframes fadeRow {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}

/******** TOGGLE BUTTON *******/

.cleaning-table-controls {
  padding: 20px 0 30px;
  text-align: center;
}

.cleaning-toggle-btn {
  background: linear-gradient(135deg, #11d8ca, #0090d7);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 14px 36px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0,0,0,0.18);
  transition: .2s;
}

.cleaning-toggle-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0,0,0,0.28);
}

/******** MOBILE ********/
@media (max-width: 768px) {
  .cleaning-master-table {
    font-size: 10px;
  }

  .cleaning-master-table td {
    padding: 6px 6px;
  }

  .cleaning-master-table .service-col {
    font-size: 10px;
  }

  .cleaning-table-cover {
    height: 220px;
  }
}