/*
Theme Name: Twenty Twenty-Five Child
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Template: twentytwentyfive
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Five emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Tags: one-column,custom-colors,custom-menu,custom-logo,editor-style,featured-images,full-site-editing,block-patterns,rtl-language-support,sticky-post,threaded-comments,translation-ready,wide-blocks,block-styles,style-variations,accessibility-ready,blog,portfolio,news
Version: 1.4.1775402408
Updated: 2026-04-05 12:20:08

*/

/* ============================================================
   Login App Pecanera — Agregar a style.css del child theme
   ============================================================ */

/* Tarjeta del formulario */
.custom-login-container {
    background-color: var(--card, #ffffff);
    padding: 2.5rem;
    border-radius: var(--radius, 0.75rem);
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
    border: 1px solid var(--border, #e5d1d4);
}

.custom-login-container h1 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    font-weight: bold;
}

/* Campos del formulario nativo de WordPress */
#loginform p {
    margin-bottom: 1rem;
}

#loginform label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
}

#loginform input[type="text"],
#loginform input[type="password"] {
    width: 100%;
    padding: 0.75rem;
    border-radius: var(--radius, 0.75rem);
    border: 1px solid var(--input, #e5d1d4);
    background-color: transparent;
    color: var(--foreground, #5b4743);
    box-sizing: border-box;
    font-family: inherit;
}

#loginform input[type="text"]:focus,
#loginform input[type="password"]:focus {
    outline: 2px solid var(--ring, #c88041);
    outline-offset: -1px;
}

/* Checkbox "Recordar mis datos" */
.login-remember {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Botón de submit */
#loginform input[type="submit"] {
    width: 100%;
    background-color: var(--primary, #c88041);
    color: var(--primary-foreground, #ffffff);
    border: none;
    padding: 0.75rem;
    border-radius: var(--radius, 0.75rem);
    font-weight: 600;
    cursor: pointer;
    margin-top: 1rem;
    transition: opacity 0.2s;
    font-family: inherit;
}

#loginform input[type="submit"]:hover {
    opacity: 0.9;
}

/* ── Ojito (toggle de contraseña) ── */

/* El wrapper creado por JS para posicionar el botón */
.password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

/* El input de contraseña dentro del wrapper ocupa todo el ancho */
.password-wrapper input[type="text"],
.password-wrapper input[type="password"] {
    padding-right: 2.75rem;
    /* espacio para el botón */
}

/* Botón ojito */
.toggle-password {
    position: absolute;
    right: 0.75rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--foreground, #5b4743);
    opacity: 0.5;
    display: flex;
    align-items: center;
    transition: opacity 0.2s;
    line-height: 0;
    /* evita espacio extra alrededor del SVG */
}

.toggle-password:hover {
    opacity: 1;
}

.toggle-password:focus-visible {
    outline: 2px solid var(--ring, #c88041);
    border-radius: 4px;
}

/* ── Mensaje de error AJAX ── */
.login-error-msg {
    display: none;
    background-color: #fde8e8;
    color: #9b2c2c;
    border: 1px solid #feb2b2;
    border-radius: var(--radius, 0.75rem);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    margin-bottom: 1rem;
    text-align: center;
}