:root{
      --bg:#0b1220;
      --panel:#0f1a2e;
      --card:#111f37;
      --muted:#93a4c7;
      --text:#e8eefc;
      --accent:#3b82f6;
      --accent2:#22c55e;
      --danger:#ef4444;
      --border:rgba(255,255,255,.08);
      --shadow:0 18px 40px rgba(0,0,0,.35);
      --radius:18px;
      --sidebarW:280px;
      --topbarH:64px;
      --gap:16px;
      --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    }

    *{ box-sizing:border-box; }
    

    html,
body{
  margin:0;
  padding:0;
  height:100%;
}

body{
  min-height:100dvh; /* ⭐ CLAVE */

  font-family:var(--font);
  color:var(--text);

  background:
    radial-gradient(1200px 600px at 20% 0%,
      rgba(56,189,248,.25), transparent 60%),

    radial-gradient(900px 500px at 80% 10%,
      rgba(34,211,238,.18), transparent 60%),

    linear-gradient(
      180deg,
      #021a2b,
      #032a44,
      #053b5f
    );

  background-repeat:no-repeat;
  background-size:cover;
  background-attachment:fixed;
}

/*
body{
  min-height: 100dvh;
    font-family: var(--font);
    color: #000000;
    background: radial-gradient(1200px 600px at 20% 0%, rgba(56, 189, 248, .25), transparent 60%), radial-gradient(900px 500px at 80% 10%, rgba(34, 211, 238, .18), transparent 60%), linear-gradient(180deg, #ffffff, #ffffff, #ffffff);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
*/



    a{ color:inherit; text-decoration:none; }
    button{ font-family:inherit; }

    /* Layout */
    .app{
      display:grid;
      grid-template-columns: var(--sidebarW) 1fr;
      min-height:100vh;
    }

    /* Sidebar */
    .sidebar{
      position:sticky;
      top:0;
      height:100vh;
      padding:18px 14px;
      background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      border-right:1px solid var(--border);
      backdrop-filter: blur(10px);
    }
    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      padding:10px 10px 14px;
      border-bottom:1px solid var(--border);
      margin-bottom:12px;
    }
    .logo{
      width:38px;
      height:38px;
      border-radius:12px;
      overflow:hidden;
      box-shadow: 0 12px 28px rgba(59,130,246,.22);
      background: transparent;
    }

    .logo img{
      width:100%;
      height:100%;
      object-fit:cover;
    }
    .brand h1{
      font-size:14px;
      margin:0;
      letter-spacing:.2px;
      line-height:1.2;
    }
    .brand small{
      display:block;
      color:var(--muted);
      font-size:12px;
      margin-top:2px;
    }

    .nav{
      display:flex;
      flex-direction:column;
      gap:6px;
      padding:8px;
    }
    .nav-section{
      margin-top:10px;
      color:var(--muted);
      font-size:11px;
      letter-spacing:.14em;
      text-transform:uppercase;
      padding:8px 10px;
    }
    .nav a{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:12px 12px;
      border-radius:14px;
      border:1px solid transparent;
      transition:.15s ease;
      background: rgba(255,255,255,.02);
    }
    .nav a:hover{
      border-color: rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
    }
    .nav a.active{
      border-color: rgba(59,130,246,.35);
      background: rgba(59,130,246,.12);
    }
    .nav .left{
      display:flex; align-items:center; gap:10px;
      min-width:0;
    }
    .icon{
      width:18px;height:18px; flex:0 0 auto;
      opacity:.95;
    }
    .label{
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      font-size:14px;
    }
    .pill{
      font-size:12px;
      padding:3px 8px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.12);
      color:var(--muted);
      background: rgba(0,0,0,.12);
    }

    .sidebar-footer{
      position:absolute;
      left:0; right:0;
      bottom:0;
      padding:14px;
      border-top:1px solid var(--border);
      background: linear-gradient(180deg, transparent, rgba(0,0,0,.18));
    }
    .user{
      display:flex; align-items:center; justify-content:space-between;
      gap:10px;
      padding:10px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
    }
    .avatar{
      width:34px;height:34px;border-radius:12px;
      background: linear-gradient(135deg, rgba(255,255,255,.25), rgba(255,255,255,.05));
      display:grid;place-items:center;
      font-weight:700;
      color:#fff;
    }
    .user .meta{
      display:flex; flex-direction:column;
      min-width:0;
    }
    .user .meta strong{
      font-size:13px;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    .user .meta span{
      font-size:12px; color:var(--muted);
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    .logout{
      border:0;
      background:transparent;
      color:var(--muted);
      cursor:pointer;
      padding:8px 10px;
      border-radius:12px;
      transition:.15s ease;
    }
    .logout:hover{
      color:var(--text);
      background: rgba(255,255,255,.05);
    }

    /* Main */
    .main{
      min-width:0;
      padding:18px;
    }

    .topbar{
      height:var(--topbarH);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:12px 14px;
      border:1px solid var(--border);
      border-radius: var(--radius);
      background: rgba(255,255,255,.03);
      backdrop-filter: blur(10px);
      box-shadow: var(--shadow);
      position:sticky;
      top:14px;
      z-index:15;
    }
    .topbar-left{
      display:flex; align-items:center; gap:12px; min-width:0;
    }
    .burger{
      width:42px;height:42px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
      display:grid; place-items:center;
      cursor:pointer;
      transition:.15s ease;
    }
    .burger:hover{ background: rgba(255,255,255,.05); }
    .title{
      min-width:0;
    }
    .title h2{
      margin:0;
      font-size:15px;
      letter-spacing:.2px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      color: #333333;
    }
    .title p{
      margin:2px 0 0;
      font-size:12px;
      color:var(--muted);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      color: #333333;
    }

    .topbar-right{
      display:flex; align-items:center; gap:10px;
    }
    .search{
      display:flex; align-items:center; gap:8px;
      padding:10px 12px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.10);
      min-width: 260px;
    }
    .search input{
      width:100%;
      border:0;
      outline:0;
      background:transparent;
      color:var(--text);
      font-size:13px;
    }
    .btn{
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
      color:var(--text);
      border-radius:14px;
      padding:10px 12px;
      cursor:pointer;
      transition:.15s ease;
      display:flex; align-items:center; gap:8px;
      font-size:13px;
      white-space:nowrap;
    }
    .btn:hover{ background: rgba(255,255,255,.06); }
    .btn.primary{
      border-color: rgba(59,130,246,.35);
      background: rgba(59,130,246,.14);
      color:#333333;
    }

    /* Content grid */
    .content{
      margin-top:16px;
      display:grid;
      grid-template-columns: 1fr;
      gap: var(--gap);
    }

    .kpis{
      display:grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: var(--gap);
    }
    .card{
      border:1px solid var(--border);
      background: rgba(255,255,255,.03);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding:14px;
      min-width:0;
    }
    .kpi{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:10px;
    }
    .kpi .name{
      color:var(--muted);
      font-size:12px;
      margin:0 0 8px;
    }
    .kpi .value{
      font-size:22px;
      font-weight:800;
      margin:0;
      letter-spacing:.2px;
    }
    .kpi .trend{
      margin-top:8px;
      font-size:12px;
      color:var(--muted);
      display:flex; align-items:center; gap:6px;
    }
    .dot{
      width:10px;height:10px;border-radius:999px;
      background: rgba(255,255,255,.2);
      border:1px solid rgba(255,255,255,.14);
    }
    .dot.up{ background: rgba(34,197,94,.22); border-color: rgba(34,197,94,.35); }
    .dot.down{ background: rgba(239,68,68,.20); border-color: rgba(239,68,68,.35); }

    .grid-2{
      display:grid;
      grid-template-columns: 2fr 1fr;
      gap: var(--gap);
    }

    .card-header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-bottom:10px;
    }
    .card-header h3{
      margin:0;
      font-size:14px;
      letter-spacing:.2px;
    }
    .card-header span{
      color:var(--muted);
      font-size:12px;
    }

    .chart-wrap{
      height:320px;
    }
    .chart-wrap.small{
      height:320px;
      display:grid;
      place-items:center;
    }

    /* Table */
    .table{
      width:100%;
      border-collapse:separate;
      border-spacing:0;
      overflow:hidden;
      border-radius: 14px;
      border:1px solid rgba(255,255,255,.10);
    }
    .table th, .table td{
      padding:12px 12px;
      font-size:13px;
      text-align:left;
      border-bottom:1px solid rgba(255,255,255,.08);
      vertical-align:middle;
    }
    .table th{
      color:var(--muted);
      font-weight:600;
      background: rgba(0,0,0,.12);
    }
    .table tr:last-child td{ border-bottom:0; }
    .status{
      display:inline-flex; align-items:center; gap:8px;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.10);
      font-size:12px;
      color:var(--muted);
      background: rgba(0,0,0,.10);
    }
    .status .s-dot{
      width:10px;height:10px;border-radius:999px;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.18);
    }
    .status.ok .s-dot{ background: rgba(34,197,94,.22); border-color: rgba(34,197,94,.35); }
    .status.warn .s-dot{ background: rgba(255,159,10,.22); border-color: rgba(255,159,10,.35); }
    .status.bad .s-dot{ background: rgba(239,68,68,.20); border-color: rgba(239,68,68,.35); }

    /* Mobile / Responsive */
    .overlay{
      position:fixed;
      inset:0;
      background: rgba(0,0,0,.45);
      backdrop-filter: blur(6px);
      z-index:50;
      display:none;
    }

    @media (max-width: 1024px){
      .kpis{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .grid-2{ grid-template-columns: 1fr; }
      .search{ min-width: 180px; }
    }

    @media (max-width: 860px){
      .app{ grid-template-columns: 1fr; }
      .sidebar{
        position:fixed;
        left:0; top:0;
        width: var(--sidebarW);
        transform: translateX(-105%);
        transition: transform .2s ease;
        z-index:60;
      }
      .sidebar.open{ transform: translateX(0); }
      .overlay.show{ display:block; }
      .main{ padding:14px; }
      .topbar{ top:10px; }
      .search{ display:none; }
    }

    @media (max-width: 520px){
      .kpis{ grid-template-columns: 1fr; }
      .btn .hide-sm{ display:none; }
    }

    /* Tiny inline icons */
    svg{ display:block; }




    /* ===============================
   MOBILE TABLE SCROLL
================================*/

.tableScroll{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* evita que columnas se compriman */
.table{
  min-width:650px;
}

/* scroll bonito iOS */
.tableScroll::-webkit-scrollbar{
  height:8px;
}

.tableScroll::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.2);
  border-radius:20px;
}



