header{
background: -moz-linear-gradient(top,  rgba(91,129,160,1) 18%, rgba(119,152,179,1) 40%, rgba(195,214,229,0) 100%);
background: -webkit-linear-gradient(top,  rgba(91,129,160,1) 18%,rgba(119,152,179,1) 40%,rgba(195,214,229,0) 100%);
background: linear-gradient(to bottom,  rgba(91,129,160,1) 18%,rgba(119,152,179,1) 40%,rgba(195,214,229,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5b81a0', endColorstr='#00c3d6e5',GradientType=0 );
height:120px;
}

#centrar{
	padding-top:2%;
		margin-left: 0;
}


#acc{text-align: center;}
.acc{text-align: center;}
.fil{margin-top: 20%;}

#otros{padding-top: 15%;}


#tabequipo{
	margin-left: -80px;
}

#cssmenu{
	margin-top: 3%;
	width: 100%;
	margin-left: -10%;
}	

#letras{
	margin-top: 7%;
	margin-left: 2%;
	width: 80%;
	}

#logo{
	position:absolute;
	margin-left: 23%;
	margin-top: 2%;
	height: 100px;
	z-index: 100;
}

#tfooter{
	color:#ffffff;	
	font-family: Helvetica, Arial, Verdana, sans-serif;
	text-align: center;
	margin-top: 4%;
	background: #ff0000;
    background: -moz-linear-gradient(top, /*#333333*/#1c41b0 0%, /*#141414*/#2251dd 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #141414));
    background: -webkit-linear-gradient(top, /*#333333*/#1c41b0 0%, /*#141414*/#2251dd 100%);
    background: -o-linear-gradient(top, /*#333333*/#1c41b0 0%, /*#141414*/#2251dd 100%);
    background: -ms-linear-gradient(top, /*#333333*/#1c41b0 0%, /*#141414*/#2251dd 100%);
    background: linear-gradient(to bottom, /*#333333*/#1c41b0 0%, /*#141414*/#2251dd 100%);
} 


.tablasec{
	margin-left: 12%;
	margin-top: -7%;
	height: 140px;
	width:auto;
	overflow-x:hidden;
	overflow-y: auto; 
}
.tablasec2{
	height: 200px;
	width:auto;
	overflow-x:hidden;
	overflow-y: auto; 
}
.tablasec5{
	/*margin-left: 0px;
	margin-top: -7%;*/
	height:250px;
	width:600px;
	overflow-x:auto;
	overflow-y: auto; 
}

#codcliente{
	width: 21%;
}

#fac{
	width: 17%;
}

.bntinsertar{
	margin-left: 50px;
}

#tregistro, #tequipos,#tt{
	margin-left: 40%;
	margin-top:30px;
	font-size: 180%;
}

#formulario{
	padding-top: 3%;
}

#btnguardar{
	margin-left: 560%;
}

#panelstatus{	width: 60%;}

#lista{padding-left: 30px;}

.fila1,.masterfila{
	margin-top:3%;
	margin-right: 14px;
	margin-bottom: 14px;
	margin-left: 14px;
}

#selector{
	
	width:auto;
}

#cedula{
	margin-left:-200px;
}

.fila2,.fila3,.fila4,.fila5,.fila6{
	margin:14px;
	
}

.fila11,.fila21,.fila31,.fila41,.fila51,.fila61,.fila71{
	margin: 2%;
	margin-top: 3%;
}

.fila111,.fila211,.fila311,.fila411,.fila511,.fila611,.fila711{
	margin-top:5px;
	padding-right: 3%;
}

.fila1a,.fila1b,.fila1c,.fila1d,.fila1e,.fila1f,.fila1g{
	margin: 7%;
}

#cop{
	width:18%;
}


.subfila1,.subfila2,.subfila3,.subfila4{
	margin:10px;
}

.bg-primary{
	padding:12px;
	border-radius: 6px;
}

#correo{
	margin-top: 50px;
}

.panel{
	background-color: rgba(255,255,255,0.8);
}  

