/**
 * PyroMU — login_overlay.css  [Login Overlay Patch]
 * =====================================================
 * Posicionamiento pixel-perfecto del formulario de login
 * sobre el arte dibujado en header_full.jpg (1000×313px).
 *
 * Valores calculados con análisis de píxeles de la imagen:
 *   - Borde superior del cuadro dibujado: template y = 99px
 *   - Borde derecho del cuadro:           template x = 994px → right: 6px
 *   - Ancho del cuadro:                   365px
 *   - Centro línea 1 (username input):    template y = 142px → 43px desde el top del container
 *   - Centro línea 2 (password input):    template y = 172px → 73px desde el top del container
 *   - "forgot your password?":            template y = 194px → 95px desde el top del container
 *
 * Añade este archivo a tu template y enlázalo en index.php:
 *   <link href="<?= __PATH_TEMPLATE_CSS__; ?>login_overlay.css" rel="stylesheet">
 * =====================================================
 */

/* ═══════════════════════════════════════════════════════
   1. CONTENEDOR: completamente invisible
   Ocupa exactamente el cuadro dibujado en el header art.
════════════════════════════════════════════════════════ */
.pyromu-cp-panel {
    position:         absolute;
    top:              170px;      /* borde superior del cuadro dibujado */
    right:            6px;       /* borde derecho del cuadro dibujado  */
    width:            365px;     /* ancho del cuadro en template 1000px */
    height:           115px;     /* cubre hasta el "forgot your password?" */
    z-index:          20;

    /* ── INVISIBLE — sin fondo, sin borde, sin sombra ── */
    background:       transparent !important;
    background-color: transparent !important;
    border:           none       !important;
    box-shadow:       none       !important;
    padding:          0          !important;
    margin:           0;
    overflow:         visible;
}

/* ── "ACCOUNT LOGIN" oculto: el arte tiene "CONTROL PANEL" dibujado ── */
.pyromu-cp-title {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════
   2. FORMULARIO: contenedor relativo para anclar hijos
════════════════════════════════════════════════════════ */
#pyromu-login-form {
    position: relative;
    width:    100%;
    height:   115px;
    margin:   0;
    padding:  0;
}

/* ═══════════════════════════════════════════════════════
   3. LABELS — texto dorado sobre las líneas dibujadas
════════════════════════════════════════════════════════ */
.pyromu-lbl {
    position:       absolute;
    left:           14px;
    color:          rgba(200, 160, 80, 0.92);
    font-size:      10px;
    font-family:    Verdana, Arial, sans-serif;
    font-weight:    normal;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height:    1;
    cursor:         default;
    white-space:    nowrap;
}

/* Label Username: 13px encima de la línea 1 dibujada (top=32px) */
#pyromu-lbl-user { top: 19px; }

/* Label Password: 13px encima de la línea 2 dibujada (top=62px) */
#pyromu-lbl-pass { top: 66px; }

/* ═══════════════════════════════════════════════════════
   4. INPUTS — transparentes, alineados con líneas del arte
   Input 1 center: 43px from container top
   Input 2 center: 73px from container top
════════════════════════════════════════════════════════ */

/* Base compartida para ambos inputs */
#pyromu-inp-user,
#pyromu-inp-pass {
    position:   absolute;
    left:       14px;
    width:      240px;     /* ancho hasta dejar espacio para el botón IN */
    height:     20px;

    /* ── TRANSPARENTE ── */
    background:       transparent !important;
    background-color: transparent !important;
    border:           none        !important;
    /* Solo borde inferior: evoca la línea dibujada del arte */
    border-bottom:    1px solid rgba(200, 160, 80, 0.28) !important;
    box-shadow:       none        !important;
    outline:          none        !important;
    -webkit-appearance: none;

    color:        #ffffff !important;
    font-size:    12px;
    font-family:  Verdana, Arial, sans-serif;
    padding:      1px 4px 2px;
    caret-color:  #d69032;
    transition:   border-bottom-color 0.2s ease;
}

/* Foco: línea inferior se ilumina */
#pyromu-inp-user:focus,
#pyromu-inp-pass:focus {
    border-bottom-color: rgba(214, 144, 50, 0.80) !important;
}

