/* === ESTILO MOVIL UNIVERSOCHAT - NO TOCA FORMULARIO === */
@media only screen and (max-width: 768px) {
  *{box-sizing:border-box}

  /* 1. CONTAINER SOLO */
  .container,
  .container.blanco {
    width:100% !important;
    min-height:100%;
    padding:12px !important;
    border:none !important;
    border-radius:0 !important;
    box-sizing:border-box;
    background:#fff;
  }

  /* 2. MENU MOVIL SOLO */
  nav#cssmenu .logo {
    float:none !important;
    width:100% !important;
    text-align:center !important;
    height:46px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 !important;
  }
  
  .menu-toggle {
    display:none !important;
  }
  
  .button {
    display:block !important;
    position:absolute !important;
    right:0 !important;
    top:0 !important;
    width:55px !important;
    height:46px !important;
    cursor:pointer !important;
    padding:15px 18px 0 0 !important;
    z-index:10 !important;
  }
  
  .button span,
  .button span:before,
  .button span:after {
    content:'' !important;
    display:block !important;
    position:absolute !important;
    height:2px !important;
    width:20px !important;
    background:#ddd !important;
    left:0 !important;
    transition:all .3s ease !important;
  }
  
  .button span {top:22px !important}
  .button span:before {top:-6px !important}
  .button span:after {top:6px !important}
  
  .menu-toggle:checked + .button span {background:transparent !important}
  .menu-toggle:checked + .button span:before {
    top:0 !important;
    transform:rotate(45deg) !important;
    background:#fff !important;
  }
  .menu-toggle:checked + .button span:after {
    top:0 !important;
    transform:rotate(-45deg) !important;
    background:#fff !important;
  }
  
  header ul.menu-lista {
    display:none !important;
    float:none !important;
    width:100% !important;
    background:#000 !important;
    clear:both !important;
    margin:0 !important;
    padding:0 !important;
  }
  
  .menu-toggle:checked ~ ul.menu-lista {
    display:block !important;
  }
  
  header ul.menu-lista > li {
    float:none !important;
    width:100% !important;
    border-top:1px solid #333 !important;
    text-align:center !important;
    margin:0 !important;
    padding:0 !important;
  }
  
  header ul.menu-lista > li > a {
    padding:14px 5px !important;
    font-size:13px !important;
    display:block !important;
    color:#ddd !important;
  }
  
  header ul.menu-lista > li:hover {
    background:#222 !important;
  }

  /* 3. TIPOGRAFÍA SOLO */
  h1{font-size:20px;line-height:26px}
  h2{font-size:16px;line-height:22px}
  h3{font-size:18px;line-height:24px}

  /* 4. PANEL - SOLO DENTRO DEL PANEL, NO TOCA INPUT-GROUP DE BOOTSTRAP */
  .panel-primary {
    border:none;
    box-shadow:0 4px 12px rgba(0,0,0,.12);
    border-radius:10px;
    overflow:hidden;
  }
  
  .panel-primary>.panel-heading {
    padding:12px 15px;
    background:#000;
    border:none;
  }
  
  .panel-primary>.panel-heading .panel-title {
    font-size:15px;
    line-height:20px;
    text-align:center;
    color:#fff;
    margin:0;
  }
  
  .panel-primary>.panel-body {
    padding:20px 15px;
    display:block;
  }

  /* 5. FIX SOLO PARA EL FORM DEL CHAT - NO ROMPE BOOTSTRAP */
  .panel-body form .input-group {
    display:block;
    width:100%;
  }
  
  .panel-body form .input-group-addon {
    display:none;
  }
  
  .panel-body form .input-group .form-control {
    display:block;
    width:100%;
    height:48px;
    border:1px solid #ddd;
    border-radius:6px;
    margin-bottom:12px;
    font-size:16px;
    padding:0 12px;
    float:none;
  }
  
  .panel-body form .input-group-btn {
    display:block;
    width:100%;
    float:none;
  }
  
  .panel-body form .input-group-btn .btn-success {
    display:block;
    width:100%;
    height:50px;
    border:none;
    border-radius:6px;
    background:#5cb85c;
    font-size:18px;
    font-weight:700;
    line-height:50px;
    text-transform:uppercase;
  }

  /* 6. BANDERAS - CENTRADAS COMO ANTES */
  #bandera1 {
    display:flex !important;
    place-items:center !important;
    justify-content:center !important;
    min-height:70px !important;
    text-align:center !important;
  }
  
  #bandera1 img {
    width:112px !important;
    height:69.6px !important;
    margin:0 auto !important;
  }

  /* 7. THUMBNAILS - NO TOCAR GRID DE BOOTSTRAP */
  .thumbnails {
    margin-left:0;
  }
  
  .thumbnails>li {
    float:none;
    width:100%;
    margin-left:0;
    margin-bottom:15px;
  }
  
  /* FIX: 2 columnas ? 1 columna en móvil */
  .row-fluid .span6{
    width:100% !important;
    margin-left:0 !important;
    float:none !important;
    padding:0 !important;
  }
  .row-fluid [class*="span"]{
    margin-left:0 !important;
    padding:0 5px;
  }







/* === GRID DE SALAS - MÓVIL === */
.salas-grid {
  grid-template-columns:repeat(2, 1fr);
  gap:12px;
  padding:10px 0;
}

.columna-sala {
  padding:15px 12px;
}

.columna-sala h4 {
  font-size:14px;
  margin-bottom:12px;
  padding-bottom:8px;
}

.columna-sala ul li {
  margin-bottom:10px; /* Espacio entre links en móvil */
}

.columna-sala ul li a {
  font-size:13px;
  padding:4px 0;
}
}
/* === FIX FORMULARIO APILADO EN MOVIL === */
@media only screen and (max-width: 768px) {
  /* Mata el input-group de bootstrap SOLO en el panel del chat */
  .panel-body .input-group {
    display:block !important;
    width:100% !important;
  }
  
  .panel-body .input-group-addon {
    display:none !important;
  }
  
  /* INPUT ARRIBA */
  .panel-body .input-group .form-control {
    display:block !important;
    width:100% !important;
    height:48px !important;
    border:1px solid #ddd !important;
    border-radius:6px !important;
    margin-bottom:12px !important;
    font-size:16px !important;
    padding:0 12px !important;
    float:none !important;
    border-right:1px solid #ddd !important;
  }
  
  /* BOTON ABAJO */
  .panel-body .input-group-btn {
    display:block !important;
    width:100% !important;
    float:none !important;
    clear:both !important;
  }
  
  .panel-body .input-group-btn .btn {
    display:block !important;
    width:100% !important;
    height:50px !important;
    border:none !important;
    border-radius:6px !important;
    background:#5cb85c !important;
    font-size:18px !important;
    font-weight:700 !important;
    line-height:50px !important;
    text-transform:uppercase !important;
    margin:0 !important;
  }
}