*{margin:0;}
.tinyMCE div {text-align:center}

body {
	font: 1em/120% Arial, Helvetica, sans-serif;
}
a {
	color: #669;
	texto-decoration: none;
        font-size: 1em;
}
a:hover {
	texto-decoration: underline;
        color:#00F ;
}
h1 {
	font: bold 36px/100% Arial, Helvetica, sans-serif;
}

.liga {
    color: #fff;
    font-weight: bold;
    text-shadow:1px 1px 0 rgba(0,0,0,.3);
}

.liga:hover {
    color:yellow;
    font-weight: bold;
}

.liga:visited{
    color: #fff;
    text-shadow:1px 1px 0 rgba(0,0,0,.3);
}

.ligaBoton {
    color: #fff;
    font-weight: bold;
    text-shadow:2px 2px 0 rgba(0,0,0,.3);
    display: block;
    background-color: #00cccc;
    margin: 5px;
    padding: 10px;
    text-align: center;
    width: auto;
    min-width: 150px; 
}

.ligaBoton:hover {
    color: #ffee00;
    font-weight: bold;
    background-color: #9dd4f0;
}

.ligaBoton2{
    color: #fff;
    font-weight: bold;
    text-shadow:2px 2px 0 rgba(0,0,0,.3);
    display: block;
    background-color: #f8bb00;
    padding: 9px;
    text-align: center;
    width: auto;
    min-width: 50px;
    float: inside;
}

.ligaviaje {
    color: #fff;
    font-weight: bold;
    text-shadow:1px 1px 0 rgba(5,5,5,.3);
    background-image: url("../img/botonviaje.png");
    padding: 5px;
    padding-right: auto;
    padding-left: auto;
    margin: 10px;
}
.ligaviaje-gris {
    color: #fff;
    font-weight: bold;
    text-shadow:1px 1px 0 rgba(5,5,5,.3);
    background-image: url("../img/botonviaje-gris.png");
    padding: 5px;
    padding-right: auto;
    padding-left: auto;
    margin: 10px;
}

.TituloViajes{
    color: #3b71ca;
    font-weight: bold; 
    text-shadow:2px 2px 0 rgba(4,4,5,.1);
    text-align: center;
    padding-bottom: 3px;
    border-bottom: solid 1px #b77b0e;
}

.TituloViajes2{
    color: #ffffff;
    font-weight: bold; 
    text-shadow:2px 2px 0 rgba(4,4,5,.1);
    text-align: center;
    padding-bottom: 3px;
    border-bottom: solid 1px  #3b71ca;
    background-color: #3b71ca;
}
.TituloViajes3{
   color: #000;
   margin-top: 30px;
   padding-top: 30px;
   margin-bottom: 15px;
   font-size: medium;
    font-weight: bold; 
    text-align: center;
    padding-bottom: 3px;
}


.ligaDocto {
    color: #003399;
    text-shadow:1px 1px 0 rgba(50,50,50,.1);
    background-color: #dddddd;
    padding:5px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    width: auto;
    float: none;
}
.LigaArchivo{
    background-image: url("../img/SubirArchivo.png");
    background-repeat: no-repeat;
    padding: 3px;
    padding-left: 17px;
    text-align: right;
    width: 110px;
    margin-left: auto;
}
.LigaArchivo:hover{
    background-color: #ffff66;
    color: #003399;
}

.AgregaHospedaje{
    display: inline-block; width: 45%;
}

.BordeGris{
    border: solid 1px #d2d7d7;
    padding:1px
}

.btn{
    text-transform: capitalize !important;    
}

/************************************************************************************
ESTRUCTURA
*************************************************************************************/
#pagewrap {
	padding: 5px;
	width: 960px;
	margin: 20px auto;
}
#header {
	height: 180px;
}
#content {
	width: 77%;
	float: left;
}
#sidebar {
	width: 25%;
	float: right;
}
#footer {
	clear: both;
        margin-top: 60px; 
        width:100%;
}



