/* =========================================================
   BLACKOUT BARBER · FICHAS MÓVILES V5
   Objetivo: vista realmente optimizada para teléfono.
   - Ya no mete tarjetas dentro de la tabla.
   - Oculta la tabla en móvil y crea fichas aparte.
   - Ancho uniforme para todas las vistas.
   - Sin sensación de scroll horizontal/alargado.
   ========================================================= */

:root{
  --bbm-bg:#070707;
  --bbm-card:#121214;
  --bbm-card2:#18181b;
  --bbm-line:rgba(255,255,255,.10);
  --bbm-line2:rgba(212,175,55,.20);
  --bbm-gold:#d4af37;
  --bbm-gold2:#f6d874;
  --bbm-text:#fff7ea;
  --bbm-muted:#c9bfae;
  --bbm-soft:#918978;
  --bbm-danger:#ff6b6b;
  --bbm-ok:#51d88a;
  --bbm-warn:#ffd166;
}

/* Limpieza por si quedó una versión anterior insertando cards en filas */
.bb-mobile-only-card{display:none !important;}
.bb-mobile-cards{display:none;}

/* Escritorio: tabla normal, limpia y sin cambiar layout del sistema */
.bb-table-enhanced-wrap{
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.bb-table-enhanced{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}
.bb-table-enhanced th{
  white-space:nowrap;
}

/* =========================================================
   MOBILE REAL
   ========================================================= */
@media (max-width: 760px){
  html, body{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }
  body.bb-mobile-table-page,
  body.bb-mobile-table-page *{
    box-sizing:border-box !important;
  }

  /* Contenedores generales: sin ancho de escritorio heredado */
  body.bb-mobile-table-page main,
  body.bb-mobile-table-page .dashboard,
  body.bb-mobile-table-page main.dashboard,
  body.bb-mobile-table-page .container,
  body.bb-mobile-table-page .content,
  body.bb-mobile-table-page .section,
  body.bb-mobile-table-page .admin-content{
    width:100% !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:10px !important;
    padding-right:10px !important;
    overflow-x:hidden !important;
  }

  body.bb-mobile-table-page .section-head,
  body.bb-mobile-table-page .card,
  body.bb-mobile-table-page .form-box,
  body.bb-mobile-table-page .stats,
  body.bb-mobile-table-page .bb-tabs,
  body.bb-mobile-table-page .bb-history-head,
  body.bb-mobile-table-page .bb-pagination-wrap{
    width:100% !important;
    max-width:430px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    overflow-x:hidden !important;
  }

  body.bb-mobile-table-page .section-head{
    display:block !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
  body.bb-mobile-table-page .title,
  body.bb-mobile-table-page h1{
    max-width:430px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    font-size:clamp(24px, 7vw, 31px) !important;
    line-height:1.06 !important;
    letter-spacing:-.55px !important;
  }
  body.bb-mobile-table-page .subtitle{
    max-width:430px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    font-size:13.5px !important;
    line-height:1.38 !important;
  }

  /* En móvil NO se ve la tabla: se ven fichas externas */
  .bb-table-enhanced-wrap{
    width:100% !important;
    max-width:430px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    overflow:visible !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    padding:0 !important;
  }
  .bb-table-enhanced-wrap > table.bb-table-enhanced{
    display:none !important;
  }
  .bb-mobile-cards{
    display:grid !important;
    width:100% !important;
    max-width:430px !important;
    margin:0 auto !important;
    gap:12px !important;
    overflow:visible !important;
  }

  /* Ficha de app: ancho fijo de teléfono, no tabla horizontal */
  .bbm-card{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    position:relative;
    border-radius:18px;
    border:1px solid var(--bbm-line2);
    background:
      radial-gradient(circle at top right, rgba(212,175,55,.13), transparent 34%),
      linear-gradient(180deg, rgba(24,24,27,.98), rgba(11,11,12,.99));
    box-shadow:0 12px 30px rgba(0,0,0,.28);
    overflow:hidden;
  }
  .bbm-card::before{
    content:"";
    position:absolute;
    inset:0 0 auto 0;
    height:3px;
    background:linear-gradient(90deg, transparent, rgba(246,216,116,.9), transparent);
    pointer-events:none;
  }

  .bbm-card-head{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:9px;
    align-items:start;
    padding:13px 13px 9px;
    border-bottom:1px solid rgba(255,255,255,.075);
  }
  .bbm-main{
    min-width:0;
  }
  .bbm-title{
    display:block;
    color:var(--bbm-text);
    font-size:15.5px;
    line-height:1.18;
    font-weight:800;
    letter-spacing:-.15px;
    overflow-wrap:anywhere;
  }
  .bbm-subtitle{
    display:block;
    margin-top:3px;
    color:var(--bbm-muted);
    font-size:12.5px;
    line-height:1.25;
    overflow-wrap:anywhere;
  }
  .bbm-side{
    max-width:128px;
    justify-self:end;
    align-self:start;
    padding:5px 8px;
    border-radius:999px;
    border:1px solid rgba(212,175,55,.26);
    background:rgba(212,175,55,.11);
    color:#ffe797;
    font-size:11.5px;
    font-weight:800;
    line-height:1.12;
    text-align:center;
    overflow-wrap:anywhere;
  }

  .bbm-chips{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    padding:9px 13px 0;
  }
  .bbm-chip{
    display:inline-flex;
    align-items:center;
    gap:5px;
    max-width:100%;
    padding:5px 8px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.09);
    background:rgba(255,255,255,.045);
    color:var(--bbm-muted);
    font-size:11.5px;
    line-height:1.15;
    white-space:normal;
  }
  .bbm-chip b{
    color:var(--bbm-gold2);
    font-weight:800;
  }
  .bbm-chip span{
    min-width:0;
    overflow-wrap:anywhere;
  }

  /* Información en renglones compactos, NO cuadros que alargan */
  .bbm-fields{
    padding:9px 13px 12px;
    display:grid;
    gap:0;
  }
  .bbm-field{
    display:grid;
    grid-template-columns:92px minmax(0,1fr);
    column-gap:9px;
    align-items:start;
    min-width:0;
    padding:7px 0;
    border-bottom:1px solid rgba(255,255,255,.065);
  }
  .bbm-field:last-child{
    border-bottom:0;
  }
  .bbm-label{
    color:var(--bbm-soft);
    font-size:10.5px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.45px;
    line-height:1.2;
  }
  .bbm-value{
    min-width:0;
    color:var(--bbm-text);
    font-size:13px;
    line-height:1.28;
    text-align:right;
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  .bbm-value br{display:none;}
  .bbm-value .badge,
  .bbm-value .date-chip,
  .bbm-value .mini{
    max-width:100%;
  }

  /* Campos largos ocupan una línea completa, pero compacta */
  .bbm-field.is-long{
    grid-template-columns:1fr;
    gap:5px;
  }
  .bbm-field.is-long .bbm-value{
    text-align:left;
    font-size:12.8px;
    padding:8px 9px;
    border-radius:12px;
    background:rgba(255,255,255,.042);
    border:1px solid rgba(255,255,255,.065);
  }

  /* Acciones: compactas, centradas y sin estirar la ficha */
  .bbm-actions{
    border-top:1px solid rgba(212,175,55,.12);
    background:rgba(0,0,0,.16);
    padding:10px 12px 12px;
  }
  .bbm-actions-label{
    display:block;
    margin-bottom:7px;
    color:#ffe797;
    font-size:10.5px;
    text-transform:uppercase;
    letter-spacing:.55px;
    font-weight:900;
  }
  .bbm-actions-inner,
  .bbm-actions-inner .actions{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:7px !important;
    align-items:center !important;
    justify-content:flex-start !important;
  }
  .bbm-actions-inner form{
    display:inline-flex !important;
    margin:0 !important;
    max-width:100% !important;
  }
  .bbm-actions-inner a,
  .bbm-actions-inner button,
  .bbm-actions-inner .btn,
  .bbm-actions-inner input[type="submit"]{
    min-height:34px !important;
    width:auto !important;
    max-width:100% !important;
    flex:0 1 auto !important;
    padding:8px 10px !important;
    border-radius:12px !important;
    font-size:12px !important;
    line-height:1.1 !important;
    white-space:normal !important;
    text-align:center !important;
  }

  .bbm-empty{
    padding:16px;
    border-radius:18px;
    border:1px dashed rgba(212,175,55,.28);
    background:rgba(255,255,255,.035);
    color:var(--bbm-muted);
    text-align:center;
    font-size:13px;
  }

  /* Ajuste para pantallas muy pequeñas */
  @media (max-width: 380px){
    body.bb-mobile-table-page main,
    body.bb-mobile-table-page .dashboard,
    body.bb-mobile-table-page main.dashboard,
    body.bb-mobile-table-page .container,
    body.bb-mobile-table-page .content{
      padding-left:8px !important;
      padding-right:8px !important;
    }
    .bb-table-enhanced-wrap,
    .bb-mobile-cards,
    body.bb-mobile-table-page .section-head,
    body.bb-mobile-table-page .card,
    body.bb-mobile-table-page .form-box,
    body.bb-mobile-table-page .stats{
      max-width:100% !important;
    }
    .bbm-card-head{
      grid-template-columns:1fr;
    }
    .bbm-side{
      justify-self:start;
      max-width:100%;
      text-align:left;
    }
    .bbm-field{
      grid-template-columns:82px minmax(0,1fr);
      column-gap:7px;
    }
    .bbm-value{
      font-size:12.5px;
    }
  }
}