/* panel_mobile.css — v9.3 FINAL (móvil & tablets) */
@media (max-width:1024px){

  :root{ --pad:12px; --gap:12px; }

  /* === RESET GENERAL === */
  html, body{ overflow-x:hidden !important; }
  body{
    display:block !important;
    height:auto !important;
    padding:var(--pad) !important;
    margin:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
  .layout, .page, .wrapper, .container, .panel, .section, .content-wrap{
    max-width:100% !important;
    padding:0 var(--pad) !important;
    box-sizing:border-box !important;
  }

  /* === ROMPER EL LAYOUT A 1 COLUMNA (clave para “Agregar embarcación”) === */
  .layout{                 /* algunos layouts vienen con display:flex sin wrap */
    display:block !important;
    flex-wrap:wrap !important;
  }

  /* === SIDEBAR ARRIBA / CONTENIDO DEBAJO === */
  nav.sidebar, .sidebar, .left-sidebar, #sidebar, [class*="sidebar"]{
    position:static !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 0 var(--gap) 0 !important;
    border-radius:12px !important;
  }
  main, main.content, .content, .panel-content, .content-area, .main, .main-content, #content, #main{
    width:100% !important;
    max-width:100% !important;
    max-height:none !important;
    overflow:visible !important;
    box-sizing:border-box !important;
    padding:16px !important;
    margin:0 !important;
  }
  .content > *, .panel-content > *{ max-width:100% !important; }

  /* === TITULARES === */
  .panel-content h1, .content h1, h1.title{
    font-size:1.4rem !important;
    line-height:1.25 !important;
    margin:6px 0 14px !important;
    word-break:break-word !important;
  }

  /* === TABLAS (Mis embarcaciones) → tarjetas === */
  .panel-content table, .content table{
    display:block !important;
    width:100% !important;
    border-collapse:collapse !important;
  }
  .panel-content thead, .content thead{ display:none !important; }
  .panel-content tr, .content tr{
    display:block !important;
    margin-bottom:12px;
    padding:12px;
    border:1px solid #e0e0f0;
    border-radius:10px;
    background:#fff;
  }
  .panel-content td, .content td{
    display:flex !important;
    justify-content:space-between;
    padding:6px 0;
    font-size:14px !important;
  }
  .panel-content td::before, .content td::before{
    content:attr(data-label);
    font-weight:600;
    color:#333;
  }
  .panel-content td:first-child img, .content td:first-child img{
    max-width:64px !important; max-height:64px !important;
    border-radius:8px !important; object-fit:cover !important;
  }

  /* === CALENDARIO (panel armador) === */
  .calendar, .calendario, .cal-grid{ 
    max-width:100% !important; 
    gap:6px !important; 
  }
  .calendar .day, .calendar .cell, .calendar .date, .calendar .day-cell{
    min-height:40px !important;
    padding:6px 3px !important;
    font-size:.8rem !important;
  }
  .calendar h1, .calendar h2, .calendar h3{
    font-size:1rem !important; 
    margin:6px 0 !important;
  }

  /* === CALENDARIO DE LA FICHA (cliente) === */
  .calendario-mes, .calendario-contenedor, .calendar-widget{
    max-width:100% !important; width:100% !important; padding:8px !important;
    box-sizing:border-box !important;
  }
  .calendario-mes h3, .calendar-widget h3{
    font-size:1rem !important; margin:6px 0 !important; text-align:center !important;
  }
  .calendario-tabla, .calendar-table{
    width:100% !important; max-width:100% !important;
    table-layout:fixed !important;
    font-size:.8rem !important;
    border-collapse:separate !important;
    border-spacing:6px !important;
  }
  .calendario-tabla th, .calendario-tabla td,
  .calendar-table th, .calendar-table td{
    height:40px !important;
    padding:4px 2px !important;
    text-align:center !important;
    word-break:break-word !important;
  }

  /* === FORMULARIOS GRANDES === */
  form .field, form .form-group, .input-group{
    width:100% !important; max-width:100% !important;
  }
  input, select, textarea{
    width:100% !important; max-width:100% !important; 
    font-size:15px !important;
    padding:10px !important;
    box-sizing:border-box !important;
  }

  /* === TARJETAS DE OPCIÓN (Agregar embarcación) === */
  /* Grid responsive: 2 columnas cuando quepa, 1 si no */
  #tipoBarcoGroup{
    display:grid !important;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    gap:12px !important;
  }
  #tipoBarcoGroup .btn-option{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:12px !important;
    min-height:76px !important;
    border:1px solid #e5e6f5 !important;
    border-radius:12px !important;
    background:#fff !important;
    text-align:center !important;
    font-weight:600 !important;
  }
  #tipoBarcoGroup .btn-option i{
    margin-right:8px !important;
    font-size:18px !important;
  }

  /* === BOTONES EN FICHA (CTA) === */
  .acciones-reserva, .cta-buttons, .cta-flotante, .sticky-cta{
    position:fixed !important;
    left:var(--pad) !important; 
    right:var(--pad) !important; 
    bottom:var(--pad) !important;
    display:flex !important;
    flex-direction:row !important;
    justify-content:space-between !important;
    gap:8px !important;
    width:calc(100% - (var(--pad) * 2)) !important;
    z-index:999 !important;
  }
  .acciones-reserva button, .acciones-reserva a,
  .cta-buttons a, .cta-buttons button,
  .cta-flotante a, .cta-flotante button{
    flex:1 !important; 
    padding:14px !important;
    font-size:1rem !important;
    border-radius:10px !important;
    text-align:center !important; 
    white-space:nowrap !important;
  }

  /* === BOTONES de AGREGAR EMBARCACIÓN === */
  #btnGuardarDatos, #btnSubirImagenes, #btnContinuarPrecio{
    display:block !important;
    width:100% !important;
    padding:14px !important;
    font-size:1rem !important;
    margin-top:12px !important;
    border-radius:10px !important;
    text-align:center !important;
  }

  /* Hueco para la barra CTA de ficha */
  .content, .panel-content, .main, .main-content{
    padding-bottom:86px !important;
  }
}
/* === PANEL ADMIN - OPTIMIZACIÓN ADICIONAL (tablas y layout) === */
@media (max-width: 1024px) {

  /* Reajuste de columnas y tarjetas */
  .grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  /* === Secciones grandes (tarjetas verticales) === */
  .tbl-resv, .tabla-admin, #threads, #tablaContactos {
    display: block !important;
    width: 100% !important;
    overflow-x: visible !important;
  }

  .tbl-resv thead,
  .tabla-admin thead,
  #tablaContactos thead {
    display: none !important;
  }

  /* === Tarjetas (Reservas, Pagos, Contactos) === */
  .tbl-resv tr,
  .tabla-admin tr,
  #threads tr,
  #tablaContactos tr {
    display: block !important;
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    margin: 0 auto 18px auto !important;
    padding: 18px 20px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    width: 95% !important;
    max-width: 760px !important;
    box-sizing: border-box !important;
  }

  /* === Reservas y Pagos === */
  .tbl-resv td,
  .tabla-admin td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    font-size: 14px !important;
    padding: 6px 4px !important;
    line-height: 1.4 !important;
    word-break: break-word !important;
  }

  .tbl-resv td::before,
  .tabla-admin td::before {
    content: attr(data-label);
    font-weight: 600 !important;
    color: #002060 !important;
    flex: 0 0 45% !important;
    max-width: 140px !important;
  }

  /* === ✅ MENSAJES DE CONTACTO (idéntico a Reservas, ancho completo y centrado) === */
  #cardContactos,
  .card-contactos,
  .contactos-wrapper,
  .seccion-contactos,
  #tablaContactos {
    all: unset !important; /* Limpia restricciones heredadas */
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  #tablaContactos {
    border-spacing: 0 !important;
    width: 100% !important;
    max-width: 780px !important;
    margin: 0 auto 24px auto !important;
  }

  #tablaContactos tr {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
    margin-bottom: 18px !important;
    padding: 18px 20px !important;
    width: 94% !important;
    max-width: 780px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #tablaContactos td {
    display: block !important;
    width: 100% !important;
    padding: 6px 0 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: #333 !important;
    word-break: break-word !important;
  }

  #tablaContactos td::before {
    content: attr(data-label);
    display: block !important;
    font-weight: 600 !important;
    color: #002060 !important;
    margin-bottom: 3px !important;
  }

  #tablaContactos td[data-label="Mensaje"] {
    margin-top: 8px !important;
    white-space: normal !important;
  }

  /* === Mantener horizontales las tablas compactas (Facturas, Usuarios, Accesos, Embarcaciones) === */
  #cardUsuarios table,
  #cardAccesos table,
  #tablaBoats table,
  .tbl-fact {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    border-collapse: collapse !important;
  }

  .tbl-fact th,
  .tbl-fact td {
    white-space: nowrap !important;
    text-align: left !important;
    font-size: 0.9rem !important;
    padding: 8px 10px !important;
    vertical-align: middle !important;
  }

  .tbl-fact {
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  }

  /* === Header === */
  .nav-header {
    flex-direction: column !important;
    gap: 10px !important;
    text-align: center !important;
  }

  .nav-right {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  /* === Modales y mensajes === */
  .adm-modal {
    max-width: 95vw !important;
    margin: 0 auto !important;
  }

  .msgs {
    display: flex !important;
    flex-direction: column !important;
  }

  .msgs-list,
  .msgs-chat {
    height: auto !important;
    min-height: 300px !important;
  }

  /* === Footer === */
  .footer-extendido {
    padding: 16px !important;
    font-size: 0.9rem !important;
  }

  .footer-nav {
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
  }
}
/* === FIX DEFINITIVO: Mensajes de contacto visibles en escritorio === */
@media (min-width: 768px) {
  #tablaContactos {
    width: 100% !important;
    border-collapse: collapse !important;
  }

  #tablaContactos tr {
    display: table-row !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
  }

  #tablaContactos td,
  #tablaContactos th {
    display: table-cell !important;
    padding: 10px 12px !important;
    text-align: left !important;
    vertical-align: top !important;
    border-bottom: 1px solid #eef0f6 !important;
    font-size: 0.95rem !important;
    color: #101828 !important;
  }

  #tablaContactos td::before {
    content: none !important;
  }

  #tablaContactos tr:hover {
    background: #f9fbff !important;
  }
}