/*
 * PrayCrew brand identity — Fase 1 (auth/onboarding).
 * Scope: solo body.login-body. NO afecta dashboard/views.
 * Carga: DESPUÉS de diamond layout-*.css y login.css.
 *
 * Tokens alineados con praycrew-app-1/src/theme/variables.scss
 * y refinados con la paleta visible en praycrew.com.
 */

:root {
    /* Marca */
    --pc-brand-deep:    #244151;
    --pc-brand-accent:  #E3C3A2;
    --pc-brand-shade:   #5E7C90;
    --pc-brand-warm:    #E8895C;

    /* Superficies (cremas igual a praycrew.com) */
    --pc-surface-bg:    #F5EBDC;
    --pc-surface-card:  #FFFFFF;
    --pc-surface-soft:  #FAF1E2;
    --pc-surface-pill:  #FBE9D3;

    /* Texto */
    --pc-text-primary:   #244151;
    --pc-text-secondary: #6F8794;
    --pc-text-muted:     #8A99A3;
    --pc-text-on-brand:  #FFFFFF;

    /* Bordes */
    --pc-divider: rgba(36, 65, 81, 0.10);

    /* Radios */
    --pc-radius-input: 10px;
    --pc-radius-card:  18px;
    --pc-radius-pill:  9999px;

    /* Sombras */
    --pc-shadow-soft:   0 2px 10px rgba(0, 0, 0, 0.06);
    --pc-shadow-medium: 0 10px 28px rgba(0, 0, 0, 0.10);

    /* Tipografía — design tokens del PO (DESIGN_TOKENS.md §4), alineada con el portal. */
    --pc-font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
    --pc-font-sans:  'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --pc-font-mono:  'DM Mono', ui-monospace, 'SFMono-Regular', 'Cascadia Code', Consolas, monospace;
}

