/* ============================
   Scope general del portlet
   ============================ */

.tesoro-ejemplos-portlet {
    max-width: 900px;
    margin: 0 auto;
    font-size: 15px;
}

/* ============================
   Bloque de error
   ============================ */

.tesoro-ejemplos-portlet .form-tesoro-error {
    background: red;
    color: #fff;
    border-radius: 3px;
    margin-top: 15px;
    margin-bottom: 15px;
    padding: 6px;
    text-align: center;
    visibility: hidden;
    display: none;
}

.tesoro-ejemplos-portlet .form-tesoro-error.show-error {
    visibility: visible;
    display: block;
}

/* ============================
   Formulario principal
   (#calculadora-form)
   ============================ */

.tesoro-ejemplos-portlet #calculadora-form {
    margin: 0;
    padding: 0;
}

/* Labels: sin negrita, en línea con el campo */
.tesoro-ejemplos-portlet #calculadora-form .form-item-importe > label,
.tesoro-ejemplos-portlet #calculadora-form .form-item-producto > label {
    font-weight: 400 !important;
    display: inline-block !important;
    margin-right: 12px;
    margin-bottom: 0;
    vertical-align: middle;
}

/* Input importe y select producto: misma anchura y altura */
.tesoro-ejemplos-portlet #calculadora-form .form-item-importe input.form-control,
.tesoro-ejemplos-portlet #calculadora-form .form-item-producto select.form-select {
	width: auto !important;
    min-width: 260px;
    height: 38px;
    padding: 6px 12px;
    line-height: 1.428;
    background-color: #ffffff;
    border: 1px solid #c0c4cb;
    border-radius: 2px;
    box-shadow: none;
    display: inline-block;
    vertical-align: middle;
}

/* Grupo input + sufijo (€ múltiplo) */
.tesoro-ejemplos-portlet #calculadora-form .input-group {
    display: inline-block;
    vertical-align: middle;
}

.tesoro-ejemplos-portlet #calculadora-form .input-group-append {
    display: inline-block;
    vertical-align: middle;
}

.tesoro-ejemplos-portlet #calculadora-form .input-group-text {
    background: transparent;
    border: none;
    padding: 0;
}

/* € (múltiplo de 1000 euros) */
.tesoro-ejemplos-portlet #calculadora-form .importe-multiplo {
    display: inline-block;
    padding-left: 10px;
}

/* Responsive: texto entre paréntesis */
@media (min-width: 768px) {
    .tesoro-ejemplos-portlet .importe-multiplo-responsive {
        display: none;
    }

    .tesoro-ejemplos-portlet .importe-multiplo {
        display: inline-block;
    }
}

@media (max-width: 767px) {
    .tesoro-ejemplos-portlet #calculadora-form .form-item-importe input.form-control,
    .tesoro-ejemplos-portlet #calculadora-form .form-item-producto select.form-select {
        width: 96% !important;
    }

    .tesoro-ejemplos-portlet .importe-multiplo-responsive {
        display: inline-block;
    }

    .tesoro-ejemplos-portlet #calculadora-form .importe-multiplo-explicacion {
        display: none;
    }
}

/* ============================
   Línea de texto + botón
   ============================ */

.tesoro-ejemplos-portlet #calculadora-form .submit-div {
    margin-top: 20px;
}

.tesoro-ejemplos-portlet #calculadora-form .producto-prefix {
    display: inline-block;
    margin-right: 10px;
    font-size: 15px;
    vertical-align: middle;
}

/* Botón amarillo tipo Drupal */
.tesoro-ejemplos-portlet .btn-calculadora {
    display: inline-block;
    padding: 8px 35px;
    border-radius: 4px;
    border: 1px solid #d19a10;
    background: linear-gradient(#f9c63b, #f4a800);
    color: #3c3c3c;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 15px;
    box-shadow: 0 2px 2px rgba(0,0,0,0.25);
    cursor: pointer;
    letter-spacing: 0.03em;
    vertical-align: middle;
    min-width: 140px;
}

.tesoro-ejemplos-portlet .btn-calculadora:hover {
    background: linear-gradient(#ffd24f, #f7b322);
}

.tesoro-ejemplos-portlet .btn-calculadora:active {
    box-shadow: 0 1px 1px rgba(0,0,0,0.3) inset;
}

/* ============================
   Resultado (#respuesta-ejemplos)
   ============================ */

.tesoro-ejemplos-portlet #respuesta-ejemplos {
    border-top: 1px solid #5e656b;
    margin-top: 25px;
    padding-top: 25px;
    display: none !important;
}

.tesoro-ejemplos-portlet #respuesta-ejemplos.show {
    display: block !important;
}