/* ===============================
   STATUS COLORS
================================*/

.statusBadge{
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  display:inline-block;
  white-space:nowrap;
}

/* Estados */
.status-authorized{
  background:#e6f9ee;
  color:#0f8f45;
}

.status-pending{
  background:#fff6db;
  color:#b78103;
}

.status-cancelled{
  background:#ffe8e8;
  color:#c62828;
}

.status-completed{
  background:#e6f0ff;
  color:#1e5ed6;
}

.status-default{
  background:#f0f0f0;
  color:#555;
}


.statusBadge{
  cursor:pointer;
  transition:.15s;
}

.statusBadge:hover{
  transform:scale(1.05);
  opacity:.9;
}

/* ===============================
   DATE INPUT — MOBILE STYLE
================================*/

.dateInput{
  width:100%;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:#0f1a2e;
  color:#fff;
  font-size:16px;
  outline:none;
  transition:.2s;
  appearance:none;
  -webkit-appearance:none;
}

#saveDiveBtn{
  background:#ef4444;
  color:#fff;
}

#saveDiveBtn.dirty {
    background: #ff9800;
    color: #fff;
    animation: pulseDirty 1.2s infinite;
}

.dateInput:focus{
  border-color:#2db1cb;
  box-shadow:0 0 0 3px rgba(45,177,203,.25);
}

/* icon calendar */
.dateInput::-webkit-calendar-picker-indicator{
  filter:invert(1);
  opacity:.8;
  cursor:pointer;
}

/* iOS zoom fix */
input[type="date"]{
  font-size:16px;
}




/* ===============================
   DIVE POPUP
================================*/

.diveOverlay{
  position:fixed;
  inset:0;

  background:transparent; /* ⭐ transparente */

  backdrop-filter:none;   /* opcional */
  z-index:9999;
}

.diveOverlay{
  pointer-events:none;
}

.diveModal{
  position:fixed;

  top:0;
   right:0; 

  width:50%;
  max-width:900px;
  height:100dvh;

  background:#ffffff;
  color:#181616;

  border-radius:0 20px 20px 0;

  overflow:auto;
  z-index:10000;

  display:flex;
  flex-direction:column;

  box-shadow:
    20px 0 40px rgba(0,0,0,.25);
}

.diveModal{
  will-change: transform;
  transform: translateZ(0);
}

body.dive-open{
  overflow:hidden;
}

body.dive-open{
  overflow:hidden;
  padding-right: 0 !important; /* opcional */
}

/* mejora moderna: mantiene estable el gutter del scrollbar */
html{
  scrollbar-gutter: stable;
}

@media (max-width:900px){

  .diveModal{
    width:100%;
    border-radius:0;
  }

}





#closeDivePopup{
  background:#ef4444;
  color:white;

  border:none;
  border-radius:8px;

  width:36px;
  height:36px;

  font-size:18px;
  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;

  transition:.2s;
}

#closeDivePopup:hover{
  background:#dc2626;
  transform:scale(1.05);
}



#closeNoReserve{
  background:#ef4444;
  color:white;

  border:none;
  border-radius:8px;

  width:36px;
  height:36px;

  font-size:18px;
  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;

  transition:.2s;
}

#closeNoReserve:hover{
  background:#dc2626;
  transform:scale(1.05);
}




.diveHeader{
  position:sticky;
  top:0;

  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:18px;

  background:#f5f5f5; /* obligatorio */
  border-bottom:1px solid rgba(255,255,255,.1);

  z-index:10;
}


.diveModal{
  position:fixed;
  background:#ffffff;
  overflow:hidden;

  display:flex;
  flex-direction:column;
}

.diveBody{
  overflow-y:auto;
  padding:20px;
}


.diveHeader button{
  background:none;
  border:none;
  color:white;
  font-size:20px;
  cursor:pointer;
}

.diverCard{
  padding:10px;
  background:#e4e4e4;
  margin-bottom:8px;
}


      .sitesWrapper{
  width:100%;
  overflow:hidden;
}

.guideColumn{
  width:50%;
  float:left;
  box-sizing:border-box;
  padding-right:10px;
}

.guideTitle{
  font-weight:bold;
  margin-bottom:8px;
  border-bottom:1px solid #444;
  padding-bottom:4px;
}

.siteRow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:4px 0;
}

.siteRow button{
  background:#ff3b30;
  border:none;
  color:white;
  border-radius:4px;
  cursor:pointer;
  padding:2px 6px;
}

    /* ============================
   CENTERED FULL WIDTH ROW
============================ */

.formRowCenter{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  margin:12px 0;
}

/* controla el ancho del contenido interno */
.formRowCenter > *{
  width:100%;
  max-width:420px;
}

.diverBtnWrapper{
  width:50%;
  float:left;

  display:grid;
  justify-content:center;   /* horizontal */
  align-items:center;       /* vertical */

  min-height:100%;
}

/* opcional para evitar que el botón se estire raro */
.diverBtnWrapper .btn{
  width:auto;
}



/* ===== COMPACT DIVE SITES ===== */

.sitesWrapper{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.guideColumn{
  flex:1 1 340px;
}

.guideTitle{
  font-size:13px;
  font-weight:600;
  margin-bottom:6px;
  opacity:.7;
}

.siteRow{
  display:grid;
  grid-template-columns:
    110px   /* guide */
    80px    /* dive */
    1fr     /* site */
    70px    /* time */
    70px    /* depth */
    34px;   /* delete */

  gap:6px;
  align-items:center;
  margin-bottom:6px;
}

.siteRow select,
.siteRow input{
  height:28px;
  font-size:12px;
  padding:2px 6px;
}

.removeSite{
  height:28px;
  border:none;
  background:#ef4444;
  color:white;
  border-radius:4px;
  cursor:pointer;
}




/* 🔥 ERROR VISUAL */
.selectError{
  border:2px solid #ff3b30;
  background:#fff5f5;
  box-shadow:0 0 0 2px rgba(255,59,48,.15);
}

.selectError{
  border:2px solid #ff3b30;
  background:#fff5f5;
  box-shadow:0 0 0 2px rgba(255,59,48,.15);
}


/* =================================
   FORCE MOBILE SIDEBAR MODE
================================= */

body.force-mobile-menu .app{
  grid-template-columns: 1fr;
}

/* sidebar estilo mobile SIEMPRE */
body.force-mobile-menu .sidebar{
  position:fixed;
  left:0;
  top:0;
  width:var(--sidebarW);

  transform:translateX(-105%);
  transition:transform .25s ease;

  z-index:60;
}

/* cuando abre */
body.force-mobile-menu .sidebar.open{
  transform:translateX(0);
}

/* overlay */
body.force-mobile-menu .overlay.show{
  display:block;
}





.boatsGrid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(360px,1fr));
gap:14px;
}

.boatCard{
background:#f3f3f3;
padding:0px;

}

.boatHeader{
display:flex;
justify-content:space-between;
background:#1fa9c5;
color:white;
padding:6px;
}

.boatInfo{
font-size:12px;
padding:8px 0;
}

.boatDropZone{
background:#40e0d061;
padding:6px;
text-align:center;
cursor:pointer;
}

.boatDiver{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;   /* 🔥 ESTA ES LA CLAVE */
  gap:4px;
}

.diverMain{
  flex:1 1 250px;
  min-width:0;
}

.diverReserve{
  flex:0 1 auto;
  white-space:nowrap;
}

.diverReserve{
  font-size:13px;
  opacity:.8;
}


/* =====================================
BOATS GRID 3 COLUMN LAYOUT
===================================== */

.boatsWrapper{
  width:100%;
  overflow:hidden;
}

/* 33.33% columnas */
.boatCol{
  width:33.33%;
  float:left;
  box-sizing:border-box;
}

