:root {
    --np-bg: #552c50;
    --np-dark: #4b1e41;
    --np-purple: #552c50;
    --np-purple-soft: #8b6486;
    --np-header: #ceb6cb;
    --np-header-light: #f2e3f2;
    --np-box: #f2e3f2;
    --np-box-2: #e3d2e2;
    --np-border: #a3899d;
    --np-white: #ffffff;
    --np-green: #477d43;
    --np-red: #b10000;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: var(--np-purple);
    background: var(--np-bg);
}

a {
    color: var(--np-purple);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.np-page {
    width: calc(100% - 24px);
    max-width: 790px;
    margin: 8px auto 0;
}

/* CABECERA */

.np-header {
    min-height: 85px;
    display: flex;
    align-items: center;
    padding: 8px 14px;
    position: relative;

    background:
        linear-gradient(
            90deg,
            #c79fc3 0%,
            #d4b2d0 48%,
            #f4eaf3 100%
        );

    border: 2px solid var(--np-dark);
    border-radius: 9px;
    box-shadow: 0 2px 2px rgba(0,0,0,.25);
}

.np-brand {
    width: 205px;
    position: relative;
    white-space: nowrap;
    line-height: 1;
}

.np-brand-new {
    position: absolute;
    top: -4px;
    left: 2px;

    font-size: 12px;
    font-weight: bold;
    color: #a40000;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.np-brand-name {
    display: inline-block;
    margin-top: 11px;

    font-size: 39px;
    font-weight: 900;
    letter-spacing: -3px;

    color: white;
    text-shadow:
        2px 2px 0 #7c376f,
        3px 3px 1px rgba(0,0,0,.3);
}

.np-brand-dotcom {
    display: inline-block;
    margin-left: 3px;
    font-size: 11px;
    color: white;
    font-weight: bold;
    transform: rotate(-90deg);
    transform-origin: center;
}

.np-headline {
    flex: 1;
    text-align: center;
    padding-right: 35px;

    color: var(--np-dark);
    font-size: 19px;
    letter-spacing: .5px;
}

/* CONTENEDOR */

.np-container {
    background: white;

    border-left: 2px solid var(--np-dark);
    border-right: 2px solid var(--np-dark);
    border-bottom: 2px solid var(--np-dark);

    border-radius: 0 0 8px 8px;

    padding: 14px 8px 6px;
    min-height: 410px;
}

.np-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 135px;
    gap: 12px;
}

.np-content {
    min-width: 0;
    padding: 4px 8px 18px;
}

.np-sidebar {
    min-width: 0;
}

/* MENÚ LATERAL */

.np-menu {
    margin-bottom: 18px;
    background: #f8eff7;
    border: 1px solid #ead9e8;
}

.np-menu-title {
    padding: 3px 5px;
    text-align: center;

    background: var(--np-box-2);
    color: white;

    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
}

.np-menu a {
    display: flex;
    align-items: center;
    min-height: 28px;

    padding: 3px 4px;

    border-bottom: 1px solid #e9dce8;

    font-size: 10px;
    line-height: 11px;
    font-weight: bold;
    text-transform: uppercase;
}

.np-menu a:last-child {
    border-bottom: 0;
}

.np-menu a:hover {
    background: #ead8e8;
    text-decoration: none;
}

.np-menu-icon {
    width: 25px;
    flex: 0 0 25px;

    margin-right: 3px;

    text-align: center;
    font-size: 18px;
    line-height: 20px;
}

/* CONTENIDO */

h1,
h2,
h3 {
    color: var(--np-dark);
}

h2 {
    font-size: 18px;
    margin: 6px 0 10px;
}

h3 {
    font-size: 13px;
    margin: 5px 0 10px;
}

.np-intro {
    margin: 8px 0 18px;
    line-height: 1.35;
}

.box {
    width: 100%;
    max-width: 350px;

    margin: 20px auto;
    padding: 15px 17px 18px;

    background: #f7eef6;
    border-radius: 4px;
}

/* FORMULARIOS */

label {
    display: block;
    margin: 8px 0;
}