/* Username: top = centro(43) - altura/2(10) = 33px */
#pyromu-inp-user { top: 38px; }

/* Password: top = centro(73) - altura/2(10) = 63px */
#pyromu-inp-pass { top: 80px; }

/* ═══════════════════════════════════════════════════════
   5. BOTÓN IN — transparente, alineado con username input
   Posición: left = 14 + 240 + 8 = 262px
             top  = misma que username input
════════════════════════════════════════════════════════ */
#pyromu-btn-in {
    position:    absolute;
    top:         33px;      /* alineado con username input */
    left:        262px;     /* 14px padding + 240px input + 8px gap */

    /* ── TRANSPARENTE ── */
    background:  transparent !important;
    border:      none        !important;
    box-shadow:  none        !important;
    padding:     0;
    margin:      0;
    cursor:      pointer;
    opacity:     0.88;
    transition:  opacity 0.15s ease;

    /* Tamaño del botón login.jpg (original: 40×40px) */
    width:  40px;
    height: 40px;
    vertical-align: top;
}
#pyromu-btn-in:hover  { opacity: 1; }
#pyromu-btn-in:active { opacity: 0.7; transform: scale(0.96); }

/* ═══════════════════════════════════════════════════════
   6. "forgot your password?" — debajo del password input
   template y = 194px → 95px desde container top
════════════════════════════════════════════════════════ */
#pyromu-forgot {
    position:        absolute;
    top:             105px;   /* container top=99 + 88 = template y=187 ≈ 194 */
    left:            14px;

    color:           rgba(200, 160, 80, 0.76);
    font-size:       10px;
    font-family:     Verdana, Arial, sans-serif;
    text-decoration: none;
    letter-spacing:  0.2px;
    line-height:     1;
    transition:      color 0.15s ease;
}
#pyromu-forgot:hover {
    color:           rgba(214, 144, 50, 1);
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════
   7. ESTADO LOGUEADO — también sin caja oscura
════════════════════════════════════════════════════════ */
.pyromu-cp-logged {
    position:   absolute;
    top:        30px;   /* debajo del "CONTROL PANEL" art text */
    left:       14px;
    right:      14px;
}
.pyromu-cp-logged-name {
    color:       #ffffff;
    font-size:   11px;
    font-family: Verdana, Arial, sans-serif;
    display:     block;
    margin-bottom: 6px;
}
.pyromu-cp-logged-name strong { color: #d69032; }
.pyromu-cp-logged-links {
    display:     flex;
    gap:         8px;
    flex-wrap:   wrap;
}
.pyromu-cp-logged-btn {
    background:  rgba(90, 26, 10, 0.70);
    color:       #fff  !important;
    border:      1px solid rgba(138, 58, 26, 0.60);
    padding:     3px 10px;
    font-size:   10px;
    font-family: Verdana, Arial;
    text-decoration: none !important;
    transition:  background 0.15s;
}
.pyromu-cp-logged-btn:hover         { background: rgba(122, 42, 10, 0.90); }
.pyromu-cp-logged-btn.logout        { border-color: rgba(138, 26, 26, 0.60); }
.pyromu-cp-logged-btn.logout:hover  { background: rgba(90, 10, 10, 0.90); }

/* ═══════════════════════════════════════════════════════
   8. AJUSTES DE POSICIONAMIENTO FINO
   Usa estas variables CSS para ajuste rápido sin tocar el resto:
   Cambia los valores directamente aquí si necesitas mover algo.
════════════════════════════════════════════════════════ */
:root {
    --cp-top:            99px;   /* ↑↓ mover todo el panel verticalmente */
    --cp-right:          6px;    /* ←→ mover todo el panel horizontalmente */
    --cp-inp1-top:       33px;   /* ↑↓ ajustar solo username input */
    --cp-inp2-top:       63px;   /* ↑↓ ajustar solo password input  */
    --cp-btn-left:       262px;  /* ←→ ajustar posición del botón IN */
    --cp-forgot-top:     88px;   /* ↑↓ ajustar "forgot password?"   */
}