/* ----------------------------------------------------------------*/
/* borde & guideline (puedes ignorarlo) */
#content {
	//background-image: url("../img/bg2.png");
        background-color: white;

}
#sidebar {
	background: #fff;
}
#header, #content, #sidebar {
	margin-bottom: 5px;
}
#pagewrap, #header, #content, #sidebar, #footer {
	/*border: solid 1px #ccc;*/
}


article{
	display: inline-block;
}

new{
	display: inline-block;
}

aviso{
	display: inline-block;
}

seccion{
	display: inline-block;
}

body{
/* //background-image: url("../img/bg2.png"); */
	color:#000;
	font-family:Arial;
	font-size:1em;
	margin:0;
	/*text-shadow:1px 1px 0 rgba(0,0,0,.3);*/
}
.avatar,.personales{
	float: left;
}
.avatar img{
	border:5px solid white;
	margin-left:30px;
}
#contenedor{
	background:#fff ;
	margin:0 auto;
}
#datos{
	border:10px solid black;
	display: inline-block;
	max-width:1000px;
        width: 80%;
	padding:20px;
}
#datos a{
	color:whitesmoke;
}

#paginacion{
    //background-color: #808080;
    padding: 10px;
    text-align: center;
    margin: auto;
}
#paginacion a{
    border: 1px solid;
    padding: 5px;
    margin: auto;
}
#paginacion a:hover{
    background-color: #fff;
}



#websites new{
        background: #fff;
        border:1px solid #919B9C ;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	color: black;
	font-size:15px;
	margin:5px;
	padding:0px;
	width:250px;
        height: 275px;
        vertical-align: top;
        box-shadow: 3px 3px 3px #888888;            
}

#websites article{
	background: #fff ;
/*        border:1px solid #ebe4e4;*/
/*	border-radius:10px;*/
        box-shadow: 5px #888888;
	color: black;
	font-size:15px;
	margin:5px;
	padding:10px;
	width:320px;
        height: 350px;
        vertical-align: top;
        margin-bottom: 50px;
}

#websites article:hover{
	background: #ebe4e4;
}


#websites aviso{
	background: #fff;
        font: Curiel ;
	color: black;
	font-size:12px;
	display: inline-block;
        margin:6px;
	padding:2px;
	width:20px;
        height: 600px;
        
             
        vertical-align: top;            
}

.inferior{
	background: #669;
	border-radius: 5px;
	color: #fff;
	font-size:15px;
	margin:5px;
	padding:5px;
	width:250px;
        height: 100px;
        vertical-align: top;
        text-align: left;
        background: rgba(0, 0, 0, 0.2); 
}

.inferior a:hover{
	color: yellow;
}

.Derecho{
    width:250px ;
    float: right;
    background-color: #e3f2f2;
}

.DerechoTitulo{
    background-color: #0ab3b3;
    color: white;
    text-shadow:2px 2px 0 rgba(0,0,0,.3);
    text-align: center;
    border-bottom: solid 5px #b77b0e;
}

.DerechoTitulo2{
    background-color: #fff5a0;
    color: #000;
    text-shadow:2px 2px 0 rgba(0,0,0,.3);
    text-align: center;
    border-bottom: solid 1px #b77b0e;
}

.DerechoTexto{
    color: #003580;
    padding-left: 7px;
    font-size: .8em;
}

.Derecho a{
    margin-bottom:10px;
    color: #000;
    font-size: 1.2em;
}

.Derecho a:hover{
    color: #00F;
    text-shadow: 1px 1px 0 rgba(0,0,0,.3);
    text-decoration:underline; 
//    background-color: yellow;
}


.Resumen1{
    padding-bottom: 10px;
    height: 85px;
}

.Resumen2{
    height: 130px;
    text-align: justify;
    vertical-align: top;
    padding: 10px;
      position: relative;
}

.Resumen3{
    height: 110px;
    text-align: justify;
    vertical-align: top;
    padding: 5px;
      position: relative;
}


.Visitas{
    font-size: .7em;
    text-align: right;
    padding-right: 3px;
    height: 30px;
}

#websites img {
	//-webkit-transition:.9s;
        height: 120px;
}
#websites article:hover img{
	-webkit-transform:scale(1.05);
}

