.mainWrap {
   
    padding: 50px 0 0 20px;
    height:600px;
    border: 0px none;
}

.filaWrap {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
/*  width: 300px;*/ 
}


/* GENERAL */

.tile1x3, .tile1x3 .front, .tile1x3 .back
{
	width: 300px;
	height: 100px;
}

.tile1x2, .tile1x2 .front, .tile1x2 .back
{
	width: 200px;
	height: 100px;
}

.tile1x1, .tile1x1 .front, .tile1x1 .back
{
	width: 100px;
	height: 100px;
}

.tile2x3, .tile2x3 .front, .tile2x3 .back
{
	width: 300px;
	height: 200px;
}

.fix
{
    margin:0 auto;
	position: absolute;
}

.fix img
{
    position:relative;
}


.front, .back 
{
    margin:0 auto;
    transition: 0.6s;
    transform-style: preserve-3d;
	backface-visibility: hidden;
	position: absolute;
	/*padding: 4px*/
/*	top: 0;
	left: 0;*/
}

.front img
{
    position:relative;
    top:20px;
}

.front p
{
    display: block;
    height: 14px;
    line-height: 14px;
    position: absolute;
    left: 8px;
    bottom: 5px;
    font-weight: 100;
    font-size: 18px;
    font-family: 'Arial';
}

.back p
{
    position:relative;
    font-family: Arial;
    font-size: medium;
    margin: 10px 0 0 5px;
    padding: 10px 0 0 5px;
    text-align:left;
}

/* END GENERAL */

/* PORTADA */

.portada1, .portada1 .frontportada, .portada1 .backportada
{
	width: 300px;
	height: 60px;
}

.frontportada, .backportada
{
    margin:0 auto;
    transition: 0.6s;
    transform-style: preserve-3d;
	backface-visibility: hidden;
	position: absolute;
	/*padding: 4px*/
/*	top: 0;
	left: 0;*/
}

.frontportada img
{
    position:relative;
    top:5px;
}

.frontportada p
{
    display: block;
    height: 14px;
    line-height: 14px;
    position: absolute;
    left: 5px;
    bottom: 5px;
    font-weight: 100;
    font-size: 18px;
    font-family: 'Arial';
}

.backportada p
{
    position:relative;
    font-family: Arial;
    font-size: medium;
    margin: 10px 0 0 5px;	
    padding: 10px 0 0 5px;
    text-align:center;
}

.t-color-blue1 .frontportada
{
    background-color: #4E99E5;
    color: #FFFFFF;
}
.t-color-blue1 .backportada
{
    background-color: #3884CF;
    color: #FFFFFF;
}

.t-color-blue2 .frontportada
{
    background-color: #7BB2E9;
    color: #FFFFFF;
}
.t-color-blue2 .backportada
{
    background-color: #4F86CD;
    color: #FFFFFF;
}

.t-color-royalblue .frontportada
{
    background-color: #0066CC;
    color: #FFFFFF;
}
.t-color-royalblue .backportada
{
    background-color: #0066FF;
    color: #FFFFFF;
}

.t-color-orange .frontportada
{
    background-color: #FF6600;
    color: #FFFFFF;
}
.t-color-orange .backportada
{
    background-color: #FE8839;
    color: #FFFFFF;
}

.t-color-green .frontportada
{
    background-color: #57A865;
    color: #FFFFFF;
}
.t-color-green .backportada
{
    background-color: #2B823A;
    color: #FFFFFF;
}

.down-container:hover .backportada {
	transform: translateY(0px);
}

.down-container:hover .frontportada {
}

.down-container .frontportada
{
    text-align:center;
	transform: translateX(0px);
}

/* back, initially hidden pane */
.down-container .backportada
{
    z-index: 10; /* for firefox 31 */
	transform: translateY(+100%);
}
/* END PORTADA */


.tile-container
{
	transition: 0.6s;
	transform-style: preserve-3d;
	position: relative;
	line-height:normal !important;
}


/* FLIPPER */

.flip-container {
	perspective: 1000;
	transform-style: preserve-3d;
/*    overflow: hidden;*/
}

/*  UPDATED! flip the pane when hovered */
.flip-container:hover .back {
	transform: rotateY(0deg);
}
.flip-container:hover .front {
	transform: rotateY(180deg);
}

/* front pane, placed above back */
.flip-container .front
{
    text-align:center;
    z-index: 2; /* for firefox 31 */
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.flip-container .back
{
    transform: rotateY(180deg);
}

/* END FLIPPER */


/* OVER FROM LEFT */

.left-container {
	perspective: 1000;
	transform-style: preserve-3d;
    overflow:hidden;
}

/*  UPDATED! flip the pane when hovered */
.left-container:hover .back {
	transform: translateX(0px);
}

.left-container:hover .front {
}

.left-container .front
{
    text-align:center;
	transform: translateX(0px);
}

/* back, initially hidden pane */
.left-container .back
{
    z-index: 10; /* for firefox 31 */
	transform: translateX(-100%);
}


/* OVER FROM DOWN */

.down-container {
	perspective: 1000;
	transform-style: preserve-3d;
    overflow:hidden;
}

.down-container:hover .back {
	transform: translateY(0px);
}

.down-container:hover .front {
}

.down-container .front
{
    text-align:center;
	transform: translateX(0px);
}

/* back, initially hidden pane */
.down-container .back
{
    z-index: 10; /* for firefox 31 */
	transform: translateY(+100%);
}

/* FIN*/

/* COLORES */
.t-color-1 .front
{
    background-color: #0066CC;
    color: #FFFFFF;
}
.t-color-1 .back
{
    background-color: #0066FF;
    color: #FFFFFF;
}

.t-color-2 .front
{
    background-color: #FF6600;
    color: #FFFFFF;
}
.t-color-2 .back
{
    background-color: #FF6600;
    color: #FFFFFF;
}

.t-color-3 .front
{
    background-color: #57A865;
    color: #FFFFFF;
}
.t-color-3 .back
{
    background-color: #2B823A;
    color: #FFFFFF;
}

/* ============================================= */
/* Estilos para Drag-and-Drop de Archivos       */
/* Agregado: 2025-12-22                          */
/* ============================================= */

.drop-zone {
    border: 2px dashed #ccc;
    border-radius: 4px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #f9f9f9;
}

.drop-zone:hover, .drop-zone.drag-over {
    border-color: #007bff;
    background-color: #f0f8ff;
}

.drop-zone-content {
    pointer-events: none;
}

.drop-zone-icon {
    font-size: 48px;
    display: block;
    margin-bottom: 10px;
}

.drop-zone-hint {
    font-size: 11px;
    color: #666;
    margin-top: 5px;
}

.file-upload-hidden {
    position: absolute;
    left: -9999px;
}

.file-info {
    padding: 10px;
    background-color: #e8f5e9;
    border: 1px solid #4caf50;
    border-radius: 4px;
    margin-top: 10px;
}

.file-info span {
    margin-right: 15px;
}