/*
 * portal-cuidador.css
 * v12 (Inputs acentuados para portal de cuidador + Fix DNI)
 */

/* ==========================================================================
   Estructura Base y Fix de Desborde
   ========================================================================== */
.portal-section, .pethome-frontend-form {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Forzamos el modelo de caja para que bordes/padding no sumen ancho */
.portal-section *, .portal-section *::before, .portal-section *::after {
    box-sizing: border-box !important;
}

/* ==========================================================================
   Inputs y Campos de Formulario (Formato Original)
   ========================================================================== */

/* Selectores unificados para asegurar el formato en todo el portal.
   Se acentúa el color de los campos usados por:
   [portal_cuidador], [portal_cuidador_editar], [portal_cuidador_guardas],
   [portal_cuidador_documentos] y [portal_cuidador_pdfs]. */
.portal-cuidador,
.portal-section,
.pethome-frontend-form {
    --phh-input-border: rgba(104, 118, 221, .62);
    --phh-input-border-strong: #6876DD;
    --phh-input-focus: #F022A7;
    --phh-input-bg: #f7f2ff;
    --phh-input-bg-focus: #ffffff;
    --phh-input-text: #1f2440;
    --phh-input-shadow: 0 8px 18px rgba(104, 118, 221, .18), inset 0 1px 2px rgba(255,255,255,.75);
}

.portal-cuidador input[type="text"],
.portal-cuidador input[type="email"],
.portal-cuidador input[type="password"],
.portal-cuidador input[type="tel"],
.portal-cuidador input[type="number"],
.portal-cuidador input[type="url"],
.portal-cuidador input[type="date"],
.portal-cuidador input[type="time"],
.portal-cuidador select,
.portal-cuidador textarea,
.portal-section input[type="text"],
.portal-section input[type="email"],
.portal-section input[type="password"],
.portal-section input[type="tel"],
.portal-section input[type="number"],
.portal-section input[type="url"],
.portal-section input[type="date"],
.portal-section input[type="time"],
.portal-section select,
.portal-section textarea,
.pethome-frontend-form .phh-form-field input[type="text"],
.pethome-frontend-form .phh-form-field input[type="email"],
.pethome-frontend-form .phh-form-field input[type="password"],
.pethome-frontend-form .phh-form-field input[type="tel"],
.pethome-frontend-form .phh-form-field input[type="number"],
.pethome-frontend-form .phh-form-field select,
.pethome-frontend-form .phh-form-field textarea,
#portal-cuidador-loginform input[type="text"],
#portal-cuidador-loginform input[type="password"] {
    width: 100% !important;
    min-height: 44px !important;
    padding: 11px 13px !important;
    color: var(--phh-input-text) !important;
    background: linear-gradient(180deg, #ffffff 0%, var(--phh-input-bg) 100%) !important;
    border: 2px solid var(--phh-input-border) !important;
    border-radius: 14px !important;
    box-shadow: var(--phh-input-shadow) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    outline: none !important;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease, transform .18s ease !important;
}

.portal-cuidador input::placeholder,
.portal-section input::placeholder,
.portal-cuidador textarea::placeholder,
.portal-section textarea::placeholder {
    color: rgba(31, 36, 64, .52) !important;
}

.portal-cuidador input[type="text"]:focus,
.portal-cuidador input[type="email"]:focus,
.portal-cuidador input[type="password"]:focus,
.portal-cuidador input[type="tel"]:focus,
.portal-cuidador input[type="number"]:focus,
.portal-cuidador input[type="url"]:focus,
.portal-cuidador input[type="date"]:focus,
.portal-cuidador input[type="time"]:focus,
.portal-cuidador select:focus,
.portal-cuidador textarea:focus,
.portal-section input[type="text"]:focus,
.portal-section input[type="email"]:focus,
.portal-section input[type="password"]:focus,
.portal-section input[type="tel"]:focus,
.portal-section input[type="number"]:focus,
.portal-section input[type="url"]:focus,
.portal-section input[type="date"]:focus,
.portal-section input[type="time"]:focus,
.portal-section select:focus,
.portal-section textarea:focus,
#portal-cuidador-loginform input[type="text"]:focus,
#portal-cuidador-loginform input[type="password"]:focus {
    background: var(--phh-input-bg-focus) !important;
    border-color: var(--phh-input-focus) !important;
    box-shadow: 0 0 0 4px rgba(240, 34, 167, .16), 0 12px 28px rgba(104, 118, 221, .25) !important;
    transform: translateY(-1px) !important;
}