.tesoro-ejemplos-portlet #respuesta-ejemplos h2 {
    text-transform: uppercase;
    margin: 0 0 5px;
}

.tesoro-ejemplos-portlet #respuesta-ejemplos .tablas-elijotesoro {
    margin-top: 17px;
}

.tesoro-ejemplos-portlet #respuesta-ejemplos ul.lista-resultados-ejemplos {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tesoro-ejemplos-portlet #respuesta-ejemplos ul.lista-resultados-ejemplos li {
    position: relative;
    margin-bottom: 3px;
    margin-left: 30px;
    padding: 0 0 0 14px;
}

/* Iconito delante de cada li */
.tesoro-ejemplos-portlet #calculadora-form li:after,
.tesoro-ejemplos-portlet #respuesta-ejemplos li:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 10px;
    height: 10px;
    background: url("/documents/d/portal/sprite") no-repeat -284px 0;
    background-size: auto;
}

/* ============================
   1) FORZAR QUE EL LABEL VAYA EN LA MISMA LÍNEA QUE EL INPUT
   ============================ */

/* Anula el display:block que Liferay mete en el wrapper */
.tesoro-ejemplos-portlet #calculadora-form .form-item-importe,
.tesoro-ejemplos-portlet #calculadora-form .form-item-producto {
    display: flex !important;
    align-items: center !important;
    gap: 12px;
}

/* El label a la izquierda, mismo tamaño que el texto del botón */
.tesoro-ejemplos-portlet #calculadora-form .form-item-importe > label,
.tesoro-ejemplos-portlet #calculadora-form .form-item-producto > label {
    font-size: 15px !important;
    font-weight: 400 !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap;
}

/* El input y el select mantienen su forma */
.tesoro-ejemplos-portlet #calculadora-form .form-item-importe input.form-control,
.tesoro-ejemplos-portlet #calculadora-form .form-item-producto select.form-select {
    margin: 0 !important;
}

.processing-indicator {
    display: none;
    align-items: center;
    margin-left: 8px;
    font-size: 0.9rem;
}

.processing-indicator.show {
    display: inline-flex;
}

.processing-indicator .spinner {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-top-color: rgba(0, 0, 0, 0.6);
    animation: tesoro-spin 0.7s linear infinite;
    margin-right: 4px;
}

@keyframes tesoro-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Desactivado visual del botón */
.btn-calculadora.is-disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* REPARA LOS BORDES QUE LIFERAY SE CARGA */
.tabla-flujos-tesoro.table-bordered {
    border: 1px solid #dee2e6 !important;
}

.tabla-flujos-tesoro.table-bordered th,
.tabla-flujos-tesoro.table-bordered td {
    border: 1px solid #dee2e6 !important;
}

/* REPARA EL BORDE INFERIOR DEL THEAD */
.tabla-flujos-tesoro.table thead th {
    border-bottom: 2px solid #dee2e6 !important;
}

/* Tabla de flujos Tesoro: bordes y fondo como Drupal */
.tabla-flujos-tesoro {
    width: 100%;
    border-collapse: collapse;
}

/* Bordes negros y menos altura de fila */
.tabla-flujos-tesoro th,
.tabla-flujos-tesoro td {
    border: 1px solid #000;      /* bordes negros */
    padding: 4px 8px;            /* menos espacio vertical */
}

/* Fondo uniforme en todas las filas (sin grises alternos) */
.tabla-flujos-tesoro tbody tr td {
    background-color: #ffffff;
}

/* Hover amarillo en TODA la fila, incluidas primera y última celda */
.tabla-flujos-tesoro tbody tr:hover td {
    background-color: #fff3a1 !important;
}

.table.tabla-flujos-tesoro {
    width: 100%;
    border-collapse: collapse !important;
    border-top: 1px solid #000 !important;
    border-bottom: 1px solid #000 !important;
    border-left: 1px solid #000 !important;
    border-right: 1px solid #000 !important;
}