/* card */
.boatCard{

  background:#f5f5f5;
  height:480px;

  display:flex;
  flex-direction:column;

  border:1px solid #ccc;
}

/* header */
.boatHeader{
  background:#1fa9c5;
  color:#fff;
  padding:6px 10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:16px;
}

/* info */
.boatInfo{
  font-size:12px;
  padding:6px;
  border-bottom:1px solid #ddd;
}

/* drop zone */
.boatDropZone{
  background:#40e0d061;
  text-align:center;
  padding:6px;
  cursor:pointer;
}

/* diver list */
.diverList{
  flex:1;
  overflow:auto;
}

/* diver row */
.boatDiver{
  font-size:10px;
  padding:1px;
  border-bottom:1px solid #e1e1e1;
}

.boatCol{
  color: #333333;
}

/* responsive */
@media(max-width:1200px){
  .boatCol{ width:50%; }
}

@media(max-width:700px){
  .boatCol{ width:100%; }
}






/* ===============================
LAYOUT
=============================== */

.planingWrapper{
  width:100%;
  height:100vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.planingHeader{
  height:70px;
  min-height:70px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border-bottom:1px solid rgba(255,255,255,.1);

  position:sticky;
  top:0;
  z-index:10;
}

.planBtn{
  padding:6px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.2);
  background: rgb(243 249 120);
  cursor:pointer;
}

.planDate{
  height:38px;
}

.planingBody{
  flex:1;
  display:flex;
  height:0;
  overflow:hidden;
}

/* LEFT PANEL */

.planingLeft{
  flex:0 0 30%;
  min-width:260px;

  overflow:hidden; /* 🔥 CAMBIO CLAVE */

  border-right:1px solid rgba(255,255,255,.1);
}

#active_divers_inner{

  position:sticky;
  top:0;                /* 🔥 importantísimo */

  height:100%;
  max-height:100%;

  overflow-y:auto;
  overflow-x:hidden;

  padding:10px;

}

.planingBody.filtersClosed .planingLeft{
  width:0;
  min-width:0;
  padding:0;
  overflow:hidden;
  border:none;
}

.planingRight{
  flex:1;

  overflow-y:auto;
  overflow-x:hidden;

  
}

/* ===============================
COMPACT DIVER LIST (LIKE IMAGE)
=============================== */

.planningCard{

  display:grid;
  grid-template-columns:
    22px
    1fr
    28px
    70px;

  align-items:center;
  gap:6px;

  padding:1px;
  margin-bottom:4px;

  
  border:1px solid rgba(255,255,255,.08);

  background:rgba(255,255,255,.03);

  font-size:12px;

  cursor:grab;
  transition:.15s;
}

.planningCard:hover{
  background:rgba(255,255,255,.08);
}

.pcIcon{ font-size:14px; }

.pcName{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.pcStatus{
  text-align:center;
  font-size:14px;
}

.pcReserve{
  text-align:right;
  font-size:11px;
  opacity:.8;
  cursor: pointer;
}

.leftEmpty{
  padding:12px;
  border:1px dashed rgba(255,255,255,.25);
  border-radius:10px;
}

.planningCard.cancelled{
  opacity:.45;
}

.planningCard.cancelled{
  opacity:.45;
  filter:grayscale(.3);
}


.planningCard{
  display:grid;
  grid-template-columns: 22px 1fr 28px 28px 70px;
  align-items:center;
  gap:6px;
}
.btnSupport{
  text-align:center;
  cursor:pointer;
  opacity:.8;
}
.btnSupport:hover{ opacity:1; }
.planningCard{
  display:grid;
  grid-template-columns:
    22px
    1fr
    30px
    30px
    70px;
}

.btnSupport{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  user-select:none;
}

.planningCard.assigned{
  border-left: 4px solid rgba(0, 200, 120, .8);
    background-color: #5bcb5b47;
    border: 2px solid #2e902e;
}

.planningCard.unassigned{
  border-left:4px solid rgba(255,180,0,.9);
}


.boatDiver{
  border-bottom:1px solid rgba(255,255,255,.06);
  position:relative;
}

.diverMain{
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.diverMeta{
  font-size:11px;
  opacity:.75;
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.diverReserve{
  position:absolute;
  right:6px;
  top:6px;
  font-size:10px;
  opacity:.6;
}


/* ✅ BOATS: evita encimado, baja a la línea de abajo justo antes de chocar */
.boatsWrapper .boatDiver{
  display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    position: static;
    background-color: #ebebeb;
    margin: 1.5px auto;
    border-radius: 5px;
        padding-left: 5px;
}

.boatsWrapper .boatDiver .diverMain{
  flex:1 1 auto;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.boatsWrapper .boatDiver .diverReserve{
  position:static !important; /* 🔥 mata el absolute */
  margin-left:auto;           /* lo empuja a la derecha cuando cabe */
  white-space:nowrap;         /* se mantiene 1 renglón */
  flex:0 0 auto;              /* no se comprime raro */
}


/* estado assigned/unassigned en panel izquierdo */


.planningCard.assigned .pcStatus{
  transform:scale(1.05);
}

.planningCard.unassigned .pcStatus{
  opacity:.9;
}


.openDiveDetails{
  cursor: pointer;
}
.openDiveDetails.locked{
  opacity:.4;
  pointer-events:none;
  cursor:not-allowed;
}

#save_data_server.dirty{
  background:#ff9800;
  color:#fff;
  animation:pulseDirty 1.2s infinite;
}

@keyframes pulseDirty{
  0%{transform:scale(1);}
  50%{transform:scale(1.05);}
  100%{transform:scale(1);}
}


.boatDropZone.isLoading{
  opacity: .9;
  pointer-events: none; /* evita doble drop mientras carga */
}

.dropLoading{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-weight:600;
}

.dropSpinner{
  width:16px;
  height:16px;
  border:2px solid rgba(0,0,0,.2);
  border-top-color: rgba(0,0,0,.75);
  border-radius:50%;
  animation: dropSpin .8s linear infinite;
}

@keyframes dropSpin{
  to{ transform: rotate(360deg); }
}



/* =====================================
   GLOBAL CONTAINER LOADING
===================================== */

.containerLoading{
  position:absolute;
  inset:0;

  /* 🔥 transparente oscuro */
  background:rgba(0,0,0,.35);

  backdrop-filter: blur(4px);

  display:flex;
  align-items:center;
  justify-content:center;

  z-index:999;
}

/* texto blanco */
.containerLoading .dropLoading{
  font-size:15px;
  color:#fff;
  font-weight:600;
}

/* spinner visible en fondo oscuro */
.containerLoading .dropSpinner{
  border:2px solid rgba(255,255,255,.25);
  border-top-color:#fff;
}



.reserveServices{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.serviceCard{
  background:#f8fafc;
  border-radius:10px;
  padding:12px;
  border:1px solid #e2e8f0;
}

.serviceHeader{
  display:flex;
  justify-content:space-between;
  font-weight:600;
  margin-bottom:8px;
}

.serviceDiver{
  font-size:13px;
  padding:4px 0;
}

.serviceRow{
  display:flex;
  gap:20px;
  align-items:flex-start;
}

.serviceLeft{
  width:65%;
  display:flex;
  flex-direction:column;
}

.serviceRight{
  width:35%;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.serviceRight input,
.serviceRight select{
  width:100%;
  padding:6px;
  border-radius:6px;
  border:1px solid #ddd;
  font-size:13px;
}

.serviceCard{
  background:#f8fafc;
  border-radius:10px;
  padding:12px;
  border:1px solid #e2e8f0;
  margin-bottom:10px;
}



.globalSaveBar{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  background:#111827;
  padding:10px;
  text-align:center;
  z-index:9999;
}

.globalSaveBar button{
  background:#ef4444;
  color:white;
  border:none;
  padding:10px 20px;
  border-radius:8px;
  cursor:pointer;
}

.globalSaveBar.hidden{
  display:none;
}

.serviceCard.dirty{
  border:2px solid #f59e0b;
}


/* ===== PLANNING CARD: layout nuevo ===== */
/* ===== PLANNING CARD ===== */
.planningCard{
  display:grid;
  grid-template-columns: 22px minmax(0,1fr) auto; /* icon | name | right */
  grid-template-rows: auto;
  align-items:center;
  gap:6px;
  overflow:hidden; /* evita overlaps visuales */
}

/* el nombre puede cortar sin empujar todo */
.pcName{
  min-width:0;
}

/* bloque derecho normal (a la derecha) */
.pcRight{
  justify-self:end;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
  min-width:0;
}

/* arriba: status + support */
.pcRightTop{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
}

/* ID */
.pcReserve{
  text-align:right;
  white-space:nowrap;
}

/* =========================================================
   MODO "NO CABE": el panel derecho baja y queda horizontal
   (usa breakpoint; si quieres lo ajustamos a tu layout real)
========================================================= */
@media (max-width: 420px){

  .planningCard{
    grid-template-columns: 22px minmax(0,1fr); /* quitamos la 3ra columna */
    grid-template-rows: auto auto;             /* 2 filas */
    align-items:start;
  }

  /* el bloque derecho se va a la fila de abajo ocupando todo */
  .pcRight{
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self:stretch;

    /* 👇 horizontal abajo */
    flex-direction:row;
    align-items:center;
    justify-content:flex-end;
    gap:8px 10px;
    flex-wrap:wrap; /* si aun así no cabe, envuelve */
    margin-top:4px;
  }

  /* ya no necesitamos columna/stack interno */
  .pcRightTop{
    flex-direction:row;
    gap:6px;
  }

  /* para que ID quede al final o al inicio, elige uno: */
  .pcReserve{ order: 2; }     /* ID al final */
  .pcRightTop{ order: 1; }    /* iconos antes */
}



#save_reserve_details_btn{
  background:#ef4444;
  color:#fff;
}

#save_reserve_details_btn.dirty {
    background: #ff9800;
    color: #fff;
    animation: pulseDirty 1.2s infinite;
}



.serviceDiver{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:4px 0;
}

.serviceDiverLeft{
  min-width:0;
}

.serviceDiverLeft small{
  display:block;
  opacity:.75;
  font-size:12px;
}

.removeServiceDiver{
  border:0;
  background:transparent;
  color:#fff;
  width:24px;
  height:24px;
  border-radius:6px;
  cursor:pointer;
  font-size:14px;
  line-height:1;
}

.removeServiceDiver:hover{
  background:#efefef;
}




/* botón */
.addServiceBtn{
  margin:10px 0;
  padding:6px 12px;
  font-size:13px;
  border-radius:8px;
  border:1px solid #ddd;
  background:#f3f4f6;
  cursor:pointer;
}

/* panel */
.newServicePanel{
  display:none;
  margin:10px 0 14px;
  padding:12px;
  background:#f9fafb;
  border:1px solid #e5e7eb;
  border-radius:10px;
}
.newServicePanel.open{ display:block; }

/* top inputs */
.newServiceTop{
  display:grid;
  grid-template-columns: repeat(3, 1fr); /* 33% cada uno */
  gap:10px;
  width:100%;
}

.newServiceTop input,
.newServiceTop select{
  width:100%;
  box-sizing:border-box;
}

.field{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0; /* 🔥 evita overflow grid */
}

.field label{ font-size:11px; font-weight:600; opacity:.7; }
.field input, .field select{
  height:32px;
  font-size:13px;
  padding:4px 6px;
  border-radius:6px;
  border:1px solid #ddd;
}

/* lista vertical */
.newServiceDiversVertical{
  display:flex;
  flex-direction:column;   /* 👈 vertical */
  gap:6px;
  max-height:160px;
  overflow-y:auto;
  padding:8px;
  border:1px solid #eee;
  border-radius:8px;
  background:#fff;
}

.diverCheck{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  cursor:pointer;
}

/* footer con botón abajo */
.newServiceFooter{
  display:flex;
  justify-content:flex-end;
  margin-top:12px;
}
.saveServiceBtn{
  padding:6px 14px;
  font-size:13px;
  border:none;
  border-radius:6px;
  background:#10b981;
  color:#fff;
  cursor:pointer;
}


.newServicePanel{
  display:none;
}

.newServicePanel.open{
  display:block;
}

.newServiceDiversVertical{
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:160px;
  overflow-y:auto;
  padding:8px;
  border:1px solid #eee;
  border-radius:8px;
  background:#fff;
}

.diverCheck{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  cursor:pointer;
}


.deleteServiceBtn{
  border:0;
  background:#ef4444;
  color:#ffffff;
  width:24px;
  height:24px;
  border-radius:6px;
  cursor:pointer;
  font-size:14px;
  line-height:1;
}

.deleteServiceBtn:hover{
  background:#dc2626;
  color:#efefef;
}


.reserveClientGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:12px;
}

.reserveClientGrid .field{
  display:flex;
  flex-direction:column;
}

.reserveClientGrid input{
  padding:6px 8px;
  border:1px solid #ddd;
  border-radius:6px;
}

.reserveNotes{
  width:100%;
  min-height:90px;
  border-radius:6px;
  border:1px solid #ddd;
  padding:8px;
}

.reserveTripGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:12px;
}

.reserveTripGrid .field{
  display:flex;
  flex-direction:column;
}

.reserveTripGrid input{
  padding:6px 8px;
  border:1px solid #ddd;
  border-radius:6px;
}


.medicalModal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.65);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:10000;
}



.medicalHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:15px;
}

.medicalHeader button{
  border:none;
  background:#eee;
  padding:5px 10px;
  cursor:pointer;
  border-radius:6px;
}

.medicalContent{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.medicalRow{
  display:flex;
  justify-content:space-between;
  padding:8px 10px;
  background:#f5f5f5;
  border-radius:6px;
  font-size:14px;
}

.medOk{
  color:#2e7d32;
  font-weight:bold;
}

.medWarn{
  color:#d32f2f;
  font-weight:bold;
}

.medicalBox{
  background:#fff;
  color:#000;
  padding:20px;
  border-radius:10px;
  width:600px;
  max-width:90%;
}

.diverCardGrid{
  display:flex;
  justify-content:space-between;
  gap:15px;
  padding:10px 0;
  border-top:1px solid #eee;
}

.diverInfoLeft{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:13px;
}

.diverInfoRight{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-end;
}

.diverBtn{
  padding:6px 10px;
  border-radius:6px;
  border:none;
  cursor:pointer;
  font-size:12px;
  text-decoration:none;
  text-align:center;
}

.medicalBtn{
  background:#1976d2;
  color:#fff;
}

.pdfBtn{
  background:#2e7d32;
  color:#fff;
}

.diverBtn:hover{
  opacity:.85;
}

.reserveDiver{
  background-color: #efefef;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
}

.versionBadge{
  padding:2px 6px;
  border-radius:6px;
  font-size:10px;
  margin-left:6px;
}

.versionBadge.V1{
  background:#ff9800;
  color:#000;
}

.versionBadge.V2{
  background:#2196f3;
  color:#fff;
}

.diverCardGrid{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:flex-start;
}

.diverInfoLeft{
  flex:1;
}

.diverInfoRight{
  width:140px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

.diverCertImg{
  width:120px;
  height:120px;
  object-fit:cover;
  border-radius:10px;
  border:2px solid #ddd;
  background:#f5f5f5;
}


.qrModal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10000;
}

.qrBox{
  background:#fff;
  padding:20px;
  border-radius:14px;
  width:320px;
  max-width:90%;
  text-align:center;
  color: #333333;
}

.qrHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}

.qrHeader button{
  border:none;
  background:none;
  font-size:18px;
  cursor:pointer;
}

.qrContent img{
  width:220px;
  height:220px;
}

.qrLink{
  margin-top:10px;
  font-size:12px;
  word-break:break-all;
  opacity:.7;
}


.diverCardGrid{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* ===== TOP INFO ===== */
.diverTop{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
}

.diverInfoLeft{
  flex:1;
}

.diverImageBox{
  width:120px;
}

.diverCertImg{
  width:120px;
  height:120px;
  object-fit:cover;
  border-radius:10px;
  border:2px solid #ddd;
}

/* ===== ACTIONS FOOTER ===== */
.diverActions{
  display:flex;
  flex-wrap:wrap;     /* 🔥 responsive auto wrap */
  gap:8px;
  justify-content:flex-start;
  align-items:center;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.1);
}

/* botones ocupan espacio bonito */
.diverActions .diverBtn{
  flex:0 1 auto;
}

/* MOBILE */
@media(max-width:600px){

  .diverTop{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }

  .diverImageBox{
    width:auto;
  }

}

.diverCardGrid{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.diverTop{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
}

.diverInfoLeft{ flex:1; min-width:0; }

.diverImageBox{ width:120px; flex:0 0 auto; }

.diverCertImg{
  width:120px;
  height:120px;
  object-fit:cover;
  border-radius:10px;
  border:2px solid #ddd;
  display:block;
}

.diverActions{
  display:flex;
  flex-wrap:wrap;      /* 🔥 si no caben, bajan */
  gap:8px;
  align-items:center;
  padding-top:8px;
  border-top:1px solid #eee;
}

.waIcon img {
  transition: transform .15s ease;
}

.waIcon:hover img {
  transform: scale(1.15);
}

.signedBadge{
  display:inline-block;
  margin-left:8px;
  padding:3px 8px;
  border-radius:12px;
  font-size:11px;
  font-weight:600;
}

.signedOk{
  background:#1b5e20;
  color:#a5d6a7;
  border:1px solid #2e7d32;
}

.signedNo{
  background:#b71c1c;
  color:#ffcdd2;
  border:1px solid #c62828;
}

.checkInButtons{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.checkInButtons input{
  display:none;
}

.checkBtn{
  padding:8px 14px;
  border-radius:8px;
  border:1px solid #ccc;
  cursor:pointer;
  font-size:13px;
  background:#f5f5f5;
  transition:all .15s ease;
}

/* hover */
.checkBtn:hover{
  background:#e9e9e9;
}

/* selected */
.checkInButtons input:checked + .checkBtn{
  background:#2196f3;
  border-color:#2196f3;
  color:white;
  font-weight:600;
}


.serviceCard.readOnly {
  background: #e4e4e4;
  border: 1px solid #333;
}


.reserveCreatedBar{
  width:100%;
  background:#5a5a5a;
  color:white;
  padding:8px 12px;
  font-size:13px;
  border-radius:6px;
  margin:8px 0 16px 0;
}

.reserveNotesHighlight{
  background:#fff3cd;
  border-left:4px solid #ff9800;
  padding:12px;
  margin-top:14px;
  border-radius:6px;
}

.reserveNotesHighlight strong{
  display:block;
  margin-bottom:6px;
  color:#ff6f00;
}

.notesText{
  color:#333;
  font-size:14px;
  line-height:1.4;
}


.stripeCard{
  border:1px solid #e5e5e5;
  border-radius:8px;
  padding:16px;
  background:#fff;
  margin-top:10px;
  font-family:system-ui;
}

.stripeHeader{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}

.stripeLogo{
  width:70px;
}

.stripeTitle{
  font-weight:600;
  font-size:16px;
}

.stripeId{
  font-weight:400;
  color:#777;
  margin-left:5px;
}

.stripeGrid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
  font-size:14px;
  margin-bottom:12px;
}

.stripeGrid label{
  display:block;
  font-size:11px;
  color:#777;
}

.stripeAmount{
  font-weight:600;
  color:#2e7d32;
}

.stripeActions{
  display:flex;
  gap:10px;
}

.stripeBtn{
  flex:1;
  text-align:center;
  padding:8px;
  border-radius:6px;
  background:#635bff;
  color:#fff;
  text-decoration:none;
  font-size:13px;
}

.stripeBtn.secondary{
  background:#e5e5e5;
  color:#333;
}



#accountClientePopup{
  position:fixed;
  inset:0;
  z-index:10000;
}

.accountOverlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.5);
  z-index: 10000;
}

.accountPopupBox{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:420px;
  max-width:90%;
  background:white;
  border-radius:8px;
  box-shadow:0 10px 40px rgba(0,0,0,0.25);
  font-family:Arial;
  color:#333333;
  z-index: 100000;
}

.accountHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 16px;
  border-bottom:1px solid #eee;
}

.accountHeader h3{
  margin:0;
}

.closeAccountPopup{
  border:none;
  background:none;
  font-size:18px;
  cursor:pointer;
}

.accountContent{
  padding:16px;
}

.accountTotal{
  font-size:18px;
  color:#0a7a5c;
  margin-top:10px;
}


.btnAccountCliente {
    padding: 6px 10px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 12px;
    text-decoration: none;
    text-align: center;
    background: #7d2e78;
    color: #fff;
}


.btnAddpagos {
  padding: 6px 10px;
  border: none;
  cursor: pointer;
  font-size: 18px;
  text-decoration: none;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  background: #ff9800;
  color: #fff;

  width: 100%;
}

.btnAddpagos .btnIcon {
  font-size: 16px;
}

/* estado abierto */
.btnAddpagos.open {
  background: #ff4d4f;
  color: white;
}

.btnGeneralAccount{

    padding: 6px 10px;
    border: none;
    cursor: pointer;
    font-size: 18px;
    text-decoration: none;
    text-align: center;
    background: #7d2e78;
    color: #fff;
    width: 100%;
    text-align: center;


}


.btnUpload_Docs{

    padding: 6px 10px;
    border: none;
    cursor: pointer;
    font-size: 18px;
    text-decoration: none;
    text-align: center;
    background: #2e7d73;
    color: #fff;
    width: 100%;
    text-align: center;


}


.btn_num_files{

    padding: 6px 10px;
    border: none;
    cursor: pointer;
    font-size: 18px;
    text-decoration: none;
    text-align: center;
    background: #2e7d73;
    color: #fff;
    width: 100%;
    text-align: center;

}

.bookingCard{
  background:#fff;
  border-radius:10px;
  padding:14px;
  margin-bottom:10px;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}

.bookingHeader{
  display:flex;
  justify-content:space-between;
  font-size:13px;
  margin-bottom:6px;
}

.bookingBody{
  font-size:13px;
  line-height:1.4;
}

.bookingDates{
  margin-top:6px;
  font-weight:bold;
}

.statusPayment{
  padding:4px 8px;
  border-radius:6px;
  font-size:12px;
}

.statusPayment.accredited{
  background:#d4edda;
  color:#155724;
}

.statusPayment.pending{
  background:#fff3cd;
  color:#856404;
}


.bookingActions{
  margin-top:10px;
}

.btnViewReserve{
  background:#0d6efd;
  color:white;
  border:none;
  padding:6px 12px;
  border-radius:6px;
  font-size:13px;
  cursor:pointer;
}

.btnViewReserve:hover{
  background:#0b5ed7;
}

.badgeV2{
  background:#1e90ff;
  color:#fff;
  padding:2px 6px;
  font-size:11px;
  border-radius:4px;
  margin-left:6px;
}



/* =========================
   WRAPPER GENERAL
========================= */

.bookingsListWrapper{
  display:flex;
  flex-direction:column;
  height:calc(100vh - 120px);
  width:100%;
}



.clientListWrapper{
  display:flex;
  flex-direction:column;
  height:calc(100vh - 120px);
  width:100%;
}



/* =========================
   HEADER
========================= */

.bookingsListHeader{
  display:flex;
  gap:10px;
  padding:10px;
  border-bottom:1px solid #ddd;
  background:transparent;
}

.bookingsListBtn{
  padding:6px 12px;
  border-radius:6px;
  border:1px solid #ccc;
  background:white;
  cursor:pointer;
  font-size:13px;
}

.bookingsListBtn:hover{
  background:#f0f0f0;
}


/* =========================
   BODY LAYOUT
========================= */

.bookingsListBody{
  display:flex;
  flex:1;
  min-height:0;
}


.clientListBody{
  display:flex;
  flex:1;
  min-height:0;
}


/* =========================
   LEFT PANEL
========================= */

.bookingsListLeft{
  width:40%;
  border-right:1px solid #e5e5e5;
  overflow-y:auto;
  padding:10px;
  background:transparent;
}


.clientListLeft{
  width:40%;
  border-right:1px solid #e5e5e5;
  overflow-y:auto;
  padding:10px;
  background:transparent;
}



/* =========================
   RIGHT PANEL (SCROLL)
========================= */

.bookingsListRight{
  width:60%;
  overflow-y:auto;
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:12px;
  height:100%;
}


.clientListRight{
  width:60%;
  overflow-y:auto;
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:12px;
  height:100%;
}


/* =========================
   BOOKING CARD
========================= */

.bookingCard{
  background:white;
  border-radius:8px;
  border:1px solid #e2e2e2;
  padding:14px;
  box-shadow:0 2px 4px rgba(0,0,0,0.05);
}

.bookingHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:14px;
  font-weight:600;
  margin-bottom:8px;
}

.bookingBody{
  font-size:13px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.bookingDates{
  margin-top:6px;
  font-weight:600;
}

.bookingStatus{
  margin-top:6px;
}


/* =========================
   STATUS
========================= */

.statusPayment{
  padding:3px 8px;
  border-radius:4px;
  font-size:12px;
  font-weight:600;
}

.statusPayment.accredited{
  background:#e6f6ea;
  color:#1a7f37;
}

.statusPayment.pending{
  background:#fff4e5;
  color:#b54708;
}

.statusPayment.canceled{
  background:#fde2e2;
  color:#b91c1c;
}


/* =========================
   ACTION BUTTON
========================= */

.bookingActions{
  margin-top:10px;
}

.btnViewReserve{
  padding:6px 12px;
  border:none;
  border-radius:6px;
  background:#0d6efd;
  color:white;
  font-size:13px;
  cursor:pointer;
}

.btnViewReserve:hover{
  background:#0b5ed7;
}


/* =========================
   BADGE VERSION
========================= */

.badgeV2{
  background:#0d6efd;
  color:white;
  font-size:11px;
  padding:2px 6px;
  border-radius:4px;
}


/* =========================
   SCROLL LOADER
========================= */

.scrollLoader{
  text-align:center;
  padding:15px;
  color:#666;
  font-size:13px;
}


.stripeInfo{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:6px;
  font-size:12px;
}

.stripeMini{
  width:38px;
  height:auto;
  border-radius:4px;
}

.stripeKey{
  font-family:monospace;
  background:#f3f3f3;
  padding:2px 6px;
  border-radius:4px;
  font-size:11px;
}


.bookingSearchBox{
  display:flex;
  gap:6px;
  margin-bottom:12px;
}

.bookingSearchInput{
  flex:1;
  padding:6px 8px;
  border-radius:6px;
  border:1px solid #ccc;
  font-size:13px;
}

.bookingSearchBtn{
  padding:6px 12px;
  border:none;
  background:#0a84ff;
  color:white;
  border-radius:6px;
  cursor:pointer;
  font-size:13px;
}

.bookingSearchBtn:hover{
  background:#006edc;
}

.bookingSearchEmpty{
  padding:10px;
  font-size:13px;
  color:#666;
}






#Results{
  margin-top:10px;
}

/* tarjeta resultado */
.searchResultItem{

  background:white;
  border:1px solid #e4e7ec;
  border-radius:8px;

  padding:10px 12px;

  margin-bottom:8px;

  cursor:pointer;

  transition:all .15s ease;
}

.searchResultItem:hover{

  background:#f7f9fc;
  border-color:#cdd6e1;

}