.portal-cuidador input[readonly],
.portal-section input[readonly],
.pethome-frontend-form .phh-form-field input[readonly] {
    background: linear-gradient(180deg, #f6f6fb 0%, #e9ecf7 100%) !important;
    border-color: rgba(104, 118, 221, .35) !important;
    color: #5d647a !important;
    box-shadow: inset 0 2px 8px rgba(0,0,0,.06) !important;
}

.portal-cuidador input[type="checkbox"],
.portal-section input[type="checkbox"] {
    accent-color: var(--phh-input-focus) !important;
}

.pethome-frontend-form .phh-form-field label,
.portal-section label,
#portal-cuidador-loginform label {
    margin-bottom: 7px !important;
    font-weight: 800 !important;
    display: block !important;
    color: #25305f !important;
    letter-spacing: .01em !important;
}

/* ==========================================================================
   Botones (Color Campeonato #67D0B6)
   ========================================================================== */
.phh-submit-button,
#portal-cuidador-loginform .login-submit input[type="submit"] {
    background-color: #67D0B6 !important; /* Color campeonato */
    color: white !important;
    padding: 10px 20px !important;
    border: none !important;
    border-radius: 5px !important; /* Valor original */
    cursor: pointer !important;
    font-size: 16px !important;
    font-weight: bold !important;
    transition: background-color 0.3s ease !important;
}

.phh-submit-button:hover,
#portal-cuidador-loginform .login-submit input[type="submit"]:hover {
    background-color: #5cb29d !important;
}

/* ==========================================================================
   Grillas e Imágenes (Fix de DNI mantenido)
   ========================================================================== */
.pethome-frontend-form .pethome-metabox-grid {
    display: grid !important;
    gap: 20px !important;
    grid-template-columns: repeat(3, 1fr) !important;
}

.phh-dni-container {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    margin-top: 10px !important;
}

.phh-domicilio-imagenes-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 15px !important;
}

.phh-image-preview-box {
    width: 100% !important;
    aspect-ratio: 1.5 / 1 !important;
    border: 2px dashed rgba(104, 118, 221, .72) !important;
    border-radius: 14px !important;
    overflow: hidden !important; /* Mantiene bordes derechos visibles */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(180deg, #ffffff 0%, #f7f2ff 100%) !important;
    box-shadow: 0 8px 18px rgba(104, 118, 221, .14) !important;
}

.phh-image-preview-box:hover {
    border-color: #F022A7 !important;
    box-shadow: 0 0 0 4px rgba(240, 34, 167, .12), 0 14px 30px rgba(104, 118, 221, .18) !important;
}

/* ==========================================================================
   Responsividad (Mobile Fix)
   ========================================================================== */
@media (max-width: 768px) {
    .pethome-frontend-form .pethome-metabox-grid,
    .phh-dni-container {
        grid-template-columns: 1fr !important;
    }
    .phh-domicilio-imagenes-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    #portal-cuidador-loginform {
        flex-direction: column !important;
    }
}

/* ==========================================================================
   Icono de subida
   ========================================================================== */
.phh-image-preview-box .placeholder-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #888;
    text-align: center;
}

.phh-image-preview-box .placeholder-text i {
    font-size: 3em !important;
    margin-bottom: 10px;
}

.phh-image-preview-box .placeholder-text span {
    font-size: 1em;
    font-weight: bold;
}