/* === Base tipográfica === */
body.login-body,
body.login-body .login-panel,
body.login-body .login-form,
body.login-body .login-image-content {
    font-family: var(--pc-font-sans);
    color: var(--pc-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headings — serif italic (firma visual de la marca) */
body.login-body .login-form h2,
body.login-body .login-image-content h1 {
    font-family: var(--pc-font-serif);
    font-style: italic;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

body.login-body .login-form h2 {
    color: var(--pc-text-primary);
    font-size: 2rem;          /* 32px */
    margin: 0 0 1.5rem 0;
}

body.login-body .login-image-content h1 {
    color: var(--pc-text-on-brand);
    font-size: 2.75rem;       /* 44px */
    margin: 0 0 1rem 0;
}

body.login-body .login-image-content h3 {
    font-family: var(--pc-font-sans);
    font-weight: 400;
    font-size: 1.0625rem;     /* 17px */
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
}

body.login-body .login-form > p {
    font-family: var(--pc-font-sans);
    color: var(--pc-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.55;
    margin: 0 0 1.5rem 0;
}

/* === Fondo página === */
body.login-body {
    background-color: var(--pc-surface-bg) !important;
    background-image: none !important;
}

/* Panel derecho: la foto real (bg-login2.webp) viene de un <style> inline
   en cada XHTML usando una expresion JSF resource (EL garantizado en XHTML).
   Aqui: color de fallback + overlay gradient de marca para legibilidad
   del texto blanco sobre fotos con zonas claras (ventana, rostro, mesa).
   NOTA: NO escribir literalmente "hashtag-llave-resource" en este archivo
   porque el ResourceHandler de JSF escanea CSS buscando EL y crashea. */
body.login-body .login-wrapper .login-image {
    background-color: var(--pc-brand-deep);
    position: relative;
}

/* Tinte petróleo en gradiente: fuerte arriba-izquierda (donde caen h1/h3)
   y suave abajo-derecha para no aplastar la foto. */
body.login-body .login-wrapper .login-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(36, 65, 81, 0.78) 0%,
        rgba(36, 65, 81, 0.55) 45%,
        rgba(36, 65, 81, 0.25) 100%
    );
    pointer-events: none;
    z-index: 0;
}

/* Asegurar que h1/h3 y el footer queden sobre el overlay */
body.login-body .login-wrapper .login-image > .login-image-content,
body.login-body .login-wrapper .login-image > .image-footer {
    position: relative;
    z-index: 1;
}

/* Text-shadow sutil para reforzar contraste en cualquier punto */
body.login-body .login-image-content h1,
body.login-body .login-image-content h3 {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

body.login-body .login-wrapper .login-panel {
    background: var(--pc-surface-card);
}

/* === Form container más ancho === */
body.login-body .login-form {
    width: 440px;
    max-width: 92vw;
}

body.login-body .login-image-content {
    width: 500px;
    max-width: 90%;
}

/* === Inputs respirando ===
   Cubre 3 variantes de p:password:
   - bare (login):           <input class="ui-password ui-inputtext">
   - toggleMask (register):  <span class="ui-password"><input ...></span>
   - feedback (register pw): igual a toggleMask                          */
body.login-body .login-form .ui-inputtext,
body.login-body .login-form input.ui-password,
body.login-body .login-form .ui-password input,
body.login-body .login-form .ui-selectonemenu {
    font-family: var(--pc-font-sans);
    font-size: 0.9375rem;
    padding: 14px 16px;
    border: 1px solid var(--pc-divider) !important;
    border-radius: var(--pc-radius-input) !important;
    background: var(--pc-surface-card) !important;
    color: var(--pc-text-primary);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-shadow: none;
}

body.login-body .login-form .ui-inputtext:focus,
body.login-body .login-form input.ui-password:focus,
body.login-body .login-form .ui-password input:focus,
body.login-body .login-form .ui-selectonemenu.ui-state-focus,
body.login-body .login-form .ui-selectonemenu:not(.ui-state-disabled):focus {
    outline: none;
    border-color: var(--pc-brand-accent) !important;
    box-shadow: 0 0 0 3px rgba(227, 195, 162, 0.30) !important;
}

body.login-body .login-form .ui-inputtext::placeholder,
body.login-body .login-form input.ui-password::placeholder {
    color: var(--pc-text-muted);
    opacity: 1;
}

/* SelectOneMenu wrapper NO lleva padding (el padding va en el label interno).
   Sin esta regla, el padding del wrapper + el del label se suman y el combo
   queda casi al doble de alto que los inputs. */
body.login-body .login-form .ui-selectonemenu {
    padding: 0 !important;
}

/* Ancho uniforme: ocupar 100% del form-container (en vez del 85%/310px de Diamond) */
body.login-body .login-form > .ui-inputtext,
body.login-body .login-form > input,
body.login-body .login-form > input.ui-password,
body.login-body .login-form > .ui-password,
body.login-body .login-form > .ui-selectonemenu,
body.login-body .login-form > .ui-button,
body.login-body .login-form > a.ui-button,
body.login-body .login-form > button {
    width: 100% !important;
    max-width: 100% !important;
    display: block;
    margin-bottom: 18px;
    box-sizing: border-box;
}

body.login-body .login-form > .ui-password > input,
body.login-body .login-form > .ui-password input {
    width: 100% !important;
    box-sizing: border-box;
}

/* Toggle eye del p:password */
body.login-body .login-form .ui-password .ui-password-icon {
    color: var(--pc-text-muted);
    right: 14px;
}

/* === Botones pill === */
body.login-body .ui-button {
    font-family: var(--pc-font-sans);
    font-weight: 600;
    font-size: 0.9375rem;
    padding: 13px 28px;
    border-radius: var(--pc-radius-pill) !important;
    border: 1px solid transparent;
    background: var(--pc-brand-deep);
    color: var(--pc-text-on-brand);
    box-shadow: none;
    transition: background 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
    /* Centrar contenido para que el icono no se pegue al borde izquierdo */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    line-height: 1.2;
}

body.login-body .ui-button:hover {
    background: #1A3344;
    color: var(--pc-text-on-brand);
}

body.login-body .ui-button:active {
    transform: translateY(1px);
}

body.login-body .ui-button:focus {
    box-shadow: 0 0 0 3px rgba(227, 195, 162, 0.35);
    outline: none;
}

/* Icono del botón — Diamond lo posiciona absoluto desde la izquierda
   (default left: 4px). Lo empujamos a 1.5rem para que respire dentro
   del pill. Mismo approach que template.css. */
body.login-body .ui-button.ui-button-text-icon-left .ui-icon {
    left: 1.5rem;
}
body.login-body .ui-button.ui-button-text-icon-right .ui-icon {
    right: 1.5rem;
}

/* Botón secundario — fill cremita warm para que NO se confunda con el bg de página */
body.login-body .ui-button.ui-button-secondary,
body.login-body .ui-button-secondary,
body.login-body .ui-button-secondary.ui-button-flat,
body.login-body a.ui-button.ui-button-secondary,
body.login-body a.ui-button.ui-button-secondary.ui-button-flat {
    background: #EFDFC4;
    color: var(--pc-brand-deep);
    border: 1px solid var(--pc-brand-accent);
}

body.login-body .ui-button.ui-button-secondary:hover,
body.login-body .ui-button-secondary:hover,
body.login-body .ui-button-secondary.ui-button-flat:hover,
body.login-body a.ui-button.ui-button-secondary:hover,
body.login-body a.ui-button.ui-button-secondary.ui-button-flat:hover {
    background: var(--pc-brand-accent);
    color: var(--pc-brand-deep);
    border-color: var(--pc-brand-accent);
}

/* === Checkbox términos (register) === */
body.login-body .ui-chkbox .ui-chkbox-box {
    border-radius: 5px;
    border-color: var(--pc-divider);
}

body.login-body .ui-chkbox .ui-chkbox-box.ui-state-active {
    background: var(--pc-brand-deep);
    border-color: var(--pc-brand-deep);
}

/* La palomita en blanco para que contraste sobre el box oscuro de marca. */
body.login-body .ui-chkbox .ui-chkbox-box.ui-state-active .ui-chkbox-icon {
    color: #fff;
}

body.login-body .ui-chkbox .ui-chkbox-box.ui-state-focus {
    box-shadow: 0 0 0 3px rgba(227, 195, 162, 0.30);
    border-color: var(--pc-brand-accent);
}

/* === Messages / errores === */
body.login-body .ui-messages,
body.login-body .ui-messages-error {
    border-radius: var(--pc-radius-input);
    border-width: 1px;
}

body.login-body .ui-messages-error {
    background: #FDECEA;
    border-color: #F5C1BC;
    color: #8B2A26;
}

body.login-body .ui-messages-info {
    background: var(--pc-surface-soft);
    border-color: var(--pc-brand-accent);
    color: var(--pc-brand-deep);
}

/* === SelectOneMenu (country en first-church) === */
body.login-body .login-form .ui-selectonemenu .ui-selectonemenu-label {
    padding: 14px 16px;
    color: var(--pc-text-primary);
    font-size: 0.9375rem;
    background: transparent;
    border: none;
}

body.login-body .login-form .ui-selectonemenu .ui-selectonemenu-trigger {
    color: var(--pc-text-muted);
    background: transparent;
    border: none;
}

/* === Logo === */
body.login-body .login-panel .logo {
    margin-bottom: 1.5rem;
}

/* === Iconos sociales del image-footer === */
body.login-body .image-footer .icons a {
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.15s ease;
}

body.login-body .image-footer .icons a:hover {
    color: var(--pc-brand-accent);
}


/* =====================================================================
   FEAT-154 — Subscription status badges
   Usado en la columna "Suscripción" de organizations.xhtml y churches.xhtml,
   y como header del dialog "Mi suscripción".
   ===================================================================== */

.pc-sub-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem .65rem;
    border-radius: var(--pc-radius-pill);
    font-size: .85em;
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: filter .15s ease, transform .1s ease;
}

.pc-sub-badge:hover {
    filter: brightness(.97);
    text-decoration: none;
}

.pc-sub-badge:active {
    transform: translateY(1px);
}

.pc-sub-badge--active {
    background: #E6F4EA;
    color: #1B5E20;
    border-color: #A5D6A7;
}

.pc-sub-badge--grace {
    background: #FFF8E1;
    color: #6F4F00;
    border-color: #FFD54F;
}

.pc-sub-badge--inactive {
    background: var(--pc-surface-soft);
    color: var(--pc-text-secondary);
    border-color: var(--pc-divider);
}