:root {
		--background-color: black;
		--Ancho: 16.88em; /*80%; /*26.88em;*/
		--Alto: 8.2em;
		--mtdAncho: calc(var(--Ancho) / 2);
		--mtdAlto: calc(var(--Alto) / 1.5);
		--cntdPrincipal: 100%;
		--mtdContenedor: calc((var(--cntdPrincipal) / 2));
        --blanco: #fff;
        --azultcc: rgba(0, 112, 184, 0.5);
	}
	.trjsContenedor{
		  width: var(--cntdPrincipal);
      margin: auto;
      align-items: center;
	}
	.trjsContenedor .trjsCntdrIzquierda{
		  width: var(--mtdContenedor);
		  min-width: var(--Ancho);
      max-width: var(--Ancho);
		  height: calc(var(--Alto) + 2em); /* cambiar a 100%*/
      margin-right: 1em;
	}
	.trjsContenedor .trjsCntdrDerecha{
		width:  var(--Ancho);
    min-width: var(--Ancho);
		height: calc(var(--Alto) + 3em);
	}

  /*------------------ Tarjeta ---------------*/
	.trjsCntdrIzquierda .trjsFondo{
		width: var(--Ancho);
		max-width: var(--Ancho);
		height: var(--Alto);
		max-height: auto;
		position: relative;
		color: #000;
		transition: .3s ease all;
		transform: rotateY(0deg);
		transform-style: preserve-3d;
		z-index: 2;
		background: url(../img/bg-tarjeta/TarjetaLns3.webp);
		background-size: contain;
		border-radius: 15px;
        border: 1px #0070b8 solid;
        top: 20px;
	}
	.trjsFondo .trjsChip{
		position: absolute;
		height: var(--mtdAlto);
		max-height: var(--mtdAlto);
		width: calc(var(--mtdAncho) - 0.01em);
		max-width: calc(var(--mtdAncho) - 0.01em);
		border-top-left-radius: 15px;
	}
    .trjsChip .imgChip{
        position: absolute;
				height: calc(var(--mtdAlto)/3);
				max-height: calc(var(--mtdAlto)/3);
				width: calc(var(--mtdAlto)/3);
				max-width: calc(var(--mtdAlto)/3);
        margin: 5px;
        bottom: 3px;
    }
	.trjsFondo .trjsMarca{
		position: absolute;
		height: var(--mtdAlto);
		max-height: var(--mtdAlto);
		width: calc(var(--mtdAncho) - 0.01em);
		max-width: calc(var(--mtdAncho) - 0.01em);
		border-top-right-radius: 15px;
		left: var(--mtdAncho);
	}
    .trjsMarca .imgMarca{
		position: absolute;
		height: calc(var(--mtdAlto)/2.5);
		max-height: calc(var(--mtdAlto)/2.5);
		width: calc(var(--mtdAlto)/1.5);
		max-width: calc(var(--mtdAlto)/1.5);
        right: 15px;
        top: 10px
    }
    .trjsFondo .trjsNumero{
		position: absolute;
		height: 1.2em;
		max-height: 1.2em;
        font-size: 1.1em;
        align-items: center;
        text-align: center;
		width: 99%;
        bottom: 45px;
    }
    .trjsFondo .trjsCntdrNombreFecha{
		position: absolute;
		height: 2.3em;
		max-height: 2.3em;
        width: 99%;
        bottom: 0;
        border-bottom-right-radius: 15px;
        border-bottom-left-radius: 15px;
    }
    .trjsCntdrNombreFecha .cntdrDerNom{
        position: absolute;
        top: 0;
        left: 0;
				height: 2.1em;
				max-height: 2.1em;
        padding-left: 3px;
        width: 67%;
        font-size: 0.9em;
        border-bottom-left-radius: 15px;
    }
    .trjsCntdrNombreFecha .cntdrDerFec{
        position: absolute;
        top: 0;
        right: 0;
		height: 2.1em;
		max-height: 2.1em;
        width: 25%;
        border-bottom-right-radius: 15px;
    }
    .cntdrDerFec .cntdrAnnoLtr{
        font-size: 0.6em;
    }
    .cntdrDerFec .cntdrAnnoFec{
        font-size: 0.8em;
    }
    /*---- Revisar donde se pone -----*/
	.trjsCntdrDerecha .trjsForm{
		position: absolute;
		width: var(--Ancho);
	}
    .trjsForm .iconRelative{
      position: relative;
    }

    .iconRelative .fa,
    .iconRelative .fas,
    .iconRelative .far{
      position: absolute;
      bottom: 8px;
      left: 15px;
      font-size: 20px;
      color: #555555;
      font-size: 15px;
    }

    .trjsForm .inptEntrada{
        padding: 6px 0px 6px 25px;
        margin-top: 5px;
        width: 90%;
        text-align: center;
        border: 1px solid #dddddd;
        border-radius: 5px;
        letter-spacing: 1px;
        word-spacing: 3px;
        outline: none;
        font-size: 14px;
        color: #555555;
    }
    .trjsForm .inptRecuerda{
        padding: 4px 0px 4px 25px;
        margin-top: 3px;
        margin-bottom: : 10px;
        width: 90%;
        text-align: center;
        border-radius: 5px;
        letter-spacing: 1px;
        word-spacing: 3px;
        outline: none;
        font-size: 12px;
        color: #555555;
        height: 30px;
    }
    .trjsForm .inptctndrEntraFec{
        padding-left: 20px;
        border-radius: 5px;
        width: 170px;
        border: 1px solid #dddddd;
    }
    .inptctndrEntraFec .inptEntradaFec{
        padding: 5px 0px 5px 0px;
        margin-top: 1px;
        width: 100%;
        text-align: center;
        border: 1px #dddddd;
        border-radius: 5px;
        letter-spacing: 1px;
        word-spacing: 3px;
        outline: none;
        font-size: 14px;
        color: #555555;
    }
    .iconRelative .mxwEntraMenor5, .inptctndrEntraFec .mxwEntraMenor5{width: 180px; padding-left: 18px;}
    .iconRelative .mxwEntraMenor4, .inptctndrEntraFec .mxwEntraMenor4{width: 135px;}
    .iconRelative .mxwEntraMenor3, .inptctndrEntraFec .mxwEntraMenor3{width: 70px;}
    .iconRelative .mxwSelMenor2, .inptctndrEntraFec .mxwSelMenor2{width: 57px;}

	/*----------- Generales --------------*/
	.cntrContenido{
		align-items:flex-end;
		text-align: right;
	}
    .btnPagas{
        /*margin-top: 5px;*/
        width: 100%;
        background: #2196F3;
        padding: 2px;
        text-align: center;
        color: #fafafa;
        border-radius: 5px;
        cursor: pointer;
        height: 30px;
        transition: all 0.3s ease;
    }
    .btnPagas:hover {
        opacity: 0.9;
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
    }
    .btnPagas:disabled {
        background: #9ca3af;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }
    .hideBloque{height: 1px; display: none;}
    .vstImgTrjt{width: 30px; height: 20px;}
    .sdwTextNgr{text-shadow: -2px 2px 3px rgba(0, 0, 0, 0.3);}
    .sdwTextDrd{text-shadow: -2px 2px 3px rgba(184, 107, 0, 0.5);}
    .sdwBoxNgr{box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);}
    .sdwBoxtDrd{box-shadow: 2px 2px 3px rgba(184, 107, 0, 0.5);}
    .max80pcn{width: 6rem; margin-right: 25px;}
		.max100pcn{width: 8rem; margin-right: 25px;}
    .fndGris{background: rgba(240, 240, 240, 0.5);}
    .margDer{margin-right: 10px;}
    .margDer{margin-left: : 10px;}

    /*----------- Progress Indicator --------------*/
    .pago-progress {
        display: flex;
        justify-content: center;
        gap: 2rem;
        margin-bottom: 1.5rem;
        padding: 1rem;
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        border-radius: 12px;
    }
    .pago-progress .step {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: #94a3b8;
        font-size: 0.85rem;
        font-weight: 500;
        transition: all 0.3s ease;
    }
    .pago-progress .step.active {
        color: #0891b2;
        font-weight: 700;
    }
    .pago-progress .step .number {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #e2e8f0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        font-weight: 700;
        transition: all 0.3s ease;
    }
    .pago-progress .step.active .number {
        background: linear-gradient(135deg, #0891b2, #06b6d4);
        color: #fff;
        box-shadow: 0 2px 8px rgba(8, 145, 178, 0.3);
    }
    .pago-progress .step .connector {
        width: 40px;
        height: 2px;
        background: #e2e8f0;
        margin: 0 0.5rem;
    }

    /*----------- Security Badge --------------*/
    .pago-seguridad {
        text-align: center;
        padding: 0.8rem;
        margin-top: 1rem;
        background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
        border: 1px solid #bbf7d0;
        border-radius: 8px;
        font-size: 0.78rem;
        color: #166534;
    }
    .pago-seguridad i {
        color: #22c55e;
        margin-right: 5px;
    }

    /*----------- Internal Methods --------------*/
    .bloque-interno .ttlH2 {
        background: linear-gradient(135deg, #059669, #10b981) !important;
    }
    .bloque-interno .ttlH2:hover {
        background: linear-gradient(135deg, #047857, #059669) !important;
    }

    /*----------- Recommendation Card --------------*/
    .PanelInf2 {
        transition: all 0.3s ease;
        border-radius: 8px;
        overflow: hidden;
    }
    .PanelInf2:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    }

    /*----------- Form Inputs --------------*/
    .trjsForm .inptEntrada:focus {
        border-color: #2196F3;
        box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
    }
    /*----------- Tabla -------------------*/
    .u-full-widthCompra {
      width: 100%;
      box-sizing: border-box; }
    /* Tables
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
    .u-full-widthCompra th, .u-full-widthCompra td {
      padding: 5px 5px;
      text-align: left;
      border-bottom: 1px solid #E1E1E1;
      font-size: 14px;
    }
    .u-full-widthCompra th:first-child,
    .u-full-widthCompra td:first-child { padding-left: 0; }
    .u-full-widthCompra th:last-child,
    .u-full-widthCompra td:last-child {padding-right: 0; }
    .u-full-widthCompra .chkSelec{width: 10px;}

    /*----------- Acordeon ----------------*/
    .cntdrAcordeon{
        /*background: yellow; */
        width: 97%;
        height: auto;
        display: flex;
    }
    .cntdrAcordeon .acordeon {
        max-width: 25em;
        min-width: 25em;
        height: 29em;
        top:0;
        padding-left: 20px;
        margin-right: 25px;
        color: var(--negro);
        transition: all 0.4s ease;
        border-radius: 5px;
        /*border: 1px red solid;*/
        /*background-color: var(--blanco);*/
    }
    .acordeon .bloque {
        margin-bottom: 8px;
        /*padding: 1rem;*/
        color: var(--negro);
        transition: all 0.4s ease;
        border-radius: 5px;
        background-color: var(--blanco);
    }
    .bloque .ttlH2{
        padding: 5px;
        padding-left: 15px;
        width: 90%;
        height: 35px;
        color: var(--blanco);
        transition: all 0.4s ease;
        border-radius: 5px;
        background-color: var(--azultcc);
    }
    .ttlH2 .cntdPstan{min-width: 160px; max-width: 160px;}
    .ttlH2 .slctBttn{cursor: pointer;}

    /*----------- Media -------------------*/
    @media (max-width: 642px) {
    }
    @media (max-width: 800px) {
    }
    @media (max-width: 850px) {
        .cntdrAcordeon{display: block;}
        .cntdrAcordeon .acordeon{height: auto; margin-bottom: 20px;}

    }

	/*----------- Existentes --------------*/

    .BordoRojo {
        color: rgba(255, 0, 0, 0.6);
        margin-left: 2px;
        box-shadow: 0 0 5px rgba(255, 0, 0, 0.6);
    }
    .BordoVerde {
        color: rgba(0, 183, 22, 0.6);
        margin-left: 2px;
        box-shadow: 0 0 5px rgba(0, 183, 22, 0.6);
    }
    .BordoWarning {
        color: rgba(255, 195, 0, 0.6);
        margin-left: 2px;
        box-shadow: 0 0 5px rgba(255, 195, 0, 0.6);
    }
    .TextColorBl{ color: #ffffff; }
    .TextColorNg{ color: #000000; }
    .TextColorRd{ color: #FF0000; }
    .TextColorVr{ color: rgba(0, 183, 22, 0.6); }
    .TextColorAz{color: #0070b8;}
    .TextColorDr{color: rgba(184, 107, 0, 0.25);}
    .TextBordeDr{-webkit-text-stroke: 1px rgba(184, 107, 0, 0.25);} /*rgba(184, 107, 0, 0.25)*/
    .TextBordeAz{-webkit-text-stroke: 1px #0070b8;} /*rgba(184, 107, 0, 0.25)*/
    .TextColorAzLiga{color: #0070b8;}
    .TextColorAzLiga:hover{color: #0070b8;text-decoration: underline; font-style: oblique; cursor: pointer;}
    .TextColorBlLiga{color: #ffe65d;}
    .TextColorBlLiga:hover{color: #dddddd;text-decoration: underline; font-style: oblique; cursor: pointer;}
    .TextTam08px{font-size: 8px;}
    .TextTam10px{font-size: 10px;}
    .TextTam12px{font-size: 12px;}
    .TextTam14px{font-size: 14px;}
    .TextTam16px{font-size: 16px;}
    .TextTam18px{font-size: 18px;}
    .TextTam20px{font-size: 20px;}
    .TextTam25px{font-size: 25px;}
    .TextTam30px{font-size: 30px;}
    .TextTam35px{font-size: 35px;}
    .TextTam40px{font-size: 40px;}
    .TextLigaN{color: black;}
    .TextLigaN:hover{color: #0070b8;}

	.ponrojo{border: 1px red solid;}
	.ponverde{border: 1px green solid;}
	.ponazul{border: 1px blue solid;}
	.slenlinea {display: inline;}