/* fila superior */
.searchResultTop{

  display:flex;
  justify-content:space-between;
  align-items:center;

  margin-bottom:4px;

}

/* id reserva */
.searchResultId{

  font-weight:600;
  font-size:14px;
  color:#1f2937;

}

/* badge version */
.searchResultVersion{

  font-size:11px;
  font-weight:600;

  padding:2px 6px;
  border-radius:4px;

  background:#eef2ff;
  color:#3730a3;

}

/* V2 color */
.searchResultVersion.V2{

  background:#e0f2fe;
  color:#0369a1;

}

/* cuerpo */
.searchResultBody{

  display:flex;
  flex-direction:column;

}

/* nombre */
.searchResultName{

  font-size:13px;
  font-weight:500;
  color:#111827;

}

/* email */
.searchResultEmail{

  font-size:12px;
  color:#6b7280;

}

/* no results */
.searchEmpty{

  padding:12px;
  font-size:13px;
  color:#6b7280;

  border:1px dashed #d1d5db;
  border-radius:6px;

  background:#fafafa;

}

.searchLoading{

  position:absolute;

  right:10px;
  top:10px;

  font-size:11px;
  color:#3b82f6;

  font-weight:600;

}

.searchResultItem{
  position:relative;
}

.searchResultItem.loading{
  background:#eef6ff;
  border-color:#60a5fa;
}

.searchResultItem{
  position:relative;
  background:#fff;
  border:1px solid #e4e7ec;
  border-radius:10px;
  padding:10px 12px;
  margin-bottom:8px;
  cursor:pointer;
  transition:all .15s ease;
}

.searchResultItem:hover{
  background:#f7f9fc;
  border-color:#cdd6e1;
}

.searchResultItem.loading{
  background:#eef6ff;
  border-color:#60a5fa;
}

.searchResultTop{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:6px;
}

.searchOpenBtn{
  border:1px solid #d0d5dd;
  background:#fff;
  color:#111827;
  border-radius:8px;
  padding:6px 10px;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
}

.searchOpenBtn:hover{
  background:#f3f4f6;
}


.clientCard{
  background:#ffffff;
  border-radius:16px;
  padding:24px;
  box-shadow:0 20px 50px rgba(0,0,0,.08);
  font-family:Inter,system-ui;
  color: #333333;
}

.clientHeader{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:22px;
}

.clientHeader h2{
  margin:0;
  font-size:22px;
  font-weight:600;
}

.clientSub{
  font-size:13px;
  color:#6b7280;
  margin-top:4px;
}

.badge{
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
}

.badge.V1{ background:#e0f2fe; color:#0369a1; }
.badge.V2{ background:#dcfce7; color:#166534; }

.clientGrid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px 22px;
}

.field{
  display:flex;
  flex-direction:column;
}

.field.full{
  grid-column:1 / -1;
}

.field label{
  font-size:12px;
  font-weight:600;
  color:#6b7280;
  margin-bottom:6px;
}

.field input,
.field select,
.field textarea{
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:5px;
  font-size:14px;
  background:#f9fafb;
  transition:.15s;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:#3b82f6;
  background:#fff;
}

.field input:disabled{
  background:#f3f4f6;
  color:#9ca3af;
}

.clientActions{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  margin-top:26px;
}

.btnPrimary{
  background:#2563eb;
  color: #333333;
  border:none;
  padding:10px 18px;
  border-radius:10px;
  font-weight:600;
  cursor:pointer;
}

.btnGhost{
  background:#f3f4f6;
  border:none;
  padding:10px 18px;
  border-radius:10px;
  font-weight:600;
  cursor:pointer;
}

.linkBtn{
  font-size:13px;
  color:#2563eb;
  text-decoration:none;
  font-weight:600;
}

.muted{
  color:#9ca3af;
  font-size:13px;
}



.equipGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px;
  margin-top:6px;
}

.equipItem{
  display:flex;
  gap:10px;
  padding:12px;
  border-radius:12px;
  background:#f3f4f6;
  border:1px solid #e5e7eb;
}

.equipItem.on{
  background:#ecfdf5;
  border-color:#a7f3d0;
}

.equipIcon{
  font-size:18px;
  line-height:1;
}

.equipInfo{
  display:flex;
  flex-direction:column;
}

.equipLabel{
  font-weight:600;
  font-size:13px;
}

.equipMeta{
  font-size:12px;
  color:#6b7280;
}

.equipEmpty{
  font-size:13px;
  color:#9ca3af;
  padding:10px 0;
}

.equipError{
  font-size:13px;
  color:#dc2626;
  padding:10px 0;
}


.medPanel{
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:18px;
}

.medHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px;
}

.medHeader h3{
  margin:0;
  font-size:16px;
  font-weight:600;
}

.medLegend{
  font-size:12px;
  color:#6b7280;
  display:flex;
  gap:12px;
  align-items:center;
}

.okDot,.riskDot{
  width:8px;
  height:8px;
  border-radius:50%;
  display:inline-block;
  margin-right:4px;
}

.okDot{ background:#16a34a; }
.riskDot{ background:#dc2626; }

.medBadges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:16px;
}

.medBadge{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
}

.medBadge.ok{
  background:#ecfdf5;
  color:#166534;
}

.medBadge.risk{
  background:#fef2f2;
  color:#991b1b;
}

.medDot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
}

.medSections{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px;
}

.medSection{
  background:#f9fafb;
  border-radius:12px;
  padding:12px;
  border:1px solid #e5e7eb;
}

.medSection h4{
  margin:0 0 8px 0;
  font-size:13px;
  font-weight:600;
}

.medChecklist{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:6px 10px;
}

.medCheck{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:#6b7280;
}

.medCheck.on{
  color:#111827;
  font-weight:600;
}