input,
select,
textarea,
button {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
select,
textarea {
    width: 100%;

    padding: 3px 5px;

    color: #4c2446;
    background: white;

    border: 1px solid #5d3a58;
    border-radius: 0;
}

input:focus,
select:focus,
textarea:focus {
    outline: 1px solid #b58eb0;
    background: #f7fff5;
}

input[type="checkbox"],
input[type="radio"] {
    width: auto;
}

button,
.button,
.np-button {
    display: inline-block;

    padding: 3px 9px;

    color: white;
    background: var(--np-green);

    border: 1px solid #365f33;
    border-radius: 2px;

    font-weight: bold;
    cursor: pointer;
}

button:hover,
.button:hover,
.np-button:hover {
    filter: brightness(.95);
    text-decoration: none;
}

/* AVISOS */

.error,
.np-error {
    margin: 8px 0;
    color: var(--np-red);
    font-weight: bold;
}

.np-warning {
    color: #a60000;
    font-weight: bold;
}

/* ANUNCIOS */

.ad {
    margin: 0 0 10px;
    padding: 0 0 10px;
    border-bottom: 1px solid #dfcddd;
}

.np-ad-location {
    padding: 4px 7px;

    background: #f1e3ef;
    border-radius: 6px 6px 0 0;

    text-align: center;
    color: #a56696;
}

.np-ad-title {
    margin: 5px 0 2px;

    color: #3d0030;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
}

.np-ad-text {
    line-height: 1.25;
}

.np-ad-actions {
    margin-top: 8px;

    font-size: 12px;
    font-weight: bold;
}

/* FOOTER */

.np-footer-links {
    margin-top: 3px;

    text-align: center;
    color: white;

    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
}

.np-footer-links a {
    color: white;
}

.np-copyright {
    padding: 14px 0 22px;

    text-align: center;

    color: #a879a3;
    font-size: 10px;
}

/* RESPONSIVE */

@media (max-width: 700px) {

    body {
        background: white;
    }

    .np-page {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    .np-header {
        min-height: 75px;
        border-left: 0;
        border-right: 0;
        border-top: 0;
        border-radius: 0;
    }

    .np-brand {
        width: 155px;
    }

    .np-brand-name {
        font-size: 31px;
    }

    .np-headline {
        padding-right: 0;
        font-size: 14px;
    }

    .np-container {
        border: 0;
        border-radius: 0;
        padding: 8px;
    }

    .np-columns {
        display: flex;
        flex-direction: column;
    }

    .np-content {
        order: 1;
        padding: 4px;
    }

    .np-sidebar {
        order: 2;
    }

    .np-menu {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .np-menu-title {
        grid-column: 1 / -1;
    }

    .np-menu a {
        min-height: 38px;
        font-size: 11px;
    }

    .box {
        max-width: none;
        margin: 10px 0;
    }

    .np-footer-links {
        padding: 8px;
        background: var(--np-bg);
        line-height: 1.6;
    }

    .np-copyright {
        background: var(--np-bg);
    }
}

@media (max-width: 430px) {

    .np-header {
        align-items: flex-start;
        flex-direction: column;
        padding: 7px 12px 10px;
    }

    .np-brand {
        width: 100%;
        text-align: center;
    }

    .np-headline {
        width: 100%;
        margin-top: 4px;
        text-align: center;
        font-size: 12px;
    }

    .np-menu {
        grid-template-columns: 1fr;
    }

    .np-menu-title {
        grid-column: auto;
    }
}
/* PUBLICACIÓN DE ANUNCIOS */

.np-publish-heading {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 8px;
    color: #477345;
    font-size: 14px;
    line-height: 1.25;
}

.np-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    border: 4px solid #7fa283;
    border-radius: 50%;

    color: #628368;

    font-size: 26px;
    font-weight: bold;
    line-height: 1;
}

.np-tips {
    margin: 6px 0 26px 45px;

    color: #b00000;

    font-size: 13px;
    font-weight: bold;
}

.np-category-list {
    margin: 0 0 15px 54px;
}

.np-category-list form {
    margin: 0;
    padding: 0;
}

.np-category-link {
    padding: 3px 0;

    border: 0;
    background: transparent;

    color: #8b3f79;

    font-size: 13px;
    font-weight: bold;

    cursor: pointer;
}

.np-category-link:hover {
    text-decoration: underline;
}

.np-selected-category {
    margin: 2px 0 11px;

    color: #15581d;

    font-size: 12px;
}

.np-location-form {
    width: 390px;
    max-width: calc(100% - 50px);

    margin: 18px 0 0 50px;
}

.np-location-form label {
    width: 190px;
    margin: 6px 0;

    font-size: 11px;
}

.np-location-form select,
.np-location-form input {
    padding: 2px 3px;
    font-size: 12px;
}

.np-required {
    color: #c00000;
}

.np-publish-note {
    text-align: right;
    color: #c00000;
    font-size: 11px;
    font-style: italic;
}

.np-publish-warning {
    margin: 15px 0 35px;

    text-align: center;

    color: #e00000;

    font-size: 11px;
    font-weight: bold;
    font-style: italic;
}

.np-publish-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.np-back-link,
.np-next-link {
    border: 0;
    background: transparent;

    color: #4d8050;

    font-size: 11px;
    font-weight: bold;

    text-shadow:
        1px 1px 0 white;
}

.np-next-link {
    cursor: pointer;
}

@media (max-width: 700px) {

    .np-tips,
    .np-category-list,
    .np-location-form {
        margin-left: 0;
    }

    .np-location-form {
        width: 100%;
        max-width: none;
    }

    .np-location-form label {
        width: 100%;
    }

    .np-step-number {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
        font-size: 22px;
    }
}

/* =========================================================
   TIPOGRAFÍA FIEL A LA ANTIGUA PASION.COM
   ========================================================= */

body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
}

input,
select,
textarea,
button {
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

/* Cabecera */
.np-headline {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: normal;
}

/* Paso de publicación */
.np-publish-heading {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.25;
}

/* Categorías: la antigua Pasion usaba una letra
   claramente más gruesa y ancha */
.np-category-link {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0;
    color: #93457f;
}

/* Texto rojo de consejos */
.np-tips {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    text-transform: none;
}

/* Formularios pequeños, como en la original */
.np-location-form label,
.np-location-form input,
.np-location-form select {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
}

/* Menú lateral */
.np-menu,
.np-menu a,
.np-menu button {
    font-family: Arial, Helvetica, sans-serif;
}


/* En el Paso 1 el texto original era malva,
   no verde. El número 1 continúa verde. */
.np-publish-heading-step1 {
    color: #93457f;
}


/* =========================================================
   AJUSTES DE FIDELIDAD PASION.COM
   ========================================================= */

.np-content {
    padding-left: 6px;
    padding-right: 4px;
}

/* Paso 1: la lista original empezaba más cerca del margen */
.np-category-list {
    margin-left: 47px;
    margin-top: 24px;
}

.np-category-link {
    padding: 2px 0;
}

/* Paso 2 */
.np-location-form {
    margin-top: 16px;
    margin-left: 46px;
    width: 455px;
    max-width: calc(100% - 50px);
}

.np-location-form label {
    width: 190px;
}

.np-publish-note {
    margin-top: 26px;
    margin-right: 0;
}

.np-publish-warning {
    margin-top: -4px;
    margin-bottom: 38px;
    white-space: nowrap;
}

.np-publish-navigation {
    width: 440px;
    max-width: 100%;
}

/* La Pasion original tenía algo más de sitio útil para contenido */
.np-columns {
    grid-template-columns: minmax(0, 1fr) 135px;
    gap: 7px;
}

@media (max-width: 700px) {
    .np-category-list,
    .np-location-form {
        margin-left: 0;
    }

    .np-publish-warning {
        white-space: normal;
    }
}

.np-brand {
    width: 220px;
    display: flex;
    align-items: center;
}

.np-logo {
    display: block;
    width: 205px;
    max-width: 100%;
    height: auto;
}

@media (max-width: 700px) {
    .np-brand {
        width: 175px;
    }

    .np-logo {
        width: 165px;
    }
}

@media (max-width: 430px) {
    .np-brand {
        width: 100%;
        justify-content: center;
    }

    .np-logo {
        width: 180px;
    }
}

/* =========================================================
   CABECERA - PROPORCIONES PASION.COM ORIGINAL
   ========================================================= */

.np-header {
    height: 86px;
    min-height: 86px;
    padding: 5px 10px;
}

.np-brand {
    width: 185px;
    flex: 0 0 185px;
    height: 74px;

    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.np-logo {
    width: 155px;
    max-width: 155px;
    max-height: 72px;
    height: auto;
    object-fit: contain;
}

.np-headline {
    flex: 1;

    padding: 0 35px 0 10px;

    text-align: center;

    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 17px;
    font-weight: normal;
}

/* Responsive */
@media (max-width: 700px) {
    .np-header {
        height: auto;
        min-height: 72px;
    }

    .np-brand {
        width: 145px;
        flex-basis: 145px;
        height: 62px;
    }

    .np-logo {
        width: 135px;
        max-width: 135px;
        max-height: 60px;
    }

    .np-headline {
        font-size: 13px;
        padding: 0 5px;
    }
}

@media (max-width: 430px) {
    .np-brand {
        width: 100%;
        height: auto;
        flex-basis: auto;
        justify-content: center;
    }

    .np-logo {
        width: 145px;
        max-width: 145px;
    }
}


/* =========================================================
   ACCESO MIS ANUNCIOS
   ========================================================= */

.np-login-intro {
    display: flex;
    align-items: center;
    gap: 15px;

    margin: 4px 0 8px;
}

.np-login-logo {
    flex: 0 0 185px;
}

.np-login-logo img {
    display: block;

    width: 185px;
    max-width: 100%;
    height: auto;
}

.np-login-description {
    max-width: 405px;

    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 1.3;

    color: #9a5587;
}

.np-login-description strong {
    color: #7b386d;
}

@media (max-width: 700px) {

    .np-login-intro {
        align-items: flex-start;
    }

    .np-login-logo {
        flex-basis: 150px;
    }

    .np-login-logo img {
        width: 150px;
    }
}

@media (max-width: 500px) {

    .np-login-intro {
        flex-direction: column;
    }

    .np-login-logo {
        flex-basis: auto;
    }

}


/* ==========================================================
   NEWPASION - AJUSTE FIEL A PASION.COM ORIGINAL
   ========================================================== */

/* CONTENEDOR GENERAL */
.np-page {
    width: 790px !important;
    max-width: calc(100% - 20px) !important;
    margin: 14px auto 0 !important;
}

/* CABECERA ORIGINAL: BAJA Y COMPACTA */
.np-header {
    position: relative !important;

    width: 100% !important;
    height: 86px !important;
    min-height: 86px !important;

    padding: 0 !important;

    display: block !important;

    overflow: hidden !important;

    background: linear-gradient(
        90deg,
        #c69bc1 0%,
        #d7b7d3 45%,
        #f3e8f1 100%
    ) !important;

    border: 2px solid #4b1e41 !important;
    border-radius: 8px !important;
}

/* LOGO: MISMA PROPORCIÓN QUE LA PASION ORIGINAL */
.np-brand {
    position: absolute !important;

    left: 8px !important;
    top: 5px !important;

    width: 160px !important;
    height: 73px !important;

    display: flex !important;
    align-items: center !important;

    margin: 0 !important;
    padding: 0 !important;
}

.np-logo {
    display: block !important;

    width: 155px !important;
    max-width: 155px !important;
    height: auto !important;
    max-height: 73px !important;

    object-fit: contain !important;
}

/* TITULAR DE CABECERA */
.np-headline {
    position: absolute !important;

    top: 5px !important;
    left: 180px !important;
    right: 15px !important;

    padding: 0 !important;
    margin: 0 !important;

    text-align: center !important;

    font-family: Verdana, Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    line-height: 16px !important;
    font-weight: bold !important;

    color: #980000 !important;
    text-transform: uppercase !important;
}

/* CUERPO */
.np-container {
    min-height: 400px !important;

    padding: 12px 7px 5px !important;

    border-left: 2px solid #4b1e41 !important;
    border-right: 2px solid #4b1e41 !important;
    border-bottom: 2px solid #4b1e41 !important;

    border-radius: 0 0 7px 7px !important;
}

.np-columns {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 135px !important;
    gap: 7px !important;
}

.np-content {
    padding: 0 6px 15px !important;
}

/* ==========================================================
   LOGIN / MIS ANUNCIOS
   ========================================================== */

/* Imagen + explicación SIEMPRE en la misma fila en escritorio */
.np-login-intro {
    display: grid !important;
    grid-template-columns: 180px 1fr !important;
    column-gap: 15px !important;
    align-items: center !important;

    width: 100% !important;

    margin: 2px 0 4px !important;
}

.np-login-logo {
    width: 180px !important;
    min-width: 180px !important;
}

.np-login-logo img {
    display: block !important;

    width: 180px !important;
    max-width: 180px !important;
    height: auto !important;
}

.np-login-description {
    width: auto !important;
    max-width: none !important;

    margin: 0 !important;

    font-family: Verdana, Arial, Helvetica, sans-serif !important;
    font-size: 11px !important;
    line-height: 14px !important;

    color: #a45a91 !important;
}

.np-login-description strong {
    color: #8c477b !important;
}

/* AVISO, COMO ORIGINAL */
.np-warning {
    margin: 7px 0 0 49px !important;

    font-family: Verdana, Arial, Helvetica, sans-serif !important;
    font-size: 11px !important;
    line-height: 14px !important;

    color: #a00000 !important;
}

/* CAJA DE LOGIN */
.box {
    width: 307px !important;
    max-width: 307px !important;

    margin: 28px auto 0 !important;

    padding: 11px 17px 18px !important;

    background: #f7eef6 !important;
    border-radius: 4px !important;
}

.box h3 {
    margin: 0 0 14px !important;

    font-family: Verdana, Arial, Helvetica, sans-serif !important;
    font-size: 11px !important;

    color: #9b5888 !important;
}

/* CAMPOS MÁS BAJOS, COMO PASION */
.box label {
    margin: 7px 0 !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 11px !important;

    color: #a05b8f !important;
}

.box input[type="email"],
.box input[type="password"] {
    height: 20px !important;
    padding: 1px 4px !important;

    border: 1px solid #477d43 !important;

    background: #efffec !important;
}

/* MENÚ LATERAL */
.np-sidebar {
    padding-top: 0 !important;
}

.np-menu {
    margin: 0 !important;
}

.np-menu-title {
    height: 18px !important;
    padding: 2px 4px !important;

    font-size: 10px !important;
}

.np-menu a {
    min-height: 25px !important;

    padding: 2px 4px !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 9px !important;
    line-height: 10px !important;
}

/* FOOTER */
.np-footer-links {
    margin-top: 2px !important;
    font-size: 9px !important;
}

.np-copyright {
    padding: 13px 0 18px !important;
    font-size: 9px !important;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 700px) {

    .np-page {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 0 !important;
    }

    .np-header {
        height: 80px !important;
        min-height: 80px !important;
    }

    .np-brand {
        left: 5px !important;
        top: 5px !important;

        width: 140px !important;
        height: 67px !important;
    }

    .np-logo {
        width: 135px !important;
        max-width: 135px !important;
    }

    .np-headline {
        left: 145px !important;
        right: 5px !important;
        top: 12px !important;

        font-size: 10px !important;
        line-height: 13px !important;
    }

    .np-columns {
        display: flex !important;
        flex-direction: column !important;
    }

    .np-content {
        order: 1 !important;
    }

    .np-sidebar {
        order: 2 !important;
    }

    .np-login-intro {
        grid-template-columns: 150px 1fr !important;
        column-gap: 8px !important;
    }

    .np-login-logo,
    .np-login-logo img {
        width: 150px !important;
        min-width: 150px !important;
        max-width: 150px !important;
    }

    .box {
        width: 307px !important;
        max-width: calc(100% - 20px) !important;
    }
}

@media (max-width: 450px) {

    .np-header {
        height: auto !important;
        min-height: 108px !important;
    }

    .np-brand {
        position: relative !important;

        left: auto !important;
        top: auto !important;

        width: 100% !important;
        height: 72px !important;

        justify-content: center !important;
    }

    .np-logo {
        width: 145px !important;
        max-width: 145px !important;
    }

    .np-headline {
        position: relative !important;

        left: auto !important;
        right: auto !important;
        top: auto !important;

        width: 100% !important;

        text-align: center !important;
    }

    .np-login-intro {
        display: block !important;
    }

    .np-login-logo {
        margin-bottom: 8px !important;
    }

    .np-warning {
        margin-left: 0 !important;
    }
}