.detalle{
	background: #FFF;
/*        border:1px solid  #e5d6b1;
	border-radius:10px;*/
	color: black;
	font-size:15px;
	marginmargin-left: 5px;
	padding:0px;
	width:98%;
        min-height: 500px;
}

.doctodetalle{
	background: #FFF;
        border:1px solid  #e5d6b1;
	border-radius:1px;
	color: black;
	font-size:15px;
	marginmargin-left: 5px;
	padding:10px;
	width:98%;
}


.AvisoRango{
	background: #fff;
       // border:1px solid cornflowerblue ;
	border-radius:10px;
	color: black;
	font-size:1.2em;
	marginmargin-left: 5px;
	padding:0px;
	width:98%;
        min-height: 80px;
        text-align: left;
}

.AvisoDetalle{
	background: #fff;
        border:1px solid  #e5d6b1;
	border-radius:10px;
	color: black;
	margin : 5px;
	padding:0px;
	width:98%;
        min-height: 170px;
        
}

.descrip{
	margin:10px;
	padding:10px;
	width:90%;
}

.TituloNoticia{
    height: 50px;
    font-size: .9em;
    font-weight: bold;  
}

#titulo {
    margin-top: 40px;
    margin-bottom: 10px;
    display: block;
    text-align: center;
    color: #003399;
    background:  #e5d6b1;
    padding-top: 5px;
    border-bottom: 1px solid;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    text-shadow:3px 3px 0 rgba(0,0,0,.3);
}
#titulo2 {
    display: block;
    text-align: center;
    font-weight: bold;  
    font-size: 20px;
    color: #3b71ca;
    /* background: greenyellow; */
    padding-top: 5px;
    margin-top: 5px; 
    border-bottom: 4px solid #9999ff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-top-left-radius: 10px;
    -moz-border-top-right-radius: 10px;
    text-shadow:2px 2px 0 rgba(100,100,0,.2);
}

#titulo3 {
    display: block;
    text-align: center;
    color: blue;
    background: #e5d6b1;
    padding: 10px;
    margin-top: 1px; 
    border-bottom: 4px solid #9999ff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-top-left-radius: 10px;
    -moz-border-top-right-radius: 10px;
    text-shadow:2px 2px 0 rgba(100,100,0,.2);
    font-size: 1.5em;
}

#titulo4 {
    display: block;
    text-align: center;
    color: blue;
    /* background: #e5d6b1; */
    padding: 10px;
    margin-top: 1px; 
    border-bottom: 4px solid #9999ff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-top-left-radius: 10px;
    -moz-border-top-right-radius: 10px;
    text-shadow:2px 2px 0 rgba(100,100,0,.2);
    font-size: 1.5em;
}



.pie {
    font-size: .7em;
    text-align: right;
    padding-right: 10px;
    vertical-align: text-bottom;
    vertical-align: bottom;
}


.btn-nuevo{
    display: block;
    background-color: #f1eeee;
    width: 120px;
/*    border-bottom-right-radius: 50px;
    border-top-right-radius: 50px;*/
    margin-left: auto;
   text-shadow:2px 2px 0 rgba(100,100,0,.2);
   color: black;
   padding: 5px;
   font-size: 1.1em;
   border: 1px solid #cccccc  ;
   height: 34px;
}
.btn-nuevo:hover{
    display: block;
    background-color: #9999ff;
   margin-left: auto;
   border: 1px solid #003580;
   color: yellow;
}



/************************************************************************************
MEDIA QUERIES
*************************************************************************************/


/* para 980px o menos */
@media screen and (max-width: 980px) {
	
	#pagewrap {
		width: 94%;
	}
	#content {
		width: 65%;
	}
	#sidebar {
		width: 30%;
	}
        
        .Derecho {
            border: 2px;    
            width: 98%; 
            float: none;
        }
    .AgregaHospedaje{
        width: 95%;
    }
}

@media screen and (max-width:800px){
        .derecho {
            width: 98%; 
            float: none;
        }
}