/* footer{
	
background: -moz-linear-gradient(top,  rgba(125,185,232,0) 1%, rgba(125,185,232,0.74) 26%, rgba(125,185,232,0.8) 28%, rgba(125,185,232,0.91) 32%, rgba(123,181,227,1) 35%, rgba(91,129,160,1) 76%);
background: -webkit-linear-gradient(top,  rgba(125,185,232,0) 1%,rgba(125,185,232,0.74) 26%,rgba(125,185,232,0.8) 28%,rgba(125,185,232,0.91) 32%,rgba(123,181,227,1) 35%,rgba(91,129,160,1) 76%);
background: linear-gradient(to bottom,  rgba(125,185,232,0) 1%,rgba(125,185,232,0.74) 26%,rgba(125,185,232,0.8) 28%,rgba(125,185,232,0.91) 32%,rgba(123,181,227,1) 35%,rgba(91,129,160,1) 76%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007db9e8', endColorstr='#5b81a0',GradientType=0 );

height: 80px;
} */

#titulo{
	font-size: 200%;
	margin-left: 25%;
}
.titulo{
	font-size: 200%;
}

#tituloeditar{
	font-size: 200%;
	
} 

.vacio{
		background: white url("../imagenes/vacio.png") no-repeat right;
		background-origin: content-box;
	}

.table-fixed thead {
  width: 97%; 
}
.table-fixed tbody {
  max-height: 250px;
  overflow-y: scroll;
  width: 100%;
}
.table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {

  display: block;
}
.table-fixed tbody td, .table-fixed thead > tr> th {
  float: left; 
  border-bottom-width: 0;
}

.table-fixed tr, .table-fixed td{
	height: auto;
	white-space:nowrap;
}
.table-fixed{
	table-layout: auto;
}
#tablacmb .base{
	display: none;
}
#tablatil .base{
	display: none;
}
/* ========================= */
/* 1. ESTILOS BASE (MOBILE-FIRST) */
/* ========================= */
.event-wrapper {
    background: #f4f6fa;
    /* Reducimos el padding horizontal en móvil y mantenemos el vertical */
    padding: 60px 20px; 
    display: flex;
    justify-content: center;
}

.event-grid {
    max-width: 1200px;
    display: grid;
    /* 💥 CLAVE: Una columna en móviles (por defecto) */
    grid-template-columns: 1fr; 
    gap: 20px; /* Reducimos el gap para móviles */
    align-items: stretch;
}

.event-image-group {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.team-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #fff;
    padding: 0;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    max-height: 700px;
}

.event-card {
    background: #fff;
    padding: 35px;
    border-radius: 16px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

.event-datetime {
    font-size: 1.1rem;
    color: #444;
    font-weight: bold;
    margin-bottom: 10px;
}

.event-title {
    /* Reducimos el tamaño de fuente para evitar desbordamiento en teléfonos muy pequeños */
    font-size: 1.6rem; 
    font-weight: 800;
    margin-bottom: 5px;
}

.event-title .vs {
    color: #0066ff;
}

.event-venue h4 {
    margin-top: 15px;
    font-size: 1.2rem;
    font-weight: bold;
}

.buy-btn {
    margin-top: 25px;
    padding: 14px 25px;
    width: 100%;
    border: none;
    background: #01015C;
    color: white;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
    font-size: 1.1rem;
    transition: .3s;
}

.buy-btn:hover {
    background: #03039e;
}

.event-map-section {
    margin-top: 30px;
}

.event-map-section h5 {
    margin-bottom: 10px;
    font-weight: bold;
}


/* ========================= */
/* 2. MEDIA QUERY (PANTALLAS GRANDES) */
/* ========================= */
@media (min-width: 768px) {
    .event-grid {
        /* 💥 CLAVE: Dos columnas para pantallas más grandes */
        grid-template-columns: 1fr 1fr;
        gap: 40px; /* Restablecemos el espaciado original */
        align-items: stretch;
    }

    .event-image-group {
        height: 100%;
    }

    .team-img {
        height: 100%;
        max-height: none;
    }

    .event-title {
        /* Aumentamos la fuente de nuevo en escritorio */
        font-size: 2rem; 
    }
}