.table.tabla-flujos-tesoro th,
.table.tabla-flujos-tesoro td {
    border: 1px solid #000 !important;   /* borde negro de verdad */
    padding: 2px 6px !important;         /* baja altura de la fila */
    line-height: 1.2 !important;         /* por si el theme infla el line-height */
}

.tablas-elijotesoro table.tabla-flujos-tesoro td,
.tablas-elijotesoro table.tabla-flujos-tesoro th {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    line-height: 1.1 !important;
    height: auto !important;
}

/* Campo importe más pequeño */
.tesoro-ejemplos-portlet #calculadora-form .form-item-importe input.form-control {
    width: 140px !important;   /* la mitad aprox */
}

/* Línea del importe: input + texto en la misma línea */
.tesoro-ejemplos-portlet #calculadora-form .form-item-importe {
    display: flex;
    align-items: center;
    gap: 10px;
	margin-bottom: 16px;
}

.tesoro-ejemplos-portlet #calculadora-form .form-item-importe label {
    width: auto;      /* evita que empuje el input */
    margin-right: 10px;
}

.tesoro-ejemplos-portlet #calculadora-form .importe-multiplo-explicacion {
    white-space: nowrap; /* evita que salte de línea */
}

@media (max-width: 767px) {

    /* TITULOS siempre alineados a la izquierda */
    .tesoro-ejemplos-portlet #calculadora-form label {
        text-align: left !important;
        display: block;
        width: 100%;
        margin-bottom: 6px;
    }

    /* IMPORTA: el bloque del importe se apila bien */
    .tesoro-ejemplos-portlet #calculadora-form .form-item-importe {
        display: block !important;
    }

    .tesoro-ejemplos-portlet #calculadora-form .form-item-importe .input-group {
        width: 100%;
        margin-bottom: 6px;
    }

    .tesoro-ejemplos-portlet #calculadora-form .form-item-importe input.form-control {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* El texto € debajo sin centrarse */
    .tesoro-ejemplos-portlet #calculadora-form .importe-multiplo {
        display: block;
        text-align: left !important;
        margin-top: 4px;
        margin-bottom: 12px;
    }

    /* PRODUCTO consistente (label arriba, select abajo) */
    .tesoro-ejemplos-portlet #calculadora-form .form-item-producto {
        display: block !important;
    }

    .tesoro-ejemplos-portlet #calculadora-form .form-item-producto select.form-select {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* BOTÓN */
    .tesoro-ejemplos-portlet #calculadora-form .submit-div {
        display: block;
        margin-top: 12px;
    }

    .tesoro-ejemplos-portlet #calculadora-form .submit-div .producto-prefix {
        display: block;
        text-align: left !important;
        margin-bottom: 8px;
    }

    .tesoro-ejemplos-portlet #calculadora-form .btn-calculadora {
        width: 100%;
        box-sizing: border-box;
    }
    
  	.tesoro-ejemplos-portlet #calculadora-form .form-item-importe .input-group {
        margin-bottom: -25px; /* ajusta a gusto */
    }
}

.lista-resultados-ejemplos li.bloque-separador::before,
.lista-resultados-ejemplos li.bloque-separador::after {
    content: none !important;
}

.lista-resultados-ejemplos .bloque-separador {
    list-style: none !important;
    height: 15px;
}

.notas-ejemplo {
    margin-top: 20px;
    font-size: 13px;
}

.notas-ejemplo p {
    margin: 6px 0;
}


/* =====================================================
   VARIANTE: /ejemplos-de-inversion
   Wrapper requerido: tesoro-calc--ejemplos
   ===================================================== */

/* ----- CONTENEDOR ----- */
.tesoro-ejemplos-portlet.tesoro-calc--ejemplos {
    max-width: 900px;
    margin-left: 40px;
}

/* ----- TITULOS ----- */
.tesoro-ejemplos-portlet.tesoro-calc--ejemplos h2 {
    color: #b87400;
    font-weight: 600;
    margin-top: 25px;
}

/* ----- FORMULARIO VERTICAL ----- */
.tesoro-ejemplos-portlet.tesoro-calc--ejemplos .form-item-importe,
.tesoro-ejemplos-portlet.tesoro-calc--ejemplos .form-item-producto {
    display: block !important;
    width: 100% !important;
    margin-bottom: 22px;
}