/* para 700px o menos */
@media screen and (max-width: 700px) {

	#content {
		width: auto;
		float: none;
	}
	#sidebar {
		width: auto;
		float: none;
	}

        .derecho {
            width: 98%; 
            float: none;
        }
        .Problemarios{
            width: 100%;
            
        }
        table{
            width: 100%;
        }
}

@media screen and (max-width:480px){
	#datos{
		display: block;
		text-align:center;
	}
	.avatar,.personales{
		float: none;
	}
	.avatar img {
		margin:10px 0;
	}
        #websites article{
	background:#fff;
	border:1px solid #9999ff;
/*	border-radius:10px;*/
	color: black;
	margin:5px;
	padding:10px;
	width:92%;
        height: 350px;
        }

        #websites new{
	width:200px;
        height: 300px;
        }
        .Resumen1{
            height: 55px;
        }
        .Resumen2{
            height: 150px;
        }
        
        #websites aviso{
	width:200px;
        height: 500px;
        font-size: 2em;
        }
        .Resumen3{
            height: 150px;
        }

        #header {
		height: auto;
	}
	h1 {
		font-size: 1em;
	}
	#sidebar {
		/*display: none;*/
                width: auto;
                float:none;
	}

        #content {
	width: 100%;
        }
        #contenedor{
	background:#fff ;
	margin:0 auto;
        width: 100%;
        }
        
        .detalle{
            width: 100%;
        }
        .derecho {
            width: 98%; 
            float: none;
        }
        .btn-nuevo{
            margin-top: 50px;
        }
        .LigaArchivo{
            width: 130px;
        }
        .LigaArchivo:hover{
            background-color: #ffff66;
        }
        .TablaBasica{
            width: 100%;
        }
        .ligaBoton{
            min-width: 100%;
            width: 100%;
            border-bottom: solid 1px #888888;
            text-shadow:2px 2px 0 rgba(0,0,0,.3);
        }
        .ligaBoton2{
            min-width: 100%;
            width: 100%;
            border-bottom: solid 1px #888888;
            text-shadow:2px 2px 0 rgba(0,0,0,.3);
        }
        
.TituloNoticia{
    height: 40px;
    font-size: .8em;
}
        
}




/* // ----------------------------------- mio -----------------------------------------// */
body{
    background: #939393;
     /* background-image: url("../img/bg2.png"); */
}

.Titulo{
    font-size: 3em;
    margin-top: 100px;
    color: #003580;
    text-align: center;
}

.Titulo4{
    font-size: 1.2em;
    margin-top: 0px;
    color: #003580;
    text-align: center;
    height: 40px;
    border-bottom: 1px solid #e5d6b1;
}

.Titulo5{
    font-size: 1.2em;
    margin-bottom: 4px;
    padding: 3px;
    color: #003580;
    text-align: center;
    border-bottom: 10px double silver;
    height: 50px;
}

.NotiImagen
{
    height: auto;
    width: 70px;
  -webkit-border-radius: 1px;
     -moz-border-radius: 1px;
          border-radius: 1px;
    text-align: left;
    
}
.ArtImagen
{
    
    height: 40px;
    width: 70px;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
    float: left; 
    margin-right: 8px;
    overflow: hidden;
    
}
.BgInferior
{
    width: auto;
    float: none;
    margin-top: 20px;
    padding: 10px;
    background: #ffffcc;
    background-image: url("../img/bginferior.png");
    color:#000;
    border-top: 1px solid #b77b0e;
    font-size: .9em;
background-position: center top;
    background-size: 100% auto;    
    
}
.tabla-tit{
    font-weight: bold !important;  
    background-color: #cfd1d3 !important;
    color: #000000;
    padding: 1px !important;
    margin: 1px !important;
}

.borderless table {
    border-top-style: none !important;
    border-left-style: none !important;
    border-right-style: none !important;
    border-bottom-style: none !important;
}

.parpadea {
  
    animation-name: parpadeo;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  
    -webkit-animation-name:parpadeo;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
  }
  
  @-moz-keyframes parpadeo{  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
  }
  
  @-webkit-keyframes parpadeo {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
     100% { opacity: 1.0; }
  }
  
  @keyframes parpadeo {  
    0% { opacity: 1.0; }
     50% { opacity: 0.0; }
     100% { opacity: 1.0; }
   }