.medEmpty{ color:#9ca3af; font-size:13px; padding:10px 0; }
.medError{ color:#dc2626; font-size:13px; padding:10px 0; }


.certWrap{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.certImg{
  width:100%;
  max-width:260px;
  border-radius:12px;
  border:1px solid #e5e7eb;
  box-shadow:0 10px 25px rgba(0,0,0,.08);
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}

.certImg:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 35px rgba(0,0,0,.12);
}

.certHint{
  font-size:12px;
  color:#6b7280;
}

.certEmpty{
  font-size:13px;
  color:#9ca3af;
  padding:10px 0;
}

.diveStatsCard{
  margin-top:28px;
  padding:22px;
  border-radius:16px;
  background:linear-gradient(135deg,#0ea5e9,#2563eb);
  color:white;
  display:flex;
  flex-direction:column;
  align-items:center;
  box-shadow:0 18px 40px rgba(0,0,0,.12);
}

.diveStatsNumber{
  font-size:42px;
  font-weight:700;
  line-height:1;
}

.diveStatsLabel{
  font-size:13px;
  opacity:.9;
  margin-top:6px;
  letter-spacing:.4px;
}





.reportsWrapper{
  padding:24px;
}

.reportsFilters{
  display:flex;
  gap:16px;
  align-items:end;
  margin-bottom:24px;
}

.filterGroup{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.inputDate{
  padding:10px;
  border-radius:8px;
  border:1px solid #ddd;
}

.btnPrimary{
  background:var(--accent);
  color:#fff;
  border:0;
  padding:10px 16px;
  border-radius:8px;
  display:flex;
  gap:8px;
  align-items:center;
}

.cardsGrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:16px;
}

.reportCard{
  background:#fff;
  border-radius:12px;
  padding:16px;
  box-shadow:0 10px 25px rgba(0,0,0,.06);
}



.reportsLayout{
  display:flex;
  gap:20px;
  align-items:flex-start; /* antes: stretch */
}

.reportsList{
  flex:0 0 30%;
  max-width:30%;
  overflow:auto;
  padding:10px;
  border-right:1px solid #eee;
  background-color:#e0dbdb4f;
  border-radius:10px;
}

.reportsDetail{
  flex:1;
  min-width:0;
  padding-left:10px;
  color:#333333;

  position:sticky;
  top:96px; /* clave para no chocar con la topbar */
  align-self:flex-start;

  max-height:calc(100dvh - 110px);
  overflow:auto;
}

.detailPlaceholder{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#888;
  font-size:14px;
  border:2px dashed #e5e5e5;
  border-radius:12px;
  padding:40px;
}

/* TABLET */
@media (max-width: 1100px){
  .reportsList{ flex:0 0 40%; max-width:40%; }
}

/* MOBILE */
@media (max-width: 768px){
  .reportsLayout{
    flex-direction:column;
  }

  .reportsList{
    max-width:100%;
    width:100%;
    border-right:0;
    border-bottom:1px solid #eee;
    padding-right:0;
    padding-bottom:12px;
  }

  .reportsDetail{
    position:static;
    top:auto;
    max-height:none;
    overflow:visible;
    width:100%;
    padding-left:0;
    padding-top:12px;
  }
}


.detailCard{
  background:#fff;
  border-radius:14px;
  padding:20px;
  box-shadow:0 15px 35px rgba(0,0,0,.06);
}

.detailStat{
  font-size:13px;
  color:#666;
  margin-bottom:16px;
}

.detailList{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.detailRow{
  display:grid;
  grid-template-columns:80px 1fr 1fr 80px;
  gap:10px;
  padding:8px 10px;
  background:#f8f9fb;
  border-radius:8px;
  font-size:12px;
}


/* CONTENEDOR GENERAL */
.reportsLayout{
  display:flex;
  gap:20px;
  align-items:flex-start; /* importante */
}

/* LISTA IZQUIERDA */
.reportsList{
  flex:0 0 30%;
  max-width:30%;
  overflow:auto;
  padding-right:10px;
  border-right:1px solid #eee;
}

/* PANEL DERECHO */
.reportsDetail{
  flex:1;
  min-width:0;

  position: sticky;   /* 🔥 magia */
  top: 130px;          /* distancia desde top */
  align-self: flex-start;
}

@media (max-width: 768px){
  .reportsLayout{
    flex-direction:column;
  }

  .reportsDetail{
    position: static; /* vuelve normal */
    max-height:none;
  }
}

.detailRow{
  display:grid;
  grid-template-columns:70px 110px 1fr 120px 1fr;
  gap:10px;
  padding:8px 10px;
  background:#f8f9fb;
  border-radius:8px;
  font-size:12px;
}

.btnLinkDive{
  background: #efefef;
    border: 0;
    color: #d12;
    font-weight: 600;
    cursor: pointer;
    padding: 4px;
    border-radius: 5px;
    border: 1px solid #dfdfdf;
}

.btnLinkDive:hover{
  text-decoration:underline;
}


.calendarModule{
  display:flex;
  flex-direction:column;
  gap:18px;
  color:#1f2937;
}

.calendarHeaderCard{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  padding:18px;
  border:1px solid #e5e7eb;
  border-radius:18px;
  background:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.04);
}

.calendarTitle{
  margin:0;
  font-size:1.35rem;
  font-weight:700;
}

.calendarSubtitle{
  margin:6px 0 0 0;
  color:#6b7280;
  font-size:.95rem;
}

.calendarLegend{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:280px;
}

.legendTitle{
  font-size:.82rem;
  font-weight:700;
  color:#6b7280;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.legendRow{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.legendBadge{
  padding:7px 12px;
  border-radius:999px;
  font-size:.82rem;
  font-weight:700;
  border:1px solid rgba(0,0,0,.06);
}

.legendBadge.low{ background:#dff5df; }
.legendBadge.medium{ background:#d9f0f7; }
.legendBadge.stable{ background:#fde5d8; }
.legendBadge.saturated{ background:#f9d4d4; }

.calendarToolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

.calendarSelectors,
.calendarNav{
  display:flex;
  gap:10px;
  align-items:center;
}

.calendarSelect{
  min-width:140px;
  height:42px;
  border:1px solid #d1d5db;
  border-radius:12px;
  background:#fff;
  padding:0 12px;
  font-size:.95rem;
  outline:none;
}

.calendarMonthTitle{
  font-size:1.05rem;
  font-weight:800;
  margin-bottom:12px;
}

.calendarContent{
  position:relative;
  border:1px solid #e5e7eb;
  border-radius:18px;
  background:#fff;
  padding:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.04);
}

.calendarTableWrap{
  width:100%;
  overflow-x:auto;
}

.calendarTable{
  width:100%;
  border-collapse:separate;
  border-spacing:8px;
  table-layout:fixed;
}

.calendarTable th{
  text-align:left;
  font-size:.82rem;
  color:#6b7280;
  padding:8px 6px;
  font-weight:700;
}

.calendarCell{
  vertical-align:top;
  min-height:130px;
  height:130px;
  border:1px solid #eef0f3;
  border-radius:16px;
  padding:10px;
  background:#fff;
  transition:.2s ease;
}

.calendarCell.is-clickable{
  cursor:pointer;
}

.calendarCell.is-clickable:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(0,0,0,.06);
}

.calendarCell.is-empty{
  background:#fafafa;
  border-style:dashed;
}

.calendarCell.is-today{
  outline:2px solid #1fa9c5;
}

.calendarDayNumber{
  font-size:1.1rem;
  font-weight:800;
  margin-bottom:8px;
}

.calendarDaySummary{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.calendarTotal{
  font-size:.82rem;
  font-weight:800;
  color:#111827;
  margin-bottom:4px;
}

.calendarServiceLine{
  font-size:.74rem;
  line-height:1.2;
  color:#374151;
  word-break:break-word;
}

.calendarEmptyState{
  font-size:.78rem;
  color:#9ca3af;
}

.load-none{ background:#fff; }
.load-low{ background:#4caf50ad; }
.load-medium{ background:#1fa9c533; }
.load-stable{ background:#f99c6840; }
.load-saturated{ background:#f9686840; }

@media (max-width: 768px){
  .calendarHeaderCard{
    flex-direction:column;
  }

  .calendarLegend{
    min-width:unset;
    width:100%;
  }

  .calendarCell{
    height:120px;
    min-height:120px;
  }

  .calendarServiceLine{
    font-size:.7rem;
  }
}





.appLoader{
  position:fixed;
  inset:0;                 /* full width & height */
  width:100vw;
  height:100vh;

  background:rgba(68,193,239,0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  display:flex;
  flex-direction:column;
  align-items:center;      /* centrado horizontal */
  justify-content:center;  /* centrado vertical */

  z-index:999999;
  color:#fff;
  font-family:sans-serif;
}

.loaderLogo{
  width:120px;
  height:120px;
  padding:18px;
  border-radius:28px;
  background: rgba(255,255,255,.14);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  box-shadow:
    0 18px 50px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.22);

  margin-bottom:30px;

  animation: logoFloat 2.6s ease-in-out infinite;
}

@keyframes logoFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}

.spinner{
  width:42px;
  height:42px;
  border:4px solid rgba(255,255,255,.2);
  border-top-color:#22d3ee;
  border-radius:50%;
  animation: spin 1s linear infinite;
  margin-bottom:16px;
  will-change: transform;
}

@keyframes spin{
  to{ transform:rotate(360deg); }
}

.appLoaded .appLoader{
  opacity:0;
  pointer-events:none;
  transition: opacity .35s ease;
}


a.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
}


/* =========================
   LAYOUT 30 / 70
========================= */
.clientListBody{
  display:flex;
  gap:24px;
}

.clientListLeft{
  width:30%;
  min-width:320px;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.clientListRight{
  width:70%;
  background:transparent;
  border-radius:14px;
  padding:20px;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}


/* =========================
   SEARCH ENGINE
========================= */
.searchEngine{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.searchBlock{
  background:#fff;
  border-radius:14px;
  padding:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  border:1px solid #eef2f7;
}

.searchBlock h4{
  margin:0 0 12px;
  font-size:14px;
  color:#0f172a;
  letter-spacing:.3px;
}

.field{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:12px;
}

.field label{
  font-size:12px;
  color:#64748b;
}

.field input,
.field select{
  padding:9px 10px;
  border-radius:8px;
  border:1px solid #dbe2ea;
  background:#f8fafc;
  font-size:13px;
}

.dateRow{
  display:flex;
  gap:10px;
}

.btnPrimary{
  width:100%;
  padding:10px;
  border:none;
  border-radius:10px;
  background:linear-gradient(135deg,#0ea5e9,#0284c7);
  color:#fff;
  font-weight:600;
  cursor:pointer;
  margin-top:6px;
}

.btnPrimary:hover{
  opacity:.9;
}




.reportBox{
  background:#fff;
  border-radius:14px;
  padding:20px;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}

.reportHeader h3{
  margin:0;
  font-size:18px;
}

.reportHeader .meta{
  color:#64748b;
  font-size:13px;
  margin-top:4px;
}

.tableWrapper{
  overflow:auto;
  margin-top:16px;
}

.reportTable{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}

.reportTable th{
  background:#0f172a;
  color:#fff;
  padding:10px;
  text-align:left;
}

.reportTable td{
  padding:9px 10px;
  border-bottom:1px solid #eef2f7;
}

.reportTable tr:hover{
  background:#f8fafc;
}

.reportActions{
  margin-top:16px;
  display:flex;
  justify-content:flex-end;
}

.panelLoading,
.panelError,
.emptyState{
  padding:40px;
  text-align:center;
  color:#64748b;
}

.excelTable{
  width:100%;
  border-collapse:collapse;
  background:#ffffff;
  font-size:14px;
  color:#111111; /* texto oscuro */
}

.excelTable th{
  background:#1e293b;
  color:#ffffff;
  padding:10px;
  border:1px solid #d1d5db;
  text-align:left;
  font-weight:600;
}

.excelTable td{
  padding:9px 10px;
  border:1px solid #e5e7eb;
}

.excelTable tbody tr:nth-child(even){
  background:#f8fafc;
}

.excelTable tbody tr:hover{
  background:#eef2f7;
}

.excelTable tfoot td{
  padding:10px;
  background:#f1f5f9;
  font-size:12px;
  color:#334155;
}

.reportHeader h2{
  margin:0 0 6px 0;
}

.metaLine{
  font-size:13px;
  color:#0f172a;
}

.badge{
  padding:4px 8px;
  border-radius:6px;
  font-size:12px;
  font-weight:600;
}

.badge.v1{
  background:#e0f2fe;
  color:#0369a1;
}

.badge.v2{
  background:#ede9fe;
  color:#5b21b6;
}

.btnMini{
  padding:4px 10px;
  border-radius:6px;
  border:1px solid #cbd5e1;
  background:#fff;
  cursor:pointer;
}


.clientListBody{
  display:flex;
  flex-direction:row-reverse; /* 🔥 invierte paneles */
  flex:1;
  min-height:0;
}

.openPlanningBtn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:50%;
  height:32px;
  border-radius:8px;
  background:#cdd3d8;
  color:#333;
  text-decoration:none;
  font-size:12px;
  transition:.15s;
  margin-top:auto;   /* 🔥 lo manda al fondo */
  align-self:auto; /* opcional: derecha */
}

.openPlanningBtn:hover{
  background:#efefef;
  transform:translateY(-1px);
}


/* 🚫 NO ACREDITADO = NO BUCEA */
.planningCard.unpaid{
  background: #ffe9e9;
  border: 2px solid #ff2d2d;
  color: #333333;
}

.planningCard.unpaid .pcName{
  color:#b00000;
  font-weight:800;
}

.planningCard.unpaid .pcIcon{
  filter: grayscale(1);
}


#saveDiveBtn.saving{
  background:#f59e0b;
  color:#fff;
  cursor:wait;
}

#saveDiveBtn.saved{
  background:#10b981;
  color:#fff;
}

#saveDiveBtn.error{
  background:#ef4444;
  color:#fff;
}


.hidden-topbar {
  display: none !important;
}


/* =========================
   WRAPPER
========================= */
.sitesWrapper {
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}

/* =========================
   COLUMNA POR GUIA
========================= */
.guideColumn {
  flex:1;
  min-width:280px;
  background:rgba(255,255,255,0.03);
  border-radius:16px;
  padding:12px;
}

/* =========================
   TITULO
========================= */
.guideTitle {
  font-weight:bold;
  margin-bottom:10px;
  color:#00e5ff;
}

/* =========================
   ROW DESKTOP
========================= */
.siteRow {
  display:grid;
  grid-template-columns:
    1fr   /* guide */
    50px  /* dive */
    1fr   /* site */
    60px  /* time */
    60px  /* depth */
    40px; /* delete */

  gap:8px;
  align-items:center;
  margin-bottom:8px;

  background:rgba(255,255,255,0.05);
  padding:8px;
  border-radius:10px;
}

/* =========================
   INPUTS
========================= */
.siteField {
  width:100%;
  padding:6px;
  border-radius:8px;
  border:none;
  background:rgba(255,255,255,0.1);
  color:white;
}

/* =========================
   DELETE BTN
========================= */
.removeSite {
  background:#ff4d4d;
  border:none;
  border-radius:8px;
  color:white;
  cursor:pointer;
}

/* =========================
   📱 MOBILE MODE
========================= */
@media (max-width: 768px) {

  .sitesWrapper {
    flex-direction:column;
  }

  .siteRow {
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:12px;
  }

  /* cada campo ocupa toda la fila */
  .siteRow select,
  .siteRow input {
    width:100%;
  }

  /* botón abajo alineado */
  .removeSite {
    width:100%;
    padding:8px;
    margin-top:5px;
  }

}


.fieldBlock {
  display: flex;
    flex-direction: column;
    font-size: 12px;
    width: 100%;
    text-align: center;
    background-color: #2a3447;
    border-radius: 10px;
}

.fieldBlock label {
  opacity:0.6;
  margin-bottom:2px;
}


/* =========================
   FONDO GENERAL
========================= */
#diveSitesEditor {
  background: linear-gradient(180deg, #0a1224, #050a18);
  padding: 12px;
  border-radius: 16px;
}

/* =========================
   WRAPPER
========================= */
.sitesWrapper {
  display:flex;
  gap:16px;
  flex-direction: column; /* ✅ CLAVE */
}

/* =========================
   COLUMNAS
========================= */
.guideColumn {
  flex:1;
  width:100%;        /* ✅ ocupa todo */
  max-width:100%;    /* ✅ no se divide */

  background: rgba(255,255,255,0.04);
  border:1px solid rgba(0,200,255,0.15);
  border-radius:14px;
  padding:12px;

  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}

/* =========================
   TITULO
========================= */
.guideTitle {
  font-weight:bold;
  margin-bottom:10px;
  color:#00e5ff;
  text-shadow: 0 0 10px rgba(0,200,255,0.5);
}

/* =========================
   ROW
========================= */
.siteRow {
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap:6px;
  align-items:center;

  margin-bottom:8px;

  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  padding:8px;
  border-radius:10px;

  transition:0.2s;
}

.siteRow:hover {
  background: rgba(0,200,255,0.08);
}

/* =========================
   INPUTS / SELECT
========================= */
.siteField {
  width:100%;
  padding:6px;
  border-radius:8px;
  border:none;
  outline:none;

  background: rgba(0,0,0,0.4);
  color:#fff;

  font-size:13px;
}

/* =========================
   LABELS
========================= */
.fieldBlock label {
  font-size:10px;
  color:#aaa;
  margin-bottom:2px;
}

/* =========================
   DELETE BTN
========================= */
.removeSite {
  background:#ff4d4d;
  border:none;
  border-radius:8px;
  color:white;
  cursor:pointer;
  font-size:12px;
  height:30px;

  transition:0.2s;
}

.removeSite:hover {
  background:#ff2a2a;
}

/* =========================
   📱 MOBILE
========================= */
@media (max-width:768px){

  .siteRow{
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:12px;
  }

  .removeSite{
    width:100%;
    margin-top:6px;
  }
}

.siteRow {
  backdrop-filter: blur(6px);
}




/* 🔴 dive cancelado */
.boatHeader.cancelled {
  background: #c62828;
}

.dateInput {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border, #ccc);
  color: #414141
  font-size: 14px;
}

.btnPrimary {
  padding: 8px 14px;
  border-radius: 8px;
  border: none;
  background: var(--accent, #1976d2);
  color: #fff;
  cursor: pointer;
  font-weight: 600;
}

.btnPrimary:hover {
  opacity: 0.9;
}

.divesList{
  margin-top:20px;
}

.diveCard{
  padding:10px;
  border:1px solid #eee;
  border-radius:10px;
  margin-bottom:10px;
  background:#fafafa;
}



        .eqTable{
  display:flex;
  flex-direction:column;
  margin-top:8px;
  border:1px solid #e5e5e5;
  border-radius:8px;
  overflow:hidden;
  font-size:13px;
}

.eqHeader,
.eqRow{
  display:grid;
  grid-template-columns: 1fr auto;
  padding:6px 8px;
  align-items:center;
}

.eqHeader{
  background:#fff3f3;
  font-weight:600;
  font-size:12px;
  text-transform:uppercase;
}

.eqRow{
  border-top:1px solid #eee;
  background:rgba(255,0,0,0.05);
}

.eqName{
  font-weight:500;
}

.eqSize{
  font-size:12px;
  opacity:0.8;
}

.eqAllGood{
  margin-top:6px;
  font-size:13px;
  color:#2e7d32;
  font-weight:500;
}

/* 📱 MOBILE */
@media(max-width:600px){

  .eqHeader{
    display:none;
  }

  .eqRow{
    grid-template-columns: 1fr;
    gap:2px;
  }

}




.payment-container {
  width: 100%;
  margin: 10px auto;
  display: none;
  overflow: hidden;
  padding-top: 20px;
}


.uploads-container {
    display: inline-flex;
    flex-wrap: wrap-reverse;
    margin-top: 8px;

.fileBtn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: none;
  background: #f1f1f1;
  cursor: pointer;
  font-size: 16px;
  transition: 0.2s;
}

.fileBtn:hover {
  background: #ddd;
  transform: scale(1.05);
}





.payment-box {
  border: 1px solid #ccc;
  padding: 15px;
  border-radius: 10px;
  background: #f9f9f9;
  width: 100%;
}

@media (max-width: 600px) {
  .payment-grid {
    flex-direction: column;
  }

  .payment-left,
  .payment-right {
    width: 100%;
  }
}

.payment-box h3 {
  margin-bottom: 15px;
}

.payment-input,
.payment-select {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.payment-actions {
  display: flex;
  gap: 10px;
}

.payment-btn {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.payment-btn.save {
  background: #2c7be5;
  color: white;
}

.payment-btn.cancel {
  background: #ccc;
}

.payment-grid {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.payment-left,
.payment-right {
  flex: 1;
  min-width: 300px;
}

.payment-right {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 15px;
  max-height: 300px;
  overflow-y: auto;
}

.payment-item {
  border-bottom: 1px solid #eee;
  padding: 8px 0;
  font-size: 14px;
}

.payment-item:last-child {
  border-bottom: none;
}

.payment-empty {
  color: #888;
  font-style: italic;
}




.serviceActions{
  display:flex;
  gap:10px;
  margin-bottom:10px;
  flex-wrap:wrap;
}

.inlineDiverForm{
  background:#f5f5f5;
  padding:12px;
  border-radius:10px;
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.inlineActions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
}


.display_new_diver{

  background-color: #efefef;
    padding: 10px;
    border-radius: 20px;
    margin-bottom: 20px;
}