/* Labels arriba */
.tesoro-ejemplos-portlet.tesoro-calc--ejemplos .form-item-importe label,
.tesoro-ejemplos-portlet.tesoro-calc--ejemplos .form-item-producto label {
    display: block !important;
    width: 100% !important;
    margin-bottom: 8px !important;
    font-weight: 600;
}

/* Inputs */
.tesoro-ejemplos-portlet.tesoro-calc--ejemplos .form-item-importe input,
.tesoro-ejemplos-portlet.tesoro-calc--ejemplos .form-item-producto select {
    display: block !important;
    width: 100% !important;
    border-radius: 10px !important;
    border: 1px solid #cfcfcf !important;
    padding: 12px 14px !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

/* Forzar redondeado aunque Bootstrap meta form-control */
.tesoro-ejemplos-portlet.tesoro-calc--ejemplos input.form-control,
.tesoro-ejemplos-portlet.tesoro-calc--ejemplos select.form-select {
    border-radius: 10px !important;
}

/* ----- BOTON ----- */
.tesoro-ejemplos-portlet.tesoro-calc--ejemplos .btn-calculadora,
.tesoro-ejemplos-portlet.tesoro-calc--ejemplos .btn-calculadora:hover,
.tesoro-ejemplos-portlet.tesoro-calc--ejemplos .btn-calculadora:focus,
.tesoro-ejemplos-portlet.tesoro-calc--ejemplos .btn-calculadora:active {
    background: #b87400 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 8px 18px !important;
    border-radius: 6px !important;
    width: auto !important;
    display: inline-block !important;
    box-shadow: none !important;
}

/* ----- LISTAS RESULTADOS ----- */
.tesoro-ejemplos-portlet.tesoro-calc--ejemplos .lista-resultados-ejemplos {
    padding-left: 22px;
}

.tesoro-ejemplos-portlet.tesoro-calc--ejemplos .lista-resultados-ejemplos li {
    list-style: square;
    margin-bottom: 6px;
    color: #333;
}

/* Quitar pseudo-bullets heredados */
.tesoro-ejemplos-portlet.tesoro-calc--ejemplos .lista-resultados-ejemplos li::before,
.tesoro-ejemplos-portlet.tesoro-calc--ejemplos .lista-resultados-ejemplos li::after {
    content: none !important;
}

/* =====================================================
   FIX DEFINITIVO LAYOUT FORMULARIO EJEMPLOS
   ===================================================== */

/* 1) Quitar el flex horizontal heredado */
.tesoro-ejemplos-portlet.tesoro-calc--ejemplos 
#calculadora-form .form-item-importe,
.tesoro-ejemplos-portlet.tesoro-calc--ejemplos 
#calculadora-form .form-item-producto {
    display: block !important;
    align-items: normal !important;
    gap: 0 !important;
}

/* 2) Labels arriba */
.tesoro-ejemplos-portlet.tesoro-calc--ejemplos 
#calculadora-form .form-item-importe label,
.tesoro-ejemplos-portlet.tesoro-calc--ejemplos 
#calculadora-form .form-item-producto label {
    display: block !important;
    width: 100% !important;
    margin-bottom: 8px !important;
}

/* 3) Inputs y select full width */
.tesoro-ejemplos-portlet.tesoro-calc--ejemplos 
#calculadora-form .form-item-importe input,
.tesoro-ejemplos-portlet.tesoro-calc--ejemplos 
#calculadora-form .form-item-producto select {
    width: 100% !important;
    min-width: 100% !important;
    height: auto !important;          /* mata el 38px */
    padding: 12px 14px !important;
    border-radius: 10px !important;
}

/* 4) Quitar width:auto heredado */
.tesoro-ejemplos-portlet.tesoro-calc--ejemplos 
#calculadora-form input.form-control,
.tesoro-ejemplos-portlet.tesoro-calc--ejemplos 
#calculadora-form select.form-select {
    width: 100% !important;
}

/* Separación bloques títulos marrones */
.tesoro-ejemplos-portlet.tesoro-calc--ejemplos h2 {
    color: #b87400;
    font-weight: 600;

    margin-top: 40px;     /* separación superior */
    margin-bottom: 15px;  /* separación con la lista */
}

/* Separación real títulos dentro de respuesta */
.tesoro-ejemplos-portlet.tesoro-calc--ejemplos 
#respuesta-ejemplos h2 {

    margin-top: 20px !important;
    margin-bottom: 15px !important;
}