/* Mejoras mobile-first - Viaje Control */
#ViajeControl .tabla-tit {
    font-weight: bold !important;
    background-color: #1a237e !important;
    color: #ffffff !important;
    padding: 4px 2px !important;
    font-size: 0.7rem !important;
}
#ViajeControl .table {
    font-size: 0.75rem !important;
}
#ViajeControl .table td, 
#ViajeControl .table th {
    padding: 3px 2px !important;
    vertical-align: middle !important;
}
#ViajeControl .navbar .btn {
    font-size: 0.7rem;
    padding: 2px 6px;
}
/* Submenús compactos */
#ViajeControl .dropdown-menu {
    font-size: 0.7rem;
    padding: 2px;
    min-width: 140px;
}
#ViajeControl .dropdown-item {
    padding: 4px 8px;
    font-size: 0.7rem;
}
#ViajeControl .dropdown-divider {
    margin: 2px 0;
}
#ViajeControl .dropdown-item i {
    font-size: 0.65rem;
    width: 16px;
}

/* Simulación visual de autobús */
#ViajeControl .bus-container {
    background: linear-gradient(180deg, #adb5bd 0%, #868e96 100%);
    border-radius: 20px 20px 10px 10px;
    padding: 35px 15px 20px 15px;
    position: relative;
    max-width: 100%;
    margin: 0 auto;
}
#ViajeControl .bus-container::before {
    content: "AUTOBÚS - Asientos asignados";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 1px;
    white-space: nowrap;
}
#ViajeControl .bus-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
}
#ViajeControl .bus-seat {
    width: 130px;
    height: 70px;
    border-radius: 8px 8px 4px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    cursor: pointer;
    border: 2px solid rgba(255,255,255,0.3);
    padding: 6px;
}
#ViajeControl .bus-seat.occupied {
    background: linear-gradient(145deg, #0d6efd, #0a58ca);
    color: white;
}
#ViajeControl .bus-seat.occupied:hover {
    background: linear-gradient(145deg, #0b5ed7, #084298);
}
#ViajeControl .bus-seat.available {
    background: linear-gradient(145deg, #198754, #146c43);
    color: white;
    opacity: 0.8;
}
#ViajeControl .bus-seat.cancelled {
    background: linear-gradient(145deg, #ffc107, #d39e00);
    color: #000;
}
#ViajeControl .bus-seat-number {
    font-weight: bold;
    font-size: 1rem;
}
#ViajeControl .bus-seat-name {
    font-size: 0.75rem;
    max-width: 125px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-wrap: break-word;
    text-align: center;
    line-height: 1.2;
}
#ViajeControl .bus-seat-info {
    height: auto;
    min-height: 50px;
    padding: 4px;
}
#ViajeControl .bus-seat-member {
    font-size: 0.55rem;
    display: block;
    opacity: 0.9;
}
#ViajeControl .bus-aisle {
    width: 30px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    color: rgba(255,255,255,0.3);
}

@media (max-width: 576px) {
    #ViajeControl .bus-container {
        padding: 30px 5px 15px 5px;
    }
    #ViajeControl .bus-container::before {
        font-size: 0.75rem !important;
    }
    #ViajeControl .bus-row {
        display: flex;
        justify-content: center;
        gap: 4px;
        margin-bottom: 6px;
    }
    #ViajeControl .bus-seat {
        width: 80px !important;
        min-width: 80px !important;
        height: auto !important;
        min-height: 50px !important;
        padding: 3px !important;
        flex-shrink: 0;
    }
    #ViajeControl .bus-seat-number {
        font-size: 0.8rem !important;
        display: block;
    }
    #ViajeControl .bus-seat-name {
        font-size: 0.6rem !important;
        max-width: 75px !important;
        white-space: normal;
        word-wrap: break-word;
        text-align: center;
        line-height: 1.1;
    }
    #ViajeControl .bus-aisle {
        width: 15px !important;
        height: 50px !important;
    }
}